/* ==========================================================================
   base.css — リセット / タイポ / レイアウト骨格
   🔴 全幅断ち切りに 100vw を使わない。overflow-x:hidden で横溢れを隠さない。
      セクションは通常のブロック要素（width:100%）＝親の幅を超えないので溢れない。
      内側の .mg-container だけが max-width を持つ。
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--c-navy); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { color: var(--c-navy-light); }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--c-text-head);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin: 0 0 .6em;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.4em; padding-left: 1.4em; }
li { margin-bottom: .5em; }

small, .mg-note { font-size: var(--fs-note); color: var(--c-text-sub); line-height: 1.8; }

/* ---- レイアウト骨格 ------------------------------------------------------ */

/* セクション＝全幅の面。色替えはここで行う（断ち切りはこれで成立する） */
.mg-section { padding: var(--section-y) 0; }
.mg-section--alt  { background: var(--c-bg-alt); }
.mg-section--dark { background: var(--c-navy); color: var(--c-text-invert); }
.mg-section--deep { background: var(--c-navy-deep); color: var(--c-text-invert); }
.mg-section--dark h1, .mg-section--dark h2, .mg-section--dark h3,
.mg-section--deep h1, .mg-section--deep h2, .mg-section--deep h3 { color: var(--c-text-invert); }
/* 🔴 :not(.mg-btn) が無いと、この規則(0,1,1)が .mg-btn--onDark(0,1,0) に詳細度で勝ち、
   暗面のボタンが「白地に白文字」になって文字が消える（2026-08-14 S13で実測）。
   バリアントのクラスを足したら、面側の一括指定から必ず除外すること。 */
.mg-section--dark a:not(.mg-btn), .mg-section--deep a:not(.mg-btn) { color: var(--c-text-invert); }
.mg-section--dark .mg-note, .mg-section--deep .mg-note { color: var(--c-text-invert-sub); }
.mg-section--tight { padding: calc(var(--section-y) * .55) 0; }

/* 内容の幅はここだけが決める */
.mg-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--edge); }
.mg-container--narrow { max-width: 760px; }

/* 見出しまわり */
.mg-lead { font-size: var(--fs-lead); line-height: 1.8; }
.mg-label {
  font-family: var(--ff-body);
  font-size: var(--fs-note);
  letter-spacing: var(--tr-label);
  color: var(--c-gold);
  font-weight: 500;
  display: block;
  margin-bottom: .8em;
}
.mg-section--dark .mg-label, .mg-section--deep .mg-label { color: var(--c-text-invert-sub); }

/* ページ冒頭の要約ブロック（AIは冒頭を要約として抜く／全ページ共通の書き方ルール） */
.mg-summary {
  background: var(--c-bg-alt);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin: 0 0 var(--gutter-l);
}
.mg-summary ul { margin: 0; padding-left: 1.2em; }
.mg-summary li { margin-bottom: .4em; }

/* 数字。桁が増えても崩れないように min-width と tabular-nums */
.mg-num {
  font-family: var(--ff-num);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  line-height: 1.05;
}

/* 強調は「紺の2px下線」か太字のみ（黄マーカー禁止） */
.mg-mark { background: linear-gradient(transparent 68%, var(--c-water) 68%); font-weight: 500; }
.mg-underline { border-bottom: 2px solid var(--c-navy); padding-bottom: .05em; font-weight: 500; }

/* アクセシビリティ */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.mg-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  background: #fff; color: var(--c-navy); padding: 10px 16px; clip: auto; clip-path: none;
  width: auto; height: auto;
}
:focus-visible { outline: 2px solid var(--c-navy-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}