/* ==========================================================================
   診療事例（case CPT）専用デザイン
   - common.css は非改変。/aga/ と case系ページ（一覧・カテゴリ別・詳細）でのみ enqueue。
   - すべて .c-case- / .p-medical-case 名前空間でスコープし既存FLOCSSクラスと衝突させない。
   - 配色は既存サイトから採る: navy #0A324E / teal #2F8DAC・#5EA3AF / 淡青 #EDF5F7 / pink #F2A9BB
   ========================================================================== */

.p-medical-case,
.c-case,
.c-case-cards,
.c-case-archive {
	--case-navy: #0A324E;
	--case-teal: #2F8DAC;
	--case-teal-d: #266571;
	--case-pale: #EDF5F7;
	--case-ink: #33404a;
	--case-muted: #6b7a86;
	--case-line: #dbe6ea;
}

/* --------------------------------------------------------------------------
   1. /aga/ のMENU直下に置くセクション
   -------------------------------------------------------------------------- */

/* 直前の .p-medical-servicemenu が padding-bottom:100px を持つため、上余白は足さない */
.p-medical-case {
	padding-bottom: 100px;
}

.p-medical-case .p-medical-hgroup {
	text-align: center;
}

/* 見出しの文字送りは MENU / PRICING と同じ挙動にする（.js-scroll-trigger → .is-active）。
   common.css 側の同等ルールは .p-medical-servicemenu / .p-medical-pricing に
   スコープされていて .p-medical-case には効かないため、ここで同じ内容を定義する。 */
.p-medical-case .p-medical-hgroup .p-section-title span,
.p-medical-case .p-medical-hgroup .p-section-subtitle span {
	opacity: 0;
}

.p-medical-case .p-medical-hgroup.is-active .p-section-title span,
.p-medical-case .p-medical-hgroup.is-active .p-section-subtitle span {
	display: inline-block;
	-webkit-animation: anim-reveal_text 0.2s forwards;
	animation: anim-reveal_text 0.2s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-delay: calc(var(--i) * 0.045s);
	animation-delay: calc(var(--i) * 0.045s);
}

.p-medical-case .p-medical-hgroup.is-active .p-section-title span {
	letter-spacing: -32%;
}

.p-medical-case .p-medical-hgroup.is-active .p-section-subtitle span {
	letter-spacing: -17%;
}

/* JS未実行・IntersectionObserver未対応でも文字が消えたままにならないようにする保険。
   （.u-content の実テキストは常に読めるが、装飾側も一定時間後には必ず出す） */
@media (prefers-reduced-motion: reduce) {
	.p-medical-case .p-medical-hgroup .p-section-title span,
	.p-medical-case .p-medical-hgroup .p-section-subtitle span {
		opacity: 1;
		-webkit-animation: none;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   2. カードグリッド（サムネイル＋タイトル）
   -------------------------------------------------------------------------- */

.c-case-cards {
	list-style: none;
	max-width: 1166px;
	margin: 45px auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.c-case-cards * {
	box-sizing: border-box;
}

.c-case-card {
	background-color: #FFFFFF;
	border: 1px solid var(--case-line);
	border-radius: 5px;
	overflow: hidden;
	transition: -webkit-transform 0.25s ease, box-shadow 0.25s ease;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	transition: transform 0.25s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease;
}

.c-case-card:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -22px rgba(10, 50, 78, 0.5);
}

.c-case-card__link,
.c-case-card__link:link,
.c-case-card__link:visited {
	color: var(--case-navy);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.c-case-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--case-pale);
	overflow: hidden;
}

.c-case-card__media img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
}

/* アイキャッチ未設定時のプレースホルダー（掲載要件チェックで警告済みだが表示は崩さない） */
.c-case-card__media--noimg::after {
	content: "CASE";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Cinzel", serif;
	font-size: 1.5rem;
	letter-spacing: 0.2em;
	color: #9db8c4;
}

.c-case-card__body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.c-case-card__cat {
	align-self: flex-start;
	background-color: var(--case-teal);
	color: #FFFFFF;
	font-size: 0.72rem;
	line-height: 1.6;
	padding: 3px 12px;
	border-radius: 999px;
	letter-spacing: 0.04em;
}

.c-case-card__title {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	font-size: 1.0625rem;
	line-height: 1.75;
	letter-spacing: 0.04em;
	color: var(--case-navy);
	margin: 0;
}

/* 一覧へのリンク */
.c-case-more {
	max-width: 1166px;
	margin: 40px auto 0;
	text-align: center;
}

