/*-------------------------
     product.css
-------------------------*/
@charset "utf-8";

.container2 {
font-size:115%;
}

.inner2 {
flex:1;
position:relative;
margin:0 auto;
max-width:1100px;
}

/* パンくず */
.page_ttl_pd {
color:#666;
padding:10px 0 20px;
font-size:95%;
//font-weight:bold;
}

.page_ttl_pd a {
color:#666;
}


/********   左  **********/
.cont-left {
float:left;
width:61%;
padding:0 30px 0 0;
}

/* 商品画像 */
ul.Img-cont {
position:relative;
text-align:center;
padding:0;
}

.Img-cont img{
max-width:100%;
}

/* 追加画像用 */
#main-image li { overflow: hidden; }
#main-image li.Item1,
#main-image li.Item2,
#main-image li.Item3,
#main-image li.Item4,
#main-image li.Item5,
#main-image li.Item6,
#main-image li.Item7,
#main-image li.Item8,
#main-image li.Item9 { display: none; }

#thumb-box { margin:0 0 20px; }
	
#ItemCom1, #ItemCom2, #ItemCom3, #ItemCom4, #ItemCom5,
#ItemCom6, #ItemCom7, #ItemCom8, #ItemCom9 {
/*position: relative;
top: 14px;
display:inline;
text-align: center;
opacity: 0;
font-size:90%;
*/
position: absolute;
bottom:0;
left:0;
right:0;
display: inline;
padding:3px 0;
text-align: center;
opacity: 0;
font-size: 90%;
background:rgba(255,255,255,.8);
}

.ttl_prd {
font-weight:bold;
margin-bottom:10px;	
}

.detail-cont,.info-cont {
margin-top:30px;
padding:10px 0 0;
border-top:1px solid #eee;
}

/* フリースペース下部 */
.prd_free-area{
margin-top:30px;
}

/* サムネイル画像 */
#thumbnail-area {
text-align:center;
width:80%;
margin: 0 auto;
font-size: 0;
line-height: 0;
padding: 5px 0;
position:relative;

}
#thumbnail-area .section {
width:calc(20% - 6px);
display: inline-table;
margin: 3px;
border: 1px solid #ddd;
}
#thumbnail-area .section img {
/*width: 80px;*/
width:100%;
height: auto;
}

.prd-btm2 { padding:0 15px 0 5px; }
.prd-btm2 img {max-width:100%;} /*常に100%にするならwidth:100%*/

/********  右  **********/
.cont-right {
float:right;
width:39%;
padding: 0;
}

.buy-cont {
padding: 20px;
border-radius: 2px;
border: 1px solid #dedede;
margin-bottom:20px;
}

h2.item-name_prd {
padding:5px 0 20px;
font-size:125%;
font-weight:bold;
color:#333;
}

.prd-price {
font-size:26px;
color:#c03;
display:inline-block;
}

.prd-code {
font-size:11px;
color:#767676;
}
.prd-maker {
padding-top: 10px;
font-size:12px;
color:#333;
}
.prd-maker-sm {
margin-left:12px;
font-size:12px;
color:#333;
}

.short-mess{font-size:12px;}

.tax-txt { font-size:13px; }

