@charset "utf-8";
/* ==========================================================================
   TOP ページ（front-page.php）

   デザイン基準: Figma PC 1440px / コンテナ内寸 1160px（左右 140px）。
   数値はモックアップ `pc-top__01-index-pc.png`（920px = 1440px の 0.6389 倍）を
   実測して 1440 系に換算したもの。色は書き出しSVGの fill 値が出典。

   セクション順:
     FV → INFORMATION → TROUBLE → 医院情報 → RESERVATION → REASONS → TEAM
     → DOCTOR → MENU → PRICE → PICK UP → CASE → FAQ → NEWS/BLOG
     （医院情報 と RESERVATION は footer.php でページ末にも出る＝デザイン通り2回）
   ========================================================================== */

/* ==========================================================================
   共通
   ========================================================================== */

.p-top__sec--base  { background: var(--c-base); }
.p-top__sec--beige { background: var(--c-beige); }
.p-top__sec--dark  { background: var(--c-ink-deep); color: var(--c-wh); }
.p-top__sec--wh    { background: var(--c-wh); }

.p-top__todo {
	display: grid;
	place-items: center;
	min-height: 160px;
	border: 1px dashed var(--c-bdr);
	font-family: var(--f-en);
	font-size: var(--fs-13);
	letter-spacing: 0.14em;
	color: var(--c-txt-sub);
}

/* ==========================================================================
   FV — 画像に文字とバッジが焼き込まれているので敷くだけ。右下CTAのみ重ねる
   ========================================================================== */

.p-fv {
	position: relative;
	line-height: 0;
}

/* picture はインライン要素なので、そのままだと行ボックス分の余白（実測18px）が
   画像の下に付き、右下の予約ボタンが画面外へ押し出される。 */
.p-fv picture {
	display: block;
	line-height: 0;
}

/* FVの画像は 1440x704（2.045:1）。横長・縦の短いモニターだと
   下端の実績バッジと予約ボタンがファーストビューから外れてしまうので、
   ヘッダーを除いた画面の高さで上限をかける。
   はみ出す分は上下を切るが、切り位置を下寄り（69%）にして
   キャッチコピー（縦24〜50%）と実績バッジ（縦69〜89%）が残るようにしている。 */
.p-fv__img {
	width: 100%;
	height: auto;
	max-height: calc(100svh - var(--h-header));
	object-fit: cover;
	object-position: center 69%;
}

/* svh に対応していないブラウザ向け */
@supports not (height: 100svh) {
	.p-fv__img { max-height: calc(100vh - var(--h-header)); }
}

.p-fv__cta {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	line-height: var(--lh-normal);
}

.p-fv__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 120px;
	height: 76px;
	color: var(--c-wh);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: opacity var(--dur) var(--ease);
}

