/*
 * 行政書士北山大介事務所 コーポレートサイト メインスタイルシート
 * デザイン方針: パターンB（グリーン基調）
 * 参照: 味の素\デザイン案\行政書士北山大介事務所コーポレートサイト\デザイン案.md
 */

/* ========== 1. カラートークン・基本変数 ========== */
:root {
	/* ロゴ基準色 */
	--c-brand-green: #276534;
	--c-brand-navy: #082a3e;

	/* アクセント */
	--c-accent-green: #2e7a46;
	--c-mint-link: #8fcba0;

	/* 背景 */
	--c-sage-tint: #eaf4ec;
	--c-navy-tint: #eef1f4;
	--c-base: #ffffff;

	/* テキスト */
	--c-text: #16232a;
	--c-text-sub: #55636a;
	--c-text-on-dark: #f4f8f5;
	--c-text-sub-on-dark: #c3d3ca;

	/* ボーダー */
	--c-border: #dce3e0;

	/* タイポグラフィ */
	--font-serif: "Shippori Mincho", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
	--font-sans: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;

	/* レイアウト */
	--container-width: 1160px;
	--container-narrow-width: 820px;
	--radius-s: 4px;
	--radius-m: 10px;
	--header-height: 84px;
}

/* ========== 2. リセット・基本要素 ========== */
* ,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* 2026-08-06 文字サイズ全体引き上げ対応。
	   rem基準（1rem=16px）を112.5%（18px）に引き上げ、既存のrem指定（見出し・本文・キャプション・ボタン等）を
	   比率を保ったまま一律スケールアップする。em単位のpadding/gapもフォントサイズに追従して拡大するため、
	   ボタン・バッジ等の内側余白比率も崩れない。 */
	font-size: 112.5%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--c-text);
	background: var(--c-base);
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--c-accent-green);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	color: var(--c-text);
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--c-brand-navy);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 1000;
}

.skip-link:focus {
	top: 0;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.container--narrow {
	max-width: var(--container-narrow-width);
}

.u-text-center {
	text-align: center;
}

.u-pc-only {
	display: inline;
}

.u-sp-only {
	display: none;
}

/* ========== 3. 共通ボタン ========== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.75em;
	border-radius: var(--radius-s);
	font-weight: 700;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	text-decoration: none;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.btn--primary {
	background: var(--c-brand-green);
	color: #fff;
	box-shadow: 0 4px 12px rgba(39, 101, 52, 0.25);
}

.btn--primary:hover {
	background: var(--c-accent-green);
	color: #fff;
}

.btn--outline {
	background: transparent;
	border-color: var(--c-brand-green);
	color: var(--c-brand-green);
}

.btn--outline:hover {
	background: var(--c-sage-tint);
	color: var(--c-brand-green);
}

.btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.btn--line {
	background: #06c755;
	color: #fff;
}

.btn--line:hover {
	background: #05a848;
	color: #fff;
}

.btn--lg {
	padding: 1.05em 2em;
	font-size: 1rem;
}

/* ========== 4. ヘッダー ========== */
/* 2026-08-08 追加: トップページ限定でスクロール連動の背景フェード演出を追加する
   （.page-home配下の上書きルール参照、main.js側でスクロール量に応じて.is-scrolledを付け外しする）。
   下層ページ（page-header使用、ヒーロー写真なし）は可読性を優先し、常時同じ背景色のまま
   変更しない。transitionは全ページ共通で付与しているが、下層ページは背景色自体が変化しない
   ため実質的に無効（副作用なし）。 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--c-sage-tint);
	border-bottom: 1px solid var(--c-border);
	transition: background-color 0.35s ease, border-bottom-color 0.35s ease;
}

/* トップページのみ、ページ最上部では背景を透明にし、ヘッダーがヒーロー写真の上に重なって
   表示されるようにする（下の .page-home .hero--front 参照、ヘッダー高さ分ヒーロー写真を
   引き上げて重畳させている）。スクロールするとmain.jsが付与する.is-scrolledクラスにより
   元の背景色へフェードインする。ロゴは.site-header__logo自体が不透明なネイビーブロックのため
   影響を受けない。 */
.page-home .site-header {
	background-color: transparent;
	border-bottom-color: transparent;
}

.page-home .site-header.is-scrolled {
	background-color: var(--c-sage-tint);
	border-bottom-color: var(--c-border);
}

/* 透明時、ヒーロー写真（人物写真、明暗が読みにくい場合がある）の上でもナビ・電話番号の文字が
   判別できるよう、白い縁取り（text-shadow）で可読性を補助する。スクロール後（.is-scrolledで
   背景色が付いた状態）は不要なため、:not(.is-scrolled)の間のみ適用する。 */
.page-home .site-header:not(.is-scrolled) .site-nav__list a,
.page-home .site-header:not(.is-scrolled) .site-header__tel-icon,
.page-home .site-header:not(.is-scrolled) .site-header__tel-number {
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.55);
}

/* 2026-08-07 修正: ヘッダー内側（.site-header__inner）を.container（max-width:1160px centered）に
   閉じ込めず、ブラウザ全幅のflexバーに変更した。.containerと同じ左右24pxの余白は
   このルール自体に持たせ、見た目のガター幅は従来と変えていない。
   2026-08-08 修正: 「無料相談はこちら」ボタンがブラウザ右端に張り付きすぎて見えるとの
   指摘のため、.container（1160px）より広い1300pxを上限としたmax-width+margin:0 autoを
   付与していたが、「ヘッダーメニューは左右いっぱいまで使用してほしい」との指摘を受け、
   このmax-width制約を撤廃する。幅広画面でもロゴ〜アクション群がブラウザ全幅まで
   広がる構成に戻し、左右の余白は従来どおりpadding:0 24pxのみで確保する。 */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--header-height);
	padding: 0 24px;
}

/* 2026-08-07 修正: justify-content:space-betweenでロゴ／ナビ／アクション（電話・CTA）の
   3グループを両端いっぱいに引き離していたため、広幅ビューポート（1440px以上等）でナビと
   アクション群の間に不自然な空白ができ、「無料相談はこちら」ボタンだけが右端に孤立して
   見える状態になっていた（実機ヘッドレスChrome確認で判明）。
   ロゴにmargin-right:autoを付与して左側の余剰スペースをロゴ側に吸収させることで、
   ナビとアクション群を隣接したひとまとまりとしてブラウザ右端に寄せる（ナビ右寄せの指摘とも
   合わせて解消）。align-items:centerによる垂直中央は影響を受けない。
   2026-08-08 修正（意図が伝わっていないとの指摘を受けた再修正）: 忠実再現.pdf参考テーマの
   ヘッダーはロゴが単色ブロックとしてヘッダーの高さより少し高く、下に張り出す形で独立して
   配置されている。これに合わせ、ロゴを var(--c-brand-navy) の矩形ブロックにする
   （グリーンは右側「無料相談はこちら」CTAボタンと重複するため、既存ブランドカラーのうち
   ネイビーを採用）。高さは var(--header-height) より20px大きくし、
   align-self:flex-start + margin-bottom:-20px でヘッダー下端から20px分だけ下に張り出させる
   （flexの外形サイズ計算では相殺されるため、.site-header__innerのmin-height=var(--header-height)
   自体は変わらない）。.site-headerや祖先要素にoverflow:hiddenは設定されていないため、
   張り出し部分は直下のヒーロー写真の上に自然に重なって見える。
   2026-08-08 追加修正: 「拡大後もまだ参考画像（demo.tcd-theme.com/tcd123）と比べて小さい」との
   指摘を受け再拡大。参考画像を実測すると、ロゴブロックの高さはヘッダー本体（ナビ行）の高さの
   約1.4倍、張り出し量（ブロック高さ−ヘッダー高さ）はヘッダー高さの約0.4倍に達する。
   この比率を採用し、張り出し量を24px→40pxに拡大（--header-height:84pxに対し40/84≒0.48で
   参考画像相当）。ブロック高さは 84+40=124px となり、ヘッダー本体（84px）の約1.48倍になる。
   2026-08-08 追加修正: 「まだロゴが小さい。今の左右と下部分を1.5倍大きくしてほしい」との
   指摘を受け、ブロックの左右方向（padding）と下方向の張り出し量（overhang）をそれぞれ
   実測値の1.5倍に拡大する。padding: 28px→42px、張り出し量: 40px→60px（height側も
   同量+60pxに追随）。
   2026-08-08 追加修正（本番スクリーンショットでロゴ上下欠け発覚）: 上記の1.5倍拡大の際、
   ブロック高さ側の倍率（overhang 40px→60px、ブロック高さ 124px→144px）と、ロゴ画像側の
   倍率（.site-header__logo img参照、104px→156px）を別々に計算した結果、ブロック高さ
   144pxよりロゴ画像156pxの方が大きくなり、ロゴ画像がブロック上下から計12px（片側6px）
   はみ出して見える状態になっていた（画面幅1321px以上のPC表示のみ発生。1320px以下は
   モバイル側の別指定のため無関係）。ロゴ画像自体のheight指定は変更しない方針のため、
   ブロック側の高さを再計算する。ロゴ画像の実高さ156pxに対し上下余白5px×2=10pxを
   確保する最小高さは166pxのため、overhangを60px→82px（ブロック高さ 84+82=166px）に
   拡大する。高さの拡大比率は 166px/144px ≒ 1.153倍のため、左右paddingも同じ比率で
   42px→48px（42×1.153≒48.4pxを整数丸め）に拡大し、拡大比率をそろえる。
   2026-08-08 追加修正（上下均等5px/5pxから非対称10px/20pxへの指摘）: 従来はalign-items:centerの
   自動配分により上下余白が5px/5pxの均等になっていたが、「上部分の余白を10px、下部分の余白を
   20pxにしてほしい」との指摘を受け、padding-top/padding-bottomを個別指定する形に変更する。
   ロゴ画像の実高さ156pxは変更せず、156+10+20=186pxをコンテンツ領域（border-boxのため
   ブロック高さそのもの）とする。overhangは 186-84(--header-height)=102px（82px→102px）に、
   margin-bottomも同量の-102pxに拡大する。左右paddingは今回の指摘対象外のため48pxのまま
   変更しない。align-items:centerは、padding指定後は上下に余剰スペースが生まれないため実質
   無効化されるが、他プロパティとの整合のため残している。 */