/* 割引表示 */
.mem-discount {padding:0 0 5px;}
.un-discount-price {text-decoration:line-through;padding-right:10px;font-size:13px;}
.discount-label {border-radius:2px;padding:2px 5px;color:#fff;font-size:80%;margin-right:5px;}
.sale-rate {background:#006600;}
.mem-rate {background:#c03;}
.sold-rate {background:#838383;}
.reduce-rate {background:#e99210;}

/* レビュー件数 */
.review_box {
text-align: right;
padding:10px 0 0;
}

.rev_get-point { font-size:80%; }
.msg-giv-point-prd {
margin:14px 0;
font-size:90%;
}

.select_wrap { margin:20px 0 10px; }

/* ポイント還元 */
.point-return {margin-bottom:10px;display:inline;float:left;}
.point-return-label{
vertical-align: middle;
padding: 0 3px;
border-radius: 9px;
background: #f00;
color: #fff;
font-size: 75%;
padding: 1px 7px 0;
margin-right: 5px;
}

.pd_fixed-area input[type="radio"] {
margin-right:3px;
}

.pd_fixed-area label {
position: relative;
bottom: 1.1px;
padding-right: 20px;
}

.select-option {
margin-top:10px;
overflow:hidden;
}

select.select-op-01 {
width:100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
height: 30px;
background: transparent;
position: relative;
z-index: 1;
padding: 0 0 0 5px;
border-radius: 2px;
}

.select-option .select-box { position:relative;}

.select-option .select-box::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: 0;
background: #aaa;
height: 100%;
width: 20px;
border-radius:0 2px 2px 0;
}

.select-option .select-box::after {
content: '';
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
margin: auto 0;
right: 7px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: #fff transparent transparent transparent;
}

/* select 個数選択 */
select.select-op-02 {
width:80px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
height: 30px;
background: transparent;
position: relative;
z-index: 1;
padding: 0 0 0 5px;
border: 1px solid #aaa;
border-radius: 2px;
}

select.select-op-03 {
width:40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
height: 25px;
background: transparent;
position: relative;
z-index: 1;
padding: 0 0 0 5px;
border: 1px solid #aaa;
border-radius: 2px;
}

.select-option .select-box2 {
float:left;
position:relative;
display:inline-block;
}

.select-option .select-box2::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 63px;
background: #aaa;
height: 100%;
width: 20px;
border-radius:0 2px 2px 0;
}

.select-option .select-box2::after {
content: '';
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
margin: auto 0;
left: 69px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: #fff transparent transparent transparent;
}

/* エキスパートモード */
.select-box-exp select,
.select-box-exp input[type='text'] {
width: 100%;
margin-bottom: 5px;
height: 30px;
padding: 0 0 0 5px;
border-radius: 2px;
background:#fff;
}
.select-box-exp textarea {
width:100%;
margin-bottom: 5px;
padding:5px;
border-radius: 2px;
}
.select-box-exp select.exp-num {
width: 80px;
margin-bottom: 5px;
border-radius: 2px;
}

/* 定期購入 */
.fm_fixnum-box {
position: relative;
margin-top:2px;
}

.fm_fixnum-box::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 178px;
background: #aaa;
height: 100%;
width: 20px;
}

.fm_fixnum-box::after {
content: '';
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
margin: auto 0;
left: 184px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: #fff transparent transparent transparent;	
}

.fixed_num-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
height: 30px;
background: transparent;
position: relative;
z-index: 1;
padding: 0 35px 0 5px;
border: 1px solid #aaa;
border-radius: 2px;
}
	

/* 注意書き */
.order-notice {
margin-bottom:10px;
font-size:11px;
}

.notice-opzaiko {
float:right;
font-size:80%;
}

/* 在庫マーク */
.stock-label, .stock-label_op {
/*display: inline-block;*/
clear:both;
width:70px;
float:right;
color: #fff;
padding: 1px 0 0;
line-height: 29px;
text-align: center;
font-size: 13px;
border-radius: 2px;
}
.stock-label_op {
margin: 20px 0 0;
}
.few { background:#e05c8c; }
.instock {background:#5ad285;}

.sub-btn_wrap {
clear:both;
text-align:center;
padding:20px 0 0;
}

.sub-btn_wrap div + div {margin-top:3px;}

/*** カートに入れるボタン ***/
.add-box {overflow:hidden;}
input.add-to-cart {
width:90%;
margin:0 0 20px;
/*background:rgb(111,168,216);*/
background:rgb(90,140,255);
border-radius:2px;
height:55px;
line-height:59px;
color:#fff;
font-size:110%;
border:none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input.add-to-cart:hover {
/*background:rgba(111,168,216,.9);*/
background:rgba(90,140,255,.9);
}

input.sold_btn {
width:90%;
margin:0 0 20px;
background:rgba(119,119,119,1);
border-radius:2px;
height:55px;
line-height:59px;
color:#fff;
font-size:180%;
border:none;
}

input.sold_btn:hover {cursor:default;}

/*** 今すぐカートに入れるボタン ***/
.buynow-bt {
margin-bottom: 12px;
min-width: 75px;
min-height: 23px;
font-size: 95%;
background: rgb(90,140,255);
border-radius: 2px;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/**********************
 fav-float-area
**********************/
.fav-float-area {
padding-bottom:20px;	
}


/*** お気に入りボタン ***/
.recm-heart-area {
display:inline;
float:right;
margin-left:15px;
}

/*** シェアするボタン ***/
.recm-share-area {float:right;}

.recm-share-area,.recm-heart-area:hover {
cursor:pointer;
}


/**********************
 友達にすすめるボタン
**********************/

/* 隠しエリアの設定 */
.sub-btn_wrap .hidden_show_rf {
height:0;padding:0;overflow:hidden;
opacity:0;transition:0.8s;
}

/* クリックで表示 */
.sub-btn_wrap .recomme-box input:checked ~ .hidden_show_rf {
padding:10px 0;
height:auto;
opacity:1;
}

/* チェックボックスを消す */
.sub-btn_wrap .recomme-box #label_chk { display: none; }

/* ボタン */
.sub-btn_wrap .recomme-box label {
display: block;
width: 90%;
margin: 0 auto;
background: rgb(236, 236, 236);
border-radius: 2px;
font-size: 13px;
height: 35px;
line-height: 36px;
color: #636363;
border: 1px solid #d6d6d6;
cursor: pointer;
}

/* 入力エリア */
.sub-btn_wrap .rec_frd-area {
width:90%;
margin-left:auto;
margin-right:auto;
}

/* 送信完了メッセージエリア */
.sub-btn_wrap .rec_frd-send {
height:0;padding:0;overflow:hidden;
opacity:0;transition:0.3s;
margin:0 !important;
background: #fff3f5;
line-height: 45px;
}

/**********************
 問い合わせるボタン
**********************/

/* 隠しエリアの設定 */
.sub-btn_wrap .hidden_show_qp {
height:0;padding:0;overflow:hidden;
opacity:0;transition:0.8s;
}

/* クリックで表示 */
.sub-btn_wrap .ask-box input:checked ~ .hidden_show_qp {
padding:10px 0;
height:auto;
opacity:1;
}

/* チェックボックスを消す */
.sub-btn_wrap .ask-box #label_chk_pd { display: none; }

/* ボタン */
.sub-btn_wrap .ask-box label.bt {
display: block;
width: 90%;
margin: 0 auto;
height: 35px;
line-height: 36px;
background: rgb(236, 236, 236);
border-radius: 2px;
font-size: 13px;
color: #636363;
border: 1px solid #d6d6d6;
cursor: pointer;
}

/* 入力エリア */
.sub-btn_wrap .ask_prd-area {
width:90%;
margin-left:auto;
margin-right:auto;
}

.sub-btn_wrap input.to-ask {
width:90%;
background:rgb(236, 236, 236);
border-radius:2px;
height:35px;
line-height:37px;
color:#636363;
border:1px solid #d6d6d6;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/* 送信完了メッセージエリア */
.sub-btn_wrap .ask_prd-send {
height:0;padding:0;overflow:hidden;
opacity:0;transition:0.3s;
margin:0 !important;
background: #fff3f5;
line-height: 45px;
}

/******************** すすめる・問い合わせる　共通 ********************/
input.to-recommend:hover, input.to-ask:hover{
background:rgba(236, 236, 236,.7);
}

.rec_frd-area dl.tblcont + dl.tblcont,.ask_prd-area dl.tblcont + dl.tblcont{padding-top:15px;}

.rec_frd-area dl.tblcont dd,.ask_prd-area dl.tblcont dd {padding-top:3px;}


/* 必須マーク */
.input_label {
color: #ff5555;
background: #fff5f5;
padding: 0 4px;
border-radius: 2px;
font-size: 80%;
border: 1px solid #ff5555;
text-align: center;
vertical-align: middle;
margin-left: 10px;
}

input.inputSS {
width:25%;
height:30px;
line-height:30px;
padding:0 10px;
border-radius:3px;
}

input.inputL {
width:100%;
height:30px;
line-height:30px;
padding:0 10px;
border-radius:3px;
}

input.inputL10 {
width:100%;
height:30px;
line-height:30px;
padding:0 10px;
margin-top:10px;
border-radius:3px;
}

input.inputMAX {
width:100%;
height:30px;
line-height:30px;
padding:0 10px;
border-radius:3px;
}

textarea.inputFree {
max-width:100%;
width:100%;
min-width:100%;	
padding:5px 10px;
border-radius:3px;
}

.radio span {position:relative;}
.radio span + span { padding-left:15px; }
.radio label {position: relative;font-size: 85%;}
.ans-radio {vertical-align:middle;margin-right:5px;border-radius:10px;}

/* privacy */
.pl-text textarea {
cursor:default;
width:100%;
max-width:100%;
min-width:100%;	
height:5rem;
min-height:5rem;
padding:5px;
font-size: 11px;
}
.pl-text textarea::-webkit-scrollbar { width:10px; }
.pl-text textarea::-webkit-scrollbar-track {border-radius:2px;}
.pl-text textarea::-webkit-scrollbar-thumb {background-color:#aaa;border-radius:2px;}
.pl-mess { font-size:80%; }
dd.policy-area {padding-top:0 !important;}
.pl-conf { padding-top:10px; text-align:center;}
.pl-conf input {margin-right:5px;}
.pl-conf label {position:relative;}
.poli-ck {vertical-align:middle;}

/* 送信するボタン */
input.prd-mail-bt{
display: block;
height:35px;
line-height:35px;
margin: 0 auto;
background: rgb(255,104,136);
color: #fff;
padding: 0 20px;
border: none;
border-radius: 2px;
margin-bottom:30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input.prd-mail-bt:hover{ background: rgba(255,104,136,.8); }

/******************** /すすめる・問い合わせる　共通 ********************/

/* 自由項目_右------------------*/
.product_free_right {
max-width:100%;
/*word-break:break-all;*/
}

/* 自由項目_下------------------*/
.product_free_bottom {
max-width:1100px;
margin-top:30px !important;
padding:0;
margin:0 auto;
}

/* modal setting--------------*/
#modalSns,
#modalCartIn {
display:none;
position:fixed;
top:36%;
left:50%;
background: #fff;
box-sizing:border-box;
z-index:999999;
transform:translateX(-50%);
box-shadow: 0 15px 50px rgba(0,0,0,.25);
border-radius:3px;
}

#modalCartIn {
width:260px;	
height:180px;
}

/* modal sns------------------*/
#modalSns {
white-space: nowrap;
width: 270px;
text-align: center;
height:auto;
}
#modalSns .prd_sns {
text-align:center;
}
#modalSns .prd_sns img + img{
margin-left:15px;
}
#modalSns .prd-modal {
text-align:center;
height:auto;
}
#modalSns ul.modal-body {
max-width:90%;
margin:0 auto;
padding: 10px;
}
#modalSns ul.modal-body li {
display: inline-block;
/*width:23%;*/
text-align:center;
}
#modalSns ul.modal-body li img {
padding:6px 3px;
}

