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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');/*既にコンテンツの方で読み込んでいれば不要*/

html { height:100%; }
body { height:100%;
    margin:0; padding:0;
    font-family: 'Noto Sans', sans-serif;
    font-size:16px;
}

#pano_wrapper{
    position: relative;
    width: 100%;/*自由に変更可能*/
    height: 100%;/*自由に変更可能*/
}
#pano{
    width: 100%;
    height: 100vh;/*iOSにて縦横切替時に画面いっぱいに広がらない現象対策です。画面いっぱいに広げない場合、100vh指定は不要です。
    現象についてはこちら。iOS14.2でも確認済みです　https://stackoverflow.com/questions/62717621/white-space-at-page-bottom-after-device-rotation-in-ios-safari　*/
}
#pano_modal{
    position: fixed;
    z-index:1000;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity:0;
    transition:opacity 0.5s;
    display:none;
}
#pano_modal.show{
    display:block;
    opacity:1;
}
.pano_modal_contents{
    position: absolute;
    background:#fff;
    box-sizing: border-box;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#pano_modal_img{
    width: 100%;
    height:100%;
    object-fit:cover;
}
#pano_modal_close{
    position: absolute;
    top:110px;
    right:30px;
    cursor: pointer;
}
.reddot_logo{
    position: absolute;
    right:10px;
    top:0px;
    width:90px;
}
.pano_color_box{
    position: absolute;
    left:40px;
    bottom:55px;
    width: 292px;
    height: 290px;
    box-sizing: border-box;
    padding:15px 16px 0;
    border-radius: 16px;
    background-color:rgba(255,255,255,0.7);
    font-size: 12px;
}
.ge .pano_color_box,
.gc .pano_color_box{
    left:auto;
    right:40px;
}
.pano_color_box p{
    margin-top: 0;
    margin-bottom: 0;
    line-height: 100%;
}
.pano_color_box .pano_color_ttl{
    font-size:28px;
    padding-left:5px;
    margin-bottom: 10px;
}
.pano_color_box .pano_color_txt{
    font-size: 14px;
    padding-left:5px;
    margin-bottom: 20px;
    line-height: 120%;
}
.pano_color_box .pano_color_list_ttl{
    
}
.pano_color_list{
    padding:0;
}
.clear::after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clear{
    zoom:1;
}
.pano_color_list li{
    position: relative;
    margin-bottom:5px;
    list-style: none;
    color:#333;
    float:left;
    text-align: center;
    width:60px;
}
.pano_color_list li.long{
    width: 70px;
}
a .pano_color_img{
    display: block;
    margin:auto;
    width: 24px;
    height: 24px;
    border-radius:24px;
    border:4px solid #fff;
    transition:all 0.5s;
    margin-bottom: 5px;
}
a:hover .pano_color_img,
a.current .pano_color_img{
    transform:scale(1.4);
}
a.current::after{
    content : "●";
    color : #000;
    position:absolute;
    top: -11px;
    right: 12px;
    font-size: 14px;
}

#pano_modal_rotateicon{
    display: none;
    transition:opacity 0.5s;
}

@media screen and (max-width: 599px) {
    #pano_modal_close{
        top:110px;
        right:10px;
    }
    .pano_color_box{
        width:calc(100% - 20px);
        max-width: 420px;
        height:auto;
        bottom:12px;
        left:10px;
        right:auto;
        padding-left:15px;
        padding-right:15px;
    }
    .ge .pano_color_box,
    .gc .pano_color_box{
        left:auto;
        right:10px;
    }
    .reddot_logo{
        position: relative;
        float: right;
        top:0;
        right:0;
    }
    .pano_color_box .pano_color_ttl,
    .pano_color_box .pano_color_txt,
    .pano_color_box .pano_color_list_ttl{
    }
    .pano_color_box .pano_color_ttl{
        font-size:21px;
        margin-bottom: 5px;
    }
    .pano_color_box .pano_color_txt{
        font-size: 9px;
        margin-bottom: 10px;
    }

    .pano_color_list{
        position: relative;
        margin-top: 8px;
        margin-bottom:0;
    }
    .pano_color_list li,
    .pano_color_list li.long{
        width: 14.2%;
        max-width: 54px;
        font-size:9px;
    }
    a .pano_color_img{
        width: 18px;
        height: auto;
        border-width:2px;
    }
    a:hover .pano_color_img,
    a.current .pano_color_img{
        transform:scale(1.33);
    }
    a.current::after{
        top: -13px;
        right: 4px;
        font-size: 14px;
    }
    
    #pano_modal_rotateicon{
    }
}
@media screen and (max-device-width: 599px) and (orientation: landscape){
    #pano_modal_rotateicon{
        position: absolute;
        opacity:0;
        display: block;
        left:50%;
        top:50%;
        margin-left:-150px;
        margin-top:-100px;
        opacity:1;
    }
}