@charset "UTF-8";

/* =========================================================
  共通（入力/確認/完了で使い回す）
========================================================= */
.ttl{
  position: relative;
  width: fit-content;
  margin: 0 auto 30px;
  padding-bottom: 15px;
  text-align: center;
  font-size: 45px;
  font-weight: 800;
  color: #393636;
}
.ttl::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 7px;
  background: #e77908;
  border-radius: 999px;
}

.taC{ text-align: center; }

.ds_no_pc{ display: none; }

/* --- フォームテーブル共通 --- */
.form_tbl table{
  max-width: 750px;
  margin: 0 auto;
  border: none;
}

.form_tbl th,
.form_tbl td{
  display: block;
  width: 100%;
  border: none;
}

.form_tbl th{
  padding: 0 0 5px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}

.form_tbl td{
  margin-bottom: 13px;
  font-size: 19px;
}

/* --- 入力UI共通 --- */
.form_tbl input,
.form_tbl select,
.form_tbl textarea{
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  background: #fff;
  border: 1px solid #d6dee7;
  border-radius: 8px;
}

.form_tbl td input,
.form_tbl td select,
.form_tbl td textarea{
  text-indent: 1em;
}

.form_tbl input:focus,
.form_tbl select:focus,
.form_tbl textarea:focus{
  outline: none;
}

.form_tbl textarea{
  resize: vertical;
}

/* --- 個別幅（必要なものだけ残す） --- */
.form_tbl input#floor_building{ width: 27%; padding: 10px 0; }
.form_tbl input#tel{ padding: 10px 0; }
.form_tbl input#zip{ width: 30%; padding: 10px 0; }

.form_tbl input.date1{ width: 37%; padding: 10px 0; margin-bottom: 10px; }
.form_tbl input.time1,
.form_tbl input.time2{ width: 37%; padding: 10px 0; }

/* 添付（見た目を崩さないため残す） */
.form_tbl input#attached{
  border: none;
  padding: 0 0 10px;
}

/* チェック/ラジオ */
input[type="checkbox" i]{ margin: 3px 3px 2% 0; }
input[type="checkbox" i]:first-child{ margin: 3px 3px 0 0; }

/* ※元CSSは「radioのmarginが25%」になっていて崩れやすいので、
   “特定レイアウト依存ならHTML側（label構造）で制御” が理想。
   ただし現状維持のため残します。 */
input[type="radio" i]{ margin: 3px 3px 0 25%; }
input[type="radio" i]:first-child{ margin: 0 3px 0 0; }

/* カスタムラジオ（.blue） */
input[type=radio]{
  position: relative;
  left: -5px;
  height: 15px;
  width: 15px;
  cursor: pointer;
  display: inline-block;
}
input[type=radio].blue{ border: 2px solid #c9c9c9; }
input[type=radio].blue:checked{ border: 2px solid #efb9ce; }
input[type=radio].blue:checked:before{ background: #efb9ce; }

/* ラジオのラベル装飾 */
td.radio label{
  background: #f1f1f1;
  color: #2A94D2;
  padding: 1.5% 2.5%;
  border-radius: 5px;
  font-weight: 600;
}
td.radio #sample{
  display: inline-block;
  margin-top: 20px;
}
td.radio #sample label{
  background: #fff;
  color: #000;
  padding: 0;
  border-radius: 0;
  font-weight: normal;
}

/* 住所系 */
.yubin{
  display: inline-block;
  width: 40% !important;
  margin-left: 2%;
}
.h-adr input,
.h-adr select{ margin-bottom: 10px; }
.h-adr input:last-child{ margin: 0; }

/* --- 送信ボタン共通 --- */
.submitbtn{
  position: relative;
  text-align: center;
  margin: 30px auto 0;
  max-width: 450px;
}

input[type=submit]{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  height: 70px;
  border-radius: 9999px;
  background: #d4872c;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

.submitbtn::after{
  content: "";
  position: absolute;
  right: 22px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .95;
}

/* --- 戻るボタン（共通） --- */
.backbtn{
  width: 57%;
  margin: 100px auto 60px;
  padding: 16px 5px 15px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
}
.backbtn a{ text-decoration: none; }
.backbtn a:link,
.backbtn a:visited{ color: #fff; }



/* br.sp */
br.sp{ display: none; }

/* =========================================================
  入力ページ
========================================================= */
#form{
  padding: 80px 0;
  background: var(--bg-gray);
}
#form form{ padding: 0; } /* SPで上書きする */

.form_tbl input#client{ width: 4%; }          /* ※2回書かれていたので1つに統合 */
.form_tbl input#living-tip2{ width: 10%; }

.form_tbl input.radio{ width: auto; }
.form_tbl input.pink{ padding: 0; }

/* =========================================================
  確認ページ
========================================================= */
#confirmation{
  padding: 80px 50px;
  background: var(--bg-gray);
}
#confirmation h1{ font-size: 25px; margin: 0 auto 20px; }

#confirmation #wrapper{
  padding: 50px;
  border-radius: 20px;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
}

