/* 媒体トップ（ハブ・/）の CSS。課題46 D2 で各ページの <style> から移し、
   D3 PR 2（2026-10-20）で「鉄と錆止め」へ。色と書体は /assets/css/tokens.css（先に読む）。
   段は太い罫で切り、箱・角丸・影・グラデーションは使わない（tools/site-redesign-design.md §1・§3） */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 768px) { html { font-size: 18px; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base); line-height: 1.7;
}
/* リンクは本文の色＋下線（Q1） */
a { color: var(--c-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hub-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--space-md); }
.hub-header { padding: var(--space-xl) 0 var(--space-md); border-bottom: 1px solid var(--c-rule); }
.hub-brand { margin: 0; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; }
.hub-tagline { margin: var(--space-xs) 0 0; color: var(--c-text); font-size: var(--fs-md); max-width: 40em; }
.hub-section { padding: var(--space-lg) 0 0; }
/* 段は上の太い罫で切る（§1） */
.hub-h2 { margin: 0 0 var(--space-sm); padding-top: 10px; border-top: 3px solid var(--c-text);
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }
.hub-note { margin: var(--space-xs) 0 0; color: var(--c-text-mute); font-size: var(--fs-xs); }

/* 主要数値：数字は縦長の書体で大きく、下に「いつ時点・どこの発表か」。枠は細い罫だけ */
.hub-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-md); margin: 0; padding: 0; list-style: none; }
@media (min-width: 769px) { .hub-stats { grid-template-columns: repeat(4, 1fr); } }
.hub-stat { padding: var(--space-sm) 0; border-top: 1px solid var(--c-rule); }
.hub-stat-head { color: var(--c-text); font-size: var(--fs-sm); font-weight: 700; }
.hub-stat-num { font-family: var(--f-figure); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.4; color: var(--c-figure); }
.hub-stat-num--text { font-size: var(--fs-lg); line-height: 2.05; }
.hub-stat-unit { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 700; margin-left: 2px; }
.hub-stat-note { color: var(--c-text-mute); font-size: var(--fs-xs); line-height: 1.5; }

/* 入口（10/20 決定・案 E4）：識別表の作法で、海峡の絵（i-strait・B の塗り分け）・英字の小見出し・名前を並べる。
   面の帯の上下に差し色の罫。「開く」は差し色の面のボタン（状態の色面ではない） */
.hub-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: center;
  margin: 0; padding: 28px 32px; text-decoration: none; color: var(--c-text);
  background: var(--c-surface); border-top: 4px solid var(--c-accent); border-bottom: 1px solid var(--c-accent); }
.hub-cta > span { grid-column: 2; }
.hub-cta-icon { grid-column: 1; grid-row: 1 / 5; width: 136px; height: 136px;
  --a: var(--c-text); --b: var(--c-accent); --c2: var(--c-text-mute); }
.hub-cta-eyebrow { display: block; font-family: var(--f-figure); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .16em; color: var(--c-text-mute); }
.hub-cta-title { display: block; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.4; }
.hub-cta-lead { display: block; margin-top: var(--space-xs); color: var(--c-text); font-size: var(--fs-base); }
.hub-cta-go { justify-self: start; display: inline-block; margin-top: var(--space-sm); padding: 8px 20px;
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: var(--fs-md); }
.hub-cta:hover .hub-cta-go { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 600px) {
  .hub-cta { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .hub-cta > span { grid-column: 1; }
  .hub-cta-icon { grid-column: 1; grid-row: auto; width: 72px; height: 72px; margin-bottom: 8px; }
  .hub-cta-title { font-size: var(--fs-xl); }
}

/* 地図（海は地の色。いま追っている場所だけ危険の赤の印）。陸と海岸の色は地図だけの値（地図の色は対応表の外・10/20 に陸を明るく） */
.hub-map { margin: 0; overflow: hidden; background: var(--c-bg); }
.hub-map-svg { display: block; width: 100%; height: auto; }
.hub-map-sea { fill: var(--c-bg); }
.hub-map-land { fill: #343b3c; stroke: #4a5152; stroke-width: 0.5; }
.hub-map-dot { fill: var(--c-text-mute); stroke: var(--c-bg); stroke-width: 1.5; }
.hub-map-label { fill: var(--c-text); font-size: 22px; font-weight: 700; paint-order: stroke; stroke: var(--c-bg); stroke-width: 5px; stroke-linejoin: round; }
.hub-map-point--live .hub-map-dot { fill: var(--c-danger); }
.hub-map-point--live .hub-map-label { font-size: 26px; text-decoration: underline; }
.hub-map-ring { fill: none; stroke: var(--c-danger); stroke-width: 2; opacity: 0.7; }
.hub-map-point--live:hover .hub-map-ring { opacity: 1; stroke-width: 3; }

/* YouTube から来た方へ */
.hub-yt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; }
.hub-yt-label { color: var(--c-text); font-weight: 700; white-space: nowrap; }
.hub-yt-link { display: inline-block; padding: 6px 12px; text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid var(--c-rule); color: var(--c-text); }
.hub-yt-link:hover { border-color: var(--c-text); }

/* 最新の動き・回遊 */
.hub-latest { margin: 0; padding: 0; list-style: none; }
.hub-latest li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--c-rule); }
.hub-latest-title { display: block; font-weight: 700; color: var(--c-text); }
.hub-latest-src { display: block; color: var(--c-text-mute); font-size: var(--fs-xs); }
.hub-more { display: inline-block; margin-top: var(--space-sm); font-weight: 700; }
.hub-links { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-md); margin: 0; padding: 0; list-style: none; }
@media (min-width: 601px) { .hub-links { grid-template-columns: repeat(3, 1fr); } }
.hub-links a { display: block; height: 100%; padding: var(--space-sm) 0; text-decoration: none;
  border-top: 1px solid var(--c-rule); color: var(--c-text); }
.hub-links a:hover { border-top-color: var(--c-accent); }
.hub-links a:hover .hub-links-title { text-decoration: underline; }
.hub-links-title { display: block; font-weight: 700; color: var(--c-accent); }
.hub-links-lead { display: block; color: var(--c-text-mute); font-size: var(--fs-xs); }

.hub-footer { margin-top: var(--space-xl); padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--c-rule);
  color: var(--c-text-mute); font-size: var(--fs-xs); text-align: center; }
.hub-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: var(--space-sm); }
.hub-footer a { color: var(--c-text-mute); text-decoration: none; }
.hub-footer a:hover { color: var(--c-text); text-decoration: underline; }