@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&family=Hina+Mincho&display=swap');

:root {
	--color-accent: #FF8800;
	--color-accent-shadow: #BF6600;
	--color-beige: #F2EFEE;
	--color-beige-dark: #816E68;
	--color-link: #00b4cc;
	--color-hover: #00b4cc;
	--color-selection: rgba(28, 199, 221, 0.8);
	--color-base-text: #222;
	--color-black: #222;
	--color-white: #fff;
	--color-white-transparent: rgba(255,255,255,0.4);
	--color-gray-f0: #f0f0f0;
	--color-gray-c: #ccc;
	--color-gray-9: #999;
	--color-gray-6: #666;
	--color-red: #F01F51;
	--color-pink: #ff5a91;
	--color-yellow: #FFFB00;
	--color-blue: #75B4C1;
	--color-green: #E3E39E;
	--color-orange: #FF8800;
	--color-purple: #622C88;
	--color-attention: #F57575;
	--color-attention-yellow: #FFFB00;
	--color-attention-red: #F01F51;
	--color-marker: #FFFB00;
	--color-section-title-en: #A1928E;
	--color-sticky-campaign-button: rgba(149, 111, 176, 0.9);
	--color-sticky-cta-button: rgba(255, 136, 0, 0.9);
	--color-course-dormant: #50b593;
	--color-course-dormant-dark: #2c9975;
	--color-course-dormant-light: #86dbbe;
	--color-course-rental: #A1928E;
	--color-course-rental-dark: #816E68;
	--color-course-rental-light: #CDC5C3;
	--color-tab-off: #d3d0cf;
	--color-header-bg: rgba(255,255,255,0.8);
	--color-price-highlight: #ff5a91;
	--color-step-base: #816E68;
	--color-step-arrow: #A1928E;
	--web-font-mincho-family: "Hina Mincho", serif;
	--web-font-mincho-weight: 400;
	--web-font-mincho-style: normal;
	--base-font-family: "Jost", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

* {
	-webkit-text-size-adjust:100%;
}
*, *:before, *:after {
	box-sizing: border-box;
}
.show-sp {
	display: inline-block;
	@media (min-width: 768px) {
		display: none;
	}
}
.show-pc {
	display: none;
	@media (min-width: 768px) {
		display: inline-block;
	}
}

html, body {
	margin: 0;
	padding: 0;
	border: 0;
}
html {
	width: 100%;
	font-size: 62.5%;
	position: relative;
}
body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	font-family: var(--base-font-family);
	text-align: left;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	letter-spacing: .05em;
	line-height: 2;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--color-base-text);
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	color: var(--color-white);
	background: var(--color-selection);
}
::-moz-selection {
	color: var(--color-white);
	background: var(--color-selection);
}
a		 { color: var(--color-link); text-decoration: underline; }
a:link	{ color: var(--color-link); }
a:visited { color: var(--color-link); }
a:hover   { color: var(--color-hover); }
a:active  { color: var(--color-link); }
a.disabled {
	pointer-events: none;
}

figure {
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.main {
	overflow: hidden;
	flex: 1;
	position: relative;
	padding-bottom: 48px;
	@media (min-width: 768px) {
		padding-bottom: 0;
	}
}



/* ==============================
common
============================== */
.contents-width {
	margin-right: auto;
	margin-left: auto;
	width: 92vw;
	max-width: 1024px;
}
.asterisk-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--base-font-family);
	color: var(--color-gray-6);
	li {
		padding: 0 0 0.4rem 1em;
		position: relative;
		font-size: 1.2rem;
		line-height: 1.6;
		text-indent: -0.55em;
		&::before {
			display: inline-block;
			content: '※';
		}
	}
}
.bg-beige	{ background-color: var(--color-beige); }
.bg-white	{ background-color: var(--color-white); }
.bg-orange   { background-color: var(--color-orange); }
.bg-purple   { background-color: var(--color-purple); }
.bg-blue	 { background-color: var(--color-blue); }
.bg-beige {
	.point-list,
	.chosen-list,
	.course-list,
	.try-step-list,
	.start-step-list {
		> li {
			background-color: var(--color-white);
		}
	}
	.faq-list {
		.faq-item {
			background-color: var(--color-white);
		}
	}
}



/* ==============================
section layout
============================== */
.section-concept,
.section-benefits,
.section-features,
.section-course,
.section-try-step,
.section-class-list,
.section-start-step,
.section-horizontal-pc .section-pricing,
.section-horizontal-pc .section-payment,
.section-faq {
	padding: 56px 0;
	@media (min-width: 768px) {
		padding: 80px 0;
	}
}
.section-horizontal-pc .section-payment {
	position: relative;
	&::before {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		content: '';
		display: block;
		width: 92vw;
		max-width: 1024px;
		height: 1px;
		background-color: var(--color-gray-c);
	}
}
.bg-illust {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 120px 0;
	&::before,
	&::after {
		position: absolute;
		z-index: -1;
		content: '';
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		width: 80px;
		aspect-ratio: 113 / 499;
	}
	&::before {
		top: 0;
		right: 0;
		transform: rotate(90deg) scale(-1, 1);
		transform-origin: top right;
		background-image: url(../img/bg-illust-blue.webp);
	}
	&::after {
		bottom: 0;
		left: 0;
		transform: rotate(90deg) scale(-1, 1);
		transform-origin: bottom left;
		background-image: url(../img/bg-illust-green.webp);
	}
	@media (min-width: 768px) and (max-width: 959px){
		padding: 80px 0;
		&::before,
		&::after {
			width: 12%;
		}
		&::before {
			transform: rotate(0) scale(1, 1);
		}
		&::after {
			transform: rotate(0) scale(1, 1);
		}
	}
	@media (min-width: 960px) {
		&::before,
		&::after {
			width: 20%;
		}
		&::before {
			transform: rotate(0) scale(1, 1);
		}
		&::after {
			transform: rotate(0) scale(1, 1);
		}
	}
}
@media (min-width: 960px) {
	.section-horizontal-pc {
		display: flex;
		gap: 104px;
		margin: 0 auto;
		width: 92vw;
		max-width: 1024px;
		section {
			width: calc(calc(100% - 104px) / 2);
			.contents-width {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
			}
		}
	}
}



