/* ==========================================================================
   有友住建テーマ 見た目の指定（このファイル1つにまとめている）

   目次
     1. 設定値（色・文字・幅・余白）   … 見た目を変えたいときは、まずここを直す
     2. 土台（リセット・本文・リンク）
     3. 共通の部品（幅・見出し・ボタン・英字）
     4. ヘッダー・メニュー
     5. トップページの各欄
     6. カード・一覧・詳細
     7. 固定ページの本文（料金表・会社概要・フォーム）
     8. お問い合わせ誘導の帯・フッター・スマホ固定ボタン
     9. スマホ（幅 768px 未満）

   クラス名は a- で始める（プラグインの CSS と混ざらないように）。
   値は参考サイト「旧邸御室」を Chrome で実測したもの（2026-09-16）を基にしている。
   ========================================================================== */

/* 1. 設定値 ---------------------------------------------------------------- */
:root {
	--ink: #4b4b4b;          /* 本文の墨色（実測） */
	--ink-strong: #2b2b2b;   /* 見出し・ボタンの濃い墨色 */
	--ink-soft: #8a8a8a;     /* 日付・注記 */
	--paper: #ffffff;        /* 背景 */
	--paper-sub: #f6f6f4;    /* 欄の区切りに使う、ごく薄い灰 */
	--line: #dcdcdc;         /* 罫線 */

	--font: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	--font-en: Georgia, "Times New Roman", serif;   /* 英字の小見出し（イタリック）。数字には使わない（下の --num を参照） */
	--fs: 15px;              /* 本文（実測13〜14pxを読みやすさのため少し大きく） */
	--ls: 0.08em;            /* 字間（実測 1px 相当） */

	--w-wide: 1070px;        /* 広い欄の最大幅（実測） */
	--w-narrow: 915px;       /* 狭い欄の最大幅（実測） */
	--gutter: 24px;          /* 画面端の余白 */
	--section: 120px;        /* 欄と欄の間（上下） */
	--header: 64px;          /* ヘッダーの高さ（実測） */
}

/* 2. 土台 ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header) + 16px); } /* 「#事業名」へ移動したときヘッダーに隠れないように */
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs);
	line-height: 2;
	letter-spacing: var(--ls);
	-webkit-font-smoothing: antialiased;
}
/*
 * 泣き別れ（最後の行が1〜2文字だけになる）を防ぐ（2026-09-17 ユーザー指示「1〜2文字なら1行で表示してほしい」）
 *   word-break: auto-phrase … 日本語を語句の切れ目で改行する（「ます。」などを途中で切らない）
 *   text-wrap: pretty       … 文章の最後の行が極端に短くならないよう、前の行から文字を送る
 *   text-wrap: balance      … 見出しは各行の長さをそろえる
 * 対応していない古いブラウザでは、通常の折り返しになるだけ（崩れない）。
 */
body { line-break: strict; word-break: auto-phrase; }
p, li, dd, dt, td, th, summary, label { text-wrap: pretty; }
h1, h2, h3, .a-head__title, .a-campaign__title { text-wrap: balance; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.a-nowrap { white-space: nowrap; } /* 番地など、途中で改行させたくない文字のかたまり */
/* 見た目は隠して読み上げだけ残す */
.a-sr, .a-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.a-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--paper); padding: 8px 16px; }

