/* ============================================================
   01-base.css
   デザイントークン・リセット・body の下地
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
:root{
  --navy:#16265c;
  --navy-deep:#0b1740;
  --navy-mid:#22377f;
  --yellow:#f5c518;
  --yellow-soft:#ffe9a3;
  --amber:#f6a800;
  --red:#d8352a;
  --paper:#f4f6fc;
  --white:#ffffff;
  --ink:#111a3c;
  --ink-soft:#5c648c;
  --line:#dfe4f1;
  --line-strong:#b9c1dd;

  --font-sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --font-round:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;

  --maxw:1120px;
  --radius:20px;
  --shadow:0 18px 40px rgba(17,26,60,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(rgba(22,38,92,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,38,92,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  line-height:1.95;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--yellow);color:var(--navy)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3,h4{
  line-height:1.4;
  /* 見出しはかなの字間を詰め（palt）、行の長さをそろえて折り返す */
  font-feature-settings:"palt" 1;
  text-wrap:balance;
}
/* 本文は最後の行に1〜2文字だけ残る「泣き別れ」を避ける（対応ブラウザのみ） */
p,li,dd{text-wrap:pretty}
/* スマホで横向きにしたとき文字が勝手に拡大されないように。タップ時の灰色の四角も消す */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
a,button,summary{touch-action:manipulation}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}