/* =========================================================
   ブランドカラー診断LP
   AURIA カラーシステム
   正式ブランドカラー6色だけで組んでいます。
   ネイビーとゴールドは 2026-08-23 に廃止しました。
   ========================================================= */
:root {
  /* --- 正式ブランドカラー（指定値。変更しないこと） --- */
  --pale-blue:   #B8D4E3;  /* メイン：背景・ベース面積の大部分 */
  --misty-white: #F5F7F9;  /* サブ：余白・テキスト背景 */
  --soft-gray:   #C7CCD1;  /* アクセント：罫線・控えめな区切り */
  --dusty-blue:  #8FA8B8;  /* アクセント：引き締め。文字色には使わない */
  --pearl-white: #F4F1EA;  /* アクセント：上品な背景・素材感のある面 */
  --cta:         #7B9ACC;  /* CTA・リンク */

  /* --- 上の6色から作った、可読性のための派生値 --- */
  /* --cta に白文字を載せると 2.9:1 で読めないため、
     ボタンの塗りには暗くした値を使う（5.2:1） */
  --cta-deep:    #4A6DA7;
  --cta-darker:  #3C5C90;
  --ink:         #2E3A45;  /* 本文・見出し（他のAURIA資産と同じ値） */
  --ink-muted:   #5F6E7A;  /* 補足文 */
  /* ペールブルーとミスティホワイトを混ぜただけの面。新しい色は足していない */
  --pale-20:     #E9F0F5;  /* ペール20% + ミスティ80%。補足文 #5F6E7A で 4.57:1 */

  /* --- 役割名（以下は上の値を指すだけ。個別の色は持たない） --- */
  --auria-pale-blue: var(--pale-blue);

  --color-canvas: #ffffff;
  --color-canvas-warm: var(--pearl-white);
  --color-canvas-cool: var(--pale-20);
  --color-ink: var(--ink);
  --color-signal: var(--cta-deep);       /* ボタンの塗り。白文字で 5.2:1 */
  --color-signal-deep: var(--cta-darker);
  --color-highlight: var(--cta);         /* 一点アクセント（旧ゴールド） */

  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-border: var(--soft-gray);
  --color-border-strong: var(--dusty-blue);

  --wrap: 1120px;

  --serif:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:   "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --script: "Cormorant Garamond", serif;

  --motion-base: 320ms;
  --motion-emphasis: 900ms;
  --ease-enter: cubic-bezier(.22, .68, .28, 1);
}

html { color-scheme: light; scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p, li, h1, h2, h3 { word-break: auto-phrase; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 680px); margin-inline: auto; }

.sec { padding: clamp(5rem, 13vw, 9rem) 0; }
.sec-tint { background: var(--color-canvas-cool); }
.sec-warm { background: var(--color-canvas-warm); }

.sp { display: none; }
@media (max-width: 640px) { .sp { display: inline; } }

/* 英字ラベル */
.script {
  font-family: var(--script);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.script.small { display: block; text-align: center; font-size: 1.125rem; margin: 0 0 1rem; }

/* 見出し（明朝・ネイビー文字） */
.sec-title {
  margin: 0 0 clamp(2.5rem, 6vw, 3.75rem);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.07em;
  text-align: center;
  color: var(--color-ink);
}

/* ゴールドは一点だけ：細い下線
   既定では引かれた状態。演出が動くときだけ、いったん消してから伸ばす。 */
.line-accent { position: relative; white-space: nowrap; }
.line-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  height: 2px;
  background: var(--color-highlight);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--motion-emphasis) var(--ease-enter);
}
.js-anim .reveal .line-accent::after { transform: scaleX(0); }
.js-anim .reveal.is-visible .line-accent::after { transform: scaleX(1); }

/* 本文 */
.prose { max-width: 34rem; margin-inline: auto; }
.prose p {
  margin: 0 0 1.6rem;
  font-size: 0.9375rem;
  line-height: 2.3;
  color: var(--color-text-muted);
  text-align: left;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--color-ink); font-weight: 700; }

.lead-center {
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  font-size: 0.9375rem;
  line-height: 2.2;
  color: var(--color-text-muted);
  text-align: center;
}

/* =========================================================
   ボタン
   ========================================================= */
