@charset "utf-8"; /* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */

form#mail_form {}
form#mail_form dl {
  display: flex;
  align-items: center;
  padding: 1.2em 0;
}

form#mail_form dl dt {
  width: 14em;
  text-align: left;
  font-weight: 600;
}

form#mail_form dl dd {
  width: calc(100% - 14em);
}

form#mail_form dl dd.flex,form#mail_form dl dd .flex {
  align-items: center;
}

form#mail_form dl dt span.required, form#mail_form dl dt span.optional {
  display: inline-block;
  font-size: 80%;
  color: #ffffff;
  font-weight: 600;
  padding: .2em 0.8em .3em;
  font-style: normal;
  margin-right: .5em;
  border-radius: 999px;
}

form#mail_form dl dt span.required {
  background: #1b57dc;
}

form#mail_form dl dt span.optional {
  background: #c2c2c2;
}

form#mail_form dd .flex select {
  margin-right: 1em;
}

/* -- error message -------------------------------------------------------------------------------- */
form#mail_form dl dd span.error_blank, form#mail_form dl dd span.error_format, form#mail_form dl dd span.error_match {
  display: block;
  color: #ff0000;
  margin-top: 5px;
}

/* -- loading -------------------------------------------------------------------------------- */
div.loading-layer {
  width: 100vw;
  height: 100vh;
  background: rgba( 0, 0, 0, 0.7 );
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10000;
}

span.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 5px solid rgba( 255, 255, 255, 0.2 );
  border-right: 5px solid rgba( 255, 255, 255, 0.2 );
  border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
  border-left: 5px solid #ffffff;
  -webkit-transform: translateZ( 0 );
  -ms-transform: translateZ( 0 );
  transform: translateZ( 0 );
  -webkit-animation: load-circle 1.0s linear infinite;
  animation: load-circle 1.0s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
}

@-webkit-keyframes load-circle {
  0% {
    -webkit-transform: rotate( 0deg );
    transform: rotate( 0deg );
  }

  100% {
    -webkit-transform: rotate( 360deg );
    transform: rotate( 360deg );
  }
}

@keyframes load-circle {
  0% {
    -webkit-transform: rotate( 0deg );
    transform: rotate( 0deg );
  }

  100% {
    -webkit-transform: rotate( 360deg );
    transform: rotate( 360deg );
  }
}

/* -- input, select, textarea -------------------------------------------------------------------------------- */
form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"], form#mail_form input[type="number"] {
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 2;
}

form#mail_form input[type="text"]:focus, form#mail_form input[type="email"]:focus, form#mail_form input[type="tel"]:focus, form#mail_form textarea:focus, form#mail_form input[type="number"]:focus {
  background: #ffffff;
}

form#mail_form select {
  font-family: inherit;
  line-height: normal;
  width: 8em;
  margin-left: 1em;
}

form#mail_form textarea {
  display: block;
  height: 25em;
  padding: 7px 2%;
  resize: vertical;
  border: 2px solid #f0f0f0;
  border-radius: .5em;
  background: #f7f8f9;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: normal;
}

form#mail_form textarea.c_history {
  height: 10em;
}

form#mail_form textarea.c_consultation {
  height: 12em;
}

form ol li input:checked+p:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

input, input[type="text"],input[type="number"],input[type="email"],input[type="tel"], input[type="button"] {
  -moz-appearance: none;
  appearance: none;
  border: none;
  -webkit-border-radius : 0;
  font-size: initial;
  -webkit-appearance : none;
  -webkit-tap-highlight-color : rgba(0,0,0,0);
}

input::placeholder {
  color: #cacaca;
}

input:-ms-input-placeholder {
  color: #cacaca;
}

input::-ms-input-placeholder {
  color: #cacaca;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 5em;
}

input[type=text],input[type=email],input[type=tel],form dl dd input[type="button"],input[type="number"], select, textarea {
  width: 100%;
  -webkit-appearance: none;
  margin: 0;
  padding: .5em 1em;
  border-radius: .2em;
  font-size: initial;
}

form#mail_form input[type="number"] {
  width: 6em;
  margin-right: 1em;
}

