/* =========================================================
   吉祥寺 中学受験専門 JUKE — bold-typo × yellow-vivid
   「文字こそが図形」/ 黒(ink) + 白 + accent(#FACC15) の3色
   ========================================================= */

:root {
  --cp-primary: #CA8A04;
  --cp-accent:  #FACC15;
  --cp-text:    #422006;
  --cp-muted:   #8C7A4D;
  --cp-bg:      #FEFCE8;
  --cp-white:   #FFFFFF;
  --cp-line:    #E2E8F0;
  --cp-ink:     #1A1305;   /* near-black: 巨大文字・太枠・区切り */
  --cp-muted-d: #6A5A2C;   /* 明色背景の小文字ラベル用（cream 上で AA 6.5:1 確保） */
  --cp-muted-l: #AC9C67;   /* 暗色(ink)背景の muted テキスト用（ink 上で AA 6.7:1 確保。#8C7A4D は ink 上で 4.4:1 と不足） */
  --cp-gold-d:  #8A5E02;   /* 明色背景上の gold テキスト用（accent/#CA8A04 は明背景で視認不可のため）AA 5.5:1 */

  --container: 1200px;
  --pad: clamp(1rem, 3vw, 3rem);
  --sec-pad: clamp(4rem, 8vw, 8rem);
  --border-w: 2.5px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --f-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --f-jp:   "Noto Sans JP", system-ui, sans-serif;
  --f-disp: "Anton", "Noto Sans JP", system-ui, sans-serif;
  --f-bebas:"Bebas Neue", "Anton", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--f-sans);
  font-feature-settings: 'palt';
  color: var(--cp-text);
  background: var(--cp-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
strong { color: inherit; font-weight: 900; }
:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
.section { position: relative; padding-block: var(--sec-pad); border-top: var(--border-w) solid var(--cp-ink); overflow: hidden; }

.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--cp-ink); color: var(--cp-bg);
  padding: .6rem 1rem; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--cp-gold-d);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--cp-accent); }
.eyebrow--light { color: var(--cp-accent); }

.sec-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-title {
  font-family: var(--f-jp);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--cp-ink);
  margin-top: 1rem;
}
.sec-lead { margin-top: 1.4rem; font-size: 1.02rem; color: var(--cp-text); max-width: 60ch; }
.hl { color: var(--cp-ink); position: relative; }
.hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .38em;
  background: var(--cp-accent); z-index: -1; opacity: .95;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--cp-ink); --btn-fg: var(--cp-bg); --btn-bd: var(--cp-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-jp); font-weight: 900; font-size: .95rem;
  letter-spacing: .02em;
  padding: .9rem 1.6rem; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--border-w) solid var(--btn-bd);
  cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--btn-fg); color: var(--btn-bg); transform: translateY(-2px); }
