/*
 * nar-gateway.css — NAR 窓口ページ（ショートコード [nar_index_gateway]）の見た目（P-G2）
 * 設計: 地方競馬/30_設計/28_NAR窓口ページ_実装計画.md（§4-5）／正本デザイン=外注 Claude Design 和モダン
 *       （C:\Users\Administrator\Documents\01_指数計算処理_nar\design\）＋モック gateway_mockup_A.html。
 *
 * 方針:
 *   - 外注「和モダン」完成版を値レベルで忠実踏襲（背景白・Noto Sans JP + Roboto Mono・濃緑 #1c5c3b・
 *     各場ヘッダ帯に馬+波 一体型バナー course_bg.png 左詰めno-repeat・CSSミニバー・Chart.js 不使用）。
 *   - !important を一切使わない（中央の悪癖を持ち込まない）・全セレクタ nar-gateway-/nar- 接頭辞・
 *     中央資産（dual-index-/ability-/race-ability-report/window.DualIndexReport 等）を一切参照しない。
 *   - 色/寸法は CSS変数へ集約。背景画像は CSS の url() 相対参照（../assets/course_bg.png）＝PHP非依存。
 *   - 単一インスタンス前提（固定idは container/data/fresh-date。配下は keibajo_code 一意）。
 */

.nar-gateway-container {
  /* 色テーマ（外注 和モダンパレットを CSS変数に集約） */
  --nar-green: #1c5c3b;          /* ブランド濃緑（見出し/現在R/バー/リンク） */
  --nar-ink: #20231d;            /* 主テキスト（濃墨） */
  --nar-ink-soft: #2a2a20;       /* 馬名 */
  --nar-muted: #6b685c;          /* 副次テキスト */
  --nar-muted-2: #9a957f;        /* 既走Rの文字 */
  --nar-faint: #aaa48f;          /* 最も淡い注記 */
  --nar-bar-fill: #1c5c3b;       /* ミニバー実体 */
  --nar-bar-track: #e4ddcc;      /* ミニバー軌道 */
  --nar-rpill-future-bg: #fbfaf5;
  --nar-rpill-future-fg: #3a382f;
  --nar-rpill-future-bd: #d6cfbc;
  --nar-rpill-done-bg: #e7e1d2;
  --nar-rpill-done-fg: #9a957f;
  --nar-rnav-bg: #efeadd;
  --nar-rnav-fg: #5e6b60;
  --nar-allhorses-bg: #f0eee2;
  --nar-allhorses-bd: #cfd8cf;
  --nar-rule-strong: #1c5c3b;
  --nar-rule-soft: #ded7c5;
  --nar-hairline: #e2ddcf;
  --nar-foot-link-bd: #b3c6ba;
  --nar-ad-bg: #efeadd;
  --nar-focus: #ffd166;          /* キーボードフォーカスリング（中央 nar-index-report の amber と共有・暗緑/淡背景双方で視認可） */
  /* 中央競馬（JRA）導線カード用ブルー＝地方(このページ)=グリーンに対し中央=ブルーで行き先のテーマ色を示す（2026-07-19 ユーザー指示） */
  --nar-jra-blue: #005ab3;        /* ラベル/hover枠＝中央ブランドブルー（中央 race-report-unified_v2 の #005ab3 と同系） */
  --nar-jra-blue-border: #cddcec; /* 通常時ボーダー/サムネ下地＝淡ブルー */
  --nar-jra-blue-bg: #f3f8fd;     /* カード地＝ごく淡いブルー（緑の各場カードと差別化） */

  /* 基底 typography（コンテナで一括指定＝テーマ font-size/line-height に左右されない） */
  /* レスポンシブ＝スマホは全幅(単一カラム)・PC等の広幅では各場カードを2カラム化（下記 .nar-gateway-venues）。
     コンテナは width:100% + max-width:960px 中央寄せ（旧 480px 固定＝スマホ幅固定を撤廃。2026-06-25 ユーザー指示）。
     960px ＝2カラム(各約469px)が収まり3カラムにはならない上限。 */
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  color: var(--nar-ink);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* 全体を囲うコンテナ枠（ドロップシャドウのカード枠）は不要ゆえ撤去（2026-06-25 ユーザー指示）。 */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.nar-gateway-container *,
.nar-gateway-container *::before,
.nar-gateway-container *::after { box-sizing: border-box; }
.nar-gateway-container a { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   タイトル（本日の指数 + 日付/開催 サブ）
   ============================================================ */
.nar-gateway-title-wrap { padding: 24px 22px 18px; }
.nar-gateway-container .nar-gateway-title {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: var(--nar-ink);
  letter-spacing: 2px;
  border: 0;
  background: none;
}
.nar-gateway-container .nar-gateway-title::before,
.nar-gateway-container .nar-gateway-title::after { content: none; }
.nar-gateway-subtitle {
  margin: 11px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--nar-muted);
  letter-spacing: 0.5px;
}

/* ============================================================
   日付セレクタ（直近開催日タブ＋◀▶・クライアントJSのみ＝URL不変）
   ★no-JS（.nar-js-ready 未付与）では非表示＝「今日(canonical)」表示に縮退（JSでのみ切替可ゆえ死んだ
     コントロールを出さない・Rストリップ◀▶と同思想 D1/D8）。JSが構築するまで空ゆえ初期は隙間も出ない。
   ============================================================ */
/* 日付セレクタ＝R選択ピルとは別デザインの「下線タブ」（アクティブ＝ブランド濃緑の文字＋下線／
   非アクティブ＝灰文字・枠/塗りなし）。R選択ピル（丸ピル・緑塗り）と明確に区別。色は緑系で統一
   （画像参照デザインのオレンジは採らず既存パレット踏襲）。2026-06-25 ユーザー指示。 */
.nar-gateway-datestrip {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 16px;
  margin-bottom: 14px; /* 日付セレクタを1場目から離す＝競馬場間(約22px)より広く取りグループ分離（2026-06-25 ユーザー指示）。
                          display:none（単日/no-JS/空）時は無効ゆえ縮退表示に影響なし。 */
  border-bottom: 1px solid var(--nar-rule-soft); /* タブのベースライン（下線タブの土台罫） */
}
.nar-gateway-container:not(.nar-js-ready) .nar-gateway-datestrip { display: none; }
/* 単日（静的モード）や JS 未構築時は空 ＝畳む（余白を出さない）。JS が日付タブを入れると表示される。 */
.nar-gateway-datestrip:empty { display: none; }
.nar-gateway-datenav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  border: 0;
  background: none; /* 下線タブに合わせフラット化（旧: 丸み塗りボタン） */
  color: var(--nar-muted);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.nar-gateway-datenav[disabled] { opacity: 0.3; cursor: default; }
.nar-gateway-datepills {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.nar-gateway-datepill {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 9px 4px;
  border: 0;
  border-bottom: 2px solid transparent; /* 既定は透明＝下のベースライン罫が透ける。アクティブで緑下線に */
  margin-bottom: -1px;                   /* 2px 下線をベースライン罫(1px)に重ねる */
  background: none;
  color: var(--nar-muted);               /* 非アクティブ＝灰文字 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.nar-gateway-datepill.nar-gateway-dateactive {
  color: var(--nar-green);               /* アクティブ＝ブランド濃緑の文字＋下線（色統一） */
  border-bottom-color: var(--nar-green);
}

/* キーボードフォーカスリング（WCAG 2.4.7/2.4.11・日付ストリップ＋Rストリップに付与・amber トークン共有）。
   暗緑の active ピル上でも視認できるよう緑でなく amber を使う（レビュー確定 A11Y-03）。 */
.nar-gateway-datepill:focus-visible,
.nar-gateway-datenav:focus-visible,
.nar-gateway-rpill:focus-visible,
.nar-gateway-rnav:focus-visible {
  outline: 2px solid var(--nar-focus);
  outline-offset: 2px;
}

/* スクリーンリーダー専用（日付切替の live region 用・視覚的に隠す＝レイアウトに影響しない）。 */
.nar-gateway-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;
}

/* ============================================================
   各場カード
   ============================================================ */
/* 各場カードのラッパ＝レスポンシブ・グリッド（メディアクエリ不要の自動段組）。
   auto-fill + minmax(min(340px,100%),1fr)＝狭幅(スマホ)は1カラム、コンテナ約700px超で2カラムへ自動切替
   （コンテナ max-width:960px ＜ 3×340+gap=1064 ゆえ最大2カラム＝3カラムにはならない）。
   ★閾値を 400→340px に引下げ（2026-06-25 ユーザー報告）＝旧400(閾値~822px)は本文~768pxのPCで届かず1カラムのままだった。
   窓口ページは JIN:R 1カラム設定（_jinr_sidebar2col_display=1）でサイドバー無・本文全幅ゆえ PC で2カラムに到達する。
   min(340px,100%) は狭幅での横溢れ防止（モバイルは100%＝1カラム）。no-JS 静的／JS再構築 両render有効。
   直下は各場 .nar-gateway-venue のみ（データscript/広告/恒久/footer は #nar-gateway-venues の外＝兄弟）。 */
/* ============================================================
   中央競馬（JRA）指数ページへの導線カード（窓口・日付タブの上／非開催日は上部・2026-07-19 ユーザー指示）
   ＝テーマのブログカードに依存しない自前カード（nar- 接頭辞・!important 不使用・中央資産非参照）
   ============================================================ */
.nar-gateway-crossnav { margin-bottom: 40px; } /* カード↓の見出し（地方競馬AI予想一覧）まで広めスペース＝下の各場リストと視覚分離 */
.nar-gateway-crossnav-lead {
  margin: 0;                        /* 基底は余白0。段間はカード margin-top と下の隣接セレクタで作る */
  font-size: 13px;
  line-height: 1.6;
  color: var(--nar-muted);
}
/* ①地方導入文 ↔ ②中央導入文（＋カード）の小スペース＝2段を別まとまりに見せる */
.nar-gateway-crossnav-lead + .nar-gateway-crossnav-lead { margin-top: 14px; }
/* 導入文中「こちら」＝中央（JRA）指数ページへのテキストリンク（行き先=中央ゆえブルー・下線で可読リンク化） */
.nar-gateway-container .nar-gateway-crossnav-link {
  color: var(--nar-jra-blue);
  text-decoration: underline;
}
.nar-gateway-container .nar-gateway-crossnav-link:hover { text-decoration: none; }
.nar-gateway-crossnav-link:focus-visible { outline: 2px solid var(--nar-focus); outline-offset: 2px; }
.nar-gateway-container .nar-gateway-crosscard {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 0;                  /* ②中央導入文↔カードは密着（同一グループ・小さめ）。下は wrapper margin-bottom(40px) で広めに確保 */
  border: 1px solid var(--nar-jra-blue-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--nar-jra-blue-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nar-gateway-container .nar-gateway-crosscard:hover {
  border-color: var(--nar-jra-blue);
  box-shadow: 0 2px 10px rgba(0, 90, 179, 0.16);
}
.nar-gateway-crosscard:focus-visible { outline: 2px solid var(--nar-focus); outline-offset: 2px; }
.nar-gateway-crosscard-thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 72px;
  object-fit: cover;
  display: block;
  background: var(--nar-jra-blue-border); /* 画像読込前/失敗時の淡ブルー下地 */
}
.nar-gateway-crosscard-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;                     /* 行クランプ/省略を効かせる */
  padding: 8px 12px 8px 0;
}
.nar-gateway-crosscard-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #fff;
  background: var(--nar-jra-blue);
  padding: 2px 8px;
  border-radius: 3px;
}
.nar-gateway-container .nar-gateway-crosscard-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  color: var(--nar-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* 2行で省略（長い一般名詞でも崩れない） */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 各場指数リストのセクション見出し（SEO・「地方競馬AI予想一覧」）＝地方=グリーンの左罫アクセント。
   テーマ h2 装飾（::before/::after・下線等）はコンテナ詳細度で打ち消し（about-title と同方針）。 */
.nar-gateway-container .nar-gateway-list-heading {
  margin: 4px 0 12px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 4px solid var(--nar-green);
  background: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nar-ink);
}
.nar-gateway-container .nar-gateway-list-heading::before,
.nar-gateway-container .nar-gateway-list-heading::after { content: none; }

