@charset "utf-8";

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


  ◇◆◇ フォーム ◇◆◇
  
  
========================================================================================================================*/

.fmBtn-warp,
.fm-mess { text-align:center; }

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

.fmBtn-warp .back { padding-right:0.25rem; }
.fmBtn-warp .submit { padding-left:0.25rem; }

@media print,screen and (min-width:641px) {
  .fm { padding-top:60px; padding-bottom:60px; }
  .fmBtn-warp { padding-top:40px; }
  .fm-mess { padding-bottom:40px; }
  .fm-step1 .fmBtn-warp { padding-top:1.5rem; }
}

@media screen and (max-width:640px) {
  .fm { padding-top:2rem; padding-bottom:2rem; }
  .fmBtn-warp { padding-top:1.75rem; }
  .fm-mess { padding-bottom:1.5rem; }
  .fm-step1 .fmBtn-warp { padding-top:1rem; }
  
  .fmBtn-warp .back,
  .fmBtn-warp .submit {
    width:50%;
    float:left;
  }
  
  .fmBtn-warp .back .l-btn,
  .fmBtn-warp .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-ss,
  .fm .ip-s,
  .fm .ip-m { width:100%; }
}

.fm .orText input[type="text"] {
  width:5rem;
  margin-left:0.5rem;
  margin-right:0.25rem;
}

.fm input[type="text"],
.fm select,
.fm textarea {
  padding:0.3rem;
  border:none;
  box-sizing:border-box;
  border:1px solid #bbc1c5;
  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:#587080;
}

.fm .km_error input[type=text], 
.fm .km_error textarea,
.fm .km_error select {
  border-color:#f94b4f;
  background-color:#fff0f0;
}

/* ラジオボタン+テキストボックス */
.fm .km_error .orText input[type=text] {
  border-color:#bbc1c5;
  background-color:#fff;
}
.fm .orText input[type=text].error,
.fm .txtsetRequired input[type=text].error {
  border-color:#f94b4f;
  background-color:#fff0f0;
}

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

.fm .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;
}
.fm label:hover span { color:#306ab4; }

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

.fm .ic-required { background-color:#f94b4f; }
.fm .ic-optional { background-color:#abb7bf; }

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

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

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

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


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

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

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

.fm-step2 dl {
  background-color:#e4f7fe;
  border:2px solid #4fbbe5;
  text-align:left;
}

.fm-step2 dt {
  width:12rem;
  padding:1rem 0 1rem 1rem;
  border-top:1px solid #95d6ef;
  float:left;
}

.fm-step2 dd {
  background-color:#fff;
  margin-left:12rem;
  padding:1rem;
  border-top:1px solid #95d6ef;
  border-left:1px solid #95d6ef;
}

.fm-step2 dt:first-child,
.fm-step2 dt:first-child + dd {
  border-top:0;
}

@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 #f1cf2b;
  background-color:#fefbea;
  box-sizing:border-box;
  padding:1.5rem;
}

@media print,screen and (min-width:641px) {
  .fm-step3 .reMail { text-align:center; }
}

@media screen and (max-width:640px) {
  .fm-step3 .reMail { padding:1.25rem; }
}