/* =============================================================
   高尾山ナビ デザインシステム「若葉」
   設計書: 2nd-brain/01_プロジェクト/サイト/高尾山サイト/デザイン/design-system.md
   規律: 紫グラデーション/絵文字アイコン/均等3カラムの反復は使わない。
        アイコンはインラインSVG。動きはスクロール出現1種のみ。
   ============================================================= */

:root {
  /* 若葉スケール */
  --wakaba-50:  #f6f9ee;
  --wakaba-100: #eaf3d9;
  --wakaba-200: #d4e6ae;
  --wakaba-300: #b9d08b;
  --wakaba-500: #7da33f;
  --wakaba-700: #446b1a; /* 白地で6.3:1。リンク・ボタン・見出しアクセント */
  --wakaba-800: #2f4d10;

  /* ニュートラル */
  --ink:     #1f2a1a;
  --ink-sub: #55614d;
  --line:    #dde5cf;
  --paper:   #fdfdf9;

  /* 機能色(安全情報の該当セクションのみ) */
  --caution:    #a75a00;
  --caution-bg: #fdf3e3;
  --alert:      #b91c1c;

  --shadow: 0 2px 12px rgba(31, 42, 26, .07);
  /* 見出しは明朝(薬王院サイトの書体感に合わせる)、本文はゴシックのまま=可読性優先 */
  --font-head: "Shippori Mincho B1", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;

  /* 旧トークンの別名(既存ページの記述を壊さないため) */
  --text: var(--ink);
  --bg: var(--paper);
  --accent: var(--wakaba-700);
  --muted: var(--ink-sub);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--wakaba-700); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); line-height: 1.4; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; }

/* ---------- レイアウト ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
main { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 3rem; }
main.wide { max-width: none; padding: 0 0 3rem; }
main.wide > section { padding: 72px 0 0; }

.pillar {
  font-family: var(--font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .22em;
  color: var(--wakaba-700);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
}
.pillar::after { content: ""; width: 48px; height: 2px; background: var(--wakaba-300); order: 3; }
/* 節の見分けがつくよう、ラベルの頭に小さな線画を置く。文字と同じ色で主張させない */
.pillar-icon { width: 17px; height: 17px; stroke-width: 1.7; }
main.wide h2 { font-size: 26px; margin: 0 0 14px; border: none; padding: 0; }

.lead { color: var(--ink-sub); max-width: 40em; }
.meta, .note, .disclaimer, .note-date { font-size: .82rem; color: var(--ink-sub); }
.breadcrumb { font-size: .8rem; color: var(--ink-sub); margin-top: 1rem; }

/* ---------- ボタン・アイコン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px;
  border-radius: 8px; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.btn-primary { background: var(--wakaba-700); color: #fff; }
.btn-primary:hover { background: var(--wakaba-800); }
.btn-ghost { background: #fff; color: var(--wakaba-700); border: 1.5px solid var(--wakaba-700); }
.btn-ghost:hover { background: var(--wakaba-50); }
.icon {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(253, 253, 249, .96);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 20px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* 天狗のロゴは横長(縦横比 約1.10)なので、高さを決めて幅は成り行きにする */
.brand .mark { height: 34px; width: auto; }
.global-nav { display: flex; gap: 22px; }
.global-nav a {
  text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.global-nav a:hover { border-bottom-color: var(--wakaba-500); }
/* 現在地。下線を実線で残し、いま居る節が分かるようにする */
.global-nav a[aria-current="page"] {
  border-bottom-color: var(--wakaba-700); font-weight: 700;
}
/* ハンバーガー。デスクトップでは出さない */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-menu { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

@media (max-width: 860px) {
  /* JSが無い環境: 従来どおり横スクロールのナビ */
  .global-nav { gap: 14px; font-size: 13px; overflow-x: auto; }

  /* JSがある環境: ハンバーガーで開閉するパネルに切り替える */
  .has-js .nav-toggle { display: flex; }
  .has-js .global-nav {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(31, 42, 26, .12);
    padding: 6px 0 10px;
  }
  .has-js .nav-open .global-nav { display: flex; }
  .has-js .global-nav a {
    padding: 13px 24px; font-size: 15px;
    border-bottom: 1px solid var(--wakaba-100);
  }
  .has-js .global-nav a:last-child { border-bottom: none; }
  .has-js .global-nav a[aria-current="page"] {
    font-weight: 700; color: var(--wakaba-800);
    border-left: 3px solid var(--wakaba-500); padding-left: 21px;
  }
}

/* ---------- ヒーロー(全幅の背景写真) ----------
   可読性: 写真の上に暗いスクリムを重ね、白文字で最低4.5:1を確保する。
   左(文字側)を濃く、右(被写体側)を薄くして写真を殺さない。 */
.hero {
  position: relative; overflow: hidden;
  background: var(--wakaba-800); /* 画像読み込み前・読み込み失敗時の下地 */
  min-height: min(80vh, 780px); display: flex; align-items: center;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 64% 46%; /* 天狗像を画面内に保つ */
}
/* 濃度の根拠: 写真の最も明るい画素(空)に白文字を重ねても5:1を満たす下限が .62。
   文字が届きうる横0〜60%はその下限を保ち、被写体側は一気に薄くして写真を明るく見せる。 */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(18, 27, 13, .70) 0%,
      rgba(18, 27, 13, .66) 30%,
      rgba(18, 27, 13, .64) 62%,
      rgba(18, 27, 13, .26) 78%,
      rgba(18, 27, 13, .06) 100%),
    linear-gradient(180deg, rgba(18, 27, 13, .26) 0%, rgba(18, 27, 13, 0) 22%);
}
.hero-inner { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 88px; width: 100%; }
.hero-text { max-width: 40rem; }
.hero .pillar { color: var(--wakaba-300); }
.hero .pillar::after { background: var(--wakaba-300); }
.hero h1 {
  font-size: 40px; margin: 14px 0 18px; color: #fff;
  font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .38);
}
.hero h1 .phrase { display: inline-block; }
.hero h1 .accent { color: var(--wakaba-200); }
.hero .lead {
  margin-bottom: 28px; color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .42);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-primary { background: #fff; color: var(--wakaba-800); }
.hero .btn-primary:hover { background: var(--wakaba-100); }
.hero .btn-ghost {
  background: rgba(255, 255, 255, .12); color: #fff;
  border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(2px);
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.hero-credit {
  position: absolute; right: 16px; bottom: 12px; z-index: 1; margin: 0;
  font-size: 11px; color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
@media (max-width: 860px) {
  .hero { min-height: min(82vh, 680px); }
  .hero h1 { font-size: 27px; }
  .hero-inner { padding-top: 60px; padding-bottom: 68px; }
  /* 縦並びでは文字が全幅に来るため、全域で下限 .62 を保つ */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(18, 27, 13, .68) 0%, rgba(18, 27, 13, .64) 55%, rgba(18, 27, 13, .62) 100%);
  }
  .hero-media img { object-position: 68% 44%; }
}

/* 写真プレースホルダ(実写真の差し替え待ち。差し替え時にこの要素ごと削除する) */
.photo-ph {
  background: repeating-linear-gradient(-45deg, var(--wakaba-100) 0 14px, var(--wakaba-50) 14px 28px);
  border: 1.5px dashed var(--wakaba-300); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-sub); font-size: 13px; text-align: center;
  padding: 12px; line-height: 1.6;
}