/* ==============================
sticky cta
============================== */
.sticky-button-wrapper {
	position: absolute;
	top: calc(252vw - 266px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 270px;
	pointer-events: none;
	.campaign-button {
		position: relative;
		margin: 0;
		pointer-events: all;
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0;
			text-decoration: none;
			font-family: var(--web-font-mincho-family);
			font-weight: var(--web-font-mincho-weight);
			font-style: var(--web-font-mincho-style);
			color: var(--color-white);
			border-radius: 4px;
			background-color: var(--color-sticky-campaign-button);
			.text-campaign-date {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				padding: 4px 12px;
				font-family: var(--base-font-family);
				font-weight: 700;
				font-size: 1.4rem;
				line-height: 1.5;
				color: var(--color-purple);
				white-space: nowrap;
				transform: translate(-16px,calc(-100% + 0.5em));
				border-radius: 4px;
				background-color: var(--color-attention-yellow);
				pointer-events: none;
				strong {
					font-size: 1.5em;
				}
				&::after {
					position: absolute;
					top: calc(100% - 0.2em);
					left: 50%;
					transform: translateX(-50%);
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0.5em 0.5em 0 0.5em;
					border-color: var(--color-attention-yellow) transparent transparent transparent;
				}
			}
			img {
				margin: -14px -16px 0 0;
				width: calc(100% + 16px);
			}
			.text-button-minimum {
				display: none;
				letter-spacing: -0.05em;
			}
			.view-switch {
				display: none;
			}
		}
	}
	.primary-cta-button {
		margin: 0;
		pointer-events: all;
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 16px 24px;
			text-decoration: none;
			font-family: var(--web-font-mincho-family);
			font-weight: var(--web-font-mincho-weight);
			font-style: var(--web-font-mincho-style);
			color: var(--color-white);
			border-radius: 4px;
			background-color: var(--color-sticky-cta-button);
			.text-button-minimum {
				display: none;
				letter-spacing: -0.05em;
			}
		}
	}
	&.sp-contents-area {
		flex-direction: row;
		gap: 0;
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		transform: translateY(100%);
		.campaign-button {
			width: 50%;
			a {
				padding: 8px;
				height: 100%;
				border-radius: 0;
				.text-campaign-date {
					left: 50%;
					transform: translate(-50%,calc(-100% + 0.5em));
					opacity: 0;
				}
				img {
					display: none;
				}
				.text-button-minimum {
					display: block;
				}
			}
		}
		.primary-cta-button {
			width: 50%;
			a {
				padding: 8px;
				height: 100%;
				border-radius: 0;
				img {
					display: none;
				}
				.text-button-minimum {
					transform: scale(0.85, 1);
					display: block;
                    line-height: 1.2;
                    white-space: nowrap;
				}
			}
		}
		&.sp-sticky-active {
			transform: translateY(0);
			transition: 0.3s;
			.campaign-button {
				a {
					.text-campaign-date {
						opacity: 1;
						transition: 0.3s;
					}
				}
			}
		}
	}
	&.sticky-footer-area {
		position: absolute;
	}
	@media (min-width: 768px) {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 40px;
		left: auto;
		transform: translateX(0);
		.campaign-button {
			transition: 0.3s;
			a {
				border-radius: 8px 0 0 8px;
				.view-switch {
					position: absolute;
					left: 0;
					top: 50%;
					transform: rotate(-90deg) translate(-50%, -32px);
					transform-origin: left top;
					display: block;
					padding: 0 28px 0 16px;
					height: 32px;
					border-radius: 6px 6px 0 0;
					background-color: var(--color-sticky-campaign-button);
					span {
						display: none;
					}
					&::before,
					&::after {
						position: absolute;
						top: 50%;
						right: 14px;
						content: '';
						display: block;
						width: 14px;
						height: 2px;
						background-color: var(--color-white);
					}
					&::before {
						transform: rotate(45deg);
					}
					&::after {
						transform: rotate(-45deg);
					}
				}
			}
			&.button-close {
				transform: translateX(100%);
				a {
					.text-campaign-date {
						transform: translate(0,calc(-100% - 0.75em));
					}
						.view-switch {
							span {
							display: block;
							padding-right: 8px;
						}
						&::before,
						&::after {
							width: 10px;
						}
						&::before {
							transform: rotate(45deg) translate(2px,-2px);
						}
						&::after {
							transform: rotate(-45deg) translate(-2px,-2px);
						}
					}
				}
			}
		}
		.primary-cta-button {
			a {
				padding-right: 16px;
				border-radius: 8px 0 0 8px;
			}
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		bottom: 16px;
		width: 200px;
		.campaign-button {
			a {
				.view-switch {
					transform: rotate(-90deg) translate(-50%, -24px);
					height: 24px;
					font-size: 1.2rem;
				}
				img {
					margin-right: -12px;
					width: calc(100% + 8px);
				}
			}
		}
	}
}



