@charset "UTF-8";
/* ==========================================================================
   index-fold.css — トップページの教材カードを、たたんで開けるようにする
   --------------------------------------------------------------------------
   教材が 17 章まで伸びて、トップページの大半が章の一覧で埋まった。
   見出しを押すと開き、もう一度押すと閉じる。

   **たたむのは JavaScript の仕事にする。** HTML は開いた状態で配ってあり、
   JS が動いてはじめて `.is-closed` が付く。スクリプトが止まっても
   章の一覧は読める（進行的強化）。

   高さの遷移は max-height ではなく grid-template-rows の 0fr → 1fr で行う。
   中身の高さを決め打ちしないので、章が増えても直す場所がない。
   ========================================================================== */

/* 見出し（開閉ボタン）。書き出しのインライン style をそのまま着せているので、
   ここでは button の既定を消して、押せることだけを足す */
.mat-head{
  -webkit-appearance:none; appearance:none;
  width:100%; font:inherit; color:inherit; text-align:left;
  cursor:pointer; border:0;
}
.mat-head:hover .mat-chev{ color:#800020; }
.mat-head:focus-visible{ outline:2px solid #800020; outline-offset:-3px; }

/* 開閉の記号。::before は下向きの山（∨）。
   開いているときは反転して上向き（∧ ＝ たためる）、閉じていれば下向き（∨ ＝ 開ける） */
.mat-chev{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:auto; flex:0 0 auto;
  color:#590016; transform:rotate(-180deg);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1);
}
.mat-chev::before{
  content:""; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.is-closed .mat-chev{ transform:rotate(0deg); }

/* 本体。0fr ↔ 1fr で高さが動く。内側で overflow を切る */
.mat-body{ display:grid; grid-template-rows:1fr; }
.mat-body__inner{ overflow:hidden; min-height:0; }
.is-closed .mat-body{ grid-template-rows:0fr; }

/* 遷移は最初の一枚を描いたあとに許す。
   読み込み直後にたたむ動きが走って見えるのを防ぐ */
.mat-anim .mat-body{ transition:grid-template-rows 340ms cubic-bezier(.2,.8,.2,1); }
.mat-anim .mat-body__inner{ transition:opacity 260ms ease; }
.mat-anim.is-closed .mat-body__inner{ opacity:0; }

/* 閉じているときは下の罫が二重に見えるので、見出しの罫を消す */
.is-closed .mat-head{ border-bottom-color:transparent !important; }

@media (prefers-reduced-motion:reduce){
  .mat-anim .mat-body,
  .mat-anim .mat-body__inner,
  .mat-chev{ transition:none !important; }
}

/* ==========================================================================
   ノートの行（.nrow）── トップページのノート節
   --------------------------------------------------------------------------
   ほかの節の行は書き出しのインライン style をそのまま着ているが、
   ノートだけは**入れ子になる**（『チ。』の八話が組で入る）。
   親と子で寸法を二度書かないよう、意匠はここに集める。

   日付は右の桁。行の下に足すと篇の一つ一つが背高になり、
   iPhone の一画面に入る篇の数が半分になってしまう。
   ========================================================================== */

.nrow{
  position:relative;
  display:grid; grid-template-columns:42px minmax(0,1fr) auto 20px;
  align-items:center; gap:0 14px;
  width:100%; margin:0; padding:11px 18px 11px 16px;
  border:0; border-bottom:1px solid #EFE6DE;
  background:transparent; color:inherit; font:inherit; text-align:left;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  transition:background 260ms cubic-bezier(.2,.8,.2,1);
}
/* 左の罫。ふだんは無く、指を置くと上から降りてくる */
.nrow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,#800020,#C9A227);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform 320ms cubic-bezier(.2,.8,.2,1);
}
.nrow:last-child{ border-bottom:0; }

.nrow__no{
  font-family:'Noto Serif JP',serif; font-size:17px; font-weight:200;
  color:#800020; letter-spacing:.04em; line-height:1;
  font-variant-numeric:tabular-nums; opacity:.66;
  transition:opacity 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}
.nrow__body{ min-width:0; }
.nrow__title{
  display:block; font-size:14.5px; font-weight:400; letter-spacing:.05em;
  line-height:1.5; color:#000000;
  transition:color 220ms ease;
}
.nrow__lead{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:2px;
  font-size:11px; line-height:1.6; color:#5A5A5A;
}
/* 右の桁 ── 節数と日付。等幅で桁をそろえる */
.nrow__side{
  display:grid; justify-items:end; gap:1px; white-space:nowrap;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:8.5px; letter-spacing:.1em; color:#7A7069;
}
.nrow__n{ color:#590016; letter-spacing:.14em; margin-bottom:2px; }
.nrow__day i{
  font-style:normal; color:#A79385; letter-spacing:.14em;
  margin-right:.55em; font-family:'Noto Serif JP',serif; font-size:8.5px;
}
/* 進む印。指を置くと一歩ぶん右へ出る */
.nrow__go{
  justify-self:end; width:20px; height:20px; position:relative; opacity:.5;
  transition:opacity 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}
.nrow__go::before{
  content:""; position:absolute; left:5px; top:6px; width:6px; height:6px;
  border-top:1px solid #590016; border-right:1px solid #590016;
  transform:rotate(45deg);
}

@media (hover:hover){
  .nrow:hover{ background:linear-gradient(90deg,#FFF7F0 0%,rgba(255,239,226,0) 78%); }
  .nrow:hover::before{ transform:scaleY(1); }
  .nrow:hover .nrow__no{ opacity:1; transform:translateX(2px); }
  .nrow:hover .nrow__title{ color:#590016; }
  .nrow:hover .nrow__go{ opacity:1; transform:translateX(3px); }
}
.nrow:focus-visible{ outline:2px solid #800020; outline-offset:-3px; }

/* --- 組（『チ。』の八話）---------------------------------------------- */
.nfold{ border-bottom:1px solid #EFE6DE; }
.nfold .nrow--head{ border-bottom:0; }
.nrow--head .nrow__no{ opacity:1; }
.nrow__chev{ margin:0; width:20px; height:20px; color:#590016; }

.nfold__body{ display:grid; grid-template-rows:1fr; }
.nfold__inner{
  overflow:hidden; min-height:0;
  margin:0 0 0 26px; padding-left:16px;
  border-left:1px solid #F2DFC9;
  background:linear-gradient(90deg,rgba(255,247,240,.72),rgba(255,247,240,0) 60%);
}
.nfold.is-shut .nfold__body{ grid-template-rows:0fr; }
.nfold.is-shut .nrow__chev{ transform:rotate(0deg); }

/* 子の行は一段小さく。開いたときだけ順に降りてくる */
.nrow--sub{ padding:9px 18px 9px 0; border-bottom:1px solid #F3EAE2; }
.nrow--sub .nrow__no{ font-size:14px; }
.nrow--sub .nrow__title{ font-size:13.5px; }
.nrow--sub .nrow__lead{ -webkit-line-clamp:1; font-size:10.5px; }
.nrow--sub::before{ left:-17px; }
/* 枝の印 ── 縦の罫から一本ずつ横に出る */
.nrow--sub::after{
  content:""; position:absolute; left:-16px; top:50%; width:9px; height:1px;
  background:#E7D3BC;
}

.nfold-anim .nfold__body{ transition:grid-template-rows 380ms cubic-bezier(.2,.8,.2,1); }
.nfold-anim .nrow--sub{
  transition:opacity 300ms ease, transform 380ms cubic-bezier(.2,.8,.2,1),
             background 260ms cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 34ms);
}
.nfold-anim.is-shut .nrow--sub{
  opacity:0; transform:translateY(-6px); transition-delay:0ms;
}

/* --- iPhone の縦持ち --------------------------------------------------- */
@media (max-width:520px){
  .nrow{ grid-template-columns:32px minmax(0,1fr) auto; gap:0 11px;
         padding:10px 14px 10px 12px; }
  /* 開閉の記号は落とさない ── 落とすと、押せる行だと分からなくなる */
  .nrow--head{ grid-template-columns:32px minmax(0,1fr) auto 20px; }
  .nrow__go{ display:none; }
  .nrow__no{ font-size:15px; }
  .nrow__title{ font-size:13.5px; letter-spacing:.03em; }
  .nrow__lead{ font-size:10.5px; line-height:1.55; }
  .nrow__side{ font-size:8px; letter-spacing:.06em; }
  .nrow__day i{ font-size:8px; margin-right:.35em; }
  .nfold__inner{ margin-left:18px; padding-left:12px; }
  .nrow--sub{ padding:8px 14px 8px 0; }
  .nrow--sub::after{ left:-12px; width:7px; }
}
/* さらに狭い窓では、篇の紹介文を落として題だけにする */
@media (max-width:380px){
  .nrow__lead{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .nrow, .nrow::before, .nrow__no, .nrow__go,
  .nfold-anim .nfold__body, .nfold-anim .nrow--sub{ transition:none !important; }
  .nfold-anim.is-shut .nrow--sub{ opacity:1; transform:none; }
}