@charset "UTF-8";

/**********************************************************
 *
 * 製品2ndTOP(Apple用) メインPR (PC)
 *
 **********************************************************/


/* slider
--------------------------------------------------	*/
.slider-main{
margin-bottom: 30px;
}

.slide-wrap{
width: 940px;
margin: 0 auto;
}

.product-slide{
width: 720px;
margin: 0 auto;
padding:0;
}

.slick-slider{
margin-bottom: 30px;
}
.slick-slide{
padding: 0;
position:relative;
}
.slick-slide > img{
display: block;
width: 100%;
height: auto;
}

.slide-wrap .slick-prev,
.slide-wrap .slick-next{
width: 34px;
height: 34px;
margin-top: -17px;
}
.slide-wrap .slick-prev{
left: -100px;
}
.slide-wrap .slick-next{
right: -100px;
}
.slide-wrap .slick-prev:hover,
.slide-wrap .slick-next:hover{
opacity:0.8;
}
.slide-wrap .slick-prev{
background: url(/images_osp/common/product_slider_mainpr_icon_left.png) no-repeat 0 0;
background-size: cover;
opacity:1;
}
.slide-wrap .slick-next{
background: url(/images_osp/common/product_slider_mainpr_icon_right.png) no-repeat 0 0;
background-size: cover;
opacity:1;
}
.slide-wrap .slick-prev:before,
.slide-wrap .slick-next:before{
display: none;
}

.js-product-color-selector{
height: 110px;
}
.product-color-name,
.product-color-list{
display: none;
}
.js-color-show .product-color-name.active,
.js-color-show .product-color-list{
display: block;
}

.product-color-name{
margin-bottom: 10px;
text-align: center;
font-size: 16px;
}
.product-color-list{
text-align: center;
font-size: 0;
line-height: 0;
}
.product-color-list.pc-left{
text-align: left;
}
.product-color-list li{
display: inline-block;
vertical-align: top;
width: 168px;
margin: 0 10px 5px 10px;
padding: 5px;
background-color: #FFF;
border: #ccc 1px solid;
cursor: pointer;
}
.product-color-list.col6 li{
width: 135px;
}
.product-color-list li.active,
.product-color-list li:hover{
border: #cc0033 2px solid;
padding: 4px;
}
.product-color-list li span{
display: block;
height: 14px;
overflow: hidden;
text-indent: -999px;
}

/* colors */
.product-color-list li span.product-color-silver{
background-color: #e8e9e9;
}
.product-color-list li span.product-color-spacegray{
background-color: #b1b2b7;
}

/* thumbnail PC */
.thumbnail{
margin: 0 20px;
text-align: center;
font-size: 0;
}
.thumbnail:after{
content: "";
display: block;
clear: both;
}
.thumbnail.pc-left{
text-align: left;
}
.thumbnail-item{
position: relative;
width: 140px;
display: inline-block;
margin: 0 5px 10px 5px;
padding: 8px;
box-sizing: border-box;
border: #ccc 1px solid;
background-color: #FFF;
cursor: pointer;
vertical-align: top;
}
.thumbnail-item.active{
padding: 7px;
border: #cc0033 2px solid;
}
.thumbnail-item img{
width: 100%;
}
.thumbnail-item.movie-thumb:before{
display: block;
content: "";
height: 37px;
width: 37px;
position: absolute;
left: 50%;
top: 50%;
margin: -19px 0 0 -19px;
background: url(/images_osp/common/product_slider_mainpr_icon_play.png) no-repeat 0 0;
background-size: cover;
z-index:10;
}

/* open icon */
.product-slide .modal-open{
display:block;
outline: none !important;
height:74px;
width:74px;
position:absolute;
left:50%;
top:50%;
margin:-37px 0 0 -37px;
text-indent: -999px;
overflow: hidden;
background: url(/images_osp/common/product_slider_mainpr_icon_play.png) no-repeat 0 0;
background-size: cover;
z-index:10;
}
.product-slide .modal-open:hover{
opacity: 0.8;
}

.val-color-wrap .js-img-show{
display: block;
}
.val-color-wrap .js-img-hide{
display: none;
}



/* modal
--------------------------------------------------	*/
#modal-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
}
#modal-content{
position:fixed;
display:none ;
z-index:99999;
}
#modal-content .inner{
position:relative;
width: 940px;
padding-top:56.25%;
overflow:hidden;
}
#modal-content .inner #player{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
z-index:10;
}
#modal-content .modal-close{
width: 3.5em;
position: absolute;
top: -70px;
left: 0;
margin: 0;
padding-top: 30px;
background: url(/images_osp/common/product_slider_mainpr_icon_close.png) no-repeat center top;
font-size: 14px;
color: #d0d0d0;
text-align: center;
cursor: pointer;
z-index: 10;
}
#modal-content .modal-close:hover{
opacity:0.8;
}