@charset "utf-8";

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


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

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

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

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

form input[type="text"],
form select,
form textarea {
  padding:6px;
  border:none;
  box-sizing:border-box;
  border:1px solid #c8c8c8;
  background-color:#f8f8f8;
  border-radius:4px;
  
  -moz-transition:background-color ease-in-out  0.15s, border-color ease-in-out  0.15s;
  -o-transition:background-color ease-in-out  0.15s, border-color ease-in-out  0.15s;
  -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;
}

form input[type="text"]:focus,
form select:focus,
form textarea:focus {
  border-color:#969696;
  background-color:#fff;
}

form option {
  padding-right:0.5em;
}

form label { cursor:pointer; padding-right:1em; }
form label input { margin-right:0.25em; }
form label:hover { color:#63b6de; }

form .fm-check--error input[type=text], 
form .fm-check--error textarea,
form .fm-check--error select {
  border-color:#f4676a;
  background-color:#feefef;
}

form .fm-check--error p.error {
  padding-top:0.25em;
  color:#f4676a;
}

.ic-required {
  font-size:68.8%;
  display:inline-block;
  background-color:#f4676a;
  color:#fff;
  padding:0.15em 0.75em;
  box-sizing:border-box;
  font-weight:normal;
  border-radius:3px;
}

.ic-optional {
  font-size:68.8%;
  display:inline-block;
  background-color:#969696;
  color:#fff;
  padding:0.15em 0.75em;
  box-sizing:border-box;
  font-weight:normal;
  border-radius:3px;
}

.fm-txt { display:inline-block; font-size:87.5%; line-height:1.5; }
.fm-txt--T { padding-top:0.5em;  }
.fm-txt--B { padding-bottom:0.65em; }
.fm-txt--S { vertical-align:middle; margin-left:1em; }

form .fm-btn-warp {
  padding-top:1.5em;
  text-align:center;
}

@media (max-width:767px) {
  form textarea,
  .ip-l,
  .ip-m { width:100%; }
  
  .ip-ss { width:30%; }
  .ip-s  { width:50%; }
  
  .ip-m + .fm-txt--S { margin-left:0; padding-top:0.5em; }
  
  form .fm-btn-warp {
    padding-top:1.25em;
  }
}

@media (max-width:500px) {
  .ip-s,
  .ip-ss { width:100%; }
  
  .fm-txt--S { margin-left:0; padding-top:0.5em; }
}


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

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

.contactForm {
  text-align:center;
}

.contactForm dl {
  text-align:left;
}


/*-----------------------------------------------------------------------------------
  プライバシーポリシー
-----------------------------------------------------------------------------------*/

.fm-privacypolicy { padding-top:1.5em; }

.fm-privacypolicy a[target="_blank"]:after {
  content:"";
  width:11px;
  height:11px;
  display:inline-block;
  margin-left:0.25em;
  vertical-align:middle;
  background-image:url(../image/icon/blank.png);
  background-repeat:no-repeat;
  background-position:right center;
}

@media (max-width:767px) {
  .fm-privacypolicy { padding-top:1.25em; }
}


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

.contactForm-step1 dl {
  border-bottom:1px solid #ebebeb;
}

.contactForm-step1 dt {
  float:left;
  clear:both;
  padding-top:1.4em;
  padding-bottom:1em;
  padding-right:1em;
  box-sizing:border-box;
  border-top:1px solid #ebebeb;
  font-weight:bold;
  position:relative;
}

.contactForm-step1 dt .ic-required,
.contactForm-step1 dt .ic-optional {
  position:absolute;
  right:1.5em;
  top:2.25em;
}

.contactForm-step1 dt.fm-dt--pd0 {
  padding-top:1em;
}

.contactForm-step1 dt.fm-dt--pd0 .ic-required,
.contactForm-step1 dt.fm-dt--pd0 .ic-optional {
  top:1.6em;
}

.contactForm-step1 dd {
  padding-top:1em;
  padding-bottom:1em;
  border-top:1px solid #ebebeb;
  background-color:#fff;
}

@media (max-width:640px) {
  .contactForm-step1 dt,
  .contactForm-step1 dd {
    width:100% !important;
  }
  
  .contactForm-step1 dt {
    float:none;
    padding-top:1em;
    padding-bottom:0.5em;
  }
  
  .contactForm-step1 dd {
    margin-left:0 !important;
    border-top:0;
    padding-top:0;
  }
  
  .contactForm-step1 dt .ic-required,
  .contactForm-step1 dt .ic-optional {
    position:inherit;
    right:inherit;
    top:inherit !important;
    vertical-align:middle;
    margin-left:0.75em;
  }
}


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

.contactForm-step2 table {
  margin-top:1.25em;
  width:100%;
  text-align:left;
  border-collapse:collapse;
}

.contactForm-step2 th {
  width:25%;
  background-color:#f5f5f5;
}

.contactForm-step2 th,
.contactForm-step2 td {
  vertical-align:top;
  padding:0.75em;
  border:1px solid #d2d2d2;
  box-sizing:border-box;
}

.contactForm-step2 .tmp-img {
  width:100%;
  max-width:200px;
  vertical-align:bottom;
}

@media only screen and (max-width:767px) {
  .contactForm-step2 table {
    font-size:87.5%;
  }
  
  .contactForm-step2 th {
    width:30%;
  }
}

@media only screen and (max-width:640px) {
  .contactForm-step2 th,
  .contactForm-step2 td {
    padding:0.5em;
  }

  .contactForm-step2 .tmp-img {
    max-width:50%;
  }
}

.contactForm-step2 .fm-btn-warp {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  vertical-align:bottom;
}

.contactForm-step2 .fm-btn--next {
  float:right;
  margin-left:0.5em;
}

.contactForm-step2 .fm-btn--prev {
  float:left;
  margin-right:0.5em;
}

@media only screen and (max-width:767px) {
  .contactForm-step2 .fm-btn-warp {
    display:block;
  }
  
  .contactForm-step2 .fm-btn {
    min-width:inherit;
    width:49%;
  }

  .contactForm-step2 .fm-btn--next { margin-left:1%; }
  .contactForm-step2 .fm-btn--prev { margin-right:1%; }
}

@media screen and (max-width:640px) {
  .contactForm-step2 .fm-btn {
    font-size:100%;
  }
}

@media screen and (max-width:400px) {
  .contactForm-step2 .fm-btn span {
    display:block;
    line-height:1.4;
  }
}


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

.contactForm-step3 p {
  background-color:#fdf6de;
  box-sizing:border-box;
  border-radius:4px;
  padding:25px;
  margin-top:1em;
  text-align:left;
}

@media screen and (max-width:767px) {
  .contactForm-step3 p {
    padding:1.25em;
  }
}

@media screen and (max-width:500px) {
  .contactForm-step3 p {
    padding:1em;
  }
}


/*-----------------------------------------------------------------------------------
  ボタン
-----------------------------------------------------------------------------------*/

.preload .fm-btn,
.preload .fm-btn * {
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -ms-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
  animation:none !important;
}

.fm-btn {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  box-sizing:border-box;
  border:none;
  margin:0;
  outline:none;
  text-align:center;
  text-decoration:none;
  font-size:inherit;
  cursor:pointer;
  position:relative;
  border-radius:4px;
  transition:background ease 0.2s, border-color ease 0.2s;
  min-width:310px;
  padding:0.65em 1.5em;
  font-size:112.5%;
  font-weight:bold;
}

.fm-btn span br { display:none; }

@media screen and (max-width:500px) {
  .fm-btn {
    min-width:100%;
  }
  
  .fm-btn {
    padding-left:1em;
    padding-right:1em;
  }
}

@media screen and (max-width:400px) {
  .fm-btn span br { display:inherit; }
}


/* 次のページへ進む ----------------------------------------*/

.fm-btn--next {
  background-color:#6da4da;
  color:#fff;
}

.fm-btn--next { padding-right:3em; } 

.fm-btn--next span:after {
  content:"";
  display:inline-block;
  position:absolute;
  right:0.85em;
  top:50%;
  width:18px;
  height:18px;
  margin-top:-9px;
  background-image:url(../image/icon/next-R-white_b.png);
  background-repeat:no-repeat;
  background-size:contain;
}

.lte-ie8 .fm-btn--next span:after {
  background-image:url(../image/icon/next-R-white_s18.png);
}

.lte-ie8 .fm-btn--next:hover {
  background-color:#8bbae9;
}

@media screen and (min-width:768px) {
  .fm-btn--next:hover {
    background-color:#8bbae9;
  }
}

@media screen and (max-width:500px) {
  .contactForm-step2 .fm-btn--next span:after {
    width:16px;
    height:16px;
    margin-top:-7px;
  }
}

@media screen and (max-width:360px) {
  .fm-btn--next span:after {
    width:16px;
    height:16px;
    margin-top:-7px;
  }
}


/* 前のページへ戻る ----------------------------------------*/

.fm-btn--prev {
  background-color:#a5a5a5;
  color:#fff;
}

.fm-btn--prev { padding-left:3em; }

.fm-btn--prev span:before {
  content:"";
  display:inline-block;
  position:absolute;
  left:0.85em;
  top:50%;
  width:18px;
  height:18px;
  margin-top:-9px;
  background-image:url(../image/icon/prev-R-white_b.png);
  background-repeat:no-repeat;
  background-size:contain;
}

.lte-ie8 .fm-btn--prev span:before {
  background-image:url(../image/icon/prev-R-white_s18.png);
}

.lte-ie8 .fm-btn--prev:hover {
  background-color:#c3c3c3;
}

@media screen and (min-width:768px) {
  .fm-btn--prev:hover {
    background-color:#c3c3c3;
  }
}

@media screen and (max-width:500px) {
  .contactForm-step2 .fm-btn--prev span:before {
    width:16px;
    height:16px;
    margin-top:-7px;
  }
}

@media screen and (max-width:360px) {
  .fm-btn--prev span:before {
    width:16px;
    height:16px;
    margin-top:-7px;
  }
}