/* ツギノミチ サイト共通デザイン
   コンセプト：路線図。1本の「道」に STEP（駅）が並び、各サービスはその駅に止まる。
   色はロゴと同じ 紺・黄 と、少し青みのある明るいグレー。黄色は「現在地」と「押してほしいボタン」だけに使う。
   ※ ゲーム（/game/）はこのファイルを使わない。ドット絵の世界観はゲームの中だけ。 */
:root{
  --navy:#1B2A4A; --navy-2:#27385E; --navy-ink:#101B31;
  --yellow:#FFD84A; --yellow-2:#F2C62E;
  --paper:#F2F4F7; --white:#FFFFFF;
  --ink:#1B2A4A; --muted:#5B6479; --rule:#D5DBE5;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --sign:"Barlow Condensed","Arial Narrow",var(--jp);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:500;
  font-size:16px;line-height:1.9;letter-spacing:.02em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{text-wrap:balance}
[hidden]{display:none !important}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.narrow{max-width:720px}
.sign{font-family:var(--sign);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ===== ヘッダー ===== */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--white);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:18px;letter-spacing:.1em}
.brand img{width:34px;height:34px;border-radius:50%}
.header-link{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1.5px solid var(--navy);border-radius:6px;
  text-decoration:none;font-size:14px;font-weight:700}
.header-link:hover{background:var(--navy);color:var(--white)}

/* ===== ボタン・リンク ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:8px;
  font:inherit;font-weight:700;font-size:16px;letter-spacing:.04em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background .15s,color .15s}
.btn-primary{background:var(--yellow);color:var(--navy)}
.btn-primary:hover{background:var(--yellow-2)}
.btn-outline{border-color:currentColor;background:transparent}
.btn-outline:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-block{display:flex;width:100%}
.btn .ar{font-family:var(--sign);font-size:20px;line-height:1;transition:transform .15s}
.btn:hover .ar,.go:hover .ar{transform:translateX(3px)}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.go .ar{font-family:var(--sign);font-size:18px;line-height:1;transition:transform .15s}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* ===== トップ：ヒーロー ===== */
.hero{background:var(--navy);color:var(--white)}
.hero .wrap{padding-block:56px 44px}
.kicker{font-size:13px;color:var(--yellow);margin-bottom:18px}
.hero h1{margin:0;font-size:clamp(30px,8.4vw,64px);line-height:1.25;font-weight:900;letter-spacing:.03em}
.hero .lead{margin-top:20px;color:rgba(255,255,255,.78);max-width:28em}
.hero .actions{margin-top:32px}
.hero .go{color:var(--white)}

/* ヒーロー下のミニ路線図（横向きの線路） */
.minimap{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.minimap::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;
  background:
    linear-gradient(to bottom,transparent 4px,rgba(255,255,255,.55) 4px 7px,transparent 7px 13px,rgba(255,255,255,.55) 13px 16px,transparent 16px),
    repeating-linear-gradient(to right,rgba(255,255,255,.2) 0 4px,transparent 4px 13px)}
