@charset "utf-8";

body {
	position: fixed;
}

body.end {
	position: static;
}

.l-op {
	background: var(--bgcolor);
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow: hidden;
	transform: translateZ(0);
	opacity: 1;
	transition: 1s ease-out;
}

.l-op:before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1000;
}

.l-op .button_skip {
	color: var(--white);
	font-size: 14rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-decoration: none;
	padding: .35em 1em .5em;
	background: rgba(0,0,0,.6);
	margin: 30px 30px 0 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2000;
	opacity: .5;
	border-radius: 10px 10px 0 10px
}

.l-op .button_skip:hover {
	opacity: .75;
}

.end .l-op {
	opacity: 0;
	transform: translateZ(0) scale(1);
	visibility: hidden;
}

.l-op .bg {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-25%,-50%) rotateY(180deg) rotateZ(-90deg) scale(1);
	z-index: -1;
	animation: a-op_bg 20s linear infinite;
}

@keyframes a-op_bg {
	0% {
		transform: translate(-25%,-50%) rotateY(180deg) rotateZ(-90deg) scale(1);
	}
	100% {
		transform: translate(-45%,-70%) rotateY(180deg) rotateZ(-90deg) scale(1);
	}
}


.l-op .text {
	width: calc(50% - 3.88%);
	margin: 0 0 0 3.88%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(0,-50%);
}

.l-op .text p b {
	color: var(--white);
	line-height: 1;
	text-align: center;
	width: 2em;
	height: 2em;
	margin: 0 .15em;
	padding: .35em 0 0 .25em;
	background: var(--red);
	display: inline-block;
	border-radius: 100vmax;
}

.l-op .text p {
	color: var(--black);
	font-size: max(1.5vw, 18rem);
	font-weight: 500;
	line-height: 3em;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	transition: opacity .5s;
}

.l-op .text p:nth-child(1) {
	letter-spacing: .5em;
	z-index: 10;
}

.scene3 .l-op .text p:nth-child(1) {
	opacity: 0;
}

.l-op .text p:nth-child(2) {
	letter-spacing: .25em;
	opacity: 0;
	z-index: 0;
}

.scene3 .l-op .text p:nth-child(2) {
	opacity: 1;
}

.scene4 .l-op .text p:nth-child(2) {
	opacity: 0;
}

.l-op .text p span {
	display: inline-block;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	transform: translateZ(0);
}

.l-op .text p span:before {
	content: '';
	background: var(--bgcolor);
	position: absolute;
	inset: -1px;
	z-index: 10;
	transform: translate(0,0);
	transition: ease-out;
}

.start .l-op .text p:nth-child(1) span:before {
	transform: translate(100%,0);
}

.start .l-op .text p:nth-child(1) span:nth-of-type(1):before {
	transition-duration: .6s;
	transition-delay: 0s;
}

.start .l-op .text p:nth-child(1) span:nth-of-type(2):before {
	transition-duration: 1s;
	transition-delay: .2s;
}

.start .l-op .text p:nth-child(1) span:nth-of-type(3):before {
	transition-duration: .8s;
	transition-delay: .4s;
}

.start .l-op .text p:nth-child(1) span:nth-of-type(4):before {
	transition-duration: 1s;
	transition-delay: 2.2s;
}

.scene3 .l-op .text p:nth-child(2) span:before {
	transform: translate(100%,0);
}

.scene3 .l-op .text p:nth-child(2) span:nth-of-type(1):before {
	transition-duration: .6s;
	transition-delay: .3s;
}

.scene3 .l-op .text p:nth-child(2) span:nth-of-type(2):before {
	transition-duration: .6s;
	transition-delay: 1s;
}

.l-op .text p span:after {
	content: '';
	width: 100%;
	height: .05em;
	display: block;
	background: var(--gray_line);
	position: absolute;
	bottom: 1px;
	left: 0;
}

.l-op .images {
	width: calc(50% - 3.88%);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translate(10%,0);
	transition:
		opacity .5s linear,
		transform 10s linear
	;
}

.scene1 .l-op .images {
	opacity: 1;
	transform: translate(0,0);
}

.scene2 .l-op .images {
	opacity: 0;
}

.l-op .images figure {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}

.l-op .images figure:nth-child(1) {
	width: 20%;
	margin: -37% 6% 0 0%;
	opacity: 1;
	z-index: 30;
	transition: 10s linear;
}

.scene1 .l-op .images figure:nth-child(1) {
	transform: translate(-60%,-50%);
}

.l-op .images figure:nth-child(2) {
	width: 50%;
	opacity: 1;
	z-index: 20;
}

.l-op .images figure:nth-child(3) {
	width: 20%;
	margin: 32% 41% 0 0%;
	opacity: 1;
	z-index: 30;
	transition: 10s linear;
}