.site-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-right: auto;
	height: calc(var(--header-height) + 102px);
	margin-bottom: -102px;
	padding: 10px 48px 20px;
	background: var(--c-brand-navy);
	border-radius: 0 0 var(--radius-m) var(--radius-m);
	/* 2026-08-08 追加修正: 張り出し量の拡大（24px→40px）により、業務案内メガメニュー
	   （.nav-mega、top:var(--header-height)から開く、z-index:600）を開いた際、
	   ロゴブロックの張り出し部分（ヘッダー本体より下の40px）に白いメガメニューパネルが
	   かぶさって見えることをヘッドレスChromeで確認したため、ロゴブロックにposition:relativeと
	   nav-megaより高いz-index(650)を与え、開いたメガメニューより手前に表示されるようにする
	   （.site-headerがposition:sticky+z-index:500でスタッキングコンテキストを形成しているため、
	   この値はヘッダー内のローカルな重なり順としてのみ機能し、他セクションのz-indexとは干渉しない）。 */
	position: relative;
	z-index: 650;
}

/* 2026-08-08 修正: 「ヘッダーロゴが小さい」との指摘を受け、ロゴをlogo-horizontal.svgから
   当初のロゴ（logo.svg、viewBox比 約1.08:1）に戻し、サイズを明確に拡大した（34px→64px）。
   ブロックの張り出し量（margin-bottom）もロゴ拡大に合わせて20px→24pxに調整し、
   ブロック内の余白バランスを保っている。
   ロゴSVG自体は横組み版と同じく緑（#276534）とネイビー（#082a3e）が混在した配色で、
   「北山」の大きな筆文字パーツがネイビー単色（cls-11: #082a3e）のため、無地のネイビー
   ブロックにそのまま載せると背景と同化して判読できなくなる。そのため引き続きCSS filter
   （brightness(0) invert(1)）でロゴを白いシルエットとして表示する（ヘッドレスChromeで
   filterなし／ありの両方を確認し、filterなしでは筆文字部分が消えることを確認済み）。
   ロゴ本体のファイル・配色は変更していない。
   2026-08-08 追加修正: ブロック拡大（.site-header__logo参照）に合わせ、ロゴ画像自体の高さも
   64px→104pxへ拡大（参考画像同様「ヘッダー内で堂々とした存在感のあるサイズ」の目安、
   100〜120pxの範囲内）。ブロック上下のpadding（(124-104)/2=10px相当）は
   align-items:centerによる自動配分のため個別指定は不要。
   2026-08-08 追加修正: ブロック（左右padding・張り出し量）の1.5倍拡大に合わせ、
   ロゴ画像自体の高さも104px→156px（104×1.5）へ拡大し、ブロックとのバランスを保つ。 */
.site-header__logo img {
	height: 156px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* 2026-08-07 修正: メニュー項目間が詰まって窮屈に見えるため、gap・paddingを広げてゆとりを持たせる。
   1180px以下はハンバーガーメニューに切り替わるため（下部レスポンシブセクション参照、
   2026-08-08修正でブレークポイントは1320pxに変更済み）、PC表示（>1320px）の見た目調整が主目的。
   2026-08-07 追記: ヘッダーメニューから「ホーム」「建設業許可」「相続」「在留資格」を削除し
   （業務案内メガメニューと重複のため）4項目構成になったこと、および.site-header__innerを
   ブラウザ全幅化したことに伴い、幅の余裕は従来より大きくなっている。
   2026-08-08 修正（意図が伝わっていないとの指摘を受けた再修正）: 忠実再現.pdf参考テーマは
   メニュー項目間にゆったりした余白を取って右寄せしている。項目数が4つのみで幅に十分余裕が
   あることを踏まえ、gapを大きく広げ、リンク自体の左右paddingも増やして「ゆったりした間隔」の
   印象に近づける（PC表示のみ。1320px以下のハンバーガーメニュー内は下部レスポンシブ側の
   別指定でgap:4px・縦積みのまま変更していない）。 */
.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
}

.site-nav__list a {
	display: inline-block;
	padding: 0.55em 0.6em;
	color: var(--c-text);
	font-weight: 500;
	font-size: 0.92rem;
	border-radius: var(--radius-s);
}

.site-nav__list a:hover {
	background: rgba(39, 101, 52, 0.08);
	color: var(--c-brand-green);
	text-decoration: none;
}

/* 2026-08-07 修正: ロゴのmargin-right:autoでナビとアクション群（電話・CTA）が隣接する
   ひとまとまりになったため、.site-header__inner側のgap（16px）だけでは境目が詰まって見える。
   アクション群側にmargin-leftでゆとりを持たせ、ナビ最終項目とのあいだに視覚的な区切りを作る。 */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 20px;
}

/* 2026-08-07 修正: メニュー項目間のゆとりを確保するために振り分けた分、
   container-width（1160px）ぴったりでも8項目+ロゴ+電話+CTAが1行に収まるよう
   CTAボタンの左右paddingのみヘッダー内で控えめにする（文言・配色・フォントサイズは.btnのまま）。
   ボタン自体の水平位置（ブラウザ右端）・垂直位置（ヘッダー高さに対して中央）は、
   .site-header__logoのmargin-right:autoによりナビ・アクション群がひとまとまりで
   ブラウザ右端に寄る結果として実現している（align-items:centerで垂直中央）。 */
.site-header__cta {
	padding-left: 1.1em;
	padding-right: 1.1em;
}

.site-header__tel {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 6px;
	color: var(--c-brand-navy);
}

.site-header__tel:hover {
	text-decoration: none;
}

.site-header__tel-icon {
	font-size: 1.3rem;
}

