@charset "UTF-8";
/* ============================================================
   LIFE MONEY PASSPORT — 第1期 FACILITATOR 募集LP
   デザイン方向: クラシック／旅券(パスポート)の意匠
   シグネチャー: ギヨシェ地紋 + MRZ帯(旅券下部の機械読取行) + 押印スタンプ
   構成: 1.トークン → 2.ベース → 3.レイアウト → 4.コンポーネント
        → 5.モーション → 6.停止ポリシー
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  --navy: #071A2F;          /* 地(旅券の表紙) */
  --navy-2: #102A43;        /* 面 */
  --navy-3: #17395a;        /* 罫線・境界 */
  --gold: #C7A45A;          /* 箔押し */
  --gold-l: #E0C489;
  --cream: #F7F4EC;         /* 紙 */
  --cream-2: #EBE5D8;
  --gray: #667386;
  --green: #2B7A62;
  --blue: #2775B6;
  --orange: #D17B2F;
  --red: #A9413B;

  --color-bg: var(--cream);
  --color-text: #14212E;
  --color-muted: #56606D;
  --color-accent: #8A6B22;      /* 文字色に使う金(コントラスト確保) */
  --color-line: #D6CEBC;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", "Consolas", monospace;

  --space: 8px;
  --section-pad: clamp(72px, 11vw, 132px);
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 0;                  /* 角丸は使わない(旅券の直角) */

  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.7s;
  --dur: 0.32s;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.95;
  font-size: 16px;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

p, li, dd { text-wrap: pretty; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.045em;
  text-wrap: balance;
  word-break: auto-phrase;
}

::selection { background: var(--gold); color: var(--navy); }

/* 旅券の地紋(ギヨシェ)。背景に薄く敷く共通の質感 */
.guilloche { position: relative; overflow: hidden; }
.guilloche::before {
  content: "";
  position: absolute; inset: -20% -10%;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 13px, rgba(199,164,90,.13) 13px 14px),
    repeating-radial-gradient(circle at 82% 72%, transparent 0 17px, rgba(199,164,90,.10) 17px 18px);
  pointer-events: none;
  z-index: 0;
}
.guilloche > * { position: relative; z-index: 1; }

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 40px); margin-inline: auto; }

.section { padding-block: var(--section-pad); position: relative; }
/* 固定ヘッダーの下に見出しが潜り込まないようにする(ページ内リンクの着地点) */
section[id], main[id] { scroll-margin-top: clamp(72px, 11vw, 104px); }
.section--tight { padding-block: calc(var(--section-pad) * 0.62); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--cream); }
.section--paper { background: var(--cream); }
.section--paper-2 { background: var(--cream-2); }

/* 余白は均等にしない。読ませる節は詰め、思想の節はゆったり取る */
#package, #status, #asks { padding-block: calc(var(--section-pad) * 0.78); }
#why { padding-block: calc(var(--section-pad) * 1.22); }

/* セクション見出し(シグネチャー: 通し番号 + 金の細罫 + 英字ラベル) */
.sec-head { margin-bottom: calc(var(--space) * 6); }
.sec-head__no {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em;
  color: var(--color-accent);
}
.section--navy .sec-head__no { color: var(--gold); }
.sec-head__no::after { content: ""; width: clamp(40px, 8vw, 96px); height: 1px; background: currentColor; opacity: .75; }
.sec-head__title { font-size: clamp(25px, 4.2vw, 42px); margin-top: 14px; }
/* 狭いコンテナでは見出しを一段落とす(行が持たず助詞で泣き別れるのを防ぐ) */
.container--narrow .sec-head__title { font-size: clamp(23px, 3.2vw, 33px); }
.sec-head__lead { margin-top: 18px; max-width: 40em; color: var(--color-muted); }
.section--navy .sec-head__lead { color: rgba(247, 244, 236, .78); }

