@charset "utf-8";


.morder {
/*	width: 100%;*/

	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.morder > div {
	padding: 8px;

/*	border: 1px #fff solid;*/
}

.morder_l { width: 300px;}
.morder_r { width: calc((100% - 300px) - 8px);}


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

	.morder {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.morder > div {
		width: 100%;
	}

	.morder_l {
		display: none;
		padding: 0;
	}

}


/* =========================== カテゴリメニュー */
.cat_menu li.tit { background: #c04000; text-align: center; }
.cat_menu li a { color:#666666; }
.cat_menu li a:hover { color:#C0C000}

@media only screen and ( max-width : 750px ) {
	.cat_menu ul {
		display:flex;
		flex-wrap: wrap;
	}
	.cat_menu li {
		font-size: 16px;
		width: calc(100% / 2);
	}

	.cat_menu li.tit {
		width: 100%;
	}
}


.genre { margin: 1rem 0; font-size: 120%; }
.genre_image img { display: block; margin: auto;}

.tnavi { display:flex; justify-content: space-around; margin: 2rem 0; }


/*

https://ponsyon.com/archives/1679
ブロック要素にして全体にしたいんだけど・・・

*/

.morder_list {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}


.morder_list > li {
	width: 235px;
	margin: 4px;

/*	background-color: rgba(255, 0, 0, 0.05);*/
/*	background-color: rgba(192, 255, 62, 0.05);*/
	box-shadow: 1px 2px 3px rgba(0, 255, 0, 0.05);
	border: 1px solid #21264d;
}

.morder_list >li:hover {
/*	border: 3px solid #9ACD32;*/
	border: 1px solid #C0C0C0;
	background-color: #F7F7F7;

}


.morder_list > li > a {
	display: block;
	text-decoration: none;

/*	color: #fff;*/
	padding: 10px;
/*	border: 3px solid #000;*/
/*	border: 3px solid rgba(255, 0, 0, 0.05);*/
}

.morder_list > li > a:hover {
/*
	border: 3px solid #9ACD32;
	background-color: rgba(192, 255, 62, 0.05);
*/
}

.morder_list > li > a >h4 { font-size: 14px;
	color: #404040;
	/* ･･･リーダー表示のため↓↓↓ これは単行版 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* ･･･リーダー表示のため↑↑↑ */
	margin-left: 0.5em;
	margin-top: 3px;

}
.morder_list > li > a > .morder_list-img { margin: 8px 0; /*width: 18px;*/ }
.morder_list-img img { display: block; margin: auto; height: 203px; }
.exp {
	/* ･･･リーダー表示のため↓↓↓ これは複数行版 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	/* ･･･リーダー表示のため↑↑↑ */
}

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

	.morder_list {
		margin-bottom: 3em;
	}

	.morder_list > li {
/*		width: 235px;*/
/*		margin: 4px;*/
		width: calc((100% / 2) - (4px * 2));
/*		width: 50%;*/

	}

	.morder_list-img img { height: auto; }


/*
	.morder_list > li {
		width: 100%;
		margin: 10px 0 0;
	}


	.morder_list > li > a {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;

		-ms-flex-wrap: wrap;
		flex-wrap: wrap;

		padding: 5px;
	}
*/

}



/* [商品詳細ページ] */
/* =========================== indexの分 */
#detailImg { text-align: center; }

#detail { color: #333; font-size: 100％; border: 1px #21264D solid;	padding: 2em;	margin-bottom: 1em; }
#detail div { text-align:center; font-size: 12px;}

#detail #mei { border: 1px #21264d solid; margin-top: 1em; margin-left: auto; margin-right: 0; width: 50%; }
#detail #mei tr,
#detail #mei th,
#detail #mei td { border: 1px #21264d solid; vertical-align: middle; padding: 4px; font-size: 12pt; text-align: right; }
#detail #mei th { font-weight: normal; }
#detail #mei td { }
#detail #mei td span.tyui { font-size: 12px; color: #800000; font-weight: bold; }
#detail #mei td form { display: inline; }


#detail #mei td input {
	background: #21264D;
	color: #FFFFFF;
	border-style: none;
	padding: 10px;
}

@media (max-width: 750px) {
	#detail #mei {
		width: 100%;
	}
}

.tuTit {
	background: #21264D;
	padding: 0.5em;
	margin-bottom: 1em;
	color: #FFFFFF;
}

.tuTit_sub { font-size: 12pt;

	text-align: center;
	background: #F2F5FB;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	color: #21264D;
}

.tutax {

	text-align: right;
	font-size: 90%;
	margin-top: 0.5em;

}


#fullimage {
	box-shadow: 0 0 25px 0 #999999;
	-moz-box-shadow: 0 0 25px 0 #999999;
	-webkit-box-shadow: 0 0 25px 0 #999999;
	margin: 10px 0 40px;
}

