/* =============================================================================
   TOPページ V26 リデザイン
   base.css のCSS変数 (--app-accent, --app-accent-dark, --app-bg 等) を継承。
   Noto Serif JP は top.html の extra_head_pre で別途ロード。
   ============================================================================= */

:root {
  /* OGP 元サイズ (1200x630 ≈ 1.905:1) と一致させて contain でも余白ゼロにする。
     ステージの aspect-ratio で高さが決まり、 左パネルは grid stretch で追従。
     --v26-serif は base.css の :root で全ページ共通定義済み。 */
  --v26-hero-aspect: 1200 / 630;
  /* 画像エリアの高さ (= progress bar 位置の基準にも使う)。
     1920vw で 460px、 viewport が狭くなるほど純粋に比例縮小。
     固定の min を入れず vw 駆動なので 100% 連動。 */
  --v26-hero-image-h: min(24vw, 460px);
}

/* ===== V26 共通プリミティブ ===== */

.v26-accent-gold { color: var(--app-accent); }

.v26-eyebrow-italic {
  font-family: var(--v26-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.v26-section-cta {
  font-size: 0.72rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.v26-section-cta--right { margin-left: auto; }

.v26-dot { color: var(--app-subtle); opacity: 0.5; }

/* ===== Section 1 · Hero zone ===== */

.v26-hero {
  display: grid;
  /* 46/54 + slide-img padding 44px で、 メインカードの上下左右余白が均等 (= 各 44px)。
     stage 797×460 → 内側 709×372 (aspect 1.906 ≈ OGP 1.905) → 画像が pixel-perfect にフィット。 */
  grid-template-columns: 46% 54%;
  margin-bottom: 0;
  overflow: hidden;
  /* フルブリード (= 100vw まで広がる)、 hero 自体の上限は 1920px (= 4K 対策のみ)。
     縦の抑制はスライド側の max-width: 880px で行う (= ステージ navy が gutter を埋める)。 */
  --v26-hero-max-w: 1920px;
  width: min(100vw, var(--v26-hero-max-w));
  margin-left: calc(50% - min(50vw, var(--v26-hero-max-w) / 2));
  margin-right: calc(50% - min(50vw, var(--v26-hero-max-w) / 2));
  /* ヘッダーの直下に密着させる (= .app-scroll-area の上 padding 16px を相殺)。 */
  margin-top: -16px;
  /* min-height を撤去 (= 純粋に画像 + 情報カードの自然高さで決まる、 viewport 連動)。 */
}

/* -- Left: stats / brand panel ---------------------------------------- */

.v26-hero-left {
  /* V26: 左パネル = ネイビー (少し明るめ)。 */
  background: #1E3556;
  color: #fff;
  /* 上下 padding を viewport 連動 → 左パネル全体の縦サイズが viewport で縮む。 */
  padding: clamp(20px, 2vw, 40px) 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 子要素はタグライン (= 「データから推奨馬を選ぶ。」) の自然幅を基準に max-width で揃え、
     パネル中央に整列させる。 */
  align-items: center;
}

.v26-hero-left > * {
  width: 100%;
  /* キャッチコピー (= 「直感から、データへ。」) の自然幅にコンテンツ幅を合わせる。
     1920px 設計では 620px、 1280px 以下で 500px、 960px 以下で 90% にスケール。 */
  max-width: min(620px, 90%);
}

@media (max-width: 1280px) {
  .v26-hero-left > * {
    max-width: min(500px, 90%);
  }
}

.v26-hero-left-tagline {
  white-space: nowrap;
}

.v26-hero-left > * { position: relative; z-index: 1; }

.v26-hero-left-eyebrow {
  font-size: clamp(0.7rem, 0.3vw + 0.6rem, 0.8rem);
  letter-spacing: 0.35em;
  color: var(--app-accent);
  font-weight: 700;
  margin-bottom: 14px;
}

.v26-hero-left-tagline {
  /* フッターの brand title (= --v26-serif) と書体を統一。 */
  font-family: var(--v26-serif);
  /* viewport 幅で滑らかにスケール: 940px 時 2.5rem、 1920px 時 3.75rem。 */
  font-size: clamp(2.5rem, 2.2vw + 1rem, 3.75rem);
  font-weight: 800;
  line-height: 1.16;
  margin: 0 0 clamp(18px, 1.8vw, 34px);
  letter-spacing: 0.02em;
  color: #fff;
}

.v26-hero-left-prose {
  font-size: clamp(0.74rem, 0.3vw + 0.64rem, 0.88rem);
  opacity: 0.75;
  line-height: 1.85;
  margin: 0 0 clamp(18px, 1.8vw, 36px);
}

/* 左パネル 3 行 facts (= prose と stats の間の余白を埋める editorial list)。
   ゴールド極細ボーダーで topbar / footer / thumb 縦線と同じデザイン言語。 */
.v26-hero-left-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  /* ボーダーは行内の ::before/::after 疑似要素で「やや短いライン」 にする (= 編集アクセント)。
     先頭ライン用に :first-child の ::before を使う。 */
}

.v26-hero-left-fact {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  /* facts 行の縦 padding を全体的に広げて余白を埋める。 */
  padding: clamp(10px, 1vw, 18px) 0;
}

.v26-hero-left-fact::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* パネル幅の 70% で短めの区切り線 (= 全幅より控えめ)。 */
  width: 70%;
  height: 1px;
  background: rgba(196, 163, 90, 0.2);
}

.v26-hero-left-fact:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 1px;
  background: rgba(196, 163, 90, 0.2);
}

