/* ==========================================================================
   base.css — リセットと素の要素の見た目

   ここでは要素セレクタだけを扱う。クラスは layout / components 側。
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }

/* hidden ではなく clip。hidden は sticky/fixed を壊す（hallmark gate 34） */
html,body{ overflow-x:clip }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* アンカーで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする */
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}

/* メニューを開いているあいだ、背面をスクロールさせない */
html.is-locked,html.is-locked body{ overflow:hidden }

img,svg{ max-width:100%; height:auto; display:block }
img{ font-style:italic }             /* alt が見えたときに本文と区別できるように */

a{
  color:var(--c-navy-700);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover{ color:var(--c-navy) }

/* フォーカスリングはフェードさせず即時に出す（hallmark gate 15） */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:2px;
}
.on-dark :where(a,button,input,select,textarea):focus-visible{ outline-color:var(--c-focus-dark) }

/* 見出しはすべて明朝。小見出し（h3・h4）も含めて統一する。
   階層の途中で書体が変わると、同じ階層の要素が別種類に見えるため。
   行間だけは本文寄りに詰める。 */
h1,h2{
  font-family:var(--font-display);
  font-weight:700;
  font-style:normal;                 /* 見出しに斜体は使わない（gate 38a） */
  line-height:var(--lh-display);
  overflow-wrap:anywhere;            /* 長い語で溢れさせない（gate 51） */
  min-width:0;
  margin:0;
}
h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  font-style:normal;
  line-height:var(--lh-tight);
  overflow-wrap:anywhere;
  min-width:0;
  margin:0;
}

p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }

/* figure はブラウザ既定で左右に 40px の余白が付く。
   図版の幅がそのぶん狭まって、中の図が入りきらなくなるため打ち消す。 */
figure{ margin:0 }
figure figcaption{ margin-top:var(--space-xs) }

table{ border-collapse:collapse }

/* 料金・実績など、数字を縦に並べる箇所で桁を揃える */
.num{ font-variant-numeric:tabular-nums }

/* 読み上げにだけ渡す文字 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* キーボードで最初に当たる、本文への飛び先 */
.skiplink{
  position:absolute; left:-9999px; top:0; z-index:var(--z-drawer);
  background:var(--c-navy-900); color:var(--c-paper);
  padding:var(--space-2xs) var(--space-md);
  font-size:var(--text-sm); text-decoration:none;
}
.skiplink:focus{ left:0; color:var(--c-paper) }

/* 動きを減らす設定を尊重する。
   0 にせず 0.001ms にしているのは、完了イベントに依存した処理を壊さないため。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}