.btn {
  display: inline-block;
  padding: 1.05em 2.6em;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  transition: background var(--motion-base) ease, color var(--motion-base) ease,
              border-color var(--motion-base) ease, transform var(--motion-base) ease,
              box-shadow var(--motion-base) ease;
}
.btn-line {
  background: var(--color-signal);
  color: #fff;
  box-shadow: 0 8px 20px rgba(74, 109, 167, 0.18);
}
.btn-line:hover { background: var(--color-signal-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(74, 109, 167, 0.24); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover { border-color: var(--color-signal); transform: translateY(-2px); }
.btn-lg { padding: 1.2em 2.6em; font-size: 1rem; }
.btn:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
@media (max-width: 560px) { .btn { display: block; width: 100%; padding: 1.1em 1.2em; } }

.center-cta { text-align: center; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.center-cta .hero-actions-note { text-align: center; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.brand {
  /* AURIAのワードマーク（ヘッダーのロゴ）。
     4本のLPで共通の指定。ここは動かさないこと。
     基準はオンライン診断LP（2026-08-23に4本そろえた）。 */
  font-family: var(--script);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  padding: 0.65rem 0;  /* 指で押せる高さを確保 */
}
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-text-muted); text-decoration: none; }
.nav a:hover { color: var(--color-ink); }
.nav-cta { padding: 0.5em 1.3em; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-ink) !important; }
.nav-cta:hover { border-color: var(--color-signal); }
@media (max-width: 820px) { .nav a:not(.nav-cta) { display: none; } }

/* =========================================================
   ファーストビュー
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(4.5rem, 12vw, 8rem);
  background: linear-gradient(170deg, #ffffff 0%, var(--color-canvas-cool) 58%, #ffffff 100%);
}
/* 淡い光がふたつ、静かに漂う */
.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.6; }
.hero-glow-1 {
  width: 44vw; height: 44vw; max-width: 560px; max-height: 560px;
  top: -12%; right: -8%;
  background: radial-gradient(circle, var(--auria-pale-blue) 0%, rgba(184, 212, 227, 0) 70%);
  animation: heroDriftA 22s ease-in-out infinite alternate;
}
.hero-glow-2 {
  width: 38vw; height: 38vw; max-width: 480px; max-height: 480px;
  bottom: -14%; left: -6%;
  background: radial-gradient(circle, rgba(244, 241, 234, 0.95) 0%, rgba(244, 241, 234, 0) 70%);
  animation: heroDriftB 26s ease-in-out infinite alternate;
}
@keyframes heroDriftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-4%, 5%, 0); } }
@keyframes heroDriftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(5%, -4%, 0); } }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-text { width: min(100%, 35rem); text-align: left; }
.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--script);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}
.hero-title {
  margin: 0 0 1.75rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.hero-sub { margin: 0 0 1.75rem; font-size: 0.9375rem; line-height: 2.25; color: var(--color-text-muted); }
.hero-note {
  margin: 0 0 2.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-strong);
  font-size: 0.875rem;
  line-height: 2.1;
  color: var(--color-text-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-actions-note { margin: 1rem 0 0; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
.hero-actions-note a { color: var(--color-ink); text-underline-offset: 0.3em; }

/* 提案結果のイメージカード */
.hero-visual { display: flex; justify-content: center; }
.swatch-card {
  width: min(100%, 22rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(46, 58, 69, 0.09);
}
.swatch-card-label {
  margin: 0 0 1.5rem;
  font-family: var(--script);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--color-text-muted);
}
.swatch-row { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.swatch-col { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.swatch { aspect-ratio: 3 / 4; border-radius: 12px; }
/* この6つの色見本だけは、AURIAのブランドカラーではありません。
   「読み手自身のブランドカラー（誠実／やさしさ／踏み出す力）」を表す一般例なので、
   正式6色に置き換えると「あなたの色＝AURIAの色」という誤った意味になります。
   意図的な例外です。触らないでください。 */
.swatch-main   { background: linear-gradient(160deg, #9fbcdc, #6f92bd); }
.swatch-sub    { background: linear-gradient(160deg, #f2ece4, #e2d8cb); }
.swatch-accent { background: linear-gradient(160deg, #e6c98f, #cfa85c); }
.swatch-word {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-text-muted);
}

.swatch-card-note {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text-muted);
}

/* 横に並べられない幅では縦積みに。
   カードを先に出すと1画面目がカードだけになるので、必ず文章が先。 */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-text { width: 100%; }
  .swatch-card { width: min(100%, 19rem); }
  .swatch { aspect-ratio: 4 / 5; }
}

/* =========================================================
   02 チェック（問いかけ）
   押せる項目。JSが動かなくても文字はそのまま読める。
   ========================================================= */
.check-list {
  list-style: none;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0;
}
.check-row { margin-bottom: 0.75rem; }
.check-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease,
              box-shadow var(--motion-base) ease, transform var(--motion-base) ease;
}
.check-item:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.check-item:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }

/* チェック箱。押されたら枠が濃くなり、中にチェックが引かれる */
.check-box {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease;
}
.check-box::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 260ms var(--ease-enter);
}
.check-item[aria-pressed="true"] {
  background: rgba(184, 212, 227, 0.5);
  border-color: var(--color-signal);
  box-shadow: 0 8px 22px rgba(46, 58, 69, 0.07);
}
.check-item[aria-pressed="true"] .check-box { background: var(--color-signal); border-color: var(--color-signal); }
.check-item[aria-pressed="true"] .check-box::after { transform: rotate(45deg) scale(1); }
.check-text { flex: 1; }

/* チェックがひとつ入ると現れる一文 */
.check-response {
  max-width: 38rem;
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 3vw, 1.1875rem);
  line-height: 2.1;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-emphasis) var(--ease-enter),
              transform var(--motion-emphasis) var(--ease-enter);
}
.check-response.is-shown { opacity: 1; transform: none; }

@media (max-width: 480px) {
  .check-item { padding: 1.1rem 1.15rem; gap: 0.9rem; font-size: 0.875rem; }
}

/* =========================================================
   画像まわり（写真を添えるセクション）
   ========================================================= */
/* 左に写真、右に文章。縦長の写真を大きくなりすぎないように置く */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 58rem;
  margin: 0 auto;
}
.feature-media img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(46, 58, 69, 0.12);
}
.feature-body p {
  margin: 0 0 1.6rem;
  font-size: 0.9375rem;
  line-height: 2.3;
  color: var(--color-text-muted);
}
.feature-body p:last-child { margin-bottom: 0; }
.feature-body strong { color: var(--color-ink); font-weight: 700; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
  .feature-media { width: min(100%, 22rem); margin-inline: auto; }
}

/* 横長に切り出して、セクションの区切りに置く帯 */
.band {
  max-width: 58rem;
  margin: 0 auto clamp(3rem, 7vw, 4.5rem);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(46, 58, 69, 0.12);
}
.band img {
  width: 100%;
  height: clamp(13rem, 30vw, 22rem);
  object-fit: cover;
  object-position: center 45%;
}

/* =========================================================
   03 好きな色と、意味のある色（比較）
   ========================================================= */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 46rem;
  margin: 0 auto;
}
.compare-col {
  padding: clamp(2rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
/* 伝えたいほうだけ、淡いブルーの面にする */
.compare-col-primary {
  background: var(--color-canvas-cool);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(46, 58, 69, 0.07);
}
.compare-label {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-ink);
}
.compare-list { list-style: none; margin: 0; padding: 0; }
.compare-list li {
  position: relative;
  padding: 0 0 0.9rem 1.1rem;
  font-size: 0.875rem;
  line-height: 2.1;
  color: var(--color-text-muted);
}
.compare-list li:last-child { padding-bottom: 0; }
.compare-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95em;
  width: 5px; height: 1px;
  background: var(--color-border-strong);
}
.compare-col-primary .compare-list li::before { background: var(--color-highlight); height: 2px; }
.compare-note { margin-top: clamp(2.5rem, 6vw, 3.5rem); margin-bottom: 0; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* =========================================================
   04 背中を押す力
   ========================================================= */
.power-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.power-card {
  padding: clamp(2rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
.power-chip { display: block; width: 3rem; height: 3rem; border-radius: 12px; margin-bottom: 1.5rem; }
/* この6つの色見本だけは、AURIAのブランドカラーではありません。
   「読み手自身のブランドカラー（誠実／やさしさ／踏み出す力）」を表す一般例なので、
   正式6色に置き換えると「あなたの色＝AURIAの色」という誤った意味になります。
   意図的な例外です。触らないでください。 */
.chip-main   { background: linear-gradient(160deg, #9fbcdc, #6f92bd); }
.chip-sub    { background: linear-gradient(160deg, #f2ece4, #e2d8cb); }
.chip-accent { background: linear-gradient(160deg, #e6c98f, #cfa85c); }
.power-title {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.power-text { margin: 0; font-size: 0.875rem; line-height: 2.15; color: var(--color-text-muted); }
@media (max-width: 820px) { .power-grid { grid-template-columns: 1fr; } }

/* =========================================================
   05 考え方
   ========================================================= */
.quote {
  max-width: 42rem;
  margin: clamp(3rem, 7vw, 4rem) auto 1rem;
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--color-border);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 3.2vw, 1.3125rem);
  line-height: 2.1;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-ink);
}
.quote-note {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 2.1;
  text-align: center;
  color: var(--color-text-muted);
}
.quote-note a { color: var(--color-ink); text-underline-offset: 0.3em; }

/* =========================================================
   06 こんな方に
   ========================================================= */
.fit-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
}
.fit-item {
  position: relative;
  padding: 1.35rem 1.5rem 1.35rem 3rem;
  background: #fff;
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-text);
}
/* 2行になっても点は1行目の高さに置く */
.fit-item::before {
  content: "";
  position: absolute;
  left: 1.4rem; top: 2.2rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-highlight);
}
@media (max-width: 700px) { .fit-list { grid-template-columns: 1fr; } }

/* =========================================================
   06.5 作った人（短いプロフィール）
   ========================================================= */
.author {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.author-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(46, 58, 69, 0.12);
}
.author-role {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.author-name {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}
.author-bio {
  margin: 0 0 1.2rem;
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-text-muted);
}
.author-bio strong { color: var(--color-ink); font-weight: 700; }
.author-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.5rem 0 0; }
.author-links a {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-underline-offset: 0.3em;
}
@media (max-width: 560px) {
  .author { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .author-photo { width: 8.5rem; }
  .author-links { justify-content: center; }
}

/* =========================================================
   07 最終CTA
   ========================================================= */
.final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-canvas-cool) 100%);
}
/* 写真は背面に。白いベールを重ねて文字を読めるようにする */
.final-media { position: absolute; inset: 0; z-index: 0; }
.final-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.final-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(247, 250, 253, 0.8) 55%, rgba(233, 240, 245, 0.88) 100%);
}
.final-cta > .wrap { position: relative; z-index: 1; }
.disclaimer {
  margin: clamp(3rem, 7vw, 4rem) 0 0;
  font-size: 0.75rem;
  line-height: 2;
  text-align: center;
  color: var(--color-text-muted);
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer { padding: 3.5rem 0; text-align: center; background: var(--color-canvas-warm); border-top: 1px solid var(--color-border); }
.footer-brand { margin: 0 0 0.5rem; font-family: var(--script); font-size: 1.375rem; letter-spacing: 0.24em; color: var(--color-ink); }
.footer-tagline { margin: 0 0 1.75rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0 0 1.75rem; }
.footer-links a { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--color-ink); }
.copyright { margin: 0; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--color-text-muted); }