.p-fv__btn:hover { color: var(--c-wh); opacity: 0.85; }
.p-fv__btn--web  { background: #d0b07a; } /* モックアップ実測 */
.p-fv__btn--line { background: #443f47; } /* モックアップ実測 */

.p-fv__btn-icon { width: 28px; height: 28px; }

/* 書き出しSVGは「金の丸 + 白抜きグリフ」。FVでは
   WEB = 丸を消して白いグリフだけ、LINE = 明るい角丸に濃いグリフ、が正。 */
.p-fv__btn--web .p-fv__btn-icon rect { display: none; }
.p-fv__btn--web .p-fv__btn-icon path { fill: var(--c-wh); }
.p-fv__btn--line .p-fv__btn-icon rect { fill: #d8d5d3; }
.p-fv__btn--line .p-fv__btn-icon path { fill: #443f47; }

@media (max-width: 767px) {
	.p-fv__btn { width: 84px; height: 62px; font-size: 11px; }
	.p-fv__btn-icon { width: 20px; height: 20px; }
}

/* ==========================================================================
   INFORMATION
   ========================================================================== */

.p-info {
	background: var(--c-base);
	--wm-size: 177px; /* 実測: 大文字高124 / 総幅1376 */
	--wm-ls: 0.12em;
}

.p-info .c-sec-title {
	display: grid;
	align-content: center;
	min-height: 388px; /* デザイン: 800 → 1188 */
}

.p-info__photo { margin: 0; line-height: 0; }
.p-info__photo img { width: 100%; height: auto; }

.p-info .c-checklist { padding-block: 76px; } /* デザイン: 1750 → 2182 */

@media (max-width: 767px) {
	.p-info .c-sec-title { padding-block: 64px 40px; }
	.p-info .c-checklist { padding-block: 24px 56px; }
}

/* ==========================================================================
   TROUBLE — 大理石地 + 上下の白い斜めくさび + 10項目カード + 結び
   ========================================================================== */

.p-trouble {
	position: relative;
	overflow: hidden;
	/* 幅に追従させる。1440px 固定だと広い画面で背景が足りず地色が見える */
	background: var(--c-wh) url("../img/trouble-bg.jpg") center top / 100% auto no-repeat;
	padding-block: 106px 82px; /* デザイン: 2182 → 3418 = 1236 */
}

/* 上辺・下辺の斜めくさび。デザインでは白い三角が地を切り取っている */
.p-trouble::before,
.p-trouble::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 96px;
	background: var(--c-wh);
	z-index: 0;
}

.p-trouble::before {
	top: 0;
	clip-path: polygon(0 0, 50% 0, 0 100%);
}

.p-trouble::after {
	bottom: 0;
	clip-path: polygon(100% 0, 100% 100%, 50% 100%);
}

.p-trouble > * { position: relative; z-index: 1; }

.p-trouble .c-sec-title { padding-block: 0 64px; }

.p-trouble__lead {
	margin-top: 24px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.02em;
	text-align: center;
	text-wrap: balance;
}

.p-trouble__lead span {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--c-gold-dark);
}

.p-trouble__lead em {
	font-style: normal;
	color: var(--c-gold-dark);
}

/* 10項目 5列2行 */
.p-trouble__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.p-trouble__item {
	display: flex;
	flex-direction: column;
	background: var(--c-wh);
	box-shadow: 0 2px 10px rgba(57, 53, 59, 0.06);
}

.p-trouble__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 219 / 140;
	object-fit: cover;
}

.p-trouble__cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 10px 22px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	text-align: center;
}

.p-trouble__cap::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--icon-check-line) center / contain no-repeat;
}

/* 中央下向きの金三角 */
.p-trouble__arrow {
	width: 0;
	height: 0;
	margin: 40px auto 0;
	border-left: 26px solid transparent;
	border-right: 26px solid transparent;
	border-top: 26px solid var(--c-gold);
}

.p-trouble__close {
	margin-top: 48px;
	text-align: center;
}

.p-trouble__close-head {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--c-gold-dark);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.p-trouble__close-head em {
	font-style: normal;
	color: var(--c-gold-dark);
}

.p-trouble__close-body {
	margin-top: 26px;
	font-size: 16px;
	line-height: 1.9;
}

@media (max-width: 1000px) {
	.p-trouble__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.p-trouble { padding-block: 56px 64px; background-size: cover; }
	.p-trouble::before, .p-trouble::after { height: 48px; }
	.p-trouble__lead { font-size: 22px; }
	.p-trouble__list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.p-trouble__cap { font-size: 13px; padding: 12px 6px 16px; }
	.p-trouble__close-head { font-size: 20px; }
	.p-trouble__close-body { font-size: 14px; }
	.p-trouble__arrow { border-width: 18px 18px 0; margin-top: 28px; }
}

/* ==========================================================================
   REASONS — 選ばれる8つの特徴
   ========================================================================== */

.p-reasons {
	background: var(--c-base);
	padding-block: 0 160px;
} /* デザイン: 4835 → 7796 = 2961 */

.p-reasons__head {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 468px; /* デザイン: 4835 → 1行目の画像上端 5303 */
	text-align: center;
}

.p-reasons__watermark {
	position: absolute;
	left: 50%;
	top: 96px;
	translate: -50% 0;
	font-family: var(--f-en);
	font-size: min(221px, 15.3vw); /* 実測: 大文字高155 / 総幅1160 */
	line-height: 1;
	letter-spacing: 0.12em;
	white-space: nowrap;
	color: rgba(57, 53, 59, 0.05);
	pointer-events: none;
	z-index: 0;
}

