/* ============================================================
   v9.css ── 下層ページ「明るい臙脂」テーマ ＋ ヘッダー/ページ識別 再設計
   出典: V9_フェーズ1設計_明色化・ヘッダー・AI相談.md（C-20=B採用 / C-21 / C-23）
   適用範囲: body.theme-bright を付けた下層ページのみ。
            トップFV(index*.html / .stage)には付けない＝劇場型は不変（マスター§2）。
   仕組み: 色は tokens.css の var() を body.theme-bright で上書きし、
           site.css の全共通部品（ヘッダー/セクション/カード/CTA/フッター）へ
           自動波及させる。site.css の後に読み込むこと。
   規範: hex直書きはこのテーマ定義ブロック（配色の1次情報）に限る。
         それ以外は必ず var(--alpe-*) を参照する。
   ============================================================ */

/* ---- ① B配色: トークン上書き（下層のみ・生成り→ほぼ白／臙脂を一段明るく）---- */
body.theme-bright{
  --alpe-paper:      #FFFDF8;  /* 地: 生成りの記憶を残した白 */
  --alpe-paper-dim:  #F7F3EA;  /* 交互セクションの地 */
  --alpe-red:        #B3202C;  /* 主臙脂（明度アップ）: 見出しアクセント・リンク・現在地 */
  --alpe-red-deep:   #8E1B26;  /* 深臙脂: ホバー */
  --alpe-ink:        #2A211B;  /* 本文: 温かい墨 */
  --alpe-ink-soft:   #6B6156;  /* 補足 */
  background: var(--alpe-paper);
}

/* ---- ② ヘッダー: エンブレム横組みロックアップ ---- */
.theme-bright .site-header{
  background: color-mix(in srgb, var(--alpe-paper) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.theme-bright .site-header .brand{
  flex-direction: row;
  align-items: center;
  gap: .7em;
}
.theme-bright .brand-emblem{
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: none;
}
.theme-bright .brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

/* 現在地表示つきナビ（棚の中で「今どこ」を答える） */
.theme-bright .site-nav a{
  color: var(--alpe-ink-soft);
  padding-block: .35em;
  border-bottom: 2px solid transparent;
  transition: color .2s;
}
.theme-bright .site-nav a:hover{ color: var(--alpe-red); }
.theme-bright .site-nav a[aria-current="page"]{
  color: var(--alpe-red);
  font-weight: 700;
  border-bottom-color: var(--alpe-red);
}
.theme-bright .site-nav a.nav-cta{
  color: var(--alpe-red);
  font-weight: 700;
  border-bottom: 2px solid var(--alpe-gold);
}
.theme-bright .site-nav a.nav-cta:hover{ color: var(--alpe-red-deep); }

/* モバイル展開時も現在地を維持（左罫＋地色） */
@media (max-width: 46em){
  .theme-bright .site-nav a{ border-bottom: none; }
  .theme-bright .site-nav ul{ gap: 0; }
  .theme-bright .site-nav li a{
    display: block;
    padding: .8em .2em;
    border-left: 3px solid transparent;
    padding-left: .8em;
  }
  .theme-bright .site-nav a[aria-current="page"]{
    border-left-color: var(--alpe-red);
    background: var(--alpe-paper-dim);
  }
  .theme-bright .site-nav a.nav-cta{ border-bottom: none; }
}

/* ---- ③ ページ識別: パンくず ＋ 舞台文字 ---- */
.theme-bright .crumbs{
  font-size: var(--fs-small);
  letter-spacing: .08em;
  color: var(--alpe-ink-soft);
  margin-bottom: 2em;
}
.theme-bright .crumbs a{
  color: var(--alpe-ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-ink-soft) 40%, transparent);
}
.theme-bright .crumbs a:hover{ color: var(--alpe-red); }
.theme-bright .crumbs .here{ color: var(--alpe-red); font-weight: 700; }

/* プレーンな page-hero の「寂しさ」を、薄い方眼＋輪郭巨大文字で解消
   （劇場型の遺伝子＝文字を舞台装置に、を下層の文法で薄く継承） */
/* 明色グラデ＋方眼は「赤ヒーロー(page-hero--red)以外」に限定。
   --red ヒーローは赤背景（--alpe-red-stage）＋白文字のまま維持する。 */
.theme-bright .page-hero:not(.page-hero--red){
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--alpe-red) 3%, var(--alpe-paper)), var(--alpe-paper) 55%),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--alpe-red) 5%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--alpe-red) 5%, transparent) 0 1px, transparent 1px 28px);
}
.theme-bright .page-hero:not(.page-hero--red) .container{ position: relative; z-index: 1; }

