@charset "utf-8";
/* 標準調整 */
img {
	height: auto;
	max-width: 100%;
}
html {
 	line-height: 1.6;
	font-size: 100%;
	font-size: min(1rem, 4.103cqw);
	font-family: "M PLUS Rounded 1c", "Noto Sans JP","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*::before,
*::after {
	box-sizing: border-box;
}
em {
	font-style: normal;
}
label:has(input) {
	cursor: pointer;
}

/* 個別スタイル */
:root {
	--clr_pink: #d34390;
	--clr_pink_shadow: #b12475;
	--clr_brown: #663308;
	--clr_yellow: #ffef00;
	--clr_orange: #e95503;
	--clr_course_1: #e42047;
	--clr_course_2: #f3a01f;
	--clr_course_3: #e1cb00;
	--clr_course_4: #8cc23e;
	--clr_course_4_sub: #f7fff5;
	--clr_course_5: #00adea;
	--clr_course_6: #3d62ab;
	--clr_course_7: #a44a95;
	--clr_line_green: #06c655;
}
.inner {
	padding-inline: min(32px, 4.103cqw);
}
.box_video {
	>iframe {
		aspect-ratio: 16 / 9;
		height: auto;
		width: 100%;
	}
}
main {
	background-color: #fff;
	container-type: inline-size;
}
.aside_qr,
.aside_link {
	display: none;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
	body {
		background-attachment: fixed;
		background-image: url(../img/bg.webp);
		background-position: center -15%;
		background-repeat: no-repeat;
		background-size: 1360px auto;
		display: grid;
		grid-template-columns: 1fr min(50%, 780px);
		grid-template-rows: 1fr auto;
		height: 100dvh;
	}
	main {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		overflow-y: scroll;
	}
	.aside_qr {
		align-items: center;
		display: flex;
		flex-flow: column nowrap;
		font-size: 1rem;
		font-weight: 800;
		gap: 1rem 0;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		justify-content: center;
		padding-block: 1rem;
		position: sticky;
		bottom: 0;
		.qr_catch {
			color: var(--clr_line_green);
			display: inline-flex;
			gap: 0 .5rem;
			line-height: 1.2;
			&::before,
			&::after {
				background-color: var(--clr_line_green);
				border-radius: 100dvw;
				content: "";
				height: 100%;
				transform-origin: center bottom;
				transform: rotate(-30deg);
				width: 3px;
			}
			&::after {
				transform: rotate(30deg);
			}
		}
		.qr_ttl {
			align-items: center;
			background-color: var(--clr_line_green);
			border-radius: 100dvw;
			color: #fff;
			display: flex;
			justify-content: center;
			padding: .2em 1.5em .1em;
			img {
				height: 1.25em;
				margin-right: .5em;
			}
		}
	}
	.aside_link {
		align-items: center;
		display: flex;
		flex-flow: column nowrap;
		font-size: 1rem;
		font-weight: 800;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		overflow-y: auto;
		position: sticky;
		justify-content: flex-start;
		top: 0;
		.box_link_home {
			min-height: 76px;
			text-align: left;
			width: 100%;
			img {
				width: 240px;
			}
		}
		.box_link_taiken {
			width: min(520px, 90%);
			a {
				display: block;
				transition: transform .4s ease;
				&:hover {
					transform: translateY(-3px);
				}
			}
		}
		.dst_link_aside {
			margin-block: auto;
			overflow: auto;
			padding: 5px;
			width: min(370px, 90%);
		}
		.link_aside_item {
			text-align: center;
		}
		.link_aside_ttl {
			align-items: stretch;
			color: var(--clr_brown);
			display: inline-flex;
			font-size: 1rem;
			gap: 0 .5rem;
			justify-content: center;
			line-height: 1.3;
			margin-top: 2rem;
			&::before,
			&::after {
				background-color: var(--clr_brown);
				border-radius: 100dvw;
				content: "";
				transform-origin: center bottom;
				transform: rotate(-30deg);
				width: 3px;
			}
			&::after {
				transform: rotate(30deg);
			}
			span {
				text-align: center;
			}
		}
		.aside_btn_item {
			text-align: center;
			transition: transform .4s ease;
			&:hover {
				transform: translateY(-3px);
			}
			&:not(:first-child) {
				margin-top: 1rem;
			}
			.aside_btn {
				align-items: center;
				background-color: var(--clr_pink);
				border-radius: 100cqw;
				box-shadow: 4px 4px 0 var(--clr_pink_shadow);
				color: #fff;
				display: flex;
				font-size: 1.25rem;
				font-weight: 700;
				min-height: 3.6rem;
				justify-content: center;
				line-height: 1;
				margin-inline: auto;
				padding-inline: 1rem;
				position: relative;
				width: 100%;
				.btn_txt {
					align-items: center;
					display: flex;
					flex-direction: column;
					row-gap: .2em;
					span {
						font-size: .75rem;
						font-weight: 700;
					}
				}
				&::after {
					aspect-ratio: 1 / 1;
					background-color: var(--clr_yellow);
					content: "";
					inset: 0 1rem 0 0;
					margin: auto 0 auto auto;
					mask-image: url(../img/ico_arrow_circle.svg);
					mask-position: center;
					mask-repeat: no-repeat;
					mask-size: contain;
					position: absolute;
					width: 1.75rem;
				}
				&.type_online {
					background-color: #e85504;
					box-shadow: 4px 4px 0 #a5410b;
				}
				&.type_tel {
					background-color: #00b7ed;
					box-shadow: 4px 4px 0 #0a8db4;
					.ico_tel {
						aspect-ratio: 40 / 37;
						height: 80%;
						inset: 0 0 0 1rem;
						margin: auto auto auto 0;
						position: absolute;
						width: auto;
					}
					.btn_txt {
						align-items: center;
						display: flex;
						flex-direction: column;
						row-gap: .1em;
						span {
							font-size: 1.25rem;
							&.tel_time {
								font-size: .75rem;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (min-width: 1000px) {
	body {
		background-attachment: fixed;
		background-image: url(../img/bg.webp);
		background-position: center -15%;
		background-repeat: repeat;
		background-size: 1460px auto;
		display: grid;
		grid-template-columns: 4fr min(30%, 750px) 4fr;
	}
	main {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.aside_qr {
		align-items: center;
		display: flex;
		flex-flow: column nowrap;
		font-size: 1rem;
		font-weight: 800;
		gap: 1rem 0;
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		height: 100dvh;
		justify-content: center;
		position: sticky;
		top: 0;
		.qr_catch {
			color: var(--clr_line_green);
			display: inline-flex;
			gap: 0 .5rem;
			line-height: 1.2;
			&::before,
			&::after {
				background-color: var(--clr_line_green);
				border-radius: 100dvw;
				content: "";
				height: 100%;
				transform-origin: center bottom;
				transform: rotate(-30deg);
				width: 3px;
			}
			&::after {
				transform: rotate(30deg);
			}
		}
		.qr_ttl {
			align-items: center;
			background-color: var(--clr_line_green);
			border-radius: 100dvw;
			color: #fff;
			display: flex;
			justify-content: center;
			padding: .2em 1.5em .1em;
			img {
				height: 1.25em;
				margin-right: .5em;
			}
		}
	}
	.aside_link {
		align-items: center;
		display: flex;
		flex-flow: column nowrap;
		font-size: 1rem;
		font-weight: 800;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		height: 100dvh;
		overflow-y: auto;
		padding-bottom: min(11.25%, 76px);
		position: sticky;
		justify-content: flex-start;
		top: 0;
		.box_link_home {
			min-height: 76px;
			text-align: left;
			width: 100%;
			img {
				width: 240px;
			}
		}
		.box_link_taiken {
			width: min(520px, 90%);
			a {
				display: block;
				transition: transform .4s ease;
				&:hover {
					transform: translateY(-3px);
				}
			}
		}
		.dst_link_aside {
			margin-block: auto;
			padding: 5px;
			width: min(370px, 90%);
		}
		.link_aside_item {
			text-align: center;
			+ .link_aside_item {
				margin-top: 1.6rem;
			}
		}
		.link_aside_ttl {
			align-items: stretch;
			color: var(--clr_brown);
			display: inline-flex;
			font-size: 0.875rem;
			gap: 0 .5rem;
			justify-content: center;
			line-height: 1.2;
			&::before,
			&::after {
				background-color: var(--clr_brown);
				border-radius: 100dvw;
				content: "";
				transform-origin: center bottom;
				transform: rotate(-30deg);
				width: 3px;
			}
			&::after {
				transform: rotate(30deg);
			}
			span {
				text-align: center;
			}
		}
		.aside_btn_item {
			text-align: center;
			transition: transform .4s ease;
			&:hover {
				transform: translateY(-3px);
			}
			&:not(:first-child) {
				margin-top: 1rem;
			}
			.aside_btn {
				align-items: center;
				background-color: var(--clr_pink);
				border-radius: 100cqw;
				box-shadow: 4px 4px 0 var(--clr_pink_shadow);
				color: #fff;
				display: flex;
				font-size: 1.125rem;
				font-weight: 700;
				min-height: 3.2rem;
				justify-content: center;
				line-height: 1;
				margin-inline: auto;
				padding-inline: 1rem;
				position: relative;
				width: 100%;
				.btn_txt {
					align-items: center;
					display: flex;
					flex-direction: column;
					row-gap: .2em;
					span {
						font-size: .75rem;
						font-weight: 700;
					}
				}
				&::after {
					aspect-ratio: 1 / 1;
					background-color: var(--clr_yellow);
					content: "";
					inset: 0 1rem 0 0;
					margin: auto 0 auto auto;
					mask-image: url(../img/ico_arrow_circle.svg);
					mask-position: center;
					mask-repeat: no-repeat;
					mask-size: contain;
					position: absolute;
					width: 1.75rem;
				}
				&.type_online {
					background-color: #e85504;
					box-shadow: 4px 4px 0 #a5410b;
				}
				&.type_tel {
					background-color: #00b7ed;
					box-shadow: 4px 4px 0 #0a8db4;
					.ico_tel {
						aspect-ratio: 40 / 37;
						height: 80%;
						inset: 0 0 0 1rem;
						margin: auto auto auto 0;
						position: absolute;
						width: auto;
					}
					.btn_txt {
						align-items: center;
						display: flex;
						flex-direction: column;
						row-gap: .1em;
						span {
							font-size: 1.25rem;
							&.tel_time {
								font-size: .75rem;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
}

/* ========== header ========== */
.header_logo {
	text-align: center;
	img {
		width: 40cqw;
	}
}

/* ========== CTA ========== */
.sec_cta {
	background-color: var(--clr_yellow);
	background-image: url(../img/bg_cta.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-block: min(40px, 5.128cqw);
	position: relative;
	&::before,
	&::after {
		aspect-ratio: 39 / 4;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
		content: "";
		display: block;
		position: absolute;
		width: 100%;
	}
	&::before {
		background-image: url(../img/cta_top.webp);
		top: 0;
		transform: translateY(-95%);
	}
	&::after {
		background-image: url(../img/cta_bottom.webp);
		bottom: 0;
		transform: translateY(95%);
	}
	.heading_cta {
		margin-bottom: min(40px, 5.128cqw);
		text-align: center;
		img {
			width: min(600px, 76.923cqw);
		}
	}
	&:first-of-type {
		&::before {
			content: none;
		}
	}
	&:last-of-type {
		&::after {
			content: none;
		}
	}
}
.box_btn_cta {
	margin-top: min(32px, 4.103cqw);
	text-align: center;
	.cta_catch {
		align-items: center;
		color: var(--clr_pink);
		display: inline-flex;
		font-size: 4.3cqw;
		&::before {
			content: "＼";
			font-size: min(1.25rem, 5.128cqw);
		}
		&::after {
			content: "／";
			font-size: min(1.25rem, 5.128cqw);
		}
	}
	.btn_cta {
		align-items: center;
		background-color: var(--clr_pink);
		border-radius: 100cqw;
		box-shadow: min(6px, 0.769cqw) min(6px, 0.769cqw) 0 var(--clr_pink_shadow);
		color: #fff;
		display: flex;
		font-size: 5.2cqw;
		font-weight: 800;
		height: min(106px, 13.59cqw);
		justify-content: center;
		line-height: 1;
		margin-inline: auto;
		padding-inline: min(88px, 11.282cqw);
		position: relative;
		transition: transform .4s ease;
		width: min(640px, 82.051cqw);
		&:hover {
			transform: translateY(-3px);
		}
		&::after {
			aspect-ratio: 1 / 1;
			background-image: url(../img/ico_cta_btn.webp);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			content: "";
			inset: 0 min(40px, 5.128cqw) 0 0;
			margin: auto 0 auto auto;
			position: absolute;
			width: min(48px, 6.154cqw);
		}
		&.type_tel {
			.ico_tel {
				aspect-ratio: 40 / 37;
				inset: 0 0 0 min(40px, 5.128cqw);
				margin: auto auto auto 0;
				position: absolute;
				width: min(80px, 10.256cqw);
			}
			.btn_txt {
				align-items: center;
				display: flex;
				flex-direction: column;
				row-gap: .1em;
				.tel_time {
					font-size: 2.8cqw;
					font-weight: 400;
				}
			}
		}
	}
}
.box_cta_link {
	margin-top: min(32px, 4.103cqw);
	text-align: center;
	.cta_link {
		border-bottom: 1px solid var(--clr_pink);
		color: var(--clr_pink);
		display: inline-block;
		font-weight: 800;
		padding-bottom: .1em;
		&:hover {
			border-bottom-color: transparent;
		}
		&::after {
			aspect-ratio: 33 / 47;
			background-image: url(../img/ico_cta_link.webp);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			content: "";
			display: inline-block;
			width: 1ex;
		}
	}
}

/* ========== Winbeのサマーコースとは ========== */
.sec_summary {
	background-color: #00b7ed;
	padding-block: min(120px, 15.385cqw);
}
.heading_summary {
	text-align: center;
	img {
			width: min(600px, 76.923cqw);
	}
}
.txt_summary {
	color: #fff;
	font-size: min(1.13rem, 4.615cqw);
	margin-top: min(48px, 6.154cqw);
	text-align: center;
	em {
		color: var(--clr_yellow);
	}
}
.sec_setting {
	margin-top: min(80px, 10.256cqw);
	&::before {
		aspect-ratio: 646 / 31;
		background-image: url(../img/ico_separator.webp);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		content: "";
		display: block;
		margin-inline: auto;
		width: min(316px, 40.513cqw);
	}
}
.heading_setting {
	align-items: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: min(1.75rem, 7.179cqw);
	font-weight: 800;
	margin-top: min(80px, 10.256cqw);
	text-align: center;
	&::before {
		aspect-ratio: 219 / 103;
		background-image: url(../img/ico_heading_setting.webp);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		content: "";
		display: block;
		width: min(110px, 14.103cqw);
	}
}
.box_setting {
	background-color: #fff;
	border: clamp(2px, 0.769cqw, 4px) solid var(--clr_pink);
	border-radius: min(20px, 2.564cqw);
	margin-top: min(16px, 2.051cqw);
	padding: min(48px, 6.154cqw) min(32px, 4.103cqw);
}
.conditions_ttl {
	position: relative;
	.badge_this_summer {
		inset: 0 auto auto calc(min(24px, 3.077cqw) * -1);
		position: absolute;
		transform: translateY(-80%);
		width: min(124px, 15.897cqw);
	}
}
.conditions_lbl {
	align-items: center;
	border-radius: min(40px, 5.128cqw);
	display: grid;
	gap: 0 2cqw;
	grid-template-columns: 12cqw 1fr 4cqw;
	font-size: 4.8cqw;
	line-height: 1.2;
	justify-content: space-between;
	padding: min(20px, 2.564cqw) min(32px, 4.103cqw);
	input[type=checkbox] {
		height: 0;
		position: absolute;
		width: 0;
	}
	.conditions_step {
		align-items: center;
		aspect-ratio: 1 / 1;
		background-color: #fff;
		border-radius: 100cqw;
		display: flex;
		flex-flow: column nowrap;
		font-size: 3.2cqw;
		font-weight: 800;
		justify-content: center;
		line-height: 1;
		width: 12cqw;
		em {
			font-size: 5.2cqw;
		}
	}
	.conditions_txt {
		flex-grow: 1;
		margin-right: 4cqw;
		text-align: center;
	}
	&::after {
		aspect-ratio: 1 / 1;
		background-color: currentColor;
		content: "";
		mask-image: url(../img/ico_arrow.svg);
		-webkit-mask-image: url(../img/ico_arrow.svg);
		mask-position: center;
		-webkit-mask-position: center;
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		mask-size: contain;
		-webkit-mask-size: contain;
		transform: rotate(90deg);
		width: 4cqw;
	}
	&:has([name=tgl_age]) {
		background-color: var(--clr_orange);
		color: #fff;
		.conditions_step {
			color: var(--clr_orange);
		}
	}
	&:has([name=tgl_level]) {
		background-color: var(--clr_yellow);
		color: var(--clr_pink);
		.conditions_step {
			color: var(--clr_pink);
		}
	}
	&:has([name^=tgl_]:checked) {
		&::after{
			transform: rotate(270deg);
		}
	}
}
.conditions_cnt {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s ease;
	.conditions_cnt_inner {
		overflow: hidden;
	}
}
.conditions_item {
	&:has([name^=tgl_]:checked) {
		.conditions_cnt {
			grid-template-rows: 1fr;
		}
	}
	&:nth-child(2) {
		padding-top: 9cqw;
		position: relative;
		&::before,
		&::after {
			aspect-ratio: 1 / 4;
			background-color: var(--clr_pink);
			border-radius: 100cqw;
			content: "";
			display: block;
			height: 8cqw;
			inset-inline: 0;
			margin-inline: auto;
			position: absolute;
			transform: rotate(45deg);
			top: .5cqw;
		}
		&::after {
			transform: rotate(-45deg);
		}
	}
}
.dst_age {
	display: grid;
	gap: min(16px, 2.051cqw);
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto auto;
	padding: min(32px, 4.103cqw) min(32px, 4.103cqw) 0;
	.age_item {
		display: grid;
		font-size: 4cqw;
		grid-template-columns: subgrid;
		grid-column: 1 / 3;
		.age_ttl {
			color: var(--clr_brown);
			grid-column: 1 / 2;
			padding-block: .3em;
		}
		.age_cnt {
			align-items: center;
			display: flex;
			flex-flow: row wrap;
			gap: min(8px, 1.026cqw);
			grid-column: 2 / 3;
			.age_lbl {
				border: clamp(2px, 0.513cqw, 4px) solid #ccc;
				border-radius: 100cqw;
				line-height: 1.2;
				padding: .2em .4em;
				transition-property: background-color, border-color;
				transition-duration: .3s;
				transition-timing-function: ease-in-out;
				input {
					font-size: 0;
					height: 0;
					position: absolute;
					width: 0;
				}
				.lbl_txt {
					span {
						display: none;
					}
				}
				&:hover {
					background-color: #ffd0b6;
				}
				&:has(:checked) {
					background-color: var(--clr_orange);
					border-color: var(--clr_orange);
					color: #fff;
				}
			}
		}
	}
}
.lst_level {
	display: grid;
	gap: .5em 0;
	grid-template-columns: 1fr;
	padding: min(32px, 4.103cqw);
	.level_item {
		.level_lbl {
			border: clamp(2px, 0.513cqw, 4px) solid #ccc;
			border-radius: min(16px, 2.051cqw);
			display: block;
			font-size: 4cqw;
			line-height: 1.2;
			padding: .3em .4em;
			transition-property: background-color, border-color, color;
			transition-duration: .3s;
			transition-timing-function: ease-in-out;
			input {
				font-size: 0;
				height: 0;
				position: absolute;
				width: 0;
			}
			&:has(:disabled) {
				background-color: #f6f6f6;
				color: #999;
			}
			&:not(:has(:disabled)) {
				&:hover {
					background-color: #ffd0b6;
				}
				&:has(:checked) {
					background-color: var(--clr_orange);
					border-color: var(--clr_orange);
					color: #fff;
				}
			}
		}
	}
}
.setting_result {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s ease;
	&.open {
		grid-template-rows: 1fr;
	}
}
.dst_result {
	color: var(--clr_brown);
	overflow: hidden;
	text-align: center;
}
.lst_result_btn {
	background-color: #ffdbef;
	border-radius: min(20px, 2.564cqw);
	display: flex;
	flex-flow: column nowrap;
	font-size: 4.8cqw;
	margin-block: min(12px, 1.538cqw);
	padding: min(32px, 4.103cqw);
	row-gap: min(16px, 2.051cqw);
	.course_item {
		display: none;
		&.match {
			display: unset;
		}
		&.course_1 { --clr_course: var(--clr_course_1); }
		&.course_2 { --clr_course: var(--clr_course_2); }
		&.course_3 { --clr_course: var(--clr_course_3); }
		&.course_4 { --clr_course: var(--clr_course_4); }
		&.course_5 { --clr_course: var(--clr_course_5); }
		&.course_6 { --clr_course: var(--clr_course_6); }
		&.course_7 { --clr_course: var(--clr_course_7); }
		.course_btn {
			background-color: var(--clr_course);
			border-radius: min(20px, 2.564cqw);
			color: #fff;
			display: block;
			font-size: 5cqw;
			font-weight: 800;
			letter-spacing: -.1ex;
			line-height: 1.2;
			padding: min(24px, 3.077cqw) min(72px, 9.231cqw) min(24px, 3.077cqw) min(32px, 4.103cqw);
			position: relative;
			text-align: center;
			&::after {
				aspect-ratio: 1 / 1;
				background-image: url(../img/ico_arrow_circle.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				content: "";
				inset-block: 0;
				margin-block: auto;
				position: absolute;
				right: min(24px, 3.077cqw);
				width: min(48px, 6.154cqw);
			}
		}
	}
}

/* ========== 7つのコース ========== */

.sec_course_all {
	background-image: url(../img/bg_course_all.webp);
	background-position: center top;
	background-repeat: repeat;
	background-size: min(84.7px, 10.859cqw);
	padding-block: min(120px, 15.385cqw);
}
.heading_course_all {
	text-align: center;
	img {
		width: min(532px, 68.205cqw);
	}
}
.sec_course_group {
	margin-top: min(80px, 10.256cqw);
}
.heading_course_group {
	text-align: center;
	.heading_course_group_txt {
		background-color: var(--clr_yellow);
		border-radius: min(16px, 2.051cqw);
		color: var(--clr_pink);
		display: inline-block;
		font-size: 4.6cqw;
		font-weight: 800;
		line-height: 1.2;
		padding: .2em 1.5em;
	}
}
.sec_course {
	&#course_1 { --clr_course: var(--clr_course_1); }
	&#course_2 { --clr_course: var(--clr_course_2); }
	&#course_3 { --clr_course: var(--clr_course_3); }
	&#course_4 { --clr_course: var(--clr_course_4); }
	&#course_5 { --clr_course: var(--clr_course_5); }
	&#course_6 { --clr_course: var(--clr_course_6); }
	&#course_7 { --clr_course: var(--clr_course_7); }
	background-color: #fff;
	border: 2px solid var(--clr_course);
	border-radius: min(40px, 5.128cqw);
	margin-top: min(60px, 7.692cqw);
	padding-top: min(32px, 4.103cqw);
	position: relative;
}
.badge_recommend {
  animation: 1s linear 0s infinite badge_swing;
	display: none;
	inset: calc(min(32px, 4.103cqw) * -1) auto auto calc(min(32px, 4.103cqw) * -1); 
	position: absolute;
	width: min(148px, 18.974cqw);
}
@keyframes badge_swing {
	0% {
		transform: rotate(0) scale(1);
	}
	25% {
		transform: rotate(-3deg) scale(1.01);
	}
	50% {
		transform: rotate(0) scale(1);
	}
	75% {
		transform: rotate(1deg) scale(1.01);
	}
	100% {
		transform: rotate(0) scale(1);
	}
}
.recommended .badge_recommend {
	display: block;
}
.course_catch,
.course_info > dd {
	color: var(--clr_brown);
}
.course_thumb {
	border-radius: min(40px, 5.128cqw);
	display: block;
	margin-inline: min(32px, 4.103cqw);
	overflow: hidden;
}
.heading_course {
	line-height: 1.2;
	margin-top: min(32px, 4.103cqw);
	text-align: center;
	.course_catch {
		font-size: 3.8cqw;
	}
	.course_ttl {
		color: var(--clr_course);
		font-size: 8cqw;
		font-weight: 800;
		letter-spacing: -.05ex;
		margin-top: min(8px, 1.026cqw);
		sup {
			display: inline-block;
			padding: .2ex .2ex 0;
		}
	}
	.course_ttl_sub {
		color: var(--clr_course);
		font-size: 4.2cqw;
		font-weight: 800;
	}
}
.course_info {
	align-items: center;
	column-gap: .8em;
	display: flex;
	font-size: 3.6cqw;
	justify-content: center;
	line-height: 1;
	margin-top: min(16px, 2.051cqw);
	.course_info_item {
		align-items: center;
		column-gap: .4em;
		display: flex;
		justify-content: center;
		.course_info_ttl {
			background-color: var(--clr_course);
			border-radius: 100cqw;
			font-size: 3.2cqw;
			font-weight: 700;
			padding: .3em 1em;
			span {
				color: #fff;
			}
		}
		.course_info_cnt {
			color: var(--clr_brown);
		}
	}
}
.course_detail {
	margin-top: min(32px, 4.103cqw);
	.course_detail_ttl {
		border-top: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
		color: var(--clr_brown);
		font-size: 3.8cqw;
		line-height: 1.2;
		margin-inline: min(32px, 4.103cqw);
		padding-block: min(32px, 4.103cqw);
		text-align: center;
		.course_detail_ttl_lbl {
			display: block;
			padding-inline: 6cqw;
			position: relative;
			&::after {
				aspect-ratio: 1 / 1;
				background-color: var(--clr_course);
				border-radius: 100cqw;
				content: "";
				display: block;
				inset-block: 0;
				margin-block: auto;
				position: absolute;
				right: -1.2cqw;
				width: 7.2cqw;
			}
			.course_detail_ttl_txt {
				letter-spacing: -.ex;
				&::before,
				&::after {
					aspect-ratio: 4 / 1;
					background-color: #fff;
					border-radius: 100cqw;
					content: "";
					display: block;
					inset-block: 0;
					margin-block: auto;
					position: absolute;
					right: .6cqw;
					transition: transform .3s ease;
					width: 3.6cqw;
					z-index: 1;
				}
			}
		}
	}
	.course_detail_cnt {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		transition: grid-template-rows .4s ease;
		.course_detail_cnt_inner {
			overflow-y: hidden;
		}
		.course_detail_txt {
			color: var(--clr_brown);
			font-size: 3.8cqw;
			margin-inline: min(48px, 6.154cqw);
			padding-top: min(60px, 7.692cqw);
			em {
				color: var(--clr_course);
			}
		}
		.course_cta {
			background-color: var(--clr_yellow);
			margin-top: min(40px, 5.128cqw);
			padding-block: min(32px, 4.103cqw);
		}
	}
	&:not(:has(:checked)) {
		.course_detail_ttl_txt {
			&::after {
				transform: rotate(270deg);
			}
		}
		.course_detail_cnt {
			grid-template-rows: 0fr;
		}
	}
}
.course_introduction {
	margin: min(80px, 10.256cqw) min(32px, 4.103cqw) 0;
	&::before {
		aspect-ratio: 150 / 7;
		background-color: var(--clr_course);
		content: "";
		display: block;
		margin: 0 auto min(80px, 10.256cqw);
		mask-image: url(../img/ico_separator.svg);
		-webkit-mask-image: url(../img/ico_separator.svg);
		mask-size: contain;
		-webkit-mask-size: contain;
		width: min(316px, 40.513cqw);
	}
	.course_introduction_ttl {
		color: var(--clr_brown);
		font-size: 5.2cqw;
		line-height: 1.2;
		text-align: center;
		em {
			color: var(--clr_course);
		}
	}
	.course_introduction_cnt {
		margin-top: min(32px, 4.103cqw);
		.img {
			display: block;
			margin-bottom: min(32px, 4.103cqw);
			text-align: center;
		}
		.lst_point {
			display: grid;
			grid-template-columns: auto 1fr;
			text-align: left;
			>.point_item {
				color: var(--clr_brown);
				display: grid; 
				font-size: 3.6cqw;
				grid-column: 1 / 3;
				grid-template-columns: subgrid;
				line-height: 1.4;
				&::before {
					color: var(--clr_course);
					content: "\e834";
					display: inline-block;
					font-family: 'Material Symbols Outlined';
					font-size: 1.2em;
					margin-top: -.1em;
					vertical-align: baseline;
				}
				&:not(:first-child) {
					margin-top: min(16px, 2.051cqw);
				}
			}
		}
	}
}
.course_detail_close {
	align-items: center;
	color: var(--clr_pink);
	display: flex;
	justify-content: stretch;
	.close_course {
		padding-block: min(16px, 2.051cqw);
		text-align: center;
		width: 100%;
	}
}
.box_btn_back_setting {
	bottom: min(16px, 2.051cqw);
	position: sticky;
	.btn_back_setting {
		align-items: center;
		aspect-ratio: 1 / 1;
		background-color: rgba(255,255,255,.8);
		box-shadow: 0 min(4px, 0.513cqw) min(16px, 2.051cqw) rgba(0,0,0,.3);
		border-radius: 100cqw;
		color: var(--clr_pink);
		display: flex;
		justify-content: center;
		transform: translateX(calc(min(16px, 2.051cqw) * -1));
		width: 8cqw;
	}
}

/* ===== コース紹介 ===== */
.lst_note {
	display: grid;
	font-size: 3.2cqw;
	font-weight: normal;
	gap: 0;
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto;
	margin: 1em 0 0 1em;
	>.note_item {
		display: grid;
		grid-column: 1 / 3;
		grid-template-columns: subgrid;
	}
}
.intro_course_2 {
	display: grid;
	gap: min(16px, 2.051cqw) 0;
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto;
	>.item {
		border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course_2);
		border-radius: min(24px, 3.077cqw);
		display: grid;
		grid-column: 1 / 3;
		grid-template-columns: subgrid;
		grid-template-rows: auto;
		overflow: hidden;
		>.ttl {
			align-items: center;
			background-color: var(--clr_course_2);
			color: #fff;
			display: flex;
			font-size: 4.2cqw;
			grid-column: 1 / 2;
			justify-content: center;
			padding-inline: min(16px, 2.051cqw);
		}
		>.cnt {
			color: var(--clr_brown);
			font-size: 3.6cqw;
			font-weight: 500;
			line-height: 1.2;
			grid-column: 2 / 3;
			padding: min(16px, 2.051cqw) min(32px, 4.103cqw);
			em {
				color: var(--clr_course_2);
				display: inline-block;
				font-size: 3.6cqw;
				font-weight: 600;
				margin-bottom: min(8px, 1.026cqw);
				strong {
					font-size: 4.2cqw;
					font-weight: 600;
				}
			}
		}
	}
}
.intro_course_3 {
	--clr_course: var(--clr_course_3);
	>.item {
		margin-top: min(32px, 4.103cqw);
		>.ttl {
			>.num {
				background-color: var(--clr_course);
				border-radius: min(16px, 2.051cqw);
				color: #fff;
				display: block;
				font-size: 3.6cqw;
				margin-bottom: min(8px, 1.026cqw);
				text-align: center;
			}
			>.txt {
				color: var(--clr_course);
				display: block;
				font-size: 4cqw;
				font-weight: 500;
				text-align: center;
			}

		}
		>.cnt {
			color: var(--clr_brown);
			font-size: 3.6cqw;
			font-weight: 500;
			padding: min(32px, 4.103cqw);
			img[src*=img_intro_course3_1] {
				width: min(364px, 46.667cqw);
			}
			img[src*=img_intro_course3_2] {
				width: min(290px, 37.179cqw);
			}
			img[src*=img_intro_course3_3] {
				width: min(212px, 27.179cqw);
			}
		}
		&.type2 {
			>.ttl {
				>.txt {
					border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
					border-radius: min(16px, 2.051cqw);
					font-size: 4.4cqw;
				}
			}
		}
		&.type3 {
			>.ttl {
				>.txt {
					font-size: 5.2cqw;
				}
			}
			>.cnt {
				padding-inline: 0;
				text-align: center;
			}
		}
	}
}
.intro_course_4 {
	--clr_course: var(--clr_course_4);
	--clr_course_sub: var(--clr_course_4_sub);
	margin-top: min(80px, 10.256cqw);
	>.item {
		background-color: var(--clr_course_sub);
		border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
		border-radius: min(24px, 3.077cqw);
		margin-top: min(32px, 4.103cqw);
		overflow: hidden;
		>.ttl,
		>.cnt > .answer {
			column-gap: 2cqw;
			display: grid;
			font-size: 4cqw;
			grid-template-columns: auto 1fr;
			>.marker {
				align-items: center;
				aspect-ratio: 1 / 1;
				border-radius: 100cqw;
				display: flex;
				font-size: 6cqw;
				justify-content: center;
				line-height: 1;
				width: 9cqw;
			}
		}
		>.ttl {
			align-items: center;
			background-color: var(--clr_course);
			color: #fff;
			padding: min(16px, 2.051cqw);
			>.marker {
				background-color: #fff;
				color: var(--clr_course);
			}
		}
		>.cnt {
			padding: min(16px, 2.051cqw);
			>.answer {
				color: var(--clr_course);
				>.marker{
					background-color: var(--clr_course);
					color: #fff;
				}
				>.txt {
					padding-top: min(8px, 1.026cqw);
				}
			}
			.box_point {
				border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
				border-radius: min(24px, 3.077cqw);
				margin: min(16px, 2.051cqw);
				overflow: hidden;
				>.point_ttl {
					background-color: var(--clr_course);
					color: #fff;
					font-size: 4cqw;
					text-align: center;
				}
				>.point_cnt {
					background-color: #fff;
					padding: min(16px, 2.051cqw);
				}
			}
		}
	}
}
.intro_course_7 {
	--clr_course: var(--clr_course_7);
	>.item {
		margin-top: min(32px, 4.103cqw);
		>.ttl {
			>.num {
				background-color: var(--clr_course);
				border-radius: min(16px, 2.051cqw);
				color: #fff;
				display: block;
				font-size: 3.6cqw;
				margin-bottom: min(8px, 1.026cqw);
				text-align: center;
			}
			>.txt {
				color: var(--clr_course);
				display: block;
				font-size: 4cqw;
				font-weight: 500;
				text-align: center;
			}

		}
		>.cnt {
			color: var(--clr_brown);
			font-size: 3.6cqw;
			font-weight: 500;
			padding: min(16px, 2.051cqw) min(16px, 2.051cqw) min(32px, 4.103cqw);
			.box_point {
				border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
				border-radius: min(24px, 3.077cqw);
				margin: min(16px, 2.051cqw);
				overflow: hidden;
				>.point_ttl {
					background-color: var(--clr_course);
					color: #fff;
					font-size: 4cqw;
					text-align: center;
				}
				>.point_cnt {
					background-color: #fff;
					padding: min(16px, 2.051cqw);
				}
			}
			.dst_course_7_curriculum {
				display: grid;
				gap: min(16px, 2.051cqw) 0;
				grid-template-columns: auto 1fr;
				grid-auto-rows: auto;
				>.item {
					background-color: var(--clr_course);
					border: clamp(2px, 0.769cqw, 4px) solid var(--clr_course);
					border-radius: min(24px, 3.077cqw);
					display: grid;
					grid-column: 1 / 3;
					grid-template-columns: subgrid;
					grid-template-rows: auto;
					overflow: hidden;
					>.ttl {
						align-items: center;
						background-color: var(--clr_course);
						color: #fff;
						display: flex;
						font-size: 4.2cqw;
						grid-column: 1 / 2;
						justify-content: center;
						padding-inline: min(16px, 2.051cqw);
						em {
							display: inline-block;
							font-size: 4.6cqw;
							text-align: center;
							width: 1.2em;
						}
					}
					>.cnt {
						background-color: #fff;
						color: var(--clr_brown);
						font-size: 3.6cqw;
						font-weight: 500;
						line-height: 1.2;
						grid-column: 2 / 3;
						padding: min(16px, 2.051cqw) min(32px, 4.103cqw);
						em {
							color: var(--clr_course);
							display: inline-block;
							font-size: 4cqw;
							font-weight: 600;
							margin-bottom: min(8px, 1.026cqw);
							strong {
								font-size: 4.2cqw;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
		&.type_2 {
			>.ttl {
				>.txt {
					font-weight: 600;
				}
			}
			>.cnt {
				font-weight: 600;
				padding-inline: 0;
				text-align: center;
			}
		}
	}
	.dst_interview {
		margin-top: min(40px, 5.128cqw);
		>.ttl {
			text-align: center;
			>span {
				background-color: var(--clr_course);
				border-radius: min(16px, 2.051cqw);
				color: #fff;
				display: inline-block;
				font-size: 3.2cqw;
				padding: .3em 3em .2em;
			}
		}
		>.cnt {
			margin-top: min(24px, 3.077cqw);
		}
	}
}

/* ========== レギュラーコース ========== */
.sec_regular {
	padding-block: min(120px, 15.385cqw);
}
.heading_catch_regular {
	color: var(--clr_pink);
	font-weight: 800;
	text-align: center;
}
.heading_regular {
	color: var(--clr_pink);
	font-size: min(1.75rem, 7.179cqw);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}
.sec_feature,
.sec_regular_course {
	margin-top: min(80px, 10.256cqw);
}
.heading_feature,
.heading_regular_course {
	color: var(--clr_brown);
	font-size: min(1.38rem, 5.641cqw);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}
.heading_feature_txt,
.heading_regular_course_txt {
	background-image: linear-gradient(to top, transparent 0%, transparent 10%, var(--clr_yellow) 10%, var(--clr_yellow) 35%, transparent 35%);
}
.regular_features {
	margin-top: min(32px, 4.103cqw);
}
.regular_features.swiper {
	padding-bottom: 10cqw;
	.swiper-slide {
		padding-inline: min(88px, 11.282cqw);
	}
	.swiper-button-prev,
	.swiper-button-next {
		aspect-ratio: 1 / 1;
		border: 2px solid var(--clr_pink);
		border-radius: 100cqw;
		background-color: rgba(255,255,255,.7);
		height: auto;
		left: 0;
		line-height: 1;
		width: min(60px, 7.692cqw);
		&::before {
			aspect-ratio: 1 / 1;
			border-color: var(--clr_pink);
			border-style: solid;
			border-width: 2px 2px 0 0;
			content: "";
			position: absolute;
			transform: rotate(-135deg) translate(-15%);
			width: 35%;
		}
		svg {
			display: none;
		}
	}
	.swiper-button-next {
		left: auto;
		right: 0;
		&::before {
			transform: rotate(45deg) translate(-15%, 15%);
		}
	}
	.swiper-pagination-bullet-active {
		background-color: var(--clr_pink);
	}
}
.regular_feature_item {
	border: clamp(2px, 0.769cqw, 4px) solid var(--clr_pink);
	border-radius: min(24px, 3.077cqw);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	.feature_ttl {
		align-items: center;
		aspect-ratio: 1 / 1;
		background-color: var(--clr_pink);
		border-radius: 100cqw;
		color: #fff;
		display: flex;
		flex-flow: column nowrap;
		font-size: 2.8cqw;
		font-weight: 700;
		justify-content: center;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		line-height: 1;
		margin: min(16px, 2.051cqw);
		width: 14cqw;
		em {
			font-size: 6cqw;
		}
	}
	.feature_txt {
		align-self: center;
		color: var(--clr_brown);
		font-size: 3.6cqw;
		font-weight: 800;
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		line-height: 1.2;
	}
	.feature_thumb {
		border-radius: min(16px, 2.051cqw)  min(16px, 2.051cqw) 0 0;
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		overflow: hidden;

	}
}
.feature_link {
	color: var(--clr_pink);
	font-size: min(1rem, 4.103cqw);
	font-weight: 800;;
	text-align: center;
	a {
		border-bottom: 1px solid currentColor;
		display: inline-block;
		padding-bottom: .1em;
		&:hover {
			border-bottom-color: transparent;
		}
	}
}
.lst_regular_course {
	.item {
		font-weight: 700;
		margin-top: min(36px, 4.615cqw);
		text-align: center;
		.catch {
			color: var(--clr_pink);
			font-size: 4cqw;
		}
		.btn {
			border-radius: min(40px, 5.128cqw);
			display: block;
			margin-top: min(16px, 2.051cqw);
			overflow: hidden;
			position: relative;
			&::before {
				aspect-ratio: 1 / 1;
				background-image: url(../img/ico_arrow_circle.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				content: "";
				inset-block: 0;
				margin-block: auto;
				position: absolute;
				right: 46.5%;
				width: min(44px, 5.641cqw);
			}
			&.course_1 {
				background-color: #fb9b29;
			}
			&.course_2 {
				background-color: #25c782;
			}
			&.course_3 {
				background-color: #21adc5;
			}
			.dst_regular_course {
				display: grid;
				gap: min(12px, 1.538cqw) min(48px, 6.154cqw);
				grid-template-columns: 1fr 45%;
				grid-template-rows: 3fr 2fr;
				.ttl {
					align-items: center;
					color: #fff;
					display: flex;
					flex-direction: column;
					grid-column: 1 / 2;
					grid-row: 1 / 2;
					justify-content: flex-end;
					line-height: 1;
					padding-left: min(20px, 2.564cqw);
					padding-top: min(12px, 1.538cqw);
					em {
						font-size: min(1.13rem, 4.615cqw);
					}
				}
				.target {
					grid-column: 1 / 2;
					grid-row: 2 / 3;
					padding-left: min(20px, 2.564cqw);
					padding-bottom: min(12px, 1.538cqw);
					span {
						background-color: #fff;
						border-radius: min(16px, 2.051cqw);
						color: var(--clr_brown);
						display: block;
						font-size: min(0.75rem, 3.077cqw);
						line-height: 1;
						margin-inline: auto;
						padding-block: .5em .3em;
						width: 80%;
					}
				}
				.img {
					grid-column: 2 / 3;
					grid-row: 1 / 3;
					img {
						transform-origin: left center;
						transform: scale(1.01);
					}
				}
			}
		}
		.summary {
			color: var(--clr_brown);
			font-size: min(0.94rem, 3.846cqw);
			letter-spacing: -.1em;
			line-height: 1.4;
			margin-top: min(16px, 2.051cqw);
		}
	}
}

/* ========== footer ========== */
footer {
	background-color: #460d78;
	color: #fff;
	padding: min(32px, 4.103cqw);
	.lst_note {
		font-size: max(0.75rem, 2.4cqw);
	}
	.fotter_copyright {
		font-size: 4.2cqw;
		font-weight: 400;
		margin-top: min(32px, 4.103cqw);
		text-align: center;
	}
}