@charset "utf-8";

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


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

.contact {
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}

@media print,screen and (min-width:641px) {
  .contact {
    padding-top:60px;
    padding-bottom:80px;
  }
}

@media screen and (max-width:640px) {
  .contact {
    padding-left:1rem;
    padding-right:1rem;
    padding-top:1.5rem;
    padding-bottom:2.5rem;
  }
}


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

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

.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-mess { padding-bottom:50px; }
  .fmBtn-wrap { padding-top:50px; }
  
  .fmBtn-wrap .l-btn { font-size:112.5%; }
}

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

  .fmBtn-wrap { padding-top:2rem; padding-bottom:0.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 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 #b9bdc5;
  background-color:#fff;
  border-radius:0.25rem;
  -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:#444e63;
  background-color:#fff;
}

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

.fm p.error {
  padding-top:0.3rem;
  padding-bottom:0.5rem;
  color:#ffaf1e;
}

.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:#28aaeb; }

.fm .ic-required,
.fm .ic-optional {
  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:0.15rem;
  
}

.fm .ic-required { background-color:#ffaf1e; }
.fm .ic-optional { background-color:#b9bdc5; }

.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 #b9bdc5;
  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-family:"NotoSans";
  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:1.5rem;
  }
}


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

.fm-step2 dl {
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

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

.fm-step2 dl {
  background-color:#f3f4f5;
  border:1px solid #d0d3d8;
  border-top:none;
  text-align:left;
}

.fm-step2 dt {
  width:13em;
  padding:1em 0 1em 1em;
  border-top:1px solid #d0d3d8;
  float:left;
}

.fm-step2 dd {
  background-color:#fff;
  margin-left:13em;
  padding:1em;
  border-top:1px solid #d0d3d8;
  border-left:1px solid #d0d3d8;
}

@media screen and (max-width:640px) {
  .fm-step2 dt { width:10rem; padding:0.75rem 0 0.75rem 0.75rem; }
  .fm-step2 dd { margin-left:10rem; padding:0.75rem; }
}


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

.fm-step3 .reMail {
  border:1px solid #76a5d4;
  box-sizing:border-box;
  padding:30px;
}

.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 .reMail {
    text-align:left;
    padding:1.5rem;
  }
}