@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:15%; }

.fm-ip,
.fm-textarea {
  padding:0.3rem;
  border:1px solid #c8c8c8;
  background-color:#f8f8f8;
  -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-ip:focus,
.fm-textarea:focus {
  border-color:#969696 !important;
  background-color:#fff !important;
}

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


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

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

.fm-item--error__alert {
  padding-bottom:0.5rem;
  color:#e1554b;
  font-weight:400;
}

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


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

.fm-label {
  font-size:0.85rem;
  color:#fff;
  line-height:1.2;
  display:inline-block;
  padding:0.3em 0.5em;
  margin-bottom:0.1em;
  margin-left:1em;
  vertical-align:middle;
  border-radius:2px;
  font-weight:normal;
  
}

.fm-label--required { background-color:#e23e43; }
.fm-label--optional { background-color:#aaa; }


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

.fm-ip-group {
  padding-bottom:0.25rem;
}

.fm-ip-group ul {
  list-style:none;
}

.fm-ip-group li {
  display:inline-block;
  margin-right:2em;
}

.fm-ip-group label { cursor:pointer; }
.fm-ip-group label input { margin-right:0.5em; }
.fm-ip-group .label__txt {
  -webkit-transition:color ease 0.15s;
  transition:color ease 0.15s;
}
.ua-pc .fm-ip-group label:hover .label__txt { color:#00a5df; }


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

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

@media print,screen and (min-width:641px) {
  .fmLo-msg {
    padding-left:1rem;
    padding-right:1rem;
  }
}


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

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

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

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

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

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

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

@media screen and (min-width:401px) and (max-width:500px) {
  .fm-backBtn .fm-btn,
  .fm-submitBtn .fm-btn {
    font-size:4.2vw;
    padding-left:1em;
    padding-right:1em;
  }
}

@media screen and (max-width:400px) {
  .fmLo-btn {
    padding-top:1.5em;
  }
  
  .fm-backBtn,
  .fm-submitBtn {
    width:100%;
    float:none;
  }

  .fm-backBtn { padding-right:0; padding-top:1em; }
  .fm-submitBtn { padding-left:0; }
}


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

.fmLo-step1 dt {
  font-weight:700;
  font-size:1.1em;
}

@media print,screen and (min-width:641px) {
  .fmLo-step1 dt {
    width:12rem;
    float:left;
    clear:both;
    text-align:right;
    padding-right:1.5rem;
  }
  
  .fmLo-step1 dd {
    margin-left:12rem;
    text-align:left;
  }
  
  .fmLo-step1 dd:not(:last-child) {
    padding-bottom:1.5em;
  }
}

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


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

.fmLo-privacy {
  font-weight:400;
  font-size:0.95em;
  border:2px solid #77d3f6;
  border-radius:5px;
  overflow:hidden;
}

.fmLo-privacy .inblk {
  display:inline-block;
}

@media print,screen and (min-width:641px) {
  .fmLo-privacy {
    margin-top:2.5rem;
    padding:1.25em;
  }
}

@media screen and (max-width:640px) {
  .fmLo-privacy {
    margin-top:2em;
    padding:1em;
  }
}

@media screen and (max-width:400px) {
  .fmLo-privacy {
    margin-top:1.5em;
  }
}


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

.fmLo-step2Tbl {
  width:100%;
  border-collapse:collapse;
}
  
.fmLo-step2Tbl th,
.fmLo-step2Tbl td {
  border:1px solid #77d3f6;
  padding:0.8em 1em;
  line-height:1.5;
}
  
.fmLo-step2Tbl th {
  background-color:#ebf9ff;
  font-weight:500;
}
  
@media print,screen and (min-width:641px) {
  .fmLo-step2Tbl {
    margin-top:1.5em;
  }
  
  .fmLo-step2Tbl th {
    width:22%;
    text-align:center;
    vertical-align:top;
    white-space:nowrap;
  }
}

@media screen and (max-width:640px) {
  .fmLo-step2Tbl {
    margin-top:1.5em;
    border-top:1px solid #77d3f6;
  }
  
  .fmLo-step2Tbl th,
  .fmLo-step2Tbl td {
    width:100%;
    display:block;
  }
  
  .fmLo-step2Tbl th {
    border-top:0;
    border-bottom:0;
    padding:0.5em 0.65em;
  }
  
  .fmLo-step2Tbl td {
    padding:0.8em 0.65em;
  }
}


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

.fmLo-step3 p:not(:first-child) {
  padding-top:1.5em;
}