/* ==========================================================================
   トップページのレイアウト
   ds.css（トークン・共通部品）と chrome.css（ヘッダー・フッター）の上に、
   このページだけの構造を積む。
   構成：ヒーロー → 01 コンセプト → 02 できること → 03 ご利用の入口 →
        04 導入事例 → 05 記事・動画 → 06 お申し込み → 最終CTA
   ========================================================================== */

/* ==========================================================================
   ヒーロー（濃紺＋光）
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  isolation: isolate;
}
/* 上方の大きな光源。ゆっくり呼吸する */
.hero__glow-main {
  position: absolute;
  top: -30%;
  left: 26%;
  width: min(980px, 110vw);
  height: min(980px, 110vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(220, 181, 92, 0.2), rgba(220, 181, 92, 0.055) 45%, rgba(220, 181, 92, 0) 70%);
  animation: lumina-breathe 14s var(--ease-standard) infinite;
  pointer-events: none;
}
.hero__glow-sub {
  right: -14%;
  bottom: -34%;
  width: min(700px, 88vw);
  height: min(700px, 88vw);
  background: radial-gradient(circle, rgba(196, 151, 47, 0.14), rgba(196, 151, 47, 0) 62%);
  animation-duration: 12s;
  animation-delay: 2s;
}
/* 上下を締める暗幕 */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 29, 41, 0.35) 0%, rgba(20, 29, 41, 0) 30%, rgba(20, 29, 41, 0.55) 100%);
  pointer-events: none;
}
/* 最下部の明滅する金の線 */
.hero__hairline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 181, 92, 0), rgba(220, 181, 92, 0.5) 45%, rgba(220, 181, 92, 0));
  animation-duration: 8s;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 120px) clamp(52px, 7vw, 104px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(26px, 3vw, 36px);
  animation-delay: 120ms;
}
.hero__eyebrow-line {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 181, 92, 0.9), rgba(220, 181, 92, 0));
}
.hero__eyebrow-text {
  font-size: var(--text-micro);
  letter-spacing: 0.24em;
  color: rgba(233, 206, 143, 0.85);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-display);
  line-height: 1.44;
  letter-spacing: var(--tracking-display);
  color: var(--cream-50);
  text-indent: -0.05em;
  animation-delay: 260ms;
  animation-duration: 1100ms;
}
.hero__title .is-gold { color: var(--gold-300); }

.hero__sub {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 2;
  letter-spacing: 0.06em;
  color: rgba(233, 206, 143, 0.9);
  margin-top: clamp(24px, 2.6vw, 32px);
  animation-delay: 460ms;
}
.hero__lede {
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 2.15;
  color: rgba(250, 241, 220, 0.82);
  margin-top: 18px;
  max-width: 28em;
  animation-delay: 560ms;
}
.hero__actions { margin-top: clamp(30px, 3.4vw, 42px); animation-delay: 720ms; }
.hero__note {
  font-size: var(--text-micro);
  line-height: 1.95;
  color: rgba(250, 241, 220, 0.45);
  margin-top: 20px;
  max-width: 30em;
  animation-delay: 860ms;
}
.hero__note .link { color: rgba(250, 241, 220, 0.7); border-bottom-color: rgba(220, 181, 92, 0.45); }
.hero__note .link:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }

