@charset "UTF-8";
/* CSS Document */

/*-- all --*/
/* all-h3 */
#index #content .c-tit {
	position: relative;
	padding-bottom: 30px;
	z-index: 1
}

	@media (max-width: 428px) {
		#index #content .c-tit {
			padding-bottom: 20px
		}
	}

#index #content .c-tit::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 12em;
	height: 5px;
	background-color: #dcdcdc
}

	@media (max-width: 810px) {
		#index #content .c-tit::before {
			width: 8em
		}
	}

	@media (max-width: 428px) {
		#index #content .c-tit::before {
			width: 6em;
			height: 4px
		}
	}

#index #content .c-tit::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 12em;
	width: calc(100% - 12em);
	height: 1px;
	background-color: #dcdcdc
}

	@media (max-width: 810px) {
		#index #content .c-tit::after {
			left: 8em;
			width: calc(100% - 8em)
		}
	}

	@media (max-width: 428px) {
		#index #content .c-tit::after {
			left: 6em;
			width: calc(100% - 6em)
		}
	}

#index #content .c-tit span:first-of-type {
	font-size: 4.2rem;
	color: #a0d137;
	z-index: 1;
	position: relative
}

	@media (max-width: 428px) {
		#index #content .c-tit span:first-of-type {
			font-size: 3rem
		}
	}

#index #content .c-tit span:last-of-type {
	font-weight: 300;
	font-size: 16rem;
	font-style: normal;
	position: absolute;
	right: 0px;
	top: -52px;
	color: #f2f2f2;
	height: 123px;
	overflow: hidden
}

	@media (max-width: 428px) {
		#index #content .c-tit span:last-of-type {
			font-size: 6rem;
			top: 2px;
			height: 47px
		}
	}

#index #content .h-box + div,
#index #content .h-box + ul {
	padding-top: 6%
}

	@media (max-width: 810px) {
		#index #content .h-box + div,
		#index #content .h-box + ul {
			padding-top: 12%
		}
	}

#works.all .c-tit2 {
	font-size: 4.2rem;
	color: #a0d137;
	text-align: center;
	z-index: 1;
	position: relative;
	padding-bottom: 6%
}

	@media (max-width: 810px) {
		#works.all .c-tit2 {
			padding-bottom: 12%
		}
	}

	@media (max-width: 428px) {
		#works.all .c-tit2 {
			font-size: 3rem
		}
	}

#under #works.all .c-tit2 {
	font-weight: 500
}

#works.all .c-tit2::after {
	content: "";
	background: #dcdcdc;
	height: 5px;
	width: 50px;
	display: block;
	margin: 30px auto 0
}

	@media (max-width: 428px) {
		#works.all .c-tit2::after {
			height: 4px;
			width: 30px;
			margin: 20px auto 0
		}
	}

#works.all .c-tit2 span {
	font-weight: 300;
	position: absolute;
	top: 50%;
	right: 10%;
	font-size: 160px;
	color: #f2f2f2;
	overflow-wrap: normal
}

	@media (max-width: 428px) {
		#works.all .c-tit2 span {
			top: 120%;
			right: 0
		}
	}
/* /all-h3 */

/* all-button1 */
.button1 {
	width: max-content;
	height: auto;
	position: relative;
	margin: 6% auto
}

	@media (max-width: 428px) {
		.button1 {
			margin: 12% auto 15%
		}
		#index .button1 {
			padding-right: 3%
		}
		#works-detail.button1 {
			margin: 12% auto 21%
		}
	}

#news.detail .button1 {
	margin: 6% auto 0
}

	@media (max-width: 428px) {
		#news.detail .button1 {
			margin: 12% auto 0
		}
	}

@media (max-width: 428px) {
	#works-detail .wrap .button1 {
		margin: 18% auto 21%
	}
	#works-detail .wrap .button1.button2 {
		margin: 12% auto 15%
	}
}

.h-box .button1 {
	position: absolute;
	top: -51px;
	right: 0;
	z-index: 2
}

	@media (max-width: 428px) {
		.h-box .button1 {
			top: -42px
		}
	}

.button1 a {
	line-height: 1.5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 400;
	padding: 24px 24px 24px 40px;
	border-radius: 60px;
	background-color: #f5f5f5;
	transition: color .2s cubic-bezier(0.33, 1, 0.68, 1)
}

	@media (max-width: 428px) {
		.button1 a {
			padding: 15px 15px 15px 26px
		}
	}

form .button1 br {
	display: none
}

.button2 a {
	background-color: #9dd238;
	background: linear-gradient(90deg, #a0d137, #37d1cf);
	color: #fff;
	text-align: center
}

.h-box .button1 a {
	background: none;
	padding: 0
}

.button1 a .arrow {
	width: 40px;
	height: 40px;
	margin-left: 15px;
	transition: width .2s cubic-bezier(0.33, 1, 0.68, 1),height .2s cubic-bezier(0.33, 1, 0.68, 1)
}

	@media (max-width: 428px) {
		.button1 a .arrow {
			width: 36px;
			height: 36px;
			margin-left: 10px
		}
	}

.button1 a .arrow img {
	width: 12px;
	height: 12px;
	z-index: 1
}

.button1.button2 a .arrow img {
	width: 16px;
	height: 16px
}

.button1 a .arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	position: relative;
	border-radius: 50%
}

.button1 a .arrow::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0 auto auto 0;
	border-radius: 50%;
	transition: transform .64s cubic-bezier(0, 0.55, 0.45, 1);
	border: 2px solid #9dd238;
	box-sizing: border-box
}

.button2 a .arrow::before {
	border: 2px solid #fff
}

.button1 a .arrow::before {
	transition: transform .64s cubic-bezier(0, 0.55, 0.45, 1)
}

.button1 a:hover .arrow::before {
	transform: scale(1.25);
	transition: transform .1s cubic-bezier(0.33, 1, 0.68, 1)
}

.works-button {
	position: relative;
	padding-bottom: 6px;
	margin: 6% 3% 0 3% !important;
	border-bottom: 2px solid #a0d137;
	display: inline-block
}

.works-button:hover {
	border-bottom: 1px solid #a0d137;
	transition-duration: 400ms
}
/* /all-button1 */

/* all-decoration */
#index #content #about .decoration {
	position: absolute;
	bottom: -25%;
	right: -10%;
	width: 50%
}

	@media (max-width: 428px) {
		#index #content #about .decoration {
			bottom: -10%;
			right: -20%;
			width: 100%
		}
	}

#index #content #service .decoration:first-of-type {
	position: absolute;
	top: 0;
	left: 0
}

#index #content #service .decoration:last-of-type {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(-180deg)
}

	@media (max-width: 428px) {
		#index #content #service .decoration:last-of-type {
			bottom: 37%
		}
	}

#works.all .decoration {
	position: absolute;
	top: -15%;
	left: auto;
	right: 0
}

	@media (max-width: 428px) {
		#works.all .decoration {
			top: 0
		}
	}

#index #content #works.all .decoration {
	top: 0
}

#index #content #news .decoration:first-of-type {
	position: absolute;
	top: 0;
	left: 0
}

#index #content #news .decoration:last-of-type {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(-180deg)
}

#under .decoration {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1
}

#under #news .decoration {
	left: -3%
}

.decoration img,
.decoration1 img,
.decoration2 img {
	max-width: 636px;
	width: 100%;
	height: auto;
	opacity: 0.8
}

	@media (max-width: 428px) {
		.decoration img,
		.decoration1 img,
		.decoration2 img {
			width: 80%
		}
		.decoration1 img {
			width: 100%
		}
	}
/* /all-decoration */


/* all-c-breadcrumb */
.c-breadcrumb ol {
	display: flex;
	margin-top: 12%;
	z-index: 1;
	position: relative
}

@media (max-width: 428px) {
	#news .c-breadcrumb ol {
		margin: 12% 3% 0
	}
}

.c-breadcrumb ol li:first-of-type {
	color: #a0d137;
	display: inherit
}

.c-breadcrumb ol li:not(:last-child)::after {
	padding: 0 15px 0 10px;
	content: "/";
	color: #c3c3c4
}
/* /all-c-breadcrumb */

.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 0.8s;
	animation-fill-mode:f orwards
}
	@keyframes zoomInAnime{
		from {
			opacity: 0;
			transform: scale(0.8)
		}

		to {
			opacity: 1;
			transform: scale(1)
		}
	}

/* all-under */
#under {
	margin-bottom: 700px;
	width: 100%;
	overflow-x: clip
}

	@media (max-width: 1100px) {
		#under {
			border-radius: 0;
			margin-bottom: auto
		}
	}

#under main {
	background: #fcfcfc;
	z-index: 1;
	position: relative;
	border-radius: 0 0 90px 90px
}

	@media (max-width: 428px) {
		#under main {
			border-radius: 0 0 45px 45px
		}
	}

.first-view {
	position: relative;
	height: 100vh;
	background: #fcfcfc;
	z-index: 1
}

	@media (max-width: 1100px) {
		.first-view {
			height: auto;
			z-index: auto
		}
	}

.first-view #h1 {
	position: absolute;
	top: 55%;
	right: 65%;
	z-index: 2
}

	@media (max-width: 1400px) {
		.first-view #h1 {
			right: auto;
			left: 9%
		}
	}

	@media (max-width: 1100px) {
		.first-view #h1 {
			position: relative;
			top: 0;
			left: 0;
			margin: 15% 11% -3%;
			z-index: 2
		}
	}

#h1 h1 span {
	display: block;
	font-weight: 500
}

#h1 h1 span:first-of-type {
	display: flex;
	align-items: center
}

#h1 h1 span:first-of-type::before {
	content: "";
	display: block;
	background: url("../images/h2_icon.svg") center center no-repeat;
	width: 23px;
	height: 42px;
	background-size: 23px 42px;
	flex-shrink: 0;
	margin-right: 12px
}

	@media (max-width: 428px) {
		#h1 h1 span:first-of-type::before {
			width: 23px;
			height: 27px;
			background-size: 23px 27px;
			margin-right: 6px
		}
	}

#h1 h1 span:last-of-type {
	font-size: 6rem;
	letter-spacing: 0.18em;
	padding-top: 0.78125vw;
	color: #a0d137
}

	@media (max-width: 650px) {
		#h1 h1 span:last-of-type {
			font-size: 9.230769230769232vw
		}
	}

	@media (max-width: 428px) {
		#h1 h1 span:last-of-type {
			font-size: 3rem;
			padding-top: 3%
		}
	}

#policy #h1 h1 span:last-of-type {
	font-size: 4.8rem
}

	@media (max-width: 428px) {
		#policy #h1 h1 span:last-of-type {
			font-size: 2.4rem
		}
	}

#h1 h1 span.thoughts:last-of-type {
	letter-spacing: 0.06em
}

#h1 h1 span:last-of-type em {
	letter-spacing: 0.08em
}

.kv-ttl span {
	display: block;
	clip-path: inset(0 100%0 0);
	animation: textClipPath 1.2s cubic-bezier(.86, 0, .07, 1) .7s forwards
}

@keyframes textClipPath {
	0% {
		clip-path: inset(0 100%0 0)
	}
	to {
		clip-path: inset(0)
	}
}

