@charset "utf-8";


/* ------------------------------------------------------------ common */

#main { padding: 0 0 40px;}

/* ------------------------------------------------------------ detail */

#detail { padding: 20px 0 0;}
#detail #image { width: 630px; float: left; }
#detail #image ul li { width: 126px; float: left; cursor: pointer; }

#detail #info { width: 500px; float: right; }
#detail #info h3 { font-size: 22px; }
#detail #info p.price { font-size: 39px; padding: 0 0 20px; font-family: 'Noto-Sans-JP-Medium';}
#detail #info p.price small { font-size: 17px; }
#detail #info dt { font-size: 16px; padding: 0 0 5px; }
#detail #info .cat { padding: 0 0 30px; }
#detail #info .cat dd { font-size: 14px; }
#detail #info .cat dd p { padding: 0 0 5px; }
#detail #info .cat dd p a { color: #a6a6a6; }
#detail #info .tag { padding: 0 0 40px; }
#detail #info .tag dd a { display: block; float: left; color: #a6a6a6; padding: 0 8px; font-size: 12px; margin: 0 5px 5px 0; border: 1px solid #a6a6a6; border-radius: 30px; }
#detail #info .area { padding: 0 0 40px; }
#detail #info .area dl dd table { width: 100%;}
#detail #info .area th { padding: 3px 5px; background: #f0f0f0; border: 1px solid #dcdcdc; font-size: 13px; }
#detail #info .area td { text-align: center; border: 1px solid #dcdcdc; padding: 3px 5px; }
#detail #info #stock { border-top: 1px solid #bfbfbf; }
#detail #info #stock .stock { padding: 15px 0 20px; border-bottom: 1px solid #bfbfbf; }
#detail #info #stock .stock h4 { font-size: 14px; float: left; width: 155px; padding: 13px 15px 0 0; }
#detail #info #stock .stock p { float: right; font-size: 14px; padding: 13px 10px 0 0; width: 130px; }
#detail #info #stock .stock .opt { padding: 0 0 10px; }
#detail #info #stock .stock .submit { float: right; width: 165px; }
#detail #info #stock .stock .submit p { color: #ce4f4f; text-align: center; padding: 5px 0 0; width: auto; float: none; line-height: 50px; }
#detail #info #stock .stock .submit input[type="submit"] { width: 165px; line-height: 45px; color: #fff; background: url(../images/list/icn_cart2.png) no-repeat 7px 14px #4c4c4c; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; padding: 0 0 0 20px; }
#detail #info h5 { font-size: 14px; line-height: 220%; font-family: 'Noto-Sans-JP-Medium'; padding: 40px 0; }
#detail #info .bottom #sns { float: left; }
#detail #info .bottom #sns li { float: left; height: 26px; padding: 0 20px 0 0; }
#detail #info .bottom #sns li.center { margin: -3px 0 0; }
#detail #info .bottom a.use { float: right; margin: 0 0 0 100px; font-size: 12px; color: #32b5fc; text-decoration: underline; background: url(../images/list/arrow.png) no-repeat left center; padding: 0 0 0 10px; }

