/**
 * フロントページ（LP）専用スタイル
 *
 * WHY: Kadence 管理画面のカラーパレット設定に配色を持たせると、案件終了後
 *      の引き継ぎ時に設定箇所が「管理画面」と「コード」に分散してしまう
 *      ため、本案件の配色・余白はすべてこのファイルの CSS 変数に一本化する。
 *      front.css は front-page.php（is_front_page()）でのみ読み込む。
 *      個別セクションのスタイルはまだ書かない。各セクションの実装タスク
 *      （#7〜#10）で、対応するセクションの見出しコメントの下に追記していく。
 */


/* ==========================================================================
   共通レイアウト
   ========================================================================== */

/*
 * WHY: 20セクション全てに同じ余白・見出しスタイルを個別に書くと差分が
 *      生まれやすいため、共通クラスをここで一括定義し、各セクションの
 *      テンプレートパートから使い回す。
 */

/*
 * WHY: アイコングリッド（04）等のアンカーリンクでページ内移動する際、
 *      Kadence の追従ヘッダーに着地点の見出しが隠れないよう、
 *      アンカー先になる全セクション共通で scroll-margin-top を確保する。
 *      100px は追従ヘッダーの高さの暫定値（ヘッダー実装確定後に要調整）。
 */
html {
	scroll-behavior: smooth;
}

.ds-section {
	padding-top: 80px;
	padding-bottom: 80px;
	scroll-margin-top: 100px;
}

/*
 * WHY: スマートフォンでは 80px の上下余白は間延びして見えるため、
 *      767px 以下では 48px に縮める（既存方針どおり、共通ルール直後に追記）。
 */
