@charset "utf-8";

/* ==============================================================================
form
================================================================================= */


/* ================================================================================
フォームパーツ
================================================================================= */
.form_area input[type="text"],
.form_area input[type="email"],
.form_area input[type="tel"],
.form_area button,
.form_area textarea {
  width:100%;
  margin:0;
  padding:5px 10px;
  background:#fff;
  border:1px solid #bbb;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-size:16px;
}
.form_area button {
  background-color:transparent;
  border:none;
  cursor:pointer;
  outline:none;
  padding:0;
  appearance:none;
}
.form_area textarea {
  min-height:100px;
}
.form_area :placeholder-shown {
  color:#777;
  line-height:1;
}
.form_area input::placeholder,
.form_area textarea::placeholder {
  color:#888;
  line-height:1.7;
  font-size:13px;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.form_area input[type="text"],
.form_area input[type="email"],
.form_area input[type="tel"],
.form_area textarea {
  max-width:100%;
}
}


/* ================================================================================
select (selectordie.js)
================================================================================= */
.select_sets .sp_br {
  display:inline-block;
}
.select_sets .sp_br:first-child {
  margin-right:12px;
}
.select_sets .sod_select {
  width:120px;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.select_sets .sp_br + .sp_br {
  margin-top:7px;
}
}


/* ================================================================================
input = radio
================================================================================= */
.form_area input[type="radio"] {
  display:none;
}
.form_area input[type="radio"] + label {
  display:inline-block;
  position:relative;
  cursor:pointer;
  margin-left:20px;
  padding:10px 20px;
  border-radius:2px;
  color:#3e4956;
  text-align:center;
  line-height:1;
}
.form_area input[type="radio"] + label:before {
  position:absolute;
  content:"";
  top:50%;
  left:-9px;
  width:16px;
  height:16px;
  margin-top:-9px;
  border:1px solid #000;
  background:#fff;
  border-radius:50%;
}
.form_area input[type="radio"]:checked + label:after {
  position:absolute;
  content:"";
  top:50%;
  left:-6px;
  width:12px;
  height:12px;
  margin-top:-6px;
  border-radius:50%;
  background:#000;
}


/* ================================================================================
input = checkbox
================================================================================= */
.form_area input[type="checkbox"] {
  display:none;
}
.form_area input[type="checkbox"] + label {
  display:inline-block;
  position:relative;
  cursor:pointer;
  margin-left:7px;
  padding:8px 15px 8px 17px;
  font-size:14px;
  text-align:center;
  line-height:1;
}
.form_area input[type="checkbox"] + label:before {
  position:absolute;
  content:"";
  top:50%;
  left:-7px;
  width:15px;
  height:15px;
  margin-top:-9px;
  border:1px solid #bbb;
  background:#fff;
}
.form_area input[type="checkbox"]:checked + label:after {
  position:absolute;
  content:"";
  top:50%;
  left:-5px;
  width:16px;
  height:16px;
  margin-top:-12px;
  background:url(../../common/img/icon_check.png) no-repeat;
  background-size:16px 16px;
}


/* ================================================================================
エントリーフォーム
================================================================================= */
.form_area {
  max-width:850px;
  margin:30px auto 0;
}
.form_area .txt_supp {
  color:#61b5be;
  margin-left:190px;
}

/* テーブル設定 ---------------*/
.form_area .table_sets {
  width:100%;
  margin:0 auto;
  vertical-align:top;
  color:#666;
}
.form_area .table_sets th,
.form_area .table_sets td {
  padding:15px 0;
  vertical-align:top;
  text-align:left;
}
.form_area .table_sets th {
  width:190px;
  font-weight:bold;
  padding:19px 0;
}
.form_area .table_sets th .icon_required {
  margin-left:.25em;
  color:#61b5be;
}
.form_area .table_sets td {
  border-left:none;
}

/* ラジオボタン横並び ---------------*/
.form_area .table_sets .btn_set li {
  display:inline-block;
}

/* 郵便番号 ---------------*/
.form_area .zip_address td input {
  display:block;
}
.form_area .zip_address td input:nth-child(1) {
  width:165px;
}
.form_area .zip_address td input:nth-child(2) {
  margin:20px 0;
}
.form_area .zip_address td input:nth-child(3) {
  margin:20px 0;
}

