@charset "UTF-8";
/* ==========================================================================
   base.css — リセット / CSS変数(:root) / タイポグラフィ基盤 / ユーティリティ
   参照：CLAUDE.md §3・§6、css_design.md §3・§4
   読み込み順：base.css → common.css → page/*.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. リセット（モダンリセット・自前記述）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body { min-height: 100dvh; }

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

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

h1, h2, h3, h4, h5, h6 { font-size: inherit; }

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

address { font-style: normal; }

table { border-collapse: collapse; }

/* キーボードフォーカス可視（CLAUDE.md §6 アクセシビリティ床） */
:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

/* prefers-reduced-motion 尊重。
   ※ !important はこのアクセシビリティ用リセットと u- の表示切替のみ例外（css_design.md §2） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   2. CSS変数（css_design.md §3 と対。TOPカンプ実測で確定済み＝指示書02）
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --c-navy:        #073459;
  --c-gray:        #919191;
  --c-gray-light:  #D8D8D8;
  --c-white:       #FFFFFF;
  --c-text:        #282728;   /* 確定：本文・見出しの基本色（カンプ実測。純黒不使用） */
  --c-bg-tint:     #F1EFF8;   /* 確定：淡背景（TOP各セクション背景で実測） */

  /* Brand sub colors（TOPカンプ実測で確定・正式トークン昇格） */
  --c-accent:    #E33306;  /* 確定：アクセント（見出しの小バー・強調文字・メニューボタン中ドット） */
  --c-blue:      #2673BC;  /* 確定：サービス系ブルー（ボックス罫線・番号・矢印サークル等） */
  --c-blue-gray: #587288;  /* 確定：青灰（フッター背景・SUPPORT RECORDセクション背景） */
  --c-contact:   #4577C4;  /* 仮：ヘッダーお問い合わせボタンの青（支給ヘッダー画像からの推定値。正式値確定待ち） */
  --c-line:      #707070;  /* 区切り線（NEWS帯下端など。カンプ実測） */
  --c-contact-blue: #15668C; /* CONTACTバナー グラデ中間色（TOPから昇格。下層共通 c-contact で使用） */
  --c-nav-underline: #2673BC; /* グローバルナビ／メガのホバー色（文字＋下線とも #2673BC。--c-blue と同値だがナビ専用に分離） */
  --c-drawer-hover:  #9BC9E0; /* ドロワー展開メニューのリンクホバー色（文字色＋下線） */

  /* Font family
     欧文Regular（--font-en）は暫定で Google Fonts の Cabin（Gill Sans Nova の代替）。
     欧文Bold（--font-en-bold）＝Bold英字は「Montserrat ExtraBold(800)」で確定（Cabin BoldだとGill Sans Novaと印象が変わるため差し替え。指定確定）。
     ・Montserrat は各HTMLの<link>で wght@800 のみ読み込み → 該当セレクタの font-weight:700 指定でも ExtraBold(800) 面で描画される（700→最寄り800）。
     ・適用先は「Bold英字＝差し替えフック」コメント付きの各セレクタ（.c-heading__en / .c-contact__title / 各ページ見出し・番号・バッジ 等）。 */
  --font-en:      "Cabin", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-en-bold: "Montserrat", "Cabin", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;

  /* Font size（rem基準。html=16px） */
  --fs-base: 1rem;        /* 16px 本文 */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.5rem;      /* 24px 見出し小 */
  --fs-2xl:  clamp(1.75rem, 0.9rem + 2.5vw, 2.25rem);  /* 28→36px 和文見出し */
  --fs-en-l: clamp(2.75rem, 2.375rem + 1.53vw, 3.75rem); /* 44→60px 欧文セクション見出し（実測：PCキャップ高41px≒60px、SP44px相当） */
  --fs-en-xl:clamp(3.5rem, 1.6rem + 7.9vw, 8.75rem); /* 56→140px MVヒーロー英字（カンプ寄せ＋ユーザー指摘で控えめに。Gill Sans/SemiBold前提。実機で微調整可） */

  /* Spacing（8pxグリッド） */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-16: 128px;

  /* Layout */
  --content-max: 1320px; /* 確定：本文実幅1240px（カンプ実測・左右余白100px）＋左右パディング40px×2（border-box） */
  --content-pad: clamp(20px, 4vw, 40px); /* 左右余白：SP20px→PC40px相当を流動化 */

  /* Misc */
  --line-body: 1.8;
  --z-header: 100; --z-menu: 200; --z-modal: 300;
  --ease: cubic-bezier(.25,.1,.25,1);
  --dur: .3s;
}

/* --------------------------------------------------------------------------
   3. タイポグラフィ基盤
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  /* スクロールバー分の余白を常時確保し、ロック時のガタつき（レイアウトシフト）を防ぐ */
  scrollbar-gutter: stable;
}

/* メニュー展開中の背景スクロールロック（js/common.jsが付け外し） */
html.is-locked { overflow: hidden; }

body {
  font-family: var(--font-ja);
  font-weight: 400;
  color: var(--c-text);
  line-height: var(--line-body);
  background: var(--c-white);
}

/* 役物の文字詰め：「役物のみ」で確定（08c2 の検証トグル→ユーザー確定。字間は変更しない）
   フォームコントロールは継承されないため明示指定（旧 assets/dev/kerning.css の trim モードと同一適用範囲）。
   未対応ブラウザでは無視され従来表示のまま（プログレッシブエンハンスメント） */
body,
input,
select,
textarea,
button {
  text-spacing-trim: trim-start;
}

/* --------------------------------------------------------------------------
   4. ユーティリティ（表示切替の !important は例外許可：css_design.md §2）
   -------------------------------------------------------------------------- */
/* 768px境界：デフォルト=PC（1440カンプ）、max-width 767px=SP（393カンプ） */
@media (min-width: 768px) {
  .u-sp-only { display: none !important; }
}

@media (max-width: 767px) {
  .u-pc-only { display: none !important; }
}

/* スクリーンリーダー専用テキスト */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}