/* ============================================================
   プロパンガス相場マップ — 共通スタイルシート
   DESIGN.md 準拠（トークン10のみ／これ以外の色値を書かない）。
   署名的装置（地区相場票・スプレッドバー・使用量段階・調査月スタンプ）は
   prototypes/fv/index.html の様式をテンプレート化した実装。
   ============================================================ */
:root{
  --paper:#FBFAF6;
  --band:#EEF1F0;
  --ink:#22303C;
  --dim:#66727D;
  --rule:#C8CDD2;
  --navy:#1D3D5C;
  --navy-light:#3D6C96;
  --flame:#D97A20;
  --note-paper:#FAF3E4;
  --note-line:#E5D3AB;

  --font:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",sans-serif;
  --mono:ui-monospace,monospace;
  --t:160ms ease;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--band);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3,p,caption,figcaption,li{word-break:auto-phrase;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--paper);
  padding:10px 16px;z-index:10;
}
.skip-link:focus{left:0;}

.container{max-width:1200px;margin:0 auto;padding:0 40px;}
.container--narrow{max-width:820px;}

/* ============================================================
   1. ヘッダー帯
   ============================================================ */
.masthead{background:var(--navy);color:var(--paper);}
.masthead__in{
  min-height:56px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-block:8px;
}
.logo{
  font-size:17px;font-weight:700;letter-spacing:.02em;
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.logo em{font-style:normal;color:var(--flame);}
.logo:hover{border-bottom-color:var(--flame);}
.logo:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.nav{display:flex;align-items:center;gap:10px;font-size:13px;}
.nav a{
  color:var(--paper);text-decoration:none;padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.nav a:hover{border-bottom-color:var(--flame);}
.nav a:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.nav .sep{color:var(--navy-light);}

/* ============================================================
   2. ヒーロー（トップのみ）
   ============================================================ */
.fv{padding:96px 0;}
.hero h1{
  margin:0;
  font-size:26px;line-height:1.45;font-weight:700;letter-spacing:.01em;
  word-break:auto-phrase;
}
.hero h1 .phrase{display:inline-block;}
.hero .lead{
  margin:20px 0 0;max-width:58em;
  font-size:14px;line-height:1.9;color:var(--ink);
}

/* ============================================================
   3. 地区相場票 ＋ 右レール
   ============================================================ */
.spread-grid{
  margin-top:56px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;
}

/* 署名的装置1: 地区相場票 */
.slip{background:var(--paper);border:1px solid var(--rule);}
.slip__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:2px solid var(--navy);
}
.slip__title{margin:0;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--navy);}
.slip__no{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.02em;}

.slip__row{display:grid;grid-template-columns:120px minmax(0,1fr);border-bottom:1px solid var(--rule);}
.slip__row:last-of-type{border-bottom:0;}
.slip__label{
  padding:14px;border-right:1px solid var(--rule);
  font-size:11px;letter-spacing:.12em;color:var(--dim);
}
.slip__value{padding:14px 18px;min-width:0;}

/* 署名的装置3: 使用量段階（一覧ページはタブ切替・地区詳細は全段静的表示） */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;}
.tab{
  position:relative;appearance:none;
  font-family:var(--font);font-size:13px;font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;
  padding:6px 16px;cursor:pointer;
  transition:color var(--t),background-color var(--t),border-color var(--t);
}
.tab:hover{border-color:var(--navy);background:var(--band);}
.tab:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.tab[aria-pressed="true"]{border-color:var(--navy);background:var(--band);color:var(--navy);font-weight:700;}
.tab[aria-pressed="true"]::after{
  content:"";position:absolute;inset:1px;border:1px solid var(--navy);border-radius:2px;
}
.hint{margin:10px 0 0;font-size:11.5px;color:var(--dim);}

/* 使用量段階（地区詳細ページ用の静的見出し） */
.tier{border-bottom:1px solid var(--rule);padding:20px 18px;}
.tier:last-of-type{border-bottom:0;}
.tier__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;
}
.tier__label{
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--navy);
  border:1px solid var(--navy);border-radius:2px;padding:3px 12px;
  font-variant-numeric:tabular-nums;
}
.tier__hint{margin:0;font-size:11.5px;color:var(--dim);}

/* 金額 */
.amount{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.amount__num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:.01em;}
.amount__unit{font-size:11.5px;color:var(--dim);}

