/* =========================================================
   Plans（料金プラン）— 最も作り込みの多いセクション
   Figma node 113:19472。筆記体見出し＋プランカード×3＋ママ振りボックス＋下部植物フリーズ。
   1カードを繰り返す構造（ACFリピーター前提：badges[]・circles[]・option）。
   ※ 細部余白は後で調整。まず構造優先。モバイルは後回し。
   priceカード：角丸なし・白背景・枠なし。内側10pxに3px枠（::before）。
   斜線シャドウはカード背面の別レイヤー（::after）。区切り線はdivider SVGを流用。
   ========================================================= */

.plans {
	position: relative;
	width: 100%;
	background: var(--bg-cream); /* #eeede7 */
	padding: 70px 0 0;
	overflow: hidden;
}

.plans__inner {
	/* 幅は共通クラス .l-wide（980px）。位置/重ね順のみ保持 */
	position: relative;
	z-index: 1;
}

/* --- 見出し --- */
.plans__header {
	position: relative;
	text-align: center;
	margin-bottom: 56px;
}
.plans__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-script-ink); /* #231f20 */
}
.plans__sub {
	margin: 12px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-subhead); /* #a3937c */
}
/* 見出し横の萩の線画 */
.plans__deco-hagi {
	position: absolute;
	left: calc(50% + 165px);
	top: -30px;
	width: 224px;
	height: 213px;
	pointer-events: none;
}

/* =========================================================
   プランカード（繰り返し）
   ========================================================= */
.plans__list {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.plans-card {
	/* position:relative のみ（z-index は付けない＝独自のスタッキングコンテキストを作らない。
	   これにより ::after の斜線レイヤーが白背景の「背面」に回り、背景模様にならない） */
	position: relative;
	width: 100%;            /* 親 .plans__inner(.l-wide 980) にフィット（固定980は解消） */
	box-sizing: border-box; /* padding込みで940に収める */
	margin: 0 auto;
	padding: 40px 44px;
	background: var(--bg-white); /* 白背景 #fff（背面の斜線を不透明に隠す） */
	border: none;                /* 枠なし */
	border-radius: 0;            /* 角丸なし */
}

/* 内側ボーダー：白背景の 10px 内側に 3px の枠（外周ではなく一回り小さい枠線） */
.plans-card::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 3px solid var(--color-border-card); /* #C3B2A3 */
	z-index: 1;
	pointer-events: none;
}

/* 斜線シャドウ：カード本体とは別レイヤー。背面へ少しずらして配置（背景模様にしない） */
.plans-card::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(14px, 14px);
	z-index: -1; /* カード白背景の背面 */
	background: repeating-linear-gradient(
		-45deg, /* 右上→左下の斜線 */
		#e0d6d1 0 4px,
		transparent 4px 12px
	);
	pointer-events: none;
}

/* 上段：左テキスト／右アーチ画像 */
.plans-card__top {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}
.plans-card__main { flex: 1 1 auto; min-width: 0; }
.plans-card__media { flex: 0 0 375px; }