/* ==============================
contents cta
============================== */
.section-cta {
	text-align: center;
	.bottom-cta-title {
		margin: 0 0 40px 0;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 2.8rem;
		line-height: 1.4;
	}
	.cta-description {
		margin: 0 0 40px 0;
	}
	.cta-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 56px;
		.cta-button {
			margin: 0;
			width: 100%;
			max-width: 400px;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 32px 20px;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				font-size: 2.2rem;
				line-height: 1.2;
				text-decoration: none;
				color: var(--color-white);
				white-space: nowrap;
				border-radius: 8px;
				box-shadow: 0 4px 0 var(--color-accent-shadow);
				background: var(--color-accent);
				transition: all 0.2s ease;
				&::before,
				&::after {
					content: '';
					display: block;
					width: 1em;
					height: 1em;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center center;
				}
				&::before {
					margin-right: 1em;
					background-image: url(../img/icon-doc.svg);
				}
				&::after {
					margin-left: 1em;
					background-image: url(../img/icon-arrow.svg);
				}
				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 6px 0 var(--color-accent-shadow);
				}
				.text-balloon {
					position: absolute;
					top: -1.2rem;
					left: 50%;
					transform: translateX(-50%);
					padding: 0.4rem 2.4rem 0.2rem;
					font-family: var(--base-font-family);
					font-weight: 700;
					font-size: 1.4rem;
					line-height: 1.5;
					color: var(--color-accent);
					white-space: nowrap;
					border-radius: 1000px;
					border: 2px solid var(--color-accent);
					background: var(--color-white);
					&::after {
						content: '';
						position: absolute;
						top: 100%;
						left: 50%;
						transform: translateX(-50%);
						border-style: solid;
						border-width: 0.6rem 0.4rem 0 0.4rem;
						border-color: var(--color-white) transparent transparent transparent;
					}
				}
			}
		}
		.contact-by-phone {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1.6rem;
			padding: 3.2rem 1.6rem 2.4rem;
			width: 100%;
			max-width: 400px;
			border: 1px solid var(--color-gray-c);
			border-radius: 8px;
			background-color: var(--color-white);
			.contact-title {
				position: absolute;
				top: -1.2rem;
				left: 50%;
				transform: translateX(-50%);
				margin: 0;
				padding: 0.4rem 2.4rem 0.2rem;
				font-weight: 700;
				font-size: 1.4rem;
				line-height: 1.5;
				color: var(--color-white);
				white-space: nowrap;
				border-radius: 1000px;
				background: var(--color-gray-6);
				&::after {
					content: '';
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
					border-style: solid;
					border-width: 0.6rem 0.4rem 0 0.4rem;
					border-color: var(--color-gray-6) transparent transparent transparent;
				}
				.icon-phone {
					transform: translateY(0.15em);
					display: inline-block;
					width: 1em;
					height: 1em;
					background-image: url(../img/icon-phone.svg);
					background-position: center center;
					background-repeat: no-repeat;
					background-size: contain;
				}
			}
			.contact-phone-number {
				margin: 0;
				font-size: 2.4rem;
				line-height: 1.2;
				&::before {
					transform: translateY(0.15em);
					content: '';
					display: inline-block;
					margin-right: 0.5em;
					width: 1em;
					height: 1em;
					background-image: url(../img/icon-free-dial.svg);
					background-position: center center;
					background-repeat: no-repeat;
					background-size: contain;
				}
			}
			.text-note {
				margin: 0;
				font-size: 1.4rem;
				line-height: 1.6;
			}
		}
	}
}



/* ==============================
contents bg image
============================== */
.contents-bg-image {
	width: 100%;
	aspect-ratio: 4 / 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	&.bg1 {
		background-image: url(../img/contents-bg1.webp);
	}
	&.bg2 {
		background-image: url(../img/contents-bg2.webp);
	}
	&.bg3 {
		background-image: url(../img/contents-bg3.webp);
	}
}



/* ==============================
H2
============================== */
.section-title {
	margin: 0 auto 48px;
	text-align: center;
	font-family: var(--web-font-mincho-family);
	font-weight: var(--web-font-mincho-weight);
	font-style: var(--web-font-mincho-style);
	font-size: 2.6rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
	.text-en {
		display: block;
		margin-top: 1.6rem;
		font-family: var(--base-font-family);
		font-size: 1.4rem;
		color: var(--color-section-title-en);
	}
	.section-title-number {
		display: inline-block;
		margin: 0.25em -0.35em 0 0;
		transform: translateY(-0.05em);
		width: 1.5em;
	}
	@media (min-width: 768px) {
		margin: 0 auto 72px;
		font-size: 3.2rem;
		.text-en {
			margin-top: 2.4rem;
			font-size: 1.4rem;
		}
	}
}



/* ==============================
Site Header
============================== */
.header {
	position: fixed;
	z-index: 9999;
	transform: translateY(0);
	width: 100%;
	background-color: var(--color-header-bg);
	backdrop-filter: blur(4px);
	transition: 0.3s;
	.header-inner {
		margin-right: auto;
		margin-left: auto;
		padding: 16px 0;
		width: calc(100% - 32px);
		.site-title {
			margin: 0 auto;
			text-align: center;
			font-size: 1rem;
			line-height: 1;
			width: 75%;
			max-width: 400px;
			a {
				display: block;
			}
		}
	}
	@media (min-width: 768px) {
		.header-inner {
			width: calc(100% - 80px);
		}
	}
	&.hide {
		transform: translateY(-100%);
	}
}
body.home .header {
	/* display: none; */
}



/* ==============================
Home header
============================== */
.home-header {
	.section-hero {
		position: relative;
		.page-title {
			margin: 0;
			width: 100%;
			aspect-ratio: 414 / 1044;
			@media (min-width: 768px) {
				aspect-ratio: 64 / 31;
			}
		}
		.text-note {
			margin: 1em 0;
			padding: 0 1em;
			font-size: 1rem;
			text-align: right;
		}
	}
	@media (min-width: 768px) {
		.section-hero {
			.text-note {
				position: absolute;
				bottom: 0;
				left: 0;
				text-align: left;
			}
		}
	}
}



/* ==============================
Concept
============================== */
.section-concept {
	.contents-width {
		.concept-copy-wrapper {
			display: flex;
			flex-direction: column;
			gap: 24px;
			margin: 0;
			width: 100%;
			.concept-sub-copy {
				width: 75%;
			}
			.concept-copy {
				width: 100%;
			}
		}
		.concept-text {
			margin-top: 40px;
			font-family: var(--web-font-mincho-family);
			font-weight: var(--web-font-mincho-weight);
			font-style: var(--web-font-mincho-style);
			font-size: 1.6rem;
			line-height: 2.4;
			p {
				margin: 2.4rem 0;
				strong {
					font-weight: var(--web-font-mincho-weight);
					font-size: 2rem;
					background: linear-gradient(to bottom, transparent 64%, var(--color-marker) 64%, var(--color-marker) 90%, transparent 90%);
				}
				sup {
					font-size: 0.6em;
				}
			}
			.concept-check-list {
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					position: relative;
					padding: 0 0 0.5em 1.75em;
					line-height: 1.6;
					&::before {
						position: absolute;
						top: 0.25em;
						left: 0;
						content: '';
						display: block;
						width: 1.2em;
						height: 1.2em;
						background-color: var(--color-attention-yellow);
					}
					&::after {
						position: absolute;
						top: 0.4em;
						left: 0.2em;
						transform: rotate(-45deg);
						content: '';
						display: block;
						width: 0.8em;
						height: 0.55em;
						border-style: solid;
						border-width: 0 0 0.225em 0.225em;
						border-color: var(--color-base-text);
					}
				}
			}
		}
	}
	@media (min-width: 768px) {
		.contents-width {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			padding: 0 0 0 7%;
			.concept-copy-wrapper {
				gap: 40px;
				.concept-sub-copy {
					width: 40%;
				}
				.concept-copy {
					width: 70%;
				}
			}
			.concept-text {
				font-size: 1.8rem;
				p {
					strong {
						font-size: 2.6rem;
					}
					sup {
					}
				}
				.concept-check-list {
					li {
						&::before {
						}
						&::after {
						}
					}
				}
			}
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		.contents-width {
			padding-left: 12%;
			.concept-copy-wrapper {
				.concept-sub-copy {
					width: 50%;
				}
				.concept-copy {
					width: 65%;
				}
			}
		}
	}
}



