/**
 * Hoffman main stylesheet（骨格版）.
 *
 * すべての可変値は動的CSS（:root の --snk-*）を var() で参照する。
 * ここに色・幅の実値を直書きしない（フォールバック値のみ可）。
 * SCSSビルドチェーンへの移行はプロトタイプ段階で実施（詳細設計書 6.3 TODO）。
 */

/* ---- base ---- */
html {
	overflow-x: clip; /* hidden はsticky破壊のため禁止（開発ナレッジ3） */
}

/* スムーススクロール（設定値は動的CSSの --snk-scroll-behavior。OSの視差軽減設定を尊重） */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: var(--snk-scroll-behavior, auto);
	}
}

/* skip link（sticky header 採用のためキーボード利用者のバイパス必須） */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9500;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.6em 1.2em;
	background: var(--snk-color-main, #2b5797);
	color: #fff;
	text-decoration: none;
	white-space: normal;
}

body {
	overflow-x: clip;
	margin: 0;
	/* サイト背景色を明示。--snk-bg は get_background_color() 由来（既定 #fff）で常時出力される。
	   WP コアの custom-background は「背景色＝既定色かつ画像なし」だと何も出力せず body が透明になり、
	   本番は白キャンバスで白に見える一方、カスタマイザーはプレビュー枠のグレー(#f0f0f1)が透ける。ここで
	   明示的に塗って全コンテキストで白（＝設定背景色）にする。ユーザーが背景色/画像を設定した時はコアの
	   body.custom-background（特異度 0,1,1）がこの宣言（0,0,1）に勝つので競合しない。 */
	background-color: var(--snk-bg, #fff);
	font-family: var(--snk-font-base, sans-serif);
	font-size: var(--snk-font-size, 16px);
	color: var(--snk-color-text, #333);
	line-height: 1.8;
}

a {
	color: var(--snk-color-link, #2b5797);
}

img {
	max-width: 100%;
	height: auto; /* コアが面倒を見るのは .wp-block-image 系のみ＝ベースライン必須（clip環境でのはみ出し無言切断防止） */
}

h1, h2, h3, h4, h5, h6 {
	color: var(--snk-color-heading, #222);
	line-height: 1.4;
}

/* ---- 見出し標準スタイル（body クラスで切替） ---- */
.snk-h2-border-left .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-border-left .snk-content h2:where(.wp-block-heading, :not([class])) {
	padding-left: 0.6em;
	border-left: 5px solid var(--snk-color-main, #2b5797);
}

.snk-h2-underline .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-underline .snk-content h2:where(.wp-block-heading, :not([class])) {
	padding-bottom: 0.3em;
	border-bottom: 3px solid var(--snk-color-main, #2b5797);
}

.snk-h2-bg-fill .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-bg-fill .snk-content h2:where(.wp-block-heading, :not([class])) {
	padding: 0.4em 0.6em;
	background: var(--snk-color-main, #2b5797);
	color: #fff;
}

.snk-h2-both-border .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-both-border .snk-content h2:where(.wp-block-heading, :not([class])) {
	padding: 0.4em 0;
	border-top: 2px solid var(--snk-color-main, #2b5797);
	border-bottom: 2px solid var(--snk-color-main, #2b5797);
}

.snk-h3-border-left .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-border-left .snk-content h3:where(.wp-block-heading, :not([class])) {
	padding-left: 0.6em;
	border-left: 4px solid var(--snk-color-main, #2b5797);
}

.snk-h3-underline .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-underline .snk-content h3:where(.wp-block-heading, :not([class])) {
	padding-bottom: 0.25em;
	border-bottom: 2px solid var(--snk-color-main, #2b5797);
}

.snk-h3-bg-fill .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-bg-fill .snk-content h3:where(.wp-block-heading, :not([class])) {
	padding: 0.3em 0.5em;
	background: var(--snk-color-main-light, #eaf1f9);
}

.snk-h3-both-border .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-both-border .snk-content h3:where(.wp-block-heading, :not([class])) {
	padding: 0.3em 0;
	border-top: 1px solid var(--snk-color-main, #2b5797);
	border-bottom: 1px solid var(--snk-color-main, #2b5797);
}

/* h4 標準スタイル（h3 を細くしたパターン）。 */
.snk-h4-border-left .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-border-left .snk-content h4:where(.wp-block-heading, :not([class])) {
	padding-left: 0.6em;
	border-left: 3px solid var(--snk-color-main, #2b5797);
}
.snk-h4-underline .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-underline .snk-content h4:where(.wp-block-heading, :not([class])) {
	padding-bottom: 0.2em;
	border-bottom: 2px solid var(--snk-color-main, #2b5797);
}
.snk-h4-bg-fill .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-bg-fill .snk-content h4:where(.wp-block-heading, :not([class])) {
	padding: 0.3em 0.5em;
	background: var(--snk-color-main-light, #eaf1f9);
}
.snk-h4-both-border .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-both-border .snk-content h4:where(.wp-block-heading, :not([class])) {
	padding: 0.25em 0;
	border-top: 1px solid var(--snk-color-main, #2b5797);
	border-bottom: 1px solid var(--snk-color-main, #2b5797);
}

/* 追加スタイル（h2/h3/h4 共通・em 基準で各見出しサイズに追従）。 */
/* dot＝先頭にアクセント色の四角マーカー。 */
.snk-h2-dot .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-dot .snk-content h2:where(.wp-block-heading, :not([class])),
.snk-h3-dot .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-dot .snk-content h3:where(.wp-block-heading, :not([class])),
.snk-h4-dot .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-dot .snk-content h4:where(.wp-block-heading, :not([class])) {
	position: relative;
	padding-left: 1em;
}
.snk-h2-dot .snk-article__body h2:where(.wp-block-heading, :not([class]))::before,
.snk-h2-dot .snk-content h2:where(.wp-block-heading, :not([class]))::before,
.snk-h3-dot .snk-article__body h3:where(.wp-block-heading, :not([class]))::before,
.snk-h3-dot .snk-content h3:where(.wp-block-heading, :not([class]))::before,
.snk-h4-dot .snk-article__body h4:where(.wp-block-heading, :not([class]))::before,
.snk-h4-dot .snk-content h4:where(.wp-block-heading, :not([class]))::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.5em;
	height: 0.5em;
	background: var(--snk-color-accent, #e8a33d);
	transform: translateY(-50%);
}
/* double＝二重下線（border の double スタイル）。 */
.snk-h2-double .snk-article__body h2:where(.wp-block-heading, :not([class])),
.snk-h2-double .snk-content h2:where(.wp-block-heading, :not([class])),
.snk-h3-double .snk-article__body h3:where(.wp-block-heading, :not([class])),
.snk-h3-double .snk-content h3:where(.wp-block-heading, :not([class])),
.snk-h4-double .snk-article__body h4:where(.wp-block-heading, :not([class])),
.snk-h4-double .snk-content h4:where(.wp-block-heading, :not([class])) {
	padding-bottom: 0.3em;
	border-bottom: 4px double var(--snk-color-main, #2b5797);
}

/* 本文見出しの文字サイズ（種別ごと・css_var）。装飾スタイルとは独立。 */
.snk-content h2:where(.wp-block-heading, :not([class])),
.snk-article__body h2:where(.wp-block-heading, :not([class])) {
	font-size: var(--snk-h2-size, 28px);
}
.snk-content h3:where(.wp-block-heading, :not([class])),
.snk-article__body h3:where(.wp-block-heading, :not([class])) {
	font-size: var(--snk-h3-size, 22px);
}
.snk-content h4:where(.wp-block-heading, :not([class])),
.snk-article__body h4:where(.wp-block-heading, :not([class])) {
	font-size: var(--snk-h4-size, 18px);
}

/* ---- layout ----
   コンテナでなく直下の子を constrain する（block テーマと同じ構え）＝
   alignwide / alignfull が親の max-width でクリップされない（詳細設計書 6.5・100vw不使用） */
.snk-content {
	padding: 2rem 0;
}

/* 一覧（card/list）セクションの上下余白はカスタマイザーで調整可（帯の下・フッターの上）。
   css_var 既定はスキーマの 56px。ここはアーカイブ系にだけ効かせ、他ページは上の 2rem を維持。 */
.snk-content.snk-archive--card,
.snk-content.snk-archive--grid,
.snk-content.snk-archive--list {
	padding-block: var(--snk-archive-section-gap, 3.5rem);
}

.snk-content > *,
.snk-article > *:not(.snk-article__body),
.snk-article__body > * {
	max-width: var(--snk-content-w, 900px);
	margin-inline: auto;
	padding-inline: 1rem;
	box-sizing: border-box;
}

/* 記事コンテナ自体は全幅（本文内の alignwide/alignfull を殺さない） */
.snk-content > .snk-article {
	max-width: none;
	padding-inline: 0;
}

.snk-content > .alignwide,
.snk-article__body > .alignwide {
	max-width: var(--snk-wide-w, 1160px);
}

.snk-content > .alignfull,
.snk-article__body > .alignfull {
	max-width: none;
	padding-inline: 0;
}

/* 全幅カバーの内側コンテンツを通常本文とコンテンツ幅で揃える。
   通常本文は .snk-content>* に読みガター 1rem が付くが、カバー内側（コア）には付かず
   2rem ぶん広くなる（＝カバーだけ横に広く見える）。同じ 1rem を内側子にも付けて解消。
   内側の alignfull は全幅のまま。 */
.wp-block-cover.alignfull .wp-block-cover__inner-container > :not(.alignfull) {
	padding-inline: 1rem;
	box-sizing: border-box;
}

/* コアcoverの「固定背景（視差）」は iOS Safari で cover+background-attachment:fixed が実質破綻
   （背景がガタつく・画像がズレる）。テーマ独自CTAフッターと同じ方針で、タブレット以下と
   「視差効果を減らす」設定時は通常スクロールに戻す。container と image-background 子の両方を
   対象にし、コアのどちらの指定でも確実に上書きする（子セレクタ 0,3,0 でコア 0,2,0 に勝つ）。 */
@media (max-width: 1024px) {
	.wp-block-cover.has-parallax,
	.wp-block-cover.has-parallax .wp-block-cover__image-background {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.has-parallax,
	.wp-block-cover.has-parallax .wp-block-cover__image-background {
		background-attachment: scroll;
	}
}

/* 長い行のコード・広いテーブルは要素内で横スクロール（html/body の overflow-x:clip 環境では
   はみ出しがスクロールバー無しで無言切断されるため。2カラムの狭い本文で特に重要）.
   max-width は指定しない＝.snk-content>* の読みコンテンツ幅（var(--snk-content-w)）を維持する。
   以前は max-width:100% を置いていたが、これが content-w 制約を特異度で上書きし、表・コード
   ブロックだけ本文テキストより広く（.snk-content 全幅に）広がっていた（ボス報告のはみ出し）. */
.snk-content pre,
.snk-content figure.wp-block-table {
	overflow-x: auto;
}

/* ---- 2カラム（サイドバー・詳細設計書 3.5） ----
   サイドバーなし（1カラム）＝.snk-body は素通し（.snk-content > * が幅を担う＝現状維持）。
   ありのときだけ、サイト基本幅の枠内で本文＋サイドバーをグリッド分割する。 */
.snk-body--sidebar {
	display: grid;
	/* サイドバー列はカスタマイザーで指定した幅（--snk-sidebar-w・既定300px）。本文は
	   minmax(0,1fr) ではみ出しを止める（内部コンテンツの溢れは pre/table の overflow-x:auto
	   で別途担保）。狭い幅は 900px 以下で1カラムに畳む（下記メディアクエリ）. */
	grid-template-columns: minmax(0, 1fr) var(--snk-sidebar-w, 300px);
	gap: 2.5rem;
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.snk-body--left {
	grid-template-columns: var(--snk-sidebar-w, 300px) minmax(0, 1fr);
}

.snk-body--left .snk-sidebar {
	order: -1;
}

/* 2カラム時は本文の子を列いっぱいに（1カラム用の content-w 制約と左右パディングを解除）。
   横パディングはコンテナ側（.snk-body--sidebar の padding）が持つ. */
.snk-body--sidebar .snk-content > *,
.snk-body--sidebar .snk-article > *:not(.snk-article__body),
.snk-body--sidebar .snk-article__body > * {
	max-width: none;
	padding-inline: 0;
}

/* 本文カラムは .snk-content の上下パディング(2rem)ぶん下がるので、サイドバーの頭も揃える. */
.snk-body--sidebar .snk-sidebar {
	padding-block: 2rem;
}

/* パンくずリスト（下山レビュー v2）。帯の下・本文の上。コンテンツ幅・小さめ文字・折り返し可。 */
.snk-breadcrumb {
	max-width: var(--snk-content-w, 900px);
	margin-inline: auto;
	padding: 0.6rem 1rem;
	box-sizing: border-box;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--snk-color-text, #333);
}

/* サイドバー有効ページ＝本文コンテナ（.snk-body--sidebar）と同じ --snk-site-w 幅にして左端を揃える。 */
.snk-breadcrumb--wide {
	max-width: var(--snk-site-w, 1200px);
}

/* 下部配置＝本文の下・フッター手前。本文との間に余白を空ける（上部配置は帯／本文が余白を持つので不要）。 */
.snk-breadcrumb--bottom {
	margin-top: 2rem;
}

.snk-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snk-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.snk-breadcrumb__item:not(:first-child)::before {
	content: "\203A"; /* › ＝区切り */
	margin-right: 0.5em;
	color: var(--snk-color-border, #999);
}

.snk-breadcrumb__link {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.snk-breadcrumb__link:hover {
	text-decoration: underline;
	opacity: 1;
}

.snk-breadcrumb__current {
	font-weight: 600;
}

/* アーカイブ一覧＋サイドバー時は content 側が --snk-archive-section-gap に切替わるため、
   サイドバー頭も同じ余白に揃える（単一記事・固定ページの 2rem は上のまま維持）. */
.snk-content.snk-archive--card ~ .snk-sidebar,
.snk-content.snk-archive--grid ~ .snk-sidebar,
.snk-content.snk-archive--list ~ .snk-sidebar {
	padding-block: var(--snk-archive-section-gap, 2rem);
}

.snk-sidebar .snk-widget {
	margin-bottom: 2rem;
}

/* 900px 以下は1カラムへ畳む（300px固定サイドバー＋タブレット768〜1024で本文が窮屈になる
   デッドゾーンを解消。サイドバーは本文の下へ縦積み・左右指定は無視） */
@media (max-width: 900px) {
	.snk-body--sidebar,
	.snk-body--left {
		grid-template-columns: 1fr;
		/* 1カラムに畳んだらコンテナの幅制約・左右パディングを解除＝サイドバーなしページと
		   同じ全幅ベースに戻し、本文内の alignfull が画面いっぱいに抜けられるようにする
		   （2カラム時は本文カラム幅で正・畳んだ後は全幅が期待挙動）. */
		max-width: none;
		padding: 0;
	}

	.snk-body--left .snk-sidebar {
		order: 0;
	}

	.snk-body--sidebar .snk-sidebar {
		padding-block: 0;
		padding-inline: 1rem;
	}

	/* コンテナ制約を外した代わりに、本文の通常要素へ 1カラム用の幅制約＋左右余白を戻す
	   （サイドバーなしページの .snk-content > * と同じ挙動＝本文は読みやすい幅に収める）. */
	.snk-body--sidebar .snk-content > *,
	.snk-body--sidebar .snk-article > *:not(.snk-article__body),
	.snk-body--sidebar .snk-article__body > * {
		max-width: var(--snk-content-w, 900px);
		margin-inline: auto;
		padding-inline: 1rem;
	}

	/* 記事コンテナ自体は全幅・パディングなし（上の > * 一律指定の例外＝非サイドバー時と
	   同じ構え。これが無いと .snk-article に padding が付き本文全体が内側に寄って alignfull も
	   全幅に届かない）. */
	.snk-body--sidebar .snk-content > .snk-article {
		max-width: none;
		padding-inline: 0;
	}

	/* alignwide / alignfull は本文の幅制約から外す（alignfull=画面全幅・alignwide=wide 幅）. */
	.snk-body--sidebar .snk-content > .alignwide,
	.snk-body--sidebar .snk-article__body > .alignwide {
		max-width: var(--snk-wide-w, 1160px);
		padding-inline: 0;
	}

	.snk-body--sidebar .snk-content > .alignfull,
	.snk-body--sidebar .snk-article__body > .alignfull {
		max-width: none;
		padding-inline: 0;
	}
}

/* ---- header ---- */
.snk-header {
	background: var(--snk-color-header-bg, #fff);
}

.snk-header--sticky {
	position: sticky;
	top: 0;
	z-index: 8000; /* z-indexレイヤ表（詳細設計書 6.5）: 固定UI上位 */
}

/* ログイン中は管理バーの下に潜らないようオフセット */
body.admin-bar .snk-header--sticky {
	top: 32px;
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
	body.admin-bar .snk-header--sticky {
		top: 46px;
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

.snk-header__inner {
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	padding: 0.75rem 1rem;
	box-sizing: border-box;
}

.snk-header--full .snk-header__inner,
.snk-header--full .snk-gnav__inner {
	max-width: none;
}

.snk-logo img {
	width: var(--snk-logo-w-pc, 200px);
	height: auto;
	display: block;
}

.snk-logo__text {
	font-size: var(--snk-site-title-size, 1.25rem);
	font-weight: 700;
	color: var(--snk-color-site-title, #222);
	text-decoration: none;
}

.snk-logo__sp {
	display: none;
}

/* キャッチフレーズ（タグライン）＝ロゴ/タイトルの下（既定・block flow）。色はヘッダー文字色を継承。 */
.snk-logo__tagline {
	margin: 0.15em 0 0;
	font-size: var(--snk-tagline-size, 12px);
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
	opacity: 0.8;
}
/* 横並び＝ロゴ/タイトルとキャッチを横に（body.snk-tagline-beside）。既定の「下」は block flow のまま。
   inline-flex＝中央レイアウト（text-align:center）では中央寄せに乗り、--row（flex）では flex item
   として振る舞う。min-width:0 で --row ヘッダー内でも縮んでナビを押し出さない。タイトル/ロゴは縮めず、
   長いキャッチだけ縮む/内部で折り返す（横 overflow を防ぐ）。 */
.snk-tagline-beside .snk-logo {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	column-gap: 0.6rem;
	min-width: 0;
	max-width: 100%;
	vertical-align: middle;
}
/* ロゴ/タイトル側は縮めない（:not でタグライン以外を指定＝custom_logo+SPロゴでも可視ロゴが縮まない）。 */
.snk-tagline-beside .snk-logo > :not(.snk-logo__tagline) {
	flex: 0 0 auto;
}
.snk-tagline-beside .snk-logo__tagline {
	flex: 0 1 auto;
	min-width: 0;
	margin-top: 0;
	overflow-wrap: anywhere;
}

/* ロゴ/サイトタイトルの効果（影／アウトライン）＝FV重なり時の視認性。色は --snk-logo-effect-color。
   濃さ --snk-logo-effect-strength（既定50）＝影は不透明度%（color-mixで半透明・既定50%で自然な影）、
   アウトラインは縁取りの太さ（strength/50 px＝既定50で1px）に連動。 */
.snk-logo-effect-shadow .snk-logo img {
	filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--snk-logo-effect-color, #000) calc(var(--snk-logo-effect-strength, 50) * 1%), transparent));
}
.snk-logo-effect-shadow .snk-logo__text {
	text-shadow: 0 2px 4px color-mix(in srgb, var(--snk-logo-effect-color, #000) calc(var(--snk-logo-effect-strength, 50) * 1%), transparent);
}
/* アウトライン＝4方向の drop-shadow / text-shadow で縁取りを作る。太さは濃さに連動（strength/50 px）。 */
.snk-logo-effect-outline .snk-logo img {
	--snk-eff-w: calc(var(--snk-logo-effect-strength, 50) / 50 * 1px);
	filter:
		drop-shadow(var(--snk-eff-w) 0 0 var(--snk-logo-effect-color, #000))
		drop-shadow(calc(-1 * var(--snk-eff-w)) 0 0 var(--snk-logo-effect-color, #000))
		drop-shadow(0 var(--snk-eff-w) 0 var(--snk-logo-effect-color, #000))
		drop-shadow(0 calc(-1 * var(--snk-eff-w)) 0 var(--snk-logo-effect-color, #000));
}
.snk-logo-effect-outline .snk-logo__text {
	--snk-eff-w: calc(var(--snk-logo-effect-strength, 50) / 50 * 1px);
	text-shadow:
		var(--snk-eff-w) 0 0 var(--snk-logo-effect-color, #000),
		calc(-1 * var(--snk-eff-w)) 0 0 var(--snk-logo-effect-color, #000),
		0 var(--snk-eff-w) 0 var(--snk-logo-effect-color, #000),
		0 calc(-1 * var(--snk-eff-w)) 0 var(--snk-logo-effect-color, #000);
}

@media (max-width: 767px) {
	.snk-logo img {
		width: var(--snk-logo-w-sp, 140px);
	}

	.snk-logo__pc:not(.snk-logo__pc--solo) {
		display: none;
	}

	.snk-logo__sp {
		display: block;
	}

	/* ロゴ無し時のサイトタイトル文字サイズ・スマホ別指定。 */
	.snk-logo__text {
		font-size: var(--snk-site-title-size-sp, 1.125rem);
	}

	/* スマホのロゴ配置（左＝既定／中央／右。body.snk-sp-logo-*・下山FB）。バーガーは絶対配置
	   なので中央でも重ならない。--row はflexで、text-align＋margin で寄せる。 */
	.snk-sp-logo-center .snk-header__inner--row {
		justify-content: center;
	}
	.snk-sp-logo-center .snk-header__inner {
		text-align: center;
	}
	.snk-sp-logo-center .snk-logo,
	.snk-sp-logo-center .snk-logo img {
		margin-inline: auto;
	}
	.snk-sp-logo-right .snk-header__inner--row {
		justify-content: flex-end;
	}
	.snk-sp-logo-right .snk-header__inner {
		text-align: right;
	}
	.snk-sp-logo-right .snk-logo,
	.snk-sp-logo-right .snk-logo img {
		margin-inline-start: auto;
		margin-inline-end: 0;
	}
	/* 右寄せ時、右にあるバーガー（既定）と重ならないよう内側へ逃がす（バーガー左のときは不要）。 */
	.snk-sp-logo-right.snk-burger-pos-right .snk-header__inner {
		padding-right: 5.5rem;
	}
}

/* タブレットのロゴ配置（768〜1024＝ヘッダーがハンバーガーになる幅。左＝既定／中央／右・下山FB）。
   ★タブレットにハンバーガーが出る設定（device=sp-tb / all）の時だけ効かせる。device=sp-only は
   タブレットで横並びナビが出るため、ロゴ配置を効かせるとナビが右寄せ＋幽霊余白になる誤爆を防ぐ。 */
@media (min-width: 768px) and (max-width: 1024px) {
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-center .snk-header__inner--row {
		justify-content: center;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-center .snk-header__inner {
		text-align: center;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-center .snk-logo,
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-center .snk-logo img {
		margin-inline: auto;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-right .snk-header__inner--row {
		justify-content: flex-end;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-right .snk-header__inner {
		text-align: right;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-right .snk-logo,
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-right .snk-logo img {
		margin-inline-start: auto;
		margin-inline-end: 0;
	}
	:is(.snk-burger-device-sp-tb, .snk-burger-device-all).snk-tb-logo-right.snk-burger-pos-right .snk-header__inner {
		padding-right: 5.5rem;
	}
}

/* ---- header layout variants ---- */
.snk-header__inner--row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	/* ヘッダー縦幅は固定＝サイトタイトル/基本フォントを変えても伸び縮みしない
	   （高さはこの変数だけで決まり、上下paddingは0にして内容を中央寄せで収める）。 */
	height: var(--snk-header-h-pc, 72px);
	padding-block: 0;
}

/* 固定高ヘッダーでは横並びナビは1行前提（折り返すと固定高からはみ出し、
   sticky/overlay時に本文やFVへ重なるため）。項目が多い場合はバーガー運用へ。 */
.snk-header__inner--row .snk-gnav__list {
	flex-wrap: nowrap;
}

/* ヘッダー縦幅・スマホ別指定。PC指定（上）より後に置き、≤767pxで確実に勝たせる
   （同詳細度＝定義順で決まるため、必ずPCルールの後に書く）。 */
@media (max-width: 767px) {
	.snk-header__inner--row {
		height: var(--snk-header-h-sp, 60px);
	}
}

.snk-header--menu-right .snk-gnav--bare {
	margin-left: auto;
}

.snk-header__inner--inline .snk-header__widget {
	margin-left: auto;
}

.snk-header__inner--center {
	text-align: center;
}

.snk-header__inner--center .snk-logo img,
.snk-header__inner--center .snk-logo__sp img {
	margin-inline: auto;
}

.snk-header--center .snk-gnav__list,
.snk-header--center-top .snk-gnav__list {
	justify-content: center;
}

.snk-header__widget {
	display: flex;
	align-items: center;
	gap: 1rem;
}

@media (max-width: 767px) {
	.snk-header__widget {
		display: none; /* [PC]エリア＝SPでは非表示（ドロワー実装時にSP導線を持たせる） */
	}
}

/* ---- header CTA（電話／お問い合わせボタン・詳細設計書 7-1） ----
   配置は案A＝全5レイアウトで右上。中身の描画は snk_the_header_cta()。 */
.snk-header__cta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* 横並び型の右クラスタ化。flexbox は複数の auto マージンへ余白を「均等分配」する
   （＝先頭に寄せない）ので、右グループの先頭要素だけに auto を持たせる：
   - menu-right：gnav（.snk-gnav--bare）が既に margin-left:auto を持つ（下記 line 294）。
     gnav→CTA→widget がそのまま右クラスタになるので CTA には auto を付けない
     （付けると二重 auto で余白が割れ、メニューが中央へ流れる）。
   - inline：gnav は左寄せなので右クラスタの先頭は CTA。CTA に auto を付ける。
     さらに widget 既定の auto（下記 line 298）と二重にならないよう、CTA が先行する時は
     widget 側の auto を打ち消す（無いと余白が割れて CTA が宙に浮く）。CTA 非表示時は
     この兄弟セレクタが不成立＝widget 既定の auto が生き、従来の右寄せを維持する。 */
.snk-header__inner--inline .snk-header__cta {
	margin-left: auto;
}

.snk-header__inner--inline .snk-header__cta ~ .snk-header__widget {
	margin-left: 0;
}

/* 縦積み型（standard/center/center-top）＝ロゴ行の右へ絶対配置。
   ロゴの流れ（左寄せ／中央寄せ）に一切触れず、右上にだけ CTA を乗せる。 */
.snk-header--standard .snk-header__inner,
.snk-header--center .snk-header__inner,
.snk-header--center-top .snk-header__inner {
	position: relative;
}

.snk-header--standard .snk-header__cta,
.snk-header--center .snk-header__cta,
.snk-header--center-top .snk-header__cta {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

/* 電話（注記＋番号）。寄せ＝容器の text-align を CSS変数で切替（注記と番号は幅が違うので
   text-align で両者の揃えが視覚的に効く）。基準色は容器に載せ、番号とアイコンが継承する。
   注記は独自色、アイコンは空=inherit で番号色に追従。注記の上下は描画側の出力順で決まる。 */
.snk-header__cta-tel {
	display: block;
	text-align: var(--snk-cta-header-tel-align, right);
	line-height: 1.25;
	text-decoration: none;
	color: var(--snk-cta-header-tel-color, #2b5797);
}

.snk-header__cta-tel-note {
	display: block;
	font-size: 0.7rem;
	color: var(--snk-cta-header-tel-note-color, #333);
}

.snk-header__cta-tel-line {
	display: block;
}

.snk-header__cta-tel-num {
	font-size: 1.3rem;
	font-weight: 700;
	white-space: nowrap;
}

/* サイズ・ベースラインは基盤 .snk-icon（後方定義・同特異度で勝つ）に委ねる。
   ここは文脈固有の gap と色だけ持つ（重複指定はデッドコードになるため置かない）。 */
.snk-header__cta-tel-icon {
	margin-right: 0.3em;
	font-size: 22px; /* 電話アイコンは本文より一回り大きく（ボス指定・下山レビュー）. */
	color: var(--snk-cta-header-tel-icon-color, inherit);
}

a.snk-header__cta-tel:hover .snk-header__cta-tel-num {
	text-decoration: underline;
}

/* ボタン＝共通ボタンを踏襲しつつヘッダー用にコンパクト化（.snk-btn より後＝勝つ）。
   横幅＝左右padding を CSS変数化（高さ・文字は不変）。 */
.snk-header__cta-btn.snk-btn {
	padding: 0.55em var(--snk-cta-header-btn-pad-x, 24px);
	font-size: 0.95rem;
	white-space: nowrap;
}

/* アイコン付きは inline-flex でラベルと縦中央そろえ＋gap（footer と同型）。
   複合クラスで特異度を上げる（後方定義の .snk-btn { display:inline-block }（0,1,0）に
   順序で負けないよう 0,2,0 にする）。 */
.snk-header__cta-btn.snk-header__cta-btn--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* サイズは基盤 .snk-icon に委ねる。flex 子として縮まないよう flex:none だけ持つ。 */
.snk-header__cta-btn-icon {
	flex: none;
}

/* 自由色の上書き（非空のときだけ描画側が付与するクラス）。複合クラスで .snk-btn--main/accent
   （後方定義・特異度0,1,0）に勝たせる（0,2,0）。空色→inherit の事故は「付けない」ことで回避。 */
.snk-header__cta-btn.snk-header__cta-btn--custombg {
	background: var(--snk-cta-header-btn-bg);
}

.snk-header__cta-btn.snk-header__cta-btn--customfg {
	color: var(--snk-cta-header-btn-fg);
}

/* 自由背景が明るく、文字色を明示していない時だけ描画側が付与＝白文字が埋もれるのを防ぐ
   （素で崩れない原則。フッター帯の「明るい背景×白は自動で暗色」と同じ考え方をボタンにも）。 */
.snk-header__cta-btn.snk-header__cta-btn--darktext {
	color: #222222;
}

/* ヘッダーCTAはPC専用（1024px以下は非表示）。理由：縦積み型は絶対配置なので幅が詰まると
   ロゴと重なる／横並び型もタブレット幅では行が詰まって溢れうる。タブレット・スマホでのCTAの
   出し方（下部固定CTAへ集約 等）は別途決定＝そこで768〜1024の設計も一緒に詰める。 */
@media (max-width: 1024px) {
	.snk-header__cta {
		display: none;
	}
}

/* ---- header overlay（透過ヘッダー＝FV等に重ねる） ---- */
.snk-overlay .snk-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	z-index: 100;
}

body.admin-bar.snk-overlay .snk-header {
	top: 32px;
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
	body.admin-bar.snk-overlay .snk-header {
		top: 46px;
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* スマホ幅の管理バーは position:absolute（スクロールで流れる）ため、追従ヘッダーを管理バー分
   下げたままだとスクロール後に上部へ隙間が出る（ログイン中プレビューのみ・訪問者は管理バー無しで
   元から隙間なし）。追従ヘッダーは top:0 で画面上端にぴったり付ける（最上部で管理バーと一瞬重なる
   だけ）。上2つの 46px ルールに後方定義＋同特異度で勝つ。 */
@media (max-width: 782px) {
	body.admin-bar .snk-header--sticky,
	body.admin-bar.snk-overlay .snk-header--sticky {
		top: 0;
	}
}

.snk-overlay .snk-gnav,
.snk-overlay .snk-gnav--bare {
	background: transparent;
}

/* 白文字モード＝暗背景向け。ロゴはPC/SP両方の img を白化（現行運用の手当てCSSを標準機能化） */
.snk-overlay--white .snk-header .snk-gnav__list a,
.snk-overlay--white .snk-header .snk-logo__text,
.snk-overlay--white .snk-header .snk-logo__tagline {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.snk-overlay--white .snk-header .snk-logo img {
	filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

/* ヘッダーCTAの電話テキスト・アイコンも白化（ボタンは自前の地色があるので対象外）。
   要素別に色を指定していても、FV重なり時はこの白化（特異度0,3,0）が優先される。 */
.snk-overlay--white .snk-header .snk-header__cta-tel,
.snk-overlay--white .snk-header .snk-header__cta-tel-num,
.snk-overlay--white .snk-header .snk-header__cta-tel-note,
.snk-overlay--white .snk-header .snk-header__cta-tel-icon {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.snk-overlay--dark .snk-header .snk-gnav__list a,
.snk-overlay--dark .snk-header .snk-logo__text,
.snk-overlay--dark .snk-header .snk-logo__tagline {
	color: #111;
}

/* ---- 追従ヘッダーのスクロール状態（body.snk-is-stuck・詳細設計書 3.2） ----
   オーバーレイ＋追従＝FV上に留めるため fixed。.snk-overlay .snk-header(absolute・0,2,0)に対し
   .snk-header も重ねて(0,3,0)で確実に勝つ（源順に依存しない）。非overlayの追従は素の
   position:sticky（上の .snk-header--sticky）のまま＝スクロールでも見た目を変えない（非overlay
   ヘッダーは元々地色があり、勝手に背景を差し替えると濃色ヘッダー×明色文字で不可視になるため）。
   z-index も非overlay sticky と揃える（.snk-overlay .snk-header の z-index:100 のままだと
   追従中に後続の positioned 要素へ潜るため 8000 を明示）。 */
.snk-overlay .snk-header.snk-header--sticky {
	position: fixed;
	z-index: 8000;
}

/* 背景変化はなめらかに（モーション低減時は無効）。overlay追従のみ背景が変わる。 */
.snk-overlay .snk-header--sticky {
	transition: background-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.snk-overlay .snk-header--sticky {
		transition: none;
	}
}

/* スクロール後＝オーバーレイの追従ヘッダーに背景色＋不透明度を付ける（透過→背景付きに切替）。
   color-mixで色×不透明度。overlayの透明(0,2,0)に body+overlay(0,3,1)で勝つ。非overlayは対象外
   （地色を保つ＝回帰防止）。 */
body.snk-is-stuck.snk-overlay .snk-header--sticky {
	background: var(--snk-header-scroll-bg, #fff);
	background: color-mix(in srgb, var(--snk-header-scroll-bg, #fff) var(--snk-header-scroll-bg-opacity, 100%), transparent);
}

/* スクロール後＝オーバーレイの白/黒化を解除し、scroll_text の色に（新しい背景色に対して可読に）。
   白化(0,3,1)/黒化に body 付き(0,4,2)で勝つ。※横型背景ブロック(--snk-menu-block-text・0,4,2)は
   後方定義で勝たせる＝ブロック内のナビ文字はブロック色基準のまま（この規則はブロック外＝ロゴ/
   標準ナビ/CTA電話に効く）。 */
body.snk-is-stuck.snk-overlay .snk-header .snk-gnav__list a,
body.snk-is-stuck.snk-overlay .snk-header .snk-logo__text,
body.snk-is-stuck.snk-overlay .snk-header .snk-logo__tagline,
body.snk-is-stuck.snk-overlay .snk-header .snk-header__cta-tel,
body.snk-is-stuck.snk-overlay .snk-header .snk-header__cta-tel-num,
body.snk-is-stuck.snk-overlay .snk-header .snk-header__cta-tel-note,
body.snk-is-stuck.snk-overlay .snk-header .snk-header__cta-tel-icon {
	color: var(--snk-header-scroll-text-color, #222);
	text-shadow: none;
}
body.snk-is-stuck.snk-overlay .snk-header .snk-logo img {
	filter: none;
}

/* バーガーは <header> の兄弟＝上のヘッダー内解除が届かない。スクロール後は追従バーガーが
   スクロール背景の上に載るため、白/黒化を解除して scroll_text の色に（白背景に白バーガーで
   不可視になるのを防ぐ）。:not(.snk-burger-bg) 込みで (0,4,1)＝overlay白黒化(0,2,0)にもburger_color
   指定(body.snk-burger-color .snk-burger=0,2,1)にも勝つ（背景ボックス無し時はスクロール色が優先）。
   ※バーガーが自前の背景ボックス(snk-burger-bg)を持つ時は、スクロール背景でなくそのボックスの
   上に載る＝この解除を効かせない（ボックス色に合わせた色/白化を保つ）＝:not で除外。 */
body.snk-is-stuck.snk-overlay:not(.snk-burger-bg) .snk-burger {
	color: var(--snk-header-scroll-text-color, #222);
}
body.snk-is-stuck.snk-overlay:not(.snk-burger-bg) .snk-burger__box {
	filter: none;
}
body.snk-is-stuck.snk-overlay:not(.snk-burger-bg) .snk-burger__label {
	text-shadow: none;
}

/* ヘッダーCTAの背景ブロック（トグルON＝body.snk-cta-bg）。横型（menu-right/inline＝--row）で
   ヘッダー全高を埋める色ブロックにする（グローバルナビ背景と同型：color-mixで色×不透明度）。
   絶対配置レイアウト（standard/center系）は floating クラスタなので対象外（padding付与で
   ロゴ/中央タイトルに重なるのを避ける）。CTAは既定で背景無し＝オーバーレイの透明強制ルールが
   無いので overlay 時も自然に表示される。 */
body.snk-cta-bg .snk-header__inner--row .snk-header__cta {
	background: var(--snk-cta-header-bg, #fff);
	background: color-mix(in srgb, var(--snk-cta-header-bg, #fff) var(--snk-cta-header-bg-opacity, 100%), transparent);
	align-self: stretch;
	padding-inline: 1.25rem;
}

/* menu-right でCTAが最右（:last-child＝ウィジェット等が無い）の時、ブロックをヘッダー右端まで
   伸ばす＝内側の右padding(1rem)を相殺（ボス指摘Image#23の右余白を解消）。 */
body.snk-cta-bg .snk-header--menu-right .snk-header__cta:last-child {
	margin-right: -1rem;
}

/* ナビ背景ブロックとCTA背景ブロックが両方ON（menu-right＝ロゴ左・ナビ+CTAが右クラスタ）の時は、
   両ブロック間の flex gap(1.5rem＝背後が透ける継ぎ目)を負マージンで相殺し、連続した1本のバーに
   見せる（ボス指摘Image#23）。inline は gnav 左・CTA 右(margin-left:auto)で継ぎ目が無いため除外
   （このマージンで auto を潰さない）。片方だけONなら透明側に継ぎ目は出ないので詰めない。 */
body.snk-gnav-bg.snk-cta-bg .snk-header--menu-right .snk-header__cta {
	margin-left: -1.5rem;
}

/* ブロックON＋オーバーレイ時は、CTAが自前の背景を持つので白/黒化を外し、要素別のtel色設定に戻す
   （ブロック色に合わせた文字色はボスがtel色で調整）。ボタンは自前地色なので対象外。--row限定＝
   ブロックが出るレイアウトのみ（絶対配置の透明CTAでは従来の白化を維持）。特異度(0,4,1)で白化(0,3,1)に勝つ。 */
body.snk-cta-bg.snk-overlay--white .snk-header__inner--row .snk-header__cta-tel,
body.snk-cta-bg.snk-overlay--dark .snk-header__inner--row .snk-header__cta-tel,
body.snk-cta-bg.snk-overlay--white .snk-header__inner--row .snk-header__cta-tel-num,
body.snk-cta-bg.snk-overlay--dark .snk-header__inner--row .snk-header__cta-tel-num {
	color: var(--snk-cta-header-tel-color, #2b5797);
	text-shadow: none;
}

/* アイコンは個別色設定を尊重（空=inheritで番号色に追従）＝白化解除でも番号色に一律化しない。 */
body.snk-cta-bg.snk-overlay--white .snk-header__inner--row .snk-header__cta-tel-icon,
body.snk-cta-bg.snk-overlay--dark .snk-header__inner--row .snk-header__cta-tel-icon {
	color: var(--snk-cta-header-tel-icon-color, inherit);
	text-shadow: none;
}

body.snk-cta-bg.snk-overlay--white .snk-header__inner--row .snk-header__cta-tel-note,
body.snk-cta-bg.snk-overlay--dark .snk-header__inner--row .snk-header__cta-tel-note {
	color: var(--snk-cta-header-tel-note-color, #333);
	text-shadow: none;
}

.snk-gnav {
	/* 1行目＝旧ブラウザ/色クリア時のフォールバック。2行目＝color-mixで背景色×不透明度%を
	   合成（<100%で半透明）。color-mix未対応ブラウザは1行目に落ちる（不透明扱い）。 */
	background: var(--snk-color-menu-bg, #fff);
	background: color-mix(in srgb, var(--snk-color-menu-bg, #fff) var(--snk-menu-bg-opacity, 100%), transparent);
}

/* 横型（menu-right/inline）は既定で透明＝ヘッダーに溶け込む（従来どおり）。 */
.snk-gnav--bare {
	background: transparent;
}

/* トグルON時＝横型メニュー(menu-right/inline)にも背景ブロックを付ける。固定高ヘッダーの
   全高を埋めて Image#19 のような色ブロックにする。オーバーレイ（FV重なり）時も出す＝
   透過ヘッダー上に色ブロックを浮かせるのがボスの主用途（.snk-overlay の透明強制より
   特異度0,3,1で勝つ）。
   ※ display は触らない＝バーガー表示時の `.snk-gnav{display:none}`（特異度が低い）を
   上書きして横型ナビが復活してしまう事故を防ぐ。縦中央寄せは内側 __inner で行う。 */
body.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare {
	background: var(--snk-color-menu-bg, #fff);
	background: color-mix(in srgb, var(--snk-color-menu-bg, #fff) var(--snk-menu-bg-opacity, 100%), transparent);
	align-self: stretch;
	padding-inline: 1.25rem;
}

body.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__inner {
	display: flex;
	align-items: center;
	height: 100%;
}

/* menu-right でナビが実際に最右（:last-child＝CTA/ウィジェットが無い）の時だけ、ブロックを
   ヘッダー右端まで伸ばす＝内側の右padding(1rem)を相殺（全幅で右に白余白が出るのを解消・
   ボス指摘Image#21）。CTA/ウィジェットが続く時は負マージンで隣要素へ食い込むため適用しない。 */
body.snk-gnav-bg .snk-header--menu-right .snk-gnav--bare:last-child {
	margin-right: -1rem;
}

/* ブロックON時の横型ナビ文字色＝明示のメニュー文字色があればそれ、無ければ背景ブロックの
   明暗で自動コントラスト（--snk-menu-block-text を dynamic-css が算出＝暗ブロックに暗文字で
   不可視化するのを防ぐ）。オーバーレイの白/黒化（透過ヘッダー前提）より優先＝ブロック上では
   ブロック色に対して可読な色にする。ロゴ・CTAの白化は透過のままなので触らない（対象は横型
   ブロックのナビリンクのみ）。特異度(0,4,2)で白化(0,3,1)に勝つ。 */
body.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list a {
	color: var(--snk-menu-block-text, inherit);
	text-shadow: none;
}

.snk-gnav--bare .snk-gnav__inner {
	max-width: none;
	padding: 0;
}

.snk-gnav__inner {
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.snk-gnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--snk-gnav-gap, 1.5rem);
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	/* 通常色はリスト(親)に載せ、a は継承する。こうするとホバー未設定時の
	   inherit が「親＝メニュー通常色」に解決され、通常色を変えてもホバーで
	   色が変わらない（a 自身に載せると :hover の inherit が本文色に化ける）。 */
	color: var(--snk-gnav-color, var(--snk-color-text, #333));
}

.snk-gnav__list a {
	color: inherit;
	font-size: var(--snk-gnav-font-size, 1rem);
	text-decoration: none;
}

/* メニュー文字色・ホバー。空(未設定)は inherit＝親のメニュー通常色に解決＝変化なし。 */
.snk-gnav__list a:hover {
	color: var(--snk-gnav-color-hover, inherit);
}

/* 現在開いているページのメニュー項目の色（body.snk-gnav-current＝色を設定した時だけ付与）。
   WP標準の current 系クラス（現在項目＋祖先/親）に当てる＝一覧でも個別投稿でもその節が光る。
   > a で各項目の直下リンクのみ着色（祖先項目の配下リンク全部には広げない。現在項目が
   サブメニュー内なら、その項目の直下リンクは正しく着色される）。空色時はクラス自体が
   出ないので通常色のまま。
   overlay白黒化(0,3,1)とは同特異度だが定義が後なので現在ページ色が勝つ。 */
.snk-gnav-current .snk-gnav__list .current-menu-item > a,
.snk-gnav-current .snk-gnav__list .current_page_item > a,
.snk-gnav-current .snk-gnav__list .current-menu-ancestor > a,
.snk-gnav-current .snk-gnav__list .current_page_ancestor > a,
.snk-gnav-current .snk-gnav__list .current-menu-parent > a,
.snk-gnav-current .snk-gnav__list .current_page_parent > a {
	color: var(--snk-gnav-color-current);
}

/* 背景ブロックON時（--snk-menu-block-text の自動コントラストが 0,4,2 で当たる）も現在ページ色を
   優先する。特異度 0,6,2 で block-text に勝つ（色設定時のみ＝クラスありなので値は必ず実色）。 */
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current-menu-item > a,
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current_page_item > a,
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current-menu-ancestor > a,
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current_page_ancestor > a,
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current-menu-parent > a,
body.snk-gnav-current.snk-gnav-bg .snk-header__inner--row .snk-gnav--bare .snk-gnav__list .current_page_parent > a {
	color: var(--snk-gnav-color-current);
}

/* ヘッダーメニューを太字に（body の snk-gnav-bold で切替）。 */
.snk-gnav-bold .snk-gnav__list a {
	font-weight: 700;
}

/* メニュー項目の説明サブテキスト（body.snk-gnav-desc）。ラベル上・説明下に縦積みで中央寄せ。
   色はリンク色を継承（アクティブ項目は説明も同色）。説明はひと回り小さく・やや控えめ。 */
.snk-gnav-desc .snk-gnav__list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
}

.snk-gnav-desc .snk-gnav__desc {
	margin-top: var(--snk-gnav-desc-gap, 3px);
	font-size: var(--snk-gnav-desc-size, 12px);
	font-weight: 400;
	opacity: 0.85;
}

/* ---- メニューのホバーアクション（body.snk-gnav-hover-*・下山レビュー・既定なし） ----
   色変化（--snk-gnav-color-hover）とは独立の装飾。下線は currentColor 追従なので、
   ブロック文字色の自動コントラストやオーバーレイ白/黒化にも色が乗る。position:relative は
   下線疑似要素(::after)の位置基準（既存レイアウトに無害＝インライン/縦積みどちらでも効く）。
   対象は .snk-gnav__list のみ＝ドロワー(.snk-drawer__list)には出ない。 */
.snk-gnav-hover-underline-center .snk-gnav__list a,
.snk-gnav-hover-underline-slide .snk-gnav__list a {
	position: relative;
}

/* 下線（中央から左右に広がる）。位置(下方向オフセット)と太さは css_var で調整。 */
.snk-gnav-hover-underline-center .snk-gnav__list a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--snk-gnav-underline-offset, 6px));
	width: 0;
	height: var(--snk-gnav-underline-thickness, 2px);
	background: currentColor;
	transform: translateX(-50%);
	transition: width 0.25s ease;
}
.snk-gnav-hover-underline-center .snk-gnav__list a:hover::after {
	width: 100%;
}

/* 下線（左からスライドして伸びる）。scaleX を transform-origin:left で。位置と太さは css_var。 */
.snk-gnav-hover-underline-slide .snk-gnav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--snk-gnav-underline-offset, 6px));
	width: 100%;
	height: var(--snk-gnav-underline-thickness, 2px);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}
.snk-gnav-hover-underline-slide .snk-gnav__list a:hover::after {
	transform: scaleX(1);
}

/* フェード（ホバーでやや薄く）。opacity はインライン a にも効く。 */
.snk-gnav-hover-fade .snk-gnav__list a {
	transition: opacity 0.2s ease;
}
.snk-gnav-hover-fade .snk-gnav__list a:hover {
	opacity: 0.6;
}

/* モーション低減の希望時はトランジションを無効化（最終状態は保つ＝ホバーで即表示）。 */
@media (prefers-reduced-motion: reduce) {
	.snk-gnav-hover-underline-center .snk-gnav__list a::after,
	.snk-gnav-hover-underline-slide .snk-gnav__list a::after,
	.snk-gnav-hover-fade .snk-gnav__list a {
		transition: none;
	}
}

/* ---- hamburger / drawer（SPナビ・詳細設計書 3.6） ---- */

/* バーガーボタン。既定はPCで非表示、デバイス別に下のメディアクエリで出す。
   <header> の兄弟として絶対配置（親を positioned にせず sticky を壊さない。
   位置基準は文書上端＝ヘッダーバー内に収まる）。 */
.snk-burger {
	display: none;
	position: absolute;
	top: 0;
	z-index: 8500; /* z-index表（6.5）: sticky header(8000) の上・skip-link(9500) の下 */
	flex-direction: column; /* アイコン上・テキスト下（下山レビュー） */
	align-items: center;
	gap: var(--snk-burger-label-gap, 6px); /* アイコンとテキストの間隔（下山レビュー・調整可） */
	margin: 0;
	padding: 0.9rem 1rem;
	border: 0;
	background: transparent;
	color: var(--snk-color-heading, #222);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* 固定高ヘッダー（--row=menu-right/inline）だけ、ヘッダー縦幅に合わせてバーガーを縦中央に置き
   ロゴと縦位置を揃える（下山レビュー item3）。自然高レイアウト（standard/center/center-top）は
   --snk-header-h を使わないので、min-height 固定にすると縦ズレ＋短ヘッダーでボタン箱がはみ出して
   本文タップを吸うため、上の padding のままヘッダー内に収める。 */
.snk-header-layout-menu-right .snk-burger,
.snk-header-layout-inline .snk-burger {
	min-height: var(--snk-header-h-pc, 72px);
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}
@media (max-width: 767px) {
	.snk-header-layout-menu-right .snk-burger,
	.snk-header-layout-inline .snk-burger {
		min-height: var(--snk-header-h-sp, 60px);
	}
}

/* ハンバーガーに背景色を付ける（body.snk-burger-bg＝色設定時のみ）。ボタンの padding/min-height
   がそのまま色ボックスになる。空色時はクラスが出ないので透明のまま（下山レビュー）。 */
.snk-burger-bg .snk-burger {
	background: var(--snk-burger-bg);
	border-radius: var(--snk-burger-bg-radius, 0);
}

.snk-burger-pos-right .snk-burger {
	right: 0;
}

.snk-burger-pos-left .snk-burger {
	left: 0;
}

/* 固定／ヘッダー追従時は viewport 固定 */
.snk-burger--fixed .snk-burger,
.snk-burger-follows-header .snk-burger {
	position: fixed;
}

/* 追従(sticky): 既定は絶対配置（上部ではヘッダー内に表示）。JSが is-visible を
   付けたら固定に切り替わる＝スクロール後に画面へ貼り付く。 */
.snk-burger--sticky .snk-burger.is-visible {
	position: fixed;
}

/* 管理バーぶんのオフセット（絶対配置時もヘッダー位置＝管理バー下に揃える） */
body.admin-bar .snk-burger {
	top: 32px;
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
	body.admin-bar .snk-burger {
		top: 46px;
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* スマホ幅の管理バーは position:absolute（スクロールで流れる）。追従ヘッダーを top:0 にしたのに
   合わせて、ヘッダー追従（follows-header）／固定（--fixed）／追従表示中（--sticky is-visible）で
   fixed になるバーガーも top:0 に揃える＝ヘッダーとバーガーが46pxズレるのを防ぐ。絶対配置のまま
   スクロールで流れるバーガーは46px据え置きで隙間が出ない。 */
@media (max-width: 782px) {
	body.admin-bar.snk-burger-follows-header .snk-burger,
	body.admin-bar.snk-burger--fixed .snk-burger,
	body.admin-bar.snk-burger--sticky .snk-burger.is-visible {
		top: 0;
	}
}

/* 開いている間はボタンを隠す（閉じるは パネル内の× / バックドロップ / Esc）。
   visibility:hidden は使わない＝フォーカス中要素の不可視化でブラウザのフォーカス補正が
   走り、開いた直後の closeBtn.focus() を body へ奪い返す競合が起きるため。
   opacity+pointer-events なら補正が起きず、フォーカスは確実にドロワーへ移る。
   opacity ではバーガーはタブ順に残るが、脱出は drawer.js のフォーカストラップが
   再捕捉する（aria-modal は AT 向けでタブ順は制御しない）。 */
body.snk-drawer-open .snk-burger {
	opacity: 0;
	pointer-events: none;
}

/* アイコン（3本線） */
.snk-burger__box {
	position: relative;
	display: block;
	width: 26px;
	height: 18px;
	flex: none;
}

.snk-burger__bars,
.snk-burger__bars::before,
.snk-burger__bars::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.snk-burger__bars {
	top: 50%;
	transform: translateY(-50%);
}

.snk-burger__bars::before {
	content: "";
	top: -8px;
}

.snk-burger__bars::after {
	content: "";
	top: 8px;
}

.snk-burger__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* オーバーレイ（ヒーロー重ね）時のバーガー色。バーガーは <header> の兄弟なので
   既存の .snk-overlay--white .snk-header … の白化が届かない＝個別指定する。
   バーは currentColor 由来なので color で白化し、可読性の影は box/label に付ける. */
.snk-overlay--white .snk-burger {
	color: #fff;
}

.snk-overlay--white .snk-burger__box {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.snk-overlay--white .snk-burger__label {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.snk-overlay--dark .snk-burger {
	color: #111;
}

/* ハンバーガーのアイコン/テキスト色（body.snk-burger-color＝色設定時のみ・下山レビュー）。
   バーは currentColor、ラベルは color 継承なので両方に効く。ボスが明示指定した色は
   オーバーレイ白/黒化(0,2,1)より優先（後方定義＋同特異度で勝つ）＝濃色の背景ボックスに
   合わせて可読な色を選べる。スクロール解除(body.snk-is-stuck.snk-overlay=0,3,1)は上位で維持。 */
body.snk-burger-color .snk-burger {
	color: var(--snk-burger-color);
}

.snk-burger:focus-visible,
.snk-drawer__close:focus-visible {
	outline: 2px solid var(--snk-color-main, #2b5797);
	outline-offset: 2px;
}

/* ---- drawer 本体 ---- */
.snk-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

body.snk-drawer-open .snk-drawer-backdrop {
	opacity: 1;
	visibility: visible;
}

.snk-drawer {
	position: fixed;
	inset: 0;
	z-index: 9100;
	visibility: hidden;
	transition: visibility 0.3s;
	/* ドロワー層は常にクリックを奪わない（開時も none）。全画面を覆う層だが、空き領域の
	   クリックは下の backdrop（z:9000・閉じるトリガー）へ通し、操作を受けるのは panel だけ.
	   ここを auto にすると backdrop クリックがドロワー層に吸われて「暗部を押しても閉じない」. */
	pointer-events: none;
}

body.snk-drawer-open .snk-drawer {
	visibility: visible;
}

/* 背景スクロールロック（ドロワーが全画面を覆う間だけ）。横方向 overflow を恒常的に
   hidden 化して sticky を壊す禁止事項とは別物＝開いている一時的な両軸指定で、この間は
   sticky を観測できる場面が無いため問題ない. */
body.snk-drawer-open {
	overflow: hidden;
}

.snk-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(86vw, 360px);
	max-width: 100%;
	padding: 4rem 1.5rem 2rem;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
	pointer-events: auto; /* ドロワー層は none なので、操作（メニュー・閉じる×）を受けるのは panel のみ */
	/* サイト背景色＋本文色のペアで読む（ヘッダー背景に追従させると暗ヘッダーで
	   暗地×暗文字になり読めないため）. */
	background: var(--snk-bg, #fff);
	color: var(--snk-color-text, #333);
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

body.snk-drawer-open .snk-drawer__panel {
	transform: translateX(0);
}

/* ログイン中は管理バーに隠れないようパネル上端を下げる（閉じる×が潜るのを防ぐ） */
body.admin-bar .snk-drawer__panel {
	top: 32px;
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
	body.admin-bar .snk-drawer__panel {
		top: 46px;
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* 左出し（ボタン位置が左のときはドロワーも左から） */
.snk-burger-pos-left .snk-drawer__panel {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

/* アニメ無効（body クラス） */
.snk-burger-anim-off .snk-drawer__panel,
.snk-burger-anim-off .snk-drawer-backdrop {
	transition: none;
}

/* OSの「視差効果を減らす」時はドロワーのスライド／フェードを止める（開閉は即時）。
   カスタマイザーの snk-burger-anim-off とは別に、ユーザーの reduced-motion 希望を常に尊重
   ＝テーマの他モーション（FV誘導・ボタン・ホバー下線・totop 等）と挙動を揃える. */
@media (prefers-reduced-motion: reduce) {
	.snk-drawer__panel,
	.snk-drawer-backdrop,
	.snk-drawer {
		transition: none;
	}
}

/* 閉じる× */
.snk-drawer__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.snk-drawer__close-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
}

.snk-drawer__close-icon::before,
.snk-drawer__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.snk-drawer__close-icon::before {
	transform: rotate(45deg);
}

.snk-drawer__close-icon::after {
	transform: rotate(-45deg);
}

/* ドロワー内ナビ／ウィジェット */
.snk-drawer__nav,
.snk-drawer__widgets {
	margin: 1rem 0;
}

.snk-drawer__list,
.snk-drawer__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snk-drawer__list .sub-menu {
	padding-left: 1em;
}

.snk-drawer__list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.snk-drawer__list a {
	display: block;
	padding: 0.9em 0.2em;
	color: inherit;
	text-decoration: none;
}

/* デバイス別: 該当幅でバーガー表示＋PCナビ（gnav・ヘッダー右[PC]ウィジェット）非表示。
   バーガーが出る所では PC 導線を両方引っ込める（重複と右上の重なりを防ぐ）。SP導線は
   ドロワー内へ集約。 */
@media (max-width: 767px) {
	.snk-burger-device-sp-only .snk-burger,
	.snk-burger-device-sp-tb .snk-burger {
		display: inline-flex;
	}

	.snk-burger-device-sp-only .snk-gnav,
	.snk-burger-device-sp-tb .snk-gnav {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.snk-burger-device-sp-tb .snk-burger {
		display: inline-flex;
	}

	.snk-burger-device-sp-tb .snk-gnav,
	.snk-burger-device-sp-tb .snk-header__widget {
		display: none;
	}
}

.snk-burger-device-all .snk-burger {
	display: inline-flex;
}

.snk-burger-device-all .snk-gnav,
.snk-burger-device-all .snk-header__widget,
.snk-burger-device-all .snk-header__cta {
	display: none; /* device=all はPC幅でもバーガーがナビを代替＝右上でバーガーとCTAが衝突するため一緒に隠す */
}

/* pos=left でバーガーが左寄せロゴに重ならないよう、バーガー表示域だけ左に余白を確保。
   バーガーは out-of-flow で場所を取らないため、ヘッダー内側にパディングを足して逃がす. */
@media (max-width: 767px) {
	.snk-burger-pos-left.snk-burger-device-sp-only .snk-header__inner,
	.snk-burger-pos-left.snk-burger-device-sp-tb .snk-header__inner {
		padding-left: 4rem;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.snk-burger-pos-left.snk-burger-device-sp-tb .snk-header__inner {
		padding-left: 4rem;
	}
}

.snk-burger-pos-left.snk-burger-device-all .snk-header__inner {
	padding-left: 4rem;
}

/* スマホでロゴ中央時は、上の「バーガー回避 padding-left:4rem」を打ち消して全幅で中央に置く
   （中央のロゴと端のバーガーは重ならない）。pos-left ルール(0,3,0)より後方＋同特異度で勝つ。 */
@media (max-width: 767px) {
	.snk-sp-logo-center.snk-burger-pos-left .snk-header__inner {
		padding-left: 1rem;
	}
}

/* タブレットでロゴ中央時も同様に「バーガー回避 padding-left:4rem」（device=sp-tb/all）を打ち消す
   ＝中央基準が右へずれないように（スマホ中央と同じ処置）。 */
@media (min-width: 768px) and (max-width: 1024px) {
	.snk-tb-logo-center.snk-burger-pos-left .snk-header__inner {
		padding-left: 1rem;
	}
}

/* ---- first view ---- */
.snk-fv {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--snk-fv-h-pc, 80vh);
	/* 配置（上/下・左/右）で付く内側余白を min-height の内側に収める＝FV総高を配置で変えない
	   （Image#50 の「同じ枠内の9ポジション」を保つ）。既定は余白ゼロ＝見た目不変。 */
	box-sizing: border-box;
	overflow: hidden;
}

@media (max-width: 767px) {
	.snk-fv {
		min-height: var(--snk-fv-h-sp, 60vh);
	}
}

.snk-fv--fallback {
	background: linear-gradient(135deg, var(--snk-color-main, #2b5797), var(--snk-color-main-light, #eaf1f9));
}

.snk-fv__bg,
.snk-fv__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.snk-fv__overlay {
	position: absolute;
	inset: 0;
	background: var(--snk-fv-overlay-color, #000);
	opacity: var(--snk-fv-overlay-opacity, 0.3);
	z-index: 1;
}

/* FVパーティクル（下山レビューL）＝背景（画像＋overlay）の上・コンテンツ（z-index:2）の下で点＋線が動く。 */
.snk-fv__particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.snk-fv--fallback .snk-fv__overlay {
	display: none;
}

/* ---- FV video ---- */
.snk-fv__bg--video {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.snk-fv__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* YouTube iframe は object-fit 不可＝16:9を維持したまま短辺を覆うオーバーサイズ配置 */
.snk-fv__video--yt {
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100vw, 177.78vh);
	height: max(56.25vw, 100vh);
	pointer-events: none;
}

.snk-fv__bg--sp {
	display: none;
}

@media (max-width: 767px) {
	.snk-fv--sp-image .snk-fv__bg--video {
		display: none; /* スマホ代替画像設定時は動画を読まない見た目に（要素自体の遅延はTODO） */
	}

	.snk-fv--sp-image .snk-fv__bg--sp {
		display: block;
		position: absolute;
		inset: 0;
	}
}

/* ---- FV border（下端境界線・塗りはサイト背景色に追従） ---- */
.snk-fv__border {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	z-index: 1;
	color: var(--snk-bg, #fff);
	line-height: 0;
}
/* 区切り線より下（境界帯の塗り＝SVG fill / ぼかしグラデの終端）の色。既定はサイト背景色。
   色を明示した時だけ body クラスで上書き（空色→'inherit'出力の罠を避ける）。 */
body.snk-fv-border-color .snk-fv__border {
	color: var(--snk-fv-border-color);
}

.snk-fv__border svg {
	display: block;
	width: 100%;
	height: var(--snk-fv-border-height, 64px);
}
/* 下部をぼかす＝サイト背景色（currentColor＝--snk-bg）への縦グラデ。FV下端が背景になじむ。 */
.snk-fv__border--fade {
	height: var(--snk-fv-border-height, 64px);
	background: linear-gradient(to bottom, transparent, currentColor);
}

.snk-fv__content {
	position: relative;
	z-index: 2;
	max-width: var(--snk-content-w, 900px);
	padding: 2rem 1rem;
	text-align: center;
	color: var(--snk-fv-text, #fff);
}

/* FVコンテンツの配置（下山レビューL・横×縦の9ポジション）。既定=中央（.snk-fv の place-items:center）。
   非既定の時だけ body クラスで justify-items/align-items を上書き。端寄せ時は端に貼り付かないよう内側余白。
   スライダーは grid が各 .snk-fv__slide にあるので、同じ配置ルールを .snk-fv__slide にも効かせる（対象追加のみ）。 */
body.snk-fv-h-left .snk-fv,
body.snk-fv-h-left .snk-fv__slide {
	justify-items: start;
}

body.snk-fv-h-right .snk-fv,
body.snk-fv-h-right .snk-fv__slide {
	justify-items: end;
}

body.snk-fv-v-top .snk-fv,
body.snk-fv-v-top .snk-fv__slide {
	align-items: start;
}

body.snk-fv-v-bottom .snk-fv,
body.snk-fv-v-bottom .snk-fv__slide {
	align-items: end;
}

body.snk-fv-h-left .snk-fv,
body.snk-fv-h-left .snk-fv__slide,
body.snk-fv-h-right .snk-fv,
body.snk-fv-h-right .snk-fv__slide {
	padding-inline: clamp(1rem, 6vw, 5rem);
}

body.snk-fv-v-top .snk-fv,
body.snk-fv-v-top .snk-fv__slide,
body.snk-fv-v-bottom .snk-fv,
body.snk-fv-v-bottom .snk-fv__slide {
	padding-block: clamp(1.5rem, 6vh, 5rem);
}

/* スマホ別配置（下山レビューL）。sp_align_enable の時だけ snk-fv-sp-h/v-* が付く（center 含む全値）。
   SP幅で PC 配置（上のルール）を上書き＝PC由来の余白を一旦リセットしてから SP 値で付け直す。 */
@media (max-width: 767px) {

	body.snk-fv-sp-h-left .snk-fv,
	body.snk-fv-sp-h-left .snk-fv__slide,
	body.snk-fv-sp-h-center .snk-fv,
	body.snk-fv-sp-h-center .snk-fv__slide,
	body.snk-fv-sp-h-right .snk-fv,
	body.snk-fv-sp-h-right .snk-fv__slide {
		justify-items: center;
		padding-inline: 0;
	}

	body.snk-fv-sp-v-top .snk-fv,
	body.snk-fv-sp-v-top .snk-fv__slide,
	body.snk-fv-sp-v-center .snk-fv,
	body.snk-fv-sp-v-center .snk-fv__slide,
	body.snk-fv-sp-v-bottom .snk-fv,
	body.snk-fv-sp-v-bottom .snk-fv__slide {
		align-items: center;
		padding-block: 0;
	}

	body.snk-fv-sp-h-left .snk-fv,
	body.snk-fv-sp-h-left .snk-fv__slide {
		justify-items: start;
		padding-inline: clamp(1rem, 6vw, 5rem);
	}

	body.snk-fv-sp-h-right .snk-fv,
	body.snk-fv-sp-h-right .snk-fv__slide {
		justify-items: end;
		padding-inline: clamp(1rem, 6vw, 5rem);
	}

	body.snk-fv-sp-v-top .snk-fv,
	body.snk-fv-sp-v-top .snk-fv__slide {
		align-items: start;
		padding-block: clamp(1.5rem, 6vh, 5rem);
	}

	body.snk-fv-sp-v-bottom .snk-fv,
	body.snk-fv-sp-v-bottom .snk-fv__slide {
		align-items: end;
		padding-block: clamp(1.5rem, 6vh, 5rem);
	}
}

/* 文字の寄せ（塊の中でのテキスト揃え。center-left＝塊は中央だが文字は左揃え）。 */
body.snk-fv-text-left .snk-fv__content {
	text-align: left;
}

body.snk-fv-text-right .snk-fv__content {
	text-align: right;
}

/* 左寄せ中央＝塊を fit-content に縮めて中の文字は左揃え。塊の左右位置は配置（justify-items）に委ねる
   ＝margin-inline:auto は使わない（h=左/右 の配置を打ち消さないため）。 */
body.snk-fv-text-center-left .snk-fv__content {
	width: fit-content;
	text-align: left;
}

/* ---- FV画像スライダー（下山レビューL・フェーズB） ---- */
/* スライダーは grid を解除し、各スライドを絶対配置で重ねる（グリッド＝各 .snk-fv__slide 側）。
   画像0枚のフォールバック時は .snk-fv 基底の grid（中央寄せ）を残す＝:not(.snk-fv--fallback) でスコープ。 */
.snk-fv--slider:not(.snk-fv--fallback) {
	display: block;
}

.snk-fv__slides {
	position: absolute;
	inset: 0;
}

.snk-fv__slide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
}

/* fade＝重ねて opacity 遷移。非活性はクリック不可＝下のボタンを拾わない。 */
.snk-fv--slider-fade .snk-fv__slide {
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--snk-fv-slider-speed, 600ms) ease;
}

.snk-fv--slider-fade .snk-fv__slide.is-active {
	z-index: 1;
	opacity: 1;
	pointer-events: auto;
}

/* slide＝横並びを translateX で移動（移動量は JS が inline style）。 */
.snk-fv--slider-slide .snk-fv__slides {
	display: flex;
	transition: transform var(--snk-fv-slider-speed, 600ms) ease;
}

.snk-fv--slider-slide .snk-fv__slide {
	position: relative;
	inset: auto;
	flex: 0 0 100%;
}

/* ドット（現在位置＋手動切替）。境界線/スクロール誘導と被らない下端中央。 */
.snk-fv__dots {
	position: absolute;
	bottom: 1.25rem;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}

.snk-fv__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.snk-fv__dot:hover {
	background: rgba(255, 255, 255, 0.6);
}

.snk-fv__dot.is-active {
	background: #fff;
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {

	.snk-fv--slider-fade .snk-fv__slide,
	.snk-fv--slider-slide .snk-fv__slides,
	.snk-fv__dot {
		transition: none;
	}
}

/* FV スクロール誘導（下山レビュー）。FV下端に配置・クリックで本文へ・アイコンは上下バウンス。 */
.snk-fv__scroll {
	/* 大きさ（%）を倍率に変換＝子孫（circle/bar/wave）が var(--snk-fv-scroll-k) で相似に拡縮。
	   font-size を倍率化することで em ベースの chevron/アイコン/テキストも一緒に効く。 */
	--snk-fv-scroll-k: calc(var(--snk-fv-scroll-scale, 100) / 100);
	position: absolute;
	bottom: clamp(1.25rem, 4vh, 2.5rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	color: var(--snk-fv-text, #fff);
	text-decoration: none;
	font-size: calc(0.75rem * var(--snk-fv-scroll-k));
	letter-spacing: 0.12em;
	line-height: 1;
}
/* 色を明示指定した時だけ（body クラス方式＝空色→'inherit' の罠を避ける）。全種 currentColor 追従。 */
body.snk-fv-scroll-color .snk-fv__scroll {
	color: var(--snk-fv-scroll-color);
}
/* 横位置＝配置（左/中央/右）を基準に px で微調整（＋で右／−で左）。 */
.snk-fv__scroll--center {
	left: 50%;
	transform: translateX(calc(-50% + var(--snk-fv-scroll-offset-x, 0px)));
}
.snk-fv__scroll--left {
	left: calc(clamp(1rem, 5vw, 3rem) + var(--snk-fv-scroll-offset-x, 0px));
}
.snk-fv__scroll--right {
	right: calc(clamp(1rem, 5vw, 3rem) - var(--snk-fv-scroll-offset-x, 0px));
}
/* 境界線ON時は境界帯（.snk-fv__border）より上へ上げる＝境界の塗り（サイト背景色）に
   白い誘導アイコンが重なって不可視になるのを防ぐ（下山レビューの三重の網指摘）。
   逃がし量は境界線の高さに連動＝高さを大きく（最大240px）しても必ず境界帯の上に出る。 */
.snk-fv-has-border .snk-fv__scroll {
	bottom: calc(var(--snk-fv-border-height, 64px) + clamp(1rem, 3vh, 1.5rem));
}
/* 下向きシェブロン（2辺ボーダー＋45deg回転）＝circle-text 中央・wave の矢印に使う共通シェイプ。 */
.snk-fv__scroll-chevron {
	display: block;
	width: 0.6em;
	height: 0.6em;
	border-right: calc(2px * var(--snk-fv-scroll-k, 1)) solid currentColor;
	border-bottom: calc(2px * var(--snk-fv-scroll-k, 1)) solid currentColor;
	transform: rotate(45deg);
}
@keyframes snk-fv-scroll-chevron-bounce {
	0%, 100% { transform: translateY(0) rotate(45deg); }
	50% { transform: translateY(calc(4px * var(--snk-fv-scroll-k, 1))) rotate(45deg); }
}

/* --- chevrons（山括弧二重・アイコンの上に任意テキスト） --- */
.snk-fv__scroll-icon .snk-icon {
	width: 1.4em;
	height: 1.4em;
	animation: snk-fv-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes snk-fv-scroll-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(5px * var(--snk-fv-scroll-k, 1))); }
}

/* --- circle-text（回転する円形テキスト＋中央の下向き矢印） --- */
.snk-fv__scroll-circle {
	position: relative;
	display: block;
	width: calc(92px * var(--snk-fv-scroll-k, 1));
	height: calc(92px * var(--snk-fv-scroll-k, 1));
}
.snk-fv__scroll-circle svg {
	display: block;
	width: 100%;
	height: 100%;
	animation: snk-fv-scroll-rotate 16s linear infinite;
}
.snk-fv__scroll-circle text {
	fill: currentColor;
	font-size: 9px;
	/* 字間は textPath の textLength（円周長）で均等配置するため、固定 letter-spacing は置かない
	   （置くと調整前の全長が変わり円周ちょうどにフィットしにくくなる）。 */
	text-transform: uppercase;
}
.snk-fv__scroll-circle .snk-fv__scroll-chevron {
	position: absolute;
	top: 50%;
	left: 50%;
	animation: snk-fv-scroll-circle-chevron 1.8s ease-in-out infinite;
}
@keyframes snk-fv-scroll-rotate {
	to { transform: rotate(360deg); }
}
@keyframes snk-fv-scroll-circle-chevron {
	0%, 100% { transform: translate(-50%, -65%) rotate(45deg); }
	50% { transform: translate(-50%, -35%) rotate(45deg); }
}

/* --- scrollbar（縦バー＋上から下へ流れる線＋任意の縦書きテキスト） --- */
.snk-fv__scroll--scrollbar {
	gap: 0.7em;
}
.snk-fv__scroll-bar-text {
	writing-mode: vertical-rl;
	letter-spacing: 0.15em;
	font-size: calc(0.7rem * var(--snk-fv-scroll-k, 1));
	text-transform: uppercase;
}
.snk-fv__scroll-bar {
	position: relative;
	/* 幅は縮小時も 1px を下限に（DPR=1 環境で 0.5px がかすれるのを防ぐ）。 */
	width: max(1px, calc(1px * var(--snk-fv-scroll-k, 1)));
	height: calc(56px * var(--snk-fv-scroll-k, 1));
	overflow: hidden;
}
/* トラック（薄い線）＝擬似要素＋opacity で作る（color-mix 非依存＝全ブラウザで出る）。
   流れる fill は子要素で ::before より上に載る。 */
.snk-fv__scroll-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0.3;
}
.snk-fv__scroll-bar-fill {
	position: absolute;
	inset: 0;
	background: currentColor;
	transform-origin: top;
	animation: snk-fv-scroll-liner 2.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes snk-fv-scroll-liner {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- wave（1文字ずつ遅延させて上下に波打つ＋下向き矢印） --- */
.snk-fv__scroll--wave {
	gap: 0.5em;
}
.snk-fv__scroll-wave {
	display: flex;
	font-size: calc(0.85rem * var(--snk-fv-scroll-k, 1));
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.snk-fv__scroll-wave span {
	display: inline-block;
	animation: snk-fv-scroll-wave 1.6s ease-in-out infinite;
	animation-delay: calc(0.08s * var(--i));
}
@keyframes snk-fv-scroll-wave {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(-6px * var(--snk-fv-scroll-k, 1))); }
}
.snk-fv__scroll--wave .snk-fv__scroll-chevron {
	animation: snk-fv-scroll-chevron-bounce 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.snk-fv__scroll-icon .snk-icon,
	.snk-fv__scroll-circle svg,
	.snk-fv__scroll-circle .snk-fv__scroll-chevron,
	.snk-fv__scroll-bar-fill,
	.snk-fv__scroll-wave span,
	.snk-fv__scroll--wave .snk-fv__scroll-chevron {
		animation: none;
	}
	/* 動きを止めた時、中央矢印は静止した中央位置に置く。 */
	.snk-fv__scroll-circle .snk-fv__scroll-chevron {
		transform: translate(-50%, -50%) rotate(45deg);
	}
}

/* 文字サイズは端末別（PC=既定／タブレット=≤1024／スマホ=≤767）。行間・サブ/説明の上部余白も可変（下山レビューL）。
   既定値は現行の見た目相当＝設定してなければほぼ従来どおり。 */
.snk-fv__title {
	margin: 0 0 0.5em;
	/* h1 化してもグローバル見出し色でなく FV 文字色（親 .snk-fv__content の --snk-fv-text）を継承する。 */
	color: inherit;
	font-size: var(--snk-fv-title-size-pc, 48px);
	font-weight: 700;
	line-height: var(--snk-fv-title-lh, 1.35);
}

.snk-fv__subtitle {
	/* 上部余白は padding-top で出す＝直前要素の margin-bottom と相殺せず常に加算（既定0で不変）。 */
	margin: 0 0 1em;
	padding-top: var(--snk-fv-subtitle-mt, 0px);
	font-size: var(--snk-fv-subtitle-size-pc, 22px);
	line-height: var(--snk-fv-subtitle-lh, 1.8);
}

.snk-fv__message {
	margin: 0 0 1.5em;
	padding-top: var(--snk-fv-message-mt, 0px);
	font-size: var(--snk-fv-message-size-pc, 16px);
	line-height: var(--snk-fv-message-lh, 1.8);
}

@media (max-width: 1024px) {

	.snk-fv__title {
		font-size: var(--snk-fv-title-size-tb, 40px);
	}

	.snk-fv__subtitle {
		font-size: var(--snk-fv-subtitle-size-tb, 19px);
	}

	.snk-fv__message {
		font-size: var(--snk-fv-message-size-tb, 16px);
	}
}

@media (max-width: 767px) {

	.snk-fv__title {
		font-size: var(--snk-fv-title-size-sp, 30px);
	}

	.snk-fv__subtitle {
		font-size: var(--snk-fv-subtitle-size-sp, 17px);
	}

	.snk-fv__message {
		font-size: var(--snk-fv-message-size-sp, 16px);
	}
}

/* FV文字（キャッチ）の装飾（下山レビューL）。全て body クラスで出し分け＝既定は非適用＝回帰ゼロ。
   影／アウトラインはロゴ効果（.snk-logo-effect-*）と同じ手法。背景・斜めは inner span に効かせる。 */

/* 影 */
body.snk-fv-title-effect-shadow .snk-fv__title {
	text-shadow: 0 2px 6px color-mix(in srgb, var(--snk-fv-title-effect-color, #000) calc(var(--snk-fv-title-effect-strength, 50) * 1%), transparent);
}

/* アウトライン（縁取り）＝4方向の text-shadow。太さは濃さ（既定50=1px）に連動。 */
body.snk-fv-title-effect-outline .snk-fv__title {
	--snk-fv-eff-w: calc(var(--snk-fv-title-effect-strength, 50) / 50 * 1px);
	text-shadow:
		var(--snk-fv-eff-w) 0 0 var(--snk-fv-title-effect-color, #000),
		calc(-1 * var(--snk-fv-eff-w)) 0 0 var(--snk-fv-title-effect-color, #000),
		0 var(--snk-fv-eff-w) 0 var(--snk-fv-title-effect-color, #000),
		0 calc(-1 * var(--snk-fv-eff-w)) 0 var(--snk-fv-title-effect-color, #000);
}

/* 下線＝種類別に text-decoration-style を指定。太さは css_var、色は既定で文字色に追従（ul-color 時のみ上書き）。
   最内層の inner span に効かせる＝text-decoration は「自要素のテキスト」に効くので、斜め(skew span=inline-block)や
   文字背景box(inner=inline-block)で inline-block 境界に阻まれても下線が切れない（p に付けると子の inline-block へ伝播しない）。 */
body.snk-fv-title-ul-solid .snk-fv__title-inner,
body.snk-fv-title-ul-dashed .snk-fv__title-inner,
body.snk-fv-title-ul-dotted .snk-fv__title-inner,
body.snk-fv-title-ul-double .snk-fv__title-inner,
body.snk-fv-title-ul-wavy .snk-fv__title-inner {
	text-decoration-line: underline;
	text-decoration-thickness: var(--snk-fv-title-ul-width, 3px);
	text-underline-offset: 0.15em;
}

body.snk-fv-title-ul-solid .snk-fv__title-inner {
	text-decoration-style: solid;
}

body.snk-fv-title-ul-dashed .snk-fv__title-inner {
	text-decoration-style: dashed;
}

body.snk-fv-title-ul-dotted .snk-fv__title-inner {
	text-decoration-style: dotted;
}

body.snk-fv-title-ul-double .snk-fv__title-inner {
	text-decoration-style: double;
}

body.snk-fv-title-ul-wavy .snk-fv__title-inner {
	text-decoration-style: wavy;
}

body.snk-fv-title-ul-color .snk-fv__title-inner {
	text-decoration-color: var(--snk-fv-title-ul-color, currentColor);
}

/* 文字背景：ハイライト（行マーカー・各行に背景）／ボックス（塊）。inner span に効かせる。 */
body.snk-fv-title-bg-highlight .snk-fv__title-inner {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0.08em 0.3em;
	background-color: var(--snk-fv-title-bg-color, #ff3269);
}

body.snk-fv-title-bg-box .snk-fv__title-inner {
	display: inline-block;
	padding: 0.25em 0.6em;
	background-color: var(--snk-fv-title-bg-color, #ff3269);
}

/* 斜め（傾き）＝ 専用ラッパ .snk-fv__title-skew を inline-block にして回転。
   3層に分けて transform / display の競合を全部回避する：
   見出し（.snk-fv__title）＝登場アニメの translate/scale ／ skew span＝rotate ／
   inner span＝文字背景 highlight の inline＋box-decoration-break:clone（各行マーカー）。
   0deg の時はクラスが付かず非適用。 */
body.snk-fv-title-skew .snk-fv__title-skew {
	display: inline-block;
	transform: rotate(var(--snk-fv-title-skew, 0deg));
}

/* アーチ文字（下山レビューL）＝キャッチを SVG textPath で弧に沿わせる。文字色/サイズ/間隔は SVG text に。
   font-size / letter-spacing は viewBox のユーザー単位＝SVG が width:100% で拡縮＝相似レスポンシブ。 */
.snk-fv__title--arch {
	margin: 0 0 0.5em;
}

.snk-fv__arch {
	display: block;
	width: 100%;
	aspect-ratio: 1000 / 300;
	overflow: visible;
}

.snk-fv__arch text {
	fill: var(--snk-fv-text, #fff);
	font-size: var(--snk-fv-arch-size, 60px);
	font-weight: 700;
	letter-spacing: var(--snk-fv-arch-spacing, 0);
}

/* FV登場アニメ（下山レビューL）。ページ表示時にキャッチ→サブ→説明→ボタンが順に登場。
   共通クラス snk-fv-anim（時間/遅延）＋種別クラス snk-fv-anim-<type>（keyframes）で出し分け。
   既定は非適用＝回帰ゼロ。reduced-motion では animation を一切付けない（素の表示のまま）。 */
@media (prefers-reduced-motion: no-preference) {

	body.snk-fv-anim .snk-fv__content > * {
		animation-duration: var(--snk-fv-anim-speed, 700ms);
		animation-fill-mode: both;
		animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* stagger＝子要素の順に遅延（1番目=0／以降 stagger ずつ）。 */
	body.snk-fv-anim .snk-fv__content > *:nth-child(2) {
		animation-delay: calc(var(--snk-fv-anim-stagger, 150ms) * 1);
	}

	body.snk-fv-anim .snk-fv__content > *:nth-child(3) {
		animation-delay: calc(var(--snk-fv-anim-stagger, 150ms) * 2);
	}

	body.snk-fv-anim .snk-fv__content > *:nth-child(4) {
		animation-delay: calc(var(--snk-fv-anim-stagger, 150ms) * 3);
	}

	body.snk-fv-anim .snk-fv__content > *:nth-child(5) {
		animation-delay: calc(var(--snk-fv-anim-stagger, 150ms) * 4);
	}

	body.snk-fv-anim-fade .snk-fv__content > * {
		animation-name: snk-fv-in-fade;
	}

	body.snk-fv-anim-fade-up .snk-fv__content > * {
		animation-name: snk-fv-in-fade-up;
	}

	body.snk-fv-anim-zoom .snk-fv__content > * {
		animation-name: snk-fv-in-zoom;
	}

	body.snk-fv-anim-slide .snk-fv__content > * {
		animation-name: snk-fv-in-slide;
	}

	/* タイプライター時はキャッチの登場アニメを外す（打ち込みが登場を兼ねる・JS が制御）。 */
	body.snk-fv-typewriter .snk-fv__title {
		animation-name: none;
	}

	/* タイプライター開始前の逆フラッシュ防止＝キャッチ本文を隠しておき、JS がタイプ開始時に見せる。
	   reduced-motion では JS が動かず素の全文表示なので、この隠しも効かせない（no-preference 内に置く）。 */
	body.snk-fv-typewriter .snk-fv__title-inner {
		visibility: hidden;
	}
}

@keyframes snk-fv-in-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes snk-fv-in-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes snk-fv-in-zoom {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes snk-fv-in-slide {
	from { opacity: 0; transform: translateX(-32px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* タイプライターのカーソル（JS が挿入する .snk-fv__cursor）。文字色の細い縦棒が点滅。 */
.snk-fv__cursor {
	display: inline-block;
	width: 0.08em;
	height: 1em;
	margin-left: 0.06em;
	background-color: currentColor;
	vertical-align: text-bottom;
	animation: snk-fv-caret 1s step-end infinite;
}

@keyframes snk-fv-caret {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.snk-fv__cursor {
		animation: none;
	}
}

.snk-fv__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* ボタンの配置（下山レビューL・既定=中央）。 */
body.snk-fv-btn-left .snk-fv__buttons {
	justify-content: flex-start;
}

body.snk-fv-btn-right .snk-fv__buttons {
	justify-content: flex-end;
}

/* コアのボタンブロック: 色未指定時はメインカラーに追従（デフォルトの暗灰色固定を排除） */
.wp-block-button__link:not(.has-background) {
	background-color: var(--snk-color-main, #2b5797);
}

.wp-block-button__link:not(.has-text-color) {
	color: #fff;
}

/* ---- 下層ページタイトル帯（詳細設計書 3.4） ---- */
.snk-pagehead {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--snk-pagehead-h-pc, 220px);
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
	background-color: var(--snk-pagehead-bg, #eaf1f9);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.snk-pagehead {
		min-height: var(--snk-pagehead-h-sp, 140px);
	}
}

.snk-pagehead__overlay {
	position: absolute;
	inset: 0;
	background: var(--snk-pagehead-overlay-color, #000);
	opacity: var(--snk-pagehead-overlay-opacity, 0.3);
}

.snk-pagehead__inner {
	position: relative;
	z-index: 1;
	max-width: var(--snk-site-w, 1200px);
	width: 100%;
}

.snk-pagehead__title {
	margin: 0;
	color: var(--snk-pagehead-text, #222);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.3;
}

/* 帯タイトルの見出し飾り（本文H2スタイルを流用・色は --snk-color-main）。中央寄せの帯に
   合わせて inline-block にし、装飾をテキスト幅に寄せて中央に置く（下線が帯全幅に伸びない）。 */
.snk-pagehead__title--border-left,
.snk-pagehead__title--underline,
.snk-pagehead__title--bg-fill,
.snk-pagehead__title--both-border {
	display: inline-block;
}
.snk-pagehead__title--border-left {
	padding-left: 0.6em;
	border-left: 5px solid var(--snk-color-main, #2b5797);
}
.snk-pagehead__title--underline {
	padding-bottom: 0.3em;
	border-bottom: 3px solid var(--snk-color-main, #2b5797);
}
.snk-pagehead__title--bg-fill {
	padding: 0.4em 0.6em;
	background: var(--snk-color-main, #2b5797);
	color: #fff;
}
.snk-pagehead__title--both-border {
	padding: 0.4em 0;
	border-top: 2px solid var(--snk-color-main, #2b5797);
	border-bottom: 2px solid var(--snk-color-main, #2b5797);
}

/* 上/下サブテキスト（全一覧共通・空で非表示）。色はタイトル文字色に追従し少し控えめ。
   サイズは css_var。上サブは字間を少し開けてアイブロウ（NEWS等）らしく。 */
.snk-pagehead__sub {
	margin: 0;
	color: var(--snk-pagehead-text, #222);
	font-size: var(--snk-pagehead-sub-size, 14px);
	line-height: 1.4;
	opacity: 0.85;
}
.snk-pagehead__sub--above {
	margin-bottom: 0.5em;
	/* 字間を開けてアイブロウ（NEWS等）らしく。末尾にも字間が付き中央寄せが半字ぶん
	   左にずれるため、同量の padding-left で光学中央を補正する。 */
	letter-spacing: 0.08em;
	padding-left: 0.08em;
}
.snk-pagehead__sub--below {
	margin-top: 0.6em;
}

/* オーバーレイ時は透過ヘッダーが帯の上に重なる。中身は縦「上寄せ」に切り替え、padding-top で
   確実にヘッダー下へ落とす（中央寄せのままだと余白を足しても見出しが中間に浮いて避けきれない）。
   ヘッダーは段組で高さが変わるので、2段（ロゴ＋メニューが上下）は余白を大きく取る。
   SPでは gnav が畳まれて1段になるため余白過多になるが、内容は伸びるだけでクリップしない。
   極端に背の高いロゴは帯の高さ設定で調整する想定. */
.snk-overlay .snk-pagehead {
	align-items: start;
	padding-top: 6rem;
}

.snk-overlay.snk-header-layout-standard .snk-pagehead,
.snk-overlay.snk-header-layout-center .snk-pagehead {
	padding-top: 8rem;
}

.snk-overlay.snk-header-layout-center-top .snk-pagehead {
	padding-top: 10rem;
}

/* ---- 共通機構: アイコン（章11.2）＋ボタンアニメーション（章11.3） ---- */

/* inline SVG アイコンの基準サイズ＝文字サイズ追従（currentColor で文字色にも追従） */
.snk-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.snk-cta-footer__tel-icon {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

/* ---- buttons ---- */
.snk-btn {
	display: inline-block;
	padding: 0.8em 2.2em;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s;
}

.snk-btn:hover {
	opacity: 0.85;
}

.snk-btn--main {
	background: var(--snk-color-main, #2b5797);
	color: #fff;
}

.snk-btn--accent {
	background: var(--snk-color-accent, #e8a33d);
	color: #fff;
}

/* ---- ボタンアニメ（章11.3・hover 演出） ----
   .snk-btn 基底の transition(opacity) と同特異度のため、必ず buttons より後に定義する
   （前に置くと transition が打ち消されアニメがカクつく）。opacity も含めて基底 hover を維持。
   transform/box-shadow ベース＝レイアウトを動かさない（CLSゼロ） */
.snk-anim--lift,
.snk-anim--scale {
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s;
}

.snk-anim--lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.snk-anim--scale:hover {
	transform: scale(1.05);
}

.snk-anim--shine {
	position: relative;
	overflow: hidden;
}

.snk-anim--shine::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-25deg);
	transition: left 0.55s ease;
	pointer-events: none;
}

.snk-anim--shine:hover::before {
	left: 130%;
}

/* OSの「視差効果を減らす」設定では全アニメ無効（a11y・要件定義書§5） */
@media (prefers-reduced-motion: reduce) {
	.snk-anim--lift,
	.snk-anim--scale,
	.snk-anim--shine::before {
		transition: none;
	}

	.snk-anim--lift:hover,
	.snk-anim--scale:hover {
		transform: none;
		box-shadow: none;
	}

	.snk-anim--shine::before {
		display: none;
	}
}

/* ---- FVボタン共通部品（下山レビューL・CTA準拠）。サイズ/アウトライン/自由色を body クラスで効かせる。
   いずれも既定（中/塗り/プリセット色）はクラスが付かず .snk-btn 基底のまま＝回帰ゼロ。 ---- */
body.snk-fv-btn-size-sm .snk-fv__btn {
	padding: 0.65em 1.6em;
	font-size: 0.85rem;
}

body.snk-fv-btn-size-lg .snk-fv__btn {
	padding: 0.95em 2.8em;
	font-size: 1.15rem;
}

/* 自由色（per-button・色設定時のみ body クラスが付く＝空色 inherit の罠回避）。
   .snk-fv__btn を足して preset（.snk-btn--*）より高特異度＝常に自由色が勝つ。塗り時＝背景/文字色。 */
body.snk-fv-btn1-custombg .snk-fv__btn.snk-fv__btn--1 {
	background-color: var(--snk-fv-btn1-bg);
}

body.snk-fv-btn2-custombg .snk-fv__btn.snk-fv__btn--2 {
	background-color: var(--snk-fv-btn2-bg);
}

body.snk-fv-btn1-customfg .snk-fv__btn.snk-fv__btn--1 {
	color: var(--snk-fv-btn1-fg);
}

body.snk-fv-btn2-customfg .snk-fv__btn.snk-fv__btn--2 {
	color: var(--snk-fv-btn2-fg);
}

/* アウトライン＝背景透明＋枠線。枠は文字色に追従（currentColor）＝preset/自由色どちらでも一元で乗る。 */
body.snk-fv-btn-outline .snk-fv__btn {
	background: transparent;
	border: 2px solid currentcolor;
}

body.snk-fv-btn-outline .snk-fv__btn.snk-btn--main {
	color: var(--snk-color-main, #2b5797);
}

body.snk-fv-btn-outline .snk-fv__btn.snk-btn--accent {
	color: var(--snk-color-accent, #e8a33d);
}

/* アウトライン時の自由色＝背景は塗らず、枠＆文字を自由色に（currentColor が枠に乗る）。
   preset の outline 色ルール(0,3,1)に、複合＋後方定義(0,4,1)で勝つ。 */
body.snk-fv-btn-outline.snk-fv-btn1-custombg .snk-fv__btn.snk-fv__btn--1 {
	background-color: transparent;
	color: var(--snk-fv-btn1-bg);
}

body.snk-fv-btn-outline.snk-fv-btn2-custombg .snk-fv__btn.snk-fv__btn--2 {
	background-color: transparent;
	color: var(--snk-fv-btn2-bg);
}

/* アウトライン時に文字色を明示した場合は customfg を最優先（枠もこの色に追従）。 */
body.snk-fv-btn-outline.snk-fv-btn1-customfg .snk-fv__btn.snk-fv__btn--1 {
	color: var(--snk-fv-btn1-fg);
}

body.snk-fv-btn-outline.snk-fv-btn2-customfg .snk-fv__btn.snk-fv__btn--2 {
	color: var(--snk-fv-btn2-fg);
}

/* ---- CTA: フッター帯（詳細設計書 3.7） ---- */
.snk-cta-footer {
	position: relative;
	text-align: center;
	color: #fff; /* 基底の安全色（見出し/本文/電話は各要素で色変数を上書き。明るい背景時は要素ごとに自動で暗色へ） */
	background-size: cover;
	background-position: center;
}

/* 背景 variant＝共通機構（章11.1）。var 結線のみ＝値は動的CSS（スキーマ駆動）から */
.snk-cta-footer--main {
	background-color: var(--snk-color-main, #2b5797);
}

.snk-cta-footer--accent {
	background-color: var(--snk-color-accent, #e8a33d);
}

.snk-cta-footer--custom {
	background-color: var(--snk-cta-footer-bg-color, #f5f5f5);
}

.snk-cta-footer--gradient {
	background-image: linear-gradient(var(--snk-cta-footer-bg-grad-dir, 135deg), var(--snk-cta-footer-bg-grad-from, #2b5797), var(--snk-cta-footer-bg-grad-to, #1a3560));
}

.snk-cta-footer--image {
	background-color: var(--snk-color-main, #2b5797); /* 画像読込前・添付削除時のフォールバック */
	background-position: var(--snk-cta-footer-bg-pos-x, 50%) var(--snk-cta-footer-bg-pos-y, 50%);
}

/* 固定背景＝PCのみ（iOS Safari は cover+fixed が実質破綻するため SP/TB は通常スクロール） */
@media (min-width: 1025px) {
	.snk-cta-footer--bg-fixed {
		background-attachment: fixed;
	}
}

/* 画像背景時は明るい画像でも白文字が沈まないよう影を足す（オーバーレイと二段構え） */
.snk-cta-footer--image .snk-cta-footer__inner {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.snk-cta-footer__overlay {
	position: absolute;
	inset: 0;
	background: var(--snk-cta-footer-bg-overlay-color, #000);
	opacity: var(--snk-cta-footer-bg-overlay-opacity, 0.5);
}

.snk-cta-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	padding: var(--snk-cta-footer-pad-y, 48px) 1rem;
}

.snk-cta-footer__title {
	margin: 0 0 var(--snk-cta-footer-title-gap, 8px); /* C 見出し-本文の間隔 */
	/* 指定サイズを尊重しつつ、狭い画面では vw で頭打ちにして横溢れ（clip環境の無言切断）を防ぐ */
	font-size: min(var(--snk-cta-footer-title-size, 28px), 9vw);
	font-weight: 700;
	color: var(--snk-cta-footer-title-color, #fff); /* 見出しの文字色（明るい背景×既定白は動的CSSが暗色へ自動上書き） */
	overflow-wrap: break-word;
}

.snk-cta-footer__message {
	margin: 0 0 1.5em;
	font-size: var(--snk-cta-footer-message-size, 16px);
	text-align: var(--snk-cta-footer-message-align, center); /* F 本文の左中右配置 */
	color: var(--snk-cta-footer-message-color, #fff); /* 本文の文字色 */
}

.snk-cta-footer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem var(--snk-cta-footer-col-gap, 32px); /* E 横並び時のカラム間隔（行間は 1rem 固定） */
}

/* 縦積み（1カラム）＝電話の下にボタン */
.snk-cta-footer__actions--vertical {
	flex-direction: column;
}

/* 電話ブロックの色＝電話番号の色（tel-link と注記が継承）。tel が暗転すれば注記も追従 */
.snk-cta-footer__tel {
	color: var(--snk-cta-footer-tel-color, #fff);
}

.snk-cta-footer__tel-link {
	/* アイコン＋番号を inline-flex で並べ、隙間は gap で一元管理（HTML空白＋marginの二重を排除） */
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	/* 電話番号は改行できないので、狭い画面では vw で頭打ちにして横溢れを防ぐ */
	font-size: min(var(--snk-cta-footer-tel-size, 26px), 8vw);
	font-weight: 700;
	color: inherit; /* .snk-cta-footer__tel の電話番号色を継承 */
	text-decoration: none;
}

/* 電話アイコンの色＝自前の色を指定すればそれ。空なら動的CSSが 'inherit' を出力し親（電話番号）の色を継承 */
.snk-cta-footer__tel-icon {
	color: var(--snk-cta-footer-tel-icon-color, inherit);
}

.snk-cta-footer__tel-note {
	display: block;
	margin-top: var(--snk-cta-footer-tel-note-gap, 4px); /* D 電話番号-注記の間隔 */
	font-size: 0.85rem;
	opacity: 0.9;
}

/* ボタンの色はカスタマイザー指定（既定＝白地＋メインカラー文字で色帯にコントラスト）。
   横のサイズ＝左右padding のみ上書き（.snk-btn の縦 0.8em は維持＝高さ・文字は不変で横幅だけ伸縮） */
.snk-cta-footer__btn {
	background: var(--snk-cta-footer-btn-bg, #fff);
	color: var(--snk-cta-footer-btn-fg, #2b5797);
	padding-inline: var(--snk-cta-footer-btn-pad-x, 35px);
}

/* M ボタンアイコン＝ラベルとアイコンを inline-flex で並べる（アイコンは .snk-icon で 1em） */
.snk-cta-footer__btn--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.snk-cta-footer__btn-icon {
	flex: none;
}

/* 電話リンクのホバー効果（下線＝動きなし／薄く・浮きは transition。reduce で動きを無効化） */
.snk-cta-footer__tel-link--hover-underline:hover {
	text-decoration: underline;
}

.snk-cta-footer__tel-link--hover-opacity {
	transition: opacity 0.2s ease;
}

.snk-cta-footer__tel-link--hover-opacity:hover {
	opacity: 0.75;
}

.snk-cta-footer__tel-link--hover-lift {
	transition: transform 0.2s ease;
}

.snk-cta-footer__tel-link--hover-lift:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.snk-cta-footer__tel-link--hover-opacity,
	.snk-cta-footer__tel-link--hover-lift {
		transition: none;
	}

	.snk-cta-footer__tel-link--hover-lift:hover {
		transform: none;
	}
}

/* スマホ表示（≤767px）＝見出し・本文・電話番号の文字サイズをPCと別値で指定できる（詳細設計書11.4）。
   vwの頭打ち（横溢れ防止）はPCと同じく維持し、サイズ変数だけSP用に差し替える */
@media (max-width: 767px) {
	.snk-cta-footer__title {
		font-size: min(var(--snk-cta-footer-title-size-sp, 28px), 9vw);
	}

	.snk-cta-footer__message {
		font-size: var(--snk-cta-footer-message-size-sp, 16px);
	}

	.snk-cta-footer__tel-link {
		font-size: min(var(--snk-cta-footer-tel-size-sp, 26px), 8vw);
	}
}

/* G ボックス型＝全幅帯を左右に余白のある角丸カードにする（上下マージンで隣接と離す） */
.snk-cta-footer--box {
	/* 広い画面はサイト幅で頭打ち・狭い画面でも左右 1rem を残してカード感を出す */
	width: calc(100% - 2rem);
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	margin-block: var(--snk-cta-footer-box-margin, 40px);
	border-radius: 8px;
	overflow: clip; /* 角丸で背景画像・オーバーレイをはみ出させない（overflow-x:hidden ではなく clip） */
}

/* ボックス型＋固定背景の同時指定は Safari(WebKit) で border-radius/overflow:clip が固定背景に効かず
   四隅が四角くはみ出す既知バグ。ボックス時は固定を無効化してカードの角丸を守る（視差より角丸を優先）。
   特異度 0,2,0 で min-width:1025px の固定指定（0,1,0）に勝つため全幅で確実に上書き. */
.snk-cta-footer--box.snk-cta-footer--bg-fixed {
	background-attachment: scroll;
}

/* ---- CTA: SP画面下部固定バー（詳細設計書 3.7・SPのみ） ---- */
.snk-spfix {
	display: none;
}

@media (max-width: 767px) {
	.snk-spfix {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 7000; /* コンテンツ上・sticky header(8000)/ドロワー(9000+)より下 */
		display: flex;
		padding-bottom: env(safe-area-inset-bottom); /* iPhone ホームインジケータぶん */
	}

	.snk-spfix__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4em; /* アイコン↔ラベル */
		flex: 1;
		min-width: 0; /* flex子でラベルの ellipsis を効かせる */
		padding: 0.95rem 0.5rem;
		line-height: 1.4; /* body の 1.8 を継承させない＝バー高を一定に保つ */
		font-weight: 700;
		text-decoration: none;
		color: #fff;
	}

	/* 電話/リンクで個別の文字サイズ（v2）。base より高特異度で勝つ。 */
	.snk-spfix__btn--tel {
		font-size: var(--snk-cta-spfix-tel-size, 16px);
	}

	.snk-spfix__btn--link {
		font-size: var(--snk-cta-spfix-btn-size, 16px);
	}

	/* アイコン＝縮まない／ラベル＝長い時は省略（バーを膨らませない） */
	.snk-spfix__icon {
		flex: none;
		width: 1.15em;
		height: 1.15em;
	}

	.snk-spfix__label {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 隣接ボタンの境目 */
	.snk-spfix__btn + .snk-spfix__btn {
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}

	/* 電話/リンクの背景色は不透明度込みで PHP がインラインで出す（プリセット/自由色 × 不透明度を
	   rgba で確定＝CSS変数の色関数依存を避けブラウザ差を無くす）。ここは文字色/境目だけ。 */
	.snk-spfix__btn--main {
		color: #fff;
	}

	/* 明るいアクセントは暗い文字でコントラスト確保 */
	.snk-spfix__btn--accent {
		color: #222;
	}

	/* 右ボタンが明るいアクセントの時は境目を暗く */
	.snk-spfix__btn + .snk-spfix__btn--accent {
		border-left-color: rgba(0, 0, 0, 0.15);
	}

	/* 自由文字色（色設定時のみ body クラス＝空色→inherit罠回避・プリセット文字色に勝つ）。 */
	body.snk-spfix-tel-customfg .snk-spfix__btn--tel {
		color: var(--snk-spfix-tel-fg);
	}

	body.snk-spfix-btn-customfg .snk-spfix__btn--link {
		color: var(--snk-spfix-btn-fg);
	}

	/* 固定バーぶんの余白＝フッターリンク被り/CLS 防止（body.snk-has-spfix は表示時のみ付与）。
	   バー高＝ボタン padding 0.95rem×2（=1.9rem）＋ line-height 1.4×フォントサイズ。フォントサイズは
	   電話/リンクで個別（最大24px）＝余白も max(tel,btn) に連動させる（固定値だと最大サイズで被る）。
	   +0.25rem は端数/境目の安全マージン。 */
	body.snk-has-spfix {
		padding-bottom: calc(
			1.9rem +
			1.4 * max(var(--snk-cta-spfix-tel-size, 16px), var(--snk-cta-spfix-btn-size, 16px)) +
			0.25rem + env(safe-area-inset-bottom)
		);
	}

	/* 管理バー表示中でも下固定は画面下でOK（上は管理バー、下はバー＝干渉しない） */
}

/* ---- footer ---- */
.snk-footer {
	background: var(--snk-color-footer-bg, #222);
	color: var(--snk-color-footer-text, #fff);
}

.snk-footer__inner {
	max-width: var(--snk-site-w, 1200px);
	margin-inline: auto;
	padding: 1.5rem 1rem;
	box-sizing: border-box;
}

.snk-footer__wide {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.snk-footer__columns {
	display: grid;
	grid-template-columns: repeat(var(--snk-footer-cols, 3), 1fr);
	gap: 2rem;
}

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

.snk-footer a {
	color: var(--snk-color-footer-text, #fff);
}

.snk-widget__title {
	font-size: 1rem;
	color: inherit;
}

.snk-footer__copyright-area {
	margin-bottom: 1rem;
	text-align: center;
}

.snk-copyright--left {
	text-align: left;
}

.snk-copyright--center {
	text-align: center;
}

.snk-copyright--right {
	text-align: right;
}

/* ---- フッターメニュー（専用フッターメニュー割当時のみ・詳細設計書 3.9） ----
   リンク色は .snk-footer a（フッターテキスト色）を継承。並び=横/縦、寄せ=左中右。 */
.snk-footer__menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	font-size: var(--snk-footer-menu-size, 14px);
}
.snk-footer__menu--vertical .snk-footer__menu-list {
	flex-direction: column;
}
/* 寄せ＝横並びは justify-content（主軸）、縦積みは align-items（交差軸）で効く＝両方指定。 */
.snk-footer__menu--align-left .snk-footer__menu-list {
	justify-content: flex-start;
	align-items: flex-start;
}
.snk-footer__menu--align-center .snk-footer__menu-list {
	justify-content: center;
	align-items: center;
}
.snk-footer__menu--align-right .snk-footer__menu-list {
	justify-content: flex-end;
	align-items: flex-end;
}
.snk-footer__menu-list a {
	text-decoration: none;
}
.snk-footer__menu-list a:hover {
	text-decoration: underline;
}
.snk-footer__menu--bold .snk-footer__menu-list a {
	font-weight: 700;
}

/* メニュー項目の説明サブテキスト（ヘッダーと同じ発想・ラベル下に小さく）。各項目の
   リンクを縦積みにしてラベル→説明の順。説明はひと回り小さく控えめ。 */
.snk-footer__menu--desc .snk-footer__menu-list a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.3;
}
.snk-footer__menu-desc {
	margin-top: 2px;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.75;
}

/* プライバシーポリシーリンク（コピーライト行の上に小さく中央）。既定の下線は消し、
   ホバー時だけ下線＝フッターメニューのリンクと見た目を揃える（下山レビュー）。 */
.snk-footer__privacy {
	margin-bottom: 0.5rem;
	text-align: center;
	font-size: 0.85em;
}
.snk-footer__privacy a {
	text-decoration: none;
}
.snk-footer__privacy a:hover {
	text-decoration: underline;
}

/* ---- 投稿メタ（詳細設計書 3.8-1） ---- */
.snk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1em;
	margin-block: 0.5rem;
	font-size: 0.85rem;
	color: var(--snk-color-text, #333);
	opacity: 0.85;
}

.snk-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.snk-meta a {
	color: inherit;
	text-decoration: none;
}

.snk-meta a:hover {
	text-decoration: underline;
}

.snk-meta__avatar {
	border-radius: 50%;
	vertical-align: middle;
}

/* ==== 一覧カード（ブログ/アーカイブ/検索の1件・詳細設計書 8-2） ====
   マークアップは共通（parts/content-card.php）。見た目は .snk-content の修飾クラス
   （snk_archive_layout_class）で切替：card/list・下線/枠線ボックス・アイキャッチ位置・
   バッジ地色の明暗。base＝カード縦積み（バッジ→見出し→メタ→抜粋、アイキャッチ左は任意）。 */
.snk-card {
	position: relative; /* カード全体クリック（stretched link）＋ホバー浮きの基準。 */
	padding-block: var(--snk-archive-card-gap, 2rem); /* カード間隔＝カスタマイザーで調整可。 */
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* カード全体を1つのリンクに＝見出しリンクを疑似要素でカード全面へ広げる（stretched link）。
   入れ子リンクを作らずに全面クリックを実現する。 */
.snk-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* バッジ・メタ内リンクはオーバーレイの上に出し、個別リンクとして押せるようにする。 */
.snk-card__cats,
.snk-card__body > .snk-meta a {
	position: relative;
	z-index: 2;
}

/* 本文スロット。flex 子になった時に長い見出しで溢れないよう min-width:0. */
.snk-card__body {
	min-width: 0;
}

/* カテゴリバッジ（ピル・アクセント色地＋白文字。明るい地色時は --badge-dark で暗転）. */
.snk-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.5rem;
}

.snk-card__cat {
	display: inline-block;
	padding: 0.15em 0.85em;
	border-radius: 1em;
	background: var(--snk-color-accent, #e8a33d);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.7;
	text-decoration: none;
	white-space: nowrap;
}

.snk-card__cat:hover {
	opacity: 0.85;
}

.snk-badge-dark .snk-card__cat {
	color: #1a1a1a;
}

.snk-card__title {
	margin: 0 0 0.3rem;
	font-size: 1.3rem;
	line-height: 1.4;
}

.snk-card__title a {
	color: var(--snk-color-heading, #222);
	text-decoration: none;
}

.snk-card__title a:hover {
	color: var(--snk-color-main, #2b5797);
}

/* 抜粋は既定では出さない（テキストカード＝バッジ→見出し→日付のコンパクト・#4/#5）。
   画像カード（アイキャッチ左）でだけ下で表示する。 */
.snk-card__excerpt {
	display: none;
}

/* メタ（バッジで別出しするカテゴリを除いた 日付・更新日 等）。見出し/抜粋の下に少し空ける。 */
.snk-card__body > .snk-meta {
	margin-top: 0.5rem;
}

/* カード全体クリック＝カーソルはポインタ、ホバーで少し浮かせる（card時のみ）。 */
.snk-archive--card .snk-card {
	cursor: pointer;
}

/* ---- カード枠：下線区切り（既定・#4）。最後の1枚は線を出さない ---- */
.snk-archive--border-divider .snk-card {
	border-bottom: 1px solid #dcdcdc;
}

.snk-archive--border-divider .snk-card:last-child {
	border-bottom: 0;
}

/* 下線カードのホバー＝白カードとして浮く（下線は消して浮いたカード下の二重線を防ぐ）。 */
.snk-archive--border-divider .snk-card:hover {
	transform: translateY(-4px);
	background-color: #fff;
	border-radius: var(--snk-card-radius, 8px);
	border-bottom-color: transparent;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ---- カード枠：枠線ボックス（#5・角丸＋薄い影） ---- */
.snk-archive--border-box .snk-card {
	margin-bottom: var(--snk-archive-card-gap, 2rem); /* ボックスは間隔をマージンで（枠の内側 padding は固定）。 */
	padding: 1.5rem;
	border: 1px solid #e2e2e2;
	border-radius: var(--snk-card-radius, 8px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.snk-archive--border-box .snk-card:last-child {
	margin-bottom: 0;
}

.snk-archive--border-box .snk-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ==== 画像カード（card＋アイキャッチ左・#7） ====
   画像左（横長）＋本文右（バッジ→見出し→抜粋→日付）。アイキャッチ未設定の記事にも
   「No Image」枠を差し込んで体裁を揃える。日付は本文の最下部へ寄せ、画像下端と揃える。 */
.snk-archive--thumb-left .snk-card {
	display: flex;
	gap: 1.5rem;
	align-items: stretch;
}

.snk-archive--thumb-left .snk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 抜粋を表示（#7）。クランプは内側の <p> に当てる＝コンテナは flex-column の
   .snk-card__body の子＝フレックスアイテムで、-webkit-box が flow-root に blockify され
   line-clamp が効かなくなるため。<p> は通常の子なのでクランプが効く。 */
.snk-archive--thumb-left .snk-card__excerpt {
	display: block;
	margin-top: 0.5rem;
}

.snk-archive--thumb-left .snk-card__excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
}

.snk-archive--thumb-left .snk-card__body > .snk-meta {
	margin-top: auto;
	padding-top: 0.6rem;
}

.snk-card__thumb {
	flex: 0 0 38%;
	max-width: 300px;
	align-self: flex-start; /* 画像は自身のアスペクト比の高さを保つ（本文の伸長に引きずられない）。 */
}

.snk-card__thumb img,
.snk-card__thumb--empty {
	display: block;
	width: 100%;
	aspect-ratio: 1000 / 558; /* 制作アイキャッチ 1000×558 と同比＝無トリミング。 */
	object-fit: cover;
	border-radius: var(--snk-card-radius, 8px);
}

/* ノーイメージ代替（アイキャッチ左で画像未設定の記事）。グレー地＋白の大きめ文字。 */
.snk-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #9aa0a6;
}

.snk-card__noimage {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* スマホは縦積み（横並びだと画像・本文が共に窮屈になる）。 */
@media (max-width: 600px) {
	.snk-archive--thumb-left .snk-card {
		display: block;
	}

	.snk-card__thumb {
		max-width: none;
		margin-bottom: 0.9rem;
	}

	.snk-archive--thumb-left .snk-card__body > .snk-meta {
		margin-top: 0.5rem;
	}
}

/* ==== 一覧レイアウト list（お知らせ向け1行・#6） ====
   本文スロットを1行化：バッジ→日付→タイトル（バッジが一番左）。抜粋・アイキャッチは出さない。
   並べ替えは order で視覚順のみ（DOM は バッジ→タイトル→抜粋→メタ＝読み上げ順は保つ）。
   flex-shrink は既定 1＝狭い画面でメタ幅がカードを超えたら縮んで内部で折返す。
   行区切り（実線/点線/なし）は snk-list-divider-* で切替。 */
.snk-archive--list .snk-card {
	display: block;
	padding-block: var(--snk-archive-list-gap, 1.2rem); /* 行間隔＝カスタマイザーで調整可。 */
}

.snk-archive--list.snk-list-divider-solid .snk-card {
	border-bottom: 1px solid #dcdcdc;
}

.snk-archive--list.snk-list-divider-dotted .snk-card {
	border-bottom: 1px dotted #b3b3b3;
}

.snk-archive--list .snk-card:last-child {
	border-bottom: 0;
}

.snk-archive--list .snk-card__thumb {
	display: none;
}

.snk-archive--list .snk-card__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1em;
	row-gap: 0.2em;
}

/* バッジを一番左（order 1）→日付→タイトル。 */
.snk-archive--list .snk-card__cats {
	order: 1;
	margin-bottom: 0;
	flex: 0 0 auto;
}

.snk-archive--list .snk-card__body > .snk-meta {
	order: 2;
	flex: 0 1 auto;
	margin: 0;
}

.snk-archive--list .snk-card__title {
	order: 3;
	flex: 1 1 50%;
	margin: 0;
	font-size: 1.05rem;
}

.snk-archive--list .snk-card__excerpt {
	display: none;
}

/* ==== グリッド（2-3カラム・サムネ上・#17） ====
   .snk-cards を格子に。各セルは サムネ上→本文下 のボックス。カラム数は css_var
   （--snk-grid-cols）。スマホは1カラム固定。バッジはサムネ左上にオーバーレイ。 */
.snk-archive--grid .snk-cards {
	display: grid;
	grid-template-columns: repeat(var(--snk-grid-cols, 3), minmax(0, 1fr));
	gap: var(--snk-archive-card-gap, 2rem);
}

.snk-archive--grid .snk-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: var(--snk-card-radius, 8px);
	overflow: hidden; /* サムネ上角をカードの角丸に沿ってクリップ（下角は本文と地続き＝角丸にしない）。 */
	background: #fff;
}

.snk-archive--grid .snk-card__thumb {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	align-self: auto;
}

/* グリッドのサムネは自前の角丸を出さない＝カードの overflow で上角だけ丸まり、下は角。 */
.snk-archive--grid .snk-card__thumb img,
.snk-archive--grid .snk-card__thumb--empty {
	border-radius: 0;
}

/* バッジはサムネ左上にオーバーレイ（#17）。カード全面リンク（z-index:1）より上に出す。 */
.snk-archive--grid .snk-card__cats {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	margin: 0;
	z-index: 2;
}

.snk-archive--grid .snk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0.9rem 1.1rem 1.1rem;
}

.snk-archive--grid .snk-card__title {
	font-size: 1.05rem;
}

.snk-archive--grid .snk-card__excerpt {
	display: none;
}

.snk-archive--grid .snk-card__body > .snk-meta {
	margin-top: auto;
	padding-top: 0.6rem;
}

.snk-archive--grid .snk-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* カラム数はレスポンシブに畳む（狭い幅・サイドバー併用でカードが潰れるのを防ぐ）。
   タブレット幅（≤900px）は最大2カラム、スマホ（≤600px）は1カラム。
   サイドバー有効時は本文列が狭いので広い幅でも最大2カラムに抑える。 */
@media (max-width: 900px) {
	.snk-archive--grid .snk-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 601px) {
	.snk-body--sidebar .snk-archive--grid .snk-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.snk-archive--grid .snk-cards {
		grid-template-columns: 1fr;
	}
}

/* ---- 個別記事のH1タイトル（投稿タイプのみ・固定ページはブロック側でH1を置く運用）。
   一覧の帯タイトル（.snk-pagehead__title）と同スケールにして種別間で見出しの大きさを揃える。
   margin-block だけ指定し、.snk-article 直下の子に効く width 制約（margin-inline:auto）を壊さない。
   色は非指定＝本文見出し（H2〜H4）と同じく body の文字色を継承。 ---- */
.snk-article__title {
	margin-block: 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.3;
}

/* ---- 個別記事のメタ（カテゴリバッジ＋日付）。詳細設計書 8-2 ---- */
.snk-article__meta {
	margin-top: 1rem;
	margin-bottom: 1.75rem;
}

/* ---- ページネーション（the_posts_pagination） ---- */
.pagination {
	margin-block: 2rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.4em 0.8em;
	border-radius: 4px;
	background: var(--snk-color-main-light, #eaf1f9);
	color: var(--snk-color-main, #2b5797);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--snk-color-main, #2b5797);
	color: #fff;
}

/* ---- 検索フォーム／該当なし／404 ---- */
.snk-search__form {
	margin-block: 1rem 2rem;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 100%;
}

/* WP標準 get_search_form()（HTML5）は .search-field を <label> で包む＝flexアイテムは label。
   伸長は label 側に持たせ、input は label 内で幅いっぱいにする（伸長が input に効かない事故を回避）。 */
.search-form label {
	flex: 1;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.8em;
	border: 1px solid var(--snk-color-main-light, #eaf1f9);
	border-radius: 4px;
	font: inherit;
}

.search-form .search-submit {
	padding: 0.6em 1.4em;
	border: none;
	border-radius: 4px;
	background: var(--snk-color-main, #2b5797);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.snk-404 {
	text-align: center;
	padding-block: 1rem 2rem;
}

.snk-404__home {
	color: var(--snk-color-main, #2b5797);
}

.snk-404 .snk-search__form {
	max-width: 420px;
	margin-inline: auto;
}

/* ==== トップへ戻るボタン（詳細設計書 3.10・アクセント色連動） ====
   スクロールで .is-visible が付いて表示（JS）。地色はアクセント、アイコンは白＝
   ただしアクセントが明るい時は body.snk-badge-dark で暗色に自動反転（バッジと同判定を再利用）。 */
.snk-totop {
	position: fixed;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 500; /* コンテンツ上・sticky header(8000)/ドロワー(9000+)より下. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--snk-totop-size-pc, 48px);
	height: var(--snk-totop-size-pc, 48px);
	padding: 0;
	border: 0;
	font-size: calc(var(--snk-totop-size-pc, 48px) * 0.4); /* アイコン(.snk-icon=1em)をボタン径に比例させる. */
	background: var(--snk-color-accent, #e8a33d);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ボタンの形（丸／四角＝角丸／アメーバ風＝有機的な非対称角丸）。 */
.snk-totop--circle {
	border-radius: 50%;
}

.snk-totop--square {
	border-radius: 25%;
}

.snk-totop--square-sharp {
	border-radius: 0;
}

.snk-totop--blob {
	border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.snk-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.snk-totop:hover {
	opacity: 0.85;
}

/* chevron-down を上向きに（上向きアイコンは在庫に無いため回転で流用）。 */
.snk-totop__icon {
	transform: rotate(180deg);
}

/* アクセントが明るい色のときはアイコンを暗く（自動コントラスト・バッジと同じ body 判定）。 */
.snk-badge-dark .snk-totop {
	color: #1a1a1a;
}

@media (max-width: 767px) {
	/* スマホ時の大きさは別指定. */
	.snk-totop {
		width: var(--snk-totop-size-sp, 44px);
		height: var(--snk-totop-size-sp, 44px);
		font-size: calc(var(--snk-totop-size-sp, 44px) * 0.4);
	}

	/* SP固定CTAがある時は、その上に重ねて被りを防ぐ。 */
	.snk-has-spfix .snk-totop {
		bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}

/* 視差軽減設定時は浮き上がりアニメを抑える（表示切替のみ）。 */
@media (prefers-reduced-motion: reduce) {
	.snk-totop,
	.snk-totop.is-visible {
		transform: none;
		transition: opacity 0.2s ease, visibility 0.2s;
	}
}

/* ===== ページ別制御（プラグイン hoffman-core-blocks が body クラスで反映）＝T-6 ===== */

/* 背景色を無効（透明化）。コアの custom-background が出す body 背景と同特異度のため !important で確実に打ち消す。 */
body.snk-disable-bg {
	background-color: transparent !important;
}

/* ページ上部・下部の余白を無効（.snk-content の縦 padding を除去）。 */
body.snk-hide-pad-top .snk-content {
	padding-top: 0;
}

body.snk-hide-pad-bottom .snk-content {
	padding-bottom: 0;
}

/* 投稿ページ本文上のアイキャッチ（T-5）。margin-block のみ指定で .snk-article 直下子の
   幅制約（max-width＋margin-inline:auto＋padding-inline:1rem）を温存＝タイトル・本文と左端一致。 */
.snk-article__eyecatch {
	margin-block: 0 1.5rem;
}

.snk-article__eyecatch img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   お問い合わせフォーム（Contact Form 7）＝下山レビュー v2。
   赤い必須バッジ・ラベル上・全幅枠入力・整ったボタン（テーマ配色）。
   スコープは .wpcf7 と構造クラス .snk-form に限定。
   ============================================================ */

/* 項目ブロック。 */
.snk-form__row {
	margin-bottom: 1.5rem;
}

/* ラベル（必須バッジ＋項目名）。 */
.snk-form__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--snk-color-heading, #222);
}

.snk-form__label a {
	color: var(--snk-color-link, #2b5797);
	text-decoration: underline;
}

/* 「必須」バッジ（赤・角丸）。 */
.snk-form__req {
	display: inline-block;
	padding: 0.3em 0.6em;
	border-radius: 3px;
	background: #c8102e;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* 入力欄＝全幅・薄い枠・角丸・内側余白。 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	color: var(--snk-color-text, #333);
	background: #fff;
}

.wpcf7 textarea {
	min-height: 10rem;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: var(--snk-color-main, #2b5797);
	box-shadow: 0 0 0 3px var(--snk-color-main-light, #eaf1f9);
}

/* チェックボックス（同意）＝行内配置。 */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex-shrink: 0; /* テキストが長くてもチェックボックスは縮めない。 */
}

/* 未入力・未同意のエラー表示（.snk-form__row--error を JS が付与）。 */
.snk-form__error {
	display: block;
	margin-top: 0.35rem;
	color: #c8102e;
	font-size: 0.85rem;
	font-weight: 600;
}

.snk-form__row--error input,
.snk-form__row--error textarea,
.snk-form__row--error select {
	border-color: #c8102e;
}

/* アクション（ボタン群）＝縦積みで中央寄せ（各ボタンが独立して中央＝段ズレしない）。 */
.snk-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* CF7のスピナー（visibility:hidden で24px幅を取り送信ボタンを横にずらす）は非表示にして
   ボタンの中央整列を崩さない。送信状態はボタン押下とサーバ応答で十分伝わる。 */
.snk-form__actions .wpcf7-spinner {
	display: none;
}

.snk-form__btn {
	min-width: 12rem;
	padding: 0.85rem 2rem;
	border: 0;
	border-radius: 4px;
	background: var(--snk-cf7-btn-color, #8b1a1a);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition:
		filter 0.2s ease,
		background-color 0.2s ease;
}

.snk-form__btn:hover {
	filter: brightness(0.92);
}

/* 「修正する」だけは控えめ（アウトライン）。ボタン色を枠線・文字色に使う。 */
.snk-form__back {
	background: transparent;
	color: var(--snk-cf7-btn-color, #8b1a1a);
	box-shadow: inset 0 0 0 1px var(--snk-cf7-btn-color, #8b1a1a);
}

.snk-form__back:hover {
	filter: none;
	background: rgba(0, 0, 0, 0.04);
}

/* CF7 のエラー表示をテーマに馴染ませる。 */
.wpcf7 .wpcf7-not-valid {
	border-color: #c8102e;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: #c8102e;
	font-size: 0.85rem;
}

.wpcf7 .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
}

/* ---- 送信確認画面（.snk-form--confirming の間だけ確認パネルを見せる）---- */

/* 既定（confirm.js が動かない時の保険）＝通常フォーム：「送信する」は残し、
   「確認画面へ」「修正する」「確認パネル」だけ隠す＝JS失敗でも送信できる（デッドフォーム回避）。 */
.snk-form__confirm,
.snk-form__back,
.snk-form__confirm-view {
	display: none;
}

/* JS準備完了（.snk-form--confirm-ready を JS が付与）かつ編集中＝確認フロー本来の姿：
   「確認画面へ」を出し、「送信する」を隠す。 */
.snk-form--confirm-ready:not( .snk-form--confirming ) .snk-form__confirm {
	display: inline-block;
}

.snk-form--confirm-ready:not( .snk-form--confirming ) .snk-form__submit {
	display: none;
}

/* 確認中＝入力行と「確認画面へ」を隠し、確認パネルと「送信する／修正する」を出す。 */
.snk-form--confirming .snk-form__row {
	display: none;
}

.snk-form--confirming .snk-form__confirm-view {
	display: block;
}

.snk-form--confirming .snk-form__back {
	display: inline-block;
}

.snk-form__confirm-view {
	margin-bottom: 1rem;
}

.snk-form__confirm-heading {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--snk-color-heading, #222);
}

.snk-form__confirm-list {
	margin: 0;
}

.snk-form__confirm-list dt {
	margin-top: 1rem;
	font-weight: 600;
	color: var(--snk-color-heading, #222);
}

.snk-form__confirm-list dd {
	margin: 0.25rem 0 0;
	padding: 0.5rem 0 0.75rem;
	border-bottom: 1px solid #eee;
	white-space: pre-wrap; /* 改行を保持（テキストエリア）。 */
	word-break: break-word;
}

/* ローディング画面（下山レビューL）＝有効時のみ body 直後に出る全画面オーバーレイ＋スピナー。
   CSS は head で読まれるため初回ペイントから覆う。読込完了で JS が is-done→フェードアウト→DOM除去。 */
.snk-loading {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--snk-loading-bg, #fff);
	transition: opacity 0.5s ease;
	/* JS が失敗/無効/ロード断でもオーバーレイが永久に残らない保険。JS が生きていれば 600ms で先に DOM 除去される。 */
	animation: snk-loading-failsafe 0s linear 5s forwards;
}

@keyframes snk-loading-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.snk-loading.is-done {
	opacity: 0;
	pointer-events: none;
}

/* スピナー/画像＋テキストを縦に中央並べ。 */
.snk-loading__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* スピナー代わりの画像（GIF アニメ画像もそのまま表示）。 */
.snk-loading__image {
	max-width: var(--snk-loading-image-size, 160px);
	max-height: var(--snk-loading-image-size, 160px);
	height: auto;
}

/* スピナー/画像の下のテキスト。 */
.snk-loading__text {
	margin: 0;
	color: var(--snk-loading-color, #2b5797);
	font-size: var(--snk-loading-text-size, 15px);
	letter-spacing: 0.05em;
}

/* 円（回転） */
.snk-loading--spinner .snk-loading__spinner {
	width: var(--snk-loading-spinner-size, 48px);
	height: var(--snk-loading-spinner-size, 48px);
	border: calc(var(--snk-loading-spinner-size, 48px) / 12) solid color-mix(in srgb, var(--snk-loading-color, #2b5797) 25%, transparent);
	border-top-color: var(--snk-loading-color, #2b5797);
	border-radius: 50%;
	animation: snk-loading-spin 0.8s linear infinite;
}

@keyframes snk-loading-spin {
	to { transform: rotate(360deg); }
}

/* パルス */
.snk-loading--pulse .snk-loading__spinner {
	width: var(--snk-loading-spinner-size, 48px);
	height: var(--snk-loading-spinner-size, 48px);
	border-radius: 50%;
	background-color: var(--snk-loading-color, #2b5797);
	animation: snk-loading-pulse 1s ease-in-out infinite;
}

@keyframes snk-loading-pulse {
	0%, 100% { transform: scale(0.6); opacity: 0.5; }
	50% { transform: scale(1); opacity: 1; }
}

/* ドット */
.snk-loading--dots .snk-loading__spinner {
	display: flex;
	gap: 8px;
}

.snk-loading--dots .snk-loading__spinner span {
	width: calc(var(--snk-loading-spinner-size, 48px) / 4);
	height: calc(var(--snk-loading-spinner-size, 48px) / 4);
	border-radius: 50%;
	background-color: var(--snk-loading-color, #2b5797);
	animation: snk-loading-dot 1.4s ease-in-out infinite both;
}

.snk-loading--dots .snk-loading__spinner span:nth-child(1) { animation-delay: -0.32s; }
.snk-loading--dots .snk-loading__spinner span:nth-child(2) { animation-delay: -0.16s; }

@keyframes snk-loading-dot {
	0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
	40% { transform: scale(1); opacity: 1; }
}

/* バー */
.snk-loading--bars .snk-loading__spinner {
	display: flex;
	gap: 6px;
	align-items: center;
}

.snk-loading--bars .snk-loading__spinner span {
	width: calc(var(--snk-loading-spinner-size, 48px) / 8);
	height: calc(var(--snk-loading-spinner-size, 48px) / 1.5);
	background-color: var(--snk-loading-color, #2b5797);
	animation: snk-loading-bar 1s ease-in-out infinite;
}

.snk-loading--bars .snk-loading__spinner span:nth-child(1) { animation-delay: -0.4s; }
.snk-loading--bars .snk-loading__spinner span:nth-child(2) { animation-delay: -0.2s; }

@keyframes snk-loading-bar {
	0%, 100% { transform: scaleY(0.4); }
	50% { transform: scaleY(1); }
}

/* reduced-motion＝アニメ停止（静止スピナー・JS で消えるので機能は保つ）。 */
@media (prefers-reduced-motion: reduce) {

	.snk-loading__spinner,
	.snk-loading__spinner span {
		animation: none;
	}

	/* アニメ停止で途中フレーム（縮んだ点／低いバー等）に固まらないよう静止時は既定サイズへ戻す。 */
	.snk-loading--dots .snk-loading__spinner span,
	.snk-loading--bars .snk-loading__spinner span,
	.snk-loading--pulse .snk-loading__spinner {
		transform: none;
		opacity: 1;
	}
}