/*
Theme Name: CUREPRO Child
Theme URI: https://curepro.jp/
Description: CUREPRO テーマの子テーマ。以降の改修はすべてこの子テーマ側で行い、親テーマ（curepro）には手を加えない。親テーマが上書きされても改修内容が失われず、問題が起きた場合は親テーマへ切り替えるだけで即座に復旧できる。
Author: koujitsu
Template: curepro
Version: 1.0.0
*/

/* 親テーマの style.css は 0 バイトのため、ここで読み込む内容はない。
   実際のスタイルは親テーマの /css/style.css が
   functions.php の get_template_directory_uri() 経由で読み込まれる。
   改修で追加するCSSはこのファイルの以下に記述する。 */

/* ------------------------------------------------------------------
   症例ページのヘッダー崩れ修正（2026-09-23 / koujitsu）

   2026-09-23 追記：当初は mu-plugin（curepro-symptoms-layout-scope.php）が
   <body> の id を symptoms_list に書き換えており、#symptoms_list .inner が
   詳細度で勝って親テーマの非表示指定を潰していた。この mu-plugin は
   <div class="contents" id="symptoms_list"> と id が重複しW3Cエラーになるため
   撤去した。撤去により body の id は無くなったので、ここのセレクタは
   body の id に依存しない形（class のみ）へ付け替えている。
   ------------------------------------------------------------------ */
body.single-symptoms_list .lower-heading .inner {
	display: none;
}

/* h1 は .lower-heading ではなく記事本文の中にあり、
   コラム用の
       .single-owned .contents .inner h1 { position: absolute; top: 16.5px; color:#fff; ... }
   が症例ページにも当たってページ最上部に白文字で固定されていた。
   /about/ 等では .lower-heading h1 { display:none } でタイトルは非表示にし、
   本文側の .title_area で見せる設計になっている。症例ページだけ揃っていない。

   見出しはSEO・読み上げの両方で必要なので消さず、視覚的にだけ隠す。 */
body.single-symptoms_list .single-owned .contents .inner h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	top: auto;
	left: auto;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * お悩みカテゴリー（symptoms_cat）・エリア（store_list_cat）アーカイブ
 *
 * 一覧のCSSは lower2.css で .post-type-archive-owned / .tax-owned_cat に
 * スコープされており、新設した2つのタクソノミーには当たらない。
 * lower2.css の該当ルールをそのまま複製し、セレクタだけ差し替えている。
 * ---------------------------------------------------------------- */
