/* ============================================================
   FEEL THE LOCAL — 記事ページ
   A案「上映プログラム」の設計体系を継承
   ・HERO＝スクリーン（暗い）／本文＝上映プログラム（白い紙）
   ・大見出しはゴシック、章の入り口は明朝
   ・全面にごく薄いフィルムグレイン
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper2:#F5F3EE;
  --ink:#141416;
  --red:#C8102E;
  --sig:#ED1C45;
  --smoke:#83838A;
  --line:#E3E1DC;
  /* カテゴリの色（記事一覧・トップ・記事ページで共通） */
  --c-walk:#ED1C45;      /* WALK MAP */
  --c-spots:#141416;     /* LOCAL SPOTS */
  --c-interview:#3F6B55; /* INTERVIEW */
  --c-hotel:#33536E;     /* HOTEL LIFE */
  --c-business:#4C3E7A;  /* BUSINESS PICK */
  --c-seasonal:#B08422;  /* SEASONAL */
  --c-news:#6E6E78;      /* HOTEL NEWS・UGC */
  /* 記事のKV（暗い写真の上）用に、同じ色相の明るい版 */
  --c-walk-kv:#ED1C45;
  --c-spots-kv:#FFFFFF;
  --c-interview-kv:#5E9A7B;
  --c-hotel-kv:#5B87AD;
  --c-business-kv:#8878C9;
  --c-seasonal-kv:#D2A63F;

  /* 角丸（カーブ）。写真・地図は角のまま、ボタンや枠だけ丸める。枠線とは併用しない */
  --r:14px;
  --r-m:10px;
  --pill:999px;

  --fv-course:276px;                          /* MODEL COURSEの帯の高さ（見出し付きの実測・9/24） */
  --fv-toc:61px;                              /* スマホでKVの下に来る目次バーの高さ（実測） */
  /* PCでMODEL COURSEをKVに重ねる量。帯の高さ＋18pxにして、帯ごとファーストビューに収めます（9/21）。
     これを帯の高さより小さくすると、帯の下が折り返しより下にはみ出します。
     MODEL COURSEが無い記事では 0 にして、KVを帯のぶんだけ低くします（9/24） */
  --fv-overlap:0px;
  /* KVの高さ。MODEL COURSEが無い記事は、折り返しの下に本文の頭が覗く高さにします（9/24）。
     9/26にリード文をKVの外に出したので、空いたぶんを写真に回して 50svh→58svh に。
     覗くのはリード文になり、「本文の頭を見せる」という狙いはそのままです。
     58svhより上げると、画面の低いノートPCでリード文が折り返しの下に隠れます */
  --fv-height:max(420px,58svh);
  --dark:#0C0C0E;
  --en:'Bebas Neue',sans-serif;
  --mc:'Shippori Mincho',serif;
  --ja:'Noto Sans JP',sans-serif;
  --gt:'Zen Kaku Gothic New',sans-serif;
  /* 旧名の互換（既存HTMLがそのまま動くように） */
  --black:var(--ink);
  --white:var(--paper);
  --off-white:var(--paper2);
  --gray:var(--smoke);
  --border:var(--line);
  --font-en:var(--en);
  --font-ja:var(--ja);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--ja);font-weight:300;
  background:var(--paper);color:var(--ink);
  line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* フィルムグレイン */
body::after{
  content:'';position:fixed;inset:-50%;z-index:900;pointer-events:none;
  opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ftlGrain .8s steps(4) infinite;
}
@keyframes ftlGrain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}
}

.section-wrap{max-width:1320px;margin:0 auto;padding:0 30px}
.section-wrap.narrow{max-width:840px}

/* ── 本文＝2カラム（左にサイドナビ）──────────────────────────
   scripts.js が .section-wrap.narrow を .article-layout に組み替えます。
   JSが無効な環境では .narrow のまま1カラムで読めます。 */
.article-layout{
  max-width:1160px;display:grid;grid-template-columns:236px minmax(0,780px);
  gap:0 60px;justify-content:center;align-items:start;
}
.article-main{min-width:0}

/* ── ヘッダー（LPと共通） ── */
.site-header{
  position:sticky;top:0;z-index:500;background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:12px 30px;
}
.site-header>a,.header-logo{flex:0 0 auto}
.header-logo img{height:26px;flex:0 0 auto;max-width:none}
.header-nav{display:flex;gap:22px;list-style:none;font-family:var(--en);font-size:13.5px;letter-spacing:.14em}
.header-nav a{opacity:.82;white-space:nowrap}
.header-nav a:hover{opacity:1;color:var(--red)}

/* ── 記事HERO＝スクリーン ── */
.article-hero{
  position:relative;background:var(--dark);color:#fff;overflow:hidden;
  /* 高さは画面に合わせつつ、リード文が長い記事では中身に合わせて伸ばす（上下が切れないように） */
  /* ファーストビューの組み立て（9/21）
     PCは写真で1画面を埋めます（ヘッダー54px ＋ KV ＝ 100svh）。
     MODEL COURSEの帯は、その写真の上に重ねてFV内に収めます（下の --fv-overlap 参照）。
     リード文が長い記事では height:auto で下に伸びます（見切れません）。 */
  /* 54px→70px：ヘッダーを大きくしたぶん（9/24）。--fv-peek のぶんは本文に譲る */
  height:auto;min-height:var(--fv-height);padding:clamp(40px,5vh,64px) 0 clamp(36px,5vh,56px);
  display:flex;align-items:center;justify-content:center;
}
/* 写真の上にかける暗幕。ベタ塗りの黒をやめ、写真そのものを見せる */
.article-hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,12,.18) 0%,rgba(10,10,12,0) 26%,
    rgba(10,10,12,0) 56%,rgba(10,10,12,.42) 100%);
}
/* 画面が低いとき（低い窓のPC・小さいスマホ）は、KVの余白と文字を詰めます。
   詰めないとKVの中身が入りきらず height:auto で下に伸びて、
   MODEL COURSEの帯（PC）／目次（スマホ）がファーストビューから押し出されます（9/21） */
@media (max-height:760px){
  /* 下の余白も詰める。KVの padding-bottom は「56px＋重なり量」なので、
     画面が低いときは 56px 側を削って中身の入る高さを稼ぎます */
  .article-hero{padding-top:36px;padding-bottom:calc(20px + var(--fv-overlap))}
  .article-title{font-size:clamp(26px,3.4vw,42px);margin-bottom:0}
  .article-eyebrow{margin-bottom:14px}
}
@media (max-height:620px){
  .article-hero{padding-top:28px}
}

/* 写真を明るく見せつつ文字を読ませるため、暗幕は薄くして（上の ::before）、
   文字の背後だけをやわらかく落とします（9/26）。
   全面を均一に暗くすると写真が眠くなるので、必要なところにだけ掛けています。
   アイキャッチ79枚の明るさを実測し、いちばん明るいNo29（平均142）で読めることを確認。
   いちばん暗いNo07（平均40）でも潰れません。 */
