/* 朝の路線（docs/brand-guidelines.md §4）
   スマホを基準に書き、幅が広いときだけ @media (min-width) で足す。 */
:root {
  --paper:#fbf4e6; --card:#fffdf8; --sheet:rgba(255,253,248,.72); --sheet-line:rgba(31,45,84,.16);
  --grid:rgba(31,45,84,.12); --grid-s:rgba(31,45,84,.05);
  --ink:#1f2d54; --mist:#4f5a73; --draft:#5c6683; --line:rgba(31,45,84,.14);
  --live:#1f2d54; --live-soft:rgba(31,45,84,.08); --on-live:#fbf4e6;
  --rail:#d9d2c2; --chip:#efe6d3; --local-train:#b3aa98;
  --cta:#1f2d54; --on-cta:#fbf4e6; --express:#f2b630; --pen:#ad3b1f;
  --max:1240px; --gutter:20px; --radius:16px; --section:64px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font-family:"Zen Kaku Gothic New",sans-serif; font-size:17px; line-height:1.85; overflow-x:hidden; }
a { color:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--pen); outline-offset:3px; border-radius:6px; }
img, svg { max-width:100%; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.skip { position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:8px; z-index:20; }
.skip:focus { left:8px; }

/* 方眼 */
.grid-bg { position:fixed; inset:0; pointer-events:none; z-index:0; background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-s) 1px, transparent 1px), linear-gradient(90deg, var(--grid-s) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); }

/* ヘッダー（スマホ: ロゴ・相談する・メニュー） */
.site-header { position:sticky; top:0; z-index:10; background:rgba(251,244,230,.92); backdrop-filter:blur(8px); border-bottom:1px solid transparent; }
.site-header.is-open, .site-header.is-scrolled { border-bottom-color:var(--line); }
.site-header .wrap { display:flex; align-items:center; gap:10px; padding-top:10px; padding-bottom:10px; }
.logo { font-family:"Fraunces",serif; font-variation-settings:"opsz" 96; font-weight:700; font-size:24px; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin-right:auto; }
.logo .mark { width:28px; height:28px; color:var(--ink); }
.header-cta { min-height:44px; padding:0 18px; font-size:15px; }
.menu-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 12px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
@media (max-width: 439px) { .logo { font-size:21px; gap:7px; } .logo .mark { width:24px; height:24px; } .header-cta { padding:0 14px; font-size:15px; } .menu-btn { padding:0 10px; font-size:13px; gap:5px; } }
@media (max-width: 359px) { .menu-btn span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
.menu-btn i { display:block; width:16px; height:2px; background:currentColor; position:relative; }
.menu-btn i::before, .menu-btn i::after { content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; transition:transform .2s cubic-bezier(.16,1,.3,1); }
.menu-btn i::before { top:-5px; } .menu-btn i::after { top:5px; }
.is-open .menu-btn i { background:transparent; }
.is-open .menu-btn i::before { transform:translateY(5px) rotate(45deg); }
.is-open .menu-btn i::after { transform:translateY(-5px) rotate(-45deg); }
.site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(31,45,84,.08); }
.site-nav ul { max-width:var(--max); margin:0 auto; padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; }
.menu-scrim { position:fixed; inset:0; background:rgba(31,45,84,.28); z-index:9; }
.is-open .site-nav { display:block; }
.site-nav ul { list-style:none; padding:8px 0 16px; }
.site-nav li + li { border-top:1px solid var(--line); }
.site-nav a { display:flex; align-items:center; min-height:56px; text-decoration:none; font-size:19px; font-weight:700; color:var(--ink); }
.site-nav a[aria-current="page"] { color:var(--ink); }
.site-nav a[aria-current="page"]::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--express); margin-left:10px; }

/* ボタン */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:999px; font-weight:700; font-size:17px; text-decoration:none; transition:transform .2s cubic-bezier(.16,1,.3,1); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--cta); color:var(--on-cta); }
.btn-ghost { border:1.5px solid var(--ink); color:var(--ink); }
.btns { display:flex; flex-direction:column; gap:12px; align-items:stretch; }

