/* 教材の本文まわりの見た目を、10教材で1つにそろえる。

   各サイトの tools/build.mjs は4つの版に分かれていて、
   箱の形も表の罫線も少しずつ違う。10本を直すと版がまたずれるので、
   束ねるときにこの1枚を各ページへ重ねる（まとめて公開.mjs）。

   ------------------------------------------------------------------
   どう見せるか

   安っぽく見えるのは、色を敷いた箱と太い差し色が画面に多いとき。
   どれも「目立たせたい」として足したものだが、全部が目立つと
   どれも目立たない。ここでは引き算で作る。

     ・見出しと引用は明朝。本文はゴシックのまま
       長文を読むのはゴシックのほうが楽なので、本文は変えない。
       見出しだけ明朝にすると、紙の本に近い格が出て、
       しかも「ここは見出し」という区別が書体そのものでつく
     ・罫は髪の毛の太さ。差し色の帯で囲うのをやめ、
       細い線と余白で区切る
     ・差し色を使うのは、押せるものと小さな目印だけ。
       地に敷かない
     ・余白は惜しまない。空きは安っぽさの反対側にある

   ------------------------------------------------------------------
   決めごと
     ・色は作らない。ページが持っている変数だけを借りる
       --bg 地 / --panel 面 / --tx 文字 / --tx2 弱い文字 / --line 罫
       --acc 差し色 / --accbg 差し色の薄敷き / --soft 薄い面 / --onacc 差し色の上の文字
       これで明るい配色・暗い配色・教材ごとの色が、何もしなくても付いてくる
     ・本文（article）の中だけに効かせる。章の目次（.inpage）や帯には触らない
     ・この1枚は各サイトの <style> より後ろに入るので、
       同じ強さの指定なら後から来たこちらが勝つ。!important は使わない
   ================================================================== */

/* 見出しと引用に使う明朝。
   ヒラギノ→游→Noto の順。どれも無い環境では serif に落ちる。 */
:root{
  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
            "YuMincho", "Noto Serif JP", "Source Han Serif JP", serif;
}

/* ==================================================================
   1. 文字組み
   日本語の長文は、1行が長いと目が戻る場所を見失う。
   全角でおよそ40字に収め、行間を広めに取る。
   ================================================================== */
.sheet article{
  max-width:42em;          /* 全角でおよそ40字 */
  margin-inline:auto;
  font-size:16.5px;
  line-height:2.05;
  letter-spacing:.012em;
  /* 行末のぶら下げと、むやみな途中改行を止める */
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}
.sheet article > p{
  margin:0 0 1.6em;
  text-wrap:pretty;        /* 最終行に1語だけ残るのを避ける（対応する環境だけ） */
}
/* 図・表は本文より広く使ってよい。字だけを40字に保つ */
.sheet article > figure,
.sheet article > .tw,
.sheet article > table{ max-width:none }

/* ---- 見出し ----
   差し色の太い帯で囲うのをやめ、短い罫を上に置いて明朝で組む。
   「前に大きく空け、後ろは詰める」ので、どの段落に属するかが目で分かる。 */
.sheet article > h2{
  font-family:var(--mincho);
  font-size:23px;
  font-weight:600;
  line-height:1.65;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;     /* 和文の字間を詰めて、見出しの塊を締める */
  margin:4.6em 0 1.1em;
  padding:0;
  border:0;
  color:var(--tx);
}
/* 見出しの上に短い罫を一本。囲うより、始まりだけを示すほうが静か。 */
.sheet article > h2::before{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-bottom:.85em;
  background:var(--acc);
  opacity:.75;
}
.sheet article > h2:first-child{ margin-top:.6em }

.sheet article > h3{
  font-family:var(--mincho);
  font-size:18.5px;
  font-weight:600;
  line-height:1.75;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  margin:3.1em 0 .8em;
  padding:0;
  border:0;
  color:var(--tx);
}
.sheet article > h4{
  font-size:15px;
  font-weight:700;
  line-height:1.75;
  letter-spacing:.04em;
  margin:2.3em 0 .6em;
  color:var(--tx2);
}

