/* =========================================================================
   ニキビLabo 2026（Figma: ニキビLP）
   SP 375px デザインを基準に、メイン列は最大 500px。
   PC（1280px〜）は左にメニュー・右に予約ボタンを置き、メイン列は中央固定（901:466）。
   ========================================================================= */

:root {
	--blue01: #0969c8;
	--blue02: #2e81c7;
	--blue05: #bad6ed;
	--blue06: #e3eff8;
	--pink01: #f0517d;
	--pink02: #f76b91;
	--tamago01: #ffff81;
	--tamago02: #fcffc6;
	--softblue01: #70a1cb;
	--softblue02: #a6c6e0;
	--gray01: #555;
	--gray02: #666;
	--gray03: #888;
	--text: #5a5a5a;
	--pale: #f0fafd;
	--line-pink: rgba(249, 213, 220, .6);
	--shadow: 0 5px 15px rgba(0, 0, 0, .05);
	--r: 10px;
	--col: 500px;
	--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-title: "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
	--font-en: Jost, "Noto Sans JP", sans-serif;
	--header-h: 50px;
	--floating-h: 70px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--gray02);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
mark { background: none; color: inherit; }
.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--softblue02); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .1em;
}
:focus-visible { outline: 2px solid var(--blue01); outline-offset: 2px; }
.u-line { background: linear-gradient(transparent 62%, var(--line-pink) 62%, var(--line-pink) 90%, transparent 90%); }

/* ---------- layout ---------- */
.l-col {
	position: relative;
	width: 100%;
	max-width: var(--col);
	margin: 0 auto;
	background: #fff;
	min-height: 100vh;
	padding-bottom: var(--floating-h);
}
.l-pc-bg, .l-pc-nav, .l-pc-cta { display: none; }

