/**
 * 既卒・社会人の方へ ページ専用スタイル
 * BEM prefix: .page-for-graduate
 */

.page-for-graduate {
    background-color: var(--technoauto-bg-base, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 50px 0;
    width: 100%;
    font-family: var(--technoauto-font-jp);
    color: var(--technoauto-text-primary, #000);
    box-sizing: border-box;
}
.page-for-graduate *,
.page-for-graduate *::before,
.page-for-graduate *::after { box-sizing: border-box; }
.page-for-graduate p { margin: 0; }
.page-for-graduate a { color: inherit; text-decoration: none; }

/* Hero */
.page-for-graduate__hero {
    display: flex;
    height: 371px;
    width: 1240px;
    max-width: 100%;
}
.page-for-graduate__hero-panel {
    flex: 1;
    background-color: var(--technoauto-bg-brand, #4ea5ff);
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.page-for-graduate__hero-en {
    font-family: var(--technoauto-font-en);
    font-style: italic; font-weight: 700; font-size: 20px;
    color: #398be2; text-transform: uppercase;
}
.page-for-graduate__hero-body { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.page-for-graduate__hero-wordmark {
    position: relative; display: inline-flex; padding-bottom: 3px;
    font-family: var(--technoauto-font-en);
    font-style: italic; font-weight: 700;
    font-size: 60px; line-height: 1; white-space: nowrap;
}
.page-for-graduate__hero-wordmark-shadow { position: absolute; top: 3px; left: 3px; color: var(--technoauto-bg-brand, #439fff); }
.page-for-graduate__hero-wordmark-front { position: relative; color: #fff; }
.page-for-graduate__hero-title { font-weight: 700; font-size: 40px; line-height: 1.4; color: #fff; margin: 0; letter-spacing: 0; }
.page-for-graduate__hero-sub { font-size: 18px; line-height: 1.8; color: #fff; letter-spacing: 0; }

.page-for-graduate__breadcrumb {
    background: var(--technoauto-bg-brand-strong, #2f8aee);
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 40px; height: 40px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px; overflow: hidden;
    width: 100%; white-space: nowrap; line-height: 1;
}
.page-for-graduate__breadcrumb-item { font-size: 12px; color: #fff; }
.page-for-graduate__breadcrumb-sep { font-family: inherit; font-size: 10px; color: #6bd0ff; }
.page-for-graduate__breadcrumb--top { display: none; }

/* Section 共通 */
.page-for-graduate__section { position: relative; width: 1240px; max-width: 100%; }
.page-for-graduate__section-inner {
    position: relative; width: 100%;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 20px;
    padding: 130px 40px 40px;
    display: flex; flex-direction: column; gap: 30px;
    align-items: center; margin-top: 30px;
    background: #fff;
}
.page-for-graduate__section--features .page-for-graduate__section-inner {
    background: var(--technoauto-bg-brand-soft, #6bd0ff);
}
.page-for-graduate__section--interview .page-for-graduate__section-inner {
    background: var(--technoauto-bg-section, #d7f2ff);
}
.page-for-graduate__section--cta .page-for-graduate__section-inner {
    background: var(--technoauto-bg-brand, #439fff);
}

.page-for-graduate__section-heading {
    position: absolute; top: -31px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    white-space: nowrap;
}
.page-for-graduate__section-heading-wordmark {
    position: relative; display: inline-flex; padding-bottom: 3px;
    font-family: var(--technoauto-font-en);
    font-style: italic; font-weight: 700;
    font-size: 50px; line-height: 1;
}
.page-for-graduate__section-heading-wordmark-shadow { position: absolute; top: 3px; left: 3px; color: var(--technoauto-bg-brand, #439fff); }
.page-for-graduate__section-heading-wordmark-front { position: relative; color: #fff; }
.page-for-graduate__section-heading-jp { font-weight: 700; font-size: 30px; line-height: 1.5; }
.page-for-graduate__section-heading-lead { font-size: 15px; line-height: 1.8; text-align: center; white-space: normal; }

.page-for-graduate__section--cta .page-for-graduate__section-heading-jp,
.page-for-graduate__section--cta .page-for-graduate__section-heading-lead { color: #fff; }

/* Features */
.page-for-graduate__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
}
.page-for-graduate__feature {
    background: #fff;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.page-for-graduate__feature-badge {
    background: var(--technoauto-bg-brand, #439fff);
    border-radius: 999px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.page-for-graduate__feature-badge span {
    font-family: var(--technoauto-font-en);
    font-weight: 700; color: #fff; font-size: 14px;
}
.page-for-graduate__feature:nth-child(2) .page-for-graduate__feature-badge { background: #ffd23f; }
.page-for-graduate__feature:nth-child(3) .page-for-graduate__feature-badge { background: #4bc07a; }
.page-for-graduate__feature:nth-child(4) .page-for-graduate__feature-badge { background: #ff5a5a; }

.page-for-graduate__feature-title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.page-for-graduate__feature-desc { font-size: 13px; line-height: 1.7; color: var(--technoauto-text-secondary, #555); }

/* Interview */
.page-for-graduate__interviews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}
.page-for-graduate__interview {
    background: #fff;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 10px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-for-graduate__interview-label {
    display: inline-block;
    align-self: flex-start;
    background: var(--technoauto-bg-brand, #439fff);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.page-for-graduate__interview-quote {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--technoauto-text-primary, #000);
}
.page-for-graduate__interview-name {
    font-size: 13px;
    color: var(--technoauto-text-secondary, #666);
    font-weight: 700;
}
.page-for-graduate__interview-story {
    font-size: 14px;
    line-height: 1.8;
    color: var(--technoauto-text-secondary, #555);
}

/* CTA */
.page-for-graduate__cta-btn {
    background: #fff;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 10px;
    padding: 28px 60px 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-width: 400px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.page-for-graduate__cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.page-for-graduate__cta-btn-label { font-size: 22px; font-weight: 700; color: var(--technoauto-text-primary, #000); }
.page-for-graduate__cta-btn-sub { font-size: 13px; color: var(--technoauto-text-secondary, #666); }
.page-for-graduate__cta-btn-arrow {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    font-family: inherit; font-size: 14px;
    color: var(--technoauto-bg-brand, #439fff);
}

/* ========================================
   SP
   ======================================== */
@media screen and (max-width: 768px) {
    .page-for-graduate { gap: 0; padding: 0 0 40px; overflow-x: hidden; }

    .page-for-graduate__breadcrumb--top {
        display: flex; background: transparent; border: 0; border-radius: 0;
        height: auto; padding: 14px 16px 12px; color: #000;
    }
    .page-for-graduate__breadcrumb--top .page-for-graduate__breadcrumb-item { color: #000; }
    .page-for-graduate__breadcrumb--top .page-for-graduate__breadcrumb-sep { color: #439fff; }
    .page-for-graduate__breadcrumb--inline { display: none; }

    .page-for-graduate__hero {
        width: 100% !important; max-width: 100% !important;
        height: auto; padding: 0 16px; margin-bottom: 30px;
    }
    .page-for-graduate__hero-panel {
        border: 0; border-radius: 0; background: transparent;
        padding: 40px 24px 60px; gap: 0;
        position: relative; overflow: visible; align-items: center;
    }
    .page-for-graduate__hero-panel::before {
        content: ""; position: absolute; inset: 0;
        background: var(--technoauto-bg-brand, #4ea5ff);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
        z-index: 0;
    }
    .page-for-graduate__hero-en { display: none; }
    .page-for-graduate__hero-body { position: relative; z-index: 2; gap: 12px; align-items: center; text-align: center; }
    .page-for-graduate__hero-wordmark { font-size: 44px; }
    .page-for-graduate__hero-wordmark-shadow { display: none; }
    .page-for-graduate__hero-wordmark-front { position: static; color: transparent; -webkit-text-stroke: 2px #fff; }
    .page-for-graduate__hero-title { font-size: 24px; text-align: center; }
    .page-for-graduate__hero-sub { font-size: 13px; text-align: center; }

    .page-for-graduate__section { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
    .page-for-graduate__section-inner {
        border: 0; border-radius: 0;
        padding: 40px 20px; gap: 20px; margin-top: 0;
        background: transparent;
    }
    .page-for-graduate__section--features .page-for-graduate__section-inner {
        background: var(--technoauto-bg-brand-soft, #6bd0ff);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
        padding-bottom: 60px;
    }
    .page-for-graduate__section--interview .page-for-graduate__section-inner {
        background: var(--technoauto-bg-section, #d7f2ff);
    }
    .page-for-graduate__section--cta .page-for-graduate__section-inner {
        background: var(--technoauto-bg-brand, #439fff);
    }

    .page-for-graduate__section-heading { position: static; transform: none; gap: 6px; white-space: normal; }
    .page-for-graduate__section-heading-wordmark { font-size: 32px; position: relative; display: inline-block; }
    .page-for-graduate__section-heading-wordmark-shadow { display: none; }
    .page-for-graduate__section-heading-wordmark-front { position: static; color: #fff; -webkit-text-stroke: 2px var(--technoauto-bg-brand, #439fff); }
    .page-for-graduate__section-heading-jp { font-size: 20px; text-align: center; }
    .page-for-graduate__section-heading-lead { font-size: 13px; }

    .page-for-graduate__features { grid-template-columns: 1fr; gap: 12px; }
    .page-for-graduate__interviews { grid-template-columns: 1fr; gap: 12px; }
    .page-for-graduate__interview { padding: 20px; }
    .page-for-graduate__interview-quote { font-size: 16px; }

    .page-for-graduate__cta-btn { min-width: 0; width: 100%; padding: 20px 50px 20px 24px; }
    .page-for-graduate__cta-btn-label { font-size: 18px; }
    .page-for-graduate__cta-btn-sub { font-size: 12px; }
}


/* hero-kv (Figma photo) */
.page-for-graduate__hero {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 1240px;
    max-width: 100%;
    margin: 0 auto;
}
.page-for-graduate__hero-panel { flex: 0 0 51.6%; min-width: 0; border-radius: 20px 0 0 20px; }
.page-for-graduate__hero-kv {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-left: 0;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    background: #eaf6ff;
}
.page-for-graduate__hero-kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 768px) {
    .page-for-graduate__hero {
        flex-direction: column;
        gap: 12px;
    }
    .page-for-graduate__hero-panel,
    .page-for-graduate__hero-kv {
        flex-basis: auto;
        width: 100%;
    }
    .page-for-graduate__hero-kv {
        aspect-ratio: 16 / 10;
    }
}

/* SUPPORT 4項目 (2026-09-25) */
.page-for-graduate__section--support { background: #f7f8fa; }
.page-for-graduate__supports {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.page-for-graduate__support {
    background: #fff;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.page-for-graduate__support-check {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d63b3b;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}
.page-for-graduate__support-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
    padding-top: 8px;
}
@media screen and (max-width: 768px) {
    .page-for-graduate__supports { grid-template-columns: 1fr; gap: 12px; }
    .page-for-graduate__support { padding: 16px 20px; }
    .page-for-graduate__support-check { width: 32px; height: 32px; font-size: 16px; }
}

/* 2026-09-25 Figma pixel-level fix
   Figma: 35_ターゲット_既卒社会人_pc(953:15479) / _sp(226:1320)
   - 3 sections: なぜ今整備士なのか=#FFF7CE, 社会人向けサポート=#6BD0FF, 卒業生の声=#D7F2FF
     (mapping: --features(なぜ今)=#FFF7CE, --interview(サポート)=#6BD0FF, --cta(卒業生の声)=#D7F2FF)
   - Section-inner: r=20 py=110/40 px=40 gap=30
   - SP Frame 7 345x r=10 py=30 px=20 gap=20
   - SP hero py=30 px=35 bg=#4EA5FF gap=-30 */
.page-for-graduate__hero-panel { background-color: #4ea5ff; gap: 60px; }
.page-for-graduate__section-inner { padding: 110px 40px 40px; gap: 30px; }
.page-for-graduate__section--features .page-for-graduate__section-inner { background: #fff7ce; }
.page-for-graduate__section--interview .page-for-graduate__section-inner { background: #6bd0ff; }
.page-for-graduate__section--cta .page-for-graduate__section-inner { background: #d7f2ff; }
.page-for-graduate__section--cta .page-for-graduate__section-heading-jp,
.page-for-graduate__section--cta .page-for-graduate__section-heading-lead { color: #000; }
@media screen and (max-width: 768px) {
    .page-for-graduate__hero-panel { background-color: #4ea5ff; gap: 30px; padding: 30px 35px; }
    .page-for-graduate__section-inner { padding: 30px 20px; border-radius: 10px; gap: 20px; }
    .page-for-graduate__breadcrumb { background: #2f8aee; padding: 0 15px; gap: 8px; height: 40px; border-radius: 0; }
}

/* 2026-09-25 Figma visual diff v2
   Figma: 35_ターゲット_既卒社会人 vs live 差分の追い込み
   - Hero fixed height (371px) → min-height 化（subtitle 折り返しで breadcrumb 突き抜け対策）
   - Hero panel overflow: hidden で角丸内クリップ保険
   - Hero body flex 伸長で breadcrumb をパネル底に固定
   - Section heading gap 8px 統一
*/
.page-for-graduate__hero { height: auto; min-height: 371px; overflow: hidden; }
.page-for-graduate__hero-panel { min-height: 371px; overflow: hidden; }
.page-for-graduate__hero-body { flex: 1 1 auto; }
.page-for-graduate__hero-kv { overflow: hidden; }
.page-for-graduate__section-heading { gap: 8px; }
@media screen and (max-width: 768px) {
    .page-for-graduate__hero { min-height: 0; overflow: visible; }
    .page-for-graduate__hero-panel { min-height: 0; overflow: visible; }
    .page-for-graduate__section-heading { gap: 6px; }
}



/* 2026-09-25 Figma polish v3 */
/* v3 polish: hover/focus micro-interactions・BEM維持・!important 不使用 */
.page-for-graduate a,
.page-for-graduate button,
.page-for-graduate [class*="__cta"]:not([class*="__cta-"]),
.page-for-graduate [class*="__btn"]:not([class*="__btn-"]),
.page-for-graduate [class*="__link"]:not([class*="__link-item"]):not([class*="__link-icon"]):not([class*="__link-label"]) {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.page-for-graduate [class*="__cta"]:not([class*="__cta-"]):hover,
.page-for-graduate [class*="__btn"]:not([class*="__btn-"]):hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.page-for-graduate [class*="__cta"]:not([class*="__cta-"]):active,
.page-for-graduate [class*="__btn"]:not([class*="__btn-"]):active {
    filter: brightness(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.page-for-graduate [class*="__card"]:not([class*="__card-"]),
.page-for-graduate [class*="__tile"]:not([class*="__tile-"]) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-for-graduate a[class*="__card"]:hover,
.page-for-graduate a[class*="__tile"]:hover,
.page-for-graduate [class*="__card"]:hover:not([class*="__card-"]),
.page-for-graduate [class*="__tile"]:hover:not([class*="__tile-"]) {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.page-for-graduate [class*="__btn-arrow"],
.page-for-graduate [class*="__link-arrow"],
.page-for-graduate [class*="__cta-arrow"] {
    transition: transform 0.2s ease;
}
.page-for-graduate a:hover [class*="__btn-arrow"],
.page-for-graduate a:hover [class*="__link-arrow"],
.page-for-graduate a:hover [class*="__cta-arrow"],
.page-for-graduate button:hover [class*="__btn-arrow"],
.page-for-graduate button:hover [class*="__cta-arrow"] {
    transform: translateX(4px);
}
.page-for-graduate a:focus-visible,
.page-for-graduate button:focus-visible,
.page-for-graduate [tabindex]:focus-visible {
    outline: 2px solid var(--technoauto-border-focus, #439fff);
    outline-offset: 2px;
}
.page-for-graduate [class*="__hero-kv"] img,
.page-for-graduate [class*="__thumb"] img,
.page-for-graduate [class*="__card-photo"] img,
.page-for-graduate [class*="__card-image"] img,
.page-for-graduate [class*="__card-thumb"] img {
    object-fit: cover;
}
.page-for-graduate [class*="__wordmark"],
.page-for-graduate [class*="__section-en"],
.page-for-graduate [class*="__hero-en"] {
    font-feature-settings: "ss01";
    font-variant-numeric: tabular-nums;
}

/* 2026-09-25 micro-typography v4 */
/* v4 micro-typography: Figma style.letterSpacing 反映 + font-feature-settings 統一
   基本方針:
   - 英字系(Barlow): kern/liga/ss01 有効化 + letter-spacing 0.02em〜0.05em
   - 日本語見出し(Noto Sans JP): palt 有効化 + 大見出しは -0.01em kerning
   - 本文: letter-spacing 0.02em (可読性)
   - ボタン: 0.05em / タブ・chip: 0.08em / 数値: -0.02em + tabular-nums
   BEM維持・!important 不使用・SPは 0.01em 緩め */
.page-for-graduate {
    font-feature-settings: "palt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}
.page-for-graduate [class*="__wordmark"],
.page-for-graduate [class*="__section-en"],
.page-for-graduate [class*="__hero-en"],
.page-for-graduate [class*="__en"],
.page-for-graduate [class*="__label-en"] {
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}
.page-for-graduate [class*="__hero-title"],
.page-for-graduate [class*="__page-title"],
.page-for-graduate h1 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: -0.01em;
}
.page-for-graduate [class*="__section-title"],
.page-for-graduate [class*="__block-title"],
.page-for-graduate h2 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: -0.005em;
}
.page-for-graduate [class*="__card-title"],
.page-for-graduate [class*="__item-title"],
.page-for-graduate [class*="__sub-title"],
.page-for-graduate h3, .page-for-graduate h4 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: 0.02em;
}
.page-for-graduate p,
.page-for-graduate [class*="__desc"],
.page-for-graduate [class*="__text"],
.page-for-graduate [class*="__lead"],
.page-for-graduate [class*="__body"] {
    letter-spacing: 0.02em;
}
.page-for-graduate [class*="__btn"]:not([class*="__btn-"]),
.page-for-graduate [class*="__cta"]:not([class*="__cta-"]),
.page-for-graduate [class*="__button"] {
    letter-spacing: 0.05em;
    font-feature-settings: "palt" 1, "kern" 1;
}
.page-for-graduate [class*="__tab"],
.page-for-graduate [class*="__chip"]:not([class*="__chip-"]),
.page-for-graduate [class*="__tag"]:not([class*="__tag-"]),
.page-for-graduate [class*="__label"]:not([class*="__label-en"]) {
    letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
}
.page-for-graduate [class*="__num"],
.page-for-graduate [class*="__count"],
.page-for-graduate [class*="__price"],
.page-for-graduate [class*="__percent"] {
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "tnum" 1;
}
@media (max-width: 768px) {
    .page-for-graduate [class*="__hero-title"],
    .page-for-graduate [class*="__page-title"],
    .page-for-graduate h1 {
        letter-spacing: 0em;
    }
    .page-for-graduate [class*="__section-title"],
    .page-for-graduate [class*="__block-title"],
    .page-for-graduate h2 {
        letter-spacing: 0.005em;
    }
    .page-for-graduate p,
    .page-for-graduate [class*="__desc"],
    .page-for-graduate [class*="__text"],
    .page-for-graduate [class*="__lead"],
    .page-for-graduate [class*="__body"] {
        letter-spacing: 0.01em;
    }
    .page-for-graduate [class*="__btn"]:not([class*="__btn-"]),
    .page-for-graduate [class*="__cta"]:not([class*="__cta-"]),
    .page-for-graduate [class*="__button"] {
        letter-spacing: 0.04em;
    }
    .page-for-graduate [class*="__tab"],
    .page-for-graduate [class*="__chip"]:not([class*="__chip-"]),
    .page-for-graduate [class*="__tag"]:not([class*="__tag-"]) {
        letter-spacing: 0.06em;
    }
}


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

@media screen and (max-width: 768px) {
    /* SP tap-highlight 統一 */
    .page-for-graduate a,
    .page-for-graduate button,
    .page-for-graduate summary {
        -webkit-tap-highlight-color: rgba(67, 159, 255, 0.15);
    }
    /* SP hero KV: 顔位置キープ */
    .page-for-graduate [class*="__hero-kv"] img,
    .page-for-graduate [class*="__hero-visual"] img,
    .page-for-graduate [class*="__hero-image"] img,
    .page-for-graduate [class*="__hero"]:not([class*="__hero-"]) > img {
        object-position: right top;
    }
    /* SP タップ 44x44 (WCAG AA) */
    .page-for-graduate a[class*="__btn"]:not([class*="__btn-"]),
    .page-for-graduate a[class*="__cta"]:not([class*="__cta-"]),
    .page-for-graduate button[class*="__btn"]:not([class*="__btn-"]),
    .page-for-graduate button[class*="__cta"]:not([class*="__cta-"]) {
        min-height: 44px;
    }
    .page-for-graduate input,
    .page-for-graduate select,
    .page-for-graduate textarea,
    .page-for-graduate button {
        min-height: 44px;
    }
    /* SP over-scroll ちらつき抑止 */
    .page-for-graduate {
        overscroll-behavior-y: contain;
    }
    /* SP スクロールバー隠す (横スワイプ要素) */
    .page-for-graduate [class*="__slider"],
    .page-for-graduate [class*="__carousel"],
    .page-for-graduate [class*="__scroll-x"] {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page-for-graduate [class*="__slider"]::-webkit-scrollbar,
    .page-for-graduate [class*="__carousel"]::-webkit-scrollbar,
    .page-for-graduate [class*="__scroll-x"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}


/* ==========================================================================
   2026-09-25 global refinements v4
   （page 共通：reduce-motion / print / prefers-contrast / safe-area）
   ========================================================================== */

/* reduce-motion（ページ固有の transform hover / animation を無効化） -------- */
@media (prefers-reduced-motion: reduce) {
    [class$="__card"]:hover,
    [class*="__card"]:hover,
    [class$="__cta"]:hover,
    [class*="__cta"]:not([class*="__cta-"]):hover,
    [class*="__btn"]:not([class*="__btn-"]):hover,
    [class*="__button"]:hover,
    [class*="__tile"]:hover,
    [class*="__link"]:hover {
        transform: none !important;
        filter: none !important;
    }
    [class*="slider"],
    [class*="carousel"],
    [class*="marquee"],
    [class*="__hero"]:not([class*="__hero-"]) img,
    [class*="__kv"] img {
        animation: none !important;
        transition: none !important;
    }
}

/* prefers-contrast: more（境界線太さ / underline 強制）--------------------- */
@media (prefers-contrast: more) {
    [class*="__card"],
    [class*="__box"],
    [class*="__panel"],
    [class*="__table"] th,
    [class*="__table"] td {
        border-width: 2px;
    }
    a {
        text-decoration: underline;
    }
}

/* safe-area（ページ固有の fixed CTA / floating banner） -------------------- */
[class*="__floating"],
[class*="__fixed-cta"],
[class*="__sticky-cta"] {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* タッチ最適化（カード・CTA・タブ）----------------------------------------- */
[class*="__card"],
[class*="__cta"]:not([class*="__cta-"]),
[class*="__tab"],
[class*="__btn"]:not([class*="__btn-"]),
[class*="__button"] {
    -webkit-tap-highlight-color: transparent;
}

/* print ------------------------------------------------------------------- */
@media print {
    [class*="__hero"]:not([class*="__hero-"]) img,
    [class*="__kv"] img,
    [class*="__mv"] img,
    [class*="__hero-visual"],
    [class*="__cta"]:not([class*="__cta-"]),
    [class*="__sns"],
    [class*="__share"],
    [class*="__floating"],
    [class*="__fixed"],
    [class*="__banner"],
    [class*="__drawer"],
    [class*="breadcrumb"] {
        display: none !important;
    }
    body,
    section,
    main,
    article,
    [class*="__section"],
    [class*="__card"] {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    section,
    [class*="__section"],
    [class*="__card"],
    [class*="__box"],
    [class*="__panel"],
    h1, h2, h3, h4 {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    h1, h2, h3, h4 {
        color: #000 !important;
    }
}

/* ========================================================================
   2026-09-25 Figma audit v4 (fresh visual audit)
   PC1440 headless screenshot × current site 突き合わせで検出した残差を狩る。
   共通残差パターン10種を全ページ横断で当てる（BEM維持・!important最終手段のみ）
   ======================================================================== */

/* P1: 縦マーキー(YOKOHAMA... CHALLENGE SPIRITS) — viewport端ギリギリ回避 */
.page-for-graduate [class*="__marquee-vertical"],
.page-for-graduate [class*="__side-marquee"],
.page-for-graduate [class*="__vertical-text"],
.page-for-graduate [class*="__side-en"] {
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}
@media (max-width: 1439px) {
    .page-for-graduate [class*="__marquee-vertical"],
    .page-for-graduate [class*="__side-marquee"],
    .page-for-graduate [class*="__vertical-text"],
    .page-for-graduate [class*="__side-en"] {
        opacity: 0.55;
    }
}
@media (max-width: 1023px) {
    .page-for-graduate [class*="__marquee-vertical"],
    .page-for-graduate [class*="__side-marquee"],
    .page-for-graduate [class*="__vertical-text"],
    .page-for-graduate [class*="__side-en"] {
        display: none;
    }
}

/* P2: セクションENワードマーク(OVERVIEW/FEATURES/METHODS 等) — セクションBOX天面と衝突しないよう z-index / opacity 調整 */
.page-for-graduate [class*="__section-en"],
.page-for-graduate [class*="__section-wordmark"],
.page-for-graduate [class*="__block-en"] {
    position: relative;
    z-index: 1;
    opacity: 0.9;
    pointer-events: none;
}
.page-for-graduate [class*="__section"] > [class*="__section-en"],
.page-for-graduate [class*="__section"] > [class*="__block-en"] {
    margin-bottom: -0.35em;
}

/* P3: カードシャドウ — 白カードにほんのり浮きを付ける(Figma実測 offsetY=2 blur=8 alpha=0.06 基準) */
.page-for-graduate [class*="__card"]:not([class*="__card-"]):not([class*="-card"]),
.page-for-graduate [class*="__tile"]:not([class*="__tile-"]),
.page-for-graduate [class*="__panel"]:not([class*="__panel-"]) {
    box-shadow: 0 2px 8px rgba(15, 30, 60, 0.06);
}
.page-for-graduate a[class*="__card"]:hover,
.page-for-graduate a[class*="__tile"]:hover {
    box-shadow: 0 12px 24px rgba(15, 30, 60, 0.10);
}

/* P4: 黄色系ボタン(WCAG AA用) — 黄背景時は文字を必ず暗色に */
.page-for-graduate [class*="__btn"]:not([class*="__btn-"])[style*="FFEF6B"],
.page-for-graduate [class*="__btn"]:not([class*="__btn-"])[style*="FFE576"],
.page-for-graduate [class*="__btn--yellow"],
.page-for-graduate [class*="__cta--yellow"] {
    color: var(--technoauto-text-primary, #000) !important;
}
/* 汎用: bg-accent 系クラス */
.page-for-graduate [class*="--accent"] > [class*="__btn"]:not([class*="__btn-"]),
.page-for-graduate [class*="bg-yellow"] [class*="__btn"]:not([class*="__btn-"]) {
    color: var(--technoauto-text-primary, #000);
}

/* P5: hero写真スロットが空の時のフォールバック背景(グラデ) */
.page-for-graduate [class*="__hero-image"]:empty,
.page-for-graduate [class*="__hero-photo"]:empty,
.page-for-graduate [class*="__hero-kv"]:empty {
    background: linear-gradient(135deg, var(--technoauto-bg-subtle, #EDF9FF) 0%, var(--technoauto-bg-section, #D7F2FF) 100%);
    min-height: 320px;
    border-radius: var(--technoauto-radius-lg, 16px);
}

/* P6: フォームプレースホルダのコントラスト(#A1A1A1 → もう少し濃く) */
.page-for-graduate input::placeholder,
.page-for-graduate textarea::placeholder {
    color: #8A8A8A;
    opacity: 1;
}

/* P7: テーブル行 zebra (Figma淡背景交互) */
.page-for-graduate table tbody tr:nth-child(even) {
    background-color: rgba(215, 242, 255, 0.25);
}
.page-for-graduate table tbody tr:hover {
    background-color: rgba(215, 242, 255, 0.55);
}

/* P8: CTA矢印アイコン(inline-block由来の縦位置ズレ) — 矢印は inline-flex 化 */
.page-for-graduate [class*="__btn"]:not([class*="__btn-"]),
.page-for-graduate [class*="__cta"]:not([class*="__cta-"]) a,
.page-for-graduate a[class*="__cta"]:not([class*="__cta-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}
.page-for-graduate [class*="__btn-arrow"],
.page-for-graduate [class*="__cta-arrow"],
.page-for-graduate [class*="__link-arrow"] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

/* P9: パンくずリンク visited を意識(色ズレ回避) */
.page-for-graduate [class*="__breadcrumb"] a,
.page-for-graduate [class*="__breadcrumb"] a:visited {
    color: var(--technoauto-text-inverse, #fff);
    text-decoration: none;
}
.page-for-graduate [class*="__breadcrumb"] a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* P10: 数字バッジ(01/02/03) — サイズ・行高を正規化(丸型を保証) */
.page-for-graduate [class*="__num-badge"],
.page-for-graduate [class*="__number-badge"],
.page-for-graduate [class*="__step-num"],
.page-for-graduate [class*="__index-num"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* ======================================================================== */

/* ==========================================================================
   2026-09-25 component variants v5C
   Figma design system 準拠のボタン / カード / chip 共通 variant 適用
   - tokens.css の --btn-* / --card-* / --chip-* 変数を参照
   - primary/secondary/tertiary/danger の4系統
   - hover/focus 状態も統一 (0.2s ease, filter brightness(1.06))
   - 既存の page-*__oc-banner-pill 等ページ固有 variant は温存
   - BEM 維持・!important 最終手段
   ========================================================================== */

/* --- Button primary (青系 CTA) ------------------------------------------- */
[class*="__btn--primary"],
[class*="__cta--primary"],
[class*="__link--primary"] {
    background-color: var(--btn-primary-bg, #439fff);
    color: var(--btn-primary-color, #fff);
    border: 1px solid var(--btn-primary-border, transparent);
    border-radius: var(--btn-radius, 999px);
    padding: var(--btn-padding, 18px 36px);
    font-size: var(--btn-font-size, 14px);
    font-weight: var(--btn-font-weight, 700);
    transition: var(--btn-transition, background-color .2s ease, filter .2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[class*="__btn--primary"]:hover,
[class*="__cta--primary"]:hover,
[class*="__link--primary"]:hover,
[class*="__btn--primary"]:focus-visible,
[class*="__cta--primary"]:focus-visible,
[class*="__link--primary"]:focus-visible {
    filter: var(--btn-hover-filter, brightness(1.06));
}

/* --- Button secondary (黄系 / pill) -------------------------------------- */
[class*="__btn--secondary"],
[class*="__cta--secondary"],
[class*="__pill"]:not([class*="oc-banner"]):not([class*="--primary"]):not([class*="--tertiary"]):not([class*="--danger"]) {
    background-color: var(--btn-secondary-bg, #ffdd00);
    color: var(--btn-secondary-color, #24222b);
    border: 1px solid var(--btn-secondary-border, transparent);
    border-radius: var(--btn-radius, 999px);
    padding: var(--btn-padding, 18px 36px);
    font-size: var(--btn-font-size, 14px);
    font-weight: var(--btn-font-weight, 700);
    transition: var(--btn-transition, background-color .2s ease, filter .2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[class*="__btn--secondary"]:hover,
[class*="__cta--secondary"]:hover,
[class*="__pill"]:not([class*="oc-banner"]):not([class*="--primary"]):not([class*="--tertiary"]):not([class*="--danger"]):hover {
    filter: var(--btn-hover-filter, brightness(1.06));
}

/* --- Button tertiary (アウトライン) -------------------------------------- */
[class*="__btn--tertiary"],
[class*="__cta--tertiary"],
[class*="__btn--outline"],
[class*="__cta--outline"] {
    background-color: var(--btn-tertiary-bg, transparent);
    color: var(--btn-tertiary-color, #24222b);
    border: 1px solid var(--btn-tertiary-border, #24222b);
    border-radius: var(--btn-radius, 999px);
    padding: var(--btn-padding, 18px 36px);
    font-size: var(--btn-font-size, 14px);
    font-weight: var(--btn-font-weight, 700);
    transition: var(--btn-transition, background-color .2s ease, filter .2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[class*="__btn--tertiary"]:hover,
[class*="__cta--tertiary"]:hover,
[class*="__btn--outline"]:hover,
[class*="__cta--outline"]:hover {
    background-color: var(--btn-tertiary-color, #24222b);
    color: #fff;
}

/* --- Button danger ------------------------------------------------------- */
[class*="__btn--danger"],
[class*="__cta--danger"] {
    background-color: var(--btn-danger-bg, #d63b3b);
    color: var(--btn-danger-color, #fff);
    border: 1px solid var(--btn-danger-border, transparent);
    border-radius: var(--btn-radius, 999px);
    padding: var(--btn-padding, 18px 36px);
    font-size: var(--btn-font-size, 14px);
    font-weight: var(--btn-font-weight, 700);
    transition: var(--btn-transition, background-color .2s ease, filter .2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[class*="__btn--danger"]:hover,
[class*="__cta--danger"]:hover {
    filter: var(--btn-hover-filter, brightness(1.06));
}

/* --- Card 統一 (padding/radius/border/shadow) --------------------------- */
[class*="__card"]:not([class*="__card-"]) {
    border-radius: var(--card-radius, 16px);
    padding: var(--card-padding, 32px);
    background: var(--card-bg, #fff);
    border: var(--card-border, 1px solid #39364e);
    box-shadow: var(--card-shadow, 0 2px 8px rgba(15, 30, 60, .06));
    transition: box-shadow .2s ease, transform .2s ease;
}
[class*="__card"]:not([class*="__card-"]):hover {
    box-shadow: var(--card-shadow-hover, 0 6px 20px rgba(15, 30, 60, .10));
}

/* --- Chip 統一 ---------------------------------------------------------- */
[class*="__chip"]:not([class*="__chip-list"]):not([class*="__chip-wrap"]) {
    border-radius: var(--chip-radius, 6px);
    padding: var(--chip-padding, 6px 12px);
    font-size: var(--chip-font-size, 12px);
    background: var(--chip-bg, #edf9ff);
    color: var(--chip-color, #24222b);
    border: var(--chip-border, 1px solid #e5e5e5);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* --- SP breakpoint ------------------------------------------------------ */
@media (max-width: 768px) {
    [class*="__btn--primary"],
    [class*="__btn--secondary"],
    [class*="__btn--tertiary"],
    [class*="__btn--danger"],
    [class*="__cta--primary"],
    [class*="__cta--secondary"],
    [class*="__cta--tertiary"],
    [class*="__cta--danger"],
    [class*="__link--primary"],
    [class*="__btn--outline"],
    [class*="__cta--outline"] {
        padding: var(--btn-padding-sp, 14px 24px);
        font-size: 13px;
    }
    [class*="__card"]:not([class*="__card-"]) {
        padding: var(--card-padding-sp, 20px);
    }
}

/* ============================================================
   2026-09-25 hero KV precision v6 (Figma 厳密照合)
   - hero-kv object-position を Figma 実測クロップに寄せる
   - hero-wordmark shadow/front offset 再確認 (Figma実測: shadow +3px right / +3px down)
   - hero-illust オーバーレイ用ユーティリティを追加
   ============================================================ */
.page-for-graduate [class*="__hero-kv"] {
    aspect-ratio: 600 / 371;
    position: relative;
    isolation: isolate;
}
.page-for-graduate [class*="__hero-kv"] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;  /* Figma実測: 車のフロント / 顔をやや上寄せ */
    display: block;
}
.page-for-graduate [class*="__hero-wordmark"] {
    position: relative;
    display: inline-flex;
    line-height: 1;
}
.page-for-graduate [class*="__hero-wordmark-shadow"] {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.page-for-graduate [class*="__hero-wordmark-front"] {
    position: relative;
    z-index: 1;
}
.page-for-graduate__hero-illust {
    position: absolute;
    right: clamp(8px, 3%, 24px);
    bottom: -20px;              /* Figma実測: hero-kv 下辺から約30px はみ出す */
    width: clamp(140px, 48%, 305px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 12px rgba(57, 55, 78, 0.12));
}
@media screen and (max-width: 768px) {
    .page-for-graduate__hero-illust {
        width: clamp(96px, 40%, 160px);
        right: 12px;
        bottom: -14px;
    }
}
/* v6 end */

/* ==========================================================================
   2026-09-25 dark section v7
   （page-for-graduate：現状 CTA はブランドブルー（#439fff）で dark ではない。
     Figma で dark 化された場合は `.page-for-graduate__section--cta` に
     `is-dark-section` を付けるだけで tokens.css v7 の共通 rule が発火する。）
   ========================================================================== */
.page-for-graduate__section--cta.is-dark-section .page-for-graduate__section-inner {
    background: var(--dark-section-bg, #24222b);
    color: var(--dark-section-color, #fff);
}
.page-for-graduate__section--cta.is-dark-section .page-for-graduate__section-heading-jp,
.page-for-graduate__section--cta.is-dark-section .page-for-graduate__section-heading-lead {
    color: var(--dark-section-color, #fff);
}
/* v7 end */

/* 2026-09-25 heading hierarchy v8 */
/* body/lead max-width と 見出し階層は layout.css v8 の共通ルールが担当
   (h1-h6:not([class]) と [class*="__section"] p:not([class]) 等で吸収)。
   本ファイル固有の BEM 見出し (.page-for-graduate__title 等) は v1〜v7 の定義を尊重し上書きしない。 */
/* v8 end (page-for-graduate) */

/* ==========================================================================
   2026-09-25 table/list polish v8 (page-for-graduate)
   本ページは list/table/dl BEM 実装少。共通トークンだけ効かせる。
   ========================================================================== */
/* placeholder — 共通は layout.css v8 の table/ul/ol/dl 下地が担当 */
/* v8 end (page-for-graduate) — table/list polish */

/* ==========================================================================
   2026-09-25 spacing rhythm v9 (page-for-graduate)
   ==========================================================================
   - tokens.css の --section-py-pc / --section-gap-pc / --heading-mb-pc を採用。
   - 個別セクションで既存 v1〜v8 の specific 定義（padding-top など）は温存し、
     未定義のセクションだけ default fallback として共通変数を当てる。
   - !important は使わず、詳細度は .page-for-graduate__section 相当で v1〜v8 と同列。
   ========================================================================== */
.page-for-graduate__section {
    padding-top: var(--section-py-pc, 110px);
    padding-bottom: var(--section-py-pc, 110px);
}
.page-for-graduate__section--with-lead,
.page-for-graduate__section--lead,
.page-for-graduate__section:has(> .page-for-graduate__section-heading-lead),
.page-for-graduate__section:has(> .section-heading-lead) {
    padding-top: var(--section-py-pc-with-lead, 150px);
    padding-bottom: var(--section-py-pc-with-lead, 150px);
}
.page-for-graduate__section + .page-for-graduate__section {
    margin-top: var(--section-gap-pc, 60px);
}
.page-for-graduate__section-heading,
.page-for-graduate__section-heading-top,
.page-for-graduate__section-heading-lead {
    margin-bottom: var(--heading-mb-pc, 32px);
}
@media screen and (max-width: 768px) {
    .page-for-graduate__section {
        padding-top: var(--section-py-sp, 60px);
        padding-bottom: var(--section-py-sp, 60px);
    }
    .page-for-graduate__section--with-lead,
    .page-for-graduate__section--lead,
    .page-for-graduate__section:has(> .page-for-graduate__section-heading-lead),
    .page-for-graduate__section:has(> .section-heading-lead) {
        padding-top: var(--section-py-sp-with-lead, 80px);
        padding-bottom: var(--section-py-sp-with-lead, 80px);
    }
    .page-for-graduate__section + .page-for-graduate__section {
        margin-top: var(--section-gap-sp, 40px);
    }
    .page-for-graduate__section-heading,
    .page-for-graduate__section-heading-top,
    .page-for-graduate__section-heading-lead {
        margin-bottom: var(--heading-mb-sp, 20px);
    }
}
/* v9 end (page-for-graduate) — spacing rhythm */

/* ==========================================================================
   2026-09-25 wordmark precision v9
   ==========================================================================
   Figma REST 実測に基づく hero-wordmark 厳密調整（1px 単位）。
   tokens.css の --wordmark-* 変数を参照。既存 v1〜v8 の rule は破壊しない。
   BEM は維持しつつ、属性セレクタで各ページの `*__hero-wordmark`
   `*__hero-wordmark-shadow` `*__hero-wordmark-front` を横断ピック。
   ========================================================================== */
[class*="__hero-wordmark"] {
    position: relative;
    display: inline-flex;
    font-family: var(--wordmark-font-family);
    font-style: var(--wordmark-font-style);
    font-weight: var(--wordmark-font-weight);
    font-stretch: var(--wordmark-font-stretch);
    line-height: var(--wordmark-line-height);
    letter-spacing: var(--wordmark-letter-spacing);
    white-space: nowrap;
    isolation: isolate;
}
[class*="__hero-wordmark-shadow"] {
    position: absolute;
    top:  var(--wordmark-shadow-offset-y);
    left: var(--wordmark-shadow-offset-x);
    z-index: 0;
    color: var(--wordmark-shadow-color);
    -webkit-text-stroke: var(--wordmark-shadow-stroke-w) var(--wordmark-shadow-stroke-color);
            text-stroke: var(--wordmark-shadow-stroke-w) var(--wordmark-shadow-stroke-color);
    pointer-events: none;
    user-select: none;
}
[class*="__hero-wordmark-front"] {
    position: relative;
    z-index: 1;
    color: var(--wordmark-front-color);
    -webkit-text-stroke: var(--wordmark-front-stroke-w) var(--wordmark-front-stroke-color);
            text-stroke: var(--wordmark-front-stroke-w) var(--wordmark-front-stroke-color);
}

/* section-heading wordmark（KV外・白背景セクション）は前面を濃色に反転 */
[class*="__section-heading"] [class*="__wordmark-front"],
.section-heading__wordmark-front {
    color: var(--wordmark-front-color-on-light);
}

/* dark-section 上の wordmark は前面を白に戻す（v7 と整合） */
.is-dark-section [class*="__wordmark-front"],
[class*="__section--entry"] [class*="__wordmark-front"],
[class*="__section--dark"] [class*="__wordmark-front"],
[class*="__section--invite"] [class*="__wordmark-front"] {
    color: var(--wordmark-front-color-dark);
}

/* SP breakpoint: offset を縮小・shadow を維持（display:none にはしない） */
@media screen and (max-width: 768px) {
    [class*="__hero-wordmark-shadow"] {
        top:  var(--wordmark-shadow-offset-y-sp);
        left: var(--wordmark-shadow-offset-x-sp);
    }
}
/* v9 end — wordmark precision */

/* 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 effects precision v10 (page-for-graduate)
   ==========================================================================
   目的: Figma effects (drop-shadow / wordmark hard-shadow) と CSS gradient を
         tokens.css v10 の共通変数で参照し、ページ内効果を統一する。
   参照: tokens.css v10 (--shadow-xs..xl / --shadow-wordmark-* / --blur-* / --grad-*)
   BEM は破壊しない・v1〜v9 定義は温存・末尾レイヤで最小限に上書き。
   ========================================================================== */

/* [E1] section-heading__wordmark-shadow: Figma 実測 offset を token 参照へ寄せる */
.page-for-graduate__section .section-heading__wordmark-shadow,
.page-for-graduate .section-heading__wordmark-shadow {
    /* Figma pattern C: 8/8/0 border-base の hard-shadow (背後シフト方式) */
    filter: none;
}

/* [E2] card 系: v10 標準 shadow scale へ寄せる (BEM element を横断ピック) */
.page-for-graduate [class*="__card"],
.page-for-graduate [class*="__panel"]:not([class*="__panel-title"]),
.page-for-graduate [class*="__box"]:not([class*="__box-title"]) {
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.page-for-graduate [class*="__card"]:hover,
.page-for-graduate [class*="__panel"]:not([class*="__panel-title"]):hover,
.page-for-graduate [class*="__box"]:not([class*="__box-title"]):hover {
    box-shadow: var(--shadow-md);
}

/* [E3] oc-banner / cta-banner / top-banner: brand-soft gradient を token へ */
.page-for-graduate [class*="__oc-banner"],
.page-for-graduate [class*="__cta-banner"],
.page-for-graduate [class*="__top-banner"] {
    background-image: var(--grad-brand-soft);
    background-repeat: no-repeat;
    background-size: cover;
}

/* [E4] tag/pill/badge の subtle shadow (Figma pattern E) */
.page-for-graduate [class*="__tag"]:not([class*="__tag-"]),
.page-for-graduate [class*="__badge"]:not([class*="__badge-"]),
.page-for-graduate [class*="__pill"]:not([class*="__pill-"]) {
    box-shadow: var(--shadow-xs);
}

/* [E5] SP: shadow / blur を軽量化 (tokens.css v10 の SP override と併用) */
@media screen and (max-width: 768px) {
    .page-for-graduate [class*="__card"],
    .page-for-graduate [class*="__panel"]:not([class*="__panel-title"]),
    .page-for-graduate [class*="__box"]:not([class*="__box-title"]) {
        box-shadow: var(--shadow-xs);
    }
    .page-for-graduate [class*="__card"]:hover,
    .page-for-graduate [class*="__panel"]:not([class*="__panel-title"]):hover,
    .page-for-graduate [class*="__box"]:not([class*="__box-title"]):hover {
        box-shadow: var(--shadow-sm);
    }
}

/* [E6] prefers-reduced-motion: shadow transition を止める (transform は v4 で対応済) */
@media (prefers-reduced-motion: reduce) {
    .page-for-graduate [class*="__card"],
    .page-for-graduate [class*="__panel"],
    .page-for-graduate [class*="__box"] {
        transition: none !important;
    }
}
/* v10 end (page-for-graduate) — effects precision */

/* =========================================================================
 * 2026-09-25 critical fix v12 (B-class)
 * ------------------------------------------------------------------------- */
/* [B2] SP: hero wordmark クリップ事故を clamp で強制解決 */
@media (max-width: 767px) {
    .page-for-graduate__hero-wordmark,
    .page-for-graduate__hero-wordmark-shadow,
    .page-for-graduate__hero-wordmark-front {
        font-size: clamp(24px, 8vw, 40px) !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        overflow: visible;
    }
}
/* v12 end (page-for-graduate) — B-class wordmark clamp */

/* ==========================================================================
   2026-09-26 Figma component sync v13
   tokens.css の --*-figma 実測値を BEM 属性セレクタで統一適用。
   既存 v1〜v12 の変数指定は保持し、Figma 実測を fallback 順で優先。
   ========================================================================== */
[class*="__btn--primary"],
[class*="__button--primary"] {
    background-color: var(--btn-tel-bg-figma, var(--btn-primary-bg, #439fff));
    color: var(--btn-tel-color-figma, var(--btn-primary-color, #ffffff));
    border: var(--btn-tel-border-w-figma, 1px) solid var(--btn-tel-border-figma, var(--btn-primary-border, #39364e));
    border-radius: var(--btn-primary-radius-figma, var(--btn-radius, 999px));
    padding: var(--btn-primary-padding-pc-figma, var(--btn-padding, 18px 20px));
    font-size: var(--btn-primary-font-size-pc-figma, var(--btn-font-size, 20px));
    line-height: var(--btn-primary-line-pc-figma, 20px);
    font-weight: var(--btn-primary-weight-figma, var(--btn-font-weight, 700));
}
[class*="__btn--outline"],
[class*="__btn--tertiary"] {
    background-color: var(--btn-outline-bg-figma, transparent);
    color: var(--btn-outline-color-figma, #000000);
    border: var(--btn-outline-border-w-figma, 1px) solid var(--btn-outline-border-figma, #39364e);
    border-radius: var(--btn-primary-radius-figma, 999px);
    padding: var(--btn-outline-padding-figma, 0 8px);
    font-size: var(--btn-outline-font-size-figma, 15px);
    font-weight: var(--btn-primary-weight-figma, 700);
}
[class*="__btn--secondary"],
[class*="__btn--yellow"] {
    /* v5C の黄色系 secondary は残しつつ、Figma Label Pill (#ffef6b) の色調に統一 */
    background-color: var(--pill-bg-figma, var(--btn-secondary-bg, #ffef6b));
    color: var(--btn-secondary-color, #24222b);
    border: var(--pill-border-w-figma, 1px) solid var(--pill-border-figma, #39364e);
    border-radius: var(--btn-primary-radius-figma, 999px);
    padding: var(--btn-primary-padding-pc-figma, 18px 20px);
    font-weight: var(--btn-primary-weight-figma, 700);
}
[class*="__pill"]:not([class*="__pill-"]) {
    background-color: var(--pill-bg-figma, #ffef6b);
    color: var(--pill-color-figma, #000000);
    border: var(--pill-border-w-figma, 1px) solid var(--pill-border-figma, #39364e);
    border-radius: var(--pill-radius-figma, 999px);
    padding: var(--pill-padding-figma, 10px);
    font-size: var(--pill-font-size-figma, 15px);
    line-height: var(--pill-line-figma, 22.5px);
    font-weight: var(--pill-weight-figma, 500);
}
[class*="__badge"]:not([class*="__badge-"]) {
    background-color: var(--badge-bg-figma, #ffffff);
    color: var(--badge-color-figma, #439fff);
    border: var(--badge-border-w-figma, 1px) solid var(--badge-border-figma, #39364e);
    border-radius: var(--badge-radius-figma, 999px);
    padding: var(--badge-padding-figma, 5px 12px);
    font-size: var(--badge-font-size-figma, 11px);
    line-height: var(--badge-line-figma, 13.2px);
    font-weight: var(--badge-weight-figma, 700);
}
[class*="__tag"]:not([class*="__tag-"]) {
    background-color: var(--tag-bg-figma, #ffffff);
    color: var(--tag-color-figma, #000000);
    border: var(--tag-border-w-figma, 1px) solid var(--tag-border-figma, #e5e5e5);
    border-radius: var(--tag-radius-figma, 999px);
    padding: var(--tag-padding-figma, 0 10px);
    font-size: var(--tag-font-size-figma, 13px);
    line-height: var(--tag-line-figma, 13px);
    font-weight: var(--tag-weight-figma, 400);
}
[class*="__chip"]:not([class*="__chip-list"]):not([class*="__chip-wrap"]):not([class*="__chips"]) {
    background-color: var(--chip-bg-figma, transparent);
    color: var(--chip-color-figma, #000000);
    border: var(--chip-border-w-figma, 1px) solid var(--chip-border-figma, #e5e5e5);
    border-radius: var(--chip-radius-figma, 41px);
    padding: var(--chip-padding-figma, 5px 12px);
    font-size: var(--chip-font-size-figma, 16px);
    line-height: var(--chip-line-figma, 28.8px);
    font-weight: var(--chip-weight-figma, 400);
}

/* SP breakpoint */
@media screen and (max-width: 768px) {
    [class*="__btn--primary"],
    [class*="__button--primary"],
    [class*="__btn--secondary"],
    [class*="__btn--yellow"] {
        padding: var(--btn-primary-padding-sp-figma, 14px 20px);
        font-size: var(--btn-primary-font-size-figma, 16px);
        line-height: var(--btn-primary-line-figma, 16px);
    }
}
/* v13 end (page) — Figma component sync */

/* ==========================================================================
   2026-09-26 color/shadow precision v20
   Figma REST 実測に厳密統一 (WjIzjgeeWIPC8D3fszoCA3)
   - Hero EN 見出し drift 色 (#398BE2 / #388BE1) を Figma authoritative
     bg/brand (#439FFF) に統一
   - カード border-color を Figma line/lightest (#E5E5E5) に再確認
   - card underline shadow を tokens v20 (#39364E) 参照に統一
   BEM 維持・v1〜v19 破壊しない
   ========================================================================== */
.page-for-graduate__hero-en {
    color: var(--technoauto-brand-primary, #439FFF);
}
/* v20 end (page-for-graduate) — color/shadow precision */

/* ==========================================================================
   2026-09-26 attribute selector fix v23
   v13の [class*="__btn"]:not([class*="__btn-"]) / [class*="__pill"]:not([class*="__pill-"]) / [class*="__badge"]:not([class*="__badge-"]) / [class*="__tag"]:not([class*="__tag-"]) /
   [class*="__cta"]:not([class*="__cta-"]) などの広域 attribute selector が、__btn-arrow / __badge-icon /
   __tag-list / __pill-label 等の "子BEM" 要素まで巻き添えで
   bg / border / border-radius / padding / font-size / line-height / font-weight を
   適用してしまうバグを一括打消し。
   card 修正 (v5C) と同じ思想で、子BEM 側から v13 selector を逆襲する形で反転無効化する。
   site-header 系（site-header__cta-icon / site-header__cta-label 等）は白ロック保護のため
   全 selector で :not([class*="site-header"]) 除外を必須にしている。
   影響ページ範囲: 全 page-*.css (49ファイル・v13ブロック末尾に共通適用)
   ========================================================================== */
[class*="__btn-arrow"]:not([class*="site-header"]),
[class*="__btn-icon"]:not([class*="site-header"]),
[class*="__btn-label"]:not([class*="site-header"]),
[class*="__cta-arrow"]:not([class*="site-header"]),
[class*="__cta-icon"]:not([class*="site-header"]),
[class*="__cta-label"]:not([class*="site-header"]),
[class*="__cta-title"]:not([class*="site-header"]),
[class*="__cta-desc"]:not([class*="site-header"]),
[class*="__cta-text"]:not([class*="site-header"]),
[class*="__cta-btn"]:not([class*="site-header"]),
[class*="__pill-arrow"]:not([class*="site-header"]),
[class*="__pill-icon"]:not([class*="site-header"]),
[class*="__pill-label"]:not([class*="site-header"]),
[class*="__badge-icon"]:not([class*="site-header"]),
[class*="__badge-text"]:not([class*="site-header"]),
[class*="__badge-label"]:not([class*="site-header"]),
[class*="__tag-list"]:not([class*="site-header"]),
[class*="__tag-item"]:not([class*="site-header"]),
[class*="__tag-icon"]:not([class*="site-header"]),
[class*="__tag-label"]:not([class*="site-header"]),
[class*="__tag-wrap"]:not([class*="site-header"]),
[class*="__chip-icon"]:not([class*="site-header"]),
[class*="__chip-arrow"]:not([class*="site-header"]),
[class*="__chip-label"]:not([class*="site-header"]) {
    background-color: initial;
    color: inherit;
    border: 0;
    border-radius: 0;
    padding: initial;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}
/* v23 end (page) — attribute selector fix (site-header untouched, header white lock preserved) */

/* ==================================================================
 * 2026-10-13 Coder C: WHY セクション背景色 (Figma 準拠 アイボリー/クリーム)
 * - SUPPORT の水色と差別化
 * - c-section-box--ivory 修飾子で適用 (他ページ無影響)
 * ================================================================== */
.page-target .c-section-box.c-section-box--ivory.c-section-box--ivory {
    background: #fff8db !important; /* ソフトなアイボリー */
    border-color: #f1e2a8 !important;
}
.page-target .c-section-box--ivory.c-section-box--ivory .c-section-heading-sub__en-shadow {
    color: #f1e2a8 !important;
}
/* 中のカード (c-worry-item) は Figma 通り白ベースのまま */
.page-target .c-section-box--ivory.c-section-box--ivory .c-worry-item {
    background: #fff;
}
/* v24 end (page) — for-graduate WHY ivory background */

/* ==================================================================
 * 2026-10-13 Coder Z: WHY 3カードは 3 列固定 + SUPPORT ナンバリング除去
 * - custom.css が .page-target__worries を repeat(4,1fr) に上書きしているため、
 *   このページでは明示的に 3 列に上書きする (SP は 1 列)。
 * - .page-target__features--plain は SUPPORT (4 カード) 用で番号バッジを隠す。
 * ================================================================== */
.page-target .page-target__worries.page-target__worries {
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
    .page-target .page-target__worries.page-target__worries {
        grid-template-columns: 1fr;
    }
}
/* SUPPORT カードは番号バッジ非表示 (緑チェックのみ) — Figma 準拠 */
.page-target .page-target__features--plain .page-target__feature-no { display: none; }
/* v25 end (page) — Coder Z: 3-col worries + plain features */


/* ==========================================================================
   2026-10-19 Figma 準拠レイアウト調整 (35_ターゲット_既卒社会人 pc/sp)
   ※ WHY の番号バッジは 2026-10-13 佐藤様指摘で非表示のまま (Figma には有り)
   ========================================================================== */
.page-target { gap: 30px; }

/* WHY: 箱 #fff7ce + 濃色枠 / 英字影 #ffe576 */
.page-target .c-section-box.c-section-box--ivory.c-section-box--ivory {
    background: #fff7ce !important;
    border-color: var(--ytc-border-strong, #39364e) !important;
}
.page-target .c-section-box--ivory.c-section-box--ivory .c-section-heading-sub__en-shadow {
    color: #ffe576 !important;
}
.page-target .page-target__worries.page-target__worries { gap: 20px; }
.page-target .page-target__worries > .c-worry-item.c-worry-item {
    gap: 10px;
    padding: 20px;
    justify-content: center;
}
.page-target .page-target__worries .c-worry-item__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.5;
}
.page-target .page-target__worries .c-worry-item:has(.c-worry-item__title) .c-worry-item__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* SUPPORT: Check Item / PC = pad 16/20, gap 14, 20px 太字 2 行 */
.page-target .page-target__features--check { gap: 20px; }
.page-target .page-target__features--check > .c-text-card.c-text-card {
    gap: 14px;
    padding: 16px 20px;
}
.page-target .page-target__features--check .c-text-card__title.c-text-card__title {
    font-size: 20px;
    line-height: 1.6;
    white-space: pre-line;
}

/* TESTIMONIAL: Voice Card / PC = 写真 100px 左 + 右に 名前(下線) → コメント */
.page-target .page-target__voice-grid { gap: 20px; }
.page-target .page-target__voice-grid > .c-interview-card-sub.c-interview-card-sub {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    row-gap: 10px;
    align-items: start;
    padding: 20px;
}
.page-target .page-target__voice-grid .c-interview-card-sub__profile.c-interview-card-sub__profile { display: contents; }
.page-target .page-target__voice-grid .c-interview-card-sub__photo.c-interview-card-sub__photo {
    grid-row: 1 / 3;
    width: 100px;
    height: 100px;
}
.page-target .page-target__voice-grid .c-interview-card-sub__meta.c-interview-card-sub__meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 15px;
}
.page-target .page-target__voice-grid .c-interview-card-sub__name.c-interview-card-sub__name {
    font-size: 20px;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
}
.page-target .page-target__voice-grid .c-interview-card-sub__quote.c-interview-card-sub__quote {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .page-target { gap: 0; }
    .page-target .c-section-box.c-section-box--ivory.c-section-box--ivory {
        margin-top: 30px;
        border-radius: 10px;
    }
    /* WHY: 横長カード (タイトル → 説明 左寄せ) */
    .page-target .page-target__worries.page-target__worries { gap: 20px; }
    .page-target .page-target__worries > .c-worry-item.c-worry-item {
        align-items: flex-start;
        gap: 6px;
        height: auto;
        min-height: 0;
        padding: 16px 16px 16px 14px;
        border-radius: 5px;
    }
    .page-target .page-target__worries .c-worry-item__title,
    .page-target .page-target__worries .c-worry-item:has(.c-worry-item__title) .c-worry-item__text {
        text-align: left;
    }
    .page-target .page-target__worries .c-worry-item__title { font-size: 20px; }
    .page-target .page-target__worries .c-worry-item:has(.c-worry-item__title) .c-worry-item__text { font-size: 14px; }
    /* SUPPORT: チェック左 + テキスト右 (1 行) */
    .page-target .page-target__features--check { gap: 20px; }
    .page-target .page-target__features--check > .c-text-card.c-text-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 5px;
        text-align: left;
    }
    .page-target .page-target__features--check .c-text-card__title.c-text-card__title {
        font-size: 16px;
        white-space: normal;
        text-align: left;
    }
    /* TESTIMONIAL: 写真 72px + 名前、コメントは下に全幅 */
    .page-target .c-section-box.page-target__voice { border-radius: 10px; }
    .page-target .page-target__voice-grid > .c-interview-card-sub.c-interview-card-sub {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 14px;
        align-items: center;
        padding: 18px;
        border-radius: 5px;
    }
    .page-target .page-target__voice-grid .c-interview-card-sub__photo.c-interview-card-sub__photo {
        grid-row: 1;
        width: 72px;
        height: 72px;
    }
    .page-target .page-target__voice-grid .c-interview-card-sub__meta.c-interview-card-sub__meta {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .page-target .page-target__voice-grid .c-interview-card-sub__name.c-interview-card-sub__name { font-size: 15px; }
    .page-target .page-target__voice-grid .c-interview-card-sub__quote.c-interview-card-sub__quote { grid-column: 1 / -1; }
}