/* 最終行も bottom border を残す (= 各行と同じ間隔で並ぶ)。 stats 側の border-top を
   撤去して二重線を回避する。 */

.v26-hero-left-fact-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--app-accent);
  font-weight: 700;
  /* 全行で value の左端を揃えるため固定幅。 */
  min-width: 88px;
}

.v26-hero-left-fact-value {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.v26-hero-left-stats {
  /* facts → stats の gap を広げる (= 余白埋め)。 */
  padding-top: clamp(28px, 2.6vw, 56px);
}

.v26-hero-left-stats-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  color: var(--app-accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.v26-hero-left-stats-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* row 化で margin-bottom 撤去 (mini-stats と同列に並ぶため)。 */
}

/* 全体的中率 + mini-stats を 1 行に並べる新コンテナ。 */
.v26-hero-left-stats-row {
  /* grid で 1 行固定 (= 旧 flex-wrap だと中間幅で「ワイド」 だけ折り返してしまう謎改行が出る)。
     左 = メイン (auto)、 右 = 推奨①/②/ワイドの 3 等分 minmax(0, 1fr)。 */
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(16px, 2vw, 36px);
}

/* 71.0% パネルの sub (44/62 レース) は inline で隣接、 mini-stat の sub と縦位置を揃える。 */
.v26-hero-left-stats-row .v26-hero-left-stats-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v26-hero-left-stats-row .v26-hero-left-stats-main .v26-hero-left-stats-sub {
  margin-bottom: 0;
}

.v26-hero-left-stats-value {
  font-size: clamp(2rem, 1.6vw + 0.8rem, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--app-accent);
}

.v26-hero-left-stats-sub {
  font-size: 0.7rem;
  opacity: 0.65;
}

.v26-mini-stat-label {
  font-size: 0.64rem;
  opacity: 0.6;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 5px;
  /* 「推奨馬①」 のように 5 文字 + 丸数字を 1 行固定 (= grid 1fr で幅が狭くなった時に
     「推奨馬」 と「①」 が改行され、 隣の mini-stat の値とラインがずれる問題を防ぐ)。 */
  white-space: nowrap;
}

.v26-mini-stat-value {
  font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ワイドの値も他と同じ白文字に統一 (= 旧ゴールド override 撤去)。 */

.v26-mini-stat-sub {
  font-size: 0.64rem;
  opacity: 0.5;
  margin-top: 3px;
}

/* -- Right: hero stage + thumb strip ----------------------------------- */

.v26-hero-right {
  display: grid;
  /* stage と thumb を seamless に隣接。 stage の左に余白なし。 */
  grid-template-columns: 1fr 240px;
  overflow: hidden;
  /* V26: 中央 = 濃 navy (左端) → navy (右端) を均一ペースでグラデーション。 */
  background: linear-gradient(to right, #122844 0%, #1E3556 100%);
}

.v26-hero-stage {
  position: relative;
  overflow: hidden;
  /* 全スライドを同一 grid cell に重ねて、 アクティブのみ opacity 1 で表示 (= grid stack)。
     ステージの高さは「画像 (OGP aspect) + 情報カード」 で動的に決まる。 */
  display: grid;
  grid-template-columns: 1fr;
}

.v26-hero-progress {
  /* 画像エリアの下端 = info card の上端ライン上に配置 (= 視認性◎ + ヒーローを横切る
     編集アクセントになる)。 高さを 2 → 3px に増やして見やすく。 */
  position: absolute;
  top: var(--v26-hero-image-h);
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 4;
  transform: translateY(-100%);
}

.v26-hero-progress-bar {
  height: 100%;
  background: var(--app-accent);
  width: 0;
  transition: width 0.1s linear;
}

.v26-hero-slide {
  /* grid stack: 全スライドを同一セルに重ねる。
     ステージ全幅を使う (= 縦サイズは grid-template-columns で stage を絞ることで抑制)。 */
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out;
}

.v26-hero-slide-active {
  opacity: 1;
  visibility: visible;
}

/* 画像エリア (= OGP)。 OGP を切らずに全表示 (object-fit: contain)。
   max-width で画像エリアの横幅を縮小し、 4 方向均等 padding で margin を統一。
   slide-img の左右の navy 余白は親 stage のグラデーションが透ける。
   max-width 804 + padding 40 + height 460 → 内側 724×380 (= OGP aspect と一致) → 上下左右 40px 均等 margin。 */
.v26-hero-slide-img {
  position: relative;
  width: 100%;
  height: var(--v26-hero-image-h);
  overflow: hidden;
  /* P=44px で stage 797×460 → 内側 709×372 (= aspect 1.906) → 画像 (OGP 1.905) ぴったり。
     上下左右の余白が均等 44px に。 */
  padding: 44px;
  box-sizing: border-box;
  background: transparent;
  flex-shrink: 0;
}

.v26-hero-slide-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.v26-hero-slide-img img {
  width: 100%;
  height: 100%;
  /* OGP を切らずに全表示 (= max-height で box が wider なら navy gutter 発生)。 */
  object-fit: contain;
  display: block;
}

.v26-hero-slide-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--app-accent-dark), #0f263f);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v26-hero-slide-fallback span {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 800;
  font-size: 1.5rem;
}

/* 画像下の情報カード (= ダーク navy + head / 日程行 / コース行 / CTA の縦並び)。
   日程・コースは改行で分離、 CTA は右下に自動配置。 */
.v26-hero-slide-info {
  /* V26: 情報カードは画像エリアと同じ黒で 1 ブロック化 (= 親 #000 を透過)。 */
  background: transparent;
  /* padding を viewport で responsive スケール → 情報カードも幅高さ連動。 */
  padding: clamp(10px, 1vw, 18px) clamp(16px, 1.7vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 8px);
  flex: 1;
}

/* コース行 (= 最終行) と CTA を同一行に並べる。 CTA は右端に押し出し。 */
.v26-hero-slide-info-row--last {
  align-items: center;
}

.v26-hero-slide-info-row--last .v26-hero-slide-cta {
  margin-left: auto;
}

.v26-hero-slide-info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.v26-hero-slide-info-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}

