/* ==========================================================================
   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) }

/* ---------- スクロール連動の入場アニメ（トップページのみ） ----------
   html に js-anim が付いているあいだだけ効く。付けるのは header.php の
   1行スクリプトで、トップページかつ OMK_SCROLL_ANIM が true のときだけ出る。
   したがって「スイッチを false にする」「JS が動かない」のどちらでも、
   下の指定はまるごと不発になり、中身は最初から見えたままになる。

   初期状態を CSS 側で持たせているのは、JS でクラスを付けて隠す方式だと
   一度描画されたものが消えてから出る（チラつく）ため。

   opacity / transform を直値ではなく変数で受けているのは、状態の切り替えを
   「値の上書き」だけで済ませるため。クラスの詳細度争いが起きなくなるので、
   下の対象リストに何段のセレクタを足しても is-shown が確実に勝つ。 */
.js-anim .section__head,
.js-anim .svc__item,
.js-anim .feat,
.js-anim .cards,
.js-anim .stats,
.js-anim .flow,
.js-anim .post{
  opacity:var(--sa-opacity,0);
  transform:var(--sa-shift,translateY(20px));
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}

/* 画面に入った要素。main.js の 5. が付ける */
.js-anim .is-shown{ --sa-opacity:1; --sa-shift:none }

/* 動きを減らす設定では、html 側の既定値を反転させて全対象を最初から出す */
@media (prefers-reduced-motion:reduce){
  .js-anim{ --sa-opacity:1; --sa-shift:none }
}

/* 動きを減らす設定を尊重する。
   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;
  }
}