/* ============================================================
   サイトマップ 固有CSS — K案フレーム × G案「雑誌の目次」翻案
   （共通分は common.css。ここは .smap 目次まわりのみ）
   ============================================================ */

/* ============================================================
   目次（G案「雑誌の目次」の翻案・主役）
   ============================================================ */
.smap{
  background:var(--paper);
  padding:clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px);
}
.smap-head{ position:relative; }
.smap-hand{
  position:absolute;
  right:0;
  top:8px;
  font-family:'Yomogi', cursive;
  font-size:1.05rem;
  color:var(--tan-deep);
  transform:rotate(-3deg);
}
.smap-groups{
  margin-top:clamp(36px, 5vw, 56px);
  display:grid;
  gap:clamp(28px, 4vw, 44px);
}
.toc-card{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(20px, 3.4vw, 40px);
}
.toc-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:10px;
}
.toc-ttl{
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:.14em;
}
.toc-en{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--ink-soft);
}
.toc-head--sky .toc-ttl{ color:var(--sky-deep); }
.toc-head--tan .toc-ttl{ color:var(--tan-deep); }
.toc-list{ list-style:none; }
.toc-list li + li{ border-top:2px dotted var(--dash); }
.trow{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-height:56px;
  padding:13px 2px;
  font-size:.98rem;
  text-decoration:none;
}
.trow .t-no{
  flex:none;
  font-size:.78rem;
  font-weight:700;
  color:var(--tan-deep);
  letter-spacing:.08em;
  font-feature-settings:"tnum" 1;
}
.trow .t-ttl{
  font-weight:900;
  line-height:1.6;
}
.trow .t-note{
  font-size:.82rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.trow .t-leader{
  flex:1;
  min-width:24px;
  border-bottom:2px dotted var(--dash);
  transform:translateY(-5px);
}
.trow .t-arw{
  flex:none;
  font-weight:900;
  color:var(--tan-deep);
}
a.trow{ transition:color .3s; }
a.trow:hover{ color:var(--tan-deep); }
a.trow:hover .t-ttl{
  text-decoration:underline wavy var(--tangerine) 2px;
  text-underline-offset:6px;
}
a.trow:hover .t-arw{ transform:translateX(4px); }
.trow .t-arw{
  display:inline-block;
  transition:transform .35s var(--ease-pop);
}
.trow.is-here .t-ttl{ color:var(--ink-soft); }
.trow .t-here{
  flex:none;
  font-family:'Yomogi', cursive;
  font-size:.95rem;
  color:var(--tan-deep);
  white-space:nowrap;
}
.trow--sub{ padding-left:2.2em; }
.trow--sub .t-ttl{ font-weight:700; font-size:.92rem; }

.smap-foot{
  margin-top:clamp(40px, 6vw, 56px);
  padding-top:22px;
  border-top:2px dashed var(--dash);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.smap-foot p{
  font-size:.9rem;
  color:var(--ink-soft);
  max-width:34em;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:768px){
  .smap-hand{
    position:static;
    display:inline-block;
    margin-top:6px;
    transform:rotate(-2deg);
  }
  .trow{ flex-wrap:wrap; row-gap:2px; }
  .trow .t-ttl{ flex:1 1 auto; }
  .trow .t-leader{ display:none; }
  .trow .t-note{
    flex:1 1 100%;
    margin-left:calc(2em + 12px);
  }
  .trow--sub .t-note{ margin-left:calc(2em + 12px); }
}