.v26-hero-slide-info-countdown {
  margin-left: auto;
}

.v26-hero-slide-info-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.v26-hero-slide-info-label {
  color: var(--app-accent);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  min-width: 52px;
}

/* 「分析を見る」 CTA (= V26 セクション CTA と同じデザイン言語、 meta 行に inline で配置)。 */
.v26-hero-slide-cta {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--app-accent);
  text-decoration: none;
  transition: background 0.15s;
}

.v26-hero-slide:hover .v26-hero-slide-cta {
  background: #d4b56a;
}

/* -- Thumb strip --------------------------------------------------------- */

.v26-hero-thumbs {
  /* V26: 右サムネ列 = 濃 navy (= 中央グラデーション開始色 #122844 と統一)。 */
  background: #122844;
  padding: 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  /* ステージとの境目に topbar / footer と同じ subtle gold ライン。 */
  border-left: 1px solid rgba(196, 163, 90, 0.18);
  /* サムネ件数に応じて column が伸びるとヒーロー全体が引っ張られる問題を回避。
     min-height: 0 で grid stretch を解除 → 行高さは stage 側のみで決まり、
     サムネがその高さを超えたら overflow-y: auto で内部スクロール。 */
  min-height: 0;
  height: 100%;
}

.v26-hero-thumbs::-webkit-scrollbar { width: 4px; }
.v26-hero-thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }

.v26-hero-thumbs-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  color: var(--app-accent);
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.v26-hero-thumb {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: transform 0.2s;
  font: inherit;
  /* カード本体を列幅より狭くする (= 列の幅は維持、 カードだけ小さく)。 */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.v26-hero-thumb:hover { transform: translateY(-2px); }

.v26-hero-thumb-img {
  position: relative;
  aspect-ratio: var(--v26-hero-aspect);
  overflow: hidden;
  border: 2px solid transparent;
}

.v26-hero-thumb-active .v26-hero-thumb-img {
  border-color: var(--app-accent);
}

.v26-hero-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.v26-hero-thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--app-accent-dark), var(--app-accent-dark-2));
}

/* 暗色オーバーレイ (アクティブは明るく) */
.v26-hero-thumb-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 51, 0.55);
  pointer-events: none;
  transition: background 0.2s;
}

.v26-hero-thumb-active .v26-hero-thumb-img::after {
  background: rgba(13, 31, 51, 0.15);
}

/* サムネ画像下のバッジ列 (= グレード + あと N 日カウントダウン)。 */
.v26-hero-thumb-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.v26-hero-thumb-name {
  font-size: 0.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
  line-height: 1.2;
}

.v26-hero-thumb-active .v26-hero-thumb-name { color: var(--app-accent); }

/* ===== Section 2+ · Editorial body ===== */

.v26-section {
  /* v26m と同じ 1920px ネイティブパディング (= 100px / 76px、 1920 超で中央寄せ)。 */
  --v26-section-pad-x: 100px;
  --v26-section-pad-y: 54px;
  padding: var(--v26-section-pad-y) max(var(--v26-section-pad-x), calc((100% - 1920px) / 2 + var(--v26-section-pad-x)));
  background: transparent;
  /* ヒーロー (= 100vw / max 1920px) と同じ横幅でフルブリード。 */
  --v26-section-max-w: 1920px;
  width: min(100vw, var(--v26-section-max-w));
  margin-left: calc(50% - min(50vw, var(--v26-section-max-w) / 2));
  margin-right: calc(50% - min(50vw, var(--v26-section-max-w) / 2));
  box-sizing: border-box;
}

/* 1280px 以下は padding を縮小 (= v26m-section と同じスケール)。 */
@media (max-width: 1280px) {
  .v26-section {
    --v26-section-pad-x: 56px;
    --v26-section-pad-y: 48px;
  }
}
@media (max-width: 960px) {
  .v26-section {
    --v26-section-pad-x: 16px;
    --v26-section-pad-y: 28px;
  }
}


