/**
 * LP Templates List by SG Group — 公開ページのスタイル。
 *
 * 方針:
 * - 外部フォント・外部アセットを一切読み込まない（要件 §14 / §38）。
 * - 状態は色だけで示さず、文言・下線・アイコン文字・aria 属性を併用する（要件 §37）。
 * - 360 / 390 / 768 / 1024 / 1440px で横スクロールを発生させない。
 * - 400件超のカードを想定し、content-visibility と contain-intrinsic-size で描画量を抑える。
 * - ハンドル: sg-group-lptl-public（Plugin::PUBLIC_STYLE_HANDLE）。
 */

.sg-group-lptl-root {
	/*
	 * 公開ページは常に「明るい」配色に固定する。
	 *
	 * ここは販売ページであり、購買意欲を高める鮮やかで明るいデザインにする。
	 * 管理画面（ダーク可）とは完全に別物であり、公開ページを黒くしてはならない。
	 * OSのダークモード（prefers-color-scheme）で自動的に暗転させることも禁止
	 * （本ファイルにダーク用メディアクエリを置かない）。テーマのCSS変数も継承しない。
	 * いずれの色もテキスト/背景のコントラスト比 4.5:1 以上を確保する。
	 */
	--sg-group-lptl-color-text: #17212b;
	--sg-group-lptl-color-muted: #667582;
	--sg-group-lptl-color-background: #ffffff;
	--sg-group-lptl-color-surface: #f4f7f9;
	--sg-group-lptl-color-border: #dce5ec;
	--sg-group-lptl-color-accent: #126fe5;
	--sg-group-lptl-color-accent-text: #ffffff;
	--sg-group-lptl-color-accent-hover: #0b57bd;
	--sg-group-lptl-color-focus: #0b57bd;
	--sg-group-lptl-color-navy: #082746;
	--sg-group-lptl-color-cyan: #32b7d8;
	--sg-group-lptl-color-notice-background: #fff8e5;
	--sg-group-lptl-color-notice-border: #b8860b;
	--sg-group-lptl-color-error: #8a1c1c;
	--sg-group-lptl-color-error-background: #fdeded;

	/* ヒーローの鮮やかな青→ネイビーのグラデーション（シアンを差し色に）。 */
	--sg-group-lptl-hero-gradient: linear-gradient(135deg, #126fe5 0%, #0b57bd 45%, #082746 100%);

	/* OSのダークモードでもUAが暗い既定スタイルを当てないよう明示的に light 固定。 */
	color-scheme: light;

	/* 余白・角丸・字送り。 */
	--sg-group-lptl-space-xs: 0.25rem;
	--sg-group-lptl-space-sm: 0.5rem;
	--sg-group-lptl-space-md: 1rem;
	--sg-group-lptl-space-lg: 1.75rem;
	--sg-group-lptl-space-xl: 3rem;
	--sg-group-lptl-radius: 0.5rem;
	--sg-group-lptl-line-height: 1.75;

	/* グリッド。カード最小幅はビューポート幅を超えないよう min() で頭打ちにする。 */
	--sg-group-lptl-card-min: 18rem;
	--sg-group-lptl-card-gap: 1.25rem;

	/* カードの推定高さ（content-visibility 用。実測に依存しないおおよその値）。 */
	--sg-group-lptl-card-height: 34rem;

	/* システムフォントのみ。外部フォントは読み込まない。 */
	font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	line-height: var(--sg-group-lptl-line-height);
	/* リテラル・フォールバック付き: テーマがCSS変数を潰しても暗転しないよう二重に固定する。 */
	color: var(--sg-group-lptl-color-text, #17212b);
	background-color: var(--sg-group-lptl-color-background, #ffffff);

	/* 横スクロールの防止。子要素は決してこの幅を超えない。 */
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

.sg-group-lptl-root *,
.sg-group-lptl-root *::before,
.sg-group-lptl-root *::after {
	box-sizing: border-box;
}

.sg-group-lptl-root [hidden] {
	display: none !important;
}

.sg-group-lptl-root img {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------
 * レイアウト幅モード（public_layout_width）
 *
 * プラグインルート（.sg-group-lptl-root）内だけで幅を制御し、テーマの
 * header / nav / footer / body / html へは一切干渉しない。いずれのモードでも
 * overflow-x: clip を保険として付与し、子要素が横スクロールを生まないようにする。
 * 確認済みブレークポイント: 360 / 390 / 768 / 1024 / 1440px。
 * -------------------------------------------------------------------- */

/*
 * 幅モードは3種類。既定は「ビューポート幅」。
 *
 * 幅の制御はすべて .sg-group-lptl-root 配下だけで完結させ、body / html の overflow、
 * テーマのヘッダー・グローバルメニュー・フッターへは一切干渉しない。
 * 内側のコンテンツ幅は .sg-group-lptl-shell が担う（最大1440px・中央寄せ・両端ガター）。
 */

/* テーマ幅のまま。ルートは広げない。shell がテーマ本文幅内で中央寄せする。 */
.sg-group-lptl-root.is-width-theme {
	max-width: 100%;
	margin-inline: auto;
}

/* 広め。ルートを最大1280pxまで広げ、はみ出しを防ぐ。 */
.sg-group-lptl-root.is-width-wide {
	max-width: min(1280px, 100vw - 32px);
	margin-inline: auto;
	overflow-x: clip;
}

/*
 * ビューポート幅いっぱいへブレイクアウト（既定）。
 *
 * 負のマージン + width:100vw でテーマ本文幅の外へ安全に広げる。ルート自身には
 * 左右パディングを付けず（ヒーローの背景を画面端まで届かせるため）、ガターは
 * shell 側で確保する。overflow-x: clip でルート内の横はみ出しを封じる
 * （body / html の overflow は変更しない）。
 */
/*
 * ビューポート幅ブレイクアウト（既定）。
 *
 * 純粋CSSの calc(50%-50vw) 方式は、テーマの本文ラッパー（例 Twenty Twenty-Four の
 * .wp-block-post-content は左右104pxのパディングを持つ）の内側にショートコードが
 * 置かれると、パーセントマージンが親のパディング量に影響されて期待どおりに解決せず、
 * 104px の横はみ出し（横スクロール）を生む。テーマは無数にあり、この量は事前に
 * 分からないため、JavaScript で実測して正確に打ち消す方式を採る。
 *
 * - JS未実行時（フォールバック）: max-width:100% のままブレイクアウトしない。
 *   横スクロールは決して発生しない（安全側）。SSRのカードはそのまま読める。
 * - JS実行時: public.js が .is-breakout を付与し、ルートの実際の左オフセットぶんだけ
 *   負マージンで引き戻し、幅を clientWidth（スクロールバーを除いた実幅）に合わせる。
 *   これにより 100vw とスクロールバーの差による横スクロールも起きない。
 * いずれも .sg-group-lptl-root 配下だけで完結し、body/html/テーマへは干渉しない。
 */
.sg-group-lptl-root.is-width-viewport {
	max-width: 100%;
}

.sg-group-lptl-root.is-width-viewport.is-breakout {
	width: var(--sg-group-lptl-breakout-width, 100%);
	max-width: none;
	margin-left: var(--sg-group-lptl-breakout-margin, 0);
	margin-right: 0;
	overflow-x: clip;
}

/*
 * 内側コンテンツの最大幅コンテナ。
 *
 * 画面幅に応じて最大1440px、常に両端へ最低24pxのガターを残して中央寄せする。
 * どの幅モードでも共通で使えるよう、ルートの幅指定とは独立させている。
 */
.sg-group-lptl-root .sg-group-lptl-shell {
	width: min(1440px, 100% - 48px);
	margin-inline: auto;
}

/* テーマ幅・広めモードでは、ルート自体が既に幅を持つため shell は full にする。 */
.sg-group-lptl-root.is-width-theme .sg-group-lptl-shell,
.sg-group-lptl-root.is-width-wide .sg-group-lptl-shell {
	width: 100%;
}

.sg-group-lptl-root .sg-group-lptl-shell-top {
	margin-top: var(--sg-group-lptl-space-md);
}

/* -----------------------------------------------------------------------
 * パンくず（横一列）— 要件 §4
 *
 * これまで専用CSSが無く、ブラウザ既定の <ol><li> が縦積み＋リストマーカー付きで
 * 表示されていた。プラグイン root 配下だけに限定して横一列のパンくずへ整える
 * （テーマ全体の ol/li・body/html・テーマメニューには一切干渉しない）。
 * -------------------------------------------------------------------- */

.sg-group-lptl-root .sg-group-lptl-breadcrumbs {
	margin: 0 0 var(--sg-group-lptl-space-sm);
	font-size: 0.85rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-root .sg-group-lptl-breadcrumbs__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.sg-group-lptl-root .sg-group-lptl-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	margin: 0;
	list-style: none;
}

/*
 * 区切りは PHP が明示的な <li class="__separator">›</li> として出す（要件 §3）。
 * CSS未適用でも矢印が見えるようにするため、擬似要素には頼らない。
 */
.sg-group-lptl-root .sg-group-lptl-breadcrumbs__separator {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	margin: 0 0.5rem;
	list-style: none;
	color: var(--sg-group-lptl-color-muted);
	user-select: none;
}

.sg-group-lptl-root .sg-group-lptl-breadcrumbs__link {
	color: var(--sg-group-lptl-color-accent);
	text-decoration: none;
}

.sg-group-lptl-root .sg-group-lptl-breadcrumbs__link:hover {
	text-decoration: underline;
}

.sg-group-lptl-root .sg-group-lptl-breadcrumbs__current {
	color: var(--sg-group-lptl-color-muted);
	/* 末尾（現在ページ）が長い場合のみ省略。狭幅でも縦積みにはしない。 */
	max-width: 60vw;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------
 * フォーカス
 * -------------------------------------------------------------------- */

.sg-group-lptl-root :focus-visible {
	outline: 3px solid var(--sg-group-lptl-color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------
 * ボタン・リンクの共通形
 * -------------------------------------------------------------------- */

.sg-group-lptl-cta,
.sg-group-lptl-buy-button,
.sg-group-lptl-preview-link,
.sg-group-lptl-favorite-button,
.sg-group-lptl-reset,
.sg-group-lptl-dialog-close,
.sg-group-lptl-dialog-view {
	/* 44px のタップ領域を確保する（要件 §37）。 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: var(--sg-group-lptl-space-sm) var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);
	color: var(--sg-group-lptl-color-text);
	font: inherit;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.sg-group-lptl-cta-primary,
.sg-group-lptl-buy-button {
	border-color: var(--sg-group-lptl-color-accent);
	background-color: var(--sg-group-lptl-color-accent);
	color: var(--sg-group-lptl-color-accent-text);
	font-weight: 700;
}

.sg-group-lptl-cta-primary:hover,
.sg-group-lptl-buy-button:hover:not([disabled]) {
	background-color: var(--sg-group-lptl-color-accent-hover);
	border-color: var(--sg-group-lptl-color-accent-hover);
}

.sg-group-lptl-preview-link {
	text-decoration: underline;
}

/*
 * 無効状態は色だけで示さない。カーソル形状と不透明度、加えて disabled 属性そのものが
 * 支援技術へ「操作できない」ことを伝える。
 */
.sg-group-lptl-buy-button[disabled],
.sg-group-lptl-buy-button[aria-busy="true"] {
	opacity: 0.65;
	cursor: not-allowed;
}

.sg-group-lptl-buy-button[aria-busy="true"]::before {
	content: "⋯";
	margin-inline-end: var(--sg-group-lptl-space-xs);
}

/*
 * 購入ボタン内のレイアウト（要件 §4・§8）。ラベル｜区切り｜Stripe公式wordmark を横並びにする。
 * wordmark は装飾（aria-hidden）。公式アセットの色・比率は変えない（filter・幅圧縮なし）。
 * 濃色ボタンには白 wordmark を用いる。
 *
 * ルートスコープ + !important でテーマの `img { width:100% !important }` を上書きし、
 * wordmark がボタン幅いっぱいに巨大化するのを防ぐ（実測: 265×111px → 46×19px）。
 */
.sg-group-lptl-root .sg-group-lptl-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	max-height: 52px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.2;
}

.sg-group-lptl-root .sg-group-lptl-buy-button__label {
	white-space: nowrap;
}

.sg-group-lptl-root .sg-group-lptl-buy-button__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 18px;
	background-color: currentColor;
	opacity: 0.4;
}

.sg-group-lptl-root .sg-group-lptl-buy-button__wordmark {
	flex: 0 0 auto;
	display: block;
	/* 幅を固定し height:auto で公式の縦横比（360:151）を保つ。max-height は安全弁。 */
	width: 46px !important;
	max-width: 46px !important;
	height: auto !important;
	max-height: 20px !important;
	object-fit: contain;
	/* 公式マークの色を保持する（filter を掛けない）。 */
	filter: none !important;
}

.sg-group-lptl-root .sg-group-lptl-buy-not-ready {
	margin: var(--sg-group-lptl-space-xs) 0 0;
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-muted, #64748b);
}

/*
 * not-ready 時のコンパクトな無効ボタン（§5）。wordmark も divider も出さないため、
 * 通常ボタンと同じ高さ上限（44–52px）に収まる。落ち着いた muted 色で「押せない」ことを示す。
 */
.sg-group-lptl-root .sg-group-lptl-buy-button--unavailable {
	gap: 0;
	background-color: var(--sg-group-lptl-color-muted, #64748b);
	border-color: var(--sg-group-lptl-color-muted, #64748b);
	color: #ffffff;
	cursor: not-allowed;
}

/* 狭幅でも wordmark が潰れないよう、必要なら折り返す。 */
@media (max-width: 24rem) {
	.sg-group-lptl-buy-button {
		flex-wrap: wrap;
		gap: 6px;
	}
}

.sg-group-lptl-favorite-button[aria-pressed="true"] {
	border-color: var(--sg-group-lptl-color-accent);
	background-color: var(--sg-group-lptl-color-surface);
	font-weight: 700;
}

/* 色に頼らず、記号でも「お気に入り済み」を示す。 */
.sg-group-lptl-favorite-button::before {
	content: "☆";
	margin-inline-end: var(--sg-group-lptl-space-xs);
}

.sg-group-lptl-favorite-button[aria-pressed="true"]::before {
	content: "★";
}

/* -----------------------------------------------------------------------
 * ヒーロー
 * -------------------------------------------------------------------- */

/* ヒーローは画面端まで届く鮮やかな青→ネイビーのグラデーションバンド。 */
/*
 * スリム化したヒーロー（要件 §10）。
 * ファーストビューで「400種・価格・買い切り・登録不要・主要CTA」を素早く見せ、
 * Hero下のカテゴリ見出しが少し覗く程度の高さに抑える（上下 padding を圧縮）。
 */
.sg-group-lptl-hero {
	margin-bottom: var(--sg-group-lptl-space-lg);
	padding: clamp(1.2rem, 0.7rem + 1.9vw, 2.3rem) 0 clamp(1.2rem, 0.7rem + 1.7vw, 2.1rem);
	background: var(--sg-group-lptl-hero-gradient);
	color: #ffffff;
}

/* ヒーロー内は左右2カラム（コピー / 料金カード + モックアップ）。 */
.sg-group-lptl-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);
	align-items: center;
}

.sg-group-lptl-hero-copy {
	min-width: 0;
}

.sg-group-lptl-hero-title {
	margin: 0 0 var(--sg-group-lptl-space-sm);
	font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.sg-group-lptl-hero-lead {
	margin: 0 0 var(--sg-group-lptl-space-md);
	font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.1rem);
	max-width: 38rem;
	color: rgba(255, 255, 255, 0.92);
}

/* 料金は白背景のカードで強調する。 */
.sg-group-lptl-hero-price-card {
	background-color: #ffffff;
	color: var(--sg-group-lptl-color-text);
	border-radius: calc(var(--sg-group-lptl-radius) * 1.6);
	padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
	box-shadow: 0 24px 48px -24px rgba(8, 39, 70, 0.55);
	margin-bottom: var(--sg-group-lptl-space-md);
}

.sg-group-lptl-hero-price {
	margin: 0 0 var(--sg-group-lptl-space-xs);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-hero-price .sg-group-lptl-price-amount {
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
	font-weight: 800;
	color: var(--sg-group-lptl-color-navy);
	letter-spacing: -0.01em;
}

.sg-group-lptl-price-prefix,
.sg-group-lptl-price-suffix {
	font-size: 0.9rem;
	color: var(--sg-group-lptl-color-muted);
}

/*
 * 購入体験フロー・ビジュアルカード（要件 §12）。
 * 「選ぶ → Stripeで決済 → すぐ受け取る」を意味的アイコン＋接続矢印で視覚化する。
 * ファイル名一覧・スケルトン・偽UIは廃止。装飾SVGは aria-hidden。
 */
.sg-group-lptl-hero-flow {
	background-color: #ffffff;
	color: var(--sg-group-lptl-color-text);
	border-radius: calc(var(--sg-group-lptl-radius) * 1.4);
	box-shadow: 0 20px 44px -26px rgba(8, 39, 70, 0.5);
	padding: 0.9rem 1rem;
	margin-top: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-hero-flow-heading {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
}

.sg-group-lptl-hero-flow-steps {
	display: flex;
	align-items: stretch;
	gap: 0.35rem;
	margin: 0 0 0.55rem;
	padding: 0;
	list-style: none;
}

.sg-group-lptl-hero-flow-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.5rem 0.35rem;
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: 0.6rem;
	text-align: center;
	background-color: var(--sg-group-lptl-color-surface);
}

.sg-group-lptl-hero-flow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 0.55rem;
	color: var(--sg-group-lptl-color-accent);
	background-color: #eef5ff;
}

.sg-group-lptl-hero-flow-icon svg {
	width: 1.3rem;
	height: 1.3rem;
}

.sg-group-lptl-hero-flow-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.sg-group-lptl-hero-flow-title {
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.3;
}

.sg-group-lptl-hero-flow-note {
	font-size: 0.68rem;
	color: var(--sg-group-lptl-color-muted);
	line-height: 1.3;
}

.sg-group-lptl-hero-flow-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--sg-group-lptl-color-border);
}

.sg-group-lptl-hero-flow-arrow svg {
	width: 1.1rem;
	height: 1.1rem;
}


/* 縦幅が厳しい狭幅では矢印を回転（横→縦の流れ）。 */
@media (max-width: 30rem) {
	.sg-group-lptl-hero-flow-steps {
		flex-direction: column;
	}

	.sg-group-lptl-hero-flow-step {
		flex-direction: row;
		text-align: start;
		gap: 0.6rem;
	}

	.sg-group-lptl-hero-flow-arrow {
		justify-content: center;
		transform: rotate(90deg);
	}
}

.sg-group-lptl-hero-actions,
.sg-group-lptl-footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-group-lptl-space-sm);
	margin: 0 0 var(--sg-group-lptl-space-md);
}

.sg-group-lptl-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-group-lptl-space-sm);
	margin: var(--sg-group-lptl-space-md) 0 0;
	padding: 0;
	list-style: none;
}

/* ヒーロー（濃色背景）上の信頼バッジは半透明の白で。 */
.sg-group-lptl-hero .sg-group-lptl-trust-item {
	padding: var(--sg-group-lptl-space-xs) var(--sg-group-lptl-space-sm);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--sg-group-lptl-radius);
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 0.82rem;
}

