/*======================================

	1. フォント設定

=======================================*/

/* --- メインコンテンツ ---*/
#main-contents {
	position:relative;
	padding: 1.428em  0px  0px ;
	margin-top:72px;
	background-color: #f8f8f8;
}

@media screen and (min-width: 62.5em){
#main-contents {
    margin-top: 152px;
    min-height: 44em;
	}
}

#main-contents:before {
	content: '';
	display: inline-block;
	height: 11px;
	width: 100%;
	position: absolute;
	top: -11px;
	-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzMuNCAxMC45IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMy40IDEwLjk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LjcsMEM5LjIsMCwyLjgsNC41LDAsMTAuOWgzMy40QzMwLjYsNC41LDI0LjIsMCwxNi43LDB6Ii8+Cjwvc3ZnPg==");
	mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzMuNCAxMC45IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMy40IDEwLjk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LjcsMEM5LjIsMCwyLjgsNC41LDAsMTAuOWgzMy40QzMwLjYsNC41LDI0LjIsMCwxNi43LDB6Ii8+Cjwvc3ZnPg==");
	-webkit-mask-position: center bottom;
	-webkit-mask-repeat: repeat-x;
	mask-position: center bottom;
	mask-repeat: repeat-x;
	background-color: #f8f8f8;
}

#shopping-contents{
	display:block;
	position:relative;
	padding:0 4% 3em;
	margin:auto;
	max-width:1170px;
	min-width:320px;
}

.mail-attention{
	margin-top:20px;
}

.subtitle{
	display:block;
	width:100%;
	margin:15px 0;
	font-size:16px;
}

.subtitle span{
	position: relative;
    display: inline-block;
    padding: 0 0.571em 0 0;
    text-align: left;
    margin-left:0.5em;
    margin-right: 1.714em;	
}

/*
.subtitle span::after{
	position: absolute;
    top: 53.333%;
    content: '';
    max-width:1170px;
    width: 100vw;
    height: 0;
    border-bottom: dotted 1px #aaa;
    left: 100%;
	}
*/

p,
pre,
cite,
blockquote {
	font-size: 100%;
}

li,dt,dd {
	font-size: 100%;
}

* {
	line-height: 1.3;
	font-style: normal;
}

strong {
	font-weight:bold;
}


/*======================================

	2. サイト構造

=======================================*/

body {
	margin: 0 auto;
	padding: 0;
	color: #444;
	line-height: 1.5;
	background-color: #faf6e3;
	font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

br.clear {
	clear: both;
	font: 0pt/0pt sans-serif;
}

a {
	color: #0047ab;
	text-decoration: none;
}

a:hover {
	color: #c0392b;
	text-decoration: underline;
}

section {
	clear: both;
}

/*======================================

	5. ログイン設定

=======================================*/

#login-table {
	margin: 0 auto 70px auto;
	width: 400px;
}

#login-table table {
	margin: 0 0 10px 0;
}

#login-table th {
	padding: 10px;
	background-color: #eee;
	text-align: left;
	border: 1px solid #CCCCCC;
	text-align: center;
	width: 120px;
}

#login-table td {
	padding: 10px;
	border: 1px solid #CCCCCC;
	text-align: left;
	background-color: #FFF;
}

#login-table input[type="text"],
#login-table input[type="email"],
#login-table input[type="password"]   {
	margin: 0 3px 3px 0;
	padding: 10px 10px;
	border: 1px solid #cdcdcd;
	height: 20px;
    width: 90%;
}

/*======================================

	5. カートページ

=======================================*/


/*
5.1 カート トップ
*/
#cart-table {
	display:block;
	width: 100%;
	margin: 10px 0;
}

#cart-table .header{
	display:flex;
	height:auto;
	width:100%;
}

#cart-table .row{
	display:flex;
	width:100%;
}


.row{
		border-bottom: 2px solid #CCCCCC;
}

.row-none{
		display:flex;
		justify-content: center;
		align-content:center;
		border-bottom: 2px solid #CCCCCC;
		height:100px;
}

.row-none div{
font-size:20px;
 padding:35px 0;
}



#cart-table .head {
	padding: 10px;
	background-color: #eee;
	text-align: center;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	vertical-align: middle;
	
}

#cart-table  .body {
	text-align:center;
	padding: 10px;
	margin:auto 0;
	/*background-color: #FFF;*/
	display:inline;
}

/*スマホ*/
@media not screen and (min-width: 62.5em){
	
		
		#cart-table .header , #cart-table .row{
			flex-direction: column;
		}
		
		#cart-table .child1{
			display:flex;
			width:100%;
			border-bottom: none;
		}
		
		 #cart-table .child2{
			display:flex;
			width:100%;
		}
		

		#cart-table .num {
			display:none;
		}
		
		#cart-table .product {
			width:40%;
			border-bottom: none;
		}
		
		#cart-table .thumnail{
			width:30%;
			border-bottom: none;
		}
		
		#cart-table  .unitprice {
			width:30%;
			border-bottom: none;
		}
		
		#cart-table  .quantity {
			width:30%;

		}
		
		#cart-table  .subtotal {
			width:40%;

		}
		
		#cart-table .action{
			width:30%;
			
		}
}

/*PC*/
@media screen and (min-width: 62.5em){
		
			#cart-table .num {
				display:table-cell;
				width:5%;
			}
			
			#cart-table .child1{
				display:flex;
				width:60%;
			}
			
			 #cart-table .child2{
				display:flex;
				width:35%;
			}
			#cart-table .product {
				width:50%;
			}
			
			#cart-table .thumnail{
				width:25%;
			}
			
			#cart-table  .unitprice {
				width:25%;
	
			}
			
			#cart-table  .quantity {
				width:28.5%;
			}
			
			#cart-table  .subtotal {
				width:42.8%;
			}
			
			#cart-table .action{
				width:28.5%;
			}
}

#cart-table span.body img {
	width: 120px;
	height: auto;
}

#cart-table input[type="text"] {
	margin: 0 3px 3px 0;
	padding: 5px 10px;
	border: 1px solid #cdcdcd;
	height: 20px;
}

#cart-table input[type="button"] {
	border: 1px solid #cdcdcd;
	font-size:80%;
	margin:auto;
}

#cart-table-total {
	margin: 30px 0;
	padding: 10px;
	border: 1px solid #CCC;
	text-align: right;
}

#cart-table-total span {
	font-size: 30px;
	font-weight: bold;
	color: #C00;
}

 .required_info {
    color: #F00;
    font-size: 0.7em;
    margin-left: 10px;
}



/*
5.2 ユーザー情報登録、確認画面
*/
.registration-table {
	display:block;
	width:100%
}

.registration-table  .parent {
	display:flex;
	width:100%
}

.registration-table table {
	font-size:100%;
	margin-bottom:30px;
}

.registration-table th {
	padding: 10px;
	background-color: #eee;
	text-align: left;
	border: 1px solid #CCCCCC;
	width: 40%;
	vertical-align: middle;
}

.registration-table td {
	padding: 10px;
	border: 1px solid #CCCCCC;
	text-align: left;
	background-color: #FFF;
}

/*スマホ*/
@media not screen and (min-width: 850px){
	
		.registration-table table {
			min-width:300px;
			width:100%;
			table-layout: fixed;
		  	word-break: break-all;
		  	word-wrap: break-word;
		}
		
		.registration-table th , .registration-table td{
			display:block;
			width:100%
		}
		
		.registration-table  .parent.vartical {
			flex-direction: column;
		}
		
			.registration-table  td.under {
			border-top:none;
		}
	
}

/*iphone5 se用*/
@media not screen and (min-width: 350px){
	
		.registration-table  .parent.vartical2{
			flex-direction: column;
		}
}


.registration-table input[type="text"],
 .registration-table input[type="email"],
.registration-table input[type="password"],
.registration-table input[type="tel"],
.registration-table select{
	margin: 0 3px 3px 0;
	padding: 5px 5px;
	border: 1px solid #cdcdcd;
	height: 25px;
}

.registration-table input[type="button"] 
{
	border: 1px solid #cdcdcd;
	font-size:80%;
	margin:auto;
}

.registration-table  input.to_user_confirm{
	background-color: #9e5e37;
	color:#fff;
	margin-top: 20px;
	 padding: 1em;
    line-height: 1.3;
    width: 100%;
    display: block;
}

.registration-table .annotation {
    font-size: 0.7em;
    font-color: #ccc;
}

.common-list{
	margin-bottom:20px;
}

/*
5.3 配送情報
*/
.cart-postage {
	margin: 0 0 30px 0;
}

.cart-postage table {
	width:100%
}

.cart-postage th {
	padding: 10px;
	background-color: #eee;
	text-align: left;
	border: 1px solid #CCCCCC;
	text-align: center;
	vertical-align: middle;
	width: 150px;
}

.cart-postage td {
	padding: 10px;
	border: 1px solid #CCCCCC;
	vertical-align: middle;
	background-color: #FFF;
}

.cart-postage  input {
	vertical-align: 0.2px;
}

.cart-postage .parent{
	display:flex;
}

.cart-postage .child{
	margin:10px;
	font-size:100%;
}

.cart-postage input[type="button"] 
{
	border: 1px solid #cdcdcd;
	font-size:80%;
	margin:auto;
}

.cart-postage .parent.vartical2{
flex-direction: column;
}

.message{
	margin: 10px 0;
}

/*スマホ*/
@media not screen and (min-width: 850px){
	
	.cart-postage  .parent-table th {
			display:block;
			width:100%;
		}
	
	.cart-postage  .parent-table td {
			display:block;
			width:100%;
		}
		
	.cart-postage  .child-table th {
			display:table-cell;
			width: 40%;
			font-size:90%;
		}
	
	.cart-postage  .child-table td {
			display:table-cell;
			width :auto;
		}
		
		.cart-postage .parent.vartical {
		flex-direction: column;
		}
		
			.postage-table {
			min-width:275px;
			width:100%;
			table-layout: fixed;
		  	word-break: break-all;
		  	word-wrap: break-word;
		}
	
}
/*iphone5 se用*/
@media not screen and (min-width: 450px){
		.cart-postage .parent.vartical3{
		flex-direction: column;
		}
}

/*
5.4 注文内容確認
*/

#check-table {
	display:block;
	width: 100%;
	margin: 10px 0;
}

#check-table .header{
	display:flex;
	height:auto;
	width:100%
}

#check-table .row{
	display:flex;
	width:100%;
}

#check-table .row{
		border-bottom: 2px solid #CCCCCC;
}

#check-table .head {
	padding: 10px;
	background-color: #eee;
	text-align: center;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	vertical-align: middle;
	
}

#check-table  .body {
	text-align:center;
	padding: 10px;
	margin:auto 0;
	display:inline;
}

/*スマホ*/
@media not screen and (min-width: 62.5em){
	
		
		#check-table .header , #check-table .row{
			flex-direction: column;
		}
		
		#check-table .child1{
			display:flex;
			width:100%;
			border-bottom: none;
		}
		
		 #check-table .child2{
			display:flex;
			width:100%;
		}
		

		#check-table .num {
		
			display:none;
			border-bottom: none;
		}
		
		#check-table .thumnail{
			width:30%;
			border-bottom: none;
		}
		
		#check-table .product {
			width:70%;
			border-bottom: none;
		}
		
		
		#check-table  .unitprice {
			width:30%;
			
		}
		

		
		#check-table  .quantity {
			width:30%;

		}
		
		#check-table  .subtotal {
			width:40%;

		}
		
}

/*PC*/
@media screen and (min-width: 62.5em){
		
			
			#check-table .child1{
				display:flex;
				width:60%;
			}
			
			#check-table .child2{
				display:flex;
				width:40%;
			}
			
			
			#check-table .num {
				width:20%;
			}
			
			#check-table .thumnail{
				width:30%;
			}
			
			#check-table .product {
				width:50%;
			}
			
			
			#check-table  .unitprice {
				width:30%;
	
			}
			
			#check-table  .quantity {
				width:30%;
			}
			
			#check-table  .subtotal {
				width:40%;
			}
			
}

#check-table span.body img {
	width: 120px;
	height: auto;
}

.total {
	display:flex;
	flex-direction: column;
	padding: 10px 20px;
	width:100%;
	text-align: right;
	border-bottom:2px solid #CCCCCC;
}

.total  .child{
	padding: 7px 0;
	font-size:120%;

}

.total  .child span{
	border-bottom:2px solid #cc3300;
}

#check-table-total {
	margin: 30px 0;
	padding: 10px;
	border: 1px solid #CCC;
	text-align: right;
}

#check-table-total span {
	font-size: 30px;
	font-weight: bold;
	color: #C00;
}

/*
5.ex 共通エラー
*/
.err_form {
  background-color:#da0000;
  padding:10px;
  margin-bottom:10px;
  text-align: center;
  color: #FFF;
}
.err_item {
  margin-bottom:10px;
}
.err_item span {
  background-color:red;
  color:#fff;
  padding:5px;
  font-size:0.9em;
}
.war_form {
  padding:10px;
  margin-bottom:10px;
  text-align: center;
  color: #ff0000;
}