/*
 * page-course-detail.css — 学科詳細 6学科共通 (ページ固有調整のみ)
 * 共通パーツは figma-components.css に集約:
 *   - OVERVIEW   → c-def-row
 *   - FEATURES   → c-feature-numbered (このページでは4列グリッド化)
 *   - VOICE      → c-interview-card-sub (このページでは2列グリッド化)
 * 本ファイルには CURRICULUM の階段フロー (page専用) と、
 * 共通パーツを使った列数指定だけ残す。
 */

.page-course-detail {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

/* FEATURES: c-feature-numbered をカードカウントに応じて並べる (4 or 5 cards)
   子要素数で列数を切り替え: 4=repeat(4,1fr) / 5=repeat(5,1fr) */
.page-course-detail__features-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}
.page-course-detail__features-grid:has(> li:nth-child(5)) {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* PRACTICAL TRAINING (body-paint 専用): c-text-card を 2列グリッドで並べる */
.page-course-detail__practical-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}
.page-course-detail__practical-grid > .c-text-card {
    max-width: none;
    width: 100%;
    height: 100%;
}
/* 画像付き practical カード */
.page-course-detail__practical-photo {
    width: 100%;
    aspect-ratio: 500 / 280;
    overflow: hidden;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 5px;
    margin-bottom: 12px;
    background: #d7f2ff;
}
.page-course-detail__practical-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 複数画像対応: curr-card 内 2枚並び */
.page-course-detail__curr-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.page-course-detail__curr-photo--multi {
    aspect-ratio: 1 / 1;
    width: 100%;
}
@media screen and (max-width: 768px) {
    .page-course-detail__curr-photos { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media screen and (max-width: 768px) {
    /* 2026-10-15 鈴木様指摘⑤: 実践実習カードがSPで見にくい（3カラム横並びになっていた）
       - custom.css の `.c-text-card { flex-direction: row }` SP一括指定を打ち消して縦スタック化
       - 画像をフル幅・タイトル/本文を下に積む
       - カード間隔UP・余白圧縮・文字サイズ最適化 */
    .page-course-detail__practical-grid { grid-template-columns: 1fr; gap: 20px; }
    .page-course-detail__practical-grid > .c-text-card.c-text-card {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 20px 16px;
        gap: 14px;
    }
    .page-course-detail__practical-grid .page-course-detail__practical-photo {
        /* 2026-10-15 佐藤様指摘: SPでは画像の下に水色余白が出るため aspect-ratio 固定を解除 */
        aspect-ratio: auto;
        margin-bottom: 0;
    }
    .page-course-detail__practical-grid .page-course-detail__practical-photo img {
        height: auto;
    }
    .page-course-detail__practical-grid .c-text-card__title.c-text-card__title {
        font-size: 17px;
        line-height: 1.5;
        text-align: left;
    }
    .page-course-detail__practical-grid .c-text-card__body.c-text-card__body {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* VOICE: c-interview-card-sub を 2列グリッドで並べる */
.page-course-detail__voice-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}
.page-course-detail__voice-grid > .c-interview-card-sub {
    max-width: none;
    width: 100%;
    height: 100%;
}

/* ==================================================================
 * CURRICULUM — カリキュラム (学科詳細ページ専用)
 *   2年次カード並び → ▼ゴールバー → 2年次カード並び → ▼最終ゴールバー
 * ================================================================== */
.page-course-detail__curr {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}
.page-course-detail__curr-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    position: relative;
    align-items: start;
}
/* 横並びカード間の矢印 (flow 修飾子適用時のみ) */
.page-course-detail__curr-row--flow > li {
    position: relative;
}
.page-course-detail__curr-row--flow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 0;
    height: 0;
    border-left: 10px solid var(--ytc-bg-brand, #439fff);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}
.page-course-detail__curr-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
}
.page-course-detail__curr-year {
    display: inline-block;
    padding: 6px 16px;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    border-radius: 5px;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 18px;
    width: fit-content;
}
.page-course-detail__curr-photo {
    width: 100%;
    aspect-ratio: 341 / 160;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    background: #d7f2ff;
}
.page-course-detail__curr-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-course-detail__curr-title {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
}
.page-course-detail__curr-desc {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ytc-text-secondary, #787878);
}
.page-course-detail__curr-arrow {
    width: 40px;
    height: 20px;
    margin: 0 auto;
    background: var(--ytc-bg-brand, #439fff);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.page-course-detail__curr-goal {
    padding: 18px 24px;
    background: var(--ytc-bg-brand, #439fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    text-align: center;
}
.page-course-detail__curr-goal p {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    letter-spacing: 2px;
}

/* ==================================================================
 * CAREER — 主な就職先 (car-mechanic 等)
 * ================================================================== */
.page-course-detail__career-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 24px;
    width: 100%;
}
.page-course-detail__career-item {
    position: relative;
    padding: 12px 12px 12px 28px;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ytc-text-primary, #000);
    border-bottom: 1px dashed var(--ytc-border-base, #d7d7d7);
}
.page-course-detail__career-item::before {
    content: "›";
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ytc-bg-brand, #439fff);
    font-size: 18px;
    line-height: 1;
}

/* ==================================================================
 * SUPPORT — 留学生サポート (international)
 * ================================================================== */
.page-course-detail__support-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}
.page-course-detail__support-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
}
.page-course-detail__support-check {
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 900;
    color: #2a9f55;
    font-size: 24px;
    line-height: 1;
}
.page-course-detail__support-title {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
}
.page-course-detail__support-desc {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ytc-text-secondary, #787878);
}

/* ==================================================================
 * SP (<=768px)
 * ================================================================== */
@media screen and (max-width: 768px) {
    .page-course-detail { gap: 30px; padding: 20px 0 0; }
    .page-course-detail__features-grid,
    .page-course-detail__features-grid:has(> li:nth-child(5)) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* SP: writing-mode を強制横書き (親テーマ干渉を無効化) */
    .page-course-detail__features-grid .c-feature-numbered,
    .page-course-detail__features-grid .c-feature-numbered__title,
    .page-course-detail__features-grid .c-feature-numbered__desc {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal;
    }
    .page-course-detail__curr-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .page-course-detail__voice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .page-course-detail__career-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .page-course-detail__support-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==================================================================
 * GALLERY — 実習写真 (body-paint 等)
 * ================================================================== */
.page-course-detail__gallery-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}
.page-course-detail__gallery-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.page-course-detail__gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}
.page-course-detail__gallery-caption {
    margin: 0;
    padding: 10px 16px 14px;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ytc-text-primary, #000);
}
@media screen and (max-width: 768px) {
    .page-course-detail__gallery-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ==================================================================
 * 2026-10-19 Figma 準拠レイアウト調整 (6学科共通 / course agent)
 *   数値は Figma ノード JSON (PC=1440 / SP=375) から取得。
 *   custom.css が後から読み込まれるため、.page-course-detail を前置して詳細度を上げている。
 * ================================================================== */

/* --- セクション間: Figma は箱と箱の間 80px (= c-section-box の margin-top 50 + gap 30) --- */
.page-course-detail.page-course-detail { gap: 30px; }

/* --- OVERVIEW (c-def-row): pill 28px 高 / 16px bold、値 16px regular、セル間 1px 罫線 --- */
.page-course-detail .c-def-row__cell { gap: 15px; }
.page-course-detail .c-def-row__pill.c-def-row__pill {
    padding: 0 12px;
    font-size: 16px;
    line-height: 26px;
}
.page-course-detail .c-def-row__value.c-def-row__value {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* --- FEATURES: カード padding 20 / gap 15、見出し 20/30、説明 14/22.4、列間 20 --- */
.page-course-detail .page-course-detail__features-grid { gap: 20px; }
.page-course-detail .page-course-detail__features-grid > .c-feature-numbered {
    padding: 20px;
    gap: 15px;
}
.page-course-detail .page-course-detail__features-grid .c-feature-numbered__title {
    font-size: 20px;
    line-height: 1.5;
}
.page-course-detail .page-course-detail__features-grid .c-feature-numbered__desc {
    margin-top: -5px;
    font-size: 14px;
    line-height: 1.6;
}
.page-course-detail .page-course-detail__features-grid:has(> li:nth-child(5)) { gap: 16px; }
.page-course-detail .page-course-detail__features-grid:has(> li:nth-child(5)) .c-feature-numbered__title { font-size: 18px; }

/* --- PRACTICAL TRAINING (鈑金塗装): カード 570 / padding 20 / gap 12、画像 530x248、
       見出し 22/33 左寄せ、説明 14/22.4 グレー --- */
.page-course-detail .page-course-detail__practical-grid { gap: 20px; }
.page-course-detail .page-course-detail__practical-grid > .c-text-card {
    padding: 20px;
    gap: 12px;
    justify-content: flex-start;
}
.page-course-detail .page-course-detail__practical-photo {
    aspect-ratio: 530 / 248;
    margin-bottom: 0;
}
.page-course-detail .page-course-detail__practical-grid .c-text-card__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
    text-align: left;
}
.page-course-detail .page-course-detail__practical-grid .c-text-card__body {
    margin: -7px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ytc-text-secondary, #787878);
}

/* --- PRACTICAL + CURRICULUM を 1 つの箱に (Figma: 実践実習の箱の中に小見出し「YTCだから充実の1年間」)
       実践実習セクションの直後にカリキュラムが続く場合のみ (= 鈑金塗装専攻科) 2 つの箱を連結する --- */
.page-course-detail .page-course-detail__practical:has(+ .page-course-detail__curriculum) {
    padding-bottom: 30px;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
}
.page-course-detail .page-course-detail__practical + .page-course-detail__curriculum.c-section-box {
    margin-top: -30px; /* 親 flex の gap 30 を打ち消して密着 */
    padding-top: 0;
    border-top: 0;
    border-radius: 0 0 20px 20px;
}
.page-course-detail .page-course-detail__practical + .page-course-detail__curriculum .c-section-box__heading {
    position: static;
    transform: none;
    margin: 0 auto 20px;
}
.page-course-detail .page-course-detail__practical + .page-course-detail__curriculum .c-section-heading-sub__en {
    display: none;
}
.page-course-detail .page-course-detail__practical + .page-course-detail__curriculum .c-section-heading-sub__title {
    font-size: 30px;
    line-height: 1.5;
}

/* --- CURRICULUM 共通カード: padding 20 / gap 12、年次バー 40px 高 20px bold (枠線あり)、
       写真 530x248 枠線 #39364e、見出し 22/33、説明 14/22.4 (見出しとの間 5px) --- */
.page-course-detail .page-course-detail__curr { gap: 20px; }
.page-course-detail .page-course-detail__curr-row { gap: 20px; }
.page-course-detail .page-course-detail__curr-card {
    padding: 20px;
    gap: 12px;
}
.page-course-detail .page-course-detail__curr-year {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ytc-border-strong, #39364e);
    font-size: 20px;
    line-height: 1;
    text-align: center;
}
.page-course-detail .page-course-detail__curr-photo {
    aspect-ratio: 530 / 248;
    border-color: var(--ytc-border-strong, #39364e);
}
.page-course-detail .page-course-detail__curr-photos { gap: 12px; }
.page-course-detail .page-course-detail__curr-photo--multi { aspect-ratio: 244 / 190; }
.page-course-detail .page-course-detail__curr-title {
    font-size: 22px;
    line-height: 1.5;
}
.page-course-detail .page-course-detail__curr-desc {
    font-size: 14px;
    line-height: 1.6;
}
.page-course-detail .page-course-detail__curr-title + .page-course-detail__curr-desc { margin-top: -7px; }
/* 写真なし (高度総合・総合整備士のステップ): 年次バー 38px / 18px */
.page-course-detail .page-course-detail__curr-card:not(:has(.page-course-detail__curr-photo)) .page-course-detail__curr-year {
    font-size: 18px;
}
/* ▼ / ゴールバー: ▼ 40x20、ゴール 63px 高 22/33 */
.page-course-detail .page-course-detail__curr-goal {
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0;
}

/* --- 横並びフロー (前期→後期 / 1・2年次→3・4年次→5年次): ▶ 20x40、カード間 16+20+16 --- */
.page-course-detail .page-course-detail__curr-row--flow {
    gap: 52px;
    align-items: stretch;
}
.page-course-detail .page-course-detail__curr-row--flow > li:not(:last-child)::after {
    right: -36px; /* (52 - 20) / 2 + 20 */
    border-left-width: 20px;
    border-top-width: 20px;
    border-bottom-width: 20px;
}
/* 写真付きフロー (鈑金塗装 前期→後期): カード 540 / 間 30+20+30 */
.page-course-detail .page-course-detail__curr-row--flow:has(.page-course-detail__curr-photo) { gap: 80px; }
.page-course-detail .page-course-detail__curr-row--flow:has(.page-course-detail__curr-photo) > li:not(:last-child)::after { right: -50px; }

/* --- 同じ年次が 2 枚並ぶ行 (自動車整備科): Figma は 1 枚の白カードに年次バー 1 本 + 2 列 (間に 1px 罫線)
       PHP 側で .page-course-detail__curr-row--same-year を付与。li を display:contents にして ul を 1 枚のカードに --- */
.page-course-detail .page-course-detail__curr-row--same-year {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: 41px; /* 20 + 罫線1 + 20 */
    row-gap: 12px;
    padding: 20px;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    background:
        linear-gradient(#d9d9d9, #d9d9d9) center 80px / 1px calc(100% - 100px) no-repeat,
        #fff;
}
.page-course-detail .page-course-detail__curr-row--same-year > li { display: contents; }
.page-course-detail .page-course-detail__curr-row--same-year > li > * { grid-column: 1; }
.page-course-detail .page-course-detail__curr-row--same-year > li:nth-child(2) > * { grid-column: 2; }
.page-course-detail .page-course-detail__curr-row--same-year > li > .page-course-detail__curr-year {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 8px; /* row-gap 12 + 8 = 20 */
}
.page-course-detail .page-course-detail__curr-row--same-year > li:not(:first-child) > .page-course-detail__curr-year { display: none; }
.page-course-detail .page-course-detail__curr-row--same-year .page-course-detail__curr-photo { grid-row: 2; aspect-ratio: 539 / 253; }
.page-course-detail .page-course-detail__curr-row--same-year .page-course-detail__curr-title { grid-row: 3; }
.page-course-detail .page-course-detail__curr-row--same-year .page-course-detail__curr-desc { grid-row: 4; }

/* --- CAREER (自動車整備科): Figma はロゴ枠 (白 / #e5e5e5 枠 / 角丸5) の 6 列グリッド。
       ロゴ画像は未支給のため、社名テキストを同じ枠の中央に置く --- */
.page-course-detail .page-course-detail__career-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}
.page-course-detail .page-course-detail__career-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.page-course-detail .page-course-detail__career-item::before { content: none; }

/* --- GALLERY: 4 列 / 間 20、画像 275x207 角丸10 枠線 --- */
.page-course-detail .page-course-detail__gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.page-course-detail .page-course-detail__gallery-item { gap: 0; }
.page-course-detail .page-course-detail__gallery-item img { aspect-ratio: 275 / 207; }

/* ==================================================================
 * SP (<=768px) — Figma SP (375)
 * ================================================================== */
@media screen and (max-width: 768px) {
    .page-course-detail.page-course-detail { gap: 24px; }

    /* FEATURES: Figma は 1 列 (番号左 + 見出し/説明右)。2 列だと縦書き状に細く折り返していた */
    .page-course-detail .page-course-detail__features-grid,
    .page-course-detail .page-course-detail__features-grid:has(> li:nth-child(5)) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-course-detail .page-course-detail__features-grid > .c-feature-numbered { padding: 16px; gap: 14px; }
    .page-course-detail .page-course-detail__features-grid .c-feature-numbered__title,
    .page-course-detail .page-course-detail__features-grid:has(> li:nth-child(5)) .c-feature-numbered__title {
        font-size: 16px;
        line-height: 1.5;
    }
    .page-course-detail .page-course-detail__features-grid .c-feature-numbered__desc { margin-top: 0; font-size: 13px; line-height: 1.6; }

    /* PRACTICAL: padding 16 / gap 10、画像 273x128、見出し 16/24、説明 13/20.8 */
    .page-course-detail .page-course-detail__practical-grid > .c-text-card.c-text-card { padding: 16px; gap: 10px; }
    .page-course-detail .page-course-detail__practical-grid .page-course-detail__practical-photo { aspect-ratio: 273 / 128; }
    .page-course-detail .page-course-detail__practical-grid .page-course-detail__practical-photo img { height: 100%; }
    .page-course-detail .page-course-detail__practical-grid .c-text-card__title.c-text-card__title { font-size: 16px; line-height: 1.5; }
    .page-course-detail .page-course-detail__practical-grid .c-text-card__body.c-text-card__body { margin-top: -6px; font-size: 13px; line-height: 1.6; }

    /* PRACTICAL + CURRICULUM 連結 (SP) */
    .page-course-detail .page-course-detail__practical:has(+ .page-course-detail__curriculum) { padding-bottom: 20px; }
    .page-course-detail .page-course-detail__practical + .page-course-detail__curriculum.c-section-box { margin-top: -24px; padding-top: 0; }
    .page-course-detail .page-course-detail__practical + .page-course-detail__curriculum .c-section-heading-sub__title { font-size: 22px; }

    /* CURRICULUM (SP): カード padding 16 / gap 10、年次 32px 16px、写真 273x128、見出し 16/24、説明 13/20.8、カード間 20 */
    .page-course-detail .page-course-detail__curr-row { gap: 20px; }
    .page-course-detail .page-course-detail__curr-card { padding: 16px; gap: 10px; }
    .page-course-detail .page-course-detail__curr-year,
    .page-course-detail .page-course-detail__curr-card:not(:has(.page-course-detail__curr-photo)) .page-course-detail__curr-year {
        padding: 8px 12px;
        font-size: 16px;
    }
    .page-course-detail .page-course-detail__curr-photo { aspect-ratio: 273 / 128; }
    .page-course-detail .page-course-detail__curr-photos { gap: 10px; }
    .page-course-detail .page-course-detail__curr-photo--multi { aspect-ratio: 131 / 102; }
    .page-course-detail .page-course-detail__curr-photo img { height: 100%; }
    .page-course-detail .page-course-detail__curr-title { font-size: 16px; }
    .page-course-detail .page-course-detail__curr-desc { font-size: 13px; }
    .page-course-detail .page-course-detail__curr-title + .page-course-detail__curr-desc { margin-top: -6px; }
    .page-course-detail .page-course-detail__curr-arrow { width: 28px; height: 14px; }
    .page-course-detail .page-course-detail__curr-goal { padding: 12px 16px; border-radius: 5px; font-size: 16px; }

    /* 横並びフロー → 縦積み + ▼ (28x14)
       2026-10-19 [common] SP 安全網をページラッパーだけに限定したので overflow:visible の打ち消しは削除 */
    .page-course-detail .page-course-detail__curr-row--flow,
    .page-course-detail .page-course-detail__curr-row--flow:has(.page-course-detail__curr-photo) { gap: 54px; } /* 20 + ▼14 + 20 */
    .page-course-detail .page-course-detail__curr-row--flow > li:not(:last-child)::after,
    .page-course-detail .page-course-detail__curr-row--flow:has(.page-course-detail__curr-photo) > li:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -34px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 14px solid var(--ytc-bg-brand, #439fff);
        border-bottom: 0;
    }

    /* 同じ年次 2 枚 (SP): 1 枚のカードに縦積み、項目間に罫線 */
    .page-course-detail .page-course-detail__curr-row--same-year {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        background: #fff;
    }
    .page-course-detail .page-course-detail__curr-row--same-year > li {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .page-course-detail .page-course-detail__curr-row--same-year > li + li {
        padding-top: 16px;
        border-top: 1px solid #d9d9d9;
    }
    .page-course-detail .page-course-detail__curr-row--same-year > li > .page-course-detail__curr-year { margin-bottom: 0; }

    /* CAREER (SP): 2 列 */
    .page-course-detail .page-course-detail__career-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-course-detail .page-course-detail__career-item { min-height: 60px; font-size: 13px; }

    /* GALLERY (SP): 2 列 / 間 10、142x108 角丸5 */
    .page-course-detail .page-course-detail__gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-course-detail .page-course-detail__gallery-item { border-radius: 5px; }
    .page-course-detail .page-course-detail__gallery-item img { aspect-ratio: 142 / 108; height: 100%; }
}

/* --- セクション箱の内側余白 (PC): Figma 左右 40。リード無し見出し (GALLERY / CAREER) は箱上端から 80 で本文 --- */
@media screen and (min-width: 769px) {
    /* 2026-10-19 [common] 共通 .c-section-box が Figma 値 (110/40/40・リード付き150・gap30) になったので削除 */
}

/* ---------------------------------------------------------------------------
 * [layout-restore] 2026-10-19 VOICE (PC): Figma「Voice Card / PC」どおり、コメントも写真の右側に置く
 *   写真 100px (中央寄せ) | 右列: 名前 20px/700/30 → 肩書 14px グレー → グレー 1px 線 (下 pad 16) → 10px → コメント 14px/25
 *   カード pad 20・角丸 10・列間 30。マークアップは不変 (__profile を display: contents にして grid に載せ替え)
 *   SP は Figma もコメント全幅なので従来どおり
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .page-course-detail .page-course-detail__voice-grid { gap: 30px; }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub.c-interview-card-sub {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 20px;
        row-gap: 10px;
        align-items: start;
        padding: 20px;
        border-radius: 10px;
    }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__profile { display: contents; }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__photo {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        width: 100px;
        height: 100px;
        margin: 0;
    }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__meta {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0 0 16px;
        border-bottom: 1px solid #e5e5e5;
        text-align: left;
    }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__name {
        margin: 0;
        font-size: 20px;
        line-height: 30px;
        text-align: left;
    }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__dept {
        margin: 0;
        font-size: 14px;
        line-height: 17px;
        color: var(--ytc-text-secondary, #787878);
        text-align: left;
    }
    .page-course-detail .page-course-detail__voice-grid > .c-interview-card-sub .c-interview-card-sub__quote {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 14px;
        line-height: 25px;
        text-align: left;
    }
}