@charset "UTF-8";
/* ==========================================================================
   index-mobile.css — トップページの 430px 対応
   --------------------------------------------------------------------------
   index.html は Claude Design で作り、tools/build_page.py で静的化している。
   書き出しは全部インライン style なのでメディアクエリを持てず、
   幅の切り替えだけがどうしても抜ける。ここで補う。

   意匠は変えない。**430px で読めなくなる箇所だけ**を直す。
   フックはインライン style の値そのもの（[style*=…]）。書き出し側の
   markup に手を入れないので、Claude Design から出し直しても効き続ける。
   ========================================================================== */

/* --- 章の行：56px / 本文 / 語チップ / 矢印 の 4 列 --- */
@media (max-width:900px){
  /* 語チップが幅を取り切ってタイトル欄が 1 文字幅まで潰れる。
     チップを落として、空いた幅をタイトルと説明に返す */
  [style*="grid-template-columns:56px minmax(0,1fr) auto 28px"]{
    grid-template-columns:56px minmax(0,1fr) 28px !important;
  }
  [style*="grid-template-columns:56px minmax(0,1fr) auto 28px"] > :nth-child(3){
    display:none !important;
  }
}
@media (max-width:640px){
  [style*="grid-template-columns:56px minmax(0,1fr) auto 28px"]{
    grid-template-columns:44px minmax(0,1fr) 24px !important;
    padding-left:12px !important; padding-right:12px !important;
    gap:10px 12px !important;
  }
}

/* --- 教材の見出し：番号 / 書名 / 集計 の 3 列 --- */
@media (max-width:640px){
  /* 書名と集計を同じ行に押し込むと、書名が 2 行に折れて読みにくい。
     集計は次の行に落とす */
  [style*="grid-template-columns:auto 1fr auto"]{
    grid-template-columns:auto 1fr !important;
    padding-left:12px !important; padding-right:12px !important;
  }
  [style*="grid-template-columns:auto 1fr auto"] > :nth-child(3){
    grid-column:1 / -1 !important;
    gap:14px !important;
  }
}