/* =========================================
   アクセスセクション（画像プレミアムデザイン版）
========================================= */

/* 外側の背景エリア（青色） */
.gakusai-access-section,
.access-section {
    padding: 60px 20px;
    background-color: #1f80c9;
    /* 背景ブルー */
    display: flex;
    justify-content: center;
}

/* カラフルな縁取りを作るラッパー */
.access-card-wrapper,
.access-card-outer {
    background: linear-gradient(135deg, #1af1b1, #1f80c9, #ffc73c, #ff6b6b);
    padding: 3px;
    /* この余白がグラデーション枠線の太さ */
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

/* 白いメインカード部分 */
.access-card,
.access-card-inner {
    background-color: #ffffff;
    border-radius: 17px;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* --- タイトル部分 --- */
.access-header {
    text-align: center;
    margin-bottom: 40px;
}

.access-title {
    font-family: var(--font-mincho, "Yu Mincho", "Hiragino Mincho ProN", serif);
    font-size: 24px;
    font-weight: normal;
    color: #2c4463;
    letter-spacing: 4px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.access-title::before,
.access-title::after {
    content: "";
    width: 25px;
    height: 1px;
    background-color: #cbd5e1;
}

.access-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #1f80c9, #1af1b1, #ffc73c, #ff6b6b);
    border-radius: 2px;
}

/* --- コンテンツ配置 --- */
.access-content,
.access-content-grid {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* 左側：マップ */
.access-map,
.access-map-container,
.center-map {
    flex: 1;
    width: 100%;
}

.access-map iframe,
.access-map-container iframe,
.center-map iframe {
    border-radius: 12px;
    display: block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* 右側：アクセスリスト */
.access-info,
.access-details {
    flex: 1;
}

.access-time {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 各リストの項目 */
.access-time li {
    padding-left: 18px;
    position: relative;
}

/* 共通設定：リスト左側のカラフルな縦線 */
.access-time li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 4px;
}

/* 各路線ごとに縦線のグラデーションを変更 */
.access-time li:nth-child(1)::before {
    background: linear-gradient(to bottom, #1f80c9, #42e695);
}

.access-time li:nth-child(2)::before {
    background: linear-gradient(to bottom, #42e695, #ffc73c);
}

.access-time li:nth-child(3)::before {
    background: linear-gradient(to bottom, #1e90ff, #1af1b1);
}

.access-time li:nth-child(4)::before {
    background: linear-gradient(to bottom, #1af1b1, #ff6b6b);
}

/* 路線名 */
.access-time .route {
    font-size: 16px;
    font-weight: bold;
    color: #2c4463;
    margin-bottom: 4px;
    line-height: 1.4;
}

/* 詳細（駅名・徒歩） */
.access-time .time {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* --- スマホ＆タブレット対応 (レスポンシブ) --- */
@media screen and (max-width: 768px) {

    .gakusai-access-section,
    .access-section {
        padding: 30px 24px !important;
        /* 左右の余白を大きくしてカードを狭く */
    }

    .access-card-wrapper,
    .access-card-outer {
        padding: 2px !important;
        border-radius: 12px !important;
    }

    .access-header {
        margin-bottom: 20px !important;
    }

    .access-title {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .access-content,
    .access-content-grid {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .access-card,
    .access-card-inner {
        padding: 20px 8px !important;
        border-radius: 10px !important;
        /* ラッパー12px - padding 2px = 10px */
    }

    .access-map iframe,
    .access-map-container iframe,
    .center-map iframe {
        height: 250px !important;
    }

    .access-time {
        gap: 16px !important;
    }

    .access-time li {
        padding-left: 12px !important;
    }

    .access-time .route {
        font-size: 22px !important;
    }

    .access-time .time {
        font-size: 19px !important;
    }
}