/* ============================================
   ナルボル体験談サイト - グローバルスタイル
   カスタマイズ時は :root の変数を変更してください
   ============================================ */

:root {
  /* === レガシー v2 パレット（一部ページのみ残存。新規実装は v3 トークンを使用） === */
  --color-border: #e8e8e8;              /* 関連体験談・アフィリエイト枠のボーダー */
  --color-bg: #f4f4f6;                  /* body 背景 */

  /* === タイポグラフィ === */
  --font-body: 'Noto Sans JP', 'Noto Sans Arabic', 'Noto Sans KR', 'Noto Sans SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Noto Serif JP', 'Noto Sans Arabic', 'Noto Sans KR', 'Noto Sans SC', serif;
  --font-size-base: 16px;
  --line-height: 1.8;

  /* ═══════════════════════════════════════════════════════════════════
     🔴 【WO-017・椿さん FIX 2026-08-12】**標準の文字サイズ＝この6段だけ。**

     ■ なぜ要るか（実測）
       このサイトには**標準サイズが定義されていなかった**。`--font-size-base` が1個あるだけで、
       この global.css だけでも文字サイズの直書きが **517か所**。⇒ 画面ごとに大きさがばらつく。

     ■ いまの対象範囲＝**プロフィール・マイページ・名刺・自己紹介だけ**
       ⚠️ 517か所を一度に直さない（全ページの見た目が同時に動いて、確認ができなくなる）。
       ⭐ **これから書くものは、必ずこの6段から選ぶ。**見張り＝`tests/font-scale.test.mjs`

     ■ 6段（椿さんの表そのまま）
       32 ページの大見出し（スマホ 24）／24 章の見出し／20 小見出し／
       **16 本文（標準）**／14 補足・注記／12 ごく小さい印
     ═══════════════════════════════════════════════════════════════════ */
  --fs-page: 32px;   /* ページの大見出し（例「プロフィール」）。スマホでは 24px（下の @media） */
  --fs-sec:  24px;   /* 章の見出し（例「体験談」「名刺」） */
  --fs-sub:  20px;   /* 小見出し（例 名刺の中の見出し） */
  --fs-body: 16px;   /* 🔴 本文（標準）＝自己紹介の本文・名刺の項目・**入力欄はすべてここ** */
  --fs-note: 14px;   /* 補足・注記（説明書き・日付） */
  --fs-mini: 12px;   /* ごく小さい印（ラベル・徽章） */

  /* === v3 デザインシステム トークン（2026-04-24 UI/UX リデザイン） === */
  /* NARUTO オレンジ＋墨＋温色オフホワイトの色彩体系（和紙/絵巻モチーフは全廃・owner 2026-06-07）。新規実装はこちらを使用 */
  --ink: #1a1a1a;
  --ink-80: rgba(26,26,26,0.8);
  --ink-60: rgba(26,26,26,0.6);
  --ink-40: rgba(26,26,26,0.4);
  --ink-20: rgba(26,26,26,0.12);
  /* 🔴 【WO-021・P-1049・2026-08-14 椿さん決定】地の色（body）を **温色オフホワイト → 中立のごく淡いグレー**。
     ⚠️ 変えたのは `--scroll` **1つだけ**。`--scroll-deep` / `--scroll-dark`（帯や枠に使う濃いめ）は
        温色のまま。
        🔴 **未着手であって、「やらない」と決めたのではない。**
        **決めた人＝椿さん／2026-08-14＝「今日は触らない。地の色を変えた結果を実物で見てから決める」**
        （淡いグレーの上に温かい帯が乗るのが「良いアクセント」か「ちぐはぐ」かは、絵を見ないと決められないため）。 */
  --scroll: #f4f4f5;
  --scroll-deep: #fbe6d3;
  --scroll-dark: #f3d9bc;
  --fire: #FF7601;          /* NARUTO メインオレンジ（25th 参照・2026-06-03）。ヒーロー/ヘッダー/CTA の地色 */
  --fire-dark: #d95e00;     /* 上記の濃いめ（影/補助）。旧 #c04e10 から NARUTO オレンジ系へ */
  --fire-soft: #ffe0c8;
  --vermilion: #8b1f12;
  --amber: #FFC677;         /* 本文パートの背景（NARUTO アンバー・25th 参照） */
  --accent: #E9451F;        /* 局所強調（赤寄りオレンジ・写輪眼の朱に近い） */
  --util-bg: #F0EFEB;       /* おしらせ/サイトの裏側＝業務連絡帯の背景（エンタメ部と差別化） */

  /* === 里づくり本部 トークン（2026-07-22・会員共創エリア。アクセントとして5〜10%運用・全面塗り禁止） === */
  --flash: #FFD023;         /* 閃光イエロー: バッジ・強調・アクセント。白文字は禁止（墨 #1a1a1a のみ） */
  --flash-deep: #F7B500;    /* 閃光イエローの影/縁 */
  --flash-soft: #FFF6D6;    /* 陽だまり: 里づくり本部・企画ページの地色 */

  /* === 里づくり本部（会員HQ /hq）UIデザイン・トークン — モック gen23 ロック (2026-07-24) ===
     3コンポ（HubView / CampaignNameView / CampaignBoard）は互いを import できないため、
     共有トークンをここ（:root 一次ソース）に集約する。色名はサイト既存トークン（--accent は
     写輪眼の朱 #E9451F・--flash 等）と意味が衝突しないよう --hub-* で名前空間を切る。
     ── 幅の規約（独自幅を作らない・「幅がぐちゃぐちゃ」再発防止）──
       枠   = --hub-frame … hero と掲示板の外枠。この2つは必ず同じ幅で揃える。
              🔴 RA-08（椿さん確認=YES・PM裁定 2026-08-20）＝サイト標準の --max-width(1280px)
              に統一（旧値は1040px固定）。根拠＝椿さんの横断ルール「面の幅は1280に揃える／
              狭い方に寄せず広い方へ」（2026-08-03）が、このロック（2026-07-24）より新しく
              全面に係る指示のため。値を書き写さず var(--max-width) を参照＝正本を1か所に保つ。
       全幅 = カルーセルだけ … .cp-deck-band は枠を破って full-bleed（唯一の例外）
       スライド = 全カード固定寸法（--hub-slide-w / --hub-slide-h）。幅は width 直指定
                 （`flex: 0 0 var(...)` はブラウザに無効化され幅崩れするため短縮形に入れない） */
  --hub-canvas: #F1EFEA;        /* 暖色ストーンの地色（ページ地。ヒーロー背景イラストのフェード先） */
  --hub-surface: #FFFFFF;       /* カード地 */
  --hub-surface-soft: #FBF9F5;  /* 図パネル / 画像 wash の下地 */
  --hub-text: #1C1B19;          /* 不透明の暖色ニアブラック（本文） */
  --hub-text-muted: #6B665E;    /* 不透明の暖色グレー（副文。色の上に rgba を使わない） */
  --hub-hairline: #E6E2DA;      /* 静かな罫・境界 */
  --hub-border: #D8D3CA;        /* 入力 / 強めの縁 */
  --hub-accent: #FF7601;        /* NARUTO オレンジ＝基調（= --fire）。明るい塗りの上の文字は必ず墨 */
  --hub-accent-ink: #1C1B19;    /* オレンジ塗りの上の文字 / アイコン＝墨（白抜き禁止） */
  --hub-accent-deep: #D95E00;   /* 濃いオレンジ: hover / 罫 */
  --hub-accent-soft: #FFE3CC;   /* 暖色オレンジのごく淡い chip wash */
  --hub-accent-quiet: #FFF3E9;  /* さらに淡いオレンジ wash（広い面） */
  --hub-flash: #FFD023;         /* 閃光イエロー（会員の光・少量アクセント≤8%・オレンジと隣接させない） */
  --hub-flash-deep: #F7B500;
  --hub-flash-soft: #FFF6D6;
  --hub-flash-line: #F1E1A4;
  --hub-frame: var(--max-width);
  --hub-r-card: 18px;
  --hub-r-control: 12px;
  --hub-elev-card: 0 1px 2px rgba(28,27,25,.05), 0 8px 22px -10px rgba(28,27,25,.14);
  --hub-elev-card-hover: 0 3px 6px rgba(28,27,25,.06), 0 18px 40px -14px rgba(217,94,0,.22);
  --hub-elev-slide: 0 2px 6px rgba(28,27,25,.06), 0 24px 54px -20px rgba(28,27,25,.32);
  --hub-elev-float: 0 3px 8px rgba(28,27,25,.16), 0 16px 34px -10px rgba(217,94,0,.40);
  --hub-slide-w: min(86vw, 560px);
  --hub-slide-h: min(520px, calc(100vh - 170px));

  /* === スペーシング === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* === レイアウト === */
  --max-width: 1280px;        /* 全ページ共通の基準幅＝体験談一覧カード/きっかけ集と統一（owner 2026-06-04・旧 1100px） */
  --max-width-text: 720px;
  /* 🔴【N-13・2026-08-21・監査窓実測】--radius-sm はこれまで公開側のどこにも定義が無く、
     MemberProfileShellの一部（X ID編集モーダルの入力欄・ボタン等）が角丸0で描かれていた
     （実測confirmed＝border-radius:0px）。値はadmin側の --adm-radius-s に合わせる
     （admin/src/styles/admin-tokens.css）。 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* === シャドウ === */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.16);

  /* === トランジション === */
  --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 里づくり本部カルーセル: モバイルは上段(画像/図)を縦長にする分、カード全体を低くする（モック gen23） */
@media (max-width: 600px) {
  :root { --hub-slide-h: min(460px, calc(100vh - 120px)); }
}

/* ============ リセット ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: var(--font-size-base); scroll-behavior: smooth; overflow-x: clip; width: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--scroll);
  line-height: var(--line-height);
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* モバイルで要素がビューポートを押し広げないための保険 */
main { max-width: 100vw; overflow-x: clip; }

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

a { color: var(--fire); text-decoration: none; }
a:hover { text-decoration: none; }


/* ============ ボタン ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.8rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  border: 2.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--fire);
  font-weight: 800;
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1);
}
.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  text-decoration: none;
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--fire);
}

.btn-outline {
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--fire);
  font-weight: 800;
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1);
}
.btn-outline:hover {
  background: var(--scroll);
  color: var(--ink);
  text-decoration: none;
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--fire);
}

.btn-large {
  padding: 1rem 2.4rem;
  font-size: 1.05rem;
}

/* 方式B 公開ゲート：公開時刻まで新導線を隠す（BaseLayout のスクリプトが時刻到来で data-launch-gated を外す）。owner 2026-06-10 */
[data-launch-gated] { display: none !important; }

/* ============ タグ ============ */
.tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: var(--fire-soft);
  color: var(--ink);
  border: 1.5px solid var(--fire);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 800;
}

.tag-large {
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
}

/* メディア種別タグ（アニメ・漫画など）：シリーズタグと色を変えて区別 */
.tag-media {
  background: var(--scroll-deep);
  color: var(--ink-80);
  border-color: var(--ink-40);
}

/* ============ セクション共通 ============ */
.section {
  padding: var(--space-lg) 0;
}

/* body 背景は L65 の --scroll（温色）に一本化。--color-bg(寒色)上書きは静的ページが意図と逆の寒色になるため撤去（owner 2026-06-07） */

.section-inner,
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* モバイル: セクション余白を圧縮（画面幅を有効活用） */
@media (max-width: 720px) {
  .section { padding: 32px 0 40px; }
  .section-inner,
  .container { padding: 0 16px; }
  /* 🔴 【WO-017】スマホではページの大見出しだけ 24px（椿さん FIX の表）。
     ⚠️ 他の5段は動かさない＝本文が端末で変わると、書いた人の見え方が読む人と変わる。 */
  :root { --fs-page: 24px; }
}
@media (max-width: 420px) {
  .section { padding: 24px 0 32px; }
  .section-inner,
  .container { padding: 0 12px; }
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 0.75rem;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--fire) 0%, rgba(232,98,26,0.2) 100%);
  border-radius: 2px;
}

.section-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fire);
}

/* ============ .mp カードグリッド（v3 stories 一覧） ============ */
.mp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

/* ============ CTAセクション ============ */
/* 下部 CTA — homepage `.cta` と同じ視覚言語に統一 */
.cta-fire {
  position: relative; overflow: hidden;
  padding: 120px 32px 132px;
  background: var(--fire);
  color: #fff;
  text-align: center;
}
.cta-fire::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 180deg at 50% 50%,
      transparent 0deg, transparent 2deg,
      rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
}
.cta-fire::after {
  content: '声';
  position: absolute; right: -80px; bottom: -140px;
  font-family: var(--font-serif); font-weight: 700; font-size: 560px;
  line-height: 0.8; color: var(--ink); opacity: 0.08;
  pointer-events: none;
}

.cta-inner {
  max-width: 900px; margin: 0 auto;
  position: relative; z-index: 2; text-align: center;
}

.cta-stamp-p100 {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: var(--ink); color: var(--fire);
  font-weight: 900; font-size: 12px; letter-spacing: 0.24em;
  border-radius: 999px; margin-bottom: 28px;
  transform: rotate(-2deg);
}

.cta-title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: #fff;
  word-break: keep-all; overflow-wrap: break-word;
}
.cta-title .box {
  display: inline-block; background: var(--ink); color: var(--fire);
  padding: 0 14px; margin: 0 2px;
  transform: rotate(-1deg);
}

.cta-desc {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.9; font-weight: 500;
  max-width: 640px; margin: 0 auto 44px;
  color: rgba(255,255,255,0.95);
}
.cta-desc .nb {
  display: inline-block; font-weight: 900; color: #fff;
  background: rgba(26,26,26,0.25); padding: 2px 10px; border-radius: 6px;
  margin: 2px 4px;
}

/* p100 CTA ボタン — homepage `.cta-cta` と完全同値 */
.cta-fire .btn,
.cta-fire .btn-primary,
.cta-fire .btn-primary.btn-large {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 22px 48px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 18px; font-weight: 900; letter-spacing: 0.04em;
  text-decoration: none;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 rgba(26,26,26,0.4);
  transition: all 0.22s cubic-bezier(.5,1.4,.4,1);
  min-height: 56px;
}
.cta-fire .btn-primary:hover,
.cta-fire .btn-primary.btn-large:hover {
  background: #fff; color: var(--ink);
  border-color: var(--ink);
  transform: translate(-3px,-3px);
  box-shadow: 11px 11px 0 rgba(26,26,26,0.4);
}
.cta-fire .btn-primary .arrow,
.cta-fire .btn-primary.btn-large .arrow { transition: transform 0.25s ease; }
.cta-fire .btn-primary:hover .arrow,
.cta-fire .btn-primary.btn-large:hover .arrow { transform: translateX(8px); }

.cta-note {
  margin-top: 28px; font-size: 13px;
  color: rgba(255,255,255,0.85); font-weight: 500;
}
.cta-note a {
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.85);
  padding-bottom: 1px;
}
.cta-note a:hover { border-bottom-color: #fff; }

@media (max-width: 720px) {
  .cta-fire { padding: 56px 20px 64px; }
  .cta-fire::before { mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); }
  .cta-fire::after { font-size: 320px; right: -80px; bottom: -120px; }
  .cta-stamp-p100 { margin-bottom: 18px; padding: 6px 14px; font-size: 11px; }
  .cta-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
  .cta-desc { font-size: 0.95rem; line-height: 1.85; margin-bottom: 28px; }
  .cta-fire .btn-primary,
  .cta-fire .btn-primary.btn-large {
    padding: 14px 22px; font-size: 15px;
    width: 100%; max-width: 100%;
    justify-content: center; box-sizing: border-box;
    min-height: 50px; gap: 10px;
    box-shadow: 5px 5px 0 rgba(26,26,26,0.4);
  }
  .cta-note { margin-top: 18px; font-size: 12px; }
}

/* ============ ページヘッダー（v3 — homepage section titles と統一） ============ */
.page-header {
  background: var(--scroll);
  position: relative;
  overflow: hidden;
  padding: 56px 0 40px;
  border-bottom: 2px solid var(--ink);
}
.page-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--fire);
  pointer-events: none;
}

.page-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
}

.page-title {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.55rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.page-desc {
  color: var(--ink-80);
  font-size: 0.95rem;
  font-weight: 600;
}
.page-desc strong {
  color: var(--ink);                                     /* オレンジhero上で件数のオレンジ字が消えるので黒に（owner 2026-06-04） */
  font-size: 1.35em;
  font-weight: 900;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  margin: 0 2px;
}

@media (max-width: 720px) {
  .page-header { padding: 32px 0 24px; }
  .page-header-inner { padding: 0 16px; }
  /* V-21（2026-08-19）＝スマホでヒーローが縦に長すぎる（椿さん指摘）。文字を小さく・
     余白を詰める。.panel-hero/.page-header 両方の見出しで使われる共通クラスなので、
     ここを直すだけで全ページ（里人の証／忍界ニュース／聖地マップ／このサイトについて…）
     に一括で効く。 */
  .page-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); margin-bottom: 0.35rem; }
  .page-desc { font-size: 0.85rem; }
}
@media (max-width: 420px) {
  .page-header { padding: 24px 0 20px; }
  .page-header-inner { padding: 0 12px; }
}

/* ===== v3 パネルヒーロー（submit / stories 等の共通ページ見出し・home hero と同じマンガパネル言語）===== */
.panel-hero {
  position: relative;
  overflow: hidden;
  background: var(--scroll);
  padding: 64px 0 48px;
  border-bottom: 2px solid var(--ink);
}
/* 朱のパネル境界線 */
.panel-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; background: var(--fire);
  pointer-events: none; z-index: 6;
}
/* 集中線（home hero と同じ放射パターン） */
.panel-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    repeating-conic-gradient(from 0deg at 78% 30%,
      transparent 0deg, transparent 1.2deg,
      rgba(26,26,26,0.06) 1.2deg, rgba(26,26,26,0.06) 1.6deg);
  -webkit-mask-image: radial-gradient(circle at 78% 30%, transparent 180px, #000 560px);
  mask-image: radial-gradient(circle at 78% 30%, transparent 180px, #000 560px);
}
/* 巨大漢字透かし（字はページ側 HTML で指定。submit=談 / stories=読 等） */
.panel-hero-kanji {
  position: absolute; right: -3vw; top: -2vw; z-index: 0;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 30vw; line-height: 0.8; color: var(--fire);
  opacity: 0.06; pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.panel-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
/* ステッカー pill（home hero eyebrow と同形） */
.panel-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 900; letter-spacing: 0.18em;
  color: var(--ink); background: #fff;
  padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--fire);
  margin: 0 0 22px;
  transform: rotate(-2deg);
}
.panel-hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fire);
  animation: pulse 1.4s ease-in-out infinite;
}
[dir="rtl"] .panel-hero-eyebrow { box-shadow: -3px 3px 0 var(--fire); }
@media (max-width: 720px) {
  /* V-21（2026-08-19）＝padding を 40/34 → 24/20 に詰める。バッジ（eyebrow）も
     一回り小さく・下余白を縮める。中身の行数はページごとに違う（里人の証は
     バッジ＋2行の説明あり／このサイトについて等は見出しだけ）ので、実測すると
     ページごとに高さは異なるまま＝ここで揃えているのは「文字と余白の圧縮」。 */
  .panel-hero { padding: 24px 0 20px; }
  .panel-hero-kanji { font-size: 46vw; right: -6vw; top: 0; }
  .panel-hero-eyebrow { font-size: 10px; letter-spacing: 0.12em; padding: 6px 14px; margin-bottom: 12px; }
}

/* ============ 体験談一覧ページ ============ */
.filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.filter-toolbar .filter-bar { margin-bottom: 0; }

.filter-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-select {
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sort-select:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.sort-select:focus { outline: none; box-shadow: 3px 3px 0 var(--fire); }

.btn-random {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-random:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--fire);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.filter-btn {
  padding: 0.5rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.filter-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--fire);
}
.filter-btn.active {
  background: var(--fire);
  color: #fff;
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

/* NEWバッジ */
.badge-new {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--fire);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* キャラクターフィルターチップ（v3） */
.chara-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  background: var(--fire-soft);
  border: 1.5px solid var(--fire);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.chara-filter-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-60);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.15rem;
  font-weight: 900;
}
.chara-filter-chip button:hover { color: var(--fire); }

.filter-no-results {
  text-align: center;
  color: var(--ink-60);
  padding: var(--space-lg) 0;
  font-weight: 500;
}

.submit-nudge {
  text-align: center;
  padding: var(--space-lg) 28px;
  margin-top: var(--space-md);
  background: var(--scroll-deep);
  border: 2px solid var(--ink);
  border-radius: 12px;
  color: var(--ink-80);
}
.submit-nudge p { margin-bottom: var(--space-sm); font-weight: 700; color: var(--ink); }

/* 体験談一覧: モバイル調整 */
@media (max-width: 720px) {
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
  }
  .filter-toolbar .filter-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .filter-toolbar-right {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
  }
  .filter-btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
  .sort-select { padding: 0.45rem 0.75rem; font-size: 0.8rem; width: 100%; min-width: 0; }
  .btn-random { padding: 0.45rem 0.9rem; font-size: 0.8rem; white-space: nowrap; }
  .mp-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .chara-filter-chip { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
  .submit-nudge { padding: var(--space-md) 20px; margin-left: 4px; margin-right: 4px; }
}

/* さらに狭い画面: 並び替えとランダムボタンを縦積み */
@media (max-width: 420px) {
  .filter-toolbar-right {
    grid-template-columns: 1fr;
  }
  .btn-random { width: 100%; justify-content: center; }
}

/* ============ 推し一覧ページ ============ */
.chara-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: var(--space-md);
}
.chara-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 1.25rem 0.75rem;
  min-height: 90px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1), color 0.15s;
}
.chara-card:hover {
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--fire);
  color: var(--fire);
  text-decoration: none;
}
.chara-card-name {
  font-weight: 900;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.chara-card-count {
  font-size: 0.85rem;
  color: var(--fire);
  font-weight: 800;
}
.chara-note {
  color: var(--ink-60);
  font-size: 0.875rem;
  margin-top: var(--space-sm);
}
.chara-note a { margin-left: 0.5rem; }

/* ============ 関連体験談（詳細ページ） ============ */
.related-stories {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.related-stories-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-60);
  margin-bottom: 1.25rem;
}
.related-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ============ トースト通知 ============ */
.share-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.75rem);
  background: #333;
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  max-width: min(360px, 90vw);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.share-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ 投稿完了ページ ============ */
.thanks-box {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  max-width: 480px;
  margin: 0 auto;
}
.thanks-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--fire);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: 4px 4px 0 var(--ink);
}
.thanks-box h2 {
  font-weight: 900;
  color: var(--ink);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.005em;
}
.thanks-box p {
  color: var(--ink-80);
  line-height: var(--line-height);
  margin-bottom: 0.5rem;
}

/* ============ ガイドラインページ ============ */
.guidelines-article {
  padding: var(--space-lg) 0;
}

.guidelines-inner {
  /* 本文エリア幅をトップ基準 --max-width(1280) に統一＝ヒーロー/他ページと揃える
     （guidelines・about・privacy が共用・owner 2026-06-07）。旧 --max-width-text(720) は狭く見えた。 */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* セクション間の縦リズムを一定に統一（破線/padding-bottom を撤去し margin だけに・owner 2026-06-07）。
   見出し箱・カード・グレーバーが既に区切りになるため破線は不要。 */
/* 本文は guidelines-inner(1280・中央寄せ・左右対称) いっぱいに＝全ページと幅統一・右の空き解消（owner 2026-06-07）。 */
.gl-section {
  margin-bottom: var(--space-lg);
  color: var(--ink-80);
}

/* 本文セクション見出し＝黒抜きの長方形ボックス。BORUTO「話数を選ぶ」と同一スタイルに揃える
   ＝文字幅にフィット・左寄せ（min-width/中央寄せはやめる・owner 2026-06-08）。 */
.gl-section h2 {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  background: var(--ink);
  padding: 0.34rem 0.9rem;
  margin-bottom: var(--space-sm);
  display: inline-block;
  border-radius: 0;
  letter-spacing: -0.005em;
}

.gl-section p, .gl-section li {
  line-height: 1.9;
  margin-bottom: 0.5rem;
}

.gl-section ul, .gl-section ol {
  padding-inline-start: 1.5em;
}

/* .gl-section--warning / .gl-section--image は未使用のため削除（owner 2026-06-10 ガイドライン後片付け）。
   現用の派生は .gl-section--cta（about）のみ。 */

/* ============ About ページ ============ */
.about-quote {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.75;
  background: var(--scroll-deep);
  border-inline-start: 4px solid var(--fire);
  padding: 0.85rem 1rem;
  padding-inline-start: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

/* ── About: サイトの歩き方カードリスト（C-4・2026-06-13 site-audit）／会員ランク（C-5） ── */
.about-guide .guide-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.about-guide .guide-list li { margin: 0; }
.about-guide .guide-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.85rem 1rem;
  background: var(--scroll-deep);
  border: 2px solid var(--ink);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.about-guide .guide-list a:hover {
  box-shadow: 4px 4px 0 var(--fire);
  transform: translate(-1px, -1px);
}
.about-guide .guide-name { font-weight: 900; font-size: 1rem; color: var(--ink); }
.about-guide .guide-desc { font-size: 0.85rem; line-height: 1.6; color: var(--ink-80); }
.rank-list { padding-inline-start: 1.2em; }
.rank-list li { line-height: 1.85; margin-bottom: 0.3rem; }

.gl-section--cta {
  border-bottom: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-sm);
}

/* 操作・注意の留意点ノート＝二次情報ゆえ中立グレー（業務連絡色）＋長方形（暖色タン/角丸は浮くため・owner検証 2026-06-07） */
.gl-note {
  font-size: 0.875rem;
  color: var(--ink-80);
  background: var(--util-bg);
  border-inline-start: 3px solid var(--ink-60);
  padding: 0.75rem 1rem;
  border-radius: 0;
  margin-top: var(--space-sm);
}

.gl-cta {
  text-align: center;
  padding-top: var(--space-md);
}
.gl-cta p { margin-bottom: var(--space-sm); color: var(--ink-80); }

/* ── ガイドライン: OK/NG カード ＆ 折りたたみポリシー（2026-06-07 ノンバーバルUX #4） ── */
.gl-okng-section { border-bottom: none; }
.gl-okng {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.gl-card {
  background: #fff;
  border: 2px solid var(--ink-20);
  border-radius: 0;
  padding: var(--space-md);
  box-shadow: 4px 4px 0 var(--ink-20);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* OK は信号緑を使わずブランド主役の墨で（緑は他に無く非整合＋白文字AA不足のため・UI監修2026-06-07）。NG=朱赤。 */
/* OK/NG は地色tintを廃し白に統一＝色数削減・枠とバッジで区別（レビュー#2・2026-06-07） */
.gl-card--ok { border-color: var(--ink); background: #fff; }
.gl-card--ng { border-color: var(--accent); background: #fff; }
.gl-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.gl-card-head h2, .gl-card-head h3 {
  font-size: 1rem; font-weight: 900; color: var(--ink);
  margin: 0; padding: 0; border: none; background: none; display: inline; letter-spacing: -0.005em;
}
.gl-badge {
  flex: none; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.04em;
  color: #fff; padding: 2px 11px; border-radius: 999px; line-height: 1.5;
}
.gl-badge--ok { background: var(--ink); }
.gl-badge--ng { background: var(--accent); }
.gl-card ul { padding-inline-start: 1.3em; margin: 0; }
.gl-card li { line-height: 1.8; margin-bottom: 0.3rem; }

/* 折りたたみポリシー＝アコーディオン見出しバー（小見出し＋開閉できる行と一目で分かるように・owner 2026-06-07）。
   淡グレー地のバー＋左シェブロン(▸→▾)。全バー左端 x=0 で整列。中身は全保持。 */
.gl-policy { border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-sm); }
/* OK/NGカード直下の折りたたみ（画像の投稿手順）が詰まらないよう上に余白（owner 2026-06-07） */
.gl-okng + .gl-policy { margin-top: var(--space-md); }
.gl-policy > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.9rem; min-height: 44px;
  background: var(--util-bg);
  border: 1px solid var(--ink-20);
}
.gl-policy > summary::-webkit-details-marker { display: none; }
.gl-policy > summary::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg); transition: transform 0.2s;   /* 閉=▸ */
}
.gl-policy[open] > summary::before { transform: rotate(45deg); }   /* 開=▾ */
.gl-policy > summary:hover { background: #e9e8e3; }
.gl-policy > summary:hover::before { border-color: var(--fire); }
.gl-policy > summary h2, .gl-policy > summary h3, .gl-policy-title {
  font-size: 1.05rem; font-weight: 900; color: var(--ink);
  margin: 0; padding: 0; border: none; background: none;
  /* flex内で .gl-section h2 の min-width:13rem/text-align:center を拾わないよう明示的に打ち消す（左揃え・owner 2026-06-07） */
  display: inline; min-width: 0; text-align: left; letter-spacing: -0.005em;
}
.gl-policy-body { padding: 0.7rem 0.9rem 0.2rem; color: var(--ink-80); }
.gl-policy-body ul, .gl-policy-body ol { padding-inline-start: 1.5em; }

@media (max-width: 640px) {
  .gl-okng { grid-template-columns: 1fr; }
  /* カード内パディングを縮小（space-md=32px は小画面で本文を圧迫・モバイルレビュー2026-06-07） */
  .gl-card { padding: 1.1rem 1rem; }
}

/* ============ 投稿ページ ============ */
.submit-section {
  padding: var(--space-lg) 0;
}

.submit-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.pre-submit-check {
  background: #fff;
  border: 2px solid var(--ink);
  border-inline-start: 5px solid var(--fire);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: 4px 4px 0 var(--ink-20);
}

.pre-submit-check h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.6;
}

.check-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.form-embed-wrapper {
  margin-bottom: var(--space-md);
}

/* Googleフォームのiframe高さ。フォームの設問を大幅に変更した場合はここを更新してください */
.form-embed-wrapper iframe {
  display: block;
  width: 100%;
  height: 3200px;
  border: none;
}

/* フォームURL未設定時のプレースホルダー */
.form-placeholder {
  background: #fff;
  border: 2px dashed var(--ink-40);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.form-placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
}

.form-placeholder h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.form-placeholder ol {
  text-align: start;
  display: inline-block;
  padding-inline-start: 1.5em;
  margin: var(--space-sm) 0;
}
.form-placeholder li { margin-bottom: 0.5rem; line-height: 1.7; }

.form-placeholder code {
  background: var(--scroll-deep);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
  color: var(--ink);
}

.placeholder-note {
  font-size: 0.85rem;
  color: var(--ink-60);
  margin-top: var(--space-sm) !important;
}

.submit-guideline-link {
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-60);
  margin-top: var(--space-md);
}

/* 旧 Footer (.site-footer, .footer-inner, .footer-logo, .logo-mark-small,
   .footer-nav, .footer-note) は v3 Footer (.foot) に置換済みのため撤去。*/

/* ============ レスポンシブ ============ */
@media (max-width: 640px) {
  .section-inner, .page-header-inner,
  .story-detail-inner, .guidelines-inner, .submit-inner { padding: 0 var(--space-sm); }

  .mp-list { grid-template-columns: 1fr; }

  .story-share { flex-direction: column; align-items: flex-start; }
  .btn-x-share, .btn-ig-share { width: 100%; justify-content: center; }

  .story-nav { flex-direction: column; }
  .story-nav .btn { width: 100%; text-align: center; }

  .section-header { flex-direction: column; gap: 0.5rem; }
}

/* ============ 言語切り替え ============ */
.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--ink-20);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--ink-80);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.22s, color 0.22s;
}
.lang-switcher-btn:hover { border-color: var(--ink); color: var(--fire); }

/* 開閉のしるし。閉じているとき ▾ / 開いているとき ▴ で状態も伝える。 */
.lang-caret {
  flex-shrink: 0;
  transition: transform 0.22s;
}
.lang-switcher-btn[aria-expanded='true'] .lang-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .lang-caret { transition: none; }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--ink-20);
  min-width: 140px;
  z-index: 200;
  list-style: none;
  padding: 0.4rem 0;
}
.lang-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.lang-menu li a:hover { background: var(--scroll); color: var(--fire); }
.lang-menu li[aria-selected="true"] a {
  color: var(--fire);
  font-weight: 800;
}

/* ============ 翻訳ノーティス ============ */
.translation-notice {
  font-size: 0.8rem;
  color: var(--ink-60);
  margin-top: 0.5rem;
  font-style: italic;
}
.translation-notice--translated { color: var(--fire); }