/* 3. 共通の部品 ------------------------------------------------------------ */
.a-wide, .a-narrow { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.a-wide { max-width: calc(var(--w-wide) + var(--gutter) * 2); }
.a-narrow { max-width: calc(var(--w-narrow) + var(--gutter) * 2); }
.a-section { padding-block: var(--section) 0; }
.a-main { padding-bottom: var(--section); }
.a-center { text-align: center; }

/* 英字の小見出し（イタリックのセリフ体） */
.a-en { font-family: var(--font-en); font-style: italic; font-size: 13px; letter-spacing: .1em; color: var(--ink-soft); }

/* 欄の見出し（parts/section-head.php） */
.a-head { text-align: center; margin-bottom: 56px; }
.a-head__title { font-size: 24px; font-weight: 600; line-height: 1.8; letter-spacing: .12em; color: var(--ink-strong); }
/* 縦書きの見出し（実測 28px・字間5px） */
.a-head--vertical { text-align: left; margin-bottom: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 16px; }
/* text-orientation: upright … 数字（「4つの」の 4）や英字も横に寝かせず、立てて並べる */
.a-head--vertical .a-head__title { writing-mode: vertical-rl; text-orientation: upright; font-size: 28px; letter-spacing: 5px; line-height: 1.9; }
.a-head--vertical .a-en { writing-mode: vertical-rl; }
/* スマホ用の縦書きラベル（parts/section-head.php）。PC では出さない */
.a-head__label { display: none; }

/* ボタン（墨色） */
.a-btn { display: inline-block; padding: 16px 40px; background: var(--ink-strong); color: var(--paper); letter-spacing: .15em; border: 1px solid var(--ink-strong); cursor: pointer; font: inherit; }
.a-btn:hover { background: var(--paper); color: var(--ink-strong); opacity: 1; }
.a-btn--small { padding: 6px 18px; font-size: 13px; }
/* 「もっと見る」系のリンク（参考サイトと同じ、小さめの文字＋先頭に ○） */
.a-more { display: inline-block; position: relative; margin-top: 32px; padding-left: 30px; font-size: 12px; letter-spacing: .15em; }
.a-more::before { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1.5px solid var(--ink-strong); border-radius: 50%; }
/*
 * 数字（金額・電話番号・日付）は本文と同じ明朝体で、高さと幅をそろえて表示する。
 * Georgia の数字は高さが不ぞろい（3・4・5・7・9 が下に飛び出す）で読みにくいため使わない（2026-09-17 ユーザー指摘「金額の文字が読みづらい」）。
 */
.a-num, .a-tel, .a-nav__tel, .a-cta__tel a, .a-news-row time, .a-single__head time, .a-promise__num, .a-price-table td:nth-child(4), .a-footer__info a {
	font-family: var(--font); font-variant-numeric: lining-nums tabular-nums; font-style: normal;
}
.a-tel { font-size: 28px; letter-spacing: .06em; color: var(--ink-strong); }

/* 4. ヘッダー・メニュー ---------------------------------------------------- */
.a-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header); background: var(--paper); border-bottom: 1px solid var(--line); transition: transform .4s, opacity .4s, visibility .4s; }
.a-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; padding-inline: var(--gutter); }
.a-logo__name { font-size: 20px; font-weight: 600; letter-spacing: .2em; color: var(--ink-strong); }
.a-logo img { max-height: 40px; width: auto; }
.a-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.a-nav__list { display: flex; gap: 28px; font-size: 14px; }
.a-nav__cta { display: flex; align-items: center; gap: 16px; }
.a-nav__tel { letter-spacing: .05em; }
.a-menu-btn { display: none; }
/* ログイン中は画面上部に管理バーが出るので、その分ヘッダーを下げる（782px 未満は管理バーが高い） */
.admin-bar .a-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .a-header { top: 46px; } }
body { padding-top: var(--header); }
/*
 * トップ：メイン写真（ファーストビュー）が見えている間はヘッダーを隠し、写真を過ぎたら上から出す
 * （2026-09-17 ユーザー指示。参考サイト旧邸御室と同じ見せ方）。切り替えは main.js が is-over-hero を付け外しする。
 */
body.home { padding-top: 0; }
/* <html class="js"> のときだけ隠す（JS が動かない環境ではヘッダーを常に表示。inc/setup.php） */
.js .a-header.is-over-hero { transform: translateY(-100%); opacity: 0; visibility: hidden; }