/* ==============================
Safe & Simple Perks
============================== */
.point-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	.point-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin: 90px 0 0 0;
		padding: 28px 16px 24px;
		width: calc(100% - 56px);
		border-radius: 8px;
		.point-header {
			text-align: center;
			.img-wrapper {
				position: absolute;
				top: -90px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 45px 0 0 0;
				width: 180px;
				height: 90px;
				border-radius: 1000px 1000px 0 0;
				background-color: var(--color-white);
				img {
					width: 96px;
					height: auto;
					margin-bottom: 1rem;
				}
			}
			.point-title {
				margin: 0;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				font-size: 1.8rem;
				line-height: 1.5;
				strong {
					font-weight: var(--web-font-mincho-weight);
					font-size: 2.3rem;
					line-height: 1.35;
					color: var(--color-accent);
					letter-spacing: normal;
				}
			}
		}
		.point-description {
			margin: 0;
			font-size: 1.4rem;
			line-height: 1.6;
			color: var(--color-base-text);
		}
	}
	& + .asterisk-list {
		margin-top: 32px;
	}
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 32px;
		.point-item {
			width: calc(calc(100% - 64px) / 3);
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		gap: 24px;
		.point-item {
			margin-top: 70px;
			width: calc(calc(100% - 48px) / 3);
			.point-header {
				.img-wrapper {
					top: -70px;
					width: 140px;
					height: 70px;
					img {
						width: 80px;
					}
				}
				.point-title {
					font-size: 1.6rem;
					strong {
						font-size: 2rem;
					}
				}
			}
		}
	}
}



/* ==============================
Why Choose Us?
============================== */
.chosen-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	.chosen-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin: 90px 0 0 0;
		padding: 28px 16px 24px;
		width: calc(100% - 56px);
		border-radius: 8px;
		.chosen-header {
			text-align: center;
			.img-wrapper {
				position: absolute;
				top: -90px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 45px 0 0 0;
				width: 180px;
				height: 90px;
				border-radius: 1000px 1000px 0 0;
				background-color: var(--color-white);
				img {
					width: 96px;
					height: auto;
					margin-bottom: 1rem;
				}
			}
			.chosen-title {
				margin: 0;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				font-size: 1.8rem;
				line-height: 1.5;
				strong {
					font-weight: var(--web-font-mincho-weight);
					font-size: 2.3rem;
					line-height: 1.35;
					color: var(--color-accent);
					letter-spacing: normal;
				}
			}
		}
	}
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 32px;
		.chosen-item {
			width: calc(calc(100% - 64px) / 3);
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		gap: 24px;
		.chosen-item {
			margin-top: 70px;
			width: calc(calc(100% - 48px) / 3);
			.chosen-header {
				.img-wrapper {
					top: -70px;
					width: 140px;
					height: 70px;
					img {
						width: 80px;
					}
				}
				.chosen-title {
					font-size: 1.6rem;
					strong {
						font-size: 2rem;
					}
				}
			}
		}
	}
}