.article-hero-inner::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1080px,100%);height:118%;pointer-events:none;
  /* 2026-10-21：透明になる位置を78%→70%にしました。
     radial-gradient は既定で「いちばん遠い角」を基準に大きさが決まるので、
     半径は箱の半分の√2倍（約1.41倍）になります。78%だと**箱の縁より外**で
     透明になる計算で、縁にまだ8%ほど黒が残り、上下左右がスパッと切れて見えていました。
     70%なら 1/√2＝70.7% より内側なので、箱の中で消えきります。 */
  background:radial-gradient(ellipse at 50% 50%,
    rgba(8,7,10,.52) 0%,rgba(8,7,10,.34) 41%,rgba(8,7,10,0) 70%);
}
.article-hero-inner{
  position:relative;z-index:2;max-width:1080px;margin:0 auto;text-align:center;
  padding:0 clamp(20px,4vw,52px);
}
.article-eyebrow{
  font-family:var(--en);font-size:11.5px;letter-spacing:.24em;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-bottom:20px;
}
.article-eyebrow .sep{color:rgba(255,255,255,.6);font-size:7px}
/* カテゴリは赤地に白の札。写真の明るさに左右されず読める（白×#C8102E ≒ 5.9:1） */
.article-eyebrow .cat{background:var(--red);color:#fff;border-radius:var(--pill);padding:5px 13px 4px;letter-spacing:.2em;line-height:1.2;text-shadow:none}
.article-eyebrow .cat.walk-map{background:var(--c-walk-kv)}
.article-eyebrow .cat.local-spots{background:var(--c-spots-kv);color:var(--ink)}
.article-eyebrow .cat.interview{background:var(--c-interview-kv)}
.article-eyebrow .cat.hotel-life{background:var(--c-hotel-kv)}
.article-eyebrow .cat.business{background:var(--c-business-kv)}
.article-eyebrow .cat.seasonal{background:var(--c-seasonal-kv)}
.article-hero-inner>*{text-shadow:0 2px 12px rgba(8,6,4,.8),0 0 36px rgba(8,6,4,.55)}
.article-eyebrow .loc{color:rgba(255,255,255,.92)}
/* FVの主役。まわり（眉・リード・書き手）を下げたぶん、ここを上げてジャンプ率を作る。
   スマホの33pxは、いちばん長いタイトル（24文字）が3行に収まる上限。34pxで4行に割れる */
.article-title{
  font-family:var(--gt);font-weight:900;
  font-size:clamp(33px,5.0vw,62px);line-height:1.28;letter-spacing:0;
  margin-bottom:0;
}
/* 店名・固有名詞が行をまたいで割れないように */
.article-title .accent{color:var(--sig);white-space:nowrap}
/* 日本語の見出しを語句の切れ目で折る（対応ブラウザのみ。非対応環境は従来どおり） */
.article-title,.section-title,.subsection-title,.pullquote,
.spot-title,.spot-info-name,.step-title,.timeline-title,
.recipe-name,.related-card-title,.hotel-cta-copy{word-break:auto-phrase}
.article-subtitle{
  font-family:var(--en);font-size:clamp(11px,1.2vw,14px);letter-spacing:.22em;
  color:rgba(255,255,255,.72);margin-bottom:26px;
}
/* リード文は 9/26 にKVの外（本文の頭）へ出しました。下の .article-opening を参照。
   本文と同じゴシックのままだと本文の1段落目に見えてしまうので、書体を明朝に変えて
   段を分けています。明朝はサイトが「名前・見出し」に使っている書体（Shippori Mincho）
   なので、色も部品も増やさずに本文と区別できます。
   ウェイトは600。もともと500にしていましたが、9/26のパフォーマンス改善で
   Shippori Mincho のウェイトを1つに絞りました。日本語フォントは1ウェイトにつき
   サブセットが約46ファイル落ちてくるので、リード文のためだけに500を読むのは割に合いません。
   600は見出し用の太さですが、他の箇所（スポット名など）で既に読み込んでいるぶんを使い回せます。 */
.article-lede{
  font-family:var(--mc);font-weight:600;
  font-size:16px;line-height:2;letter-spacing:.04em;
  color:var(--ink);max-width:none;margin:0;text-align:left;
}
.article-hero-image{position:absolute;inset:0;z-index:0;max-width:none;margin:0}
/* KVの写真はゆっくり往復でズームし続けます（9/21）。
   alternate にしているのは、ループの折り返しで拡大率が一気に戻って「跳ねる」のを避けるためです
   （トップのスライドで同じ問題が出たので、こちらは最初から往復にしています）。
   入りのアニメーション（ftlKvIn）は親の .article-hero-image に付いているので、ぶつかりません。 */
.article-hero-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  animation:ftlKvDrift 26s ease-in-out infinite alternate}
@keyframes ftlKvDrift{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.article-hero-image img{animation:none}}
.article-hero-image .img-placeholder{width:100%;height:100%;aspect-ratio:auto;background:var(--dark)}
/* KVのキャプション（生成ビジュアルの注記）。9/26に写真の上から本文の頭へ移しました。
   スマホでは4行になってFVの26%を覆っていたのと、本文中の写真が .figure-caption を
   写真の下に置くので、並びを揃えています。白地のほうが注記として確実に読めます。
   上の負のマージンは .article-body の上余白（64px）を打ち消すためのもので、
   写真との間を本文中の写真と同じ12pxにしています。写真に付いている注記だと
   ひと目で分かるように、本文の .figure-caption より一段小さくしています。 */
.article-kv-caption{
  margin:-52px 0 30px;font-size:10.5px;line-height:1.7;color:var(--smoke);
}
/* MODEL COURSEのある記事は、KVの下に帯が入るので打ち消し不要（帯の下に付きます） */
body:has(.course-section) .article-kv-caption{margin-top:0}
.article-meta-note{
  max-width:1320px;margin:0 auto;padding:0 30px 36px;
  font-size:11.5px;line-height:1.9;color:#6A6A72;
}
/* HERO（暗い面）の中に置かれた場合 */
.article-hero .article-meta-note{color:rgba(255,255,255,.55);padding-left:0;padding-right:0}

/* ── 本文＝上映プログラム（白い紙） ── */
.article-body{padding:64px 0 20px;background:var(--paper)}
.section-header{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.section-eyebrow{
  font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--red);
  background:rgba(200,16,46,.09);border:0;border-radius:var(--pill);padding:3px 13px;white-space:nowrap;
  width:fit-content;max-width:100%;   /* 中身の幅に合わせる（見出しの長さまで伸ばさない） */
}
.section-title{
  font-family:var(--mc);font-weight:600;
  font-size:clamp(21px,2.8vw,32px);letter-spacing:.06em;line-height:1.45;
}
.section-sub{font-size:13px;color:var(--smoke);margin-left:auto}
.section-cta{
  font-family:var(--en);font-size:12px;letter-spacing:.18em;color:var(--red);
  border-bottom:1px solid var(--red);padding-bottom:3px;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.section-cta svg{width:13px;height:13px;stroke:currentColor;fill:none}
.section-cta:hover{color:var(--sig);border-bottom-color:var(--sig)}

/* ── タイトルの改行（2026-10-16 追加）──────────────────────────
   日本語はどこでも折り返せるのが既定なので、放っておくと「も／みじ」のように
   語の途中で割れます。折れてよい場所には tools/ja_linebreak.py が <wbr> を入れるので、
   ここでは**それ以外では折らない**ようにします。
   入りきらない節は overflow-wrap が最後の逃げ道です。
   **word-break:auto-phrase は使いません。**試したところ、いまのChromeでは
   「も／みじ」で割れたままでした（2026-10-16に実測）。keep-all のほうが確実です。 */
.article-title,.related-card-title,.archive-card-title,.bd-title{
  word-break:keep-all;overflow-wrap:anywhere}

/* 禁則（2026-10-17 追加）
   ① line-break:strict … 長音符「ー」や小書きのかな（っ ゃ ゅ ょ）を行頭に置かせません。
      ブラウザの既定（normal）だと、Chromeはこれらを行頭に送ります。
      実際に「1997年7月に…センター、2019年…」の節見出しで「ー」が行頭に来ていました。
   ② .nb … 句読点・閉じ括弧を直前の文字とくっつける印。ja_linebreak.py が入れます。
      タイトルには overflow-wrap:anywhere が掛かっていて、これは禁則を見ずに割るため、
      ①だけでは「…街／。二つの…」を防げません。white-space:nowrap は anywhere より強いので、
      包んでしまえば必ず一緒に動きます。
   anywhere 自体は外せません。外すとタイトル7本が横にはみ出しました（2026-10-17に実測）。 */
.article-title,.section-title,.subsection-title,
.related-card-title,.archive-card-title,.bd-title{line-break:strict}
.nb{white-space:nowrap}
.body-text{font-size:16.5px;font-weight:400;line-height:2.15;margin-bottom:30px;color:#33333A}
.body-text:last-child{margin-bottom:0}
/* 本文中の小見出し。「この街の歩き方」の“この順番がいい理由”などで使います。
   左端の飾り罫は決めごと⑤で使わないので、赤い小さな印でかわりにします（9/30） */
.subsection-title{
  font-family:var(--mc);font-weight:600;font-size:18px;line-height:1.5;
  margin:34px 0 14px;letter-spacing:.03em;display:flex;align-items:baseline;gap:10px;
}
.subsection-title::before{content:'';flex:0 0 auto;width:14px;height:2px;background:var(--red);transform:translateY(-5px)}
.pullquote{
  font-family:var(--mc);font-weight:600;font-size:clamp(17px,2vw,22px);line-height:2;
  letter-spacing:.05em;margin:44px 0;padding:26px 0 26px 28px;
  border-left:4px solid var(--red);color:var(--ink);
}

/* 図版 */
.figure{margin:40px 0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#E9E7E2}
/* 決めごと⑤「左端の飾り罫（アクセントバー）は使わない」に合わせ、border-left をやめました（9/26）。
   本文画像158枚にキャプションが入るので、ここから実際に見えるようになります */
.figure-caption{
  font-size:11.5px;color:var(--smoke);margin-top:12px;line-height:1.7;
}
/* 2026-10-14 追加。図版はふだん16:9に切っていますが、切ってはいけないものがあります。
   ・MAP ……… 全体が見えないと意味がない（堀川遊歩道の記事）
   ・小さい写真 … 引き伸ばすとぼけるので、元の大きさのまま置く
   どちらも .figure--full を付けて、切らずに全体を出します。 */
.figure--full img{aspect-ratio:auto;object-fit:contain;height:auto;background:transparent}
/* ── MAPの図版（2026-10-14 追加）──────────────────────────────
   地図は本文の幅に収めると文字が読めません。
   ・スマホ … 高さを決めて横にスクロール。押すと拡大
   ・PC   … 本文の幅に収めて、押すと拡大
   拡大（画面いっぱいに出すところ）は scripts.js が作ります。
   JSが動かない環境でも、リンクなので原寸の画像が開きます。 */
.figure--map{position:relative}
.figure--map .map-open{display:block;line-height:0;cursor:zoom-in}
.figure--map img{width:100%;aspect-ratio:auto;object-fit:contain;height:auto;background:transparent}
/* 操作の案内は、画像の右上に重ねます。文言はPCとスマホで入れ替えます。 */
.figure--map .map-hint{
  position:absolute;top:10px;right:10px;z-index:2;margin:0;
  padding:5px 11px;border-radius:var(--pill);pointer-events:none;
  background:rgba(20,20,22,.64);color:#fff;font-size:11px;letter-spacing:.04em;
  transition:opacity .25s
}
.figure--map .map-hint--sp{display:none}
@media(max-width:860px){
  .figure--map .map-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .figure--map .map-open{width:max-content}
  .figure--map img{height:72vh;width:auto;max-width:none}
  .figure--map .map-hint--sp{display:block}
  .figure--map .map-hint--pc{display:none}
  /* 指で動かしたら用済みなので、スクロールしたら消します（scripts.js） */
  .figure--map.is-scrolled .map-hint{opacity:0}
}

/* ── 図版の拡大（2026-10-14 追加）────────────────────────────
   scripts.js が作ります。角丸と枠線は併用しないので、閉じるボタンは背景だけで丸めています。 */
.ftl-lb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  background:rgba(10,10,12,.93);padding:14px;opacity:0;transition:opacity .22s}
.ftl-lb.is-open{opacity:1}
.ftl-lb-body{max-width:100%;max-height:100%;overflow:auto;display:grid;place-items:center}
.ftl-lb-img{max-width:96vw;max-height:86vh;object-fit:contain;cursor:zoom-out}
.ftl-lb-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--pill);
  background:rgba(255,255,255,.16);color:#fff;font-size:21px;line-height:1;cursor:pointer;transition:background .2s}
.ftl-lb-close:hover{background:rgba(255,255,255,.28)}
body.ftl-lb-open{overflow:hidden}
@media(max-width:860px){
  /* スマホは画面に収めると小さすぎるので、高さを決めて中で動かせるようにします */
  .ftl-lb-img{max-width:none;max-height:none;height:84vh;width:auto;cursor:default}
}
@media(prefers-reduced-motion:reduce){.ftl-lb{transition:none}}

.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:40px 0}
.figure-grid .figure{margin:0}
.img-placeholder{
  width:100%;aspect-ratio:16/9;background:#DEDCD7;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ja);font-size:13px;letter-spacing:.14em;color:#5A5A62;
  text-align:center;
}