input[type="button"]:disabled {
  background: #cacaca;
  background: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2047.6%2036.8%22%20style%3D%22enable-background%3Anew%200%200%2047.6%2036.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A3%3B%7D%3C%2Fstyle%3E%3Cline%20class%3D%22st0%22%20x1%3D%2245.4%22%20y1%3D%2217.7%22%20x2%3D%220%22%20y2%3D%2217.7%22%2F%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%2228.2%2C35.7%2045.4%2C17.6%2028.2%2C1%20%22%2F%3E%3C%2Fsvg%3E) no-repeat right 1.5em center #cacaca;
  background: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2047.6%2036.8%22%20style%3D%22enable-background%3Anew%200%200%2047.6%2036.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A3%3B%7D%3C%2Fstyle%3E%3Cline%20class%3D%22st0%22%20x1%3D%2245.4%22%20y1%3D%2217.7%22%20x2%3D%220%22%20y2%3D%2217.7%22%2F%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%2228.2%2C35.7%2045.4%2C17.6%2028.2%2C1%20%22%2F%3E%3C%2Fsvg%3E) no-repeat right 1.5em center #cacaca;
  background: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2047.6%2036.8%22%20style%3D%22enable-background%3Anew%200%200%2047.6%2036.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A3%3B%7D%3C%2Fstyle%3E%3Cline%20class%3D%22st0%22%20x1%3D%2245.4%22%20y1%3D%2217.7%22%20x2%3D%220%22%20y2%3D%2217.7%22%2F%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%2228.2%2C35.7%2045.4%2C17.6%2028.2%2C1%20%22%2F%3E%3C%2Fsvg%3E) no-repeat right 1.5em center #cacaca;
  background-size: .8em;
  box-shadow: none;
}

textarea,select, input[type="text"],input[type="email"],input[type="tel"],input[type="number"] {
  border: 1px solid #f0f0f0;
  background: #f7f8f9;
}

textarea:focus,select:focus, input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus {
  box-shadow: 0 0 0 2px #1b57dc;
}

.slectb {
  position: relative;
  display: block;
  width: 21em;
}

.submitbox {
  margin: 3em 0 0;
  text-align: center;
  color: #646464;
}

.submitbox .flex {
  justify-content: center;
}

.pp_tbox {
  margin-right: 2em;
}

.pp_tbox a {
  color: #0096ff;
  text-decoration: underline;
}

.slectb:after {
  content: "";
  right: .8em;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  position: absolute;
  width: 1em;
  height: .5em;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22nexts2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22145.168px%22%20height%3D%2285.925px%22%20viewBox%3D%220%200%20145.168%2085.925%22%20enable-background%3D%22new%200%200%20145.168%2085.925%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%3Cpath%20fill%3D%22%231b57dc%22%20d%3D%22M71.743%2C85.925c-3.315%2C0-6.495-1.317-8.839-3.661L3.661%2C23.02c-4.882-4.882-4.882-12.796%2C0-17.678%20s12.796-4.88%2C17.678%2C0l50.404%2C50.405l52.086-52.086c4.881-4.882%2C12.797-4.882%2C17.678%2C0c4.882%2C4.881%2C4.882%2C12.796%2C0%2C17.678%20L80.582%2C82.264C78.238%2C84.608%2C75.059%2C85.925%2C71.743%2C85.925z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}

#form_submit {
  text-align: center;
  margin: 0;
  width: 100%;
  padding: 30px 0 0;
  position: relative;
  -webkit-transition: ease-in-out .3s;
  transition: ease-in-out .3s;
}

#form_submit input[type="button"] {
  position: relative;
  width: 100%;
  -webkit-transition: ease-in-out .3s;
  transition: ease-in-out .3s;
  background: #e60113;
  padding: 1.5em 4em;
  font-size: 130%;
  border-radius: .5em;
  color: #FFF;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}

#form_submit input[type="button"]:hover {
  box-shadow: none;
  transform: scale(0.98);
}

#form_submit input[type="button"]:disabled {
  background: #d6d9dc;
}

#form_submit input[type="button"]:hover:disabled {
  box-shadow: none;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  box-shadow: none;
}

.checkboxs label {
  cursor: pointer;
}

input[type="checkbox"] {
  vertical-align: middle;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
}

.checkboxs input[type="checkbox"] + span {
  position: relative;
  padding-left: 1.8em;
}

