@charset "UTF-8";
/* ============================================================
	FORM PARTS
============================================================ */
.form_blk {
  margin-top: -10px;
  padding-bottom: 40px;
}

.form {
  padding: 30px 20px;
  background: #FFF;
}

.form_text {
  margin-bottom: 20px;
}
.form_text h3 {
  font-weight: bold;
  font-size: 16px;
}
.form_text ul {
  margin: 1em 0 1.5em 0;
}
.form_text strong {
  color: #f32611;
}

form table {
  width: 100%;
  border: 1px solid #CCC;
  margin-bottom: 30px;
}
form table th, form table td {
  display: block;
}
form table th {
  background: #f4eccb;
  border-bottom: 1px solid #CCC;
  padding: 10px;
  position: relative;
}
form table td {
  border-bottom: 1px solid #CCC;
  padding: 10px;
  overflow: hidden;
}
form table td .row {
  margin-bottom: 5px;
}
form table td dd {
  margin-bottom: 5px;
}
form table .small {
  display: block;
}

.require {
  color: #FFF;
  background: #f32611;
  padding: 2px 5px;
  line-height: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -12px;
}

.normal {
  color: #FFF;
  background: #205a70;
  padding: 2px 5px;
  line-height: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -12px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  font-size: 16px;
  background: #FFF;
  border: 1px solid #CCC;
  padding: 5px;
}

input[name="zip1"],
input[name="zip2"] {
  width: 80px;
}

.calendar {
  display: inline-block;
  position: relative;
}
.calendar input {
  padding-right: 30px;
}
.calendar:after {
  content: "\f073";
  color: #CCC;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 9px;
  right: 10px;
}

@media screen and (min-width: 769px) {
  input[type="text"],
  input[type="password"] {
    width: 300px;
    font-size: 14px;
    padding: 6px;
    margin-right: 10px;
  }

  input[name="zip1"],
  input[name="zip2"] {
    width: 80px;
    margin-right: 0px;
  }

  input[name="zip2"] {
    margin-right: 10px;
  }

  .calendar:after {
    top: 9px;
    right: 20px;
  }
}
.selectbox {
  position: relative;
}
.selectbox:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #c3ad32 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -3px;
}

select {
  font-size: 16px;
  border: 1px solid #CCC;
  border-radius: 0;
  padding: 0 30px 0 5px;
}

@media screen and (min-width: 769px) {
  .selectbox {
    margin-right: 10px;
  }

  select {
    font-size: 14px;
    padding: 5px 30px 5px 5px;
  }
}
textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #CCC;
}

@media screen and (min-width: 640px) {
  .form {
    padding: 40px 30px;
  }
}
@media screen and (min-width: 769px) {
  .form {
    padding: 80px 90px;
  }

  .form_text {
    margin-bottom: 30px;
  }
  .form_text ul {
    margin: 10px 0 1.5em 0;
  }

  form table {
    width: 100%;
    border: 1px solid #CCC;
    margin-bottom: 30px;
  }
  form table th, form table td {
    display: table-cell;
  }
  form table th {
    width: 200px;
    border-right: 1px solid #CCC;
    vertical-align: middle;
  }
  form table td {
    border-bottom: 1px solid #CCC;
    padding: 10px 15px;
  }
  form table td .row {
    margin-bottom: 10px;
  }
  form table td dd {
    margin-bottom: 10px;
  }
  form table .small {
    display: inline;
  }
}
/* =====
	ボタン
============================================================ */
.btn_confirm,
.btn_submit {
  width: 100%;
  color: #FFF;
  font-size: 14px;
  background-color: #f32611;
  position: relative;
  padding: 10px 20px;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.btn_confirm:after,
.btn_submit:after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_confirm:hover,
.btn_submit:hover {
  background-color: #c71c0a;
  text-decoration: none;
}

@media screen and (min-width: 640px) {
  .btn_confirm,
  .btn_submit {
    width: auto;
    min-width: 300px;
  }
}
.btn_edit {
  width: 100%;
  color: #FFF;
  font-size: 14px;
  background-color: #b3b3b3;
  position: relative;
  padding: 10px 20px;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.btn_edit:after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_edit:hover {
  background-color: #9a9a9a;
  text-decoration: none;
}

@media screen and (min-width: 640px) {
  .btn_edit {
    width: auto;
    min-width: 300px;
  }
}
/* =====
	エラー
============================================================ */
.error_message {
  margin-bottom: 3px;
}

.error_message span {
  font-size: 13px;
  background: #215A70;
  color: #FFF;
  display: inline-block;
  line-height: 1.1;
  padding: 2px 5px;
  border-radius: 3px;
}

/* =====
	確認画面
============================================================ */
.confirm .small, .confirm p, .confirm .fm {
  display: none;
}
.confirm .row {
  margin: 0;
}
.confirm input[name="re_pass"],
.confirm input[name="re_mail"],
.confirm input[name="re_id"] {
  display: none;
}
.confirm label[for="subject1"],
.confirm label[for="subject2"],
.confirm label[for="subject3"] {
  display: none;
}
.confirm .calendar:after {
  display: none;
}
.confirm .selectbox:after {
  display: none;
}

/* ============================================================
	確認画面
============================================================ */
#confirmTxt {
  margin-bottom: 40px;
}
#confirmTxt p {
  display: block;
}

/* ============================================================
	送信完了
============================================================ */
.thanks_blk {
  padding: 20px 0 40px 0;
}

.thanks {
  background-color: #FFF;
  padding: 20px;
  margin: 20px 0;
}
.thanks .btnbox {
  margin-top: 40px;
}

@media screen and (min-width: 640px) {
  .thanks_blk {
    padding: 60px 0;
  }

  .thanks {
    background-color: #FFF;
    padding: 40px 60px;
  }
  .thanks .titleStyle03 h2 {
    margin-bottom: 30px;
  }
  .thanks p {
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .thanks_blk {
    padding: 90px 0;
  }

  .thanks {
    background-color: #FFF;
    padding: 60px 90px;
  }
  .thanks .btnbox {
    margin-top: 60px;
  }
}
/* =====
	カレンダー
============================================================ */

/*# sourceMappingURL=form.css.map */