.nar-gateway-venues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  column-gap: 22px;
}
.nar-gateway-venue { padding: 16px 0 2px; }

/* 場ヘッダ帯（高さ44px・一体型バナー。場名は馬の右に重ね白縁取り）。
   ★background-size: cover ＝ヘッダ全幅を満たす（バナー画像1639×140→44px帯で描画515pxより広いヘッダでも
     右に白余白＝途切れが出ない・2026-06-25 ユーザー報告対応）。left center 固定で馬は常に左に残す。
     2カラム時(header≤469px)は高さ基準＝馬は原寸のまま右の波だけクロップ。 */
.nar-gateway-venue-header {
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background: url(../assets/course_bg.png) no-repeat left center;
  background-size: cover;
}
/* ★場ヘッダ帯（バナー）全体を各場ページ /nar/{date}/{keibajo}/ へのリンクに（2026-07-18 ユーザー指示）。
   バナーの見た目は不変＝リンクは帯（flex 子）を width/height とも満たすだけ。下線/色は付けず（場名の text-shadow
   白縁取りを保つ）、hover で帯をわずかに暗くして操作可を示す。フォーカスは amber リング（キーボード時のみ）。 */
.nar-gateway-container .nar-gateway-venue-name-link {
  flex: 1 1 auto;          /* 帯の残り幅（＝全幅）を満たす */
  align-self: stretch;     /* 帯高44pxを満たす＝バナー全体がクリック領域 */
  display: flex;
  align-items: center;     /* 内側の h3 を縦中央に（従来の header align-items:center と同じ体裁） */
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.nar-gateway-container .nar-gateway-venue-name-link:hover { background-color: rgba(0, 0, 0, 0.06); }
.nar-gateway-venue-name-link:focus-visible { outline: 2px solid var(--nar-focus); outline-offset: -2px; }
.nar-gateway-container .nar-gateway-venue-name {
  margin: 0; /* h3 既定マージンを打ち消し 44px バナー帯の整列を保持（D2・見出し化の追補） */
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--nar-ink);
  letter-spacing: 1px;
  padding-left: 96px; /* 馬の右に場名（帯高44pxに連動） */
  position: relative;
  top: -3px;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
               0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

/* Rストリップ（◀ R… ▶） */
.nar-gateway-rstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 0;
}
.nar-gateway-rnav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--nar-rnav-bg);
  color: var(--nar-rnav-fg);
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.nar-gateway-rnav[disabled] { opacity: 0.4; cursor: default; }
/* ◀▶ は JS でのみ機能するパン操作ゆえ、no-JS（.nar-js-ready 未付与）では隠す＝『有効に見えて死んだ
   ボタン』を排除（D1/D8）。no-JS は先頭5Rピル＋TOP3＋各場リンクで成立し、R6以降は「○○の全レースを
   見る」リンク先（各場ページ /nar/{date}/{keibajo}/）で到達できる。 */