body.tax-symptoms_cat .owned-cat-list,
body.tax-store_list_cat .owned-cat-list {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 max-width: 1320px;
 margin: 50px auto 30px;
}
body.tax-symptoms_cat .owned-cat-list li,
body.tax-store_list_cat .owned-cat-list li {
 width: calc(100% / 4);
 text-align: center;
 padding: 10px;
 border-bottom: solid 1px #e8e8e8;
}
body.tax-symptoms_cat .owned-cat-list li a,
body.tax-store_list_cat .owned-cat-list li a {
 font-size: 18px;
 font-weight: bold;
 letter-spacing: 0.05rem;
 line-height: 1.56;
 display: block;
 width: 100%;
 height: 100%;
}
body.tax-symptoms_cat .owned-cat-list li:hover,
body.tax-store_list_cat .owned-cat-list li:hover,
body.tax-symptoms_cat .owned-cat-list li.is-current,
body.tax-store_list_cat .owned-cat-list li.is-current {
 border-bottom: solid 3px #C20064;
}
body.tax-symptoms_cat .owned-cat-list li:hover a,
body.tax-store_list_cat .owned-cat-list li:hover a {
 opacity: 1;
}
body.tax-symptoms_cat .owned-cat-list li.is-current a,
body.tax-store_list_cat .owned-cat-list li.is-current a {
 color: #C20064;
}
body.tax-symptoms_cat .single-owned .contents,
body.tax-store_list_cat .single-owned .contents {
 margin: 50px auto 100px;
 display: grid;
 gap: 50px;
 max-width: 1320px;
}
body.tax-symptoms_cat .single-owned .contents,
body.tax-store_list_cat .single-owned .contents {
 margin: 50px auto 80px;
}
@media (max-width: 768px) {
	body.tax-symptoms_cat .owned-cat-list li,
	body.tax-store_list_cat .owned-cat-list li {
	  width: calc(100% / 2);
	}
	body.tax-symptoms_cat .owned-cat-list,
	body.tax-store_list_cat .owned-cat-list {
	  width: 90%;
	  max-width: 90%;
	  margin: 20px auto;
	}
	body.tax-symptoms_cat .owned-cat-list li a,
	body.tax-store_list_cat .owned-cat-list li a {
	  font-size: 16px;
	}
	body.tax-symptoms_cat .single-owned .contents,
	body.tax-store_list_cat .single-owned .contents {
	  gap: 30px;
	  margin: 30px auto 50px;
	}
}
body.tax-symptoms_cat .o-list,
body.tax-store_list_cat .o-list {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 30px 24px;
 width: 100%;
 max-width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
 box-sizing: border-box;
}
body.tax-symptoms_cat .o-list > li,
body.tax-store_list_cat .o-list > li {
 width: auto;
 min-width: 0;
 max-width: 100%;
 margin: 0;
 box-sizing: border-box;
}
body.tax-symptoms_cat .o-list > li > a,
body.tax-store_list_cat .o-list > li > a {
 display: block;
 width: 100%;
 max-width: 100%;
 height: 100%;
 box-sizing: border-box;
}
body.tax-symptoms_cat .o-list .title,
body.tax-store_list_cat .o-list .title {
 max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-all;
}
@media (max-width: 767.98px) {
	body.tax-symptoms_cat .o-list,
	body.tax-store_list_cat .o-list {
	  grid-template-columns: minmax(0, 1fr);
	  gap: 22px;
	}
}
@media (max-width: 359.98px) {
	body.tax-symptoms_cat .o-list .title,
	body.tax-store_list_cat .o-list .title {
	  padding-inline-end: .35em;
	}
}
body.tax-symptoms_cat .o-list .title,
body.tax-store_list_cat .o-list .title {
 box-sizing: border-box;
 padding-inline-end: .35em;
}
@media (min-width: 1024px) {
	body.tax-symptoms_cat .o-list,
	body.tax-store_list_cat .o-list {
	  grid-template-columns: repeat(4, minmax(0, 1fr));
	  gap: 30px 20px;
	}
}

/* ------------------------------------------------------------------
 * 症例詳細ページのアコーディオン
 *
 * single-symptoms_list.php が div の子として <style> を直接出力しており、
 * W3Cエラー（style not allowed as child of div）になっていたため移設。
 * ---------------------------------------------------------------- */
.accordion-content {
	overflow: hidden;
	height: 0;
	transition: height .3s ease;
}

/* ------------------------------------------------------------------
 * コラム本文の可読性（2026/9/27）
 *
 * 2026/9/26 のお打ち合わせで CURE PRO様より「文字が詰まっていて読みにくい。
 * 調整してほしい」とのご要望をいただき対応。
 *
 * 実測（2026/9/27・コラム462記事）:
 *   - 399記事（86%）で段落の下余白が 0px、見出しの上下余白も 0px
 *   - 本文の中央値は約7,800字で、区切りが無く一続きの塊に見えていた
 *   - 残る63記事（14%）には前ベンダーが記事固有CSSを当てており、
 *     記事によって読みやすさが違う状態だった
 *
 * 記事固有CSS（#page_○○ .owned-single-main > h2 形式）は詳細度が高いため
 * こちらが上書きすることはない。余白が無い399記事にだけ効く。
 * 記事本文（データベース）には触れていない。
 *
 * 見出しは親テーマ lower2.css の .single-owned .contents .inner h2/h3 が
 * margin:0 auto を当てており詳細度で勝てないため、こちらも .contents .inner を
 * 挟んで詳細度を揃えている（2026/9/27 実測で判明）。
 *
 * 見出しの余白に em を使うと、装飾用に font-size:100px が当たっている見出しで
 * 300px もの空きになってしまうため、固定値（px）で指定している。
 *
 * また margin の一括指定は使わない。親テーマが margin:0 auto で見出しを
 * 中央寄せしており、左右をまとめて上書きすると中央寄せが外れて左に寄る
 * （2026/9/27 に実際に発生）。上下だけを指定する。
 * ---------------------------------------------------------------- */
.single-owned .owned-single-main p {
	margin: 0 0 1.6em;
	line-height: 1.95;
}

