@charset "utf-8";
/* ==========================================================================
   TOP / SP（〜767px）

   基準は Figma SP 390px。左右余白 16px ＝ 内容幅 358px。
   数値はモックアップ `sp-top__01-index-sp.png`（475px = 390px の 1.218倍）の実測値。

   セクション境界（デザインy / 高さ）:
     header 0/64        FV 64/514         INFORMATION 578/802   TROUBLE 1380/1563
     医院情報 2943/918   RESERVATION 3861/338                    REASONS 4199/2851
     TEAM 7050/571      DOCTOR 7621/1534  MENU 9155/2017        PRICE 11172/568
     PICK UP 11740/3235 CASE 14975/1545   FAQ 16520/1730        NEWS 18250/926
     医院情報 19176/914  RESERVATION 20088/338  余白 20428/62    footer 20490/256

   PC版と情報の差異がある箇所は PC版の訴求を正規として残し、
   組み方（改行位置・列数・順序）だけSPデザインに合わせている。
   ========================================================================== */

@media (max-width: 767px) {

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

	.c-sec-title__watermark {
		font-size: min(var(--wm-size-sp, 92px), 27vw);
		letter-spacing: var(--wm-ls-sp, 0.08em);
	}

	.c-sec-title__en {
		font-size: 40px;
		letter-spacing: 0.1em;
		margin-right: -0.1em;
	}

	.c-sec-title__ja { margin-top: 6px; font-size: 13px; }

	/* ==================================================================
	   FV — SP画像は 390x514。デザイン上CTAは重ねない（ドロワー内に置く）
	   ================================================================== */

	.p-fv__cta { display: none; }

	/* ==================================================================
	   INFORMATION — 見出し帯164 / 写真152 / チェックリスト486
	   ================================================================== */

	.p-info { --wm-size-sp: 92px; }

	.p-info .c-sec-title {
		display: grid;
		align-content: center;
		min-height: 164px;
		padding-block: 0;
	}

	.p-info .c-checklist { padding-block: 28px 35px; }

	.c-checklist__item {
		align-items: flex-start;
		gap: 14px;
		min-height: 0;
		padding-block: 16px;
		font-size: 15px;
		line-height: 1.6;
	}

	.c-checklist__item::before { width: 20px; height: 20px; margin-top: 2px; }

	/* ==================================================================
	   TROUBLE — 2列5行 / 1563px
	   ================================================================== */

	.p-trouble {
		background-image: url("../img/trouble-bg-sp.jpg");
		background-size: 390px auto;
		background-position: center top;
		padding-block: 60px 30px;
	}

	.p-trouble::before,
	.p-trouble::after { height: 60px; }

	.p-trouble .c-sec-title {
		display: grid;
		align-content: center;
		min-height: 186px; /* 上余白60 + 186 = 画像上端まで246 */
		padding-block: 0;
	}
	.p-trouble .c-sec-title__en { font-size: 17px; letter-spacing: 0.14em; }

	.p-trouble__lead {
		margin-top: 14px;
		font-size: 22px;
		line-height: 1.75;
	}

	.p-trouble__lead span { padding-bottom: 3px; }

	.p-trouble__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.p-trouble__cap {
		gap: 7px;
		padding: 11px 6px 14px;
		font-size: 14px;
		line-height: 1.5;
	}

	.p-trouble__cap::before { width: 18px; height: 18px; }

	.p-trouble__arrow {
		margin-top: 26px;
		border-left-width: 20px;
		border-right-width: 20px;
		border-top-width: 20px;
	}

	.p-trouble__close { margin-top: 13px; }

	/* SPは2行に割るので、下線は span 側だけに付ける */
	.p-trouble__close-head {
		display: block;
		border-bottom: 0;
		padding-bottom: 0;
		font-size: 21px;
		line-height: 1.7;
	}

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

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

	/* ==================================================================
	   REASONS — 1列8枚 / 2851px
	   ================================================================== */

	.p-reasons { padding-block: 0 79px; }

	.p-reasons__head { min-height: 316px; margin-bottom: 0; }

	/* SP書き出しは 358x160。PC(560x340)の比率が残ると縦に伸びるので上書きする */
	.p-reasons__item img { aspect-ratio: 358 / 160; }
	.p-reasons__watermark { top: 60px; font-size: 86px; letter-spacing: 0.08em; }
	.p-reasons__name { font-size: 22px; }
	.p-reasons__name-en { margin-top: 3px; font-size: 10px; }
	.p-reasons__title { margin-top: 18px; font-size: 21px; gap: 14px; }
	.p-reasons__title b { font-size: 38px; }

	.p-reasons__list {
		grid-template-columns: 1fr;
		row-gap: 34px;
		grid-auto-rows: auto;
	}

	.p-reasons__item { padding-bottom: 14px; }
	.p-reasons__no { top: -38px; right: 12px; font-size: 46px; }
	.p-reasons__body { padding: 16px 18px 0; }
	.p-reasons__item h3 { font-size: 17px; line-height: 1.5; }
	.p-reasons__item p { margin-top: 8px; font-size: 14px; line-height: 1.7; }

	/* ==================================================================
	   TEAM — 571px
	   ================================================================== */

	.p-team {
		min-height: 571px;
		align-content: center;
		background-image: url("../img/team-bg-sp.jpg");
		background-size: cover;
		padding-block: 0;
	}

	.p-team__side {
		position: static;
		margin: 0 0 14px;
		font-size: 11px;
		text-align: right;
	}

	.p-team__lead {
		margin-bottom: 18px;
		font-size: 21px;
		line-height: 1.8;
	}

	.p-team__lead em { font-size: 24px; }
	.p-team__fig { width: 358px; max-width: 100%; }

	/* ==================================================================
	   DOCTOR — 中央寄せ見出し ＋ 写真 ＋ 氏名パネル / 1534px
	   ================================================================== */

	.p-doctor {
		padding-block: 0 42px;
		--wm-size-sp: 92px;
	}

	/* SPは絶対配置をやめて、見出し→写真→氏名の縦積みにする */
	.p-doctor__top {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.p-doctor__label {
		position: relative;
		right: auto;
		top: auto;
		grid-column: 1;
		grid-row: 1;
		display: grid;
		place-content: center;
		min-height: 215px;
		padding: 0;
		gap: 0;
		text-align: center;
	}

	.p-doctor__photo { width: 100%; }
	.p-doctor__en { margin-top: 0; }

	.p-doctor__label-bg { display: none; }

	/* ゴーストは見出し帯（高さ215px）の中央に置く。
	   PCではセクション右端基準の絶対配置なので right/top を打ち消す。 */
	.p-doctor__ghost {
		right: auto;
		left: 50%;
		top: 107px;
		translate: -50% -50%;
		writing-mode: horizontal-tb;
		font-size: min(92px, 27vw);
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

	/* PCのベージュ帯はSPデザインに無い */
	.p-doctor__label-bg { display: none; }

	.p-doctor__en {
		writing-mode: horizontal-tb;
		font-size: 40px;
		letter-spacing: 0.1em;
		margin-right: -0.1em;
	}

	.p-doctor__ja {
		writing-mode: horizontal-tb;
		margin-top: 6px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.1em;
		color: var(--c-gold-dark);
	}

	.p-doctor__photo {
		grid-column: 1;
		grid-row: 2;
		padding-left: 6px;
	}

	.p-doctor__photo img { aspect-ratio: 1; }

	/* 氏名パネルは写真の右下に重ねる */
	.p-doctor__name {
		position: absolute;
		left: auto;
		right: 16px; /* 写真の右端 374px に合わせる */
		top: auto;
		bottom: 0;
		translate: none;
		width: 74px;
		padding: 18px 0 14px;
		background: var(--c-base);
	}

	.p-doctor__greeting {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 40px;
	}

	.p-doctor__slogan {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 22px;
		font-size: 11px;
		text-align: right;
	}

	.p-doctor__text { grid-column: 1; grid-row: 2; }
	.p-doctor__text p { font-size: 14px; line-height: 2; }
	.p-doctor__text p + p { margin-top: 22px; }

	.p-doctor__career {
		grid-template-columns: 1fr;
		gap: 26px;
		margin-top: 50px;
	}

	.p-doctor__career dd { font-size: 13px; line-height: 1.85; }
	.p-doctor__career .c-more { width: 100%; }

	/* ==================================================================
	   MENU — 2列。セルは内容に応じた高さ（ラベルが2行になる項目がある）
	   ================================================================== */

	.p-menu {
		--wm-size-sp: 92px;
		--wm-ls-sp: 0.4em;
		padding-block: 0 44px;
	}

	.p-menu .c-sec-title {
		display: grid;
		align-content: center;
		min-height: 106px;
	}

	.p-menu__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* 和名が1行のカードと2行のカードで高さが変わらないよう固定する。
	   2行 + 英名1行が入る高さ（18 + 52 + 8 + 45 + 8 + 16 + 14 = 161）に揃える。
	   アイコンは上詰めなので、行内でアイコンと和名1行目の位置がそろう。 */
	.p-menu__item,
	.p-menu__more {
		height: 156px;
		aspect-ratio: auto;
		min-height: 0;
		padding: 16px 10px 13px;
		gap: 7px;
	}

	.p-menu__icon { height: 52px; }
	.p-menu__ja { font-size: 15px; }
	.p-menu__en { font-size: 11px; }
	.p-menu__more { gap: 16px; justify-content: center; }
	.p-menu__more img { width: 30px; height: 30px; }

	/* ==================================================================
	   PRICE — 写真の下にベージュのブロック / 568px
	   ================================================================== */

	.p-price { padding-bottom: 0; }

	.p-price__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.p-price__photo img { aspect-ratio: 358 / 208; }

	.p-price__body {
		gap: 18px;
		padding: 44px 16px 49px;
	}

	.p-price__body .c-sec-title__en { font-size: 34px; }
	.p-price__lead { font-size: 14px; line-height: 1.9; }
	.p-price__cards { max-width: 326px; }
	.p-price__body .c-more--dark { width: 100%; }

	/* ==================================================================
	   PICK UP — 1列 / 3235px
	   ================================================================== */

	.p-pickup {
		--wm-size-sp: 76px;
		padding-block: 62px 64px;
	}

	.p-pickup .c-sec-title {
		display: grid;
		align-content: center;
		min-height: 188px; /* 上余白62 + 188 = 項目上端まで250 */
		padding-block: 0;
	}

	/* 肩の小欧文は見出しの下に回す（デザイン踏襲） */
	.p-pickup .c-sec-title__side {
		position: static;
		translate: none;
		display: block;
		margin-top: 14px;
		font-size: 11px;
		text-align: left;
	}

	.p-pickup__list { gap: 24px; }

	.p-pickup__item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		min-height: 690px;
		gap: 0;
		padding: 26px 16px 30px;
	}

	/* 縦ラベルは横組みにして頭に罫線を付ける */
	.p-pickup__label {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: flex;
		align-items: center;
		gap: 10px;
		writing-mode: horizontal-tb;
		margin: 0;
		padding: 0;
		border-top: 0;
		font-size: 11px;
	}

	.p-pickup__label::before {
		content: "";
		width: 26px;
		height: 1px;
		background: rgba(255, 255, 255, 0.6);
	}

	.p-pickup__ttl {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		place-items: start;
		height: auto;
		margin: 12px 0 22px;
		font-size: 21px;
		line-height: 1.5;
	}

	.p-pickup__no { top: 16px; right: 16px; font-size: 52px; }
	.p-pickup__photo { grid-column: 1; grid-row: 3; }
	.p-pickup__txt { grid-column: 1; grid-row: 4; }

	.p-pickup__txt h4 {
		margin-top: 26px;
		font-size: 18px;
		line-height: 1.6;
		text-align: center;
	}

	.p-pickup__txt p { margin-top: 18px; font-size: 14px; line-height: 1.9; }
	.p-pickup__tags { gap: 10px; margin-top: 24px; }
	.p-pickup__tag { min-height: 52px; font-size: 13px; }

	/* ==================================================================
	   CASE — 1列3件 / 1545px
	   ================================================================== */

	.p-case { padding-block: 0; }

	.p-case__head {
		align-items: flex-end;
		min-height: 164px;
		padding-bottom: 20px;
	}

	.p-case__title { font-size: 38px; letter-spacing: 0.08em; }
	.p-case__title span { margin-top: 4px; font-size: 13px; }

	.p-case__list { grid-template-columns: 1fr; gap: 42px; }
	.p-case__ba img { aspect-ratio: 358 / 176; }
	.p-case__cap { margin-top: 14px; padding-bottom: 0; font-size: 14px; }
	.p-case__list > li:last-child .p-case__cap { padding-bottom: 24px; }

	/* ==================================================================
	   FAQ — 見出し右寄せ。回答は白箱を敷かずベージュ地のまま罫線で区切る
	   ================================================================== */

	.p-faq {
		--wm-size-sp: 92px;
		padding-block: 0 47px;
	}

	.p-faq__head {
		flex-direction: column;
		align-items: flex-end;
		min-height: 202px;
		padding-bottom: 14px;
	}

	.p-faq__title { font-size: 38px; letter-spacing: 0.08em; }
	.p-faq__title span { margin-top: 4px; font-size: 13px; }

	.p-faq__side {
		position: static;
		display: block;
		align-self: flex-start;
		margin-top: 12px;
		font-size: 11px;
	}

	.p-faq__list { gap: 13px; }

	.p-faq__q {
		gap: 14px;
		padding: 16px 16px 14px;
		font-size: 15px;
		line-height: 1.6;
	}

	.p-faq__q::before { width: 28px; height: 28px; font-size: 14px; }

	.p-faq__a {
		gap: 14px;
		margin: 0 16px 20px;
		padding: 16px 0 0;
		background: transparent;
		border-top: 1px solid rgba(57, 53, 59, 0.18);
		font-size: 14px;
		line-height: 1.9;
	}

	.p-faq__a::before {
		width: 28px;
		height: 28px;
		background: var(--c-wh);
		font-size: 14px;
	}

	/* ==================================================================
	   NEWS / BLOG — 926px
	   ================================================================== */

	.p-news {
		min-height: 0;
		padding-block: 40px 0;
	}

	.p-news .c-postlist__item { padding-block: 20px; }
	.p-news .c-postlist__title { margin-top: 10px; }

	.p-news__block {
		grid-template-columns: 1fr;
		gap: 14px;
	}

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

	/* 見出しと VIEW MORE を横並びにする */
	.p-news__block > div:first-child {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
	}

	.p-news__title { font-size: 38px; letter-spacing: 0.08em; }
	.p-news__title span { margin-top: 4px; font-size: 13px; }
	.p-news__more { margin-top: 0; }
}