@charset "UTF-8";
@import "../../../css/style.css";

div#goods { margin: 0 0 30px 0; }
div#goods div.inner { padding: 0 40px; position: relative; }
div#goods ul { margin: 0; padding: 0; list-style: none; }
div#goods ul li {}
div#goods ul li img { margin: 0 0 5px 0; width: 160px; height: 120px; vertical-align: top; }
div#goods ul li strong { display: block; }

/*
div#goods a.bx-prev { width: 30px; height: 30px; background: #eee; color: #888; font-size: 16px; text-align: center; line-height: 30px; display: block; position: absolute; top: 45px; left: 0; border-radius: 15px; }
div#goods a.bx-next { width: 30px; height: 30px; background: #eee; color: #888; font-size: 16px; text-align: center; line-height: 30px; display: block; position: absolute; top: 45px; right: 0; border-radius: 15px; }
div#goods div.bx-controls-direction a:hover { background: #ddd; color: #666; text-decoration: none; }
*/

div#content ul#goods { margin: 0 0 20px 0; padding: 0; list-style: none; }
div#content ul#goods li { padding: 20px 0; border-bottom: dotted 1px #eee; }
div#content ul#goods img { vertical-align: top; }
div#content ul#goods dl { margin: 0; padding: 0; }
div#content ul#goods dt { margin: 0; padding: 0; width: 260px; float: left; }
div#content ul#goods dd { margin: 0; padding: 0; width: 450px; float: left; }
div#content ul#goods dd strong { margin: 10px 0; font-size: 120%; display: block; }
div#content ul#goods dd p { margin: 0 0 1em 0; padding: 0; }
div#content ul#goods dd p.price { color: #f00; font-size: 140%; font-weight: 700; }
div#content ul#goods dd p.price span { font-size: 70%; }
div#content ul#goods dd p.message { color: #f00; }


div#content table#itemTable { margin: 0 0 20px 0; width: 100%; border-collapse: collapse; }
div#content table#itemTable th { padding: 10px 20px; background: #f3f2e7; border: solid 1px #e1e0d6; }
div#content table#itemTable td { padding: 10px 20px; border: solid 1px #e1e0d6; text-align: center; }
div#content table#itemTable td.item { text-align: left; }
div#content table#itemTableSP { display: none; }

div#content table#orderTable { margin: 0 0 20px 0; width: 100%; border-collapse: collapse; }
div#content table#orderTable th { padding: 10px 20px; background: #f3f2e7; border: solid 1px #e1e0d6; }
div#content table#orderTable th span { margin: 0 0 0 1em; padding: 0.3em 0.8em; background: #f90; color: #fff; font-size: 85%; font-weight: 400; line-height: 1; border-radius: 4px; }
div#content table#orderTable td { padding: 10px 20px; border: solid 1px #e1e0d6; }
div#content table#orderTable td ul { margin: 0; padding: 0; list-style-position: inside; }




div#content div#button { text-align: center; }


div#contents label.error { margin: 0.5em 0 0 0; padding: 0.4em 1em; background: #f00; color: #fff; font-size: 90%; display: block; }



/* -------------------------
以下はスマートフォン用のCSS
------------------------- */
@media screen and (max-width : 736px) {

div#content ul#goods dt { width: 100%; text-align: center; float: none; }
div#content ul#goods dt img { width: 200px; height: auto; }
div#content ul#goods dd { width: 100%; float: none; }

div#content table#itemTable { display: none; }
div#content table#itemTableSP { margin: 0 0 20px 0; width: 100%; border-collapse: collapse; display: table; }
div#content table#itemTableSP thead th { padding: 10px; background: #f3f2e7; border: solid 1px #e1e0d6; }
div#content table#itemTableSP tbody td { padding: 5px 10px; border: solid 1px #e1e0d6; }
div#content table#itemTableSP tfoot th { padding: 10px; background: #f3f2e7; border: solid 1px #e1e0d6; }


div#content table#orderTable { border-bottom: solid 1px #e1e0d6; }
div#content table#orderTable th { padding: 5px 10px; width: 100%; display: block; box-sizing: border-box; }
div#content table#orderTable td { padding: 5px 10px; width: 100%; border-width: 0 1px; display: block; box-sizing: border-box; }
div#content table#orderTable td input { width: 100%; }


}