/**
 * 記事・固定ページ用パターン補助CSS（Phase 2）
 * コアブロックの標準サポート（背景色・角丸など）で表現できない、
 * アイコン円・接続線・アラート枠などの装飾だけをここで補う。
 * 固定ページ・投稿でのみ読み込まれる（inc/patterns.php）ため、トップページには影響しない。
 * すべて cwt- プレフィックスのクラスのみを対象にする（既存クラスとの衝突回避）。
 */

/* ----------------------------------------------------------------
   本文コンテナ幅（記事・固定ページ共通）
   the_content() の出力（single.php / page.php の .entry-content）は
   ブロックエディタの「制約レイアウト」を自動では持たないため、
   素の段落・見出しなどが画面幅いっぱいに広がってしまう。
   ここで theme.json の contentSize / wideSize に合わせて幅を与える。
   align:full（is-style-section-* の背景セクションや MVブロック）は
   通常どおり画面幅いっぱいに表示できるようにする。
   トップページ（front-page.php）は .entry-content を使わないため影響しない。
   ---------------------------------------------------------------- */
.entry-content {
  display: grid;
  grid-template-columns: 1fr min(var(--wp--style--global--wide-size, 1200px), 100% - 40px) 1fr;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .entry-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.entry-content > * {
  grid-column: 2;
}
.entry-content > .alignwide {
  grid-column: 1 / 4;
  width: min(1200px, 100%);
  justify-self: center;
}
.entry-content > .alignfull,
.entry-content > .cwt-mv {
  grid-column: 1 / 4;
  width: 100%;
}
/*
 * custom/mv-block（.cwt-mv）や is-style-section-*（align:full）が
 * <section>（1h2=1セクション構造）の中にネストして配置された場合、
 * grid-column によるフルブリードはグリッドの直接の子にしか効かず、
 * WordPress core標準の .alignfull（負のマージンでビューポート基準に広げる手法）も
 * 親要素がすでに contentSize 幅に制約された状態だと正しく機能しない
 * （50%の基準が親のwidthになってしまい、画面端まで届かない）。
 * そのため、ネストした場合はビューポート基準のはみ出しテクニックを明示的に再適用する。
 */
.entry-content > section > .cwt-mv,
.entry-content > section > .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/*
 * ==== 編集画面（ブロックエディタ）向けの同等ルール ====
 * ブロックエディタの実際のキャンバスは iframe ではなく、通常のページ内に
 * 直接描画されている（.editor-styles-wrapper > .is-root-container）。
 * .entry-content というクラス自体がエディタ側には存在しないため、
 * 以下の「ブロック間の縦マージン」「セクションのpadding」ルールをここで
 * .entry-content 向けに書いても編集画面にはまったく反映されず、
 * 管理画面とフロント表示で余白の見え方が食い違ってしまっていた
 * （実際にエディタで検証したところ、全ブロックが WordPress コアの
 * 既定値である一律 24px の間隔になっていた）。
 * そのため、以下すべての「ブロック間の縦マージン」「セクションのpadding」
 * ルールは .entry-content と .is-root-container の両方に対して指定する。
 * （幅のグリッド指定だけは、WordPress core標準の contentSize 制約が
 * エディタ側にもともと効いているため、ここで重複対応する必要はない）
 */
.is-root-container > .cwt-mv,
.is-root-container > section > .cwt-mv,
.is-root-container > section > .alignfull {
  width: 100%;
}

/*
 * ブロック間の縦マージン（ブロックゲージ）。
 * reset.css の `* { margin: 0; }` により、段落・見出し・グループなど
 * あらゆる要素の既定マージンがゼロになっているため、これが無いと
 * .entry-content 直下のブロック同士がまったく余白なく詰まって並んでしまう。
 * スペーサーブロックを都度手動で挟まなくてもよいよう、ここで一括して確保する。
 * theme.json の spacingSizes プリセットを流用し、独自の値は増やさない。
 */
.entry-content > *,
.entry-content > section > *,
.is-root-container > *,
.is-root-container > section > * {
  margin-top: var(--wp--preset--spacing--40, 32px);
}
.entry-content > *:first-child,
.entry-content > section > *:first-child,
.is-root-container > *:first-child,
.is-root-container > section > *:first-child {
  margin-top: 0;
}
@media (max-width: 767px) {
  .entry-content > *,
  .entry-content > section > *,
  .is-root-container > *,
  .is-root-container > section > * {
    margin-top: var(--wp--preset--spacing--30, 24px);
  }
}

/*
 * 「見出し＋本文」のような組み合わせは、上の一律ギャップだと離れすぎて
 * 見出しとその中身の対応関係が読み取りにくくなる。
 * 見出し直後・アイキャッチラベル直後だけは詰めて、ひとまとまりに見せる。
 * （.entry-content > .wp-block-heading + * のほうが .entry-content > * より
 * 詳細度が高いので、上の一律ルールを個別に上書きできる）
 * .entry-content > section > * は、h2ごとに <section> でまとめた場合
 * （1セクション1h2の構造化マークアップ）でも同じ緩急が効くようにするための対応。
 */
.entry-content > .wp-block-heading + *,
.entry-content > section > .wp-block-heading + *,
.is-root-container > .wp-block-heading + *,
.is-root-container > section > .wp-block-heading + * {
  margin-top: var(--wp--preset--spacing--20, 16px);
}
.entry-content > .is-style-eyebrow + *,
.entry-content > section > .is-style-eyebrow + *,
.is-root-container > .is-style-eyebrow + *,
.is-root-container > section > .is-style-eyebrow + * {
  margin-top: var(--wp--preset--spacing--10, 8px);
}

/*
 * is-style-sub（小見出し）直後だけは、見出し全般の16pxより少し広めに24pxを確保する。
 * .wp-block-heading + * と同じ詳細度（クラス1つ）だとソート順に依存してしまうため、
 * .wp-block-heading.is-style-sub を2クラス指定にして詳細度で確実に上書きする。
 */
.entry-content > .wp-block-heading.is-style-sub + *,
.entry-content > section > .wp-block-heading.is-style-sub + *,
.is-root-container > .wp-block-heading.is-style-sub + *,
.is-root-container > section > .wp-block-heading.is-style-sub + * {
  margin-top: var(--wp--preset--spacing--30, 24px);
}
@media (max-width: 767px) {
  .entry-content > .wp-block-heading.is-style-sub + *,
  .entry-content > section > .wp-block-heading.is-style-sub + *,
  .is-root-container > .wp-block-heading.is-style-sub + *,
  .is-root-container > section > .wp-block-heading.is-style-sub + * {
    margin-top: var(--wp--preset--spacing--20, 16px);
  }
}

/*
 * is-style-section（セクション大見出し）直後は、is-style-subよりさらに広く60pxを確保する。
 * ::afterの下線飾りが見出し自体にpadding-bottom:20pxを持っているため、実質的な
 * 見た目の余白はそれと合わせて80px程度になる。
 * .wp-block-heading.is-style-sub と同じく2クラス指定で詳細度を確保する。
 */
.entry-content > .wp-block-heading.is-style-section + *,
.entry-content > section > .wp-block-heading.is-style-section + *,
.is-root-container > .wp-block-heading.is-style-section + *,
.is-root-container > section > .wp-block-heading.is-style-section + * {
  margin-top: 60px;
}
@media (max-width: 767px) {
  .entry-content > .wp-block-heading.is-style-section + *,
  .entry-content > section > .wp-block-heading.is-style-section + *,
  .is-root-container > .wp-block-heading.is-style-section + *,
  .is-root-container > section > .wp-block-heading.is-style-section + * {
    margin-top: var(--wp--preset--spacing--50, 40px);
  }
}

/*
 * is-style-annotation（注釈）は画像・料金表・見出しなど直前の要素にぴったり
 * 添えるキャプション用途で使うため、通常のブロックゲージ（32px）では離れすぎる。
 * 「+ *」ではなく is-style-annotation 自身を対象にすることで、直前が画像・段落・
 * 見出しのどれであっても常に一律4pxに詰める。
 * 見出し（is-style-sub）に直接続く場合の詳細度（クラス3つ）にも負けないよう、
 * .wp-block-paragraph.is-style-annotation の2クラス指定で詳細度を揃える。
 */
.entry-content > .wp-block-paragraph.is-style-annotation,
.entry-content > section > .wp-block-paragraph.is-style-annotation,
.is-root-container > .wp-block-paragraph.is-style-annotation,
.is-root-container > section > .wp-block-paragraph.is-style-annotation {
  margin-top: 4px;
}

/*
 * reset.css の `a { color: inherit; text-decoration: none; }` により、
 * 本文中の地の文（段落・リスト・引用のcite等）に置かれた素の <a> リンクは
 * 周囲のテキストと見分けがつかない（下線もなく、色も変わらない）状態になっている。
 * ボタンやカードのリンクなど、既に専用クラスで色・装飾を指定している箇所には
 * 影響させたくないため、:where() で詳細度をゼロにして「他に何も指定がない
 * 場合だけ効く、最低限のリンクらしさ」を後から足す形にする。
 */
:where(.entry-content, .is-root-container) a {
  color: var(--wp--preset--color--primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(.entry-content, .is-root-container) a:hover {
  color: var(--wp--preset--color--primary-dark);
}
/*
 * target="_blank"（別タブで開く）のリンクには、自動で外部リンクアイコンを付ける。
 * ボタンのアイコン（cwt-btn-icon-external、block-styles.css）はブロック単位で
 * 明示的に選んでもらう運用のままにしたいので、ここでは対象外にする。
 * フォントサイズに追従するようemで指定し、色は文字色に自動追従（currentColor）。
 */
:where(.entry-content, .is-root-container) a[target="_blank"]:not(.wp-block-button__link)::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.2em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E");
}

/*
 * セクション（1h2＝1セクション）同士の間は、通常のブロック間ギャップ（32px）だと
 * 「別の話題に切り替わった」という区切りが弱く見える。
 * margin ではなく padding で確保する（セクション自身の箱の内側に余白を持たせる）。
 * 既存の背景色セクション（is-style-section-*、block-styles.css）は元々
 * padding-top/bottom: 80px を持っているため、値をここでも 80px に揃えることで
 * 色なしセクションと色ありセクションのどちらが隣り合っても常に同じ間隔になる
 * （どちらのルールが効いても見た目は同じ80pxなので、特別な上書きが不要）。
 *
 * ・先頭のセクションは padding-top: 0 / 末尾のセクションは padding-bottom: 0
 * ・セクション同士の間は上下とも padding 80px（色の有無を問わず統一）
 * ・ただし同じ背景色（is-style-section-*の同じスタイル）のセクションが連続する場合は、
 *   その境目だけ padding を 0 にして地続きに見せる（不要な区切り線を作らないため）
 *
 * 注意：<section> 自身も .entry-content の直接の子なので、上の「通常のブロック間マージン」
 * ルール（.entry-content > * { margin-top: 32px }）も同時に効いてしまい、
 * padding と margin が二重に加算されてしまう。ここで margin は明示的に打ち消す。
 * セクションの中にさらにセクション（is-style-section-* の背景セクションなど）を
 * ネストした場合も同様に、上の「.entry-content > section > *」ルールが
 * ネストした <section> 自身にも margin-top を付けてしまうため、ここで一緒に打ち消す。
 */
.entry-content > section,
.entry-content > section > section,
.is-root-container > section,
.is-root-container > section > section {
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 100px;
}
.entry-content > section:first-child,
.entry-content > section > section:first-child,
.is-root-container > section:first-child,
.is-root-container > section > section:first-child {
  padding-top: 0;
}
/*
 * セクションが連続する場合（＝直前にも<section>がある場合）は、
 * 直前のセクションのpadding-bottomで既に間隔が確保されているため、
 * 後続セクション側のpadding-topは重ねずに0にする
 * （色の一致・不一致を問わず、常にこの詰め方で統一する）。
 */
.entry-content > section + section,
.entry-content > section > section + section,
.is-root-container > section + section,
.is-root-container > section > section + section {
  padding-top: 0;
}
/*
 * 色付きセクション（is-style-section-*）は、前後のセクション間隔を詰める目的の
 * 「連続セクションはpadding-topを0に」というルールの対象外にする。
 * 色付きセクションのpadding-top/bottomは「前のセクションとの間隔」ではなく、
 * 「色の付いた箱の内側の余白（文字が上端にくっつかないための余白）」として
 * 常に必要なため、連続していても0にはしない
 * （block-styles.cssの .wp-block-group.is-style-section-* 側の
 * padding-top:80pxがそのまま効くよう、ここでは何も上書きしない）。
 */
.entry-content > section:last-child,
.entry-content > section > section:last-child,
.is-root-container > section:last-child,
.is-root-container > section > section:last-child {
  padding-bottom: 0;
}
/*
 * ただし最後のセクションが背景色つき（is-style-section-*）の場合は例外。
 * padding-bottom を 0 にすると、色の付いた箱の中で本文が下端にぴったり
 * くっついて窮屈に見えてしまうため、最後でも通常どおり padding-bottom を残す
 * （:is() は5色まとめて指定でき、詳細度も1クラス分なので、上の
 * :last-child { padding-bottom: 0 } より詳細度が高くなり正しく上書きできる）。
 */
.entry-content > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
.entry-content > section > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
.is-root-container > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
.is-root-container > section > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient) {
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .entry-content > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
  .entry-content > section > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
  .is-root-container > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient),
  .is-root-container > section > section:last-child:is(.is-style-section-white, .is-style-section-lavender, .is-style-section-beige, .is-style-section-dark, .is-style-section-gradient) {
    padding-bottom: 56px;
  }
}

