/* =========================================================
   common.css（全ページ共通の“土台”／最小・堅牢構成）
   ---------------------------------------------------------
   目的：
     1) 初期レイアウトを安定化（スクロールバー幅の揺れ対策）
     2) ページ全体の横あふれ（横スクロール）を抑止
     3) 横流し系（スライダー等）は“親でフタ”して全体の横スク昇格を回避
     4) 100vw のズレ対策用ユーティリティ（--sbw / .fullbleed / .bleed-*）
     5) Sticky Footer（中身が少ないページでもフッターが最下部）
     6) そのほか副作用の少ないリセット／アクセシビリティ整備
   方針：
     - ここは“土台”。トークンは最小限に保ち、数字=見た目が一貫するように。
     - 後段（各ページのCSS）で必要な計算は、ここで定義した最小トークンから導出。
     - 使われない変数は置かない（＝“将来のゴミ”を作らない）。
   ========================================================= */


/* ---------------------------------------------------------
 * 0) デザイントークン（必要最小限）
 *   - --sbw は「100vw を安全化」するための唯一の前提トークン。
 *   - --stickyTop は JS（common.js）が“実測のヘッダー高”を同期してくる想定。
 * ------------------------------------------------------ */
:root{
  /* サイト標準の背景/文字色（セクションCSSで上書き可） */
  --pageBg: #e6e5df;
  --text:   #333;

  /* サイド余白の共通トークン（任意で利用可） */
  --pageSide: clamp(16px, 4vw, 40px);

  /* スクロールバー幅 = 100vw - 100%
     例：安全な全幅は calc(100vw - var(--sbw)) で表現できる。 */
  --sbw: calc(100vw - 100%);

  /* 固定ヘッダーの実高（common.js が観測→同期）
     未設定環境でも破綻しないよう 0px をフォールバック */
  --stickyTop: 0px;

  /* フォーカスリング（アクセシビリティ） */
  --focusColor: #111;
}


/* ---------------------------------------------------------
 * 1) ベースリセット（副作用少なめ）
 * ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* “右側だけ”にガターを確保（横幅の揺れ抑止／左白スジを防ぐ） */
  scrollbar-gutter: stable;

  /* ガター領域にも背景が届くよう html 自身を塗る */
  background: var(--pageBg);

  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--pageBg);
  line-height: 1.7;

  /* 横スクは“ページ単位”では出さない（横流しは子要素側でフタ） */
  overflow-x: clip;
  min-width: 320px; /* 極小端末の崩れ防止 */
}
@supports not (overflow: clip){
  body { overflow-x: hidden; }
}

/* メディア要素のはみ出し防止（幅超過での崩れを抑える） */
img, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 画像のにじみ軽減（transform時の微妙なズレ対策） */
img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* 図要素の行高由来の隙間をなくす */
figure { margin: 0; }

/* フォーカスリングの可視化（キーボード操作向け） */
:where(a, button, [role="button"], input, textarea, select):focus-visible{
  outline: 2px solid var(--focusColor);
  outline-offset: 2px;
}

/* 視覚的に非表示だがスクリーンリーダーには読み上げるユーティリティ */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------
 * 1.5) Sticky Footer（全ページ共通）
 *   - header.php で <div class="site-shell"> を開き、footer.php で閉じる
 * ------------------------------------------------------ */
.site-shell{
  min-height: 100vh;                 /* まずは標準のビューポート高 */
  display: flex;
  flex-direction: column;
}
@supports (min-height: 100dvh){
  .site-shell{ min-height: 100dvh; } /* 動的ビューポート単位（モバイルUIを考慮） */
}
@supports not (min-height: 100dvh){
  @supports (min-height: 100svh){
    .site-shell{ min-height: 100svh; }/* セーフ系単位が使える場合 */
  }
}

/* メイン領域は余白を引き受ける（伸縮） */
.site-main{
  flex: 1 0 auto;
}

/* フッターを一番下へ（自動で押し下げ） */
.site-footer{
  margin-top: auto;
}


/* ---------------------------------------------------------
 * 2) 100vw のズレ防止ユーティリティ
 *   - ★ JS が --sbw-js を同期するため、CSS 側はフォールバック付きで参照
 *     → var(--sbw, var(--sbw-js, 0px))
 * ------------------------------------------------------ */
.fullbleed{
  /* “安全な 100vw” = 100vw - スクロールバー幅 */
  width: calc(100vw - var(--sbw, var(--sbw-js, 0px)));
  max-width: none;
}

/* 右ガターまで“背景を塗る” */
.bleed-right{
  width: calc(100% + var(--sbw, var(--sbw-js, 0px)));         /* ガター分だけ広げる */
  margin-right: calc(var(--sbw, var(--sbw-js, 0px)) * -1);    /* 右へはみ出させる */
}

/* 両側まで塗りたいケース（まれ）用 */
.bleed-both{
  width: calc(100% + var(--sbw, var(--sbw-js, 0px)));
  margin-left:  calc(var(--sbw, var(--sbw-js, 0px)) * -1);
  margin-right: calc(var(--sbw, var(--sbw-js, 0px)) * -1);
}


/* ---------------------------------------------------------
 * 3) 横流しトラックは“親でフタ”
 *   - transform で横に流す帯（スライダー・テロップ等）は
 *     親ラッパで overflow-x を塞ぎ、ページ全体の横スクに昇格させない。
 * ------------------------------------------------------ */
#top_news,
.tb, .tb-wrap, .tb-view, .tb-slider, .tb-track-wrap,
.bs-slider,
.gallery-marquee, .gallery-marquee__view,
.site-footer{
  position: relative; /* 新たな基準を与えておくと吉 */
  overflow-x: clip;   /* 横は必ずフタ */
}
@supports not (overflow: clip){
  #top_news,
  .tb, .tb-wrap, .tb-view, .tb-slider, .tb-track-wrap,
  .bs-slider,
  .gallery-marquee, .gallery-marquee__view,
  .site-footer{ overflow-x: hidden; }
}

/* トラック側は GPU 最適化のみ（実寸は各JSが再計測） */
.tb-track,
.bs-track,
.gallery-marquee__track{
  will-change: transform;
}


/* ---------------------------------------------------------
 * 4) ベーシックレイアウト補助（任意）
 *   - 使わないページでは無視されるだけなので安全。
 * ------------------------------------------------------ */
.container{
  width: min(1200px, 100% - var(--pageSide) * 2);
  margin-inline: auto;
  padding-inline: var(--pageSide);
}


/* ---------------------------------------------------------
 * 5) モーション配慮
 * ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  :where(html){ scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------
 * 6) 印刷時の余白調整（任意）
 * ------------------------------------------------------ */
@media print{
  body { background: #fff; }
}