.site-header__tel-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.site-header__tel-number {
	/* 2026-08-07 修正: 電話番号が目立たないとの指摘のため、font-sizeを引き上げ、
	   色を.site-header__tel（ネイビー）の継承から、ブランドカラーの濃い緑（--c-brand-green）に
	   変更する。ヘッダー高さ（--header-height）にはalign-items:centerで収まるよう十分な
	   余裕があるため、拡大しても崩れない。
	   2026-08-08 修正: 「お電話でのご相談」ラベル（.site-header__tel-label）を削除し
	   電話番号のみの表示にしたため、当該ルールを削除。あわせて「もう少し大きく」との
	   追加指摘によりfont-sizeを1.35rem→1.5remに再度引き上げる。 */
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-brand-green);
	/* 2026-08-07 修正: 実機で「072-947-/9280」のように電話番号がハイフン位置で
	   折り返されていたため、1行で収まるようnowrapを付与する。 */
	white-space: nowrap;
}

.site-header__menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
}

.site-header__menu-bar {
	display: block;
	height: 2px;
	background: var(--c-brand-navy);
	margin: 0 8px;
}

/* ========== 4-1. ヘッダー：業務案内メガメニュー ========== */
/* 2026-08-07 追加: 忠実再現.pdf（市販テーマ「Value」ヘッダーメニュー「サービス」の挙動）を参考に、
   「業務案内」をマウスオン（PC）/タップ（SP）で開くメガメニューにする。
   開閉トリガーは以下2系統を用意し、環境を問わず同じ.is-openクラス相当の見た目に揃える。
   1) PC: :hover / :focus-within によるCSSのみの自動開閉（マウス操作・Tabキー移動の両対応）
   2) PC/SP共通: .nav-mega__toggle（明示的なトグルボタン、小さな山形アイコン）の
      クリック・タップ・Enter/Spaceキー操作。PCでは1)を補う明示的な開閉手段、
      SP（1320px以下）では:hover/:focus-within開閉を無効化するため唯一の開閉手段となる
      （タッチ環境でのフォーカストラップ防止。詳細は下部レスポンシブ参照） */
.site-nav__item {
	position: relative;
}

.site-nav__item-link {
	display: inline-flex;
	align-items: center;
}

.nav-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 2px;
	padding: 0;
	vertical-align: middle;
	background: transparent;
	border: none;
	color: var(--c-text-sub);
	cursor: pointer;
}

.nav-mega__toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.site-nav__item--has-mega:hover .nav-mega__toggle svg,
.site-nav__item--has-mega:focus-within .nav-mega__toggle svg,
.site-nav__item--has-mega.is-open .nav-mega__toggle svg {
	transform: rotate(180deg);
}

.nav-mega__toggle:focus-visible {
	outline: 2px solid var(--c-accent-green);
	outline-offset: 1px;
}

/* 2026-08-07 修正: position:absoluteだと「業務案内」<li>自体の水平位置を基準にleft:50%が計算され、
   ヘッダー左寄りの項目位置のままパネルが画面外へはみ出していた（実機ヘッドレスChrome確認で判明）。
   position:fixedにしてビューポート中央を基準に据え、ヘッダー直下に常に正しく中央寄せ表示されるようにする。 */
.nav-mega {
	position: fixed;
	top: var(--header-height);
	left: 50%;
	width: min(1160px, calc(100vw - 32px));
	transform: translate(-50%, -8px);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	box-shadow: 0 16px 40px rgba(8, 42, 62, 0.14);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 600;
}

.site-nav__item--has-mega:hover .nav-mega,
.site-nav__item--has-mega:focus-within .nav-mega,
.site-nav__item--has-mega.is-open .nav-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav-mega__inner {
	padding: 28px;
}

.nav-mega__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* 2026-08-07 補足: .site-nav__list a（基本のナビリンクスタイル、および1180px以下でのモバイル用a指定）は
   型セレクタを含み.nav-mega__link単体より詳細度が高く上書きされてしまうため、
   「.nav-mega .nav-mega__link」の2クラス構成で詳細度を確保している。 */
.nav-mega .nav-mega__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	color: var(--c-text);
}

.nav-mega .nav-mega__link:hover {
	text-decoration: none;
	border-color: var(--c-accent-green);
	background: var(--c-sage-tint);
}

.nav-mega .nav-mega__link:focus-visible {
	outline: 2px solid var(--c-accent-green);
	outline-offset: 1px;
}

.nav-mega__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-s);
	color: var(--c-brand-green);
	margin-bottom: 14px;
}

.nav-mega__thumb svg {
	width: 32px;
	height: 32px;
}

/* 差し替え予定: assets/img/service-<slug>.jpg（services__zigzag-media--<slug>と同じ写真を想定）。
   画像未生成のためブランドカラーのグラデーションでプレースホルダー表示している。 */
.nav-mega__thumb--construction-license {
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, #ffffff 100%);
}

.nav-mega__thumb--kojo-shinsa {
	background: linear-gradient(135deg, rgba(39, 101, 52, 0.22) 0%, rgba(39, 101, 52, 0.05) 100%);
}

.nav-mega__thumb--nyusatsu {
	background: linear-gradient(135deg, var(--c-navy-tint) 0%, #ffffff 100%);
}

.nav-mega__thumb--sanpai {
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, var(--c-navy-tint) 100%);
}

.nav-mega__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.nav-mega__text {
	color: var(--c-text-sub);
	font-size: 0.8rem;
	line-height: 1.6;
}

/* ========== 5. セクション共通 ========== */
.section {
	padding: 88px 0;
}

.section--tint {
	background: var(--c-navy-tint);
}

.section__eyebrow {
	font-family: var(--font-serif);
	color: var(--c-accent-green);
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	margin: 0 0 0.75em;
	text-transform: uppercase;
}

.section__eyebrow--light {
	color: var(--c-mint-link);
}

.section__title {
	font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem);
	margin-bottom: 0.6em;
}

.section__lead {
	color: var(--c-text-sub);
	max-width: 640px;
	margin-bottom: 2.5em;
}

.section__more {
	margin-top: 48px;
	text-align: center;
}

.page-lead {
	color: var(--c-text-sub);
	font-size: 1.05rem;
	margin-bottom: 2em;
}

/* ========== 6. ファーストビュー（Hero） ========== */
.hero {
	background: linear-gradient(180deg, var(--c-sage-tint) 0%, #ffffff 100%);
	padding: 72px 0 96px;
}

.hero__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 56px;
	align-items: center;
}

.hero--service .hero__inner {
	grid-template-columns: 1fr;
}

.hero__eyebrow {
	font-family: var(--font-serif);
	color: var(--c-brand-green);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 0.75em;
}

.hero__title {
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
	margin-bottom: 0.6em;
}

.hero__lead {
	color: var(--c-text-sub);
	font-size: 1.05rem;
	max-width: 560px;
	margin-bottom: 2em;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero__media-frame {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-m);
	background: var(--c-navy-tint);
	border: 1px solid var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-sub);
	font-size: 0.9rem;
	text-align: center;
	padding: 24px;
}

.hero__media-frame--photo {
	padding: 0;
	background: none;
	overflow: hidden;
}

.hero__media-frame--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

/* ========== 6b. ファーストビュー（フロントページ全面刷新版・忠実再現.pdf準拠） ========== */
/* .hero--front は .hero を上書きし、フルブリード写真＋吹き出しメッセージ構成の専用レイアウトにする。
   .hero / .hero__inner 等の既存ルールは hero--service（下層ページ）向けにそのまま維持する。 */
.hero--front {
	background: none;
	padding: 0;
}

/* 2026-08-08 追加: トップページ限定のヘッダー透明演出（上の .page-home .site-header 参照）に伴い、
   ヒーロー写真をヘッダー高さ分だけ引き上げ、ヘッダーの背後（透明時はヒーロー写真の上に
   ヘッダーが重なって見える状態）に配置する。.site-header はposition:stickyのまま変更しないため、
   ヘッダー自体は引き続き自身の高さ分のスペースを通常のフロー内に確保する。ヒーローセクション側に
   同量の負のmargin-topを与えることで、ヒーローの先頭（.hero__photo）がヘッダーの背後まで
   届くようにする。ヒーロー以降のセクション（services等）の並び順・相対位置は変わらない
   （負margin-topの分、ページ全体の総高さがヘッダー高さ分短くなるだけで、他セクション間の
   間隔には影響しない）。下層ページ（page-header使用）はこのクラス自体が付与されないため無関係。 */