.minimap li{position:relative}
.minimap a{display:block;padding-top:34px;text-decoration:none}
.minimap a::before{content:"";position:absolute;left:0;top:-3px;width:26px;height:26px;border-radius:50%;background:var(--white);border:5px solid var(--navy);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.minimap .now a::before{background:var(--yellow)}
.minimap .n{display:block;font-size:12px;color:rgba(255,255,255,.55)}
.minimap .t{display:block;font-weight:700;font-size:15px;line-height:1.5;padding-right:8px}
.minimap .now .n{color:var(--yellow)}

/* ===== 路線（線路・駅名標・サービス）===== */
.route{position:relative;padding-block:56px 0;padding-left:54px}
/* 線路：2本のレールと枕木 */
.route::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:30px;
  background:
    linear-gradient(to right,transparent 6px,var(--navy) 6px 10px,transparent 10px 20px,var(--navy) 20px 24px,transparent 24px),
    repeating-linear-gradient(to bottom,#B4BDCC 0 5px,transparent 5px 17px)}
.station{position:relative;padding-bottom:64px}
/* 駅（線路の上の丸） */
.station::before{content:"";position:absolute;left:-54px;top:54px;width:38px;height:38px;border-radius:50%;background:var(--white);border:7px solid var(--navy);z-index:1}
.station.now::before{background:var(--yellow)}

/* 駅名標 */
.ekimei{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 1px 0 var(--rule),0 0 0 1px var(--rule);max-width:460px;border-top:6px solid var(--yellow)}
.ek-main{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 18px 14px}
.ek-num{display:grid;place-items:center;width:52px;height:52px;border:4px solid var(--navy);border-radius:10px;font-family:var(--sign);font-weight:700;line-height:1;font-size:24px}
.ek-num small{display:block;font-size:11px;letter-spacing:.12em;margin-bottom:1px}
.ek-name{display:grid;justify-items:start}
.ek-kana{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--muted)}
.ek-kanji{font-size:34px;font-weight:900;line-height:1.2;letter-spacing:.18em}
.ek-roma{font-family:var(--sign);font-weight:600;font-size:14px;letter-spacing:.2em;color:var(--muted)}
.ek-bar{display:flex;justify-content:space-between;gap:10px;background:var(--navy);color:var(--white);font-size:13px;font-weight:700;padding:7px 14px;letter-spacing:.08em}
.ek-bar span:first-child{opacity:.65}

.station-head{margin-bottom:26px}
.station-head h2{margin:22px 0 8px;font-size:clamp(22px,5.6vw,30px);line-height:1.45;font-weight:900}
.station-head p{color:var(--muted);max-width:34em}
.stops{display:grid;gap:18px}
.stop{position:relative;display:grid;gap:18px;background:var(--white);border-radius:12px;padding:24px 22px}
.stop .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.stop h3{margin:0;font-size:21px;line-height:1.5;font-weight:900}
.stop p{color:var(--muted);font-size:15px}
.stop .body{display:grid;gap:10px;align-content:start}
.stop .body .actions{margin-top:10px}
.stop figure{margin:0}
.stop.portrait figure{max-width:300px}
.stop figcaption{font-size:12px;color:var(--muted);margin-top:8px}
/* ゲームだけは紺の面（ゲーム画面の黒と地続きにする） */
.stop.dark{background:var(--navy-ink);color:var(--white);padding-bottom:0;overflow:hidden}
.stop.dark p,.stop.dark .meta{color:rgba(255,255,255,.7)}
.stop.dark .shot{justify-self:center;width:min(280px,86%);border:7px solid #060C18;border-bottom:0;border-radius:28px 28px 0 0;overflow:hidden}
.shot-manga{border:1px solid var(--rule)}
.shot-slide{border:1px solid var(--rule)}
/* 終点：車止め */
.terminal{position:relative;padding:4px 0 80px}
.terminal::before{content:"";position:absolute;left:-54px;top:0;width:38px;height:14px;border-radius:2px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 6px,var(--navy) 6px 12px);z-index:1}
.terminal p{font-weight:700;line-height:1.6;margin-top:-4px}
.terminal .sign{display:block;font-size:12px;color:var(--muted)}
/* ===== 下層ページ ===== */
.page-hero{background:var(--navy);color:var(--white)}
.page-hero .wrap{padding-block:44px 48px}
.page-hero .kicker{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.page-hero h1{margin:0;font-size:clamp(28px,7.4vw,44px);line-height:1.35;font-weight:900}
.page-hero .lead{margin-top:16px;color:rgba(255,255,255,.78)}
.page-hero .pr{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.8);letter-spacing:.06em}
.content{padding-block:48px 80px}
.prose{display:grid;gap:18px}
.prose h2{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--rule);font-size:22px;line-height:1.5;font-weight:900}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin:12px 0 0;font-size:17px}
.prose ul,.prose ol{margin:0;padding-left:1.4em}
.prose li{margin:.3em 0}
.prose figure{margin:0}
.prose figcaption{font-size:12px;color:var(--muted);margin-top:8px}