.c-case-more a,
.c-case-more a:link,
.c-case-more a:visited {
	display: inline-grid;
	grid-template-columns: 1fr -webkit-max-content;
	grid-template-columns: 1fr max-content;
	align-items: center;
	-webkit-column-gap: 14px;
	-moz-column-gap: 14px;
	column-gap: 14px;
	background-color: #678499;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	padding: 16px 24px;
	border-radius: 5px;
	min-width: 240px;
	transition: background-color 0.25s ease;
}

.c-case-more a::after {
	content: "";
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 7h9" stroke="%23ffffff" stroke-linecap="round"/><path d="M7.5 3.5 11 7l-3.5 3.5" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
}

.c-case-more a:hover {
	background-color: var(--case-teal-d);
}

/* セクション末尾の注記。
   .p-medical-servicemenu-note（display:flex / justify-content:flex-end）は<p>1本前提のため
   流用せず、複数行の注記を素直に積める独立スタイルにする。字送り・サイズは同クラスに合わせる。 */
.c-case-note {
	max-width: 1166px;
	margin: 32px auto 0;
	font-size: 0.8125rem;
	line-height: 2.3;
	letter-spacing: 0.1em;
	color: var(--case-muted);
}

.c-case-note p {
	margin: 0;
	text-indent: -1em;
	padding-left: 1em; /* 「※」のぶら下げ */
}

.c-case-note a {
	color: var(--case-navy);
}

/* --------------------------------------------------------------------------
   3. 一覧ページ（/case/ ・ /case-cat/{slug}/）
   -------------------------------------------------------------------------- */

.c-case-archive {
	max-width: 1166px;
	margin: 0 auto;
	padding: 0 24px 96px;
	box-sizing: border-box;
}

.c-case-crumb {
	font-size: 0.8rem;
	color: var(--case-muted);
	margin: 0 0 24px;
	line-height: 1.7;
}

.c-case-crumb a,
.c-case-crumb a:link,
.c-case-crumb a:visited {
	color: var(--case-muted);
	text-decoration: none;
}

.c-case-crumb a:hover {
	color: var(--case-navy);
	text-decoration: underline;
}

.c-case-crumb span {
	margin: 0 0.5em;
	color: #c2ccd4;
}

.c-case-hero {
	text-align: center;
	margin: 0 0 12px;
}

.c-case-hero__eyebrow {
	font-family: "Cinzel", serif;
	letter-spacing: 0.3em;
	color: var(--case-teal);
	font-size: 0.85rem;
	margin: 0 0 10px;
}

.c-case-hero h1 {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.08em;
	margin: 0 0 16px;
}

.c-case-hero p {
	color: var(--case-ink);
	font-size: 0.95rem;
	line-height: 2;
	margin: 0 auto;
	max-width: 820px;
}

/* カテゴリ絞り込み */
.c-case-filter {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
}

.c-case-filter a,
.c-case-filter a:link,
.c-case-filter a:visited {
	display: inline-block;
	border: 1px solid var(--case-line);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 0.82rem;
	color: var(--case-navy);
	text-decoration: none;
	background-color: #FFFFFF;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-case-filter a:hover,
.c-case-filter .is-current a,
.c-case-filter .is-current a:link,
.c-case-filter .is-current a:visited {
	background-color: var(--case-teal);
	border-color: var(--case-teal);
	color: #FFFFFF;
}

.c-case-archive .c-case-cards {
	margin-top: 40px;
}

.c-case-empty {
	text-align: center;
	color: var(--case-muted);
	margin: 56px 0;
}

.c-case-pager {
	margin: 44px 0 0;
	text-align: center;
}

.c-case-pager .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 10px;
	margin: 0 3px;
	border: 1px solid var(--case-line);
	border-radius: 6px;
	color: var(--case-navy);
	text-decoration: none;
	font-size: 0.86rem;
}

.c-case-pager .page-numbers.current,
.c-case-pager .page-numbers:hover {
	background-color: var(--case-teal);
	border-color: var(--case-teal);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   4. 詳細ページ（/case/xxxx/）
   -------------------------------------------------------------------------- */

.c-case {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 24px 96px;
	box-sizing: border-box;
	color: var(--case-ink);
}

.c-case-head {
	border-bottom: 1px solid var(--case-line);
	padding-bottom: 24px;
	margin-bottom: 28px;
}

.c-case-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 14px;
}

.c-case-head__cat {
	background-color: var(--case-teal);
	color: #FFFFFF;
	font-size: 0.74rem;
	padding: 4px 13px;
	border-radius: 999px;
}

.c-case-head__attr {
	font-size: 0.8rem;
	color: var(--case-muted);
}

.c-case-head h1 {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 1.85rem;
	line-height: 1.65;
	letter-spacing: 0.06em;
	margin: 0;
}

.c-case-photo {
	margin: 0 0 28px;
}

