@charset "utf-8";

/* =========================================
* ページ全体の共通パーツ
* ======================================== */
html {
	scroll-padding-top: var(--header-height);
	/* 追従メニューの高さに応じて適切な値を設定 */
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--main-txt);
	text-align: justify;
	line-height: 170%;
	font-weight: 500;
}

main {
	margin-top: var(--header-height);
	overflow: clip;
}

section {
	padding-block: var(--m56-40);
	display: flex;
	justify-content: center;
	align-items: center;
}

a {
	text-decoration: none;
	color: inherit;
}


img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	vertical-align: bottom;
}

.container {
	width: var(--content-width);
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--m40-24);
}

@media(max-width:768px) {

	.u-sp-none {
		display: none !important;
	}
}

@media(min-width:769px) {
	.u-pc-none {
		display: none !important;
	}
}

.u-txtC {
	text-align: center;
}

.u-txtR {
	text-align: right;
}

.u-txtL {
	text-align: left;
}

.u-txtJ {
	text-align: justify;
}


/* フレックス関連
* ---------------------------------- */
.u-flex {
	display: flex;
}

.u-pc-flex {
	display: flex;
}

@media (max-width: 768px) {

	.u-pc-flex {
		flex-direction: column;
	}
}


.u-flexR {
	flex-direction: row-reverse;
}

.u-justC {
	justify-content: center;
}

.u-justS {
	justify-content: flex-start;
}

.u-justE {
	justify-content: flex-end;
}

.u-justB {
	justify-content: space-between;
}

.u-justA {
	justify-content: space-around;
}

.u-flexW {
	flex-wrap: wrap;
}

.u-alignS {
	align-items: start;
}

.u-alignC {
	align-items: center;
}

.u-alignB {
	align-items: flex-end;
}

/* グリッド関連
* ---------------------------------- */
.u-grid-center {
	display: grid;
	place-items: center;
}



/* =========================================
* 共通パーツ
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
	--main-color: #002C6A;
	--bg-color: #F1F3F6;
	--base-yellow: #FCE84F;
	--accent-blue: #195EAB;
	--accent-orange: #FD9337;
	--accent-yellow: #F5EC3E;
	--accent-red: #EC3947;
	--en-txt: "Bowlby One", sans-serif;
	--kunoji: rotate(45deg) translateY(-50%);
	--transition-base: color .4s, background-color .4s, border-color .4s, transform .4s, opacity .4s;
	--content-width: min(92vw, 1080px);
	--side-space: calc((100vw - var(--content-width)) / 2);
	--header-height: 70px;
	--main-txt: 16px;
	--m56-40: 56px;
	--m40-32: 40px;
	--m40-24: 40px;
	--m40-16: 40px;
	--m32-24: 32px;
	--m24-16: 24px;
	--m16-8: 16px;
}


/* テキストまわり
* ---------------------------------- */

/* --- 見出し --- */
.section-midashi {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--m16-8);
	position: relative;

	p {
		color: transparent;
		font-family: var(--en-txt);
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: var(--accent-blue);
		font-size: 32px;
		font-weight: 400;
		position: relative;
		z-index: 1;
	}

	h2 {
		font-size: 64px;
		line-height: 120%;
		font-weight: 900;
		color: var(--accent-blue);
		position: relative;
		z-index: 1;
	}
}

.fukidashi-midashi {
	display: flex;
	flex-direction: column;
	align-items: center;

	.fukidashi-wrap {
		display: flex;
		justify-content: center;
		gap: 56px;
	}

	span {
		font-size: 32px;
		color: var(--base-yellow);
		font-weight: 700;
		display: block;
	}

	h2 {
		font-size: 96px;
		color: #fff;
		font-weight: 900;
		line-height: 150%;
	}

	.fukidashi-midashi-txt {
		display: flex;
		align-items: center;
		gap: 12px;

		p {
			font-size: 22px;
			font-weight: 900;
			color: var(--accent-blue);
			background-color: var(--base-yellow);
			padding: 4px 12px;
			line-height: 150%;
			width: 210px;
			border-radius: 8px;
		}
	}

}