/* ==============================
Course at a Glance
============================== */
.course-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	.course-item {
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 8px;
		border: solid 1px var(--color-gray-f0);
		.course-header {
			border-radius: 8px 8px 0 0;
			text-align: center;
			color: var(--color-white);
			.course-title {
				margin: 0;
				padding: 40px 0;
				.course-title-line {
					display: block;
					&:nth-child(1) {
						position: absolute;
						top: -1.2rem;
						left: 50%;
						transform: translateX(-50%);
						margin: 0;
						padding: 4px 24px;
						font-size: 1.2rem;
						line-height: 1.5;
						white-space: nowrap;
						border-radius: 1000px;
					}
					&:nth-child(2) {
						font-family: var(--web-font-mincho-family);
						font-weight: var(--web-font-mincho-weight);
						font-style: var(--web-font-mincho-style);
						font-size: 3.4rem;
						line-height: 1.6;
					}
					&:nth-child(3) {
						font-family: var(--web-font-mincho-family);
						font-weight: var(--web-font-mincho-weight);
						font-style: var(--web-font-mincho-style);
						font-size: 2.2rem;
						line-height: 1.4;
					}
				}
			}
			.course-sub-title {
				margin: 0;
				padding: 8px 0;
				font-size: 1.4rem;
				font-weight: 700;
			}
			.course-price-info {
				background-color: #fff;
				padding: 24px;
				border-top: 1px solid var(--color-gray-c);
				border-bottom: 1px solid var(--color-gray-c);
				.course-price-note {
					display: inline-block;
					margin: 0;
					padding: 4px 24px;
					font-size: 1.4rem;
					line-height: 1.5;
					font-weight: 700;
					color: var(--color-accent);
					border: solid 1px var(--color-accent);
					border-radius: 1000px;
					&::before {
						transform: translateY(0.1rem);
						content: '';
						display: inline-block;
						margin-right: 0.5em;
						width: 2.4rem;
						height: 1.3rem;
						mask-size: contain;
						mask-repeat: no-repeat;
						mask-position: center center;
						mask-image: url(../img/icon-eternal.svg);
						background: var(--color-accent);
					}
				}
				.course-price {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 8px 0 0 0;
					letter-spacing: normal;
					.course-price-original {
						position: relative;
						margin: 0;
						font-weight: 700;
						font-size: 3.2rem;
						line-height: 1.5;
						color: var(--color-gray-c);
						&::after {
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							content: '';
							display: block;
							width: 100%;
							height: 2px;
							background-color: var(--color-gray-9);
						}
					}
					/* .course-price-sub-label {
						position: relative;
						margin: 8px 0 0 0;
						padding: 0 8px;
						font-weight: 700;
						font-size: 1.8rem;
						color: var(--color-accent);
						&::before,
						&::after {
							position: absolute;
							bottom: 0;
							content: '';
							display: block;
							width: 2px;
							height: 0.8em;
							background-color: var(--color-accent);
						}
						&::before {
							left: 0;
							transform: rotate(-30deg) translateY(-75%);
						}
						&::after {
							right: 0;
							transform: rotate(30deg) translateY(-75%);
						}
					} */
					.course-price-sub-label-wrapper {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(calc(-50% - 130px),-100%);
						.course-price-sub-label {
							transform: rotate(-25deg);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin: 0;
							width: 7rem;
							height: 7rem;
							font-weight: 700;
							font-size: 1.5rem;
							line-height: 1.1;
							color: var(--color-white);
							background-color: var(--color-pink);
							border-radius: 1000px;
							&::before {
								position: absolute;
								top: 100%;
								left: 50%;
								transform: translateX(-50%);
								content: '';
								display: block;
								margin-top: -4px;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 12px 10px 0 10px;
								border-color: var(--color-pink) transparent transparent transparent;
							}
						}
					}
					.course-price-label {
						position: relative;
						z-index: 0;
						margin: 0 0 2em 0;
						padding: 0.5em 0.5em 0;
						font-size: 1.3rem;
						line-height: 1;
						font-weight: 700;
						color: var(--color-white);
						background-color: var(--color-pink);
						&::after {
							position: absolute;
							top: calc(100% - 4px);
							left: 50%;
							z-index: -1;
							transform: translateX(-50%);
							content: '';
							display: block;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 2em 5em 0 5em ;
							border-color: var(--color-pink) transparent transparent transparent;
						}
					}
					.course-price-discounted {
						position: relative;
						margin: 0;
						padding: 0 0.25em;
						font-weight: 700;
						font-size: 5.6rem;
						line-height: 1.2;
						color: var(--color-white);
						background-color: var(--color-price-highlight);
					}
					.text-unit {
						padding-left: 4px;
						font-size: 1.6rem;
						text-shadow: none;
					}
				}
			}
			.course-image {
				width: 100%;
			}
		}
		.course-description {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 40px;
			flex-grow: 1;
			padding: 48px 16px 40px;
			border-radius: 0 0 8px 8px;
			.course-section {
				display: flex;
				flex-direction: column;
				gap: 16px;
				.course-section-title {
					position: relative;
					margin: 0;
					padding: 24px 0 16px;
					font-family: var(--web-font-mincho-family);
					font-weight: var(--web-font-mincho-weight);
					font-style: var(--web-font-mincho-style);
					font-size: 1.4rem;
					line-height: 1.8;
					text-align: center;
					border-style: solid;
					border-color: var(--color-base-text);
					border-width: 1px 0;
					strong {
						display: inline-block;
						margin-left: -0.5em;
						font-weight: var(--web-font-mincho-weight);
						font-size: 2rem;
					}
					.course-section-title-chatch {
						position: absolute;
						top: -1.4rem;
						left: 50%;
						transform: translateX(-50%);
						display: block;
						padding: 4px 24px;
						font-family: var(--base-font-family);
						font-weight: 700;
						font-size: 1.2rem;
						line-height: 1.5;
						white-space: nowrap;
						background-color: var(--color-white);
						border-radius: 1000px;
						border: solid 1px var(--color-base-text);
					}
					.course-section-sub-title {
						display: block;
						font-family: var(--base-font-family);
						font-weight: 700;
					}
				}
				&.curriculum {
					.course-section-title {
						padding-top: 16px;
					}
				}
				.course-recommend-list {
					padding-left: 1.5em;
					list-style-type: disc;
					font-size: 1.4rem;
					line-height: 1.5;
					li {
						margin-bottom: 4px;
					}
				}
				.course-curriculum-list {
					display: flex;
					flex-direction: column;
					gap: 8px;
					margin: 0;
					padding: 0;
					list-style: none;
					li {
						position: relative;
						padding-left: 1.75em;
						font-size: 1.5rem;
						line-height: 1.8;
						&::before {
							position: absolute;
							top: 0.25em;
							left: 0;
							content: '';
							display: block;
							width: 1.2em;
							height: 1.2em;
							border: solid 1px var(--color-gray-9);
							border-radius: 2px;
							background-color: var(--color-white);
						}
						&::after {
							position: absolute;
							top: 0.4em;
							left: 0.2em;
							transform: rotate(-45deg);
							content: '';
							display: block;
							width: 0.8em;
							height: 0.55em;
							border-style: solid;
							border-width: 0 0 0.225em 0.225em;
							border-color: var(--color-accent);
						}
						.text-note {
							display: block;
							font-size: 1.2rem;
						}
						&.top-line {
							padding-top: 8px;
							border-style: dashed;
							border-width: 1px 0 0 0;
							border-color: var(--color-base-text);
							&::before {
								top: calc(0.25em + 8px);
							}
							&::after {
								top: calc(0.4em + 8px);
							}
						}
					}
				}
			}
		}
	}
	.course-item.course-dormant {
		.course-header {
			background-color: var(--color-course-dormant);
			.course-title {
				.course-title-line {
					&:nth-child(1) {
						top: -1.4rem;
						font-size: 1.6rem;
						background-color: var(--color-pink);
					}
				}
			}
			.course-sub-title {
				background-color: var(--color-course-dormant-dark);
			}
		}
	}
	.course-item.course-rental {
		.course-header {
			background-color: var(--color-course-rental);
			.course-title {
				.course-title-line {
					&:nth-child(1) {
						background-color: var(--color-course-rental-dark);
					}
				}
			}
			.course-sub-title {
				background-color: var(--color-course-rental-dark);
			}
		}
	}
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		gap: 64px;
		.course-item {
			width: calc(calc(100% - 64px) / 2);
			.course-description {
				.course-section {
					.course-curriculum-list {
						li {
							.text-note {
								display: inline;
							}
						}
					}
				}
			}
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		gap: 24px;
		.course-item {
			.course-header {
				.course-title {
					.course-title-line {
						&:nth-child(2) {
							font-size: 3rem;
						}
					}
				}
			}
		}
	}
}
.other-curriculum-wrapper {
	margin-top: 40px;
	font-family: var(--web-font-mincho-family);
	font-weight: var(--web-font-mincho-weight);
	font-style: var(--web-font-mincho-style);
	text-align: center;
	.other-curriculum-title {
		font-size: 2.4rem;
		line-height: 1.5;
		.text-marker {
			background: linear-gradient(to bottom, transparent 64%, var(--color-marker) 64%, var(--color-marker) 90%, transparent 90%);
		}
	}
	.other-curriculum-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1.8rem;
		line-height: 1.5;
		> li {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8px 16px;
			width: 80%;
			border-radius: 8px;
			border: solid 1px var(--color-gray-c);
		}
	}
	.text-etc {
		margin: 0;
		font-size: 2rem;
	}
	@media (min-width: 768px) {
		.other-curriculum-title {
			font-size: 2.8rem;
		}
		.other-curriculum-list {
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			gap: 16px;
			font-size: 2rem;
			> li {
				width: calc(calc(100% - 32px) / 3);
			}
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		.other-curriculum-title {
			font-size: 2rem;
		}
		.other-curriculum-list {
			font-size: 1.6rem;
			> li {
				padding: 12px 16px;
			}
		}
	}
}




