/*
 * Monerisu Theme グローバルCSS
 *
 * theme.json で表現できないもの（アクセシビリティ・レスポンシブ・装飾・
 * ブロックの組み合わせに依存するレイアウト）だけを記述する。
 * 配色・タイプスケール・余白トークンは theme.json 側が正本であり、ここでは
 * 必ず `--wp--preset--*` を経由して参照する。**新しいブランド色を定義しない。**
 *
 * ブランド基準：モカブラウン #978075 ／ クリームイエロー #F9D7A1 ／
 * アイボリー #FFFCF7 ／ ダークブラウン #3F332D の4色のみ。
 */

/* ==========================================================================
   0. 基本トークン（既存4色から導出した不透明度違いのみ。新色ではない）
   ========================================================================== */

/*
 * 🔴 全要素を border-box にする。**横幅超過の根本原因だった。**
 *
 * WordPressコアもブロックライブラリも `box-sizing` を全体指定しないため、
 * 既定の content-box のままだと `width: 100%` を持つ要素に padding を足した瞬間
 * 「100% ＋ padding」の幅になり、ビューポートを超える。
 * `main` 自身が `width:100%` ＋ 左右 padding だったため、**全ページで発生**していた。
 *
 * `overflow-x: clip` は超過を隠すだけで原因を消さない（切れた分は読めないままになる）。
 * ここを直すことが唯一の正しい修正であり、clip はあくまで最後の保険として残す。
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* 罫線・カード枠。ダークブラウンを薄めたもの */
	--monerisu-hairline: rgba(63, 51, 45, 0.14);
	--monerisu-hairline-strong: rgba(63, 51, 45, 0.28);
	/* 面の重なりを示す極薄のモカ */
	--monerisu-surface: rgba(151, 128, 117, 0.06);
	--monerisu-surface-warm: rgba(249, 215, 161, 0.28);
	/* 影。色付きの影にしてブランドのあたたかさを保つ */
	--monerisu-shadow: 0 1px 2px rgba(63, 51, 45, 0.04), 0 8px 24px rgba(63, 51, 45, 0.06);
	--monerisu-radius: 14px;
	--monerisu-radius-lg: 22px;
	/* 画面左右の最小余白。iPhone のノッチ／ホームインジケータを考慮する */
	--monerisu-gutter: clamp(1.125rem, 5vw, 2rem);
	/*
	 * モバイル固定CTAの高さ。バーの min-height と body の下余白が共有する。
	 * 5.5rem から 5rem へ。中のボタンは約56pxで、44〜48pxのタップ目標は
	 * 余裕をもって満たしたまま、Hero の主CTAと固定CTAの間に隙間を作るため。
	 */
	--monerisu-sticky-h: 5rem;
}

/* ==========================================================================
   1. アクセシビリティ（既存実装を維持）
   ========================================================================== */

/* スクリーンリーダー専用テキスト（視覚的に隠すが読み上げ順序・存在は維持する） */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* スキップリンク（キーボード操作でフォーカスした時のみ表示） */
.skip-link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-body);
	left: 0.5rem;
	padding: 0.75rem 1.25rem;
	position: absolute;
	top: -100px;
	transform: translateY(-100%);
	transition: transform 0.2s ease-in-out;
	z-index: 100000;
}

.skip-link:focus {
	top: 0.5rem;
	transform: translateY(0%);
}

/*
 * 本文リンクのホバー表現。
 *
 * ブランドカラーのモカブラウン #978075 は背景 #FFFCF7 に対して 3.62:1 であり、
 * 通常サイズ文字のWCAG AA基準（4.5:1）を満たさないため、リンクのホバー色には使用しない。
 * 色を変えるかわりに下線の強調でホバーを伝える。新しいブランドカラーは追加しない。
 * 本文色 #3F332D は背景に対して 11.9:1 で AAA を満たす。
 */
a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/* キーボードフォーカスの視認性を確保する（WCAG 2.2 AA目標） */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-mocha);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 動きを減らす設定を尊重する（WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* 画像はレスポンシブを既定にする */
img {
	height: auto;
	max-width: 100%;
}

/*
 * `<picture>` は既定が inline のため、そのままだと行ボックスの下に余白が生まれ、
 * figure の高さが画像より数px高くなる。写真をWebP＋JPEGフォールバックで出す都合上
 * すべての写真が picture に包まれるので、ここで block にしておく。
 */
picture {
	display: block;
}

/*
 * 🔴 `overflow-x: clip` は**使わない**。
 *
 * 以前は「最後の砦」として html / body / .alignfull へ入れていたが、これは
 * **超過を隠すだけで直さない**。しかも `scrollWidth` が常に `clientWidth` 以下に
 * なるため、`scrollWidth <= clientWidth` を条件にした自動監査が**素通り**する。
 * 実際にそれで「技術QA全PASSなのに実機では文字が切れている」状態を作ってしまった。
 *
 * 横方向の超過は、隠さずに**原因側（box-sizing・min-width・折り返し）で**直す。
 * 万一の回帰は横スクロールとして表に出るほうが、気づけるだけ望ましい。
 */

/*
 * iOS Safari は縦横の切り替えや一部のレイアウトで本文を自動拡大することがある。
 * 拡大されるとエミュレータでは再現しない実機だけの折り返し崩れ・はみ出しが起きるため、
 * 明示的に抑止する（ユーザーによるピンチズームは妨げない）。
 */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ==========================================================================
   2. 読みやすさと整列の基本方針
   --------------------------------------------------------------------------
   短い見出し・Hero・CTA は中央、長い本文・回答・詳細は左揃えを基本とする。
   長文を機械的に中央揃えにすると、行頭が毎行ずれて日本語は特に読みにくい。
   ========================================================================== */

/* 段落・リスト・表は左揃えを既定にする（明示的に中央指定されたものは除く） */
main :where(p, li, dd, dt, td, th):not(.has-text-align-center):not(.has-text-align-right) {
	text-align: left;
}

/*
 * 中央揃えの段落は「短いリード文」に限る想定なので、行長を抑えて
 * 中心軸のブレを防ぐ。日本語は 24〜30 文字/行が読みやすい。
 */
main p.has-text-align-center {
	margin-inline: auto;
	max-width: 34em;
	text-wrap: pretty;
}

/*
 * 中央揃えのリード文。`<br>` で意図した位置に改行させ、狭い画面でも
 * 「2行の中央揃え」に収める。改行位置を委ねると3〜4行になり軸がぶれるため。
 * 画面が広いときは `<br>` を無効化して1行で見せる。
 */
@media (min-width: 601px) {
	main p.monerisu-lead br {
		display: none;
	}
}

/* 見出しは折り返し位置を最適化し、1文字だけ次行に落ちる状態を避ける */
main :where(h1, h2, h3, h4) {
	text-wrap: balance;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

/* ==========================================================================
   3. ページ全体の左右余白とセクションの縦リズム
   ========================================================================== */

main.wp-block-group {
	padding-left: var(--monerisu-gutter);
	padding-right: var(--monerisu-gutter);
	/* iPhone の横向き時のノッチを避ける */
	padding-left: max(var(--monerisu-gutter), env(safe-area-inset-left));
	padding-right: max(var(--monerisu-gutter), env(safe-area-inset-right));
}

/*
 * 全幅セクションは main の余白を打ち消して端まで届かせ、内側で余白を持つ。
 * `width: auto` を明示するのは、コアが `.alignfull` に与える `width: 100%` を
 * 打ち消さないと「100% ＋ 負マージン」で右へはみ出すため。
 */
main.wp-block-group > .alignfull {
	margin-left: calc(var(--monerisu-gutter) * -1);
	margin-right: calc(var(--monerisu-gutter) * -1);
	padding-left: var(--monerisu-gutter);
	padding-right: var(--monerisu-gutter);
	width: auto;
	max-width: none;
}

/*
 * flex／grid の子は既定で `min-width: auto` となり、中身より縮まない。
 * 長い日本語の見出しや表が入ると、この最小幅がそのまま横幅超過になる。
 */
.wp-block-columns > .wp-block-column,
.wp-block-group.is-layout-flex > *,
.wp-block-buttons > .wp-block-button {
	min-width: 0;
}

/* セクション間の縦リズム。ブロック個別指定が無い場合の既定値 */
main.wp-block-group > .wp-block-group {
	padding-bottom: var(--wp--preset--spacing--lg);
	padding-top: var(--wp--preset--spacing--lg);
}

@media (min-width: 768px) {
	main.wp-block-group > .wp-block-group {
		padding-bottom: var(--wp--preset--spacing--xl);
		padding-top: var(--wp--preset--spacing--xl);
	}
}

/* ==========================================================================
   3b. パンくず（下層ページのみ）
   ========================================================================== */

.monerisu-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	padding-top: var(--wp--preset--spacing--sm);
	/* 本文の左端と揃える。中央揃えにすると現在地がかえって分かりにくい */
	text-align: left;
}

.monerisu-breadcrumb a {
	color: inherit;
}

/*
 * 現在地は薄くするが、薄くしすぎない。
 * 本文色 #3F332D を背景 #FFFCF7 の上で 0.7 まで下げると約 4.49:1 となり
 * WCAG AA（4.5:1）をわずかに割るため 0.8（約 6.1:1）にとどめる。
 */
.monerisu-breadcrumb [aria-current="page"] {
	opacity: 0.8;
}