/* --- 普通のリスト --- */
ul.normal-list {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.normal-list li {
	list-style-type: disc;
	list-style-position: inside;
}

/* --- 注釈 --- */
ul.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
	font-size: 12px;
	line-height: 150%;
}

p.note {
	font-size: 12px;
	line-height: 170%;
	text-align: justify;
}

a.inline-link {
	color: var(--sub-color);
	text-decoration: underline;
}

/* ボタン
* ---------------------------------- */
.cta-btn {
	color: #fff;
	background-color: var(--accent-blue);
	display: flex;
	align-items: center;
	width: fit-content;
	margin-inline: auto;
	padding: 12px 16px 12px 56px;
	gap: var(--m24-16);
	border: 3px #fff solid;
	box-shadow: 0 4px 4px 0 #a78970;
	border-radius: 80px;
	transition: var(--transition-base);

	p {
		font-size: 32px;
		font-weight: 700;
		line-height: 150%;
	}

	&:hover {
		color: var(--accent-blue);
		background-color: #fff;
		border: 3px solid var(--accent-blue);
	}
}

.orange-btn,
.red-btn {
	color: #fff;
	display: flex;
	align-items: center;
	width: fit-content;
	margin: var(--m16-8) auto 0 auto;
	padding: 8px 16px 8px 32px;
	gap: var(--m16-8);
	box-shadow: 0 4px 4px 0 #D9D9D9;
	border-radius: 80px;
	transition: var(--transition-base);

	p {
		font-size: 22px;
		font-weight: 700;
		line-height: 150%;
	}

	&:hover {
		background-color: #fff;
	}
}

.orange-btn {
	background-color: var(--accent-orange);
	border: 2px var(--accent-orange) solid;

	&:hover {
		color: var(--accent-orange);
	}
}

.red-btn {
	background-color: var(--accent-red);
	border: 2px var(--accent-red) solid;

	&:hover {
		color: var(--accent-red);
	}
}

a,
button {
	.circle-kunoji {
		aspect-ratio: 1/1;
		background-color: currentColor;
		min-width: 48px;
		border-radius: 50%;
		position: relative;

		.cta-btn & {
			min-width: 64px;
		}

		&::after {
			content: "";
			transform: rotate(45deg) translate(-50%);
			position: absolute;
			top: 48%;
			left: 42%;
			width: .8em;
			height: .8em;
			transition: var(--transition-base);
		}

		.orange-btn &::after {
			border-top: 3px solid var(--accent-orange);
			border-right: 3px solid var(--accent-orange);
		}

		.red-btn &::after {
			border-top: 3px solid var(--accent-red);
			border-right: 3px solid var(--accent-red);
		}

		.cta-btn &::after {
			border-top: 3px solid var(--accent-blue);
			border-right: 3px solid var(--accent-blue);
		}
	}

	&:hover {
		.circle-kunoji::after {
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
		}
	}
}

/* --- テーブル関連 --- */
.small-table {
	display: flex;
	color: var(--accent-blue);
	font-weight: 500;
	text-align: left;
	margin-bottom: 4px;

	dt p {
		white-space: nowrap;
		line-height: 170%;
	}
}

.normal-table {
	width: 100%;
	background-color: #fff;

	th,
	td {
		padding: .4em;
		font-weight: 500;
	}

	thead {
		th {
			background-color: var(--accent-blue);
			color: #fff;
			border-right: 1px solid #fff;

			&:last-child {
				border-right: none;
			}
		}
	}

	tbody {
		tr {
			border-bottom: 1px solid #000;

			th {
				border-right: 1px solid #000;
			}
		}
	}
}


