/* ─── ピクニックバス検索（bus.html） ───
   2026-10-10追加。見た目は Claude Design の案「1a 時刻を大きく」（ユーザーが選んだ）を写したもの。
   寸法・余白はデザインの値そのまま（余白は 4 / 8 / 12 / 16 / 24 の5段。画面の左右16px、カードの中20px）。
   便の色だけはデザインと違い、チラシ裏の時刻表の色にしている（ユーザー指定）。
   style.css からは共通の上の帯・テーマ切替・フッターだけを借り、色はこのページ用のトークン（--b-*）で持つ。
   屋外で年配の方も見るページなので、文字は14px以上（時刻と案内は16px以上）、押すものは高さ44px以上 */

.bus-page {
  --b-bg: #1C0808;
  --b-paper: #260E0E;
  --b-ink: #F5EEEA;
  --b-sub: #D2C3BA;
  --b-red: #C41A0E;
  /* 赤い文字。暗い地に #C41A0E だと約3:1しか出ないので、ダークでは明るい赤にする（赤の塗りはそのまま） */
  --b-red-ink: #FF8E80;
  --b-gold: #C9A84C;
  --b-gold-ink: #D9BC66;
  --b-edge: #A3887C;
  --b-rule: #4A2824;
  --b-red-soft: #3A110D;
  --b-gold-soft: #2F200F;
  --b-on-red: #FFFFFF;
  /* 便ごとの色。ライトはチラシ裏の時刻表の色そのまま（臨時便 #D9EEFB・大泉ルート #F9EBEB・北部ルート #FDF6DF）、
     ダークは同じ色味を暗くしたもの。-line は札の枠と、段の中の線 */
  --b-rinji: #12303F;
  --b-rinji-line: #4FB3E8;
  --b-oizumi: #3B1D1D;
  --b-oizumi-line: #E88D88;
  --b-hokubu: #3A3115;
  --b-hokubu-line: #E0C35A;
  /* 選択欄の右の矢印（色は --b-sub と同じ） */
  --b-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D2C3BA' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background: var(--b-bg);
}

html[data-theme="light"] .bus-page {
  --b-bg: #F7F1E3;
  --b-paper: #FFFDF7;
  --b-ink: #2B1C12;
  --b-sub: #5E4A3A;
  --b-red-ink: #C41A0E;
  --b-gold: #8C6B22;
  --b-gold-ink: #7A5C1A;
  --b-edge: #7A6553;
  --b-rule: #E2D5BC;
  --b-red-soft: #FBE7E1;
  --b-gold-soft: #F3E9D2;
  --b-rinji: #D9EEFB;
  --b-rinji-line: #1592D1;
  --b-oizumi: #F9EBEB;
  --b-oizumi-line: #D9706C;
  --b-hokubu: #FDF6DF;
  --b-hokubu-line: #C9A227;
  --b-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E4A3A' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* スマホの幅で作ったデザインなので、広い画面でも1列のまま中央に置く */
.bus-main {
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 32px;
  color: var(--b-ink);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.bus-main svg { flex: none; }

/* 画面には出さず、読み上げにだけ渡す文字 */
.bus-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 見出し ── */
.bus-head { padding: 8px 20px 0; }

.bus-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-left: -6px;
  color: var(--b-red-ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.bus-back:hover { text-decoration: underline; text-underline-offset: 4px; }

.bus-title {
  margin: 2px 0 0;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* ── 入力 ── */
.bus-form {
  margin: 16px 16px 0;
  padding: 16px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* display の指定が hidden 属性に勝たないように明示する（JSが外すまで隠す） */
.bus-form[hidden],
.bus-now[hidden],
.bus-hint[hidden] { display: none; }

.bus-od {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.bus-od-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bus-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bus-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--b-sub);
}

/* 入力欄は16px未満にしない（iOS が勝手に拡大するため） */
.bus-select {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 40px 0 14px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--b-ink);
  background: var(--b-paper) var(--b-chevron) no-repeat right 12px center;
  border: 1.5px solid var(--b-edge);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.bus-swap {
  /* 項目名の高さ（14px × 1.5 ＋ 4px）の分だけ下げて、2つの欄のまん中にそろえる */
  margin-top: 25px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--b-ink);
  background: var(--b-paper);
  border: 1.5px solid var(--b-edge);
  border-radius: 999px;
  cursor: pointer;
}

.bus-swap:hover { background: var(--b-gold-soft); }

.bus-time-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.bus-time-box {
  width: 136px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--b-sub);
  background: var(--b-paper);
  border: 1.5px solid var(--b-edge);
  border-radius: 6px;
}

.bus-time {
  width: 100%;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--b-ink);
  background: transparent;
  border: 0;
  outline: none;
}

/* 時計の絵は左に自前で置いているので、ブラウザのものは隠す（欄を押せば時刻の選択は開く） */
.bus-time::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
}

