@charset "utf-8";
/* CSS Document */

/* ================================================== */
/* #form */
/* ================================================== */
/* ============ レイアウト/装飾 ============ */
#form .guide,
#form .accept{
  text-align:center;
  }
#form{
  max-width:800px;
  margin: 0 auto;
  text-align:center;
  }
#form table{
  width:100%;
  margin:100px auto;
  }

#form table th,
#form table td{
  padding:10px;
  font-weight:400;
  text-align:left;
  vertical-align:top;
  line-height:1.6;
  }
#form table th{
  width:240px;
  padding-top:15px;
  }
#form table td{
  width:calc(100% - 240px);
  }
#form .submit{
  margin-top:100px;
  }
#form .short{
  max-width:160px;
  }
#form .row-5{
  height: calc( 1.6em * 5 );/*行の高さ*/
  }
#form table button{
  font-size:1.2rem;
  letter-spacing:0.1em;
  color: #fff;
  background-color:#A8A8A8;
  padding: 8px;
  display: inline-block;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-left:5px;
}
#form .accept a{
  color:#3B85A5;
  }
#form .questionnaire label{
  display:inline-block;
  white-space: nowrap;
  line-height:2.4;
  }
#form .questionnaire .fl{
  align-items: center;
  }
#form .questionnaire label:last-of-type{
  width:80px;
  }
#form .questionnaire input[type="text"]{
  width: calc( 100% - 80px );
  }
#form table td.p15{
  padding-top:15px;
  }
/* 確認画面のみ */
#form.confirm table th{
  padding-top:10px;/* 確認画面のみ */
  }
@media only screen and (max-width: 640px) {
#form table tr,
#form table th,
#form table td{
  display:block;
  }
#form table th{
  width:100%;
  padding-bottom:0;
  }
#form table td{
  width:100%;
  }
#form .submit{
  margin-top:50px;
  }
br.pc{
  display:none;
  }
/* 確認画面のみ */
#form.confirm table tr{
  border-bottom:solid 1px #CCC;
  padding:10px 0;
  }
}
@media only screen and (max-width: 480px) {
#form table{
  width:100%;
  max-width:800px;
  margin:50px auto;
  }
}
/* ============ thanks ============ */
#form .thanks h3{
  font-size:1.8rem;
  margin-bottom:20px;
  text-align:center;
  }
#form .thanks p + p{
  margin-top:10px;
  }
#form .thanks .sp{
  display:none;
  }
@media only screen and (max-width: 640px) {
#form .thanks p{
  text-align:left
  }
#form .thanks .sp{
  display:block;
  }
#form .thanks .pc{
  display:none;
  }
}

/* ============ 入力枠 ============ */
/* 入力フォーム */
#form select,
#form input[type="text"],
#form input[type="password"],
#form input[type="email"],
#form input[type="number"],
#form textarea{
  -webkit-appearance:none;
  appearance:none;/* スタイル打消し */
  border: solid #A8A8A8 1px;
  border-radius: 5px;
  padding:8px 15px;
  width:100%;
  background-color:#FFF;
  letter-spacing: 0.1em;
  }
#form input:focus,
#form textarea:focus,
#form select:focus{
  outline: none;/* 選択時の線を消す */
}
#form input:disabled,
#form textarea:disabled,
#form select:disabled{
    background-color:#eee;
}
/* 数量選択 */
#form input[type="number"]{
  position:relative;
  padding:8px 8px 8px 15px;
  max-width:100px;
  }
#form .numberbox{
  position: relative;
  display:inline-block;
}
#form .numberbox:before,
#form .numberbox:after{
  z-index:1;
  }
#form .numberbox:before {
  position: absolute;
  content:"";
  top:5px;
  right:7px;
  display: inline-block;
  border-style: solid;
  border-width: 0 4px 7px 4px;
  border-color:transparent transparent #A8A8A8 transparent;
  pointer-events: none;
}
#form .numberbox:after {
  position: absolute;
  content:"";
  bottom:5px;
  right:7px;
  display: inline-block;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color:#A8A8A8 transparent transparent transparent;
  pointer-events: none;
}
#form .numberbox input {
  -webkit-appearance: none;
}
#form .numberbox input::-webkit-inner-spin-button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: scale(1.4);
  transform-origin: right center;
  opacity: 0;
  cursor: pointer;
}
#form .numberbox input::-webkit-contacts-auto-fill-button {
  opacity: 0;
}
_::-webkit-full-page-media, _:future, :root #form .numberbox:before,
_::-webkit-full-page-media, _:future, :root #form .numberbox:after{
  display:none;
}
@-moz-document url-prefix() {/* Firefoxのみ */
  #form .numberbox:before,
  #form .numberbox:after{
  display:none;
  }
}
@media all and (-ms-high-contrast: none) {/*IEのみ */
  #form .numberbox:before,
  #form .numberbox:after{
  display:none;
  }
}
/* 選択 */
#form input[type="checkbox"],
#form input[type="radio"]{
  margin-bottom:5px;
  }