/* 詳細 ---------------*/
.form_area textarea.large {
  height:190px;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.form_area {
  margin:25px 0 50px;
}
.form_area .txt_supp {
  margin:0 0 5px 0;
  text-align:center;
}
.form_area .table_sets {
  margin:0 auto;
}
.form_area .table_sets tbody,
.form_area .table_sets tr {
  display:block;
  width:100%;
}
.form_area .table_sets th,
.form_area .table_sets td {
  display:block;
  width:100%;
  max-width:100%;
  padding:12px;
  border:none;
}
.form_area .table_sets tr:nth-child(odd) th {
  border-top:1px solid #ccc;
}
.form_area .table_sets tr:nth-child(odd) td,
.form_area .table_sets tr:last-child td {
  border-bottom:1px solid #ccc;
}
.form_area .table_sets th {
  padding-bottom:0;
}
.form_area .table_sets td {
  padding-top:5px;
  padding-bottom:12px;
}
}


/* ================================================================================
ご利用規約
================================================================================= */
.form_area .privacy_policy {
  padding-top:3px;
}
.form_area .privacy_policy .detail {
  height:200px;
  margin:10px 0;
  padding:15px;
  border:1px solid #999;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  background:#fff;
  font-size:13px;
}
.form_area .privacy_policy .ttl {
  font-weight:bold;
}
.form_area .privacy_policy .detail dt {
  margin-top:1em;
  font-weight:bold;
}
.form_area .privacy_policy .detail address {
  margin-top:1em;
}


/* ================================================================================
確認ボタン
================================================================================= */
.bt_operation {
  margin:25px 0;
  text-align:center;
  font-size:0;
}
.bt_operation li {
  display:inline-block;
}
.bt_operation li + li {
  margin-left:40px;
}
.bt_operation span {
  display:inline-block;
  line-height:50px;
  min-width:210px;
  background:#61b5be;
  padding:0 30px;
  color:#fff;
  font-size:18px;
  letter-spacing:.04em;
  font-weight:bold;
  border-radius:10px;
}
.bt_operation span:hover {
  background-color:#89c8ce;
}
.bt_operation .icon_prev:before,
.bt_operation .icon_next:before,
.bt_operation .icon_top:before,
.bt_operation .icon_next_after:after {
  content:"";
  display:inline-block;
  position:relative;
  top:-1px;
  width:9px;
  height:9px;
  margin-right:8px;
  border-top:3px solid #fff;
  border-left:3px solid #fff;
  transform:rotate(135deg);
}
.bt_operation .icon_next:before {
  margin-right:12px;
}
.bt_operation .icon_prev:before {
  transform:rotate(-45deg);
}
.bt_operation .icon_top:before {
  top:2px;
  margin-right:10px;
  transform:rotate(45deg);
}
.bt_operation .icon_next_after:after {
  margin:0 0 0 8px;
}
.bt_operation button[type="submit"][disabled] {
  cursor:default;
}
.bt_operation button[type="submit"][disabled] span,
.bt_operation button[type="submit"][disabled] span:hover {
  background:#bbb;
}
.bt_operation .bt_clear span {
  background:#bbb;
}
.bt_operation .bt_clear span:hover {
  background:#ccc;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.bt_operation {
  margin:25px 0 0;
  padding:0 10px;
  text-align:center;
}
.bt_operation li,
.bt_operation span {
  display:block;
}
.bt_operation li + li {
  margin:15px 0 0 0;
}
}


/* ================================================================================
完了・エラー画面設定
================================================================================= */
.sec_confirm.sec_thanks {
  margin-bottom:80px;
}
.sec_confirm .form_area {
  margin:50px auto 80px;
}
.sec_confirm .form_area table {
  margin-bottom:50px;
}
.sec_confirm .form_area th,
.sec_confirm .form_area td {
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
}
.sec_confirm .form_area .msg {
  color:#d95679;
  font-weight:bold;
}
.sec_confirm .postmail {
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  max-width:1280px;
  margin:0 auto;
  color:#fff;
  padding-left:10px;
  font-size:12px;
}
#postmail {
  max-width:1400px;
  padding-left:100px;
  color:#666;
  text-align:center;
}
#postmail a {
  color:#666;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.sec_confirm.sec_thanks {
  margin-bottom:40px;
}
.sec_confirm .form_area {
  margin:25px auto 40px;
}
.sec_confirm .info {
  padding:0 10px;
}
.sec_confirm .form_area table {
  margin-bottom:25px;
}
.sec_confirm .form_area th,
.sec_confirm .form_area td {
  border:0;
}
.sec_confirm .postmail {
  position:static;
  margin:0 auto;
  padding:5px;
  font-size:12px;
  text-align:center;
  color:#666;
  border-top:1px solid #ccc;
}
.sec_confirm .postmail a {
  color:#666;
}
}