/* 5. トップページの各欄 ---------------------------------------------------- */
/* メイン写真（実測：高さ約900px。画面の高さに合わせる） */
.a-hero { position: relative; height: 100svh; min-height: 560px; background: var(--hero) center / cover no-repeat; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.25)); }
.a-hero__brand { position: absolute; left: 10%; bottom: 18%; z-index: 1; color: var(--paper); text-align: center; }
.a-hero__name { font-size: 34px; font-weight: 600; letter-spacing: .35em; }
.a-hero__brand .a-en { color: rgba(255,255,255,.85); }

/* 縦書き見出し＋本文＋写真の左右組み（旧邸御室の「由来」「ご利用案内」「ニュース」と同じ組み方） */
.a-split { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: start; }
.a-split__body { padding-top: 24px; }
/* 写真がある場合は「見出し｜本文｜写真」の3列にする */
.a-split:has(.a-split__img) { grid-template-columns: auto 1fr 38%; }
.a-lead { font-size: 17px; line-height: 2.2; margin-bottom: 32px; }

/* こんなお悩み */
.a-worries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-bottom: 40px; }
.a-worries li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; }
.a-worries li::before { content: "―"; position: absolute; left: 0; color: var(--ink-soft); }

/* 全幅写真に白文字（旧邸御室 about） */
.a-band { margin-top: var(--section); background: var(--band) center / cover no-repeat; position: relative; color: var(--paper); text-align: center; }
.a-band::before { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.5); }
.a-band__inner { position: relative; padding-block: 140px; }
.a-band .a-head__title, .a-band .a-en { color: var(--paper); }

/* 選ばれる理由・お約束 */
.a-reasons, .a-promises { display: grid; gap: 48px; margin-top: 64px; }
.a-reasons { grid-template-columns: repeat(3, 1fr); }
.a-promises { grid-template-columns: repeat(2, 1fr); gap: 56px 64px; }
.a-reason img { aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 20px; }
.a-reason h3, .a-promise h3 { font-size: 17px; font-weight: 600; color: var(--ink-strong); margin-bottom: 8px; line-height: 1.7; }
.a-promise { display: grid; grid-template-columns: 80px 1fr; gap: 0 24px; }
.a-promise > img, .a-promise__num { grid-row: span 2; width: 80px; height: 80px; }
.a-promise__num { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 28px; }

/* キャンペーン */
.a-campaign { text-align: center; }
.a-campaign > * + * { margin-top: 24px; }
.a-campaign__title { font-size: 20px; font-weight: 600; line-height: 1.8; color: var(--ink-strong); padding: 24px; border-block: 1px solid var(--ink-strong); }

/* 6. カード・一覧・詳細 ---------------------------------------------------- */
.a-cards { display: grid; gap: 48px 32px; margin-top: 32px; }
.a-cards--2 { grid-template-columns: repeat(2, 1fr); }
.a-cards--3 { grid-template-columns: repeat(3, 1fr); }
.a-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-sub); margin-bottom: 16px; }
.a-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.a-card__link:hover { opacity: 1; }
.a-card__link:hover img { transform: scale(1.04); }
.a-card__title { font-size: 17px; font-weight: 600; color: var(--ink-strong); margin-bottom: 4px; }
.a-card__text { font-size: 14px; line-height: 1.9; }

/* 工事の情報（地域・工事内容・工期） */
.a-meta { font-size: 13px; line-height: 1.8; }
.a-meta div { display: flex; gap: 12px; }
.a-meta dt { color: var(--ink-soft); flex: 0 0 4em; }
.a-meta dd { margin: 0; }

