@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #241613;
    --red-card: #BD3220;
    --gray-usui: #F9F9F9;
    --beige-matsuru: #E4CEBF;
    --gray-matsuru: #DED9D1;
    --green-matsuru: #628774;
    --beige-matsuru: #E4CEBF;
    --beige-media: #F3EEE4;
    --gray-access: #F2F2F2;
    --gray-about: #D6D6D6;
    --red-footer: #AC3131;
    --green-card: #5B8973;
    --gray-card: #DED9D0;
    --black-card: #272D32;
    --brown-card: #E2CABA;
    --brown2-card: #E6CDBD;
    --transparent: rgba(0,0,0,0);
    --bg-opacity: 0;
}
a:hover{
    opacity: 0.5;
}
main{
    background: #f2f2f2;
}
.mainvisual{
    height: 100dvh;
    background: url(../img/expe/expe-fv.webp) bottom left/cover no-repeat;
}
@media screen and (max-width:767px){
    .mainvisual{
        height: 100dvh;
        background: url(../img/expe/expe-fv-sp.webp) bottom left/cover no-repeat;
        img{
            width: 34.09%;
        }
    }
}

.main-inner{
    width: min(1344px,96%);
    margin: 0 auto;
    .menu-sp{display: none;}
    .menu{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 3rem 0;
        li{
            width: 157.05px;
            height: 64.21px;
            box-sizing: border-box;
            border-left: 1px solid var(--black);
            list-style: none;
            text-align: center;
            white-space: nowrap;
            padding-top: 1.75rem;
            a{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-family: "Zen Kaku Gothic Antique", sans-serif;
                font-size: 54.5px;
                font-weight: normal;
                color: var(--black);
                line-height: 0;
                span{
                    display: block;
                    font-size: 13.61px;
                    margin-top: 2.25rem;
                }
            }
        }
        li:last-child{
            border-right: 1px solid var(--black);
        }
    }

    .ma-style{
        width: 100%;
        position: relative;
        padding-bottom: 3rem;
        hgroup{
            width: 100%;
            font-family: "Zen Kaku Gothic Antique", sans-serif;
            display: flex;
            h2{
                width: fit-content;
                height: 5.2rem;
                position: absolute;
                left: 1.5rem;

                .vertical{
                    height: 4rem;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    font-size: 0.9rem;
                    color: #b3b3b3;
                    letter-spacing: 0;
                    font-weight: 400;
                    transform: none;
                    white-space: nowrap;
                    position: absolute;
                    top: 1rem;
                    left: -2rem;
                }
                .vertical02{
                    height: 4rem;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    font-size: 0.9rem;
                    color: #b3b3b3;
                    letter-spacing: 0;
                    font-weight: 400;
                    transform: none;
                    white-space: nowrap;
                    position: absolute;
                    top: 1rem;
                    left: -2rem;
                }
            }
            p{
                font-size: 23px;
                height: fit-content;
                line-height: 1;
                font-weight: 500;
                white-space: nowrap;
                margin: 1.75rem 0 0 5rem;
                .sp-br{
                    display: none;
                }
            }
        }
    }
    .card-scroll{
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: grab;
        -webkit-overflow-scrolling: touch;
    }
    .card-scroll.is-dragging{
        cursor: grabbing;
    }
    .card-scroll img,
    .card-scroll a{
        user-select: none;
        -webkit-user-drag: none;
    }
    .card-sec{
        width: 1344px;
        min-width: 1344px;
        padding: 3rem 0 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;

        .item{
            width: 324px;
            min-width: 324px;
            background: #628774;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;

            img{
                width: 100%;
                height: auto;
                display: block;
            }
            .text{
                color: var(--white);
                padding: 0.5rem 1rem;
                line-height: 1.6;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                flex: 1;

                h3{
                    font-size: 19.87px;
                    font-weight: normal;
                }

                small{
                    font-size: 12.8px;
                    white-space: nowrap;
                }

                p{
                    font-size: 16px;
                    flex: 1;
                }

                .icon{
                    width: 60%;
                    height: 32px;
                    display: flex;
                    gap: 1rem;
                    margin-top: auto;

                    a{
                        display: block;
                    }
                    a:hover{
                        background: none;
                    }
                }
            }
        }
        .bg-gray{
            background: #808080;
        }
        .bg-black{
            background: #393c41;
        }
        .bg-brown{
            background: #82715e;
        }
    }

    /* 「祭」カード1枚なので横スクロール出さない */
    #ma02{
        .card-scroll{
            overflow-x: hidden;
            overflow-y: visible;
            cursor: default;
        }
        .card-sec{
            width: 324px;
            min-width: 324px;
        }
    }
    /* 「待」カード3枚 */
    #ma03{
        .card-sec{
            width: 1012px;
            min-width: 1012px;
        }
    }
}

