@charset "UTF-8";
/* 柴・ブレインパートナーズ テーマ本体スタイル */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
	font-family: 'Togalite';
	src: url('../fonts/Togalite-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Togalite';
	src: url('../fonts/Togalite-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Togalite';
	src: url('../fonts/Togalite-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Togalite';
	src: url('../fonts/Togalite-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────── */
:root {
	/* Families */
	--font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
	--font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	--font-num: 'Cormorant Garamond', 'Shippori Mincho', serif;

	/* Weights */
	--fw-body: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-serif: 600;
	--fw-serif-hi: 900;

	/* Type scale */
	--fs-display: 50px;
	--fs-h1: 48px;
	--fs-h2: 32px;
	--fs-h3: 24px;
	--fs-lead: 21px;
	--fs-body: 18px;
	--fs-sm: 15px;
	--fs-xs: 13px;
	--fs-min-body: 17px; /* サイト全体の本文最低サイズ基準 */
	--fs-stat: 70px;

	/* Line-height */
	--lh-tight: 1.18;
	--lh-snug: 1.5;
	--lh-body: 1.9;
	--lh-loose: 2.05;

	/* Letter-spacing */
	--ls-heading: 0.06em;
	--ls-body: 0.02em;
	--ls-label: 0.16em;

	/* Semantic roles（typography） */
	--text-display-font: var(--font-serif);
	--text-heading-font: var(--font-serif);
	--text-body-font: var(--font-sans);

	/* Colors（インディゴ×ゴールド） */
	--green-900: #0A3D82;
	--green-800: #0F63C4;
	--green-700: #1878DE;
	--green-600: #2E8BFF;
	--green-500: #5CA8FF;
	--green-100: #E7F2FF;

	--gold-700: #C9A400;
	--gold-600: #E0B400;
	--gold-500: #FFD400;
	--gold-400: #FFDE66;
	--gold-300: #FFEA99;
	--gold-100: #FFF7D6;

	/* 現行デザインでは未使用（定義のみ維持） */
	--wine-900: #7A1F2B;
	--red-600: #E8382A;
	--pop-outline: #15181F;

	--white: #FFFFFF;
	--cream: #EEF6FF;
	--cream-deep: #E1EFFF;
	--greige: #ECE7DD;
	--greige-deep: #DED7C9;

	--ink-900: #1B2233;
	--ink-700: #3B4258;
	--ink-500: #6B7288;
	--ink-300: #A8AEBD;

	/* Semantic aliases（上の生値の変更がそのまま伝播する） */
	--brand: var(--green-800);
	--brand-strong: var(--green-900);
	--accent: var(--gold-500);
	--accent-strong: var(--gold-600);

	--bg-page: var(--cream);
	--bg-band: var(--cream-deep);
	--bg-brand: var(--green-800);
	--surface-card: var(--white);
	--surface-muted: var(--greige);

	--text-heading: var(--ink-900);
	--text-body: var(--ink-700);
	--text-muted: var(--ink-500);
	--text-on-brand: #F4F1E9;
	--text-on-brand-muted: rgba(244, 241, 233, 0.74);
	--text-on-accent: #0A3D82;

	--border-card: var(--gold-100);
	--border-soft: var(--greige-deep);
	--border-strong: var(--gold-400);

	--divider: rgba(35, 34, 32, 0.10);

	--cta-phone-bg: var(--gold-500);
	--cta-phone-bg-hover: var(--gold-600);
	--cta-form-bg: var(--green-800);
	--cta-form-bg-hover: var(--green-900);

	--overlay-green: linear-gradient(180deg, rgba(16, 42, 31, 0.78) 0%, rgba(16, 42, 31, 0.62) 100%);

	--rule: rgba(27, 34, 51, 0.10);
	--rule-on-dark: rgba(255, 255, 255, 0.20);

	/* Spacing & layout */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 88px;
	--sp-10: 120px;

	--container: 1120px;
	--container-wide: 1280px;
	--gutter: 32px;
	--gutter-sp: 20px;

	--section-pad-y: var(--sp-10);
	--section-pad-y-sm: var(--sp-9);

	--grid-gap: 24px;
	--grid-gap-lg: 32px;

	/* Effects */
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(35, 34, 32, 0.05);
	--shadow-sm: 0 2px 8px rgba(35, 34, 32, 0.06);
	--shadow: 0 6px 20px rgba(35, 34, 32, 0.08);
	--shadow-md: 0 12px 32px rgba(35, 34, 32, 0.10);
	--shadow-cta: 0 8px 22px rgba(142, 111, 55, 0.28);
	--ring-gold: inset 0 0 0 1px var(--gold-100);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 140ms;
	--dur: 220ms;
	--dur-slow: 360ms;

	--rule-gold: 2px solid var(--gold-500);

	/* 固定ヘッダー分のスクロールオフセット */
	--header-offset: 92px;
}

/* ── Base ─────────────────────────────────────────────────── */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	scroll-behavior: smooth;
}

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

a:hover {
	color: var(--green-600);
}

img {
	max-width: 100%;
}

/* tel: リンクは電話をかけられるデバイス（タッチ操作中心）でのみ有効化する社内標準仕様 */
a[href^="tel:"] {
	pointer-events: none;
	cursor: default;
}

@media (hover: none) and (pointer: coarse) {
	a[href^="tel:"] {
		pointer-events: auto;
		cursor: pointer;
	}
}

.sbp-page {
	font-family: var(--font-sans);
	color: var(--ink-700);
	background: #fff;
	overflow-x: hidden;
	padding-top: var(--header-offset);

	/* sticky footer（全ページ共通）
	   コンテンツが短いページでもフッターが画面の途中で終わらないようにする。
	   ・min-height は 100vh を先に書き、対応環境では 100svh で上書きする
	     （モバイルのアドレスバー伸縮で 100vh が実表示領域より大きくなり、
	       短いページでも数十px分スクロールできてしまうのを防ぐため）
	   ・padding-top は assets/js/main.js の setupHeaderOffset() が固定ヘッダーの
	     実測高さで毎回上書きする。全要素に box-sizing:border-box を当てているため
	     この padding は min-height の内側に含まれ、100svh と二重にはならない
	     （calc で padding を引く必要はない） */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/* main を伸縮させてフッターを最下部へ押し出す。
   flex-shrink:0 にしてコンテンツが長いページで縮まないようにする。 */
.sbp-page > main {
	flex: 1 0 auto;
}

.sbp-page [id] {
	scroll-margin-top: var(--header-offset);
}

/* 管理バー表示時に固定ヘッダーが隠れないようにする（フロントの見た目には影響しない） */
.admin-bar .sbp-header {
	top: 32px;
}

.sbp-nw {
	white-space: nowrap;
}

/* 画像。support-3 / reason-2 のみ被写体に合わせて縦位置 30%。 */
.sbp-cover {
	position: absolute;
	inset: 0;
	display: block;
}

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

.sbp-cover--y30 img {
	object-position: 50% 30%;
}

/* ── Reveal（スクロール出現アニメーション） ─────────────────── */
.sbp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sbp-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* JS無効環境向けのフォールバックは assets/css/noscript.css（<noscript> から読み込み）で行う */

@media (prefers-reduced-motion: reduce) {
	.sbp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Section shell ───────────────────────────────────────── */
.sbp-sec {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 9vw, 128px) clamp(20px, 4vw, 48px);
}

.sbp-sec--white {
	background: #fff;
}

.sbp-sec--cream {
	background: var(--cream);
}

.sbp-sec--area {
	padding: clamp(80px, 18vw, 260px) clamp(20px, 4vw, 48px);
}

.sbp-sec--contact {
	background: linear-gradient(180deg, #06983C 0%, #066B31 50%, #064726 100%);
}

.sbp-inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.sbp-sec--problem .sbp-inner,
.sbp-sec--support .sbp-inner,
.sbp-sec--recommend .sbp-inner,
.sbp-sec--contact .sbp-inner {
	gap: 56px;
}

.sbp-sec--reason .sbp-inner,
.sbp-sec--flow .sbp-inner {
	gap: 64px;
}

.sbp-sec--philosophy .sbp-inner,
.sbp-sec--news .sbp-inner {
	gap: 48px;
}

.sbp-sec--faq .sbp-inner {
	gap: 40px;
}

.sbp-inner--faq {
	max-width: 740px;
}

.sbp-inner--narrow {
	max-width: 740px;
	gap: 24px;
}

/* ── 1. HEADER ───────────────────────────────────────────── */
.sbp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px clamp(20px, 4vw, 48px);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rule);
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
	will-change: transform;
}

.sbp-header.is-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.sbp-header.is-visible {
	pointer-events: auto;
	animation: sbpHeaderDrop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sbpHeaderDrop {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	55% {
		transform: translateY(8%);
		opacity: 1;
	}
	78% {
		transform: translateY(-3%);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sbp-header {
		transition: none;
	}
	.sbp-header.is-hidden {
		transform: translateY(-100%);
		opacity: 0;
	}
	.sbp-header.is-visible {
		animation: none;
		transform: translateY(0);
		opacity: 1;
	}
}

/* ロゴはトップへ戻るリンク（<a>）。既定の inline 表示で
   レイアウトが崩れないよう display:flex を維持し、下線・文字色の変化で
   ロゴ画像が汚れないよう text-decoration / color を明示している。 */
.sbp-header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sbp-header-brand:hover,
.sbp-header-brand:focus-visible {
	color: inherit;
	text-decoration: none;
	opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
	.sbp-header-brand {
		transition: none;
	}
}

/* ロゴ類は最適化で画素数を落としているため、元画像の縦横比
   （dog-logo 5415:4968 / logo 7513:1020）を aspect-ratio で固定する。 */
.sbp-header-brandmark {
	display: block;
	height: 38px;
	width: auto;
	aspect-ratio: 5415 / 4968;
	flex: 0 0 auto;
}

.sbp-header-logo {
	display: block;
	height: 34px;
	width: auto;
	aspect-ratio: 7513 / 1020;
	flex: 0 0 auto;
}

.sbp-header-brandmark img,
.sbp-header-logo img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.sbp-nav {
	display: flex;
	gap: 30px;
	font-size: var(--fs-min-body);
	font-weight: 700;
}

.sbp-nav a {
	color: var(--ink-700);
	white-space: nowrap;
}

.sbp-nav a:hover {
	color: var(--green-700);
}

.sbp-header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

.sbp-phone-header {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-900);
}

.sbp-phone-header__icon {
	display: inline-flex;
	color: var(--green-700);
}

.sbp-phone-header__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sbp-phone-header__num {
	font-size: 17px;
	font-weight: 900;
	color: var(--ink-900);
	font-family: var(--font-num);
}

.sbp-phone-header__hours {
	font-size: 13px;
	color: var(--ink-500);
	font-weight: 500;
}

.sbp-header-cta {
	display: flex;
	align-items: center;
	padding: 12px 24px;
	background: var(--green-900);
	color: #fff;
	font-size: var(--fs-min-body);
	font-weight: 900;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.sbp-header-cta:hover {
	color: #fff;
}

/* ハンバーガー：3本バー → タップで X に変形 */
.sbp-hamburger {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sbp-hamburger-bar {
	position: absolute;
	left: 7px;
	right: 7px;
	height: 2px;
	background: var(--ink-900);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.sbp-hamburger-bar:nth-child(1) {
	top: 13px;
}

.sbp-hamburger-bar:nth-child(2) {
	top: 19px;
}

.sbp-hamburger-bar:nth-child(3) {
	top: 25px;
}

.sbp-hamburger.is-active .sbp-hamburger-bar:nth-child(1) {
	top: 19px;
	transform: rotate(45deg);
}

.sbp-hamburger.is-active .sbp-hamburger-bar:nth-child(2) {
	opacity: 0;
}

.sbp-hamburger.is-active .sbp-hamburger-bar:nth-child(3) {
	top: 19px;
	transform: rotate(-45deg);
}

.sbp-mobile-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	background: #fff;
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 16px 32px rgba(10, 61, 130, 0.18);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

.sbp-mobile-nav a {
	padding: 16px 24px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink-700);
	border-top: 1px solid var(--rule);
}

.sbp-mobile-nav a:first-child {
	border-top: none;
}

.sbp-mobile-nav a:hover {
	color: var(--green-700);
	background: var(--cream);
}

.sbp-mobile-nav.is-open {
	max-height: 320px;
	opacity: 1;
	transform: translateY(0);
}

/* ── 2. FIRST VIEW ───────────────────────────────────────── */
.sbp-hero {
	position: relative;
	padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 64px);
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(6, 47, 107, 0.94) 0%, rgba(10, 95, 192, 0.80) 35%, rgba(46, 139, 255, 0.45) 55%, rgba(46, 139, 255, 0.08) 72%, rgba(46, 139, 255, 0) 82%),
		url('../img/hero-bg.webp');
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

.sbp-hero__grid {
	position: relative;
	z-index: 1;
	max-width: var(--container-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: end;
}

.sbp-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: clamp(40px, 6vw, 72px);
	text-align: center;
}

.sbp-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: var(--fs-min-body);
	font-weight: 900;
	letter-spacing: 0.16em;
	color: var(--gold-400);
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.sbp-hero-eyebrow__rule {
	width: 24px;
	height: 2px;
	background: var(--gold-500);
	flex: 0 0 auto;
}

.sbp-hero-headline {
	margin: 20px 0 0;
	font-family: 'Togalite', 'Noto Sans JP', sans-serif;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-align: center;
}

.sbp-hero-line {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	text-wrap: nowrap;
	transform: skewX(-8deg);
	transform-origin: left center;
}

.sbp-hero-line--2 {
	margin-top: 8px;
}

.sbp-hero-dassu {
	font-size: clamp(30px, 6vw, calc(var(--fs-display) * 1.34));
	font-weight: 500;
	color: #fff;
	text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.38), 0 0 10px rgba(0, 0, 0, 0.22);
}

.sbp-hero-honbun {
	font-size: clamp(29px, 5.6vw, calc(var(--fs-display) * 1.24));
	font-weight: 500;
	color: var(--gold-500);
}

.sbp-hero__subcopy {
	margin: 20px 0 0;
	font-size: clamp(19px, 5vw, calc(var(--fs-lead) * 1.3));
	font-weight: 700;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: 0.04em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.sbp-hero__lead {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: clamp(25px, 3.2vw, 34px);
	line-height: 1.4;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.sbp-hero__cta {
	margin-top: 8px;
}

.sbp-hero__figure {
	position: relative;
	width: 100%;
	height: clamp(340px, 40vw, 540px);
	border-radius: 18px 18px 0 0;
	overflow: hidden;
	box-shadow: 0 20px 44px rgba(10, 61, 130, 0.16);
}

.sbp-hero-stats {
	position: relative;
	z-index: 1;
	max-width: var(--container-wide);
	margin: 36px auto 0;
	display: flex;
	gap: 16px;
}

.sbp-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px 16px 16px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-top: 3px solid var(--gold-500);
	border-radius: 14px;
	box-shadow: 0 12px 26px rgba(10, 61, 130, 0.16);
}

.sbp-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--green-100);
	color: var(--green-800);
}

.sbp-stat__icon--num {
	font-family: var(--font-num);
	font-weight: 900;
	font-size: 20px;
}

.sbp-stat__icon-unit {
	font-size: 11px;
	font-weight: 700;
}

.sbp-stat__label {
	font-size: 23px;
	color: var(--ink-900);
	font-weight: 900;
	line-height: 1.3;
}

.sbp-stat__label--tracked {
	letter-spacing: 0.5em;
}

.sbp-stat__value {
	font-weight: 500;
	color: var(--ink-700);
	font-size: 19px;
}

/* ── CTA banner ──────────────────────────────────────────── */
.sbp-cta-banner {
	display: block;
	background: var(--green-900);
	padding: 26px clamp(20px, 4vw, 48px);
	text-align: center;
}

.sbp-cta-banner__title {
	display: block;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: clamp(18px, 2.2vw, 24px);
	color: #fff;
	letter-spacing: 0.03em;
}

.sbp-cta-banner__note {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-min-body);
	color: rgba(255, 255, 255, 0.72);
}

/* ── 3. 悩みの提示 ────────────────────────────────────────── */
.sbp-problem__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 56px;
	align-items: center;
}

.sbp-problem__figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-problem__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbp-pain-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	background: linear-gradient(120deg, var(--green-900) 0%, var(--green-700) 100%);
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-pain-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--gold-400);
}