/* ---------- 今日の高尾山ボード(大小差のあるベントー) ---------- */
.board {
  display: grid; grid-template-columns: 5fr 3fr 4fr; grid-template-rows: auto auto;
  gap: 16px; margin-top: 32px;
}
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; box-shadow: var(--shadow);
}
.tile-weather { grid-row: 1 / 3; background: var(--wakaba-50); border-color: var(--wakaba-200); }
.tile-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; margin-bottom: 6px;
}
/* タイルの値。見出し(15px)より一段大きい程度に留める。
   30pxだと「2026-06-07」「通常どおり」がタイル幅いっぱいになって窮屈だった。 */
.tile .big {
  font-size: 21px; font-family: var(--font-head); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
/* 気温タイルはベントーの主役(2行ぶん)なので、ここだけ少し大きい */
.tile-weather .big { font-size: 25px; }
.tile .sub { font-size: 13px; color: var(--ink-sub); }
.tile p { margin: .4rem 0; }
.weather-row { display: flex; gap: 28px; margin: 12px 0 8px; flex-wrap: wrap; }
/* 状態は色だけでなく必ず文言でも示す(色に意味を持たせきらない) */
.tile[data-status="warn"] { border-left: 4px solid var(--caution); }
.tile[data-status="danger"] { border-left: 4px solid var(--alert); }
@media (max-width: 860px) {
  .board { grid-template-columns: 1fr 1fr; }
  .tile-weather { grid-row: auto; grid-column: 1 / 3; }
}
@media (max-width: 560px) {
  /* タイルが半分幅になるので、日付が折り返さないところまで落とす */
  .tile .big { font-size: 19px; }
  .tile-weather .big { font-size: 23px; }
}

/* ---------- 特集バナー ---------- */
.feature-banner {
  margin-top: 40px; display: grid; grid-template-columns: 5fr 7fr;
  background: var(--wakaba-800); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.feature-banner .photo-ph { border-radius: 0; border: none; aspect-ratio: auto; min-height: 220px; }
/* バナー左側の写真。枠いっぱいに敷き、比率は保ったまま切り抜く */
.feature-banner-image {
  width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block;
}
.feature-body {
  padding: 30px 34px; color: #eef4e4;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
}
.feature-tag {
  background: var(--wakaba-300); color: var(--wakaba-800);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .15em;
  padding: 3px 12px; border-radius: 999px;
}
.feature-body h3 { color: #fff; font-size: 23px; margin: 0; }
.feature-body p { font-size: 14px; color: #cfe0b4; margin: 0; }
.feature-body .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.feature-body .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 700px) { .feature-banner { grid-template-columns: 1fr; } }

/* バナー内のボタン列と注記 */
.feature-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-note { margin: 2px 0 12px; }
.feature-note a { color: inherit; }

/* ---------- 目的から探す ---------- */
/* 10項目を5列2行で置く。中途半端な余りが出ないので並びが締まる */
.purpose-grid {
  list-style: none; padding: 0; margin: 28px 0 12px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 900px) { .purpose-grid { grid-template-columns: repeat(4, 1fr); } }
/* 700px以下はラベルが折り返さない幅で自動的に詰める(段数を固定しない) */
@media (max-width: 700px) {
  .purpose-grid { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
}
.purpose-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 10px 14px; text-align: center; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere;
  transition: border-color .2s, background .2s, transform .2s;
}
.purpose-item:hover { border-color: var(--wakaba-500); background: var(--wakaba-50); transform: translateY(-2px); }
/* アイコンは丸いチップに載せて、白カードの中に色の点を作る */
.purpose-item .icon {
  width: 46px; height: 46px; padding: 10px; box-sizing: border-box;
  stroke: var(--wakaba-800); background: var(--wakaba-100); border-radius: 50%;
}
/* 5列のときだけ市松状に段差をつける(均等な格子の反復を崩す)。
   下の段ほど値が小さいので、行が増えても破綻しない */
@media (min-width: 901px) {
  .purpose-grid li:nth-child(even) { transform: translateY(12px); }
}

/* ---------- サイト内検索 ----------
   WP版の検索ウィジェットにならって、幅いっぱいの帯として置く。
   入力の途中から候補を欄の下に出す。下のキーワード群とは連動しない。 */
.sitesearch {
  position: relative;
  margin: 30px 0 6px; padding: 14px 16px;
  background: var(--wakaba-50);
  border: 1px solid var(--wakaba-200); border-radius: 14px;
}
.ss-box {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 14px;
  background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px;
}
.ss-box:focus-within { border-color: var(--wakaba-700); box-shadow: 0 0 0 3px var(--wakaba-200); }
.ss-icon { flex: none; color: var(--wakaba-700); }
.ss-input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.ss-input::placeholder { color: var(--ink-sub); }
/* ブラウザ既定の×は隠し、自前のボタンを使う(挙動を揃えるため) */
.ss-input::-webkit-search-cancel-button { display: none; }
.ss-clear {
  flex: none; border: 0; background: transparent; cursor: pointer;
  padding: 4px 2px; font-size: 20px; line-height: 1; color: var(--ink-sub);
}
.ss-clear:hover { color: var(--wakaba-700); }

.ss-panel {
  position: absolute; z-index: 30; left: 14px; right: 14px; top: calc(100% - 8px);
  background: #fff;
  border: 1px solid var(--wakaba-200); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(31, 42, 26, .16);
  overflow: hidden;
}
.ss-list { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.ss-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border-left: 3px solid transparent;
}
.ss-item.is-active { background: var(--wakaba-50); border-left-color: var(--wakaba-700); }
.ss-badge {
  flex: none; margin-top: 2px; padding: 3px 9px;
  background: var(--wakaba-100); color: var(--wakaba-800);
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ss-text { min-width: 0; }
.ss-title { display: block; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ss-meta {
  display: block; margin-top: 2px; font-size: 13px; color: var(--ink-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-panel mark { background: var(--wakaba-200); color: inherit; border-radius: 2px; padding: 0 1px; }
.ss-empty { margin: 0; padding: 16px 18px; font-size: 14px; color: var(--ink-sub); line-height: 1.8; }
.ss-more {
  margin: 0; padding: 8px 18px 12px; font-size: 13px; color: var(--ink-sub);
  border-top: 1px solid var(--line);
}
@media (max-width: 560px) {
  .sitesearch { padding: 12px; }
  .ss-panel { left: 12px; right: 12px; }
  .ss-meta { white-space: normal; }
}

/* ---------- キーワードピル ---------- */
.pill-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.pill {
  display: inline-block; text-decoration: none;
  background: #fff; border: 1px solid var(--wakaba-200); border-radius: 999px;
  padding: 6px 15px; font-size: 14px; color: var(--wakaba-700);
  transition: background .15s, border-color .15s;
}
.pill:hover { background: var(--wakaba-100); border-color: var(--wakaba-500); }
.pill-strong { background: var(--wakaba-700); color: #fff; border-color: var(--wakaba-700); font-weight: 500; }
.pill-strong:hover { background: var(--wakaba-800); border-color: var(--wakaba-800); }

/* ---------- 注意帯(熊・安全) ---------- */
.caution-band {
  background: var(--caution-bg); border-left: 4px solid var(--caution);
  border-radius: 0 12px 12px 0; padding: 26px 28px; margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.caution-band h3 { color: var(--caution); display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.caution-band .icon { stroke: var(--caution); }
.caution-band p { margin: .3rem 0; }
.btn-caution { background: var(--caution); color: #fff; }
.btn-caution:hover { background: #8a4a00; }
@media (max-width: 700px) { .caution-band { grid-template-columns: 1fr; } }

/* ---------- ルート表 ---------- */
.route-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 40px; margin-top: 28px; align-items: start; }
.route-grid .photo-ph { aspect-ratio: 3 / 4; }
table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
th, td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; font-size: .95rem; }
th { background: var(--wakaba-100); font-family: var(--font-head); }
main.wide table {
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: #fff; margin: 0;
  border-collapse: separate; border-spacing: 0;
}
main.wide th, main.wide td { border: none; border-bottom: 1px solid var(--line); padding: 14px 16px; }
main.wide tbody tr:last-child td { border-bottom: none; }
@media (max-width: 860px) { .route-grid { grid-template-columns: 1fr; } }

/* ---------- 公式お知らせ(タブ) ---------- */
.news-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); margin-top: 28px; overflow: hidden;
}
.news-tabs { display: flex; border-bottom: 1px solid var(--line); }
.news-tab {
  flex: 1; padding: 14px 10px; text-align: center; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--ink-sub); background: var(--wakaba-50);
  border: none; border-bottom: 3px solid transparent;
}
.news-tab[aria-selected="true"] { background: #fff; color: var(--wakaba-700); border-bottom-color: var(--wakaba-500); }
.news-list { list-style: none; padding: 8px 24px; margin: 0; }
.news-list li {
  display: flex; gap: 18px; padding: 13px 0;
  border-bottom: 1px dashed var(--line); font-size: 15px; align-items: baseline;
}
.news-list li:last-child { border-bottom: none; }
.news-list time { font-size: 13px; color: var(--ink-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-badge {
  font-size: 11px; font-family: var(--font-head); font-weight: 700; color: var(--caution);
  border: 1px solid var(--caution); border-radius: 4px; padding: 0 6px; white-space: nowrap;
}
.news-panel[hidden] { display: none; }
.news-list li a { flex: 1; min-width: 12em; }
/* 出典は各行に出す(読者が「公式が出したお知らせ」と一目で分かるようにする) */
.news-from { font-size: 12px; color: var(--ink-sub); white-space: nowrap; }
.news-unavailable { color: var(--ink-sub); font-size: 14px; }
.news-source-link { margin: 0; padding: 4px 24px 18px; font-size: 13px; }
.news-tab:focus-visible { outline: 2px solid var(--wakaba-700); outline-offset: -2px; }
@media (max-width: 700px) {
  .news-list li { flex-wrap: wrap; gap: 6px 12px; }
  .news-from { width: 100%; }
}

/* ---------- 手順ステップ ---------- */
.steps { display: flex; align-items: stretch; margin-top: 32px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 180px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 20px; box-shadow: var(--shadow);
}
.step h3 { margin: 0 0 .3rem; }
.step p { margin: 0; font-size: 14px; color: var(--ink-sub); }
.step .num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wakaba-700); color: #fff;
  font-family: var(--font-head); font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.step-arrow { display: flex; align-items: center; padding: 0 10px; }
.step-arrow .icon { width: 26px; height: 26px; stroke: var(--wakaba-500); }
@media (max-width: 860px) {
  .steps { flex-direction: column; }
  .step-arrow { justify-content: center; transform: rotate(90deg); padding: 4px 0; }
}

/* ---------- アクセスカード ---------- */
.access-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; margin-top: 28px; }
.access-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 28px; box-shadow: var(--shadow);
}
.access-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.access-card ul { list-style: none; margin: 10px 0 0; padding: 0; }
.access-card li {
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15px;
  display: flex; justify-content: space-between; gap: 12px;
}
.access-card li:last-child { border-bottom: none; }
@media (max-width: 860px) { .access-grid { grid-template-columns: 1fr; } }

/* ---------- 人気・新着 ---------- */
.articles-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; margin-top: 28px; align-items: start; }
.rank-list, .fresh-list {
  list-style: none; padding: 0; margin: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.rank-list li, .fresh-list li { border-bottom: 1px solid var(--line); }
.rank-list li:last-child, .fresh-list li:last-child { border-bottom: none; }
.rank-list a, .fresh-list a {
  display: flex; gap: 16px; padding: 16px 20px;
  text-decoration: none; color: var(--ink); align-items: center;
}
.rank-list a:hover, .fresh-list a:hover { background: var(--wakaba-50); }
.rank-num {
  font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--wakaba-500);
  width: 32px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.rank-list li.rank-1 .rank-num { color: var(--wakaba-700); font-size: 28px; }
.a-title { font-size: 15px; font-weight: 500; line-height: 1.5; }
.a-meta { font-size: 12px; color: var(--ink-sub); }
.list-head {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 14px 20px; background: var(--wakaba-100);
  display: flex; align-items: center; gap: 8px;
}
@media (max-width: 860px) { .articles-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { margin-top: 28px; display: grid; gap: 10px; max-width: 760px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wakaba-100); color: var(--wakaba-700); font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.faq summary .chev { margin-left: auto; transition: transform .2s; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .a { padding: 0 20px 16px 58px; font-size: 15px; color: var(--ink-sub); margin: 0; }

/* ---------- 下山後(段違いコラージュ) ---------- */
.after-grid { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 20px; margin-top: 32px; align-items: start; }
.after-item .photo-ph { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.after-item:nth-child(2) { margin-top: 28px; }
.after-item:nth-child(3) { margin-top: 56px; }
.after-item h3 { font-size: 17px; margin: 0 0 .2rem; }
.after-item p { font-size: 14px; color: var(--ink-sub); margin: 0; }
@media (max-width: 860px) {
  .after-grid { grid-template-columns: 1fr; }
  .after-item { margin-top: 0 !important; }
}

/* ---------- 運営者 ---------- */
.owner-band {
  margin-top: 88px; background: var(--wakaba-50);
  border-top: 1px solid var(--wakaba-200); border-bottom: 1px solid var(--wakaba-200);
  padding: 40px 0;
}
.owner-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
/* マスコット「フモトリ」。原本は白地なので、丸く抜いて実線の枠で締める */
.owner-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 1.5px solid var(--wakaba-200);
  object-fit: contain; padding: 4px;
}
.owner-inner h3 { font-size: 17px; margin: 0 0 4px; }
.owner-inner p { font-size: 14px; color: var(--ink-sub); margin: 0; }
@media (max-width: 700px) { .owner-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- フッター ---------- */
.site-footer { background: var(--wakaba-800); color: #eef4e4; padding: 48px 0 32px; }
main:not(.wide) ~ .site-footer { margin-top: 2rem; }
/* サイト情報(運営者情報・ポリシー等)。本文ナビと区切り線で分ける */
.footer-legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px;
}
.footer-legal-nav a { color: #d7e3c4; text-decoration: none; }
.footer-legal-nav a:hover { text-decoration: underline; }
.legal.copyright { margin-top: 6px; }
.legal.copyright a { color: inherit; }

.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { font-family: var(--font-head); font-size: 14px; margin: 0 0 10px; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: #cfe0b4; text-decoration: none; font-size: 13px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .about { font-size: 13px; color: #cfe0b4; margin: 0; }
.site-footer .legal {
  margin: 36px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px; color: #a9bf8c;
}
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- 記事・固定ページの見出し ----------
   3段階を「罫線の向き」で見分けられるようにする。h2=下に横罫、h3=左に縦罫、h4=印だけ。
   h2の短い横罫は .pillar::after と同じ motif で、トップページの見出しと血筋をそろえてある。
   :where() で詳細度を0にしているので、部品側のクラス指定(.gear-rail h3 など)が普通に勝つ。
   ヘッダーが sticky なので、目次リンクで飛んだ見出しが隠れないよう scroll-margin を持たせる。 */
:where(main:not(.wide)) :is(h2, h3, h4, h5) { scroll-margin-top: 80px; }

:where(main:not(.wide)) h2 {
  position: relative;
  margin: 3rem 0 1.15rem;
  padding-bottom: .5rem;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--line);
}
:where(main:not(.wide)) h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 2.4em; height: 3px; border-radius: 2px;
  background: var(--wakaba-700);
}

:where(main:not(.wide)) h3 {
  margin: 2.1rem 0 .7rem;
  padding-left: .65em;
  font-size: 1.18rem;
  border-left: 3px solid var(--wakaba-500);
}

:where(main:not(.wide)) h4 {
  margin: 1.7rem 0 .5rem;
  font-size: 1.05rem;
  color: var(--wakaba-800);
}
/* 太字の本文と見分けがつくように、CSSで描いた小さなひし形を頭に置く(絵文字は使わない) */
:where(main:not(.wide)) h4::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: .5em;
  background: var(--wakaba-500); transform: rotate(45deg);
  vertical-align: .1em;
}

:where(main:not(.wide)) h5 {
  margin: 1.4rem 0 .4rem;
  font-size: 1rem; color: var(--ink-sub);
}

/* 見出しが続くとき、上の余白が二重にならないよう詰める */
:where(main:not(.wide)) :is(h2, h3) + :is(h3, h4, h5) { margin-top: 1.2rem; }
:where(main:not(.wide)) :is(h2, h3, h4, h5) + p { margin-top: 0; }

@media (max-width: 600px) {
  :where(main:not(.wide)) h2 { font-size: 1.3rem; margin-top: 2.4rem; }
  :where(main:not(.wide)) h3 { font-size: 1.09rem; }
}

/* ---------- トップへ戻る ----------
   右下に固定。48px角=指で押せる大きさを確保する。 */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--wakaba-700); color: #fff;
  border: none; border-radius: 50%;
  box-shadow: 0 3px 14px rgba(31, 42, 26, .22);
}
.to-top:hover { background: var(--wakaba-800); }
.to-top:focus-visible { outline: 3px solid var(--wakaba-300); outline-offset: 2px; }
.to-top[hidden] { display: none; }
.to-top .icon { width: 22px; height: 22px; stroke-width: 2.2; }
@media (max-width: 600px) { .to-top { right: 14px; bottom: 14px; } }

/* ---------- 熊の出没マップ(WP版 [takao_bear_map] の置換) ----------
   色は危険度ではなく「記録の新しさ」だけを表す。赤(--alert)は使わない。 */
.bear-map { margin: 1.8rem 0; }
.bear-map-head {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  margin-bottom: 10px; font-family: var(--font-head);
}
.bear-map-count { font-weight: 700; font-size: 17px; }
.bear-map-span, .bear-map-latest { font-size: 13px; color: var(--ink-sub); }

.bear-map-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bear-map-btn {
  min-height: 36px; padding: 6px 15px; cursor: pointer;
  background: #fff; color: var(--wakaba-700);
  border: 1.5px solid var(--wakaba-200); border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
}
.bear-map-btn:hover { background: var(--wakaba-50); border-color: var(--wakaba-500); }
.bear-map-btn.is-on { background: var(--wakaba-700); color: #fff; border-color: var(--wakaba-700); }

/* z-index:0 で重なりの入れ物を作る。これが無いとLeafletの操作パネル(z-index 800)が
   sticky ヘッダー(z-index 10)より前に出てしまう */
.bear-map-canvas {
  position: relative; z-index: 0;
  height: 420px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--wakaba-50);
}
@media (max-width: 600px) { .bear-map-canvas { height: 320px; } }

.bear-map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; color: var(--ink-sub);
}
.bear-map-legend li { display: flex; align-items: center; gap: 7px; }
.bear-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.bear-dot-new { background: var(--caution); }
.bear-dot-year { background: var(--wakaba-700); }
.bear-dot-old { background: #7b8674; }

.bear-map-note { font-size: 12.5px; color: var(--ink-sub); line-height: 1.8; margin: 8px 0 0; }
.bear-map-shown { font-weight: 700; color: var(--ink); }

/* 山頂の目印とピン。画像は使わずCSSとSVGで描く */
.bear-summit-label {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  background: var(--wakaba-800); color: #fff; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: 11.5px;
}
.bear-pin svg { display: block; }

/* ふきだし。Leaflet既定の書体・角丸をサイトにそろえる */
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.75; }
.bear-pop { display: grid; gap: 3px; }
.bear-pop-date { font-family: var(--font-head); font-size: 14.5px; }
.bear-pop-place { color: var(--ink); }
.bear-pop-city, .bear-pop-course { font-size: 12px; color: var(--ink-sub); }
.bear-pop-tag {
  justify-self: start; padding: 1px 8px; border-radius: 999px;
  background: var(--wakaba-100); color: var(--wakaba-800); font-size: 11.5px; font-weight: 700;
}
.bear-pop-src { font-size: 12px; color: var(--ink-sub); }

/* ---------- 広告(AdSense) ----------
   min-heightで先に高さを取り、広告が入ったときに本文が飛ばないようにする。
   本文と見分けがつくよう、上に小さく「広告」と出す。 */
.ad-unit { margin: 2.4rem 0 0; }
.ad-unit-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-head); font-size: 11px;
  letter-spacing: .14em; color: var(--ink-sub);
}
.ad-unit .adsbygoogle { min-height: 280px; }
@media (max-width: 600px) { .ad-unit .adsbygoogle { min-height: 250px; } }

/* 地図の下に置く、KUMA-LOGへの入口。
   深い集計(全記録・コース別・月別)は向こうに置き、記事は入口だけ持つ。 */
.bear-map-more {
  margin-top: 14px; padding: 14px 16px;
  background: var(--wakaba-50);
  border: 1px solid var(--wakaba-200); border-radius: 12px;
}
.bear-map-more-lead {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--wakaba-800);
}
.bear-map-more ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 6px 18px;
}
.bear-map-more li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bear-map-more a { font-weight: 700; font-size: 14px; }
.bear-map-more span { font-size: 12px; color: var(--ink-sub); }

/* ---------- 実況気温カード(takaosan-current-weather) ---------- */
.weather-now {
  background: var(--wakaba-50); border: 1.5px solid var(--wakaba-200);
  border-radius: 12px; padding: 18px 22px; margin: 1.2rem 0;
}
.weather-now-grid { display: flex; gap: 36px; flex-wrap: wrap; }
.weather-now-label { margin: 0; font-size: 13px; color: var(--ink-sub); }
.weather-now-value {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 34px;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.weather-now .sub { font-size: 13px; color: var(--ink-sub); margin: 6px 0 0; }
.weather-now .note-date { margin: 8px 0 0; }

/* ---------- きっぷ比較カード(mount-takao-ticket-guide-2-2) ----------
   WP版のiframe+Tailwindのインフォグラフィックの置換。外部CDNは使わない。 */
.ticket-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.4rem 0;
}
@media (max-width: 640px) { .ticket-cards { grid-template-columns: 1fr; } }
.ticket-card {
  background: #fff; border: 1.5px solid var(--wakaba-200); border-radius: 12px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.ticket-card .ticket-name {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--wakaba-800);
}
.ticket-card .ticket-tag { margin: 2px 0 10px; font-size: 13px; color: var(--ink-sub); }
.ticket-card ul { margin: 0 0 12px; padding-left: 1.2em; font-size: 14px; }
.ticket-card li { margin: 2px 0; }
.ticket-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 4px;
}
.ticket-price .was { font-size: 13px; color: var(--ink-sub); text-decoration: line-through; }
.ticket-price .now { font-family: var(--font-head); font-weight: 700; font-size: 26px; }
.ticket-price .save {
  padding: 2px 10px; border-radius: 999px;
  background: var(--caution-bg); color: var(--caution);
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
}
.ticket-when { margin: 0; font-size: 12.5px; color: var(--ink-sub); }

/* ---------- 記事下のバナー(WP版の投稿本文下ウィジェット) ---------- */
.content-banner { margin: 2.6rem 0 0; }
.content-banner a {
  display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
}
.content-banner a:hover { border-color: var(--wakaba-500); }
.content-banner img { width: 100%; height: auto; }

/* ---------- 既存ページ用の部品(narrow main) ---------- */
.category-grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem;
}
.category-grid a {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem; text-decoration: none; height: 100%; background: #fff;
}
.category-grid a:hover { border-color: var(--wakaba-500); background: var(--wakaba-50); }
.category-grid strong { display: block; margin-bottom: .25rem; color: var(--ink); }
.category-grid span { font-size: .8rem; color: var(--ink-sub); }
.spot-list { list-style: none; padding: 0; }
.spot-list li { border-bottom: 1px solid var(--line); }
.spot-list a { display: flex; justify-content: space-between; padding: .6rem .2rem; text-decoration: none; }
.spot-list .kind { font-size: .8rem; color: var(--ink-sub); }
.status-bar {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200); border-radius: 8px;
  padding: .5rem .75rem; font-size: .85rem; margin: .75rem 0;
}
.status-source { color: var(--ink-sub); }

