/* base.css: 全ページ共通の土台（カラー変数・リセット・ユーティリティ・共通 @keyframes）。
   TOP・下層とも最初に読み込み、後続の components/ → pages/ がこれを上書きする前提。
   モバイルファースト（min-width 方向）、ブレークポイントは 768px。 */
:root {
  /* カラー（デザインデータの変数の実値） */
  --c-navy: #041a44;
  --c-blue: #12327f;
  --c-blue-mid: #435a86;
  --c-cyan: #25bbd7;
  --c-white: #fff;
}

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

html {
  scroll-behavior: smooth;
  /* ドロワー開閉で body の overflow:hidden がスクロールバーを出し入れしてもビューポート幅が変わらないよう、
     スクロールバー分の余白を常に確保する（変わると .gnav__close の位置や clip-path の中心が数pxずれる） */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font: inherit;
}

/* SP専用の改行（<br class="u-br-sp">）。ここでは非表示にし、767px以下で表示する指定は pages/ 側に置いている */
.u-br-sp {
  display: none;
}

body.is-fluid-active {
  background: var(--c-white);
}

.fluid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* fluid-bg.js が WebGL初期化に成功するまでは非表示（失敗時は出さない） */
.fluid-bg:not(.is-active) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  /* reduced-motion では動きを消すのではなく「酔わない等価物」に落とす（各部品・ページ側の同じメディアクエリも同じ方針）。
     ここではスムーススクロールだけ止める */
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 767px) {
  /* SPではPC用の改行（<br class="u-br-pc">）を無効にし、段落内は自然改行にする */
  .u-br-pc {
    display: none;
  }
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

/* ヘッダーロゴのラッパー（以前は h1。2026-10-20 SEO対応で div に変更）。UA 既定スタイルが .fv-logo（absolute）や
   .sub-logo（flexアイテム）のレイアウトに影響しないよう、見た目に関わる指定を持たない透明なラッパーにする */
.u-h1-plain {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

@keyframes gnav-marquee { from { transform: translateX(0); } to { transform: translateX(-16vw); } }

/* TOPの帯（components/marquee.css）とドロワーのゴースト文字（components/drawer.css）で共用する無限ループ。
   同じ内容を2枚並べたトラックを -50% 動かすので、文字幅に比例して距離が伸び、帯どうしの体感速度が揃う */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }

  to { transform: translate3d(-50%, 0, 0); }
}