/* 通常セクション（白背景）上の信頼バッジ。 */
.sg-group-lptl-trust-item {
	padding: var(--sg-group-lptl-space-xs) var(--sg-group-lptl-space-sm);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
	font-size: 0.85rem;
}

.sg-group-lptl-hero-price-card .sg-group-lptl-trust-note,
.sg-group-lptl-hero-price-card .sg-group-lptl-hero-tax-note {
	margin: var(--sg-group-lptl-space-xs) 0 0;
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-hero-note {
	margin: var(--sg-group-lptl-space-md) 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46rem;
}

.sg-group-lptl-trust-note {
	margin: 0 0 var(--sg-group-lptl-space-sm);
	font-size: 0.85rem;
	color: var(--sg-group-lptl-color-muted);
	max-width: 46rem;
}

/* 濃色ヒーロー上のCTA。プライマリは白地・青文字、ゴーストは白枠。 */
.sg-group-lptl-cta-on-dark.sg-group-lptl-cta-primary {
	background-color: #ffffff;
	color: var(--sg-group-lptl-color-accent);
}

.sg-group-lptl-cta-on-dark.sg-group-lptl-cta-primary:hover {
	background-color: #eef4ff;
	color: var(--sg-group-lptl-color-accent-hover);
}

.sg-group-lptl-cta-ghost {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.sg-group-lptl-cta-ghost:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

/* スマホでは1カラムへ。モックアップは料金カードの下。 */
@media (max-width: 48rem) {
	.sg-group-lptl-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--sg-group-lptl-space-lg);
	}

	.sg-group-lptl-hero-mockup {
		display: none;
	}
}

