/* ベース — hp-keiyaku-soudan
 * 計画フェーズで確定。**ワーカーはこのファイルを触らない。**
 */

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

/* 【AGENTS.md 必須ルール】横スクロールは全幅で禁止する。
 * **メディアクエリの外に置くこと。** 幅の条件付きで置くと条件外の帯が素通りする
 * （service-site で 1280〜1919px だけに置き、1920px超の実機で横スクロールが出た）。
 * clip は子の overflow-x: auto を止めないので、意図した横スクロールは残る。
 *
 * **html だけでは足りない。** `overflow-x: clip` を html 単体に置いても、
 * body 側の overflow-x が visible のままだと実際のスクロールコンテナは body 側になり、
 * window.scrollTo() / trackpad の横スワイプでページが実際に横スクロールしてしまう
 * （実測: playwrightで window.scrollTo(300,0) 後に scrollX=300 と可視的にずれるのを確認。
 * html, body 両方に overflow-x: clip を置くと scrollX=0 に固定される。2026-08-25） */
html,
body { overflow-x: clip; }

/* min-width は置かない（service-site方式 / D20-2）。
 * 旧: min-width: var(--w-wide) — SP帯が1279pxまでだった頃は無害だったが、
 * SP帯を767pxへ下げた今、768〜1199px で「1200pxの器が左端に張り付き右が
 * 到達不能になる」事故の原因になる（2026-08-25 実測。D20 の 900px 実験と同じ構造） */
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, picture, svg, video {
  max-width: 100%;
  display: block;
}

a { color: inherit; }

/* 【AGENTS.md 必須ルール】固定幅デザインは「中央基準トリミング」で可変幅に載せる。
 * 拡縮しない。コンテンツは原寸のまま、余白側から切れる。
 * zoom / transform: scale は禁止（文字まで小さくなる）。
 *
 * デザイン幅ちょうどで 0 になるので、差分検証のターゲットは1pxも動かない。
 * デザイン幅未満なら負で左右対称に切れ、超なら正で中央に揃う。 */
.deco-full {
  margin-left: calc((100% - var(--w-page)) / 2);
}

/* セクションは縦に切らない。装飾がセクション境界をまたぐのが正
 * （Figma実測: 16/16 で clipsContent=false）。SECTIONS.md「ページ横断レイヤー」参照 */
section, header, footer {
  position: relative;
  overflow: visible;
}

/* 装飾と本文の層。境界をまたぐ装飾が本文を隠さないようにする */
.deco { position: absolute; z-index: var(--z-deco); pointer-events: none; }
.body-layer { position: relative; z-index: var(--z-body); }