/* ============ 投稿フォームの言語ノート ============ */
.submit-lang-note {
  background: var(--fire-soft);
  border-inline-start: 3px solid var(--fire);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ============ RTL (Arabic) ============ */
[dir="rtl"] .site-nav { margin-left: 0; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .breadcrumb { direction: rtl; }
[dir="rtl"] .story-nav { flex-direction: row-reverse; }
[dir="rtl"] .filter-toolbar { flex-direction: row-reverse; }
[dir="rtl"] .filter-toolbar-right { flex-direction: row-reverse; }
[dir="rtl"] .footer-nav { text-align: right; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
@media (max-width: 640px) {
  [dir="rtl"] .hero-actions { flex-direction: column; }
  [dir="rtl"] .story-nav { flex-direction: column; }
}

/* ============ v3 RTL — box-shadow X 反転 + SVG 反転 ============ */
/* 物理 box-shadow にしか宿らない X 軸方向のオフセットを RTL で反転する。
   論理プロパティが存在しないため override で対応。 */

/* Buttons — 共通 */
[dir="rtl"] .btn-primary { box-shadow: -5px 5px 0 var(--fire); }
[dir="rtl"] .btn-primary:hover { box-shadow: -7px 7px 0 var(--fire); }
[dir="rtl"] .btn-outline { box-shadow: -4px 4px 0 var(--fire); }
[dir="rtl"] .btn-outline:hover { box-shadow: -6px 6px 0 var(--fire); }
[dir="rtl"] .sort-select:hover { box-shadow: -3px 3px 0 var(--ink); }
[dir="rtl"] .sort-select:focus { box-shadow: -3px 3px 0 var(--fire); }
[dir="rtl"] .btn-random { box-shadow: -4px 4px 0 var(--fire); }
[dir="rtl"] .btn-random:hover { box-shadow: -3px 3px 0 var(--fire); }
[dir="rtl"] .filter-btn.active { box-shadow: -3px 3px 0 var(--ink); }

/* カード／パネル類 */
[dir="rtl"] .pre-submit-check,
[dir="rtl"] .calendar-month,
[dir="rtl"] .image-hint,
[dir="rtl"] .lang-menu,
[dir="rtl"] .wish-card { box-shadow: -4px 4px 0 var(--ink-20); }
[dir="rtl"] .wish-card:hover { box-shadow: -5px 5px 0 var(--fire); }
[dir="rtl"] .thanks-box { box-shadow: -4px 4px 0 var(--ink); }
[dir="rtl"] .chara-card,
[dir="rtl"] .fav-item { box-shadow: -3px 3px 0 var(--ink); }
[dir="rtl"] .chara-card:hover,
[dir="rtl"] .fav-item:hover { box-shadow: -5px 5px 0 var(--fire); }

/* p100 */
[dir="rtl"] .p100-bar-track { box-shadow: -3px 3px 0 var(--ink-20); }
[dir="rtl"] .p100-why-card { box-shadow: -5px 5px 0 var(--ink); }
[dir="rtl"] .p100-why-card:hover { box-shadow: -8px 8px 0 var(--fire); }
[dir="rtl"] .p100-why-card--highlight { box-shadow: -5px 5px 0 var(--ink); }
[dir="rtl"] .p100-why-card--highlight:hover { box-shadow: -8px 8px 0 var(--ink); }
[dir="rtl"] .p100-participant-link:hover .p100-participant-avatar { box-shadow: -3px 3px 0 var(--fire); }

/* p100 / homepage 共通 CTA ボタン */
[dir="rtl"] .cta-fire .btn,
[dir="rtl"] .cta-fire .btn-primary,
[dir="rtl"] .cta-fire .btn-primary.btn-large,
[dir="rtl"] .cta-cta { box-shadow: -7px 7px 0 rgba(26,26,26,0.4); }
[dir="rtl"] .cta-fire .btn-primary:hover,
[dir="rtl"] .cta-fire .btn-primary.btn-large:hover,
[dir="rtl"] .cta-cta:hover { box-shadow: -11px 11px 0 rgba(26,26,26,0.4); }

/* Hero / Mission / Header */
[dir="rtl"] .brand-mark { box-shadow: -3px 3px 0 var(--ink); }
[dir="rtl"] .header-cta:hover { box-shadow: -3px 3px 0 var(--ink); }
[dir="rtl"] .hero-eyebrow { box-shadow: -3px 3px 0 var(--fire); }
[dir="rtl"] .hero-sub .q { box-shadow: -2px 2px 0 rgba(26,26,26,0.18); }
[dir="rtl"] .type-caret { box-shadow: -2px 2px 0 var(--ink); }
[dir="rtl"] .panel { box-shadow: -6px 6px 0 var(--ink); }
[dir="rtl"] .panel:hover { box-shadow: -10px 10px 0 var(--ink); }
[dir="rtl"] .rank-frame { box-shadow: -6px 6px 0 var(--ink); }
[dir="rtl"] .here-flag,
[dir="rtl"] .mission-goal-mark { box-shadow: -2px 2px 0 var(--fire-dark, #b24610); }

/* mp（VoiceCard / StoryCard） */
[dir="rtl"] .mp { box-shadow: -6px 6px 0 var(--ink); }
[dir="rtl"] .mp:hover { box-shadow: -10px 12px 0 var(--ink); }
/* 🔴 【WO-026【5】・H04・2026-08-16】.mp-thumb は VoiceCard.astro が今も使っている（この行の見出しの
   とおり mp は2部品の共有語彙）＝StoryCard.astro だけを直す今回は消さない。
   ⚠️ **一度削除して VoiceCard の絵を壊しかけた**（同じクラス名を StoryCard 専用だと思い込んだ）。
   ⭐ StoryCard 側の新デザインは別名 .mp-photo を名乗って共存させた（下）。 */
[dir="rtl"] .mp-thumb { box-shadow: -3px 3px 0 var(--ink); }

/* All-link（一覧 / 関連 stories） */
[dir="rtl"] .all-link { box-shadow: -5px 5px 0 var(--fire); }
[dir="rtl"] .all-link:hover { box-shadow: -8px 8px 0 var(--fire); }

/* homepage btn-primary (mobile breakpoint) */
[dir="rtl"] .btn-primary { box-shadow: -5px 5px 0 var(--fire); }
[dir="rtl"] .btn-primary:hover { box-shadow: -8px 8px 0 var(--fire); }
[dir="rtl"] .btn-primary:active { box-shadow: -1px 1px 0 var(--fire); }

/* story-detail */
[dir="rtl"] .story-detail .story-detail-inner,
[dir="rtl"] .story-detail .story-image img { box-shadow: -6px 6px 0 var(--ink); }
[dir="rtl"] .story-detail .action-btn { box-shadow: -4px 4px 0 var(--fire); }
[dir="rtl"] .story-detail .action-btn:hover { box-shadow: -6px 6px 0 var(--fire); }
[dir="rtl"] .story-detail .action-btn.favorited { box-shadow: -4px 4px 0 var(--ink); }
[dir="rtl"] .story-detail .action-btn.favorited:hover { box-shadow: -6px 6px 0 var(--ink); }
[dir="rtl"] .story-detail .like-cta { box-shadow: -6px 6px 0 var(--fire); }
[dir="rtl"] .story-detail .like-cta-link:hover { box-shadow: -3px 3px 0 var(--ink); }
[dir="rtl"] .story-detail .affiliate-link:hover { box-shadow: -4px 4px 0 var(--fire); }
[dir="rtl"] .story-detail .story-prev-next .prev-next-link:hover { box-shadow: -3px 3px 0 var(--fire); }
[dir="rtl"] .story-detail .story-cta .btn.btn-primary.btn-large { box-shadow: -7px 7px 0 var(--fire); }
[dir="rtl"] .story-detail .story-cta .btn.btn-primary.btn-large:hover { box-shadow: -9px 9px 0 var(--fire); }
[dir="rtl"] .story-detail .story-nav-actions .btn.btn-outline:hover { box-shadow: -3px 3px 0 var(--fire); }
[dir="rtl"] .story-detail .story-nav-actions .btn.btn-primary { box-shadow: -4px 4px 0 var(--fire); }
[dir="rtl"] .story-detail .story-nav-actions .btn.btn-primary:hover { box-shadow: -6px 6px 0 var(--fire); }

/* SVG: チャクラ線の流れを反転（flowing アニメーションも自動反転） */
[dir="rtl"] .chakra-lines { transform: scaleX(-1); }

/* mobile breakpoint 内の v3 影 */
@media (max-width: 720px) {
  [dir="rtl"] .brand-mark { box-shadow: -2px 2px 0 var(--ink); }
  [dir="rtl"] .hero-actions .btn { box-shadow: -3px 3px 0 var(--ink); }
  [dir="rtl"] .hero-actions .btn-outline { box-shadow: -3px 3px 0 var(--fire); }
  [dir="rtl"] .mp { box-shadow: -5px 5px 0 var(--ink); }
  [dir="rtl"] .cta-fire .btn-primary,
  [dir="rtl"] .cta-fire .btn-primary.btn-large { box-shadow: -5px 5px 0 rgba(26,26,26,0.4); }
  [dir="rtl"] .story-detail .story-detail-inner { box-shadow: -4px 4px 0 var(--ink); }
}

/* ── 回遊性機能 ── */

/* わかる！& お気に入りボタン */
/* .story-engagement / .btn-like / .btn-favorite は .story-actions / .action-btn に統合済み */

/* 前後ナビ */
.story-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.prev-next-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fire);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 45%;
  overflow: hidden;
}
.prev-next-link:hover {
  text-decoration: none;
}
.prev-next-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prev-next-arrow {
  flex-shrink: 0;
}
.story-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* カードの既読バッジ & お気に入りボタン */
.badge-read {
  display: inline-block;
  background: #aaa;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
/* お気に入りページ */
.favorites-section { padding: 3rem 0 5rem; min-height: 50vh; }
.favorites-inner { max-width: 720px; margin: 0 auto; padding: 0 var(--space-md); }
.favorites-empty { text-align: center; color: var(--ink-60); padding: 3rem 0; }
.fav-item {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1);
}
.fav-item:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--fire);
  text-decoration: none;
  color: var(--ink);
}
.fav-item-meta { margin-bottom: 0.5rem; }
.fav-item-catchphrase {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 0.5rem;
  quotes: none;
  letter-spacing: -0.005em;
}
.fav-item-name { font-size: 0.85rem; color: var(--ink-60); margin: 0; }

/* ========== Calendar Page ========== */
.calendar-today-section {
  background: var(--ink);
  padding: 2rem 0;
  margin-bottom: 2rem;
  color: #fff;
  border-bottom: 4px solid var(--fire);
}
.today-heading {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 1rem;
  color: #fff;
  letter-spacing: -0.005em;
}
.today-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.today-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.today-event-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.today-event-year {
  font-size: 0.8rem;
  opacity: 0.75;
}

.calendar-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--scroll-deep);
  border: 1.5px solid var(--ink-20);
  border-radius: var(--radius);
}
.legend-item {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
}
.legend-real { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.legend-event { background: #f3e5f5; color: #7b1fa2; border: 1px solid #ce93d8; }
.legend-inuniverse { background: #e8eaf6; color: #283593; border: 1px solid #9fa8da; }
.legend-birthday-char { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.legend-birthday-va { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }

.calendar-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}
.calendar-month {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink-20);
}
.calendar-month-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  border-bottom: 3px solid var(--fire);
  letter-spacing: -0.005em;
}
.month-number {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--fire);
  letter-spacing: -0.02em;
}
.month-label {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}
.month-count {
  margin-left: auto;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.2);
  padding: 0.1rem 0.5rem;
  border-radius: 100px;
}
.calendar-empty {
  padding: 1rem 1.25rem;
  color: var(--ink-60);
  font-size: 0.875rem;
  margin: 0;
}
.calendar-events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calendar-event {
  display: flex;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px dashed var(--ink-20);
  align-items: flex-start;
}
.calendar-event:last-child { border-bottom: none; }
.calendar-event--real { border-left: 3px solid #e65100; }
.calendar-event--event { border-left: 3px solid #7b1fa2; }
.calendar-event--inuniverse { border-left: 3px solid #3949ab; }
.calendar-event--birthday_char { border-left: 3px solid #c2185b; }
.calendar-event--birthday_va { border-left: 3px solid #388e3c; }

.event-date {
  min-width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.event-day {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.event-day-label {
  font-size: 0.7rem;
  color: var(--ink-60);
  font-weight: 700;
}
.event-body {
  flex: 1;
  /* 🔴 これが無いとスマホでイベント名が右端で切れる（実測 21 か所・最大 524px）。
     理由は 404 ページと同じ＝和文が改行できず最小幅が膨らみ、Flex の子は既定で縮まないため。
     0 にすると中身が折り返せるようになり、badge / title / desc が素直に段落ちする。 */
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.event-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  flex-shrink: 0;
}
.event-badge--real { background: #fff3e0; color: #e65100; }
.event-badge--event { background: #f3e5f5; color: #7b1fa2; }
.event-badge--inuniverse { background: #e8eaf6; color: #283593; }
.event-badge--birthday_char { background: #fce4ec; color: #880e4f; }
.event-badge--birthday_va { background: #e8f5e9; color: #1b5e20; }

.event-series {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  flex-shrink: 0;
}
.event-series--naruto { background: #fff8e1; color: #f57f17; }
.event-series--boruto { background: #e3f2fd; color: #0d47a1; }
.event-series--both { background: #f3e5f5; color: #4a148c; }

.event-title {
  width: 100%;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.event-year {
  width: 100%;
  font-size: 0.775rem;
  color: var(--ink-60);
  margin: 0;
  font-weight: 600;
}
.event-desc {
  width: 100%;
  font-size: 0.8rem;
  color: var(--ink-60);
  margin: 0.25rem 0 0;
  line-height: 1.6;
}
.calendar-note {
  font-size: 0.8rem;
  color: var(--ink-60);
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* ========== Image hint (submit page) ========== */
.image-hint {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--scroll-deep);
  margin-bottom: 1.5rem;
  box-shadow: 4px 4px 0 var(--ink-20);
}
.image-hint summary {
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.image-hint summary::-webkit-details-marker { display: none; }
.image-hint[open] summary { border-bottom: 1.5px solid var(--ink-40); }
.image-hint-body {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.8;
}
.image-hint-body ol {
  margin: 0.5rem 0 1rem 1.25rem;
}
.image-hint-note {
  font-size: 0.8rem;
  color: var(--ink-60);
  margin-top: 0.5rem;
}

/* ========== Guidelines steps ========== */
.gl-steps {
  margin: 0.75rem 0 1rem;
  padding-inline-start: 1.25rem;
  line-height: 1.9;
}
.gl-steps li {
  margin-bottom: 0.5rem;
}

/* ========== Guidelines positive note ========== */
/* 💛 友好的な一言＝暖色は意図的に維持・長方形のみ適用（owner検証 2026-06-07） */
.gl-positive-note {
  background: var(--scroll-deep);
  border-inline-start: 4px solid var(--fire);
  border-radius: 0;
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 var(--space-sm);
  color: var(--ink-80);
}

/* ========== Image hint URL example ========== */
.image-hint-url-example {
  background: #fff;
  border: 1.5px solid var(--ink-20);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin: 0.75rem 0;
  font-size: 0.825rem;
  line-height: 1.8;
}
.image-hint-url-example code {
  background: var(--scroll-deep);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.image-hint-url-ok { color: #2e7d32; }
.image-hint-url-ng { color: #c62828; }
.image-hint-url-tip { color: var(--fire); margin-top: 0.5rem; }

/* ============ データページ ============ */
.data-page .page-subtitle {
  color: var(--ink-60);
  font-size: 1rem;
  margin-top: 0.5rem;
}

.data-section h2::after { content: none; }

.data-note {
  font-size: 0.875rem;
  color: var(--ink-60);
  margin-bottom: 1.25rem;
}

/* ドーナツグラフ */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.donut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.donut-hole {
  position: absolute;
  inset: 30px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink-20);
}

.donut-total {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.donut-label-sm {
  font-size: 0.75rem;
  color: var(--ink-60);
}

.donut-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-name {
  flex: 1;
  font-weight: 700;
  color: var(--ink-80);
}

.legend-count {
  color: var(--ink-60);
  font-size: 0.85rem;
  font-weight: 700;
}

/* 棒グラフ */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 10rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 700;
}

.bar-track {
  background: var(--scroll-deep);
  border: 1.5px solid var(--ink-20);
  border-radius: 100px;
  height: 18px;
  overflow: hidden;
}

.bar-track--sm {
  height: 12px;
  flex: 1;
}

.bar-fill {
  height: 100%;
  background: var(--fire);
  border-radius: 100px;
  transition: width 0.4s ease;
}

.bar-count {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink);
  text-align: end;
}

/* キャラランキング */
.chara-ranking {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chara-row {
  display: grid;
  grid-template-columns: 1.8rem 8rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.chara-rank {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chara-rank--top {
  background: var(--fire);
  color: #fff;
}

.chara-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

/* 国リスト */
.country-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.country-row {
  display: grid;
  grid-template-columns: 7rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.country-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

/* Wish カード */
.wish-grid {
  display: grid;
  /* 🔴 `1fr` ではなく `minmax(0,1fr)`。1fr のままだと列が中身の最小幅まで広がってしまい、
     和文が改行できないぶんカードが画面からはみ出す（実測 456px / 画面 390px）。
     ⚠️ Grid も Flex と同じで、子は既定で縮まない。列に 0 を許すのがこの形の定石。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.wish-card {
  display: block;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink-20);
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1);
}

.wish-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--fire);
  text-decoration: none;
}

.wish-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.wish-name {
  font-size: 0.8rem;
  color: var(--ink-60);
}

.data-cta {
  text-align: center;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .donut-wrap { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .bar-row { grid-template-columns: 7rem 1fr 2rem; }
  .chara-row { grid-template-columns: 1.8rem 6rem 1fr 2rem; }
  .country-row { grid-template-columns: 5.5rem 1fr 2rem; }
  .wish-grid { grid-template-columns: 1fr; }
}

/* ============ アフィリエイトセクション ============ */
.affiliate-section {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px;
}

.affiliate-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.affiliate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.affiliate-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  transition: border-color 0.15s, background 0.15s;
}

.affiliate-link:hover {
  border-color: var(--fire);
  background: var(--scroll);
}

.affiliate-shop {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.affiliate-link.affiliate-bandai .affiliate-shop    { background: #0033a0; }
.affiliate-link.affiliate-animate .affiliate-shop   { background: #e60026; }
.affiliate-link.affiliate-jump-store .affiliate-shop { background: #e8621a; }
.affiliate-link.affiliate-mercari .affiliate-shop   { background: #ff0211; }
.affiliate-link.affiliate-amazon .affiliate-shop    { background: #f90; color: #111; }

.affiliate-title {
  flex: 1;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-arrow {
  color: var(--ink-60);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ============ アクセシビリティ: アニメーション軽減設定 ============ */
/* 旧 Hero 固有の reduced-motion ルールは v3 Hero では不要のため撤去。
   v3 CSS 末尾の @media (prefers-reduced-motion: reduce) が全体を制御。*/

/* ============================================================
   PROJECT 100 — トップページバナー
   ============================================================ */
.p100-banner {
  background: var(--ink);
  color: #fff;
  padding: 2.5rem 0;
  border-top: none;
  border-bottom: 4px solid var(--fire);
}
.p100-banner-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.p100-banner-left {
  flex-shrink: 0;
}
.p100-banner-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fire);
  margin: 0 0 0.25rem;
}
.p100-banner-nums {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  line-height: 1;
}
.p100-banner-current {
  font-size: 2.9rem;
  font-weight: 900;
  color: var(--fire);
  letter-spacing: -0.03em;
}
.p100-banner-sep {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.4);
}
.p100-banner-total {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.6);
}
.p100-banner-unit {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-inline-start: 0.1em;
}
.p100-banner-next {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}
.p100-banner-next strong {
  color: var(--fire);
  font-weight: 800;
}
.p100-banner-right {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.p100-banner-bar-wrap {
  width: 100%;
}
.p100-banner-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: visible;
}
.p100-banner-fill {
  height: 100%;
  background: var(--fire);
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.p100-banner-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.3);
  transform: translateX(-50%);
}
.p100-banner-link {
  align-self: flex-end;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.p100-banner-link:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .p100-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .p100-banner-right {
    width: 100%;
  }
  .p100-banner-current { font-size: 2.2rem; }
}

/* ============================================================
   PROJECT 100 — 専用LPページ (/project100)
   ============================================================ */

/* p100 ヒーロー — homepage `.cta` と同じ視覚言語（放射線 + 巨大文字 + ink stamp pill） */
.p100-hero {
  position: relative; overflow: hidden;
  padding: 120px 32px 132px;
  background: var(--fire);
  color: #fff;
  text-align: center;
}
.p100-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 180deg at 50% 50%,
      transparent 0deg, transparent 2deg,
      rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
}
.p100-hero::after {
  content: '100';
  position: absolute; right: -80px; bottom: -140px;
  font-weight: 900; font-size: 560px;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.08;
  letter-spacing: -0.04em;
  pointer-events: none;
  font-family: var(--font-body);
}
.p100-hero-inner {
  max-width: var(--max-width); margin: 0 auto;   /* 全ページ基準幅(1280)に連動（owner 2026-06-04・旧 900px） */
  position: relative; z-index: 2;
}
.p100-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: var(--ink); color: var(--fire);
  font-weight: 900; font-size: 12px; letter-spacing: 0.24em;
  border-radius: 999px; margin-bottom: 28px;
  transform: rotate(-2deg);
}
.p100-title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: #fff;
  word-break: keep-all; overflow-wrap: break-word;
}
.p100-title .box {
  display: inline-block; background: var(--ink); color: var(--fire);
  padding: 0 14px; margin: 0 2px;
  transform: rotate(-1deg);
}
.p100-desc {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.9; font-weight: 500;
  max-width: 640px; margin: 0 auto;
  color: rgba(255,255,255,0.95);
}
.p100-desc .nb {
  display: inline-block; font-weight: 900; color: #fff;
  background: rgba(26,26,26,0.25); padding: 2px 10px; border-radius: 6px;
  margin: 2px 4px;
}
@media (max-width: 720px) {
  .p100-hero { padding: 56px 20px 64px; }
  .p100-hero::before { mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); }
  .p100-hero::after { font-size: 320px; right: -80px; bottom: -120px; }
  .p100-eyebrow { margin-bottom: 18px; padding: 6px 14px; font-size: 11px; }
  .p100-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
  .p100-desc { font-size: 0.95rem; line-height: 1.85; }
}

.p100-counter-section {
  padding: 4rem 0 3rem;
  background: var(--scroll);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.p100-counter {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.p100-numbers-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
  margin-bottom: 1.75rem;
  animation: p100-pop-in 0.85s cubic-bezier(.5,1.6,.4,1) both;
}
@keyframes p100-pop-in {
  0% { opacity: 0; transform: scale(0.78); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .p100-numbers-row { animation: none; }
}
.p100-big-num {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  color: var(--fire);
  line-height: 1;
  letter-spacing: -0.04em;
}
.p100-slash {
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--ink-40);
  font-weight: 700;
}
.p100-goal-num {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.p100-unit {
  font-size: 1.5rem;
  color: var(--ink-60);
  margin-inline-start: 0.1em;
}
.p100-bar-wrap {
  margin-bottom: 1rem;
}
.p100-bar-track {
  position: relative;
  height: 14px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink-20);
}
.p100-bar-fill {
  position: relative;
  height: 100%;
  background: var(--fire);
  border-radius: 999px 0 0 999px;
  width: var(--p100-pct, 0%);
  min-width: 6px;
  animation: p100-bar-grow 1.5s 0.35s cubic-bezier(.5,1.4,.4,1) both;
  overflow: hidden;
}
@keyframes p100-bar-grow {
  0% { width: 0; }
  100% { width: var(--p100-pct, 0%); }
}
/* バー上を流れる光（チャクラ） */
.p100-bar-fill::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: p100-bar-shine 2.6s 1.9s cubic-bezier(.4,0,.2,1) infinite;
  transform: translateX(-100%);
}
@keyframes p100-bar-shine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(380%); }
}
@media (prefers-reduced-motion: reduce) {
  .p100-bar-fill { animation: none; width: var(--p100-pct, 0%); }
  .p100-bar-fill::after { animation: none; opacity: 0; }
}
.p100-bar-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--vermilion);
  transform: translateX(-50%);
}
.p100-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--ink-60);
  font-weight: 700;
}
.p100-next-label {
  font-size: 0.9rem;
  color: var(--ink-80);
  margin-top: 0.25rem;
}
.p100-next-label strong {
  color: var(--fire);
  font-weight: 800;
}

.p100-why-section {
  padding: 4.5rem 0;
  background: var(--scroll);
}
.p100-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.p100-why-card {
  position: relative;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 5px 5px 0 var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(.5,1.4,.4,1), box-shadow 0.28s cubic-bezier(.5,1.4,.4,1);
}
.p100-why-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--fire);
}
.p100-why-num {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--fire-soft);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.p100-why-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  color: var(--fire);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p100-why-icon svg {
  width: 100%;
  height: 100%;
}
.p100-why-card h3 {
  font-size: 1.1rem;
  font-weight: 900;
  margin: 0 0 0.5rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.p100-why-card h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--fire);
  margin-top: 0.7rem;
  border-radius: 1px;
}
.p100-why-card p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ink-80);
  margin: 0;
}
.p100-why-fact {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  letter-spacing: 0.02em;
}
.p100-why-fact-dot {
  color: var(--fire);
  font-size: 0.5rem;
}
.p100-why-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.flag-svg {
  /* flag-icons の SVG は 4:3（2026-07-17・旧手描きSVGの3:2から移行）。高さは据え置き、
     幅だけ 18px→16px にして歪み（伸び縮み）が出ないようにする。 */
  width: 16px;
  height: 12px;
  border-radius: 1.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  display: block;
  flex-shrink: 0;
}

/* 3枚目のハイライト（オレンジ反転） */
.p100-why-card--highlight {
  background: var(--fire);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}
.p100-why-card--highlight:hover {
  box-shadow: 8px 8px 0 var(--ink);
}
.p100-why-card--highlight .p100-why-num {
  color: rgba(255, 255, 255, 0.22);
}
.p100-why-card--highlight .p100-why-icon {
  color: #fff;
}
.p100-why-card--highlight h3 {
  color: #fff;
}
.p100-why-card--highlight h3::after {
  background: rgba(255, 255, 255, 0.7);
}
.p100-why-card--highlight p {
  color: rgba(255, 255, 255, 0.94);
}
.p100-why-card--highlight .p100-why-fact {
  color: rgba(255, 255, 255, 0.88);
}
.p100-why-card--highlight .p100-why-fact strong {
  color: #fff;
  font-weight: 700;
}

/* 20×5 ドットグリッド（幅いっぱいに展開） */
.p100-dot-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
  margin: 1rem 0 0.4rem;
  width: 100%;
}
.p100-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.p100-dot--filled {
  background: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
}

/* Fade-up アニメ */
@media (prefers-reduced-motion: no-preference) {
  .p100-why-card {
    opacity: 0;
    transform: translateY(16px);
    animation: p100-fade-up 0.6s ease forwards;
  }
  .p100-why-card:nth-child(1) { animation-delay: 0.00s; }
  .p100-why-card:nth-child(2) { animation-delay: 0.12s; }
  .p100-why-card:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes p100-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

.p100-milestones-section {
  padding: 3.5rem 0;
}
.p100-section-heading {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 2rem;
  text-align: center;
  letter-spacing: -0.005em;
}
.p100-milestones {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
}
.p100-milestone {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px dashed var(--ink-20);
}
.p100-milestone:last-child { border-bottom: none; }
.p100-milestone-indicator {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  border: 2px solid var(--ink);
}
.p100-milestone--done .p100-milestone-indicator {
  background: var(--ink);
  color: #fff;
}
.p100-milestone--next .p100-milestone-indicator {
  background: var(--fire);
  color: #fff;
  box-shadow: 0 0 0 3px var(--fire-soft);
}
.p100-milestone--upcoming .p100-milestone-indicator {
  background: #fff;
  color: var(--ink-40);
  border-color: var(--ink-40);
  border-style: dashed;
}
.p100-milestone-body { flex: 1; }
.p100-milestone-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.p100-milestone-count {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--fire);
  letter-spacing: -0.01em;
}
.p100-milestone--upcoming .p100-milestone-count { color: var(--ink-60); }
.p100-milestone-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}
.p100-milestone--upcoming .p100-milestone-label { color: var(--ink-60); }
.p100-milestone-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
}
.p100-milestone-badge--done {
  background: var(--fire-soft);
  color: var(--ink);
  border-color: var(--fire);
}
.p100-milestone-badge--next {
  background: var(--fire);
  color: #fff;
  border-color: var(--ink);
}
.p100-milestone-reward {
  font-size: 0.82rem;
  color: var(--ink-60);
  margin: 0;
}
.p100-milestone--upcoming .p100-milestone-reward { color: var(--ink-60); }

.p100-participants-section {
  padding: 3.5rem 0;
}
.p100-participants-count {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fire);
  margin-inline-start: 0.4em;
}
.p100-participants-note {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-60);
  margin: -1.2rem 0 1.75rem;
}
.p100-participants-wall {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.p100-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 4.5rem;
}
.p100-participant-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}
.p100-participant-link:hover .p100-participant-avatar {
  background: var(--ink);
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 var(--fire);
}
.p100-participant-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--fire);
  color: #fff;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.p100-participant-avatar--empty {
  background: #fff;
  color: var(--ink-40);
  border: 2px dashed var(--ink-40);
}
.p100-participant-name {
  font-size: 0.7rem;
  color: var(--ink-80);
  text-align: center;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.p100-participant-name--empty { color: var(--ink-40); }

/* ================================================================
   V3 DESIGN SYSTEM (naruboru v3 — 2026-04-24 UI/UX リデザイン)
   正典: public/_preview/ninja-gathering.v3-final.html
   参照: public/_preview/_v3-refs/*.css（機能別に分割抽出済み）
   ================================================================ */
  /* ========== HEADER ========== */
  .header {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(14px);
    background: rgba(255, 243, 236, 0.88);
    border-bottom: 2px solid var(--ink);
  }
  .header-inner {
    max-width: 1280px; margin: 0 auto; padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .brand { display: flex; align-items: center; gap: 12px; font-weight: 900; text-decoration: none; }
  .brand-mark {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--fire); color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-serif); font-size: 22px; font-weight: 700;
    border: 2.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-6deg);
    transition: transform 0.3s cubic-bezier(.5,1.6,.4,1);
    flex-shrink: 0;
  }
  .brand:hover .brand-mark { transform: rotate(6deg) scale(1.08); }
  .brand-text .jp { font-size: 17px; letter-spacing: 0.04em; }
  .brand-text .sub { font-size: 10px; letter-spacing: 0.14em; color: var(--fire-dark); font-weight: 700; margin-top: 2px; }

  .nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 700; }
  .nav a { text-decoration: none; position: relative; padding: 4px 0; }
  .nav a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0;
    background: var(--fire); transition: width 0.3s ease;
  }
  .nav a:hover::after { width: 100%; }

  .header-cta {
    background: var(--ink); color: #fff;
    padding: 9px 20px; border-radius: 999px; font-weight: 900;
    text-decoration: none; font-size: 12.5px; letter-spacing: 0.06em;
    line-height: 1.3;
    border: 2px solid var(--ink); transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .header-cta:hover { background: var(--fire); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
  .header-cta::after { display: none; }  /* nav 内に入れたため、nav リンクの下線擬似要素を抑止 */
  /* 体験談は一人一つ——紐付け済み会員には投稿CTAを出さない（owner 2026-07-17）。 */
  body[data-has-story="1"] .header-cta { display: none; }
  .menu-btn { display: none; background: transparent; border: 2px solid var(--ink); border-radius: 8px; width: 40px; height: 40px; padding: 0; cursor: pointer; }
  .menu-btn span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; }

  /* v3 リンク色の上書き（グローバル `a { color: var(--fire) }` が干渉するため明示的に反転）*/
  .header a:not(.header-cta),
  .header .brand,
  .header .nav a,
  .brand-text .jp { color: var(--ink); }
  .brand-text .jp { font-weight: 900; }
  .header .nav a:hover { color: var(--fire); text-decoration: none; }
  .header a:hover { text-decoration: none; }
  /* CTA ボタンは常に白文字（通常・hover 共通）*/
  .header .header-cta,
  .header .header-cta:hover,
  .header .header-cta:focus,
  .header .header-cta:visited { color: #fff; }

  /* ========== HERO ========== */
  .hero {
    position: relative; overflow: hidden;
    padding: 96px 32px 120px;
    background: var(--scroll);
  }
  .speed-lines {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      repeating-conic-gradient(from 0deg at 70% 40%,
        transparent 0deg, transparent 1.2deg,
        rgba(26,26,26,0.07) 1.2deg, rgba(26,26,26,0.07) 1.6deg);
    mask-image: radial-gradient(circle at 70% 40%, transparent 220px, #000 600px);
    -webkit-mask-image: radial-gradient(circle at 70% 40%, transparent 220px, #000 600px);
  }
  .hero-kanji {
    position: absolute; right: -40px; top: 40px; z-index: 0;
    font-family: var(--font-serif); font-weight: 700;
    font-size: 42vw; line-height: 0.8; color: var(--fire);
    opacity: 0.06; pointer-events: none;
    animation: float 12s ease-in-out infinite;
  }
  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

  /* 背景装飾なし（grain/紙テクスチャは全廃・2026-06-07） */

  .hero-inner {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.18em;
    color: var(--ink); background: #fff;
    padding: 8px 16px; border-radius: 999px;
    border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--fire);
    margin-bottom: 28px;
    transform: rotate(-2deg);
  }
  .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fire); animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }

  .hero-title {
    font-size: clamp(2.1rem, 4.4vw, 4rem);
    line-height: 1.18; letter-spacing: -0.01em;
    font-weight: 900; margin-bottom: 28px;
    position: relative;
    word-break: keep-all; overflow-wrap: break-word;
    max-width: 100%;
  }
  .hero-title .line-1,
  .hero-title .line-2 {
    display: block;
    text-align: start;
    /* 各行は意味のまとまりで折り返さず1行を基本とするが、収まらない時は折り返しを許可 */
    white-space: normal;
  }
  .hero-title .line-2 { margin-top: 0.06em; }
  .hero-title .hl {
    position: relative; display: inline-block; color: var(--fire);
  }
  .hero-title .hl::after {
    content: ''; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 14px;
    background: var(--ink); z-index: -1; transform: skewX(-8deg);
  }
  .hero-title .underline-swoop {
    stroke: var(--fire); stroke-width: 5; fill: none;
    display: block; margin-top: -6px; margin-inline-start: 4px; max-width: 100%;
  }

  /* タイピング風レベレーション: JS が .t-chunk を .t-char に分割し順に is-on */
  .hero-title[data-typing]:not([data-ready]) .t-chunk { visibility: hidden; }
  .hero-title[data-typing] .t-char {
    opacity: 0;
    transition: opacity 0.12s ease-out;
  }
  .hero-title[data-typing] .t-char.is-on { opacity: 1; }
  /* .hl の黒塗り下地は、最初の一字が出るまで待つ */
  .hero-title[data-typing] .hl::after {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .hero-title[data-typing] .hl.is-revealed::after { opacity: 1; }

  .type-caret {
    display: inline-block;
    width: 3px; height: 0.82em;
    background: var(--fire);
    vertical-align: -0.08em;
    margin: 0 2px;
    border-radius: 1px;
    box-shadow: 2px 2px 0 var(--ink);
    animation: typeCaret 0.9s step-end infinite;
  }
  .type-caret.fade-out {
    animation: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  @keyframes typeCaret {
    50% { opacity: 0; }
  }
  /* 初期表示: data-ready 前 caret は非表示（初期レイアウトシフト抑止） */
  .hero-title[data-typing]:not([data-ready]) .type-caret { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero-title[data-typing] .t-char { opacity: 1; transition: none; }
    .hero-title[data-typing] .hl::after { opacity: 1; transition: none; }
    .type-caret { animation: none; display: none; }
  }

  .hero-sub {
    font-size: 1.05rem; line-height: 1.9; color: #333;
    margin-bottom: 36px; max-width: 540px;
  }
  .hero-sub .q {
    display: inline-block; background: #fff; padding: 2px 10px; border-radius: 6px;
    border: 1.5px solid var(--ink); font-weight: 700; margin: 0 2px 4px 0;
    box-shadow: 2px 2px 0 rgba(26,26,26,0.18);
  }

  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 26px; border-radius: 999px;
    font-weight: 900; font-size: 15px; letter-spacing: 0.04em;
    line-height: 1.3;
    text-decoration: none; cursor: pointer;
    border: 2.5px solid var(--ink);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--font-body);
    min-height: 48px;
    min-width: 220px;
  }
  /* 標準ボタン＝A（墨地＋朱影）に統一（owner 2026-06-10）。旧 朱地＋墨影=B を A へ揃え、基底 L105 と一致させる。 */
  .btn-primary {
    background: var(--ink); color: #fff;
    box-shadow: 5px 5px 0 var(--fire);
  }
  .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--fire); }
  .btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--fire); }

  .hero-arrow { transition: transform 0.25s cubic-bezier(.5,1.6,.4,1); }
  .btn:hover .hero-arrow { transform: translateX(6px); }

  .hero-stack { position: relative; height: 460px; }
  .panel {
    position: absolute; background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 14px; padding: 20px 22px;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.3s cubic-bezier(.5,1.6,.4,1);
    cursor: pointer;
  }
  .panel:hover { transform: translate(-3px, -3px) rotate(0deg) !important; box-shadow: 10px 10px 0 var(--ink); z-index: 10; }
  .panel-1 { top: 0;    left: 0;    width: 78%; transform: rotate(-3deg); }
  .panel-2 { top: 150px; right: 0;  width: 80%; transform: rotate(2.5deg); }
  .panel-3 { bottom: 0; left: 8%;   width: 84%; transform: rotate(-1.5deg); }
  .panel .series {
    display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.14em;
    padding: 3px 10px; background: var(--fire); color: #fff; border-radius: 999px;
    border: 1.5px solid var(--ink); margin-bottom: 10px;
  }
  .panel .series.boruto { background: #fff4e6; color: var(--fire); border-color: var(--fire); }
  .panel p {
    font-size: 15px; font-weight: 700; line-height: 1.55;
    position: relative; padding-inline-start: 22px;
  }
  .panel p::before {
    content: '「'; position: absolute; inset-inline-start: 0; top: -2px;
    font-family: var(--font-serif); color: var(--fire); font-weight: 700;
  }
  .panel .meta { font-size: 11px; color: #888; margin-top: 10px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
  .flag-svg { width: 16px; height: 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 2px; display: inline-block; flex-shrink: 0; } /* 4:3（2026-07-17） */

  .scroll-cue {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-size: 11px; letter-spacing: 0.3em; color: var(--ink); font-weight: 900;
    text-align: center; z-index: 3;
  }
  .scroll-cue .line { display: block; width: 1px; height: 36px; background: var(--ink); margin: 10px auto 0; animation: drop 1.6s ease-in-out infinite; transform-origin: top; }
  @keyframes drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* ========== MISSION / PROJECT 100 (scroll theme) ========== */
  .mission {
    background:
      radial-gradient(circle at 15% 25%, rgba(232,98,26,0.10) 0%, transparent 42%),
      radial-gradient(circle at 88% 80%, rgba(232,98,26,0.08) 0%, transparent 45%),
      linear-gradient(180deg, var(--scroll-deep) 0%, var(--scroll-dark) 100%);
    color: var(--ink);
    padding: 44px 32px 36px; position: relative; overflow: hidden;
    /* 縦余白を圧縮（96/120→44/36）＝下のおしらせ(同色グレー)との空き帯を詰める（owner 2026-06-09） */
    /* 色の変わり目に黒線は入れない（owner 2026-06-07）＝border-top も撤去（border-bottom は 2026-06-04 撤去済） */
  }
  .mission-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
  .mission-header {
    max-width: 720px; margin: 0 auto 48px; text-align: center;  /* 中央統一（owner 2026-06-09） */
  }
  .mission-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink);
    padding: 6px 14px; border-radius: 4px;
    margin-bottom: 18px;
    transform: none;            /* 傾きニュートラル＝フラット（owner 2026-06-04） */
  }
  .mission-title {
    font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em;
    text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  }
  .mission-title .fire { color: var(--fire); }
  .mission-lead {
    font-size: 1rem; line-height: 1.9; max-width: 720px; margin: 10px auto 0;
    color: var(--ink-80);
  }
  .mission-lead strong { color: var(--ink); }

  /* P100 ランクカード＝白カード＋墨枠（和紙テクスチャ/絵巻モチーフは全廃・コメント刷新 2026-06-07）*/
  .rank-frame {
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    padding: 40px 44px 36px;
    position: relative;
    margin: 0 auto;
    max-width: none;        /* タイトル左辺(mission-inner 1280)と左右を揃える＝幅いっぱい・中央配置のまま（owner 2026-06-04） */
    box-shadow: 6px 6px 0 var(--ink);
  }

  .rank-top { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 18px; gap: 24px; flex-wrap: wrap; }
  .rank-count {
    font-family: var(--font-body); font-weight: 900;
    font-size: 52px; line-height: 1; color: var(--ink);
  }
  .rank-count .big { color: var(--fire); font-size: 84px; letter-spacing: -0.03em; }
  .rank-count .slash { color: var(--ink-40); margin: 0 6px; }
  .rank-count .goal { font-size: 26px; color: var(--ink-60); }

  /* 進捗バー + 「いまここ」マーカー（ビューポート進入でぐいーんと伸びる）*/
  .rank-progress {
    position: relative;
    width: 100%; max-width: 640px;
    margin: 56px auto 40px;
    height: 14px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--scroll-deep, #f0ebe0);
  }
  .rank-progress-fill {
    position: absolute; inset: 0;
    width: 0;
    background: var(--fire);
    border-radius: 999px;
    overflow: hidden;
    transition: width 1.4s cubic-bezier(0.22, 1.4, 0.36, 1);
  }
  .rank-progress.in-view .rank-progress-fill { width: var(--progress); }

  /* 「いまここ」マーカー: 塗りのインライン終端に追従（inset-inline-start を独立アニメ）*/
  .rank-progress-here {
    position: absolute;
    top: 50%; inset-inline-start: 0%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition:
      inset-inline-start 1.4s cubic-bezier(0.22, 1.4, 0.36, 1),
      opacity 0.35s ease 1.0s;
  }
  .rank-progress.in-view .rank-progress-here {
    inset-inline-start: var(--progress);
    opacity: 1;
  }
  /* RTL では right アンカーになるため translate を反転して中心揃え */
  [dir="rtl"] .rank-progress-here {
    transform: translate(50%, -50%);
  }
  .here-dot {
    display: block;
    width: 18px; height: 18px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--fire);
  }
  .rank-progress.in-view .here-dot {
    animation: hereRipple 1.8s ease-out infinite 1.1s;
  }
  .here-flag {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) rotate(-2.5deg);
    background: var(--ink); color: #fff;
    font-size: 11px; font-weight: 900; letter-spacing: 0.16em;
    padding: 5px 10px; border-radius: 4px;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--fire-dark, #b24610);
  }
  .here-flag::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }

  /* ゴール「100」スタンプ */
  .rank-progress-goal {
    position: absolute;
    inset-inline-start: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) rotate(4deg);
  }
  .goal-mark {
    display: inline-block;
    font-family: var(--font-body);                 /* 明朝(serif)をやめ他と同じサンセリフに（owner 2026-06-04） */
    font-weight: 900; font-size: 16px;
    color: var(--accent, #E9451F);                 /* 100スタンプの色を #E9451F に（owner 2026-06-04） */
    border: 2.5px solid var(--accent, #E9451F);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  @keyframes hereRipple {
    0%   { box-shadow: 0 0 0 0 rgba(232, 98, 26, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(232, 98, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 98, 26, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .rank-progress-fill { transition: none; }
    .rank-progress-here { transition: none; opacity: 1; }
    .rank-progress.in-view .here-dot { animation: none; }
  }

  /* PROJECT 100 詳細ページへの導線 */
  /* 下線リンク→アウトラインのピルボタン化＝着地点を明確に（owner 2026-06-09・弱リンク廃止） */
  .rank-more {
    display: flex; width: fit-content; align-items: center; gap: 8px;
    margin: 24px auto 0;  /* 中央統一（owner 2026-06-09）＝カードの中身(25/100)が中央なのでボタンも中央 */
    font-size: 15px; font-weight: 900; letter-spacing: 0.06em;  /* ボタン統一15px */
    color: var(--ink); text-decoration: none;
    background: #fff; border: 2px solid var(--ink); border-radius: 999px;
    padding: 11px 22px; min-height: 44px; box-sizing: border-box;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
  }
  .rank-more:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .rank-more svg { flex: none; }
  .rank-count .goal .unit {
    font-size: 0.62em; color: var(--ink-60); font-weight: 700;
    margin-inline-start: 2px; letter-spacing: 0.04em;
  }
  .rank-meta {
    text-align: end; font-size: 13px; line-height: 1.7; letter-spacing: 0.04em;
  }
  .rank-meta .label { font-size: 11px; font-weight: 900; letter-spacing: 0.22em; color: var(--fire-dark); }
  .rank-meta .val { font-size: 20px; font-weight: 900; color: var(--ink); display: block; margin-top: 4px; }
  .rank-meta .val .num { color: var(--fire); }

  /* Chapter ladder — 絵巻場面マーカー × チャクラノード metaphor */
  .ladder {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    margin-bottom: 36px; position: relative;
  }
  /* 章間チャクラ線（SVG ベジェ・発光）
     ladder の下辺（章マーカー底部の chakra-core 位置）を繋ぐ */
  .chakra-lines {
    position: absolute; left: 0; right: 0; bottom: -14px;
    width: 100%; height: 28px;
    pointer-events: none; z-index: 1;
    overflow: visible;
  }
  .chakra-lines path {
    fill: none; stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(232,98,26,0.55));
  }
  .chakra-lines path.flowing {
    stroke: var(--fire); stroke-width: 2.5;
    stroke-dasharray: 6 7;
    animation: chakraflow 3.2s linear infinite;
  }
  .chakra-lines path.dormant {
    stroke: rgba(122,47,8,0.3); stroke-width: 1.2;
    stroke-dasharray: 3 5;
    filter: none;
  }
  @keyframes chakraflow {
    to { stroke-dashoffset: -26; }
  }
  .ladder > .rank-step { z-index: 2; }
  /* 章マーカー（縦区切り・絵巻/和紙モチーフは廃止）*/
  .rank-step {
    background: transparent;
    border: none;
    padding: 18px 12px 22px;
    position: relative; text-align: center;
    transition: all 0.3s ease;
  }
  /* 左右の墨縦線（章の区切り）*/
  .rank-step::before {
    content: ''; position: absolute;
    top: 8px; bottom: 8px; right: -7px;
    width: 1px;
    background: repeating-linear-gradient(180deg,
      rgba(122,47,8,0.38) 0 4px,
      transparent 4px 7px);
  }
  .ladder .rank-step:last-child::before { display: none; }
  .rank-step.reached {
    background: linear-gradient(180deg, rgba(232,98,26,0.08), rgba(232,98,26,0.18));
  }
  .rank-step.reached .seal { color: #c04e10; }
  .rank-step.current .seal { color: var(--fire); text-shadow: 0 0 12px rgba(232,98,26,0.4); }
  .rank-step .seal-wrap {
    position: relative; width: 56px; height: 56px; margin: 0 auto 10px;
  }
  /* 章番号墨文字ラベル */
  .rank-step .seal {
    position: relative; z-index: 2;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    font-family: var(--font-serif); font-weight: 700; color: var(--ink-40); font-size: 22px;
    transition: all 0.3s ease;
  }
  /* チャクラコア（章マーカー底部の単一発光点） */
  .rank-step .chakra-core {
    position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px dashed var(--ink-20); background: var(--scroll);
    z-index: 3;
  }
  .rank-step.reached .chakra-core {
    border-style: solid; border-color: var(--fire); background: var(--fire);
    box-shadow: 0 0 10px rgba(232,98,26,0.55), 0 0 22px rgba(232,98,26,0.25);
  }
  .rank-step.current .chakra-core {
    animation: corepulse 1.8s ease-in-out infinite;
  }
  @keyframes corepulse {
    0%,100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 10px rgba(232,98,26,0.55), 0 0 22px rgba(232,98,26,0.25); }
    50%     { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 18px rgba(232,98,26,0.85), 0 0 36px rgba(232,98,26,0.45); }
  }
  .rank-step .rank-ch {
    font-family: var(--font-body); font-weight: 900;
    font-size: 11px; letter-spacing: 0.22em; color: var(--ink-40);
    margin-bottom: 4px;
  }
  .rank-step.reached .rank-ch { color: var(--fire-dark); }
  .rank-step .rank-name {
    font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
    color: var(--ink-80);
  }
  .rank-step.reached .rank-name { color: var(--ink); }
  .rank-step.current .rank-name { color: var(--fire-dark); }
  .rank-step .rank-num {
    font-size: 10px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em;
    color: var(--ink-40); margin-top: 6px;
  }
  .rank-step.reached .rank-num { color: var(--fire); }
  .rank-step.current::after {
    content: 'いま ここ'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--fire); color: #fff; font-size: 9.5px; font-weight: 900;
    padding: 3px 10px; border-radius: 999px; letter-spacing: 0.14em;
    border: 1.5px solid var(--ink);
    white-space: nowrap;
  }

  .country-row { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .country-row .label { font-size: 11px; font-weight: 900; letter-spacing: 0.22em; color: var(--ink-60); }
  .flags-mini { display: flex; gap: 8px; flex-wrap: wrap; }
  .flag-chip {
    padding: 6px 14px; background: var(--scroll);
    border: 1.5px solid var(--ink-20);
    border-radius: 999px; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    color: var(--ink);
  }
  .flag-chip.dashed { border-style: dashed; color: var(--ink-80); }

  /* ========== TODAY CALENDAR CARD (歳時記) ========== */
  .today-card {
    padding: 56px 32px 64px;
    background: var(--scroll);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    position: relative;
  }
  .today-card-inner {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 var(--ink-20);
    padding: 32px 36px;
    min-height: 168px;
  }
  .today-card-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink);
    padding: 6px 14px; border-radius: 4px;
    margin-bottom: 18px;
    transform: rotate(-1.5deg);
  }
  .today-card-heading {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 900; line-height: 1.45; letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--ink);
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .today-card-heading .placeholder {
    color: var(--ink-60); font-weight: 700; font-size: 0.95rem;
  }
  .today-label {
    font-size: 11px; font-weight: 900; letter-spacing: 0.08em;
    padding: 4px 10px; border-radius: 100px;
    white-space: nowrap;
    align-self: flex-start;
  }
  .today-label--birthday_char { background: #fce4ec; color: #880e4f; }
  .today-label--birthday_va   { background: #e8f5e9; color: #1b5e20; }
  .today-label--real          { background: #fff3e0; color: #e65100; }
  .today-label--inuniverse    { background: #e8eaf6; color: #283593; }
  .today-label--event         { background: #f3e5f5; color: #7b1fa2; }
  .today-name { color: var(--ink); }
  .today-name-sep { color: var(--ink-40, var(--ink-60)); font-weight: 700; }
  .today-name-entry { display: flex; flex-direction: column; gap: 4px; }
  .today-card-heading--multi { flex-direction: column; align-items: flex-start; gap: 8px; }
  .today-card-heading--multi .today-names-row {
    display: flex; flex-direction: column; gap: 14px;
  }
  .today-card-heading--multi .today-name-sep { display: none; }
  .today-years { font-size: 0.78rem; color: var(--ink-60); font-weight: 700; }
  .today-fallback-days { color: var(--fire); font-size: clamp(1.4rem, 3vw, 2rem); }
  .today-fallback-text { color: var(--ink-60); font-size: 0.95rem; font-weight: 700; }

  .today-card-body { margin-top: 0; }
  .today-rest-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .today-rest { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.92rem; color: var(--ink); }
  .today-rest-years { font-size: 0.78rem; color: var(--ink-60); }

  .today-card-related {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--ink-20);
  }
  .today-related-heading {
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.15em;
    color: var(--ink-60); margin: 0 0 10px;
  }
  .today-related-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .today-related-list a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px;
    background: var(--scroll);
    border: 1.5px solid var(--ink-20);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .today-related-list a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--ink);
    border-color: var(--ink);
  }
  .today-related-quote { font-weight: 900; font-size: 0.95rem; line-height: 1.4; }
  .today-related-name { font-size: 0.78rem; color: var(--ink-60); font-weight: 700; }

  .today-card-more { margin-top: 14px; }
  .today-more-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.82rem; font-weight: 900; letter-spacing: 0.04em;
    color: var(--fire); text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    transition: opacity 0.15s;
  }
  .today-more-link:hover { opacity: 0.75; }

  .today-card-noscript { color: var(--ink-60); font-size: 0.9rem; margin: 0; }

  /* --- hero variant: ヒーロー右セルに収まる軽量体裁 --- */
  .today-card--hero {
    padding: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
  }
  .today-card--hero .today-card-inner {
    max-width: none;
    width: 100%;
    padding: 28px 30px;
    min-height: 0;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .today-card--hero .today-card-eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
  }
  .today-card--hero .today-card-heading {
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
    line-height: 1.45;
    gap: 4px;
  }
  .today-card--hero .today-names-row {
    flex-direction: column;
    gap: 14px;
  }
  .today-card--hero .today-name-sep { display: none; }
  .today-card--hero .today-name { font-size: 0.88rem; line-height: 1.45; }
  .today-card--hero .today-rest { font-size: 0.88rem; }
  .today-card--hero .today-fallback-days { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
  .today-card--hero .today-related-list a { padding: 9px 12px; }
  .today-card--hero .today-related-quote { font-size: 0.88rem; }

  /* ========== MANGA PANELS (STORIES) ========== */
  .stories {
    padding: 96px 32px 120px;
    background: linear-gradient(180deg, var(--scroll-dark) 0%, var(--scroll) 100%);
    position: relative; overflow: hidden;
  }
  .stories::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(26,26,26,0.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
  }
  .stories-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
  .stories-header { margin-bottom: 56px; text-align: center; }  /* 中央統一（owner 2026-06-09） */
  .stories-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink); padding: 6px 14px; border-radius: 4px;
    margin-bottom: 18px; transform: rotate(-1.5deg);
  }
  .stories-title {
    font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.2;
    max-width: 980px; margin-left: auto; margin-right: auto;
    text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  }
  .stories-title .stroke {
    color: var(--ink);
  }

  .manga-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 22px;
  }
  .mp {
    background: #fff; border: 2.5px solid var(--ink);
    border-radius: 14px; padding: 22px 22px 20px;
    position: relative;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.25s cubic-bezier(.5,1.4,.4,1), box-shadow 0.25s ease;
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column;
    min-width: 0;
    max-width: 100%;
  }
  .mp:hover {
    transform: translate(-3px, -4px) rotate(var(--hr, 0deg));
    box-shadow: 10px 12px 0 var(--ink);
    z-index: 5;
  }
  .mp .mp-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
  }
  .mp .chip {
    font-size: 10px; font-weight: 900; letter-spacing: 0.14em;
    padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--ink);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp .chip.naruto { background: var(--fire); color: #fff; }
  .mp .chip.boruto { background: #fff4e6; color: var(--fire); border: 1.5px solid var(--fire); }
  .mp .chip.two    { background: #fff; color: var(--ink); }
  .mp .shuriken {
    width: 22px; height: 22px; color: var(--ink);
    opacity: 0.35; flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(.3,1.8,.3,1), opacity 0.25s;
  }
  .mp:hover .shuriken { transform: rotate(360deg); opacity: 1; color: var(--fire); }
  .mp .q {
    font-size: 17px; font-weight: 900; line-height: 1.55; letter-spacing: -0.005em;
    flex: 1; margin-bottom: 16px;
    /* 文字数差で行高が崩れ一覧のスキャン性が落ちるため3行でクランプ（owner 2026-06-07） */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .mp .q .pop {
    background: var(--fire); color: #fff; padding: 0 4px; border-radius: 3px;
  }
  .mp .byline { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
  .mp .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--fire); color: #fff;
    display: grid; place-items: center; font-weight: 900; font-size: 14px;
    border: 2px solid var(--ink); flex-shrink: 0;
  }
  .mp .byline .who { line-height: 1.3; }
  .mp .byline .who .name { font-weight: 900; display: block; }
  .mp .byline .who .place { font-size: 10px; color: #888; letter-spacing: 0.08em; }

  /* 🔴 画像付き投稿のみ: カード右上に「ピン留めポラロイド」を absolute 配置
     カード高さに一切影響を与えず、v3 のピン留め紙片言語と整合させる。
     ⚠️ 【WO-026【5】・2026-08-16】**これは VoiceCard.astro が今も使っている**（StoryCard.astro は
        下の `.mp-photo-card` 系へ移行したが、VoiceCard は対象外＝そのまま残す）。 */
  .mp-thumb {
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    width: 82px;
    height: 62px;
    border: 2.5px solid var(--ink);
    border-radius: 4px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden;
    transform: rotate(3deg);
    transition: transform 0.25s cubic-bezier(.5,1.4,.4,1);
    z-index: 4;
  }
  .mp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .mp-thumb-tag {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--ink-60, #555);
    background: var(--scroll-deep, #f0ebe0);
  }
  .mp-thumb.mp-thumb-fallback img { display: none; }
  .mp-thumb.mp-thumb-fallback .mp-thumb-tag { display: flex; }
  .mp:hover .mp-thumb { transform: rotate(0deg) translate(-2px, -2px); }

  /* 🔴🔴 【WO-026【5】・H04・P-253・2026-08-16・椿さんFIX】**StoryCard.astro の写真は切らずに全体・
     PCは写真＋右にキャッチコピー。**
     ⚠️ StoryCard.astro だけ、上の `.mp-thumb`（object-fit:cover＝切る）から乗り換えた。
        「切らない」という要求と「固定の小窓に収める」という前の設計は両立しないため、
        小さな上書きではなく骨組みごと差し替えた（`StoryCard.astro` も分岐を分けている）。
     ⚠️ **写真の高さは固定しない**（`height:auto`）＝縦長の写真をレターボックスや切り落としで
        誤魔化さない。縦長の投稿はカードそのものが縦に伸びる（これは仕様＝椿さんの要求の帰結）。 */
  .mp-photo-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .mp-photo {
    flex: 0 0 auto;
    width: 34%;
    max-width: 168px;
    min-width: 96px;
    border: 2.5px solid var(--ink);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    position: relative;
  }
  .mp-photo img {
    display: block;
    width: 100%;
    height: auto;   /* 🔴 自然な縦横比のまま＝切らない・引き伸ばさない */
  }
  .mp-photo-tag {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--ink-60, #555);
    background: var(--scroll-deep, #f0ebe0);
    min-height: 62px;
  }
  .mp-photo-card.mp-photo-fallback .mp-photo img { display: none; }
  .mp-photo-card.mp-photo-fallback .mp-photo-tag { display: flex; }
  .mp-body {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  /* 画像付きカードは装飾の手裏剣を隠す（写真と役割重複）*/
  .mp[data-has-image] .shuriken { display: none; }

  /* DOM 順: a, c, d, e, g, h, i, j, b
     段1: a(5) + c(3) + d(4) = 12
     段2: e(5) + g(4) + h(3) = 12
     段3: i(4) + j(4) + b(4) = 12 */
  .mp-a { grid-column: span 5; --hr: -1deg;   transform: rotate(-1deg); }
  .mp-c { grid-column: span 3; --hr: -0.5deg; transform: rotate(-0.5deg); margin-top: 12px; }
  .mp-d { grid-column: span 4; --hr: 0.8deg;  transform: rotate(0.8deg); margin-top: -8px; }
  .mp-e { grid-column: span 5; --hr: -1.3deg; transform: rotate(-1.3deg); }
  .mp-g { grid-column: span 4; --hr: -0.8deg; transform: rotate(-0.8deg); margin-top: -10px; }
  .mp-h { grid-column: span 3; --hr: 1.5deg;  transform: rotate(1.5deg); margin-top: 6px; }
  .mp-i { grid-column: span 4; --hr: -0.6deg; transform: rotate(-0.6deg); }
  .mp-j { grid-column: span 4; --hr: 0.7deg;  transform: rotate(0.7deg); margin-top: -8px; }
  .mp-b { grid-column: span 4; --hr: 1.2deg;  transform: rotate(1.2deg); margin-top: 14px; }

  .mp-img {
    background: linear-gradient(135deg, #ffd9b8 0%, #ffbb85 100%);
    color: var(--ink);
    align-items: flex-start; justify-content: space-between;
  }
  .mp-img .hatched {
    position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 2px, transparent 2px 8px);
  }
  .mp-img .bigq {
    font-family: var(--font-serif); font-size: 140px; line-height: 0.7; color: var(--ink); opacity: 0.12;
    position: absolute; top: 0; inset-inline-end: 12px; pointer-events: none;
  }
  /* ③：空き枠＝「あなたのきっかけを描く」Gペン先（漫画のつけペン・手裏剣と被らない・owner 2026-06-04）。 */
  .mp-img .nib-mark {
    position: absolute; top: 14px; inset-inline-end: 16px; width: 44px; height: 44px;
    stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
    opacity: 0.34; pointer-events: none;
  }
  .mp-img .caption {
    position: relative; z-index: 1;
    font-size: 19px; font-weight: 900; line-height: 1.55;
    width: 100%; max-width: 100%;
    text-align: start;
    padding-inline-end: 56px;
    box-sizing: border-box;
  }
  .mp-img .caption .row { display: block; }
  .mp-img .caption .row + .row { margin-top: 0.18em; }
  .mp-img .caption em { font-style: normal; color: var(--fire-dark); }
  .mp-img .cap-meta {
    position: relative; z-index: 1;
    font-size: 11px; font-weight: 900; letter-spacing: 0.18em;
  }

  .stories-foot {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
    margin-top: 56px;
  }
  .all-link {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 900; color: var(--ink); text-decoration: none;
    padding: 14px 28px; background: #fff;
    border: 2.5px solid var(--ink); border-radius: 999px;
    box-shadow: 5px 5px 0 var(--fire);
    transition: all 0.2s ease;
    min-height: 48px;
  }
  .all-link:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--fire); }

  /* ========== Backstage (サイトの裏側コーナー・控えめ設計) ========== */
  .backstage {
    padding: 80px 32px 96px;
    background: var(--cream, #faf6ec);
  }
  .backstage-inner {
    max-width: 720px; margin: 0 auto;
    background: #fff;
    border: 2.5px solid var(--ink);
    box-shadow: 6px 6px 0 var(--fire);
    padding: 40px 36px;
  }
  .backstage-eyebrow {
    font-size: 12px; font-weight: 900; letter-spacing: 0.22em;  /* 他のアイブロウと統一（owner 2026-06-09） */
    color: var(--fire); margin-bottom: 18px;
  }
  .backstage-body {
    font-size: 16px; line-height: 1.85;
    color: var(--ink); margin: 0 0 14px;
  }
  .backstage-body:last-of-type { margin-bottom: 24px; }
  .backstage-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 900; color: var(--ink); text-decoration: none;
    padding: 10px 20px; background: #fff;
    border: 2px solid var(--ink); border-radius: 999px;
    box-shadow: 3px 3px 0 var(--fire);
    transition: all 0.2s ease;
  }
  .backstage-link svg { flex-shrink: 0; }
  .backstage-link:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--fire); }
  .backstage-link-primary { background: var(--ink); color: #fff; }
  .backstage-links {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px;
  }
  @media (max-width: 720px) {
    .backstage { padding: 64px 20px 72px; }
    .backstage-inner { padding: 28px 22px; box-shadow: 4px 4px 0 var(--fire); }
    .backstage-body { font-size: 15px; }
    .backstage-links { flex-direction: column; align-self: stretch; align-items: stretch; }
    .backstage-link { justify-content: center; }
  }

  /* ========== CTA ========== */
  .cta {
    position: relative; overflow: hidden;
    padding: 120px 32px 132px;
    background: var(--fire);
    color: #fff;
  }
  .cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      repeating-conic-gradient(from 180deg at 50% 50%,
        transparent 0deg, transparent 2deg,
        rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
    mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  }
  .cta::after {
    content: '忍';
    position: absolute; right: -80px; bottom: -140px;
    font-family: var(--font-serif); font-weight: 700; font-size: 560px;
    line-height: 0.8; color: var(--ink); opacity: 0.08;
    pointer-events: none;
  }
  .cta-inner {
    max-width: 900px; margin: 0 auto;
    position: relative; z-index: 2; text-align: center;
  }
  .cta-stamp {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px; background: var(--ink); color: var(--fire);
    font-weight: 900; font-size: 12px; letter-spacing: 0.24em;
    border-radius: 999px; margin-bottom: 28px;
    transform: rotate(-2deg);
  }
  .cta h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
    margin-bottom: 28px;
    word-break: keep-all; overflow-wrap: break-word;
  }
  .cta h2 .box {
    display: inline-block; background: var(--ink); color: var(--fire);
    padding: 0 14px; margin: 0 2px;
    transform: rotate(-1deg);
  }
  .cta-lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.9; font-weight: 500;
    max-width: 640px; margin: 0 auto 44px;
    color: rgba(255,255,255,0.95);
  }
  .cta-lead .row { display: block; }
  .cta-lead .row + .row { margin-top: 8px; }
  .cta-lead .nb {
    display: inline-block; font-weight: 900; color: #fff;
    background: rgba(26,26,26,0.25); padding: 2px 10px; border-radius: 6px;
    margin: 2px 4px;
  }

  .cta-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 22px 48px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 18px; font-weight: 900; letter-spacing: 0.04em;
    text-decoration: none;
    border: 3px solid var(--ink);
    box-shadow: 7px 7px 0 rgba(26,26,26,0.4);
    transition: all 0.22s cubic-bezier(.5,1.4,.4,1);
    min-height: 56px;
  }
  .cta-cta:hover {
    background: #fff; color: var(--ink);
    transform: translate(-3px,-3px);
    box-shadow: 11px 11px 0 rgba(26,26,26,0.4);
  }
  .cta-cta .arrow { transition: transform 0.25s ease; }
  .cta-cta:hover .arrow { transform: translateX(8px); }

  .cta-note {
    margin-top: 28px; font-size: 13px;
    color: rgba(255,255,255,0.85); font-weight: 500;
  }
  .cta-note a { color: #fff; border-bottom: 2px solid rgba(255,255,255,0.85); padding-bottom: 1px; }
  .cta-note a:hover { border-bottom-color: #fff; }

  /* ========== FOOTER (現行公開版と一致) ========== */
  .foot {
    background: var(--ink); color: rgba(255,255,255,0.6);
    padding: 48px 32px; text-align: center;
    font-size: 13px;
  }
  .foot .brand-mark { display: inline-grid; margin-bottom: 16px; }
  .foot .links { display: flex; gap: 20px 28px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
  .foot a { color: rgba(255,255,255,0.75); text-decoration: none; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
  .foot a:hover { color: var(--fire); }
  .foot .note { font-size: 11px; color: rgba(255,255,255,0.5); }

  /* ========== RESPONSIVE ========== */
  /* ヘッダー：ナビ(4リンク＋言語＋投稿CTA)＋ログインが干渉する手前(~1180px)でハンバーガー化（owner 2026-06-09・タブレット対応）。
     項目が多いので 960 では遅く、タブレット幅で衝突していた。HERO/グリッド等の他レスポンシブは 960 のまま。 */
  @media (max-width: 1250px) {
    .nav { display: none; }
    .menu-btn { display: block; }
    .header { position: relative; }
    .nav.nav-open {
      display: flex; flex-direction: column; align-items: stretch; gap: 0;
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--scroll); padding: 12px 24px 20px;
      border-top: 2.5px solid var(--ink);
      box-shadow: 0 8px 0 var(--fire), 0 8px 24px rgba(26,26,26,0.12);
      z-index: 100;
    }
    .nav.nav-open a { padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--ink-20); }
    .nav.nav-open a:last-of-type { border-bottom: none; }
    /* ハンバーガーは border-bottom で区切る＝デスクトップ用の下線インジケータ(::after)は出さない。
       現在地(active)項目の ::after が縦並びでフル幅の黒線になる不具合の解消（owner 2026-06-10） */
    .nav.nav-open a::after { display: none; }
    .nav.nav-open .lang-switcher { padding-top: 8px; }
    .nav.nav-open .lang-menu { position: static; box-shadow: none; border: 1px solid var(--ink-20); margin-top: 8px; }
    /* 🔴 margin-left/right は「左右の決め打ち」＝アラビア語（dir="rtl"）で逆向きに働く。
       margin-inline-start/end は「文の始まる側／終わる側」なので両方で正しく効く。
       左から読む言語での見た目は完全に同じ（inline-start = left になるため）。2026-08-09 */
    .header-auth { margin-inline-start: auto; }
    .header .header-auth .btn { min-width: 0; }
    .nav.nav-open .header-cta { width: 100%; justify-content: center; margin-top: 12px; padding: 12px 16px; border-bottom: none; }
  }
  @media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-stack { height: 440px; max-width: 460px; margin: 0 auto; }
    .rank-frame { padding: 32px 36px 28px; margin: 0 auto; max-width: none; }
    .manga-grid { grid-template-columns: repeat(6, 1fr); }
    .mp-a,.mp-b,.mp-c,.mp-d,.mp-e,.mp-g,.mp-h,.mp-i,.mp-j { grid-column: span 6; margin-top: 0; margin-left: 0; }
  }
  @media (max-width: 640px) {
    .preview-banner { font-size: 10px; letter-spacing: 0.14em; padding: 6px 10px; gap: 10px; }
    .header-inner { padding: 10px 16px; gap: 10px; }
    .header-cta { padding: 9px 16px; font-size: 12px; }
    .brand-text .jp { font-size: 15px; }
    .brand-text .sub { display: none; }
    .brand-mark { width: 38px; height: 38px; font-size: 19px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
    .hero-title .underline-swoop { stroke-width: 3; }

    .hero { padding: 64px 20px 80px; overflow: hidden; }
    /* 装飾 SVG はモバイルで間引く（密度過多回避） */
    .hero-eyebrow { font-size: 10.5px; padding: 6px 12px; letter-spacing: 0.14em; }
    .hero-title { font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.3; max-width: 100%; }
    /* モバイルは画面幅優先で折り返し許可（keep-all で語中改行は防ぐ）。nowrap は横スクロールの原因なので外す */
    .hero-title .line-1, .hero-title .line-2 { white-space: normal; }
    /* swoop はモバイルで h1 幅に追従させ、はみ出しを防ぐ */
    .hero-title .underline-swoop { width: 100%; height: auto; }
    /* モバイル: 直下の swoop（オレンジ波線）と重なって見栄えが悪いため装飾下線を非表示 */
    .hero-title .hl::after { display: none; }
    .hero-sub { font-size: 0.95rem; line-height: 1.85; margin-bottom: 28px; }
    .hero-actions .btn { width: 100%; justify-content: center; padding: 11px 18px; min-width: 0; min-height: 44px; font-size: 14.5px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
    .hero-actions .btn-outline { box-shadow: 3px 3px 0 var(--fire); }
    .hero-actions { gap: 10px; margin-bottom: 28px; }
    /* モバイルでは右側プレビューカードは下部 "最新の投稿" に任せるため非表示 */
    .hero-stack { display: none; }
    .scroll-cue { display: none; }

    .mission { padding: 40px 14px 48px; }
    .mission-header { text-align: center; max-width: none; margin-bottom: 20px; }
    .mission-lead { margin: 10px auto 0; max-width: none; }
    .rank-frame {
      padding: 28px 20px 24px; margin: 0 14px; max-width: none;
    }
    .rank-progress { max-width: 100%; margin: 36px auto 28px; }
    .rank-progress-goal { inset-inline-start: auto; inset-inline-end: 0; top: calc(100% + 8px); transform: rotate(4deg); }
    .goal-mark { font-size: 13px; padding: 1px 6px; }
    .rank-count { font-size: 44px; }
    .rank-count .big { font-size: 72px; }
    .rank-count .goal { font-size: 22px; }
    .rank-meta { text-align: start; width: 100%; }
    .rank-meta .val { font-size: 16px; }
    .rank-meta .val .num { white-space: normal; }
    /* モバイル: ladder を1列・横並びシンプル化 */
    .ladder {
      display: flex; flex-direction: column; gap: 2px;
      margin-bottom: 4px;
    }
    .rank-step {
      padding: 8px 10px;
      display: grid;
      grid-template-columns: 48px 1fr auto 14px;
      grid-template-areas:
        "seal ch  num core"
        "seal name name core";
      align-items: center; column-gap: 14px; row-gap: 2px;
      text-align: start;
    }
    .rank-step::before { display: none; }
    .rank-step .seal-wrap { grid-area: seal; margin: 0; width: 48px; height: 48px; }
    .rank-step .seal      { width: 48px; height: 48px; font-size: 20px; }
    .rank-step .rank-ch   { grid-area: ch;   margin: 0; font-size: 10px; }
    .rank-step .rank-name { grid-area: name; font-size: 14px; }
    .rank-step .rank-num  { grid-area: num;  margin: 0; font-size: 10.5px; }
    .rank-step .chakra-core {
      grid-area: core; position: static; transform: none;
      width: 12px; height: 12px;
    }
    .rank-step.current .chakra-core { animation: corepulseStatic 1.8s ease-in-out infinite; }
    @keyframes corepulseStatic {
      0%,100% { transform: scale(1);    box-shadow: 0 0 8px rgba(232,98,26,0.55); }
      50%     { transform: scale(1.35); box-shadow: 0 0 14px rgba(232,98,26,0.85); }
    }
    /* current の "いま ここ" バッジはモバイルでは step の外側上に押し出し、文字との被りを回避 */
    .ladder .rank-step.current { margin-top: 14px; }
    .rank-step.current::after {
      top: -12px; left: 12px; transform: none;
      font-size: 9px; padding: 2px 8px; letter-spacing: 0.12em;
    }
    /* モバイルでは章間チャクラ線（横方向ベジェ）は意味を失うため非表示 */
    .chakra-lines { display: none; }
    .country-row { gap: 10px; margin-top: 18px; }
    .country-row .label { width: 100%; }
    /* Project 100 縦圧縮追加項目 */
    .rank-top { margin-bottom: 14px; gap: 12px; }

    .today-card { padding: 32px 14px 40px; }
    .today-card-inner { padding: 22px 18px; min-height: 140px; }
    .today-card-heading { font-size: 1.1rem; gap: 4px; line-height: 1.5; }
    .today-related-list a { padding: 9px 12px; }
    .today-related-quote { font-size: 0.9rem; }
    .today-card--hero { padding: 0; }
    .today-card--hero .today-card-inner {
      padding: 20px 18px 22px; min-height: 0;
      border-width: 2px;
      box-shadow: 3px 3px 0 var(--ink);
    }
    .today-card--hero .today-card-eyebrow {
      margin-bottom: 12px; padding: 4px 10px; font-size: 10px;
      letter-spacing: 0.18em;
    }
    .today-card--hero .today-card-heading {
      font-size: 0.98rem; line-height: 1.45; gap: 4px; margin: 0;
    }
    .today-card--hero .today-fallback-days {
      font-size: 1.05rem; display: inline-block; margin-inline-end: 2px;
    }
    .today-card--hero .today-fallback-text { font-size: 0.82rem; line-height: 1.4; }
    .today-card--hero .today-card-related { margin-top: 10px; padding-top: 10px; }
    .today-card--hero .today-related-heading { margin-bottom: 6px; font-size: 0.68rem; }
    .today-card--hero .today-related-list { gap: 5px; }
    .today-card--hero .today-related-list a { padding: 6px 10px; }
    .today-card--hero .today-related-quote { font-size: 0.82rem; line-height: 1.3; }
    .today-card--hero .today-related-name { font-size: 0.7rem; }

    .stories { padding: 72px 20px 88px; }
    .stories-header { margin-bottom: 40px; }
    .stories-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .manga-grid { grid-template-columns: 1fr; gap: 18px; }
    .mp-a,.mp-b,.mp-c,.mp-d,.mp-e,.mp-g,.mp-h,.mp-i,.mp-j {
      grid-column: 1 / -1; transform: none; margin-top: 0; margin-inline-start: 0; --hr: 0deg;
    }
    /* モバイルは 3 カードに絞り込み（最初の声 + 短い声 + 投稿 CTA）*/
    .mp-d, .mp-e, .mp-g, .mp-h, .mp-i, .mp-j { display: none; }
    .mp { padding: 18px 18px 16px; box-shadow: 5px 5px 0 var(--ink); }
    .mp .q { font-size: 15px; }  /* モバイルは少し詰める（owner 2026-06-09・本文1remに寄せる） */
    .mp-img .caption { font-size: 16px; padding-inline-end: 24px; }
    .mp-img .bigq { font-size: 100px; }
    /* 🔴 【WO-026【5】・H04・2026-08-16】スマホは写真を上・本文を下に積む（横幅が無く並べられない）。
       ⚠️ ここも「切らない」は維持＝`height:auto` のまま、幅だけ枠いっぱいにする。 */
    .mp-photo-card { flex-direction: column; gap: 12px; }
    .mp-photo { width: 100%; max-width: none; min-width: 0; }

    .cta { padding: 56px 20px 64px; }
    .cta-stamp { margin-bottom: 18px; padding: 6px 14px; font-size: 11px; }
    .cta h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
    .cta-lead { font-size: 0.95rem; line-height: 1.85; margin-bottom: 28px; }
    .cta-cta {
      padding: 14px 22px; font-size: 15px;
      width: 100%; max-width: 100%;
      justify-content: center; box-sizing: border-box;
      min-height: 50px; gap: 10px;
      box-shadow: 5px 5px 0 rgba(26,26,26,0.4);
    }
    .cta-note { margin-top: 18px; font-size: 12px; }
    .cta::after { font-size: 320px; right: -80px; bottom: -120px; }

    .foot { padding: 36px 20px; }
    .foot .links { gap: 14px 20px; }
  }

  /* ========== REDUCED MOTION (a11y) ========== */
  /* 本ファイルのアニメはすべて「可視状態からの微動」のみ（0%→1 のフェードインは無し）。
     そのため duration 短縮のみで不可視事故は発生しない。transform/opacity の強制上書きはしない。*/
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

/* ============================================================
   V3 DESIGN SYSTEM — STORY DETAIL
   v3 リデザイン後の体験談詳細ページスタイル本体。
   （旧 .story-detail block と .v3 prefix は Phase 7+ で撤廃済み）
   ============================================================ */

.story-detail { background: var(--scroll); padding: 48px 0 64px; }
.story-detail .story-detail-inner { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 40px 44px 48px; max-width: 820px; margin: 0 auto; position: relative; }

/* パンくず */
.story-detail .breadcrumb { color: var(--ink-60); font-size: 13px; font-weight: 600; margin-bottom: 28px; }
.story-detail .breadcrumb a { color: var(--ink-80); text-decoration: none; transition: color 0.15s; }
.story-detail .breadcrumb a:hover { color: var(--fire); }
.story-detail .breadcrumb span { color: var(--ink); font-weight: 700; }

/* ヘッダー */
.story-detail .story-header { margin-bottom: 36px; }
.story-detail .story-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.story-detail .story-tags .tag-large { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--fire); color: #fff; text-transform: uppercase; }
.story-detail .story-tags .tag-large.tag-media { background: #fff4e6; color: var(--fire); border-color: var(--fire); }
.story-detail .story-catchphrase { font-family: var(--font-body); font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 900; line-height: 1.5; color: var(--ink); margin: 0 0 20px; letter-spacing: -0.005em; word-break: keep-all; overflow-wrap: break-word; }
.story-detail .story-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; color: var(--ink-60); align-items: center; }
.story-detail .story-meta .story-name { color: var(--ink); font-size: 15px; font-weight: 900; }
.story-detail .story-meta .story-meta-item { position: relative; padding-inline-start: 14px; }
.story-detail .story-meta .story-meta-item::before { content: '·'; position: absolute; inset-inline-start: 0; color: var(--ink-40); }
.story-detail .story-meta .story-date { color: var(--ink-60); font-weight: 500; }

.story-detail .translation-notice { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 4px; background: var(--ink); color: #fff; margin-top: 20px; transform: rotate(-1.2deg); }
.story-detail .translation-notice.translation-notice--translated { background: var(--fire); }

/* 画像 */
.story-detail .story-image { margin: 36px 0 36px; }
.story-detail .story-image img { width: 100%; border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink); display: block; }
.story-detail .story-image-caption { font-size: 12px; font-weight: 600; color: var(--ink-60); margin-top: 12px; text-align: center; }

/* 本文 */
.story-detail .story-body { margin: 36px 0; }
.story-detail .story-section { margin-bottom: 32px; }
.story-detail .story-section h2 { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.22em; padding: 6px 14px; border-radius: 4px; background: var(--ink); color: #fff; margin-bottom: 16px; transform: rotate(-1.5deg); text-transform: none; }
.story-detail .story-section p { color: var(--ink-80); line-height: 1.9; font-size: 15px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }
.story-detail .story-section--wish h2 { background: var(--fire); }

/* ひとこと */
.story-detail .story-message { background: var(--fire-soft); border-inline-start: 4px solid var(--fire); border-radius: 4px; padding: 22px 28px; margin: 36px 0; }
.story-detail .story-message .message-label { font-size: 11px; font-weight: 900; letter-spacing: 0.22em; color: var(--fire); margin-bottom: 10px; text-transform: uppercase; }
.story-detail .story-message .message-quote { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.7; margin: 0; }

/* アクションバー */
.story-detail .story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 24px; }
.story-detail .action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: 4px 4px 0 var(--fire); transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; }
.story-detail .action-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fire); }
.story-detail .action-btn .action-icon { display: inline-flex; }
.story-detail .action-btn.liked,
.story-detail .action-btn.favorited { background: var(--fire); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.story-detail .action-btn.liked:hover,
.story-detail .action-btn.favorited:hover { box-shadow: 6px 6px 0 var(--ink); }

/* わかる！CTA バブル */
.story-detail .like-cta { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--fire); padding: 18px 22px; margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.story-detail .like-cta.like-cta--visible { opacity: 1; transform: translateY(0); }
.story-detail .like-cta-text { color: var(--ink); font-weight: 700; font-size: 14px; flex: 1; margin: 0; }
.story-detail .like-cta-link { display: inline-flex; align-items: center; padding: 8px 16px; background: var(--fire); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 900; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.story-detail .like-cta-link:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.story-detail .like-cta-close { background: none; border: none; cursor: pointer; color: var(--ink-60); font-size: 20px; line-height: 1; padding: 0 4px; font-weight: 900; }
.story-detail .like-cta-close:hover { color: var(--fire); }

/* アフィリエイト */
.story-detail .affiliate-section { margin: 40px -44px; padding: 36px 44px; background: var(--scroll-deep); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.story-detail .affiliate-label { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 0.22em; padding: 6px 14px; border-radius: 4px; background: var(--ink); color: #fff; margin-bottom: 18px; transform: rotate(-1.2deg); text-transform: uppercase; }
.story-detail .affiliate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.story-detail .affiliate-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.story-detail .affiliate-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--fire); }
.story-detail .affiliate-shop { font-size: 11px; font-weight: 900; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 3px; background: var(--fire); color: #fff; flex-shrink: 0; }
.story-detail .affiliate-title { flex: 1; font-size: 14px; font-weight: 700; }
.story-detail .affiliate-arrow { color: var(--ink-60); font-weight: 900; }

/* 関連体験談 */
.story-detail .related-stories { margin: 48px 0 36px; }
.story-detail .related-stories-title { font-family: var(--font-body); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--ink); margin-bottom: 24px; letter-spacing: 0.02em; }
.story-detail .related-stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }

/* 前後ナビ */
.story-detail .story-prev-next { display: flex; justify-content: space-between; gap: 14px; margin: 40px 0 28px; flex-wrap: wrap; }
.story-detail .story-prev-next .prev-next-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; max-width: 48%; }
.story-detail .story-prev-next .prev-next-link:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--fire); }
.story-detail .story-prev-next .prev-next-arrow { font-weight: 900; color: var(--fire); }
.story-detail .story-prev-next .prev-next-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 投稿CTA / ナビアクション */
.story-detail .story-cta { text-align: center; margin: 44px 0 0; padding: 32px 24px; background: var(--scroll-deep); border: 2px solid var(--ink); border-radius: 12px; }
.story-detail .story-cta .btn.btn-primary.btn-large { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 900; text-decoration: none; box-shadow: 7px 7px 0 var(--fire); transition: transform 0.15s, box-shadow 0.15s; }
.story-detail .story-cta .btn.btn-primary.btn-large:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--fire); }
.story-detail .story-cta-sub { display: flex; justify-content: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.story-detail .btn-text-link { background: none; border: none; cursor: pointer; color: var(--ink-60); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 0.15s; font-family: var(--font-body); padding: 4px 8px; }
.story-detail .btn-text-link:hover { color: var(--fire); }

/* 多言語詳細ページの .story-nav-actions（.btn.btn-outline 含む） */
.story-detail .story-nav { text-align: center; margin: 44px 0 0; }
.story-detail .story-nav-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.story-detail .story-nav-actions .btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; border: 2px solid var(--ink); transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; font-family: var(--font-body); }
.story-detail .story-nav-actions .btn.btn-outline { background: #fff; color: var(--ink); }
.story-detail .story-nav-actions .btn.btn-outline:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--fire); }
.story-detail .story-nav-actions .btn.btn-primary { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--fire); }
.story-detail .story-nav-actions .btn.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fire); }