/* 同じ背景色のセクションが連続する場合、その境目のpaddingを0にして地続きにする */
.entry-content > section.is-style-section-white:has(+ section.is-style-section-white),
.entry-content > section.is-style-section-lavender:has(+ section.is-style-section-lavender),
.entry-content > section.is-style-section-beige:has(+ section.is-style-section-beige),
.entry-content > section.is-style-section-dark:has(+ section.is-style-section-dark),
.entry-content > section.is-style-section-gradient:has(+ section.is-style-section-gradient),
.is-root-container > section.is-style-section-white:has(+ section.is-style-section-white),
.is-root-container > section.is-style-section-lavender:has(+ section.is-style-section-lavender),
.is-root-container > section.is-style-section-beige:has(+ section.is-style-section-beige),
.is-root-container > section.is-style-section-dark:has(+ section.is-style-section-dark),
.is-root-container > section.is-style-section-gradient:has(+ section.is-style-section-gradient) {
  padding-bottom: 0;
}
.entry-content > section.is-style-section-white + section.is-style-section-white,
.entry-content > section.is-style-section-lavender + section.is-style-section-lavender,
.entry-content > section.is-style-section-beige + section.is-style-section-beige,
.entry-content > section.is-style-section-dark + section.is-style-section-dark,
.entry-content > section.is-style-section-gradient + section.is-style-section-gradient,
.is-root-container > section.is-style-section-white + section.is-style-section-white,
.is-root-container > section.is-style-section-lavender + section.is-style-section-lavender,
.is-root-container > section.is-style-section-beige + section.is-style-section-beige,
.is-root-container > section.is-style-section-dark + section.is-style-section-dark,
.is-root-container > section.is-style-section-gradient + section.is-style-section-gradient {
  padding-top: 0;
}

