@charset "UTF-8";

/* ==========================================================================
   共通スタイル — Mansion Catalog (固定ページ / LP / メディアサイト共通)
   normalize → variables → base → ★common → [page or lp-common → lp/page]

   ここには「固定ページ・LP・メディアサイトの全てで使える」コンポーネントのみ置く。
   LP でしか使わないもの (c-button / c-button-wrap / c-chat / bs-schedule 等) は
   src/styles/lp/lp-common.css へ。
   ========================================================================== */


/* ==========================================================================
   コンポーネント (c-*)
   ========================================================================== */

/* ============================================
   セクション見出し (c-heading)
   ============================================ */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: center;
}

.c-heading__sub {
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: var(--line-height-snug);
}

.c-heading__title {
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: var(--line-height-normal);
}

.c-heading__title::before,
.c-heading__title::after {
  content: "";
  display: inline-block;
  width: 0.143rem;
  height: 1.429rem;
  margin-inline: var(--space-sm);
  background-color: var(--color-ink);
  vertical-align: middle;
}

.c-heading__title::before {
  transform: rotate(-30deg);
}

.c-heading__title::after {
  transform: rotate(30deg);
}


/* ============================================
   マーカー (c-mark) — テキスト下線ハイライト
   ============================================ */
.c-mark {
  font-weight: var(--font-weight-bold);
  background: linear-gradient(transparent 60%, rgba(var(--color-yellow-rgb), 0.5) 0%);
}

.c-mark--pink {
  color: var(--color-pink);
  font-weight: var(--font-weight-bold);
  background: none;
}


/* ============================================
   カード (c-card)
   ============================================ */
.c-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
}


/* ============================================
   情報テーブル (c-table)
   ============================================ */
.c-table {
  width: 100%;
  border-collapse: collapse;
}

.c-table__row {
  display: grid;
  grid-template-columns: 35% 65%;
  border-top: 1px solid var(--color-gray-200);
}

.c-table__row:last-child { border-bottom: 1px solid var(--color-gray-200); }

.c-table__th,
.c-table__td {
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

.c-table__th { font-weight: var(--font-weight-bold); }


/* ============================================
   区切り線 (c-divider)
   ============================================ */
.c-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--color-gray-200);
}

.c-divider--dashed {
  height: 0;
  border-top: 1px dashed var(--color-gray-300);
  background-color: transparent;
}


/* ==========================================================================
   フォーム (c-form)
   アクセント色は :root の `--color-accent` を参照。
   ページ側で `:root { --color-accent: var(--color-pink); ... }` で上書き。
   `.p-form--orange` はページの色に関係なく Form 内だけオレンジに固定する
   モディファイア (例: 予約事前アンケート)。
   ========================================================================== */

.p-form--orange {
  --color-accent:     var(--color-orange);
  --color-accent-rgb: var(--color-orange-rgb);
  /* submit 背景は共通 `var(--gradient-pink)` を参照するので、ここでも上書きしておく */
  --gradient-pink:    var(--gradient-orange);
}

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  width: 100%;
}

.c-form__title {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  text-align: center;
  line-height: var(--line-height-normal);
}

.c-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.c-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.c-form__required {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.143rem 0.571rem;
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
}

.c-form__control {
  display: block;
  width: 100%;
}

/* c-form__control / c-form__select 内部のネイティブ入力要素に枠付け。
   ラッパーではなく <input>/<textarea>/<select> 自体に適用することで
   MW WP Form が出力するネイティブ枠との二重枠を防ぐ。 */
.c-form__control > input,
.c-form__control > textarea,
.c-form__control > select {
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-family: inherit;
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-base);
}

.c-form__control > input:focus,
.c-form__control > textarea:focus,
.c-form__control > select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.c-form__control > textarea {
  min-height: 8rem;
  line-height: var(--line-height-relaxed);
  resize: vertical;
}

.c-form__select > select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
                    linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.143rem) 50%, calc(100% - 0.857rem) 50%;
  background-size: 0.429rem 0.429rem;
  background-repeat: no-repeat;
  padding-right: var(--space-3xl);
}

/* iOS Safari 対策: hidden 属性の <option> を選択リストからも確実に消す */
.c-form select option[hidden],
.buf-form select option[hidden] {
  display: none;
}

/* iOS Safari 対策: フォーカス時の自動ズームを防ぐ。
   iOS は input/select/textarea の font-size が 16px 未満だとズームしてしまう。
   `@supports (-webkit-touch-callout: none)` は iOS Safari のみマッチ。 */
@supports (-webkit-touch-callout: none) {
  .c-form__control > input,
  .c-form__control > textarea,
  .c-form__control > select,
  .buf-form input[type="text"],
  .buf-form input[type="email"],
  .buf-form input[type="tel"],
  .buf-form input[type="number"],
  .buf-form input[type="url"],
  .buf-form input[type="password"],
  .buf-form input[type="search"],
  .buf-form select,
  .buf-form textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   Radio / Checkbox (複数選択肢: .c-form__choices)
   bs-schedule__slot-link と同じ「トグルボタン」仕様:
     未選択: 白 + gray-200 枠 + 薄影
     hover:   accent 枠 + 影 + 浮き上がり
     選択中: accent 塗り + 白文字 + 強い影
   ネイティブ input は視覚非表示 (label 内に残してクリックは有効)
   ========================================================================== */

.c-form__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  font-size: var(--font-base);
  color: var(--color-ink);
}

