@charset "utf-8";

h2.title{
  background-image:url(/inquiry/img/bg_h2_inquiry.jpg);
}

#contentsarea{
  background:#efefef;
}

/* step */
#contentsarea ul.step{
  font-size:1.2rem;
  margin:30px auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
#contentsarea ul.step li{
  text-align:center;
  color:#E16C00;
  line-height:130%;
  width:8em;
  height:8em;
  padding:2.2em 0;
  box-sizing:border-box;
  border:1px solid #E16C00;
  background:#ffffff;
  border-radius:50%;
}
#contentsarea ul.step li.icon{
  width:inherit;
  height:inherit;
  padding:0;
  border:0;
  background:transparent;
  margin:auto 7px;
}
#contentsarea ul.step li.done{
  background:#E16C00;
  color:#ffffff;
  font-weight:700;
}

#contentsarea .lead{
  padding:0 20px;
  line-height:150%;
}
#contentsarea .lead p{
  margin-bottom:1em;
}

/* form */
#contentsarea dl{
  margin-top:30px;
  padding:0 20px;
}
#contentsarea dl dt{
  background:#E16C00;
  font-weight:700;
  color:#ffffff;
  padding:10px;
  margin-bottom:10px;
}
#contentsarea dl dt span{
  display:inline-block;
  background:#dc0000;
  font-size:1.2rem;
  padding:4px 6px;
  vertical-align:top;
  margin-right:0.3em;
}
#contentsarea dl dt span.required{
  background:#dc0000;  
}
#contentsarea dl dt span.optional{
  background:#cfcfcf;
  color:#000000;
}
#contentsarea dl dd{
  margin-bottom:30px;
  line-height:150%;
}

#contentsarea dl dd select,
#contentsarea dl dd input,
#contentsarea dl dd textarea{
  width:100%;
  box-sizing:border-box;
  height:40px;
  padding:5px 10px;
}
#contentsarea dl dd textarea{
  height:150px;
}

/* エラーメッセージ */
#contentsarea p.ermsg{
  margin:20px;
  padding:15px;
  border:1px solid #dc0000;
  background:#fbe5e5;
  box-sizing:border-box;
  color:#dc0000;
  font-weight:700;
  text-align:center;
  display:none;
}
#contentsarea dl dd span.msg{
  display:block;
  margin-bottom:10px;
  color:#dc0000;
  line-height:130%;
  padding-left:1.5em;
  text-indent:-0.75em;
}
#contentsarea p.ermsg::before,
#contentsarea dl dd span.msg::before{
  content:"\f071";
  font-weight:900;
  font-family:"Font Awesome 5 Free";
  -webkit-font-smoothing:antialiased;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  line-height:1;
  margin-right:0.25em;
}

/* お問い合わせ内容 */
#contentsarea dl dd.pre {
  white-space:pre-wrap;
}


/* 個人情報の取り扱い */
#contentsarea dl dd.privacy label{
  display:flex;
  align-items:center;
}

#contentsarea dl dd.privacy input{
  width:1.6rem;
  height:1.6rem;
  padding:0;
}
#contentsarea dl dd.privacy span.note{
  margin-top:30px;
  display:block;
  line-height:150%;
}
#contentsarea dl dd.privacy span.note a{
  text-decoration:underline;
}

/* ボタン */
#contentsarea .btnarea{
  text-align:center;
  margin:50px 0;
  padding:0 20px;
}
#contentsarea .btnarea input.back,
#contentsarea .btnarea input.submit,
#contentsarea .btnarea a.back{
  display:block;
  width:100%;
  padding:20px 0;
  border:none;
  background-color:#E16C00;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  color:#ffffff;
  font-weight:700;
  font-size:1.6rem;
}
#contentsarea .btnarea input.back{
  margin-bottom:20px;
  background-color:#333333;
}



/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 667px) {

  /* step */
  #contentsarea ul.step{
    font-size:1.4rem;
  }
  #contentsarea ul.step li.icon{
    margin:auto 15px;
  }

  /* form */
  #contentsarea dl{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    align-items:stretch;
  }
  #contentsarea dl dt,
  #contentsarea dl dd{
    box-sizing:border-box;
    padding:15px;
    margin-bottom:0;
    border-top:1px solid #dcdcdc;
  }
  #contentsarea dl dt{
    width:35%;    
  }
  #contentsarea dl dd{
    width:65%;
  }
  #contentsarea dl dt.privacy-t,
  #contentsarea dl dd.privacy{
    background:transparent;
    color:#000000;
    padding-top:30px;
  }
  #contentsarea dl dt span.required{
    color:#ffffff;
  }

  /* ボタン */
  #contentsarea .btnarea input.back,
  #contentsarea .btnarea input.submit,
  #contentsarea .btnarea a.back{
    width:31rem;
    margin:0 auto;
  }
  #contentsarea .btnarea input.back{
    margin-bottom:20px;
  }
}

@media only screen and (min-width: 736px) {

  /* ボタン */
  #contentsarea .btnarea input.back,
  #contentsarea .btnarea input.submit{
    display:inline-block;
    margin:0 10px;
    vertical-align:middle;
  }
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 769px) {

  /* step */
  #contentsarea ul.step{
    font-size:1.6rem;
    margin:50px auto;
  }
  #contentsarea ul.step li{
    line-height:150%;
  }

  #contentsarea .lead{
    text-align:center;
    max-width:1000px;
    margin:0 auto;
  }
  #contentsarea .lead p{
    text-align:left;
  }

  /* form */
  #contentsarea dl,
  #contentsarea p.ermsg{
    max-width:880px;
    margin:50px auto 0 auto;
  }

  /* ボタン */
  #contentsarea .btnarea input.submit:hover,
  #contentsarea .btnarea a.back:hover{
    background-color:#e9934d;
  }
  #contentsarea .btnarea input.back:hover{
    background-color:#666666;
  }
}