@media (max-width: 767px) {
  .entry-content > section,
  .is-root-container > section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/*
 * <!-- wp:group className:"is-style-section-*" --> は保存時は <div> だが、
 * inc/block-styles.php の render_block フィルターで表示時に <section> へ差し替わるため、
 * 実は上の<section>ベースのルールも（クラスセレクタ経由で）効いている。
 * ただし上の「最後のセクションが色付きの場合は例外でpadding-bottom:100pxを維持する」ルールは、
 * 本文全体の最後が白背景（is-style-section-white）で終わる場合（このあとはパンくず・フッターへ
 * 続くだけ）は逆に不要な余白になるため、白背景のときだけここで改めて0に戻す。
 * ラベンダー／ベージュ／ダーク／グラデーションなど実際に色が付いているセクションは、
 * 最後であっても「色の付いた箱の内側の余白」として引き続き必要なため対象外にする
 * （padding-topのケースと同じ理由。過去にここを誤って全色0にしてしまったことがあるので注意）。
 * .wp-block-group クラスを明示して詳細度を上げ（0,0,3,0）、上の:is()を使った例外ルール
 * （0,0,3,1）より確実に上書きできるようにしている。
 */
.entry-content > .wp-block-group.is-style-section-white:last-child,
.is-root-container > .wp-block-group.is-style-section-white:last-child {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .entry-content > .wp-block-group.is-style-section-white:last-child,
  .is-root-container > .wp-block-group.is-style-section-white:last-child {
    padding-bottom: 0;
  }
}

/* ---- 共通：アイコン円 ---- */
.cwt-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.cwt-icon-circle--check {
  width: 30px;
  height: 30px;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  font-size: 18px;
}

.cwt-icon-circle--step,
.cwt-icon-circle--point {
  width: 44px;
  height: 44px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: 18px;
  font-weight: 700;
}

/* ---- 5. チェックリスト ---- */
.cwt-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ---- 6. ステップ・フロー（縦） ---- */
.cwt-step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  padding-bottom: 32px;
}
.cwt-step-item:last-child {
  padding-bottom: 0;
}
.cwt-step-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 1px;
  background: var(--wp--preset--color--divider);
}

