@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; }

#model01,#model02{
	display: none;
}

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; }

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;
	text-align:center;
}


/* 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;
	margin-bottom: 15px;
}

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


/* Table */

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

#model .tbl01{ width: 100%; }

.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;
}



.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; }

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

#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;
}

.input_result { border:0; text-align:right; padding:0; font-size:100%; }

/* 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;
}


/* Use */

#use ul li{
	display: inline-block;
	width: 50%;
	vertical-align: top;
	text-align: center;
	margin-bottom: 20px;
}

#use ul li label{
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

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

#use ul li img{
	width: 90%;
	margin-bottom: 10px;
}

#use ul li p{
	margin: 0 10px;
	font-size: 14px;
	color: #666;
}

/* Model */

#model ul li{
	display: inline-block;
	width: 25%;
	vertical-align: top;
	text-align: center;
	margin-bottom: 20px;
}

#model ul li label{
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
}

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

#model ul li img{
	width: 90%;
	margin-bottom: 10px;
}

#model ul li p{
	margin: 0 10px;
	font-size: 14px;
	color: #666;
}

/* 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{
	width: 100px;
}
#size > dl > dd select {
	width:100px;
}
.hide { display:none; }

#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;
}

#size ul li{
	text-indent:-1em;
	padding-left:1em;
	margin: 0 0 5px;
}

#size ul li img{
	display:block;
	width:120px;
	margin: 10px 0 0;
}



/* Option */

#option { position:relative; }
#option > div{
	margin-bottom: 40px;
	text-align: center;
}

#option > div > img{
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}

#option p{
	font-size: 16px;
	line-height: 2;
	margin-bottom: 40px;
}

#option ul{

}

#option ul li{
	display: inline-block;
	width: 14.2%;
	vertical-align: top;
	text-align: center;
	font-size: 12px;
	padding-bottom: 20px;
}

#option ul li span{ color: #900; }

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

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

#option ul li img{
	width: 90%;
	margin-bottom: 10px;
}
#option .type2 ul li{
	width:45%;
}
#option .type1,
#option .type2 { display:none; }

#option.mode1 .type1,
#option.mode2 .type2 { display:block; }

#option.mode1 .type0,
#option.mode2 .type0 { display:none; }

#option > dl {
	display:table;
	margin-left:auto;
	margin-right:auto;
}
#option > dl > dt,
#option > dl > dd{
	display: table-cell;
	vetical-align: middle;
	font-size: 24px;
	padding-bottom: 10px;
}

#option > dl > dt{ width: 14%; text-align: center; }
#option > dl > dd{ width: 36%; }

#option > dl > dd select{
	width: 100%;
	font-size:87.5%;
}

#option .selectlist { display:block; position:absolute; left:0; top:0; opacity:0; width:0; height:0; overflow:hidden; }


/* Volume */

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

#volume p input{
	width: 80px;
}
#volume p small{
	font-size:16px;
}


/* Result */

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

#result .colbox table.tbl02.fst{
	width:97.5%;
}

#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 table{
	width: 95%;
	margin: 0 auto;
}

#result .colbox table td{
}
#result .colbox table td input[type="text"] { padding:0; }

#result dl{
	text-align: right;
	border-bottom: 2px solid #DDD;
	width: 97.5%;
	margin: 0 auto;
	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;
}


/* 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 (max-width:768px) {
	.colbox > div { display:block; width:auto; }
	#result .colbox table { width:100%; }
	#result .colbox table td { text-align:left; }
	#result .colbox table td input[type="text"] { width:80%; }
	#option ul { display:-webkit-flex; display:flex; flex-wrap:wrap; justify-content:space-between; }
	#option ul li { width:33%; }
	#option > dl > dt { display:block; width:100%; text-align:left; }
	#option > dl > dd { display:block; width:100%; text-align:left; }
	#order > dl { }
	#order > dl dt { display:block; width:100%; text-align:left; }
	#order > dl dd { display:block; width:100%; text-align:left; padding:0 0 10px; }


}

@media screen and (min-width:641px) and (max-width:768px) {
	#order > dl { }
	#order > dl dt { display:inline-block; width:30%; }
	#order > dl dd { display:inline-block; width:70%; }

}

@media screen and (max-width:640px) {
	#hd p{ text-align:center; }
	#mainvisual{ display:block;margin:0;min-width:auto; height:auto; }
	#mainvisual h1,#mainvisual div{ display:block; width:auto; height:auto; text-align:center; }
	#mainvisual h1 span{ margin:0;padding:15px 10px;font-size:18px; }
	#mainvisual div img{ display:block; width:100%; }
	#use ul li{ width:100%;}
	#use ul li img { width:100%; }
	#model ul li{ width:50%; }
	#model ul li label{ font-size:12px; font-weight:normal; }
	#result .colbox table.tbl02.fst{ width:100%; }
	#result dl dt{ font-size:14px; }
	#result dl strong{ font-size:14px; }
	#result_Sum.input_result{ width:50%; }

	#size > dl > dt { display:block; width:100%; }
	#size > dl > dd { display:block; width:100%; }

	.btn { width:100%; }

	#material ul li { display:table; width:100%; }
	#material ul li > label { display:table-cell; text-align:left; vertical-align:middle; }
	#material ul li > label img { width:25px; }
	#material ul li > label br { display:none; }
	#material ul li > p { display:table-cell; }

}