@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 
html,
body { height:100%; }

html{ overflow-x:hidden; }
body { height:auto; margin-right:0 !important; background:#fff;}

/* body * { border:1px solid #000000; background:rgba(000,000,000,0.1)} */



/* フォントの指定 */
body,input,select,textarea {
	font-family: 'Noto Sans JP', sans-serif;
	color:#000; font-size:14px; font-weight: 400; line-height:1.8; letter-spacing:0.05em;}
	
a {color:#000; text-decoration: none;}
p {text-align:justify; text-justify:inter-ideograph;}





a#cartBtn { display: block; z-index: 9999; position: fixed; top:2%; right: 0%; width:94px ; height:72px; margin:0 auto; text-decoration: none; font-size: 1.14rem; font-weight: 500; text-align: center; color:#e5002e; background: url(../img/cartIcon.png); }

/* header */
header { position: relative; padding: 1% 3% 5%;}
header h1 { max-width:320px; height:90px; position:relative; font-size: 0.5em;}
header h1 * { width:100%; height:100%; display:block; position: absolute; top:0; left:0;}
header h1 a {}
header h1 span { background:url(../img/rogo.png) no-repeat; background-size: contain;}

@media screen and (max-width:750px) {
	
}



/* nav */
nav {text-align:center;}
nav ul {width:800px; height:50px; margin:0 auto;}
nav ul * {height:50px;}
nav ul li {float:left; display:inline; position:relative;}
nav ul li * {display:block; position:absolute; left:0; top:0;}
nav ul li span {background:url(../img/share/nav.png) left top no-repeat; cursor:pointer;}

nav ul li.n01, nav ul li.n01 * {width:100px;}
nav ul li.n02, nav ul li.n02 * {width:100px;}
nav ul li.n03, nav ul li.n03 * {width:100px;}

nav ul li.n01 span {background-position:0px 0px;}
nav ul li.n02 span {background-position:0px 0px;}
nav ul li.n03 span {background-position:0px 0px;}

nav ul li.n01 span:hover {background-position:0px -0px;}
nav ul li.n02 span:hover {background-position:0px -0px;}
nav ul li.n03 span:hover {background-position:0px -0px;}


/* footer */
footer { padding: 1em 0; width: 100%; background: #fff}
footer img { max-width:752px; width: 90%; display: block; margin: auto; }
footer a.orderBtn { display: none; }
footer #ex { padding:4% 0 0; text-align: center;}
footer p { font-size:0.6rem; text-align: center;}
footer #phpCopyright { color:#b5b5b5 ; padding:3% 0 1%; }
footer #phpCopyright a { color:#b5b5b5 ; text-decoration: underline; }


@media screen and (max-width:750px) {
	footer img { display: none;}
	footer a.orderBtn { display: block; width: 60%; }
}



main #itemPickup {display:none;}
main #itemDetail { max-width: 900px; width: 90%; margin: auto;}

main { width: 90%; max-width: 1280px; margin: auto; padding: 0 0 5%; text-align: center; }

main h2 { text-align: center; }

main p {}
main span.stock { display: none;}
main span.price { display: block;}
main small.no { display: none;}


@media screen and (max-width:750px) {
main h2 img {  width: 100px;}
main p { padding-top: 1em; font-size: 12px;}

}


main #itemList { padding-bottom: 3em;}
main #itemList div.item { width: 21%; margin: 2%; float: left;}
main #itemList div.item a img { width: 100%;}
main #itemList div.item a p { height: 2rem;}
main #itemList div.item a ,
main #itemList div.item .price ,
main #itemList div.item .memo { display: block; padding: 0.5em 0; }
main #itemList div.item a span { display: block; font-size: 0.5rem;}
main #itemList div.item .price ,
main #itemList div.item .memo { font-size: 0.6rem; }

main #pager {display: none;}


@media screen and (max-width:750px) {
main #itemList { }
main #itemList div.item { width: 46%; }
main #itemList div.item a { display: block; width: 100%;}
main #itemList div.item a img {}
}


main #guide { text-align: center; padding: 2em 0 2em; clear: both; }
main #guide img { width: 100%;}
main #guide img:first-child { display: inline-block; max-width:892px; }
main #guide img[src*="sp"] { display: none; max-width:320px;}

@media screen and (max-width:750px) {
main #guide img:first-child { display: none;}
main #guide img[src*="sp"] { display:inline-block;}
}

main .attention { width: 94%; max-width: 892px; margin: auto; }
main .attention ul li { padding-left: 1em; text-indent: -1em; font-size: 0.6rem;}



main #itemDetail { max-width: 650px; margin: auto;}
main #itemDetail h2 { text-align: left; font-size: 1.29rem; font-weight: 400; padding-bottom: 2%; }
main #itemDetail h2 span { display: block; font-size: 0.7rem; }
main #itemDetail .price { display: block; padding: 1em 0 0; }
main #itemDetail>img { width: 100%; }
main #itemDetail div.memo { padding: 1em 0; }

main #itemDetail div#cart { position: fixed; height: 100%; width: 20%; box-sizing: border-box; padding: 30% 2%; bottom: 0%; right: 0%; background: #e2e2e2; font-size: 1.14rem; }
main #itemDetail div#cart p {font-size: 0.6em;}
main #itemDetail div#cart div { padding: 0.5em 0 ;}
main #itemDetail div#cart select { width: 70%; height: 2em; }
main #itemDetail div#cart select * { padding: 0.5em; text-align: center;}
main #itemDetail div#cart input[type="submit"] { display: block; width: 10em; height: 3.4em; margin:1em auto 0; border-radius: 0.5em; color: #fff; background: #000; border: 2px solid #000; cursor: pointer;}
main #itemDetail div#cart input[type="submit"]:hover { color:#e5002e; background: #fff; border-color:#e5002e; }

main #itemDetail div#cart_in { position: fixed; top: 0; left: 0; box-sizing: border-box ; width: 100%; height: 100%; background: rgba(255,255,255,0.8) }
main #itemDetail div#cart_in p.message { text-align: center; padding-top: 30% }
main #itemDetail div#cart_in p.message a { display: block; width: 50%; max-width: 12em; margin:2em auto 0; padding: 0.5em 0; font-weight:500; text-align: center; border: 1px solid #000;}
main #itemDetail div#cart_in p.message a:hover{ background: #000; color: #fff;}

@media screen and (max-width:750px) {
main #itemDetail{ }
main #itemDetail div#cart { position: relative; height:auto; width: 100%; padding: 2%; bottom:auto; right: auto; font-size: 1rem; text-align: center; }	
main #itemDetail div#cart p,
main #itemDetail div#cart div { text-align: center;}	
}





main .formBox { max-width: 700px; width: 90%; margin: auto;}

main .formBox .message,
main .cartMessage { max-width: 700px; width: 90%; margin: auto; padding: 2em; font-size: 0.76rem;}
main .cartMessage strong { display: block; padding: 1em 0; font-weight: 300; font-size: 2rem; text-align :center; }

main .formBox table { width:100%; margin: auto; border-top: 1px solid #B5B5B5; }
main .formBox table tr {}
main .formBox table th,
main .formBox table td { box-sizing: border-box; padding: 2% ; border-bottom: 1px solid #B5B5B5;}
main .formBox table th { width:30%; color: #0d3896;}
main .formBox table td { width: auto;}
main .formBox table td div { padding-top: 0.3em;}
main .formBox table tfoot td { text-align: right; padding-right: 1em; font-size: 1.14rem;}
main .formBox table tfoot td span { display: inline-block; font-size: 0.8rem; padding-right: 2em;}

main .formBox input[type="text"],
main .formBox select,
main .formBox textarea { border: 1px solid #b4b4b4; padding: 0.2em 0.5em; }
main .formBox input[type="text"] { width:80%; height: 1.8em; }
main .formBox select { width:50%; height: 2.4em; }
main .formBox textarea { width:80%; height: 8em; }
main .formBox input[name="yno"] { width: 8em;}

main .formBox input[type="submit"] { display: block; width: 15em; height: 3.4em; margin:2em auto; border-radius: 0.5em; color: #fff; background: #000; border: 2px solid #000; cursor: pointer;}
main .formBox input[type="submit"]:hover { color:#e5002e; background: #fff; border-color:#e5002e; }
main .formBox input[type="button"] { display: block; width: 15em; margin:2em auto;}


main .formBox  span.delBtn { display: block; text-align: center; color: #fff; cursor: pointer; max-width: 100px; background: #d5d5d5; margin:1em auto 0; font-size: 0.76rem;}
main .formBox  span.delBtn:hover { background: #B1B1B1;}


@media screen and (max-width:750px) {
	main .formBox table th,
	main .formBox table td { width: 100%; display: block;}
	main .formBox table th { padding:1em 0 0em; border-bottom: none;}
	main .formBox table td { padding:0em 0 1em;}

	main .formBox input[type="text"],
	main .formBox select,
	main .formBox textarea { width:94%; }
	main .formBox input[placeholder="〒"] { width: 8em;}

	main .formBox li select {  margin-bottom: 0.5em; }
	main .formBox li select:nth-of-type(1) { width:94%; }
	main .formBox li select:nth-of-type(2) { width:20%; }
	main .formBox li select:nth-of-type(3) { width:20%; }
	main .formBox .description { font-size: 12px;}

	main .formBox  span#addBtn { width: 50%;}

}





main .formBox table#cart { }
main .formBox table#cart th {width: auto;}
main .formBox table#cart td.item { width: auto;}
main .formBox table#cart td.price { width: 15%; }
main .formBox table#cart td.order { width: 10%; }
main .formBox table#cart td.del{ width: 10%;}

main .formBox #cartBtn { text-align: center;}
main .formBox #cartBtn a { display: block; margin: 2% auto; padding: 0.8em; width: 30%; border-radius: 0.5em; color: #fff; background: #000; border: 2px solid #000; }
main .formBox #cartBtn a:hover { color:#e5002e; background: #fff; border-color:#e5002e; }



@media screen and (max-width:750px) {
	main .formBox table#cart th ,
	main .formBox table#cart td{ display: table-cell}
}