@charset "UTF-8";

/*------------------------------------------------------------
CSS Document

Machie's 商品詳細用CSS

MAKING 171130 sim_mano
-------------------------------------------------------------*/


/*------------------------------------------------------------
CSSの構造

・
-------------------------------------------------------------*/
/*------------------------------------------------------------
商品検索エリアありの場合のスタイル
-------------------------------------------------------------*/
#contents {
padding:100px 0 0px 0;
}

@media screen and (max-width: 799px){
#contents {
padding:0 0 60px 0;
}
}

/*------------------------------------------------------------
商品画像エリア
-------------------------------------------------------------*/

#item_detail{
padding: 10px 0 10px 10px;
margin-bottom: 50px;
background: #fff;
color: #000;
}

#item_photo_area .slick-dots{
margin: 0;
font-size: 0 !important;
}

#item_photo_area .slick-dots li{
width: 19.2%;
padding: 0;
margin:1% 1% 0 0;
font-size: 0 !important;

}

#item_photo_area .slick-dots li:nth-child(5n){
margin-right: 0;
}

#item_photo_area{
padding: 0 !important;
}

@media only screen and (max-width: 1099px) {

#item_detail{
padding: 16px 0 10px 0;
margin:0 16px 50px 16px;
background: #fff;
color: #000;
}

}


@media only screen and (max-width: 767px) {

#item_photo_area .slick-dots li:nth-child(5n){
margin-right: 1%;
}

#item_detail{
padding: 16px 0 10px 0;
background: #fff;
margin-bottom: 50px;
color: #000;
}

}


/*------------------------------------------------------------
商品 タグ
-------------------------------------------------------------*/
#item_detail_area #product_tag_box{
height: 24px;
}

.product_tag_list{
background: #f00;
color: #fff;
font-size: 8px;
line-height: 16px;
height: 16px;
border: none;
border-radius: 0px;
vertical-align: top;
}

/*------------------------------------------------------------
商品カテゴリ
-------------------------------------------------------------*/

#item_detail_area #category-list {
display: inline-block;
float: left;
width: 100%;
margin: 5px 0 10px 0;
}

#item_detail_area #category-list > li{
padding-right: 5px;

}

#item_detail_area #category-list li{
display: inline-block;
float: left;
font-size: 5px !important;
}

#item_detail_area #category-list li:first-child{
display: none;
}

#item_detail_area #category-list li a{
font-size: 11px;
line-height: 16px;
color: #000;
}

#item_detail_area #category-list li ul li:first-child a{
text-decoration: none;
}

#item_detail_area #category-list li ul li:last-child a{
text-decoration: underline;
}

#item_detail_area #category-list li:nth-child(2):after{
content: "：";
}

/*------------------------------------------------------------
商品タイトル
-------------------------------------------------------------*/
#item_detail_area h2{
font-size: 20px;
padding: 10px 0 20px 0;
display: inline-block;
line-height: 1.5em;
}

#item_detail_area .price h3{
margin-top: 30px;
font-family: "arno-pro-display",serif;
font-size: 32px;
font-weight: normal;
color: #000;
}


#item_detail_area .price .normal_price{
margin: 10px 0;
}

#quantity{
border-radius: 0px !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font-size: 12px;
width: 60px;
height: 25px;
padding-right: 5px;
/* border: none !important; */
vertical-align: top;
}

dl.quantity dl{

}

dl.quantity dt{
min-height: 25px;
vertical-align: middle !important;
line-height: inherit;
color: #000;
}

#detail_cart_box ul{
display: inline-block;
width: 49%;
}

#detail_cart_box .btn_area ul > li{
padding: 0 !important;
}

#detail_cart_box .btn_area{
display: table;
vertical-align: top;
width: 100%;
margin: 50px 0 30px 0;
}

#detail_cart_box .btn_area .left-btn{
display: table-cell;
vertical-align: top;
width: 45%;
padding: 0 2% 0 4%;
}

#detail_cart_box .btn_area .right-btn{
display: table-cell;
vertical-align: top;
width: 45%;
padding: 0 4% 0 0%;
}


#detail_cart_box__insert_button li{
display: inline-block;
padding: 0;
}

.btn_area .btn{
    background: rgba(0,0,0,0.9) !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 11px;
    font-weight: normal !important;
    /* padding: 10px; */
    transition: 0.3s !important;
}

.btn_area .btn:hover{
opacity: 0.7;
}

#add-cart:before{
margin:0 2px 0 0;
content:" ";
display:inline-block;
width:18px;
height:23px;
background: url("../img/common/cart-white-mark-navi.png"); 
background-repeat: no-repeat;
background-position: left top 1px;
background-size:15px 15px;
vertical-align:middle;
}

.item_comment{
font-weight: normal !important;
line-height: 1.8em;
}

.col-sm-8{
width: 100%;
}

@media only screen and (max-width: 767px) {

.cart_area{
padding-top: 30px;
}

.cart_area .quantity{
margin-bottom: 28px;
}

#detail_cart_box ul{
display: inline-block;
width: 49%;
}

#detail_cart_box ul li{
padding: 0 !important;
width: 100%;
}

.btn-block{
width: 100% !important;
height: 50px !important;
line-height: 50px !important;
}

#item_detail_area {
margin-top: 60px;
}

.slick-dots li{
width: 20px !important;
}


.slick-dots li.slick-active button:before{
background-color: #f00;
opacity: 1;	
}

.slick-dots li button:before{
background-color: #000;
opacity: 1;
}

}