.main-inner02{
    width: 100%;
    padding: 1rem 0 4rem;
    #ma04{
        width: min(1344px,96%);
        margin: 0 auto 3rem;
        hgroup{
            width: 100%;
            font-family: "Zen Kaku Gothic Antique", sans-serif;
            display: flex;
            position: relative;
            h2{
                width: fit-content;
                height: 5.2rem;
                position: absolute;
                left: 1.5rem;
                .vertical02{
                    height: 4rem;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    font-size: 0.9rem;
                    color: #b3b3b3;
                    letter-spacing: 0;
                    font-weight: 400;
                    transform: none;
                    white-space: nowrap;
                    position: absolute;
                    top: 1rem;
                    left: -2rem;
                }
            }
            p{
                font-size: 23px;
                height: fit-content;
                line-height: 1;
                font-weight: 500;
                white-space: nowrap;
                margin: 1.75rem 0 0 5rem;
                .sp-br{
                    display: none;
                }
            }
        }
        .card-scroll{
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            cursor: grab;
            -webkit-overflow-scrolling: touch;
        }
        .card-scroll.is-dragging{
            cursor: grabbing;
        }
        .card-scroll img,
        .card-scroll a{
            user-select: none;
            -webkit-user-drag: none;
        }
        .card-sec{
            width: 2704px;
            min-width: 2704px;
            padding: 3rem 0 0;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: flex-start;
            gap: 16px;
            .item{
                width: 324px;
                min-width: 324px;
                background: #bd3220;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                img{
                    width: 100%;
                    height: auto;
                    display: block;
                }
                .text{
                    color: var(--white);
                    padding: 0.5rem 1rem;
                    line-height: 1.6;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    flex: 1;
                    h3{
                        font-size: 19.87px;
                        font-weight: normal;
                    }
                    small{
                        font-size: 12.8px;
                        white-space: nowrap;
                    }
                    p{
                        font-size: 16px;
                        flex: 1;
                    }
                    .icon{
                        width: 60%;
                        height: 32px;
                        display: flex;
                        gap: 1rem;
                        margin-top: auto;
                        a{
                            width: 53.94px;
                            display: block;
                        }
                        a:hover{
                            background: none;
                        }
                    }
                }
            }
        }
    }
}

.main-inner03{
    width: 100%;
    background: var(--gray-matsuru);
    padding: 1rem 0 4rem;
    #stay{
        width: min(1344px,96%);
        margin: 0 auto;
        hgroup{
            h2{
                left: 0;
            }
        }
        .card-scroll{
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            cursor: grab;
            -webkit-overflow-scrolling: touch;
        }
        .card-scroll.is-dragging{
            cursor: grabbing;
        }
        .card-scroll img,
        .card-scroll a{
            user-select: none;
            -webkit-user-drag: none;
        }
        .card-sec{
            width: 664px;
            min-width: 664px;
            padding: 2rem 0 0;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: flex-start;
            gap: 16px;
            .item{
                width: 324px;
                min-width: 324px;
                background: #628774;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                img{
                    width: 100%;
                    height: auto;
                    display: block;
                }
                .text{
                    color: var(--white);
                    padding: 0.5rem 1rem;
                    line-height: 1.6;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    flex: 1;
                    h3{
                        font-size: 19.87px;
                        font-weight: normal;
                    }
                    small{
                        font-size: 12.8px;
                        white-space: nowrap;
                    }
                    p{
                        font-size: 16px;
                        flex: 1;
                    }
                    .icon{
                        width: 60%;
                        height: 32px;
                        display: flex;
                        gap: 1rem;
                        margin-top: auto;
                        a{
                            display: block;
                        }
                        a:hover{
                            background: none;
                        }
                    }
                }
            }
            .bg-brown{
                background: #82715e;
            }
        }
    }
}

