/*
 * page-about-access.css — アクセス ページ固有調整
 * Figma 準拠リビルド (Phase 10 / 2026-10-02)
 * 共通パーツは figma-components.css に集約済み。
 * ここでは ADDRESS 画像+カード並び / MAP iframe枠 / ROUTES 2カード並び など
 * このページ特有のレイアウト調整のみ。
 */

.page-about-access {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 2026-10-19: .c-section-box の margin-top 50px と合わせ箱間 80px (Figma) */
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

/* ------------------------------------------------------------------
 * ADDRESS 所在地
 * ------------------------------------------------------------------ */
.page-about-access__address-row {
    display: flex;
    gap: 30px;
    align-items: center;
    width: 100%;
}
.page-about-access__address-photo {
    flex-shrink: 0;
    width: 560px;
    height: 330px;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    overflow: hidden;
    background: #d7f2ff;
}
.page-about-access__address-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-about-access__address-card {
    flex: 1 0 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    box-sizing: border-box;
}
.page-about-access__address-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.page-about-access__address-name {
    margin: 0; /* 2026-10-19 Figma: 校名と住所の間は info の gap 20px のみ (旧: margin 20 + gap 20 = 40) */
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
    text-align: left; /* 2026-10-19 Figma: 左揃え */
}
.page-about-access__address-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-about-access__address-lines p {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    color: var(--ytc-text-primary, #000);
}
.page-about-access__address-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 45px;
    margin-top: 20px;
    background: var(--ytc-bg-brand, #439fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: opacity .2s;
}
/* 2026-10-19 Figma: ラベルの左に白い受話器アイコン 15x16 (間 10px = ボタンの gap) */
.page-about-access__address-tel::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 16px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-about-access__address-tel:hover {
    opacity: 0.85;
    color: #fff;
}

/* ------------------------------------------------------------------
 * MAP 地図
 * ------------------------------------------------------------------ */
.page-about-access__map-frame {
    width: 100%;
    /* 2026-10-13: height: 400px を削除。中身の画像のアスペクト比に任せる */
    background: #d9d9d9;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-about-access__map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.page-about-access__map-placeholder {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 400;
    font-size: 18px;
    color: var(--ytc-text-secondary, #787878);
    text-align: center;
}

/* ------------------------------------------------------------------
 * ROUTES 交通案内
 * ------------------------------------------------------------------ */
.page-about-access__routes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    width: 100%;
}
.page-about-access__routes-list > .c-route-row {
    flex: 1 0 0;
    min-width: 0;
    max-width: none;
}
.page-about-access__routes-list .c-route-row__desc p {
    margin: 0;
}

/* ------------------------------------------------------------------
 * SP (<=768px)
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    .page-about-access { gap: 30px; padding: 20px 0 0; }

    .page-about-access__address-row {
        flex-direction: column;
        gap: 20px;
    }
    .page-about-access__address-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 330;
    }
    .page-about-access__address-card {
        padding: 20px;
    }
    .page-about-access__address-name {
        font-size: 20px;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .page-about-access__address-lines p {
        font-size: 14px;
    }
    .page-about-access__address-tel {
        width: 100%;
    }

    /* 2026-10-13: SP も height 固定を削除。中身の画像比率に任せる */
    .page-about-access__map-placeholder {
        font-size: 14px;
    }

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

    /* 2026-10-19 SP バグ修正 + Figma SP 準拠
       情報カードが flex:1 0 0 のまま縦並びになり高さ 0 に潰れ、校名・住所・電話ボタンが見えていなかった */
    .page-about-access__address-photo {
        aspect-ratio: auto;
        height: 200px;
        border-radius: 5px;
    }
    .page-about-access__address-card {
        flex: none;
        align-self: auto;
        width: 100%;
        padding: 16px 18px 16px 16px;
        border-radius: 5px;
    }
    .page-about-access__address-info {
        gap: 8px;
    }
    .page-about-access__address-name {
        margin: 0;
        padding-bottom: 10px;
        font-size: 20px;
    }
    .page-about-access__address-lines p {
        line-height: 1.8;
    }
    /* 交通案内: 小さいピル (電車/バス) を左、説明を右に並べる (Figma SP Route Row) */
    .page-about-access__routes-list {
        gap: 20px;
    }
    .page-about-access__routes-list > .c-route-row.c-route-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px 12px 12px;
        border-radius: 5px;
    }
    .page-about-access__routes-list .c-route-row__label.c-route-row__label {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 4px 12px;
        font-size: 11px;
        line-height: 1.2;
    }
    .page-about-access__routes-list .c-route-row__desc.c-route-row__desc {
        flex: 1 1 0;
        min-width: 0;
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }
}

/* ============================================================================
 * MAP 画像 (iframe から img に変更 2026-10-08)
 * ========================================================================== */
.page-about-access__map-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.page-about-access__map-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* ==========================================================================
 * 2026-10-16 鈴木様指摘: 交通案内下に /about/route/ 通学ルートへの誘導バナー
 * ========================================================================== */
.page-about-access__route-banner {
    width: 1240px;
    max-width: 100%;
    padding: 0; /* 2026-10-19: 上のセクション箱 (1240px) と左右端を揃える */
    margin-top: 20px; /* 2026-10-19: 親 gap 30 + 20 = 箱との間 50px */
    /* 2026-10-16 佐藤様指摘: 下部にマージンを追加 (次セクションと余白を取る) */
    margin-bottom: 60px;
    box-sizing: border-box;
}
.page-about-access__route-banner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 40px;
    background: var(--ytc-bg-brand-soft, #ddebff);
    border: 2px solid var(--ytc-border-strong, #39364e);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ytc-border-strong, #39364e);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-about-access__route-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--ytc-border-strong, #39364e);
}
.page-about-access__route-banner-card:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--ytc-border-strong, #39364e);
}
.page-about-access__route-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}
.page-about-access__route-banner-en {
    display: inline-block;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    /* 2026-10-16 佐藤様指摘: ROUTE テキストを白に */
    color: #fff;
    margin-bottom: 6px;
}
.page-about-access__route-banner-title {
    margin: 0 0 6px;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: var(--ytc-text-primary, #000);
}
.page-about-access__route-banner-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ytc-text-primary, #000);
}
.page-about-access__route-banner-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    border-radius: 999px;
    border: 2px solid var(--ytc-border-strong, #39364e);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}
.page-about-access__route-banner-cta-arrow {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

@media screen and (max-width: 768px) {
    .page-about-access__route-banner {
        padding: 0 15px; /* 2026-10-19: SP はセクション箱と同じ左右 15px */
        margin-top: 0;
    }
    .page-about-access__route-banner-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 24px 20px;
    }
    .page-about-access__route-banner-title {
        font-size: 20px;
    }
    .page-about-access__route-banner-sub {
        font-size: 14px;
    }
    .page-about-access__route-banner-cta {
        justify-content: center;
    }
}