.bus-now {
  min-height: 44px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--b-red-ink);
  background: transparent;
  border: 1.5px solid var(--b-red-ink);
  border-radius: 999px;
  cursor: pointer;
}

.bus-now:hover { background: var(--b-red-soft); }

.bus-hint {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--b-ink);
}

/* 検索する。このページでいちばん押してほしいボタンなので、赤の塗り（白い文字との差は 6.0:1）。
   時刻の欄の右に置いて、結果が下に押し出されないようにしている */
.bus-go {
  flex: 1 1 130px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--b-on-red);
  background: var(--b-red);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.bus-go:hover { background: #A3150B; }

.bus-back:focus-visible,
.bus-select:focus-visible,
.bus-swap:focus-visible,
.bus-now:focus-visible,
.bus-go:focus-visible,
.bus-time-box:focus-within,
.bus-all summary:focus-visible,
.bus-link:focus-visible {
  outline: 3px solid var(--b-gold);
  outline-offset: 2px;
}

/* 「検索する」を押したとき、結果の先頭をここまで動かす（bus-search.js の reveal） */
.bus-notice,
.bus-msg,
.bus-list { scroll-margin-top: 12px; }

/* ── 乗り場の注意。時刻より先に目に入る位置に、赤い枠で ── */
.bus-notice {
  margin: 16px 16px 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  background: var(--b-red-soft);
  border: 2px solid var(--b-red);
  border-radius: 6px;
}

.bus-notice svg { color: var(--b-red-ink); }

.bus-notice-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--b-red-ink);
}

.bus-notice-text {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: pretty;
}

.bus-notice-text + .bus-notice-text { margin-top: 8px; }
.bus-notice-text + .bus-notice-title { margin-top: 10px; }

/* ── 歩きの案内・便が無いとき ── */
.bus-msg {
  margin: 24px 16px 0;
  padding: 20px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
}

.bus-msg svg { color: var(--b-gold-ink); }
.bus-msg.is-none svg { color: var(--b-sub); }