/* -----------------------------------------------------------------------
 * 架空サンプルのディスクロージャ
 * -------------------------------------------------------------------- */

/*
 * 免責は最下部（フッター内）の控えめな脚注として出す（要件 §8）。
 * 12〜13px・補助色・薄い境界線・薄いグレー背景。display:none や極端な opacity は使わない。
 */
.sg-group-lptl-disclosure-footnote {
	margin: var(--sg-group-lptl-space-lg) 0 0;
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-disclosure-heading {
	margin: 0 0 var(--sg-group-lptl-space-xs);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sg-group-lptl-color-text);
}

.sg-group-lptl-disclosure-footnote .sg-group-lptl-disclosure-text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.7;
}

/* 旧・上部の大きな注意枠、カード内の全文は廃止（互換のため残置）。 */
.sg-group-lptl-disclosure-page {
	margin: 0 0 var(--sg-group-lptl-space-lg);
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
	font-size: 0.85rem;
	color: var(--sg-group-lptl-color-muted);
}

/* カードには小さな「デザインサンプル」バッジだけを添える。 */
.sg-group-lptl-card-sample-badge {
	margin: 0 0 var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-card-sample-badge span {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: 999px;
	font-size: 0.7rem;
	color: var(--sg-group-lptl-color-muted);
	background-color: var(--sg-group-lptl-color-surface);
}

/* スマホ表示プレビューの補助リンク（crawl 可能・控えめ）。 */
.sg-group-lptl-preview-link-mobile {
	font-size: 0.85rem;
}

.sg-group-lptl-noscript {
	margin: 0 0 var(--sg-group-lptl-space-lg);
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-notice-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-notice-background);
}