.single-owned .contents .inner .owned-single-main h2 {
	margin-top: 64px;
	margin-bottom: 28px;
	line-height: 1.5;
}

.single-owned .contents .inner .owned-single-main h3 {
	margin-top: 44px;
	margin-bottom: 20px;
	line-height: 1.6;
}

.single-owned .contents .inner .owned-single-main h4 {
	margin-top: 34px;
	margin-bottom: 16px;
	line-height: 1.6;
}

.single-owned .owned-single-main ul,
.single-owned .owned-single-main ol {
	margin: 0 0 1.6em;
}

.single-owned .owned-single-main li {
	margin-bottom: .6em;
	line-height: 1.9;
}

.single-owned .owned-single-main table {
	margin: 0 0 2em;
}

/* 見出しの直後は余白を詰めて、見出しと本文のまとまりを保つ */
.single-owned .contents .inner .owned-single-main h2 + p,
.single-owned .contents .inner .owned-single-main h3 + p,
.single-owned .contents .inner .owned-single-main h4 + p {
	margin-top: 0;
}

/* 画像やCTAなどのブロックは前後にゆとりを持たせる */
.single-owned .owned-single-main figure,
.single-owned .owned-single-main .curepro-section-image,
.single-owned .owned-single-main .curepro-article-image {
	margin: 0 0 2em;
}

@media (max-width: 767px) {
	.single-owned .owned-single-main p {
		margin: 0 0 1.5em;
		line-height: 1.9;
	}

	.single-owned .contents .inner .owned-single-main h2 {
		margin-top: 44px;
		margin-bottom: 20px;
	}

	.single-owned .contents .inner .owned-single-main h3 {
		margin-top: 34px;
		margin-bottom: 16px;
	}
}

/* ------------------------------------------------------------------
   お客様の声（voice）
   親テーマ lower2.css の一覧レイアウトは
   .post-type-archive-owned / .tax-owned_cat にしか当たらないため、
   voice にも同じ見た目を与える。ブレークポイントは親テーマに合わせる。
   ------------------------------------------------------------------ */

/* お悩みカテゴリーの絞り込み（押せると分かるボタン型にする） */
body.post-type-archive-voice .owned-cat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 1320px;
	margin: 50px auto 40px;
	padding: 0;
	list-style: none;
	gap: 12px;
}
body.post-type-archive-voice .owned-cat-list li {
	width: auto;
}
body.post-type-archive-voice .owned-cat-list li a {
	display: block;
	padding: 12px 28px;
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.05rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s;
}
body.post-type-archive-voice .owned-cat-list li a:hover,
body.post-type-archive-voice .owned-cat-list li a:focus-visible {
	border-color: #c20064;
	background: #fdf0f6;
	color: #c20064;
	opacity: 1;
}
/* 選択中は塗りつぶして、いまどこを見ているかを分かるようにする */
body.post-type-archive-voice .owned-cat-list li.is-current a {
	border-color: #c20064;
	background: #c20064;
	color: #fff;
}

/* 一覧のカード */
body.post-type-archive-voice .o-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 24px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}
body.post-type-archive-voice .o-list > li {
	width: auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}
body.post-type-archive-voice .o-list > li > a {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	box-sizing: border-box;
}
body.post-type-archive-voice .o-list__img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
body.post-type-archive-voice .o-list .voice-cat {
	font-size: 14px;
	color: #c20064;
	line-height: 1;
	margin-top: 10px;
	margin-bottom: 0;
}
body.post-type-archive-voice .o-list .title {
	font-size: 18px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	box-sizing: border-box;
	padding-inline-end: .35em;
}
body.post-type-archive-voice .voice-empty {
	margin: 60px auto;
	text-align: center;
	line-height: 1.9;
}

@media (max-width: 767.98px) {
	body.post-type-archive-voice .o-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	body.post-type-archive-voice .owned-cat-list {
		width: 90%;
		max-width: 90%;
		margin: 24px auto 28px;
		gap: 8px;
	}
	body.post-type-archive-voice .owned-cat-list li a {
		padding: 10px 18px;
		font-size: 14px;
	}
}
@media (min-width: 1024px) {
	body.post-type-archive-voice .o-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px 20px;
	}
}

