/* ==========================================================================
   SECT rebuild — _base.css
   リセット / 基本タイポ / レイアウトユーティリティ（REBUILD-SPEC.md 第3章）
   依存: _tokens.css を先に読み込むこと
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ヘッダー分のアンカーオフセット */
  scroll-padding-top: 8rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--ff-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-md);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 横スクロール事故の保険（レイアウトでは絶対にはみ出させない前提） */
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  block-size: auto; /* アスペクト維持 */
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

a:hover {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* フォーカスリング: マウス操作では出さず、キーボードでは必ず出す */
:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. 基本タイポ
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bd);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); }

p {
  line-height: var(--lh-base);
}

p + p {
  margin-top: var(--s-3);
}

small {
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   3. レイアウト（l-）
   -------------------------------------------------------------------------- */
.l-container {
  width: min(100% - var(--gutter-sp) * 2, var(--container));
  margin-inline: auto;
}

.l-section {
  padding-block: var(--section-pad-sp);
}

/* TAB: 768-1023px は SP流用ではなく専用の中間指定 */
@media (min-width: 768px) and (max-width: 1023px) {
  .l-container {
    width: min(100% - var(--gutter-tab) * 2, var(--container));
  }
  .l-section {
    padding-block: calc((var(--section-pad-sp) + var(--section-pad-pc)) / 2);
  }
}

@media (min-width: 1024px) {
  .l-container {
    width: min(100% - var(--gutter-pc) * 2, var(--container));
  }
  .l-section {
    padding-block: var(--section-pad-pc);
  }
}

/* 幅バリアント */
.l-container--narrow { max-width: 80rem; }
.l-container--wide   { max-width: 144rem; }
.l-container--full   { width: 100%; }

/* セクション背景 */
.l-section--paper  { background: var(--c-paper); }
.l-section--canvas { background: var(--c-canvas); }
.l-section--dark   { background: var(--c-dark); color: var(--c-paper); }

.l-section--tight { padding-block: var(--s-7); }

/* スタック（縦積み間隔） */
.l-stack > * + * { margin-top: var(--s-4); }
.l-stack--sm > * + * { margin-top: var(--s-2); }
.l-stack--lg > * + * { margin-top: var(--s-6); }

/* グリッド: 固定heightを使わず中身で伸びる */
.l-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid { gap: var(--s-5); }
}

@media (min-width: 1024px) {
  .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.l-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
}

/* 左右分割（画像＋テキスト） */
.l-split {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .l-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-7);
  }
  .l-split--reverse > :first-child { order: 2; }
}

/* 行方向のFlexユーティリティ */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.l-cluster--center { justify-content: center; }
.l-cluster--between { justify-content: space-between; }

/* --------------------------------------------------------------------------
   4. ユーティリティ（u-）
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-center { text-align: center; }
.u-right  { text-align: right; }

.u-mt-0 { margin-top: 0; }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }

.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-xs { font-size: var(--fs-xs); }
.u-bold  { font-weight: var(--fw-bd); }
.u-muted { color: var(--c-ink-70); }

/* 表示切り替えはDOM複製ではなく単一DOMの可視性のみに使う（装飾要素限定） */
.u-sp-only { display: block; }
.u-pc-only { display: none; }

@media (min-width: 1024px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: block; }
}

/* SPだけ改行させる（原稿は同一のまま折り返し位置だけ制御） */
.u-br-sp { display: inline; }
@media (min-width: 1024px) {
  .u-br-sp { display: none; }
}

.u-br-pc { display: none; }
@media (min-width: 1024px) {
  .u-br-pc { display: inline; }
}

/* 背景スクロールロック（nav.js が body に付与） */
.u-scroll-locked {
  overflow: hidden;
  /* iOS のスクロール貫通対策。top は JS 側で設定 */
  position: fixed;
  width: 100%;
}

/* スキップリンク */
.u-skip-link {
  position: absolute;
  left: var(--s-3);
  top: 0;
  z-index: calc(var(--z-drawer) + 10);
  padding: var(--s-1) var(--s-3);
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bd);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.u-skip-link:focus-visible {
  transform: translateY(0);
}