#noimagefull { display: block; margin: auto; }

/* 画像切り替えよう */
#imgthum { /*margin-top:5px;*/ text-align:center;}
#imgthum li { display:inline; margin:0 10px; }
#imgthum li img { border:4px #999 double; max-width: 160px; max-height: 100px; cursor:pointer; }

/* 画像切り替えのところの説明 */
#imgthumcmt { width:740px; margin:auto; text-align:right; font-size:9pt; color:#e13d6a; margin-bottom:1em; }

.cool_message {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
	padding: 10px 5px 10px 5px;
	margin-bottom: 2em;

}
.cool_message:after,
.cool_message:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.cool_message:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 10px;
	margin-left: -10px;
}
.cool_message:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 16px;
	margin-left: -16px;
}

/* =========================== 買い物かご */
.kago_cmt { margin-bottom: 1rem; }

.kago_kei { text-align:right; margin-bottom: 1rem;}
.kago_msg { text-align:center; margin-bottom: 1rem;}

#basket { width: 100%;
	font-size: 10pt;
	border: 1px solid #666666;
	margin-bottom: 1rem;
}
#basket tr { /*height: 42px;*/ }
#basket th,
#basket td { padding: 10px 20px;/*padding:.2em;*/ border:1px #666666 solid; }
#basket thead th { color: #FFFFFF;	height: 30px; vertical-align: middle;	text-align: center;
	background-color: #21264d;

}
#basket tbody th { text-align: center; font-weight: normal;	vertical-align: middle;	background-color: #FFFFFF;}
#basket tbody td { background-color: #FFFFFF; 	vertical-align: middle; }
#basket tbody td.basketName { text-align: left;	padding-left: 5px; }
#basket tbody td.basketTanka { text-align: center; }
#basket tbody td.basketSale { text-align: center; }
#basket tbody td.basketSale input { width: 2em; text-align: center; vertical-align: middle; }
#basket tbody td.basketZaiko { text-align:right; text-align:center; vertical-align: middle; }
#basket tbody td.basketItemkei { text-align:right; }
#basket tbody td.basketTrash { text-align: center; vertical-align: middle;	background-color: #FFF0F0;}

#basket tfoot th { text-align: center;	background-color: #E0E0E0;	vertical-align: middle; }
#basket tfoot td { vertical-align: middle; background-color: #E0E0E0; }

#basket td span {
	background: #eee;
	color: dimgrey;
	display: none;
	font-size: 10px;
	font-weight: bold;
	padding: 5px;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	left: 0;
}

@media screen and (max-width: 750px) {
	#basket {
		border-width: 0;
		margin-bottom: 0;	/* trがスマホだとマージンボトム持っているのでテーブルの大きいボトムはいらないかなと */
	}
	#basket thead {
		left: -9999px;
		position: absolute;
		visibility: hidden;
	}

	#basket tr {
/*		height: auto;*/
		border-bottom: 1px solid;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 40px;
	}

	#basket td {
		border-width: 0;
/*		border: 1px solid;*/
/*		margin: 0 -1px -1px 0;*/
/*		padding-top: 35px;*/
		padding-top: 30px;
		position: relative;
/*		width: 50%;*/
		width: calc(100% / 5);
	}
	#basket td span {
		display: block;
	}

	#basket td:nth-child(1) { width: 10%; }
	#basket td:nth-child(2) { width: 90%;}
}

/*　かごのボタン「上記のかごの商品を注文する」　↓↓　*/

