@charset "Shift_JIS";

/*------------------------------------------------------------
PC版
------------------------------------------------------------*/
/*モーダルウィンドウ（非表示時）*/
#Z_modalWrap {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
}

/*モーダルウィンドウ（表示時）*/
#Z_modalWrap.show {
    opacity: 1;
    visibility: visible;
    z-index: 10000;
}

/*モーダルウィンドウ（幕）*/
#Z_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh + 100px);
    background-color: rgba(242, 242, 242, .92);
    z-index: 10000;
    cursor:pointer;
}

/*Zoomifyビュアー全体*/
#Z_wrapper {
    position:relative;
    z-index: 10001;
    width: calc(100vw - 170px);
    height:calc(100vh - 115px);
    margin:80px 60px 0 60px;
    padding:25px 25px 0 25px;
    background-color: #fff;
}

/*モーダルウィンドウのバツ印*/
#Z_close {
    position:fixed;
    z-index:110000;
    top:21px;
    right:69px;
    width:36px;
    height:36px;
    cursor:pointer;
}

#Z_close img {
    width:100%;
}

/*色名表示部分*/
#Z_colorNameArea {
    margin-bottom:10px;
}
#Z_colorNameArea p {
    margin:0;
}

/*Zoomifyビュアー部分*/
#Z_viewer {
    position:relative;
    width:100%;
    height: calc(100% - 190px);
    /*ビュアーの縦横が狭すぎるときのZoomifyの調整を発生させないための設定*/
    min-width:1px;
    min-height:1px;    
}

/*画像表示部分*/
#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_bottom {
    width:100%;
    height:67px;
    background-color: #fff;
}

/*Zoomifyビュアーの下部の操作する部分*/
#Z_controlArea {
    display:flex;
    position:relative;
    height:67px;
}

/*罫線を疑似要素で作成*/
#Z_controlArea::after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 1px;
    background-image: radial-gradient(circle farthest-side, #404041 25%, transparent 0, transparent 100%);
    background-size: 5px 1px;
}

/*テキスト部分*/
#Z_textArea {
    width:calc(100% - 225px);
    padding:14px 0;
}

/*テキスト*/
#Z_textArea p {
    position:relative;
    margin:0 0 0 12px;
    color:#595959;
    font-size:0.75rem;
    letter-spacing : 0.04rem;
}

#Z_textArea p:first-child {
    margin-bottom:5px;
}

/*テキストの前の中黒*/
#Z_textArea p::before {
    content:"・";
    position:absolute;
    left:-17px;
}

/*拡大縮小操作全体*/
#Z_scaleArea {
    position:relative;
    width:225px;
    /*範囲選択を無効化する*/
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select:none;
}

/*拡大縮小操作部分の位置調整*/
#Z_scaleWrapper {
    position:absolute;/*Z_scaleArea*/
    top:16px;
    right:11px;
}

/*縮小ボタン*/
#zoomOut {
    width:10px;
    height:10px;
    padding:5px;
    margin:8.5px 9px 8.5px 0;
    cursor:pointer;
    /*ドラッグを無効化する*/
    -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;
    z-index:10900;/*buttonSliderDiv::after【10800】zoomSliderTrack【10900】buttonSliderZoom【11000】*/
    width:143px;
    padding:5px 0;
    margin-bottom:12px;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}

/*拡大ボタン*/
#zoomIn{
    width:10px;
    height:10px;
    padding:5px;
    margin:8.5px 0 8.5px 9px;
    /*ドラッグを無効化する*/
    -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:16px;
    height:16px;
}

/*拡大率を示すオブジェクトに影をつける*/
#buttonSliderDiv::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:10800;/*buttonSliderDiv::after【10800】zoomSliderTrack【10900】buttonSliderZoom【11000】*/
    width:16px;
    height:16px;
    border-radius:50%;
    box-shadow: 4px 2px 5px #dedede;
}

/*拡大率を示すオブジェクトの画像サイズ*/
#buttonSliderZoom{
    position:absolute;
    z-index:11000;/*buttonSliderDiv::after【10800】zoomSliderTrack【10900】buttonSliderZoom【11000】*/
    width:16px;
    height:16px;
    /*画像のドラッグを禁止することでオブジェクトのドラッグでできるようになる*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}

/*サムネイル部分*/
#Z_thumbnailArea {
    width:100%;
    margin-top:14px;
}