/* -----------------------------------------------------------------------
 * カテゴリ
 * -------------------------------------------------------------------- */

.sg-group-lptl-categories {
	margin-bottom: var(--sg-group-lptl-space-lg);
}

.sg-group-lptl-categories-heading,
.sg-group-lptl-faq-heading {
	margin: 0 0 var(--sg-group-lptl-space-md);
	font-size: 1.4rem;
}

.sg-group-lptl-category-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--sg-group-lptl-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-group-lptl-category-item {
	margin: 0;
	list-style: none;
}

/*
 * カテゴリは本物の button（クリックで絞り込み）。要件 §9。
 * 44px 以上の操作領域・hover/focus-visible/active・aria-pressed の押下状態・件数バッジ。
 */
.sg-group-lptl-category-card {
	display: flex;
	align-items: center;
	gap: var(--sg-group-lptl-space-sm);
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
}

.sg-group-lptl-category-card:hover {
	border-color: var(--sg-group-lptl-color-accent);
	box-shadow: 0 8px 20px -14px rgba(8, 39, 70, 0.5);
}

.sg-group-lptl-category-card:focus-visible {
	outline: 3px solid var(--sg-group-lptl-color-focus);
	outline-offset: 2px;
}

.sg-group-lptl-category-card:active {
	transform: translateY(1px);
}