.v26-section--alt {
  background: #fff;
}

.v26-section-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

/* v26m-head と揃え: eyebrow の右に CTA を auto margin で押し出し、 ゴールドラインなし。 */
.v26-section-head .v26-section-cta {
  margin-left: auto;
}

.v26-section-title {
  font-family: var(--v26-serif);
  font-size: 2.375rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.2;
}

.v26-section-intro {
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--app-subtle);
  margin: 10px 0 32px;
  max-width: 720px;
}

/* -- Columns ----------------------------------------------------------- */

.v26-columns-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}

.v26-column-featured {
  background: #fff;
  border: 1px solid var(--app-panel-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.v26-column-featured:hover { box-shadow: var(--app-panel-shadow); }

.v26-column-featured-img {
  position: relative;
  aspect-ratio: var(--v26-hero-aspect);
  overflow: hidden;
}

.v26-column-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.v26-column-featured-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--app-accent-dark), var(--app-accent-dark-2));
}

.v26-column-featured-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v26-column-featured-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v26-serif);
  font-size: 0.7rem;
  color: var(--app-subtle);
  letter-spacing: 0.05em;
  font-weight: 700;
}

.v26-column-featured-title {
  font-family: var(--v26-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0;
}

.v26-column-featured-desc {
  font-size: 0.78rem;
  color: var(--app-text);
  line-height: 1.85;
  margin: 0;
  /* カード余白をほぼ埋めるため最大 12 行まで表示。 超過分は line-clamp が自動 …。
     抜粋は _md_to_excerpt(max_chars=600) で本文から作成、 ~12 行に収まる量。 */
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.v26-column-featured-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--app-panel-border);
}

.v26-column-featured-meta {
  font-size: 0.7rem;
  color: var(--app-subtle);
  font-family: var(--v26-serif);
}

.v26-column-secondary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* セカンダリは featured と同じ縦レイアウト (= 画像上 + 本文下) を縮小スケール。 */
.v26-column-secondary {
  background: #fff;
  border: 1px solid var(--app-panel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  flex: 1;
  transition: box-shadow 0.2s;
}
.v26-column-secondary:hover { box-shadow: var(--app-panel-shadow); }

.v26-column-secondary-img {
  position: relative;
  aspect-ratio: var(--v26-hero-aspect);
  overflow: hidden;
}

.v26-column-secondary-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.v26-column-secondary-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--app-accent-dark), var(--app-accent-dark-2));
}

.v26-column-secondary-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v26-column-secondary-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  color: var(--app-subtle);
  letter-spacing: 0.18em;
  font-family: var(--v26-serif);
  font-weight: 700;
}

.v26-column-secondary-title {
  font-family: var(--v26-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0;
}

.v26-column-secondary-desc {
  font-size: 0.72rem;
  color: var(--app-text);
  line-height: 1.75;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Hits -------------------------------------------------------------- */

/* 直近の的中レース カルーセル */
.v26-hits-carousel-wrap {
  position: relative;
}
.v26-hits-grid {
  display: grid;
  /* 4 カード表示: 全幅 - gap × 3 を 4 等分。 */
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.v26-hits-grid::-webkit-scrollbar { display: none; }
.v26-hits-grid > .v26-hit-card { scroll-snap-align: start; }

.v26-hits-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--app-panel-border);
  background: #fff;
  color: var(--app-accent-dark);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px 0;
  box-shadow: 0 4px 14px rgba(21, 46, 74, 0.12);
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.v26-hits-arrow:hover { background: var(--app-accent); color: #fff; }
.v26-hits-arrow:disabled { opacity: 0.35; cursor: default; }
.v26-hits-arrow-prev { left: -22px; }
.v26-hits-arrow-next { right: -22px; }

.v26-hit-card {
  background: var(--app-bg);
  border: 1px solid var(--app-panel-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.v26-hit-card:hover { box-shadow: var(--app-panel-shadow); transform: translateY(-2px); }

.v26-hit-card-img {
  position: relative;
  aspect-ratio: var(--v26-hero-aspect);
  overflow: hidden;
}

.v26-hit-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v26-hit-card-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--app-accent-dark), var(--app-accent-dark-2));
}

.v26-hit-card-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.v26-hit-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.v26-hit-card-title {
  font-family: var(--v26-serif);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  line-height: 1.25;
  margin: 0;
}

.v26-hit-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--app-subtle);
  flex-wrap: wrap;
}

.v26-hit-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--app-panel-border);
}

.v26-hit-card-note {
  font-size: 0.65rem;
  color: var(--app-subtle);
  font-family: var(--v26-serif);
}

/* -- Stats deep-dive --------------------------------------------------- */

.v26-stats-grid {
  display: grid;
  /* yearly を stats-left 内に移動したので 1 カラム。 */
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
}

.v26-stats-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v26-stats-tiles {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 12px;
}

.v26-stat-tile {
  background: #fff;
  border: 1px solid var(--app-panel-border);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}

.v26-stat-tile--primary {
  background: var(--app-accent-dark);
  border: none;
  color: #fff;
}

.v26-stat-tile-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--app-subtle);
  letter-spacing: 0.2em;
}

.v26-stat-tile--primary .v26-stat-tile-label { color: var(--app-accent); }

