@charset "utf-8";

/* ---
    館内マップページ（space）
----------------------------------- */
.floor-map_around{
    width:100%;
    margin:60px auto 0 auto;
    .floor-map{
        width:800px;
        height: 431px;
        margin: 0 auto 30px auto;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.07);
        position: relative;
        background-size: 100%;
        background-repeat: no-repeat;
        &.f2{
            background-image: url(../images/space/floor_2f_800_2.png);
        }
        &.f3{
            background-image: url(../images/space/floor_3f_800_2.png);
        }
        &:last-child{
            margin: 0 auto;
        }
    }

    .floor-map{
        .point{
            width: 45px;
            height: 74px;
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
            
            &.p01{ top:160px; right:303px; background-image: url(../images/space/point_icon01.png); }
            &.p02{ top:100px; right:240px; background-image: url(../images/space/point_icon02.png); }
            &.p03{ top:130px; left:270px; background-image: url(../images/space/point_icon03.png); }
            &.p04{ top:255px; left:200px; background-image: url(../images/space/point_icon04.png); }
            &.p05{ top:255px; left:315px; background-image: url(../images/space/point_icon05.png); }
            &.p06{ top:275px; right:100px; background-image: url(../images/space/point_icon06.png); }
            &.p07{ top:275px; right:270px; background-image: url(../images/space/point_icon07.png); }
            &.p08{ top:275px; left:365px; background-image: url(../images/space/point_icon08.png); }
            &.p09{ top:275px; left:207px; background-image: url(../images/space/point_icon09.png); }

            @media (max-width:767px){
                width:30px;
                height:49.3333px;

                &.p01{ top:100px; left:283px; }
                &.p02{ top:70px; right:145px; }
                &.p03{ top:80px; left:167px; }
                &.p04{ top:160px; left:120px; }
                &.p05{ top:160px; left:195px; }
                &.p06{ top:170px; right:60px; }
                &.p07{ top:170px; right:170px; }
                &.p08{ top:170px; left:225px; }
                &.p09{ top:170px; left:130px; }
            }
        }
        @media (max-width:767px){
            max-width: 500px;
            height: 300px;
            overflow-x: scroll;
            background-color: #fff;
            margin: 20px;
        }
    }

    @media (max-width:767px){
        overflow-x:scroll;
    }
}

.floor-detail_list{
    width:100%;
    .floor-detail{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        @media (max-width:767px){
            flex-direction: column;
        }
        > div{
            width: 50%;
            @media (max-width:767px){
                width:100%;
            }
        }
    }
}

.floor-detail{
    margin:0 auto 60px auto;
    .floor-detail_text{
        display: flex;
        flex-direction: column;
        padding: 20px;
    }
    .floor-detail_image{
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            li{
                width: 50%;
                img{
                    display:block;
                    padding: 10px;
                }
                @media (max-width:767px){
                    width: 100%;
                }
            }
        }
    }
    &.right{
        flex-direction: row-reverse;
    }
    &:last-child{
        margin:0 auto;
    }
    @media (max-width:767px){
        margin: 0 auto 30px auto;
    }
}