/* =========================================================
   La-Lux Contact Form (Bright) : wrap_contact 専用
   - 必須バッジを赤く
   - mail_body(自動生成)を完全に非表示
   - 送信ボタンを中央＆大きく＆グラデでカッコよく
   - テーブル見出し(左)と必須を揃える
   ※これをCSSの一番最後へ
========================================================= */

:root{
  --lux-accent:  #2bb8ff;
  --lux-accent2: #ff4b86;
  --lux-ink:     #0b1220;
  --lux-muted:   rgba(11,18,32,.65);
  --lux-line:    rgba(11,18,32,.10);

  --lux-field-bg:#ffffff;
  --lux-field-bd:rgba(43,184,255,.35);
  --lux-field-tx:#0b1220;
  --lux-ph:      rgba(11,18,32,.40);

  --lux-req:     #ff3f7a;

  --lux-btn-grad: linear-gradient(135deg,#2bb8ff,#7a7bff);
  --lux-btn-text: #06101d;
}
.lux-contact  {
  width:90%;
  margin:0 auto;
}

/* ---- フォームのカード化 ---- */
.wpcf7 .wrap_contact{
  max-width: 980px;
  margin: 0 auto;
  color: var(--lux-ink);
  text-align:center;
margin-top: 100px;
  background:
    radial-gradient(1100px 520px at 12% 8%, rgba(43,184,255,.16), transparent 60%),
    radial-gradient(900px 480px at 92% 22%, rgba(255,75,134,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 18px;
  padding: 38px 34px;
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}
@media (max-width:768px){
  .wpcf7 .wrap_contact{ padding: 26px 18px; border-radius: 14px; }
}

/* ---- 見出し ---- */
.wpcf7 .wrap_contact .text_type{ color: var(--lux-muted); }
.wpcf7 .wrap_contact .tl_sec{
  margin: 22px 0 14px;
  padding-bottom: 10px;
  position: relative;
}
.wpcf7 .wrap_contact .tl_sec::after{
  content:"";
  display:block;
  height:2px;
  margin-top:10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(43,184,255,.65), rgba(255,75,134,.35), transparent);
}

/* ---- 必須バッジ：確実に赤 ---- */
.wpcf7 .wrap_contact .req{
  display:inline-block;
  border:1px solid var(--lux-req) !important;
  color: var(--lux-req) !important;
  background: rgba(255,63,122,.06);
  padding: .22em .55em;
  font-size: .85em;
  line-height: 1;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  margin-left: .6em;
  vertical-align: middle;
}

/* ---- テーブル（ラベルと必須を揃える） ---- */
.wpcf7 .wrap_contact .tbl_form{ width:100%; border-collapse:collapse; }
.wpcf7 .wrap_contact .tbl_form th,
.wpcf7 .wrap_contact .tbl_form td{
  padding: 18px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--lux-line);
}
.wpcf7 .wrap_contact .tbl_form th{
  width: 260px;
  text-align: left;
  font-weight: 800;
  color: var(--lux-ink);
  display:flex;
  align-items:center;
  justify-content:space-between; /* 左：ラベル / 右：必須 */
  gap: 12px;
}
.wpcf7 .wrap_contact .tbl_form th .req{ margin:0 !important; } /* th内は右端に固定 */

/* ---- 入力 ---- */
.wpcf7 .wrap_contact input[type="text"],
.wpcf7 .wrap_contact input[type="email"],
.wpcf7 .wrap_contact input[type="tel"],
.wpcf7 .wrap_contact input[type="date"],
.wpcf7 .wrap_contact select,
.wpcf7 .wrap_contact textarea{
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--lux-field-bd);
  background: var(--lux-field-bg);
  color: var(--lux-field-tx);
  box-shadow: 0 10px 26px rgba(11,18,32,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wpcf7 .wrap_contact input::placeholder,
.wpcf7 .wrap_contact textarea::placeholder{ color: var(--lux-ph); }

.wpcf7 .wrap_contact input:focus,
.wpcf7 .wrap_contact select:focus,
.wpcf7 .wrap_contact textarea:focus{
  outline: none !important;
  border-color: rgba(43,184,255,.70);
  box-shadow: 0 0 0 4px rgba(43,184,255,.12), 0 14px 36px rgba(11,18,32,.08);
  transform: translateY(-1px);
}

/* ---- チェック/ラジオ ---- */
.wpcf7 .wrap_contact input[type="checkbox"],
.wpcf7 .wrap_contact input[type="radio"]{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  width:18px !important;
  height:18px !important;
  margin:0 .45em 0 0 !important;
  vertical-align:middle !important;
  accent-color: var(--lux-accent) !important;
}
.wpcf7 .wrap_contact .box_radio .wpcf7-form-control{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-wrap: wrap;
}
.wpcf7 .wrap_contact .indent{ color: rgba(11,18,32,.58); }

/* ---- 子テーブル（来店予約） ---- */
.wpcf7 .wrap_contact .tbl_form_child{
  width:100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.wpcf7 .wrap_contact .tbl_form_child th,
.wpcf7 .wrap_contact .tbl_form_child td{
  border-bottom: 1px solid var(--lux-line);
  padding: 10px 10px;
  vertical-align: top;
}
.wpcf7 .wrap_contact .tbl_form_child td .inner{
  display:flex;
  align-items:center;
  gap: 8px;
}
.wpcf7 .wrap_contact .tbl_form_child td .inner .label_req{
  white-space: nowrap;
  font-weight: 700;
}
.wpcf7 .wrap_contact .tbl_form_child td .inner .req{ display:none !important; } /* 日付/時間の横の必須は消す */

/* 第1希望の下だけ必須表示 */
.wpcf7 .wrap_contact .tbl_form_child tr:first-child > th::after{
  content:"必須：日付・時間";
  display:inline-block;
  margin-top: 10px;
  padding: .22em .55em;
  border-radius: 8px;
  border:1px solid var(--lux-req);
  color: var(--lux-req);
  background: rgba(255,63,122,.06);
  font-size: .85em;
  font-weight: 800;
}

/* ---- ✅ mail_body を完全に消す（不要テキストエリア対策）---- */
.wpcf7 .wrap_contact textarea.mail_body{ display:none !important; }
.wpcf7 .wrap_contact .wpcf7-form-control-wrap.mail_body{ display:none !important; }

/* ---- ✅ 送信ボタン：input.wpcf7-submit が本体なので両方指定 ---- */
.wpcf7 .wrap_contact .wrap_btn{
  display:flex !important;
  justify-content:center !important;
  margin-top: 26px !important;
}
.wpcf7 .wrap_contact input.wpcf7-submit,
.wpcf7 .wrap_contact button.wpcf7-submit,
.wpcf7 .wrap_contact .btn_contact{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  cursor:pointer !important;

  padding: 18px 72px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;

  background-image: var(--lux-btn-grad) !important;
  color: #fff !important;

  box-shadow: 0 18px 45px rgba(43,184,255,.20), 0 10px 30px rgba(122,123,255,.14) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.wpcf7 .wrap_contact input.wpcf7-submit:hover,
.wpcf7 .wrap_contact button.wpcf7-submit:hover,
.wpcf7 .wrap_contact .btn_contact:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 22px 56px rgba(43,184,255,.24), 0 18px 46px rgba(122,123,255,.18) !important;
}

/* ---- スマホ：th/td縦積み ---- */
@media (max-width:768px){
  .wpcf7 .wrap_contact .tbl_form th,
  .wpcf7 .wrap_contact .tbl_form td{ display:block; width:100%; }
  .wpcf7 .wrap_contact .tbl_form th{
    display:block;
    padding-bottom: 8px;
  }
  .wpcf7 .wrap_contact .tbl_form th .req{
    margin-left: 10px !important;
  }
  .wpcf7 .wrap_contact input.wpcf7-submit,
  .wpcf7 .wrap_contact button.wpcf7-submit{
    width: 100% !important;
    max-width: 420px;
  }
}

/* =========================================================
   La-Lux（明るい）上書き：最終版
   - carace用CSSは残す
   - これを “最後” に置く
========================================================= */

:root{
  --lux-accent:  #2bb8ff;      /* 水色 */
  --lux-accent2: #ff4b86;      /* ピンク */
  --lux-ink:     #0b1220;      /* 文字 */
  --lux-muted:   rgba(11,18,32,.68);
  --lux-line:    rgba(11,18,32,.10);

  --lux-field-bg:#ffffff;
  --lux-field-bd:rgba(43,184,255,.30);
  --lux-field-tx:#0b1220;
  --lux-ph:      rgba(11,18,32,.42);

  --lux-req:     #ff3f7a;

  --lux-btn-grad: linear-gradient(135deg, #2bb8ff, #7a7bff);
  --lux-btn-text: #06101d;
}

/* ===== フォーム外枠（白っぽいLa-Lux） ===== */
.wpcf7 .wrap_contact{
  color: var(--lux-ink) !important;
  background:
    radial-gradient(1100px 520px at 10% 8%, rgba(43,184,255,.16), transparent 60%),
    radial-gradient(900px 480px at 92% 22%, rgba(255,75,134,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border: 1px solid rgba(11,18,32,.08) !important;
  border-radius: 18px;
  padding: 38px 34px;
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}

@media (max-width:768px){
  .wpcf7 .wrap_contact{ padding: 26px 18px; border-radius: 14px; }
}

/* ===== 見出し ===== */
.wpcf7 .wrap_contact .text_type{ color: var(--lux-muted) !important; }

.wpcf7 .wrap_contact .tl_sec{
  color: var(--lux-ink) !important;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.wpcf7 .wrap_contact .tl_sec::after{
  content:"";
  display:block;
  height:2px;
  margin-top:10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(43,184,255,.65), rgba(255,75,134,.35), transparent);
}

/* ===== 罫線 ===== */
.wpcf7 .wrap_contact .tbl_form th,
.wpcf7 .wrap_contact .tbl_form td,
.wpcf7 .wrap_contact .tbl_form_child th,
.wpcf7 .wrap_contact .tbl_form_child td{
  border-bottom-color: var(--lux-line) !important;
}

/* ===== th を見やすく＆「ラベル + 必須」を揃える（PC） ===== */
.wpcf7 .wrap_contact .tbl_form th{
  color: var(--lux-ink) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  justify-content:space-between; /* 左：ラベル / 右：必須 */
  gap:12px;
}
.wpcf7 .wrap_contact .tbl_form td{ vertical-align: middle; }

/* スマホは縦積みなので必須はラベル横に戻す */
@media (max-width:768px){
  .wpcf7 .wrap_contact .tbl_form th{ display:block; }
  .wpcf7 .wrap_contact .tbl_form th .req{
    display:inline-block;
    margin-left:10px !important;
  }
}

/* ===== 必須バッジ（赤が出ない対策：強制上書き） ===== */
.wpcf7 .wrap_contact .req{
  border: 2px solid var(--lux-req) !important;
  color:  var(--lux-req) !important;
  background: rgba(255,63,122,.06) !important;
  border-radius: 10px;
  padding: .22em .60em !important;
  font-weight: 800;
  line-height: 1;
}

/* ===== 入力欄 ===== */
.wpcf7 .wrap_contact input[type="text"],
.wpcf7 .wrap_contact input[type="email"],
.wpcf7 .wrap_contact input[type="tel"],
.wpcf7 .wrap_contact input[type="date"],
.wpcf7 .wrap_contact select,
.wpcf7 .wrap_contact textarea{
  background: var(--lux-field-bg) !important;
  border-color: var(--lux-field-bd) !important;
  color: var(--lux-field-tx) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(11,18,32,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wpcf7 .wrap_contact input::placeholder,
.wpcf7 .wrap_contact textarea::placeholder{
  color: var(--lux-ph) !important;
}

.wpcf7 .wrap_contact input:focus,
.wpcf7 .wrap_contact select:focus,
.wpcf7 .wrap_contact textarea:focus{
  outline: none !important;
  border-color: rgba(43,184,255,.70) !important;
  box-shadow:
    0 0 0 4px rgba(43,184,255,.12),
    0 14px 36px rgba(11,18,32,.08);
  transform: translateY(-1px);
}

/* チェック/ラジオのアクセント */
.wpcf7 .wrap_contact input[type="checkbox"],
.wpcf7 .wrap_contact input[type="radio"]{
  accent-color: var(--lux-accent) !important;
}

/* ラジオ行を綺麗に */
.wpcf7 .wrap_contact .box_radio .wpcf7-form-control{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.wpcf7 .wrap_contact .box_radio .wpcf7-list-item{
  margin:0 !important;
  display:inline-flex !important;
  align-items:center;
  gap:10px;
}
.wpcf7 .wrap_contact .box_radio .indent{
  width:100%;
  margin:10px 0 0 !important;
  color: var(--lux-muted) !important;
}

/* ===== ハニーポット＆mail_bodyを絶対に表示しない（←これで不要な入力欄が消える） ===== */
.hp-wrap,
.wpcf7 .wrap_contact .hp-wrap{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.wpcf7 .wrap_contact input[name="hp_field"],
.wpcf7 .wrap_contact textarea[name="hp_field"],
.wpcf7 .wrap_contact [name="mail_body"],
.wpcf7 .wrap_contact .mail_body{
  display:none !important;
}

/* ===== プライバシー同意：1列（横並び） ===== */
.wpcf7 .wrap_contact .wrap_agree{
  width:100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  flex-wrap:nowrap !important; /* PCは1行 */
}
.wpcf7 .wrap_contact .wrap_agree .agree_line{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
}
.wpcf7 .wrap_contact .wrap_agree .wpcf7-form-control.wpcf7-acceptance,
.wpcf7 .wrap_contact .wrap_agree .wpcf7-form-control.wpcf7-acceptance label,
.wpcf7 .wrap_contact .wrap_agree .wpcf7-list-item{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
}

/* スマホだけ折り返しOK */
@media (max-width:520px){
  .wpcf7 .wrap_contact .wrap_agree{
    flex-wrap:wrap !important;
  }
}

/* ===== 送信ボタン：中央・大きく・かっこよく ===== */
.wpcf7 .wrap_contact .wrap_btn{
  text-align:center !important;
  margin-top: 28px !important;
}

.wpcf7 .wrap_contact .btn_contact{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width: 320px;
  padding: 18px 64px !important;
  border-radius: 999px !important;
  background: var(--lux-btn-grad) !important;
  color: var(--lux-btn-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  border: none !important;
  box-shadow:
    0 16px 40px rgba(43,184,255,.18),
    0 12px 34px rgba(122,123,255,.12);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.wpcf7 .wrap_contact .btn_contact:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(43,184,255,.22),
    0 18px 46px rgba(122,123,255,.16);
}

@media (max-width:520px){
  .wpcf7 .wrap_contact .btn_contact{
    min-width: 100%;
  }
}