/**
 * 横浜テクノオート デザイントークン
 *
 * ソース: Figma "🎨 Foundations" (node 12:3)
 * 抽出日: 2026-09-18
 * 抽出方法: MCP get_metadata（セマンティック層のみ採用・Primitivesは参照元として非公開）
 *
 * 使い方:
 *   @import url('./tokens.css'); を各ブロックの style.css 先頭に置くか、
 *   theme のグローバル style.css に読み込む。
 *   var(--technoauto-bg-brand) の形で参照。
 */
:root {
  /* ==========================================
     Color / 面（背景）
     ========================================== */
  --technoauto-bg-base:           #FFFFFF;   /* 通常の面 */
  --technoauto-bg-section:        #D7F2FF;   /* セクション面（淡青） */
  --technoauto-bg-subtle:         #EDF9FF;   /* サブトル背景（さらに淡） */
  --technoauto-bg-brand:          #439FFF;   /* ブランド青 */
  --technoauto-bg-brand-soft:     #6BD0FF;   /* ブランド青（ソフト） */
  --technoauto-bg-brand-strong:   #2F8AEE;   /* ブランド青（濃） */
  --technoauto-bg-accent:         #FFEF6B;   /* アクセント黄 */
  --technoauto-bg-accent-deep:    #FFE576;   /* アクセント黄（濃） */
  --technoauto-bg-success:        #20D99B;   /* 成功／緑 */
  --technoauto-bg-inverse:        #000000;   /* 反転背景 */
  --technoauto-bg-footer:         #C1C1C1;   /* フッター */

  /* ==========================================
     Color / 文字
     ========================================== */
  --technoauto-text-primary:      #000000;
  --technoauto-text-heading:      #000000;
  --technoauto-text-secondary:    #787878;
  --technoauto-text-muted:        #A1A1A1;
  --technoauto-text-inverse:      #FFFFFF;
  --technoauto-text-link:         #439FFF;
  --technoauto-text-accent:       #20D99B;
  --technoauto-text-error:        #FC3855;

  /* ==========================================
     Color / 線
     ========================================== */
  --technoauto-border-base:       #39364E;   /* 標準・ネイビー */
  --technoauto-border-gray:       #C1C1C1;
  --technoauto-border-subtle:     #DADADA;
  --technoauto-border-tag:        #E5E5E5;
  --technoauto-border-brand:      #6BD0FF;
  --technoauto-border-error:      #FC3855;
  --technoauto-border-focus:      #439FFF;

  /* ==========================================
     Color / バッジ
     ========================================== */
  --technoauto-badge-exam:        #FC3855;   /* 受験・入試 */
  --technoauto-badge-event:       #20D99B;   /* イベント */
  --technoauto-badge-oc:          #FFEF6B;   /* オープンキャンパス */

  /* ==========================================
     Typography — Font Family
     ========================================== */
  --technoauto-font-jp:           "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --technoauto-font-en:           'Montserrat', 'Inter', 'Barlow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;   /* v10 (2026-09-25): Figma REST 再実測で hero-wordmark / section-heading-en は Montserrat 700 italic 判明。Inter/Barlow は fallback として保持 */

  /* ==========================================
     Typography — Text Roles（Figma "Typography｜テキストスタイル" 実測値 2026-09-20 更新）
       - Display/Number/Label/EN は Inter
       - Heading/Body は Noto Sans JP
       - lh は Figma lineHeightPx を size で割った比率で保持
       - ls (letter-spacing) は Figma letterSpacing を px 指定でそのまま採用
     ========================================== */
  --technoauto-size-display-l:    40px;    /* Display/EN/L    Inter w900 lh40   ls0    */
  --technoauto-size-display-m:    28px;    /* Display/EN/M    Inter w900 lh28   ls0    */
  --technoauto-size-h1:           26px;    /* Heading/H1      Noto  w900 lh39   ls0    (1.5) */
  --technoauto-size-h2:           20px;    /* Heading/H2      Noto  w700 lh32   ls0    (1.6) */
  --technoauto-size-h3:           16px;    /* Heading/H3      Noto  w700 lh26.4 ls0    (1.65) */
  --technoauto-size-section-jp:   15px;    /* Heading/Sec-JP  Noto  w700 lh24   ls0    (1.6) */
  --technoauto-size-body-l:       15px;    /* Body/L          Noto  w400 lh27.75 ls0   (1.85) */
  --technoauto-size-body-m:       13px;    /* Body/M          Noto  w400 lh24   ls0    (1.85) */
  --technoauto-size-body-s:       11px;    /* Body/S          Noto  w400 lh19.25 ls0   (1.75) */
  --technoauto-size-label-btn:    14px;    /* Label/Button    Noto  w700 lh14   ls0.28 */
  --technoauto-size-label-tag:    11px;    /* Label/Tag       Noto  w700 lh11   ls0.22 */
  --technoauto-size-label-en:     12px;    /* Label/EN        Inter w700 lh12   ls0.96 */
  --technoauto-size-number:       48px;    /* Number/Display  Inter w900 lh48   ls-0.96 */
  --technoauto-size-caption:      10px;    /* Caption         Noto  w400 lh16.5 ls0    (1.65) */

  /* 行間比率 (Figma実測から算出) */
  --technoauto-lh-tight:          1.0;     /* Display / Number 系（lh=fontSizeそのまま） */
  --technoauto-lh-heading:        1.5;     /* Heading/H1 */
  --technoauto-lh-heading-tight: 1.6;      /* Heading/H2 / Section-JP */
  --technoauto-lh-heading-loose: 1.65;     /* Heading/H3 / Caption */
  --technoauto-lh-body:          1.85;    /* Body/L, Body/M */
  --technoauto-lh-body-tight:    1.75;    /* Body/S */

  /* 文字送り (letter-spacing) Figma px そのまま */
  --technoauto-ls-normal:        0;
  --technoauto-ls-label-btn:     0.28px;   /* Label/Button */
  --technoauto-ls-label-tag:     0.22px;   /* Label/Tag */
  --technoauto-ls-label-en:      0.96px;   /* Label/EN */
  --technoauto-ls-number:        -0.96px;  /* Number/Display（詰め） */

  --technoauto-weight-black:      900;
  --technoauto-weight-bold:       700;
  --technoauto-weight-medium:     500;
  --technoauto-weight-regular:    400;

  /* ==========================================
     Spacing
     ========================================== */
  --technoauto-space-2xs:         4px;
  --technoauto-space-xs:          8px;
  --technoauto-space-sm:          12px;
  --technoauto-space-md:          16px;
  --technoauto-space-lg:          20px;
  --technoauto-space-xl:          24px;
  --technoauto-space-2xl:         32px;
  --technoauto-space-3xl:         40px;
  --technoauto-space-4xl:         48px;
  --technoauto-space-5xl:         64px;

  /* ==========================================
     Radius (Figma実測: 5/8/10/20/22/25/30/40/999 が主要ページで使用中)
     ========================================== */
  --technoauto-radius-2xs:        5px;    /* 小要素・タブ・入力枠 */
  --technoauto-radius-xs:         6px;
  --technoauto-radius-sm:         8px;
  --technoauto-radius-card:      10px;    /* カード標準 (about/admission) */
  --technoauto-radius-md:         12px;
  --technoauto-radius-lg:         16px;
  --technoauto-radius-xl:         20px;
  --technoauto-radius-label:     22px;    /* ラベル・小ピル */
  --technoauto-radius-pill-sm:   25px;
  --technoauto-radius-pill:      26px;    /* Admissionヘッダー */
  --technoauto-radius-pill-lg:   30px;
  --technoauto-radius-pill-xl:   40px;    /* CTAボタン・パンくず */
  --technoauto-radius-full:      999px;

  /* ==========================================
     Layout
     ========================================== */
  --technoauto-container-pc:      1200px;   /* PC最大幅 */
  --technoauto-content-pc:        1440px;   /* Figma artboard 幅 */
  --technoauto-breakpoint-sp:     768px;
}

/* ==========================================
   Typography Utility Classes（Figma "テキストスタイル" 実測値と1:1）
   ========================================== */
