/*
Theme Name: any theme
Theme URI: https://tcd-theme.com/tcd072
Template: noel_tcd072
Author: TCD
Author URI: https://tcd-theme.com/
Description: The WordPress theme "NOEL" was developed with the concept of a beauty care salon website. This theme is beautiful and clean. The coupon function and the staff page that you can see their faces make you feel relieved.
Version: 1.21.1775524145
Updated: 2026-04-07 10:09:05

*/




/* ============================================================
   予約フォーム カスタマイズCSS：TCD Noel最適化版
   ============================================================ */

/* --- 1. カラー・定数定義 --- */
:root {
  /* TCD Noelの雰囲気に合わせて微調整（元の色味を活かしています） */
  --rsv-accent:       #b08d6e;   /* メインカラー */
  --rsv-accent-light: #f7f0e8;   /* 選択時の背景 */
  --rsv-border:       #ddd5cc;   /* 枠線 */
  --rsv-bg:           #faf8f5;   /* ブロック背景 */
  --rsv-text:         #2c2c2c;   /* 文字色 */
}


.page-id-72 .wpcf7 { margin: 0 0 2.5em !important; border: none; background: #fff; }
.page-id-72 .wpcf7 form { margin: 1.5em 1.5em 0; }


/* --- 2. エラーメッセージの二重表示・位置ズレ徹底修正 --- */

/* フォームの上下に出る「まとめメッセージ」を完全に消去 */
/*
.wpcf7-response-output,
.wpcf7-validation-errors,
div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
    display: none !important;
}
*

/* フォームの枠外（左上など）に飛んでいく個別エラーを非表示 */
.wpcf7 > .wpcf7-not-valid-tip {
    display: none !important;
}

/* 入力欄のすぐ下にエラーを強制配置するための構造設定 */
.wpcf7-form-control-wrap {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
}

/* 入力欄の直下に出るエラーメッセージのデザイン */
.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    display: block !important;
    color: #b94040 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin-top: 5px !important;
    order: 99 !important; /* HTMLの順序に関わらず一番下に表示 */
    text-align: left !important;
}

/* --- 3. 全体レイアウト --- */
.rsv-form-wrap {
  max-width: 100%;
  margin: 0 auto;
  color: var(--rsv-text);
  line-height: 1.6;
  font-family: inherit; /* TCD Noelの美しいフォント（明朝体など）を継承 */
}

.rsv-block {
  margin-bottom: 30px;
  padding: 24px 20px;
  background-color: var(--rsv-bg);
  border-radius: 10px;
}

.rsv-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.rsv-block-head p { display: flex; align-items: center; margin: 0; }

.rsv-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: var(--rsv-accent);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  border-radius: 50%;
  flex-shrink: 0;
}

.rsv-block-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 0 10px;
}

.rsv-required {
  background: #b94040;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

.rsv-note {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.rsv-field-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.rsv-mt { margin-top: 20px; }

/* --- 4. カード型ラジオボタン --- */
/* TCD特有のラジオボタンCSSを上書きするために!importantを維持 */
.rsv-card-radio.wpcf7-form-control {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  order: 1 !important; /* エラーより上に配置 */
}

.rsv-card-radio .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
  flex: 1 1 calc(50% - 5px) !important; /* モバイル2列 */
}

.rsv-card-radio input[type="radio"],
.rsv-card-radio input[type="checkbox"] {
  display: none !important; /* デフォルトのボタンを隠す */
}

.rsv-card-radio .wpcf7-list-item label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 85px !important;
  margin: 0 !important;
  padding: 15px 5px !important;
  background: #fff !important;
  border: 1.5px solid var(--rsv-border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: 0.2s ease !important;
  box-sizing: border-box !important;
}

.rsv-card-radio .wpcf7-list-item label:hover {
  background-color: var(--rsv-accent-light) !important;
}

/* 選択時のスタイル */
.rsv-card-radio .wpcf7-list-item label:has(input:checked) {
  background-color: var(--rsv-accent-light) !important;
  border-color: var(--rsv-accent) !important;
  box-shadow: 0 0 0 2px var(--rsv-accent) !important;
}

.rsv-card-radio .wpcf7-list-item-label {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 640px) {
.rsv-card-radio .wpcf7-list-item-label {
  font-size: 14px;
}
}

.rsv-card-radio .wpcf7-list-item-label::before {
  display: block !important;
  font-size: 26px !important;
  margin-bottom: 5px !important;
  line-height: 1 !important;
}

/* --- 5. 各グループの絵文字アイコン --- */
.rsv-group-visit .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_01.png) no-repeat; background-size: cover; }
.rsv-group-visit .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_02.png) no-repeat; background-size: cover; }

.rsv-group-subject .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_07.png) no-repeat; background-size: cover; }
.rsv-group-subject .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_08.png) no-repeat; background-size: cover; }
.rsv-group-subject .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_09.png) no-repeat; background-size: cover; }
.rsv-group-subject .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_10.png) no-repeat; background-size: cover; }
.rsv-group-subject .wpcf7-list-item:nth-child(5) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_16.png) no-repeat; background-size: cover; }

.rsv-group-plan .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_11.png) no-repeat; background-size: cover; }
.rsv-group-plan .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_12.png) no-repeat; background-size: cover; }
.rsv-group-plan .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_13.png) no-repeat; background-size: cover; }
.rsv-group-plan .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_14.png) no-repeat; background-size: cover; }
.rsv-group-plan .wpcf7-list-item:nth-child(5) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_15.png) no-repeat; background-size: cover; }

.rsv-group-request .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_03.png) no-repeat; background-size: cover; }
.rsv-group-request .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_04.png) no-repeat; background-size: cover; }
.rsv-group-request .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_05.png) no-repeat; background-size: cover; }
.rsv-group-request .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(https://studio-any.com/wp/wp-content/uploads/2026/04/form_icon_06.png) no-repeat; background-size: cover; }

/* --- 6. 時間帯（小さいカード）補完部分 --- */
.rsv-card-sm.wpcf7-form-control {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.rsv-card-sm.wpcf7-form-control .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
  flex: 1 1 calc(25% - 8px) !important; /* PCは4列 */
}

.rsv-card-sm.wpcf7-form-control .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 5px !important;
  background: #fff !important;
  border: 1px solid var(--rsv-border) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: 0.2s ease !important;
  box-sizing: border-box !important;
}

.rsv-card-sm.wpcf7-form-control input[type="radio"],
.rsv-card-sm.wpcf7-form-control input[type="checkbox"] {
  display: none !important;
}

.rsv-card-sm.wpcf7-form-control .wpcf7-list-item label:hover {
  background-color: var(--rsv-accent-light) !important;
}

.rsv-card-sm.wpcf7-form-control .wpcf7-list-item label:has(input:checked) {
  background-color: var(--rsv-accent) !important;
  color: #fff !important;
  border-color: var(--rsv-accent) !important;
}

/* スマホ対応（小さいカードを2列に変更） */
@media screen and (max-width: 599px) {
  .rsv-card-sm.wpcf7-form-control .wpcf7-list-item {
    flex: 1 1 calc(50% - 4px) !important; 
  }
}