@media screen and (max-width:767px){
    .main-inner{
        .menu{display: none;}
        .menu-sp{
            display: block;
            margin-bottom: 2rem;
            ul{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 1.5rem 0;
                li{
                    width: 157.05px;
                    height: 48.27px;
                    box-sizing: border-box;
                    border-right: 1px solid var(--black);
                    list-style: none;
                    text-align: center;
                    white-space: nowrap;

                    a{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        font-family: "Zen Kaku Gothic Antique", sans-serif;
                        font-size: 27.19px;
                        font-weight: normal;
                        color: var(--black);
                        line-height: 1;
                    }
                }
                li:first-child{
                    border-left: 1px solid var(--black);
                }
                span{
                    display: block;
                    font-size: 12.8px;
                    margin-top: 0.5rem;
                }
            }
            .stay-link{
                display: block;
                width: 100%;
                line-height: 48.27px;
                background: var(--white);
                box-sizing: border-box;
                border: 1px solid var(--black);
                text-align: center;
                margin-top: 1rem;
                font-size: 27.19px;
                font-weight: normal;
                color: var(--black);
            }
        }
        .ma-style hgroup p{
            font-size: 18px;
            margin: 0.875rem 0 0 5rem;
            .sp-br{
                display: block;
                line-height: 0.5;
            }
        }
        .card-sec{
            padding: 2rem 0 0;
        }
    }
    .main-inner02{
        #ma04{
            hgroup{
                p{
                    font-size: 18px;
                    margin: 0.875rem 0 0 5rem;
                    .sp-br{
                        display: block;
                        line-height: 0.5;
                    }
                }
            }
            .card-sec{
                padding: 2rem 0 0;
            }
        }
    }
    .main-inner03 #stay .card-sec{
        padding: 1rem 0 0;
    }
}
@media screen and (max-width:550px){
}
@media screen and (max-width:480px){
}