/* ==============================
Try It for Free!
============================== */
.try-step-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	.try-step-item {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 24px 24px 20px;
		width: calc(100% - 56px);
		border-radius: 8px;
		.try-step-header {
			.try-step-title {
				position: relative;
				margin: 0;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				font-size: 1.8rem;
				line-height: 1.4;
				.try-step-list-number {
					position: absolute;
					top: 50%;
					left: -48px;
					transform: translateY(-50%);
					width: 36px;
					&::after {
						position: absolute;
						right: 0;
						bottom: 6px;
						content: '';
						display: block;
						width: 4px;
						height: 4px;
						border-radius: 10000px;
						background-color: var(--color-accent);
					}
				}
			}
		}
		.try-step-description {
			margin: 0;
			font-size: 1.4rem;
			line-height: 1.6;
			color: var(--color-base-text);
		}
	}
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
		.try-step-item {
			padding-left: 40px;
			width: calc(calc(100% - 64px) / 3);
			.try-step-header {
				.try-step-title {
					.try-step-list-number {
						left: -64px;
						width: 48px;
					}
				}
			}
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		.try-step-item {
			padding: 24px 16px 20px 32px;
			width: calc(calc(100% - 48px) / 3);
			.try-step-header {
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-height: 4.5rem;
				.try-step-title {
					font-size: 1.6rem;
					.try-step-list-number {
						left: -52px;
						width: 36px;
					}
				}
			}
			.try-step-description {
				flex-grow: 1;
			}
		}
	}
}



/* ==============================
Classroom Info
============================== */
.tab-area {
	> input[type="radio"] {
		display: none;
	}
	.tab-nav-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-between;
		.tab-nav-item {
			width: calc(calc(100% - 24px) / 3);
			label {
				cursor: pointer;
				display: inline-block;
				padding: 16px;
				width: 100%;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				line-height: 1.6;
				text-align: center;
				color: var(--color-white);
				background-color: var(--color-tab-off);
				border-radius: 8px 8px 0 0;
				.text-searches-number {
					padding-left: 0.25em;
					font-family: var(--base-font-family);
					font-size: 1.2rem;
				}
			}
		}
	}
	#tab-osaka:checked ~ .tab-nav-list label[for="tab-osaka"],
	#tab-kyoto:checked ~ .tab-nav-list label[for="tab-kyoto"],
	#tab-hyogo:checked ~ .tab-nav-list label[for="tab-hyogo"] {
		color: var(--color-base-text);
		background-color: var(--color-white);
	}
	.tab-contents-list {
		margin: 0;
		padding: 0;
		list-style: none;
		.tab-contents-item {
			display: none;
			background-color: var(--color-white);
			border-radius: 0 0 8px 8px;
			.class-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 16px;
				margin: 0;
				padding: 24px 16px;
				list-style: none;
				> li {
					width: calc(calc(100% - 16px) / 2);
					a {
						display: block;
						padding: 6px 24px;
						text-align: center;
						text-decoration: none;
						color: var(--color-base-text);
						font-size: 1.4rem;
						line-height: 1.6;
						font-weight: 700;
						border-radius: 1000px;
						border: solid 1px var(--color-gray-c);
						background-color: var(--color-white);
					}
				}
			}
		}
	}
	#tab-osaka:checked ~ .tab-contents-list .tab-osaka,
	#tab-kyoto:checked ~ .tab-contents-list .tab-kyoto,
	#tab-hyogo:checked ~ .tab-contents-list .tab-hyogo {
		display: block;
	}
	@media (min-width: 768px) and (max-width: 959px){
		.tab-nav-list {
			.tab-nav-item {
				label {
					font-size: 2rem;
					.text-searches-number {
						font-size: 1.4rem;
					}
				}
			}
		}
		.tab-contents-list {
			.tab-contents-item {
				.class-list {
					padding: 24px;
					gap: 16px;
					> li {
						width: calc(calc(100% - 32px) / 3);
						a {
							padding: 8px 24px;
						}
					}
				}
			}
		}
	}
	@media (min-width: 960px) {
		.tab-nav-list {
			.tab-nav-item {
				width: calc(calc(100% - 64px) / 3);
				label {
					font-size: 2.4rem;
					.text-searches-number {
						font-size: 1.4rem;
					}
				}
			}
		}
		.tab-contents-list {
			.tab-contents-item {
				.class-list {
					padding: 40px;
					gap: 24px 32px;
					> li {
						width: calc(calc(100% - 96px) / 4);
						a {
							padding: 8px 24px;
						}
					}
				}
			}
		}
	}
}