.btn--accent { --btn-bg: var(--cp-accent); --btn-fg: var(--cp-ink); --btn-bd: var(--cp-ink); }
.btn--accent:hover { background: var(--cp-ink); color: var(--cp-accent); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--cp-ink); --btn-bd: var(--cp-ink); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--cp-ink); --btn-bd: var(--cp-ink); }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.section--ink .btn--ghost, .section--cta .btn--ghost {
  --btn-fg: var(--cp-bg); --btn-bd: var(--cp-bg);
}
.section--ink .btn--ghost:hover, .section--cta .btn--ghost:hover { background: var(--cp-bg); color: var(--cp-ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--cp-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--border-w) solid var(--cp-ink);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__kicker { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .18em; color: var(--cp-muted-d); }
.brand__name { font-family: var(--f-disp); font-size: 1.7rem; letter-spacing: .04em; color: var(--cp-ink); margin-top: 2px; }

.site-nav { display: flex; gap: 1.8rem; }
.site-nav a {
  font-family: var(--f-jp); font-weight: 700; font-size: .92rem;
  color: var(--cp-ink); padding: .4rem 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0;
  background: var(--cp-accent); transition: width .3s var(--ease);
}
.site-nav a:hover::after, .site-nav a.is-active::after { width: 100%; }

.header-cta {
  font-family: var(--f-jp); font-weight: 900; font-size: .9rem;
  color: var(--cp-bg); background: var(--cp-ink);
  padding: .7rem 1.2rem; border: var(--border-w) solid var(--cp-ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.header-cta:hover { background: var(--cp-accent); color: var(--cp-ink); }

.burger {
  display: none; flex-direction: column; gap: 5px;
  width: 46px; height: 46px; padding: 11px 9px;
  background: var(--cp-ink); border: none; cursor: pointer;
}
.burger span { display: block; height: 3px; width: 100%; background: var(--cp-bg); transition: transform .3s var(--ease), opacity .2s; }

/* ---------- drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: color-mix(in oklab, var(--cp-ink) 55%, transparent);
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s;
}
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(82vw, 360px);
  background: var(--cp-bg); border-left: var(--border-w) solid var(--cp-ink);
  padding: 2rem 1.6rem; transform: translateX(100%);
  transition: transform .35s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
  align-self: flex-end; width: 46px; height: 46px;
  font-size: 2rem; line-height: 1; font-weight: 400;
  background: var(--cp-ink); color: var(--cp-bg); border: none; cursor: pointer;
}
.drawer__nav { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.5rem; }
.drawer__nav a {
  font-family: var(--f-jp); font-weight: 800; font-size: 1.15rem;
  color: var(--cp-ink); padding: .9rem .2rem; border-bottom: 1.5px solid var(--cp-ink);
}
.drawer__cta {
  margin-top: 1rem; text-align: center; background: var(--cp-accent);
  border: var(--border-w) solid var(--cp-ink) !important; padding: 1rem !important;
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 88vh; min-height: 88svh;
  display: flex; align-items: center;
  border-bottom: var(--border-w) solid var(--cp-ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(254,252,232,.94) 0%, rgba(254,252,232,.86) 45%, rgba(254,252,232,.7) 100%),
    radial-gradient(120% 80% at 80% 20%, rgba(250,204,21,.16), transparent 60%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%; padding-block: 3rem;
}
.hero__title {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  line-height: 1.06; letter-spacing: .02em;
  color: var(--cp-ink);
  /* vertical-rl + flex-direction:column → 行が右→左の縦列として並ぶ（最初の行が右端） */
  display: flex; flex-direction: column; gap: clamp(.2rem, 1vw, .7rem);
  margin-left: auto;
}
.hero__line { display: block; }
.hero__num {
  text-combine-upright: all;
  color: var(--cp-gold-d);
  font-family: var(--f-disp); font-weight: 400;
}
.hero__aside { max-width: 300px; align-self: flex-start; margin-top: 6vh; }
.hero__eyebrow {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--cp-gold-d); margin-bottom: 1.4rem;
}
.hero__lead { font-size: 1.02rem; line-height: 1.9; color: var(--cp-text); }
.hero__lead strong { color: var(--cp-ink); border-bottom: .25em solid var(--cp-accent); box-decoration-break: clone; }
.hero__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.hero__scroll {
  position: absolute; left: var(--pad); bottom: 1.5rem; z-index: 2;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .25em; color: var(--cp-ink);
  writing-mode: horizontal-tb;
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--cp-ink); color: var(--cp-bg);
  overflow: hidden; white-space: nowrap;
  border-bottom: var(--border-w) solid var(--cp-ink);
  padding-block: .9rem;
}
.marquee__track { display: inline-flex; animation: marquee 26s linear infinite; }
.marquee__track span {
  font-family: var(--f-bebas); font-size: 1.5rem; letter-spacing: .12em;
  padding-right: 1rem; color: var(--cp-accent);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.34%); } }

/* ---------- section bg decorations ---------- */
.section-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1; pointer-events: none;
}
.section-bg--faint { opacity: .12; }
.section-bg--dark { opacity: .35; }

