/* ===== Design tokens ===== */
:root {
  --bg: #ffffff;
  --alt: #f3f5f8;
  --surface: #ffffff;
  --text: #1a2333;
  --muted: #566073;
  --line: #d6dbe4;
  --navy: #0a1f3d;
  --navy-2: #123560;
  --primary: #0f4c8a;
  --primary-ink: #ffffff;
  --accent: #1470b8;
  --gold: #b8932e;
  --tag-bg: #eaf0f7;
  --tag-ink: #0a1f3d;
  --sea: #d6e6f5;
  --land: #eef0f5;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1422;
    --alt: #111b2d;
    --surface: #101a2b;
    --text: #e5e9f1;
    --muted: #9fabbf;
    --line: #26344b;
    --navy: #07111f;
    --navy-2: #0f2a4d;
    --primary: #8fb8ea;
    --primary-ink: #0c1422;
    --accent: #6fb0e8;
    --gold: #d2ae4c;
    --tag-bg: #1b2a44;
    --tag-ink: #cfe0f7;
    --sea: #172a47;
    --land: #1c2437;
  }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.85; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { line-height: 1.45; }

/* ===== Header ===== */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--text); text-decoration: none; letter-spacing: .03em; padding-left: 14px; border-left: 4px solid var(--navy); line-height: 1.3; }
.nav { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.nav a { padding: 22px 12px 20px; font-size: .86rem; color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav a.cta { margin: 14px 0 14px 12px; padding: 6px 16px; border: 1px solid var(--navy); color: var(--navy); font-weight: 600; }
.nav a.cta:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.cta { border-color: var(--primary); color: var(--primary); } :root:not([data-theme="light"]) .brand { border-left-color: var(--primary); } }
@media (max-width: 760px) { .nav a { padding: 8px 8px; } .nav a.cta { margin: 4px 0 4px 6px; } }

/* ===== Hero（トップ） ===== */
.hero { background: var(--navy); color: #fff; padding: 72px 0 72px; position: relative; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--accent) 0 18%, transparent 18%); }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero { padding: 48px 0; } }
.eyebrow { display: block; font-size: .72rem; letter-spacing: .24em; font-weight: 700; color: #8fc1ec; margin-bottom: 20px; }
.hero h1 { margin: 0 0 18px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.5; letter-spacing: .02em; word-break: auto-phrase; text-wrap: balance; }
.hero p { margin: 0; color: rgba(255, 255, 255, .86); max-width: 38em; font-size: .98rem; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn-light, .btn-ghost { display: inline-block; padding: 12px 26px; border-radius: 2px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.btn-light { background: #fff; color: var(--navy); border: 1px solid #fff; }
.btn-light:hover { background: #e3edf8; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .6); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.glance { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); padding: 24px 28px 8px; }
.glance h2 { margin: 0 0 6px; font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; font-weight: 700; color: #8fc1ec; }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.glance-item { padding: 16px 0 14px; border-top: 1px solid rgba(255, 255, 255, .18); }
.glance-item b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.25; color: #fff; }
.glance-item span { display: block; margin-top: 4px; font-size: .76rem; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* ===== Sections ===== */
section { padding: 64px 0 56px; }
section.alt { background: var(--alt); }
.section-head { margin-bottom: 30px; padding-top: 14px; border-top: 3px solid var(--navy); max-width: 100%; }
.section-head .label { display: block; font-size: .72rem; letter-spacing: .22em; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.section-head h2 { margin: 0; font-family: var(--serif); font-size: 1.7rem; }
.section-head p { margin: 8px 0 0; color: var(--muted); font-size: .94rem; max-width: 46em; }
h2 { font-size: 1.3rem; margin: 0 0 16px; }
.lead { margin: 0 0 16px; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-head { border-top-color: var(--primary); } }

/* ===== Guide cards ===== */
.guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.guide-links a { display: block; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 24px 22px; text-decoration: none; color: var(--text); transition: background .15s; }
.guide-links a:hover { background: var(--alt); }
.guide-links a:hover em { color: var(--accent); }
.guide-links b { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--navy); margin-bottom: 8px; }
.guide-links span { font-size: .86rem; color: var(--muted); line-height: 1.75; display: block; }
.guide-links em { display: inline-block; margin-top: 14px; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--primary); letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide-links b { color: var(--text); } }

/* ===== News（一覧は行形式） ===== */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
#chips { display: flex; gap: 2px; flex-wrap: wrap; }
.chip { border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); padding: 10px 16px 9px; border-radius: 0; cursor: pointer; font-size: .86rem; font-family: inherit; }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { color: var(--navy); font-weight: 700; border-bottom-color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--primary); } }
.search { margin-left: auto; margin-bottom: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); font-family: inherit; min-width: 200px; }
.cards { display: block; }
.card { display: grid; grid-template-columns: 190px 1fr; grid-template-areas: "meta title" "meta sum"; column-gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.card .meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 4px; }
.card h3 { grid-area: title; margin: 0 0 6px; font-family: var(--serif); font-size: 1.1rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); text-decoration: underline; }
.card p { grid-area: sum; margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .card { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "sum"; } .card .meta { flex-direction: row; align-items: center; gap: 12px; } }
.meta { display: flex; gap: 12px; align-items: center; font-size: .78rem; color: var(--muted); }
.tag { background: none; color: var(--accent); padding: 0; border-radius: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.empty { color: var(--muted); padding: 24px 0; }

/* ===== Signup ===== */
.signup { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; gap: 28px; } }
.signup-pitch .section-head { margin-bottom: 18px; }
.signup-pitch ul { padding-left: 1.2em; color: var(--muted); }
.form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 28px; }
.form label { display: grid; gap: 4px; font-size: .86rem; font-weight: 600; }
.form input:not([type="checkbox"]), .form select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.form input:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.form fieldset { border: 1px solid var(--line); border-radius: 2px; padding: 10px 14px; margin: 0; display: grid; gap: 6px; }
.form legend { font-size: .86rem; padding: 0 6px; font-weight: 600; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.form .consent { font-size: .82rem; color: var(--muted); }
.btn { padding: 12px 30px; border: 1px solid var(--navy); border-radius: 2px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; }
.btn:hover { background: var(--navy-2); }
.msg { margin: 0; font-size: .9rem; min-height: 1.4em; }

/* ===== About / footer ===== */
.about-box { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy); padding: 24px 28px; }
.about-box p { margin: 0 0 8px; }
footer { background: var(--navy); color: rgba(255, 255, 255, .74); padding: 36px 0 44px; font-size: .8rem; }
footer p { margin: 0 0 6px; }
footer a { color: #fff; }

/* ===== Content pages ===== */
.page-hero { background: var(--navy); color: #fff; padding: 44px 0 40px; position: relative; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0 14%, transparent 14%); }
.page-hero .crumb { font-size: .78rem; color: rgba(255, 255, 255, .7); margin-bottom: 10px; letter-spacing: .04em; }
.page-hero .crumb a { color: #fff; }
.page-hero h1 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
.page-hero p { margin: 0; color: rgba(255, 255, 255, .86); max-width: 44em; }
.page { padding: 8px 0 24px; }
.page h2 { font-family: var(--serif); margin: 52px 0 18px; padding-top: 14px; border-top: 3px solid var(--navy); font-size: 1.45rem; }
.page h3 { font-size: 1.05rem; margin: 28px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent); line-height: 1.4; }
.page p { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; padding-left: 1.3em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page h2 { border-top-color: var(--primary); } }
.tbl-wrap { overflow-x: auto; margin: 10px 0 14px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .9rem; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line); }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl tbody td:first-child { font-weight: 600; }
.tbl thead th { background: var(--alt); color: var(--navy); white-space: nowrap; font-weight: 700; font-size: .82rem; letter-spacing: .03em; border-bottom: 1px solid var(--navy); }
.tbl.kv th { width: 10em; background: var(--alt); color: var(--navy); white-space: nowrap; font-weight: 700; font-size: .86rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbl thead th, :root:not([data-theme="light"]) .tbl.kv th { color: var(--text); } :root:not([data-theme="light"]) .tbl { border-top-color: var(--primary); } }
.note { font-size: .8rem; color: var(--muted); margin: 6px 0 14px; }
.warn { background: var(--alt); border-left: 3px solid var(--gold); padding: 12px 18px; font-size: .88rem; margin: 14px 0 22px; }
.toc { display: flex; gap: 0; flex-wrap: wrap; margin: 24px 0 0; border-bottom: 1px solid var(--line); }
.toc a { font-size: .86rem; padding: 10px 16px 9px; text-decoration: none; color: var(--text); border-bottom: 3px solid transparent; }
.toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== Photos ===== */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 14px 0 8px; }
.photo-grid figure { margin: 0; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.photo-grid img { display: block; width: 100%; height: auto; }
.photo-grid figcaption { padding: 10px 14px; font-size: .8rem; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); }
.photo-grid figcaption b { color: var(--text); font-weight: 600; }

/* ===== Map ===== */
.map-fig { margin: 12px 0 8px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.map-fig svg { display: block; width: 100%; height: auto; }
.map-fig figcaption { padding: 10px 16px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
.map-embed { margin: 14px 0 6px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.map-embed iframe { display: block; width: 100%; height: 360px; border: 0; }
.map-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.map-links a { font-size: .85rem; padding: 7px 14px; border: 1px solid var(--line); border-radius: 2px; text-decoration: none; background: var(--surface); }
.map-links a:hover { border-color: var(--primary); }

/* ===== Article ===== */
.article { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 36px clamp(18px, 4vw, 48px); margin: 32px 0; }
.article h1 { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.5; margin: 14px 0 22px; }
.article p { margin: 0 0 14px; }
.article ul { margin: 0 0 14px; padding-left: 1.3em; }
.sources { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.sources ul { margin: 6px 0 0; padding-left: 1.2em; }
.back { display: inline-block; margin-top: 24px; font-size: .9rem; }

/* ===== Password gate（試運転用。現在は未使用） ===== */
html.locked body > *:not(#gate) { display: none !important; }
#gate { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--navy); }
.gate-box { background: var(--surface); padding: 32px; width: min(380px, 100%); display: grid; gap: 12px; border-top: 3px solid var(--accent); }
.gate-box h1 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.gate-box p { margin: 0; color: var(--muted); font-size: .9rem; }
.gate-box input { padding: 11px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--text); font: inherit; }
.gate-box button { padding: 11px; border: 0; border-radius: 2px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.gate-box .gate-msg { color: #c0392b; min-height: 1.3em; }

/* ===== 位置図（Wikimedia Commons の地図に目印を重ねる） ===== */
.vn-intro { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 32px; align-items: start; margin: 12px 0 8px; }
@media (max-width: 720px) { .vn-intro { grid-template-columns: 1fr; } .vn-intro figure { max-width: 300px; margin: 0 auto; } }
.vn-intro figure { margin: 0; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.locator { position: relative; line-height: 0; }
.locator img { display: block; width: 100%; height: auto; }
.pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pin-label { position: absolute; transform: translateY(-50%); background: rgba(255,255,255,.94); color: #1a2333; padding: 2px 9px; border-radius: 2px; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pin-label.hl { background: #b8932e; color: #0a1f3d; font-size: .8rem; font-weight: 700; }
.vn-intro figcaption { padding: 10px 14px; font-size: .75rem; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); }
.vn-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.vn-points li { background: var(--surface); border-bottom: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 14px 18px; font-size: .93rem; }
.vn-points b { display: block; font-family: var(--serif); color: var(--navy); margin-bottom: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vn-points b { color: var(--text); } }

/* ===== 実際の地図（Leaflet） ===== */
.leaflet-map { height: 540px; border: 1px solid var(--line); overflow: hidden; position: relative; z-index: 0; isolation: isolate; background: var(--land); margin: 12px 0 8px; }
@media (max-width: 640px) { .leaflet-map { height: 440px; } }
.map-fallback { padding: 40px 20px; text-align: center; color: var(--muted); }
.map-tip { background: rgba(255,255,255,.95); color: #1a2333; border: 0; border-radius: 2px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; line-height: 1.5; padding: 2px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.map-tip small { font-weight: 400; color: #566073; font-size: 11px; }
.map-tip.tip-gold { border-left: 4px solid #b8932e; }
.leaflet-tooltip.map-tip::before { display: none; }
.map-info, .map-legend { background: rgba(255,255,255,.96); color: #1a2333; font-family: var(--sans); border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,.3); padding: 8px 12px; font-size: 12.5px; line-height: 1.7; }
.map-info b { color: #0a1f3d; }
.map-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); vertical-align: -1px; }
.map-legend s { display: inline-block; width: 18px; height: 0; border-top: 4px solid #14284b; margin-right: 6px; vertical-align: 3px; text-decoration: none; }

/* ===== 文字組みの調整（途中で折り返さないための設定） ===== */
/* Chrome / Edge：文節の区切りで折り返す。非対応のブラウザでは無視される */
body { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
/* 日本語の文字幅を詰める（見出し・表・ボタンなど短い文字列だけ） */
h1, h2, h3, .nav a, .btn, .btn-light, .btn-ghost, .chip, .toc a, .tbl th, .tbl td:first-child, .guide-links b, .glance-item, .tag, .brand { font-feature-settings: "palt"; }
/* 短い文字列は、途中で折り返さない（スペースや<br>の位置でだけ折り返す） */
.tbl th, .tbl td:first-child, .tbl.kv th, .toc a, .nav a, .chip, .tag, .brand, .glance-item b, .guide-links em, .hero-actions a, .btn { word-break: keep-all; }
.nav a, .toc a, .chip, .tag { white-space: nowrap; }
/* 表の左端の列は、読みやすい最低限の幅を確保する */
.tbl td:first-child { min-width: 9.5em; }
.tbl.kv th { min-width: 8em; }
/* 長いURLだけは、必要なときに折り返す */
.tbl a, .note a, .sources a { overflow-wrap: anywhere; word-break: normal; }
/* 表の文字をわずかに小さく、行間を整える */
.tbl { font-size: .875rem; line-height: 1.75; }
.tbl th, .tbl td { padding: 12px 16px; }
.tbl td small { color: var(--muted); font-weight: 400; }

/* ===== 文字サイズ（標準を少し小さくし、切り替えボタンで変えられる） ===== */
html { font-size: 15px; }
@media (min-width: 1700px) { html { font-size: 16px; } }
.tbl { font-size: .92rem; }
.fs-ctl { display: flex; align-items: center; gap: 2px; margin-left: 10px; align-self: center; }
.fs-ctl span { font-size: 11px; color: var(--muted); margin-right: 4px; letter-spacing: .04em; white-space: nowrap; }
.fs-ctl button { font: inherit; font-size: 12px; line-height: 1; padding: 5px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 2px; cursor: pointer; font-weight: 600; }
.fs-ctl button:hover { border-color: var(--accent); color: var(--accent); }
.fs-ctl button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 760px) { .fs-ctl span { display: none; } }

/* ===== 人物の表：名前（カタカナ／ベトナム語／漢字）を1行ずつ表示する ===== */
.nm { display: block; font-weight: 400; font-size: .86em; line-height: 1.6; color: var(--muted); white-space: nowrap; word-break: keep-all; }
.tbl.people td:first-child { min-width: 12em; }
.tbl.people td:nth-child(2) { white-space: nowrap; word-break: keep-all; }

/* 表の右端の列の補足（小さい文字）は、途中で折り返さない */
.tbl td:last-child small { display: block; white-space: nowrap; word-break: keep-all; }

/* h4 */
.page h4 { font-size: .98rem; margin: 22px 0 8px; color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page h4 { color: var(--text); } }

/* ===== 弊社のサービス ===== */
.svc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 14px 0 8px; }
.svc-card { display: block; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 28px 24px; text-decoration: none; color: var(--text); transition: background .15s; }
.svc-card:hover { background: var(--alt); }
.svc-card .svc-no { display: block; font-size: .7rem; letter-spacing: .22em; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.svc-card b { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; line-height: 1.5; }
.svc-card span { font-size: .88rem; color: var(--muted); line-height: 1.75; display: block; }
.svc-card em { display: inline-block; margin-top: 14px; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc-card b { color: var(--text); } }
.steps { list-style: none; counter-reset: st; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.steps li { counter-increment: st; padding: 16px 18px 16px 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); font-size: .9rem; color: var(--muted); }
.steps li:first-child { border-left: 1px solid var(--line); }
.steps li::before { content: "STEP " counter(st); display: block; font-size: .68rem; letter-spacing: .18em; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.steps li b { display: block; font-family: var(--serif); color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .steps { border-top-color: var(--primary); } :root:not([data-theme="light"]) .steps li b { color: var(--text); } }
.nav { row-gap: 0; }

/* ===== ヘッダー：メニューが増えても1段に収める ===== */
.site-header .wrap { flex-wrap: nowrap; gap: 20px; }
.brand { white-space: nowrap; font-size: .98rem; }
.nav { flex-wrap: nowrap; }
.nav a { padding-left: 9px; padding-right: 9px; font-size: .84rem; white-space: nowrap; }
.nav a.cta { margin-left: 8px; padding: 6px 13px; }
.fs-ctl { margin-left: 6px; }
@media (max-width: 1180px) { .fs-ctl span { display: none; } .nav a { padding-left: 7px; padding-right: 7px; } }
/* 狭い画面では、2段に分けて表示する */
@media (max-width: 1040px) { .site-header .wrap { flex-wrap: wrap; } .nav { flex-wrap: wrap; } .nav a { padding-top: 10px; padding-bottom: 8px; } }

/* ===== 距離・所要時間の列：幅を確保し、1行で表示する ===== */
.tbl.dist th:last-child, .tbl.dist td:last-child { white-space: nowrap; word-break: keep-all; min-width: 13.5em; width: 1%; }
.tbl.dist td:last-child small { display: block; margin-top: 2px; white-space: nowrap; }
.tbl.dist td:nth-child(2) { min-width: 20em; }

/* ===== 列の幅の確保（短い語句が途中で折り返さないように） ===== */
.tbl td:first-child { min-width: 12.5em; }
.tbl.conf th:last-child, .tbl.conf td:last-child { min-width: 16em; }
.tbl.urls td:nth-child(1), .tbl.urls td:nth-child(3) { white-space: nowrap; word-break: keep-all; }
.tbl.urls td:nth-child(3) a { overflow-wrap: normal; }
.tbl.co td:nth-child(2) { min-width: 18em; }
.tbl.co td:nth-child(3) { min-width: 9em; }
.tbl.inv td:nth-child(3) { min-width: 22em; }
.tbl.inv td:nth-child(1) { white-space: nowrap; }
.tbl td:first-child { min-width: 14.5em; }
.tbl.conf th:last-child, .tbl.conf td:last-child { min-width: 19em; }
.tbl.co td:nth-child(2) { min-width: 23em; }
.tbl.co td:nth-child(3) { white-space: nowrap; word-break: keep-all; }

/* ===== 会員限定（ニュースの続き） ===== */
.lock { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); padding: 1px 8px; border-radius: 2px; letter-spacing: .04em; white-space: nowrap; }
.card .meta .lock { margin-left: 0; }
.free-body { position: relative; }
.free-body .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface)); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .free-body .fade { background: linear-gradient(to bottom, rgba(16,26,43,0), var(--surface)); } }
.member-wall { margin-top: 6px; padding: 26px 30px 28px; background: var(--alt); border: 1px solid var(--line); border-top: 3px solid var(--navy); }
.member-wall .wall-eyebrow { display: block; font-size: .7rem; letter-spacing: .22em; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.member-wall h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 8px; border: 0; padding: 0; }
.member-wall > p { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.wall-form { display: grid; gap: 12px; max-width: 520px; }
.wall-form label { display: grid; gap: 4px; font-size: .86rem; font-weight: 600; }
.wall-form input:not([type="checkbox"]) { padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.wall-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.wall-form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .82rem; color: var(--muted); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.member-line { margin-top: 10px; }

/* 案内カードが5枚でも、1段に並べる */
.guide-links { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.guide-links a { padding: 24px 20px 20px; }

.guide-links b { white-space: nowrap; word-break: keep-all; font-size: 1.05rem; }

/* ===== 同意の文言 ===== */
.consent-summary { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.7; padding: 8px 12px; background: var(--alt); border-left: 3px solid var(--line); }
.form .check.consent span, .wall-form .check.consent span { line-height: 1.6; }
.form .check.consent a, .wall-form .check.consent a { font-weight: 600; }

/* ニュースが増えたときの「さらに表示」 */
.more-wrap { text-align: center; padding: 22px 0 4px; }
.btn-more { padding: 11px 30px; border: 1px solid var(--navy); background: var(--surface); color: var(--navy); font: inherit; font-weight: 600; border-radius: 2px; cursor: pointer; }
.btn-more:hover { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-more { border-color: var(--primary); color: var(--primary); } }

/* ===== 印刷（A4）：記事は、A4で1枚に収める。ナビ・登録欄・関連記事は、印刷しない ===== */
.print-only { display: none; }
.pdf-bar { margin: 22px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdf-bar .hint { color: var(--muted); font-size: .8rem; }
.pdf-btn { background: var(--navy); color: #fff; border: 0; border-radius: 2px; padding: 10px 20px; font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.pdf-btn:hover { opacity: .88; }
@media print {
  .print-only { display: block !important; font-size: 7.5pt; color: #555; margin: 2mm 0 0; word-break: break-all; }
  @page { size: A4; margin: 14mm 16mm; }
  html { font-size: 10pt !important; }
  body { background: #fff !important; color: #000 !important; line-height: 1.7; }
  .site-header, .fs-ctl, .member-wall, #related, .back, footer .member-line, .more-wrap, .toolbar, .pdf-bar { display: none !important; }
  footer { background: none !important; color: #444 !important; padding: 6mm 0 0 !important; margin: 6mm 0 0; border-top: .5pt solid #999; font-size: 7.5pt; }
  footer a { color: #444 !important; }
  .article { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .article h1 { font-size: 16pt !important; margin: 3mm 0 4mm !important; line-height: 1.45; }
  .article p, .article li { orphans: 3; widows: 3; }
  .free-body .fade { display: none !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  footer .wrap > *:nth-child(n+3) { display: none !important; }
  footer p { margin: 0 0 1mm !important; }
  .sources { margin-top: 6mm !important; padding-top: 3mm !important; font-size: 8pt !important; page-break-inside: avoid; }
  .sources a { color: #000 !important; text-decoration: none; word-break: break-all; }
  a[href^="http"]:not(.sources a)::after { content: none; }
}

.static-map { margin: 12px 0 8px; border: 1px solid var(--line); background: #d9e8f2; }
.static-map img { display: block; width: 100%; height: auto; }

/* 表のURL欄：リンクを1件ずつ行に分け、間隔を付ける */
.tbl td a[target] { word-break: break-word; }

/* 運営会社のロゴ */
.company-logo { margin: 0 0 14px; }
.company-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 640px) { .company-logo img { height: 32px; } }
.contact-form { margin-top: 18px; }

/* 出典の一覧：題名をクリックすると、元のURLが開く */
.src-list { list-style: none; padding-left: 0; }
.src-list li { border-bottom: 1px solid var(--line); }
.src-item summary { cursor: pointer; padding: 10px 28px 10px 4px; position: relative; list-style: none; }
.src-item summary::-webkit-details-marker { display: none; }
.src-item summary::after { content: "＋"; position: absolute; right: 6px; top: 8px; color: var(--muted); font-weight: 700; }
.src-item[open] summary::after { content: "－"; }
.src-item summary:hover { color: var(--navy); text-decoration: underline; }
.src-url { padding: 2px 4px 12px; font-size: .86rem; word-break: break-all; }
@media print { .src-item > .src-url { display: block !important; } .src-item summary::after { display: none; } }