/* =====================================================================
 * price.css — 料金表（ワイヤーフレーム 2g）だけの指定
 * ---------------------------------------------------------------------
 * 面（全幅の青・全幅の水色・白い箱・セクションの並び・FAQ の見た目）は
 * components.css の共通部品に置いてある。ここには 2g 固有のものだけを書く。
 *
 * 【このページの面の配分】
 *   FV            交換ページ・修理TOP と同じ v2 の青い箱（hero-v2.css。写真は敷かない）
 *   価格表        全幅の青（水玉）← このページの主役
 *   なぜこの価格  白い箱（横棒グラフ）
 *   量販店との違い 白い箱
 *   お支払い方法  交換ページと同じ枠（template-parts/payment-methods.php）
 *   補助金        白い箱＋写真
 *   施工事例      全幅の水色
 *   FAQ           白いカード＋グレーの水玉
 *   CTA           黄色の帯
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV（宣言型）。交換ページ・修理TOP と同じ v2 の形（hero-v2.css）で、写真は敷かない（2026-10-12）。
 * ここでは見出しの大きさだけ決める。値は修理TOP（repair.css の .hero--rp）と同じ。
 * 1行目「全機種、工事費込みの」は白で小さく、2行目「総額表示です。」を黄色で大きく見せる。
 * ------------------------------------------------------------------- */
.hero--price .hero__title { font-size: 20px; line-height: 1.4; }
.hero--price .hero__seg { display: inline-block; }
.hero--price .hero__sub { margin: 0; }
/* 説明文の改行はスマホでは消し、語のまとまり（.hero__seg）の切れ目で折り返す。 */
@media (max-width: 599.98px) { .hero--price .pr-br { display: none; } }
/* バッジは4つなので、スマホは2列×2行にそろえる（共通の指定は「5つ目だけ横いっぱい」）。 */
.hero--price .hero__badges li:last-child { grid-column: auto; }
/* スマホの本文は交換ページと同じ 14px。1文目（21字）が幅299に1行で収まる。 */
@media (max-width: 599.98px) { .hero--price .hero__sub { font-size: 14px; } }

/* ---------------------------------------------------------------------
 * 価格表（このページの主役）
 * ワイヤーは表組みだが、制作メモが横スクロールを禁じている。
 * 6枚のカードにして、狭い画面では1列に積む。
 * ------------------------------------------------------------------- */
.pr-grid { display: grid; gap: 16px; }
.pr-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 20px 16px;
	border-radius: 20px;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* 容量。交換ページの容量バッジ（角丸6・濃紺・白文字）と同じ。 */
.pr-card__cap {
	padding: 2px 20px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 22px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
}
.pr-card__type {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 金額はまだ「◯◯」なので、数字だけを大きくしない
 * （丸が2つ並んで見えるだけになる）。金額が入ったら交換ページの機種カードと
 * 同じ「数字だけ大きくオレンジ・黄色は面」に上げてよい。 */
.pr-card__yen {
	font-size: 26px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--c-warm);
}
.pr-card__yen mark {
	background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 10px;
	color: inherit;
}

/* ---------------------------------------------------------------------
 * なぜこの価格でできるのか
 * 相場と自社を横棒の長さだけで比べる。
 * 取り消し線の二重価格は使わない（制作メモ）。
 * 色は水色＝相場、青＝当社。黄色は金額に使う色なので棒には使わない。
 * ------------------------------------------------------------------- */