/* ---- 7. 画像＋テキスト（左右） ---- */
.cwt-photo-frame {
  border: 6px solid var(--wp--preset--color--lavender-bg);
  border-radius: var(--wp--custom--radius--surface, 24px);
  overflow: hidden;
  /* 画像未選択（src無し）の状態でも枠が潰れて細い線にならないよう最低高さを確保する */
  min-height: 240px;
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  object-fit: cover;
  border-radius: calc(var(--wp--custom--radius--surface, 24px) - 6px);
}
/* 画像の下に添える署名（クリニック名・院長名）。PC・SPともに中央寄せ、色は薄紫（primary）。 */
.cwt-doctor-signature {
  margin-top: 12px;
  text-align: center;
  color: var(--wp--preset--color--primary);
}
/*
 * SPでは画像を常に上（1カラム目）に表示する。
 * カラムの並び順（画像が先/テキストが先）はページによって異なるため、
 * DOM順ではなく「.cwt-photo-frameを含むカラム」を対象にorderで並び替える
 * （wp:columnsはSPでもdisplay:flex; flex-wrap:wrapのまま各カラムがflex-basis:100%になるだけなので、
 * orderの並び替えがそのまま効く）。
 */
@media (max-width: 767px) {
  .cwt-image-text > .wp-block-column:has(.cwt-photo-frame) {
    order: -1;
  }
}

/* 画像＋テキストが連続する場合は、間隔を空けるためmargin-topを付与する */
.cwt-image-text + .cwt-image-text {
  margin-top: 60px;
}

/* ---- 7-b. シンプルな写真ギャラリー（キャプションのみ） ---- */
.cwt-photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/*
 * .cwt-photo-galleryはwp:group（layout:constrained）で組んでいるため、
 * WordPressコアが自動付与する「隣接ブロックの縦間隔」用グローバルCSS
 * :where(.is-layout-constrained) > * + * { margin-block-start: ... }
 * がgrid内の2列目・3列目の要素にまで効いてしまい、行がズレる。
 * :where()は詳細度0なので、通常のクラスセレクタで確実に打ち消す。
 */
.cwt-photo-gallery > .cwt-photo-gallery__item {
  margin-top: 0;
}
.cwt-photo-gallery__item .cwt-photo-frame {
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.cwt-photo-gallery__item .cwt-photo-frame img {
  min-height: 0;
  height: 100%;
}
.cwt-photo-gallery__caption {
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--wp--preset--color--heading-text);
}
@media (max-width: 767px) {
  .cwt-photo-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 8. アイコン＋テキスト（紫／ブラウン／ブルーの3系統） ---- */
.cwt-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--wp--custom--radius--icon-box, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.cwt-icon-box--purple {
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
}
.cwt-icon-box--brown {
  background: var(--wp--preset--color--accent-brown-bg);
  color: var(--wp--preset--color--accent-brown);
}
.cwt-icon-box--blue {
  background: var(--wp--preset--color--accent-blue-bg);
  color: var(--wp--preset--color--accent-blue);
}

/* ---- 10. お知らせ・アラート ---- */
.cwt-alert {
  border-radius: var(--wp--custom--radius--card, 16px);
  padding: 20px 24px;
}
.cwt-alert--important {
  background: var(--wp--preset--color--warning-bg);
  border: 1px solid var(--wp--preset--color--warning-border);
}
.cwt-alert--important .cwt-alert__category {
  color: var(--wp--preset--color--warning-text);
}
.cwt-alert--normal {
  background: var(--wp--preset--color--lavender-bg);
  border: 1px solid var(--wp--preset--color--divider);
}
.cwt-alert--normal .cwt-alert__category {
  color: var(--wp--preset--color--primary-text);
}
.cwt-alert__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--wp--preset--font-size--base);
}
.cwt-alert__category {
  font-weight: 700;
}

/* ---- 17（見送り分）. 区切り線（アイコン入り） ---- */
.cwt-separator-icon {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cwt-separator-icon::before,
.cwt-separator-icon::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--wp--preset--color--divider);
}
.cwt-separator-icon__icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--accent-light);
  font-size: 20px;
}

/* ---- 49（見送り分）. 定義リスト ---- */
.cwt-definition-list__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wp--preset--color--divider);
}
.cwt-definition-list__term {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
}
.cwt-definition-list__desc {
  color: var(--wp--preset--color--body-text);
}
@media (max-width: 599px) {
  .cwt-definition-list__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- 35. Before / After ---- */
.cwt-before-after__label {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: 12px;
}
.cwt-before-after__label--before {
  background: var(--wp--preset--color--beige-bg);
  color: var(--wp--preset--color--heading-text);
}
.cwt-before-after__label--after {
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
}

/* ---- 36. 監修医師プロフィール ---- */
.cwt-supervisor {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cwt-supervisor__photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--wp--preset--color--lavender-bg);
  overflow: hidden;
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-supervisor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ul要素として使う場合があるため、リストの既定余白（ブラウザのUAスタイル）を明示的に打ち消す
   （list-style/paddingはreset.cssのul,olで既に0だが、marginはreset対象外のためここで指定） */
.cwt-supervisor__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--wp--preset--spacing--30, 24px) 0 0;
}
.cwt-supervisor__tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
}

/* ---- 37. 関連記事カード ---- */
.cwt-related-articles .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  padding: 0;
}
@media (max-width: 767px) {
  .cwt-related-articles .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}
.cwt-related-articles .wp-block-post-featured-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--card, 16px);
  margin: 0 0 12px;
}
.cwt-related-articles .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cwt-related-articles .cwt-related-articles__category {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  margin-bottom: 8px;
}
.cwt-related-articles .wp-block-post-title {
  font-size: var(--wp--preset--font-size--card-heading);
  margin: 0 0 8px;
}
.cwt-related-articles .wp-block-post-date {
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
}

/* ---- 39. 症例写真ギャラリー ---- */
.cwt-case-gallery__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cwt-case-gallery__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--wp--custom--radius--card, 16px);
  overflow: hidden;
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-case-gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cwt-case-gallery__caption {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--caption-text);
  text-align: center;
}