.ta-display-l  { font-family: var(--technoauto-font-en); font-size: var(--technoauto-size-display-l);  font-weight: 900; line-height: var(--technoauto-lh-tight); letter-spacing: var(--technoauto-ls-normal); }
.ta-display-m  { font-family: var(--technoauto-font-en); font-size: var(--technoauto-size-display-m);  font-weight: 900; line-height: var(--technoauto-lh-tight); letter-spacing: var(--technoauto-ls-normal); }
.ta-h1         { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h1);         font-weight: 900; line-height: var(--technoauto-lh-heading); }
.ta-h2         { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h2);         font-weight: 700; line-height: var(--technoauto-lh-heading-tight); }
.ta-h3         { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h3);         font-weight: 700; line-height: var(--technoauto-lh-heading-loose); }
.ta-section-jp { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-section-jp); font-weight: 700; line-height: var(--technoauto-lh-heading-tight); }
.ta-body-l     { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-body-l);     font-weight: 400; line-height: var(--technoauto-lh-body); }
.ta-body-m     { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-body-m);     font-weight: 400; line-height: var(--technoauto-lh-body); }
.ta-body-s     { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-body-s);     font-weight: 400; line-height: var(--technoauto-lh-body-tight); }
.ta-label-btn  { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-label-btn);  font-weight: 700; line-height: 1; letter-spacing: var(--technoauto-ls-label-btn); }
.ta-label-tag  { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-label-tag);  font-weight: 700; line-height: 1; letter-spacing: var(--technoauto-ls-label-tag); }
.ta-label-en   { font-family: var(--technoauto-font-en); font-size: var(--technoauto-size-label-en);   font-weight: 700; line-height: 1; letter-spacing: var(--technoauto-ls-label-en); }
.ta-number     { font-family: var(--technoauto-font-en); font-size: var(--technoauto-size-number);     font-weight: 900; line-height: 1; letter-spacing: var(--technoauto-ls-number); }
.ta-caption    { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-caption);    font-weight: 400; line-height: var(--technoauto-lh-heading-loose); }

/* デフォルトの見出しタグにも Figma スタイルをマッピング */
h1 { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h1); font-weight: 900; line-height: var(--technoauto-lh-heading); }
h2 { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h2); font-weight: 700; line-height: var(--technoauto-lh-heading-tight); }
h3 { font-family: var(--technoauto-font-jp); font-size: var(--technoauto-size-h3); font-weight: 700; line-height: var(--technoauto-lh-heading-loose); }


/* ==========================================================================
   2026-09-25 global refinements v4
   （tokens.css：全ページ共通のアクセシビリティ / cross-browser 基盤）
   ========================================================================== */

/* Font smoothing / rendering ------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* テーマ色ハイライト -------------------------------------------------------- */
::selection {
    background: #439fff;
    color: #fff;
}
::-moz-selection {
    background: #439fff;
    color: #fff;
}

/* form control 標準リセット（Safari / iOS） --------------------------------- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button {
    -webkit-tap-highlight-color: transparent;
}

/* reduce-motion（全ページ共通）--------------------------------------------- */
@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;
    }
    a:hover,
    button:hover,
    .btn:hover,
    [class*="__cta"]:not([class*="__cta-"]):hover,
    [class*="__card"]:hover {
        transform: none !important;
    }
    .slick-slider,
    .slick-slide,
    [class*="slider"],
    [class*="carousel"] {
        animation: none !important;
        transition: none !important;
    }
}

/* prefers-contrast: more（WCAG サポート）----------------------------------- */
@media (prefers-contrast: more) {
    a {
        text-decoration: underline;
    }
    :focus-visible {
        outline-width: 3px !important;
    }
    [class*="__card"],
    [class*="__box"],
    [class*="__panel"],
    input,
    select,
    textarea,
    button {
        border-width: 2px;
    }
}

/* Retina line thinning ----------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    hr,
    .site-header,
    .site-footer__base {
        border-width: 0.5px;
    }
}

/* 2026-09-25 micro-typography v4 */
/* v4 micro-typography tokens: letter-spacing / font-feature-settings 追加変数
   Figma style.letterSpacing 実測を em/px で束ねる */
:root {
    /* letter-spacing (em) */
    --technoauto-ls-heading-tight:   -0.01em;   /* 大見出し kerning */
    --technoauto-ls-heading-snug:    -0.005em;  /* 中見出し kerning */
    --technoauto-ls-body:             0.02em;   /* 本文標準 */
    --technoauto-ls-en:               0.03em;   /* 英字見出し */
    --technoauto-ls-en-wide:          0.05em;   /* ボタン英字 */
    --technoauto-ls-tab:              0.08em;   /* タブ・chip 系 */
    --technoauto-ls-num-tight:       -0.02em;   /* 数値詰め */

    /* font-feature-settings */
    --technoauto-ff-jp:               "palt" 1, "kern" 1;
    --technoauto-ff-en:               "kern" 1, "liga" 1, "ss01" 1;
    --technoauto-ff-num:              "kern" 1, "tnum" 1;
}
/* utility class 上書き（既存 .ta-* に letter-spacing 補正） */
.ta-display-l,
.ta-display-m {
    font-feature-settings: var(--technoauto-ff-en);
    letter-spacing: var(--technoauto-ls-en);
}
.ta-h1 {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-heading-tight);
}
.ta-h2 {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-heading-snug);
}
.ta-h3,
.ta-section-jp {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-body);
}
.ta-body-l,
.ta-body-m,
.ta-body-s {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-body);
}
.ta-label-btn {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-en-wide);
}
.ta-label-tag {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-tab);
}
.ta-label-en {
    font-feature-settings: var(--technoauto-ff-en);
    letter-spacing: var(--technoauto-ls-en-wide);
}
.ta-number {
    font-feature-settings: var(--technoauto-ff-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--technoauto-ls-num-tight);
}
.ta-caption {
    font-feature-settings: var(--technoauto-ff-jp);
    letter-spacing: var(--technoauto-ls-body);
}
h1 { font-feature-settings: var(--technoauto-ff-jp); letter-spacing: var(--technoauto-ls-heading-tight); }
h2 { font-feature-settings: var(--technoauto-ff-jp); letter-spacing: var(--technoauto-ls-heading-snug); }
h3 { font-feature-settings: var(--technoauto-ff-jp); letter-spacing: var(--technoauto-ls-body); }
@media (max-width: 768px) {
    :root {
        --technoauto-ls-heading-tight: 0em;
        --technoauto-ls-heading-snug: 0.005em;
        --technoauto-ls-body: 0.01em;
        --technoauto-ls-en-wide: 0.04em;
        --technoauto-ls-tab: 0.06em;
    }
}

/* ==========================================================================
   2026-09-25 component variants v5C
   （tokens.css：ボタン / カード / chip の共通 variant CSS 変数を集約）
   - 各 page-*.css ではこれらの変数を参照して variant を統一する
   - primary/secondary/tertiary/danger の4系統
   - hover/focus 状態も統一 (0.2s ease, filter brightness(1.06))
   ========================================================================== */
:root {
    /* --- Button variants --- */
    --btn-primary-bg:          #439fff;
    --btn-primary-color:       #ffffff;
    --btn-primary-border:      transparent;

    --btn-secondary-bg:        #ffdd00;
    --btn-secondary-color:     #24222b;
    --btn-secondary-border:    transparent;

    --btn-tertiary-bg:         transparent;
    --btn-tertiary-color:      #24222b;
    --btn-tertiary-border:     #24222b;

    --btn-danger-bg:           #d63b3b;
    --btn-danger-color:        #ffffff;
    --btn-danger-border:       transparent;

    --btn-radius:              999px;
    --btn-padding:             18px 36px;
    --btn-padding-sp:          14px 24px;
    --btn-font-size:           14px;
    --btn-font-weight:         700;
    --btn-transition:          background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
    --btn-hover-filter:        brightness(1.06);

    /* --- Card variants --- */
    --card-radius:             16px;
    --card-padding:            32px;
    --card-padding-sp:         20px;
    --card-bg:                 #ffffff;
    --card-border:             1px solid #39364e;
    --card-shadow:             0 2px 8px rgba(15, 30, 60, .06);
    --card-shadow-hover:       0 6px 20px rgba(15, 30, 60, .10);

    /* --- Chip variants --- */
    --chip-radius:             6px;
    --chip-padding:            6px 12px;
    --chip-font-size:          12px;
    --chip-bg:                 #edf9ff;
    --chip-color:              #24222b;
    --chip-border:             1px solid #e5e5e5;
}

/* --- Utility variant classes (BEM を壊さない補助クラス) --- */
.ta-btn-variant--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border: 1px solid var(--btn-primary-border);
}
.ta-btn-variant--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
    border: 1px solid var(--btn-secondary-border);
}
.ta-btn-variant--tertiary {
    background-color: var(--btn-tertiary-bg);
    color: var(--btn-tertiary-color);
    border: 1px solid var(--btn-tertiary-border);
}
.ta-btn-variant--danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-color);
    border: 1px solid var(--btn-danger-border);
}
.ta-card-variant {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
}
.ta-chip-variant {
    display: inline-flex;
    align-items: center;
    background: var(--chip-bg);
    color: var(--chip-color);
    border: var(--chip-border);
    border-radius: var(--chip-radius);
    padding: var(--chip-padding);
    font-size: var(--chip-font-size);
    line-height: 1;
}

@media (max-width: 768px) {
    :root {
        --btn-padding:  var(--btn-padding-sp);
        --card-padding: var(--card-padding-sp);
    }
}

