@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.top-key-image { margin-top: 120px; }

.top-key-image .swiper-slide {
	background-color: #fff;
	height: 665px;
	position: relative;
}

.top-key-image .swiper-slide .inner { color: #455461; }

.top-key-image .swiper-slide h2 {
	font-size: 56px;
	letter-spacing: 2px;
	line-height: 1.4;
}

.top-key-image .swiper-slide .gradation {
	background: linear-gradient(90deg,#9673F1 0%, #70DCF0 34.13%, #00B4DC 59.13%, #9673F1 100%);
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent;
	display: inline-block;
	-webkit-text-fill-color: transparent !important;
}

.top-key-image .swiper-slide p {
	font-size: 18px;
	font-weight: var(--Bold);
	margin-top: 12px;
}

.top-key-image .swiper-slide .banner-area {
	display: flex;
	gap: 8px;
	margin-top: 40px;
}

.top-key-image .swiper-slide .banner-area .main-banner a { min-width: 280px; }

.top-key-image .swiper-slide .details-list {
	display: flex;
	margin-top: 40px;
}

.top-key-image .swiper-slide .details-list section:first-of-type { padding-right: 20px; }

.top-key-image .swiper-slide .details-list section:nth-of-type(n+2) {
	border-left: 1px solid var(--color-border);
	padding-left: 20px;
	padding-right: 20px;
}

.top-key-image .swiper-slide .details-list section { text-align: center; }

.top-key-image .swiper-slide .details-list section .icon {
	display: flex;
	height: 80px;
	justify-content: center;
}

.top-key-image .swiper-slide .details-list section .icon img {
	max-width: 64px;
}

.top-key-image .swiper-slide .details-list section h3 {
	font-size: 10px;
	font-weight: var(--Bold);
	margin-top: 8px;
}

.top-key-image .key-image-01::after {
	background: url(../images/top/key-image-01.jpg) no-repeat right bottom;
	background-size: 1153px auto;
	content: '';
	display: block;
	filter: blur(10px);
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transform: translateX(50px);
	transition: all 1s cubic-bezier(.5, 1, .89, 1);
	width: 100%;
	z-index: -1;
}

.top-key-image .key-image-01 .inner { padding-top: 108px; }

.top-key-image .key-image-02 .inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}

.top-key-image .key-image-02::after {
	background: url(../images/top/key-image-02.webp) no-repeat right center;
	background-size: 100% auto;
	content: '';
	display: block;
	filter: blur(10px);
	height: 100%;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(50px);
	transition: all 1s cubic-bezier(.5, 1, .89, 1);
	width: 47.333vw;
}

.top-key-image .key-image-02 .particle {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.top-key-image .key-image-02 .particle #wave-top {
	height: calc(100% + 119px);
	left: 19.333vw;
	position: absolute;
	top: -93px;
	width: 100%;
}

.top-key-image .key-image-02 .particle #wave-bottom {
	height: calc(100% + 119px);
	left: -781px;
	position: absolute;
	top: 220px;
	width: 100%;
}

.top-key-image .animate-element {
	filter: blur(10px);
	opacity: 0;
	transform: translateX(-50px);
	transition: all 1s cubic-bezier(.5, 1, .89, 1);
}

.top-key-image .animate-element.is-animate,
.top-key-image .key-image-01.is-animate::after,
.top-key-image .key-image-02.is-animate::after {
	filter: blur(0);
	opacity: 1;
	transform: translateY(0) translateX(0);
}

.top-key-image .animate-element.no-trans,
.top-key-image .key-image-01.no-trans::after { transition: none !important; }