/* プラン名・価格・説明 */
.plans-card__name {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 32px;
	letter-spacing: 0.64px;
	color: var(--color-text);
}
.plans-card__price {
	margin: 10px 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 0.48px;
	color: var(--color-text);
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.plans-card__price .tax { font-size: 20px; }
.plans-card__price .num { font-size: 48px; }
.plans-card__price .yen { font-size: 20px; }

/* 価格下の区切り線（「全プラン高品質データ付き」と同じ divider SVG を使用） */
.plans-card__rule {
	display: block;
	width: 398px;
	max-width: 100%;
	height: auto;
	margin: 14px 0;
	border: 0;
}

.plans-card__desc {
	margin: 0 0 24px;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3px;
	line-height: 1.6;
	color: var(--color-text);
}

/* 特典バッジ（ピル：bg-tan / TL+BR角丸 / アイコン＋ラベル＋数＋単位） */
/* B: 複数バッジを隙間なく縦連結した一体の帯にする（gap:0） */
.plans-card__badges {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.plans-card__badge {
	display: flex;
	align-items: center;
	flex-wrap: wrap;          /* 収まらない要素（noteなど）はバッジ幅を超えず次行へ折り返す */
	gap: 2%;                  /* 幅可変：狭いほど詰まる（旧14px固定） */
	min-height: 70px;         /* 折り返し時も潰れないよう固定→最小高さに */
	padding: 0 3%;            /* 幅可変：狭いほど詰まる（旧0 28px固定） */
	box-sizing: border-box;   /* padding込みで幅100%に収める＝右はみ出し防止 */
	background: #FFC481; /* B: 2つ目以降＝オレンジ（既定） */
	color: var(--color-text);
	text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.9);
}
/* 色の出し分け：Figma「上ベージュ・下オレンジ」＝位置ベース。
   1つ目（最上段＝常に撮影データ）＝ベージュ、2つ目以降＝上の既定オレンジ。 */
.plans-card__badge:first-child { background: var(--bg-tan); } /* #e1d4c9 ベージュ */
/* B: 連結帯の外側だけ角丸30px（first=左上 / last=右下 / only=両方 / 中間=0） */
.plans-card__badge:first-child { border-radius: 30px 0 0 0; }
.plans-card__badge:last-child  { border-radius: 0 0 30px 0; }
.plans-card__badge:only-child  { border-radius: 30px 0 30px 0; }
.plans-card__badge-icon { flex: 0 0 auto; width: 38px; height: 38px; }
/* 左詰め：margin-left:auto を撤廃して左から詰める。nowrap+flex-shrink:0で改行/潰れ防止 */
.plans-card__badge-label,
.plans-card__badge-num,
.plans-card__badge-unit,
.plans-card__badge-note { white-space: nowrap; flex-shrink: 0; }
.plans-card__badge-label { font-family: var(--font-gothic); font-weight: 600; font-size: 20px; letter-spacing: 0.48px; }
.plans-card__badge-num   { font-family: var(--font-mincho); font-weight: 600; font-size: 36px; line-height: 1; }
.plans-card__badge-unit  { font-family: var(--font-gothic); font-weight: 600; font-size: 16px; }
.plans-card__badge-note  { font-family: var(--font-gothic); font-weight: 600; font-size: 15px; line-height: 1.2; }
/* 案A：note内で <small> を使うと2行目などを小さめに（管理画面で <small>…</small>） */
.plans-card__badge-note small { font-size: 0.8em; font-weight: 400; }

/* 写真（影なし）。上カド=0／下カド=写真幅の1/2（375 ÷ 2 = 187.5px）
   上端を内側枠（::before：inset 10px）の上辺にぴったり接させる。
   カードの padding-top 40px に対し、枠上辺は 10px なので -30px 持ち上げる。 */
.plans-card__photo {
	width: 375px;
	height: 410px;
	margin: -30px 0 0;
	overflow: hidden;
	border-radius: 0 0 187.5px 187.5px;
}
.plans-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 下段：連結サークル群（＋）／オプション箱 */
.plans-card__bottom {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-top: 36px;
}

/* 連結サークル */
.plans-card__circles {
	display: flex;
	align-items: center;
	gap: 16px;
}
.plans-card__circle {
	flex: 0 0 auto;
	width: 167px;
	height: 167px;
	border-radius: 50%;
	border: 1px solid var(--color-border-card);
	background: var(--bg-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-text);
	font-family: var(--font-gothic);
	font-weight: 600;
}
.plans-card__circle .c-top  { font-size: 18px; letter-spacing: 0.36px; }
.plans-card__circle .c-main { font-size: 24px; letter-spacing: 0.36px; }
.plans-card__plus {
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
}

/* オプション箱（枠線・TL+BR角丸） */
.plans-card__option {
	flex: 0 0 375px;
	margin-left: auto;
	padding: 18px 24px;
	border: 1px solid var(--color-border-card);
	border-radius: 50px 0 50px 0;
	color: var(--color-text);
}
.plans-card__option-title {
	margin: 0 0 6px;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.4px;
}
.plans-card__option-line {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 1.6px;
	line-height: 1.4;
}
.plans-card__option-line .o-num  { font-size: 30px; }
.plans-card__option-line .o-text { font-size: 20px; letter-spacing: 1px; }

/* 商品写真（アルバム/台紙）：撮影サークルの右へ配置。画像は自然な比率のまま無加工（トリミングしない）。
   写真を持つカードだけ flex-wrap を有効化（お手軽＝option行には影響させない）。狭い幅では写真が自然に下へ回る。 */
.plans-card__bottom--product { flex-wrap: wrap; row-gap: 24px; }
.plans-card__product {
	flex: 0 0 auto;
	margin: 0 0 0 auto;   /* サークルの右へ（右端寄せ。写真の無いプランには要素自体が無い） */
	width: 180px;         /* 3連サークル(約621px)＋写真がPCで1行に収まる幅 */
	max-width: 45%;
}
.plans-card__product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* =========================================================
   ママ振り 強調ボックス（角丸＋点線区切り）
   ========================================================= */
.plans-mamafuri {
	width: 100%;            /* 親 .plans__inner(.l-wide 980) にフィット */
	box-sizing: border-box; /* padding込みで940に収める */
	margin: 72px auto 0;
	padding: 40px 70px;
	background: var(--bg-cream);
	border: 2px solid var(--color-border-olive); /* #c5ba8b */
	border-radius: 50px 0 50px 0;
	text-align: left; /* PC/タブレットは左寄せ（スマホのみ ≤599 で中央寄せ） */
}
.plans-mamafuri__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: 0.56px;
	color: var(--color-text);
}
/* 点線区切り（丸ドット） */
.plans-mamafuri__rule {
	margin: 18px auto;
	width: 470px;
	max-width: 100%;
	border: 0;
	border-top: 3px dotted var(--color-border-card);
}
.plans-mamafuri__text {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.4px;
	color: var(--color-text);
}
/* スマホ改行用 span：既定は inline（PC/タブレットは1行のまま）。SPで block 化＝改行 */
.plans-mamafuri__spbr { display: inline; }

