/* floorMapArea */
#floorMap {
    background: #fff;
}



#floorMap h3 {
    font-size: 3em;
    position: absolute;
    top: 0;

}

#floorMap .floorMapArea {
    padding: 70px;
    width: 70%;
    margin: 0 auto;
    position: relative;
}




@media screen and (max-width:960px) {


    #floorMap .floorMapArea {
        width: 80%;
        left: 10%;
        padding: 80px 20px 30px 20px;
    }


}

@media screen and (max-width:768px) {
    #floorMap {
        padding: 200px 0 0 0;
    }
}

@media screen and (max-width:550px) {
    #floorMap .floorMapArea {
        width: 90%;
        left: 0;
        padding: 0;
        margin: 0 auto;
    }
}

@media screen and (max-width:400px) {
    #floorMap .floorMapArea {
        width: 100%;
        left: 0;
        font-size: 0.9rem;
    }

}

.floorMapArea2f,
.floorMapArea1f {
    position: relative;
    margin-bottom: 150px;
}


/* 会議室 */
.floorBtn2-1 {
    position: absolute;
    top: 78%;
    left: 61%;

}

.floorBtnText2-1 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn2-1Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */
    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -30%;
    /* z-index: 1; */
}

.btn2-1Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText2-1:hover+.btn2-1Img {
    opacity: 1;
    visibility: visible;
    width: 170%;
}


/* 観覧席 */
.floorBtn2-2 {
    position: absolute;
    top: 70%;
    left: 51%;

}

.floorBtnText2-2 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn2-2Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -30%;
    /* z-index: 1; */
}

.btn2-2Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText2-2:hover+.btn2-2Img {
    opacity: 1;
    visibility: visible;
    width: 170%;

}


/* プール */
.floorBtn1-1 {
    position: absolute;
    top: 45%;
    left: 28%;
}

.floorBtnText1-1 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-1Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -30%;
    /* z-index: 1; */
}

.btn1-1Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-1:hover+.btn1-1Img {
    opacity: 1;
    visibility: visible;
    width: 170%;
}

/* トレーニング室 */
.floorBtn1-2 {
    position: absolute;
    top: 20%;
    right: 8%;

}

.floorBtnText1-2 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-2Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    z-index: 1;
}

.btn1-2Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-2:hover+.btn1-2Img {
    opacity: 1;
    visibility: visible;
}

/* トレーニング機器 */
.floorBtn1-3 {
    position: absolute;
    top: 8%;
    right: 22%;
}

.floorBtnText1-3 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-3Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;

    z-index: 1;
}

.btn1-3Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-3:hover+.btn1-3Img {
    opacity: 1;
    visibility: visible;

}

/* 受付 */
.floorBtn1-4 {
    position: absolute;
    top: 45%;
    right: 14%;
}

.floorBtnText1-4 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-4Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -30%;
    /* z-index: 1; */
}

.btn1-4Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-4:hover+.btn1-4Img {
    opacity: 1;
    visibility: visible;
    width: 170%;
}

/* 幼児用プール */
.floorBtn1-5 {
    position: absolute;
    top: 30%;
    left: 44%;
}

.floorBtnText1-5 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-5Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -10%;
    /* z-index: 1; */
}

.btn1-5Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-5:hover+.btn1-5Img {
    opacity: 1;
    visibility: visible;
    width: 120%;
}


/* ロビー */
.floorBtn1-6 {
    position: absolute;
    top: 45%;
    right: 23%;
}

.floorBtnText1-6 {
    background-color: #fff;
    border: 2px solid #333;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 20px;
    position: relative;
    border-radius: 40px;
}

.btn1-6Img {
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    /* ←ふわっと効果 */

    margin: 0 auto;
    position: absolute;
    top: 120%;
    left: -35%;
    /* z-index: 1; */
}

.btn1-6Img img {
    border-radius: 50%;
}

#floorMap .floorBtnText1-6:hover+.btn1-6Img {
    opacity: 1;
    visibility: visible;
    width: 170%;
}