@charset "UTF-8";
/* =============================================================
   VBI Website — base.css
   全ページ共通の土台。トークン / リセット / タイポグラフィ /
   共通パーツ（ヒーロー・本文コンテナ・区切り線・ローダー）。
   読み込み順: base.css → header.css → 各ページCSS

   Bootstrap は STEP5 で外した。グリッドは CSS Grid / Flexbox で
   組んでいるため、`.row` や `.col-*` は使わない。
   ============================================================= */

/* -------------------------------------------------------------
   1. デザイントークン
   色・文字サイズ・余白はすべてここから選ぶ。
   個別のCSSに生の値を書かないこと。
   ------------------------------------------------------------- */
:root{
  /* Blue Impulse — 実機塗装から採った基調色 */
  --bi-navy:#0A2A5E;
  --bi-navy-deep:#06213F;
  --bi-blue:#0047A0;
  --bi-sky:#4FA3E3;
  --bi-sky-pale:#E4EFFA;
  --bi-red:#C8102E;          /* 日の丸の赤。アクセントのみ */

  /* ニュートラル（わずかに青に寄せる） */
  --text:#13233C;
  --text-2:#41567A;
  --text-3:#6B7E9B;
  --surface:#FFFFFF;
  --surface-2:#F2F6FB;
  --line:#CBD9E8;
  --on-dark:#FFFFFF;
  --on-dark-2:#BCD6F2;

  /* 書体
     和文 : Noto Sans JP
       Windows 既定の游ゴシックは細く霞んで見えるため、OS差をなくす目的で
       明示的に読み込む。長文の多い History ページの可読性が主目的。
     欧文 : Barlow Condensed
       飛行場・基地のサイン体に近いコンデンス体。和文グリフを持たないため、
       日本語混じりの見出しでは自動的に和文側へフォールバックする。
     ※ 書体を替えるときはこの2行だけを変更する。 */
  --font-base:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --font-display:"Barlow Condensed","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  /* タイプスケール
     コンデンス体は同じ級数でも小さく見えるため display 系は一段大きめに取る */
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:clamp(1.25rem,1.8vw,1.5rem);
  --fs-xl:clamp(1.625rem,3.2vw,2.25rem);
  --fs-2xl:clamp(2.125rem,5.5vw,3.5rem);

  /* 行間・字間。px固定は継承事故のもとなので必ず数値で指定する */
  --lh-body:1.85;
  --lh-heading:1.25;
  --ls-body:.02em;
  --ls-display:.015em;

  /* 余白スケール（8pxベース） */
  --sp-1:.5rem;
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4rem;

  /* レイアウト */
  --header-h:64px;
  --page-max:72rem;   /* コンテンツ全体の最大幅 */
  --measure:40rem;    /* 本文1行の最大幅。和文で約37字 */
  --gutter:clamp(1rem,5vw,3rem);
}

/* -------------------------------------------------------------
   ブレークポイント（この2つだけを使う）
     max-width: 1024px … タブレット以下。グローバルナビをドロワーへ
     max-width:  768px … スマートフォン。段組みの解除・余白の縮小
   CSS変数はメディアクエリ内で使えないため、新しい区切りを足すときは
   必ずこの2つに合わせること。
   ------------------------------------------------------------- */
@media screen and (max-width:768px){
  :root{ --header-h:56px; }
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}

body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--fs-md);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--text);
  background-color:var(--surface-2);
  -webkit-font-smoothing:antialiased;
}

/* ブラウザ既定の余白を落とす。余白は必ずスケールから与える */
h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd{
  margin:0;
}
ul,ol{
  margin:0;
  padding:0;
}

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

/* フォームコントロールに書体を継承させる */
button,
input,
select,
textarea{
  font:inherit;
  color:inherit;
}

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

/* -------------------------------------------------------------
   3. リンクとフォーカス
   ------------------------------------------------------------- */
a{
  color:var(--bi-blue);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--bi-sky);
  outline-offset:2px;
  border-radius:2px;
}

/* -------------------------------------------------------------
   4. ヒーロー（下層ページ共通）
   背景画像は cover 固定。画面幅が変わっても構図が壊れないよう、
   見せたい部分は各ページCSSの background-position で指定する。
   ------------------------------------------------------------- */
