@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/NotoSansJP-400.woff) format('woff')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/NotoSansJP-500.woff) format('woff')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/NotoSansJP-700.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexSans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexSans-400i.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/IBMPlexSans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:500;font-display:swap;
  src:url(fonts/IBMPlexSans-500i.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/IBMPlexSans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/IBMPlexSans-700.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/Mulish-400.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/Mulish-500.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/Mulish-600.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/Mulish-700.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/Mulish-900.woff2) format('woff2')}

:root{
  --ink:#0e1217; --sub:#232b35; --mute:#525c69;
  --line:#ccd3db; --rule:#e0e5eb; --panel:#f5f7f9;
  --red:#b0362b; --blue:#1d4b7d;
  /* 縦の余白の目盛り。本文1行(17px × 1.8)を1として、すべての余白をこの倍数で
     取る。対の内側1、対の間2、見出しの上3・下1、設問→選択肢 0.5、選択肢どうし 0.3、
     式は前の段落に属するものとして上下1、囲みは外2・内1 */
  --u:1.8em;
  /* 和文も同梱する。環境任せだと読者の機械で書体も太さも変わるため。
     持っているのは 500 と 700 だけなので、和文にはこの二つしか使わない */
  --jp:'Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;  /* 同梱は 400/500/700 */
  --en:'IBM Plex Sans','Noto Sans JP',"Segoe UI",sans-serif;
  --hd:'Mulish',var(--jp);
}
*{box-sizing:border-box}
/* clip は hidden と違って上の帯の追従を壊さない。横には絶対に動かさない */
/* 根に overflow-x を掛けない。全26編・複数の幅で測って、送り枠の外へ
   はみ出すものが無いことを確かめてある。根に掛けると、文書のスクロールが
   合成側から本体側へ落ちることがある */
html{-webkit-text-size-adjust:100%}
/* 游ゴシックもIBM Plex Sansも Regular は画面で細く見えるので、地の重さを
   Medium にする。太字はさらに上の重さで区別する */
/* 原書は本文に生のURLを書いている(…/energy-skate-park-basics など)。空白が
   無いので一語として扱われ、狭い画面では段からはみ出して横揺れの元になる。
   行に収まらない語だけ途中で折る(収まる語には効かないので、和文にも英文にも
   悪さをしない) */
body{margin:0;background:#fff;color:var(--ink);font-family:var(--jp);
  font-size:17px;font-weight:500;line-height:1.8;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- 上の帯 ---- */
/* 帯は画面に貼りついたままなので、backdrop-filter を掛けると、スクロールの
   一コマごとに裏の画素を読み戻してぼかし直すことになる。携帯ではこれが指に
   追いつかない原因になる。もともと背景は94%の白でほとんど透けていなかったので、
   不透明にしてぼかしをやめる。見た目はほぼ変わらない */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:0 22px;height:50px;background:#fff;
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--hd);font-weight:700;font-size:15px;letter-spacing:.06em;
  color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--red)}
.crumb{font-size:14px;color:var(--mute);overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;flex:1}
.crumb b{color:var(--line);font-weight:400;margin:0 2px}
.navbtn{display:none;width:34px;height:30px;padding:7px 6px;margin-left:-6px;
  background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.navbtn span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:.2s}
body.nav .navbtn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav .navbtn span:nth-child(2){opacity:0}
body.nav .navbtn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.scrim{display:none}
.modes{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  flex:none;margin-left:auto}
.modes button{border:0;background:#fff;color:var(--sub);font-family:var(--jp);
  font-size:13.5px;font-weight:700;padding:5px 12px;cursor:pointer;
  border-left:1px solid var(--line)}