/* ---------- stats ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-left: var(--border-w) solid var(--cp-ink);
}
.stat { border-right: var(--border-w) solid var(--cp-ink); padding: 1.5rem clamp(.8rem, 2vw, 1.6rem); }
.stat dt { display: flex; align-items: baseline; gap: .3rem; color: var(--cp-ink); }
.stat__num {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(3.2rem, 8vw, 7rem); line-height: .9; letter-spacing: -0.01em;
}
.stat__unit { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 500; color: var(--cp-gold-d); }
.stat dd { margin-top: 1rem; font-size: .92rem; color: var(--cp-text); line-height: 1.6; }

/* ---------- strengths ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-card {
  background: var(--cp-white); border: var(--border-w) solid var(--cp-ink);
  padding: 2rem 1.6rem; position: relative; overflow: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.feature-card__no {
  font-family: var(--f-bebas); font-size: 2.4rem; color: var(--cp-gold-d);
  line-height: 1; display: block;
}
.feature-card__icon { display: inline-flex; color: var(--cp-ink); margin: 1rem 0 .8rem; transition: color .3s var(--ease); }
.feature-card__title {
  font-family: var(--f-jp); font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--cp-ink); margin-bottom: .8rem; letter-spacing: -0.02em; transition: color .3s var(--ease);
}
.feature-card p { font-size: .95rem; color: var(--cp-text); transition: color .3s var(--ease); }
.feature-card:hover { background: var(--cp-ink); }
.feature-card:hover .feature-card__title,
.feature-card:hover .feature-card__icon,
.feature-card:hover p { color: var(--cp-bg); }
.feature-card:hover .feature-card__no { color: var(--cp-accent); }

/* ---------- approach (split) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; margin-top: 2.5rem;
}
.split + .split { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1.5px solid var(--cp-ink); }
.split--reverse .split__media { order: -1; }
.split__h {
  font-family: var(--f-jp); font-weight: 900; font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--cp-ink); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 1.2rem;
}
.split__text p { font-size: 1rem; color: var(--cp-text); }
.split__media { position: relative; border: var(--border-w) solid var(--cp-ink); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.split__media:hover img { transform: scale(1.04); }

/* ---------- courses ---------- */
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--border-w) solid var(--cp-ink); }
.course-card {
  padding: 2rem clamp(1.2rem, 2.5vw, 2rem); background: var(--cp-white);
  border-right: var(--border-w) solid var(--cp-ink); border-bottom: var(--border-w) solid var(--cp-ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.course-card:nth-child(2n) { border-right: none; }
.course-card:nth-last-child(-n+2) { border-bottom: none; }
.course-card h3 {
  font-family: var(--f-jp); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--cp-ink); margin-bottom: .7rem; letter-spacing: -0.02em;
}
.course-card p { font-size: .95rem; color: var(--cp-text); transition: color .3s var(--ease); }
.course-card:hover { background: var(--cp-ink); }
.course-card:hover h3 { color: var(--cp-accent); }
.course-card:hover p { color: var(--cp-bg); }
.courses__more { margin-top: 2.5rem; }

/* ---------- ink / message ---------- */
.section--ink { background: var(--cp-ink); color: var(--cp-bg); border-top-color: var(--cp-ink); }
.section--ink .sec-title, .section--ink .message__title { color: var(--cp-bg); }
.message__inner { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.message__media { border: var(--border-w) solid var(--cp-accent); overflow: hidden; }
.message__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.message__title {
  font-family: var(--f-jp); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.12; letter-spacing: -0.03em; margin: 1rem 0 1.6rem; color: var(--cp-bg);
}
.section--ink .hl { color: var(--cp-accent); }
.section--ink .hl::after { display: none; }
.message__body p { color: color-mix(in oklab, var(--cp-bg) 88%, transparent); margin-bottom: 1.1rem; line-height: 1.9; }
.message__sign { margin-top: 1.8rem; display: flex; align-items: baseline; gap: .8rem; }
.message__role { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .2em; color: var(--cp-accent); }
.message__name { font-family: var(--f-jp); font-weight: 900; font-size: 1.6rem; color: var(--cp-bg); }

/* ---------- voices ---------- */
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.voice-card {
  background: var(--cp-white); border: var(--border-w) solid var(--cp-ink);
  padding: 2.4rem 2rem 2rem; position: relative;
}
.voice-card__quote {
  font-family: var(--f-disp); font-size: 4.5rem; line-height: .6; color: var(--cp-gold-d);
  display: block; margin-bottom: .4rem;
}
.voice-card blockquote {
  font-family: var(--f-jp); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--cp-ink); line-height: 1.6; letter-spacing: -0.01em;
}
.voice-card figcaption { margin-top: 1.4rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; color: var(--cp-muted-d); }

/* ---------- news ---------- */
.news-list { border-top: var(--border-w) solid var(--cp-ink); }
.news-item { border-bottom: var(--border-w) solid var(--cp-ink); }
.news-item summary {
  list-style: none; cursor: pointer; padding: 1.4rem .5rem;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--f-jp); font-weight: 700; font-size: 1.05rem; color: var(--cp-ink);
  position: relative; padding-right: 2.5rem;
}
.news-item summary::-webkit-details-marker { display: none; }
.news-item summary::after {
  content: "+"; position: absolute; right: .6rem; font-family: var(--f-disp);
  font-size: 1.8rem; line-height: 1; color: var(--cp-gold-d); transition: transform .3s var(--ease);
}
.news-item[open] summary::after { content: "−"; }
.news-item__tag {
  flex-shrink: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  background: var(--cp-accent); color: var(--cp-ink); padding: .3rem .6rem; font-weight: 500;
}
.news-item__body { padding: 0 .5rem 1.5rem; }
.news-item__body p { font-size: .95rem; color: var(--cp-text); max-width: 70ch; }