.intro{
  position:relative;
  display:flex;
  align-items:flex-end;

  /* ヒーローの高さは「比率」で決める。
     ヒーロー画像は被写体を中心に 2:1 で書き出してあり、
     箱を 2.5:1 にすると画像の中央 80% が見える計算になる。
       ・広い画面 … aspect-ratio が効く（max-height で伸びすぎを止める）
       ・狭い画面 … min-height が効き、箱が画像より縦長になるので
                    被写体の縦方向は全部見える

     旧実装は min-height だけで高さを決めていたため、画面が広いほど
     見える範囲が縦に痩せ、被写体が枠外に出ていた。

     width:100% は必須。書かないと min/max-height で高さが確定した
     ときに aspect-ratio が「幅」のほうを計算し直してしまい、箱が
     コンテナより狭くなったり、逆に画面からはみ出したりする。 */
  width:100%;
  aspect-ratio:5 / 2;
  min-height:clamp(260px,34vh,400px);
  max-height:min(64vh,640px);

  padding:calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-4);
  overflow:hidden;
  background-color:var(--bi-navy);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* 写真の上に文字を載せるときは必ずオーバーレイを挟む */
.intro::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(6,33,63,.45) 0%,
    rgba(6,33,63,.10) 42%,
    rgba(6,33,63,.80) 100%);
  pointer-events:none;
}

.intro h1{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding:0;
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:700;
  line-height:1.12;
  letter-spacing:var(--ls-display);
  color:var(--on-dark);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  text-wrap:balance;
}

/* -------------------------------------------------------------
   5. 本文コンテナ
   幅は max-width で頭打ちにし、内側の余白は padding で作る。
   width と margin を同時に持たせるとビューポートを超えるので注意
   （旧実装の .container-fluid + margin:8% がこれだった）。
   ------------------------------------------------------------- */
.main_contents{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding-top:var(--sp-5);
  padding-right:var(--gutter);
  padding-bottom:var(--sp-6);
  padding-left:var(--gutter);
  background-color:var(--surface);
}

/* -------------------------------------------------------------
   6. 本文タイポグラフィ
   ------------------------------------------------------------- */
.main_contents h2{
  margin:var(--sp-6) 0 var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  color:var(--bi-blue);
  text-wrap:balance;
}

.main_contents h3{
  margin:var(--sp-4) 0 var(--sp-1);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  color:var(--text);
  text-wrap:balance;
}

.main_contents p{
  margin:0 0 var(--sp-2);
  max-width:var(--measure);
}

/* 各ページ冒頭のリード文 */
.main_contents .lede{
  max-width:var(--measure);
  margin:0 0 var(--sp-5);
  font-size:var(--fs-lg);
  line-height:1.7;
  color:var(--text-2);
}

/* 見出し下のアクセント線 */
.section-title{
  position:relative;
  padding-bottom:var(--sp-2);
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:4rem;
  height:3px;
  background:var(--bi-sky);
}

/* -------------------------------------------------------------
   7. ローディング画面
   JSが無効・CDNが落ちた場合に全画面白のまま固まらないよう二段構え。
   (1) 既定は非表示。<head> のインラインJSで html に .js が付いた
   　  ときだけ表示する（＝JSが動かない環境では最初から出ない）
   (2) それでも解除されなかった場合に備え、CSS側で8秒後に必ず消す
   解除の本体は js/loading.js。
   ------------------------------------------------------------- */
#loader-bg{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  background:var(--surface);
  transition:opacity .4s ease;
}

.js #loader-bg{
  display:block;
  animation:loaderFailsafe 0s linear 8s forwards;
}

@keyframes loaderFailsafe{
  to{
    opacity:0;
    visibility:hidden;
  }
}

#loader{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* 旧実装は 3.5MB の GIF だった。CSSアニメーションに置き換える */
.loader-mark{
  display:block;
  width:56px;
  height:56px;
  border:4px solid var(--bi-sky-pale);
  border-top-color:var(--bi-blue);
  border-radius:50%;
  animation:loaderSpin .9s linear infinite;
}

@keyframes loaderSpin{
  to{ transform:rotate(360deg); }
}