@charset "UTF-8";
/* ============================================================
 * Studio-Navi 見た目スタイル(子テーマ)
 *  - 方針(2026-06-29 オーナー確定):上質・ミニマル / 写真が主役。
 *  - これまでテンプレに直書きしていた見た目を、ここへ段階的に集約していく。
 *  - スコープは .sn-archive など接頭辞付きクラスに限定(SWELL本体に干渉しない)。
 *  - 第1弾=一覧ページの「結果カード」。絞り込みUI等は次の段で順次移す。
 * ============================================================ */

/* 色・余白などの基準値(ここを変えると全体のトーンが揃って変わる)。一覧・詳細・トップで共用。 */
.sn-archive,
.sn-single,
.sn-top {
	--sn-ink: #1a1a1a;     /* 主役の文字色(ほぼ黒) */
	--sn-muted: #6b7280;   /* 補助テキスト(グレー) */
	--sn-faint: #9ca3af;   /* さらに薄いグレー */
	--sn-line: #ececec;    /* 細い罫線・枠線 */
	--sn-bg-soft: #f3f4f6; /* 画像プレースホルダ等の下地 */
	--sn-star: #f5a623;    /* レビューの星 */
	--sn-radius: 12px;     /* 角丸 */
	--sn-accent: #2563eb;       /* 差し色(青)= ユーザーを導きたいコンバージョン系ボタン */
	--sn-accent-dark: #1d4ed8;  /* 青ボタンのホバー */
	--sn-accent-soft: #eff4ff;  /* 青の淡い背景(アウトラインボタンのホバー) */
}

/* ---- プレオープン告知帯(ソフトオープン期だけ・SN_SOFT_OPEN=trueの間トップ最上部に表示)---- */
.sn-preopen {
	background: var(--sn-accent-soft);       /* 青の淡い下地=お知らせ地(穏やかに目立つ) */
	border-bottom: 1px solid #dbe6ff;
}
.sn-preopen__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	flex-wrap: wrap;                          /* 狭い画面ではバッジと本文が自然に折り返す */
	align-items: center;
	gap: 8px 12px;
	font-size: .92rem;
	line-height: 1.6;
}
.sn-preopen__badge {
	flex: 0 0 auto;
	background: var(--sn-accent);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .02em;
	padding: 3px 10px;
	border-radius: 999px;
}
.sn-preopen__text {
	color: var(--sn-ink);
}

/* ---- ヒーロー内に置かれたとき=暗い写真の上に浮くダークガラスのピル(§soft-open 不具合対策)----
   透過ヘッダー(白文字ナビ)が明るい告知帯に重なる問題を、告知帯をヒーロー内部・ヘッダー直下の
   暗い面へ移して解消する。ヘッダー側CSSは変更しない(透過ヘッダーの上質さを維持)。
   ※ これらは告知帯がヒーロー内にある soft-open 期のみ発火。全面公開時はブロックごと消える。 */
.sn-top-hero .sn-preopen {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;                              /* オーバーレイ(z1)より前面・inner(z2)と同層 */
	background: none;                        /* 帯地は消し、ピルだけを見せる */
	border-bottom: 0;
	padding-top: clamp(72px, 10vh, 96px);    /* 透過ヘッダーの高さぶん下げてヘッダー直下に置く */
	pointer-events: none;                    /* 透明な帯余白がヘッダーのクリックを奪わないように */
}
.sn-top-hero .sn-preopen__inner {
	pointer-events: auto;                    /* ピル本体だけは通常どおり */
	width: fit-content;
	max-width: calc(100% - 40px);            /* 端に触れない(はみ出さない・超えたら折り返す) */
	margin: 0 auto;
	justify-content: center;
	padding: 7px 16px;
	background: rgba(255, 255, 255, .12);     /* ダークガラス地 */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	text-align: center;
	font-size: .86rem;
}
.sn-top-hero .sn-preopen__badge {
	background: var(--sn-accent);            /* 青バッジは暗地でもコントラスト良好=そのまま活かす */
	color: #fff;
}
.sn-top-hero .sn-preopen__text {
	color: rgba(255, 255, 255, .92);         /* 暗い写真の上でも読める白寄り */
}

/* ---- 一覧の結果リスト = 写真主役の縦型カードをグリッドに並べる ---- */
.sn-archive__list {
	display: grid;
	/* 画面幅に応じて1〜複数列に自動で折り返す(スマホ1列・PCで複数列) */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

/* ---- 結果カード(写真上・情報下) ---- */
.sn-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	/* hover の動きを滑らかに */
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sn-card:hover {
	border-color: #dcdcdc;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* 写真:常に同じ比率(3:2)で切り抜く=比率が崩れない・カードの高さが揃う */
.sn-card__thumb {
	aspect-ratio: 3 / 2;
	background: var(--sn-bg-soft);
}
.sn-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 画像が無いスタジオ用のプレースホルダ(カードの高さを揃えて崩れを防ぐ) */
.sn-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sn-faint);
	font-size: 13px;
	letter-spacing: .04em;
}

/* 情報のかたまり */
.sn-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

/* タイトル:最大2行で省略(…)。高さが揃ってミニマルに見える */
.sn-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sn-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 料金とレビューを同じ行に(主役級の情報) */
.sn-card__meta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.sn-card__price {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--sn-ink);
}
.sn-card__price-unit {
	font-size: 12px;
	font-weight: 400;
	color: var(--sn-muted);
}
.sn-card__price--none {
	margin: 0;
	font-size: 13px;
	color: var(--sn-faint);
}
.sn-card__rating {
	margin: 0;
	font-size: 13px;
	color: #444;
}
.sn-card__rating .star {
	color: var(--sn-star);
}
.sn-card__rating .cnt {
	color: var(--sn-muted);
}

/* 場所・スペックは控えめに(補助情報) */
.sn-card__loc {
	margin: 0;
	font-size: 13px;
	color: var(--sn-muted);
}
.sn-card__spec {
	margin: 0;
	font-size: 12px;
	color: var(--sn-muted);
}

/* ---- 詳細ページ下部「雰囲気が近いスタジオ」(レコメンド・提案1) ----
   一覧カード(.sn-card)をそのまま流用。ここではグリッドの器だけ用意する
   (見た目の作り込みは後日の専用パス=最小限)。スマホ2列・PCで自動的に列数を増やす。 */
.sn-similar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

/* ============================================================
 * 一覧ページの 2カラムレイアウト(SHOOTEST型・2026-06-29 オーナー確定)
 *  - 左サイドバー = 絞り込み + PR枠(上下) / 右メイン = 結果カード + PR枠(上)
 *  - PR枠は「順位とは別レーン」(Studio-Naviの根幹)。結果カードには混ぜない。
 * ============================================================ */

.sn-archive {
	max-width: 1200px;   /* 2カラムに広げる(旧960px) */
	margin: 0 auto;
	padding: 24px 16px;
}
.sn-archive__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--sn-ink);
}

/* 左280px固定 / 右は残り全部。上揃え。 */
.sn-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	align-items: start;
}
/* 左サイドバー(縦に積む) */
.sn-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
/* 右メイン。min-width:0 で中のグリッドがはみ出さない */
.sn-main {
	min-width: 0;
}

/* サイドバーに入れた絞り込みフォームは1列に積む(元は2列グリッド) */
.sn-side .sn-filter {
	margin: 0;
}
.sn-side .sn-filter__tags {
	grid-template-columns: 1fr;   /* 2列 → 1列 */
}
.sn-side .sn-filter__caps {
	flex-direction: column;       /* 能力+ボタンの横並び → 縦積み */
	align-items: stretch;
	gap: 12px;
}
.sn-side .sn-actions {
	margin-left: 0;               /* 右寄せをやめる */
	align-self: stretch;
	flex-direction: column;       /* ボタンとクリアを縦に積む */
	gap: 10px;
}

/* ---- PR(広告)枠=プレースホルダ。実広告は後の広告システム(Phase5)で流し込む ---- */
.sn-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px dashed #d4d4d4;
	border-radius: 10px;
	background: #fafafa;
	color: var(--sn-faint);
	text-align: center;
}
.sn-ad__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #b0b0b0;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	padding: 1px 6px;
}
.sn-ad__ph {
	font-size: 12px;
}
.sn-ad--rect {            /* サイドバーの矩形枠(300x250風) */
	min-height: 250px;
}
.sn-ad--banner {          /* メイン上の横長バナー */
	min-height: 90px;
	margin-bottom: 20px;
}

/* ---- スマホ:1カラムに。サイドバーの矩形PRは隠す(PCサイドバー向けのため) ---- */
@media (max-width: 900px) {
	.sn-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.sn-side {
		margin-bottom: 20px;
	}
	.sn-side .sn-ad {
		display: none;
	}
}

/* ============================================================
 * 絞り込みフォームの見た目(デザインパス③・上質ミニマル)
 *  - 旧テンプレ内 <style> をここへ移設し、トーンを整える。
 *  - タグ選択は「ピル(pill)型トグル」。入力欄・ボタンも統一。
 * ============================================================ */

/* フォーム外枠(サイドバー内の白いカード) */
.sn-filter {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	background: #fff;
}

/* タグ絞り込みのまとまり(サイドバーでは .sn-side 側の指定で1列・gapはここで) */
.sn-filter__tags {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 通常2列(サイドバーでは1列に上書き) */
	gap: 18px;
	align-items: start;
}
.sn-filter__tags .sn-cell--full {
	grid-column: 1 / -1;
}
@media (max-width: 600px) {
	.sn-filter__tags { grid-template-columns: 1fr; }
}

/* 分類見出し(エリア/シーン 等)= 小さめ・控えめなラベル */
.sn-fs {
	border: none;
	margin: 0;
	padding: 0;
}
.sn-fs__legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sn-muted);
}

/* フラットなタグ並び(エリア/テイスト) */
.sn-flat {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 中分類アコーディオン(シーン/許可 等) */
.sn-acc {
	border: 1px solid var(--sn-line);
	border-radius: 8px;
	background: #fff;
	margin-bottom: 8px;
}
.sn-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--sn-ink);
	list-style: none;
}
.sn-acc > summary::-webkit-details-marker { display: none; }
.sn-acc > summary::after {           /* 開閉の +/− 印 */
	content: "＋";
	color: var(--sn-faint);
	font-size: 13px;
	margin-left: 8px;
}
.sn-acc[open] > summary::after { content: "−"; }
.sn-acc__body {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 12px 12px;
}

/* チェック1個 = ピル型トグル(押すと反転して「選択中」が一目で分かる) */
.sn-chk {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;            /* .sn-field 内でも太字を継がない */
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--sn-ink);
	cursor: pointer;
	padding: 6px 12px;
	border: 1px solid var(--sn-line);
	border-radius: 999px;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sn-chk:hover { border-color: #cfcfcf; }
/* ネイティブのチェック四角は隠し、ピル自体を操作対象にする(見た目をミニマルに) */
.sn-chk input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}
/* 選択中の見た目(:has は現行ブラウザで広くサポート) */
.sn-chk:has(input:checked) {
	background: var(--sn-ink);
	border-color: var(--sn-ink);
	color: #fff;
}
/* キーボード操作時のフォーカス枠(アクセシビリティ) */
.sn-chk:has(input:focus-visible) {
	outline: 2px solid #9ca3af;
	outline-offset: 2px;
}

/* 能力(面積/電源/搬入/同録)+ボタンのまとまり */
.sn-filter__caps {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--sn-line);
}

/* 入力フィールド(ラベル + 入力) */
.sn-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--sn-muted);
}
/* 入力欄(日付・セレクト)の統一スタイル */
.sn-filter select,
.sn-filter input[type="date"] {
	font: inherit;
	font-weight: 400;
	color: var(--sn-ink);
	padding: 7px 10px;
	border: 1px solid var(--sn-line);
	border-radius: 8px;
	background: #fff;
}
.sn-filter select:focus,
.sn-filter input[type="date"]:focus {
	outline: none;
	border-color: #9ca3af;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}

/* ボタン群 */
.sn-actions {
	display: flex;
	gap: 14px;
	align-items: center;
}
.sn-btn-submit {
	display: block;
	width: 100%;
	padding: 11px 18px;
	border: none;
	border-radius: 8px;
	background: var(--sn-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease;
}
.sn-btn-submit:hover { opacity: .88; }
.sn-btn-clear {
	font-size: 13px;
	color: var(--sn-muted);
	text-align: center;
	text-decoration: none;
}
.sn-btn-clear:hover {
	color: var(--sn-ink);
	text-decoration: underline;
}

/* ============================================================
 * 詳細ページ(single-studio・デザインパス④・上質ミニマル)
 * ============================================================ */

.sn-single {
	max-width: 1180px;   /* 2カラム(左=ギャラリー+詳細 / 右=追従CTA)に合わせて広げる */
	margin: 0 auto;
	padding: 24px 16px;
	color: var(--sn-ink);
}

/* タイトル */
.sn-studio__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 4px;
	color: var(--sn-ink);
}

/* ヒーロー画像(16:9で比率固定・大きく見せる) */
.sn-studio__thumb {
	margin: 18px 0 28px;
}
.sn-studio__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/* セクション見出し:英語オーバーライン(小)+ 日本語タイトル(太) + ヘアライン下線。
   エディトリアル(雑誌)風のモノトーン。差し色は使わない(2026-06-29 オーナー確定)。 */
.sn-single .sn-section {
	margin: 0 0 44px;
}
.sn-single .sn-section > h2 {
	display: flex;
	align-items: baseline;   /* 日本語と英語ラベルの下(ベースライン)を揃える */
	gap: 12px;
	font-size: 23px;
	font-weight: 700;
	color: var(--sn-ink);
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sn-line);
	letter-spacing: .02em;
	line-height: 1.35;
}
/* 見出し左の縦バー(本文と同じ黒)。バーだけは行の中央に置く */
.sn-single .sn-section > h2::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 4px;
	height: 1.05em;
	border-radius: 2px;
	background: var(--sn-ink);
}
/* 日本語タイトルの右横に小さな英語ラベルを添える(data-en 属性の値・下揃え) */
.sn-single .sn-section > h2[data-en]::after {
	content: attr(data-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--sn-faint);
}