/* 査証印(破調用)。全セクションを同じ顔にしないための装置 */
.visa {
  position: absolute; top: clamp(24px, 5vw, 64px); right: clamp(14px, 4vw, 56px);
  transform: rotate(-7deg);
  border: 1.5px solid rgba(20, 33, 46, .28);
  padding: 9px 16px 7px; text-align: center;
  font-family: var(--font-mono); color: rgba(20, 33, 46, .34);
  pointer-events: none; user-select: none; z-index: 0;
}
.visa::before {
  content: ""; position: absolute; inset: 3px;
  border: .5px solid currentColor; opacity: .5;
}
.visa span { display: block; font-size: 9px; letter-spacing: .28em; }
.visa b { display: block; font-size: clamp(15px, 2.4vw, 20px); letter-spacing: .16em; margin: 3px 0 2px; font-weight: 500; }
.visa i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .2em; }
.section--navy .visa { border-color: rgba(199, 164, 90, .38); color: rgba(199, 164, 90, .45); }
@media (max-width: 767px) { .visa { transform: rotate(-7deg) scale(.82); transform-origin: top right; } }
.section > .container, .section > .container--narrow { position: relative; z-index: 1; }

/* MRZ帯: 旅券下部の機械読取行。セクションの継ぎ目に使う */
.mrz {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 12px);
  letter-spacing: 0.34em;
  color: rgba(199, 164, 90, .62);
  white-space: nowrap;
  overflow: hidden;
  padding-block: 10px;
  border-block: 1px solid rgba(199, 164, 90, .28);
  background: var(--navy);
  user-select: none;
}
.mrz span { display: inline-block; padding-inline: 1em; }

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 18px clamp(18px, 4vw, 44px);
  background: transparent;
  transition: background 0.4s, padding var(--dur), box-shadow var(--dur);
}
/* すりガラス(backdrop-filter)は使わない。
   Windows版Chromeで、ぼかしの描画範囲がヘッダーの高さを超えて広がり、
   画面上半分が半透明の面で覆われる不具合が実機で発生したため。
   不透明の背景色に切り替えるだけにする。 */
.site-header.is-scrolled { background: var(--navy); padding-block: 7px; box-shadow: 0 1px 0 rgba(199,164,90,.34); }
/* スクロール後はロゴを縮め、英字を隠して高さを明確に落とす */
.site-header.is-scrolled .site-header__logo b { font-size: 15px; }
.site-header.is-scrolled .site-header__logo small { opacity: 0; max-width: 0; }
.site-header.is-scrolled .global-nav a { font-size: 12px; }

.site-header__logo {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
}
.site-header__logo b { font-family: var(--font-display); font-size: 19px; letter-spacing: .12em; font-weight: 600; transition: font-size var(--dur); }
/* 英字サブタイトル。折り返すと縦に伸びるので必ず nowrap を保つ */
.site-header__logo small {
  display: none; font-size: 10px; letter-spacing: .2em; color: var(--gold);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur), max-width var(--dur);
}
@media (min-width: 1100px) { .site-header__logo small { display: inline; } }

/* ヘッダー右のCTA: スクロールで現れる(状態変化の1つ) */
.header-cta {
  display: none;
  padding: 11px 22px;
  font-size: 12.5px; letter-spacing: .08em; text-decoration: none;
  color: var(--navy); background: var(--gold);
  border: 1px solid var(--gold);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), background var(--dur), color var(--dur);
}
.site-header.is-scrolled .header-cta { opacity: 1; transform: none; }
@media (min-width: 768px) { .header-cta { display: inline-block; } }

/* ナビ */
.global-nav ul { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: clamp(14px, 2.2vw, 30px); list-style: none; padding: 0; margin: 0; }
.global-nav a {
  text-decoration: none; font-size: 13px; letter-spacing: .1em; color: var(--cream);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}
@media (hover: hover) { .global-nav a:hover { color: var(--gold); border-color: var(--gold); } }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px; margin: 6px auto;
  background: var(--cream); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--navy);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav::before {
    content: ""; position: absolute; inset: 24px;
    border: 1px solid rgba(199,164,90,.35); pointer-events: none;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: 26px; }
  .global-nav a { font-size: 19px; font-family: var(--font-display); }
}

