@charset "utf-8";
html,body,h1,h2,dl,dt,dd,ul,li,p{ margin: 0; padding: 0; list-style-type: none;}
html,body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
img{ border: 0; display: block; outline: 0;}
.position-relative{ position: relative;}
.hr-01{ border-top: 2px solid #023885; margin: 40px 0 10px;}
.width-980{ margin: 0 auto; width: 980px;}

header{ border-bottom: 2px solid #023885; background: -moz-linear-gradient(top,#fff,#fff 71%,#b8c8dd 100%); background: -ms-linear-gradient(top,#fff,#fff 71%,#b8c8dd 100%); background: -o-linear-gradient(top,#fff,#fff 71%,#b8c8dd 100%); background: -webkit-linear-gradient(top,#fff,#fff 71%,#b8c8dd 100%); background: linear-gradient(top,#fff,#fff 71%,#b8c8dd 100%); margin-bottom: 40px; padding-bottom: 10px;}
.h1{ background-color: #023885; border-top: 3px solid #67552c; padding: 4px 0; width: 100%;}
.h1 h1{ color: #ffffff; font-size: 14px; margin: 0 auto; width: 980px;}
h2.title-line-01{ background-color: #000000; margin: 0 auto 4px; padding: 4px 6px;}
h2.title-line-01 span{ border-left: 7px solid #ffff00; color: #ffffff; padding-left: 10px;}
.header-usp-01:after,.header-bt-01:after{ clear: both; content: ""; display: block;}
.header-usp-01{ margin-top: 8px;}
.header-usp-01 li{ float: left; text-indent: -9999px;}
.header-usp-01 li:first-child{ height: 48px; text-indent: 0; width: 212px;}
.header-usp-01 li:last-child{ float: right; margin-top: 8px;}
.header-usp-01 li:last-child a.tel{ background-image: url("../images/estimate/contact-us-tel-01.png"); display: block; height: 35px; pointer-events: none; width: 466px;}
	
.blue-band-01{ background-color: #004da0; color: #ffffff; font-size: 16px; font-weight: bold; margin-bottom: 10px; padding: 6px 10px;}
.blue-band-01 img{ display: inline; margin-right: 4px; vertical-align: text-top;}
.blue-band-02{ background-color: #004da0; border-radius: 6px 6px 0 0; color: #ffffff; font-size: 16px; font-weight: bold; padding: 6px 10px;}
.blue-band-03{ background-color: #004da0; border-radius: 0 0 6px 6px; height: 8px; margin-bottom: 30px;}

.estimates-text-01{ font-size: 16px; line-height: 24px;}
.estimates-text-01 span{ color: #ff0000; display: block; font-weight: bold; margin-bottom: 30px;}
.estimates-text-02 img{ display: inline; margin: 0 2px; vertical-align: text-top;}
.estimates-text-03{ color: #ff0000; line-height: 20px; margin: 4px auto; text-align: center;}
.estimates-btn-01{ border-bottom: 7px solid #004000; margin: 20px 0 10px; width: 100%;}
.estimates-btn-01:after{ clear: both; content: ""; display: block;}
.estimates-btn-01 li{ border: 3px solid #004000; border-bottom: none; border-radius: 10px 10px 0 0; box-sizing: border-box; color: #004000; cursor: pointer; float: left; font-size: 26px; font-weight: bold; margin: 0 1% 0 2%; padding: 4px 0; text-align: center; width: 47%;}
.estimates-btn-01 li:hover{ background-color: #fffbbb;}
.estimates-btn-01 li:last-child{ margin: 0 2% 0 1%;}
.estimates-btn-01 li.selected{ background-color: #004000; color: #ffffff; cursor: default; pointer-events: none;}
.estimates-area-01:after{ clear: both; content: ""; display: block;}
.estimates-area-01{ margin-bottom: 20px;}
.estimates-area-01 dl{ float: left; margin-bottom: 10px; width: 50%;}
.estimates-area-01 dl dt{ color: #004da0; float: left; font-size: 18px; font-weight: bold; height: 30px; line-height: 30px; vertical-align: middle; width: 50%;}
.estimates-area-01 dl dd{ float: left; font-size: 16px; height: 30px; line-height: 30px; width: 50%;}
.estimates-area-01 dl dd input{ border: 2px solid #004da0; box-sizing: border-box; font-size: 18px; margin-right: 4px; padding: 2px 4px; text-align: center; width: 70%;}
.estimates-area-01 p.error{ color: #ff0000; font-size: 14px; font-weight: bold; text-align: center;}
.estimates-table-01{ border-collapse: collapse; width: 100%;}
.estimates-table-01 thead tr th{ font-size: 14px; font-weight: normal; padding: 6px 10px; text-align: left;}
.estimates-table-01 thead tr th:nth-child(2){ border-left: 1px solid #004da0; border-right: 1px solid #004da0;}
.estimates-table-01 tbody tr:nth-child(odd),.estimates-table-01 tbody tr:nth-child(8),.estimates-table-01 tbody tr:nth-child(10){ background-color: #fff4d4;}
.estimates-table-01 tbody tr:last-child{ background-color: #ffffff;}
.estimates-table-01 tbody tr td{ font-size: 16px; padding: 8px 10px;}
.estimates-table-01 tbody tr td input{ box-sizing: border-box; border: 2px solid #004da0; padding: 6px 8px; width: 100%;}
.estimates-table-01 tbody tr td input.ng{ background-color: #ffff99 !important; border: 2px solid #d20000 !important;}
.estimates-table-01 tbody tr td input.arbitrarily{ border: 1px solid #444444;}
.estimates-table-01 tbody tr td input.number{ padding-left: 28px; width: 220px;}
.estimates-table-01 tbody tr td div.error{ color: #ff0000; font-size: 14px; font-weight: bold; margin-top: 4px;}
.estimates-table-01 tbody tr td a.address_bt{ cursor: pointer; display: block; height: 66px; position: absolute; right: 6px; top: 2px; width: 200px; z-index: 10;}
.estimates-table-01 tbody tr td img.yubin-mark{ left: 8px; position: absolute; top: 7px;}
.estimates-table-01 tbody tr td select{ border: 2px solid #004da0; font-size: 16px; padding: 6px 8px; width: 220px;}
.estimates-table-01 tbody tr td textarea{ box-sizing: border-box; border: 1px solid #444444; padding: 6px 8px; width: 100%;}
.estimates-table-01 tbody tr td:nth-child(1){ color: #004da0; font-size: 14px; font-weight: bold; width: 180px;}
.estimates-table-01 tbody tr td:nth-child(1) img{ float: right; margin-top: 4px;}
.estimates-table-01 tbody tr td:nth-child(2){ border-left: 1px solid #004da0; border-right: 1px solid #004da0; position: relative; width: 468px;}
.estimates-table-01 tbody tr td:nth-child(2) p{ color: #004da0; font-size: 14px; font-weight: bold;}
.estimates-table-01 tbody tr td:nth-child(3){ font-size: 12px; line-height: 16px; pointer-events: none; width: 210px;}
.error:before{ content: url(../images/estimate/arrow_error_01.png); margin-right: 4px;}

.fukidashi_01{ left: 10px; position:absolute; top:-24px;}
.fukidashi_01.yubin-number{ left: 0; top:-34px;}
.fukidashi_01 span{ background-color: #172685; color: #ffffff; font-size:14px; font-weight:bold; padding: 6px 10px; position: relative;}
.fukidashi_01 span:after{ content: url(../images/estimate/trigone_01.png); display: block; height: 15px; left: 10px; position: absolute; top: 26px; width: 15px;}
.fukidashi_01 img{ left:10px; position:absolute; top: 26px;}
.inquiry-bt01{ background-image:url(../images/estimate/inquiry_bt01_on.png); height:70px; margin:0 auto; width:310px;}
.inquiry-bt02{ background-image:url(../images/estimate/inquiry_bt02_on.png); height:70px; margin:0 auto 20px; width:310px;}
.inquiry-bt01 input:hover,.inquiry-bt02 input:hover{ opacity: 0.0;/* IE */filter: alpha(opacity=0);}
.red-line-frame-01{ background-color: #fff4d4; border: 2px solid #ff4000; border-radius: 6px; box-sizing: border-box; margin: 0px auto; padding: 10px; text-align: center; width: 400px;}
.red-line-frame-01 p{ font-size: 12px; line-height: 14px;}
.red-line-frame-01 a img{ display: block; margin: 0 auto;}

.confirm-table-01{ border-collapse: collapse; width: 100%;}
.confirm-table-01 tbody tr:nth-child(odd){ background-color: #fff4d4;}
.confirm-table-01 tbody tr th{ color: #004da0; font-size: 14px; padding: 8px 10px; text-align: left; width: 130px;}
.confirm-table-01 tbody tr td{ padding: 8px 10px;}
.page-back-01{ bottom: 0; display: block; height: 56px; left: 0; position: absolute; width: 116px;}
.finish-area-01{ border-radius: 12px; border: 3px solid #004da0; color: #004da0; margin: 30px 100px; padding: 10px 20px; text-align: center;}
.finish-area-01 p{ color: #000000; text-align: left;}
.finish-area-01 p span{ color: #ff0000;}

.footer-logo-01{ margin: 0 auto 10px; width: 330px;}
.footer-logo-01 a img,.footer-logo-01 img{ display: inline; vertical-align: bottom;}
.footer-logo-01 p{ display: inline-block; font-size: 12px; line-height: 14px; margin-left: 6px;}

@media screen and (max-width: 899px){
.d-b-f-01{ display: none;}
.width-980{ width: 98%;}
.h1 h1{ font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 98%;}
}
@media screen and (max-width: 849px){
.estimates-area-01 dl{ float: none; margin: 0 2% 10px; width: 96%;}
.estimates-area-01 dl:after{ clear: both; content: ""; display: block;}
.estimates-area-01 dl dt{ width: 70%;}
.estimates-area-01 dl dd{ width: 30%;}
.estimates-area-01 dl dd input{ width: 70%;}
.estimates-table-01 thead{ display: none;}
.estimates-table-01 tbody tr td{ border: none !important; display: block;}
.estimates-table-01 tbody tr td a.address_bt{ margin: 4px auto 6px; position: inherit;}
.estimates-table-01 tbody tr td input.number{ width: 100%;}
.estimates-table-01 tbody tr td select{ box-sizing: border-box; width: 100%;}
.estimates-table-01 tbody tr td:nth-child(1),.estimates-table-01 tbody tr td:nth-child(2),.estimates-table-01 tbody tr td:nth-child(3){ padding: 8px 2%; width: 96% !important;}
.estimates-table-01 tbody tr td:nth-child(1) img{ display: inline; float: none; margin: 0 0 0 4px; vertical-align: sub;}
.estimates-table-01 tbody tr td:nth-child(2){ padding: 0 2%;}
.fukidashi_01{ top: -30px;}
}
@media screen and (max-width: 709px){
header{ padding-bottom: 0;}
.header-usp-01 li:last-child{ margin-top: -2px;}
.header-usp-01 li:last-child a.tel{ background-image: url("../images/header-usp-logo-01.png"); background-position: center -210px; height: 60px;width: 110px;}
}
@media screen and (max-width: 699px){
.finish-area-01{ margin: 30px 4%; padding: 10px; text-align: center;}
}
@media screen and (max-width: 619px){
.header-usp-01 li:last-child a.tel{ pointer-events: auto;}
}
@media screen and (max-width: 609px){
.page-back-01{ margin: 0 auto 20px; position: inherit;}
}
@media screen and (max-width: 459px){
.red-line-frame-01{ padding: 10px 2%; width: 96%;}
}
@media screen and (max-width: 356px){
.red-line-frame-01 img{ height: auto; width: 100%;}
}
@media screen and (max-width: 346px){
.header-usp-01 li:first-child{ margin-top: 4px;}
.header-usp-01 li:first-child,.header-usp-01 li:first-child img{ height: 40px; width: 177px;}
.footer-logo-01{ width: 300px;}
.footer-logo-01 a img,.footer-logo-01 img{ height: 32px; width: 144px;}
}