/* =========================================
* ヘッダー
* ======================================== */
header {
	background-color: var(--main-color);
	color: #fff;
	height: var(--header-height);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	z-index: 1000;
	padding: 0 var(--m24-16);

	.header-contents {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		width: 100%;

		.logo-img {
			display: block;
			width: 224px;
			margin-inline: 24px;
		}

		.header-nav {
			ul {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100%;
				width: 100%;

				li {
					position: relative;

					&::after {
						content: "";
						position: absolute;
						width: 1px;
						height: 100%;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						background-color: #fff;
					}

					a {
						padding-inline: 24px;
						transition: var(--transition-base);
						font-size: min(1.6vw, 16px);
						display: block;

						&:hover {
							opacity: .5;
						}
					}

					&:last-child::after {
						display: none;
					}
				}
			}
		}
	}
}

/* =========================================
* メインビジュアル
* ======================================== */
.mv-area {
	background-color: var(--base-yellow);
	padding-block: var(--m56-40);
	position: relative;

	.kv-img {
		display: block;
		margin-inline: auto;
		text-align: center;
		width: 60.9vw;
		position: relative;
		z-index: 1;
		aspect-ratio: 171 / 67;

		img {
			width: 100%;
		}
	}

	.mv-cp-circle {
		display: block;
		aspect-ratio: 1/1;
		width: 20.9vw;
		position: absolute;
		right: min(5vw, 64px);
		bottom: max(-8.6vw, -110px);
		z-index: 2;
	}

	&::before,
	&::after {
		content: "";
		display: block;
		width: 30vw;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		position: absolute;
		top: 0;
	}

	&::before {
		background-image: url(../imgs/mv_sidebg01.webp);
		left: 0;
	}

	&::after {
		background-image: url(../imgs/mv_sidebg02.webp);
		right: 0;
	}
}