/* ---------- final CTA ---------- */
.section--cta { background: var(--cp-ink); color: var(--cp-bg); text-align: center; }
.cta__inner { max-width: 760px; margin-inline: auto; }
.cta__title {
  font-family: var(--f-jp); font-weight: 900; font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.08; letter-spacing: -0.03em; margin: 1.2rem 0 1.4rem; color: var(--cp-bg);
}
.section--cta .hl { color: var(--cp-accent); }
.section--cta .hl::after { display: none; }
.cta__lead { color: color-mix(in oklab, var(--cp-bg) 85%, transparent); font-size: 1.05rem; margin-bottom: 2.2rem; }
.cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.eyebrow--light::before { background: var(--cp-accent); }
.section--cta .eyebrow, .section--ink .eyebrow { justify-content: flex-start; }
.cta .eyebrow { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { position: relative; isolation: isolate; background: var(--cp-ink); color: var(--cp-bg); border-top: var(--border-w) solid var(--cp-ink); }
.footer-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site-footer__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-brand__logo { width: 96px; height: 96px; object-fit: contain; margin-bottom: 1rem; }
.footer-brand__name { font-family: var(--f-jp); font-weight: 900; font-size: 1.2rem; color: var(--cp-bg); }
.footer-brand__tag { font-family: var(--f-mono); font-size: .8rem; color: var(--cp-accent); margin-top: .5rem; letter-spacing: .04em; }
.footer-col__h { font-family: var(--f-bebas); font-size: 1.3rem; letter-spacing: .08em; color: var(--cp-accent); margin-bottom: 1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-nav a { font-weight: 700; color: color-mix(in oklab, var(--cp-bg) 90%, transparent); }
.footer-nav a:hover { color: var(--cp-accent); }
.footer-contact address { font-style: normal; font-size: .92rem; line-height: 1.9; color: color-mix(in oklab, var(--cp-bg) 88%, transparent); }
.footer-contact a { color: var(--cp-bg); }
.footer-contact a:hover { color: var(--cp-accent); }
.footer-hours { font-size: .82rem; color: var(--cp-muted-l); }
.footer-sns { display: inline-block; margin-top: 1rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .05em; color: var(--cp-accent); border-bottom: 1px solid var(--cp-accent); }
.footer-bottom { position: relative; z-index: 1; border-top: 1.5px solid color-mix(in oklab, var(--cp-bg) 25%, transparent); padding-block: 1.4rem; }
.footer-bottom small { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: var(--cp-muted-l); }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--cp-accent); color: var(--cp-ink);
  border: var(--border-w) solid var(--cp-ink); border-radius: 0; cursor: pointer;
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--cp-ink); color: var(--cp-accent); }
.back-to-top[hidden] { display: none; }

/* ---------- page hero (中ページ・generator が背景配置) ---------- */
.cp-page-hero {
  position: relative; border-bottom: var(--border-w) solid var(--cp-ink);
  padding-block: clamp(5rem, 12vw, 9rem); overflow: hidden;
  display: flex; align-items: flex-end; min-height: 46vh;
}
.cp-page-hero__inner { position: relative; z-index: 2; }
.cp-page-hero .eyebrow { color: var(--cp-accent); }
.cp-page-hero__title {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--cp-bg); margin-top: 1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.cp-page-hero__lead { color: color-mix(in oklab, var(--cp-bg) 90%, transparent); margin-top: 1.2rem; max-width: 56ch; font-size: 1.05rem; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
/* generator が --aihp-subpage-hero-image を CSS 変数で配置する。ここは画像が無い場合の fallback 色のみ（background-image は触らない） */
.aihp-subpage-hero--with-image { background-color: var(--cp-ink); }
.cp-page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,19,5,.35) 0%, rgba(26,19,5,.62) 100%); pointer-events: none; }