/* --- ヒーロー右：ルミナとの対話（模擬画面） -------------------------------- */
.hero__panel {
  position: relative;
  animation: lumina-card-in 1300ms var(--ease-out) 700ms both;
}
.hero__panel::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 32px;
  background: radial-gradient(65% 55% at 50% 0%, rgba(233, 206, 143, 0.2), rgba(233, 206, 143, 0) 72%);
  pointer-events: none;
}
/* 1pxのグラデーション縁取りで額装する */
.chat {
  position: relative;
  padding: 1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(160deg, rgba(233, 206, 143, 0.75), rgba(233, 206, 143, 0.1) 38%, rgba(255, 255, 255, 0.06));
  box-shadow: 0 48px 100px -46px rgba(0, 0, 0, 0.62), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
}
.chat__inner {
  position: relative;
  background: linear-gradient(180deg, var(--paper-white), var(--cream-50));
  border-radius: var(--radius-xl);
  padding: clamp(22px, 2.6vw, 32px);
  overflow: hidden;
}
.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.chat__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  letter-spacing: 0.06em;
}
.chat__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat__mark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.chat__meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-faint);
}
.chat__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: 20px;
  min-height: 300px;
}
.chat__msg {
  max-width: 88%;
  padding: 13px 16px;
  font-size: var(--text-body-sm);
  line-height: 1.95;
  color: var(--ink-900);
  animation: lumina-fade-up 520ms var(--ease-out) both;
}
/* 話し手の側だけ角を4pxに落とす */
.chat__msg--student {
  align-self: flex-end;
  max-width: 86%;
  background: var(--cream-100);
  border: 1px solid var(--cream-300);
  border-radius: 16px 16px 4px 16px;
}
.chat__msg--lumina {
  align-self: flex-start;
  background: var(--paper-white);
  border: 1px solid var(--gold-200);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 26px -18px rgba(168, 122, 46, 0.55);
}
.chat__typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 15px 18px;
  background: var(--paper-white);
  border: 1px solid var(--gold-200);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 26px -18px rgba(168, 122, 46, 0.55);
  animation: lumina-fade-up 520ms var(--ease-out) both;
}
.chat__typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
  animation: lumina-typing 1.25s var(--ease-standard) infinite;
}
.chat__typing span:nth-child(2) { animation-delay: 0.16s; }
.chat__typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes lumina-typing {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-2px); }
}
.chat__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.chat__foot::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold-500);
}

/* --- ヒーロー下：一般的なAIチャットとの違い -------------------------------- */
.hero__strip {
  position: relative;
  border-top: 1px solid rgba(250, 241, 220, 0.1);
  background: rgba(10, 16, 24, 0.32);
}
.hero__strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-block: clamp(28px, 3.4vw, 44px);
}
.hero__point { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__point-line {
  width: 20px;
  height: 1px;
  background: rgba(220, 181, 92, 0.55);
  animation-duration: 8s;
}
.hero__point-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--gold-300);
}
.hero__point-note {
  font-size: var(--text-micro);
  line-height: 1.9;
  color: rgba(250, 241, 220, 0.52);
}

/* ==========================================================================
   01 コンセプト（Q&A ＋ 名前の由来）
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: stretch;
}
.split__aside { display: flex; flex-direction: column; }

.qa { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(28px, 3vw, 40px); }
.qa__row { display: flex; gap: var(--space-4); }
.qa__row + .qa__row { padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.qa__tag {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  background: var(--cream-200);
  border: 1px solid var(--cream-300);
  color: var(--ink-700);
}
.qa__row--a .qa__tag { background: var(--gold-100); border-color: var(--gold-200); color: var(--gold-700); }
.qa__text { font-size: var(--text-body-sm); line-height: 1.95; color: var(--text-body); }
.qa__row--q .qa__text { color: var(--ink-900); font-weight: var(--weight-medium); }

/* 名前の由来（濃紺のカード。中心に灯りが1つ） */
.origin {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--wash-ink-card);
  border: 1px solid rgba(220, 181, 92, 0.24);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: 0 34px 80px -44px rgba(20, 29, 41, 0.68), inset 0 1px 0 rgba(250, 241, 220, 0.08);
}
.origin__glow {
  left: 50%;
  top: -45%;
  width: min(520px, 110%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(220, 181, 92, 0.26), rgba(220, 181, 92, 0) 66%);
  animation: lumina-breathe 15s var(--ease-standard) infinite;
}
.origin__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-ink-gold);
}
.origin__name {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.12em;
  color: var(--cream-50);
}
.origin__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-400);
  animation: lumina-glow 4.5s var(--ease-standard) infinite;
}
.origin__text {
  font-size: var(--text-size);
  line-height: 2.1;
  color: var(--on-ink);
  margin-top: 24px;
  max-width: 26em;
}