/* =========================================
* 成績アップの秘訣
* ======================================== */
.method-area {
	background-color: var(--bg-color);

	.section-midashi {
		margin-top: 40px;

		.icon-up-bg {
			position: absolute;
			width: 270px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.method-wrap {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 2.2vw;

		.method-col {
			padding: var(--m24-16) var(--m32-24);
			background-color: #fff;
			border-radius: 16px;
			border: 2px solid #CCD5E1;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;

			.point-txt {
				color: #fff;
				font-size: min(3.6vw, 32px);
				-webkit-text-stroke-width: 1.5px;
				-webkit-text-stroke-color: var(--accent-blue);
				font-family: var(--en-txt);
				font-weight: 400;
				line-height: 100%;
			}

			.icon-method {
				display: block;
				height: 72px;
				margin-inline: auto;
			}

			.method-txt {
				h3 {
					font-size: min(2.8vw, 32px);
					font-weight: 900;
					line-height: 150%;
					color: var(--accent-blue);
				}

				p {
					font-size: min(2.2vw, 20px);
					font-weight: 400;
					line-height: 170%;

				}
			}
		}
	}
}

/* =========================================
* 学年に合わせた「伸びる」指導
* ======================================== */
.course-area {
	background-color: var(--base-yellow);

	.section-midashi {
		h2 {
			font-size: 52px;
		}
	}

	ul.note {
		margin-top: var(--m16-8);
	}

	.summer-cp-wrap {
		width: 100%;
		padding: var(--m32-24);
		border-radius: var(--m24-16);
		border: solid 6px var(--accent-red);
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 8px;
		background-image:
			repeating-linear-gradient(to right,
				#fff0bf 0 1px,
				transparent 1px 56px),
			repeating-linear-gradient(to bottom,
				#fff0bf 0 4px,
				transparent 4px 7px);

		.himawari-img01,
		.himawari-img02 {
			position: absolute;
			width: min(17.9vw, 193px);
			top: 0;
		}

		.himawari-img01 {
			left: -16px;
		}

		.himawari-img02 {
			transform: scaleX(-1);
			right: -16px;
		}

		h3 {
			font-size: min(4.4vw, 48px);
			line-height: 120%;
			font-weight: 700;
			color: var(--accent-red);
		}

		.cp-txt-img {
			display: block;
			margin-inline: auto;
			width: min(79%, 849px);

			img {
				width: 100%;
			}
		}

		p.note {
			font-size: 12px;
			text-align: justify;

			span {
				color: var(--accent-red);
			}
		}
	}
}


/* カード（公開説明会）と共通
* ---------------------------------- */
.tab-btn-wrap {
	display: flex;
	gap: 8px;
	position: relative;
	z-index: 1;
	margin-bottom: 32px;

	.tab-btn {
		flex: 1;
		appearance: none;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		border: 2px solid var(--accent-orange);
		border-radius: 80px;
		background-color: #fff;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
		color: var(--accent-orange);
		font-size: 18px;
		font-weight: 900;
		line-height: 150%;
		text-align: center;
		transition: var(--transition-base);

		&::after {
			content: "";
			position: absolute;
			top: calc(100% - 1px);
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-top: 12px solid var(--accent-orange);
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			opacity: 0;
			transition: var(--transition-base);
		}

		&.is-active {
			background-color: var(--accent-orange);
			color: #fff;

			&::after {
				opacity: 1;
			}
		}
	}
}

.tab-card-wrap {
	display: flex;
	gap: min(3.7vw, 40px);

	.tab-card-col {
		flex: 1;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25);
		background-color: var(--bg-color);

		.card-col-img {
			aspect-ratio: 13 / 8;
			width: 100%;
			position: relative;

			img {
				display: block;
				object-fit: cover;
				width: 100%;
			}

			p {
				-webkit-text-stroke-width: 2px;
				-webkit-text-stroke-color: var(--bg-color);
				line-height: 100%;
				letter-spacing: 1.12px;
				font-weight: 400;
				font-family: var(--en-txt);
				position: absolute;
				bottom: -.2em;
				right: 0;
				font-size: 56px;
				color: transparent;
			}
		}

		.card-col-txt {
			padding: var(--m32-24);
			display: flex;
			flex-direction: column;
			gap: var(--m24-16);

			hgroup {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16px;

				p {
					display: inline-block;
					background-color: var(--accent-blue);
					padding: .2em var(--m24-16);
					border-radius: 44px;
					font-size: min(1.8vw, 22px);
					font-weight: 900;
					color: #fff;

					.infosession-area & {
						color: var(--base-yellow);
					}
				}

				h3 {
					font-size: min(3.2vw, 40px);
					color: var(--accent-blue);
					font-weight: 700;
					display: flex;
					align-items: center;
					font-style: normal;

					span.card-icon {
						display: inline-block;
						height: 1.2em;
						margin-right: 8px;

						img {
							height: 100%;
						}
					}

					span.case-particle {
						font-size: .8em;
						vertical-align: baseline;
					}

				}
			}

			>p {
				text-align: justify;
				font-weight: 400;
			}

			.course-list {
				display: flex;
				flex-direction: column;
				gap: 8px;

				.course-list-col {
					background-color: var(--accent-blue);
					color: #fff;
					font-size: min(2vw, 22px);
					font-weight: 900;
					border-radius: 8px;
					padding: .4em;

					sup {
						vertical-align: top;
					}

					span {
						font-size: .73em;
						font-weight: 400
					}
				}
			}

			.infosession-detail {
				h4 {
					font-size: 22px;
					font-weight: 900;
					margin-bottom: var(--m16-8);
					color: var(--accent-blue);
				}

				h5 {
					color: #fff;
					background-color: var(--accent-blue);
					font-size: 20px;
					font-weight: 900;
					padding: .3em;
					margin-bottom: 8px;
				}

				.school-btn-wrap {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					margin-bottom: var(--m32-24);
					gap: 12px;

					&:last-child {
						margin-bottom: 0;
					}

					.school-btn {
						display: block;
						border-radius: 40px;
						width: 100%;
						padding: .5em;
						background-color: #fff;
						border: 1px solid var(--accent-blue);
						color: var(--accent-blue);
						transition: var(--transition-base);
						box-shadow: 0 4px 4px 0 #D9D9D9;

						&:hover {
							background-color: var(--accent-blue);
							color: #fff;
						}
					}
				}
			}
		}
	}

	+.note {
		margin-top: var(--m16-8);
	}
}

/* =========================================
* 無料体験授業
* ======================================== */
.trial-area {
	background-color: var(--accent-orange);
	position: relative;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 270px;
		background-color: color-mix(in srgb, var(--accent-orange) 50%, #F97113);
		clip-path: shape(from 0 0,
				line to 100% 0,
				line to 100% calc(100% - 64px),
				curve to 50% calc(100% - 64px) with 75% calc(100% - 128px),
				curve to 0 calc(100% - 64px) with 25% 100%,
				close);
	}

	.container {
		position: relative;
		z-index: 1;
	}

	.fukidashi-midashi {

		.fukidashi-wrap {
			.fukidashi-img:first-child {
				width: 235px;
			}

			.fukidashi-img:nth-child(2) {
				width: 240px;
			}
		}

	}

	.trial-wrap {
		width: 100%;
		position: relative;

		.trial-img {
			position: absolute;
			right: 0;
			bottom: max(-1.6vw, -17px);
			aspect-ratio: 41 / 50;
			border-radius: 16px;
			box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25);
			width: min(30.4vw, 328px);
			object-fit: cover;
		}

		.trial-white-wrap {
			width: min(75%, 808px);
			background-color: #fff;
			padding: 32px 80px 32px 32px;
			position: relative;
			margin-top: 80px;
			text-align: left;
			border-radius: 16px;

			.icon-stationery {
				position: absolute;
				width: min(44.4vw, 480px);
				left: var(--m32-24);
				top: max(-6.4vw, -70px);
			}

			h3 {
				font-size: min(3vw, 32px);
				color: var(--accent-blue);
				font-weight: 700;
				line-height: 150%;
				margin-bottom: 8px;

				+p {
					margin-bottom: 8px;
				}
			}

		}
	}
}