/* モバイル調整 */
@media (max-width: 720px) {
  .story-detail .story-detail-inner { padding: 28px 22px 32px; box-shadow: 4px 4px 0 var(--ink); }
  .story-detail .affiliate-section { margin: 32px -22px; padding: 28px 22px; }
  .story-detail .story-meta { gap: 10px; }
  .story-detail .story-meta .story-meta-item { padding-inline-start: 0; }
  .story-detail .story-meta .story-meta-item::before { display: none; }
  .story-detail .story-prev-next { flex-direction: column; }
  .story-detail .story-prev-next .prev-next-link { max-width: 100%; justify-content: space-between; }
}
/* spot-map AIO answer-first lead（AIO Phase B 第2弾） */
.spot-aio-lead {
  margin: 24px 0 16px;
  color: var(--ink-80);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 600;
}
@media (max-width: 720px) {
  .spot-aio-lead { font-size: 0.95rem; margin: 16px 0 12px; }
}

/* stories 索引の AIO answer-first lead（AIO Phase B 第2弾 次点） */
.stories-aio-lead {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink-80);
}
@media (max-width: 720px) {
  .stories-aio-lead { font-size: 0.9rem; }
}


/* cache-bust: 20260516 */

/* ============================================================
   BORUTO -TWO BLUE VORTEX- 感想タイムライン（/boruto/*）
   すべて .boruto-page スコープ限定＝他ページ（NARUTO オレンジ系）には一切影響しない。
   設計: docs/boruto-timeline-detail.md §8 / モック scripts/boruto-timeline-mock/index.html。
   公式 TBV パレット: raised=#00a3d6（シアン）/ base=#000系 / text=白・グレー。
   v1 スコープ＝感想(comment)のみ・1カラム。考察2カラム/共感/返信/シェア/考察詳細は v1.1（未移植）。
   ============================================================ */
