/**
 * 保護者の方へ ページ専用スタイル
 * BEM prefix: .page-for-parent
 */

.page-for-parent {
    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-parent *,
.page-for-parent *::before,
.page-for-parent *::after { box-sizing: border-box; }
.page-for-parent p { margin: 0; }
.page-for-parent a { color: inherit; text-decoration: none; }

/* Hero */
.page-for-parent__hero {
    display: flex;
    height: 371px;
    width: 1240px;
    max-width: 100%;
}
.page-for-parent__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-parent__hero-en {
    font-family: var(--technoauto-font-en);
    font-style: italic; font-weight: 700; font-size: 20px;
    color: #398be2; text-transform: uppercase;
}
.page-for-parent__hero-body { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.page-for-parent__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-parent__hero-wordmark-shadow { position: absolute; top: 3px; left: 3px; color: var(--technoauto-bg-brand, #439fff); }
.page-for-parent__hero-wordmark-front { position: relative; color: #fff; }
.page-for-parent__hero-title { font-weight: 700; font-size: 40px; line-height: 1.4; color: #fff; margin: 0; letter-spacing: 0; }
.page-for-parent__hero-sub { font-size: 18px; line-height: 1.8; color: #fff; letter-spacing: 0; }

.page-for-parent__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-parent__breadcrumb-item { font-size: 12px; color: #fff; }
.page-for-parent__breadcrumb-sep { font-family: inherit; font-size: 10px; color: #6bd0ff; }
.page-for-parent__breadcrumb--top { display: none; }

/* Section 共通 */
.page-for-parent__section { position: relative; width: 1240px; max-width: 100%; }
.page-for-parent__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-parent__section--concerns .page-for-parent__section-inner {
    background: var(--technoauto-bg-brand-soft, #6bd0ff);
}
.page-for-parent__section--supports .page-for-parent__section-inner {
    background: #fff;
}
.page-for-parent__section--schedule .page-for-parent__section-inner {
    background: var(--technoauto-bg-section, #d7f2ff);
}

.page-for-parent__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-parent__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-parent__section-heading-wordmark-shadow { position: absolute; top: 3px; left: 3px; color: var(--technoauto-bg-brand, #439fff); }
.page-for-parent__section-heading-wordmark-front { position: relative; color: #fff; }
.page-for-parent__section-heading-jp { font-weight: 700; font-size: 30px; line-height: 1.5; }
.page-for-parent__section-heading-lead { font-size: 15px; line-height: 1.8; text-align: center; white-space: normal; }

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

.page-for-parent__concern-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.page-for-parent__concern-title { font-size: 20px; font-weight: 700; line-height: 1.5; }
.page-for-parent__concern-desc { font-size: 14px; line-height: 1.8; color: var(--technoauto-text-secondary, #555); }

/* Supports */
.page-for-parent__supports {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.page-for-parent__support {
    background: var(--technoauto-bg-section, #d7f2ff);
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-for-parent__support-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--technoauto-bg-brand, #439fff);
}
.page-for-parent__support-desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--technoauto-text-secondary, #555);
}

/* Schedule */
.page-for-parent__schedule {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.page-for-parent__schedule-item {
    background: #fff;
    border: 1px solid var(--technoauto-border-base, #39364e);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    gap: 24px;
    align-items: center;
}
.page-for-parent__schedule-date {
    flex-shrink: 0;
    min-width: 220px;
    padding-right: 24px;
    border-right: 1px solid #d9d9d9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-for-parent__schedule-date-day {
    font-size: 17px;
    font-weight: 700;
    color: var(--technoauto-text-primary, #000);
}
.page-for-parent__schedule-date-time {
    font-size: 13px;
    color: var(--technoauto-bg-brand, #439fff);
    font-weight: 700;
}
.page-for-parent__schedule-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-for-parent__schedule-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--technoauto-text-primary, #000);
}
.page-for-parent__schedule-place {
    font-size: 13px;
    color: var(--technoauto-text-secondary, #666);
}

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

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

    .page-for-parent__hero {
        width: 100% !important; max-width: 100% !important;
        height: auto; padding: 0 16px; margin-bottom: 30px;
    }
    .page-for-parent__hero-panel {
        border: 0; border-radius: 0; background: transparent;
        padding: 40px 24px 60px; gap: 0;
        position: relative; overflow: visible; align-items: center;
    }
    .page-for-parent__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-parent__hero-en { display: none; }
    .page-for-parent__hero-body { position: relative; z-index: 2; gap: 12px; align-items: center; text-align: center; }
    .page-for-parent__hero-wordmark { font-size: 52px; }
    .page-for-parent__hero-wordmark-shadow { display: none; }
    .page-for-parent__hero-wordmark-front { position: static; color: transparent; -webkit-text-stroke: 2px #fff; }
    .page-for-parent__hero-title { font-size: 24px; text-align: center; }
    .page-for-parent__hero-sub { font-size: 13px; text-align: center; }

    .page-for-parent__section { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
    .page-for-parent__section-inner {
        border: 0; border-radius: 0;
        padding: 40px 20px; gap: 20px; margin-top: 0;
        background: transparent;
    }
    .page-for-parent__section--concerns .page-for-parent__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-parent__section--schedule .page-for-parent__section-inner {
        background: var(--technoauto-bg-section, #d7f2ff);
    }

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

    .page-for-parent__concerns { grid-template-columns: 1fr; gap: 12px; }
    .page-for-parent__concern { padding: 18px; gap: 12px; }
    .page-for-parent__concern-title { font-size: 17px; }
    .page-for-parent__concern-desc { font-size: 13px; }

    .page-for-parent__supports { grid-template-columns: 1fr; gap: 12px; }
    .page-for-parent__support { padding: 18px; }
    .page-for-parent__support-title { font-size: 17px; }
    .page-for-parent__support-desc { font-size: 13px; }

    .page-for-parent__schedule-item {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 18px;
    }
    .page-for-parent__schedule-date {
        min-width: 0;
        width: 100%;
        padding-right: 0;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid #d9d9d9;
    }
    .page-for-parent__schedule-date-day { font-size: 15px; }
    .page-for-parent__schedule-title { font-size: 15px; }
    .page-for-parent__schedule-place { font-size: 12px; }
}


/* hero-kv (Figma photo) */
.page-for-parent__hero {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 1240px;
    max-width: 100%;
    margin: 0 auto;
}
.page-for-parent__hero-panel { flex: 0 0 51.6%; min-width: 0; border-radius: 20px 0 0 20px; }
.page-for-parent__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-parent__hero-kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 768px) {
    .page-for-parent__hero {
        flex-direction: column;
        gap: 12px;
    }
    .page-for-parent__hero-panel,
    .page-for-parent__hero-kv {
        flex-basis: auto;
        width: 100%;
    }
    .page-for-parent__hero-kv {
        aspect-ratio: 16 / 10;
    }
}

/* Q&A対話型 concern + INVITE 新セクション (2026-09-25) */
.page-for-parent__concern-question,
.page-for-parent__concern-answer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
}
.page-for-parent__concern-question + .page-for-parent__concern-answer {
    border-top: 1px dashed #ddd;
    margin-top: 8px;
    padding-top: 20px;
}
.page-for-parent__concern-qmark,
.page-for-parent__concern-amark {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", "Barlow", sans-serif; /* v10 2026-09-25 Montserrat unification */
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}
.page-for-parent__concern-qmark { background: #24222b; color: #fff; }
.page-for-parent__concern-amark { background: #d63b3b; color: #fff; }
.page-for-parent__concern-question .page-for-parent__concern-text { font-weight: 700; font-size: 16px; padding-top: 6px; }
.page-for-parent__concern-answer .page-for-parent__concern-text { font-size: 14px; line-height: 1.7; padding-top: 8px; color: #333; }

.page-for-parent__section--invite { background: #24222b; color: #fff; }
.page-for-parent__section--invite .page-for-parent__section-heading-wordmark-front,
.page-for-parent__section--invite .page-for-parent__section-heading-jp,
.page-for-parent__section--invite .section-heading__wordmark-front,
.page-for-parent__section--invite .section-heading__jp-title { color: #fff; }
.page-for-parent__invite { margin-top: 32px; }
.page-for-parent__invite-card {
    background: #fff;
    color: #24222b;
    border-radius: 16px;
    padding: 32px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}
.page-for-parent__invite-date {
    font-family: "Montserrat", "Barlow", sans-serif; /* v10 2026-09-25 Montserrat unification */
    font-weight: 700;
    font-size: 28px;
    color: #d63b3b;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}
.page-for-parent__invite-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.page-for-parent__invite-desc { font-size: 14px; color: #666; margin: 0; }
.page-for-parent__invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffdd00;
    color: #24222b;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.page-for-parent__invite-btn-arrow { font-family: "Montserrat", "Barlow", sans-serif; font-weight: 700; } /* v10 2026-09-25 Montserrat unification */
@media screen and (max-width: 768px) {
    .page-for-parent__invite-card { grid-template-columns: 1fr; gap: 16px; padding: 20px 24px; text-align: center; }
    .page-for-parent__invite-date { font-size: 22px; }
    .page-for-parent__invite-btn { justify-content: center; }
    .page-for-parent__concern-qmark, .page-for-parent__concern-amark { width: 28px; height: 28px; font-size: 14px; }
}

/* 2026-09-25 Figma pixel-level fix
   Figma: 36_ターゲット_保護者_pc(953:15814) / _sp(251:2712)
   - Sections: 心配事(Q&A list)=r=20 gap=30 (no fill), サポート=#D7F2FF r=20 py=110/40 px=40 gap=30
     Class mapping: --supports(サポート)=#D7F2FF
   - SP Frame 7 (bg-filled sections) 345x r=10 py=30 px=20 gap=20
   - SP hero py=30 px=35 bg=#4EA5FF gap=-30 */
.page-for-parent__hero-panel { background-color: #4ea5ff; gap: 60px; }
.page-for-parent__section-inner { padding: 110px 40px 40px; gap: 30px; }
.page-for-parent__section--supports .page-for-parent__section-inner { background: #d7f2ff; }
@media screen and (max-width: 768px) {
    .page-for-parent__hero-panel { background-color: #4ea5ff; gap: 30px; padding: 30px 35px; }
    .page-for-parent__section-inner { padding: 30px 20px; border-radius: 10px; gap: 20px; }
    .page-for-parent__breadcrumb { background: #2f8aee; padding: 0 15px; gap: 8px; height: 40px; border-radius: 0; }
}

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



/* 2026-09-25 Figma polish v3 */
/* v3 polish: hover/focus micro-interactions・BEM維持・!important 不使用 */
.page-for-parent a,
.page-for-parent button,
.page-for-parent [class*="__cta"]:not([class*="__cta-"]),
.page-for-parent [class*="__btn"]:not([class*="__btn-"]),
.page-for-parent [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-parent [class*="__cta"]:not([class*="__cta-"]):hover,
.page-for-parent [class*="__btn"]:not([class*="__btn-"]):hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.page-for-parent [class*="__cta"]:not([class*="__cta-"]):active,
.page-for-parent [class*="__btn"]:not([class*="__btn-"]):active {
    filter: brightness(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.page-for-parent [class*="__card"]:not([class*="__card-"]),
.page-for-parent [class*="__tile"]:not([class*="__tile-"]) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-for-parent a[class*="__card"]:hover,
.page-for-parent a[class*="__tile"]:hover,
.page-for-parent [class*="__card"]:hover:not([class*="__card-"]),
.page-for-parent [class*="__tile"]:hover:not([class*="__tile-"]) {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.page-for-parent [class*="__btn-arrow"],
.page-for-parent [class*="__link-arrow"],
.page-for-parent [class*="__cta-arrow"] {
    transition: transform 0.2s ease;
}
.page-for-parent a:hover [class*="__btn-arrow"],
.page-for-parent a:hover [class*="__link-arrow"],
.page-for-parent a:hover [class*="__cta-arrow"],
.page-for-parent button:hover [class*="__btn-arrow"],
.page-for-parent button:hover [class*="__cta-arrow"] {
    transform: translateX(4px);
}
.page-for-parent a:focus-visible,
.page-for-parent button:focus-visible,
.page-for-parent [tabindex]:focus-visible {
    outline: 2px solid var(--technoauto-border-focus, #439fff);
    outline-offset: 2px;
}
.page-for-parent [class*="__hero-kv"] img,
.page-for-parent [class*="__thumb"] img,
.page-for-parent [class*="__card-photo"] img,
.page-for-parent [class*="__card-image"] img,
.page-for-parent [class*="__card-thumb"] img {
    object-fit: cover;
}
.page-for-parent [class*="__wordmark"],
.page-for-parent [class*="__section-en"],
.page-for-parent [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-parent {
    font-feature-settings: "palt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}
.page-for-parent [class*="__wordmark"],
.page-for-parent [class*="__section-en"],
.page-for-parent [class*="__hero-en"],
.page-for-parent [class*="__en"],
.page-for-parent [class*="__label-en"] {
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}
.page-for-parent [class*="__hero-title"],
.page-for-parent [class*="__page-title"],
.page-for-parent h1 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: -0.01em;
}
.page-for-parent [class*="__section-title"],
.page-for-parent [class*="__block-title"],
.page-for-parent h2 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: -0.005em;
}
.page-for-parent [class*="__card-title"],
.page-for-parent [class*="__item-title"],
.page-for-parent [class*="__sub-title"],
.page-for-parent h3, .page-for-parent h4 {
    font-feature-settings: "palt" 1, "kern" 1;
    letter-spacing: 0.02em;
}
.page-for-parent p,
.page-for-parent [class*="__desc"],
.page-for-parent [class*="__text"],
.page-for-parent [class*="__lead"],
.page-for-parent [class*="__body"] {
    letter-spacing: 0.02em;
}
.page-for-parent [class*="__btn"]:not([class*="__btn-"]),
.page-for-parent [class*="__cta"]:not([class*="__cta-"]),
.page-for-parent [class*="__button"] {
    letter-spacing: 0.05em;
    font-feature-settings: "palt" 1, "kern" 1;
}
.page-for-parent [class*="__tab"],
.page-for-parent [class*="__chip"]:not([class*="__chip-"]),
.page-for-parent [class*="__tag"]:not([class*="__tag-"]),
.page-for-parent [class*="__label"]:not([class*="__label-en"]) {
    letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
}
.page-for-parent [class*="__num"],
.page-for-parent [class*="__count"],
.page-for-parent [class*="__price"],
.page-for-parent [class*="__percent"] {
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "tnum" 1;
}
@media (max-width: 768px) {
    .page-for-parent [class*="__hero-title"],
    .page-for-parent [class*="__page-title"],
    .page-for-parent h1 {
        letter-spacing: 0em;
    }
    .page-for-parent [class*="__section-title"],
    .page-for-parent [class*="__block-title"],
    .page-for-parent h2 {
        letter-spacing: 0.005em;
    }
    .page-for-parent p,
    .page-for-parent [class*="__desc"],
    .page-for-parent [class*="__text"],
    .page-for-parent [class*="__lead"],
    .page-for-parent [class*="__body"] {
        letter-spacing: 0.01em;
    }
    .page-for-parent [class*="__btn"]:not([class*="__btn-"]),
    .page-for-parent [class*="__cta"]:not([class*="__cta-"]),
    .page-for-parent [class*="__button"] {
        letter-spacing: 0.04em;
    }
    .page-for-parent [class*="__tab"],
    .page-for-parent [class*="__chip"]:not([class*="__chip-"]),
    .page-for-parent [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-parent a,
    .page-for-parent button,
    .page-for-parent summary {
        -webkit-tap-highlight-color: rgba(67, 159, 255, 0.15);
    }
    /* SP hero KV: 顔位置キープ */
    .page-for-parent [class*="__hero-kv"] img,
    .page-for-parent [class*="__hero-visual"] img,
    .page-for-parent [class*="__hero-image"] img,
    .page-for-parent [class*="__hero"]:not([class*="__hero-"]) > img {
        object-position: right top;
    }
    /* SP タップ 44x44 (WCAG AA) */
    .page-for-parent a[class*="__btn"]:not([class*="__btn-"]),
    .page-for-parent a[class*="__cta"]:not([class*="__cta-"]),
    .page-for-parent button[class*="__btn"]:not([class*="__btn-"]),
    .page-for-parent button[class*="__cta"]:not([class*="__cta-"]) {
        min-height: 44px;
    }
    .page-for-parent input,
    .page-for-parent select,
    .page-for-parent textarea,
    .page-for-parent button {
        min-height: 44px;
    }
    /* SP over-scroll ちらつき抑止 */
    .page-for-parent {
        overscroll-behavior-y: contain;
    }
    /* SP スクロールバー隠す (横スワイプ要素) */
    .page-for-parent [class*="__slider"],
    .page-for-parent [class*="__carousel"],
    .page-for-parent [class*="__scroll-x"] {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page-for-parent [class*="__slider"]::-webkit-scrollbar,
    .page-for-parent [class*="__carousel"]::-webkit-scrollbar,
    .page-for-parent [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-parent [class*="__marquee-vertical"],
.page-for-parent [class*="__side-marquee"],
.page-for-parent [class*="__vertical-text"],
.page-for-parent [class*="__side-en"] {
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}
@media (max-width: 1439px) {
    .page-for-parent [class*="__marquee-vertical"],
    .page-for-parent [class*="__side-marquee"],
    .page-for-parent [class*="__vertical-text"],
    .page-for-parent [class*="__side-en"] {
        opacity: 0.55;
    }
}
@media (max-width: 1023px) {
    .page-for-parent [class*="__marquee-vertical"],
    .page-for-parent [class*="__side-marquee"],
    .page-for-parent [class*="__vertical-text"],
    .page-for-parent [class*="__side-en"] {
        display: none;
    }
}

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

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

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

/* P5: hero写真スロットが空の時のフォールバック背景(グラデ) */
.page-for-parent [class*="__hero-image"]:empty,
.page-for-parent [class*="__hero-photo"]:empty,
.page-for-parent [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-parent input::placeholder,
.page-for-parent textarea::placeholder {
    color: #8A8A8A;
    opacity: 1;
}

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

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

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

/* P10: 数字バッジ(01/02/03) — サイズ・行高を正規化(丸型を保証) */
.page-for-parent [class*="__num-badge"],
.page-for-parent [class*="__number-badge"],
.page-for-parent [class*="__step-num"],
.page-for-parent [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 per-page fresh v5D
   fresh visual audit: v4 deploy 後の残差潰し
   - SP: 青バー(site-breadcrumb) + KV内 top breadcrumb の二重表示回避
   - SP: hero wordmark / title のはみ出し・見切れ防止
   - SP: section 本文の overflow-wrap 徹底
   - SP: table を横スクロール可能に
   - PC: card 高さ揃え(align-items: stretch)
   BEM 維持・!important は最終手段のみ
   ======================================================================== */
@media screen and (max-width: 768px) {
    /* 二重パンくず解消: ヘッダー site-breadcrumb 青バーがあるので、ページ側 top を隠す */
    .page-for-parent__breadcrumb--top {
        display: none;
    }

    /* Hero wordmark: SP幅内に必ず収める (KV英字はみ出し) */
    .page-for-parent__hero-wordmark {
        max-width: 100%;
        overflow: hidden;
        word-break: keep-all;
        overflow-wrap: normal;
        font-size: clamp(36px, 12vw, 60px);
        line-height: 1.05;
        text-align: center;
    }
    .page-for-parent__hero-wordmark-front,
    .page-for-parent__hero-wordmark-shadow {
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
    }

    /* Hero title / sub の折り返し安全化 */
    .page-for-parent__hero-title {
        overflow-wrap: anywhere;
        word-break: normal;
        max-width: 100%;
    }
    .page-for-parent__hero-sub {
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    /* Section body 内テキストの overflow-wrap 徹底 */
    .page-for-parent [class*="__section-inner"] p,
    .page-for-parent [class*="__section-inner"] li,
    .page-for-parent [class*="__card"] p,
    .page-for-parent [class*="__card"] li {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Table を横スクロール可能に (親コンテナで対応) */
    .page-for-parent [class*="__table-wrap"],
    .page-for-parent [class*="__table-scroll"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-for-parent table {
        min-width: 100%;
    }

    /* Section 全体の overflow: hidden で装飾はみ出しをカット */
    .page-for-parent [class*="__section-inner"] {
        overflow-x: hidden;
    }
}

/* PC: カード縦揃え (compare/feature/qa/step 系のカード高さバラつき対策) */
@media screen and (min-width: 769px) {
    .page-for-parent [class*="__cards"],
    .page-for-parent [class*="__card-list"],
    .page-for-parent [class*="__features"],
    .page-for-parent [class*="__grid"] {
        align-items: stretch;
    }
    .page-for-parent [class*="__cards"] > *,
    .page-for-parent [class*="__card-list"] > *,
    .page-for-parent [class*="__features"] > *,
    .page-for-parent [class*="__grid"] > * {
        display: flex;
        flex-direction: column;
    }
}
/* v5D end */

/* 2026-09-25 per-page fresh v5D additions: for-parent 固有残差 SP */
@media screen and (max-width: 768px) {
    .page-for-parent__hero-kv { display: none; }
    .page-for-parent__hero-panel {
        clip-path: none;
    }
    .page-for-parent__hero-panel::before {
        clip-path: none;
        inset: 0;
    }
    .page-for-parent__hero-title {
        white-space: normal;
        overflow: visible;
    }
}
/* v5D additions end */

/* ============================================================
   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-parent [class*="__hero-kv"] {
    aspect-ratio: 600 / 371;
    position: relative;
    isolation: isolate;
}
.page-for-parent [class*="__hero-kv"] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;  /* Figma実測: 車のフロント / 顔をやや上寄せ */
    display: block;
}
.page-for-parent [class*="__hero-wordmark"] {
    position: relative;
    display: inline-flex;
    line-height: 1;
}
.page-for-parent [class*="__hero-wordmark-shadow"] {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.page-for-parent [class*="__hero-wordmark-front"] {
    position: relative;
    z-index: 1;
}
.page-for-parent__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-parent__hero-illust {
        width: clamp(96px, 40%, 160px);
        right: 12px;
        bottom: -14px;
    }
}
/* v6 end */

/* ==========================================================================
   2026-09-25 dark section v7
   （page-for-parent：INVITE / CONCERN Q-mark を v7 変数へ統一）
   ========================================================================== */
.page-for-parent__section--invite {
    background: var(--dark-section-bg, #24222b);
    color: var(--dark-section-color, #fff);
}
.page-for-parent__section--invite .page-for-parent__section-lead,
.page-for-parent__section--invite .section-heading__lead {
    color: var(--dark-section-color-muted, rgba(255,255,255,0.75));
}
.page-for-parent__invite-card {
    background: var(--dark-section-pill-bg, #fff);
    color: var(--dark-section-pill-color, #24222b);
}
.page-for-parent__invite-btn {
    background: var(--dark-section-cta-bg, #ffdd00);
    color: var(--dark-section-cta-color, #24222b);
    transition: filter .2s ease;
}
.page-for-parent__invite-btn:hover {
    filter: brightness(1.06);
}
/* CONCERN の Q-mark（暗色バッジ）も v7 と合わせる */
.page-for-parent__concern-qmark {
    background: var(--dark-section-bg, #24222b);
    color: var(--dark-section-color, #fff);
}
@media screen and (max-width: 768px) {
    .page-for-parent__invite-card {
        padding: 20px 16px;
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: left;
    }
}
/* 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-parent__title 等) は v1〜v7 の定義を尊重し上書きしない。 */
/* v8 end (page-for-parent) */

/* ==========================================================================
   2026-09-25 refresh audit v8 (page-for-parent)
   - SP: FOR GUARDIANS hero wordmark は layout.css v8 [G2] で clamp
   - SP: CONCERNS Q/A カード内テキスト右端見切れ→ 折り返し保険
   - SP: GUARDIAN SUPPORT wordmark clamp は layout.css v8 [G1]
   - dark section: for-parent の GUARDIAN SUPPORT 帯を dark 化するフックを準備
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-for-parent__concerns,
    .page-for-parent__concern-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .page-for-parent__concern,
    .page-for-parent__concern-card {
        min-width: 0;
        max-width: 100%;
    }
    .page-for-parent__concern-q,
    .page-for-parent__concern-a,
    .page-for-parent__concern-body {
        overflow-wrap: anywhere;
        word-break: auto-phrase;
        max-width: 100%;
    }
    .page-for-parent__support-list,
    .page-for-parent__support-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}
/* dark section hook: GUARDIAN SUPPORT を dark 化したい時に is-dark-section を付与 */
.page-for-parent__section.is-dark-section,
.page-for-parent__section--dark {
    background: var(--dark-section-bg, #24222b);
    color: var(--dark-section-color, #fff);
}
.page-for-parent__section.is-dark-section .page-for-parent__section-heading-wordmark-front,
.page-for-parent__section--dark .page-for-parent__section-heading-wordmark-front {
    color: var(--dark-section-color, #fff);
}
/* v8 end (page-for-parent) — refresh audit */

/* ==========================================================================
   2026-09-25 spacing rhythm v9 (page-for-parent)
   ==========================================================================
   - tokens.css の --section-py-pc / --section-gap-pc / --heading-mb-pc を採用。
   - 個別セクションで既存 v1〜v8 の specific 定義（padding-top など）は温存し、
     未定義のセクションだけ default fallback として共通変数を当てる。
   - !important は使わず、詳細度は .page-for-parent__section 相当で v1〜v8 と同列。
   ========================================================================== */
.page-for-parent__section {
    padding-top: var(--section-py-pc, 110px);
    padding-bottom: var(--section-py-pc, 110px);
}
.page-for-parent__section--with-lead,
.page-for-parent__section--lead,
.page-for-parent__section:has(> .page-for-parent__section-heading-lead),
.page-for-parent__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-parent__section + .page-for-parent__section {
    margin-top: var(--section-gap-pc, 60px);
}
.page-for-parent__section-heading,
.page-for-parent__section-heading-top,
.page-for-parent__section-heading-lead {
    margin-bottom: var(--heading-mb-pc, 32px);
}
@media screen and (max-width: 768px) {
    .page-for-parent__section {
        padding-top: var(--section-py-sp, 60px);
        padding-bottom: var(--section-py-sp, 60px);
    }
    .page-for-parent__section--with-lead,
    .page-for-parent__section--lead,
    .page-for-parent__section:has(> .page-for-parent__section-heading-lead),
    .page-for-parent__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-parent__section + .page-for-parent__section {
        margin-top: var(--section-gap-sp, 40px);
    }
    .page-for-parent__section-heading,
    .page-for-parent__section-heading-top,
    .page-for-parent__section-heading-lead {
        margin-bottom: var(--heading-mb-sp, 20px);
    }
}
/* v9 end (page-for-parent) — 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-parent)
   ==========================================================================
   目的: 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-parent__section .section-heading__wordmark-shadow,
.page-for-parent .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-parent [class*="__card"],
.page-for-parent [class*="__panel"]:not([class*="__panel-title"]),
.page-for-parent [class*="__box"]:not([class*="__box-title"]) {
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.page-for-parent [class*="__card"]:hover,
.page-for-parent [class*="__panel"]:not([class*="__panel-title"]):hover,
.page-for-parent [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-parent [class*="__oc-banner"],
.page-for-parent [class*="__cta-banner"],
.page-for-parent [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-parent [class*="__tag"]:not([class*="__tag-"]),
.page-for-parent [class*="__badge"]:not([class*="__badge-"]),
.page-for-parent [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-parent [class*="__card"],
    .page-for-parent [class*="__panel"]:not([class*="__panel-title"]),
    .page-for-parent [class*="__box"]:not([class*="__box-title"]) {
        box-shadow: var(--shadow-xs);
    }
    .page-for-parent [class*="__card"]:hover,
    .page-for-parent [class*="__panel"]:not([class*="__panel-title"]):hover,
    .page-for-parent [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-parent [class*="__card"],
    .page-for-parent [class*="__panel"],
    .page-for-parent [class*="__box"] {
        transition: none !important;
    }
}
/* v10 end (page-for-parent) — effects precision */

/* ==========================================================================
   2026-09-25 refresh audit v10 (page-for-parent) — PC+SP audit
   目的:
   - [FP1] SP: hero "FOR GUARDIAN" 右見切れ + hero body 右見切れ
   - [FP2] SP: CONCERNS/SUPPORT wordmark 右はみ出し → clamp サイズ縮小
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-for-parent__hero {
        overflow: hidden;
    }
    .page-for-parent__hero-illust,
    .page-for-parent__hero-image {
        max-width: 100% !important;
    }
    .page-for-parent__hero [class*="wordmark"] {
        max-width: 100%;
        overflow: hidden;
        font-size: clamp(28px, 8vw, 40px) !important;
        letter-spacing: 0.02em;
    }
    .page-for-parent__hero p,
    .page-for-parent__hero [class*="__lead"],
    .page-for-parent__hero [class*="__body"] {
        overflow-wrap: anywhere;
        padding-right: 12px;
    }
    .page-for-parent [class*="section-heading"] [class*="wordmark"],
    .page-for-parent__concerns [class*="wordmark"],
    .page-for-parent__supports [class*="wordmark"] {
        max-width: 100%;
        overflow: hidden;
        font-size: clamp(24px, 7vw, 36px) !important;
        letter-spacing: 0.01em;
        margin-bottom: 4px;
        position: relative;
        z-index: 0;
    }
    .page-for-parent [class*="__section-heading-jp"] {
        position: relative;
        z-index: 2;
        background: transparent;
    }
}
/* v10 audit end (page-for-parent) */

/* ==========================================================================
   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 typography deep v16 (page-for-parent)
   日本語 typography 深堀 (行送り / 字間 / 句読点 / text-wrap)
   - ページ固有 BEM prefix .page-for-parent__* に対して text-wrap / word-break を明示適用
   - グローバル layout.css の [class*="__title"] 等より specificity が高く、上書き耐性あり
   - CSS4 features は @supports で fallback 保証
   ========================================================================== */

@supports (text-wrap: balance) {
    .page-for-parent__title,
    .page-for-parent__heading-jp,
    [class*="page-for-parent__title"],
    [class*="page-for-parent__heading-jp"] {
        text-wrap: balance;
    }
}

@supports (text-wrap: pretty) {
    .page-for-parent__body,
    .page-for-parent__desc,
    .page-for-parent__lead,
    .page-for-parent__text,
    [class*="page-for-parent__body"],
    [class*="page-for-parent__desc"],
    [class*="page-for-parent__lead"],
    [class*="page-for-parent__text"] {
        text-wrap: pretty;
    }
}

@supports (word-break: auto-phrase) {
    .page-for-parent__title,
    .page-for-parent__heading-jp,
    .page-for-parent__body,
    .page-for-parent__desc,
    .page-for-parent__lead,
    .page-for-parent__text,
    [class*="page-for-parent__title"],
    [class*="page-for-parent__heading-jp"],
    [class*="page-for-parent__body"],
    [class*="page-for-parent__desc"],
    [class*="page-for-parent__lead"],
    [class*="page-for-parent__text"] {
        word-break: auto-phrase;
        line-break: strict;
    }
}

@supports (hanging-punctuation: allow-end) {
    .page-for-parent__title,
    .page-for-parent__heading-jp,
    .page-for-parent__body,
    .page-for-parent__desc,
    .page-for-parent__lead,
    .page-for-parent__text {
        hanging-punctuation: allow-end;
    }
}

.page-for-parent__body,
.page-for-parent__desc,
.page-for-parent__lead,
.page-for-parent__text,
[class*="page-for-parent__body"],
[class*="page-for-parent__desc"],
[class*="page-for-parent__lead"],
[class*="page-for-parent__text"] {
    overflow-wrap: anywhere;
    line-break: strict;
}

/* SP breakpoint: balance を切り pretty のみ維持 (狭幅の詰まり回避) */
@media (max-width: 600px) {
    @supports (text-wrap: balance) {
        .page-for-parent__title,
        .page-for-parent__heading-jp,
        [class*="page-for-parent__title"],
        [class*="page-for-parent__heading-jp"] {
            text-wrap: pretty;
        }
    }
}
/* v16 end (page-for-parent) — typography deep */

/* ==========================================================================
   2026-09-26 button precision v19 (page-for-parent)
   v5C/v13 attribute selectors が .page-for-parent__invite-btn の
   background / padding / radius を誤値に上書きするのを BEM 直指定で local override。
   Figma 実測: invite-btn = padding 14px 28px / radius 999px / bg #ffdd00 /
                color #24222b / fz 16 / weight 700 (SP center)。
   ========================================================================== */
.page-for-parent .page-for-parent__invite-btn,
.page-for-parent a.page-for-parent__invite-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    background: #ffdd00 !important;
    background-color: #ffdd00 !important;
    color: #24222b !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-family: var(--technoauto-font-jp, "Noto Sans JP", sans-serif);
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease, transform .15s ease;
    box-sizing: border-box;
}
.page-for-parent .page-for-parent__invite-btn:hover,
.page-for-parent .page-for-parent__invite-btn:focus-visible {
    opacity: .9;
    filter: none;
}
@media screen and (max-width: 768px) {
    .page-for-parent .page-for-parent__invite-btn {
        justify-content: center;
        padding: 14px 24px !important;
    }
}
/* v19 end (page-for-parent) — button precision */

/* ==========================================================================
   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-parent__hero-en {
    color: var(--technoauto-brand-primary, #439FFF);
}
/* v20 end (page-for-parent) — 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-09-26 v26 B-batch fix
   [B fix] SP "FOR GUARDIA" 右クリップ / サブ "お子様の将来...学校" カット
   fix : wordmark 折返し許容+font clamp 縮退・サブ padding-inline 拡張。
*/
@media screen and (max-width: 768px) {
    .page-for-parent__hero-wordmark {
        white-space: normal !important;
        word-break: keep-all;
        font-size: clamp(22px, 6.2vw, 34px) !important;
        letter-spacing: -0.015em !important;
        line-height: 1.15 !important;
    }
    .page-for-parent__hero-sub,
    .page-for-parent__hero-lead {
        padding-inline: 12px;
        max-width: 100%;
    }
}
/* v26 end (page) — for-parent SP wordmark wrap */

/* ==================================================================
 * 2026-10-13 Coder C: GUARDIAN SUPPORT カードを青丸シンプルアイコン化
 * (番号バッジ 01/02/03 を Figma 準拠の青丸ドットに差し替え)
 * ================================================================== */
.page-target__features--dot > li.c-text-card {
    position: relative;
    padding-top: 36px;
}
.page-target__feature-dot {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ytc-bg-brand, #439fff);
    box-shadow: 0 0 0 4px #fff;
}
@media screen and (max-width: 768px) {
    .page-target__features--dot > li.c-text-card { padding-top: 30px; }
    .page-target__feature-dot { width: 24px; height: 24px; top: -12px; }
}
/* v27 end (page) — for-parent GUARDIAN SUPPORT dot icon */


/* 2026-10-13 佐藤様指摘: 保護者向けサポート 3カラム grid に綺麗に納める + アイコン無し */
.page-for-parent .page-target__features,
body.page-template-page-for-parent .page-target__features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100%;
}
.page-for-parent .page-target__features > .c-text-card,
body.page-template-page-for-parent .page-target__features > .c-text-card {
    min-width: 0;
    height: 100%;
}
@media screen and (max-width: 768px) {
    .page-for-parent .page-target__features,
    body.page-template-page-for-parent .page-target__features {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ==========================================================================
   2026-10-19 Figma 準拠レイアウト調整 (保護者の方へ pc/sp)
   ※ GUARDIAN SUPPORT のアイコンは 2026-10-13 佐藤様指摘でアイコン無しのまま (Figma は青丸「?」)
   ========================================================================== */
.page-target { gap: 30px; }

/* CONCERNS (FAQ 形式): Figma は箱なし・FAQ を 1240 幅で直接並べる */
.page-target .c-section-box.c-section-box:has(.page-target__faq-list) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 138px 0 0; /* 見出し 108 + 30 */
}
.page-target .c-section-box.c-section-box:has(.page-target__faq-list) .c-section-box__heading.c-section-box__heading {
    top: 0;
}
.page-target .c-section-box:has(.page-target__faq-list) .c-section-box__body,
.page-target .page-target__faq-list {
    width: 100%;
    max-width: none;
}
.page-target .page-target__faq-list { gap: 20px; }
.page-target .page-target__faq-list > .c-faq.c-faq { width: 100%; max-width: none; }
/* このファイル内の [class*="__badge"] 汎用指定で Q バッジが白抜きになっていたのを Figma (青塗り・白字) に戻す */
.page-target .c-faq .c-faq__badge.c-faq__badge:not(.c-faq__badge--a) {
    padding: 0;
    background-color: var(--ytc-bg-brand, #439fff);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    box-shadow: none;
}
.page-target .c-faq .c-faq__badge--a.c-faq__badge--a { box-shadow: none; }

/* GUARDIAN SUPPORT: Figma は薄水色 (#d7f2ff) の箱、カード pad 20 / 20px 太字 */
.page-target .c-section-box.c-section-box--brand-soft {
    background: var(--ytc-bg-section, #d7f2ff);
}
.page-target .page-target__features--plain {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.page-target .page-target__features--plain > .c-text-card.c-text-card {
    justify-content: center;
    padding: 20px;
}
.page-target .page-target__features--plain .c-text-card__title.c-text-card__title {
    font-size: 20px;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .page-target { gap: 0; }
    .page-target .c-section-box.c-section-box:has(.page-target__faq-list) {
        padding: 30px 5px;
        margin-top: 0;
    }
    /* GUARDIAN SUPPORT: SP も斜めの板ではなく角丸の薄水色箱 */
    .page-target .c-section-box--brand-soft.c-section-box--brand-soft {
        width: calc(100% - 30px);
        margin: 30px 15px 30px;
        padding: 30px 20px;
        background: var(--ytc-bg-section, #d7f2ff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 10px;
        filter: none;
    }
    .page-target .c-section-box--brand-soft.c-section-box--brand-soft::before,
    .page-target .c-section-box--brand-soft.c-section-box--brand-soft::after {
        content: none;
    }
    .page-target .page-target__features--plain { grid-template-columns: 1fr; gap: 20px; }
    .page-target .page-target__features--plain > .c-text-card.c-text-card {
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 0;
        padding: 14px 16px;
        border-radius: 5px;
    }
    .page-target .page-target__features--plain .c-text-card__title.c-text-card__title {
        font-size: 16px;
        text-align: left;
    }
}