.first-view figure {
	position: absolute;
	right: 0%;
	z-index: 1;
	padding-right: 12%
}

	@media (max-width: 1100px) {
		.first-view figure {
			position: inherit;
			padding-right: 0;
			padding-top: 28%
		}
	}

.first-view figure img {
	aspect-ratio: 1/1;
	height: 100vh;
	object-fit: cover
}

	@media (max-width: 1100px) {
		.first-view figure img {
			height: auto
		}
	}

.first-view .decoration1 {
	position: absolute;
	bottom: -30%;
	left: -5%
}

	@media (max-width: 1100px) {
		.first-view .decoration1 {
			bottom: auto;
			left: 30%;
			top: -12%
		}
	}

.first-view .decoration2 {
	position: absolute;
	top: 20%;
	right: -15%
}

	@media (max-width: 1100px) {
		.first-view .decoration2 {
			top: 75%;
			right: auto;
			left: -20%
		}
	}

#under #explanation {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1.5% 3%;
	/* font-size: 1.8rem; */
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	backdrop-filter: blur(12px) brightness(115%);
	-webkit-backdrop-filter: blur(12px) brightness(115%);
	background: transparent;
	background-color: hsla(0,0%,100%,.6);
	z-index: 2
}

	@media (max-width: 428px) {
		#under #explanation {
			padding: 5% 6%;
			font-size: 1.4rem;
			line-height: 21px
		}
	}

#under #explanation.is-hide {
	pointer-events: none;
	opacity: 0;
	visibility: hidden
}
/* /all-under */

/*-- all-header --*/
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 2%
}

	@media (max-width: 1100px) {
		header {
			margin: 3%
		}
	}

	@media (max-width: 428px) {
		header {
			margin: 6%;
			transition: all .2s ease-in
		}
		header.is-hide {
			margin: 3%
		}
	}

header nav .sp {
	display: flex;
	align-items: center
}

	@media (min-width: 1101px) {
		header nav .sp {
			display: none
		}
	}

header nav .sp > ul li a {
	display: flex;
	align-items: center;
	border-radius: 90px;
	margin-right: 20px;
	border: 2.5px solid #fff;
	box-sizing: border-box;
	position: relative;
	width: 70px;
	height: 70px
}

	/*@media (max-width: 1100px) {
		#under header nav .sp > ul li a {
			border: 2.5px solid #37383C
		}
	}*/

	@media (max-width: 428px) {
		header nav .sp > ul li a {
			margin-right: 15px;
			width: 45px;
			height: 45px
		}
	}

header nav .sp > ul li a span {
	position: relative;
	padding-left: 12px
}

header nav .sp > ul li a::before {
	content: "";
	background: url("../images/magnifier.svg") center center no-repeat;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto
}

	@media (max-width: 428px) {
		header nav .sp > ul li a::before {
			width: 16px;
			height: 16px
		}
	}

header > p,
header nav ul.nav {
	align-content: center;
	border-radius: 100px;
	height: 80px;
	padding: 0 10px 0 40px;
	backdrop-filter: blur(12px) brightness(115%);
	-webkit-backdrop-filter: blur(12px) brightness(115%);
	background-color: #fff;
	background: transparent;
	background-color: transparent;
	background-color: hsla(0,0%,100%,.6)
}

	@media (max-width: 428px) {
		header > p,
		header nav ul.nav {
			height: 60px;
			padding: 0 15px
		}
	}

header > p {
	padding: 0 30px
}

	@media (max-width: 428px) {
		header > p {
			padding: 0 20px
		}
	}

header > p img {
	width: 180px
}

	@media (max-width: 428px) {
		header > p img {
			width: 120px;
			transition: all .2s ease-in
		}
	}

header nav ul.nav {
	display: flex;
	align-items: center
}

	@media (max-width: 1100px) {
		header nav ul.nav.pc {
			display: none
		}
	}

header nav ul.nav li {
	margin-right: 35px
}

header nav ul.nav > li:last-of-type {
	margin-right: 0
}

.page-id-21 .service a,
.post-type-archive-works .nav-works a,
.single-works .nav-works a,
.blog .nav-news a,
.single-post .nav-news a,
.category .nav-news a,
.page-id-30 .thoughts a {
	font-weight: 500;
	color: #37383C
}

header nav ul.nav > li:last-of-type a {
	background: linear-gradient(90deg, #a0d137, #37d1cf);
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 25px;
	border-radius: 60px;
	color: #fff
}

header nav ul.nav > li:last-of-type a:hover {
	background: linear-gradient(90deg, #37d1cf, #a0d137);
	background-position: right center;
	background-size: 100% auto;
	-webkit-animation: pulse 2s infinite;
	animation: login 1.5s infinite
}

	@keyframes login {
		0% {
			box-shadow: 0 0 0 0 #a0d137
		}

		70% {
			box-shadow: 0 0 0 10px rgb(160 209 55 / 0%)
		}

		100% {
			box-shadow: 0 0 0 0 rgb(160 209 55 / 0%)
		}
	}

header nav ul.nav > li span {
	position: relative;
	padding-left: 25px
}

header nav ul.nav > li span::before {
	content: "";
	background: url("../images/magnifier.svg") center center no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0
}

header nav ul.nav li.hover,
footer .wrap .logo-nav-contact .right > ul > li.hover {
	position: relative;
	z-index: 1
}

header nav ul.nav li.hover:hover > ul,
header nav ul.nav li.hover:focus-within > ul,
footer .wrap .logo-nav-contact .right > ul > li.hover:hover > ul,
footer .wrap .logo-nav-contact .right > ul > li.hover:focus-within > ul {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	visibility: visible
}

header nav ul.nav li.hover > ul > li,
footer .wrap .logo-nav-contact .right > ul > li.hover > ul > li {
	margin: 8% 0
}

header nav ul li.hover > ul,
footer .wrap .logo-nav-contact .right > ul > li.hover > ul {
	backdrop-filter: blur(12px) brightness(115%);
	-webkit-backdrop-filter: blur(12px) brightness(115%);
	background-color: #fff;
	background: transparent;
	background-color: transparent;
	background-color: hsla(0,0%,100%,.6);
	border: 1px solid #fff;
	box-sizing: border-box;
	border-radius: 30px;
	opacity: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	visibility: hidden;
	z-index: var(--z-header-submenu);
	text-align: center
}

header nav ul li.hover.service > ul,
footer .wrap .logo-nav-contact .right > ul > li.hover.service > ul {
	width: 290px;
	margin: 20px 0 0 -100px
}

header nav ul li.hover.thoughts > ul,
footer .wrap .logo-nav-contact .right > ul > li.hover.thoughts > ul {
	width: 190px;
	margin: 20px 0 0 -45px
}

.nav-top a em,
.page-id-21 .service a em,
.post-type-archive-works .nav-works a em,
.single-works .nav-works a em,
.blog .nav-news a em,
.single-post .nav-news a em,
.category .nav-news a em,
.page-id-30 .thoughts a em {
	position: relative;
	border: 0;
	text-decoration: none;
	padding-bottom: 5px
}

.nav-top a em:after,
.page-id-21 .service a em:after,
.post-type-archive-works .nav-works a em:after,
.single-works .nav-works a em:after,
.blog .nav-news a em:after,
.single-post .nav-news a em:after,
.category .nav-news a em:after,
.page-id-30 .thoughts a em:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #a0d137
}

/*footer .wrap .logo-nav-contact .right > ul:first-of-type li a.on em:after {
	height: 1px;
	background-color: #37383C
}*/

.nav-top.is-line a em:after,
.page-id-21 .service a.is-line em:after,
.post-type-archive-works .nav-works a.is-line em:after,
.single-works .nav-works a.is-line em:after,
.blog .nav-news a.is-line em:after,
.single-post .nav-news a.is-line em:after,
.category .nav-news a:hover em:after,
.page-id-30 .thoughts a.is-line em:after {
	transform: scale(0, 1)
}

.nav-top:hover a em:after,
.page-id-21 .service a:hover em:after,
.post-type-archive-works .nav-works a:hover em:after,
.single-works .nav-works a:hover em:after,
.blog .nav-news a:hover em:after,
.single-post .nav-news a:hover em:after,
.category .nav-news a:hover em:after,
.page-id-30 .thoughts a:hover em:after {
	animation-name: lineanim;
	animation-duration: .6s;
	animation-timing-function: ease
}

.nav-top.is-line a em:after,
.page-id-21 .service a.is-line em:after,
.post-type-archive-works .nav-works a.is-line em:after,
.single-works .nav-works a.is-line em:after,
.blog .nav-news a.is-line em:after,
.single-post .nav-news a.is-line em:after,
.category .nav-news a:hover em:after,
.page-id-30 .thoughts a.is-line em:after {
	transition: transform var(--transition);
	transform-origin: top right
}

.nav-top.is-line:hover a em:after,
.page-id-21 .service a.on.is-line:hover em:after,
.post-type-archive-works .nav-works a.on.is-line:hover em:after,
.single-works .nav-works a.on.is-line:hover em:after,
.blog .nav-news a.on.is-line:hover em:after,
.single-post .nav-news a.on.is-line:hover em:after,
.category .nav-news a:hover em:after,
.page-id-30 .thoughts a.on.is-line:hover em:after {
	animation: none;
	transform: scale(1, 1);
	transform-origin: top left
}

@keyframes lineanim {
	0% {
		transform: scale(1, 1);
		transform-origin: top right
	}
	50% {
		transform: scale(0, 1);
		transform-origin: top right
	}
	51% {
		transform: scale(0, 1);
		transform-origin: top left
	}
	100% {
		transform: scale(1, 1);
		transform-origin: top left
	}
}
/*-- /all-header --*/

/* all-hamburger */
#hamburger .header-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	width: 100%;
	position: relative;
	z-index: 10
}

#hamburger .header-hmbgr {
	justify-self: flex-end;
	width: 80px;
	height: 80px;
	position: relative;
	cursor: pointer;
    border-radius: 90px;
	text-align: center;
	background: #a0d137;
	/*background: linear-gradient(90deg, #a0d137, #37d1cf)*/
}

	@media (max-width: 428px) {
		#hamburger .header-hmbgr {
			width: 60px;
			height: 60px
		}
	}

#hamburger .header-hmbgr::before {
	content: "めにゅー";
	height: 11px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	font-weight: 700;
	color: #37383C
}

#hamburger .header-hmbgr span {
	display: block;
	width: 30px;
	height: 2px;
	position: absolute;
	-webkit-transition: 400ms;
	transition: 400ms;
	border-radius: 10px;
	background: none;
	left: 0;
	right: 0;
	margin: 0 auto
}

	@media (max-width: 428px) {
		#hamburger .header-hmbgr span {
			width: 15px
		}
	}

#hamburger .header-hmbgr span:nth-of-type(1) {
	top: 35px
}

	@media (max-width: 428px) {
		#hamburger .header-hmbgr span:nth-of-type(1) {
			top: 25px
		}
	}

#hamburger .header-hmbgr span:nth-of-type(2) {
	top: 44px
}

	@media (max-width: 428px) {
		#hamburger .header-hmbgr span:nth-of-type(2) {
			top: 34px
		}
	}