/* ---------- 駐車場ナビ ---------- */
.parking-navi { margin: 1.2rem 0; }
.parking-form {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200);
  border-radius: 12px; padding: 18px 20px;
}
.parking-field { display: flex; flex-direction: column; gap: 5px; }
.parking-field label { font-size: 13px; color: var(--ink-sub); font-family: var(--font-head); }
.parking-field input[type="datetime-local"], .parking-field select {
  min-height: 48px; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 12px; font-family: var(--font-body); font-size: 15px; background: #fff; color: var(--ink);
}
.parking-check { flex-direction: row; align-items: center; gap: 8px; min-height: 48px; }
.parking-check input { width: 20px; height: 20px; }
.parking-check label { font-size: 15px; color: var(--ink); }
.parking-live { font-size: 14px; color: var(--ink-sub); margin: 14px 0 0; }
.parking-card {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--wakaba-500);
  border-radius: 12px; padding: 16px 20px; margin-top: 12px; box-shadow: var(--shadow);
}
.parking-card-top { border-color: var(--wakaba-700); border-left-width: 6px; }
.parking-card[data-risk="mid"] { border-left-color: var(--caution); }
.parking-card[data-risk="high"] { border-left-color: var(--alert); }
.parking-card h3 { margin: 0 0 4px; font-size: 17px; }
.parking-meta { margin: 0 0 6px; font-size: 15px; }
.parking-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.parking-links .btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.parking-reserve {
  background: var(--wakaba-50); border: 1px dashed var(--wakaba-300);
  border-radius: 12px; padding: 16px 20px; margin-top: 16px;
}
.parking-reserve h3 { margin: 0 0 4px; font-size: 16px; }
.parking-allbusy {
  background: var(--caution-bg); border-left: 4px solid var(--caution);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 14px 0 0; font-size: 15px;
}
.parking-table-wrap { margin-top: 20px; }
.parking-table-wrap summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 700;
  font-size: 15px; padding: 10px 0;
}

