@charset "utf-8";

/* サイトリニューアル共通トークン（:root 変数のみ・要素セレクタ無し）。詳細: _claude/css-architecture.md */

:root {
  /* ============================================================
   * color
   * ============================================================ */
  --color-brand:              #0a6cb8;
  --color-brand-light:        #68bde8;
  --color-brand-soft:         #a9bfd1; /* Figma blueprint-soft。カードの枠線など */
  --color-accent-gold:        #f0c528;
  --color-emphasis:           #d0342c; /* 赤の強調（数字の成果など、ここぞという一点だけ） */
  --color-emphasis-tint:      #fdeeed; /* 同・薄い地 */
  --color-white:              #ffffff;
  --color-border:             #e5e5e5;
  --color-border-input:       #d1d1d1;
  --color-footer-text:        #b2b5b2; /* 新フッターデザイン用（保留・未使用） */
  --color-footer-background:          #1b1f23; /* 同上 */

  --color-ink:                #20262a; /* 強め＝見出し */
  --color-ink-soft:           #333333; /* 基本＝本文の既定色 */
  --color-text-mute:          #808a94; /* 弱め＝注記・キャプション */
  --color-border-soft:        #d9e3f0;
  --color-border-table:       #dbe3eb;
  --color-border-plan:        #d4d9e0;
  --color-border-rule:        #c7d6e3; /* 番号付きステップの区切り罫 */
  --color-surface-note:       #eef4f9; /* 注意書きの箱 */
  --color-brand-tint:         #eaf4fd; /* 薄い水色のチップ */
  --color-chip-neutral:       #6b7580;
  --color-surface-plan:       #f2f5f9;
  --color-surface-muted:      #f9fbfc; /* 薄い面（色付きセクションの全幅背景・カードや箱の地） */

  --color-brand-rgb:          10, 108, 184; /* --color-brand を rgba で透かすとき用 */
  --color-scrim-rgb:          7, 100, 160;
  --color-shadow-banner-rgb:  35, 91, 122;
  --color-shadow-card-rgb:    10, 61, 107;

  --color-brand-legacy:       #0039A8; /* 実サイトの本来のブランドブルー（参考値・未使用） */
  --color-text-on-photo:      #e9f7ff; /* 写真に重ねる英字 */

  /* ============================================================
   * color — legacy chrome（.l-header/.l-footer 専用）
   * ============================================================ */
  --color-chrome-header-background:      rgba(255, 255, 255, .95);
  --color-chrome-header-border:  rgba(0, 0, 0, .06);
  --color-chrome-header-shadow:  rgba(0, 0, 0, .04);
  --color-chrome-link:           #0066cc;
  --color-chrome-accent:         #00a4de;
  --color-chrome-navigation-pill-background:    rgba(0, 102, 204, .08);
  --color-chrome-text-mute:      #666666;
  --color-chrome-footer-background:      #333333;
  --color-chrome-footer-copyright:    #ababab;
  --color-chrome-footer-border:  #666666;
  --color-chrome-footer-pill-background: #4d4d4d;
  --color-chrome-top-of-page-background:   rgba(77, 77, 77, .8);

  /* ============================================================
   * gradient
   * ============================================================ */
  --gradient-scrim-strong: linear-gradient(
    to bottom,
    rgba(var(--color-scrim-rgb), 0)    0%,
    rgba(var(--color-scrim-rgb), .06)  42%,
    rgba(var(--color-scrim-rgb), .68) 100%
  );
  --gradient-scrim-soft: linear-gradient(
    to bottom,
    rgba(var(--color-scrim-rgb), 0)    0%,
    rgba(var(--color-scrim-rgb), .05)  45%,
    rgba(var(--color-scrim-rgb), .40) 100%
  );
  --gradient-scrim-hero: linear-gradient(
    to bottom,
    rgba(var(--color-scrim-rgb), 0)    0%,
    rgba(var(--color-scrim-rgb), 0)   55%,
    rgba(var(--color-scrim-rgb), .55) 100%
  );

  /* ============================================================
   * typography
   * ============================================================ */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* 文字サイズ・行間は役割の変数だけ（2026-09-17 決定。css-architecture.md 4章「文字サイズの段階」）
     部品には px を書かず、SP の値はこのファイル末尾の SP メディアクエリで切り替える */
  --font-size-hero:        46px; /* トップFVのキャッチ（明朝）。2026-09-29 追加 */
  --font-size-display:     34px; /* ヒーロー見出し・手順の大きい番号 */
  --font-size-heading-1:   30px; /* セクション見出し・CTA見出し */
  --font-size-heading-2:   26px; /* 子セクション見出し・写真バナー・番号付き見出し */
  --font-size-heading-3:   22px; /* ページ内の強調見出し */
  --font-size-title:       20px; /* 見出しの上の英字・大きめのカード見出し */
  --font-size-title-small: 18px; /* カード見出し・表の項目名 */
  --font-size-body:        18px; /* 読ませる文章 */
  --font-size-body-small:  15px; /* 小さく見せる文章（狭いカードの説明・注記・キャプション） */
  --font-size-label:       15px; /* ボタン・ピル・チップ・図の中の文字 */
  --font-size-label-small: 13px; /* タグ・図表の目盛り・凡例・小さい番号 */

  --line-height-heading: 1.45;  /* 見出し・カード見出し */
  --line-height-body:    1.666; /* 文章 */
  --line-height-label:   1.2;   /* ラベル・英字・図表の文字（固定高さのピルの中だけは 1 を直書き） */

  /* ============================================================
   * spacing
   * ============================================================ */
  --space-4:   4px;
  --space-5:   5px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-54: 54px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;

  /* ============================================================
   * layout
   * ============================================================ */
  --width-container: 980px; /* 実効940px */
  --padding-inline:  20px;
  --section-padding:  88px; /* セクションの上下余白（.u-padding-block-section） */
  --section-padding-bottom-large: 128px; /* ページ最後のセクションの下余白（.u-padding-bottom-section-large） */
  --scroll-offset: 120px; /* ページ内リンクの止まる位置（固定ヘッダーの高さ＋少し） */

  /* ============================================================
   * radius
   * ============================================================ */
  --radius-3:  3px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 999px;

  /* ============================================================
   * shadow
   * ============================================================ */
  --shadow-banner: 0 3px 10px rgba(var(--color-shadow-banner-rgb), .05),
                   0 14px 38px rgba(var(--color-shadow-banner-rgb), .11);
  --shadow-navigation-card: 0 4px 16px rgba(var(--color-shadow-card-rgb), .13);
  --shadow-text-on-photo: 0 1px 10px rgba(15, 31, 51, .35);

  /* ============================================================
   * motion — 新しく作るパーツの動きの基準（ホバー・開閉など）。
   * ヘッダー/フッターの複製（.l-*）は旧ページと揃えるため旧の値のまま
   * ============================================================ */
  --duration-base:  .45s;
  --ease-base: cubic-bezier(.25, .1, .25, 1); /* ease：ゆっくり動き出してゆっくり止まる */

  /* スクロールで現れる（.u-fade-in）。ホバーよりずっと長めに、ゆっくり止まる
   * 経緯：.8s＋強めの ease-out（.22,1,.36,1）は「ちょっと速い」（2026-09-16 ユーザー）→ 1.2s＋穏やかな ease-out → まだ「もう少しゆっくり」で 1.6s に（同日） */
  --duration-fade-in: 1.6s;
  --ease-fade-in: cubic-bezier(.33, 1, .68, 1);
  --fade-in-distance: 24px; /* 現れるときに下からせり上がる距離 */
}

/* SPだけ左右余白・セクションの上下余白・文字サイズを詰める */
@media (max-width: 767px) {
  :root {
    --padding-inline: 16px;
    --font-size-hero:        28px;
    --font-size-display:     24px;
    --font-size-heading-1:   24px;
    --font-size-heading-2:   22px;
    --font-size-heading-3:   20px;
    --font-size-title:       18px;
    --font-size-title-small: 16px;
    --font-size-body:        16px;
    --section-padding: 56px;
    --section-padding-bottom-large: 80px;
    --scroll-offset: 96px;
  }
}