/* 赤地ヒーロー（page-hero--red / lane-hero--red）上のパンくずは明色で */
.theme-bright .page-hero--red .crumbs,
.theme-bright .lane-hero--red .crumbs{ color: color-mix(in srgb, var(--alpe-paper) 78%, transparent); }
.theme-bright .page-hero--red .crumbs a,
.theme-bright .lane-hero--red .crumbs a{ color: var(--alpe-paper); border-bottom-color: color-mix(in srgb, var(--alpe-paper) 45%, transparent); }
.theme-bright .page-hero--red .crumbs .here,
.theme-bright .lane-hero--red .crumbs .here{ color: var(--alpe-gold); }
.theme-bright .hero-glyph{
  position: absolute;
  right: -.06em;
  bottom: -.26em;
  z-index: 0;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: clamp(140px, 22vw, 300px);
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--alpe-red) 15%, transparent);
  pointer-events: none;
  user-select: none;
}

/* ---- ④ 宣言文（houshin）: 文節spanでどの幅でも途中改行させない ---- */
.theme-bright .selection blockquote{
  border-left: 3px solid var(--alpe-gold);
  padding-left: clamp(1.2em, 4vw, 2.2em);
  text-align: left;
  max-width: 44em;
  margin-inline: auto;
}
.theme-bright .selection .line{ display: block; margin-bottom: .35em; }
.theme-bright .selection .np{ display: inline-block; } /* 折り返しは文節境界でのみ */
.theme-bright .selection .sig{
  display: block;
  margin-top: 1.6em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-ink-soft);
}

/* ---- ⑤ AI相談: ステップフォーム（アカウント不要・設問で「入力が簡単」を実現）---- */
.stepform{ max-width: 46rem; margin-inline: auto; }
.stepform .step{ display: none; }
.stepform .step.is-active{ display: block; animation: sf-in .3s ease; }
@keyframes sf-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }
.stepform .step legend{
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--alpe-red);
  line-height: var(--lh-head);
  margin-bottom: 1.2em;
  padding: 0;
}
.stepform fieldset{ border: 0; padding: 0; margin: 0; }
.sf-progress{
  display: flex;
  gap: .5em;
  justify-content: center;
  margin-bottom: 2.4em;
  list-style: none;
  padding: 0;
}
.sf-progress li{
  width: 2.2em;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--alpe-ink) 14%, transparent);
}
.sf-progress li.is-done{ background: var(--alpe-gold); }
.sf-progress li.is-current{ background: var(--alpe-red); }

/* 選択肢を大きなタップ対象カードに */
.sf-options{ display: grid; gap: .8em; }
@media (min-width: 640px){ .sf-options.cols-2{ grid-template-columns: 1fr 1fr; } }
.sf-option{
  display: block;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--alpe-red) 22%, transparent);
  border-radius: var(--radius-card);
  padding: 1em 1.2em;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--alpe-ink);
  background: var(--alpe-paper);
  transition: border-color .15s, background .15s;
}
.sf-option:hover{ border-color: var(--alpe-red); }
.sf-option input{ position: absolute; opacity: 0; pointer-events: none; }
.sf-option:has(input:checked){
  border-color: var(--alpe-red);
  background: color-mix(in srgb, var(--alpe-red) 7%, var(--alpe-paper));
  box-shadow: inset 0 0 0 1px var(--alpe-red);
}
.sf-field{ margin-top: .4em; }
.sf-field label.lbl{ display:block; font-weight:700; margin-bottom:.5em; color: var(--alpe-ink); }
.stepform textarea, .stepform input[type="text"], .stepform input[type="email"], .stepform input[type="tel"], .stepform select{
  width: 100%;
  font: inherit;
  color: var(--alpe-ink);
  background: var(--alpe-paper);
  border: 1px solid color-mix(in srgb, var(--alpe-ink) 24%, transparent);
  border-radius: var(--radius-btn);
  padding: .7em .9em;
}
.stepform textarea{ min-height: 6em; resize: vertical; }
.stepform textarea:focus, .stepform input:focus, .stepform select:focus{
  outline: 2px solid color-mix(in srgb, var(--alpe-red) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--alpe-red);
}
.sf-nav{ display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 2em; }
.sf-btn{
  font: inherit;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: var(--radius-btn);
  padding: .75em 1.8em;
  cursor: pointer;
  border: 1px solid var(--alpe-red);
}
.sf-btn.next, .sf-btn.submit{ background: var(--alpe-red-stage); color: var(--alpe-paper); border-color: var(--alpe-red-stage); }
.sf-btn.next:hover, .sf-btn.submit:hover{ background: var(--alpe-red-deep); }
.sf-btn.back{ background: transparent; color: var(--alpe-ink-soft); border-color: color-mix(in srgb, var(--alpe-ink) 24%, transparent); }
.sf-btn.back:hover{ color: var(--alpe-ink); }
.sf-btn[hidden]{ display: none; }
.sf-hint{ font-size: var(--fs-small); color: var(--alpe-ink-soft); margin-top: 1.2em; }
.sf-ai{ margin-top: 1em; font-size: var(--fs-small); }
.sf-ai a{ color: var(--alpe-red); border-bottom: 1px solid var(--alpe-gold); }

@media (prefers-reduced-motion: reduce){
  .stepform .step.is-active{ animation: none; }
}