.page-home .hero--front {
	margin-top: calc(-1 * var(--header-height));
}

.hero__photo {
	position: relative;
	width: 100%;
	/* 2026-08-07 修正: ブラウザのビューポート高さいっぱいに表示する（ヘッダー高さ分を差し引く）。
	   極端に低いウィンドウ（横長の小型ノートPC等）でも写真が潰れすぎないよう480pxを下限として確保する。
	   img側にheight:100%（%指定）が必要なため、min-heightではなく明示的なheightで指定する。 */
	height: max(480px, calc(100vh - var(--header-height)));
	overflow: hidden;
	/* 差し替え予定の人物写真が入るまでのプレースホルダー背景（ブランドカラーの単色軸グラデーション） */
	background: linear-gradient(115deg, var(--c-navy-tint) 0%, var(--c-mint-link) 55%, var(--c-brand-navy) 100%);
}

/* 2026-08-08 追加: トップページはヒーロー自体をヘッダー高さ分引き上げている（.page-home .hero--front
   参照）ため、写真の高さもヘッダー高さを差し引かない100vh基準に変え、写真下端の位置（従来どおり
   ビューポート下端）を変えないようにする。差し引かない分、写真の可視面積はヘッダー高さぶん
   広がり、ヘッダーの背後まで写真が続くことになる。 */
.page-home .hero__photo {
	height: max(480px, 100vh);
}

.hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 画像が空/読み込み失敗した場合はブラウザ標準の破損アイコンを隠し、.hero__photoの背景グラデーション（プレースホルダー）のみを見せる */
.hero__photo img.hero__photo-img--error {
	display: none;
}

/* 2026-08-08 修正（意図が伝わっていないとの指摘への再修正）: 忠実再現.pdf参考テーマの
   吹き出しメッセージはボックス幅いっぱいに収まる見出し級の大きな文字で構成されているため、
   widthを広げてフォント拡大後も窮屈にならないようにする。配色・角丸・影は変更しない。
   2026-08-08 追記: 初回調整（340px）ではヘッドレスChrome確認で「終わりにしない。」
   「その先の一歩まで、」が意図せず2行に折り返されていたため、400pxまで再拡大した。 */
.hero__message-box {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 400px;
	max-width: calc(100% - 32px);
	padding: 24px 28px;
	background: var(--c-brand-green);
	border-radius: 12px;
	color: #fff;
	box-shadow: 0 6px 16px rgba(8, 42, 62, 0.25);
}

.hero__message-box::after {
	content: "";
	position: absolute;
	right: 28px;
	bottom: -8px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--c-brand-green);
}

/* 2026-08-08 修正（意図が伝わっていないとの指摘への再修正）: 従来はキャッチコピー的な
   小さめサイズ（0.95rem）だったが、忠実再現.pdf参考テーマは見出し級の大きく太いフォントで
   ボックス幅いっぱいに文字を見せている。文言・配色は変更せず、フォントサイズ・太さ・行間のみ
   拡大する（hero.php側で句読点ごとに改行し4行構成にしたため、行間は詰め気味の1.35にする）。 */
.hero__message-box p {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.85rem);
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.hero__profile-card {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 220px;
	max-width: calc(100% - 32px);
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 8px;
}

.hero__profile-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-sage-tint);
	flex-shrink: 0;
}

.hero__profile-text {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--c-text);
}

.hero__profile-text strong {
	display: block;
	font-size: 0.95rem;
}

.hero__headline {
	background: var(--c-base);
	padding: 64px 0 48px;
}

.hero__headline-title {
	font-family: var(--font-serif);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
	font-weight: 600;
	line-height: 1.6;
	/* 2026-08-07 修正: 従来のmax-width:720pxは、文字サイズ全体引き上げ（html { font-size:112.5% }）後の
	   見出し文（各文23〜24文字＋<br>区切り）を1行に収めるには狭すぎ、意図しない位置で折り返していた。
	   コンテナ幅（.containerの実効幅、最大1112px）を上限にそのまま活用し、各文が1行で収まるようにする。 */
	max-width: 100%;
	color: var(--c-text);
}

.hero__headline-sub {
	margin: 20px 0 0;
	max-width: 720px;
	color: var(--c-text-sub);
	font-size: 0.95rem;
	line-height: 1.9;
}

.hero__cta-bar {
	background: var(--c-sage-tint);
}

.hero__cta-bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 20px 24px;
}

/* ========== 6c. 3つの対応領域ストリップ（新設・hero直下） ========== */
.features-strip {
	background: var(--c-base);
	padding: 56px 0;
	border-bottom: 1px solid var(--c-border);
}

.features-strip__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.features-strip__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--c-sage-tint);
	color: var(--c-brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
}

.features-strip__icon svg {
	width: 32px;
	height: 32px;
}

.features-strip__title {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.4em;
	color: var(--c-text);
	text-align: center;
}

.features-strip__text {
	color: var(--c-text-sub);
	font-size: 0.9rem;
	margin: 0;
	text-align: left;
}

/* ========== 6d. こんなお悩みありませんか（新設・hero直後、reasons直前） ========== */
.pain-points {
	background: var(--c-navy-tint);
}

/* 2026-08-07 修正: 5項目を横一列に詰めるとカードが狭くなり見出し・本文が窮屈に折り返されるため、
   PCは3カラム×2段（1段目3項目・2段目2項目）に変更し、カード自体の横幅にゆとりを持たせる。
   flex-wrap + flex-basisで実装し、5個目までしか埋まらない2段目はjustify-content:centerで中央寄せにする。 */
.pain-points__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-bottom: 2.5em;
}

.pain-points__item {
	flex: 0 1 calc((100% - 24px * 2) / 3);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	padding: 28px 24px;
}

.pain-points__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-sage-tint);
	color: var(--c-brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.pain-points__icon svg {
	width: 18px;
	height: 18px;
}

.pain-points__item-title {
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 0.5em;
}

.pain-points__item-text {
	color: var(--c-text-sub);
	font-size: 0.92rem;
	margin: 0;
}

.pain-points__bridge {
	text-align: center;
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--c-brand-green);
	margin: 0;
}

/* ========== 7. 選ばれる理由 ========== */
.reasons__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-border);
}

.reasons__item {
	display: flex;
	align-items: baseline;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--c-border);
}

.reasons__number {
	font-family: var(--font-serif);
	font-size: 2.4rem;
	color: var(--c-accent-green);
	line-height: 1;
	flex-shrink: 0;
	width: 72px;
}

.reasons__title {
	font-size: 1.15rem;
	margin-bottom: 0.35em;
}

.reasons__text {
	color: var(--c-text-sub);
	margin: 0;
}

/* ========== 8. 業務案内 ========== */
/* 2026-08-06 デザイン全面刷新版。忠実再現.pdf④「画像とテキストが左右交互に並ぶブロック」を
   主要4カテゴリ（建設業許可／経審／入札参加資格申請／産廃）にジグザグレイアウトとして適用し、
   残り4カテゴリ（宅建業／運送業／相続・遺言／在留資格・帰化）はアイコン＋タイトルのみの軽量カードグリッドとする。 */
.services__primary {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-bottom: 72px;
}

.services__zigzag {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.services__zigzag--reverse .services__zigzag-media {
	order: 2;
}

.services__zigzag--reverse .services__zigzag-content {
	order: 1;
}

.services__zigzag-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-m);
	border: 1px solid var(--c-border);
}

/* 差し替え予定: assets/img/service-<slug>.jpg（実写風クローズアップ写真）。
   画像未生成のためブランドカラーの単色軸グラデーションでプレースホルダー表示している。 */
.services__zigzag-media--construction-license {
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, #ffffff 100%);
}

.services__zigzag-media--kojo-shinsa {
	background: linear-gradient(135deg, rgba(39, 101, 52, 0.22) 0%, rgba(39, 101, 52, 0.05) 100%);
}

.services__zigzag-media--nyusatsu {
	background: linear-gradient(135deg, var(--c-navy-tint) 0%, #ffffff 100%);
}

.services__zigzag-media--sanpai {
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, var(--c-navy-tint) 100%);
}