/* ---------- 服装の目安カード ---------- */
.clothing-card {
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200);
  border-radius: 12px; padding: 20px 24px; box-shadow: var(--shadow); margin: 1.2rem 0;
}
.clothing-card .tile-head { font-size: 17px; margin-bottom: 10px; }
.clothing-card .icon { stroke: var(--wakaba-700); }
.clothing-items { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.clothing-items li {
  background: #fff; border: 1px solid var(--wakaba-200); border-radius: 999px;
  padding: 5px 14px; font-size: 14px;
}

/* ---------- 動き: スクロール出現(1種のみ) ----------
   .has-js が付いたときだけ初期状態を隠す。JSが無効・失敗しても本文は必ず見える。 */
.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.has-js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 携行品の紹介(換金レール) ---------- */
.gear-rail {
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200);
  border-radius: 12px; padding: 20px 24px; margin: 1.5rem 0;
}
/* カード自体に枠があるので、本文用の縦罫は付けない */
.gear-rail h3 { margin: 0 0 4px; font-size: 17px; border: 0; padding: 0; }
.gear-rail .sub { font-size: 14px; color: var(--ink-sub); margin: 0 0 12px; }
.gear-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gear-items a {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; text-decoration: none; color: var(--ink);
}
.gear-items a:hover { border-color: var(--wakaba-500); }
.gear-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.gear-desc { display: block; font-size: 13px; color: var(--ink-sub); }
.gear-price { display: block; font-size: 13px; color: var(--wakaba-700); margin-top: 4px; }