/* 文字 */
.tag { font-weight:500; font-size:15px; color:var(--pen); }
.lead { color:var(--mist); font-size:18px; line-height:1.9; max-width:30em; word-break:auto-phrase; text-wrap:pretty; }
.note { font-size:16px; color:var(--mist); }
h1, h2 { font-family:"Shippori Mincho B1",serif; font-weight:800; line-height:1.3; word-break:auto-phrase; letter-spacing:0; font-feature-settings:"palt"; }
h3 { line-height:1.4; font-weight:700; word-break:auto-phrase; }

main { position:relative; z-index:2; }
section { padding:var(--section) 0; }
.section-head { margin-bottom:24px; }
.section-head h2 { font-size:clamp(28px,7.4vw,48px); }
.section-head p { margin-top:12px; }
.section-head .btns { margin-top:20px; }

/* ページ見出しの帯 */
.page-head { padding:28px 0 28px; border-bottom:1px solid var(--line); }
.page-head h1 { font-size:clamp(36px,9vw,64px); }
.page-head .lead { margin-top:12px; }

/* ヒーロー */
.hero { display:grid; gap:28px; padding:16px var(--gutter) 48px; max-width:var(--max); margin:0 auto; }
.hero h1 { font-size:clamp(28px,8.2vw,76px); line-height:1.22; margin:12px 0 16px; }
.hero h1 em { font-style:normal; white-space:nowrap; }
.hero .btns { margin-top:24px; }
.hero figure { width:100%; }
.hero figcaption { font-size:15px; }
.num { align-self:start; justify-self:start; font-family:"Fraunces",serif; font-weight:700; font-size:15px; color:var(--live); background:var(--live-soft); padding:2px 8px; border-radius:999px; }

/* 図（各駅停車と特急）: スマホは縦の図、広い画面は横の図 */
figure.sheet { background:var(--sheet); border:1px solid var(--sheet-line); border-radius:var(--radius); padding:16px 12px; }
figcaption { font-size:15px; color:var(--mist); padding:4px 6px 0; line-height:1.7; }
.fig svg { width:100%; height:auto; overflow:visible; }
.fig-h { display:none; }
.fig .dim { fill:var(--draft); font-size:14px; }
.rail-l { stroke:var(--rail); stroke-width:8; stroke-linecap:round; fill:none; }
.rail-e { stroke:var(--live); stroke-width:10; stroke-linecap:round; fill:none; }
.rail-flow { stroke:var(--paper); stroke-width:3; stroke-linecap:round; fill:none; stroke-dasharray:2 18; animation:flow 1s linear infinite; }
.stns circle { fill:var(--card); stroke:var(--ink); stroke-width:3; }
.stns .stop { fill:var(--live); }
.stns .stop-h { fill:var(--pen); }
.snm text { font-size:17px; font-weight:700; fill:var(--ink); text-anchor:middle; }
.snm .human { fill:var(--pen); }
.ai text { font-size:16px; font-weight:700; fill:var(--live); text-anchor:middle; }
.sl text { text-anchor:start; font-size:17px; }
.pass path { stroke:var(--live); stroke-width:3; stroke-linecap:round; }
.chip-l { fill:var(--chip); } .chip-l-t { font-size:15px; font-weight:700; fill:var(--mist); }
.chip-e { fill:var(--live); } .chip-e-t { font-size:15px; font-weight:700; fill:var(--on-live); }
.badge { fill:var(--live-soft); } .badge-t { font-size:15px; font-weight:700; fill:var(--live); }
.pen { font-family:"Klee One",cursive; font-weight:600; font-size:18px; fill:var(--pen); }
.tr-l { fill:var(--local-train); stroke:var(--ink); stroke-width:2; }
.tr-e { fill:var(--express); stroke:var(--ink); stroke-width:2; }
@keyframes flow { to { stroke-dashoffset:-20; } }

/* 行のリスト（カードを重ねない）: 番号は左、内容は右 */
.rows { list-style:none; border-top:1px solid var(--line); }
.rows > li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px; padding:22px 0; border-bottom:1px solid var(--line); }
.rows h3 { font-size:clamp(20px,5.4vw,26px); }
.rows p { color:var(--mist); margin-top:4px; }
.rows .meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; list-style:none; }
.rows .meta li { font-size:15px; background:var(--chip); color:var(--ink); padding:3px 10px; border-radius:999px; }
.rows a.more { display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:17px; }
.rows.compact > li { padding:16px 0; }
.rows > li:has(.num-w) { grid-template-columns:56px minmax(0,1fr); }