.concept__lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--gold-700);
  margin-top: 22px;
  max-width: 30em;
}
.concept__sub {
  font-size: var(--text-body-sm);
  line-height: 2.05;
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: var(--measure-prose);
}
.concept__body {
  font-size: var(--text-size);
  line-height: 2.05;
  color: var(--text-body);
  margin-top: 26px;
  max-width: var(--measure-prose);
}
.concept__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(36px, 4.4vw, 64px);
  align-items: start;
}
.concept__note { font-size: var(--text-body-sm); line-height: 1.95; color: var(--gold-700); margin-top: 20px; }
.card__text { font-size: var(--text-body-sm); line-height: 1.95; color: var(--text-body); }
.card__text + .card__text { margin-top: 8px; }
.card__text--strong { color: var(--ink-900); font-weight: var(--weight-medium); }
.card__text--muted { color: var(--text-muted); }
.card--ink .card__text { color: var(--on-ink); }
.card__lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--cream-50);
}
.card__lead + .card__text { color: var(--on-ink-gold); margin-top: 20px; font-size: var(--text-body-sm); line-height: 2; }

/* ==========================================================================
   02 できること
   ========================================================================== */
.ability {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.ability__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--gold-600);
}
.ability__name { font-size: 19px; line-height: 1.6; margin-top: var(--space-3); }
.ability__name a { display: inline-flex; align-items: center; gap: 8px; }
.ability__name a:hover { color: var(--gold-700); }
.ability__name svg { width: 13px; height: 13px; opacity: 0.7; }
.ability__desc { font-size: var(--text-body-sm); line-height: 1.95; color: var(--text-body); margin-top: var(--space-3); }

.ability__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--border-hairline);
}
.ability__foot p { font-size: var(--text-body-sm); line-height: 2.05; color: var(--text-body); }
.credit { margin-top: clamp(24px, 3vw, 36px); }
.credit p { font-size: var(--text-body-sm); line-height: 2.05; color: var(--text-body); max-width: 60em; }

/* ==========================================================================
   03 ご利用の入口（濃紺・3つのAI）
   ========================================================================== */
.entry__list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(36px, 4.4vw, 64px);
}
.entry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  background: rgba(250, 241, 220, 0.04);
  border: 1px solid rgba(250, 241, 220, 0.14);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.8vw, 36px);
}
.entry__index { display: flex; align-items: center; gap: var(--space-3); }
.entry__num {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--on-ink-gold);
}
.entry__index::after {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(220, 181, 92, 0.6);
}
.entry__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h3);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--cream-50);
  margin-top: var(--space-4);
}
.entry .dots { margin-top: 22px; }
.entry__actions { margin-top: 26px; }
.entry__demo {
  align-self: center;
  width: 100%;
  margin: 0;
}
/* 実画面のキャプチャなので、切り抜かず元の縦横比のまま額装する */
.entry__demo video {
  width: 100%;
  height: auto;
  background: rgba(10, 16, 24, 0.35);
  border: 1px solid rgba(250, 241, 220, 0.24);
  border-radius: var(--radius-md);
}
.entry__demo figcaption {
  margin-top: 10px;
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  color: rgba(250, 241, 220, 0.55);
}

/* ==========================================================================
   04 導入事例
   ========================================================================== */
.case__lead {
  font-size: var(--text-size);
  line-height: 2.05;
  color: var(--gold-700);
  margin-top: var(--space-4);
  max-width: var(--measure-prose);
}
.case__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
  align-items: start;
}
.case__text { font-size: var(--text-body-sm); line-height: 2.05; color: var(--text-body); margin-top: 20px; }
.case__text + .case__text { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.case__text strong { color: var(--ink-900); font-weight: var(--weight-medium); }

.voices { margin-top: clamp(32px, 4vw, 56px); }
.voices__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}
.voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 20px;
}
.pullquote { box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.pullquote::before {
  content: "“";
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--gold-400);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: var(--ink-900);
  margin-top: 6px;
}