/* ---- 40. 料金プラン（回数コース） ---- */
.cwt-pricing-card {
  position: relative;
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--radius--card, 16px);
  padding: 32px 24px 24px;
  text-align: center;
}
.cwt-pricing-card--featured {
  border-color: var(--wp--preset--color--primary);
  border-width: 2px;
}
.cwt-pricing-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-radius: 999px;
  padding: 6px 20px;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  white-space: nowrap;
}
.cwt-pricing-card__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--card-heading);
  color: var(--wp--preset--color--heading-text);
  margin: 8px 0;
}
.cwt-pricing-card__price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--wp--preset--color--primary-text);
  margin: 8px 0;
}

/* ---- 41. インライン予約バー ---- */
.cwt-reservation-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--wp--preset--color--lavender-bg);
  border-radius: 999px;
  padding: 20px 32px;
}
.cwt-reservation-bar__link {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
}
.cwt-reservation-bar__link--fill {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.cwt-reservation-bar__link--outline {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary-text);
  border: 2px solid var(--wp--preset--color--primary);
}

/* ---- 42. Q&A（展開済み・印刷/SEO用の常時表示版） ---- */
.cwt-qa-static {
  border-bottom: 1px solid var(--wp--preset--color--divider);
  padding: 20px 8px;
}
.cwt-qa-static__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cwt-qa-static__row + .cwt-qa-static__row {
  margin-top: 12px;
}
.cwt-qa-static__badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
}
.cwt-qa-static__badge--q {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.cwt-qa-static__badge--a {
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
}
.cwt-qa-static__question {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  font-size: var(--wp--preset--font-size--base);
  padding-top: 4px;
}
.cwt-qa-static__answer {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  padding-top: 4px;
}

/* ---- 43. アンカーリンク一覧（チップ型／ボックス型） ---- */
.cwt-anchor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cwt-anchor-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--primary-text);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
}

/* チップ一覧の折りたたみ（項目数が多いページ用）。
   JSを使わず、チェックボックス＋labelとCSSの一般兄弟結合子（~）だけで
   開閉を実現する。チェックボックス自体は screen-reader-text で視覚的に
   隠すが、フォーカス（キーボード操作）は可能な状態を保つ。 */
.cwt-anchor-chip--extra {
  display: none;
}
.cwt-anchor-chips__toggle-input:checked ~ .cwt-anchor-chip--extra {
  display: inline-flex;
}
.cwt-anchor-chips__toggle-label {
  cursor: pointer;
  background: var(--wp--preset--color--lavender-bg);
  border-color: transparent;
}
.cwt-anchor-chips__toggle-label:hover {
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--white);
}
.cwt-anchor-chips__toggle-hide {
  display: none;
}
.cwt-anchor-chips__toggle-input:checked ~ .cwt-anchor-chips__toggle-label .cwt-anchor-chips__toggle-show {
  display: none;
}
.cwt-anchor-chips__toggle-input:checked ~ .cwt-anchor-chips__toggle-label .cwt-anchor-chips__toggle-hide {
  display: inline;
}
.cwt-anchor-chips__toggle-input:focus-visible ~ .cwt-anchor-chips__toggle-label {
  outline: 2px solid var(--wp--preset--color--accent-light);
  outline-offset: 2px;
}

.cwt-anchor-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cwt-anchor-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--wp--custom--radius--card, 16px);
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--heading-text);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
}
@media (max-width: 599px) {
  .cwt-anchor-boxes {
    grid-template-columns: 1fr;
  }
}

/* ---- 44. 記事一覧＋ページネーション ---- */
.cwt-article-list .wp-block-post-template {
  list-style: none;
  padding: 0;
}
.cwt-article-list .wp-block-post-template > li {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--wp--preset--color--divider);
}
.cwt-article-list .wp-block-post-featured-image {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--card, 16px);
  margin: 0;
}
.cwt-article-list .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cwt-article-list .wp-block-post-title {
  font-size: var(--wp--preset--font-size--card-heading);
  margin: 0 0 8px;
}
.cwt-article-list .wp-block-post-excerpt {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
}
.cwt-article-list .wp-block-query-pagination {
  margin-top: 24px;
  justify-content: center;
}
.cwt-article-list .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--heading-text);
}
.cwt-article-list .page-numbers.current {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
@media (max-width: 599px) {
  .cwt-article-list .wp-block-post-template > li {
    flex-direction: column;
  }
  .cwt-article-list .wp-block-post-featured-image {
    width: 100%;
  }
}

/* ---- 45. 前後の記事ナビ ---- */
.cwt-post-nav {
  display: flex;
  gap: 24px;
}
.cwt-post-nav .wp-block-post-navigation-link {
  flex: 1 1 50%;
  padding: 20px;
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--radius--card, 16px);
}
.cwt-post-nav .wp-block-post-navigation-link a {
  text-decoration: none;
  color: var(--wp--preset--color--heading-text);
}
@media (max-width: 599px) {
  .cwt-post-nav {
    flex-direction: column;
  }
}

/* ---- 46. 埋め込み（動画・地図） ---- */
.cwt-embed-frame {
  border-radius: var(--wp--custom--radius--card, 16px);
  overflow: hidden;
}
.cwt-embed-frame--placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
  border: 1px dashed var(--wp--preset--color--accent-light);
}
.cwt-embed-frame figcaption {
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
  text-align: center;
  margin-top: 8px;
}

/* ---- 47. PDFダウンロード ---- */
.cwt-pdf-download {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--radius--card, 16px);
}
.cwt-pdf-download__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--wp--custom--radius--icon-box, 12px);
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.cwt-pdf-download__meta {
  flex: 1 1 auto;
}
.cwt-pdf-download__name {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
}
.cwt-pdf-download__size {
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
}
.cwt-pdf-download__button {
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
}

/* ---- 48. カバー（濃色オーバーレイ／淡色チャプター型） ---- */
.cwt-cover-chapter {
  padding: 56px 24px;
  text-align: center;
}
.cwt-cover-chapter__eyebrow {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary-text);
  margin: 0 0 8px;
}