.css_btn_order {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fcb45b), color-stop(1, #f78411) );
	background:-moz-linear-gradient( center top, #fcb45b 5%, #f78411 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcb45b', endColorstr='#f78411');
	background-color:#fcb45b;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	text-indent:0;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:200px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}
.css_btn_order:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f78411), color-stop(1, #fcb45b) );
	background:-moz-linear-gradient( center top, #f78411 5%, #fcb45b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78411', endColorstr='#fcb45b');
	background-color:#f78411;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}.css_btn_order:active {
	position:relative;
	top:1px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}

/*　かごのボタン　ここまで　↑↑　*/

/*	【オーダー】
=========================================================================================*/
.fontb { font-weight:bold; }
.faka { color:#f00; }
.fao { color:#00f; }


.nextnavi { text-align: center; /*margin-bottom:6em;*/
	padding-bottom: 5em;
	margin-top: 5em;

}
.nextnavi a { color:#00f; }
.nextnavi a:hover { color: #ffaa00; }


/*	オーダー
===============================================================================*/
.order_navi {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}



.p-total {
	text-align: right;
	padding: 4px;
	border-bottom: 1px #ccc solid;
	margin-bottom: 16px;
}

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

	.order_list th,
	.order_list td { display: block; width: 100%;
		padding: 4px;
	}

}

/*#orderFrame { width: 100%; }*/		/* オーダー全体を包むわく */

#orderCmt {
	font-size: 11pt; 
	color:	#21264d;
 	text-align: left;
	border: thin solid #21264d;
	vertical-align: middle;
	padding: 10px 5px 10px 5px;
	margin-top: 1em;

}

#orderWarn {
	color: #f00;
	font-weight: normal;
	background: #FFF0F0;
	line-height: 1.2em;
	padding: 5px 5px 5px 5px;
	margin: 1em auto 1em auto;
	font-size: 11pt;
}

.orderListTit { text-align: center; color: #FFFFFF;	background-color: #21264d;	padding: 5px;	margin-top: 2em;}

#order { width: 100%; font-size: 10pt; border: 1px solid #666666; margin-bottom: 1rem; }

#order tr { /*height: 42px;*/ }
#order th,
#order td { padding: 10px 20px; /*padding: .2em;*/ border: 1px solid #666666; }
#order thead th { text-align: center; font-weight: normal; height: 30px;
	background-color: #DEEBFE;

}
#order tbody td { text-align: right; }
#order tbody td.sname { text-align: left; }

#order tfoot th { font-weight:normal;}
#order tfoot td { text-align:right;}
#order tfoot .syoukei { background-color:#E0E0E0; }
#order tfoot .pack { background-color:#E0E0E0; }
#order tfoot .carri { background-color:#E0E0E0; }
#order tfoot .cool { background-color:#E0E0E0; }
#order tfoot .zei {	background-color: #C0C0C0;}
#order tfoot .goukei { background-color:#E0E0E0; }

#order td span {
	background: #eee;
	color: dimgrey;
	display: none;
	font-size: 10px;
	font-weight: bold;
	padding: 5px;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	left: 0;
}


@media screen and (max-width: 750px) {
	#order {
		border-width: 0;
		margin-bottom: 0;	/* trがスマホだとマージンボトム持っているのでテーブルの大きいボトムはいらないかなと */
	}

	#order thead {
		left: -9999px;
		position: absolute;
		visibility: hidden;
	}

	#order tr {
/*		height: auto;*/
		border-bottom: 1px solid;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 40px;
	}

	#order td {
		border-width: 0;
/*		border: 1px solid;*/
/*		margin: 0 -1px -1px 0;*/
/*		padding-top: 35px;*/
		padding-top: 30px;
		position: relative;
/*		width: 50%;*/
		width: calc(100% / 3);
	}
	#order td span {
		display: block;
	}

	#order td:nth-child(1) { width: 10%; }
	#order td:nth-child(2) { width: 90%;}


}