.v26-stat-tile-value {
  /* font-family は親継承 (= ヒーロー左パネルの 71.0% と同じ default sans)。 */
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--app-accent-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}

.v26-stat-tile--primary .v26-stat-tile-value {
  font-size: 3.25rem;
  color: #fff;
}

/* ワイドの金文字 override は撤去 → 他タイルと同じ navy 文字に統一。 */

.v26-stat-tile-sub {
  font-size: 0.62rem;
  color: var(--app-subtle);
}

.v26-stat-tile--primary .v26-stat-tile-sub { color: rgba(255, 255, 255, 0.55); }

.v26-method-panel {
  background: #fff;
  border: 1px solid var(--app-panel-border);
  padding: 22px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}

.v26-method-panel-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--app-accent);
  letter-spacing: 0.25em;
}

.v26-method-panel-title {
  font-family: var(--v26-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--app-accent-dark);
  margin-top: 4px;
}

.v26-method-panel-body {
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--app-text);
}

.v26-method-panel-body strong { color: var(--app-accent-dark); }

.v26-yearly {
  background: var(--app-accent-dark);
  color: #fff;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.v26-yearly > * { position: relative; z-index: 1; }

.v26-yearly-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.v26-yearly-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--app-accent);
  letter-spacing: 0.25em;
}

.v26-yearly-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 4px;
}

.v26-yearly-tabs { display: flex; gap: 4px; }

.v26-yearly-tab {
  padding: 4px 8px;
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

.v26-yearly-tab--active {
  background: var(--app-accent);
  color: #fff;
}

.v26-yearly-row {
  margin-bottom: 12px;
}

.v26-yearly-row-year {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  margin-bottom: 4px;
}

.v26-yearly-row-val {
  font-weight: 800;
  font-size: 0.7rem;
  color: #fff;
  float: right;
}

.v26-yearly-row--current .v26-yearly-row-year,
.v26-yearly-row--current .v26-yearly-row-val {
  color: var(--app-accent);
}

.v26-yearly-row-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  clear: both;
}

.v26-yearly-row-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.6s ease-out;
}

.v26-yearly-row--current .v26-yearly-row-fill {
  background: var(--app-accent);
}

.v26-yearly-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.65rem;
  opacity: 0.55;
  letter-spacing: 0.1em;
}

/* -- Features ---------------------------------------------------------- */

.v26-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.v26-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: var(--app-bg);
  border: 1px solid var(--app-panel-border);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}

.v26-feature:hover {
  box-shadow: var(--app-panel-shadow);
  transform: translateY(-2px);
}

.v26-feature-num {
  font-family: var(--v26-serif);
  font-size: 0.82rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.v26-feature-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.v26-feature-body { flex: 1; }

.v26-feature-label {
  font-family: var(--v26-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--app-accent-dark);
  line-height: 1.45;
}

.v26-feature .v26-section-cta { margin-top: 10px; display: inline-block; }

/* -- FAQ --------------------------------------------------------------- */

.v26-faq-section {
  padding-bottom: 80px;
}

/* うっすいネイビー (= ほぼオフホワイトに極々微かな青味) — 直近の的中レース と FAQ で共用。 */
.v26-section--soft,
.v26-faq-section {
  background: #ECF0F5;
}

.v26-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--app-panel-border);
}

.v26-faq-item {
  border-bottom: 1px solid var(--app-panel-border);
}

.v26-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--v26-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--app-accent-dark);
  padding: 18px 32px 18px 16px;
  position: relative;
  line-height: 1.5;
}

.v26-faq-item summary::-webkit-details-marker { display: none; }

.v26-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 18px;
  font-size: 1.2rem;
  color: var(--app-accent);
  font-weight: 800;
  line-height: 1;
}

.v26-faq-item[open] summary::after { content: "\2212"; }

.v26-faq-answer {
  font-size: 0.78rem;
  color: var(--app-subtle);
  line-height: 1.85;
  padding: 0 16px 18px;
}

/* =============================================================================
   レスポンシブ
   ============================================================================= */