.services__zigzag-badge {
	display: inline-block;
	background: var(--c-accent-green);
	color: #fff;
	font-size: 0.72rem;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	margin-bottom: 1em;
}

.services__zigzag-title {
	font-size: 1.3rem;
	margin-bottom: 0.6em;
}

.services__zigzag-text {
	color: var(--c-text-sub);
	margin-bottom: 1.4em;
}

.services__link {
	color: var(--c-accent-green);
	font-weight: 700;
	font-size: 0.9rem;
}

.services__secondary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.services__light-card a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	padding: 28px 20px;
	height: 100%;
}

.services__light-card a:hover {
	text-decoration: none;
	border-color: var(--c-accent-green);
	background: var(--c-sage-tint);
}

.services__light-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	color: var(--c-brand-green);
}

.services__light-icon svg {
	width: 100%;
	height: 100%;
}

.services__light-title {
	font-size: 0.95rem;
	margin: 0;
}

/* ========== 9. 建設業者様向けサポート（最重要ブロック） ========== */
.construction-support {
	background: var(--c-brand-navy);
	color: var(--c-text-on-dark);
	position: relative;
	overflow: hidden;
}

.construction-support::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(143, 203, 160, 0.18), transparent 55%);
	pointer-events: none;
}

.construction-support__inner {
	position: relative;
}

.construction-support__text {
	max-width: 680px;
}

.construction-support__title {
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
	color: #fff;
	margin-bottom: 0.55em;
}

.construction-support__lead {
	color: var(--c-text-sub-on-dark);
	font-size: 1.05rem;
	margin-bottom: 1.75em;
}

.construction-support__list {
	display: grid;
	/* 2026-08-07 修正: 3カラム(auto)は、親要素.construction-support__text（max-width:680px）の中で
	   長い項目「建設業許可（新規・更新・業種追加）」を収めるには列幅が足りず、文字サイズ引き上げ後は
	   不自然な位置で折り返していた。2カラムに変更し、各列が項目テキストの幅を確保できるようにする。 */
	grid-template-columns: repeat(2, auto);
	gap: 12px 32px;
	margin-bottom: 2.5em;
}

.construction-support__list li {
	position: relative;
	padding-left: 1.4em;
	color: #fff;
	font-weight: 500;
}

.construction-support__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--c-mint-link);
	border-radius: 50%;
}

.construction-support__note {
	color: var(--c-text-sub-on-dark);
	font-size: 0.95rem;
	line-height: 1.9;
	margin-bottom: 1.75em;
}

/* ========== 10. ご依頼の流れ ========== */
.flow__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
}

.flow__item {
	border-top: 3px solid var(--c-accent-green);
	padding-top: 18px;
}

.flow__step {
	font-family: var(--font-serif);
	color: var(--c-accent-green);
	font-size: 1.3rem;
	display: block;
	margin-bottom: 0.3em;
}

.flow__title {
	font-size: 1.02rem;
	margin-bottom: 0.4em;
}

.flow__text {
	color: var(--c-text-sub);
	font-size: 0.9rem;
	margin: 0;
}

/* ========== 11. よくある質問（アコーディオン） ========== */
.faq__list {
	border-top: 1px solid var(--c-border);
}

.faq__row {
	border-bottom: 1px solid var(--c-border);
}

.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	background: transparent;
	border: none;
	padding: 22px 4px;
	text-align: left;
	font-size: 1rem;
	color: var(--c-text);
}

.faq__q-mark {
	font-family: var(--font-serif);
	color: var(--c-brand-green);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.faq__q-text {
	flex: 1;
	font-weight: 500;
}

.faq__toggle-icon {
	position: relative;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.faq__toggle-icon::before,
.faq__toggle-icon::after {
	content: "";
	position: absolute;
	background: var(--c-brand-green);
	transition: transform 0.2s ease;
}

.faq__toggle-icon::before {
	top: 7px;
	left: 0;
	width: 16px;
	height: 2px;
}

.faq__toggle-icon::after {
	top: 0;
	left: 7px;
	width: 2px;
	height: 16px;
}

.faq__question[aria-expanded="true"] .faq__toggle-icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq__answer {
	display: flex;
	gap: 16px;
	padding: 0 4px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, padding 0.25s ease;
}

.faq__row.is-open .faq__answer {
	/* 文字サイズ引き上げに伴い、回答文が長い項目でも切れないよう上限値に余裕を持たせる */
	max-height: 600px;
	padding: 0 4px 22px;
}

.faq__a-mark {
	font-family: var(--font-serif);
	color: var(--c-accent-green);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.faq__answer p {
	margin: 0;
	color: var(--c-text-sub);
}

/* ========== 12. 代表紹介 ========== */
.profile__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: center;
}

.profile--page .profile__inner {
	align-items: start;
}

.profile__media-frame {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-m);
	background: var(--c-sage-tint);
	border: 1px solid var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-sub);
	font-size: 0.9rem;
	text-align: center;
	padding: 24px;
}

.profile__media-frame--photo {
	padding: 0;
	overflow: hidden;
	/* 差し替え予定の代表ポートレート（AI・ストックフォト調）が入るまでのプレースホルダー背景（ブランドカラーの単色軸グラデーション） */
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, var(--c-navy-tint) 100%);
}

.profile__media-frame--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.profile__name {
	font-size: 1.8rem;
	margin-bottom: 0.2em;
}

.profile__role {
	color: var(--c-accent-green);
	font-weight: 700;
	margin-bottom: 1.2em;
}

.profile__message {
	color: var(--c-text-sub);
	margin-bottom: 1.2em;
}

.profile__details {
	margin: 0 0 2em;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.profile__details > div {
	display: flex;
	gap: 16px;
	border-top: 1px solid var(--c-border);
	padding-top: 12px;
}

.profile__details dt {
	width: 120px;
	flex-shrink: 0;
	font-weight: 700;
	color: var(--c-brand-navy);
}

.profile__details dd {
	margin: 0;
	color: var(--c-text-sub);
}

/* ========== 13. お客様の声 ========== */
/* 2026-08-06 デザイン全面刷新版。忠実再現.pdf⑥のカード構図（3枚横並び・角丸・影なし1pxボーダー）を踏襲。
   顔写真の代わりにカテゴリピクトグラムを表示し、架空評価となる星評価は掲載しない。 */
.voice__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.voice__item {
	margin: 0;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	padding: 28px;
}

.voice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1em;
	border-radius: 50%;
	background: var(--c-sage-tint);
	color: var(--c-brand-green);
}

.voice__icon svg {
	width: 28px;
	height: 28px;
}

.voice__category {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--c-brand-green);
	background: var(--c-sage-tint);
	border-radius: 999px;
	padding: 0.3em 0.9em;
	margin-bottom: 1em;
}

.voice__text {
	color: var(--c-text);
	margin-bottom: 1.2em;
}

.voice__text--pending {
	color: var(--c-text-sub);
	font-style: italic;
	margin-bottom: 0;
}

.voice__name {
	font-style: normal;
	color: var(--c-text-sub);
	font-size: 0.85rem;
}

/* ========== 13b. 対応エリア直前の写真帯セパレーター（新設） ========== */
/* 忠実再現.pdf⑧「下部の写真帯（3枚横並び）」の手法を踏襲した視覚的なセパレーター。
   差し替え予定: assets/img/area-office-exterior.jpg / area-meeting-scene.jpg / area-document-work.jpg
   画像未生成のためブランドカラーの単色軸グラデーションでプレースホルダー表示している。 */
.area-photo-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.area-photo-strip__item {
	aspect-ratio: 4 / 3;
}

.area-photo-strip__item--office-exterior {
	background: linear-gradient(135deg, var(--c-navy-tint) 0%, var(--c-sage-tint) 100%);
}

.area-photo-strip__item--meeting-scene {
	background: linear-gradient(135deg, rgba(39, 101, 52, 0.2) 0%, rgba(8, 42, 62, 0.08) 100%);
}

.area-photo-strip__item--document-work {
	background: linear-gradient(135deg, var(--c-sage-tint) 0%, var(--c-navy-tint) 100%);
}

