@charset "UTF-8";

/* /reservation/ 系固定ページ専用スタイル
   lp.css の counseling 周辺・関連グローバルを抜粋して LP のフォーム部分と見た目を一致させる
   変更時は lp.css と双方を確認すること */

/* /reservation/ 系はヘッダー・追従CTAを非表示（フッターは LP simplified footer を流用） */
body.reservation_page header,
body.reservation_page .fixed_buttons {
  display: none;
}

/* LP simplified footer — lp.css L4940-4956 を反映（ロゴ・コピー中央寄せ） */
body.reservation_page footer {
  padding: 7.5rem 0 4.5rem;
  background: var(--color-white);
}

body.reservation_page footer .logo {
  width: 20rem;
  margin: 0 auto;
}

body.reservation_page footer .copy {
  margin-top: 5.8rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: var(--regular);
  color: #cccccc;
}

/* SP時のスケール — LP と同じ html font-size に揃える
   公式は SP で calc(1000vw / 390) (1rem≒10px)、LP は calc(1000vw / 750) (1rem≒5.2px)
   reservation.css は LP の rem 値を流用しているため、SP表示時のみ html を LP と同じ計算式で上書き
   html に直接 reservation_page クラスを付与（header.php 側）して特異度勝負を確実にする */
@media screen and (max-width: 767px) {
  html.reservation_page,
  html.reservation_page body {
    font-size: calc(1000vw / 750);
  }
}

/* メインコンテナ - LP の #lp 相当
   common.css 側の main { padding-top: 10rem; } を無効化 */
body.reservation_page main {
  max-width: 75rem;
  margin: 0 auto;
  padding-top: 0;
  background: var(--color-white);
}

body.reservation_page .in {
  padding: 0 4rem;
}

/* 共通見出し（.df_ttl .ttl_h2 系）— lp.css L815-869, L3964-3978 を反映 */
body.reservation_page .df_ttl .ttl_h2 {
  margin-bottom: 8.8rem;
  font-family: var(--font-ja2);
  font-size: 4.8rem;
  letter-spacing: 0.05em;
}

body.reservation_page .df_ttl .ttl_h2 .en {
  position: relative;
  display: block;
  padding-left: 6rem;
  margin-bottom: 3.6rem;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  line-height: 1;
  color: var(--color-pink);
}

body.reservation_page .df_ttl .ttl_h2 .en::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  display: block;
  width: 3.4rem;
  height: 4.1rem;
  background: url(../img/common/ttl_icon.png) center/contain no-repeat;
  transform: translateY(-50%);
}

/* counseling — lp.css L4768-4937 */
.counseling {
  padding: 7rem 0 11rem;
  background: #fff9ee;
}

.counseling .df_ttl {
  text-align: center;
}

.counseling .ttl_h2 img {
  width: 51.7rem;
  display: inline-block;
}