.modes button:first-child{border-left:0}
.modes button[aria-pressed=true]{background:var(--ink);color:#fff}

/* ---- 版面 ---- */
.wrap{display:grid;grid-template-columns:272px minmax(0,1fr);gap:0;
  max-width:1200px;margin:0 auto;padding:0 22px}
.wrap.solo{grid-template-columns:minmax(0,1fr);max-width:840px}
main{min-width:0;padding:34px 0 90px 46px;max-width:46em}
.wrap.solo main{padding-left:0}

/* ---- 脇の目次 ---- */
.side{border-right:1px solid var(--rule)}
.sticky{position:sticky;top:50px;max-height:calc(100vh - 50px);overflow:auto;
  padding:30px 22px 40px 0;font-size:14.5px;line-height:1.66}
.sk{margin:0 0 10px;font-family:var(--hd);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.toc,.chs{list-style:none;margin:0 0 30px;padding:0}
.toc li{margin:0 0 6px}
.toc .l2 a{color:var(--ink);font-weight:700;font-size:15px}
.toc .l3{padding-left:12px}
.toc .l3 a{color:var(--sub);font-weight:500}
/* 節の下の見出しと他章の一覧は畳む。全部並べると1章40行＋他章27行になり、
   読みながら脇を見ても、読みたい話がどこにあるか拾えない。
   開け閉めは行の頭の三角だけが受け持つ。節の名前を押したときは飛ぶだけで、
   開いたり閉じたりしない(押すたびに結果が変わると、行き先を選べない) */
.toc>li,.chsf{position:relative;padding-left:26px}
.toc .sc>summary,.chsf>summary{list-style:none;display:block}
.toc .sc>summary::-webkit-details-marker,
.chsf>summary::-webkit-details-marker{display:none}
/* 三角。指で押せる大きさ(24×26)の枠を行の頭に置き、その中央に描く */
.tw{position:absolute;left:0;top:0;width:24px;height:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--sub)}
.tw::before{content:'';width:0;height:0;
  border-left:8px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.sc[open]>summary>.tw::before,.chsf[open]>summary>.tw::before{
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid currentColor;border-bottom:0}
.tw:hover{color:var(--red)}
.toc .l3s{list-style:none;margin:7px 0 13px;padding:0 0 0 2px;
  border-left:1px solid var(--rule)}
.chsf{margin:0 0 30px}
.chsf>summary{cursor:pointer}
.chsf .chs{margin-bottom:0}
.cnt{margin-left:.5em;font-size:10px;letter-spacing:.08em;color:var(--mute)}
.chs li{margin:0 0 5px}
.chs a{color:var(--sub);font-weight:500}
.chs .here a{color:var(--red);font-weight:700}
.mute,.mute a{color:#6b7480;cursor:default}

/* ---- 見出し ---- */
.ph{margin:0 0 2.4em;padding:0 0 1.1em;border-bottom:2px solid var(--ink)}
.ph .num{display:block;font-family:var(--hd);font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--red);margin-bottom:8px}
.ph .ja{display:block;font-size:29px;font-weight:700;line-height:1.35;letter-spacing:.01em}
.ph .en{display:block;font-family:var(--en);font-size:16.5px;font-weight:500;
  color:var(--sub);margin-top:7px;line-height:1.5}
.ph .pr{display:block;font-size:13px;font-weight:500;color:var(--mute);margin-top:13px;
  font-family:var(--en)}
.bh{margin:0 0 6px;font-size:30px;line-height:1.3}
.bh .ja{font-weight:700}
.bh .en{display:block;font-family:var(--en);font-size:15px;font-weight:400;color:var(--sub)}
.lead{color:var(--sub);font-size:14px;margin:0 0 30px}

h2,h3{scroll-margin-top:64px}
/* 見出しの下は段落内の行間(1.8em)より明らかに広く。同じだと見出しが本文に貼りつく */
h2{margin:calc(3*var(--u)) 0 var(--u);padding-top:calc(.5*var(--u));border-top:1px solid var(--line)}
/* 節の始まりだけ濃い線にする。畳みの区切りと同じ薄い線だと、話題の変わり目が
   区切りに埋もれて見分けが付かない。章の題は2pxの濃い線なので、章2px・節1px・
   畳み1px薄の三段にして、線の強さで階層が読めるようにする */
h2[id^="sec-"]{border-top:1px solid var(--ink)}
h2 .en{display:block;font-family:var(--hd);font-size:15px;font-weight:700;
  color:var(--red);letter-spacing:.01em;line-height:1.5}
h2 .ja{display:block;font-size:22px;font-weight:700;line-height:1.5;margin-top:4px}
h3{margin:calc(2*var(--u)) 0 var(--u)}
h3 .en{display:block;font-family:var(--hd);font-size:14.5px;font-weight:700;
  color:var(--mute);letter-spacing:.02em}
h3 .ja{display:block;font-size:18.5px;font-weight:700;line-height:1.6;margin-top:2px}
/* 小見出し(例題の題、問題の種別など)。本文と同じ大きさで太く */
h4{margin:calc(1.5*var(--u)) 0 calc(.5*var(--u));scroll-margin-top:64px}
h4 .en{display:block;font-family:var(--en);font-size:1em;font-weight:700;color:var(--ink)}
h4 .ja{display:block;font-size:1em;font-weight:700;line-height:1.6;margin-top:2px}
.box h4{margin:0 0 calc(.5*var(--u))}

/* ---- 対訳の対 ---- */
/* 英と和の間は段落内の行間(1.8em)より明らかに広くないと、どこで言語が
   替わるのか読めない。字を大きくしたときに勝手についてくるよう em で持つ。
   対の外側は内側のさらに倍にして、対の切れ目を内側より強くする。 */
/* 本文では英も和も同じ濃さ。言語の別は書体が示すので、色を薄くして区別しない */
.pair{margin:0 0 calc(2*var(--u))}
/* 英文は地の大きさそのまま。和文は同じ字送りでも大きく見えるので少し落とす */
.pair .en{margin:0;font-family:var(--en);font-size:1em;font-weight:500;
  line-height:1.62;color:var(--ink)}
/* 和文は漢字が四角く詰まり語の切れ目も無いので、英文と同じ箱に流すと字の壁になる。
   大きさは英文と同じにし、行間を広く、字間をわずかに空け、行長を40字で止める
   (英文の段はそのままの幅)。小さく組むと1行の字数が増えて壁が密になる */
.pair .ja{margin:var(--u) 0 0;font-size:1em;line-height:1.95;letter-spacing:.02em;max-width:40em}
.pair.cap{margin-bottom:calc(2*var(--u))}
.pair.cap .en{font-size:.94em}
.pair.cap .ja{font-size:.9em;margin-top:calc(.75*var(--u))}
.pair .en:empty,.pair .ja:empty{display:none}
/* 設問の直後に来る選択肢だけの対。設問との間は対の間より詰める */
.pair:has(+ .pair.opts){margin-bottom:calc(.5*var(--u))}
/* 別行の式は直前の段落に属する。段落との間は対の内側と同じ1 */
.pair:has(+ .eq){margin-bottom:var(--u)}

/* ---- 授業用の囲み ---- */
/* 原書が色付きの罫で囲んでいる箱(SNAP LAB / VIRTUAL PHYSICS)。地の文の流れを
   切るので、既定は畳んでおく。<details> は Safari を含め全ブラウザで既定は閉 */
.lab{border:1px solid var(--lab,#0078a3);border-radius:3px;margin:calc(2*var(--u)) 0}
.lab>summary{cursor:pointer;list-style:none;padding:.8em 1em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em 1em}
.lab>summary::-webkit-details-marker{display:none}
.lab>summary::after{content:"開く";margin-left:auto;font-size:12px;color:var(--lab);
  white-space:nowrap;align-self:center}
.lab[open]>summary::after{content:"たたむ"}
.lab>summary:hover{background:var(--panel)}
.lab[open]>summary{border-bottom:1px solid var(--lab)}
.lab .lk,.lab .lt{display:inline-flex;align-items:baseline;gap:.5em}
.lab .lk .en{font-family:var(--hd);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--lab)}
.lab .lk .ja{font-size:13px;font-weight:700;color:var(--lab)}
.lab .lt{gap:.6em}
.lab .lt .en{font-family:var(--hd);font-size:15px;font-weight:600;color:var(--ink)}
.lab .lt .ja{font-size:16px;font-weight:700;color:var(--ink)}
.labbody{padding:var(--u) 1.15em .2em}
.labbody>*:first-child{margin-top:0}

/* ---- 選択肢・箇条書き ---- */
/* 記号を字面の外に出して肩を揃える。折り返しても本文がぶら下がる */
.pp{display:block;margin-top:var(--u)}
.pp:first-child{margin-top:0}
.opt,.bul{display:block;margin-top:calc(.3*var(--u))}
.opt{padding-left:1.75em;text-indent:-1.75em}
.bul{padding-left:1em;text-indent:-1em}
.opt:first-child,.bul:first-child{margin-top:0}

/* ---- 重要語の並び ---- */
/* 原書では段組みで並んでいる語が1行に潰れて繋がってしまうので、語ごとに立てる */
.terms .en,.terms .ja{display:block}
.term{display:inline-block;margin-right:1.1em}
.term::before{content:"・";color:var(--mute)}
.terms .ja{font-weight:700}
/* 章末の用語集。語を太字、定義を並字にして1件ずつ立てる */
.gl{display:block;margin-top:calc(.3*var(--u));padding-left:1.15em;text-indent:-1.15em}
.gl::before{content:"・";color:var(--mute)}
.gl:first-child{margin-top:0}
.gl b{font-weight:700}

/* ---- 添字 ---- */
/* line-height:0 にしておかないと、添字のある行だけ行間が広がる */
sub,sup{font-size:.72em;line-height:0;font-weight:inherit}
sub{vertical-align:-.26em}
sup{vertical-align:.44em}

/* ---- 本文に食い込む頭見出し ---- */
/* 原書は頭見出しや例題の題を、本文と違う書体で本文の頭に食い込ませて組んでいる。
   画面では書体の違いだけでは切れ目が見えないので、英文も訳文も同じ罫で囲む。
   題は最長34字あるので、折り返しを止めず箱の中で折り返させる
   (inline-block なので箱は一つの四角のまま縦に伸びる) */
.rl{display:inline-block;border:1px solid var(--line);border-radius:2px;
  padding:.08em .6em .12em;margin-right:.55em;font-size:.88em;font-weight:700;
  line-height:1.5;color:var(--sub);vertical-align:.06em;max-width:100%}

/* ---- 数式(本文の中) ---- */
/* 数式は周りの文字と同じ色。英文を濃くしたのにここだけ薄いと浮く */
/* 選択肢などに式が丸ごと入ると、狭い画面では段より広くなる(実測: 第16章で
   幅551px、段は313px)。幅を段で止める。viewBox があるので、はみ出す式だけが
   比を保ったまま縮む。届いている式は元の寸法のまま */
.mi{display:inline-block;fill:currentColor;color:inherit;width:auto;max-width:100%}
/* 原書の版面で行末に折り返された式は、行ごとに切り出して横に並べ直している。
   断片どうしがくっつかないよう、間にわずかな空きを入れる */
.mw + .mw{margin-left:.18em}

/* ---- 数式(原典の MathML) ---- */
/* 原書の式はベクタ図形で文字を持たないので、原典(OpenStax の CNXML)から MathML を
   取って差し込む。文字として選べ、検索も読み上げも効く。コピーすると LaTeX になる
   (site.js)。書体は本文(IBM Plex Sans)と同じ一族の IBM Plex Math(OFL)を同梱する。
   数式用の MATH 表を持つので、分数は分子の上に分母を積み、根号や括弧は中身に合わせて
   伸びる。環境任せだと Android などで数式用の書体が無く、分数や根号が崩れる */
@font-face{font-family:'IBM Plex Math';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexMath-sub.woff2) format('woff2')}
math{font-family:'IBM Plex Math','Cambria Math','STIX Two Math',math;font-size:1em;line-height:1.3}
math[display=block]{display:block;margin:0;padding:.15em 0;text-align:left}
/* 段より広い行中の式(site.js が測って包む)。横に送れる枠。基線が変わるので中央で揃える */
.mscroll{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;
  vertical-align:middle;overscroll-behavior-x:contain}
/* 別行立ての式。直前の段落に属するので上下は1。式どうしを積むときも1。
   幅のある式は枠の中で横に送る(頁を横に揺らさない) */
.eq{margin:var(--u) 0 var(--u) .3em;font-size:1.08em;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain}
.eq math+math{margin-top:var(--u)}
/* 式の脇に題が付くもの(重要な式)。題と式を横に並べ、狭ければ折り返す */
.eq.lbl{display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1.4em}
.eq.lbl math[display=block]{display:inline-block;overflow:visible}
.eql{font-family:var(--en);font-size:.88em;font-weight:500;color:var(--sub)}
/* 式を含む短い本文(選択肢など)を原典の字で組み直したもの。英文と同じ書体 */
.eq.txt{font-family:var(--en);font-size:1em;line-height:1.7}
.eq.txt .eql{margin-right:.6em}
/* 原典が LaTeX でしか持たない式(練習問題)は図形のまま。コピー用の LaTeX を添える */
.mx{display:inline}
/* 用語集で前のページから続いた定義の残り */
.gl.cont{text-indent:0}
.gl.cont::before{content:""}
/* 索引。語ごとに立て、ページ番号は各章へ飛ぶ */
.ix{display:block;margin-top:.3em;padding-left:1.4em;text-indent:-1.4em}
.ix .pg{font-family:var(--en);font-size:.92em}
/* 索引の訳は「english 日本語 頁」の形で、英語をそのまま含んでいる。
   対訳のままだと同じ一覧が二度並ぶので、英語だけの一覧は英文表示のときに出す */
html:not(.m-en) .pair.index .en{display:none}
.ixl{display:block;font-family:var(--hd);font-weight:700;font-size:15px;color:var(--red);
  margin:1.4em 0 .4em}
.ixl:first-child{margin-top:0}

/* ---- 図・表・別行の式 ---- */
/* 図そのものは原書の相対幅を保ち、説明文は本文の幅いっぱいに流す。
   幅が足りない画面では縮めずに横へ流す(表の字が読めなくなるため) */
/* 上下を .pair の下余白と同じ値にする。余白は相殺されて大きいほうが残るので、
   揃えておかないと図の上と下で幅が違ってしまう(狭い画面用の値も同じ) */
figure{margin:calc(2*var(--u)) 0;width:100%;scroll-margin-top:64px}
/* 表を指で送って端に着いても、その勢いをページ側へ渡さない(横揺れの元) */
.figbox{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.figbox>.art{display:block;width:min(var(--fw,100%),100%);min-width:var(--mw,0px);
  height:auto;color:var(--ink);fill:currentColor}
.figbox>img{display:block;width:min(var(--fw,100%),100%);height:auto;border-radius:2px}
figcaption{margin-top:12px;padding-left:14px;border-left:2px solid var(--line)}
figcaption .en{display:block;font-family:var(--en);font-size:15px;font-weight:500;
  line-height:1.6;color:var(--sub)}
figcaption .ja{display:block;font-size:14.2px;line-height:1.74;color:var(--sub);
  margin-top:calc(.75*var(--u))}

/* ---- 原書の囲み ---- */
/* 章末の用語の羅列と問題の束は畳む。読み物と引く物を同じ顔で並べない */
details.fold{margin:calc(2*var(--u)) 0 0;border-top:1px solid var(--line)}
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:.8em;padding:calc(.8*var(--u)) 0}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'開く';margin-left:auto;flex:none;
  font-family:var(--hd);font-size:11px;letter-spacing:.12em;color:var(--sub);
  border:1px solid var(--line);border-radius:2px;padding:4px 10px}
details.fold[open]>summary::after{content:'閉じる'}
details.fold>summary:hover::after{border-color:var(--red);color:var(--red)}
.fh .en{display:block;font-family:var(--hd);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fh .ja{display:block;font-size:19px;font-weight:700;line-height:1.5;margin-top:2px}
.foldbody{padding:calc(.5*var(--u)) 0 calc(2*var(--u))}
/* 閉じた畳みは2行しかないので、次の見出しとの間が穴になる。詰める。
   ただし新しい節の見出し(id が sec-…)は詰めない。そこは話題の変わり目で、
   上の罫と広い空きがその印になっている。節の終わりに「練習問題」「理解の確認」の
   畳みが並ぶようになってから、この規則が全75節のうち50節でその印を消していた */
details.fold+h2:not([id^="sec-"]),details.fold+h3,
details.fold+details.fold{margin-top:calc(1.2*var(--u))}
details.fold:not([open])+h2:not([id^="sec-"]),
details.fold:not([open])+h3{border-top:0;padding-top:0}
.foldbody>h2:first-child,.foldbody>h3:first-child{margin-top:0;border-top:0;padding-top:0}
/* 設問は読み物と別の組み。問い1件を一つの塊にして、間を空ける */
.q{margin:0 0 calc(1.5*var(--u));padding-left:.9em;border-left:2px solid var(--rule)}
.q .pair{margin-bottom:calc(.45*var(--u))}
.q>.pair:last-child{margin-bottom:0}
.q .pair .ja{margin-top:calc(.55*var(--u))}
.q .opt{margin-top:calc(.2*var(--u));font-size:.96em}
b.qn{font-family:var(--hd);font-weight:700;color:var(--red);margin-right:.5em}
/* 設問の頭に来る節の名は、原書では見出しの札。ここでは行に落として小さく */
.q .rl{display:block;border:0;background:none;padding:0;
  margin:0 0 calc(.25*var(--u));font-family:var(--hd);font-size:.82em;
  font-weight:700;letter-spacing:.03em;color:var(--mute)}
.q p.ja .opt{padding-left:1.4em;text-indent:-1.4em}
/* 用語は1件ずつ対にしてある。本文と同じ空け方だと間延びする */
/* 訳の付かなかった用語は片側が空く。空の段は場所を取らせない
   (件数は組むたびに数えて出している。黙って消しているのではない) */
.pair.gloss .ja:empty{display:none}
.fold.terms .pair.gloss{margin-bottom:var(--u)}
.fold.terms .pair.gloss .ja{margin-top:calc(.3*var(--u))}
.box{margin:calc(2*var(--u)) 0;padding:var(--u) 22px;border-radius:3px;border:1px solid rgba(0,0,0,.06)}
/* 濃い地の囲みでは、文字の側を反転させる */
.box.dark{--ink:#fff;--sub:rgba(255,255,255,.90);--mute:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.34);--rule:rgba(255,255,255,.22);--red:#ffdad3;
  --blue:#dcecff;color:#fff;border-color:rgba(255,255,255,.16)}
.box.dark a{color:#fff;text-decoration:underline}
.box>figure:first-child,.box>h2:first-child,.box>h3:first-child{margin-top:0}
.box>*:last-child{margin-bottom:0}
.box h2{border-top:0;padding-top:0;margin-top:26px}

/* ---- 原典(組版済みHTML)から組んだ本の箱 ---- */
/* 例題・注(手順・やってみよう・教材)・解答。物理の色地の囲みと違い、地は淡く、
   名札を頭に立てる */
.box.ex,.box.note,.box.sol{background:var(--panel);border-color:var(--rule);padding:var(--u) 22px .2em}
.box.sol{background:#fff;border:1px solid var(--line)}
.box.note{background:#f9fafb}
.bxh{margin:0 0 calc(.5*var(--u));font-family:var(--hd);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--red);text-transform:uppercase}
.bxh .ja{margin-left:.9em;font-family:var(--jp);font-size:13px;letter-spacing:.08em;color:var(--sub)}
.box.ex>.box.sol{margin:var(--u) 0}
/* 問題。番号は本文の頭に付く。解答へのリンクは番号に */
/* 問題は1問ずつ塊にする(exr は畳み details.fold.exr にも付くので div に限る)。
   例題とやってみようの中の問題文は箱そのものが枠なので当てない */
div.exr{margin:0 0 calc(1.2*var(--u));padding-left:.9em;
  border-left:2px solid var(--rule)}
div.exr>.pair{margin-bottom:calc(.45*var(--u))}
div.exr>.pair:last-child{margin-bottom:0}
div.exr .pair>.ja{margin-top:calc(.55*var(--u))}
div.exr .pair>.ja:empty{margin-top:0}
.box div.exr{margin:0;padding-left:0;border-left:0}
/* 番号。奇数だけ章末の解答へのリンクだが、色は変えない */
b.qn a{color:inherit;text-decoration:none}
b.qn a:hover{text-decoration:underline}
/* 原典の表。字は本文と同じ。ますの中に英と和を積む */
table.tb{border-collapse:collapse;font-size:15px;line-height:1.6;margin:0}
table.tb th,table.tb td{border:1px solid var(--line);padding:.45em .8em;vertical-align:top;text-align:left}
table.tb th{background:var(--panel);font-weight:700}
table.tb .ja{display:block;font-size:.92em;color:var(--sub);margin-top:.2em}
html.m-ja table.tb .ja{color:var(--ink);font-size:1em;margin-top:0}

/* ---- 原書のページ番号 ---- */
.pm{float:left;margin-left:-46px;width:34px;text-align:right;
  font-family:var(--en);font-style:normal;font-size:11px;color:#96a0ac;
  line-height:2.6;scroll-margin-top:64px;user-select:none}

/* ---- 送り ---- */
.pager{display:flex;justify-content:space-between;gap:16px;margin:60px 0 0;
  padding-top:22px;border-top:1px solid var(--line);font-size:15.5px;font-weight:700}
.pager .nx{margin-left:auto}

/* ---- 帰属 ---- */
.credit{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.85;color:var(--mute)}
.credit p{margin:0 0 8px}
.credit .fine{color:#6d7783}

/* ---- 目次ページ ---- */
.bookhead{padding:44px 0 26px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.bookhead h1{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bookhead .ja{font-size:34px;font-weight:700;letter-spacing:.02em}
.bookhead .en{font-family:var(--en);font-size:17px;font-weight:400;color:var(--sub)}
.meta{display:flex;flex-wrap:wrap;gap:8px 34px;margin:22px 0 0}
.meta div{display:flex;align-items:baseline;gap:9px}
.meta dt{font-family:var(--hd);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--sub)}
.meta dd{margin:0;font-size:15px;font-weight:500;color:var(--ink)}

.contents{list-style:none;margin:0;padding:0}
.ch{border-bottom:1px solid var(--rule)}
.ch .row{display:grid;grid-template-columns:5.6em minmax(0,1fr) auto;
  align-items:baseline;gap:0 16px;padding:20px 10px 20px 4px;margin:0 -10px 0 -4px;
  border-radius:3px;color:var(--ink)}
a.row:hover{text-decoration:none;background:var(--panel)}
a.row:hover .tt b{color:var(--red)}
.ch .no{font-family:var(--hd);font-size:14px;font-weight:700;letter-spacing:.05em;
  color:var(--red);white-space:nowrap}
.ch .tt b{display:block;font-size:22px;font-weight:700;line-height:1.42}
.ch .tt i{display:block;font-family:var(--en);font-style:normal;font-size:15px;
  color:var(--sub);line-height:1.5;margin-top:3px}
.ch .pg{font-family:var(--en);font-size:14px;font-weight:500;color:var(--sub);
  white-space:nowrap}
/* 段組みは上から下へ流れるので、節の順序が保たれる */
.ch .sub{list-style:none;margin:-2px 0 18px calc(5.6em + 16px);padding:0;
  columns:2;column-gap:30px}
.ch .sub li{break-inside:avoid}
.ch .sub a{display:block;font-size:16px;font-weight:500;line-height:1.8;color:var(--ink)}
.ch .sub a:hover{color:var(--red);text-decoration:none}
/* 未生成は薄くして沈めるのではなく、太さと番号の色だけで区別する */
.ch.undone .no{color:var(--sub)}
.ch.undone .tt b{font-weight:500;font-size:21px;color:var(--ink)}
.ch.undone .pg{color:var(--sub)}

/* ---- 蔵書一覧 ---- */
.hero{padding:70px 0 44px;border-bottom:2px solid var(--ink);margin-bottom:8px}
.hero h1{margin:0;font-family:var(--hd);font-size:44px;font-weight:700;letter-spacing:.1em}
.hero p{margin:10px 0 0;color:var(--sub);font-size:15px}
.shelf{list-style:none;margin:0;padding:0}
.shelf li{border-bottom:1px solid var(--rule)}
.shelf a{display:block;padding:22px 4px;color:var(--ink)}
.shelf a:hover{text-decoration:none;background:var(--panel)}
.shelf .bt{font-size:22px;font-weight:700}
.shelf .be{font-family:var(--en);font-size:15px;color:var(--sub);margin-left:12px}
.shelf .bm{display:block;font-size:12px;color:var(--mute);margin-top:4px}

/* ---- 表示切替 ---- */
html.m-en .ja,html.m-ja .en{display:none}
html.m-en .pair .en{font-size:1.04em;color:var(--ink)}
html.m-ja figcaption .ja{color:var(--sub)}
/* 片方だけ出しているときは、対の切れ目を示すための広い間隔が要らない。
   ただの連続した文章になるので、段落らしい間隔まで詰める。図の上下も
   揃った値にしておくこと(相殺で大きいほうが残るため、前後が等距離に保たれる) */
html.m-en .pair,html.m-ja .pair{margin-bottom:var(--u)}
html.m-en .pair.cap,html.m-ja .pair.cap{margin-bottom:var(--u)}
html.m-ja .pair .ja{margin-top:0}
html.m-en .pp,html.m-ja .pp{margin-top:var(--u)}
html.m-en figure,html.m-ja figure{margin:calc(1.5*var(--u)) 0}
html.m-en .pair:has(+ .pair.opts),html.m-ja .pair:has(+ .pair.opts){margin-bottom:calc(.3*var(--u))}
html.m-en figcaption .ja,html.m-ja figcaption .en{margin-top:0}

@media (max-width:900px){
  body{font-size:17px}
  .wrap{grid-template-columns:minmax(0,1fr);padding:0 18px}
  /* 和文だけ、細く少し小さく組む(英文のウエイトと大きさは変えない) */
  .pair .ja{font-size:15px;font-weight:400}
  .pair.terms .ja,.pair .ja b,.pair .ja strong{font-weight:700}
  main{padding:24px 0 70px;max-width:none}
  .pm{display:none}
  .top{padding:0 14px;gap:12px}
  .brand{font-size:14px}
  .crumb{display:none}
  .navbtn{display:flex}
  .modes button{padding:6px 12px;font-size:12.5px}

  /* 目次は本文の上に積まず、引き出しにする */
  .side{position:fixed;top:50px;left:0;bottom:0;width:min(87vw,350px);z-index:30;
    background:#fff;border-right:1px solid var(--line);overflow:auto;
    transform:translateX(-101%);transition:transform .22s ease;
    overscroll-behavior:contain}
  body.nav .side{transform:none;box-shadow:14px 0 44px rgba(12,18,26,.16)}
  .sticky{position:static;max-height:none;padding:22px 20px 44px}
  .scrim{display:block;position:fixed;inset:50px 0 0;z-index:25;
    background:rgba(12,18,26,.42);opacity:0;pointer-events:none;transition:opacity .22s}
  body.nav .scrim{opacity:1;pointer-events:auto}
  body.nav{overflow:hidden}

  .ph .ja{font-size:24px}
  .ph .en{font-size:14px}
  h2 .ja{font-size:20px}
  h3 .ja{font-size:17px}
  .figbox>img{width:100%}
  figcaption{padding-left:12px}

  .bookhead{padding:30px 0 22px}
  .bookhead .ja{font-size:27px}
  .bookhead .en{font-size:15px}
  .meta{gap:5px 22px}
  .ch .row{grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:17px 4px}
  .ch .no{grid-column:1/-1;font-size:12.5px;margin-bottom:4px}
  .ch .tt b{font-size:20px}
  .ch.undone .tt b{font-size:19px}
  .ch .tt i{font-size:14px}
  .ch .pg{align-self:center;font-size:13px}
  .ch .sub{columns:1;margin:4px 0 18px 2px;padding-left:14px;
    border-left:2px solid var(--line)}
  .ch .sub a{font-size:15.5px;line-height:2}
  .hero{padding:48px 0 34px}
  .hero h1{font-size:34px}
}