/**
 * Header + Footer CSS — Figma "Header/Footer PC・SP" 準拠 (v3 全面リビルド)
 * layout.css の body padding:0 40px と両サイド縦帯 (::before/::after) を前提。
 */

/* ==========================================
   Site Header (PC): 白角丸カード + 右CTAピル
   ========================================== */
.site-header {
    background-color: #FFFFFF;
    background-image: none;
    border-right: 1px solid #39364E;
    border-bottom: 1px solid #39364E;
    border-left: 1px solid #39364E;
    border-top: none;
    border-radius: 0 0 20px 20px;
    /* Figma実測: 1440幅時 header は1240幅・左右100pxインセット。
       body padding 40 の外側に更に60px 追加相当を max-width で作る。 */
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
/* 白背景を絶対保証（var()+shorthand の parse 事故で dark に化けるのを塞ぐ） */
header.site-header { background-color: #FFFFFF !important; }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 82px;                 /* Figma実測 82px */
    padding: 0 0 0 30px;          /* Figma: pl 30 のみ、rはハンバーガー 80×80 が自前で余白持つ */
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--technoauto-text-primary, #000);
    flex-shrink: 0;
}
/* Figma実測: Header/PC 内の「ロゴ」ノード 256×40 を SVG で流し込み。 */
.site-header__logo {
    display: block;
    width: auto;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 20px;                    /* Figma: 20 */
    flex-shrink: 0;
}
.site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;                 /* Figma: 40 */
    padding: 0 30px;              /* Figma: 30 */
    border: 1px solid var(--technoauto-border-base, #39364E);   /* Figma: 1px */
    border-radius: 40px;          /* Figma: 40 (フルpill) */
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--technoauto-text-primary, #000);
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-header__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.site-header__cta--oc  { background: var(--technoauto-bg-accent, #FFEF6B); }
.site-header__cta--doc { background: var(--technoauto-bg-success, #20D99B); }
.site-header__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--technoauto-text-primary, #000);
    flex-shrink: 0;
}
.site-header__cta-icon svg { display: block; }

.site-header__menu-toggle {
    width: 80px;                   /* Figma: 80×80 */
    height: 80px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.site-header__menu-toggle span {
    display: block;
    width: 36px;                   /* 80px 内で存在感のある太めライン */
    height: 3px;
    background: var(--technoauto-text-primary, #000);
    border-radius: 2px;
}

/* パンくずリスト (SPで青バー表示・PCでも同じ形で残す) */
.site-breadcrumb {
    display: none; /* デフォルトは非表示 (PC) */
    background: var(--technoauto-bg-brand, #439FFF);
    color: #fff;
    padding: 12px 16px;
    font-family: var(--technoauto-font-jp);
    font-size: 13px;
    line-height: 1.4;
}
.site-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.site-breadcrumb__item a { color: #fff; text-decoration: none; }
.site-breadcrumb__item a:hover { text-decoration: underline; }
.site-breadcrumb__item span { color: #fff; font-weight: 700; }
.site-breadcrumb__sep { color: #fff; opacity: 0.85; }

/* ==========================================
   Site Footer (共通)
   ========================================== */
.site-footer {
    background: transparent;
    color: var(--technoauto-text-primary, #000);
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* ------ CTA band 大バナー (PCのみ) ------ */
.site-footer__cta-band {
    background: var(--technoauto-bg-brand, #439FFF);
    padding: 50px 60px;
}
.site-footer__cta-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: stretch;
}
.site-footer__cta {
    flex: 1 1 0;
    min-height: 150px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 40px;
    border: 1.5px solid var(--technoauto-border-base, #39364E);
    border-radius: 16px;
    text-decoration: none;
    color: var(--technoauto-text-primary, #000);
    transition: transform 0.15s ease;
    position: relative;
}
.site-footer__cta:hover { transform: translateY(-2px); }
.site-footer__cta--oc  { background: var(--technoauto-bg-accent, #FFEF6B); }
.site-footer__cta--doc { background: var(--technoauto-bg-success, #20D99B); }
.site-footer__cta-icon {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-footer__cta-icon svg { display: block; }
.site-footer__cta-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.site-footer__cta-sub {
    font-family: var(--technoauto-font-jp);
    font-size: 16px;
}
.site-footer__cta-main {
    font-family: var(--technoauto-font-en);
    font-size: 40px;
    letter-spacing: 0.5px;
}

/* ------ 基本情報エリア (white bg) ------ */
.site-footer__base {
    background: var(--technoauto-bg-base, #FFFFFF);
    padding: 60px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ------ PC ナビ 6列 ------ */
/* 2026-10-14 佐藤様指摘: デザイン準拠に修正 — gap を 0 にして各列の右 border が
   次の列との境界になるよう調整 (従来は gap:30px で border と列間が離れていた) */
.site-footer__nav--pc {
    display: flex;
    justify-content: stretch;
    gap: 0;
    align-items: flex-start;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}
.site-footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 20px;
    border-right: 1px solid var(--technoauto-border-subtle, #DADADA);
    flex: 1 1 0;
    min-width: 0;
}
.site-footer__nav-col:first-child { padding-left: 0; }
.site-footer__nav-col:last-child { border-right: none; padding-right: 0; }
.site-footer__nav-title {
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
    color: var(--technoauto-text-primary, #000);
    white-space: nowrap;
}
.site-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.site-footer__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--technoauto-font-jp);
    font-size: 12px;
    line-height: 1.4;
    color: var(--technoauto-text-primary, #000);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.site-footer__nav-link:hover { opacity: 0.6; }
.site-footer__nav-arrow {
    color: var(--technoauto-text-link, #439FFF);
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
}

/* ------ PC サブボタン (5個 中央) ------ */
/* viewport 1024-1366 帯で右端が切れる問題対策: flex-wrap で折返し */
.site-footer__sub--pc {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.site-footer__sub-btn {
    min-width: 150px;
    padding: 14px 20px;
    background: var(--technoauto-bg-base, #FFFFFF);
    border: 1.5px solid var(--technoauto-border-base, #39364E);
    border-radius: 999px;
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--technoauto-text-primary, #000);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease;
}
.site-footer__sub-btn:hover { background: var(--technoauto-bg-subtle, #EDF9FF); }
.site-footer__sub-btn--access {
    color: var(--technoauto-text-link, #439FFF);
}
.site-footer__sub-btn-icon {
    width: 11px;
    height: 14px;
}

/* ------ PC お問い合わせバー ------ */
.site-footer__contact--pc {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--technoauto-border-base, #39364E);
}
.site-footer__contact-label {
    background: var(--technoauto-bg-brand, #439FFF);
    color: var(--technoauto-text-inverse, #FFFFFF);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 90px;
    border-right: 1.5px solid var(--technoauto-border-base, #39364E);
}
.site-footer__contact-body {
    flex: 1 1 0;
    background: var(--technoauto-bg-accent, #FFEF6B);
    padding: 14px 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
    justify-content: space-between;
}
.site-footer__contact-phone {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    white-space: nowrap;
}
.site-footer__contact-phone-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.site-footer__contact-name {
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--technoauto-text-primary, #000);
    margin: 0;
}
.site-footer__contact-hours {
    font-family: var(--technoauto-font-jp);
    font-size: 12px;
    line-height: 1;
    color: var(--technoauto-text-primary, #000);
    margin: 0;
}
.site-footer__contact-number {
    font-family: var(--technoauto-font-en);
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    color: var(--technoauto-text-link, #439FFF);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.site-footer__contact-web {
    flex-shrink: 0;
    height: 50px;
    padding: 0 22px 0 24px;
    background: var(--technoauto-bg-inverse, #000);
    color: var(--technoauto-text-inverse, #FFFFFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 999px;
    font-family: var(--technoauto-font-jp);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.site-footer__contact-web:hover { opacity: 0.85; }
.site-footer__contact-web-icon svg { display: block; }

/* ------ ブランド+SNS+住所 ------ */
.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}
.site-footer__brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}
.site-footer__brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--technoauto-text-primary, #000);
}
.site-footer__brand-mark {
    width: auto;
    height: 60px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.site-footer__brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
    font-family: var(--technoauto-font-jp);
}
.site-footer__brand-corp {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--technoauto-text-primary, #000);
}
.site-footer__brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--technoauto-text-primary, #000);
    line-height: 1.2;
}
.site-footer__brand-en {
    font-family: var(--technoauto-font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--technoauto-text-primary, #000);
}
.site-footer__sns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 18px;
    align-items: center;
}
.site-footer__sns-btn {
    width: 50px;
    height: 50px;
    background: var(--technoauto-bg-base, #FFFFFF);
    border: 1px solid var(--technoauto-border-subtle, #DADADA);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
    overflow: hidden;
}
.site-footer__sns-btn:hover { transform: translateY(-2px); }
.site-footer__sns-btn img {
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--technoauto-border-tag, #E5E5E5);
    width: 100%;
    white-space: nowrap;
    gap: 20px;
    flex-wrap: wrap;
}
.site-footer__address {
    font-family: var(--technoauto-font-jp);
    font-size: 13px;
    line-height: 1.6;
    color: var(--technoauto-text-primary, #000);
    margin: 0;
}
.site-footer__copyright {
    font-family: var(--technoauto-font-en);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--technoauto-text-muted, #A1A1A1);
    margin: 0;
}

/* SP要素: PCでは常に非表示 */
.site-footer__nav-sp,
.site-footer__sp-cta,
.site-footer__sp-access {
    display: none;
}

/* ==========================================
   SP  (<= 768px)
   ========================================== */
@media screen and (max-width: 768px) {

    /* ------ Header ------ */
    .site-header {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--technoauto-border-subtle, #DADADA);
        margin: 0;
    }
    .site-header__inner {
        height: auto;
        min-height: 68px;
        padding: 10px 12px 10px 14px;
        gap: 10px;
    }
    .site-header__brand { gap: 10px; }
    .site-header__logo {
        height: 32px;
    }
    /* 2026-10-13 P0: SP で OC/資料請求 CTA が完全消失していた対策。
       アイコンのみのコンパクトチップ (36x36) に縮約して hamburger と共存させる。
       (Figma SP header 準拠。元の display:none は P0 事故原因) */
    .site-header__cta {
        display: inline-flex;
        height: 36px;
        min-width: 36px;
        padding: 0 8px;
        gap: 0;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,0.08);
        font-size: 0; /* label を隠す */
        line-height: 1;
    }
    .site-header__cta-label { display: none; }
    .site-header__cta-icon { font-size: 16px; }
    .site-header__cta-icon svg { width: 20px; height: 20px; }
    .site-header__menu-toggle {
        width: 44px;
        height: 44px;
        gap: 6px;
    }
    .site-header__menu-toggle span {
        width: 26px;
        height: 2.5px;
    }

    /* SPパンくずバー */
    .site-breadcrumb { display: block; }

    /* ------ Footer PC専用ブロックを隠す ------ */
    .site-footer__cta-band { display: none; }
    .site-footer__nav--pc { display: none; }
    .site-footer__sub--pc { display: none; }
    .site-footer__contact--pc { display: none; }

    /* ------ Footer SP専用ブロックを表示 ------ */
    .site-footer__nav-sp,
    .site-footer__sp-cta,
    .site-footer__sp-access {
        display: flex;
    }

    /* base area: SPは padding 0 でフルブリード */
    .site-footer__base {
        background: transparent;
        padding: 0;
        gap: 0;
    }

    /* ------ SP アコーディオン (水色) ------ */
    .site-footer__nav-sp {
        flex-direction: column;
        background: var(--technoauto-bg-brand-soft, #6BD0FF);
        width: 100%;
    }
    .site-footer__acc {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    .site-footer__acc:last-child { border-bottom: none; }
    .site-footer__acc-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 22px;
        cursor: pointer;
        list-style: none;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 16px;
        color: var(--technoauto-text-primary, #000);
    }
    .site-footer__acc-summary::-webkit-details-marker { display: none; }
    .site-footer__acc-icon {
        position: relative;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .site-footer__acc-icon::before,
    .site-footer__acc-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: var(--technoauto-text-primary, #000);
        transition: transform 0.2s ease;
    }
    .site-footer__acc-icon::before {
        width: 16px;
        height: 2px;
        transform: translate(-50%, -50%);
    }
    .site-footer__acc-icon::after {
        width: 2px;
        height: 16px;
        transform: translate(-50%, -50%);
    }
    .site-footer__acc[open] .site-footer__acc-icon::after {
        transform: translate(-50%, -50%) scaleY(0);
    }
    .site-footer__acc-list {
        list-style: none;
        margin: 0;
        padding: 0 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .site-footer__acc-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--technoauto-font-jp);
        font-size: 14px;
        color: var(--technoauto-text-primary, #000);
        text-decoration: none;
    }
    .site-footer__acc-arrow {
        color: var(--technoauto-text-primary, #000);
        font-weight: 700;
        font-size: 12px;
    }

    /* ------ SP 青CTAブロック (白ピル + 黄カード) ------ */
    .site-footer__sp-cta {
        display: flex;
        flex-direction: column;
        gap: 28px;
        background: var(--technoauto-bg-brand, #439FFF);
        padding: 30px 20px 40px;
        width: 100%;
    }
    .site-footer__sp-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .site-footer__sp-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 8px;
        background: #fff;
        border: 1.5px solid var(--technoauto-border-base, #39364E);
        border-radius: 999px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 14px;
        color: var(--technoauto-text-primary, #000);
        text-decoration: none;
    }
    .site-footer__sp-contact {
        background: var(--technoauto-bg-accent, #FFEF6B);
        border: 1.5px solid var(--technoauto-border-base, #39364E);
        border-radius: 14px;
        padding: 24px 20px 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }
    .site-footer__sp-contact-title {
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 16px;
        color: var(--technoauto-text-primary, #000);
        margin: 0 0 6px;
    }
    .site-footer__sp-contact-name {
        font-family: var(--technoauto-font-jp);
        font-size: 13px;
        color: var(--technoauto-text-primary, #000);
        margin: 0;
    }
    .site-footer__sp-contact-tel {
        font-family: var(--technoauto-font-en);
        font-weight: 700;
        font-size: 42px;
        line-height: 1;
        color: var(--technoauto-text-link, #439FFF);
        text-decoration: none;
        margin: 6px 0 2px;
    }
    .site-footer__sp-contact-hours {
        font-family: var(--technoauto-font-jp);
        font-size: 12px;
        color: var(--technoauto-text-primary, #000);
        margin: 0 0 10px;
    }
    .site-footer__sp-contact-web {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 300px;
        padding: 14px 22px;
        background: #000;
        color: #fff;
        border-radius: 999px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
    }
    .site-footer__sp-contact-web-icon svg { display: block; }

    /* ------ SP ブランド (中央) ------ */
    .site-footer__brand {
        background: #fff;
        padding: 40px 20px 30px;
        gap: 24px;
        max-width: 100%;
    }
    .site-footer__brand-row {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .site-footer__brand-logo { justify-content: center; }
    .site-footer__sns { gap: 20px; }

    /* SP アクセスピル (中央) */
    .site-footer__sp-access {
        display: inline-flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 200px;
        padding: 12px 24px;
        background: #fff;
        border: 1.5px solid var(--technoauto-border-base, #39364E);
        border-radius: 999px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 14px;
        color: var(--technoauto-text-link, #439FFF);
        text-decoration: none;
    }
    .site-footer__sp-access-icon {
        width: 11px;
        height: 14px;
    }

    .site-footer__legal {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        border-top: none;
        padding-top: 8px;
        white-space: normal;
    }
    .site-footer__address {
        font-size: 12px;
        line-height: 1.8;
    }
}

/* ==========================================
   Drawer (ハンバーガー展開時オーバーレイ)
   PC/SP 両方で表示 (Figma: どちらのビューポートでもハンバーガー展開)
   ========================================== */
.site-drawer,
.site-drawer-overlay { display: none; }

body.is-drawer-open { overflow: hidden; }

/* ハンバーガー is-active 時に×アイコン化 */
.site-header__menu-toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.site-header__menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.site-header__menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}
.site-header__menu-toggle span {
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* ---- Drawer 本体 (PC/SP共通表示) ---- */
.site-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 998;
    pointer-events: none;
}
.site-drawer-overlay[hidden] { display: none; }
.site-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.site-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 40px;                        /* PC: 右 40px 青帯を避けて配置 */
    width: 90%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    background: rgba(255, 255, 255, 1);
    z-index: 999;
    transform: translateX(calc(100% + 40px));
    transition: transform 0.28s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
}
.site-drawer[hidden] { display: none; }
.site-drawer.is-open {
    transform: translateX(0);
}
/* SP: 青帯なしなので右端張り付き */
@media screen and (max-width: 768px) {
    .site-drawer {
        right: 0;
        transform: translateX(100%);
    }
    .site-drawer.is-open { transform: translateX(0); }
}

/* ---- Drawer inner styles (PC/SP共通) ---- */
    .site-drawer__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* ---- HEAD ---- */
    .site-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 16px;
        background: #FFFFFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .site-drawer__brand {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }
    .site-drawer__brand img { display: block; height: 32px; width: auto; }
    .site-drawer__close {
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        position: relative;
        cursor: pointer;
    }
    .site-drawer__close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2.5px;
        background: var(--technoauto-text-primary, #000);
        border-radius: 2px;
    }
    .site-drawer__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
    .site-drawer__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

    /* ---- CTA STACK (Figma: 縦積み 3ボタン) ---- */
    .site-drawer__cta-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 16px 20px;
        background: #FFFFFF;
    }
    .site-drawer__cta {
        position: relative;
        display: block;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1.5px solid var(--technoauto-border-base, #39364E);
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        color: var(--technoauto-text-primary, #000);
        text-align: center;
    }
    .site-drawer__cta--oc     { background: var(--technoauto-bg-accent, #FFEF6B); padding-top: 20px; }
    .site-drawer__cta--doc    { background: var(--technoauto-bg-success, #20D99B); color: #FFFFFF; }
    .site-drawer__cta--access { background: #FFFFFF; }
    .site-drawer__cta-body {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .site-drawer__cta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .site-drawer__cta-date {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: #FFFFFF;
        border: 1px solid var(--technoauto-border-base, #39364E);
        border-radius: 999px;
        padding: 3px 14px;
        font-family: var(--technoauto-font-en);
        font-size: 12px;
        font-weight: 700;
        color: var(--technoauto-text-primary, #000);
        white-space: nowrap;
    }

    /* ---- ACCORDION NAV (Figma: light-blue #B9E3FF bg) ---- */
    .site-drawer__nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #B9E3FF;
    }
    .site-drawer__group {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .site-drawer__group-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        cursor: pointer;
        list-style: none;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 15px;
        color: var(--technoauto-text-primary, #000);
    }
    .site-drawer__group-title::-webkit-details-marker { display: none; }
    .site-drawer__group-icon {
        position: relative;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .site-drawer__group-icon::before,
    .site-drawer__group-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: var(--technoauto-text-primary, #000);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .site-drawer__group-icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
    .site-drawer__group-icon::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
    .site-drawer__group[open] .site-drawer__group-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
        opacity: 0;
    }
    .site-drawer__list {
        list-style: none;
        margin: 0;
        padding: 0 20px 12px;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #B9E3FF;
    }
    .site-drawer__list li a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 4px;
        font-family: var(--technoauto-font-jp);
        font-size: 14px;
        color: var(--technoauto-text-primary, #000);
        text-decoration: none;
    }
    .site-drawer__list-arrow {
        display: inline-block;
        color: var(--technoauto-text-primary, #000);
        font-weight: 700;
    }

    /* ---- VISITOR PILLS (Figma: 青背景 + 白ピル) ---- */
    .site-drawer__visitors {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 24px 24px 30px;
        background: var(--technoauto-bg-brand, #439FFF);
    }
    .site-drawer__visitor {
        display: block;
        background: #FFFFFF;
        color: var(--technoauto-text-primary, #000);
        text-decoration: none;
        text-align: center;
        padding: 12px 16px;
        border-radius: 999px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 14px;
    }

    /* ---- YELLOW FOOTER (tel + WEB CTA) ---- */
    .site-drawer__contact {
        background: var(--technoauto-bg-accent, #FFEF6B);
        padding: 20px 24px 24px;
        text-align: center;
    }
    .site-drawer__contact-title {
        margin: 0 0 8px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 14px;
        color: var(--technoauto-text-primary, #000);
    }
    .site-drawer__contact-sub {
        margin: 0 0 4px;
        font-size: 11px;
        color: var(--technoauto-text-primary, #000);
    }
    .site-drawer__contact-tel {
        display: block;
        font-family: var(--technoauto-font-en);
        font-weight: 900;
        font-size: 30px;
        letter-spacing: 0.02em;
        color: var(--technoauto-bg-brand, #439FFF);
        text-decoration: none;
        line-height: 1.1;
        margin: 4px 0 6px;
    }
    .site-drawer__contact-hours {
        margin: 0 0 14px;
        font-size: 11px;
        color: var(--technoauto-text-primary, #000);
    }
    .site-drawer__contact-web {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--technoauto-text-primary, #000);
        color: #FFFFFF;
        text-decoration: none;
        border-radius: 999px;
        padding: 14px 20px;
        font-family: var(--technoauto-font-jp);
        font-weight: 700;
        font-size: 15px;
    }
    .site-drawer__contact-web-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        color: var(--technoauto-text-primary, #000);
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 12px;
    }

    /* ---- SOCIAL ICONS (Figma: 3個 円形 青bg) ---- */
    .site-drawer__social {
        display: flex;
        justify-content: center;
        gap: 20px;
        list-style: none;
        padding: 24px 0 32px;
        margin: 0;
        background: #FFFFFF;
    }
    .site-drawer__social li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--technoauto-bg-brand, #439FFF);
        color: #FFFFFF;
        text-decoration: none;
    }

/* ==========================================
   2026-09-25 Figma visual diff v2 (TOP + header/footer)
   目的: header 白ロック維持しつつ Figma 密度に微調整
   - PC: header 82px を確定・logo 40px 維持 (Figma 実測)
   - PC: header 直下にヘアラインが浮くのを封じる (下地の白との連続感)
   - SP: header 高 68 / logo 32 / ロゴ隣接余白ゼロで Figma 準拠
   - PC/SP: footer 4カラム間 gap を Figma 準拠 (32px) に統一
   - SP: footer 住所ピル text-align:center を保証
   ========================================== */

/* --- PC (>=769px) header/footer 微調整 --- */
@media screen and (min-width: 769px) {
    /* header: Figma 高さ 82px 確定 (site-header__inner に既定) */
    .site-header { box-shadow: none; }
    /* footer 4カラム: Figma 32px */
    .site-footer__nav-cols,
    .site-footer__nav-grid,
    .site-footer__cols { gap: 32px; }
}

/* --- SP (<=768px) header/footer 微調整 --- */
@media screen and (max-width: 768px) {
    /* header logo 隣接: Figma 実測ロゴ+校名の並びが密着 */
    .site-header__brand { gap: 6px; }
    /* footer address pill: 中央寄せ・Figma と同じ pill */
    .site-footer__address,
    .site-footer__address-pill {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    /* footer 4カラム: SP は縦積み・行間 24px (Figma 準拠) */
    .site-footer__nav-cols,
    .site-footer__nav-grid,
    .site-footer__cols {
        gap: 24px;
    }
}


/* 2026-09-25 Figma polish v3 */

/* header/footer v3 polish */
.site-header a,
.site-footer a,
.site-header button,
.site-footer button {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.site-header a:hover,
.site-footer a:hover {
    filter: brightness(1.1);
}
.site-header a:focus-visible,
.site-footer a:focus-visible,
.site-header button:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--technoauto-border-focus, #439fff);
    outline-offset: 2px;
}


/* ==========================================================================
   2026-09-25 global refinements v4
   （header-footer.css：固定要素の safe-area / print / タッチ最適化）
   ========================================================================== */

/* iOS notch safe-area 対応（固定ヘッダー・CTA バンド・ドロワー） ----------- */
.site-header {
    padding-top: env(safe-area-inset-top);
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}
.site-footer,
.site-footer__cta-band {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}
.site-footer__base {
    padding-bottom: env(safe-area-inset-bottom);
}

/* タッチ最適化 -------------------------------------------------------------- */
.site-header__cta,
.site-footer__cta,
.site-header__menu-toggle,
.site-header a,
.site-footer a {
    -webkit-tap-highlight-color: transparent;
}

/* ドロワー系のスクロール（Momentum scroll） ---------------------------------- */
.site-header__drawer,
.site-header__nav,
.site-header__menu {
    -webkit-overflow-scrolling: touch;
}

/* Body / html レベルの font-smoothing 強化（既に tokens.css で定義済だが冗長化） */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* print ------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer__cta-band,
    .site-header__cta,
    .site-header__menu-toggle,
    .site-header__drawer,
    .site-footer__nav,
    .site-footer__sns,
    .site-footer__cta {
        display: none !important;
    }
    .site-footer,
    .site-footer__base {
        border: none !important;
        color: #000 !important;
        background: #fff !important;
    }
    body {
        color: #000 !important;
        background: #fff !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}


/* 2026-09-25 SP UX polish v4 */

/* --- Drawer: material easing + scroll-lock + backdrop blur --- */
.site-drawer {
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
.site-drawer-overlay {
    -webkit-backdrop-filter: blur(2px) saturate(0.9);
    backdrop-filter: blur(2px) saturate(0.9);
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-drawer a,
.site-drawer button,
.site-drawer summary {
    -webkit-tap-highlight-color: rgba(67, 159, 255, 0.15);
}
.site-drawer::-webkit-scrollbar { width: 0; display: none; }
.site-drawer { scrollbar-width: none; }

/* Drawer close: 44x44 tap area (WCAG/Apple HIG) */
.site-drawer__close {
    min-width: 44px;
    min-height: 44px;
}

/* --- SP tap-highlight base + safe-area --- */
@media screen and (max-width: 768px) {
    body {
        -webkit-tap-highlight-color: transparent;
    }
    .site-header a,
    .site-header button,
    .site-footer a,
    .site-footer button {
        -webkit-tap-highlight-color: rgba(67, 159, 255, 0.15);
    }
    /* fixed header: iOS safe-area 上寄せ考慮 */
    .site-header {
        padding-top: env(safe-area-inset-top);
    }
    /* footer 下辺: iOS home indicator 分の余白 */
    .site-footer {
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
    }
    /* SP address pill: 強化 (centered pill) */
    .site-footer__address,
    .site-footer__address-pill {
        display: inline-block;
        max-width: calc(100% - 32px);
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        line-height: 1.6;
    }
    /* SP tap target: header 内 button/link は 44x44 確保 */
    .site-header__menu-toggle,
    .site-drawer__cta {
        min-height: 44px;
    }
    /* Drawer nav item も 44px */
    .site-drawer__list li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* 2026-09-25 micro-typography v4 */
/* v4 micro-typography: ヘッダー/フッター/パンくずの letter-spacing 統一
   - サイトブランド英字ロゴ: kern/liga/ss01 + 0.04em
   - ナビ日本語: palt + 0.02em
   - CTAボタン: 0.05em
   - パンくず: 0.02em
   - フッターcopyright: tabular-nums */
.site-header,
.site-footer,
.site-breadcrumb {
    font-feature-settings: "palt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}
.site-header__logo,
.site-header__brand,
.site-footer__logo,
.site-footer__brand {
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
    letter-spacing: 0.04em;
}
.site-header__cta,
.site-footer__cta {
    letter-spacing: 0.05em;
    font-feature-settings: "palt" 1, "kern" 1;
}
.site-header__cta-label,
.site-footer__cta-label {
    letter-spacing: 0.05em;
}
.site-header__nav a,
.site-footer__nav a,
.site-header__menu a,
.site-footer__menu a {
    letter-spacing: 0.02em;
    font-feature-settings: "palt" 1;
}
.site-breadcrumb,
.site-breadcrumb__item,
.site-breadcrumb__item a {
    letter-spacing: 0.02em;
    font-feature-settings: "palt" 1, "kern" 1;
}
.site-footer__copyright,
.site-footer [class*="__copy"] {
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "tnum" 1;
}
@media (max-width: 768px) {
    .site-header__logo,
    .site-header__brand {
        letter-spacing: 0.03em;
    }
    .site-header__cta,
    .site-footer__cta {
        letter-spacing: 0.04em;
    }
    .site-header__nav a,
    .site-footer__nav a {
        letter-spacing: 0.01em;
    }
}

/* 2026-09-25 scroll motion v5B
 * Header scroll shadow:
 * .site-header--scrolled のスタイルは assets/scroll-reveal.css で定義。
 * ここでは背景ロック（memory: header-white-lock）を絶対に上書きさせないため、
 * scroll 状態でも background-color を再肯定しておく。 */
header.site-header.site-header--scrolled { background-color: #FFFFFF !important; }

/* ==========================================================================
 * 2026-09-25 assets v5A  Figma SVG icon override
 * ==========================================================================
 * - パンくずセパレータをテキスト "／" から Figma 由来の chevron に置換
 * - ハンバーガー疑似要素を Figma 由来 SVG に置換
 * - フッターナビの link を SVG chevron 付きに
 * BEM 命名は変えず、既存クラスに対する視覚 override のみ実施。 */

/* パンくずセパレータ */
.site-breadcrumb__sep {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    background-color: #fff;
    -webkit-mask-image: var(--technoauto-icon-arrow-right-file);
            mask-image: var(--technoauto-icon-arrow-right-file);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    /* テキスト文字 "／" が中に残っている場合の視覚除去 */
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
    margin: 0 0.35em;
}

/* ハンバーガーボタン（.site-header__menu-toggle 系）で疑似要素で bar 描画してる場合の SVG 化。
 * 既存 img.icon-hamburger は差し替えないが、CSS で背景生成しているケースをここで統一。 */
.site-header__menu-toggle--svg,
.js-drawer-toggle.has-svg-icon {
    background-image: var(--technoauto-icon-hamburger-file) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    color: var(--technoauto-icon-color, #000);
}

/* フッターナビの各リンクに small chevron を付与（PC のみ・SP は既存維持） */
@media (min-width: 769px) {
    .site-footer__nav a::after {
        content: "";
        display: inline-block;
        width: 0.6em;
        height: 0.6em;
        margin-left: 0.4em;
        background-color: currentColor;
        -webkit-mask-image: var(--technoauto-icon-arrow-right-file);
                mask-image: var(--technoauto-icon-arrow-right-file);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        vertical-align: middle;
        opacity: 0.6;
        transition: opacity .2s ease, transform .2s ease;
    }
    .site-footer__nav a:hover::after {
        opacity: 1;
        transform: translateX(2px);
    }
}
/* v5A end */

/* ==========================================================================
   2026-09-25 refresh audit v8 (header/footer)
   目的: SP でハンバーガーボタンの3本 bar が完全消失していた対策
        （span の background 継承事故 + actions nav の flex 縮退保険）
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* [H1] SP: actions は必ず可視化 (nav 要素の inline default に負けないよう明示) */
    .site-header__actions {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }
    /* [H2] SP: menu-toggle 自体を保険で必ず可視化 */
    .site-header__menu-toggle {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-shrink: 0;
    }
    /* [H3] bar span の background を固定色で強制（var 事故で bg 継承が空白化する経路対策） */
    .site-header__menu-toggle span {
        display: block;
        width: 26px;
        height: 2.5px;
        background: #000000;
        border-radius: 2px;
        opacity: 1;
    }
    /* [H4] site-header__inner: SP は space-between + 右端余白 12px */
    .site-header__inner {
        justify-content: space-between;
        align-items: center;
    }
}
/* v8 end (header-footer) — refresh audit */

/* ==========================================================================
   2026-09-25 SP fresh audit v9 (header-footer)
   目的: v8 でハンバーガーが依然として画面外 (右方向オーバーフロー) だった件を修正
   原因: brand logo 256x40 が SP 375px 内で縮まず、actions が右外に押し出されていた
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* [H5] SP: brand link 自体を可変幅にして shrink 許容 */
    .site-header__brand {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
    }
    /* [H6] SP: brand 内ロゴ img は max-width を親幅に追従させる */
    .site-header__brand img,
    .site-header__logo {
        max-width: 100%;
        width: auto;
        height: 28px;
        object-fit: contain;
    }
    /* [H7] SP: inner の左右余白は 12px で統一（既存 10 12 10 14 → 10 12） */
    .site-header__inner {
        padding: 10px 12px;
        gap: 8px;
        min-width: 0;
    }
    /* [H8] SP: actions を右端固定、確実に画面内 */
    .site-header__actions {
        position: relative;
        z-index: 2;
    }
    /* [H9] SP: パンくずが 画面幅を超えたら横スクロール可能に (右端はみ出し防止) */
    .site-breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .site-breadcrumb::-webkit-scrollbar { display: none; }
    .site-breadcrumb__list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}
/* v9 end (header-footer) — SP fresh audit */

/* 2026-09-25 Montserrat unification v10 — 英字系フォント stack を Montserrat 優先に統一。実体は tokens.css の --technoauto-font-en / --wordmark-font-family および末尾属性セレクタで一元管理。当ファイルは既存 var(--technoauto-font-en) 参照 or "Montserrat","Barlow" fallback stack でカバー済 */

/* ==========================================================================
   2026-09-25 refresh audit v10 (header/footer) — PC+SP audit
   目的:
   - [H10] SP: v9 でも実描画時にハンバーガー button が完全に見えないケースを nuclear fallback で塞ぐ
            (site-header 側の max-width + border が SP で残ると actions が押し出される想定に備え)
   - [H11] SP: site-header 側の max-width / border-radius が SP で残っていた場合の後保険
   - [H12] SP: 白背景ロックの再肯定 (memory: header-white-lock)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* [H10] site-header 本体を SP でフルブリードに保証 */
    .site-header {
        max-width: 100% !important;
        width: 100%;
        border-left: none;
        border-right: none;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: visible;
    }
    /* [H11] inner の gap を圧縮しつつ両端に確実に配置 */
    .site-header__inner {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: space-between !important;
        align-items: center;
        gap: 8px;
        padding: 10px 12px !important;
        min-height: 56px;
        width: 100%;
        box-sizing: border-box;
    }
    /* [H12] actions を最右に押しつけて、確実に画面内・可視化 */
    .site-header__actions {
        display: flex !important;
        align-items: center;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        min-width: 44px;
    }
    /* [H13] hamburger button の可視化 nuclear */
    .site-header__menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0;
        background: transparent;
        border: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-shrink: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .site-header__menu-toggle span {
        display: block !important;
        width: 26px !important;
        height: 2.5px !important;
        background: #000000 !important;
        border-radius: 2px;
        opacity: 1 !important;
    }
    /* [H14] brand を可変幅にして actions に場所を渡す */
    .site-header__brand {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
    }
    header.site-header .site-header__logo,
    header.site-header img.site-header__logo {
        /* 2026-10-13 P0: actions (OC 36 + doc 36 + hamburger 44 + gaps 18 ≒ 134) + padding 24 分を控除。
           v11 の max-width: calc(100vw - 76px) が広すぎて doc/hamburger が右へ overflow していた */
        max-width: 150px !important;
        height: 28px !important;
        width: auto !important;
    }
    header.site-header .site-header__brand {
        max-width: 170px !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }
    /* [H15] SP breadcrumb 下に page-hero が接する時の "空白帯" を吸収 (contact 等) */
    .site-breadcrumb + .page-body,
    .site-breadcrumb + main {
        margin-top: 0 !important;
    }
}
/* v10 end (header-footer) — refresh audit */

/* ==========================================================================
   2026-09-25 final convergence v11 (header-footer)
   目的:
   - [H16] SP: ハンバーガー完全不可視の 3回目対策。DOM 実構造で確認済の
            実 class 名 `.site-header__menu-toggle` に対して、親 chain の
            すべての shrink/overflow/max-width 事故を封じ、ボタン自身を
            "右端固定・常時可視" の nuclear 再定義で強制描画する。
   - [H17] SP: 実測で brand の <img.site-header__logo> が width属性 256 を
            そのまま消費しており、v9/v10 の max-width が効かないケースを
            !important + calc(100vw - 88px) で確定させる。
   - [H18] SP: breadcrumb と直後の hero 間の巨大空白 (contact 等) を吸収。
            v10 [H15] の後続要素セレクタが `.page-body` / `main` のみで、
            `.page-contact` `.page-about` 等 BEM ラッパにヒットしていない。
   - [H19] SP: パンくずが折り返す時の 30px 過剰上下余白を圧縮。
   - [H20] SP: ヘッダー白背景ロック再肯定 (memory: header-white-lock)。
            SP 側で var 化事故が起きても崩れないよう longhand を再確定。
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* [H16] hamburger 完全可視化 — 最上位 nuclear override */
    header.site-header .site-header__actions,
    header.site-header nav.site-header__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
        min-width: 44px !important;
        max-width: none !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 3 !important;
        overflow: visible !important;
    }
    header.site-header .site-header__menu-toggle,
    header.site-header button.site-header__menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 0 0 44px !important;
        position: relative !important;
        z-index: 4 !important;
        pointer-events: auto !important;
        clip: auto !important;
        clip-path: none !important;
        transform: none !important;
    }
    header.site-header .site-header__menu-toggle span,
    header.site-header .site-header__menu-toggle > span {
        display: block !important;
        width: 26px !important;
        height: 2.5px !important;
        background: #000000 !important;
        background-color: #000000 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform-origin: center !important;
    }

    /* [H17] brand/logo の実測 shrink 強制 (img width 属性 256 対策)
       2026-10-13 P0: calc(100vw - 76px) では actions(OC36+doc36+hamburger44+gap12=128)
       が収まらず doc/hamburger が右へ overflow していた。
       actions 確保幅 = 128 + gap6 + padding right12 = 146 → brand max は 100vw - 150px */
    header.site-header .site-header__brand {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 160px) !important;
        overflow: hidden !important;
    }
    header.site-header .site-header__brand img,
    header.site-header .site-header__logo,
    header.site-header img.site-header__logo {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
        flex: 0 1 auto !important;
    }
    /* inner: 両端固定 + button 分の確保 */
    header.site-header .site-header__inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        min-height: 56px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    header.site-header {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        overflow: visible !important;
    }

    /* [H18] breadcrumb 直後の巨大空白吸収 (BEM ラッパ全部) */
    .site-breadcrumb + .page-contact,
    .site-breadcrumb + .page-about,
    .site-breadcrumb + .page-course,
    .site-breadcrumb + .page-admission,
    .site-breadcrumb + .page-tuition,
    .site-breadcrumb + .page-career,
    .site-breadcrumb + .page-opencampus,
    .site-breadcrumb + .page-top,
    .site-breadcrumb + [class*="page-"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* さらに page 系ラッパ内の最初の hero/section の top margin も潰す */
    .site-breadcrumb + [class*="page-"] > *:first-child,
    .site-breadcrumb + [class*="page-"] > section:first-child,
    .site-breadcrumb + [class*="page-"] > [class*="__hero"]:not([class*="__hero-"]):first-child {
        margin-top: 0 !important;
    }

    /* [H19] breadcrumb 自身のコンパクト化 */
    .site-breadcrumb {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* [H20] 白背景ロック再肯定 */
    header.site-header {
        background-color: #FFFFFF !important;
        background-image: none !important;
    }
}
/* v11 end (header-footer) — final convergence */

/* ==========================================================================
   2026-09-26 a11y deep v13 (header-footer)
   目的:
   - [H21] .skip-link を最上部に visible/focus 時のみ表示。既存 style.css の
           定義を上書きし、WCAG 2.4.1 Bypass Blocks 準拠を強化する。
   - [H22] 予備の .skip-to-content クラス（仕様書指定の別名）にも同じ挙動を
           適用しておき、以後どちらのクラス名で埋めても動くようにする。
   - [H23] main[tabindex="-1"] に focus outline を付けない（キーボード遷移後の
           不要な輪郭を抑止）。
   - [H24] breadcrumb 最終要素の aria-current="page" を視覚的にも
           強調（太字 + カラーコントラスト UP）してAT/晴眼両方に伝える。
   - [H25] header の menu-toggle が展開中 (aria-expanded="true") のとき
           label を切り替える視覚ヒントを追加。
   ========================================================================== */
.skip-link,
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10000;
    background: var(--technoauto-bg-brand, #439FFF);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 6px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible,
.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 8px;
    outline: 3px solid #FFCE30;
    outline-offset: 2px;
}

/* [H23] main を tabindex focus 対象にしたが outline は不要 */
main#site-content:focus,
main#site-content:focus-visible {
    outline: none;
}

/* [H24] breadcrumb aria-current 強調 */
.site-breadcrumb__item [aria-current="page"] {
    font-weight: 700;
    color: #003b7a;
}

/* [H25] menu-toggle 展開中の aria-expanded 視覚化 */
.site-header__menu-toggle[aria-expanded="true"] {
    background-color: rgba(67, 159, 255, 0.08);
}
/* v13 end (header-footer) — a11y deep */

/* 2026-09-26 CWV v14 */
/* [CWV-H01] logo は width/height 属性で ratio 保証済だが、
 *   親 flex 内で width:auto 化されると縦潰れするケース回避 */
.site-header__logo {
    height: auto;
    max-height: 40px;
    width: auto;
    aspect-ratio: 256 / 40;
}
.site-drawer__brand img {
    height: auto;
    max-height: 32px;
    width: auto;
    aspect-ratio: 200 / 32;
}
/* v14 end (header-footer) — CWV */

/* ==========================================================================
   2026-09-26 drawer a11y v19
   - drawer 展開中の body scroll-lock を iOS Safari でも効かせる
   - drawer 内リンク/ボタンの focus-visible を強調
   - overlay 透過度を仕様通り (rgba(0,0,0,0.55))
   ========================================================================== */
/* [V19-01] body scroll-lock: v14 の overflow:hidden に加え position:fixed で
   iOS Safari の慣性スクロール突き抜けを防ぐ */
body.is-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

/* [V19-02] drawer 内 focus-visible 強調 (キーボード操作時のみ) */
#site-drawer a:focus-visible,
#site-drawer button:focus-visible,
.site-drawer a:focus-visible,
.site-drawer button:focus-visible {
    outline: 3px solid #FFCE30;
    outline-offset: 2px;
    border-radius: 2px;
}

/* [V19-03] overlay 透過度確認: SP でも同基準に揃える */
.site-drawer-overlay,
[data-drawer-overlay] {
    background-color: rgba(0, 0, 0, 0.55);
}
.site-drawer-overlay.is-open,
[data-drawer-overlay].is-open {
    background-color: rgba(0, 0, 0, 0.55);
}
/* v19 end (header-footer) — drawer a11y */

/* ==================== Footer SP 4-card 右カット 最終保険 (2026-09-27) ==================== */
@media (max-width: 767px) {
    .site-footer,
    .site-footer * {
        box-sizing: border-box;
    }
    .site-footer {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
    /* 4-card grid → 1col stack */
    .site-footer__nav-cols,
    .site-footer__nav-grid,
    .site-footer__cols,
    .site-footer [class*="__nav-cols"],
    .site-footer [class*="__nav-grid"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 24px !important;
    }
    .site-footer__nav-col,
    .site-footer [class*="__nav-col"]:not([class*="__nav-cols"]) {
        border-right: none !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }
    /* Footer inner: 保険 padding */
    .site-footer__inner,
    .site-footer [class*="__inner"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
}
/* footer SP 保険 end */

/* ==========================================================================
 * 2026-10-19 js-bugs: PC フッターナビ Figma 準拠の補正
 * - Figma (page-top__pc) は各リンク左に水色の小さな chevron がある。
 *   layout.css [v20b-04] が「::after の SVG と二重になる」として span の > を font-size:0 で消し、
 *   さらに custom.css が ::after を content:none にしたため、結果としてどちらの矢印も出ていなかった
 *   → span 側 (.site-footer__nav-arrow) を復活させる。
 * - li が body の line-height を継承して 25px 高になり行ピッチが 37px (Figma 29px) → li を link 高に揃える。
 * ========================================================================== */
@media (min-width: 769px) {
    .site-footer__nav .site-footer__nav-arrow {
        font-size: 11px !important;
        line-height: 1 !important;
    }
    .site-footer__nav .site-footer__nav-item {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* 2026-10-19 js-bugs: SP フッターのブランド表記「横浜テクノオート専門学校」が 22px のため
   375px 幅で「…専門 / 学校」と 2 行に折り返していた (Figma SP はロゴ 252×40 の 1 行)
   → SP のみマーク高さ・文字サイズを Figma のロゴ寸法相当に縮小 */
@media (max-width: 768px) {
    .site-footer__brand-logo { gap: 10px; }
    .site-footer__brand-mark { height: 40px; }
    .site-footer__brand-corp { font-size: 9px; }
    .site-footer__brand-name { font-size: 16px; white-space: nowrap; letter-spacing: 0.01em; }
    .site-footer__brand-en { font-size: 7px; }
}

/* [common] 2026-10-19 PC フッター CTA 帯 (Figma「ブルーエリア」): 帯 pad 40/100・中身幅 1160、
   カード 565x100・角丸 10・枠 1px・pad 0/20・アイコン 60・間 20、サブ 16px/700、英字 34px/700 */
@media screen and (min-width: 769px) {
    .site-footer__cta-band { padding: 40px 100px; }
    .site-footer__cta-inner { max-width: 1160px; gap: 30px; }
    .site-footer__cta {
        min-height: 100px;
        padding: 0 20px;
        gap: 20px;
        border-width: 1px;
        border-radius: 10px;
    }
    .site-footer__cta-icon { width: 60px; height: 60px; }
    .site-footer__cta-text { gap: 10px; }
    .site-footer__cta-sub { font-size: 16px; line-height: 1; }
    .site-footer__cta-main { font-size: 34px; letter-spacing: 0; }
}