@charset "utf-8";
/*----------------------------*/
/* 製品詳細ページのスライダー */
/*----------------------------*/
/*----------------------------*/
/* 基礎設定 */
/*
画像はMAX3:4で表示する設定にしています
アスペクト比を変更する場合
.photoのpadding-topを変更してください
縦横比が足りない場合はセンター揃えで表示されます
*/
/*----------------------------*/
/*スライダ-本体*/
.mainSlider{
    margin: 0 auto;
    opacity: 0;
}
.mainSlider.slick-initialized{
    opacity: 1;
}
.mainSlider .slick-slide{
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-transform:perspective(0);/*Safariでのチラつき防止*/
}
/* focusを無効化する */
.mainSlider .slick-slide:focus,
.thumbSlider .slick-active:focus
{
    outline: none;
}
/*---------*/
/* 画像 */
.mainSlider .photo,
.thumbSlider .photo
{
    width: 100%;
    padding-top: 66.666%;
    position: relative;
    overflow: hidden;
}
.mainSlider .photo > img,
.thumbSlider .photo > img
{
    display: block;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-top: 4px solid white;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
/*---------*/
/* 矢印 */
.sliderArrow{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 1;
    opacity: 0.35;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    cursor: pointer;
}
.sliderArrow > svg{
    width: 48px;
}
.sliderArrow:hover{
    opacity: 1;
}
.sliderArrow.prevArrow{
    left: 8px;
    -webkit-transform: scale(-1,1)translateY(-50%);
            transform: scale(-1,1)translateY(-50%);
}
.sliderArrow.nextArrow{
    right: 8px;
}
/*-----------------------*/
/* サムネイル */
/* MAX15まで表示可能--調整はslick_detail.js参照 */
.thumbSlider .slick-track{
    /* サムネイルの配置を初期化する */
    -webkit-transform: unset !important;
            transform: unset !important;
    /* widthを100％にする*/
    width: 100% !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
/* ▲初期化▲ */
#move__container{
    width: 100%;
    position: relative;/* NiceScrollのPCでの挙動を安定させる//理由は不明 */
}
.thumbSlider{
    width: 100%;/* NiceScrollのPCでの挙動を安定させる//理由は不明 */
    opacity: 0;
}
.thumbSlider.slick-initialized{
    opacity: 1;
}
.thumbSlider .slick-slide{
    width: calc(100% / 5) !important;
    position: relative;
    cursor: pointer;
}
.thumbSlider .slick-slide::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 1;
}
.thumbSlider .slick-slide.slick-current::before{
    background: rgba(255,255,255,0.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
/*-----------------------*/
/* スクロールバー
/* 表示されるスクロールバーをデザインに合う形にする */
.thumbSlider .slick-track::-webkit-scrollbar{
    width: 4px;
    height: 4px;
    background: transparent;
    /*Google Chrome、Safariへの対応*/
    display: none;
}
/*スクロールバーのレール*/
.thumbSlider .slick-track::-webkit-scrollbar-track {
    background: transparent;
    border: none;
    border-radius: 2px;
}
/*スクロールバーの動く部分*/
.thumbSlider .slick-track::-webkit-scrollbar-thumb{
    background: transparent;
    border-radius: 2px;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.thumbSlider .slick-track::-webkit-scrollbar-thumb:hover{
    background: transparent;
}
/*-----------------------*/
/*NiceScroll無効*/
/* #ascrail2000{display: none; pointer-events: none;}
#ascrail2000 > .nicescroll-cursors{display: none;}
#ascrail2000-hr > .nicescroll-cursors{display: none;}
#ascrail2000-hr.nicescroll-rails.nicescroll-rails-hr{z-index: -99; display: none;} */



/*------------------*/
/*タブレット*/
/*------------------*/
@media(max-width:959px){
    /*NiceScroll//スクロールバーの挙動を安定させる*/
    #ascrail2000-hr > .nicescroll-cursors{display: block;}
    #ascrail2000-hr.nicescroll-rails.nicescroll-rails-hr{z-index: auto; display: block;}
    #ascrail2000-hr.nicescroll-rails.nicescroll-rails-hr:hover{z-index: 99;}
    /* 画像//全体をグラブにするので画像中央にpointerを置く */
    .mainSlider .photo > img,
    .thumbSlider .photo > img
    {
        border: none;
    }
    .thumbSlider .photo::before{
        content: "";
        display: block;
        height: 60%;
        width: 60%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        z-index: 1;
        cursor: pointer;
    }
    /* サムネイルをスワイプで見れるようにする */
    #move__container{
        width: 100%;
        overflow: hidden;
        margin-top: 8px;
        position: static;
        cursor: -webkit-grab;
        cursor: grab;
    }
    .thumbSlider .slick-list{
        overflow: visible !important;
        position: static !important;
    }
    .thumbSlider{
        width: auto;
        margin: 0;
        position: static;
    }
    .thumbSlider .slick-slide{
        width: calc(100% / 5) !important;
        min-width: calc(100% / 4.8) !important;
        margin: 0;
        margin-right: 8px;
        cursor: -webkit-grab;
        cursor: grab;
        -webkit-transform:perspective(0);/*Safariでのチラつき防止*/
    }
    .thumbSlider .slick-track{
        /* スクロールできるように解除 */
        word-spacing: normal;
        width: 100% !important;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;

        /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
        -ms-overflow-style: none;
        /*Firefoxへの対応*/
        scrollbar-width: none;
    }
    /*---------*/
    /* 矢印 */
    .sliderArrow > svg{
        width: 40px;
    }
    .sliderArrow:hover{
        opacity: 0.35;
    }
    .sliderArrow:active{
        opacity: 1;
    }
}/* タブレットラスト */


/*------------------*/
/*スマホ*/
/*------------------*/
@media(max-width:559px){
    #move__container{
        margin-top: 4px;
    }
    .thumbSlider .slick-slide{
        min-width: calc(100% / 2.5) !important;
        margin-right: 4px;
    }
    .sliderArrow > svg{
        width: 32px;
    }
}/* スマホラスト */