/* =========================================================
   全プラン高品質データ付き（ver1-2新規・共通価値訴求／価格なし）
   Figma node 113:1873。左：見出し＋区切り線＋リード＋ボタン／右：アーチ画像／中央やや左：蝶。
   レイアウト：絶対配置をやめ .l-base(860) の通常フロー（flex 2カラム）で組む（手順2リファクタ）。
   ・背景・蝶はセクション/inner基準で残す。transform:scale は不使用。box-sizing:border-box。
   ・860に収めるため写真は実寸で約380px（アスペクト比維持）。細部余白は後で調整。
   ========================================================= */

.plans-data {
	width: 100%;
	padding: 0 0 41px; /* 上余白なし・下のみ（PC/SP共通） */
	background: var(--bg-cream); /* #eeede7 */
	overflow: hidden;
}

/* 幅は共通クラス .l-base(860)。左:本文／右:写真の flex 2カラム。蝶アンカー用に relative。 */
.plans-data__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* --- 左：本文ブロック（flex item） --- */
.plans-data__body {
	flex: 1 1 auto;
	min-width: 0; /* テキストが折り返せるように */
	box-sizing: border-box;
}

/* 明朝大見出し（1行目32px / 2行目36px） */
.plans-data__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 0.64px;
	line-height: 1.3;
	color: var(--color-text);
}
.plans-data__title { font-size: 34px; } /* Figma：明朝W6 34px・2行（<br>） */

/* 装飾区切り線（Figma書き出しのSVG。中央罫＋両端飾り） */
.plans-data__divider {
	display: block;
	width: 398px;
	max-width: 100%; /* 本文カラムが狭くなってもはみ出さない */
	height: auto;
	margin-top: 10px;
}

/* リード文 */
.plans-data__lead {
	margin: 22px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3px;
	line-height: 1.6;
	color: var(--color-text);
}

/* アウトラインボタン（白地・角丸なし・1px枠・▼カレット） */
.plans-data__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 200px;
	height: 50px;
	margin-top: 36px;
	background: var(--bg-white);
	border: 1px solid var(--color-btn-outline); /* #533f21 */
	color: var(--color-text);
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.32px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.plans-data__button:hover { opacity: 0.75; }

.plans-data__caret {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor; /* ▼ */
}

/* --- 右：アーチ画像（上カド丸・枠あり・影なし）。flex item・実寸で約380×418に縮小（比率維持） --- */
.plans-data__photo {
	flex: 0 0 380px;
	width: 380px;
	height: 418px;            /* 400:440 の比率を維持 */
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 0 0 190px 190px;  /* 下だけアーチ（幅380の半分） */
}
.plans-data__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 中央やや左：蝶の線画（装飾・inner基準に再アンカー。位置はスクショ突合で微調整可） --- */
.plans-data__butterfly {
	position: absolute;
	left: 300px;
	top: 120px;
	width: 130px;
	height: 136px;
	pointer-events: none;
	z-index: 2; /* 本文・写真より前面の飾り */
}

/* =========================================================
   スマホ（≤599px）：横2カラム → 縦1カラム。タブレット/PCは変更しない。
   原因＝photo固定380px＋body min-width:0 の潰れ。縦積み＋width:100%で横書きに戻す。
   ========================================================= */
@media (max-width: 599px) {
	/* A1: セクション上余白／下余白は0に */
	.plans-data {
		padding-top: 60px;
		padding-bottom: 0;
	}
	/* 1: 縦積み（本文=上 / 写真=下）。gapは縦間隔として28pxに縮める */
	.plans-data__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	/* 見出し（2行）をスマホで縮小 */
	.plans-data__title { font-size: 24px; }
	/* A4: ボタンを80%幅・高さ80px・中央寄せ */
	.plans-data__button {
		display: flex;
		width: 80%;
		height: 80px;
		font-size: 16px;
		margin-inline: auto;
	}
	/* 4: 縦積み＋width:100%なので min-width:0 は無害（横書き幅を確保）。本文は中央寄せ */
	.plans-data__body {
		width: 100%;
		text-align: center;
	}
	/* 2: 写真フルード化。固定380×418→可変。比率400:440維持。max-width:320で中央寄せ。
	   アーチ半径は幅依存の190pxをやめ 100vw で上辺を常に半円ドームに追従させる。 */
	.plans-data__photo {
		flex: 0 0 auto;
		width: 100%;
		max-width: 320px;
		height: auto;
		aspect-ratio: 400 / 440;
		margin-inline: auto;
		border-radius: 100vw 100vw 0 0; /* SPは上アーチ（フルード）。PCは下アーチ(0 0 190px 190px) */
	}
	/* A5: 蝶の再調整（右上・上方向へ／拡大） */
	.plans-data__butterfly {
		left: auto;
		right: 0;
		top: -60px;
		width: 90px;
		height: auto;
	}
}

/* =========================================================
   PC（≥1025px）専用の微調整。タブレット(600〜1024)/スマホは変更しない。
   ========================================================= */
@media (min-width: 1025px) {
	.plans-data__photo     { margin-right: -40px; }
	.plans-data__title     { font-size: 30px; }
	.plans-data__butterfly { top: 0; }
}