@charset "utf-8";

.hero5 {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)), url(../images/guide/guide.jpg) center/cover no-repeat;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* マップの余白 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.map-banner{
    margin-bottom: 80px;

}

/* 1階の画像 */
.map-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.floor-map {
    width: 50%;
}

.floor-map img {
    width: 100%;
}

.map-details {
    width: 50%;
    text-align: left;

}

.map-details ul {
    margin-bottom: 20px;
}

.map-details ul li {
    line-height: 3rem;
    font-size: 21px;
    list-style: none;

}

/* 2階 */

.map-details2 {
    width: 50%;
    text-align: left;
}

.map-details2 ul {
    margin-bottom: 20px;
}

.map-details2 ul li {
    line-height: 2rem;
    font-size: 15px;
    list-style: none;

}


.btn-map {
    display: inline-block;
    /* ★これが重要！これで上の要素と被らなくなります */
    border: 1px solid #ff681c;
    cursor: pointer;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    background-color: #ff681c;
    color: #fff;
    padding: 20px 80px;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 20px;
}

a.btn-map:hover {
    background: #fff;
    color: #ff681c;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 館内案内（マップ部分）のレスポンシブ対応（800px以下） */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 800px) {

    /* --- レイアウトの縦積み化 --- */
    .map-content {
        flex-direction: column;
        /* 横並びを縦並びにする */
        gap: 30px;
        /* 画像と文章の間隔 */
    }

    /* --- 各要素の幅を100%に --- */
    .floor-map,
    .map-details,
    .map-details2 {
        width: 100%;
        /* 50%から100%へ変更 */
    }

    /* --- 画像の調整 --- */
    .floor-map {
        text-align: center;
        /* 画像を中央寄せ */
    }

    .floor-map img {
        max-width: 100%;
        /* 画像が画面からはみ出さないように */
        height: auto;
    }

    /* --- テキスト周りの調整 --- */
    /* 1階と2階でバラバラだった文字サイズを統一して読みやすくする */
    .map-details ul li,
    .map-details2 ul li {
        font-size: 10px;
        /* スマホで読みやすいサイズに統一 */
        line-height: 2.8;
        /* 行間を少し広げてタップしやすく */
    }

    .family-title {
        font-size: 20px;
        /* タイトルも少し小さく調整 */
        font-weight: bold;
        margin-bottom: 15px;
    }

    /* --- ボタンのスマホ対応 --- */
    .button {
        text-align: center;
        /* ボタンを中央寄せ */
        margin-top: 20px;
    }

    /* HTML内のaタグにクラスがない場合の汎用スタイル（念のため） */
    .button a {
        display: block;
        width: 100%;
        /* スマホでは幅いっぱいのボタンに */
        box-sizing: border-box;
        padding: 15px;
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
}