/*
 * ruamthai.com トップページ用CSS。
 * デザインの正 docs/design-mock/top/top.html の <style> 中身をそのまま移植（改変なし）。
 * クラス名・ブレークポイント(980px/760px/560px)はデザインの正と完全一致させること。
 */
/* ---- ダークモード用トークン。<html data-theme="dark"> で切り替える（generator/assets/js/site.js
   initThemeToggle()参照）。値は役割別に集約し、CSS/インラインstyle双方から var() で参照する。 */
:root {
  --bg: #fbfaf7;            /* ページ地 */
  --bg-sub: #f3efe7;        /* 一段沈めた面（タブhover・ガイドカード・テーブルth） */
  --surface: #ffffff;       /* カード面 */
  --text: #1f2429;          /* 本文 */
  --text-mute: #6b7078;     /* 三次テキスト（パンくず・メタ） */
  --text-faint: #676c73;    /* 画像クレジット・出典等。axe color-contrast対応（2026-09-14実測、
                               白面/クリーム地/アンバー地で4.5:1以上） */
  --line: #ebe7df;          /* 罫線 */
  --line-strong: #d9d3c8;   /* 強い罫線・ボタン枠 */
  --accent: #e8801b;        /* アンバー */
  --accent-strong: #c9660a;
  --accent-soft: #ffb15e;   /* 暗い背景上のアンバー */
  /* 文字用アンバー（塗り・線・アイコンの --accent/--accent-strong とは別枠）。
     クリーム地/白面で4.5:1以上を確保する濃色（axe color-contrast対応、2026-09-14）。
     塗り・線・下線・アイコン等の非文字用途はこれまで通り --accent/--accent-strong のまま。 */
  --accent-text: #a8570a;
  /* .btn-acc・モバイルメニュータブ（アンバー地のボタン）。文字は常に白、ホバーは地色のみ濃くする
     （2026-09-14 ユーザー指定。地色は --accent より明るいオレンジ）。 */
  --btn-acc-bg: #f39436;
  --btn-acc-bg-hover: #e07d17;
  --btn-acc-fg: #ffffff;
  --mark: rgba(232, 128, 27, 0.30);  /* 本文マーカー（==text==）の下線ハイライト */
  --strong-color: #c0392b;  /* 本文の**強調**の文字色。読み手に「ここが重要」と伝える機能色で、
                               サイトの主調配色（アンバー）とは別枠。クリーム地で沈まず本文にも浮かない赤 */
  --btn-ink-bg: #1f2429; --btn-ink-fg: #ffffff; --btn-ink-bg-hover: #333b44;
  --hotel-blue: #1c64d1;
  /* バッジ（淡色地＋濃色文字）。文字色は各背景上で4.5:1以上（axe color-contrast対応、2026-09-14実測） */
  --pill-good-bg:#e6f5ec; --pill-good-fg:#157e42;
  --pill-warn-bg:#fdecd9; --pill-warn-fg:#a95608;
  --pill-neutral-bg-hover:#e5dfd1;
  /* ガイドのカテゴリーバッジ。淡色地＋濃色文字で、地はグレーに寄らない明るい色にする */
  --cat-climate-bg:#dceaf9;  --cat-climate-fg:#1d5c9e;
  --cat-exchange-bg:#d9f0e3; --cat-exchange-fg:#1c794c;
  --cat-transit-bg:#e8e0fa;  --cat-transit-fg:#6444b8;
  --cat-visa-bg:#fce3d2;     --cat-visa-fg:#a74d1d;
  --cat-living-bg:#dfe8f3;   --cat-living-fg:#37506f;
  --cat-culture-bg:#f7e2d3;  --cat-culture-fg:#94461f;
  --cat-neutral-bg:#e8ebee;  --cat-neutral-fg:#4f5862;
  --pill-danger-bg:#fbe4e0; --pill-danger-fg:#bc3b1e;
  /* 「今日の数字」等のアイコン地と線 */
  --tint-amber:#fdf6e9;  --ico-amber:#c9660a;
  --tint-green:#e6f5ec;  --ico-green:#178a49;
  --tint-purple:#ebe6f5; --ico-purple:#6f55a3;
  --tint-blue:#e6edf5;   --ico-blue:#4f6d8f;
  --tint-coral:#fbe7e0;  --ico-coral:#d9603b;
  --tint-amber-border:#f0dcb0;
  /* ニュース出典の色。文字色は8%地色（白面）で4.5:1以上（axe color-contrast対応、2026-09-14実測） */
  --src-blue:#2f6fa5; --src-purple:#6e51b9; --src-green:#25714c; --src-orange:#9d4f26; --src-navy:#445a7a; --src-default:#5b6470;
}
:root[data-theme="dark"] {
  --bg: #14171a;
  --bg-sub: #1f242a;
  --surface: #1b1f24;
  --text: #e9ecef;
  --text-mute: #a2aab3;
  --text-faint: #9098a0;    /* axe color-contrast対応（2026-09-14実測、暗色地で4.5:1以上） */
  --line: #2c323a;
  --line-strong: #3b434d;
  --accent: #f5a13f;
  /* ダーク側は暗い地に対して既存の--accentが7.9:1以上あるため文字用も同値でよい（2026-09-14実測） */
  --accent-text: #f5a13f;
  --btn-acc-bg: #f39436;
  --btn-acc-bg-hover: #e07d17;
  --btn-acc-fg: #ffffff;
  --mark: rgba(245, 161, 63, 0.26);
  --strong-color: #ff8a7a;  /* 暗い背景では濃い赤が沈むため明るい側に振る */
  --accent-strong: #e8801b;
  --accent-soft: #ffb15e;
  --btn-ink-bg: #e9ecef; --btn-ink-fg: #14171a; --btn-ink-bg-hover: #cfd5db;
  --hotel-blue: #1369e5;   /* axe color-contrast対応（2026-09-14実測）: 白文字との組み合わせで
                               元の#4b8ef0は3.27:1しかなく、余裕を持って5.0:1まで暗くした
                               （アンチエイリアシングの実測値ブレを見込み4.5:1ちょうどは避けた） */
  --pill-good-bg:#12301f; --pill-good-fg:#5fd191;
  --pill-warn-bg:#3a2a12; --pill-warn-fg:#f0a75a;
  --pill-neutral-bg-hover:#30363d;
  --cat-climate-bg:#15283c;  --cat-climate-fg:#7fb4e8;
  --cat-exchange-bg:#12301f; --cat-exchange-fg:#5fd191;
  --cat-transit-bg:#241f36;  --cat-transit-fg:#b3a0e6;
  --cat-visa-bg:#3a2a12;     --cat-visa-fg:#f0a75a;
  --cat-living-bg:#1b2734;   --cat-living-fg:#9ab3cf;
  --cat-culture-bg:#33211a;  --cat-culture-fg:#e0a37c;
  --cat-neutral-bg:#262b31;  --cat-neutral-fg:#a8b0b8;
  --pill-danger-bg:#3a1e18; --pill-danger-fg:#f08a6e;
  --tint-amber:#3a2c14;  --ico-amber:#f0a75a;
  --tint-green:#12301f;  --ico-green:#5fd191;
  --tint-purple:#241f36; --ico-purple:#b3a0e6;
  --tint-blue:#172533;   --ico-blue:#8fb4d9;
  --tint-coral:#34211a;  --ico-coral:#ef9376;
  --tint-amber-border:#5a4520;
  --src-blue:#7fb3e0; --src-purple:#b39ce8; --src-green:#6fc99a; --src-orange:#e89a6a; --src-navy:#8fa6c4; --src-default:#a2aab3;
}
* { box-sizing: border-box; }
/* 本文へスキップ（axe region対応、2026-09-14新設）。視覚的にはフォーカス時のみ表示する。
   角丸は最大6px・ピル型は禁止のサイト規約に沿い、他のCTAボタンと同じ濃色地+白文字にする。 */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}