.p-reasons__name {
	position: relative;
	z-index: 1;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.p-reasons__name-en {
	display: block;
	margin-top: 4px;
	font-family: var(--f-en);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.16em;
	color: var(--c-txt-sub);
}

/* 「選ばれる 8 つの特徴」— 左右に伸びる罫線付き */
.p-reasons__title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 26px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.p-reasons__title::before,
.p-reasons__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-bdr);
}

.p-reasons__title b {
	font-family: var(--f-en);
	font-size: 64px;
	font-weight: 500;
	font-style: italic;
	line-height: 1;
	color: var(--c-gold-dark);
	padding-inline: 6px;
}

.p-reasons__list {
	display: grid;
	grid-template-columns: repeat(2, 560px);
	justify-content: center;
	column-gap: 40px;
	row-gap: 99px;
	grid-auto-rows: 509px; /* デザイン: 全行が同じ 509px */
}

.p-reasons__item {
	position: relative;
	background: var(--c-wh);
	padding-bottom: 20px;
	box-shadow: 0 2px 12px rgba(57, 53, 59, 0.05);
}

.p-reasons__no {
	position: absolute;
	right: 46px;
	top: -66px;
	font-family: var(--f-en);
	font-size: 76px;
	font-weight: 500;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--c-gold);
	z-index: 1;
}

.p-reasons__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 340;
	object-fit: cover;
}

.p-reasons__body { padding: 24px 30px 0; overflow: hidden; }

.p-reasons__item h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.p-reasons__item p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--c-txt);
}

@media (max-width: 1240px) {
	.p-reasons__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.p-reasons { padding-block: 56px 64px; }
	.p-reasons__head { margin-bottom: 48px; }
	.p-reasons__watermark { font-size: 56px; }
	.p-reasons__name { font-size: 20px; }
	.p-reasons__title { font-size: 20px; gap: 12px; margin-top: 16px; }
	.p-reasons__title b { font-size: 38px; }
	.p-reasons__list { grid-template-columns: 1fr; row-gap: 48px; }
	.p-reasons__no { font-size: 44px; top: -30px; right: 14px; }
	.p-reasons__body { padding: 18px 18px 0; }
	.p-reasons__item h3 { font-size: 17px; }
	.p-reasons__item p { font-size: 13px; }
}

/* ==========================================================================
   TEAM — 専門チームによる最適な歯科治療（写真地 + 図版SVG）
   ========================================================================== */

.p-team {
	position: relative;
	min-height: 1102px; /* デザイン: team-bg.jpg と同じ高さ */
	display: grid;
	align-items: center;
	background: var(--c-base) url("../img/team-bg.jpg") center / cover no-repeat;
	padding-block: 90px;
	overflow: hidden;
}

.p-team__lead {
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.02em;
	margin-bottom: 44px;
}

.p-team__lead em {
	font-style: normal;
	color: var(--c-gold-dark);
	font-size: 40px;
}

.p-team__fig {
	margin: 0 auto;
	width: min(970px, 100%);
	line-height: 0;
}

.p-team__fig img { width: 100%; height: auto; }

.p-team__side {
	position: absolute;
	right: 40px;
	top: 42px;
	font-family: var(--f-en);
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0.14em;
	text-align: right;
	white-space: pre-line;
	color: var(--c-ink);
}

.p-team__side::first-letter { color: var(--c-gold-dark); }

@media (max-width: 767px) {
	.p-team { min-height: 0; padding-block: 48px; }
	.p-team__lead { font-size: 18px; margin-bottom: 24px; }
	.p-team__lead em { font-size: 22px; }
	.p-team__side { display: none; }
}

/* ==========================================================================
   DOCTOR — 院長挨拶

   右側の装飾（ベージュ帯・ゴーストDOCTOR・縦組みDOCTOR・院長挨拶・氏名）は
   すべてセクション右端を基準に絶対配置する。画面幅が1440pxより広くても
   デザインどおりの位置関係を保つため。写真だけ 1000/1440 の比率で流す。
   ========================================================================== */