.bus-msg p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ── 結果。1枚がひとつの発車時刻。「発車時刻 → 乗るバス → 降りる」の順 ── */
.bus-list {
  list-style: none;
  margin: 24px 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bus-card {
  padding: 14px 20px 20px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
}

.bus-card-head {
  min-height: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bus-card-labels {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bus-card-label {
  font-size: 16px;
  font-weight: 700;
}

.bus-last-mark {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--b-red-ink);
  border: 1.5px solid var(--b-red-ink);
  border-radius: 4px;
}

.bus-mins {
  font-size: 18px;
  font-weight: 700;
  color: var(--b-red-ink);
}

.bus-twin {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.bus-buses {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* バス1台ぶんの段。中は「便の札 → 発車時刻 → 降りる」の順。
   段の地は、チラシ裏の時刻表でその便の列に付いている色（臨時便＝水色、大泉ルート＝桃色、北部ルート＝黄色） */
.bus-bus {
  padding: 12px 14px 14px;
  background: var(--k-fill);
  border-radius: 8px;
}

.bus-bus.is-rinji  { --k-fill: var(--b-rinji);  --k-line: var(--b-rinji-line); }
.bus-bus.is-oizumi { --k-fill: var(--b-oizumi); --k-line: var(--b-oizumi-line); }
.bus-bus.is-hokubu { --k-fill: var(--b-hokubu); --k-line: var(--b-hokubu-line); }

.bus-ride {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* 便の種類の札。色と文字の両方で区別する */
.bus-kind {
  height: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--b-ink);
  background: var(--b-paper);
  border: 2px solid var(--k-line);
  border-radius: 4px;
  white-space: nowrap;
}

.bus-kind.is-rinji  { --k-fill: var(--b-rinji);  --k-line: var(--b-rinji-line); }
.bus-kind.is-oizumi { --k-fill: var(--b-oizumi); --k-line: var(--b-oizumi-line); }
.bus-kind.is-hokubu { --k-fill: var(--b-hokubu); --k-line: var(--b-hokubu-line); }

/* 乗り場の名前。発車時刻のすぐ上に書く */
.bus-from {
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.bus-from span {
  font-size: 14px;
  color: var(--b-sub);
}

.bus-dep {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
}

.bus-dep b {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bus-dep span { font-size: 18px; }

/* 「つぎ」が1台だけのときは、時刻をいちばん大きく */
.bus-card.is-first:not(.is-twin) .bus-dep b {
  font-size: 64px;
  line-height: 1.1;
}

.bus-card.is-first:not(.is-twin) .bus-dep span { font-size: 22px; }

.bus-plan {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--k-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bus-plan > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.bus-plan dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--b-sub);
}

.bus-plan dd {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 18px;
  font-weight: 700;
}

.bus-plan .bus-at {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* 見比べ用のもう1案（bus.html?color=chip）: 段は塗らず、札だけにチラシの色を付ける */
.is-color-chip .bus-buses { gap: 12px; }

.is-color-chip .bus-bus {
  padding: 12px 0 0;
  background: transparent;
  border-top: 1px solid var(--b-rule);
  border-radius: 0;
}

.is-color-chip .bus-kind { background: var(--k-fill); }
.is-color-chip .bus-plan { border-top-color: var(--b-rule); }

.bus-detour {
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid var(--b-ink);
  border-radius: 4px;
}

.bus-aside {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--b-rule);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.bus-last {
  margin: 16px 20px 0;
  font-size: 17px;
  font-weight: 700;
}

.bus-notes {
  list-style: none;
  margin: 16px 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bus-notes li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  font-size: 16px;
  line-height: 1.7;
}

.bus-notes svg {
  margin-top: 4px;
  color: var(--b-gold-ink);
}

.bus-notes span { text-wrap: pretty; }

/* ── この区間のすべての時刻 ── */
.bus-all {
  margin: 24px 16px 0;
  background: var(--b-paper);
  border: 1.5px solid var(--b-edge);
  border-radius: 6px;
  overflow: hidden;
}

.bus-all summary {
  min-height: 52px;
  padding: 0 14px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.bus-all summary::-webkit-details-marker { display: none; }
.bus-all summary:hover { background: var(--b-gold-soft); }
.bus-all summary svg { transition: transform 0.2s; }
.bus-all[open] summary svg { transform: rotate(180deg); }

.bus-all-body {
  padding: 4px 16px 12px;
  border-top: 1px solid var(--b-rule);
}

.bus-all-head,
.bus-all-row {
  display: grid;
  grid-template-columns: 64px 64px minmax(0, 1fr);
  gap: 8px;
}

.bus-all-head {
  padding: 8px 0;
  border-bottom: 1.5px solid var(--b-edge);
  font-size: 14px;
  font-weight: 700;
  color: var(--b-sub);
}

.bus-all-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--b-rule);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.bus-all-row:last-child { border-bottom: 0; }
.bus-all-row b { font-weight: 700; }

.bus-noscript {
  margin: 16px 16px 0;
  padding: 16px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.7;
}

/* ── その下の章 ── */
.bus-sections {
  padding: 32px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 16px;
  line-height: 1.7;
}

.bus-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bus-section p { margin: 0; }

.bus-h2 {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.35;
}

/* 臨時便が回る順。番号の丸を線でつなぐ（色は臨時便の水色） */
.bus-loop {
  list-style: none;
  margin: 0;
  padding: 16px 16px 16px 12px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.bus-loop li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
}

.bus-loop-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bus-loop-num {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  color: var(--b-ink);
  background: var(--b-rinji);
  border: 2px solid var(--b-rinji-line);
  border-radius: 50%;
}

.bus-loop li:not(:last-child) .bus-loop-rail::after {
  content: '';
  flex: 1;
  width: 4px;
  min-height: 14px;
  background: var(--b-rinji-line);
}

.bus-loop-stop {
  padding: 2px 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.bus-loop li:last-child .bus-loop-stop { padding-bottom: 2px; }

.bus-loop-stop small {
  font-size: 14px;
  font-weight: 700;
  color: var(--b-red-ink);
}

.bus-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bus-points li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
}

.bus-points li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 11px;
  background: var(--b-ink);
}

.bus-link {
  color: var(--b-red-ink);
  font-weight: 700;
}

/* 料金 */
.bus-fare {
  padding: 4px 16px;
  background: var(--b-paper);
  border: 1px solid var(--b-rule);
  border-radius: 8px;
}

.bus-fare table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.bus-fare th,
.bus-fare td {
  padding: 12px 0 12px 8px;
  border-bottom: 1px solid var(--b-rule);
  text-align: right;
  font-weight: 400;
}

.bus-fare tbody tr:last-child th,
.bus-fare tbody tr:last-child td { border-bottom: 0; }

.bus-fare thead th,
.bus-fare thead td {
  width: 84px;
  padding: 10px 0 10px 8px;
  border-bottom: 1.5px solid var(--b-edge);
  font-size: 14px;
  font-weight: 700;
  color: var(--b-sub);
}

.bus-fare thead td { width: auto; }

.bus-fare tbody th {
  padding-left: 0;
  text-align: left;
  font-weight: 700;
}

.bus-buy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bus-buy-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--b-sub);
}

.bus-page .site-footer { margin-top: 32px; }