@charset "utf-8";

.content-wrap {
	margin-top: var(--header-height);
	@media screen and (min-width: 1200px) {
		margin-top: 0;
	}
}

/* mv */
.mv-wrapper {
	margin: 0;
	padding: 0;
	.mv {
		width: 100vw;
		height: calc(492 / 390 * 100vw);
		position: relative;
		@media screen and (min-width: 1200px) {
			height: 900px;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.59);
			z-index: 1;
		}
		.mv-inner {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 2;
			color: var(--text-white);
			font-family: var(--zen-kaku);
		}
		.mv-title {
			width: calc(360 / 390 * 100vw);
			font-size: calc(19 / 390 * 100vw);
			font-weight: 500;
			text-align: center;
			& span {
				font-size: calc(25 / 390 * 100vw);
				font-weight: 500;
			}
			@media screen and (min-width: 1200px) {
				width: auto;
				font-size: 28px;
				& span {
					font-size: 37px;
					font-weight: 500;
				}
			}
		}
		.mv-desc {
			width: calc(352 / 390 * 100vw);
			font-size: var(--fontsize-base);
			font-weight: 500;
			text-align: left;
			line-height: 1.75;
			@media screen and (min-width: 1200px) {
				width: auto;
				font-weight: 400;
				text-align: center;
			}
		}
		.mv-title + .mv-desc {
			margin-top: calc(40 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				margin-top: 54px;
			}
		}
		@media screen and (min-width: 1200px) {
			.mv-desc + .mv-desc {
				margin-top: 1.5em;
			}
		}
		.mv-images-sp {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			.mv-image {
				width: 100%;
				aspect-ratio: 390 / 367;
				position: absolute;
				left: 0;
				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				&:nth-child(1) {
					top: 0;
				}
				&:nth-child(2) {
					bottom: 0;
				}
			}
			@media screen and (min-width: 1200px) {
				display: none;
			}
		}
		.mv-images-pc {
			display: none;
			@media screen and (min-width: 1200px) {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
				display: flex;
				.mv-image {
					width: 25%;
					& img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
}

/* int */
.int-wrapper {
	margin-top: calc(143 / 390 * 100vw);
	@media screen and (min-width: 1200px) {
		margin-top: 150px;
	}
	.int-title {
		width: 100vw;
		height: calc(430 / 390 * 100vw);
		position: relative;
		@media screen and (min-width: 1200px) {
			height: 500px;
		}
		.int-name {
			width: min(calc(290 / 390 * 100vw), 290px);
			height: min(calc(70 / 390 * 100vw), 70px);
			position: absolute;
			z-index: 1;
			right: 0;
			top: max(calc(-42 / 390 * 100vw), -42px);
			@media screen and (min-width: 1200px) {
				width: 422px;
				height: 86px;
				left: calc(50% - 143px);
				bottom: 100px;
				right: auto;
				top: auto;
			}
		}
		.int-text-wrapper {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.int-text {
			width: calc(360 / 390 * 100vw);
			height: calc(125 / 390 * 100vw);
			position: absolute;
			z-index: 1;
			right: calc(10 / 390 * 100vw);
			bottom: calc(20 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				width: 682px;
				height: 192px;
				left: calc(50% - 143px);
				bottom: 214px;
				right: auto;
			}
			& p {
				color: var(--text-base);
				font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", var(--shippori);
				font-size: calc(18 / 390 * 100vw);
				font-weight: 500;
				letter-spacing: 0.05em;
				line-height: 1.7;
				& span {
					color: var(--text-green);
					font-size: calc(22 / 390 * 100vw);
				}
				@media screen and (min-width: 1200px) {
					font-size: 26px;
					line-height: 2.2;
					& span {
						font-size: 32px;
					}
				}
			}
		}
		.int-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			& picture {
				height: 100%;
			}
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.int-desc {
		margin: calc(50 / 390 * 100vw) auto 0;
		width: calc(360 / 390 * 100vw);
		color: var(--text-base);
		font-size: var(--fontsize-base);
		font-weight: 400;
		line-height: 1.75;
		@media screen and (min-width: 1200px) {
			margin-top: 100px;
			max-width: 970px;
			font-size: 16px;
			line-height: 2.25;
		}
	}
	.int-qa {
		margin-top: calc(120 / 390 * 100vw);
		padding: calc(140 / 390 * 100vw) 0 calc(44 / 390 * 100vw);
		position: relative;
		background-image: linear-gradient(32deg, rgba(242, 255, 233, 1), rgba(233, 255, 252, 1));
		@media screen and (min-width: 1200px) {
			margin-top: 86px;
			padding: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: none;
		}
	}
	.int-qa-img {
		width: calc(344 / 390 * 100vw);
		height: calc(178 / 390 * 100vw);
		position: absolute;
		z-index: 1;
		top: calc(-89 / 390 * 100vw);
		left: calc(50% - (344 / 2 / 390 * 100vw));
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		@media screen and (min-width: 1200px) {
			width: 40.52%;
			height: auto;
			aspect-ratio: 778 / 404;
			position: absolute;
			top: auto;
			left: auto;
			right: 0;
		}
	}
	.int-qa + .int-qa {
		margin-top: calc(100 / 390 * 100vw);
		padding-top: calc(325 / 390 * 100vw);
		@media screen and (min-width: 1200px) {
			flex-direction: row-reverse;
			margin-top: 100px;
			padding-top: 0;
		}
		.int-qa-img {
			width: calc(253 / 390 * 100vw);
			height: calc(326 / 390 * 100vw);
			position: absolute;
			z-index: 1;
			top: calc(-50 / 390 * 100vw);
			left: calc(30 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				width: 409px;
				height: 527px;
				top: auto;
				left: 10%;
			}
			@media screen and (min-width: 1440px) {
				width: 409px;
				height: 527px;
				top: auto;
				left: 16%;
			}
			@media screen and (min-width: 1920px) {
				width: 409px;
				height: 527px;
				top: auto;
				left: 22%;
			}
		}
	}
	.int-qa-text {
		width: calc(360 / 390 * 100vw);
		margin: 0 auto;
		@media screen and (min-width: 1200px) {
			width: 70.26%;
			height: auto;
			margin: 0;
			padding: 100px 0 80px;
			position: relative;
			top: auto;
			left: 0;
			z-index: 0;
			background-image: linear-gradient(32deg, rgba(242, 255, 233, 1), rgba(233, 255, 252, 1));
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.question {
			color: var(--text-green);
			font-size: calc(18 / 390 * 100vw);
			font-weight: 500;
			line-height: 1.75;
			@media screen and (min-width: 1200px) {
				max-width: 750px;
				font-size: 20px;
				margin-left: 22.24%;
				margin-right: 22.24%;
			}
		}
		.answer {
			color: var(--text-base);
			font-size: var(--fontsize-base);
			font-weight: 400;
			line-height: 1.75;
			margin-top: calc(18 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				max-width: 750px;
				font-size: 16px;
				margin-top: 30px;
				margin-left: 22.24%;
				margin-right: 22.24%;
			}
		}
		& section + section .question {
			margin-top: calc(38 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				margin-top: 95px;
			}
		}
	}
	& + .int-wrapper {		
		.int-name {
			width: min(calc(220 / 390 * 100vw), 220px);
			@media screen and (min-width: 1200px) {
				width: 319px;
				bottom: 110px;
				left: calc(50% - 124px);
			}
		}
		.int-text {
			bottom: min(calc(50 / 390 * 100vw), 50px);
			& p {
				line-height: 1.5;
			}
			@media screen and (min-width: 1200px) {
				width: 770px;
				bottom: 218px;
				left: calc(50% - 124px);
				& p {
					line-height: 1.9;
				}
			}
		}
	}
}

/* desc */
.desc-wrapper {
	margin-top: calc(100 / 390 * 100vw);
	padding: calc(50 / 390 * 100vw) 0 calc(44 / 390 * 100vw);
	position: relative;
	background-image: linear-gradient(32deg, rgba(242, 255, 233, 1), rgba(233, 255, 252, 1));
	@media screen and (min-width: 1200px) {
		margin-top: 150px;
		padding: 100px 6%;
	}
	.desc-inner {
		@media screen and (min-width: 1200px) {
			display: flex;
			gap: 75px;
			justify-content: center;
			.desc-title-wrapper {
				width: 50%;
				flex-shrink: 0;
			}
		}
	}
	.desc-title {
		width: calc(376 / 390 * 100vw);
		margin: 0 auto;
		@media screen and (min-width: 1200px) {
			width: 100%;
			margin: 0;
		}
		& p {
			color: var(--text-base);
			font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", var(--shippori);
			font-size: calc(18 / 390 * 100vw);
			font-weight: 500;
			letter-spacing: 0.05em;
			line-height: 1.7;
			& span {
				color: var(--text-green);
				font-size: calc(22 / 390 * 100vw);
			}
			@media screen and (min-width: 1200px) {
				font-size: 26px;
				line-height: 2.2;
				& span {
					font-size: 32px;
				}
			}
		}
	}
	.desc-img {
		width: calc(274 / 390 * 100vw);
		margin: calc(40 / 390 * 100vw) auto 0;
		@media screen and (min-width: 1200px) {
			width: calc(50% - 75px);
			margin: 0;
			flex-shrink: 0;
		}
	}
	.desc-text {
		width: calc(346 / 390 * 100vw);
		margin: calc(50 / 390 * 100vw) auto 0;
		color: var(--text-base);
		font-size: var(--fontsize-base);
		font-weight: 400;
		line-height: 1.75;
		@media screen and (min-width: 1200px) {
			width: 100%;
			margin: 30px 0 0;
			font-size: 16px;
			line-height: 2.25;
		}
	}
}

/* animation */
.js-fadein,.js-fadein-parent > *{opacity: 0;transition:opacity 1.8s 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)}
.js-fadein.is-active,.js-fadein-parent.is-active > *{opacity:1}

.js-fadeup {
	opacity: 0;
    filter: blur(4px);
    transform: translateY(40px);
    transition: filter 1.8s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1.8s 0.4s cubic-bezier(0.39, 0.575, 0.565, 1), transform 1.8s 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.js-fadeup.is-active{opacity:1;filter: none;transform:none;}

.mv-images-pc > .mv-image:nth-child(1){
	opacity: 0;
	transition:opacity 0.8s 0.8s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-pc > .mv-image:nth-child(2){
	opacity: 0;
	transition:opacity 1s 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-pc > .mv-image:nth-child(3){
	opacity: 0;
	transition:opacity 1.2s 1s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-pc > .mv-image:nth-child(4){
	opacity: 0;
	transition:opacity 0.6s 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-pc.is-active > .mv-image:nth-child(1),
.mv-images-pc.is-active > .mv-image:nth-child(2),
.mv-images-pc.is-active > .mv-image:nth-child(3),
.mv-images-pc.is-active > .mv-image:nth-child(4){
	opacity: 1;
}

.mv-images-sp > .mv-image:nth-child(1){
	opacity: 0;
	transition:opacity 1.2s 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-sp > .mv-image:nth-child(2){
	opacity: 0;
	transition:opacity 1.2s 0.8s cubic-bezier(0.39, 0.575, 0.565, 1)
}
.mv-images-sp.is-active > .mv-image:nth-child(1),
.mv-images-sp.is-active > .mv-image:nth-child(2){
	opacity: 1;
}