/* ---- 50. サイドバー ---- */
.cwt-sidebar-widget {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wp--preset--color--divider);
}
.cwt-sidebar-widget__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--card-heading);
  color: var(--wp--preset--color--heading-text);
  margin: 0 0 12px;
}
.cwt-sidebar-widget .wp-block-latest-posts__featured-image img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}
.cwt-sidebar-widget .wp-block-latest-posts__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.cwt-sidebar-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cwt-sidebar-widget .wp-block-categories-list li,
.cwt-sidebar-widget .wp-block-archives-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--wp--preset--color--divider);
  font-size: var(--wp--preset--font-size--base);
}
.cwt-sidebar-widget a {
  color: var(--wp--preset--color--body-text);
  text-decoration: none;
}

/* ---- 51. SNSリンク ---- */
.cwt-sns-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cwt-sns-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--primary-text);
  font-size: 22px;
  text-decoration: none;
}
.cwt-sns-links__item:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.cwt-sns-links--pill .cwt-sns-links__item {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 10px 24px;
  gap: 8px;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
}

/* ---- 15. 目次（TOC） ---- */
.cwt-toc {
  border: 1px solid var(--wp--preset--color--accent-light);
  border-radius: var(--wp--custom--radius--card, 16px);
  padding: 24px;
}
.cwt-toc__title {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  margin: 0 0 12px;
}
.cwt-toc__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
}
.cwt-toc__number {
  color: var(--wp--preset--color--primary-text);
  font-weight: 700;
  flex-shrink: 0;
}
.cwt-toc__link {
  color: var(--wp--preset--color--heading-text);
  text-decoration: none;
}
.cwt-toc__link:hover {
  text-decoration: underline;
}

/* ---- 20. 施術カード（美容皮膚科ページ由来） ---- */
.cwt-treatment-card {
  border-radius: var(--wp--custom--radius--card, 16px);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--divider);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cwt-treatment-card__bar {
  height: 6px;
  background: var(--wp--preset--gradient--article-mv-gradient);
}
.cwt-treatment-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.cwt-treatment-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cwt-treatment-card__tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
}
.cwt-treatment-card__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--card-heading);
  color: var(--wp--preset--color--heading-text);
  margin: 0;
}
.cwt-treatment-card__desc {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
  margin: 0;
}
.cwt-treatment-card__price {
  font-weight: 700;
  color: var(--wp--preset--color--primary-text);
  margin-top: auto;
}
.cwt-treatment-card__link {
  color: var(--wp--preset--color--primary-text);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--base);
}

/* 症状ページ：【治療法】の治療名タグ一覧（cwt-treatment-card__tag を単体で流用） */
.cwt-symptom-treatments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- 21. セクション見出し（縦バー）／選択中タグ ---- */
.cwt-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-radius: 999px;
  padding: 6px 14px 6px 16px;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* ---- 22. 絞り込みフィルター ---- */
.cwt-filter__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.cwt-filter__tab {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--accent-light);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--heading-text);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  cursor: pointer;
}
.cwt-filter__tab.is-active {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary);
}
.cwt-filter__panel {
  display: none;
}
.cwt-filter__panel.is-active {
  display: block;
}
.cwt-filter__chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 599px) {
  .cwt-filter__chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cwt-filter__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--wp--custom--radius--card, 16px);
  border: 1px solid var(--wp--preset--color--divider);
  background: var(--wp--preset--color--white);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--heading-text);
  text-align: center;
}
.cwt-filter__chip-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--wp--custom--radius--icon-box, 12px);
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-filter__chip.is-selected {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-filter__chip.is-selected .cwt-filter__chip-image {
  background: var(--wp--preset--color--primary);
}
.cwt-filter__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--divider);
}
.cwt-filter__selected-label {
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
}
.cwt-filter__reset {
  background: none;
  border: none;
  color: var(--wp--preset--color--primary-text);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--wp--preset--font-size--base);
}
.cwt-filter__count {
  margin-top: 16px;
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
}

/* ---- 23. 4カラム ステップ ---- */
.cwt-step-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 599px) {
  .cwt-step-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cwt-step-4col__circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 12px;
}
.cwt-step-4col__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-sm);
  color: var(--wp--preset--color--heading-text);
  margin: 0 0 8px;
}
.cwt-step-4col__desc {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
}

/* ---- 24. 注意事項リスト ---- */
.cwt-caution-list {
  background: var(--wp--preset--color--beige-bg);
  border-radius: var(--wp--custom--radius--card, 16px);
  padding: 24px;
}
.cwt-caution-list__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cwt-caution-list__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--warning-text, var(--wp--preset--color--primary-text));
  color: var(--wp--preset--color--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
}
.cwt-caution-list__title {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
}
.cwt-caution-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cwt-caution-list li {
  position: relative;
  padding-left: 20px;
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
}
.cwt-caution-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ---- 25. 英字サブ付き小見出し／該当なし表示 ---- */
.cwt-sub-en {
  display: block;
  font-size: var(--wp--preset--font-size--base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--caption-text);
  margin-bottom: 4px;
}
.cwt-no-results {
  display: none;
  text-align: center;
  padding: 48px 24px;
  color: var(--wp--preset--color--caption-text);
}
.cwt-no-results.is-visible {
  display: block;
}

/* ----------------------------------------------------------------
   コメントフォーム（single.php のみ）の幅修正。
   WordPress core標準のコメントフォームは <textarea id="comment" cols="45">
   のように cols 属性で幅を決めており、CSSで幅を指定していないため、
   ブラウザ既定のフォント換算で cols=45 が実際の表示幅（本文コンテナ幅や
   スマホの画面幅）を超えてしまい、横スクロールがはみ出す。
   cwt- プレフィックスの対象外だが、記事ページ全体の表示崩れに関わる
   実害バグのため例外的にここで直接補正する。
   ---------------------------------------------------------------- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
#comment {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* ----------------------------------------------------------------
   core/code（コードブロック）の最低限の見た目。
   このテーマは wp-block-library（WordPressコア標準CSS）を読み込んでいないため、
   core/code も含め全てのコアブロックの見た目はこのテーマ側のCSSに依存する。
   ブロックカタログページでの「呼び出し方コード」表示用に追加。
   長い1行でも横にはみ出さないよう、折り返し＋横スクロールの両方に対応する。
   ---------------------------------------------------------------- */