@media (max-width: 480px) {
	.monerisu-breadcrumb {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   4. セクション見出し（ロゴの植物モチーフを控えめに展開）
   --------------------------------------------------------------------------
   デザイン仕様書 §9「ロゴモチーフを装飾として控えめに展開してよい（主役に
   しない）」に沿い、見出しの左右へ細い枝葉の罫を添える。装飾は擬似要素なので
   スクリーンリーダーには読まれない。
   ========================================================================== */

main h2.has-text-align-center {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--md);
}

main h2.has-text-align-center::before,
main h2.has-text-align-center::after {
	background: linear-gradient(90deg, transparent, var(--monerisu-hairline-strong));
	content: "";
	flex: 0 1 3.5rem;
	height: 1px;
}

main h2.has-text-align-center::after {
	background: linear-gradient(270deg, transparent, var(--monerisu-hairline-strong));
}

@media (max-width: 480px) {
	/* 画面が狭いときは装飾を短くし、見出しの中心軸を優先する */
	main h2.has-text-align-center::before,
	main h2.has-text-align-center::after {
		flex-basis: 1.5rem;
	}
}

/* リード文と見出しの間隔を詰めて「かたまり」として見せる */
main h2.has-text-align-center + p.has-text-align-center {
	margin-top: calc(var(--wp--preset--spacing--sm) * -0.5);
}

/* ==========================================================================
   5. ヘッダー
   ========================================================================== */

.wp-site-blocks > header.wp-block-group {
	border-bottom: 1px solid var(--monerisu-hairline);
	padding-top: max(var(--wp--preset--spacing--sm), env(safe-area-inset-top));
}

/*
 * ブランド表示（正式ロゴSVGの導入までの暫定表現）。
 *
 * 正式ロゴ原本は assets/brand/source/ にあるが、Web用SVGの書き出しには
 * ベクター変換ツールが必要で本環境には無い（docs/CONTENT-GAPS.md G-26）。
 * **AIによるロゴの再生成・トレース・作字は禁止**されているため、ここでは
 * ロゴを模倣せず、サービス種別＋事業所名のテキスト2段組にとどめる。
 * SVG導入時は .monerisu-brand の中身を差し替えるだけで済む構造にしている。
 */
.monerisu-brand {
	gap: 0;
	min-width: 0;
	/* ロゴ差し替え前後でヘッダー高さが跳ねないよう、最低高さを確保する */
	min-height: 2.5rem;
}

/*
 * 正式ロゴ。縦横比は原本によって決まるため高さだけを指定し、幅は auto にする。
 * 比率・形状・色・線幅を CSS で変えない（デザイン仕様書 §7）。
 */
.monerisu-brand__logo-link {
	align-items: center;
	display: inline-flex;
	gap: clamp(0.45rem, 0.8vw, 0.75rem);
	text-decoration: none;
}

.monerisu-logo {
	display: block;
	height: var(--monerisu-logo-h, 2.5rem);
	width: auto;
	max-width: 100%;
	/* ロゴ周辺には十分な余白を確保する（デザイン仕様書 §8） */
	margin: 0.25rem 0;
}

/* iPhone の狭い画面ではヘッダーロゴを一段小さくし、ハンバーガーとの間隔を守る */
@media (max-width: 430px) {
	.monerisu-logo--wordmark {
		height: clamp(1.75rem, 8.5vw, 2.25rem);
	}
}

@media (max-width: 600px) {
	.monerisu-logo--primary {
		height: 3.5rem;
	}
}

.monerisu-brand__eyebrow {
	color: var(--wp--preset--color--text-body);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	line-height: 1.2;
	margin: 0 0 0.15rem;
	opacity: 0.8;
}

header .wp-block-site-title {
	line-height: 1.3;
	margin: 0;
}

header .wp-block-site-title a {
	text-decoration: none;
}

header .wp-block-site-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ナビゲーション */
header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * ナビ項目の間隔を詰める。
 *
 * 実測：ブランド159px ＋ ナビ803px ＋ CTA197px。1240px の画面では
 * ナビに使える幅が821pxしかなく、**わずか18pxの差**で2段に折り返していた。
 * 項目数（7）も文言も変えずに済むよう、まず間隔で吸収する。
 */
header .wp-block-navigation__container {
	gap: 0.9rem;
}

header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

/* ヘッダーCTAは1つに絞る（迷わせない）。文字は小さく、押しやすさは維持する */
.monerisu-cta--header .wp-block-button__link {
	padding: 0.6rem 1.35rem;
	white-space: nowrap;
}

/*
 * 🔴 ヘッダーのブレークポイント（1240px）— **すべて実測で決めた値**
 *
 * 内訳：ブランド 159px ＋ ナビ 803px（7項目）＋ CTA 197px。
 * まず項目間隔を 0.9rem へ詰めて ナビを 803→745px に縮めたが、
 * それでも 1180px（実効1165px）では ナビに使える幅 761px に対し 745px と
 * **差が16pxしかなく2段に折り返した**（ヘッダー高 119px）。
 * 1240px（実効1225px）では 1段・ヘッダー高 85px を確認できたため、ここを境界にする。
 *
 * 1239px 以下：左＝ロゴ／右＝ハンバーガーのみ。下部固定CTAと役割が重複しないよう
 * ヘッダーCTAは出さない。
 *
 * ⚠️ **固定CTAの表示条件も必ず同じ境界に揃える。**
 * 一度 ヘッダー1239px／固定CTA1179px とずらしてしまい、
 * 1180〜1239px に「どちらのCTAも表示されない幅」が生まれた。
 * コアの `overlayMenu: "mobile"` は 600px でオーバーレイを解除してしまうため、
 * **600〜1179px でもオーバーレイ（ハンバーガー）を維持する**よう上書きする。
 *
 * 1179px 以下：左＝ロゴ／右＝ハンバーガー のみ。
 *   下部に固定CTAがあるので、ヘッダーへCTAを重複して置かない。
 * 1180px 以上：ロゴ＋横並びナビ＋CTA を1段で表示。
 */
/*
 * ⚠️ ここは詳細度と `!important` が必要になる。
 *
 * コアのナビゲーションCSSは
 *   @media (min-width: 600px) {
 *     .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block }
 *     .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none }
 *   }
 * を持つ。これは**クラス3つ＝詳細度 0,3,0**で、`header .…:not(.is-menu-open)`
 * （0,2,1）では勝てない。さらにブロックスタイルはテーマCSSより**後に**出力される
 * ことがあり、同詳細度でも順序で負ける。
 * 実測（768px）で「インラインナビとハンバーガーが同時に出てヘッダーが188pxへ肥大」
 * という形で顕在化したため、確実に勝てる形で上書きする。
 */
@media (max-width: 1239px) {
	.wp-site-blocks header .monerisu-cta--header {
		display: none !important;
	}

	/* インライン展開されたナビを隠し、開閉ボタン（ハンバーガー）を出す */
	.wp-site-blocks header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.wp-site-blocks header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* ==========================================================================
   20. Final visual polish: seamless mobile hero and quiet information states
   ========================================================================== */

@media (max-width: 900px) {
	.section-hero .section-hero__image::after {
		background: linear-gradient(
			180deg,
			rgba(255, 253, 249, 0) 0%,
			rgba(255, 253, 249, 0.08) 18%,
			rgba(255, 253, 249, 0.5) 52%,
			rgba(255, 253, 249, 0.9) 78%,
			#fffdf9 100%
		);
		bottom: 0;
		content: "";
		height: 58%;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		z-index: 1;
	}

	.section-hero > .wp-block-group:first-child {
		background: linear-gradient(
			180deg,
			rgba(255, 253, 249, 0) 0%,
			rgba(255, 253, 249, 0.4) 22%,
			#fffdf9 48%,
			#fff7e9 100%
		);
		margin-top: -8rem !important;
	}
}

@media (max-width: 375px) {
	.section-hero > .wp-block-group:first-child {
		margin-top: -6.6rem !important;
	}
}

.monerisu-subpage--journal .wp-block-query-no-results {
	background:
		radial-gradient(circle at 50% 0, rgba(249, 215, 161, 0.26), transparent 9rem),
		var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow-soft);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	text-align: center;
}

.monerisu-journal-empty__mark {
	color: var(--monerisu-brown);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 2.5vw, 1.65rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem;
}

.monerisu-journal-empty__text {
	color: var(--wp--preset--color--text-body);
	line-height: 1.9;
	margin: 0 auto;
	max-width: 31rem;
}

.monerisu-subpage--company .wp-block-table {
	background: var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow-soft);
	overflow: hidden;
}

.monerisu-subpage--company .wp-block-table table {
	border-collapse: collapse;
	margin: 0;
}

.monerisu-subpage--company .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--monerisu-hairline);
	line-height: 1.75;
	padding: 1rem clamp(0.9rem, 2vw, 1.4rem);
	vertical-align: top;
}

.monerisu-subpage--company .wp-block-table tr:last-child td {
	border-bottom: 0;
}

.monerisu-subpage--company .wp-block-table td:first-child {
	background: rgba(249, 215, 161, 0.16);
	color: var(--monerisu-brown-deep);
	font-weight: 700;
	width: 30%;
}

@media (max-width: 767px) {
	.monerisu-subpage--company .wp-block-table td {
		padding: 0.85rem 0.75rem;
	}

	.monerisu-subpage--company .wp-block-table td:first-child {
		width: 32%;
	}
}

/* オーバーレイを開いている間は必ず表示する（上の非表示指定より優先させる） */
.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
	display: flex !important;
}

/* ハンバーガーの開閉ボタンをブランドのトーンに合わせる */
header .wp-block-navigation__responsive-container-open,
header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text-body);
	padding: 0.35rem;
}

/*
 * 展開したメニューの左右余白。**0 にしない。**
 *
 * コアの overlay は左右 padding を持たず、中身は `align-items: flex-end` で
 * 右端に寄せられる。この組み合わせには落とし穴があって、
 * **項目が容器より広いと flex-end は溢れた分を「左」へ押し出す**。
 * 結果、いちばん長い「モネリスワークスとは」の**先頭の文字が画面外へ出て欠ける**。
 *
 * これが手元のChromeで再現しなかったのは、Webフォントを読み込んでおらず
 * （docs/CONTENT-GAPS.md G-20）**端末ごとに実際の文字幅が違う**ため。
 * iOSのフォールバックはデスクトップより横に広く、そこで初めて溢れた。
 * つまり「幅を測って足りるようにする」対処では別の端末で再発する。
 * **項目が容器幅を超えられない構造にして、原因ごと断つ。**
 */
/*
 * 🔴 `env()` には必ず**フォールバックを書く**。
 *
 * 旧実装は `padding-top: max(var(...), env(safe-area-inset-top))` と書いていたが、
 * **フォールバック無しの env() は、その環境変数を持たないブラウザでは
 * 宣言ごと無効**になる（invalid at computed-value time）。
 * その結果このパネルの padding は上下左右すべて **0px** に落ちていた
 * （実測: computed padding = 0px。作者が意図した上余白すら効いていない）。
 * `env(..., 0px)` と書けば、非対応環境では 0 として計算され宣言は生き残る。
 */
/*
 * 🔴 セレクタは `.wp-site-blocks` を足して **0,3,1** にする。
 * コアの `…is-menu-open:not(.disable-default-overlay…)` は**クラス3つ＝0,3,0**で、
 * `header .…is-menu-open`（0,2,1）では**負ける**。しかもコアは padding に
 * `clamp(1rem, var(--wp--style--root--padding-top), 20rem)` を指定しており、
 * この theme では `--wp--style--root--padding-*` が未定義なので clamp ごと無効になり、
 * **padding が 0 に落ちる**。実測でパネルの computed padding は 0px で、
 * 項目が画面の端にぴったり張り付いていた。
 * 上書きするには詳細度でコアを上回る必要がある（この方針はナビの display 指定と同じ）。
 */
.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
	overflow-y: auto;
	padding-bottom: max(var(--wp--preset--spacing--lg, 2rem), env(safe-area-inset-bottom, 0px));
	padding-left: max(var(--wp--preset--spacing--md, 1.25rem), env(safe-area-inset-left, 0px));
	padding-right: max(var(--wp--preset--spacing--md, 1.25rem), env(safe-area-inset-right, 0px));
	padding-top: max(var(--wp--preset--spacing--lg, 2rem), env(safe-area-inset-top, 0px));
}

.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--sm);
	max-width: 100%;
}

/*
 * 右寄せの見た目は保ったまま、項目が容器幅を超えられないようにする。
 * `max-width:100%` があれば、長い項目は溢れずに折り返す。
 * 折り返した2行目も右端でそろうよう text-align も右にする。
 */
.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	max-width: 100%;
	min-width: 0;
}

.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: var(--wp--preset--font-size--large);
	max-width: 100%;
	overflow-wrap: anywhere;
	text-align: right;
}

/* ==========================================================================
   6. ファーストビュー（Hero）
   ========================================================================== */

/*
 * PC は「左：コピー／右：写真」でおおむね 45:55（デザイン仕様書）。
 * flex-basis を 45%+55%=100% にすると gap と padding が加算されて横スクロール
 * するため、縮小を許可し min-width:0 を明示する。
 */
.section-hero > .wp-block-group {
	flex: 1 1 45%;
	min-width: 0;
}

.section-hero .section-hero__image {
	flex: 1 1 55%;
	min-width: 0;
}

.section-hero .section-hero__image img {
	/* 16:9 で書き出した hero-main の比率。予約した高さと実寸を一致させCLSを防ぐ */
	aspect-ratio: 16 / 9;
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
	object-fit: cover;
	width: 100%;
}

/* Hero のキャッチと本文の関係を整える */
.section-hero .section-hero__lead {
	color: var(--wp--preset--color--text-body);
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}

.section-hero h1 {
	margin-bottom: var(--wp--preset--spacing--sm);
}

/*
 * H1 は意味のまとまりごとに改行させる。
 *
 * 日本語は任意の位置で折り返せてしまうため、放っておくと
 * 「就労継続支援B型事業」＋「所」のように**1文字だけ次行に落ちる**。
 * 各まとまりを inline-block にすると、そのまとまりの途中では折り返さない。
 *
 * まとまり自体は最長で「就労継続支援B型事業所」の11文字。
 * 最小フォント 1.625rem（26px）でも約286pxで、375px 画面の本文幅に収まる。
 * SEO上の H1 は引き続き1本のまま（span は見出しの一部）。
 */
.monerisu-h1 span {
	display: inline-block;
}

