@charset "utf-8";

#header { background: linear-gradient(0deg, #e9e9e9 1px, #fff 1px); }

.sub-page { min-height: 300px; padding-bottom: clamp(50rem, calc(90 / var(--container) * 100vw), 100rem);
	.legal-document .page-heading, .page-heading-block { margin-bottom: calc(var(--font-size-35) * 2); text-align: center; }
	#main:has(.join_area) .sub_title { display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
}

.accent-bar::before { display: inline-block; width: clamp(0px, 0.27777778em, 5rem); aspect-ratio: 5 / 9; margin-right: 1ch; vertical-align: middle; background: var(--primary); transform: skewX(-24deg) translateX(4px); translate: 0 -12%; content: ""; }

.page-header { margin-bottom: 51rem; padding-top: clamp(50rem, calc(81 / var(--container) * 100vw), 81rem);
	details { position: relative; }
	.menu { display: flex; align-items: center; justify-content: center; gap: 20rem; }
	.item { display: flex; align-items: center; }
	.home { display: block; }
	.home::before { display: block; width: 20rem; aspect-ratio: 20 / 17; background: url("/assets/images/pages/page-header-home.svg") no-repeat 50% / contain; opacity: 0.6; content: ""; }
	.label { display: flex; align-items: center; gap: 19.5rem; font: 500 var(--font-size-15) var(--font-sans); }
	.label::after { display: block; width: 0.46666667em; aspect-ratio: 7 / 5; background: currentColor; translate: 0 -20%; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; }
	[open] .label::after { clip-path: polygon(0 calc(100% - 1px), 50% 0, 100% calc(100% - 1px)); }
	.item:last-child::before { display: inline-block; width: 1px; height: var(--font-size-15); margin-right: 19rem; background: currentColor; opacity: 0.3; content: ""; }
	.sub-menu { position: absolute; top: calc(100% + 8rem); left: 50%; z-index: 8; display: grid; gap: 0.6em; min-width: 10.66666667em; padding: 1.46666667em 1em; font: 500 var(--font-size-15) var(--font-sans); text-underline-offset: 2px; background: #fff; border: 1px solid #e9e9e9; border-radius: 7rem; box-shadow: 0 0.66666667em 1.33333333em rgba(0, 0, 0, 0.1); translate: -50%; }
	.page-heading { margin-top: 0.55em; font: 700 var(--font-size-60) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	@media (any-hover) {
		.link:hover { color: #999; text-decoration: underline; }
	}
}

.shared-table { width: 100%; background: #fff; border: 1px solid var(--black);
	thead { color: #fff; background: var(--black); }
	tbody tr:nth-child(even) td { background: #f2ede7; }
	th { padding: 0.675em 0.4ch; }
	td { padding: 15rem 0.4ch; border: 1px solid var(--black); }
	.link { display: inline-block; padding: 3rem 19rem; font-weight: 700; background: var(--primary); border-radius: 5em; }
	@media (max-width: 768px) {
		td { padding: 15rem 0 !important; }
		.link { margin-left: 8px; }
	}
	&#tuition-fee-table{
		td{ background: #fff; }
		.course-name { background: #f2ede7; }
	}
}

.shared-program-steps-list { row-gap: clamp(calc(var(--content-top) * 1.2), calc(71 / var(--container) * 100vw), 71rem); margin-top: 39rem;
	@media (width >= 1280px) {
		&.is-item-5 { display: flex; flex-wrap: wrap;
			.item { flex: 1 20%; }
		}
		&.is-item-9 { display: flex; flex-wrap: wrap;
			.item:nth-child(-n + 5) { flex: 1 20%; }
			.item:nth-child(n + 6) { flex: 1 25%; }
		}
		&.is-column-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
	}
	@media (width < 1280px) { display: grid; grid-template-columns: repeat(2, 1fr);
		&.is-item-9 .item:last-child { grid-column-end: span 2; }
	}
	@media (width < 768px) { --font-size-25: 18rem;
		br { display: none; }
		.desc { text-align: left; word-break: break-all; }
	}
	.item {
		.is-column-3 &.item--1 { --color: #f5ba47; }
		.is-column-3 &.item--2 { --color: #e88644; }
		.is-column-3 &.item--3 { --color: #e86344; }
		.is-column-3 &.item--4 { --color: #8a5aa6; }
		.is-column-3 &.item--5 { --color: #b3569e; }
		.is-column-3 &.item--6 { --color: #9f4957; }
		.is-item-5 &.item--1 { --color: #f5ba47; }
		.is-item-5 &.item--2 { --color: #f8aa12; }
		.is-item-5 &.item--3 { --color: #f48a00; }
		.is-item-5 &.item--4 { --color: #f47300; }
		.is-item-5 &.item--5 { --color: #e86344; }
		.is-item-9 &.item--1 { --color: #f5ba47; }
		.is-item-9 &.item--2 { --color: #f8aa12; }
		.is-item-9 &.item--3 { --color: #f48a00; }
		.is-item-9 &.item--4 { --color: #f47300; }
		.is-item-9 &.item--5 { --color: #e86344; }
		.is-item-9 &.item--6 { --color: #b74a1f; }
		.is-item-9 &.item--7 { --color: #a24816; }
		.is-item-9 &.item--8 { --color: #9d570c; }
		.is-item-9 &.item--9 { --color: #b97509; }
	}
	.step { position: relative; font: 700 var(--font-size-20-to-14) var(--font-sans); letter-spacing: -0.025em; color: var(--color); }
	.step::before { position: absolute; bottom: 7rem; display: block; width: 100%; border-top: 1px solid var(--black); content: ""; }
	.step::after { position: relative; display: block; width: 15rem; aspect-ratio: 1; margin: 8rem auto 0.9em; background: var(--color); border-radius: 50%; content: ""; }
	.icon { width: 100%; height: 2.4em; font-size: var(--font-size-25); color: var(--color); }
	.title, .desc { padding-inline: 1ch; }
	.title { margin-top: 0.76em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
	.desc { margin-top: 1.22222222em; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em; }
}

.page-academy-overview {
	* { letter-spacing: -0.01em; }
	.section-brand { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(194 / var(--container) * 100vw), 194rem); border-top: 1px solid #ddd;
		.brand-intro {
			.logo { display: block; width: 100%; max-width: 500rem; height: auto; margin-inline: auto; }
			.brand-colors { display: grid; gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem); margin-top: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem);
				@media (width > 768px) { grid-template-columns: repeat(3, 1fr); }
				@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
			}
			.card { padding: 9rem; font: var(--font-size-18-to-14) / 1.66666667 var(--font-sans); color: #76726f; border: 1px solid #e5e5e5;
				@media (width >= 768px) { display: grid; grid-template-columns: 42.15% 1fr; align-items: center; gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem); }
			}
			.code { align-content: end; padding: 20rem; font: 600 var(--font-size-22) var(--font-sans); color: #fff; background: var(--bg-color, none);
				&.code--1 { --bg-color: #070002; }
				&.code--2 { --bg-color: #f5c136; }
				&.code--3 { --bg-color: #d8a53e; }
				@media (width >= 768px) { aspect-ratio: 18 / 15; }
			}
			.colors {
				@media (width < 768px) { margin-top: 8rem; }
			}
		}
		.brand-values { position: relative; display: grid; contain: content; margin-top: clamp(var(--section-block), calc(200 / var(--container) * 100vw), 200rem);
			@media (width > 768px) { grid-template-columns: 640fr 679fr; gap: clamp(8rem, calc(80 / var(--container) * 100vw), 80rem); }
			.grided-logo-container { position: relative; }
			.grided-logo { position: sticky; top: var(--content-top); display: block; width: 100%; height: auto; }
			.values { display: grid; gap: clamp(40rem, calc(98 / var(--container) * 100vw), 98rem);
				@media (width < 768px) { margin-top: var(--content-top); }
			}
			.value { display: grid; grid-template-columns: auto 1fr; }
			.letter { grid-row: 1 / 3; width: 1.3ch; margin-right: 0.38em; font: 800 clamp(60rem, calc(100 / var(--container) * 100vw), 100rem) var(--font-sans); text-align: center; color: #ffc72c;
				@media (width >= 768px) { translate: -5% -19%; }
				@media (width < 768px) { translate: -5% -12%; }
			}
			.name { margin-bottom: 0.84em; font: 600 var(--font-size-25) var(--font-sans);
				@media (width >= 768px) { margin-top: 0.12em; }
			}
			.description { font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); }
		}
	}
	.section-about { position: relative; padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); color: #fff; background: #2d2926 url("/assets/images/brand-overview/about-bg.webp") no-repeat 50% / cover;
		&::before { position: absolute; right: 2.29166667vw; bottom: 0; width: clamp(100rem, 18.48958333vw, 355rem); aspect-ratio: 355 / 198; background: url("/assets/images/layouts/symbol-white.svg") no-repeat 50% / contain; translate: 0 4.2%; opacity: 0.15; content: ""; }
		.container { display: grid; align-items: start; gap: var(--content-top) clamp(8rem, calc(130 / var(--container) * 100vw), 130rem);
			@media (width >= 768px) { grid-template-columns: 57fr 70fr;
				.heading { margin-top: 6.7%; }
			}
		}
		.visual { width: 100%; aspect-ratio: 57 / 69; background: var(--gray) url("/assets/images/brand-overview/about-visual.webp") no-repeat 50% / cover;
			@media (width < 768px) { width: 70%; max-width: 400rem; margin-inline: auto; }
		}
		.heading { margin-bottom: 1.26666667em; font: 700 var(--font-size-30) / 1.4 var(--font-sans); color: var(--primary); }
		.desc { margin-top: 1.72222222em; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); }
	}
	.section-features { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		.list { display: grid; gap: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem); }
		.item { display: grid; gap: calc(var(--content-top) * 0.5) clamp(8rem, calc(80 / var(--container) * 100vw), 80rem);
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr); align-items: center;
				&:nth-child(odd) .visual { order: 2; }
				.content { padding-bottom: 1.3%; }
			}
		}
		.visual { width: 100%; aspect-ratio: 660 / 465; background: var(--gray) var(--bg-url, none) no-repeat 50% / cover;
			&.visual--1 { --bg-url: url("/assets/images/brand-overview/features-visual-1.webp"); }
			&.visual--2 { --bg-url: url("/assets/images/brand-overview/features-visual-2.webp"); }
			&.visual--3 { --bg-url: url("/assets/images/brand-overview/features-visual-3.webp"); }
			&.visual--4 { --bg-url: url("/assets/images/brand-overview/features-visual-4.webp"); }
		}
		.index { font: italic 800 var(--font-size-50) var(--font-sans); letter-spacing: -0.025em; color: var(--primary); }
		.title { margin-block: 0.37142857em 1.14285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; }
		.desc { font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); }
	}
}

.bg-mega { position: relative; isolation: isolate;
	&::before { position: absolute; inset: 0; z-index: -1; content: ""; }
	&.bg-mega--top::before { background: url("/assets/images/pages/bg-mega-top.webp") no-repeat 50% 100% / 100%; opacity: 0.05; }
	&.bg-mega--bottom::before { background: url("/assets/images/pages/bg-mega-bottom.webp") no-repeat 50% 0 / 100%; opacity: 0.03; }
	&.bg-mega--bottom-black::before { background: url("/assets/images/pages/bg-mega-bottom-black.webp") no-repeat 50% 0 / 100%; opacity: 0.03; }
}

.section-hero { contain: content;
	.banner { position: relative; align-content: center; align-content: center; height: clamp(235rem, calc(440 / var(--container) * 100vw), 440rem); contain: content;
		/* padding-block: clamp(var(--section-block), calc(73 / var(--container) * 100vw), 73rem); */ text-align: center; color: #fff; background: var(--black);
		.bg { position: absolute; inset: 0; z-index: -1; container: bg / size;
			@supports (animation-timeline: view()) { view-timeline: --bg block; }
			&::before { position: absolute; inset: 50% 0 auto; height: 200cqh; background: no-repeat 50% / cover; translate: 0 -50%; content: "";
				@media (prefers-reduced-motion: no-preference) {
					@supports (animation-timeline: view()) { animation-name: parallax-move; animation-timeline: --bg; animation-range: entry 0% exit 100%; }
				}
			}
			@media (width >= 768px) {
				&.bg--barista::before { background-image: url("/assets/images/pages/hero-bg-barista-pc.webp"); }
				&.bg--baking::before { background-image: url("/assets/images/pages/hero-bg-baking-pc.webp"); }
				&.bg--admission::before { background-image: url("/assets/images/pages/hero-bg-admission-pc.webp"); }
				&.bg--patissier::before { background-image: url("/assets/images/pages/hero-bg-patissier-pc.webp"); }
			}
			@media (width < 768px) {
				&.bg--barista::before { background-image: url("/assets/images/pages/hero-bg-barista-mob.webp"); }
				&.bg--baking::before { background-image: url("/assets/images/pages/hero-bg-baking-mob.webp"); }
				&.bg--admission::before { background-image: url("/assets/images/pages/hero-bg-admission-mob.webp"); }
				&.bg--patissier::before { background-image: url("/assets/images/pages/hero-bg-patissier-mob.webp"); }
			}
		}
		.visual.visual--sca-logo { width: 5em; max-width: 100%; aspect-ratio: 225 / 149; margin-bottom: 0.91111111em; margin-inline: auto; font-size: var(--font-size-45); background: url("/assets/images/pages/sca-diploma/sca-logo-white.png") no-repeat 50% / contain; }
		.visual.visual--afa-logo { width: 7.24444444em; max-width: 100%; aspect-ratio: 326 / 149; margin-bottom: 0.91111111em; margin-inline: auto; font-size: var(--font-size-45); background: url("/assets/images/pages/baking-diploma/afa-logo-white.webp") no-repeat 50% / contain; }
		.heading { font: 700 var(--font-size-45) var(--font-sans); letter-spacing: -0.01em; text-shadow: 0 5rem 15rem oklch(0% 0 0 / 0.3); }
		.subheading { margin-top: 0.8em; font: 700 var(--font-size-25) var(--font-sans); color: var(--primary); }
		.list { display: flex; align-items: center; justify-content: center; gap: 0.5em 1em; margin-top: 1.65em; font: 700 var(--font-size-20-to-14) var(--font-sans); text-transform: uppercase;
			@media (width < 768px) { flex-direction: column; }
			li::first-letter { color: var(--primary); }
			.dot { width: 6rem; aspect-ratio: 1; background: rgb(from currentColor r g b / 0.3); border-radius: 50%; }
		}
	}
	.padding-block { padding-block: clamp(var(--section-block), calc(111 / var(--container) * 100vw), 111rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); }
	.heading-block { text-align: center;
		.symbol-block { position: relative; display: grid; place-items: center; width: 1em; aspect-ratio: 1; margin-bottom: 0.53030303em; margin-inline: auto; font-size: clamp(56rem, calc(66 / var(--container) * 100vw), 66rem); background: #fff; border: 2rem solid var(--primary); border-radius: 50%; box-shadow: 0 0.22727273em 0.22727273em rgb(from var(--primary) r g b / 30%);
			&::before { position: absolute; inset: -12rem; z-index: -1; border: 1px solid var(--primary); border-radius: 50%; opacity: 0.5; content: ""; }
			.symbol-image { display: block; width: 0.6em; height: auto; }
		}
		.heading { margin-bottom: 0.65714286em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
		.subheading { margin-top: 1.15em; font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; color: var(--gray); }
		.subheading + .subheading { margin-top: 1.1lh; }
	}
	.section-sca-cert-module { margin-top: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem); padding: 66rem 12rem 57rem; padding: clamp(var(--section-block), calc(66 / var(--container) * 100vw), 66rem) 12rem clamp(var(--section-block), calc(57 / var(--container) * 100vw), 57rem); text-align: center; background: #fbf5e9;
		.heading { margin-bottom: 0.54285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; }
		.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; color: var(--gray); }
		.list { display: flex; flex-wrap: wrap; justify-content: center; gap: 30rem clamp(8rem, calc(98 / var(--container) * 100vw), 98rem); margin-top: 34rem; }
		.icon { width: 6em; aspect-ratio: 1; margin-inline: auto; font-size: var(--font-size-20); background: #fff no-repeat 50% / contain; border-radius: 50%;
			&.icon--1 { background-image: url("/assets/images/pages/sca-cert-module-1.svg"); }
			&.icon--2 { background-image: url("/assets/images/pages/sca-cert-module-2.svg"); }
			&.icon--3 { background-image: url("/assets/images/pages/sca-cert-module-3.svg"); }
		}
		.title-en { width: fit-content; margin: 1.33333333em auto 0; padding: 0.13333333em 1.4em; font: 700 var(--font-size-15) var(--font-sans); letter-spacing: -0.01em; text-transform: capitalize; background: var(--primary); border-radius: 5em; }
		.title { margin-block: 0.7em 0.3em; font: 700 var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; }
		.description { font: 500 var(--font-size-16) / 1.5 var(--font-sans); letter-spacing: -0.01em; }
	}
	.section-exam-information {
		.list { display: grid; gap: clamp(8rem, calc(40 / var(--container) * 100vw), 40rem); margin-top: clamp(var(--content-top), calc(94 / var(--container) * 100vw), 94rem);
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.item { padding: 9rem; border: 1px solid #ddd; }
		.visual { aspect-ratio: 66 / 36; background: no-repeat 50% / cover;
			&.visual--written-exam { background-image: url("/assets/images/pages/exam-information-written-exam.webp"); }
			&.visual--practical-exam { background-image: url("/assets/images/pages/exam-information-practical-exam.webp"); }
		}
		.content { padding: clamp(24rem, calc(36 / var(--container) * 100vw), 36rem) clamp(16rem, calc(28 / var(--container) * 100vw), 28rem) clamp(16rem, calc(23 / var(--container) * 100vw), 23rem); }
		.title { position: relative; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; isolation: isolate;
			&::before { position: absolute; top: 0; left: 0; z-index: -1; width: 20rem; aspect-ratio: 1; background: var(--primary); border-radius: 50%; translate: -40% -10%; content: ""; }
		}
		.detail-list { display: grid; gap: 2rem; margin-top: 1.66666667em; font: var(--font-size-18-to-14) / 1.66666667 var(--font-sans); letter-spacing: -0.025em; }
		.detail-item { display: grid; grid-template-columns: 7ch 1fr; gap: 2.2ch;
			dt { font-weight: 700; }
		}
	}
	.section-partner-program { margin-top: 93rem; padding: 61rem clamp(16rem, calc(40 / var(--container) * 100vw), 40rem); background: #fbf5e9;
		* { letter-spacing: -0.01em; }
		.sub-heading { font: 700 var(--font-size-35) / 1.5 var(--font-sans); text-align: center; }
		.desc { font: var(--font-size-20) / 1.5 var(--font-sans); text-align: center; color: var(--gray);
			.sub-heading + & { margin-top: 0.95em; }
			& + & { margin-top: 1.6em; }
			.list + & { margin-top: 2.2em; }
		}
		.list { display: grid; gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem); margin-top: clamp(var(--content-top), calc(44 / var(--container) * 100vw), 44rem); font: 700 var(--font-size-20) var(--font-sans); color: #fff;
			@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
			@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.media { position: relative; background: var(--black); }
		.photo { display: block; width: 100%; height: auto; }
		.label { position: absolute; inset: 0; align-content: end; padding: 17rem 30rem; padding: 0.85em min(1.5em, 7%); background: linear-gradient(#0000 calc(100% - 5em), #00000080); }
	}
}

@property --percentage { syntax: "<number>"; inherits: true; initial-value: 0; }

.section-proven-impact { padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem) clamp(var(--section-block), calc(90 / var(--container) * 100vw), 90rem); text-align: center; color: #fff; background: var(--black) var(--bg-url) no-repeat 50% / cover;
	&.is-barista { --bg-url: url("/assets/images/pages/proven-impact/barista.webp"); }
	&.is-baking { --bg-url: url("/assets/images/pages/proven-impact/baking.webp"); }
	&.is-admission { --bg-url: url("/assets/images/pages/proven-impact/admission.webp"); }
	&.is-young-barista { --bg-url: url("/assets/images/pages/proven-impact/admission.webp"); }
	&.is-young-patissier { --bg-url: url("/assets/images/pages/proven-impact/young-patissier.webp"); }
	&.is-why { --bg-url: url("/assets/images/pages/proven-impact/why.webp"); }
	.heading { margin-bottom: 0.54285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; }
	.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; color: rgb(from currentColor r g b / 0.5); }
	.charts-split { gap: 0 clamp(10rem, calc(48 / var(--container) * 100vw), 48rem); max-width: 1100rem; margin: clamp(var(--content-top), calc(46 / var(--container) * 100vw), 46rem) auto 0;
		@media (width >= 768px) { display: flex; justify-content: space-between; }
		@media (width < 768px) { display: grid; grid-template-columns: repeat(4, 1fr);
			.chart-block { grid-column-end: span 2; }
			.chart-block:nth-child(3) { grid-column-start: 2; margin-top: -16rem; }
		}
	}
	.chart-block { position: relative; width: 100%; max-width: 300rem; aspect-ratio: 1; container: chart / inline-size; container-type: inline-size; }
	.chart-svg { display: block; width: 100%; height: auto; }
	.chart-track { --circumference: calc(2 * 3.14159265359 * 135); transform-origin: center; rotate: -90deg; stroke-dasharray: var(--circumference); stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) / 100); }
	.info-block { position: absolute; inset: 3% 0 0; display: grid; place-content: center; }
	.title { margin-bottom: 0.36em; font: 600 8.33333333cqw var(--font-sans); letter-spacing: -0.01em; }
	.satisfaction-rate { font: 700 13.33333333cqw var(--font-sans); }
	.percent { margin-top: -0.2em; margin-left: 1px; font-weight: 700; font-size: 8.33333333cqw; color: rgb(from currentColor r g b / 0.3); }
	@media (prefers-reduced-motion: no-preference) {
		.chart-track { transition: 1.4s; stroke-dashoffset: calc(var(--circumference) - var(--circumference) * 0 / 100);
			.se-visible & { stroke-dashoffset: calc(var(--circumference) - var(--circumference) * var(--percentage) / 100); }
		}
	}
}

@keyframes parallax-move {
	0% { transform: translateY(10%); }
	100% { transform: translateY(-10%); }
}

.section-course-introduction { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
	.container { display: grid; gap: 40rem clamp(8rem, calc(130 / var(--container) * 100vw), 130rem);
		@media (width >= 768px) { grid-template-columns: 1fr 50%; }
	}
	.visual { position: sticky; top: var(--section-block); aspect-ratio: 57 / 69; margin-inline: auto; background: var(--gray) no-repeat 50% / cover;
		&.visual--barista-skills { width: 100%; background-image: url("/assets/images/pages/course-introduction/barista-skills.webp"); }
		&.visual--sensory-brewing { background-image: url("/assets/images/pages/course-introduction/sensory-brewing.webp"); }
		&.visual--roasting { background-image: url("/assets/images/pages/course-introduction/barista-skills.webp"); }
		&.visual--latte-art { background-image: url("/assets/images/pages/course-introduction/latte-art.webp"); }
		&.visual--cafe-menu { background-image: url("/assets/images/pages/course-introduction/cafe-menu.webp"); }
		&.visual--instructor-development { background-image: url("/assets/images/pages/course-introduction/barista-skills.webp"); }
		&.visual--coffee-machine-engineer { background-image: url("/assets/images/pages/course-introduction/barista-skills.webp"); }
		&.visual--confectionery-baker { background-image: url("/assets/images/pages/course-introduction/confectionery-baker.webp"); }
		&.visual--cafe-desserts { background-image: url("/assets/images/pages/course-introduction/cafe-desserts.webp"); }
		&.visual--macaron-master { background-image: url("/assets/images/pages/course-introduction/macaron-master.webp"); }
		&.visual--baked-dessert-master { background-image: url("/assets/images/pages/course-introduction/baked-dessert-master.webp"); }
		&.visual--tart-master { background-image: url("/assets/images/pages/course-introduction/tart-master.webp"); }
		&.visual--boulanger-master { background-image: url("/assets/images/pages/course-introduction/boulanger-master.webp"); }
		&.visual--healthy-baking { background-image: url("/assets/images/pages/course-introduction/healthy-baking.webp"); }
		&.visual--cake-design { background-image: url("/assets/images/pages/course-introduction/cake-design.webp"); }
		&.visual--premium-cake { background-image: url("/assets/images/pages/course-introduction/premium-cake.webp"); }
		&.visual--one-day-class { background-image: url("/assets/images/pages/course-introduction/one-day-class.webp"); }
		&.visual--pet-food-baking-class { background-image: url("/assets/images/pages/course-introduction/pet-food-baking-class.webp"); }
		&.visual--sca-diploma { background-image: url("/assets/images/pages/course-introduction/sca-diploma.webp"); }
		&.visual--baking-diploma { background-image: url("/assets/images/pages/course-introduction/baking-diploma.webp"); }
		&.visual--young-barista { background-image: url("/assets/images/pages/course-introduction/young-barista.webp"); }
		&.visual--young-patissier { background-image: url("/assets/images/pages/course-introduction/young-patissier.webp"); }
		@media (width >= 768px) { max-width: 570rem; }
		@media (width < 768px) { width: 70%; }
	}
	.heading { margin-bottom: 1.17142857em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em;
		@media (width >= 768px) { margin-top: 1em; }
	}
	.subheading { margin-bottom: 0.84em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; }
	.description { font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance;
		@media (width < 768px) {
			br { display: none; }
		}
	}
	.description + .description { margin-top: 1.7em; }
	.section-course-overview { margin-top: clamp(var(--content-top), calc(57 / var(--container) * 100vw), 57rem); padding-block: calc(var(--font-size-25) * 1.44) calc(var(--font-size-25) * 1.52); border-block: 2px solid var(--black);
		.subheading { display: inline; margin-right: 1em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; }
		.note { display: inline; font: var(--font-size-16) / 1.5625 var(--font-sans); letter-spacing: -0.01em; color: var(--gray); }
		.list { display: grid; gap: 0.64444444em; margin-top: calc(var(--font-size-25) * 1.04); font: var(--font-size-18) var(--font-sans); }
		.item { display: grid; grid-template-columns: 9ch 1fr; gap: 2.7ch; }
		dt { display: flex; align-items: center; gap: 0.88888889em; font-weight: 700; letter-spacing: -0.01em;
			&::before { display: block; width: 0.27777778em; aspect-ratio: 5 / 9; background: var(--primary); transform: skewX(-24deg) translateX(4px); content: ""; }
		}
		dd { letter-spacing: -0.01em; }
	}
}

.section-student-interviews { --bg-color: hsla(240, 9%, 96%, 0.6); --bg-image: linear-gradient(var(--bg-color), var(--bg-color)); position: relative; padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
	&.is-barista { background:
			var(--bg-image), url("/assets/images/pages/student-interviews-barista-bg-1.webp") no-repeat 0 0 / auto 100%, url("/assets/images/pages/student-interviews-barista-bg-2.webp") no-repeat 100% 100% / auto 100%, #f3f3f5; }
	&.is-baking { background:
			var(--bg-image), url("/assets/images/pages/student-interviews-baking-bg-1.webp") no-repeat 0 0 / min(266rem, 30%), url("/assets/images/pages/student-interviews-baking-bg-2.webp") no-repeat 100% 100% / min(468rem, 40%), #f3f3f5; }
	&.is-why { background:
			var(--bg-image), url("/assets/images/pages/student-interviews-baking-bg-1.webp") no-repeat 0 0 / min(266rem, 30%), url("/assets/images/pages/student-interviews-barista-bg-2.webp") no-repeat 100% 100% / auto 100%, #f3f3f5; }
	@media (width >= 1650px) { --bg-color: hsla(240, 9%, 96%, 0); }
	.heading { display: flex; align-items: center; gap: 0.6em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; }
	.heading-en { font: 700 var(--font-size-16) var(--font-sans); letter-spacing: 0; color: var(--primary); text-transform: uppercase; }
	.empty { margin-top: 27rem; }
	.list { display: grid; gap: 40rem; margin-top: 27rem;
		@media (width >= 768px) { grid-template-columns: repeat(2, 1fr); }
	}
	.link { display: grid; grid-template:
			"empty-1 photo empty-6 empty-5 empty-5 empty-2" var(--row, 0)
			"empty-1 photo empty-6 title cta empty-2"
			"empty-1 photo empty-6 empty-3 empty-3 empty-2" clamp(12rem, calc(17 / var(--container) * 100vw), 17rem)
			"empty-1 photo empty-6 empty-3 empty-3 empty-2" clamp(20rem, calc(36 / var(--container) * 100vw), 36rem)
			"empty-1 photo empty-6 excerpt excerpt empty-2"
			"empty-1 empty-4 empty-4 empty-4 empty-4 empty-2" clamp(24rem, calc(37 / var(--container) * 100vw), 37rem) / clamp(16rem, calc(20 / var(--container) * 100vw), 20rem) clamp(100rem, calc(250 / var(--container) * 100vw), 250rem)
			clamp(24rem, calc(30 / var(--container) * 100vw), 30rem) 1fr auto clamp(16rem, calc(20 / var(--container) * 100vw), 20rem); align-items: center; isolation: isolate;
		@media (width >= 768px) { --row: clamp(0px, calc(37 / var(--container) * 100vw), 37rem); }
	}
	.photo { grid-area: photo; align-self: end; aspect-ratio: 25 / 32; border-radius: 10em 10em 0 0; }
	.title { grid-area: title; font: 700 var(--font-size-22) var(--font-sans); letter-spacing: -0.01em; }
	.cta { position: relative; display: block; grid-area: cta; width: var(--font-size-22); aspect-ratio: 1; margin-right: 0.45454545em; color: #aaa; background: hsla(0, 0%, 100%, 0.8); border: 1px solid currentColor; border-radius: 50%;
		&::before, &::after { position: absolute; inset: 0; width: 8rem; height: 2px; margin: auto; background: currentColor; content: ""; }
		&::after { rotate: 90deg; }
	}
	.excerpt { grid-area: excerpt; align-self: start; font: var(--font-size-16) / 1.4375 var(--font-sans); color: #4a433e;
		@media (width >= 768px) { min-height: 6lh; -webkit-line-clamp: 6; }
		@media (width >= 1280px) { min-height: 9lh; -webkit-line-clamp: 9; }
		@media (width < 768px) { min-height: 4lh; -webkit-line-clamp: 4; }
	}
	.bg { z-index: -1; grid-area: 4 / 1 / -1 / -1; place-self: normal; background: #fff; }
}

.section-our-strengths { position: relative; padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); color: #fff; background: var(--black);
	.heading { font: 700 var(--font-size-40) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.list { display: grid; gap: 13rem; margin-top: clamp(var(--content-top), calc(54 / var(--container) * 100vw), 54rem); counter-reset: index;
		@media (width >= 1280px) { grid-template-columns: repeat(4, 1fr); }
		@media (768px <= width < 1280px) { grid-template-columns: repeat(2, 1fr);
			.item:nth-child(odd) { justify-self: end; }
		}
		@media (width < 768px) { justify-items: center; }
	}
	.item { position: relative; max-width: 340rem; aspect-ratio: 34 / 47; container: card / size; counter-increment: index;
		&.item--barista-1 { --bg-url: url("/assets/images/pages/our-strengths/barista-1.webp"); }
		&.item--barista-2 { --bg-url: url("/assets/images/pages/our-strengths/barista-2.webp"); }
		&.item--barista-3 { --bg-url: url("/assets/images/pages/our-strengths/barista-3.webp"); }
		&.item--barista-4 { --bg-url: url("/assets/images/pages/our-strengths/barista-4.webp"); }
		&.item--baking-1 { --bg-url: url("/assets/images/pages/our-strengths/baking-1.webp"); }
		&.item--baking-2 { --bg-url: url("/assets/images/pages/our-strengths/baking-2.webp"); }
		&.item--baking-3 { --bg-url: url("/assets/images/pages/our-strengths/baking-3.webp"); }
		&.item--baking-4 { --bg-url: url("/assets/images/pages/our-strengths/baking-4.webp"); }
		@media (prefers-reduced-motion: no-preference) {
			.card-front, .card-back { transition: transform 0.6s; }
		}
		@media (any-hover) {
			&:hover .card-front { transform: rotateY(180deg); }
			&:not(:hover) .card-back { transform: rotateY(180deg); }
		}
		@media (any-hover: none) {
			.card-front { display: none; }
		}
		@media (width >= 1280px) { width: 100%; }
		@media (width < 1280px) { width: 80%; }
	}
	.card-front { position: relative; display: grid; grid-template-rows: 1fr auto; align-items: end; height: 100%; padding: 13.82352941cqw 8.52941176cqw; background:
			linear-gradient(0deg, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3) 50%, oklch(0 0 0 / 0)) no-repeat 50% 100% / auto 30%, var(--bg-url, none) no-repeat 50% / cover, var(--gray); isolation: isolate; backface-visibility: hidden;
		.counter { font: 900 5.88235294cqw var(--font-sans); color: rgb(from currentColor r g b / 0.3);
			&::before { content: counter(index, decimal-leading-zero); }
		}
		.title { margin-top: 0.3em; font: 600 5.88235294cqw var(--font-sans); letter-spacing: -0.01em; }
	}
	.card-back { position: absolute; inset: 0; padding: 15cqw 8.82352941cqw; text-align: center; box-shadow: 0 4.41176471cqw 8.82352941cqw rgb(from var(--primary) r g b / 0.3); isolation: isolate; backface-visibility: hidden;
		&::before { position: absolute; inset: 0; z-index: -2; background: var(--gray) var(--bg-url) no-repeat 50% / cover; clip-path: inset(0); content: ""; }
		&::before { filter: blur(7px) saturate(0); }
		&::after { position: absolute; inset: 0; z-index: -1; background: var(--primary); opacity: 0.85; content: ""; }
		.counter { position: absolute; inset: 0 0 auto; display: grid; place-items: center; width: 15.88235294cqw; aspect-ratio: 1; margin-inline: auto; font: 900 5.88235294cqw var(--font-sans); text-align: center; color: var(--primary); background: #fff; border: 0.88235294cqw solid var(--primary); border-radius: 50%; translate: 0 -50%;
			&::before { content: counter(index, decimal-leading-zero); }
		}
		.title { font: 700 8.82352941cqw var(--font-sans); letter-spacing: -0.01em; }
		.subtitle { margin-top: 0.65em; font: 600 5.88235294cqw var(--font-sans); letter-spacing: -0.01em; }
		.description { margin-top: 1.85em; padding-top: 1.85em; font: 600 5.88235294cqw var(--font-sans); letter-spacing: -0.01em; border-top: 0.58823529cqw solid rgba(226, 169, 54, 0.5); }
	}
}

.section-education-programs { position: relative; padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem) clamp(var(--section-block), calc(86 / var(--container) * 100vw), 86rem); isolation: isolate;
	.container { display: grid; gap: clamp(var(--section-block), calc(194 / var(--container) * 100vw), 194rem); }
	.heading { margin-bottom: 0.54285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: var(--gray);
		& + .subheading { margin-top: 1lh; }
	}
	.note-list { display: grid; gap: 8rem 1em; margin-top: 34rem; font: var(--font-size-20-to-14) var(--font-sans);
		@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
		.note-item { padding: 1.3em 1.45em; letter-spacing: -0.01em; border: 1px solid #ddd; }
		.note-item::before { display: inline-block; width: 0.9em; aspect-ratio: 1; margin-right: 0.65em; background: var(--black) url("/assets/images/ui/check.svg") no-repeat 50% / contain; translate: 0 10%; content: ""; }
	}
	.program-block { display: grid; gap: 40rem clamp(8rem, calc(40 / var(--container) * 100vw), 40rem); margin-top: clamp(var(--content-top), calc(44 / var(--container) * 100vw), 44rem);
		@media (width >= 768px) { grid-template-columns: minmax(min(340rem, 30%), 34fr) 102fr; }
	}
	.section-block { display: grid; gap: 49rem; }
	.program-heading { margin-block: -0.16em 0.6em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; color: var(--primary); }
	.program-subheading { margin-block: -0.16666667em 1.27777778em; font: var(--font-size-18) var(--font-sans); letter-spacing: -0.025em; }
	.program-list { display: grid;
		&.program-list--column-2 { grid-template-columns: repeat(2, 1fr); gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
			.visual { aspect-ratio: 5 / 3; }
			.number { width: fit-content; min-width: 4.53333333em; margin-bottom: 0.73333333em; padding: 0.2em 0.5ch 0.06666667em; font: 700 var(--font-size-15) var(--font-sans); letter-spacing: -0.01em; text-align: center; background: #fff; border: 2rem solid var(--primary); border-radius: 5em; }
			.title { font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em;
				& + & { margin-top: 0.4em; }
			}
			.list { display: grid; gap: 8rem; margin-top: calc(var(--font-size-25) * 0.96); font: var(--font-size-18-to-14) / 1.22222222 var(--font-sans); letter-spacing: -0.022em; }
		}
		&.program-list--column-3 { grid-template-columns: repeat(2, 1fr); gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem) clamp(8rem, calc(11 / var(--container) * 100vw), 11rem);
			@media (width >= 1280px) { grid-template-columns: repeat(3, 1fr); }
			.visual { aspect-ratio: 333 / 200; }
			.title { font: 600 var(--font-size-20) var(--font-sans); text-align: center; }
		}
		.item { display: grid; grid-template-rows: auto 1fr; }
		.image { display: block; width: 100%; height: auto; text-indent: -100vw; }
		.content { padding: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem) clamp(12rem, calc(38 / var(--container) * 100vw), 38rem) clamp(16rem, calc(27 / var(--container) * 100vw), 27rem); background: #f7f6f3;
			&:not(:has(.number, .list)) { align-content: center; }
		}
	}
	.baking-list { display: grid; gap: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem);
		.item { display: grid; align-items: center; gap: calc(var(--content-top) * 0.5) clamp(8rem, calc(50 / var(--container) * 100vw), 50rem);
			@media (width >= 768px) {
				&:nth-child(odd) { grid-template-columns: 40fr 57fr; }
				&:nth-child(even) { grid-template-columns: 57fr 40fr;
					.visual { order: 2; }
				}
			}
		}
		.image { display: block; width: 100%; height: auto; }
		.title { font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; }
		.subtitle { margin-top: 0.38888889em; font: 600 var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.025em; color: var(--primary); }
		.desc { margin-top: 1.5em; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em; }
	}
	.intended-audience-block {
		@media (width >= 768px) { order: -1; }
	}
	.intended-audience { position: sticky; top: var(--content-top); display: grid; grid-template-rows: auto 1fr auto; align-items: start; padding: 34rem 28rem 40rem; padding: clamp(25rem, calc(34 / var(--container) * 100vw), 34rem) clamp(24rem, calc(28 / var(--container) * 100vw), 28rem) clamp(30rem, calc(40 / var(--container) * 100vw), 40rem); background: #fff; border: 2px solid currentColor; box-shadow: 0 15rem 30rem rgb(from var(--black) r g b / 0.1);
		@media (width >= 768px) { min-height: 440rem; }
		.title { font: 700 var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: 0.01em; }
		.list { display: grid; gap: 0.8125em; margin-top: 0.875em; font: var(--font-size-16) / 1.4375 var(--font-sans); letter-spacing: -0.01em; }
		.link { --shadow-opacity: 0.3; display: flex; align-items: center; justify-content: center; gap: 0.5em; margin-top: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem); padding: 1.16666667em 2ch 1.05555556em; font: 600 var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.025em; background: var(--primary); border-radius: 5em; box-shadow: 0 0.83333333em 0.83333333em rgb(from var(--primary) r g b / var(--shadow-opacity));
			&::before { display: block; width: 1.22222222em; aspect-ratio: 22 / 21; background: url("/assets/images/ui/speech-bubble.svg") no-repeat 50% / contain; content: ""; }
			@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
			@media (any-hover) {
				&:not(:hover) { --shadow-opacity: 0; background: #f3f0e9; }
			}
		}
	}
}

.section-our-advantage { contain: content; padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); color: #fff; background: var(--black);
	.heading { font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
	.swiper { overflow: visible; margin-top: 45rem; }
	.swiper-slide { display: grid; grid-template-rows: 1fr auto; align-items: end; width: calc(var(--font-size-20) * 17); aspect-ratio: 34 / 47; padding: 33rem 30rem; background: var(--gray) no-repeat 50% / cover;
		&.swiper-slide--barista-1 { background-image: url("/assets/images/pages/our-advantage/barista-1.webp"); }
		&.swiper-slide--barista-2 { background-image: url("/assets/images/pages/our-advantage/barista-2.webp"); }
		&.swiper-slide--barista-3 { background-image: url("/assets/images/pages/our-advantage/barista-3.webp"); }
		&.swiper-slide--barista-4 { background-image: url("/assets/images/pages/our-advantage/barista-4.webp"); }
		&.swiper-slide--barista-5 { background-image: url("/assets/images/pages/our-advantage/barista-5.webp"); }
		&.swiper-slide--barista-6 { background-image: url("/assets/images/pages/our-advantage/barista-6.webp"); }
		&.swiper-slide--baking-1 { background-image: url("/assets/images/pages/our-advantage/baking-1.webp"); }
		&.swiper-slide--baking-2 { background-image: url("/assets/images/pages/our-advantage/baking-2.webp"); }
		&.swiper-slide--baking-3 { background-image: url("/assets/images/pages/our-advantage/baking-3.webp"); }
		&.swiper-slide--baking-4 { background-image: url("/assets/images/pages/our-advantage/baking-4.webp"); }
		&.swiper-slide--baking-5 { background-image: url("/assets/images/pages/our-advantage/baking-5.webp"); }
	}
	.index { font: 900 var(--font-size-20-to-14) var(--font-sans); color: rgb(from currentColor r g b / 0.3); }
	.title { margin-top: 0.3em; font: 600 var(--font-size-20) var(--font-sans); letter-spacing: -0.01em; }
	.scrollbar { height: 4rem; margin-top: clamp(var(--content-top), calc(51 / var(--container) * 100vw), 51rem); background: rgb(from currentColor r g b / 0.3); }
	.swiper-scrollbar-drag { background: currentColor; border-radius: 0; }
}

.section-career-opportunities { padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
	.heading { margin-bottom: 0.54285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: var(--gray); }
	.list { display: grid; gap: clamp(8rem, calc(12 / var(--container) * 100vw), 12rem) clamp(8rem, calc(20 / var(--container) * 100vw), 20rem); margin-top: 44rem;
		@media (width >= 768px) { grid-template-columns: repeat(6, 1fr);
			.item { grid-column-end: span 2; }
			.item:nth-child(-n + 2) { grid-column-end: span 3; }
		}
	}
	.item { padding: clamp(20rem, calc(40 / var(--container) * 100vw), 40rem) clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(19rem, calc(37 / var(--container) * 100vw), 37rem); background: #f6f0e8; }
	.icon { width: clamp(60rem, calc(80 / var(--container) * 100vw), 80rem); aspect-ratio: 1; background: #fff no-repeat 50% / contain; border-radius: 50%;
		&.icon--barista-1 { background-image: url("/assets/images/pages/career-opportunities/barista-1.svg"); }
		&.icon--barista-2 { background-image: url("/assets/images/pages/career-opportunities/barista-2.svg"); }
		&.icon--barista-3 { background-image: url("/assets/images/pages/career-opportunities/barista-3.svg"); }
		&.icon--barista-4 { background-image: url("/assets/images/pages/career-opportunities/barista-4.svg"); }
		&.icon--barista-5 { background-image: url("/assets/images/pages/career-opportunities/barista-5.svg"); }
		&.icon--baking-1 { background-image: url("/assets/images/pages/career-opportunities/baking-1.svg"); }
		&.icon--baking-2 { background-image: url("/assets/images/pages/career-opportunities/baking-2.svg"); }
		&.icon--baking-3 { background-image: url("/assets/images/pages/career-opportunities/baking-3.svg"); }
		&.icon--baking-4 { background-image: url("/assets/images/pages/career-opportunities/baking-4.svg"); }
		&.icon--baking-5 { background-image: url("/assets/images/pages/career-opportunities/baking-5.svg"); }
	}
	.career-list { display: flex; flex-wrap: wrap; gap: 5rem; margin-top: 1.2em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; color: var(--primary);
		@media (width >= 768px) { padding-right: 0.5ch;
			&:not(:has(li:nth-child(3))) { flex-direction: column; align-items: start; }
		}
		.career-item { padding: 0.2em 0.56em; background: var(--black); border-radius: 8rem; }
		.career-item.is-small { padding: 0.44444444em 0.5em 0.38888889em; font-size: var(--font-size-18-to-14); }
	}
	.application-list { display: grid; gap: 0.5em; margin-top: 2.05555556em; font: var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.01em;
		.application-item { display: flex; }
		.application-item::before { content: "#"; }
	}
}

.section-training-system { padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem) clamp(var(--section-block), calc(117 / var(--container) * 100vw), 117rem); color: #fff; background:
		var(--bg-url) no-repeat 0 50% / auto 100%, url("/assets/images/pages/training-system/bg-noize.png"), var(--black);
	&.is-barista { --bg-url: url("/assets/images/pages/training-system/bg-barista.webp"); }
	&.is-baking { --bg-url: url("/assets/images/pages/training-system/bg-baking.webp"); }
	.heading { margin-bottom: 0.54285714em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-align: center; color: rgb(from currentColor r g b / 0.5); }
	.list { display: grid; max-width: 1600rem; margin-top: clamp(var(--content-top), calc(73 / var(--container) * 100vw), 73rem); margin-inline: auto; counter-reset: index;
		@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); row-gap: 40rem; }
		@media (width >= 1280px) { grid-template-columns: repeat(5, 1fr); }
	}
	.icon { width: 70rem; aspect-ratio: 1; margin-inline: auto; background: no-repeat 50% / contain;
		&.icon--1 { background-image: url("/assets/images/pages/training-system/icon-1.svg"); }
		&.icon--2 { background-image: url("/assets/images/pages/training-system/icon-2.svg"); }
		&.icon--3 { background-image: url("/assets/images/pages/training-system/icon-3.svg"); }
		&.icon--4 { background-image: url("/assets/images/pages/training-system/icon-4.svg"); }
		&.icon--5 { background-image: url("/assets/images/pages/training-system/icon-5.svg"); }
		&.icon--6 { background-image: url("/assets/images/pages/training-system/icon-6.svg"); }
		&.icon--7 { background-image: url("/assets/images/pages/training-system/icon-7.svg"); }
	}
	.index { width: fit-content; min-width: 5.33333333em; margin: 34rem auto 0; padding: 5rem 1ch 4rem; font: 700 var(--font-size-15) / 1 var(--font-sans); letter-spacing: -0.01em; text-align: center; color: var(--black); text-transform: uppercase; background: var(--primary); border-radius: 5em; counter-increment: index;
		&::before { content: "step " counter(index) "."; }
	}
	.title { margin-block: 22rem 36rem; font: 600 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.list { font: 300 var(--font-size-16) var(--font-sans); letter-spacing: -0.01em; }
	.item {
		@media (width >= 768px) { border-inline: 1px solid rgba(255, 255, 255, 0.05);
			&:first-child { border-left: 0; }
			&:last-child { border-right: 0; }
		}
		@media (width < 768px) { padding-block: 40rem; border-block: 1px solid rgba(255, 255, 255, 0.05);
			&:first-child { padding-top: 0; border-top: 0; }
			&:last-child { padding-bottom: 0; border-bottom: 0; }
		}
	}
	.detail-list { display: grid; gap: 1em; margin-inline: auto; font: 300 var(--font-size-16) var(--font-sans); text-wrap: balance;
		@media (width >= 768px) { max-width: 25.6ch; }
		@media (width < 768px) { max-width: 30ch; }
	}
	.detail-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; }
	.accent-bar::before { margin-right: 1.7ch; }
}

.section-philosophy {
	&.is-barista { --bg-url: url("/assets/images/pages/philosophy-barista.webp"); }
	&.is-baking { --bg-url: url("/assets/images/pages/philosophy-baking.webp"); } padding-block: clamp(var(--section-block), calc(135 / var(--container) * 100vw), 135rem);
	@media (width >= 768px) { background: #f3f0e9 var(--bg-url) no-repeat 50% / cover; }
	@media (width < 768px) { --bg-color: rgba(243, 240, 233, 0.6); background:
			linear-gradient(var(--bg-color), var(--bg-color)), var(--bg-url) no-repeat 53% / cover, #f3f0e9; }
	.heading { margin-bottom: 0.88571429em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; }
	.description { margin-top: 1.36363636em; font: var(--font-size-22) / 1.36363636 var(--font-sans); letter-spacing: -0.025em; }
}

.section-portfolio { padding-block: clamp(var(--section-block), calc(97 / var(--container) * 100vw), 97rem) 51rem;
	.heading { font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; text-align: center; }
	.swiper { margin-top: 26rem;
		img { display: block; width: 100%; height: auto; }
	}
	.scrollbar { height: 4rem; margin-top: 30rem; background: #eae9e9; }
	.swiper-scrollbar-drag { background: var(--black); border-radius: 0; }
}

.section-course-schedule {
	.sub-page:has(&) { padding-bottom: 0; } padding-block: 47rem clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem); background: url("/assets/images/pages/schedule-bg.webp") no-repeat 50% 0 / 62.5%;
	.container { display: grid; gap: 40rem clamp(16rem, calc(40 / var(--container) * 100vw), 40rem);
		@media (width >= 768px) { grid-template-columns: 620fr 680fr; }
		@media (width >= 1280px) { padding-inline: clamp(0px, calc(30 / var(--container) * 100vw), 30rem); }
	}
	.heading-block {
		@media (width >= 768px) { padding-top: 104rem; }
	}
	.heading { margin-bottom: 0.6em; font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; }
	.subheading { font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; color: var(--gray); }
	form { font: var(--font-size-16) / 1.5 var(--font-sans); letter-spacing: -0.01em; }
	fieldset { margin: 0; padding: 0; border: 0;
		& + fieldset { margin-top: 36rem; }
	}
	legend { padding: 0; font-weight: 600; }
	.radio-group { display: flex; flex-wrap: wrap; gap: 10rem; margin-top: 14rem; }
	.form-item { display: block; letter-spacing: -0.01em; color: var(--gray); background: #fff; border: 2rem solid #ddd; border-radius: 5rem; }
	.radio-item { display: block; min-width: 8.75em; padding: 11rem 1ch; text-align: center; color: var(--gray);
		&:has(:focus) { outline: 2px solid var(--primary); }
		&:has(:checked) { color: var(--black); border-color: var(--black); box-shadow: 0 15rem 20rem rgba(0, 0, 0, 0.1); }
	}
	.contact-group { display: grid; gap: 10rem; margin-top: 14rem; }
	.field-item { width: 100%; padding: 11rem 18rem;
		&:valid { border-color: var(--black); }
	}
	.privacy-block { margin-top: 16rem; text-align: right; }
	.privacy-label { letter-spacing: -0.01em; }
	.privacy-checkbox { width: 1em; height: 1em; margin-right: 0.625em; translate: 0 13%; }
	.privacy-button { margin-left: 4rem; letter-spacing: -0.01em; color: rgb(from var(--black) r g b / 0.5); }
	.submit-inquiry { display: flex; align-items: center; justify-content: center; gap: 0.77777778em; width: 100%; margin-top: 10rem; padding: 1em 2ch 1.11111111em; font: 700 var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.01em; text-align: center; color: #fff; background: var(--primary); border-radius: 5rem;
		&::before { display: block; width: 1.11111111em; aspect-ratio: 20 / 22; background: url("/assets/images/pages/schedule-submit.svg") no-repeat 50% / contain; content: ""; }
	}
}

.section-exam-schedule { padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; background: #f9f6f1;
	&.section-exam-schedule--bg-white { background: #fff; }
	.heading { font: 700 var(--font-size-30) var(--font-sans); letter-spacing: -0.025em; }
	.scroll-block { overflow: auto; margin-inline: calc(var(--container-edge-offset) * -1); padding-inline: var(--container-edge-offset); }
}

.section-cafe-desserts-course { margin-top: clamp(var(--content-top), calc(94 / var(--container) * 100vw), 94rem); letter-spacing: -0.025em; text-align: center;
	.swiper { overflow: visible; }
	.visual { aspect-ratio: 34 / 47; background: var(--gray) no-repeat 50% / cover;
		&.visual--1 { background-image: url("/assets/images/pages/cafe-desserts-course-1.webp"); }
		&.visual--2 { background-image: url("/assets/images/pages/cafe-desserts-course-2.webp"); }
		&.visual--3 { background-image: url("/assets/images/pages/cafe-desserts-course-3.webp"); }
		&.visual--4 { background-image: url("/assets/images/pages/cafe-desserts-course-4.webp"); }
		&.visual--5 { background-image: url("/assets/images/pages/cafe-desserts-course-5.webp"); }
		&.visual--6 { background-image: url("/assets/images/pages/cafe-desserts-course-6.webp"); }
		&.visual--7 { background-image: url("/assets/images/pages/cafe-desserts-course-7.webp"); }
	}
	.title { margin-block: 1.04em 0.56em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; }
	.description { font: var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.025em; }
	.scrollbar { height: 4rem; margin-top: clamp(var(--content-top), calc(57 / var(--container) * 100vw), 57rem); background: #c0bfbe; }
	.swiper-scrollbar-drag { background: var(--black); border-radius: 0; }
}

.section-healthy-baking-table { margin-top: clamp(var(--content-top), calc(94 / var(--container) * 100vw), 94rem);
	table { width: 100%; text-align: center; }
	col:nth-child(1) { width: 16.42857143%; }
	col:nth-child(2) { width: 27.85714286%; }
	col:nth-child(3) { width: 27.85714286%; }
	col:nth-child(4) { width: 27.85714286%; }
	thead { font: 700 var(--font-size-20) var(--font-sans); color: #fff; }
	th { padding: 0.9em 0.4ch; }
	th:nth-child(1) { background: #2e2a27; }
	th:nth-child(2) { background: #51371b; }
	th:nth-child(3) { background: #876039; }
	th:nth-child(4) { background: #bc934b; }
	td { padding: 1.0875em 0.4ch; border: 1px solid #c6beb6; }
	td:nth-child(1) { border-left: 0; }
	td:nth-child(2) { background: #f6f5f3; }
	td:nth-child(4) { background: #fcf9f6; border-right: 0; }
}

.section-baking-trend { padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem); background: #fbf5e9 url("/assets/images/pages/baking-trend/bg-noise.png");
	.heading { font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.past-trend-list { display: grid; grid-template: 1fr auto / 1fr 1fr 1fr; gap: clamp(4rem, calc(21 / var(--container) * 100vw), 21rem); margin-top: clamp(var(--content-top), calc(45 / var(--container) * 100vw), 45rem); text-align: center;
		.past-trend-item { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; gap: 0; }
		.title-block { margin-bottom: 2em; padding: 2em 0.4ch 1.7em; font: var(--font-size-20-to-12) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; color: #fff; background: var(--black); }
		.icon { height: 3em; margin-bottom: 1.2em; background: no-repeat 50% / contain;
			&.icon--1 { background-image: url("/assets/images/pages/baking-trend/icon-1.svg"); }
			&.icon--2 { background-image: url("/assets/images/pages/baking-trend/icon-2.svg"); }
			&.icon--3 { background-image: url("/assets/images/pages/baking-trend/icon-3.svg"); }
		}
		.sub-heading-block { padding: calc(var(--font-size-20-to-12) * 2) 0.4ch calc(var(--font-size-20-to-12) * 1.85); background: #ede3ca;
			.sub-heading { width: fit-content; margin-inline: auto; padding: 0.4em 0.8ch; font: 700 clamp(12rem, calc(25 / var(--container) * 100vw), 25rem) var(--font-sans); letter-spacing: -0.01em; color: var(--primary); background: var(--black); border-radius: 5em;
				@media (width >= 768px) { min-width: 8.8em; }
			}
			.sub-heading-en { margin-top: 1.0625em; font: 700 var(--font-size-16-to-12) var(--font-sans); letter-spacing: -0.01em; }
			.detail-list { display: grid; gap: 0.77777778em; margin-top: 1.66666667em; font: var(--font-size-18-to-12) var(--font-sans); }
		}
	}
	.down-arrow { width: 2.05em; aspect-ratio: 41 / 50; margin: 1.95em auto 2em; font-size: var(--font-size-20-to-12); background: url("/assets/images/pages/baking-trend/down-arrow.svg") no-repeat 50% / contain; }
	.current-trend-list { display: grid; gap: clamp(8rem, calc(13 / var(--container) * 100vw), 13rem); font: 600 var(--font-size-20) var(--font-sans); color: #fff; counter-reset: index;
		@media (width >= 768px) { grid-template-columns: repeat(4, 1fr); }
		@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
		.current-trend-item { display: grid; grid-template-rows: 1fr auto; gap: 0.3em; aspect-ratio: 34 / 47; padding: 13.82352941% 8.52941176%; background: var(--gray) no-repeat 50% / cover; counter-increment: index;
			&.current-trend-item--1 { background-image: url("/assets/images/pages/baking-trend/bg-1.webp"); }
			&.current-trend-item--2 { background-image: url("/assets/images/pages/baking-trend/bg-2.webp"); }
			&.current-trend-item--3 { background-image: url("/assets/images/pages/baking-trend/bg-3.webp"); }
			&.current-trend-item--4 { background-image: url("/assets/images/pages/baking-trend/bg-4.webp"); }
		}
		.index { align-self: end; font-weight: 900; color: rgb(from currentColor r g b / 0.3); }
		.index::before { content: counter(index, decimal-leading-zero); }
		.sub-heading { font: inherit; letter-spacing: -0.01em; text-wrap: balance; }
	}
}

.section-service-info { padding-block: clamp(var(--section-block), calc(90 / var(--container) * 100vw), 90rem); background: #fbf5e9;
	@media (width >= 1280px) { padding-bottom: 0; }
	.heading { font: 700 var(--font-size-35) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-align: center; }
	.list { position: relative; margin-top: clamp(var(--content-top), calc(68 / var(--container) * 100vw), 68rem);
		&.list--barista { --bg-url: url("/assets/images/pages/service-info-bg-barista.svg"); }
		&.list--patissier { --bg-url: url("/assets/images/pages/service-info-bg-patissier.svg"); }
		@media (width >= 1280px) { width: 100%; aspect-ratio: 1400 / 564; background: var(--bg-url) no-repeat 50% 100% / 51.01214286% auto;
			.item { position: absolute; width: max-content; translate: -50% -50%;
				&.item--1 { top: 74.3%; left: 9.9%; text-align: right; }
				&.item--2 { top: 36.9%; left: 14.4%; text-align: right; }
				&.item--3 { top: 12.8%; left: 50%; text-align: center; }
				&.item--4 { top: 37%; left: 85.5%; }
				&.item--5 { top: 76.4%; left: 90%; }
			}
			.title--1::before, .title--2::before { top: 0.5lh; right: -1.45em; left: auto; }
			.title--3::before { top: -0.45lh; left: 50%; }
		}
		@media (width < 1280px) { display: grid; gap: 16rem 32rem; margin-inline: auto;
			&::before { display: block; grid-column: 1 / -1; width: 100%; max-width: 40ch; aspect-ratio: 714 / 401; margin-inline: auto; background: var(--bg-url) no-repeat 50% 100% / contain; content: ""; }
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr);
				&::before { max-width: 83ch; }
				.item:nth-child(odd) { margin-right: 0; }
				.item:nth-child(even) { margin-left: 0; }
			}
		}
		.item { width: 100%; max-width: 40ch; margin-inline: auto; padding-inline: calc(var(--font-size-20) * 1.1);
			&.item--1 { --dot-color: #f5ba47; }
			&.item--2 { --dot-color: #ef513d; }
			&.item--3 { --dot-color: #72c95d; }
			&.item--4 { --dot-color: #2673c6; }
			&.item--5 { --dot-color: #de8fef; }
		}
	}
	.title { position: relative; margin-bottom: 0.45em; font: 700 var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.025em; }
	.title::before { position: absolute; top: 0.5lh; left: -0.85em; width: 0.6em; aspect-ratio: 1; background: var(--dot-color); border-radius: 50%; translate: -50% -50%; content: ""; }
	.desc { font: var(--font-size-16) / 1.375 var(--font-sans); letter-spacing: -0.01em; }
}

.section-program-steps { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; background: #f6f6f6 url("/assets/images/pages/bg-noise.webp");
	.heading { font: 700 var(--font-size-35) / 1.2 var(--font-sans); letter-spacing: -0.01em;
		strong { font-weight: 700; }
	}
}

.one-day-class-list { display: grid; gap: 8rem clamp(8rem, calc(21 / var(--container) * 100vw), 21rem); margin-top: clamp(var(--content-top), calc(95 / var(--container) * 100vw), 95rem);
	@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
	.item { padding: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(16rem, calc(37 / var(--container) * 100vw), 37rem); background: #fbf5e9; }
	.icon { width: 4.8em; aspect-ratio: 1; margin-inline: auto; font-size: var(--font-size-25); background: #fff no-repeat 50% / contain; border-radius: 50%;
		&.icon--1 { background-image: url("/assets/images/pages/one-day-class-icon-1.webp"); }
		&.icon--2 { background-image: url("/assets/images/pages/one-day-class-icon-2.webp"); }
		&.icon--3 { background-image: url("/assets/images/pages/one-day-class-icon-3.webp"); }
	}
	.title { margin-top: 1.04em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; text-align: center; }
	.title:has(+ .detail-list) { margin-bottom: 1.48em; padding-bottom: 1.04em; border-bottom: 1px solid #c1b8a6; }
	.detail-list { display: grid; gap: 0.72222222em; font: var(--font-size-18-to-14) / 1.22222222 var(--font-sans); }
	dt { display: inline; font-weight: 700; letter-spacing: -0.025em; }
	dt::after { content: " : "; }
	dd { display: inline; letter-spacing: -0.025em; }
}

.page-kakaoTalk-consultation { padding-top: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); border-top: 1px solid #ddd;
	#main-content & { content-visibility: unset; }
	* { letter-spacing: -0.01em; }
	form { display: grid; gap: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); }
	fieldset { margin: 0; padding: 0; text-align: center; border: 0; }
	.step { width: fit-content; min-width: 6.25em; margin-bottom: 1.1875em; margin-inline: auto; padding: 0.28125em 1ch; font: 800 var(--font-size-16) var(--font-sans); color: var(--primary); border: clamp(1px, calc(2 / var(--container) * 100vw), 2rem) solid currentColor; border-radius: 5em; }
	.title { font: 600 var(--font-size-30) var(--font-sans); text-wrap: balance; }
	.warning { margin-top: 0.75em; font: 500 var(--font-size-16) var(--font-sans); text-wrap: balance; color: var(--secondary); }
	.radio-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem); max-width: 1060rem; margin: 35rem auto 0; }
	.radio-label { display: block; align-content: center; height: 100%; padding: 1.07777778em 0.4ch; font: var(--font-size-18-to-14) var(--font-sans); color: #333; background: #f5f5f5; border-radius: 5rem; cursor: pointer; }
	.radio-label:has(:checked) { color: var(--primary); background: var(--black); }
	.radio-label:has(:focus) { outline: 2px solid var(--primary); }
	.text-filed { display: block; width: 100%; max-width: 500rem; margin: 2.05882353em auto 0; padding: 1.11764706em 1.05882353em; font: var(--font-size-17) var(--font-sans); border: 1px solid #ddd; border-radius: 5rem; }
	.text-filed::placeholder { color: #999; }
	.text-filed + .text-filed { margin-top: 1.17647059em; }
	.privacy-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25lh 1.2ch; margin-bottom: 1.875em; }
	.privacy-label { display: inline-flex; align-items: center; gap: 1ch; font: var(--font-size-15) var(--font-sans); color: #666; }
	.privacy-checkbox { flex-shrink: 0; width: 1.33333333em; height: 1.33333333em; border: 1px solid #bbb; border-radius: 50%; appearance: none; }
	.privacy-checkbox:checked { background: url("/assets/images/ui/checked-program.svg") no-repeat 50% / contain; border: 0; }
	.privacy-button { font: var(--font-size-15) var(--font-sans); color: #888; }
	.submit-inquiry { display: flex; align-items: center; justify-content: center; gap: 0.81818182em; width: 100%; max-width: 22.72727273em; margin-inline: auto; padding: 1.22727273em 2ch; font: 700 var(--font-size-22) var(--font-sans); background: var(--primary); border-radius: 5em; box-shadow: 0 10rem 30rem rgb(from var(--primary) r g b / 0.4); }
	.submit-inquiry::after { display: block; width: 0.68181818em; aspect-ratio: 1; background: url("/assets/images/ui/submit-arrow.svg") no-repeat 50% / contain; content: ""; }
}

.page-certification-schedule {
	.section-qualification { padding-top: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		* { letter-spacing: -0.025em; }
		.container { display: grid; gap: clamp(var(--content-top), calc(57 / var(--container) * 100vw), 57rem) clamp(8rem, calc(60 / var(--container) * 100vw), 60rem);
			@media (width >= 768px) { grid-template-columns: 35.71428571% 1fr;
				.notes { grid-column: 1 / -1; }
			}
		}
		.visual-block { position: relative; }
		.visual { position: sticky; top: var(--content-top); display: block; width: 100%; height: auto; }
		.infos { display: grid; gap: 1.25lh; padding-top: 35rem; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); border-top: 1px solid #ddd; }
		.info { display: grid; gap: 0.25lh 2ch; padding-left: 1.8ch;
			@media (width >= 768px) { grid-template-columns: 8.5ch 1fr; }
		}
		.term { font-weight: 700; color: var(--primary); }
		.notes { display: grid; gap: 0.7lh; padding: 1.94444444em 1.61111111em 2em; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); color: #666; background: #f9f6f1; }
		.note { display: grid; grid-template-columns: auto 1fr; gap: 0.4ch; }
		.note::before { content: "-"; }
	}
	.section-quick-tuition-inquiry { margin-top: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); padding: 0; border: 0;
		.heading-block { position: relative; padding-block: clamp(var(--section-block), calc(94.5 / var(--container) * 100vw), 94.5rem); text-align: center; color: #fff; isolation: isolate; }
		.heading-block::before { position: absolute; inset: 0 0 -110.97046414%; z-index: -1; background: #201d1b url("/assets/images/pages/certification-schedule/quick-tuition-inquiry-bg.webp") no-repeat 50% / cover; content: ""; }
		.heading { font: 700 var(--font-size-40) var(--font-sans); letter-spacing: -0.025em; }
		.form-block { padding-top: 50rem; background: #fff; border-radius: 20rem; }
		.radio-list { max-width: 1180rem;
			@media (width >= 1280px) { grid-template-columns: repeat(5, 1fr); }
		}
	}
	.shared-table { margin-top: 36rem;
		col:nth-child(1) { width: 17.85714286%; }
		col:nth-child(2) { width: 23.21428571%; }
		col:nth-child(3) { width: 23.21428571%; }
		col:nth-child(4) { width: 17.85714286%; }
		col:nth-child(5) { width: 17.85714286%; }
	}
}

.page-program { padding-top: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); border-top: 1px solid #ddd;
	&:has(.banner-aside) { padding-top: 0; border-top: 0; }
	#main-content & { content-visibility: unset; }
	* { letter-spacing: -0.01em; }
	.banner-aside { margin-bottom: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); padding-block: 34rem; font: 500 var(--font-size-35) / 1.57142857 var(--font-sans); color: #fff; background: #e76844 no-repeat 50% / cover;
		@media (width >= 768px) { background-image: url("/assets/images/pages/program/bg-pc.webp"); }
		@media (width < 768px) { background-image: url("/assets/images/pages/program/bg-mob.webp"); }
		.container { display: flex; align-items: center; justify-content: center; gap: 0.5lh 1.6em;
			@media (width < 768px) { flex-direction: column; }
		}
		strong { font: 800 1.14285714em var(--font-sans); }
		.coupon { width: 100%; max-width: 10.82857143em; aspect-ratio: 379 / 181; background: url("/assets/images/pages/program/coupon.svg") no-repeat 50% / contain; }
	}
	form { display: grid;
		@media (width >= 767px) { grid-template-columns: repeat(3, 1fr); }
	}
	fieldset { --padding-inline: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem); margin: 0; padding: 0; border: 0; }
	.title-block { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(8rem, calc(40 / var(--container) * 100vw), 40rem); width: 100%; padding: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem); border-block: 1px solid #ddd;
		@media (width >= 768px) {
			fieldset + fieldset & { border-left: 1px solid #ddd; }
		}
		.icon { width: 4.4em; aspect-ratio: 1; font-size: var(--font-size-25); background: #f5f5f5 no-repeat 50% / contain; border-radius: 50%;
			&.icon--1 { background-image: url("/assets/images/pages/program/icon-1.svg"); }
			&.icon--2 { background-image: url("/assets/images/pages/program/icon-2.svg"); }
			&.icon--3 { background-image: url("/assets/images/pages/program/icon-3.svg"); }
		}
		.step { display: block; font: 800 var(--font-size-16) var(--font-sans); color: var(--primary); }
		.title { display: block; margin-block: 0.2em 0.56em; padding: 0; font: 600 var(--font-size-25) var(--font-sans); }
		.subtitle { display: block; font: var(--font-size-16) var(--font-sans); color: #888888; }
	}
	.curriculum-list { padding: clamp(var(--content-top), calc(40 / var(--container) * 100vw), 40rem) var(--padding-inline); font: 500 var(--font-size-18-to-14) var(--font-sans);
		.curriculum-label { display: flex; align-items: center; justify-content: space-between; gap: 1ch; padding: 1.08333333em; border-radius: 5rem; }
		.curriculum-label:has(:checked) { color: var(--primary); background: var(--black);
			&::after { display: block; width: 0.44444444em; aspect-ratio: 1; margin-right: 0.22222222em; border: solid currentColor; border-width: 2rem 2rem 0 0; rotate: 45deg; content: ""; }
		}
		.curriculum-label:has(:focus) { outline: 2px solid var(--primary); }
	}
	.course-list { display: none; gap: 1.2lh; padding: clamp(var(--content-top), calc(58 / var(--container) * 100vw), 58rem) var(--padding-inline); font: 500 var(--font-size-18-to-14) var(--font-sans);
		.course-label { display: flex; align-items: center; gap: 1ch; }
		.course-check { width: 1.22222222em; height: auto; aspect-ratio: 1; border: 1px solid #bbb; border-radius: 50%; appearance: none;
			&:checked { background: url("/assets/images/ui/checked-program.svg") no-repeat 50% / cover; border: 0; }
		}
	}
	&:has(#curriculum-1:checked) #course-1 { display: grid; }
	&:has(#curriculum-2:checked) #course-2 { display: grid; }
	&:has(#curriculum-3:checked) #course-3 { display: grid; }
	&:has(#curriculum-4:checked) #course-4 { display: grid; }
	&:has(#curriculum-5:checked) #course-5 { display: grid; }
	&:has(#curriculum-6:checked) #course-6 { display: grid; }
	&:has(#curriculum-7:checked) #course-7 { display: grid; }
	&:has(#curriculum-8:checked) #course-8 { display: grid; }
	.content { padding: clamp(var(--content-top), calc(58 / var(--container) * 100vw), 58rem) var(--padding-inline) 0; }
	.sub-title { font: 700 var(--font-size-16) var(--font-sans); color: var(--primary); }
	.selection-block {
		.selected-list { margin-top: 2rem; font: 600 var(--font-size-18-to-14) var(--font-sans); }
		.selected-item { display: flex; align-items: center; justify-content: space-between; padding: 0.77777778em 0.22222222em 0.72222222em 0; }
		.selected-item + .selected-item { border-top: 1px solid #ddd; }
		.course-value { display: block; width: 100%; border: 0; outline: 0; }
		.course-remove { width: 15rem; aspect-ratio: 1; background: url("/assets/images/ui/close.svg") no-repeat 50% / contain; }
	}
	.date-time-picker { --radius: 5rem; --border-color: #ddd; max-width: 405rem; margin-top: 23rem;
		.visually-hidden { top: 50%; left: 50%; width: auto; height: auto; translate: -50% -50%; }
		.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-top: 13rem; padding: 13rem 22rem; text-align: center; color: #fff; background: #9d988d; border-radius: var(--radius) var(--radius) 0 0;
			.month-btn { position: relative; align-content: center; width: 8rem; aspect-ratio: 8 / 12;
				&::before { position: absolute; inset: -5rem; content: ""; }
				&::after { display: block; width: 8rem; aspect-ratio: 1; border: solid currentColor; border-width: 2rem 2rem 0 0; content: ""; }
				&.month-btn--prev::after { rotate: -135deg; }
				&.month-btn--next::after { rotate: 45deg; }
			}
			.current-month { font: 600 var(--font-size-17) var(--font-sans); }
		}
		.calendar-body { padding: 13rem 18rem 10rem; font: var(--font-size-14) var(--font-sans); text-align: center; border: solid var(--border-color); border-width: 0 1px 1px; border-radius: 0 0 var(--radius) var(--radius);
			.week, .days { display: grid; grid-template-columns: repeat(7, 1fr); }
			.week { font-weight: 600; color: #999; }
			.days { display: grid; gap: 7rem 0; margin-top: 16rem; font-weight: 500; color: #333; }
			.day { position: relative; display: block; align-content: center; width: 35rem; aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
				li:nth-child(7n + 1) & { color: #d85050; }
				li:nth-child(7n + 7) & { color: #3f7cd7; }
				.days &.day--past { color: #b5b5b5; cursor: normal; pointer-events: none; }
				.days &.day--selected { color: var(--primary); background: #000; }
			}
		}
		.time-select {
			.time-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5rem; margin-top: 10rem; font: var(--font-size-16) var(--font-sans); text-align: center; color: #333; }
			.time-item { position: relative; display: block; width: 100%; padding: 7rem 1ch; border: 1px solid var(--border-color); border-radius: 5rem; }
			.time-item--disabled { color: #b5b5b5; }
			.time-item:has(input:checked) { color: var(--primary); background: var(--black); border-color: #0000; }
		}
	}
	.field-block { display: grid; gap: 10rem; margin-top: 25rem;
		.text-filed { display: block; width: 100%; max-width: 405rem; margin-inline: auto; padding: 1.11764706em 1.05882353em; font: var(--font-size-17) var(--font-sans); border: 1px solid #ddd; border-radius: 5rem; }
		.text-filed::placeholder { color: #999; }
	}
	.privacy-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25lh 1.2ch; margin-top: 1.875em;
		.privacy-label { display: inline-flex; align-items: center; gap: 1ch; font: var(--font-size-15) var(--font-sans); color: #666; }
		.privacy-checkbox { flex-shrink: 0; flex-shrink: 0; width: 1.33333333em; height: 1.33333333em; border: 1px solid #bbb; border-radius: 50%; appearance: none; }
		.privacy-checkbox:checked { flex-shrink: 0; background: url("/assets/images/ui/checked-program.svg") no-repeat 50% / contain; border: 0; }
		.privacy-button { font: var(--font-size-15) var(--font-sans); color: #888; }
	}
	.submit-inquiry { display: flex; align-items: center; justify-content: center; gap: 0.81818182em; width: 100%; max-width: 405rem; margin-top: 1.13636364em; margin-inline: auto; padding: 1.22727273em 2ch; font: 700 var(--font-size-22) var(--font-sans); background: var(--primary); border-radius: 5em; box-shadow: 0 10rem 30rem rgb(from var(--primary) r g b / 0.4); }
	.submit-inquiry::after { display: block; width: 0.68181818em; aspect-ratio: 1; background: url("/assets/images/ui/submit-arrow.svg") no-repeat 50% / contain; content: ""; }
}

.page-sca-diploma {
	.section-cert-program { padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) 100rem; background: #fbf5e9;
		.heading { font: 700 var(--font-size-35) / 1.2 var(--font-sans); text-align: center; }
		.subheading { margin-top: 10rem; font: 700 var(--font-size-20) / 1.2 var(--font-sans); text-align: center; color: var(--primary); }
		.list { display: grid; gap: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem); margin-top: clamp(var(--content-top), calc(45 / var(--container) * 100vw), 45rem); }
		.item { display: grid; align-items: center; gap: clamp(8rem, calc(80 / var(--container) * 100vw), 80rem);
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr);
				&:nth-child(even) .visual { order: 2; }
			}
		}
		.visual { width: 100%; aspect-ratio: 66 / 45; background: var(--gray) var(--bg-url, none) no-repeat 50% / cover;
			&.visual--1 { --bg-url: url("/assets/images/pages/sca-diploma/cert-program-1.webp"); }
			&.visual--2 { --bg-url: url("/assets/images/pages/sca-diploma/cert-program-2.webp"); }
			&.visual--3 { --bg-url: url("/assets/images/pages/sca-diploma/cert-program-3.webp"); }
		}
		.title { margin-bottom: 1.4em; padding-bottom: 1.04em; font: 700 var(--font-size-25) / 1.2 var(--font-sans); letter-spacing: -0.025em; border-bottom: 1px solid #c1b8a6; }
		.desc { margin-top: 1.16666667em; font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em;
			@media (width < 1280px) {
				br { display: none; }
			}
		}
	}
	.section-wcc { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center;
		.badge { width: fit-content; margin-inline: auto; padding: 7rem 17rem; font: 700 var(--font-size-15) var(--font-sans); border: 2px solid var(--primary); border-radius: 5em; }
		.wcc-logo { display: block; width: 10.85714286em; max-width: 380rem; height: auto; margin-top: 1.14285714em; margin-inline: auto; font-size: var(--font-size-35); }
		.heading { margin-top: 1em; font: 700 var(--font-size-35) / 1.2 var(--font-sans); }
		.subheading { margin-top: 0.5em; font: 700 var(--font-size-20) var(--font-sans); letter-spacing: -0.025em; color: var(--primary); }
		.desc { font: var(--font-size-20) / 1.5 var(--font-sans); color: var(--gray);
			.subheading + & { margin-top: 1.45em; }
			.sub-heading + & { margin-top: 1.2em; }
		}
		.section-competition-overview { margin-top: clamp(var(--section-block), calc(94 / var(--container) * 100vw), 94rem); padding: clamp(var(--section-block), calc(70 / var(--container) * 100vw), 70rem) 8rem clamp(var(--section-block), calc(71 / var(--container) * 100vw), 71rem); background: #f7f7f7; }
		.sub-heading { width: fit-content; margin-inline: auto; padding: 0.2em 0.54em; font: 700 var(--font-size-25) var(--font-sans); color: var(--primary); background: var(--black); border-radius: 8rem; }
		.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(16rem, calc(60 / var(--container) * 100vw), 60rem); max-width: 879rem; margin: 54rem auto 0;
			@media (width >= 768px) {
				.logo-item:nth-child(1) .logo { margin-left: auto; }
				.logo-item:nth-child(-n + 2) { flex: 1 45%; }
			}
			@media (width < 768px) { flex-direction: column; width: fit-content; }
		}
		.logo { display: block; width: auto; max-width: 100%; height: auto; height: clamp(50rem, calc(69 / var(--container) * 100vw), 69rem); object-fit: contain; }
	}
	.section-sca-overview { padding-block: clamp(var(--section-block), calc(96 / var(--container) * 100vw), 96rem) clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); background: #fbf5e9;
		.heading { font: 700 var(--font-size-35) / 1.2 var(--font-sans); letter-spacing: -0.01em; text-align: center; }
		.skp-logo { display: block; width: max(10em, 70%); max-width: 320rem; height: auto; margin-block: 1.28571429em 1.14285714em; margin-inline: auto; font-size: var(--font-size-35); }
		.lead { width: fit-content; margin-inline: auto; padding: 0.2em 0.56em; font: 700 var(--font-size-25) / 1.2 var(--font-sans); letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: var(--primary); background: var(--black); border-radius: 8rem; }
		.levels { display: grid; gap: 8rem clamp(8rem, calc(21 / var(--container) * 100vw), 21rem); margin-top: clamp(var(--content-top), calc(40 / var(--container) * 100vw), 40rem); text-align: center;
			@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
			@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.level { padding: clamp(30rem, calc(37 / var(--container) * 100vw), 37rem) 16rem clamp(24rem, calc(32 / var(--container) * 100vw), 32rem); border: 3rem solid #e1d3b8; }
		.level-icon { width: 6em; aspect-ratio: 1; margin-inline: auto; font-size: var(--font-size-20); background: #fff no-repeat 50% / contain; border-radius: 50%;
			&.level-icon--1 { background-image: url("/assets/images/pages/sca-diploma/sca-overview-level-1.webp"); }
			&.level-icon--2 { background-image: url("/assets/images/pages/sca-diploma/sca-overview-level-2.webp"); }
		}
		.level-label { width: fit-content; min-width: 5.33333333em; margin-block: 20rem 17rem; margin-inline: auto; padding: 0.13333333em 2ch; font: 700 var(--font-size-15) var(--font-sans); letter-spacing: -0.01em; text-align: center; background: var(--primary); border-radius: 5em; }
		.level-name { font: 700 var(--font-size-20) var(--font-sans); letter-spacing: -0.01em; }
		.skills { display: grid; gap: clamp(8rem, calc(21 / var(--container) * 100vw), 21rem); margin-top: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem); font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em;
			@media (width > 768px) { grid-template-columns: repeat(6, 1fr);
				.skill:nth-child(-n + 2) { grid-column-end: span 3; }
				.skill:nth-child(n + 3) { grid-column-end: span 2; }
			}
		}
		.skill { padding: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(16rem, calc(20 / var(--container) * 100vw), 20rem) clamp(14rem, calc(35 / var(--container) * 100vw), 35rem) clamp(16rem, calc(40 / var(--container) * 100vw), 40rem); background: #fff; }
		.skill-logo { display: block; width: auto; height: 7.22222222em; }
		.desc { margin-top: 1.61111111em;
			@media (width < 1280px) {
				br { display: none; }
			}
		}
	}
	.section-diploma { display: grid; gap: clamp(calc(var(--content-top) * 1.5), calc(100 / var(--container) * 100vw), 100rem); padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		.container { display: grid; gap: var(--content-top) clamp(8rem, calc(80 / var(--container) * 100vw), 80rem);
			@media (width > 768px) {
				&:nth-child(odd) { grid-template-columns: 50fr 82fr; }
				&:nth-child(even) { grid-template-columns: 82fr 50fr; }
				&:nth-child(even) .logo-container { order: 2; }
			}
		}
		.logo-container { position: relative; }
		.logo { position: sticky; top: var(--content-top); display: block; width: 70%; max-width: 500rem; height: auto; margin-inline: auto;
			@media (width >= 768px) { width: 100%; }
		}
		.heading { margin-bottom: 0.56em; font: 700 var(--font-size-25) / 1.5 var(--font-sans); letter-spacing: -0.025em;
			@media (width >= 768px) { margin-top: -0.32em; }
		}
		.desc { font: var(--font-size-18-to-14) / 1.38888889 var(--font-sans); letter-spacing: -0.01em;
			@media (width < 768px) {
				br { display: none; }
			}
		}
		.diploma-table { width: 100%; margin-top: 35rem; font: var(--font-size-20-to-14) / 1.5 var(--font-sans); text-align: center; border: 0;
			colgroup {
				@media (width >= 768px) {
					col:nth-child(1) { width: 31.2%; }
					col:nth-child(n + 2) { width: 20%; }
				}
			}
			thead th { padding: 0.5lh 0.4ch; font-weight: 700; color: #fff; }
			tbody :where(th, td) { border: 1px solid #c6beb6; }
			tbody th { padding: 0.73lh 0.4ch; font-weight: 400; font-size: var(--font-size-16); border-left: 0; }
			tbody td:last-child { border-right: 0; }
			.bg-1 { background: #2e2a27; }
			.bg-2 { background: #51371b; }
			.bg-3 { background: #876039; }
			.bg-4 { background: #bc934b; }
			.bg-gray { background: #f4f4f4; }
		}
	}
}

.page-facility-info { contain: content;
	.subheading { padding-block: clamp(var(--section-block), calc(95 / var(--container) * 100vw), 95rem) clamp(var(--content-top), calc(55 / var(--container) * 100vw), 55rem); font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; text-align: center;
		&.subheading--border-top{ border-top: 1px solid #ddd; }
	}
	.section-facility-gallery{
		max-width: 1140rem;
		padding-bottom: clamp(var(--section-block), calc(105 / var(--container) * 100vw), 105rem);
		.swiper{
			@media(width>=1280px){
				--swiper-margin: clamp(60rem, calc(120 / var(--container) * 100vw), 120rem);
			}
			@media(width<1280px){
				--swiper-margin: 0;
			}
			&.swiper--main{ padding-inline: var(--swiper-margin); overflow: visible;
				.image{ opacity: .1; }
				.swiper-slide-active .image{ opacity: 1; }
			}
			&.swiper--thumbs{ margin-top: 20rem; max-width: calc(100% - (var(--swiper-margin) * 2));
				.image{ opacity: .4; }
				.swiper-slide::before{ position: absolute; inset: 0; content: ''; border: 3rem solid var(--primary); opacity: 0; }
				.swiper-slide-thumb-active::before{ opacity: 1; }
				.swiper-slide-thumb-active .image{ opacity: 1; }
			}
		}
		.image{ display: block; width: 100%; height: auto; }
		.thumbs-image{ }
		.nav-btn{ position: absolute; top: calc(50% - .5em); width: 1em; aspect-ratio: 1; background: #fff url('/assets/images/pages/facility-gallery/prev-arrow.svg') no-repeat 50% / 40%; border-radius: 50%; z-index: 2; font-size: clamp(44rem, calc(80 / var(--container) * 100vw), 80rem);
			&.nav-btn--prev{ left: 0; }
			&.nav-btn--next{ right: 0; rotate: 180deg; }
			@media(width<1280px){
				&.nav-btn--prev{ translate: 25%; }
			&.nav-btn--next{ translate: -25%; }
			}
		}
		@media (prefers-reduced-motion: no-preference) {
			.swiper--main .image{ transition: .3s; }
		}
	}
	.section-location{
		.map-area { z-index: 0; width: 100%;
			.wrap_map { height: 100%; }
			svg, .map_border, .wrap_controllers, .cont { display: none; }
			@media (width >= 768px) {
				.wrap_map { height: 650rem; }
			}
			@media (width < 768px) { max-height: 650rem; aspect-ratio: 1 / 1.5; }
		}
		.info-container { --gap: 16rem; display: grid; align-items: center; row-gap: var(--content-top); margin-top: -100rem; padding: clamp(var(--content-top), calc(67 / var(--container) * 100vw), 67rem) 0 clamp(var(--content-top), calc(70 / var(--container) * 100vw), 70rem); background: #fff; border: 2px solid var(--black); box-shadow: -8rem 13rem 30rem rgba(0, 0, 0, 0.1);
			@media (width >= 768px) {
				.list { grid-template-columns: subgrid; }
				.item:nth-child(1) { grid-column-end: span 2; }
				.item:nth-child(2) { grid-column-end: span 2; }
			}
			@media (width >= 1280px) { grid-template-columns: repeat(12, 1fr);
				.logo { grid-column: 2 / 5; }
				.list { grid-column: 7 / 12; }
				.item:nth-child(1) { grid-column-end: span 3; }
			}
			@media (768px <= width < 1280px) { grid-template-columns: repeat(6, 1fr); margin-top: calc(clamp(73rem, calc(100 / var(--container) * 100vw), 100rem) * -1);
				.logo { grid-column: 1 / 4; }
				.list { grid-column: 4 / 8; }
			}
			@media (width < 768px) { grid-template-columns: repeat(4, 1fr); justify-items: center;
				.logo, .list { grid-column: 1 / -1; }
				.logo { width: 90%; }
			}
		}
		.logo { display: block; width: 100%; max-width: 321rem; height: auto; padding-inline: var(--gap); }
		.list { display: grid; gap: calc(var(--gap) * 2); padding-inline: var(--gap); }
		.title { position: relative; margin-bottom: 0.54545455em; font: 700 var(--font-size-22) var(--font-sans); letter-spacing: -0.01em; color: var(--primary); }
		.title::before { position: absolute; top: 0.5lh; left: -1.31818182em; width: 0.90909091em; aspect-ratio: 1; background: no-repeat 50% / contain; translate: 0 -50%; content: ""; }
		.title--address::before { background-image: url("/assets/images/ui/address.svg"); }
		.title--tel::before { background-image: url("/assets/images/ui/tel.svg"); }
		.value { font: 300 var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.01em; color: #333; }
	}
}

.page-why {
	.section-why-hero { --bg-color: #f5eee9; padding-block: clamp(var(--section-block), calc(168 / var(--container) * 100vw), 168rem) clamp(calc(var(--section-block) * 1.2), calc(269 / var(--container) * 100vw), 269rem);
		@media (width >= 768px) { background: var(--bg-color) url("/assets/images/pages/why/hero-bg-pc.webp") no-repeat 50% / cover; }
		@media (width < 768px) { background:
				linear-gradient(rgb(from var(--bg-color) r g b / 0.8)), url("/assets/images/pages/why/hero-bg-mob.webp") no-repeat 50% / cover, var(--bg-color); }
		.container { max-width: 1560rem; }
		.eyebrow { margin-left: 0.4ch; font: var(--font-size-40) var(--font-nps); letter-spacing: -0.01em; color: #a86918; }
		.heading { margin-block: 0.4625em 1.0375em; font: 800 clamp(32rem, calc(80 / var(--container) * 100vw), 80rem) var(--font-sans); letter-spacing: -0.01em; }
		.desc { font: 500 clamp(18rem, calc(22 / var(--container) * 100vw), 22rem) / 1.45454545 var(--font-sans); letter-spacing: -0.01em; color: #4a433e; }
		.desc b { font-weight: 700; }
	}
	.section-reason-overview { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; background: #f8f6f1 url("/assets/images/pages/bg-noise-smart-white.webp");
		.symbol-block { position: relative; display: grid; place-items: center; width: 1em; aspect-ratio: 1; margin-bottom: 0.53030303em; margin-inline: auto; font-size: clamp(56rem, calc(66 / var(--container) * 100vw), 66rem); background: #fff; border: 2rem solid var(--primary); border-radius: 50%; box-shadow: 0 0.22727273em 0.22727273em rgb(from var(--primary) r g b / 30%);
			&::before { position: absolute; inset: -12rem; z-index: -1; border: 1px solid var(--primary); border-radius: 50%; opacity: 0.5; content: ""; }
			.symbol-image { display: block; width: 0.6em; height: auto; }
		}
		.eyebrow { font: var(--font-size-35) var(--font-nps); letter-spacing: -0.01em; color: var(--primary); }
		.heading { margin-block: 0.37142857em clamp(var(--content-top), 1.28571429em, 45rem); font: 700 var(--font-size-35) var(--font-sans); letter-spacing: -0.01em; }
		.visual { height: clamp(160rem, calc(450 / var(--container) * 100vw), 450rem); background: var(--black) url("/assets/images/pages/why/reason-overview-visual.webp") no-repeat 50% / cover; border-radius: 20rem; }
		.list { display: grid; row-gap: calc(var(--content-top) * 1.5); margin-block: 60rem 18rem;
			@media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
			@media (width < 768px) { grid-template-columns: repeat(2, 1fr);
				.item:nth-child(3) { grid-column-end: span 2; }
			}
		}
		.icon { width: 100%; height: 2.8em; font-size: var(--font-size-25); color: var(--primary); }
		.title { margin-block: 1.16em 0.56em; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.025em; }
		.desc { font: var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.025em; }
	}
	.why-slide { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		.swiper-slide { width: 320rem; margin-left: 30rem; }
		.cake-image { display: block; width: 100%; height: auto; }
		.swiper-wrapper { transition-timing-function: linear; }
	}
	.section-brand-proof { contain: content; padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		.container { display: grid; align-items: center; gap: 36rem 24rem;
			@media (width >= 768px) { grid-template-columns: repeat(12, 1fr);
				.content { grid-column: 1 / 6; }
				.visual { left: clamp(0px, calc(17 / var(--container) * 100vw), 17rem); grid-column: 6 / 13; }
			}
			@media (width < 768px) {
				.visual { width: 80%; margin-left: auto; }
			}
		}
		.heading { margin-bottom: 1em; font: 700 var(--font-size-35) / 1.275 var(--font-sans); letter-spacing: -0.01em; }
		.heading strong { font-weight: 700; font-size: 1.42857143em; color: var(--primary); }
		.desc { margin-top: 1.4em; font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; color: var(--gray); }
		.desc u { font-weight: 700; letter-spacing: -0.01em; color: var(--black); text-decoration-thickness: 1px; text-underline-offset: 3px; }
		.visual { position: relative; height: clamp(256rem, calc(520 / var(--container) * 100vw), 520rem); }
		.visual::before { position: absolute; inset: 0 var(--container-edge-offset) 0 0; background: url("/assets/images/pages/brand-proof-visual.webp") no-repeat 50% / cover; border-radius: 100em 0 0 100em; content: ""; }
	}
	.section-program-overview { contain: content; padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; color: #fff;
		&.is-barista { background: var(--black) url("/assets/images/pages/why/program-overview-bg-barista.webp") no-repeat 50% 100% / cover; }
		&.is-baking { background: #5a422b url("/assets/images/pages/why/program-overview-bg-baking.webp") no-repeat 50% 100% / cover; }
		.eyebrow { margin-bottom: 0.14285714em; font: var(--font-size-35) var(--font-nps); letter-spacing: -0.01em; color: var(--primary); }
		.heading { font: 700 var(--font-size-35) / 1.5 var(--font-sans); letter-spacing: -0.01em; }
		.subheading { margin-top: 0.8em; font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; color: rgb(from currentColor r g b / 0.5); }
		.swiper { overflow: visible; margin-top: clamp(var(--content-top), calc(45 / var(--container) * 100vw), 45rem);
			.swiper-slide { width: calc(var(--font-size-20) * 17); }
			.visual { display: block; width: 100%; height: auto; }
			.title { margin-top: 0.64em; font: 700 var(--font-size-25) / 1.5 var(--font-sans); letter-spacing: -0.025em; }
			.desc { margin-top: 0.38888889em; font: var(--font-size-18-to-14) / 1.5 var(--font-sans); letter-spacing: -0.025em; color: rgb(from currentColor r g b / 0.7); }
			.scrollbar { height: 4rem; margin-top: clamp(var(--content-top), calc(54 / var(--container) * 100vw), 54rem); background: rgb(from currentColor r g b / 0.3); }
			.swiper-scrollbar-drag { background: currentColor; border-radius: 0; }
		}
		.show-popover { display: flex; align-items: center; justify-content: center; gap: 0.84090909em; width: fit-content; margin: clamp(var(--content-top), calc(100 / var(--container) * 100vw), 100rem) auto 0; padding: 1em 1.95454545em; font: 700 var(--font-size-22) var(--font-sans); letter-spacing: -0.025em; border: 2px solid currentColor; border-radius: 5em;
			&::after { display: block; width: 0.72727273em; aspect-ratio: 1; background: url("/assets/images/ui/submit-arrow-white.svg"); content: ""; }
		}
		.popover { width: 100%; max-width: 1000rem; padding: 41rem 16rem 58rem; color: var(--black); background: #f8f6f1; border: 0; border-radius: 20rem;
			&::backdrop { background: rgba(0, 0, 0, 0.6); }
			.popover-title { margin-bottom: 1em; font: 500 var(--font-size-30) / 1.5 var(--font-sans); letter-spacing: -0.025em;
				b { font-weight: 700; }
			}
			.guide-img { display: block; width: 100%; height: auto; margin-inline: auto;
				&[width="795"] { max-width: 795rem; }
				&[width="950"] { max-width: 950rem; }
			}
			.close-popover { position: absolute; top: 0; right: 0; width: 44rem; aspect-ratio: 1; margin: clamp(8rem, calc(18 / var(--container) * 100vw), 18rem); }
			.close-popover::before, .close-popover::after { position: absolute; inset: 0; display: block; width: 23rem; height: 3rem; margin: auto; background: var(--black); content: ""; }
			.close-popover::before { rotate: 45deg; }
			.close-popover::after { rotate: -45deg; }
		}
	}
	.section-our-strengths::before { display: none; }
	.section-program-overview.is-baking + .section-our-strengths { background: #5a422b; }
	.section-comparison { content: contain; padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; background: #f2f2f2 url("/assets/images/pages/bg-noise.webp");
		.heading { font: 700 var(--font-size-35) / 1.2 var(--font-sans); letter-spacing: -0.025em; }
		.heading b { font-weight: 700; }
		.subheading { margin-top: 1.1em; font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; color: var(--gray); }
		.subheading b { font-weight: 600; color: #333; }
		.comparison-table { width: 100%; table-layout: fixed; background: #fff;
			@media (width >= 768px) { margin-top: 44rem;
				.ballon::before { translate: 31% -61.7%; }
			}
			@media (width < 768px) { margin-top: 60rem;
				.ballon::before { translate: 6% -89.7%; }
			}
			th { padding: 18rem 1ch; font: 700 var(--font-size-20) var(--font-sans); color: #fff; }
			td { padding: 19.7rem 1ch; font: var(--font-size-16) / 1.375 var(--font-sans); border: 1px solid #c6beb6; }
			.bg-1 { background: var(--black); }
			.bg-2 { background: #bc934b; }
			.bg-3 { background: #f7eed5; }
			.ballon { position: relative; }
			.ballon::before { position: absolute; top: 0; right: 0; display: block; width: clamp(120rem, calc(200 / var(--container) * 100vw), 200rem); aspect-ratio: 200 / 73; background: url("/assets/images/pages/why/support-amount-20m.svg") no-repeat 50% / contain; content: ""; }
		}
	}
	.section-cafe-interior { padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
		.heading { font: 700 var(--font-size-35) / 1.2 var(--font-sans); letter-spacing: -0.01em; text-align: center; }
		.heading strong { font-weight: 700; }
		.subheading { margin-top: 1.15em; font: var(--font-size-20) / 1.5 var(--font-sans); letter-spacing: -0.01em; text-align: center; }
		.tablist { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44rem; font: 500 var(--font-size-20) var(--font-sans); border-bottom: 1px solid #ccc;
			.tab { position: relative; padding-block: 17rem; letter-spacing: -0.01em; color: #aaa; }
			.tab.is-selected { font-weight: 700; color: var(--black); }
			.tab.is-selected::before { position: absolute; inset: auto 0 -1px; border-bottom: 3px solid var(--primary); content: ""; }
		}
		.tabpanel-block { margin-top: 40rem;
			.list { display: grid; gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
				@media (width >= 768px) {
					grid-template-columns: repeat(4, 1fr);
				}
				@media (width < 768px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}
			.image { display: block; width: 100%; height: auto; }
		}
	}
	.section-admission-hero { --secondary: #fff6ac; --bg-color: #002940; padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem); text-align: center; color: #fff; background: var(--bg-color) url("/assets/images/pages/why/admission-hero-bg.webp") no-repeat 50% 0 / cover;
		.eyebrow { font: var(--font-size-35) var(--font-nps); letter-spacing: -0.01em; color: var(--secondary); }
		.heading { font: 700 var(--font-size-40) / 1.44 var(--font-sans); letter-spacing: -0.01em;
			b { font-size: 1.25em; }
		}
		.subheading { margin-top: 10rem; font: 300 var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.01em; }
		section { margin-top: 47rem; }
		section + section { margin-top: 97rem; }
		.sub-heading { position: relative; width: fit-content; min-width: 12em; margin-inline: auto; padding: 10rem 48rem; font: 700 var(--font-size-25) var(--font-sans); letter-spacing: -0.01em; color: var(--bg-color); background: var(--secondary); border-radius: 5em; }
		.heading-badge { position: absolute; top: 0; right: 0; font: var(--font-size-35) var(--font-nps); letter-spacing: -0.01em; color: var(--secondary); translate: 45% -74%; rotate: 13deg; }
		.shared-program-steps-list .step::before { border-color: hsla(0, 0%, 100%, 0.2); }
		.list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40rem; font: 500 var(--font-size-20) / 1.5 var(--font-sans);
			.item { --border: 1px solid hsla(0, 0%, 100%, 0.2); padding-block: 40rem 32rem; letter-spacing: -0.025em;
				strong { font-weight: 700; font-size: 1.25em; letter-spacing: inherit; }
				@media (width >= 768px) {
					& + & { border-left: var(--border); }
				}
				@media (width < 768px) {
					& + & { border-top: var(--border); }
				}
			}
			.icon { display: block; width: 100%; height: 70rem; margin-bottom: 24rem; color: var(--primary); }
		}
		.why-slide { padding-bottom: 0; }
	}
	.section-education-support { position: relative; contain: content; padding-block: clamp(var(--section-block), calc(143 / var(--container) * 100vw), 143rem) clamp(var(--section-block), calc(149 / var(--container) * 100vw), 149rem); background: #f8f6f1 url("/assets/images/pages/bg-noise-smart-white.webp"); isolation: isolate;
		&::before { position: absolute; top: calc(50% + (1920px - 100vw) / (1920px - 360px) * 35%); right: 0; z-index: -1; width: clamp(200rem, calc(721 / 1920 * 100vw), 721rem); aspect-ratio: 721 / 600; background: url("/assets/images/pages/why/reward.webp") no-repeat 50% / contain; translate: 12.9% -50%; content: ""; }
		.heading { margin-bottom: 0.825em; font: 700 var(--font-size-40) / 1.36 var(--font-sans); letter-spacing: -0.01em; }
		.heading strong { font-size: 1.25em; }
		strong { font-weight: 700; }
		.subheading { font: 500 var(--font-size-22) / 1.45454545 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
		.subheading strong { letter-spacing: -0.01em; }
		.list { display: inline-grid; gap: var(--content-top) clamp(8rem, calc(20 / var(--container) * 100vw), 20rem); margin-top: clamp(calc(var(--content-top) * 1.5), calc(74 / var(--container) * 100vw), 74rem); font: 600 var(--font-size-20) / 1.25 var(--font-sans); letter-spacing: -0.025em; text-align: center;
			@media (width >= 1280px) { grid-template-columns: repeat(5, 1fr); }
			@media (768px <= width < 1280px) { grid-template-columns: repeat(3, 1fr); }
			@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.item small { font-size: 0.9em; }
		.target-users { width: 9em; aspect-ratio: 1; margin: 0 auto 0.85em; background: no-repeat 50% / cover; border-radius: 50%;
			&.target-users--1 { background-image: url("/assets/images/pages/why/target-users-1.webp"); }
			&.target-users--2 { background-image: url("/assets/images/pages/why/target-users-2.webp"); }
			&.target-users--3 { background-image: url("/assets/images/pages/why/target-users-3.webp"); }
			&.target-users--4 { background-image: url("/assets/images/pages/why/target-users-4.webp"); }
			&.target-users--5 { background-image: url("/assets/images/pages/why/target-users-5.webp"); }
		}
	}
	.inquiry-form { --item-height: 46rem; padding-block: 17rem 19rem; background: hsla(31, 28%, 20%, 0.9); backdrop-filter: blur(10px);
		@media (width >= 768px) { position: sticky; bottom: 0; z-index: 8; }
		fieldset { padding: 0; border: 0; }
		.container { display: grid; gap: clamp(8rem, calc(10 / var(--container) * 100vw), 10rem);
			@media (width >= 768px) { grid-template: "title title title title privacy" "item-1 item-2 item-3 item-4 submit" / 20fr 24fr 24fr auto 18fr; grid-template: "title title title title privacy" "item-1 item-2 item-3 item-4 submit" / 14% 17% 17% 1fr 12%; grid-template: "title title title title privacy" "item-1 item-2 item-3 item-4 submit" / 14.28% 17.14% 17.14% 1fr 12.85%;
				.title { grid-area: title; }
				.item--1 { grid-area: item-1; }
				.item--2 { grid-area: item-2; }
				.item--3 { grid-area: item-3; }
				.item--4 { grid-area: item-4; }
				.privacy-block { grid-area: privacy; }
				.submit-inquiry { grid-area: submit; }
			}
			@media (width >= 1280px) {
				.item--4 { margin-right: clamp(0px, calc(49 / var(--container) * 100vw), 49rem); }
			}
		}
		.title { font: 700 var(--font-size-22) var(--font-sans); letter-spacing: -0.01em; color: #fff; }
		.field { width: 100%; min-width: 0; height: var(--item-height); padding-inline: 1.5ch; letter-spacing: -0.025em; color: #333; border: 0; border-radius: 5rem; }
		.privacy-block { display: inline-flex; place-self: end; align-items: center; gap: 0.3ch; font-size: 14rem; letter-spacing: -0.025em; color: #fff; }
		.privacy-checkbox { gap: 0.3ch; width: 16rem; aspect-ratio: 1; background: url("/assets/images/ui/check-circle-white.svg") no-repeat 50% / contain; translate: 0 -7%; appearance: none;
			&:not(:checked) { opacity: 0.4; }
		}
		.privacy-label, .privacy-button { letter-spacing: inherit; }
		.privacy-label { display: inline-flex; align-items: center; gap: 1ch; }
		.submit-inquiry { min-width: 8.8ch; height: var(--item-height); padding-inline: 0.4ch; font: 700 var(--font-size-18) var(--font-sans); letter-spacing: -0.025em; background: var(--primary); border-radius: 5rem; }
	}
}

.page-tuition-fee-list {
	.section-exam-schedule { padding-block: 0; }
}

.board-view--interview{
	@media(width>=1280px){
		img{ width: 20%; }
	}
	@media(width<1280px){
		img{ width: 50%; }
	}
}