@charset "utf-8";
/* ============================================================
   base.css — リセット / デザイントークン / レイアウト土台
   ※ 固定デザイン。毎回の差し替え対象ではありません。
   ============================================================ */

/* --- リセット ------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
html,body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin:0 }
ul,ol{ padding:0; list-style:none }
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* --- デザイントークン ---------------------------------------- */
:root{
  /* カラー（Figma実測値）。セクションごとに --accent を差し替える */
  --c-primary:      #3071b7;  /* おしごとたいけんコーナー */
  --c-red:          #e62320;  /* トレカコーナー */
  --c-green:        #8fc31f;  /* スペシャルコーナー / その他 */
  --c-disabled:     #a9a9a9;  /* 「予約不要」ボタン */
  --c-white:        #ffffff;
  --c-sponsor-bg:   #bacc34;
  --c-sponsor-pill: #ffea00;
  --c-sponsor-text: #4cb234;
  --c-line-bg:      #4cb234;

  --accent: var(--c-primary);
  --c-text: var(--c-primary);

  --shadow-card: 5px 6px 0 rgba(0,0,0,.25);
  --shadow-img:  4px 4px 0 rgba(0,0,0,.25);

  --r-card: 17px;
  --r-pill: 22px;
  --r-btn:  61px;

  /* 余白スケール。セクション間はここだけで調整できる */
  --gap-xs: 6px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --section-gap: clamp(56px, 7.6vw, 97px);
  --inner-max: 1180px;

  /* 画面下に固定するLINEバーの高さ */
  --line-bar-h: 82px;

  /* フォント
     Figma実データ:
       本文・ラベル … A-OTF UD新ゴ Pro B（モリサワ）
       見出し・ボタン … A-SK Sokyoran Min2 E（SCREEN）
       ABOUT本文 … A P-OTF DriveFlux Min2 VF H
     いずれも商用フォントのため Noto Sans JP で代替しています。
     ライセンス取得後は下記の先頭に実フォント名を足すだけで切り替わります。 */
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 見出し・ボタンは本文と同じ Noto Sans JP の Bold を使う */
  --font-display: var(--font-body);
  --fw-display:   700;

  --ease-bounce: cubic-bezier(.22, 1, .36, 1);
  --ease-soft:   cubic-bezier(.34, 1.4, .64, 1);
}

/* --- ベース -------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; background:#cfe9fb }
body{
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.6;
  overflow-x: hidden;
  /* 画面下に固定されたLINEバーにコンテンツが隠れないよう逃がす */
  padding-bottom: var(--line-bar-h);
}

/* --- レイアウト土台 ------------------------------------------ */
/* 背景は position:fixed。前面の要素はすべて z-index:1 の層に置く */
.l-page{ position:relative; z-index:1 }

/* MV / date / ABOUT はコラージュ構成のため、
   Figmaのアートボード比率をそのまま保つ「ステージ」方式を維持している。
   （中身が画像1枚なので、差し替えてもレイアウトは崩れない） */
.l-canvas{
  position:relative; z-index:1;
  width: min(100%, 1280px); margin-inline:auto;
}
.stage{ position:relative; width:100% }
.stage > *{ position:absolute }

/* 中央寄せの内側コンテナ。左右の最小余白を必ず確保する */
.l-inner{ width:min(100% - 32px, var(--inner-max)); margin-inline:auto }
.l-inner--narrow{ --inner-max: 1030px }

/* セクション間の余白は margin だけで組む */
.l-section{ margin-top: var(--section-gap) }

.u-vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}