/* ボタン */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 34px;
  background: var(--gold); color: var(--navy);
  border: 1px solid var(--gold); border-radius: var(--radius);
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-decoration: none;
  cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), background var(--dur), color var(--dur);
}
.button::after { content: "→"; font-family: var(--font-mono); font-size: 14px; }
@media (hover: hover) {
  .button:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7,26,47,.28); }
}
.button:active { transform: translateY(0) scale(.99); }
.button:disabled { opacity: .5; cursor: wait; }
.button--ghost { background: transparent; color: var(--gold); border-color: rgba(199,164,90,.6); font-weight: 500; }
.button--ghost::after { content: "↓"; }
@media (hover: hover) { .button--ghost:hover { background: rgba(199,164,90,.12); color: var(--gold-l); } }
.button--wide { width: 100%; }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }

/* 副導線。主CTAと同じ形にしない(主従をはっきりさせる) */
.text-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; letter-spacing: .04em; text-decoration: none;
  color: var(--gold); padding-bottom: 4px;
  border-bottom: 1px solid rgba(199, 164, 90, .45);
  transition: color var(--dur), border-color var(--dur), gap var(--dur);
}
.text-link::after { content: "↓"; font-family: var(--font-mono); font-size: 13px; }
@media (hover: hover) { .text-link:hover { color: var(--gold-l); border-color: var(--gold-l); gap: 14px; } }

/* ヒーロー */
.hero {
  background: var(--navy); color: var(--cream);
  padding: clamp(104px, 16vw, 150px) 0 clamp(48px, 8vw, 76px);
  position: relative; overflow: hidden;
}
.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.35fr .65fr; } }

.hero__label {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .24em; color: var(--gold);
  border: 1px solid rgba(199,164,90,.45); padding: 8px 16px;
}
.hero__label i { font-style: normal; color: rgba(247,244,236,.7); }
.hero__title {
  margin-top: 26px;
  font-size: clamp(30px, 5.6vw, 52px);
  line-height: 1.38; color: var(--cream);
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__lead { margin-top: 24px; max-width: 30em; color: rgba(247,244,236,.82); font-size: clamp(14.5px, 1.7vw, 16.5px); }

.hero__meta { margin-top: 30px; display: grid; gap: 1px; background: rgba(199,164,90,.28); border: 1px solid rgba(199,164,90,.28); }
@media (min-width: 620px) { .hero__meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hero__meta { grid-template-columns: repeat(4, 1fr); } }
.hero__meta div { background: var(--navy); padding: 14px 16px; }
.hero__meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--gold); }
.hero__meta dd { margin: 4px 0 0; font-size: 14px; color: var(--cream); line-height: 1.6; }

.hero__figure { position: relative; justify-self: center; max-width: 320px; }
.hero__figure img { border: 1px solid rgba(199,164,90,.45); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.hero__note { margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; color: rgba(247,244,236,.55); text-align: center; }
.hero__disclaimer {
  margin-top: 16px; max-width: 34em;
  font-size: 12.5px; line-height: 1.85; letter-spacing: .02em;
  color: rgba(247, 244, 236, .62);
}

/* 図版 */
.figure { margin: 0; }
.figure img { width: 100%; border: 1px solid var(--color-line); }
.section--navy .figure img { border-color: rgba(199,164,90,.3); }
.figure figcaption {
  margin-top: 12px; font-size: 13px; color: var(--color-muted);
  font-family: var(--font-body); letter-spacing: .02em;
}
.section--navy .figure figcaption { color: rgba(247,244,236,.66); }

/* カード群 */
.cards { display: grid; gap: 18px; }
@media (min-width: 700px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--cream); border: 1px solid var(--color-line);
  padding: 26px 24px 28px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.section--navy .card { background: var(--navy-2); border-color: var(--navy-3); }
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(7,26,47,.18);
    border-color: var(--gold);
    background: #E4DCCA;                 /* 紙のカード: はっきり沈む */
  }
  .section--navy .card:hover { background: #1B4571; }  /* 紺のカード: 光が当たる */
}
.card__icon { width: 44px; height: 44px; margin-bottom: 16px; display: block; }
.card__icon [stroke] { stroke: var(--gold); }
.card__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; color: var(--color-accent); }
.section--navy .card__no { color: var(--gold); }
.card__title { font-size: 19px; margin-top: 10px; }
.card p { margin-top: 12px; font-size: 14.5px; color: var(--color-muted); }
.section--navy .card p { color: rgba(247,244,236,.75); }

