@charset "UTF-8";

/* Common */

* { box-sizing:border-box; }
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
form,input,textarea,
p,th,td { margin:0; padding:0; box-sizing:border-box; }
html,body { background:#fff; }
img { border:0; vertical-align:top; line-height:0; }
h1,h2,h3 { font-size:100%; font-weight:normal; }
ul,dl,ol { text-indent:0; }
li { list-style:none; }
em,th { font-style:normal; font-weight:normal; }
table { border:none; border-collapse:collapse; border-spacing:0; font-size:inherit; }
th,td { text-align:left; vertical-align:top; }
input,select,textarea { font-size:100%; }
.disabled{
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}
.good{ background: #FEE !important; }
.bad{ background: #EEF !important; }

#size01,#size02{
	display: none;
	margin-top: 20px;
}

body{
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",  "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, Sans-Serif;
}
label img,
label input[type="radio"],
label input[type="checkbox"] { cursor:pointer; }

.disabled label img,
.disabled label input[type="radio"],
.disabled label input[type="checkbox"] { cursor:default; }


input[type="text"] { padding-left:5px; padding-right:5px; }
input[type="number"] { padding-left:5px; }

/* Header */

#hd{ padding: 10px; }
#hd p img{ width: 100px; }

#mainvisual{
	display: table;
	width: 100%;
	min-width: 640px;
	height: 400px;
	margin-bottom: 20px;
}

#mainvisual h1{
	display: table-cell;
	width: 40%;
	vertical-align: middle;
	background: #04593A;
}

#mainvisual h1 span{
	display: block;
	margin: 20px;
	font-size: 24px;
	color: #FFF;
}

#mainvisual div{
	display: table-cell;
	width: 60%;
	vertical-align: middle;
	background: url("../img/mainvisual.jpg") no-repeat 0 50%;
	background-size: cover;
}

#mainvisual div img{ display: none; }

#lead p{
	font-size: 18px;
	line-height: 2;
}

/* Content */

.content{
	max-width: 980px;
	margin: 0 auto;
}

/* Section */

.section{
	border-bottom: 1px solid #DDD;
	padding: 40px 20px;
}

#order.section,#volume.section{ border: 0; }

.section p{
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 20px;
}

/* Headline */

h2{
	font-size: 20px;
	font-weight: bold;
	color: #04593A;
	margin-bottom: 20px;
}

h3{
	font-size: 18px;
	font-weight: bold;
	color: #000;
}

h4{
	font-size: 16px;
	font-weight: bold;
	color: #000;
}


/* Table */

.tbl01{
	border-top: 2px solid #DDD;
	border-left: 2px solid #DDD;
	margin-bottom: 20px;
}

.tbl01 th,
.tbl01 td{
	padding: 10px;
	border-bottom: 2px solid #DDD;
	border-right: 2px solid #DDD;
	text-align: center;
	font-size: 14px;
	vertical-align: middle;
}

.tbl01 th{
	background: #EEE;
	vertical-align: middle;
}

.tbl01 td{
	background: #FFF;
	vertical-align: middle;
}

.tbl01 td span{
	display: block;
	font-size: 10px;
}

.tbl01 label input{ margin-right: 10px; }

.tbl01 ul{
	list-style: square;
	padding-left: 25px;
}

.tbl01 ul li{
	list-style: square;
	text-align: left;
}

/* Column */

.colbox{
}


.colbox > p{
	margin: 0 20px 20px;
}

.colbox > div{
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding-bottom: 20px;
}

.colbox > div.lead{ display:block; width:100%; }
.colbox > div.lead span{ display:block;font-size:12px; color:#666;text-indent:-1em;padding-left:1em; }

.colbox > div > div{
	margin: 0 20px 0 10px;
}

.colbox > div:nth-child(even) > div{
	margin: 0 10px 0 20px;
}


/* Button */

.btn{
	width: 320px;
	margin: 0 auto;
}

.btn a{
	display: block;
	background: #333;
	color: #EEE;
	padding: 20px 0;
	text-align: center;
	font-size: 24px;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	text-decoration: none;
}

.btn a:active,
.btn a:hover{
	background: #000;
	color: #FFF;
}

.btn2{
	width: 240px;
	margin: 0 auto;
}

.btn2 a{
	display: block;
	background: #333;
	color: #EEE;
	padding: 10px 0;
	text-align: center;
	font-size: 16px;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	text-decoration: none;
}

.btn2 a:active,
.btn2 a:hover{
	background: #000;
	color: #FFF;
}


/* Material */

#material label{
	font-weight: bold;
	font-size: 18px;
}
#material h3 {
	margin:30px 0 15px;
}

/* Size */

#size > dl{
	display: table;
	width: 100%;
	padding-bottom: 20px;
}

#size > dl > dt,
#size > dl > dd{
	display: table-cell;
	vetical-align: middle;
	font-size: 24px;
}

