@charset "utf-8";

.map-page {
    text-align: center;
}

.map-page__container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1440px;
    width: 100%;
}

.map-page__title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 3.6rem;
    font-weight: 600;
}

.map-page__wrapper {
    width: 100%;
    max-width: 1024px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

.status {
    margin-top: 16px;
    display: inline-block;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
}

.status--selling { background: #e67e22; color: #fff; }
.status--moving  { background: #2980b9; color: #fff; }
.status--resting { background: #7f8c8d; color: #fff; }

.time {
    margin-top: 8px;
    font-size: 1.6rem;
    color: #555;
}

.map-link {
    margin-top: 12px;
    display: inline-block;
    text-decoration: none;
    color: #1a73e8;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ===============================================
 *
 * メディアクエリ タブレット縦 (768px ~ 1023px)
 *
 * ============================================ */


@media (max-width: 1023px) {
    .map-page__wrapper {
        width: 90%;
        aspect-ratio: 1 / 1;
    }
}

/* ===============================================
 *
 * メディアクエリ SP標準 (480px ~ 767px)
 *
 * ============================================ */

@media (max-width: 767px) {
    .map-page__title {
        font-size: clamp(3.2rem, calc(1.6vw + 20px), 3.6rem);
    }
    
    .map-page__wrapper {
        width: 100%;
        aspect-ratio: 3 / 4;
    }
}

/* ===============================================
 *
 * メディアクエリ SP ( ~ 479px)
 *
 * ============================================ */

@media (max-width: 479px) {
    .map-page__title {
        font-size: clamp(2.2rem, calc(3.5vw + 5px), 3.2rem);
    }

    .status {
        font-size: 1.4rem;
    }

    .time {
        font-size: 1.4rem;
    }

    .map-link {
        font-size: 1.2rem;
    }
}