/* ========== 14. 対応エリア ========== */
.area {
	background: var(--c-navy-tint);
}

.area__title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
	margin-bottom: 1em;
	text-align: center;
}

.area__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.area__list li {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 0.6em 1.5em;
	font-weight: 500;
}

.area__note {
	margin: 1.75em auto 0;
	max-width: 480px;
	color: var(--c-text-sub);
	font-size: 0.9rem;
	text-align: left;
}

/* ========== 15. 新着情報 ========== */
.news__list {
	border-top: 1px solid var(--c-border);
}

.news__item a {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--c-border);
	color: var(--c-text);
}

.news__item a:hover {
	text-decoration: none;
	background: var(--c-sage-tint);
}

.news__date {
	color: var(--c-text-sub);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.news__category {
	flex-shrink: 0;
	background: var(--c-accent-green);
	color: #fff;
	font-size: 0.72rem;
	padding: 0.25em 0.8em;
	border-radius: 999px;
}

.news__title {
	flex: 1;
}

.news__empty {
	color: var(--c-text-sub);
}

/* ========== 15b. フッター直前のCTA帯（新設・contact直前） ========== */
.cta-band {
	background: var(--c-brand-navy);
	color: var(--c-text-on-dark);
	text-align: center;
	padding: 72px 0;
}

.cta-band__title {
	color: #fff;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	margin-bottom: 0.5em;
}

.cta-band__lead {
	color: var(--c-text-sub-on-dark);
	max-width: 640px;
	margin: 0 auto 2em;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ========== 16. お問い合わせ ========== */
.contact {
	background: var(--c-brand-navy);
	color: var(--c-text-on-dark);
}

.contact--page {
	padding-top: 88px;
}

.contact__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
}

.contact__title {
	color: #fff;
	font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem);
	margin-bottom: 0.6em;
}

.contact__lead {
	color: var(--c-text-sub-on-dark);
	margin-bottom: 2em;
}

.contact__detail {
	margin: 0 0 2em;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.contact__detail dt {
	font-size: 0.8rem;
	color: var(--c-mint-link);
	margin-bottom: 0.2em;
}

.contact__detail dd {
	margin: 0;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 700;
}

.contact__detail a {
	color: #fff;
}

.contact-form {
	background: #fff;
	border-radius: var(--radius-m);
	padding: 36px;
	color: var(--c-text);
}

.contact-form__row {
	margin-bottom: 20px;
}

.contact-form__row label {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 0.5em;
}

.contact-form__required {
	color: #b3413a;
	font-size: 0.7rem;
	font-weight: 700;
	margin-left: 0.5em;
	border: 1px solid #b3413a;
	border-radius: 4px;
	padding: 0.1em 0.5em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
	font-family: inherit;
	font-size: 1rem;
	color: var(--c-text);
	background: #fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--c-accent-green);
	outline-offset: 1px;
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__note {
	font-size: 0.8rem;
	color: var(--c-text-sub);
	margin-bottom: 1.5em;
}

.contact-form__submit {
	width: 100%;
	justify-content: center;
}

.contact-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.contact-form__result {
	margin: 16px 0 0;
	font-weight: 700;
}

.contact-form__result.is-success {
	color: var(--c-brand-green);
}

.contact-form__result.is-error {
	color: #b3413a;
}

/* ========== 17. フッター ========== */
.site-footer {
	background: var(--c-brand-navy);
	color: var(--c-text-sub-on-dark);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1.3fr auto;
	gap: 40px;
	padding: 64px 0 40px;
	align-items: start;
}

/* 2026-08-08 修正: 「フッターロゴの背景色をフッター部分と合わせてほしい」との指摘を受け、
   白背景チップ（background:#fff）を廃止し、フッター本来の背景（.site-footer側の
   var(--c-brand-navy)）にロゴを直接配置する形に変更。padding・border-radiusもチップ用の
   ものは不要になったため削除し、margin-bottomのみ残して次要素との間隔を維持している。
   クラス名は「チップ」実体がなくなったことに合わせ site-footer__logo-chip → site-footer__logo
   に変更（footer.php側のクラスも合わせて変更済み）。 */
.site-footer__logo {
	display: inline-flex;
	margin-bottom: 16px;
}

/* 2026-08-08 修正: フッターロゴをlogo.svgから横組み版logo-horizontal.svg（viewBox比 約3.6:1）に
   変更。チップ背景が白のため、ロゴ内の白い意匠（花押/落款モチーフ）も緑・ネイビーの輪郭線で
   縁取りされており判読できる（ヘッダーのような単色ベタ背景ではないためCSS filterは不要と
   ヘッドレスChromeで確認済み）。height基準は変更せず、横幅はSVGの実比率に応じてautoで広がる。
   2026-08-08 追加修正: 白チップを廃止しフッター背景（ネイビー）に直接配置したことに伴い、
   ロゴSVG内のネイビー塗り部分（cls: #082a3e、ヘッダーロゴと同じ「北山」筆文字パーツ）が
   背景と同化して判読できなくなるため、ヘッダーロゴと同じCSS filter（brightness(0) invert(1)）
   を適用し、ロゴ全体を白いシルエットとして表示する（緑・輪郭線部分も含め視認性を確保）。 */
.site-footer__logo img {
	height: 56px;
	width: auto;
	filter: brightness(0) invert(1);
}

.site-footer__office-name {
	color: #fff;
	font-weight: 700;
	margin-bottom: 0.3em;
}

.site-footer__tagline {
	font-size: 0.85rem;
	color: var(--c-text-sub-on-dark);
	margin-bottom: 0.9em;
}

.site-footer__address,
.site-footer__fax,
.site-footer__hours {
	font-size: 0.85rem;
	margin-bottom: 0.4em;
}

.site-footer__tel a {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
}

.site-footer__nav-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 24px;
}

.site-footer__nav-list a {
	color: var(--c-text-sub-on-dark);
	font-size: 0.9rem;
}

.site-footer__nav-list a:hover {
	color: var(--c-mint-link);
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--c-text-sub-on-dark);
}

/* ========== 18. 下層ページ共通 ========== */
.page-header {
	background: var(--c-sage-tint);
	padding: 48px 0;
	border-bottom: 1px solid var(--c-border);
}

.page-header__breadcrumb {
	font-size: 0.8rem;
	color: var(--c-text-sub);
	margin-bottom: 0.75em;
	display: flex;
	gap: 8px;
}

.page-header__breadcrumb a {
	color: var(--c-text-sub);
}

.page-header__title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
}

.page-content {
	padding-top: 64px;
}

.page-content__extra {
	margin-top: 2.5em;
}

.page-content__extra h2 {
	font-size: 1.25rem;
	margin: 1.5em 0 0.6em;
}

.page-content__extra p {
	color: var(--c-text-sub);
}

.service-detail__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.service-detail__item {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	padding: 28px;
	scroll-margin-top: calc(var(--header-height) + 16px);
}

.service-detail__title {
	font-size: 1.1rem;
	margin-bottom: 0.6em;
}

.service-detail__text {
	color: var(--c-text-sub);
	margin-bottom: 1em;
}

.service-detail__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1em;
}

.service-detail__points li {
	background: var(--c-sage-tint);
	color: var(--c-brand-green);
	font-size: 0.82rem;
	padding: 0.4em 0.9em;
	border-radius: 999px;
}

.office-photo {
	margin: 0 0 2.5em;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.office-photo__img {
	width: 100%;
	height: auto;
	display: block;
}

.office-photo__caption {
	padding: 12px 16px;
	color: var(--c-text-sub);
	font-size: 0.85rem;
	border-top: 1px solid var(--c-border);
}

.info-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1em;
}

.info-table th,
.info-table td {
	text-align: left;
	padding: 16px 12px;
	border-bottom: 1px solid var(--c-border);
	vertical-align: top;
}

.info-table th {
	width: 160px;
	color: var(--c-brand-navy);
	font-weight: 700;
}

.single-post__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--c-text-sub);
	margin-bottom: 1.5em;
}

.single-post__category {
	background: var(--c-accent-green);
	color: #fff;
	font-size: 0.72rem;
	padding: 0.25em 0.8em;
	border-radius: 999px;
}