.scene1 .l-op .images figure:nth-child(3) {
	transform: translate(-50%,-50%);
}

.l-op .images figure:nth-child(4) {
	width: 50%;
	margin: -30% 40% 0 0;
	opacity: .5;
	z-index: 10;
	filter: blur(3px);
	transition: 10s linear;
}

.scene1 .l-op .images figure:nth-child(4) {
	transform: translate(-20%,-50%);
}

.l-op .images figure:nth-child(5) {
	width: 30%;
	margin: -4% 75% 0 0;
	opacity: .5;
	z-index: 10;
	filter: blur(2px);
}

.l-op .images figure img {
	border-radius: 3vw 3vw 0 3vw;
}

.l-op .logos {
	width: 40%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: right center;
	transform: translate(-90%,-50%) scale(1.25);
	opacity: 0;
	transition:
		opacity 1s,
		transform 2s ease-out
	;
}

.scene3 .l-op .logos {
	opacity: 1;
	transform: translate(-100%,-50%) scale(1);
}

.scene4 .l-op .logos {
	opacity: 0;
	transform: translate(-100%,-50%) scale(1);
	transition:
		opacity 1s,
		transform .5s ease-in
	;
}

.l-op .okan {
	width: 40%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.5);
}

.scene4 .l-op .okan {
	animation: a-op_okan .8s .5s both;
}

@keyframes a-op_okan {
	0% {
		transform: translate(-50%,-50%) scale(1.2);
		animation-timing-function: ease-in;
	}
	75% {
		transform: translate(-50%,-50%) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: translate(-50%,-50%) scale(1.1);
		animation-timing-function: ease-out;
	}
	85% {
		transform: translate(-50%,-50%) scale(1);
		animation-timing-function: ease-in;
	}
	90% {
		transform: translate(-50%,-50%) scale(1.05);
	}
	100% {
		transform: translate(-50%,-50%) scale(1.05);
	}
}

.l-op .okan img {
	opacity: 0;
	transition: .6s;
}

.scene4 .l-op .okan img {
	opacity: 1;
}




.g-container {
	padding-top: calc(var(--header_h) + 50px);
}

.g-container:before {
	content: '';
	width: 100%;
	height: 600px;
	margin: 0;
	background: linear-gradient(to bottom, rgba(228,248,236,1) 0%, var(--bgcolor) 100%);
	left: 0;
	transform: none;
}

.g-container:after {
	display: none;
}

/*mv*/
.l-mv {
	position: relative;
	z-index: 10;
}

.l-mv .title {
	width: 592px;
	aspect-ratio: 1 / 1;
	margin: 40px 0 0;
	padding: 0 0 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--white);
	border-radius: 100vmax;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 10;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}

.l-mv .title .illust {
	width: calc(100% / 3);
}

.l-mv .title .logo {
	width: 65%;
	margin: 20px 0 0;
}

.l-mv .title .text {
	color: var(--black);
	font-size: 16rem;
	line-height: 1.75;
	letter-spacing: .05em;
	text-align: center;
	margin: 25px 0 0;
}

.l-mv .title .text b {
	color: var(--white);
	line-height: 1;
	text-align: center;
	width: 2em;
	height: 2em;
	margin: 0 .15em;
	padding: .35em 0 0;
	background: var(--red);
	display: inline-block;
	border-radius: 100vmax;
}

.l-mv_slide {
	width: 1000px;
	margin: 0 auto;
}

.slick-list {
	overflow: visible !important;
}

.slides {
	position: absolute;
	opacity: 0;
}

.slides.slick-initialized {
	position: static;
	opacity: 1;
}

.l-mv .slick-slide {
	padding: 10px;
}

.l-mv .logos {
	width: 800px;
	margin: 40px auto 0;
	padding: 60px 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 0;
}

.l-mv .logos:after {
	content: '';
	width: 1200px;
	padding: 42.5% 0 0;
	display: block;
	background: url("/_assets/images/home/bg_01.svg") no-repeat top center / 100% 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
}

.l-mv .logos > * {
	width: calc(100% / 4);
	margin: 20px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 10;
}

.l-mv .logos > *:nth-child(1) {
	padding-right: 180px;
}

.l-mv .logos > *:nth-child(2) {
	padding-left: 160px;
}

.l-mv .logos > *:nth-child(1),
.l-mv .logos > *:nth-child(2) {
	width: calc(100% / 2);
}

.l-mv .logos > *:nth-child(3),
.l-mv .logos > *:nth-child(4),
.l-mv .logos > *:nth-child(5) {
	width: calc(100% / 3);
}

.l-mv .logos > *:nth-child(3),
.l-mv .logos > *:nth-child(6) {
	justify-content: flex-end;
}

.l-mv .logos > *:nth-child(7) {
	margin-inline: 10px;
}