@media (max-width: 767px) {
	.ds-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.ds-container {
	max-width: var(--ds-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/*
 * WHY (2026-08-17): 見出しの下余白がサブ見出しの有無で 8px / 70px の二値になっていた
 *      （サブ無し 10 セクションは見出し直下に本文が貼り付く）。「見出しブロック → 本文」の
 *      間隔を 40px（SP 32px）で統一し、サブがある場合だけ見出し → サブを 8px にする。
 *      :has() は主要ブラウザで対応済み（Baseline 2023）。負 margin での相殺は DOM 順に
 *      依存し将来の変更で壊れるため採らない。
 *      font-size は従来 Kadence 親の h2 既定に任せていたが、SP で h1 と同じ 28px になり
 *      階層が消えていたため子テーマで明示する。
 */
/* WHY (2026-08-23): 書体を M PLUS Rounded 1c に変えたあと、見出しの押しが弱くなった。
 *      丸ゴシックは角が丸いぶん同じ 700 でも角ゴシックより線が細く見えるため、
 *      見出しだけ 800 へ上げて以前の締まりに戻す。800 は読み込み済みのウェイトなので
 *      ダウンロードは増えない（functions.php の Google Fonts 指定を参照）。 */
/* WHY (2026-08-31): 日本語は既定で任意の文字間で折り返せるため、SP 幅で語中・
 *      長音の前で割れる箇所が実測で複数あった。文言・文字サイズ・コンテナ幅を
 *      変えずに折返し位置だけを制御するユーティリティ。kdc_phrased_html() が
 *      文節をこのクラスで包み、文節の境目にだけ <wbr> を置く。
 *      文節自体がコンテナより長いと溢れるため、区切りは短めに入れること。 */
.ds-nw {
	white-space: nowrap;
}

.ds-heading {
	margin: 0 0 var(--ds-space-heading-content);
	color: var(--ds-fg);
	font-size: clamp(var(--ds-font-xl), 2.15vw, var(--ds-font-2xl));
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}

.ds-heading:has(+ .ds-heading-sub) {
	margin-bottom: var(--ds-space-heading-sub);
}

.ds-heading-sub {
	margin: 0 0 var(--ds-space-heading-content);
	color: var(--ds-fg-soft);
	text-align: center;
}

/*
 * WHY (2026-08-23): 白カプセル＋左右マスコット＋手描き風下線の見出し。
 *      もともと 08 menu だけの装飾（.ds-menu__head）だったものを、トップの
 *      全セクションで使う共通部品へ一般化した（マークアップは
 *      template-parts/front/section-head.php）。@media 内の縮小・SPでの
 *      縦積みルールは menu セクションの記述と同じブロックにまとまっている。
 */
.ds-section-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 48px;
}

/*
 * WHY: カプセル下の手描き風アクセントライン＋丸＋輝き。カプセルが行内で
 *      最も背が高いため、.ds-section-head の下端はカプセルの下端とほぼ一致する。
 */
.ds-section-head::after {
	content: "";
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	width: 292px;
	height: 20px;
	transform: translateX(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 20'%3E%3Cpath d='M6,10 C70,20 170,0 234,10' fill='none' stroke='%23FC5210' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='252' cy='10' r='3' fill='%23FC5210'/%3E%3Cpath d='M275,3 C277,8 282,10 282,10 C282,10 277,12 275,17 C273,12 268,10 268,10 C268,10 273,8 275,3 Z' fill='%23FC5210'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.ds-section-head__capsule {
	position: relative;
	z-index: 1;
	max-width: 680px;
	padding: 24px 64px;
	background-color: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(26, 26, 26, .06);
	text-align: center;
}

.ds-section-head__capsule h2.ds-heading {
	margin: 0 0 6px;
	font-size: 32px;
}

.ds-section-head__capsule .ds-heading-sub {
	margin: 0;
	font-size: 15px;
}

/*
 * WHY: 左右のマスコットは元画像の縦横比が違うため、幅を揃えると大きさが
 *      不揃いに見える。書き出し高さ（292px）が共通なので高さ基準で揃え、
 *      幅は成り行きにする。z-index はカプセル（z-index: 1）より手前に重ねて、
 *      イラストがカプセルの縁に乗る立体感を出すため（flexアイテムは既定の
 *      重なり順がDOM順のため、カプセルより先に置かれる左マスコットにも明示が
 *      必要）。
 *
 *      WHY (2026-08-23): 重なり代を 26px → 14px に浅くした。全セクションへ
 *      広げたことでポーズごとに絵の重心が変わり、内側へ寄ったポーズ（挨拶・
 *      指差しなど）だと 26px では前面のイラストが見出しの文字に掛かって
 *      読めなくなる。14px はどのポーズでもカプセルの角丸の余白に収まり、
 *      文字組み（padding 左右 64px）には届かない。
 */
.ds-section-head__mascot {
	position: relative;
	z-index: 2;
	display: block;
	flex-shrink: 0;
	height: 104px;
	width: auto;
}

.ds-section-head__mascot--left {
	margin-right: -14px;
}

.ds-section-head__mascot--right {
	margin-left: -14px;
}

.ds-section-head__mascot-img {
	display: block;
	height: 100%;
	width: auto;
}

@media (max-width: 767px) {
	:root {
		--ds-space-heading-content: 32px;
	}
}

.ds-btn {
	display: inline-block;
	padding: 14px 32px;
	border: 2px solid var(--ds-cta-surface);
	/* WHY: カンプ実測 8px@1672 → 7px@1462 → 2026-08-17 にトークン --ds-radius-md（8px）へ統一。 */
	border-radius: var(--ds-radius-md);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/*
 * WHY: キーボード操作時のフォーカス位置を明示する。:focus-visible なので
 *      マウス操作時の見た目は変わらない。色は var(--ds-fg) で、ボタンの
 *      塗り（#B85A00）にもページ地色にも十分なコントラストが出る。
 */
.ds-btn:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

/*
 * WHY (2026-08-14 改訂): 旧実装は白文字 4.5:1 を「通常文字」で満たすために
 *      #B85A00 まで暗くしていたが、モック（#FC5210）より暗く沈んで見えると
 *      指摘された。文字を bold 19px 以上にすると WCAG 1.4.3 の「大きい文字」
 *      扱い（3:1）になるため、モック色 #FC5210（白文字 3.31:1）をそのまま
 *      使える。hover の #E84A00 は 3.88:1。
 *      ※ 旧コメントは根拠条項を 1.4.5 と書いていたが誤り。テキストの
 *        コントラストは 1.4.3、1.4.5 は画像化された文字。
 *      font-size は下の .ds-btn-primary で 19px 下限を明示する。19px 未満に
 *      なる CTA（SP 固定バー等）にこの色を使ってはいけない。
 */
.ds-btn-primary {
	background-color: var(--ds-cta-surface);
	border-color: var(--ds-cta-surface);
	color: #fff;
	/* WHY: 「大きい文字」基準の下限。clamp の下限を 19px にしないとモバイルで
	 *      通常文字扱いに戻り 3.31:1 が基準未達になる（320px 実測で 1 行維持）。 */
	font-size: clamp(19px, 1.31vw, 22px);
}

.ds-btn-primary:hover {
	background-color: var(--ds-cta-surface-hover);
	border-color: var(--ds-cta-surface-hover);
	color: #fff;
}

/*
 * WHY (2026-08-14 改訂): 背景を透明のままにすると実効背景がセクション地色に
 *      依存して比率が変わるため、白地を明示する。文字・枠は小さい文字でも
 *      通常文字基準を満たす #D63F00（白地 4.60:1）。旧 #A85200 より明るく赤寄り。
 */
.ds-btn-secondary {
	background-color: #fff;
	color: var(--ds-cta-ink);
	border-color: var(--ds-cta-ink);
}

.ds-btn-secondary:hover {
	background-color: var(--ds-cta-ink);
	border-color: var(--ds-cta-ink);
	color: #fff;
}

/* ==========================================================================
   ブレークポイント方針
   ========================================================================== */

/*
 * WHY: 参照元ワイヤーフレーム（LPワイヤーフレーム_v0.2.html）の実装に合わせ、
 *      ブレークポイントは以下の2段階に統一する。
 *
 *      - 1024px 以下（タブレット想定）
 *        グリッド系レイアウトの列数を減らす程度の調整に留める
 *        （例: 4カラム→2カラム）。
 *
 *      - 767px 以下（スマートフォン想定）
 *        グリッド系は基本1カラム化。見出しサイズを縮小。
 *        画面下部に sp-cta（固定CTA）を表示するため、
 *        body の下端に固定CTAの高さぶんの余白（padding-bottom）を確保する。
 *
 *      個別セクションのメディアクエリは、各セクション実装時に
 *      対応するセクションのスタイル直後へ追記し、このファイルの末尾に
 *      まとめて置かない（差分の見通しを優先するため）。
 */

/* ==========================================================================
   02. ファーストビュー（fv）
   ========================================================================== */

/*
 * WHY: モックは写真を画面右端まで抜く全幅の帯レイアウトのため、このセクションだけ
 *      `.ds-section` の上下余白（80px / 767px時48px）を打ち消す。
 *      このルールは `.ds-section` より後ろに定義されているため、同じ詳細度でも
 *      後方のこのルールが勝つ。
 */
.ds-fv {
	padding-top: 0;
	padding-bottom: 0;
}

.ds-fv__inner {
	display: grid;
	grid-template-columns: 48% 52%;
	gap: 0;
	align-items: stretch;
	/* WHY: カンプ実測。FV帯の高さ 540px / 1672px = 32.3%。 */
	min-height: clamp(420px, 32.3vw, 560px);
	/* WHY: カンプ実測では左端カラムの色は上から下までほぼ均一（249〜252）で、斜めグラデーションではなかったため、フラットな単色地に変更する。 */
	/* WHY (2026-08-21): 純白のままだと右半分の写真との密度差が大きく、左半分が「余白」ではなく
	 *      「空白」に見えるため、暖色地へ変えて写真との境界の唐突さを和らげる。
	 *      白地固定の .ds-btn-secondary はこの地の上でむしろ立つので CTA の視認性は下がらない。 */
	background: var(--ds-bg-warm);
}

/*
 * WHY: h1（.ds-fv__copy）の直後に来る配置に変更したため、本文（.ds-fv__lead）
 *      との間隔を広めに取り、見出し直下の付随情報として視覚的にまとまるようにする。
 */
/* WHY (2026-08-21): FV 内でオレンジが CTA・サブコピー・バッジ・料金・リンクの5用途に散り、
 *      すべてが強調された結果どれも目立たなくなっていた。オレンジは CTA に集約し、
 *      サブコピーは見出し色（太字）で階層を作る。 */
.ds-fv__sub {
	margin: 0 0 20px;
	color: var(--ds-fg);
	font-size: 14px;
	font-weight: 700;
}

/* WHY: 全幅化に伴い .ds-container の内側余白が無くなったため、テキスト側の余白は grid セル内の padding で作る（親幅を超えないため安全）。 */
.ds-fv__text {
	align-self: center;
	/* WHY: サブコピー・リード文の行数が嵩張り帯が縦に伸びすぎるため、上下だけ詰めてモックの高さ比率に近づける（上下幅はカンプ実測）。
	 *      右は .ds-fv__badges の3項目を1行に収めるための余白確保として詰める（1462px実測）。 */
	padding: clamp(24px, 2.8vw, 48px) clamp(20px, 2.4vw, 40px) clamp(24px, 2.8vw, 48px) clamp(24px, 4vw, 72px);
}

/*
 * WHY (2026-09-24): クライアント要望「少し暗い印象、明るく親しみやすく」（案件担当者決定）を受け、
 *      h1 の中身をテキストから手書き風キャッチ画像へ差し替えた（fv.php 参照）。
 *      フォント関連の指定（旧: font-size/font-weight/line-height/max-width）は画像化に伴い不要になり、
 *      代わりに picture/img の表示幅制御に置き換える。実寸は img の width/height 属性
 *      （480×223 ＝ 縦横比 2.152:1）が CLS 防止を担うため、CSS 側では上限幅だけを指定する。
 *      PC の上限値 clamp(320px, 27vw, 400px) とタブレットの 460px は案件担当者の指定値。
 */
.ds-fv__copy {
	margin: 0 0 16px;
}

.ds-fv__copy picture {
	display: block;
	width: 100%;
	max-width: clamp(320px, 27vw, 400px);
}

.ds-fv__copy img {
	display: block;
	width: 100%;
	height: auto;
}

.ds-fv__lead {
	margin: 0 0 28px;
	color: var(--ds-fg-soft);
	font-size: clamp(var(--ds-font-base), 1.15vw, 17px);
	line-height: 1.9;
}

.ds-fv__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

/* WHY (2026-08-17): 主 CTA 226px < 副 CTA 314px（文言長）で主従が逆転していた。
 *      同一行では両者を同幅にして、塗り／アウトラインの差だけで主従を示す。 */
.ds-fv__btns .ds-btn {
	flex: 1 1 0;
	min-width: 0;
}

.ds-fv__btns .ds-btn {
	/* WHY: カンプ実測。padding は左右 40px@1672 → 35px@1462。font-size は 21.9px@1672 → 19.2px@1462。 */
	padding: 17px 35px;
	/* WHY (2026-08-14): 下限を 15px → 19px。このセレクタは .ds-btn-primary より
	 *      詳細度が高く（0,2,0 対 0,1,0）、下限 15px のままだと狭い画面で
	 *      .ds-btn-primary 側の 19px 指定を打ち消してしまう。--ds-cta-surface
	 *      （白文字 3.31:1）は WCAG 1.4.3 の「大きい文字」（bold 18.66px 以上）
	 *      前提の色なので、19px を割ると通常文字基準 4.5:1 に対して未達になる。 */
	font-size: clamp(19px, 1.31vw, 22px);
	/* WHY (2026-09-24): クライアント要望「明るく親しみやすく」（案件担当者決定）。
	 *      角丸 8px（.ds-btn の --ds-radius-md）から完全な丸形（pill）にし、SP・PC 共通で適用する。 */
	border-radius: 999px;
}

/*
 * WHY (2026-09-24): クライアント要望「明るく親しみやすく」（案件担当者決定）で、
 *      主 CTA だけに進行を示す矢印を添える。装飾のみ（文言・href・電話アイコンは不変）の
 *      ため aria-hidden は付けず（スクリーンリーダーは content の記号を通常無視するか
 *      読み上げても文脈を損なわない）、CSS ::after で追加する。
 */
.ds-fv__btns .ds-btn-primary::after {
	content: "\203A";
	margin-left: .5em;
	font-weight: 700;
}

/*
 * WHY (2026-08-21): 副 CTA の文言を電話番号だけに短縮した（fv.php 参照）ぶん、
 *      「電話する」という動作の手がかりを受話器アイコンで補う。
 *      background-image ではなく mask + currentColor にしているのは、ホバーで
 *      文字色が白へ反転するときアイコンも一緒に追従させるため。
 */
.ds-fv__btns .ds-btn-tel::before {
	content: "";
	display: inline-block;
	width: .9em;
	height: .9em;
	margin-right: .45em;
	vertical-align: -.08em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/*
 * WHY (2026-09-24): クライアント要望「少し暗い印象、明るく親しみやすく」（案件担当者決定）を受け、
 *      チェックマーク付きテキストの横並びから、丸アイコン＋ラベル＋下線の 3 列均等グリッドへ変更する
 *      （旧 WHY: モック v1 で信頼バッジがボタンのように見えて CTA と紛らわしかったため、
 *      装飾を抑えたチェックマーク付きテキストに留めていた）。
 *      PC の円 56px・アイコン 40px は案件担当者の指定値。タブレット・SP は下記メディアクエリで上書き。
 */
.ds-fv__badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-fv__badges li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--ds-fg-soft);
	/* WHY: カンプ実測 19px÷カンプ幅1672px=1.14vw。カンプではバッジ文字がリード文と同サイズ。 */
	font-size: clamp(var(--ds-font-sm), 1.14vw, 19px);
}

.ds-fv__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background-color: #fff;
	/* WHY: 「ごく淡い影」指定。写真グリッドの左端フェード同様、境界を強調しすぎない濃度にする。 */
	box-shadow: 0 2px 8px rgba(26, 26, 26, .10);
}

.ds-fv__badge-icon img {
	display: block;
	width: 40px;
	height: 40px;
}

.ds-fv__badge-label {
	display: inline-block;
	/* WHY (2026-09-25): ラベルが 1 行と 2 行で混在しても下線の高さが揃うよう、ラベルが余白を吸収する。 */
	flex: 1 1 auto;
}

/*
 * WHY: ラベル下の緑線（32×2px #6DBE8A）は装飾のみのため疑似要素にする。
 *      2026-09-25: 旧版はラベルの ::after で、2 行ラベルの線だけ 1 行ぶん下がった（案件担当者指摘）。
 *      li（grid で 3 つとも同じ高さ）の末尾に置き、3 本の高さを揃える。
 */
.ds-fv__badges li::after {
	content: "";
	display: block;
	flex: none;
	width: 32px;
	height: 2px;
	margin-top: 8px;
	background-color: #6DBE8A;
}

/*
 * WHY (2026-09-23): クライアント要望（HP.pdf ①「清掃風景写真を組み合わせたもの」）により、
 *      1枚構成から清掃風景4カットの2×2グリッドへ変更。並びは左上エアコン・右上キッチン・
 *      左下浴室・右下レンジフード。フェードマスクは個々の写真ではなく帯全体の境目として
 *      見せたいため、4カットをまとめる本コンテナ側へ移す（個々の img には掛けない）。
 */
.ds-fv__visual {
	display: grid;
	/* WHY: 1fr（＝minmax(auto,1fr)）だと img の固有幅がトラックの下限になり、
	 *      768〜1024px でグリッドが親より 4px 広がって右端が切れたため、下限を 0 にする。 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 4px;
	height: 100%;
	/* WHY: グリッドの隙間（ガター）を白に見せるための地色。 */
	background: #fff;
	/* WHY: カンプは写真の上に白い半透明パネルを重ねた組み方で、テキスト側と写真の境目に
	 *      硬い縦のエッジが無い。マスクでグリッド左端をフェードさせ、同じ見え方を再現する。 */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 10%, #000 26%);
	        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 10%, #000 26%);
}

.ds-fv__visual picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* WHY: width/height 属性で CLS を防ぎつつ、実際の表示幅・高さは親グリッドセルに追従させる。 */
.ds-fv__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* WHY: 各カットはすでに人物・清掃対象が中心付近に収まるよう個別に切り出し済みのため、中央基準でよい。 */
	object-position: 50% 50%;
	border-radius: 0;
}

@media (max-width: 1024px) {
	.ds-fv__inner {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	/*
	 * WHY: 1カラム化した際、4カットのグリッド全体が縦に潰れないよう固定比率に戻す
	 *      （2026-09-23: 単一 img の aspect-ratio から、グリッドコンテナの aspect-ratio へ変更）。
	 *      1カラム化すると写真が上下に積まれ、テキストとの境目が縦のエッジにならないため左端フェードは不要。
	 */
	.ds-fv__visual {
		height: auto;
		aspect-ratio: 3 / 2;
		-webkit-mask-image: none;
		        mask-image: none;
	}

	.ds-fv__visual img {
		height: 100%;
	}

	/* WHY (2026-09-24): タブレットのキャッチ画像表示幅は案件担当者の指定値（最大 460px）。 */
	.ds-fv__copy picture {
		max-width: 460px;
	}

	/* WHY (2026-09-24): バッジの丸サイズはタブレットで 64px（案件担当者の指定値）。767px 以下はさらに上書き。 */
	.ds-fv__badge-icon {
		width: 64px;
		height: 64px;
	}
}

@media (max-width: 767px) {
	.ds-fv__btns {
		flex-direction: column;
	}

	.ds-fv__btns .ds-btn {
		width: 100%;
	}

	/*
	 * WHY (2026-09-25 再設計): 基準は iPhone SE（375×667px）。ヘッダー 56px を除いた 611px に
	 *      写真・キャッチ・サブ・リード・ボタン・バッジを収める（下部固定 CTA は最上部では非表示）。
	 *      ほかの SP 幅は vw で比例させる。参考画像（クライアント参考_FV_SP_明るい版）の配置:
	 *      上 = エアコン（0〜250px）、下 = キッチン（283px〜）、その間の白地にサブ・リード。
	 *      旧版（FV 全高を 44% / 56% で分割・min-height 100svh）は、男性の顔がサブに被る／写真が縦に大きすぎる／
	 *      男女が白とボタンに埋もれる、の 3 点で案件担当者から指摘（2026-09-25）を受けて廃止した。
	 */
	.ds-fv__inner {
		position: relative;
		isolation: isolate;
		min-height: 0;
	}

	.ds-fv__visual {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		height: auto;
		aspect-ratio: auto;
		margin: 0;
		overflow: hidden;
		background-color: #fff;
	}

	.ds-fv__visual picture {
		position: absolute;
		left: 0;
		width: 100%;
	}

	.ds-fv__visual img {
		height: 100%;
		object-position: 50% 50%;
	}

	/* WHY: エアコン（SP 専用切り出し 3:2）。下端 14vw を白へ抜き、継ぎ目に硬い線を出さない。 */
	.ds-fv__visual picture:nth-child(1) {
		top: 0;
		height: 66.7vw;
		-webkit-mask-image: linear-gradient(180deg, #000 52vw, transparent 66.7vw);
		        mask-image: linear-gradient(180deg, #000 52vw, transparent 66.7vw);
	}

	/* WHY: キッチン（SP 専用切り出し ≒ 1.11:1）。男女の頭がリードのすぐ下に来る位置に置き、
	 *      上端と下端（バッジの白地）を白へ抜く。 */
	/* WHY (2026-09-25): 71vw ではボタン上辺が男性の首に重なり「生首」に見えた（案件担当者指摘）。
	 *      頭〜胸元がボタンの上に見える位置へ（文字ブロックを上げた分とあわせて調整）。 */
	.ds-fv__visual picture:nth-child(2) {
		top: 66vw;
		height: 90vw;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10vw, #000 58vw, transparent 76vw);
		        mask-image: linear-gradient(180deg, transparent 0, #000 10vw, #000 58vw, transparent 76vw);
	}

	/* WHY: 浴室・レンジフード（3, 4 番目）は SP では非表示（案件担当者の指定）。 */
	.ds-fv__visual picture:nth-child(3),
	.ds-fv__visual picture:nth-child(4) {
		display: none;
	}

	/*
	 * WHY: 白は文字の載る右側（キャッチ〜リードの範囲）にだけ重ね、写真全体は白くしない
	 *      （クライアント 17:56「写真をほんの少し白透過し、文字がより見やすく」）。
	 */
	.ds-fv__visual::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, .6) 100%);
		/* WHY: 白はリード文の下（375px で約 100vw）までで止め、硬い境目が出ないよう縦方向にも抜く。 */
		-webkit-mask-image: linear-gradient(180deg, #000 78vw, transparent 100vw);
		        mask-image: linear-gradient(180deg, #000 78vw, transparent 100vw);
	}

	.ds-fv__text {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-self: stretch;
		/* WHY (2026-09-25): 案件担当者指示で文字ブロック（キャッチ〜リード）を約 30px 上げた（22vw → 14vw）。 */
		padding-top: 14vw;
		padding-bottom: 3vw;
	}

	/* WHY: キャッチは右寄せ。幅 57.6vw（375px で 216px）で男性の顔（左 28% 以内）にかからない。 */
	.ds-fv__copy {
		position: relative;
		align-self: flex-end;
		width: 57.6vw;
		margin-bottom: 2vw;
	}

	/*
	 * WHY (2026-09-25): キャッチの緑「笑顔」の下地（エアコン本体・袖）で大きい文字 3:1 を確保するため、
	 *      「笑顔」の背面にだけ白い楕円を敷く。楕円が h1 の枠で切れないよう疑似要素を上下 40%・左右 20% 広げ、
	 *      中心・半径はその枠基準へ換算（元の枠基準で中心 22% / 66%、半径 34% / 45%）。
	 */
	.ds-fv__copy::before {
		content: "";
		position: absolute;
		inset: -40% -20%;
		z-index: -1;
		background: radial-gradient(ellipse 24.3% 25% at 30% 58.9%, rgba(255, 255, 255, .88) 0, rgba(255, 255, 255, .88) 60%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}

	.ds-fv__copy picture {
		max-width: none;
	}

	/* WHY: サブ・リードはキャッチと同じ右寄りのブロック（左端 ≒ 39%）。 */
	.ds-fv__sub,
	.ds-fv__lead {
		align-self: flex-end;
		width: 58vw;
		max-width: none;
		margin: 0;
	}

	.ds-fv__sub {
		font-size: 13px;
		line-height: 1.55;
	}

	.ds-fv__lead {
		margin-top: 1.6vw;
		font-size: 12px;
		line-height: 1.65;
	}

	/* WHY (2026-09-25): 案件担当者指示「テキストに薄いシャドーを入れて見えやすく」。濃色文字なので白くにじませる。 */
	.ds-fv__sub,
	.ds-fv__lead {
		text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 8px rgba(255, 255, 255, .85);
	}

	.ds-fv__copy img {
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(255, 255, 255, .7));
	}

	/* WHY: リードとボタンの間は、キッチンの男性の頭〜胸元をボタンの上に見せる余白（375px で約 82px）。
	 *      ボタンは左寄せ・幅 64vw（最小 220px）で、女性がボタンの右側に見えるようにする。 */
	.ds-fv__btns {
		align-self: flex-start;
		width: max(64vw, 220px);
		max-width: none;
		margin-top: 22vw;
		margin-bottom: 0;
		gap: 2.2vw;
	}

	.ds-fv__btns .ds-btn {
		min-height: 50px;
		padding-top: 8px;
		padding-bottom: 8px;
		/* WHY: 白文字×ブランドオレンジは 3.31:1 のため、太字の大きい文字（18.66px 以上）として 3:1 を満たす 19px を下限にする。 */
		font-size: 19px;
		white-space: nowrap;
	}

	.ds-fv__badges {
		margin-top: 2.4vw;
		margin-bottom: 0;
	}

	.ds-fv__badge-icon {
		width: 56px;
		height: 56px;
		margin-bottom: 6px;
	}

	.ds-fv__badge-icon img {
		width: 40px;
		height: 40px;
	}

	.ds-fv__badges li {
		font-size: 12px;
	}
}

/*
 * WHY (2026-09-25): 文字は px 固定・写真は vw 比例のため、360px 未満ではリード文が相対的に長くなり、
 *      キッチンの男性の頭に重なる（320px 計算: リード下端 325px・頭 ≒ 267px）。キッチンを下げて頭をリードの下へ出す。
 */
@media (max-width: 359px) {
	.ds-fv__visual picture:nth-child(2) {
		top: 82vw;
	}
}

/* ==========================================================================
   04. 施工場所から探す（icon-grid）
   ========================================================================== */

.ds-icon-grid__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WHY(2026-08-24): 「SPで白い余白が多く簡素すぎる、ボタン感が欲しい」という
 *      指摘への対応。.ds-menu__item（08 サービスメニュー）と同じ枠線・角丸・
 *      影の造形言語をカードとして与え、施工場所カードにも触れる対象らしい
 *      見た目を持たせる。
 */
.ds-icon-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 12px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	color: var(--ds-fg);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* WHY: .ds-menu__item:hover と同じ枠線色・影の変化に揃える。アイコン自体の浮き上がり（下の :hover .ds-icon-grid__icon）は既存挙動のため維持し、カード側は移動させず色と影だけで反応させる。 */
.ds-icon-grid__item:hover {
	border-color: var(--ds-cta-surface);
	box-shadow: 0 6px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
}

/*
 * WHY: ベージュの円はアイコン画像自体に焼き込まれているため、CSS 側でも円を
 *      描くと円が二重になる。ここではサイズ調整だけを担う。
 */
.ds-icon-grid__icon {
	display: block;
	width: 100%;
	max-width: 88px;
	transition: transform .2s ease;
}

.ds-icon-grid__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * WHY: アイコンはオレンジの線画のため、背景をオレンジで塗ると図柄が背景に
 *      溶けて見えなくなる。浮き上がりとラベル色の変化でホバーを示す。
 */
.ds-icon-grid__item:hover .ds-icon-grid__icon {
	transform: translateY(-4px);
}

.ds-icon-grid__item:hover .ds-icon-grid__label {
	color: var(--ds-cta-ink);
}

.ds-icon-grid__label {
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	transition: color .2s ease;
}

@media (max-width: 1024px) {
	.ds-icon-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.ds-icon-grid__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.ds-icon-grid__icon {
		max-width: 72px;
	}

	/* WHY: 2列になりセル幅が狭くなるため、PCと同じ padding だとカード内が窮屈になる。列数は現状維持（変更依頼の対象外）で、padding のみ縮める。 */
	.ds-icon-grid__item {
		padding: 16px 8px;
	}
}

/* ==========================================================================
   05. キャンペーンバナー（campaign-banner）
   ========================================================================== */

/*
 * WHY: セクション自体には色・背景を持たせない。背景（登録画像 or
 *      フォールバック写真）は .ds-campaign-banner__photo（このセクションの
 *      直下・.ds-container とは別の要素）が背負う。
 */
.ds-campaign-banner {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * WHY: 登録画像・フォールバック写真いずれの場合も、この要素を共通の
 *      positioning context（position: relative + isolation: isolate）
 *      として使う。登録画像時は子要素の .ds-campaign-banner__photo-img が
 *      絶対配置でこの要素いっぱいに敷かれ（--image 修飾子）、未登録時は
 *      --fallback 修飾子で background-image を敷く。min-height・上下の
 *      境界線は画像の有無にかかわらず帯の高さと輪郭を保つため共通にする。
 *      isolation: isolate はモバイル用オーバーレイ（--fallback::before,
 *      z-index: -1）と .ds-container（z-index: 1）の重なり順をこの帯の中に
 *      閉じ込めるため。
 *      実測（帯1664×380px時、フォールバック写真基準）: cover は要素が画像
 *      （1983×793、比率2.501）より横長のため幅基準で拡大され、拡大後の
 *      画像高は 1664/1983×793=665px。表示できるのは高さの57%だけで、
 *      縦の43%が切り落とされる。min-height を 460px 相当まで拡大し可視率
 *      を69%へ上げ、background-position を center 55% にすることで、
 *      スプレーボトルの頭部・洗面器・泡・タオル・ブラシがすべて収まる
 *      構図にする（実機確認済みの値）。height ではなく min-height にする
 *      のは、CTA追加で本文が伸びても帯が窮屈にならないようにするため。
 *      帯の左半分は背景写真が白く飛んでおり、上端直下の実測 #FFFCF5 と
 *      ページ背景 #F6FAFD のコントラストは1.02:1で、境界が視認できな
 *      かった（右半分の掃除道具が写る部分でのみ帯の輪郭が分かる状態で、
 *      左のCTAが「何の上にも乗っていない」ように見える原因だった）。
 *      既存トークン --ds-line-warm（α.18）では白飛び部分で約1.2:1にしか
 *      ならず見えない。α.35で実装したところ、実機のピクセル採取で境界線
 *      #E9DBCE 対ページ背景 #F5F6FA は1.26:1にとどまり、JPEG圧縮と
 *      アンチエイリアスを経ると通常の閲覧距離ではかなり薄く見えたため、
 *      α.45（rgba(184, 90, 0, .45)）まで強めて上下の境界を明示する。
 *      この境界線は登録画像時にも共通で適用する（帯の輪郭を示す意匠として
 *      画像の有無を問わず必要なため）。
 */
.ds-campaign-banner__photo {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(220px, 26vw, 460px);
	border-top: 1px solid rgba(184, 90, 0, .45);
	border-bottom: 1px solid rgba(184, 90, 0, .45);
}

/* WHY: 画像未登録時のフォールバック背景（写真素材 campaign-cleaning-summer-v1）。登録画像時はここを使わず .ds-campaign-banner__photo-img（絶対配置img）を使う。 */
.ds-campaign-banner__photo--fallback {
	background-image: url("../img/campaign-cleaning-summer-v1.webp");
	background-repeat: no-repeat;
	background-position: center 55%;
	background-size: cover;
}

/*
 * WHY: 登録画像は本文の背面に敷く装飾レイヤー。object-fit: cover で
 *      フォールバック写真と同じ「帯いっぱいに敷いて上下左右が切れうる」
 *      挙動に揃える。z-index を明示しないのは、直後の .ds-container に
 *      z-index: 1 が明示されており、isolation: isolate の中で
 *      z-index: auto の要素はそれより下のスタック順になるため。
 */
.ds-campaign-banner__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-campaign-banner__photo .ds-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

/*
 * WHY: 見出しとCTAを閉じ込めるラッパー。max-widthはここに持たせ、
 *      見出し・CTA個別には持たせない（CTAが見出しの兄弟になったため、
 *      見出し自身の max-width だけでは制約が効かない）。実測でフォール
 *      バック写真の左側（x20〜50%が被写体密度0.00〜0.01で最も安全）は
 *      無地の壁のため、既定（左寄せ）のままコンテナ左寄せで安全域に収まる。
 *      水平位置は自身の margin-left/margin-right で決める（親の
 *      .ds-campaign-banner__photo は flex コンテナだが、直接のflex item は
 *      幅100%固定の .ds-container であり、.ds-campaign-banner__body は
 *      その孫要素にあたるため .ds-campaign-banner__photo 側の
 *      justify-content ではこのブロックの位置を動かせない）。中央寄せ・
 *      右寄せは768px以上で .ds-campaign-banner--align-* 修飾子により
 *      margin と text-align を切り替える。
 */
.ds-campaign-banner__body {
	max-width: min(50%, 560px);
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

/*
 * WHY: 登録画像は運用者の差し替えごとに明暗が変わり、半透明オーバーレイや
 *      text-shadow だけでは文字コントラストを保証できない。不透明な
 *      --ds-bg-warm（#FFF8F2）の板を敷き、文字色 --ds-fg（#1A1A1A）との
 *      組み合わせを画像の内容から独立して固定する（16.54:1、WCAG 1.4.3
 *      通常文字基準4.5:1を大幅に上回る）。フォールバック写真側は実測で
 *      コントラストを確保済み（.ds-campaign-banner__text のWHY参照）
 *      かつ担当判断で意匠を変えない方針のため、この板は登録画像時のみ
 *      適用する。box-sizing: border-box は、この padding を
 *      追加しても .ds-campaign-banner__body の max-width（実効幅）を
 *      超えて広がらないようにするため。
 */
.ds-campaign-banner__photo--image .ds-campaign-banner__body {
	box-sizing: border-box;
	padding: 24px 28px;
	background-color: var(--ds-bg-warm);
	border-radius: var(--ds-radius-md);
}

/*
 * WHY: 見出し。色は var(--ds-fg)（#1A1A1A）とし、サイト全体の見出し
 *      （.ds-heading 参照）に合わせる。旧実装のみオレンジ（#B85A00）の
 *      例外だった。オレンジをCTA（.ds-campaign-banner__cta）だけに
 *      集約することで、帯の中で唯一の有彩色の面がCTAになり、色数を
 *      増やさずに階層が生まれる。旧実装は見出しとCTAが同色でコントラスト
 *      比1.00:1、階層がゼロだった。見出しはテキスト要素のため適用条項は
 *      WCAG 1.4.3（コントラスト（最低限）: 通常文字4.5:1、太字18px以上等
 *      の「大きい文字」は3:1）。実測（レンダリング結果のピクセル採取）で
 *      背景の最頻値は #F8ECDC、影の最暗部は #ECDCC4。var(--ds-fg) は
 *      これらに対し14.94:1・12.93:1を確保でき、通常文字基準4.5:1を
 *      大幅に上回るため、font-size・font-weightを変えても破綻しない。
 *      旧 #B85A00 は最暗部3.47:1で大きい文字基準3:1でしか通らず、
 *      font-weight: 700 と font-size 下限20px以上をセットで維持する
 *      制約が付いていたが、それも不要になる。font-size の上限は
 *      プロジェクトが明示宣言している最大の見出し（.ds-section-head__capsule
 *      h2.ds-heading の32px）を超えないよう36pxとする（旧40pxは
 *      これを上回り階層が逆転していた）。日本語は既定でどの文字間でも
 *      改行されるため、カスタマイザー文言（例:「夏のWクリーニング祭り
 *      実施中」）が「実施」「中」のように単語の途中で割れて折り返る
 *      ことがある。word-break: keep-all でCJKの文字間改行を禁止し、
 *      空白位置でのみ折り返させる（実機確認済み）。
 *      意味論上は運用者が入力する任意文言の見出しとして <h2> にしている
 *      が、表示上は従来の <p> と同じ本文書体・サイズ設計をそのまま維持
 *      したいため、書体だけは見出し用の丸ゴシックへ切り替えない。
 *      style.css で h1〜h6 に font-family: var(--ds-font-family-heading)
 *      !important が一括指定されており、詳細度では勝てないため、この
 *      クラスセレクタ側にも !important を付けて対抗する（h2 は要素
 *      セレクタで詳細度 0,0,1、.ds-campaign-banner__text はクラス
 *      セレクタで 0,1,0 のため、!important 同士の比較ではこちらが勝つ。
 *      IDセレクタ化等の過剰な詳細度は不要）。
 */
.ds-campaign-banner__text {
	position: relative;
	margin: 0;
	color: var(--ds-fg);
	font-family: var(--ds-font-family-base) !important;
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1.4;
	word-break: keep-all;
}

/*
 * WHY: 見出しと同じ左カラム（.ds-campaign-banner__body）・見出し直下に
 *      通常フローで配置する（実測で被写体密度0.00〜0.01の安全域のため、
 *      右下への絶対配置はやめて構造的に衝突を避ける）。.ds-btn は
 *      font-weight・text-decoration等の再利用のみとし、
 *      .ds-btn-primary は付けない（白文字/オレンジ地が2.87:1で、WCAG
 *      1.4.5 テキストコントラスト基準4.5:1を満たさないため）。当初は
 *      バナー専用に #B85A00（白文字4.67:1、基準を満たす上限。#C86200は
 *      4.04:1、#D66A00は3.55:1でいずれも基準未達）を使っていたが、写真の
 *      暖色背景の中で重く沈んで見えるという指摘を受け配色を再設計した。
 *      地をブランドカラー #EE7B27 に固定し、そのトライアド（色相を
 *      120度ずつ回転させた色）を補助アクセントとして限定的に使う
 *      配色にした（旧配色: 地 #EE7800 / 枠 #A85200）。文字は #1A1A1A
 *      のまま（文字 対 地 6.21:1、通常文字基準4.5:1を満たす）。枠は
 *      紫側トライアド #7B27EE を彩度0.70・明度0.40へ調整した #3D1F66
 *      （枠 対 背景 #F8ECDC 11.36:1）。hoverは地 #D46C1F、枠 #2E1750へ
 *      一段濃くしている。矢印（.ds-campaign-banner__cta-arrow）は
 *      緑側トライアド #27EE7B を彩度・明度を落として調整した
 *      #17502F を使う。当初 #1F663D を検討したが、地 #EE7B27 の上で
 *      2.48:1とアクセントとして弱かったため #17502F（3.37:1）へ
 *      補正した。hoverは #123F25（hover地 #D46C1F に対し3.38:1）。
 *      矢印は aria-hidden="true" の純装飾でWCAG 1.4.11の必須対象
 *      ではないが、視覚的アクセントとして機能する濃度を確保する
 *      目的の補正である。
 *      transition に box-shadow を
 *      含めるのは、.ds-btn のベース transition（background-color・
 *      color・border-color の3項目）に box-shadow が無く、影だけ瞬時に
 *      切り替わってしまうため。.ds-btn 自体に focus-visible の
 *      指定が無いため、ここで個別に補う。font-size は従来宣言が無く
 *      グローバルの17pxを継承していた（設計値ではなかった）。他のCTAは
 *      FV（.ds-fv__btns .ds-btn）が clamp(15px, 1.31vw, 22px)、
 *      その他ボックス（.ds-menu__other-cta）が clamp(16px, 1.4vw, 18px)と
 *      明示宣言されており、販促面であるこのCTAだけが最小のままだった。
 *      clamp(16px, 1.25vw, 20px) を明示し、FV 22 > 帯 20 > その他ボックス 18
 *      の序列にする。border-radius: 999px は背景写真内の円形要素
 *      （泡・球状のブラシ・洗面器）と呼応させるデザイン意図で、.ds-btn
 *      の汎用6pxを上書きする。padding（18px 44px）と min-height（60px）
 *      は、このCTAがバナーの主役であるため共通ボタンより一回り大きくする
 *      （.ds-btnのpadding 14px 32pxの継承のみでは不足するため明示する）。
 */
.ds-campaign-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(40px, 3.4vw, 56px);
	padding: 18px 44px;
	min-height: 60px;
	font-size: clamp(16px, 1.25vw, 20px);
	background-color: #EE7B27;
	border: 2px solid #3D1F66;
	border-radius: 999px;
	color: #1A1A1A;
	box-shadow: 0 4px 14px rgba(61, 31, 102, .24);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ds-campaign-banner__cta:hover {
	background-color: #D46C1F;
	border-color: #2E1750;
	color: #1A1A1A;
	box-shadow: 0 6px 18px rgba(61, 31, 102, .30);
}

.ds-campaign-banner__cta:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

.ds-campaign-banner__cta-arrow {
	margin-left: 10px;
	font-size: .9em;
	line-height: 1;
	color: #17502F;
	transition: color .2s ease;
}

.ds-campaign-banner__cta:hover .ds-campaign-banner__cta-arrow {
	color: #123F25;
}

/*
 * WHY: 配置（左/中央/右）はパソコン幅でのみ反映する（カスタマイザーの
 *      「文言・ボタンの配置」control 説明を参照）。左寄せは
 *      .ds-campaign-banner__body（margin-left: 0; margin-right: auto;
 *      text-align: left）の基準スタイルがそのまま該当するため、ここでは
 *      中央・右寄せの2値だけを、.ds-campaign-banner__body 自身の
 *      margin-left/margin-right を動かして上書きする（.ds-campaign-banner__photo
 *      の flex item は幅100%固定の .ds-container のため、justify-content
 *      では本文ブロックの位置を動かせない）。
 */
@media (min-width: 768px) {
	.ds-campaign-banner--align-center .ds-campaign-banner__body {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.ds-campaign-banner--align-right .ds-campaign-banner__body {
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}
}

@media (max-width: 767px) {
	/*
	 * WHY: モバイル幅では背景の縦横比とビューポートの比率が崩れ、cover が
	 *      横方向までトリミングし始める（指示書が明示的に許容している
	 *      代替: 高さ・位置の調整と、必要ならオーバーレイ）。見出し・CTAは
	 *      既に同じ .ds-container 内で縦積みのため、フォールバック写真には
	 *      白の半透明オーバーレイを追加して可読性を確保する。登録画像は
	 *      .ds-campaign-banner__photo--image .ds-campaign-banner__body の
	 *      不透明な可読性板がこの幅でも適用され続けるため、追加のオーバー
	 *      レイは不要（むしろ absolute 配置の .ds-campaign-banner__photo-img
	 *      より背面に沈み効果が出ないため、フォールバック限定にする）。
	 *      配置は modifier にかかわらずこの幅では常に中央寄せに揃える
	 *      （画面幅が狭く左右寄せの余白効果が薄いため）。
	 */
	.ds-campaign-banner__photo {
		height: auto;
		min-height: 240px;
		padding: 28px 0;
	}

	.ds-campaign-banner__photo--fallback {
		background-position: center;
	}

	.ds-campaign-banner__photo--fallback::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(255, 255, 255, .55);
		pointer-events: none;
	}

	.ds-campaign-banner__body {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

/*
 * WHY(2026-10-12): 画像をそのまま表示するモード（--image-only）。本部画像は
 *      正方形で文字が焼き込まれており、cover で敷くと切れるため、
 *      全体表示にした。正方形が中央単独だと浮くため、PCは画像+文言/CTAの
 *      2カラム、SPは縦積み。
 *      .ds-campaign-banner__photo 系（absolute / object-fit: cover /
 *      min-height）は一切使わず専用クラスで全体表示する。帯の上下境界線は
 *      従来の帯と同じ値で揃える。
 */
.ds-campaign-banner--image-only {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--ds-bg-warm);
	border-top: 1px solid rgba(184, 90, 0, .45);
	border-bottom: 1px solid rgba(184, 90, 0, .45);
}

.ds-campaign-banner__image-only {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.ds-campaign-banner__image-wrap {
	width: 100%;
	max-width: 400px;
}

.ds-campaign-banner__aside {
	width: 100%;
	text-align: center;
}

/*
 * WHY(2026-10-12): 既存見出しの word-break: keep-all は空白の無い日本語の
 *      長い文言を折り返せず、狭い列（SP・768px 付近の右列）で横にはみ出した
 *      （実測: 320px 幅で scrollWidth 426px）。画像モードの列内だけ折り返しを許す。
 */
.ds-campaign-banner__aside .ds-campaign-banner__text {
	word-break: normal;
	overflow-wrap: anywhere;
}

/* WHY: 見出しの上にCTAの margin-top が効く既存値は変えず、列内の余白は gap に任せる。 */
.ds-campaign-banner__aside .ds-campaign-banner__cta {
	margin-top: 24px;
}

.ds-campaign-banner__image-link {
	display: block;
	transition: opacity .2s ease;
}

.ds-campaign-banner__image-link:hover {
	opacity: .85;
}

.ds-campaign-banner__image-link:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

/* WHY: 画像は無加工（切り抜き・object-fit 禁止）。height:auto で全体表示する。 */
.ds-campaign-banner__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--ds-radius-md);
}

@media (min-width: 768px) {
	.ds-campaign-banner__image-only--with-text {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
	}

	.ds-campaign-banner__image-only--with-text .ds-campaign-banner__image-wrap {
		flex: 0 0 360px;
		width: 360px;
		max-width: 360px;
	}

	.ds-campaign-banner__image-only--with-text .ds-campaign-banner__aside {
		flex: 1 1 0;
		min-width: 0;
		max-width: 520px;
		width: auto;
		text-align: left;
	}

	.ds-campaign-banner__image-only:not(.ds-campaign-banner__image-only--with-text) .ds-campaign-banner__image-wrap {
		max-width: 360px;
	}
}

@media (max-width: 767px) {
	.ds-campaign-banner--image-only {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-campaign-banner__image-link {
		transition: none;
	}
}

/* ==========================================================================
   06. キャンペーン記事（campaign-posts）
   ========================================================================== */

.ds-campaign-posts__list {
	/* WHY(2026-10-19): 2 列だと 1 件でも画像が約 600px 角になり大きすぎるため PC は 3 列。
	 *      件数が列数に満たないときも中央に寄せるため grid ではなく flex-wrap で並べる。 */
	--ds-campaign-gap: clamp(24px, 2.4vw, 36px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ds-campaign-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WHY(2026-09-26): DSK-085 H6。カード全体がクリックできると一目で分かるよう、
 *      角丸＋枠線＋影を持つ「カード」として.ds-campaign-posts__itemを装飾する
 *      （リンク自体ではなくliを枠にするのは、hover時にサムネイルだけでなく
 *      カード全体を浮かせるため）。色はサイト共通トークンのオレンジ系
 *      （--ds-line-warm＝枠線、--ds-cta-ink＝「詳しく見る」の文字色）を使い、
 *      新しい色は増やさない。box-shadowの色もオレンジみを帯びたグレー
 *      （既存の.ds-campaign-posts__thumb等と同系統）にして温かみを保つ。
 */
.ds-campaign-posts__item {
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-lg);
	box-shadow: 0 4px 16px rgba(26, 26, 26, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ds-campaign-posts__item:hover,
.ds-campaign-posts__item:focus-within {
	box-shadow: 0 10px 28px rgba(214, 63, 0, .18);
	transform: translateY(-4px);
}

.ds-campaign-posts__item {
	display: flex;
	flex: 0 0 calc((100% - var(--ds-campaign-gap) * 2) / 3);
	min-width: 0;
}

/* WHY(2026-10-19): カード内を縦の flex にし、タイトルの行数が違ってもボタンを
 *      カード下端に揃える（横並びカードのボタン位置を一直線にする）。 */
.ds-campaign-posts__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

/* WHY(2026-10-16): アイキャッチを切らずに全体表示する。hover の拡大がはみ出さないよう
 *      overflow:hidden は維持。
 * WHY(2026-10-19): 告知画像は正方形に近いものが多いため、枠を正方形に揃えてカードの
 *      高さを統一する。切らない方針（DSK-097）は保つため contain で収め、余白は淡色。
 * WHY(2026-10-27): 横長の告知画像で上下に余白が出たため、枠を画像の縦横比に合わせる。
 *      カード間の高さ差はボタンを下端に揃えること（.ds-campaign-posts__more）で吸収する。 */
.ds-campaign-posts__thumb {
	overflow: hidden;
	background-color: var(--ds-bg-soft);
}

.ds-campaign-posts__thumb-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}

.ds-campaign-posts__item:hover .ds-campaign-posts__thumb-img,
.ds-campaign-posts__item:focus-within .ds-campaign-posts__thumb-img {
	transform: scale(1.03);
}

/* WHY(2026-10-27): 横並びで縦横比の違う画像が並ぶと、低いカードの余白がボタン上に
 *      片寄って見える。2 件以上かつ横並び（768px 以上）のときだけ、画像枠を
 *      カードの余り高さまで広げて画像を上下中央に置き、余白を上下に振り分ける。 */
@media (min-width: 768px) {
	.ds-campaign-posts__list:has(> .ds-campaign-posts__item:nth-child(2)) .ds-campaign-posts__thumb {
		display: flex;
		flex: 1;
		align-items: center;
	}

	.ds-campaign-posts__list:has(> .ds-campaign-posts__item:nth-child(2)) .ds-campaign-posts__body {
		flex: none;
	}
}

/*
 * WHY: アイキャッチ未設定の投稿でもカードの高さが揃うよう、
 *      正方形のグレー枠を代替表示する。
 */
.ds-campaign-posts__thumb-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--ds-bg-soft);
}

/* WHY(2026-10-19): 一本化でこの欄が販促の主役になるため、タイトルを見出しとして
 *      読める大きさ・太さに上げ、画像との境目に細線を引いて情報面を区切る。 */
.ds-campaign-posts__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px) clamp(24px, 2.4vw, 32px);
	border-top: 1px solid var(--ds-line-warm);
}

.ds-campaign-posts__title {
	margin: 0;
	color: var(--ds-fg);
	font-size: clamp(19px, 1.65vw, 24px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .03em;
	text-wrap: pretty;
}

/* WHY(2026-09-26): DSK-085 H6。「詳しく見る ›」はカードがクリック可能であることを
 *      示す視覚的な合図。矢印はhoverで少し右へ動き、クリックできる感触を補強する。
 * WHY(2026-10-19): トップのキャンペーン表示を記事へ一本化する試作。バナー撤去後も
 *      販促の押し場所が弱くならないよう、文字リンクをバナーCTAと同じ配色の
 *      丸ボタン「詳しくはこちら」にする。リンクはカード全体（<a>）のままで、
 *      これは見た目だけのボタン（span・aria-hidden）。 */
.ds-campaign-posts__more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	margin-top: auto;
	padding: 14px 64px;
	background: linear-gradient(180deg, #F7852B 0%, #E2560B 100%);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(226, 86, 11, .30);
	color: #fff;
	font-size: clamp(18px, 1.5vw, 21px);
	font-weight: 800;
	letter-spacing: .12em;
	transition: box-shadow .2s ease, filter .2s ease;
}

.ds-campaign-posts__item:hover .ds-campaign-posts__more,
.ds-campaign-posts__item:focus-within .ds-campaign-posts__more {
	filter: brightness(.96);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px rgba(226, 86, 11, .38);
}

/* WHY(2026-10-19): 矢印は白丸に収めてボタン右端の「進む」記号として独立させる。 */
.ds-campaign-posts__more-arrow {
	position: absolute;
	top: 50%;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	background-color: #fff;
	border-radius: 50%;
	color: #E2560B;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	/* 「›」はグリフが下寄りに描かれるため、光学的に中心へ持ち上げる */
	padding-bottom: 4px;
	padding-left: 2px;
	transition: transform .2s ease;
}

.ds-campaign-posts__item:hover .ds-campaign-posts__more-arrow,
.ds-campaign-posts__item:focus-within .ds-campaign-posts__more-arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ds-campaign-posts__item,
	.ds-campaign-posts__thumb-img,
	.ds-campaign-posts__more-arrow {
		transition: none;
	}

	.ds-campaign-posts__item:hover,
	.ds-campaign-posts__item:focus-within {
		transform: none;
	}

	.ds-campaign-posts__item:hover .ds-campaign-posts__thumb-img,
	.ds-campaign-posts__item:focus-within .ds-campaign-posts__thumb-img {
		transform: none;
	}

	.ds-campaign-posts__item:hover .ds-campaign-posts__more-arrow,
	.ds-campaign-posts__item:focus-within .ds-campaign-posts__more-arrow {
		transform: none;
	}
}

@media (max-width: 1023px) {
	.ds-campaign-posts__item {
		flex-basis: calc((100% - var(--ds-campaign-gap)) / 2);
	}
}

@media (max-width: 767px) {
	.ds-campaign-posts__item {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   07. お悩み提起（worries）
   ========================================================================== */

.ds-worries__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/*
 * WHY(2026-09-10): 視線誘導 v3・背景設計 v2（設計案_お悩み→解決_視線誘導_v3_2026-09-10.md／
 *      設計案_お悩み→解決_背景設計_v2_2026-09-10.md）で、お悩みカードは 392px→232px 相当へ縮小・軽量化する
 *      （直後の解決カードより明らかに静かに見せるため）。border は従来 var(--ds-line)（無彩色グレー）だったが、
 *      解決側の枠線 rgba(238,120,0,.14) との対比を作るため、暖色系のごく薄いオレンジ rgba(238,120,0,.10) へ変更した。
 *      カード自体に高さは固定せず、イラスト・文字サイズ・paddingの縮小で232px相当に収める（従来と同じ考え方）。
 */
.ds-worries__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	border: 1px solid rgba(238, 120, 0, .10);
	border-radius: 16px;
	padding: 24px 20px 28px;
	box-shadow: 0 8px 24px rgba(85, 85, 85, .07);
}

/* WHY(2026-09-10): 視線誘導 v3・背景設計 v2 で 260px→132px（AC3）。767px以下でも同じ132pxを維持する（v3 §767px以下）ため、
 *      SP専用のさらなる縮小（旧 96px/84px）は行わない。 */
.ds-worries__figure {
	display: block;
	width: 100%;
	max-width: 132px;
	margin: 0 auto 16px;
}

.ds-worries__img {
	display: block;
	width: 100%;
	height: auto;
}

/* WHY(2026-09-10): 視線誘導 v3・背景設計 v2 で 17px→16px・行高1.6。 */
.ds-worries__text {
	margin: 0;
	color: var(--ds-fg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	/* WHY: 短い見出し的なテキストなので、最後の1文字だけが次行に落ちるのを防ぐため各行の文字数を均等配分する */
	text-wrap: balance;
}

/*
 * WHY(2026-09-05): 1カラム縦積みだと3カードの一覧性が悪く縦に間延びするため、SPでも3列のまま各要素を圧縮する方針に変更。
 * WHY(2026-09-05): 400px以下のさらに狭い画面では13pxでも3列がきつくなるため追加で圧縮する。文字は省略せず全文表示を維持する。
 * WHY(2026-09-10): 視線誘導 v3・背景設計 v2（767px以下）で「カード1列・イラスト132px/156pxを維持」が明示された
 *      （案件オーナー承認済み）。1列化でカード内の横幅に余裕ができ、上記2026-09-05の3列圧縮・400px追加圧縮は
 *      不要になったため置き換える（旧WHYは経緯として残す。1024pxのタブレット専用縮小も同じ理由で廃止した＝
 *      基準値が132pxまで小さくなったため中間段階の200pxが逆に拡大表示になってしまうため）。
 * WHY(2026-09-11): クライアント返信「スマートフォン版で見た際の余白が少し気になる／添付イメージのような構成にしたい」
 *      を受けて上記2026-09-10の1列化を見直した。当初は添付イメージのとおり3列にしたが、添付画像は上段と下段で
 *      横幅が違う貼り合わせで、上段はPC版スクリーンショットの縮小と見られる（＝SPを3列にせよという明示要求ではない）。
 *      オーナー裁定により、縦1列のまま「イラスト左・テキスト右」の横長カードへ変更した。狙いは縦の圧縮と、
 *      直後の安心ポイント（横長カード）との語彙統一の両立。イラストは clamp(72px, 22.4vw, 84px) で、
 *      解決側の clamp(86px, 26.5vw, 100px) に対し面積比 1.42 前後を保つ（v3 の階層逆転 1.397 倍を維持）。
 *      実測（320px）: 3列 1325.6px ／ 本方式 1449.6px ／ 中央揃え縦積み 1642.0px ／ v3の値 1907.2px。PCは変更していない。
 */
@media (max-width: 767px) {
	.ds-worries__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ds-worries__item {
		display: grid;
		grid-template-columns: clamp(72px, 22.4vw, 84px) minmax(0, 1fr);
		column-gap: 14px;
		align-items: center;
		min-width: 0;
		padding: 14px 16px 14px 12px;
		border-radius: 12px;
		text-align: left;
	}

	.ds-worries__figure {
		max-width: clamp(72px, 22.4vw, 84px);
		margin: 0;
	}

	/*
	 * WHY(2026-09-20): クライアント 2026-09-19 返信「こんなお悩みはありませんか？の3項目は、スマートフォンで見ると
	 *      フォントが少し小さく、余白も気になる」。14px では 390px 幅で本文が本文欄 220px の半分ほどしか
	 *      埋まらず、カード右側が空いて見えていた。18px へ上げて本文欄を埋め、カード内の padding と
	 *      column-gap も合わせて調整した。イラストは clamp(72px, 22.4vw, 84px) のまま変更しない
	 *      （解決側イラストとの面積比 1.4 前後＝視線誘導 v3 の階層逆転を崩さないため）。
	 *      実測（320/360/375/390/430px）: はみ出し 0・横スクロール 0、カード高 110→111〜114px。PC は変更なし。
	 */
	.ds-worries__text {
		font-size: 18px;
		line-height: 1.5;
		letter-spacing: .02em;
		text-align: left;
		line-break: strict;
		overflow-wrap: anywhere;
	}

	/* WHY(2026-09-20): 上記と同じ返信の「余白」。見出し下線からカードまでの 48px を詰める。
	 *      32px まで詰めると .ds-section-head::after（下線）の描画域（見出し下端＋12px から 20px）が
	 *      カード上端と接し、太さ 6px のストロークが実測でカードへかぶったため 40px で止めた（クリアランス 8px）。
	 *      worries セクションだけにスコープし、他セクションの 48px は変えない。 */
	.ds-worries .ds-section-head {
		margin-bottom: 40px;
	}
}

/*
 * WHY(2026-09-07)(2026-09-08 全面改訂): お悩み3カードとは別枠の安心材料帯。
 *      旧版は画像なし・番号マーカー＋見出し1行だけで、直前のお悩みカード（高さ約180px・
 *      大きなイラスト付き）より視覚的な重心が下がり、「問題提起 → 解決」の流れで
 *      解決側が沈んで見えていた（2026-09-08 実測: 帯162px / 1項目65px）。
 *      クライアント指示（SSOT DSK-069 transition）を受け、暖色地・大きな3行見出し・
 *      社名ハイライト・白カード・イラスト・説明文で解決側の重心を上げる。
 *      カード（.ds-worries__item）とは別クラスのままにして既存スタイルへ影響させない。
 *
 * WHY(2026-09-10)(再設計 v3 で全面改訂): 視線誘導 v3・背景設計 v2 で .ds-worries__band を
 *      .ds-container の外へ出し全幅パネル .ds-worries__solution にした（AC2＝外側角丸なし）。
 *      class名は v3 の想定構造どおり .ds-worries__band-title 等を維持し、外枠だけ solution に
 *      改名した（クラス名を減らし孤立CSSを避けるため）。値は
 *      設計案_お悩み→解決_背景設計_v2_2026-09-10.md／設計案_お悩み→解決_視線誘導_v3_2026-09-10.md
 *      が正本。案件オーナー承認済み。
 */

/*
 * WHY(2026-09-10): 全幅パネルが #worries の下端まで隙間なく続くよう、.ds-section の
 *      padding-bottom（80px/SP48px）だけをこのセクションに限り打ち消す。padding-top は
 *      お悩み見出し手前の余白として機能をそのまま使うため触らない。#worries の id・
 *      scroll-margin-top（.ds-section 由来）は変更していないのでアンカー着地位置は変わらない。
 */
.ds-worries.ds-section {
	padding-bottom: 0;
}

/*
 * WHY(2026-09-10): 背景設計 v2 §背景の設計（お悩み側）。「輪郭のない曇りのベール」2つ＋
 *      下へ行くほどわずかに灰色を重ねるベース。地色は明示せず（ページ地の白に乗せる＝
 *      rgba(85,85,85,X) を透明から重ねるだけで「白の上にX%重ねた色」と同じ見え方になる）。
 *      幅は .ds-container 自体（最大1280px+パディング48px）までで、それ以上のビューポート
 *      端まではページ地の白のまま。
 * WHY(2026-09-10 追記): 初回実装は下地に linear-gradient(180deg) を使い、左のベールも
 *      中心12%・半径210pxでコンテナ左端を割っていたため、1987px幅の実機でコンテナ幅ちょうどに
 *      薄い矩形の段差が見えた（目視確認）。全レイヤーを「左右端に届かない楕円」へ作り替えて解消する。
 *      ベールの中心を 12%/88% から 18%/82% へ寄せたのは、コンテナ内でも端を割らない位置にするため
 *      （設計 v2 はセクション全幅を前提に 12%/88% としていた）。
 * WHY(2026-09-10 追記): Supervisor 指摘4。3層目を横半径120%にしていたため左右端での正規化距離が
 *      0.5/1.2=41.7%となり、透明化開始46%より内側で端に約2%の灰色が残って切れていた（コメントと不一致）。
 *      横半径64%なら端で 0.5/0.64=78.1% となり transparent 78% を超えるため確実に0で終わる。
 *      position: relative は次の ::after（収束光）の配置基準にするため。
 */
.ds-worries > .ds-container {
	position: relative;
	background-image:
		radial-gradient(190px 130px at 18% 34%, rgba(85, 85, 85, .045) 0%, rgba(85, 85, 85, .018) 34%, transparent 70%),
		radial-gradient(210px 150px at 82% 46%, rgba(85, 85, 85, .045) 0%, rgba(85, 85, 85, .018) 34%, transparent 70%),
		radial-gradient(64% 96% at 50% 100%, rgba(85, 85, 85, .045) 0%, rgba(85, 85, 85, .022) 46%, transparent 78%);
	background-repeat: no-repeat, no-repeat, no-repeat;
}

/*
 * WHY(2026-09-10): 視線誘導 v3 §背景の方向表現2「お悩みカード下に中央の明るい通り道」。
 *      カード下端の24px下から始まる白い収束光で、境界先端へ視線を集める。820×260pxは
 *      中心が完全可視のサイズ指定（他の光だまりと同じ扱い）としてCSS半径へ換算（410×130）。
 *      position:absoluteなので高さに影響せず、.ds-worries__solution（margin-top:68pxのあと
 *      position:relativeでDOM順が後）が自身の不透明な背景で自然に上書きするため、光がパネル側へ
 *      はみ出しても余計な境界線は生まれない（要 z-index 調整なし＝実測確認事項）。
 */
.ds-worries > .ds-container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 24px);
	height: 260px;
	background-image: radial-gradient(410px 130px at 50% 0%, rgba(255, 255, 255, .92) 0 28%, rgba(255, 255, 255, .72) 48%, rgba(255, 255, 255, .24) 76%, transparent 100%);
	background-repeat: no-repeat;
	background-position: top center;
	pointer-events: none;
}

/*
 * WHY(2026-09-10): 全幅の独立背景面（AC2）。position/overflow/isolation は .ds-menu と同じ考え方
 *      （装飾の絶対配置基準・はみ出し防止・z-indexをこのセクション内へ閉じる）。
 *      margin-top:68px＝視線誘導v3「カード列下端から境界領域までの余白」。
 *      padding-top:160px＝境界中央の食い込み深さ112px（::beforeのellipse縦半径）＋
 *      「境界中央先端から解決見出し1行目までを48px」の合計（2026-09-10 に76px前提の124pxから修正。
 *      詳細は padding-top 直上の WHY を参照）。padding-bottom:80pxは
 *      .ds-section の既定値（80px）を踏襲した推定値（v2/v3にPC側の明記なし）。
 *      background は下から「朝の光」（925×440→半径460×220）とベースグラデーション
 *      （#FFF3E3→#FFF8F2→#FFFFFF）の2層。
 */
.ds-worries__solution {
	/* WHY(2026-09-08): マーカー色は帯の中だけで使う。グローバルトークン（tokens.css）は増やさない。 */
	--ds-band-mark: #FFE7A3;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: 68px;
	/* WHY(2026-09-10 追記): Supervisor 指摘2。境界の深さを変えたら必ずこの値も追従させる。
	 *      一度「舌76px前提の124px」を放置して先端→見出しが実測12pxになった事故がある。
	 *      現在は全幅V字の深さ150px＋v3指定の48px＝198px。 */
	padding-top: 198px;
	padding-bottom: 80px;
	background-image:
		radial-gradient(460px 220px at 50% 0%, rgba(255, 255, 255, .95) 0 16%, rgba(255, 231, 163, .58) 32%, rgba(255, 231, 163, .18) 58%, transparent 76%),
		linear-gradient(180deg, #FFF3E3 0%, #FFF3E3 22%, #FFF8F2 58%, #FFFFFF 88%, #FFFFFF 100%);
	background-repeat: no-repeat, no-repeat;
}

/*
 * WHY(2026-09-10): 視線誘導v3「白いお悩み面が中央だけ約76px下へ入り込む・幅768px・先端の丸み
 *      48px相当・左右端は34〜38pxの浅いうねりだけ・輪郭線や影は付けない」。タスク指示のとおり
 *      radial-gradientの楕円2枚（中央の食い込み＋左右一律の浅いベース）で構成する。境界直下の
 *      ハイライト（#FFE7A3・直下32%→8px地点18%→20pxで透明）は同じ発想でさらに2層追加し、
 *      白のうしろ（層順で後＝描画は下）に敷いて縁だけ滲ませる。数値はいずれもv3の推奨値からの
 *      算出・推定（「ギザつく場合は停止位置を調整する」との指示どおり近似で成立させる）。
 *      mask等を使わないため @supports の外＝常時成立（AC11）。
 */
/*
 * WHY(2026-09-10 追記): オーナー指摘「キンタマみたいでやだ。↓に凸の▼っぽい感じにして」。
 *      初回・二回目とも radial-gradient の楕円で作っていたため、幅768pxの丸いドームが2つの
 *      ふくらみのように見え、V字として読めなかった。赤線での指示は「左右端から中央へ向かって
 *      まっすぐ下がる全幅のV字」だったので、楕円をやめて clip-path の三角形へ作り替える。
 *      ::before = ハイライト（少し大きいV、#FFE7A3）、::after = 白のV。::after が後に描画されるため
 *      白が手前に来て、V字の縁だけに暖色の細い縁が残る。
 *      深さ150pxは、全幅1987pxでの傾きが約8.6度となり、赤線の傾き（実測で約14度）よりは緩いが、
 *      これ以上深くすると padding-top が増えて余白が間延びするため上限とした（推定）。
 */
.ds-worries__solution::before,
.ds-worries__solution::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.ds-worries__solution::before {
	height: 158px;
	background-color: rgba(255, 231, 163, .55);
}

.ds-worries__solution::after {
	height: 150px;
	background-color: #fff;
}

/* WHY(2026-09-10): .ds-menu .ds-container と同じ考え方。.ds-worries__solution-deco（z-index:-1）より
 *      必ず手前に描画し、isolation:isolate 済みなのでこの z-index は他セクションと競合しない。 */
.ds-worries__solution > .ds-container {
	position: relative;
	z-index: 1;
}

/*
 * WHY(2026-09-10): 既存 .ds-menu__deco と同じ「透明な器＋::before/::after」の2レイヤー方式。
 *      z-index:-1・pointer-events:noneも .ds-menu__deco と同じ。::before は
 *      menu-deco-pop-v3c.webp の再利用（背景設計v2 §背景の設計4）、::after は光線
 *      （視線誘導v3 §背景の方向表現3）。どちらも @supports (mask-image対応) の中でのみ
 *      有効化し、非対応環境ではこの器は完全に透明のまま＝AC11（境界とグラデーションだけで成立）。
 */
.ds-worries__solution-deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.ds-worries__solution-deco::before,
.ds-worries__solution-deco::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

@supports ((-webkit-mask-image: url("../img/menu-deco-pop-v3c.webp")) or (mask-image: url("../img/menu-deco-pop-v3c.webp"))) {
	/* WHY(2026-09-10): 背景設計v2「使用範囲：解決面の上端から360pxまで、色#EE7800、不透明度7.5%、サイズ約115%」。 */
	.ds-worries__solution-deco::before {
		height: 360px;
		background-color: var(--ds-brand);
		-webkit-mask-image: url("../img/menu-deco-pop-v3c.webp");
		mask-image: url("../img/menu-deco-pop-v3c.webp");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: top center;
		mask-position: top center;
		-webkit-mask-size: 115% auto;
		mask-size: 115% auto;
		opacity: .075;
	}
}

@supports ((-webkit-mask-image: url("../img/band-rays-1920.webp")) or (mask-image: url("../img/band-rays-1920.webp"))) {
	/*
	 * WHY(2026-09-10): 視線誘導v3「中央ほど長く・最大不透明度12%」の5本の光線。band-rays-1920.png/webp は
	 *      親が別途配置した1920×900pxのアルファ画像（本ファイルはCSSからの参照のみ）。パネル幅に追随させる
	 *      ため mask-size は固定1920pxではなく 100% auto（.ds-menu__deco::beforeの考え方と同じ、ただし
	 *      repeat-yは不要＝1回だけ表示するので no-repeat）。
	 */
	/* WHY(2026-09-10 追記): opacity .12 では #FFE7A3 を #FFF3E3 の上に載せても肉眼で差が出ず、
	 *      光線がまったく見えなかった（1987px幅のChromeで目視）。素材を用意した意味が消えるため .30 へ上げた。
	 *      可読性の担保: #FFF3E3 に #FFE7A3 を30%重ねた最悪値 rgb(255,239,207) の上で、この面に直接載る
	 *      最小文字（帯見出し1行目 22px / #555）のコントラストは 6.6:1 で 1.4.3 の 4.5:1 を満たす。
	 *      カード内の本文は白カード（z-index:1のコンテナ側）に載るため、この層の影響を受けない。
	 * WHY(2026-09-10 追記): 高さ420pxで切ると光線の途中に水平の切り口が出るため、560pxへ広げたうえで
	 *      2枚目のマスク（下方向へのフェード）と合成して末端を自然に消す。mask-composite は
	 *      標準の intersect と WebKit の source-in を併記する。 */
	.ds-worries__solution-deco::after {
		height: 560px;
		background-color: var(--ds-band-mark);
		-webkit-mask-image: url("../img/band-rays-1920.webp"), linear-gradient(to bottom, #000 0 38%, rgba(0, 0, 0, .35) 72%, transparent 100%);
		mask-image: url("../img/band-rays-1920.webp"), linear-gradient(to bottom, #000 0 38%, rgba(0, 0, 0, .35) 72%, transparent 100%);
		-webkit-mask-repeat: no-repeat, no-repeat;
		mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: top center, top center;
		mask-position: top center, top center;
		-webkit-mask-size: 100% auto, 100% 100%;
		mask-size: 100% auto, 100% 100%;
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
		opacity: .30;
	}
}

.ds-worries__band-title {
	margin: 0 0 26px;
	text-align: center;
}

/* WHY(2026-09-08): 見出しは3行組みで固定する（クライアント添付イメージの構成）。 */
.ds-worries__band-line {
	display: block;
}

/*
 * WHY(2026-09-10): 視線誘導v3「1行目22px/700/#555、2行目30px/800/#D63F00、3行目44px/800/#1A1A1A」
 *      （AC5＝3行目44px/800）。旧実装は3行とも26px/800で均一だった。line-heightと行間marginは
 *      v2/v3に明記が無いため、既存の帯見出し（旧26px/1.55）から見た目の詰まり方を保つ推定値。
 */
.ds-worries__band-line--1 {
	color: var(--ds-fg-soft);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
}

.ds-worries__band-line--2 {
	margin-top: 4px;
	color: var(--ds-cta-ink);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.4;
}

.ds-worries__band-line--3 {
	margin-top: 6px;
	color: var(--ds-fg);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.3;
}

/*
 * WHY(2026-09-08): 社名だけオレンジ＋マーカー。色は --ds-cta-ink（#D63F00）。
 *      マーカー地 #FFE7A3 とのコントラストは 3.76:1 で、26px/700 は WCAG 1.4.3 の
 *      「大きい文字」基準 3:1 を満たす。SP でも 20px/800 = 大きい文字の範囲に収める。
 *      inline のまま背景グラデーションを敷き、折り返しても各行に線が付くよう clone する。
 *      WHY(2026-09-10): 親の .ds-worries__band-line--2 が30px/800/var(--ds-cta-ink)になったため
 *      この要素の指定は実質そのまま（色が重複するだけで害はない）。マーカーは維持。
 */
.ds-worries__band-brand {
	color: var(--ds-cta-ink);
	background-image: linear-gradient(transparent 62%, var(--ds-band-mark) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ds-worries__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WHY(2026-09-10): 背景設計v2「解決カードは389×320px、枠線rgba(238,120,0,.14)、
 *      影0 16px 36px rgba(214,63,0,.10)程度。問題側より浮いて見えることが重要」。
 * WHY(2026-09-10 追記): 元は ::before（光だまり、z-index:-1）をこのカードの背面へ閉じ込めるために
 *      z-index:0 を置いていたが、その ::before は不可視のため削除したので z-index:0 も外した。
 *      .ds-worries__solution-deco（z-index:-1）がカード面へ回り込まないことは、装飾が -1、
 *      コンテンツ側の .ds-worries__solution > .ds-container が z-index:1 であることで既に保証されており、
 *      カード個別の z-index は関与しない（Supervisor round3 指摘2）。position:relative は
 *      番号円（position:absolute）の配置基準として必要なので残す。
 */
.ds-worries__point {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background-color: #fff;
	border: 1px solid rgba(238, 120, 0, .14);
	border-radius: 16px;
	padding: 26px 20px 24px;
	box-shadow: 0 16px 36px rgba(214, 63, 0, .10);
	text-align: center;
}

/*
 * WHY(2026-09-10): 背景設計v2「解決カード3枚の中心に約320×280pxの白い楕円光」は実装しない。
 *      Supervisor 指摘5。初回実装（.ds-worries__point::before / z-index:-1 / 320×280px）は
 *      不透明な白カード（389×約298px）より小さく、カードが z-index:0 でスタッキング文脈を作るため
 *      カード背景の裏へ完全に隠れて一切見えなかった（computed で 320×280px / z-index:-1 を実測）。
 *      v2 の指定自体が「不透明カードより小さい背面光」という矛盾を含むため、推測で補わず削除する。
 *      解決カードを浮かせる役割は box-shadow が担っており視覚上の欠落はない。
 *      復活させる場合はカード外へにじむサイズか、UL 側への3点配置として設計し直すこと。
 */

/*
 * WHY(2026-09-10): 視線誘導v3・背景設計v2「番号円44px、背景 #D63F00（--ds-cta-ink）、
 *      白文字16px/800」（AC6）。白文字16px/800とのコントラストは --ds-cta-ink の
 *      トークン定義どおり4.60:1（tokens.css参照）でWCAG通常文字基準4.5:1を満たす。
 *      旧 --ds-cta-surface（#FC5210）はコントラスト3.31:1で「大きい文字」基準でしか
 *      通らなかったため、16px通常文字化にあわせて --ds-cta-ink へ差し替えた。
 */
.ds-worries__point-num {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background-color: var(--ds-cta-ink);
	border-radius: 50%;
	color: #fff;
	font-family: var(--ds-font-family-heading);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

/* WHY(2026-09-10): 背景設計v2・視線誘導v3で108px→156px（AC3・AC4＝132pxとの面積比約1.397倍）。767px以下も維持。 */
.ds-worries__point-figure {
	display: block;
	width: 156px;
	margin: 0;
}

/*
 * WHY(2026-09-08): イラストは円形ビネットの外側にクリーム地（#FEF8F0 前後）の余白を持つ PNG のため、
 *      白いカードの上では薄い正方形の縁として見えてしまう（Supervisor round2 の指摘6）。
 *      3 枚とも円の半径は canvas 幅の 43.0〜43.5%（2026-09-08 に canvas でピクセル走査して実測）なので、
 *      44% で切り抜けば絵を欠けさせずに四隅だけを落とせる。
 */
.ds-worries__point-img {
	display: block;
	width: 100%;
	height: auto;
	clip-path: circle(44%);
}

/* WHY(2026-09-08): flex 行内でテキストを折り返し可能にするため min-width: 0 が必須（無いと320pxで横スクロールする）。 */
.ds-worries__point-body {
	min-width: 0;
	width: 100%;
}

/* WHY(2026-09-10): 背景設計v2「解決カード見出しの文字色を#D63F00に（現在は--ds-fg）」。サイズ17pxは維持。 */
.ds-worries__point-text {
	margin: 0 0 6px;
	color: var(--ds-cta-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

/* WHY(2026-09-08): マーカーは文字幅にだけ掛けたいので inline 要素へ敷く（p へ敷くと空白部分まで塗られる）。 */
.ds-worries__point-mark {
	background-image: linear-gradient(transparent 62%, var(--ds-band-mark) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* WHY(2026-09-10): 背景設計v2・視線誘導v3で13px→14px・行高1.75。白約7.46:1／#FFF8F2約7.09:1／
 *      #FFF3E3約6.81:1のいずれもWCAG通常文字基準4.5:1を満たす（v2 §背景の設計 解決側 本文記載）。 */
.ds-worries__point-desc {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	text-align: left;
}

/* WHY(2026-09-10): 視線誘導v3「CTAは解決カード3枚の後ろに1つだけ（見出し直後ではない）」（AC7）。 */
.ds-worries__cta {
	margin: 40px 0 0;
	text-align: center;
}

/*
 * WHY(2026-09-10): v2/v3仕様のCTAサイズ「280×58px」。.ds-btn-primary の共通指定（背景色・枠）は
 *      そのまま使い、寸法・font-size・weight・角丸だけをこのセクション内で明示指定する。
 *      当初は min-width/min-height だけで寄せていたが、それでは共通指定を継承したままになった
 *      （下の 2026-09-10 追記を参照）。
 * WHY(2026-09-10 追記): Supervisor 指摘3。min-width/min-height だけでは共通 .ds-btn の
 *      padding:14px 32px / border-radius:8px / font-weight:700 と .ds-btn-primary の
 *      font-size:clamp(19px,1.31vw,22px) をそのまま継承し、実測 280×67.2px / 22px / 700 /
 *      角丸8px と承認済み仕様（280×58px / 20px・800 / 角丸29px）から外れていた。
 *      このセクション内だけ明示指定する。font-size 20px は .ds-btn-primary が要求する
 *      19px 下限を満たすため、白文字 3.31:1 の「大きい文字」扱いは維持される。
 * WHY(2026-09-10 追記): 角丸だけは承認済みカンプのピル形状（29px）を採らず、サイト共通の
 *      --ds-radius-md（8px）へ揃える（オーナー裁定 2026-09-10「おすすめの方法で」）。
 *      理由: 同じ .ds-btn.ds-btn-primary を使うFV（fv.php:35）と見積りセクション（estimate.php:37）が
 *      共通の --ds-radius-md（8px）を継承しており、ここだけピルにすると同一文言・同一クラスの
 *      ボタンが場所ごとに別物に見える。（SP追従CTAは .ds-sp-cta__link という別クラスで角丸4pxのため
 *      この比較の対象外。2026-09-10 に「追従バーも8px」という誤った根拠を訂正した。）今回の目的である
 *      階層逆転は寸法（280×58px）・文字（20px/800）・配置で達成しており、角丸は寄与しない。
 *      カンプはあくまで方向性の提示で、角丸の値まで意識的に承認されたものではない。
 */
.ds-worries__cta .ds-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 280px;
	height: 58px;
	padding: 0 24px;
	border-radius: var(--ds-radius-md);
	font-size: 20px;
	font-weight: 800;
}

/*
 * WHY(2026-09-10): 視線誘導v3「見出しサイズはv1の28px／22px／30px／44pxを維持します」
 *      （767px以下でも縮小しない、AC5）。.ds-section-head__capsule h2.ds-heading は全セクション
 *      共通クラスで、767px/1024px用の汎用縮小ルール（本ファイル内）が既にあるため、詳細度で
 *      勝つスコープ付きセレクタをメディアクエリの外に置いて worries セクションだけ一定の28pxへ
 *      固定する（他セクションの縮小挙動は変更しない＝作業範囲外に触れない）。
 */
.ds-worries .ds-section-head__capsule h2.ds-heading {
	font-size: 28px;
}

/*
 * WHY(2026-09-10): 視線誘導v3 §767px以下・背景設計v2 §767px以下。カードは1列、イラストは
 *      132px/156pxを維持するため .ds-worries__point-num・-figure・-text・-desc は上書き不要
 *      （PCと同じ値のまま）。旧SP実装（grid-template-columns:30px 60px minmax(0,1fr) の横並び）は
 *      解決カードが320px高の縦構成に変わったため撤去し、PCと同じ縦積み（flex-direction:column）を
 *      そのまま使う（タスク指示「作り直しになる」に対応）。
 * WHY(2026-09-11): クライアント返信「スマートフォン版で見た際の余白が少し気になる／添付イメージのような構成にしたい」
 *      を受け、上記2026-09-10の縦積み（1列）を置き換えて横長カード1列×3段（番号→画像→本文のgrid横並び）へ
 *      変更した。v3の階層逆転（解決側イラストの面積比1.397倍）は固定値132px/156pxではなくclamp()の比率で
 *      維持している（320〜767pxで約1.40〜1.43倍）。PCは変更していない。
 */
@media (max-width: 767px) {
	.ds-worries > .ds-container {
		background-image:
			radial-gradient(65% 180px at 50% 44%, rgba(85, 85, 85, .04) 0%, rgba(85, 85, 85, .015) 45%, transparent 75%),
			linear-gradient(180deg, transparent 0%, transparent 18%, rgba(85, 85, 85, .025) 55%, rgba(85, 85, 85, .045) 100%);
		background-repeat: no-repeat, no-repeat;
	}

	.ds-worries > .ds-container::after {
		width: 130vw;
		left: 50%;
		right: auto;
		height: 180px;
		transform: translateX(-50%);
		background-image: radial-gradient(65vw 90px at 50% 0%, rgba(255, 255, 255, .88) 0 40%, transparent 100%);
	}

	.ds-worries__solution {
		margin-top: 48px;
		/* WHY(2026-09-10 追記): Supervisor 指摘2。境界の深さを変えたら必ず追従させる。
		 *      現在は全幅V字の深さ96px＋v3のSP指定36px＝132px。 */
		padding-top: 132px;
		padding-bottom: 72px;
		background-image:
			radial-gradient(75vw 180px at 50% 0%, rgba(255, 255, 255, .90) 0 16%, rgba(255, 231, 163, .45) 32%, rgba(255, 231, 163, .16) 58%, transparent 76%),
			linear-gradient(180deg, #FFF3E3 0%, #FFF3E3 22%, #FFF8F2 58%, #FFFFFF 88%, #FFFFFF 100%);
	}

	/* WHY(2026-09-10): 視線誘導v3 §767px以下「中央の食い込み52〜58px・先端の丸み28〜32px相当・
	 *      白面の幅は画面幅の82〜88%」。パネル自体がビューポート全幅なので % 指定で追随させる。 */
	/* WHY(2026-09-10 追記): PCと同じくclip-pathの全幅V字へ作り替える（オーナー指摘「▼っぽく」）。
	 *      深さ96pxは、390px幅での傾きが約26度でPC（約8.6度）より急になる。狭い画面では
	 *      同じ深さだと角度が寝すぎてV字に見えないため、絶対値ではなく見た目の角度を優先した（推定）。 */
	.ds-worries__solution::before {
		height: 102px;
	}

	.ds-worries__solution::after {
		height: 96px;
	}

	/*
	 * WHY(2026-09-10 追記): 視線誘導v3は「見出しサイズはv1の28/22/30/44pxを維持」としていたが、
	 *      390px の実機で「お任せください！」が 44px×8文字＝352px となり、利用可能幅342pxを超えて
	 *      「お任せくださ／い！」と語中で割れた（目視確認）。SP だけ級数を下げる。
	 *      34px なら 272px で1行に収まる。2行目は文節区切り（kdc_phrased_html）があるため
	 *      26px で2行に折れても語中では割れない。PC の 22/30/44px は変更しない。
	 */
	.ds-worries__band-line--1 {
		font-size: 20px;
	}

	.ds-worries__band-line--2 {
		font-size: 26px;
	}

	.ds-worries__band-line--3 {
		font-size: 34px;
	}

	@supports ((-webkit-mask-image: url("../img/menu-deco-pop-v3c.webp")) or (mask-image: url("../img/menu-deco-pop-v3c.webp"))) {
		/* WHY(2026-09-10): 背景設計v2 §767px以下「mask装飾：上端から260px、不透明度5%」。 */
		.ds-worries__solution-deco::before {
			height: 260px;
			opacity: .05;
		}
	}

	@supports ((-webkit-mask-image: url("../img/band-rays-1920.webp")) or (mask-image: url("../img/band-rays-1920.webp"))) {
		/* WHY(2026-09-10): 視線誘導v3 §767px以下「光線は3本、不透明度7〜10%」。同じ画像のまま
		 *      mask-sizeを拡大して中央寄りだけを見せ、外側2本を画面外へ追い出す近似実装（推定）。 */
		/* WHY(2026-09-10 追記): 不透明度は **PC 30% / 767px以下 10%** で確定。PCの30%は
		 *      12%では光線が視認できなかったため0/12/20/30%の比較画面をオーナーへ提示して得た裁定
		 *      （「30%のまま＝現状のまま」）で、その時点の現状がPC .30 / SP .10 だった。
		 *      SPはv3の仕様値（7〜10%）の範囲内であり、パネル幅が狭くmask-sizeも230%へ拡大して
		 *      中央寄りだけを見せているため、PCと同じ強さにすると縞に見えるおそれがある。
		 *      幅ごとに値が違うのは意図的で、実装漏れではない。 */
		.ds-worries__solution-deco::after {
			height: 280px;
			-webkit-mask-size: 230% auto;
			mask-size: 230% auto;
			opacity: .10;
		}
	}

	.ds-worries__points {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ds-worries__point {
		display: grid;
		grid-template-columns: 34px clamp(86px, 26.5vw, 100px) minmax(0, 1fr);
		column-gap: 6px;
		align-items: center;
		padding: 12px 8px;
		text-align: left;
	}

	.ds-worries__point-num {
		position: static;
		width: 34px;
		height: 34px;
		font-size: 13px;
	}

	.ds-worries__point-figure {
		width: clamp(86px, 26.5vw, 100px);
	}

	.ds-worries__point-text {
		font-size: 15px;
		line-height: 1.45;
	}

	.ds-worries__point-desc {
		font-size: 13px;
		line-height: 1.65;
	}

	/* WHY(2026-09-10 追記): Supervisor 指摘3。v2 の SP は「幅100%・最大320px」だったが、v3 が
	 *      「CTA 280 × 58px を維持」で上書きしている。320px ビューポートでも
	 *      320 − 左右パディング40px = 280px でちょうど収まるため、PC と同じ寸法のままにする。
	 *      SP 用の幅上書きは削除した（背面の光だまりも上位ルールごと削除済み。指摘5）。 */
}

/* ==========================================================================
   08. サービスメニュー（料金アコーディオン）（menu）
   ========================================================================== */

/*
 * WHY: ポップ版は背景を暖色にして前後セクション（背景 #F7FAFC）との境界を
 *      波形で作る。波形SVGと背景装飾（.ds-menu__deco）の絶対配置の基準に
 *      するため position: relative、はみ出し防止に overflow: hidden。
 *      上下余白は波形の高さぶんを確保するため 80px → 112px に広げる。
 *      isolation: isolate は、.ds-menu__deco・波形::before/::after・
 *      .ds-container の z-index 順序をこのセクション内に閉じ込め、他
 *      セクション（追従CTA等）の z-index と干渉しないようにするため。
 */
.ds-menu {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 112px;
	padding-bottom: 112px;
	/* WHY (2026-08-23): 旧 --ds-bg-section-warm (#FFF9F2) から統一。差が 1 で他セクションと
	 *      見分けがつかないのに別トークンで持っていたため（使い分けの基準は tokens.css 参照）。 */
	background-color: var(--ds-bg-warm);
}

/*
 * WHY: 前後セクションの地色（#F7FAFC）がこのセクションへ波形で食い込んで
 *      見えるようにする境界線。振幅は48px上限（本文領域を圧迫しないため）。
 *      同じSVGを上下で共有し、下側だけ scaleY(-1) で反転させる。
 *      制御点のy幅と実効振幅（描画される曲線の実際の変動幅）は一致しない
 *      （交互の制御点が打ち消し合うため）。このpathは制御点の前後で同じy値
 *      を持たせる「イーズ」形状にし、実効振幅32px p-p（200分割サンプリング
 *      で実測・数値検証済み）を確保している。
 */
.ds-menu::before,
.ds-menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,0 L1440,0 L1440,36 C1200,36 960,4 720,4 C480,4 240,36 0,36 Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.ds-menu::before {
	top: 0;
}

.ds-menu::after {
	bottom: 0;
	transform: scaleY(-1);
}

/*
 * WHY: 装飾は2レイヤー構成にする。.ds-menu__deco 自体は配置専用の透明な器で、
 *      背景色もマスクも持たせない。
 *      ::before は menu-deco-pop-v3c.webp をマスクとして使う円レイヤー
 *      （塗りは var(--ds-brand) のみ、指示書§0のブランド色制約）。着色は
 *      @supports (mask-image対応) の中でのみ有効化し、ベースルールには
 *      background-color を書かない。非対応環境でベースルールに色が付いて
 *      いると、mask が効かないままセクション全面がオレンジのベタ塗りに
 *      なる事故が起きるため、その防止策として @supports の外へ絶対に
 *      background-color を出さない。
 *      ::after は粒・四方向の輝き・短い点線の弧を SVG data URI で直描き
 *      する細部レイヤー（v3cのマスク画像だけでは粒等の細部が潰れるため）。
 *      z-index: -1 は波形（z-index: auto）より確実に背面へ落とすため
 *      （.ds-menu の isolation: isolate でスタッキング文脈を閉じている前提）。
 *      WHY(2026-09-07): アコーディオン(<details>)展開でセクション高さが
 *      変わると、高さに追随する mask-size: cover / background-size:
 *      100% 100% は縦方向に拡大・引き伸ばされて見える。そのため両レイヤー
 *      とも高さ追随をやめ、幅基準で比率固定に変更した。両レイヤーとも
 *      幅×1144/1375 のタイルを上寄せで縦にリピートする。::after は svg
 *      の width/height 属性で比率を揃える。
 */
.ds-menu__deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.ds-menu__deco::before {
	content: "";
	position: absolute;
	inset: 0;
}

@supports ((-webkit-mask-image: url("../img/menu-deco-pop-v3c.webp")) or (mask-image: url("../img/menu-deco-pop-v3c.webp"))) {
	.ds-menu__deco::before {
		background-color: var(--ds-cta-surface);
		-webkit-mask-image: url("../img/menu-deco-pop-v3c.webp");
		mask-image: url("../img/menu-deco-pop-v3c.webp");
		-webkit-mask-repeat: repeat-y;
		mask-repeat: repeat-y;
		-webkit-mask-position: top center;
		mask-position: top center;
		-webkit-mask-size: 100% auto;
		mask-size: 100% auto;
		opacity: .10;
	}
}

/*
 * WHY: 粒6個・四方向の輝き4個・短い点線の弧3本。すべてオレンジ1色
 *      （%23FC5210 のみ、指示書§0）。viewBox を 0 0 100 100 にして
 *      background-size: 100% auto で敷くことで、SVG内のx座標がそのまま
 *      セクション幅に対する%として扱える。配置はカード列（中央帯）を
 *      避けるため左端0〜18%・右端82〜100%の範囲内に収め、カード間の
 *      隙間から中央帯の装飾が覗かないようにする。
 *      WHY(2026-09-07): 両レイヤーとも幅×1144/1375 のタイルを上寄せで
 *      縦にリピートする。::after は svg の width/height 属性で比率を
 *      揃える。
 */
.ds-menu__deco::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='83.2' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23FC5210'%3E%3Ccircle cx='3' cy='8' r='0.8'/%3E%3Ccircle cx='10' cy='14' r='0.6'/%3E%3Ccircle cx='6' cy='24' r='0.7'/%3E%3Ccircle cx='13' cy='52' r='0.9'/%3E%3Ccircle cx='4' cy='70' r='0.6'/%3E%3Ccircle cx='96' cy='9' r='0.7'/%3E%3Ccircle cx='90' cy='20' r='0.9'/%3E%3Ccircle cx='94' cy='46' r='0.6'/%3E%3Ccircle cx='86' cy='62' r='0.8'/%3E%3Ccircle cx='97' cy='86' r='0.7'/%3E%3Cpath d='M11,32 C11.3,33.7 13,33.92 13,34 C13,34.08 11.3,34.3 11,36 C10.7,34.3 9,34.08 9,34 C9,33.92 10.7,33.7 11,32 Z'/%3E%3Cpath d='M5,78.2 C5.27,79.73 6.8,79.93 6.8,80 C6.8,80.07 5.27,80.27 5,81.8 C4.73,80.27 3.2,80.07 3.2,80 C3.2,79.93 4.73,79.73 5,78.2 Z'/%3E%3Cpath d='M89,28 C89.3,29.7 91,29.92 91,30 C91,30.08 89.3,30.3 89,32 C88.7,30.3 87,30.08 87,30 C87,29.92 88.7,29.7 89,28 Z'/%3E%3Cpath d='M95,70.2 C95.27,71.73 96.8,71.93 96.8,72 C96.8,72.07 95.27,72.27 95,73.8 C94.73,72.27 93.2,72.07 93.2,72 C93.2,71.93 94.73,71.73 95,70.2 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FC5210' stroke-width='0.6' stroke-dasharray='1.2 1.2' stroke-linecap='round'%3E%3Cpath d='M2,42 Q8,38 15,48'/%3E%3Cpath d='M85,50 Q91,44 98,56'/%3E%3Cpath d='M84,90 Q91,85 99,95'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: top center;
	opacity: .10;
}

/* WHY: .ds-menu__deco（z-index: -1）より必ず手前に描画されるよう明示する。isolation: isolate 済みなので、この z-index はセクション内に閉じ、他セクション（追従CTA等）と競合しない。 */
.ds-menu .ds-container {
	position: relative;
	z-index: 1;
}

.ds-menu__list {
	max-width: 960px;
	margin: 0 auto;
}

/*
 * WHY: 「下方向にずれた色付きの影＋弱い拡散影」の2層。1層目の 0 4px 0 が
 *      紙片の厚みを作る。ここを普通のぼかし影にすると管理画面のリストに
 *      見た目が戻ってしまう。
 *      scroll-margin-top は .ds-section と同じ理由・同じ暫定値（100px）。
 *      04アイコングリッドから #menu-aircon 等へアンカー着地する先はこの
 *      <details> 本体（id もここに付いている）のため、.ds-section だけでは
 *      効かず個別に指定する必要がある。ヘッダー実装確定後に両方まとめて調整。
 */
.ds-menu__item {
	margin-bottom: 14px;
	overflow: hidden;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	scroll-margin-top: 100px;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ds-menu__item:hover {
	border-color: var(--ds-cta-surface);
	transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
}

.ds-menu__item[open] {
	border: 2px solid var(--ds-cta-surface);
	box-shadow: 0 6px 0 rgba(238, 120, 0, .10), 0 10px 24px rgba(238, 120, 0, .10);
}

.ds-menu__summary {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	list-style: none;
	cursor: pointer;
}

.ds-menu__summary::-webkit-details-marker {
	display: none;
}

.ds-menu__icon {
	display: block;
	flex-shrink: 0;
	width: 64px;
}

.ds-menu__icon-img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * WHY(2026-08-24 更新): 元は「金額はメニュー名と同程度の文字サイズに留める」
 *      方針だったが、SSOT DSK-043 (C-3) 裁定(a) によりクライアント要望どおり
 *      金額を大きく見せる方向へ確定した（.ds-menu__price-value 側を参照）。
 *      名前側のサイズはこの裁定の対象外のため18px（767px以下16px）を維持する。
 */
.ds-menu__name {
	color: var(--ds-fg);
	font-size: 18px;
	font-weight: 700;
}

/*
 * WHY: ＋／−の記号だけでは押せる範囲が分かりにくいため、丸いボタン風の
 *      背景を敷いて押下領域を視覚化する。開いている行は背景色を反転させ、
 *      一覧の中でどれが開いているか一目で分かるようにする。
 */
.ds-menu__summary::after {
	content: "＋";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	margin-left: auto;
	background-color: var(--ds-bg-warm);
	border-radius: 50%;
	color: var(--ds-cta-ink);
	font-size: 20px;
	font-weight: 400;
}

.ds-menu__item[open] .ds-menu__summary::after {
	content: "−";
	background-color: var(--ds-cta-surface);
	color: #fff;
}

.ds-menu__body {
	padding: 0 24px 24px;
}

/* WHY: 料金チケット。暖色の地に左端のオレンジのアクセントバーで金額の起点を示す。 */
.ds-menu__price {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px;
	padding: 16px 20px 16px 24px;
	background-color: var(--ds-bg-ticket);
	border-radius: 16px;
}

.ds-menu__price::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 4px;
	height: 24px;
	background-color: var(--ds-cta-surface);
	border-radius: 2px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* WHY(2026-08-24): SSOT DSK-043 (C-3) 裁定(a)。クライアント要望どおり金額を大きく見せる方向へ確定したため拡大（767px以下は下の@mediaで28px/800）。 */
.ds-menu__price-value {
	color: var(--ds-fg);
	font-size: 32px;
	font-weight: 800;
}

/* WHY: 元は条件文とセットの注記だったが、条件は.ds-menu__conditionへ分離したため「税込」のみを料金の脇に小さく添える表示に変わった。 */
.ds-menu__price-note {
	color: var(--ds-fg-soft);
	font-size: 13px;
	line-height: 1.6;
}

/*
 * WHY(2026-08-21): 160px固定だと3:2の写真が上下に切れて人物の頭が欠けるため、
 *      写真の比率（3:2）に枠を合わせ、幅は460pxで頭打ちにして中央寄せする
 *      （2026-08-21 実機比較で決定）。枠線・角丸・影は元のプレースホルダから維持する。
 * WHY(2026-08-24): 構成変更で写真がカード内の先頭要素になったため、直下に
 *      続く適用条件との余白を margin-bottom で持たせる。
 */
.ds-menu__photo {
	display: block;
	height: auto;
	aspect-ratio: 3 / 2;
	max-width: 460px;
	margin: 0 auto 16px;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--ds-line-warm);
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(238, 120, 0, .06);
}

.ds-menu__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* WHY(2026-08-24): クライアント図の構成変更で新設。適用条件（要件定義書§5-1の確定値・文言は変更しない）を写真直下に単独行で出す。 */
.ds-menu__condition {
	margin: 0 0 12px;
	color: var(--ds-fg);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
}

/* WHY(2026-09-07): ハウスワイドのみ原典に「マンションの場合」という前置きラベルがある。.ds-menu__conditionと同じ文字階層にし、rowsとの間隔はmargin-bottomで確保する（負のmarginは使わない）。 */
.ds-menu__rows-label {
	margin: 0 0 12px;
	color: var(--ds-fg);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
}

/* WHY(2026-09-05): rows用の一覧形式で出す（料金チケット.ds-menu__priceの代わり）。金額側は既存の.ds-menu__price-value/-noteを流用し新しい色を増やさない。 */
/* WHY(2026-09-08): 名称列・価格列の2列gridを親（.ds-menu__rows）に持たせ、各行（.ds-menu__row）に
 *      subgridで列を継承させる。価格ブロック（.ds-menu__row-price）の幅は列トラック側で
 *      メニュー内の全行を通した最大content幅に揃うため、桁数が変わっても左端border-leftの
 *      x座標が揃う（AC3）。subgridの列軸は自分自身のgap指定を無視し親のgapを使う仕様のため、
 *      名称/価格間の水平gap（旧.ds-menu__rowのgap:12px）はここのcolumn-gapへ移した。 */
.ds-menu__rows {
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 8px;
	column-gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

/* WHY(2026-09-05): 行頭のオレンジ丸ドットは.ds-menu__priceの左端アクセントバーと同系のアクセント表現。地色は料金チケットと同じ--ds-bg-ticketを使う。 */
/* WHY(2026-09-08): 各行を.ds-menu__rowsのsubgridにし列幅を共有する。display: contents は
 *      背景色・角丸・::beforeのドットが描画されなくなるため使用しない（liを描画ボックスとして残す）。
 *      justify-content/gapはflexレイアウト専用の指定だったため、grid化に伴い親のcolumn-gapへ
 *      委譲して削除した（非対応ブラウザ向けは下の@supportsフォールバックで復元する）。 */
.ds-menu__row {
	position: relative;
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: center;
	padding: 12px 16px 12px 28px;
	background-color: var(--ds-bg-ticket);
	border-radius: 12px;
}

.ds-menu__row::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 10px;
	height: 10px;
	background-color: var(--ds-cta-surface);
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* WHY(2026-09-05): 名称は折り返し可にしたいがmin-width: 0がないとflexアイテムがコンテンツ幅で広がり横スクロールの原因になるため必須。 */
.ds-menu__row-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.ds-menu__row-name {
	color: var(--ds-fg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/* WHY(2026-09-08): エアコンの「名称 数量」「【オプション】名称 数量」分割表示用ラッパー。
 *      .ds-menu__row-label/-quantityはこの要素からcolor/font-size/font-weight/line-heightを
 *      継承させ、分割前の.ds-menu__row-nameと同じ見た目にする（767px以下の折り返し制御は
 *      @media側でdisplayだけ切り替え、文字の色・太さ・大きさは変えない）。 */
.ds-menu__row-name-line {
	color: var(--ds-fg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.ds-menu__row-sub {
	color: var(--ds-fg-soft);
	font-size: 12px;
	line-height: 1.6;
}

/* WHY(2026-09-05): 金額は折り返させない。flex 0 0 autoで縮まないようにし、名称側に伸縮を任せる。 */
.ds-menu__row-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex: 0 0 auto;
	white-space: nowrap;
	border-left: 2px solid var(--ds-cta-surface);
	padding-left: 12px;
}

/*
 * WHY(2026-09-08): subgrid未対応ブラウザ向けフォールバック。.ds-menu__rowは元のflexレイアウトへ
 *      戻し、.ds-menu__row-priceにmin-widthを与えることで縦線のx座標を揃える。192pxは実測値
 *      （Chrome layout幅1641pxで7桁価格「103,400/110,000」の価格ブロック幅189.4px、実測）を
 *      根拠に端数を切り上げた値。「103,400円(税込)」が折り返さない幅を確保する。
 */
@supports not (grid-template-columns: subgrid) {
	.ds-menu__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.ds-menu__row-price {
		min-width: 192px;
	}
}

/* WHY(2026-08-24): クライアント図の構成変更で新設。料金カードの主役（写真・条件・料金）を邪魔しない程度に小さく添える注意書き。notesが空のメニューではul自体を出力しない（menu.php側で制御）。 */
.ds-menu__notes {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	color: var(--ds-fg-soft);
	font-size: 12px;
	line-height: 1.8;
}

.ds-menu__notes li + li {
	margin-top: 4px;
}

/*
 * WHY(2026-09-01): 最低受注金額の注意書き（SSOT DSK-068）。メニュー個別の注記ではなく
 *      料金一覧全体に掛かる条件のため、リスト直下に1枚だけ置き、幅を .ds-menu__list と
 *      揃えて「この表の条件」だと分かる位置に置く。地色・枠線・角丸は料金チケット
 *      （.ds-menu__price / .ds-menu__item）の既存トークンを流用し、新しい色を増やさない。
 */
.ds-menu__minimum-order {
	max-width: 960px;
	margin: 24px auto 0;
	padding: 16px 20px;
	background-color: var(--ds-bg-ticket);
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 16px;
}

.ds-menu__minimum-order-title {
	margin: 0 0 6px;
	color: var(--ds-fg);
	font-size: 15px;
	font-weight: 700;
}

.ds-menu__minimum-order-text {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: 13px;
	line-height: 1.9;
}

@media (max-width: 1024px) {
	.ds-menu__deco {
		display: none;
	}

	.ds-section-head__capsule {
		padding: 20px 40px;
	}

	.ds-section-head__capsule h2.ds-heading {
		font-size: 27px;
	}

	.ds-section-head__mascot {
		height: 84px;
	}

	.ds-menu__icon {
		width: 56px;
	}
}

@media (max-width: 767px) {
	.ds-menu::before,
	.ds-menu::after {
		height: 28px;
	}

	.ds-section-head {
		flex-direction: column;
		gap: 12px;
	}

	.ds-section-head__mascot {
		height: 64px;
		width: auto;
	}

	/* WHY: 767px 以下は .ds-section-head が縦積みになり、2体並べる意味が無く縦に間延びするため右側だけ隠す。 */
	.ds-section-head__mascot--right {
		display: none;
	}

	/* WHY: 横並び時の左マスコットとカプセルの重なり用マージンは縦積みでは中央揃えをズラすだけなので打ち消す。 */
	.ds-section-head__mascot--left {
		margin-right: 0;
	}

	.ds-section-head__capsule {
		padding: 18px 24px;
		border-radius: 24px;
	}

	.ds-section-head__capsule h2.ds-heading {
		font-size: 22px;
	}

	/* WHY(2026-09-18): クライアント指示。サービスメニューの補足文
	 *      「気になるメニューを|タップすると、|料金が|表示されます」（menu.php:175）を、
	 *      767px以下では「タップすると、」の直後で必ず改行し、1行目「気になるメニュー
	 *      をタップすると、」／2行目「料金が表示されます」にする（1行目がさらに折れる
	 *      のは可）。文言は kdc_phrased_html() で文節ごとに
	 *      `<span class="ds-nw">…</span><wbr>` へ分解される（inc/helpers.php:440）ため、
	 *      2番目の .ds-nw（「タップすると、」）の直後に強制改行を入れる。<wbr> が span
	 *      の間に挟まるため nth-child ではなく nth-of-type を使う。このセレクタは
	 *      .ds-menu 配下限定なので他セクションの .ds-heading-sub には影響しない。
	 *      文節を増減したら menu.php:175 側と合わせてこの nth-of-type(2) も直すこと。
	 *      PC（768px以上）は対象外。 */
	.ds-menu .ds-heading-sub .ds-nw:nth-of-type(2)::after {
		content: "\A";
		white-space: pre;
	}

	.ds-menu__summary {
		padding: 14px 16px;
		gap: 12px;
	}

	.ds-menu__icon {
		width: 44px;
	}

	.ds-menu__name {
		font-size: 16px;
	}

	/* WHY(2026-08-24): SSOT DSK-043 (C-3) 裁定(a)。PCと同じ方向で767px以下も拡大する。 */
	.ds-menu__price-value {
		font-size: 28px;
		font-weight: 800;
	}

	/* WHY(2026-09-05): 767px以下はカード全体の余白が縮むため、行の内側パディングも合わせて詰める。 */
	/* WHY(2026-09-05): 375px で金額ブロックが 170px を占め名称が 1 行 6 文字に潰れたため、行表示に限り金額を 24px に縮め名称列を優先する（クライアント参考画像の比率に合わせる）。単一料金表示の 28px（DSK-043）は維持。 */
	/* WHY(2026-09-08): 名称/価格の水平gapは.ds-menu__rowsのcolumn-gapへ移したため、767px時の
	 *      12px→8pxの縮小もここで上書きする（subgridの列gapは自分自身の指定を無視し親の値を
	 *      使う仕様のため）。 */
	.ds-menu__rows {
		column-gap: 8px;
	}

	.ds-menu__row {
		padding: 10px 10px 10px 22px;
	}

	.ds-menu__row::before {
		left: 8px;
	}

	.ds-menu__row-name {
		font-size: 14px;
	}

	.ds-menu__row-name-line {
		font-size: 14px;
	}

	/* WHY(2026-09-08): クライアント指示「台数の改行とオプションを1列下げる」対応。<br>を使わず、
	 *      通常行は数量(.ds-menu__row-quantity)を、オプション行はラベル(.ds-menu__row-label)を
	 *      それぞれ次行へ落とす。オプション行だけ数量は名称と同じ行に残す（AC5）ため、
	 *      .ds-menu__row--optionでquantityのdisplayを打ち消す。 */
	.ds-menu__row-label {
		display: block;
	}

	.ds-menu__row-quantity {
		display: block;
	}

	.ds-menu__row--option .ds-menu__row-quantity {
		display: inline;
	}

	.ds-menu__row-sub {
		font-size: 11px;
	}

	/* WHY(2026-09-05): 375px で「円(税込)」を横に並べると金額ブロックが 143px になり名称が 3 行に折れる。金額の下に右揃えで置くと 100px に収まり名称が 2 行になる（実測）。 */
	.ds-menu__row-price {
		padding-left: 8px;
		border-left-width: 2px;
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
		line-height: 1.1;
	}

	.ds-menu__row .ds-menu__price-value {
		font-size: 24px;
		line-height: 1.1;
	}

	.ds-menu__row .ds-menu__price-note {
		font-size: 11px;
	}

	/*
	 * WHY(2026-09-08): subgrid未対応ブラウザ向けフォールバック（767px以下）。.ds-menu__rowの
	 *      flexギャップをPCと同じ12→8pxの縮小に合わせて復元し、.ds-menu__row-priceのmin-widthを
	 *      価格が数値のみ縦積みになる幅へ縮める。120pxは「103,400」が24px・font-weight 800で
	 *      折り返さない想定の推定値（実測はしていない。PC実測189.4pxからの比例換算＋余裕分）。
	 */
	@supports not (grid-template-columns: subgrid) {
		.ds-menu__row {
			gap: 8px;
		}

		.ds-menu__row-price {
			min-width: 120px;
		}
	}

	.ds-menu__body {
		padding: 0 16px 16px;
	}

	.ds-menu__minimum-order {
		padding: 14px 16px;
	}
}

/*
 * WHY(2026-09-11): 旧セクション09「その他のメニュー」は 08 menu の末尾ボックスへ統合したため、
 *      .ds-menu-other__* は全廃した（SSOT DSK-080）。以下は統合先のスタイル。
 *      直上の .ds-menu__minimum-order と同じ語彙（最大幅・暖色地・1.5px 暖色枠・角丸16px）に揃え、
 *      セクション末尾に2つの箱が並んでも別物に見えないようにする。地色だけ白にして、
 *      注意書き（--ds-bg-ticket）との役割の違いを出す。
 */
.ds-menu__other {
	max-width: 960px;
	margin: 24px auto 0;
	padding: 24px 28px 28px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 16px;
	text-align: center;
}

/* WHY(2026-09-11): マスコットは小見出しの左へ添える（オーナー指定）。見出しと同じ行に置きたいので
 *      inline-flex で中央寄せし、マスコットは縦位置を文字の中心へ合わせる。 */
.ds-menu__other-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--ds-fg);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
}

.ds-menu__other-mascot {
	display: block;
	flex-shrink: 0;
	width: 56px;
}

.ds-menu__other-mascot-img {
	display: block;
	width: 100%;
	height: auto;
}

/* WHY(2026-09-11): 3件は価格もリンクも持たないので、押せるようには見せない（hover・矢印・影なし）。
 *      操作対象は下の CTA だけに保つ。区切りは中黒ではなく縦罫で、名称の切れ目を明示する。 */
.ds-menu__other-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-menu__other-item {
	position: relative;
	padding: 4px 0;
	color: var(--ds-fg-soft);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
}

.ds-menu__other-item + .ds-menu__other-item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -8px;
	width: 1px;
	height: 1em;
	background-color: var(--ds-line-warm);
	transform: translateY(-50%);
}

.ds-menu__other-cta-wrap {
	margin: 20px 0 0;
	text-align: center;
}

/*
 * WHY: 名称の一覧だけで価格・リンクが無い行き止まりのため、既存ボタンより一回り大きくして目立たせる。
 *      色は .ds-btn-primary の共通定義に従うためここでは指定しない。min-height: 56px は
 *      タップ領域の基準44pxに余裕を持たせた値。.ds-btn 自体に focus-visible の指定が無いため個別に補う。
 *      font-size は --ds-cta-surface を使うため「大きい文字」基準の 19px 下限を明示する。
 */
.ds-menu__other-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 16px 48px;
	font-size: clamp(19px, 1.4vw, 20px);
}

.ds-menu__other-cta:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.ds-menu__other {
		padding: 20px 16px 22px;
	}

	.ds-menu__other-title {
		gap: 8px;
		font-size: 17px;
	}

	/* WHY(2026-09-11): 767px以下だけ「その他のご相談も／承っております」で必ず折り返す（オーナー指定）。
	 *      PC は 1 行のままにしたいので、この指定はこのメディアクエリの中だけに置く。 */
	.ds-menu__other-title-line {
		display: block;
	}

	.ds-menu__other-mascot {
		width: 46px;
	}

	/* WHY(2026-09-11): 狭い幅では縦罫のまま折り返すと罫の位置が行頭へ来て読みにくいので、
	 *      1件ずつ改行して罫を消す。 */
	.ds-menu__other-list {
		flex-direction: column;
		gap: 2px;
	}

	.ds-menu__other-item {
		font-size: 14px;
	}

	.ds-menu__other-item + .ds-menu__other-item::before {
		content: none;
	}
}

/* ==========================================================================
   10. 選ばれる理由（reasons）
   ========================================================================== */

/*
 * WHY(2026-09-28): クライアント指示（H3・SSOT DSK-085「読みやすい配置に」の具体案）で
 *      3枚均等カードから「大きなヒーロー写真＋見出し群 → 理由カード2枚」へ全面改訂。
 *      マーカー色・バッジ地色はこのセクション専用の値のため、worries.php の
 *      --ds-band-mark と同じ考え方でグローバルトークンへは昇格せずここだけで再宣言する
 *      （worries.php 側は変更しない）。
 */
.ds-reasons {
	--ds-reasons-mark: #FFE7A3;
	--ds-reasons-badge-bg: #FDEAD8;
}

.ds-reasons__badge-wrap {
	margin-bottom: 16px;
	text-align: center;
}

.ds-reasons__hero-photo {
	margin-bottom: 32px;
}

/* WHY(2026-09-28 修正): 親レビュー（参考画像との差分指摘）で、PCは約2:1の横長・
 *      SPは16:10程度に調整（旧16:9は縦が高すぎるとの指摘）。 */
.ds-reasons__hero-img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--ds-radius-lg);
}

.ds-reasons__intro {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

/*
 * WHY(2026-09-28): 淡いオレンジ地のピルラベル。文字は太字でWCAG 1.4.3「大きい文字」
 *      基準（3:1）で判定させる（tokens.css --ds-font-cta と同じ理屈）。淡い地色×
 *      オレンジ文字は通常文字の4.5:1には届かないため（--ds-cta-ink 実測 約3.93:1）、
 *      この基準でのみ適合させる。
 * WHY(2026-09-28 修正): 初回実装は19pxだったが、親レビューで「バッジも一回り
 *      大きく（PC 20px前後）」の指摘を受け20pxへ変更。19pxで3:1に適合していたため
 *      20pxはより余裕を持って適合する。
 */
.ds-reasons__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 26px 10px 18px;
	background-color: var(--ds-reasons-badge-bg);
	border-radius: var(--ds-radius-pill);
	color: var(--ds-cta-ink);
	font-family: var(--ds-font-family-heading);
	font-size: 20px;
	font-weight: 700;
}

.ds-reasons__badge-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* WHY(2026-09-28): 参考画像の「右上に小さな強調線の飾り」。情報を持たない純装飾のため
 *      aria-hidden にし、色はテキストと揃えず --ds-brand（装飾用途は非凍結セクションでも
 *      コントラスト規定の対象外）にする。 */
/* WHY(2026-09-28 再修正): 1本線をピルの縁に重ねていたため、SP では縁から浮いた
 *      オレンジの点に見えた（クライアント 9/28 15:13 指摘）。参考画像どおり、ピルの
 *      右上の外側に短い線を2本、放射状に置く。 */
.ds-reasons__badge-accent {
	position: absolute;
	top: -6px;
	right: -18px;
	width: 16px;
	height: 16px;
}

.ds-reasons__badge-accent::before,
.ds-reasons__badge-accent::after {
	content: "";
	position: absolute;
	height: 3px;
	background-color: var(--ds-brand);
	border-radius: var(--ds-radius-pill);
}

.ds-reasons__badge-accent::before {
	top: 3px;
	left: 0;
	width: 9px;
	transform: rotate(-60deg);
}

.ds-reasons__badge-accent::after {
	top: 10px;
	left: 4px;
	width: 12px;
	transform: rotate(-25deg);
}

/* WHY(2026-09-28 修正): 親レビューで「見出しのジャンプ率が弱い。参考ではセクション内で
 *      最大級（PC 40〜44px）」の指摘。.ds-heading 共通ルールの clamp(24px,2.15vw,32px)を
 *      このセクションだけ上書きする（他セクションの .ds-heading は無変更）。 */
.ds-reasons__heading {
	margin-top: 0;
	font-size: 42px;
}

.ds-reasons__heading-accent {
	color: var(--ds-cta-ink);
}

/* WHY(2026-09-29): 見出し下の手描き風カーブ下線は、クライアント 9/29 19:23 の指摘で削除した。 */

/* WHY(2026-09-28 修正): 親レビューで「サブもPC20px前後」の指摘。.ds-heading-sub 共通ルールは
 *      文字サイズを指定していない（本文既定サイズ任せ）ため、このセクションだけ明示する。 */
.ds-reasons__lead {
	font-size: 20px;
}

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

.ds-reasons__photo {
	margin-bottom: 16px;
}

/*
 * WHY: カスタマイザーで任意の比率の画像に差し替えられるため、比率は CSS 側で固定し
 *      object-fit: cover で中央を見せる。
 * WHY(2026-09-28 修正): 親レビューで「正方形で縦長すぎる。参考は約3:2」の指摘により
 *      1:1 から 3:2 へ変更。
 */
.ds-reasons__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px;
}

/* WHY(2026-09-28 修正): 親レビューで「アイコンは見出しの左に横並び（アイコン円56px前後＋
 *      見出しPC24px前後の太字）」の指摘。アイコン単体の縦積みスタイルから、
 *      アイコン＋見出しの行コンテナ（.ds-reasons__head）を基準にしたレイアウトへ変更。 */
.ds-reasons__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
}

/* WHY(2026-09-28): 参考画像の「円形オレンジのアイコン」。バッジと同じ淡いオレンジ地に
 *      してビジュアルトーンを揃え、中の SVG は装飾（aria-hidden 済み）なので
 *      コントラスト規定の対象外の --ds-brand を使う。 */
.ds-reasons__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	background-color: var(--ds-reasons-badge-bg);
	border-radius: 50%;
	color: var(--ds-brand);
}

.ds-reasons__icon svg {
	width: 28px;
	height: 28px;
}

/* WHY(2026-09-28 修正): 親レビューで「見出しPC24px前後の太字」の指摘（旧17px）。
 *      margin は .ds-reasons__head 側の margin-bottom に一本化したため 0 にする。 */
.ds-reasons__title {
	margin: 0;
	min-width: 0;
	color: var(--ds-fg);
	font-size: 24px;
	font-weight: 700;
}

/* WHY(2026-09-28): 参考画像の「見出しの黄色マーカー下線」。worries.php の
 *      .ds-worries__point-mark と同じ手法（インライン要素の背景にだけ線を敷く）。 */
.ds-reasons__mark {
	background-image: linear-gradient(transparent 62%, var(--ds-reasons-mark) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* WHY(2026-09-28 修正): 親レビューで「本文もPC18px前後」の指摘（旧13.5px）。 */
.ds-reasons__text {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: 18px;
	line-height: 1.8;
}

@media (max-width: 767px) {
	/* WHY(2026-09-28): SPは「大写真 → 見出し群 → 左カラム → 右カラム」の1列指定
	 *      （クライアント指示）。理由カードは2枚とも同格になったため
	 *      :first-child による強調分岐はもう不要（旧実装のその分岐は削除）。 */
	.ds-reasons__list {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* WHY(2026-09-28 修正): 親レビュー指摘のSP値（ヒーロー写真16:10・見出し26〜28px）。
	 *      サブは tokens.css --ds-font-base（16px＝「説明文・リード…の下限」）まで落とす。 */
	.ds-reasons__hero-img {
		aspect-ratio: 16 / 10;
	}

	.ds-reasons__heading {
		font-size: 27px;
	}

	.ds-reasons__lead {
		font-size: var(--ds-font-base);
	}
}

/* ==========================================================================
   11. 事前見積りの安心（estimate）
   ========================================================================== */

/*
 * WHY(2026-09-28): 「選ばれる理由」直後が CTA ボタン1つだけで寂しいという指摘への対応。
 *      背景はクライアント支給のポップ装飾素材（menu-bg-pop-v1.webp。他セクション未使用の
 *      オレンジ〜クリーム系のドット・キラキラ）をそのまま敷く。新しい絵は作らない方針
 *      （imagegen を使わず既存資産から選ぶ）。overflow-x: hidden は下の
 *      .ds-estimate__mascot（PC ではブロック外へはみ出す配置）が横スクロールを
 *      生まないための保険（計算上ブロック幅720px・コンテナ1280pxなら1024px以上で
 *      発生しないはずだが、より広いブレークポイント間の余白が狭い環境向けの安全策）。
 *      画像未対応ブラウザ向けのフォールバックは .ds-campaign-banner__photo--fallback
 *      と同じ考え方で持たない（webp は主要ブラウザで対応済み・装飾用途のため）。
 */
.ds-estimate {
	position: relative;
	overflow-x: hidden;
	background-color: var(--ds-bg-warm);
	background-image: url("../img/menu-bg-pop-v1.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* WHY(2026-09-28): 横長の背景画像を縦長の SP で cover にすると中央（無地）だけが残り、
 *      四隅のドット・キラキラが消える。同じ画像を 2 枚重ね、左上と右下の隅だけを見せる。 */
@media (max-width: 767px) {
	.ds-estimate {
		background-image: url("../img/menu-bg-pop-v1.webp"), url("../img/menu-bg-pop-v1.webp");
		background-position: left top, right bottom;
		background-size: 200% auto, 200% auto;
	}
}

/* WHY(2026-09-28): 見出し色をクライアント指定の「濃茶/オレンジ」にする。共通 .ds-heading
 *      は var(--ds-fg)（#1A1A1A）を使うため、このセクションだけ --ds-cta-ink（#D63F00、
 *      白地 4.60:1）で上書きする。フォントサイズ・太さは
 *      .ds-section-head__capsule h2.ds-heading（32px/800）をそのまま使う。 */
.ds-estimate .ds-heading {
	color: var(--ds-cta-ink);
}

.ds-estimate__block {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

/*
 * WHY(2026-09-28): マスコット（mascot-point。指差しポーズ）は、SP・タブレット
 *      （1023px以下）では見出しの上に小さく中央寄せ。1024px以上でだけ、ブロック
 *      （カード2枚を含む .ds-estimate__block、最大幅720px）の右端からはみ出す
 *      大きな配置に切り替える。ブレークポイントを 767px ではなく 1024px にするのは、
 *      768〜1023px幅ではコンテナの左右余白が狭く、はみ出し量70pxを確保できない
 *      （1024px幅でも .ds-container のpadding込みで片側128pxの余白が残る計算）ため。
 */
.ds-estimate__mascot {
	display: block;
	width: 72px;
	margin: 0 auto 12px;
}

.ds-estimate__mascot-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.ds-estimate__mascot {
		position: absolute;
		top: -8px;
		right: -72px;
		width: 168px;
		margin: 0;
	}
}

.ds-estimate__options {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}

@media (min-width: 768px) {
	.ds-estimate__options {
		flex-direction: row;
		gap: 24px;
	}
}

/*
 * WHY(2026-09-28): 2択カードの共通の骨格。既存 .ds-btn は1行文言のボタン用で、
 *      ここは「アイコン＋受付時間＋電話番号」「アイコン＋文言」の複数行カードのため
 *      専用クラスにする（.ds-btn を継承すると padding/border-radius が合わない）。
 *      角丸は --ds-radius-lg（16px、カード・写真枠用トークン）を使う。
 */
.ds-estimate__card {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 22px 20px;
	border-radius: var(--ds-radius-lg);
	text-decoration: none;
	text-align: center;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ds-estimate__card:focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

/* WHY(2026-09-28): 白地・オレンジ太枠（クライアント指定）。文字は --ds-cta-ink
 *      （白地 4.60:1）で通常文字基準も満たす。 */
.ds-estimate__card--tel {
	background-color: #fff;
	border: 3px solid var(--ds-cta-surface);
	color: var(--ds-cta-ink);
}

.ds-estimate__card--tel:hover {
	border-color: var(--ds-cta-surface-hover);
	background-color: var(--ds-bg-warm);
}

.ds-estimate__card-top {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
}

.ds-estimate__card-tel {
	font-family: var(--ds-font-family-heading);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
}

/* WHY(2026-09-28): オレンジ塗り角丸（クライアント指定）。文字色・コントラストの根拠は
 *      .ds-btn-primary と同じ（#FC5210 は白文字 3.31:1 = 「大きい文字」基準のみ満たす
 *      色のため、下の font-size/font-weight は .ds-btn-primary の下限19pxを踏襲する）。 */
.ds-estimate__card--form {
	/* WHY(2026-09-28): 親 .ds-estimate__card は flex-direction: column（電話カードの
	 *      「アイコン+受付時間の行」「電話番号の行」を縦積みにするため）。フォームカードは
	 *      アイコン・文言・矢印を1行に収めたいため、この面だけ row へ戻す。 */
	flex-direction: row;
	background-color: var(--ds-cta-surface);
	border: 3px solid var(--ds-cta-surface);
	color: #fff;
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: 700;
}

.ds-estimate__card--form:hover {
	background-color: var(--ds-cta-surface-hover);
	border-color: var(--ds-cta-surface-hover);
}

.ds-estimate__card--form::after {
	content: "\203A";
	margin-left: .3em;
	font-weight: 700;
}

/*
 * WHY(2026-09-28): 受話器アイコンは .ds-fv__btns .ds-btn-tel::before と同じ SVG
 *      （既存インライン資産の流用）。封筒アイコンはテーマ内に既存資産が無いため、
 *      Material Design の email アイコン相当の単純な形を新規にインライン SVG で追加する。
 *      どちらも mask + currentColor（ホバーで文字色が変わっても追従するため）。
 */
.ds-estimate__card-icon {
	display: inline-block;
	background-color: currentColor;
}

.ds-estimate__card-icon--tel {
	width: 16px;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ds-estimate__card-icon--mail {
	width: .95em;
	height: .95em;
	margin-right: .5em;
	vertical-align: -.12em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   12. ご利用の流れ（flow）
   ========================================================================== */

.ds-flow__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-flow__step {
	position: relative;
	display: flex;
	flex: 1 1 0;
	/* WHY: 左右の余白がカード間の溝になる。矢印はこの溝の中央に置くので、
	 *      矢印1文字（18px）が両隣のカードに掛からない幅を確保する。 */
	padding: 0 14px;
}

/*
 * WHY (2026-08-23): カード化して1ステップの範囲を面で示す。枠・角丸・2層の影は
 *      料金アコーディオン（.ds-menu__item）と同じ造形にして、トップ内で
 *      「白いカード」の見え方を1種類に保つ。番号バッジをカードの外へ半分
 *      はみ出させるため overflow は切らない。
 */
.ds-flow__card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: 26px 10px 20px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	text-align: center;
}

/*
 * WHY: 番号はカード上辺の中央へ半分乗せる。以前は本文の上に積んでいて
 *      アイコンと縦に並ぶと重心が下がりすぎるため、カードの縁に逃がした。
 */
.ds-flow__number {
	position: absolute;
	top: -15px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background-color: var(--ds-cta-ink);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transform: translateX(-50%);
}

.ds-flow__icon {
	display: block;
	width: 72px;
	margin-bottom: 12px;
}

.ds-flow__icon-img {
	display: block;
	width: 100%;
	height: auto;
}

.ds-flow__text {
	margin: 0;
	color: var(--ds-fg);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.ds-flow__note {
	margin: 6px 0 0;
	color: var(--ds-fg-soft);
	font-size: 12px;
	line-height: 1.6;
}

/*
 * WHY: PC 幅では横並びのカード間を「→」でつなぐ。カードの外側の余白
 *      （.ds-flow__step の padding）の中央に置き、カードに重ならないようにする。
 *      767px 以下では縦並びに変わるため、下の @media で「↓」に切り替える。
 */
.ds-flow__arrow {
	position: absolute;
	top: 50%;
	right: 0;
	/* WHY: --ds-line（#E5E5E5）だと白カードの隣で消えるため、本文の淡色を使う。 */
	color: var(--ds-fg-soft);
	font-size: 16px;
	line-height: 1;
	opacity: .55;
	transform: translate(50%, -50%);
}

.ds-flow__arrow::before {
	content: "→";
}

@media (max-width: 1024px) {
	.ds-flow__list {
		flex-wrap: wrap;
		gap: 28px 0;
	}

	/* WHY (2026-10-31): 4 ステップ化に伴い、3+1 の余りを避けて 2×2 で折り返す。 */
	.ds-flow__step {
		flex: 1 1 50%;
	}

	/*
	 * WHY: 2カラムで折り返す配置になると「→」が次の行の要素へ
	 *      正しく繋がって見えないため、タブレット幅では矢印を非表示にする。
	 *      順序はカード上の番号バッジで示す。
	 */
	.ds-flow__arrow {
		display: none;
	}
}

@media (max-width: 767px) {
	.ds-flow__list {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}

	.ds-flow__step {
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;
	}

	/*
	 * WHY: 縦積みでは1枚ずつ縦に伸びて間延びするため、アイコンを左・
	 *      テキストを右に置く横組みへ切り替える。番号バッジも左上へ移す。
	 */
	.ds-flow__card {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 16px 18px 16px 16px;
		text-align: left;
	}

	.ds-flow__number {
		top: 50%;
		left: -9px;
		transform: translateY(-50%);
	}

	.ds-flow__icon {
		flex-shrink: 0;
		width: 52px;
		margin-bottom: 0;
		margin-left: 8px;
	}

	/* WHY: min-width: 0 が無いと長い見出しで箱が縮まず、カードから溢れる。 */
	.ds-flow__body {
		min-width: 0;
	}

	.ds-flow__arrow {
		position: static;
		display: block;
		margin-top: 10px;
		text-align: center;
		transform: none;
	}

	.ds-flow__arrow::before {
		content: "↓";
	}
}

/* ==========================================================================
   13. 施工事例（works）
   ========================================================================== */

.ds-works__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-works__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ds-works__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 10px;
	background-color: var(--ds-bg-soft);
	border-radius: 4px;
}

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

.ds-works__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ds-bg-soft);
}

/*
 * WHY(2026-09-27): DSK-085 H5。エアコン・レンジフードのカードをBefore/After
 *      2分割にする（クライアント2026-09-25依頼）。左右に半分ずつ画像を並べ、
 *      各半分の左上に濃いグレー/青のラベル、枠の右下に「※イメージ」を重ねる。
 *      グレー・青の色値は添付カンプの配色に合わせた本セクション限定の装飾値
 *      （tokens.css には他箇所で使う一般トークンがないため直書き）。
 */
.ds-works__thumb--split {
	display: flex;
	position: relative;
}

.ds-works__thumb-half {
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

.ds-works__thumb-half picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ds-works__ba-label {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 2px 10px;
	border-radius: var(--ds-radius-pill);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
}

.ds-works__ba-label--before {
	background-color: #595959;
}

.ds-works__ba-label--after {
	background-color: #2D9CDB;
}

.ds-works__ba-note {
	position: absolute;
	right: 8px;
	bottom: 6px;
	color: rgba(255, 255, 255, .9);
	font-size: 9px;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/*
 * WHY: クライアントの要望「参考サイトのようにメニュー毎、主張なく載せたい」
 *      に沿い、メニュー名・タイトルとも控えめな文字サイズに留める。
 */
.ds-works__menu-label {
	margin: 0 0 2px;
	color: var(--ds-cta-ink);
	font-size: 11.5px;
	font-weight: 700;
}

.ds-works__title {
	margin: 0;
	color: var(--ds-fg);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.ds-works__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ds-works__list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   14. オンラインショップ導線（shop）
   ========================================================================== */

.ds-shop {
	background-color: var(--ds-bg-warm);
}

.ds-shop__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

/*
 * WHY (2026-09-25): 参考イメージは見出し → 写真パネル → ボタン → 配送注記の
 *      縦積みで、DOM 順は見出し（.ds-shop__text）が先。PC の 2 カラム
 *      （左写真・右テキスト）では見た目の並びだけ order で入れ替える。
 */
.ds-shop__text {
	order: 2;
	text-align: center;
}

/*
 * WHY (2026-09-25): 商品写真3枚（ソフト／ハードビビッド／ハードモノトーン）を横並びにし、
 *      参考イメージの「淡いクリーム色の角丸パネル」（#FFF4DC）に載せて box-shadow で軽く浮かせる
 *      （2026-08-21 版の「背景を敷かず暖色地を透けさせる」構成は廃止）。
 */
.ds-shop__visual {
	order: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 32px 24px;
	background-color: #FFF4DC;
	border-radius: 20px;
	box-shadow: 0 10px 24px rgba(26, 26, 26, .06);
}

.ds-shop__figure {
	display: block;
}

.ds-shop__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * WHY (2026-09-25): display: inline-block + position: relative は、見出し
 *      左右に置く放射線飾り（::before / ::after）をテキスト幅基準で配置する
 *      ため（親 .ds-shop__text の text-align: center で中央寄せされる）。
 */
.ds-shop__title {
	display: inline-block;
	position: relative;
	margin: 0 0 24px;
	color: var(--ds-fg);
	/* WHY (2026-09-25): 24px 固定では PC で見出しが弱かった（親の実測）。大きい文字（3:1 基準）の 24px を下限に拡大する。 */
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * WHY (2026-09-28): 見出し両脇の放射線飾り（::before / ::after、2026-09-25 追加）は、
 *      クライアント 9/28 15:13 の指摘を受けて PC・SP とも削除した。
 */

/*
 * WHY (2026-09-25): 白地の上で通常サイズの文字だとオレンジ系は 4.5:1 未満に
 *      なるが、見出しは 24px bold で WCAG の「大きい文字」（3:1 基準）に
 *      該当する。var(--ds-cta-ink)（#D63F00）は白地 4.60:1 と通常文字基準
 *      すら満たす濃さのため、3:1 は余裕でクリアする（実測値は tokens.css の
 *      コメント参照）。
 */
.ds-shop__accent {
	color: var(--ds-cta-ink);
}

/* WHY(2026-09-29): 波線・家アイコンは SP 専用の飾り（下の 767px 以下で表示）。 */
.ds-shop__deco {
	display: none;
}

/*
 * WHY (2026-09-25): 参考イメージのオレンジ丸ピルボタンに合わせ、共通の
 *      .ds-btn-primary（角丸 8px・白文字 3.31:1）はそのまま流用しつつ、
 *      .ds-shop 内だけ border-radius をピル形に上書きし、左アイコン用の
 *      flex レイアウトを追加する。文字サイズは .ds-btn-primary の
 *      clamp(19px,...) を変更しないため、白文字×オレンジの大きい文字基準
 *      （3:1）は維持される。
 */
.ds-shop__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
}

.ds-shop__cta-icon {
	display: block;
	flex-shrink: 0;
}

.ds-shop__cta::after {
	content: "\203A";
	margin-left: 2px;
	font-weight: 700;
}

/*
 * WHY (2026-09-25): 参考イメージの「両側に短い横線を伴う一行」の配送注記。
 *      文字色は var(--ds-fg)（#1A1A1A・白地で 4.5:1 を大きく超える）を使い、
 *      アイコンは装飾目的のため alt="" にしている。
 */
.ds-shop__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 0;
	color: var(--ds-fg);
	font-size: 14.5px;
	font-weight: 500;
}

.ds-shop__note-icon {
	display: block;
	flex-shrink: 0;
}

.ds-shop__note-line {
	flex: 0 1 28px;
	height: 1px;
	background-color: var(--ds-line);
}

/*
 * WHY (2026-09-25 更新): PC は「左に写真パネル・右に見出し→ボタン→注記」の
 *      2 カラム（.ds-shop__visual / .ds-shop__text の order で実現）。1024px
 *      以下はタブレットとして SP に近い縦積みに切り替え、DOM 順どおり見出し
 *      （.ds-shop__text）を先に表示する。
 */
/*
 * WHY (2026-09-25): 参考イメージの縦の並びは「見出し → 写真パネル → ボタン → 注記」。
 *      写真はテキスト群の途中に入るため、1024px 以下では .ds-shop__text を display: contents で
 *      分解し、各要素を order で並べ直す（PC の 2 カラムは DOM 構造のまま）。
 */
@media (max-width: 1024px) {
	.ds-shop__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 24px;
	}

	.ds-shop__text {
		display: contents;
	}

	.ds-shop__title {
		order: 1;
		margin-bottom: 0;
		text-align: center;
	}

	.ds-shop__visual {
		order: 2;
		width: 100%;
		max-width: 560px;
	}

	.ds-shop__cta {
		order: 3;
	}

	.ds-shop__note {
		order: 4;
		margin-top: 0;
	}
}

/*
 * WHY (2026-09-25 更新): クライアント参考イメージのスポンジ誘導に合わせ、
 *      SP でも 3 枚を横並びのまま縮小する（旧: 1 カラム縦積み）。
 *      .ds-shop__visual は .ds-shop__inner（grid）の grid item で、既定では
 *      justify-self: stretch により親の列幅いっぱいに広がる。だが
 *      margin: 0 auto を付けると stretch が無効化されて幅が fit-content 基準に
 *      なり、中の .ds-shop__img（width: 100%）と幅の解決が循環して 0 になる
 *      （2026-08-21 実機確認済みの既知挙動。実機 390px 幅で .ds-shop__visual の
 *      width が 0、.ds-shop__img が 3枚とも 0x0 になることを確認）。
 *      width: 100% を明示して循環を断ち切り、max-width で頭打ちにする。
 */
@media (max-width: 767px) {
	.ds-shop__visual {
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
		gap: 10px;
		padding: 20px 14px;
	}

	/* WHY (2026-09-25): 参考イメージどおり 3 行（ダスキンの／スポンジを、／いつでもご自宅へ。）。 */
	.ds-shop__title {
		font-size: 26px;
	}

	.ds-shop__title .ds-nw {
		display: block;
	}

	/* WHY: 文節を block にすると間の <wbr> が空行を作り、行間が倍に空いた（375px 実測 182px / 3 行）。 */
	.ds-shop__title wbr {
		display: none;
	}

	/*
	 * WHY(2026-09-29): クライアント 9/29 19:23 の参考イメージ。SP の 3 行見出しが寂しいため、
	 *      2 行目「スポンジを、」の両脇に放射線、3 行目の下に淡いオレンジの波線、右端に家アイコンを添える。
	 *      2 行目は display:table で文字幅に縮め、放射線を文字の直近に置く（旧版は見出し全幅基準で浮いた）。
	 */
	.ds-shop__title {
		padding-bottom: 18px;
	}

	.ds-shop__title .ds-nw:nth-of-type(2) {
		display: table;
		position: relative;
		margin: 0 auto;
	}

	.ds-shop__title .ds-nw:nth-of-type(2)::before,
	.ds-shop__title .ds-nw:nth-of-type(2)::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 20px;
		height: 20px;
		/* 文字へ向かう 2 本線（急角度 1 本＋緩角度 1 本）。右側は scaleX(-1) で反転。 */
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 2 L13 9 M2 13 L11 15' fill='none' stroke='%23EE7800' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
		transform: translateY(-60%);
	}

	.ds-shop__title .ds-nw:nth-of-type(2)::before {
		left: -26px;
	}

	.ds-shop__title .ds-nw:nth-of-type(2)::after {
		right: -26px;
		transform: translateY(-60%) scaleX(-1);
	}

	/* WHY(2026-09-29): 波線と家は imagegen 生成の透過画像。1 枚だと見出し幅に合わせた時に家が大きすぎて
	 *      「へ。」に重なったため 2 枚に分け、波線は見出し幅・家は 40px 固定で右下にはみ出させる。
	 *      波線の右端が家の壁の下端につながる位置関係（right / bottom）は 375px 実測で合わせた。 */
	.ds-shop__deco {
		display: block;
		position: absolute;
		pointer-events: none;
	}

	.ds-shop__wave {
		left: -12px;
		right: 3px;
		bottom: 0;
	}

	.ds-shop__house {
		right: -30px;
		bottom: 6px;
		width: 40px;
	}

	.ds-shop__deco img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* WHY (2026-09-25): 375px で注記が「お／届けします」と割れたため、左右の線を外し 13px・1 行にする。 */
	.ds-shop__note {
		gap: 8px;
		font-size: 13px;
		white-space: nowrap;
	}

	.ds-shop__note-line {
		display: none;
	}
}

/* ==========================================================================
   15. よくある質問（faq）
   ========================================================================== */

.ds-faq__list {
	max-width: 760px;
	margin: 0 auto;
}

.ds-faq__item {
	border-bottom: 1px solid var(--ds-line);
}

.ds-faq__question {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 8px;
	list-style: none;
	color: var(--ds-fg);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.ds-faq__question::-webkit-details-marker {
	display: none;
}

.ds-faq__question::before {
	content: "Q";
	flex-shrink: 0;
	color: var(--ds-cta-ink);
	font-weight: 700;
}

.ds-faq__question::after {
	content: "＋";
	margin-left: auto;
	color: var(--ds-cta-ink);
	font-size: 18px;
	font-weight: 400;
}

.ds-faq__item[open] .ds-faq__question::after {
	content: "−";
}

.ds-faq__answer {
	padding: 0 8px 16px 26px;
}

.ds-faq__answer p {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: 13.5px;
	line-height: 1.8;
}

/* ==========================================================================
   16. 対応エリア（area）
   ========================================================================== */

/* WHY (2026-08-17): reasons〜contact が白地 7 連続で単調だったため、11 estimate / 14 shop /
 *      16 area / 19 contact を暖色地にして 2〜3 セクションおきにリズムを作る。 */
.ds-area {
	background-color: var(--ds-bg-warm);
}

/*
 * WHY (2026-08-25): 地図は背景が透過した東京都の輪郭で、切り抜くと都の形が
 *      欠けるため object-fit は cover ではなく contain。縦横比は素材の
 *      700x490 に合わせる。枠・影は付けない（透過素材に角丸を当てると
 *      地図の外周ではなく矩形が見えてしまうため）。
 */
/* WHY: 装飾（家・木）は地図の左右の余白へ置く。地図の内側に置くと東京都の
 *      輪郭と重なるため、輪郭の外側にだけ余白を作れるこのラッパーで受ける。 */
.ds-area__scene {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
}

.ds-area__deco {
	position: absolute;
	bottom: 8%;
	width: auto;
	height: auto;
	pointer-events: none;
}

.ds-area__deco--left {
	left: 0;
	max-width: 150px;
}

.ds-area__deco--right {
	right: 8px;
	max-width: 88px;
}

/* WHY: 1080px を下回ると地図の左右に装飾を置く余白が無くなり、東京都の輪郭へ
 *      重なるため、その手前で装飾を落とす。地図と市名チップは残るので情報は欠けない。 */
@media (max-width: 1100px) {
	.ds-area__deco {
		display: none;
	}
}

/* WHY (2026-08-30): 9 市ズームの拡大図から多摩全域図へ更新。多摩全域図でも
 *      四辺で都の輪郭が切れるため、引き続き角丸のパネルとして扱う。 */
.ds-area__map {
	position: relative;
	max-width: 760px;
	margin: 0 auto 20px;
	aspect-ratio: 10 / 7;
	overflow: hidden;
	border: 1px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-lg);
}

/* WHY (2026-08-31 / DSK-061 改訂): 地図画像とピン群を載せる「地図面」。
 *      .ds-area__map がクリッピング viewport、こちらが実寸の面という分離。
 *      既定では viewport 全面に一致させるため PC の見え方は変わらない。
 *      SP ではこの面だけを PC と同じ描画寸法へ固定する（下部のメディアクエリ）。 */
.ds-area__stage {
	position: absolute;
	inset: 0;
}

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

/* WHY (2026-08-30): 拠点の所在地を伝える吹き出し。地図右上・他のピンと
 *      重ならない位置に固定で置く。 */
.ds-area__callout {
	position: absolute;
	top: 12px;
	right: 12px;
	max-width: 48%;
	margin: 0;
	padding: 7px 12px;
	border-radius: var(--ds-radius-md);
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(26, 26, 26, .16);
	color: var(--ds-fg);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

/* WHY: 吹き出しの尻尾。左下角へ向けて三角形を作る。 */
.ds-area__callout::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 16px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 6px 0 0;
	border-color: #fff transparent transparent transparent;
}

.ds-area__pins {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.ds-area__dot {
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background-color: var(--ds-cta-surface);
}

/* WHY (2026-08-30): 立川市は拠点（店舗所在地）のため、他 8 市の丸とは
 *      見た目で区別できる地図ピン形状にする。涙型は正方形を45度回転して
 *      左下の角だけ丸めずに残す定番の作り方。装飾なので aria-hidden。 */
.ds-area__dot--hub {
	width: 16px;
	height: 16px;
	margin: -22px 0 0 -8px;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	background-color: var(--ds-cta-surface);
	box-shadow: 0 2px 4px rgba(26, 26, 26, .3);
	transform: rotate(-45deg);
}

.ds-area__pin {
	position: absolute;
	padding: 4px 10px;
	border: 1px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-pill);
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(26, 26, 26, .10);
	color: var(--ds-fg);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	/* WHY: 座標はラベルの中心位置の実測値のため、常に中央基準で置く。 */
	transform: translate(-50%, -50%);
}

/* WHY: 拠点ラベルは吹き出し・拠点ピンと合わせて視覚的に強めておく。 */
.ds-area__pin--hub {
	border-color: var(--ds-cta-surface);
	color: var(--ds-cta-ink);
}

/* WHY (2026-08-30): 対応範囲が多摩地域30市町村であることを示す説明文の
 *      スタイル。本文（.ds-area__tag 13.5px）より一段小さく、既存の
 *      .ds-area__note と同系統のトーンにする。 */
.ds-area__legend {
	max-width: 760px;
	margin: 0 auto 14px;
	color: var(--ds-fg-soft);
	font-size: 12.5px;
	line-height: 1.6;
	text-align: center;
}

/* WHY (2026-08-30): 対応エリアが 30 件になったため、折り返しの flex から
 *      多列グリッドへ変更。auto-fill で列数はコンテナ幅に応じて自動調整。 */
.ds-area__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

/* WHY (2026-08-31): 2026-08-30 のクライアント明示指示により「基本商圏」の赤い
 *      バッジ（旧 .ds-area__tag-badge）を削除していた。当時は基本商圏 9 市の
 *      区別を枠線色と背景色で残していた。
 *      WHY (2026-09-01): クライアント明示指示により、旧 .ds-area__tag--core
 *      が持っていた枠線色・背景色を .ds-area__tag 本体へ統合し、30件すべての
 *      チップへ適用した（.ds-area__tag--core は廃止。基本商圏9市とそれ以外の
 *      区別は無くなった）。文字色は変更しない（既存の色のまま）。 */
.ds-area__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 10px;
	border: 1px solid var(--ds-cta-surface);
	border-radius: 3px;
	color: var(--ds-fg);
	font-size: 13.5px;
	text-align: center;
	background-color: var(--ds-line-warm);
}

.ds-area__note {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: 13px;
	text-align: center;
}

@media (max-width: 767px) {
	/* WHY (2026-08-25): 地図は SP でも表示を維持する（クライアントはスマホで
	 *      閲覧しており、地図が見えないと要望を満たさない）。 */
	/*
	 * WHY (2026-08-31): 制約はページ幅ではなく地図 viewport 幅にある。9 ラベル＋
	 * 9 ドットの union bbox は 312.3px（PC 実測）で、.ds-container の左右 padding
	 * 24px ずつと border 2px を引くと、ページ幅 320px では viewport が 270px しか
	 * 残らず 42.3px 足りない。そこで狭幅のときだけ地図（この要素）だけを container
	 * の余白へブリードさせ、border-box 幅を最低 320px（content box 318px）確保する。
	 * .ds-container・stage・focus point・ラベルの font-size と座標はいずれも変えない。
	 */
	.ds-area__map {
		margin-bottom: 16px;
		width: max(100%, min(320px, 100vw));
		left: 50%;
		transform: translateX(-50%);
	}

	/*
	 * WHY (2026-08-31 / DSK-061 改訂): 旧実装は SP で市名ラベルを非表示にして
	 * いたが、2026-08-30 のクライアント回答「SP でも 9 市名を地図上に表示。
	 * 地図を中心部へ寄せて拡大」により却下されたため撤回した。
	 *
	 * 方式: 拡大率を掛けるのではなく、地図面（.ds-area__stage）を PC で
	 * 重なり 0・最小すき間 4.1px を実測した描画寸法 758×530px に固定する。
	 * ラベルは stage に対する % 配置なので、PC と同じ絶対 px 間隔が再現され、
	 * 画面幅が 320px でも 430px でもラベル同士の間隔は縮まない。
	 * stage の拡大・縮小 transform は使わない（map には狭幅時の中央配置に限り
	 * translateX(-50%) を使う。下の .ds-area__map 参照）。このため
	 * .ds-area__pin の translate(-50%,-50%) と .ds-area__dot--hub の
	 * rotate(-45deg) とは競合せず、ラベルの逆スケール補正も不要。
	 *
	 * 位置: 9 ラベル＋9 ドットの最終描画 union bbox の中心（stage に対する
	 * 実測値 72.678% / 55.149% = 550.90px / 292.29px）を viewport 中央へ
	 * 合わせる。left/top の 50% は .ds-area__map の padding box 基準なので、
	 * 画面幅が変わっても中心合わせが維持される。
	 */
	.ds-area__stage {
		inset: auto;
		width: 758px;
		height: 530px;
		left: calc(50% - 550.9px);
		top: calc(50% - 292.29px);
	}

	/*
	 * WHY (2026-09-02): 吹き出しも stage 基準の % で置く（DOM を stage 内へ移した
	 * 理由は area.php のコメント参照）。旧実装は map 基準だったため、stage 固定・
	 * map 可変の SP では画面幅ごとにラベルとの相対位置がずれて重なっていた。
	 * 座標（stage 758×530px 換算）: 本文 186×27.75px を left 55.8%（422.96px）/
	 * top 49.2%（260.76px）に置き、x[422.96, 608.96] y[260.76, 288.51] へ収める。
	 * 上は昭島市ラベル下端 258.19px と 2.57px、下は国立市ラベル上端 291.42px と
	 * 2.91px、右は小金井市ラベル左端 633.07px と 24.11px 空き、9 市ラベルすべてと
	 * 重ならない。ここは拠点ピンの真下で、上下を昭島市・国立市のラベルに挟まれた
	 * 高さ 33.2px の帯しかないため、本文は 1 行（27.75px）でしか収まらない。
	 * 1 行になるのは containing block が map（画面幅依存）から stage（758px 固定）
	 * へ変わり max-width: 48% が 363.84px ＝ 本文の 186px より広くなるため。
	 * すべて stage 基準なので、320px でも 430px でも位置・寸法は変わらない。
	 */
	.ds-area__callout {
		top: 49.2%;
		right: auto;
		left: 55.8%;
		padding: 6px 9px;
		font-size: 10.5px;
	}

	/*
	 * WHY (2026-09-02): SP は吹き出しが拠点ピンの下に来るため、尻尾を上向きへ反転
	 * して拠点（立川市）の涙型ピンの尖端（stage 516.2 / 244.29px）を指す。尻尾の
	 * 先端は apex 515.96 / 247.76px＝尖端の 3.47px 下で、ピンにも他の市名にも
	 * 重ならない。高さ 13px は、本文上端を昭島市・国立市ラベルの間へ収めた結果
	 * 生じた尖端までの距離を埋めるための値。PC の尻尾は左下向きのまま。
	 */
	.ds-area__callout::after {
		top: -13px;
		bottom: auto;
		left: 88px;
		border-width: 0 5px 13px 5px;
		border-color: transparent transparent #fff transparent;
	}

	.ds-area__list {
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
		gap: 8px;
	}

	.ds-area__tag {
		padding: 7px 8px;
		font-size: 12px;
	}
}

/* ==========================================================================
   17. 店舗情報（store）
   ========================================================================== */

.ds-store__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 16px;
}

.ds-store__list {
	margin: 0;
}

.ds-store__row {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ds-line);
}

.ds-store__label {
	flex-shrink: 0;
	width: 100px;
	color: var(--ds-fg-soft);
	font-size: 14px;
	font-weight: 400;
}

.ds-store__value {
	margin: 0;
	color: var(--ds-fg);
	font-size: 14px;
}

.ds-store__value a {
	color: var(--ds-fg);
	text-decoration: none;
}

/*
 * WHY (2026-08-21): API キー不要の Google マップ埋め込み。aspect-ratio で
 *      高さを固定し、PC・SP どちらでも潰れないようにする（推定: .ds-store__inner
 *      の PC 2カラム時に隣接するテキスト列と高さが近くなる比率として 4/3 を
 *      採用。カンプの実測はしていない）。border は iframe 既定の枠線を消すため。
 */
.ds-store__map {
	border-radius: 4px;
	overflow: hidden;
}

.ds-store__map-iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

.ds-store__review-link {
	margin: 0;
	font-size: 13.5px;
	text-align: right;
}

.ds-store__review-link a {
	color: var(--ds-cta-ink);
	font-weight: 700;
	text-decoration: none;
}

.ds-store__review-link a:hover {
	color: var(--ds-brand-dark);
}

@media (max-width: 767px) {
	.ds-store__inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   18. 羽衣町おそうじ便り（blog）
   ========================================================================== */

.ds-blog__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-blog__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ds-blog__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin-bottom: 10px;
	background-color: var(--ds-bg-soft);
	border-radius: 4px;
}

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

.ds-blog__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ds-bg-soft);
}

.ds-blog__title {
	margin: 0 0 6px;
	color: var(--ds-fg);
	font-size: 14.5px;
	line-height: 1.6;
}

.ds-blog__date {
	color: var(--ds-fg-soft);
	font-size: 12px;
}

@media (max-width: 767px) {
	.ds-blog__list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   19. お問い合わせフォーム（contact）
   ========================================================================== */

/*
 * WHY: 16 area と同じ理由で暖色地。フォームの入力欄は白で塗り、暖色地との境界を出す。
 *      フォーム本体（ラベル・入力欄・送信ボタン等）とフォールバック（電話・メール導線）
 *      の装飾は、固定ページ「お問い合わせ」（[kdc_contact_form] 経由）と共有するため
 *      assets/css/contact-form.css へ移設した。ここにはLPセクション固有の背景色のみ残す。
 */
.ds-contact {
	background-color: var(--ds-bg-warm);
}

/* ==========================================================================
   スマホ下部固定CTA（sp-cta）
   ========================================================================== */

/*
 * WHY: PC・タブレットでは表示しない。767px 以下でのみ画面下部に固定表示する
 *      （要件定義書 ★要望3）。
 */
.ds-sp-cta {
	display: none;
}

@media (max-width: 767px) {
	.ds-sp-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		display: flex;
		gap: 8px;
		padding: 10px 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		background-color: #fff;
		border-top: 1px solid var(--ds-line);
	}

	/*
	 * WHY: 枠色は var(--ds-brand) ではなく #B85A00 を使う。白文字/白地に
	 *      載せる用途でのコントラストを .ds-btn-primary と揃えるため
	 *      （下記 --tel / --form も同様）。
	 */
	.ds-sp-cta__link {
		display: flex;
		flex: 1 1 50%;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 12px 8px;
		border: 1.5px solid var(--ds-cta-ink);
		border-radius: 4px;
		font-size: 14.5px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.ds-sp-cta__link:focus-visible {
		outline: 3px solid var(--ds-fg);
		outline-offset: 3px;
	}

	/*
	 * WHY: 従（サブ）の位置づけ。白地＋オレンジ枠にして「無料相談はこちら」より
	 *      目立たせない。文字色は #B85A00 / #fff で4.67:1（var(--ds-brand)
	 *      では2.87:1でWCAG 1.4.5 通常文字基準4.5:1未達のため）。
	 */
	.ds-sp-cta__link--tel {
		background-color: #fff;
		color: var(--ds-cta-ink);
	}

	/*
	 * WHY: 主（メイン）の位置づけ。オレンジ塗りにして優先度を視覚的に示す。
	 *      白文字は #B85A00 地で4.67:1（var(--ds-brand) では2.87:1で
	 *      WCAG 1.4.5 通常文字基準4.5:1未達のため）。
	 */
	.ds-sp-cta__link--form {
		background-color: var(--ds-cta-ink);
		color: #fff;
	}

	/*
	 * WHY: 固定CTAがページ末尾のコンテンツ（フッター含む）に重ならないよう、
	 *      body 下端に固定CTAの高さぶんの余白を確保する
	 *      （このファイル冒頭の「ブレークポイント方針」に記載の対応）。
	 *      高さの目安: 上下 padding(10px×2)＋リンクの高さ(44px)＝64px。
	 */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
}

/*
 * WHY (2026-09-25): 案件担当者の指示「アクセス時は出さず、スクロールでフワッと浮かぶように」。
 *      独自 JS は追加禁止（SSOT DSK-041）のため、CSS の scroll-driven animation で
 *      ページ最上部では隠し、0〜160px のスクロールで下からフェードインさせる（最上部へ戻ると再び隠れる）。
 *      非対応ブラウザ（Safari 26 未満・Firefox 等）と「視差効果を減らす」設定では
 *      従来どおり常時表示にする（案件担当者了承 2026-09-25）。
 *      隠れている間は visibility: hidden で、透明なボタンがタップ・フォーカス対象にならないようにする。
 *      ページ内アンカーや戻る操作でスクロール位置が復元された場合は最初から表示される（CSS のみでは不可避）。
 *      body の padding-bottom は表示時の最終コンテンツ被りを防ぐため常に維持する。
 */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		@keyframes ds-sp-cta-reveal {
			from {
				visibility: hidden;
				opacity: 0;
				transform: translateY(100%);
			}
			to {
				visibility: visible;
				opacity: 1;
				transform: translateY(0);
			}
		}

		.ds-sp-cta {
			animation: ds-sp-cta-reveal linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 160px;
		}
	}
}

/* ==========================================================================
   アクセシビリティ: motion の抑制
   ========================================================================== */

/*
 * WHY: html に設定した scroll-behavior: smooth や、ボタンの transition は
 *      「視差・動きによる乗り物酔い症状（前庭障害）」を持つユーザーには
 *      負担になるため、OS 側で motion を減らす設定がされている場合は
 *      無効化する。今後アンカーリンクのスムーススクロールを追加する前に
 *      受け皿として先に用意しておく。
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ds-btn,
	.ds-icon-grid__item,
	.ds-icon-grid__icon,
	.ds-icon-grid__label,
	.ds-menu__item {
		transition: none;
	}
}