/*
 * page-about-route.css — 通学ルート ページ固有調整 (v2)
 * Figma 準拠リビルド (Phase 10 / 2026-10-02)
 * FROM: 5カラム経路フロー図 (CSS Grid)
 *   列構成: [dep] [leg_a] (hub1) [leg_b?] (hub2) (walk) (dest)
 *   - hub1/hub2/walk/dest は縦書き or 徒歩矢印、グループ全行を span
 *   - leg_b 列はグループ内に leg_b を持つ行があるときのみ出現
 */

.page-about-route {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 2026-10-19: ページ内リンク・.c-section-box の margin-top 50px と合わせ Figma の間隔 (50 + 見出しはみ出し 30) に */
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

/* 2026-10-19 Figma: ヒーロー〜ページ内リンク 50px (親 gap 30 + 20) */
.page-about-route__jump {
    margin-top: 20px;
}
@media screen and (max-width: 768px) {
    .page-about-route__jump {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
 * FROM グループリスト
 * ------------------------------------------------------------------ */
.page-about-route__groups {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}
.page-about-route__group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.page-about-route__group-label {
    margin: 0;
    padding: 12px 20px;
    background: var(--ytc-bg-brand-strong, #2f8aee);
    color: #fff;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

/* ------------------------------------------------------------------
 * フロー図グリッド
 *   列: [dep] [leg_a] [hub1] [leg_b?] [hub2] [walk] [dest]
 *   行: 行数 = --row-count
 *   各 dep/leg セルは inline-style で --row を持ち grid-row で位置決め
 * ------------------------------------------------------------------ */
.page-about-route__flow {
    display: grid;
    grid-template-columns:
        minmax(100px, 1fr)   /* dep */
        minmax(140px, 1.5fr) /* leg_a */
        minmax(140px, 1.5fr) /* leg_b (optional) */
        64px                 /* hub2 */
        86px                 /* walk */
        64px;                /* dest */
    grid-template-rows: repeat(var(--row-count, 1), auto);
    gap: 10px;
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
}
.page-about-route__flow--with-hub1 {
    grid-template-columns:
        minmax(100px, 1fr)   /* dep */
        minmax(140px, 1.5fr) /* leg_a */
        64px                 /* hub1 */
        minmax(140px, 1.5fr) /* leg_b */
        64px                 /* hub2 */
        86px                 /* walk */
        64px;                /* dest */
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) {
    grid-template-columns:
        minmax(100px, 1fr)
        minmax(140px, 1.8fr)
        64px
        86px
        64px;
}

/* 列割当 */
.page-about-route__flow .page-about-route__flow-dep     { grid-column: 1; grid-row: var(--row, auto); }
.page-about-route__flow .page-about-route__flow-leg     { grid-column: 2; grid-row: var(--row, auto); }
.page-about-route__flow--with-hub1 .page-about-route__flow-leg--b { grid-column: 4; grid-row: var(--row, auto); }
.page-about-route__flow:not(.page-about-route__flow--with-hub1) .page-about-route__flow-leg--b { grid-column: 3; grid-row: var(--row, auto); }

.page-about-route__flow--with-hub1 .page-about-route__flow-hub--1 {
    grid-column: 3;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow--with-hub1 .page-about-route__flow-hub--2 {
    grid-column: 5;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow--with-hub1 .page-about-route__flow-walk {
    grid-column: 6;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow--with-hub1 .page-about-route__flow-dest {
    grid-column: 7;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1).page-about-route__flow--with-legb .page-about-route__flow-hub--2 {
    grid-column: 4;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1).page-about-route__flow--with-legb .page-about-route__flow-walk {
    grid-column: 5;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1).page-about-route__flow--with-legb .page-about-route__flow-dest {
    grid-column: 6;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) .page-about-route__flow-hub--2 {
    grid-column: 3;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) .page-about-route__flow-walk {
    grid-column: 4;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}
.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) .page-about-route__flow-dest {
    grid-column: 5;
    grid-row: 1 / calc(var(--row-count, 1) + 1);
}

/* ---- セルの見た目 ---- */

/* 出発駅カード */
.page-about-route__flow-dep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 10px;
    background: #eef5fb;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    text-align: center;
}
.page-about-route__flow-dep-name {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--ytc-text-primary, #000);
}
.page-about-route__flow-dep-total {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 12px;
    color: var(--ytc-text-secondary, #787878);
}

/* 路線レグ (路線名→矢印→時間) */
.page-about-route__flow-leg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
}
.page-about-route__flow-leg-line {
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 13px;
    color: var(--ytc-text-primary, #000);
    text-align: center;
    line-height: 1.4;
}
.page-about-route__flow-arrow {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ytc-text-primary, #000);
    position: relative;
}
.page-about-route__flow-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--ytc-text-primary, #000);
}
.page-about-route__flow-leg-time {
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--ytc-text-primary, #000);
}

/* 中継駅 (縦書き、グループ全行をスパン) */
.page-about-route__flow-hub {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    padding: 10px 4px;
    box-sizing: border-box;
}
.page-about-route__flow-hub span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1.2;
}
.page-about-route__flow-hub--1 {
    background: #cfe6fb;
}
.page-about-route__flow-hub--1 span {
    color: var(--ytc-text-primary, #000);
}
.page-about-route__flow-hub--2 {
    background: var(--ytc-bg-brand, #439fff);
}
.page-about-route__flow-hub--2 span {
    color: #fff;
}

/* 徒歩区間 (矢印 + "徒歩N分") */
.page-about-route__flow-walk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
}
.page-about-route__flow-walk-arrow {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ytc-text-primary, #000);
    position: relative;
}
.page-about-route__flow-walk-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--ytc-text-primary, #000);
}
.page-about-route__flow-walk-text {
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 13px;
    color: var(--ytc-text-primary, #000);
}

/* 本校 (縦書き、グループ全行をスパン) */
.page-about-route__flow-dest {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #20d99b;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    padding: 10px 4px;
    box-sizing: border-box;
}
.page-about-route__flow-dest span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
}

/* 補足テキスト */
.page-about-route__from-note {
    margin: 20px 0 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 12px;
    color: var(--ytc-text-secondary, #787878);
    text-align: left;
    width: 100%;
}

/* ------------------------------------------------------------------
 * RAILWAY 路線図
 * ------------------------------------------------------------------ */
.page-about-route__railway-image {
    width: 100%;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.page-about-route__railway-image img {
    width: 100%;
    height: auto;
    display: block;
}
.page-about-route__railway-placeholder {
    width: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
    border: 1px dashed var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    box-sizing: border-box;
}
.page-about-route__railway-placeholder p {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 14px;
    color: var(--ytc-text-secondary, #787878);
    text-align: center;
}

/* ------------------------------------------------------------------
 * ROUTES 交通案内
 * ------------------------------------------------------------------ */
.page-about-route__routes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    width: 100%;
}
.page-about-route__routes-list > .c-route-row {
    flex: 1 0 0;
    min-width: 0;
    max-width: none;
}
.page-about-route__routes-list .c-route-row__desc p {
    margin: 0;
}
.page-about-route__routes-note {
    margin: 16px 0 0;
    width: 100%;
    text-align: center;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 13px;
    color: var(--ytc-text-secondary, #787878);
}

/* ------------------------------------------------------------------
 * SP (<=768px) : フロー図は縦積みに切り替え
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    .page-about-route { gap: 30px; padding: 20px 0 0; }

    .page-about-route__group-label {
        font-size: 13px;
        padding: 10px 12px;
    }

    /* フロー図: モバイルでは駅ごとに縦積み (各行がカード 1枚) */
    .page-about-route__flow,
    .page-about-route__flow--with-hub1 {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    .page-about-route__flow-dep,
    .page-about-route__flow-leg,
    .page-about-route__flow-hub,
    .page-about-route__flow-walk,
    .page-about-route__flow-dest {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .page-about-route__flow-dep {
        padding: 12px;
    }
    .page-about-route__flow-leg {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 12px;
        border: 1px dashed #cfe6fb;
        border-radius: 6px;
        gap: 10px;
    }
    .page-about-route__flow-arrow {
        display: none;
    }
    .page-about-route__flow-hub,
    .page-about-route__flow-dest {
        padding: 10px;
    }
    .page-about-route__flow-hub span,
    .page-about-route__flow-dest span {
        writing-mode: horizontal-tb;
        letter-spacing: 4px;
    }
    .page-about-route__flow-walk {
        padding: 6px;
    }

    .page-about-route__routes-list {
        flex-direction: column;
        gap: 12px;
    }
    .page-about-route__routes-list > .c-route-row {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 2026-10-20 RAILWAY: Figma の路線図は枠なしで箱に直接置く */
.page-about-route__railway-image {
    border: 0;
    border-radius: 0;
}

/* 2026-10-20 MAP 周辺地図 (/about/access/ の地図と同じ見た目) */
.page-about-route__map-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.page-about-route__map-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}