.l-mv .logos > *:nth-child(5) {
	padding-right: 2.5%;
	justify-content: flex-start;
}

.l-mv .logos > *:nth-child(8) {
	padding-right: 2.5%;
	justify-content: flex-start;
}
.l-mv .logos > *:nth-child(8) img {
	height: 26px;
}

.l-mv .logos > *:nth-child(9) {
	width: calc(100% / 3 );
}

.l-mv .logos > *:nth-child(10) {
	width: calc(100% / 5);
}

.l-mv .logos > *:nth-child(10) img {
	height: 34px;
}



/*

.l-mv .logos > *:nth-child(9) {
	text-align: center;
	width: 100%;
	margin-inline: auto;
}

.l-mv .logos > *:nth-child(10) img {
	max-width: 40%;
}

.l-mv .logos > *:nth-child(9),
.l-mv .logos > *:nth-child(10) {
	width: calc(100% / 1);
}
*/

.l-mv .logos > * img {
	height: 30px;
	object-fit: contain;
	object-position: right center;
}

.l-mv .logos > *:nth-child(1) img {
	height: 42px;
}

.l-mv .logos > *:nth-child(2) img {
	height: 50px;
}

.l-mv .logos > * p {
	font-size: 12rem;
	line-height: 1.5;
	white-space: nowrap;
	padding-inline: 10px;
	flex-flow: 1;
}

.l-mv .logos > *:nth-child(10) p {
	font-size: 11rem;
	letter-spacing: .1em;
}

.l-mv .note {
	font-size: 10rem;
	font-weight: 400;
	letter-spacing: 0;
	text-align: right;
	width: 100%;
	padding: 5px 30px;
	display: block;
}

.u-corner {
	padding-bottom: 30%;
	overflow: hidden;
	transform: translateZ(0);
}

.u-corner:before {
	content: '';
	width: 560px;
	height: 560px;
	display: block;
	background: url("/_assets/images/common/bg_07.svg") no-repeat center / contain;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	transform: translate(-40%,45%);
}

.u-corner:after {
	background-image: url("/_assets/images/common/bg_06.svg");
	transform: translate(0,0);
	z-index: 20;
}

.u-corner .main_image {
	width: 40%;
	margin-bottom: 1.25%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 30;
}

/*ourwish*/
.l-ourwish {
	margin-top: 160px;
	position: relative;
	z-index: 0;
}

.l-ourwish:after {
	content: '';
	width: 1600px;
	aspect-ratio: 64 / 51;
	background: url("/_assets/images/common/bg_09.svg") no-repeat center / 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 200px),calc(-50% + 100px));
}

.l-ourwish + * {
	margin-top: 80px;
}

.l-ourwish .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 10;
}

.l-ourwish .title {
	color: var(--black);
	font-size: 36rem;
	text-align: right;
	letter-spacing: .15em;
	white-space: nowrap;
	width: calc(100% / 2 - (220px / 2));
	padding-right: 70px;
}

.l-ourwish .image {
	width: 220px;
}

.l-ourwish .u-text {
	white-space: nowrap;
	width: calc(100% / 2 - (220px / 2));
	padding: 0 0 0 50px;
}

.l-ourwish .u-text span {
	line-height: 2.5;
	margin: 1em 0;
	display: block;
}

.u-title_page {
	margin-inline: 0;
	min-height: 0;
	display: block;
}

.u-title_page .label .en {
	font-size: 14rem;
	letter-spacing: .1em;
}

.u-title_page .label .en:before {
	width: 20px;
	height: 22px;
	margin-right: 10px;
}

.u-title_page .label .jp {
	font-size: 36rem;
	letter-spacing: .05em;
}

.l-news {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
}