#hamburger .header-hmbgr.is-open {
	backdrop-filter: blur(12px) brightness(115%);
	-webkit-backdrop-filter: blur(12px) brightness(115%);
	background-color: #fff;
	background: transparent;
	background-color: transparent;
	background-color: transparent;
	background-color: hsla(0,0%,100%,.6)
}

#hamburger .header-hmbgr.is-open::before {
	display: none
}

#hamburger .header-hmbgr.is-open > .txt::before,
.js-nav.is-open > .txt::before {
	content: "とじる";
	height: 11px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	font-weight: 700;
	color: #37383C
}

#hamburger .header-nav {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
	background: #fff
}

#hamburger .header-nav.is-open {
	opacity: 1;
	pointer-events: inherit
}

#hamburger .nav {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: #fcfcfc
}

#hamburger .nav .nav-wrap {
	position: relative;
	z-index: 1;
	padding: 0 6%
}

#hamburger .nav .nav-wrap ul {
	padding-top: 80px;
	width: 100%
}

.is-hide #hamburger .nav .nav-wrap ul {
	padding-top: 70px
}

#hamburger .nav .nav-wrap ul li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}

#hamburger .nav .nav-wrap ul li > a,
#hamburger .nav .nav-wrap ul li label {
    display: block;
    padding: 9% 0 6%
}

#hamburger .nav .nav-wrap ul li label span {
    top: 0;
	transform: none;
	background: #a0d137
}

#hamburger .nav .nav-wrap .sns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	grid-gap: 40px;
	gap: 40px;
	padding: 12% 0 6%
}

#hamburger .nav .nav-wrap .sns dt {
	color: #c3c3c4;
	font-weight: 700;
	display: flex;
	align-items: center
}

#hamburger .nav .nav-wrap .sns dt span {
	content: "";
	background: #c3c3c4;
	height: 1px;
	width: 56px;
	margin-left: 20px;
	transform: none
}

#hamburger .nav .nav-wrap .sns dd a {
	display: block;
	margin-bottom: 21%
}

#hamburger .nav .nav-wrap .logo a img {
	width: 170px;
	height: auto
}

#hamburger .nav .nav-wrap .logo p {
	font-size: 1.6rem;
	font-weight: 700;
	margin-top: 20px;
	line-height: 24px;
}

@media (min-width: 429px) {
	#hamburger .nav .nav-wrap .logo p br {
		display: none
	}
}

#hamburger .nav .nav-wrap .policy-copy {
	margin: 15% 0 36%
}

#hamburger .nav .nav-wrap .policy-copy a {
	display: flex;
	align-items: center
}

#hamburger .nav .nav-wrap .policy-copy a span {
	position: relative;
	padding-left: 25px;
	transform: none;
	top: 0;
	background: none
}

#hamburger .nav .nav-wrap .policy-copy a span::before {
	content: "";
	background: url("../images/magnifier_g.svg") center center no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 0;
	left: 0
}

#hamburger .nav .decoration {
	position: absolute;
	right: -20%;
	bottom: 0;
	opacity: 0.8
}

	@media (max-width: 428px) {
		#hamburger .nav .decoration {
			right: -80%;
			bottom: 10%
		}
	}
/* /all-hamburger */

/* all-nav-links */
.nav-links {
	text-align: center;
	margin-top: 6%
}

	@media screen and (max-width: 428px) {
		.nav-links {
			margin-top: 12%;
			margin-bottom: 21%
		}
	}

.nav-links .prev,
.nav-links .next {
	border: 2px solid #a0d137;
	padding: 1% 1.5%;
	border-radius: 90px;
	font-size: 1.6rem;
	color: #a0d137
}

	@media screen and (max-width: 428px) {
		.nav-links .prev,
		.nav-links .next {
			padding: 3% 4%;
			font-size: 1.4rem
		}
	}

.nav-links .prev:hover,
.nav-links .next:hover {
	background: #a0d137;
	color: #fff
}

.nav-links a,
.nav-links span {
	margin: 0 1%
}

	@media screen and (max-width: 428px) {
		.nav-links a,
		.nav-links span {
			margin: 0 2%
		}
	}

.nav-links .current {
	color: #a0d137;
	border-bottom: 3px solid;
	font-size: 2.4rem
}

	@media screen and (max-width: 428px) {
		.nav-links .current {
			font-size: 2.1rem
		}
	}
/* /all-nav-links */


/* scroll-hint */
@keyframes scroll-hint-appear {
	0% {
		transform: translateX(40px);
		opacity: 0
	}
	10% {
		opacity: 1
	}
	50%,
	100% {
		transform: translateX(-40px);
		opacity: 0
	}
}

.scroll-hint-icon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border-radius: 90px;
	transition: opacity .3s;
	opacity: 0;
	background: rgba(0, 0, 0, .7);
	text-align: center;
	padding: 20px 10px 10px 10px;
	letter-spacing: initial
}

.scroll-hint-icon-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 100%;
	pointer-events: none
}

.scroll-hint-text {
	font-size: 1rem;
	color: #FFF;
	margin-top: 5px
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
	opacity: .9
}

.scroll-hint-icon:before {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-top: 5px;
	color: #fff;
	vertical-align: middle;
	text-align: center;
	content: "";
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon:after {
	content: "";
	width: 34px;
	height: 14px;
	display: block;
	position: absolute;
	top: 15px;
	left: 50%;
	margin-left: -20px;
	background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
	opacity: 0;
	transition-delay: 2.4s
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
	opacity: 1
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
	animation: scroll-hint-appear 1.2s linear;
	animation-iteration-count: 2
}

.scroll-hint-icon-white {
	background-color: #fff;
	box-shadow: 0 4px 5px rgba(0, 0, 0, .4)
}

.scroll-hint-icon-white:before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon-white:after {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==)
}

.scroll-hint-icon-white .scroll-hint-text {
	color: #37383C
}

.scroll-hint-shadow-wrap {
	position: relative
}

.scroll-hint-shadow-wrap::after {
	content: "";
	width: 20px;
	height: 100%;
	background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	visibility: hidden
}

.scroll-hint-shadow-wrap::before {
	content: "";
	width: 20px;
	height: 100%;
	background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	visibility: hidden
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
.scroll-hint-shadow-wrap.is-right-scrollable::after
 {
	opacity: 1;
	visibility: visible
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
.scroll-hint-shadow-wrap.is-left-scrollable::before
 {
	opacity: 1;
	visibility: visible
}
/* /scroll-hint */
/*-- /all --*/

/*-- index --*/
/* index-kv */
#index {
	font-weight: 700
}

#index .kv {
	position: relative;
	overflow: hidden;
	background: #a0d137;
	color: #fff
}

#index .kv .kv-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	 object-fit: cover;
	-o-object-position: 50% 75%;
	 object-position: 50% 75%;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
		    backface-visibility: hidden
}

#index .kv .sec1 {
	position: relative;
	height: 100vh;
	min-height: 500px
}

	@media (max-width: 760px) {
		#index .kv .sec1 {
			min-height: auto
		}
	}

#index .kv .sec1 .kv-ttl {
	position: absolute;
	top: 62%;
	left: 12%;
	font-size: 6rem;
	line-height: 120px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

	@media (min-width: 429px) and (max-width: 980px) {
		#index .kv .sec1 .kv-ttl {
			font-size: 6.122448979591836vw;
			left: 6%
		}
	}

	@media (max-width: 428px) {
		#index .kv .sec1 .kv-ttl {
			font-size: 3.6rem;
			line-height: 60px;
			left: auto;
			top: 55%;
			padding: 0 6%;
			letter-spacing: 1px
		}
	}

@media (max-width: 428px) {
	#index .kv .sec1 .kv-ttl br {
		display: none
	}
}

#index .sec2 {
	color: #fff;
	padding: 50vh 0 260px 12%
}

	@media (min-width: 761px) and (max-width: 980px) {
		#index .sec2 {
			padding: 20vh 6% 128px
		}
	}

	@media (max-width: 760px) {
		#index .sec2 {
			padding: 25vh 8vw 29.3333333333vw
		}
	}

	@media (max-width: 428px) {
		#index .sec2 {
			padding: 25vh 6% 29.3333333333vw
		}
	}

#index .sec2 span {
	display: block;
	translate: none;
	rotate: none;
	scale: none;
	transform: translate(0px);
	opacity: 1;
	font-size: 6.6rem;
	line-height: 130px;
	margin-bottom: 12%
}

	@media (max-width: 1600px) {
		#index .sec2 span {
			font-size: 4.125vw
		}
	}

	@media (min-width: 761px) and (max-width: 980px) {
		#index .sec2 span {
			font-size: 6.122448979591836vw
		}
	}

	@media (max-width: 760px) {
		#index .sec2 span {
			font-size: 7.894736842105263vw
		}
	}

	@media (max-width: 428px) {
		#index .sec2 span {
			font-size: 4.8rem;
			line-height: 81px;
			margin-bottom: 18%
		}
	}

@media (max-width: 980px) {
	#index .sec2 span br {
		display: none
	}
}

#index .kv .news {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1.5% 3%;
	font-size: 1.7rem;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	color: #a0d137;
	backdrop-filter: blur(12px) brightness(115%);
	-webkit-backdrop-filter: blur(12px) brightness(115%);
	background: transparent;
	background-color: hsla(0,0%,100%,.6)
}

	@media (max-width: 428px) {
		#index .kv .news {
			padding: 4% 6% 3%;
			font-size: 1.4rem
		}
	}

#index .kv .news.is-hide {
	pointer-events: none;
	opacity: 0;
	visibility: hidden
}

#index .kv .news dt::before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #a0d137;
	border-right: 2px solid #a0d137;
	transform: rotate(45deg);
	margin-right: 20px;
	display: inline-block
}

	@media (max-width: 428px) {
		#index .kv .news dt::before {
			margin-right: 15px
		}
	}

#index .kv .news dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	width: 100%
}

	@media (max-width: 760px) {
		#index .kv .news dl {
			display: block
		}
	}

#index .kv .news dt {
	margin-right: 26px;
	padding-right: 26px;
	border-right: 1px solid #c1c1c1;
	display: flex;
	align-items: center
}

	@media (min-width: 761px) and (max-width: 980px) {
		#index .kv .news dt {
			margin-right: 20.8px;
			padding-left: 16px;
			padding-right: 20.8px;
			background-size: 4px 8px
		}
	}

	@media (max-width: 760px) {
		#index .kv .news dt {
			float: left
		}
	}

	@media (max-width: 428px) {
		#index .kv .news dt {
			margin-right: 17px;
			padding-right: 17px;
			font-size: 1.4rem
		}
	}

#index .kv .news .date {
	padding-right: 26px;
	color: #c1c1c1
}

	@media (max-width: 428px) {
		#index .kv .news .date {
			font-size: 1.4rem
		}
	}

#index .kv .news .title {
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333
}

	@media (max-width: 760px) {
		#index .kv .news .title {
			clear: both;
			margin-top: 2.6666666667vw;
			line-height: 21px;
			text-overflow: clip;
			white-space: normal;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden
		}
	}

	@media (max-width: 428px) {
		#index .kv .news .title {
			margin-top: 10px
		}
	}