/* ---------- generic page content ---------- */
.prose p { font-size: 1rem; color: var(--cp-text); margin-bottom: 1.1rem; max-width: 70ch; }
.lead-block { max-width: 760px; }
.lead-block .big {
  font-family: var(--f-jp); font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--cp-ink); margin-bottom: 1.5rem;
}

/* timeline (沿革) */
.timeline { border-left: var(--border-w) solid var(--cp-ink); margin-top: 2rem; padding-left: 2rem; }
.timeline__item { position: relative; padding-bottom: 2.5rem; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(-2rem - 8px); top: .3rem;
  width: 14px; height: 14px; background: var(--cp-accent); border: 2.5px solid var(--cp-ink);
}
.timeline__year { font-family: var(--f-bebas); font-size: 2rem; color: var(--cp-gold-d); line-height: 1; }
.timeline__item h3 { font-family: var(--f-jp); font-weight: 800; font-size: 1.2rem; color: var(--cp-ink); margin: .4rem 0 .6rem; }
.timeline__item p { font-size: .96rem; color: var(--cp-text); max-width: 60ch; }

/* instructor / info cards */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.info-card { background: var(--cp-white); border: var(--border-w) solid var(--cp-ink); padding: 1.8rem 1.5rem; }
.info-card h3 { font-family: var(--f-jp); font-weight: 800; font-size: 1.2rem; color: var(--cp-ink); margin-bottom: .7rem; }
.info-card p { font-size: .94rem; color: var(--cp-text); }

/* media block */
.media-block { border: var(--border-w) solid var(--cp-ink); overflow: hidden; }
.media-block img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }

/* ---------- pricing (services) ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }
.price-card {
  background: var(--cp-white); border: var(--border-w) solid var(--cp-ink);
  padding: 2rem 1.6rem; text-align: center;
}
.price-card__grade { font-family: var(--f-bebas); font-size: 1.6rem; letter-spacing: .06em; color: var(--cp-gold-d); }
.price-card__amount { font-family: var(--f-disp); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--cp-ink); line-height: 1; margin: .6rem 0; }
.price-card__amount small { font-family: var(--f-mono); font-size: .9rem; color: var(--cp-muted-d); }
.price-card__note { font-size: .85rem; color: var(--cp-muted-d); }
.price-aside { margin-top: 1.6rem; font-size: .9rem; color: var(--cp-text); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.price-aside span { display: inline-flex; gap: .4rem; align-items: center; }
.price-aside b { color: var(--cp-ink); }

/* ---------- contact form ---------- */
.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.form { display: flex; flex-direction: column; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-family: var(--f-jp); font-weight: 700; font-size: .9rem; color: var(--cp-ink); }
.field .req { color: var(--cp-gold-d); font-family: var(--f-mono); font-size: .72rem; margin-left: .3rem; }
.field input, .field select, .field textarea {
  font-family: var(--f-sans); font-size: 1rem; color: var(--cp-text);
  padding: .8rem .9rem; background: var(--cp-white);
  border: 2px solid var(--cp-ink); border-radius: 0; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--cp-accent); outline-offset: 0; }
.field textarea { min-height: 140px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { width: auto; margin-top: .2rem; }
.field--check label { font-weight: 400; font-size: .9rem; }
.field--check a { color: var(--cp-gold-d); border-bottom: 1px solid var(--cp-gold-d); }
#contact-otp-block { border: 2px dashed var(--cp-gold-d); padding: 1.2rem; background: color-mix(in oklab, var(--cp-accent) 14%, var(--cp-white)); }
#contact-otp-block p { font-size: .82rem; color: var(--cp-text); margin-top: .6rem; }
#contact-status { font-weight: 700; font-size: .95rem; padding: .4rem 0; }
.cf-turnstile { margin: .4rem 0; }

.contact-aside { background: var(--cp-ink); color: var(--cp-bg); padding: 2rem 1.8rem; border: var(--border-w) solid var(--cp-ink); }
.contact-aside h2 { font-family: var(--f-jp); font-weight: 900; font-size: 1.4rem; color: var(--cp-bg); margin-bottom: 1.2rem; }
.contact-aside dl { display: grid; gap: 1rem; }
.contact-aside dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--cp-accent); margin-bottom: .2rem; }
.contact-aside dd { font-size: .95rem; line-height: 1.7; color: color-mix(in oklab, var(--cp-bg) 90%, transparent); }
.contact-aside a { color: var(--cp-bg); }

