/* 鉄分補給 リニューアル案 — 共通スタイル
   書体：BIZ UDPゴシック（駅の案内サインに近いUD書体）＋ DotGothic16（発車標のドット表示） */
:root {
  --ground: #E9EAE6;
  --surface: #FFFFFF;
  --ink: #16191D;
  --ink-2: #3D434A;
  --muted: #4A5058;
  --line: #D9DCD8;
  --line-2: #E1E3DE;
  --board: #0C0D0E;
  --board-frame: #2E3236;
  --board-rule: #1E2124;
  --led-amber: #FFB020;
  --led-white: #E8E8E2;
  --led-red: #FF4B3A;
  --led-orange: #FF9A1F;
  --led-green: #3BD16F;
  --sign: #26292D;
  --accent: #1E5AA0;
  --news: #C23B2E;
  --column: #D9581F;
  --ekiben: #2B8A4E;
  --ticket: #DCEEE1;
  --ticket-line: #93BFA0;
  --paper: #F6EFDF;
  --paper-red: #A8322A;
  --radius: 8px;
  --font: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --dot: "DotGothic16", "BIZ UDPGothic", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--led-amber); outline-offset: 2px; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.dot { font-family: var(--dot); }

/* ---------- 上部バー ---------- */
.topbar { background: var(--surface); border-bottom: 6px solid var(--accent); }
.topbar .wrap { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo-no { width: 44px; height: 44px; border: 4px solid var(--accent); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 700; }
.logo-no small { font-size: 9px; }
.logo-no b { font-size: 17px; }
.logo-name { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name b { font-size: 26px; letter-spacing: .2em; }
.logo-name small { font-size: 10px; font-weight: 700; letter-spacing: .35em; color: var(--muted); }
.search { flex: 1 1 380px; display: flex; align-items: center; gap: 10px; height: 50px; border: 2px solid var(--ink); border-radius: 25px; padding: 0 6px 0 18px; background: var(--surface); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; background: transparent; }
.search button { height: 38px; padding: 0 18px; border: 0; border-radius: 19px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.topbar .ext { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }

main { padding: 28px 0 56px; }
main > .wrap { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.row.top { align-items: flex-start; }
.card { background: var(--surface); border-radius: var(--radius); }
.card-h { margin: 0; padding: 14px 20px; font-size: 17px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-h small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pad { padding: 18px 20px; }
.sec-h { margin: 0; font-size: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec-h small { font-size: 13px; font-weight: 400; color: var(--muted); }

/* ---------- 発車標 ---------- */
.board { background: var(--board); border: 8px solid var(--board-frame); border-radius: var(--radius); color: #fff; }
.board-h { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px; border-bottom: 2px solid #26292D; gap: 8px; flex-wrap: wrap; }
.board-h h2 { margin: 0; font-size: 17px; }
.board-h .dot { color: var(--led-amber); font-size: 18px; }
.board ul, .list { list-style: none; margin: 0; padding: 0; }
.board li { border-top: 1px solid var(--board-rule); }
.board li a { display: flex; gap: 16px; padding: 10px 20px; align-items: baseline; font-family: var(--dot); flex-wrap: wrap; }
.board .t { width: 112px; flex: none; }
.board .d { width: 54px; flex: none; color: var(--led-white); }
.board .ttl { flex: 1; min-width: 220px; color: var(--led-amber); }
.board .op { color: var(--led-white); font-size: 14px; }

/* 本日 */
.today { flex: 3 1 520px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.today .meta { display: flex; justify-content: space-between; font-family: var(--dot); color: var(--led-white); flex-wrap: wrap; gap: 8px; }
.today .big { font-family: var(--dot); color: var(--led-amber); font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }
.today .headline { font-size: clamp(19px, 2.2vw, 25px); font-weight: 700; line-height: 1.5; }
.today .go { color: var(--led-amber); font-weight: 700; font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); border: 1px solid #C9CCC6; border-radius: 3px; padding: 2px 8px; white-space: nowrap; background: var(--surface); }
.chip.dark { color: var(--led-white); border-color: #44484D; background: transparent; font-size: 13px; padding: 4px 10px; }
.chip .dotc { width: 9px; height: 9px; border-radius: 50%; flex: none; }
a.chip:hover { border-color: var(--ink); }

/* 各社の動き */
.ops-box { display: flex; flex-direction: column; gap: 12px; }
.ops { display: flex; flex-wrap: wrap; gap: 8px; }
.op { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--ink); border-radius: 19px; background: var(--surface); font-weight: 700; font-size: 14px; white-space: nowrap; }
.op:hover { background: #FFF6D6; }
.op .dotc { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.op .n { font-family: var(--dot); font-weight: 400; font-size: 15px; min-width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 13px; padding: 0 6px; background: var(--board); color: var(--led-amber); }
.op.off { border-color: #D3D6D0; color: #8A8F94; background: #F4F5F2; }
.op.off .n { background: var(--line-2); color: #8A8F94; }

/* 運行記録 */
.log { flex: 3 1 560px; min-width: 0; overflow: hidden; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #B9BEB8; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.tab[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.entry { border-bottom: 1px solid var(--line-2); }
.entry a.main { display: flex; gap: 14px; padding: 13px 20px 6px; align-items: flex-start; }
.entry .d { font-family: var(--dot); font-size: 15px; color: var(--muted); width: 46px; flex: none; padding-top: 2px; }
.entry .ttl { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.entry .chips { padding: 0 20px 12px 80px; }
.kind { flex: none; font-size: 12px; font-weight: 700; color: #fff; border-radius: 3px; padding: 3px 8px; margin-top: 2px; white-space: nowrap; }
.kind.news { background: var(--news); }
.kind.column { background: var(--column); }
.kind.ekiben, .kind.ekisoba, .kind.gourmet { background: var(--ekiben); }
.kind.onsen { background: #7B55B5; }
.more { display: block; width: 100%; height: 48px; border: 0; border-top: 1px solid var(--line); background: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }

/* カレンダー */
.cal { flex: 2 1 340px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-head button { width: 44px; height: 36px; border: 1px solid #B9BEB8; border-radius: 4px; background: var(--surface); font: inherit; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.cal-grid .w { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-grid .w.sun, .cal-day.sun { color: #B3261E; }
.cal-grid .w.sat, .cal-day.sat { color: #1F5FAD; }
.cal-day { height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--dot); font-size: 14px; background: #F4F5F2; border: 0; padding: 0; cursor: default; }
.cal-day.ev { background: var(--board); color: var(--led-amber); cursor: pointer; }
.cal-day.today { outline: 2px solid var(--led-amber); outline-offset: 1px; }
.cal-day.empty { background: transparent; }
.cal-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; max-height: 360px; overflow: auto; }
.cal-list li a { display: flex; gap: 10px; }
.cal-list .dot { width: 42px; flex: none; }

/* 駅の名物：駅の売店（黄緑のドット帯の看板・冷蔵ケース・新聞ラック） */
.kiosk { --ks-lime: #8FD833; --ks-booth: #F2F3EF; --ks-dark: #1B1D20; background: var(--ks-booth); border: 1px solid #D5D8D2; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 0 -4px #C9CCC6; }
.ks-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px;
  background: radial-gradient(circle, #6FBF1F 1.6px, transparent 2px) 0 0 / 8px 8px, var(--ks-lime); border-bottom: 6px solid #FFFFFF; box-shadow: 0 6px 12px -6px rgba(255,255,230,.9); }
.ks-picto { display: flex; gap: 8px; }
.ks-picto span { width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--ks-dark); color: #fff; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.65); }
.ks-picto small { font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.ks-logo { margin: 0; padding: 10px 34px; background: var(--ks-dark); color: #fff; border-radius: 999px; font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; letter-spacing: .22em; white-space: nowrap; box-shadow: inset 0 0 0 2px #3A3E43; }
.ks-note { margin: 0; justify-self: end; padding: 6px 12px; background: rgba(255,255,255,.85); border-radius: 4px; font-size: 13px; font-weight: 700; color: var(--ks-dark); }
.ks-note b { font-family: var(--dot); font-weight: 400; font-size: 17px; }
.ks-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); gap: 16px; padding: 18px 16px 18px; background: linear-gradient(#FFFFFF, var(--ks-booth) 40px); }
.ks-label { display: inline-block; align-self: flex-start; padding: 3px 12px; background: #2E9E4F; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; border-radius: 2px; }
/* 冷蔵ケース：暗い枠＋白く明るい庫内＋ガラスの映り込み */
.ks-case { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; background: #2F3337; border-radius: 6px; box-shadow: inset 0 0 0 3px #45494E, 0 4px 8px rgba(0,0,0,.18); }
.ks-case::after { content: ""; position: absolute; inset: 40px 12px 12px; pointer-events: none; border-radius: 3px;
  background: linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.22) 18% 21%, transparent 21% 58%, rgba(255,255,255,.14) 58% 60%, transparent 60%); }
.ks-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; padding: 16px 8px 0; background: linear-gradient(#FFFFFF, #EEF3F6); border-radius: 3px; box-shadow: inset 0 0 18px rgba(170,200,220,.45); }
.ks-item { display: flex; flex-direction: column; gap: 7px; padding: 0 8px; color: var(--ink); }
.ks-pack { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 4px; background: #E8DDC6; box-shadow: 0 6px 8px -4px rgba(0,0,0,.35); transition: transform .15s ease; }
.ks-pack img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.ks-pack.noimg { display: flex; align-items: center; justify-content: center; background: var(--paper); outline: 3px solid var(--paper-red); outline-offset: -8px; }
.ks-pack.noimg b { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 28px; color: var(--paper-red); letter-spacing: .1em; }
.ks-pop { position: absolute; top: 7px; left: -5px; padding: 2px 8px; background: #FFE14A; color: #C0261C; font-size: 11px; font-weight: 700; border-radius: 2px; transform: rotate(-4deg); box-shadow: 0 2px 3px rgba(0,0,0,.25); }
.ks-item:hover .ks-pack, .ks-item:focus-visible .ks-pack { transform: translateY(-4px); }
.ks-name { font-size: 13.5px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.ks-item:hover .ks-name { text-decoration: underline; text-underline-offset: 3px; }
/* 棚の縁（銀色）と値札：隣とつながって1本の棚になる */
.ks-tag { margin: auto -8px 0; padding: 4px 8px 6px; border-top: 4px solid #B9C0C6; background: linear-gradient(#DDE2E6, #F4F6F7); display: flex; }
.ks-tag > * { font-size: 11.5px; padding: 1px 7px; background: #fff; border: 1px solid #C3C8CC; }
.ks-tag b { color: #C0261C; border-right: 0; border-radius: 2px 0 0 2px; }
.ks-tag span { font-family: var(--dot); border-radius: 0 2px 2px 0; }
/* 新聞ラック：金網に新聞を差す */
.ks-rack { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 6px; border: 2px solid #A9AFB4;
  background: repeating-linear-gradient(0deg, #B7BCC0 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, #B7BCC0 0 1px, transparent 1px 14px), #F7F8F6; }
.ks-papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ks-papers a { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 8px; min-height: 58px; background: #FBFAF5; border: 1px solid #D4D2C8; border-radius: 1px; box-shadow: 2px 2px 0 #D9D7CD; color: var(--ink); }
.ks-papers a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #C0261C; }
.ks-papers b { font-size: 17px; letter-spacing: .08em; line-height: 1.2; }
.ks-papers small { font-family: var(--dot); font-size: 12px; color: #C0261C; }
.ks-papers a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ks-papers a.zero { opacity: .55; }
.ks-papers a.zero::before { background: #9AA0A5; }
.ks-papers a.zero small { color: var(--muted); }
@media (max-width: 900px) {
  .ks-body { grid-template-columns: 1fr; }
  .ks-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ks-head { grid-template-columns: 1fr; justify-items: center; padding: 10px; gap: 8px; }
  .ks-picto { order: 2; } .ks-picto span { width: 46px; height: 46px; } .ks-picto svg { width: 22px; height: 22px; }
  .ks-note { justify-self: center; order: 3; }
  .ks-logo { padding: 8px 26px; }
  .ks-body { padding: 12px 10px; }
  .ks-case { padding: 8px 8px 10px; } .ks-case::after { inset: 36px 8px 10px; }
  .ks-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 4px 0; }
  .ks-item { padding: 0 6px; } .ks-tag { margin: auto -6px 0; padding: 4px 6px 5px; }
  .ks-name { font-size: 13px; } .ks-pack.noimg b { font-size: 22px; }
  .ks-papers b { font-size: 15px; }
}

/* 検索ポップアップの候補 */
.suggest { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.suggest a { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--ink); }
.suggest li:first-child a { border-top: 0; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: #FFF6D6; }
.suggest .k { flex: none; min-width: 3em; font-size: 11px; font-weight: 700; color: #fff; background: var(--sign); border-radius: 3px; padding: 2px 6px; text-align: center; }
.suggest b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest small { margin-left: auto; font-family: var(--dot); color: var(--muted); font-size: 12px; }
.chip.dark small { font-family: var(--dot); opacity: .75; }

/* ---------- 個別ページ ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; font-size: 13px; font-weight: 700; }
.crumbs a, .crumbs span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.crumbs .st { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--column); background: #fff; flex: none; }
.crumbs .rail { width: 36px; height: 3px; background: var(--column); margin: 0 6px; }
.crumbs .cur { color: var(--ink); }
.crumbs .cur .st { background: var(--column); }
.target { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: 2px solid #26292D; }
.target > * { padding: 12px 18px; border-right: 1px solid #26292D; display: flex; flex-direction: column; gap: 2px; }
.target small { font-size: 11px; color: #9AA0A6; }
.target b { font-family: var(--dot); font-weight: 400; font-size: 18px; }
.post-head { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.post-head h1 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; }
.post-head .meta { font-family: var(--dot); font-size: 14px; color: var(--led-white); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.fact { background: var(--surface); border-radius: var(--radius); padding: 14px 18px; border-top: 5px solid var(--news); display: flex; flex-direction: column; gap: 2px; }
.fact small { font-size: 12px; color: var(--muted); font-weight: 700; }
.fact b { font-family: var(--dot); font-weight: 400; font-size: 28px; line-height: 1.2; }
.fact span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.body { padding: 24px 28px; font-size: 17px; line-height: 1.95; display: flex; flex-direction: column; gap: 14px; }
.body p { margin: 0; }
.body .src { font-size: 13px; color: var(--muted); }
.body .src a { text-decoration: underline; }
/* 記事作成ツールで作った記事（見出し・表つき） */
.body .lead { font-weight: 700; }
.body .rich { display: flex; flex-direction: column; gap: 14px; }
.body .rich h2 { margin: 12px 0 0; font-size: 19px; line-height: 1.5; padding-left: 12px; border-left: 5px solid var(--accent); }
.body .rich h3 { margin: 6px 0 0; font-size: 17px; }
.body .rich ul, .body .rich ol { margin: 0; padding-left: 1.4em; }
.body .rich table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; display: block; overflow-x: auto; }
.body .rich th, .body .rich td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.body .rich th { background: var(--ground); white-space: nowrap; }
.body .rich a { text-decoration: underline; }
.qa { background: var(--ticket); border: 1px solid var(--ticket-line); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; color: #16302A; }
.qa h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.qa p { margin: 0; display: flex; gap: 12px; line-height: 1.85; }
.qa p .dot { font-size: 20px; width: 22px; flex: none; }
.qa .q { font-weight: 700; }
.qa .note { font-size: 12px; color: #3A5A48; }
.diagram { overflow-x: auto; }
.diagram .stops { display: grid; min-width: 640px; }
.diagram .stop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.diagram .track { position: relative; width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; }
.diagram .track i { position: absolute; top: 10px; height: 6px; }
.diagram .track i.l { left: 0; right: 50%; }
.diagram .track i.r { left: 50%; right: 0; }
.diagram .track b { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 5px solid; background: #fff; }
.diagram .nm { font-weight: 700; font-size: 15px; text-align: center; line-height: 1.3; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; }
.timeline .tl-rail { display: flex; flex-direction: column; align-items: center; width: 18px; flex: none; }
.timeline .tl-rail b { width: 16px; height: 16px; border-radius: 50%; border: 4px solid; background: #fff; flex: none; }
.timeline .tl-rail i { flex: 1; width: 4px; }
.timeline li:last-child .tl-rail i { display: none; }
.timeline a { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; }
.timeline .dot { font-size: 13px; color: var(--muted); }
.timeline .ttl { font-size: 13.5px; line-height: 1.55; }
.timeline .cur .ttl { font-weight: 700; }
.nextprev { border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.nextprev .lbl { text-align: center; padding: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.nextprev .band { display: flex; flex-wrap: wrap; color: #fff; }
.nextprev .band a, .nextprev .band span { flex: 1 1 260px; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.nextprev .band > *:last-child { align-items: flex-end; text-align: right; border-left: 2px solid #fff; }
.nextprev small { font-size: 12px; font-weight: 700; }
.nextprev b { font-size: 14px; line-height: 1.5; }
.side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; }
.mainc { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* 駅名標ヒーロー（駅・駅弁） */
.ekimeihyo { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ekimeihyo .top { display: flex; justify-content: space-between; padding: 12px 18px 0; font-size: 13px; font-weight: 700; flex-wrap: wrap; gap: 8px; }
.ekimeihyo .name { display: flex; flex-direction: column; align-items: center; padding: 6px 20px 16px; line-height: 1.15; }
.ekimeihyo .name h1 { margin: 0; font-size: clamp(44px, 8vw, 72px); letter-spacing: .3em; padding-left: .3em; }
.ekimeihyo .name small { font-size: 13px; font-weight: 700; letter-spacing: .4em; color: var(--muted); }
.ekimeihyo .band { color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; font-weight: 700; gap: 12px; flex-wrap: wrap; }
.kakegami { background: var(--paper); border-radius: var(--radius); padding: 12px; }
.kakegami > div { border: 3px solid var(--paper-red); padding: 6px; }
.kakegami > div > div { border: 1px solid var(--paper-red); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.kakegami .rg { font-size: 13px; font-weight: 700; color: var(--paper-red); letter-spacing: .3em; }
.kakegami h2 { margin: 0; font-family: "Yuji Syuku", serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.35; color: #2A1A14; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; border: 2px solid var(--ink); }
.spec th { text-align: left; padding: 9px 12px; background: #F1F2EE; width: 34%; border-bottom: 1px solid #C9CCC6; }
.spec td { padding: 9px 12px; border-bottom: 1px solid #C9CCC6; }

/* 形式板・路線ヒーロー */
.hero-plate { background: var(--board); color: #fff; border: 8px solid var(--board-frame); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.hero-plate h1 { margin: 0; font-family: var(--dot); font-weight: 400; font-size: clamp(40px, 7vw, 68px); color: var(--led-amber); line-height: 1.1; }
.hero-plate .sub { color: var(--led-white); font-size: 14px; }
.hero-line { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.hero-line .h { padding: 22px 26px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-line h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: .1em; }
.hero-line .band { height: 12px; }
.sym { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; border: 5px solid; font-weight: 700; font-size: 20px; flex: none; background: #fff; }

.empty-note { padding: 20px; color: var(--muted); font-size: 14px; }
footer { background: var(--ink); color: #C9CDC8; font-size: 13px; }
footer .wrap { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
footer .dot { color: var(--led-amber); font-size: 16px; }
footer a { text-decoration: underline; }

@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .topbar .wrap { gap: 10px; }
  .topbar .ext { display: none; }
  .logo-name b { font-size: 22px; }
  .search { flex-basis: 100%; height: 46px; }
  main { padding-top: 16px; }
  main > .wrap { gap: 18px; }
  .today { padding: 18px; }
  .board li a { gap: 6px 12px; padding: 10px 14px; }
  .board .ttl { min-width: 100%; order: 3; }
  .entry .chips { padding-left: 20px; }
  .entry a.main { flex-wrap: wrap; gap: 6px 10px; }
  .entry .ttl { flex-basis: 100%; }
  .ops { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .ops::-webkit-scrollbar { display: none; }
  .line-row .nm { width: 96px; font-size: 13px; }
  .body { padding: 18px; font-size: 16px; }
  .post-head { padding: 16px 18px 20px; }
  .nextprev .band > *:last-child { border-left: 0; border-top: 2px solid #fff; }
}

.today .feature { display: flex; flex-direction: column; gap: 12px; color: inherit; }
.today .feature:hover .headline { text-decoration: underline; text-underline-offset: 4px; }
.today-more { margin: auto 0 0; padding: 6px 0 0; list-style: none; display: flex; flex-direction: column; border-top: 2px solid #26292D; font-family: var(--dot); }
.today .today-more li { border-top: 0; }
.today .today-more a { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--board-rule); color: var(--led-amber); font-size: 15px; }
.today-more a:hover { background: #1A1C1F; }
.today-more a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.today-more b { font-weight: 400; width: 104px; flex: none; }
.today-more span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .today-more span { white-space: normal; } .today-more b { width: 6.2em; } }
.side .board .ttl { min-width: 0; flex-basis: 100%; font-size: 14px; }
.side .board li a { gap: 2px 12px; }
.search { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .search { flex: 1 1 100%; } .search input::placeholder { font-size: 13px; } }

/* ===== Worker 版で足したもの ===== */
/* 絞り込み・月送り・もっと見る：JSなしのリンクに */
a.tab { display: inline-flex; align-items: center; }
.tab[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.cal-head a, .cal-head .off { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 36px; border: 1px solid #B9BEB8; border-radius: 4px; background: var(--surface); }
.cal-head .off { opacity: .35; }
a.cal-day { text-decoration: none; }
a.more { display: flex; align-items: center; justify-content: center; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); font-weight: 700; }
.pager a { color: var(--accent); }

/* 記事の部品（同期のときに本文から分解したもの） */
.sources h2, .videos h2, .reactions h2 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: baseline; gap: 10px; }
.sources h2 small, .reactions h2 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.sources ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sources li a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 6px; background: #FAFAF8; }
.sources li b { font-size: 15px; line-height: 1.5; }
.sources .by { font-size: 12px; color: var(--muted); }
.videos .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.videos figure { margin: 0; }
.videos .yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.videos iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videos figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.videos figcaption a { color: var(--accent); text-decoration: underline; white-space: nowrap; }
.images h2 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: baseline; gap: 10px; }
.images h2 small { font-size: 12px; color: var(--muted); font-weight: 400; }
/* 行の高さは一番縦長の画像に合わせて伸びるので、各画像は上ぞろえ・自分の高さのまま（灰色の余白を出さない） */
.images .igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 600px) { .images .igrid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.images .igrid a { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.images .igrid img { display: block; width: 100%; height: auto; }
.images .igrid a { cursor: zoom-in; }

/* 画像のポップアップ（lightbox.js） */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12, 13, 14, .94); color: var(--led-white); display: grid; grid-template-rows: auto 1fr; }
.lb:not([open]) { display: none; }
.lb::backdrop { background: transparent; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.lb-count { font-family: var(--dot); color: var(--led-amber); letter-spacing: .08em; }
.lb-close, .lb-nav { background: rgba(46, 50, 54, .8); color: var(--led-white); border: 1px solid var(--board-frame); border-radius: 999px;
  width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lb-close:hover, .lb-nav:hover { background: var(--board-frame); }
.lb-fig { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 64px 16px; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 4px; background: var(--board); }
.lb-fig figcaption { margin-top: 8px; font-size: .9rem; color: var(--led-white); opacity: .85; text-align: center; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-nav[hidden] { display: none; }
@media (max-width: 600px) {
  .lb-fig { padding: 0 8px 64px; }
  .lb-nav { top: auto; bottom: 12px; transform: none; }
  .lb-prev { left: calc(50% - 56px); }
  .lb-next { right: calc(50% - 56px); }
}
.images .media-note a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.media-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.reactions ul { margin: 0; padding: 0; list-style: none; }
/* 関連する記事（路線の経過・駅・形式・会社を1か所に。見た目は経過のタイムラインと同じ白いカードにそろえる） */
.rel > h2 { margin: 0 0 16px; font-size: 17px; }
.rel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px 28px; align-items: start; }
.rel-g h3 { margin: 0 0 10px; padding: 0 0 8px 10px; border-left: 5px solid var(--c, var(--accent)); border-bottom: 1px solid var(--line-2); font-size: 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rel-g h3 a { flex: none; font-family: var(--dot); font-weight: 400; font-size: 12px; color: var(--accent); }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 9px 2px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.rel-list .dot { font-size: 12px; color: var(--muted); }
.rel-list .kind { justify-self: start; margin-top: 0; font-size: 11px; padding: 1px 6px; grid-column: 2; grid-row: 1; }
.rel-list .ttl { grid-column: 1 / -1; font-size: 14px; font-weight: 700; line-height: 1.5; }
.rel-list a:hover .ttl, .rel-g .timeline a:hover .ttl { text-decoration: underline; text-underline-offset: 3px; }
.rel-g .timeline .ttl { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.rel-g .timeline .cur .ttl { color: var(--muted); }
.tw-more { margin-top: 6px; }
.tw-more summary { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 20px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.tw-more summary::-webkit-details-marker { display: none; }
.tw-more[open] summary { display: none; }

/* Xの反応：公式埋め込み。読み込み前・読めないときの blockquote もカードに見せる */
.tw-embeds { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.tw-embeds .twitter-tweet:not(.twitter-tweet-rendered) { position: relative; margin: 8px 0; padding: 16px 18px 14px 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; color: var(--muted); }
.tw-embeds .twitter-tweet:not(.twitter-tweet-rendered)::before { content: "\201C"; position: absolute; left: 12px; top: 2px; font-size: 44px; line-height: 1; color: #C9CDD1; font-family: Georgia, serif; }
.tw-embeds .twitter-tweet p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--ink); word-break: break-word; }
.tw-embeds .twitter-tweet a { color: var(--accent); }

/* ===== 広告枠 ===== */
.ad { display: flex; flex-direction: column; gap: 4px; min-height: calc(var(--ad-h) + 22px); }
.ad-lbl { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.ad-preview .ad-box { flex: 1; min-height: var(--ad-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center;
  border: 2px dashed var(--ad-c); border-radius: 6px; color: var(--ad-c);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ad-c) 7%, #fff) 0 12px, color-mix(in srgb, var(--ad-c) 13%, #fff) 12px 24px); }
.ad-preview .ad-box b { font-size: 15px; }
.ad-preview .ad-box span { font-size: 13px; color: var(--ink-2); }
.ad-preview .ad-box small { font-size: 11px; color: var(--muted); font-family: var(--dot); }
.ad-li { list-style: none; padding: 10px 20px; border-top: 1px solid var(--line-2); }
.ad.sticky { position: sticky; top: 16px; }
.partner-banners { display: flex; flex-direction: column; gap: 8px; position: relative; }
.partner-blogroll { display: flex; justify-content: space-between; }
.ad-anchor-preview { display: none; }
@media (max-width: 640px) {
  .ad { min-height: calc(var(--ad-hm) + 22px); }
  .ad-preview .ad-box { min-height: var(--ad-hm); }
  .ad.pc-only { display: none; }
  .ads-preview { padding-bottom: 64px; }
  .ad-anchor-preview { display: flex; align-items: center; justify-content: center; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; padding: 0 12px; z-index: 50;
    background: repeating-linear-gradient(-45deg, #EDE7F6 0 12px, #E1D8F1 12px 24px); border-top: 2px dashed #6A4FB0; color: #4B3590; font-size: 12px; text-align: center; }
}

/* ===== サムネイル ===== */
.entry.has-th a.main { align-items: flex-start; }
/* トップの運行記録はタグを出さず1本を低く（タグは記事・一覧ページで） */
.log .entry .chips { display: none; }
.log .entry a.main { padding-bottom: 13px; }
.entry .th { margin-left: auto; width: 96px; height: 54px; flex: none; object-fit: cover; border-radius: 4px; background: #DDD; }
.body .eyecatch { margin: 0 0 6px; }
.body .eyecatch img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 6px; background: #DDD; }
@media (max-width: 640px) {
  .entry.has-th a.main { position: relative; padding-right: 92px; }
  .entry .th { position: absolute; right: 20px; top: 13px; width: 64px; height: 36px; }
}

/* ===== 固定ページ・お問い合わせ・共有ボタン・フッター ===== */
.page-html h2 { font-size: 20px; margin: 18px 0 4px; padding-left: 12px; border-left: 6px solid var(--accent); }
.page-html h3 { font-size: 17px; margin: 12px 0 2px; }
.page-html a { color: var(--accent); text-decoration: underline; }
.page-html ul, .page-html ol { margin: 0; padding-left: 1.4em; }
.page-html table { border-collapse: collapse; } .page-html th, .page-html td { border: 1px solid var(--line); padding: 6px 10px; }
.contact { display: flex; flex-direction: column; gap: 16px; }
.contact .f { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.contact .f b { font-size: 11px; color: #fff; background: var(--news); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.contact input, .contact select, .contact textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1px solid #9AA09A; border-radius: 6px; background: #fff; width: 100%; }
.contact [aria-invalid="true"] { border-color: var(--news); border-width: 2px; }
.contact .f-err { color: var(--news); font-size: 13px; font-weight: 700; margin: 0; }
.contact .f-note, .contact .f-post { font-size: 13px; color: var(--muted); margin: 0; }
.contact .f-note a, .contact .f-post a { color: var(--accent); text-decoration: underline; }
.contact button { align-self: flex-start; height: 48px; padding: 0 32px; border: 0; border-radius: 24px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks h2 { margin: 0 0 8px; font-size: 20px; } .thanks a { color: var(--accent); text-decoration: underline; }
.share { display: flex; flex-wrap: wrap; gap: 10px; }
.share a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; font-weight: 700; font-size: 14px; }
.share .btn-x { background: #0F1419; color: #fff; }
.share .btn-q { background: var(--ticket); color: #16302A; border: 1px solid var(--ticket-line); }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
footer .foot-links a { text-decoration: underline; text-underline-offset: 3px; }
footer .copy small { opacity: .7; }
footer .credit { font-size: 12px; opacity: .7; }
footer .credit a { text-decoration: underline; text-underline-offset: 2px; }
.contact, .thanks { max-width: 760px; }

/* ===== パタパタ（反転フラップ式）発車標 ===== */
.flapboard { padding: 18px 20px 20px; gap: 10px; background: #1A1B1D; border-color: #3A3D41; container-type: inline-size; }
.flap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 12px; border-radius: 4px; color: #F4F4F0;
  font-family: var(--font); font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #2A2B2E 0%, #222326 49.2%, #0A0A0B 49.2%, #0A0A0B 50.8%, #1C1D20 50.8%, #17181A 100%);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.6);
  transform-origin: 50% 50%;
}
/* 板の左右の軸（ヒンジ） */
.flap::before, .flap::after { content: ""; position: absolute; top: calc(50% - 4px); width: 3px; height: 8px; background: #4A4C50; border-radius: 1px; }
.flap::before { left: 2px; } .flap::after { right: 2px; }
.flap.flip { animation: flapdown .09s ease-in; }
@keyframes flapdown { 0% { transform: perspective(300px) rotateX(0); } 50% { transform: perspective(300px) rotateX(-80deg); filter: brightness(.6); } 100% { transform: perspective(300px) rotateX(0); } }
.flap.kind { width: 76px; padding: 0; font-size: 20px; }
.flap.k-red   { background: linear-gradient(180deg, #D7262E 0 49.2%, #5A0C10 49.2% 50.8%, #C51F27 50.8%); }
.flap.k-blue  { background: linear-gradient(180deg, #1F63B6 0 49.2%, #0A2246 49.2% 50.8%, #1A57A3 50.8%); }
.flap.k-green { background: linear-gradient(180deg, #23864A 0 49.2%, #0A3018 49.2% 50.8%, #1E7841 50.8%); }
.flap.d { width: 30px; padding: 0; font-size: 24px; font-variant-numeric: tabular-nums; }
.ftime { display: inline-flex; gap: 3px; align-items: center; }
.ftime .colon { color: #F4F4F0; font-weight: 700; font-size: 22px; margin: 0 1px; }
.flap.dest { display: block; min-width: 0; padding: 0 14px; line-height: 46px; font-size: 19px; text-overflow: ellipsis; text-align: left; }
.flap.op { width: 128px; font-size: 14px; font-weight: 400; color: #E8E8E2; }
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-msg { min-height: 54px; padding: 0 18px; font-size: clamp(24px, 3.4vw, 34px); color: #FFD24A; }
.fb-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--dot); color: var(--led-white); font-size: 14px; }
.fb-n { color: var(--led-green); }
.fb-cols { display: grid; grid-template-columns: 52px 76px 168px 1fr 128px; gap: 10px; font-size: 11px; color: #9EA2A6; letter-spacing: .3em; padding: 2px 0 0; }
.fb-cols span:first-child { grid-column: 2; } .fb-cols span:nth-child(2) { grid-column: 3; } .fb-cols span:nth-child(3) { grid-column: 4; } .fb-cols span:nth-child(4) { grid-column: 5; }
.frow { display: grid; grid-template-columns: 52px 76px 168px 1fr 128px; gap: 10px; align-items: center; color: inherit; }
.frow .order { font-size: 13px; color: #C9CDC8; font-weight: 700; text-align: center; border: 1px solid #44484D; border-radius: 3px; padding: 3px 0; }
.frow.first .flap { min-height: 58px; }
.frow.first .flap.dest { font-size: 23px; line-height: 58px; }
.frow.first .flap.d { width: 36px; font-size: 30px; }
.frow.first .order { color: #FFD24A; border-color: #FFD24A; }
.frow:hover .flap.dest, .frow:focus-visible .flap.dest { color: #FFD24A; }
.fb-detail { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px 62px; padding: 10px 14px; border-left: 3px solid #FFD24A; background: #121314; border-radius: 0 4px 4px 0; }
.fb-detail .headline { font-size: 17px; font-weight: 700; line-height: 1.55; color: #F4F4F0; }
.fb-detail:hover .headline { text-decoration: underline; text-underline-offset: 4px; }
/* 盤面が狭いときは「会社」列を省く */
@container (max-width: 860px) {
  .fb-cols, .frow { grid-template-columns: 52px 76px 168px 1fr; }
  .fb-cols span:nth-child(4), .frow .flap.op { display: none; }
}
@media (max-width: 640px) {
  .flapboard { padding: 14px 12px 16px; }
  .fb-cols { display: none; }
  .frow { grid-template-columns: 44px 62px 1fr; grid-template-areas: "o k t" "d d d"; row-gap: 6px; }
  .frow .order { grid-area: o; font-size: 11px; } .frow .flap.kind { grid-area: k; width: 62px; font-size: 16px; min-height: 40px; }
  .frow .ftime { grid-area: t; } .frow .flap.dest { grid-area: d; font-size: 16px; min-height: 42px; }
  .frow .flap.op { display: none; }
  .frow.first .flap.dest { font-size: 18px; min-height: 48px; line-height: 48px; }
  .frow .flap.d { width: 26px; font-size: 20px; min-height: 40px; } .frow.first .flap.d { width: 30px; font-size: 24px; min-height: 46px; }
  .fb-detail { margin-left: 0; }
  .fb-msg { font-size: 22px; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .flap.flip { animation: none; } }
.list .m-only { display: none; }
@media (max-width: 640px) { .frow.extra { display: none; } .list .m-only { display: block; } }

/* ===== 発車標の見出しと案内の札 ===== */
.fb-title { margin: 0; font-family: var(--dot); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); color: #F4F4F0; letter-spacing: .08em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fb-title small { font-family: var(--font); font-size: 12px; color: #9EA2A6; letter-spacing: .1em; }
.fb-badge { align-self: flex-start; display: inline-block; padding: 3px 12px; border-radius: 3px; background: #D7262E; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .1em; }

/* ===== 検索：右下の浮きボタン＋ポップオーバー ===== */
.topbar .wrap { justify-content: space-between; }
.fab-search { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; padding: 0; border: 3px solid var(--led-amber); border-radius: 28px; background: var(--board); color: var(--led-amber);
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.fab-search:hover { background: #22252A; }
.ads-preview .fab-search { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 641px) { .ads-preview .fab-search { bottom: 20px; } }
.search-pop { position: fixed; inset: 12vh auto auto 50%; transform: translateX(-50%); margin: 0; width: min(680px, calc(100vw - 32px));
  padding: 22px 22px 16px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.search-pop::backdrop { background: rgba(12,13,14,.55); }
.search-pop .search { height: 54px; }
.search-pop .search input { font-size: 17px; }
.search-hint { margin: 12px 4px 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.search-hint a { color: var(--accent); text-decoration: underline; }
.search-page { flex: none; height: 52px; width: 100%; margin-top: 6px; max-width: 680px; border-color: var(--led-amber); }
.hero-plate .search-page input { color: var(--ink); }
@media (max-width: 640px) {
  .fb-meta { flex-direction: row; align-items: baseline; gap: 12px; width: 100%; }
  .fab-search { right: 14px; width: 54px; height: 54px; }
  .search-pop { inset: 10vh auto auto 50%; padding: 18px 14px 12px; }
}

/* ---- 画面の一部だけ切り替える（public/assets/inplace.js）---- */
[hidden] { display: none !important; }
.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
a.more[aria-disabled="true"] { opacity: .7; }
.cal-head a.off { cursor: default; pointer-events: none; }
/* カレンダー：選んだ日を、塗り＋太い枠＋見出しの文字で示す（色だけに頼らない） */
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--accent); position: relative; z-index: 1; }
.cal-day.sel.today { outline-color: var(--surface); }
a.cal-day.ev:hover:not(.sel), a.cal-day.ev:focus-visible:not(.sel) { box-shadow: 0 0 0 2px var(--accent); }
.cal-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 8px 10px; background: #E8F0FA; border-left: 4px solid var(--accent); border-radius: 4px; font-size: 13px; font-weight: 700; }
.cal-sel button { flex: none; height: 30px; padding: 0 10px; border: 1px solid #B9BEB8; border-radius: 4px; background: var(--surface); font: inherit; font-size: 12px; cursor: pointer; }
/* JS が無いとき：日付のリンクで飛んできた先の予定を強調する */
.cal-list li:target { background: #E8F0FA; outline: 2px solid var(--accent); border-radius: 4px; }