@charset "utf-8";
/* 標準調整 */
img {
	height: auto;
	max-width: 100%;
}
html {
 	line-height: 1.6;
	font-size: 100%;
	font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;
}
em {
	font-style: normal;
}

:root {
	--clr_txt: #333;
	--clr_cta: #f14098;
	--clr_cta_on: #e9117d;
	--clr_btn: #4258d7;
	--clr_btn_on: #1e39d3;
	--card_content_width: 1080px;
}

/* パーツ */
.sp {
	display: none;
	@media (max-width: 768px) {
		display: revert;
	}
}
.pc {
	display: revert;
	@media (max-width: 768px) {
		display: none;
	}
}
.lst_note {
	font-size: 87%;
}
.wrap_cta {
	margin-block: 2rem;
	.btn_cta {
		align-items: center;
		background-image: linear-gradient(to bottom, var(--clr_cta) 50%, var(--clr_cta_on) 50%);
		background-size: 100% 200%;
		background-position: 50% 0%;
		background-repeat: no-repeat;
		border-radius: 100dvw;
		color: #fff;
		display: flex;
		flex-flow: row nowrap;
		font-size: 1.25rem;
		font-weight: 500;
		gap: 0 .2em;
		justify-content: center;
		line-height: 1;
		margin-inline: auto;
		max-width: 360px;
		padding: .8rem 2rem;
		transition: background .2s ease;
		&::after {
			aspect-ratio: 1 / 1;
			background-color: #fff;
			content: "";
			mask-image: url(../img/fig_crystal.svg);
			mask-position: center;
			mask-repeat: no-repeat;
			mask-size: contain;
			width: .9em;
		}
		&:hover {
			background-position: 50% 100%;
		}
		&.type_sub {
			background-image: linear-gradient(to bottom, var(--clr_btn) 50%, var(--clr_btn_on) 50%);
		}
	}
	@media (max-width: 768px) {
		.btn_cta {
			padding-inline: .5rem;
			width: 100%;
			&.type_sub {
				font-size: min(1rem, 4.103cqw);
			}
		}
	}
}
.swiper-button-prev,
.swiper-button-next {
	display: none;
	.swiper-initialized & {
		align-items: center;
		aspect-ratio: 1 / 1;
		background-color: var(--clr_cta);
		border-radius: 100dvw;
		display: flex;
		height: 2rem!important;
		justify-content: center;
		width: 2rem!important;
		&::before {
			aspect-ratio: 4 / 5;
			background-color: #fff;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
			content: "";
			transform: translateX(10%);
			width: 40%;
		}
		svg {
			display: none;
		}
	}
}
.swiper-button-prev {
	&::before {
		transform: scale(-1,1) translateX(10%);
	}
}

/* 個別スタイル */

/* haeder */
header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
	.inner {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin-inline: auto;
		max-width: 1300px;
		padding: 1rem 6rem;
		.wrap_cta {
			margin-block: 0;
		}
	}
	@media (max-width: 768px) {
		position: absolute;
		.inner {
			.header_logo {
				position: fixed;
				text-align: center;
				inset: 0 0 auto;
				padding: .5rem;
				transition: background-color .32s ease-in-out;
				width: 100%;
				&.scrolled {
					background-color: #fff;
				}
				img {
					height: 2.5rem;
					width: auto;: 
				}
			}
			.wrap_cta {
				inset: auto 0 0;
				padding: .5rem 1.5rem;
				position: fixed;
				width: 100%;
			}
		}
	}
}

main {
	@media (max-width: 768px) {
		container-type: inline-size;
	}
}