/* 確認ページは左右2カラム */
#confirmation .form_tbl table{
  table-layout: fixed;
  width: 100%;
  max-width: 450px;
  border: none;
}
#confirmation .form_tbl th,
#confirmation .form_tbl td{
  display: inline-block;
  width: 50%;
  margin: 0;
}
#confirmation .form_tbl td{
  margin-bottom: 13px;
}

#confirmation input.send{
  border: none;
  width: 60%;
}

#confirmation .submitbtn{
  display: flex;
  align-items: center;
}
#confirmation .submitbtn::after{
  right: 33px; /* 確認ページだけ位置違い */
}

/* 戻る（確認ページ内のinput） */
#confirmation .form_tbl input.backbtn{
  background: #666;
  margin: 0;
  width: 35%;
  border-radius: 9999px;
  height: 70px;
}



/* 既存の特殊指定（元CSSのまま残す） */
.confirmation #wrapper .form_tbl tr:nth-last-of-type(2) td{
  border: none;
  padding-bottom: 0;
}

/* =========================================================
  完了ページ
========================================================= */
#finish{
  padding: 80px 50px;
  background: var(--bg-gray);
}
#finish h1{ font-size: 25px; margin: 0 auto 20px; }

#finish #wrapper{
  padding: 50px;
  border-radius: 20px;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
}

/* finish内の案内文 */
#finish section p{
  line-height: 1.5rem;
  margin-bottom: 20px;
}

/* finishの戻るリンク（最終仕様：リンク風） */
#finish p.backbtn{
  background: none;
  margin-top: 22px;
  margin-bottom: 0;
  box-shadow: none;
  font-size: 1.2rem;
  padding: 0;
  width: auto;
}
#finish p.backbtn a{
  color: var(--accent);
  text-decoration: underline;
}

html, body {
    height: 100%;
  }
  
  body {
    display: flex;
    flex-direction: column;
  }
  #finish {
    flex: 1;
    background-color: var(--bg-gray);
  }


/* =========================================================
  SP（共通 + 各ページ）
========================================================= */
@media (max-width: 767px){
  .ttl{
    font-size: 30px;
    padding-bottom: 20px;
  }
  .ttl::after{
    width: 90px;
    height: 6px;
  }

  #form{ padding: 50px 0; }
  #form form{ padding: 0 10px; }

  .form_tbl th{ font-size: 16px; }

  .backbtn{ font-size: 3.5vw; }

  .ds_no_pc{ display: block; }
  .ds_no_sp{ display: none; }

  input[type="checkbox" i]{ margin: 5px 3px 0 0; }

  form p.taC{ margin: 0 auto; }

  input[type=submit]{ height: 60px; }
  #confirmation .form_tbl input.backbtn{ height: 60px; width: 35%; }

  input[type=radio]{ left: 0; height: 10px; width: 10px; }
  br.sp{ display: block; }

  .form_tbl td.radio.over{ line-height: 2.7rem; }

  .form_tbl input#living-tip2{ width: 20%; }
  #confirmation .form_tbl th, #confirmation .form_tbl td{
    width: 100%;
  }
  #confirmation .form_tbl th {
    font-size: 14px;
    color: var(--muted);
}

  #confirmation,
  #finish{
    padding: 50px 18px;
  }
  #confirmation #wrapper,
  #finish #wrapper{
    padding: 30px 18px;
  }
}

@media screen and (max-width: 640px){
  .confirmation h2,
  #finish h2{
    width: 100%;
    padding: 15% 0 7%;
  }
}