.sbp-pain-hero__label {
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.1em;
	color: var(--gold-400);
	margin-bottom: 6px;
}

.sbp-pain-hero__text {
	margin: 0;
	font-size: 21px;
	font-weight: 900;
	line-height: 1.6;
	color: #fff;
	text-wrap: pretty;
}

.sbp-pain-sub {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 22px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-pain-sub--a {
	background: var(--cream);
	border-left: 4px solid var(--green-600);
}

.sbp-pain-sub--b {
	background: #fff;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--gold-500);
}

.sbp-pain-sub__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--green-700);
}

.sbp-pain-sub__text {
	font-size: 18px;
	line-height: 1.8;
	color: var(--ink-700);
	padding-top: 2px;
}

/* ── 4. 支援内容 ─────────────────────────────────────────── */
.sbp-tile-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.sbp-tile {
	background: var(--green-900);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-tile__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.sbp-tile__body {
	padding: 22px 24px 26px;
}

.sbp-tile__title {
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	line-height: 1.5;
}

.sbp-puzzle {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.sbp-puzzle__frame {
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
}

.sbp-puzzle__pic,
.sbp-puzzle__pic img {
	display: block;
	width: 100%;
	height: auto;
}

/* 「柴・ブレインパートナーズ ができること」は単語途中で改行させない */
.sbp-sec--support .sbp-heading__title {
	word-break: keep-all;
	overflow-wrap: break-word;
	font-size: clamp(20px, calc(8vw - 4px), 48px);
}

/* ── 5. 選ばれる理由 ─────────────────────────────────────── */
.sbp-reason-list {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

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

.sbp-reason-row.rev > *:first-child {
	order: 2;
}

.sbp-reason-row.rev > *:last-child {
	order: 1;
}

.sbp-reason-figure {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-reason-text {
	position: relative;
}

.sbp-reason-num {
	display: block;
	font-family: var(--font-num);
	font-weight: 900;
	font-size: clamp(74px, 8vw, 94px);
	color: var(--gold-500);
	line-height: 1;
	-webkit-text-stroke: 2px var(--ink-900);
	paint-order: stroke fill;
	text-shadow: 0 3px 6px rgba(27, 34, 51, 0.35);
}

/* 明朝体は -webkit-text-stroke だと線幅が不安定なため、ぼかし0の8方向 text-shadow で
   白の二重リングを作り、背景の樹木モチーフ上でも文字色 ink-900 を保ったまま視認性を確保する */
.sbp-reason-heading {
	margin: 16px 0 0;
	font-family: var(--font-serif);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 900;
	line-height: 1.6;
	color: var(--ink-900);
	text-wrap: pretty;
	text-shadow:
		1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
		1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
		2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
}

/* ── 6. 代表紹介 ─────────────────────────────────────────── */
.sbp-rep__grid {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	/* 代表写真が正方形（1000×1000）になったため、画像列を少し広げて
	   本文列との高さ差が開きすぎないようにしている（2026-08-25）。 */
	grid-template-columns: 1fr 1.2fr;
	column-gap: 64px;
	/* 縦の間隔は各アイテムの margin で作る（行によって必要な間隔が違うため row-gap は使わない）。 */
	row-gap: 0;
	/* 写真の上端を本文1段落目の上端に揃えるため、中央寄せではなく行の先頭に揃える。 */
	align-items: start;
}

/* 見出しブロック（REPRESENTATIVE／和泉英樹／肩書）はテキスト列の1行目、
   写真と本文は2行目に置く。こうすると写真の上端が本文1段落目の上端と
   自動的に揃い、見出しの高さ（フォントサイズ・折り返し）が変わってもズレない。 */
.sbp-rep__head {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}

.sbp-rep__figure {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-rep__body {
	grid-column: 2;
	grid-row: 2;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sbp-rep__role {
	font-size: 17px;
	font-weight: 700;
	color: var(--green-700);
}

.sbp-rep__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.9;
	color: var(--ink-700);
	text-wrap: pretty;
}

/* りゅうのすけロゴ：flexアイテムとして自然に配置し、gap で本文との間隔を自動確保する
   （絶対配置＋マイナスオフセットは本文量の変化で本文と重なるため使わない） */
.sbp-rep-dogmark {
	position: static;
	display: block;
	align-self: flex-end;
	width: 84px;
	height: 84px;
	margin: 8px 2px 0 0;
	opacity: 0.85;
	transform: rotate(-9deg);
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(10, 61, 130, 0.18));
}

.sbp-rep-dogmark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── 7. 経営理念 ─────────────────────────────────────────── */
.sbp-philosophy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}

.sbp-philosophy-card {
	background: #fff;
	border-radius: 18px;
	padding: clamp(28px, 3vw, 36px) clamp(24px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
	border-top: 4px solid var(--gold-500);
}

.sbp-philosophy-card__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--green-800);
	color: var(--gold-400);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.sbp-philosophy-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 900;
	color: var(--ink-900);
	line-height: 1.5;
}

.sbp-philosophy-card__rule {
	display: block;
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: var(--gold-500);
}

.sbp-philosophy-card__texts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbp-philosophy-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--ink-700);
	text-wrap: pretty;
}