/* コラム（Zenn の一覧） */
.columns { list-style:none; border-top:1px solid var(--line); }
.columns[hidden] { display:none; }
.columns a { display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.columns time { font-size:15px; color:var(--mist); }
.columns .col-title { font-size:clamp(18px,4.8vw,21px); font-weight:700; line-height:1.55; }
.columns a:hover .col-title { text-decoration:underline; text-underline-offset:4px; }
.columns + .btns { margin-top:28px; }
.columns .col-src { margin-left:10px; font-size:13px; background:var(--chip); color:var(--ink); padding:1px 8px; border-radius:999px; }
.columns:empty { display:none; }
.col-sub { font-size:clamp(20px,5.4vw,24px); margin:40px 0 12px; }
.columns:empty + .col-sub { margin-top:0; }

/* コラムの本文 */
.crumb { font-size:15px; margin-bottom:10px; }
.col-date { margin-top:12px; color:var(--mist); font-size:15px; }
.column .page-head h1 { font-size:clamp(26px,6.6vw,40px); }
.prose { max-width:40em; padding:32px 0 64px; font-size:17px; line-height:2; }
.prose > * + * { margin-top:1.1em; }
.prose h2 { font-size:clamp(22px,5.8vw,28px); margin-top:2.2em; }
.prose h3 { font-size:19px; margin-top:1.8em; }
.prose ul, .prose ol { padding-left:1.4em; }
.prose a { text-decoration:underline; text-underline-offset:3px; }
.prose code { font-size:.92em; background:var(--chip); padding:1px 5px; border-radius:4px; }
.prose pre { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.7; }
.prose pre code { background:none; padding:0; }
.prose table { display:block; overflow-x:auto; border-collapse:collapse; font-size:15px; }
.prose th, .prose td { border:1px solid var(--line); padding:8px 10px; text-align:left; }
.prose blockquote { border-left:3px solid var(--line); padding-left:14px; color:var(--mist); }
.num-w { font-family:inherit; font-size:14px; padding:2px 10px; }
/* 駅を進むように番号を縦線でつなぐ */
.route-rows { border-top:none; }
.route-rows > li { position:relative; border-bottom:none; padding:16px 0; }
.route-rows > li::before { content:""; position:absolute; left:17px; top:0; bottom:0; width:3px; background:var(--live); opacity:.18; }
.route-rows > li:first-child::before { top:28px; } .route-rows > li:last-child::before { bottom:calc(100% - 28px); }
.route-rows .num { position:relative; z-index:1; background:var(--card); border:2px solid var(--live); }

/* 2列（スマホは1列） */
.split { display:grid; gap:20px; }

/* デモ */
.demo { background:var(--card); border:1px solid var(--sheet-line); border-radius:var(--radius); padding:22px 18px; }
.demo + .demo { margin-top:20px; }
.demo-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.demo-head h2 { font-size:clamp(24px,6.4vw,30px); }
.status { font-size:15px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--chip); color:var(--ink); }
.demo > .lead { max-width:none; margin-top:10px; }
.demo dl { display:grid; gap:2px; margin-top:16px; }
.demo dt { font-weight:700; font-size:17px; }
.demo dt.human { color:var(--pen); }
.demo dd { color:var(--mist); font-size:17px; margin-bottom:12px; }
.demo details { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.demo summary { cursor:pointer; font-weight:700; font-size:17px; min-height:48px; display:flex; align-items:center; justify-content:space-between; list-style:none; }
.demo summary::-webkit-details-marker { display:none; }
.demo summary::after { content:"＋"; font-size:20px; }
.demo details[open] summary::after { content:"−"; }
.demo details dl { margin-top:4px; }

/* メールのコピー */
.copy-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
.copy-note { margin-top:10px; font-size:15px; color:var(--mist); }

/* 表 */
.table { width:100%; border-collapse:collapse; border-top:1px solid var(--line); }
.table th, .table td { text-align:left; vertical-align:top; padding:16px 0; border-bottom:1px solid var(--line); font-size:17px; }
.table th { width:5.5em; font-weight:700; padding-right:16px; }
.table td { color:var(--mist); text-wrap:pretty; word-break:auto-phrase; }

/* 相談の帯 */
.cta-band { background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:28px 20px; display:grid; gap:20px; }
.cta-band h2 { font-size:clamp(26px,7vw,42px); text-wrap:balance; }
.cta-band p { color:rgba(251,244,230,.82); margin-top:8px; }
.cta-band .btn-primary { background:var(--express); color:var(--ink); }

/* フッター */
.site-footer { position:relative; z-index:2; border-top:1px solid var(--line); padding:32px 0 48px; font-size:16px; color:var(--mist); }
.site-footer .wrap { display:grid; gap:16px; }
.site-footer ul { display:flex; flex-wrap:wrap; gap:0 20px; list-style:none; }
.site-footer a:not(.logo) { text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.site-footer .logo { margin-bottom:8px; }

/* ── タブレット以上 ── */
@media (min-width: 600px) {
  :root { --gutter:32px; }
  .btns { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .demo { padding:28px; }
  .demo dl { grid-template-columns:auto 1fr; gap:10px 20px; }
  .demo dd { margin-bottom:0; }
  .table th { width:8em; padding-right:24px; }
  .cta-band { grid-template-columns:minmax(0,1.3fr) auto; align-items:center; padding:40px; }
  .site-footer .wrap { display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:space-between; align-items:flex-start; }
}

/* ── PC ── */
@media (min-width: 900px) {
  :root { --gutter:40px; --radius:18px; --section:88px; }
  body { font-size:18px; }
  .site-header { position:relative; background:transparent; backdrop-filter:none; border-bottom:none; }
  .site-header .wrap { flex-wrap:nowrap; padding-top:22px; padding-bottom:22px; gap:20px; }
  .logo { font-size:26px; } .logo .mark { width:30px; height:30px; }
  .menu-btn { display:none; }
  .site-nav, .is-open .site-nav { display:block; width:auto; order:1; position:static; background:none; border:none; box-shadow:none; }
  .site-nav ul { margin:0; padding-left:0 !important; padding-right:0 !important; }
  .site-nav li.nav-contact { display:none; }
  .menu-scrim { display:none; }
  .header-cta { order:2; min-height:48px; padding:0 22px; font-size:16px; }
  .site-nav ul { display:flex; gap:12px; padding:0; }
  .site-nav li + li { border-top:none; }
  .site-nav a { display:inline-block; min-height:0; padding:13px 8px; font-size:16px; font-weight:500; color:var(--mist); }
  .site-nav a[aria-current="page"] { color:var(--ink); font-weight:700; box-shadow:inset 0 -3px 0 var(--express); }
  .site-nav a[aria-current="page"]::after { display:none; }
  .tag { font-size:17px; }
  .lead { font-size:clamp(18px,1.5vw,20px); }
  .section-head { margin-bottom:36px; }
  .page-head { padding:56px 0 40px; }
  .hero { gap:40px; min-height:min(calc(100vh - 92px), 780px); align-content:center; padding:clamp(32px,6vh,72px) var(--gutter); }
  .hero h1 { font-size:clamp(40px,5.2vw,76px); margin:16px 0 24px; }
  .hero .btns { margin-top:30px; }
  .hero figcaption { font-size:16px; }
  figure.sheet { padding:16px; }
  .fig-h { display:block; } .fig-v { display:none; }
  .rows > li { grid-template-columns:72px minmax(0,1fr); gap:8px 24px; padding:28px 0; }
  .rows.compact > li { padding:18px 0; }
  .route-rows > li { padding:20px 0; }
  .split { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start; }
  .demo { padding:32px; }
  .demo + .demo { margin-top:24px; }
  .cta-band { padding:48px; gap:24px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .tr-l, .tr-e { display:none; } .rail-flow { animation:none; } .btn, .menu-btn i::before, .menu-btn i::after { transition:none; }
}