#size > dl > dt{ width: 10%; }
#size > dl > dd{ width: 40%; }

#size > dl > dd input,
#size > dl > dd select{
	width: 100px;
}
#size > dl > dd.alert input {
	background:#FDD;
}
#size > dl > dd .errMsg { display:none; font-size:12px; color:#F00; }
#size > dl > dd.alert .errMsg { display:block; }

#size > .note { border:0; display:table; width:100%; }
#size > .note p { display:table-cell; width:50%; }


#size > div{
	border: 2px solid #DDD;
	margin-bottom: 20px;
}

#size > div > h3{
	padding: 10px;
	background: #EEE;
	margin-bottom: 20px;
}

#size .colbox  div div img{
	width: 300px;
	display: block;
	margin: 0 auto 20px;
}


/* Option */

#option ul li{
	display: inline-block;
	width: 33%;
	vertical-align: middle;
	text-align: center;
}

#option ul li label{
	vertical-align: middle;
}

#option ul li label input{
	margin-right: 5px;
}

#option ul li img{
	width: 200px;
}


/* Volume */

#volume p{
	font-size: 24px;
	line-height: 2;
}

#volume p input{
	width: 80px;
}


/* Result */

#result{
	border-top: 1px solid #DDD;
	background: #F7F7F7;
}

#result h3{
	font-size: 16px;
	margin-bottom: 10px;
}

#result .colbox{
	max-width: 980px;
	margin: 0 auto;
}

#result .colbox h3{
	width: 95%;
	margin: 0 auto 10px;
}
#result .colbox p {
	width: 95%;
	margin: 0 auto 10px;
}

#result .colbox table{
	width: 95%;
	margin: 0 auto;
}

#result .colbox table td{
}

#result dl{
	text-align: right;
	border-bottom: 2px solid #DDD;
	width: 97.5%;
	margin: 20px auto 0;
	padding-bottom: 10px;
}

#result dt{
	font-weight: bold;
	margin-bottom: 10px;
	display: inline;
	padding-right: 10px;
	color: #666;
}

#result dd{
	display: inline;
}

#result dd strong{
	font-size: 24px;
}
#result dd strong .input_result {
	font-size:27px;
	background:none;
}

#result .caution{
	max-width: 960px;
	margin: 40px auto 0;
	background: #FEE;
}

#result .caution h3{
	padding: 20px 20px 10px;
	margin: 0;
	font-size: 14px;
}

#result .caution p{
	padding: 20px;
	font-size: 14px;
text-align:center;
}

.tbl02{
	border-top: 2px solid #DDD;
	border-left: 2px solid #DDD;
	margin-bottom: 20px;
}

#model .tbl02{ width: 100%; }

.tbl02 th,
.tbl02 td{
	padding: 10px;
	border-bottom: 2px solid #DDD;
	border-right: 2px solid #DDD;
	text-align: center;
	font-size: 16px;
	vertical-align: middle;
}

.tbl02 th{
	background: #EEE;
	vertical-align: middle;
	white-space:nowrap;
}

.tbl02 td{
	background: #FFF;
	vertical-align: middle;
	text-align:right;
}

.tbl02 td span{
}

.tbl02 label input{ margin-right: 10px; }

.tbl02 ul{
	list-style: square;
	padding-left: 25px;
}

.tbl02 ul li{
	list-style: square;
	text-align: left;
}
#result .colbox table td.calc { text-align:right; }
#result .colbox table td.calc sup { position:absolute; }

.input_result { border:0; text-align:right; padding:0 !important; font-size:100%; width:150px; }

/* Order */

#order p{
	text-align: center;
	font-size: 16px;
	line-height: 2;
	margin-bottom: 40px;
}

#order > dl{
	display: table;
	width: 100%;
	padding-bottom: 40px;
}

#order > dl > dt,
#order > dl > dd{
	display: table-cell;
	vetical-align: middle;
	font-size: 24px;
}

#order > dl > dt{ width: 20%; }
#order > dl > dd{ width: 30%; }

#order > dl > dt{ font-size: 18px; text-align: center; }
#order > dl > dd input{ width: 100%; }

#order dd p.error1,
#order dd p.error2 { display:none; color:#F30; text-align:left; }
#order dd.error1 p.error1,
#order dd.error2 p.error2 { display:block; }
#order dd.error1 p.error1 input[type="text"],
#order dd.error2 p.error2 input[type="text"] { background:#FCC; }

p.error3 { display:none; color:#F30; text-align:center; }
#order.error3 p.error3 { display:block; }

/* Footer */

#ft{
	background: #000;
	padding: 20px 10px;
	text-align: center;
}

#ft address{
	color: #FFF;
	font-style: normal;
	font-family: Arial;
	font-size: 14px;
}

/* Error , Finish */

.error,.finish{
	text-align: center;
	padding: 40px 0 60px;
}

.error .btn,
.finish .btn{
	margin-top: 40px;
}

@media screen and (min-width:641px) {

}

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

}