.boruto-page{
  --boruto:#00a3d6; --boruto-deep:#0083ac; --boruto-dark:#00567a; --boruto-ink:#021824;
  /* 本文地色は彩度を抜いた薄グレー（白だとカードと同化・水色だと柔らかくなる＝UX審査2026-06-02）。
     🔴 【WO-021・P-1049・2026-08-14 椿さん決定「揃える」】~~`#f1f3f5`~~ → **`var(--scroll)` を参照。**
     ⚠️ **同じ色を書き写さない。**書き写すと、次に地の色を変える人が**1つ書き忘れて、また今日と
        同じこと**（画面ごとに地の色が違う）が起きる。⇒ 地の色の正本は `:root` の `--scroll` 1か所。 */
  --boruto-soft:#cdeef9; --boruto-bg:var(--scroll); --boruto-link:#00729c;
  background:var(--boruto-bg);
  --font-serif:var(--font-body); /* このページは明朝を使わない（sans に統一） */
}
.boruto-page main svg:not([fill]){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}

/* ヘッダー: 現行 .header を TBV青へ上書き（シアン地でヒーローとシームレス・濃紺#021824文字でコントラスト確保） */
.boruto-page .header{background:rgba(0,163,214,.96);border-bottom:none;backdrop-filter:none}
.boruto-page .header .brand-text .jp{color:#021824}
.boruto-page .brand-text .sub{color:#021824}
.boruto-page .brand-mark{background:#021824;color:#fff;border-color:#fff;box-shadow:3px 3px 0 rgba(2,24,36,.25)}
.boruto-page .header .nav a{color:#021824}
.boruto-page .nav a::after{background:#021824}
.boruto-page .header .nav a:hover,.boruto-page .nav a.active{color:#021824}
.boruto-page .nav a.active::after{width:100%}
.boruto-page .header-cta{background:#021824;border-color:#021824;color:#fff}
.boruto-page .header-cta:hover{background:#fff;color:#021824;box-shadow:3px 3px 0 #021824}
.boruto-page .menu-btn{border-color:#021824}
.boruto-page .menu-btn span{background:#021824}
.boruto-page .lang-switcher-btn{color:#021824;border-color:rgba(2,24,36,.3)}
.boruto-page .lang-switcher-btn:hover{border-color:#021824;color:#021824}
/* ヘッダーの左右幅を広く使う（タイトルを左端・投稿/ログインを右端へ） */
.boruto-page .header-inner{max-width:1560px;padding-left:1.6rem;padding-right:1.6rem;justify-content:flex-start}
.boruto-page .brand{margin-inline-end:auto} /* 左右決め打ちにしない（rtl で帯が左に寄る）・2026-08-09 */
.boruto-page .header-auth{display:inline-flex;align-items:center;gap:10px}
/* 会員アイコン/ログインは会員機能として全ページ共通（.boruto-page 非依存化 2026-06-04）。
   アイコンも他のヘッダーボタンと同じ 38px に揃える（既定30pxだと高さ・サイズがズレる）。 */
.header-auth{display:inline-flex;align-items:center;gap:10px}
.header-auth .avatar{width:38px;height:38px;font-size:1rem}
.header-auth .btn{padding:9px 20px;font-size:12.5px;font-weight:900;border:2px solid #021824;color:#021824;background:transparent}
/* hover モーションを投稿CTAと統一（持ち上がり＋ハードブロック影）。階層は塗り/枠で表現し、動きは揃える */
.header-auth .btn:hover{background:#021824;color:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 #021824}
/* BORUTO ヘッダーのログインは枠線ボタン（透明地＋濃紺枠＋濃紺文字）に。
   既定の .boruto-page .btn の boruto-deep(#0083ac) ベタ塗りはヘッダー cyan(#00a3d6) と色が近く濁って見える＝上書き（owner 2026-06-10）。
   hover は濃紺ベタに反転（持ち上げ/影は generic hover を流用）。 */
.boruto-page .header .header-auth .btn { background: transparent; color: #021824; border: 2px solid #021824; }
.boruto-page .header .header-auth .btn:hover { background: #021824; color: #fff; }
/* ヘッダー操作ボタン（日本語/投稿/ログイン）は高さを 38px に統一（幅は文字数で自然可変・全ページ対応 2026-06-04）。
   display は各ボタン自身の inline-flex に任せる（上書きすると guest-only/member-only の display:none トグルに勝つため）。高さだけ統一。 */
.header .lang-switcher-btn,
.header .header-cta,
.header .header-auth .btn{
  min-height:38px;box-sizing:border-box;line-height:1;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s
}
/* 投稿(+体験談を投稿する)とログインを同じ横幅に揃える（owner 2026-06-04・言語切替は短いまま除外）。
   ※デスクトップ限定。モバイルは投稿CTAがハンバーガー内・バーにはログインだけ＝13.5em強制だと巨大化して崩れる
   （source 末尾でモバイル override に勝っていた不具合を min-width:961px で根治・owner 2026-06-06） */
@media (min-width: 1251px) {
  /* 投稿CTAとログインを同幅に揃えるのは「両方がバーに並ぶ」幅だけ＝ハンバーガー化(1250px)に下限を一致。
     旧 961px はハンバーガー breakpoint を 960→1250 に上げた際の追従漏れで、畳んだ後もログインが 13.5em で肥大していた（owner 2026-06-09 修正）。 */
  .header .header-cta,
  .header .header-auth .btn{ min-width: 13.5em; }
}
/* BORUTO は投稿CTAが ≤1280px で非表示（下記 .boruto-page .header-cta display:none）＝相方不在なので
   ログインの 13.5em 幅合わせを解除し内容幅に戻す（owner 2026-06-09 BORUTOログイン肥大の修正） */
@media (max-width: 1280px) {
  .boruto-page .header .header-auth .btn { min-width: 0; }
}
@media(max-width:1250px){  /* 基本ヘッダーの折り畳みを1180へ上げたのに合わせる（owner 2026-06-09・タブレット衝突対策） */
  .boruto-page .nav.nav-open{background:#00a3d6;border-top-color:#021824;box-shadow:0 8px 0 #021824,0 8px 24px rgba(0,0,0,.25)}
  .boruto-page .nav.nav-open a{border-bottom-color:rgba(2,24,36,.15)}
  .boruto-page .header-auth{margin-inline-start:auto} /* 同上・2026-08-09 */
}

/* フッター: 現行 .foot を黒(#021824)へ上書き */
.boruto-page .foot{background:var(--boruto-ink)}
.boruto-page .foot a:hover,.boruto-page .foot-follow-link:hover{color:var(--boruto)}
.boruto-page .foot .brand-mark{background:var(--boruto-deep);border-color:rgba(255,255,255,.55);box-shadow:3px 3px 0 rgba(255,255,255,.2)}

/* 共通: avatar / btn（青）。avatar は会員UIとして全ページで使う＝.boruto-page 非依存＋色は変数フォールバックで実値（2026-06-04）。 */
.avatar{width:30px;height:30px;border-radius:50%;background:var(--boruto-soft,#cdeef9);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--boruto-ink,#021824);font-size:.85rem;overflow:hidden;flex:none;text-decoration:none}
.avatar.lg{width:64px;height:64px;font-size:1.4rem}
.avatar.xs{width:18px;height:18px;font-size:.6rem}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* グローバル .btn（ヒーロー用CTA）の min-width:220px/min-height:48px をリセット＝boruto は小さめ pill */
.boruto-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:999px;padding:.5rem 1.1rem;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;border:1.5px solid var(--boruto-deep);background:var(--boruto-deep);color:#fff;text-decoration:none;min-width:0}
.boruto-page .btn.ghost{background:transparent;color:var(--boruto-deep)}
.boruto-page .btn.sm{padding:.35rem .8rem;font-size:.8rem}
.boruto-page .btn svg{width:16px;height:16px}
.boruto-page .btn:disabled{opacity:.5;cursor:not-allowed}

/* レイアウト */
.boruto-page .wrap{max-width:1080px;margin:0 auto;padding:1.5rem 1.4rem 4rem}
/* タイムライン本文/UGC は和文を自然に文字単位で折り返す（グローバル body の word-break:keep-all を上書き）。
   keep-all のままだと CJK が改行できず min-content が膨張し、モバイルの 1fr グリッドが横にはみ出す（実測 695px）。
   不自然な改行（「、」「・」直後）は protectText の WORD JOINER で別途抑止しているので両立する。 */
.boruto-page .col-main, .boruto-page .col-aside, .boruto-page .an-article-screen,
.boruto-page .mypage, .boruto-page .profile{word-break:normal}

/* ログイン状態の出し分け（client が /api/me 判定後に body[data-auth] を更新。既定=guest）。
   トップの会員導線とヘッダー会員UIでも使うため .boruto-page スコープを外し全ページ対応化
   （.guest-only/.member-only は会員機能専用クラスのため影響範囲は限定・2026-06-04）。
   body を前置して specificity を (0,2,1) に上げ、ボタン側の display 指定（例 `.boruto-page .write-an{display:inline-flex}`
   ＝(0,2,0)）に確実に勝たせる。これが無いと tie＋後勝ちで member でも考察の guest ボタンが消えなかった（2026-06-21 修正）。 */
body[data-auth="member"] .guest-only{display:none}
body[data-auth="guest"] .member-only{display:none}
/* 解禁状態の出し分け（client が release_at とサーバー時刻で再判定して data-released を更新） */
.boruto-page[data-released="no"] .released-only{display:none}
.boruto-page[data-released="yes"] .locked-only{display:none}
/* 感想カードのアクション行（モック .acts 準拠＝アイコンのみ・borderless・左から 共感/コメント/シェア、右端=通報）。
   全アクションを同じ薄さ（--ink-60）に統一＝引きのデザイン。高さも揃える（min-height + svg display:block + align-items）。 */
.boruto-page .post-actions{margin-top:.5rem;display:flex;align-items:center;gap:1.25rem;font-size:.78rem;color:var(--ink-60)}
.boruto-page .act-btn{display:inline-flex;align-items:center;gap:.3rem;min-height:24px;border:0;background:none;margin:0;padding:.1rem;color:var(--ink-60);font:inherit;font-size:.78rem;font-weight:700;line-height:1;cursor:pointer;border-radius:6px}
.boruto-page .act-btn svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.boruto-page .act-btn:hover{color:var(--boruto-deep)}
/* 共感（いいね）: 線アイコン→押下で塗り（押下時のみ色を変える） */
.boruto-page .act-btn.empathy-btn.on{color:var(--boruto)}
.boruto-page .act-btn.empathy-btn.on svg{fill:currentColor}
/* 自分の投稿の「もらった共感数」表示（読み取り専用＝押せない・ホバーで色を変えない・カーソルは矢印） */
.boruto-page .act-btn.empathy-btn.readonly{cursor:default}
.boruto-page .act-btn.empathy-btn.readonly:hover{color:var(--ink-60)}
/* 通報は右端へ（モック .acts a.rep と同様 margin-left:auto）。色は他と統一（--ink-60） */
.boruto-page .act-btn.report-btn{margin-left:auto}
.boruto-page .act-btn.report-btn:hover{color:#c0392b}
.boruto-page .empathy-count{font-variant-numeric:tabular-nums}
/* カウント0（空）のときは幅を取らない＝ハート→コメント間だけ広く見える「歪み」を防ぐ
   （display:none で flex アイテムから外れるので gap も発生しない＝数字があるときだけ余白が付く）。 */
.boruto-page .empathy-count:empty{display:none}
/* ② コメント件数バッジ（empathy-count と同様＝0件は幅を取らない） */
.boruto-page .comment-count{font-variant-numeric:tabular-nums}
.boruto-page .comment-count:empty{display:none}
/* いいね数字＝クリックで「いいねした人」を開けることを示す（title 付きのみポインタ） */
.boruto-page .empathy-count[title]{cursor:pointer}

/* ③「いいねした人」ポップオーバー（mountDialog の .bt-share-overlay 内に乗る白カード） */
.boruto-page .bt-likers{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1rem 1.1rem;width:min(92vw,320px);max-height:70vh;overflow:auto}
.boruto-page .bt-likers-head{font-weight:900;font-size:.95rem;color:var(--ink);margin:0 0 .7rem}
.boruto-page .bt-likers-list{display:flex;flex-direction:column;gap:.1rem}
.boruto-page .bt-liker{display:flex;align-items:center;gap:.5rem;padding:.45rem .3rem;border-radius:8px;text-decoration:none;color:var(--ink)}
.boruto-page a.bt-liker:hover{background:var(--boruto-soft)}
.boruto-page .bt-liker-name{font-size:.88rem;font-weight:700}
.boruto-page .bt-likers-empty{font-size:.85rem;color:var(--ink-60);padding:.4rem .3rem}
/* 準備中（コメント/通報・Phase4）= 色以外でも「今は使えない」を示す（淡色＋hover で活性化させない） */
.boruto-page .act-btn[aria-disabled="true"]{opacity:.5;cursor:default}
.boruto-page .act-btn[aria-disabled="true"]:hover{color:var(--ink-40)}
/* フォーカス可視（通常テーマ。UA 既定に頼らず明示＝bt-switch 等と統一） */
.boruto-page .act-btn:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
@media (forced-colors: active){
  .boruto-page .act-btn:focus-visible{outline:2px solid;outline-offset:2px}
  .boruto-page .act-btn.empathy-btn.on{outline:1px solid;outline-offset:1px}
}

/* 「この回をシェア」＋「選んで画像でシェア」＝tl-head（見出し行）の右側にアイコンのみ。常時表示（社会基盤）。 */
.boruto-page .chap-share{display:inline-flex;align-items:center;gap:.45rem;margin-left:.6rem}
.boruto-page .chap-share .act-btn{color:var(--ink-60)}

/* 複数選択モード（→1枚画像に結合してシェア）。選択中はカードをクリック/Enter/Space で選択トグル（キーボード対応）。 */
.boruto-page[data-bt-select="1"] .post{cursor:pointer;position:relative}
.boruto-page[data-bt-select="1"] .post:focus-visible{outline:2.5px solid var(--boruto-deep);outline-offset:2px}
.boruto-page[data-bt-select="1"] .post .post-actions{pointer-events:none;opacity:.45}
/* チェックマークが右上の相対時刻に被らないよう、選択中は見出し行の右に余白を確保 */
.boruto-page[data-bt-select="1"] .post .top{padding-right:30px}
.boruto-page[data-bt-select="1"] .post.selected{outline:2.5px solid var(--boruto);outline-offset:-1px;box-shadow:0 0 0 4px rgba(0,163,214,.12)}
.boruto-page[data-bt-select="1"] .post::after{content:"";position:absolute;top:.7rem;right:.7rem;width:22px;height:22px;border-radius:50%;border:2px solid rgba(2,24,36,.3);background:#fff}
.boruto-page[data-bt-select="1"] .post.selected::after{content:"✓";display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900;background:var(--boruto);border-color:var(--boruto)}
.boruto-page #bt-select-toggle[aria-pressed="true"]{color:var(--boruto);background:var(--boruto-soft)}

/* 選択シェアのフローティングバー */
.boruto-page .bt-select-bar{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:9998;display:flex;align-items:center;gap:.7rem;background:var(--boruto-deep);color:#fff;border-radius:999px;padding:.55rem .8rem .55rem 1.2rem;box-shadow:var(--shadow-lg);max-width:calc(100vw - 2rem)}
.boruto-page .bt-select-bar .bsb-count{font-size:.82rem;font-weight:700;white-space:nowrap}
.boruto-page .bt-select-bar .btn{min-width:0}
.boruto-page .bt-select-bar .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* SNS 共有メニュー（1ボタンに集約・a11y ダイアログ） */
.boruto-page .bt-share-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(2,24,36,.55);opacity:0;transition:opacity .2s}
.boruto-page .bt-share-overlay--visible{opacity:1}
.boruto-page .bt-share-menu{width:min(360px,92vw);background:#fff;border:1.5px solid var(--boruto-deep);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
.boruto-page .bt-share-title{font-weight:800;color:var(--boruto-deep);font-size:.95rem;text-align:center;margin:.1rem 0 .8rem}
.boruto-page .bt-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
/* word-break:normal＝body既定のkeep-allを上書き。keep-allのままだと「Instagramストーリーズ」が
   1続きの語になりmin-contentが膨張してボタンをはみ出す（:4287の前例と同じ形・実測は本体で確認）。 */
.boruto-page .bt-share-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:1.5px solid rgba(2,24,36,.15);background:#fff;color:var(--boruto-deep);border-radius:12px;padding:.7rem .3rem;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;line-height:1.2;text-align:center;word-break:normal}
.boruto-page .bt-share-item svg{width:24px;height:24px}
.boruto-page .bt-share-item:hover{border-color:var(--boruto-deep);background:var(--boruto-soft)}
.boruto-page .bt-share-item.sns-x{color:#000}
.boruto-page .bt-share-item.sns-line{color:#06c755}
.boruto-page .bt-share-item.sns-facebook{color:#1877f2}
.boruto-page .bt-share-item.sns-reddit{color:#ff4500}
.boruto-page .bt-share-item.sns-weibo{color:#e6162d}
.boruto-page .bt-share-item.sns-instagram{color:#c13584}
/* 横長カードを画像化して添付する項目（ストーリーズ＝sns-instagram とは別導線）。 */
.boruto-page .bt-share-item.sns-card{color:var(--boruto-deep)}
.boruto-page .bt-share-item.sns-copy{color:var(--boruto-deep)}
/* 投稿直後の「シェアしますか」パネル（postedShare・共有メニューと同じ枠を使う） */
.boruto-page .bt-posted{width:min(340px,90vw);text-align:center}
.boruto-page .bt-posted-sub{margin:.5rem 0 1rem;color:var(--ink-60);font-size:.85rem;line-height:1.7}
.boruto-page .bt-posted-go{display:block;width:100%}
.boruto-page .bt-share-close{display:block;width:100%;margin-top:.8rem;border:0;background:none;color:var(--ink-60);font:inherit;font-weight:700;font-size:.85rem;padding:.5rem;cursor:pointer;border-radius:8px}
.boruto-page .bt-share-close:hover{background:var(--boruto-soft);color:var(--boruto-deep)}

/* 🔴【2026-08-20・実機バグ修正・椿さんスマホ実機で発見】上のブロックは全て .boruto-page
   スコープ限定＝BORUTOタワー専用。今回の切り出しで share-menu.js は DayLadder・体験談詳細
   ページ（.boruto-page ではない）からも呼ばれるようになったが、ダイアログのCSSが一切無く、
   overlay/menu が無装飾のまま document.body 末尾に追記され、share() 内の firstBtn.focus()
   がそこへスクロールするだけの見た目になっていた（実害＝「共有ボタンを押すと画面が下へ
   スクロールする」）。⚠️ 検証で見逃した理由＝window.ShareMenu.share() が呼ばれたこと・
   要素がDOMに追加されたことはJSレベルで確認したが、CSSが実際に適用されて見た目どおりの
   モーダルとして描画されるかをスクリーンショットで確認していなかった（自動ブラウザは
   常にPC幅・要素の存在チェックのみだった）。
   同じクラス名を非スコープで複製し、色だけ v3 トークン（--fire/--ink）に差し替える。
   .boruto-page 側は詳細度（2クラス＞1クラス）で従来どおり勝つため無変更＝
   BORUTOタワーの見た目に影響しない。 */
.bt-share-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(26,26,26,.55);opacity:0;transition:opacity .2s}
.bt-share-overlay--visible{opacity:1}
.bt-share-menu{width:min(360px,92vw);background:#fff;border:1.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
.bt-share-title{font-weight:800;color:var(--ink);font-size:.95rem;text-align:center;margin:.1rem 0 .8rem}
.bt-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
/* word-break:normal＝上の .boruto-page 版と同じ理由・同じ直し（:4373のコメント参照）。 */
.bt-share-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:1.5px solid var(--ink-20);background:#fff;color:var(--ink);border-radius:12px;padding:.7rem .3rem;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;line-height:1.2;text-align:center;word-break:normal}
.bt-share-item svg{width:24px;height:24px}
.bt-share-item:hover{border-color:var(--fire);background:var(--amber)}
.bt-share-item.sns-x{color:#000}
.bt-share-item.sns-line{color:#06c755}
.bt-share-item.sns-facebook{color:#1877f2}
.bt-share-item.sns-reddit{color:#ff4500}
.bt-share-item.sns-weibo{color:#e6162d}
.bt-share-item.sns-instagram{color:#c13584}
.bt-share-item.sns-card{color:var(--ink)}
.bt-share-item.sns-copy{color:var(--ink)}
.bt-posted{width:min(340px,90vw);text-align:center}
.bt-posted-sub{margin:.5rem 0 1rem;color:var(--ink-60);font-size:.85rem;line-height:1.7}
.bt-posted-go{display:block;width:100%}
.bt-share-close{display:block;width:100%;margin-top:.8rem;border:0;background:none;color:var(--ink-60);font:inherit;font-weight:700;font-size:.85rem;padding:.5rem;cursor:pointer;border-radius:8px}
.bt-share-close:hover{background:var(--amber);color:var(--fire-dark)}
.bt-share-item:focus-visible,
.bt-share-close:focus-visible{outline:2px solid var(--fire);outline-offset:2px}
@media (forced-colors: active){
  .bt-share-item:focus-visible{outline:2px solid;outline-offset:2px}
}

/* 通報ダイアログ（理由選択＋任意補足）。overlay/title は share と共用。 */
.boruto-page .bt-report-menu{width:min(380px,92vw);background:#fff;border:1.5px solid var(--boruto-deep);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
.boruto-page .bt-report-reasons{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.boruto-page .bt-report-reasons legend{font-size:.8rem;font-weight:700;color:var(--ink-60);padding:0;margin:0 0 .4rem}
.boruto-page .bt-report-reason{display:flex;align-items:center;gap:.55rem;padding:.5rem .4rem;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--ink)}
.boruto-page .bt-report-reason:hover{background:var(--boruto-soft)}
.boruto-page .bt-report-reason input{margin:0;width:16px;height:16px;accent-color:var(--boruto-deep);flex:none}
.boruto-page .bt-report-detail{width:100%;margin-top:.7rem;min-height:64px;border:1.5px solid rgba(2,24,36,.18);border-radius:10px;padding:.5rem .6rem;font:inherit;font-size:.88rem;resize:vertical;box-sizing:border-box}
.boruto-page .bt-report-detail:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
.boruto-page .bt-report-actions{display:flex;gap:.6rem;margin-top:.9rem}
.boruto-page .bt-report-actions .btn{flex:1;min-width:0}
.boruto-page .bt-report-actions .btn.ghost{background:transparent;color:var(--ink-60);border:1.5px solid rgba(2,24,36,.18)}
.boruto-page .bt-report-actions .btn.ghost:hover{background:var(--boruto-soft);color:var(--boruto-deep)}
.boruto-page .bt-share-item:focus-visible,
.boruto-page .bt-share-close:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
@media (forced-colors: active){
  .boruto-page .bt-share-item:focus-visible{outline:2px solid;outline-offset:2px}
}

/* 話数ヒーロー（フル幅・TBV青はこのページ限定。区切れ目は明確＝ソリッドなシアン） */
.boruto-page .chap-hero{position:relative;overflow:hidden;text-align:center;padding:2.5rem 1.4rem 2.8rem;background:var(--boruto);color:#fff}
/* 砂テクスチャ: インラインSVG（DOM直置き＝data-URIより互換性が高い）。ヒーロー限定（本文は無地＝密度対比で硬質さを出す） */
.boruto-page .hero-grain{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.85}
.boruto-page .chap-hero-inner{position:relative;z-index:2;display:inline-block;max-width:92vw;margin:0 auto}
.boruto-page .hero-logo-group{display:block}
/* タイトル: シアン地に黒ロゴ（公式準拠の純黒#000）＋刻印(deboss)影 */
.boruto-page .chap-hero-title{display:inline-flex;flex-direction:column;align-items:stretch;gap:.4rem;margin:0}
.boruto-page .bt-main{font-size:clamp(3.6rem,13.5vw,7.2rem);font-weight:900;line-height:.82;letter-spacing:0;color:#000;text-align:center;white-space:nowrap;
  text-shadow:0 -1.5px 0 rgba(0,8,12,.55),0 2px 0 rgba(224,242,251,.6),0 3px 4px rgba(0,0,0,.12)}
.boruto-page .bt-sub{font-size:clamp(1.2rem,4.4vw,2.45rem);font-weight:900;color:#000;letter-spacing:.01em;line-height:1;text-align:justify;text-align-last:justify;
  text-shadow:0 -1px 0 rgba(0,8,12,.45),0 1px 0 rgba(224,242,251,.5)}
/* タグライン: シンプルなフラット長方形（外=黒枠/内=シアン地+黒文字。刻印スタンプ/斜めカットは撤回） */
.boruto-page .hero-tagline{display:block;width:100%;margin-top:1.4rem;background:#000;padding:4px}
.boruto-page .hero-tagline span{display:block;background:var(--boruto);color:#000;padding:.55rem 1.15rem;
  font-size:clamp(1.05rem,2.7vw,1.55rem);font-weight:800;letter-spacing:.02em;line-height:1.4;text-align:justify;text-align-last:justify}
@media(max-width:720px){.boruto-page .chap-hero{padding:2.6rem 1.2rem 3rem}}

/* このページの大見出し（第○○話）。標準＝太い青罫の見出しブロック */
.boruto-page .chapter-title{margin:1.8rem 0 .4rem;padding:.1rem 0 0 1.2rem;border-left:6px solid var(--boruto-deep)}
.boruto-page .ct-ep{font-size:.92rem;font-weight:800;color:var(--boruto-deep);letter-spacing:.08em}
.boruto-page .ct-name{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:900;color:var(--ink);line-height:1.2;margin:.15rem 0 .6rem}
.boruto-page .ct-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:.84rem;color:var(--ink-80);font-weight:600}
.boruto-page .ct-meta .mi{display:inline-flex;align-items:center;gap:.35rem}
.boruto-page .ct-meta b{color:var(--ink);font-weight:800}
.boruto-page .ct-meta svg{width:15px;height:15px;color:var(--boruto-deep)}
/* ヒーロー内に統合した話数見出し＝扉化（シアン地に黒・中央寄せ・1行圧縮。区切り罫は撤去） */
.boruto-page .chap-hero .chapter-title{margin:.65rem 0 0;padding:0;border-left:none;border-top:none;text-align:center;
  display:flex;align-items:baseline;justify-content:center;gap:.15rem .7rem;flex-wrap:wrap}
.boruto-page .chap-hero .ct-ep{color:#000;letter-spacing:.12em}
.boruto-page .chap-hero .ct-name{color:#000;margin:0;font-size:clamp(1.3rem,3vw,1.7rem)}
.boruto-page .chap-hero .ct-meta{justify-content:center;color:rgba(0,0,0,.78);font-weight:700}
.boruto-page .chap-hero .ct-meta b{color:#000}
.boruto-page .chap-hero .ct-meta svg{color:#000}

/* 投稿コンポーザー（記入先＝主役。グラデ+やわらかい影で上品に呼び込む＝エンタメ性との balance） */
.boruto-page .composer{background:linear-gradient(var(--boruto-soft),#fff 64%);border:2px solid var(--boruto-deep);border-radius:var(--radius-md);padding:1.1rem 1.2rem;box-shadow:0 6px 20px rgba(10,127,194,.15)}
.boruto-page .composer-head{display:flex;align-items:center;gap:.45rem;font-weight:900;font-size:1rem;color:var(--boruto-deep);margin-bottom:.5rem}
.boruto-page .composer-head svg{width:19px;height:19px}
.boruto-page .composer .who{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-80);margin-bottom:.5rem}
.boruto-page .composer .who b{color:var(--ink)}
.boruto-page .composer textarea{width:100%;min-height:84px;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.7rem;font:inherit;font-size:var(--fs-body);resize:vertical;background:#fff;box-sizing:border-box}
/* フォーカス時: ブラウザ既定の青リングを撤廃し TBV パレット準拠（シアン）に統一 */
.boruto-page .composer textarea:focus{outline:none;border-color:var(--boruto-deep);box-shadow:0 0 0 3px var(--boruto-soft)}
.boruto-page .composer .row{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;font-size:.78rem;color:var(--ink-80)}

/* 未ログイン: 書き込み導線CTA */
.boruto-page .login-cta{background:#fff;border:2px dashed var(--boruto-deep);border-radius:var(--radius-md);padding:1.3rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm)}
.boruto-page .login-cta .lc-rsr{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .5rem}
.boruto-page .login-cta .lc-rsr-item{display:inline-flex;align-items:center;gap:.32rem;font-size:.78rem;font-weight:800;color:var(--ink);background:var(--boruto-soft,#cdeef9);border:1px solid var(--boruto,#00a3d6);border-radius:999px;padding:.3rem .72rem;line-height:1}
.boruto-page .login-cta .lc-rsr-item svg{width:14px;height:14px;flex:none;color:var(--boruto-deep,#0083ac)}
.boruto-page .login-cta .btn{margin:0 auto}

/* セクション見出し（みんなの感想＝シンプルな黒長方形・白抜き） */
.boruto-page .tl-head{display:flex;align-items:center;gap:.7rem;margin:1.8rem 0 .8rem}
.boruto-page .tl-head h2{font-size:1.05rem;font-weight:900;display:inline-flex;align-items:center;color:#fff;line-height:1.3;background:var(--ink);padding:.34rem .9rem}
.boruto-page .tl-head .live{margin-left:auto;font-size:.74rem;color:var(--boruto-deep);font-weight:700}

/* 2カラム（左=感想メイン / 右=この回の考察・スティッキー）＝モック設計 */
.boruto-page .cols{display:grid;grid-template-columns:1fr 340px;gap:1.6rem;margin-top:1.2rem;align-items:start}
@media(max-width:820px){.boruto-page .cols{grid-template-columns:1fr}}
/* 解禁前は右カラム（考察）を出さず 1 カラム＝カウントダウンを中央に。 */
.boruto-page[data-released="no"] .cols{grid-template-columns:1fr}
.boruto-page .col-aside{position:sticky;top:90px}
@media(max-width:820px){.boruto-page .col-aside{position:static;margin-top:1.6rem}}

/* 右カラム: この回の考察（一覧） */
/* 考察一覧＝引き算の罫線リスト。囲みカードを捨て、アバター＋タイトル（1行省略）＋名前＋›。
   字数/コメント/抜粋は一覧に出さず詳細はクリック先の記事へ。感想（白カード）との密度差で差別化する。 */
.boruto-page .aside-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.boruto-page .aside-card .lead{font-size:.76rem;color:var(--ink-60);margin:.3rem 0 .9rem}
.boruto-page #bt-analyses{border-top:1px solid #e4e6e9}
.boruto-page .an-item{display:flex;align-items:center;gap:.7rem;background:transparent;border:0;border-bottom:1px solid #e4e6e9;border-radius:0;padding:.85rem .15rem;margin:0;cursor:pointer;transition:background .14s}
/* ホバー/フォーカス/タップ時だけ薄シアンがフッと差し、›がシアンへ＋わずかに前進（静→動）。常時は無地＝引き算を保つ */
.boruto-page .an-item:hover,.boruto-page .an-item:focus-visible{background:#eaf6fb;outline:none}
.boruto-page .an-item:active{background:#ddeffa}
.boruto-page .an-item .avatar.xs{width:28px;height:28px;font-size:.72rem}
.boruto-page .an-item .an-main{min-width:0;flex:1}
.boruto-page .an-item .t{display:block;font-weight:700;font-size:.95rem;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boruto-page .an-item .by{font-size:.74rem;color:var(--ink-60);margin-top:.25rem;display:flex;align-items:center;gap:.4rem}
.boruto-page .an-item .an-chev{margin-left:auto;flex:none;color:#c2c6cb;font-size:1.35rem;font-weight:300;line-height:1;transition:color .14s,transform .14s}
.boruto-page .an-item:hover .an-chev,.boruto-page .an-item:focus-visible .an-chev{color:var(--boruto);transform:translateX(3px)}
/* ② 黒地白抜きの考察見出し（「みんなの感想」.tl-head と同一トークン・アイコン無しで対等化）。ティザーのジャンプ先。 */
.boruto-page .an-head{display:flex;align-items:center;gap:.7rem;margin:0 0 .8rem}
.boruto-page .an-head h2{font-size:1.05rem;font-weight:900;display:inline-flex;align-items:center;color:#fff;line-height:1.3;background:var(--ink);padding:.34rem .9rem;margin:0}
.boruto-page .an-head .n{margin-left:auto;font-size:.74rem;color:var(--boruto-link);font-weight:700}
.boruto-page .an-head:focus{outline:none}
.boruto-page .an-head:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:3px;border-radius:2px}
/* ── モバイル限定タブ（感想／考察）。PC（≥821px）は非表示＝従来の 2 カラム。旧ティザーの役割を継ぐ。 ── */
.boruto-page .bt-tabs{display:none}
@media(max-width:820px){
  /* ヒーローのタグラインと同じ長方形セグメント（中央）＝シアン地＋砂テクスチャ＋黒字。選択側をヒーローと同じ4px黒枠で囲う（塗りなし）。枠は選択時に時計回りで描画（SVG stroke-dashoffset）。 */
  .boruto-page .bt-tabs{position:relative;overflow:hidden;display:flex;width:fit-content;max-width:100%;margin:0 auto 1.2rem;gap:.5rem;background:var(--boruto);padding:.5rem;border-radius:0}
  .boruto-page .bt-tab-grain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
  .boruto-page .bt-tab{position:relative;z-index:1;appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.45rem 1.7rem;border-radius:0;font:inherit;font-size:.95rem;font-weight:800;color:#000;background:transparent}
  .boruto-page .bt-tab > span{position:relative;z-index:1}
  .boruto-page .bt-tab-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
  /* 🔴【V-20是正・2026-08-17・実測で確定】viewBox 100x100 を preserveAspectRatio="none" で横長ボタンへ
     非均等倍率に引き伸ばしつつ vector-effect="non-scaling-stroke" を効かせていたため、pathLength="100"
     正規化に基づく dasharray:100 が実際の描画に対して短すぎ、選択中でも枠が全周閉じなかった（監査窓
     `-44` の仮説を本番で実測して確定）。⚠️ `stroke-dasharray` を一律の大きい固定値（1000等）に上げるだけ
     の直しは採らない＝実際に必要な移動量（周長）に対して可動域が何倍も過大になり、遷移時間 .55s の
     うち<u>ごく最初だけ</u>で見た目の描画が終わってしまう（時計回りに描かれる様子が一瞬で終わる）。
     ⇒ `BorutoChapterView.astro` の `sizeTabFrame()` が実測pxで viewBox/パス座標を作り直し
     （preserveAspectRatio の非均等な引き伸ばし自体を起こさない）、周長を `--bt-frame-len` に入れる。
     JS未実行時のフォールバック＝400（旧 pathLength=100 正規化で「4倍の余裕」となり全周は閉じる。
     JS実行後に実測値へ置き換わる）。`non-scaling-stroke` はそのまま残す（外すと縦横で線の太さが
     不揃いになる）。dashoffset も同じ変数を使うことで「隠す＝dashoffset==dasharray」を保つ
     （非選択タブが出っぱなしになる罠を回避）。 */
  .boruto-page .bt-tab-frame path{fill:none;stroke:#000;stroke-width:4;stroke-linejoin:miter;stroke-linecap:butt;stroke-dasharray:var(--bt-frame-len, 400);stroke-dashoffset:var(--bt-frame-len, 400);transition:stroke-dashoffset .55s ease}
  .boruto-page .bt-tab[aria-selected="true"] .bt-tab-frame path{stroke-dashoffset:0}
  .boruto-page .bt-tab:focus-visible{outline:2px solid #000;outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.boruto-page .bt-tab-frame path{transition:none}}
  /* 選択中のタブのパネルだけ表示（col-main=感想／col-aside=考察） */
  .boruto-page .cols{margin-top:0}
  .boruto-page .cols[data-tab="kansou"] .col-aside{display:none}
  .boruto-page .cols[data-tab="kosatsu"] .col-main{display:none}
  .boruto-page .cols[data-tab] .col-aside{margin-top:0}
  /* 「この回の考察」見出しはタブが役割を兼ねるためモバイルでは隠す */
  .boruto-page .an-head{display:none}
}
.boruto-page .avatar.xs{width:20px;height:20px;font-size:.66rem;flex:none}
.boruto-page .an-empty{font-size:.78rem;color:var(--ink-60);padding:.3rem 0}
/* 考察を書く＝引き算CTA（細枠・直角・塗りなし）。リストの静けさを壊さない控えめな導線。 */
.boruto-page .write-an{margin-top:1.3rem;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;font-size:.88rem;padding:.72rem .9rem;background:transparent;color:var(--boruto-deep);border:1.5px solid var(--boruto-deep);border-radius:0;box-shadow:none}
.boruto-page .write-an:hover{background:var(--boruto-soft);color:var(--boruto-dark)}
/* 考察の横断一覧ページ（/boruto/analyses/）。
   ⚠️ 行は client の JS が生成するため Astro の scoped style は当たらない（scoped は
   コンポーネントのテンプレートが出した要素にしか付かない）。ここ（global.css）に置くのが正。
   配色は話数ページ右カラムの .an-item と同じ明色テーマ（本文エリアは白系の地）。 */
.boruto-page .an-index-lead{max-width:760px;margin:0 auto 1.1rem;padding:0 1rem;color:var(--ink-60);font-size:.88rem;line-height:1.8}
.boruto-page .an-index-list{max-width:760px;margin:0 auto;padding:0 1rem;border-top:1px solid #e4e6e9}
.boruto-page .an-index-item{display:flex;align-items:flex-start;gap:.7rem;padding:.95rem .15rem;border-bottom:1px solid #e4e6e9;text-decoration:none;color:inherit;transition:background .14s}
.boruto-page .an-index-item:hover,.boruto-page .an-index-item:focus-visible{background:#eaf6fb;outline:none}
.boruto-page .an-index-item:active{background:#ddeffa}
.boruto-page .an-index-item .avatar.xs{width:28px;height:28px;font-size:.72rem;flex:none;margin-top:.15rem}
.boruto-page .an-index-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:.22rem}
.boruto-page .an-index-chap{font-size:.74rem;font-weight:700;color:var(--boruto-link)}
.boruto-page .an-index-title{font-size:.98rem;font-weight:700;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boruto-page .an-index-excerpt{font-size:.82rem;line-height:1.7;color:var(--ink-60);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boruto-page .an-index-meta{font-size:.72rem;color:var(--ink-60)}
.boruto-page .an-index-item .an-chev{margin-left:auto;flex:none;align-self:center;color:#c2c6cb;font-size:1.35rem;font-weight:300;line-height:1;transition:color .14s,transform .14s}
.boruto-page .an-index-item:hover .an-chev,.boruto-page .an-index-item:focus-visible .an-chev{color:var(--boruto);transform:translateX(3px)}
.boruto-page .an-index-foot{max-width:760px;margin:1.6rem auto 0;padding:0 1rem}
@media (max-width:560px){.boruto-page .an-index-item{padding:.85rem .1rem}}
/* 話数をまたいだ考察一覧への回遊リンク（「考察を書く」の下・控えめなテキストリンク） */
.boruto-page .an-all-link{display:block;margin-top:.7rem;text-align:center;font-size:.82rem;font-weight:700;color:var(--boruto-link);text-decoration:none}
.boruto-page .an-all-link:hover{text-decoration:underline}
.boruto-page .write-an svg{width:16px;height:16px}

/* 考察 記事ビュー（B′＝ヘッダーと話数見出しを残し、その下に“普通の画面”として表示。オーバーレイにしない）。
   開いている間は同じ wrap 内のタイムライン等だけを畳む（下の body[data-an-view] ルール）。 */
.boruto-page .an-article-screen{scroll-margin-top:84px}
.boruto-page .an-article-screen[hidden]{display:none}
/* 記事ビュー内側の二重 wrap を無効化＝外側 .wrap[data-chapter-id] の余白だけ効かせる（モバイルの過剰インデント防止） */
.boruto-page .an-article-screen > .wrap{max-width:none;margin:0;padding:0}
/* 本文は中央寄せの“記事カード”（白・枠・影＝感想カードと同じ意匠）。PC で左寄り＆右余白だらけに崩れて見えた問題を解消。 */
.boruto-page .article{max-width:720px;margin:1.4rem auto 0;background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:1.6rem 1.5rem 2.4rem;box-shadow:var(--shadow-sm)}
.boruto-page .article .back{font-size:.82rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;color:var(--boruto-link)}
.boruto-page .article .back svg{width:15px;height:15px}
.boruto-page .article .an-art-ctx{font-size:.76rem;color:var(--boruto-link);margin-top:.9rem;font-weight:700}
.boruto-page .article h1{font-size:1.5rem;line-height:1.45;margin:.6rem 0 .8rem;color:var(--ink)}
.boruto-page .article .by{display:flex;align-items:center;gap:.45rem;color:var(--ink-60);font-size:.78rem;margin-bottom:1.3rem;flex-wrap:wrap}
.boruto-page .article .by .xh{color:var(--boruto-link)}
.boruto-page .article .by a.link{color:var(--ink);font-weight:700;text-decoration:none}
.boruto-page .article .by a.link:hover{color:var(--boruto-deep);text-decoration:underline}
.boruto-page .article .body{font-size:1rem;color:var(--ink-80);line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
.boruto-page .bt-art-foot{display:flex;gap:1.3rem;margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--ink-20);font-size:.85rem;color:var(--ink-80);flex-wrap:wrap}
.boruto-page .bt-art-foot a{color:var(--ink-80);display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
.boruto-page .bt-art-foot a.on{color:var(--boruto-deep)}
.boruto-page .bt-art-foot a.readonly{cursor:default;opacity:.7}
.boruto-page .bt-art-foot a.rep{margin-left:auto;color:var(--ink-60)}
.boruto-page .bt-art-foot svg{width:16px;height:16px}
/* 考察コメント欄（記事末尾・感想と同じコメント基盤 .bt-thread/.bt-reply を再利用） */
.boruto-page .an-comments{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ink-20)}
.boruto-page .an-cmt-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
.boruto-page .an-cmt-head h2{font-size:1.05rem;font-weight:900;color:var(--ink);margin:0}
.boruto-page .an-cmt-head .an-cmt-n{font-size:.78rem;font-weight:700;color:var(--ink-60)}
.boruto-page .an-comments .bt-thread{margin-top:0;padding-top:0;border-top:none}
/* 考察記事末尾の「戻る」ボタン（読了後の導線・ピル）。冒頭の .back は離脱用の軽いテキスト。 */
.boruto-page .an-back-bottom{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.2rem;color:var(--boruto-deep);font-weight:800;font-size:.88rem;border:1.5px solid var(--boruto-deep);border-radius:999px;padding:.55rem 1.2rem;text-decoration:none;cursor:pointer}
.boruto-page .an-back-bottom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.boruto-page .an-back-bottom:hover{background:var(--boruto-soft)}
.boruto-page .an-back-bottom:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* 考察 投稿モーダル */
.boruto-page .an-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem}
.boruto-page .an-modal[hidden]{display:none}
.boruto-page .an-modal-bd{position:absolute;inset:0;background:rgba(2,24,36,.55)}
.boruto-page .an-modal-card{position:relative;width:100%;max-width:680px;max-height:90vh;overflow:auto}
.boruto-page .an-modal-card .an-title{width:100%;box-sizing:border-box;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.6rem .7rem;font:inherit;font-size:1rem;font-weight:700;background:#fff;margin-bottom:.55rem}
.boruto-page .an-modal-card .an-title:focus{outline:none;border-color:var(--boruto-deep);box-shadow:0 0 0 3px var(--boruto-soft)}
.boruto-page .an-modal-card textarea{min-height:240px}
.boruto-page .an-modal-btns{display:inline-flex;gap:.5rem}
body[data-an-modal="1"]{overflow:hidden}
/* 記事ビュー表示中は、同じ wrap 内のタイムライン・関連セクションだけを畳んで“記事だけ”の画面にする
   （サイトヘッダーと話数ヒーローは wrap の外なので残る＝B′。ヘッダーを隠す旧ハックは撤去）。 */
body[data-an-view="1"] .wrap[data-chapter-id] > *:not(.an-article-screen){display:none}

/* 解禁前カウントダウン */
.boruto-page .countdown{background:linear-gradient(135deg,var(--boruto-dark),var(--boruto-ink));color:#fff;border-radius:var(--radius-md);padding:1.4rem;text-align:center;margin-top:1.2rem}
.boruto-page .countdown .lbl{font-size:.8rem;color:var(--boruto-soft);letter-spacing:.06em;display:inline-flex;align-items:center;gap:.4rem}
.boruto-page .countdown .lbl svg{width:16px;height:16px}
.boruto-page .countdown .time{font-size:2.4rem;font-weight:900;letter-spacing:.04em;margin:.3rem 0}
.boruto-page .countdown .hint{font-size:.78rem;color:rgba(255,255,255,.82)}
.boruto-page .locked .composer{filter:grayscale(.5) opacity(.5);pointer-events:none}

/* 感想カード（コンテンツ＝白・軽い） */
.boruto-page .post{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:.9rem 1.1rem;margin-bottom:.7rem;box-shadow:var(--shadow-sm)}
/* .fresh = 自分が投稿した直後だけ一瞬光らせる用途（控えめな淡い縁＋ごく薄い影） */
.boruto-page .post.fresh{border-color:var(--boruto-soft);box-shadow:0 0 0 2px rgba(0,163,214,.10)}
.boruto-page .post .top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.boruto-page .post .name{font-weight:700;font-size:.88rem}
/* 公開プロフィールを持つ投稿者は名前をリンク化（authorSlug） */
.boruto-page .post a.name{color:inherit;text-decoration:none}
.boruto-page .post a.name:hover{color:var(--boruto-deep);text-decoration:underline}
.boruto-page .post .xh{font-size:.74rem;color:var(--boruto-link)}
.boruto-page .post .time{margin-left:auto;font-size:.72rem;color:var(--ink-40)}
.boruto-page .post .body{font-size:.94rem;color:var(--ink-80);white-space:pre-wrap;overflow-wrap:anywhere}
.boruto-page .tl-empty{color:var(--ink-60);font-size:.88rem;padding:.6rem 0}

/* 返信スレッド（Phase 4・コメント💬＝カード下にインライン開閉） */
.boruto-page .bt-thread{margin-top:.75rem;padding-top:.7rem;border-top:1px dashed var(--ink-20)}
.boruto-page .bt-thread-list{display:flex;flex-direction:column;gap:.6rem}
.boruto-page .bt-reply{display:flex;gap:.5rem;align-items:flex-start}
.boruto-page .bt-reply-av{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--boruto-ink);font-size:.7rem;flex:none}
.boruto-page .bt-reply-main{flex:1;min-width:0}
.boruto-page .bt-reply-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem}
.boruto-page .bt-reply-name{font-weight:700;font-size:.8rem}
.boruto-page .bt-reply-xh{font-size:.7rem;color:var(--boruto-link)}
.boruto-page .bt-reply-time{margin-left:auto;font-size:.68rem;color:var(--ink-40)}
.boruto-page .bt-reply-body{font-size:.86rem;color:var(--ink-80);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.boruto-page .bt-thread-empty,.boruto-page .bt-thread-note{color:var(--ink-60);font-size:.82rem;padding:.3rem 0}
.boruto-page .bt-thread-more{margin-top:.5rem;align-self:flex-start;font-size:.8rem;padding:.35rem .9rem}
.boruto-page .bt-thread-more[hidden]{display:none}
.boruto-page .bt-thread-composer{margin-top:.7rem;display:flex;flex-direction:column;gap:.4rem}
.boruto-page .bt-reply-input{width:100%;box-sizing:border-box;min-height:60px;resize:vertical;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:.5rem .65rem;font:inherit;font-size:var(--fs-body);line-height:1.5}
.boruto-page .bt-reply-input:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
.boruto-page .bt-reply-actions{display:flex;align-items:center;gap:.7rem;justify-content:flex-end}
.boruto-page .bt-reply-count{font-size:.72rem;color:var(--ink-40);margin-right:auto}

/* ・・・ メニュー（自分の投稿/コメントの 編集・削除） */
.boruto-page .bt-kebab-wrap{position:relative;display:inline-flex;margin-left:.1rem}
.boruto-page .bt-kebab{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--ink-40);cursor:pointer;border-radius:6px;line-height:0}
.boruto-page .bt-kebab svg{width:18px;height:18px;fill:currentColor}
.boruto-page .bt-kebab:hover{color:var(--ink-80);background:var(--boruto-soft)}
.boruto-page .bt-kebab:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
.boruto-page .bt-kebab-menu{position:absolute;top:calc(100% + 2px);right:0;z-index:30;min-width:124px;background:#fff;border:1px solid var(--ink-20);border-radius:10px;box-shadow:var(--shadow-md);padding:.25rem;display:flex;flex-direction:column}
.boruto-page .bt-kebab-menu[hidden]{display:none}
.boruto-page .bt-kebab-item{text-align:left;padding:.45rem .6rem;border:0;background:none;font:inherit;font-size:.85rem;color:var(--ink-80);cursor:pointer;border-radius:6px;white-space:nowrap}
.boruto-page .bt-kebab-item:hover{background:var(--boruto-soft)}
.boruto-page .bt-kebab-item:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:-2px}
.boruto-page .bt-kebab-item:last-child{color:#c0392b}
.boruto-page[data-bt-select] .bt-kebab-wrap{pointer-events:none;opacity:.4}

/* インライン編集（投稿/コメント本文） */
.boruto-page .bt-inline-edit{margin:.4rem 0}
.boruto-page .bt-inline-ta{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:.5rem .65rem;font:inherit;font-size:.9rem;line-height:1.6}
.boruto-page .bt-inline-ta:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
.boruto-page .bt-inline-actions{display:flex;align-items:center;gap:.6rem;justify-content:flex-end;margin-top:.4rem}
.boruto-page .bt-inline-count{font-size:.72rem;color:var(--ink-40);margin-right:auto}
/* キャンセル左・保存右。grid 1fr×2 で等幅（広い方＝キャンセル基準に保存も揃う） */
.boruto-page .bt-inline-btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}
.boruto-page .bt-inline-btns .btn{min-width:0;width:100%}

/* 長文の感想の折り畳み（5行表示＝6行目から折る・端末ごとの実描画で判定＋「さらに表示」シアン） */
.boruto-page .post .body.bt-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.boruto-page .bt-more{display:inline-block;margin-top:.3rem;padding:0;border:0;background:none;color:var(--boruto-link);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.boruto-page .bt-more:hover{text-decoration:underline}
.boruto-page .bt-more:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* M3: 原文トグル（X 風・本文直下）。設計書 §9: タップ領域 44x44px・訳文注記＋ボタン。 */
.boruto-page .bt-orig-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.35rem;min-height:44px}
.boruto-page .bt-orig-note,.boruto-page .bt-orig-fallback-badge{font-size:.78rem;color:var(--ink-40)}
/* 🔴 【B・UAT第7便・2026-08-21】訳が間に合わなかった投稿の小さな札。⚠️ 案C＝小さな札。長い説明文にしない（椿さん明示）。 */
.boruto-page .bt-orig-fallback-badge{display:block;margin-top:.35rem}
.boruto-page .bt-orig-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;border:0;background:none;color:var(--boruto-link);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.boruto-page .bt-orig-btn:hover{text-decoration:underline}
.boruto-page .bt-orig-btn:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}


/* ページ下部「先月の感想」ナビ */
.boruto-page .chap-nav{margin:2rem 0 .5rem;display:flex;justify-content:center}
.boruto-page .chap-nav-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--boruto-deep);font-weight:700;font-size:.9rem;text-decoration:none;padding:.6rem 1.2rem;border:1.5px solid rgba(2,24,36,.18);border-radius:999px}
.boruto-page .chap-nav-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.boruto-page .chap-nav-link:hover{border-color:var(--boruto-deep);background:var(--boruto-soft)}
.boruto-page .chap-nav-link:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* 話数一覧 */
.boruto-page .list-section-head{max-width:880px;margin:1.8rem auto .8rem}
/* 「話数を選ぶ」＝黒抜き四角（owner 2026-06-07） */
.boruto-page .list-section-head span{display:inline-flex;align-items:center;font-weight:900;font-size:1.05rem;color:#fff;background:var(--ink);padding:.34rem .9rem;line-height:1.3}
/* 話数カード＝メインサイト .mp の四角カード文法に合わせる（owner 2026-06-07）。
   濃い枠＋ハードオフセット影＋hoverリフト。is-latest は左辺だけシアン差し色を維持。 */
/* 話数カードのラッパ（JS が D1 で中身を差し替える）＝レイアウトに影響しないよう透過 */
.boruto-page .chap-list{display:contents}
.boruto-page .chap-card{display:flex;align-items:center;gap:1.2rem;background:#fff;border:2.5px solid var(--ink);border-radius:0;padding:1.1rem 1.3rem;margin-bottom:1rem;box-shadow:6px 6px 0 var(--ink);max-width:880px;margin-left:auto;margin-right:auto;transition:transform .2s cubic-bezier(.5,1.4,.4,1),box-shadow .2s ease}
/* 🔴【V-18・2026-08-17 PM裁定で撤去】テスト環境の朱色斜線の目印（is-testenv-dummy）は
   全廃した（椿さん逐語「本番さながらの設定で見せてください」）。環境の見分けは
   BaseLayout側の <title> 接頭辞（[TEST] ）だけに一本化＝画面の見た目は本番と同一にする。
   このCSSブロックは使用箇所ごと削除済み（旧コミットで class を付与していた4箇所も撤去）。 */
.boruto-page a.chap-card{text-decoration:none;color:inherit}
.boruto-page a.chap-card:hover{border-color:var(--boruto);box-shadow:10px 10px 0 var(--ink);transform:translate(-2px,-2px)}
.boruto-page .chap-card.is-latest{border-left:6px solid var(--boruto-deep)}
.boruto-page .chap-card .no{font-size:1.18rem;font-weight:800;color:var(--boruto-deep);min-width:84px;text-align:center;line-height:1.3}
.boruto-page .chap-card .info{flex:1;min-width:0}
.boruto-page .chap-card .info .t{font-weight:700;font-size:1rem}
.boruto-page .chap-card .info .d{font-size:.78rem;color:var(--ink-60);margin-top:.2rem}
.boruto-page .chap-card .cnt{text-align:center;font-size:.76rem;color:var(--ink-80);min-width:60px}
.boruto-page .chap-card .cnt b{display:block;font-size:1.3rem;color:var(--ink);font-weight:800}
/* 話数カードのモバイル対応（小画面で3カラムが潰れる/影が切れるのを防ぐ・モバイルレビュー 2026-06-07） */
@media (max-width: 560px) {
  .boruto-page .wrap { padding: 1.2rem 1rem 3rem; }
  .boruto-page .chap-card { gap: 0.7rem; padding: 0.9rem 0.95rem; box-shadow: 4px 4px 0 var(--ink); }
  .boruto-page a.chap-card:hover { box-shadow: 6px 6px 0 var(--ink); }
  .boruto-page .chap-card .no { min-width: 60px; font-size: 1.05rem; }
  .boruto-page .chap-card .cnt { min-width: 46px; }
  .boruto-page .chap-card .cnt b { font-size: 1.15rem; }
}
.boruto-page .pill{display:inline-block;font-size:.66rem;font-weight:700;padding:.12rem .55rem;border-radius:999px;vertical-align:middle}
.boruto-page .pill.latest{background:var(--boruto-deep);color:#fff}
.boruto-page .pill.soon{background:var(--ink-20);color:var(--ink-80)}

/* ログイン */
.boruto-page .loginbox{max-width:420px;margin:2.5rem auto;background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;text-align:center;box-shadow:var(--shadow-lg)}
.boruto-page .loginbox h1{font-size:1.25rem}
.boruto-page .loginbox p{font-size:.85rem;color:var(--ink-80);margin:.5rem 0 1.5rem}
.boruto-page .sso{display:flex;flex-direction:column;gap:.65rem}
.boruto-page .sso a,.boruto-page .sso button{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.8rem;border-radius:var(--radius);border:1.5px solid var(--ink-20);background:#fff;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink);text-decoration:none;box-sizing:border-box}
.boruto-page .sso .discord{background:#5865F2;color:#fff;border-color:#5865F2}
.boruto-page .sso a[aria-disabled="true"]{opacity:.5;pointer-events:none}
.boruto-page .sso svg{width:20px;height:20px}
.boruto-page .login-turnstile{display:flex;justify-content:center;margin:.2rem 0}
.boruto-page .loginbox .fine{font-size:.74rem;color:var(--ink-60);margin-top:1.1rem;line-height:1.7}

/* マイページ */
.boruto-page .profile{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;gap:1.1rem;align-items:flex-start;max-width:880px;margin:0 auto}
.boruto-page .profile .pinfo h1{font-size:1.3rem}
.boruto-page .profile .pinfo .xh{color:var(--boruto-link);font-size:.85rem;display:inline-flex;align-items:center;gap:.3rem}
.boruto-page .profile .pinfo .xh svg{width:14px;height:14px}
.boruto-page .profile .pinfo .bio{font-size:.85rem;color:var(--ink-80);margin-top:.25rem}
/* 自己紹介（bio）上部インライン編集: 表示=テキスト/プレースホルダ＋hoverで編集ヒント, 編集=textarea＋保存 */
.boruto-page .profile .pinfo .pbio{margin-top:.4rem;font-size:.85rem}
.boruto-page .pbio-view{display:inline-flex;align-items:baseline;gap:.5rem;max-width:100%;background:none;border:none;padding:.15rem .25rem;margin:-.15rem -.25rem;font:inherit;font-size:.85rem;color:var(--ink-80);text-align:left;line-height:1.6;cursor:pointer;border-radius:6px}
.boruto-page .pbio-view:hover{background:var(--boruto-soft)}
.boruto-page .pbio-view:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
.boruto-page .pbio-view:hover .pbio-pen,.boruto-page .pbio-view:focus-visible .pbio-pen{opacity:1}
.boruto-page .pbio-text{white-space:pre-wrap;overflow-wrap:anywhere}
.boruto-page .pbio-placeholder{color:var(--boruto-link)}
.boruto-page .pbio-pen{flex:none;font-size:.72rem;color:var(--boruto-link);opacity:.55;transition:opacity .15s}
.boruto-page .pbio-edit{margin-top:.45rem}
.boruto-page .pbio-input{width:100%;box-sizing:border-box;font:inherit;font-size:.85rem;line-height:1.6;padding:.5rem .6rem;border:1px solid var(--ink-20);border-radius:8px;background:#fff;color:var(--ink);resize:vertical}
.boruto-page .pbio-input:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
.boruto-page .pbio-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.45rem}
.boruto-page .pbio-count{font-size:.72rem;color:var(--ink-60)}
.boruto-page .pbio-btns{display:inline-flex;gap:.4rem}
.boruto-page .pbio-btns .bt-mp-btn{min-width:84px;min-height:34px}
.boruto-page .profile .edit{margin-left:auto;align-self:flex-start}
.boruto-page .mypage{max-width:880px;margin:0 auto}
.boruto-page .mp-tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--ink-20);margin:1.5rem 0 1rem;font-size:.88rem}
.boruto-page .mp-tabs button{padding:.5rem 0;color:var(--ink-60);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font:inherit}
.boruto-page .mp-tabs button.on{color:var(--ink);font-weight:700;border-color:var(--boruto-deep)}
.boruto-page .mp-post{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:.6rem;font-size:.9rem}
.boruto-page .mp-post .mp-del{float:right;font-size:.74rem;color:var(--ink-60);cursor:pointer;background:none;border:none;font:inherit}
.boruto-page .mp-post .meta{font-size:.74rem;color:var(--ink-60);margin-bottom:.3rem}
.boruto-page .mp-post .meta a{color:var(--boruto-link)}
/* W-18是正・2026-08-19(PM裁定): 「自分の投稿履歴」統合時系列リスト。1行=種別バッジ+見出し+日付+リンク（軽量形・カードにしない）。BORUTO感想の行にだけ削除ボタン(PM裁定③) */
.boruto-page .mp-tl-list{border-top:1px solid var(--ink-20)}
.boruto-page .mp-tl-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--ink-20)}
.boruto-page .mp-tl-link{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
.boruto-page .mp-tl-badge{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;background:var(--ink-10,#f0f0f0);color:var(--ink-60)}
.boruto-page .mp-tl-badge--comment,.boruto-page .mp-tl-badge--analysis{background:#fde9d9;color:#a15c1e}
.boruto-page .mp-tl-badge--story{background:#e3edfb;color:#2f5fa8}
.boruto-page .mp-tl-badge--place{background:#e2f3e6;color:#2f7d4a}
.boruto-page .mp-tl-badge--clip{background:#f3e6f7;color:#7a3ea1}
.boruto-page .mp-tl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.boruto-page .mp-tl-title{font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boruto-page .mp-tl-date{font-size:.72rem;color:var(--ink-60)}
.boruto-page .mp-tl-del{flex:0 0 auto;font-size:.74rem;color:var(--ink-60);cursor:pointer;background:none;border:none;font:inherit}
.boruto-page .mp-tl-more{display:block;width:100%;margin-top:.8rem;padding:.6rem;font-size:.85rem;color:var(--boruto-link);background:none;border:1px solid var(--ink-20);border-radius:var(--radius);cursor:pointer;font:inherit}
.boruto-page .mp-panel{display:none}
.boruto-page .mp-panel.show{display:block}
/* W-18是正・2026-08-19(PM指定): 設定/活動歴/自分の投稿履歴タブの最上段に大見出しを追加(プロフィールタブは対象外)。--fs-pageは「ページの大見出し」として既に定義済みのトークンをそのまま使う */
.boruto-page .acc2-page-head{font-size:var(--fs-page);font-weight:900;color:var(--ink);margin:0 0 var(--space-md)}
@media (max-width:720px){.boruto-page .acc2-page-head{font-size:24px}}
.boruto-page .settings-card{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.boruto-page .set-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ink-20);font-size:.88rem}
.boruto-page .set-row:last-child{border-bottom:none}
.boruto-page .set-k{color:var(--ink-80);font-weight:700}
.boruto-page .set-v{color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.boruto-page .set-v input[type="text"],.boruto-page .set-v textarea{font:inherit;padding:.35rem .5rem;border:1px solid var(--ink-20);border-radius:6px;background:#fff;color:var(--ink)}
.boruto-page .set-row.danger .set-k{color:var(--vermilion,#c0392b)}
.boruto-page .toggle{display:inline-flex;align-items:center;background:var(--ink-20);color:var(--ink-80);font-size:.7rem;font-weight:800;padding:.15rem .6rem;border-radius:999px;border:none;cursor:pointer}
.boruto-page .toggle[aria-pressed="true"]{background:var(--boruto-deep);color:#fff}
/* トグルスイッチ（引き算デザイン・控えめ）: OFF=薄グレーのトラック / ON=シアン+ノブ右 */
.boruto-page .bt-switch{flex:none;width:40px;height:22px;border-radius:999px;border:none;background:var(--ink-20);position:relative;cursor:pointer;padding:0;transition:background .15s}
.boruto-page .bt-switch::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:transform .15s}
.boruto-page .bt-switch[aria-checked="true"]{background:var(--boruto-deep)}
.boruto-page .bt-switch[aria-checked="true"]::before{transform:translateX(18px)}
.boruto-page .bt-switch:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
/* マイページの操作ボタン（編集/変更を保存/退会する/キャンセル）は高さ38px・幅を揃える＝ヘッダー「日本語」相当のスリムさ */
.boruto-page .bt-mp-btn{min-height:38px;min-width:104px;justify-content:center;font-size:.8rem}
/* プロフィール: 長い表示名でも崩れないよう pinfo を縮小可能＋折返し（レスポンシブ） */
.boruto-page .profile .pinfo{flex:1;min-width:0;overflow-wrap:anywhere}
.boruto-page .profile .pname{overflow-wrap:anywhere}
/* 退会カードは設定カードと分離（間隔） */
.boruto-page .bt-leave-card{margin-top:1rem}
@media (max-width:600px){
  /* モバイル: 編集ボタンがカードからはみ出さないよう折返し＝avatar+情報の下に右寄せで回す */
  .boruto-page .profile{flex-wrap:wrap}
  .boruto-page .profile .edit{margin-left:auto;margin-top:.2rem}
  /* 退会行のラベル＋ボタン2つも窮屈なら折返す */
  .boruto-page .bt-leave-card .set-row.danger{flex-wrap:wrap;gap:.6rem}
  /* ④ 自己紹介の読み書きを楽に: pinfo を全幅化（アバター右で潰れない）＋編集枠を高く。
     pinfo を flex-basis:100% にすると avatar の下に全幅で回り、bio の表示・編集が画面幅いっぱいになる（DOM順=Tab順は維持）。 */
  .boruto-page .profile .pinfo{flex-basis:100%}
  .boruto-page .pbio-input{min-height:5.5em}
}
.boruto-page .section-note{background:var(--boruto-soft);border-left:3px solid var(--boruto-deep);border-radius:6px;padding:.7rem .9rem;font-size:.8rem;color:var(--ink-80);margin:1.1rem auto 0;max-width:880px}

/* ③ 設定画面の再設計: 墨の日本語小見出しで章立て・色付きコールアウト(section-note)は account 内で廃止し静かな補足文へ。 */
.boruto-page .set2{max-width:var(--max-width);margin:0 auto}/* W-17是正・2026-08-19(PM指定): 880px固定は#229で直した頭打ちバグの生き残り。プロフィールタブの本文面(.mp2-inner)と同じ式(max-width:var(--max-width)+margin:0 auto)に揃え、親(.mp-panel、既にmax-width:var(--max-width)で開1140/閉1280)にそのまま追従させる */
.boruto-page .set-group{margin-bottom:1.9rem}
.boruto-page .set-group:last-child{margin-bottom:0}
.boruto-page .set-eyebrow{font-size:.96rem;font-weight:900;letter-spacing:0;color:var(--ink);margin:0 0 .65rem;padding:0 0 .35rem;position:relative}
.boruto-page .set-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:1.8rem;height:3px;background:var(--fire);border-radius:2px}
.boruto-page .set-list{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.boruto-page .set2-row{padding:.95rem 1.1rem;border-bottom:1px solid var(--ink-20)}
.boruto-page .set2-row:last-child{border-bottom:none}
.boruto-page .set2-line{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap}
.boruto-page .set2-k{font-weight:700;font-size:.9rem;color:var(--ink)}
.boruto-page .set2-line .set-v{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.boruto-page .set2-line .set-v input[type="text"]{font:inherit;padding:.4rem .55rem;border:1px solid var(--ink-20);border-radius:8px;background:#fff;color:var(--ink);min-width:160px}
.boruto-page .set2-help{font-size:.82rem;color:var(--ink-80);margin:.4rem 0 0;line-height:1.65}
/* F-15（UAT第6便）：設定タブの言語一覧。.set2-row を <a> で使うため display:flex を明示（既定は inline）。 */
.boruto-page .set2-lang-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-decoration:none;color:inherit;transition:background-color .15s ease;min-height:44px;box-sizing:border-box}
.boruto-page .set2-lang-row:hover,.boruto-page .set2-lang-row:focus-visible{background:var(--scroll)}
.boruto-page .set2-lang-current{color:var(--fire)}
.boruto-page .set2-lang-current .set2-k{color:var(--fire)}
.boruto-page .set2-lang-check{color:var(--fire);flex-shrink:0}
/* 椿さん2回目「プルダウンで開いて選ぶ」＝<details>化。overflow解除は既存の .bt-leave-details と同じ理由（開いた中身をクリップしない）。 */
.boruto-page .set2-lang-dd.set-list{overflow:visible}
.boruto-page .set2-lang-dd-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.95rem 1.1rem;cursor:pointer;user-select:none;min-height:44px;box-sizing:border-box;border-radius:var(--radius-md)}
.boruto-page .set2-lang-dd-summary::-webkit-details-marker{display:none}
.boruto-page .set2-lang-dd-summary:hover,.boruto-page .set2-lang-dd-summary:focus-visible{background:var(--scroll)}
.boruto-page .set2-lang-dd-caret{color:var(--ink-40,rgba(26,26,26,.4));flex-shrink:0;transition:transform .15s}
.boruto-page .set2-lang-dd[open]>.set2-lang-dd-summary{border-bottom:1px solid var(--ink-20);border-radius:var(--radius-md) var(--radius-md) 0 0}
.boruto-page .set2-lang-dd[open]>.set2-lang-dd-summary .set2-lang-dd-caret{transform:rotate(180deg)}
.boruto-page .set2-sub{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 0;font-size:.82rem}
.boruto-page .set2-sub-k{color:var(--ink-60);font-weight:700;font-size:.74rem;flex-shrink:0}
.boruto-page .set2-url{color:var(--boruto-link);font-size:.82rem;word-break:break-all}
/* 移行の案内（WO-004 §9-6）。まだ一度も書いていない人にだけ出る1枚。
   ⚠️ .set2-sub は横並びなので、こちらは縦に積み直す（見出し→本文→ボタン）。
   🔴 押す的は44px以上（全画面の規約）。⚠️ 文言は仮なので、長さが変わっても崩れない形にする。 */
/* 🔴 ダークでも文字色を反転させない。地色をブランド色（アンバー）で固定しているので、
   本文色まで反転すると**明るい地に明るい文字**になって読めなくなる
   （[[feedback_dark_mode_rules]]「ブランド色の帯の上はライトのまま固定」）。⇒ 墨を直値で置く。 */
.boruto-page .set2-ready{display:block;margin:.7rem 0 0;padding:.8rem .9rem;border:1px solid #FF7601;border-radius:10px;background:#fff1de;color:#1a1a1a}
.boruto-page .set2-ready-t{margin:0;font-weight:700;font-size:.92rem;color:#1a1a1a}
.boruto-page .set2-ready-b{margin:.35rem 0 .7rem;font-size:.82rem;color:#1a1a1a;line-height:1.7}
/* 押す的は44px以上（全画面の規約）。文言が仮で長さが変わっても崩れないように。 */
.boruto-page .set2-ready .btn{min-height:44px;display:inline-flex;align-items:center}
.boruto-page .set-actions{display:flex;justify-content:flex-end;margin-top:.7rem}
.boruto-page .set2 .danger-k{color:var(--vermilion,#8b1f12)}/* 退会＝危険操作。既存 .set-row.danger と同じ深紅で統一（白地でAA可読）。 */
.boruto-page .bt-leave-details.set-list{overflow:visible}

/* a11y: スクリーンリーダー専用見出し（マイページの恒久 h1 など） */
.boruto-page .bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.boruto-page .profile .pinfo .pname{font-size:1.3rem;font-weight:900;color:var(--ink);margin:0}
/* マイページ「自分の感想」本文＝公開タイムラインと同じく改行・長文を保持 */
.boruto-page .mp-post .mp-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.2rem}
/* おしらせタブの未読バッジ（自ポストへのコメント通知数・Channel 1） */
.boruto-page .mp-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:.35rem;padding:0 .3rem;border-radius:999px;background:var(--accent,#E9451F);color:#fff;font-size:.66rem;font-weight:800;line-height:1;vertical-align:middle;font-variant-numeric:tabular-nums}
.boruto-page .mp-tab-badge[hidden]{display:none}
/* あなたへの通知リスト（Channel 1・PII非保管） */
.boruto-page .mp-my-notices{margin-bottom:1.5rem}
.boruto-page .mp-notif{background:#fff;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.5rem;font-size:.9rem}
.boruto-page .mp-notif.is-unread{border-left:3px solid var(--boruto-deep);background:var(--boruto-soft)}
.boruto-page .mp-notif-link{color:var(--ink);text-decoration:none;font-weight:700;display:block}
.boruto-page .mp-notif-link:hover{color:var(--boruto-deep);text-decoration:underline}
.boruto-page .mp-notif-time{display:block;font-size:.72rem;color:var(--ink-60);margin-top:.25rem}

/* マイページ 活用歴（あなたのナルボル・ファン史）。他者比較・競争語は出さない */
.boruto-page .mp-rank{background:var(--boruto-soft);border:1px solid rgba(2,24,36,.15);border-radius:var(--radius-md);padding:.9rem 1.1rem;margin-bottom:1rem}
.boruto-page .mp-rank-now{display:flex;align-items:center;gap:.6rem}
.boruto-page .mp-rank-label{font-weight:900;font-size:1.15rem;color:var(--boruto-deep)}
/* 共通徽章（仮 SVG・絵文字の代替）。ランク章は tier で少し大きく＝格上げ */
.boruto-page .insignia{display:block;flex:none}
.boruto-page .mp-rank-insignia{width:44px;height:44px}
.boruto-page .mp-rank-insignia[data-tier="3"]{width:48px;height:48px}
.boruto-page .mp-rank-insignia[data-tier="4"]{width:52px;height:52px}
.boruto-page .mp-rank-next{margin-top:.35rem;font-size:.82rem;color:var(--ink-60)}
.boruto-page .mp-stats{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1rem}
.boruto-page .mp-stat{display:flex;flex-direction:column;align-items:flex-start}
.boruto-page .mp-stat-n{font-size:1.4rem;font-weight:900;color:var(--boruto-deep);font-variant-numeric:tabular-nums;line-height:1.1}
.boruto-page .mp-stat-k{font-size:.78rem;color:var(--ink-60)}
.boruto-page .mp-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.boruto-page .mp-badge{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid var(--boruto-deep);border-radius:999px;padding:.3rem .8rem .3rem .4rem;font-size:.82rem;font-weight:700;color:var(--boruto-deep)}
.boruto-page .mp-badge-emblem{width:26px;height:26px}

/* ── 徽章 獲得演出（ジェットエンジン状の封印が1枚ずつ巻き取られて開く＋強いスクリーントーン）──
   boruto-timeline.js celebrate() が制御。金属ブレードが重なって円を成す封印→解除でブレードが1枚ずつ
   時間差で巻き取られて開く→徽章が重く着地→集中線フラッシュ＋墨の波紋。網点を強めに・毛筆の乾いた質感
   （SVG feTurbulence でエッジを荒らす）。モノクロ漫画に徽章だけがカラーで浮かぶ。タップ/Esc/Enter で次へ。 */
.bt-celebrate{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;color:#eaf2f5}
.bt-celebrate[hidden]{display:none}
.bt-celebrate-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 47%,rgba(5,26,38,.88),rgba(1,8,12,.97));opacity:0;transition:opacity .5s ease}
.bt-celebrate.on .bt-celebrate-backdrop{opacity:1}
/* 画面全体のスクリーントーン（網点・強め）。漫画の質感を前面に。 */
.bt-screentone{position:absolute;inset:0;background-image:radial-gradient(rgba(243,236,224,.95) 1.5px,transparent 2.1px);background-size:6px 6px;opacity:0;mix-blend-mode:screen;filter:url(#bt-tone-dry);-webkit-mask-image:radial-gradient(circle at 50% 47%,rgba(0,0,0,.55),rgba(0,0,0,.98) 85%);mask-image:radial-gradient(circle at 50% 47%,rgba(0,0,0,.55),rgba(0,0,0,.98) 85%)}
.bt-celebrate.on .bt-screentone{animation:bt-tone .9s ease-out .25s both,bt-tone-pulse .7s ease-out 1.7s}
/* 漫画サンバースト（集中線）＝添付PNG（黒線）を invert で白線化し screen で黒地を透過＝暗い演出上に白線。
   解除の“ドン”でフラッシュ。PNG は public/images/boruto-sunburst.png に配置。 */
.bt-focuslines{position:absolute;inset:0;opacity:0;z-index:2;background:url(/images/boruto-sunburst.png) center center / cover no-repeat;filter:invert(1);mix-blend-mode:screen}
.bt-celebrate.on .bt-focuslines{animation:bt-focus .95s ease-out 2.42s both}
/* 画面全体の重い柵扉（檻の扉）。中央のエンジン封印が錠＝扉中央は錠用に丸く開ける（柵を出さない）。
   解除＝錠（ブレード）が開く→両扉が真ん中から手前(viewer)に重く引いて開く（3D rotateY）。 */
.bt-gate{position:absolute;inset:0;z-index:1;perspective:1700px;perspective-origin:50% 46%}
.bt-gate-half{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;will-change:transform}
.bt-gate-half.left{left:0;transform-origin:left center;--seam:100%}
.bt-gate-half.right{right:0;transform-origin:right center;--seam:0%}
/* 縦格子（鉄柵）＝金属の縦グラデを、バー幅34/隙間20のマスクで抜き、さらに中央(継ぎ目)に錠用の丸穴を抜く。
   2枚のマスク（縦縞＋丸穴）を intersect 合成＝縞があり かつ 穴の外、だけ表示。穴の中＝柵なし。 */
.bt-gate-bars{position:absolute;inset:0;background:linear-gradient(180deg,#6e2a2a,#9c3a3a 28%,#5e2020 52%,#3c1414 78%,#1f0909);box-shadow:inset 0 0 60px rgba(0,0,0,.6);
  --hole:min(170px,44vw);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 34px,transparent 34px 54px),radial-gradient(circle at var(--seam) 50%,transparent var(--hole),#000 calc(var(--hole) + 1px));
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(90deg,#000 0 34px,transparent 34px 54px),radial-gradient(circle at var(--seam) 50%,transparent var(--hole),#000 calc(var(--hole) + 1px));
  mask-composite:intersect}
/* 上下の太い横梁＋鋲（マスクしない＝檻の枠） */
.bt-gate-beam{position:absolute;left:-2%;right:-2%;height:36px;background:radial-gradient(circle at 13px 50%,rgba(255,210,200,.45) 1.6px,rgba(0,0,0,.45) 2.6px,transparent 3.4px) 0 0/44px 100% repeat-x,linear-gradient(180deg,#b04a4a,#6e2626 50%,#270c0c);box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,180,170,.25)}
.bt-gate-beam.top{top:7%}
.bt-gate-beam.bot{bottom:7%}
/* 重い扉：継ぎ目(内側)が手前へ。外側を蝶番に rotateY（重々しいスロー・バウンドさせない）。 */
.bt-celebrate.on .bt-gate-half.left{animation:bt-gate-l 1.3s cubic-bezier(.62,0,.3,1) 1.6s both}
.bt-celebrate.on .bt-gate-half.right{animation:bt-gate-r 1.3s cubic-bezier(.62,0,.3,1) 1.6s both}
@keyframes bt-gate-l{0%{transform:rotateY(0)}8%{transform:rotateY(-3deg)}100%{transform:rotateY(-104deg)}}
@keyframes bt-gate-r{0%{transform:rotateY(0)}8%{transform:rotateY(3deg)}100%{transform:rotateY(104deg)}}
.bt-seal{position:relative;display:flex;flex-direction:column;align-items:center;width:min(440px,90vw);z-index:3}
.bt-seal-stage{position:relative;width:min(348px,90vw);height:min(348px,90vw);display:flex;align-items:center;justify-content:center;margin-bottom:0}
.bt-seal-stage>*{position:absolute;inset:0;margin:auto}
/* ジェットエンジン状の封印ブレード（毛筆の乾いた骨白・隣と重なる）。1枚ずつ時間差で巻き取られて開く */
.bt-seal-svg{width:100%;height:100%;opacity:0}
.bt-seal-ink .bt-blade{fill:url(#bt-steel);stroke:#23282a;stroke-width:.7;transform-box:view-box;transform-origin:100px 100px}
.bt-seal-ink .bt-seal-rim{fill:none;stroke:rgba(236,226,205,.85);stroke-width:2.6}
.bt-seal-ink .bt-seal-rim.inner{stroke-width:2}
.bt-celebrate.on .bt-seal-svg{animation:bt-fade-in .4s ease-out both}
.bt-celebrate.on .bt-seal-ink .bt-blade{animation:bt-blade-open .6s cubic-bezier(.55,0,.85,.4) forwards;animation-delay:calc(.45s + var(--i) * .04s)}
.bt-celebrate.on .bt-seal-ink .bt-seal-rim{animation:bt-fade-out .6s ease-out 1.75s both}
/* 墨の波紋（解除＝着地の瞬間にドンと広がる） */
.bt-seal-ripple{width:48%;height:48%;border-radius:50%;border:2.5px solid rgba(243,236,224,.55);opacity:0}
.bt-celebrate.on .bt-seal-ripple{animation:bt-ripple 1.2s cubic-bezier(.15,.6,.3,1) 2.15s both}
/* 徽章＝封印が開いた所へ重く落ちて決然と着地（モノクロ画面に唯一のカラー） */
.bt-scroll-emblem{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;z-index:3}
/* 徽章の背後に不透明な明るい台座（メダル土台）を縁の外までしっかり敷く＝背後の光が縁の真横に透ける
   白抜きを防ぎ、黒縁取りが「黒のまま（一覧と同じ）」読めるようにする。box-shadow spread で円の外周まで覆う。 */
.bt-celebrate-emblem{width:118px;height:118px;display:block;background:#f4efe6;border-radius:50%;box-shadow:0 0 0 6px #f4efe6,0 6px 20px rgba(0,0,0,.5)}
.bt-scroll-emblem.multi .bt-celebrate-emblem{width:98px;height:98px}
.bt-celebrate.on .bt-celebrate-emblem{animation:bt-land .62s cubic-bezier(.2,.75,.25,1) 2.2s both}
/* テキストは絶対配置＝錠(ステージ)の中心を screen 中心(50%/50%)に保ち、柵の穴(50%/50%)と座標一致させる */
.bt-scroll-caption{position:absolute;top:calc(100% + 16px);left:0;right:0;text-align:center;margin:0;font-size:.92rem;font-weight:800;letter-spacing:.34em;color:#caa15a;text-indent:.34em;opacity:0}
.bt-celebrate.on .bt-scroll-caption{animation:bt-rise .6s ease-out 2.7s both}
.bt-scroll-label{position:absolute;top:calc(100% + 44px);left:0;right:0;text-align:center;margin:0;font-size:1.6rem;font-weight:900;letter-spacing:.08em;color:#f3f8fa;text-shadow:0 1px 14px rgba(0,163,214,.35);opacity:0}
.bt-celebrate.on .bt-scroll-label{animation:bt-rise .6s ease-out 2.82s both}
.bt-scroll-hint{position:absolute;top:calc(100% + 92px);left:0;right:0;text-align:center;margin:0;font-size:.7rem;color:rgba(234,242,245,.45);opacity:0}
.bt-celebrate.on .bt-scroll-hint{animation:bt-rise .6s ease-out 3.2s both}
/* ブレードが巻き取られる：回転しながらフェード（ease-in で“スッと持って行かれる”） */
@keyframes bt-blade-open{0%{opacity:1;transform:rotate(0) scale(1)}70%{opacity:.95}100%{opacity:0;transform:rotate(40deg) scale(1.1)}}
@keyframes bt-fade-in{to{opacity:1}}
@keyframes bt-fade-out{from{opacity:1}to{opacity:0}}
@keyframes bt-tone{from{opacity:0}to{opacity:.32}}
@keyframes bt-tone-pulse{0%{opacity:.32}40%{opacity:.55}100%{opacity:.32}}
@keyframes bt-focus{0%{opacity:0;transform:scale(1.1)}28%{opacity:.78}100%{opacity:0;transform:scale(1)}}
@keyframes bt-ripple{0%{opacity:0;transform:scale(.3)}25%{opacity:.8}100%{opacity:0;transform:scale(2.7)}}
@keyframes bt-land{0%{opacity:0;transform:translateY(-26px) scale(1.5)}15%{opacity:1}60%{opacity:1;transform:translateY(0) scale(.97)}80%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes bt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* モーション軽減＝アニメ無し・最終状態で静止表示（ブレード/集中線/波紋は出さず徽章を見せる） */
@media (prefers-reduced-motion: reduce){
  .bt-celebrate *{animation:none!important;transition:none!important}
  .bt-celebrate .bt-scroll-caption,.bt-celebrate .bt-scroll-label,
  .bt-celebrate .bt-scroll-hint,.bt-celebrate .bt-celebrate-emblem{opacity:1}
  .bt-celebrate .bt-seal-svg{opacity:1}
  .bt-celebrate .bt-seal-ink .bt-blade,.bt-celebrate .bt-seal-ink .bt-seal-rim{opacity:0}
  .bt-celebrate .bt-screentone{opacity:.28}
  .bt-celebrate .bt-focuslines,.bt-celebrate .bt-seal-ripple,.bt-celebrate .bt-gate{opacity:0!important}
}
/* 強制カラー/ハイコントラストでも入力フォーカスを必ず可視化（outline:none を補う） */
@media (forced-colors: active){
  .boruto-page .composer textarea:focus,.boruto-page .set-v input:focus{outline:2px solid Highlight;outline-offset:1px}
}
/* 会員制ヘッダーは nav＋ログイン/アバターで要素過多。961〜1280px の窮屈域は二次CTA「+体験談を投稿する」を
   畳んで横あふれ/クリップを防ぐ（>1280px と <=960px[ハンバーガー]では従来どおり表示） */
/* 二次CTA「+体験談を投稿する」は ~1280px 以下で畳む＝モバイルでハンバーガーが画面外に押し出されて
   クリック不能になる崩れを解消（boruto は header-auth=avatar/login が増えるぶん幅が窮屈）。
   投稿動線はフッター＋デスクトップ広幅時に残る。 */
@media (max-width:1280px){
  .boruto-page .header-cta{display:none}
}
@media (min-width:961px) and (max-width:1280px){
  .boruto-page .brand-text .sub{display:none} /* 長い副題も畳んで nav+ログインの収まりを確保 */
}

@media(prefers-reduced-motion:reduce){.boruto-page *{animation:none!important}}

/* ===== お知らせ（notices・トップ下部「おしらせ」枠 / マイページ受信箱で共用） ===== */
.notices { padding: 48px 20px; }
.notices-inbox { padding: 4px 0 8px; }
.notices-inner { max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }  /* width:100% が無いと flex item＋auto余白で親に縮まずコンテンツ幅になりモバイルではみ出す（owner 2026-06-09 修正） */
/* W-21（2026-08-19）＝「里のおしらせ」ページ（/updates・variant=inbox）だけ本文幅を1280へ。
   ⚠️ `<Notices>` はいま `UpdatesView.astro` からしか呼ばれていない（トップの旧「おしらせ」枠は撤去済み）
   が、将来 home variant が復活しても壊れないよう .notices-inbox にスコープして上書きする
   （既定の .notices-inner は760pxのまま）。 */
.notices-inbox .notices-inner { max-width: 1280px; }
.notices-heading { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 20px; letter-spacing: 0.02em; }
.notices-inbox .notices-heading { font-size: 18px; margin-bottom: 14px; }
.notices-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* W-22（2026-08-19）＝縦積み→格子（グリッド）並び。1カード最小320pxで折り返し
   （狭い画面では自然に1列へ戻る＝別途メディアクエリ不要）。 */
.notices-inbox .notices-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.notice-item { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--ink); }   /* 上のカード(.mp)と同じ言語＝白・黒縁・角丸・黒影 */
.notice-date { display: block; font-size: 12px; font-weight: 700; color: var(--ink-60); margin-bottom: 4px; }
.notice-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.5; }
.notice-body { font-size: 14px; line-height: 1.75; color: var(--ink); margin: 0; white-space: pre-line; }
.notice-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--fire); }
.notice-item { scroll-margin-top: 84px; }   /* /updates#id アンカーで sticky ヘッダーの下に着地させる */

/* トップ「おしらせ」枠の軽量表示（日付＋タイトル1行）。本文・詳細は /updates に集約し、トップは縦に伸ばさない。 */
.notices-list-compact { gap: 0; }
.notice-titem { border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.notice-titem:last-child { border-bottom: 0; }
.notice-tlink { display: flex; align-items: baseline; gap: 10px; padding: 11px 2px; text-decoration: none; color: var(--ink); transition: color 0.14s; }
.notice-tlink:hover, .notice-tlink:focus-visible { color: var(--fire); outline: none; }
.notice-tdate { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.notice-ttext { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notices-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--fire); text-decoration: none; }
.notices-more:hover { text-decoration: underline; }

/* /updates 専用ページ（全件フル表示） */
/* W-21（2026-08-19）＝本文幅を760→1280へ（外側の器。中の .notices-inner 側も同時に広げてある）。 */
.news-page { padding: 8px 20px 56px; }
.news-inner { max-width: 1280px; margin: 0 auto; }
@media (max-width: 720px) { .news-page { padding: 4px 16px 40px; } }

.notices-empty { color: var(--ink-60); font-size: 14px; }
@media (max-width: 720px) { .notices { padding: 36px 16px; } }

/* ===================================================================
   C: NARUTO オレンジ・テーマ（配色案 v2・NARUTO 25th 参照・2026-06-03）
   --fire=#FF7601（メインオレンジ）。ヒーロー/ヘッダー/CTA を #FF7601 地に、
   文字・サンバースト・装飾漢字は「薄黒（濃インク）」＝25th らしいオレンジ×黒。
   本文パートは #FFC677（アンバー）。局所強調は #E9451F。和紙テクスチャは払拭。
   忍マークは元のまま＝オレンジ地丸＋黒縁＋白忍（owner 指定）ゆえ上書きしない。
   .boruto-page（BORUTO/マイページ）は高特異度 cyan 上書きが残る＝別途オレンジ化予定。
   ※承認後に「他ページ hero(panel-hero) / マイページ NARUTO化 / 未読バッジ」へ展開。
   =================================================================== */

/* ---- ヘッダー（NARUTO オレンジ地・濃インク文字・BORUTO 流のレイアウト整列） ----
   #FF7601 は明るく、元の ink 文字でコントラスト十分（AA 余裕）。nav/brand/CTA は元のまま使う。 */
/* BORUTO ヘッダーの座標データをそのまま流用（.boruto-page .header* のレイアウト規則のミラー）。
   違いは色だけ＝NARUTO オレンジ。罫なしでヒーローへシームレス（BORUTO と同様）。 */
.header { background: var(--fire); backdrop-filter: none; border-bottom: none; }
.header-inner { max-width: 1560px; padding-left: 1.6rem; padding-right: 1.6rem; justify-content: flex-start; }
.brand { margin-inline-end: auto; }                     /* brand 始端・nav/言語/CTA は終端にまとまる（rtl で反転する）*/
/* 🔴 スマホで帯が詰まりきる問題（2026-08-09 実測＝中身が置ける幅の 100%・日本語はサイト名が
   2行に折れていた）。原因は上の padding-left/right 1.6rem が、@media(max-width:640px) の
   `.header-inner{padding:10px 16px}`（3782行付近）を**後勝ちで打ち消していた**こと。
   その狭い画面用の意図をここで復活させる。デザインの変更ではなく、死んでいた指定の復旧。
   `.boruto-page .header-inner` は特異度が上なので、そちらも併記しないと効かない。 */
@media (max-width: 640px) {
  .header-inner,
  .boruto-page .header-inner { padding-left: 16px; padding-right: 16px; }
}
.brand-text .sub { color: var(--ink); }                 /* オレンジ地で fire-dark は弱い→濃インク */
.lang-switcher-btn { color: var(--ink); border-color: rgba(26,26,26,0.3); }
.lang-switcher-btn:hover { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,0.55); }
/* nav リンク：下線はインク（オレンジ地で見える）。hover で文字色が fire→地色と同化して消える不具合を解消 */
.header .nav a::after { background: var(--ink); }
.header .nav a:hover { color: var(--ink); }
/* 投稿する CTA：hover で fire（地色）と同化していたのを、白反転＋持ち上げで目立たせる */
.header .header-cta:hover { background: #fff; color: var(--ink); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
/* 「日本語」「投稿する」の高さを 38px に統一（BORUTO と同じ。padding/line-height のズレを min-height で吸収） */
.header .lang-switcher-btn, .header .header-cta {
  min-height: 38px; box-sizing: border-box; line-height: 1;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}

/* 里づくり本部への入口（会員限定・member-only）。ラベル文言に制限語は使わない。
   丸バッジ(.hq-entry-badge)は2026-07-22デザインレビューで撤去した：オレンジ/シアン地の
   ヘッダー上で視認性が低く、既読/件数等の意味も持たない「ノイズ」だったため（member-only 表示
   自体が既に「特別な扉」を伝えている）。 */
.header .nav a.hq-entry { display: inline-flex; align-items: center; gap: 6px; }

/* ---- ホームヒーロー（#FF7601 地・薄黒テキスト＋サンバースト） ----
   元の dark-on-light 設計（タイトル/副文/きっかけ黒帯/集中線の薄黒）をそのまま活かす。巨大漢字も薄黒に。 */
.hero { background: var(--fire); }
.hero-kanji { color: var(--ink); opacity: 0.045; }       /* 装飾漢字＝薄黒・さらに薄く明確に背景化（デザイナー指摘の「事故的 z 重なり」回避） */
/* 「忍」とサンバースト収束点を左寄り(35% 45%)＝見出し背後の開きスペースへ揃える。右のイベントカードと被らない */
.hero-kanji { right: auto; left: 35%; top: 45%; margin-left: -21vw; margin-top: -16.8vw; }
/* サンバーストは中心に収束＋やや強める（忍アイコン撤去に伴い中央へ・owner 2026-06-07） */
.speed-lines {
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 1.1deg, rgba(26,26,26,0.13) 1.1deg, rgba(26,26,26,0.13) 1.9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 120px, #000 620px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 120px, #000 620px);
}
.hero-title .hl { color: #fff; }                         /* 「きっかけ」＝黒帯×白文字で強調（薄黒タイトル中の反転島） */
.hero-title .underline-swoop { stroke: var(--ink); }     /* オレンジhero上で朱の下線が消えるので黒に（owner 2026-06-04） */
.mission-title .fire { color: var(--ink); }              /* 「100人の…日へ」のオレンジ字を黒に（owner） */
/* ボタン：primary=白塗り(ink文字)・secondary「読む」=黒塗り(白文字)。orange-on-orange と透過を解消 */
.hero-actions .btn-primary { background: #fff; color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.hero-actions .btn-primary:hover { box-shadow: 8px 8px 0 var(--ink); }
.hero-actions .btn-outline { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,0.25); }
.hero-actions .btn-outline:hover { background: #000; color: #fff; box-shadow: 6px 6px 0 rgba(0,0,0,0.3); transform: translate(-2px,-2px); }

/* ---- 他ページのヒーロー（panel-hero：stories/submit/guidelines 等）も NARUTO オレンジ×薄黒に ---- */
.panel-hero { background: var(--fire); border-bottom: none; }  /* 黒い太線(border-bottom)を撤去しヒーロー→本文をシームレスに（owner 2026-06-04） */
.panel-hero::after { display: none; }                          /* 朱の3px境界線も撤去（黒線と対の装飾だったため一緒に消す） */
.panel-hero-kanji { color: var(--ink); opacity: 0.06; }  /* 巨大装飾漢字も薄黒（オレンジ上で fire は消えるため） */

/* ---- 本文パート（きっかけ集・体験談）の背景。おしらせ/サイトの裏側の帯（#F0EFEB）と統一して試行（owner 2026-06-03）。
       違和感なければ他ページの本文背景もこの --util-bg に揃える。元のアンバー #FFC677 に戻す場合は var(--amber) ---- */
.stories { background: var(--util-bg); }
/* project100 背景＝おしらせ/「サイトの裏側」帯（#F0EFEB）と同じ薄グレーのフラット地（owner 2026-06-04）。
   その上に【薄いグレー】の網点ハーフトーンを【右上隅だけ】に重ね、隅に近いほど【粒を大きく】する（owner 2026-06-09）。
   2層とも同じ16px格子で粒の中心を揃え、::before=小粒を広めのコーナーゾーン／::after=大粒を最角だけ＝
   隅ほど大粒・外へ行くほど小粒に見える（数ではなくサイズで密度感）。右半分には広げない（radial mask で隅集中）。
   カードは .mission-inner(z-index:2)で上＝邪魔しない。調整ノブ＝alpha(濃さ)／粒半径(1.3px/3px)／コーナー範囲(mask の %)。 */
.mission { background: var(--util-bg); }
.mission::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 1.3px, transparent 2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(34% 46% at 100% 0%, #000 0%, #000 22%, transparent 72%);
  mask-image: radial-gradient(34% 46% at 100% 0%, #000 0%, #000 22%, transparent 72%);
}
.mission::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 3px, transparent 3.9px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(20% 27% at 100% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(20% 27% at 100% 0%, #000 0%, transparent 78%);
}

/* 体験談＝右上コーナーの斜めトーン（空）。隅が濃く、中心へフェード。左下〜中央は白のまま。 */
.stories::before {
  content: ''; position: absolute; inset: 0;
  display: block; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 1.8px, transparent 2.3px);
  background-size: 16px 16px;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(72% 72% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 32%, transparent 72%);
  mask-image: radial-gradient(72% 72% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 32%, transparent 72%);
}

/* ============================================================
   ＜実験ルック＞ きっかけ集(.stories) を「マンガの回想シーン（黒枠）」化。owner 2026-06-04。
   戻し方：index.astro の <section class="stories ... manga-recall"> から manga-recall を外すだけ。
   元の .stories（白地＋右上トーン＋傾きコマ）は丸ごと残してあるので完全復元できる。
   ・回想への遷移表現は検討中。カーテン（段々）は「立体に見える」との指摘で撤回し、上辺はフラット黒（::before オフ）。
   ・本文コマ(.mp)は薄グレー(--util-bg)のパネルを黒地に浮かせる＝コマ割り。傾きは全ニュートラル（--hr:0/transform:none）。大小(span)は維持。
   ============================================================ */
.stories.manga-recall { background: #0d0d0f; color: #f4f4f4; }

/* 回想遷移の特別演出は一旦なし（カーテン段々／ベタフラッシュ／ヴィネットいずれも不採用。owner 2026-06-04）。
   黒地のコマ割り＋オレンジ hero との明度差で「別空間に入った」ことは十分伝わる。次案はセピア化を検討。 */
.stories.manga-recall::before { display: none; }
.stories.manga-recall .stories-inner { position: relative; z-index: 3; }

/* 黒地で見出しを可読に（eyebrow はオレンジ地・白字／タイトルは白）。 */
.stories.manga-recall .stories-eyebrow { background: var(--fire); color: #fff; transform: none; }
.stories.manga-recall .stories-title,
.stories.manga-recall .stories-title .stroke { color: #fff; }

/* （回想遷移：ベタフラッシュは「黒魔術的（召喚陣風）」との指摘で撤回。ヴィネット＝下記 ::before に変更。owner 2026-06-04） */

/* コマ＝薄グレーのパネルを黒地に。傾きゼロ・角ほぼ直角・遊びの ink シャドウは黒地で溶けるので撤去（home 専用＝.stories.manga-recall）。
   ※ 一覧の黒コマ化／文字数比例サイズ／メーソンリーは撤回し「大物着手前」に復帰（owner 2026-06-04）。 */
.stories.manga-recall .mp {
  transform: none; --hr: 0deg;
  background: var(--util-bg);        /* 真っ白だとチカチカするので project100 背景と全く同じ薄グレー #F0EFEB に */
  border: 2px solid #000; border-radius: 3px;
  box-shadow: none;
}
.stories.manga-recall .mp:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 9px 0 rgba(255,255,255,0.10);
  z-index: 5;
}
/* プレースホルダー（投稿誘導カード）は薄グレーから右下へ淡オレンジへ色づく＝未来の枠。45度ハッチ(.hatched)は活かす。 */
.stories.manga-recall .mp.mp-img {
  background: linear-gradient(155deg, var(--util-bg) 0%, #ffe0c2 58%, #ffc89c 100%);
}

/* ============================================================
   体験談一覧（/stories・[lang]）も「きっかけ集」と同じ黒地＋四角コマ化（owner 2026-06-04）。
   ★均一グリッド維持＝文字数比例カードサイズ／メーソンリーは入れない（過去に撤回・再実装しない方針を尊重）。
   戻し方：両 index.astro の <section class="section stories-recall"> から stories-recall を外すだけ。 */
.section.stories-recall { background: #0d0d0f; color: #f4f4f4; }
/* 幅は共通 --max-width(1280) に統一済み＝ヒーロー(panel-hero-inner)とカード(section-inner)の左辺が揃う。 */
.section.stories-recall .mp {
  transform: none; --hr: 0deg;
  background: var(--util-bg);        /* 黒地に薄グレー #F0EFEB のコマを浮かせる（白だとチカチカするので回想ルックと統一） */
  border: 2px solid #000; border-radius: 3px;
  box-shadow: none;
}
.section.stories-recall .mp:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 9px 0 rgba(255,255,255,0.10);
  z-index: 5;
}
/* 黒地に乗る周辺テキストの可読性（カード内は薄グレー地なので元の色のまま）。 */
.section.stories-recall .filter-no-results { color: rgba(244,244,244,0.7); }

/* ---- おしらせ＋サイトの裏側＝業務連絡帯（#F0EFEB・2分割）。区切り線(黒罫)なし ---- */
.util-strip { background: var(--util-bg); padding: 36px 32px 56px; }  /* mission と同色グレーで色境界なし→上余白を36に詰め空き帯を縮小（owner 2026-06-09・左右32据置/下56据置） */
/* セクションのアイブロウ「◆ サイト情報」＝PROJECT100 とは別セクションだと示す（色分けはしない・owner 2026-06-09）。他のアイブロウと統一(ink地/白字/0.22em)・中央。 */
.util-eyebrow {
  display: block; width: fit-content; margin: 0 auto 24px;
  font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: var(--ink); padding: 6px 14px; border-radius: 4px;
}
.util-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; }  /* mission-inner(1280)と左右端を一致 */
/* 2列とも同じ高さに（見出し下のカードを列いっぱいまで伸ばす。テキストが少ない側は余白を広げる）。
   flex の繋ぎは util-col → notices → notices-inner → notices-list → notice-item を全て縦フレックスで通す。 */
.util-col { display: flex; flex-direction: column; min-width: 0; }  /* base で min-width:0＝1fr 1fr が常に等幅＝おしらせ/裏側が同量に連動して縮む（owner 2026-06-09） */
.util-strip .notices,
.util-strip .notices-inner,
.util-strip .notices-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.util-strip .notice-item { flex: 1; }
.util-col-backstage .util-card { flex: 1; }
.util-heading { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 16px; letter-spacing: 0.02em; }
.util-strip .notices { padding: 0; }
.util-strip .notices-heading { font-size: 20px; margin-bottom: 16px; }
/* サイトの裏側＝1枚のカード（おしらせカードと同じ言語：白・黒縁・角丸・黒影） */
.util-card { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 18px 20px; box-shadow: 4px 4px 0 var(--ink); }
.util-strip .backstage-body { font-size: 14px; line-height: 1.85; color: var(--ink-80); margin: 0 0 10px; }
.util-strip .backstage-body:last-of-type { margin-bottom: 0; }
/* リンクは 2 つ横並び・同じ高さ＆同じ幅（flex:1） */
.util-strip .backstage-links { display: flex; flex-direction: row; gap: 12px; margin-top: 16px; }
.util-strip .backstage-link { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 46px; padding: 10px 12px; font-size: 13px; }  /* min-width:0＝タブレットで裏側の2ボタンが縮み、列が等幅で連動縮小（owner 2026-06-09） */
@media (max-width: 760px) {
  .util-grid { grid-template-columns: 1fr; gap: 28px; }
  .util-strip { padding: 40px 16px; }
  /* モバイルはみ出し対策（owner 2026-06-09）：列を縮められるよう min-width:0／裏側カードのボタン2つは横並びをやめ縦積み（横並びだと最小幅が縮まずカードが画面を超える） */
  .util-col { min-width: 0; }
  .util-strip .backstage-links { flex-direction: column; }
}

/* ---- マイページ（/account）を NARUTO オレンジに再テーマ（BORUTO 水色 → オレンジ） ----
   .boruto-page の --boruto* トークンを上書き＝タブ active 下線/設定トグル/ランク章/アバター地などは
   トークン経由で一括オレンジ化。ヘッダーはハードコード cyan のみ3点上書き（navy 文字は暗色ゆえ
   オレンジ地で可読のため据置）。BORUTO タイムライン本体（.boruto-page 単独）は水色のまま不変。 */
.boruto-page.naruto-theme {
  --boruto: #FF7601;        /* 主オレンジ（タブ active 下線・トグル ON 等） */
  --boruto-deep: #d95e00;   /* 濃いめ＝白地で可読（ランク章ラベル/トグル/フォーカス輪） */
  --boruto-dark: #b34b00;
  --boruto-ink: #1a1a1a;    /* 暗色アンカー（フッター地等） */
  --boruto-soft: #ffe0c8;   /* 淡色（ランク背景・アバター地のフォールバック） */
  /* 🔴 【WO-021・P-1049・2026-08-14 椿さん決定「揃える」】~~`#fffaf6`~~ → **`var(--scroll)` を参照。**
     ⚠️ ここが**マイページ（`/account/`）とプロフィールの地**。ここだけ温色のままだったので、
        サイトの他の画面と地の色が違っていた（実測＝rgb(255,250,246) 対 rgb(244,244,245)）。 */
  --boruto-bg: var(--scroll);
  --boruto-link: #c84e00;
}
.boruto-page.naruto-theme .header { background: var(--fire); }
.boruto-page.naruto-theme .brand-mark { background: var(--fire); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.boruto-page.naruto-theme .nav.nav-open { background: var(--fire); }

/* ---- 未読おしらせの通知バッジ（ヘッダーのアバターに写輪眼バッジ） ----
   アバターは overflow:hidden で円にクリップされるので、has-unread のときだけ visible にして
   バッジを円の外（右上）へはみ出させ、上に重ねる（z-index）。バッジは赤地＋黒の瞳/三つ巴の SVG。 */
.avatar.has-unread { position: relative; overflow: visible; }
.avatar.has-unread::after {
  content: ''; position: absolute; top: -4px; right: -4px; z-index: 3;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23E9451F' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%231a1a1a'/%3E%3Ccircle cx='12' cy='5.4' r='2' fill='%231a1a1a'/%3E%3Ccircle cx='17.6' cy='15.3' r='2' fill='%231a1a1a'/%3E%3Ccircle cx='6.4' cy='15.3' r='2' fill='%231a1a1a'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* ---- アバタータップ変更（Google スタイル）：マイページ /account ----
   .avatar-editable はプロフィールアバター自体をクリックでファイルピッカー起動。
   overflow:hidden（円クリップ）を visible に上書きしてバッジをはみ出させる。
   🔴【H-21・2026-08-22】以前ここに在った [data-gate-avatar="1"] 限定のカーソル/フォーカス枠/
   カメラバッジは、機能ゲート撤去（オーナー裁定）によりその出し分けの前提（data-gate-avatar
   属性）ごと消えたため削除した。 */
.avatar.avatar-editable { position: relative; overflow: visible; }
/* img は inner に収まるよう object-fit+border-radius を継承（overflow:visible でも img 自体は円のまま） */
.avatar.avatar-editable img { clip-path: circle(50%); }

/* アバターと削除ボタンを縦積みにするラッパー（profile flex 内の1アイテム） */
.avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* 「頭文字に戻す」削除ボタン: アバター直下の控えめテキストボタン */
.btn-avatar-remove {
  display: block;
  background: none;
  border: none;
  font: inherit;
  font-size: .73rem;
  color: var(--ink-60, rgba(26,26,26,.6));
  cursor: pointer;
  padding: .15rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: .2rem;
  align-self: center;
}
.btn-avatar-remove:hover { color: var(--ink, #1a1a1a); }
.btn-avatar-remove:focus-visible { outline: 2px solid var(--fire, #FF7601); outline-offset: 2px; border-radius: 3px; }

/* 退会 <details> の折りたたみ設定。overflow:hidden の解除は .bt-leave-details.set-list 側で供給。 */
.boruto-page .bt-leave-details { margin-top: 1rem; }
/* summary を set-row 相当のスタイルに統一（目立たせすぎない） */
.boruto-page .bt-leave-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-60, rgba(26,26,26,.6));
  cursor: pointer;
  border-radius: var(--radius-md);
  user-select: none;
}
.boruto-page .bt-leave-summary::-webkit-details-marker { display: none; }
.boruto-page .bt-leave-summary::after {
  content: '›';
  font-size: 1.1rem;
  color: var(--ink-40, rgba(26,26,26,.4));
  transition: transform .15s;
}
.boruto-page .bt-leave-details[open] > .bt-leave-summary::after { transform: rotate(90deg); }
.boruto-page .bt-leave-summary:hover { background: rgba(26,26,26,.03); }
.boruto-page .bt-leave-summary:focus-visible { outline: 2px solid var(--boruto-deep, #0083ac); outline-offset: -2px; }
/* 展開中は summary の下ボーダーを出す */
.boruto-page .bt-leave-details[open] > .bt-leave-summary { border-bottom: 1px solid var(--ink-20, rgba(26,26,26,.12)); border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ===== BORUTO 最新話の感想 入口（トップ・PROJECT 100 下／モック 2026-06-04） =====
   背景は最新話ページのヒーローと同じ「シアン地＋砂テクスチャ（網点）」を移植。
   シアン地に映えるよう文字＝濃紺刻印・パネル＝白ハードブロックの BORUTO トーンで統一。
   ログイン状態の出し分けは body[data-auth] + .guest-only/.member-only（上で全ページ対応化済）。 */
.latest-chapter {
  position: relative;
  padding: 96px 32px 120px;
  background: #00a3d6; /* BORUTO シアン地（最新話ヒーローと同色） */
  color: #021824;
  overflow: hidden;
}
/* 砂テクスチャ（BorutoHero .hero-grain と同じ網点）。濃紺の粒子をシアン地に重ねる。 */
.latest-chapter .lc-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: .85;
}
.lc-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.lc-header { margin: 0 0 40px; text-align: center; }  /* 中央統一（owner 2026-06-09） */
.lc-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: #021824;
  padding: 6px 14px; border-radius: 4px; margin-bottom: 20px;
}
/* ヒーロー移植: BORUTO -TWO BLUE VORTEX- ロゴ（黒刻印）＋タグライン枠（黒枠/シアン内）。BorutoHero と同形・実値化。 */
/* ロゴ（左）＋「最新話感想コミュニティ」枠（右）を横並び。枠の縦はロゴ高さに揃える（align-items:stretch）。 */
/* 左1カラム化＝見出し(BORUTOロゴ)とサブ(最新話感想コミュニティ)を左に縦積み（owner 2026-06-09・左右分割をやめ視線を一直線に） */
.lc-logo-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lc-logo-group { display: inline-block; margin: 0; max-width: 100%; }
.lc-hero-title { display: inline-flex; flex-direction: column; align-items: stretch; gap: .4rem; margin: 0; }
.lc-main {
  font-size: clamp(3.6rem, 13.5vw, 7.2rem); font-weight: 900; line-height: .82; letter-spacing: 0; color: #000;
  text-align: center; white-space: nowrap;
  text-shadow: 0 -1.5px 0 rgba(0,8,12,.55), 0 2px 0 rgba(224,242,251,.6), 0 3px 4px rgba(0,0,0,.12);
}
/* ロゴのサブ「- TWO BLUE VORTEX -」。BorutoHero .bt-sub と同形（BORUTO幅に両端揃え＝justify）。
   ※ アクションの .lc-sub（下のピルボタン）とは別物。クラス名を分離して枠の誤適用を防ぐ（2026-06-04）。 */
.lc-logo-sub {
  font-size: clamp(1.2rem, 4.4vw, 2.45rem); font-weight: 900; color: #000; letter-spacing: .01em; line-height: 1;
  text-align: justify; text-align-last: justify;
  text-shadow: 0 -1px 0 rgba(0,8,12,.45), 0 1px 0 rgba(224,242,251,.5);
}
/* 「最新話感想コミュニティ」枠（黒枠/シアン内）。ロゴ右〜カード右端まで伸ばす（flex:1）＝高さはロゴに揃う。 */
.lc-tagline { display: flex; flex: none; align-self: center; max-width: 100%; margin: 0; background: #000; padding: 4px; }
.lc-tagline span {
  flex: 1; display: flex; align-items: center; justify-content: center; background: #00a3d6; color: #000;
  padding: .55rem 1.5rem; font-size: clamp(1.4rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: .04em; line-height: 1.35;
}
/* 説明文は PROJECT100 の .mission-lead とトンマナ完全統一（1rem / line-height:1.9 / 通常太さ / var(--ink-80)）。
   ※前回シアン地で青系濃紺(#00374e)にしたら背景と色相が近く読みづらかった → mission と同じ無彩色グレー(ink-80)が
   シアン地でもコントラストが効いて読みやすい。max-width は外して1行に収める（owner 2026-06-04）。 */
.lc-lead { font-size: 1rem; line-height: 1.9; color: var(--ink-80); margin: 24px 0 0; }
.lc-note { font-size: 0.85rem; line-height: 1.7; color: var(--ink-60); margin: 8px 0 0; }

.lc-panel {
  /* 左1カラム＝本文(カード)の下にボタンを縦積み（owner 2026-06-09・本文左／ボタン右端の間延びを解消） */
  display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start;
  background: #fff; border: 2px solid #021824;
  border-radius: 16px; padding: 26px 30px; box-shadow: 5px 5px 0 #021824;
}
.lc-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.lc-card-main { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lc-ep { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: #021824; line-height: 1.1; }
.lc-name { font-size: 1.05rem; font-weight: 700; color: #0083ac; }
.lc-cover { font-size: 0.82rem; color: #5a7280; }
.lc-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800;
}
.lc-badge svg { width: 15px; height: 15px; }
.lc-badge-locked { background: #e6f5fc; color: #0083ac; border: 1px solid #0083ac; }
.lc-badge-open { background: #021824; color: #fff; }

.lc-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.lc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; background: #021824; color: #fff;
  border: 2px solid #021824; border-radius: 999px; font-weight: 900; font-size: 15px; text-decoration: none;  /* ボタン統一15px（owner 2026-06-09） */
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.lc-cta:hover { background: #fff; color: #021824; transform: translateY(-1px); box-shadow: 3px 3px 0 #021824; }
.lc-sub {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; background: transparent; color: #021824;
  border: 2px solid #021824; border-radius: 999px;
  font-weight: 800; font-size: 0.9rem; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.lc-sub:hover { background: #021824; color: #fff; }

@media (max-width: 720px) {
  .latest-chapter { padding: 48px 16px 56px; }
  .lc-logo-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lc-tagline { flex: none; width: 100%; }
  .lc-panel { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .lc-actions { flex-direction: column; align-items: stretch; }
}

/* ---- 里づくり本部への入口（トップ・会員限定）----
   BORUTO コミュニティ入口の直下に置く小さなカード。既存の manga-panel 罫（chap-card と同じ値）を流用し、
   地色は --flash-soft（陽だまり）を薄く敷くだけ＝黄は丸バッジのみに絞る（owner 2026-07-22）。
   padding-bottom を 8px→56px に上げた（隣接する .latest-chapter の 48px 16px 56px と釣り合わせる。
   以前は次セクションとの隙間が8pxしか無く、カードの6pxオフセット影が帯の縁に2pxまで迫って
   「レンダリング崩れ」に見えていた＝デザインレビュー2026-07-22 指摘の是正）。 */
.hq-teaser { padding: 56px 16px 56px; background: var(--flash-soft); }
.hq-teaser-card {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  max-width: 880px; margin: 0 auto; padding: 1rem 1.3rem;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink); color: var(--ink); text-decoration: none;
  transition: transform .2s cubic-bezier(.5,1.4,.4,1), box-shadow .2s ease;
}
.hq-teaser-card:hover { box-shadow: 9px 9px 0 var(--ink); transform: translate(-2px, -2px); }
.hq-teaser-badge {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--flash); box-shadow: 0 0 0 2px var(--ink);
}
.hq-teaser-text { font-weight: 800; font-size: 1rem; }
/* RTL(アラビア語)では → 矢印を反転する。他の要素は論理プロパティで対応済みだが、方向を持つ
   矢印グリフ自体はミラーが要る（a11yレビュー2026-07-22「唯一の未対応の方向性アーティファクト」
   指摘の是正）。 */
[dir="rtl"] .hq-teaser-arrow { transform: scaleX(-1); }
/* リード文。カード直下に1行添えて「ボタンだけで何の扉か分からない」を解消する
   （デザインレビュー2026-07-22 指摘の是正。隣接セクションと同じ ink-80/中央寄せ）。 */
.hq-teaser-lead {
  max-width: 560px; margin: 14px auto 0; text-align: center;
  color: var(--ink-80); font-size: 0.92rem; line-height: 1.8;
}
@media (max-width: 640px) {
  .hq-teaser { padding: 40px 16px 40px; }
  .hq-teaser-card { padding: 0.85rem 1rem; gap: 10px; }
  .hq-teaser-text { font-size: 0.92rem; }
}

/* ========== 新ヒーロー: 理念一文＋4カード＋今日バナー（2026-06-06 刷新） ========== */
/* 既存 .hero / .speed-lines / .hero-kanji（背景装飾）は流用。.hero-inner は flex に上書き。
   旧ヒーロー（タイピング見出し・大CTA・hero-stack）のCSSは要素が消えたため不活性（無害）。 */
.hero-inner {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: center; gap: 44px;
  max-width: 1280px; grid-template-columns: none;
}
.hero-creed {
  margin: 0 auto; max-width: none; width: 100%;
  /* 代案Cで文が長いため縮小。'||' で行を分け PC/タブレットで2行に収める（owner 2026-06-06）。 */
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.4;
  /* オレンジ地に白文字はコントラスト約2.7:1で AA 未達 → 墨色に（原設計の「薄黒テキスト」意図に整合）。owner 2026-06-07 */
  font-weight: 900; letter-spacing: -0.02em; color: var(--ink);
  word-break: normal; overflow-wrap: break-word;
}
.hero-creed-line { display: block; }   /* '||' 区切り＝この単位で必ず改行 */
/* seg 既定＝自然折り返し可（英語等 '/' 塊の無い長文・CJK が右へ溢れないよう幅内で reflow・owner 2026-07-04）。
   ※ JA だけは '/'(塊境界)+nowrap で語中改行を制御する設計のため下で nowrap を上書きする。 */
.hero-creed-seg { display: inline-block; white-space: normal; overflow-wrap: break-word; }
/* JA のみ：'/' 塊境界と box の間でのみ折り返す（語中改行防止・owner 2026-06-09 の意図を維持）。 */
html[lang="ja"] .hero-creed-seg { white-space: nowrap; }
.hero-creed-box {
  display: inline-block; white-space: nowrap;
  background: var(--ink); color: var(--fire);
  padding: 0.08em 0.34em; border-radius: 0;
  transform: rotate(-1deg);
  /* box 同士は詰めすぎず、box と後続テキスト（隠れ里です）は離す＝右マージンで両立（owner 2026-06-06） */
  margin-right: 0.2em;
}
.hero-cards {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  align-items: stretch; grid-auto-rows: 1fr;  /* 行も均等＝2×2(モバイル)でも4枚すべて同じ高さに（owner 2026-06-09） */
}
.hero-card-item { display: flex; min-width: 0; }
.hero-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; height: 100%;
  padding: 22px 20px; text-align: center; text-decoration: none;
  color: var(--ink); background: #fff;
  border: 2.5px solid var(--ink); border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.hero-card:focus-visible { outline: 3px solid var(--fire); outline-offset: 3px; }
/* アイコン＝中央上 / 機能名・説明とも中央（owner 2026-06-09・カード内テキスト中央統一） */
.hero-card-icon { width: 38px; height: 38px; color: var(--fire); flex: none; }
.hero-card-icon svg { width: 100%; height: 100%; display: block; }
.hero-card-title { font-size: 1.12rem; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; text-align: center; }
.hero-card-desc { flex: 1; width: 100%; font-size: 0.88rem; font-weight: 600; line-height: 1.65; color: #444; overflow-wrap: anywhere; text-align: center; }

/* 今日はなんの日? バナー（ヒーロー直下・横スクロール） */
.today-banner { overflow: hidden; background: var(--ink); color: #fff; padding: 0 32px; }
.today-banner[hidden] { display: none; }
.today-banner-link {
  display: flex; align-items: center; gap: 14px;
  max-width: 1280px; margin: 0 auto; padding: 11px 0;
  text-decoration: none; color: #fff;
}
.today-banner-link:focus-visible { outline: 3px solid var(--fire); outline-offset: -3px; }
.today-banner-label {
  flex-shrink: 0; white-space: nowrap;
  font-size: 0.85rem; font-weight: 900; letter-spacing: 0.04em;
  background: var(--fire); color: #fff; padding: 5px 14px; border-radius: 999px;
}
.today-banner-viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.today-banner-track {
  display: inline-block; white-space: nowrap;
  font-size: 0.88rem; font-weight: 700; will-change: transform;
  animation: bannerScroll 38s linear infinite;
}
.today-banner-link:hover .today-banner-track { animation-play-state: paused; }
.today-banner-arrow { flex-shrink: 0; color: #fff; }
@keyframes bannerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* RTL（アラビア語）: 矢印を反転 */
[dir="rtl"] .today-banner-arrow { transform: scaleX(-1); }

/* レスポンシブ */
@media (max-width: 960px) {
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* seg は inline に戻さない（inline だと語中で折れる）。nowrap の塊のまま '/' 境界で折る。 */
}
@media (max-width: 720px) {
  .today-banner { padding: 0 20px; }
}
@media (max-width: 560px) {
  .hero-inner { gap: 28px; }
  /* スマホは4カードを2×2（左上/右上/左下/右下）に均等配置＝ヒーローを短く */
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-card { padding: 16px 14px; }
  .hero-card-title { font-size: 1rem; }
  .hero-card-desc { font-size: 0.8rem; line-height: 1.55; }
  .today-banner-link { padding: 10px 0; gap: 10px; }
  .today-banner-label { font-size: 0.78rem; padding: 4px 11px; }
}

/* モーション抑制: バナーの流れを止める */
@media (prefers-reduced-motion: reduce) {
  .today-banner-track { animation: none; }
}

/* ===== セクション左右余白をヒーローと一致（左端・右端を揃える）owner 2026-06-06 =====
   PROJECT100(.mission)/BORUTO最新話(.latest-chapter)/裏側・おしらせ(.util-strip)/今日バナーが
   独自に 14/16px のガターを当てて端がヒーローとズレていた。ヒーロー基準=32px(≧641)/20px(≦640)へ統一。
   ※ source 末尾＝各セクション既存のモバイル指定(≤720/≤760)より後ろなので left/right を確実に上書き。 */
@media (min-width: 641px) {
  .mission, .latest-chapter, .util-strip, .today-banner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
  .mission, .latest-chapter, .util-strip, .today-banner { padding-left: 20px; padding-right: 20px; }
}

/* ===== メインサイト系カード枠を四角に統一（owner 2026-06-06・統一感アップ） =====
   白・黒縁・ハードシャドウの v3 カード言語のみ四角化。BORUTO会員UI(soft系・開発中)と
   フォーム入力欄/ドロップダウンは対象外（owner 裁定: メインサイトのカード枠だけ）。
   末尾＝各定義より後ろなので border-radius を確実に上書き。 */
.submit-nudge,
.p100-why-card,
.panel,
.rank-frame,
.today-card-inner,
.mp,
.story-detail .story-detail-inner,
.story-detail .story-image img,
.story-detail .like-cta,
.story-detail .affiliate-link,
.story-detail .story-cta,
.notice-item,
.util-card,
.lc-panel { border-radius: 0; }

/* ===== 投稿CTAを .nav 内へ移した副作用の修正（owner 2026-06-06） =====
   `.nav a` の色ルール（詳細度 0,2,1）が `.header-cta`（0,2,0）に勝ち、投稿ボタンの文字が
   背景（ink/濃紺）と同化して不可視だった。`.nav a.header-cta` で詳細度を上げ白文字を保証。 */
.header .nav a.header-cta,
.header .nav a.header-cta:focus,
.header .nav a.header-cta:visited { color: #fff; }
/* hover は背景が白反転(#fff・.header .header-cta:hover)するので文字を ink に。
   白文字のままだと白地に白で投稿ボタンの文字が消える不具合の修正（owner 2026-06-09） */
.header .nav a.header-cta:hover { color: var(--ink); }
/* BORUTOテーマの投稿CTAも hover で白背景＝濃紺文字（白白回避） */
.boruto-page .header .nav a.header-cta:hover { color: #021824; }

/* ===== トップ BORUTO感想カードのボタン高さを揃える（owner 2026-06-06・他ボタンとトンマナ統一） =====
   .lc-cta(13px) と .lc-sub(11px) で縦が太く不揃いだったのを、同じ高さの細めピルに統一。 */
.lc-cta, .lc-sub { padding-top: 10px; padding-bottom: 10px; min-height: 42px; box-sizing: border-box; }

/* トップ BORUTO感想カード内の説明文（中央の空白を埋める・owner 2026-06-06） */
.lc-card-desc { font-size: 0.95rem; line-height: 1.75; color: #2a4452; margin: 10px 0 0; max-width: 36em; }
@media (max-width: 720px) { .lc-card-desc { font-size: 0.9rem; } }

/* ===== 聖地マップ セクション（トップ・4区分で機能を説明・件数なし・和紙不使用） owner 2026-06-06 =====
   背景は PROJECT100 と同じ薄グレー(--util-bg)。縦の余白は他セクションと同じ 96/120 でリズムを揃える。 */
.spotmap-cta {
  position: relative; padding: 96px 32px 120px;
  /* グレー3連続を脱し NARUTOアンバー(砂色)で「旅/地図」感（owner 2026-06-07）。文字は墨で可読。 */
  /* 色の変わり目に黒線は入れない（owner 2026-06-07）＝border-top 撤去 */
  background: var(--amber); color: var(--ink); overflow: hidden;
}
/* のっぺり解消＋「地図(ちず)っぽさ」：アンバー地に細い経緯線グリッド（graticule）を薄く重ねる（owner 2026-06-09・"地図っぽく"）。
   砂目ドット（チーズの穴っぽい）から方眼に変更。細グリッド(30px)＋太グリッド(150px)の2層で地図の主・副グリッド感。
   コンテンツは .sm-inner(z-index:2)で上。調整ノブ＝線濃度(alpha)／間隔(30/150px)／効き方(mask)。 */
.spotmap-cta::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(26,26,26,0.07) 0 1.5px, transparent 1.5px 150px),
    repeating-linear-gradient(90deg, rgba(26,26,26,0.07) 0 1.5px, transparent 1.5px 150px);
  -webkit-mask-image: radial-gradient(135% 130% at 100% 0%, #000 38%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.4) 100%);
  mask-image: radial-gradient(135% 130% at 100% 0%, #000 38%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.4) 100%);
}
.sm-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 2;
  /* 中央統一（owner 2026-06-09）＝2カラム→1カラムに積み直し（見出し→リード→ボタン→2×2カード・すべて中央） */
  display: grid; grid-template-columns: 1fr; gap: 32px; justify-items: center;
}
/* アイブロウは他のトップのアイブロウ（mission等）と同じ＝ink地・白字・角丸4px（owner 2026-06-06「一旦」） */
.sm-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: var(--ink); padding: 6px 14px; border-radius: 4px; margin-bottom: 18px;
}
.sm-title {
  font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.25; letter-spacing: -0.01em;
  margin: 0; color: var(--ink); word-break: normal; overflow-wrap: anywhere; text-wrap: balance;
}
.sm-lead { font-size: 1rem; line-height: 1.9; margin: 16px auto 0; color: var(--ink-80); }  /* max-width 撤去＝幅が許せば1行（owner 2026-06-09） */
/* 体験談の「全ての体験談を読む」(.all-link)とトンマナを揃える：白地ピル＋朱影（owner 2026-06-07） */
.sm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 0; padding: 14px 28px; min-height: 48px; box-sizing: border-box;  /* カード下に移動＝間隔は grid gap に任せる（owner 2026-06-09） */
  background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px;
  font-weight: 900; font-size: 15px; text-decoration: none;
  box-shadow: 5px 5px 0 var(--fire); transition: all 0.2s ease;
}
.sm-cta:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--fire); }
.sm-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sm-kind {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0;
  background: #fff; border: 2px solid var(--ink); padding: 16px;
  box-shadow: 2px 2px 0 rgba(26,26,26,0.16);  /* 影を軽量化＝主CTA「聖地マップを見る」を視覚的に勝たせる（owner 2026-06-09） */
}
.sm-kind-pin { flex: none; width: 30px; height: 30px; color: var(--pin); }
.sm-kind-pin svg { width: 100%; height: 100%; display: block; }
.sm-kind-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm-kind-label { font-weight: 900; font-size: 1rem; color: var(--ink); }
.sm-kind-note { font-size: 0.8rem; line-height: 1.5; color: #44525a; overflow-wrap: anywhere; }
[dir="rtl"] .sm-cta svg { transform: scaleX(-1); }
@media (max-width: 860px) { .sm-inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .spotmap-cta { padding: 64px 20px 72px; } }
@media (max-width: 560px) {
  /* スマホも4区分を2×2（四象限）に＝コンパクト・地図の凡例感（owner 2026-06-09）。半幅でも収まるよう小型化。 */
  .sm-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sm-kind { padding: 11px 10px; gap: 8px; }
  .sm-kind-pin { width: 24px; height: 24px; }
  .sm-kind-label { font-size: 0.9rem; }
  .sm-kind-note { font-size: 0.72rem; line-height: 1.45; }
}

/* モバイル: BORUTO最新話カードのボタンを全幅化して画面はみ出しを防ぐ（owner 2026-06-06） */
@media (max-width: 720px) {
  .lc-actions { width: 100%; min-width: 0; }
  .lc-cta, .lc-sub { width: 100%; box-sizing: border-box; }
}

/* モバイルはみ出し対策: グリッド/フレックスの子を min-width:0 で縮められるようにし、
   長い説明文やカードが画面外へ出ないようにする（owner 2026-06-06・添付スクショ対応）。 */
/* 幅は上下のセクション(1280)に合わせる＝このセクションだけ凹んで見えないように（owner 2026-06-09）。
   sm-inner(max 1280)いっぱいを使い、見出し/リードは中央、カードは2×2でフル幅。 */
.sm-text, .sm-kinds { min-width: 0; width: 100%; }
.sm-text { text-align: center; }  /* 見出し/リード/ボタンは中央・カード内テキストは従来どおり左 */
.lc-card, .lc-card-main { min-width: 0; }
.lc-lead, .lc-note, .sm-lead, .sm-title { overflow-wrap: anywhere; }

/* ===== キーボードフォーカスの可視化（全ページ共通・WCAG 2.4.7）owner 2026-06-07 ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--fire); outline-offset: 2px;
}
/* 暗色地（BORUTOシアン/ink CTA/フッター/ヘッダーCTA）は白系アウトラインで視認性確保 */
.boruto-page a:focus-visible, .boruto-page button:focus-visible,
.foot a:focus-visible, .header .header-cta:focus-visible,
.cta a:focus-visible, .cta button:focus-visible,
.sm-cta:focus-visible, .lc-cta:focus-visible { outline-color: #fff; }

/* ===== タッチ標準 44px（一覧のフィルター/ソート/ランダム）owner 2026-06-07 ===== */
.filter-btn, .btn-random, .sort-select { min-height: 44px; box-sizing: border-box; }

/* 前後ナビ: catchphrase（何の話か）を主・投稿者名を従で併記（owner 2026-06-07） */
.prev-next-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.next-link .prev-next-text { text-align: right; }
.prev-next-by { font-size: 0.74rem; color: var(--ink-60); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 「ボリュームたっぷり」(読みごたえ＝長文)マーカー＝NARUTOラーメンてんこ盛り(箸つき)。
   名前の行にアイコン単体(アンバー小箱)で置く。意味は title/aria-label でツールチップ補助（owner 2026-06-10）。 */
.badge-volume {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--amber); color: var(--ink);
  width: 22px; height: 20px; padding: 0; border-radius: 4px;
}
.badge-volume svg { width: 15px; height: 15px; display: block; }

/* ===== カードのメタ＝名前に続けてコンパクトなチップを inline で（owner 2026-06-07・整列） =====
   暗地(recall一覧)・明地(関連/カレンダー)両方で可読＝クリーム地＋墨字＋細枠の1スタイル。
   display:contents で meta-chips を解消し、name と chip を同じ flex 行に流す＝座標を揃える。 */
.mp .byline { align-items: flex-start; }
.mp .byline .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.mp .byline .who .name { display: inline; font-weight: 900; }
.mp .byline .who .meta-chips { display: contents; }
.mp .byline .who .meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.5;
  padding: 1px 7px; border-radius: 4px;
  background: var(--scroll); color: var(--ink); border: 1px solid var(--ink-20);
  max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 国旗はタグ箱（クリーム地＋枠）に入れず旗そのものを置く（owner 2026-06-09） */
.mp .byline .who .meta-chip--flag { padding: 0; gap: 0; background: none; border: 0; border-radius: 0; max-width: none; overflow: visible; }
/* 旗の輪郭だけの極細線＝白地国旗(日本/米/仏 等)が薄グレー地に溶けない用。タグ箱ではない */
.mp .byline .who .meta-chip--flag svg { width: 18px; height: auto; border-radius: 2px; display: block; border: 1px solid var(--ink-20); }

/* ===== 投稿フロー3ステップ視覚化（長い説明文の代替・owner 2026-06-07） ===== */
.mf-reassure { margin: 0 0 14px; }
.mf-steps { display: flex; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
.mf-step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px; padding: 14px 8px; background: var(--scroll); border: 2px solid var(--ink);
}
.mf-step-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--fire); }
.mf-step-icon svg { width: 26px; height: 26px; }
.mf-step-text { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.4; }
@media (max-width: 520px) { .mf-steps { gap: 6px; } .mf-step { padding: 12px 5px; } .mf-step-text { font-size: 11px; } }

/* ===== 投稿=会員必須: ゲスト向けログイン必須カード（Googleフォーム廃止・owner 2026-06-07） ===== */
.member-required { margin: 1.5rem 0 2rem; }
.mr-card { background: #fff; border: 2.5px solid var(--ink); box-shadow: 6px 6px 0 var(--fire); padding: 2rem 1.8rem; text-align: center; max-width: 560px; margin: 0 auto; }
.mr-title { font-size: clamp(1.2rem, 3.6vw, 1.5rem); font-weight: 900; color: var(--ink); margin: 0 0 0.8rem; line-height: 1.5; }
.mr-lead { font-size: 0.95rem; line-height: 1.85; color: var(--ink-80); margin: 0 0 1.4rem; }
.mr-actions { margin: 0 0 1rem; }
.mr-note { font-size: 0.85rem; color: var(--ink-60); margin: 0; }
.mr-note a { color: var(--fire); font-weight: 800; }

/* ===== 会員公開プロフィールページ /members/<slug>/ ===== */

/* ロード中スケルトン */
.mp-loading { padding: 2rem 0; }
.mp-skel { background: var(--scroll-dark); border-radius: 3px; animation: mp-pulse 1.4s ease-in-out infinite; }
.mp-skel-avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1rem; }
.mp-skel-name { width: 160px; height: 1.4em; margin-bottom: 0.6rem; }
.mp-skel-bio { width: 260px; height: 1em; }
@keyframes mp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 見つからない */
.mp-notfound { text-align: center; padding: 3rem 1rem; }
.mp-notfound-msg { font-size: 1rem; color: var(--ink-60); margin: 0 0 1.5rem; }

/* プロフィールヘッダー */
/* プロフィールヘッダー＝アイコン → ニックネーム → X ID（横並び）。ヒーロー無し（owner 2026-06-18）。 */
.mp-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.5rem 0 1.5rem;
  border-bottom: 2px solid var(--scroll-dark);
  margin-bottom: 1.5rem;
}
.mp-avatar-wrap .avatar.lg { width: 72px; height: 72px; font-size: 1.8rem; flex-shrink: 0; }
.mp-header-info { min-width: 0; max-width: 640px; }
.mp-name-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.mp-displayname { font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 900; color: var(--ink); margin: 0; line-height: 1.25; }
.mp-xhandle { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.88rem; color: var(--ink-60); text-decoration: none; }
.mp-xhandle:hover { color: var(--ink); text-decoration: underline; }
.mp-xhandle svg { flex-shrink: 0; opacity: 0.7; }
.mp-bio { font-size: 0.93rem; line-height: 1.75; color: var(--ink-80); margin: 0.5rem 0 0; white-space: pre-wrap; }

/* セクション共通 */
.mp-section { margin-bottom: 2.5rem; }
.mp-section-head {
  font-size: 1rem;
  font-weight: 900;
  color: var(--fire);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--fire-soft);
}
.mp-empty { text-align: center; color: var(--ink-60); font-size: 0.93rem; padding: 1rem 0 2rem; margin: 0; }

/* 考察カード */
.mp-analysis-card {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--amber);
  padding: 1rem 1.2rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: 2px;
}
.mp-analysis-chaplink {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fire);
  text-decoration: none;
  background: var(--fire-soft);
  padding: 0.15em 0.6em;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}
.mp-analysis-chaplink:hover { background: var(--amber); }
.mp-analysis-title { font-size: 1rem; font-weight: 900; color: var(--ink); margin: 0 0 0.5rem; line-height: 1.45; }
.mp-analysis-body {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--ink-80);
  white-space: pre-wrap;
  word-break: break-word;
}
.mp-analysis-body.mp-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-more-btn {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fire);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0 0;
  text-decoration: underline;
}
.mp-more-btn:hover { color: var(--fire-dark); }
.mp-analysis-time { display: block; font-size: 0.8rem; color: var(--ink-40); margin-top: 0.6rem; }

/* 体験談グリッド */
.mp-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.mp-story-card {
  border: 2px solid var(--ink);
  background: var(--scroll);
  box-shadow: 4px 4px 0 var(--fire-soft);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mp-story-card:hover { transform: translate(-3px, -4px); box-shadow: 7px 8px 0 var(--amber); }
.mp-story-link {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}
.mp-story-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: 0.6rem; }
.mp-story-catchphrase { font-size: 0.93rem; font-weight: 800; color: var(--ink); margin: 0 0 0.4rem; line-height: 1.45; }
.mp-story-name { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-60); margin-bottom: 0.2rem; }
.mp-story-meta { display: block; font-size: 0.8rem; color: var(--ink-40); }

@media (max-width: 600px) {
  .mp-header { flex-direction: column; gap: 0.75rem; }
  .mp-story-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .mp-story-grid { grid-template-columns: 1fr; }
}

/* ===== /news ニュースハブ（ADR-0040 N3） ===== */
.news-hub {
  /* 本文パートの背景＝トップの mission/.stories と同じ薄グレー --util-bg に揃える
     （4853行の申し送り「違和感なければ他ページの本文背景もこの --util-bg に揃える」に追従。
     素の --scroll 地のままだと旧サイトの温色クリームが残って見える・owner 2026-07-16）。 */
  background: var(--util-bg);
}
.news-hub-inner {
  /* 本文エリア幅をトップ基準 --max-width(1280) に統一＝ヒーロー(panel-hero-inner)と左辺が揃う
     （guidelines/about/privacy と同じ裁定。旧760pxは他ページと幅が揃わない・owner 2026-07-16）。
     上余白 48px＝他ページのセクション呼吸（stories 64px / mission 44px）に合わせる
     （旧8pxはヒーローの朱境界線とチップが近すぎた・owner 2026-07-16）。 */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--space-md) 56px;
}
@media (max-width: 720px) { .news-hub-inner { padding: 28px 16px 40px; } }

.news-hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.news-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  padding: 0.4em 0.9em;
  white-space: nowrap;
}

.news-chip-filter {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
/* hover/active に v3 のハードオフセット影＝正典のトグルチップ（.filter-btn/.country-chip）と同挙動
   （デザイナー審査 2026-07-16 #3）。 */
.news-chip-filter:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--fire); }
.news-chip-filter[aria-pressed="true"] {
  background: var(--fire);
  color: #fff;
  border-color: var(--fire);
  box-shadow: 3px 3px 0 var(--ink);
}
.news-chip-filter:focus-visible {
  outline: 2px solid var(--fire);
  outline-offset: 2px;
}

.news-chip-cat {
  /* 受動メタタグ＝story-card の .meta-chip と同トーン・同サイズ感（--scroll 地＋ink-20 枠・
     小型・角4px）。上部の操作用フィルタチップ（pill・大きめ）と視覚的な役割差を付ける
     （デザイナー審査 2026-07-16 #1/#2）。 */
  background: var(--scroll);
  color: var(--ink);
  border: 1px solid var(--ink-20);
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}
/* 地域＝裸の国旗SVGのみ（チップ枠・国名テキストなし＝StoryCard の .meta-chip--flag と
   同方式。テキストと線を増やさない・owner 2026-07-16）。 */
.news-item-flag { display: inline-flex; align-items: center; }
.news-item-flag svg {
  width: 18px;
  height: auto;
  display: block;
  border-radius: 2px;
  border: 1px solid var(--ink-20);
}

.news-hub-month {
  /* 黒箱見出し＝サイトの節見出しモチーフ（.gl-section h2・BORUTO「話数を選ぶ」と同系）
     に揃える（デザイナー審査 2026-07-16 #4。下線だけの独自様式をやめる）。 */
  display: inline-block;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  padding: 0.34rem 0.9rem;
  margin: 32px 0 14px;
}
.news-hub-list-wrap > .news-hub-month:first-child { margin-top: 0; }

.news-hub-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  /* 2列グリッド（owner 2026-07-23）。1行1カードの縦積みから2カラムへ。
     minmax(0,1fr) で長いタイトル/本文でも列がはみ出さない。狭い画面は1列に落とす。 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start; /* 高さの違うカードを上揃え（行内で間延びさせない） */
}

@media (max-width: 640px) {
  .news-hub-list { grid-template-columns: 1fr; }
}

.news-item {
  border: 2px solid var(--ink);
  /* カード地は白（--scroll の温色クリームだと薄オレンジに見える・owner 2026-07-16。
     v3 規約「カード＝白地＋墨枠＋ハードオフセット影」とも一致）。
     影は墨（--ink）＝薄グレー地セクション上のカードの正典 .util-card（トップの
     おしらせ帯）と同一規約。fire-soft のオレンジ影は規約外だった（owner 2026-07-16）。 */
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px 16px;
  border-radius: 12px; /* 参照元 .util-card と同値（デザイナー審査 2026-07-16 #5） */
}

.news-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.news-item-meta time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-60);
  margin-right: 2px;
}

.news-item-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 6px;
  word-break: normal;
  overflow-wrap: break-word;
}

.news-item-blurb {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-80);
  margin: 0 0 10px;
  word-break: normal;
  overflow-wrap: break-word;
}

/* lead+bullet フォーマット（owner-chosen format・2026-07）: blurb は「1行目=リード文＋
   <p class="news-item-lead">」「2行目以降=絵文字付き箇条書き＋<ul class="news-item-blurb-list">」
   に分割して描画する（NewsHubView.astro）。論理プロパティ（padding-inline-start /
   margin-inline-start）を使うことで、Arabic の dir="rtl"（BaseLayout.astro が <html> に付与）で
   [dir="rtl"] の追加ルール無しに自動で反転する。絵文字自体が視覚的な箇条書きマーカーのため
   list-style は消す（ネイティブの ::marker と二重にならないように）。 */
.news-item-lead {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--ink-80);
  margin: 0 0 6px;
  word-break: normal;
  overflow-wrap: break-word;
}
.news-item-blurb-list {
  list-style: none;
  margin: 0 0 10px;
  padding-inline-start: 0;
}
.news-item-blurb-list li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-80);
  margin-inline-start: 0.2em;
  margin-block-end: 4px;
  word-break: normal;
  overflow-wrap: break-word;
}
.news-item-blurb-list li:last-child {
  margin-block-end: 0;
}

.news-item-source {
  font-size: 0.82rem;
  color: var(--ink-60);
  margin: 0;
  word-break: normal;
}
.news-item-source-label { font-weight: 700; margin-right: 2px; }
.news-item-source a {
  color: var(--fire-dark);
  font-weight: 700;
  text-decoration: underline;
}
.news-item-source a:hover { color: var(--fire); }
.news-item-srcdate { color: var(--ink-40); margin-left: 4px; }

.news-hub-empty {
  border: 2px dashed var(--ink-40);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-60);
  margin: 24px 0;
}
.news-hub-empty p { margin: 0 0 12px; line-height: 1.8; }
.news-hub-empty-link {
  color: var(--fire-dark);
  font-weight: 700;
  text-decoration: underline;
}

/* もっと見る（owner 2026-07-16・24件ずつ）。.btn-ghost 系譜＝白地＋墨縁＋fireオフセット影。 */
.news-hub-more-wrap { text-align: center; margin: 28px 0 8px; }
.news-hub-more {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--fire);
  padding: 10px 32px;
  font-size: 14.5px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.news-hub-more:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fire); }
.news-hub-more:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }

.news-hub-disclaimer {
  margin: 24px 0 4px;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink-40);
}
.news-hub-report {
  margin: 4px 0 0;
  font-size: 0.78rem;
}
.news-hub-report a {
  color: var(--ink-60);
  text-decoration: underline;
}

[dir="rtl"] .news-item-source-label { margin-right: 0; margin-left: 2px; }
[dir="rtl"] .news-item-srcdate { margin-left: 0; margin-right: 4px; }

@media (max-width: 480px) {
  .news-chip { font-size: 0.72rem; padding: 0.35em 0.75em; }
  .news-item { padding: 12px 14px; }
}

/* 言語オーバーレイ（初回の非会員だけ・BaseLayout.astro）。「軽さが要点」＝重い全画面の壁にしない
   （椿さん 2026-08-17）。スマホは下から出るシート、PC は中央の軽いカード。 */
.nb-lang-scrim {
  position: fixed; inset: 0; z-index: 10500;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(26, 26, 26, 0.42);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.nb-lang-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 560px) { .nb-lang-scrim { align-items: center; } }

.nb-lang-sheet {
  background: #fff; width: 100%; max-width: 420px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(12px); transition: transform 0.22s;
  box-shadow: var(--shadow-lg);
}
.nb-lang-scrim.on .nb-lang-sheet { transform: translateY(0) scale(1); }
@media (min-width: 560px) {
  .nb-lang-sheet { border-radius: var(--radius-lg); transform: translateY(0) scale(0.97); padding-bottom: 1.3rem; }
}

.nb-lang-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.nb-lang-head h2 { margin: 0; font-size: 0.98rem; font-weight: 900; line-height: 1.5; }
.nb-lang-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--scroll); color: var(--ink-60); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.nb-lang-close:hover { background: var(--amber); color: var(--ink); }
.nb-lang-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

.nb-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.nb-lang-opt {
  position: relative; border: 1.5px solid rgba(26, 26, 26, 0.14); background: var(--scroll);
  border-radius: var(--radius); padding: 0.65rem 0.4rem; text-align: center;
  font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.nb-lang-opt:hover { background: var(--amber); }
.nb-lang-opt:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }
/* 「たぶんこれ」は無印（言葉を使わない＝翻訳不要）。濃い枠＋塗り＋右上のチェック印だけで示す。 */
.nb-lang-opt.nb-lang-guess {
  border-color: var(--fire); border-width: 2.5px; background: #fff3e6; color: var(--fire-dark);
  box-shadow: 0 2px 8px -2px rgba(255, 118, 1, 0.35);
}
.nb-lang-chk {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fire); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
}
.nb-lang-chk svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .nb-lang-chk { right: auto; left: -7px; }

.nb-lang-foot { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--ink-40); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .nb-lang-scrim, .nb-lang-sheet { transition: none; }
}

/* ---- プロフィール画面（24テーマ）のコントラスト是正（N-01・N-03・2026-08-22） ----
   🔴 色の正本トークン自体は src/components/MemberProfileShell.astro（別窓が編集中のため触れない）。
   両方とも実機コントラスト測定（Puppeteer・getComputedStyle）で24テーマ全部を確認ずみ。 */

/* N-01: 自己紹介本文（.mp2-rt p）が --mp2-tx2（62%アルファの薄字）で、実測4.5:1未満が24テーマ中17（3.80〜4.63:1）。
   同じ画面が既に持つ「不透明な主文字色」トークン --mp2-tx に差し替え。
   ⚠️ 詳細度を MemberProfileShell 側の `#mp2-shell .mp2-rt p`（ID+class+class+要素）と同点にしないため
      `html body` を足して確実に勝たせる（読み込み順に依存しない）。
   実測（修正後）＝13.05〜17.40:1・24テーマ全部で合格。 */
html body #mp2-shell .mp2-rt p { color: var(--mp2-tx); }

/* N-03: 「トップへ戻る」（#mp2-notfound .btn）は `.boruto-page .btn`（global.css内・テーマ非依存の
   固定オレンジ #d95e00 塗り＋白文字）に当たっており、実測3.78:1で24テーマ全部が不合格だった。
   隣接する塗りボタンの既存パターン（--mp2-acd＋白文字）に揃える。
   実測（修正後）＝4.61〜6.13:1・24テーマ全部で合格。 */
#mp2-shell .mp2-notfound .btn {
  background: var(--mp2-acd);
  border-color: var(--mp2-acd);
  color: #fff;
}