/*
 * 語のまとまりの間に、行間を崩さない程度の間隔を置く。
 *
 * 🔴 間隔は `margin-left` ではなく **`margin-right`** で入れる。
 *    inline-block が折り返したとき、`margin-left` は**次の行の先頭にも残る**ため、
 *    2行目・3行目だけが 0.4em 字下げされて左端が揃わなくなる
 *    （1440px の実撮影で確認）。行末に付く `margin-right` にはこの副作用がない。
 */
.monerisu-h1 span:not(:last-child) {
	margin-right: 0.4em;
}

/*
 * Hero が縦積みになる幅（1179px以下）では、H1 を確実に3行へ分ける。
 * 横並びのままだとテキスト段（約45%幅）にまとまりが収まらず、
 * inline-block のまま押し出されて 5 行になることを 768px で実測した。
 * ヘッダーのブレークポイントと揃えることで、切り替わり方を1か所に統一する。
 */
@media (max-width: 1239px) {
	.monerisu-h1 span {
		display: block;
	}

	.monerisu-h1 span:not(:last-child) {
		margin-right: 0;
	}
}

/*
 * 320px 級の画面では、最長のまとまり「就労継続支援B型事業所」が入りきらない。
 * 上の注記どおり最小フォント 1.625rem で約286px 必要なのに対し、
 * 320px 画面の本文幅は約284px しかなく、**2px 足りずに「就労継続支/援B型事業所」と
 * 割れる**（320px の実撮影で確認）。フォントを一段だけ落として収める。
 *
 * `white-space: nowrap` は**あえて付けない**。Webフォントを読み込んでいないため
 * 実際の文字幅は端末依存で（G-20）、nowrap にすると幅の広いフォントの端末で
 * 今度は画面外へ溢れる。折り返しを許しておけば、最悪でも見た目が崩れるだけで済む。
 */
@media (max-width: 359px) {
	/*
	 * `!important` が要る。H1 には `has-xx-large-font-size` が付いており、
	 * コアのプリセット指定は `font-size: var(...) !important` で出力されるため、
	 * 詳細度をいくら上げても `!important` 無しでは勝てない。
	 */
	.monerisu-h1.has-xx-large-font-size {
		font-size: 1.5rem !important;
	}
}

/*
 * 下層ページの H1 も、語の途中では折り返させない。
 *
 * `モネリスワークスについて` は 375px で「モネリスワー／クスについて」と割れ、
 * **屋号が2行にまたがる**（REL-2026-004 の実撮影で確認）。日本語は任意位置で
 * 折り返せるため、放置すると必ずこうなる。
 *
 * `.monerisu-h1` と違い、こちらは
 *   - まとまりの間に余白を入れない（日本語なので詰めて並ぶのが正しい）
 *   - 幅が足りるあいだは1行のまま（`display:block` を強制しない）
 * ため、別クラスにしている。
 *
 * 🔴 `white-space: nowrap` が要る。`inline-block` だけだと、まとまりが2つとも
 *    同じ行に載ったうえで**それぞれが内部で折り返し**、
 *    「まずは見／学・体験から」「はじめま／せんか？」のような2段組みになる
 *    （390px の実撮影で確認）。nowrap にすると各まとまりは不可分になり、
 *    入らなければまとまりごと次の行へ落ちる。
 *
 *    まとまりは最長10文字（「見つかりませんでした」）で、最小 375px の本文幅に
 *    収まることを Range audit で毎回検証している。
 *
 * 🔴 `main h2.has-text-align-center` は左右へ罫を出すための **flex コンテナ**
 *    （§4）。そこへまとまりを直接置くと span が flex item になり、1本の flex 行に
 *    並んだまま折り返さずビューポートを突き抜ける（375px で scrollWidth 417px を実測）。
 *    h2 では **まとめ役の span を1つはさんで flex item を1個に保つ**こと。
 *      <h2 class="has-text-align-center"><span class="monerisu-title-phrase">…</span></h2>
 *    h1 は flex ではないので、そのまま h1 へ付けてよい。
 */
.monerisu-title-phrase span {
	display: inline-block;
	white-space: nowrap;
}

.section-hero .section-hero__note {
	color: var(--wp--preset--color--text-body);
	margin-top: var(--wp--preset--spacing--sm);
}

/* ==========================================================================
   7. CTA（相談導線）
   --------------------------------------------------------------------------
   最重要KPIは見学・利用相談。心理的な負担を上げないため、ボタンは**2つまで**。
   3つに増やすとスマホ幅で窮屈になり、どれを押せばよいか分からなくなる。

   2026-08-30（docs/mobile-fix-v1.md）以降の主従関係：
   **LINE＝塗り（主）／電話＝白抜き（副）。** 現行公開サイトに合わせた。
   LINEは電話と並ぶ主要導線であり、**片方だけの箇所を残さない**。
   電話の `tel:` 導線自体は減らさない（電話も引き続き有効な導線）。
   ========================================================================== */

/*
 * メインCTA（is-style-fill）の輪郭。WCAG 2.2 SC 1.4.11（非テキストコントラスト）対応。
 *
 *   ボタン面 #F9D7A1 × ページ背景 #FFFCF7 ＝ 1.34:1（基準 3:1 未満）
 *   ボタン面 #F9D7A1 × クリーム背景セクション ＝ 1:1
 *
 * 新しい色を足さず、本文色 #3F332D の境界線で輪郭を与える：
 *   境界線 #3F332D × ボタン面 #F9D7A1   ＝ 8.86:1
 *   境界線 #3F332D × ページ背景 #FFFCF7 ＝ 11.91:1
 */
.wp-block-button.is-style-fill .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--text-body);
}

/*
 * クリーム背景のセクションでは、塗りボタンの面（#F9D7A1）が背景と**同じ色**になり、
 * 塗りと白抜きが見分けられなくなる（上の注記の 1:1 がまさにこれ）。
 * 実機で「CTA帯にボタンが1つしか無い」と報告された原因はここで、
 * LINEボタンは出力されていたが**電話ボタンと見分けがつかなかった**。
 *
 * 新しい色は足さず、既存のページ背景色（#FFFCF7）を面に使って段差をつくる。
 * 輪郭は 2px #3F332D のままなので SC 1.4.11 は引き続き満たす。
 */
.has-brand-cream-background-color .wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
}

/* 副導線（outline）も同じ輪郭基準を満たす */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--text-body);
	background-color: transparent;
}

.wp-block-button .wp-block-button__link {
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover {
	box-shadow: var(--monerisu-shadow);
	transform: translateY(-1px);
}

.monerisu-cta {
	gap: var(--wp--preset--spacing--sm);
}

/* CTAの下に添える一言。ハードルを下げる役割なので小さく、中央に置く */
.monerisu-cta__note {
	margin-top: var(--wp--preset--spacing--sm);
	text-align: center;
}

/* ==========================================================================
   8. カード（特徴・お仕事紹介・施設）
   ========================================================================== */

.monerisu-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	box-shadow: var(--monerisu-shadow);
	height: 100%;
	overflow: hidden;
	padding: var(--wp--preset--spacing--md);
}

/* 画像つきカードは画像を端まで見せる */
.monerisu-card.is-media {
	padding: 0;
}

.monerisu-card.is-media .wp-block-image {
	margin: 0;
}

.monerisu-card.is-media .wp-block-image img {
	aspect-ratio: 3 / 2;
	border-radius: 0;
	display: block;
	object-fit: cover;
	width: 100%;
}

.monerisu-card.is-media .monerisu-card__body {
	padding: var(--wp--preset--spacing--md);
}

.monerisu-card :where(h3) {
	margin-bottom: 0.5rem;
	margin-top: 0;
}

.monerisu-card :where(p):last-child {
	margin-bottom: 0;
}

/* カラムがカードのとき、高さを揃える */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .monerisu-card {
	display: block;
}

/* 角丸画像の共通表現 */
.wp-block-image.is-style-rounded img {
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
}

/* 見学CTAセクションの写真。CTAの直前に置き「行ってみた自分」を想像しやすくする */
.section-visit__image {
	margin: 0 auto var(--wp--preset--spacing--md);
	max-width: 720px;
}

.section-visit__image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* 幅いっぱいの帯写真 */
.monerisu-band img {
	aspect-ratio: 16 / 9;
	border-radius: var(--monerisu-radius-lg);
	object-fit: cover;
	width: 100%;
}