.counseling .df_ttl .en {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.counseling table {
  width: 100%;
}

.counseling table td,
.counseling table th {
  display: block;
  width: 100%;
  font-size: 2.8rem;
}

.counseling table th {
  padding-top: 5.5rem;
  font-weight: var(--bold);
}

.counseling table tr:first-of-type th {
  padding-top: 0;
}

/* テーブル分割した場合の2個目以降のテーブル先頭行の余白を復活（入力・確認 両対応） */
.counseling .form_wrap > table:not(:first-of-type) tr:first-of-type th,
.counseling .form_wrap [data-class="wpcf7cf_group"] table tr:first-of-type th {
  padding-top: 5.5rem;
}

.counseling table th .rq {
  margin-left: 1.6rem;
  font-size: 2.4rem;
  font-weight: var(--medium);
  color: #fe6e6e;
  text-decoration: underline;
}

.counseling table td {
  padding-top: 1.5rem;
  font-size: 2.8rem;
  font-weight: var(--medium);
}

.counseling input:not([type="radio"]),
.counseling textarea {
  width: 100%;
  border-radius: 2.7rem;
  padding: 1rem 2.3rem;
  background: var(--color-white);
  font-size: 2.8rem;
  font-weight: var(--medium);
  letter-spacing: 0.04em;
}

.counseling input[type="date"]{
  height: 6.77rem;
  color: var(--color-txt);
}

.counseling textarea {
  min-height: 41.7rem;
}

.counseling .field {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.counseling .field+.field {
  margin-top: 1.9rem;
}

.counseling .field .ttl {
  margin: 0;
  min-width: max-content;
}

.counseling .field .ttl .rq {
  margin-left: 1.6rem;
  font-size: 2.4rem;
  font-weight: var(--medium);
  color: #fe6e6e;
  text-decoration: underline;
}

.counseling .button {
  outline: none !important;
  border: none;
}

.counseling .field .ttl+p {
  width: 100%;
}

.privacycheck {
  margin: 7.5rem 0 9rem;
}

.privacycheck p {
  font-size: 2.8rem;
  display: flex;
  align-items: center;
}

.privacycheck a {
  font-size: 2.8rem;
  text-decoration: underline;
}

.privacycheck .rq {
  font-size: 2.4rem;
  color: #fe6e6e;
  margin-left: 1rem;
  display: inline-block;
}

.privacycheck input {
  width: 6rem;
  height: 6rem;
  padding: 0;
  border-radius: 1rem;
  border: none;
}

.privacycheck input[type="checkbox"]:checked {
  background-color: var(--color-white);
}

.privacycheck input[type="checkbox"]:checked:before {
  border-color: var(--color-txt);
  border-width: .4rem;
  width: 1.5rem;
  height: 2.7rem;
}

.counseling .form_wrap .button_submit {
  background: url("../img/lp/btn-submit.png") no-repeat center;
  background-size: 100%;
  border-radius: 0;
  border: none;
  height: 11.4rem;
  text-indent: -9999px;
  cursor: pointer;
  margin-top: 9rem;
}

.wpcf7 form .wpcf7-response-output {
  font-size: 2.4rem;
  padding: 3rem;
  margin-top: 0;
}

/* form_wrap 確認画面側ボタン — lp.css L4988-5045 */
.form_wrap.-top .button_submit {
  background-image: url("../img/lp/btn-confirm.png");
}
.form_wrap.-confirm .button_submit {
  background-image: url("../img/lp/btn-submit.png");
}

.form_wrap.-confirm .button_previous {
  background: url("../img/lp/btn-back.png") no-repeat center;
  background-size: 100%;
  border-radius: 0;
  border: none;
  height: 11.4rem;
  text-indent: -9999px;
  cursor: pointer;
  margin-top: 4rem;
}

.form_wrap.-confirm table td {
  background-color: #ffffff;
  border-radius: 3rem;
  padding: 2rem;
  margin-top: 2rem;
}
.form_wrap.-confirm .field {
  gap: 3.5rem;
}

.form_wrap .field .u-flex {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  width: 100%;
}
.form_wrap .field .u-flex__item:nth-child(1),
.form_wrap .field .u-flex__item:nth-child(2) {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.form_wrap .field .u-flex__item select {
  border: none;
  font-size: 2.8rem;
  border-radius: 2.7rem;
  padding: 1rem 2.3rem;
  color: #000000;
}

.form_wrap .annotation {
  font-size: 1.9rem;
  line-height: 1.5;
  margin-top: 3rem;
}

.form_wrap .annotation.-num01 {
  margin: 1rem 0 3rem;
}

/* 和暦生年月日 — lp.css L5047-5127 */
.form_wrap.-top .birth-date {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.form_wrap.-top .birth-date__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 0;
}

.form_wrap.-top .birth-date br {
  display: none;
}

.form_wrap.-top .birth-date__item > p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.form_wrap.-top .birth-date__item .wpcf7-form-control-wrap {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
}

.form_wrap.-top .birth-date__item select,
.form_wrap.-top .birth-date__item input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 1rem 2.3rem;
  font-size: 2.8rem;
  font-weight: var(--medium);
  border: none;
  border-radius: 2.7rem;
  background-position: center right 0.8rem;
  background-size: 0.6rem auto;
  color: #000;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
}

/* select の擬似プレースホルダー（first_as_label の空 value 選択時） */
.form_wrap.-top .birth-date__item select:has(option[value=""]:checked) {
  color: #B1B9BA;
}

.form_wrap.-top .birth-date__suffix {
  font-size: 2.8rem;
  font-weight: var(--medium);
  color: var(--color-txt);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 個別エラー文言は非表示（4要素まとめて1項目扱い、赤枠で示す） */
.form_wrap.-top .birth-date .wpcf7-not-valid-tip {
  display: none;
}

.form_wrap.-top .birth-date select.wpcf7-not-valid,
.form_wrap.-top .birth-date select[aria-invalid="true"],
.form_wrap.-top .birth-date .wpcf7-not-valid select {
  box-shadow: inset 0 0 0 2px #fe6e6e;
}

/* チェックボックス全体の余白とレイアウト調整 — lp.css L5129-5183 */
.wpcf7-checkbox {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* ラベルのデザイン */
.wpcf7-form-control:not(.wpcf7-radio) .wpcf7-list-item label {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333;
}

/* デフォルトのチェックボックスを非表示 */
.wpcf7-list-item input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: 0;
}

/* 擬似要素でオリジナルチェックボックスを作成 */
.wpcf7-form-control:not(.wpcf7-radio) .wpcf7-list-item label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid #8cc652;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

/* チェック時のデザイン */
.wpcf7-list-item input[type="checkbox"]:checked + span::before {
  background-color: #8cc652;
  border-color: #8cc652;
}

/* チェックマーク */
.wpcf7-list-item input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.6rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wpcf7-radio .wpcf7-list-item.first {
  margin-left: 0;
}

/* ラジオボタン UI — lp.css L489-547 を反映（公式 common.css のサイズより大きく LP と統一） */
body.reservation_page input[type="radio"] {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--color-white);
  border: 1px solid #cccccc;
  border-radius: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: 0.2s;
  cursor: pointer;
  font-size: max(1.4rem, 10px);
}

body.reservation_page input[type="radio"]:checked {
  box-shadow: none;
}

body.reservation_page input[type="radio"]:checked:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100%;
  background: var(--color-advanced);
  transform: translate(-50%, -50%);
}

body.reservation_page label {
  cursor: pointer;
}

/* Thanks ページ — lp.css L4959-4985 を反映 */
body.reservation_page main#reservation.thanks {
  padding: 35rem 0 20rem;
  text-align: center;
  background: #fff9ee;
}

body.reservation_page main#reservation.thanks .lead {
  font-family: var(--font-ja2);
  font-weight: 400;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
}

body.reservation_page main#reservation.thanks .button_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 48rem;
  margin: 6rem auto 0;
  height: 9.4rem;
  border-radius: 10rem;
  background: var(--color-gr);
  border: none;
  font-size: 3rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--color-white);
}

/* LPフォームのラジオを flex 化（受診目的など複数選択肢の折り返し対応） */
.form_wrap .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.4rem;
  align-items: center;
}

.form_wrap .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}