/* MV */
.mv {
	background-image: url(../img/bg_mv.webp);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 1300px auto;
	margin-inline: auto;
	max-width: 1300px;
	min-height: 740px;
	padding-top: 86px;
	position: relative;
	z-index: 0;
	.page_ttl {
		padding-top: 2rem;
		position: relative;
		text-align: center;
		z-index: 1;
	}
	@media (max-width: 768px) {
		background-image: url(../img/bg_mv_sp.webp);
		background-size: 100% auto;
		container-type: inline-size;
		min-height: 153.8cqw;		
	}
	.snow1 {
		animation: rotateIdential 5.8s infinite linear, blink 2.2s infinite linear;
		aspect-ratio: 1 / 1;
		position: fixed;
		inset: 0% auto auto 52%;
		width: 8rem;
		@media (max-width: 768px) {
			inset: 1.2% 24% auto auto;
			width: 14cqw;
		}
	}
	.snow2 {
		animation: rotateOpposite 4.8s infinite linear, blink 1.6s infinite ease-in-out;
		aspect-ratio: 1 / 1;
		position: fixed;
		inset: 10% auto auto 21%;
		transform-origin: center;
		width: 6rem;
		@media (max-width: 768px) {
			inset: 3.2% auto auto 3.8%;
			width: 19cqw;
		}
	}
	.snow3 {
		animation: rotateOpposite 7.2s infinite linear, blink 1.2s infinite ease-in-out;
		aspect-ratio: 1 / 1;
		position: fixed;
		inset: 2% 20% auto auto;
		transform-origin: center;
		width: 6rem;
		@media (max-width: 768px) {
			inset: 3.2% 4% auto auto;
			width: 14cqw;
		}
	}
	.twinkle {
		aspect-ratio: 1 / 1;
		mix-blend-mode: overlay;
		opacity: .8;
		position: absolute;
		&.twinkle1 {
			animation: twinkle 6s ease 0s infinite ;
			inset: 48% auto auto 22.5%;
			width: 7rem;
			@media (max-width: 768px) {
				inset: 50.6% auto auto 28.5%;
				width: 15cqw;
			}
		}
		&.twinkle2 {
			animation: twinkle2 3s ease 1.5s infinite ;
			inset: 33.5% auto auto 0;
			width: 6.5rem;
			@media (max-width: 768px) {
				inset: 37.6% auto auto 1.2%;
				width: 15cqw;
			}
		}
		&.twinkle3 {
			animation: twinkle2 5.2s ease 2s infinite ;
			inset: 67% 37.4% auto auto;
			width: 4.2rem;
			@media (max-width: 768px) {
				inset: 37.6% 0 auto auto;
				width: 15cqw;
			}
		}
	}
}
@keyframes rotateIdential {
	0% {
		opacity: .1;
		tarnsform: rotate(0);
	}
	50% {
		opacity: .6;
		transform: rotate(180deg);
	}
	100% {
		opacity: .1;
		transform: rotate(360deg);
	}
}
@keyframes rotateOpposite {
	0% {
		opacity: .05;
		tarnsform: rotate(0);
	}
	50% {
		opacity: .7;
		transform: rotate(-180deg);
	}
	100% {
		opacity: .05;
		transform: rotate(-360deg);
	}
}
@keyframes blink {
	0% {
		opacity: .1;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: .1;
	}
}
@keyframes twinkle {
	0% {
		opacity: .8;
	}
	1% {
		opacity: .6;
	}
	2% {
		opacity: 1;
	}
	3% {
		opacity: .6;
	}
	4% {
		opacity: .8;
	}
	42% {
		opacity: .8
	}
	45% {
		opacity: .4;
	}
	48% {
		opacity: 1;
	}
	50% {
		opacity: .4;
	}
	51% {
		opacity: .8
	}
}
@keyframes twinkle2 {
	0% {
		opacity: .3;
	}
	3% {
		opacity: 1;
	}
	6% {
		opacity: .3;
	}
	9% {
		opacity: .8;
	}
}