/* ── この記事のモデルコース ── */
.course-section{padding:0 clamp(20px,4vw,52px)}
.course-box{max-width:840px;margin:0 auto;background:var(--paper2);border:0;border-radius:var(--r);padding:clamp(24px,4vw,34px);position:relative}
.course-label{display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--red)}
.course-label::after{content:'';flex:1;height:1px;background:var(--line)}
.course-name{font-family:var(--mc);font-weight:600;font-size:clamp(18px,2.4vw,23px);line-height:1.55;margin:12px 0 0}
.course-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-top:13px;font-size:12.5px;color:#5A5A62;line-height:1.85}
.course-meta b{font-weight:500;color:var(--ink)}
.course-meta span{position:relative;padding:0 0 0 14px;margin-left:10px}
.course-meta span::before{content:'／';position:absolute;left:0;color:#C4C1BA}
/* 行程の見出し（所要時間／シーン／対象）。サンプルとして残した1本にだけ付けています（2026-09-24） */
.course-meta--labeled{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline}
.course-meta--labeled .cm-k{font-size:10.5px;letter-spacing:.06em;color:var(--smoke);white-space:nowrap}
.course-meta--labeled .cm-v{position:static;margin:0;padding:0;font-size:12.5px;color:#41414A}
.course-meta--labeled .cm-v::before{content:none}
.course-meta--labeled .cm-v--strong{font-weight:500;color:var(--ink)}
.course-tl{list-style:none;margin:24px 0 0;padding:0}
.ct{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:0 14px;position:relative;padding-bottom:20px}
.ct:last-child{padding-bottom:0}
.ct::before{content:'';position:absolute;left:calc(5.4em + 17px);top:10.5px;bottom:-10.5px;width:1px;background:var(--line)}
.ct:last-child::before{display:none}
.ct-time{font-family:var(--en);font-size:14px;letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums;padding-top:2px}
.ct-body{position:relative;padding-left:28px}
.ct-body::before{content:'';position:absolute;left:14px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.ct-place{font-weight:500;font-size:15px;line-height:1.7}
.ct-note{font-size:13px;line-height:1.95;color:#5A5A62;margin-top:3px}
@media(max-width:600px){
  .ct{grid-template-columns:1fr;gap:2px}
  /* 時刻→点の分だけ下げ、同じだけ次の項目へ食い込ませて線をつなぐ */
  .ct::before{left:17px;top:38px;bottom:-38px}
  .ct-time{padding-left:28px}
}

/* ── 情報ブロック ── */
.info-block{background:var(--paper2);border:0;border-radius:var(--r);padding:32px 36px;margin:48px 0}
.info-block-title{
  font-family:var(--en);font-size:12px;letter-spacing:.18em;font-weight:400;
  color:var(--red);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.info-block-title::before{content:'';width:24px;height:1px;background:var(--red)}
.info-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.9}
/* 「この街の歩き方」の項目名。
   2026-10-17：white-space:nowrap をやめました。
   もとは「所要時間」のような短いラベルを1行に収めるためでしたが、リライト後の記事には
   「片瀬江ノ島駅・江ノ島駅・湘南江の島駅 → 江島神社辺津宮」のような長いラベルが入っており
   （498個中56個が20字超・最長38字）、折り返せずにテーブルごと横へはみ出していました。
   スマホの指定でも nowrap を外していなかったので、実機で表がはみ出して見えます（岩下さんのご指摘）。
   width:130px は table-layout:auto では「目安」なので、長いラベルのときは列が自然に広がります。 */
.info-table th,.info-row .info-label{
  text-align:left;font-weight:500;color:var(--ink);
  padding:11px 16px 11px 0;vertical-align:top;width:130px;
  border-bottom:1px solid var(--line);
}
.info-table td,.info-row .info-value{
  padding:11px 0;color:#4A4A52;font-weight:300;border-bottom:1px solid var(--line);
}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
.info-table a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--red)}
.info-row{display:grid;grid-template-columns:130px 1fr;gap:0 16px}
.info-row:last-child .info-label,.info-row:last-child .info-value{border-bottom:none}

/* ── 地図リンク ── */
.map-list{display:grid;grid-template-columns:1fr;gap:6px;margin-top:20px}
.map-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;background:var(--paper2);border:0;border-radius:var(--r-m);transition:.2s;
}
.map-row:hover{background:#EDEAE4}
.map-row-label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:400}
.map-row-icon{font-size:18px;line-height:1}
.map-row a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--en);font-size:11px;font-weight:400;letter-spacing:.14em;
  color:var(--ink);padding:8px 16px;border:1px solid var(--line);transition:.2s;white-space:nowrap;
}
.map-row a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.map-row a svg{width:10px;height:10px;stroke:currentColor;fill:none}