/* お知らせの行 */
.a-news { border-top: 1px solid var(--line); }
.a-news-row a { display: flex; gap: 32px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.a-news-row time { color: var(--ink-soft); flex: none; }

/* よくあるご質問 */
.a-faq__item { border-bottom: 1px solid var(--line); }
.a-faq__item:first-of-type { border-top: 1px solid var(--line); }
.a-faq__item summary { cursor: pointer; padding: 22px 40px 22px 44px; position: relative; list-style: none; font-weight: 600; color: var(--ink-strong); }
.a-faq__item summary::-webkit-details-marker { display: none; }
.a-faq__item summary::before { content: "Q"; position: absolute; left: 8px; font-family: var(--font-en); font-style: italic; font-size: 20px; }
.a-faq__item summary::after { content: "＋"; position: absolute; right: 8px; }
.a-faq__item[open] summary::after { content: "－"; }
.a-faq__answer { padding: 0 8px 24px 44px; }

/* 下層ページの見出し・パンくず */
.a-page-title { padding: 96px var(--gutter) 64px; text-align: center; background: var(--paper-sub); }
.a-page-title__ja { font-size: 28px; font-weight: 600; letter-spacing: .2em; color: var(--ink-strong); }
.a-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-block: 16px; font-size: 12px; color: var(--ink-soft); }
.a-breadcrumb li + li::before { content: "/"; margin-right: 8px; }

/* 一覧：絞り込み・準備中・ページ送り */
.a-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 48px; font-size: 14px; }
.a-filter [aria-current] { border-bottom: 1px solid var(--ink); }
.a-empty { text-align: center; padding: 64px 0; color: var(--ink-soft); }
.a-pager .nav-links { display: flex; justify-content: center; gap: 16px; margin-top: 64px; }
.a-pager .current { border-bottom: 1px solid var(--ink); }

/* 事業内容一覧：写真と本文を左右交互に */
.a-service { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 48px; border-bottom: 1px solid var(--line); }
.a-service:nth-child(even) .a-service__img { order: 2; }
.a-service__img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.a-service h2 { font-size: 22px; font-weight: 600; color: var(--ink-strong); margin-bottom: 16px; }

/* 詳細ページ */
.a-single__head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.a-single__head time { color: var(--ink-soft); }
.a-single__head h1 { font-size: 24px; font-weight: 600; color: var(--ink-strong); line-height: 1.7; }
.a-single__img { margin-bottom: 24px; }
.a-single .a-meta { margin-bottom: 32px; padding: 16px 20px; background: var(--paper-sub); }

/* 7. 固定ページの本文（ブロックエディタの出力） ---------------------------- */
.a-content > * + * { margin-top: 1.5em; }
.a-content h2 { font-size: 20px; font-weight: 600; color: var(--ink-strong); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-top: 2.5em; }
.a-content ul { list-style: disc; padding-left: 1.5em; }
.a-content a:not(.a-tel) { text-decoration: underline; } /* 電話番号は大きく表示するので下線を付けない */
.a-note { font-size: 13px; color: var(--ink-soft); }

/* 料金表：分類ごとの折りたたみ（詳細ブロック）＋表ブロック */
.wp-block-details { border-bottom: 1px solid var(--line); }
.wp-block-details summary { cursor: pointer; padding: 20px 8px; font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.a-price-table { overflow-x: auto; margin: 0 0 24px; }
.a-price-table table, .a-company { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
/* 表ブロック標準の四方の枠線を消し、横線だけにする（参考サイトの罫線の細さに合わせる） */
.a-price-table th, .a-price-table td, .a-company th, .a-company td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.a-price-table thead { border-bottom: 0; }
.a-price-table th, .a-company th { background: var(--paper-sub); font-weight: 600; white-space: nowrap; }
.a-price-table td:nth-child(3), .a-price-table td:nth-child(4) { white-space: nowrap; }
.a-price-table td:nth-child(4) { text-align: right; font-weight: 600; color: var(--ink-strong); }

/* 会社情報の表と地図 */
.a-company th { width: 9em; }
.a-map { margin-top: 32px; aspect-ratio: 16 / 9; }
.a-map iframe { width: 100%; height: 100%; border: 0; }

/* お問い合わせフォーム（Contact Form 7 の出力に合わせる） */
.a-form__row { margin-bottom: 24px; }
.a-form__label { display: block; font-weight: 600; margin-bottom: 6px; }
.a-form__label em { font-style: normal; font-size: 11px; color: var(--paper); background: var(--ink-strong); padding: 1px 8px; margin-left: 8px; vertical-align: middle; }
.a-form input:not([type=checkbox]):not([type=submit]), .a-form select, .a-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); font: inherit; background: var(--paper); }
.a-form__submit { text-align: center; margin-top: 40px; }