/* 問い(引用ふう) */
.quotes { display: grid; gap: 14px; margin-top: 30px; }
.quote {
  border-left: 2px solid var(--gold); padding: 12px 0 12px 20px;
  font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 20px); line-height: 1.7;
}
.quote small { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: .08em; color: var(--gray); }

/* チェック表(15万円の内訳) */
.spec { border: 1px solid var(--color-line); background: var(--cream); list-style: none; margin: 0; padding: 0; }
.section--navy .spec { border-color: var(--navy-3); background: var(--navy-2); }
.spec__row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--color-line); align-items: start; }
.section--navy .spec__row { border-color: var(--navy-3); }
.spec__row:last-child { border-bottom: 0; }
.spec__check { color: var(--gold); font-family: var(--font-mono); font-size: 15px; line-height: 1.7; }
.spec__name { font-weight: 700; font-size: 15px; }
.spec__desc { display: block; margin-top: 4px; font-weight: 400; font-size: 13.5px; color: var(--color-muted); }
.section--navy .spec__desc { color: rgba(247,244,236,.72); }

/* 価格の札 */
.price {
  border: 1px solid var(--gold); padding: 26px 24px; background: var(--navy);
  color: var(--cream); display: grid; gap: 6px; align-content: center;
}
.price__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; color: var(--gold); }
.price__value {
  font-family: var(--font-display); font-size: clamp(32px, 5.4vw, 44px);
  line-height: 1.2; color: var(--cream); white-space: nowrap;
}
.price__value small { font-size: 16px; font-family: var(--font-body); letter-spacing: .04em; }
.price__note { font-size: 13px; color: rgba(247,244,236,.72); }

.split { display: grid; gap: 26px; }
@media (min-width: 860px) { .split--spec { grid-template-columns: 1.5fr 1fr; align-items: start; } }
@media (min-width: 860px) { .split--fig { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 860px) { .split--fig-wide { grid-template-columns: 1.2fr .8fr; align-items: center; } }

/* 数値 */
.stats { display: grid; gap: 1px; background: rgba(199,164,90,.3); border: 1px solid rgba(199,164,90,.3); margin-top: 34px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--navy); padding: 24px 20px; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(30px, 5vw, 42px); color: var(--gold); line-height: 1.2; }
.stat__num small { font-size: 15px; font-family: var(--font-body); color: var(--cream); }
.stat__label { font-size: 13px; color: rgba(247,244,236,.75); margin-top: 6px; }

/* 2カラムの向き不向き */
.fit { display: grid; gap: 18px; }
@media (min-width: 780px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { border: 1px solid var(--color-line); padding: 26px 24px; background: var(--cream); }
.fit__col--no { background: var(--cream-2); }
.fit__head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; }
.fit__col--yes .fit__head { color: var(--green); }
.fit__col--no .fit__head { color: var(--red); }
.fit__title { font-size: 19px; margin-top: 10px; }
.fit ul { margin: 16px 0 0; padding-left: 0; list-style: none; display: grid; gap: 11px; }
.fit li { position: relative; padding-left: 26px; font-size: 14.5px; }
.fit li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); color: var(--green);
}
.fit__col--no li::before { content: "×"; color: var(--red); }