/* 情報行(ラベル + 値)。helper sn_row() の出力に共通で効く */
.sn-single .sn-row {
	display: flex;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 15.5px;
	line-height: 1.85;
}
.sn-single .sn-row:last-child {
	border-bottom: none;
}
.sn-single .sn-row__label {
	flex: 0 0 124px;
	color: var(--sn-muted);
	font-size: 14px;
}
.sn-single .sn-row__value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--sn-ink);
	word-break: break-word;
}
.sn-single .sn-row__value a {
	word-break: break-all;
}
@media (max-width: 600px) {
	.sn-single .sn-row {
		flex-direction: column;
		gap: 2px;
		padding: 10px 0;
	}
	.sn-single .sn-row__label {
		flex-basis: auto;
		font-size: 12px;
	}
}

/* ---- 料金まわり(税込の注記・プラン枠・料金テーブル)= 体裁をCSSに集約 ---- */
/* 税込の注記バー(淡い背景のお知らせ) */
.sn-single .sn-tax-note {
	margin: 0 0 12px;
	padding: 7px 12px;
	background: var(--sn-bg-soft);
	border-radius: 8px;
	font-size: 13px;
	color: #374151;
}
/* 料金プランの枠(プランごとに区切るカード) */
.sn-single .sn-plan {
	border: 1px solid var(--sn-line);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 12px 0;
}
.sn-single .sn-plan > h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--sn-ink);
	margin: 0 0 8px;
}
/* プラン見出し:プラン名 + 用途バッジ(商用/一般) */
.sn-single .sn-plan__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}
.sn-single .sn-plan__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--sn-accent-soft);
	color: var(--sn-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
/* 料金テーブル(料金プラン・オプション・その他費用 共通)= SHOOTEST風の枠囲み・セル区切り */
.sn-single .sn-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 15px;
	border: 1px solid var(--sn-line);   /* 表全体を枠で囲む */
}
.sn-single .sn-table th {
	text-align: center;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--sn-ink);
	padding: 13px 12px;
	background: #eef1f5;                 /* ヘッダーはしっかりグレー */
	border: 1px solid var(--sn-line);    /* 縦の区切り線 */
	line-height: 1.45;
}
.sn-single .sn-table td {
	text-align: center;
	padding: 14px 12px;
	border: 1px solid #eef0f3;           /* セルごとの薄い区切り線 */
	color: var(--sn-ink);
	line-height: 1.6;
	vertical-align: middle;
}
.sn-single .sn-table tbody tr:nth-child(even) td {
	background: #fafbfc;                 /* 偶数行をうっすら */
}
/* 1列目(曜日・内容・費用名などのラベル)は左寄せにして読みやすく */
.sn-single .sn-table th:first-child,
.sn-single .sn-table td:first-child {
	text-align: left;
}
/* テーブル内の補足テキスト(パック時間・メモ) */
.sn-single .sn-table small {
	display: inline-block;
	margin-top: 3px;
	color: var(--sn-muted);
	font-size: 12px;
}
@media (max-width: 600px) {
	.sn-single .sn-table th,
	.sn-single .sn-table td {
		padding: 10px 7px;
	}
}

/* ---- 設備・アメニティ(無料で使える備品などのインライン一覧) ---- */
.sn-single .sn-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}
.sn-single .sn-amenities li {
	font-size: 14px;
	color: #444;
}

/* ---- 用途・雰囲気(内容/スタイル系タグ=ピル) ---- */
.sn-single .sn-row--pills {
	align-items: flex-start;
}
.sn-single .sn-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sn-single .sn-pill {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--sn-line);
	border-radius: 999px;     /* ピル形(両端まる) */
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
	color: #374151;
	background: #fafbfc;
	text-decoration: none;    /* リンク化したので下線を消す */
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sn-single .sn-pill:hover {
	border-color: var(--sn-accent);
	color: var(--sn-accent);
	background: var(--sn-accent-soft);
}


/* ---- 設備・サービス・規約(アイコングリッド=whitepanda風) ---- */
.sn-single .sn-feature {
	margin: 0 0 22px;
}
.sn-single .sn-feature:last-child {
	margin-bottom: 0;
}
.sn-single .sn-feature__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--sn-muted);
	margin: 0 0 14px;
}
.sn-single .sn-feature__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
	gap: 20px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sn-single .sn-feature__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 9px;
	text-decoration: none;   /* リンク化したので下線を消す */
	color: inherit;
}
/* リンクのときホバーで名前も差し色に(押せることが分かるように) */
.sn-single a.sn-feature__item:hover .sn-feature__name {
	color: var(--sn-accent);
}
/* アイコンは淡い丸背景に乗せてリッチに(ホバーで差し色) */
.sn-single .sn-feature__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--sn-bg-soft);
	color: var(--sn-ink);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sn-single .sn-feature__item:hover .sn-feature__ico {
	background: var(--sn-accent-soft);
	color: var(--sn-accent);
	transform: translateY(-2px);
}
.sn-single .sn-feature__ico svg {
	width: 26px;
	height: 26px;
}
.sn-single .sn-feature__name {
	font-size: 13.5px;
	line-height: 1.5;
	color: #333;
}
/* 「※条件あり」マーカー(条件メモのある許可タグ・2026-07-05 オーナー指示) */
.sn-single .sn-feature__cond {
	font-size: 11px;
	line-height: 1.3;
	color: var(--sn-accent);
}

/* ---- 許可の条件メモ(利用規約タグの直下に「タグ名=条件文」で並べる) ---- */
.sn-single .sn-kiyaku-notes {
	margin: 12px 0 22px;
	padding: 12px 14px;
	background: var(--sn-bg-soft);
	border-radius: 10px;
}
.sn-single .sn-kiyaku-notes__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--sn-muted);
	margin: 0 0 8px;
}
.sn-single .sn-kiyaku-notes__list {
	margin: 0;
}
.sn-single .sn-kiyaku-notes__list dt {
	font-size: 13px;
	font-weight: 700;
	color: #333;
	margin: 8px 0 2px;
}
.sn-single .sn-kiyaku-notes__list dt:first-child {
	margin-top: 0;
}
.sn-single .sn-kiyaku-notes__list dd {
	font-size: 13px;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

/* ---- スペック(shootest風カード) ---- */
.sn-single .sn-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.sn-single .sn-spec-card {
	border: 1px solid var(--sn-line);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sn-single .sn-spec-card:hover {
	box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
	border-color: #e2e5ea;
	transform: translateY(-2px);
}
.sn-single .sn-spec-card__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #f3f4f6;
}
/* アイコンは差し色の角丸チップに乗せる(SHOOTESTより一歩リッチに) */
.sn-single .sn-spec-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--sn-accent-soft);
	color: var(--sn-accent);
}
.sn-single .sn-spec-card__ico svg {
	width: 19px;
	height: 19px;
}
.sn-single .sn-spec-card__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--sn-ink);
}
.sn-single .sn-spec-card__value {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sn-ink);
	word-break: break-word;
}
.sn-single .sn-spec-card__note {
	margin-top: 7px;
	font-size: 13.5px;
	color: var(--sn-muted);
	line-height: 1.6;
}
.sn-single .sn-empty {
	font-size: 13px;
	color: var(--sn-muted);
}
@media (max-width: 600px) {
	.sn-single .sn-spec-card {
		padding: 13px 14px;
	}
	.sn-single .sn-spec-card__value {
		font-size: 19px;
	}
	.sn-single .sn-feature__grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 16px 8px;
	}
}

/* ---- 地図・アクセス ---- */
/* 16:9 のレスポンシブ枠(中の iframe を絶対配置で敷く) */
.sn-single .sn-embed-16x9 {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 8px;
	overflow: hidden;
}
.sn-single .sn-embed-16x9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* 地図下の「Googleマップで開く」導線 */
.sn-single .sn-map-link {
	margin: 6px 0 0;
	font-size: 13px;
}

/* ---- 周辺の駐車場 ---- */
.sn-single .sn-parking {
	margin-top: 14px;
}
.sn-single .sn-parking > h3 {
	font-size: 15px;
	margin: 0 0 6px;
}
.sn-single .sn-parking__list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 13px;
	line-height: 1.8;
}
.sn-single .sn-parking__min {
	color: var(--sn-muted);
}
.sn-single .sn-parking__note {
	margin: 4px 0 0;
	color: var(--sn-faint);
	font-size: 12px;
}

/* ---- レビュー(参考表示)= 差別化機能なので目立つパネルで見せる ---- */
.sn-single .sn-reviewbox {
	border: 1px solid var(--sn-line);
	border-radius: 14px;
	padding: 22px 24px;
	/* ほんのり色を敷いて「まとめ表示」を特別感のあるパネルに */
	background: linear-gradient(180deg, #fafbff 0%, #fff 60%);
	box-shadow: 0 4px 16px rgba(16, 24, 40, .04);
}
.sn-single .sn-reviewbox__lead {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sn-muted);
}
.sn-single .sn-reviewbox__lead strong {
	color: var(--sn-ink);
}
/* 総合スコア(大きく) + 星バー */
.sn-single .sn-reviewbox__hero {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--sn-line);
}
.sn-single .sn-reviewbox__score {
	flex: 0 0 auto;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--sn-ink);
}
.sn-single .sn-reviewbox__max {
	font-size: 19px;
	font-weight: 700;
	color: var(--sn-faint);
}
.sn-single .sn-reviewbox__meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.sn-single .sn-reviewbox__count {
	font-size: 14px;
	color: var(--sn-muted);
}
.sn-single .sn-reviewbox__count strong {
	color: var(--sn-ink);
}
/* 星バー:グレーの星に金色を割合分だけ重ねて partial 表示 */
.sn-single .sn-stars {
	position: relative;
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 3px;
	color: #e3e6eb;
	white-space: nowrap;
}
.sn-single .sn-stars::before {
	content: "★★★★★";
}
.sn-single .sn-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--sn-star);
}
.sn-single .sn-stars__fill::before {
	content: "★★★★★";
}
/* 小サイズの星(タイトル直下の要約用) */
.sn-single .sn-stars--sm {
	font-size: 15px;
	letter-spacing: 1px;
}

/* ---- タイトル直下のレビュー要約(第一印象・クリックでレビュー詳細へ) ---- */
.sn-single .sn-titlemeta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: -4px 0 18px;
	color: var(--sn-ink);
	text-decoration: none;
}
.sn-single .sn-titlemeta:hover .sn-titlemeta__count {
	text-decoration: underline;
}
.sn-single .sn-titlemeta__score {
	font-size: 16px;
	font-weight: 700;
}
.sn-single .sn-titlemeta__count {
	font-size: 13px;
	color: var(--sn-muted);
}
/* 「主要レビューサイトを集約」= 競合に無い強みを小さなバッジで添える */
.sn-single .sn-titlemeta__note {
	font-size: 12px;
	font-weight: 600;
	color: var(--sn-accent);
	background: var(--sn-accent-soft);
	padding: 3px 9px;
	border-radius: 999px;
}

/* ---- ヒーロー直下:一言キャッチ + 核スペック帯(ファーストビューの結論) ---- */
.sn-single .sn-keyfacts {
	margin: 18px 0 6px;
}
/* 一言キャッチ = 写真の直後に置く、そのスタジオの「ひとこと」 */
.sn-single .sn-keyfacts__catch {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sn-ink);
	letter-spacing: 0.01em;
}
/* 核スペック = 横並びの最大4枠。スマホでは折り返す。 */
.sn-single .sn-keyfacts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sn-single .sn-keyfacts__item {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 160px;       /* 4枠が1行に並びつつ、狭い画面では折り返す */
	min-width: 0;          /* 長い駅名でも枠を壊さない */
	padding: 11px 14px;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	background: #fff;
}
.sn-single .sn-keyfacts__ico {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--sn-muted);
}
.sn-single .sn-keyfacts__ico .sn-ic {
	width: 22px;
	height: 22px;
}
.sn-single .sn-keyfacts__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sn-single .sn-keyfacts__label {
	font-size: 11px;
	color: var(--sn-muted);
	white-space: nowrap;
}
.sn-single .sn-keyfacts__value {
	font-size: 16px;
	font-weight: 700;
	color: var(--sn-ink);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;   /* 駅名が長い時は…で省略(枠崩れ防止) */
}
/* 値に添える小さな単位・補足(例:徒歩5分 / 1時間(税込)) */
.sn-single .sn-keyfacts__note {
	margin-left: 5px;
	font-size: 11px;
	font-weight: 500;
	color: var(--sn-muted);
}
/* 出典ごとのスコア(チップ) */
.sn-single .sn-reviewbox__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sn-single .sn-reviewsrc {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 120px;
	padding: 11px 16px;
	border: 1px solid var(--sn-line);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sn-single .sn-reviewsrc.is-link:hover {
	border-color: #cfd6e4;
	box-shadow: 0 4px 12px rgba(16, 24, 40, .07);
	transform: translateY(-1px);
}
.sn-single .sn-reviewsrc__name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sn-muted);
}
.sn-single .sn-reviewsrc__val {
	font-size: 20px;
	font-weight: 700;
	color: var(--sn-ink);
}
.sn-single .sn-reviewsrc__val small {
	font-size: 12px;
	font-weight: 400;
	color: var(--sn-faint);
}
.sn-single .sn-review__note {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--sn-faint);
}