@media (max-width: 1100px) {
  .v26-stats-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .v26-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  /* Hero: 2カラムを縦積みに */
  .v26-hero {
    grid-template-columns: 1fr;
    height: auto;
  }

  .v26-hero-left {
    padding: 24px 18px;
  }

  .v26-hero-left-tagline { font-size: 1.5rem; margin-bottom: 14px; }
  .v26-hero-left-prose { display: none; }   /* モバイルは prose を省略 */
  .v26-hero-left-stats { padding-top: 16px; }
  .v26-hero-left-stats-value { font-size: 3.25rem; }
  .v26-hero-left-stats-main { margin-bottom: 14px; }

  /* Right: hero stage の上にメイン画像、 下に横スクロールサムネ */
  .v26-hero-right {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .v26-hero-stage {
    height: auto;
  }

  .v26-hero-slide-info { padding: 14px 16px 16px; }
  .v26-hero-slide-info-name { font-size: 1.1rem; }

  /* Vertical thumbs → horizontal scroll on mobile */
  .v26-hero-thumbs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 14px;
    gap: 6px;
  }
  .v26-hero-thumbs-eyebrow { display: none; }
  .v26-hero-thumb { flex-shrink: 0; width: 80px; }
  .v26-hero-thumb-name { font-size: 0.6rem; }

  /* Editorial sections: 詰める */
  .v26-section { padding: 28px 16px 26px; }
  .v26-section-title { font-size: 1.5rem; }
  .v26-section-intro { font-size: 0.75rem; margin: 8px 0 20px; }
  .v26-section-cta { font-size: 0.65rem; }

  .v26-columns-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .v26-column-featured-title { font-size: 1.125rem; }
  .v26-column-featured-body { padding: 14px; gap: 8px; }
  .v26-column-featured-desc { font-size: 0.72rem; -webkit-line-clamp: 2; }

  .v26-column-secondary-body { padding: 12px 14px; }
  .v26-column-secondary-title { font-size: 0.95rem; }

  .v26-hits-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .v26-hit-card-title { font-size: 0.92rem; }
  .v26-hit-card-body { padding: 12px 14px 14px; gap: 6px; }

  .v26-stats-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .v26-stat-tile { padding: 14px 14px 12px; min-height: 100px; }
  .v26-stat-tile-value { font-size: 1.625rem; }
  .v26-stat-tile--primary .v26-stat-tile-value { font-size: 2.25rem; }

  .v26-method-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .v26-method-panel-body { font-size: 0.72rem; }

  .v26-yearly { padding: 16px; }

  .v26-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .v26-feature { padding: 14px; gap: 10px; flex-direction: column; }
  .v26-feature-label { font-size: 0.78rem; }
  .v26-feature-num { font-size: 0.7rem; }

  .v26-faq-item summary { font-size: 0.82rem; padding: 14px 30px 14px 12px; }
  .v26-faq-answer { font-size: 0.72rem; padding: 0 12px 14px; }
  .v26-faq-section { padding-bottom: 40px; }
}