.sheet article > ul,
.sheet article > ol{ margin:0 0 1.6em; padding-left:1.5em }
.sheet article > ul > li,
.sheet article > ol > li{ margin:.55em 0 }
.sheet article > ul li > ul,
.sheet article > ol li > ol{ margin:.55em 0 0 }
.sheet article > ul > li::marker,
.sheet article > ol > li::marker{ color:var(--tx2) }

/* 強調は太らせるだけ。色まで足すと、本文が信号機になる */
.sheet article > p > strong,
.sheet article > ul > li > strong{ font-weight:700; color:var(--tx) }
/* 押せるものにだけ差し色を使う */
.sheet article > p > a,
.sheet article > ul > li > a{
  color:var(--acc);
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--acc) 40%, transparent);
}
.sheet article > p > a:hover,
.sheet article > ul > li > a:hover{ text-decoration-color:var(--acc) }

/* ==================================================================
   2. 表
   縦罫も、見出しの色帯も落とす。髪の毛の太さの横罫だけで読ませる。
   数字は幅をそろえて、桁が縦に並ぶようにする。
   ================================================================== */
.sheet article > table{
  border-collapse:collapse;
  width:100%;
  margin:2.4em 0;
  font-size:14.5px;
  line-height:1.85;
  font-variant-numeric:tabular-nums;
}
.sheet article > table th,
.sheet article > table td,
.sheet article .tw > table th,
.sheet article .tw > table td{
  padding:13px 16px 13px 0;
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.sheet article > table th:last-child,
.sheet article > table td:last-child,
.sheet article .tw > table th:last-child,
.sheet article .tw > table td:last-child{ padding-right:0 }
/* 見出し行は、地を敷かずに字を小さく締める。罫だけ少し濃くする。 */
.sheet article > table thead th,
.sheet article .tw > table thead th{
  background:transparent;
  color:var(--tx2);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.08em;
  line-height:1.7;
  padding-bottom:10px;
  border-bottom:1px solid var(--tx2);
  white-space:nowrap;
}
.sheet article > table tbody tr:last-child th,
.sheet article > table tbody tr:last-child td{ border-bottom:0 }
/* 1列目が項目名の表は、そこだけ色を落ち着かせる */
.sheet article > table tbody th,
.sheet article .tw > table tbody th{ color:var(--tx2); font-weight:700; white-space:nowrap }

/* 横に長い表は、はみ出させずに中だけ流す */
.sheet article .tw{ margin:2.4em 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.sheet article .tw > table{ margin:0 }
.sheet article .twh{ font-size:12px; color:var(--tx2); text-align:center; margin:.6em 0 0 }

/* ==================================================================
   3. 引用（原典・研究の引用）
   地に沈めず、左の細い罫だけで「ここは引いてきた言葉」と示す。
   原典の引用が多いので、ここも明朝で組む。
   ================================================================== */
.sheet article > blockquote{
  margin:2.4em 0;
  padding:.2em 0 .2em 1.5em;
  background:transparent;
  border:0;
  border-left:1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius:0;
  font-family:var(--mincho);
  font-size:16px;
  line-height:2.0;
  letter-spacing:.02em;
  color:var(--tx);
}
.sheet article > blockquote > :last-child{ margin-bottom:0 }
.sheet article > blockquote p{ margin:0 0 1em }
.sheet article > blockquote ul,
.sheet article > blockquote ol{ margin:.6em 0 1em; padding-left:1.4em }
/* 引用の中の表と強調までは明朝にしない。数字と太字はゴシックのほうが読める */
.sheet article > blockquote table,
.sheet article > blockquote strong{ font-family:inherit }
.sheet article > blockquote table{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}

/* ==================================================================
   4. 図
   枠で囲わない。薄い面に置いて、説明は短い罫の下へ。
   線を1本減らすたびに、図そのものが前へ出る。
   ================================================================== */
.sheet article > figure{
  margin:3em 0;
  padding:26px 22px;
  background:var(--soft, var(--panel));
  border:0;
  border-radius:12px;
  text-align:center;
}
.sheet article > figure svg,
.sheet article > figure img{ max-width:100%; height:auto; display:block; margin:0 auto }
.sheet article > figure figcaption{
  margin:16px auto 0;
  max-width:34em;
  font-size:12.5px;
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--tx2);
  text-align:center;
}
/* 枠の中のキャプションは、短い罫で図と分ける */
.sheet article > figure > figcaption{
  position:relative;
  margin-top:20px;
  padding-top:17px;
}
.sheet article > figure > figcaption::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:28px; height:1px;
  transform:translateX(-50%);
  background:var(--line);
}

