/* =================================================================
   斎藤税務会計事務所 - main.css
   単位ポリシー: 余白・サイズ・行間は rem / 幅・比率は % と fr
   色・余白・タイポの基準値は theme.json 側で管理（ここは構成と挙動）
   ================================================================= */

:root {
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { font-size: 100%; }                 /* = 16px 基準。以降すべて rem */
body { line-height: 1.9; }

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

/* ---------- ヘッダー ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.site-header.is-scrolled { box-shadow: 0 0.125rem 0.75rem rgba(38, 48, 43, 0.06); }

.site-brand { display: flex; align-items: center; gap: 0.5rem; }
.site-brand img { width: 1.5rem; height: 1.5rem; }

/* ---------- フッター ---------- */
.site-footer { background: var(--wp--preset--color--deep); }
.site-footer a { color: #A9C95E; }
.site-footer a:hover { color: #EAF1DC; }

/* ---------- セクション共通 ---------- */
.section { padding-block: var(--wp--preset--spacing--80); }

.section-title {
	display: inline-block;
	border-bottom: 0.125rem solid var(--wp--preset--color--accent);
	padding-bottom: 0.3rem;
}

.eyebrow {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* ---------- カードUI ---------- */
.u-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
	padding: 1rem 1rem;
	height: 100%;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.u-card:hover { border-color: #C9D9A8; transform: translateY(-0.125rem); }

.u-card .ti { color: var(--wp--preset--color--accent); font-size: 1.375rem; }

/* サービス: 経営支援グループの重心 */
.svc-heading--mgmt {
	color: #3B6D11;
	border-left: 0.1875rem solid var(--wp--preset--color--accent);
	padding-left: 0.6rem;
}
.svc-card--mgmt { border-color: #C9D9A8; }

/* ---------- FV 図版 ---------- */
.fv-figure img { width: 100%; border-radius: 0.75rem; }

/* ---------- RAFS ステップ ---------- */
.rafs-steps {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.rafs-step {
	flex: 1 1 8rem;
	background: var(--wp--preset--color--paper);
	border-radius: 0.625rem;
	padding: 0.875rem;
}
.rafs-step__no { color: var(--wp--preset--color--accent-strong); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.rafs-arrow { color: var(--wp--preset--color--accent); }

/* ---------- ご相談の流れ ---------- */
.flow {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.flow-step {
	flex: 1 1 8rem;
	text-align: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
	padding: 0.875rem;
}
.flow-step__no { color: var(--wp--preset--color--accent); font-size: 1.125rem; font-weight: 500; }

/* ---------- メディア枠（写真・地図プレースホルダ） ---------- */
.media-frame {
	background: #E7ECE0;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10rem;
}
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame .ti { font-size: 1.875rem; color: #9FB07F; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 48em) {
	.wp-block-columns { gap: var(--wp--preset--spacing--40); }
	.rafs-arrow { display: none; }
}