/* ==============================
How to Start
============================== */
.start-step-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	counter-reset: step;
	align-items: center;
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
	.start-step-item {
		position: relative;
		z-index: 0;
		width: 240px;
		min-height: 240px;
		text-align: center;
		&::before {
			position: absolute;
			z-index: -1;
			bottom: calc(100% - 8px);
			left: 50%;
			transform: translateX(-50%);
			content: '';
			display: block;
			width: 16px;
			height: 40px;
			background-color: var(--color-step-arrow);
		}
		&:first-child {
			&::before {
				display: none;
			}
		}
		&:last-child {
			&::before {
				bottom: calc(100% + 8px);
				height: 24px;
			}
			&::after {
				position: absolute;
				bottom: 100%;
				left: 50%;
				transform: translateX(-50%);
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 24px 24px 0 24px;
				border-color: var(--color-step-arrow) transparent transparent transparent;
			}
		}
		.start-step-header {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 32px 0 8px 0;
			min-height: 120px;
			color: var(--color-white);
			border-radius: 120px 120px 0 0;
			background-color: var(--color-step-base);
			.start-step-title {
				margin: 0;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				font-size: 3.2rem;
				line-height: 1.4;
				&.text-small {
					font-size: 2.4rem;
				}
				.start-step-number {
					position: absolute;
					top: 0.01px;
					left: 0px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 4px 0px 0px;
					width: 5.2rem;
					height: 5.2rem;
					font-family: var(--base-font-family);
					font-weight: 700;
					font-size: 1rem;
					line-height: 1;
					color: var(--color-beige-dark);
					background: #FFFFFF;
					border: 1px solid var(--color-beige-dark);
					border-radius: 50% 50% 4px 50%;
					.text-num {
						font-size: 2rem;
					}
				}
			}
		}
		.start-step-description {
			padding: 12px 0 16px 0;
			min-height: 120px;
			font-size: 1.3rem;
			line-height: 1.5;
			border-style: solid;
			border-width: 0 8px 8px 8px;
			border-color: var(--color-step-base);
			border-radius: 0 0 120px 120px;
			background-color: var(--color-white);
		}
	}
	@media (min-width: 768px) and (max-width: 959px){
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
		.start-step-item {
			width: 200px;
			min-height: 200px;
			&::before {
				top: 50%;
				bottom: auto;
				transform: translateY(-50%);
				width: 40px;
				height: 16px;
			}
			&:first-child {
				&::before {
					display: block;
				}
			}
			&:nth-child(-n+3) {
				&::before {
					left: calc(100% - 4px);
				}
			}
			&:nth-child(3),
			&:nth-child(4) {
				&::before {
					width: calc(40px + 10000px);
				}
			}
			&:nth-child(4) {
				z-index: 1;
				margin-left: calc(100% - 648px);
				&::before {
					left: auto;
					right: calc(100% + 8px);
				}
				&::after {
					position: absolute;
					top: 50%;
					right: 100%;
					bottom: auto;
					left: auto;
					transform: translateY(-50%);
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 24px 0 24px 24px;
					border-color: transparent transparent transparent var(--color-step-arrow);
				}
			}
			&:nth-last-child(-n+2) {
				&::before {
					right: calc(100% - 16px);
					bottom: auto;
					left: auto;
					height: 16px;
				}
				&::after {
					display: none;
				}
			}
			.start-step-header {
				border-radius: 80px 16px 0 0;
			}
			.start-step-description {
				padding: 16px;
				text-align: left;
				border-radius: 0 0 16px 16px;
				br {
					display: none;
				}
			}
		}
	}
	@media (min-width: 960px) {
		flex-direction: row;
		flex-wrap: wrap;
		.start-step-item {
			&::before {
				top: 50%;
				bottom: auto;
				transform: translateY(-50%);
				width: 40px;
				height: 16px;
			}
			&:first-child {
				&::before {
					display: block;
				}
			}
			&:nth-child(-n+3) {
				&::before {
					left: calc(100% - 4px);
				}
			}
			&:nth-child(3),
			&:nth-child(4) {
				&::before {
					width: calc(40px + 10000px);
				}
			}
			&:nth-child(4) {
				z-index: 1;
				margin-left: calc(100% - 784px);
				&::before {
					left: auto;
					right: calc(100% + 8px);
				}
				&::after {
					position: absolute;
					top: 50%;
					right: 100%;
					bottom: auto;
					left: auto;
					transform: translateY(-50%);
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 24px 0 24px 24px;
					border-color: transparent transparent transparent var(--color-step-arrow);
				}
			}
			&:nth-last-child(-n+2) {
				&::before {
					right: calc(100% - 8px);
					bottom: auto;
					left: auto;
					height: 16px;
				}
				&::after {
					display: none;
				}
			}
		}
	}
}



/* ==============================
Plans & Prices
============================== */
.pricing-table-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
	.pricing-table {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		vertical-align: middle;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.5;
		.pricing-table-th {
			padding-right: 0.5em;
			width: 7.6rem;
			text-align: right;
			font-size: 1.2rem;
			line-height: 1.5;
			font-weight: 700;
			color: var(--color-beige-dark);
		}
		.course-dormant,
		.course-rental {
			padding: 16px 4px;
			border-style: solid;
			border-color: var(--color-white);
			border-width: 1px 0 0 1px;
		}
		strong {
			font-weight: 700;
			font-size: 2rem;
			.text-unit {
				font-weight: 400;
				font-size: 1.4rem;
			}
		}
		.text-note {
			font-size: 1rem;
			line-height: 1.5;
		}
		thead {
			.course-dormant,
			.course-rental {
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				color: var(--color-white);
				line-height: 1.5;
				letter-spacing: -0.05em;
			}
			.course-dormant {
				background-color: var(--color-course-dormant-dark);
			}
			.course-rental {
				background-color: var(--color-course-rental-dark);
			}
		}
		tbody {
			.course-dormant {
				background-color: var(--color-course-dormant-light);
			}
			.course-rental {
				background-color: var(--color-course-rental-light);
			}
		}
	}
	@media (min-width: 768px) {
		.pricing-table {
			thead {
				.course-dormant,
				.course-rental {
					font-size: 1.8rem;
				}
			}
		}
	}
}