.nar-gateway-container:not(.nar-js-ready) .nar-gateway-rnav { display: none; }
.nar-gateway-rpills {
  flex: 1;
  min-width: 0;                      /* flex 子が内容幅未満に縮める＝overflow-x スクロールを有効化 */
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;                  /* 全Rを1列・横スクロール（スマホ/タブレット=指で慣性ドラッグ／PC=◀▶/ホイール） */
  scroll-snap-type: x proximity;     /* ピルが緩くスナップ（mandatory より自由＝指の操作を妨げない） */
  -webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
  scrollbar-width: none;             /* Firefox: スクロールバー非表示（◀▶/ドラッグで操作） */
}
.nar-gateway-rpills::-webkit-scrollbar { display: none; } /* WebKit/Chrome/Safari: スクロールバー非表示 */
.nar-gateway-rpill {
  flex: 0 0 auto;                    /* 内容幅で並べて溢れさせる（旧 flex:1 の等幅フィルではない） */
  min-width: 54px;
  scroll-snap-align: center;         /* スナップ基準＝各ピル中央 */
  text-align: center;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 18px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--nar-rpill-future-bd);
  background: var(--nar-rpill-future-bg);
  color: var(--nar-rpill-future-fg);
}
.nar-gateway-rpill.nar-gateway-current {
  background: var(--nar-green);
  color: #ffffff;
  border-color: var(--nar-green);
}
.nar-gateway-rpill.nar-gateway-done {
  background: var(--nar-rpill-done-bg);
  color: var(--nar-rpill-done-fg);
  border-color: var(--nar-rpill-done-bg);
}

