/* =====================================================================
 * pages.css — 各ページ固有レイアウト
 * ===================================================================== */

/* ---------- FV ----------
 * 形は components.css（.hero--page・.hero__box）と hero-v2.css（.hero--v2）にある。
 * 全ページの FV が .hero--page を持つ。 */
.hero { position: relative; }
.hero__cta { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 600px) { .hero__cta { grid-auto-flow: column; justify-content: start; } }

/* ---------- 施工事例 ----------
 * 2026-09-05: 交換ページの施工事例カード（Figma: Frame 81 / 388×395・角丸20・白）に
 * 合わせた。写真はカードの上端いっぱい、文字は左右20pxの内側。
 * 商材（型番）一覧も同じカードを使っている。 */
.cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.case-card { background: var(--c-bg); border-radius: 20px; overflow: hidden; }
.case-card a { display: flex; flex-direction: column; gap: 8px; padding: 0 0 24px; text-decoration: none; color: inherit; }
.case-card a > :not(.case-card__img):not(.case-card__thumb) { margin-inline: 20px; }
/* 写真が未登録のサムネ。カードの上端いっぱいの薄い青の面にする
 * （点線の枠だと、白いカードの中に別の箱が浮いて見える）。 */
.case-card__thumb {
	aspect-ratio: 388/227;
	background: var(--fig-blue-20);
	display: grid; place-items: center;
	color: var(--fig-blue-40); font-size: 13px; font-weight: var(--fw-bold);
	margin-bottom: 12px;
}
.case-card__thumb::after { content: "施工写真"; }
/* 見出し: 20px / 行間36 / 黒 / 太さ500（Figma） */
.case-card__title { font-size: 15px; line-height: 1.8; font-weight: var(--fw-medium); color: #000; }
/* 事例が1件も無いときの枠。文字は控えめにして、実データのカードと見分けが付くようにする。 */
.case-card--empty .case-card__title { color: var(--c-gray); }
.case-card a:hover .case-card__title { text-decoration: underline; }
.case-card__img { aspect-ratio: 388/227; overflow: hidden; margin-bottom: 12px; }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; }
.case-card__price { font-family: var(--font-en); font-size: 20px; font-weight: var(--fw-black); color: var(--c-warm-deep); }
/* 地域・メーカーのバッジ（Figma: padding 0 16 / 角丸6 / #C3E1FF / #0B56A2） */
.chip {
	display: inline-block; padding: 0 16px; border-radius: 6px;
	background: var(--fig-blue-30); color: var(--fig-blue-60);
	font-size: 14px; line-height: 1.8; font-weight: var(--fw-bold); margin-right: 4px;
}
/* スマホ: ブロックは横に送るカード列（次のカードの端を見せて、横に続くと分かるようにする）、一覧は縦1列。 */
.cases__grid--scroll {
	grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.cases__grid--scroll::-webkit-scrollbar { display: none; }
.cases__grid--scroll > li { scroll-snap-align: start; }
.cases__grid--list { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.cases__grid,
	.cases__grid--scroll { grid-template-columns: repeat(3, 1fr); }
	.cases__grid--scroll { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
}

/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto 18px; }
.faq__item { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.faq__q { padding: 16px 44px 16px 18px; font-weight: var(--fw-bold); position: relative; }
/*
 * 開閉の三角印を消す。::-webkit-details-marker だけでは新しい Chrome / Firefox に
 * 消えないため、display:list-item を打ち消す指定を併記する。
 * 右端の「＋／−」だけを開閉の印にする。
 */
.faq__q::-webkit-details-marker { display: none; }
.faq__q { display: block; list-style: none; }
.faq__q::marker { content: ""; }
.faq__q::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--c-brand); }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 18px 18px; color: var(--c-ink-weak); font-size: 14px; }

/* =====================================================================
 * 下層ページ共通 / 各ページ固有（2c〜2f）
 * ===================================================================== */