/* recommend */
.sec_recommend {
	margin-inline: auto;
	max-width: 1300px;
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
		overflow: hidden;
	}
	.hd_recommend {
		text-align: center;
	}
	.lst_target {
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		gap: 1.8rem 1rem;
		justify-content: center;
		max-width: 800px;
		margin: 2rem auto 0;
		padding-top: 3rem;
		position: relative;
		z-index: 1;
		@media (max-width: 768px) {
			padding-bottom: 2rem;
		}
		.target_item {
			background-color: #aaa;
			border-radius: .625rem;
			color: #fff;
			font-size: 0.875rem;
			font-weight: 600;
			opacity: 0;
			padding: .8rem 2rem;
			position: relative;
			transition-property: opacity, transform;
			transition-duration: .6s;
			transition-timing-function: ease-in-out;
			&.visible {
				opacity: 1;
				transform: translateY(-3rem);
			}
			@media (max-width: 768px) {
				padding-inline: 1rem;
			}
			&::after {
				aspect-ratio: 24 / 17;
				background-color: #aaa;
				content: "";
				display: block;
				inset: auto 0 calc(-1.5rem + 2px) 0;
				margin-inline: auto;
				mask-image: url(../img/fig_tail.svg);
				mask-position: center -10%;
				mask-repeat: no-repeat;
				mask-size: contain;
				height: 1.5rem;
				position: absolute;
				width: auto;
			}
			&:nth-child(1) {
				background-color: #0293d4;
				order: 1;
				margin-inline: 3rem 8rem;
				@media (max-width: 768px) {
					margin-inline: .5rem auto;
				}
				&::after {
					background-color: #0293d4;
					transform: scale(-1, 1);
				}
			}
			&:nth-child(2) {
				background-color: #53c1db;
				order: 2;
				transition-delay: .2s;
				@media (max-width: 768px) {
					order: 3;
					transition-delay: .3s;
				}
				&::after {
					background-color: #53c1db;
					transform: scale(-1, 1);
				}
			}
			&:nth-child(3) {
				background-color: #a5b5db;
				margin: -1rem 8rem 0 0;
				order: 3;
				transition-delay: .4s;
				@media (max-width: 768px) {
					margin: 0 .5rem 0 auto;
					order: 2;
					transition-delay: .3s;
				}
				&::after {
					background-color: #a5b5db;
				}
			}
			&:nth-child(4) {
				background-color: #e98ed6;
				order: 4;
				@media (max-width: 768px) {
					margin: 0 auto 0 1.5rem;
					min-width: calc(100% - 3rem);
				}
				&::after {
					background-color: #e98ed6;
					transform: scale(-1, 1);
				}
			}
			&:nth-child(5) {
				background-color: #5c88e5;
				margin: -1rem -8rem 0 0;
				order: 5;
				@media (max-width: 768px) {
					margin: 0 -.5rem 0 auto;
				}
				&::after {
					background-color: #5c88e5;
				}
			}
			&:nth-child(6) {
				background-color: #0293d4;
				margin: 0 0 0 8rem;
				order: 6;
				@media (max-width: 768px) {
					margin: 0 auto 0 .5rem;
				}
				&::after {
					background-color: #0293d4;
				}
			}
			&:nth-child(7) {
				background-color: #5c88e5;
				margin: 0 auto 0 4rem;
				order: 7;
				@media (max-width: 768px) {
					margin: 0 .5rem 0 auto;
				}
				&::after {
					background-color: #5c88e5;
					transform: scale(-1, 1);
				}
			}
			&:nth-child(8) {
				background-color: #e98ed6;
				margin: 0 0 0 8rem;
				order: 8;
				@media (max-width: 768px) {
					margin-inline: auto;
				}
				&::after {
					background-color: #e98ed6;
				}
			}
		}
	}
	.pictsnow {
		aspect-ratio: 1 / 1;
		mask-image: url(../img/fig_crystal.svg);
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		position: absolute;
		img {
			opacity: 0;
		}
		&:nth-of-type(1) {
			background-color: #fbfbdd;
			inset: 30% 10% auto auto;
			width: 5rem;
			@media (max-width: 768px) {
				inset: 20% auto auto -5%;
				width: 5.6rem;
			}
		}
		&:nth-of-type(2) {
			background-color: #fddcf1;
			inset: 50% auto auto 15%;
			width: 4rem;
			@media (max-width: 768px) {
				inset: 58% -5% auto auto;
				width: 5.6rem;
			}
		}
		&:nth-of-type(3) {
			background-color: #ddfbf2;
			inset: auto auto 5% 5%;
			width: 7rem;
			@media (max-width: 768px) {
				inset: auto auto 10% -5%;
				width: 5.6rem;
			}
		}
	}
}