/* 各段落の文頭の赤い◆マーク（計4箇所）。
   ・HTMLに文字（◆・&#9670;）を書かず、::before で正方形を45度回転して描画する
   ・本文は position:relative ＋ padding-left で字下げし、マークは absolute で行内に固定するため、
     2行目以降もマークの下に潜り込まずインデントが揃う
   ・色は既存トークン --red-600（#E8382A）を流用。新規の色トークンは追加していない
   ・top の 0.95em は行の高さ（line-height 1.9em）の半分。11px 角の半分 5.5px を引いて
     1行目の中央に合わせている（font-size が変わっても追随する） */
.sbp-philosophy-card__text {
	position: relative;
	padding-left: 22px;
}

.sbp-philosophy-card__text::before {
	content: "";
	position: absolute;
	left: 3px;
	top: calc(0.95em - 5.5px);
	width: 11px;
	height: 11px;
	background: var(--red-600);
	transform: rotate(45deg);
}

/* ── 8. お知らせ ─────────────────────────────────────────── */
.sbp-news-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}

.sbp-news-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	row-gap: 8px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--rule);
}

.sbp-news-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.sbp-news-date {
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink-500);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.sbp-news-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	width: fit-content;
	flex: 0 0 auto;
	background: #fff;
	color: var(--ink-700);
	border: 1.3px solid var(--ink-300);
}