/* ---------- パンくず（Figma: breadcrumbs 1200×17 / 間隔12 / 14px・行間16.8） ----------
 * 交換ページで確定した形を全ページ共通にした（2026-09-10）。
 * 帯の色は付けない。リンクは #259EF5 に下線。
 * 区切りは Font Awesome 5 Free 900 の chevron-right（11px・#BDBDBD）で、
 * テキスト枠 7×13 の中に 6×10 で描かれる。文字の「›」では細く小さすぎるので、
 * ボタンの矢印と同じく書き出した形をマスクにして色を付ける。 */
.breadcrumb { background: none; border-bottom: 0; padding-top: 32px; }
/* Figma v2 の枠は20（v1 は17）。 */
.breadcrumb__list {
	display: flex; flex-wrap: wrap; gap: 12px; padding-block: 0;
	font-size: 14px; line-height: 20px; font-weight: var(--fw-medium); color: var(--fig-gray-70);
}
.breadcrumb__list li { display: flex; align-items: center; gap: 12px; }
.breadcrumb__list li::after {
	content: ""; flex: none; width: 7px; height: 13px;
	background: var(--fig-gray-30);
	-webkit-mask: no-repeat center / 6px 10px url("../img/icon-chevron.png");
	mask: no-repeat center / 6px 10px url("../img/icon-chevron.png");
}
.breadcrumb__list li:last-child::after { content: ""; display: none; }
.breadcrumb__list a { color: var(--fig-blue-40); text-decoration: underline; text-underline-offset: 3px; }
/* 置き場所は全ページ FV の下（交換ページに合わせた。2026-10-11）。
 * 交換ページの Figma ではこの位置のパンくずは 1200×17 なので、PC幅では行の高さを17にする。 */
/* パンくずから本文まで。Figma の Frame 20 の間隔32と、contents の上余白60を足した92（交換ページの .ex-contents と同じ）。
 * 本文の枠（.page-contents）で始まるページと、全幅の青い帯（section）がいきなり始まるページがあるので両方に付ける。
 * スマホ幅は交換ページのスマホ時（56）に合わせる。 */
.breadcrumb--after-fv + .page-contents { padding-top: 56px; }
.breadcrumb--after-fv + section { margin-top: 56px; }
@media (min-width: 600px) {
	.breadcrumb--after-fv .breadcrumb__list { line-height: max(calc(17 * var(--ff)), calc(17 * var(--u))); }
	.breadcrumb--after-fv + .page-contents { padding-top: calc(92 * var(--u)); }
	.breadcrumb--after-fv + section { margin-top: calc(92 * var(--u)); }
}

/* ---------- 下層FV ----------
 * 下層ページの FV は「白い地の上に置かれた角丸の青い箱」（Figma の headline）。
 * Figma の字間は0。影も無い。 */
.hero--page .hero__catch { font-size: clamp(22px, 5vw, 34px); text-shadow: none; letter-spacing: 0; }
.hero--repair .hero__catch { font-size: clamp(20px, 4.6vw, 30px); }

/* ---------- 下層FV を交換ページ（Figma v2）の見た目にそろえる（2026-10-12） ----------
 * v1 の「白い帯に青や赤の文字」をやめ、青い面に白い見出し、強調の行は黄色（交換ページの価格と同じ）。
 * 飾りの楕円（.hero__box::before）も v2 には無いので消す。文字の大きさは各ページの CSS のまま。
 * ボタンは交換ページの FV と同じピル形（オレンジ＝電話、blue-40＝見積もり）。 */