/* summary */
.sec_summary {
	position: relative;
	z-index: 1;
	>.inner {
		margin-inline: auto;
		max-width: 1300px;
		padding-bottom: .1px;
		&::before {
			aspect-ratio: 776 / 225;
			background-image: url(../img/img_recommend.webp);
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 100% auto;
			content: "";
			display: block;
			height: auto;
			margin-inline: auto;
			inset: 0 0 auto;
			position: sticky;
			width: 388px;
			max-width: 80%;;
			@media (max-width: 768px) {
				top: 56px;
			}
		}
	}
}
.summary_card {
	border-radius: 3rem;
	color: #fff;
	overflow: hidden;
	padding: 3rem;
	position: sticky;
	top: 112px;
	z-index: 1;
	&:not(.head_summary) {
		margin-top: 3rem;
	}
	@media (max-width: 768px) {
		border-radius: 1.5rem;
		padding-inline: 1.5rem;
		top: 56px;
		&:not(:first-child) {
			margin-top: 2rem;
		}
		>.inner {
			align-items: flex-start;
			display: grid;
			grid-template-rows: auto 1fr;
			max-height: calc(100dvh - 6rem - 56px);
		}
	}
	.hd_summary,
	.hd_feature {
		text-align: center;
		position: relative;
		@media (max-width: 768px) {
			margin-inline: -1.5rem;
		}
	}
	.wrap_summary_contents,
	.wrap_feature_contents {
		display: grid;
		gap: 0 2rem;
		margin: 2rem auto 0;
		max-width: var(--card_content_width);
		position: relative;
	}
}
.head_summary {
	background-color: #0293d4;
	padding-bottom: 0;
	&::before {
		background-image: url(../img/fig_question.svg);
		background-position:83% 0%;
		background-repeat: no-repeat;
		background-size: auto 103%;
		content: "";
		height: 102%;
		inset: 0;
		opacity: .1;
		position: absolute;
		width: 100%;
		@media (max-width: 768px) {
			background-position: center center;
			background-size: 80% auto;
			height: 100%;
		}
	}
	.wrap_summary_contents {
		grid-template-columns: 1fr auto;
		.lead_summary {
			font-size: 2.25rem;
			font-weight: 500;
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			margin-left: 1.2em;
			position: relative;
			&::before {
				background-color: currentColor;
				content: "";
				height: 1lh;
				inset: 0 0 auto -1.2em;
				mask-image: url(../img/fig_crystal.svg);
				mask-position: 50% 65%;
				mask-repeat: no-repeat;
				mask-size: contain;
				position: absolute;
				width: 1em;
			}
		}
		.aside_summary {
			background-image: url(../img/fig_doctor.webp);
			background-position: right 14rem bottom;
			background-repeat: no-repeat;
			background-size: auto 206px;
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			padding-bottom: 108px;
			.txt_aside_summary {
				background-image: url(../img/fig_baloon.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				color: var(--clr_txt);
				font-size: 1.25rem;
				font-weight: 500;
				margin-inline: auto 1rem;
				text-align: center;
				padding: 3rem 2rem;
				width: fit-content;
			}
		}
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			.lead_summary {
				font-size: min(1.5rem, 6cqw);
				grid-column: 1;
				grid-row: 1;
				margin: 12cqw 0 0;
				text-align: center;
				&::before {
					inset: -12cqw 0 0;
					margin: 0 auto auto;
					width: 10cqw;
				}
			}
			.aside_summary {
				background-position: left .5rem bottom;
				background-size: 43cqw auto;
				grid-column: 1;
				grid-row: 2;
				margin-inline: -1.5rem;
				padding-bottom: 16cqw;
				.txt_aside_summary {
					font-size: min(1.25rem, 5.128cqw);
				}
			}
		}
	}
}
.sec_feature1 {
	background-color: #53c1db;
	&::before {
		background-color: #fff;
		mask-image: url(../img/fig_crystal.svg);
		mask-position: left top;
		mask-repeat: no-repeat;
		mask-size: auto 65%;
		content: "";
		height: 200%;
		inset: 0;
		opacity: .1;
		position: absolute;
		transform-origin: 0 0;
		transform: translate(-4%,8%) rotate(-20deg);
		width: 100%;
		@media (max-width: 768px) {
			mask-position: center;
			height: 100%;
			transform-origin: center;
			transform: rotate(20deg);
		}
	}
	.wrap_feature_contents {
		grid-template-columns: 57% 1fr;
		.sec_feature_detail {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			font-size: 2.6875rem;
			font-weight: 500;
			margin-left: 1.2em;
			.hd_feature_detail {
				position: relative;
				&::before {
					background-color: currentColor;
					content: "";
					height: 1lh;
					inset: 0 0 auto -1.2em;
					mask-image: url(../img/fig_crystal.svg);
					mask-position: 50% 65%;
					mask-repeat: no-repeat;
					mask-size: contain;
					position: absolute;
					width: 1em;
				}
			}
			.txt_feature_detail {
				font-size: 1.5rem;
				margin-top: 2rem;
			}
		}
		.fig_feature_detail {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			text-align: right;
		}
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			.sec_feature_detail {
				font-size: min(1.69rem, 6.923cqw);
				grid-column: 1;
				grid-row: 1;
				margin: 12cqw 0 0;
				text-align: center;
				.hd_feature_detail {
					font-size: min(1.69rem, 6.923cqw);
					&::before {
						inset: -12cqw 0 0;
						margin: 0 auto auto;
						width: 10cqw;
					}
				}
				.txt_feature_detail {
					font-size: min(1.13rem, 4.5cqw);
					margin-top: 1rem;
				}
			}
			.fig_feature_detail {
				grid-column: 1;
				grid-row: 2;
				margin: 2rem auto -1rem;
				max-width: 80%;
			}
		}
	}
}
.sec_feature2 {
	background-color: #a5b5db;
	&::before {
		background-color: #fff;
		mask-image: url(../img/fig_crystal.svg);
		mask-position: right top;
		mask-repeat: no-repeat;
		mask-size: auto 65%;
		content: "";
		height: 200%;
		inset: 0;
		opacity: .1;
		position: absolute;
		transform-origin: 100% 0;
		transform: translate(4%,8%) rotate(20deg);
		width: 100%;
		@media (max-width: 768px) {
			mask-position: center;
			height: 100%;
			transform-origin: center;
			transform: rotate(-20deg);
		}
	}
	.wrap_feature_contents {
		grid-template-columns: 1fr 57%;
		.sec_feature_detail {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			font-size: 2.6875rem;
			font-weight: 500;
			margin-left: 2em;
			.hd_feature_detail {
				position: relative;
				&::before {
					background-color: currentColor;
					content: "";
					height: 1lh;
					inset: 0 0 auto -1.2em;
					mask-image: url(../img/fig_crystal.svg);
					mask-position: 50% 65%;
					mask-repeat: no-repeat;
					mask-size: contain;
					position: absolute;
					width: 1em;
				}
			}
			.txt_feature_detail {
				font-size: 1.5rem;
				margin-top: 2rem;
			}
		}
		.fig_feature_detail {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			text-align: right;
		}
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			.sec_feature_detail {
				font-size: min(1.69rem, 6.923cqw);
				grid-column: 1;
				grid-row: 1;
				margin: 12cqw 0 0;
				text-align: center;
				.hd_feature_detail {
					font-size: min(1.69rem, 6.923cqw);
					&::before {
						inset: -12cqw 0 0;
						margin: 0 auto auto;
						width: 10cqw;
					}
				}
				.txt_feature_detail {
					font-size: min(1.13rem, 4.5cqw);
					margin-top: 1rem;
				}
			}
			.fig_feature_detail {
				grid-column: 1;
				grid-row: 2;
				margin: 2rem auto -1rem;
				max-width: 80%;
			}
		}
	}
}
.sec_feature3 {
	background-color: #5c88e5;
	&::before {
		background-color: #fff;
		mask-image: url(../img/fig_crystal.svg);
		mask-position: left top;
		mask-repeat: no-repeat;
		mask-size: auto 65%;
		content: "";
		height: 200%;
		inset: 0;
		opacity: .1;
		position: absolute;
		transform-origin: 0 0;
		transform: translate(-4%,8%) rotate(-20deg);
		width: 100%;
		@media (max-width: 768px) {
			mask-position: center;
			height: 100%;
			transform-origin: center;
			transform: rotate(20deg);
		}
	}
	.wrap_feature_contents {
		grid-template-columns: 57% 1fr;
		.sec_feature_detail {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			font-size: 2.6875rem;
			font-weight: 500;
			margin-left: 2em;
			.hd_feature_detail {
				position: relative;
				&::before {
					background-color: currentColor;
					content: "";
					height: 1lh;
					inset: 0 0 auto -1.2em;
					mask-image: url(../img/fig_crystal.svg);
					mask-position: 50% 65%;
					mask-repeat: no-repeat;
					mask-size: contain;
					position: absolute;
					width: 1em;
				}
			}
			.txt_feature_detail {
				font-size: 1.5rem;
				margin-top: 2rem;
			}
		}
		.fig_feature_detail {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			text-align: right;
		}
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			.sec_feature_detail {
				font-size: min(1.69rem, 6.923cqw);
				grid-column: 1;
				grid-row: 1;
				margin: 12cqw 0 0;
				text-align: center;
				.hd_feature_detail {
					font-size: min(1.69rem, 6.923cqw);
					&::before {
						inset: -12cqw 0 0;
						margin: 0 auto auto;
						width: 10cqw;
					}
				}
				.txt_feature_detail {
					font-size: min(1.13rem, 4.5cqw);
					margin-top: 1rem;
				}
			}
			.fig_feature_detail {
				grid-column: 1;
				grid-row: 2;
				margin: 2rem auto -1rem;
				max-width: 80%;
			}
		}
	}
}
.sec_feature4 {
	background-color: #e98ed6;
	padding-bottom: 6rem;
	&::before {
		background-color: #fff;
		mask-image: url(../img/fig_crystal_pattern.svg);
		mask-position: center;
		mask-repeat: repeat;
		mask-size: auto 18%;
		content: "";
		inset: 0;
		opacity: .2;
		position: absolute;
		width: 100%;
		@media (max-width: 768px) {
			mask-size: auto 11%;
		}
	}
	.wrap_feature_contents {
		grid-template-columns: 1fr;
		.sec_feature_detail {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			font-size: 2.6875rem;
			font-weight: 500;
			padding-left: 1.2em;
			.hd_feature_detail {
				align-items: center;
				display: flex;
				gap: 0 .2em;
				justify-content: center;
				&::before {
					background-color: currentColor;
					content: "";
					height: 1lh;
					mask-image: url(../img/fig_crystal.svg);
					mask-position: 50% 65%;
					mask-repeat: no-repeat;
					mask-size: contain;
					width: 1em;
				}
			}
			.txt_feature_detail {
				font-size: 2.1875rem;
				margin-top: 2rem;
				text-align: center;
			}
		}
		@media (max-width: 768px) {
			.sec_feature_detail {
				font-size: min(1.69rem, 6.923cqw);
				margin: 12cqw 0 0;
				padding-left: 0;
				text-align: center;
				.hd_feature_detail {
					font-size: min(1.69rem, 6.923cqw);
					position: relative;
					&::before {
						inset: -12cqw 0 0;
						margin: 0 auto auto;
						position: absolute;
						width: 10cqw;
					}
				}
				.txt_feature_detail {
					font-size: min(1.13rem, 4.5cqw);
					margin-top: 1rem;
				}
			}
		}
	}
}

