/*
Theme Name: Trip Journal
Theme URI: https://trip-journal.net/
Author: Trip Journal
Description: trip-journal.net 専用テーマ。記事本文は git の tools/render.py が組み立てたHTMLをそのまま受け取る前提で、テーマ側は骨格と見た目だけを持つ。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: 個人利用
Text Domain: tripjournal
*/

/* ------------------------------------------------------------------
   1. モックアップ由来（design/out/style.css）
   ------------------------------------------------------------------ */
:root {
  --ink: #25302d;
  --ink-soft: #53615c;
  --paper: #fcfbf7;
  --paper-deep: #f3f0e8;
  --line: #d9ded7;
  --moss: #405d54;
  --moss-dark: #2e4740;
  --mist: #dce7e1;
  --clay: #b66d50;
  --clay-pale: #f3e6df;
  --sand: #e9dcc7;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", Georgia, serif;
  --container: 1180px;
  --reading: 720px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
  --space-7: 112px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.8; letter-spacing: .015em; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.35; letter-spacing: .02em; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 10; padding: 8px 12px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }

/* Site chrome */
.site-header { border-bottom: 1px solid var(--line); background: rgba(252, 251, 247, .96); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-size: 17px; letter-spacing: .035em; }
.brand small { margin-top: 5px; color: var(--ink-soft); font-size: 9px; letter-spacing: .07em; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; width: 24px; height: 28px; border-bottom: 2px solid var(--moss); }
.brand-mark i { display: block; width: 8px; background: var(--moss); transform: skewY(-32deg); }
.brand-mark i:first-child { height: 14px; }.brand-mark i:last-child { height: 23px; background: var(--clay); }
.primary-nav { display: none; gap: 27px; font-size: 13px; color: var(--ink-soft); }.primary-nav a { text-decoration: none; }.primary-nav a:hover { color: var(--moss); }
.eyebrow { margin-bottom: 11px; color: var(--moss); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; }
.button { display: inline-flex; align-items: center; gap: 16px; padding: 13px 18px; border: 1px solid currentColor; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background .2s, color .2s; }.button-dark { color: #fff; background: var(--moss-dark); }.button-dark:hover { color: var(--moss-dark); background: transparent; }
.text-link { color: var(--moss); font-size: 14px; font-weight: 700; text-decoration: none; }.text-link span, .button span { margin-left: 4px; }

/* Abstract, self-contained image placeholders */
.visual { position: relative; overflow: hidden; isolation: isolate; background-color: #c4d7d5; }.visual::before, .visual::after { content: ""; position: absolute; pointer-events: none; }.visual::before { z-index: -3; inset: 0; background: linear-gradient(155deg, transparent 34%, rgba(255,255,255,.22) 34.4%, transparent 35%), linear-gradient(35deg, rgba(53,83,76,.18) 0 19%, transparent 19.5% 100%); }.visual::after { z-index: -1; left: 0; right: 0; bottom: 0; height: 33%; background: rgba(36,70,65,.75); clip-path: polygon(0 42%, 19% 17%, 39% 51%, 62% 0, 77% 39%, 100% 14%, 100% 100%, 0 100%); }
.visual p { position: absolute; z-index: 2; bottom: 12px; left: 14px; margin: 0; color: rgba(255,255,255,.95); font-size: 10px; font-weight: 700; letter-spacing: .13em; }.visual-sun { position: absolute; z-index: -2; top: 17%; right: 19%; display: block; width: 27%; aspect-ratio: 1; border-radius: 50%; background: #efd49b; }.visual-hill { position: absolute; z-index: -2; bottom: 24%; left: -8%; width: 90%; height: 41%; border-radius: 50% 60% 0 0; background: #87aaa2; transform: rotate(3deg); }.visual-water { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 16%; background: repeating-linear-gradient(0deg, rgba(240,247,243,.5) 0 1px, transparent 1px 7px), #6e9e9d; }.visual-house { position: absolute; z-index: 1; bottom: 13%; width: 18%; height: 25%; background: #d7b182; }.visual-house::before { content: ""; position: absolute; left: -15%; top: -42%; width: 130%; height: 54%; background: #874f3d; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.house-one { left: 26%; }.house-two { right: 15%; bottom: 14%; width: 12%; height: 18%; background: #f0e4c5; }
.visual-kamakura { background-color: #d9d2c3; }.visual-kamakura::after { background-color: #4d7773; }.visual-setouchi { background-color: #cadde1; }.visual-setouchi .visual-sun { background:#f3c778; }.visual-nagano { background-color: #d5ded4; }.visual-nagano::after { background-color:#476c5d; }.visual-kyoto { background-color: #ddd2c3; }.visual-kyoto .visual-hill { background:#759884; }.visual-hakodate { background-color: #becfd6; }.visual-hakodate::after { background-color:#42677a; }.visual-matsuyama { background-color:#ded9be; }.visual-matsuyama::after { background-color:#607d62; }.visual-fukuoka { background-color:#d5ded7; }.visual-fukuoka .visual-sun { background:#eebf7a; }

/* Home */
.home-hero { padding: var(--space-5) 0 var(--space-6); background: var(--paper-deep); }.hero-grid { display: grid; gap: var(--space-4); }.hero-copy { align-self: center; }.hero-copy h1 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(35px, 9.5vw, 68px); font-weight: 500; line-height: 1.27; letter-spacing: .07em; }.hero-text { max-width: 555px; margin-bottom: 28px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }.hero-visual { min-height: 290px; }.hero-visual p { font-size: 11px; }
.verification-strip { border-block: 1px solid #cfd8d3; background: var(--mist); }.verification-inner { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 13px; padding-block: 20px; }.verification-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--moss); border-radius: 50%; color: var(--moss); font-weight: 700; }.verification-inner p { margin: 0; font-size: 14px; line-height: 1.65; }.verification-inner p strong, .verification-inner p span { display: block; }.verification-inner p span { color: var(--ink-soft); font-size: 13px; }.verification-inner > a { display: none; color: var(--moss); font-size: 13px; font-weight: 700; }
.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }.section-heading h2, .destination-section h2, .editorial-note h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(27px, 7vw, 43px); font-weight: 500; letter-spacing: .055em; }.section-heading .text-link { flex-shrink: 0; }
.article-grid { display: grid; grid-template-columns: 1fr; gap: 30px 20px; }.article-card { min-width: 0; }.card-image { display: block; height: 205px; color: white; text-decoration: none; }.card-image:hover { outline: 3px solid var(--moss); outline-offset: 3px; }.card-content { padding-top: 14px; }.card-meta { display: flex; gap: 12px; margin-bottom: 8px; color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; }.card-meta span + span { padding-left: 12px; border-left: 1px solid var(--line); }.article-card h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; }.article-card h3 a { text-decoration: none; }.article-card > .card-content > p:not(.card-meta) { margin-bottom: 11px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }.card-tags span { padding: 2px 7px; border: 1px solid var(--line); color: var(--moss); font-size: 10px; font-weight: 700; line-height: 1.55; }
.destination-section { padding-block: var(--space-6); background: var(--moss-dark); color: white; }.destination-section .eyebrow { color: #b9d2c4; }.destination-section h2 { margin-bottom: 27px; }.destination-list { display: grid; border-top: 1px solid rgba(255,255,255,.25); }.destination-list a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.25); text-decoration: none; font-size: 16px; }.destination-list a:hover { color: #e7cc9a; }.destination-list small { color: #b9d2c4; font-size: 11px; letter-spacing: .1em; }
.editorial-note { display: grid; gap: 26px; padding-block: var(--space-6); }.editorial-note h2 { line-height: 1.45; }.editorial-note > div:last-child { max-width: 570px; color: var(--ink-soft); }.editorial-note > div:last-child p { margin-bottom: 16px; }

/* Article hero and layout */
.article-hero-wrap { padding-block: 16px var(--space-5); border-bottom: 1px solid var(--line); background: var(--paper-deep); }.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; color: var(--ink-soft); font-size: 11px; }.breadcrumbs a { text-decoration: none; }.article-heading { display: grid; gap: 28px; }.article-heading-copy { align-self: center; }.article-heading h1 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(32px, 8.5vw, 59px); font-weight: 500; line-height: 1.35; letter-spacing: .065em; }.lead { max-width: 630px; margin-bottom: 21px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }.article-date { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--ink-soft); font-size: 12px; }.article-date span + span { padding-left: 16px; border-left: 1px solid var(--line); }.article-hero-image { min-height: 255px; }
.article-layout { display: grid; align-items: start; gap: var(--space-5); padding-block: var(--space-5) var(--space-7); }.table-of-contents { padding: 20px; border-block: 1px solid var(--line); background: #f8f7f1; }.toc-title { margin-bottom: 10px; color: var(--moss); font-size: 12px; font-weight: 700; }.table-of-contents ol { display: grid; gap: 5px; margin: 0; padding-left: 21px; font-size: 13px; }.table-of-contents a { text-decoration: none; }.article-body { min-width: 0; max-width: var(--reading); }.article-body > section { margin-bottom: 65px; scroll-margin-top: 20px; }.article-body h2 { margin-bottom: 20px; font-family: var(--serif); font-size: clamp(25px, 6.5vw, 36px); font-weight: 500; letter-spacing: .055em; }.article-body h3 { font-size: 18px; }.article-body p { margin-bottom: 20px; }.section-number { margin-bottom: 5px !important; color: var(--clay); font-size: 11px; font-weight: 700; letter-spacing: .14em; }.sample-notice { padding: 12px 15px; border-left: 3px solid var(--clay); background: var(--clay-pale); color: #734735; font-size: 13px; line-height: 1.7; }.article-keyfacts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 29px; border-top: 1px solid var(--line); }.article-keyfacts div { padding: 14px 8px 13px 0; border-bottom: 1px solid var(--line); }.article-keyfacts div:nth-child(even) { padding-left: 13px; border-left: 1px solid var(--line); }.article-keyfacts span, .article-keyfacts strong { display: block; }.article-keyfacts span { margin-bottom: 3px; color: var(--ink-soft); font-size: 10px; }.article-keyfacts strong { font-size: 13px; line-height: 1.55; }

/* Article components */
.caution-box { display: flex; gap: 14px; margin: 39px 0; padding: 18px 17px; border: 1px solid #d8c4b8; background: #fbf5f1; }.caution-inline { margin-top: -15px; }.caution-mark { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--clay); color: white; font-family: Georgia, serif; font-size: 14px; font-weight: 700; line-height: 1; }.caution-box h3 { margin-bottom: 5px; color: #714434; font-size: 15px; }.caution-box p, .caution-box ul { margin: 0; color: #664d43; font-size: 13px; line-height: 1.75; }.caution-box ul { padding-left: 17px; }.caution-box li + li { margin-top: 3px; }
.itinerary { margin-top: 31px; }.day-divider { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-block: 1px solid var(--moss); color: var(--moss); }.day-divider span { font-size: 10px; font-weight: 700; letter-spacing: .13em; }.day-divider strong { font-size: 14px; }.timeline-item { display: grid; grid-template-columns: 48px 22px minmax(0, 1fr); gap: 8px; padding-top: 23px; }.timeline-item time { color: var(--moss); font-size: 13px; font-weight: 700; letter-spacing: .03em; }.timeline-line { position: relative; }.timeline-line::before { content: ""; position: absolute; top: 7px; bottom: -27px; left: 5px; width: 1px; background: #b8c9c0; }.timeline-line span { position: relative; z-index: 1; display: block; width: 11px; height: 11px; border: 2px solid var(--moss); border-radius: 50%; background: var(--paper); }.timeline-item h3 { margin-bottom: 3px; font-size: 16px; }.timeline-item p { margin-bottom: 6px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }.timeline-item small { display: inline-block; padding: 1px 7px; background: var(--mist); color: var(--moss-dark); font-size: 10px; font-weight: 700; line-height: 1.65; }.timeline-last { padding-bottom: 5px; }.timeline-last .timeline-line::before { display: none; }
.spot-grid { display: grid; gap: 14px; margin-top: 29px; }.spot-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); background: #fffefa; }.spot-card-top { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-bottom: 12px; }.spot-kind { padding: 2px 7px; background: var(--moss); color: white; font-size: 10px; font-weight: 700; line-height: 1.5; }.spot-area { color: var(--ink-soft); font-size: 10px; }.spot-card h3 { margin-bottom: 7px; font-size: 17px; }.spot-card > p { margin-bottom: 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }.spot-details { display: grid; gap: 8px; margin: 0 0 15px; }.spot-details div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 7px; padding-top: 7px; border-top: 1px solid #e5e7e1; font-size: 11px; line-height: 1.6; }.spot-details dt { color: var(--ink-soft); }.spot-details dd { margin: 0; }.spot-details a { color: var(--moss); font-weight: 700; }.source-meta { display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 2px 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.55; }.source-meta a { overflow-wrap: anywhere; color: var(--moss); }.source-meta time { font-weight: 700; }
.choice-pair { display: grid; gap: 12px; margin-top: 29px; }.choice-card { padding: 20px; border: 1px solid var(--line); }.main-choice { background: #f6f5ef; }.hidden-choice { background: #eff4f0; }.choice-label { display: inline-block; margin-bottom: 9px !important; padding: 1px 7px; color: white; background: var(--moss); font-size: 10px; font-weight: 700; line-height: 1.65; }.hidden-choice .choice-label { background: var(--clay); }.choice-card h3 { margin-bottom: 9px; font-size: 18px; }.choice-card > p:not(.choice-label) { color: var(--ink-soft); font-size: 13px; line-height: 1.75; }.choice-card dl { display: grid; gap: 7px; margin: 15px 0; }.choice-card dl div { padding-top: 7px; border-top: 1px solid rgba(64,93,84,.22); }.choice-card dt { color: var(--ink-soft); font-size: 10px; }.choice-card dd { margin: 1px 0 0; font-size: 12px; line-height: 1.65; }.choice-card a { color: var(--moss); font-size: 12px; font-weight: 700; text-decoration: none; }.choice-or { display: grid; place-items: center; width: 34px; height: 34px; margin: -3px auto; border-radius: 50%; background: var(--paper); color: var(--ink-soft); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.cost-table { margin-top: 28px; border-top: 2px solid var(--moss); }.cost-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }.cost-row > * { min-width: 0; padding: 11px 12px; font-size: 13px; line-height: 1.55; }.cost-row > :nth-child(even) { border-left: 1px solid var(--line); }.cost-row strong { grid-column: 1 / -1; padding-bottom: 5px; background: #f7f7f2; font-size: 14px; }.cost-row b { display: block; margin-bottom: 1px; color: var(--ink-soft); font-size: 9px; font-weight: 500; }.cost-row .subtotal { color: var(--moss-dark); font-weight: 700; }.cost-header { display: none; }.cost-total { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: baseline; padding: 14px 12px; background: var(--mist); }.cost-total span { font-size: 13px; font-weight: 700; }.cost-total strong { color: var(--moss-dark); font-size: 21px; letter-spacing: .03em; }.cost-total small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 11px; }
.closing { margin: -9px 0 65px; padding: 24px 0; border-block: 1px solid var(--line); }.closing p:last-child { margin-bottom: 0; }.sources-section { padding-top: 1px; }.source-list { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; }.source-list li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }.source-list li:last-child { border-bottom: 1px solid var(--line); }.source-list > li > span { color: var(--clay); font-size: 11px; font-weight: 700; }.source-list strong, .source-list a, .source-list small { display: block; }.source-list strong { margin-bottom: 2px; font-size: 12px; }.source-list a { overflow-wrap: anywhere; color: var(--moss); font-size: 11px; line-height: 1.55; }.source-list small { color: var(--ink-soft); font-size: 10px; }.editor-profile { display: grid; grid-template-columns: 48px 1fr; gap: 16px; margin-top: -30px; padding: 22px 0 0; border-top: 2px solid var(--moss); }.profile-seal { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--moss); color: white; font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }.editor-profile .eyebrow { margin-bottom: 5px; font-size: 9px; }.editor-profile h2 { margin-bottom: 7px; font-family: var(--sans); font-size: 17px; font-weight: 700; }.editor-profile p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

/* Footer */
.site-footer { padding-top: 40px; background: #263b35; color: #e9eee9; }.footer-grid { display: grid; gap: 28px; padding-bottom: 28px; }.brand-footer { color: white; }.brand-footer .brand-mark { border-color: #bed5c8; }.brand-footer .brand-mark i:first-child { background: #bed5c8; }.brand-footer .brand-mark i:last-child { background: #d89676; }.brand-footer small { color: #b8c7bf; }.footer-grid p { margin: 15px 0 0; color: #bdc9c2; font-size: 12px; }.footer-grid nav { display: grid; align-content: start; gap: 9px; font-size: 13px; }.footer-grid nav a { color: #e9eee9; text-decoration: none; }.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 14px; border-top: 1px solid rgba(255,255,255,.18); color: #aebdb5; font-size: 10px; }

@media (min-width: 640px) {
  .container { width: min(calc(100% - 64px), var(--container)); }
  .home-hero { padding-block: var(--space-6); }.hero-visual { min-height: 390px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }.article-card-featured { grid-column: span 2; display: grid; grid-template-columns: 1.18fr 1fr; gap: 24px; align-items: start; }.article-card-featured .card-image { height: 290px; }.article-card-featured .card-content { padding-top: 4px; }.article-card-featured h3 { font-size: 23px; }
  .destination-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }.editorial-note { grid-template-columns: .95fr 1fr; gap: 60px; }.footer-grid { grid-template-columns: 1fr 260px; }.spot-grid { grid-template-columns: 1fr 1fr; }.choice-pair { grid-template-columns: 1fr 34px 1fr; align-items: stretch; gap: 0; }.choice-or { align-self: center; }.cost-row { grid-template-columns: 2fr 1fr 1fr 1.15fr; }.cost-header { display: grid; background: #f1f2ed; }.cost-header > * { color: var(--ink-soft); font-size: 10px; font-weight: 700; }.cost-row strong { grid-column: auto; padding-bottom: 11px; background: transparent; font-size: 13px; }.cost-row > :nth-child(even) { border-left: 0; }.cost-row > * + * { border-left: 1px solid var(--line); }.cost-row b { display: none; }
}

@media (min-width: 880px) {
  .primary-nav { display: flex; }.home-hero { padding-block: 88px; }.hero-grid { grid-template-columns: 1fr .93fr; gap: 68px; }.hero-visual { min-height: 455px; }.verification-inner { grid-template-columns: 32px 1fr auto; padding-block: 18px; }.verification-inner > a { display: block; text-decoration: none; }.section { padding-block: var(--space-7); }.article-grid { grid-template-columns: repeat(3, 1fr); }.article-card-featured { grid-column: span 2; }.article-card:nth-child(4) { grid-column: span 1; }.article-heading { grid-template-columns: 1.15fr .85fr; gap: 65px; }.article-hero-image { min-height: 370px; }.article-layout { grid-template-columns: 195px minmax(0, var(--reading)); justify-content: center; gap: 74px; padding-block: 72px var(--space-7); }.table-of-contents { position: sticky; top: 22px; }.article-body > section { margin-bottom: 76px; }.footer-grid { padding-bottom: 40px; }
}

@media (min-width: 1120px) {
  .article-grid { grid-template-columns: repeat(4, 1fr); }.article-card-featured { grid-column: span 2; }.article-card-featured .card-image { height: 315px; }
}

/* ------------------------------------------------------------------
   2. 本文の部品（design/additions.css）
   ------------------------------------------------------------------ */
/* デザインに無かった部品を足す。既存のトークン（--ink 等）をそのまま使う */

/* 写真 */
.photo { margin: 32px 0; }
.photo img { display:block; width:100%; height:auto; border-radius:4px; background:var(--paper-deep); }
.photo figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:9px; }
.photo-caption { color:var(--ink-soft); font-size:13px; line-height:1.65; }
.photo-credit { color:#8d968f; font-size:10px; letter-spacing:.02em; }
.photo-credit a { color:#8d968f; }
.photo.hero { margin:0 0 36px; }
.photo.hero img { border-radius:0; aspect-ratio:16/9; object-fit:cover; }
.photo.wide img { aspect-ratio:3/2; object-fit:cover; }
.photo-row { display:grid; gap:16px; margin:32px 0; }
.photo-row .photo { margin:0; }
.photo-row .photo img { aspect-ratio:4/3; object-fit:cover; }

/* 地図 */
.map-embed { margin:28px 0 36px; }
.map-embed iframe { display:block; border-radius:4px; background:var(--paper-deep); }
.map-credit { margin:8px 0 0; color:#8d968f; font-size:10px; }
.map-credit a { color:#8d968f; }

/* エリアの一覧 */
.area-list { display:grid; gap:0; margin:28px 0 36px; }
.area-item { padding:16px 0; border-top:1px solid var(--line); }
.area-item:last-child { border-bottom:1px solid var(--line); }
.area-item h3 { margin:0 0 5px; font-size:15px; font-weight:700; color:var(--moss-dark); }
.area-item p { margin:0; font-size:14px; line-height:1.8; color:var(--ink-soft); }

/* アクセス */
.access-table { display:grid; gap:0; margin:28px 0; }
.access-row { display:grid; grid-template-columns:1fr; gap:6px; padding:18px 0; border-top:1px solid var(--line); }
.access-row:last-child { border-bottom:1px solid var(--line); }
.access-from { display:flex; align-items:baseline; gap:10px; }
.access-label { color:var(--clay); font-size:11px; font-weight:700; letter-spacing:.06em; }
.access-from strong { font-size:20px; color:var(--moss-dark); }
.access-means { margin:0 0 4px; font-size:13px; font-weight:700; }
.access-body p { margin:0 0 4px; font-size:13px; line-height:1.75; color:var(--ink-soft); }
.access-body small { display:block; margin-top:6px; color:#8d968f; font-size:10px; }
.access-body small a { color:#8d968f; }

/* スポットカードに足した注意書き */
.spot-notes { margin:12px 0 0; padding-left:1.05em; list-style:disc; }
.spot-notes li { margin:5px 0; color:var(--ink-soft); font-size:12.5px; line-height:1.75; }

/* 本文 */
.lede { font-size:17px; line-height:1.95; }
.checklist { margin:24px 0; padding-left:1.4em; }
.checklist li { margin:10px 0; line-height:1.8; }
.photo-license-note { margin-top:24px; color:#8d968f; font-size:11px; line-height:1.7; }
h1,h2,h3 { line-break:strict; word-break:normal; overflow-wrap:break-word; }

@media (min-width:640px) {
  .photo-row { grid-template-columns:1fr 1fr; }
  .area-list { grid-template-columns:1fr 1fr; column-gap:36px; }
  .access-row { grid-template-columns:180px minmax(0,1fr); gap:20px; }
  .access-from { display:block; }
  .access-label { display:block; margin-bottom:2px; }
}

/* 市内の移動手段 */
.transit-list { display:grid; gap:0; margin:28px 0 10px; }
.transit-card { padding:20px 0; border-top:1px solid var(--line); }
.transit-card:last-child { border-bottom:1px solid var(--line); }
.transit-for { margin:0 0 4px; color:var(--clay); font-size:11px; font-weight:700; letter-spacing:.04em; }
.transit-card h3 { margin:0 0 7px; font-size:16px; font-weight:700; color:var(--moss-dark); }
.transit-card p { margin:0 0 5px; font-size:13.5px; line-height:1.8; color:var(--ink-soft); }
.transit-interval { font-size:12.5px !important; color:var(--ink) !important; font-weight:700; }
.transit-note { margin-top:8px !important; padding-left:11px; border-left:2px solid var(--mist); font-size:12.5px !important; }
.transit-source { margin:10px 0 32px; color:#8d968f; font-size:10.5px; }
.transit-source a { color:#8d968f; }
@media (min-width:640px) { .transit-list { grid-template-columns:1fr 1fr; column-gap:32px; } }

/* 比較表。スマホでは横スクロールさせる（375pxで3列以上は入らないため） */
.compare-wrap { overflow-x:auto; margin:24px 0 8px; -webkit-overflow-scrolling:touch; }
.compare-table { border-collapse:collapse; min-width:100%; font-size:13px; }
.compare-table th, .compare-table td { padding:11px 13px; border:1px solid var(--line); vertical-align:top; line-height:1.7; }
/* 見出しは折り返す。カード名のように長い見出しを nowrap にすると、
   2列の表でも996px必要になって、1600pxの画面でも横スクロールになっていた。
   列の幅は td の min-width が持つので、折り返しても潰れない */
.compare-table thead th { background:#f1f2ed; font-size:13px; font-weight:700; color:var(--moss-dark); }
.compare-table tbody th { background:#f7f7f3; font-weight:700; color:var(--ink-soft); font-size:11.5px; white-space:nowrap; text-align:left; }
.compare-table td { min-width:190px; color:var(--ink-soft); }
/* 表の左端にそろえる。`.article-body > ul` の padding-left:1.3em に負けるので、
   同じくらい強い書き方にしておく */
.compare-source, .article-body > ul.compare-source {
  margin:0 0 28px; padding-left:0; list-style:none;
}
.compare-source li { margin:3px 0; color:#8d968f; font-size:10.5px; }
.compare-source a { color:#8d968f; }
.compare-cards { display:none; }
.compare-card { margin:0 0 12px; padding:14px 16px; border:1px solid var(--line); background:#fbfbf7; }
.compare-card h4 { margin:0 0 8px; font-size:15px; font-weight:700; color:var(--moss-dark); }
.compare-card dl { margin:0; display:grid; gap:8px; }
.compare-card dt { margin:0 0 2px; font-size:11px; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; }
.compare-card dd { margin:0; font-size:13.5px; line-height:1.75; color:var(--ink-soft); }
@media (max-width: 700px) {
  .compare-wrap { display:none; }
  .compare-cards { display:block; margin:24px 0 8px; }
}

/* ---- 地図（世界＝地球儀／日本） ---- */
.map-section { padding-block: 56px 8px; }
.map-intro { margin: 8px 0 20px; color: var(--ink-soft); font-size: 14px; }
.trip-map {
  /* 陸を濃く、海を紙の色に。背景（paper-deep）と海が同じ色だと地球儀が消える */
  --map-land: #405D54; --map-line: #2E4740; --map-sea: #FCFBF7; --map-pin: #B66D50;
  /* 海外の地図で、記事の国以外を置く色。国境が見えないと国の形が分からない */
  --map-land-far: #C8D3CD;
  margin: 0 0 18px;
}
.map-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.map-tab {
  padding: 7px 18px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 13px; cursor: pointer;
}
.map-tab[aria-selected="true"] { border-color: var(--moss-dark); background: var(--moss-dark); color: #fff; }
.map-stage { position: relative; }
.map-canvas {
  display: block; width: 100%; height: 340px;
  border: 1px solid var(--line); border-radius: 2px;
  background: #EFEDE4; touch-action: pan-y;
}
.map-canvas:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.map-tip {
  position: absolute; z-index: 2; max-width: 220px; padding: 7px 10px;
  border-radius: 2px; background: var(--ink); color: #fff;
  font-size: 12px; line-height: 1.5; pointer-events: none;
}
.map-tip strong { display: block; font-weight: 600; }
.map-tip span { color: #c9d3ce; font-size: 11px; }
.map-help { margin: 8px 0 0; color: #8d968f; font-size: 11.5px; }
.map-failed .map-stage, .map-failed .map-tabs, .map-failed .map-help { display: none; }
.map-list { display: grid; gap: 1px; margin: 20px 0 0; padding: 0; list-style: none; background: var(--line); }
.map-list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 14px; background: var(--paper); text-decoration: none;
}
.map-list a:hover { background: #f6f5f0; }
.map-list span { color: var(--moss-dark); font-size: 13px; font-weight: 700; white-space: nowrap; }
.map-list small { color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
@media (min-width: 720px) {
  /* 地球儀が大きくなりすぎないように、地図だけ幅を絞る */
  .trip-map { max-width: 700px; margin-inline: auto; }
  .map-canvas { height: 470px; }
  .map-list { grid-template-columns: 1fr 1fr; }
}
.table-caption { margin: 26px 0 -8px; color: var(--moss-dark); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.table-notes { margin: 4px 0 6px; padding-left: 1.1em; list-style: none; }
.table-notes li { position: relative; margin: 6px 0; padding-left: 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.table-notes li::before { content: "―"; position: absolute; left: -1.1em; color: var(--clay); }
p.compare-source { margin: 0 0 28px; color: #8d968f; font-size: 11px; }
p.compare-source a { color: #8d968f; }
.source-list-plain { margin: 10px 0 0; padding-left: 1.2em; list-style: none; }
.source-list-plain li { position: relative; margin: 10px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.source-list-plain li::before { content: "―"; position: absolute; left: -1.2em; color: var(--clay); }
.trip-map-inline { margin: 26px 0 30px; }
.trip-map-inline .map-canvas { height: 300px; }
@media (min-width: 720px) { .trip-map-inline .map-canvas { height: 380px; } }

/* ---- 地図の拡大ボタン ---- */
.map-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 5px; z-index: 2; }
.map-zoom button {
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 2px;
  background: rgba(252, 251, 247, .94); color: var(--ink);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.map-zoom button:hover:not(:disabled) { background: #fff; border-color: var(--moss); }
.map-zoom button:disabled { opacity: .35; cursor: default; }
.map-zoom .map-zoom-reset { font-size: 15px; }
.map-zoom-level {
  position: absolute; left: 10px; bottom: 12px; z-index: 2;
  padding: 3px 8px; border-radius: 2px;
  background: rgba(252, 251, 247, .9); color: var(--ink-soft);
  font-size: 11px; letter-spacing: .02em;
}
.map-canvas { cursor: grab; }
.map-canvas:active { cursor: grabbing; }

/* ------------------------------------------------------------------
   3. WordPress用の追加（テーマ化にあたって足したぶん）
   ------------------------------------------------------------------ */

/* --- 本文はモックのような <section> 入れ子ではなく、h2 が並ぶ平らな構造で来る --- */
.article-body { counter-reset: tj-sec; }
.article-body > h2 {
  margin-top: 68px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body > h2::before {
  counter-increment: tj-sec;
  content: counter(tj-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.article-body > h3 { margin-top: 34px; margin-bottom: 12px; }
.article-body > ul, .article-body > ol { margin-bottom: 22px; padding-left: 1.3em; }
.article-body > ul li, .article-body > ol li { margin-bottom: 8px; }
.article-body > blockquote {
  margin: 0 0 24px; padding: 16px 20px;
  border-left: 3px solid var(--mist); background: var(--paper-deep);
  font-size: 15px;
}

/* --- カードに実写真が入る（モックはCSSのプレースホルダだった） --- */
.card-image { position: relative; overflow: hidden; background: var(--mist); }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero-image.has-photo, .hero-visual.has-photo { overflow: hidden; }
.article-hero-image.has-photo img, .hero-visual.has-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-photo-credit {
  margin-top: 6px; color: var(--ink-soft); font-size: 11px; letter-spacing: .02em;
}
.hero-photo-credit a { color: inherit; }

/* --- 一覧・検索・404 --- */
.page-head { padding-block: 48px 8px; }
.page-head h1 { font-family: var(--serif); font-size: clamp(26px, 7vw, 38px); font-weight: 500; letter-spacing: .05em; }
.page-head p { margin-top: 10px; color: var(--ink-soft); font-size: 14px; }
.tj-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-block: 40px 72px; }
.tj-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 12px;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); font-size: 14px; text-decoration: none;
}
.tj-pagination .page-numbers.current { border-color: var(--moss); background: var(--moss); color: #fff; }
.tj-empty { padding-block: 40px 96px; color: var(--ink-soft); }

/* --- 固定ページ --- */
.page-body { max-width: var(--reading); margin-inline: auto; padding-block: 40px 88px; }
.page-body h2 { margin: 44px 0 16px; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.page-body p { margin-bottom: 20px; }

/* --- WordPressの作法 --- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.admin-bar .table-of-contents { top: 54px; }
img.wp-post-image, .article-body img { max-width: 100%; height: auto; }

/* --- 375pxで破綻しないための最終防衛 --- */
@media (max-width: 600px) {
  .article-body > h2 { margin-top: 48px; padding-top: 22px; }
  .article-hero-image.has-photo, .hero-visual.has-photo { height: 210px; }
}

/* ---- トップページ：記事の本数で崩れないようにする（2026-08-22） ----
   4枚組みのデザインに記事が2本しか無いと、右半分が空いて壊れて見えた。
   列の数を本数に合わせ、大きいカードは1本のときと4本以上のときだけ使う。 */
.article-grid { grid-template-columns: 1fr; }
.article-card-featured { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .article-grid[data-count="1"] { grid-template-columns: 1fr; }
}
@media (min-width: 880px) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
  .article-grid[data-count="1"] { grid-template-columns: 1fr; }
  .article-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .article-card-featured { grid-column: span 2; grid-template-columns: 1fr 1fr; }
  .article-grid[data-count="1"] .article-card-featured { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; }
  /* 2本のときはカードが広いので、写真も横長にして間の抜けを埋める */
  .article-grid[data-count="2"] .card-image { height: 290px; }
}
@media (min-width: 1120px) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
  .article-grid[data-count="1"] { grid-template-columns: 1fr; }
  .article-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .article-card-featured .card-image { height: 300px; }
}

/* ---- 見出しの折り返し ----
   clamp が画面幅だけを見ていたので、左半分に収まらず「ら。」だけが3行目に落ちていた。
   桁数（8文字）が横に並ぶ大きさに抑える。 */
@media (min-width: 880px) {
  .hero-copy h1 { font-size: clamp(40px, 5.1vw, 64px); }
}

/* ---- トップの見出し写真 ----
   いちばん新しい記事の写真を使うと、すぐ下のカードと同じ写真が2枚並ぶ。
   サイトの顔として1枚だけ別に持たせ、出どころをその場に書く。 */
.hero-figure { position: relative; margin: 0; }
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(rgba(30, 40, 34, 0), rgba(30, 40, 34, .66));
  color: rgba(255, 255, 255, .94);
  font-size: 11px; letter-spacing: .05em; line-height: 1.5;
}
.hero-figure figcaption a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.hero-figure figcaption a:hover { color: #fff; text-decoration: underline; }

/* ---- 地図の下の記事リスト ----
   1px の隙間を背景色で見せる作りだったので、記事が奇数本だと
   最後に灰色の空き箱がひとつ残っていた。線は各行に持たせる。 */
.map-list { gap: 0; background: none; border-top: 1px solid var(--line); }
.map-list li { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .map-list li:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); }
}

/* ---- 行き先の一覧：1つしか無いときに半分で切れないように ---- */
.destination-list { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* ---- カードの足並みをそろえる ----
   本文の行数が違うと、確認日のタグの高さがカードごとにずれる */
.article-card:not(.article-card-featured) { display: flex; flex-direction: column; }
.article-card:not(.article-card-featured) .card-content { display: flex; flex: 1; flex-direction: column; }
.article-card:not(.article-card-featured) .card-tags { margin-top: auto; padding-top: 4px; }

/* ---- 記事の見出し写真のクレジット ----
   写真とは別の欄に置いていたので、左下に文字だけが浮いていた。写真の上に重ねる。 */
.article-hero-image { position: relative; }
.hero-photo-credit {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 24px 14px 9px;
  background: linear-gradient(rgba(30, 40, 34, 0), rgba(30, 40, 34, .62));
  color: rgba(255, 255, 255, .88);
  font-size: 11px; letter-spacing: .04em;
}
.hero-photo-credit a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.hero-photo-credit a:hover { text-decoration: underline; }

/* ---- 列の多い比較表 ----
   5軒を横に並べると、720pxの読み幅では表が横スクロールになる。
   横に見比べられないなら表の意味がないので、
   ・980pxまでは表をやめてカードにする（1軒＝1枚）
   ・それ以上では、表だけ本文の幅から左右にはみ出させる
   列が2〜3の表（制度の条件など）はこれまでどおり700pxで切り替える。 */
@media (max-width: 980px) {
  .compare-wrap[data-cols="4"], .compare-wrap[data-cols="5"],
  .compare-wrap[data-cols="6"], .compare-wrap[data-cols="7"] { display: none; }
  .compare-cards[data-cols="4"], .compare-cards[data-cols="5"],
  .compare-cards[data-cols="6"], .compare-cards[data-cols="7"] { display: grid; }
}
@media (min-width: 981px) {
  .compare-cards[data-cols="4"], .compare-cards[data-cols="5"],
  .compare-cards[data-cols="6"], .compare-cards[data-cols="7"] { display: none; }
  /* 1マスの最低幅（190px）を外して、見出しも折り返せるようにする */
  .compare-wrap[data-cols="4"] .compare-table td, .compare-wrap[data-cols="5"] .compare-table td,
  .compare-wrap[data-cols="6"] .compare-table td, .compare-wrap[data-cols="7"] .compare-table td {
    min-width: 0;
  }
  .compare-wrap[data-cols="4"] .compare-table, .compare-wrap[data-cols="5"] .compare-table,
  .compare-wrap[data-cols="6"] .compare-table, .compare-wrap[data-cols="7"] .compare-table {
    table-layout: fixed; width: 100%; font-size: 12.5px;
  }
  .compare-wrap[data-cols="4"] .compare-table th, .compare-wrap[data-cols="5"] .compare-table th,
  .compare-wrap[data-cols="6"] .compare-table th, .compare-wrap[data-cols="7"] .compare-table th,
  .compare-wrap[data-cols="4"] .compare-table td, .compare-wrap[data-cols="5"] .compare-table td,
  .compare-wrap[data-cols="6"] .compare-table td, .compare-wrap[data-cols="7"] .compare-table td {
    padding: 9px 10px;
  }
  .compare-wrap[data-cols="4"] .compare-table thead th,
  .compare-wrap[data-cols="5"] .compare-table thead th,
  .compare-wrap[data-cols="6"] .compare-table thead th,
  .compare-wrap[data-cols="7"] .compare-table thead th { white-space: normal; font-size: 12.5px; }
  .compare-wrap[data-cols="4"] .compare-table thead td:first-child,
  .compare-wrap[data-cols="5"] .compare-table thead td:first-child,
  .compare-wrap[data-cols="6"] .compare-table thead td:first-child,
  .compare-wrap[data-cols="7"] .compare-table thead td:first-child { width: 88px; }
}
/* 広い画面では、表だけ本文の幅からはみ出させる。
   ★はみ出すのは右だけ。左には position:sticky の目次があり、
   目次は「位置指定された要素」なので表より手前に描かれる。
   左へ広げると、行の見出しの列（場所・ビーチ・屋外プール…）が
   まるごと目次の下に隠れて、しかも横スクロールでも出てこなかった。

   目次も本文も画面の中央にそろうので、本文の右にある余白は
   （100vw - 989px）÷ 2。そこから24pxだけ残して使う（縦スクロールバーの分）。
   広げすぎても読みにくいので、本文720pxと合わせて1180pxで頭打ちにする。 */
@media (min-width: 1120px) {
  .compare-wrap[data-cols="4"], .compare-wrap[data-cols="5"],
  .compare-wrap[data-cols="6"], .compare-wrap[data-cols="7"] {
    width: calc(100% + max(0px, min(460px, (100vw - 989px) / 2 - 24px)));
  }
}
@media (min-width: 640px) {
  .compare-cards[data-cols="4"], .compare-cards[data-cols="5"],
  .compare-cards[data-cols="6"], .compare-cards[data-cols="7"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  }
}
.compare-table th[scope="row"] { white-space: nowrap; }

/* ---- 国の記事（親）とエリアの記事（子） ---- */
/* エリア一覧のカード。スマートフォンでは1列、広ければ2列。
   最低幅を固定で持たせると375pxではみ出す（destination-listで一度やった）ので使わない */
.area-cards { display: grid; gap: 16px; margin: 26px 0 8px; }
.area-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
  padding: 12px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.area-card:hover { border-color: var(--moss); transform: translateY(-1px); }
.area-card-photo { display: block; border-radius: 2px; overflow: hidden; background: var(--mist); }
/* スマートフォンでは写真を上に敷く。横に置くと写真が小さすぎて、
   文の長いカードでは右の列だけ伸びて左に灰色の帯が残る */
.area-card-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.area-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.area-card-label {
  font-size: 11px; letter-spacing: .12em; color: var(--clay); text-transform: uppercase;
}
.area-card strong { font-family: var(--serif); font-size: 16px; line-height: 1.45; }
.area-card-text { font-size: 13px; color: var(--ink-soft); line-height: 1.75; }
.area-card-more { margin-top: auto; font-size: 12.5px; color: var(--moss); }
/* 広い画面でも写真は上のまま、2列に増やすだけ。
   本文の幅は720pxしかないので、横に置くと文の列が200px弱になって読みにくい */
@media (min-width: 700px) {
  .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 同じ国のほかのエリアへ */
.sibling-nav {
  margin: 34px 0 8px; padding: 18px 18px 8px;
  background: var(--paper-deep); border-radius: 3px;
}
.sibling-head { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.sibling-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sibling-nav li a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 2px; text-decoration: none; color: inherit;
}
.sibling-nav li a:hover { border-color: var(--moss); }
.sibling-nav li span { font-size: 13.5px; font-weight: 600; }
.sibling-nav li small { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
@media (min-width: 700px) {
  .sibling-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 国そのものの基礎データ。1行ごとに出典と確認日を持つ */
.country-facts {
  margin: 22px 0; border-top: 1px solid var(--line);
}
.country-facts > div {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.country-facts dt { font-size: 12.5px; color: var(--clay); font-weight: 600; }
.country-facts dd { margin: 0; font-size: 14.5px; line-height: 1.85; }
/* 出典は事実より小さく。同じ濃さで並べると、どちらが本文か分からなくなる */
.country-facts .fact-src {
  display: block; margin-top: 5px; font-size: 11px; color: #8d968f;
  line-height: 1.6; text-decoration: none;
}
.country-facts .fact-src::before { content: "出典："; }
.country-facts .fact-src:hover { color: var(--moss); text-decoration: underline; }
@media (min-width: 700px) {
  .country-facts > div { grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; }
  .country-facts dt { padding-top: 3px; }
}

/* --- スマートフォンでもヘッダーから移動できるようにする ---
   880px未満ではメニューが display:none で消えていて、
   記事から一覧や行き先へ戻る道がブラウザの戻るボタンしか無かった。 */
.header-inner { flex-wrap: wrap; }
.primary-nav {
  display: flex; order: 3; width: 100%; gap: 16px;
  margin: -2px 0 0; padding-bottom: 11px;
  font-size: 12px; white-space: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.primary-nav::-webkit-scrollbar { display: none; }
@media (min-width: 880px) {
  .header-inner { flex-wrap: nowrap; }
  .primary-nav {
    order: 0; width: auto; gap: 27px; margin: 0; padding-bottom: 0;
    font-size: 13px; overflow: visible;
  }
}

/* --- 記事の終わりの「次に読む」。国やエリアの記事は sibling-nav が出るので、
       それが無い記事（金沢・沖縄・マリオット等）にはこちらを出す --- */
.related-nav { margin-top: 40px; }
/* 監修者の枠は margin-top:-30px で「本文の section（下に65px）」に寄せてある。
   その下に行き先のナビが来ると、緑の罫線が最後のカードに食い込む */
.sibling-nav + .editor-profile { margin-top: 32px; }

/* ---- 紹介記事の部品（2026-08-24） ----
   調べた結果を並べるだけだと「報告書」になる。読者が自分で選べるように、
   結論・向き不向き・目的別・予約への導線を持つ部品を足した。 */

/* この記事でわかること */
.takeaways { margin: 0 0 34px; padding: 20px 22px; border: 1px solid var(--line); background: var(--paper-deep); }
.takeaways-title { margin: 0 0 10px !important; color: var(--moss); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.takeaways ul { margin: 0; padding-left: 1.2em; }
.takeaways li { margin: 7px 0; font-size: 14px; line-height: 1.75; }

/* 順位つきのおすすめ */
.picks { display: grid; gap: 16px; margin: 0 0 34px; }
.pick { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 18px; border: 1px solid var(--line); background: #fffefa; }
.pick-rank { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--moss); color: #fff; font-family: var(--serif); font-size: 17px; letter-spacing: .04em; }
.picks > .pick:first-child .pick-rank { background: var(--clay); }
.pick-tag { display: inline-block; margin: 0 0 8px !important; padding: 2px 8px; background: var(--mist); color: var(--moss-dark); font-size: 10px; font-weight: 700; line-height: 1.65; }
.pick h3 { margin: 0 0 7px; font-size: 18px; }
.pick-lead { margin: 0 0 12px !important; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.pick ul { margin: 0; padding-left: 1.2em; }
.pick li { margin: 5px 0; font-size: 13px; line-height: 1.7; }

/* 向いている人／気をつける点 */
.verdict { display: grid; margin: 0 0 30px; border: 1px solid var(--line); }
.verdict > div { padding: 14px 16px; }
.verdict > div + div { border-top: 1px solid var(--line); }
.verdict-good { background: #f1f6f2; }
.verdict-watch { background: #fbf5f1; }
.verdict h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.verdict-good h4 { color: var(--moss-dark); }
.verdict-watch h4 { color: #8a5540; }
.verdict p { margin: 0; font-size: 13px; line-height: 1.75; }
@media (min-width: 700px) {
  .verdict { grid-template-columns: 1fr 1fr; }
  .verdict > div + div { border-top: 0; border-left: 1px solid var(--line); }
}

/* 目的別 */
.usecases { display: grid; gap: 12px; margin: 0 0 30px; }
.usecase { padding: 16px 18px; border-left: 3px solid var(--moss); background: #f8f7f1; }
.usecase h3 { margin: 0 0 6px; font-size: 15px; }
.usecase p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.usecase p strong { color: var(--ink); }
@media (min-width: 700px) { .usecases { grid-template-columns: 1fr 1fr; } }

/* 予約への導線 */
.cta { margin: 34px 0; padding: 24px 22px; border: 2px solid var(--moss); background: #f1f6f2; }
.cta h3 { margin: 0 0 9px; font-size: 17px; }
.cta p { margin: 0 0 16px !important; font-size: 13px; line-height: 1.8; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .button { border-color: var(--moss-dark); font-size: 13px; }
.cta-note { margin: 14px 0 0 !important; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }

/* ------------------------------------------------------------------
   4. 長い記事の読みやすさ（2026-08-24）
   ヒルトン記事（6万px級）で出た弱点をまとめて手入れする。
   ------------------------------------------------------------------ */

/* --- ヘッダーを追従させる。記事の途中からでもサイト内を移動できる。
       スマートフォンはヘッダーが2段（ブランド＋メニュー）で背が高いので追従させない --- */
@media (min-width: 880px) {
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(252, 251, 247, .88);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    transition: box-shadow .25s;
  }
  .site-header.is-stuck { box-shadow: 0 1px 14px rgba(37, 48, 45, .09); }
  .admin-bar .site-header { top: 32px; }
  /* 追従ヘッダーのぶん、見出しへの着地位置と目次の張り付き位置を下げる */
  .article-body > h2, .article-body > section { scroll-margin-top: 96px; }
  .article-body > h3[id] { scroll-margin-top: 92px; }
  .table-of-contents { top: 96px; }
  .admin-bar .table-of-contents { top: 128px; }
}

/* --- 読んだ量のバー。記事ページの最上部に細く出る（JSが動かす） --- */
.tj-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; }
.admin-bar .tj-progress { top: 32px; }
.tj-progress i { display: block; height: 100%; background: var(--moss); transform: scaleX(0); transform-origin: 0 50%; }

/* --- 記事の大見出し。40字級のタイトルが59px×5行で積み上がっていたのを抑える --- */
.article-heading h1 { font-size: clamp(27px, 5.4vw, 44px); line-height: 1.45; }

/* --- 目次。現在地が分かるようにし、ホテル名の階層も持てるようにする --- */
.table-of-contents > ol { gap: 2px; padding-left: 0; font-size: 12.5px; list-style: none; counter-reset: tj-toc; }
.table-of-contents > ol > li > a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px;
  padding: 5px 6px 5px 8px; border-left: 2px solid transparent;
  color: var(--ink-soft); line-height: 1.55;
}
.table-of-contents > ol > li > a::before {
  counter-increment: tj-toc; content: counter(tj-toc, decimal-leading-zero);
  padding-top: 2px; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
.table-of-contents a:hover { color: var(--moss-dark); background: #f1f0e8; }
.table-of-contents li.is-here > a { border-left-color: var(--moss); background: #eef2ec; color: var(--moss-dark); font-weight: 700; }
/* ホテル名の階層。JSがいま読んでいる章だけ開く（JSが無ければ章の一覧のみ） */
.table-of-contents .toc-sub { display: none; margin: 1px 0 4px; padding-left: 26px; list-style: none; }
.table-of-contents li.is-open > .toc-sub { display: grid; gap: 1px; }
.table-of-contents .toc-sub a { display: block; padding: 3px 6px; border-left: 2px solid var(--line); color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.table-of-contents .toc-sub li.is-here > a { border-left-color: var(--moss); background: #eef2ec; color: var(--moss-dark); font-weight: 700; }
@media (min-width: 880px) {
  .table-of-contents { max-height: calc(100vh - 118px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* --- 図鑑のホテル見出し。id付きのh3を「1軒の始まり」として立たせる --- */
.article-body > h3[id] {
  margin-top: 60px; font-family: var(--serif);
  font-size: 22px; font-weight: 500; letter-spacing: .05em; line-height: 1.4;
}
.article-body > h3[id]::before {
  content: ""; display: block; width: 34px; height: 3px;
  margin-bottom: 12px; background: var(--clay);
}
.article-body > h3[id] + figure.photo { margin-top: 16px; }

/* --- 公式情報のカードと「泊まった人の記録」を見分けられるようにする。
       事実のカードは id="spot-…" を持ち、記録のカードは持たない --- */
.spot-card { border-radius: 3px; }
.spot-card h3 { font-size: 18px; }
.article-body .spot-card[id] { border-left: 3px solid var(--moss); }
.article-body .spot-card:not([id]) { border-color: #e6d6c8; border-left: 3px solid var(--clay); background: #fcf8f1; }
.article-body .spot-card:not([id]) .spot-kind { background: var(--clay); }
.article-body .spot-card:not([id]) .spot-notes li { color: #5d554c; }

/* --- 長い表を読みやすく --- */
.compare-table thead th { border-bottom: 2px solid var(--moss); }
.compare-table tbody tr:nth-child(even) td { background: #f8f7f2; }

/* --- 角の丸みを箱の部品でそろえる（写真・エリアカードの3〜4pxに合わせる） --- */
.takeaways, .pick, .verdict, .usecase, .cta, .caution-box, .choice-card, .compare-card { border-radius: 3px; }

/* --- スマートフォンの目次ボタン。長い記事の途中から目次を開ける（JSが作る） --- */
.toc-fab {
  position: fixed; right: 14px; bottom: 18px; z-index: 70;
  display: none; align-items: center; padding: 12px 19px;
  border: 0; border-radius: 999px; background: var(--moss-dark); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 4px 18px rgba(37, 48, 45, .28); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
body.tj-fab-on .toc-fab { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 879px) { .toc-fab { display: inline-flex; } }
.toc-fab:focus-visible, .toc-close:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.toc-sheet { position: fixed; inset: 0; z-index: 80; }
.toc-sheet[hidden] { display: none; }
.toc-scrim { position: absolute; inset: 0; background: rgba(30, 40, 34, .45); }
.toc-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh;
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 30px rgba(30, 40, 34, .25);
  animation: tj-sheet-up .22s ease;
}
@keyframes tj-sheet-up { from { transform: translateY(24px); opacity: .6; } }
.toc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.toc-panel-head strong { color: var(--moss); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.toc-close { padding: 4px 10px; border: 0; background: none; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; }
.toc-panel-list { overflow-y: auto; padding: 10px 18px 26px; overscroll-behavior: contain; }
.toc-panel-list ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: tj-toc; }
.toc-panel-list > ol > li > a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px;
  padding: 8px 6px; color: var(--ink); font-size: 14px; line-height: 1.55; text-decoration: none;
}
.toc-panel-list > ol > li > a::before {
  counter-increment: tj-toc; content: counter(tj-toc, decimal-leading-zero);
  padding-top: 3px; color: var(--clay); font-size: 11px; font-weight: 700;
}
.toc-panel-list .toc-sub { display: grid; gap: 1px; margin: 0 0 6px; padding-left: 32px; }
.toc-panel-list .toc-sub a { display: block; padding: 6px; border-left: 2px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.5; text-decoration: none; }
.toc-panel-list li.is-here > a { color: var(--moss-dark); font-weight: 700; }
.toc-panel-list .toc-sub li.is-here > a { border-left-color: var(--moss); }
body.tj-lock { overflow: hidden; }