/*サムネイル一覧（ul要素）*/
#Z_thumbnailList {
    display:flex;
    width:100%;
    margin:0;
    padding:0;
    overflow-y:auto;
    justify-content:center;
    flex-flow: row wrap;
}

/*サムネイル（li要素）*/
#Z_thumbnailList .Z_thumbnail {
    margin:0 10px 10px 10px;
    list-style:none;
}

/*サムネイル位置調整のための空要素*/
#Z_thumbnailList .Z_dumyThumbnail {
    list-style: none;
    width:64px;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin:0 10px 0 10px;
    margin-top: 0;
    margin-bottom: 0;
}

/*サムネイルのクリック部分（div要素）*/
#Z_thumbnailList .Z_thumbnail .Z_thumbnailTrigger {
    width:64px;
    height:64px;
    cursor: pointer;
}

/*サムネイルの画像部分（img要素）*/
#Z_thumbnailList .Z_thumbnail .Z_thumbnailTrigger img {
    width:100%;
    vertical-align: bottom;
    pointer-events: none;
    /*範囲選択を無効化する*/
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select:none;
    /*ドラッグを無効化する*/
    -ms-user-drag:none;
    -moz-user-drag:none;
    -webkit-user-drag: none;
    -o-user-drag:none;
}


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

/*サムネイルの色名部分（span要素）*/
#Z_thumbnailList .Z_thumbnail .Z_thumbnailTrigger span {
    display:block;
    font-size:10px;
    font-weight:bold;
    text-align: center;
    pointer-events: none;
  
}

/*------------------------------------------------------------
SP版
------------------------------------------------------------*/
@media screen and (max-width:990px) {

    /*Zoomifyビュアー全体*/
    #Z_wrapper {
        margin:0;
        width:calc(100% - 30px);
        height: calc(var(--vh, 1vh) * 100 - 44px);
        padding:44px 15px 0 15px;
    }

    /*モーダルウィンドウのバツ印*/
    #Z_close {
        width: 18px;
        height:18px;
        top:13px;
        right:15px;
    }

    /*モーダルウィンドウ（幕）*/
    #Z_overlay {
        background-color:#fff;
    }  

    /*色名表示部分*/
    #Z_colorNameArea p {
        font-size:0.8rem;
    }

    /*Zoomifyビュアー部分*/
    #Z_viewer {
        height: calc(100% - 263px);
    }

    #Z_container {
        height: 100%;
    }

    /*実寸表示部分*/
    #Z_scaleValue {
        bottom:20px;
        right:15px;
        width:100px;
    }

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

    /*テキスト部分*/
    #Z_textArea {
        width:100%;
    }

    /*テキスト*/
    #Z_textArea p {
        margin-left:5px;
        color:#5F5F5F;
        font-size:11px;
        font-weight:300;
        letter-spacing: initial;
    }

    /*横幅が400px以下であればフォントサイズを10pxに変更*/
    @media screen and (max-width:400px) {
        #Z_textArea p {
            font-size:10px;
        }
    }

    /*テキストの前の中黒*/
    #Z_textArea p::before {
        left:-11px;
        font-weight:300;
    }    
    
    /*拡大縮小操作部分
    SP時は非表示*/
    #Z_scaleArea {
        display:none;
    }

    /*サムネイル一覧（ul要素）*/
    #Z_thumbnailList {
        justify-content:center;
        flex-flow: row wrap;
    }

    /*サムネイル（li要素）*/
    #Z_thumbnailList .Z_thumbnail {
        margin:0 20px 10px 20px;
    }
 
    /*サムネイル位置調整のための空要素*/
    #Z_thumbnailList .Z_dumyThumbnail {
        width:55px;
        margin:0 20px 0 20px;
    }

    /*サムネイルのクリック部分（div要素）*/
    #Z_thumbnailList .Z_thumbnail .Z_thumbnailTrigger {
        width:55px;
        height:55px;
    }

}

/* スマートフォンなどのタッチデバイスの場合 */
@media (pointer: coarse) {
    /* 要素をタップしたときのスタイルを無効にする*/
    #Z_close, #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;
    }
  }