.hero--page:not(.hero--v2) .hero__box::before { content: none; }
.hero--page:not(.hero--v2) .hero__catch-label { background: none; padding: 0; border-radius: 0; color: #fff; }
.hero--page:not(.hero--v2) .hero__catch-label--strong { color: var(--fig-yellow); }
/* 見出しの文字の大きさ。施工事例・エラーコードのメーカー別・工事の流れ・お客様の声・メーカー・症状別・補助金で同じ値なので、ここにまとめた。
 * エリア・会社概要・FAQ は値が違うので各ページの CSS にある。強調の行（--strong）の大きさも各ページの CSS。 */
.hero--case .hero__catch-label,
.hero--errorlist .hero__catch-label,
.hero--flow .hero__catch-label,
.hero--voice .hero__catch-label,
.hero--maker .hero__catch-label,
.hero--repair .hero__catch-label,
.hero--subsidy .hero__catch-label { font-size: 20px; line-height: 1.4; }
/* ボタン（.hero__cta-btn）の上の間隔と並びは交換ページと同じ（20px／32u・間隔12px／24u）。
 * 600 以上は2つ横並び。箱の内側が交換ページより狭いページがあるので、上限 548u の等分にする。 */
.hero--page:not(.hero--v2) .hero__cta { gap: 12px; margin-top: 20px; }
@media (min-width: 600px) {
	.hero--page:not(.hero--v2) .hero__cta { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, calc(548 * var(--u)))); gap: calc(24 * var(--u)); margin-top: calc(32 * var(--u)); }
	.hero--page:not(.hero--v2) .hero__cta-btn { width: auto; }
	.hero--case .hero__catch-label,
	.hero--errorlist .hero__catch-label,
	.hero--flow .hero__catch-label,
	.hero--voice .hero__catch-label,
	.hero--maker .hero__catch-label,
	.hero--repair .hero__catch-label,
	.hero--subsidy .hero__catch-label { font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
}

