/* ------------------------------------------------------------------
   SFR-Mesh デザイン基準 v1.0 — ページ用スタイル
   すべてのルールは .sfr-page の内側に限定されています。
   このファイルを編集すると、.sfr-page を使った全ページに反映されます。
   ------------------------------------------------------------------ */
.sfr-page {
    --sfr-ink: #1c2b3a; --sfr-dim: #5b6b7c; --sfr-line: #dde5ee;
    --sfr-accent: #2c7be5; --sfr-accent-soft: #e8f1fd;
    --sfr-ok: #1e9e5a; --sfr-ok-soft: #e6f6ee;
    --sfr-warn: #c04a4a;
    --sfr-bg: #ffffff; --sfr-panel: #f5f8fb;
  }
.sfr-page *, .sfr-page *::before, .sfr-page *::after { box-sizing: border-box; }
  .sfr-page { background: var(--sfr-bg); color: var(--sfr-ink);
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
    line-height: 1.9; font-size: 16px; }
  .sfr-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
  .sfr-page section { padding: 56px 0; }
  .sfr-page section + section { border-top: 1px solid var(--sfr-line); }

  /* 図版 — デザイン基準 §5-2。スマホではページ全体ではなく図の中だけを横スクロールさせる */
  .sfr-page figure { margin: 28px 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfr-page figure svg { width: 100%; min-width: 660px; height: auto; display: block; }
  .sfr-page figcaption { color: var(--sfr-dim); font-size: 13px; text-align: center; margin-top: 10px; }
  .sfr-page h1 { font-size: clamp(26px, 5vw, 36px); line-height: 1.5; }
  .sfr-page h2 { font-size: clamp(20px, 3.5vw, 26px); margin-bottom: 8px; scroll-margin-top: 16px; }
  .sfr-page h3 { font-size: 17px; margin: 28px 0 4px; scroll-margin-top: 16px; }
  .sfr-page h4 { font-size: 15px; margin: 20px 0 2px; color: var(--sfr-dim); }
  .sfr-page p + p { margin-top: 12px; }
  .sfr-sub { color: var(--sfr-dim); margin-bottom: 28px; }
  .sfr-kicker { color: var(--sfr-accent); font-weight: 700; letter-spacing: .1em; font-size: 14px; }
  .sfr-lv { display:inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
        border-radius: 999px; padding: 2px 12px; margin-bottom: 10px; }
  .sfr-lv1 { background: var(--sfr-ok-soft); color: var(--sfr-ok); }
  .sfr-lv2 { background: var(--sfr-accent-soft); color: var(--sfr-accent); }
  .sfr-lv3 { background: var(--sfr-panel); color: var(--sfr-dim); border: 1px solid var(--sfr-line); }

  .sfr-steps { display: grid; gap: 14px; margin-top: 28px; counter-reset: s; }
  .sfr-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
          background: var(--sfr-panel); border: 1px solid var(--sfr-line); border-radius: 14px; padding: 20px 22px; }
  .sfr-step::before { counter-increment: s; content: counter(s);
    width: 32px; height: 32px; border-radius: 50%; background: var(--sfr-accent); color: #fff;
    font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-top: 4px; }
  .sfr-step p { color: var(--sfr-dim); font-size: 15px; }
  .sfr-step .sfr-dial { font-weight: 700; color: var(--sfr-ink); }
  .sfr-step h3 { margin: 0 0 4px; }
  .sfr-step.sfr-key { border-color: var(--sfr-accent); background: var(--sfr-accent-soft); }
  .sfr-step.sfr-key p { color: var(--sfr-ink); }
  .sfr-badge { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
           background: var(--sfr-accent); color:#fff; border-radius:999px; padding:1px 10px; margin-bottom:6px; }
  .sfr-must { border-left: 4px solid var(--sfr-accent); }
  .sfr-must b.sfr-k { color: var(--sfr-warn); }

  .sfr-page details { border: 1px solid var(--sfr-line); border-radius: 12px; margin-bottom: 10px; }
  details[open] { background: var(--sfr-panel); }
  .sfr-page summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none;
            display: grid; grid-template-columns: 1fr 20px; gap: 12px; align-items: center; }
  .sfr-page summary::-webkit-details-marker { display: none; }
  .sfr-page summary::after { content: ""; width: 10px; height: 10px; justify-self: end;
    border-right: 2px solid var(--sfr-dim); border-bottom: 2px solid var(--sfr-dim);
    transform: rotate(45deg); transition: transform .18s; }
  details[open] summary::after { transform: rotate(-135deg); }
  .sfr-page summary:focus-visible { outline: 2px solid var(--sfr-accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
  .sfr-answer { padding: 0 20px 20px; }
  .sfr-answer .sfr-short { margin-bottom: 12px; }
  .sfr-answer .sfr-short b { color: var(--sfr-ok); }
  .sfr-answer .sfr-why { color: var(--sfr-dim); font-size: 14.5px; border-top: 1px dashed var(--sfr-line); padding-top: 12px; }
  .sfr-answer .sfr-why + .sfr-why { border-top: none; padding-top: 0; margin-top: 8px; }
  .sfr-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--sfr-accent);
         background: var(--sfr-accent-soft); border-radius: 6px; padding: 1px 8px; margin-right: 8px; }
  .sfr-more { display:inline-block; margin-top: 10px; font-size: 13.5px; color: var(--sfr-accent); }

  .sfr-note { background: var(--sfr-accent-soft); border-radius: 12px; padding: 16px 20px; font-size: 14.5px; margin-top: 24px; }
  .sfr-note.sfr-plain { background: var(--sfr-panel); border: 1px solid var(--sfr-line); }
  .sfr-page ul, ol { margin: 10px 0 0 1.3em; }
  .sfr-page li { margin-bottom: 6px; }
  ul.sfr-tight li { margin-bottom: 2px; }
  .sfr-page table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin-top: 20px; }
  .sfr-page th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sfr-line); vertical-align: top; }
  .sfr-page th { color: var(--sfr-dim); font-size: 13px; font-weight: 700; }
  td.sfr-n { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
  .sfr-tablewrap { overflow-x: auto; }
  .sfr-ex { background: var(--sfr-panel); border-left: 3px solid var(--sfr-line); padding: 10px 16px;
        font-size: 14.5px; color: var(--sfr-dim); margin-top: 10px; border-radius: 0 8px 8px 0; }
  .sfr-page a { color: var(--sfr-accent); }
  .sfr-cover { columns: 2; column-gap: 28px; font-size: 14px; color: var(--sfr-dim); margin-top: 18px; }
  .sfr-cover li { break-inside: avoid; }
  @media (max-width: 620px) { .sfr-cover { columns: 1; } }
  /* ---- 誘導カード（もっと詳しく／関連ページ） ------------------- */
  .sfr-cols { display: grid; gap: 14px; margin-top: 22px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .sfr-card { background: var(--sfr-panel); border: 1px solid var(--sfr-line);
    border-radius: 12px; padding: 18px 20px; }
  .sfr-card .sfr-no { display: inline-block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; color: var(--sfr-accent); background: var(--sfr-accent-soft);
    border-radius: 999px; padding: 2px 10px; }
  .sfr-card h3 { margin: 10px 0 4px; font-size: 16px; }
  .sfr-card h3 a { text-decoration: none; }
  .sfr-card h3 a:hover { text-decoration: underline; }
  .sfr-card p { font-size: 14px; color: var(--sfr-dim); line-height: 1.75; margin: 0; }

  .sfr-page footer { color: var(--sfr-dim); font-size: 13px; padding: 40px 0 56px; border-top: 1px solid var(--sfr-line); }
  .sfr-marker { background: #fffbe6; border: 1px dashed #e0cf8a; border-radius: 10px;
            padding: 14px 18px; font-size: 13.5px; color: #6b5a1f; margin: 32px 0 0; }

  /* ---- 図版の拡大表示 ---------------------------------------------
     スマホ: 図を画面幅に収める（横スクロールさせない）＋タップで拡大
     PC   : これまでどおり原寸。幅が足りなければ図の中だけ横スクロール */
  .sfr-page .sfr-figbtn { all: unset; display: block; width: 100%; cursor: zoom-in; }
  .sfr-page .sfr-figbtn:focus-visible { outline: 2px solid var(--sfr-accent); outline-offset: 3px; border-radius: 8px; }
  .sfr-page .sfr-zoomhint { display: none; color: var(--sfr-accent); font-weight: 700; }

  /* 図版の拡大表示 — スマホでは図を画面幅に収める */
  @media (max-width: 720px) {
    .sfr-page figure { overflow-x: hidden; }
    .sfr-page figure svg { min-width: 0; }
    .sfr-page .sfr-zoomhint { display: inline; }
  }

  .sfr-page .sfr-lightbox { position: fixed; inset: 0; z-index: 9999;
    background: rgba(28, 43, 58, .93); display: none; }
  .sfr-page .sfr-lightbox.is-open { display: block; }
  /* はみ出す中身を中央に置きつつ両端までスクロールさせる。
     スクロール枠に justify-content:center を掛けると始まり側へ到達できないため、
     内側に width:max-content / min-width:100% のラッパを1枚置く。 */
  .sfr-page .sfr-lb-body { position: absolute; inset: 0; overflow: auto;
    -webkit-overflow-scrolling: touch; }
  .sfr-page .sfr-lb-inner { width: max-content; min-width: 100%; min-height: 100%;
    box-sizing: border-box; padding: 60px 14px 16px; display: flex; align-items: center; }
  .sfr-page .sfr-lb-inner svg { margin: auto; width: 900px; min-width: 900px; max-width: none;
    height: auto; background: var(--sfr-bg); border-radius: 12px; padding: 14px;
    flex: 0 0 auto; }
  .sfr-page .sfr-lb-close { position: absolute; top: 12px; right: 12px; z-index: 1;
    background: var(--sfr-bg); color: var(--sfr-ink); border: none; border-radius: 999px;
    padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; }
  .sfr-page .sfr-lb-close:focus-visible { outline: 2px solid var(--sfr-accent); outline-offset: 2px; }

  /* ---- TGリスト ---------------------------------------------------
     .sfr-page の囲みが無くても単独で成立するよう、トークンをここにも持たせる。
     横に並べるかどうかは、画面幅ではなく「表が使える幅」で決める（@container）。 */
  .sfr-stations {
    container-type: inline-size; container-name: sfrlist;
    --sfr-ink: #1c2b3a; --sfr-dim: #5b6b7c; --sfr-line: #dde5ee;
    --sfr-accent: #2c7be5; --sfr-accent-soft: #e8f1fd;
    --sfr-ok: #1e9e5a; --sfr-ok-soft: #e6f6ee;
    --sfr-warn: #c04a4a; --sfr-bg: #ffffff; --sfr-panel: #f5f8fb;
    color: var(--sfr-ink);
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
    line-height: 1.9; font-size: 16px; margin-top: 8px;
  }
  .sfr-stations *, .sfr-stations *::before, .sfr-stations *::after { box-sizing: border-box; }
  .sfr-stations h3, .sfr-stations h4 { font-family: inherit; }
  .sfr-stations .sfr-st-num { font-variant-numeric: tabular-nums; letter-spacing: .02em;
    color: var(--sfr-dim); font-weight: 400; }

  .sfr-stations .sfr-st-nation { display: flex; gap: 14px; align-items: baseline;
    border: 1px solid var(--sfr-line); border-radius: 12px; padding: 12px 18px; font-weight: 700; }
  .sfr-stations .sfr-st-nation .sfr-st-num { font-size: 17px; font-weight: 700; color: var(--sfr-ink); }

  .sfr-stations .sfr-st-func { background: var(--sfr-panel);
    border: 1px solid var(--sfr-line); border-radius: 12px; padding: 14px 18px 6px; }
  .sfr-stations .sfr-st-func h3 { font-size: 14px; margin: 0 0 6px; color: var(--sfr-dim);
    letter-spacing: .06em; }

  .sfr-stations .sfr-st-area { margin-top: 34px; }
  .sfr-stations .sfr-st-ahead { font-size: 19px; margin: 0 0 4px; padding-bottom: 8px;
    border-bottom: 2px solid var(--sfr-accent); display: flex; gap: 14px; align-items: baseline; }
  .sfr-stations .sfr-st-ahead .sfr-st-num { font-size: 15px; }

  .sfr-stations .sfr-st-pref { margin-top: 18px; }
  .sfr-stations .sfr-st-phead { font-size: 15px; margin: 0 0 2px; display: flex; gap: 12px;
    align-items: baseline; color: var(--sfr-ink); }
  .sfr-stations .sfr-st-phead .sfr-st-num { font-size: 14px; }

  .sfr-stations .sfr-st-list { list-style: none; margin: 0; padding: 0; }

  /* 既定は積み上げ表示 */
  .sfr-stations .sfr-st-item { display: grid;
    grid-template-columns: 6.4em minmax(0, 1fr) auto;
    gap: 2px 10px; padding: 12px 10px; border-bottom: 1px solid var(--sfr-line);
    font-size: 14.5px; }
  .sfr-stations .sfr-st-item:last-child { border-bottom: none; }
  .sfr-stations .sfr-st-head { display: none; }

  .sfr-stations .sfr-st-tg    { grid-row: 1; grid-column: 1;
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15.5px; }
  .sfr-stations .sfr-st-call  { grid-row: 1; grid-column: 2; font-weight: 700; }
  .sfr-stations .sfr-st-badge { grid-row: 1; grid-column: 3; text-align: right; }
  .sfr-stations .sfr-st-loc   { grid-row: 2; grid-column: 2; color: var(--sfr-ink); padding-right: 4px; }
  .sfr-stations .sfr-st-loc small { color: var(--sfr-dim); font-size: 12.5px; margin-left: .5em; }
  .sfr-stations .sfr-st-links { grid-row: 2; grid-column: 3; justify-self: end;
    display: flex; gap: 5px; flex-wrap: wrap; }
  .sfr-stations .sfr-st-ch    { grid-row: 3; grid-column: 2 / -1; }
  .sfr-stations .sfr-st-cc    { grid-row: 4; grid-column: 2; }
  .sfr-stations .sfr-st-tgl   { grid-row: 4; grid-column: 3; justify-self: start; }
  .sfr-stations .sfr-st-meta  { grid-row: 5; grid-column: 2 / -1;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
  .sfr-stations .sfr-st-ch,
  .sfr-stations .sfr-st-cc,
  .sfr-stations .sfr-st-tgl { font-variant-numeric: tabular-nums; text-align: left;
    color: var(--sfr-dim); font-size: 13px; }
  .sfr-stations .sfr-st-ch { font-weight: 700; }
  .sfr-stations .sfr-st-ch::before,
  .sfr-stations .sfr-st-cc::before,
  .sfr-stations .sfr-st-tgl::before { content: attr(data-l) " "; font-weight: 700;
    color: var(--sfr-dim); font-size: 11.5px; }

  .sfr-stations .sfr-chip { display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-align: center; text-decoration: none;
    color: var(--sfr-accent); background: var(--sfr-accent-soft);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap; line-height: 1.6; }
  .sfr-stations .sfr-chip:hover,
  .sfr-stations .sfr-chip:focus-visible { background: var(--sfr-accent); color: #fff; }
  .sfr-stations .sfr-chip-hp { color: var(--sfr-ok); background: var(--sfr-ok-soft); }
  .sfr-stations .sfr-chip-hp:hover,
  .sfr-stations .sfr-chip-hp:focus-visible { background: var(--sfr-ok); color: #fff; }

  .sfr-stations .sfr-tag { display: inline-block; font-size: 11.5px; color: var(--sfr-dim);
    background: var(--sfr-panel); border: 1px solid var(--sfr-line);
    border-radius: 5px; padding: 1px 8px; white-space: nowrap; }
  .sfr-stations .sfr-st-note { color: var(--sfr-dim); font-size: 12.5px; }
  .sfr-stations .sfr-st-item.is-func .sfr-st-loc { font-size: 13.5px; color: var(--sfr-dim); }

  .sfr-stations .sfr-bdg { display: inline-block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; border-radius: 999px; padding: 2px 11px; white-space: nowrap; }
  .sfr-stations .sfr-bdg-on  { background: var(--sfr-ok); color: #fff; }
  .sfr-stations .sfr-bdg-off { background: var(--sfr-panel); color: var(--sfr-dim);
    border: 1px solid var(--sfr-line); }

  .sfr-stations .sfr-st-empty { color: var(--sfr-dim); font-size: 13.5px; padding: 9px 12px;
    background: repeating-linear-gradient(-45deg, transparent, transparent 6px,
      var(--sfr-panel) 6px, var(--sfr-panel) 12px); border-radius: 8px; }

  .sfr-stations .sfr-st-updated { color: var(--sfr-dim); font-size: 12.5px; margin-top: 24px; text-align: right; }
  .sfr-st-updated-inline { color: #5b6b7c; font-size: 12.5px; }
  .sfr-stations .sfr-st-mock { background: #fffbe6; border: 1px dashed #e0cf8a; color: #6b5a1f;
    border-radius: 8px; padding: 8px 14px; font-size: 13px; }

  /* 表が使える幅が 860px 以上あるときだけ、横に並べる */
  @container sfrlist (min-width: 860px) {
    .sfr-stations .sfr-st-item { align-items: center; gap: 2px 12px; padding: 9px 12px;
      grid-template-columns: 6.4em 7.2em minmax(6em, 1fr) 5.4em 12.6em 2.2em 2.2em 5.8em; }
    .sfr-stations .sfr-st-tg,
    .sfr-stations .sfr-st-call,
    .sfr-stations .sfr-st-loc,
    .sfr-stations .sfr-st-links,
    .sfr-stations .sfr-st-ch,
    .sfr-stations .sfr-st-cc,
    .sfr-stations .sfr-st-tgl,
    .sfr-stations .sfr-st-badge { grid-row: auto; grid-column: auto; justify-self: auto; }
    .sfr-stations .sfr-st-links { justify-content: flex-start; }
    .sfr-stations .sfr-st-meta  { grid-column: 3 / -1; }
    .sfr-stations .sfr-st-ch,
    .sfr-stations .sfr-st-cc,
    .sfr-stations .sfr-st-tgl { text-align: right; color: var(--sfr-ink); font-size: 13.5px;
      white-space: nowrap; }
    .sfr-stations .sfr-st-ch::before,
    .sfr-stations .sfr-st-cc::before,
    .sfr-stations .sfr-st-tgl::before { content: none; }
    .sfr-stations .sfr-st-head { display: grid; font-size: 11.5px; letter-spacing: .04em;
      color: var(--sfr-dim); padding-bottom: 5px; border-bottom: 1px solid var(--sfr-line); }
    .sfr-stations .sfr-st-head span { font-weight: 700; }
  }