.p-doctor {
	position: relative;
	background: var(--c-base);
	/* デザイン: 8898 → 10294 = 1396。
	   下の余白は、幅の狭いモニターで資格・学会の行が増えても
	   overflow:hidden に切られないよう余裕をみている（実測10pxでは6px切れた）。 */
	padding-block: 119px 40px;
	/* 背面の「DOCTOR」を画面外で切るために必要。本文が切れない余白を上で確保している。 */
	overflow: hidden;
}

.p-doctor__top {
	position: relative;
}

.p-doctor__photo {
	width: 69.44%; /* 1000 / 1440 */
	margin: 0;
	line-height: 0;
}

.p-doctor__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 716;
	object-fit: cover;
}

/* ベージュ帯：右端に接して 224x784 */
.p-doctor__label-bg {
	position: absolute;
	right: 0;
	top: 121px;
	width: 224px;
	height: 784px;
	background: var(--c-beige-light);
	z-index: 0;
}

/* ゴーストDOCTOR：縦一列。折り返させない（折り返すと横に段組みされて崩れる） */
.p-doctor__ghost {
	position: absolute;
	right: 210px;
	top: 118px;
	z-index: 0;
	writing-mode: vertical-rl;
	white-space: nowrap;
	font-family: var(--f-en);
	font-size: 290px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.085em; /* 実測の縦1252pxに合わせる */
	color: rgba(57, 53, 59, 0.075);
	pointer-events: none;
	user-select: none;
}

/* 縦組みの DOCTOR と院長挨拶 */
.p-doctor__label {
	position: absolute;
	right: 193px;
	top: 354px;
	z-index: 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 18px;
}

.p-doctor__en {
	writing-mode: vertical-rl;
	margin-top: 77px; /* 院長挨拶より下から始まる */
	font-family: var(--f-en);
	font-size: 54px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--c-ink);
}

.p-doctor__ja {
	writing-mode: vertical-rl;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--c-txt-sub);
}

/* 氏名パネルは写真の右下角に接する（デザイン実測 x898..1000 / y9441..9733）。
   写真の幅が可変なので、写真の右端から102px戻した位置に置く。 */
.p-doctor__name {
	position: absolute;
	left: 69.44%;
	translate: -100% 0;
	bottom: 0;
	z-index: 1;
	width: 102px;
}

.p-doctor__name img { width: 100%; height: auto; }

.p-doctor__greeting {
	position: relative;
	z-index: 1;
	max-width: var(--w-container);
	margin: 40px auto 0;
	padding-inline: var(--pad-x);
	display: grid;
	grid-template-columns: minmax(0, 760px) 1fr;
	gap: 40px;
}

.p-doctor__text { grid-column: 1; grid-row: 1; }
.p-doctor__text p + p { margin-top: 22px; }

.p-doctor__text p {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.02em;
}

.p-doctor__slogan {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-family: var(--f-en);
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 0.12em;
	text-align: right;
	white-space: pre-line;
}

.p-doctor__slogan::first-letter { color: var(--c-gold-dark); }

.p-doctor__career {
	position: relative;
	z-index: 1;
	max-width: var(--w-container);
	margin: 56px auto 0;
	padding-inline: var(--pad-x);
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 40px;
}

.p-doctor__career dt {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-bdr);
	font-size: 15px;
	font-weight: 700;
}

.p-doctor__career dd {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.9;
}

@media (max-width: 1100px) {
	/* 右の装飾が本文に被る幅からは装飾を控える */
	.p-doctor__ghost { font-size: 200px; right: 150px; }
	.p-doctor__label-bg { width: 170px; }
	.p-doctor__label { right: 140px; }
}

/* ==========================================================================
   MENU — 診療案内グリッド（5列）
   ========================================================================== */

.p-menu {
	background: var(--c-base);
	--wm-size: 219px; /* 実測: 大文字高153 / 総幅1046（字間が広い） */
	--wm-ls: 0.59em;
	padding-block: 0 122px; /* デザイン: グリッド下端 11884 → 12004 */
}

.p-menu .c-sec-title {
	display: grid;
	align-content: center;
	min-height: 431px; /* デザイン: 10294 → 10725 */
}

.p-menu__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 23px;
}