/* TOP3（CSSミニバー） */
.nar-gateway-top3 { padding: 11px 22px 4px; }

/* TOP3 見出し行（馬番 / 馬名 / 予想勝率・bar-row と同じ列幅 16/116/flex/40＋gap11 で整列・2026-06-25 ユーザー指示） */
.nar-gateway-bar-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
}
.nar-gateway-th {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: var(--nar-muted);
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.nar-gateway-th-umaban { flex: none; width: 16px; }
.nar-gateway-th-umamei { flex: none; width: 116px; text-align: center; }
.nar-gateway-th-bar { flex: 1; min-width: 0; }
.nar-gateway-th-val { flex: none; width: 40px; text-align: right; }
.nar-gateway-bar-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
.nar-gateway-umaban {
  flex: none;
  width: 16px;
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--nar-muted-2);
  font-variant-numeric: tabular-nums;
}
.nar-gateway-umamei {
  flex: none;
  width: 116px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--nar-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nar-gateway-bar {
  flex: 1;
  min-width: 0;
  display: block;
  height: 5px;
  background: var(--nar-bar-track);
  overflow: hidden;
}
.nar-gateway-bar-fill {
  display: block;
  height: 100%;
  /* 単勝指数バー＝実指数ページ(nar-index-report の Chart.js tansho)と同じ「青→紫」グラデをスケール基準で再現
     （青 rgba(59,89,214,.7) → 紫 rgba(153,102,255,.7)）。gradient をトラック全幅(0..SCALE_MAX)に張り、
     fill(width=指数%) が 0..値 をクリップ表示。--barpct(=fill幅%) で background-size をトラック幅へ正規化＝
     低指数(≤15＝30%地点まで)は青のまま・高指数で紫へ（Chart.js value≤15 solid blue と整合）。2026-06-25 ユーザー指示。 */
  background-image: linear-gradient(to right,
    rgba(59, 89, 214, 0.7) 0%, rgba(59, 89, 214, 0.7) 30%,
    rgba(153, 102, 255, 0.7) 70%, rgba(153, 102, 255, 0.7) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(10000% / max(var(--barpct, 100), 1)) 100%;
}
.nar-gateway-bar-val {
  flex: none;
  width: 40px;
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--nar-ink);
  font-variant-numeric: tabular-nums;
}

/* 「{N}Rの全頭の指数を見る」 */
.nar-gateway-allhorses {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  margin: 3px 0 0;
  padding: 9px 0;
  border: 1px solid var(--nar-allhorses-bd);
  border-radius: 9px;
  background: var(--nar-allhorses-bg);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--nar-green);
}
.nar-gateway-allhorses-arrow { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 13px; line-height: 1; }