.sg-group-lptl-category-card[aria-pressed="true"] {
	border-color: var(--sg-group-lptl-color-accent);
	box-shadow: inset 0 0 0 1px var(--sg-group-lptl-color-accent);
	background-color: #eef5ff;
}

/*
 * 業種固有アイコン（要件 §4.1）。同梱 SVG を currentColor で色付けし、業種ごとに
 * 異なるアクセント色＋淡い背景で表示する。全業種同一の青四角の使い回しは廃止。
 */
.sg-group-lptl-category-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.6rem;
	color: var(--sg-group-lptl-cat-accent, #126fe5);
	background-color: var(--sg-group-lptl-cat-accent-bg, #eef5ff);
}

.sg-group-lptl-category-svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* 業種別アクセント（アイコン色＋淡い背景）。 */
.sg-group-lptl-category-accent-indigo { --sg-group-lptl-cat-accent: #4338ca; --sg-group-lptl-cat-accent-bg: #eef0ff; }
.sg-group-lptl-category-accent-rose { --sg-group-lptl-cat-accent: #be185d; --sg-group-lptl-cat-accent-bg: #fdeef5; }
.sg-group-lptl-category-accent-teal { --sg-group-lptl-cat-accent: #0f766e; --sg-group-lptl-cat-accent-bg: #e6f6f4; }
.sg-group-lptl-category-accent-amber { --sg-group-lptl-cat-accent: #b45309; --sg-group-lptl-cat-accent-bg: #fdf1e2; }
.sg-group-lptl-category-accent-blue { --sg-group-lptl-cat-accent: #1d4ed8; --sg-group-lptl-cat-accent-bg: #eaf1ff; }
.sg-group-lptl-category-accent-green { --sg-group-lptl-cat-accent: #15803d; --sg-group-lptl-cat-accent-bg: #e9f6ee; }
.sg-group-lptl-category-accent-slate { --sg-group-lptl-cat-accent: #334155; --sg-group-lptl-cat-accent-bg: #eef1f5; }
.sg-group-lptl-category-accent-orange { --sg-group-lptl-cat-accent: #c2410c; --sg-group-lptl-cat-accent-bg: #fdeee5; }
.sg-group-lptl-category-accent-cyan { --sg-group-lptl-cat-accent: #0e7490; --sg-group-lptl-cat-accent-bg: #e5f4f8; }
.sg-group-lptl-category-accent-violet { --sg-group-lptl-cat-accent: #6d28d9; --sg-group-lptl-cat-accent-bg: #f2ecff; }
.sg-group-lptl-category-accent-sky { --sg-group-lptl-cat-accent: #0369a1; --sg-group-lptl-cat-accent-bg: #e5f2fb; }
.sg-group-lptl-category-accent-emerald { --sg-group-lptl-cat-accent: #047857; --sg-group-lptl-cat-accent-bg: #e6f6f0; }
.sg-group-lptl-category-accent-pink { --sg-group-lptl-cat-accent: #db2777; --sg-group-lptl-cat-accent-bg: #fdeef6; }

.sg-group-lptl-category-body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	min-width: 0;
	flex: 1 1 auto;
}

.sg-group-lptl-category-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.sg-group-lptl-category-count {
	display: inline-block;
	min-width: 1.5rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sg-group-lptl-color-accent);
	background-color: #eef5ff;
	text-align: center;
}

.sg-group-lptl-category-description {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-category-arrow {
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid var(--sg-group-lptl-color-muted);
	border-right: 2px solid var(--sg-group-lptl-color-muted);
	transform: rotate(45deg);
}

.sg-group-lptl-category-card[aria-pressed="true"] .sg-group-lptl-category-arrow {
	border-color: var(--sg-group-lptl-color-accent);
}

.sg-group-lptl-category-description {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sg-group-lptl-color-muted);
}

/* -----------------------------------------------------------------------
 * 検索・絞り込み
 * -------------------------------------------------------------------- */

.sg-group-lptl-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--sg-group-lptl-space-md);
	margin-bottom: var(--sg-group-lptl-space-md);
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
}

.sg-group-lptl-field {
	display: flex;
	flex-direction: column;
	gap: var(--sg-group-lptl-space-xs);
	min-width: 0;
}

.sg-group-lptl-field-search {
	grid-column: 1 / -1;
}

.sg-group-lptl-field-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-search,
.sg-group-lptl-filter,
.sg-group-lptl-sort {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: var(--sg-group-lptl-space-sm);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);
	color: var(--sg-group-lptl-color-text);
	font: inherit;
	font-size: 1rem;
}

.sg-group-lptl-field-checkbox {
	flex-direction: row;
	align-items: center;
	gap: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-favorites-only {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	flex: 0 0 auto;
}

.sg-group-lptl-field-checkbox .sg-group-lptl-field-label {
	font-weight: 400;
	color: var(--sg-group-lptl-color-text);
	/* チェックボックス本体が小さくてもラベルまで含めて 44px のタップ領域とする。 */
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.sg-group-lptl-field-reset {
	justify-content: flex-end;
}

.sg-group-lptl-results-count {
	margin: 0 0 var(--sg-group-lptl-space-md);
	font-size: 0.9rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-no-results {
	margin: 0 0 var(--sg-group-lptl-space-lg);
	padding: var(--sg-group-lptl-space-md);
	border: 1px dashed var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	text-align: center;
}

/* -----------------------------------------------------------------------
 * グリッドとカード
 * -------------------------------------------------------------------- */

.sg-group-lptl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sg-group-lptl-card-min)), 1fr));
	gap: var(--sg-group-lptl-card-gap);
	margin-bottom: var(--sg-group-lptl-space-xl);
	/* スクロールで飛び先が見出しに隠れないようにする。 */
	scroll-margin-top: var(--sg-group-lptl-space-md);
}

.sg-group-lptl-card {
	display: flex;
	flex-direction: column;
	gap: var(--sg-group-lptl-space-sm);
	min-width: 0;
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);

	/*
	 * 400件超のカードを一度に描画するため、画面外のカードのレイアウト・描画を省く。
	 * contain-intrinsic-size を併記しないとスクロールバーが暴れるため必須。
	 */
	content-visibility: auto;
	contain-intrinsic-size: auto var(--sg-group-lptl-card-height);
}

.sg-group-lptl-card-title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.4;
}

.sg-group-lptl-card-id {
	margin: 0;
	font-size: 0.75rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-card-id-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sg-group-lptl-card-figure {
	margin: 0;
}

.sg-group-lptl-card-image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
}

/* プレビュー画像が無い場合の鮮やかなCSSフォールバック（黒い無地を出さない）。 */
.sg-group-lptl-card-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 16 / 10;
	width: 100%;
	border-radius: var(--sg-group-lptl-radius);
	border: 1px solid var(--sg-group-lptl-color-border);
	background:
		radial-gradient(circle at 78% 18%, rgba(50, 183, 216, 0.35) 0%, rgba(50, 183, 216, 0) 55%),
		var(--sg-group-lptl-hero-gradient);
	color: #ffffff;
}

.sg-group-lptl-card-fallback-mark {
	width: 34%;
	height: 8px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.85);
}

.sg-group-lptl-card-fallback-id {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.95);
}

.sg-group-lptl-card-caption {
	margin-top: var(--sg-group-lptl-space-xs);
	font-size: 0.75rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-card-meta {
	display: grid;
	gap: var(--sg-group-lptl-space-xs);
	margin: 0;
	font-size: 0.8rem;
}

.sg-group-lptl-card-meta-row {
	display: grid;
	grid-template-columns: minmax(4.5rem, auto) 1fr;
	gap: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-card-meta-label {
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-card-meta-value {
	margin: 0;
	min-width: 0;
}

.sg-group-lptl-card-description {
	margin: 0;
	font-size: 0.9rem;
}

/* 画像SEOの可視説明（要件 §6.3）。初期HTMLに含め、展開して読める。 */
.sg-group-lptl-card-details {
	margin: 0;
	font-size: 0.85rem;
}

.sg-group-lptl-card-details-summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sg-group-lptl-accent, #1d4ed8);
}

.sg-group-lptl-card-details-body {
	display: flex;
	flex-direction: column;
	gap: var(--sg-group-lptl-space-xs);
	margin-top: var(--sg-group-lptl-space-xs);
}

.sg-group-lptl-card-detail-row {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.sg-group-lptl-card-detail-heading {
	font-weight: 600;
}

.sg-group-lptl-card-detail-text {
	color: var(--sg-group-lptl-muted, #475569);
}

.sg-group-lptl-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-group-lptl-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-group-lptl-card-tag {
	padding: 0 var(--sg-group-lptl-space-sm);
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sg-group-lptl-space-xs);
	margin: 0;
	/* 価格はカード下端のアクションの直前へ寄せる。 */
	margin-top: auto;
}

.sg-group-lptl-card-price .sg-group-lptl-price-amount {
	font-size: 1.15rem;
	font-weight: 700;
}

.sg-group-lptl-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-card-actions .sg-group-lptl-buy-button {
	flex: 1 1 12rem;
}

.sg-group-lptl-card-buy-note {
	margin: 0;
	font-size: 0.75rem;
	color: var(--sg-group-lptl-color-muted);
}

.sg-group-lptl-card-error {
	margin: 0;
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-error);
}

/* 内容が空のときは領域を作らない（aria-live の空読み上げも避ける）。 */
.sg-group-lptl-card-error:empty {
	display: none;
}

.sg-group-lptl-card-error:not(:empty) {
	padding: var(--sg-group-lptl-space-sm);
	border: 1px solid var(--sg-group-lptl-color-error);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-error-background);
}

/* -----------------------------------------------------------------------
 * FAQ
 * -------------------------------------------------------------------- */

.sg-group-lptl-faq {
	margin-bottom: var(--sg-group-lptl-space-xl);
	/*
	 * FAQへジャンプしたとき、WordPress管理バー・sticky ヘッダーの裏へ隠れないよう
	 * 余白を確保する。public.js が実測した高さを --sg-group-lptl-scroll-offset へ
	 * 設定する（未設定時は 96px を既定に使う）。要件 §6。
	 */
	scroll-margin-top: var(--sg-group-lptl-scroll-offset, 96px);
}

/* FAQ 見出しへ到達したことが分かる、控えめな一時ハイライト（点滅なし）。要件 §9。 */
.sg-group-lptl-root .sg-group-lptl-faq:focus {
	outline: none;
}

.sg-group-lptl-root .sg-group-lptl-faq.is-jump-target .sg-group-lptl-faq-heading {
	animation: sg-group-lptl-faq-highlight 1.5s ease-out 1;
	border-radius: var(--sg-group-lptl-radius);
}

@keyframes sg-group-lptl-faq-highlight {
	from {
		background-color: #eef5ff;
		box-shadow: 0 0 0 6px #eef5ff;
	}

	to {
		background-color: transparent;
		box-shadow: 0 0 0 6px transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-group-lptl-root .sg-group-lptl-faq.is-jump-target .sg-group-lptl-faq-heading {
		animation: none;
	}
}

.sg-group-lptl-faq-items {
	display: grid;
	gap: var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-faq-item {
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);
}

.sg-group-lptl-faq-question {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--sg-group-lptl-space-sm) var(--sg-group-lptl-space-md);
	font-weight: 700;
	cursor: pointer;
}

.sg-group-lptl-faq-answer {
	padding: 0 var(--sg-group-lptl-space-md) var(--sg-group-lptl-space-md);
}

.sg-group-lptl-faq-answer p {
	margin: 0;
	font-size: 0.9rem;
}

/* -----------------------------------------------------------------------
 * フッター
 * -------------------------------------------------------------------- */

.sg-group-lptl-footer {
	padding-top: var(--sg-group-lptl-space-lg);
	border-top: 1px solid var(--sg-group-lptl-color-border);
}

.sg-group-lptl-footer-cta {
	margin: 0 0 var(--sg-group-lptl-space-md);
	font-size: 1.1rem;
	font-weight: 700;
}

.sg-group-lptl-footer-note {
	margin: 0 0 var(--sg-group-lptl-space-sm);
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-muted);
	max-width: 52rem;
}

.sg-group-lptl-internal-link-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-group-lptl-space-md);
	margin: var(--sg-group-lptl-space-md) 0;
	padding: 0;
	list-style: none;
}