/* 個別ページ（.single-owned を使わないので幅と見出しは自前で持つ） */
body.single-voice .voice-single {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
}
body.single-voice .voice-single__cat {
	margin: 0 0 12px;
	font-size: 14px;
}
body.single-voice .voice-single__cat a {
	color: #c20064;
	text-decoration: underline;
}
body.single-voice .voice-single__title {
	font-size: 30px;
	line-height: 1.5;
	font-weight: bold;
	margin: 0 0 28px;
}
body.single-voice .voice-single__img {
	margin-bottom: 36px;
}
body.single-voice .voice-single__img img {
	width: 100%;
	height: auto;
}
body.single-voice .voice-single__body h2 {
	font-size: 22px;
	line-height: 1.5;
	font-weight: bold;
	margin-top: 48px;
	margin-bottom: 20px;
	padding-left: 14px;
	border-left: 4px solid #c20064;
}
body.single-voice .voice-single__body h3 {
	font-size: 19px;
	line-height: 1.5;
	font-weight: bold;
	margin-top: 34px;
	margin-bottom: 14px;
}
body.single-voice .voice-single__body p {
	font-size: 16px;
	line-height: 1.95;
	margin-top: 0;
	margin-bottom: 1.6em;
}
body.single-voice .voice-related {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid #e5e5e5;
}
body.single-voice .voice-related h2 {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 20px;
}
body.single-voice .voice-related-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.single-voice .voice-related-list a {
	font-size: 16px;
	line-height: 1.6;
	text-decoration: underline;
	overflow-wrap: anywhere;
}
body.single-voice .voice-single__cta {
	margin-top: 56px;
	text-align: center;
}
body.single-voice .voice-single__cta a {
	display: inline-block;
	padding: 16px 40px;
	border-radius: 999px;
	background: #c20064;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
@media (max-width: 767.98px) {
	body.single-voice .voice-single__title {
		font-size: 24px;
	}
	body.single-voice .voice-related-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 一覧の下にフッターが詰まるので余白を確保する */
body.post-type-archive-voice main.contents,
body.single-voice main.contents {
	padding-bottom: 80px;
}
body.post-type-archive-voice .pagination {
	margin-top: 48px;
	text-align: center;
}
@media (max-width: 767.98px) {
	body.post-type-archive-voice main.contents,
	body.single-voice main.contents {
		padding-bottom: 48px;
	}
}

/* 親テーマは .single-owned .contents に margin-top:-50px を当てている。
   カテゴリーが2行に折り返すと一覧がその下へ潜り込むので打ち消す。 */
body.post-type-archive-voice main.contents {
	margin-top: 0;
}

/* ==================================================================
   /symptoms/「相談の多い症状」（2026/9/26 MTG 論点⑧）
   ・見出しのサイズとバランスを調整する
   ・症状名だけでなく、患者さまが自分ごとと分かる補足説明を見せる
   general.css の h2{font-size:100px} がそのまま効いており、
   見出しがタブボタンに覆いかぶさっていた。
   ================================================================== */

/* --- 見出し --- */
#page_symptoms .sec01 > h2,
#page_symptoms .sec02 > h2 {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 6px;
	font-size: 38px;
	line-height: 1.3;
	letter-spacing: 0;
	margin-bottom: 32px;
}
#page_symptoms .sec01 > h2 .en,
#page_symptoms .sec02 > h2 .en {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.12em;
	color: #c20064;
	opacity: .75;
}

/* --- タブの中身をカードにする --- */
#page_symptoms .tab-content ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#page_symptoms .tab-content ul li {
	display: block;
	padding: 0;
	margin: 0;
}
/* 親テーマのピンクの点は、カードにすると位置が合わないので消す */
#page_symptoms .tab-content ul li::before {
	content: none;
}
#page_symptoms .tab-content ul li a {
	display: block;
	height: 100%;
	padding: 16px 44px 16px 18px;
	border: 1px solid #ececec;
	border-left: 4px solid #c20064;
	border-radius: 6px;
	background: #fafafa;
	text-decoration: none;
	position: relative;
	transition: background-color .2s, border-color .2s;
}
#page_symptoms .tab-content ul li a:hover {
	background: #fdf0f6;
	border-color: #f0c3d8;
	border-left-color: #c20064;
	opacity: 1;
}
/* 押せることが分かるように矢印を置く */
#page_symptoms .tab-content ul li a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 2px solid #c20064;
	border-right: 2px solid #c20064;
	transform: rotate(45deg);
}
#page_symptoms .tab-content ul li a .sym-name {
	display: block;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.5;
	color: #0a0a0a;
}
#page_symptoms .tab-content ul li a .sym-note {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}