/* 導入検討中の方へ（金の面。セクション内で1つだけ） */
.cta-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  align-items: center;
  background: linear-gradient(180deg, #FCF5E5, #F7EBD2);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.8vw, 34px);
  box-shadow: 0 1px 2px rgba(168, 122, 46, 0.06), 0 22px 48px -30px rgba(168, 122, 46, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  margin-top: clamp(24px, 3vw, 36px);
}
.cta-band__title { font-size: var(--text-h4); }
.cta-band__desc { font-size: var(--text-body-sm); line-height: 2.05; color: var(--text-body); margin-top: var(--space-3); max-width: 34em; }
.cta-band__actions { justify-content: flex-end; }
@media (max-width: 700px) {
  .cta-band__actions { justify-content: flex-start; }
}

/* ==========================================================================
   05 記事・動画
   ========================================================================== */
.media__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.media__glow {
  right: -40%;
  top: -45%;
  width: min(380px, 110%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196, 151, 47, 0.22), rgba(196, 151, 47, 0) 65%);
  animation-duration: 14s;
}
.media__title { font-size: 17px; margin-top: var(--space-4); }
.card--ink .media__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.04em;
}
.media__desc { font-size: var(--text-body-sm); line-height: 1.95; color: var(--text-body); margin-top: var(--space-3); }
.card--ink .media__desc { color: var(--on-ink); font-size: var(--text-caption); line-height: 2; }
.media__action { margin-top: 18px; }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
}
.person {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(180deg, #FBF6ED, #F5EEE1);
  border-color: var(--cream-300);
  box-shadow: var(--shadow-soft);
}
/* 顔写真は預かっていないので、姓の一字を金の円に置く（DSのワードマークと同じ考え方） */
.person__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-700);
}
.person__role {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}
.person__name { font-size: 16px; font-weight: var(--weight-medium); color: var(--ink-900); margin-top: 8px; }
.person__where { font-size: var(--text-micro); color: var(--text-muted); margin-top: 6px; }
.person__bio { font-size: var(--text-caption); line-height: 1.95; color: var(--text-body); margin-top: var(--space-3); }
.person__link { margin-top: var(--space-3); }

/* ==========================================================================
   06 お申し込み
   ========================================================================== */
.contract-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: 22px; }
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: start;
}
.plan { padding: clamp(24px, 2.8vw, 34px); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1;
  color: var(--ink-900);
}
.plan__unit { font-size: var(--text-size); color: var(--text-body); }
.plan__per { font-size: var(--text-caption); color: var(--text-muted); }
.plan__action { margin-top: 24px; }
.card--ink .plan__amount { color: var(--gold-300); }
.card--ink .plan__unit { color: var(--on-ink); }
.card--ink .plan__per { color: var(--on-ink-muted); }
.plan__glow {
  right: -35%;
  top: -45%;
  width: min(400px, 110%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196, 151, 47, 0.24), rgba(196, 151, 47, 0) 65%);
  animation-duration: 12s;
}
.plan-notes { display: flex; flex-direction: column; gap: var(--space-3); }
.plan-notes .note { font-size: var(--text-micro); }

.sub-head {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  margin-top: clamp(36px, 4.4vw, 64px);
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 24px;
}
.steps__item { padding: 26px; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.steps__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--gold-700);
}
.steps__title { font-size: 16px; margin-top: var(--space-4); }
.steps__desc { font-size: var(--text-caption); line-height: 1.95; color: var(--text-body); margin-top: 10px; }
.steps__link { display: inline; margin-top: var(--space-3); font-size: var(--text-micro); }

.docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 24px;
}
.doc { padding: clamp(20px, 2.2vw, 26px); }
.doc__title { font-size: var(--text-size); }
.doc__desc { font-size: var(--text-caption); line-height: 1.95; color: var(--text-body); margin-top: 10px; }
.doc__link { display: inline; margin-top: var(--space-3); font-size: var(--text-micro); }

/* ==========================================================================
   最終CTA
   ========================================================================== */
.closing { text-align: center; }
.closing__inner {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding-block: clamp(64px, 8vw, 130px);
}
.closing__glow {
  left: 50%;
  top: -40%;
  width: min(900px, 110vw);
  height: min(900px, 110vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(220, 181, 92, 0.24), rgba(220, 181, 92, 0) 65%);
  animation: lumina-breathe 16s var(--ease-standard) infinite;
}
.closing__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: 22px;
}
.closing__mark span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(196, 151, 47, 0.18);
}
.closing__mark span:last-child {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.12em;
  color: var(--cream-50);
}
.closing__title { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.5; letter-spacing: 0.04em; }
.closing__text {
  font-size: var(--text-size);
  line-height: 2.1;
  color: rgba(250, 241, 220, 0.72);
  margin: 22px auto 0;
  max-width: 30em;
}
.closing__actions { justify-content: center; margin-top: 34px; }