.checkboxs input[type="checkbox"] + span::before {
  display: inline-block;
  content: '';
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #bbbfc5;
  vertical-align: middle;
  background: #FFF;
  position: absolute;
  left: 0;
  top: .1em; border-radius:.2em;
}

.checkboxs input[type="checkbox"]:checked + span::before {
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22arcs%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') no-repeat center #1b57dc;
  background-size: 85%;
  border-color: #1b57dc;
}

.checkboxs {
  font-size: 90%;
  text-align: center;
  margin-top: 1em;
}

.checkboxs label {
  cursor: pointer;
}

input[type="checkbox"] {
  vertical-align: middle;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
}

input[type="checkbox"] + span::before {
  display: inline-block;
  content: '';
  width: 1.2em;
  height: 1.2em;
  margin-right: .4em;
  border: 2px solid #bbbfc5;
  vertical-align: middle;
}

input[type="checkbox"]:checked + span::before {
  background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22arcs%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E) no-repeat center #c1262d;
  background-size: 85%;
  border-color: #1b57dc;
}

.radiobox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 0.5em;
}

.radiobox > * {
  width: 32%;
  padding-top: .5em;
  margin-right: 2%;
}

.radiobox > *:nth-child(3n),.radiobox.li2 > *:nth-child(2n) {
  margin-right: 0;
}

.radio label {
  cursor: pointer;
  padding: .2em;
  display: block;
}

.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}

.formbox [type=radio]:checked + label, .formbox [type=radio]:not(:checked) + label {
  padding-left: 0;
}

.formbox [type=radio]:checked + label:after {
  content: none;
}

.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #fff;
  border-radius: 100%;
  border: 1px solid #bfc3c4;
  display: inline-block;
  width: 1.4em;
  height: 1.35em;
  position: relative;
  top: .2em;
  margin-right: .5em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type=radio]:checked + .radio-label:before {
  background-color: #1b57dc;
  box-shadow: inset 0 0 0 2px #fff;
  border-color: #1b57dc;
}

.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #1b57dc;
}

.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

.contacts .formbox dl {
  padding: 0;
  border-bottom: 1px dashed #dfdfdf;
  margin-bottom: 1.5em;
}

.contacts .formbox dl dt {
  padding: 1.2em 1.5em 1em 1.5em;
  font-weight: 300;
  background: #efefef;
}

.contacts .formbox dl dd {
  width: calc(100% - 19.5em);
  padding-bottom: 1em;
}

.contacts .formbox .pp_tbox {
  padding: 1em 0 1.5em;
}

.contacts .formbox input[type=text],.contacts .formbox input[type=email], .contacts .formbox input[type=tel] {
  width: 100%;
}

.contacts .formbox dl dd textarea, .contacts .formbox dl dd select, .contacts .formbox dl dd input[type=text], .contacts .formbox dl dd input[type=email], .contacts .formbox dl dd input[type=tel] {
  border: 1px solid #cccccc;
  background: #fff;
}

.contacts #form_submit {
  width: 20em;
}

.contacts #form_submit input[type="button"] {
  font-size: 120%;
  font-weight: 100;
  padding: 1em 2em .8em;
  background: #000;
}

.contacts #form_submit input[type="button"]:disabled {
  background: #cacaca;
}

@media only screen and (max-width: 1200px) {
form#mail_form dl { display:block;}
form#mail_form dl dt { width:100%;}
form#mail_form dl dd { width:100%;}
}
  
@media only screen and (max-width: 1000px) {
  .submitbox .flex {
    display:block;
  }

  .pp_tbox {
    margin-right: 0;
    margin-bottom: .5em;
  }
}

@media only screen and (max-width: 850px) {
form#mail_form { margin-top:2em;} 
  form#mail_form dl {
    display: block;
    padding: .6em 0 1em ;
    border-top: 1px solid #e8efff;
  }

  form#mail_form dl dt {
    width: 100%;
    margin-bottom: .5em;
    font-size: 120%;
  }

  form#mail_form dl dd {
    width: 100%;
  }
}

@media only screen and (max-width: 550px) {
  .submitbox {
    margin: 2em 0 0em;
    padding-top: 2em;
  }
}