@charset "utf-8";
/* CSS Document */

ul,
li{
    margin:0;
    padding: 0;
    list-style: none;
}

#contents{
    background-color: #45586a;
}

#pano{
    position: absolute;
    width: 1440px;
    height: 760px;
    left:0;
    top:0;
    transform-origin: 0 0;
}
#menu{
    position: absolute;
    width: 1440px;
    height:320px;
    top:760px;
}

#map{
    position: absolute;
    left:80px;
    top:-80px;
    width: 320px;
    height: 360px;
    box-sizing: border-box;
    border:8px solid #fff;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.15);
    background-size: cover;
}
#map div{
    position: absolute;
    background-size:contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.txt_notice{
    position: absolute;
    left:701px;
    top:22px;
}

.scene_list{
    position: absolute;
    left:463px;
    top:100px;
}
.scenelink{
    float: left;
    margin-right: 48px;
    cursor: pointer;
}
.thumb{
    box-sizing: border-box;
    width: 194px;
    height: 123px;
    background-size: cover;
    background-position:center;
}
.current .thumb{
    border:8px solid #75b2d1;
    background-size: calc(100% + 16px) auto;
}
.title{
    text-align: center;
}


.modal{
    position: absolute;
    display: flex;
    opacity:0;
    pointer-events:none;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:5000;
    background:rgba(0,0,0,0.75);
    justify-content: center;
    align-items:center;
    transition:opacity 0.5s ease-out;
}
.modal.hide{
    display: none;
}
.modal.current{
    opacity:1;
    pointer-events:auto;
}


.modal_contents{
    position: relative;
    width: 1137px;
    height: 904px;
    box-sizing: border-box;
    padding:96px;
    background:#fff;
}
.modal_contents.wide{
    width: 1312px;
}
.modal_txt{
    margin-top: 40px;
}
.modal_close{
    position: absolute;
    top:30px;
    right:30px;
    cursor: pointer;
}