/* ---------- 固定ページの案内ボックス ---------- */
.notice-box {
  background: var(--wakaba-50); border-left: 4px solid var(--wakaba-500);
  border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 1.2rem 0;
}
.notice-box p { margin: .4rem 0; }

/* ---------- お問い合わせフォーム ---------- */
.contact-form { display: grid; gap: 18px; max-width: 640px; margin: 1.4rem 0; }
.contact-field { display: grid; gap: 6px; }
.contact-field label { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.contact-field .req {
  font-size: 11px; font-weight: 700; color: var(--caution);
  border: 1px solid var(--caution); border-radius: 4px; padding: 0 5px; margin-left: 6px;
}
.contact-field input, .contact-field textarea {
  border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; background: #fff; color: var(--ink);
  min-height: 48px; width: 100%;
}
.contact-field textarea { min-height: 160px; line-height: 1.8; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus {
  outline: 2px solid var(--wakaba-500); outline-offset: 1px; border-color: var(--wakaba-500);
}
.contact-hint { font-size: 12px; color: var(--ink-sub); }
/* 迷惑送信対策の隠し項目。読み上げにも出さない */
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin: 0; font-size: 15px; }
.contact-status.is-ok { color: var(--wakaba-700); font-weight: 700; }
.contact-status.is-error { color: var(--alert); font-weight: 700; }

/* ---------- ルート診断 ---------- */
.route-finder { margin: 1.4rem 0; }
.route-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200);
  border-radius: 12px; padding: 18px 20px;
}
.route-field { border: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.route-field legend {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--wakaba-700); padding: 0 0 4px;
}
.route-field label {
  display: flex; align-items: center; gap: 8px; font-size: 15px;
  min-height: 34px; cursor: pointer;
}
.route-field input { width: 18px; height: 18px; }
.route-live { font-size: 14px; color: var(--ink-sub); margin: 16px 0 0; }
.route-card {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--wakaba-500);
  border-radius: 12px; padding: 16px 20px; margin-top: 12px; box-shadow: var(--shadow);
}
.route-card h3 { margin: 0 0 2px; font-size: 17px; }
.route-time { margin: 0 0 6px; font-size: 14px; color: var(--ink-sub); font-variant-numeric: tabular-nums; }
.route-card p { margin: .3rem 0; }
.route-reasons { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.route-reasons li {
  background: var(--wakaba-100); border-radius: 999px; padding: 3px 12px;
  font-size: 13px; color: var(--wakaba-800);
}
.route-caution {
  font-size: 13px; color: var(--caution);
  border-left: 3px solid var(--caution); padding-left: 10px; margin: 6px 0 0;
}
.route-empty {
  background: var(--caution-bg); border-left: 4px solid var(--caution);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 12px 0 0;
}
.route-dropped { margin-top: 18px; }
.route-dropped summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 14px; padding: 8px 0;
}
.route-dropped ul { margin: 4px 0 0; padding-left: 1.4em; font-size: 14px; color: var(--ink-sub); }