@media (min-width: 1024px) {
	#page_symptoms .tab-content ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767.98px) {
	#page_symptoms .sec01 > h2,
	#page_symptoms .sec02 > h2 {
		font-size: 26px;
		margin-bottom: 24px;
	}
	#page_symptoms .tab-content ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	#page_symptoms .tab-content ul li a {
		padding: 14px 38px 14px 14px;
	}
	#page_symptoms .tab-content ul li a .sym-name {
		font-size: 16px;
	}
	#page_symptoms .tab-content ul li a .sym-note {
		font-size: 13px;
	}
}

/* ==================================================================
   /plan/ 施術メニュー（2026/9/26 MTG 論点⑮ ／ D-10・A-14）
   「メニューの中身をちゃんと書きたい」「遷移させずにこの下にある感じ」
   <details> のネイティブ開閉を使っている（JavaScript不要）。
   元の <dl> の行と見た目が揃うように、点線と余白を合わせてある。
   ================================================================== */

#page_plan .plan-menu {
	border-bottom: 1px dotted #d1d1d1;
}
#page_plan .plan-menu > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 40px 18px 40px;
	font-size: 18px;
	list-style: none;
	cursor: pointer;
	position: relative;
	transition: background-color .2s;
}
/* Safari の三角マーカーを消す */
#page_plan .plan-menu > summary::-webkit-details-marker {
	display: none;
}
#page_plan .plan-menu > summary:hover {
	background: #fdf0f6;
}
#page_plan .plan-menu__name {
	font-weight: bold;
}
#page_plan .plan-menu__price {
	flex: 0 0 auto;
	font-weight: bold;
	white-space: nowrap;
}
/* 開けることが分かるように ＋／− を置く */
#page_plan .plan-menu > summary::after {
	content: "＋";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	text-align: center;
	color: #c20064;
	font-weight: bold;
}
#page_plan .plan-menu[open] > summary::after {
	content: "−";
}

/* 親テーマの #page_plan .plan > div:nth-child(2) div が
   padding:50px 0 / display:grid / min-width:620px を配下の div すべてに当てている。
   開いた中身にもそのまま乗って左右の余白が 0 になるため、
   同じ階層を挟んで詳細度を上げて打ち消す。 */
#page_plan .plan > div:nth-child(2) .plan-menu__body {
	display: block;
	min-width: 0;
	background: transparent;
	padding: 8px 40px 40px;
}
#page_plan .plan-menu__media {
	margin: 0 0 16px;
}
/* 動画（A-8）が入っても同じ枠に収まるよう 16:9 で固定する */
#page_plan .plan-menu__media img,
#page_plan .plan-menu__media video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 6px;
}
#page_plan .plan-menu__lead {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.9;
}
#page_plan .plan-menu__target {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fafafa;
	border-left: 3px solid #c20064;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.8;
}
#page_plan .plan-menu__target span {
	display: block;
	margin-bottom: 2px;
	font-weight: bold;
	color: #c20064;
}
#page_plan .plan-menu__link {
	margin: 0;
	font-size: 14px;
}
#page_plan .plan-menu__link a {
	text-decoration: underline;
}
#page_plan .plan-menu__link a::before {
	content: "▶ ";
	color: #c20064;
}

@media (max-width: 767.98px) {
	#page_plan .plan-menu > summary {
		padding: 16px 20px 16px 40px;
		font-size: 16px;
	}
	#page_plan .plan-menu > summary::after {
		left: 14px;
	}
	#page_plan .plan > div:nth-child(2) .plan-menu__body {
		padding: 8px 20px 32px;
	}
}

/* 開閉で右カラムの幅が変わらないようにする。
   親テーマは min-width:620px しか指定しておらず、.plan が flex なので
   開いた中身の最大幅にカラムが合わせて広がっていた（620px → 773px）。 */
#page_plan .plan > div:nth-child(2) > div {
	max-width: 620px;
}
#page_plan .plan-menu {
	min-width: 0;
}
#page_plan .plan-menu__lead,
#page_plan .plan-menu__target,
#page_plan .plan-menu__link {
	overflow-wrap: anywhere;
}