/* ---- スタジオ映像・3Dツアー ---- */
.sn-single .sn-media {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sn-single .sn-media__link {
	margin: 0;
}

/* ---- 過去の実績ギャラリー(画像/Instagram埋め込み混在) ---- */
.sn-single .sn-gallery--works {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sn-single .sn-gallery--works figure {
	margin: 0;
	width: 200px;
}
.sn-single .sn-gallery--works figure.is-wide {
	width: 320px;   /* Instagram埋め込みは横幅が要るので広げる */
}
.sn-single .sn-gallery--works img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}
.sn-single .sn-gallery--works iframe {
	width: 100%;
	height: 540px;
	border: 0;
	border-radius: 6px;
	background: #fff;
}

/* ギャラリー(写真)= 比率固定の写真グリッド */
.sn-single .sn-gallery {
	display: flex;        /* 既定(過去の実績など特殊なものはこのまま) */
	flex-wrap: wrap;
	gap: 10px;
}
.sn-single .sn-gallery--photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.sn-single .sn-gallery--photos figure {
	margin: 0;
}
.sn-single .sn-gallery--photos img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
/* 平面図 = 図面なので切り抜かない(全体を見せる) */
.sn-single .sn-gallery--plan {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}
.sn-single .sn-gallery--plan figure {
	margin: 0;
}
/* 図面はクリックで拡大できるので、押せる目印(cursor)を出す。button の既定枠はリセット。 */
.sn-single .sn-gallery--plan .sn-plan__cell {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	display: block;
	width: 100%;
}
.sn-single .sn-gallery--plan img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #f8f8f8;
	display: block;
}
.sn-single .sn-gallery figcaption {
	font-size: 12px;
	color: var(--sn-muted);
	margin-top: 4px;
}

/* Instagram ボタン */
.sn-ig-btn {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 8px;
	background: #e1306c;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.sn-ig-btn:hover {
	opacity: .9;
}

