/* ベース — リセット・タイポグラフィの初期値
 * ヘッド（計画フェーズ）で確定。各セッションは編集しないこと。
 */

/* --- リセット（最小限） --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

ul,
ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: inherit;
  text-align: left;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* --- ドキュメント --- */
body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-white);
  /* PC専用ページ。1920px固定デザインの再現 */
  min-width: 1920px;
}

/* --- 1920pxデザインの中央基準トリミング（オーナー指示 2026-08-12）---
 *
 * ビューポートが 1920px から外れたとき、**全体を拡縮せず、コンテンツは原寸のまま
 * 中央に置き、余っていた左右の余白側から切れていく**挙動にする。
 * 1200px のコンテンツ幅は最後まで保たれ、削られるのは元から余白だった部分だけ。
 *
 * 中央寄せ（`.is-in` の `margin-inline: auto`、`#mv` 背景の `center top / 1920px`）で
 * 組まれたものは元から追従するので手当ては要らない。問題は
 * **1920px 基準の実座標で絶対配置した下記3グループ**で、これらは包含ブロックの
 * 左端が原点になるため、幅が変わると中央からずれる。
 * `(100% - 1920px) / 2` を足して原点を中央基準に置き直す。
 *
 *   1920px ちょうど … 0。**差分検証63ターゲットは1pxも動かない**
 *   1920px 未満    … 負。左右が対称に切れる（狙いの挙動）
 *   1920px 超      … 正。**既存のズレが直る**
 *
 * 1920px 超が直る点は実測で確認した。2560px のとき中央寄せの `#mv > div` は
 * 中心 1280（ビューポート中央）に来るのに、`#section2 > h2` は中心 960 のまま
 * 取り残されていた。この帯は 1920px 固定デザインの前提から外れており未検証だった。
 *
 * 絶対配置要素の `margin-left` は `left` に加算され、`%` は包含ブロック
 * （＝パディングボックス）の幅で解決されるので狙いどおりになる。
 * SP版が `sp.css` で同じ手を 375px 基準で使っている。
 */
#section1 picture img,
#section2 > *,
.deco img {
  margin-left: calc((100% - 1920px) / 2);
}

/* **横スクロールはどの幅でも出さない**（オーナー指示 2026-08-12）。
 *
 * トリミングで枠外に出た装飾（`.deco` は左右に大きくはみ出す設計）を隠す。
 * 当初は 1280〜1919px のメディアクエリ内だけに置いていたが、
 * **1920px を超える帯が素通りで、実機のワイドモニターで横スクロールが出た。**
 * 幅の条件を外して常時掛ける。
 *
 * `clip` は子要素の `overflow-x: auto` を止めないので、SPの料金表のように
 * **意図して残している横スクロールはそのまま効く**（`sp.css` に同じ記述あり）。
 * `hidden` と違いスクロールコンテナを作らないため、こちらを使う。 */
html {
  overflow-x: clip;
}

/* 1920px 未満では `min-width` による横スクロールをやめ、上のトリミングに委ねる。
 * 下限は 1280px。そこから下は SPレイアウトへ切り替わる（`sp.css`）。 */
@media (min-width: 768px) and (max-width: 1919px) {
  body {
    min-width: 0;
  }
}

/* 見出しは Zen Kaku Gothic New Bold で統一（実測: section2/3/4/#plans5/6 で共通） */
h1,
h2,
h3 {
  font-family: var(--f-heading);
  font-weight: 700;
  color: var(--c-navy);
}

/* --- 内側コンテナ ---
 * .is-in はデザイン上「内側のラッパー」を指す汎用クラスで、幅は一定ではない
 * （1200 / 1168 / 980 …）。ここでは中央寄せだけを担い、幅は各セクションが決める。
 */
.is-in {
  width: 100%;
  margin-inline: auto;
}