#map-ui-pc{
    width: 100%;
    height: auto;
    aspect-ratio: 2716/2110 ;
    overflow: hidden;
    position: relative;
    
    .map-ui{
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
    }
    
    .mapui-img-wrap{
        width: calc(100% - 25.04%);
        height: 100%;
        flex: 0 0 calc(100% - 25.04%);
        position: relative;
        overflow: hidden;
        background: url(../img/expe-mapui/mapui00-map.webp) center/contain no-repeat;
    }

    .mapui-img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .mapui-img.is-active{
        opacity: 1;
        z-index: 1;
    }

    .btn-container{
        width: 25.04%;
        height: 100%;
        flex: 0 0 25.04%;
        position: relative;
        overflow: hidden;
    }

    .menu-img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .menu-img.is-active{
        opacity: 1;
        z-index: 1;
    }

    .map-btns{
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: auto;
    }

    .map-btn{
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        border-left: 1px solid var(--gray-about);
        border-right: 1px solid var(--gray-about);
        background: transparent;
        cursor: pointer;
        position: relative;
        left: 0;
        z-index: 11;
        a{
            display: block;
            position: absolute;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        a:hover{
            cursor: pointer;
            background: rgba(255,255,255,0.3);       
        }
    }

    .map-btn:hover{
        background: rgba(255,255,255,0.5);
    }

    .map-btn.is-active{
        background: transparent;
    }

    .map-ui.type01 .map-btn:nth-of-type(1){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 2.5%;
            left: 1.5%;
            z-index: 40;         
        }
        .insta{
            width: 33%;
            height: 10%;
            position: absolute;
            bottom: 2.5%;
            left: 20.5%;
            z-index: 40;
        }
    }
    .map-ui.type01 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type01 .map-btn:nth-of-type(3){ top: 0%; height: 8.75%; }
    .map-ui.type01 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type01 .map-btn:nth-of-type(5){ top: 0%; height: 8.75%; }
    .map-ui.type01 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type01 .map-btn:nth-of-type(7){ top: 0%; height: 9%; }
    .map-ui.type01 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type02 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type02 .map-btn:nth-of-type(2){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;          
        }
    }
    .map-ui.type02 .map-btn:nth-of-type(3){ top: 0%; height: 8.75%; }
    .map-ui.type02 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type02 .map-btn:nth-of-type(5){ top: 0%; height: 8.75%; }
    .map-ui.type02 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type02 .map-btn:nth-of-type(7){ top: 0%; height: 9%; }
    .map-ui.type02 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type03 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type03 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type03 .map-btn:nth-of-type(3){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;         
        }
    }
    .map-ui.type03 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type03 .map-btn:nth-of-type(5){ top: 0%; height: 8.75%; }
    .map-ui.type03 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type03 .map-btn:nth-of-type(7){ top: 0%; height: 9%; }
    .map-ui.type03 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type04 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type04 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type04 .map-btn:nth-of-type(3){ top: 0%; height: 8.9%; }
    .map-ui.type04 .map-btn:nth-of-type(4){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;        
        }
    }
    .map-ui.type04 .map-btn:nth-of-type(5){ top: 0%; height: 8.75%; }
    .map-ui.type04 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type04 .map-btn:nth-of-type(7){ top: 0%; height: 8.9%; }
    .map-ui.type04 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type05 .map-btn:nth-of-type(1){ top: 0%; height: 8.86%; }
    .map-ui.type05 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type05 .map-btn:nth-of-type(3){ top: 0%; height: 8.75%; }
    .map-ui.type05 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type05 .map-btn:nth-of-type(5){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;         
        }
    }
    .map-ui.type05 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type05 .map-btn:nth-of-type(7){ top: 0%; height: 8.9%; }
    .map-ui.type05 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type06 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type06 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type06 .map-btn:nth-of-type(3){ top: 0%; height: 8.9%; }
    .map-ui.type06 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type06 .map-btn:nth-of-type(5){ top: 0%; height: 8.9%; }
    .map-ui.type06 .map-btn:nth-of-type(6){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;        
        }
    }
    .map-ui.type06 .map-btn:nth-of-type(7){ top: 0%; height: 9%; }
    .map-ui.type06 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type07 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type07 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type07 .map-btn:nth-of-type(3){ top: 0%; height: 8.9%; }
    .map-ui.type07 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type07 .map-btn:nth-of-type(5){ top: 0%; height: 8.9%; }
    .map-ui.type07 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type07 .map-btn:nth-of-type(7){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 1.3%;
            left: 3.5%;
            z-index: 40;         
        }
    }
    .map-ui.type07 .map-btn:nth-of-type(8){ top: 0%; height: 8.75%; }

    .map-ui.type08 .map-btn:nth-of-type(1){ top: 0%; height: 8.75%; }
    .map-ui.type08 .map-btn:nth-of-type(2){ top: 0%; height: 8.75%; }
    .map-ui.type08 .map-btn:nth-of-type(3){ top: 0%; height: 8.9%; }
    .map-ui.type08 .map-btn:nth-of-type(4){ top: 0%; height: 8.75%; }
    .map-ui.type08 .map-btn:nth-of-type(5){ top: 0%; height: 8.9%; }
    .map-ui.type08 .map-btn:nth-of-type(6){ top: 0%; height: 9%; }
    .map-ui.type08 .map-btn:nth-of-type(7){ top: 0%; height: 8.8%; }
    .map-ui.type08 .map-btn:nth-of-type(8){
        top: 0%;
        height: 38.3%;
        a{
            width: 19%;
            height: 10%;
            position: absolute;
            bottom: 2%;
            left: 1.5%;
            z-index: 40;
        }
    }

    .map-btns02{
        width: 100%;
        height: 100%;
        position: relative;
        inset: 0;
        z-index: 10;
        pointer-events: auto;
    }

    .map-btn02{
        display: block;
        width: 10%;
        height: 10%;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        border-radius: 10%;
    }

    .map-btn02:nth-of-type(1){
        width: 7%;
        height: 6.2%;
        top: 4%;
        left: 60.5%;
    }
    .map-btn02:nth-of-type(2){
        width: 8%;
        height: 6.6%;
        top: 10.5%;
        left: 56.2%;
    }
    .map-btn02:nth-of-type(3){
        width: 7%;
        height: 6.5%;
        top: 20.5%;
        left: 55.4%;
    }
    .map-btn02:nth-of-type(4){
        width: 6%;
        height: 9.2%;
        top: 16%;
        left: 47.5%;
    }
    .map-btn02:nth-of-type(5){
        width: 9.2%;
        height: 8.5%;
        top: 27.8%;
        left: 34.5%;
    }
    .map-btn02:nth-of-type(6){
        width: 7.4%;
        height: 8.6%;
        top: 37.8%;
        left: 21.4%;
    }
    .map-btn02:nth-of-type(7){
        width: 8.9%;
        height: 8.3%;
        top: 50%;
        left: 27.3%;
    }
    .map-btn02:nth-of-type(8){
        width: 7.8%;
        height: 8.9%;
        top: 60.6%;
        left: 26.8%;
    }

    .map-btn02:hover{
        background: rgba(255,255,255,0.25);
    }
    .map-btn02.is-active{
        pointer-events: none;
        background: transparent;
    }
}