/* ── スポット一覧 ── */
.spots-list{display:flex;flex-direction:column;gap:8px;margin:36px 0}
.spot{background:var(--paper2);border:0;border-radius:var(--r-m);padding:24px 26px;transition:.2s}
.spot:hover{background:#EDEAE4}
.spot-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.spot-num{font-family:var(--en);font-size:24px;line-height:1;color:var(--red);letter-spacing:.04em}
.spot-title{font-family:var(--mc);font-weight:600;font-size:18px;line-height:1.5}
.spot-walk{
  font-family:var(--en);font-size:11px;letter-spacing:.12em;color:#fff;
  background:var(--ink);padding:3px 10px;margin-left:auto;white-space:nowrap;
}
.spot-body{font-size:14px;line-height:2.05;color:#4A4A52}

/* 番号つきスポット（5選など） */
.spot-list{display:flex;flex-direction:column;margin:24px 0 32px}
.spot-item{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.spot-item:first-child{border-top:1px solid var(--line)}
.spot-info-name{font-family:var(--mc);font-weight:600;font-size:18px;line-height:1.45;margin:0 0 7px}
.spot-info-walk{font-family:var(--en);font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--smoke);margin-bottom:12px}
.spot-info-desc{font-size:14px;font-weight:300;line-height:2;color:#4A4A52;margin:0}

/* ── 手順・時系列 ── */
.steps-list{display:flex;flex-direction:column;margin:24px 0 32px}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.step:first-child{border-top:1px solid var(--line)}
.step-num{font-family:var(--en);font-size:26px;line-height:1;color:var(--red);letter-spacing:.04em}
.step-title{font-family:var(--mc);font-weight:600;font-size:17px;line-height:1.5;margin-bottom:8px}
.step-body{font-size:14px;line-height:2;color:#4A4A52}

.timeline{display:flex;flex-direction:column;margin:28px 0 36px}
.timeline-row{display:grid;grid-template-columns:96px 22px 1fr;gap:0 14px;padding:0 0 26px;position:relative}
.timeline-row:last-child{padding-bottom:0}
.timeline-time{font-family:var(--en);font-size:14px;letter-spacing:.1em;color:var(--red);padding-top:2px}
.timeline-bullet{position:relative;display:flex;justify-content:center}
.timeline-bullet::before{
  content:'';width:11px;height:11px;border-radius:50%;
  border:2px solid var(--ink);background:var(--paper);margin-top:5px;z-index:2;
}
.timeline-row:not(:last-child) .timeline-bullet::after{
  content:'';position:absolute;top:16px;bottom:-26px;width:1px;background:var(--line);
}
.timeline-title{font-family:var(--mc);font-weight:600;font-size:16px;line-height:1.55;margin-bottom:6px}
.timeline-desc{font-size:13.5px;line-height:1.95;color:#4A4A52}

/* ── チェックリスト ── */
.checklist{list-style:none;margin:24px 0 0;display:flex;flex-direction:column;gap:6px}
.checklist li{
  position:relative;padding:16px 20px 16px 46px;
  background:var(--paper2);border:0;border-radius:var(--r-m);
  font-size:14px;line-height:1.9;font-weight:400;
}
.checklist li::before{
  content:'';position:absolute;top:50%;left:18px;width:14px;height:14px;margin-top:-7px;
  border:1.5px solid var(--red);background:var(--paper);
}
.checklist li::after{
  content:'';position:absolute;top:50%;left:21px;width:7px;height:4px;margin-top:-4px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg);
}

/* ── 材料（レシピ記事） ── */
.ingredient-block{background:var(--paper2);border:0;border-radius:var(--r);padding:30px 34px;margin:44px 0}
.ingredient-block-eyebrow{font-family:var(--en);font-size:12px;letter-spacing:.18em;color:var(--red);display:block;margin-bottom:8px}
.ingredient-block-title{font-family:var(--mc);font-weight:600;font-size:19px;margin-bottom:20px}
.ingredient-list{list-style:none;display:flex;flex-direction:column}
.ingredient-list li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.ingredient-list li:last-child{border-bottom:none}
.ingredient-list .name{font-weight:400}
.ingredient-list .amount{font-family:var(--en);letter-spacing:.06em;color:var(--smoke);white-space:nowrap}

.recipe-title-block{margin-bottom:26px}
.recipe-name{font-family:var(--mc);font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.5}
.recipe-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:28px 0 36px}
.recipe-meta-cell{background:var(--paper2);border:0;border-radius:var(--r-m);padding:18px 20px;text-align:center}
.recipe-meta-icon{font-size:20px;display:block;margin-bottom:8px}
.recipe-meta-label{font-family:var(--en);font-size:10.5px;letter-spacing:.16em;color:var(--smoke);display:block;margin-bottom:5px}
.recipe-meta-value{font-size:14px;font-weight:500}

.article-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:34px}
.article-tags span{font-size:11px;color:var(--smoke);background:rgba(20,20,22,.05);border:0;border-radius:var(--pill);padding:5px 13px}

/* ── ホテルCTA（黒地）──────────────────────────────────────
   8/26版の見え方に戻す。本文（白い紙）のあとに暗転して、泊まる場所を見せる。 */
.hotel-cta{background:var(--ink);color:#fff;padding:84px 0;margin-top:80px}
.hotel-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.hotel-cta-eyebrow{
  font-family:var(--en);font-size:12px;letter-spacing:.28em;color:var(--sig);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.hotel-cta-eyebrow::before{content:'';display:block;width:24px;height:1px;background:currentColor}
.hotel-cta-name{font-family:var(--en);font-size:clamp(28px,3.4vw,40px);line-height:1.2;letter-spacing:.04em;color:#fff;margin-bottom:18px}
.hotel-cta-copy{font-family:var(--mc);font-weight:600;font-size:clamp(15px,1.8vw,19px);line-height:1.9;letter-spacing:.04em;color:#fff;margin-bottom:18px}
.hotel-cta-body{font-size:13.5px;line-height:2.1;color:rgba(255,255,255,.78);max-width:min(560px,100%)}
.hotel-cta-btn-group{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hotel-cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--red);color:#fff;border:1.5px solid var(--red);
  font-size:14px;font-weight:700;letter-spacing:.08em;
  padding:18px 36px;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.hotel-cta-btn:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hotel-cta-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0;transition:transform .2s}
.hotel-cta-btn:hover svg{transform:translate(2px,-2px)}
.hotel-cta-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hotel-cta-btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hotel-cta-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;transition:color .2s,border-color .2s}
.hotel-cta-more:hover{color:#fff;border-color:#fff}
.hotel-cta-more svg{width:13px;height:13px;transition:transform .2s}
.hotel-cta-more:hover svg{transform:translateX(3px)}
.hotel-cta-visual{aspect-ratio:4/3;background:#222;overflow:hidden}
.hotel-cta-visual img{width:100%;height:100%;object-fit:cover}

/* 複数ホテル */
.hotel-cta--multi .hotel-cta-multi-head{text-align:center;margin-bottom:36px}
.hotel-cta-multi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.hotel-card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s}
.hotel-card:hover{border-color:var(--ink)}
.hotel-card-visual img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#E9E7E2}
.hotel-card-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.hotel-card-eyebrow{font-family:var(--en);font-size:10.5px;letter-spacing:.16em;color:var(--red);display:block;margin-bottom:8px}
.hotel-card-name{font-family:var(--mc);font-weight:600;font-size:17px;line-height:1.5;margin-bottom:9px}
.hotel-card-pitch{font-size:12.5px;line-height:1.95;color:#4A4A52;flex:1;margin-bottom:14px}
.hotel-card-meta{font-size:11px;color:var(--smoke);margin-bottom:16px}
.hotel-card-btns{display:flex;gap:8px;flex-wrap:wrap}
.hotel-card-btn{
  font-family:var(--en);font-size:11px;letter-spacing:.12em;
  padding:10px 18px;border-radius:var(--pill);background:var(--ink);color:#fff;transition:.2s;
}
.hotel-card-btn:hover{background:var(--red)}
.hotel-card-btn.ghost{background:rgba(20,20,22,.07);color:var(--ink);border:0}
.hotel-card-btn.ghost:hover{background:var(--ink);color:#fff}

/* ── 関連記事 ── */
.related-articles{padding:88px 0;background:var(--paper)}
/* 罫線のグリッド（9/20・トップのコンテンツ欄と同じ作法）。
   gap で離して1枚ずつ枠を付けるのをやめ、コンテナとセルの border で1枚のグリッドにします。
   マスの中に余白（14px／下44px）を取ることで、線が構造として読めます。
   ホバーの浮き上がり（translateY＋影）は、グリッドが崩れるのでやめました。 */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.related-card{
  position:relative;                      /* NEWの印の基準。印は写真の箱の外にあります */
  background:transparent;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 14px 44px;transition:background .25s;
}
.related-card:hover{background:var(--paper2)}
.related-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#E9E7E2}
.related-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.related-card:hover .related-card-img img{transform:scale(1.05)}
.related-card-cat{
  position:absolute;top:9px;left:9px;z-index:2;border-radius:var(--pill);
  font-family:var(--en);font-size:10.5px;letter-spacing:.16em;
  background:var(--sig);color:#fff;padding:4px 12px;line-height:1.35;
}
/* 今週足した記事の印（2026-09-30）。tools/publish_list.json の「新着」に入れたスラッグに付きます。
   見た目はトップの .fr-new（もとからあった指定）に合わせています */
/* NEWの印：トップ・記事一覧と同じ（小さめのピル／黄色／広がる輪／文字が跳ねる） */
.related-card-new{
  position:absolute;top:9px;right:9px;z-index:4;border-radius:var(--pill);
  font-family:var(--en);font-size:11px;letter-spacing:.14em;
  background:#FFD400;color:#141416;padding:4px 10px;line-height:1.3;
  box-shadow:0 2px 10px rgba(20,20,22,.28);
}
/* NEWの印：文字が1字ずつ上へ抜けて、下から迫り上がります（N→E→Wの順）。
   枠の中でマスクが効いているように、動く幅は文字の高さぶんだけに抑えています。
   --d はカードごとの発火ずらし。隣どうしが同時に動かないよう、順不同にしてあります */
.related-card-new i{display:inline-block;font-style:normal;line-height:1}
@media(prefers-reduced-motion:reduce){.related-card-new,.archive-card-new{animation:none;transform:none}}
.related-card-cat.walk-map{background:var(--c-walk)}
.related-card-cat.local-spots{background:var(--c-spots)}
.related-card-cat.interview{background:var(--c-interview)}
.related-card-cat.hotel-life{background:var(--c-hotel)}
.related-card-cat.business{background:var(--c-business)}
.related-card-cat.seasonal{background:var(--c-seasonal)}
.related-card-cat.hotel-news,.related-card-cat.ugc{background:var(--c-news)}
.related-card-body{padding:18px 20px 22px}
.related-card-hotel{font-family:var(--en);font-size:10.5px;letter-spacing:.16em;color:var(--red);display:block;margin-bottom:8px}
.related-card-title{font-family:var(--mc);font-weight:600;font-size:14.5px;line-height:1.65;margin-bottom:12px}
.related-card-readmore{font-family:var(--en);font-size:11.5px;letter-spacing:.16em;color:var(--smoke)}
.related-card:hover .related-card-readmore{color:var(--red)}
/* 「CONTINUE READING」と見出しの間をあける／スマホでも「記事一覧」は右寄せ */
.related-articles .section-eyebrow{margin-bottom:14px}
@media(max-width:860px){.related-articles .section-cta{margin-left:auto}}

/* ── フッター（LPと共通） ── */
.site-footer{padding:58px 30px 44px;border-top:1px solid var(--line);text-align:center;background:var(--paper)}
.footer-logo img{height:26px;margin:0 auto 18px}
.footer-body{font-size:12px;line-height:2.1;color:#5A5A62;margin-bottom:22px}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px}
.footer-polaris{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--smoke)}

/* 読み込み時のページ全体フェードインは 9/26 に削除しました。
   ファーストビューをJS依存から外した結果、ページが一度表示されてから
   もう一度フェードし直す形になり、「全体がピカッと光る」ように見えていたためです。
   トップページ（index.html）には元からこの指定が無く、そちらは光りません。
   .preload も opacity:0 を当てるだけの役目だったので、一緒に外しました。 */

/* ── レスポンシブ ── */
/* 関連記事：3列→2列は1000px以下、1列は640px以下（それまではPCと同じ3列） */
@media(max-width:1000px){
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  /* スマホ：トップの記事一覧と同じく、左にサムネイル・右に文字の行に詰める */
  .related-articles{padding:52px 0}
  .related-grid{grid-template-columns:1fr;gap:0}
  .related-card{display:grid;grid-template-columns:clamp(100px,28vw,120px) minmax(0,1fr);
    gap:0 12px;align-items:start;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 0}
  .related-grid{border-top:0;border-left:0}
  .related-card:first-child{padding-top:4px}
  .related-card:hover{transform:none;box-shadow:none}
  .related-card-img{aspect-ratio:1/1}
  .related-card-cat{top:6px;left:6px;font-size:8.5px;letter-spacing:.1em;padding:2px 8px}
  /* スマホは写真の上から出して、ホテル名の行の右端に置きます */
  .related-card-new{position:static;grid-column:2;grid-row:1;justify-self:end;align-self:start;
    font-size:11px;letter-spacing:.1em;padding:1px 7px}
  .related-card-body{grid-column:2;grid-row:1}   /* 印と同じマスに。落とさないため */
  .related-card-body{padding:0}
  .related-card-hotel{font-size:10px;margin-bottom:5px}
  .related-card-title{font-size:13.5px;line-height:1.7;margin-bottom:0}
  .related-card-readmore{display:none}
}

/* ホテル欄の縦積みは、スマホと同じ表示のときだけ（PC・iPadの横は左右2列のまま） */
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .hotel-cta-inner{grid-template-columns:1fr;gap:28px}
  /* 縦に積むときは写真が主役ではないので、高さを抑える */
  .hotel-cta-visual{width:100%;aspect-ratio:16/10;max-height:min(38vh,320px)}
}
@media(max-width:860px){
  .section-wrap{padding:0 20px}
  /* スマホ・タブレット縦：ヘッダー63px ＋ KV ＋ 目次（61px）で1画面ぶん。
     PCと違い、KVのすぐ下に来るのは MODEL COURSE ではなく目次です */
  /* スマホもPCと同じく画面の半分ほどに。下に目次バーと本文の頭が覗く（9/24） */
  .article-hero{height:auto;min-height:max(320px,50svh);padding:36px 0 44px}
  .article-hero-inner{padding:0 20px}
  /* スマホは .article-body の上余白が44px。同じく写真との間を12pxにする */
  .article-kv-caption{margin:-32px 0 24px;font-size:10px}
  /* scripts.js が目次バーの前（KVの直下）へ移したとき。本文の外に出るので余白は自前で持つ */
  .article-kv-caption.is-under-kv{margin:0;padding:12px 20px 14px;background:var(--paper)}
  .article-body{padding:44px 0 12px}
  .body-text{font-size:15.5px;line-height:2.1}
  .section-header{gap:12px;margin-bottom:20px}
  .section-sub,.section-cta{margin-left:0}
  .info-block{padding:24px 20px}
  .info-table th{width:auto;display:block;padding-bottom:4px;border-bottom:none}
  .info-table td{display:block;padding-top:0;padding-bottom:12px}
  .info-row{grid-template-columns:1fr;gap:0}
  .info-row .info-label{border-bottom:none;padding-bottom:2px}
  .map-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px}
  .map-row a{align-self:stretch;justify-content:center}
  .figure-grid{grid-template-columns:1fr}
  .spot-item,.step{grid-template-columns:48px 1fr;gap:16px}
  .timeline-row{grid-template-columns:70px 20px 1fr}
  .hotel-cta{padding:56px 0;margin-top:56px}
  .site-header{padding:10px 16px}
  .header-nav{display:none}
  .header-logo img{height:22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  body{opacity:1}
}


/* 表示の切り替え（2026-09-18）
   PCと同じ表示：1101px以上、または「横向き・幅781px以上・高さ500px以上」（iPadの横はこちら）
   スマホと同じ表示：780px以下、1100px以下の縦向き、1100px以下で高さ499px以下（iPadの縦とスマホの横はこちら） */

/* ── サイドナビ（scripts.js が生成）────────────────────────── */
.article-side{
  position:sticky;top:84px;align-self:start;font-size:12.5px;
  display:flex;flex-direction:column;max-height:calc(100vh - 100px);
}
.article-side>.side-block{flex:none}
.article-side>.side-toc{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
.article-side>.side-toc .toc-list{overflow-y:auto;min-height:0;scrollbar-width:thin}
/* 見出しや行程が多い記事は、左カラムを1画面に収めるため自動で詰める（scripts.js） */
.article-side.is-tight .side-block+.side-block{margin-top:12px;padding-top:11px}
.article-side.is-tight .side-label{margin-bottom:9px}
.article-side.is-tight .toc-list a{padding:5px 0 5px 12px}
.article-side.is-tight .side-course-list{gap:5px}
.article-side.is-tight .side-course-name{margin-bottom:8px}
.article-side.is-tight .side-course-link{margin-top:8px}
/* 目次などから飛んだときに、見出しが上のバーに隠れないようにする（9/19に実測して調整）
   スマホ：サイトヘッダー63px＋追従の目次バー53px＝116px が覆いかぶさるので128px。
   目次バーは上方向のスクロールで出てくるため、「出ている前提」の余白を取っています。
   PC：目次バーは出ないので、ヘッダー54px＋余白で96px。 */
.course-section,.section-header{scroll-margin-top:96px}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
 .course-section,.section-header{scroll-margin-top:128px}
}
.side-block+.side-block{margin-top:17px;padding-top:16px;border-top:1px solid var(--line)}
.side-label{
  display:block;margin-bottom:11px;font-family:var(--en);
  font-size:11.5px;letter-spacing:.2em;color:var(--red);
}
.toc-list{list-style:none;display:flex;flex-direction:column}
.toc-list a{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 6px;
  padding:7px 0 7px 12px;border-left:2px solid var(--line);
  font-size:12.5px;line-height:1.75;color:#5A5A62;transition:.2s;
}
.toc-list a:hover{color:var(--ink);border-left-color:var(--smoke)}
.toc-list .n{font-family:var(--en);font-size:11px;letter-spacing:.08em;color:var(--smoke)}
.toc-list a.is-current{color:var(--ink);border-left-color:var(--red)}
.toc-list a.is-current .n{color:var(--red)}
.side-hotel-name{font-family:var(--mc);font-weight:600;font-size:14px;line-height:1.6;margin-bottom:12px}
.side-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--en);font-size:11px;letter-spacing:.14em;color:var(--ink);
  background:var(--paper2);border:0;border-radius:var(--pill);padding:8px 16px;transition:.2s;
}
.side-link:hover{background:var(--ink);color:#fff}
.side-link+.side-link{margin-top:6px}
/* ホテル欄の2つのボタンは横に並べて、左カラムの高さを抑える */
.side-foot{display:flex;flex-wrap:wrap;gap:6px}
.side-foot .side-label,.side-foot .side-hotel-name{flex:0 0 100%}
.side-foot .side-hotel-name{margin-bottom:2px}
.side-foot .side-link+.side-link{margin-top:0}

/* ── スマホ／タブレット：KV直下の折りたたみ目次（scripts.js が生成）── */
.m-toc{display:none;background:var(--paper);border-bottom:1px solid var(--line)}
.m-toc-head{display:flex;align-items:center;gap:12px;width:100%;margin:0;
  padding:17px clamp(20px,4vw,30px);background:transparent;border:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.m-toc-label{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--red)}
.m-toc-title{font-family:var(--mc);font-weight:600;font-size:15px;letter-spacing:.06em}
.m-toc-n{font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--smoke)}
.m-toc-chev{flex:0 0 auto;width:8px;height:8px;margin-left:auto;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.m-toc.open .m-toc-chev{transform:rotate(-135deg) translate(-2px,-2px)}
.m-toc-body{display:none;padding:0 clamp(20px,4vw,30px) 18px}
.m-toc.open .m-toc-body{display:block;animation:mTocIn .28s ease both}
@keyframes mTocIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 上へスクロールしたときだけ出る目次バー（1100px未満） */
.f-toc{
  position:fixed;top:56px;left:0;right:0;z-index:480;display:none;
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.07);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .28s ease,visibility .28s;
}
.f-toc.is-on{transform:none;visibility:visible}
.f-toc-head{display:flex;align-items:center;gap:12px;width:100%;margin:0;
  padding:13px clamp(20px,4vw,30px);background:transparent;border:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.f-toc-body{display:none;padding:0 clamp(20px,4vw,30px) 16px;max-height:min(58vh,420px);overflow:auto}
.f-toc.open .f-toc-body{display:block}
.f-toc.open .m-toc-chev{transform:rotate(-135deg) translate(-2px,-2px)}
.f-toc .toc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.f-toc-top{display:flex;align-items:stretch}
.f-toc-head{flex:1 1 auto;min-width:0}
.f-toc-course{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:0 clamp(20px,4vw,30px);border-left:1px solid var(--line);
  font-size:12.5px;letter-spacing:.04em;color:var(--ink);
}
.f-toc-course::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){.f-toc{display:block}}
@media(max-width:760px){.f-toc .toc-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.f-toc{transition:none}}
@media print{.f-toc{display:none!important}}

@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .article-layout{display:block;max-width:840px}
  .article-side{display:none}
  .m-toc{display:block}
  .m-toc .toc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
}
/* FVの天気（スマホだけ。2026-10-01）。
   760px以下ではヘッダーの日付・天気・時計を隠しているので、記事を開いても
   ハンバーガーの中にしか天気がありませんでした。トップのFVに入れたものと同じ見た目です。
   中身（その記事の街の天気）は inc/header.html のスクリプトが .ftl-wx に書き込みます。 */
.hero-wx{display:none}
@media(max-width:760px){
  .hero-wx{display:flex;align-items:center;gap:7px;position:absolute;left:16px;top:14px;z-index:6;
    font-family:var(--en);font-size:12px;letter-spacing:.12em;color:#fff;
    text-shadow:0 1px 10px rgba(8,6,4,.6)}
  .hero-wx i{width:6px;height:6px;border-radius:50%;background:var(--sig);flex:0 0 auto;
    animation:ftlBlink 1.6s infinite}
}
@media(prefers-reduced-motion:reduce){.hero-wx i{animation:none}}

/* 目次の矢印を、ヘッダーのハンバーガーと同じ縦線にそろえます（2026-09-30）。
   ハンバーガーが出るのは1000px以下。右から16px・幅38pxなので中心は右から35pxです。
   矢印は8px角なので、右から31pxに置くと中心が同じ位置に来ます。
   流れから外すぶん、見出しの右に余白を取って文字が重ならないようにしています */
@media(max-width:1000px){
  .m-toc-head,.f-toc-head{position:relative;padding-right:44px}
  .m-toc-chev{position:absolute;right:31px;top:50%;margin:-4px 0 0}
}
@media(max-width:760px){
  .m-toc .toc-list{grid-template-columns:1fr}
}

/* ── 書き手：KVのリード文の下（tools/build_writers.py が挿入）── */
.article-byline{display:flex;justify-content:flex-start;margin-top:16px;font-size:12.5px;letter-spacing:.08em}
.article-byline a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);transition:opacity .2s}
.article-byline .ab-av{
  width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--red);color:#fff;font-family:var(--mc);font-weight:600;font-size:13px;letter-spacing:0;text-shadow:none;
}
.article-byline .ab-by{color:#6A6A72;margin-right:-8px}
@media (hover:hover){.article-byline a:hover{opacity:.7}}

/* ── 記事の入り口：リード文と書き手（9/26）──
   もとはKVの写真の上に載っていました。写真をいちばん見せたいので本文の頭に下ろしています。
   これでKVに残るのはカテゴリの札とタイトルだけになり、写真の見える面積が2割強から6割に増えます。
   折り返しの下に覗くのがリード文になるので、「本文の頭を見せる」という9/24の狙いも保てます。 */
/* リード文と書き手は、白い本文から地色を変えて切り出します（9/26）。
   書体を変えるだけでは本文の1段落目に見えたためです。
   色はサイトの紙色 --paper2（#F5F3EE）。ライター紹介（.author-box）やフッターと同じで、
   色数を増やさずに済みます。角丸も罫線も付けません（決めごとどおり）。
   注記（.article-kv-caption）はこのブロックの外＝写真の直下に置いています。 */
.article-opening{background:var(--paper2);padding:22px 24px;margin-bottom:36px}
/* スマホ用の指定はここに置きます。上の @media(max-width:860px) のまとめブロックは
   この定義より前にあるので、そちらに書くと後勝ちで潰れます（9/26） */
@media(max-width:860px){
  .article-opening{padding:18px 18px;margin-bottom:28px}
  .article-lede{font-size:15px;line-height:2}
}

/* ── 書き手の紹介：本文の最後（tools/build_writers.py が挿入）── */
.author-box{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 24px;
  margin-top:64px;padding:30px 32px;background:var(--paper2);
}
.share-row + .author-box{margin-top:28px}
.author-av{
  width:72px;height:72px;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--mc);font-weight:600;font-size:28px;transition:background .2s;
}
.author-av:hover{background:var(--red)}
.author-label{display:block;font-family:var(--en);font-size:11.5px;letter-spacing:.2em;color:var(--red);margin-bottom:4px}
.author-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;margin-bottom:12px}
/* 書体は --ja（Noto Sans JP）。Zen Kaku Gothic New の700は、ここと writers の2箇所だけの
   ために1ウェイトぶん（約15ファイル）読むことになるので、9/26にやめました */