@media (hover: hover) {
	#index .kv .news a:hover {
		text-decoration: underline
	}
	#index .kv .news .title a:hover {
		color: #333
	}
}
/* index-kv */

/* index-content */
#index #content {
	padding-top: 12.5%;
	position: relative;
	background: rgba(252,252,252,0.9);
	overflow: hidden;
	border-radius: 0 0 90px 90px
}

	@media (min-width: 761px) and (max-width: 980px) {
		#index #content {
			padding-top: 160px
		}
	}

	@media (max-width: 760px) {
		#index #content {
			padding-top: 18.6666666667vw;
			background: rgba(252,252,252,0.8)
		}
	}

	@media (max-width: 428px) {
		#index #content {
			border-radius: 0 0 60px 60px
		}
	}

/* index-content-about */
#index #content #about {
	position: relative;
	background: #fcfcfc;
	width: calc(100% - 6%);
	max-width: 1050px;
	margin: 0 auto;
	padding: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 50px;
	box-shadow: 5px 5px 39px rgba(92, 147, 171, 0.15);
	overflow: hidden
}

	@media (max-width: 760px) {
		#index #content #about {
			width: calc(100% - 12%);
			display: block
		}
	}

	@media (max-width: 428px) {
		#index #content #about {
			padding: 3% 0 9%
		}
	}

#index #content #about .movie {
	overflow: hidden;
	border-radius: 40px;
	box-shadow: 0px 0px 0 10px rgba(0, 173, 230, .2);
	width: 30%
}

	@media (max-width: 760px) {
		#index #content #about .movie {
			width: 60%;
			margin: 9% auto
		}
	}

	@media (max-width: 428px) {
		#index #content #about .movie {
			border-radius: 30px;
			box-shadow: 0px 0px 0 8px rgba(0, 173, 230, .2)
		}
	}

#index #content #about .movie video {
	width: 100%
}

#index #content #about dl {
	width: 70%;
	padding: 0 6%;
	z-index: 1
}

	@media (max-width: 760px) {
		#index #content #about dl {
			width: auto;
			padding: 0 9%
		}
	}

#index #content #about dl dt {
	font-size: 3rem;
	line-height: 48px;
	color: #a0d137
}

	@media (min-width: 761px) and (max-width: 1050px) {
		#index #content #about dl dt {
			font-size: 2.857142857142857vw;
			line-height: 4.571428571428571vw
		}
	}

	@media (max-width: 428px) {
		#index #content #about dl dt {
			font-size: 2.4rem;
			line-height: 42px
		}
	}

@media (max-width: 760px) {
	#index #content #about dl dt br {
		display: none
	}
}

#index #content #about dl dd {
	font-size: 1.8rem;
	line-height: 36px
}

	@media (min-width: 761px) and (max-width: 1050px) {
		#index #content #about dl dd {
			font-size: 1.7142857142857144vw;
			line-height: 3.428571428571429vw
		}
	}

	@media (max-width: 428px) {
		#index #content #about dl dd {
			font-size: 1.6rem;
			line-height: 30px
		}
	}

#index #content #about dl dd img {
	margin: 30px 0;
	width: 68px
}

	@media (min-width: 761px) and (max-width: 1050px) {
		#index #content #about dl dd img {
			margin: 2.857142857142857vw 0
		}
	}
/* /index-content-about */

/* index-content-service */
#index #content #service,
#index #content #works,
#index #content #news {
	position: relative;
	background: #fcfcfc;
	padding: 9% 0;
	border-radius: 90px;
	margin-top: 12.5%
}

	@media (max-width: 810px) {
		#index #content #service,
		#index #content #works,
		#index #content #news {
			padding: 12% 0;
			border-radius: 11.11111111111111vw
		}
	}

	@media (max-width: 428px) {
		#index #content #service,
		#index #content #works,
		#index #content #news {
			padding: 12% 0 9%;
			border-radius: 60px;
			margin-top: 21%
		}
	}

#index #content #works {
	padding: 9% 0 0
}

	@media (max-width: 428px) {
		#index #content #works {
			padding: 15% 0 0
		}
	}

#under #works.all {
	padding: 9% 0 3% 0 !important
}

	@media (max-width: 428px) {
		#under #works.all {
			padding: 21% 0 3% 0 !important
		}
	}

#index #content #service .wrap,
#index #content #news .wrap {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto;
	z-index: 1;
	position: relative
}

	@media (max-width: 428px) {
		#index #content #service .wrap,
		#index #content #news .wrap {
			width: calc(100% - 12%)
		}
	}

#index #content #service .wrap .h-box,
#index #content #news .wrap .h-box {
	position: relative;
	padding: 0 3%
}

#index #content #service .wrap .group {
	display: flex;
	grid-gap: 5%;
	gap: 5%
}

	@media (max-width: 428px) {
		#index #content #service .wrap .group {
			display: block
		}
	}

#index #content #service .wrap article {
	width: 50%;
	border-radius: 60px
}

	@media (max-width: 428px) {
		#index #content #service .wrap article {
			width: auto;
			border-radius: 50px
		}
	}

#index #content #service .wrap article:first-of-type {
	background: #75b8eb
}

	@media (max-width: 428px) {
		#index #content #service .wrap article:first-of-type {
			margin-bottom: 18%
		}
	}

#index #content #service .wrap article:last-of-type {
	background: #ff992b;
	position: relative
}

#index #content #service .wrap article:last-of-type > div {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 150px;
	animation: floating-x 7.2s ease-in-out infinite alternate-reverse
}

	@media (max-width: 428px) {
		#index #content #service .wrap article:last-of-type > div {
			top: -40px;
			right: -3%;
			width: 100px
		}
	}

#index #content #service .wrap article:last-of-type > div img {
	animation: floating-y 1.8s ease-in-out infinite alternate-reverse
}

@keyframes floating-x {
	0% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(5%);
	}
}
@keyframes floating-y {
	0% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(10%);
	}
}

#index #content #service .wrap article h3 {
	font-size: 3rem;
	padding: 12% 9% 0;
	color: #fff
}

	@media (max-width: 428px) {
		#index #content #service .wrap article h3 {
			font-size: 2.4rem;
			padding: 9% 9% 0;
			line-height: 30px
		}
	}

#index #content #service .wrap article h3 span {
	display: block;
	font-weight: 400;
	font-size: 1.8rem;
	margin-bottom: 4.5%
}

	@media (max-width: 428px) {
		#index #content #service .wrap article h3 span {
			font-size: 1.6rem;
			margin-bottom: 2%
		}
	}

#index #content #service .wrap article p {
	line-height: 30px;
	font-weight: 400;
	margin: 5.5% 0 7%;
	padding: 0 9%
}

	@media (max-width: 428px) {
		#index #content #service .wrap article p {
			margin: 4.5% 0 7%;
			padding: 0 9%
		}
	}

#index #content #service .wrap article figure {
	overflow: hidden;
	border-radius: 60px
}

	@media (max-width: 428px) {
		#index #content #service .wrap article figure {
			border-radius: 50px
		}
	}
/* /index-content-service */

/* index-content-works */
#works .wrap.all {
	position: relative
}

#works.all .wrap .img {
	background: url(../images/works.png) repeat-x 0 0;
	background-size: 130%;
	height: 25vw;
	-moz-animation: loop_left 26s linear infinite;
	animation: loop_left 26s linear infinite;
	z-index: 1;
	position: relative
}

	@media screen and (max-width: 835px) {
		#works.all .wrap .img {
			background-size: 250%;
			height: 47vw
		}
	}

	@media screen and (max-width: 428px) {
		#works.all .wrap .img {
			background: url(../images/works_sp.png) repeat-x 0 0;
			background-size: 230%;
			height: 61vw
		}
	}

@keyframes loop_left {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 1500px 0
	}
}

#index #works .wrap .group {
	background: linear-gradient(90deg, #a0d137, #37d1cf);
	padding: 3% 0 7.5%;
	margin-top: 6%;
	border-radius: 90px;
	overflow: hidden
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group {
			padding: 0 0 9%;
			margin-top: 0;
			border-radius: 60px
		}
	}

#index #works .wrap .group .box {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box {
			width: auto
		}
	}

#index #works .wrap .group .box .left,
#index #works .wrap .group .box .right {
	width: 50%
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .left,
		#index #works .wrap .group .box .right {
			width: auto
		}
	}

#index #works .wrap .group .box .right {
	position: relative;
	height: 469px
}

	@media screen and (max-width: 1180px) {
		#index #works .wrap .group .box .right {
			height: 37.519999999999996vw
		}
	}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .right {
			height: 76.16822429906543vw
		}
	}

#index #works .wrap .group .box .pc {
	display: flex;
	grid-gap: 5%;
	gap: 5%
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .pc {
			display: none
		}
	}

@media screen and (min-width: 429px) {
	#index #works .wrap .group .box .sp {
		display: none
	}
}

#index #works .wrap .group .box .left {
	font-size: 3.9rem;
	color: #fff;
	line-height: 1.6;
	margin-top: 9%
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .left {
			font-size: 2.4rem;
			margin: 12% 9% 3%
		}
	}

@media screen and (max-width: 1180px) {
	#index #works .wrap .group .box .left br.pc {
		display: none
	}
}

#index #works .wrap .group .box .right figure img {
	position: absolute;
	border-radius: 20px
}

#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(1) {
	top: 0;
	left: 0;
	width: 297px
}

	@media screen and (max-width: 1250px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(1) {
			width: 23.76vw
		}
	}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(1) {
			width: 53.364vw
		}
	}

#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(2) {
	top: 96px;
	right: 35px;
	width: 195px
}

	@media screen and (max-width: 1250px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(2) {
			top: 7.68vw;
			right: 2.8000000000000003vw;
			width: 15.6vw
		}
	}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(2) {
			top: 16.754vw;
			right: 5.607476635514018vw;
			width: 35.376vw
		}
	}

#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(3) {
	bottom: 96px;
	left: 35px;
	width: 195px
}

	@media screen and (max-width: 1250px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(3) {
			bottom: 7.68vw;
			left: 2.8000000000000003vw;
			width: 15.6vw
		}
	}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(3) {
			bottom: 9.654vw;
			left: 6.307vw;
			width: 34.776vw
		}
	}

#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(4) {
	bottom: 0px;
	right: 0px;
	width: 297px
}

	@media screen and (max-width: 1250px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(4) {
			width: 23.76vw
		}
	}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group .box .right figure:last-of-type img:nth-of-type(4) {
			bottom: -7.4vw;
			width: 52.964vw
		}
	}

#index #works .wrap .group p {
	background: url(../images/workstxt.svg) repeat-x 0 0;
	background-size: auto;
	background-size: 180%;
	width: 100%;
	height: 7.5vw;
	-moz-animation: loop_right 26s linear infinite;
	animation: loop_right 26s linear infinite;
	margin-top: -12%
}

	@media screen and (max-width: 428px) {
		#index #works .wrap .group p {
			background-size: 300%;
			height: 12.5vw;
			margin-top: auto
		}
	}

@keyframes loop_right {
	0% {
		background-position: 1500px 0
	}

	100% {
		background-position: 0 0
	}
}
/* /index-content-works */