/* 8. お問い合わせ誘導の帯・フッター・スマホ固定ボタン ---------------------- */
.a-cta { margin-top: var(--section); padding-block: 96px; background: var(--paper-sub); text-align: center; }
.a-cta > div > * + * { margin-top: 16px; }
.a-cta__tel a { font-size: 40px; letter-spacing: .05em; color: var(--ink-strong); }
.a-cta__hours, .a-cta__lead { font-size: 14px; }
.a-cta .a-cta__lead { margin-block: 32px; } /* 上の「* + *」より強い指定にして余白を広げる */
.a-main:has(.a-cta) { padding-bottom: 0; }

.a-footer { padding-block: 72px 24px; border-top: 1px solid var(--line); font-size: 13px; }
.a-footer__inner { display: flex; justify-content: space-between; gap: 48px; }
.a-footer__name { font-size: 20px; font-weight: 600; letter-spacing: .2em; color: var(--ink-strong); }
.a-footer__info > * + * { margin-top: 8px; }
.a-footer__label { margin-right: 1em; } /* 「本拠地」「岡山事務所」の項目名 */
.a-footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 40px; }
.a-footer__copy { text-align: center; margin-top: 56px; font-family: var(--font-en); color: var(--ink-soft); }
.a-fixed-cta { display: none; }

/* 9. スマホ（幅 768px 未満） ---------------------------------------------- */
/* ヘッダー：幅 1024px 未満はメニュー項目が1行に収まらないので、右上のボタンで開く形にする */
@media (max-width: 1023px) {
	/* メニュー：右上のボタンで全画面に開く（開閉は main.js） */
	.a-menu-btn { display: block; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; position: relative; color: inherit; }
	.a-menu-btn span:first-child, .a-menu-btn::before, .a-menu-btn::after { content: ""; position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform .3s; }
	.a-menu-btn::before { top: 15px; } .a-menu-btn span:first-child { top: 21px; } .a-menu-btn::after { top: 27px; }
	.a-menu-btn[aria-expanded=true]::before { transform: translateY(6px) rotate(45deg); }
	.a-menu-btn[aria-expanded=true]::after { transform: translateY(-6px) rotate(-45deg); }
	.a-menu-btn[aria-expanded=true] span:first-child { opacity: 0; }
	.a-nav { position: fixed; inset: var(--header) 0 0; background: var(--paper); color: var(--ink); flex-direction: column; justify-content: center; gap: 40px; visibility: hidden; opacity: 0; transition: opacity .3s; }
	.a-nav.is-open { visibility: visible; opacity: 1; }
	.a-nav__list { flex-direction: column; align-items: center; gap: 24px; font-size: 17px; }
	.a-nav__cta { flex-direction: column; }
}

/*
 * スマホ（幅 768px 未満）は、参考サイト「旧邸御室」のスマホ表示（幅375で実測 2026-09-17）に合わせる。
 *   余白 画面幅の5%（約19px）／本文 約14px・行の高さ約2.1・字間やや広め
 *   各欄の見出し …「短い日本語｜英字」を縦書き・間に縦線で中央に置き、長い見出しはその下に横書き（約17px）
 *   冒頭 … 縦書きキャッチだけを中央に大きく → 写真を全幅 → 本文
 *   全幅写真の欄 … 見出しは上部中央、長い見出しは右寄せ、本文は左寄せ
 *   お知らせ … 日付（斜体）と題名の2列、罫線なし ／ 地図は白黒 ／ フッターは中央そろえ
 *   欄と欄の間は広め（参考サイトは約170〜260px）
 */