html { overflow-x: hidden; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif; font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* hoverは0.3sフェードが標準。transitionのみ共通化し、
   色そのものは各コンポーネントの :hover 定義に委ねる。ボタンは背景色が変わるため
   background-color を含めないとフェードが効かない。 */
a, button { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
a { color: var(--text); text-decoration: none; } a:hover { color: var(--accent-text); }
img { max-width: 100%; }
.en { font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif; }
.serif { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; }
.wrap { padding-left: clamp(20px, 4.5vw, 72px); padding-right: clamp(20px, 4.5vw, 72px); }
/* ページ全体のラッパー（top.php） */
.page-root { width: 100%; background: var(--bg); position: relative; }
/* セクションの上余白。以前は各セクションの div にインラインで padding-top を
   直書きしていたため、モバイルで値を切り替えられなかった。 */
.sec { padding-top: 64px; }
.sec-lg { padding-top: 72px; }
.sec[id] { scroll-margin-top: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* リンクになっているカード（アフィリカード等）のホバー。div.card には効かせない */
a.card { transition: background-color .3s ease, border-color .3s ease; }
/* ホバーで文字色は変えない。変えると子要素（見出し・本文）へ継承されるが、子には
   transitionが無いため瞬時に切り替わって見えるため。背景のみ一段沈める。 */
a.card:hover { background:var(--bg-sub); border-color:var(--line-strong); color:var(--text); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 6px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn-ink { background: var(--btn-ink-bg); color: var(--btn-ink-fg); } .btn-ink:hover { background: var(--accent); color: #fff; }
.btn-acc { background: var(--btn-acc-bg); color: var(--btn-acc-fg); } .btn-acc:hover { background: var(--btn-acc-bg-hover); color: var(--btn-acc-fg); }
.btn-line { border: 1px solid var(--line-strong); color: var(--text); background: var(--surface); } .btn-line:hover { border-color: var(--text); color: var(--text); }
/* ニュースのカテゴリータブ。見た目と状態はすべてクラスで管理する
   （インラインstyleで background を指定すると :hover の背景が優先度で負けて効かない） */
/* .news-cat-link はニュース一覧ページ（news.php）のカテゴリー絞り込みリンク（<a>）。
   JSでの切り替えは行わずページ遷移のため js-news-tab とは別名だが、見た目は完全に揃える。 */
.js-news-tab, .news-cat-link { font-size:13px; font-weight:700; padding:7px 16px; border-radius:6px; border:1px solid var(--line-strong); background:transparent; color:var(--text); cursor:pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.js-news-tab:hover, .news-cat-link:hover { background:var(--bg-sub); color:var(--text); }
.js-news-tab.is-active, .news-cat-link.is-active { background:var(--btn-ink-bg); border-color:var(--btn-ink-bg); color:var(--btn-ink-fg); }
.js-news-tab.is-active:hover, .news-cat-link.is-active:hover { background:var(--btn-ink-bg-hover); border-color:var(--btn-ink-bg-hover); color:var(--btn-ink-fg); }
.btn-hotel { background: var(--hotel-blue); color: #fff; } .btn-hotel:hover { background: #1553b0; color: #fff; }
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; background: rgba(31,36,41,.72); color: #fff; box-shadow: 0 4px 14px rgba(20,24,30,.18); transition: opacity .2s, transform .2s, background-color .3s, color .3s; }
.back-to-top:hover { background: var(--accent); color: #fff; }
.back-to-top-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 820px) { .back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; } }
.eyebrow { font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); font-weight: 800; }
.h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 6px 0 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.28; }
.pill { display:inline-flex; align-items:center; font-family:'Manrope',sans-serif; font-size:13px; font-weight:800; letter-spacing:.02em; padding:3px 10px; border-radius: 6px; white-space: nowrap; }
.pill-good { background:var(--pill-good-bg); color:var(--pill-good-fg); }
.pill-warn { background:var(--pill-warn-bg); color:var(--pill-warn-fg); }
.pill-danger { background:var(--pill-danger-bg); color:var(--pill-danger-fg); }
/* アイコンsvgのstroke色ユーティリティ（entry/todayセクションで共有） */
.icon-accent { stroke: var(--accent); }
.icon-accent-soft { stroke: var(--accent-soft); }
.icon-green { stroke: var(--ico-green); }
.icon-purple { stroke: var(--ico-purple); }
.icon-blue { stroke: var(--ico-blue); }
.icon-coral { stroke: var(--ico-coral); }
.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.pr { font-family: 'Manrope', sans-serif; font-size:13px; font-weight: 800; letter-spacing: .12em; color: var(--text-faint); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.stat { display:flex; flex-direction:column; gap: 4px; padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.stat-value { font-size: 30px; font-weight: 800; line-height: 1.2; }
.stat-value-sm { font-size: 18px; }
.stat-unit { font-size: 13px; font-weight: 600; }
.stat-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-note { font-size: 13px; }
/* ブラウザ側JS（site.js initLiveData()）が両替レート・天気・PM2.5をAPIの最新値へ
   差し替える際、数値が急に跳ね替わって見えないよう一瞬だけopacityを落としてから
   戻す（過度な演出はしない）。対象要素にのみ付与するクラスで、通常時は他要素と
   見た目の違いはない。 */
.js-live-fade { transition: opacity .25s ease; }
.js-live-fade.is-fading { opacity: 0; }
.slide { position:absolute; inset:0; opacity:0; animation: fade 18s infinite; }
/* 1枚目は最下層に opacity:1 で固定表示し、アニメーションさせない。
   2・3枚目だけがこの上でクロスフェードするため、(1) 表示直後の1秒弱が
   全スライド opacity:0 で下地の#1f2429が露出する黒つぶれ、
   (2) 切り替え中に2枚が同時に半透明化して下地が透ける沈み、
   のどちらも起きなくなる（常に最下層が不透明=下地は理論上も常に完全に隠れる）。 */
.slide:nth-child(1) { opacity:1; animation: none; }
.slide:nth-child(2){animation-delay:6s}.slide:nth-child(3){animation-delay:12s}
@keyframes fade { 0%{opacity:0} 6%{opacity:1} 33%{opacity:1} 40%{opacity:0} 100%{opacity:0} }
.slide img { animation: ken 18s linear infinite; transform-origin: center; }
.slide:nth-child(1) img { animation-delay:0s }
.slide:nth-child(2) img { animation-delay:6s }
.slide:nth-child(3) img { animation-delay:12s }
@keyframes ken { from { transform: scale(1); } to { transform: scale(1.08); } }
.reveal { animation: up .9s cubic-bezier(.2,.7,.2,1) both; } .d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}
@keyframes up { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }

/* ---- responsive grids ---- */
/* ヘッダーのナビ行の高さ。モバイルでは78pxだとロゴ+切替だけの行に対して余白が過大なので詰める。 */
.site-nav { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-bottom: 1px solid var(--line); gap: 16px; height: 78px; }
/* 言語切替とダークモード切替。直上の時刻タイルとの間隔を確保するために下げる。 */
.nav-switches { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; width: 120px; margin-top: 8px; }
/* クロックバー（ナビ上の細いアンバー帯）。 */
.clock-bar { position: relative; height: 10px; background: var(--accent); }
/* ロゴ横のブランド行・ロゴリンクのレイアウト用ラッパー。 */
.brand-group { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.brand-link { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* タグライン（ロゴ右の縦区切り＋文言）。 */
.nav-tagline-divider { width: 1px; height: 26px; background: var(--line-strong); }
.nav-tagline-text { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* 準備中のナビ項目（SIM）。opacityは.6だと本文色に対し4.14:1でaxe color-contrast(4.5:1)未満のため
   .72へ引き上げる（axe対応、2026-09-14実測5.7:1）。 */
.nav-link-disabled { opacity: .72; }
/* 言語切替グループ。 */
.lang-switch-box { display: flex; height: 26px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 800; flex: 1 1 auto; }
.lang-switch-item { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text-mute); }
.lang-switch-item.is-active { background: var(--btn-ink-bg); color: var(--btn-ink-fg); }
.lang-switch-link { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text); }
/* 元々 inline style（特異性がCSS内のどのセレクタより高い）が a:hover の色変更を常に上書きしていたため、
   class化後も同じ見た目（hoverで文字色が変わらない）を維持する。 */
.lang-switch-link:hover { color: var(--text); }
/* ダークモード切替ボタン。 */
.theme-toggle-btn { flex: 0 0 30px; width: 30px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle-icon { stroke: var(--text); }

/* ロゴ。モバイルはナビ行を58pxに詰めているため、44px/25pxのままだと行内で窮屈になる。 */
.brand-mark { flex: 0 0 auto; width: 44px; height: 44px; }
.brand-type { font-weight: 800; letter-spacing: -0.02em; font-size: 25px; }

/* 時刻タイル。下辺の幅は直下の言語切替+ダークモード切替の幅に合わせる。
   モバイルはナビ行を58pxに詰めているため、デスクトップの34pxのままだと
   切替群(上端30px)と5px重なる。高さと下辺幅を縮めて衝突を避ける。 */
.clock-tile { position: absolute; top: 0; right: clamp(20px, 4.5vw, 72px); z-index: 3; box-sizing: border-box; padding: 4px 0 0 22px; background: #1f2429; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; width: 142px; height: 34px; clip-path: path('M0 0 H142 V30 Q142 34 138 34 H26 Q22 34 20 30.6 L0 0 Z'); }
.clock-tile .clock-label { font-weight: 700; letter-spacing: .04em; color: #fff; font-size: 9px; }
.clock-tile .clock-time { font-weight: 800; letter-spacing: .02em; color: #fff; font-size: 15px; }

.nav-links { display:flex; align-items:center; gap: clamp(14px, 2.4vw, 30px); font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-link-group { display:flex; align-items:center; gap: inherit; }
.nav-tagline { display:flex; align-items:center; gap: 16px; flex: 0 0 auto; }
/* 見出しは2行の固定コピー。ビューポート基準(vw)だと、ヒーローが2カラムになる幅域で
   テキスト欄だけが狭くなり、行が途中で折り返してコピーの改行位置が崩れる。
   コンテナ幅基準(cqw)にして欄の実幅に対して文字を縮める。1行が全角11文字なので
   8.6cqw なら常に収まる。各行は折り返さない。 */
.hero-h1-col { container-type: inline-size; color: #fff; }
.hero-h1 { font-size: clamp(24px, 8.6cqw, 72px); line-height: 1.2; margin: 16px 0 20px; font-weight: 700; letter-spacing: -0.02em; }
.hero-h1 > span { display: block; white-space: nowrap; }
/* ヒーローの高さ。インラインに置くとメディアクエリで上書きできず !important が必要になるためCSSで持つ。 */
.hero-band { height: 620px; position: relative; overflow: hidden; background: #1f2429; }
/* スライドショーの上に重ねる暗色オーバーレイ（写真の上のため色は固定値のまま） */
.hero-scrim-1 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,30,.72) 0%, rgba(20,24,30,.35) 50%, rgba(20,24,30,.1) 100%); }
.hero-scrim-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,30,0) 55%, rgba(20,24,30,.6) 100%); }
/* ヒーロー内(暗い写真上)のeyebrowだけアンバーを明るい色にする */
.hero-band .eyebrow { color: var(--accent-soft); }
.hero-lead { font-size: 17px; max-width: 560px; margin: 0 0 30px; opacity: .92; }
/* CTAは2つのボタンを同じ幅に揃える。grid + width:fit-content により、
   広い方のラベルに合わせた等幅になり、コンテナは中身なりの幅で止まる。 */
.hero-cta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; gap: 12px; }
.hero-cta .btn { justify-content: center; }
.hero-rate { background: rgba(20,24,30,.38); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 28px 28px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.hero-rate-baht { font-size: 26px; font-weight: 700; opacity: .75; }
.hero-rate-value { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
/* 取得失敗時（data-rate-value要素はあるが値が無い状態）の表示。旧.hero-rate-unavailable
   （別要素として出し分けていた）と同じ見た目を、同一要素のクラス切り替えで再現する
   （2026-09-11修正: 失敗→成功の切り替え時にJSが要素ごと作り直さずに済むようにするため）。 */
.hero-rate-value-unavailable { font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: normal; }
.hero-rate-caption { font-size: 13px; margin-top: 8px; color: rgba(255,255,255,.8); }
.hero-rate-row { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; color: #fff; }
.hero-rate-divider { height: 1px; background: rgba(255,255,255,.2); margin: 18px 0 16px; }
.hero-rate-link { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: #fff; }
/* 元はインラインの color:#fff でホバーしても変色しなかった。a:hover(0,1,1) が
   クラス(0,1,0) より強いため、明示して元の挙動を維持する。 */
.hero-rate-link:hover { color: #fff; }

.hero-grid { display:grid; grid-template-columns: 1fr 440px; gap: clamp(20px, 3vw, 48px); align-items:center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.stat-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.svc-card { display:flex; flex-direction:column; }
.svc-media { height: 210px; position:relative; }
.svc-body { padding: 22px 24px 24px; display:flex; flex-direction:column; gap: 8px; flex:1; }
.svc-title { font-size: 23px; margin: 0; font-weight: 700; }
.svc-text { margin: 0; font-size: 14px; flex: 1; }
.svc-cta { align-self: stretch; justify-content: center; margin-top: 8px; }
.services-note { font-size: 13px; }
/* SIMカード画像は準備中のため彩度を落とす */
.svc-img-desat { filter: saturate(.7); }
/* 写真上のバッジ・comingSoon（意図的な暗色/白面のため色は固定値のまま） */
.svc-badge { position: absolute; left: 16px; top: 16px; background: #fff; color: #1f2429; padding: 5px 9px; border-radius: 6px; }
.svc-coming-soon { position: absolute; right: 16px; top: 16px; background: #1f2429; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; padding: 5px 9px; border-radius: 6px; }
/* ニュース欄: featuredカードの高さを固定する。
   以前はグリッドのstretchでリスト列の高さに追従していたため、画面幅や記事の見出しの
   折り返し量で 320〜600px まで変動していた。align-items:start で追従をやめ、
   カードは固定高、リスト側は見出しを2行までに制限して両列の高さを安定させる。 */
.news-grid { display:grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
/* 高さは主要なデスクトップ幅でのリスト列の高さ(487px)に合わせてある。背景・文字色は
   featuredカードが写真上の暗色面のため固定値のまま。 */
.news-featured-card { height: 487px; position: relative; overflow: hidden; background: #1f2429; color: #fff; }
/* 見出しが長い記事でも固定高からあふれないよう行数を制限する */
.news-featured-title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size: clamp(24px, 3vw, 34px); line-height: 1.4; margin-top: 8px; font-weight: 600; color:#fff; transition: color .3s ease; }
.news-item-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight: 700; line-height: 1.5; margin-top: 4px; color:var(--text); transition: color .3s ease; }
.news-featured-title:hover { color: var(--accent-soft); }
.news-item-title:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
/* featured画像はUnsplash/Pexels実写のため背景が暗く、グローバルの a{color:var(--text)} のままだと
   クレジットリンクが背景に同化して読めない（list側は白背景のため対象外）。 */
.news-credit-light { font-size: 11px; opacity: .6; margin-top: 10px; }
.news-credit-light a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.news-credit-light a:hover { color: var(--accent-soft); }
.news-item { display:grid; grid-template-columns: 112px 1fr; gap: 16px; }
/* カテゴリータブは本文幅いっぱいに等幅で並べる（下の画像・カード列と横幅を揃える）。
   grid-auto-flow:column + grid-auto-columns:1fr で、項目数が変わっても等幅を保つ。 */
/* 列数は幅に応じて自動で増減し、常に等幅で伸び縮みする（ブレークポイントを増やさない）。
   最小幅を下回ると列数が減って自動的に折り返すため、文字が縦に潰れない。 */
.news-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: -8px 0 22px; }
/* トップページのタブは、直下 .news-grid の左列（メインニュースの画像）と横幅を揃える。
   .news-grid は 7fr 5fr / gap 24px なので、その左列と同じ計算式を使う。
   /news/ の一覧タブ(.news-index-tabs)は記事行が本文幅いっぱいのため対象外。 */
.news-tabs:not(.news-index-tabs) { width: calc((100% - 24px) * 7 / 12); }
.news-tabs .js-news-tab, .news-tabs .news-cat-link { display: flex; align-items: center; justify-content: center; text-align: center; }
.news-all-link { font-size: 13px; font-weight: 700; }
.news-source-note { font-size: 13px; margin: -6px 0 18px; }
.news-unavailable-card { padding: 32px 24px; text-align: center; font-size: 14px; }
.news-list-col { display: flex; flex-direction: column; gap: 0; }
/* featuredカード内側の中身（画像・写真オーバーレイ・テキストブロック） */
.news-featured-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; }
.news-featured-unavailable-text { font-size: 18px; font-weight: 800; }
.news-featured-photo { position: absolute; inset: 0; z-index: 0; }
.news-featured-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,30,0) 35%, rgba(20,24,30,.85) 100%); z-index: 1; }
.news-meta-row { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.news-featured-tag { color: var(--accent-soft); }
.news-featured-date { opacity: .8; }
.news-source-slot { margin-left: auto; }
.news-list-unavailable { font-size: 13px; padding: 16px 0; color: var(--text-mute); }
.news-item-thumb { height: 80px; border-radius: 6px; overflow: hidden; }
.news-item-body { min-width: 0; }
.news-item-credit { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
/* .news-item の内容によりgrid-template-columns/padding/borderが変わる（画像有無・並び順） */
.news-item.news-item-with-image { grid-template-columns: 80px 1fr; }
.news-item.news-item-text-only { grid-template-columns: 1fr; }
.news-item-first { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.news-item-middle { padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-item-last { padding: 16px 0; }

/* ---- NEWS一覧ページ（/news/）専用 ---- */
.news-list-item { display:grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.news-list-item:last-child { border-bottom: none; }
.news-list-thumb { height: 130px; border-radius: 6px; overflow: hidden; background: var(--bg-sub); }
.news-list-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight: 700; font-size: 16px; line-height: 1.55; margin-top: 6px; color: var(--text); transition: color .3s ease; }
.news-list-title:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.news-pagination { display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap: 6px; margin-top: 40px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; }
.news-pagination-link { display:inline-flex; align-items:center; justify-content:center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--text); }
.news-pagination-link:hover { background: var(--bg-sub); color: var(--text); }
.news-pagination-link.is-current { background: var(--btn-ink-bg); border-color: var(--btn-ink-bg); color: var(--btn-ink-fg); }
.news-pagination-disabled { opacity: .4; pointer-events: none; }
.news-pagination-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width: 36px; height: 36px; color: var(--text-mute); }
@media (max-width: 760px) {
  .news-list-item { grid-template-columns: 1fr; }
  .news-list-thumb { height: 180px; }
}
.prep-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prep-heading-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prep-heading { margin-top: 2px; }
.prep-pr { padding: 4px 10px; }
.guide-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* ガイドカード: ホバーは背景色で示す（文字色は変えない）。サムネイルの有無が混在しても
   崩れないよう、画像は専用の.guide-card-thumbがある場合のみ描画する（無いカードは
   領域ごと出さない）。 */
.guide-card-link { display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--bg-sub); border-radius:6px; color:var(--text); transition: background-color .3s ease, color .3s ease; }
.guide-card-thumb { position: relative; display:block; aspect-ratio: 12 / 5; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--bg); margin: -22px -22px 0; }
/* 記事番号は雑誌の通し番号のように写真へ大きく重ねる。地の箱は置かず、
   影だけで写真から浮かせる（明るい写真でも白が沈まないよう影は二重にかける） */
.guide-card-num { position: absolute; top: 15px; left: 18px; color: #fff;
  font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.72), 0 6px 36px rgba(0,0,0,.45); }
.guide-card-num-label { font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-right: 8px; vertical-align: 0.52em; }
.guide-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card-meta { display:flex; align-items:center; gap:12px; }
.guide-card-meta .guide-teaser-time, .guide-card-meta .guide-card-meta-time { margin-left: auto; margin-top: 0; }
.guide-card-link:hover { background:var(--pill-neutral-bg-hover); color:var(--text); }
/* トップページGUIDESセクションの記事カード内テキスト（記事一覧/記事ページの.guide-card-title等とは
   別マークアップのため、共有クラスは使わず専用クラスにする）。番号はタイトルより控えめにする
   （2026-09-11: 30px/800だと番号が主役に見えるため13pxへ縮小） */
.guide-teaser-num { font-size: 13px; font-weight: 700; color: var(--accent-text); line-height: 1; }
.guide-teaser-title { font-size: 16px; line-height: 1.5; }
.guide-teaser-desc { font-size: 14px; }
.guide-teaser-time { margin-top: -2px; }
/* 読了時間のチップ。カテゴリーバッジと同じ幅・角丸に揃え、意味色を持たせないため枠線で示す */
.guide-teaser-time, .guide-card-meta-time { display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 72px; padding: 3px 6px; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--text) 78%, transparent); white-space: nowrap; }
.entry-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.entry-grid > .card { display:flex; flex-direction:column; }
.entry-updated-note { font-size: 13px; }
.entry-card { padding: 22px 24px; }
.entry-card-amber { background: var(--tint-amber); border-color: var(--tint-amber-border); }
.entry-card-head { display: flex; align-items: center; justify-content: space-between; }
.entry-icon-wrap { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.entry-icon-wrap-strong { background: var(--accent-strong); }
.entry-icon-wrap-green { background: var(--tint-green); }
.entry-icon-wrap-purple { background: var(--tint-purple); }
.entry-icon-wrap-blue { background: var(--tint-blue); }
.entry-icon-wrap-coral { background: var(--tint-coral); }
.entry-tag { margin-top: 14px; }
.entry-value { font-size: 17px; font-weight: 700; margin-top: 4px; }
.entry-novisa-value-row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.entry-novisa-value { font-size: 34px; font-weight: 800; }
/* 打ち消し線の旧価格。ダークモードで固定色#a89a7dが破綻するため二次テキストのトークンで代替
   （--mutedトークンが無いため color-mix で本文色を薄めた値を使用。axe color-contrast対応
   2026-09-14実測: 55%は3.57:1で不足していたため66%へ引き上げ） */
.entry-novisa-value-old { font-size: 15px; text-decoration: line-through; color: color-mix(in srgb, var(--text) 66%, transparent); }
/* 進捗バーの地色。固定色#e9d9b3がダークで破綻するためアンバーのボーダートークンで代替 */
.entry-novisa-progress { height: 5px; border-radius: 6px; background: var(--tint-amber-border); position: relative; overflow: hidden; width: 180px; margin-top: 10px; }
.entry-novisa-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--accent-strong); border-radius: 6px; }
.entry-body { margin: 8px 0 0; font-size: 13px; }
.entry-body-first { margin: 12px 0 0; font-size: 13px; }
.entry-cta { justify-content: center; margin-top: auto; }
.entry-source { font-size: 11px; color: var(--text-faint); }
.entry-source-cta { margin-top: 8px; }
.entry-source-solo { margin-top: auto; padding-top: 10px; }
/* フッター全体（暗色地・白文字はライト/ダーク共通の固定配色のため色は据え置き） */
.footer-grid { display:flex; justify-content:space-between; align-items:flex-start; gap: 40px; flex-wrap: wrap; margin-top: 80px; background: #1f2429; color: #fff; padding: 44px clamp(20px,4.5vw,72px) 40px; }
.footer-cols { display:flex; gap: clamp(28px, 5vw, 64px); font-size: 13px; flex-wrap: wrap; }
.footer-brand-col { max-width: 360px; }
.footer-brand-name { font-size: 20px; font-weight: 800; }
.footer-tagline { font-size: 13px; opacity: .7; margin-top: 8px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social-link { color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col-title { opacity: .6; font-size: 13px; letter-spacing: .05em; }
.footer-col-link { color: #fff; }
.footer-col-link-disabled { color: #fff; opacity: .6; }
.footer-source-line { background: #1f2429; color: rgba(255,255,255,.55); padding: 0 clamp(20px,4.5vw,72px) 12px; font-size: 12px; }
/* axe link-in-text-block対応（2026-09-14）: 出典行の文中リンクは色だけで区別されていたため
   下線を追加する（色は元のまま。文字色そのものは元々4.5:1以上あり問題なし）。 */
.footer-source-link { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
/* axe color-contrast対応（2026-09-14実測）: rgba(255,255,255,.4)は#1f2429地で3.73:1しかなく
   4.5:1未満だったため、不透明度を.55へ引き上げる（5.68:1）。 */
.footer-copyright { background: #1f2429; color: rgba(255,255,255,.55); padding: 0 clamp(20px,4.5vw,72px) 28px; font-size: 12px; }
/* 元々 inline style（特異性がCSS内のどのセレクタより高い）が a:hover の色変更を常に上書きしていたため、
   class化後も同じ見た目（hoverで文字色が変わらない）を維持する。 */
.footer-social-link:hover, .footer-col-link:hover { color: #fff; }
.footer-source-link:hover { color: rgba(255,255,255,.8); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.today-head { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px clamp(16px,2.5vw,26px); border-bottom: 1px solid var(--line); background:var(--bg-sub); flex-wrap: wrap; }
.today-wrap { margin-top: 24px; position: relative; z-index: 2; }
.today-card { box-shadow: 0 10px 30px rgba(31,36,41,.08); }
.today-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.today-note { font-size: 13px; }
.today-note-link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > div:last-child { max-width: 420px; }
  .news-grid { grid-template-columns: 1fr; }
  /* 1列になるのでタブも本文幅いっぱいに戻す。 */
  .news-tabs:not(.news-index-tabs) { width: auto; }
  .news-featured-card { height: auto; min-height: 320px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .prep-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .entry-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* カード枚数が8枚(4列×2行)に増えたため、980px以下の2列では4行になる。 */
}
/* ヘッダーの横幅対策: ロゴ群+ナビ6項目+切替群で約1090px必要。まずタグライン、次にナビ項目を畳む */
/* ヘッダーの表示切替は「実際に収まる幅」で決める（2026-09-10 実測）。
   収まる最小幅: JA=リンク1090px/タグライン1310px、EN=リンク1190px/タグライン1430px。
   これを下回ると言語切替・ダークモード切替が画面外へ押し出され横スクロールが出る。
   文言や項目を増やしたら必ず再実測すること。
   デスクトップリンクを隠す幅と、下のモバイルメニューを出す幅は必ず一致させる
   （ずれるとナビゲーションが存在しない幅の帯ができる）。 */
@media (max-width: 1309px) { html[lang="ja"] .nav-tagline { display:none; } }
@media (max-width: 1429px) { html[lang="en"] .nav-tagline { display:none; } }
@media (max-width: 1089px) { html[lang="ja"] .nav-desktop-links { display:none; } }
@media (max-width: 1189px) { html[lang="en"] .nav-desktop-links { display:none; } }
@media (max-width: 760px) {
  .site-nav { height: 64px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-type { font-size: 20px; }
  /* 時刻はヘッダーの主要情報なので小さくしすぎない。タイルの高さを確保したぶん
     ナビ行を64pxにして、直下の言語切替との間隔を保つ。 */
  .clock-tile { width: 128px; height: 32px; padding-top: 3px; clip-path: path('M0 0 H128 V28 Q128 32 124 32 H24 Q20 32 18 29 L0 0 Z'); }
  .clock-tile .clock-label { font-size: 9px; }
  .clock-tile .clock-time { font-size: 15px; }
  .nav-switches { margin-top: 16px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: none; }
  /* 390px幅ではセル内幅が134pxしかなく、30pxの数値とピルが横に並びきらずに
     ピルがセル外へあふれていた。数値・ピル・注記を一段小さくして収める。 */
  .stat { padding: 14px 14px; gap: 3px; }
  .stat-value { font-size: 24px; line-height: 1.15; }
  .stat-value-sm { font-size: 16px; }
  .stat-unit { font-size: 12px; }
  .stat-row { gap: 6px; }
  .stat-note { font-size: 12px; line-height: 1.45; }
  .stat .tag { letter-spacing: .06em; font-size: 11px; }
  .stat .pill { font-size: 11px; padding: 2px 7px; }
  /* 390px幅ではPC用の64/72pxは見出し上が空きすぎる。 */
  .sec { padding-top: 36px; }
  .sec-lg { padding-top: 40px; }
  /* ニュース項目のメタ行(トップページ): カテゴリー名が長いと出典バッジ(nowrap)に
     押されて文字が1文字ずつ縦に潰れる。折り返しを許可し、カテゴリー名は改行させない。
     出典チップは flex-basis:100% で独立した行に落とし、見出しの直上に置く。
     /news/ の一覧は元の並び(バッジ右寄せ)のままとするため対象外。 */
  .news-meta-row { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; }
  .news-meta-row .tag, .news-list-meta-row .tag { white-space: nowrap; }
  .news-meta-row .news-source-slot { flex: 0 0 100%; margin-left: 0; }
  /* モバイルでは見出しを省略しない。文字を小さくして全文を表示する。
     (/news/ 一覧の .news-list-title は対象外) */
  .news-featured-title { display: block; overflow: visible; -webkit-line-clamp: none; font-size: 20px; line-height: 1.45; }
  .news-item-title { display: block; overflow: visible; -webkit-line-clamp: none; font-size: 14.5px; line-height: 1.5; }
  /* ニュースのカテゴリータブ: モバイルでは横幅いっぱいに3列で均等に並べる。
     トップページ(.js-news-tab)と一覧ページ(.news-cat-link)の両方が対象。 */
  .news-tabs .js-news-tab, .news-tabs .news-cat-link { display: flex; align-items: center; justify-content: center; text-align: center; padding-left: 4px; padding-right: 4px; }
  /* セクション見出しはモバイルでは1段小さく。 */
  .h2 { font-size: 22px; }
  /* サービスカードはモバイルでは画像・余白・行間を詰め、CTAは横幅いっぱいにする。
     line-height は body 既定の 1.75 が継承されて行間が開いていた。 */
  .svc-media { height: 160px; }
  .svc-body { padding: 16px 18px 18px; gap: 6px; }
  .svc-title { font-size: 19px; line-height: 1.35; }
  .svc-text { font-size: 13px; line-height: 1.6; }
  .svc-cta { margin-top: 10px; }
  .svc-grid { grid-template-columns: 1fr; }
  .prep-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  /* モバイルはヒーローを内容の高さに合わせる。以前は padding-bottom:300px が入っており、
     レートカードの下に大きな空白ができていた。 */
  .hero-band { height: auto; padding-top: 28px; padding-bottom: 32px; }
  /* CTAはモバイルでは文言長でボタン幅が不揃いになるため、横並び・等幅にする。 */
  .hero-cta { width: auto; gap: 10px; }
  .hero-cta .btn { min-width: 0; text-align: center; padding-left: 8px; padding-right: 8px; font-size: 13px; }
  /* レートカードはモバイルでは余白と文字を詰める。 */
  /* レートカードはモバイルではカード全体を小さくする（余白だけでなく数値も縮める）。 */
  .hero-rate { padding: 14px 16px 12px; }
  .hero-rate .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .hero-rate-baht { font-size: 17px; }
  .hero-rate-value { font-size: 36px; }
  .hero-rate-value-unavailable { font-size: 15px; }
  .hero-rate-caption { font-size: 11.5px; margin-top: 4px; }
  .hero-rate-row { margin-top: 4px; }

  .hero-grid { position: static !important; }
}
@media (max-width: 560px) {
  .footer-grid { flex-direction: column; }
}

/* ---- モバイルメニュー（デスクトップナビが収まらない幅で代替する）----
   出す幅は .nav-desktop-links を隠す幅と一致させる（JA:1089px以下 / EN:1189px以下）。
   ブロック自体はEN側の広い方(1189px)で定義し、JAの1090〜1189pxだけ下で打ち消す。
   タブは画面右端に固定し、押すとパネル（画面幅いっぱい）が右からスライドインする。
   開閉はJS(assets/js/site.js initMobileMenu())が .is-open の付け外しで行う。
   transform(translateX)のみをアニメーションさせ、left/rightの変化によるレイアウト
   再計算を避ける。 */
.mobile-menu-tab { display: none; }
.mobile-menu-panel { display: none; }
@media (max-width: 1189px) {
  .mobile-menu-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    right: 0;
    top: 22%;
    transform: translateY(-50%);
    z-index: 70;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* 文言が「メニュー」(4文字)と「閉じる」(3文字)で入れ替わるため、
       縦書きだと高さが変わってしまう。高さを固定して開閉で動かないようにする。 */
    height: 118px;
    padding: 0 7px;
    border: none;
    border-radius: 6px 0 0 6px;
    background: var(--btn-acc-bg);
    color: var(--btn-acc-fg);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,24,30,.2);
  }
  .mobile-menu-tab:hover { background: var(--btn-acc-bg-hover); color: var(--btn-acc-fg); }

  .mobile-menu-panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    width: 100%;
    /* 背後のページが薄く透けるようにする（完全に覆うと現在地が分からなくなる）。
       ぼかしは使わず素の透過にする。 */
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s ease;
    pointer-events: none;
  }
  .mobile-menu-panel.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }
  .mobile-menu-panel-inner { display: flex; flex-direction: column; padding: 26px 22px 48px; }
  /* パネル冒頭のブランド行。開いた面が「どのサイトのメニューか」を示す。 */
  .mobile-menu-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 2px solid var(--accent); }
  .mobile-menu-brand { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
  .mobile-menu-tagline { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .mobile-menu-group { display: flex; flex-direction: column; }
  .mobile-menu-link, .mobile-menu-link-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
  }
  a.mobile-menu-link:hover { color: var(--accent-text); }
  /* フォーカスリングはブラウザ既定だと角の丸みも色も浮くため、サイトの配色で描く。 */
  a.mobile-menu-link:focus-visible { outline: none; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; }
  .mobile-menu-link-disabled { color: var(--text-mute); }
}
/* JAは1090px以上でデスクトップリンクが収まるため、この帯ではタブを出さない。 */
@media (min-width: 1090px) and (max-width: 1189px) {
  html[lang="ja"] .mobile-menu-tab, html[lang="ja"] .mobile-menu-panel { display: none; }
}
@media (max-width: 1189px) and (prefers-reduced-motion: reduce) {
  .mobile-menu-panel { transition: none; }
}

/* ---- GUIDE（記事一覧・記事ページ）---- */
/* 記事ページはヘッダー部(.guide-shell)とサイドバー付き本文(.guide-layout)を同じ幅
   （本文800px+gap40px+サイドバー300px=1140px）でmargin:0 auto中央寄せし、左端を揃える。
   一覧ページ(guides.php)は.guide-shellのみ使い続けるため800px時代の見た目は変えない。 */
.guide-shell { max-width: 800px; margin: 0 auto; }
.guide-shell--wide { max-width: 1140px; }
.guide-shell--wide .guide-title, .guide-shell--wide .guide-lead { max-width: 760px; }
.guide-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mute); flex-wrap: wrap; }
.guide-breadcrumb a { color: var(--text-mute); }
.guide-breadcrumb a:hover { color: var(--accent-text); }
.guide-breadcrumb-current { color: var(--text); font-weight: 700; }
.guide-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--text-mute); margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* 最終更新は本文カラムの右端に寄せる（読了時間のチップは左のまま）。
   メタ行は .guide-shell 側にあり幅がサイドバーまで含む全幅のため、2列時は
   .guide-layout と同じ計算（1fr 300px / gap 40px）で本文カラム幅に合わせる。 */
.guide-meta-row > :last-child { margin-left: auto; }
.guide-chip { display: inline-flex; align-items: center; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 6px; background: var(--bg-sub); color: var(--text); white-space: nowrap; }

/* Markdown::render()が出力するクラス（generator/src/Markdown.php参照）。 */
.guide-page-p { font-size: 16px; line-height: 1.9; margin: 0 0 20px; color: var(--text); }
/* 記事末尾の出典。本文より一段小さく薄くする。13pxを下回らせず、axe color-contrast対応
   （2026-09-14実測）のため4.5:1以上を確保できる68%まで混ぜる（60%は4.14:1で不足していた）。 */
.guide-page-source {
  font-size: 13px;
  line-height: 1.85;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  margin-top: 28px;
}
.guide-page-source { margin-bottom: 8px; }
/* まとめ（[summary]）。記事の結論を1枚のカードにまとめて視覚的に区切る。 */
.guide-page-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 24px 22px;
  margin: 36px 0 0;
}
.guide-page-summary .guide-page-h2 { margin-top: 24px; }
.guide-page-summary .guide-page-ol,
.guide-page-summary .guide-page-ul,
.guide-page-summary .guide-page-p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .guide-page-summary { padding: 2px 16px 18px; }
}
.guide-page-ul.guide-page-source-list,
.guide-page-ol.guide-page-source-list {
  font-size: 13px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  margin-bottom: 0;
}
.guide-page-ul.guide-page-source-list li { margin-bottom: 4px; }
.guide-page-source a,
.guide-page-source-list a,
.guide-page-ul.guide-page-source-list a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.guide-page-h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; margin: 44px 0 18px; letter-spacing: -0.01em; color: var(--text); }
.guide-page-rule { width: 5px; height: 22px; background: var(--accent); border-radius: 3px; flex: 0 0 auto; }
.guide-page-h3 { font-size: 17px; font-weight: 700; margin: 28px 0 12px; color: var(--text); }
.guide-page-ul, .guide-page-ol { margin: 0 0 20px; padding-left: 22px; font-size: 16px; line-height: 1.85; color: var(--text); }
.guide-page-ul li, .guide-page-ol li { margin-bottom: 6px; }
.guide-page-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 6px; }
.guide-page-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.guide-page-table th, .guide-page-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.guide-page-table th { background: var(--bg-sub); font-weight: 700; }
/* 1列目は行の見出しにあたるため折り返さない（「チェンマイ」が2行に割れるのを防ぐ）。
   表全体は .guide-page-table-wrap の overflow-x でスクロールするので、狭い画面でも崩れない。 */
.guide-page-table th:first-child, .guide-page-table td:first-child { white-space: nowrap; }
/* 狭い画面では4列の表が各セルで折り返して読めなくなるため、行ごとのブロックへ組み替える。
   列見出しは Markdown::renderTable() が td に付けた data-label を ::before で出す。
   1列目は行の見出しとして扱い、ラベルを出さずに大きく表示する。 */
@media (max-width: 560px) {
  .guide-page-table-wrap { overflow-x: visible; }
  .guide-page-table { font-size: 14px; }
  .guide-page-table thead { display: none; }
  .guide-page-table tbody, .guide-page-table tr, .guide-page-table td { display: block; }
  .guide-page-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .guide-page-table tr:last-child { border-bottom: 0; }
  .guide-page-table td { border: 0; padding: 3px 0; }
  .guide-page-table td:first-child { font-weight: 700; font-size: 15px; margin-bottom: 5px; }
  .guide-page-table td[data-label] { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
  .guide-page-table td[data-label]::before { content: attr(data-label); color: var(--text); opacity: 0.82; font-weight: 600; }
  .guide-page-table td.md-table-right { text-align: left; }
}
/* Markdownの表で区切り行が ---: の列。直前の th/td 規則(詳細度0,1,1)に負けないよう
   要素セレクタを含めて指定する。 */
.guide-page-table th.md-table-right, .guide-page-table td.md-table-right { text-align: right; }
.guide-page-table tr:last-child td { border-bottom: none; }
.guide-page-p a, .guide-page-ul a, .guide-page-ol a, .guide-page-table a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* 本文中の重要な一文のマーカー（Markdown の ==text==）。文字色は本文の濃色のままにし、
   背景側だけアンバーを敷く（文字をアクセント色にすると本文の可読性が落ちるため）。
   下線状にするため線形グラデーションで下40%だけ着色する。角丸は付けない。 */
.guide-page-p mark.guide-mark,
.guide-page-ul mark.guide-mark,
.guide-page-ol mark.guide-mark,
.guide-page-table mark.guide-mark {
  background: linear-gradient(transparent 72%, var(--mark) 72%);
  color: inherit;
  padding: 0 1px;
}

/* 本文の**強調**。太字だけでは強調されていることが伝わらないため文字色も変える。
   純色の赤は使わず、サイトのアンバー系で最も濃い色（赤みの橙）を充てる。 */
.guide-page-p strong,
.guide-page-ul strong,
.guide-page-ol strong,
.guide-page-table strong {
  color: var(--strong-color);
  font-weight: 700;
}

/* GuideContent::renderFigure()が出力する図版（[figure:xxx]ショートコード）。
   SVGはインライン展開のためルート<svg>にrenderFigure()が min-width（=viewBox幅）を
   inline styleで付与している。狭い画面でその幅を下回る場合はここでの overflow-x:auto により
   横スクロールさせ、.guide-page-table-wrapと同じ考え方で縮小して文字を潰さない。 */
/* 図の内部配色（季節カレンダー等の緑・橙・赤の帯）は意味を持つため変更しない。代わりに図を
   常に明るい「紙」の上に置くことで、ダークモードでも図だけが唐突に白く浮かないようにする。
   ライト/ダーク共通の固定値（トークン化しない）。キャプションも同じ紙の内側に入るため、
   常に読める固定の濃色にしている。 */
.guide-figure { margin: 8px 0 28px; overflow-x: auto; background: #fbfaf7; border: 1px solid #ebe7df; border-radius: 6px; padding: 16px; box-sizing: border-box; }
.guide-figure svg { display: block; width: 100%; height: auto; }
.guide-figure img { display: block; width: 100%; height: auto; border-radius: 6px; }
.guide-figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #1f2429; }

/* 記事ヘッダー写真（frontmatter hero_image）。手動選定の1枚を記事タイトルの上に表示する。 */
.guide-hero-figure { margin: 22px 0 0; }
.guide-hero-image { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 6px; }
.guide-hero-credit { margin-top: 6px; font-size: 12px; color: var(--text-faint); }
.guide-hero-credit a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }

/* アフィリエイトカード本体（.card内のマークアップ）はトップページ PREP セクションと共通
   （AffiliateCard::renderCard()生成、単一の正はgenerator/src/AffiliateCard.php）。
   このラッパーはガイド記事ページでの単独配置（本文中ショートコード・サイドバー・記事末尾）
   時の余白のみを持つ。 */
/* ラッパー自身は（記事末尾グリッドで）高さが揃うが、中のカードは中身の量だけの高さになり
   本文の長短で白い箱の下端がずれる。ラッパーを縦フレックスにしてカードを伸ばし、
   文言の長さに関わらずカードの高さを揃える。 */
.guide-affiliate-card-wrap { margin: 28px 0; display: flex; flex-direction: column; }
.guide-affiliate-card-wrap > .card { flex: 1; }
/* 記事末尾のアフィリカードは横並び（1枚のときは幅いっぱい、2枚以上で自動的に並ぶ）。
   狭い画面では1列に落ちる。サイドバー内のカードは下の .guide-sidebar-affiliate で余白を打ち消す */
.guide-end-affiliates { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 20px; margin: 28px 0 0; }
.guide-end-affiliates .guide-affiliate-card-wrap { margin: 0; }

.guide-next-grid, .guide-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.guide-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.guide-card-title { font-size: 16px; font-weight: 700; color: var(--text); }
.guide-card-desc { font-size: 14px; color: var(--text); }
.guide-empty { text-align: center; padding: 64px 20px; margin-top: 32px; }
.guide-empty-heading { font-size: 22px; }
.guide-empty-body { font-size: 14px; margin-top: 10px; }

@media (max-width: 760px) {
  .guide-next-grid, .guide-list-grid { grid-template-columns: 1fr; }
}
/* guide.php(次に読む)/guides.php(一覧)はどちらも .guide-next-grid, .guide-list-grid の
   grid-template-columns/gap は共通だが、直前の見出しとの間隔だけが異なる（元はインライン）。 */
.guide-next-section { margin-top: 56px; }
.guide-next-grid { margin-top: 14px; }
/* .card.guide-card はflex-direction:columnのため、子の.guide-chipがデフォルトで幅いっぱいに
   引き伸ばされる（元はインラインでalign-self:flex-startを個別指定していた）。 */
.guide-card .guide-chip { align-self: flex-start; }
/* guides.php一覧カード内、読了時間を下端に押し出すメタ表記。 */
.guide-card-meta-time { margin-left: auto; }
.guide-card .guide-card-thumb { aspect-ratio: 16 / 9; }
/* guides.php一覧カードのサムネイル: トップページGUIDESセクション(.guide-card-thumb、上で定義)と
   同じ見た目(16:9・object-fit:cover・border-radius:6px)を再利用しつつ、.guide-card の
   padding(20px)に合わせて打ち消しマージンだけ上書きする。 */
.guide-card .guide-card-thumb { margin: -20px -20px 0; }

/* ---- guides.php一覧: 両替への誘導ブロック(JA版のみ。記事カードと同列に見えないよう
   背景色で区切る) ---- */
/* 両替サイト(姉妹サイト)への誘導。記事一覧の続きに見えないよう地色を変えた箱にまとめ、
   上段に写真＋説明、下段に記事カードを並べる。 */
.guide-exchange-promo { background: var(--bg-sub); border-radius: 6px; padding: 28px 30px 30px; margin-top: 48px; }
.guide-exchange-promo-head { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: center; }
.guide-exchange-promo-thumb { display: block; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--bg); }
.guide-exchange-promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-exchange-promo-heading { font-size: 20px; }
.guide-exchange-promo-body { font-size: 14px; color: var(--text); margin-top: 10px; }
.guide-exchange-promo-cta { margin-top: 18px; }
.guide-exchange-promo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.guide-exchange-card { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.guide-exchange-card-num { font-size: 12px; font-weight: 800; color: var(--accent-text); letter-spacing: .06em; }
.guide-exchange-card-title { font-size: 14px; line-height: 1.5; }
.guide-exchange-card-desc { font-size: 14px; line-height: 1.65; color: color-mix(in srgb, var(--text) 78%, transparent); }
@media (max-width: 900px) {
  .guide-exchange-promo-head { grid-template-columns: 1fr; gap: 18px; }
  .guide-exchange-promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .guide-exchange-promo-grid { grid-template-columns: 1fr; }
}

/* ---- GUIDE記事ページ: サイドバー ---- */
.guide-layout { max-width: 1140px; margin: 22px auto 0; display: block; }
.guide-main { min-width: 0; }
.guide-aside { min-width: 0; margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.guide-aside-block { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; }
.guide-aside-heading { font-family: 'Manrope', sans-serif; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 800; margin-bottom: 12px; }
/* 目次はリード文・メタ行の直後に置く。本文の流れを止めないよう、2段組みで縦を詰める */
.guide-toc-block { background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 20px; margin-bottom: 32px; }
.guide-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
@media (max-width: 620px) { .guide-toc { grid-template-columns: 1fr; } }
.guide-toc a { font-size: 14px; line-height: 1.6; color: var(--text); }
.guide-toc a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.guide-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-aside-list li { padding-top: 12px; border-top: 1px solid var(--line); }
.guide-aside-list li:first-child { padding-top: 0; border-top: none; }
.guide-aside-list a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--text); font-weight: 700; }
.guide-aside-list a:hover { color: var(--accent-text); }
/* 両替（姉妹サイト）への誘導。自前記事の一覧と混ざらないよう別ブロックにする */
.guide-aside-exchange-body { font-size: 14px; line-height: 1.75; color: var(--text); margin: 0; }
/* 別サイト(ThaiExchange)への導線。自前記事の「他の記事」と同じ見た目にすると
   同一サイトの記事と誤解されるため、一覧ページの両替ブロックと同じ地色にして区別する。 */
.guide-aside-exchange { background: color-mix(in srgb, var(--bg-sub) 72%, var(--surface)); border-color: transparent; }
/* 地色が淡いアンバーなので素の --accent では沈む。暗く落とすと見出しが重くなるため、
   彩度の高い --accent-strong で立たせる（ダーク側も同変数で明るい側に振れる）。 */
.guide-aside-exchange .guide-aside-heading { color: var(--accent-text); }
.guide-aside-exchange .guide-aside-list li { border-top-color: color-mix(in srgb, var(--text) 12%, transparent); }
.guide-aside-exchange-list { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.guide-aside-exchange-link { display: inline-block; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); width: 100%; box-sizing: border-box; font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.guide-aside-exchange-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-aside-source-badge { display: inline-flex; align-items: center; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-text); }
/* サイドバーのアフィリはカード自身が枠(.card相当の背景・ボーダー)を持つため、
   .guide-aside-block の外枠は付けない（二重枠になるため）。余白のみ打ち消す */
.guide-sidebar-affiliate .guide-affiliate-card-wrap { margin: 0; }

/* モバイル(1列)では .guide-aside を display:contents にして、
   中のブロックを .guide-layout の直接の並び順に載せる。DOMは変更しない。 */
@media (max-width: 980px) {
  .guide-layout { display: flex; flex-direction: column; gap: 40px; }
  .guide-aside { display: contents; }
}
@media (min-width: 981px) {
  .guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  .guide-aside { margin-top: 0; }
  /* 最終更新の右端を本文カラム(1fr = 全幅 - 300px - gap 40px)の右端に合わせる。 */
  .guide-meta-row { padding-right: 340px; }
}

/* ---- 汎用ページヘッダー（news/guides/guide/about/legal 共通、.page-root は top.php と共有）----
   パンくず＋見出しブロックのレイアウトが5ページで完全一致していたため、元はインラインで
   直書きしていたものをここへ集約する。 */
/* .wrap と併用するため padding 短縮形は使わない（左右パディングを 0 に潰してしまう）。 */
.page-shell { padding-top: 28px; padding-bottom: 80px; }
.page-eyebrow { margin-top: 22px; }
.page-title { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.32; margin: 10px 0 0; font-weight: 700; }
.page-lead { font-size: 16px; margin-top: 14px; }
/* 画像の注記。本文より一段小さく、二次情報として置く。
   直前のリード文は margin-bottom:15px を持ち、注記の margin-top と相殺して
   15pxの箱間隔になる。さらに line-height:1.75 の行ボックス余白が上下に乗るため、
   見た目では25px近く空く。リード側の下マージンを詰め、注記の行間も締める。 */
.page-lead:has(+ .page-note) { margin-bottom: 0; }
.page-note { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); margin-top: 4px; }
/* about.php/legal.php本文の開始余白。 */
.page-article { margin-top: 40px; }
/* guides.php一覧・guide.php記事末尾の「戻る」CTA。 */
.page-back-cta { margin-top: 48px; text-align: center; }
/* about.php/legal.php末尾の関連ページ導線段落（.guide-page-pへの追加余白のみ）。 */
.guide-page-p-cta { margin-top: 32px; }

/* ---- NEWS一覧ページ（news.php）専用 ---- */
/* カテゴリータブの上下余白。トップページの.news-tabs（margin: -8px 0 22px）とは別画面・別文脈の
   ため、この一覧ページだけ .news-index-tabs で上書きする（詳細度 .news-tabs.news-index-tabs で
   確実に優先させる）。 */
.news-tabs.news-index-tabs { margin: 26px 0 8px; }
.news-index-note { font-size: 13px; margin-top: 10px; }
/* フィルタ結果が0件のときのカード。padding/text-align/font-sizeは.news-unavailable-cardと共通のため
   継承し、この一覧ページだけの上余白を追加する。 */
.news-filter-empty { margin-top: 24px; }
/* 画像の注記はリスト列の最下部・右寄せで、メインカードの下端に揃える。
   リスト列は内容なりの高さ(約435px)でカード(487px)より低いため、列を行の高さまで
   伸ばしたうえで margin-top:auto で注記を下端へ落とす。リスト自体の位置は変わらない。 */
.news-list-col { align-self: stretch; }
.news-image-note { margin-top: auto; margin-bottom: 0; padding-top: 10px; text-align: right; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
/* 980px以下は .news-grid が1列になり右寄せの根拠が無くなるため左揃えに戻す。
   基底ルールより後ろに置かないとソース順で負けるので、ここに置く。 */
@media (max-width: 980px) { .news-image-note { text-align: left; } }
.news-list-wrap { margin-top: 16px; }
.news-list-item-body { min-width: 0; }
.news-list-meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.news-list-item-credit { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

/* ---- ニュース出典バッジ（NewsCard::sourceBadge()、固定5ソース＋デフォルトの有限セット）---- */
/* 元は素の <span>（display:inline）だった。inline-flex にすると行ボックスの高さが
   変わり、出典行の内容が2pxずれるため display は指定しない。 */
.news-source-badge { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.news-source-badge--on-dark { background: rgba(255,255,255,.14); color: #fff; }
.news-source-badge--blue { background: color-mix(in srgb, var(--src-blue) 8%, transparent); color: var(--src-blue); }
.news-source-badge--purple { background: color-mix(in srgb, var(--src-purple) 8%, transparent); color: var(--src-purple); }
.news-source-badge--green { background: color-mix(in srgb, var(--src-green) 8%, transparent); color: var(--src-green); }
.news-source-badge--orange { background: color-mix(in srgb, var(--src-orange) 8%, transparent); color: var(--src-orange); }
.news-source-badge--navy { background: color-mix(in srgb, var(--src-navy) 8%, transparent); color: var(--src-navy); }
.news-source-badge--default { background: color-mix(in srgb, var(--src-default) 8%, transparent); color: var(--src-default); }

/* ---- ガイドカテゴリーバッジ（GuideContent::categoryBadge()、固定6カテゴリー＋デフォルトの
   有限セット。呼び出し元top.phpは対応済みのため触らないが、生成ロジック自体はここでクラス化する）。
   色はライト/ダーク共通の固定値（元のインラインと同じくトークン化しない）。 ---- */
.guide-category-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 84px; padding: 4px 6px; border-radius: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.guide-category-badge--climate { background: var(--cat-climate-bg); color: var(--cat-climate-fg); }
.guide-category-badge--exchange { background: var(--cat-exchange-bg); color: var(--cat-exchange-fg); }
.guide-category-badge--transit { background: var(--cat-transit-bg); color: var(--cat-transit-fg); }
.guide-category-badge--visa { background: var(--cat-visa-bg); color: var(--cat-visa-fg); }
.guide-category-badge--living { background: var(--cat-living-bg); color: var(--cat-living-fg); }
.guide-category-badge--culture { background: var(--cat-culture-bg); color: var(--cat-culture-fg); }
.guide-category-badge--neutral { background: var(--cat-neutral-bg); color: var(--cat-neutral-fg); }

/* ---- アフィリエイトカード（AffiliateCard::renderCard()、全パートナー共通の固定マークアップ）----
   写真上のブランド名オーバーレイ・CTA文字色は常に暗い写真/固定アンバーの上に乗るため、
   ライト/ダーク共通の固定値のまま（トークン化しない）。 */
.affiliate-card { display: flex; flex-direction: column; }
.affiliate-card-media { height: 120px; position: relative; }
.affiliate-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,30,0) 55%, rgba(20,24,30,.55) 100%); }
.affiliate-card-brand { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.affiliate-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.affiliate-card-title { font-size: 16px; }
.affiliate-card-text { font-size: 13px; flex: 1; }
/* axe color-contrast対応（2026-09-14）: このCTAは写真ではなくカード下部の白/紙面上に乗るため
   固定のアンバーだと白面で2.78:1しかない。文字用トークン--accent-textへ変更する。 */
.affiliate-card-cta { font-size: 13px; font-weight: 700; color: var(--accent-text); }
/* PR表示はカードの外に1行取らず、画像の右上へ重ねる。
   画像の明暗に負けないよう、地の色を敷いて枠線は使わない。 */
.guide-affiliate-card-wrap { position: relative; }
.affiliate-pr-row { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; }
.affiliate-pr-row .pr { background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: transparent; color: var(--text); backdrop-filter: blur(2px); }

/* ---- 404ページ（404.php）専用 ---- */
.notfound-shell { padding-top: 96px; padding-bottom: 96px; text-align: center; }
.notfound-heading { font-size: clamp(28px, 4vw, 40px); margin: 0; }
.notfound-body { margin-top: 12px; }
.notfound-cta { margin-top: 20px; }