.c-form__choices--1col { grid-template-columns: 1fr; }
.c-form__choices--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* buf_form は <span class="buf-form__radio-group"> の中に各 <label> を入れて出力するため、
   choices grid の直接の子が group 1 個になり grid 配置が崩れる。
   display: contents で group を透過させ、中の label を grid item として扱う。 */
.c-form__choices .buf-form__radio-group,
.c-form__choices .buf-form__checkbox-group {
  display: contents;
}

/* choices のネイティブ input は視覚非表示 (label 内に残しクリックは維持) */
.c-form__choices input[type="radio"],
.c-form__choices input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* 個別ラジオ/チェックボックス (= <label class="buf-form__radio">) のボックス装飾 */
.c-form__choices .buf-form__radio,
.c-form__choices .buf-form__checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base);
}

.c-form__choices .buf-form__radio:hover,
.c-form__choices .buf-form__checkbox:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 10px rgba(var(--color-accent-rgb), 0.18);
}

.c-form__choices .buf-form__radio:has(input:checked),
.c-form__choices .buf-form__checkbox:has(input:checked) {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 10px rgba(var(--color-accent-rgb), 0.25);
  transform: translateY(-1px);
}


/* ==========================================================================
   個人情報同意 (.c-form__radio) — 単一の大クリック領域
   背景/枠/クリック領域は <label> に当てる。こうすることで visual box の
   どこをタップしてもラジオが反応する (div 外周のテキスト以外を叩いても
   反応しない問題を回避)。
   ========================================================================== */

.c-form__radio {
  font-size: var(--font-base);
  color: var(--color-ink);
}

/* buf_form は <span class="buf-form__radio-group"> でラップするため、
   中の label が block レベルで 100% 幅になるよう group も透過させる。 */
.c-form__radio .buf-form__radio-group {
  display: block;
  width: 100%;
}

/* buf_form では <label class="buf-form__radio"> が直接ラジオ単位 = クリック領域。
   ラジオ <input> とテキスト <span> を横並び中央揃えにする。 */
.c-form__radio .buf-form__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background-color: rgba(var(--color-accent-rgb), 0.04);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-md);
  /* テキストと radio の視覚中心を揃えるため行ボックスを font サイズに詰める */
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.c-form__radio .buf-form__radio:hover {
  background-color: rgba(var(--color-accent-rgb), 0.08);
}

.c-form__radio .buf-form__radio-text {
  display: inline-block;
  line-height: 1;
}

/* カスタム大きめ radio (白丸 → checked で accent 塗り + 白 ✓) */
.c-form__radio input[type="radio"] {
  position: relative;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 1.714rem;
  height: 1.714rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.c-form__radio input[type="radio"]:checked {
  background-color: var(--color-accent);
}

.c-form__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.429rem;
  height: 0.857rem;
  border: solid var(--color-white);
  border-width: 0 0.214rem 0.214rem 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.c-form__policy {
  max-height: 4rem;
  padding: var(--space-lg);
  overflow-y: auto;
  font-size: var(--font-xs);
  line-height: var(--line-height-loose);
  color: var(--color-ink);
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius-md);
}

.c-form__policy h5,
.c-form__policy h6 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}

.c-form__policy p  { margin-bottom: var(--space-sm); }

.c-form__policy ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-sm);
  list-style: decimal;
}

.c-form__note {
  padding: var(--space-lg);
  font-size: var(--font-sm);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  background-color: rgba(var(--color-yellow-rgb), 0.15);
  border: 0.143rem solid var(--color-yellow);
  border-radius: var(--border-radius-md);
}

/* BoostUp Form のバリデーションエラー文言 (例: "未入力です。")
   LP 側で `--color-accent` を上書きするとそれに追従して表示色が切り替わる。 */
.c-form .error,
.buf-form .error,
.buf-form__errors {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}


/* ==========================================================================
   BoostUp Form ボタン (戻る / 次へ / 確認 / 送信)
   c-form__submit のテーマデザインを共有しつつ、back だけグレーで打ち消し
   ========================================================================== */

/* 戻るボタン: submit と同じ形だが背景は gray */
button.buf-form__button--back.c-form__submit,
input[type="submit"].buf-form__button--back.c-form__submit {
  background: var(--color-gray-200);
  background-image: none;
  color: var(--color-ink);
  box-shadow: none;
}
button.buf-form__button--back.c-form__submit:hover,
input[type="submit"].buf-form__button--back.c-form__submit:hover {
  background: var(--color-gray-300);
  background-image: none;
}

/* actions 行: 戻る + 次へ を横並びに */
.buf-form__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.buf-form__actions > button {
  flex: 1 1 0;
}


/* ==========================================================================
   ユーティリティ (u-*)
   ========================================================================== */

.__lang-en { font-family: var(--ff-en); }

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

.u-mt-md  { margin-top: var(--space-md); }
.u-mt-lg  { margin-top: var(--space-lg); }
.u-mt-xl  { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
.u-mt-3xl { margin-top: var(--space-3xl); }

.u-mb-md  { margin-bottom: var(--space-md); }
.u-mb-lg  { margin-bottom: var(--space-lg); }
.u-mb-xl  { margin-bottom: var(--space-xl); }
.u-mb-2xl { margin-bottom: var(--space-2xl); }
.u-mb-3xl { margin-bottom: var(--space-3xl); }
.u-mb-4xl { margin-bottom: var(--space-4xl); }