@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : itemdtl.css
 Author     : ヒューマンフローラ
 Style Info : 製品詳細レイアウトCSS設定
=================================================================== */

/* -------------------------------------------------------
	index.html
   ------------------------------------------------------- */

/*静的ページ移行のためのstyle*/
#HF.itemdtlPg .layoutbox{width:730px;margin:0 auto;padding-bottom:50px;}
#HF.itemdtlPg .layoutbox01{width:100%;margin-bottom:2em;}
#HF.itemdtlPg .layoutbox02{width:350px;margin-bottom:2em;float:left;}
#HF.itemdtlPg .layoutbox03{width:350px;margin-bottom:2em;float:right;}
#HF.itemdtlPg .layoutbox04{width:730px;margin:0 auto;clear:both;}

/*　ご注意・お知らせ　*/
#HF.itemdtlPg .attentionBox{
box-sizing:border-box;
width:100%;
margin:1em 0;
padding:0.25em 0.5em;
border:2px #ff0000 solid;
background:#ffffff;
}
#HF.itemdtlPg .attentionBox p+p{
margin-top:0.5em;
}
#HF.itemdtlPg .attentionBox p{
font-size:13px;
font-weight:400;
text-align:left;
}

/*U-KOMI styleChange*/
#HF.itemdtlPg .gallery-pictures-container *,
#HF.itemdtlPg .review-container *{
font-size:14px;
}


/*　製品詳細トップ　*/
#HF.itemdtlPg #cont01.cntWrp01 { border:1px solid #dfdfdf; }
#HF.itemdtlPg #cont01 .ttl01 { padding:20px 0 22px 0; border-bottom:1px solid #dfdfdf; color:#333; }
#HF.itemdtlPg #cont01 .ttl01 h3 { display:inline-block; height:31px; line-height:31px; padding:0 25px 0 30px; background:#5ca7d6 url(../img/itemdtl/rbnbg01.gif) no-repeat right top; color:#fff; }
#HF.itemdtlPg #cont01 .ttl01 h3.pnk { background:#FF9D9F url(../img/itemdtl/rbnbg02.gif) no-repeat right top; }
#HF.itemdtlPg #cont01 .ttl01 h3 span { font-weight:bold; }
#HF.itemdtlPg #cont01 .ttl01 p { font-size:14px; margin-top:15px; padding-left:25px; }
#HF.itemdtlPg #cont01 .ttl01 h2 { font-size:20px; margin-top:4px; padding:0 30px; line-height:150%; }
#HF.itemdtlPg #cont01 .ttl01 h2 span { display:inline-block; height:22px; line-height:22px; margin-left:5px; padding:0 5px; border:1px solid #9f9f9f; font-size:12px; color:#7f7f7f; }
#HF.itemdtlPg .dtlWrap { padding:30px; }
#HF.itemdtlPg #dtlCnt01 { float:left;/* width:280px;*/ width:350px; }
#HF.itemdtlPg #dtlCnt01 > figure { text-align:center; margin-bottom:36px; }
#HF.itemdtlPg #dtlCnt01 > figure img { height:280px; }
#HF.itemdtlPg #dtlCnt01 dl { width:100%; display:table; }
#HF.itemdtlPg #dtlCnt01 dl dt { display:table-cell; width:70px; font-size:13px; padding-right:10px; line-height:1.3; }
#HF.itemdtlPg #dtlCnt01 dl.net dt { width:120px; padding-bottom:10px; }
#HF.itemdtlPg #dtlCnt01 dl dt span { display:inline-block; font-size:12px; color:#7f7f7f; }
#HF.itemdtlPg #dtlCnt01 dl dd { display:table-cell; font-size:16px; color:#ec6c79; }
#HF.itemdtlPg #dtlCnt01 #itmPost,
#HF.itemdtlPg #dtlCnt01 #itmPost02,
#HF.itemdtlPg #dtlCnt01 #itmPost03,
#HF.itemdtlPg #dtlCnt01 #itmPost04 { margin-top:2px; }
#HF.itemdtlPg #dtlCnt01 select { width:55px; height:26px; line-height:26px; color:#555; margin-right:17px; border:1px solid #bcbcbc; }
#HF.itemdtlPg #dtlCnt01 input[type="submit"] { width:164px; }
#HF.itemdtlPg #dtlCnt01 .item2nd { padding-top:40px; border-top:1px dotted #bbb; margin-top:40px; }
#HF.itemdtlPg #dtlCnt01 .item2nd > h4 { font-size:18px; margin-bottom:15px; padding:0 0 10px 0; line-height:135%; background:url(../img/cmn/ttlBdr01.gif) no-repeat bottom center; letter-spacing:normal; }
#HF.itemdtlPg #dtlCnt01 .item2nd > h4 b { font-size:13px; }
#HF.itemdtlPg #dtlCnt01 .item2nd > figure { text-align:center; margin-bottom:18px; }
#HF.itemdtlPg #dtlCnt01 .item2nd > figure img { height:200px; }
#HF.itemdtlPg #dtlCnt01 .prc01 { margin-top:6px; }
#HF.itemdtlPg #dtlCnt01 .prc01 span { color:#ec6c79; }
#HF.itemdtlPg #dtlCnt01 .prc01 b { font-weight:bold; }