/* SNSボタン(Instagram以外・sns_links)。色はSNS固有色にせず中立(アクセント系)に統一 */
.sn-sns-btn {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 8px;
	background: var(--sn-accent, #333);
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.sn-sns-btn:hover {
	opacity: .9;
}
/* 複数ボタンが1行に並ぶ場合、隣接ボタンとの間隔を空ける */
.sn-ig-btn + .sn-sns-btn,
.sn-sns-btn + .sn-sns-btn,
.sn-sns-btn + .sn-ig-btn {
	margin-left: 8px;
}

/* ============================================================
 * 詳細ページ:上部ギャラリー + 2カラム(右追従) ・デザインパス④-b
 *  - 参考=SHOOTEST詳細(s326):ギャラリーを最上部に大きく / 右カラムは追従
 * ============================================================ */

/* ---- ギャラリー(全幅・大きなメイン + 右に小さい4枚・whitepanda/Airbnb型) ---- */
.sn-hero {
	position: relative;     /* 「すべて表示」ボタンの基準 */
	margin: 4px 0 28px;
	border-radius: 12px;
	overflow: hidden;       /* 外周だけ角丸にクリップ */
}
.sn-hero__cell {
	position: relative;
	padding: 0;
	border: 0;
	margin: 0;
	background: var(--sn-bg-soft);
	cursor: pointer;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
}
.sn-hero__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .15s ease;
}
.sn-hero__cell:hover img {
	opacity: .92;
}
/* 画像1枚だけ(small-0)=メインを全幅16:9で */
.sn-hero--small-0 .sn-hero__cell--main img {
	aspect-ratio: 16 / 9;
}
/* 2枚以上=グリッド。メインを大きく左、残りを右に */
.sn-hero--small-1,
.sn-hero--small-2,
.sn-hero--small-3,
.sn-hero--small-4 {
	display: grid;
	gap: 8px;
	height: clamp(280px, 40vw, 480px);
}
.sn-hero--small-1,
.sn-hero--small-2,
.sn-hero--small-3 {
	grid-template-columns: 2fr 1fr;
}
.sn-hero--small-1 { grid-template-rows: 1fr; }
.sn-hero--small-2 { grid-template-rows: 1fr 1fr; }
.sn-hero--small-3 { grid-template-rows: 1fr 1fr 1fr; }
.sn-hero--small-4 {
	grid-template-columns: 2fr 1fr 1fr;   /* メイン(2) + 小2列 */
	grid-template-rows: 1fr 1fr;          /* 小は2×2 */
}
/* メインは常に左列で全行ぶち抜き */
.sn-hero--small-1 .sn-hero__cell--main,
.sn-hero--small-2 .sn-hero__cell--main,
.sn-hero--small-3 .sn-hero__cell--main,
.sn-hero--small-4 .sn-hero__cell--main {
	grid-column: 1;
	grid-row: 1 / -1;
}

/* 「すべて(N枚)の写真を表示」ボタン(右下に重ねる) */
.sn-hero__more {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 8px 16px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 8px;
	background: #fff;
	color: var(--sn-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.sn-hero__more:hover {
	background: #f5f5f5;
}

/* スマホ:メイン1枚を16:9で大きく・小画像は隠す(「すべて表示」で全部見られる) */
@media (max-width: 600px) {
	.sn-hero--small-1,
	.sn-hero--small-2,
	.sn-hero--small-3,
	.sn-hero--small-4 {
		display: block;
		height: auto;
	}
	.sn-hero__cell:not(.sn-hero__cell--main) {
		display: none;
	}
	.sn-hero__cell--main img {
		aspect-ratio: 16 / 9;
	}
}

/* ---- 引用写真(運営掲載)の出典表示(設計 §77) ----
 *  会員化前スタジオについて、運営が公式サイト/SNS の写真を「引用」として掲載しているときだけ出す。
 *  引用バッジ(ギャラリー左上)+ 出典キャプション + 停止/差し替えの依頼導線(ギャラリー直下)。
 */
/* 引用画像バッジ:写真の上でも読めるよう濃い半透明地+白文字。左上に重ねる。 */
.sn-single .sn-quote-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;                        /* 画像より前面(「すべて表示」ボタンと同層) */
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(26, 26, 26, .78); /* --sn-ink の半透明(写真の上で視認できる濃さ) */
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	pointer-events: none;              /* クリックは下のギャラリーボタンへ通す */
}

/* 出典キャプション + 停止/差し替え導線(ギャラリー直下・極力目立たせない)。
 *  オーナー要望:箱(背景・枠)を外し、右寄せ・小さめ・薄色で控えめに添える。
 *  停止導線リンクは消さず、薄色+下線で押せるまま残す。 */
.sn-single .sn-quote-note {
	margin: -10px 0 24px;   /* 箱を外したので食い込みは軽めに。写真直下に近づけるだけ */
	text-align: right;      /* 右寄せで控えめに置く */
	font-size: 11px;        /* 本文より小さく */
	line-height: 1.6;
	color: var(--sn-faint); /* 基調は薄いグレー(目立たせない) */
}
.sn-single .sn-quote-note__cite {
	margin: 0;
	color: var(--sn-faint);
}
/* 公式サイトへのリンク:アクセント色・太字をやめ、薄色+下線のみ(押せるが控えめ) */
.sn-single .sn-quote-note__cite a {
	color: var(--sn-faint);
	text-decoration: underline;
}
.sn-single .sn-quote-note__takedown {
	margin: 3px 0 0;
	color: var(--sn-faint);
}
.sn-single .sn-quote-note__owner {
	color: var(--sn-faint);
}
/* 停止/差し替え導線:消さずに薄色+下線のみ(クリック可能を維持) */
.sn-single .sn-quote-note__takedown a {
	color: var(--sn-faint);
	text-decoration: underline;
}

/* ---- 全写真オーバーレイ(ライトボックス) ---- */
.sn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;        /* ヘッダーより前面 */
	background: rgba(0, 0, 0, .9);
	overflow-y: auto;
	padding: 56px 16px;
}
.sn-lightbox[hidden] { display: none; }
.sn-lightbox__inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sn-lightbox__item { margin: 0; }
.sn-lightbox__item img {
	width: 100%;
	/* すべての写真を同じ比率の枠に揃える(引用元の縦横比がバラバラでも整列して見える・2026-07-04 オーナー指摘)。
	   3:2 の枠に object-fit:cover でトリミングして収めるため、余白や変形が出ない。 */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
/* 平面図の拡大は「図面なので切り抜かない」= 全体を収める(縦横比そのまま・画面に収まる大きさ)。 */
.sn-lightbox--plan .sn-lightbox__item img {
	aspect-ratio: auto;      /* 3:2 の切り抜きを解除 */
	object-fit: contain;
	width: auto;
	max-width: 100%;
	max-height: 88vh;        /* 縦長の図面でも画面内に収める */
	margin: 0 auto;
	background: #fff;         /* 図面の余白を白地にして見やすく */
}
/* ×(閉じる)を画面の右隅ではなく、中央の画像カード(最大900px)の右上へ寄せる。
   画面が広いほど隅の×は図面から離れて「ずれて」見えるため、カードの右外側に追従させる。
   ・calc((100vw - 900px)/2 - 48px) = カード右端のすぐ外側(暗い余白)に×を置く位置
   ・max(16px, …) = 画面が狭いときは従来どおり右上16pxへフォールバック */
.sn-lightbox--plan .sn-lightbox__close {
	top: 56px;
	right: max(16px, calc((100vw - 900px) / 2 - 48px));
}
/* 写真の下に出すキャプション(何の写真かを伝える控えめな説明) */
.sn-lightbox__cap {
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
}
.sn-lightbox__close {
	position: fixed;
	top: 16px;
	right: 20px;
	width: 42px;
	height: 42px;
	padding: 0;                 /* ボタン既定の余白を消して中央ズレを防ぐ */
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font-size: 24px;
	line-height: 1;
	/* ×の文字を丸のど真ん中に置く(flex中央そろえ) */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ---- 2カラム:上のギャラリーの下/左=詳細 右=追従ボックス ---- */
.sn-detail {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
	align-items: start;     /* 右の sticky を効かせる */
}
.sn-detail__main {
	min-width: 0;           /* グリッド子のはみ出し防止 */
}
.sn-detail__side {
	position: sticky;
	/* 貼り付き位置 = 固定タブバーの真下(帯の下端 + タブバー高さ + 12px)。
	   --sn-toc-offset は目次JSがスクロールのたびに実測して更新する(.sn-single に既定80px)。
	   ※タブバーは全幅(チップ11個を1行に収めるため)。右カードはこの top でバーの下に逃がすので被らない。 */
	top: var(--sn-toc-offset, 96px);
	/* ※カード全体の max-height + overflow-y:auto は付けない。
	   付けると、カード上にカーソルがある時のホイールで中身だけが動き、上端(★評価)が
	   枠外に消える=「上が欠ける/被られる」ように見えるため。縦長対策は下の .sn-pricelist に一本化。 */
}
/* 右の追従カード内の料金内訳リストは高さ上限+内部スクロール。
   カードが縦長になる主因=内訳の行数。ここを畳むことで、開いた状態で
   「★評価〜電話するボタン」までカード全体が画面に収まる(全内訳は本文の料金セクションにある)。
   上限 --sn-price-max はJS(single-studio.php の「内訳の高さ合わせ」)が
   「画面の高さ − 貼り付き位置 − 内訳以外の実高さ」を店ごとに実測して入れる。
   JS無効時だけ従来のclamp(定数の引き算)で近似する。
   ※カード全体の max-height + overflow は絶対に付けない(上端の★が消える方式はNG)。 */
.sn-detail__side .sn-pricelist {
	max-height: var(--sn-price-max, clamp(150px, calc(100vh - 660px), 260px));
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* 背の低い画面(小さめノートPC等)の保険:
   比較中リストなどでカードが画面の高さより長くなると、sticky のままでは
   下のボタンが見えなくなる。その場合だけ追従をやめて普通に流す。
   (カード全体の内部スクロールは使わない=上端欠けの再発防止) */
@media (max-height: 700px) {
	.sn-detail__side {
		position: static;
	}
	/* 追従しない=ページと一緒に流れるので、内訳は固定の上限だけでよい */
	.sn-detail__side .sn-pricelist {
		max-height: 260px;
	}
}

/* 右カード内だけボタンをひと回り詰める(比較/お気に入り/送客で最大5個並ぶため)。
   .sn-detail__side スコープで上書き=トップの .sn-btn・スマホ下部バーの見た目は変えない。
   比較(.sn-compare-btn--cta)とお気に入り(.sn-fav--cta)の原本は sn-compare.css /
   sn-members.css にあるが、ここのセレクタの方が詳細度が高いので読み込み順に関係なく勝つ。 */
.sn-detail__side .sn-cta__btns {
	gap: 8px;
}
.sn-detail__side .sn-cta__btn {
	padding: 13px 20px;
	font-size: 14.5px;
}
.sn-detail__side .sn-compare-btn--cta {
	padding: 13px 20px;     /* 原本(sn-compare.css)の17pxを右カードでは詰める */
	font-size: 14.5px;
	margin-bottom: 8px;     /* .sn-cta__btns の gap(8px)と揃える */
}
.sn-detail__side .sn-fav--cta {
	padding: 11px 16px;
	margin-bottom: 8px;
}

/* ---- 追従する送客CTAボックス ---- */
.sn-cta {
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	padding: 22px 22px 20px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}
/* 評価 = ボックスの頭。下にしっかり余白を取り、料金ブロックと分ける */
.sn-cta__review {
	margin: 0 0 16px;
	font-size: 14px;
	color: #444;
}
.sn-cta__review .star { color: var(--sn-star); }
.sn-cta__review .cnt { color: var(--sn-muted); }
.sn-cta__label {
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sn-muted);
}
.sn-cta__price {
	margin: 0 0 3px;
	font-size: 25px;
	font-weight: 700;
	color: var(--sn-ink);
}
.sn-cta__price .unit {
	font-size: 12px;
	font-weight: 400;
	color: var(--sn-muted);
}

/* ---- 料金パネル(スチール/ムービー タブ + 内訳)=見本準拠 ---- */
.sn-cta__pricepanel {
	margin: 0 0 4px;
}
.sn-cta__pricepanel .sn-cta__label {
	margin-bottom: 6px;
}
/* タブ */
.sn-pricetabs {
	display: flex;
	gap: 6px;
	margin: 0 0 10px;
	border-bottom: 1px solid var(--sn-line);
}
.sn-pricetab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 4px;
	margin-bottom: -1px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--sn-muted);
	cursor: pointer;
}
.sn-pricetab svg { display: block; }
.sn-pricetab.is-active {
	color: var(--sn-ink);
	border-bottom-color: var(--sn-ink);
}
/* タブを切り替えるたびに、料金表がふわっと出る(切替が分かるように) */
.sn-single .sn-pricebody {
	animation: sn-fade-in .28s ease both;
}
@keyframes sn-fade-in {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* 動きを抑える設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
	.sn-single .sn-pricebody {
		animation: none;
	}
}
/* 本文の料金プラン用タブ(右パネルより少し大きめ・幅広に) */
.sn-single .sn-pricetabs--body {
	gap: 4px;
	margin: 4px 0 0;
}
.sn-single .sn-pricetabs--body .sn-pricetab {
	gap: 7px;
	padding: 11px 18px;
	font-size: 14.5px;
	border-bottom-width: 2.5px;
}
.sn-single .sn-pricetabs--body .sn-pricetab svg {
	width: 17px;
	height: 17px;
}
/* 参考価格の注記 */
.sn-cta__pricenote {
	margin: 0 0 14px;
	font-size: 11.5px;
	color: var(--sn-muted);
}
/* 内訳リスト */
.sn-pricelist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sn-priceitem {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-top: 1px solid #f4f4f5;
	font-size: 13.5px;
}
.sn-priceitem__name {
	color: var(--sn-ink);
	font-weight: 600;
	min-width: 0;
}
.sn-priceitem__name .t {
	color: var(--sn-muted);
	font-weight: 400;
	font-size: 11.5px;
}
.sn-priceitem__val {
	color: var(--sn-ink);
	font-weight: 700;
	white-space: nowrap;
}
.sn-priceitem__val .u {
	color: var(--sn-muted);
	font-weight: 400;
	font-size: 11px;
}
.sn-cta__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* リッチなボタン(ピル形・グラデ+アイコン+影)=studio-navi.net 準拠
 * ★サイト全体のボタン意匠を統一するため、共通クラス .sn-btn にも同じ意匠を共有させる
 *   (詳細ページの「公式サイトを見る」CTAと、トップの「AIで探す」等を同じ見た目にする=オーナーFB)。
 *   詳細ページ側(.sn-cta__btn)は宣言をそのまま共有するだけ=見た目は一切変わらない。
 *   トップ側の差分(自動幅・ゴースト等)はトップページCSS(末尾)で .sn-btn に上書きする。 */
.sn-cta__btn,
.sn-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 22px;
	border-radius: 999px;      /* ピル形(両端まる) */
	border: none;
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;          /* 上面の光沢(::before)をはみ出させない */
	/* 既定は中立(電話などはこの上に --phone で色を載せる) */
	background: linear-gradient(105deg, #4b5563 0%, #6b7280 100%);
	/* 影は小さめ・薄め=にじみ(ぼやけ)を抑えてエッジをくっきり */
	box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
/* 上半分にうっすら光沢を乗せて立体感を出す(リッチ感) */
.sn-cta__btn::before,
.sn-btn::before {
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.sn-cta__btn:hover,
.sn-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .16);
}
.sn-cta__btn .sn-cta__ico {
	flex: 0 0 auto;
	position: relative;        /* 光沢より前面に */
}
.sn-cta__btn span,
.sn-btn span {
	position: relative;
}
/* 一番導きたいCTA(公式サイトを見る)= ネイビー→ブルー→シアン。トップの主役ボタンも同じ意匠。 */
.sn-cta__btn--primary,
.sn-btn--primary {
	background: linear-gradient(105deg, #13306e 0%, #2563eb 55%, #38b6e6 100%);
	box-shadow: 0 4px 11px rgba(37, 99, 235, .24);
}
.sn-cta__btn--primary:hover,
.sn-btn--primary:hover {
	box-shadow: 0 8px 18px rgba(37, 99, 235, .32);
}
/* 次に導きたいCTA(公式料金ページ)= ブルー→シアン(明るめ) */
.sn-cta__btn--accent {
	background: linear-gradient(105deg, #2563eb 0%, #29a3e0 60%, #36d0e0 100%);
	box-shadow: 0 4px 11px rgba(34, 211, 238, .22);
}
.sn-cta__btn--accent:hover {
	box-shadow: 0 8px 18px rgba(34, 211, 238, .30);
}
/* 電話 = 中立(スレートのグラデ) */
.sn-cta__btn--phone {
	background: linear-gradient(105deg, #334155 0%, #64748b 100%);
}

/* ---- スマホ:1カラム。追従ボックスはギャラリー直後(各セクションより上)に ---- */
@media (max-width: 820px) {
	.sn-detail {
		display: flex;
		flex-direction: column;
		gap: 24px;
		align-items: stretch;   /* 1カラム時は左右の列を横幅いっぱいに伸ばす(料金カードが他と揃う) */
	}
	.sn-detail__side {
		position: static;
		order: -1;          /* CTAを各セクションより上へ */
		/* PC用の max-height / overflow は基本スタイルから撤去済みのため、解除指定は不要になった */
	}
}

/* ============================================================
 * モバイル下部固定CTA(.sn-mcta) — スマホでスクロール中も送客導線を常時表示
 *  - PC(821px以上)では非表示。スマホのみ画面下に固定する。
 *  - 上の追従CTA(.sn-cta)が画面外に出たら JS が hidden を外して表示する。
 * ============================================================ */
.sn-mcta {
	display: none;            /* 既定は非表示。スマホのメディアクエリで出す */
}
.sn-mcta[hidden] {
	display: none;            /* JS制御の hidden は常に隠す(属性を尊重) */
}
@media (max-width: 820px) {
	/* バー表示中は本文の最下部がバーに隠れないよう余白を足す */
	body.sn-has-mcta .sn-single {
		padding-bottom: 84px;
	}
	.sn-mcta:not([hidden]) {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;          /* 目次バー(z-index:5/固定時)より前面 */
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: saturate(140%) blur(6px);
		border-top: 1px solid var(--sn-line, #ececec);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	}
	/* 左:最安価格(コンパクト表示) */
	.sn-mcta__price {
		flex: 0 0 auto;
		display: flex;
		align-items: baseline;
		gap: 4px;
		line-height: 1.1;
		white-space: nowrap;
	}
	.sn-mcta__pricelabel {
		font-size: 11px;
		font-weight: 700;
		color: var(--sn-muted, #888);
	}
	.sn-mcta__priceval {
		font-size: 17px;
		font-weight: 700;
		color: var(--sn-ink, #222);
	}
	.sn-mcta__priceunit {
		font-size: 11px;
		color: var(--sn-muted, #888);
	}
	/* 右:アクションボタン群(主ボタンは伸びる) */
	.sn-mcta__btns {
		flex: 1 1 auto;
		display: flex;
		align-items: stretch;
		gap: 8px;
		min-width: 0;
	}
	.sn-mcta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 48px;
		border-radius: 999px;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
	}
	/* 電話 = 正方形のアイコンのみ小ボタン(スレート) */
	.sn-mcta__btn--phone {
		flex: 0 0 auto;
		width: 48px;
		background: linear-gradient(105deg, #334155 0%, #64748b 100%);
	}
	/* 主ボタン = 残り幅いっぱい(公式サイト=ネイビー→ブルー→シアン) */
	.sn-mcta__btn--primary {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 18px;
		background: linear-gradient(105deg, #13306e 0%, #2563eb 55%, #38b6e6 100%);
		box-shadow: 0 4px 11px rgba(37, 99, 235, .24);
	}
	.sn-mcta__btn--primary span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sn-mcta__btn .sn-cta__ico {
		flex: 0 0 auto;
	}
}

/* ============================================================
 * ページ内ナビ(目次バー) — 長い詳細ページを章ごとに行き来する
 *  - 写真の下に表示し、スクロールで上端に達したらヘッダーの真下に貼り付く(sticky)。
 *  - チップ(丸い小ボタン)を横並び。画面に収まらない分は横スクロール。
 *  - 貼り付く位置(ヘッダーの高さ)はJSが自動計測して合わせる。
 * ============================================================ */
.sn-single {
	--sn-toc-offset: 80px; /* 見出しジャンプ時の上余白 & 右カードの貼り付き位置(帯+タブバー高さ)。目次JSが実測して更新 */
}

/* 目次バー本体:写真の下に置き、スクロールで上端に達するとヘッダーの真下に貼り付く(sticky)。 */
.sn-toc {
	position: relative;       /* 通常時=写真の下に普通に並ぶ */
	z-index: 5;
	margin: 14px 0 30px;      /* 上=写真の下のすき間 / 下=タブバーと最初の見出し(平面図)の間をしっかり空ける */
	padding: 8px 0;
	background: rgba(255, 255, 255, .94);
	border-top: 1px solid var(--sn-line, #ececec);
	border-bottom: 1px solid var(--sn-line, #ececec);
}
/* スクロールで上端に貼り付いた状態(JSが付与。top はJSが指定)。
   白い背景・上下ボーダー・影はビューポート全幅(端から端)=よくある全幅stickyヘッダーの見た目。
   ※ width:100vw ではなく left:0 + right:0 にする(スクロールバー幅ぶんのはみ出し=横スクロール発生を防ぐ)。 */
.sn-toc.is-pinned {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 990;             /* 本文より前面・WP管理バー(99999)より後面 */
	margin: 0;
	backdrop-filter: saturate(180%) blur(8px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
/* 固定中のチップは本文(中央寄せコンテンツ)の左端に揃え続ける。
   左右のインセットはJS(sync)が placeholder の実測値を --sn-toc-inset-* に入れる。 */
.sn-toc.is-pinned .sn-toc__list {
	padding-left: var(--sn-toc-inset-left, 16px);
	padding-right: var(--sn-toc-inset-right, 16px);
}

/* ============================================================
 * 案2:スタジオ詳細ページでは、固定バーを「目次バー1本だけ」にする。
 *  - SWELL は #fix_header(.l-fixHeader)を position:fixed でスクロール時に出す。
 *    これが目次バーと2段に重なる原因なので、このページだけ出さない。
 *  - 併せて、スマホで本体ヘッダーが貼り付く設定(data-spfix)も解除して常に1本に。
 *  ※ body_class は #body_wrap に付くため body 直下指定にせず .single-studio を使う。
 * ============================================================ */
.single-studio .l-fixHeader { display: none !important; }
.single-studio .l-header[data-spfix="1"] { position: static !important; }
.sn-toc__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 0;              /* チップを写真の左端に揃える(横の余白は親.sn-singleが持つ) */
	list-style: none;
	overflow-x: auto;            /* 収まらない分は横スクロール */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;       /* スクロールバーは隠す(Firefox) */
}
.sn-toc__list::-webkit-scrollbar { display: none; } /* スクロールバーを隠す(Chrome/Safari) */
.sn-toc__item { flex: 0 0 auto; }
.sn-toc__link {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--sn-line, #ececec);
	border-radius: 999px;
	background: #fff;
	color: var(--sn-muted, #6b7280);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sn-toc__link:hover {
	color: var(--sn-ink, #1a1a1a);
	border-color: #d8d8d8;
}
/* 現在地(スクロール位置にあるセクション)のチップを強調 */
.sn-toc__link.is-active {
	color: #fff;
	background: var(--sn-ink, #1a1a1a);
	border-color: var(--sn-ink, #1a1a1a);
}

/* ジャンプ先の見出し・写真が、貼り付いた目次バーに隠れないように上余白を確保 */
.sn-single [id^="sn-"] {
	scroll-margin-top: var(--sn-toc-offset);
}

/* =========================================================================
 * 物差し4本(スタジオの“量”)= 中立メーター(自然光/静かさ/広さ/家具/小物)
 *  ・帯の塗り幅 = 0〜100 の量。色は good/bad で分けない(中立の物差しのため)。
 *  ・数値(.sn-ruler__num)は運営にだけ PHP 側で出す。CSSは見た目だけ担当。
 * ========================================================================= */
.sn-single .sn-rulers__lead {
	margin: -8px 0 20px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sn-muted);
}
.sn-single .sn-rulers {
	display: grid;
	gap: 20px 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 広い画面は2列 */
}
@media (max-width: 600px) {
	.sn-single .sn-rulers {
		grid-template-columns: 1fr; /* スマホは1列 */
	}
}
.sn-single .sn-ruler__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 7px;
}
.sn-single .sn-ruler__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--sn-ink);
}
/* 運営だけに見える内部値(0〜100)。一般には PHP 側で出力されない */
.sn-single .sn-ruler__num {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--sn-muted);
	background: var(--sn-bg-soft);
	border: 1px solid var(--sn-line);
	border-radius: 999px;
	padding: 3px 8px;
	font-variant-numeric: tabular-nums;
}
.sn-single .sn-ruler__track {
	position: relative;
	height: 9px;
	border-radius: 999px;
	background: var(--sn-bg-soft);
	overflow: hidden;
}
.sn-single .sn-ruler__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--sn-ink); /* 中立の単色(量の多寡だけを表す) */
	min-width: 2px;            /* 0 のときも“ある場所”が分かる細い芯 */
}
.sn-single .sn-ruler__scale {
	display: flex;
	justify-content: space-between;
	margin: 5px 0 0;
	font-size: 11px;
	color: var(--sn-faint);
}

/* === 自然文(AI)検索ボックス(第2層マッチ率)。見た目は最小限・デザインパスで整える。 === */
.sn-aisearch {
	margin: 0 0 16px;
}
.sn-aisearch__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--sn-faint);
}
.sn-aisearch__row {
	display: flex;
	gap: 8px;
}
.sn-aisearch__input {
	flex: 1 1 auto;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
}
.sn-aisearch__btn {
	flex: 0 0 auto;
	padding: 10px 16px;
	font-size: 15px;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	cursor: pointer;
}
.sn-aisearch__msg {
	margin: 8px 0 0;
	font-size: 13px;
}
.sn-aisearch__msg--err {
	color: #b32d2e;
}
.sn-aisearch__result {
	margin: 8px 0 16px;
	padding: 10px 12px;
	background: #f6f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}
.sn-aisearch__read {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
}
.sn-aisearch__note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--sn-faint);
}



/* ============================================================
 * トップページ(front-page.php)= §78「トップページ構成の確定」
 *  デザイン刷新・第2弾(2026-07-06 オーナーFB):
 *   - A. ヘッダー刷新=SWELL標準の透過(ヒーロー)ヘッダーをコードで有効化(functions.php)。
 *        最上部の細いバー(SNS/RSS/検索)は全ページ非表示。ヒーロー上部に暗グラデで白ロゴを保護。
 *   - B. ファーストビュー完成度=ヒーロー高さ約90vh・メインコピーのジャンプ率UP・検索カードは
 *        角丸18/多層の柔らかい影/入力56px・例文チップはガラス調・下部にスクロールヒント。
 *   - C. スライドショー速度を設定化(sn_top_hero_interval)。フェードは速度連動(CSS変数)。
 *   - D. タイポ階層/セクションのリズム=英字ラベル11px・見出しPC30・リード15px。
 *        余白 PC112/SP64。背景の明暗リズム(白→ダーク宣言帯→淡→白→オフホワイト)。
 *   - E. カードUI洗練=NEW/PRバッジをダークネイビー地の白細字に統一・価格を主役に。
 *   - F. 3ステップ=オフホワイト帯+大きな薄グレー番号カード+末尾CTA。
 *  方針:白〜オフホワイト基調 / テキストはインク黒 / 彩色はCTAとごく少数の強調だけ /
 *        見出しは詳細ページと同じ和英併記(左バー+英字ラベル)。
 *  ※ SWELLのコンテンツ枠(.l-container)は中央寄せ+最大幅のため、全幅で見せたい帯・ヒーローは
 *     「margin: calc(50% - 50vw)」で枠を突き抜けさせる(body/#body_wrap が overflow-x:clip なので安全)。
 * ============================================================ */

/* トップ全体の下地(白基調・上質ミニマル)。差し色トークンはトップ内だけの控えめな深い青。 */
.sn-top {
	color: var(--sn-ink);
	/* 強調に使う唯一の差し色(CVボタンのネイビー寄り)。使いどころは NEW バッジ等ごく少数に絞る。 */
	--sn-top-accent: #16336b;
}

/* 透過(ヒーロー)ヘッダー時、トップのコンテンツ上余白を消してヒーローを画面最上部に密着させる。
   SWELL は透過ヘッダーで #body_wrap の上余白は 0 にするが、`.top #content` の上余白(既定4em)は
   別枠で残り、しかもCSSがキャッシュされ得るためコード設定では消せない(functions.php 参照)。
   ここで #body_wrap.top を含む高い詳細度で確実に 0 にする(トップページのみ・他ページは無影響)。 */
#body_wrap.top #content {
	padding-top: 0;
}

/* 各セクション:全幅の背景 + 中央寄せの内側。余白は大きめ(高級感・§78 D=PC112/SP64)。 */
.sn-top__section {
	/* SWELLの中央寄せ枠を突き抜けて全幅にする(背景色・帯を端まで見せるため)。 */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 112px 24px;
	background: #fff;
}
.sn-top__wrap {
	max-width: 1080px;
	margin: 0 auto;
}

/* ---- 見出し(詳細ページと同じ流儀=英字ラベル + 左インクバー + 日本語)---- */
.sn-top__head {
	margin-bottom: 44px;
}
/* 中央寄せの見出し(3ステップ等)。左バーを消し、幅を絞って中央に。 */
.sn-top__head--center {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sn-top__head--center .sn-top__h2 {
	justify-content: center;
}
.sn-top__head--center .sn-top__h2::before {
	display: none; /* 中央見出しでは左バーを出さない */
}
/* 小さな英字ラベル(例:PICK UP / NEW STUDIO)。上品にレタースペーシング(§78 D=11px/.15em)。 */
.sn-top__eyebrow {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .15em;
	color: var(--sn-faint);
	text-transform: uppercase;
}
/* 日本語見出し(§78 D=PC28〜32px)。ジャンプ率を上げて主役に。 */
.sn-top__h2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.35;
	color: var(--sn-ink);
}
/* 見出し左の縦バー(詳細ページの h2 と同じ・本文と同じ黒)。 */
.sn-top__h2::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 4px;
	height: 1.05em;
	border-radius: 2px;
	background: var(--sn-ink);
}
/* リード文(§78 D=15px・グレー)。 */
.sn-top__lead {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--sn-muted);
}
/* head の中に lead を入れた場合の詰め(head 直下の見出し→リード)。 */
.sn-top__head .sn-top__lead {
	margin-top: 14px;
}
.sn-top__head--center .sn-top__lead {
	margin-left: auto;
	margin-right: auto;
	max-width: 520px;
}
/* PICK UP 見出しの「広告」小ラベル(ステマ規制:自然枠と広告を明確に分ける)。 */
.sn-top__adnote {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid var(--sn-line);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--sn-muted);
	letter-spacing: .04em;
	vertical-align: middle;
}

/* ---- トップ限定:透過ヘッダーの見た目(SWELL top-header--spfix モジュール移植) ----
   functions.php が wp フックで top_header を有効化し、SWELL はヘッダーに -transparent -t-fff
   クラスを付けるが、透明化CSS本体は SWELL がトップ用CSSとして30日トランジェント(swell_parts_style_top)
   にキャッシュしており、キャッシュが「透過OFF時代」に生成されていると出力されない(=クラスだけ付いて
   ヘッダーが白いまま)。→ キャッシュに依存せず、同内容を子テーマからトップ(.top)限定で常時出力する。
   SWELL 側キャッシュが正しく再生成された場合は同一ルールの重複になるだけで無害。 */
#body_wrap.top { padding-top: 0 !important; }             /* ヘッダーぶんの上余白を消してヒーローを最上部へ */
.top .c-infoBar { display: none; }                        /* 透過時は情報バーを出さない(SWELL標準の挙動) */
/* ヘッダーをヒーローに重ねる(絶対配置・スクロールで固定ヘッダーへ .5s 遷移)。 */
.top .l-header { left: 0; position: absolute; top: 0; transition: all .5s; }
.top .l-header .l-container { max-width: 100%; }
.top .l-header.-t-fff { --swl-color_top_header: #fff; }   /* 文字色トークン=白(t_fff) */
.top .l-header .l-header__inner { color: var(--swl-color_top_header, #fff); }
.top .l-header .c-gnav > li > a::after { background: var(--swl-color_top_header, #fff); } /* ホバー下線も白 */
/* スクロール後の追従(固定)ヘッダー=白背景では「通常ロゴ」を出し「透過用ロゴ」を隠す(2枚ロゴの出し分け)。 */
.top .l-fixHeader .c-headLogo__img.-common { display: block; }
.top .l-fixHeader .c-headLogo__img.-top { display: none; }
/* SPナビは初期非表示(スクロール固定時にフェード表示)。 */
.top .l-header__spNav { -webkit-animation: none !important; animation: none !important; opacity: 0; transition: opacity .5s, visibility .5s; visibility: hidden; }
/* PC(≥960px):背景・影なしで完全に透過し、ヒーローに重ねる。 */
@media (min-width: 960px) {
	.top .l-header { background: none; box-shadow: none !important; position: absolute !important; }
	.top .c-headLogo__img.-common { display: none; }
}
/* SP(<960px):最上部は透過、スクロールで白背景の固定ヘッダーへ切り替え(data-scrolled で判定)。 */
@media not all and (min-width: 960px) {
	.top .l-header[data-spfix="1"] { position: fixed !important; }
	[data-scrolled="false"] .top .l-header[data-spfix="1"] { background: none; box-shadow: none; }
	[data-scrolled="false"] .top .l-header[data-spfix="1"] .l-header__inner { color: var(--swl-color_top_header, #fff); }
	[data-scrolled="false"] .top .l-header[data-spfix="1"] .c-headLogo__img.-common { display: none; }
	[data-scrolled="true"] .top .l-header[data-spfix="1"] .l-header__inner { color: var(--color_header_text); }
	[data-scrolled="true"] .top .l-header[data-spfix="1"] .c-headLogo__img.-top { display: none; }
	[data-scrolled="true"] .top .l-header[data-spfix="1"] .l-header__spNav { opacity: 1; top: 0; visibility: visible; }
}

/* ============================================================
 * ① ヒーロー(写真スライドショー・全幅)
 * ============================================================ */
.sn-top-hero {
	position: relative;
	/* 全幅(SWELL枠を突き抜け)。 */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: flex;
	align-items: center;
	/* ファーストビューをほぼ全画面に(§78 B=PC 88〜92vh)。検索カードまで収める。 */
	min-height: clamp(560px, 90vh, 840px);
	/* 上はヘッダー分の保護余白(透過ヘッダーが重なっても文字が隠れない)。下はスクロールヒント分。 */
	padding: clamp(116px, 15vh, 168px) 24px 96px;
	overflow: hidden;
	/* 画像が読み込まれる前・未設定時のフォールバック地(落ち着いたダークトーン)。 */
	background: linear-gradient(140deg, #10151f 0%, #1c2a3f 55%, #223a52 100%);
	isolation: isolate;
}
/* 画像未設定時:スライドが無くてもフォールバックのダーク地で成立(壊れて見えない)。 */
.sn-top-hero--empty {
	background: linear-gradient(140deg, #10151f 0%, #1c2a3f 55%, #223a52 100%);
}

/* スライド群(重ねて置き、クロスフェードで切替)。 */
.sn-top-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sn-top-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* フェード秒数は front-page.php が速度設定に連動してCSS変数で渡す(未指定時1.2s)。 */
	transition: opacity var(--sn-hero-fade, 1.2s) ease;
	will-change: opacity;
}
/* 表示中の1枚だけ不透明に。初期表示は先頭スライドに is-active を付けておく(JS/動きOFFでも1枚は見える)。 */
.sn-top-hero__slide.is-active {
	opacity: 1;
}
.sn-top-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 写真の上に暗いグラデーションを重ねて白文字の可読性を確保。
   上部を少し濃くして、透過ヘッダーの白ロゴ・白メニューが明るい写真でも読めるようにする(§78 A-2)。 */
.sn-top-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 12, 20, .66) 0%, rgba(8, 12, 20, .30) 34%, rgba(8, 12, 20, .72) 100%);
}
/* 動きを減らす設定の人には切替アニメを止め、先頭1枚を静止表示(fade も無効化)。 */
@media (prefers-reduced-motion: reduce) {
	.sn-top-hero__slide {
		transition: none;
	}
}

/* ヒーローの中身(オーバーレイより前面)。 */
.sn-top-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.sn-top-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .84);
}
.sn-top-hero__mark {
	font-size: 9px;
	vertical-align: super;
}
/* メインコピー:ジャンプ率を上げる(§78 B)。オーナー強調=PCで1行に収める。
   フォント上限を 42px に抑え、16文字がヒーロー内側(max-width:720px)に1行で収まるようにした
   (42×16≒672 < 720)。狭い画面では下の span 制御で「…したいか、」の後で改行する。 */
.sn-top-hero__title {
	margin: 0 0 20px;
	font-size: clamp(24px, 4.7vw, 42px);
	line-height: 1.28;
	font-weight: 800;
	letter-spacing: .015em;
	color: #fff;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .3);
}
/* メインコピーの改行制御(最重要):各 span を inline-block + nowrap にする。
   → span の内部では絶対に折り返さない(「…書く/だけ。」のような不自然な折り返しが起きない)。
   → 折り返しは HTML 側の <wbr>(span の境目=「…したいか、」の後)だけで起きる。PCは1行・スマホは2行。 */
.sn-top-hero__title span {
	display: inline-block;
	white-space: nowrap;
}
/* サブコピー:細め・行間広め。max-width は全文(35文字)がPCで1行に収まる幅=640px。
   狭い画面では従来どおり span+wbr 制御で、読点(「…だけで、」)の後だけで2行に折り返す。 */
.sn-top-hero__sub {
	margin: 0 auto 32px;
	max-width: 640px;
	font-size: clamp(14px, 1.55vw, 16px);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(255, 255, 255, .88);
}
/* サブコピーも各 span を inline-block + nowrap=読点(「…だけで、」)の位置でだけ改行する。 */
.sn-top-hero__sub span {
	display: inline-block;
	white-space: nowrap;
}

/* 検索窓は白背景のカードで浮かせる(多層の柔らかい影・角丸18・内側余白広め=§78 B)。
   ヒーローの主役として少し大きく・影を強めにして存在感を上げる(コピーより悪目立ちしない範囲)。 */
.sn-top-hero__searchcard {
	max-width: 660px;
	margin: 0 auto;
	padding: 24px 24px 26px;
	background: #fff;
	border-radius: 18px;
	box-shadow:
		0 36px 72px rgba(6, 12, 24, .34),
		0 14px 28px rgba(6, 12, 24, .22),
		0 2px 6px rgba(6, 12, 24, .14);
	text-align: left;
}

/* 例文チップ(検索窓の下・暗い背景の上=半透明白のガラス調で可読に)。 */
.sn-top-hero__examples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 20px auto 0;
	max-width: 640px;
}
.sn-top-hero__examples-label {
	font-size: 12px;
	color: rgba(255, 255, 255, .74);
}
/* 注記(自社調べ)はさらに小さく・透明度低めに(§78 B)。 */
.sn-top-hero__note {
	margin: 30px 0 0;
	font-size: 10.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .52);
}

/* 最下部中央の控えめなスクロールヒント(細い縦線 + 小さな下向きシェブロン・薄い白・静止)。 */
.sn-top-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, .6);
	pointer-events: none;
}
.sn-top-hero__scroll-line {
	width: 1px;
	height: 34px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6));
}