/* index-content-news */
#index #content #news .wrap section ul.piukup {
	display: flex;
	grid-gap: 3%;
	gap: 3%;
	margin-bottom: 9%
}

#index #content #news .wrap section ul.piukup li {
	width: calc(100%/3)
}

#index #content #news .wrap section ul.piukup li img {
	box-shadow: 5px 5px 39px rgba(160, 209, 55, 0.15);
	border-radius: 20px;
	margin-bottom: 20px
}

#index #content #news .wrap section ul.piukup li .date,
ul.usually li .date {
	color: #ababab;
	font-family: var(--s-font-9daa9bef);
	font-size: 1.4rem;
	line-height: 21px;
	margin: 0px 0px 0px 0px;
	max-width: 100%
}

#index #content #news .wrap section ul.piukup li .title,
ul.usually li .title {
	font-family: var(--s-font-85adb17c);
	font-size: 1.8rem;
	line-height: 30px;
	padding-top: 6px;
	text-align: left;
	max-width: 100%;
	justify-content: flex-start
}

	@media screen and (max-width: 428px) {
		#index #content #news .wrap section ul.piukup li .title,
		ul.usually li .title {
			font-size: 1.6rem;
			line-height: 24px
		}
	}

ul.usually li .the-content {
	font-weight: 400;
	line-height: 30px;
	margin-top: 15px;
	background: #fff;
	padding: 2% 3%;
	border-radius: 20px
}

	@media screen and (max-width: 428px) {
		ul.usually li .the-content {
			line-height: 25px;
			padding: 3% 4%
		}
	}

#index #content #news .wrap section ul.piukup li .category,
ul.usually li .category {
	align-items: center;
	/*gap: 7px;*/
	display: flex;
	padding-bottom: 10px;
	margin-top: 6px
}

#index #content #news .wrap section ul.piukup li .category p:first-of-type,
ul.usually li .category p:first-of-type {
	background: #e0ce45;
	border-radius: 25px;
	font-family: var(--s-font-85adb17c);
	font-size: 1.2rem;
	height: auto;
	line-height: 1.5;
	padding: 6px 10px 6px 10px;
	text-align: center;
	width: auto;
	max-width: 100%;
	color: #37383C
}

ul.usually li .category p:first-of-type {
	background: none
}

#index #content #news .wrap section ul.piukup li .category p:last-of-type,
ul.usually li .category p:last-of-type {
	border: 1px solid #a0d137;
	box-sizing: border-box;
	border-radius: 25px;
	color: #a0d137;
	font-family: var(--s-font-85adb17c);
	font-size: 1.2rem;
	line-height: 18px;
	margin: 0px 0px 0px 0px;
	padding: 6px 10px 6px 10px;
	text-align: left;
	max-width: 100%;
	justify-content: flex-start
}

ul.usually li {
	background: #f5f5f5;
	border-radius: 20px;
	padding: 3.5% 4.5% 3%;
	max-width: 894px;
	margin: 0 auto 20px
}

	@media screen and (max-width: 428px) {
		ul.usually li {
			padding: 9% 9% 7%
		}
	}

#under ul.usually li {
	font-weight: 700;
	max-width: none
}
/* /index-content-news */
/* /index-content */
/*-- /index --*/

/*-- works --*/
#under #works,
#works-detail,
#policy {
	position: relative;
	overflow: hidden;
	padding-bottom: 9%
}

	@media screen and (max-width: 428px) {
		#under #works,
		#works-detail,
		#policy {
			padding-bottom: 12%
		}
	}

#under #works #voice {
	width: calc(100% - 6%);
    margin: 0 auto;
	text-align: center;
	padding: 9% 0 6%
}

	@media screen and (max-width: 428px) {
		#under #works #voice {
			width: calc(100% - 12%);
			margin: 0 auto;
			text-align: left;
			padding: 30% 0 15%
		}
	}

#under #works #voice p {
	position: relative;
	display: inline-block;
	font-size: 1.8rem;
	line-height: 36px
}

	@media screen and (max-width: 428px) {
		#under #works #voice p {
			font-size: 1.4rem;
			line-height: 27px
		}
	}

#under #works #voice p::before,
#under #works #voice p::after {
	/*content: '';*/
	position: absolute;
	top: 7px;
	width: 44px;
	height: 2px;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
	background-color: #37383C
}

	@media screen and (max-width: 428px) {
		#under #works #voice p::before,
		#under #works #voice p::after {
			top: 15px;
			height: 1px
		}
	}

#under #works #voice p::before {
	left: 0
}

#under #works #voice p::after {
	right: 0
}

#under #works #voice p strong {
	display: block;
	font-size: 2.1rem;
	margin-bottom: 3%;
	font-weight: 500;
	line-height: 36px
}

	@media screen and (max-width: 428px) {
		#under #works #voice p strong {
			font-size: 1.8rem
		}
	}

#under #works .copy {
	width: calc(100% - 6%);
	margin: 0 auto;
	text-align: center;
	padding: 9% 0 6%;
	font-size: 1.8rem
}

	@media screen and (max-width: 428px) {
		#under #works .copy {
			width: calc(100% - 12%);
			font-size: 1.6rem
		}
	}

#under #works .copy span {
	display: block;
	line-height: 2.4rem;
	margin: 3% 0
}

#under #works ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		#under #works ul {
			width: calc(100% - 12%)
		}
	}

#under #works ul li {
	width: calc(88%/2);
	margin: 3%
}

	@media screen and (max-width: 1200px) {
		#under #works ul li {
			width: calc(88%/2)
		}
	}

	@media screen and (max-width: 428px) {
		#under #works ul li {
			width: calc(100%/1);
			margin: 3% 0 18%
		}
	}

#under #works ul li:nth-of-type(2n) {
	margin-top: 10%
}

	@media screen and (max-width: 428px) {
		#under #works ul li:nth-of-type(2n) {
			margin-top: 0
		}
	}

#under #works ul li img {
	border-radius: 10px
}

#under #works ul li div.button1 {
	margin: 3% 0 0 -24px
}

#under #works ul li div.button1 a {
	background-color: unset
}

#under #works ul li div p:first-of-type {
	color: #c3c3c4;
	font-size: 1.8rem
}

	@media screen and (max-width: 428px) {
		#under #works ul li div p:first-of-type {
			font-size: 1.6rem
		}
	}

#under #works ul li div h2 {
	font-size: 1.8rem;
	font-weight: 500;
	margin: 4% 0 3.5%;
	line-height: 30px;
	text-decoration: underline 1px solid #37383C;
	text-decoration: underline
}

	@media screen and (max-width: 428px) {
		#under #works ul li div h2 {
			margin: 5% 0 4.5%;
			line-height: 27px
		}
	}

#under #works ul li div h3 {
	font-size: 1.4rem;
	line-height: 24px
}

	@media screen and (max-width: 428px) {
		#under #works ul li div h3 {
			font-size: 1.2rem;
			line-height: 21px
		}
	}

#under #works ul li div p:last-of-type {
	display: inline-block;
	padding-bottom: 10px;
	margin-top: 9%;
	color: #a0d137;
	font-size: 1.4rem;
	border-bottom: 1px solid #a0d137;
	box-sizing: border-box
}

#works nav {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		#works nav {
			width: calc(100% - 12%);
			margin: 0 auto
		}
	}

.rotate {
	position: absolute;
	right: -40vw;
	top: 10vw;
	width: 1708px;
	/*transform: rotate(-60deg);*/
	animation: rotate 30s linear 1.74s infinite;
	z-index: -1
}

	@media screen and (max-width: 1300px) {
		.rotate {
			width: 130vw
		}
	}

	@media screen and (max-width: 428px) {
		.rotate {
			top: 0
		}
	}

.rotate.works {
	top: -10vw
}

	@media screen and (max-width: 428px) {
		.rotate.works {
			top: 0
		}
	}

@keyframes rotate {
	0% {
		transform:rotate(-60deg)
	}
	to {
		transform:rotate(-420deg)
	}
}
/*-- /works --*/

/*-- works-detail --*/
#works-detail,
#policy {
	position: relative;
	overflow: hidden;
	padding-bottom: 9%
}

#works-detail #h1,
#policy #h1,
#contact #h1 {
	padding: 12% 0 0 12%
}

	@media screen and (max-width: 428px) {
		#works-detail #h1,
		#policy #h1,
		#contact #h1 {
			padding: 36% 0 0 12%
		}
	}

#works-detail .decoration1,
#policy .decoration1,
#contact .decoration1 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -3
}

#works-detail .decoration2,
#policy .decoration2,
#contact .decoration2 {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1
}

	@media screen and (max-width: 428px) {
		#works-detail .decoration2,
		#policy .decoration2,
		#contact .decoration2 {
			display: none
		}
	}

#works-detail #heading {
	width: calc(100% - 6%);
	max-width: 1000px;
	margin: 0 auto;
	padding: 9% 0 6%;
	line-height: 3.6rem;
	font-size: 1.8rem
}

	@media screen and (max-width: 428px) {
		#works-detail #heading {
			width: calc(100% - 12%);
			padding: 12% 0 6%;
			line-height: 3rem;
			font-size: 1.6rem
		}
	}

#works-detail #heading h2 {
	clip-path: inset(0 100%0 0);
	animation: textClipPath 1.2s cubic-bezier(.86, 0, .07, 1) .7s forwards;
	font-weight: 500;
	font-size: 2.4rem;
	margin: 3% 0 5%;
	text-decoration: underline
}

	@media screen and (max-width: 428px) {
		#works-detail #heading h2 {
			font-size: 1.8rem;
			margin: 5% 0 6%;
			line-height: 3rem
		}
	}

#works-detail #heading > p:first-of-type {
	color: #c3c3c4
}

#works-detail #heading p strong {
	font-weight: 500
}

#works-detail #heading ul {
	margin: 3% 0;
	border: 2px solid #a0d137;
	box-sizing: border-box;
	padding: 3% 4%;
	border-radius: 10px;
	display: inline-block;
	position: relative
}

	@media screen and (max-width: 428px) {
		#works-detail #heading ul {
			margin: 6% 0;
			padding: 6%
		}
	}

#works-detail #heading ul::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 6%;
	width: 50px;
	height: 2px;
	background: #fcfcfc
}

#works-detail #heading ul::after {
	content: '';
	position: absolute;
	top: -2px;
	right: 6%;
	width: 50px;
	height: 2px;
	background: #fcfcfc
}

#works-detail #heading ul li {
	margin-bottom: 3%
}

	@media screen and (max-width: 428px) {
		#works-detail #heading ul li {
			margin-bottom: 5%
		}
	}

#works-detail #heading ul li:last-of-type {
	margin-bottom: 0
}

#works-detail #heading ul li span {
	position: relative;
	padding-left: 20px
}

	@media screen and (max-width: 428px) {
		#works-detail #heading ul li span {
			padding-left: 15px
		}
	}

#works-detail #heading ul li span::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	color: #a0d137;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid
}

	@media screen and (max-width: 428px) {
		#works-detail #heading ul li span::after {
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			border-left: 8px solid
		}
	}

#works-detail #heading ul li strong {
	font-size: 2.1rem;
	color: #a0d137;
	font-weight: 500
}

	@media screen and (max-width: 428px) {
		#works-detail #heading ul li strong {
			font-size: 1.8rem;
			display: block
		}
	}

