/* YUKEI スクール デザインの土台の値（T0328。元は Fable の見本 docs/mock/fable/）
   色・文字・余白・角の丸みは、ここだけで決める。部品（parts.css）は、この値だけを使う。
   使い方の説明：docs/design-system.md

   ほかのスクールを同じサイトに並べる時は、body に data-school="名前" を付け、
   下の [data-school="..."] の所で差し色（--go など）だけを変える。 */
:root{
  /* 文字 */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","BIZ UDPMincho",serif;
  --fs-body:17px;      /* 本文 */
  --fs-small:15px;     /* 補足（14px より小さくしない） */
  --fs-h2:23px;        /* 本文の中の見出し */
  --fs-title:32px;     /* ページの題（明朝） */
  --lh-body:1.8;
  --measure:38em;      /* 本文の1行の長さ */

  /* 色（明るい画面） */
  --bg:#eef1f6;        /* 地 */
  --panel:#ffffff;     /* 面 */
  --ink:#131c33;       /* 文字（濃い藍） */
  --muted:#4a5670;     /* 補足の文字 */
  --line:#d5dbe6;      /* 細い線 */
  --edge:#7e8ba6;      /* 点線・枠 */
  --link:#1b4fa8;
  --go:#ffc533;        /* 差し色：次に押す所・次に読む回だけ（1ページに主役は1つ） */
  --go-ink:#131c33;
  --go-shade:#a87b00;
  --done:#0a7054;      /* 到着 */
  --pass:#131c33;      /* 搭乗券の地 */
  --pass-ink:#f3f5fa;
  --pass-muted:#bcc5d8;
  --pass-rule:rgba(243,245,250,.38);  /* 搭乗券の切り取り線 */
  --pass-rule-soft:rgba(243,245,250,.25);
  --danger:#b3261e;
  --focus:#1b4fa8;

  /* 形 */
  --r-s:4px;           /* 札・小さな印 */
  --r-m:10px;          /* ボタン・箱 */
  --r-l:14px;          /* 面・カード */
  --tap:44px;          /* 押せる所の最小の高さ */
  --gap:20px;
}
/* 暗い画面。端末の設定が暗い時（人が「明るい」を選んだ時は除く）と、人が「暗い」を選んだ時（<html data-theme="dark">）。
   選んだ値は /_ds/theme.js が <html> に付ける。2か所の値は同じにする */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0c1220;--panel:#151d30;--ink:#e9edf6;--muted:#a9b4ca;--line:#27314a;--edge:#6a7799;
  --link:#9cc0ff;--go:#ffc533;--go-ink:#131c33;--go-shade:#8a6500;--done:#62d9b0;
  --pass:#1f2b4a;--pass-ink:#f3f5fa;--pass-muted:#bcc5d8;--danger:#f2b8b5;--focus:#ffc533;
}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0c1220;--panel:#151d30;--ink:#e9edf6;--muted:#a9b4ca;--line:#27314a;--edge:#6a7799;
  --link:#9cc0ff;--go:#ffc533;--go-ink:#131c33;--go-shade:#8a6500;--done:#62d9b0;
  --pass:#1f2b4a;--pass-ink:#f3f5fa;--pass-muted:#bcc5d8;--danger:#f2b8b5;--focus:#ffc533;
}

/* ほかのスクールの差し色の例（使う時に足す）
[data-school="amazon"]{--go:#7fd1ff;--go-shade:#2a7aa8}
*/

/* 土台のふるまい */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-body)/var(--lh-body) var(--sans)}
a{color:var(--link);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1em;height:1em;flex:none;vertical-align:-.13em}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--panel);color:var(--ink);padding:10px 16px;border-radius:8px}
.skip:focus{left:12px}
@media (max-width:600px){body{--fs-body:16.5px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}