/* ------------------------------------------------------------------
   暗記ボックス
   原典の引用と同じ <blockquote> で書かれているが、中身は性格が違う。
   引いてきた言葉ではなく「覚えるところ」なので、明朝ではなく本文と同じ
   書体にして、薄い面に載せる。引用（面なし・明朝）と並んでも取り違えない。
   見出しの ⚡ は まとめて公開.mjs が外し、class="kb" を付けている。 */
.sheet article > blockquote:has(> p.kb){
  padding:1.3em 1.5em;
  background:var(--soft, var(--panel));
  border-left:2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius:0 10px 10px 0;
  font-family:inherit;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.01em;
}
.sheet article > blockquote > p.kb{
  margin:0 0 .85em;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--acc);
}

/* ==================================================================
   5. 用語（本文中の 📘 の行）
   もとは箇条書きの1行で、語と説明の切れ目が見えなかった。
   細い罫を左に立て、語だけ明朝にして、説明を弱い色に落とす。
   目印の 📘 は まとめて公開.mjs が外し、class="gl" を付けている。
   ================================================================== */
.sheet article > ul > li.gl{
  list-style:none;
  margin:1em 0 1em -1.5em;
  padding:.1em 0 .1em 1.2em;
  border-left:1px solid var(--line);
  font-size:14.5px;
  line-height:1.95;
  letter-spacing:.015em;
  color:var(--tx2);
}
.sheet article > ul > li.gl strong{
  font-family:var(--mincho);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.03em;
  color:var(--tx);
}
/* 続けて並ぶときは、間を詰めて1つのまとまりに見せる */
.sheet article > ul > li.gl + li.gl{ margin-top:-.55em }

/* ==================================================================
   6. 節末の導線（その節の問題へ）
   読み終えた目が次に進む先を探す場所。
   色で塗った札にすると広告に見えるので、
   細い罫を上下に引いた一行にして、字だけ差し色にする。
   ================================================================== */
.sheet article .secq{ margin:2em 0 2.4em }
.sheet article .secq a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  padding:13px 2px;
  text-decoration:none;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.6;
  color:var(--acc);
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  transition:border-color .14s, padding-left .14s;
}
.sheet article .secq a::after{
  content:"→";
  margin-left:auto;
  font-size:13px;
  opacity:.5;
  transition:opacity .14s, transform .14s;
}
.sheet article .secq a:hover{
  border-top-color:color-mix(in srgb, var(--acc) 50%, transparent);
  border-bottom-color:color-mix(in srgb, var(--acc) 50%, transparent);
  padding-left:6px;
}
.sheet article .secq a:hover::after{ opacity:1; transform:translateX(3px) }

/* 章の終わりから目次へ戻る線は、読み終えた後にだけ気づけばよい */
.backtoc{ margin-top:4.5em; font-size:12.5px; letter-spacing:.02em }

/* ==================================================================
   7. 画面が狭いとき
   指で読む幅では、余白より字の大きさを優先する。
   ================================================================== */
@media (max-width:560px){
  .sheet article{ font-size:16px; line-height:1.98 }
  .sheet article > h2{ font-size:20.5px; margin-top:3.4em }
  .sheet article > h2::before{ width:28px; margin-bottom:.7em }
  .sheet article > h3{ font-size:17.5px; margin-top:2.5em }
  .sheet article > figure{ padding:18px 14px; border-radius:10px }
  .sheet article > table{ font-size:13.5px }
  .sheet article > table th,
  .sheet article > table td,
  .sheet article .tw > table th,
  .sheet article .tw > table td{ padding:11px 12px 11px 0 }
  .sheet article > blockquote{ padding-left:1.2em; font-size:15.5px }
  .sheet article > ul > li.gl{ margin-left:-1.2em; padding-left:1em }
}

/* 紙に出すときは、画面のための罫を薄くする */
@media print{
  .sheet article{ max-width:none; font-size:10.5pt; line-height:1.85 }
  .sheet article > figure{ background:transparent; padding:0 }
  .sheet article .secq{ display:none }
}