/* perks */
.sec_perks {
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
		padding-inline: 1.5rem;
	}
	.hd_perks {
		margin-top: 8rem;
		text-align: center;
		@media (max-width: 768px) {
			margin: 4rem -1.5rem 0;
		}
	}
	.wrap_perks_content {
		align-items: center;
		display: grid;
		gap: 0 2rem;
		grid-template-columns: 1fr minmax(35%,346px);
		margin: 2rem auto 0;
		max-width: var(--card_content_width);
		padding-inline: 1rem;
		.sec_perks_detail {
			margin-left: auto;
			width: fit-content;
			.hd_perks_detail {
				font-size: 1.625rem;
				font-weight: 600;
				em {
					color: var(--clr_cta);
					font-size: 2rem;
				}
			}
			.txt_perks_detail {
				font-weight: bold;
				margin-top: 2rem;
			}
		}
		@media (max-width: 768px) {
			gap: 2rem 0;
			grid-template-columns: 1fr;
			padding-inline: 0;
			.sec_perks_detail {
				grid-row: 2;
				.hd_perks_detail {
					text-align: center;
					>span {
						font-size: min(1.06rem, 4.359cqw);
					}
				}
			}
			.fig_perks {
				grid-row: 1;
				margin-inline: auto;
				text-align: center;
				width: 70%;
			}
		}
	}
}

