@charset "UTF-8";

/*Zoomifyビュアー全体*/
#Z_wrapper {
    width:100%;
    max-width:950px;
    display:flex;
}

/*画像などの左側部分*/
#Z_left {
    width:85%;
}

/*サムネイルのある右側部分*/
#Z_right {
    width:15%;
    text-align: center;
}
/*Zoomifyビュアー部分*/
#Z_viewer{
    position:relative;
    width:100%;
    aspect-ratio: 1 / 1;
    max-height:637px;
}

#Z_container { 
    width:100%;
    height:100%;
    background-color: #EDEDED;
}

/*実寸表示部分*/
#Z_scaleValue {
    position:absolute;
    bottom:40px;
    right: 42px;
    width:140px;
    height:4px;
    border:solid 2px #fff;
    border-top:none;
    box-shadow: 1px 1px 1px #808080;
    pointer-events: none;
}

/*実寸の値部分*/
#Z_scaleText {
    position:absolute;
    top:-28px;
    left:36px;
    font-size:15px;
    color:#fff;
    font-family: "Helvetica",sans-serif;
    font-weight: bold;
    letter-spacing : 0.03rem;
    text-shadow: 1px 1px 1px #808080;
}

/*≒以外の数値の部分*/
#Z_scaleNum {
    margin-left:5px;
}

/*Zoomifyビュアーの下部の操作する部分*/
#Z_controlArea {
    text-align: center;
}

/*拡大縮小操作部分*/
#Z_scaleArea {
    padding-top:15px;
    /*範囲選択を無効化する*/
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select:none;
}

/*拡大縮小操作部分の位置調整*/
#Z_scaleWrapper {
    position:relative;
}

/*縮小ボタン*/
#zoomOut {
    padding:5px;
    margin-right:10px;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}
@media screen and (min-width:990px) {
    #zoomOut:hover{
        opacity:0.7;
    }
}

/*スライドバー*/
#zoomSliderTrack{
    position: relative;
    width:50%;
    height:2px;
    padding: 5px 0;
    margin-bottom: 9px;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}

/*拡大ボタン*/
#zoomIn{
    padding:5px;
    margin-left:10px;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}
@media screen and (min-width:990px) {
    #zoomIn:hover{
        opacity:0.7;
    }
}

/*拡大率を示すオブジェクト*/
#buttonSliderDiv{
    position:absolute;
    width:20px;
    height:20px;
    cursor:pointer;
}
/*拡大率を示すオブジェクトに影をつける*/
#buttonSliderDiv::after{
    content:"";
    position:absolute;/*buttonSliderDiv*/
    top:0;
    left:0;
    width:20px;
    height:20px;
    border-radius:50%;
    box-shadow: 4px 2px 5px #dedede;
}

/*拡大率を示すオブジェクトの画像サイズ*/
#buttonSliderZoom{
    position:relative;
    width:20px;
    height:20px;
    /*画像のドラッグを禁止することでオブジェクトのドラッグでできるようになる*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}

/*テキスト部分*/
#Z_textArea {
    padding:20px 0;
}

/*テキスト*/
#Z_textArea p {
    margin:0;
    font-size:12px;
}

/*サムネイルの画像部分（img要素）*/
.Z_trigger {
    width:80%;
    margin:5px;
    cursor:pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}

/*選択されているサムネイル（枠を付ける）*/
.Z_trigger.show {
    outline: 3px solid #F99B6F;
    outline-offset:-2px;
}

@media screen and (max-width:900px) {
    /*実寸表示部分*/
    #Z_scaleValue {
        bottom:20px;
        right:15px;
        width:100px;
    }

    /*実寸の値部分*/
    #Z_scaleText {
        top:-23px;
        left:22px;
        font-size:12px;
    }    
}

/* スマートフォンなどのタッチデバイスの場合 */
@media (pointer: coarse) {
    /* 要素をタップしたときのスタイルを無効にする */
    #Z_close:active, #zoomOut, #zoomSliderTrack, #zoomIn, #buttonSliderDiv, #buttonSliderZoom {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }