@charset "utf-8";
/* CSS Document */

body{ padding:0px; margin:0px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
h2{ background-color: #EFEFEF; padding: 1%; font-size: small; font-weight: bold; margin-top: 1%; margin-bottom: 1%; }
table.formTable{ width:100%; margin:0 auto; border-collapse:collapse; text-align:left; }
table.formTable td,table.formTable th{ border:1px solid #ccc; background-color: #F0F0F0; line-height: 100%;padding:2%;}
table.formTable th{ width:30%; font-weight:normal; text-align:left; color: #FFF; background-color: #121212; }

  table.formTable input[type="text"],
  table.formTable input[type="email"],
  table.formTable input[type="tel"],
  table.formTable input[type="number"],
  table.formTable input[type="password"],
  table.formTable select,
  table.formTable textarea {
    width: 100%;
    box-sizing: border-box;
    padding:13px;
  }

table.formTable select {
  width: 100%;
  max-width: 100%;
  padding: 0.6em 1em;
  font-size: 1em;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
    color: #333;
  appearance: none;       /* 標準の矢印非表示 */
  -webkit-appearance: none; /* iOS Safari */
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%220%200%2010%205%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%205%205-5z%22%20fill%3D%22%23333%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.65em auto;

  /* Safari対策としてタップ範囲を広げる */
  min-height: 44px;
  box-sizing: border-box;
}





  table.formTable input[type="radio"],
  table.formTable input[type="checkbox"] {
    width: auto;
    margin-right: 0.5em;
    vertical-align: middle;
  }

  table.formTable textarea {
    min-height: 100px;
    resize: vertical;
  }
  .validation-msg {color:#333333;    font-size: 0.9em; }
  .validation-msg.ok {    color: #4caf50;  }
  .validation-msg.ng {    color: #f44336;  }


.temp{font-size:12px;text-align: left;}
.hissu{ font-size: 10px; color: #C00; }
.etc{ font-size: 10px; color: #C00; }

#formWrap{width:740px;margin-left:auto;margin-right:auto;text-align: center;}
.pt-map{ width:220px; float: right; }

.banner-area img{width:100%;height:auto;}
.contact-footer-area{padding-top:1em;padding-bottom:1em;}
.contact-footer-area img{width:100%;height:auto;}
.mailwrapper a:link{color:#000000;text-decoration: none;}
.mailwrapper a:hover{color:#2D2D2D;}
.mailwrapper a:active{color:#000000;}
.mailwrapper a:visited{color:#000000;}


.send-button{padding-top:2em;padding-bottom:0em;text-align: center;}

.mailwrapper input[type="file"] {
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: #333;
}

.mailwrapper-footer{text-align: center;}
.mailwrapper-footer a:link{color:#FFFFFF;}
.mailwrapper-footer a:hover{color:#FFFFFF;}
.mailwrapper-footer a:active{color:#FFFFFF;}
.mailwrapper-footer a:visited{color:#FFFFFF;}

.mailwrapper-footer ul{margin:0;padding-top:1em;padding-bottom:1em;}
.mailwrapper-footer li{list-style: none;padding:0;margin:0;display: inline-block;margin-right:1em;font-size:90%;}
.mailwrapper-footer{background-color: #222222;}
.mailwrapper-copyright{font-size:11px;color:#CCCCCC;}


.form-spec-area { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-start; }
.form-spec-area p { flex: 0 0 calc(20% - 2px); box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; background: #eee; font-size: 11px; padding: 6px 4px; margin: 0; height: 40px;}

.form-spec{ float: right; width: 42%; }
.form-spec-table{ font-size: 11px; }
.form-spec-table th{ background-color: #ececec; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFF; padding-top: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 2px; text-align: left; }
.form-spec-table td{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFF; padding-left: 10px; background-color: #FCFCFC; text-align: left; }
.print-area{ text-align: right; width: 100%; }
.form-photo-res{ width: 55%; float: left; }

.clear { clear: both; float: none; }
.shop-info-area{ width:100%; padding-top:2em;}
.shop-infolayout{}
.si-left{ width: 220px; float: left; }
.si-left img{}
.si-right{ float: right; width: 470px; }
.si-right ul{ margin: 0px; padding: 0px; }
.si-right li{ width: 145px; float: right; display: inline; padding-left: 5px; }
.si-right img{}
.si-right ul li:last-child { }
.photo-area img{ width: 100%; height: 375px; -ms-interpolation-mode: bicubic; }

.si-text{ font-size: 11px; padding-top: 1%; padding-bottom: 1%; text-align:left; width:450px; float:right; }
.si-main{ float: left; width: 50%; }
.si-map{ width: 50%; float: right; }
.si-main table{ font-size: 11px; }
.si-main th{ padding: 5px; background-color: #ECECEC; }
.si-main td{ padding: 5px; background-color: #FCFCFC; }
.icon img{ float: left; height: 35px; width: 35px; margin-right: 5%; }
.price{ font-size: 34px; width: 70px; font-weight: bold; color: #C30; }
.total-price{ font-weight: bold; margin-top: 2%; margin-bottom: 2%; font-size: 90%; }
.price-area-table{ margin-top: 1%; margin-bottom: 2%; vertical-align: middle; float: left; width: 100%; }
.price-area-table img{width:100%;}
.f-price-area{ vertical-align: middle;text-align: left; padding-top: 2%; }
.f-price-area img{width:75px;}
.form-photo-res img{ width: 100%; }
.yen{ float: right; font-size: 11px; line-height: 140%; vertical-align: 150%; padding-bottom: 10px; width: 50px; text-align: center; padding-top: 5px; }
span.msg{color:#8b0d11;}
.formbutton{ border: 0px; text-align:center; width: auto;padding-left:1em;padding-right:1em; height: 40px; font-size:100%; text-shadow:-1px -1px 0px rgba(0,0,0,0.8); color:#FFF; background-color:#db0500; background: -webkit-gradient(linear,left top,left bottom,from(#db0500),to(#4a0000)); background: -moz-linear-gradient(top, #db0500, #4a0000); border-radius: 8px; }
.copyright{ color: #FFF; background-color: #0D0D0D; padding-top: 3px; padding-bottom: 3px; width: 100%; text-align: center; margin-top:2%; }
p.error_messe{ margin:5px 0; color:red; }

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


table.formTable, table.formTable tbody, table.formTable tr, table.formTable th, table.formTable td { display: block; width: 98%; }
table.formTable th { background-color: #121212; color: #FFF; font-weight: bold; border: none; }
table.formTable td { background-color: #F0F0F0; border: none; padding-top:0.5em;padding-bottom:0.5em;}
table.formTable tr { margin-bottom: 0px; border: none; }
table.formTable input { width: 100%; box-sizing: border-box; font-size: 1em; margin-top: 5px; margin-bottom: 10px; padding: 10px; }
    .mailwrapper input[type="file"]{max-width:200px;}

.print-area{display:none;}
 #formWrap{width:98%;margin-left:auto;margin-right:auto;}
 .contact-footer-area{width:98%;}
 
 .form-photo-res{ width: 100%; float: none; }
 .form-spec{ float: none; width: 100%; }
  .form-spec table{width:100%;}
.form-spec-area p {    flex: 0 0 calc(25% - 2px); font-size:10px; }
.form-photo-res{display:block;}
.form-photo-res img{width:100%;height:auto;}
.content{width:100%;border:0;}
 .st-photo-layout{float:none;width:100%;}
 .st-spec-layout{float:none;width:100%;}
 .photo-area img{	width: 100%;	height:auto;	-ms-interpolation-mode: bicubic;text-align:center;}
.total-price{width:100%;
text-align:center;}
.formbutton{width:100%;text-align:center;}
.print{display:none;}
.car-spec-list p{
	font-size:30%;
	width: 31%;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top:2em;
	padding-bottom:2em;
	line-height:200%;
	vertical-align:middle;

}

.si-left img{width: 100%;height:auto;}
.top-price{ font-size:50px; float:left; margin-top:15px; margin-left:10px;}
.top-yen{ float:right; margin-top:15px;}
.icon img{ float: left; height: 61px; width: 70px; margin-right: 5%; margin-top: 5px; }
.spec-table{padding-top:2%; }
.spec-table td{ font-size:18px;}
.photo-all{ float: none; width: 100%; margin-top: 2%; margin-bottom: 2%; }
.si-main{ width: 100%; float: none; clear:both; }
.si-map{ width: 100%; float: none; }
.si-right{ width: 100%; float: none; display:none; }
.si-right li{float:left; display: inline; }
.si-left{ width: 100%; float: none; }
.si-left li{display:none;}
.si-right img{}
.si-right ul li:last-child { }
.pt-map{width:100%;}

}