@media (max-width: 600px) {
	.monerisu-band img {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   9. 1日の流れ（タイムライン）
   ========================================================================== */

.monerisu-timeline {
	list-style: none;
	margin: 0 auto;
	max-width: 32rem;
	padding: 0;
	position: relative;
}

.monerisu-timeline::before {
	background: var(--monerisu-hairline-strong);
	content: "";
	inset-block: 0.75rem;
	left: 4.75rem;
	position: absolute;
	width: 1px;
}

.monerisu-timeline li {
	display: grid;
	gap: 0 var(--wp--preset--spacing--md);
	grid-template-columns: 4rem 1fr;
	padding-bottom: var(--wp--preset--spacing--md);
	position: relative;
}

.monerisu-timeline li:last-child {
	padding-bottom: 0;
}

.monerisu-timeline li::before {
	background: var(--wp--preset--color--brand-cream);
	border: 2px solid var(--wp--preset--color--text-body);
	border-radius: 50%;
	content: "";
	height: 11px;
	left: calc(4.75rem - 5px);
	position: absolute;
	top: 0.6rem;
	width: 11px;
}

.monerisu-timeline .monerisu-timeline__time {
	color: var(--wp--preset--color--text-body);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.monerisu-timeline .monerisu-timeline__body {
	padding-left: var(--wp--preset--spacing--sm);
	/* grid の子は既定で内容幅より縮まない。長い説明文で右へはみ出すのを防ぐ */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

/*
 * 番号付きリストは marker のぶん内側へ寄せる。外に出すと左端がはみ出す。
 *
 * 🔴 マーカーを持たない「レイアウト用リスト」はここから除外する。
 *    この選択子は詳細度 (0,2,1) で、`.monerisu-facts` のような単一クラス (0,1,0)
 *    では上書きできない。除外し忘れると `padding-left: 1.5em` が残り、
 *    grid の背景が左端に帯として見えてしまう（390px の実撮影で確認）。
 *    `!important` を足すのではなく、この除外リストへ追加すること。
 */
main :where(ol, ul):not(.monerisu-timeline):not(.wp-block-navigation):not(.monerisu-facts):not(.monerisu-worries):not(.monerisu-points) {
	padding-left: 1.5em;
	list-style-position: outside;
}

main :where(ol, ul) li {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

@media (max-width: 400px) {
	.monerisu-timeline::before {
		left: 4.1rem;
	}

	.monerisu-timeline li {
		grid-template-columns: 3.4rem 1fr;
	}

	.monerisu-timeline li::before {
		left: calc(4.1rem - 5px);
	}
}

/* ==========================================================================
   10. FAQ（アコーディオン）
   --------------------------------------------------------------------------
   質問は短いので中央でも読めるが、回答は長文になるため必ず左揃えにする。
   ========================================================================== */

/*
 * FAQ は core/details（`.wp-block-details`）で出力される。
 * 独自クラスではなくコアのクラスを対象にすること。
 */
.wp-block-details {
	border-bottom: 1px solid var(--monerisu-hairline);
	padding: var(--wp--preset--spacing--sm) 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	/* 開閉マーク（擬似要素）と重ならない幅を確保する */
	padding-right: 2rem;
	position: relative;
	text-align: left;
	/* 長い質問文が右端で切れないようにする。日本語は任意位置で折り返してよい */
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	min-width: 0;
}

.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker {
	display: none;
	content: "";
}

.wp-block-details summary::after {
	border-bottom: 2px solid var(--wp--preset--color--text-body);
	border-right: 2px solid var(--wp--preset--color--text-body);
	content: "";
	height: 0.5rem;
	position: absolute;
	right: 0.35rem;
	top: 0.55em;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 0.5rem;
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

/* 回答は長文になるため必ず左揃え */
.wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--sm);
	text-align: left;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   11. モバイル固定CTA
   --------------------------------------------------------------------------
   ヘッダーCTAを隠すかわりに、モバイルでは常に相談導線へ手が届く状態にする。
   本文の末尾が隠れないよう、body 側に同じ高さの余白を確保する。
   ========================================================================== */

.monerisu-sticky-cta {
	display: none;
}

@media (max-width: 1239px) {
	.monerisu-sticky-cta {
		background: color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent);
		border-top: 1px solid var(--monerisu-hairline);
		bottom: 0;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		/*
		 * grid ＋ minmax(0, 1fr) にする。flex の `flex: 1 1 50%` は
		 * 子の最小内容幅が効いて 50% を超えることがあり、2列の合計が
		 * ビューポートを超えうるため。minmax(0,…) は縮小を必ず許可する。
		 */
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.5rem;
		left: 0;
		padding: 0.6rem var(--monerisu-gutter);
		padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
		padding-left: max(var(--monerisu-gutter), env(safe-area-inset-left));
		padding-right: max(var(--monerisu-gutter), env(safe-area-inset-right));
		position: fixed;
		right: 0;
		z-index: 40;
	}

	.monerisu-sticky-cta a {
		align-items: center;
		border: 2px solid var(--wp--preset--color--text-body);
		border-radius: 999px;
		display: flex;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		justify-content: center;
		min-height: 48px;
		min-width: 0;
		padding: 0.5rem 0.5rem;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	.monerisu-sticky-cta .is-primary {
		background: var(--wp--preset--color--brand-cream);
	}

	.monerisu-sticky-cta .is-secondary {
		background: var(--wp--preset--color--white);
	}

	/*
	 * 固定CTAの高さぶん、本文の末尾が隠れないようにする。
	 *
	 * 高さは1か所（--monerisu-sticky-h）で決め、バー側の最小高さと
	 * body の下余白の**両方**から参照する。別々の数値で持つと、
	 * ボタンの行送りが変わった瞬間にズレて本文が隠れる
	 * （実測で バー84px に対し余白68px となり16px隠れていた）。
	 */
	.monerisu-sticky-cta {
		min-height: var(--monerisu-sticky-h);
	}

	body {
		padding-bottom: calc(var(--monerisu-sticky-h) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * キーボード操作でフォーカスが移動したとき、対象が固定CTAの下に
	 * 隠れないようにする（WCAG 2.2 SC 2.4.11 目標）。
	 */
	html {
		scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
   12. フッター
   ========================================================================== */

footer.wp-block-group {
	border-top: 1px solid var(--monerisu-hairline);
	/* ヘッダーと同じ左右余白の考え方を適用し、上下の枠として揃える */
	padding-left: max(var(--wp--preset--spacing--md), env(safe-area-inset-left));
	padding-right: max(var(--wp--preset--spacing--md), env(safe-area-inset-right));
}

footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

footer .wp-block-site-title {
	margin-bottom: 0.25rem;
}

.monerisu-footer__grid {
	gap: var(--wp--preset--spacing--lg);
}

.monerisu-footer__brand {
	flex: 1 1 18rem;
	min-width: 0;
}

.monerisu-footer__nav {
	flex: 0 1 auto;
	min-width: 0;
}

.monerisu-footer__heading {
	font-weight: 700;
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

/* フッターのリンク列は左揃えを保つ（中央揃えにすると視線の起点が定まらない） */
.monerisu-footer__nav .wp-block-navigation {
	align-items: flex-start;
}

@media (max-width: 767px) {
	.monerisu-footer__grid {
		gap: var(--wp--preset--spacing--md);
	}

	/* モバイルはリンク列を2列にして縦の長さを抑える */
	.monerisu-footer__nav {
		flex: 1 1 42%;
	}
}

/* ==========================================================================
   13. モバイル最適化（375 / 390 / 430px を主対象）
   ========================================================================== */

/*
 * Hero は 1179px 以下で縦積みにする（ヘッダーの切り替えと同じ幅）。
 * 45%幅のテキスト段に H1 が収まるのは実測で 1180px 以上だった。
 */
@media (max-width: 1239px) {
	.section-hero {
		flex-wrap: wrap !important;
	}

	.section-hero > .wp-block-group,
	.section-hero .section-hero__image {
		flex-basis: 100%;
	}

	/* 写真を先に見せ、「どんな場所か」を最初に伝える */
	.section-hero .section-hero__image {
		order: -1;
	}

	/*
	 * 縦積みHeroは中心軸をそろえる。
	 * 🔴 `main :where(p, li, ...):not(.has-text-align-center)`（0,3,1）が
	 *    本文を左揃えにしているため、`.section-hero .section-hero__lead`（0,2,0）
	 *    では中央にできず、「H1だけ中央・リード文は左」という軸のずれになる。
	 *    同等以上の詳細度で書く。
	 */
	/*
	 * 🔴 `:where()` は中身の詳細度を 0 にする。ここで
	 *    `main .section-hero :where(p.section-hero__lead)` と書くと (0,1,1) にしかならず、
	 *    左揃えを与えている `main :where(p, li, ...):not(...):not(...)`（0,2,1）に
	 *    やはり負ける。**クラスは :where() の外に置く。**
	 */
	.section-hero h1,
	main .section-hero .wp-block-group p {
		text-align: center;
	}

	/* 見出しが中央なので、主CTAも同じ軸に置く */
	.section-hero .monerisu-cta--hero {
		justify-content: center;
	}

	/*
	 * 🔴 縦積みのHeroでは写真の高さが主CTAの位置を決める。
	 *
	 *    42vh のままだと 1024×900 で写真が約378pxになり、主CTAが
	 *    固定CTAの 71px 下へ潜った（767×1024 では 75px）。
	 *    狭い幅（〜430px）では 4:3 の比率のほうが小さいので、この上限は
	 *    実質「幅の広い縦積み（767〜1239px）」にだけ効く。
	 *    写真は object-fit: cover なので、上下がわずかに詰まるだけで
	 *    2人の並びは残る。
	 */
	.section-hero .section-hero__image img {
		max-height: 30vh;
		object-fit: cover;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.section-hero {
		flex-wrap: wrap !important;
		/*
		 * Hero上下の余白は §15-1 の「主CTAを固定CTAより上に収める」規則が持つ。
		 * ここで `!important` を付けていた頃は、幅ごとの微調整が
		 * **一切効かない**（375px で主CTAが固定CTAへ16px潜っていた原因）。
		 */
	}

	/* セクションの縦リズムを一段詰める（余白過多で内容が遠くならないように） */
	main.wp-block-group > .wp-block-group {
		padding-bottom: var(--wp--preset--spacing--md);
		padding-top: var(--wp--preset--spacing--md);
	}

	/*
	 * モバイルは 4:3 のトリミング済み画像（hero-main-sp v2）を出す。
	 * `<picture>` の media と必ず同じ 767px で切り替えること。ずれると
	 * 16:9 の画像を 4:3 の枠に入れて左右を切り落とすことになる。
	 *
	 * **この値が実画像の比率とずれるとCLSになる。** `<img>` の width/height 属性は
	 * 自分の `src`（PC版の16:9）しか説明できないので、アートディレクションで
	 * 差し替えたスマホ画像の比率を保証できるのはこの aspect-ratio だけ。
	 * 画像を差し替えたら必ずここも直す。
	 *
	 * 2026-08-30: 4:5 から 4:3 へ変更（実機で右の人物が切れていたため。
	 * 2人が並んで作業している関係性がこの写真の価値）。
	 *
	 * max-height は解除する。aspect-ratio で確保した高さを max-height が
	 * 上書きすると、実際の描画高さと予約した高さが食い違ってCLSが出るため。
	 */
	.section-hero .section-hero__image img {
		aspect-ratio: 4 / 3;
		max-height: none;
		object-fit: cover;
	}

	.section-hero > .wp-block-group,
	.section-hero .section-hero__image {
		flex-basis: 100%;
	}
}

/*
 * 🔴 4:3 を素直に守れるのは「幅の狭い端末」まで。
 *
 * 481〜767px では 4:3 のまま描くと写真だけで 400〜545px になり、
 * 主CTAが固定CTAの下へ潜る（767×1024 で 75px 潜っていた）。
 * ここだけ高さに上限をかける。`<picture>` の media（767px）は変えないので、
 * 読み込む画像そのものは従来どおり sp 版のままである。
 */
@media (min-width: 481px) and (max-width: 767px) {
	.section-hero .section-hero__image img {
		max-height: 30vh;
	}

	/* モバイルのHeroは「写真 → コピー → CTA」の順に見せる */
	.section-hero .section-hero__image {
		order: -1;
	}

	.section-hero h1,
	.section-hero .section-hero__lead,
	.section-hero .section-hero__note {
		text-align: center;
	}

	/* CTAは縦積み・全幅。押し間違いを防ぐため十分な高さを確保する */
	.monerisu-cta {
		flex-direction: column;
	}

	.monerisu-cta .wp-block-button {
		width: 100%;
	}

	.monerisu-cta .wp-block-button__link {
		display: block;
		min-height: 48px;
		text-align: center;
	}

	/* カラムは縦積み。カード間の余白を確保する */
	.wp-block-columns {
		gap: var(--wp--preset--spacing--md);
	}

}

/* ==========================================================================
   13b. 表（会社概要・工賃）
   --------------------------------------------------------------------------
   横スクロールを要求する設計にしない。table の意味構造は保ったまま、
   375px でも全内容が読めるようにする。
   ========================================================================== */

.wp-block-table {
	/* コアが付ける overflow-x を無効化する。横スクロールで隠さない方針のため */
	overflow-x: visible;
}

.wp-block-table table {
	border-collapse: collapse;
	/* 列幅を内容ではなく指定で決める。長い住所が1列を押し広げるのを防ぐ */
	table-layout: fixed;
	width: 100%;
}

.wp-block-table :where(th, td) {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	padding: 0.7rem 0.6rem;
	vertical-align: top;
	border: 1px solid var(--monerisu-hairline);
}

/* 見出し列は必要最小限に固定し、残りを内容へ回す */
.wp-block-table tbody td:first-child {
	background: var(--monerisu-surface);
	font-weight: 700;
	width: 7.5em;
}

.wp-block-table thead th {
	background: var(--monerisu-surface-warm);
	text-align: left;
}

@media (max-width: 430px) {
	.wp-block-table :where(th, td) {
		font-size: var(--wp--preset--font-size--small);
		padding: 0.6rem 0.45rem;
	}

	.wp-block-table tbody td:first-child {
		width: 5.5em;
	}
}

/* タップ領域の最低サイズ（WCAG 2.2 SC 2.5.8 目標） */
@media (pointer: coarse) {
	.wp-block-navigation a,
	footer a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
}

/* ==========================================================================
   14. Mobile Conversion & Trust v1
   --------------------------------------------------------------------------
   390px を設計中心に置いたコンバージョン用コンポーネント群。
   「PCを作ってから縮める」のではなく、狭い側で成立する形を先に決めている。

   新しいブランド色は足していない。面・罫・影はすべて既存4色から導出した
   トークン（--monerisu-surface / --monerisu-hairline 等）を経由する。
   ========================================================================== */

/*
 * 14-1. 早わかり（Hero直後のFact一覧）
 *
 * スマホは2列固定。3列に詰めると1セルが約100pxになり、
 * 「10:00〜15:00」のような値が必ず折り返して読みにくくなる。
 */
.monerisu-facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--monerisu-hairline);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

.monerisu-facts li {
	background: var(--wp--preset--color--white);
	padding: 1rem 0.9rem;
	text-align: center;
	min-width: 0;
}

.monerisu-facts__label {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.85;
	margin-bottom: 0.25rem;
}

.monerisu-facts__value {
	display: block;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.45;
}

@media (min-width: 768px) {
	.monerisu-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * 14-2. お悩みリスト
 *
 * 本人が「自分のことだ」と気づくための短文。説明を足さない。
 * 印は装飾なので擬似要素にし、読み上げ対象にしない。
 */
.monerisu-worries {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.monerisu-worries li {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	padding: 1rem 1rem 1rem 2.9rem;
	position: relative;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

.monerisu-worries li::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1.4rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cream);
	box-shadow: 0 0 0 3px var(--monerisu-surface-warm);
}

/*
 * 広い画面では2列にする。1列のままだと、20文字程度の短い一文が
 * 700px超の帯の中に置かれ、右側が大きく空いて間延びする
 * （1440px の実撮影で確認）。スマホ用の1列をそのまま引き伸ばさない。
 */
@media (min-width: 768px) {
	.monerisu-worries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

/*
 * 14-3. 特徴リスト（Factベース）
 * 抽象的な「やさしい支援」で終わらせず、確定Factを主役にする。
 */
.monerisu-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.monerisu-points li {
	border-left: 3px solid var(--wp--preset--color--brand-cream);
	padding: 0.35rem 0 0.35rem 1rem;
	min-width: 0;
}

.monerisu-points strong {
	display: block;
	font-size: 1.0625rem;
	margin-bottom: 0.2rem;
}

@media (min-width: 768px) {
	.monerisu-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 2rem;
	}
}

/*
 * 14-4. 働き方カード（通所／在宅）
 *
 * スマホでは工賃を table で見せない。項目と値が横に並ぶ表は
 * 375px では必ず窮屈になるため、カード内の定義リストにする。
 */
.monerisu-ways {
	display: grid;
	gap: 1rem;
}

.monerisu-ways__card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	padding: 1.25rem;
	min-width: 0;
}

.monerisu-ways__card h3 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.monerisu-ways__card dl {
	margin: 0;
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 0.5rem 0.75rem;
}

.monerisu-ways__card dt {
	font-size: 0.875rem;
	opacity: 0.85;
	margin: 0;
}

.monerisu-ways__card dd {
	margin: 0;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * 金額は数字と単位を切り離さない。
 * 320px では「1時間あたり 300」「円〜450円」と割れ、数字と「円」が
 * 別の行に離れていた（実撮影で確認）。金額として読めなくなるため不可。
 */
.monerisu-amount {
	white-space: nowrap;
}

/*
 * さらに狭い画面では「項目 / 値」の2列をやめて縦に積む。
 * dt に 5.5em を割くと、320px では値へ渡る幅が約190pxしか残らず、
 * 「1時間あたり 300円〜450円」が必ず2行に割れる。
 */
@media (max-width: 360px) {
	.monerisu-ways__card dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.monerisu-ways__card dt {
		margin-top: 0.7rem;
	}

	.monerisu-ways__card dt:first-of-type {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.monerisu-ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/*
 * 14-5. セクションの背景リズム
 *
 * 縦に長いスマホページで「いま何番目の話を読んでいるか」を
 * 色の切り替わりで伝える。装飾ではなく現在地の手がかりとして使う。
 */
.section-tint {
	background: var(--monerisu-surface);
}

/* ==========================================================================
   15. Visual Refinement（承認モックアップ方向への寄せ）
   --------------------------------------------------------------------------
   「読みやすいミニマル」から「写真・ブランド・情報が一体化した面」へ。
   新色は足さず、既存4色の面と余白・写真の大きさ・見出しの強さで寄せる。
   ========================================================================== */

/*
 * 15-1. Hero の主CTA
 *
 * 最重要Conversionは見学・体験。Hero では主CTAを1本に絞り、
 * LINE／電話は固定CTAと補助行に逃がす（Heroで導線を3つ並べない）。
 */
.monerisu-cta--hero .wp-block-button__link {
	font-size: 1.0625rem;
	padding-block: 0.9rem;
	padding-inline: 2rem;
}

/*
 * 🔴 Hero の補足文は「固定CTAが無い幅」でだけ Hero に置く。
 *
 * 固定CTAがある幅では、補足文が主CTAの下＝ちょうどバーの位置に来るため、
 * **途中まで見えてバーに切られる**（独立Visual QAが 320/375/390/1024/1180/1239 で確認）。
 * 主CTAの intersection 監査は主CTAしか見ていなかったため素通りしていた。
 *
 * 情報は消さない。固定CTAがある幅では、同じ内容を直後の「早わかり」へ移す
 * （`.monerisu-note--sp`）。どちらか一方だけが必ず表示され、二重にはならない。
 */
.section-hero__note {
	display: none;
}

.monerisu-note--sp {
	display: block;
	margin-top: 1rem;
}

@media (min-width: 1240px) {
	.section-hero__note {
		display: block;
	}

	.monerisu-note--sp {
		display: none;
	}
}

/*
 * Hero 内の LINE／電話は **固定CTAが出ていない幅でだけ**出す。
 *
 * 固定CTAが出ている幅では同じ2つの導線が画面内に二重に並ぶうえ、
 * この行が固定バーの下に潜って occlusion になる（320〜430 で実測 occl=2）。
 * 固定CTAが消える 1240px 以上でのみ、Hero に直接の連絡先を置く。
 */
.monerisu-hero__sub {
	display: none;
	font-size: 0.875rem;
	margin-top: 0.75rem;
	opacity: 0.9;
}

@media (min-width: 1240px) {
	.monerisu-hero__sub {
		display: block;
	}
}

/*
 * スマホでは Hero の主CTAを「固定CTAより上」に収める。
 *
 * 390×844 の実測で、主CTAは 746〜811px、固定CTAは 756px から。
 * **55px 重なって主CTAがほぼ隠れていた。** 固定CTA(88px)を除いた
 * 756px 以内に主CTAの下端が入るよう、Hero内の縦リズムを詰める。
 * 写真は感情的な要になるので縮めず、余白側で調整する。
 */
/*
 * Hero の上下余白は CSS 側で持つ。
 * テンプレート側の inline style（spacing|xl）にしていた頃は、
 * **inline style の詳細度に負けてメディアクエリでの調整が一切効かなかった**。
 * 狭い画面で主CTAを固定CTAより上へ収めるには、ここで幅ごとに変える必要がある。
 */
main.wp-block-group > .section-hero {
	padding-block: var(--wp--preset--spacing--xl);
}

/*
 * 🔴 この範囲は **固定CTAが出ている幅と一致させる**（〜1239px）。
 *    767px までしか詰めていなかったとき、768px では Hero が desktop の
 *    padding（64px）のままで、主CTAが固定CTAへ 40px 潜っていた。
 *    「固定バーがある幅」と「Heroを詰める幅」がずれていると必ずこうなる。
 */
@media (max-width: 1239px) {
	/*
	 * 🔴 `main.wp-block-group > .wp-block-group`（0,2,1）がセクションの縦余白を
	 *    持っているため、`.section-hero`（0,1,0）では上書きできない。
	 *    同じ詳細度で後ろに書く。詳細度を合わせずに値だけ変えても効かない。
	 */
	main.wp-block-group > .section-hero.section-hero {
		padding-top: 0.5rem;
		padding-bottom: 1rem;
	}

	/* 写真と Hero テキストの間隔を詰める（既定では 40px 前後空く） */
	.section-hero > .wp-block-group {
		margin-block: 0;
	}

	.section-hero > .wp-block-group + .wp-block-group {
		margin-top: 0.75rem;
	}

	.section-hero .section-hero__lead {
		margin-block: 0.55rem 0.35rem;
		line-height: 1.5;
	}

	.section-hero h1 {
		margin-block: 0.4rem;
	}

	.section-hero .monerisu-h1 span {
		line-height: 1.45;
	}

	.section-hero__image + * p,
	.section-hero p:not(.section-hero__lead):not(.section-hero__note):not(.monerisu-hero__sub) {
		margin-block: 0.5rem;
	}

	.monerisu-cta--hero {
		margin-top: 0.4rem;
	}
}

/*
 * 最も狭い実機幅では H1 を一段落とす。
 * 320×780 は縦も短く、H1 が3行あると主CTAが固定CTAへ近づきすぎる。
 * 語のまとまり（.monerisu-h1 span）は維持するので、語中では折れない。
 */
@media (max-width: 360px) {
	.section-hero h1 {
		font-size: 1.6875rem;
	}
}

.monerisu-hero__sub a {
	font-weight: 600;
	white-space: nowrap;
}

/*
 * 15-2. 見出しをもう一段はっきりさせる
 * 面（背景）と写真が強くなるぶん、見出しが負けないようにする。
 */
@media (min-width: 768px) {
	main :where(h2) {
		font-size: clamp(1.75rem, 2.2vw, 2.125rem);
	}

	main :where(h3) {
		font-size: clamp(1.25rem, 1.5vw, 1.4rem);
	}
}

/*
 * 15-3. Desktop で写真を大きく使う
 *
 * 1440px で本文が 720px に収まったまま写真まで 720px だと、
 * 左右が大きく空いて間延びする。写真とカード面は wideSize(1200px) を使う。
 * 本文（散文）は読みやすさのため 720px のままにする。
 */
.monerisu-figure-wide img {
	width: 100%;
}

@media (min-width: 1000px) {
	.monerisu-figure-wide img {
		border-radius: var(--monerisu-radius-lg);
	}
}

/*
 * 15-4. 工賃カードの階層
 *
 * 「表をカードに置き換えただけ」に見せない。金額を主役にし、
 * 見出しには面と罫を与えて、カードとして自立させる。
 */
.monerisu-ways__card {
	box-shadow: var(--monerisu-shadow);
}

.monerisu-ways__card h3 {
	border-bottom: 1px solid var(--monerisu-hairline);
	padding-bottom: 0.6rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

/* 通所／在宅を示す小さな印。装飾なので読み上げない */
.monerisu-ways__card h3::before {
	content: "";
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-cream);
	box-shadow: 0 0 0 3px var(--monerisu-surface-warm);
	flex: none;
}

/* 金額は数字を一段大きく見せる */
.monerisu-amount {
	white-space: nowrap;
	font-size: 1.125rem;
	letter-spacing: 0.01em;
}

/*
 * 15-5. 固定CTAの圧迫を避ける
 *
 * bottom padding だけでは足りない。本文側の最後のCTAが固定CTAと
 * 上下に密着すると、同じ導線が二重に見えて圧迫感が出る。
 * 固定CTAが出ている幅では、本文末尾のCTA帯に追加の余白を持たせる。
 */
@media (max-width: 1239px) {
	.section-visit {
		padding-bottom: calc(var(--wp--preset--spacing--xl) + var(--monerisu-sticky-h));
	}
}

/* ==========================================================================
   16. Reference Design System — 2026-08-31
   --------------------------------------------------------------------------
   添付されたPC／スマホ参考デザインを基準に、既存の正式コンテンツと写真を
   「明るい作業室・温かい紙面・小さなカード」の一貫したUIへ統合する。
   ========================================================================== */

:root {
	--monerisu-canvas: #f5eee5;
	--monerisu-paper: #ffffff;
	--monerisu-paper-warm: #fff6e9;
	--monerisu-brown: #978075;
	--monerisu-action: #765b50;
	--monerisu-brown-deep: #3f332d;
	--monerisu-muted: #74645d;
	--monerisu-line: #2e7d32;
	--monerisu-hairline: rgba(151, 128, 117, 0.2);
	--monerisu-hairline-strong: rgba(151, 128, 117, 0.38);
	--monerisu-surface: rgba(249, 215, 161, 0.2);
	--monerisu-surface-warm: rgba(249, 215, 161, 0.4);
	--monerisu-shadow: 0 2px 6px rgba(65, 43, 34, 0.05), 0 14px 36px rgba(65, 43, 34, 0.08);
	--monerisu-shadow-soft: 0 7px 20px rgba(65, 43, 34, 0.07);
	--monerisu-radius-sm: 10px;
	--monerisu-radius: 16px;
	--monerisu-radius-lg: 26px;
	--monerisu-section-space: clamp(2.75rem, 6vw, 5.5rem);
	--monerisu-button-h: 52px;
}

body {
	background: var(--monerisu-canvas);
	color: var(--monerisu-brown-deep);
}

.wp-site-blocks {
	background: var(--wp--preset--color--background);
	min-height: 100vh;
}

@media (min-width: 1280px) {
	body {
		padding: 1.25rem;
	}

	.wp-site-blocks {
		border-radius: 26px;
		box-shadow: 0 8px 34px rgba(65, 43, 34, 0.15);
		margin-inline: auto;
		max-width: 1500px;
		overflow: hidden;
	}
}

/* Header */
.wp-site-blocks > header.wp-block-group {
	background: rgba(255, 253, 249, 0.97) !important;
	border-bottom-color: var(--monerisu-hairline);
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	min-height: 78px;
	padding: 0.7rem clamp(1rem, 2.4vw, 2.25rem) !important;
	position: sticky;
	top: 0;
	z-index: 1000;
}

header .monerisu-logo--wordmark {
	height: clamp(2.35rem, 3.6vw, 3.35rem);
}

header .monerisu-logo--mark {
	flex: 0 0 auto;
	height: clamp(2.8rem, 4vw, 3.5rem);
}

header .wp-block-navigation {
	color: var(--monerisu-brown-deep);
	font-size: clamp(0.72rem, 0.8vw, 0.84rem);
	font-weight: 600;
}

header .wp-block-navigation__container {
	gap: clamp(0.65rem, 1.05vw, 1.05rem);
}

header .wp-block-navigation-item:last-child {
	display: flex;
}

.monerisu-cta--header {
	flex-wrap: nowrap !important;
	gap: 0.6rem;
}

.monerisu-cta--header .wp-block-button__link {
	min-height: 44px;
	padding: 0.65rem 1rem;
}

/* Buttons */
.wp-block-button.is-style-fill > .wp-block-button__link,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--monerisu-action);
	border: 1px solid var(--monerisu-action);
	box-shadow: 0 5px 14px rgba(78, 51, 41, 0.16);
	color: #fff;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(255, 253, 249, 0.92);
	border: 1px solid var(--monerisu-brown);
	color: var(--monerisu-brown-deep);
}

.wp-block-button > .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.02em;
	min-height: var(--monerisu-button-h);
	text-decoration: none;
}

.wp-block-button.monerisu-button--line > .wp-block-button__link {
	background: rgba(255, 253, 249, 0.96);
	border-color: rgba(46, 125, 50, 0.42);
	box-shadow: 0 5px 14px rgba(46, 125, 50, 0.08);
	color: var(--monerisu-line);
}

.wp-block-button.monerisu-button--line > .wp-block-button__link::before {
	background: var(--monerisu-line);
	border-radius: 50% 50% 50% 18%;
	content: "";
	height: 1.15rem;
	margin-right: 0.48rem;
	width: 1.15rem;
}

.has-brand-cream-background-color .monerisu-cta .wp-block-button.is-style-fill > a.wp-block-button__link[data-cta="line"],
.monerisu-cta .wp-block-button.is-style-fill > a.wp-block-button__link[data-cta="line"] {
	background: var(--monerisu-line);
	border-color: var(--monerisu-line);
	color: #fff;
}

/* Typography and section rhythm */
main.wp-block-group > .wp-block-group {
	padding-bottom: var(--monerisu-section-space);
	padding-top: var(--monerisu-section-space);
}

main :where(h1, h2, h3) {
	color: var(--monerisu-brown-deep);
}

main h2.has-text-align-center {
	color: var(--monerisu-brown);
	font-size: clamp(1.45rem, 2.35vw, 2.05rem);
	letter-spacing: 0.12em;
	margin-bottom: clamp(1.25rem, 2.7vw, 2rem);
}

main h2.has-text-align-center::before,
main h2.has-text-align-center::after {
	background: linear-gradient(90deg, transparent, rgba(118, 83, 70, 0.42));
	max-width: 4.5rem;
}

main h2.has-text-align-center::after {
	background: linear-gradient(270deg, transparent, rgba(118, 83, 70, 0.42));
}

/* Hero */
main.wp-block-group > .section-hero.section-hero {
	display: grid !important;
	grid-template-areas: "hero";
	grid-template-columns: minmax(0, 1fr);
	min-height: clamp(450px, 34vw, 500px);
	padding: 0 !important;
	position: relative;
}

.section-hero > .wp-block-group,
.section-hero .section-hero__image {
	margin: 0 !important;
	max-width: none;
	min-width: 0;
	width: 100%;
}

.section-hero > .wp-block-group:first-child {
	align-self: stretch;
	background: linear-gradient(90deg, #fffdf9 0%, rgba(255, 255, 255, 0.99) 56%, rgba(255, 255, 255, 0.9) 68%, rgba(255, 255, 255, 0.58) 82%, rgba(255, 255, 255, 0) 100%);
	display: flex;
	flex-direction: column;
	grid-area: hero;
	justify-content: center;
	padding: clamp(2rem, 4.5vw, 4.75rem) clamp(1.4rem, 4vw, 4.5rem) !important;
	position: relative;
	width: 52%;
	z-index: 2;
}

.section-hero > .wp-block-group:first-child > * {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 31rem;
}

.section-hero .section-hero__image {
	grid-area: hero;
	height: 100%;
	justify-self: end;
	position: relative;
	width: 70%;
	z-index: 1;
}

.section-hero .section-hero__image figure,
.section-hero .section-hero__image picture {
	height: 100%;
	margin: 0;
	max-width: none !important;
	width: 100%;
}

.section-hero .section-hero__image img {
	border-radius: 0;
	box-shadow: none;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: 52% center;
	width: 100%;
}

.section-hero__brand-copy {
	color: var(--monerisu-brown-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.2rem, 3.65vw, 3.8rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 0 0 1.1rem;
	text-align: left;
	text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 255, 255, 0.98), 0 0 32px rgba(255, 255, 255, 0.82);
}

.section-hero h1.monerisu-hero__seo-title {
	color: var(--monerisu-brown-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.85rem, 1.15vw, 1.05rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.65;
	margin: 0 0 0.7rem;
	text-align: left;
	text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255, 255, 255, 0.96), 0 0 24px rgba(255, 255, 255, 0.74);
}

.section-hero h1.monerisu-hero__seo-title span {
	display: block;
}

.monerisu-hero__summary {
	font-size: 1rem;
	margin: 0 0 1.1rem;
}

.monerisu-hero__mobile-note {
	display: none;
}

.section-hero .monerisu-cta--hero {
	flex-direction: row;
	gap: 0.75rem;
	justify-content: flex-start;
	margin: 0;
}

.section-hero .monerisu-cta--hero .wp-block-button,
.section-hero .monerisu-cta--hero .wp-block-button__link {
	width: auto;
}

.section-hero__note {
	color: var(--monerisu-muted);
	display: block;
	margin: 0.75rem 0 0;
}

.monerisu-hero__sub {
	display: none !important;
}

/* Quick facts */
main.wp-block-group > .monerisu-home__quick.monerisu-home__quick {
	background: transparent;
	margin-top: -2.35rem;
	padding: 0 clamp(1rem, 4vw, 4rem) 1.25rem !important;
	position: relative;
	z-index: 4;
}

.monerisu-home__quick > :where(h2, ul) {
	max-width: 1120px !important;
	width: 100%;
}

.monerisu-home__quick h2 {
	background: rgba(255, 253, 249, 0.97);
	border: 1px solid var(--monerisu-hairline);
	border-bottom: 0;
	border-radius: var(--monerisu-radius-lg) var(--monerisu-radius-lg) 0 0;
	box-shadow: var(--monerisu-shadow);
	font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
	margin: 0 !important;
	padding: 0.85rem 1rem 0.6rem;
}

.monerisu-facts {
	background: rgba(255, 253, 249, 0.97);
	border-color: var(--monerisu-hairline);
	border-radius: 0 0 var(--monerisu-radius-lg) var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: 0.75rem;
}

.monerisu-facts li {
	align-items: center;
	background: var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-sm);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	padding: 0.8rem 0.9rem;
	text-align: left;
}

.monerisu-facts__icon {
	color: var(--monerisu-brown);
	font-family: Georgia, serif;
	font-size: 1.65rem;
	grid-row: 1 / 3;
	line-height: 1;
	margin-right: 0.7rem;
}

.monerisu-facts__label {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	margin: 0;
}

.monerisu-facts__value {
	font-size: clamp(0.82rem, 1.1vw, 1rem);
}

.monerisu-home__quick > p {
	display: none;
}

/* Worries and features */
main.monerisu-home > :is(.monerisu-home__worries, .monerisu-home__features) {
	padding-bottom: clamp(1.9rem, 3vw, 3rem);
	padding-top: clamp(1.9rem, 3vw, 3rem);
}

main.monerisu-home > :is(.monerisu-home__about, .monerisu-home__work, .monerisu-home__schedule, .monerisu-home__facility, .monerisu-home__flow, .monerisu-home__access, .monerisu-home__faq) {
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
	padding-top: clamp(2.5rem, 4vw, 4rem);
}

.monerisu-home__worries h2.has-text-align-center,
.monerisu-home__features h2.has-text-align-center {
	margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
}

.monerisu-worries {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.8rem;
}

.monerisu-worries li {
	align-items: center;
	background: var(--monerisu-paper);
	box-shadow: var(--monerisu-shadow-soft);
	display: flex;
	font-size: 0.95rem;
	min-height: 74px;
	padding: 0.85rem 0.85rem 0.85rem 3.6rem;
}

.monerisu-home .monerisu-worries li {
	min-height: 68px;
}

.monerisu-worries li::before {
	background: transparent;
	border: 1.5px solid var(--monerisu-brown);
	border-radius: 50% 50% 45% 45%;
	box-shadow: none;
	height: 1.9rem;
	left: 1rem;
	top: 1.15rem;
	width: 1.9rem;
}

.monerisu-worries li::after {
	color: var(--monerisu-brown);
	border-bottom: 1px solid currentColor;
	border-radius: 50%;
	content: "";
	height: 0.35rem;
	left: 1.6rem;
	position: absolute;
	top: 2.05rem;
	width: 0.65rem;
}

.monerisu-home__worries > p {
	color: var(--monerisu-muted);
	font-size: 0.9rem;
	margin-top: 1.35rem;
}

.monerisu-points {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.monerisu-points li {
	background: var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-left-width: 0;
	min-height: 190px;
	padding: 1.35rem 1rem;
	text-align: center !important;
}

.monerisu-home .monerisu-points li {
	min-height: 168px;
}

.monerisu-points li:first-child {
	border-left-width: 1px;
	border-radius: var(--monerisu-radius) 0 0 var(--monerisu-radius);
}

.monerisu-points li:last-child {
	border-radius: 0 var(--monerisu-radius) var(--monerisu-radius) 0;
}

.monerisu-points__icon {
	color: var(--monerisu-brown);
	display: block;
	font-family: Georgia, serif;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 auto 0.8rem;
}

.monerisu-points strong {
	font-size: 1rem;
	margin-bottom: 0.45rem;
	text-align: center;
}

/* Home cards and imagery */
.monerisu-home__about .wp-block-columns,
.monerisu-home__facility .wp-block-columns {
	background: var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
	overflow: hidden;
	padding: clamp(0.75rem, 2.4vw, 1.6rem);
}

.monerisu-home__about figure,
.monerisu-home__facility figure,
.monerisu-home__work figure {
	margin: 0;
}

.monerisu-home__about img,
.monerisu-home__facility img,
.monerisu-home__work img {
	border-radius: var(--monerisu-radius);
}

.monerisu-home__work img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.monerisu-home__work > .wp-block-columns,
.monerisu-home__work > .monerisu-work-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.monerisu-home__work > .wp-block-columns > .wp-block-column {
	background: var(--monerisu-paper);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	box-shadow: var(--monerisu-shadow-soft);
	overflow: hidden;
	padding: 0.65rem 0.65rem 1rem;
}

.monerisu-home__work h3,
.monerisu-home__work .wp-block-column p {
	padding-inline: 0.35rem;
}

.monerisu-home__work h3 {
	color: var(--monerisu-brown);
	font-size: 1.2rem;
	margin: 0.8rem 0 0.25rem;
}

.monerisu-home .section-tint,
.monerisu-home .section-visit {
	background: var(--monerisu-paper-warm) !important;
}

.monerisu-ways__card,
.wp-block-details,
.wp-block-table table {
	background: var(--monerisu-paper);
	border-color: var(--monerisu-hairline);
	box-shadow: var(--monerisu-shadow-soft);
}

.section-visit {
	border-top: 1px solid var(--monerisu-hairline);
}

.section-visit figure img {
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
}

/* Subpages share the same warm editorial system. */
main:not(.monerisu-home) {
	background: linear-gradient(180deg, var(--monerisu-paper-warm), var(--wp--preset--color--background) 22rem);
}

main:not(.monerisu-home) > .wp-block-group:not(.monerisu-breadcrumb),
main:not(.monerisu-home) > .wp-block-post-content {
	background: rgba(255, 253, 249, 0.82);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow-soft);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-inline: clamp(1.1rem, 4vw, 3rem);
}

main:not(.monerisu-home) h1.has-text-align-center {
	color: var(--monerisu-brown);
	font-size: clamp(2rem, 4vw, 3.6rem);
	letter-spacing: 0.09em;
}

main:not(.monerisu-home) :where(figure img) {
	border-radius: var(--monerisu-radius);
	box-shadow: var(--monerisu-shadow-soft);
}

main:not(.monerisu-home) h2:not(.has-text-align-center) {
	border-left: 4px solid var(--wp--preset--color--brand-cream);
	color: var(--monerisu-brown);
	padding-left: 0.85rem;
}

/* ==========================================================================
   19. Approved TOP visual system: subpage rollout
   --------------------------------------------------------------------------
   TOP (61bc9df) is the fixed visual baseline. These rules are deliberately
   scoped to `.monerisu-subpage`, so shared refinements cannot restyle TOP.
   ========================================================================== */

.monerisu-subpage {
	background:
		radial-gradient(circle at 8% 4%, rgba(249, 215, 161, 0.18), transparent 18rem),
		linear-gradient(180deg, var(--monerisu-paper-warm), var(--wp--preset--color--background) 28rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

main.monerisu-subpage > .wp-block-group:not(.monerisu-breadcrumb),
main.monerisu-subpage > .wp-block-post-content {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	padding-block: clamp(2.8rem, 5vw, 4.8rem);
	padding-inline: clamp(0rem, 2vw, 1.5rem);
}

main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero {
	background:
		radial-gradient(circle at 18% 24%, rgba(249, 215, 161, 0.34), transparent 18rem),
		linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(249, 239, 226, 0.84));
	border-block: 1px solid var(--monerisu-hairline);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	max-width: var(--wp--style--global--wide-size);
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5.25rem) !important;
	position: relative;
	width: 100%;
}

main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero::before,
main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero::after {
	border: 1px solid rgba(151, 128, 117, 0.18);
	border-radius: 50%;
	content: "";
	height: 8rem;
	position: absolute;
	width: 8rem;
}

main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero::before {
	left: -4.5rem;
	top: -4rem;
}

main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero::after {
	bottom: -5rem;
	right: -4rem;
}

.monerisu-subpage .monerisu-page-hero h1.has-text-align-center {
	color: var(--monerisu-brown);
	font-size: clamp(2.25rem, 5vw, 4.25rem);
	letter-spacing: 0.08em;
	line-height: 1.28;
	margin-block: 0;
}

.monerisu-subpage .monerisu-page-hero :where(.section-hero__lead, .monerisu-lead) {
	color: var(--wp--preset--color--text-body);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.12rem, 2vw, 1.42rem) !important;
	letter-spacing: 0.04em;
	margin-top: 1.15rem;
}

.monerisu-subpage > .wp-block-group > h2,
.monerisu-subpage > .wp-block-group > .wp-block-heading.has-text-align-center {
	border-left: 0;
	color: var(--monerisu-brown);
	padding-left: 0;
}

.monerisu-subpage .wp-block-image {
	margin-bottom: 0;
}

.monerisu-subpage .wp-block-image img {
	box-shadow: var(--monerisu-shadow-soft);
}

.monerisu-subpage .wp-block-image figcaption {
	color: var(--wp--preset--color--text-body);
	font-size: 0.84rem;
	margin-top: 0.6rem;
	opacity: 0.78;
	text-align: left;
}

/* About: large evidence photography followed by open editorial sections. */
.monerisu-subpage--about > .monerisu-band {
	padding-block: 0;
}

.monerisu-subpage--about > .monerisu-band > figure,
.monerisu-subpage--visit > .monerisu-visit-photo > figure {
	max-width: none;
	width: 100%;
}

.monerisu-subpage--about > .monerisu-band img {
	aspect-ratio: 12 / 5;
	border-radius: var(--monerisu-radius-lg);
	object-position: center 45%;
}

.monerisu-subpage--about > .monerisu-band + .wp-block-group {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.05rem, 1.7vw, 1.24rem);
	line-height: 2;
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.monerisu-subpage--about > .wp-block-group .wp-block-columns {
	gap: clamp(1.5rem, 4vw, 4.5rem);
	margin-block: clamp(2rem, 4vw, 4rem);
}

.monerisu-subpage--about > .wp-block-group .wp-block-columns img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.monerisu-subpage--about #daily-schedule {
	background: rgba(249, 239, 226, 0.66);
	border-radius: var(--monerisu-radius-lg);
	margin-block: clamp(1rem, 3vw, 2.5rem);
	padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Guide: calm, alternating evidence-led steps. */
.monerisu-subpage--guide > .monerisu-flow-step {
	border-top: 1px solid var(--monerisu-hairline);
	padding-block: clamp(2.4rem, 4vw, 4rem);
}

.monerisu-flow-step > h2 {
	align-items: center;
	border-left: 0 !important;
	display: flex;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	gap: 0.9rem;
	padding-left: 0 !important;
}

.monerisu-flow-step > h2::after {
	background: var(--monerisu-hairline);
	content: "";
	flex: 1;
	height: 1px;
}

.monerisu-flow-step > .wp-block-columns {
	gap: clamp(1.5rem, 5vw, 5rem);
	margin-top: clamp(1.25rem, 3vw, 2.25rem);
	max-width: 1000px !important;
	width: 100%;
}

@media (min-width: 782px) {
	.monerisu-flow-step--reverse > .wp-block-columns {
		flex-direction: row-reverse;
	}
}

.monerisu-flow-step img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* Work: five confirmed work types, led by real task photography. */
.monerisu-subpage--work {
	counter-reset: monerisu-work;
}

.monerisu-subpage--work > .monerisu-work-detail {
	border-top: 1px solid var(--monerisu-hairline);
	counter-increment: monerisu-work;
	padding-block: clamp(2.7rem, 5vw, 4.7rem);
}

.monerisu-work-detail > h2 {
	align-items: baseline;
	border-left: 0 !important;
	display: flex;
	font-size: clamp(1.65rem, 3vw, 2.55rem);
	gap: 0.75rem;
	padding-left: 0 !important;
}

.monerisu-work-detail > h2::before {
	color: var(--monerisu-brown);
	content: "0" counter(monerisu-work);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0.72;
}

.monerisu-work-detail > p {
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	max-width: 46rem;
}

.monerisu-work-detail > .wp-block-columns {
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
}

.monerisu-work-detail img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.monerisu-work-detail > figure.wp-block-image {
	margin-top: clamp(1.4rem, 3vw, 2.4rem);
}

.monerisu-work-detail > figure.wp-block-image img,
.monerisu-work-detail > .wp-block-columns:has(> .wp-block-column:only-child) img {
	max-height: 36rem;
}

/* Wage: strong two-card hierarchy without separating amount and unit. */
.monerisu-subpage--wage > .wp-block-group:not(.monerisu-page-hero) {
	max-width: 920px;
}

.monerisu-subpage--wage .monerisu-ways {
	gap: clamp(1rem, 3vw, 1.8rem);
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.monerisu-subpage--wage .monerisu-ways__card {
	background: var(--monerisu-paper);
	border-color: var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow-soft);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.monerisu-subpage--wage .monerisu-ways__card h3 {
	color: var(--monerisu-brown);
	font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.monerisu-subpage--wage .monerisu-amount {
	color: var(--monerisu-brown);
	font-size: clamp(1.12rem, 2vw, 1.42rem);
}

/* Visit: one large consultation photograph and an overlapping contact panel. */
.monerisu-subpage--visit > .monerisu-visit-photo {
	padding-block: 0;
}

.monerisu-subpage--visit > .monerisu-visit-photo img {
	aspect-ratio: 12 / 5;
	border-radius: var(--monerisu-radius-lg);
	object-position: center 42%;
}

.monerisu-subpage--visit > .monerisu-visit-contact {
	background: rgba(255, 253, 249, 0.96);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow);
	margin-top: -3.5rem;
	max-width: 680px;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	position: relative;
	z-index: 2;
}

/* Access: exterior photograph and address are read as one trust unit. */
.monerisu-subpage--access > .monerisu-access-intro {
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-block: clamp(1rem, 4vw, 3rem);
	padding-block: clamp(1rem, 3vw, 2.5rem);
}

.monerisu-access-intro img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.monerisu-access-intro > .wp-block-column:last-child {
	background: rgba(255, 253, 249, 0.9);
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius-lg);
	box-shadow: var(--monerisu-shadow-soft);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.monerisu-subpage--access > .wp-block-group:not(.monerisu-page-hero) {
	max-width: 920px;
}

/* FAQ / Journal / Company / Privacy: branded, quiet information pages. */
.monerisu-subpage--faq > .wp-block-group:nth-last-child(1),
.monerisu-subpage--company > .wp-block-group:nth-last-child(1) {
	margin-top: clamp(1rem, 3vw, 2rem);
}

.monerisu-subpage--faq .wp-block-details {
	border: 1px solid var(--monerisu-hairline);
	border-radius: var(--monerisu-radius);
	box-shadow: var(--monerisu-shadow-soft);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.monerisu-subpage--faq .wp-block-details summary {
	padding: 1rem 1.15rem;
}

.monerisu-subpage--journal .monerisu-journal-shell,
.monerisu-subpage--company > .wp-block-group:not(.monerisu-page-hero),
.monerisu-subpage--privacy .monerisu-privacy-shell {
	max-width: 840px;
}

.monerisu-journal-shell > h1,
.monerisu-privacy-shell > h1 {
	color: var(--monerisu-brown);
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	letter-spacing: 0.08em;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	position: relative;
}

.monerisu-journal-shell > h1::after,
.monerisu-privacy-shell > h1::after {
	background: var(--monerisu-hairline-strong);
	bottom: 0;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 5rem;
}

.monerisu-subpage--privacy .wp-block-post-content {
	font-size: 1rem;
	line-height: 2;
}

.monerisu-subpage--privacy .wp-block-post-content h2 {
	border-left: 0;
	border-top: 1px solid var(--monerisu-hairline);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	margin-top: 2.6rem;
	padding-left: 0;
	padding-top: 1.5rem;
}

@media (max-width: 767px) {
	.monerisu-subpage {
		padding-bottom: 6.5rem;
	}

	.monerisu-subpage > .wp-block-group:not(.monerisu-breadcrumb),
	.monerisu-subpage > .wp-block-post-content {
		padding-block: 2.35rem;
		padding-inline: 0;
	}

	.monerisu-subpage > .monerisu-page-hero {
		margin-bottom: 1rem;
		padding: 2.6rem 1rem !important;
	}

	.monerisu-subpage .monerisu-page-hero h1.has-text-align-center {
		font-size: clamp(1.85rem, 9.2vw, 2.45rem);
		letter-spacing: 0.045em;
	}

	.monerisu-subpage--about > .monerisu-band img,
	.monerisu-subpage--visit > .monerisu-visit-photo img {
		aspect-ratio: 4 / 3;
	}

	.monerisu-subpage--about > .wp-block-group .wp-block-columns {
		margin-block: 1.5rem 2.5rem;
	}

	.monerisu-subpage--about #daily-schedule {
		border-radius: var(--monerisu-radius);
		padding-inline: 1rem;
	}

	.monerisu-subpage--visit > .monerisu-visit-contact {
		margin-inline: 0.75rem;
		margin-top: -2rem;
		padding: 1.15rem !important;
	}

	.monerisu-flow-step > h2,
	.monerisu-work-detail > h2 {
		align-items: flex-start;
	}

	.monerisu-work-detail > .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.monerisu-work-detail > .wp-block-columns img {
		aspect-ratio: 1 / 1;
	}

	.monerisu-subpage--access > .monerisu-access-intro {
		margin-block: 0.5rem 1rem;
	}

	.monerisu-journal-shell > h1,
	.monerisu-privacy-shell > h1 {
		font-size: clamp(1.85rem, 9vw, 2.35rem);
		margin-bottom: 2rem;
	}
}

footer.wp-block-group {
	background: #f7efe5 !important;
	border-top-color: var(--monerisu-hairline);
}

/* Mobile */
@media (max-width: 1239px) {
	.wp-site-blocks > header.wp-block-group {
		min-height: 68px;
	}

	header .wp-block-navigation-item:last-child {
		display: block;
	}

	.wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--monerisu-paper);
	}

	.monerisu-sticky-cta {
		background: rgba(255, 253, 249, 0.92);
		border: 1px solid var(--monerisu-hairline);
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -8px 24px rgba(65, 43, 34, 0.13);
		gap: 0.5rem;
		padding: 0.5rem max(0.55rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.55rem, env(safe-area-inset-left, 0px));
	}

	.monerisu-sticky-cta a {
		border: 0;
		border-radius: 9px;
		box-shadow: 0 4px 12px rgba(65, 43, 34, 0.14);
		font-weight: 700;
	}

	.monerisu-sticky-cta .is-primary {
		background: var(--monerisu-line);
		color: #fff;
	}

	.monerisu-sticky-cta .is-secondary {
		background: var(--monerisu-brown);
		color: #fff;
	}
}

@media (max-width: 767px) {
	:root {
		--monerisu-gutter: clamp(0.75rem, 3.8vw, 1rem);
		--monerisu-section-space: 2.6rem;
		--monerisu-button-h: 46px;
	}

	.wp-site-blocks > header.wp-block-group {
		min-height: 68px;
		padding-block: 0.5rem !important;
		padding-inline: 0.85rem !important;
	}

	header .monerisu-logo--wordmark {
		height: clamp(1.55rem, 7.3vw, 2rem);
	}

	header .monerisu-logo--mark {
		height: clamp(2.2rem, 10vw, 2.6rem);
	}

	main.wp-block-group > .section-hero.section-hero {
		display: flex !important;
		flex-direction: column;
		min-height: 0;
	}

	.section-hero > .wp-block-group:first-child {
		align-items: stretch;
		background: linear-gradient(
			180deg,
			rgba(255, 253, 249, 0) 0%,
			rgba(255, 253, 249, 0.18) 12%,
			rgba(255, 253, 249, 0.72) 32%,
			rgba(255, 253, 249, 0.96) 48%,
			#fff8ed 74%,
			#fff7e9 100%
		);
		justify-content: center;
		margin-top: -9.25rem !important;
		order: 2;
		padding: 2.25rem clamp(1rem, 5.15vw, 1.35rem) 1.1rem !important;
		text-align: left;
		width: 100%;
	}

	.section-hero .section-hero__image {
		height: auto;
		order: 1;
		width: 100%;
	}

	.section-hero .section-hero__image img {
		aspect-ratio: 4 / 3;
		height: auto;
		object-fit: cover;
		object-position: center center;
		transform: none;
	}

	.section-hero .section-hero__image::after {
		background: linear-gradient(
			180deg,
			rgba(255, 253, 249, 0) 0%,
			rgba(255, 253, 249, 0.02) 26%,
			rgba(255, 253, 249, 0.14) 46%,
			rgba(255, 253, 249, 0.5) 68%,
			rgba(255, 253, 249, 0.88) 88%,
			#fffdf9 100%
		);
		height: 64%;
	}

	.section-hero .section-hero__image,
	.section-hero .section-hero__image figure,
	.section-hero .section-hero__image picture {
		overflow: hidden;
	}

	.section-hero__brand-copy {
		font-size: clamp(1.85rem, 8.25vw, 2.25rem);
		letter-spacing: 0.1em;
		line-height: 1.4;
		margin-bottom: 0.65rem;
		text-align: left;
	}

	.section-hero h1.monerisu-hero__seo-title {
		font-size: 0.78rem;
		line-height: 1.5;
		margin-bottom: 0.45rem;
		text-align: left !important;
	}

	.monerisu-hero__summary {
		font-size: 0.86rem;
		line-height: 1.65;
		margin-bottom: 0.2rem;
		text-align: left !important;
	}

	.monerisu-hero__mobile-note {
		color: var(--monerisu-muted);
		display: block;
		font-size: 0.78rem;
		line-height: 1.65;
		margin: 0 0 0.8rem;
		text-align: left;
	}

	.section-hero .monerisu-cta--hero {
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
	}

	.section-hero .monerisu-cta--hero .wp-block-button,
	.section-hero .monerisu-cta--hero .wp-block-button__link {
		font-size: 0.85rem;
		min-height: 46px;
		width: 100%;
	}

	.section-hero__note {
		display: none;
	}

	main.wp-block-group > .monerisu-home__quick.monerisu-home__quick {
		margin-top: 0;
		padding: 0 0.65rem 0.75rem !important;
	}

	.monerisu-home__quick h2 {
		border-radius: 0;
		box-shadow: none;
		font-size: 1.02rem !important;
		letter-spacing: 0.1em;
		padding-top: 1rem;
	}

	.monerisu-facts {
		border-radius: 0 0 var(--monerisu-radius) var(--monerisu-radius);
		gap: 0.35rem;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		padding: 0.55rem;
	}

	.monerisu-facts li {
		display: block;
		grid-column: span 2;
		min-height: 72px;
		padding: 0.55rem 0.25rem;
		text-align: center;
	}

	.monerisu-facts li:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.monerisu-facts li:nth-child(5) {
		grid-column: 4 / span 2;
	}

	.monerisu-facts__icon {
		display: block;
		font-size: 1.2rem;
		margin: 0 0 0.2rem;
	}

	.monerisu-facts__label {
		font-size: 0.62rem;
	}

	.monerisu-facts__value {
		font-size: 0.73rem;
		white-space: nowrap;
	}

	main h2.has-text-align-center {
		font-size: 1.25rem;
		gap: 0.55rem;
		letter-spacing: 0.08em;
	}

	.monerisu-worries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.55rem;
	}

	.monerisu-worries li {
		font-size: 0.74rem;
		min-height: 68px;
		padding: 0.65rem 0.55rem 0.65rem 2.9rem;
	}

	.monerisu-worries li::before {
		left: 0.65rem;
		top: 1.1rem;
	}

	.monerisu-worries li::after {
		left: 1.25rem;
		top: 2rem;
	}

	.monerisu-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.55rem;
	}

	.monerisu-points li,
	.monerisu-points li:first-child,
	.monerisu-points li:last-child {
		border: 1px solid var(--monerisu-hairline);
		border-radius: var(--monerisu-radius-sm);
		font-size: 0.76rem;
		min-height: 156px;
		padding: 1rem 0.7rem;
	}

	.monerisu-points__icon {
		font-size: 2rem;
	}

	.monerisu-points strong {
		font-size: 0.86rem;
	}

	.monerisu-home__about .wp-block-columns,
	.monerisu-home__facility .wp-block-columns {
		border-radius: var(--monerisu-radius);
	}

	.monerisu-home__work > .wp-block-columns,
	.monerisu-home__work > .monerisu-work-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.45rem;
	}

	.monerisu-home__work > .monerisu-work-grid > .wp-block-column:last-child {
		grid-column: 1 / -1;
	}

	.monerisu-home__work > .wp-block-columns > .wp-block-column {
		border-radius: var(--monerisu-radius-sm);
		padding: 0.35rem 0.35rem 0.65rem;
	}

	.monerisu-home__work h3 {
		font-size: 0.86rem;
	}

	.monerisu-home__work .wp-block-column p {
		font-size: 0.7rem;
		line-height: 1.55;
	}

	main:not(.monerisu-home) > .wp-block-group:not(.monerisu-breadcrumb),
	main:not(.monerisu-home) > .wp-block-post-content {
		border-radius: var(--monerisu-radius);
		padding-inline: 1rem;
	}

	main h1.monerisu-title-phrase {
		font-size: clamp(1.5rem, 7.4vw, 1.8rem) !important;
		letter-spacing: 0.04em;
	}

	.monerisu-footer__brand {
		background: var(--monerisu-paper);
		border: 1px solid var(--monerisu-hairline);
		border-radius: var(--monerisu-radius);
		padding: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	main.wp-block-group > .section-hero.section-hero {
		min-height: 480px;
	}

	.section-hero > .wp-block-group:first-child {
		padding: 2rem 1.5rem !important;
		width: 52%;
	}

	.section-hero .section-hero__image {
		width: 70%;
	}

	.section-hero__brand-copy {
		font-size: clamp(2rem, 4.3vw, 2.55rem);
	}

	.section-hero .monerisu-cta--hero {
		align-items: stretch;
		flex-direction: column;
		width: min(100%, 17rem);
	}

	.section-hero .monerisu-cta--hero .wp-block-button,
	.section-hero .monerisu-cta--hero .wp-block-button__link {
		width: 100%;
	}

	.monerisu-home__work > .monerisu-work-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	main.wp-block-group > .section-hero.section-hero {
		display: flex !important;
		flex-direction: column;
		min-height: 0;
	}

	.section-hero .section-hero__image {
		height: auto;
		order: 1;
	}

	.section-hero .section-hero__image img {
		aspect-ratio: 2 / 1;
		height: auto;
		object-fit: cover;
		object-position: center 35%;
	}

	.section-hero > .wp-block-group:first-child {
		align-items: center;
		background:
			radial-gradient(ellipse at 32% 24%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 34%, rgba(255, 255, 255, 0) 68%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 24%, #fff 46%, #fff7e9 100%);
		margin-top: -7.5rem !important;
		order: 2;
		padding: 2rem 1.5rem 1.6rem !important;
		text-align: left;
		width: 100%;
	}

	.section-hero__brand-copy,
	.section-hero h1.monerisu-hero__seo-title,
	.monerisu-hero__summary {
		text-align: left;
	}

	.section-hero .monerisu-cta--hero {
		flex-direction: row;
		justify-content: center;
		width: auto;
	}
}

@media (max-width: 375px) {
	.section-hero > .wp-block-group:first-child {
		margin-top: -8.25rem !important;
		padding-top: 2rem !important;
	}

	.section-hero .section-hero__image img {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 600px) and (max-width: 767px) {
	.section-hero .section-hero__image img {
		aspect-ratio: 2 / 1;
		object-position: center 35%;
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	.section-hero__note {
		display: none;
	}
}

/* Keep the approved subpage system ahead of legacy narrow-screen card rules. */
@media (max-width: 1239px) {
	main.monerisu-subpage > .wp-block-group:not(.monerisu-breadcrumb),
	main.monerisu-subpage > .wp-block-post-content {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin-bottom: 0;
	}

	main.monerisu-subpage > .monerisu-page-hero.monerisu-page-hero {
		background:
			radial-gradient(circle at 18% 24%, rgba(249, 215, 161, 0.34), transparent 18rem),
			linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(249, 239, 226, 0.84));
		border-block: 1px solid var(--monerisu-hairline);
		border-radius: 0;
	}

	.monerisu-subpage--about #daily-schedule,
	.monerisu-subpage--visit > .monerisu-visit-contact,
	.monerisu-access-intro > .wp-block-column:last-child {
		border: 1px solid var(--monerisu-hairline);
		box-shadow: var(--monerisu-shadow-soft);
	}
}