#detail #recomend { padding: 140px 0 40px; }
#detail #recomend h3 { font-size: 29px; text-align: center; font-family: 'Noto-Sans-JP-DemiLight'; padding: 0 0 30px; }
#detail #recomend h3 span { font-size: 14px; display: block; font-family: 'Noto-Sans-JP-Regular'; }
#detail #recomend ul { margin: 0 0 0 -23px; }
#detail #recomend ul li { margin: 0 0 0 23px; width: 220px; float: left; }
#detail #recomend ul li a { display: block; }
#detail #recomend ul li .detail { padding: 10px 0 0; }
#detail #recomend ul li .detail small { font-size: 12px; color: #636363; }
#detail #recomend ul li .detail h4 { font-size: 16px; padding: 3px 0 15px; }
#detail #recomend ul li .detail p { text-align: right; font-size: 15px; padding: 0 0 5px; }
#detail #recomend ul li .detail span { font-size: 12px; color: #a2a2a2; }


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){


/* ------------------------------------------------------------ detail */

#detail #image { width: 100%; float: none; }
#detail #image img { width: 100%; height: auto;}
#detail #image ul li { width: 25%; float: left; cursor: pointer; }

#detail #info { width: 100%; float: none; }
#detail #info h3 { font-size: 18px; padding: 15px 0 5px; }
#detail #info p.price { font-size: 28px; padding: 0 0 10px; }
#detail #info p.price small { font-size: 15px; }
#detail #info dt { font-size: 14px; padding: 0 0 5px; }
#detail #info .cat { padding: 0 0 15px; }
#detail #info .cat dd { font-size: 12px; }
#detail #info .cat dd p { padding: 0 0 5px; }
#detail #info .cat dd p a { color: #a6a6a6; }
#detail #info .tag { padding: 0 0 20px; }
#detail #info .tag dd a { display: block; float: left; color: #a6a6a6; padding: 0 4px; font-size: 12px; margin: 0 5px 5px 0; border: 1px solid #a6a6a6; border-radius: 30px; }
#detail #info .area { padding: 0 0 10px; }
#detail #info .area th { padding: 3px 5px; background: #f0f0f0; border: 1px solid #dcdcdc; font-size: 12px; }
#detail #info .area td { text-align: center; border: 1px solid #dcdcdc; padding: 3px 5px; }
#detail #info #stock { border-top: 1px solid #bfbfbf; }
#detail #info #stock .stock { padding: 15px 0 20px; border-bottom: 1px solid #bfbfbf; }
#detail #info #stock .stock h4 { font-size: 12px; float: left; width: 22%; padding: 5px 2% 0 0; }
#detail #info #stock .stock p { float: right; font-size: 12px; padding: 5px 3% 0 0; width: 33%; }
#detail #info #stock .stock .opt { padding: 0 0 10px; }
#detail #info #stock .stock .submit { float: right; width: 40%; }
#detail #info #stock .stock .submit p { color: #ce4f4f; text-align: center; padding: 0; width: auto; float: none; line-height: 30px; }
#detail #info #stock .stock .submit input[type="submit"] { width: 98%; line-height: 33px; color: #fff; background: url(../images/list/icn_cart2.png) no-repeat 5px 10px #4c4c4c; padding: 0 0 0 15px; font-size: 12px; background-size: 15px auto;}
#detail #info h5 { font-size: 12px; line-height: 220%; padding: 20px 0; }
#detail #info .bottom #sns { float: none; }
#detail #info .bottom #sns li { float: left; height: 26px; padding: 0 10px 0 0; }
#detail #info .bottom #sns li.center { margin: -3px 0 0; }
#detail #info .bottom a.use { float: none; margin: 10px 0 0; font-size: 12px; color: #32b5fc; text-decoration: underline; background: url(../images/list/arrow.png) no-repeat left center; padding: 0 0 0 10px; }

#detail #recomend { padding: 50px 0 20px; }
#detail #recomend h3 { font-size: 20px; text-align: center; padding: 0 0 15px; }
#detail #recomend h3 span { font-size: 12px; display: block; }
#detail #recomend ul { margin: 0; }
#detail #recomend ul li { margin: 0 0 15px; width: 100%; float: none; }
#detail #recomend ul li a { display: block; }
#detail #recomend ul li img { float: left; width: 48%; height: auto;}
#detail #recomend ul li .detail { padding: 0 0 0 2%; float: left; width: 50%;}
#detail #recomend ul li .detail small { font-size: 12px; color: #636363; }
#detail #recomend ul li .detail h4 { font-size: 14px; padding: 3px 0 15px; }
#detail #recomend ul li .detail p { text-align: right; font-size: 12px; padding: 0 0 5px; }
#detail #recomend ul li .detail span { font-size: 12px; color: #a2a2a2; }
}