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

body{ padding:0px; margin:0px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center;}
a{text-decoration: none;color:#333333;}
a:link{color:#333333;}
a:active{color:#333333;}
a:hover{color:#333333;}
a:visited{color:#333333;}
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;
  -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;
  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;}


#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;}
.send-button button {
  margin-top: 1em;
  text-transform: uppercase;
  outline: 0;
  background-color: #131313;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.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;background-color: #222222;}
.mailwrapper-footer a{text-decoration: none;}
.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;}

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

@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;}
 #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;}
.si-left img{width: 100%;height:auto;}
.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;}
.pt-map{width:100%;}

}