/* =========================================
* 公開説明会
* ======================================== */
.infosession-area {
	position: relative;
	background-color: var(--accent-yellow);

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 270px;
		background-color: color-mix(in srgb, var(--accent-yellow), #fff 30%);
		clip-path: shape(from 0 0,
				line to 100% 0,
				line to 100% calc(100% - 64px),
				curve to 50% calc(100% - 64px) with 75% calc(100% - 128px),
				curve to 0 calc(100% - 64px) with 25% 100%,
				close);
	}

	.container {
		position: relative;
		z-index: 1;
	}

	.fukidashi-midashi {

		.fukidashi-wrap {
			.fukidashi-img {
				width: 380px;
			}
		}

		h2 {
			color: var(--accent-blue);
		}

		.fukidashi-midashi-txt {
			display: flex;
			align-items: center;
			gap: 12px;

			p {
				color: #fff;
				background-color: var(--accent-blue);
			}
		}
	}

	.orange-btn {
		p {
			font-size: min(2.2vw, 22px);
		}
	}

	.banner-link {
		display: block;
		width: min(100%, 900px);
		transition: all .4s;
		margin-inline: auto;
		border-radius: var(--m24-16);
		border: solid 4px #fff;
		overflow: hidden;
		box-shadow: 8px 8px 24px 0 #DCD438;

		&:hover {
			filter: brightness(110%);
		}
	}
}

/* =========================================
* フッター
* ======================================== */
footer {
	background-color: var(--main-color);
	color: #fff;
	width: 100%;
	padding: 1em;
	display: grid;
	place-items: center;
	font-size: 12px;
}

