/*
 * EAC course experiences — 2026
 * Shared interaction grammar, five independent art directions.
 */

.eac-courseExperience {
  --ce-navy: #10263a;
  --ce-teal: #187466;
  --ce-pink: #b23470;
  --ce-yellow: #f3d043;
  --ce-ink: #172433;
  --ce-cream: #f8f4e9;
  --ce-white: #fff;
  --ce-shell: min(1180px, calc(100vw - 48px));
  position: relative;
  overflow: clip;
  color: var(--ce-ink);
  background: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.8;
  isolation: isolate;
}

.eac-courseExperience *,
.eac-courseExperience *::before,
.eac-courseExperience *::after { box-sizing: border-box; }
.eac-courseExperience :where(h1, h2, h3, p, figure, ol) { margin: 0; }
.eac-courseExperience :where(img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.eac-courseExperience :where(a) { color: inherit; text-decoration: none; }
.eac-courseExperience :where(button, a, summary) { -webkit-tap-highlight-color: transparent; }
.eac-courseExperience em { color: inherit; font-style: normal; }
.ce-shell { width: var(--ce-shell); margin-inline: auto; }
.ce-section { position: relative; padding: clamp(92px, 11vw, 160px) 0; }
.ce-index,
.ce-kicker {
  font-family: Yaldevi, Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ce-sectionHead { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; margin-bottom: 72px; }
.ce-sectionHead h2,
.ce-photoStoryCopy h2,
.ce-faq h2 {
  max-width: 850px;
  font-size: clamp(34px, 4.8vw, 68px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.045em;
}
.ce-sectionHead--light { color: #fff; }
.ce-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.eac-courseExperience .ce-button,
.eac-courseExperience .ce-mobileCta {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0 28px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.eac-courseExperience .ce-button:hover { transform: translateY(-3px); }
.eac-courseExperience .ce-button:focus-visible,
.eac-courseExperience summary:focus-visible { outline: 3px solid var(--ce-yellow); outline-offset: 4px; }
.eac-courseExperience .ce-button--primary { color: #fff; background: var(--ce-pink); box-shadow: 7px 7px 0 var(--ce-navy); }
.eac-courseExperience .ce-button--primary:hover { box-shadow: 3px 3px 0 var(--ce-navy); }
.eac-courseExperience .ce-button--text { min-height: 48px; border-bottom-color: currentColor; padding-inline: 10px; }
.eac-courseExperience .ce-button--ghost { color: #fff; border-color: rgba(255,255,255,.56); }
.eac-courseExperience .ce-button--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.eac-courseExperience .ce-button--outlineDark { color: var(--ce-navy); border-color: var(--ce-navy); }
.eac-courseExperience .ce-button--ghostDark { color: var(--ce-navy); border-color: rgba(16,38,58,.4); }
.ce-note { margin-top: 18px; font-size: 13px; opacity: .72; }
.ce-mobileCta { display: none !important; }
.eac-courseExperience ~ .eac-globalStickyCta,
.eac-courseExperience ~ .eac-instagramFixedBtn { display: none !important; }

/* Shared hero structure */
.ce-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  min-height: min(820px, calc(100svh - 76px));
}
.ce-heroMedia { position: relative; grid-column: 2; min-width: 0; overflow: hidden; }
.ce-heroMedia picture,
.ce-heroPicture { display: block; width: 100%; height: 100%; }
.ce-heroCopy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  z-index: 3;
  padding: clamp(58px, 8vw, 120px) clamp(38px, 7vw, 104px);
}
.ce-heroCopy h1 {
  margin-top: 22px;
  font-size: clamp(50px, 6.1vw, 92px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.06em;
}
.ce-heroCopy > p:not(.ce-kicker) { max-width: 590px; margin-top: 28px; font-size: clamp(16px, 1.45vw, 20px); }
.ce-heroCopy em { position: relative; z-index: 1; }
.ce-heroCopy em::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.08em; bottom: .08em; height: .28em; background: var(--ce-yellow); transform: rotate(-1deg); }

/* reveal enhancement */
.eac-courseMotion [data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .72s ease, transform .72s cubic-bezier(.2,.75,.2,1); }
.eac-courseMotion [data-reveal].is-visible { opacity: 1; transform: none; }

/* ELEMENTARY — hand-drawn curiosity map */
.eac-courseExperience--elementary { --ce-paper: #fffaf0; background: var(--ce-paper); }
.ce-hero--elementary { background: linear-gradient(105deg, #fff8df 0 48%, #eef7f1 48%); }
.ce-hero--elementary::before {
  content: ""; position: absolute; inset: 0 50% 0 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(#496b66 1px, transparent 1px), linear-gradient(90deg, #496b66 1px, transparent 1px);
  background-size: 32px 32px;
}
.ce-heroMedia--paper { margin: 36px 36px 36px 0; clip-path: polygon(8% 3%, 98% 0, 94% 93%, 4% 100%, 0 15%); }
.ce-heroMedia--paper img { object-position: 54% center; }
.ce-hero--elementary .ce-kicker { color: var(--ce-teal); }
.ce-hero--elementary .ce-heroCopy::before { content: "EAC NOTE / 01"; display: block; width: max-content; margin-bottom: 40px; border: 2px solid var(--ce-navy); padding: 5px 12px; font: 800 12px/1 Yaldevi, sans-serif; transform: rotate(-3deg); }
.ce-sticker { position: absolute; z-index: 2; display: grid; place-items: center; color: #fff; font-weight: 900; line-height: 1; }
.ce-sticker--one { top: 8%; left: 7%; width: 116px; aspect-ratio: 1; border-radius: 50%; background: var(--ce-pink); transform: rotate(-10deg); }
.ce-sticker--two { right: 4%; bottom: 7%; border: 2px solid var(--ce-navy); padding: 14px 17px; color: var(--ce-navy); background: var(--ce-yellow); transform: rotate(6deg); }
.ce-pencilLine { position: absolute; left: 4%; right: 47%; bottom: 36px; height: 7px; background: var(--ce-pink); transform: rotate(-1.5deg) scaleX(var(--ce-scroll, .12)); transform-origin: left; }
.ce-wordRail { overflow: hidden; border-block: 2px solid var(--ce-navy); background: var(--ce-yellow); transform: rotate(-.5deg); }
.ce-wordRail > div { display: flex; min-width: max-content; padding: 13px 0; animation: ce-rail 26s linear infinite; }
.ce-wordRail span { display: flex; align-items: center; gap: 28px; padding-left: 28px; font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.ce-wordRail span::after { content: "✦"; font-size: 15px; }
@keyframes ce-rail { to { transform: translateX(-35%); } }
.ce-elementaryMap { background: var(--ce-paper); }
.ce-elementaryMap .ce-index { color: var(--ce-pink); }
.ce-mapCanvas { position: relative; min-height: 590px; }
.ce-mapPath { position: absolute; inset: 15px 0 auto; width: 100%; height: 470px; overflow: visible; }
.ce-mapPath path { fill: none; stroke: var(--ce-navy); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .02 .025; }
.eac-courseMotion .ce-mapPath path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ce-scroll, 0)); }
.ce-mapPoint { position: absolute; width: min(30%, 315px); border: 2px solid var(--ce-navy); padding: 34px 30px 30px; background: #fff; box-shadow: 11px 11px 0 var(--ce-yellow); }
.ce-mapPoint > span { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -61px; border: 2px solid var(--ce-navy); border-radius: 50%; background: var(--ce-pink); color: #fff; font: 800 15px/1 Yaldevi, sans-serif; }
.ce-mapPoint h3 { margin-top: 20px; font-size: 23px; }
.ce-mapPoint p { margin-top: 10px; font-size: 15px; }
.ce-mapPoint--one { left: 1%; top: 285px; transform: rotate(-2deg); }
.ce-mapPoint--two { left: 35%; top: 70px; transform: rotate(1.5deg); }
.ce-mapPoint--three { right: 1%; top: 245px; transform: rotate(-1deg); }
.eac-courseMotion .ce-mapPoint.is-visible { transform: rotate(0); }
.ce-gradeSpread { padding-top: 50px; background: #e7f3ed; }
.ce-gradeGrid { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.ce-gradePhoto { grid-row: 1 / 3; min-height: 650px; }
.ce-gradePhoto img { object-position: 50% center; }
.ce-gradeCard { position: relative; border: 2px solid var(--ce-navy); padding: 46px; background: #fff; }
.ce-gradeCard::after { content: ""; position: absolute; right: 22px; bottom: 22px; width: 34px; height: 34px; border-radius: 50%; background: var(--ce-yellow); }
.ce-gradeCard > p:first-child { color: var(--ce-pink); font: 800 13px/1 Yaldevi, sans-serif; letter-spacing: .13em; }
.ce-gradeCard h2 { margin-top: 9px; font-size: 42px; }
.ce-gradeCard strong { display: block; margin-top: 18px; color: var(--ce-teal); font-size: 18px; }
.ce-gradeCard p:last-child { margin-top: 10px; }
.ce-elementaryPlan { background: #fff; }
.ce-elementaryPlan .ce-index { color: var(--ce-teal); }
.ce-ticketGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ce-ticket { position: relative; border: 2px solid var(--ce-navy); padding: 42px; overflow: hidden; background: #fffaf0; }
.ce-ticket::after { content: ""; position: absolute; top: 50%; right: -22px; width: 44px; height: 44px; border: 2px solid var(--ce-navy); border-radius: 50%; background: #fff; transform: translateY(-50%); }
.ce-ticket > span { font-size: 22px; font-weight: 900; }
.ce-ticket strong { display: block; margin: 14px 0; color: var(--ce-pink); font: 900 clamp(46px, 6vw, 78px)/1 Yaldevi, sans-serif; }
.ce-ticket small { font-family: "Noto Sans JP", sans-serif; font-size: 15px; }
.ce-ticket--featured { color: #fff; background: var(--ce-navy); }
.ce-photoStory { background: var(--ce-teal); color: #fff; }
.ce-photoStoryGrid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.ce-widePhoto { display: block; min-height: 520px; }
.ce-widePhoto img { min-height: 520px; object-position: center; }
.ce-photoStoryCopy h2 { margin-top: 28px; }
.ce-stepList { display: grid; gap: 20px; margin-top: 34px; padding: 0; list-style: none; counter-reset: ce-step; }
.ce-stepList li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; border-top: 1px solid rgba(255,255,255,.38); padding-top: 18px; }
.ce-stepList b { color: var(--ce-yellow); font-size: 18px; }
.ce-faq { background: #fff; }
.ce-faqGrid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 8vw, 130px); }
.ce-faq .ce-index { margin-bottom: 24px; color: var(--ce-pink); }
.ce-faq details { border-top: 1px solid currentColor; }
.ce-faq details:last-child { border-bottom: 1px solid currentColor; }
.ce-faq summary { position: relative; padding: 24px 52px 24px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 800; }
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary::after { content: "+"; position: absolute; top: 19px; right: 4px; font: 400 28px/1 Yaldevi, sans-serif; transition: transform .25s ease; }
.ce-faq details[open] summary::after { transform: rotate(45deg); }
.ce-faq details p { padding: 0 46px 25px 0; opacity: .82; }
.ce-finalCta { width: min(1320px, calc(100vw - 40px)); margin: 0 auto 80px; padding: clamp(76px, 10vw, 130px) clamp(28px, 9vw, 130px); text-align: center; }
.ce-finalCta > p { margin-bottom: 16px; font: 800 13px/1 Yaldevi, sans-serif; letter-spacing: .18em; }
.ce-finalCta h2 { max-width: 900px; margin-inline: auto; font-size: clamp(36px, 5vw, 70px); line-height: 1.25; letter-spacing: -.04em; }
.ce-finalCta .ce-actions { justify-content: center; }
.ce-finalCta--elementary { color: #fff; background: var(--ce-navy); box-shadow: 16px 16px 0 var(--ce-yellow); transform: rotate(-.4deg); }

/* MIDDLE — dark score lab */
.eac-courseExperience--middle { --ce-signal: #f3d043; color: #edf4f1; background: #07151e; }
.ce-hero--middle { min-height: 760px; background: #081720; }
.ce-heroMedia--lab { grid-column: 1 / 3; grid-row: 1; }
.ce-heroMedia--lab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,15,22,.98) 0%, rgba(5,15,22,.85) 33%, rgba(5,15,22,.18) 68%, rgba(5,15,22,.36)); }
.ce-heroMedia--lab img { filter: saturate(.72) contrast(1.08); object-position: 62% center; }
.ce-hero--middle .ce-heroCopy { grid-column: 1; color: #fff; }
.ce-hero--middle .ce-kicker { color: var(--ce-signal); }
.ce-hero--middle .ce-heroCopy em { color: var(--ce-signal); }
.ce-hero--middle .ce-heroCopy em::after { display: none; }
.eac-courseExperience .ce-button--signal { color: #07151e; background: var(--ce-signal); box-shadow: 0 0 30px rgba(243,208,67,.2); }
.ce-labHud { position: absolute; z-index: 2; right: 36px; bottom: 32px; display: flex; gap: 8px; }
.ce-labHud span { border: 1px solid rgba(255,255,255,.5); padding: 9px 12px; color: #fff; background: rgba(4,15,22,.5); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .08em; }
.ce-scanLine { position: absolute; z-index: 2; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ce-signal), transparent); box-shadow: 0 0 12px var(--ce-signal); animation: ce-scan 4.5s ease-in-out infinite; }
@keyframes ce-scan { 50% { transform: translateY(-68vh); opacity: .3; } }
.ce-labStatus { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid rgba(255,255,255,.18); }
.ce-labStatus span { padding: 22px 12px; border-right: 1px solid rgba(255,255,255,.18); text-align: center; color: var(--ce-signal); font: 700 13px/1 ui-monospace, monospace; letter-spacing: .08em; }
.ce-strategy { background: #0c202b; }
.ce-strategy .ce-index { color: var(--ce-signal); }
.ce-strategyTrack { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding-top: 78px; }
.ce-strategyLine { position: absolute; top: 28px; left: 3%; right: 3%; height: 2px; overflow: hidden; background: rgba(255,255,255,.18); }
.ce-strategyLine i { display: block; width: calc(var(--ce-scroll, .2) * 100%); height: 100%; background: var(--ce-signal); box-shadow: 0 0 12px var(--ce-signal); transition: width .15s linear; }
.ce-strategyTrack article { min-height: 310px; border: 1px solid rgba(255,255,255,.18); padding: 30px; background: rgba(255,255,255,.025); }
.ce-strategyTrack article > span { color: rgba(255,255,255,.5); font: 700 11px/1 ui-monospace, monospace; }
.ce-strategyTrack article > b { display: block; margin-top: 45px; color: var(--ce-signal); font: 500 54px/1 Yaldevi, sans-serif; }
.ce-strategyTrack h3 { margin-top: 18px; font-size: 24px; }
.ce-strategyTrack p { margin-top: 12px; color: rgba(255,255,255,.68); font-size: 14px; }
.ce-middleSystem { background: #f0f0e9; color: #10212a; }
.ce-systemGrid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.ce-systemVisual { position: relative; min-height: 690px; }
.ce-tallPhoto { display: block; width: 100%; height: 100%; min-height: inherit; }
.ce-systemVisual img { min-height: 690px; object-position: 50% center; }
.ce-systemStamp { position: absolute; right: -30px; bottom: 50px; display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; color: #07151e; background: var(--ce-signal); text-align: center; font: 900 26px/1 Yaldevi, sans-serif; transform: rotate(8deg); }
.ce-systemStamp small { font-size: 10px; letter-spacing: .12em; }
.ce-systemCopy h2 { margin-top: 24px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.25; letter-spacing: -.04em; }
.ce-dataRows { margin-top: 46px; }
.ce-dataRows > div { display: grid; grid-template-columns: 54px 170px 1fr; gap: 14px; border-top: 1px solid #748086; padding: 19px 0; }
.ce-dataRows span { font: 800 14px/1 Yaldevi, sans-serif; }
.ce-dataRows b { font-size: 16px; }
.ce-dataRows p { font-size: 14px; }
.ce-middlePrice { padding-block: 75px; background: var(--ce-signal); color: #07151e; }
.ce-priceLab { display: grid; grid-template-columns: 1fr auto auto; gap: 50px; align-items: center; }
.ce-priceLab h2 { margin-top: 12px; font-size: 36px; }
.ce-priceLab strong { font: 900 clamp(50px, 6vw, 76px)/1 Yaldevi, sans-serif; }
.ce-priceLab small { font: 700 14px/1 "Noto Sans JP", sans-serif; }
.ce-photoStory--dark { background: #07151e; }
.ce-faq--dark { color: #fff; background: #0c202b; }
.ce-faq--dark .ce-index { color: var(--ce-signal); }
.ce-finalCta--middle { border: 1px solid rgba(255,255,255,.22); background: radial-gradient(circle at 50% 130%, rgba(243,208,67,.22), transparent 45%), #07151e; }
.ce-finalCta--middle > p { color: var(--ce-signal); }

/* HIGH — future editorial */
.eac-courseExperience--high { --ce-forest: #173c36; color: #182b34; background: #f5f1e8; }
.ce-hero--high { display: block; min-height: min(850px, calc(100svh - 76px)); }
.ce-heroMedia--future { position: absolute; inset: 0; }
.ce-heroMedia--future::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,241,232,.96) 0%, rgba(245,241,232,.82) 32%, rgba(245,241,232,.08) 66%); }
.ce-heroMedia--future img { object-position: 66% center; }
.ce-hero--high .ce-heroCopy { position: relative; width: min(670px, 51vw); min-height: inherit; display: flex; flex-direction: column; justify-content: center; }
.ce-hero--high .ce-kicker { color: var(--ce-forest); }
.ce-hero--high .ce-heroCopy h1 { font-family: "Shippori Mincho", "Yu Mincho", serif; font-weight: 700; }
.ce-hero--high .ce-heroCopy em { color: var(--ce-forest); }
.ce-hero--high .ce-heroCopy em::after { height: 2px; bottom: -.02em; background: var(--ce-forest); }
.ce-nextWord { position: absolute; z-index: 1; right: -1vw; bottom: -6vw; color: rgba(255,255,255,.52); font: 900 clamp(120px, 23vw, 360px)/.75 Yaldevi, sans-serif; letter-spacing: -.09em; }
.eac-courseExperience .ce-button--high { color: #fff; background: var(--ce-forest); box-shadow: 8px 8px 0 var(--ce-pink); }
.ce-futureIndex { padding: clamp(100px, 12vw, 180px) 0; background: #f5f1e8; }
.ce-futureIndex .ce-index { color: var(--ce-pink); }
.ce-indexRows { border-top: 1px solid #80908c; }
.ce-indexRows article { display: grid; grid-template-columns: 80px 160px 1fr 1fr; gap: 22px; align-items: center; border-bottom: 1px solid #80908c; padding: 34px 0; }
.ce-indexRows article > span { font: 500 32px/1 Yaldevi, sans-serif; }
.ce-indexRows article > p { color: var(--ce-pink); font: 800 13px/1 Yaldevi, sans-serif; letter-spacing: .12em; }
.ce-indexRows h3 { font-family: "Shippori Mincho", serif; font-size: 34px; }
.ce-indexRows small { font-size: 14px; }
.ce-highRoute { background: var(--ce-forest); color: #fff; }
.ce-highRouteGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.ce-highImage { min-height: 700px; }
.ce-highImage img { min-height: 700px; object-position: 52% center; }
.ce-highRouteCopy .ce-index { color: #dfb6c9; }
.ce-highRouteCopy h2 { margin-top: 26px; font: 700 clamp(38px, 4.6vw, 66px)/1.35 "Shippori Mincho", serif; }
.ce-routeList { margin-top: 44px; padding: 0; list-style: none; }
.ce-routeList li { display: grid; grid-template-columns: 78px 150px 1fr; gap: 18px; border-top: 1px solid rgba(255,255,255,.3); padding: 22px 0; }
.ce-routeList span { color: #dfb6c9; font: 700 13px/1 Yaldevi, sans-serif; }
.ce-routeList b { font-size: 16px; }
.ce-routeList p { color: rgba(255,255,255,.72); font-size: 14px; }
.ce-highPlan { background: #e9e2d5; }
.ce-editorialCard { display: grid; grid-template-columns: 1fr auto auto; gap: 50px; align-items: center; border-block: 1px solid var(--ce-navy); padding-block: 40px; }
.ce-editorialCard h2 { margin-top: 15px; font: 700 40px/1.3 "Shippori Mincho", serif; }
.ce-editorialCard > div:nth-child(2) span { display: block; font-size: 14px; }
.ce-editorialCard strong { display: block; margin-top: 8px; color: var(--ce-forest); font: 800 clamp(48px, 6vw, 72px)/1 Yaldevi, sans-serif; }
.ce-editorialCard small { font: 700 13px/1 "Noto Sans JP", sans-serif; }
.ce-photoStory--high { color: var(--ce-navy); background: #fff; }
.ce-photoStory--high .ce-index { color: var(--ce-pink); }
.ce-faq--high { background: #f5f1e8; }
.ce-faq--high h2 { font-family: "Shippori Mincho", serif; font-weight: 700; }
.ce-finalCta--high { border: 1px solid var(--ce-navy); background: #eee8dc; }
.ce-finalCta--high > p { color: var(--ce-pink); }
.ce-finalCta--high h2 { font-family: "Shippori Mincho", serif; font-weight: 700; }

/* PROGRAMMING — code workshop */
.eac-courseExperience--programming { --ce-code: #5df2c2; --ce-violet: #9b85ff; color: #e9fff7; background: #071413; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.eac-courseExperience--programming :where(h1,h2,h3,.ce-button,.ce-faq summary) { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.ce-hero--programming { min-height: 790px; border-bottom: 1px solid rgba(93,242,194,.22); background: #071413; }
.ce-heroMedia--code { grid-column: 1 / 3; grid-row: 1; margin: 32px; border: 1px solid rgba(93,242,194,.34); }
.ce-heroMedia--code::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7,20,19,.97) 0%, rgba(7,20,19,.88) 38%, rgba(7,20,19,.08) 72%); }
.ce-heroMedia--code::after { content: ""; position: absolute; z-index: 1; inset: 0; opacity: .18; background-image: linear-gradient(rgba(93,242,194,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(93,242,194,.35) 1px, transparent 1px); background-size: 52px 52px; }
.ce-heroMedia--code img { object-position: 64% center; filter: saturate(.78) contrast(1.08); }
.ce-hero--programming .ce-heroCopy { grid-column: 1; color: #fff; }
.ce-hero--programming .ce-kicker { color: var(--ce-code); }
.ce-hero--programming .ce-heroCopy em { color: var(--ce-code); }
.ce-hero--programming .ce-heroCopy em::after { display: none; }
.eac-courseExperience .ce-button--code { color: #04100e; background: var(--ce-code); box-shadow: 7px 7px 0 var(--ce-violet); }
.ce-codeWindow { position: absolute; z-index: 3; right: 4%; bottom: 5%; width: min(350px, 30vw); border: 1px solid rgba(93,242,194,.55); color: #dffef5; background: rgba(2,12,11,.85); backdrop-filter: blur(10px); }
.ce-codeWindow > span { display: block; border-bottom: 1px solid rgba(93,242,194,.34); padding: 9px 13px; color: rgba(255,255,255,.58); font-size: 11px; }
.ce-codeWindow code { display: block; min-height: 114px; padding: 18px; color: var(--ce-code); font: 15px/1.8 ui-monospace, monospace; }
.ce-codeWindow code b { color: var(--ce-yellow); }
.ce-buildLoop { padding: 40px 0 54px; border-bottom: 1px solid rgba(93,242,194,.2); background: #0a1c19; }
.ce-buildLoop .ce-index { margin-bottom: 30px; color: var(--ce-violet); }
.ce-loopTrack { display: flex; align-items: stretch; gap: 12px; }
.ce-loopTrack article { flex: 1; position: relative; border: 1px solid rgba(93,242,194,.28); padding: 24px 18px; background: rgba(93,242,194,.025); transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.ce-loopTrack article.is-active { border-color: var(--ce-code); color: #04100e; background: var(--ce-code); }
.ce-loopTrack article > span { color: var(--ce-violet); font-size: 11px; }
.ce-loopTrack article b { display: block; margin-top: 20px; font-size: 16px; }
.ce-loopTrack article small { display: block; margin-top: 4px; opacity: .65; }
.ce-loopTrack > i { align-self: center; color: var(--ce-code); font-style: normal; }
.ce-codeLesson { background: #071413; }
.ce-codeLessonGrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.ce-codeLessonCopy .ce-index { color: var(--ce-violet); }
.ce-codeLessonCopy h2 { margin-top: 28px; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.25; letter-spacing: -.04em; }
.ce-codeSteps { margin-top: 45px; padding: 0; list-style: none; }
.ce-codeSteps li { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 18px; border-top: 1px solid rgba(93,242,194,.24); padding: 20px 0; }
.ce-codeSteps b { color: var(--ce-code); font: 400 32px/1 ui-monospace, monospace; }
.ce-codeLessonVisual { position: relative; min-height: 660px; }
.ce-codeLessonVisual img { min-height: 660px; object-position: 55% center; }
.ce-codeLessonVisual > span { position: absolute; right: -25px; bottom: 35px; display: grid; place-items: center; width: 118px; aspect-ratio: 1; border: 1px solid var(--ce-code); color: var(--ce-code); background: #071413; text-align: center; font-size: 22px; line-height: 1.2; }
.ce-makerGrid { background: #0e211d; }
.ce-makerGrid .ce-index { color: var(--ce-violet); }
.ce-terminalCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(93,242,194,.22); }
.ce-terminalCards article { min-height: 330px; padding: 38px; background: #0b1b18; }
.ce-terminalCards span { color: var(--ce-violet); font-size: 12px; }
.ce-terminalCards h3 { margin-top: 70px; color: var(--ce-code); font-size: 26px; }
.ce-terminalCards p { margin-top: 17px; color: rgba(233,255,247,.68); font-family: "Noto Sans JP", sans-serif; font-size: 14px; }
.ce-programPrice { background: #071413; }
.ce-programPriceGrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1px; align-items: stretch; background: rgba(93,242,194,.3); }
.ce-programPriceGrid > div:first-child { min-height: 560px; }
.ce-programPriceGrid img { min-height: 560px; }
.ce-programPriceCard { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 6vw, 80px); background: #0c1f1b; }
.ce-programPriceCard .ce-index { color: var(--ce-violet); }
.ce-programPriceCard h2 { margin-top: 18px; font-size: 35px; }
.ce-programPriceCard > span { margin-top: 30px; color: var(--ce-code); }
.ce-programPriceCard strong { margin: 8px 0 10px; color: #fff; font: 700 clamp(49px, 6vw, 78px)/1 ui-monospace, monospace; }
.ce-programPriceCard small { font: 700 13px/1 "Noto Sans JP", sans-serif; }
.ce-programPriceCard .ce-button { align-self: flex-start; margin-top: 22px; }
.ce-faq--code { color: #e9fff7; background: #0e211d; }
.ce-faq--code .ce-index { color: var(--ce-violet); }
.ce-faq--code details { border-color: rgba(93,242,194,.3); }
.ce-finalCta--code { border: 1px solid var(--ce-code); background: linear-gradient(135deg, rgba(155,133,255,.12), transparent 48%), #071413; box-shadow: 12px 12px 0 var(--ce-violet); }
.ce-finalCta--code > p { color: var(--ce-code); }

/* ENGLISH — passport / magazine. Markup lives in the standalone template. */
.eac-courseExperience--english { --ce-blue: #74d7e5; color: var(--ce-navy); background: #f4f2ea; }
.ce-hero--english { background: #d9f2f1; }
.ce-heroMedia--passport { grid-column: 1 / 3; grid-row: 1; }
.ce-heroMedia--passport::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,242,234,.97) 0%, rgba(244,242,234,.82) 38%, rgba(244,242,234,.04) 72%); }
.ce-heroMedia--passport img { object-position: 64% center; }
.ce-hero--english .ce-heroCopy { grid-column: 1; }
.ce-hero--english .ce-kicker { color: var(--ce-pink); }
.ce-hero--english .ce-heroCopy em { color: var(--ce-teal); }
.ce-passportRoute { position: absolute; z-index: 3; right: 28px; top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.ce-passportRoute span { display: grid; place-items: center; width: 82px; height: 52px; border: 1px solid var(--ce-navy); color: var(--ce-navy); background: rgba(255,255,255,.82); font: 800 13px/1 Yaldevi, sans-serif; }
.ce-passportRoute span::after { content: ""; position: absolute; height: 8px; border-left: 1px solid var(--ce-navy); transform: translateY(30px); }
.ce-passportRoute span:last-child::after { display: none; }
.ce-englishRail { color: #fff; background: var(--ce-navy); transform: none; }
.ce-englishRoute { background: #f4f2ea; }
.ce-englishRoute .ce-index { color: var(--ce-pink); }
.ce-routeTimeline { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--ce-navy); }
.ce-routeTimeline article { min-height: 310px; border-right: 1px solid var(--ce-navy); padding: 35px 28px; }
.ce-routeTimeline article:last-child { border-right: 0; }
.ce-routeTimeline span { color: var(--ce-pink); font: 800 12px/1 Yaldevi,sans-serif; }
.ce-routeTimeline b { display: block; margin-top: 55px; color: var(--ce-teal); font: 800 42px/1 Yaldevi,sans-serif; }
.ce-routeTimeline h3 { margin-top: 18px; font-size: 23px; }
.ce-routeTimeline p { margin-top: 10px; font-size: 14px; }
.ce-englishSkills { background: var(--ce-navy); color: #fff; }
.ce-skillMosaic { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: auto auto; gap: 14px; }
.ce-skillMosaic > * { min-height: 260px; border: 1px solid rgba(255,255,255,.26); padding: 34px; }
.ce-skillMosaic picture { grid-row: 1 / 3; min-height: 535px; padding: 0; }
.ce-skillMosaic picture img { min-height: 535px; }
.ce-skillMosaic article span { color: var(--ce-yellow); font: 800 12px/1 Yaldevi,sans-serif; }
.ce-skillMosaic article h3 { margin-top: 58px; font-size: 25px; }
.ce-skillMosaic article p { margin-top: 12px; color: rgba(255,255,255,.7); font-size: 14px; }
.ce-englishPrice { background: #dff3ef; }
.ce-boardingPass { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--ce-navy); background: #fff; }
.ce-boardingPass article { position: relative; padding: 36px; border-right: 1px dashed #7d8d90; }
.ce-boardingPass article:last-child { border: 0; }
.ce-boardingPass article::before,.ce-boardingPass article::after { content:""; position:absolute; right:-14px; width:28px; height:28px; border-radius:50%; background:#dff3ef; }
.ce-boardingPass article::before { top:-14px; }.ce-boardingPass article::after { bottom:-14px; }
.ce-boardingPass article:last-child::before,.ce-boardingPass article:last-child::after { display:none; }
.ce-boardingPass span { color: var(--ce-pink); font:800 12px/1 Yaldevi,sans-serif; }
.ce-boardingPass h3 { margin-top:20px; font-size:28px; }
.ce-boardingPass strong { display:block; margin-top:35px; color:var(--ce-teal); font:900 52px/1 Yaldevi,sans-serif; }
.ce-boardingPass small { font:700 13px/1 "Noto Sans JP",sans-serif; }
.ce-englishSupport { background:#fff; color:var(--ce-navy); }
.ce-englishSupport .ce-index { color:var(--ce-pink); }
.ce-finalCta--english { color:#fff; background:var(--ce-teal); box-shadow:14px 14px 0 var(--ce-yellow); }

/* responsive */
@media (max-width: 980px) {
  .ce-hero { grid-template-columns: minmax(330px,.95fr) 1.05fr; }
  .ce-heroCopy { padding-inline: 36px; }
  .ce-heroCopy h1 { font-size: clamp(44px,7vw,68px); }
  .ce-sectionHead { grid-template-columns: 145px 1fr; }
  .ce-mapPoint { width: 31%; padding-inline: 20px; }
  .ce-dataRows > div { grid-template-columns: 45px 135px 1fr; }
  .ce-priceLab,.ce-editorialCard { grid-template-columns: 1fr auto; }
  .ce-priceLab .ce-button,.ce-editorialCard .ce-button { grid-column: 1 / -1; justify-self: start; }
  .ce-routeList li { grid-template-columns: 68px 120px 1fr; }
  .ce-codeWindow { display: none; }
  .ce-loopTrack { gap: 5px; }
  .ce-loopTrack article { padding-inline: 10px; }
}

@media (max-width: 767px) {
  .eac-courseExperience { --ce-shell: min(100% - 34px, 640px); padding-bottom: 72px; }
  .ce-section { padding: 82px 0; }
  .ce-sectionHead { display: block; margin-bottom: 42px; }
  .ce-sectionHead h2,.ce-photoStoryCopy h2,.ce-faq h2 { margin-top: 20px; font-size: clamp(30px,9vw,43px); }
  .ce-actions { align-items: stretch; }
  .ce-actions .ce-button { flex: 1 1 100%; }
  .eac-courseExperience .ce-button { min-height: 56px; padding-inline: 20px; }
  .ce-mobileCta { position: fixed; z-index: 9992; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; display: flex !important; min-height: 58px !important; border: 0 !important; border-radius: 3px !important; color: #fff !important; background: var(--ce-pink) !important; box-shadow: 0 8px 34px rgba(6,18,25,.28) !important; }
  .ce-mobileCta--middle { color: #07151e !important; background: var(--ce-signal) !important; }
  .ce-mobileCta--high { background: var(--ce-forest) !important; }
  .ce-mobileCta--code { color: #04100e !important; background: var(--ce-code) !important; }

  /* all heroes: photo is the first visible content */
  .ce-hero { display: flex; flex-direction: column; min-height: 0; }
  .ce-heroMedia { order: 1; position: relative; grid-column: auto; grid-row: auto; width: 100%; height: 56svh; min-height: 420px; max-height: 610px; margin: 0; clip-path: none; }
  .ce-heroMedia::after { opacity: 0 !important; }
  .ce-heroCopy { order: 2; grid-column: auto; grid-row: auto; width: 100% !important; min-height: 0 !important; padding: 46px 22px 58px; }
  .ce-heroCopy h1 { margin-top: 17px; font-size: clamp(39px,12.2vw,56px); line-height: 1.16; }
  .ce-heroCopy > p:not(.ce-kicker) { margin-top: 21px; font-size: 15px; }
  .ce-hero--elementary { background: #fff8df; }
  .ce-hero--elementary::before { inset: 56svh 0 0; }
  .ce-heroMedia--paper img { object-position: 52% center; }
  .ce-sticker--one { top: 20px; left: 16px; width: 88px; }
  .ce-sticker--two { right: 16px; bottom: 18px; }
  .ce-hero--elementary .ce-heroCopy::before { margin-bottom: 26px; }
  .ce-pencilLine { right: 20px; bottom: 20px; }
  .ce-wordRail > div { animation-duration: 18s; }
  .ce-mapCanvas { display: grid; min-height: 0; gap: 32px; }
  .ce-mapPath { display: none; }
  .ce-mapPoint { position: relative; inset: auto; width: 100%; padding: 34px 24px 26px; transform: none; }
  .ce-gradeGrid { display: flex; flex-direction: column; }
  .ce-gradePhoto { min-height: 430px; }
  .ce-gradeCard { padding: 32px 24px; }
  .ce-gradeCard h2 { font-size: 34px; }
  .ce-ticketGrid { grid-template-columns: 1fr; }
  .ce-ticket { padding: 32px 24px; }
  .ce-photoStoryGrid,.ce-faqGrid { grid-template-columns: 1fr; gap: 45px; }
  .ce-widePhoto,.ce-widePhoto img { min-height: 390px; }
  .ce-stepList li { grid-template-columns: 82px 1fr; }
  .ce-finalCta { width: calc(100% - 22px); margin-bottom: 40px; padding: 70px 22px; }
  .ce-finalCta--elementary { box-shadow: 8px 8px 0 var(--ce-yellow); }

  .ce-heroMedia--lab,.ce-heroMedia--code,.ce-heroMedia--passport { grid-column: auto; grid-row: auto; }
  .ce-heroMedia--lab img { object-position: 56% center; }
  .ce-hero--middle .ce-heroCopy { color: #fff; background: #081720; }
  .ce-hero--middle .ce-heroMedia::after { display: none; }
  .ce-labHud { right: 10px; bottom: 10px; left: 10px; overflow: hidden; }
  .ce-labHud span { flex: 1; padding-inline: 4px; text-align: center; font-size: 9px; }
  .ce-scanLine { display: none; }
  .ce-labStatus { grid-template-columns: 1fr 1fr; }
  .ce-labStatus span:nth-child(2) { border-right: 0; }
  .ce-strategyTrack { grid-template-columns: 1fr; gap: 12px; padding-top: 0; }
  .ce-strategyLine { display: none; }
  .ce-strategyTrack article { min-height: 230px; }
  .ce-strategyTrack article > b { margin-top: 28px; }
  .ce-systemGrid { grid-template-columns: 1fr; gap: 65px; }
  .ce-systemVisual,.ce-systemVisual img { min-height: 480px; }
  .ce-systemStamp { right: -4px; bottom: -38px; width: 120px; }
  .ce-systemCopy h2 { font-size: 37px; }
  .ce-dataRows > div { grid-template-columns: 38px 1fr; gap: 10px; }
  .ce-dataRows p { grid-column: 2; }
  .ce-priceLab { grid-template-columns: 1fr; gap: 24px; }
  .ce-priceLab .ce-button { grid-column: auto; }

  .ce-hero--high { display: flex; min-height: 0; }
  .ce-heroMedia--future { position: relative; inset: auto; }
  .ce-heroMedia--future img { object-position: 64% center; }
  .ce-hero--high .ce-heroCopy { background: #f5f1e8; }
  .ce-nextWord { right: -10px; bottom: -1px; font-size: 100px; }
  .ce-indexRows article { grid-template-columns: 48px 1fr; gap: 11px; padding: 26px 0; }
  .ce-indexRows article > p { grid-column: 2; grid-row: 1; }
  .ce-indexRows h3,.ce-indexRows small { grid-column: 2; }
  .ce-indexRows article > span { grid-row: 1 / 4; }
  .ce-indexRows h3 { font-size: 29px; }
  .ce-highRouteGrid { grid-template-columns: 1fr; gap: 55px; }
  .ce-highImage,.ce-highImage img { min-height: 500px; }
  .ce-highRouteCopy h2 { font-size: 38px; }
  .ce-routeList li { grid-template-columns: 62px 1fr; }
  .ce-routeList p { grid-column: 2; }
  .ce-editorialCard { grid-template-columns: 1fr; gap: 25px; }
  .ce-editorialCard .ce-button { grid-column: auto; }

  .ce-heroMedia--code { border-inline: 0; }
  .ce-heroMedia--code img { object-position: 57% center; }
  .ce-hero--programming .ce-heroCopy { color: #fff; background: #071413; }
  .ce-loopTrack { display: grid; grid-template-columns: 1fr; gap: 0; }
  .ce-loopTrack > i { padding-block: 3px; text-align: center; transform: rotate(90deg); }
  .ce-loopTrack article { min-height: 110px; padding: 18px; }
  .ce-loopTrack article b { margin-top: 8px; }
  .ce-codeLessonGrid { grid-template-columns: 1fr; gap: 55px; }
  .ce-codeLessonCopy h2 { font-size: 38px; }
  .ce-codeLessonVisual,.ce-codeLessonVisual img { min-height: 490px; }
  .ce-codeLessonVisual > span { right: -5px; bottom: -35px; }
  .ce-terminalCards { grid-template-columns: 1fr; }
  .ce-terminalCards article { min-height: 240px; }
  .ce-terminalCards h3 { margin-top: 42px; }
  .ce-programPriceGrid { grid-template-columns: 1fr; }
  .ce-programPriceGrid > div:first-child,.ce-programPriceGrid img { min-height: 410px; }
  .ce-programPriceCard { padding: 38px 24px; }
  .ce-finalCta--code { box-shadow: 7px 7px 0 var(--ce-violet); }

  .ce-hero--english .ce-heroCopy { background:#f4f2ea; }
  .ce-heroMedia--passport img { object-position:58% center; }
  .ce-passportRoute { top:auto; right:10px; bottom:10px; left:10px; display:flex; transform:none; }
  .ce-passportRoute span { flex:1; width:auto; height:42px; font-size:11px; }
  .ce-passportRoute span::after { display:none; }
  .ce-routeTimeline { grid-template-columns:1fr; }
  .ce-routeTimeline article { min-height:230px; border-right:0; border-bottom:1px solid var(--ce-navy); }
  .ce-routeTimeline article:last-child { border-bottom:0; }
  .ce-routeTimeline b { margin-top:30px; }
  .ce-skillMosaic { grid-template-columns:1fr; grid-template-rows:auto; }
  .ce-skillMosaic picture { grid-row:auto; min-height:420px; }
  .ce-skillMosaic picture img { min-height:420px; }
  .ce-skillMosaic > * { min-height:230px; }
  .ce-boardingPass { grid-template-columns:1fr; }
  .ce-boardingPass article { border-right:0; border-bottom:1px dashed #7d8d90; }
  .ce-boardingPass article::before,.ce-boardingPass article::after { display:none; }
}

/* Standalone English template details */
.eac-courseExperience--english .ce-hero__wordField { position:absolute; z-index:2; inset:0; pointer-events:none; }
.eac-courseExperience--english .ce-hero__wordField span { position:absolute; color:rgba(255,255,255,.66); font:900 clamp(44px,7vw,112px)/1 Yaldevi,sans-serif; letter-spacing:-.06em; mix-blend-mode:overlay; }
.eac-courseExperience--english .ce-hero__wordField span:nth-child(1) { top:5%; right:8%; }
.eac-courseExperience--english .ce-hero__wordField span:nth-child(2) { top:24%; right:-1%; }
.eac-courseExperience--english .ce-hero__wordField span:nth-child(3) { right:4%; bottom:24%; }
.eac-courseExperience--english .ce-hero__wordField span:nth-child(4) { right:12%; bottom:4%; }
.eac-courseExperience--english .ce-hero__caption { position:absolute; z-index:4; right:28px; bottom:22px; color:#fff; font:800 11px/1 Yaldevi,sans-serif; letter-spacing:.17em; }
.eac-courseExperience--english .ce-hero__contentInner { max-width:650px; }
.eac-courseExperience--english .ce-hero__content h1 span { display:block; }
.eac-courseExperience--english .ce-hero__note { color:#63706f; font-size:12px !important; }
.eac-courseExperience--english .ce-hero__gradeRail { position:absolute; z-index:5; top:50%; right:25px; display:grid; gap:8px; transform:translateY(-50%); }
.eac-courseExperience--english .ce-hero__gradeRail span { position:relative; display:grid; place-items:center; width:60px; height:48px; border:1px solid var(--ce-navy); color:var(--ce-navy); background:rgba(255,255,255,.86); font:800 12px/1 Yaldevi,sans-serif; }
.eac-courseExperience--english .ce-hero__gradeRail span:not(:last-child)::after { content:""; position:absolute; bottom:-9px; height:8px; border-left:1px solid var(--ce-navy); }
.ce-wordTicker { overflow:hidden; }
.ce-wordTicker--english { color:#fff; background:var(--ce-navy); }
.ce-wordTicker__track { display:flex; align-items:center; gap:25px; min-width:max-content; padding:17px 0; animation:ce-englishTicker 24s linear infinite; }
.ce-wordTicker__track span { font:800 16px/1 Yaldevi,sans-serif; letter-spacing:.14em; }
.ce-wordTicker__track i { width:8px; height:8px; border-radius:50%; background:var(--ce-yellow); }
@keyframes ce-englishTicker { to { transform:translateX(-50%); } }
.ce-englishManifesto { background:#f4f2ea; }
.ce-englishManifesto__grid { display:grid; grid-template-columns:90px 1fr .9fr; gap:clamp(35px,7vw,95px); align-items:center; }
.ce-section__index { align-self:start; color:var(--ce-pink); font:300 clamp(56px,8vw,104px)/.9 Yaldevi,sans-serif; }
.ce-englishManifesto__copy .ce-kicker { color:var(--ce-pink); }
.ce-englishManifesto__copy h2 { margin-top:24px; font-size:clamp(39px,4.7vw,66px); line-height:1.28; letter-spacing:-.045em; }
.ce-englishManifesto__copy > p:last-child { margin-top:28px; }
.ce-englishManifesto__media { min-height:620px; }
.ce-englishManifesto__media picture { display:block; height:100%; }
.ce-englishManifesto__media img { min-height:620px; object-position:52% center; }
.eac-courseExperience--english .ce-section--ink { color:#fff; background:var(--ce-navy); }
.eac-courseExperience--english .ce-section--paper { background:#dff3ef; }
.eac-courseExperience--english .ce-section__header { grid-template-columns:180px minmax(0,1fr) minmax(220px,.55fr); gap:28px; align-items:end; }
.eac-courseExperience--english .ce-section__header .ce-kicker { align-self:start; color:var(--ce-yellow); }
.eac-courseExperience--english .ce-section__header > p:last-child { color:rgba(255,255,255,.68); font-size:14px; }
.eac-courseExperience--english .ce-skillMosaic { grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:1fr 1fr; }
.eac-courseExperience--english .ce-skillMosaic__item { position:relative; min-height:270px; border:1px solid rgba(255,255,255,.24); padding:34px; overflow:hidden; }
.eac-courseExperience--english .ce-skillMosaic__item--1 { grid-row:1 / 3; min-height:554px; background:linear-gradient(155deg,rgba(24,116,102,.5),transparent); }
.eac-courseExperience--english .ce-skillMosaic__en { color:var(--ce-yellow); font:800 12px/1 Yaldevi,sans-serif; letter-spacing:.15em; }
.eac-courseExperience--english .ce-skillMosaic h3 { margin-top:72px; font-size:27px; }
.eac-courseExperience--english .ce-skillMosaic__item--1 h3 { margin-top:230px; font-size:40px; }
.eac-courseExperience--english .ce-skillMosaic__item > p:nth-of-type(2) { margin-top:14px; color:rgba(255,255,255,.7); font-size:14px; }
.ce-skillMosaic__number { position:absolute; right:18px; bottom:10px; color:rgba(255,255,255,.13); font:300 70px/1 Yaldevi,sans-serif; }
.ce-englishRoute { color:var(--ce-navy); background:#f4f2ea; }
.ce-englishRoute__layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(50px,9vw,130px); }
.ce-englishRoute__intro { position:sticky; top:110px; align-self:start; }
.ce-englishRoute__intro .ce-kicker { color:var(--ce-pink); }
.ce-englishRoute__intro h2 { margin-top:23px; font-size:clamp(39px,4.5vw,62px); line-height:1.28; letter-spacing:-.04em; }
.ce-englishRoute__intro > p { margin:24px 0 30px; }
.ce-route { position:relative; }
.ce-route__line { position:absolute; top:20px; bottom:20px; left:24px; width:2px; overflow:hidden; background:rgba(16,38,58,.18); }
.ce-route__line i { display:block; width:100%; height:calc(var(--ce-route-progress, .05) * 100%); background:var(--ce-pink); transition:height .1s linear; }
.ce-route__list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.ce-route__step { position:relative; display:grid; grid-template-columns:100px 1fr 62px; gap:22px; min-height:190px; border-top:1px solid rgba(16,38,58,.35); padding:34px 0 34px 68px; }
.ce-route__step:last-child { border-bottom:1px solid rgba(16,38,58,.35); }
.ce-route__step::before { content:""; position:absolute; z-index:2; top:39px; left:16px; width:18px; height:18px; border:4px solid #f4f2ea; border-radius:50%; background:var(--ce-pink); box-shadow:0 0 0 1px var(--ce-pink); }
.ce-route__label { color:var(--ce-pink); font:800 16px/1 Yaldevi,sans-serif; }
.ce-route__step h3 { font-size:22px; }
.ce-route__step div p { margin-top:10px; font-size:14px; }
.ce-route__number { align-self:end; color:rgba(16,38,58,.12); font:300 52px/1 Yaldevi,sans-serif; }
.ce-englishLesson { color:var(--ce-navy); }
.eac-courseExperience--english .ce-section__header--compact { grid-template-columns:180px 1fr; align-items:start; }
.eac-courseExperience--english .ce-section__header--compact .ce-kicker { color:var(--ce-pink); }
.ce-process { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ce-navy); }
.ce-process__item { min-height:330px; border-right:1px solid var(--ce-navy); padding:34px; }
.ce-process__item:last-child { border-right:0; }
.ce-process__number { color:var(--ce-pink); font:800 13px/1 Yaldevi,sans-serif; }
.ce-process h3 { margin-top:85px; font-size:24px; }
.ce-process__item > p:last-child { margin-top:15px; font-size:14px; }
.ce-englishPricing { background:#fff; }
.eac-courseExperience--english .ce-englishPricing .ce-section__header .ce-kicker { color:var(--ce-pink); }
.eac-courseExperience--english .ce-englishPricing .ce-section__header > p:last-child { color:#596765; }
.ce-priceTickets { display:grid; grid-template-columns:repeat(3,1fr); background:#dff3ef; }
.ce-priceTicket { position:relative; min-height:350px; border:1px solid var(--ce-navy); border-right:0; padding:32px; background:#fff; }
.ce-priceTicket:last-child { border-right:1px solid var(--ce-navy); }
.ce-priceTicket::before,.ce-priceTicket::after { content:""; position:absolute; z-index:2; left:-14px; width:26px; height:26px; border:1px solid var(--ce-navy); border-radius:50%; background:#dff3ef; }
.ce-priceTicket::before { top:-14px; }.ce-priceTicket::after { bottom:-14px; }
.ce-priceTicket:first-child::before,.ce-priceTicket:first-child::after { display:none; }
.ce-priceTicket__top { display:flex; justify-content:space-between; color:var(--ce-pink); font:800 11px/1 Yaldevi,sans-serif; letter-spacing:.12em; }
.ce-priceTicket h3 { margin-top:55px; font-size:25px; }
.ce-priceTicket__price { margin-top:23px; color:var(--ce-teal); font:900 48px/1 Yaldevi,sans-serif; }
.ce-priceTicket__price span { display:block; margin-top:9px; color:var(--ce-navy); font:700 12px/1 "Noto Sans JP",sans-serif; }
.ce-priceTicket__foot { position:absolute; right:30px; bottom:25px; color:#8f9b99; font:700 10px/1 Yaldevi,sans-serif; letter-spacing:.14em; }
.ce-englishSupport { display:grid; grid-template-columns:1.08fr .92fr; min-height:720px; padding:0; }
.ce-englishSupport__media { min-height:720px; }
.ce-englishSupport__media picture { display:block; height:100%; }
.ce-englishSupport__media img { min-height:720px; object-position:55% center; }
.ce-englishSupport__copy { align-self:center; padding:clamp(50px,7vw,100px); }
.ce-englishSupport__copy .ce-kicker { color:var(--ce-pink); }
.ce-englishSupport__copy h2 { margin-top:25px; font-size:clamp(39px,4.5vw,62px); line-height:1.3; letter-spacing:-.04em; }
.ce-englishSupport__copy > p { margin-top:24px; }
.ce-checkList { display:grid; gap:0; margin:32px 0 0; padding:0; list-style:none; }
.ce-checkList li { position:relative; border-top:1px solid #a8b2af; padding:14px 0 14px 28px; }
.ce-checkList li:last-child { border-bottom:1px solid #a8b2af; }
.ce-checkList li::before { content:"→"; position:absolute; left:0; color:var(--ce-pink); }
.eac-courseExperience--english .ce-faq { color:#fff; background:var(--ce-navy); }
.eac-courseExperience--english .ce-faq .ce-kicker { margin-bottom:22px; color:var(--ce-yellow); }
.eac-courseExperience--english .ce-faq details { border-color:rgba(255,255,255,.32); }
.ce-faq__list { min-width:0; }
.ce-finalCta--english { position:relative; overflow:hidden; }
.ce-finalCta--english .ce-shell { width:min(930px,100%); }
.ce-finalCta__passport { position:absolute; right:-20px; bottom:12px; display:grid; width:230px; height:150px; border:2px solid rgba(255,255,255,.25); padding:22px; text-align:left; transform:rotate(-8deg); }
.ce-finalCta__passport span:first-child { color:var(--ce-yellow); font:900 55px/1 Yaldevi,sans-serif; }
.ce-finalCta__passport span:last-child { font:800 10px/1 Yaldevi,sans-serif; letter-spacing:.13em; }
.ce-finalCta--english .ce-finalCta__inner > p:not(.ce-kicker) { max-width:650px; margin:22px auto 0; }
.ce-actions--center { justify-content:center; }

@media (max-width:767px) {
  .eac-courseExperience--english .ce-heroMedia--passport { height:58svh; }
  .eac-courseExperience--english .ce-hero__wordField span { font-size:45px; }
  .eac-courseExperience--english .ce-hero__caption { display:none; }
  .eac-courseExperience--english .ce-hero__gradeRail { top:auto; right:10px; bottom:10px; left:10px; display:flex; transform:none; }
  .eac-courseExperience--english .ce-hero__gradeRail span { flex:1; width:auto; height:40px; }
  .eac-courseExperience--english .ce-hero__gradeRail span::after { display:none; }
  .ce-englishManifesto__grid { grid-template-columns:1fr; gap:34px; }
  .ce-section__index { font-size:60px; }
  .ce-englishManifesto__media { min-height:430px; }
  .ce-englishManifesto__media img { min-height:430px; }
  .eac-courseExperience--english .ce-section__header,
  .eac-courseExperience--english .ce-section__header--compact { display:block; }
  .eac-courseExperience--english .ce-section__header h2 { margin-top:18px; }
  .eac-courseExperience--english .ce-section__header > p:last-child { margin-top:20px; }
  .eac-courseExperience--english .ce-skillMosaic { grid-template-columns:1fr; grid-template-rows:auto; }
  .eac-courseExperience--english .ce-skillMosaic__item,
  .eac-courseExperience--english .ce-skillMosaic__item--1 { grid-row:auto; min-height:230px; }
  .eac-courseExperience--english .ce-skillMosaic h3,
  .eac-courseExperience--english .ce-skillMosaic__item--1 h3 { margin-top:55px; font-size:26px; }
  .ce-englishRoute__layout { grid-template-columns:1fr; gap:55px; }
  .ce-englishRoute__intro { position:static; }
  .ce-route__step { grid-template-columns:1fr 45px; min-height:220px; padding-left:58px; }
  .ce-route__label { grid-column:1; }
  .ce-route__step > div { grid-column:1; }
  .ce-route__number { grid-column:2; grid-row:1 / 3; }
  .ce-process { grid-template-columns:1fr; }
  .ce-process__item { min-height:240px; border-right:0; border-bottom:1px solid var(--ce-navy); }
  .ce-process__item:last-child { border-bottom:0; }
  .ce-process h3 { margin-top:52px; }
  .ce-priceTickets { grid-template-columns:1fr; }
  .ce-priceTicket { min-height:290px; border-right:1px solid var(--ce-navy); border-bottom:0; }
  .ce-priceTicket:last-child { border-bottom:1px solid var(--ce-navy); }
  .ce-priceTicket::before,.ce-priceTicket::after { display:none; }
  .ce-englishSupport { grid-template-columns:1fr; min-height:0; }
  .ce-englishSupport__media { min-height:450px; }
  .ce-englishSupport__media img { min-height:450px; }
  .ce-englishSupport__copy { padding:70px 22px; }
  .ce-finalCta__passport { display:none; }
  .ce-mobileCta--english { flex-direction:column; gap:0; color:#04100e !important; background:var(--ce-yellow) !important; }
  .ce-mobileCta--english span:first-child { font-size:10px; }
  .ce-mobileCta--english strong { line-height:1.25; }
  .ce-mobileCta--english span:last-child { position:absolute; right:20px; }
}

@media (min-width:768px) {
  .eac-courseExperience .ce-hero,
  .eac-courseExperience .ce-hero--middle,
  .eac-courseExperience .ce-hero--high,
  .eac-courseExperience .ce-hero--programming {
    min-height: max(650px, calc(100svh - 155px));
  }
  .eac-courseExperience .ce-heroCopy { padding-top:52px; padding-bottom:52px; }
  .eac-courseExperience .ce-heroCopy h1 { font-size:clamp(52px,4.55vw,70px); line-height:1.1; }
  .eac-courseExperience .ce-hero--high .ce-heroCopy { min-height:max(650px, calc(100svh - 155px)); }
}
.ce-hero--middle .ce-heroCopy h1,
.ce-hero--programming .ce-heroCopy h1 { color:#fff !important; }
.ce-hero--middle .ce-heroCopy h1 em { color:var(--ce-signal) !important; }
.ce-hero--programming .ce-heroCopy h1 em { color:var(--ce-code) !important; }
.eac-courseExperience .ce-photoStory h2,
.eac-courseExperience .ce-finalCta--elementary h2,
.eac-courseExperience--middle :is(.ce-strategy,.ce-photoStory--dark,.ce-faq--dark,.ce-finalCta--middle) :is(h2,h3),
.eac-courseExperience--high .ce-highRoute :is(h2,h3),
.eac-courseExperience--english .ce-section--ink :is(h2,h3),
.eac-courseExperience--english .ce-finalCta--english h2,
.eac-courseExperience--programming :is(h1,h2,h3) { color:#fff !important; }
.eac-courseExperience--programming .ce-terminalCards h3,
.eac-courseExperience--programming .ce-makerGrid h3 { color:var(--ce-code) !important; }
.eac-courseExperience--programming .ce-programPriceCard h2 { color:#fff !important; }

@media (prefers-reduced-motion: reduce) {
  .eac-courseExperience *,
  .eac-courseExperience *::before,
  .eac-courseExperience *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .eac-courseMotion [data-reveal] { opacity: 1; transform: none; }
}