/* 開発状況の3列(いま確定していること) */
.status { display: grid; gap: 18px; }
@media (min-width: 820px) { .status { grid-template-columns: repeat(3, 1fr); } }
.status__col { border: 1px solid var(--navy-3); background: var(--navy-2); padding: 24px 22px; }
.status__col h3 { font-size: 17px; margin-top: 10px; color: var(--cream); }
.status__badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; padding: 4px 10px; border: 1px solid currentColor; display: inline-block; }
.status__col--done .status__badge { color: var(--gold); }
.status__col--wip .status__badge { color: var(--orange); }
.status__col--next .status__badge { color: var(--blue); }
.status__col ul { margin: 16px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.status__col li { font-size: 14px; color: rgba(247,244,236,.82); padding-left: 18px; position: relative; }
.status__col li::before { content: "—"; position: absolute; left: 0; color: var(--gold); opacity: .7; }

/* 流れ(90日) */
.flow { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.flow__item {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 22px 0; border-top: 1px solid var(--color-line);
}
@media (min-width: 700px) { .flow__item { grid-template-columns: 92px 1fr; gap: 20px; } }
.flow__item:last-child { border-bottom: 1px solid var(--color-line); }
.flow__when { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--color-accent); padding-top: 4px; }
.flow__title { font-size: 18px; }
.flow__desc { margin-top: 8px; font-size: 14.5px; color: var(--color-muted); }

/* 説明会で必ず伝えること(質問リスト) */
.asks { margin-top: 30px; display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); list-style: none; padding: 0; }
@media (min-width: 760px) { .asks { grid-template-columns: 1fr 1fr; } }
.ask { background: var(--cream); padding: 22px 22px 24px; }
.ask__q { font-family: var(--font-display); font-size: 16.5px; }
.ask__q::before { content: "Q. "; font-family: var(--font-mono); color: var(--color-accent); font-size: 13px; }
.ask p { margin-top: 10px; font-size: 14px; color: var(--color-muted); }

/* FAQ */
.faq { margin-top: 34px; border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6;
  transition: color var(--dur);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 20px; color: var(--gold); transition: transform var(--dur);
}
.faq details[open] summary::after { content: "−"; }
@media (hover: hover) { .faq summary:hover { color: var(--color-accent); } }
.faq__a { padding: 0 0 24px; font-size: 14.5px; color: var(--color-muted); max-width: 46em; }

/* CTAバンド */
.cta-band { background: var(--navy); color: var(--cream); text-align: center; }
.cta-band__title { font-size: clamp(22px, 3.6vw, 34px); color: var(--cream); }
.cta-band p { margin: 18px auto 0; max-width: 34em; color: rgba(247,244,236,.78); font-size: 14.5px; text-wrap: balance; }
.cta-band .button-row { justify-content: center; }
.cta-band__points {
  list-style: none; padding: 0; margin: 26px auto 0; max-width: 640px;
  display: grid; gap: 1px; background: rgba(199,164,90,.3);
  border: 1px solid rgba(199,164,90,.3);
}
@media (min-width: 620px) { .cta-band__points { grid-template-columns: repeat(3, 1fr); } }
.cta-band__points li { background: var(--navy); padding: 16px 12px; font-size: 13.5px; color: var(--cream); }
.cta-band__points b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--gold); margin-bottom: 4px; }

/* 押印スタンプ(見せ場: スクロールで一度だけ押される) */
.stamp {
  --stamp-size: clamp(112px, 20vw, 168px);
  width: var(--stamp-size); height: var(--stamp-size);
  border: 3px solid var(--gold); border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  color: var(--gold); font-family: var(--font-mono);
  transform: rotate(-14deg) scale(1.9); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.25,1.2), opacity .35s ease-out;
}
.stamp.is-stamped { transform: rotate(-14deg) scale(1); opacity: .92; }
.stamp span { display: block; font-size: 10px; letter-spacing: .22em; }
.stamp b { display: block; font-size: clamp(17px, 3.4vw, 24px); letter-spacing: .1em; margin: 4px 0; }
.stamp i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .16em; opacity: .85; }

