/* ============================================================
   スマホ下の固定帯（目次＋申し込み）と、せり上がる目次
   keiko.css の .sticky-cta（帯そのもの）はそのまま使う
   ============================================================ */
.sticky-cta { gap: 1em }
.sc-toc, .toc, .toc-bg { display: none }

@media (max-width: 820px) {
  /* 帯の中身：左に小さく「目次」、右に大きく「申し込む」 */
  /* 帯：生成りの地に赤い文字。暗い写真の上でもはっきり見える */
  .sticky-cta {
    padding: 1.9em var(--gutter) calc(1.9em + env(safe-area-inset-bottom, 0px)) 0;
    background: #f2eee2;
    border-top: 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
    color: #6b1b1b
  }
  .sc-toc {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    flex: 0 0 auto;
    align-self: stretch;
    margin: -1.9em 0 calc(-1.9em - env(safe-area-inset-bottom, 0px));   /* 帯の上下いっぱいまで押せる範囲を広げる */
    padding: 0 1.2em 0 var(--gutter);
    font: inherit;
    font-size: 13px;
    letter-spacing: .18em;
    color: #6b1b1b;
    background: none;
    border: 0;
    border-right: 1px solid rgba(107, 27, 27, .25);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer
  }
  .sc-toc i {                          /* 三本線 */
    position: relative;
    display: block;
    width: 14px; height: 1px;
    background: currentColor;
    transition: background .25s
  }
  .sc-toc i::before, .sc-toc i::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1px;
    background: currentColor;
    transition: transform .3s
  }
  .sc-toc i::before { top: -5px }
  .sc-toc i::after  { top: 5px }
  .sc-toc[aria-expanded="true"] i { background: transparent }
  .sc-toc[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg) }
  .sc-toc[aria-expanded="true"] i::after  { transform: translateY(-5px) rotate(-45deg) }

  .sc-go {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .1em
  }
  .sc-go .en { color: rgba(107, 27, 27, .55) }
  @media (max-width: 430px) { .sc-go .en { display: none } }   /* 幅が足りない端末では英字を省く */
  .sc-go > span:first-child { overflow: hidden; text-overflow: ellipsis }

  /* 目次のうしろの暗幕 */
  .toc-bg {
    display: block;
    position: fixed; inset: 0;
    z-index: 98;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s
  }
  /* 目次本体：帯の上からせり上がる */
  .toc {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 99;
    padding: .6em var(--gutter) calc(var(--sc-h, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    background: rgba(242, 238, 226, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(107, 27, 27, .18);
    transform: translateY(100%);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
    visibility: hidden
  }
  .toc ol { list-style: none; margin: 0; padding: 0 }
  .toc li + li { border-top: 1px solid rgba(107, 27, 27, .14) }
  .toc a {
    display: flex;
    align-items: baseline;
    gap: 1.1em;
    padding: .95em 0;
    font-size: 14px;
    letter-spacing: .12em;
    color: rgba(107, 27, 27, .7);
    text-decoration: none;
    transition: color .3s
  }
  .toc a b {
    font-family: var(--en);
    font-weight: 400;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: rgba(107, 27, 27, .45);
    transition: color .3s
  }
  .toc li.now a, .toc li.now a b { color: #6b1b1b; font-weight: 500 }
  .toc li.now a::after {                /* 今読んでいる章の印 */
    content: "";
    margin-left: auto;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #6b1b1b;
    align-self: center
  }

  body.toc-open .toc { transform: none; visibility: visible }
  body.toc-open .toc-bg { opacity: 1; pointer-events: auto }
  body.menu-open .toc { transform: translateY(100%) }

  /* 章の見出しがヘッダーに隠れないように */
  #voices, #instructor, #works, #difference, #program, #details, #faq, #form {
    scroll-margin-top: calc(var(--head-h) + 16px)
  }
}