.p-menu__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	height: 213px;
	padding: 42px 12px 20px;
	background: var(--c-beige);
	text-align: center;
	transition: background var(--dur) var(--ease);
}

/* 地色を金にするとアイコンの抜き部分が消えるので、ベージュを少し締めるだけにする */
.p-menu__item:hover { background: #d8d1c4; }

/* アイコンはマスク。色は background-color で与える（--menu-icon はテンプレから） */
.p-menu__icon {
	align-self: end;
	width: 100%;
	height: 69px; /* デザイン: 10767 → 10836 */
	background-color: var(--c-gold-dark);
	mask: var(--menu-icon) center bottom / auto 100% no-repeat;
	-webkit-mask: var(--menu-icon) center bottom / auto 100% no-repeat;
}

.p-menu__ja {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.p-menu__en {
	font-family: var(--f-en);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--c-txt-sub);
}

.p-menu__item:hover .p-menu__en { color: rgba(255, 255, 255, 0.85); }

/* 最後のセルは VIEW MORE */
.p-menu__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 213px;
	background: var(--c-ink);
	border-bottom: 2px solid var(--c-gold);
	color: var(--c-wh);
	font-family: var(--f-en);
	font-size: 14px;
	letter-spacing: 0.14em;
}

.p-menu__more:hover { background: var(--c-gold-dark); color: var(--c-wh); }
.p-menu__more img { width: 34px; height: 34px; }

@media (max-width: 1100px) {
	.p-menu__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.p-menu { padding-bottom: 56px; }
	.p-menu .c-sec-title { padding-bottom: 32px; }
	.p-menu__list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.p-menu__item, .p-menu__more { aspect-ratio: 1; }
	.p-menu__icon { height: 56px; }
	.p-menu__ja { font-size: 14px; }
	.p-menu__en { font-size: 10px; }
}

/* ==========================================================================
   PRICE — 写真 + リード + カードブランド
   ========================================================================== */

.p-price {
	background: var(--c-base);
} /* デザイン: 12004 → 12519。ブロック高 = 写真の 514px */

.p-price__inner {
	display: grid;
	grid-template-columns: 580px 1fr;
	min-height: 514px;
	background: var(--c-beige);
}

.p-price__photo { margin: 0; line-height: 0; }

.p-price__photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: 580 / 514;
	object-fit: cover;
}

.p-price__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 56px 60px;
	text-align: center;
}

.p-price__body .c-sec-title { padding: 0; }

.p-price__lead {
	font-size: 16px;
	line-height: 2;
}

.p-price__cards { width: 100%; max-width: 452px; }
.p-price__cards img { width: 100%; height: auto; }

@media (max-width: 1000px) {
	.p-price__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.p-price { padding-bottom: 56px; }
	.p-price__body { padding: 32px 20px; gap: 18px; }
	.p-price__lead { font-size: 14px; }
}

/* ==========================================================================
   PICK UP — 濃色地の4本
   ========================================================================== */

.p-pickup {
	background: var(--c-base);
	--wm-size: 203px; /* 実測: 大文字高142 / 総幅923 */
	--wm-ls: 0.06em;
	padding-bottom: 125px;
}

.p-pickup .c-sec-title {
	display: grid;
	align-content: center;
	min-height: 389px; /* デザイン: 12519 → 12908 */
}

/* 見出し脇の引用符 */
.p-pickup__quote {
	position: absolute;
	font-family: var(--f-en);
	font-size: 120px;
	line-height: 1;
	color: rgba(57, 53, 59, 0.08);
	pointer-events: none;
	user-select: none;
}

.p-pickup__quote--open { left: 84px; bottom: -18px; }
.p-pickup__quote--close { right: 84px; top: -34px; }

.p-pickup__list {
	display: grid;
	gap: 22px;
}

.p-pickup__item { min-height: 573px; } /* デザイン実測 */

.p-pickup__item {
	position: relative;
	display: grid;
	grid-template-columns: 34px 516px 1fr;
	grid-template-rows: auto 1fr;
	gap: 0 34px;
	align-items: start;
	background: var(--c-ink);
	color: var(--c-wh);
	padding: 0 40px 34px 0;
}