/* ---- ヒーロー内のAI検索フォーム(白カードの中身)---- */
.sn-top-hero .sn-aisearch {
	margin: 0;
}
.sn-top-hero .sn-aisearch__label {
	display: block;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sn-muted);
	text-align: left;
}
.sn-top-hero .sn-aisearch__row {
	display: flex;
	align-items: stretch;   /* 入力欄とボタンの高さを揃える */
	gap: 10px;
}
.sn-top-hero .sn-aisearch__input {
	flex: 1 1 auto;
	min-height: 58px;              /* §78 B=入力高さ56px以上(主役として少し高く) */
	padding: 17px 18px;
	font-size: 16px;               /* iOSで自動ズームしない下限=16px */
	color: var(--sn-ink);
	border: 1px solid #d4d9e0;
	border-radius: 12px;
	background: #fff;
}
.sn-top-hero .sn-aisearch__input:focus {
	outline: none;
	border-color: var(--sn-top-accent);
	box-shadow: 0 0 0 3px rgba(22, 51, 107, .12);
}
/* 送信ボタンは詳細ページのCVボタンと同じ意匠(グラデのピル)に統一。 */
.sn-top-hero .sn-aisearch__btn {
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	padding: 16px 30px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	background: linear-gradient(105deg, #13306e 0%, #2563eb 55%, #38b6e6 100%);
	box-shadow: 0 4px 11px rgba(37, 99, 235, .24);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sn-top-hero .sn-aisearch__btn::before {
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.sn-top-hero .sn-aisearch__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .32);
}

/* ============================================================
 * チップ(タップで探す・例文)共通=塗りをやめ、ニュートラルな細ボーダー+余白広め
 * ============================================================ */
.sn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sn-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* 高さ・パディングを統一(§78 D)。少しゆとりを持たせて押しやすく・単調に見えないように。 */
	min-height: 42px;
	padding: 10px 18px;
	border: 1px solid #e3e6ec;   /* ニュートラルより気持ち締めた罫線(境界がぼやけない) */
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #374151;
	background: #fff;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* ホバーは丁寧に反応(罫線をやや締める+ごく薄い下地+ふわっと浮く影)=青の塗りは使わない。 */
.sn-chip:hover {
	border-color: #c4cad4;
	color: var(--sn-ink);
	background: #fafbfc;
	box-shadow: 0 3px 8px rgba(20, 30, 55, .06);
}
/* 件数の数字はさらに小さく薄く(§78 D)。 */
.sn-chip__count {
	font-size: 10px;
	color: var(--sn-faint);
	font-weight: 400;
}
/* 「すべて見る」チップ:わずかに強め(差し色の文字)。 */
.sn-chip--more {
	font-weight: 600;
	color: var(--sn-top-accent);
	border-color: #d6ddea;
}
.sn-chip--more:hover {
	border-color: var(--sn-top-accent);
	color: var(--sn-top-accent);
	background: #f7f9fc;
}

/* ヒーロー内の例文チップは暗い背景の上=半透明白のガラス調(§78 B)。 */
.sn-top-hero__examples .sn-chip {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.sn-top-hero__examples .sn-chip:hover {
	border-color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ============================================================
 * ② タップで探す(区切りは罫線をやめ、余白+小ラベルで=§78 D)
 * ============================================================ */
.sn-tap__block {
	margin-top: 40px;
}
.sn-tap__block:first-of-type {
	margin-top: 0;
}
.sn-tap__label {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--sn-muted);   /* faint→muted で小ラベルを少しはっきり(グループの区切りが分かる) */
	text-transform: uppercase;
}

/* ============================================================
 * ③「順位は買えない」宣言帯(ダークのインク帯・全幅・上下余白を増やし2階層に=§78 D)
 * ============================================================ */
.sn-pledge {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 84px 24px;
	background: var(--sn-ink);
	color: #fff;
}
.sn-pledge__inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.sn-pledge__eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
/* 1行目=大きく強く(約束の核心)。 */
.sn-pledge__lead {
	margin: 0;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	color: #fff;
}
/* 本文=小さく薄く(補足)。行長が長くなりすぎないよう max-width を絞る(§78 オーナー確定)。
   透明度は黒地での可読性を少し上げるため .62→.68 に(§78-7)。 */
.sn-pledge__sub {
	margin: 18px auto 0;
	max-width: 640px;
	font-size: 14.5px;
	line-height: 1.95;
	color: rgba(255, 255, 255, .68);
}
/* 宣言帯の改行制御(ヒーローと同じ方式):各 span を inline-block+nowrap にして span 内部では
   折り返さず、HTML 側の <wbr>(読点・意味の切れ目)でだけ改行する(PCは1行・狭幅で自然に折る)。 */
.sn-pledge__lead span,
.sn-pledge__sub span {
	display: inline-block;
	white-space: nowrap;
}

/* ============================================================
 * ④⑤ カードのグリッド(PICK UP / NEW STUDIO)
 * ============================================================ */
.sn-top__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 24px;
}
/* PICK UP はごく淡い下地で「自然枠(NEW)」と視覚的に分ける(青は使わない)。 */
.sn-pickup {
	background: #fafafb;
}
/* フィーチャー表示(§78-11 B案):登録が2件以下のあいだは、2カラムの大きめカードで
   「選ばれた枠」の特別感を出す(中央寄せ・最大幅を絞って余白がスカスカに見えないように)。
   3件以上になればテンプレート側でこのクラスが外れ、通常グリッドに自動復帰する。 */
.sn-top__grid--feature {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	gap: 28px;
}
/* 大きめカードに合わせて文字もひと回り大きく(通常カード16px/16.5pxより強く)。 */
.sn-pickup .sn-top__grid--feature .sn-card__title {
	font-size: 18px;
}
.sn-pickup .sn-top__grid--feature .sn-card__price {
	font-size: 18px;
}
.sn-pickup .sn-top__grid--feature .sn-card__loc {
	font-size: 13px;
}

/* トップのカードは情報階層を強調(§78 E):スタジオ名(強)→価格(太字・主役)→エリア(小さく薄く)。
   ※ 一覧(.sn-archive)には影響しないよう .sn-top 配下だけに適用。 */
.sn-top .sn-card__title {
	font-size: 16px;
	font-weight: 650;
}
.sn-top .sn-card__price {
	font-size: 16.5px;   /* 価格を主役に */
}
.sn-top .sn-card__loc {
	font-size: 12.5px;
	color: var(--sn-faint);
}

/* カード左上のバッジ(PR / NEW)。.sn-card__thumb を基準に絶対配置。 */
.sn-top .sn-card__thumb {
	position: relative;
}
/* バッジ(§78 E):インク色(ダークネイビー)地に白の細字・小さめ・レタースペーシングで上品に統一。 */
.sn-card__badge {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.5;
	color: #fff;
	background: rgba(19, 27, 46, .92); /* ダークネイビー(--sn-top-accent より締めた濃紺) */
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
/* NEW=新着(同トーンのダークネイビー・実色)。 */
.sn-card__badge--new {
	background: rgba(19, 27, 46, .92);
}
/* PR=広告(同トーンだが少し透けさせ、自然枠と区別しつつ世界観は揃える)。 */
.sn-card__badge--pr {
	background: rgba(19, 27, 46, .72);
}
/* 特徴タグ(トップカードのみ):公開日の代わりに既存テイストを最大2個・淡い小タグで添える。
   .sn-top 配下だけに適用=一覧(.sn-archive)のカードには影響しない。 */
.sn-top .sn-card__tags {
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sn-top .sn-card__tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid #e6e8ee;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--sn-muted);
	background: #fafafb;
	white-space: nowrap;
}

/* 「すべてのスタジオを見る」ボタン(ゴースト=ニュートラルな枠線・CTA系と同じピル)。 */
.sn-top__more {
	margin: 40px 0 0;
	text-align: center;
}

/* ============================================================
 * 共通ボタン .sn-btn のトップ用調整
 *  - 意匠(グラデ/ピル/光沢/影/ホバー)は詳細ページCVボタンと共有(sn.css 上部の .sn-cta__btn 群)。
 *  - トップでは「自動幅・中央寄せ」で使いたいので display と幅だけ上書きする。
 * ============================================================ */
.sn-top .sn-btn {
	display: inline-flex;
	width: auto;
	padding: 15px 32px;
	font-size: 15.5px;
}
/* ゴースト(二次導線=すべて見る等):塗らずニュートラルな枠線、ホバーでインク反転。 */
.sn-top .sn-btn--ghost {
	background: #fff;
	color: var(--sn-ink);
	border: 1px solid var(--sn-line);
	box-shadow: none;
}
/* ゴーストは光沢オーバーレイを出さない。 */
.sn-top .sn-btn--ghost::before {
	display: none;
}
.sn-top .sn-btn--ghost:hover {
	background: var(--sn-ink);
	color: #fff;
	border-color: var(--sn-ink);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}

/* ============================================================
 * ⑦ 使い方3ステップ(§78-10 再刷新=UIイラスト+subgrid完全整列+ミニ検索CTA)
 *   - 各カードは「1)UIイラスト 2)STEPラベル 3)タイトル 4)本文」の4行。
 *     親グリッドの行を subgrid で共有し、3枚の行位置・余白を完全に揃える(ジグザグ解消)。
 *   - UIイラストは同一 viewBox(320×190)のインラインSVG=アスペクト比が同じなので高さも必ず揃う。
 * ============================================================ */
/* オフホワイトの下地(白セクションとの明暗リズムを作る)。 */
.sn-steps--soft {
	background: #f7f7f5;
}
.sn-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* 各ステップ=白カード。中身は縦4行のグリッド(フォールバック=subgrid非対応でも図版の
   アスペクト比が同一なので、実質そろって見える)。 */
.sn-steps__item {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	align-content: start;
	padding: 20px 24px 28px;
	background: #fff;
	border: 1px solid var(--sn-line);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(26, 26, 26, .05);
}
/* subgrid 対応ブラウザ(現行の主要ブラウザは全対応):4行を3枚のカード横断で共有し、
   タイトルが折り返した場合なども全カードの本文開始位置が揃う=完全整列。 */
@supports (grid-template-rows: subgrid) {
	.sn-steps__item {
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;   /* 親の gap(28px)を行間に持ち込まない(行間は各要素の margin で管理) */
	}
}
/* カード間の矢印(PC=右向きシェブロン)。「次のステップへ流れる」ことを直感的に示す。 */
.sn-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -19px;   /* gap 28px の中央に置く */
	width: 9px;
	height: 9px;
	border-top: 2px solid #b9b9b3;
	border-right: 2px solid #b9b9b3;
	transform: translateY(-50%) rotate(45deg);
}
/* 1行目:UIイラスト(パネルにSVGを敷く)。装飾なので aria-hidden。
   §78-11:下地をカードの白よりはっきり暗く+内側に細い枠=図版が「薄く」見えないように。 */
.sn-steps__figure {
	display: block;
	margin-bottom: 20px;
	background: #f3f3ef;
	border: 1px solid #ebebe6;
	border-radius: 12px;
	overflow: hidden;
}
.sn-steps__figure svg {
	display: block;
	width: 100%;
	height: auto;   /* viewBox 比率(320:190)で全カード同じ高さになる */
}
/* SVG内の日本語テキストがページと同じ書体になるように。
   ページの字間(letter-spacing)を継承すると図版内の文字が想定より広がるため、字間を素の値へ戻す
   (textLength圧縮による縦伸びの再発防止=textLengthは使わず自然幅で収める)。 */
.sn-steps__figure text {
	font-family: inherit;
	letter-spacing: normal;
	word-spacing: normal;
}
/* 2行目:STEPラベル(小さく・レタースペーシングで上品に)。 */
.sn-steps__num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sn-faint);
	margin-bottom: 8px;
}
/* 3行目:タイトル。 */
.sn-steps__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--sn-ink);
	margin-bottom: 9px;
}
/* 4行目:本文。 */
.sn-steps__text {
	font-size: 14px;
	line-height: 1.85;
	color: var(--sn-muted);
}

