@charset "utf-8";

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

  Form

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

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

  部品
  
----------------------------------------------------------------------------------------------------*/

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

.fm-ip,
.fm-textarea {
  padding:0.4em;
  border:1px solid #c1c0bd;
  background-color:#fff;
  -webkit-transition:background-color ease-out  0.1s, border-color ease-out  0.1s;
  transition:background-color ease-out  0.1s, border-color ease-out  0.1s;
}

.fm-ip:focus,
.fm-textarea:focus {
  border-color:#464137 !important;
  background-color:#fff !important;
}

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


/*--------------------------------------------------------------------------------
  エラー
--------------------------------------------------------------------------------*/

.fm-item--error .fm-ip,
.fm-item--error .fm-textarea,
.fm-item .yno .fm-ip.fm-ip--error {
  border-color:#f24454;
  background-color:#fcdadd;
}

.fm-item--error__alert {
  padding-top:0.5em;
  padding-bottom:0.5em;
  color:#f24454;
}

.fm-item__label + .fm-item--error__alert,
.fm-item__label + .fm-ip-group .fm-item--error__alert {
  padding-top:0;
}

.fm-item .yno .fm-ip:not(.fm-ip--error) {
  border-color:#c1c0bd;
  background-color:#fff;
}


/*--------------------------------------------------------------------------------
  必須・任意　ラベル
--------------------------------------------------------------------------------*/

.fm-label {
  font-size:0.7em;
  color:#fff;
  line-height:1.2;
  display:inline-block;
  padding:0.3em 0.5em;
  margin-bottom:0.1em;
  margin-left:1em;
  vertical-align:middle;
  
}

.fm-label--required { background-color:#f24454; }
.fm-label--optional { background-color:#989691; }


/*--------------------------------------------------------------------------------
  チェックボックス・ラジオボタン グループ
--------------------------------------------------------------------------------*/

.fm-ip-group {
  width:100%;
  overflow:hidden;
}

.fm-ip-group ul {
  list-style:none;
  text-align:left;
  margin-left:-8px;
}

.fm-ip-group--cols2 li {
  width:50%;
}

.fm-ip-group--cols2 li:nth-child(n+3) {
  margin-top:8px;
}

.fm-ip-group--cols3 li {
  width:33.333333%;
}

.fm-ip-group--cols3 li:nth-child(n+4) {
  margin-top:8px;
}

.fm-ip-group li {
  float:left;
  line-height:1.5;
}

.fm-ip-group li {
  padding-left:8px;
}

.fm-ip-group label {
  height:100%;
  cursor:pointer;
  display:block;
  background-color:rgba(70,65,55,0.12);
  padding:0.9em 0.6em 0.9em 0.8em;
  line-height:1;
}

.fm-ip-group input:checked + label {
  background-color:#f2e146;
}

.fm-ip-group input {
  display:none;
}


/* チェックボックス */
.fm-ip-icon--check {
  padding-left:2.7rem;
  position:relative;
}

.fm-ip-icon--check:before {
  content:"";
  display:block;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width:1.6rem;
  height:1.6rem;
  background-color:#fff;
}

.fm-ip-group input:checked + label .fm-ip-icon--check:after {
  content:"";
  display:block;
  position:absolute;
  top:-0.2rem;
  left:0.75rem;
  width:0.8rem;
  height:1.6rem;
  transform:rotate(40deg);
  border-bottom:3px solid #322d23;
  border-right:3px solid #322d23;
}


/* ラジオボタン */
.fm-ip-icon--radio {
  padding-left:2.4rem;
  position:relative;
}

.fm-ip-icon--radio:before {
  content:"";
  display:block;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width:1.6rem;
  height:1.6rem;
  border:4px solid #fff;
  background-color:#fff;
  border-radius:100%;
}

.fm-ip-group input:checked + label .fm-ip-icon--radio:before {
  background:#322d23;
}


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

  レイアウト
  
----------------------------------------------------------------------------------------------------*/

.fmLo--bg {
  background-color:rgba(70,65,55,0.08);
}

@media print,screen and (min-width:641px) {
  .fmLo {
    padding-top:90px;
    padding-bottom:115px;
  }
}

@media screen and (max-width:640px) {
  .fmLo {
    padding:10% 6% 12% 6%;
  }
}

@media print,screen and (min-width:641px) {
  .fmLo-msg {
    padding-bottom:60px;
  }
  
  .fmLo-msg--B {
    font-size:1.4em;
  }
}

@media screen and (max-width:640px) {
  .fmLo-msg {
    padding-bottom:10%;
  }
}


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

.fmLo-btn {
  text-align:center;
}

.fm-btn {
  vertical-align:top;
}

.fm-backBtn,
.fm-submitBtn {
  display:block;
  width:50%;
}

.fm-backBtn { padding-right:0.5em; text-align:right; float:left; }
.fm-submitBtn { padding-left:0.5em; text-align:left; float:right; }

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

  .fm-backBtn .fm-btn,
  .fm-submitBtn .fm-btn { min-width:12em; }
}

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

  .fm-backBtn { padding-right:2%; }
  .fm-submitBtn { padding-left:2%; }
}


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

.fmLo-step1 {
  text-align:left;
}

.fmLo-step1 dt {
  font-weight:bold;
  font-size:1.2em;
}

.fm-item__label {
  display:inline-block;
  padding-bottom:0.25em;
}


@media print,screen and (min-width:641px) {
  .fmLo-step1 {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .fmLo-step1 dt {
    width:28rem;
    float:left;
    clear:both;
    text-align:right;
    padding-right:30px;
    padding-top:0.2em;
  }
  
  .fmLo-step1 dd {
    margin-left:28rem;
    text-align:left;
  }
  
  .fmLo-step1 dd:not(:last-child) {
    padding-bottom:40px;
  }
  
  .fm-item__label {
    padding-top:0.5em;
  }
}

@media screen and (max-width:640px) {
  .fmLo-step1 dd:not(:last-child) {
    padding-bottom:2em;
  }
  
  .fmLo-step1 dd {
    padding-top:0.8em;
  }
}


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

.fmLo-step2Tbl {
  border-collapse:collapse;
  border:0;
}

.fmLo-step2Tbl th,
.fmLo-step2Tbl td {
  padding:1em;
  vertical-align:top;
  line-height:1.5;
}

.fmLo-step2Tbl th {
  width:25%;
  white-space:nowrap;
  font-weight:bold;
  text-align:center;
  background-color:#dedddb;
}

.fmLo-step2Tbl tr:not(:last-child) th {
  border-bottom:1px solid rgba(255,255,255,0.6);
}

.fmLo-step2Tbl td {
  text-align:left;
  background-color:#fff;
}

.fmLo-step2Tbl tr:not(:last-child) td {
  border-bottom:1px solid #eaeae9;
}
  
@media print,screen and (min-width:641px) {
  .fmLo-step2Tbl {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .fmLo-step2Tbl th {
    width:22%;
    text-align:center;
    vertical-align:top;
    white-space:nowrap;
  }
}

@media screen and (max-width:640px) {
  .fmLo-step2Tbl th,
  .fmLo-step2Tbl td {
    padding:0.85em;
  }
}

@media screen and (max-width:600px) {
  .fmLo-step2Tbl {
    font-size:0.9em;
  }
}


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

@media print,screen and (min-width:641px) {
  .fmLo-step3 {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .fmLo-step3 .fmLo-msg {
    padding-bottom:40px;
  }
  
  .fmLo-step3 .reMail {
    line-height:2;
  }
}

@media screen and (max-width:640px) {
  .fmLo-step3 .reMail {
    text-align:left;
  }
}