@media (max-width: 1099px) {

	.top-key-image {
		margin-top: 0;
		overflow: hidden;
		padding-top: 18.633vw;
	}

	.top-key-image .swiper-container { overflow: visible; }

	.top-key-image .swiper-slide .inner {
		padding-left: 5.128vw;
		padding-right: 5.128vw;
	}

	.top-key-image .swiper-slide { height: 153.59vw; }

	.top-key-image .swiper-slide h2 {
		font-size: 7.179vw;
	}

	.top-key-image .swiper-slide p {
		font-size: 4.103vw;
		font-weight: var(--Medium);
		margin-top: 4.103vw;
	}

	.top-key-image .swiper-slide .banner-area {
		flex-direction: column;
		gap: 2.051vw;
		margin-top: 0;
		max-width: 60.718vw;
	}

	.top-key-image .swiper-slide .banner-area .main-banner a {
		font-size: 3.59vw;
		min-height: 14.359vw;
		min-width: 47.179vw;
		padding-right: 11.333vw;
		white-space: nowrap;
	}

	.top-key-image .swiper-slide .banner-area .banner.border.medium a {
		font-size: 3.59vw;
		max-width: 47.179vw;
		min-height: 14.359vw;
		min-width: 0;
		padding-right: 10.333vw;
		white-space: nowrap;
	}

	.top-key-image .swiper-slide .details-list { display: none; }

	.top-key-image .key-image-01 .inner {
		padding-top: 8.718vw;
		position: static;
	}

	.top-key-image .key-image-01::after {
		background-position: -54.667vw bottom;
		background-size: 219.333vw auto;
	}

	.top-key-image .key-image-01 .banner-area {
		bottom: 7.179vw;
		left: 5.128vw;
		position: absolute;
	}

	.top-key-image .key-image-02::after { width: 100%; }

	.top-key-image .key-image-02 .inner {
		display: block;
		padding-top: 4.615vw;
	}

	.top-key-image .key-image-02 .inner h2,
	.top-key-image .key-image-02 .inner p { text-align: center; }

	.top-key-image .key-image-02 .banner-area {
		align-items: center;
		bottom: 7.179vw;
		left: 19.897vw;
		position: absolute;
	}

	.top-key-image .key-image-02 .particle #wave-top {
		height: 100%;
		left: 1.333vw;
		top: -2.667vw;
		transform: rotate(22deg);
		width: 158%;
	}

	.top-key-image .key-image-02 .particle #wave-bottom {
		height: 140%;
		left: -65.667vw;
		top: 75.333vw;
		transform: rotate(-17deg);
		width: 233%;
	}

}

/* --------------------------------------------------------------------------------------
	共有パーツ
--------------------------------------------------------------------------------------- */

.main-head-title { text-align: center; }

.main-head-title strong {
	display: block;
	font-size: 36px;
	font-weight: var(--Bold);
}