/* ============================================================
 * ⑦末尾:ミニAI検索CTA(§78-10 C・案3=その場で一文入力できるCVカード)
 *   ボタン単体のCTAをやめ、「何をすればいいか(書く)/何が得られるか(合う順の候補)」が
 *   その場で完結する白カード。フォームは共通パーツ(.sn-aisearch)をヒーローと同じ意匠に上書き。
 * ============================================================ */
.sn-top-cta {
	max-width: 680px;
	margin: 60px auto 0;
	padding: 40px 44px 32px;
	background: #fff;
	border: 1px solid var(--sn-line);
	border-radius: 20px;
	/* ヒーローの検索カードと同系の多層の柔らかい影=ページ末尾でもう一度「主役」に見せる */
	box-shadow: 0 18px 44px rgba(26, 26, 26, .10), 0 4px 12px rgba(26, 26, 26, .05);
	text-align: center;
}
/* 行動コピー(見出し)。span+wbr 方式=読点の後だけで折り返す。 */
.sn-top-cta__title {
	margin: 0 0 22px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	color: var(--sn-ink);
}
.sn-top-cta__title span {
	display: inline-block;
	white-space: nowrap;
}
/* フォーム(共通パーツ)をヒーローと同じ主役の見た目に上書き(このカード内限定)。 */
.sn-top-cta .sn-aisearch {
	margin: 0;
}
.sn-top-cta .sn-aisearch__label {
	display: block;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sn-faint);
	text-align: left;
}
.sn-top-cta .sn-aisearch__row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.sn-top-cta .sn-aisearch__input {
	flex: 1 1 auto;
	min-height: 56px;
	padding: 16px 18px;
	font-size: 16px;   /* iOSで自動ズームしない下限 */
	color: var(--sn-ink);
	border: 1px solid #d4d9e0;
	border-radius: 12px;
	background: #fff;
}
.sn-top-cta .sn-aisearch__input:focus {
	outline: none;
	border-color: var(--sn-top-accent);
	box-shadow: 0 0 0 3px rgba(22, 51, 107, .12);
}
.sn-top-cta .sn-aisearch__btn {
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	padding: 15px 30px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	background: linear-gradient(105deg, #13306e 0%, #2563eb 55%, #38b6e6 100%);
	box-shadow: 0 4px 11px rgba(37, 99, 235, .24);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sn-top-cta .sn-aisearch__btn::before {
	content: "";
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.sn-top-cta .sn-aisearch__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .32);
}
/* 結果の約束(ボタンの下の一言)=小さく薄く・押し売りしない。 */
.sn-top-cta__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--sn-faint);
}