#map-ui-sp{
    width: 100%;
    aspect-ratio: 880/1920;
    overflow: visible;
    position: relative;
    display: none;

    .map-ui{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .sp-img-wrap{
        width: 100%;
        height: 100%;
        position: relative;
        background: url(../img/expe-mapui/mapui00-sp.webp) center/cover no-repeat;
    }

    .sp-map-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .sp-map-img.is-active{
        opacity: 1;
        z-index: 1;
    }

    .btn-container{
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
    }

    .map-btns{
        width: 38%;
        height: 100%;
        position: relative;
        inset: 0;
        z-index: 10;
        pointer-events: auto;
    }

    .map-btn{
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        border-left: 1px solid var(--gray-about);
        box-sizing: border-box;
        background: transparent;
        cursor: pointer;
        position: absolute;
        left: 0;
        z-index: 11;
    }

    .map-btn:hover{
        background: rgba(255,255,255,0.5);
    }

    .map-btn.is-active{
        pointer-events: none;
        background: transparent;
    }

    .map-btn:nth-of-type(1){ top: 63.5%; height: 4.7%; }
    .map-btn:nth-of-type(2){ top: 68.1%; height: 4.6%; }
    .map-btn:nth-of-type(3){ top: 72.6%; height: 4.65%; }
    .map-btn:nth-of-type(4){ top: 77.17%; height: 4.5%; }
    .map-btn:nth-of-type(5){ top: 81.6%; height: 4.7%; }
    .map-btn:nth-of-type(6){ top: 86.25%; height: 4.7%; }
    .map-btn:nth-of-type(7){ top: 90.79%; height: 4.5%; }
    .map-btn:nth-of-type(8){ top: 95.2%; height: 4.8%; }

    .map-btns02{
        width: 100%;
        height: 100%;
        position: relative;
        inset: 0;
        z-index: 30;
        pointer-events: none;
    }

    .map-btn02{
        display: block;
        width: 10%;
        height: 10%;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 31;
        pointer-events: auto;
        border-radius: 10%;
    }

    .map-btn02:nth-of-type(1){
        width: 12.3%;
        height: 5%;
        top: 1.4%;
        left: 67%;
    }
    .map-btn02:nth-of-type(2){
        width: 14.9%;
        height: 6.5%;
        top: 6.9%;
        left: 59.5%;
    }
    .map-btn02:nth-of-type(3){
        width: 12%;
        height: 5.5%;
        top: 15.2%;
        left: 61%;
        z-index: 50;
    }
    .map-btn02:nth-of-type(4){
        width: 9.3%;
        height: 6.8%;
        top: 10%;
        left: 48%;
    }
    .map-btn02:nth-of-type(5){
        width: 14.4%;
        height: 6.3%;
        top: 17%;
        left: 33.8%;
    }
    .map-btn02:nth-of-type(6){
        width: 10.8%;
        height: 6.4%;
        top: 21.7%;
        left: 17.7%;
    }
    .map-btn02:nth-of-type(7){
        width: 14%;
        height: 6%;
        top: 29.4%;
        left: 25.3%;
    }
    .map-btn02:nth-of-type(8){
        width: 12.7%;
        height: 7.3%;
        top: 37.6%;
        left: 22%;
    }

    .map-btn02:hover{
        background: rgba(255,255,255,0.25);
    }
    .map-btn02.is-active{
        pointer-events: none;
        background: transparent;
    }

    .link-btns{
        width: calc(100% - 38%);
        height: 100%;
        position: relative;
        inset: 0;
        z-index: 40;
        a{
            display: none;
            width: 20%;
            height: 4%;
            position: absolute;
            bottom: 0.4%;
            left: 2.6%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        a:hover{
            cursor: pointer;
            background: rgba(255,255,255,0.6);       
        }
        .insta{
            width: 34%;
            height: 4%;
            position: absolute;
            bottom: 0.4%;
            left: 29%;
        }
        a.is-active{
            display: block;
        }
    }
}

@media screen and (max-width:767px){
    #map-ui-pc{
        display: none;
    }

    #map-ui-sp{
        display: block;
    }
}