.main-head-title .gradation {
	background: linear-gradient(90deg,#9673F1 0%, #70DCF0 34.13%, #00B4DC 59.13%, #9673F1 100%);
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent;
	display: inline-block;
	font-size: 18px;
	font-weight: var(--Bold);
	-webkit-text-fill-color: transparent !important;
}

@media (max-width: 1099px) {

	.main-head-title strong { font-size: 7.179vw; }

	.main-head-title .gradation { font-size: 3.59vw; }
}

/* --------------------------------------------------------------------------------------
	目的に合わせて選べる講座
--------------------------------------------------------------------------------------- */

.course-section h2 { padding-top: 64px; }

.course-section .course-slider { margin-top: 32px; }

.course-section .swiper-wrapper {
	counter-reset: number 0;
	padding-bottom: 72px;
}

.course-section .swiper-slide {
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 56px;
	position: relative;
}

.course-section .swiper-slide::before {
	background: linear-gradient(to right,  #fff, transparent 7%, transparent 85%, #fff),
		linear-gradient(to bottom, #fff, transparent 15%, transparent 85%, #fff);
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.course-section .swiper-slide.column-01 { background-image: url(../images/top/course-section-bg-01.png); }
.course-section .swiper-slide.column-02 { background-image: url(../images/top/course-section-bg-02.png); }
.course-section .swiper-slide.column-03 { background-image: url(../images/top/course-section-bg-03.png); }
.course-section .swiper-slide.column-04 { background-image: url(../images/top/course-section-bg-04.png); }

.course-section .swiper-slide .head-section {
	align-items: center;
	display: flex;
	gap: 58px;
	justify-content: center;
}

.course-section .swiper-slide .head-section section { width: 400px; }

.course-section .swiper-slide .head-section section h3 {
	font-size: 30px;
	font-weight: var(--Bold);
	padding-left: 74px;
	position: relative;
}

.course-section .swiper-slide .head-section section h3::before {
	background: var(--color-column-01);
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent;
	content: "0" counter(number);
	counter-increment: number 1;
	display: inline-block;
	font-size: 45px;
	left: 0;
	position: absolute;
	-webkit-text-fill-color: transparent !important;
	top: 50%;
	transform: translateY(-50%);
}

.course-section .swiper-slide .head-section section h3::after {
	background: var(--color-column-01);
	bottom: 13px;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	width: 54px;
}

.course-section .swiper-slide .head-section section h3 .gradation {
	background: var(--color-column-01);
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent;
	display: inline-block;
	-webkit-text-fill-color: transparent !important;
}

.course-section .swiper-slide .head-section section p { margin-top: 24px; }

.course-section .swiper-slide .head-section section .banner {
	margin-top: 24px;
}

.course-section .swiper-slide .head-section section .banner a { color: var(--color-text); }

@media (any-hover: hover) {
	.course-section .swiper-slide .head-section section .banner a:hover { color: #fff; }
}

.course-section .swiper-slide .head-section .image { aspect-ratio: 773 / 563; width: 440px; }

.course-section .swiper-slide .head-section .image img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.course-section .swiper-slide .course-details {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-top: 56px;
	position: relative;
}

.course-section .swiper-slide .course-details .column {
	align-items: center;
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	display: flex;
	justify-content: space-between;
	max-width: 240px;
	padding: 8px 16px;
	text-align: left;
	width: 100%;
}

.course-section .swiper-slide .course-details .column .icon { width: 54px; }

.course-section .swiper-slide .course-details .column dl { width: 69%; }

.course-section .swiper-slide .course-details .column dt {
	font-size: 14px;
	font-weight: var(--Bold);
}

.course-section .swiper-slide .course-details .column dd {
	font-size: 12px;
	margin-top: 2px;
}

.course-section .swiper-pagination { margin-bottom: 40px; }

:root {
	--color-column-01: linear-gradient(180deg, #00DD63 0%, #70DCF0 100%);
	--color-column-02: linear-gradient(180deg, #0794F9 0%, #70DCF0 100%);
	--color-column-03: linear-gradient(180deg, #F33D7D 0%, #A770F0 100%);
	--color-column-04: linear-gradient(180deg, #7F54F5 0%, #70DCF0 100%);
}

.course-section .swiper-slide.column-02 .head-section section h3::before,
.course-section .swiper-slide.column-02 .head-section section h3::after,
.course-section .swiper-slide.column-02 .head-section section h3 .gradation { background: var(--color-column-02); }

.course-section .swiper-slide.column-03 .head-section section h3::before,
.course-section .swiper-slide.column-03 .head-section section h3::after,
.course-section .swiper-slide.column-03 .head-section section h3 .gradation { background: var(--color-column-03); }

.course-section .swiper-slide.column-04 .head-section section h3::before,
.course-section .swiper-slide.column-04 .head-section section h3::after,
.course-section .swiper-slide.column-04 .head-section section h3 .gradation { background: var(--color-column-04); }

@media (max-width: 1099px) {

	.course-section .course-slider { margin-top: 6.154vw; }

	.course-section .swiper-wrapper { padding-bottom: 11.282vw; }

	.course-section .swiper-slide.column-01 { background-image: url(../images/top/course-section-bg-01-sp.png); }
	.course-section .swiper-slide.column-02 { background-image: url(../images/top/course-section-bg-02-sp.png); }
	.course-section .swiper-slide.column-03 { background-image: url(../images/top/course-section-bg-03-sp.png); }
	.course-section .swiper-slide.column-04 { background-image: url(../images/top/course-section-bg-04-sp.png); }

	.course-section .swiper-slide { padding: 0 5.128vw 0; }

	.course-section .swiper-slide .head-section {
		flex-direction: column;
		gap: 5.128vw;
	}

	.course-section .swiper-slide .head-section section { width: 100%; }

	.course-section .swiper-slide .head-section section h3 {
		font-size: 6.154vw;
		padding-left: 15.385vw;
	}

	.course-section .swiper-slide .head-section section h3::before { font-size: 9.231vw; }

	.course-section .swiper-slide .head-section section h3::after { width: 11.282vw; }

	.course-section .swiper-slide .head-section section p { margin-top: 5.128vw; }

	.course-section .swiper-slide .head-section section .banner { margin-top: 5.128vw; }

	.course-section .swiper-slide .head-section .image { aspect-ratio: 773 / 563; width: 100%; }

	.course-section .swiper-slide .course-details {
		flex-wrap: wrap;
		gap: 1.026vw 0;
		justify-content: space-between;
		margin-top: 7.333vw;
	}

	.course-section .swiper-slide .course-details .column {
		flex-wrap: wrap;
		max-width: 44.154vw;
		padding: 2.051vw 2.564vw 4.103vw;
	}

	.course-section .swiper-slide .course-details .column .icon { width: 13.846vw; }

	.course-section .swiper-slide .course-details .column dl {
		display: contents;
		width: auto;
	}

	.course-section .swiper-slide .course-details .column dt {
		font-size: 3.59vw;
		width: 22.333vw;
	}

	.course-section .swiper-slide .course-details .column dd {
		font-size: 2.977vw;
		margin-top: 2.026vw;
	}

	.course-section .swiper-pagination { margin-bottom: 10.256vw; }
}

/* --------------------------------------------------------------------------------------
	講座一覧
--------------------------------------------------------------------------------------- */

.lineup-list-wrap { padding-top: 64px; }

.lineup-list-wrap .lineup-list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 0;
	justify-content: space-between;
	margin-top: 32px;
}

.lineup-list-wrap .lineup-list > .accordion-plus {
	max-width: 49%;
	width: 100%;
}

.lineup-list-wrap .lineup-list > .accordion-plus.blue {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	overflow: hidden;
}

.lineup-list-wrap .lineup-list > .accordion-plus.blue:nth-of-type(n+2) { margin-top: 0; }

.lineup-list-wrap .lineup-list > .accordion-plus.blue summary {
	background-color: var(--color-blue);
	color: #fff;
}

.lineup-list-wrap .lineup-list > .accordion-plus.blue:nth-child(odd)[open]:has(+ details[open]),
.lineup-list-wrap .lineup-list > .accordion-plus.blue:nth-child(odd)[open] + .accordion-plus.blue[open] { background-color: #fff; }

.lineup-list-wrap .lineup-list > .accordion-plus.blue .accordion-menu { border-top: none; }

.lineup-list-wrap .text-section {
	margin-top: 32px;
	text-align: center;
}

.lineup-list-wrap .text-section .text {
	line-height: 1.7;
	margin-top: 32px;
}

.lineup-list-wrap .text-section .arrow-link {
	display: inline-block;
	font-size: 12px;
	margin-top: 32px;
	position: relative;
}

.lineup-list-wrap .text-section .arrow-link::before {
	color: var(--color-blue);
	content: '▶';
	left: -1.4em;
	position: absolute;
}

.lineup-list-wrap .text-section .arrow-link a { text-decoration: underline; }

@media (max-width: 1099px) {

	.lineup-list-wrap { padding: 12.308vw 5.128vw 0; }

	.lineup-list-wrap .lineup-list {
		gap: 1.026vw 0;
		margin-top: 8.205vw;
	}

	.lineup-list-wrap .lineup-list > .accordion-plus { max-width: 100%; }

	.lineup-list-wrap .text-section { margin-top: 5.97vw; }

	.lineup-list-wrap .text-section .text {
		font-size: 3.483vw;
		margin-top: 5.97vw;
	}

	.lineup-list-wrap .text-section .arrow-link {
		font-size: 2.985vw;
		margin-top: 5.97vw;
	}

}

/* --------------------------------------------------------------------------------------
	バナーエリア
--------------------------------------------------------------------------------------- */

.banner-section { padding-top: 40px; }

.banner-section .main-banner {
	display: inline-block;
	margin-bottom: 46px;
}

@media (max-width: 1099px) {

	.banner-section { padding-top: 9.95vw; }

	.banner-section .main-banner {
		margin-bottom: 9.95vw;
		margin-left: 4.975vw;
		margin-right: 4.975vw;
	}
}

/* --------------------------------------------------------------------------------------
	スキル
--------------------------------------------------------------------------------------- */

.skills-section-wrap {
	margin-top: 56px;
	padding-bottom: 64px;
}

@media (max-width: 1099px) {

	.skills-section-wrap {
		margin-top: 9.95vw;
		padding: 0 4.975vw 11.94vw;
	}
}

/* --------------------------------------------------------------------------------------
	〜から探す
--------------------------------------------------------------------------------------- */

.tabs-wrap { margin-top: 140px; }

@media (max-width: 1099px) {

	.tabs-wrap { margin-top: 11.94vw; }
}

/* --------------------------------------------------------------------------------------
	無料体験・無料カウンセリング
--------------------------------------------------------------------------------------- */

.free-trial-counseling { padding-top: 64px; }

.free-trial-counseling > .large-title { text-align: center; }

.free-trial-counseling-head {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.free-trial-counseling-head h3 {
	color: var(--color-blue);
	font-size: 36px;
	font-weight: var(--Bold);
	letter-spacing: 1px;
	line-height: 1.2;
	margin-right: 24px;
	text-align: center;
}

.free-trial-counseling-head h3 span { font-size: 179.25%; }

@media (max-width: 1099px) {

	.free-trial-counseling { padding: 11.94vw 4.975vw 0; }

	.free-trial-counseling-head {
		flex-wrap: wrap;
		margin-top: 3.98vw;
	}

	.free-trial-counseling-head h3 {
		align-items: center;
		display: flex;
		font-size: 5.97vw;
		line-height: 1;
		margin-right: 0;
	}

	.free-trial-counseling-head .diagram { margin-top: 3.98vw; }
}

/* --------------------------------------------------------------------------------------
	受講者評価
--------------------------------------------------------------------------------------- */

.evaluation {
	padding-bottom: 64px;
	padding-top: 64px;
}

.evaluation .large-title { text-align: center; }

.evaluation h3 {
	margin-top: 20px;
	text-align: center;
}

.evaluation h3 strong {
	color: var(--color-magenta);
	display: inline-block;
	font-size: 72px;
	font-weight: var(--Bold);
	line-height: .8;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.evaluation h3 strong::before,
.evaluation h3 strong::after {
	background: url(../images/common/deco-leaf.png);
	background-size: 100% auto;
	content: '';
	height: 82px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 51px;
}

.evaluation h3 strong::before { left: -68px; }
.evaluation h3 strong::after { right: -68px; transform: translateY(-50%) scale(-1,1); }

.evaluation-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.evaluation-list .evaluation-item {
	background-color: var(--color-pale-gray);
	display: flex;
	gap: 16px;
	max-width: calc(33.6% - 10px);
	padding: 24px 20px;
	width: 100%;
}

.evaluation-list .evaluation-item .thumbnail {
	align-self: flex-start;
	border-radius: 100vw;
	min-width: 64px;
	overflow: hidden;
}

.evaluation-list .evaluation-item p {
	color: #1e1e1e;
	font-size: 14px;
	line-height: 1.6;
}

.evaluation .banner-area {
	margin-top: 40px;
	text-align: center;
}

@media (max-width: 1099px) {

	.evaluation { padding: 11.94vw 4.975vw; }

	.evaluation h3 { margin-top: 4.333vw; }

	.evaluation h3 strong { font-size: 17.91vw; }

	.evaluation h3 strong::before,
	.evaluation h3 strong::after {
		height: 20.398vw;
		width: 12.687vw;
	}

	.evaluation h3 strong::before { left: -14.667vw; }
	.evaluation h3 strong::after { right: -14.667vw; }

	.evaluation-list {
		flex-wrap: wrap;
		gap: 1.99vw;
		margin-top: 9.95vw;
	}

	.evaluation-list .evaluation-item {
		gap: 3.98vw;
		max-width: 100%;
		padding: 3.98vw 4.975vw;
	}

	.evaluation-list .evaluation-item .thumbnail {
		border-radius: 100vw;
		height: 15.92vw;
		min-width: 15.92vw;
	}

	.evaluation-list .evaluation-item .thumbnail img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.evaluation-list .evaluation-item p {
		font-size: 3.483vw;
		width:100%;
	}

	.evaluation .banner-area { margin-top: 4.96vw; }
}

/* --------------------------------------------------------------------------------------
	選ばれる理由
--------------------------------------------------------------------------------------- */


.reason .inner { max-width: 1000px; }

.reason .reason-section {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 0;
	justify-content: space-between;
}

.reason .reason-section .reason-item {
	justify-content: space-between;
	width: 476px;
}

.reason .reason-section .reason-item .image { max-width: 240px; }

.reason .reason-section .reason-item .reason-text {
	margin-left: 0;
	width: 216px;
}

.reason .reason-section .reason-item .reason-text h3 { padding-left: 0; }

.reason .reason-section .reason-item .reason-text h3::before {
	display: block;
	line-height: .8;
	position: relative;
	transform: translateY(-50%);
}

@media (max-width: 1099px) {

	.reason .reason-section { gap: 5.205vw; }

	.reason .reason-section .reason-item {
		align-items: center;
		width: 100%;
	}

	.reason .reason-section .reason-item:nth-of-type(n+2) { margin-top: 0; }

	.reason .reason-section .reason-item .image {
		margin-top: 0;
		max-width: 31.841vw;
	}

	.reason .reason-section .reason-item .reason-text {
		display: block;
		width: 53.333vw;
	}

	.reason .reason-section .reason-item .reason-text h3 { padding-left: 12.333vw; }

	.reason .reason-section .reason-item .reason-text h3::before { position: absolute; }

	.reason .reason-section .reason-item .reason-text p { margin-top: 2.975vw; }
}

/* --------------------------------------------------------------------------------------
	教室一覧
--------------------------------------------------------------------------------------- */

.classroom-list-wrap {
	padding-bottom: 64px;
	padding-top: 64px;
}

.classroom-section .sub-head {
	font-weight: var(--Bold);
	text-align: center;
}

.classroom-list-wrap .classroom-list { margin-top: 32px; }

.classroom-list-wrap .classroom-list .pickup-title {
	font-size: 20px;
	font-weight: var(--Bold);
}

.classroom-list-wrap .classroom-list .classroom-pick {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
}

.classroom-list-wrap .classroom-list .classroom-pick .column {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	max-width: 207px;
	width: 100%;
}

.classroom-list-wrap .classroom-list .classroom-pick .column .image {
	height: 160px;
	overflow: hidden;
}

.classroom-list-wrap .classroom-list .classroom-pick .column .image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.classroom-list-wrap .classroom-list .classroom-pick .column .text-section  {
	padding: 16px 20px;
	text-align: left;
}

.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dl { margin-bottom: 20px; }

.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dt {
	font-size: 18px;
	font-weight: var(--Bold);
}

.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dd {
	font-size: 12px;
	font-weight: var(--Bold);
	margin-top: 4px;
}

.classroom-section .sub-head + .find-classroom { margin-top: 32px; }

@media (max-width: 1099px) {

	.classroom-list-wrap .classroom-list { margin-top: 8.205vw; }

	.classroom-list-wrap .classroom-list .pickup-title { font-size: 4.103vw; }

	.classroom-list-wrap .classroom-list .classroom-pick {
		flex-direction: column;
		gap: 4.103vw;
		margin-left: 5.128vw;
		margin-right: 5.128vw;
		margin-top: 4.179vw;
	}

	.classroom-list-wrap .classroom-list .classroom-pick .column {
		display: flex;
		justify-content: space-between;
		max-width: 100%;
		overflow: hidden;
	}

	.classroom-list-wrap .classroom-list .classroom-pick .column .image {
		height: auto;
		width: 35.897vw;
	}

	.classroom-list-wrap .classroom-list .classroom-pick .column .text-section {
		padding: 4.103vw 5.128vw;
		width: 56.923vw;
	}

	.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dl { margin-bottom: 4.103vw; }

	.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dt { font-size: 4.615vw; }

	.classroom-list-wrap .classroom-list .classroom-pick .column .text-section dd {
		font-size: 3.077vw;
		margin-top: .513vw;
	}

	.classroom-list-wrap .classroom-list .classroom-pick .column .text-section .banner a {
		min-height: 8.94vw;
		padding-bottom: 1.488vw;
		padding-top: 1.985vw;
	}
}

/* --------------------------------------------------------------------------------------
	いつもの仕事を美しく
--------------------------------------------------------------------------------------- */

.stylish-wrap {
	padding-bottom: 40px;
	padding-top: 64px;
}

.stylish-wrap .text-section { margin-top: 40px; }

.stylish-wrap .text-section p { line-height: 2; }

.stylish-wrap .text-section p:nth-of-type(n+2) { margin-top: 24px; }

.stylish-wrap .step {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.stylish-wrap .step li {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
	max-width: 200px;
	padding: 20px;
	position: relative;
	width: 100%;
}

.stylish-wrap .step li:nth-of-type(n+2) { margin-left: 46px; }

.stylish-wrap .step li:nth-of-type(n+2)::before {
	background: url(../images/top/icon-arrow-step.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 24px;
	left: -28px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
}

.stylish-wrap .step li .thumbnail {
	align-items: center;
	display: flex;
	height: 116px;
	justify-content: center;
}

.stylish-wrap .step li .thumbnail img { max-width: 86px; }

.stylish-wrap .step li dl { margin-top: 8px; }

.stylish-wrap .step li dt { font-weight: var(--Bold); }

.stylish-wrap .step li dd {
	font-size: 14px;
	margin-top: 8px;
}


@media (max-width: 1099px) {

	.stylish-wrap { padding: 12.308vw 5.128vw; }

	.stylish-wrap .text-section { margin-top: 8.205vw; }

	.stylish-wrap .text-section p:nth-of-type(n+2) { margin-top: 4.103vw; }

	.stylish-wrap .step {
		flex-wrap: wrap;
		margin-top: 8.205vw;
	}

	.stylish-wrap .step li {
		align-items: center;
		display: flex;
		justify-content: space-between;
		max-width: 100%;
		padding: 5.128vw;
	}

	.stylish-wrap .step li .thumbnail {
		height: auto;
		width: 13.641vw;
	}

	.stylish-wrap .step li .thumbnail img {
		height: auto;
		max-width: 100%;
		width: 100%;
	}

	.stylish-wrap .step li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 10.33vw;
	}

	.stylish-wrap .step li:nth-of-type(n+2)::before {
		left: 50%;
		top: -7.667vw;
		transform: translateX(-50%) rotate(90deg);
	}

	.stylish-wrap .step li dl {
		margin-top: 0;
		text-align: left;
		width: 59.333vw;
	}

	.stylish-wrap .step li dt { font-size: 4.103vw; }

	.stylish-wrap .step li dd {
		font-size: 3.59vw;
		margin-top: 1.333vw;
	}
}