.pr-bars { display: flex; flex-direction: column; gap: 20px; }
.pr-bar { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pr-bar__label {
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
/* 溝はグレー。淡い青にすると、市場相場の水色の棒と見分けがつかず、
 * 「棒が伸びていない」ように見える。 */
.pr-bar__track {
	display: block;
	height: 36px; /* 斜線の文字が2行になっても収まる高さ（2026-10-12 に28から上げた） */
	border-radius: 6px;
	background: var(--fig-gray-10);
	overflow: hidden;
}
.pr-bar__fill {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: 6px;
}
.pr-bar__fill--market { background: var(--fig-blue-30); }
.pr-bar__fill--ours   { background: var(--fig-blue-40); }
/* 当社の棒の残り（相場との差）。黄色の斜線に「中間マージンがない分」を書き込む（2026-10-12）。
 * 黄色は交換ページの「最大◯万円」の下線と同じ色。棒の溝ごと横並びにして、残りの幅いっぱいに広げる。 */
.pr-bar__track:has(.pr-bar__gap) { display: flex; }
.pr-bar__track:has(.pr-bar__gap) .pr-bar__fill { flex: none; border-radius: 6px 0 0 6px; }
.pr-bar__gap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 4px;
	background: repeating-linear-gradient(-45deg, var(--fig-yellow) 0 8px, #fffbb0 8px 16px);
	color: var(--fig-blue-80);
	font-size: 11px;
	line-height: 1.2;
	font-weight: var(--fw-bold);
	text-align: center;
}
/* 狭い画面で2行になるとき、「中間マージン｜がない分」の切れ目で折る。 */
.pr-bar__gap { flex-wrap: wrap; align-content: center; }
.pr-bar__gap > span { display: inline-block; }
/* 金額はオレンジ。当社の側だけ大きくする（比べる相手より目立たせる）。 */
.pr-bar__yen {
	font-size: 18px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-50);
}
.pr-bar__yen--ours { font-size: 24px; font-weight: 900; color: var(--c-warm); }

/* 理由の一文。白い箱の中の淡い青で段差を作る（面をもう1枚増やさない）。 */
.pr-reason {
	padding: 20px;
	border-radius: 12px;
	background: var(--fig-blue-20);
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.pr-reason__title {
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}

/* ---------------------------------------------------------------------
 * 量販店・ネット通販との違い
 * 他社側の原稿がないので比較表にせず、自社の強みを4枚のカードで見せる。
 * 数字（0円・10年）は黄色の下線で目立たせる（価格カードの .pr-card__yen と同じ印）。
 * ------------------------------------------------------------------- */
.pr-strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.pr-strength {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 10px 16px;
	overflow: hidden;
	border: 3px solid var(--c-brand);
	border-radius: 16px;
	background: #fff;
	text-align: center;
}
.pr-strength__no {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 10px 3px 8px;
	border-radius: 0 0 10px 0;
	background: var(--c-brand);
	color: #fff;
	font-family: var(--font-num);
	font-weight: var(--fw-black);
	font-size: 13px;
	line-height: 1.4;
}
.pr-strength__axis { font-size: 13px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.pr-strength__val { display: flex; flex-direction: column; align-items: center; color: var(--fig-blue-80); font-weight: var(--fw-black); line-height: 1.2; }
.pr-strength__pre, .pr-strength__unit { font-size: 15px; }
.pr-strength__big { font-size: 34px; line-height: 1.2; }
/* 数字と単位は横に並べる（「0円」「10年」）。 */
.pr-strength__big--num {
	font-family: var(--font-num);
	font-size: 44px;
	letter-spacing: -.02em;
	padding: 0 2px;
	background: linear-gradient(var(--c-highlight), var(--c-highlight)) no-repeat 0 88% / 100% 12px;
}
.pr-strength__val:has(.pr-strength__big--num) { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; }
.pr-strength__val:has(.pr-strength__big--num) .pr-strength__pre { grid-column: 1 / -1; }
.pr-strength__sub { font-size: 12px; line-height: 1.5; color: var(--fig-gray-70); }

/* お支払い方法は交換ページと共用（components.css の .ex-pay）。 */

/* 補助金の枠は交換ページと共用（components.css の .ex-subsidy）。 */

/* =====================================================================
 * PC（600 以上。交換ページ・TOP と同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV（修理TOP と同じ大きさ） --- */
	.hero--price .hero__title { font-size: max(calc(22 * var(--ff)), calc(36 * var(--u))); }

	/* --- 価格表：3列×2段（容量ごとに1段になる） --- */
	.pr-grid { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.pr-card { padding: calc(28 * var(--u)) calc(24 * var(--u)); gap: calc(12 * var(--u)); }
	.pr-card__cap { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); padding: 2px calc(24 * var(--u)); }
	.pr-card__type { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.pr-card__yen { font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); }
	.pr-card__yen mark { background-size: 100% 14px; }

	/* --- 横棒グラフ：ラベル・棒・金額を横一列 --- */
	.pr-bars { gap: calc(24 * var(--u)); }
	.pr-bar { grid-template-columns: calc(120 * var(--u)) 1fr calc(200 * var(--u)); align-items: center; gap: calc(20 * var(--u)); }
	.pr-bar__label { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.pr-bar__track { height: calc(48 * var(--u)); }
	.pr-bar__gap { font-size: max(calc(12 * var(--ff)), calc(16 * var(--u))); white-space: nowrap; }
	.pr-bar__yen { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); text-align: right; }
	.pr-bar__yen--ours { font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
	.pr-reason { padding: calc(32 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.pr-reason__title { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); margin-bottom: calc(12 * var(--u)); }

	/* --- 強みのカード（600〜1023 は2列のまま。4列にすると1枚が130px前後になり語が割れる） --- */
	.pr-strengths { gap: calc(20 * var(--u)); }
	.pr-strength { padding: max(32px, calc(40 * var(--u))) calc(16 * var(--u)) calc(26 * var(--u)); gap: calc(10 * var(--u)); }
	.pr-strength__no { font-size: max(calc(13 * var(--ff)), calc(16 * var(--u))); padding: 4px calc(14 * var(--u)) 5px calc(12 * var(--u)); }
	.pr-strength__axis { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
	.pr-strength__pre, .pr-strength__unit { font-size: max(calc(15 * var(--ff)), calc(20 * var(--u))); }
	.pr-strength__big { font-size: max(calc(34 * var(--ff)), calc(52 * var(--u))); }
	.pr-strength__big--num { font-size: max(calc(44 * var(--ff)), calc(72 * var(--u))); background-size: 100% max(12px, calc(18 * var(--u))); }
	.pr-strength__sub { font-size: max(calc(12 * var(--ff)), calc(15 * var(--u))); }


}

/* 600〜1023 は比例させた列幅（120・240）が 50〜100px になって語が割れるので、文字の幅に合わせる（2026-10-12）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	/* 列は2本の棒で共有する（subgrid）。行ごとに文字の幅で列を決めると、
	 * 「市場相場」と「当社」の長さの違いで棒の始まりと終わりがずれる（2026-10-12）。 */
	.pr-bars { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: calc(20 * var(--u)); }
	.pr-bar { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.pr-bar__label, .pr-bar__yen { white-space: nowrap; }
}

@media (min-width: 1024px) {
	.pr-strengths { grid-template-columns: repeat(4, 1fr); }
}