#HF.itemdtlPg #dtlCnt01 .tkDtl { position:relative; width:100%; border:2px solid #96C7E5; padding:10px 12px; margin:20px 0 18px 0; text-align:center; letter-spacing:normal; border-radius:4px; }
#HF.itemdtlPg #dtlCnt01 .tkDtl:before,
#HF.itemdtlPg #dtlCnt01 .tkDtl:after { position:absolute; left:50%; bottom:0; border:14px solid transparent; content:''; height:0; width:0; margin-left:-7px; }
#HF.itemdtlPg #dtlCnt01 .tkDtl:before { border-top-color:#96C7E5; margin-bottom:-28px; }
#HF.itemdtlPg #dtlCnt01 .tkDtl:after { border-top-color:#FFFFFF; margin-bottom:-25px; }
#HF.itemdtlPg #dtlCnt01 .tkDtl span { font-weight:bold; color:#ec6c79; }
#HF.itemdtlPg #dtlCnt01 .tkDtl p { display:inline-block; margin-top:5px; padding-left:16px; font-weight:bold; background:url(../img/itemdtl/howto_arw.png) no-repeat left center; }
#HF.itemdtlPg #dtlCnt01 .tkDtl p a { color:#5CA7D6; font-weight:bold; }

#HF.itemdtlPg #dtlCnt01 > section { padding-top:22px; border-top:1px dotted #bbb; margin-top:26px; }
#HF.itemdtlPg #dtlCnt01 > section h4 { color:#ec6c79; margin-bottom:14px; }
#HF.itemdtlPg #dtlCnt01 > section table { width:100%; font-size:12px;color:#6f6f6f; }
#HF.itemdtlPg #dtlCnt01 > section table th { width:80px; background:#f5f5f5; }
#HF.itemdtlPg #dtlCnt01 > section table tr { border:1px solid #ddd; }
#HF.itemdtlPg #dtlCnt01 > section table th,#HF.itemdtlPg #dtlCnt01 > section table td { border:1px dotted #ddd; padding:4px 7px; vertical-align:middle; }
#HF.itemdtlPg #dtlCnt01 > section p { margin-top:12px; font-size:11px; color:#6f6f6f; line-height:1.6; }

#HF.itemdtlPg #dtlCnt02 { float:right; width:350px; }
#HF.itemdtlPg #dtlCnt02 .cont01 { position:relative; width:100%; border:2px solid #ddd; padding:15px; text-align:center; margin-bottom:20px; border-radius:4px; }
#HF.itemdtlPg #dtlCnt02 .cont01:before,
#HF.itemdtlPg #dtlCnt02 .cont01:after { position:absolute; left:0; top:50%; border:14px solid transparent; content:''; height:0; width:0; margin-top:-14px; }
#HF.itemdtlPg #dtlCnt02 .cont01:before { border-right-color:#ddd; margin-left:-28px; }
#HF.itemdtlPg #dtlCnt02 .cont01:after { border-right-color:#FFFFFF; margin-left:-25px; }
#HF.itemdtlPg #dtlCnt02 .cont01 h4 { color:#ec6c79; }
#HF.itemdtlPg #dtlCnt02 .cont01 .cmnGryBtn01 a { margin:5px 0 0 0 !important; }

/*　新発売アイコン　*/
#HF.itemdtlPg #dtlCnt02 .new {
position:relative;
}
#HF.itemdtlPg #dtlCnt02 .new p {
position:absolute;
top:0;
left:-7em;
padding:15px 5px 15px 10px;
background: #ff0000;
border-radius:50%;
font-weight:bold;
text-align:center;
font-size:120%;
color:#ffffff;
}

#HF.itemdtlPg #dtlCnt02 section { margin-top:20px; }
#HF.itemdtlPg #dtlCnt02 section h4 { display:inline-block; height:23px; line-height:23px; padding:0 6px; color:#fff; font-size:15px; font-weight:bold; background:#96c7e5; }
#HF.itemdtlPg #dtlCnt02 section p { margin-top:5px; }
#HF.itemdtlPg #dtlCnt02 section.idt01 p { padding-left:1em; text-indent:-1em; }
#HF.itemdtlPg #dtlCnt02 section.ptn02 h4 { color:#5ca7d6; border:1px solid #5ca7d6; background:#fff; }
#HF.itemdtlPg #dtlCnt02 section.txtSml p { font-size:10px; line-height:170%; }