.l-news .title {
	width: calc(360px - 60px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.l-news .title .image {
	width: 150px;
	margin: 120px 0 0 -20px;
	position: absolute;
	top: 0;
	left: 0;
	animation: a-news_fly 5s linear infinite;
}

@keyframes a-news_fly {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.l-news .title .image img {
	animation: a-news_float 4s ease-in-out infinite alternate;
}

@keyframes a-news_float {
	0% {
		transform: translate(-10px,0) scale(1,1);
	}
	100% {
		transform: translate(0,10px) scale(1,.9);
	}
}

.l-news .u-news_list {
	width: calc(100% - 360px);
}

/*about*/
.l-about {
	margin-top: 60px !important;
	position: relative;
	z-index: 10;
}

.l-about:after {
	content: '';
	width: 820px;
	margin: 380px 0 0;
	aspect-ratio: 52 / 25;
	background: url("/_assets/images/common/bg_08.svg") no-repeat center / 100%;
	position: absolute;
	top: 0;
	left: calc(50% + 60px);
	transform: translate(-50%,0);
	z-index: 0;
}

.l-about .inner {
	display: flex;
	position: relative;
	z-index: 10;
}

.l-about .title {
	width: 630px;
	padding: 0 60px 0 0;
}

.l-about .image {
	width: calc(100% - 630px);
	position: relative;
}

.l-about .image figure {
	position: absolute;
	top: 0;
	right: 0;
}

.l-about .image figure:nth-child(1) {
	width: 50%;
	z-index: 10;
	transform: translate(-20%,-20%);
}

.l-about .image figure:nth-child(2) {
	width: 100%;
	margin: 100px 0 0 0;
	z-index: 0;
}

.l-about .image figure:nth-child(3) {
	width: 50%;
	right: auto;
	left: 0;
	z-index: 10;
	transform: translate(-60%,225%);
}

.l-about .image figure img {
	transition: 1s ease-in-out;
}

.l-about .image .note {
	font-size: 10rem;
	font-weight: 400;
	letter-spacing: 0;
	text-align: right;
	width: 100%;
	margin: -20px 0 0;
	padding: 5px 0;
	display: block;
}

.l-about .u-title_low em {
	font-size: 22rem;
}

.l-about .u-title_low + .u-text {
	font-size: 18rem;
}

.l-about .u-title_low + .u-text b {
	font-weight: 500;
	display: inline-block;
}

/*instruction*/
.l-instruction {
	margin: 500px 0 0 !important;
	padding: 100px 0 160px;
	background: var(--white);
	border-radius: 0 0 80px 80px;
	position: relative;
}

.l-instruction:before {
	content: '';
	width: 100%;
	aspect-ratio: 682 / 95;
	background: url("/_assets/images/common/bg_01.svg") no-repeat center / 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, calc(-100% + 1px)) scale(1,-1);
}

.l-instruction .main_image {
	width: 220px;
	height: 240px;
	display: block;
	position: absolute;
	top: 0;
	left: calc(50% + 250px);
	transform: translate(0,-100%);
}

.l-instruction .main_image img {
	position: absolute;
}

.l-instruction .main_image img:nth-child(1) {
	width: 54.5%;
	bottom: 0;
	right: 0;
	transform-origin: bottom center; 
	animation: a-image_sway 3s linear infinite alternate;
}

@keyframes a-image_sway {
	0% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(3deg);
	}
}

.l-instruction .main_image img:nth-child(2) {
	width: 45%;
	top: 0;
	left: 0;
	animation: a-floatRotate 5s ease-in-out infinite alternate;
}

@keyframes a-floatRotate {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	100% {
		transform: translateY(20px) rotate(5deg);
	}
}

.l-instruction .inner {
	display: flex;
	flex-direction: row-reverse;
}

.l-instruction .title {
	width: calc(100% - 520px);
}

.l-instruction .image {
	width: 520px;
	padding: 0 50px 0 0;
	position: relative;
}

.l-instruction .image .u-text {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(100%,0);
}

.l-instruction .image .note {
	font-size: 10rem;
	font-weight: 400;
	letter-spacing: 0;
	width: 100%;
	margin: 10px 0 0 10px;
	display: block;
	position: absolute;
}

.l-instruction .u-title_page + .u-text {
	font-size: 18rem;
	margin-top: 25px;
}

/*support*/
.l-support {
	position: relative;
}

.l-support .u-inner > *:last-child {
	padding-bottom: 80px;
	border-bottom: 1px solid var(--gray_line);
}

.l-support .u-text {
	font-size: 18rem;
	margin-top: 25px;
}

.l-support .main_image {
	width: 380px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(calc(-50% + 60px),calc(-50% - 50px));
}

.l-support .main_image img {
	animation: rotateKakukaku 3s steps(2) infinite;
}

@keyframes rotateKakukaku {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(8deg);
	}
}

.l-support .buttons {
	margin: 50px -20px 0;
	display: flex;
}

.l-support .buttons > * {
	width: calc(100% / 2);
	padding-inline: 20px;
}

.l-support .buttons .u-button.-button > * {
	max-width: none;
	min-height: 106px;
}

.l-support .buttons .u-button.-button > * * {
	font-size: 20rem;
}

.l-support .buttons > *:nth-child(1) > * {
	background: var(--orange);
}

.l-support .buttons > *:nth-child(2) > * {
	background: var(--blue_light);
}

.l-support .buttons + .u-title_low {
	margin-top: 60px;
}

.l-support .buttons + .u-title_low em {
	font-size: 22rem;
}

.l-support .buttons + .u-title_low + .u-text {
	margin-top: 15px;
}

.l-support .buttons + .u-title_low + .u-text b {
	font-weight: 500;
	display: inline-block;
}




.u-card .u-title_page + * {
	margin-top: 20px;
}