.sbp-news-badge--info {
	border-color: var(--green-800);
}

.sbp-news-badge--event {
	border-color: color-mix(in srgb, var(--gold-700) 60%, var(--ink-900) 40%);
}

.sbp-news-badge--seminar {
	border-color: var(--green-600);
}

/* タイトル＋補足行のまとまり。
   1行だけの投稿では従来の .sbp-news-title と同じ flex アイテムとして振る舞い、
   .sbp-news-row の align-items:center による縦位置も変わらない。 */
.sbp-news-body {
	flex: 1 1 280px;
	min-width: 0;
}

.sbp-news-title {
	margin: 0;
	flex: 1 1 280px;
	min-width: 0;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-900);
}

/* お知らせ一覧の補足行。
   タイトルより一段小さく・弱いコントラストにし、既存トークンのみで構成する。 */
.sbp-news-note {
	margin: var(--sp-1) 0 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-body);
	font-size: var(--fs-sm);
	line-height: 1.7;
	letter-spacing: var(--ls-body);
	color: var(--ink-500);
}

.sbp-news-link {
	color: inherit;
}

.sbp-news-link:hover {
	color: var(--green-700);
}

.sbp-news-title--empty {
	font-weight: 600;
	color: var(--ink-500);
}

/* ── 9. こんな社長様におすすめです ───────────────────────── */
.sbp-thumb-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.sbp-thumb {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-thumb__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.sbp-thumb__body {
	padding: 18px 20px 22px;
	border-top: 3px solid var(--gold-500);
}

.sbp-thumb__title {
	display: block;
	font-size: 18px;
	line-height: 1.4;
	color: var(--ink-900);
	font-weight: 900;
}

.sbp-thumb__note {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-min-body);
	line-height: 1.6;
	color: var(--ink-700);
}

/* ── 10. 相談の流れ ──────────────────────────────────────── */
.sbp-flow-track {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.sbp-flow-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	color: var(--gold-500);
}

.sbp-flow-step {
	flex: 1;
	background: #fff;
	border-radius: 16px;
	padding: 32px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-flow-step--accent {
	background: linear-gradient(160deg, var(--green-900) 0%, var(--green-700) 100%);
}

.sbp-flow-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--green-900);
	color: #fff;
	font-family: var(--font-num);
	font-weight: 900;
	font-size: 19px;
}

.sbp-flow-step--accent .sbp-flow-step__num {
	background: var(--gold-500);
	color: var(--green-900);
}

.sbp-flow-step__icon {
	display: inline-flex;
	color: var(--green-700);
}

.sbp-flow-step--accent .sbp-flow-step__icon {
	color: var(--gold-400);
}

.sbp-flow-step__title {
	margin: 2px 0 0;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 18px;
	color: var(--ink-900);
}

.sbp-flow-step--accent .sbp-flow-step__title {
	color: #fff;
}

.sbp-flow-step__text {
	margin: 0;
	font-size: var(--fs-min-body);
	line-height: 1.7;
	color: var(--ink-700);
}

.sbp-flow-step--accent .sbp-flow-step__text {
	color: rgba(255, 255, 255, 0.78);
}

/* ── 11. FAQ ─────────────────────────────────────────────── */
.sbp-sec--faq {
	--shadow-sm: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbp-faq-item {
	background: var(--surface-card);
	border: 1px solid var(--border-card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.sbp-faq-item__q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 26px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.sbp-faq-item__mark {
	flex: 0 0 auto;
	font-family: var(--font-num);
	font-size: 24px;
	font-weight: 600;
	color: var(--green-700);
	line-height: 1;
}

.sbp-faq-item__label {
	flex: 1 1 0%;
	font-family: var(--font-serif);
	font-weight: var(--fw-serif);
	font-size: 18px;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-heading);
	color: var(--text-heading);
}

.sbp-faq-item__chevron {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gold-600);
	transform: rotate(0deg);
	transition: transform var(--dur) var(--ease);
}

.sbp-faq-item__q[aria-expanded="true"] .sbp-faq-item__chevron {
	transform: rotate(180deg);
}

.sbp-faq-item__a {
	display: flex;
	gap: 16px;
	padding: 0 26px 24px;
}

.sbp-faq-item__a[hidden] {
	display: none;
}

.sbp-faq-item__text {
	flex: 1 1 0%;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-body);
}

/* ── 12. 対応エリア / アクセス ──────────────────────────── */
.sbp-area__grid {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.sbp-area__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sbp-area__ident {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sbp-area__name {
	font-size: 18px;
	font-weight: 900;
	color: var(--ink-900);
}

.sbp-area__sub {
	font-size: var(--fs-min-body);
	color: var(--ink-700);
}

.sbp-area__addr {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 18px;
	line-height: 1.8;
	color: var(--ink-700);
}

.sbp-area__addr-icon {
	display: inline-flex;
	color: var(--green-700);
	flex: 0 0 auto;
	margin-top: 3px;
}

.sbp-area__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbp-area__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	color: var(--ink-900);
	font-weight: 700;
}

.sbp-area__contact--mail {
	word-break: break-all;
}

.sbp-area__contact-icon {
	display: inline-flex;
	color: var(--green-700);
}

.sbp-area__cta-wrap {
	margin-top: 8px;
}

.sbp-area__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: var(--gold-500);
	color: var(--text-on-accent);
	font-weight: 900;
	font-size: 17px;
	border-radius: var(--radius-pill);
}

.sbp-area__map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(10, 61, 130, 0.16), 0 22px 46px rgba(10, 61, 130, 0.26);
}

.sbp-area__map iframe {
	border: 0;
	position: absolute;
	inset: 0;
}