/* =========================================================
   スクロール表示演出
   JSが動いたときだけ隠す。失敗時は js-anim が外れて全表示に戻る。
   ========================================================= */
.js-anim .reveal { opacity: 0; transform: translateY(22px); }
.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-emphasis) var(--ease-enter),
              transform var(--motion-emphasis) var(--ease-enter);
}

/* 並ぶカードは少しずつ遅らせて、順に現れる */
.js-anim .power-card.is-visible:nth-child(2),
.js-anim .compare-col.is-visible:nth-child(2) { transition-delay: 0.1s; }
.js-anim .power-card.is-visible:nth-child(3) { transition-delay: 0.2s; }

/* チェック項目は、上から一枚ずつ差し出されるように */
.js-anim .check-row.is-visible:nth-child(2) { transition-delay: 0.09s; }
.js-anim .check-row.is-visible:nth-child(3) { transition-delay: 0.18s; }
.js-anim .check-row.is-visible:nth-child(4) { transition-delay: 0.27s; }
.js-anim .check-row.is-visible:nth-child(5) { transition-delay: 0.36s; }
.js-anim .check-row.is-visible:nth-child(6) { transition-delay: 0.45s; }
.js-anim .fit-item.is-visible:nth-child(2) { transition-delay: 0.06s; }
.js-anim .fit-item.is-visible:nth-child(3) { transition-delay: 0.12s; }
.js-anim .fit-item.is-visible:nth-child(4) { transition-delay: 0.18s; }
.js-anim .fit-item.is-visible:nth-child(5) { transition-delay: 0.24s; }
.js-anim .fit-item.is-visible:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-glow { animation: none; }
  .line-accent::after { transform: scaleX(1); transition: none; }
  .btn, .check-item { transition: none; }
  /* 押した結果は動きなしで、すぐ切り替える */
  .check-box::after { transition: none; }
  .check-response { transition: none; }
  .check-response.is-shown { opacity: 1; transform: none; }
}