/* ---------- 2e エラー個別 ---------- */
.tag--warn { background: #e8a13a; color: #fff; font-size: 11px; font-weight: var(--fw-bold); padding: 3px 10px; border-radius: 4px; }
.tag--muted { background: var(--c-gray); color: #fff; }
.reset-steps { display: grid; gap: 10px; margin: 12px 0; }
.reset-steps li { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 14px 18px; font-weight: var(--fw-bold); }
.reset-steps__no { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--c-brand); color: #fff; border-radius: 50%; font-size: 14px; }
.cause-list { display: grid; gap: 6px; margin: 10px 0; }
.cause-list li { padding: 12px 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.cause-list li::before { content: "・"; color: var(--c-brand); }

/* ---------- 入力欄（.field） ----------
 * お問い合わせ（2f）の見た目は contact.css に移した（2026-09-08）。
 * ここに残しているのは素の形で、ほかのページの検索・絞り込みフォームが使う。
 * 2f 側は .ct-form の中だけで上書きしている。 */
.field { display: grid; gap: 6px; }
.field__label { font-weight: var(--fw-bold); font-size: 14px; }
.req { background: var(--c-badge); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 3px; margin-left: 4px; }
.field__input { padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; background: #fff; width: 100%; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field__help { font-size: 12px; color: var(--c-gray); }

/* ---------- エラーコードDB（一覧カード / 個別） ---------- */
.ec-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 600px) { .ec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ec-grid { grid-template-columns: repeat(3, 1fr); } }

.ec-card { display: flex; }
.ec-card__link {
	display: flex; flex-direction: column; gap: 8px; width: 100%;
	padding: 16px 18px; background: #fff; text-decoration: none; color: inherit;
	border: 1px solid var(--c-border); border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ec-card__link:hover {
	border-color: var(--c-brand); box-shadow: var(--shadow); transform: translateY(-2px);
}
.ec-card__head { display: flex; align-items: baseline; gap: 10px; }
.ec-card__code {
	font-family: var(--font-en); font-weight: var(--fw-black); font-size: 22px;
	line-height: 1.1; color: var(--c-brand); letter-spacing: .02em;
}
.ec-card__maker {
	font-size: 12px; font-weight: var(--fw-bold); color: var(--c-ink-weak);
	background: var(--c-bg-soft); border-radius: var(--radius-pill); padding: 3px 10px;
}
.ec-card__desc {
	font-size: 13px; line-height: 1.6; color: var(--c-ink-weak);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-tag {
	font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill);
	background: var(--c-brand-pale); color: var(--c-brand-deep); white-space: nowrap;
}

/* --- 2e 緊急度バッジ（2a-D で3色と意味が固定。他用途に使わない） --- */
.ec-urgency {
	display: inline-flex; align-items: center; gap: 8px;
	border-radius: var(--radius-pill); padding: 6px 14px;
	font-size: 13px; font-weight: var(--fw-bold); color: #fff; line-height: 1.4;
}
.ec-urgency__mark { font-size: 15px; }
.ec-urgency--red    { background: var(--c-urgency-stop); }
.ec-urgency--orange { background: var(--c-urgency-check); }
.ec-urgency--green  { background: var(--c-urgency-self); }
/* 一覧カード用の小さい丸だけの表示 */
.ec-urgency--dot { padding: 0; width: 22px; height: 22px; justify-content: center; gap: 0; }
.ec-urgency--dot .ec-urgency__text { display: none; }

/* --- 2e 本文ブロック --- */
.reset-steps__body { display: grid; gap: 2px; }
.reset-steps__body small { font-weight: var(--fw-normal); font-size: 13px; color: var(--c-ink-weak); }
.cause-list li small { display: block; font-weight: var(--fw-normal); font-size: 13px; color: var(--c-ink-weak); }

/* ---------- 記事本文（index.php フォールバック用） ---------- */
.wrap--narrow { max-width: 820px; }

.entry-title {
	font-size: 28px; line-height: 1.45; font-weight: var(--fw-black);
	margin: 0 0 14px; color: var(--c-ink);
}
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; }
.entry-meta .ec-tag { text-decoration: none; }

.entry-content { font-size: 16px; line-height: 1.9; color: var(--c-ink); }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 {
	font-size: 22px; line-height: 1.5; font-weight: var(--fw-bold);
	margin-top: 2.2em; padding: 10px 0 10px 14px;
	border-left: 5px solid var(--c-brand); background: var(--c-bg-soft);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content h3 {
	font-size: 18px; line-height: 1.5; font-weight: var(--fw-bold);
	margin-top: 1.9em; padding-bottom: 6px; border-bottom: 2px solid var(--c-border);
}
.entry-content h4 { font-size: 16px; font-weight: var(--fw-bold); margin-top: 1.6em; }
.entry-content p { margin: 0; }
.entry-content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--c-warm-deep); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .5em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--c-bg-soft); font-weight: var(--fw-bold); white-space: nowrap; }
.entry-content blockquote {
	margin-left: 0; padding: 14px 18px; background: var(--c-bg-soft);
	border-left: 4px solid var(--c-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content hr { border: 0; border-top: 1px solid var(--c-border); margin: 2.4em 0; }

/* ---------- 記事一覧（カテゴリーアーカイブ） ---------- */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 600px) { .post-list { grid-template-columns: repeat(2, 1fr); } }

.post-list__link {
	display: flex; flex-direction: column; gap: 8px; height: 100%;
	padding: 18px 20px; background: #fff; text-decoration: none; color: inherit;
	border: 1px solid var(--c-border); border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-list__link:hover {
	border-color: var(--c-brand); box-shadow: var(--shadow); transform: translateY(-2px);
}
.post-list__title { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.55; color: var(--c-brand-deep); }
.post-list__excerpt {
	font-size: 13px; line-height: 1.7; color: var(--c-ink-weak);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-list__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* --- お問い合わせ 2f：送信処理まわり（2026-08-25） ---
 * 色と大きさは contact.css 側で 2f の見た目に寄せている。 */
.form-notice { border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; font-weight: var(--fw-bold); }
.form-notice--error { background: #fdecec; border: 1px solid #e0b4b4; color: #a12b2b; }
.field--error .field__input { border-color: #d05353; background: #fffafa; }
.field__error { color: #a12b2b; font-size: 14px; margin: 6px 0 0; font-weight: var(--fw-bold); }
/* 自動投稿を落とす罠。人には見せないが display:none だと埋めない相手もいるので画面外へ逃がす */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }