@charset "UTF-8";
/******************** import css ***********************/
@import url(reset.css);
@import url(fonts.css);
/****************************************************
/* CSS Example
****************************************************/

/********** BASE **********/

body {background: #f4f4ee;
line-height:120%;
color:#575543;
font-family:courier, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a{ color: #107fb7; text-decoration: none;}
a:hover{ color: #950025; }

.bl{ color: #107fb7;}

img{
border:none;
vertical-align:middle;
}

input,select{
vertical-align:middle;
}

#container{
width:800px;
margin:0px auto;
padding:10px 0px 30px 0px;
text-align:center;
line-height:120%;
}

p{
font-size:93%;
line-height:120%;
margin-bottom:10px;
line-height:1.2;
}

#contents{
clear:both;
line-height:120%;
width:800px;
text-align:left;
margin-top:20px;
padding-top:10px;
}

/********** FONT **********/

h1,h2,h3{
font-weight:bold;margin-bottom:10px;
}

h1{
font-size:197%;
color:#B2BD67;
}

#contents h2{
font-size:116%;
}

#contents h3{
clear:both;
margin-top:20px;
margin-bottom:0px;
font-size:108%;
}

strong{
font-weight:bold;
}
.attention{
color:red;
}
.amount{
font-size:138.5%;
font-weight:bold;
}

/********** HEADER **********/

#header{
text-align:left;
}

#header img{
text-align:left;
margin-right:5px;
}

#header h1{
border-bottom:1px solid #B2BD67;
padding-bottom:13px;
padding-top:30px;
margin-bottom:5px;
}


/********** STEP **********/

ul{
clear:both;
height:130px;
}

ul li{
float:left;
}

ul li img{
margin-right:10px;
}

/********** TABLE **********/

table{
border-collapse:collapse;
border:1px solid #ccc;
text-align:left;
font-size:93%;
margin-top:10px;
margin-bottom:10px;
}

table td, table th{
border:1px solid #ccc;
padding:4px 7px;
}

table th{
background-color:#f6f6f6;
font-weight:bold;
vertical-align:top;
text-align:center;
}

.viewcart{
width:100%;
}

.subtotal, .total, .postage{
float:right;
width:45%;
}

.subtotal th, .total th{
width:40%;
}

.postage{
clear:both;
}

.postage .attention{
font-weight:bold;
text-align:left;
}

.form{
width:100%;
}

.form th{
width:25%;
}


/********** FOOTER **********/

#footer{
clear:both;
border-top:1px solid #ccc;
padding-top:15px;
margin-top:15px;
}

#footer .prev{
float:left;
width:150px;
border:1px solid #28411a;
	padding: 4px 10px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 behavior: url(/js/PIE.htc);

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#9baa00),
		to(#28411a)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#9baa00,
		#28411a
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9baa00,endColorstr=#28411a);
	zoom: 1;
	}

#footer .next{
float:right;
width:150px;
border:1px solid #28411a;
	padding: 4px 10px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 behavior: url(/js/PIE.htc);

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#9baa00),
		to(#28411a)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#9baa00,
		#28411a
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9baa00,endColorstr=#28411a);
	zoom: 1;
	}

#footer form{
display:inline;
}

#footer p{
clear:both;
font-family:tahoma;
font-size:77%;
}

/********** FORM **********/

.form-mini{
width:20px;
margin-right:5px;
}

.form-short, .form-middle, .form-long, select,textarea{
margin:1px 10px 2px 0px;
}

.form-short{
width:70px;
}

.form-middle{
width:159px;
}

.form-long{
width:280px;
}

textarea{
width:380px;
height:100px;
}

.form-error{
border:1px solid #b22222;
background-color:#fff5ee;
padding:1px;
}

#contents .external{
text-align:center;
margin:25px auto;
}

#contents .external input{
font-size:93%;
width:180px;
padding:3px 0px;
}

/********** OTHER **********/

#error-message{
background-color:#b22222;
padding:10px 10px 1px 10px;
}

#error-message p{
color:#ffffff;
font-weight:bold;
}

.decide{
margin:20px auto;
}
/*** 色々 ***/
@media screen and (max-device-width: 680px) {
  body {margin:10px 0;
    font-size: 150%;
  }
  #container{
width:680px;
margin:0px auto;
padding:10px 0px 30px 0px;
text-align:center;
}

#contents{
clear:both;
width:680px;
line-height:120%;
text-align:left;
margin-top:20px;
padding-top:10px;
}
#footer .prev{
float:left;
width:250px;
border:1px solid #28411a;
	padding: 4px 10px;
	font-size: 120%;
	color: #fff;
	cursor: pointer;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 behavior: url(/js/PIE.htc);

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#9baa00),
		to(#28411a)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#9baa00,
		#28411a
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9baa00,endColorstr=#28411a);
	zoom: 1;
	}

#footer .next{
float:right;
width:250px;
border:1px solid #28411a;
	padding: 4px 10px;
	font-size: 120%;
	color: #fff;
	cursor: pointer;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 behavior: url(/js/PIE.htc);

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#9baa00),
		to(#28411a)
		);
	
	/* FF */
	background: -moz-linear-gradient(
		top,
		#9baa00,
		#28411a
		);
		
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9baa00,endColorstr=#28411a);
	zoom: 1;
	}

  }

.cen{text-align:center;}
/*** フォントカラー ***/
.f-title{font-size:120%; display:inline;}
.f-num{font-size:80%; display:inline;}
.blk{color:#000000; display:inline;}
.lg{color:#aaa397; display:inline;}
.brn{color:#51380F; display:inline;}
.olv{color:#615930; display:inline; }
.o{color:#ffd400; display:inline; }
.r{color:#ff3f00; display:inline; }
.g{ color : #9baa00; display:inline;}
.y{color:#ffb31c; display:inline;}
.bl{color:#107fb7; display:inline;}
.rapi{color:#1c00aa; display:inline;}
.purp{color:#ac38ff; display:inline;}
.turq{color:#008d76; display:inline;}
.bol{color:#950025; display:inline;}