/* ==========================================================================
   追従目次（TOC rail）
   本文の見出しから目次を自動で作り、スクロール中は画面の端に固定して出す。

   表示は2通りで、JS が本文の左に余白があるかを実測して切り替える。
   - 余白があるとき（.is-dock）  ：本文の右に常時表示。右位置は --rail-right
   - 余白がないとき（.is-dock なし）：右下のボタンから開くシート
   本文の幅はページごとに違う（1000〜1220px）ので、固定値では計算しない。

   見出しが2つ以下のページでは JS 側が何も出さない。
   ========================================================================== */

.tocrail{
  --rail-w:200px;
  position:fixed; z-index:60;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}

/* ---------- 目次本体 ---------- */
.tocrail-panel{
  /* 各ページのCSSに「狭い画面では nav を隠す」指定があるため、クラスで打ち消す */
  display:block;
  background:#fff;
  border:1px solid #D6F2EC;
  box-shadow:0 6px 28px rgba(20,90,80,.10);
}
.tocrail-h{
  display:flex; align-items:baseline; gap:9px;
  font-family:"Shippori Mincho","Yu Mincho",serif; font-weight:600;
  font-size:14px; letter-spacing:.02em; color:#145A50;
  padding:14px 16px 11px; border-bottom:1px solid #D6F2EC;
}
.tocrail-h .cnt{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.06em; color:#fff; background:#17655A;
  border-radius:99px; padding:2px 8px;
}
.tocrail-list{
  list-style:none; margin:0; padding:6px 0;
  overflow-y:auto; overscroll-behavior:contain;
}
.tocrail-list a{
  display:grid; grid-template-columns:24px 1fr; gap:7px; align-items:baseline;
  padding:8px 16px; text-decoration:none;
  border-left:2px solid transparent;
}
.tocrail-list .n{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:10.5px;
  color:#457569; padding-top:2px;
}
.tocrail-list .t{
  font-size:13px; line-height:1.6; color:#3C4442;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tocrail-list a:hover{background:#F2FCFA}
.tocrail-list a:hover .t{color:#145A50}
.tocrail-list a:focus-visible{outline:2px solid #17655A; outline-offset:-2px}

/* インタビュー記事の質問。お客様の発言と区別する */
.tocrail-list li.is-q .t{font-weight:700; color:#262B2A}

/* 読んでいる位置 */
.tocrail-list a[aria-current="true"]{
  background:#E4FAF6; border-left-color:#17655A;
}
.tocrail-list a[aria-current="true"] .t{color:#145A50; font-weight:700}
.tocrail-list a[aria-current="true"] .n{color:#145A50}

/* ---------- 開閉ボタン（狭い画面） ---------- */
.tocrail-fab{
  position:fixed; right:18px; bottom:18px;
  display:flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:#17655A; border:0; border-radius:99px;
  padding:12px 20px; cursor:pointer;
  box-shadow:0 4px 18px rgba(20,90,80,.34);
}
.tocrail-fab:hover{background:#145A50}
.tocrail-fab:focus-visible{outline:3px solid #145A50; outline-offset:2px}
.tocrail-fab .ic{
  width:14px; height:10px; position:relative; flex:0 0 auto;
}
.tocrail-fab .ic::before,
.tocrail-fab .ic::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff;
}
.tocrail-fab .ic::before{top:0; box-shadow:0 4px 0 #fff}
.tocrail-fab .ic::after{bottom:0}

/* ---------- 表示の切り替え ---------- */
/* JS が出す前・スクロール位置が本文の外のときは隠す */
.tocrail[hidden]{display:none !important}

/* 本文の右に余白がないとき：ボタン式のシート */
.tocrail:not(.is-dock){right:0; bottom:0; left:auto; top:auto}
.tocrail:not(.is-dock) .tocrail-panel{
  position:fixed; right:18px; bottom:74px;
  width:min(320px, calc(100vw - 36px));
  border-radius:10px; overflow:hidden;
  transform:translateY(10px); opacity:0; visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.tocrail:not(.is-dock) .tocrail-list{max-height:min(56vh, 420px)}
.tocrail:not(.is-dock).is-open .tocrail-panel{transform:none; opacity:1; visibility:visible}

/* 本文の右に余白があるとき：そこに置いて常時出す */
.tocrail.is-dock{
  left:auto; right:var(--rail-right, 16px);
  top:118px; width:var(--rail-w);
}
.tocrail.is-dock .tocrail-fab{display:none}
.tocrail.is-dock .tocrail-panel{
  position:static; width:100%;
  opacity:1; visibility:visible; transform:none;
  box-shadow:none; background:transparent; border:0; border-right:1px solid #D6F2EC;
}
.tocrail.is-dock .tocrail-h{padding:0 14px 11px 0; border-bottom:0}
.tocrail.is-dock .tocrail-list{padding:0; max-height:calc(100vh - 230px)}
.tocrail.is-dock .tocrail-list a{padding:7px 14px 7px 8px;
  border-left:0; border-right:2px solid transparent; margin-right:-1px}
.tocrail.is-dock .tocrail-list a[aria-current="true"]{border-right-color:#17655A}
/* 幅が狭いので3行まで見せる。項目が多いときは目次自体がスクロールする */
.tocrail.is-dock .tocrail-list .t{-webkit-line-clamp:3}
.tocrail.is-dock .tocrail-list a:hover{background:transparent}
.tocrail.is-dock .tocrail-list a[aria-current="true"]{background:transparent}

/* 画面が低いときは目次を出さない（本文が読めなくなるため） */
@media(max-height:520px){
  .tocrail{display:none !important}
}

@media(prefers-reduced-motion:reduce){
  .tocrail-panel{transition:none}
}

/* 印刷では出さない */
@media print{
  .tocrail{display:none !important}
}

/* 目次から飛んだとき、見出しが固定ヘッダーの下に隠れないようにする */
[data-tocrail-target]{scroll-margin-top:104px}