.wp-block-code {
  background: var(--wp--preset--color--lavender-bg);
  border-radius: var(--wp--custom--radius--card, 16px);
  padding: 16px 20px;
  overflow-x: auto;
}
.wp-block-code code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wp--preset--color--body-text);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ----------------------------------------------------------------
   固定ページ・記事詳細（page.php / single.php）のパンくず・投稿メタ帯。
   custom/mv-block・custom/breadcrumb はテンプレート側で直接
   render_callback を呼び出しており、.entry-content の外（グリッドが
   効かない場所）に置かれるため、ここで本文と同じコンテナ幅を明示的に与える。
   （.cwt-mv 自体は元から画面幅いっぱいに広がる設計なので対象外）
   ---------------------------------------------------------------- */
.cwt-page-breadcrumb-bar {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-block: 10px;
  padding-inline: 20px;
  background-color: var(--wp--preset--color--white);
}
.cwt-page-breadcrumb-bar .cwt-breadcrumb__list {
  justify-content: flex-end;
  font-size: 14px;
}
@media (max-width: 767px) {
  .cwt-page-breadcrumb-bar {
    display: none;
  }
}
.entry-meta {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding: 16px 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--wp--preset--color--caption-text);
  font-size: var(--wp--preset--font-size--base);
}
.entry-meta a {
  color: inherit;
}
/*
 * single.php の「戻る」ボタン等を置く entry-footer も、entry-meta と同じく
 * .entry-content の外（グリッドが効かない場所）にあるため幅指定が無く、
 * 画面左端にボタンが張り付いてしまっていた。同じコンテナ幅を明示的に与える。
 */
.entry-footer {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding: 32px 20px;
}
.entry-footer .wp-block-buttons {
  display: flex;
  justify-content: center;
}

/*
 * カード決済ロゴの掲載枠（例：お支払い方法セクション）。
 * 画像未設定でも枠として見えるよう、min-heightのあるプレースホルダー面を用意する
 * （coreのwp:imageブロックはimgにsrcが無いと出力自体が空になってしまうため、
 * wp:htmlの素のimgタグで代用している。cwt-photo-frameと同じ考え方）。
 * ロゴ画像を用意でき次第、各<img>にsrcを設定すれば実際のロゴが表示される。
 */
.cwt-card-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.cwt-card-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 64px;
  background: var(--wp--preset--color--lavender-bg);
  border-radius: 8px;
}
.cwt-card-logos__item img {
  max-width: 72px;
  max-height: 36px;
  object-fit: contain;
}


/*
 * ---- 9. 医院情報カード（アイコン付き定義リスト＋地図カード＋診療時間表／担当医表） ----
 * design_handoff_clinic_info（design/ブロック18種カタログ）のハイファイモックを、
 * 既存のトークン・コンポーネント規約に合わせて実装したもの。
 * 表は視覚的にはCSSグリッド風だが、実装は必ず<table>＋<thead>＋th scopeで組む
 * （スクリーンリーダー対応。README「アクセシビリティ要件」準拠）。
 */

/* 上段：医院情報カード（1.15fr）＋ 地図カード（0.85fr） */
.cwt-clinic-info-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .cwt-clinic-info-grid {
    grid-template-columns: 1fr;
  }
}

/* カード共通の箱（医院情報・診療時間表・担当医表で共用） */
.cwt-clinic-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--radius--surface, 24px);
  padding: 36px 34px;
}

/* 定義リスト行（アイコン＋ラベル ｜ 値）。罫線は行ラッパーに付ける
   （セルに付けるとgapで線が途切れるため。1行目はborder-topなし） */
.cwt-clinic-card__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--wp--preset--color--divider);
}
.cwt-clinic-card__row:first-child {
  padding-top: 0;
  border-top: none;
}
.cwt-clinic-card__row:last-child {
  padding-bottom: 0;
}
/* SPでは「見出し（アイコン＋ラベル）｜値」の横並びをやめ、
   見出しを上・テキストを下に縦積みする */
@media (max-width: 767px) {
  .cwt-clinic-card__row {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}
.cwt-clinic-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--caption-text);
  white-space: nowrap;
}
.cwt-clinic-card__label svg {
  width: 20px;
  height: 20px;
  color: var(--wp--preset--color--accent-light);
  flex-shrink: 0;
}
.cwt-clinic-card__name {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--heading-text);
}
.cwt-clinic-card__doctor-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--wp--preset--color--heading-text);
}
.cwt-clinic-card__doctor-cert {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.7;
  color: var(--wp--preset--color--caption-text);
}
.cwt-clinic-card__address {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.9;
  color: var(--wp--preset--color--body-text);
}
.cwt-clinic-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--wp--preset--color--lavender-bg);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--primary-text);
}
.cwt-clinic-card__pill svg {
  width: 16px;
  height: 16px;
}
.cwt-clinic-card__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-text);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.cwt-clinic-card__btn-outline:hover,
.cwt-clinic-card__btn-outline:focus-visible {
  background: var(--wp--preset--color--lavender-bg);
  color: var(--wp--preset--color--primary-text);
}
.cwt-clinic-card__btn-outline svg {
  width: 20px;
  height: 20px;
}