/* =========================================================
   下部の全幅植物フリーズ（左／中央／右）
   ========================================================= */
/* C: 絶対配置→flex 横並び（全幅）。3枚を下端揃えで左/中/右に並べ、幅に追従 */
.plans__freeze {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 10px;
}
.plans__freeze img {
	width: 33.3%;
	height: auto;
	pointer-events: none;
}
.plans__freeze-left   { max-width: 391px; }
.plans__freeze-center { max-width: 407px; }
.plans__freeze-right  { max-width: 404px; }

/* =========================================================
   スマホ（≤599px）：カード内の固定px（写真375・サークル167・オプション375）を
   非表示/可変化し、右クリップを解消。タブレット/PCは変更しない。
   ※ サークルはテンプレ固定で最大3つ（ロケ/スタジオ/＋家族）＝1行で収まる。
   ========================================================= */
@media (max-width: 599px) {
	/* A: セクション/見出し/リストの余白 */
	.plans__inner { padding-left: 20px; padding-right: 20px; }
	.plans { padding-top: 60px; }
	.plans__header { margin-bottom: 40px; }
	.plans__list { gap: 20px; }

	/* A: カード本体・内側枠・背面斜線 */
	.plans-card { padding: 40px 35px; }
	.plans-card::before { border-width: 2px; }
	.plans-card::after {
		transform: translate(8px, 8px);
		background: repeating-linear-gradient(-45deg, #e0d6d1 0 3px, transparent 3px 8px);
	}

	/* スマホは「写真＝上／情報(__main)＝下」の縦積み（添付デザイン準拠） */
	.plans-card__top {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}
	/* 写真を表示（.plans-card__media と .plans-card__photo は同一の figure）。構造：上・全幅 */
	.plans-card__media {
		display: block;
		order: -1;               /* __main より上に */
		flex: 0 0 auto;          /* 縦積みで基底の flex:0 0 375px(=高さ375)を解除 */
	}
	/* 写真：カード内側の枠(::before inset10px+border2px＝内縁12px)まで上・左右を食い破り、
	   下端フラット（アーチなし）・横長トリミング。顔位置は上寄りで顔切れ回避。
	   ※ media と同一要素なので width/margin はこちら（後勝ち）に集約。 */
	.plans-card__photo {
		width: calc(100% + 46px); /* 左右 35px padding → 内縁12px：+23px×2 はみ出し */
		height: auto;
		aspect-ratio: 3 / 2;
		margin: -28px -23px 24px; /* 上:40→12(−28) / 左右:−23 / 下:写真と情報の間 24px */
		border-radius: 0;
	}
	.plans-card__photo img { object-position: center 22%; }

	/* A: 名前・価格・区切り線 */
	.plans-card__name { font-size: 22px; letter-spacing: 0.1em; }
	.plans-card__price { margin-top: 0; }
	.plans-card__price .num { font-size: 35px; }
	.plans-card__price .tax,
	.plans-card__price .yen { font-size: 18px; }
	.plans-card__rule { margin: 8px 0 16px; }

	/* バッジのモバイル縮小（色/角丸/左詰めは共通側で適用済み） */
	.plans-card__badge {
		min-height: 56px; /* 共通の min-height:70 をSPでは56に戻す */
		padding: 0 16px;
	}
	.plans-card__badge-icon  { width: 30px; height: 30px; }
	.plans-card__badge-label { font-size: 16px; }
	.plans-card__badge-num   { font-size: 28px; }
	.plans-card__badge-unit  { font-size: 14px; }
	.plans-card__badge-note  { font-size: 12px; }

	/* A: 下段（サークル群｜オプション｜商品写真）を縦積み */
	.plans-card__bottom { flex-direction: column; gap: 16px; margin-top: 20px; }
	/* 商品写真はサークルの下に中央寄せ（縦積み時） */
	.plans-card__product { margin: 0 auto; width: 100%; max-width: 220px; }

	/* サークル群は幅100%。中身は横並び維持。最大3つで1行（gap 3px・円は max-width:120で大きめに） */
	.plans-card__circles {
		width: 100%;
		gap: 3px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.plans-card__circle {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		height: auto;
		max-width: 120px;
		aspect-ratio: 1 / 1;
	}
	.plans-card__circle .c-top  { font-size: 12px; }
	.plans-card__circle .c-main { font-size: 13px; }
	.plans-card__plus { width: 14px; height: auto; }

	/* A: オプション（固定375解除→全幅・角丸40px 0） */
	.plans-card__option {
		flex: 0 0 auto;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		border-radius: 40px 0 40px 0;
	}
	.plans-card__option-title { font-size: 17px; }
	.plans-card__option-line .o-num  { font-size: 26px; }
	.plans-card__option-line .o-text { font-size: 16px; }

	/* A: 萩（右上へ縮小再配置） */
	.plans__deco-hagi { left: auto; right: 0; top: 0; width: 80px; height: auto; }

	/* A: ママ振りボックス */
	.plans-mamafuri { margin-top: 40px; padding: 40px 24px; text-align: center; }
	.plans-mamafuri__title { font-size: 22px; }
	.plans-mamafuri__rule { margin: 10px auto; }
	.plans-mamafuri__text { font-size: 15px; line-height: 1.7; }
	/* スマホのみ改行（タイトル/本文の span を block 化） */
	.plans-mamafuri__spbr { display: block; }

	/* A: フリーズ高さ（横並びはC共通。スマホは高さ100px・下端揃え） */
	.plans__freeze { height: 100px; }

	/* 筆記体タイトル60px＋サブ詰め */
	.plans__title { font-size: 60px; }
	.plans__sub   { margin-top: 0; }
}

/* =========================================================
   PC（≥1025px）専用の微調整。タブレット(600〜1024)/スマホは変更しない。
   ========================================================= */
@media (min-width: 1025px) {
	.plans-card       { padding: 60px 50px; }
	.plans-card__top  { gap: 70px; }
	.plans-card__photo { margin: -50px 0 0; }
	/* note の折り返しは共通の flex-wrap（バッジ側）で処理するため、PC固有の width 指定は撤廃。
	   収まればラベル横に1行、収まらなければバッジ内で次行へ折り返す。 */
	.plans-mamafuri   { text-align: center; }
	.plans__freeze    { justify-content: center; }
}

/* =========================================================
   タブレット（600〜1024px）専用。画像を固定375px→幅可変にして、
   バッジ列（__main）の幅を確保し、noteのはみ出しを解消する。
   ========================================================= */
@media (min-width: 600px) and (max-width: 1024px) {
	.plans-card__media { flex: 0 0 35%; }
	/* media可変に追従して写真もフルード化（固定375pxのはみ出し防止）。下アーチ維持 */
	.plans-card__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 375 / 410;
		border-radius: 0 0 100vw 100vw;
	}
}

/* =========================================================
   狭い画面（≤400px：iPhone SE 375／12〜15標準 390-393／mini 360／旧SE 320）専用。
   崩れは ≤390 で発生・≥414 で解消するため 400 を境界に。
   既存 ≤599 ブロックより後に置き、同一詳細度の後勝ちで優先させる。
   ※ カード左右 padding(35px) は不変（スマホ写真の内側枠ブレイクアウト計算が依存）。文字/gapのみ調整。
   ========================================================= */
@media (max-width: 400px) {
	/* 1: 特典バッジ — 縦gapを詰めて2行目の note(例「8ページ」)をオレンジ背景内に収める＋文字微縮小 */
	.plans-card__badge { column-gap: 8px; row-gap: 2px; }
	.plans-card__badge-label { font-size: 14px; }
	.plans-card__badge-num   { font-size: 24px; }
	.plans-card__badge-unit  { font-size: 12px; }
	.plans-card__badge-note  { font-size: 11px; }

	/* 2: 3連サークル — 文字とコネクタ(＋)・間隔を縮小し「スタジオ撮影」「＆ペット撮影」等を1行に */
	.plans-card__circles { gap: 2px; }
	.plans-card__circle .c-top  { font-size: 10px; }
	.plans-card__circle .c-main { font-size: 11px; letter-spacing: 0; }
	.plans-card__plus { width: 10px; }

	/* 3: オプション枠 — 1行に収まるよう少し詰める（読める範囲で。詰めすぎ注意） */
	.plans-card__option-line { letter-spacing: 0.5px; }
	.plans-card__option-line .o-num  { font-size: 22px; }
	.plans-card__option-line .o-text { font-size: 14px; letter-spacing: 0; }
}