.c-case-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.c-case-photo figcaption {
	font-size: 0.8rem;
	color: var(--case-muted);
	line-height: 1.9;
	margin-top: 10px;
}

.c-case-body {
	font-size: 1rem;
	line-height: 2.05;
}

.c-case-body h2 {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 1.35rem;
	line-height: 1.7;
	margin: 40px 0 16px;
	padding-left: 14px;
	border-left: 4px solid var(--case-teal);
}

.c-case-body h3 {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 1.12rem;
	margin: 30px 0 12px;
}

.c-case-body p {
	margin: 0 0 1.4em;
}

.c-case-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 限定解除要件の掲示ブロック（医療広告ガイドライン）。
   ここが欠けた状態では公開できない（inc/case-fields.php が公開をブロックする）。 */
.c-case-req {
	background-color: var(--case-pale);
	border-radius: 8px;
	padding: 26px 28px;
	margin: 40px 0 0;
}

.c-case-req__t {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 1.15rem;
	margin: 0 0 6px;
}

.c-case-req__lead {
	font-size: 0.84rem;
	color: var(--case-muted);
	line-height: 1.9;
	margin: 0 0 18px;
}

.c-case-req dl {
	margin: 0;
	display: grid;
	grid-template-columns: 12em 1fr;
	gap: 1px;
	background-color: var(--case-line);
	border: 1px solid var(--case-line);
	border-radius: 6px;
	overflow: hidden;
}

.c-case-req dt,
.c-case-req dd {
	background-color: #FFFFFF;
	margin: 0;
	padding: 14px 16px;
	font-size: 0.9rem;
	line-height: 1.9;
}

.c-case-req dt {
	background-color: #F7FBFC;
	color: var(--case-navy);
	font-weight: 600;
}

.c-case-req dd {
	white-space: pre-line; /* 入力欄の改行をそのまま活かす */
}

.c-case-req__contact {
	margin: 18px 0 0;
	font-size: 0.88rem;
	line-height: 2;
}

.c-case-req__contact a {
	color: var(--case-navy);
	font-weight: 600;
}

.c-case-author {
	margin: 28px 0 0;
	font-size: 0.9rem;
	color: var(--case-muted);
}

.c-case-author a {
	color: var(--case-navy);
}

.c-case-cta {
	margin: 44px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 16px;
}

.c-case-back {
	margin: 34px 0 0;
	text-align: center;
}

.c-case-back a,
.c-case-back a:link,
.c-case-back a:visited {
	color: var(--case-navy);
	text-decoration: none;
	font-size: 0.92rem;
}

.c-case-back a:hover {
	text-decoration: underline;
}

.c-case-back a::before {
	content: "← ";
}

.c-case-related {
	max-width: 1166px;
	margin: 64px auto 0;
}

.c-case-related__t {
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	color: var(--case-navy);
	font-size: 1.25rem;
	text-align: center;
	margin: 0;
}

.c-case-related .c-case-cards {
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   5. レスポンシブ
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1279px) {
	.c-case-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media screen and (max-width: 767px) {
	.p-medical-case {
		padding-bottom: 16vw;
	}

	.c-case-cards {
		margin: 4.8vw 8vw 0;
		gap: 4.8vw;
	}

	.c-case-card__body {
		padding: 3.2vw 3.4666666667vw 4vw;
		gap: 2.1333333333vw;
	}

	.c-case-card__title {
		font-size: 3.7333333333vw;
		line-height: 1.7;
	}

	/* 2カラムだとカード幅が約155pxしかなく、治療メニュー名の長いチップが
	   2行に折り返してカードが頭でっかちになる。字と余白を詰めて重心を下げる
	   （名称そのものは省略しない＝どの治療の事例かを一覧で必ず読めるようにする）。 */
	.c-case-card__cat {
		font-size: 2.6666666667vw;
		padding: 2px 10px;
		line-height: 1.7;
	}

	.c-case-more {
		margin: 6.4vw 8vw 0;
	}

	.c-case-more a,
	.c-case-more a:link,
	.c-case-more a:visited {
		width: 100%;
		min-width: 0;
		font-size: 3.4666666667vw;
	}

	.c-case-note {
		margin: 6.4vw 8vw 0;
	}

	.c-case-archive,
	.c-case {
		padding-left: 5.3333333333vw;
		padding-right: 5.3333333333vw;
	}

	.c-case-archive .c-case-cards {
		margin-left: 0;
		margin-right: 0;
	}

	.c-case-hero h1 {
		font-size: 1.45rem;
	}

	.c-case-head h1 {
		font-size: 1.35rem;
	}

	.c-case-req {
		padding: 20px 16px;
	}

	.c-case-req dl {
		grid-template-columns: 1fr;
	}

	.c-case-req dt {
		padding-bottom: 6px;
	}
}