/* フォーム */
.entry { background: var(--navy-2); border: 1px solid var(--navy-3); padding: clamp(26px, 5vw, 46px); }
.form { display: grid; gap: 22px; }
.form__field { display: grid; gap: 8px; }
.form__field label { font-size: 14px; font-weight: 700; color: var(--cream); }
.form__field .required { color: var(--gold); font-size: 11px; margin-left: .6em; font-family: var(--font-mono); letter-spacing: .1em; }
.form__field .optional { color: rgba(247,244,236,.55); font-size: 11px; margin-left: .6em; font-family: var(--font-mono); letter-spacing: .1em; }
.form input, .form textarea, .form select {
  font: inherit; font-size: 15px; padding: 14px 16px;
  background: var(--navy); color: var(--cream);
  border: 1px solid var(--navy-3); border-radius: var(--radius);
  transition: border-color var(--dur);
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); outline: none; }
.form [aria-invalid="true"] { border-color: #E4736C; }
.form__error { color: #E4736C; font-size: 13px; min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }
.form__note { font-size: 12.5px; color: rgba(247,244,236,.62); }
.form__note a { color: var(--gold); }

/* フッター */
.site-footer {
  background: var(--navy); color: rgba(247,244,236,.7);
  padding: calc(var(--space) * 8) 0 calc(var(--space) * 5);
  font-size: 13px;
}
.site-footer__grid { display: grid; gap: 26px; }
@media (min-width: 820px) { .site-footer__grid { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.site-footer b { font-family: var(--font-display); font-size: 18px; color: var(--cream); letter-spacing: .1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur); }
@media (hover: hover) { .site-footer a:hover { border-color: var(--gold); } }
.site-footer small { display: block; margin-top: 26px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: rgba(247,244,236,.45); }

.notice { border: 1px solid rgba(199,164,90,.45); padding: 22px 24px; background: rgba(199,164,90,.06); }
.notice p { font-size: 14px; }
.notice p + p { margin-top: 12px; }

/* 責任の所在（署名欄） */
.sign { border-top: 2px solid var(--navy); padding-top: 26px; }
.sign__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .26em; color: var(--color-accent); }
.sign__title { font-size: clamp(20px, 2.8vw, 26px); margin-top: 10px; }
.sign__list { margin: 24px 0 0; display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.sign__list > div { background: var(--cream); display: grid; gap: 4px; padding: 15px 18px; }
@media (min-width: 620px) { .sign__list > div { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; } }
.sign__list dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--color-accent); }
.sign__list dd { margin: 0; font-size: 14.5px; }
.sign__pending { font-size: 12.5px; color: var(--gray); }
.sign__note { margin-top: 22px; font-size: 14.5px; color: var(--color-muted); }

/* SP下部の固定CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  border-top: 1px solid rgba(199,164,90,.4);
  transform: translateY(110%); transition: transform .4s var(--ease-out);
}
.sticky-cta.is-shown { transform: none; }
.sticky-cta .button { width: 100%; padding-block: 15px; font-size: 14px; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
/* 固定CTAでフッターが隠れないように、SPだけ足元に余白を作る */
@media (max-width: 767px) { body { padding-bottom: 84px; } }

/* ---------- 5. モーション ---------- */
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: .09s; }
.js-reveal[data-delay="2"] { transition-delay: .18s; }
.js-reveal[data-delay="3"] { transition-delay: .27s; }

/* セクション単位のリビール(子を順に) */
[data-motion="reveal"] > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
[data-motion="reveal"].is-in > * { opacity: 1; transform: none; }
[data-motion="reveal"].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-motion="reveal"].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-motion="reveal"].is-in > *:nth-child(4) { transition-delay: .24s; }

/* 動きを減らす設定の人には、中身を最初から全部見せる(透明のまま消える事故を防ぐ)。
   JSは止めない。停止ボタンは下の6.で別に用意している。 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  [data-motion="reveal"] > * { opacity: 1 !important; transform: none !important; transition: none; }
  .stamp { opacity: .92; transform: rotate(-14deg) scale(1); transition: none; }
  .sticky-cta { transition: none; }
}

/* ---------- 6. モーション停止(削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 74px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px; font-family: var(--font-body);
  background: var(--cream); color: var(--navy); border: 1px solid var(--gold);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .motion-stop { display: block; } }
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal,
html.is-motion-off [data-motion="reveal"] > * { opacity: 1; transform: none; }
html.is-motion-off .stamp { opacity: .92; transform: rotate(-14deg) scale(1); }