/* Okinawa Direct — 沖縄を知らない英語の読者に、雑誌の表紙のように見せる。
   色: 深い海(ocean)・ラグーン(lagoon)・ハイビスカス(coral)。地域の仮の写真枠も同じ色で塗る。
   字: 見出し Young Serif / 本文 Figtree(どちらも Google Fonts。読み込めなくても代わりの字で崩れない) */
:root {
  --bg: #f5f8f8; --surface: #ffffff; --ink: #13242e; --muted: #56707a; --line: #dbe5e7;
  --ocean: #0b3a53; --lagoon: #0e8f92; --lagoon-soft: #dff2f1; --coral: #d9435a; --coral-soft: #fbe6e9;
  --sun: #f2a541; --warn-soft: #fff3dc;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0d171d; --surface: #13212a; --ink: #e6eef0; --muted: #9fb3ba; --line: #22343e;
          --ocean: #cfe6ef; --lagoon: #4cc3c1; --lagoon-soft: #12302f; --coral: #f07186; --coral-soft: #3a1d23;
          --warn-soft: #3a2f17; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.7 var(--body); }
img { max-width: 100%; display: block; }
a { color: var(--lagoon); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; text-wrap: balance; color: var(--ocean); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.wrap-wide { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding-inline: 20px; }
.small { font-size: 14px; color: var(--muted); }
.eyebrow, .kicker { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }

/* ヘッダー */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand, .foot-brand { font: 400 22px/1 var(--display); color: var(--ocean); text-decoration: none; }
.brand span, .foot-brand span { color: var(--coral); margin-left: 2px; }
.top nav { display: flex; gap: 20px; flex-wrap: wrap; }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.top nav a:hover { color: var(--lagoon); }

/* 仮の写真枠(写真が決まるまで) */
.ph { display: grid; place-items: end start; color: #fff; background: linear-gradient(135deg, #0e8f92, #0b3a53); }
.ph span { font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 12px 14px; opacity: .85; text-transform: uppercase; }
.ph-south { background: linear-gradient(135deg, #f2a541, #d9435a); }
.ph-central { background: linear-gradient(135deg, #d9435a, #6b2e6e); }
.ph-north { background: linear-gradient(135deg, #2fb9a9, #0b3a53); }
.ph-islands { background: linear-gradient(135deg, #7fe0d4, #0e8f92 60%, #0b5f80); }

/* トップの大きな写真 */
.home-hero { position: relative; color: #fff; }
.home-hero-media .home-hero-img, .home-hero-media img { width: 100%; height: clamp(420px, 72vh, 680px); object-fit: cover; margin: 0; }
.home-hero-media figure { margin: 0; }
.home-hero-media figcaption { position: absolute; right: 12px; bottom: 8px; font-size: 12px; opacity: .8; }
/* 写真の上の白い文字を読めるように、下と左を暗くする(写真が明るい緑や白い砂でも読める) */
.home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,25,36,.62) 0%, rgba(5,25,36,.25) 55%, rgba(5,25,36,0) 80%),
              linear-gradient(180deg, rgba(5,25,36,0) 40%, rgba(5,25,36,.7)); }
.home-hero-text { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.home-hero-text { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; }
.home-hero-text h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4rem); max-width: 16ch; margin: 10px 0 12px; }
.home-hero-text p { max-width: 52ch; font-size: 1.15rem; margin: 0 0 22px; }
.home-hero .kicker { color: #ffd7a1; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--coral); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 999px; }
.btn:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--lagoon); border: 2px solid var(--lagoon); }
.btn-soon { background: rgba(255,255,255,.18); color: #fff; cursor: default; }

/* 直行便の帯 */
.flight { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-top: -32px; position: relative; z-index: 2; }
.flight p { margin: 2px 0; }
.flight .route { font: 400 1.3rem/1.3 var(--display); color: var(--ocean); }

/* 見出しとカード */
h2.sec { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 64px 0 18px; }
.dek { color: var(--muted); font-size: 1.15rem; max-width: 60ch; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card, .region { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card a, .region a { display: block; color: inherit; text-decoration: none; height: 100%; }
.card:hover, .region:hover { border-color: var(--lagoon); }
.card-img { aspect-ratio: 3 / 2; width: 100%; margin: 0; object-fit: cover; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img figcaption { display: none; }
.card-body { padding: 16px 18px 20px; }
.card-body h3 { font-size: 1.25rem; margin: 6px 0 8px; }
.card-body p { margin: 0; color: var(--muted); font-size: 16px; }

/* いつ行くか */
.season { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 1.5em 0; }
.season-scroll { overflow-x: auto; }
/* 横に動くのは .season-scroll だけ(.prose table の display:block・overflow を打ち消す。前は表とその箱の 2 か所が動き、
   横の動きの棒が 2 本出ていた ―― 2026-10-14)。パソコンの幅では 12 か月が入りきる大きさにし、スマホでは横に動かして見る */
.season .season-scroll table { display: table; overflow: visible; border-collapse: collapse; width: 100%; min-width: 600px; font-size: 13px; font-variant-numeric: tabular-nums; }
.season .season-scroll th, .season .season-scroll td { padding: 6px 2px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; }
.season .season-scroll tbody th { text-align: left; color: var(--muted); font-weight: 500; padding-right: 8px;
  position: sticky; left: 0; z-index: 1; background: var(--surface); }  /* 横に動かしても、行の名前は見えたまま */
.season thead th { color: var(--ocean); font-weight: 700; }
.season td small { display: block; color: var(--muted); font-size: 11px; }
.season .typh td { color: var(--coral); font-weight: 700; }
.season .band td { color: transparent; position: relative; }
.season .band td:not(:empty)::before { content: ""; position: absolute; inset: 9px 0; border-radius: 3px; }
.season .rainy td:not(:empty)::before { background: #7aa7c7; }
.season .jelly td:not(:empty)::before { background: var(--sun); }
.season .kings td:not(:empty)::before { background: #c9a227; }
.season-notes { margin: 14px 0 6px; padding-left: 1.1em; font-size: 16px; }
.season-notes li { margin: 4px 0; }

.method { margin-bottom: 64px; }
.method p { max-width: 62ch; font-size: 1.1rem; }

/* 記事 */
.art-head { padding-top: 48px; }
.art-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 10px 0 12px; }
.meta { color: var(--muted); font-size: 15px; }
.art-hero { margin: 24px 0 8px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; width: 100%; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; }
.art-hero figcaption { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.prose { padding-bottom: 24px; }
.prose a, .sources a { overflow-wrap: anywhere; }  /* 本文にそのまま書いた長い URL で、スマホの画面が横にはみ出さないように */
.prose h2 { font-size: 1.75rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose blockquote { margin: 1.4em 0; padding: 12px 18px; border-radius: 10px; background: var(--lagoon-soft); border: 0; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 24px 0; padding: 0; }
.quick div { background: var(--lagoon-soft); border-radius: 10px; padding: 10px 14px; }
.quick dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lagoon); }
.quick dd { margin: 2px 0 0; font-weight: 500; }
.toc { border-left: 3px solid var(--coral); padding: 4px 0 4px 18px; margin: 28px 0; }
.toc p { margin: 0 0 6px; font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.2em; }
.disclosure { background: var(--warn-soft); padding: 10px 14px; border-radius: 10px; font-size: 15px; }
.maplink { display: inline-block; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--coral); text-decoration: none; }
figure { margin: 1.6em 0; }
figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: 12px; background: #000; }  /* YouTube の決まり: プレーヤーは 200×200px 以上(確認役 L080。幅 375px のスマホでも高さを保つ) */
.sources { margin-top: 3em; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.related { margin: 24px 0 64px; }
.region-head { padding-top: 48px; }
.region-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 8px 0; }
.empty { color: var(--muted); }
.credits { list-style: none; padding: 0; display: grid; gap: 14px; }
.credits li { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.credits img { border-radius: 6px; flex: none; }
.credits p { margin: 0; }
.paid { font-size: .8em; color: var(--muted); }
.fresh { background: var(--lagoon-soft); border-radius: 10px; padding: 10px 14px; font-size: 15px; margin: 20px 0; }
.fresh.stale { background: var(--warn-soft); border: 2px solid var(--sun); }
.corrections { margin-top: 2em; font-size: 15px; color: var(--muted); }
/* 続報(大きな行事の記事の頭。新しい順) */
.updates { border-left: 4px solid var(--coral); background: var(--coral-soft); border-radius: 0 10px 10px 0; padding: 10px 16px; margin: 20px 0; font-size: 15px; }
.updates h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--coral); }
.updates ul { margin: 0; padding-left: 1.2em; }

/* フッター */
footer { background: var(--ocean); color: #d8e7ec; margin-top: 64px; }
@media (prefers-color-scheme: dark) { footer { background: #081118; } }
footer .wrap { padding-block: 40px; }
footer a { color: #fff; }
footer .foot-brand { color: #fff; }
footer .small { color: #a9c2ca; }

a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  .home-hero-text { bottom: 28px; }
  .flight { margin-top: 16px; }
  .art-hero { aspect-ratio: 4 / 3; }
}
/* 後日談(行事のあと)。続報(.updates)と同じ並びで、色を落ち着かせる */
.recap { border-left: 4px solid var(--line, #ccd); border-radius: 0 10px 10px 0; padding: 10px 16px; margin: 28px 0; background: rgba(0,0,0,.03); }
.recap h2 { font-size: 1.1rem; margin: 0 0 4px; }
.recap ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ── 記事の部品(2026-10-11)。写真が無くても、規模・流れ・言葉・注意を一目で。色は上の変数だけを使う(見た目の案でも崩れない) ── */
.as-of { margin: 8px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
.box-title { margin: 0 0 8px; font: 400 1.15rem/1.3 var(--display); color: var(--ocean); }
/* 数字の札: 大きな数字と短い説明。3 つ前後を横に並べ、狭い画面では縦に */
.stats { margin: 28px 0; }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats li { border-top: 2px solid var(--coral); padding-top: 10px; }
.stat-num { display: block; font: 400 clamp(1.6rem, 3.4vw, 2.1rem)/1.1 var(--display); color: var(--ocean); font-variant-numeric: lining-nums; }
.stats li span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
/* 時刻・日付の縦の流れ: 左に線と点、時刻を左の列に */
.timeline { margin: 28px 0; }
.timeline figcaption { font: 400 1.15rem/1.3 var(--display); color: var(--ocean); margin: 0 0 12px; }
.timeline ol { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline ol::before { content: ""; position: absolute; left: calc(7.5rem + 10px); top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 22px; padding: 0 0 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(7.5rem + 6px); top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.tl-when { font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); text-align: right; }  /* 線と点は列のすき間(22px)の真ん中に置く */
.tl-what { font-size: 16px; line-height: 1.55; }
@media (max-width: 560px) {
  .timeline ol::before { left: 5px; }
  .timeline li { grid-template-columns: 1fr; padding-left: 26px; }
  .timeline li::before { left: 1px; }
  .tl-when { text-align: left; }
}
/* 小さな辞書・行く前に・確かめ方の箱 */
.glossary, .good-to-know, .how-checked { margin: 28px 0; padding: 16px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.glossary dl { margin: 0; display: grid; gap: 10px; }
.glossary dt { font-weight: 700; }
.glossary dt span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.glossary dd { margin: 2px 0 0; font-size: 16px; color: var(--muted); }
.good-to-know { border-left: 4px solid var(--sun); }
.good-to-know ul, .how-checked ul { margin: 0; padding-left: 1.15em; }
.good-to-know li, .how-checked li { margin: 4px 0; font-size: 16px; }
.how-checked { background: transparent; }
/* こんな人に */
.best-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.best-for > span { font-size: 14px; color: var(--muted); margin-right: 2px; }
.best-for ul { display: contents; list-style: none; }
.best-for li { font-size: 14px; font-weight: 500; padding: 3px 12px; border-radius: 999px; background: var(--lagoon-soft); color: var(--ink); }
/* 説明図(content/diagrams/*.svg を埋め込む)。色は SVG の中の class で、この変数に合わせる */
.diagram { margin: 28px 0; }
.diagram svg { width: 100%; max-width: 560px; height: auto; display: block; }  /* 大きくしすぎると字が大きくなりすぎる */
.diagram figcaption { font-size: 14px; }
.dg-bg { fill: var(--surface); stroke: var(--line); }
.dg-free { fill: var(--lagoon-soft); stroke: var(--line); }
.dg-paid { fill: var(--coral-soft); stroke: var(--coral); }
.dg-line { stroke: var(--muted); stroke-width: 2; fill: none; }
.dg-dot { fill: var(--ink); }
.dg-key { fill: var(--coral); }
.dg-text { fill: var(--ink); font: 500 15px var(--body); }
.dg-small { fill: var(--muted); font: 400 13px var(--body); }
.dg-zone { fill: var(--ocean); font: 400 17px var(--display); }
/* 説明図はスマホで縮むので、字だけ大きくする(図の中の配置は大きい字でも重ならないように作ってある) */
@media (max-width: 560px) {
  .dg-text { font-size: 22px; }
  .dg-small { font-size: 18px; }
  .dg-zone { font-size: 22px; }
}
/* AI の絵の札(カードは添え書きが隠れるので、絵の上に小さく出す。相棒さんの判断 2026-10-11) */
.card-img.is-illust { position: relative; }
.card-img.is-illust::after { content: "AI illustration"; position: absolute; left: 8px; bottom: 8px; font: 500 11px/1 var(--body);
  padding: 4px 7px; border-radius: 3px; background: rgba(8,18,28,.72); color: #efe7d8; letter-spacing: .02em; }
/* YouTube の置き換え(押すまで YouTube から何も読み込まない。サムネイルは使わない。相棒さんの判断 2026-10-12)。
   押すと公式のプレーヤーに入れ替わる(build.py の YT_SCRIPT)。大きさは YouTube の決まり(200×200 以上、16:9 は 480×270 推奨)に合わせ、本文の幅いっぱい */
.yt-load { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; aspect-ratio: 16 / 9; min-height: 200px;
  border: 0; border-radius: 12px; cursor: pointer; color: #f4efe6; font: 600 1.05rem/1.3 var(--body); text-align: left;
  background: radial-gradient(60% 70% at 30% 30%, #2a3b4c 0%, #121c26 70%, #0b1219 100%); }
.yt-load:hover .yt-play, .yt-load:focus-visible .yt-play { transform: scale(1.06); }
.yt-load:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.yt-play { flex: none; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.75);
  position: relative; transition: transform .15s; }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 19px; border-style: solid; border-width: 13px 0 13px 20px;
  border-color: transparent transparent transparent #fff; }
.yt-text small { display: block; margin-top: 4px; font-weight: 400; font-size: .85rem; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }
.asof-old { background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--sun); padding: 0 2px; }
/* 行き方の台帳(data/routes.json)の表 ―― 参考の情報 */
.route { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 12px 16px; margin: 20px 0; }
.route figcaption { font-weight: 700; margin-bottom: 6px; }
.route-legs { margin: 0; padding-left: 1.3em; }
.route-legs li { margin: 4px 0; }
.route-total { margin: 8px 0 0; font-weight: 600; }
.route-pending { color: var(--muted, #666); font-style: italic; }
/* 連絡フォーム(build.py の contact_form_html、受け口は worker/contact.js) */
.contact-form { margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.contact-form .field { margin: 0 0 18px; }
.contact-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.contact-form .opt { font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
.contact-form small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.contact-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.contact-form button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.contact-form fieldset.kind { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.contact-form .kind legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.contact-form .kind label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.contact-form .kind input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; padding: 0; accent-color: var(--lagoon); }
.contact-form .consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 16px; line-height: 1.5; }
.contact-form .consent input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; padding: 0; accent-color: var(--lagoon); }
.contact-form .cf-turnstile { margin: 4px 0 16px; }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-off { padding: 14px 16px; border-radius: 10px; background: var(--warn-soft); }
/* 小さな絵(tools/icons.py。見出し・要点の名前・行き方の乗り物・{{icon 名前}})。字の大きさに合わせ、字の色で描く */
.ico { display: inline-flex; vertical-align: -.16em; margin-right: .35em; }
.ico svg { width: 1.05em; height: 1.05em; }
/* いつ行くかの表: 数字の後ろに小さなグラフ(build.py が欄ごとに 0〜1 の --v を渡す)。字は濃いまま、後ろは薄い色だけ(見やすさを先に)
   気温 = 青(涼しい)から赤(暑い)へ。雨 = 下から伸びる青い棒。台風 = 多いほど濃い赤 */
.season .temp td, .season .rain td, .season .typh td { position: relative; isolation: isolate; }
.season .temp td::before { content: ""; position: absolute; inset: 3px 2px; border-radius: 8px; z-index: -1;
  background: color-mix(in oklab, #f2435f calc(var(--v, 0) * 100%), #3d9be0); opacity: calc(.14 + var(--v, 0) * .34); }
.season .rain td::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; z-index: -1; border-radius: 6px 6px 3px 3px;
  height: calc(var(--v, 0) * (100% - 6px)); background: linear-gradient(180deg, #5fb3e6, #2f7fc0); opacity: .3; }
.season .typh td::before { content: ""; position: absolute; inset: 4px 10%; border-radius: 999px; z-index: -1;
  background: #f2435f; opacity: calc(var(--v, 0) * .32); }
@media (prefers-color-scheme: dark) {
  .season .temp td::before { opacity: calc(.18 + var(--v, 0) * .38); }
  .season .rain td::before { opacity: .45; }
  .season .typh td::before { opacity: calc(var(--v, 0) * .45); }
}
.stats li .ico { display: flex; margin: 0 0 6px; color: var(--lagoon); }
.stats li .ico svg { width: 1.6em; height: 1.6em; }
/* 雨の棒は欄の地に直接描く(疑似要素だと字の行の後ろで切れて見えた ―― 2026-10-15) */
.season .rain td::before { content: none; }
.season .season-scroll .rain td { background: linear-gradient(180deg, rgba(95,179,230,.42), rgba(47,127,192,.42)) center bottom 3px / 46% calc(var(--v, 0) * (100% - 6px)) no-repeat; }
/* ChatGPT で描いた絵のアイコン(site/img/icons/。無い名前は線の絵のまま) */
.ico.ico-img { width: 1.4em; height: 1.4em; }
.ico.ico-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 行き方の図(build.py の route_html): 上に 3 つの札、下に 乗る所 → 乗り物 → 降りる所 を縦の線でつなぐ */
.route .num { color: inherit; font-size: inherit; font-weight: inherit; }
.rt-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.rt-sum > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.rt-sum .ico { grid-row: 1 / 3; margin: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--lagoon-soft); color: var(--lagoon); }
.rt-sum .ico svg { width: 20px; height: 20px; }
.rt-sum b { font-size: 1.2rem; line-height: 1.1; color: var(--ocean); }
.rt-sum small { font-size: 13px; color: var(--muted); }
.rt-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.rt-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--lagoon) 0 10px, transparent 10px 16px); opacity: .55; }
.rt-stop { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; position: relative; padding: 4px 0; }
.rt-sign { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--lagoon); color: var(--lagoon); position: relative; z-index: 1; }
.rt-sign .ico { margin: 0; }
.rt-sign .ico svg { width: 26px; height: 26px; }
.rt-end .rt-sign { border-color: var(--coral); color: var(--coral); }
.rt-stop small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rt-stop b { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--ocean); }
.rt-tip { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted);
  background: var(--lagoon-soft); border-radius: 10px; padding: 7px 10px; }
.rt-tip .ico { flex: none; margin: 1px 0 0; color: var(--coral); }
.rt-ride { margin: 8px 0 8px 58px; padding: 10px 14px; border-radius: 12px; background: var(--lagoon-soft); position: relative; }
.rt-ride::before { content: ""; position: absolute; left: -41px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--lagoon); box-shadow: 0 0 0 4px var(--surface); }
.rt-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--lagoon);
  padding: 4px 12px 4px 8px; border-radius: 999px; }
.rt-line .ico { margin: 0; }
.rt-op { display: block; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rt-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); color: var(--ocean); }
.rt-chip .ico { margin: 0; color: var(--coral); }
.rt-more { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.rt-more summary { cursor: pointer; font-weight: 600; color: var(--lagoon); }
.rt-more p { margin: 6px 0 0; line-height: 1.5; }
.route figcaption { font-weight: 700; font-size: 15px; color: var(--muted); }
/* 記事のカードの列: スクロールバーは出さず、PC は左右のボタンで送る(相棒さんの依頼 2026-10-15。build.py の CAROUSEL_SCRIPT が作る) */
.cards:not(.cards-4) { scrollbar-width: none; }
.cards:not(.cards-4)::-webkit-scrollbar { display: none; }
.has-rail { position: relative; }
.rail-btn { display: none; position: absolute; top: 50%; z-index: 6; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  font: 600 30px/1 var(--body); color: var(--ocean); background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.rail-prev { left: -6px; }
.rail-next { right: -6px; }
.rail-btn:hover { background: var(--lagoon-soft); }
.rail-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rail-btn { display: grid; place-items: center; padding-bottom: 4px; } }
/* 流れを止める・流すボタン(WCAG 2.2.2 ―― 確認役 L212)。列の右上に小さく。指の端末にも出す */
.rail-pause { position: absolute; right: 8px; top: -44px; z-index: 6; border: 0; cursor: pointer; font: 600 13px/1 var(--body);
  padding: 7px 12px; border-radius: 999px; background: var(--surface); color: var(--ocean); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.rail-pause:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.has-rail { margin-top: 8px; }
.has-rail .rail-pause { top: -40px; }
.rail-btn { margin-top: -24px; }   /* ボタンの高さの半分だけ上げて、カードの列の真ん中に */