/* 縦組みの英字ラベル（COSMETIC など） */
.p-pickup__label {
	grid-column: 1;
	grid-row: 1 / -1;
	writing-mode: vertical-rl;
	justify-self: center;
	align-self: start;
	margin-top: 22px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	font-family: var(--f-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.8);
}

.p-pickup__no {
	position: absolute;
	right: 40px;
	top: 22px;
	font-family: var(--f-en);
	font-size: 72px;
	font-weight: 400;
	line-height: 1;
	color: rgba(255, 255, 255, 0.09);
}

.p-pickup__ttl {
	grid-column: 2 / -1;
	grid-row: 1;
	justify-self: center;
	align-self: center;
	display: grid;
	place-items: center;
	height: 158px; /* デザイン: 項目上端 12908 → 写真上端 13066 */
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.p-pickup__photo {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	line-height: 0;
}

.p-pickup__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 516 / 340;
	object-fit: cover;
}

.p-pickup__txt {
	grid-column: 3;
	grid-row: 2;
	align-self: start;
}

.p-pickup__txt h4 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	letter-spacing: 0.02em;
}

.p-pickup__txt p {
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.88);
}

.p-pickup__tags {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 22px;
}

.p-pickup__tag {
	display: grid;
	place-items: center;
	min-height: 54px;
	padding: 8px 10px;
	border: 1px solid var(--c-gold-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.p-pickup__tag b { font-weight: 700; }

@media (max-width: 1200px) {
	.p-pickup__item { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.p-pickup { padding-bottom: 56px; }
	.p-pickup__quote { display: none; }
	.p-pickup__item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		padding: 24px 18px 28px;
		gap: 0;
	}
	.p-pickup__label { grid-column: 1; grid-row: 1; }
	.p-pickup__ttl { grid-row: 2; height: auto; }
	.p-pickup__photo { grid-column: 1; grid-row: 3; }
	.p-pickup__txt { grid-column: 1; grid-row: 4; }
	.p-pickup__label {
		writing-mode: horizontal-tb;
		justify-self: start;
		margin: 0 0 10px;
		padding: 0;
		border-top: 0;
	}
	.p-pickup__ttl { grid-column: 1; justify-self: start; font-size: 20px; margin-bottom: 16px; }
	.p-pickup__no { font-size: 44px; right: 18px; top: 12px; }
	.p-pickup__txt h4 { font-size: 16px; text-align: left; margin-top: 18px; }
	.p-pickup__txt p { font-size: 13px; }
	.p-pickup__tags { gap: 10px; }
	.p-pickup__tag { font-size: 12px; min-height: 46px; }
}

/* ==========================================================================
   CASE — 症例 before / after
   ========================================================================== */

.p-case {
	background: var(--c-beige);
	padding-block: 0 0;
} /* デザイン: 15391 → 16197 */

.p-case__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	min-height: 247px; /* デザイン: 見出し帯 */
	padding-bottom: 34px;
}

.p-case__title {
	font-family: var(--f-en);
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--c-ink);
}

.p-case__title span {
	display: block;
	margin-top: 8px;
	font-family: var(--f-ja);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-gold-dark);
}

.p-case__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.p-case__ba { position: relative; line-height: 0; }

.p-case__ba img {
	width: 100%;
	height: auto;
	aspect-ratio: 365 / 180;
	object-fit: cover;
}

.p-case__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 4px 12px;
	background: rgba(57, 53, 59, 0.55);
	color: var(--c-wh);
	font-family: var(--f-en);
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

.p-case__cap {
	margin-top: 18px;
	padding-bottom: 124px;
	font-size: 14px;
	line-height: 1.8;
}

@media (max-width: 900px) {
	.p-case__list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.p-case { padding-block: 48px 56px; }
	.p-case__title { font-size: 34px; }
	.p-case__head { margin-bottom: 24px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.p-faq {
	background: var(--c-base);
	--wm-size: 199px; /* 実測: 大文字高139 / 総幅656、右端揃え */
	--wm-ls: 0.66em;
	padding-block: 0;
} /* デザイン: 16197 → 17527 */



/* 見出しは右寄せ（デザイン踏襲） */
.p-faq__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 247px;
	padding-bottom: 30px;
}

.p-faq__title {
	font-family: var(--f-en);
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
	text-align: right;
}

.p-faq__title span {
	display: block;
	margin-top: 8px;
	font-family: var(--f-ja);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-gold-dark);
}