@media (max-width: 540px) {
  .v26-features-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   モバイル全体補正 (= max-width: 768px) — PC 表示には影響しない
   ============================================================================ */
@media (max-width: 768px) {
  /* -- ヒーロー: 左右 2 カラム grid を縦並びに (= 右側が下に「押し下げ」 られて
        真っ黒に見えていた状態を解消)。 サムネリストも横スクロール表示に。 -- */
  .v26-hero {
    grid-template-columns: 1fr;
    --v26-hero-image-h: 64vw;
  }
  .v26-hero-left {
    padding: 24px 16px 16px;
  }
  .v26-hero-left-tagline {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
  .v26-hero-right {
    padding: 0;
  }
  .v26-hero-stage {
    border-radius: 0;
  }
  /* PC では 44px 余白で OGP 全表示してたが、 モバイルでは padding が大きすぎて
     画面に対して画像が小さく見えるので圧縮。 */
  .v26-hero-slide-img {
    padding: 14px;
  }
  /* 縦サムネ → 横スクロールに切替 (= overflow-x で横スワイプ可能) */
  .v26-hero-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 12px;
    background: #0F2440;
    -webkit-overflow-scrolling: touch;
  }
  .v26-hero-thumbs-eyebrow {
    display: none;
  }
  .v26-hero-thumb {
    flex: 0 0 46%;
    max-width: 180px;
  }

  /* -- v26m-section / v26-section: 横 padding を縮める (= 100px → 16px) -- */
  .v26m-section {
    padding: 24px 16px;
  }
  .v26-section {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .v26m-title,
  .v26-section-title {
    font-size: 1.75rem;
    margin-bottom: 16px;
  }
  .v26-section-intro {
    margin-bottom: 12px;
  }

  /* -- 人気のレースコラム: 5 カラム grid → 1 カラム縦並び、 横並びカード形式に -- */
  .v26m-columns {
    grid-template-columns: 1fr;
  }
  .v26m-col {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "img head"
      "img title"
      "img desc"
      "img more";
    gap: 4px 14px;
    padding: 14px 0;
    align-items: start;
  }
  .v26m-col-head {
    grid-area: head;
    margin: 0;
  }
  .v26m-col-img {
    grid-area: img;
    width: 96px;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  .v26m-col-img img,
  .v26m-col-img picture { width: 100%; height: 100%; object-fit: cover; }
  .v26m-col-title {
    grid-area: title;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 4px 0 0;
  }
  .v26m-col-desc {
    grid-area: desc;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v26m-col-more {
    grid-area: more;
    font-size: 0.74rem;
    margin-top: 6px;
  }
  .v26m-num { font-size: 1.05rem; }
  .v26m-col-race { font-size: 0.82rem; }

  /* -- 直近の的中レース カルーセル: grid (= 4 等分 / 高さ stretch) では:
        - カードが極端に狭くなり馬名が縦書き化
        - 一番背の高いカードに全カードの高さが揃って空カードの下に余白
        - 矢印が画面外に半分はみ出して「縦の謎区切り線」 のように見える
        という 3 つの問題が出る。 flex に切り替え + 矢印は横スワイプで代替して非表示。 -- */
  .v26-hits-carousel-wrap {
    padding: 0;
  }
  .v26-hits-grid {
    display: flex;
    flex-direction: row;
    grid-auto-columns: unset;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    align-items: start;
  }
  .v26-hit-card {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: start;
  }
  .v26-hit-card-title {
    font-size: 1.05rem;
    white-space: normal;
    writing-mode: horizontal-tb;
  }
  .v26-hit-card-info {
    flex-wrap: wrap;
    font-size: 0.78rem;
  }
  .v26-hit-card-note {
    font-size: 0.72rem;
    writing-mode: horizontal-tb;
    white-space: normal;
  }
  /* foot の margin-top: auto (= 残り高さで bottom 押し) を解除して詰める */
  .v26-hit-card-foot {
    margin-top: 6px;
  }
  /* モバイルでは横スワイプで操作するので矢印ボタンは非表示 (= 「謎の縦区切り線」 の原因) */
  .v26-hits-arrow {
    display: none;
  }

  /* -- 推奨馬実績 + このサイトでできること の 2 カラム pair を縦並びに -- */
  .v26-bottom-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* スタッツタイル 4 列 → 2x2 (sm) */
  .v26-stats-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .v26-stat-tile-value { font-size: 1.5rem; }

  /* このサイトでできること: 3 列 → 1 列 */
  .v26m-features {
    grid-template-columns: 1fr;
  }

  /* ヒーロー左の facts 行: PC では 70% アクセントだが、 モバイルでは値テキストが
     行全体に伸びるため区切り線が「足りない」 ように見える。 100% で全幅化。 */
  .v26-hero-left-fact::after,
  .v26-hero-left-fact:first-child::before {
    width: 100%;
  }

  /* モバイル時は mini-stat (= 推奨馬① 等) を上揃えにして、 main (= 72.6%) の文字の
     上端と「推奨馬①」 ラベルのラインを合わせる。 値 (= 38.7%) と main の値 (= 72.6%)
     が縦方向に近接して横のラインが視覚的に整う。 PC への影響なし (モバイル限定)。 */
  .v26-hero-left-stats-row {
    align-items: start;
  }
}
/* ============================================================================
   TOPページ V26 モダン版 — 「コラムから下」セクションのスタイル
   ★ 設計基準: コンテンツ横幅 1920px ネイティブ（上限も 1920px）。
     1920px を超える画面では中央寄せ、 1280px 以下で段階的に縮小。
   base.css の CSS変数 (--app-accent / --app-accent-dark / --app-panel-border …)
   を継承。 Noto Serif JP は top.html の <head> で別途ロードしてください:
     <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
   ============================================================================ */

:root {
  --v26m-serif: "Noto Serif JP", "Times New Roman", serif;
  --v26m-pad-x: 100px;   /* 1920px 設計時の左右余白 (=> コンテンツ約1720px) */
  --v26m-pad-y: 76px;
}

/* 1920px を超えたら中央寄せ、 以下は --v26m-pad-x を維持 */
.v26m-section {
  padding: var(--v26m-pad-y) max(var(--v26m-pad-x), calc((100% - 1920px) / 2 + var(--v26m-pad-x)));
  /* 親 .app-content-wrap (= 1200px) を抜けて 1920px 上限のフルブリードに。 */
  --v26m-section-max-w: 1920px;
  width: min(100vw, var(--v26m-section-max-w));
  margin-left: calc(50% - min(50vw, var(--v26m-section-max-w) / 2));
  margin-right: calc(50% - min(50vw, var(--v26m-section-max-w) / 2));
  box-sizing: border-box;
}
.v26m-section--alt {
  background: #fff;
  border-top: 1px solid rgba(21, 46, 74, 0.1);
  border-bottom: 1px solid rgba(21, 46, 74, 0.1);
}

/* -- section head ------------------------------------------------------ */
.v26m-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}
.v26m-eyebrow {
  font-family: var(--v26m-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--app-accent);
  letter-spacing: 0.3em;
  font-weight: 700;
}
.v26m-cta {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.v26m-title {
  font-family: var(--v26m-serif);
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  letter-spacing: 0.02em;
  margin: 0 0 40px;
  line-height: 1.18;
}

.v26m-num {
  font-family: var(--v26m-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--app-accent);
  line-height: 1;
}
.v26m-dot { color: var(--app-subtle); opacity: 0.5; }
.v26m-img-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--app-accent-dark), var(--app-accent-dark-2));
}

/* ============================================================
   1. 今週のレース傾向コラム — 罫線で区切った3カラム編集グリッド
   ============================================================ */
.v26m-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--app-accent-dark);
}
.v26m-col {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 32px 36px 36px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
}
.v26m-col + .v26m-col {
  border-left: 1px solid rgba(21, 46, 74, 0.12);
}
.v26m-col:hover { transform: translateY(-5px); }