/* 「{場名}の全レースを見る →」 */
.nar-gateway-venue-foot {
  display: flex;
  align-items: center;
  padding: 10px 0 12px;
}
.nar-gateway-venue-link {
  margin-left: auto;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--nar-green);
  letter-spacing: 1px;
}
.nar-gateway-venue-arrow { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 13px; line-height: 1; margin-left: 5px; }

/* ============================================================
   広告枠（P-G6 でレイアウト確定・min-height 予約で CLS=0）
   ============================================================ */
.nar-gateway-ad { padding: 16px 22px; } /* 区切りバー（border-top）は不要（ユーザー指示2026-07-19）＝余白のみで分離 */
.nar-gateway-ad-label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 10px;
  color: #b4ad98;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.nar-gateway-ad-slot {
  min-height: 80px; /* CLS 抑制の高さ予約（AdSense 横長ユニットの実体はこの中に描画される） */
  /* 旧プレースホルダ背景 var(--nar-ad-bg) は実広告差替で撤去（未充填時に淡ベージュ帯が出るのを回避・2026-07-18） */
}

/* ============================================================
   フッター（免責のみ・注記/ピラーリンクは監査N-02で削除 2026-07-04）
   ============================================================ */
.nar-gateway-foot { border-top: 1px solid var(--nar-hairline); padding: 18px 22px 26px; }
.nar-gateway-foot-disclaimer {
  margin: 16px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.7;
  color: var(--nar-faint);
}

/* ============================================================
   恒久セクション（P-G5・薄ページ回避の常設実体・E-E-A-T・本文導線）
   ★#nar-gateway-venues の外（兄弟）＝JS 差し替えの巻き添えにならない。
   ============================================================ */
.nar-gateway-about { border-top: 1px solid var(--nar-hairline); padding: 18px 22px; }
.nar-gateway-container .nar-gateway-about-title {
  margin: 0 0 9px;       /* テーマ h2 既定マージン/装飾を打ち消し */
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--nar-ink);
  letter-spacing: 0.5px;
  border: 0;
  background: none;
}
.nar-gateway-container .nar-gateway-about-title::before,
.nar-gateway-container .nar-gateway-about-title::after { content: none; }
.nar-gateway-about-body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.85;
  color: var(--nar-muted);
}

/* ============================================================
   次回開催（非開催日・P-G5）
   ============================================================ */
.nar-gateway-next {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 22px 14px;
}
.nar-gateway-next-label {
  flex: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: var(--nar-green);
  letter-spacing: 1px;
}
.nar-gateway-next-date {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--nar-ink);
}

/* ============================================================
   データ無し（静的モードの不正日付/データ欠落＝簡易メッセージ）
   ============================================================ */
.nar-gateway-empty { padding: 28px 22px; }
.nar-gateway-empty-msg {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--nar-muted);
}

/* ============================================================
   レスポンシブ（狭幅で馬名幅を詰める）
   ============================================================ */
@media (max-width: 380px) {
  .nar-gateway-container .nar-gateway-title { font-size: 30px; }
  .nar-gateway-umamei { width: 92px; }
  .nar-gateway-bar-val { width: 36px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .nar-gateway-rnav,
  .nar-gateway-datenav,
  .nar-gateway-venue-name-link,
  .nar-gateway-crosscard { transition: none; }
}