@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ お問い合わせ ◇◆◇
  
  
========================================================================================================================*/

@media print,screen and (min-width:641px) {
  #contact {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:80px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  #contact {
    padding:2.5rem 1.5rem 3rem 1.5rem;
  }
}


/*----------------------------------------------------------------------------------------------------

  フォーム
  
----------------------------------------------------------------------------------------------------*/

.fm-wrap {
  box-sizing:border-box;
  background-color:#fff;
}

.fmBtn-wrap { text-align:center; }

.fmBtn-wrap .back,
.fmBtn-wrap .submit {
  display:inline-block;
  box-sizing:border-box;
}

.fmBtn-wrap .back { padding-right:0.5rem; }
.fmBtn-wrap .submit { padding-left:0.5rem; }

@media print,screen and (min-width:641px) {
  .fm-wrap { padding:60px; }
  
  .fm-mess { padding-bottom:60px; }
  
  .fmBtn-wrap { padding-top:50px; }
  .fm-wrap .fmBtn-wrap { padding-bottom:20px; }
  .fmBtn-wrap .l-btn { font-size:112.5%; }
}

@media screen and (max-width:640px) {
  .fm-wrap { padding:2.5rem 1.75rem 2rem 1.75rem; }
  
  .fm-mess { padding-bottom:2.5rem; text-align:left; }

  .fmBtn-wrap { padding-top:2.5rem; padding-bottom:1rem; }
  .fm-wrap .fmBtn-wrap { padding-bottom:1.5rem; }
  
  .fmBtn-wrap .back,
  .fmBtn-wrap .submit {
    width:50%;
    float:left;
  }
  
  .fmBtn-wrap .back .l-btn,
  .fmBtn-wrap .submit .l-btn { width:100%; padding:0.75em; }
}


/*-----------------------------------------------------------------------------------
  フォーム部品
-----------------------------------------------------------------------------------*/

.fm textarea    { resize:vertical; height:300px; }
.fm textarea,
.fm .ip-l       { width:100%; }
.fm .ip-ss      { width:20%; }
.fm .ip-s       { width:40%; }
.fm .ip-m       { width:60%; }

@media print,screen and (min-width:641px) {
  .fm p.error {
    padding-top:0.25rem;
  }
}

@media screen and (max-width:640px) {
  .fm .ip-s,
  .fm .ip-m { width:100%; }
}

.fm input[type="text"],
.fm select,
.fm textarea {
  padding:0.3rem;
  border:none;
  box-sizing:border-box;
  border:1px solid #d0d8da;
  background-color:#fff;
  -webkit-transition:background-color ease-in-out  0.15s, border-color ease-in-out  0.15s;
  transition:background-color ease-in-out  0.15s, border-color ease-in-out  0.15s;
}

.fm input[type="text"]:focus,
.fm select:focus,
.fm textarea:focus {
  border-color:#738b91;
  background-color:#fff;
}

.fm .yno input.val_error,
.fm .km_error input[type=text], 
.fm .km_error textarea,
.fm .km_error select {
  border-color:#ed9a94;
  background-color:#feeff2;
}

.fm p.error {
  padding-bottom:0.5rem;
  color:#e1554b;
}

.radio-gp p.error,
.cbox-gp p.error { padding-top:0; }

.fm label { cursor:pointer; }
.fm label input { margin-right:0.5em; }
.fm label span {
  -webkit-transition:color ease 0.15s;
  transition:color ease 0.15s;
}
.ua-pc .fm label:hover span { color:#728a90; }

.fm .ic-required,
.fm .ic-optional {
  font-weight:300;
  font-size:75%;
  color:#fff;
  line-height:1.2;
  display:inline-block;
  padding:0.25em 0.5em 0.5em 0.5em;
  margin-left:1em;
  vertical-align:middle;
  border-radius:2px;
  
}

.fm .ic-required { background-color:#e1554b; }
.fm .ic-optional { background-color:#b8c4c7; }

.fm .cbox-gp,
.fm .radio-gp { padding-top:0.25rem; }

.fm .cbox-gp ul,
.fm .radio-gp ul {
  list-style:none;
}

.fm .cbox-gp li,
.fm .radio-gp li {
  display:inline-block;
}

.fm .cbox-gp li,
.fm .radio-gp li { margin-right:2em; }

/* 郵便番号・住所 */
.fm .yno .ad { margin-top:1rem; }
.fm .km_error .yno input:not(.val_error) {
  border:1px solid #d0d8da;
  background-color:#fff;
}


/*-----------------------------------------------------------------------------------
  入力画面
-----------------------------------------------------------------------------------*/

.fm-step1 dl,
.fm-step1 dd,
.fm-step1 dd {
  box-sizing:border-box;
}

.fm-step1 dl {
  width:100%;
}

.fm-step1 dt {
  width:25%;
  float:left;
  text-align:right;
  padding-top:0.2rem;
  font-weight:400;
}

.fm-step1 dd {
  margin-left:25%;
  padding-left:30px;
  text-align:left;
}

.fm-step1 dd:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.fm-step1 dd:last-child { padding-bottom:0; }

@media print,screen and (min-width:641px) {
  .fm-step1 dd {
    padding-bottom:2rem;
  }
}

@media screen and (max-width:640px) {
  .fm-step1 dt {
    width:100%;
    float:none;
    text-align:left;
    padding-top:0;
    padding-bottom:0.75rem;
   }
   
  .fm-step1 dd {
    margin-left:0;
    padding-left:0;
    padding-bottom:2rem;
  }
}


/*-----------------------------------------------------------------------------------
  確認画面
-----------------------------------------------------------------------------------*/

.fm-step2 dl {
  text-align:left;
  line-height:1.4;
}

.fm-step2 dl,
.fm-step2 dd,
.fm-step2 dd {
  box-sizing:border-box;
}

@media print,screen and (min-width:641px) {
  .fm-step2 dl {
    background-color:#ceece9;
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .fm-step2 dt {
    width:11em;
    padding:1.25em;
    border-top:1px solid #f0f8f8;
    float:left;
  }
  
  .fm-step2 dd {
    background-color:#fff;
    margin-left:13.5em;
    padding:1.25em;
    border-top:1px solid #d2eae8;
  }
  
  .fm-step2 dt:first-child,
  .fm-step2 dt:first-child+dd {
    border-top:0;
  }
}

@media screen and (max-width:640px) {
  .fm-step2 dt { padding:1rem 1.25rem; background-color:#ceece9; }
  .fm-step2 dd { padding:1.5rem 1.25rem; background-color:#fff; }
}


/*-----------------------------------------------------------------------------------
  送信完了
-----------------------------------------------------------------------------------*/

.fm-step3 .reMail {
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  background-color:#dcf0f2;
  box-sizing:border-box;
  padding:50px;
}

.fm-step3 .fm-mess span { display:inline-block; margin-bottom:0.5rem; }

@media print,screen and (min-width:641px) {
  .fm-step3 { padding-bottom:20px; }
}

@media screen and (max-width:640px) {
  .fm-step3 .fm-mess {
    text-align:center;
  }
  
  .fm-step3 .reMail {
    text-align:left;
    padding:1.5rem;
  }
}