@charset "UTF-8";
/* ==========================================================================
   目次
   --------------------------------------------------------------------------
   Cocoon が生成するマークアップ（lib/toc.php）:

     <div id="toc" class="toc …">
       <input type="checkbox" class="toc-checkbox" id="toc-checkbox-1">
       <label class="toc-title" for="toc-checkbox-1">目次</label>
       <div class="toc-content">
         <ol class="toc-list">
           <li> H2 <ol><li> H3 <ol><li> H4 </li></ol></li></ol></li>

   開閉は checkbox。functions.php の is_toc_content_visible フィルターで
   初期状態を「閉じる」にして出力し、PC だけこのファイルで常に開いた状態にする。
   （デザイン案でも PC の目次は開閉しない仕様）

   H3 の表示は #toc[data-sub="on"] で切り替える。属性は toc.js が付け外しする。
   ========================================================================== */

/* --------------------------------------------------------------------------
   枠
   -------------------------------------------------------------------------- */
#toc{
  width:     100%;
  max-width: var(--w-read);
  margin:    32px 0 40px;      /* 現状 40px auto（中央寄せ）→ 本文と左端を揃える */
  padding:   0;
  border:    1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}

/* --------------------------------------------------------------------------
   見出し行
   -------------------------------------------------------------------------- */
#toc .toc-title{
  display:     flex;
  align-items: center;
  gap:         9px;
  margin:      0;
  padding:     14px 20px;
  border-bottom: 1px solid var(--c-line);
  font-size:   16px;
  font-weight: 700;
  letter-spacing: .04em;
  color:       var(--c-ink);
  text-align:  left;
}

/* 目次アイコン（紫の3本線）。現状は右端の紫い丸ボタン＋白い三角だった */
#toc .toc-title::before{
  content: "";
  flex:    none;
  width:   16px;
  height:  12px;
  background:
    linear-gradient(var(--c-brand) 0 0) 0 0    / 16px 2px no-repeat,
    linear-gradient(var(--c-brand) 0 0) 0 5px  / 16px 2px no-repeat,
    linear-gradient(var(--c-brand) 0 0) 0 10px / 11px 2px no-repeat;
}

/* Cocoon が入れる [開く]／[閉じる] の文字は使わない（SPでは下で矢印に差し替える） */
#toc .toc-title::after{ content: none; }

/* 「小見出しも表示」トグル（toc.js が挿入する） */
#toc .toc-subtoggle{
  display:     inline-flex;
  align-items: center;
  margin-left: auto;
  padding:     6px 14px;
  border:      1px solid var(--c-line);
  border-radius: 999px;
  background:  var(--c-bg);
  color:       var(--c-ink-2);
  font-size:   12px;
  font-weight: 700;
  line-height: 1;
  cursor:      pointer;
}
#toc .toc-subtoggle:hover{
  border-color: var(--c-brand);
  color:        var(--c-brand-dark);
}

/* --------------------------------------------------------------------------
   一覧
   -------------------------------------------------------------------------- */
/* 閉じているときは padding も 0 にする。
   Cocoon の閉じた状態は height:0 なので、padding が残ると折りたたんでも
   その分だけ帯が厚くなる。開いている状態にだけ padding を付ける。 */
#toc .toc-content{ padding: 0; }
#toc .toc-checkbox:checked ~ .toc-content{
  padding: 8px 20px 18px;      /* 現状 6px 40px 16px */
}

#toc .toc-list{
  margin:     0;
  padding:    0;
  border-top: 0;               /* 現状は見出しの下に二重線が出ていた */
  list-style: none;
  counter-reset: toc;
}

/* --- 第1階層 ＝ H2 -------------------------------------------------------- */
#toc .toc-list > li{
  margin:  0;
  padding: 0;
  border-bottom: 1px dashed var(--c-line);
  font-weight: 700;
}
#toc .toc-list > li:last-child{ border-bottom: 0; }

#toc .toc-list > li > a{
  display:     flex;
  gap:         10px;
  padding:     11px 0;
  font-size:   15px;
  line-height: 1.6;
  color:       var(--c-ink);
}
#toc .toc-list > li > a:hover{ color: var(--c-brand-dark); }

/* 章番号のバッジ。現状は全階層が同じ紫の点で階層が分からなかった */
#toc .toc-list > li > a::before{
  counter-increment: toc;
  content: counter(toc);
  flex:    none;
  width:   22px;
  height:  22px;
  margin-top: 1px;
  border-radius: 5px;
  background: var(--c-brand-tint);
  color:      var(--c-brand-deep);
  font-size:  12px;
  display:    grid;
  place-items: center;
}

/* --- 第2階層 ＝ H3 -------------------------------------------------------- */
/* 既定は非表示。「小見出しも表示」で data-sub="on" になったときだけ出す */
#toc .toc-list > li > ol{
  display: none;
  margin:  0 0 10px;
  padding: 0 0 0 32px;
  list-style: none;
}
#toc[data-sub="on"] .toc-list > li > ol{ display: block; }

#toc .toc-list > li > ol > li{
  margin:  0;
  padding: 0;
  border:  0;
  font-weight: 400;
}
#toc .toc-list > li > ol > li > a{
  display:     block;
  padding:     5px 0;
  font-size:   14px;
  line-height: 1.6;
  color:       var(--c-ink-2);
}
#toc .toc-list > li > ol > li > a::before{
  content: "– ";
  color:   var(--c-ink-3);
}
#toc .toc-list > li > ol > li > a:hover{ color: var(--c-brand-dark); }

/* --- 第3階層 ＝ H4 -------------------------------------------------------- */
/* 目次には出さない。この記事だけで18項目あり、目次が1画面を超える主因だった */
#toc .toc-list ol ol{ display: none; }

/* --------------------------------------------------------------------------
   PC（835px以上）
   Cocoon は閉じた状態を visibility:hidden / height:0 / opacity:.2 で表現する。
   PC では checkbox の状態にかかわらず常に開いた状態にする。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 835px){
  #toc .toc-content{
    visibility: visible;
    height:     auto;
    opacity:    1;
    padding:    8px 20px 18px;
  }
  #toc .toc-title{ cursor: default; }
}

/* --------------------------------------------------------------------------
   SP（834px以下）
   折りたたみが既定。開閉は Cocoon の checkbox がそのまま担う。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  #toc{ margin: 24px 0 32px; }

  #toc .toc-title{
    padding:   12px 16px;
    font-size: 15px;
    cursor:    pointer;
  }

  /* 閉じているときは見出しの下線を消して1本の帯に見せる */
  #toc .toc-checkbox:not(:checked) + .toc-title{ border-bottom: 0; }

  /* 開閉の矢印 */
  #toc .toc-title::after{
    content: "";
    flex:    none;
    width:   8px;
    height:  8px;
    margin-left:  auto;
    margin-right: 4px;
    border-right:  2px solid var(--c-ink-3);
    border-bottom: 2px solid var(--c-ink-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
  }
  #toc .toc-checkbox:checked + .toc-title::after{
    transform: rotate(-135deg) translateY(2px);
  }

  #toc .toc-checkbox:checked ~ .toc-content{ padding: 8px 16px 16px; }

  #toc .toc-list > li > a{ font-size: 14.5px; }

  /* SPは大見出し（H2）だけの短い目次に固定する */
  #toc .toc-subtoggle{ display: none; }
  #toc[data-sub="on"] .toc-list > li > ol{ display: none; }
}