/* ===========================================================
   Object / Project / Features（TOPページ：当院について セクション）
   - 背景：ナビー帯（上下に波SVG装飾）
   - 4枚の特徴カード
     - SP：1列縦並び、画像が上・本文が下
     - PC：2×2グリッド、画像が左・本文が右
   - 見出し左に医師イラスト（SP・PC共通の横並び）
   - 末尾に CTA「当院の特徴について」（このセクションのみ pill shape）
   =========================================================== */

.p-features {
	position: relative;
}

/* PCのみ：features セクションを上に引き上げて、波SVGをFVの上にかぶせる。
   z-index で FV より前面に置く。 */
@media (min-width: 768px) {
	.p-features {
		margin-top: -130px;
		z-index: 2;
	}
}

/* ===========================
   波SVG（上下の装飾）
   =========================== */

/* 波SVG共通：
   - viewport 全幅まで広げる（margin-left のトリックで親の制約を打ち消す）
   - background-size: 100% 100% でSVGを伸長してエッジまで届かせる
   - z-index 0 でセクションの最背面に */
.p-features__wave {
	display: block;
	position: relative;
	z-index: 0;
	/* 100vw はスクロールバー幅を含み右側にはみ出すため、親（section）の 100% を使う。
	   親 .p-features は block 要素でビューポート全幅に展開されるので 100% で十分。 */
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	height: clamp(70px, 12vw, 240px);
	pointer-events: none;
}

/* パスは _p-features.css → assets/css/object/project/ から 3階層上の assets/images/svg/ */
/* 波SVGのコンテナにはあえて背景色を敷かない。
   背景色を敷くと波の透過部分まで navy で塗りつぶされ、波の形が大きく隠れてしまうため。
   隣接セクションとの境目（隙間）は margin の負値で1〜2pxだけオーバーラップして打ち消す。 */
.p-features__wave--top {
	background-image: url("../../../images/svg/wave-fv-to-feature.svg");
	margin-bottom: -2px; /* 最下部のナビー帯を features__body の navy と接合 */
}

.p-features__wave--bottom {
	background-image: url("../../../images/svg/wave-feature-to-first.svg");
	margin-top: -2px;    /* 最上部のナビー帯を features__body の navy と接合 */
	margin-bottom: -1px; /* 最下部の僅かな透過域を次セクションで覆う */
}

/* ===========================
   ボディ（ナビー帯部分）
   =========================== */

.p-features__body {
	position: relative;
	z-index: 1; /* 波SVG（z-index 0）より前面 */
	background-color: var(--color-navy-400);
	color: var(--color-white);
	padding: 24px 0 56px;
}

@media (min-width: 768px) {
	.p-features__body {
		/* PC: ボディ先頭に .p-notice-band が来るので padding-top は band 側で持つ */
		padding: 0 0 96px;
	}
}

/* ===========================
   見出しエリア
   - タイトル＋サブタイトルは画面中央寄せ
   - イラストはタイトル左横に絶対配置（タイトル位置に影響しない）
   =========================== */

.p-features__header {
	text-align: center;
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.p-features__header {
		margin-bottom: 64px;
	}
}

/* タイトル＋サブをまとめた中央寄せ用ボックス。
   inline-block + position:relative にして、内部のイラストを
   absolute で「テキストの左外側」に配置する基準にする。 */
.p-features__header-text {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	position: relative;
}

/* イラストはタイトルの左横に絶対配置。
   底部が見出し領域の下にはみ出して最初のカードに近づくよう、bottom を負値で指定。 */
.p-features__header-illust {
	display: block;
	width: 50px;
	height: auto;
	position: absolute;
	right: 100%;
	bottom: -40px;
	margin-right: 12px;
}

@media (min-width: 768px) {
	.p-features__header-illust {
		width: 72px;
		bottom: -65px;
		margin-right: 16px;
	}
}

/* ----- タイトル + ドット装飾 ----- */

.p-features__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: 0.04em;
	line-height: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
}

/* 小さめのドット装飾（titleフォントサイズの 0.5倍くらい、文字間タイト） */
.p-features__title::before,
.p-features__title::after {
	content: "・・・";
	color: var(--color-white);
	font-weight: 400;
	font-size: 0.5em;
	letter-spacing: -0.18em;
	line-height: 1;
	margin-inline: -1px;
}

@media (min-width: 768px) {
	.p-features__title {
		font-size: 28px;
		gap: 10px;
	}
}

/* ----- サブタイトル ----- */

.p-features__subtitle {
	font-size: 13px;
	color: var(--color-white);
	letter-spacing: 0.08em;
	font-weight: 500;
	margin: 0;
}

@media (min-width: 768px) {
	.p-features__subtitle {
		font-size: 14px;
	}
}

/* ===========================
   カード一覧
   - SP：1列・カード間隔広め
   - PC：2×2・余裕のあるgap
   =========================== */

.p-features__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.p-features__list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40px;
		row-gap: 48px;
		margin-bottom: 64px;
	}
}

/* ===========================
   個別カード
   =========================== */

.p-features__card {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.p-features__card {
		flex-direction: row;
		align-items: stretch;
	}
}

/* --- カード画像 --- */

.p-features__card-image {
	flex-shrink: 0;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 343 / 200;
}

@media (min-width: 768px) {
	.p-features__card-image {
		width: 42%;
		aspect-ratio: auto;
	}
}

.p-features__card-image img,
.p-features__card-image picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- カード本文 --- */

.p-features__card-body {
	flex: 1;
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

@media (min-width: 768px) {
	.p-features__card-body {
		padding: 24px 26px;
		justify-content: center;
		gap: 14px;
	}
}

/* 数字とタイトルを上下中央で揃える（番号フォントが大きくても揃って見える） */
.p-features__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.p-features__card-number {
	font-size: 36px;
	font-weight: 700;
	color: var(--color-pink-500);
	line-height: 1;
}

@media (min-width: 768px) {
	.p-features__card-number {
		font-size: 40px;
	}
}

.p-features__card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-navy-500);
	line-height: 1.4;
}

@media (min-width: 768px) {
	.p-features__card-title {
		font-size: 18px;
	}
}

.p-features__card-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.p-features__card-text {
		font-size: 16px;
	}
}

.p-features__card-note {
	font-size: 13px;
	color: var(--color-gray-700);
	line-height: 1.5;
	margin-top: -4px;
}

@media (min-width: 768px) {
	.p-features__card-note {
		font-size: 14px;
	}
}

/* カード内のセカンダリボタン：c-button--md のデフォルト 288px 幅を上書きして
   カード幅に収まる範囲に縮める */
.p-features__card-button {
	width: 100%;
	max-width: 240px;
	height: 50px;
	align-self: center;
	margin-top: 8px;
}

@media (min-width: 768px) {
	.p-features__card-button {
		max-width: 260px;
		height: 52px;
		align-self: flex-start;
		margin-top: 12px;
	}
}

/* ===========================
   CTA（セクション末尾）
   ※ボタンの pill shape は .c-button のデフォルトに集約済みのため、
     このセクション固有のスタイルは margin/配置のみ。
   =========================== */

.p-features__cta {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}