@charset "utf-8";
/* common */
header { width: 100%; height: 116px; background-color: #fefbc6; position: relative; }
header a { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); }
header img:first-of-type { float: right; }
#contents { margin:0px auto; width: 1000px; }
section { margin-top: 30px; }
section:first-child { margin-top: 50px; }
.inquiry { font-size: 26px; font-weight: bold; }
.flow { height: 46px; }
.step_1 { background: url("../img/flow_step_1.png") no-repeat; }
.step_2 { background: url("../img/flow_step_2.png") no-repeat; }
.step_3 { background: url("../img/flow_step_3.png") no-repeat; }
.message { margin-top: 30px;}
.message p { line-height: 19px; text-align: left; }
.message p:last-of-type { margin-top: 10px; }
.form { text-align: left; }
.require_box { border: 1px #fc5454 solid; background-color: #ffeaea; }
.require_border { border: 1px #fc5454 solid; }
.require_shadow { box-shadow: 0px 0px 10px #fc5454; }
.optional_border { border: 1px #0c99fc solid; }
.optional_shadow { box-shadow: 0px 0px 10px #0c99fc; }
.title { margin-top: 50px; text-align: left; font-size: 22px; }
.title:last-child { margin-top: 0px; }
form { text-align: center; }
dl { width: 100%; padding: 30px 25px; border-bottom: 2px #ddd solid; position: relative; }
dl:first-of-type, .kinds { border-top: 2px #ddd solid; }
dt, dd { display: inline-block; text-align: left; }
dt { width: 30%; font-weight: bold; }
dd { width: 69%; }
label { position: absolute; top: 50%; left: 17px; transform: translateY(-50%); }
label::after { margin-left: 10px; padding: 4px 5px; font-size: 10px; color: #fff; white-space: nowrap; }
label.require::after { display:inline-block; content: "必須"; background: #fc5454; }
label.optional::after { display:inline-block; content: "任意"; background: #0c99fc; }
.kinds dd label { margin-right: 50px; white-space: nowrap; cursor:pointer; position: static; }
dd div { display: none; margin-top: 10px; color: #fc5454; }
input, textarea { padding: 5px; width: 100%; outline: none; }
.input_short { width: 49%; }
.input_short:last-of-type { float: right; }
.kinds input { margin-right: 10px; width: auto; }
textarea { display: inline-block; height: 115px; }
.button { margin: 50px 0px; }
.button div { display: none; margin-bottom: 10px; color: #fc5454; }
.button input { margin: 0px auto; width: 200px; height: 50px; font-weight: bold; background-color: #f29039; color: #fff; border: 2px #e1e1e1 solid; border-radius: 5px; cursor: pointer; }
#policy { background-color: #fefbc6; }
.policy { margin: 00px auto 0px auto; width: 1000px; padding: 30px 0px; text-align: left; }
.policy p { margin-bottom: 20px; line-height: 19px; }
.policy ol { margin: 0px auto; width: 90%; }
.policy li { margin-top: 10px; margin-left: 5px; line-height: 19px; }
footer { padding: 5px; width: 100%; font-size: 14px; text-align: center; background-color: #d6d9de; }

/* 入力内容の確認 */
#confirm #back { margin-left: 100px; background-color: #555; float: left; }
#confirm #send { margin-right: 100px; float: right; }

/* 送信完了 */
#completed .message p { margin-top: 20px; }

/* SP */
@media screen and (max-width: 767px) {
  header { height: auto; }
  header a { display: inline-block; left: 10px; padding: 5px 0px; width: auto; height: 100%; }
  header a img:first-of-type { width: auto; height: 100%; float: none; }
  #contents { width: 100%; }
  img { width: 50%; }
  section { width: 100%; padding: 0px 10px; }
  section:first-of-type { margin-top: 30px; }
  .flow { width: auto; height: 26px; background-size: 100% auto; }
  .step_1 { background-image: url("../img/flow_step_1_sp.png"); background-size: contain; background-position: center; }
  .step_2 { background-image: url("../img/flow_step_2_sp.png"); background-size: contain; background-position: center; }
  .step_3 { background-image: url("../img/flow_step_3_sp.png"); background-size: contain; background-position: center; }
  dl { position: static; }
  dt, dd { display: block; width: 100%; }
  dt { white-space: nowrap; }
  label { position: static; }
  input, .input_short, textarea { display: block; margin-top: 10px; width: 100%; }
  .input_short:last-of-type { float: none; }
  .kinds input { display: inline-block; }
  .kinds dd label { margin-right: 15px; }
  .policy { width: 100%; padding: 30px 10px; }
  .policy li { margin-left: 15px; }

  /* 入力内容の確認 */
  #confirm dd { margin-top: 10px; font-size: 17px; }
  #confirm #back { margin-left: 10px; width: 150px; }
  #confirm #send { margin-right: 10px; width: 150px; }
  #confirm .flow img { background-image: url("../img/flow_step_2_sp.png")}
  
  /* 送信完了 */
  #confirm .flow img { background-image: url("../img/flow_step_3_sp.png")}
  
}

@media screen and (min-height: 541px) {
  body { position: relative; }
  .footer_3 { position: absolute; bottom: 0px; }
}

@media screen and (min-height: 1314px) {
  body { position: relative; }
  .footer_2 { position: absolute; bottom: 0px; }
}