/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://example.com/
Description: Twenty Twenty-Three の子テーマ（CSSのみ）
Author: あなたの名前
Template: twentytwentythree
Version: 1.0
*/

body {
  background-color: #f9f9f9;
}

/* Contact Form 7 入力欄の共通スタイル調整 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  line-height: 1.5;
}
/* 入力欄全体を100%幅に統一 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  line-height: 1.5;
}
/* ラジオ・チェックボックスは除外して自然な幅に */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  transform: translateY(1px);
}
/* 送信ボタンのみ除外（中央寄せ・固定幅） */
.wpcf7 input[type="submit"] {
  width: auto;
  padding: 10px 24px;
  display: inline-block;
  cursor: pointer;
}
p.has-text-align-right {
    display: none;
}

/* value="未選択" を含むリスト項目全体を非表示にする */
.wpcf7-list-item input[value="未選択"] {
  display: none !important;
}

.wpcf7-list-item input[value="未選択"] ~ .wpcf7-list-item-label {
  display: none !important;
}

/* 念のため親の .wpcf7-list-item 自体も非表示にする（より確実） */
.wpcf7-list-item:has(input[value="未選択"]) {
  display: none !important;
}

/* 利用規約のボックスを初期状態で非表示にする */
.agreement-box {
    display: none;
    margin-bottom: 15px;
}

/* 展開トリガーのスタイル（クリックできることを示す） */
.agreement-toggle {
    cursor: pointer;
    color: #0073aa; /* リンクのような色に */
    display: inline-block;
    padding-left: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
    background-repeat: no-repeat;
    background-position: left center;
}

/* 展開後の矢印の向きをCSSで制御（クラス.openをJSで付与） */
.agreement-toggle.open {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
}

/* ============================
   🎨 色の定義（わかりやすい階層）
============================= */
:root {
  --c-deep: #0A5F79;     /* メインカラー 深い青 */
  --c-mid:  #2F7E90;     /* 中間トーン 落ち着いた青緑 */
  --c-light:#E9F5F8;     /* 薄い水色背景 */
  --c-gray: #3A4A4F;     /* テキストグレー */
}

/* ============================
   H2（セクション大見出し）
============================= */
.section-title {
  font-size: 1.8rem;
  font-weight: 800;
  padding: 0.6em 0.8em;
  margin-top: 2.2em;
  margin-bottom: 1em;
  background: linear-gradient(to right, var(--c-deep) 0%, var(--c-deep) 12px, var(--c-light) 12px, var(--c-light) 100%);
  color: var(--c-deep);
}

/* ============================
   H3（中見出し）
============================= */
.sub-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--c-mid);
  color: var(--c-mid);
}

/* ============================
   H4（小見出し）
============================= */
.small-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  color: var(--c-gray);
  position: relative;
  padding-left: 1.2em;
}

.small-title::before {
  content: "▹";
  color: var(--c-mid);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

/* ============================
   ✔ チェックリスト
============================= */
.check-list {
  list-style: none;
  padding-left: 0;
  margin: 1em 0;
}

.check-list li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.7em;
  font-weight: 500;
  color: var(--c-gray);
}

.check-list li::before {
  content: "✔";
  color: var(--c-mid);
  color: #D6456F;
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ============================
   ⭐ 施術を受けた方の声（カード型・前のデザイン）
============================= */
.voice-list {
  list-style: none;
  padding-left: 0;
}

.voice-list li {
  padding: 1.1em 1.2em;
  margin-bottom: 1em;
  background: #FAFCFD;
  border: 1px solid #D1E6EC;
  border-radius: 6px;
  line-height: 1.6;
  color: var(--c-gray);
}

.voice-list strong {
  color: var(--c-gray);
}

/* ============================
   📘 料金リスト
============================= */
.price-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1em;
}

.price-list li {
  padding: 0.7em 0.9em;
  margin-bottom: 0.6em;
  background: var(--c-light);
  border-left: 5px solid var(--c-mid);
  border-radius: 4px;
  font-weight: 600;
  color: var(--c-gray);
}

/* ============================
   スマホ最適化
============================= */
@media (max-width: 600px) {
  .section-title {
    font-size: 1.5rem;
  }
  .sub-title {
    font-size: 1.2rem;
  }
  .voice-list li {
    font-size: 0.95rem;
  }
}
/* 特別割引ボックス（サイズUP + パディング強化 + 価格強調） */
.special-offer {
    display: block;
    padding: 0.1em 1.8em;
    /* margin: 0; */
    background: #FDE8EF;
    border-left: 10px solid #D6456F;
    border-radius: 10px;
    color: #C43661;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.45;
}

/* 価格部分をもっと大きく＋強調色 */
.special-offer small {
  display: block;
  margin-top: 0.5em;
  font-size: 1.4rem;    /* ← 1.4→1.6にしても可 */
  font-weight: 700;
  color: #D6456F;       /* 濃いピンクで視認性UP */
  letter-spacing: 0.02em;
}

.sub-catch {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #C43661;           /* ピンク強調 */
  margin-top: 0.5em;
  margin-bottom: 1.2em;
  line-height: 1.7;
  padding: 0.8em 0;
  border-left: 6px solid #C43661; /* 左ラインで視線誘導 */
  padding-left: 0.9em;
}