.single-post__thumbnail {
	margin-bottom: 2em;
	border-radius: var(--radius-m);
	overflow: hidden;
}

.single-post__back {
	margin-top: 3em;
}

.pagination {
	margin-top: 2.5em;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
	color: var(--c-text);
}

.pagination .page-numbers.current {
	background: var(--c-brand-green);
	border-color: var(--c-brand-green);
	color: #fff;
}

/* ========== 19. レスポンシブ ========== */
/* 2026-08-07 修正: ナビ8項目+ロゴ+電話+CTAをcontainer-width（1160px）内でゆとりを持って
   横並び表示するのは幅が足りず窮屈になるため、ヘッダーのハンバーガー切り替えのみ他セクションと切り離し、
   ブレークポイントを1180pxに引き上げる。一般的なPC・ノートPCのビューポート（1280px以上等）では
   フルナビがゆとりを持って表示され、1180px以下（container幅1160pxを含む）ではハンバーガーメニューに切り替わる。
   ヘッダー以外のセクション（hero・services・footer等）は従来どおり960pxブレークポイントのまま。
   2026-08-08 修正: ロゴブロックの1.5倍拡大（.site-header__logo参照、左右padding・ロゴ画像幅が
   拡大）に伴い、ロゴが専有する横幅が従来より約90px増えた。そのままブレークポイント1180pxを
   維持すると、1280px前後の一般的なノートPC幅でナビ（4項目）と電話番号・CTAボタンが
   1180pxブレークポイント直上でも折り返してしまうことをヘッドレスChromeで確認したため
   （1290px以下で折り返し、1300px以上で1行に収まることを実測）、余裕を持たせて
   ブレークポイントを1320pxに引き上げる。1320px以下（container幅1160pxを含む）は
   ハンバーガーメニューに切り替わり、1321px以上でフルナビがゆとりを持って1行表示される。 */
@media (max-width: 1320px) {
	.site-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--c-base);
		/* 2026-08-08 追加修正: ロゴブロックの1.5倍拡大（.site-header__logo参照、モバイル側の
		   張り出し量が26px→39pxに拡大）により、ハンバーガーメニュー展開時、パネル先頭の
		   「業務案内」リンク（padding-top内包の実測 top=100px、テキスト表示開始は約117px）が
		   ロゴブロックの張り出し下端（実測 bottom=123px、z-index:650でパネルのz-index:400より
		   前面）に約6px食い込み、テキスト上端がロゴに隠れることをヘッドレスChrome実クリック
		   検証で確認したため、padding-topのみ張り出し量+ゆとり分（39px+24px=63px）に拡大し、
		   先頭項目の表示開始位置をロゴ張り出し下端より確実に下げる。パネル自体のtop位置・
		   背景色開始位置は変更していないため、ヘッダーとパネル背景の間に隙間は生じない。
		   2026-08-08 追加修正: ロゴブロックの上下余白非対称化（10px/20px、.site-header__logo参照）
		   によりモバイル側の張り出し量が39px→42pxに増えたため、同じ24pxのゆとりを維持する形で
		   padding-topを63px→66px（42px+24px）に再調整する。 */
		padding: 66px 24px 24px;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		overflow-y: auto;
		z-index: 400;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.site-nav__list {
		flex-direction: column;
		gap: 4px;
	}

	.site-nav__list a {
		display: block;
		padding: 1em 0.5em;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--c-border);
	}

	.site-header__tel-text {
		display: none;
	}

	.site-header__cta {
		display: none;
	}

	.site-header__menu-btn {
		display: flex;
	}

	/* 2026-08-08 追加: 電話番号・CTAボタンが非表示になる1320px以下は、ロゴブロックと
	   ハンバーガーボタンの2要素のみになり幅の余裕は増すが、ロゴブロックの下への張り出し量が
	   狭いビューポートで相対的に大きく見えすぎないよう、張り出し・パディングをやや控えめにする。
	   2026-08-08 追記: ヘッダーロゴ拡大（34px→64px）に合わせて、モバイル側も30px→48pxに拡大。
	   張り出し量（margin-bottom）も14px→18pxに調整している。
	   2026-08-08 追加修正: PC側の再拡大（64px→104px）に合わせ、モバイル側も48px→64pxへ拡大。
	   張り出し量は18px→26pxに調整（PC同様ヘッダー高さの約0.31倍。ハンバーガーボタン(44px)
	   との重なりを避けるためPC側の比率0.48より控えめに設定）。
	   2026-08-08 追加修正: PC側の1.5倍拡大（左右padding・張り出し量）に合わせ、モバイル側も
	   同比率で1.5倍に拡大する。padding: 20px→30px、張り出し量: 26px→39px、
	   ロゴ画像高さ: 64px→96px。ハンバーガーボタン（width/height:44px、右側配置）との
	   横方向の重なりは、ロゴがmargin-right:autoで左寄せ・ハンバーガーが右寄せのため
	   引き続き発生しないことをヘッドレスChromeで確認する。
	   2026-08-08 追加修正（上下均等5px/5pxから非対称10px/20pxへの指摘、PC同様の対応）:
	   ロゴ画像の実高さ96pxは変更せず、96+10+20=126pxをブロック高さとする。overhangは
	   126-84(--header-height)=42px（39px→42px）に、margin-bottomも-42pxに拡大する。
	   左右paddingは対象外のため30pxのまま変更しない。この張り出し量の3px拡大に伴い、
	   ハンバーガーメニュー展開パネルの先頭項目とロゴ張り出し部分が食い込まないよう、
	   下記@media (max-width: 1320px) .site-nav のpadding-topも66pxへ再調整している。 */
	.site-header__logo {
		height: calc(var(--header-height) + 42px);
		margin-bottom: -42px;
		padding: 10px 30px 20px;
	}

	.site-header__logo img {
		height: 96px;
	}

	/* 業務案内メガメニュー: ハンバーガーメニュー内ではアコーディオン形式に切り替える。
	   :hover/:focus-within による自動展開は無効化し（フォーカストラップ防止）、
	   .nav-mega__toggle（タップ/Enter/Spaceキー）で開閉する.is-openクラスのみに一本化する。 */
	.site-nav__item--has-mega {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--c-border);
	}

	.site-nav__item--has-mega .site-nav__item-link {
		flex: 1;
		border-bottom: none;
	}

	.nav-mega__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		background: transparent;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-s);
		color: var(--c-brand-navy);
		transition: transform 0.2s ease;
	}

	.nav-mega__toggle:focus-visible {
		outline: 2px solid var(--c-accent-green);
		outline-offset: 1px;
	}

	.nav-mega__toggle svg {
		width: 16px;
		height: 16px;
		transition: transform 0.2s ease;
	}

	.site-nav__item--has-mega.is-open .nav-mega__toggle svg {
		transform: rotate(180deg);
	}

	.nav-mega {
		position: static;
		width: 100%;
		max-height: 0;
		transform: none;
		border: none;
		box-shadow: none;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	/* 2026-08-07 修正: ベース（非メディアクエリ）側の
	   「.site-nav__item--has-mega.is-open .nav-mega { transform: translate(-50%, 0); }」は
	   詳細度（0,2,0）が上の.nav-mega単体リセット（0,1,0）より高く、position:staticにしても
	   transformだけ生き残り左に大きくずれていた（実機ヘッドレスChrome確認で判明）。
	   同じセレクタ構成でtransform:noneを明示し、詳細度を揃えて上書きする。 */
	.site-nav__item--has-mega:hover .nav-mega,
	.site-nav__item--has-mega:focus-within .nav-mega,
	.site-nav__item--has-mega.is-open .nav-mega {
		transform: none;
	}

	.site-nav__item--has-mega:hover .nav-mega,
	.site-nav__item--has-mega:focus-within .nav-mega {
		opacity: 0;
		visibility: hidden;
	}

	.site-nav__item--has-mega.is-open .nav-mega {
		opacity: 1;
		visibility: visible;
		max-height: 800px;
	}

	.nav-mega__inner {
		padding: 4px 0 16px;
	}

	.nav-mega__list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* .site-nav__list a（display:block等）を.nav-mega .nav-mega__linkの2クラス詳細度で上書きする */
	.nav-mega .nav-mega__link {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 10px 12px;
		border: 1px solid var(--c-border);
	}

	.nav-mega__thumb {
		width: 52px;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		margin-bottom: 0;
	}

	.nav-mega__thumb svg {
		width: 24px;
		height: 24px;
	}

	.nav-mega__title {
		margin-bottom: 0;
	}

	.nav-mega__text {
		display: none;
	}
}