@media (min-width: 768px) {
	body { background: #c5e4fa; }
	.l-col { box-shadow: 0 4px 7px rgba(0, 0, 0, .15); }
	.l-pc-bg { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #c5e4fa; }
	.l-pc-bg img { position: absolute; max-width: none; }
	.l-pc-bg__e1 { width: 692px; left: -190px; top: -250px; transform: rotate(-17.37deg); }
	.l-pc-bg__e2 { width: 1356px; left: -650px; bottom: -40px; transform: rotate(-.92deg); }
	.l-pc-bg__e3 { width: 678px; right: -110px; top: 245px; transform: rotate(-12.43deg); }
}
@media (min-width: 1024px) {
	.l-col { padding-bottom: 0; }
}
@media (min-width: 1280px) {
	.l-pc-nav, .l-pc-cta {
		display: flex; position: fixed; top: 0; bottom: 0; width: calc((100% - var(--col)) / 2);
		align-items: center; justify-content: center; overflow-y: auto;
	}
	/* メニューの開始位置は固定（ロゴの下）。アコーディオンは下へ開く（指示 26） */
	.l-pc-nav { left: 0; align-items: flex-start; padding: 108px 0 24px; overflow: hidden; }
	.l-pc-cta { right: 0; }
	/* PC は左のサイドメニューがあるのでヘッダーとハンバーガーは出さない */
	:root { --header-h: 0px; }
	.c-header, .c-spmenu { display: none !important; }
	html { scroll-padding-top: 20px; }
	.l-pc-nav__logo { position: absolute; top: 34px; left: 50px; }
	.l-pc-nav__logo img { width: 122px; }
	.l-pc-nav__inner { width: 230px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* 収まらない分はメニュー内でスクロール */
	.l-pc-nav__title {
		display: inline-block; margin-bottom: 30px; color: var(--blue01);
		font: 700 24px/1.2 var(--font-en); letter-spacing: .1em; border-bottom: 1.2px solid var(--blue01);
	}
	.l-pc-cta .c-cta { width: 340px; }
}

/* ---------- header ---------- */
.c-header {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 11px;
	height: var(--header-h); padding: 0 10px 0 17px; background: #fff;
}
.c-header__logo { display: block; line-height: 0; }
.c-header__logo img { width: 86px; }
.c-header__sub { flex: 1; color: var(--gray01); font: 500 12px/1 var(--font-title); letter-spacing: -.04em; white-space: nowrap; }
.c-header__menu { position: relative; width: 40px; height: 40px; }
.c-header__menu span { position: absolute; left: 9px; width: 22px; height: 1px; background: var(--text); transition: transform .25s, top .25s; }
.c-header__menu span:first-child { top: 16px; }
.c-header__menu span:last-child { top: 23px; }
.c-header__menu[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(30deg); }
.c-header__menu[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-30deg); }

/* ---------- SP menu (903:1446) ---------- */
.c-spmenu {
	position: fixed; z-index: 25; top: var(--header-h); bottom: 0;
	left: max(0px, calc(50% - var(--col) / 2)); width: min(100%, var(--col));
	overflow-y: auto; overscroll-behavior: contain; background: var(--pale);
}
.c-spmenu[hidden] { display: none; }
.c-spmenu__body { padding: 20px 30px calc(var(--floating-h) + 35px); }
.c-spmenu__sub { display: grid; gap: 20px; margin-top: 25px; padding-left: 2px; font-size: 11px; line-height: 12px; letter-spacing: .02em; }
.c-spmenu__sub a { color: var(--gray03); text-decoration: none; }
body.is-menu-open { overflow: hidden; }

.c-nav { color: var(--blue01); }
.c-nav__link, .c-nav__toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	font-weight: 700; text-decoration: none; text-align: left;
}
.c-nav--sp .c-nav__item { border-bottom: 1px solid var(--blue05); }
.c-nav--sp .c-nav__item--group + .c-nav__item--group { border-top: 0; }
.c-nav--sp .c-nav__link, .c-nav--sp .c-nav__toggle { padding: 18px 5px 17px 2px; font-size: 16px; line-height: 1.4; letter-spacing: .05em; }
.c-nav--sp .c-nav__link::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.c-nav__toggle::after { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transition: transform .2s; }
.c-nav__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.c-nav__sub[hidden] { display: none; }
.c-nav__sub a { display: flex; align-items: center; gap: 8px; padding: 10px 5px 10px 2px; color: var(--blue01); text-decoration: none; letter-spacing: .05em; line-height: 1.4; }
.c-nav__sub a::before { content: ""; flex: none; width: 15px; height: 1px; background: var(--blue05); }
.c-nav--sp .c-nav__sub { padding-bottom: 8px; }
.c-nav--sp .c-nav__sub a { font-size: 14px; }

.c-nav--pc { display: grid; gap: 15px; }
.c-nav--pc .c-nav__link, .c-nav--pc .c-nav__toggle { justify-content: flex-start; gap: 6px; font: 700 15px/1.4 var(--font-title); letter-spacing: .05em; }
.c-nav--pc .c-nav__toggle::after { border-left-width: 7px; border-right-width: 7px; border-top-width: 9px; }
.c-nav--pc .c-nav__sub { margin-top: 10px; }
.c-nav--pc .c-nav__sub a { padding: 10px 5px 10px 2px; font: 600 13px/1.4 var(--font-title); letter-spacing: .05em; } /* お悩み・治療プロセスの下層は同じ太さ（吉田さん指示 25） */
.c-nav--pc .c-nav__link:hover, .c-nav__sub a:hover { opacity: .7; }

/* SNS アイコン（PC 左メニューの下は左寄せ、SP メニューの下は中央） */
.c-sns { display: flex; align-items: center; gap: 20px; }
.c-sns a { display: block; line-height: 0; }
.c-sns img { display: block; width: auto; height: 24px; }
.c-sns:hover a { opacity: .7; }
.c-sns a:hover { opacity: 1; }
.c-sns--pc { margin-top: 30px; }
.c-sns--sp { justify-content: center; margin-top: 40px; }

/* ---------- breadcrumb ---------- */
.c-breadcrumb { background: var(--pale); padding: 11px 14px; font-size: 10.5px; line-height: 1.7; color: var(--gray03); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 5px; }
.c-breadcrumb li { display: flex; gap: 5px; min-width: 0; }
.c-breadcrumb li + li::before { content: "›"; color: #98a1ab; }
.c-breadcrumb a { text-decoration: none; }
.c-breadcrumb [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; }

/* ---------- parts ---------- */
.c-title { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 20px; text-align: center; }
.c-title__en {
	padding: 0 8px 16px; opacity: .6; color: var(--blue01);
	font: 700 12px/1 var(--font-en); letter-spacing: .14em;
	background: radial-gradient(circle, var(--blue01) 1px, transparent 1.2px) left bottom / 6px 2px repeat-x;
	min-width: 160px;
}
.c-title__ja { color: var(--blue01); font: 700 25px/1.2 var(--font-title); letter-spacing: .07em; }
.c-title__ja span { padding: 0 6px; background: linear-gradient(transparent 52%, var(--tamago02) 52%, var(--tamago02) 100%); }
.c-title__ja small { font-size: 22px; letter-spacing: .04em; }
.c-title--s .c-title__ja { font-size: 18px; }
.c-title--s .c-title__ja span { background: linear-gradient(transparent 55%, var(--tamago02) 55%, var(--tamago02) 100%); }

.c-btn {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 290px; max-width: 100%; height: 45px; margin: 0 auto; border-radius: 30px;
	background: var(--blue02); color: #fff; text-decoration: none;
	font: 700 15px/1.2 var(--font-title); letter-spacing: .02em;
}
.c-btn::after { content: ""; position: absolute; right: 38px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.c-btn:hover { opacity: .85; }

.c-pill { display: inline-block; padding: 5px 10px; border-radius: 40px; background: var(--blue02); color: #fff; font-size: 12px; line-height: 17.85px; }

.c-doctor { display: flex; align-items: center; justify-content: space-around; gap: 14px; }
.c-doctor__text { display: grid; gap: 5px; }
.c-doctor__label { color: var(--softblue01); font-size: 12px; font-weight: 500; line-height: 1.8; }
.c-doctor__name { color: var(--blue01); font-size: 19px; font-weight: 700; line-height: 1.61; letter-spacing: .11em; }
.c-doctor__title { color: var(--blue01); font-size: 12px; line-height: 1.39; }
.c-doctor__photo { flex: none; width: 99px; height: 99px; border-radius: 50%; object-fit: cover; }

.c-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.c-tags li, .c-tags a {
	display: inline-block; padding: 5px 12px; border: 1px solid #dceaf6; border-radius: 20px; background: #fff;
	color: var(--blue02); font-size: 12px; line-height: 19.55px; text-decoration: none;
}
.c-tags .c-tags__cat { padding: 0; border: 0; background: none; }
.c-tags .c-tags__cat a { border-color: var(--blue02); background: var(--blue02); color: #fff; }
.c-tags .c-tags__tag { padding: 0; border: 0; background: none; }
.c-tags a:hover { opacity: .7; }
.c-tags--chips li { padding: 0; border: 0; background: none; }
.c-tags--chips a { background: #f4f9fd; color: var(--gray02); }
.c-tags--chips a[aria-current] { background: var(--blue02); border-color: var(--blue02); color: #fff; }

.c-cards { display: grid; gap: 11px; }
.c-card__link {
	display: flex; gap: 12px; padding: 12px; border: 1px solid var(--softblue02); border-radius: var(--r);
	background: #fff; box-shadow: var(--shadow); text-decoration: none;
}
.c-card__thumb { flex: none; width: 96px !important; height: 96px !important; max-width: none; border-radius: 6px; object-fit: cover; background: #d9d9d9; }
.c-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-card__title { color: var(--blue01); font-size: 15px; font-weight: 700; line-height: 1.26; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-card__excerpt { color: var(--gray02); font-size: 12px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-card__date { margin-top: auto; color: var(--gray03); font-size: 10px; line-height: 1.2; }

.c-pager { padding: 16px 16px 22px; }
.c-pager ul { display: flex; justify-content: center; gap: 5px; }
.c-pager a, .c-pager span {
	display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	border: 1px solid var(--softblue02); border-radius: 6px; color: var(--gray02); font-size: 11.5px; text-decoration: none;
}
.c-pager .current { background: var(--blue02); border-color: var(--blue02); color: #fff; }
.c-pager .dots { border: 0; }

/* CTA（124:4037） */
.c-cta-band { padding: 30px 0 25px; background: #fff4f8; }
.c-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.c-cta__shoulder { color: var(--gray01); font: 700 14px/1.4 var(--font-title); text-align: center; }
.c-cta__shoulder em { font-style: normal; color: var(--pink01); }
.c-cta__shoulder b { font-size: 18px; }
.c-cta__btn {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	width: 330px; max-width: calc(100% - 30px); height: 77px; padding-left: 50px; border-radius: 100px;
	background: var(--pink02); color: #fff; text-decoration: none; box-shadow: var(--shadow);
	font-family: var(--font-title); font-weight: 700;
}
.c-cta__btn:hover { opacity: .9; }
.c-cta__24h { color: var(--tamago01); font-size: 14px; line-height: 1; }
.c-cta__label { font-size: 17px; line-height: 1.1; letter-spacing: .02em; }
.c-cta__label small { font-size: 14px; }
.c-cta__free {
	position: absolute; left: 9.5px; top: 10px; width: 57px; height: 57px;
	display: flex; align-items: center; justify-content: center; color: var(--pink01); font-size: 14px; letter-spacing: .08em;
}
.c-cta__free { isolation: isolate; }
.c-cta__free img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.c-cta__kira { position: absolute; pointer-events: none; }
.c-cta__kira--1 { right: 5%; top: 7.75%; }
.c-cta__kira--2 { right: 8%; top: 20%; }
.c-cta__kira--3 { left: 8%; top: 12.4%; }

/* フローティング（SP 固定下部） */
.c-floating {
	position: fixed; z-index: 20; bottom: 0; left: max(0px, calc(50% - var(--col) / 2));
	display: flex; gap: 1px; width: min(100%, var(--col)); height: var(--floating-h); background: #fff;
	font-family: var(--font-title); font-weight: 700;
}
.c-floating a { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px 8px; color: #fff; text-decoration: none; text-align: center; font-size: 16px; line-height: 1.1; letter-spacing: .02em; }
.c-floating__lp { background: var(--pink02); flex-basis: 194px; }
.c-floating__tel { background: var(--blue01); }
.c-floating__tel span:last-child { display: grid; text-align: left; }
.c-floating__tel b { font-size: 16px; line-height: 1.2; }
.c-floating__tel small { font-weight: 500; font-size: 12px; line-height: 1.6; }
.c-floating__badge {
	position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
	height: 22px; padding: 4px 12px; border-radius: 12px; background: #fff; white-space: nowrap;
	font-size: 12px; line-height: 1.1; letter-spacing: 0;
}
.c-floating__lp .c-floating__badge { border: 1.5px solid var(--pink02); color: var(--pink02); }
.c-floating__tel .c-floating__badge { border: 2px solid var(--blue01); color: var(--blue01); }
@media (min-width: 1024px) { .c-floating { display: none; } }

.c-footer { padding: 16px 14px; background: var(--pale); color: var(--gray03); font-size: 10px; line-height: 18px; text-align: center; }
.c-footer a { color: inherit; text-decoration: none; }
.c-footer span { margin: 0 .8em; }
.c-footer__copy { margin-top: 4px; }

.c-pagetop { display: none; }
@media (min-width: 1280px) {
	.c-pagetop {
		display: block; position: fixed; right: 120px; bottom: 20px; z-index: 10; width: 60px; height: 60px;
		border-radius: 50%; background: #fff; box-shadow: var(--shadow);
	}
	.c-pagetop::before { content: ""; position: absolute; left: 50%; top: 24px; width: 12px; height: 12px; margin-left: -6px; border-top: 2px solid #b0b8c0; border-left: 2px solid #b0b8c0; transform: rotate(45deg); }
	.c-pagetop::after { content: ""; position: absolute; left: 50%; top: 24px; width: 2px; height: 16px; margin-left: -1px; background: #b0b8c0; }
}

/* =========================================================================
   TOP（587:8867）
   ========================================================================= */
.p-fv { background: #fdfeff; }
.p-fv__visual { position: relative; overflow: hidden; aspect-ratio: 375 / 390; background: #d4eefe; }
.p-fv__circle { position: absolute; border-radius: 50%; }
.p-fv__circle--1 { width: 89.9%; aspect-ratio: 1; left: 70.7%; top: 42.9%; background: #007ed3; }
.p-fv__circle--2 { width: 63.7%; aspect-ratio: 1; left: 60.8%; top: -25.6%; background: #a4e5fe; }
.p-fv__circle--3 { width: 63.7%; aspect-ratio: 1; left: -29.3%; top: -38.5%; background: var(--blue02); }
.p-fv__circle--4 { width: 63.7%; aspect-ratio: 1; left: 28.8%; top: 56.4%; background: #f9fcff; }
.p-fv__circle--5 { width: 83.7%; aspect-ratio: 1; left: -38.4%; top: 38.5%; background: #c5e4fa; }
.p-fv__board {
	position: absolute; left: 50%; top: 5.9%; transform: translateX(-50%);
	width: 85.3%; height: 41%; padding-top: 4.6%; border-bottom: 3px solid var(--blue02); background: #fdfeff; text-align: center;
}
.p-fv__logo img { width: 81%; }
.p-fv__copy { margin-top: 4%; color: var(--blue02); font: 700 clamp(17px, 4.6vw, 22px)/1.61 var(--font-title); letter-spacing: .02em; }
.p-fv__copy mark { padding: 0 3px; background: var(--blue02); color: var(--tamago01); font-size: 1.06em; }
.p-fv__illust { position: absolute; left: -3.2%; bottom: 0; width: 104.5%; max-width: none; }
.p-fv__supervisor { padding: 8px 6px; color: var(--gray01); font-size: clamp(11px, 3.4vw, 13px); line-height: 1.61; text-align: center; letter-spacing: .02em; }

.p-doctor { position: relative; padding: 60px 17px 35px; background: var(--blue06) url(../img/doctor-bg.webp) top center / 100% auto no-repeat; }
.p-doctor__card {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 340px; margin: 10px auto 0; padding: 15px 15px 20px;
	border: 1px solid var(--softblue02); border-radius: var(--r); background: #fff;
}
.p-doctor__bio, .p-doctor__message { color: var(--gray02); font-size: 14px; line-height: 1.8; }
.p-doctor__message b { font-weight: 700; }
.p-doctor__message em { font-style: normal; font-weight: 700; color: var(--pink01); }
.p-doctor__quote {
	position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 0;
	border-radius: 5px; background: var(--tamago02); box-shadow: 0 4px 3px rgba(0, 0, 0, .1); opacity: .9;
}
.p-doctor__quote img { align-self: flex-end; width: 60px; height: 69px; border-radius: 5px 0 0 5px; object-fit: cover; margin-bottom: -10px; }
.p-doctor__quote p {
	color: var(--gray01); font: 800 14px/1.8 "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; letter-spacing: -.02em; white-space: nowrap;
	/* 2行目「ひどいニキビに悩んだ経験があります」17字が必ず1行に収まるよう、カード幅（340px 上限）から逆算して縮める */
	font-size: min(14px, calc((min(100vw - 34px, 340px) - 114px) / 16.8));
}
@media (max-width: 359px) {
	.p-doctor__quote { gap: 8px; padding-right: 8px; }
	.p-doctor__quote img { width: 48px; height: 55px; }
	.p-doctor__quote p { font-size: min(14px, calc((100vw - 34px - 30px - 48px - 8px - 8px) / 16.8)); }
}
.p-doctor .c-btn { height: 50px; font-size: 14px; }

.p-record { padding: 10px 17px 35px; background: var(--blue06); text-align: left; }
.p-record__lead { max-width: 313px; margin: 0 auto 20px; font-size: 14px; }
.p-record__slider { position: relative; max-width: 340px; margin: 0 auto; }
.p-record__track { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.p-record__track::-webkit-scrollbar { display: none; }
.p-record__slide { display: flex; flex: 0 0 100%; scroll-snap-align: center; } /* 一番高いカードに高さを揃える（4） */
.p-record__slide > .c-case { width: 100%; align-content: start; }
/* 左右の矢印（Figma 594:19781）。1枚目は右だけ・最後は左だけ（main.js が hidden を切り替える） */
.p-record__arrow {
	position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 1px solid var(--blue05); border-radius: 50%;
	background: #fff; box-shadow: var(--shadow);
}
.p-record__arrow { display: none; } /* JS が無いと動かないので、JS が有効（html.js）のときだけ出す */
.js .p-record__arrow:not([hidden]) { display: block; }
.p-record__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -6px; border-top: 2px solid var(--blue01); border-right: 2px solid var(--blue01); transform: rotate(45deg); }
.p-record__arrow--prev { left: -12px; }
.p-record__arrow--prev::before { margin-left: -3px; transform: rotate(-135deg); }
.p-record__arrow--next { right: -12px; }
.p-record__arrow:hover { background: var(--blue06); }
.p-record__dots { display: flex; justify-content: center; gap: 8px; margin: 15px 0 0; }
.p-record__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue05); }
.p-record__dots .is-active { background: var(--blue01); }
.p-record__note { max-width: 340px; margin: 10px auto 24px; color: var(--gray03); font-size: 10.5px; line-height: 1.6; }

.p-nayami { position: relative; padding: 35px 17px; background: #fff; }
.p-nayami__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 162px)); justify-content: center; gap: 16px 15px; padding-top: 10px; }
.p-nayami__grid a {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	height: 160px; padding: 10px; border: 1px solid var(--blue01); border-radius: var(--r); background: #f6fcff;
	color: var(--blue01); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.6; text-align: center;
}
.p-nayami__grid img { width: 140px; height: 85px; object-fit: contain; }
.p-nayami__grid span { position: relative; padding-right: 14px; }
.p-nayami__grid span::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.p-nayami__deco { position: absolute; left: 26%; top: 322px; pointer-events: none; }

.p-steps { position: relative; overflow: hidden; padding: 35px 17px; background: var(--blue06); }
.p-steps::before, .p-steps::after { content: ""; position: absolute; z-index: 0; width: 173px; height: 173px; background: url(../img/deco-ring.svg) center / contain no-repeat; pointer-events: none; }
.p-steps::before { left: -79px; top: -93px; }
.p-steps::after { right: -119px; bottom: -22px; }
.p-steps .c-title__ja span { background: url(../img/marker-steps.svg) center 62% / 100% 15px no-repeat; }
.p-steps__list { position: relative; z-index: 1; max-width: 345px; margin: 0 auto; } /* 水色の円はカードの背面（10） */
.p-steps__item { position: relative; display: flex; gap: 10px; padding-bottom: 12px; }
.p-steps__item:last-child { padding-bottom: 0; }
.p-steps__badge {
	position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; margin-top: 30px; border-radius: 50%; background: var(--blue01); color: #fff; font-size: 16px; font-weight: 700;
}
.p-steps__item:not(:last-child)::before { content: ""; position: absolute; left: 20px; top: 72px; bottom: -30px; width: 2px; background: var(--blue01); }
.p-steps__card {
	position: relative; flex: 0 1 300px; display: flex; align-items: center; gap: 8px; padding: 10px 22px 10px 10px;
	border: 1px solid var(--blue01); border-radius: var(--r); background: #f6fcff; text-decoration: none;
}
.p-steps__card::after { content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--blue01); font-size: 20px; font-weight: 700; }
.p-steps__icon { flex: none; width: 72px; height: 72px; object-fit: contain; }
.p-steps__text { display: grid; gap: 4px; min-width: 0; }
.p-steps__text b { color: var(--blue01); font-size: 14px; line-height: 1.55; letter-spacing: -.05em; } /* 14px で「…スキンケアで」の「で」だけ折り返さないよう詰める */
.p-steps__text small { color: var(--gray02); font-size: 10px; font-weight: 500; line-height: 1.55; }
.p-steps__photo-note {
	justify-self: start; position: relative; margin-top: 4px; padding: 0 10px; border-radius: 10px; background: var(--blue02);
	color: #fff; font-size: 11px; font-weight: 700; line-height: 1.55; text-align: center; white-space: nowrap;
}
/* 375px 未満は、アイコン・バッジ・すき間を詰めて、見出しの行数を 375px と同じにする（14px は 375px 以上で守る） */
@media (max-width: 374px) {
	.p-steps__item { gap: 6px; }
	.p-steps__badge { width: 34px; height: 34px; font-size: 14px; }
	.p-steps__item:not(:last-child)::before { left: 16px; }
	.p-steps__icon { width: 64px; height: 64px; }
	.p-steps__text b { font-size: clamp(11px, calc((100vw - 178px) / 11.4), 14px); }
}
.p-steps__photos { display: flex; gap: 4px; }
.p-steps__photos img { flex: none; width: 50px; height: 49px; object-fit: cover; border-radius: 2px; }

.p-popular { padding: 35px 17px; background: #fff; }
.p-popular__list { max-width: 340px; margin: 10px auto 24px; padding: 15px; border: 1px solid var(--softblue02); border-radius: var(--r); background: #fff; }
.p-popular__list li + li { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--blue05); }
.p-popular__list a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.p-popular__thumb { flex: none; width: 66px !important; height: 66px !important; max-width: none; object-fit: cover; margin-left: 15px; background: #d9d9d9; }
.p-popular__text { display: grid; gap: 2px; min-width: 0; padding-right: 10px; }
.p-popular__text b { color: var(--blue01); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-popular__text small { color: var(--gray02); font-size: 12px; line-height: 1.5; }

/* 症例カード（TOP・症例一覧共通） */
.c-case { display: grid; gap: 10px; padding: 15px 15px 10px; border: 1px solid var(--softblue02); border-radius: var(--r); background: #fff; }
.c-case__no { justify-self: start; padding: 0 10px; border-radius: 3px; background: #8fbbe7; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.6; }
.c-case__no small { font-size: 14px; }
.c-case__period { color: var(--gray02); font-size: 14px; font-weight: 500; }
.c-case__period b { color: var(--blue01); font-size: 18px; }
.c-case__photos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-bottom: 22px; counter-reset: step; }
.c-case__photos li { display: grid; justify-items: center; gap: 5px; }
.c-case__photos img, .c-case__photos .is-placeholder { width: 100%; aspect-ratio: 102 / 76; object-fit: cover; }
.c-case__label { position: relative; color: var(--blue01); font-size: 14px; font-weight: 500; line-height: 1.8; }
.c-case__label::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--blue01); box-shadow: 0 0 0 2px #fff; z-index: 1; }
.c-case__photos::after { content: ""; position: absolute; left: 16.6%; right: 16.6%; bottom: 5.5px; height: 2px; border-radius: 50px; background: #b0d4f1; }
.c-case__desc { position: relative; padding: 0 0 10px 15px; color: var(--gray02); font-size: 14px; line-height: 1.8; letter-spacing: -.03em; }
.c-case__desc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 10px; width: 7px; border-radius: 40px; background: #b0d4f1; }
.c-case__desc em { display: block; font-style: normal; font-weight: 500; color: var(--pink01); }
.c-case__treat { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-top: 1px dashed var(--blue05); padding-top: 10px; }
.c-case__treat-badge { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue02); color: #fff; font-size: 14px; font-weight: 500; }
.c-case__treat ul { color: var(--blue01); font-size: 14px; font-weight: 500; line-height: 1.5; }
.c-case__treat li::before { content: "・"; }
.c-case__info { display: grid; gap: 2px; padding-top: 8px; border-top: 1px dashed var(--blue05); color: var(--gray02); font-size: 12px; line-height: 1.6; } /* 月額・リスク・副作用は見出しなしの2行。12px は吉田さん指示 6 のまま（限定解除の要件） */

/* =========================================================================
   記事詳細（792:5808）
   ========================================================================= */
.p-single__head { padding: 20px 16px 15px; text-align: center; }
.p-single__head .c-pill { margin-bottom: 16px; }
.p-single__title {
	padding-top: 16px; color: var(--blue01); font: 700 22px/1.5 var(--font-title); letter-spacing: .05em;
	background: radial-gradient(circle, var(--blue01) 1px, transparent 1.2px) center top / 6px 2px repeat-x;
}
.p-single__title span { background: linear-gradient(transparent 60%, var(--tamago02) 60%, var(--tamago02) 92%, transparent 92%); }
.p-single__dates { display: flex; gap: 14px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #eef2f6; color: var(--gray03); font-size: 10.5px; }
.p-single__box { display: grid; gap: 20px; max-width: 340px; margin: 10px auto 18px; padding: 15px 15px 20px; border-radius: var(--r); background: var(--blue06); }
.is-noimage { object-fit: cover; background: var(--blue06); }
.p-single__eyecatch img, .p-single__eyecatch .is-placeholder { width: 100%; height: auto; aspect-ratio: 313 / 180; object-fit: cover; border-radius: 5px; }
.p-toc__title { color: var(--blue02); font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 5px; }
.p-toc a { display: block; text-decoration: none; }
.p-toc__h2 a { padding: 5px 0 5px 22px; color: var(--gray02); font-size: 14px; font-weight: 500; line-height: 1.27; }
.p-toc__h3 a { position: relative; padding: 4.5px 0 4.8px 32px; color: var(--gray03); font-size: 14px; font-weight: 500; line-height: 1.16; }
.p-toc__h3 a::before { content: "—"; position: absolute; left: 10px; color: #98a1ab; font-size: 10.5px; }
.p-toc a:hover { color: var(--blue01); }
.p-toc.is-collapsed ol { max-height: 290px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.p-toc__more { display: block; margin: 10px auto 0; padding: 6px 18px; border: 1px solid var(--blue02); border-radius: 20px; background: #fff; color: var(--blue02); font-size: 12px; font-weight: 700; }

.p-single__doctor { display: grid; gap: 20px; max-width: 340px; margin: 30px auto 20px; padding: 15px 15px 20px; border-radius: var(--r); background: var(--blue06); }
.p-single__doctor > p { font-size: 14px; line-height: 1.8; }
.p-single__doctor .c-btn { height: 50px; font-size: 14px; }
.p-single__tags { max-width: 340px; margin: 0 auto 30px; }
.p-single__tags > p { margin-bottom: 8px; color: var(--gray03); font-size: 12px; line-height: 17px; }
.p-single--page { padding-bottom: 30px; }
.p-related { padding: 35px 15px; }

/* ---------- 本文（既存記事の HTML をそのまま受ける） ---------- */
.p-entry { padding: 0 17px; color: var(--gray02); font-size: 14px; line-height: 1.85; }
.p-entry > * + * { margin-top: 15px; }
.p-entry p { margin-top: 15px; }
.p-entry h2 {
	position: relative; margin: 36px 0 18px; padding: 6px 0 8px; border-bottom: 2px solid var(--blue05);
	color: var(--blue01); font-size: 19px; font-weight: 700; line-height: 1.35;
}
.p-entry h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 60px; height: 2px; background: var(--blue01); }
.p-entry h3 { margin: 28px 0 15px; padding-left: 11px; border-left: 4px solid var(--blue02); color: var(--gray02); font-size: 15px; font-weight: 700; line-height: 1.4; }
.p-entry h4, .p-entry h5, .p-entry h6 { margin: 22px 0 10px; color: var(--blue01); font-size: 14px; font-weight: 700; line-height: 1.5; }
.p-entry strong, .p-entry b { color: var(--pink01); font-weight: 700; }
/* 旧記事の強調（インラインの #ff6600）をデザインのピンク太字に寄せる */
.p-entry [style*="color: #ff6600"], .p-entry [style*="color:#ff6600"] { color: var(--pink01) !important; font-weight: 700; }
.p-entry [style*="font-size: 10px"], .p-entry [style*="font-size: 12px"] { font-size: 12px !important; }
.p-entry mark, .p-entry .marker { background: linear-gradient(transparent 55%, var(--tamago01) 55%); color: inherit; }
.p-entry a { color: var(--blue02); text-decoration: underline; text-underline-offset: 2px; }
.p-entry a:has(> img) { text-decoration: none; }
.p-entry ul, .p-entry ol { padding-left: 1.4em; }
.p-entry ul { list-style: disc; }
.p-entry ol { list-style: decimal; }
.p-entry li + li { margin-top: 4px; }
/* 本文の画像は、alignleft・width 属性・インラインの幅を無視して「横幅100%・中央・縦横比そのまま」にそろえる（16）。
   width 属性が 150 以下の小さい画像（関連記事カードのサムネ・アイコン・計測ピクセル・プロフィール写真）は
   テーマの the_content フィルタが nk-small を付けるので、元の大きさのまま残す（inc/setup.php nikibi_mark_small_images） */
.p-entry img:not(.nk-small):not(.emoji):not(.wp-smiley) { display: block; float: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 15px auto; }
.p-entry picture { display: contents; } /* <picture> の箱は作らず、中の img に任せる */
.p-entry img.nk-small { max-width: 100%; height: auto; }
.p-entry img.nk-small.alignleft { float: left; margin: 4px 12px 8px 0; }
.p-entry img.nk-small.alignright { float: right; margin: 4px 0 8px 12px; }
.p-entry img.nk-small.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.p-entry td img.nk-small, .p-entry th img.nk-small { margin: 0 8px 0 0; }
/* 「関連する記事」ボックス（旧記事の1セルの表）。テーマの the_content フィルタ（inc/setup.php nikibi_mark_related_boxes）が、
   本文に「関連する記事」を含みサムネ付きの表だけに nk-related-box を付ける。サムネ入りの1セルの表は他に約400あるので、見た目の対象はこのクラスに限る。
   表に直書きの height（79px など）が中身より低く下の枠線が切れていたので、このボックスだけ height を外し、
   サムネ（56px）と文字の間・上下に余白を取って、枠線が全周出るようにする（指示 29） */
.p-entry table.nk-related-box { height: auto !important; border: 1px solid var(--blue05); background: #fafafa; }
.p-entry table.nk-related-box td { padding: 10px 12px; border: 0; }
.p-entry table.nk-related-box img.nk-small { width: 56px; height: 56px; margin: 0 12px 0 0; object-fit: cover; }
/* 見出しの中の画像（h2〜h4）は、見出しの左 padding・罫線の分だけ左へ出して本文幅いっぱいにする */
.p-entry h3 img:not(.nk-small):not(.emoji):not(.wp-smiley) { width: calc(100% + 15px) !important; max-width: none !important; margin-left: -15px; } /* 上の汎用ルールと同じ詳しさにして勝たせる */
/* 固定幅・float の div（旧記事の「width:50%; float:right」）は本文幅いっぱいの箱にする */
.p-entry div[class*="ml20"], .p-entry div[class*="mr20"] { margin-left: 0 !important; margin-right: 0 !important; } /* 旧テーマの余白クラス（.mr20 等）が本文幅より内側に押し込むのを止める */
.p-entry div[style*="float"] { float: none !important; width: 100% !important; margin-left: 0; margin-right: 0; }
.p-entry .wp-caption { float: none !important; width: 100% !important; max-width: 100%; margin: 15px auto; }
.p-entry h2, .p-entry h3, .p-entry h4, .p-entry hr, .p-entry .point, .p-entry table { clear: both; }
.p-entry .wp-caption-text, .p-entry figcaption { margin-top: 4px; color: var(--gray03); font-size: 10.5px; text-align: center; }
.p-entry blockquote { margin: 15px 0; padding: 12px 15px; border-left: 4px solid var(--blue05); background: var(--pale); }
.p-entry table { display: block; width: 100% !important; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.p-entry table tbody, .p-entry table thead { display: table; width: 100%; }
.p-entry th, .p-entry td { padding: 8px; border: 1px solid var(--blue05); vertical-align: top; height: auto !important; }
.p-entry th { background: var(--blue06); color: var(--blue01); }
.p-entry hr { border: 0; border-top: 1px solid var(--blue05); margin: 24px 0; }
.p-entry iframe { max-width: 100%; }
.p-entry::after { content: ""; display: block; clear: both; }
/* ポイントボックス（薄ピンク背景＋ピンク枠）。新原稿は <div class="point"> で入れる */
.p-entry .point, .p-entry .box-point {
	padding: 15px; border: 1px solid #f9c3d1; border-radius: var(--r); background: #fff4f7; color: var(--pink01); font-size: 12.5px; line-height: 1.7;
}
.p-entry .point > :first-child { margin-top: 0; }
.p-entry .point-title { color: var(--pink01); font-size: 14px; font-weight: 700; }

/* =========================================================================
   記事一覧（780:609）
   ========================================================================= */
.p-archive-head { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 12px; padding: 22px 16px 20px; background: #d4eefe; text-align: center; }
.p-archive-head > * { position: relative; }
.p-archive-head__bg { position: absolute !important; left: 0; top: 0; width: 100%; max-width: none; pointer-events: none; }
.p-archive-head__title {
	padding-top: 16px; color: var(--blue01); font: 500 18px/1.4 var(--font-title); letter-spacing: .04em;
	background: radial-gradient(circle, var(--blue01) 1px, transparent 1.2px) center top / 6px 2px repeat-x;
}
.p-archive-head__title span { background: linear-gradient(transparent 55%, var(--tamago02) 55%); padding: 0 4px; }
.p-archive-head__title b { font-size: 25px; letter-spacing: .08em; }
.p-archive-head__desc { color: var(--gray01); font-size: 14px; text-align: left; }
.p-archive-head__doctor { width: 100%; padding: 10px 15px; border-radius: 5px; background: #fff; }
.p-archive-head__doctor .c-doctor { justify-content: space-between; gap: 14px; }
.p-archive-head__doctor .c-doctor__text { text-align: left; justify-items: start; } /* テキスト左揃え・写真右（Figma 780:1101・指示 30） */
.p-archive-head__doctor .c-doctor__title { color: var(--gray01); }
.p-archive-chips { padding: 15px 16px; background: #fff; }
.p-archive-chips > p { margin-bottom: 8px; color: var(--gray03); font-size: 12px; line-height: 17px; }
.p-archive-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--pale); color: var(--gray03); font-size: 12px; }
.p-archive-bar b { color: var(--blue02); }
.p-archive-list { padding: 14px 16px 10px; }
.p-archive-empty { padding: 30px 0; text-align: center; }
.p-archive-related { padding: 35px 17px; background: var(--blue06); }
.p-archive-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 162px)); justify-content: center; gap: 15px; }
.p-archive-related__grid a {
	position: relative; display: flex; align-items: center; height: 45px; padding: 0 24px 0 10px; border: 1px solid var(--blue01); border-radius: var(--r);
	background: #fff; color: var(--blue01); font-size: 13px; font-weight: 500; line-height: 1.3; text-decoration: none;
	white-space: nowrap; /* 13px・改行しない（長い名前は … で省略。title 属性で全文） */
}
.p-archive-related__grid a span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-archive-related__grid a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* =========================================================================
   症例一覧（798:6835）・404
   ========================================================================= */
.p-case-head { padding: 22px 17px 10px; text-align: center; }
.p-case-head .c-title__en { padding: 5px 10px; margin: 0; border-radius: 40px; background: var(--blue02); color: #fff; opacity: 1; font: 400 12px/17.85px var(--font); letter-spacing: 0; min-width: 0; }
.p-case-head > p { max-width: 341px; margin: 0 auto; color: var(--gray01); font-size: 14px; text-align: left; }
.p-case-count { width: min(341px, 100% - 34px); margin: 0 auto; padding: 10px 0 0; color: var(--gray03); font-size: 12px; } /* 下のカードの左端（.p-case-list .c-case と同じ幅・中央）にそろえる（20） */
.p-case-list { display: grid; gap: 20px; padding: 10px 17px 10px; }
.p-case-list .c-case { max-width: 341px; margin: 0 auto; width: 100%; }
.p-case-notes { margin: 10px 17px 30px; padding: 15px; border-radius: 6px; background: var(--pale); color: var(--gray01); font-size: 11px; line-height: 1.7; }
.p-case-notes h2 { margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.p-case-notes li::before { content: "・"; }
.p-404 { display: grid; gap: 20px; padding: 40px 17px 50px; text-align: center; }