/* map */
.cp-map { border: var(--border-w) solid var(--cp-ink); overflow: hidden; margin-top: 1.5rem; }
.cp-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* faq */
.faq-list { border-top: var(--border-w) solid var(--cp-ink); max-width: 820px; }
.faq-item { border-bottom: var(--border-w) solid var(--cp-ink); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.3rem .5rem 1.3rem 0; padding-right: 2.5rem;
  font-family: var(--f-jp); font-weight: 700; font-size: 1rem; color: var(--cp-ink); position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .4rem; top: 1rem; font-family: var(--f-disp); font-size: 1.6rem; color: var(--cp-gold-d); }
.faq-item[open] summary::after { content: "−"; }
.faq-item__body { padding: 0 .5rem 1.4rem; font-size: .94rem; color: var(--cp-text); max-width: 70ch; }

/* ---------- fade-in (opacity 1 維持・translateY のみ) ---------- */
.fade-in { opacity: 1; transform: none; transition: transform 700ms var(--ease); will-change: transform; }
html.js-enabled .fade-in:not(.is-in) { transform: translateY(26px); }
html.js-enabled .hero__title { transform: translateY(34px); transition: transform 900ms var(--ease); }
html.js-enabled .hero.is-ready .hero__title { transform: translateY(0); }
html.js-enabled .hero__aside { transform: translateY(20px); transition: transform 900ms var(--ease) 150ms; }
html.js-enabled .hero.is-ready .hero__aside { transform: translateY(0); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1023px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .message__inner { grid-template-columns: 1fr; }
  .message__media { max-width: 420px; }
}

@media (max-width: 768px) {
  .site-nav, .header-cta { display: none; }
  .burger { display: flex; }
  .contact-layout { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .voice-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .footer-particles { display: block; }
}

@media (max-width: 560px) {
  :root { --sec-pad: 4rem; }
  .site-header__inner { min-height: 64px; }
  .brand__name { font-size: 1.4rem; }
  .brand__kicker { font-size: .52rem; }

  /* hero -> 横組み */
  .hero { min-height: auto; padding-top: 2rem; }
  .hero__media img { object-position: 75% center; }
  .hero__veil { background:
    linear-gradient(180deg, rgba(254,252,232,.9) 0%, rgba(254,252,232,.8) 50%, rgba(254,252,232,.92) 100%),
    radial-gradient(120% 60% at 80% 10%, rgba(250,204,21,.18), transparent 60%);
  }
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 1.6rem; padding-block: 2.5rem 3rem; }
  .hero__title {
    writing-mode: horizontal-tb;
    flex-direction: column; gap: 0;
    font-size: clamp(2.2rem, 11vw, 3rem); line-height: 1.12; margin-left: 0;
  }
  .hero__num { text-combine-upright: none; }
  .hero__aside { max-width: 100%; margin-top: 0; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }

  .stat-grid { grid-template-columns: 1fr; border-left: none; }
  .stat { border: var(--border-w) solid var(--cp-ink); border-bottom: none; }
  .stat:last-child { border-bottom: var(--border-w) solid var(--cp-ink); }
  .stat__num { font-size: clamp(3.4rem, 18vw, 5rem); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .course-grid { grid-template-columns: 1fr; }
  .course-card { border-right: none; }
  .course-card:nth-last-child(-n+2):not(:last-child) { border-bottom: var(--border-w) solid var(--cp-ink); }

  .marquee__track span { font-size: 1.2rem; }
  .cp-map iframe { height: 280px; }
  .back-to-top { width: 46px; height: 46px; right: 1rem; bottom: 1rem; }
  .price-aside { flex-direction: column; gap: .5rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html.js-enabled .fade-in:not(.is-in), html.js-enabled .hero__title, html.js-enabled .hero__aside { transform: none; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ai-hp enforced subpage hero backgrounds */
.aihp-subpage-hero--with-image {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(72, 49, 1, 0.9), rgba(72, 49, 1, 0.72)),
    var(--aihp-subpage-hero-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  isolation: isolate;
}
.aihp-subpage-hero--with-image > * {
  position: relative;
  z-index: 1;
}