#form select::-ms-expand {
  display: none;
}
#form .selectbox {
  position:relative;
  }
#form .selectbox::after{
  content:"";
  position:absolute;
  top:50%;
  right:15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  border-style: solid;
  border-width: 9px 6px 0 6px;
  border-color: #A8A8A8 transparent transparent transparent;
  pointer-events: none;
  }
/*#form select,*/
#form select option:first-of-type{
  color:#A8A8A8;
  }
#form .selected_black select,
#form .selected_black select option:first-of-type{
  color:#000;
  }
#form select option{
  color:#000;
  }
/* 送信ボタン */
#form .submit input,
#form .submit a{
  display: inline-block;
  -webkit-appearance:none;
  appearance:none;/* スタイル打消し */
  border:none;
  border-radius: 17px;
  color:#FFF;
  background: #3D4D53;
  background: -webkit-linear-gradient(0deg, #748D9A, #3D4D53);
  background: linear-gradient(0deg, #748D9A, #3D4D53);
  width:100%;
  max-width:320px;
  padding:8px 15px;
  font-size:1.2rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  }
#form .submit.twin input,
#form .submit.twin a{
  max-width:180px;
  }
#form .submit.twin input + input,
#form .submit.twin a + a{
  margin-left:10px;
  }
@media only screen and (max-width: 480px) {
#form .submit.twin input,
#form .submit.twin a{
  max-width:120px;
  }
}

/* ============ 補足/エラー ============ */
/* 補足テキスト */
#form .supplement{
  font-size:1.2rem;
  color:#A8A8A8;
  }
/* エラーテキスト */
#form .error_head{
  border:solid #F00 1px;
  color:#F00;
  padding:10px;
  margin:30px auto;
  font-size: 1.2rem;
  }
#form .error{
  color:#F00;
  font-size: 1.2rem;
  }
@media only screen and (max-width: 640px) {
/* エラーテキスト */
#form .error_head{
  text-align:left;
  }
}

/* ================================================== */
/* ページ個別 */
/* ================================================== */
/* ============ #login ============ */
#login #form{
  max-width:600px;
  }
#form table{
  margin:50px auto;
  }
#login #form table th,
#login #form table td{
  display:block;
  }
#login #form table th{
  width:100%;
  padding-bottom:0;
  }
#login #form table td{
  width:100%;
  }
#login #form .submit{
  margin:50px auto;
  }
/* ============ #account ============ */
#account .user_id label{
  display:inline-block;
  margin-bottom:10px;
  }
#account #form .submit input{
  max-width:420px;
  }
@media only screen and (max-width: 480px) {
#account #form .submit input{
  letter-spacing: 0.1em;
  font-size:1.1rem;
  }
}
/* ============ #subscription_form ============ */
#subscription_form h3{
  text-align:left;
  font-size:1.6rem;
  margin:80px auto 50px;
  }
#subscription_form h3 span{
  display:inline-block;
  position:relative;
  border-top:solid #707070 1px;
  padding: 5px 5px 0 0;
  }

#subscription_form h3 span::before{
  display:block;
  content: "";
  position:absolute;
  top:-2px;
  right:-5px;
  width:1px;
  height:20px;
  background-color:#707070;
  transform: rotate(-30deg);
  }
#subscription_form h3 span::after{
  display:block;
  content: "";
  position:absolute;
  top:16px;
  right:-130px;
  width:120px;
  height:1px;
  background-color:#707070;
  }
#subscription_form .agent,
#subscription_form .accept{
  margin-top:50px;
  }
#subscription_form #form table{
  margin:0 auto;
  }
/* ============ #offer ============ */
#offer .questionnaire li{
  list-style:disc;
  list-style-position:inside;
  }