@media (max-width: 768px) {

	/* =========================================
* 共通パーツ
* ======================================== */

	/* 変数
* ---------------------------------- */
	:root {
		--header-height: 56px;
		--main-txt: 14px;
		--m56-40: 40px;
		--m40-32: 32px;
		--m40-24: 24px;
		--m40-16: 16px;
		--m32-24: 24px;
		--m24-16: 24px;
		--m16-8: 8px;
	}

	/* テキストまわり
* ---------------------------------- */

	/* --- 見出し --- */
	.section-midashi {

		p {
			-webkit-text-stroke-width: 1.5px;
			-webkit-text-stroke-color: var(--accent-blue);
			font-size: 20px;
		}

		h2 {
			font-size: 44px;
		}
	}


	.fukidashi-midashi {

		.fukidashi-wrap {
			gap: 16px;
		}

		span {
			font-size: 18px;
		}

		h2 {
			font-size: 44px;
		}

		.fukidashi-midashi-txt {
			gap: 4px;

			p {
				font-size: 18px;
				padding: 0px 4px;
				width: 90px;
				border-radius: 4px;
			}
		}

	}

	/* ボタン
* ---------------------------------- */
	.cta-btn {
		padding: 16px 16px 16px 32px;
		border: 2px #fff solid;

		p {
			font-size: 20px;
		}

		&:hover {
			border: 2px solid var(--accent-blue);
		}
	}

	.orange-btn,
	.red-btn {
		padding: 16px 16px 16px 32px;

		p {
			font-size: 18px;
		}
	}


	a,
	button {
		.circle-kunoji {
			min-width: 24px;

			.cta-btn & {
				min-width: 32px;
			}

			&::after {
				top: 46%;
				left: 40%;
				width: .5em;
				height: .5em;
				transition: var(--transition-base);
			}

			.orange-btn &::after {
				border-top: 2px solid var(--accent-orange);
				border-right: 2px solid var(--accent-orange);
			}

			.red-btn &::after {
				border-top: 2px solid var(--accent-red);
				border-right: 2px solid var(--accent-red);
			}

			.cta-btn &::after {
				border-top: 2px solid var(--accent-blue);
				border-right: 2px solid var(--accent-blue);
			}
		}

		&:hover {
			.circle-kunoji::after {
				border-top: 2px solid #fff;
				border-right: 2px solid #fff;
			}
		}
	}

	/* =========================================
	* ヘッダー
	* ======================================== */
	header {
		.header-contents {

			.logo-img {
				width: 166px;
				margin-inline: 0;
			}

			.header-nav {
				position: fixed;
				background-color: var(--main-color);
				width: 100%;
				top: var(--header-height);
				height: auto;
				transition: right 0.3s ease-in-out;
				right: -100%;
				padding: 0 16px 8px 16px;

				&.active {
					right: 0;
				}

				ul {
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					height: auto;

					li {
						width: 100%;

						&::after {
							width: 100%;
							height: 1px;
							right: 0;
							top: auto;
							bottom: 0;
							transform: translateY(0);
						}

						a {
							padding: 8px 0;
							font-size: 14px;
						}

						&:last-child::after {
							display: none;
						}
					}
				}
			}
		}
	}


	/* ハンバーガー
* ---------------------------------- */

	/* --- 3本線を囲ってる正方形を囲ってる正方形 --- */
	.burger {
		position: absolute;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--header-height);
		height: var(--header-height);
		right: 0;
		top: 0;
		z-index: 100001;
	}

	/* --- 3本線を囲ってる正方形(widthが3本線の長さになる) --- */

	.burger-wrap {
		width: 25px;
		height: 25px;
		position: relative;
		margin: auto;
	}

	.burger {
		span {
			display: inline-block;
			transition: var(--transition-base);
			height: 2px;
			width: 25px;
			background-color: #fff;
			position: absolute;

			&:nth-of-type(1) {
				top: 3px;
			}

			&:nth-of-type(2) {
				top: 11px;
			}

			&:nth-of-type(3) {
				bottom: 3px;
			}
		}

		&.active span {
			&:nth-of-type(1) {
				-webkit-transform: translateY(20px) rotate(315deg);
				transform: translateY(20px) rotate(315deg);
				top: -9px;
			}

			&:nth-of-type(2) {
				opacity: 0;
			}

			&:nth-of-type(3) {
				-webkit-transform: translateY(-20px) rotate(-315deg);
				transform: translateY(-20px) rotate(-315deg);
				bottom: -8px;
			}
		}
	}

	/* =========================================
* メインビジュアル
* ======================================== */
	.mv-area {
		.kv-img {
			width: 74.9vw;
			aspect-ratio: 192 / 253;
		}

		.mv-cp-circle {
			width: min(40vw, 240px);
			right: 3.1vw;
			bottom: -8vw;
			z-index: 2;
		}

		&::before,
		&::after {
			width: 36.9vw;
		}
	}

	/* =========================================
* 成績アップの秘訣
* ======================================== */
	.method-area {

		.section-midashi {
			margin-top: 16px;

			.icon-up-bg {
				width: 210px;
			}
		}

		.method-wrap {
			grid-template-columns: repeat(1, 1fr);
			gap: 16px;

			.method-col {
				border-radius: 12px;
				gap: 4px;

				.point-txt {
					font-size: 20px;
				}

				.method-txt {
					h3 {
						font-size: 24px;
					}

					p {
						font-size: 14px;
					}
				}
			}
		}
	}

	/* =========================================
* 学年に合わせた「伸びる」指導
* ======================================== */
	.course-area {

		.section-midashi {
			h2 {
				font-size: 36px;
			}
		}

		.summer-cp-wrap {
			background-image:
				repeating-linear-gradient(to right,
					#fff0bf 0 1px,
					transparent 1px 56px),
				repeating-linear-gradient(to bottom,
					#fff0bf 0 6px,
					transparent 5px 10px);

			.himawari-img01,
			.himawari-img02 {
				width: max(24.6vw, 96px);
			}


			h3 {
				font-size: 36px;
			}

			.cp-txt-img {
				width: min(100%, 600px);

			}

		}
	}

	/* カード（公開説明会）と共通
* ---------------------------------- */

	.tab-card-wrap {
		display: block;

		.tab-card-col {
			border-radius: 12px;
			box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25);

			.card-col-img {
				aspect-ratio: 43 / 27;

				p {
					font-size: 36px;
					bottom: -.1em;
				}
			}

			.card-col-txt {
				gap: var(--m24-16);

				hgroup {

					p {
						font-size: 18px;
					}

					h3 {
						font-size: 27px;
					}
				}

				.course-list {
					gap: 4px;

					.course-list-col {
						font-size: 18px;
						border-radius: 4px;
					}
				}

				.infosession-detail {
					h4 {
						font-size: 18px;
					}

					h5 {
						font-size: 18px;
					}

					.school-btn-wrap {
						gap: 8px;
					}
				}
			}
		}
	}

	/* =========================================
* 無料体験授業
* ======================================== */
	.trial-area {
		.fukidashi-midashi {

			.fukidashi-wrap {
				.fukidashi-img:first-child {
					width: max(39vw, 152px);
				}

				.fukidashi-img:nth-child(2) {
					width: max(35.9vw, 140px);
				}
			}

		}

		.trial-wrap {

			.trial-img {
				position: unset;
				aspect-ratio: 37 / 27;
				border-radius: 12px;
				box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25);
				width: 100%;
				margin: 24px auto;
			}

			.trial-white-wrap {
				width: 100%;
				background-color: #fff;
				padding: 32px 24px;
				margin-top: max(10.3vw, 40px);
				border-radius: 12px;

				.icon-stationery {
					width: max(61.5vw, 240px);
					top: min(-8vw, -35px);
				}

				h3 {
					font-size: 24px;

				}

			}
		}

		.cta-btn {
			gap: 12px;
		}
	}

	/* =========================================
* 公開説明会
* ======================================== */
	.infosession-area {
		.fukidashi-midashi {

			.fukidashi-wrap {
				.fukidashi-img {
					width: max(52.3vw, 204px);
				}
			}

			.fukidashi-midashi-txt {
				gap: 4px;
			}
		}

		.orange-btn {
			p {
				font-size: 18px;
			}
		}
	}
}