/* program */
.sec_program {
	background-color: #f6f7eb;
	border-radius: 3rem;
	margin: 6rem auto 0;
	max-width: 1300px;
	padding: 3rem;
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
		margin-top: 3rem;
		padding-inline: 1.5rem;
	}
	.hd_program {
		margin-top: 2rem;
		text-align: center;
		@media (max-width: 768px) {
			margin: 0 -1.5rem;
		}
	}
	.wrap_program_detail {
		display: grid;
		gap: 0 2rem;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto auto 1fr;
		margin-top: 3rem;
		.sec_program_detail {
			border-radius: 1.25rem;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: subgrid;
			grid-row: 1 / 5;
			padding: 1.5rem 1rem 1rem;
			.hd_program_detail {
				grid-row: 1 / 2;
				text-align: center;
			}
			.img_program_detail {
				background-color: #fff;
				line-height: 0;
				margin-top: 1.5rem;
				grid-row: 2 / 3;
			}
			.catch_program_detail {
				background-color: #fff;
				font-size: 1.1875rem;
				font-weight: 600;
				text-align: center;
				grid-row: 3 / 4;
			}
			.dst_benefit {
				background-color: #fff;
				border-radius: 0 0 1.25rem 1.25rem;
				grid-row: 4 / 5;
				padding-bottom: 1.5rem;
				.benefit_item {
					margin-top: 1rem;
					.benefit_ttl {
						border-radius: 100dvw;
						color: #fff;
						font-size: 0.9375rem;
						font-weight: 500;
						margin-inline: auto;
						min-width: 10em;
						padding: .2em 0;
						text-align: center;
						width: fit-content;
					}
					.benefit_cnt {
						font-size: 0.875rem;
						font-weight: 600;
						margin-top: .5rem;
						text-align: center;
					}
				}
			}
			&.beginner {
				background-color: #0293d4;
				.catch_program_detail {
					color: #0293d4;
				}
				.benefit_ttl {
					background-color: #0293d4;
				}
			}
			&.intermediate {
				background-color: #53c1db;
				.catch_program_detail {
					color: #53c1db;
				}
				.benefit_ttl {
					background-color: #53c1db;
				}
			}
			&.advanced {
				background-color: #a5b5db;
				.catch_program_detail {
					color: #a5b5db;
				}
				.benefit_ttl {
					background-color: #a5b5db;
				}
			}
		}
		@media (max-width: 768px) {
			gap: 1.5rem 0;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			.sec_program_detail {
				grid-template-rows: repeat(4, auto);
				grid-row: auto;
			}
		}
	}
}
.sec_other_materials {
	align-items: center;
	background-image: url(../img/bg_other_materials.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1415px auto;
	border-radius: 1.5rem;
	display: grid;
	gap: 0 1rem;
	grid-template-columns: auto auto 1fr;
	margin-top: 1rem;
	padding-inline: 2rem 1rem;
	.hd_other_materials {
		align-items: center;
		color: #fff;
		font-size: 1.5rem;
		font-weight: bold;
		display: flex;
		justify-content: flex-start;
		line-height: 1.4;
		letter-spacing: .5ex;
		padding-block: .5rem;
		text-shadow: 3px 3px 4px rgba(0,0,0,.3);
	}
	.dst_other_materials {
		align-items: center;
		align-self: stretch;
		background-color: #fff;
		border-radius: 1.75rem;
		display: grid;
		gap: 0 1.5rem;
		grid-template-columns: auto 1fr;
		margin: 1rem 0 1rem 1rem;
		padding: .5rem 1rem;
		position: relative;
		&::before {
			aspect-ratio: 3 / 2;
			background-color: #fff;
			clip-path: polygon(0 50%, 100% 0, 100% 100%);
			content: "";
			inset: 0 auto 0 -1.45rem;
			margin-block: auto; 
			position: absolute;
			width: 1.55rem;
		}
		.other_materials_ttl {
			color: #1e2678;
			font-size: 1.25rem;
			font-weight: bold;
		}
		.other_materials_cnt {
			font-weight: bold;
			line-height: 1.4;
		}
	}
	@media (max-width: 768px) {
		display: revert;
		padding: 1rem .5rem .5rem;
		.hd_other_materials {
			font-size: min(0.94rem, 3.846cqw);
			letter-spacing: -.1ex;
			justify-content: center;
			padding: 0;
			text-align: center;
		}
		.img_other_materials {
			margin-inline: auto;
			text-align: center;
		}
		.dst_other_materials {
			border-radius: 1rem;;
			display: revert;
			margin: 0;
			padding: .5rem;
			&::before {
				content: none;
			}
			.other_materials_ttl {
				font-size: min(1.13rem, 4.615cqw);
				font-weight: 800;
				text-align: center;
			}
			.other_materials_cnt {
				font-size: min(0.81rem, 3.333cqw);
				margin-top: .2rem;
				text-align: center;
			}
		}
	}
}

/* point */
.sec_point {
	margin-inline: auto;
	max-width: 1300px;
	padding: 3rem 0;
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
		padding: 2rem 1.5rem 0;
	}
	.hd_point {
		margin-top: 2rem;
		text-align: center;
		@media (max-width: 768px) {
			margin-inline: -1.5rem;
		}
	}
	.dst_point {
		position: relative;
		.point_item {
			position: relative;
			.point_cnt {
				font-weight: bold;
				margin-top: 1rem;
				text-align: center;
			}
		}
		@media (min-width: 769px) {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			margin-block: 5rem;
			.point_item {
				grid-row: 1 / 2;
				.point_cnt {
					font-size: .875rem;
				}
				&.point1 {
					grid-column: 2 / 3;
					margin-top: 1rem;
					transform: scale(1.4);
					z-index: 1;
				}
				&.point2 {
					grid-column: 1 / 2;
				}
				&.point3 {
					grid-column: 3 / 4;
				}
				&:nth-child(n+4) {
					display: none;
				}
			}
		}
	}
}
.swiper.wrap_dst_point {
	@media (max-width: 768px) {
		margin-inline: -1.5rem;
		padding-block: 3rem;
		/* padding-inline: 3rem; */
		.dst_point {
			.point_item {
				transition: transform .2s ease;
				.point_cnt {
					font-size: min(0.75rem, 3.077cqw);
				}
				&.swiper-slide-active {
					transform: scale(1.2);
					z-index: 1;
				}
			}
		}
	}
}

