@charset "utf-8";
/* 症例写真（一覧・詳細・サイドバー・施術ページ下部のカード）
   文字色・差し色はテーマに合わせる（文字 #6d7b83、ピンク #f47ebb、薄いピンク #f4e9ea、青みのグレー #dde7ec） */

/* 症例の詳細はテーマの「投稿の詳細ページ」用の指定（左右の大きな余白・リンクの下線・画像の中央寄せ）を打ち消す */
body.single-case .pages { padding: 50px 30px; }
body.single-case .pages a { text-decoration: none; }
body.single-case .pages img { display: block; margin: 0; max-width: 100%; }
@media all and (max-width: 767px) {
	body.single-case .pages { padding: 3% 1%; }
}

/* 施術ページの一番下の症例カード */
.ope-cases { clear: both; max-width: 1100px; margin: 60px auto 0; text-align: left; }
.ope-cases .htag_title { margin-bottom: 30px; }
.pages p.ope-cases-more { margin-top: 30px; text-align: center; }
.ope-cases-more a { color: #e35f9b; text-decoration: underline; }
@media all and (max-width: 767px) {
	.ope-cases { margin-top: 40px; padding: 0 4%; }
}

/* 本文とサイドバー */
.case-layout { display: flex; align-items: flex-start; gap: 50px; text-align: left; }
.case-main { flex: 1; min-width: 0; }
.case-side { flex-shrink: 0; width: 280px; }
@media all and (max-width: 767px) {
	.case-layout { display: block; padding: 0 4%; }
	.case-side { width: auto; margin-top: 40px; }
}

.pages p.case-lead { margin: 0 0 24px; font-size: 1.5rem; }
.pages p.case-empty { padding: 60px 0; text-align: center; }
.case-lead a,
.case-card-more a,
.case-related a,
.case-back a { color: #e35f9b; text-decoration: underline; }

/* カード（PC 3列・スマホ 1列） */
.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
@media all and (max-width: 767px) {
	.case-cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.case-card { display: flex; flex-direction: column; border: 1px solid #e8e1e2; background: #fff; }
.case-card-link { display: block; color: inherit; text-decoration: none; }
.case-card-link:hover { opacity: .85; }
.case-card-img { aspect-ratio: 4 / 5; background: #f7f2f3; }
.case-card-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pages p.case-card-title {
	margin: 16px 16px 12px;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
	font-size: 1.7rem;
	line-height: 1.5;
	color: #4f6e7c;
}
/* 見出しが1行のカードと2行のカードで、写真の位置がそろうように2行分の高さを取る（PC の3列のとき） */
@media all and (min-width: 768px) {
	.pages p.case-card-title { min-height: 3em; }
}
.case-card-info { margin: 8px 16px 0; font-size: 1.3rem; line-height: 1.7; color: #6d7b83; }
.case-card-info dt { margin-top: 8px; font-weight: bold; color: #83949d; }
.case-card-info dd { margin: 0; }
.pages p.case-card-more { margin: auto 16px 16px; padding-top: 12px; font-size: 1.3rem; text-align: right; }

/* ページ送り */
.case-pager { margin-top: 50px; text-align: center; font-size: 1.4rem; }
.case-pager .page-numbers { display: inline-block; min-width: 40px; margin: 0 3px; padding: 8px 10px; border: 1px solid #dde7ec; color: #6d7b83; text-decoration: none; }
.case-pager .page-numbers.current { background: #83949d; border-color: #83949d; color: #fff; }

/* 詳細：上の帯は「症例写真」（文字はテーマの .main_visual h1 と同じ見た目にする） */
.main_visual .case-banner-title { font-size: 24px; color: #6d7b83; text-align: center; }
@media all and (max-width: 767px) {
	.main_visual .case-banner-title { font-size: 18px; }
}

/* 詳細：見出し（症例のタイトル）は写真のすぐ上。写真と同じ幅で中央に置く */
.case-detail-title {
	max-width: 560px;
	margin: 0 auto 24px;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
	font-size: 2.4rem;
	line-height: 1.6;
	color: #4f6e7c;
	text-align: center;
}
@media all and (max-width: 767px) {
	.case-detail-title { margin: 8px auto 16px; font-size: 1.9rem; }
}

/* 詳細：写真のカルーセル（1枚ずつ切り替え）。写真の下に説明（長い文も入るので左寄せ） */
.case-slider { position: relative; max-width: 560px; margin: 0 auto 60px; }
.case-photo { margin: 0; }
.case-photo img { display: block; width: 100%; height: auto; }
.case-photo figcaption {
	margin-top: 12px;
	padding: 12px 16px;
	background: #f4e9ea;
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: .05em;
	color: #6d7b83;
	text-align: left;
}
.case-slider .slick-prev,
.case-slider .slick-next { z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.case-slider .slick-prev { left: -22px; }
.case-slider .slick-next { right: -22px; }
.case-slider .slick-prev:before,
.case-slider .slick-next:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #6d7b83;
	border-right: 2px solid #6d7b83;
	opacity: 1;
}
.case-slider .slick-prev:before { transform: translate(-30%, -50%) rotate(-135deg); }
.case-slider .slick-next:before { transform: translate(-70%, -50%) rotate(45deg); }
.case-slider .slick-disabled { opacity: .3; }
.case-slider.slick-dotted { margin-bottom: 72px; } /* slick の margin-bottom: 30px だと点が下の線に重なる */
.case-slider .slick-dots { bottom: -40px; }
.case-slider .slick-dots li button:before { content: ""; top: 5px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: #83949d; opacity: .3; }
.case-slider .slick-dots li.slick-active button:before { opacity: 1; }
@media all and (max-width: 767px) {
	.case-slider { margin-bottom: 56px; }
	.case-slider .slick-prev { left: -8px; }
	.case-slider .slick-next { right: -8px; }
	.case-photo figcaption { font-size: 1.3rem; }
}

/* 詳細：担当医師・ロゴ */
.case-credit { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 0 30px; padding: 20px 0; border-top: 1px solid #dde7ec; border-bottom: 1px solid #dde7ec; }
.case-credit-logo { width: 120px; height: auto; }
.pages p.case-credit-doctor { margin: 0; font-size: 1.6rem; }
.case-credit-doctor span { margin-right: 12px; font-size: 1.3rem; color: #83949d; }
.case-credit-doctor a { color: #4f6e7c; }
@media all and (max-width: 767px) {
	.case-credit { flex-direction: column; gap: 12px; }
}

/* 詳細：施術名・施術の説明・料金・主なリスク・副作用など */
.case-info { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0 0 20px; font-size: 1.5rem; line-height: 1.8; color: #6d7b83; border-top: 1px solid #dde7ec; }
.case-info dt,
.case-info dd { margin: 0; padding: 14px 16px; border-bottom: 1px solid #dde7ec; }
.case-info dt { background: #f7f9fa; font-weight: bold; color: #4f6e7c; }
@media all and (max-width: 767px) {
	.case-info { display: block; font-size: 1.4rem; }
	.case-info dt { border-bottom: none; padding-bottom: 4px; }
	.case-info dd { padding-top: 4px; }
}
.pages p.case-note { font-size: 1.3rem; }

/* 詳細：この症例の施術 */
.case-related { margin: 40px 0 20px; padding: 20px 24px; background: #f7f9fa; }
.pages p.case-related-title { margin: 0 0 8px; font-weight: bold; color: #4f6e7c; }
.case-related ul { margin: 0; padding: 0; list-style: none; font-size: 1.5rem; }
.case-related li { padding: 4px 0; }
.case-related .case-related-list { margin-left: 16px; font-size: 1.3rem; }
@media all and (max-width: 767px) {
	.case-related .case-related-list { display: block; margin-left: 0; }
}
.pages p.case-back { margin-top: 30px; text-align: center; }

/* サイドバー */
.case-side-box { margin-bottom: 30px; }
.pages p.case-side-title {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #f4e9ea;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
	font-size: 1.6rem;
	color: #4f6e7c;
}
.pages p.case-side-subtitle { margin: 14px 0 4px; font-size: 1.4rem; font-weight: bold; color: #83949d; }
.case-side-list,
.case-side-list ul { margin: 0; padding: 0; list-style: none; }
.case-side-list ul { margin: 2px 0 8px 14px; }
.case-side-list a { display: block; padding: 4px 0; font-size: 1.4rem; line-height: 1.6; color: #6d7b83; text-decoration: none; }
.case-side-list a:hover { color: #e35f9b; }
.case-side-list a span { font-size: 1.2rem; color: #a6b2b8; }
.case-side-list a.is-current { color: #e35f9b; font-weight: bold; }
.case-side-group > a { font-weight: bold; color: #4f6e7c; }
.pages p.case-side-all { font-size: 1.4rem; }
.case-side-all a { color: #e35f9b; text-decoration: underline; }