.course-display {
    position: relative;
}

/* オーバーレイ土台 */
.route-iframe {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 100001;
    /* SWELLの固定ヘッダー等より前面に */
    background: rgba(0, 0, 0, .5);
    border-radius: 20px;
    padding: 1rem;
    box-sizing: border-box;
    opacity: 0;
    /* フェード演出 */
    transition: opacity .18s ease;
    padding-top: var(--safe-top, 1rem);
}

.route-iframe.is-open {
    display: block;
    opacity: 1;
}

/* モーダル本体 */
.route-iframe .modal-panel {
    background: #fff;
    margin: auto;
    max-width: 960px;
    width: 100%;
    height: min(80vh, 600px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transform: translateY(6px) scale(.98);
    /* ふわっと入る */
    transition: transform .2s ease;
}

.route-iframe.is-open .modal-panel {
    transform: translateY(0) scale(1);
}

/* iframe領域はフレックスで伸縮 */
.route-iframe iframe {
    flex: 1;
    width: 100%;
    border: 0;
}

/* ===== 下部フッター（新規） ===== */
.route-iframe .modal-footer {
    display: flex;
    gap: .5rem;
    padding: .5rem;
    border-top: 1px solid #eee;
    background: #f9f9f9;
}

.route-iframe .modal-footer .modal-close,
.route-iframe .modal-footer .modal-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .8rem;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    /* aタグの下線消し */
    border: none;
    /* buttonの枠消し */
}

/* 左：閉じる */
.route-iframe .modal-footer .modal-close {
    background: #e8e8e8;
    color: #333;
}

.route-iframe .modal-footer .modal-close:hover {
    background: #dcdcdc;
}

/* 右：掲載サイトへ（別タブ） */
.route-iframe .modal-footer .modal-link {
    background: #2a73d9;
    color: #fff;
}

.route-iframe .modal-footer .modal-link:hover {
    background: #1c58a8;
}

/* モバイル余白最適化＆安全なvh */
.route-iframe {
    padding: clamp(12px, 2vw, 20px);
}

@supports (height: 100dvh) {
    .route-iframe .modal-panel {
        height: min(78dvh, 620px);
    }
}