#works-detail #heading div {
	display: inline-block;
	border-top: 2px dotted #37383C;
	border-bottom: 2px dotted #37383C;
	padding: 3%;
	margin: 3% 0;
	font-size: 1.6rem
}

	@media screen and (max-width: 428px) {
		#works-detail #heading div {
			padding: 6% 0;
			margin: 6% 0;
			font-size: 1.4rem
		}
	}

#works-detail #heading div p span {
	margin: 0 15px
}

	@media screen and (max-width: 428px) {
		#works-detail #heading div p span {
			margin: 0 10px
		}
	}

#works-detail .group {
	position: relative;
	padding-top: 9%
}

	@media screen and (max-width: 428px) {
		#works-detail .group {
			padding-top: 12%
		}
	}

#works-detail .group .back {
	background: linear-gradient(0deg, rgba(252, 252, 252, 0) 0%, rgb(248, 248, 248, 1)), url() center bottom / cover no-repeat;
	height: 690px;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: -2
}

#works-detail .group .box {
	width: calc(100% - 6%);
	max-width: 1000px;
	margin: 0 auto 6%
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box {
			width: calc(100% - 12%);
			margin: 0 auto 9%
		}
	}

#works-detail .group .box ul.js-scrollable {
	display: flex;
	align-items: center;
	white-space: nowrap;
	grid-gap: 1.5%;
	gap: 1.5%;
	margin-bottom: 12%;
	line-height: 1;
	height: 157px
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box ul.js-scrollable {
			margin-bottom: 21%
		}
	}

#works-detail .group ul.js-scrollable li img {
	width: 200px;
	height: auto;
	margin-bottom: auto;
	max-inline-size: none
}

#works-detail .group .box .title {
	font-weight: 500;
	font-size: 2.1rem;
	border-bottom: 1px solid;
	display: inline-block;
	padding-bottom: 3px;
	margin-bottom: 6%
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .title {
			font-size: 1.8rem;
			margin-bottom: 9%;
			line-height: 2.4rem
		}
	}

#works-detail .group .box .txt {
	line-height: 36px;
	margin-bottom: 12%
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .txt {
			line-height: 30px;
			margin-bottom: 15%
		}
	}

#works-detail .group .box .txt > span {
	display: block
}

#works-detail .group .box .txt > span.m_3 {
	margin: 3% 0
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .txt > span.m_3 {
			margin: 6% 0
		}
	}

#works-detail .group .box .txt > span span {
	position: relative;
	padding-left: 20px;
	line-height: 1;
	display: block;
	margin-bottom: 3%
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .txt > span span {
			line-height: 2.1rem;
			margin-bottom: 6%
		}
	}

#works-detail .group .box .txt > span span:last-of-type {
	margin-bottom: 0
}

#works-detail .group .box .txt > span.project_results span:last-of-type {
	margin-bottom: 3%
}

#works-detail .group .box .txt > span span::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid;
	color: #a0d137
}

#works-detail .group .box .txt strong {
	font-weight: 500;
	font-size: 1.8rem
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .txt strong {
			font-size: 1.6rem
		}
	}

@media screen and (max-width: 428px) {
	#works-detail .group .box .txt .project_results strong {
		display: block;
		margin: 3% 0 9%
	}
}

#works-detail .group .box .txt > span span a {
	display: block;
	margin-top: 3%;
	color: #00b7ff;
	text-decoration: underline
}

#works-detail .group .box .pc-sp {
	text-align: center
}

#works-detail .group .box img {
	height: auto;
	margin-bottom: 6%;
	border: 1px solid;
	box-sizing: border-box
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box img {
			margin-bottom: 9%
		}
	}

#works-detail .group .box .pc-sp img {
	border: none
}

#works-detail .group .box .pc-sp:last-of-type img {
	margin-bottom: 0
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box .pc-sp:last-of-type img {
			margin: 9% 0 -6%
		}
	}

#works-detail .group .box ul {
	margin-bottom: 12%
}

	@media screen and (max-width: 428px) {
		#works-detail .group .box ul {
			margin-bottom: 15%
		}
	}

#works-detail .group .box ul li a {
	background: #37383C;
	line-height: 70px;
	padding: 0 30px;
	border-radius: 60px;
	color: #fff;
	display: inline-block
}

#works-detail .group .box ul li a:hover {
	background: linear-gradient(90deg, #37d1cf, #a0d137);
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: login 1.5s infinite
}

#works-detail .group .box ul li a span {
	position: relative;
	padding-left: 25px
}

#works-detail .group .box ul li a span::before {
	content: "";
	background: url("../images/magnifier.svg") center center no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0
}

#works-detail .next {
	width: calc(100% - 6%);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	margin: 12% auto 0
}

	@media screen and (max-width: 428px) {
		#works-detail .next {
			width: calc(100% - 12%)
		}
	}

#works-detail .next div {
	display: flex;
	align-items: center;
	margin-right: 4%
}

	@media screen and (max-width: 810px) {
		#works-detail .next div {
			margin-right: auto;
			margin-bottom: 6%;
			width: 100%;
			justify-content: center
		}
	}

#works-detail .next div img {
	margin-left: 9%;
	width: 70px
}

	@media screen and (max-width: 428px) {
		#works-detail .next div img {
			margin-left: 6%;
			width: 50px
		}
	}

#works-detail .next div p {
	font-size: 3.9rem;
	color: #a0d137;
	overflow-wrap: normal
}

	@media screen and (max-width: 428px) {
		#works-detail .next div p {
			font-size: 3.3rem
		}
	}

#works-detail .next a {
	text-decoration: underline
}

	@media screen and (max-width: 428px) {
		#works-detail .next a {
			line-height: 24px
		}
	}

#works-detail .next a span {
	display: block;
	margin-bottom: 3%
}

#works-detail .group .c-breadcrumb {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		#works-detail .group .c-breadcrumb {
			width: calc(100% - 12%);
		}
	}

#fixed-btn {
	position: fixed;
	right: 2%;
	bottom: 4%;
	width: auto;
	margin: 0;
	z-index: 2;
	transition: all .3s ease-in;
	opacity: 0
}

	@media screen and (max-width: 428px) {
		#fixed-btn {
			right: 3%;
			bottom: 2%
		}
	}

#fixed-btn.-scrolled {
	transition: all .3s ease-in;
	opacity: 1
}
/*-- /works-detail --*/

/*-- policy --*/
#policy .wrap {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 12% auto 0
}

	@media screen and (max-width: 428px) {
		#policy .wrap {
			width: calc(100% - 12%);
			margin: 15% auto 0
		}
	}

#policy .wrap p:first-of-type {
	font-size: 1.8rem;
	line-height: 36px
}

	@media screen and (max-width: 428px) {
		#policy .wrap p:first-of-type {
			font-size: 1.6rem;
			line-height: 30px
		}
	}

#policy .wrap p {
	border-bottom: 1px solid #dcdcdc;
	line-height: 30px;
	margin-bottom: 6%;
	padding-bottom: 5%
}

	@media screen and (max-width: 428px) {
		#policy .wrap p {
			line-height: 24px;
			margin-bottom: 18%;
			padding-bottom: 15%
		}
	}

#policy .wrap p em {
	font-weight: 500;
	font-size: 2.4rem;
	color: #a0d137;
	display: block;
	margin-bottom: 30px
}

	@media screen and (max-width: 428px) {
		#policy .wrap p em {
			font-size: 2.1rem;
			margin-bottom: 24px
		}
	}
/*-- /policy --*/

/*-- service --*/
#under #service {
	position: relative;
	padding: 0 6%
}

	@media screen and (max-width: 428px) {
		#under #service {
			padding: 0 6%
		}
	}

#under #service .router {
	position: relative;
	padding-top: 12%
}

	@media screen and (max-width: 428px) {
		#under #service .router {
			padding-top: 18%
		}
		#under #service .router:first-of-type {
			padding-top: 48%
		}
		#under #service .router:last-of-type {
			padding-bottom: 8%
		}
	}

#under #service .router img {
	width: 100%;
	border-radius: 10px
}

#under #service .page-top .head {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 35%;
	position: -webkit-sticky;
	position: sticky;
	top: 25%;
	float: left
}

	@media screen and (max-width: 428px) {
		#under #service .page-top .head {
			width: auto;
			position: static;
			float: none;
			margin-bottom: 6%
		}
	}

#under #service .page-top .head h2 {
	font-weight: 700;
	font-size: 2.4rem
}

	@media screen and (max-width: 428px) {
		#under #service .page-top .head h2 {
			font-size: 1.8rem
		}
	}

#under #service .page-top .head h2 span {
	font-size: 1.8rem;
	display: block;
	margin-top: 3%;
	color: #c3c3c4
}

	@media screen and (max-width: 428px) {
		#under #service .page-top .head h2 span {
			font-size: 1.2rem
		}
	}

#under #service .page-top .body {
	width: 65%;
	margin-left: auto;
	position: relative;
	z-index: 1
}

	@media screen and (max-width: 428px) {
		#under #service .page-top .body {
			width: auto
		}
	}

#under #service .page-top .body h3 {
	margin-top: 3%;
	line-height: 30px
}

#under #service .page-top#graphic .body p {
	text-align: center;
	padding: 3% 0;
	border: solid #37383C;
	border-width: 1px 1px 0px 1px;
	margin-top: 3%;
	background: #a0d137;
	border-radius: 10px 10px 0 0
}

	@media screen and (max-width: 428px) {
		#under #service .page-top#graphic .body p {
			padding: 4% 0
		}
	}

#under #service .page-top .body ul {
	border: 1px solid;
	box-sizing: border-box;
	border-radius: 10px;
	background: #fff;
	line-height: 3rem;
	overflow: hidden;
	margin-top: 3%
}

#under #service .page-top .body ul li {
	background: #f6faed;
	padding: 2.5% 4%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

	@media screen and (max-width: 428px) {
		#under #service .page-top .body ul li {
			padding: 3%
		}
	}

#under #service .page-top .body ul li:first-of-type {
	background: #a0d137;
	text-align: center;
	border-bottom: 1px solid;
	box-sizing: border-box
}

#under #service .page-top .body ul li span {
	border: 2px solid #a0d137;
	box-sizing: border-box;
	padding: 1% 2%;
	margin: 1%;
	display: inline-block;
	text-align: center;
	width: calc(94%/3);
	border-radius: 30px;
	background: #fff;
	animation: colorChange 1s infinite alternate
}

	@media screen and (max-width: 1400px) {
		#under #service .page-top .body ul li span {
			width: calc(96%/2)
		}
	}

	@media screen and (max-width: 870px) {
		#under #service .page-top .body ul li span {
			width: calc(100%/1)
		}
	}

@keyframes colorChange {
	0% {
		color: #37383C
	}
	100% {
		color: #a0d137
	}
}

#under #service .page-top .body ul li span em {
	color: #a0d137;
	margin: 0 1%
}
/*-- /service --*/

/*-- thoughts --*/
#under #thoughts {
	position: relative
}

#under #thoughts .corporate-message {
	position: relative;
	z-index: 1;
	font-weight: 500;
	margin-top: 12%;
	overflow: hidden
}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message {
			margin-top: 27%
		}
	}