/*　ご使用のポイント　*/
#HF.itemdtlPg .chkList01 li { border-bottom:1px solid #dfdfdf; padding:20px; }
#HF.itemdtlPg .chkList01 li.last { border-bottom:none !important; }
#HF.itemdtlPg .chkList01 li h4 { padding-left:30px; font-size:16px; font-weight:bold; color:#ec6c79; background:url(../img/itemdtl/icon_chk01.gif) left center no-repeat; }
#HF.itemdtlPg .chkList01 li p { padding-left:30px; margin-top:6px;  }
#HF.itemdtlPg #cont02 .cmnTtl01 span { display:inline-block; color:#fff; font-size:18px; line-height:54px; padding:0 0 0 0.5em; vertical-align:top; }
#HF.itemdtlPg #cont02 .lnkBtn01 { margin:20px 0; text-align:center; height:54px; line-height:54px; }
#HF.itemdtlPg #cont02 .lnkBtn01 a {  }


/* 使い方 */
#HF.itemdtlPg .htCnt01 { display:table; width:100%; }
#HF.itemdtlPg .htCnt01 section { display:table-cell; padding-right:20px; }
#HF.itemdtlPg .htCnt01 section h4 { font-size:16px; font-weight:bold; color:#5ca7d6; }
#HF.itemdtlPg .htCnt01 section h4 span { display:inline-block; width:25px; height:25px; line-height:25px; margin-right:12px; text-align:center; background:#96c7e5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color:#fff; }
#HF.itemdtlPg .htCnt01 section h4.idt01 { padding-left:37px; text-indent:-37px; }
#HF.itemdtlPg .htCnt01 section h4.idt01 span { text-indent:0px; }
#HF.itemdtlPg .htCnt01 section p { padding:10px 0 0 38px; }
#HF.itemdtlPg .htCnt01 section p.idt01 { padding-left:1em; text-indent:-1em; }
#HF.itemdtlPg .htCnt01 section p span { color:#ec6c79; }
#HF.itemdtlPg .htCnt01 figure { display:table-cell; width: auto; vertical-align:top; text-align:center; padding: 0 9px; }

#HF.itemdtlPg .lnkBox01 { margin-top:25px; }
#HF.itemdtlPg .lnkBox01 h4 { height:34px; line-height:34px; background:#96c7e5; font-size:15px; color:#fff; font-weight:bold; text-align:center; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; }
#HF.itemdtlPg .lnkBox01 ul { border-right:1px solid #dfdfdf; border-left:1px solid #dfdfdf; }
#HF.itemdtlPg .lnkBox01 li { border-bottom:1px solid #dfdfdf; padding:20px 15px 15px 15px; background:#f5f5f5; }
#HF.itemdtlPg .lnkBox01 li p.ttl01 { padding-left:20px; line-height:14px; color:#5ca7d6; font-weight:bold; text-shadow:0 1px 0 rgba(255,255,255,1); background:url(../img/itemdtl/howto_arw.png) no-repeat left center; }
#HF.itemdtlPg .lnkBox01 li p.txt01 { margin-top:5px; }

#HF.itemdtlPg .step3 { border-top:1px solid #dfdfdf; padding:20px; }
#HF.itemdtlPg .step3 h4 { font-size:15px; font-weight:bold; }
#HF.itemdtlPg .step3 ul { width:690px; height:80px; display:table; margin-top:10px; background:url(../img/itemdtl/3step_bg01.gif) no-repeat left top; }
#HF.itemdtlPg .step3 li { width:33%; display:table-cell; padding:8px 0 0 20px; color:#fff; }
#HF.itemdtlPg .step3 li p { font-weight:bold; font-size:15px; }
#HF.itemdtlPg .step3 li p span {}

/* オススメのセット商品 */
#HF.itemdtlPg #cont04 .cmnBoxLnk01 li a { min-height:227px; letter-spacing:0; }




/*-----商品ページの表示順変更---------*/
#dtlCnt01{
display:flex;
flex-direction:column;
}
#dtlCnt01 figure{
order:1;
}
#dtlCnt01 figure + dl{
order:5;
margin-top:30px;
}
#dtlCnt01 #itmPost{
order:6;
}
#dtlCnt01 .tkDtl{
order:2;
}
#dtlCnt01 .tk{
order:3;
}
#dtlCnt01 #itmPost02{
order:4;
}
#dtlCnt01 section{
/*order:7;*/
order:8;
margin-top:40px;
}
#dtlCnt01 .attentionBox{
order:7;
margin-top:40px;
}
/*--商品が1ページに2つある場合--*/
#item1st{
order:2;
display:flex;
flex-direction:column;
}
#item2nd{
order:6;
display:flex;
flex-direction:column;
}
#item2nd #itmPost03{
order:6;
}
#item2nd #itmPost04{
order:4;
}
#item2nd h4{
order:2;
}
#item2nd h4 + dl{
order:5;
margin-top:30px;
}
/*--空のPタグ--*/
#dtlCnt01 > p,
#item1st > p,
#item2nd > p{
order:10;
height:1px;
}