.sg-group-lptl-internal-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sg-group-lptl-color-accent);
	font-size: 0.9rem;
}

/* -----------------------------------------------------------------------
 * 決済完了パネル
 * -------------------------------------------------------------------- */

.sg-group-lptl-checkout-panel {
	margin-bottom: var(--sg-group-lptl-space-lg);
	padding: var(--sg-group-lptl-space-lg);
	border: 2px solid var(--sg-group-lptl-color-accent);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-surface);
}

.sg-group-lptl-checkout-panel__heading {
	margin: 0 0 var(--sg-group-lptl-space-sm);
	font-size: 1.3rem;
}

.sg-group-lptl-checkout-panel__status,
.sg-group-lptl-checkout-panel__email {
	margin: 0 0 var(--sg-group-lptl-space-sm);
}

.sg-group-lptl-checkout-panel__email:empty {
	display: none;
}

.sg-group-lptl-checkout-panel__download {
	margin: 0;
}

.sg-group-lptl-checkout-panel__download:empty {
	display: none;
}

.sg-group-lptl-download-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--sg-group-lptl-space-sm) var(--sg-group-lptl-space-lg);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-accent);
	color: var(--sg-group-lptl-color-accent-text);
	font-weight: 700;
	text-decoration: none;
}

.sg-group-lptl-checkout-cancel,
.sg-group-lptl-checkout-error {
	margin-bottom: var(--sg-group-lptl-space-lg);
	padding: var(--sg-group-lptl-space-md);
	border: 1px solid var(--sg-group-lptl-color-notice-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-notice-background);
}