/* outline */
.sec_outline {
	margin-inline: auto;
	max-width: 1300px;
	padding: 0 3rem 3rem;
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
		padding: 2rem 1.5rem;
	}
	.hd_outline {
		text-align: center;
		@media (max-width: 768px) {
			margin-inline: -1.5rem;
		}
	}
	.wrap_dst_outline {
		border: #a5b5db 1px solid;
		border-radius: 1.25rem;
		margin: 2rem auto 4rem;
		max-width: 890px;
		overflow: hidden;
		.dst_outline {
			border-collapse: collapse;
			display: grid;
			grid-template-columns: auto 1fr;
			font-size: 0.9375rem;
			font-weight: bold;
			.outline_item {
				display: grid;
				grid-template-columns: subgrid;
				grid-column: 1 / 3;
				&:first-child {
					.outline_ttl,
					.outline_cnt {
						border-top-width: 0;
					}
				}
				.outline_ttl,
				.outline_cnt {
					border-color: #a5b5db;
					border-style: solid;
					border-width: 1px 0 0 1px;
					font-size: 1rem;
					&:first-child {
						border-left-width: 0;
					}
				}
				.outline_ttl {
					color: #0293d4;
					grid-column: 1;
					min-width: 15em;
					padding: 1rem 0 1rem 3rem;
				}
				.outline_cnt {
					grid-column: 2;
					padding: 1rem 2rem;
				}
			}
		}
		@media (max-width: 768px) {
			border-width: 2px;
			.dst_outline {
				display: unset;
				.outline_item {
					display: unset;
					&:first-child {
						.outline_cnt {
							border-top-width: 2px;
						}
					}
					.outline_ttl,
					.outline_cnt {
						border-left: none;
						border-top-width: 2px;
					}
					.outline_ttl,
					.outline_cnt {
						padding: 1rem;
						text-align: center;
					}
				}
			}
		}
	}
}