/* ==========================================================================
 * 2026-09-25 assets v5A  Figma vector icon tokens (SVG inline / currentColor)
 * ==========================================================================
 * Figma file WjIzjgeeWIPC8D3fszoCA3 から書き出した SVG を data URI 化。
 * `background-image: var(--technoauto-icon-arrow-right)` などで参照する。
 * 実ファイルは `assets/icons/*.svg` に配置済み。
 *   - dataURI 版: 単色 currentColor（CSS 側で `color: ...` を効かせられる）
 *   - file URL版: 多色/複雑形状はこちらを使う
 * 色コントロールは `--technoauto-icon-color` を上書き。
 */
:root {
    /* icon color hook (masked icon の tint 用) */
    --technoauto-icon-color: var(--technoauto-text-primary, #000);
    --technoauto-icon-color-inverse: #fff;
    --technoauto-icon-color-brand: var(--technoauto-bg-brand, #439FFF);

    /* dataURI icons (currentColor 対応・小サイズ) */
    --technoauto-icon-arrow-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7%200C10.8669%200%2014%203.13306%2014%207C14%2010.8669%2010.8669%2014%207%2014C3.13306%2014%200%2010.8669%200%207C0%203.13306%203.13306%200%207%200ZM10.1895%206.52016L6.37903%202.70968C6.125%202.45565%205.67339%202.45565%205.41935%202.70968L4.93952%203.18952C4.68548%203.44355%204.68548%203.89516%204.93952%204.14919L7.81855%207L4.93952%209.87903C4.68548%2010.1331%204.68548%2010.5847%204.93952%2010.8387L5.41935%2011.3185C5.67339%2011.5726%206.125%2011.5726%206.37903%2011.3185L10.1895%207.47984C10.4718%207.22581%2010.4718%206.80242%2010.1895%206.52016Z'%20fill='currentColor'/%3E%3C/svg%3E");
    --technoauto-icon-view-more: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%200C9.31452%200%2012%202.68548%2012%206C12%209.31452%209.31452%2012%206%2012C2.68548%2012%200%209.31452%200%206C0%202.68548%202.68548%200%206%200ZM8.73387%205.58871L5.46774%202.32258C5.25%202.10484%204.8629%202.10484%204.64516%202.32258L4.23387%202.73387C4.01613%202.95161%204.01613%203.33871%204.23387%203.55645L6.70161%206L4.23387%208.46774C4.01613%208.68548%204.01613%209.07258%204.23387%209.29032L4.64516%209.70161C4.8629%209.91935%205.25%209.91935%205.46774%209.70161L8.73387%206.41129C8.97581%206.19355%208.97581%205.83065%208.73387%205.58871Z'%20fill='currentColor'/%3E%3C/svg%3E");
    --technoauto-icon-checkmark: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='12'%20height='9'%20viewBox='0%200%2012%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11.7391%200.26087C12.087%200.58194%2012.087%201.14381%2011.7391%201.46488L4.88963%208.31438C4.56856%208.66221%204.00669%208.66221%203.68562%208.31438L0.26087%204.88963C-0.0869565%204.56856%20-0.0869565%204.00669%200.26087%203.68562C0.58194%203.33779%201.14381%203.33779%201.46488%203.68562L4.27425%206.49498L10.5351%200.26087C10.8562%20-0.0869565%2011.4181%20-0.0869565%2011.7391%200.26087Z'%20fill='currentColor'/%3E%3C/svg%3E");
    --technoauto-icon-hamburger: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='34'%20height='22'%20viewBox='0%200%2034%2022'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%200H33C33.5522%200%2034%200.44768%2034%201C34%201.55232%2033.5522%202%2033%202H1C0.44769%202%200%201.55232%200%201C0%200.44768%200.44769%200%201%200Z'%20fill='currentColor'/%3E%3Cpath%20d='M1%2010H33C33.5522%2010%2034%2010.4477%2034%2011C34%2011.5522%2033.5522%2012%2033%2012H1C0.44769%2012%200%2011.5522%200%2011C0%2010.4477%200.44769%2010%201%2010Z'%20fill='currentColor'/%3E%3Cpath%20d='M1%2020H33C33.5522%2020%2034%2020.4478%2034%2021C34%2021.5523%2033.5522%2022%2033%2022H1C0.44769%2022%200%2021.5523%200%2021C0%2020.4478%200.44769%2020%201%2020Z'%20fill='currentColor'/%3E%3C/svg%3E");

    /* file URL icons (theme relative — assets/*.css から assets/icons/*.svg へ) */
    --technoauto-icon-arrow-right-file: url("icons/icon-arrow-right.svg");
    --technoauto-icon-view-more-file:   url("icons/icon-view-more.svg");
    --technoauto-icon-checkmark-file:   url("icons/icon-checkmark.svg");
    --technoauto-icon-hamburger-file:   url("icons/icon-hamburger.svg");
    --technoauto-icon-arrow-btn-file:   url("icons/icon-arrow-btn.svg");
    --technoauto-icon-choice-row-file:  url("icons/icon-choice-row.svg");
    --technoauto-icon-oc-file:          url("icons/icon-oc.svg");
    --technoauto-icon-doc-file:         url("icons/icon-doc-request.svg");
    --technoauto-icon-school-file:      url("icons/icon-school.svg");
    --technoauto-icon-document-file:    url("icons/icon-document.svg");
    --technoauto-icon-pin-file:         url("icons/icon-pin.svg");
}

/* mask helper — currentColor で icon の tint を効かせるユーティリティ
 * BEMは維持しつつ、必要な箇所で class="ta-icon-mask ta-icon-mask--arrow-right" を付与できる補助 */
.ta-icon-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    vertical-align: middle;
}
.ta-icon-mask--arrow-right { -webkit-mask-image: var(--technoauto-icon-arrow-right-file); mask-image: var(--technoauto-icon-arrow-right-file); }
.ta-icon-mask--view-more   { -webkit-mask-image: var(--technoauto-icon-view-more-file);   mask-image: var(--technoauto-icon-view-more-file); }
.ta-icon-mask--checkmark   { -webkit-mask-image: var(--technoauto-icon-checkmark-file);   mask-image: var(--technoauto-icon-checkmark-file); }
.ta-icon-mask--hamburger   { -webkit-mask-image: var(--technoauto-icon-hamburger-file);   mask-image: var(--technoauto-icon-hamburger-file); }
.ta-icon-mask--arrow-btn   { -webkit-mask-image: var(--technoauto-icon-arrow-btn-file);   mask-image: var(--technoauto-icon-arrow-btn-file); }
.ta-icon-mask--choice-row  { -webkit-mask-image: var(--technoauto-icon-choice-row-file);  mask-image: var(--technoauto-icon-choice-row-file); }
.ta-icon-mask--pin         { -webkit-mask-image: var(--technoauto-icon-pin-file);         mask-image: var(--technoauto-icon-pin-file); }
.ta-icon-mask--oc          { -webkit-mask-image: var(--technoauto-icon-oc-file);          mask-image: var(--technoauto-icon-oc-file); }
.ta-icon-mask--doc         { -webkit-mask-image: var(--technoauto-icon-doc-file);         mask-image: var(--technoauto-icon-doc-file); }
/* v5A end */

/* ==========================================================================
 * 2026-09-25 dark section variants v7
 * ==========================================================================
 * Figma 濃色（#24222b / 濃紺）背景の CTA / ENTRY / INVITE セクション用の共通変数。
 * ページ側では `.is-dark-section` を付けるか、属性セレクタでピックアップして
 * 全要素（見出し / 本文 / リンク / ボタン / pill）を反転色に統一する。
 *
 * BEM を壊さないため、既存 v1〜v6 の class 命名はそのまま維持。
 * ダーク面上のボタンは黄色(--dark-section-cta-bg)を CTA 主色として使う。
 */
:root {
    --dark-section-bg:            #24222b;
    --dark-section-color:         #ffffff;
    --dark-section-color-muted:   rgba(255, 255, 255, 0.75);
    --dark-section-border:        rgba(255, 255, 255, 0.15);
    --dark-section-cta-bg:        #ffdd00;
    --dark-section-cta-color:     #24222b;
    --dark-section-link-color:    #ffdd00;
    --dark-section-link-hover:    #ffe633;
    --dark-section-pill-bg:       #ffffff;
    --dark-section-pill-color:    #24222b;
}

/* --- 共通 dark section 反転ルール ---
 * `.is-dark-section` utility を付けるか、属性セレクタで `__section--entry` /
 * `__section--cta` / `__section--dark` / `__section--invite` の子要素を反転。
 * 見出し・本文は !important で確実に上書き（従来 v1〜v6 の指定より後勝ちのため）。
 */
.is-dark-section,
[class*="__section--entry"],
[class*="__section--dark"],
[class*="__section--invite"] {
    background: var(--dark-section-bg);
    color: var(--dark-section-color);
}

/* 見出し反転 */
.is-dark-section .section-heading__jp-title,
.is-dark-section .section-heading__wordmark-front,
[class*="__section--entry"] .section-heading__jp-title,
[class*="__section--entry"] .section-heading__wordmark-front,
[class*="__section--dark"] .section-heading__jp-title,
[class*="__section--dark"] .section-heading__wordmark-front,
[class*="__section--invite"] .section-heading__jp-title,
[class*="__section--invite"] .section-heading__wordmark-front {
    color: #ffffff !important;
}

/* リード反転 */
.is-dark-section .section-heading__lead,
[class*="__section--entry"] .section-heading__lead,
[class*="__section--dark"] .section-heading__lead,
[class*="__section--invite"] .section-heading__lead {
    color: var(--dark-section-color-muted) !important;
}

/* 一般テキストリンク（ボタン以外）は黄色 */
.is-dark-section a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):not([class*="button"]):not(.wp-block-button__link),
[class*="__section--entry"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):not([class*="button"]):not(.wp-block-button__link),
[class*="__section--dark"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):not([class*="button"]):not(.wp-block-button__link),
[class*="__section--invite"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):not([class*="button"]):not(.wp-block-button__link) {
    color: var(--dark-section-link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.is-dark-section a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):hover,
[class*="__section--entry"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):hover,
[class*="__section--dark"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):hover,
[class*="__section--invite"] a:not([class*="__btn"]:not([class*="__btn-"])):not([class*="__cta"]:not([class*="__cta-"])):hover {
    color: var(--dark-section-link-hover);
}

/* ボタン / CTA は黄色ベースへ反転（BEM の *__btn / *__cta を横断ピック） */
.is-dark-section [class*="__btn"]:not([class*="__btn-"]),
.is-dark-section [class*="__cta"]:not([class*="__section--cta"]),
[class*="__section--entry"] [class*="__btn"]:not([class*="__btn-"]),
[class*="__section--entry"] [class*="__cta"]:not([class*="__section--cta"]),
[class*="__section--dark"] [class*="__btn"]:not([class*="__btn-"]),
[class*="__section--dark"] [class*="__cta"]:not([class*="__section--cta"]),
[class*="__section--invite"] [class*="__btn"]:not([class*="__btn-"]),
[class*="__section--invite"] [class*="__cta"]:not([class*="__section--cta"]) {
    background-color: var(--dark-section-cta-bg);
    color: var(--dark-section-cta-color);
    border-color: var(--dark-section-cta-bg);
}

/* 白ピル反転（bg/color を反転して確保） */
.is-dark-section [class*="__req"],
.is-dark-section [class*="__pill"]:not([class*="__pill-"]),
[class*="__section--entry"] [class*="__req"],
[class*="__section--entry"] [class*="__pill"]:not([class*="__pill-"]),
[class*="__section--dark"] [class*="__req"],
[class*="__section--dark"] [class*="__pill"]:not([class*="__pill-"]),
[class*="__section--invite"] [class*="__req"],
[class*="__section--invite"] [class*="__pill"]:not([class*="__pill-"]) {
    background-color: var(--dark-section-pill-bg);
    color: var(--dark-section-pill-color);
    border-color: var(--dark-section-border);
}

/* border 系（下線・区切り）を薄白に */
.is-dark-section hr,
[class*="__section--entry"] hr,
[class*="__section--dark"] hr,
[class*="__section--invite"] hr {
    border-color: var(--dark-section-border);
}

/* SP breakpoint：dark section 内でも spacing を維持 */
@media (max-width: 768px) {
    .is-dark-section,
    [class*="__section--entry"],
    [class*="__section--dark"],
    [class*="__section--invite"] {
        /* padding は各ページの既存 rules が担当。ここでは色系のみ */
    }
}
/* v7 end */

/* ==========================================================================
   2026-09-25 table/list polish v8 — 共通トークン
   Figma "🎨 Foundations" + 各ページ table/dl/ul の実測値を横断集約。
   BEM を破壊しないため、追加のみ・上書きは末尾 v8 レイヤで最小限。
   ========================================================================== */
:root {
    /* Table --------------------------------------------------------- */
    --technoauto-table-border:        1px solid #eaeaea;
    --technoauto-table-border-strong: 1px solid #d9d9d9;
    --technoauto-table-radius:        12px;
    --technoauto-table-shadow:        0 1px 2px rgba(0, 0, 0, 0.04);
    --technoauto-table-th-bg:         #24222b;
    --technoauto-table-th-color:      #ffffff;
    --technoauto-table-th-padding:    12px 16px;
    --technoauto-table-td-padding:    12px 16px;
    --technoauto-table-zebra-bg:      rgba(215, 242, 255, 0.25);
    --technoauto-table-hover-bg:      rgba(67, 159, 255, 0.05);
    --technoauto-table-td-fs:         14px;
    --technoauto-table-td-lh:         1.6;
    /* SP */
    --technoauto-table-th-padding-sp: 8px 10px;
    --technoauto-table-td-padding-sp: 8px 10px;
    --technoauto-table-td-fs-sp:      12px;

    /* List (ul/ol) -------------------------------------------------- */
    --technoauto-list-marker-color:      #d63b3b;   /* 赤マーカー (godai-group school-field と統一) */
    --technoauto-list-marker-color-alt:  #439fff;   /* 青マーカー */
    --technoauto-list-item-spacing:      10px;
    --technoauto-list-indent:            1.4em;
    --technoauto-list-num-fw:            700;

    /* Definition list (dl) ----------------------------------------- */
    --technoauto-dl-row-padding:     20px 0;
    --technoauto-dl-row-padding-sp:  14px 0;
    --technoauto-dl-row-border:      1px solid #eee;
    --technoauto-dl-row-gap:         20px;
    --technoauto-dl-dt-width:        140px;
    --technoauto-dl-dt-width-sp:     100%;
    --technoauto-dl-dt-color:        #666;
    --technoauto-dl-dt-fw:           700;
    --technoauto-dl-dt-fs:           14px;
    --technoauto-dl-dd-fs:           15px;
    --technoauto-dl-dd-lh:           1.75;
}
/* v8 end (tokens) — table/list polish */

/* ==========================================
   2026-09-25 heading hierarchy v8
   ==========================================
   目的: h1-h6 の font-size/weight/margin と 本文 line-length を統一。
   スコープ: BEM 個別定義がない「unstyled 見出し・本文」のみに適用
             (h1:not([class]) 等の :not([class]) セレクタで既存 v1〜v7 と衝突回避)
   参照: Figma "🎨 Foundations" node 12:3 実測値 (H1=26 / H2=20 / H3=16 / Sec-JP=15)
         ここでは指定要件どおり Web 汎用値(H1=40等) を宣言し、Figma準拠は
         既存の --technoauto-size-h* トークン側に温存する（両立）。
*/
:root {
  /* PC 見出し階層 */
  --h1-font-size: 40px;
  --h1-lh: 1.4;
  --h1-fw: 700;
  --h1-mb: 24px;

  --h2-font-size: 30px;
  --h2-lh: 1.5;
  --h2-fw: 700;
  --h2-mb: 20px;

  --h3-font-size: 22px;
  --h3-lh: 1.55;
  --h3-fw: 700;
  --h3-mb: 16px;

  --h4-font-size: 18px;
  --h4-lh: 1.6;
  --h4-fw: 700;
  --h4-mb: 12px;

  --h5-font-size: 16px;
  --h5-lh: 1.65;
  --h5-fw: 700;
  --h5-mb: 10px;

  --h6-font-size: 14px;
  --h6-lh: 1.7;
  --h6-fw: 700;
  --h6-mb: 8px;

  /* 本文 line-length / line-height */
  --body-max-width:  68ch;
  --body-lh:         1.8;
  --lead-max-width:  60ch;
  --lead-lh:         1.7;
}

/* SP: 見出しは 0.85 倍縮小（本文は同値のまま可読性維持） */
@media screen and (max-width: 768px) {
  :root {
    --h1-font-size: 34px; /* 40 * 0.85 */
    --h2-font-size: 26px; /* 30 * 0.87 */
    --h3-font-size: 19px; /* 22 * 0.86 */
    --h4-font-size: 16px; /* 18 * 0.89 */
    --h5-font-size: 14px; /* 16 * 0.87 */
    --h6-font-size: 13px; /* 14 * 0.93 */
    --h1-mb: 20px;
    --h2-mb: 16px;
    --h3-mb: 14px;
    --h4-mb: 10px;
    --h5-mb:  8px;
    --h6-mb:  6px;
  }
}
/* v8 end (tokens) */


/* ==========================================================================
   2026-09-25 spacing rhythm v9
   ==========================================================================
   目的: セクション縦リズムを Figma の 4pt base grid + 8/16/24/40/60/80/120 に統一。
   スコープ: 全 page-*.css 共通の spacing scale と section-py/section-gap を提供。
   使い方:
     - .page-*__section にデフォルトの縦 padding を当てる（各ページの個別値が
       あればそちらを尊重・上書きしない fallback ポリシー）。
     - セクション同士の間隔は `.page-*__section + .page-*__section` で margin-top。
   参照: Figma "🎨 Foundations" 4pt grid + Auto Layout paddings 実測
         現状観測: PC = 60/80/110/150 混在 → 110 を default に統一。
                   SP = 40/60/80 混在 → 60 を default に統一。
   ========================================================================== */
:root {
    /* 4pt base grid ---------------------------------------------------- */
    --space-4:   4px;
    --space-8:   8px;
    --space-12:  12px;
    --space-16:  16px;
    --space-20:  20px;
    --space-24:  24px;
    --space-32:  32px;
    --space-40:  40px;
    --space-48:  48px;
    --space-60:  60px;
    --space-80:  80px;
    --space-120: 120px;

    /* Semantic section rhythm (PC) ------------------------------------ */
    --section-py-pc:            110px;   /* セクション上下 padding デフォルト */
    --section-py-pc-with-lead:  150px;   /* lead を持つセクション */
    --section-gap-pc:           60px;    /* セクション間 gap */
    --card-gap-pc:              24px;    /* カード grid gap */
    --heading-mb-pc:            32px;    /* section-heading 下のマージン */

    /* Semantic section rhythm (SP) ------------------------------------ */
    --section-py-sp:            60px;
    --section-py-sp-with-lead:  80px;
    --section-gap-sp:           40px;
    --card-gap-sp:              12px;
    --heading-mb-sp:            20px;
}

@media screen and (max-width: 768px) {
    :root {
        --section-py-pc:            var(--section-py-sp);
        --section-py-pc-with-lead:  var(--section-py-sp-with-lead);
        --section-gap-pc:           var(--section-gap-sp);
        --card-gap-pc:              var(--card-gap-sp);
        --heading-mb-pc:            var(--heading-mb-sp);
    }
}
/* v9 end (tokens) — spacing rhythm */

/* ==========================================================================
   2026-09-25 wordmark precision v9
   ==========================================================================
   目的: hero-wordmark（英字大文字・italic・二重レイヤー）を Figma と 1px 単位で揃える。
   Figma REST 実測（file WjIzjgeeWIPC8D3fszoCA3, depth=6, 46ページ横断サンプル）:
     - font-family: Montserrat（Barlow ではない）
     - font-weight: 700
     - font-style: italic
     - hero 用 font-size: 60px（section-heading は 50px）
     - shadow は front から dx=+3px, dy=+3px（全ページ統一）
     - 両レイヤーとも 1px stroke #39364e（--technoauto-border-base）
     - shadow fill: 主に #439fff（brand）／セクションによって #20d99b (success) や #ffe576 (accent-deep)
     - front fill: #ffffff（KV 上）／セクションによって #24222b（濃色下）
   v1〜v8 の既存指定は破壊しない：v9 はトークンのみ定義し、page-*.css 側で参照する。
   ========================================================================== */
:root {
    /* offset (front を基点に shadow をズラす dx / dy) */
    --wordmark-shadow-offset-x:     3px;
    --wordmark-shadow-offset-y:     3px;
    --wordmark-shadow-offset-x-sp:  2px;   /* SP: 60→38-46px 縮小に合わせ offset も縮小 */
    --wordmark-shadow-offset-y-sp:  2px;

    /* stroke（両レイヤー共通・Figma 実測 1px 濃紺 border-base） */
    --wordmark-shadow-stroke-w:     1px;
    --wordmark-shadow-stroke-color: var(--technoauto-border-base, #39364e);
    --wordmark-front-stroke-w:      1px;
    --wordmark-front-stroke-color:  var(--technoauto-border-base, #39364e);

    /* fill 色（デフォルト・KV 上の hero-wordmark） */
    --wordmark-shadow-color:        var(--technoauto-bg-brand, #439fff);     /* 影：ブランド青 */
    --wordmark-front-color:         var(--technoauto-text-inverse, #ffffff); /* 前面：白 */

    /* section-heading 用（白背景セクション上：前面を濃色に反転） */
    --wordmark-front-color-on-light: #24222b;

    /* dark-section 上の section-heading wordmark 用 */
    --wordmark-shadow-color-dark:   var(--technoauto-bg-brand, #439fff);
    --wordmark-front-color-dark:    #ffffff;

    /* typography */
    --wordmark-font-family:         'Montserrat', 'Barlow', 'Inter', 'Segoe UI', sans-serif;
    --wordmark-font-style:          italic;
    --wordmark-font-weight:         700;
    --wordmark-font-stretch:        normal;   /* Figma実測: Montserrat 標準幅（Extra Condensed 等ではない） */
    --wordmark-line-height:         1;
    --wordmark-letter-spacing:      0;

    /* size (hero / section-heading の 2 段) */
    --wordmark-size-hero:           60px;
    --wordmark-size-hero-sp:        clamp(36px, 10vw, 44px);
    --wordmark-size-section:        50px;
    --wordmark-size-section-sp:     clamp(28px, 8vw, 38px);
}
/* v9 end (tokens) — wordmark precision */

/* ==========================================================================
   2026-09-25 Montserrat unification v10
   ==========================================================================
   目的: v9 の Figma REST 実測で hero-wordmark フォントが Montserrat（Barlow ではない）
         であることが判明。全 46 page-*.css の英字系（wordmark / EN 見出し / 数字系）を
         Montserrat 優先に統一する。
   実装:
     1) --technoauto-font-en を Montserrat 先頭 stack に置換（上部 :root で対応済）
     2) --wordmark-font-family も Montserrat 先頭（v9 で対応済）
     3) 属性セレクタで 英字系 BEM element を横断的に Montserrat に固定（fallback として var(--technoauto-font-en)）
     4) v1〜v9 の既存 Barlow / Inter 定義は fallback として温存（破壊しない）
   ========================================================================== */
[class*="__wordmark"],
[class*="__hero-en"],
[class*="__section-en"],
[class*="__section-heading-en"],
[class*="__en"],
[class*="__num"],
[class*="__number"],
[class*="__data-value"] {
    font-family: var(--technoauto-font-en);
}
/* v10 end (tokens) — Montserrat unification */

/* ==========================================================================
   2026-09-25 effects precision v10
   ==========================================================================
   目的: Figma effects[] (DROP_SHADOW / INNER_SHADOW / LAYER_BLUR / BACKGROUND_BLUR)
         と fills[] (GRADIENT_LINEAR / GRADIENT_RADIAL) の実測結果を CSS 変数に集約。
   Figma REST 実測 (file WjIzjgeeWIPC8D3fszoCA3 / デザイン展開・下層ページ試作・パーツ一覧):
     - GRADIENT_*      : 0 件（Figma は単色 fill 運用・grad は CSS 側の演出）
     - LAYER_BLUR      : 0 件
     - BACKGROUND_BLUR : 0 件（drawer overlay の backdrop-blur は実装側で追加）
     - DROP_SHADOW 頻出パターン:
        A. hero-wordmark      : dx=5  dy=5  r=0  spread=0   #000 (back)
        B. hero-wordmark      : dx=5  dy=5  r=0  spread=-1  #439fff (brand tint back)
        C. section-wordmark   : dx=8  dy=8  r=0  spread=0   #39364e (border-base back)
        D. section-wordmark   : dx=8  dy=8  r=0  spread=-1  #4da2fb / #6bd0ff (brand tint)
        E. card-subtle        : dx=0  dy=1  r=0  spread=0   #39364e (border-base)
   本 v10 では、
     1) 標準の box-shadow scale (xs/sm/md/lg/xl) を token 化（Figma 準拠の #0f1e3c ベース）
     2) Figma 実測の hard-shadow variant (offset 5/5, 8/8) を専用 token 化
     3) blur / backdrop-blur を token 化（drawer overlay 等での参照用）
     4) SP breakpoint で blur を軽量化（Retina モバイルのペイント負荷対策）
     5) prefers-reduced-transparency で backdrop-blur を無効化
   BEM は破壊しない・v1〜v9 定義は温存。ページ側は末尾 v10 レイヤで参照する。
   ========================================================================== */
:root {
    /* --- Shadow scale (Web 汎用・Figma には無いが指定 spec 値を採用) --- */
    --shadow-xs: 0 1px 2px rgba(15, 30, 60, .04);
    --shadow-sm: 0 2px 8px rgba(15, 30, 60, .06);
    --shadow-md: 0 6px 14px rgba(15, 30, 60, .08);
    --shadow-lg: 0 12px 24px rgba(15, 30, 60, .10);
    --shadow-xl: 0 24px 48px rgba(15, 30, 60, .14);

    /* --- Card hover / focus shadow (シリーズ整合) --- */
    --shadow-card:        var(--shadow-sm);
    --shadow-card-hover:  var(--shadow-md);
    --shadow-modal:       var(--shadow-xl);

    /* --- Figma 実測 hard-shadow (blur=0・オフセットのみ) --- */
    --shadow-wordmark-hero:    5px 5px 0 rgba(0, 0, 0, 1);          /* Figma パターン A */
    --shadow-wordmark-hero-brand: 5px 5px 0 rgba(67, 159, 255, 1);  /* Figma パターン B (spread=-1 は CSS 非対応→そのまま) */
    --shadow-wordmark-section: 8px 8px 0 rgba(57, 54, 78, 1);       /* Figma パターン C */
    --shadow-wordmark-section-brand: 8px 8px 0 rgba(77, 162, 251, 1); /* Figma パターン D */
    --shadow-card-figma:       0 1px 0 rgba(57, 54, 78, 1);         /* Figma パターン E */

    /* SP: hero-wordmark hard-shadow の offset を縮小 (v9 wordmark offset と揃える) */
    --shadow-wordmark-hero-sp:      3px 3px 0 rgba(0, 0, 0, 1);
    --shadow-wordmark-section-sp:   5px 5px 0 rgba(57, 54, 78, 1);

    /* --- Filter blur (要素そのものをぼかす) --- */
    --blur-sm: blur(2px);
    --blur-md: blur(8px);
    --blur-lg: blur(20px);

    /* --- Backdrop blur (drawer overlay / glass panel) ---
     * saturate() で背景の色乗りを維持しつつ blur。iOS Safari 16+ / Chromium 76+ 対応。
     * Firefox 未対応面向けに `background-color` fallback を各要素で必ず指定する。
     */
    --backdrop-blur-sm: blur(2px) saturate(0.9);
    --backdrop-blur-md: blur(8px) saturate(0.95);
    --backdrop-blur-lg: blur(20px) saturate(1.05);

    /* --- Gradient tokens (Figma には無いが v10 で共通化) --- */
    --grad-brand-soft:   linear-gradient(135deg, var(--technoauto-bg-subtle, #EDF9FF) 0%, var(--technoauto-bg-section, #D7F2FF) 100%);
    --grad-brand-vivid:  linear-gradient(135deg, var(--technoauto-bg-brand-soft, #6BD0FF) 0%, var(--technoauto-bg-brand, #439FFF) 100%);
    --grad-accent-warm:  linear-gradient(180deg, #FFF6C7 0%, var(--technoauto-bg-accent-deep, #FFE576) 100%);
    --grad-hero-sky:     linear-gradient(180deg, #ECECEC 0%, #ECECEC 50%, #62D1FF 50%, #62D1FF 100%);
    --grad-radial-spot:  radial-gradient(circle at 50% 0%, var(--technoauto-bg-subtle, #EDF9FF) 0%, rgba(237,249,255,0) 70%);
}

/* --- Utility: 背景 blur を持つ overlay の共通ルール --- */
.ta-backdrop-blur--sm { -webkit-backdrop-filter: var(--backdrop-blur-sm); backdrop-filter: var(--backdrop-blur-sm); }
.ta-backdrop-blur--md { -webkit-backdrop-filter: var(--backdrop-blur-md); backdrop-filter: var(--backdrop-blur-md); }
.ta-backdrop-blur--lg { -webkit-backdrop-filter: var(--backdrop-blur-lg); backdrop-filter: var(--backdrop-blur-lg); }

/* --- drawer overlay に backdrop-blur を追加（Firefox は非対応→ background-color fallback で暗幕維持） --- */
.site-drawer-overlay {
    -webkit-backdrop-filter: var(--backdrop-blur-sm);
            backdrop-filter: var(--backdrop-blur-sm);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .site-drawer-overlay {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* --- SP: blur を軽量化してモバイル GPU 負荷を下げる --- */
@media screen and (max-width: 768px) {
    :root {
        --blur-sm: blur(1px);
        --blur-md: blur(4px);
        --blur-lg: blur(10px);
        --backdrop-blur-sm: blur(1px) saturate(0.9);
        --backdrop-blur-md: blur(4px) saturate(0.95);
        --backdrop-blur-lg: blur(10px) saturate(1.05);
    }
}

/* --- prefers-reduced-transparency: backdrop-blur を無効化（WCAG 2.2 サポート） --- */
@media (prefers-reduced-transparency: reduce) {
    .ta-backdrop-blur--sm,
    .ta-backdrop-blur--md,
    .ta-backdrop-blur--lg,
    .site-drawer-overlay {
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        background: rgba(0, 0, 0, 0.6);
    }
}
/* v10 end (tokens) — effects precision */

/* ==========================================================================
   2026-09-26 Figma component sync v13
   Figma REST API 実測値で component variant を上書き (v5C の業界標準は残す)
   File: WjIzjgeeWIPC8D3fszoCA3 / page: 🧩 パーツ一覧 (97:99)
   ---
   出典実測 nodes:
     - Button (COMPONENT_SET 88:18)
         Primary  #000000 / border #000000 0.5px / radius 999 / pad 0 20 / h45 / label #fff 16/16 700
         Outline  #ffffff / border #39364e 1px / radius 999 / pad 0 8 / h40 / label #000 15/15 700
         Tel      #439fff / border #39364e 1px / radius 999 / pad 0 20 / h45 / label #fff 16/16 700
         Sub      #ffffff / border #39364e 1px / radius 999 / pad 14 20 / h42 / label #000 14/14 700
     - Primary Button (SP 266:2929)   #439fff / border #39364e 1px / radius 999 / pad 14 20 / h44 / #fff 16/16 700
     - Primary Button / PC (959:15783) #439fff / border #39364e 1px / radius 999 / pad 18 20 / h56 / #fff 20/20 700
     - Label Pill  (92:37)   #ffef6b / border #39364e 1px / radius 999 / pad 10  / #000 15/22.5 500
     - Tag         (92:34)   #ffffff / border #e5e5e5 1px / radius 999 / pad 0 10 / #000 13/13 400
     - Tag Pill    (271:3152) #ffffff / border #39364e 1px / radius 999 / pad 5 12 / label #439fff 11/13.2 700
     - Company Chip / PC (1130:18374) transparent / border #e5e5e5 1px / radius 41 / pad 5 0 / #000 16/28.8 400
   ========================================================================== */
:root {
    /* --- Button (Figma 実測) --- */
    --btn-primary-bg-figma:        #000000;      /* Button Style=Primary */
    --btn-primary-color-figma:     #ffffff;
    --btn-primary-border-figma:    #000000;
    --btn-primary-border-w-figma:  0.5px;
    --btn-primary-radius-figma:    999px;
    --btn-primary-padding-figma:   0 20px;
    --btn-primary-padding-pc-figma: 18px 20px;   /* Primary Button / PC (959:15783) */
    --btn-primary-padding-sp-figma: 14px 20px;   /* Primary Button (266:2929) */
    --btn-primary-height-figma:    45px;
    --btn-primary-height-pc-figma: 56px;
    --btn-primary-font-size-figma: 16px;
    --btn-primary-font-size-pc-figma: 20px;
    --btn-primary-line-figma:      16px;
    --btn-primary-line-pc-figma:   20px;
    --btn-primary-weight-figma:    700;

    --btn-tel-bg-figma:            #439fff;      /* Style=Tel */
    --btn-tel-color-figma:         #ffffff;
    --btn-tel-border-figma:        #39364e;
    --btn-tel-border-w-figma:      1px;

    --btn-outline-bg-figma:        #ffffff;      /* Style=Outline */
    --btn-outline-color-figma:     #000000;
    --btn-outline-border-figma:    #39364e;
    --btn-outline-border-w-figma:  1px;
    --btn-outline-padding-figma:   0 8px;
    --btn-outline-height-figma:    40px;
    --btn-outline-font-size-figma: 15px;

    --btn-sub-bg-figma:            #ffffff;      /* Style=Sub */
    --btn-sub-color-figma:         #000000;
    --btn-sub-border-figma:        #39364e;
    --btn-sub-border-w-figma:      1px;
    --btn-sub-padding-figma:       14px 20px;
    --btn-sub-height-figma:        42px;
    --btn-sub-font-size-figma:     14px;

    /* --- Pill (Label Pill 92:37) --- */
    --pill-bg-figma:               #ffef6b;
    --pill-color-figma:            #000000;
    --pill-border-figma:           #39364e;
    --pill-border-w-figma:         1px;
    --pill-radius-figma:           999px;
    --pill-padding-figma:          10px;
    --pill-height-figma:           30px;
    --pill-font-size-figma:        15px;
    --pill-line-figma:             22.5px;
    --pill-weight-figma:           500;

    /* --- Badge (Tag Pill 271:3152 を badge 相当として採用) --- */
    --badge-bg-figma:              #ffffff;
    --badge-color-figma:           #439fff;
    --badge-border-figma:          #39364e;
    --badge-border-w-figma:        1px;
    --badge-radius-figma:          999px;
    --badge-padding-figma:         5px 12px;
    --badge-height-figma:          23px;
    --badge-font-size-figma:       11px;
    --badge-line-figma:            13.2px;
    --badge-weight-figma:          700;

    /* --- Tag (Tag 92:34) --- */
    --tag-bg-figma:                #ffffff;
    --tag-color-figma:             #000000;
    --tag-border-figma:            #e5e5e5;
    --tag-border-w-figma:          1px;
    --tag-radius-figma:            999px;
    --tag-padding-figma:           0 10px;
    --tag-height-figma:            30px;
    --tag-font-size-figma:         13px;
    --tag-line-figma:              13px;
    --tag-weight-figma:            400;

    /* --- Chip (Company Chip / PC 1130:18374) --- */
    --chip-bg-figma:               transparent;
    --chip-color-figma:            #000000;
    --chip-border-figma:           #e5e5e5;
    --chip-border-w-figma:         1px;
    --chip-radius-figma:           41px;
    --chip-padding-figma:          5px 0;
    --chip-height-figma:           41px;
    --chip-font-size-figma:        16px;
    --chip-line-figma:             28.8px;
    --chip-weight-figma:           400;
}

/* v5C 業界標準 variable を Figma 実測で上書き (fallback 保持) */
:root {
    --btn-primary-bg:              var(--btn-tel-bg-figma, #439fff);         /* サイトの主要 CTA 色を維持 */
    --btn-primary-color:           var(--btn-tel-color-figma, #ffffff);
    --btn-primary-border:          var(--btn-tel-border-figma, #39364e);
    --btn-radius:                  var(--btn-primary-radius-figma, 999px);
    --btn-padding:                 var(--btn-primary-padding-pc-figma, 18px 20px);
    --btn-padding-sp:              var(--btn-primary-padding-sp-figma, 14px 20px);
    --btn-font-size:               var(--btn-primary-font-size-pc-figma, 20px);
    --btn-font-weight:             var(--btn-primary-weight-figma, 700);
}

/* SP: Button font-size を SP variant に切替 */
@media screen and (max-width: 768px) {
    :root {
        --btn-font-size:           var(--btn-primary-font-size-figma, 16px);
        --btn-padding:             var(--btn-primary-padding-sp-figma, 14px 20px);
    }
}

/* --- Component 実測 property セット (BEM 属性セレクタ用) --- */
[class*="__btn"]:not([class*="__btn-"]),
[class*="-btn__"],
[class*="__button"] {
    /* 既存 style を破壊しないよう opt-in で当てる: page 側で `.ta-fg-btn` を付与するかどうかで制御 */
}
.ta-fg-btn,
.ta-fg-btn--primary {
    background-color: var(--btn-tel-bg-figma);
    color: var(--btn-tel-color-figma);
    border: var(--btn-tel-border-w-figma) solid var(--btn-tel-border-figma);
    border-radius: var(--btn-primary-radius-figma);
    padding: var(--btn-primary-padding-pc-figma);
    font-size: var(--btn-primary-font-size-pc-figma);
    line-height: var(--btn-primary-line-pc-figma);
    font-weight: var(--btn-primary-weight-figma);
}
.ta-fg-btn--outline {
    background-color: var(--btn-outline-bg-figma);
    color: var(--btn-outline-color-figma);
    border: var(--btn-outline-border-w-figma) solid var(--btn-outline-border-figma);
    border-radius: var(--btn-primary-radius-figma);
    padding: var(--btn-outline-padding-figma);
    font-size: var(--btn-outline-font-size-figma);
    font-weight: var(--btn-primary-weight-figma);
}
.ta-fg-btn--sub {
    background-color: var(--btn-sub-bg-figma);
    color: var(--btn-sub-color-figma);
    border: var(--btn-sub-border-w-figma) solid var(--btn-sub-border-figma);
    border-radius: var(--btn-primary-radius-figma);
    padding: var(--btn-sub-padding-figma);
    font-size: var(--btn-sub-font-size-figma);
    font-weight: var(--btn-primary-weight-figma);
}
.ta-fg-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--pill-bg-figma);
    color: var(--pill-color-figma);
    border: var(--pill-border-w-figma) solid var(--pill-border-figma);
    border-radius: var(--pill-radius-figma);
    padding: var(--pill-padding-figma);
    font-size: var(--pill-font-size-figma);
    line-height: var(--pill-line-figma);
    font-weight: var(--pill-weight-figma);
}
.ta-fg-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--badge-bg-figma);
    color: var(--badge-color-figma);
    border: var(--badge-border-w-figma) solid var(--badge-border-figma);
    border-radius: var(--badge-radius-figma);
    padding: var(--badge-padding-figma);
    font-size: var(--badge-font-size-figma);
    line-height: var(--badge-line-figma);
    font-weight: var(--badge-weight-figma);
}
.ta-fg-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--tag-bg-figma);
    color: var(--tag-color-figma);
    border: var(--tag-border-w-figma) solid var(--tag-border-figma);
    border-radius: var(--tag-radius-figma);
    padding: var(--tag-padding-figma);
    height: var(--tag-height-figma);
    font-size: var(--tag-font-size-figma);
    line-height: var(--tag-line-figma);
    font-weight: var(--tag-weight-figma);
}
.ta-fg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--chip-bg-figma);
    color: var(--chip-color-figma);
    border: var(--chip-border-w-figma) solid var(--chip-border-figma);
    border-radius: var(--chip-radius-figma);
    padding: var(--chip-padding-figma);
    font-size: var(--chip-font-size-figma);
    line-height: var(--chip-line-figma);
    font-weight: var(--chip-weight-figma);
}
/* v13 end (tokens) — Figma component sync */

/* 2026-09-26 CWV v14 */
/* [CWV-T01] CWV 用トークン (aspect-ratio 標準比・遅延ペイント目安高) */
:root {
    --cwv-hero-kv-ratio: 16 / 10;
    --cwv-hero-image-ratio: 16 / 10;
    --cwv-top-hero-kv-ratio: 2519 / 729;
    --cwv-section-defer-height: 800px;
}
/* v14 end (tokens) — CWV */

/* 2026-09-26 typography deep v16 */
/* [TYPO-T01] 日本語 typography 詳細トークン
   - Figma 実測 lineHeightPx / letterSpacing を役割別 semantic 変数として集約
   - 既存 --technoauto-lh-* / --technoauto-ls-* とは別レイヤーで運用（破壊回避）
   - 使い方例: h1{ line-height: var(--lh-large); letter-spacing: var(--ls-large); }
*/
:root {
    /* 日本語 line-height per size (Figma準拠 実測ベース) */
    --lh-large: 1.4;    /* 見出し 大 (h1/hero/display 系) */
    --lh-medium: 1.55;  /* 見出し 中 / リード (h2/h3/lead) */
    --lh-normal: 1.8;   /* 本文 (p/body) */
    --lh-tight: 1.3;    /* ボタン・タグ・チップ */

    /* 日本語 字間 (letter-spacing) */
    --ls-large: -0.02em;  /* 大見出し (詰め) */
    --ls-medium: 0em;     /* 中見出し (基準) */
    --ls-body: 0.02em;    /* 本文 (可読性) */
    --ls-loose: 0.08em;   /* 英字ラベル・EN 見出し (トラッキング) */
}
/* v16 end (tokens) — typography deep */

/* ==========================================================================
 * 2026-09-26 icon unified v17
 * ==========================================================================
 * v5A の 11 SVG に加えて、テキスト由来のアイコン (>, ›, ‹, ×, +, -, ▶ 等)
 * や FontAwesome コードポイント () を全て inline SVG mask に置換。
 * Font Awesome 未読込による文字化けリスクと視覚品質のばらつきを解消する。
 *
 * 新規追加SVG (assets/icons/):
 *   - icon-close.svg     (× 記号・drawer close / modal close)
 *   - icon-plus.svg      (+ 記号・accordion open marker)
 *   - icon-minus.svg     (- 記号・accordion close marker)
 *   - icon-check.svg     (v5A checkmark と別の circle 付き solid variant)
 *   - icon-info.svg      (i 情報アイコン)
 *   - icon-external.svg  (外部リンク)
 *   - icon-download.svg  (PDF / DL アイコン)
 *
 * 既存 PHP の `aria-hidden="true"` span (> / › / ) は
 * 文字ノードを font-size:0 で潰した上で ::before の mask 画像で描画する。
 * BEM は維持 (置換対象クラスに追加宣言するだけ)。既存 v1〜v16 は破壊しない。
 */
:root {
    /* file URL icons (v17 追加分) */
    --technoauto-icon-close-file:    url("icons/icon-close.svg");
    --technoauto-icon-plus-file:     url("icons/icon-plus.svg");
    --technoauto-icon-minus-file:    url("icons/icon-minus.svg");
    --technoauto-icon-check-file:    url("icons/icon-check.svg");
    --technoauto-icon-info-file:     url("icons/icon-info.svg");
    --technoauto-icon-external-file: url("icons/icon-external.svg");
    --technoauto-icon-download-file: url("icons/icon-download.svg");

    /* chevron (v5A arrow-right を単方向 chevron として流用) */
    --technoauto-icon-chevron-right-file: var(--technoauto-icon-arrow-right-file);
    --technoauto-icon-chevron-down-file:  var(--technoauto-icon-arrow-right-file);
}

/* v17 mask utilities (BEM 補助) */
.ta-icon-mask--close    { -webkit-mask-image: var(--technoauto-icon-close-file);    mask-image: var(--technoauto-icon-close-file); }
.ta-icon-mask--plus     { -webkit-mask-image: var(--technoauto-icon-plus-file);     mask-image: var(--technoauto-icon-plus-file); }
.ta-icon-mask--minus    { -webkit-mask-image: var(--technoauto-icon-minus-file);    mask-image: var(--technoauto-icon-minus-file); }
.ta-icon-mask--check    { -webkit-mask-image: var(--technoauto-icon-check-file);    mask-image: var(--technoauto-icon-check-file); }
.ta-icon-mask--info     { -webkit-mask-image: var(--technoauto-icon-info-file);     mask-image: var(--technoauto-icon-info-file); }
.ta-icon-mask--external { -webkit-mask-image: var(--technoauto-icon-external-file); mask-image: var(--technoauto-icon-external-file); }
.ta-icon-mask--download { -webkit-mask-image: var(--technoauto-icon-download-file); mask-image: var(--technoauto-icon-download-file); }

/* v17: PHP テキスト由来アイコンの視覚差し替え (BEM 属性セレクタで一括)
   → aria-hidden の span (› / ) を非表示にして SVG mask で描画
   → > ベースの単純 chevron は既存 page-*.css の font 制御を尊重し、
     ここでは触らない (視覚 OK かつ描画リスク低のため)。
     必要時はマイグレ用の `.ta-icon-mask--*` 補助クラスを付与して置換する */

/* [ICON-V17-01] __faq-toggle: FontAwesome  (chevron-down) を SVG mask 化
   → Font Awesome 未読込時に「」等の tofu が表示されるリスクを排除 */
[class*="__faq-toggle"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 1;
    width: 1em;
    height: 1em;
    min-width: 22px;
    min-height: 22px;
}
[class*="__faq-toggle"]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--technoauto-icon-chevron-down-file) center / contain no-repeat;
            mask: var(--technoauto-icon-chevron-down-file) center / contain no-repeat;
    transform: rotate(90deg); /* arrow-right SVG を chevron-down 方向に回す */
}

/* [ICON-V17-02] __anchor-arrow () も同様に SVG mask 化 */
[class*="__anchor-arrow"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    width: 1em;
    height: 1em;
    min-width: 16px;
    min-height: 16px;
}
[class*="__anchor-arrow"]::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--technoauto-icon-chevron-down-file) center / contain no-repeat;
            mask: var(--technoauto-icon-chevron-down-file) center / contain no-repeat;
    transform: rotate(90deg);
}

/* [ICON-V17-03] › (›) 系 span を SVG chevron-right に置換
   対象: __support-arrow / __pdf-arrow / __link-icon--chevron */
.page-tuition__support-arrow,
.page-disc-hes__pdf-arrow,
.page-disc-voc__pdf-arrow,
.page-disclosure__link-arrow,
.page-sitemap__link-icon--chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    width: 1em;
    height: 1em;
    min-width: 22px;
    min-height: 22px;
}
.page-tuition__support-arrow::before,
.page-disc-hes__pdf-arrow::before,
.page-disc-voc__pdf-arrow::before,
.page-disclosure__link-arrow::before,
.page-sitemap__link-icon--chevron::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--technoauto-icon-chevron-right-file) center / contain no-repeat;
            mask: var(--technoauto-icon-chevron-right-file) center / contain no-repeat;
}

/* [ICON-V17-04] page-news back-link::before: "\2039" (‹) を SVG chevron-left に
   (SP fee-scroll の "\203A" はピル装飾との複合演出のため v17 では触らず維持) */
.page-news__back-link::before {
    content: "" !important;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--technoauto-icon-chevron-right-file) center / contain no-repeat;
            mask: var(--technoauto-icon-chevron-right-file) center / contain no-repeat;
    transform: rotate(180deg);
    font-size: 0;
}
/* v17 end (tokens) — icon unified */

/* ==========================================================================
   2026-09-26 color/shadow precision v20
   ----------------------------------------------------------------------------
   Figma REST (file WjIzjgeeWIPC8D3fszoCA3 / 🎨 Foundations, 📄 下層ページ試作)
   の色 / 影 / border を全数実測して微差を潰す層。
   BEM は維持・v1〜v19 は破壊しない・上書きは意味論トークンに限定。

   Figma authoritative:
     brand (bg/brand)          = #439FFF
     brand-strong              = #2F8AEE
     brand-soft (sky)          = #6BD0FF
     sky-deep (Page Hero BG)   = #4EA5FF
     section (pale)            = #D7F2FF
     subtle (pale-light)       = #EDF9FF
     yellow (accent)           = #FFEF6B
     yellow-deep               = #FFE576
     yellow-50 (section BG)    = #FFF7CE  ← 数字で見るYTC 等
     green (success)           = #20D99B
     green-50 (section BG)     = #D8F7EC  ← 鈑金塗装
     pink-50 (section BG)      = #FFE3E7  ← 免除
     ink/navy (border-base)    = #39364E
     ink/gray                  = #787878
     line/lightest             = #E5E5E5

   確認済ドリフト（Figma に存在しない色コード）:
     #398BE2 / #388BE1 (Hero EN 見出し)  → #439FFF に統一（Figma 実測）
     ※ 47 pages に散在。v20 の per-page 層で吸収する。
   ========================================================================== */
:root {
    /* --- v20 セマンティックエイリアス (Figma 実測に厳密統一) --- */
    --technoauto-brand-primary:   #439FFF;   /* Figma bg/brand */
    --technoauto-brand-secondary: #2F8AEE;   /* Figma bg/brand-strong */
    --technoauto-brand-soft:      #6BD0FF;   /* Figma bg/brand-soft (sky) */
    --technoauto-brand-sky-deep:  #4EA5FF;   /* Figma 02_brand/sky-deep (Page Hero BG) */

    --technoauto-bg-white:        #FFFFFF;
    --technoauto-bg-cyan-50:      #EDF9FF;   /* subtle */
    --technoauto-bg-cyan-100:     #D7F2FF;   /* section pale */
    --technoauto-bg-yellow-50:    #FFF7CE;   /* 数字で見るYTC 等 */
    --technoauto-bg-yellow-100:   #FFEF6B;
    --technoauto-bg-green-50:     #D8F7EC;   /* 鈑金塗装 */
    --technoauto-bg-green-100:    #20D99B;
    --technoauto-bg-pink-50:      #FFE3E7;   /* 免除 */

    --technoauto-border-base-v20: #39364E;   /* Figma border/base = ink/navy */
    --technoauto-border-card:     #E5E5E5;   /* Figma line/lightest (tag/card) */
    --technoauto-border-subtle-v20: #DADADA; /* Figma line/light */

    /* --- v20 drop-shadow 実測パターン --- */
    /* Hero wordmark (dx=5 dy=5 blur=0 #000 + spread=-1 #439FFF) */
    --shadow-hero-wordmark-v20:
        5px 5px 0 rgba(0, 0, 0, 1),
        5px 5px 0 -1px rgba(67, 159, 255, 1);
    /* Section wordmark (dx=8 dy=8 #39364E + spread=-1 #6BD0FF) */
    --shadow-section-wordmark-v20:
        8px 8px 0 rgba(57, 54, 78, 1),
        8px 8px 0 -1px rgba(107, 208, 255, 1);
    /* Card thin bottom line (dx=0 dy=1 #39364E) */
    --shadow-card-underline-v20: 0 1px 0 rgba(57, 54, 78, 1);
}

/* v20: Hero EN 見出しの drift 色を Figma 実測 (#439FFF) に統一
   （下層ページ Hero セクション見出しの英字テキスト） */
.page-course__hero-en,
.page-tuition__hero-en {
    color: var(--technoauto-brand-primary, #439FFF);
}
/* v20 end (tokens) — color/shadow precision */

/* ==========================================================================
   2026-09-26 v24 verify + fix (tokens) — [N10] brand-blue token 実在化
   ==========================================================================
   layout.css:2384 が var(--technoauto-brand-blue, #0a2a55) を参照するが
   tokens.css で --technoauto-brand-blue が未定義のため常に fallback #0a2a55
   （近似ネイビー）が発火し、Figma authoritative カラーと乖離。
   Figma 実測 (bg/brand = #439FFF) と揃えて token を追加。
   併せて aliases として brand-primary / brand-navy を明示。
   （brand-navy は SP hero fallback などで従来 #0a2a55 が期待されていた
     場所のために保持）
   ========================================================================== */
:root {
  --technoauto-brand-blue:    #439FFF;   /* Figma bg/brand authoritative */
  --technoauto-brand-primary: #439FFF;   /* alias (v20 参照との整合) */
  --technoauto-brand-navy:    #0A2A55;   /* 従来 fallback だったネイビー */
}
/* v24 end (tokens) — brand-blue token 実在化 */