/* 本当に順番があるものだけに使う縦の流れ */
.flow{list-style:none;margin:0;padding:0 0 0 34px !important;position:relative;counter-reset:f}
.flow::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:3px;background:var(--navy);border-radius:2px}
.flow li{position:relative;counter-increment:f;margin:0 0 18px}
.flow li:last-child{margin-bottom:0}
.flow li::before{content:"";position:absolute;left:-34px;top:.45em;width:21px;height:21px;border-radius:50%;background:var(--white);border:4px solid var(--navy)}
.flow li b{display:block}
.flow li span{display:block;font-size:14px;color:var(--muted)}

/* 当てはまる人リスト */
.dash{list-style:none;padding:0 !important}
.dash li{position:relative;padding-left:22px}
.dash li::before{content:"";position:absolute;left:0;top:.95em;width:12px;height:2px;background:var(--navy)}

/* 価格 */
.price{margin-top:28px;background:var(--white);color:var(--ink);border-radius:12px;padding:22px 24px;display:grid;gap:4px;justify-items:start}
.price .limit{font-size:13px;font-weight:700;background:var(--yellow);padding:0 10px;border-radius:4px}
.price .now{font-family:var(--sign);font-weight:700;font-size:56px;line-height:1.1;letter-spacing:.01em}
.price .now small{font-family:var(--jp);font-size:18px;font-weight:700;margin-left:4px}
.price .was{font-size:14px;color:var(--muted)}

/* PR表記・注意書き */
.pr{display:inline-block;font-size:11px;font-weight:700;border:1px solid var(--muted);color:var(--muted);border-radius:3px;padding:0 5px;line-height:1.6;letter-spacing:.04em;font-family:var(--jp);text-transform:none}
.note{font-size:13px;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.box{background:var(--white);border-radius:12px;padding:20px 22px}
.stack{display:grid;gap:12px}
.todo{background:#FFF3C4;color:#7A5300;border:1px dashed #D9A400;border-radius:3px;padding:0 4px}

/* 表（特商法など） */
.table{width:100%;border-collapse:collapse;font-size:15px;background:var(--white);border-radius:12px;overflow:hidden}
.table th,.table td{padding:16px;text-align:left;vertical-align:top;border-top:1px solid var(--rule)}
.table tr:first-child th,.table tr:first-child td{border-top:0}
.table th{width:34%;font-weight:700;font-size:14px;color:var(--muted)}

/* ===== フッター ===== */
.site-footer{background:var(--navy-ink);color:rgba(255,255,255,.66);font-size:14px}
.site-footer .wrap{padding-block:48px 32px;display:grid;gap:28px}
.site-footer .brand{color:var(--white)}
.site-footer .tag{margin-top:10px}
.site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.site-footer nav a{text-decoration:none;padding:6px 0}
.site-footer nav a:hover{color:var(--white)}
.site-footer .copy{font-family:var(--sign);letter-spacing:.1em;font-size:13px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}

/* ===== パソコン幅 ===== */
@media (min-width:760px){
  .hero .wrap{padding-block:88px 64px}
  .route{padding-left:80px}
  .route::before{left:14px}
  .station::before,.terminal::before{left:-70px}
  .stop{padding:32px}
  .stop.split{grid-template-columns:1fr 1fr;align-items:center;gap:32px}
  .stop.split.portrait{grid-template-columns:1.4fr 1fr}
  .stop.dark{grid-template-columns:1.2fr 1fr;align-items:end;padding:40px 40px 0}
  .stop.dark .body{padding-bottom:40px}
  .site-footer .wrap{grid-template-columns:1fr 2fr}
  .site-footer nav{grid-template-columns:repeat(3,auto);justify-content:start}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}