/* -----------------------------------------------------------------------
 * プレビューダイアログ
 * -------------------------------------------------------------------- */

.sg-group-lptl-dialog {
	width: min(96vw, 75rem);
	max-width: 96vw;
	max-height: 92vh;
	padding: 0;
	border: 1px solid var(--sg-group-lptl-color-border);
	border-radius: var(--sg-group-lptl-radius);
	background-color: var(--sg-group-lptl-color-background);
	color: var(--sg-group-lptl-color-text);
	overflow: hidden;
}

.sg-group-lptl-dialog::backdrop {
	background-color: rgba(10, 12, 16, 0.72);
}

.sg-group-lptl-dialog-inner {
	display: flex;
	flex-direction: column;
	max-height: 92vh;
}

.sg-group-lptl-dialog-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sg-group-lptl-space-sm);
	padding: var(--sg-group-lptl-space-md);
	border-bottom: 1px solid var(--sg-group-lptl-color-border);
}

.sg-group-lptl-dialog-title {
	margin: 0;
	font-size: 1.05rem;
	min-width: 0;
}

.sg-group-lptl-dialog-views {
	display: flex;
	gap: var(--sg-group-lptl-space-sm);
	padding: var(--sg-group-lptl-space-sm) var(--sg-group-lptl-space-md);
	border-bottom: 1px solid var(--sg-group-lptl-color-border);
}