/* 署名的装置2: スプレッドバー */
.spread{margin-top:16px;max-width:520px;}
.spread__marklane{position:relative;height:20px;}
.spread__mark{
  position:absolute;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;
}
.spread__marklabel{font-size:11px;letter-spacing:.12em;color:var(--flame);line-height:1;}
.spread__bar{
  position:relative;height:16px;border-radius:2px;
  background:linear-gradient(90deg,var(--navy-light),var(--navy));
}
.spread__needle{
  position:absolute;top:-5px;bottom:-5px;width:3px;
  transform:translateX(-50%);background:var(--flame);
}
.spread__ticks{position:relative;height:5px;margin-top:5px;}
.spread__ticks span{position:absolute;top:0;width:1px;height:5px;background:var(--rule);}
.spread__ticks .t--min{left:0;}
.spread__ticks .t--max{right:0;}
.spread__ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);}
.spread__ends b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);font-size:13px;}
.read{margin:12px 0 0;font-size:13px;color:var(--ink);}
.read b{font-weight:700;font-variant-numeric:tabular-nums;}

/* スプレッドバーと同値のHTMLテーブル（必須併置） */
.slip__table-wrap{margin-top:14px;}
.slip__table{max-width:460px;width:100%;border-collapse:collapse;}
.slip__table caption{
  text-align:left;font-size:11px;letter-spacing:.12em;color:var(--dim);padding-bottom:9px;
}
.slip__table th{
  font-size:11px;letter-spacing:.12em;color:var(--dim);font-weight:400;text-align:left;
  padding:4px 10px 4px 0;border-bottom:1px solid var(--rule);
}
.slip__table th.is-avg{border-top:2px solid var(--flame);}
.slip__table td{
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:6px 10px 6px 0;border-bottom:1px solid var(--rule);
}
.u{font-size:11.5px;font-weight:400;color:var(--dim);margin-left:2px;}

.sub{margin:0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3;}
.sub--muted{color:var(--dim);font-weight:400;font-size:14px;}
.range{margin:2px 0 0;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;}

.slip__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px 18px;border-top:1px solid var(--rule);
}
.source{margin:0;font-size:11.5px;color:var(--dim);}
/* 署名的装置4: 調査月スタンプ */
.stamp{
  display:inline-flex;align-items:baseline;gap:8px;
  border:1.5px solid var(--navy);padding:4px 12px;color:var(--navy);
}
.stamp__k{font-size:11px;letter-spacing:.12em;}
.stamp__v{font-family:var(--mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}

/* 右レール */
.rail{display:flex;flex-direction:column;gap:22px;}
.meter{margin:0;}
.meter svg{display:block;width:100%;max-width:280px;height:auto;}
.meter figcaption{margin-top:8px;font-size:11.5px;color:var(--dim);}
.rail h2{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.6;}
.rail p{margin:0;font-size:14px;line-height:1.9;}

/* 4. フォールバック注記見本 / 対象外注記 */
.note{background:var(--note-paper);border:1px solid var(--note-line);padding:14px 16px;}
.note__k{display:block;font-size:11px;letter-spacing:.12em;color:var(--dim);margin-bottom:4px;}
.note p{margin:0;font-size:13px;line-height:1.85;}
.note + .note{margin-top:12px;}

/* 5. CTA */
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;border:1px solid var(--flame);border-radius:0;
  background:var(--flame);color:var(--paper);
  font-size:14px;font-weight:700;text-decoration:none;letter-spacing:.02em;
  transition:color var(--t),background-color var(--t),border-color var(--t);
}
.cta:hover{background:var(--navy);border-color:var(--navy);}
.cta:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.cta svg{flex:none;}

/* ============================================================
   6. パンくず
   ============================================================ */
.breadcrumb{padding:14px 0 0;font-size:12px;color:var(--dim);}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0;}
.breadcrumb li{display:flex;align-items:center;}
.breadcrumb li + li::before{content:"›";margin:0 8px;color:var(--rule);}
.breadcrumb a{
  color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t);
}
.breadcrumb a:hover{border-bottom-color:var(--navy);}
.breadcrumb a:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.breadcrumb [aria-current="page"]{color:var(--ink);}

/* ============================================================
   7. 下層ページ共通（都道府県一覧・地区詳細・法的ページ）
   ============================================================ */
