/* ==========================================================================
   base — リセットと全ページ共通の既定値
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;          /* 本文の基準。これより小さい本文は作らない */
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* サイト全体の最大幅。1920px を超える画面では body の色が両脇に出る */
.site {
  position: relative;
  max-width: var(--w-max);
  margin: 0 auto;
  background: #fff;
  overflow-x: hidden;       /* 斜めのアクセントライン（2400px 幅）のはみ出しを抑える */
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 900;
  line-height: var(--lh-head);
  margin: 0;
}

p { margin: 0; }

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-red); }

img { display: block; max-width: 100%; }

/* <picture> はレイアウトに影響させない。
   中の <img> に付いたクラス（position:absolute など）がそのまま効くようにする。 */
picture { display: contents; }

button { font-family: inherit; }

/* 角丸は全要素で使用しない（円形バッジのみ例外的に border-radius:50% を使う） */
input, textarea, select, button { border-radius: 0; }

ul, ol { margin: 0; padding: 0; }

/* hidden 属性を必ず効かせる。
   display:flex / grid を持つ要素はブラウザ既定の [hidden]{display:none} を
   上書きしてしまうため（お問い合わせの画面切り替え・タブの表示制御で使用）。 */
[hidden] { display: none !important; }

table { border-collapse: collapse; }

iframe { border: 0; display: block; }

/* --- キーボード操作 ------------------------------------------------------
   06_open-items.md「キーボード操作」への対応。マウス操作では出さない。 */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* --- スクロールリビール --------------------------------------------------
   data-reveal を付けた要素が画面に入ると現れる。一度出たら戻さない。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- モーションを減らす設定への対応 --------------------------------------
   06_open-items.md「prefers-reduced-motion」への対応。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}