.p-faq__side {
	position: absolute;
	left: 0;
	bottom: 6px;
	font-family: var(--f-en);
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0.14em;
	white-space: pre-line;
}

.p-faq__side::first-letter { color: var(--c-gold-dark); }

/* FAQ のウォーターマークは右端に寄る（実測 x 783..1438） */
.p-faq__watermark {
	left: auto;
	right: -0.66em; /* 末尾の字送り分を戻す */
	translate: 0 -50%;
}

.p-faq__list { display: grid; gap: 15px; }

.p-faq__item { background: var(--c-beige); }

.p-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	padding: 18px 24px;
	text-align: left;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

.p-faq__q::before {
	content: "Q";
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--c-gold-dark);
	color: var(--c-wh);
	font-family: var(--f-en);
	font-size: 15px;
	font-weight: 400;
}

.p-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0 12px 12px;
	padding: 16px 22px;
	background: var(--c-wh);
	font-size: 15px;
	line-height: 1.9;
}

.p-faq__a::before {
	content: "A";
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--c-gold-dark);
	color: var(--c-gold-dark);
	font-family: var(--f-en);
	font-size: 15px;
}

@media (max-width: 900px) {
	.p-faq__side { display: none; }
}

@media (max-width: 767px) {
	.p-faq { padding-block: 48px 56px; }
	.p-faq__title { font-size: 34px; }
	.p-faq__q { font-size: 15px; padding: 16px; gap: 12px; }
	.p-faq__a { font-size: 13px; padding: 14px; gap: 12px; margin: 0 8px 8px; }
	.p-faq__q::before, .p-faq__a::before { width: 24px; height: 24px; font-size: 13px; }
}

/* ==========================================================================
   NEWS / BLOG
   ========================================================================== */

.p-news {
	background: var(--c-base);
	padding-block: 76px 0;
	min-height: 750px;
} /* デザイン: 17527 → 18277 */

.p-news__block {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 40px;
	align-items: start;
}

.p-news__block + .p-news__block { margin-top: 76px; }

.p-news__title {
	font-family: var(--f-en);
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
}

.p-news__title span {
	display: block;
	margin-top: 8px;
	font-family: var(--f-ja);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-gold-dark);
}

.p-news__more { margin-top: 26px; }

@media (max-width: 767px) {
	.p-news { padding-bottom: 56px; }
	.p-news__block { grid-template-columns: 1fr; gap: 18px; }
	.p-news__block + .p-news__block { margin-top: 48px; }
	.p-news__title { font-size: 34px; }
}

/* ==========================================================================
   TEAM の連携図（六角形 + 7つの円）
   円は元SVG（970x665・直径200）から起こした比率で置く。
   図の幅に対する比率で全部決めているので、PC/SPどちらでも崩れない。
   ========================================================================== */

.p-team__fig {
	position: relative;
	/* 円の中の文字サイズを図の幅に追従させるためのコンテナ */
	container-type: inline-size;
	aspect-ratio: 970 / 665;
}

.p-team__hex {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-team__nodes {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.p-team__node {
	position: absolute;
	left: var(--left);
	top: var(--top);
	width: 20.619%; /* 200 / 970 */
	aspect-ratio: 1;
}

.p-team__node-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.6cqw;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--c-wh);
	line-height: 1.35;
	color: var(--c-ink);
	text-align: center;
	text-decoration: none;
}

.p-team__node-icon {
	width: calc(var(--iw) * 100cqw / 970);
	height: auto;
	flex: none;
}

.p-team__node-label {
	font-size: 1.76cqw; /* 17 / 970 */
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* hover で広がる金の輪 */
.p-team__node-ring {
	position: absolute;
	inset: -0.9cqw;
	border-radius: var(--radius-pill);
	border: 0.21cqw solid var(--c-gold);
	opacity: 0;
	pointer-events: none;
}