/* ============================================================
 * レスポンシブ(スマホ):余白を締めて検索窓を早く見せる・縦積み
 * ============================================================ */
@media (max-width: 768px) {
	.sn-top__section {
		padding: 64px 20px;   /* §78 D=SP 64px */
	}
	.sn-top__head {
		margin-bottom: 32px;
	}
	.sn-top__h2 {
		font-size: 24px;
	}
	/* ヒーローはモバイルで 78〜84vh 目安に(§78 B)。検索窓+例文チップまで収める。 */
	.sn-top-hero {
		min-height: 82vh;
		padding: clamp(96px, 18vh, 124px) 20px 72px;
	}
	/* SP:透過ヘッダー(最上部)の高さに合わせてピルの下げ量と文字を詰める。 */
	.sn-top-hero .sn-preopen {
		padding-top: clamp(58px, 9vh, 76px);
	}
	.sn-top-hero .sn-preopen__inner {
		padding: 6px 12px;
		font-size: .8rem;
		line-height: 1.5;
	}
	/* SPは告知文が2行に折り返す=ヒーロー本文(中央寄せ)と重ならないよう、
	   告知帯がある時だけ本文の開始位置をピルぶん下げる(soft-open期のみ・公開後は無発火)。 */
	.sn-top-hero:has(.sn-preopen) {
		padding-top: clamp(150px, 25vh, 196px);
	}
	.sn-top-hero__searchcard {
		padding: 18px 16px 20px;
	}
	/* 検索は縦積み=入力欄を大きく、ボタンは全幅で押しやすく。 */
	.sn-top-hero .sn-aisearch__row {
		flex-direction: column;
	}
	.sn-top-hero .sn-aisearch__btn {
		width: 100%;
	}
	/* スマホでは狭くて重なりやすいのでスクロールヒントは出さない。 */
	.sn-top-hero__scroll {
		display: none;
	}
	.sn-pledge {
		padding: 60px 20px;
	}
	/* タップ区切りの余白をやや詰める。 */
	.sn-tap__block {
		margin-top: 32px;
	}
	/* 3ステップは縦積み。矢印はカード下の中央で下向きに。 */
	.sn-steps__list {
		grid-template-columns: 1fr;
		gap: 36px;   /* 矢印の置き場ぶん、カード間を少し広く */
	}
	/* 縦積みでは subgrid の行共有をやめ、カードごとの自然な高さに戻す。 */
	.sn-steps__item {
		grid-template-rows: auto auto auto 1fr;
		grid-row: auto;
		padding: 16px 20px 24px;
	}
	.sn-steps__item:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -23px;   /* gap 36px の中央 */
		left: 50%;
		transform: translateX(-50%) rotate(135deg);   /* 下向きシェブロン */
	}
	.sn-steps__figure {
		margin-bottom: 16px;
	}
	/* ミニ検索CTA:余白を締め、入力とボタンは縦積み(ヒーローのSPと同じ操作感)。 */
	.sn-top-cta {
		margin-top: 44px;
		padding: 28px 20px 24px;
	}
	.sn-top-cta__title {
		font-size: 18px;
		margin-bottom: 18px;
	}
	.sn-top-cta .sn-aisearch__row {
		flex-direction: column;
	}
	.sn-top-cta .sn-aisearch__btn {
		width: 100%;
	}
}

/* ============================================================
 * ⑥ Studio-Naviの約束(§78-9 刷新=思想が伝わるエディトリアル2カラム)
 *   白カード3枚の羅列をやめる。左=見出し+思想リード(PCでスクロール追従)/
 *   右=細い罫線で区切った約束リスト(線画アイコン+タイトル+本文+補足1行)。
 *   カードグリッドが続く中盤に「雑誌の見開き」のような静かな変化をつくり、
 *   余白も最大(PC128px)にして、ここをページの思想的な聖域にする。
 * ============================================================ */
/* このセクションだけ余白を一段深く(セクション既定の112pxより強い=余白の強弱)。 */
.sn-top__section.sn-why {
	padding: 128px 24px;
}
.sn-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* 左=思想 / 右=約束リスト */
	gap: 24px 72px;
	align-items: start;
}
/* 左カラム:PCではスクロールに追従(右のリストを読む間も思想が視界に残る)。 */
.sn-why__head {
	position: sticky;
	top: 110px;
}
/* 思想リード:本文よりわずかに大きく・行間広く(宣言文として読ませる)。span+wbr で折り返し制御。 */
.sn-why__lead {
	margin: 22px 0 0;
	font-size: 15.5px;
	line-height: 2.05;
	color: var(--sn-muted);
}
.sn-why__lead span {
	display: inline-block;
	white-space: nowrap;
}
/* 右カラム:罫線区切りのリスト(上下を細い罫で締めるエディトリアル調)。 */
.sn-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--sn-line);
}
.sn-why__item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);   /* 左=線画アイコン / 右=本文 */
	gap: 20px;
	padding: 30px 0 32px;
	border-top: 1px solid var(--sn-line);
}
/* 線画アイコンのタイル(ごく薄い地+細枠・チップと同系の意匠)。 */
.sn-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--sn-line);
	border-radius: 13px;
	background: #fafafb;
	color: var(--sn-ink);
}
.sn-why__body {
	display: flex;
	flex-direction: column;
}
/* タイトル=見出しを主役に(§78-11:19px→21pxへ強化・インク黒)。 */
.sn-why__title {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.5;
	color: var(--sn-ink);
	margin-bottom: 8px;
}
/* 本文=1〜2行の短文(§78-11:14.5→15pxへ・読まれる文字サイズに)。 */
.sn-why__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--sn-muted);
}

/* ============================================================
 * ⑥+ できること(機能セクション・§79 → オーナーFB反映で刷新)
 *   白の約束と同化していたため、ネイビーを帯びたダーク地の「ショーケース」へ。
 *   宣言帯/オーナー帯(フラット#1a1a1a・文字だけのタイポグラフィ帯)とは
 *   「グラデ地+上端の青い残光+UIモックカード」で同じダークでも役割を描き分ける。
 *   カード=上部にUIモックSVG(3ステップと同じ viewBox 320×190・図版下地も同色 #f3f3ef)、
 *   下部に英字キッカー+タイトル+本文。写真・装飾は増やさない。
 * ============================================================ */
