@charset "UTF-8";

.good{ background: #FEE !important; }
.bad{ background: #EEF !important; }

#material01,#material02,#material03,#material04,
#model01_01,#model01_02,#model01_03,#model01_04,#model01_05,#model01_06,#model01_07,#model01_08,#model01_09,
#model02_01,#model02_02,#model02_03,#model02_04,#model02_05,#model02_06,
#model03_01,#model03_02,
#model04_01{
	display: none;
}

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

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

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

/* Material */

#material ul{
flex-direction: row;
flex-wrap:wrap;
justify-content: flex-start;
}

#material ul li{
	width: 25%;
	text-align: center;
	margin-bottom: 20px;
}

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

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

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

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

/* Model */

#model label{
	font-weight: bold;
}

#model table th,
#model table td{
}

#model table td img{
	width: 100%;
}

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

/* Option */

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


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

#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 .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) {
	#use ul li:nth-child(odd) { padding-right:5px; }
	#use ul li:nth-child(even) { padding-left:5px; }
	#use ul li img { width:100%; }

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

	#material ul li { width:50%; }

}