*{box-sizing:border-box;margin:0;padding:0;}

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:none;
  border:none;
  outline: none;
}

li{list-style:none;margin:0 ;padding:0;}
body{
  background:#f8f8f8 ;
  position:relative;
  height:100%;
  width:100%;
  color:#555;
  font-size:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
header{
  background:#fff;
  border-bottom:4px solid #ff78a1;
  height:100px;
}
header .logo{
  height:100px;
  display:table-cell;
  vertical-align:middle;
}

header .logo img{
  height:28px;
}
h1{
  text-align:center;
  margin-bottom:20px;
}
.wrp{
  width:960px;
  margin:0 auto;
}
main{
  background:#f8f8f8;
}
.form{
  margin:50px auto 100px;
}
.formContent{
  background:#fff;
  border-radius:10px;
  padding:50px 30px;
  margin:0 auto;
  width:800px;
  box-shadow:0px 0px 8px 0px rgba(0,0,0,0.13);
  -moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.13);
  -webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.13);
  line-height:2;
}
.formContent dl{
  display:flex;
  flex-wrap:wrap;
}
.formContent dl dt{
  align-items:center;
  background:#f8f8f8;
  border-bottom:1px dotted #ccc;
  display:flex;
  padding:20px 8px;
  width:25%;
}
.formContent dt strong{
  align-items: self-end;
  display:flex;
  flex-wrap:wrap;
  line-height:1.4;
}
.formContent dt strong::before{
  background:#f08080;
  content:'必須';
  color:#fff;
  font-size:12px;
  margin-right:5px;
  padding:2px 3px;
  line-height:1.5
}
.formContent dt strong.optional::before{
  background:#fff;
  border:1px solid #ccc;
  content:'任意';
  color:#555
}
.formContent dl dt span{
  font-size:12px;
  font-weight:normal;
  display:block;
  width:100%;
  margin-top:5px;
}
.formContent dl dd{
  background:#fff;
  padding:20px 0 20px 10px;
  width:calc(100% - 25%);
  border-bottom:1px dotted #ccc;
  position:relative;
}
.flex{
  display:flex;
  align-items:center;
}
#zip2{
  background: #189edd;
  border-radius: 20px;
  color: #fff;
  padding: 2px 10px;
  text-align: center;
  font-size: 14px;
  margin-left:5px;
  display:inline-block;
  height:30px;
  cursor: pointer;
}
.acoArea{
  display:none;
  background:#eef7fc;
  margin-top:10px;
  padding:20px;
}
#addr1{
  width:180px;
  margin-right:20px;
}
#addr2{
  width:300px;
}
.licenseArea{
  display:flex;
}
.licenseArea li{
  align-items:center;
  display:flex;
  margin-right:20px;
}
input{
  display:none;
}
input:focus, select:focus, input[type="text"]:focus, input[type="tel"]:focus{
  outline:none;
  border:3px solid #189edd;
  box-shadow:0px 0px 8px 0px rgba(0,0,0,0.3);
  background:#fff;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

input[type=checkbox] + label{
  align-items:center;
  display:flex;
}
input[type=checkbox] + label::before{
  content:'';
  border:1px solid #189edd;
  border-radius:2px;
  display: inline-block;
  height:1rem;
  margin-top:-3px;
  margin-right:8px;
  width:1rem;
}
input[type=checkbox]:checked + label::before{
  border:1px solid #ccc;
  content: '\f00c';
  font-family: 'fontawesome';
  font-size: 1.6rem;
  line-height: 0.6rem;
  text-indent: -2px;
  color: #189edd;
}
select{
  background-image:linear-gradient(45deg, transparent 50%, #189edd 50%),linear-gradient(135deg, #189edd 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),100% 0;
  background-size:5px 5px,5px 5px,2.5em 2.5em;
  background-repeat: no-repeat;
  background-color:#fff;
  border:1px solid #189edd;
  border-radius:4px;
  display:inline-block;
  padding:8px;
  position:relative;
  font-size:16px;
  width:250px;
  height:50px;
}
input[type='text'],input[type='tel']{
  background:#fff;
  border-radius:4px;
  display:inline-block;
  border:1px solid #189edd;
  height:50px;
  width:300px;
  font-size:18px;
  padding:10px;
}
input[type='text']::placeholder,input[type='tel']::placeholder{
    font-size:18px;
    color:#ccc;
}
.bx-viewport {
  height: auto !important;
  padding-bottom: 0;
}
.bx-controls-direction {
  display: table;
  width: 96%;
  margin:auto;
}
.bx-nextArea{
  width:500px;
  margin:40px auto 0;
}
.btn_submit, .bx-next {
  position: relative;
  display: block;
  z-index: 1;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #eb8003;
  box-shadow:0 5px 5px -2px rgb(0 0 0 / 20%);
  background: #f0b706;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffaa06), color-stop(0.5, #ffaa06), color-stop(0.5, #f79e04), to(#f79e04));
  background: -moz-linear-gradient(to top, #f79e04 0%, #f79e04 50%, #ffaa06 50%, #ffaa06);
  background: linear-gradient(to top, #f79e04 0%, #f79e04 50%, #ffaa06 50%, #ffaa06);
  box-shadow: none;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0;
  z-index:9991;
}

.btn_submit::after, .bx-next::after {
  position: absolute;
  right: 4px;
  top: 50%;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url(../img/ico_arrow.gif) no-repeat left top;
  background-size: contain;
}
.btn_submit.off, .bx-next.off {
  opacity: 0.6;
}

.tel-count{
  background:#555;
  border-radius:20px;
  color:#fff;
  font-size:12px;
  padding:0px 10px;
  position:absolute;
  top:0px;
}
/*エラーメッセージ*/
.error_message {
  background: #ca1853;
  border-radius: 3px;
  color: #fff;
  display:none;
  font-size: 13px;
  position: relative;
  padding: 5px 6px;
  max-width:230px;
  line-height:1.4;
}
.error_message::before {
  content: "";
  position: absolute;
  top: 35%;
  left: -5px;
  margin-left: -10px;
  border: 5px solid transparent;
  border-right: 10px solid #ca1853
}
.formContent dl dd.err{
  background:#fdf0f5;
}
.error_message#license_errmsg{
  position: relative;
  left: 25%;
  top:-10px;
  max-width: 300px;
  margin-bottom: 10px;
}
#addr1or2_errmsg0.error_message,
#addr1or2_errmsg1.error_message{
  position:absolute;
  top:90px;
  right:20px;
}
.error_message#license_errmsg::before,
#addr1or2_errmsg0.error_message::before, 
#addr1or2_errmsg1.error_message::before{
  top: 28px;
  left: 50%;
  margin-left: -10px;
  border: 5px solid transparent;
  border-top: 10px solid #ca1853;
  position:absolute;
}

/* modal---------- */
.modal{display:none;text-align:left;}.modalBody{position: fixed; z-index: 999999; background: #fff; width:80%; height:80%;top:0;right:0;bottom: 0;left:0;margin: auto;}
.modalBK,.cover{position: fixed; top: 0;left: 0;z-index:999; height:100%; width:100%;background:#000; opacity: 0.5;filter: alpha(opacity=50);-moz-opacity:0.50;}
.modalBody{padding:13px;line-height:1.6;border-radius:4px;}.btns{cursor: pointer; text-decoration:underline;}
.window_close, .close{cursor: pointer; text-align:center; margin:10px 0;text-decoration:underline; color:#fff; background-color:#999;border-radius:4px;line-height:32px; font-size:1.2rem;}
.scroll_box{overflow-y: auto;height:90%; padding:2px;}.scroll_box::-webkit-scrollbar{width: 5px;background: #d7d7d7;}.scroll_box::-webkit-scrollbar-thumb{background: #bbb;border-radius: 2px;}

/* footer---------- */
footer{background:#1d1d1d;color:#fff;text-align:center;padding:20px;font-size:14px;}
footer small{margin:10px auto 0;display:block}
footer a{margin:0 20px;}
footer a, footer a:visited, footer a:active{color:#fff;text-decoration:underline;}
footer a:hover{opacity:.5;}

.modal.access, .modal.access a{
  color:#555
}