#modalSns modal-body {
padding: 10px;
line-height: 1.65;
}
#modalSns .modal-body p {
font-size: 14px;
margin-top: 0;
}
#modalSns .modal-body p:last-child {
margin-bottom: 0;
}
#modalSns .modal-footer {
padding: 10px;
background: rgba(0,0,0,.03);
text-align:center;
height:auto;
}
#modalSns .modal-footer button {
padding:0 10px;
height:32px;
width: 100px;
padding: 7px 0;
font-size: 12px;
border-radius: 2px;
background: #F3F3F3;
letter-spacing: 1.5px;
border: 1px solid #aaa;
cursor: pointer;
}

#modalSns .modal-footer .close-button {
color: #fff;
background: #e83030;
transition: all .3s ease-in-out;
}

#modalSns .modal-footer .close-button:hover
#modalSns .modal-footer .close-button:focus {
	background: #e62121;
}

/* modal CartInMessage------------------*/
#modalCartIn ul.modal-body {
max-width:100%;
margin:0 auto;
padding:10px 0 0;
text-align:center;
}
#modalCartIn img.check_ani-style {
height: 180px;
margin: -35px;
transform: scale(0.6);
object-fit: none;
}
#modalCartIn p.cartin-msg {
font-size:16px;
color:#4B89BD;
text-align:center;
padding:3px 0 10px;
}
#modalCartIn-back {
position: fixed;
top:0;left:0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.75);
opacity: 0.8;
filter: alpha(opacity=60);
z-index: 10;
display: none;
}