.sn-top__section.sn-can--dark {
	color: #fff;
	/* 上端に差し色ネイビー(#16336b)の残光をひと刷毛+ごく浅い明暗のグラデ(フラット黒との差別化) */
	background:
		radial-gradient(ellipse 90% 70% at 50% -12%, rgba(22, 51, 107, .40), transparent 68%),
		linear-gradient(180deg, #14161c 0%, #1b1e25 100%);
}
/* 見出しまわりをダーク地用に反転(共通の .sn-top__head 構造はそのまま使う)。 */
.sn-can--dark .sn-top__eyebrow { color: rgba(255, 255, 255, .45); }
.sn-can--dark .sn-top__h2 { color: #fff; }
.sn-can--dark .sn-top__h2::before { background: #fff; }
.sn-can--dark .sn-top__lead { color: rgba(255, 255, 255, .62); }

.sn-can__list {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
/* カード=ダーク地に浮くガラス調(薄い白ガラス+細い白枠+深い影)。
   上部のUIモックを全幅で見せるため padding は 0 にし、本文は __body 側で持つ。 */
.sn-can__item {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;               /* 図版をカードの角丸で確実にクリップ */
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
/* 1段目:UIモック(3ステップの図版と同じ「画面」の下地色=セクションを跨いで統一)。 */
.sn-can__figure {
	display: block;
	background: #f3f3ef;
}
.sn-can__figure svg {
	display: block;
	width: 100%;
	height: auto;   /* viewBox 比率(320:190)で3枚とも同じ高さに揃う */
}
/* SVG内の日本語テキストをページと同じ書体に(3ステップと同じ扱い)。
   ページの字間(letter-spacing)を継承すると図版内の文字が想定より広がって枠からはみ出すため、
   図版テキストだけ字間を素の値へ戻す(縦伸び=textLength圧縮の再発防止・textLengthは使わない)。 */
.sn-can__figure text {
	font-family: inherit;
	letter-spacing: normal;
	word-spacing: normal;
}
/* 2段目:本文ブロック。 */
.sn-can__body {
	display: flex;
	flex-direction: column;
	padding: 24px 26px 30px;
}
/* 英字キッカー(機能名ラベル・ダーク地の上品なレタースペーシング)。 */
.sn-can__kicker {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	margin-bottom: 10px;
}
.sn-can__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.55;
	color: #fff;
	margin-bottom: 10px;
}
.sn-can__text {
	font-size: 14.5px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .62);
}

/* ============================================================
 * ⑧ オーナー向け帯(§78-8 新設・フッター手前のダーク締め)
 *   宣言帯(.sn-pledge)と同系のダーク地。ただし「締め」なので宣言帯よりひと回り控えめに
 *   (余白 84→68px・見出し 最大30→最大25px)。改行制御は宣言帯と同じ span+wbr 方式。
 * ============================================================ */
.sn-owner {
	margin-left: calc(50% - 50vw);   /* SWELLの中央枠を突き抜けて全幅に(宣言帯と同じ手法) */
	margin-right: calc(50% - 50vw);
	padding: 68px 24px;              /* 宣言帯(84px)よりひと回り控えめ */
	background: var(--sn-ink);
	color: #fff;
}
.sn-owner__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.sn-owner__eyebrow {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
.sn-owner__title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 25px);   /* 宣言帯(最大30px)より控えめ */
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	color: #fff;
}
.sn-owner__text {
	margin: 16px auto 0;
	max-width: 620px;
	font-size: 14px;
	line-height: 1.95;
	color: rgba(255, 255, 255, .68);
}
/* 宣言帯と同じ改行制御:各 span を inline-block+nowrap にして span 内部では折り返さず、
   HTML 側の <wbr>(読点・意味の切れ目)でだけ改行する(PCは1行・狭幅で自然に折る)。 */
.sn-owner__text span {
	display: inline-block;
	white-space: nowrap;
}
.sn-owner__cta {
	margin: 26px 0 0;
}
/* ダーク地で使うゴーストボタンの補助クラス(オーナー帯のCTA専用)。
   既定の .sn-top .sn-btn--ghost は「白地・インク字」でダーク帯では重すぎる/沈むため、
   このクラスが付いたときだけ「透過地・白枠・白字」に上書きする(通常ページのゴーストは不変)。 */
.sn-top .sn-btn--ghost.sn-btn--on-dark {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .6);
	box-shadow: none;
}
.sn-top .sn-btn--ghost.sn-btn--on-dark:hover {
	background: #fff;
	color: var(--sn-ink);
	border-color: #fff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
}

/* ---- レスポンシブ(スマホ):約束は縦積み(思想→リスト)・オーナー帯は余白を締める ---- */
@media (max-width: 768px) {
	.sn-top__section.sn-why {
		padding: 76px 20px;   /* SP既定64pxより一段深く(強弱は維持) */
	}
	.sn-why__grid {
		grid-template-columns: 1fr;   /* SP=縦積み */
		gap: 0;
	}
	.sn-why__head {
		position: static;             /* SPでは追従させない */
		margin-bottom: 28px;
	}
	.sn-why__lead {
		font-size: 14.5px;
		line-height: 2;
	}
	.sn-why__item {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 14px;
		padding: 24px 0 26px;
	}
	.sn-why__icon {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}
	.sn-why__icon svg {
		width: 19px;
		height: 19px;
	}
	.sn-why__title {
		font-size: 18px;   /* §78-11:PC21pxに合わせてSPもひと回り強く */
	}
	/* できること:SPは1カラム縦積み。カードpaddingは0のまま・本文(__body)側の余白だけ詰める。 */
	.sn-can__list {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 28px;
	}
	.sn-can__body {
		padding: 20px 20px 26px;
	}
	.sn-can__title {
		font-size: 18px;
	}
	/* ピックアップのフィーチャー表示はSPでは1カラム(2カラムだとカードが窮屈になる)。 */
	.sn-top__grid--feature {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.sn-owner {
		padding: 52px 20px;
	}
}

/* =============================================================
 *  スタジオナビ利用者レビュー(内部レビュー・B-3 / §6-1(5))
 *  ※ 見た目の作り込みは後追いパス。ここでは崩れない最小限のスタイル。
 * ============================================================= */
.sn-ireviews__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 8px 0 20px;
}
.sn-ireviews__avg {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: #222;
}
.sn-ireviews__max { font-size: 16px; color: #999; font-weight: 400; }
.sn-ireviews__count { color: #555; font-size: 14px; }
.sn-ireviews__meta { display: flex; flex-direction: column; gap: 4px; }
.sn-ireviews__list { display: flex; flex-direction: column; gap: 16px; }
.sn-ireview {
	border: 1px solid var(--sn-line);
	border-radius: 10px;
	padding: 16px 18px;
	background: #fff;
}
.sn-ireview__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sn-ireview__stars {
	position: relative; display: inline-block; width: 84px; height: 15px;
	background: linear-gradient(#ddd, #ddd); -webkit-mask: repeating-linear-gradient(90deg,#000 0 15px,transparent 15px 18px);
}
.sn-ireview__starsfill { position: absolute; left: 0; top: 0; height: 100%; background: var(--sn-star); }
.sn-ireview__score { font-weight: 700; color: var(--sn-ink); }
.sn-ireview__scene {
	font-size: 12px; background: var(--sn-accent-soft); color: var(--sn-accent); border-radius: 999px; padding: 2px 10px; font-weight: 600;
}
.sn-ireview__meta { color: var(--sn-muted); font-size: 13px; display: flex; gap: 14px; margin: 6px 0 0; }
.sn-ireview__who { font-weight: 600; color: var(--sn-ink); }
.sn-ireview__axes {
	list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.sn-ireview__axes li {
	font-size: 12px; color: var(--sn-muted); background: var(--sn-bg-soft); border-radius: 6px; padding: 3px 8px;
}
.sn-ireview__axval { font-weight: 700; margin-left: 6px; color: var(--sn-ink); }
.sn-ireview__text { margin: 12px 0 0; color: #333; line-height: 1.7; }
.sn-ireview__imgs { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.sn-ireview__thumb img {
	width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block;
}
.sn-ireview__reply {
	margin: 12px 0 0; padding: 10px 14px; background: var(--sn-accent-soft); border-left: 3px solid var(--sn-accent); border-radius: 6px;
}
.sn-ireview__replylabel { font-size: 12px; font-weight: 700; color: var(--sn-accent); }
.sn-ireview__reply p { margin: 4px 0 0; color: #333; }
/* 「役に立った」投票ボタン(B-3拡張パス・§6-1(5)) */
.sn-ireview__foot { margin: 12px 0 0; }
.sn-ireview__helpful {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; font-size: 13px; line-height: 1;
	background: #fff; color: #555; border: 1px solid #d5d5d5; border-radius: 999px;
	cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.sn-ireview__helpful:hover { background: #f6f6f6; border-color: #bbb; }
.sn-ireview__helpful.is-on { background: var(--sn-accent-soft); border-color: var(--sn-accent); color: var(--sn-accent); font-weight: 700; }
.sn-ireview__helpcount {
	min-width: 18px; padding: 0 6px; font-size: 12px; font-weight: 700;
	background: rgba(0,0,0,.06); border-radius: 999px; text-align: center;
}
.sn-ireview__helpful.is-on .sn-ireview__helpcount { background: rgba(0,0,0,.08); }
.sn-ireviews__more > summary {
	cursor: pointer; color: #416; font-weight: 600; padding: 10px 0; list-style: revert;
}
.sn-ireviews__more[open] { display: flex; flex-direction: column; gap: 16px; }
.sn-ireviews__empty { color: #777; }
.sn-ireviews__cta { margin: 20px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sn-ireviews__writebtn {
	display: inline-block; background: #222; color: #fff; text-decoration: none;
	padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.sn-ireviews__writebtn:hover { background: #000; color: #fff; }
.sn-ireviews__ctanote { font-size: 12px; color: #999; }

/* =============================================================
 *  レビュー統合セクション(内部=主役 / 外部=参考)= B-3/§6-1(5) + Fable設計 2026-07-13
 * ============================================================= */
.sn-reviews-unified__h3 {
	font-size: 18px; font-weight: 700; color: #222; margin: 0 0 4px;
}
.sn-reviews-unified__intro { color: #777; font-size: 13px; margin: 0 0 16px; }
.sn-reviews-unified__primary { margin-bottom: 8px; }

/* 外部=参考ブロック:背景を落として「補助情報」に見せる(内部レビューと主従を付ける)。 */
.sn-reviews-unified__external {
	margin-top: 28px; padding: 18px 20px; background: #f7f8fa;
	border: 1px solid #eceef1; border-radius: 12px;
}
.sn-reviews-unified__h3--sub {
	font-size: 15px; color: #555; margin-bottom: 12px;
}
/* 外部の総合=数字テキスト1行(★グラフィックは使わない=内部★との混同防止)。 */
.sn-extsum { margin: 12px 0 6px; color: #444; font-size: 14px; }
.sn-extsum strong { color: #222; font-size: 16px; }

/* 外部合算の注記(参考・小さめ)。 */
.sn-extsum__note { margin: 2px 0 6px; color: #999; font-size: 12px; }

/* 「あなたのレビュー」ボックス(投稿済み会員向け・論点B/Fable設計)。 */
.sn-ireviews__mine {
	margin: 20px 0 0; padding: 14px 16px; border: 1px solid #e3e6ea;
	border-radius: 12px; background: #fafbfc;
}
.sn-ireviews__mine-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sn-ireviews__mine-title { font-weight: 700; color: #222; }
.sn-ireviews__mine-badge {
	font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
}
.sn-ireviews__mine-badge.is-pending  { background: #fff3e0; color: #b26a00; }
.sn-ireviews__mine-badge.is-approved { background: #e7f6ec; color: #1a7f37; }
.sn-ireviews__mine-badge.is-rejected { background: #f0f0f0; color: #666; }
.sn-ireviews__mine-desc { margin: 0 0 12px; color: #555; font-size: 14px; }

/* =============================================================
 *  レビュー主従改訂(ヒーロー総合評価 / スタジオナビ=検証済みソース)= Fable設計 2026-07-13
 * ============================================================= */
/* ヒーロー(総合評価・主役)= デザイントークンに統一 */
.sn-revhero { margin: 4px 0 24px; }
.sn-revhero__label { display: block; font-size: 13px; color: var(--sn-muted); font-weight: 700; margin-bottom: 4px; }
.sn-revhero__main { display: flex; align-items: center; gap: 16px; }
.sn-revhero__avg { font-size: 48px; font-weight: 800; line-height: 1; color: var(--sn-ink); letter-spacing: -.01em; }
.sn-revhero__max { font-size: 18px; color: var(--sn-faint); font-weight: 400; }
.sn-revhero__meta { display: flex; flex-direction: column; gap: 6px; }
.sn-revhero__count { color: var(--sn-muted); font-size: 14px; }
.sn-revhero__note { margin: 10px 0 0; color: var(--sn-faint); font-size: 12.5px; }

/* ソース内訳(スタジオナビ=検証済み展開 / 外部=参考チップ) */
.sn-revsrc { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
/* スタジオナビ=検証済みソース。ブランド差し色(青)で「信頼できる自サイトの声」を表現(星の金と役割を分ける)。 */
.sn-revsrc__sn {
	border: 1px solid #d3e0fb; border-radius: var(--sn-radius); background: var(--sn-accent-soft);
	overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.sn-revsrc__sn[open], .sn-revsrc__sn:hover { border-color: #b9d0f7; box-shadow: 0 2px 10px rgba( 37, 99, 235, .08 ); }
.sn-revsrc__head {
	display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none;
}
.sn-revsrc__sn > summary::-webkit-details-marker { display: none; }
.sn-revsrc__badge {
	font-size: 11px; font-weight: 700; color: #fff; background: var(--sn-accent);
	border-radius: 999px; padding: 3px 10px; white-space: nowrap; letter-spacing: .02em;
}
.sn-revsrc__badge--muted { color: var(--sn-muted); background: #e5e7eb; }
.sn-revsrc__name { font-weight: 700; color: var(--sn-ink); flex: 1; }
.sn-revsrc__val { font-weight: 700; color: var(--sn-ink); white-space: nowrap; }
.sn-revsrc__val small { color: var(--sn-faint); font-weight: 400; font-size: 12px; }
.sn-revsrc__val--none { color: var(--sn-faint); font-weight: 400; }
.sn-revsrc__caret { color: var(--sn-accent); transition: transform .15s ease; }
.sn-revsrc__sn[open] .sn-revsrc__caret { transform: rotate(180deg); }
.sn-revsrc__body { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.sn-revsrc__sn--empty { background: #fafbfc; border-color: var(--sn-line); }
.sn-revsrc__sn--empty .sn-revsrc__head { cursor: default; }

/* 投稿導線(常時表示・ヒーローにしない) */
.sn-revcta { margin-top: 20px; }