/* ==============================
#campaign-info
============================== */
#campaign-info.campaign-info-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0 0 0;
	padding: 24px 32px;
	border-radius: 8px;
	background-color: var(--color-attention-yellow);
	.campaign-title {
		margin: 0;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 2rem;
		line-height: 1.5;
		text-align: center;
		letter-spacing: normal;
	}
	.campaign-description {
		margin: 0;
		line-height: 1.8;
		text-align: center;
		font-weight: 700;
	}
	.campaign-detail-list {
		margin: 0;
		padding: 16px 16px 16px calc(16px + 1.5em);
		font-size: 1.2rem;
		line-height: 1.5;
		background-color: var(--color-white);
		> li + li {
			margin: 4px 0 0 0;
		}
	}
	.campaign-decoration {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		span {
			position: absolute;
			top: 6px;
			left: 10px;
			transform: rotate(-30deg);
			width: 40px;
			height: 32px;
			pointer-events: none;
			background-image: url(../img/ribon.svg);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center;
		}
		&::before,
		&::after {
			position: absolute;
			transform: rotate(-30deg);
			content: '';
			display: block;
			width: 80px;
			height: 4px;
			background-color: var(--color-black);
		}
		&::before {
			top: 14px;
			left: -6px;
		}
		&::after {
			right: -6px;
			bottom: 10px;
		}
	}
	@media (min-width: 768px) {
		justify-content: center;
	}
}



/* ==============================
Payment Options
============================== */
.payment-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 32px;
	border-radius: 8px;
	border: solid 1px var(--color-gray-c);
	background-color: var(--color-white);
	.card-title {
		margin: 0;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 2rem;
		line-height: 1.5;
		text-align: center;
	}
	.payment-image {
		img {
			aspect-ratio: 20/ 19;
		}
	}
	.payment-description {
		margin: 0;
	}
	.payment-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0 0 0 1.5em;
		line-height: 1.6;
	}
	&.payment-timing {
		margin: 16px 0 0 0;
	}
	@media (min-width: 768px) {
		&.payment-timing {
			justify-content: center;
		}
	}
}
@media (min-width: 768px) and (max-width: 959px){
	.section-payment {
		.contents-width {
			display: flex;
			flex-wrap: wrap;
			.section-title {
				width: 100%;
			}
			.payment-card {
				&.payment-location {
					width: 52%;
				}
				&.payment-timing {
					justify-content: flex-start;
					margin: 0 0 0 24px;
					width: calc(48% - 24px);
				}
			}
		}
	}
}



/* ==============================
FAQ
============================== */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	.faq-item {
		overflow: hidden;
		border-radius: 8px;
		transition: all 0.3s ease;
		.faq-question {
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.8rem;
			padding: 24px 16px 24px 56px;
			cursor: pointer;
			.faq-icon {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 0.5em 0.8rem 0;
				width: 4.8rem;
				font-size: 2rem;
				line-height: 4rem;
				color: var(--color-white);
				text-align: center;
				letter-spacing: normal;
				background-color: var(--color-beige-dark);
				border-radius: 0 0 100% 0;
				transition: all 0.3s ease;
			}
			.faq-text {
				width: calc(100% - 2.8rem);
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				line-height: 1.8;
			}
			.faq-toggle-icon {
				position: relative;
				width: 2rem;
				height: 2rem;
				&::before,
				&::after {
					position: absolute;
					top: 50%;
					content: '';
					display: block;
					width: 100%;
					height: 0.2rem;
					background-color: var(--color-beige-dark);
					transition: all 0.3s ease;
				}
				&::after {
					transform: rotate(-90deg);
				}
			}
			.faq-toggle-icon {
				margin-left: auto;
				font-size: 2rem;
				line-height: 1;
			}
			&:hover {
				.faq-toggle-icon {
					&::after {
						transform: rotate(90deg);
					}
				}
			}
		}
		&.is-open {
			color: var(--color-white);
			background-color: var(--color-beige-dark);
			.faq-question {
				.faq-icon {
					color: var(--color-beige-dark);
					background-color: var(--color-white);
				}
				.faq-toggle-icon {
					&::before,
					&::after {
						background-color: var(--color-white);
					}
					&::after {
						transform: rotate(360deg);
					}
				}
				&:hover {
					.faq-toggle-icon {
						&::after {
							transform: rotate(540deg);
						}
					}
				}
			}
		}

		.faq-answer {
			display: none;
			margin: 0 16px 24px 56px;
			padding: 24px;
			line-height: 1.8;
			color: var(--color-base-text);
			border-radius: 8px;
			background-color: var(--color-white);
			.faq-item.is-open & {
				display: block;
			}
		}
	}
	@media (min-width: 768px) {
		.faq-item {
			.faq-question {
				padding: 24px 24px 24px 64px;
				.faq-icon {
					width: 5.6rem;
					font-size: 2.4rem;
					line-height: 4.8rem;
				}
				.faq-text {
					font-size: 2rem;
				}
			}
			.faq-answer {
				margin: 0 24px 24px 64px;
			}
		}
	}
}



/* ==============================
footer
============================== */
.footer {
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--color-white);
	background-color: var(--color-beige-dark);
	.footer-inner {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-right: auto;
		margin-left: auto;
		padding: 56px 0 24px;
		width: calc(100% - 32px);
		.corporate-info-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 32px;
			.footer-logo {
				margin: 0;
				width: 200px;
				a {
					display: block;
				}
			}
			.footer-info-description {
				display: flex;
				flex-direction: column;
				gap: 8px;
				.text-company-name {
					margin: 0;
					font-weight: 700;
					text-align: center;
				}
				.corporate-info-table {
					border-collapse: collapse;
					width: 100%;
					font-size: 1.2rem;
					th,
					td {
						padding: 8px 0;
						border-style: solid;
						border-width: 0 0 1px 0;
						border-color: var(--color-white-transparent);
					}
					th {
						padding-right: 1em;
					}
				}
			}
		}
		.footer-nav-wrapper {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			.footer-nav-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1em;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					a {
						display: block;
						text-decoration: none;
						color: var(--color-white);
					}
				}
			}
			.text-copyright {
				margin: 0;
				font-size: 1rem;
				text-align: center;
			}
		}
	}
	@media (min-width: 768px) {
		.footer-inner {
			flex-direction: row;
			justify-content: space-between;
			padding: 40px 0;
			width: calc(100% - 80px);
			.corporate-info-wrapper {
				flex-direction: row;
				.footer-info-description {
					.text-company-name {
						text-align: left;
					}
				}
			}
			.footer-nav-wrapper {
				justify-content: space-between;
				.footer-nav-list {
					align-items: flex-end;
				}
				.text-copyright {
					font-size: 1.2rem;
				}
			}
		}
	}
}