/* 地図カード（プレースホルダー＋下部の電話CTAバー） */
.cwt-clinic-map-card {
  border-radius: var(--wp--custom--radius--surface, 24px);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--divider);
  background: var(--wp--preset--color--accent-brown-bg);
  display: flex;
  flex-direction: column;
}
.cwt-clinic-map-card__placeholder {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--wp--preset--color--caption-text);
}
.cwt-clinic-map-card__placeholder svg {
  width: 30px;
  height: 30px;
}
.cwt-clinic-map-card__placeholder span {
  font-size: var(--wp--preset--font-size--base);
}
.cwt-clinic-map-card__cta {
  background: var(--wp--preset--color--white);
  border-top: 1px solid var(--wp--preset--color--divider);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cwt-clinic-map-card__cta-label {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
}
.cwt-clinic-map-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.cwt-clinic-map-card__phone:hover,
.cwt-clinic-map-card__phone:focus-visible {
  background: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
}
.cwt-clinic-map-card__phone svg {
  width: 18px;
  height: 18px;
}

/* 診療時間表・担当医表：カード見出し（全幅の単色バー。参照：setagaya-skin.com） */
.cwt-schedule-bar {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--wp--custom--radius--card, 16px);
  background: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-sm);
  font-weight: 700;
  text-align: center;
}

/* セマンティックtable本体。参照：setagaya-skin.com/clinic/#information
   表自体を横スクロールさせず、table-layout:fixedで列幅を固定配分して
   画面幅に収める（SPでは文字サイズ・余白を下のメディアクエリで縮小）。 */
.cwt-schedule-table-wrap {
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--radius--card, 16px);
  /* table-layout:fixedで表自体が画面幅に収まるため、内部スクロールは不要。
     ただしtable-layout非対応環境等の保険として overflow-x は残しておく
     （contain:layoutで祖先要素へのサイズ伝播も引き続き遮断する）。 */
  overflow-x: auto;
  contain: layout;
}
.cwt-schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
/* ラベル列（診療時間・担当医の行見出し）を持つ表のみ、先頭列に幅を確保する。
   担当医表（--duty修飾子）には先頭ラベル列が無いため対象外。 */
.cwt-schedule-table:not(.cwt-schedule-table--duty) th:first-child,
.cwt-schedule-table:not(.cwt-schedule-table--duty) td:first-child {
  width: 38%;
}
.cwt-schedule-table th,
.cwt-schedule-table td {
  font-size: var(--wp--preset--font-size--base);
  padding: 16px 8px;
  text-align: center;
}
.cwt-schedule-table thead th {
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  border-bottom: 1px solid var(--wp--preset--color--divider);
}
.cwt-schedule-table thead th:first-child,
.cwt-schedule-table tbody th[scope="row"] {
  text-align: left;
  padding-left: 18px;
  white-space: nowrap;
}
.cwt-schedule-table td.is-open,
.cwt-schedule-table td.is-am-only,
.cwt-schedule-table td.is-closed {
  color: var(--wp--preset--color--body-text);
  font-size: 20px;
}
.cwt-schedule-table tbody tr {
  border-top: 1px solid var(--wp--preset--color--divider);
}
.cwt-schedule-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--wp--preset--color--body-text);
  border-right: 1px solid var(--wp--preset--color--divider);
  background: var(--wp--preset--color--white);
}

/* SPでは列数が多い表を1画面幅に収めるため、文字サイズ・余白を縮小する
   （参照サイトも同様にSPでは13px・余白最小で横スクロールなしにしている）。 */
@media (max-width: 480px) {
  .cwt-schedule-table th,
  .cwt-schedule-table td {
    padding: 10px 2px;
    font-size: 13px;
  }
  .cwt-schedule-table thead th:first-child,
  .cwt-schedule-table tbody th[scope="row"] {
    padding-left: 8px;
    /* 「10:00〜13:30」等はnowrapのまま縮小すると読めない小ささになるため、
       このサイズ域では折り返しを許可して2行表示にする（参照サイトは
       ASCII表記の短い文字列だったため折り返し不要だったが、当サイトの
       全角チルダ表記では幅が足りない端末があるための対応）。 */
    white-space: normal;
    line-height: 1.3;
  }
  .cwt-schedule-table td.is-open,
  .cwt-schedule-table td.is-am-only,
  .cwt-schedule-table td.is-closed {
    font-size: 16px;
  }
}

/* 担当医表：先頭に「医師名」列を置かないバリエーション。
   共通の thead th:first-child ルール（ラベル列想定の左寄せ）を
   月曜列にまで適用させないよう、他の曜日列と同じ中央寄せに戻す。 */
.cwt-schedule-table--duty thead th:first-child {
  text-align: center;
  padding-left: 8px;
  white-space: normal;
}

/* 休診日・受付終了注記（参照サイトと同じ、表の下にプレーンなテキストで一行ずつ表示） */
.cwt-schedule-footer {
  margin-top: 16px;
}
.cwt-schedule-tag--closed-days,
.cwt-schedule-note {
  display: block;
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  color: var(--wp--preset--color--annotation-text);
}
.cwt-schedule-footnote {
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  color: var(--wp--preset--color--annotation-text);
}

/* ============================================================
 * カテゴリーから探すカード（小サムネ＋タイトル＋矢印の横長カード）
 * （美容皮膚科TOPの「よくあるお悩み」「人気の施術」等、シンプルな一覧導線用。
 * 参考：リコー製品サイトの「カテゴリーから探す」）
 * ============================================================ */
.cwt-thumb-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}
@media (min-width: 600px) {
  .cwt-thumb-grid {
    grid-template-columns: repeat(var(--cwt-thumb-cols, 3), 1fr);
  }
}
.cwt-thumb-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--border-neutral, #D9D9D9);
  border-radius: var(--wp--custom--radius--card, 16px);
  background: var(--wp--preset--color--white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.cwt-thumb-tile:hover {
  border-color: var(--wp--preset--color--primary);
}
.cwt-thumb-tile__photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--wp--preset--color--lavender-bg);
}
.cwt-thumb-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cwt-thumb-tile__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cwt-thumb-tile__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cwt-thumb-tile__price {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--primary-text);
  white-space: nowrap;
}
.cwt-thumb-tile__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--wp--preset--color--primary);
}

/* 視覚的には隠すが、スクリーンリーダーには読ませるテキスト
   （◯☆／の記号だけでは意味が伝わらないため各セルに併記する） */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}