.author-name a{font-family:var(--ja);font-weight:700;font-size:20px;letter-spacing:.04em;transition:color .2s}
.author-name a:hover{color:var(--red)}
.author-role{font-size:12px;color:var(--smoke)}
.author-text{font-size:13.5px;line-height:2;color:#4A4A52;margin-bottom:14px}
.author-more{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  border-bottom:1px solid var(--red);padding-bottom:2px;transition:color .2s;
}
.author-more svg{width:13px;height:13px}
.author-more:hover{color:var(--red)}

/* ── シェア（scripts.js が生成）───────────────────────────────
   本文の最後に横並び。KVを過ぎてから本文の最後に着くまでは追従も出す。
   PC（1280px以上）は画面右に縦、それより狭い幅は画面下に横一列。 */
.share-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;
  margin-top:64px;padding-top:28px;border-top:1px solid var(--line);
}
.share-label{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--smoke)}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;background:var(--paper2);border:0;border-radius:var(--pill);
  font-family:var(--ja);font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.2;
  transition:background .2s,color .2s;
}
.share-btn svg{width:15px;height:15px;flex:0 0 auto}
.share-btn:hover{background:var(--ink);color:#fff}
.share-tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  white-space:nowrap;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.06em;
  padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.share-btn.is-copied .share-tip{opacity:1;transform:translate(-50%,0)}

.share-float{
  position:fixed;right:22px;top:50%;z-index:400;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;visibility:hidden;transform:translate(12px,-50%);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.share-float.is-on{opacity:1;visibility:visible;transform:translate(0,-50%)}
.share-float-label{font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--smoke);writing-mode:vertical-rl;margin-bottom:6px}
.share-float .share-btn{width:40px;height:40px;padding:0;gap:0;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.share-float .share-text,
.share-float .share-tip{
  position:absolute;left:auto;right:calc(100% + 10px);top:50%;bottom:auto;transform:translate(4px,-50%);
  white-space:nowrap;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.06em;
  padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.share-float .share-btn:hover .share-text,
.share-float .share-btn:focus-visible .share-text{opacity:1;transform:translate(0,-50%)}
.share-float .share-btn.is-copied .share-tip{opacity:1;transform:translate(0,-50%)}
.share-float .share-btn.is-copied .share-text{opacity:0}

/* 画面下部のバーにするのは「スマホと同じ見せ方」のときだけ（9/19に修正）。
   9/18に `max-width:1219px` で切り替えていたため、PCの横長ウインドウ（1000×800など）でも
   下部バーになっていました。ページの他の要素と同じ条件にそろえます。 */
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .share-float{
    left:0;right:0;top:auto;bottom:0;
    flex-direction:row;justify-content:center;gap:8px;
    padding:9px 16px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.07);
    transform:translateY(100%);
  }
  .share-float.is-on{transform:translateY(0)}
  .share-float-label{writing-mode:horizontal-tb;margin:0 6px 0 0}
  .share-float .share-btn{width:48px;height:40px;box-shadow:none}
  .share-float .share-text{display:none}
  .share-float .share-tip{right:auto;left:50%;top:auto;bottom:calc(100% + 10px);transform:translate(-50%,4px)}
  .share-float .share-btn.is-copied .share-tip{transform:translate(-50%,0)}
}
/* PCレイアウトで1220px未満のとき、本文の右の空きは30pxしかなく、
   右の縦レール（right:22px＋ボタン40px＝62px）が本文に重なります。
   レールは出したままにして、本文の右側に場所を空けます。 */
@media (min-width:781px) and (max-width:1219px) and (orientation:landscape) and (min-height:500px){
  .section-wrap{padding-right:72px}
}
@media(max-width:600px){
  .author-box{grid-template-columns:52px minmax(0,1fr);gap:0 16px;padding:24px 20px}
  .author-av{width:52px;height:52px;font-size:21px}
  .author-name a{font-size:18px}
  .share-row{justify-content:center}
  .share-label{flex-basis:100%;text-align:center}
  .share-btns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .hotel-cta-btn-group{flex-direction:column}
  .hotel-cta-btn{justify-content:center;padding:17px 24px}
}

/* ============================================================
   アニメーション
   scripts.js が要素に .reveal / .reveal-stagger を付け、画面に入ると .is-visible を足す。
   ・動きは keyframes で一度だけ再生し、終わったら指定を残さない（fill-mode: backwards）。
     transition で書くと、カードのホバーで浮く transform を上書きしてしまうため。
   ・（9/26まで）body は .preload（透明）で始まり、JS が .reveal を付け終えてから表示されていました。
     画面内の要素もちらつかずに入ってくる。
   ・prefers-reduced-motion では既存の指定で animation が止まり、そのまま表示される。
   ============================================================ */
@keyframes ftlRiseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ftlScaleIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes ftlFromLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes ftlFromRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes ftlFade{from{opacity:0}to{opacity:1}}

/* 画面に入る前 */
.reveal:not(.is-visible),
.reveal-stagger:not(table):not(.is-visible) > *,
.info-table.reveal-stagger:not(.is-visible) tr{opacity:0}

/* 画面に入ったとき */
.reveal.is-visible{animation:ftlRiseIn .8s cubic-bezier(.22,1,.36,1) backwards}
.body-text.reveal.is-visible{animation-duration:.7s}
.reveal.r-scale.is-visible{animation-name:ftlScaleIn;animation-duration:1s}
.reveal.r-from-left.is-visible{animation-name:ftlFromLeft;animation-duration:.9s}
.reveal.r-from-right.is-visible{animation-name:ftlFromRight;animation-duration:1s}

/* KVの入り（9/26に作り直し）。
   以前は scripts.js が reveal を付けて透明にし、IntersectionObserver で出していましたが、
   それだと初回描画がJS待ちになり、本番で数秒真っ白になる場合がありました。
   いまはCSSだけで、しかも transform のみを動かします。透明にしないので描画を止めません。
   写真そのもののゆっくりした寄り引き（ftlKvDrift）は子のimg側にあり、これとは別です。 */
.article-hero-image{animation:ftlKvIn 2.4s cubic-bezier(.22,1,.36,1)}
@keyframes ftlKvIn{from{transform:scale(1.06)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.article-hero-image{animation:none}}

/* 見出し：「01」の枠が少し遅れて続く */
.section-header .section-eyebrow.reveal.is-visible{animation-delay:.1s}

/* 並ぶもの：少しずつずらす */
.related-grid > .related-card.reveal.is-visible:nth-child(2){animation-delay:.1s}
.related-grid > .related-card.reveal.is-visible:nth-child(3){animation-delay:.2s}
.hotel-cta-btn-group > .hotel-cta-btn.reveal.is-visible:nth-child(2){animation-delay:.1s}
.reveal-stagger:not(table).is-visible > *{animation:ftlRiseIn .6s cubic-bezier(.22,1,.36,1) backwards}
.info-table.reveal-stagger.is-visible tr{animation:ftlFade .6s ease backwards}
.reveal-stagger:not(table).is-visible > *:nth-child(2),.info-table.reveal-stagger.is-visible tr:nth-child(2){animation-delay:.06s}
.reveal-stagger:not(table).is-visible > *:nth-child(3),.info-table.reveal-stagger.is-visible tr:nth-child(3){animation-delay:.12s}
.reveal-stagger:not(table).is-visible > *:nth-child(4),.info-table.reveal-stagger.is-visible tr:nth-child(4){animation-delay:.18s}
.reveal-stagger:not(table).is-visible > *:nth-child(5),.info-table.reveal-stagger.is-visible tr:nth-child(5){animation-delay:.24s}
.reveal-stagger:not(table).is-visible > *:nth-child(6),.info-table.reveal-stagger.is-visible tr:nth-child(6){animation-delay:.3s}
.reveal-stagger:not(table).is-visible > *:nth-child(n+7),.info-table.reveal-stagger.is-visible tr:nth-child(n+7){animation-delay:.36s}

/* 印刷・PDF保存：スクロールしていない部分が透明のまま出力されないように、最初から表示する */
@media print{
  .reveal,
  .reveal-stagger:not(table) > *,
  .info-table.reveal-stagger tr{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---- 近隣スポット ---- */
.spots-section{padding:0 clamp(20px,4vw,52px);margin-top:clamp(40px,6vw,60px)}
.spots-box{max-width:840px;margin:0 auto}
.spots-label{display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--red)}
.spots-label::after{content:'';flex:1;height:1px;background:var(--line)}
.spots-head{font-family:var(--mc);font-weight:600;font-size:clamp(17px,2.2vw,21px);line-height:1.55;margin:12px 0 0}
.spot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.spot-card{background:var(--paper2);border:1px solid var(--line);display:flex;flex-direction:column}
.spot-map{position:relative;aspect-ratio:16/10;background:#E6E4DF}
.spot-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.spot-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.spot-cat{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.06em;color:#41414A;
  background:rgba(20,20,22,.055);border:0;border-radius:var(--pill);padding:4px 13px 4px 10px;
}
.spot-cat::before{
  content:'';width:11px;height:11px;flex:none;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.spot-name{font-size:15.5px;font-weight:500;line-height:1.65;margin:11px 0 0}
.spot-note{font-size:13px;line-height:1.95;color:#41414A;margin:8px 0 0}
.spot-meta{margin:12px 0 0;font-size:12px;color:#5A5A62;line-height:1.85}
.spot-meta div{display:flex;gap:8px}
.spot-meta dt{flex:none;width:5.2em;color:#8A8A92;white-space:nowrap}
.spot-meta dd{margin:0}
.spot-link{margin-top:auto;padding-top:14px;font-size:12.5px;letter-spacing:.04em;color:var(--red);display:inline-flex;align-items:center;gap:6px}
.spot-link::after{content:'\2197';font-size:11px}
/* スマホ：地図を正方形にして左、文字を右に置き、1件あたりの縦を詰める */
@media(max-width:600px){
  .spot-list{grid-template-columns:1fr;gap:0;margin-top:16px}
  .spot-card{display:grid;grid-template-columns:clamp(124px,38vw,152px) minmax(0,1fr);
    gap:0 12px;align-items:start;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 0}
  .spot-card:first-child{padding-top:4px}
  .spot-map{aspect-ratio:1/1}
  .spot-body{padding:0}
  .spot-cat{font-size:9.5px;letter-spacing:.04em;gap:5px;padding:3px 10px 3px 7px}
  .spot-cat::before{width:9px;height:9px}
  .spot-name{font-size:13.5px;line-height:1.6;margin:7px 0 0}
  .spot-note{font-size:11.5px;line-height:1.85;margin:5px 0 0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .spot-meta{font-size:10.5px;line-height:1.75;margin:7px 0 0}
  .spot-meta div{gap:6px}
  .spot-meta dt{width:4.6em}
  .spot-link{margin-top:7px;padding-top:0;font-size:11px}
}


/* ── モデルコースの置き場所（scripts.js が本文の前に移す）──────
   スマホ＝本文の前／PC＝右のレール。DOM順は サイド・コース・本文 */
.article-layout>.course-section{padding:0;margin:0 0 clamp(30px,4vw,44px)}
.article-layout>.course-section .course-box{max-width:none}
/* MODEL COURSEがあるページだけ、KVに重ねるぶんの余白を作る（9/24） */
body:has(.course-section){--fv-overlap:calc(var(--fv-course) + 18px);--fv-height:calc(100svh - 70px)}
.article-layout>.course-section{--fv-overlap:calc(var(--fv-course) + 18px)}
.article-layout>.spots-section{padding:0;margin-top:clamp(36px,5vw,52px)}
.article-layout>.spots-section .spots-box{max-width:none}
@media (min-width:781px) and (orientation:landscape) and (min-height:500px),(min-width:1101px){
  /* 行程は横並び。KVにまたがる横長の帯にして、その下に目次と本文を置く */
  .article-layout>.course-section{
    grid-column:1/-1;grid-row:1;
    position:relative;z-index:5;
    margin-top:calc(-64px - var(--fv-overlap));
  }
  .article-side{grid-column:1;grid-row:2}
  .article-main{grid-column:2;grid-row:2}
  .article-layout>.spots-section{grid-column:2;grid-row:3}

  .article-layout>.course-section{margin-bottom:clamp(38px,4vw,56px)}
  .article-layout>.course-section .course-box{
    display:grid;grid-template-columns:262px minmax(0,1fr);gap:0;
    background:var(--paper);border:0;border-radius:var(--r);
    box-shadow:0 22px 48px rgba(12,12,16,.16);
    padding:32px 36px 34px;
  }
  .article-layout>.course-section .course-label{grid-column:1;grid-row:1;padding-right:40px}
  .article-layout>.course-section .course-name{grid-column:1;grid-row:2;margin-top:12px;padding-right:40px;font-size:22px}
  .article-layout>.course-section .course-meta{grid-column:1;grid-row:3;margin-right:40px}
  .article-layout>.course-section .course-tl{grid-column:2;grid-row:1/span 3;border-left:1px solid var(--line);padding-left:40px}
  .article-layout>.course-section .course-meta{
    display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  }
  .article-layout>.course-section .course-meta b{display:block;font-size:14px}
  .article-layout>.course-section .course-meta span{
    display:block;margin:5px 0 0;padding:0;font-size:12px;
  }
  .article-layout>.course-section .course-meta span::before{content:none}
  .article-layout>.course-section .course-meta--labeled{display:grid}
  .article-layout>.course-section .course-meta--labeled .cm-v{display:block;margin:0;font-size:12.5px}
  .article-layout>.course-section .course-meta--labeled .cm-v--strong{font-size:14px}

  .article-layout>.course-section .course-tl{
    margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 22px;
    align-content:start;
  }
  .article-layout>.course-section .ct{display:block;padding:0;position:relative}
  .article-layout>.course-section .ct::before{
    content:'';position:absolute;left:0;right:-22px;top:29px;bottom:auto;width:auto;height:1px;
    background:var(--line);display:block;
  }
  .article-layout>.course-section .ct:last-child::before{right:0}
  .article-layout>.course-section .ct::after{
    content:'';position:absolute;left:0;top:26px;width:7px;height:7px;border-radius:50%;background:var(--ink);
  }
  .article-layout>.course-section .ct-time{display:block;padding:0 0 12px;font-size:15px}
  .article-layout>.course-section .ct-body{padding:16px 0 0}
  .article-layout>.course-section .ct-body::before{display:none}
  .article-layout>.course-section .ct-place{font-size:14.5px;line-height:1.6}
  .article-layout>.course-section .ct-note{font-size:12.5px;line-height:1.85;margin-top:5px}

  /* 仮アイキャッチの注記がコースの下に隠れないように上へ逃がす */
  /* KVの中身（タイトル・リード・署名）が重なり分の下に入らないように */
  .article-hero{padding-bottom:calc(56px + var(--fv-overlap))}
}

/* 行程のたたみボタン（スマホ・タブレットだけ出す） */
.course-toggle{
  display:none;width:100%;margin-top:16px;padding:11px 14px;
  background:var(--paper2);border:0;border-radius:var(--r-m);
  align-items:center;gap:10px;font-family:var(--ja);font-size:13px;color:var(--ink);cursor:pointer;
}
.course-toggle-range{font-family:var(--en);font-size:14.5px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.course-toggle-n{font-size:11.5px;color:#5A5A62}
.course-toggle-t{margin-left:auto;font-size:12px;color:#5A5A62}
.course-toggle-chev{
  margin-left:9px;width:8px;height:8px;
  border-right:1.5px solid #8A8A92;border-bottom:1.5px solid #8A8A92;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.course-section.open .course-toggle-chev{transform:rotate(-135deg) translateY(-2px)}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .course-box{padding:22px 20px 20px}
  .course-name{font-size:19px}
  .course-meta{margin-top:11px}
  .course-toggle{display:flex;margin-top:14px}
  .course-section .course-tl{display:none}
  .course-section.open .course-tl{display:block}
}


/* サイドのコース要約（PCのみ。スクロール中も行程が追えるように） */
.side-course{position:relative}
.side-progress{position:absolute;width:1px;background:var(--red);pointer-events:none;z-index:1;transition:height .16s linear}
@media(prefers-reduced-motion:reduce){.side-progress{transition:none}}
.side-course-name{font-family:var(--mc);font-weight:600;font-size:13.5px;line-height:1.5;margin:0 0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-course-list{list-style:none;margin:0;padding:0 0 0 15px;display:flex;flex-direction:column;gap:6px;position:relative}
.side-course-list li{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:0 8px;font-size:11.5px;line-height:1.55;position:relative}
/* 左に細いレール。読み進んだところまで赤くなる */
.side-course-list li::before{content:'';position:absolute;left:-15px;top:5.5px;width:6px;height:6px;border-radius:50%;background:#C6C2BA}
.side-course-list li::after{content:'';position:absolute;left:-12.5px;top:8.5px;bottom:-14.5px;width:1px;background:var(--line)}
.side-course-list li:last-child::after{display:none}
.side-course-list li.is-done::before,.side-course-list li.is-now::before{background:var(--red)}
.side-course-list li.is-now::before{box-shadow:0 0 0 3px rgba(200,16,46,.14)}
.side-course-list .scl-t{font-family:var(--en);letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums}
.side-course-list .scl-p{color:#41414A}
.side-course-link{display:inline-block;margin-top:10px;font-size:11.5px;color:#5A5A62;border-bottom:1px solid var(--line);padding-bottom:3px}
.side-course-link:hover{color:var(--red);border-color:var(--red)}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){.side-course{display:none}}

/* 読み進みと連動：赤い線が行程を進み、通過した点が赤くなる（scripts.js） */
.course-progress{position:absolute;background:var(--red);pointer-events:none;z-index:1;transition:width .16s linear,height .16s linear}
.ct.is-done::after,.ct.is-now::after{background:var(--red)}
.ct.is-now::after{box-shadow:0 0 0 4px rgba(200,16,46,.13)}
.ct.is-done .ct-body::before,.ct.is-now .ct-body::before{background:var(--red)}
.side-course-list li.is-now .scl-p{color:var(--red)}
.side-course-list li.is-done .scl-p{color:#8A8A92}
@media(prefers-reduced-motion:reduce){.course-progress{transition:none}}

/* スマホ：画面の右端に出る縦のプログレス（scripts.js が生成）
   本文を読んでいる間だけ出し、押すと行程を開いてコースに戻る */
.m-progress{display:none}
.m-progress .mp-line,.m-progress .mp-bar{position:absolute;width:1px}
.m-progress .mp-line{background:var(--line)}
.m-progress .mp-bar{background:var(--red);z-index:1;transition:height .16s linear}
/* 時刻と丸は一つのグリッドでそろえ、いまいる場所は左に縦書きで出す */
.mp-list{display:grid;grid-template-columns:auto 7px;align-items:center;gap:14px 8px}
.mp-row{display:contents}
/* いまいる場所（画面の左端に縦書き） */
.m-place{display:none}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .m-place{
    display:block;position:fixed;left:6px;top:auto;
    bottom:calc(78px + env(safe-area-inset-bottom));z-index:420;
    writing-mode:vertical-rl;padding:12px 8px;
    font-size:11.5px;line-height:1.5;letter-spacing:.1em;color:var(--red);
    max-height:min(60vh,340px);overflow:hidden;
    background:rgba(255,255,255,.93);box-shadow:0 3px 18px rgba(12,12,16,.10);
    opacity:0;visibility:hidden;transform:translateX(-10px);
    transition:opacity .3s,transform .3s,visibility .3s;
  }
  .m-place.is-on{opacity:1;visibility:visible;transform:none}
}
@media(prefers-reduced-motion:reduce){.m-place{transition:none}}
@media print{.m-place{display:none!important}}
.mp-t{font-family:var(--en);font-size:10px;letter-spacing:.04em;color:#9A968E;font-variant-numeric:tabular-nums;transition:color .2s}
.mp-d{width:7px;height:7px;border-radius:50%;background:#C6C2BA;position:relative;z-index:2;transition:background .2s,box-shadow .2s}
.mp-row.is-done .mp-d,.mp-row.is-now .mp-d{background:var(--red)}
.mp-row.is-done .mp-t,.mp-row.is-now .mp-t{color:var(--red)}
.mp-row.is-now .mp-d{box-shadow:0 0 0 3.5px rgba(200,16,46,.16)}
@media (max-width:780px),(max-width:1100px) and (orientation:portrait),(max-width:1100px) and (max-height:499px){
  .m-progress{
    display:flex;align-items:center;gap:10px;
    position:fixed;right:6px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));
    z-index:420;padding:12px 9px;background:rgba(255,255,255,.93);box-shadow:0 3px 18px rgba(12,12,16,.10);
    opacity:0;visibility:hidden;transform:translateX(10px);
    transition:opacity .3s,transform .3s,visibility .3s;
  }
  .m-progress.is-on{opacity:1;visibility:visible;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .m-progress,.m-progress .mp-bar,.mp-d,.mp-t{transition:none}
}
@media print{.m-progress{display:none!important}}

/* ─── リンクの見え方（9/19） ───────────────────────────────
   本文を400にした一方で、リンクは基本の300のままでした。色も下線も付かない場所が多く、
   「押せる文字」だと分からない状態だったため、太さで区別をつけます。
   ・ナビゲーション（ヘッダー・ドロワー・目次・パンくず・フッター）は500
   ・単独で置かれた行動リンク（記事を読む／Googleマップ／ホテルを見る など）は700
   ・下線は文字の幅だけ。既存の .sp2-links a と同じく border-bottom で出します
   カード全体がリンクのもの（記事カード・関連記事・ライターカード）は、
   中の見出しがすでに600〜700あるので触りません（全部太くすると差がなくなるため）。 */
.header-nav a,.drawer-nav a,.toc-list a,.site-footer a,.wr-crumb a,.article-byline a{font-weight:500}
.section-cta,.spot-link,.side-link,.side-course-link,.hotel-cta-more,
.archive-writers-link,.archive-card-meta>span:last-child{font-weight:700}
/* 下線は文字の幅だけ。枠いっぱいに伸ばさない */
.spot-link{border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){.spot-link:hover{border-bottom-color:currentColor}}