@media (max-width: 960px) {
	.hero__inner,
	.profile__inner,
	.contact__inner {
		grid-template-columns: 1fr;
	}

	.hero__media {
		order: -1;
	}

	.service-detail__list {
		grid-template-columns: 1fr;
	}

	.services__zigzag {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.services__zigzag--reverse .services__zigzag-media,
	.services__zigzag--reverse .services__zigzag-content {
		order: initial;
	}

	.services__secondary {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.voice__list {
		grid-template-columns: 1fr;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.site-footer__nav-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.pain-points__item {
		flex-basis: calc((100% - 24px) / 2);
	}

	.u-pc-only {
		display: none;
	}

	.u-sp-only {
		display: inline;
	}
}

/* .hero--front はデザイン案.md「ヒーロー構成の具体設計」記載のブレークポイント768pxに合わせる。
   吹き出しメッセージ・プロフィールカードは、写真の下に押し出す構成にはせず（実装簡略化のための判断。
   詳細はデザイン案.mdの差分リストを参照）、サイズを縮小したうえで写真上への重畳表示を維持する。 */
@media (max-width: 768px) {
	/* 2026-08-07 修正: スマートフォンでもビューポート高さいっぱいを基本としつつ、
	   縦長比率の強い小型端末で写真エリアが際限なく伸びないよう640pxを上限、280pxを下限とする。 */
	.hero__photo {
		height: clamp(280px, calc(100vh - var(--header-height)), 640px);
	}

	/* 2026-08-08 追加: トップページのヒーロー引き上げ（.page-home .hero--front参照）に合わせ、
	   モバイル幅でも写真高さの基準からヘッダー高さの差し引きをやめる（100vh基準）。 */
	.page-home .hero__photo {
		height: clamp(280px, 100vh, 640px);
	}

	.hero__message-box {
		width: 260px;
		padding: 16px 18px;
	}

	/* 2026-08-08 修正: PC側のフォント拡大（見出し級）に合わせ、スマートフォンでも
	   従来のキャッチコピー的サイズ（0.82rem）より大きく太くする。ボックス幅260pxに対し
	   4行構成（各行6〜9文字）が収まる範囲で調整。 */
	.hero__message-box p {
		font-size: 1.15rem;
		line-height: 1.4;
	}

	.hero__profile-card {
		width: 180px;
		padding: 8px 10px;
	}

	.hero__headline {
		padding: 40px 0 32px;
	}

	.hero__cta-bar-inner {
		padding: 16px 24px;
	}

	.features-strip__list {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* 2026-08-07 追加: 600〜768px幅では.construction-support__textの実効幅（container由来）が
   2カラムの長い項目名を収めるにはまだ狭いケースがあるため、一段階早く単カラムへ切り替える。 */
@media (max-width: 700px) {
	.construction-support__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.section {
		padding: 56px 0;
	}

	.flow__list {
		grid-template-columns: 1fr;
	}

	/* 2026-08-08 修正（トップページのヘッダー透明演出の実装中に発覚した既存不具合）:
	   .hero--front（フロントページのフルブリード写真ヒーロー）は.hero--front側でpadding:0を
	   指定しているが、.heroと.hero--frontは同じ特異性（クラス1つ分）のため、後に書かれている
	   本ルール（.hero { padding: 48px 0 64px; }）がソース順で上書きしてしまい、600px以下の幅で
	   ヒーロー写真の上に高さ48pxの透明な隙間ができ、そこから白い背景が透けて見えていた
	   （本タスクのヘッダー透明化以前から存在した潜在バグだが、ヘッダーがヒーロー写真に重なる
	   演出を追加したことで隙間が目立つ形で顕在化したため、あわせて修正する）。
	   :not(.hero--front)で除外し、.hero--service（下層ページのヒーロー、本来の適用対象）には
	   従来どおりpaddingを適用したまま、.hero--frontのみ影響を受けないようにする。 */
	.hero:not(.hero--front) {
		padding: 48px 0 64px;
	}

	.contact-form {
		padding: 24px;
	}

	.pain-points__item {
		flex-basis: 100%;
	}

	.hero__message-box,
	.hero__profile-card {
		left: 8px;
		right: 8px;
		width: auto;
		max-width: none;
	}

	.hero__profile-card {
		bottom: auto;
		top: 8px;
	}

	/* 2026-08-08 追加（トップページのヘッダー透明演出の実装中に発覚した見た目の重なり）:
	   .hero__profile-card はこのブレークポイント（600px以下）でヒーロー写真の「上端」に
	   移動する仕様だが、トップページはヒーロー写真自体がヘッダー分（--header-height）
	   引き上げられ、ヘッダーの背後まで届いている（.page-home .hero--front参照）。
	   そのため写真の「上端」基準のtop:8pxのままだと、白背景のプロフィールカードが
	   透明なヘッダーの真下に重なって見えてしまう（ヘッダー透明化前は気付きにくかった
	   潜在的な見た目の問題）。トップページのみ、ヘッダー高さ分オフセットし、
	   カードがヘッダーの下（写真が実際に見え始める位置）から現れるようにする。
	   下層ページ用の.hero--service（このブレークポイントでは通常フローのため無関係）には
	   影響しない。 */
	.page-home .hero__profile-card {
		top: calc(var(--header-height) + 8px);
	}

	.services__secondary {
		grid-template-columns: 1fr;
	}

	.area-photo-strip {
		grid-template-columns: 1fr;
	}
}

/* ========== 20. 初回アクセス時スプラッシュ画面 ========== */
/* header.php冒頭（<body>直後）にマークアップとインラインスクリプトを配置している。
   インラインスクリプトが<html>から no-js クラスを除去し js クラスを付与するため、
   JS有効環境では下の .no-js 用フォールバックは即座に無効化される。
   同一セッション内2回目以降のアクセスは、インラインスクリプトが<html>に付与する
   .botheme-splash-skip クラスにより display:none で完全非表示にする
   （sessionStorage判定、header.php参照）。
   フェードアウトの本体制御（1.2秒後に.is-hiddenを付与）はmain.js側（jQuery、stack.md準拠）で行う。 */
.splash-screen {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-brand-navy);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-screen__logo {
	width: 120px;
	height: auto;
	/* ヘッダーロゴ（.site-header__logo img）と同様、ネイビー地の上でも判読できるよう
	   白いシルエットにする（ロゴ本体の配色・ファイルは変更しない）。 */
	filter: brightness(0) invert(1);
	animation: botheme-splash-logo-fade 0.6s ease;
}

.splash-screen.is-hidden {
	opacity: 0;
	visibility: hidden;
}

/* 初回表示済み（sessionStorage）の場合、header.php側インラインスクリプトが<html>に付与する
   クラス。フェードアニメーションを待たず即座に非表示にする。 */
.botheme-splash-skip .splash-screen {
	display: none;
}

/* JS無効環境向けフォールバック: sessionStorage判定・フェードアウト制御ができないため、
   CSSアニメーションのみで一定時間後に非表示にし、「スプラッシュが消えないまま残る」事故を防ぐ
   （animation-fill-mode:forwardsで最終状態を維持）。JS有効環境ではインラインスクリプトが
   即座に<html>から.no-jsを除去するため、このルールは適用されない。 */
.no-js .splash-screen {
	animation: botheme-splash-autohide 2.2s ease forwards;
}

@keyframes botheme-splash-autohide {
	0%,
	65% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes botheme-splash-logo-fade {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* アニメーションによる視覚的な負担を軽減する設定を有効にしているユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
	.splash-screen,
	.splash-screen__logo {
		animation: none;
	}

	.splash-screen {
		transition: none;
	}
}