#under #thoughts .corporate-message dl {
	position: relative;
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
	line-height: 36px;
	border: 1px solid #dcdcdc;
	padding: 90px 0;
	border-radius: 30px
}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message dl {
			width: calc(100% - 12%);
			line-height: 27px;
			padding: 45px 0
		}
	}

#under #thoughts .corporate-message dl::before,
#under #thoughts .corporate-message dl::after {
	content: '';
	position: absolute;
	top: 40px;
	background: #fcfcfc;
	height: 275px;
	width: 1px
}

#under #thoughts .corporate-message dl::before {
	left: -1px
}

#under #thoughts .corporate-message dl::after {
	right: -1px
}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message dl::before,
		#under #thoughts .corporate-message dl::after {
			height: 320px
		}
	}

#under #thoughts .corporate-message dl dt {
	font-size: 2.7rem;
	color: #a0d137;
	line-height: 42px;
	margin-bottom: 1.5%;
	z-index: 1;
	position: relative
}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message dl dt {
			font-size: 2.1rem;
			line-height: 33px;
			margin-bottom: 4%
		}
	}

@media screen and (min-width: 429px) {
	#under #thoughts .corporate-message dl dt br.sp {
		display: none
	}
}

#under #thoughts .corporate-message dl dd {
	font-size: 1.8rem;
	z-index: 1;
	position: relative
}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message dl dd {
			font-size: 1.4rem;
			padding: 0 6%
		}
	}

#under #thoughts .corporate-message .img {
	background: url(../images/thoughts/corporate_message.svg) repeat-x 0 0;
	height: 175px;
	width: 100%;
	-moz-animation: corporate-message_loop_left 26s linear infinite;
	animation: corporate-message_loop_left 26s linear infinite;
	position: absolute;
	top: 25%;
	opacity: 0.1
}

	@media screen and (max-width: 1100px) {
		#under #thoughts .corporate-message .img {
			width: 210%;
			height: 175px
		}
	}

	@media screen and (max-width: 428px) {
		#under #thoughts .corporate-message .img {
			width: 390%;
			height: 160px;
			top: 27%
		}
	}

@keyframes corporate-message_loop_left {
	0% {
		background-position: 1500px 0
	}

	100% {
		background-position: 0 0
	}
}

#under #thoughts #mvv {
	position: relative;
	margin-top: 21%;
	background-color: #a0d137;
	padding-bottom: 9%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv {
			margin-top: 40%;
			padding-bottom: 15%
		}
	}

#under #thoughts #mvv::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/thoughts/noise.png");
	background-size: 640px 480px;
	background-repeat: repeat;
	opacity: .04
}

#under #thoughts #mvv .arc {
	width: 100%;
	height: 160px;
	position: absolute;
	top: -160px;
	left: 0;
	overflow: hidden;
	background-color: #a0d137;
	pointer-events: none;
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox=" 0 0 1675 1675" width="100%" preserveAspectRatio="xMidYMid slice" fill="none"><circle cx="837.5" cy="837.5" r="837.5" fill="black" /></svg>');
	mask-position: top center;
	mask-origin: top center;
	mask-repeat: no-repeat;
	mask-size: var(--progress);
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox=" 0 0 1675 1675" width="100%" preserveAspectRatio="xMidYMid slice" fill="none"><circle cx="837.5" cy="837.5" r="837.5" fill="black" /></svg>');
	-webkit-mask-position: top center;
	-webkit-mask-origin: top center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: var(--progress);
	--progress: 710.4276606721698%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .arc {
			height: 75px;
			top: -75px
		}
	}

#under #thoughts #mvv .arc::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	inset: 0;
	background-image: url("../images/thoughts/noise.png");
	background-size: 640px 480px;
	background-repeat: repeat;
	opacity: .04
}

#under #thoughts #mvv .txt {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 90vh
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .txt {
			height: 72vh
		}
	}

#under #thoughts #mvv .txt dl {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	line-height: 50px;
	height: 100%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .txt dl {
			line-height: 30px
		}
	}

#under #thoughts #mvv .txt dl::before {
	content: "";
	display: block;
	width: 6px;
	height: 100%;
	background-image: url("../images/thoughts/line.png");
	background-size: 6px 11px;
	background-repeat: repeat-y
}

#under #thoughts #mvv .txt dl:first-of-type::after {
	content: "";
	display: block;
	width: 6px;
	height: 100%;
	background-image: url("../images/thoughts/line.png");
	background-size: 6px 11px;
	background-repeat: repeat-y
}

#under #thoughts #mvv .txt dl dt {
	color: #fff;
	font-size: 3.6rem;
	margin-right: 40px
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .txt dl dt {
			font-size: 2.4rem;
			margin-right: 20px
		}
	}

#under #thoughts #mvv .txt dl dt span {
	display: block;
	font-size: 1.8rem
}

	@media screen and (min-width: 429px) {
		#under #thoughts #mvv .txt dl dt span.sp {
			display: none
		}
	}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .txt dl dt span.pc {
			display: none
		}
		#under #thoughts #mvv .txt dl dt span {
			display: inline-block;
			margin: 3% 0 0;
			font-size: 1.4rem
		}
	}

#under #thoughts #mvv .txt dl dd {
	font-size: 2.1rem;
	margin: 0 10px 0 50px
}

	@media screen and (max-width: 428px) {
		#under #thoughts #mvv .txt dl dd {
			font-size: 1.6rem;
			margin: 0 10px 0 20px
		}
	}

.top-foot {
	position: relative;
	height: 70vh
}

	@media screen and (max-width: 750px) {
		.top-foot {
			height: 45vh
		}
	}

.top-foot__wrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden
}

.top-foot__photo {
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	-webkit-transform: translateY(-40%);
	  -ms-transform: translateY(-40%);
		  transform: translateY(-40%)
}

	@media screen and (max-width: 750px) {
		.top-foot__photo {
			width: 200vw;
			left: -50vw
		}
	}

.top-foot__photo img {
	position: relative
}

#under #thoughts #representative-message {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 9%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message {
			width: calc(100% - 12%);
			padding-top: 18%
		}
	}

#under #thoughts #representative-message h2 {
	font-weight: 500;
	font-size: 4.2rem;
	color: #a0d137
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message h2 {
			font-size: 3rem
		}
	}

#under #thoughts #representative-message h2 span {
	letter-spacing: -5px
}

#under #thoughts #representative-message .router {
	position: relative;
	margin: 12% 0 6%
}

#under #thoughts #representative-message .router img {
	height: auto
}

#under #thoughts #representative-message .page-top .head {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 30%;
	position: -webkit-sticky;
	position: sticky;
	top: 30%;
	float: left
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .head {
			width: 60%;
			position: static;
			float: none;
			margin: 0 auto 9%
		}
	}

#under #thoughts #representative-message .page-top .head::before {
	/*content: "";*/
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 35px solid #f8f8f9;
	border-left: 0;
	position: absolute;
	top: 100px;
	right: -20%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .head::before {
			display: none
		}
	}

#under #thoughts #representative-message .page-top .body {
	width: 65%;
	margin-left: auto;
	position: relative;
	background: #f8f8f9;
	padding: 6%;
	border-radius: 60px
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body {
			width: auto;
			padding: 12% 6% 6%;
			border-radius: 30px
		}
	}

#under #thoughts #representative-message .page-top .body::before {
	content: "Message";
	position: absolute;
	font-weight: 500;
	top: -20px;
	left: 6%;
	font-size: 4.2rem;
	color: #cdcdcd;
	opacity: 0.8
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body::before {
			top: -12px;
			left: 6%;
			font-size: 2.7rem
		}
	}

#under #thoughts #representative-message .page-top .body > h3 {
	font-weight: 500;
	line-height: 39px;
	font-size: 3rem;
	color: #a0d137
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body > h3 {
			line-height: 36px;
			font-size: 2.1rem
		}
	}

#under #thoughts #representative-message .page-top .body > p {
	font-size: 1.8rem;
	line-height: 36px;
	margin-top: 3%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body > p {
			font-size: 1.6rem;
			line-height: 33px;
			margin-top: 3%
		}
	}

#under #thoughts #representative-message .page-top .body dl {
	background: #fcfcfc;
	padding: 6%;
	border-radius: 30px;
	margin-top: 6%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body dl {
			padding: 9% 6%;
			border-radius: 30px
		}
	}

#under #thoughts #representative-message .page-top .body dl dt {
	font-weight: 500
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body dl dt {
			text-align: initial;
			line-height: 21px
		}
	}

#under #thoughts #representative-message .page-top .body dl dt strong {
	display: block;
	color: #a0d137;
	font-size: 2.1rem;
	margin-bottom: 3%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body dl dt strong {
			font-size: 1.8rem;
			margin-bottom: 3%;
			line-height: 30px
		}
	}

@media screen and (min-width: 429px) {
	#under #thoughts #representative-message .page-top .body dl dt br {
		display: none
	}
}

#under #thoughts #representative-message .page-top .body dl dd {
	line-height: 30px;
	margin-top: 3%
}

	@media screen and (max-width: 428px) {
		#under #thoughts #representative-message .page-top .body dl dd {
			line-height: 27px;
			margin-top: 6%
		}
	}

#under #thoughts .c-breadcrumb {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 12% auto 0
}

	@media screen and (max-width: 428px) {
		#under #thoughts .c-breadcrumb {
			width: calc(100% - 12%);
			margin: 21% auto 0
		}
	}
/*-- /thoughts --*/

/*-- news --*/
#under #news {
	position: relative;
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 12%
}

	@media screen and (max-width: 428px) {
		#under #news {
			padding-top: 30%
		}
	}

#under #news.detail {
	padding-bottom: 9%
}

#under #news #category-name {
	text-align: center;
	color: #a0d137
}

#under #news #category-name p {
	margin-bottom: 6%;
	font-size: 1.8rem;
	border: 2px solid #a0d137;
	box-sizing: border-box;
	display: inline-block;
	padding: 2% 3%;
	border-radius: 60px
}

	@media screen and (max-width: 428px) {
		#under #news #category-name p {
			margin-bottom: 9%;
			font-size: 1.6rem;
			padding: 4% 5.5%
		}
	}
/*-- /news --*/

/*-- contact --*/
#contact {
	position: relative
}

#contact .wrap {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 9% auto 0;
	background: #fff;
	padding: 6% 0;
	border-radius: 90px
}

	@media screen and (max-width: 428px) {
		#contact .wrap {
			width: calc(100% - 12%);
			margin: 12% auto 0;
			padding: 9% 3%;
			border-radius: 30px
		}
	}

#contact .wrap > .txt {
	line-height: 3.6rem;
	margin-bottom: 6%;
	padding: 0 10%
}

	@media screen and (max-width: 428px) {
		#contact .wrap > .txt {
			line-height: 2.4rem;
			margin-bottom: 12%;
			padding: 0
		}
	}

#contact .wrap > .txt br {
	display: block
}

#contact .wrap dl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 4%
}

	@media screen and (max-width: 428px) {
		#contact .wrap dl {
			display: block;
			margin-bottom: 8%
		}
	}