/*
	送料テーブル
*/
.ctable { width: 600px; border: 2px #804000 solid; font-size: 10pt;	margin: 0 auto 2em auto; }
.ctable caption { color:#f00; }
.ctable th,
.ctable td { padding: 0.3em; border-style: solid; border-color: #804000; border-width: 1px; vertical-align: middle; }
.ctable thead th { border-bottom: 3px double #804000; background-color: #A9C893; letter-spacing: 0.15em; height: 30px; }
.ctable tfoot th { border-top: 3px double #804000; color: #ff0000; text-align: right; letter-spacing: 0.15em; font-size: 8pt; height: 30px; vertical-align: middle; }
.ctable tbody th { width: 400px; background-color:#ccffcc; font-weight:normal; text-align:left; height: 30px; vertical-align: middle; }
.ctable tbody td { width: 100px; text-align:right; background-color:#FFFFF0; height: 30px; vertical-align: middle;}

#ctable_warn {
	color: #f00;
	font-weight: normal;
	background: #FFF0F0;
	line-height: 1.2em;
	font-size: 11pt;
	text-align: center;
	padding: 10px;
	margin: 1em auto 1em auto;

}

@media screen and (max-width: 750px) {
	.ctable { width: 100%; }
	.ctable th,
	.ctable td { width: auto; }
}

/*
	お客様情報入力
*/
.user-info { width: 100%; border-collapse: collapse; border: 2px #a9c893 solid; color: #804000; font-size: 10pt; line-height: 1.2em;	margin-bottom: 1em; }

.user-info th,
.user-info td { border:2px #a9c893 solid; padding:.2em; 	padding: 5px 5px 5px 5px; }

.user-info thead th { background-color:#a9c893; color:#000; text-align:left; padding: 5px 5px 5px 5px; }
.user-info thead th span { color:#c04000; }
.user-iInfo thead th div { font-size:9pt; }

.user-info tbody th,
.user-info tbody td { background-color:#fffff0;}

.user-info tbody th span,
.user-info tbody td span { font-size: 80%; margin-left: .5rem; }

.user-info tbody th { width:200px; text-align:left; font-weight:normal;}

.user-info tbody td a{ text-decoration: none; color:#00f; }
.user-info tbody td a:hover{ text-decoration: underline; color: #ffaa00; }


.user-info input[type=text],
.user-info input[type=tel],
.user-info input[type=email],
.user-info select,
.user-info textarea {
	background-color: #fff;
	border: 1px solid #8b8d8f;
	padding: 5px;
/*	border-radius: 3px;*/
}

.user-info input[type=text],
.user-info input[type=tel],
.user-info input[type=email] {
	width: 40%;
/*	border-radius: 5px;*/
}

.user-info textarea {
	height: 200px;
	width: 100%;
}

.user-info input.post { width: 4rem; }
.user-info input.age { width: 3rem; }

@media screen and (max-width: 750px) {
	.user-info {
		border-width: 0;
	}
	.user-info tbody th,
	.user-info tbody td {
		display: block;
		width: 100%;
		border-width: 0;
	}

/*	.user-info thead th { width: 100%; }
*/
	.user-info tbody th { width: 100%; }
	.user-info tbody td { border-bottom-width: 1px; }

	.user-info input[type=text],
	.user-info input[type=tel],
	.user-info input[type=email] {
		width: 100%;
/*		border-radius: 5px;*/
	}

	.user-info input.post { width: 4rem; }
	.user-info input.age { width: 3rem; }
	.user-info textarea {
		height: 5em;
	}
}


.order_btn_posi {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}


/*　かごのボタン「注文」「クリア」「送信」　↓↓　*/

.css_btn_order2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fcb45b), color-stop(1, #f78411) );
	background:-moz-linear-gradient( center top, #fcb45b 5%, #f78411 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcb45b', endColorstr='#f78411');
	background-color:#fcb45b;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	text-indent:0;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:80px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}

.css_btn_order2:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f78411), color-stop(1, #fcb45b) );
	background:-moz-linear-gradient( center top, #f78411 5%, #fcb45b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78411', endColorstr='#fcb45b');
	background-color:#f78411;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}.css_btn_order2:active {
	position:relative;
	top:1px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}

/*　かごのボタン「注文」「クリア」「送信」　ここまで　↑↑　*/



/*　かごのボタン「戻る」　↓↓　*/

.css_btn_return  {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:120px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}
.css_btn_return:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}
.css_btn_return:active {
	position:relative;
	top:1px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}

/*　かごのボタン「戻る」　ここまで　↑↑　*/


/*
	通販料金確認
*/
#orderConf { width: 100%; border-collapse: collapse; font-size: 10pt; border: 1px solid #666666; margin-bottom: 3em; }
#orderConf tr { height: 42px; }
#orderConf th,
#orderConf td { padding: .2em; border: 1px solid #666666; vertical-align: middle; font-size: 10pt; }
#orderConf thead th { font-weight: normal; height: 42px; text-align: center; background-color: #DEEBFE;}
#orderConf tbody th,
#orderConf tbody td { background-color:#fff; height: 42px; }
#orderConf tbody th { width:30px; height: 42px; }
#orderConf tbody td { text-align:right; }
#orderConf tbody td.hinmei { text-align:left; }

#orderConf tfoot th { font-weight:normal; }
#orderConf tfoot td { text-align:right; }
#orderConf tfoot .syoukei { background-color:#E0E0E0; }
#orderConf tfoot .daibiki { background-color:#C0C0C0; }
#orderConf tfoot .pack { background-color:#C0C0C0; }
#orderConf tfoot .carri { background-color:#C0C0C0; }
#orderConf tfoot .cool { background-color:#C0C0C0; }
#orderConf tfoot .zei { background-color:#C0C0C0; }
#orderConf tfoot .goukei { background-color:#E0E0E0; }

#orderErr {
	color: #f00;
	font-weight: normal;
	background: #FFF0F0;
	line-height: 1.2em;
	font-size: 12pt;
	text-align: center;
	padding: 1em 1em 1em 1em;
	margin: 2em auto 0em auto;

}

#orderConf td span {
	background: #eee;
	color: dimgrey;
	display: none;
	font-size: 10px;
	font-weight: bold;
	padding: 5px;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	left: 0;
}



@media screen and (max-width: 750px) {
	#orderConf {
		border-width: 0;
		margin-bottom: 0;	/* trがスマホだとマージンボトム持っているのでテーブルの大きいボトムはいらないかなと */
	}
	#orderConf thead {
		left: -9999px;
		position: absolute;
		visibility: hidden;
	}

	#orderConf tr {
		border-bottom: 1px solid;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 40px;
	}

	#orderConf td {
		border-width: 0;
		padding-top: 30px;
		position: relative;
		width: calc(100% / 3);
	}
	#orderConf td span {
		display: block;
	}

	#orderConf td:nth-child(1) { width: 10%; }
	#orderConf td:nth-child(2) { width: 90%;}
}


.pay_houhou {
	width: 500px;
	margin:auto;
	font-size: 10pt;
	color: #804000;
	background: #ffe0c0;
	padding: 1em;
	text-align: left;
}

.pay_houhou img.kuro { width: 100%;	}

.pay_houhou li { line-height: 1.6;}
.pay_houhou li::first-letter { color: #ff8040;	}

@media screen and (max-width: 750px) {
	.pay_houhou {	width: 100%;	}
}


/*
	通販お届け先確認
*/
#kinfo {
	width: 700px;
	border-collapse: collapse; border: 2px #a9c893 solid;
	color: #804000;
	font-size: 10pt;
	line-height: 1.2em;
	margin-top: 2em;
	margin-bottom: 1em;

}
#kinfo th,
#kinfo td { border: 2px #a9c893 solid; padding: .2em; padding: 5px 5px 5px 5px; 	text-align: left;}
#kinfo th { width: 200px; background-color: #fffff0; color: #000; text-align: left; padding: 5px 5px 5px 5px;	font-weight: normal; }
#kinfo th.midashi { background-color:#a9c893;}
#kinfo td { background-color:#fffff0; }
#kinfo td span {font-size:80%;}


@media screen and (max-width: 750px) {
	#kinfo {
		width: 100%;
		border-width: 0;
	}
	#kinfo th,
	#kinfo td {
		display: block;
		width: 100%;
		border-width: 0;
	}

	#kinfo td { background-color: #fff; border-bottom-width: 1px; }


}


/*　ボタン「ホームページへ」　↓↓　*/

.css_btn_hp {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fcb45b), color-stop(1, #f78411) );
	background:-moz-linear-gradient( center top, #fcb45b 5%, #f78411 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcb45b', endColorstr='#f78411');
	background-color:#fcb45b;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	text-indent:0;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:200px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */
}
.css_btn_hp:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f78411), color-stop(1, #fcb45b) );
	background:-moz-linear-gradient( center top, #f78411 5%, #fcb45b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78411', endColorstr='#fcb45b');
	background-color:#f78411;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}.css_btn_hp:active {
	position:relative;
	top:1px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	filter: none;			/* これがないとIE9の角丸背景がでてくるっぽいんだけどぉこれで解決かはわからないｗ */

}


/*　ボタン「ホームページへ」　ここまで↑↑　*/



/* =========================== ついだにいかが? */
.tuide { margin-bottom: 1em; }
.tuide th,
.tuide td { vertical-align: top; }
.tuide table { /*border:1px #f00 solid;*/ margin-top: 10px; width: 200px; }
.tuide table th,
.tuide table td { padding: .2em; vertical-align: top; }


/* =========================== 会員 */
#member			{ text-align:left;}
#member dt		{ line-height:1.5em;}
#member dt span	{ font-size:8pt; color:#ff0000;}
#member dd		{ margin-left:4em; margin-bottom:5px;}
#member dd input {
	background-color: #000000;	/* 背景は淡い黄色 */
	border: 1px solid #666;	/* 枠線は淡い青色 */
	color:#999999;
}





/* [ご利用方法] */
/* =========================== 銀行口座 */
.guide dt { border-bottom: 1px #ccc solid; margin-bottom: .5rem; }
.guide dd { margin-left: 1rem; margin-bottom: 2rem; }

/* =========================== 代引き手数料 */
.delivery	{ margin:auto; font-weight:normal }
.delivery thead th { text-align:center; /*font-weight:normal;*/ border:solid #404040 1px;}
.delivery tbody th,
.delivery tbody td { padding: 4px 0.5em;}
.delivery tbody th { /*width:150px;*/ text-align:left;}
.delivery tbody td { /*width:200px;*/ text-align:right; }

/* =========================== 送料 */
.carriage { margin: auto; font-weight:normal; }
.carriage thead th { text-align:center; border:solid #404040 1px;}
.carriage thead td { text-align:center;}
.carriage tbody th,
.carriage tbody td {padding:0.5em; border-bottom:1px #333333 dotted;}
.carriage tbody th { text-align:left;}
.carriage tbody th span { font-size: 80%;}
.carriage tbody td { text-align:right;}

.carii_info {
	width: 500px;
	padding: 10px;
	border: thin dashed #C0FFC0;
}

/* =========================== 保証規定 */
.regulations { margin:auto; font-weight:normal;}
.regulations thead th { text-align:center; border:solid #404040 1px;}
.regulations tbody th,
.regulations tbody td { padding:0.5em; border-bottom:1px #333333 dotted;}
.regulations tbody th,
.regulations tbody td { text-aling:left;}


/* =========================== ボタン */



/*
.tuhan_btm01 {
	width: 100%;
  	display: inline-block;
  	text-decoration: none;
  	color: #0c3256;
  	border-radius: 3px;
  	transition: .4s;
	text-align: center;
	padding: 1em 1em 1em 1em;
	background: #FFFFFF;
	border: 2px solid #0c3256;

}

.tuhan_btm01:hover {
  background: #0c3256;
  color: #FFFFFF;
}

.tuhan_btm02 {
  width: 100%;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  background: #0c3256;
  transition: .4s;
	text-align: center;
	padding: 0.5em 0.5em 0.5em 0.5em;
	margin-top: 0.5em;

}


.tuhan_btm03 {
  width: 100%;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #00BCD4;
  background: #f3f6fa;
  transition: .4s;
	padding: 0.5em 0.5em 0.5em 1em;

}

.tuhan_btm03:hover {
  color: #FFFFFF;
  background: #C0C0C0;

}
*/