/* ---------- 動画の埋め込み ----------
   iframe自体に当てる。div等のラッパーは記事変換の後続処理で落ちるため頼れない。 */
iframe.video-embed {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  margin: 1.4rem 0; border: 0; border-radius: 12px; background: var(--wakaba-800);
}

/* ---------- 記事のアイキャッチ ---------- */
.featured-image {
  width: 100%; height: auto; border-radius: 12px;
  margin: 1rem 0 1.6rem; box-shadow: var(--shadow);
}

/* ---------- 道路事業の進捗まとめ(八王子南バイパス) ----------
   WP版は独自CSSつきのインフォグラフィックだったが、変換でdivが落ちて崩れていた。
   若葉デザインの部品として組み直す。区間の状態は色だけに頼らず文字でも示す。 */
.roadwork { margin: 1.6rem 0; }
.roadwork-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin: 0 0 1.4rem; padding: 0; list-style: none;
}
.roadwork-stats li {
  background: var(--wakaba-50); border: 1px solid var(--wakaba-200);
  border-radius: 12px; padding: 14px 16px;
}
.roadwork-stats .value {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 22px; color: var(--wakaba-800); line-height: 1.3;
}
.roadwork-stats .label { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-sub); }

.roadwork-timeline { margin: 0; padding: 0; list-style: none; }
.roadwork-seg {
  position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--wakaba-200);
}
.roadwork-seg:last-child { border-left-color: transparent; padding-bottom: 0; }
.roadwork-seg::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--wakaba-500);
}
.roadwork-seg[data-state="done"]::before { background: var(--wakaba-500); }
.roadwork-seg[data-state="delay"]::before { border-color: var(--caution); }
.roadwork-seg .seg-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
}
.roadwork-seg .seg-name {
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink);
}
.roadwork-seg .seg-state {
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--wakaba-100); color: var(--wakaba-800); white-space: nowrap;
}
.roadwork-seg[data-state="done"] .seg-state { background: var(--wakaba-200); }
.roadwork-seg[data-state="delay"] .seg-state { background: var(--caution-bg); color: var(--caution); }
.roadwork-seg .seg-note { margin: 4px 0 0; font-size: 14px; color: var(--ink-sub); }

.roadwork-note {
  margin: 1.4rem 0 0; padding: 12px 16px;
  background: var(--caution-bg); border-left: 3px solid var(--caution);
  border-radius: 0 8px 8px 0; font-size: 14px;
}

/* ---------- セクションの帯 ----------
   10節が全て白地・同じ余白で続くと単調なので、02/05/08を淡い帯にして起伏を作る。
   機械的な交互(ゼブラ)にはしない。帯は全幅、中身は従来のcontainerのまま。 */
main.wide > section.band {
  background: var(--wakaba-50);
  border-top: 1px solid var(--wakaba-100);
  border-bottom: 1px solid var(--wakaba-100);
  padding-bottom: 72px;
}
/* 帯の上に置く白いカード類がなじむように、線を少しだけ濃くする */
.band .access-card, .band .rank-list, .band .fresh-list { border-color: var(--wakaba-200); }