.page{padding:32px 0 88px;}
.page h1{margin:0 0 12px;font-size:26px;line-height:1.5;font-weight:700;}
.page .lead{margin:0 0 40px;max-width:58em;font-size:14px;line-height:1.9;color:var(--ink);}
.page section{margin-top:48px;}
.page h2{margin:0 0 16px;font-size:17px;font-weight:700;line-height:1.6;}

/* 都道府県から探す（トップ・47リンク） */
.pref-nav{margin-top:64px;}
.pref-nav h2{margin:0 0 6px;font-size:17px;font-weight:700;}
.pref-nav .lead{margin:0 0 20px;font-size:13px;color:var(--dim);max-width:none;}
.pref-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.pref-grid a{
  display:block;background:var(--paper);color:var(--ink);text-decoration:none;
  padding:11px 14px;font-size:13px;
  transition:background-color var(--t),color var(--t);
}
.pref-grid a:hover{background:var(--band);color:var(--navy);}
.pref-grid a:focus-visible{outline:2px solid var(--flame);outline-offset:-2px;}

/* 都道府県ページ: ブロック一覧テーブル */
.block-table-wrap{overflow-x:auto;}
.block-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);}
.block-table caption{
  text-align:left;font-size:11px;letter-spacing:.12em;color:var(--dim);padding:10px 14px 0;
}
.block-table th{
  font-size:11px;letter-spacing:.08em;color:var(--dim);font-weight:400;text-align:left;
  padding:10px 14px;border-bottom:2px solid var(--navy);background:var(--band);
}
.block-table td{
  padding:12px 14px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:baseline;
}
.block-table tbody tr:last-child td{border-bottom:0;}
.block-table td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.block-table td.num b{font-weight:700;font-size:16px;}
.block-table a{
  color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t);
}
.block-table a:hover{border-bottom-color:var(--navy);}
.block-table a:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.block-table .is-unavailable{color:var(--dim);}

.pref-summary{
  display:flex;gap:32px;flex-wrap:wrap;margin:0 0 24px;padding:16px 18px;
  background:var(--paper);border:1px solid var(--rule);
}
.pref-summary dt{font-size:11px;letter-spacing:.1em;color:var(--dim);margin:0;}
.pref-summary dd{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.pref-summary .u{font-size:11.5px;font-weight:400;color:var(--dim);margin-left:2px;}

/* 法的ページ・about */
.prose{max-width:64em;}
.prose h2{margin:32px 0 12px;font-size:17px;font-weight:700;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 14px;font-size:14px;line-height:1.9;}
.prose ul{margin:0 0 14px;padding-left:1.4em;}
.prose li{margin-bottom:6px;font-size:14px;line-height:1.8;}
.prose dl{margin:0 0 14px;}
.prose dt{font-weight:700;margin-top:12px;}
.prose dd{margin:4px 0 0;}

/* 404 */
.error-page{
  min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  padding:64px 0;text-align:left;
}
.error-page h1{font-size:26px;margin:0 0 12px;}
.error-page p{font-size:14px;line-height:1.9;margin:0 0 24px;}

/* ============================================================
   8. フッター
   ============================================================ */
.site-footer{border-top:1px solid var(--rule);margin-top:80px;background:var(--paper);}
.site-footer__in{padding:32px 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;}
.site-footer nav a{
  color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t);
}
.site-footer nav a:hover{border-bottom-color:var(--navy);}
.site-footer nav a:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.site-footer small{font-size:11.5px;color:var(--dim);}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:900px){
  .container{padding:0 24px;}
  .fv{padding:64px 0;}
  .spread-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .rail{max-width:520px;}
}
@media (max-width:520px){
  .container{padding:0 20px;}
  .masthead__in{padding-block:10px;}
  .nav{font-size:12px;gap:8px;}
  .slip__row{grid-template-columns:minmax(0,1fr);}
  .slip__label{border-right:0;border-bottom:1px solid var(--rule);padding:10px 14px;}
  .slip__value{padding:14px;}
  .tabs .tab{flex:1 1 auto;text-align:center;padding:6px 10px;}
  .slip__table-wrap{overflow-x:auto;}
  .slip__table{min-width:300px;}
  .slip__head,.slip__foot{padding:12px 14px;}
  .tier{padding:16px 14px;}
  .site-footer__in{flex-direction:column;gap:16px;}
}