#contact .wrap dl dt {
	font-weight: 700;
	width: 30%
}

	@media screen and (max-width: 428px) {
		#contact .wrap dl dt {
			width: auto;
			margin-bottom: 6%
		}
	}

#contact .wrap dl dt span {
	background: #ff6c6c;
	font-size: 1.4rem;
	padding: 1% 3%;
	border-radius: 60px;
	margin-left: 3%;
	color: #fff
}

	@media screen and (max-width: 428px) {
		#contact .wrap dl dt span {
			padding: 1% 2%;
			font-size: 1.2rem
		}
	}


#contact .wrap dl dt span.any {
	background: #53545B
}

#contact .wrap dl dd {
	width: 50%
}

	@media screen and (max-width: 428px) {
		#contact .wrap dl dd {
			width: auto
		}
	}

#contact .wrap dl dd input {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #a0d137;
	box-sizing: border-box;
	padding: 15px;
	border-radius: 15px
}

#contact .wrap dl dd select {
	width: 100%;
	position: relative;
	display: block;
	border: 1px solid #a0d137;
	box-sizing: border-box;
	background: none;
	padding: 15px;
	border-radius: 15px;
	
	background: url(../images/contact/arrow.svg) no-repeat right 20px center #fff !important;
	background-size: auto;
	background-size: 15px !important;
	border-radius: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer
}

#contact .wrap dl dd textarea {
	width: 100%;
	height: 15vw;
	border: 1px solid #a0d137;
	box-sizing: border-box;
	padding: 15px;
	border-radius: 15px
}

	@media screen and (max-width: 428px) {
		#contact .wrap dl dd textarea {
			height: 55vw
		}
	}

#contact .wrap dl dd .wpcf7-not-valid {
	border: 1px solid #ff6c6c;
	box-sizing: border-box
}

#contact .wrap dl dd .wpcf7-not-valid:focus {
    border: 1px solid #a0d137
}

.wpcf7-not-valid-tip {
	color: #ff6c6c;
	margin-top: 3%
}

.wpcf7-spinner {
	display: none
}

.wpcf7-response-output {
}

.wpcf7-list-item {
	margin: 0
}

.wpcf7-list-item-label a {
	text-decoration: underline
}

input[type="checkbox"] {
    display: none
}

.wpcf7-list-item-label {
	position: relative;
	height: 16px;
	line-height: 16px;
	padding-left: 30px;
	display: inline-block
}

	@media screen and (max-width: 428px) {
		.wpcf7-list-item-label {
			height: 14px;
			line-height: 24px;
			padding-left: 20px
		}
	}

.wpcf7-list-item-label::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border: 1px solid #37383C;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box
}

	@media screen and (max-width: 428px) {
		.wpcf7-list-item-label::before {
			width: 14px;
			height: 14px;
			top: 5px
		}
	}

input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    content: "";
	display: block;
	width: 10px;
	height: 7px;
	border-top: 3px solid #5bc249;
	border-right: 3px solid #5bc249;
	transform: rotate(135deg);
	position: absolute;
	left: 3px;
	top: 3px
}

	@media screen and (max-width: 428px) {
		input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
			width: 9px;
			height: 6px;
			left: 2.5px;
			top: 8px
		}
	}

#contact .wrap > p {
	text-align: center;
	margin-top: 6%
}

#contact .wrap ul li {
	text-align: center
}

#contact .wrap ul li input {
	background: linear-gradient(90deg, #a0d137, #37d1cf);
	color: #fff;
	padding: 1.5% 4%;
	border-radius: 90px;
	margin-top: 6%;
	font-size: 1.8rem;
	letter-spacing: 1.5px
}

	@media screen and (max-width: 428px) {
		#contact .wrap ul li input {
			padding: 6% 14%;
			margin-top: 10%;
			font-size: 1.6rem
		}
	}

#contact .wrap ul li input:hover {
	background: linear-gradient(90deg, #37d1cf, #a0d137);
	background-position: right center;
	background-size: 100% auto;
	-webkit-animation: pulse 2s infinite;
	animation: login 1.5s infinite
}

#contact nav {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		#contact nav {
			width: calc(100% - 12%)
		}
	}

#contact br {
	display: none
}

.wpcf7 form .wpcf7-response-output {
	margin: 6% 9% 0;
	padding: 2% 3%;
	border-radius: 15px
}

	@media screen and (max-width: 428px) {
		.wpcf7 form .wpcf7-response-output {
			margin: 9% 0 0;
			padding: 4% 5%;
			line-height: 21px
		}
	}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ff6c6c
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #00bbff
}
/*-- /contact --*/

/*-- 404 --*/
#nopage {
	position: relative;
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto;
	padding: 18% 0 12%;
	text-align: center
}

	@media screen and (max-width: 428px) {
		#nopage {
			padding: 42% 0 18%
		}
	}

#nopage p:first-of-type {
	font-size: 9.6rem;
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 1px #9dd238;
	font-weight: 700
}

#nopage p:first-of-type span {
	display: block;
	font-size: 3.6rem
}

#nopage p:nth-of-type(2) {
	font-size: 1.8rem;
	font-weight: 500;
	margin: 3% 0 2%
}

	@media screen and (max-width: 428px) {
		#nopage p:nth-of-type(2) {
			margin: 6% 0 4%;
			line-height: 30px
		}
	}

@media screen and (max-width: 428px) {
	#nopage p:last-of-type {
		line-height: 24px
	}
}

@media screen and (min-width: 429px) {
	#nopage p br {
		display: none
	}
}

#nopage .btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	grid-gap: 1%;
	gap: 1%;
	margin-top: 3%
}

#nopage .decoration {
	position: absolute;
	top: 5%;
	left: 20%
}
/*-- /404 --*/
/*-- /under --*/

/*-- footer --*/
footer {
	background: rgba(252,252,252,0.9);
	margin-top: -90px;
	padding: 14% 0 12%;
	position: relative
}

	@media screen and (max-width: 428px) {
		footer {
			padding: 42% 0 12%
		}
	}

@media screen and (max-width: 428px) {
	footer .pc {
		display: none
	}
}

@media screen and (min-width: 429px) {
	footer .sp {
		display: none
	}
}

footer .sp {
	padding-top: 9%;
	width: 100%
}

@media screen and (max-width: 428px) {
	footer li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
}

@media screen and (max-width: 428px) {
	footer li > a,
	footer li label {
		display: block;
		padding: 9% 0 6%
	}
}

#under footer {
	background: rgba(244,244,244,1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 0 9%
}

	@media screen and (max-width: 1100px) {
		#under footer {
			position: static;
			padding: 36% 0 9%;
			margin-top: -60px
		}
	}

footer .wrap {
	width: calc(100% - 6%);
	max-width: 1180px;
	margin: 0 auto
}

	@media screen and (max-width: 428px) {
		footer .wrap {
			width: calc(100% - 12%)
		}
	}

footer .wrap .logo-nav-contact {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 5%;
	gap: 5%;
	justify-content: space-between
}

footer .wrap .logo-nav-contact .left a img {
	width: 250px;
	height: auto
}

	@media screen and (max-width: 428px) {
		footer .wrap .logo-nav-contact .left a img {
			width: 150px
		}
	}

footer .wrap .logo-nav-contact .left p {
	font-weight: 700;
	font-size: 1.8rem;
	margin-top: 30px
}

	@media screen and (max-width: 428px) {
		footer .wrap .logo-nav-contact .left p {
			font-size: 1.6rem
		}
	}

footer .wrap .logo-nav-contact .right {
	margin-top: 30px
}

footer .wrap .logo-nav-contact .right > ul:first-of-type {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 40px;
	gap: 40px
}

footer .wrap .logo-nav-contact .right > ul:first-of-type > li .Label {
	display: flex;
	align-items: center
}

footer .wrap .logo-nav-contact .right > ul:first-of-type > li:last-of-type {
	margin-right: 0
}

.toggle,
.content p {
	display: none
}

.content p {
	font-size: 1.4rem
}

.content p a {
	display: block;
	margin-bottom: 6%
}

.content p a:first-of-type {
	margin-bottom: 6%
}

.Label span {
	display: inline-block;
	vertical-align: middle;
	color: #a0d137;
	line-height: 1;
	width: 0.7em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	margin-left: 5px
}

.Label span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(-90deg);
	transition-duration: 400ms;
	transition-timing-function: cubic-bezier(0.26, 0.06, 0, 1)
}

.Label span,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s
}

.content {
	height: 0;
	overflow: hidden
}

.toggle:checked + .Label + .content {
	height: auto;
	padding: 3% 0;
	transition: all .3s
}

.toggle:checked + .Label + .content p {
	display: block
}

.toggle:checked + .Label span::before {
	transform: rotate(0deg) !important
}

footer .wrap .logo-nav-contact .right > ul:last-of-type {
	float: right;
	margin-top: 40px
}

footer .wrap .logo-nav-contact .right > ul:last-of-type li a {
	background: #37383C;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 30px;
	border-radius: 60px;
	color: #fff
}

footer .wrap .logo-nav-contact .right > ul:last-of-type li a:hover {
	background: linear-gradient(90deg, #37d1cf, #a0d137);
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: login 1.5s infinite
}

footer .wrap .logo-nav-contact .right > ul:last-of-type li a span {
	position: relative;
	padding-left: 25px
}

footer .wrap .logo-nav-contact .right > ul:last-of-type li a span::before {
	content: "";
	background: url("../images/magnifier.svg") center center no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0
}

footer .wrap .sns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	grid-gap: 40px;
	gap: 40px;
	padding: 6% 0;
	border-bottom: 1px solid #dcdcdc
}

	@media screen and (max-width: 428px) {
		footer .wrap .sns {
			padding: 12% 0
		}
	}

footer .wrap .sns dt {
	color: #c3c3c4;
	display: flex;
	align-items: center;
	font-weight: 700
}

footer .wrap .sns dt span {
	content: "";
	background: #c3c3c4;
	height: 1px;
	width: 56px;
	margin-left: 40px
}

	@media screen and (max-width: 428px) {
		footer .wrap .sns dt span {
			margin-left: 20px
		}
	}

footer .wrap .sns dd {
	display: flex
}

	@media screen and (max-width: 428px) {
		footer .wrap .sns dd {
			display: block
		}
	}

footer .wrap .sns dd a {
	margin-right: 40px;
	display: block
}

	@media screen and (max-width: 428px) {
		footer .wrap .sns dd a {
			margin-right: 0;
			margin-bottom: 18%
		}
		footer .wrap .sns dd a:last-of-type {
			margin-bottom: 0
		}
	}

footer .wrap .policy-copy {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 6%
}

footer .wrap .policy-copy p a {
	display: flex;
	align-items: center;
}

footer .wrap .policy-copy p a span {
	position: relative;
	padding-left: 25px
}

footer .wrap .policy-copy p a span::before {
	content: "";
	background: url("../images/magnifier_g.svg") center center no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 0;
	left: 0
}

footer .wrap .policy-copy p a span:hover::before {
	left: 5px;
	transition-duration: 400ms
}

footer .wrap .policy-copy address {
	font-size: 1.2rem
}

	@media screen and (max-width: 428px) {
		footer .wrap .policy-copy address {
			font-size: 1.1rem
		}
	}
/*-- /footer --*/