@media (max-width: 767px) {
	:root { --section: 150px; --gutter: 5vw; --fs: 14px; }
	body { line-height: 2.08; letter-spacing: .07em; }

	/* メイン写真：画面いっぱい、社名は中央 */
	.a-hero { height: 100svh; min-height: 520px; }
	.a-hero__brand { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
	.a-hero__brand > * { white-space: nowrap; } /* p の text-wrap が親の nowrap を上書きするので子に直接指定 */
	.a-hero__name { font-size: 28px; letter-spacing: .25em; }

	/* --- 見出し：縦書きラベル（日本語｜英字）を中央に --- */
	.a-head { margin-bottom: 48px; }
	.a-head > .a-en { display: none; }                         /* 英字はラベル側に出す */
	/* 参考サイトと同じ並び：左に日本語、右に英字、その間に縦線 */
	.a-head__label { display: flex; justify-content: center; margin: 0 auto 40px; }
	.a-head__label-ja, .a-head__label-en { writing-mode: vertical-rl; line-height: 1.9; }
	.a-head__label-ja { font-size: 13.5px; letter-spacing: .25em; color: var(--ink-strong); padding-right: 8px; border-right: 1px solid var(--ink); }
	.a-head__label-en { font-family: var(--font-en); font-style: italic; font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); padding-left: 8px; }
	.a-head__title { font-size: 16.9px; font-weight: 400; line-height: 2.2; letter-spacing: .08em; text-align: left; }
	.a-head--short .a-head__label { margin-bottom: 0; }
	/* 短い見出しはラベルと同じ文字なので、見た目は隠して読み上げ用に残す（.a-sr と同じ隠し方） */
	.a-head--short .a-head__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	/* 縦書き指定の見出しも、スマホではラベル＋横書きにそろえる（冒頭のキャッチだけは下で縦書きのまま） */
	.a-head--vertical { display: block; text-align: left; margin-bottom: 48px; }
	.a-head--vertical .a-head__title { writing-mode: horizontal-tb; text-orientation: mixed; font-size: 16.9px; letter-spacing: .08em; }

	/* --- 冒頭：縦書きキャッチ → 写真 → 本文 --- */
	.a-split, .a-split:has(.a-split__img) { grid-template-columns: 1fr; gap: 0; }
	.a-intro .a-head__title { writing-mode: vertical-rl; text-orientation: upright; font-size: 22.5px; letter-spacing: .12em; line-height: 1.9; max-height: 12em; margin: 0 auto; }
	.a-intro .a-head--vertical { display: flex; justify-content: center; margin-bottom: 88px; }
	.a-intro .a-split__img { order: 2; margin-bottom: 8px; }
	.a-intro .a-split__body { order: 3; }
	.a-intro .a-lead { font-size: 14px; line-height: 2.08; margin-bottom: 24px; }
	.a-split__body { padding-top: 0; }

	/* --- 全幅写真の欄：見出しは上部中央、長い見出しは右寄せ、本文は左寄せ --- */
	.a-band { text-align: left; }
	.a-band__inner { padding-block: 0 72px; }
	.a-band .a-head__label { margin-bottom: 56px; }
	.a-band .a-head__label-ja { color: var(--paper); border-color: var(--paper); padding-top: 24px; }
	.a-band .a-head__label-en { color: rgba(255,255,255,.8); padding-top: 24px; }
	.a-band .a-head__title { text-align: right; }

	/* --- 一覧・カード類：1列に積む --- */
	.a-worries, .a-reasons, .a-promises, .a-cards--2, .a-cards--3, .a-service { grid-template-columns: 1fr; }
	.a-cards { gap: 56px; }
	.a-service { gap: 20px; }
	.a-service:nth-child(even) .a-service__img { order: 0; }
	.a-reason img { aspect-ratio: 16 / 10; }
	/* お約束：アイコンを上、本文を下（横に並べると本文の幅が細くなりすぎるため） */
	.a-promise { grid-template-columns: 1fr; gap: 12px; }
	.a-promise > img, .a-promise__num { grid-row: auto; width: 56px; height: 56px; }
	.a-promise__num { font-size: 22px; }
	.home .a-center { text-align: left; }                      /* 参考サイトのスマホはトップの本文を左寄せ */
	.home .a-campaign .a-center { text-align: center; }
	.a-cta .a-head__title { text-align: center; }

	/* --- お知らせ：日付（斜体）と題名の2列、罫線なし --- */
	.a-news, .a-news-row a { border: 0; }
	.a-news-row a { display: grid; grid-template-columns: 110px 1fr; gap: 0; padding: 10px 0; }
	.a-news-row time { letter-spacing: .05em; } /* 参考サイトは斜体だが、数字を読みやすくするため斜体にしない */

	/* --- 地図は白黒 --- */
	.a-map iframe { filter: grayscale(1); }

	/* --- 下層ページ --- */
	.a-page-title { padding: 56px var(--gutter) 40px; }
	.a-page-title__ja { font-size: 22px; }

	/* --- お問い合わせ誘導の帯・フッター：中央そろえ --- */
	.a-cta { margin-top: var(--section); padding-block: 72px; }
	.a-cta__tel a { font-size: 30px; }
	.a-footer { border-top: 0; padding-top: 0; text-align: center; }
	.a-footer__inner { flex-direction: column; align-items: center; gap: 40px; border-top: 1px solid var(--ink); margin-top: 72px; padding-top: 72px; max-width: calc(100% - var(--gutter) * 2); }
	.a-footer__nav { justify-items: center; }
	.a-footer__label { display: block; margin-right: 0; font-style: normal; font-family: var(--font); font-size: 12px; color: var(--ink-soft); }

	/* 料金表：横にはみ出す分は表の中だけで横スクロール */
	/*
	 * 料金表：スマホでは表をやめ、1行を3段に組む（横スクロールしないと金額が見えなかったため。2026-09-17）
	 *   1段目  名称（左）       金額（右）
	 *   2段目  〃               円／単位（右・小）
	 *   3段目  規格・仕様（横幅いっぱい・小）… 右の列に押されて細くならないように
	 * 見出し行（名称・規格・単位・単価）は、読み上げ用に残して見た目は隠す。
	 */
	.a-price-table table { min-width: 0; }
	.a-price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.a-price-table tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "name unit" "spec spec"; column-gap: 16px; row-gap: 2px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--line); }
	.a-price-table td { padding: 0; border: 0; min-width: 0; }
	.a-price-table td:nth-child(1) { grid-area: name; font-weight: 600; color: var(--ink-strong); text-wrap: balance; } /* 幅320の端末でも名称が泣き別れしないように */
	.a-price-table td:nth-child(2) { grid-area: spec; font-size: 12px; line-height: 1.7; color: var(--ink-soft); text-wrap: balance; } /* 行の長さをそろえて泣き別れを防ぐ */
	.a-price-table td:nth-child(3) { grid-area: unit; text-align: right; font-size: 12px; color: var(--ink-soft); }
	.a-price-table td:nth-child(3)::before { content: "円／"; }  /* 見出しの「単価（円）」を隠したので、単位の前に「円」を付ける */
	.a-price-table td:nth-child(4) { grid-area: price; font-size: 16px; }

	/* 画面下の固定ボタン（電話・無料見積もり） */
	.a-fixed-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0; z-index: 40; background: var(--ink-strong); transition: transform .4s, opacity .4s, visibility .4s; }
	/* トップのメイン写真が見えている間は、ヘッダーと同じく隠す（写真にかぶせない。header と同じ親の兄弟要素なので ~ で判定） */
	.js .a-header.is-over-hero ~ .a-fixed-cta { transform: translateY(100%); opacity: 0; visibility: hidden; }
	.a-fixed-cta a { color: var(--paper); text-align: center; padding: 14px 8px; font-size: 14px; letter-spacing: .1em; }
	.a-fixed-cta a + a { border-left: 1px solid rgba(255,255,255,.3); }
	body { padding-bottom: 52px; }
}