/* 選択中は色に加えて太字と下線で示す。 */
.sg-group-lptl-dialog-view[aria-pressed="true"] {
	border-color: var(--sg-group-lptl-color-accent);
	background-color: var(--sg-group-lptl-color-accent);
	color: var(--sg-group-lptl-color-accent-text);
	font-weight: 700;
	text-decoration: underline;
}

.sg-group-lptl-dialog-figure {
	margin: 0;
	padding: var(--sg-group-lptl-space-md);
	overflow: auto;
	background-color: var(--sg-group-lptl-color-surface);
}

.sg-group-lptl-dialog-image {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	background-color: var(--sg-group-lptl-color-background);
}

/* モバイル表示では実機に近い幅で見せる。 */
.sg-group-lptl-dialog-figure[data-view="mobile"] .sg-group-lptl-dialog-image {
	max-width: min(390px, 100%);
}

.sg-group-lptl-dialog-image:not([src]) {
	display: none;
}

.sg-group-lptl-dialog-caption {
	margin-top: var(--sg-group-lptl-space-sm);
	font-size: 0.8rem;
	color: var(--sg-group-lptl-color-muted);
	text-align: center;
}

/* -----------------------------------------------------------------------
 * ユーティリティ
 * -------------------------------------------------------------------- */

.sg-group-lptl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------
 * 画面幅への対応（360 / 390 / 768 / 1024 / 1440px で横スクロールを出さない）
 * -------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.sg-group-lptl-root {
		--sg-group-lptl-card-min: 100%;
		--sg-group-lptl-card-gap: 1rem;
	}

	.sg-group-lptl-card-actions .sg-group-lptl-buy-button,
	.sg-group-lptl-card-actions .sg-group-lptl-preview-link,
	.sg-group-lptl-card-actions .sg-group-lptl-favorite-button {
		flex: 1 1 100%;
	}
}

@media (min-width: 64rem) {
	.sg-group-lptl-root {
		--sg-group-lptl-card-min: 20rem;
	}
}

/* -----------------------------------------------------------------------
 * 動きの抑制
 * -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sg-group-lptl-root *,
	.sg-group-lptl-dialog * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * ダークモード用のメディアクエリは意図的に置かない。
 *
 * 以前ここに @media (prefers-color-scheme: dark) があり、OSがダークモードの
 * 閲覧者に対して公開ページ全体を黒（#14171c）へ反転させていた。公開販売ページは
 * 常に明るい配色でなければならないため、この自動反転を完全に廃止した。
 * :root の color-scheme: light と合わせ、OS設定に関わらず明るい表示を保証する。
 */