/* hallo */
.sec_hallo {
	color: #fff;
	container-type: inline-size;
	font-weight: 600;
	margin-top: 0;
	overflow: hidden;
	padding-block: 10rem;
	position: relative;
	@media (max-width: 768px) {
		padding: 3rem 1.5rem 3rem;
	}
	&::before {
		aspect-ratio: 1 / 1;
		background-color: #0293d4;
		border-radius: 100%;
		content: "";
		display: block;
		inset: 0 0 auto 50%;
		margin: 0 auto;
		position: absolute;
		transform: translate(-50%, 0);
		width: 700cqw;
	}
	&::after {
		background-color: #0293d4;
		inset: auto 0 0;
		content: "";
		height: calc(100% - 10rem);
		position: absolute;
		width: 100%;
		@media (max-width: 768px) {
			height: calc(100% - 3rem);
		}
	}
	>.inner {
		margin-inline: auto;
		max-width: 1100px;
		position: relative;
		z-index: 1;
	}
	.hd_hallo {
		text-align: center;
	}
	.lead_hallo {
		font-size: 1.125rem;
		margin-top: 3rem;
		text-align: center;
	}
	.sec_growth {
		margin-top: 5rem;
		@media (max-width: 768px) {
			margin-top: 3rem;
		}
	}
	.hd_growth {
		background-color: #fff;
		border-radius: 1rem;
		color: #0293d4;
		font-size: 1.75rem;
		margin-inline: auto;
		padding: .2em 1.5em;
		width: fit-content;
		em {
			color: var(--clr_cta);
			display: inline-block;
			margin-inline: .3em;
		}
		@media (max-width: 768px) {
			font-size: min(1.13rem, 4.615cqw);
			font-weight: 800;
			padding-block: .5em;
			text-align: center;
			width: auto;
			em {
				font-size: min(1.5rem, 6.154cqw);
				line-height: 1.2;
			}
		}
	}
	.hd_growth_sub {
		font-size: 1.75rem;
		padding-bottom: 2rem;
		position: relative;
		text-align: center;
		&::after {
			background-color: var(--clr_cta);
			border-radius: 100dvw;
			content: "";
			height: 4px;
			inset: auto 0 0 0;
			margin: auto auto 0;
			position: absolute;
			width: 10rem;
		}
		@media (max-width: 768px) {
			line-height: 1.4;
			padding-bottom: 1rem;
		}
	}
	.lead_growth {
		font-size: 1.125rem;
		margin-top: 3rem;
		text-align: center;
		@media (max-width: 768px) {
			font-size: min(1.25rem, 5.128cqw);
			margin-top: 2rem;
			text-align: left;
		}
	}
	.dst_growth {
		display: grid;
		gap: 0 2rem;
		grid-template-columns: repeat(3, 1fr);
		margin: 3rem auto 0;
		max-width: 90%;
		.growth_item {
			.growth_ttl {
				align-items: center;
				aspect-ratio: 1 / 1;
				background-color: #fff;
				border-radius: 100%;
				color: #0293d4;
				display: flex;
				flex-flow: column nowrap;
				font-size: 1.125rem;
				justify-content: center;
				em {
					color: var(--clr_cta);
					font-size: 3.25rem;
				}
			}
			.growth_cnt {
				background-color: #e2f6ff;
				border: 1px solid #0293d4;
				border-radius: 1rem;
				color: var(--clr_txt);
				font-weight: 800;
				padding: 1.5rem 1rem;
				text-align: center;
				transform: translateY(-3rem);
			}
		}
		@media (max-width: 768px) {
			display: unset;
			.growth_item {
				margin: 2rem auto -3rem;
				max-width: 90%;
			}
		}
	}
	.lst_growth_img {
		margin-top: 2rem;
		.growth_img_item {
			text-align: center;
		}
		@media (min-width: 769px) {
			display: grid;
			gap: 0 2rem;
			grid-template-columns: repeat(3, 1fr);
		}
	}
	.wrap_lst_growth_img {
		@media (max-width: 768px) {
			margin-inline: -1.5rem;
		}
	}
	.wrap_growth_content {
		display: grid;
		gap: 0 4rem;
		grid-template-columns: 1fr auto;
		margin: 3rem auto 0;
		max-width: 800px;
		.lead_growth {
			margin-top: 0;
			text-align: left;
		}
		@media (max-width: 768px) {
			display: revert;
			.lead_growth {
				margin-bottom: 2rem;
			}
		}
	}
	.wrap_cta {
		&:has(+.wrap_cta) {
			margin-top: 5rem;
		}
	}
	.btn_cta {
		max-width: 570px;
	}
}

/* footer */
footer {
	padding-block: 5rem 2rem;
	@media (max-width: 768px) {
		padding-block: 3rem 5rem;
	}
}
.footer_logo {
	text-align: center;
	@media (max-width: 768px) {
		margin-inline: auto;
		width: 75%;
	}
}
.footer_copyright {
	margin-top: 3rem;
	text-align: center;
	small {
		font-weight: bold;
	}
}