.v26m-col-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.v26m-col-head .v26m-num { font-size: 1.75rem; }
.v26m-col-head .grade-badge { font-size: 0.8rem; }
.v26m-col-race {
  font-size: 0.75rem;
  color: var(--app-subtle);
  letter-spacing: 0.1em;
}
.v26m-col-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 18px;
}
.v26m-col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v26m-col-title {
  font-family: var(--v26m-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--app-accent-dark);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v26m-col-desc {
  font-size: 0.9375rem;
  color: var(--app-subtle);
  line-height: 1.85;
  margin: 12px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v26m-col-more {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ============================================================
   2. 直近の的中レース — クリーンなカード
   ============================================================ */
.v26m-hits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.v26m-hit {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--app-panel-border);
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.25s;
}
.v26m-hit:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(21, 46, 74, 0.1);
  border-color: var(--app-accent);
}
.v26m-hit-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.v26m-hit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v26m-hit-tags {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}
.v26m-hit-body { padding: 24px 26px 26px; }
.v26m-hit-title {
  font-family: var(--v26m-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--app-accent-dark);
  margin: 0;
}
.v26m-hit-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--app-subtle);
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   3. このサイトでできること — 罫線スペックシート + 大セリフ数字
   ============================================================ */
.v26m-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--app-panel-border);
  border-left: 1px solid var(--app-panel-border);
}
.v26m-feature {
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--app-panel-border);
  border-bottom: 1px solid var(--app-panel-border);
  padding: 38px 36px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.18s ease;
}
.v26m-feature:hover { background: #f5f6fa; }
.v26m-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.v26m-feature-head .v26m-num { font-size: 2.5rem; }
.v26m-feature-badge {
  background: var(--app-accent-dark);
  color: #fff;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.v26m-feature-label {
  font-family: var(--v26m-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-accent-dark);
  line-height: 1.55;
}
.v26m-feature-more {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ============================================================
   レスポンシブ — 1280px 以下で 1200px系の標準スケールへ落とす
   ============================================================ */
@media (max-width: 1280px) {
  :root { --v26m-pad-x: 56px; --v26m-pad-y: 48px; }
  .v26m-title { font-size: 2.125rem; margin-bottom: 26px; }
  .v26m-eyebrow { font-size: 0.75rem; }
  .v26m-cta { font-size: 0.7rem; }

  .v26m-col { padding: 22px 24px 24px; }
  .v26m-col-head { gap: 10px; margin-bottom: 14px; }
  .v26m-col-head .v26m-num { font-size: 1.375rem; }
  .v26m-col-img { margin-bottom: 14px; }
  .v26m-col-title { font-size: 1.0625rem; line-height: 1.45; }
  .v26m-col-desc { font-size: 0.72rem; line-height: 1.75; margin-top: 8px; }
  .v26m-col-more { margin-top: 14px; font-size: 0.7rem; }

  .v26m-hits { gap: 24px; }
  .v26m-hit-body { padding: 16px 18px 18px; }
  .v26m-hit-title { font-size: 1.125rem; }
  .v26m-hit-info { font-size: 0.7rem; margin-top: 6px; }

  .v26m-feature { padding: 26px 24px; min-height: 130px; gap: 10px; }
  .v26m-feature-head .v26m-num { font-size: 1.875rem; }
  .v26m-feature-label { font-size: 0.9375rem; }
  .v26m-feature-badge { font-size: 0.62rem; padding: 3px 8px; }
  .v26m-feature-more { font-size: 0.66rem; }
}

@media (max-width: 960px) {
  :root { --v26m-pad-x: 16px; --v26m-pad-y: 28px; }
  .v26m-title { font-size: 1.5rem; margin-bottom: 18px; }

  /* コラム: 3カラム → 1カラム、 罫線を縦方向に */
  .v26m-columns { grid-template-columns: 1fr; }
  .v26m-col {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-areas: "img head" "img title";
    column-gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(21, 46, 74, 0.12);
  }
  .v26m-col + .v26m-col { border-left: none; }
  .v26m-col:hover { transform: none; }
  .v26m-col-head { grid-area: head; margin-bottom: 4px; }
  .v26m-col-img { grid-area: img; margin-bottom: 0; aspect-ratio: 16/11; }
  .v26m-col-title { grid-area: title; font-size: 0.875rem; }
  .v26m-col-desc, .v26m-col-more { display: none; }

  /* 的中: 1カラム */
  .v26m-hits { grid-template-columns: 1fr; gap: 12px; }
  .v26m-hit-title { font-size: 0.9375rem; }

  /* できること: 2カラム */
  .v26m-features { grid-template-columns: 1fr 1fr; }
  .v26m-feature { padding: 16px 14px; min-height: 104px; }
  .v26m-feature-head .v26m-num { font-size: 1.375rem; }
  .v26m-feature-label { font-size: 0.8rem; }
}

@media (max-width: 540px) {
  .v26m-features { grid-template-columns: 1fr; }
}

/* ============================================================
   推奨馬実績 + このサイトでできること を横並び 2 カラムに。
   外側ラッパーがフルブリード扱いを担う + 内側の section は 50% 幅。
   ============================================================ */
.v26-bottom-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  --v26-bottom-pair-max-w: 1920px;
  width: min(100vw, var(--v26-bottom-pair-max-w));
  margin-left: calc(50% - min(50vw, var(--v26-bottom-pair-max-w) / 2));
  margin-right: calc(50% - min(50vw, var(--v26-bottom-pair-max-w) / 2));
  box-sizing: border-box;
}

/* 内側の section はフルブリードを解除して 50% カラムに収める。 */
.v26-bottom-pair > .v26-section,
.v26-bottom-pair > .v26m-section {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1100px) {
  .v26-bottom-pair { grid-template-columns: 1fr; }
}