/* ── 13. お問い合わせ ───────────────────────────────────── */
.sbp-contact__note {
	margin: 0 auto;
	max-width: 640px;
	text-align: center;
	font-size: 17px;
	line-height: 1.9;
	color: #fff;
	text-shadow: 0 0 1px rgba(2, 20, 10, 0.95), 0 0 3px rgba(2, 20, 10, 0.85), 0 0 8px rgba(2, 20, 10, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sbp-contact__note-strong {
	color: #fff;
}

.sbp-contact__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: 32px;
	align-items: start;
}

/* Snow Monkey Forms のフォームをこの中に出力する。
   SMF 側のフォーム要素にも同じ縦積み・間隔が効くよう、直下の子要素をそのまま並べる。 */
.sbp-contact__form-wrap {
	background: #fff;
	border-radius: 14px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sbp-contact__side {
	border: 1px solid var(--rule-on-dark);
	border-radius: 14px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sbp-contact__side-title {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	-webkit-text-stroke: 0.4px rgba(3, 25, 13, 0.9);
	text-shadow: 0 0 1px rgba(2, 20, 10, 1), 0 0 3px rgba(2, 20, 10, 0.95), 0 0 7px rgba(2, 20, 10, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.sbp-contact__tel {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sbp-contact__tel-icon {
	display: inline-flex;
	color: var(--gold-400);
}

.sbp-contact__tel-num {
	font-family: var(--font-num);
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.sbp-contact__hours {
	font-size: 14px;
	color: #fff;
	-webkit-text-stroke: 0.4px rgba(3, 25, 13, 0.9);
	text-shadow: 0 0 1px rgba(2, 20, 10, 1), 0 0 3px rgba(2, 20, 10, 1), 0 0 8px rgba(2, 20, 10, 0.9), 0 1px 3px rgba(0, 0, 0, 0.75);
}

.sbp-contact__divider {
	height: 1px;
	background: var(--rule-on-dark);
}

.sbp-contact__side-note {
	font-size: var(--fs-min-body);
	line-height: 1.9;
	color: #fff;
	-webkit-text-stroke: 0.4px rgba(3, 25, 13, 0.9);
	text-shadow: 0 0 1px rgba(2, 20, 10, 1), 0 0 3px rgba(2, 20, 10, 1), 0 0 8px rgba(2, 20, 10, 0.9), 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* ── 13-2. お問い合わせフォーム（Snow Monkey Forms 上書き） ──
   Snow Monkey Forms 13.0.0 が出力するマークアップに、サイトの意匠を
   テーマCSS側から当てる。カスタマイザーの「追加CSS」は使わない。

   ■ セレクタの詳細度について
   Snow Monkey Forms は各コントロールのブロックCSSを <head> にインライン出力し、
   そこで `.smf-form .smf-text-control__control` のようにクラス2つ（詳細度0,2,0）で
   padding・枠線・チェックボックスの独自描画などを指定している。
   そのため上書き側は `.sbp-contact__form-wrap .smf-form ...`（0,3,0）まで詳細度を上げる。
   !important は使わない。

   出力されるDOM（入力画面）：
     form.snow-monkey-form
       > div.smf-focus-point            … スクロール位置合わせ用（高さ0）
       > div.sbp-form-traps             … テーマが追加するスパム対策（画面外）
       > div.smf-form                   … 項目（.smf-item）のコンテナ
       > div.smf-action                 … ボタン
       > div.smf-system-error-content-ready （display:none）
       > input[type=hidden] × 3
   ------------------------------------------------------------------ */

.sbp-contact__form-wrap .snow-monkey-form {
	position: relative;
	font-family: var(--font-sans);
	/* --form-error はエラー表示専用に追加した色。詳細は下の .smf-error-messages のコメント参照 */
	--form-error: #C62828;
}

/* スパム対策のダミー項目：display:none は一部のボットに見抜かれるため使わず、
   画面外へ絶対配置する。aria-hidden と tabindex="-1" は inc/forms.php 側で付与。 */
.sbp-form-traps {
	position: absolute;
	top: 0;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 項目の縦積み。<form> 直下ではなく .smf-form に gap を持たせているのは、
   高さ0の .smf-focus-point が flex アイテムになると余計な gap が生まれるため。 */
.sbp-contact__form-wrap .smf-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sbp-contact__form-wrap .smf-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/* 同意チェックのようにラベル列を持たない項目（isDisplayLabelColumn:false）は
   コントロールだけの1段構成になる。 */
.sbp-contact__form-wrap .smf-item--divider {
	gap: 0;
}

/* ラベル。<label>（縦積み）の中に <span>（横並び）という入れ子で、
   すべて flex にしてラベル行の高さ 24.5px を出す。 */
.sbp-contact__form-wrap .smf-item__col--label,
.sbp-contact__form-wrap .smf-item__label,
.sbp-contact__form-wrap .smf-item__label > label {
	display: flex;
	min-width: 0;
}

.sbp-contact__form-wrap .smf-item__label__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: var(--fs-min-body);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-body);
	color: var(--text-heading);
}

/* 同意チェックのラベル内に差し込むプライバシーポリシーへのリンク
   （inc/forms.php の sbp_forms_link_consent_label）。
   フォーム内の注記と同じトーンにし、新しい色トークンは足さない。 */
.sbp-consent-policy {
	color: var(--text-body);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ホバー／フォーカス時はリンクであることが分かるようにブランド色へ寄せる。
   下線は常時引いたままにする。 */
.sbp-consent-policy:hover,
.sbp-consent-policy:focus-visible {
	color: var(--green-800);
	text-decoration-thickness: 2px;
}

/* 必須バッジ。Snow Monkey Forms 側ではフォーム投稿のラベル内
   <span class="sbp-required"> で持つ。 */
.sbp-required {
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	background: var(--gold-500);
	color: var(--ink-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.sbp-contact__form-wrap .smf-item__col--controls,
.sbp-contact__form-wrap .smf-item__controls,
.sbp-contact__form-wrap .smf-placeholder,
.sbp-contact__form-wrap .smf-text-control,
.sbp-contact__form-wrap .smf-textarea-control {
	display: block;
	min-width: 0;
}

/* 入力欄（text / tel / email / textarea）
   プラグイン既定の box-shadow（inset の薄い影）は使わないので消す。 */
.sbp-contact__form-wrap .smf-form .smf-text-control__control,
.sbp-contact__form-wrap .smf-form .smf-textarea-control__control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-snug);
	color: var(--text-body);
	background-color: var(--white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: none;
	outline: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	resize: none;
}

.sbp-contact__form-wrap .smf-form .smf-textarea-control__control {
	display: block;
	resize: vertical;
}

/* セレクトはネイティブの矢印で表示する。
   プラグインは appearance:none ＋ 独自トグル（.smf-select-control__toggle）で
   矢印を描いているため、ネイティブ描画に戻したうえでトグルを隠す。 */
.sbp-contact__form-wrap .smf-form .smf-select-control {
	position: relative;
	display: block;
	min-width: 0;
}

.sbp-contact__form-wrap .smf-form .smf-select-control__toggle {
	display: none;
}

.sbp-contact__form-wrap .smf-form .smf-select-control__control {
	-webkit-appearance: auto;
	appearance: auto;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	color: var(--ink-700);
	background-color: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: none;
	outline: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sbp-contact__form-wrap .smf-form .smf-text-control__control:focus,
.sbp-contact__form-wrap .smf-form .smf-textarea-control__control:focus,
.sbp-contact__form-wrap .smf-form .smf-select-control__control:focus {
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px var(--gold-100);
}

/* プレースホルダの色はブラウザ既定（rgb(117,117,117)）のまま。指定しない。 */

/* 同意チェックボックス。
   プラグインは appearance:none で独自のチェック（青 #3a87fd）を描いているが、
   ネイティブのチェックボックス＋accent-color に戻す。 */
.sbp-contact__form-wrap .smf-checkboxes-control__control {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbp-contact__form-wrap .smf-label {
	display: block;
}

.sbp-contact__form-wrap .smf-form .smf-checkbox-control {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.sbp-contact__form-wrap .smf-form .smf-checkbox-control__control {
	flex: 0 0 auto;
	-webkit-appearance: auto;
	appearance: auto;
	width: 18px;
	height: 18px;
	/* ネイティブのチェックボックスのブラウザ既定マージンと同値
	   （Chrome の UA スタイル 3px 3px 3px 4px） */
	margin: 3px 3px 3px 4px;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	accent-color: var(--gold-500);
	cursor: pointer;
}

.sbp-contact__form-wrap .smf-form .smf-checkbox-control__control:checked {
	background-color: transparent;
	border-color: transparent;
}

.sbp-contact__form-wrap .smf-form .smf-checkbox-control__control::before,
.sbp-contact__form-wrap .smf-form .smf-checkbox-control__control:checked::before {
	content: none;
	display: none;
}

.sbp-contact__form-wrap .smf-checkbox-control__label {
	font-size: var(--fs-min-body);
	color: var(--ink-700);
}

/* ボタン領域。入力画面は1つ（送信する）、確認画面は2つ（戻る／送信する）。
   ボタンは data-action 属性で見分けられる（App/Model/Meta.php the_meta_button）。 */
.sbp-contact__form-wrap .smf-action {
	display: flex;
	gap: 16px;
	margin-top: 20px;
}

.sbp-contact__form-wrap .smf-action:empty {
	margin-top: 0;
}

.sbp-contact__form-wrap .smf-action .smf-button-control {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.sbp-contact__form-wrap .smf-action .smf-button-control + .smf-button-control {
	margin-left: 0;
}

/* 確認画面はボタンが2つ（1つ目＝戻る／2つ目＝送信する）。
   Snow Monkey Forms は wrapper 側に修飾クラスを出さないため、構造で見分ける。 */
.sbp-contact__form-wrap .smf-action .smf-button-control:first-of-type:not(:last-of-type) {
	flex: 0 1 34%;
}

/* 高さ 65.75px の内訳：
   padding 20px×2 ＋ border 1px×2（transparent）＋ 文字 19px × line-height 1.25 = 23.75px */
.sbp-contact__form-wrap .smf-action .smf-button-control__control {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 38px;
	font-family: var(--font-sans);
	font-size: 19px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	letter-spacing: var(--ls-body);
	white-space: nowrap;
	text-align: center;
	color: var(--text-on-accent);
	background-color: var(--cta-phone-bg);
	background-image: none;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-cta);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}

.sbp-contact__form-wrap .smf-action .smf-button-control__control:hover {
	background-color: var(--cta-phone-bg-hover);
}

.sbp-contact__form-wrap .smf-action .smf-button-control__control[disabled] {
	opacity: 0.6;
	cursor: default;
	color: var(--text-on-accent);
}

/* 「戻る」は副次操作。塗りは外し、枠線のみにして送信ボタンと差をつける。 */
.sbp-contact__form-wrap .smf-action .smf-button-control__control[data-action="back"] {
	color: var(--ink-700);
	background-color: var(--white);
	border: 1px solid var(--border-soft);
	box-shadow: none;
	padding-right: 20px;
	padding-left: 20px;
	font-size: var(--fs-min-body);
}

.sbp-contact__form-wrap .smf-action .smf-button-control__control[data-action="back"]:hover {
	background-color: var(--greige);
}

/* 送信ボタン直下の注記。完了画面・エラー画面では出さない。 */
.sbp-contact__form-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-500);
	text-align: center;
}

.snow-monkey-form[data-screen="complete"] + .sbp-contact__form-note,
.snow-monkey-form[data-screen="systemerror"] + .sbp-contact__form-note {
	display: none;
}

/* 確認画面：入力値をテキストで表示する。素のままにならないよう枠を当てる。 */
.sbp-contact__form-wrap .snow-monkey-form[data-screen="confirm"] .smf-placeholder {
	box-sizing: border-box;
	min-height: 57px;
	padding: 14px 16px;
	font-size: var(--fs-body);
	line-height: var(--lh-snug);
	color: var(--ink-900);
	background: var(--cream);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	word-break: break-word;
	/* ご相談内容（textarea）に入力された改行を確認画面でも保つ */
	white-space: pre-wrap;
}

/* セレクト・チェックボックスの確認表示は
   <div data-validations>改行＋タブ＋値</div> という形で出力されるため、
   pre-wrap のままだと整形用の改行・タブがそのまま余白として見えてしまう。
   ラッパのボックスを消し、その中だけ空白を詰める。 */
.sbp-contact__form-wrap .snow-monkey-form[data-screen="confirm"] .smf-placeholder > div[data-validations] {
	display: contents;
	white-space: normal;
}

/* 完了画面 */
.sbp-contact__form-wrap .smf-complete-content {
	padding: 8px 0;
	font-size: var(--fs-min-body);
	line-height: var(--lh-body);
	color: var(--ink-700);
}

.sbp-contact__form-wrap .smf-complete-content h3 {
	margin: 0 0 12px;
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	font-weight: var(--fw-serif);
	line-height: 1.5;
	color: var(--ink-900);
}

.sbp-contact__form-wrap .smf-complete-content p {
	margin: 0 0 12px;
}

.sbp-contact__form-wrap .smf-complete-content > *:last-child {
	margin-bottom: 0;
}

/* エラー表示。
   --form-error はエラー文言専用に追加した色（既存トークンに、白背景でコントラスト比AA
   4.5:1 を満たす赤が無いため。--red-600 #E8382A は白背景で 4.17:1 と不足）。
   ページの配色として使うものではなく、注意喚起テキストと不正フィールドの枠にのみ使う。 */
.sbp-contact__form-wrap .smf-error-messages {
	margin-top: 8px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.7;
	color: var(--form-error);
}

.sbp-contact__form-wrap .smf-form [data-invalid="1"] {
	border-color: var(--form-error);
	background-color: #FFF6F6;
}

/* チェックボックス群は入力欄と違って枠が無いので、[data-invalid] の色付けは効かせず
   エラーメッセージだけで示す（プラグインは .smf-checkboxes-control__control に付与する）。 */
.sbp-contact__form-wrap .smf-form .smf-checkboxes-control[data-invalid="1"],
.sbp-contact__form-wrap .smf-form .smf-checkboxes-control__control[data-invalid="1"],
.sbp-contact__form-wrap .smf-form .smf-checkbox-control__control[data-invalid="1"] {
	background-color: transparent;
	border: none;
}

.sbp-contact__form-wrap .smf-system-error-content {
	padding: 16px 18px;
	font-size: var(--fs-min-body);
	line-height: var(--lh-body);
	color: var(--form-error);
	background: #FFF6F6;
	border: 1px solid var(--form-error);
	border-radius: var(--radius);
}

/* 狭い幅では「送信する」ボタンの左右パディング（38px）だけだと窮屈になるため詰める。
   高さ・書体、フォーム外枠の padding:36px は据え置き。 */
@media (max-width: 480px) {
	.sbp-contact__form-wrap .smf-action .smf-button-control__control {
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* ── FOOTER ──────────────────────────────────────────────── */
.sbp-footer {
	padding: 48px clamp(20px, 4vw, 48px) 32px;
	background: #083A21;
	color: rgba(255, 255, 255, 0.6);
	border-top: 3px solid var(--gold-500);
}

.sbp-footer__inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sbp-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
}

.sbp-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sbp-footer-brandmark {
	display: block;
	height: 30px;
	width: auto;
	aspect-ratio: 5415 / 4968;
	flex: 0 0 auto;
}

.sbp-footer-logo-plate {
	background: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	display: inline-flex;
	align-items: center;
}

.sbp-footer-logo {
	display: block;
	height: 26px;
	width: auto;
	aspect-ratio: 7513 / 1020;
}

.sbp-footer-brandmark img,
.sbp-footer-logo img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.sbp-footer-nav {
	display: flex;
	gap: 28px;
	font-size: var(--fs-min-body);
	font-weight: 900;
}

.sbp-footer-nav a {
	color: rgba(255, 255, 255, 0.72);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.sbp-footer__tel {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-num);
	font-size: 20px;
	font-weight: 900;
	color: var(--gold-400);
}

.sbp-footer__tel-icon {
	display: inline-flex;
}

.sbp-footer__divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
}

.sbp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
}

/* 住所の対向に置く「プライバシーポリシー＋コピーライト」。
   ポリシーが未公開のときはリンク自体が出力されずコピーライトだけになる。 */
.sbp-footer__legal {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* 色はフッターナビのリンクと同じトーン（新しい色トークンは足さない）。 */
.sbp-footer__policy {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── フローティングCTAバー / トップへ戻る ────────────────── */
/* 2026-08-25：和泉様のご依頼により電話ボタンを廃止し、「無料相談フォームへ」1つだけの構成に変更。
   2つ並べる前提だった gap（1pxの区切り線）と区切り線用の背景は不要になったため外した。
   配色は黄色地＋紺文字（既存トークン --gold-500 / --text-on-accent。ヒーロー等のCTAと同じ組み合わせ）。
   高さは従来どおり54pxを保つ
   （body の padding-bottom:76px と .sbp-page の calc(100svh - 76px) がこの高さを前提にしているため）。
   最初は隠しておき、100px スクロールした時点で出現する（JS の setupFloatBar）。
   出方・消え方は .sbp-scrolltop と同じ値に揃えている。 */
.sbp-float-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--gold-500);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.sbp-float-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ボタンは1つなので flex:1 で親の幅いっぱいに広がる。
   左右のパディングは2つ並べていた頃の 8px から広げ、狭い端末でも
   アイコンとラベルが端に寄りすぎないようにする。 */
.sbp-float-bar__item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px;
	font-weight: 900;
	font-size: 15px;
}

/* 黄色地に紺文字。アイコンは stroke="currentColor" なので color がそのまま効く。 */
.sbp-float-bar__item--form {
	background: var(--gold-500);
	color: var(--text-on-accent);
}

.sbp-scrolltop {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 55;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--green-900);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(10, 61, 130, 0.32);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.sbp-scrolltop:hover {
	background: var(--green-700);
}

.sbp-scrolltop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.sbp-scrolltop__icon {
	display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
	.sbp-scrolltop {
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}
	.sbp-scrolltop.is-visible {
		transition: opacity 0.25s ease;
	}
	.sbp-float-bar {
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}
	.sbp-float-bar.is-visible {
		transition: opacity 0.25s ease;
	}
}

/* ── SectionHeading ──────────────────────────────────────── */
.sbp-heading {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sbp-heading--center {
	align-items: center;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.sbp-heading--left {
	align-items: flex-start;
	text-align: left;
	max-width: none;
	margin: 0;
}

.sbp-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 900;
	letter-spacing: var(--ls-label);
	color: var(--gold-600);
	text-transform: uppercase;
}

.sbp-heading__rule {
	width: 28px;
	height: 2px;
	background: var(--gold-500);
}

.sbp-heading__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: var(--fw-serif-hi);
	/* スマホで見出しが大きくなりすぎず、意図しない位置で自動改行されないよう、
	   ブレークポイントごとの固定値ではなく clamp() でビューポート幅に連続追従させる。
	   計算式・下限・上限は SUPPORT 見出し（.sbp-sec--support .sbp-heading__title）と同一。
	   8vw - 4px が上限 var(--fs-h1)=48px に達するのは 650px 以上のため、
	   タブレット（768px）・PC（1024/1440px）では 48px のまま。 */
	font-size: clamp(20px, calc(8vw - 4px), var(--fs-h1));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-heading);
	color: var(--text-heading, #1B2233);
	text-wrap: balance;
}

/* 見出しの「意味のまとまり」。inline-block（＝行内で分割されない箱）にすることで、
   1行に収まらない幅ではまとまりの境界だけで改行し、まとまりの内部では改行しない。
   幅が足りているPC・タブレットでは1行のまま。 */
.sbp-heading__title .sbp-heading__nb {
	display: inline-block;
}

.sbp-heading__title--on-dark {
	color: #fff;
	-webkit-text-stroke: 1.5px #04270F;
	paint-order: stroke fill;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Button ──────────────────────────────────────────────── */
.sbp-btn {
	display: inline-flex;
	width: auto;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 38px;
	font-family: var(--font-sans);
	font-size: 19px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-body);
	line-height: 1.2;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
	opacity: 1;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
	white-space: nowrap;
}

.sbp-btn--phone {
	background: var(--cta-phone-bg);
	color: var(--text-on-accent);
	border: 1px solid transparent;
	box-shadow: var(--shadow-cta);
}

.sbp-btn--phone:hover {
	color: var(--text-on-accent);
}

.sbp-btn--full {
	display: flex;
	width: 100%;
}

.sbp-btn__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
}

/* ── 背景の樹木モチーフ ─────────────────────────────────── */
.sbp-nature-bg {
	position: relative;
	z-index: 0;
}

.sbp-nature-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.22;
	filter: grayscale(1) brightness(1.35) contrast(0.92);
	background-repeat: no-repeat;
	background-image: url('../img/tree-solo.webp');
	background-size: clamp(215px, 24vw, 300px) auto;
	background-position: right -20px bottom -4px;
}

.sbp-nature-bg--b::before {
	opacity: 0.17;
	transform: scaleX(-1);
}

.sbp-nature-bg.sbp-tree-sz-xs::before {
	background-size: clamp(230px, 25vw, 320px) auto;
	background-position: right -12px bottom 0;
}

.sbp-nature-bg.sbp-tree-sz-md::before {
	background-size: clamp(290px, 32vw, 400px) auto;
	background-position: right -22px bottom -6px;
}

.sbp-nature-bg.sbp-tree-sz-lg::before {
	background-size: clamp(350px, 40vw, 480px) auto;
	background-position: right -32px bottom -10px;
}

.sbp-nature-bg.sbp-tree-sz-xl::before {
	background-size: clamp(410px, 48vw, 560px) auto;
	background-position: right -42px bottom -14px;
}

/* ── 下層ページ共通（page.php / single.php / archive.php / 404.php） ──
   トップページの意匠（--cream の背景／.sbp-nature-bg の樹木モチーフ／
   --rule-gold のゴールド罫線）を流用してトーンを統一する。
   新しい色・影・角丸トークンは追加していない。 */

/* ページヘッダー（タイトル部分）
   帯の中には大見出しのみを置き、上下の余白を揃えて間延びしないようにしている。 */
.sbp-page-head {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 4.5vw, 52px) clamp(20px, 4vw, 48px);
	background: var(--cream);
	border-bottom: var(--rule-gold);
}

.sbp-page-head__inner {
	gap: 18px;
}

/* 帯の直下に置くパンくずの器。左右パディングは .sbp-sec と同値にし、
   中の .sbp-inner--narrow で本文と同じ左端に揃える。
   ゴールドの罫線（.sbp-page-head の border-bottom）とパンくずが詰まらないよう、
   上下に余白を取る。 */
.sbp-page-bc {
	padding: 14px clamp(20px, 4vw, 48px) 0;
}

.sbp-page-head__heading {
	gap: 14px;
}

/* 見出しはヒーロー（--fs-display）やトップのセクション見出し（--fs-h1）より一段小さくし、
   下層ページとして適切な重みにする。 */
.sbp-page-head__title {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.35;
}

.sbp-page-head__meta {
	margin-top: 2px;
}

/* 下層ページのヘッダー内だけ、日付とカテゴリーバッジを一段大きくする。
   トップページのお知らせ一覧（.sbp-news-list 内）は 14px / 12.5px のまま。 */
.sbp-page-head__meta .sbp-news-date {
	font-size: var(--fs-sm);
}

.sbp-page-head__meta .sbp-news-badge {
	font-size: 14px;
	padding: 5px 15px;
}

/* パンくず。階層は inc/seo.php の BreadcrumbList（ホーム → 現在のページ）と一致させる。 */
.sbp-breadcrumb {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-body);
	color: var(--text-muted);
}

.sbp-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbp-breadcrumb__item + .sbp-breadcrumb__item::before {
	content: "\203A";
	margin-right: 8px;
	color: var(--ink-300);
}

.sbp-breadcrumb__item a {
	color: var(--text-muted);
}

.sbp-breadcrumb__item a:hover {
	color: var(--green-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sbp-breadcrumb__item[aria-current="page"] {
	color: var(--text-heading);
	font-weight: var(--fw-bold);
}

/* 本文ブロック。トップのセクション（.sbp-sec）より上下の余白を詰め、
   ページヘッダーと地続きに見えるようにする。 */
.sbp-lower__body {
	padding-top: clamp(44px, 5.5vw, 76px);
	padding-bottom: clamp(60px, 7vw, 100px);
}

/* ── 下層ページの本文タイポグラフィ ──────────────────────
   the_content() が出力する要素にサイトの書体・行間・余白を当てる。
   行長は .sbp-inner--narrow（max-width 740px）で上限を取っており、
   本文18pxで1行あたり全角約40字に収まる。 */
.sbp-entry__body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	color: var(--ink-700);
}

.sbp-entry__body > *:first-child {
	margin-top: 0;
}

.sbp-entry__body > *:last-child {
	margin-bottom: 0;
}

.sbp-entry__body p {
	margin: 0 0 1.6em;
}

.sbp-entry__body h2 {
	margin: 2.4em 0 0.9em;
	padding-left: 14px;
	border-left: 4px solid var(--gold-500);
	font-family: var(--font-serif);
	font-weight: var(--fw-serif-hi);
	font-size: var(--fs-h3);
	line-height: 1.5;
	letter-spacing: var(--ls-heading);
	color: var(--text-heading);
}

.sbp-entry__body h3 {
	margin: 2em 0 0.7em;
	font-family: var(--font-serif);
	font-weight: var(--fw-serif);
	font-size: var(--fs-lead);
	line-height: 1.6;
	letter-spacing: var(--ls-heading);
	color: var(--text-heading);
}

.sbp-entry__body h4 {
	margin: 1.8em 0 0.6em;
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--text-heading);
}

.sbp-entry__body ul,
.sbp-entry__body ol {
	margin: 0 0 1.6em;
}

.sbp-entry__body li {
	margin-bottom: 0.6em;
}

.sbp-entry__body li:last-child {
	margin-bottom: 0;
}

.sbp-entry__body li > ul,
.sbp-entry__body li > ol {
	margin: 0.6em 0 0;
}

/* 箇条書きのマーカーはトップのアクセント色（ゴールド）に合わせた小さな丸 */
.sbp-entry__body ul {
	list-style: none;
	padding-left: 0;
}

.sbp-entry__body ul > li {
	position: relative;
	padding-left: 1.35em;
}

.sbp-entry__body ul > li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: calc(0.95em - 3px);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-600);
}

.sbp-entry__body ol {
	padding-left: 1.6em;
}

.sbp-entry__body ol > li::marker {
	color: var(--gold-700);
	font-weight: var(--fw-bold);
}

.sbp-entry__body strong {
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.sbp-entry__body a {
	color: var(--green-800);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sbp-entry__body a:hover {
	color: var(--green-600);
}

.sbp-entry__body blockquote {
	margin: 0 0 1.6em;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--border-strong);
	color: var(--text-muted);
}

.sbp-entry__body hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

.sbp-entry__body figure {
	margin: 0 0 1.6em;
}

/* 横に長い表はブロックごと横スクロールさせる（レイアウトを押し広げない） */
.sbp-entry__body .wp-block-table {
	overflow-x: auto;
}

.sbp-entry__body table {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
	font-size: var(--fs-min-body);
}

.sbp-entry__body th,
.sbp-entry__body td {
	padding: 12px 14px;
	border: 1px solid var(--rule);
	line-height: var(--lh-snug);
	text-align: left;
	vertical-align: top;
}

.sbp-entry__body th {
	background: var(--cream);
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.sbp-entry__back {
	margin: clamp(36px, 4.5vw, 52px) 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.sbp-entry__back a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sbp-empty {
	font-size: var(--fs-min-body);
	line-height: 1.9;
	color: var(--ink-500);
}

/* ── レスポンシブ ─────────────────────────────────────────── */
@media (max-width: 900px) {
	.sbp-nav {
		display: none;
	}

	.sbp-hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sbp-mobile-nav {
		display: flex;
	}

	.sbp-2col,
	.sbp-2col-rev {
		grid-template-columns: 1fr;
	}

	.sbp-philosophy-grid {
		grid-template-columns: 1fr;
	}

	.sbp-hero-stats {
		flex-direction: column;
	}

	.sbp-reason-row {
		grid-template-columns: 1fr;
	}

	.sbp-reason-row.rev > *:first-child {
		order: 1;
	}

	.sbp-reason-row.rev > *:last-child {
		order: 2;
	}

	.sbp-tile-grid {
		grid-template-columns: 1fr;
	}

	.sbp-thumb-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.sbp-flow-track {
		flex-direction: column;
	}

	.sbp-flow-arrow {
		width: auto;
		padding: 2px 0;
		transform: rotate(90deg);
	}

	.sbp-flow-step {
		transform: none;
	}

	/* フッターナビは横一列だと項目幅が足りず単語途中で折り返すため 2×2 グリッドに組み替える */
	.sbp-footer-nav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 20px;
		width: 100%;
		justify-items: start;
	}

	.sbp-footer-nav a {
		white-space: nowrap;
	}

	.sbp-rep-dogmark {
		width: 60px;
		height: 60px;
		margin: 4px 2px 0 0;
		opacity: 0.8;
	}

	/* 縦積みでは上端揃えの意味がないため、明示配置を解除して
	   DOM順（写真 → 見出し → 本文）のまま1カラムに流す。
	   写真と見出しの間隔は従来どおり64px。 */
	.sbp-rep__figure,
	.sbp-rep__head,
	.sbp-rep__body {
		grid-column: auto;
		grid-row: auto;
	}

	.sbp-rep__figure {
		margin-bottom: 64px;
	}
}

@media (max-width: 780px) {
	.sbp-phone-header,
	.sbp-header-cta {
		display: none;
	}

	.sbp-float-bar {
		display: flex;
	}

	body {
		padding-bottom: 76px;
	}

	/* sticky footer のモバイル調整。
	   body の padding-bottom:76px は #sbp-page の外側に付くため、
	   #sbp-page を 100svh のままにすると 文書全体が 100svh+76px になり、
	   フッターが追従バー（.sbp-float-bar）の裏に隠れてスクロールが発生する。
	   バーの高さ分を引いて、フッターの下端がバーのすぐ上に来るようにする。 */
	.sbp-page {
		min-height: calc(100vh - 76px);
		min-height: calc(100svh - 76px);
	}

	.sbp-scrolltop {
		right: 16px;
		bottom: 92px;
		width: 44px;
		height: 44px;
	}

	.sbp-br-desktop-only {
		display: none;
	}
}

@media (max-width: 600px) {
	.sbp-hero-eyebrow {
		justify-content: center;
	}

	.sbp-hero-headline {
		text-align: center;
	}

	.sbp-hero-dassu {
		font-size: clamp(27px, 10.2vw, 74px);
	}

	.sbp-hero-honbun {
		font-size: clamp(25px, 9.5vw, 68px);
	}

	.sbp-nature-bg::before {
		background-size: clamp(170px, 54vw, 230px) auto;
		background-position: right -14px bottom 0;
		opacity: 0.18;
	}

	.sbp-nature-bg--b::before {
		opacity: 0.14;
	}

	.sbp-nature-bg.sbp-tree-sz-xs::before {
		background-size: clamp(150px, 52vw, 205px) auto;
		background-position: right -8px bottom 0;
	}

	.sbp-nature-bg.sbp-tree-sz-md::before {
		background-size: clamp(180px, 60vw, 245px) auto;
		background-position: right -10px bottom 0;
	}

	.sbp-nature-bg.sbp-tree-sz-lg::before {
		background-size: clamp(205px, 68vw, 275px) auto;
		background-position: right -12px bottom 0;
	}

	.sbp-nature-bg.sbp-tree-sz-xl::before {
		background-size: clamp(225px, 74vw, 300px) auto;
		background-position: right -14px bottom 0;
		opacity: 0.16;
	}
}

@media (max-width: 480px) {
	.sbp-header-brand {
		gap: 6px;
	}

	.sbp-header-brandmark {
		height: 26px;
	}

	.sbp-header-logo {
		height: 24px;
	}
}