/*
 * SCENE COLLECTION の商品カード。
 *
 * 前提: このカードは親テーマ JIN の本文領域 (.post-content 等) の中に置かれる。
 * JIN は本文中の p / ul / li / 見出しに独自装飾を当てているため、素で書くと
 * カードの中身がテーマ側のスタイルに乗っ取られる (2026-07-28 実測:
 * ラベルの padding が 0 0 0 25px に、小見出しにオレンジの縦棒が付いた)。
 * そのため冒頭で「テーマの装飾を打ち消す」ブロックを置き、その後に自前の見た目を作る。
 *
 * 見出しタグ (h2-h4) は使わない。目次プラグインが記事の目次にカード内の小見出しを
 * 拾ってしまうため。理由の詳細は class-product-card.php のコメントを参照。
 */

/* ==================================================================
 * 0. 設計トークン
 *
 * 色・文字サイズ・行間・角丸は、必ずここの名前を経由して使う。
 * 各所に直接 #hex や rem を書かない。理由は 2 つ:
 *   (1) 同じ役割の値が少しずつ違う形で増えるのを止める
 *       (抽出時点で色 31 種・文字サイズ 14 段・行間 10 段あった)
 *   (2) 配色や寸法を直すとき、1 箇所の変更が全体に効くようにする
 *
 * このブロックを作った時点では **値を 1 つも変えていない**。
 * 抽出の前後で描画結果が同一であることを機械的に検証してある
 * (var() を定義値に戻すと元ファイルと 1 バイト違わず一致する)。
 * 値そのものの見直し (近すぎる色の統合・コントラストの是正) は別の作業。
 * ================================================================== */

:root {
	/* Plan B のみ: 写真を主役にする紙色と、購入先を示す濃いオリーブ。 */
	--sc-planb-surface: #f7f7f2;
	--sc-planb-accent: #5b623b;
	--sc-planb-accent-hover: #464d2c;
	--sc-planb-line: #d9ddcc;
	--sc-planb-title: 3rem;
	--sc-planb-photo-panel: rgba(255, 255, 255, 0.94);
	/* ---- 紙・面 ---- */
	--sc-paper: #fff;             /* カード・タイルの地 */
	--sc-paper-sub: #fafafa;      /* 取扱終了カードの地 */
	--sc-paper-chip: #f2f2f5;     /* ラベル (用途・レベル) の地 */
	--sc-paper-media: #f4f4f6;    /* 商品画像の下地 */
	--sc-paper-hover: #faf7f0;    /* 保存ボタンに触れたときの地 */
	--sc-paper-th: #f7f7f9;       /* 記事内の表の見出し行の地 (殻側で使う) */
	--sc-panel: #1f1c19;          /* SCENE WEAR 予告の濃い地 */
	--sc-panel-title: #f3efe8;    /* 濃い地の上の見出し */
	--sc-panel-text: #d8d2c8;     /* 濃い地の上の本文 */
	--sc-toast: #2b2b31;          /* 失敗の知らせの地 */

	/* ---- 文字 ----
	 *
	 * 弱い文字色は 1 段しか持たない。白地で読める濃さ (4.5:1) を満たそうとすると、
	 * 薄い灰色は互いにほぼ同じ色に収束するため、明度で 2 段 3 段の階層は作れない
	 * (2026-08-12 に計算で確認: #767680 / #8b8b95 / #a3a3ac の 3 段はいずれも
	 *  補正すると #72727f 付近の 1 色になった)。情報の強弱は文字の大きさで付ける。
	 */
	--sc-ink: #1a1a1f;            /* 本文の既定色 */
	--sc-ink-strong: #1a1a1a;     /* ボタンの文字・順位バッジの地 */
	--sc-ink-2: #45454d;          /* 小見出し・一言 */
	--sc-ink-3: #55555f;          /* ラベルの文字・保存ボタンの文字 */
	--sc-ink-muted: #727280;      /* 補助 (ブランド名・取得日時・件数)。白地で 4.74:1 */
	--sc-ink-nav: #7a6e71;        /* サイト共通の枠 (ヘッダー・ナビ) の文字。記事側と同色 / 4.89:1 */
	--sc-ink-placeholder: #8a8a90; /* 画像が無いときの文字。下地 #f4f4f6 に対し 3.12:1 */

	/* ---- 罫・枠 ---- */
	--sc-line: #dcdce1;           /* カードの枠 */
	--sc-line-soft: #ededf0;      /* 区切りの罫 */
	--sc-line-tile: #e3e3e6;      /* 入口タイル・編集部セレクトの枠 */
	--sc-line-input: #d7d7dd;     /* 入力欄の枠 */
	--sc-line-hover: #c9c9d1;     /* 保存ボタンに触れたときの枠 */
	--sc-line-article: #e8e8ec;   /* 記事の見出し罫・表の枠 (殻側で使う) */
	--sc-line-overlay: rgba(0, 0, 0, 0.08); /* 画像に重ねる的の枠 */
	--sc-line-swatch: rgba(0, 0, 0, 0.12); /* 推し色の丸の枠 */

	/* ---- アクセント (SCENE COLLECTION の黄) ----
	 *
	 * --sc-accent と白の差は 1.92:1 しかない (2026-08-12 に計算で確認)。
	 * 読みやすさの基準 (小さい文字 4.5:1 / 大きい文字 3.0:1) には届かない。
	 *
	 * そのうえで、区画見出しの英字 (.sc-heading__en) とヒーローの eyebrow
	 * (.sc-hero__eyebrow) は **この黄のまま残すことをユーザーが選択して確定させた**
	 * (2026-08-12、選択肢ボタンによる確定 = CLAUDE.md のデザイン確定ルールの正式な確定)。
	 * 意匠を優先した判断なので、「基準に届かないから」という理由だけで
	 * 後から濃くしないこと。変えるときは改めてユーザーの確定を取る。
	 *
	 * 新しく白地に黄の系統で文字や線を置くときは --sc-accent-ink を使う (5.54:1)。
	 * 上の 2 箇所は確定済みの例外であって、既定の作法ではない。
	 */
	--sc-accent: #f4ae22;         /* 面。文字に使うのは確定済みの 2 箇所だけ */
	--sc-accent-hover: #e2a01e;   /* 黄の面に触れたとき */
	--sc-accent-active: #d0921b;  /* 黄の面を押している間 */
	--sc-accent-ink: #8a6100;     /* 白地でも読める黄の系統 (5.54:1) */
	--sc-accent-bg: #fff7e8;      /* 保存済みの地 */
	--sc-wear-paper: #f6efe9;      /* Scene Wearの紙色 */
	--sc-wear-ink: #342b28;        /* Scene Wearの濃い文字 */
	--sc-wear-muted: #756862;      /* Scene Wearの補助文字 */
	--sc-wear-line: #e4d9d1;       /* Scene Wearの罫線 */
	--sc-wear-accent-ink: #8a4b45; /* Scene Wearのローズ。白地でも読める濃さ */
	--sc-wear-accent-soft: #f8e9e4; /* Scene Wearの淡いローズ */
	--sc-focus: var(--sc-accent-ink); /* 操作位置を示す輪郭。どの地の上でも 5:1 以上 */

	/* ---- 購入導線 (Amazon 由来の橙) ----
	 *
	 * 一覧では、この橙の面が画面を占めすぎている疑いがある (2026-08-13 実測:
	 * 390px の一覧で購入ボタンが画面の 3.8〜7.6%。マイベストの同種のボタンは
	 * 52x40px で 1 個あたり 0.6%)。塗りを弱めた型を見比べるために、
	 * 面・線・文字を別々の名前で持つ。どれを採るかは未確定。
	 */
	--sc-buy: #ff9900;            /* 購入ボタン */
	--sc-buy-hover: #e88b00;      /* 購入ボタンに触れたとき */
	--sc-buy-active: #d47f00;     /* 押している間。触れたときよりもう一段落とす */
	--sc-buy-ink: #a35a00;        /* 白地・淡橙の地でも読める橙の文字 (白地 5.22:1) */
	--sc-buy-soft: #fff1dd;       /* 弱く塗るときの地 */
	--sc-buy-line: #d47f00;       /* 枠線。白地 3.07:1 (的の輪郭に要る 3:1 を満たす) */

	/* ---- 状態 ---- */
	--sc-warn-ink: #8a5300;       /* 取扱終了などの注意文 */
	--sc-warn-bg: #fff4e5;        /* 注意文の地 */
	--sc-pro: #2f855a;            /* 良いところの中黒 */
	--sc-con: #b7791f;            /* 気になるところの中黒 */

	/* ---- 重ね・影 ---- */
	--sc-overlay-paper: rgba(255, 255, 255, 0.92); /* 画像に重ねる的の地 */
	--sc-shadow-overlay: 0 1px 3px rgba(0, 0, 0, 0.16); /* 同上の影 */

	/* ---- 文字サイズ (抽出時点で 14 段。多すぎるので後で整理する) ---- */
	/*
	 * 10px の段は廃止した (2026-08-12)。和文は欧文より小さい字が読みにくく、
	 * 10px に置いていたのは規約で表示が要る価格の取得日時だった。
	 * 「読ませる必要があるものを、読めない大きさに置く」ことになっていたため。
	 */
	--sc-text-2xs: 0.6875rem;     /* 11px。ここが最小 */
	--sc-text-xs: 0.75rem;        /* 12px */
	--sc-text-sm: 0.8125rem;      /* 13px */
	--sc-text-base: 0.875rem;     /* 14px */
	--sc-text-md: 0.9375rem;      /* 15px */
	--sc-text-lg: 1rem;           /* 16px */
	--sc-text-xl: 1.0625rem;      /* 17px */
	--sc-text-2xl: 1.1875rem;     /* 19px */
	--sc-text-3xl: 1.25rem;       /* 20px */
	--sc-text-4xl: 1.375rem;      /* 22px */
	--sc-text-5xl: 1.5rem;        /* 24px */
	--sc-text-6xl: 1.75rem;       /* 28px */
	--sc-text-7xl: 2rem;          /* 32px */

	/* ---- 行間 (和文の読み物は 1.7〜2.0。1 行で収まる的はそれ未満でよい) ---- */
	--sc-lh-none: 1;              /* バッジなど 1 行の的 */
	--sc-lh-tight: 1.1;           
	--sc-lh-snug: 1.4;            
	--sc-lh-normal: 1.5;          
	--sc-lh-card: 1.55;           
	--sc-lh-relaxed: 1.6;         
	--sc-lh-list: 1.65;           
	--sc-lh-loose: 1.7;           
	--sc-lh-body: 1.8;            
	--sc-lh-prose: 1.9;           /* 読み物の本文 */

	/* ---- 角丸 ---- */
	--sc-radius-sm: 6px;          
	--sc-radius-md: 8px;          
	--sc-radius-lg: 10px;         
	--sc-radius-xl: 12px;         
	--sc-radius-pill: 999px;      
	--sc-radius-circle: 50%;      
}

/* ------------------------------------------------------------------
 * 1. テーマ装飾の打ち消し (カードの内側だけ)
 * ------------------------------------------------------------------ */

.sc-card p,
.sc-card ul,
.sc-card li,
.sc-card div {
	background: none;
	border: 0;
	box-shadow: none;
}

.sc-card p,
.sc-card ul {
	margin: 0;
	padding: 0;
}

.sc-card li {
	background: none;
	margin: 0;
	padding: 0;
}

.sc-card li::before,
.sc-card li::after,
.sc-card p::before,
.sc-card p::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------
 * 2. カード本体
 * ------------------------------------------------------------------ */

.sc-cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin: 24px 0;
}

.sc-card {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-xl);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 28px 0;
	overflow: hidden;
	padding: 22px;
}

.sc-cards .sc-card {
	margin: 0;
}

.sc-card--discontinued {
	background: var(--sc-paper-sub);
	border-style: dashed;
}

.sc-card__media {
	text-align: center;
}

.sc-card__media img {
	height: auto;
	max-width: 100%;
}

.sc-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ------------------------------------------------------------------
 * 3. 見出し・ラベル
 * ------------------------------------------------------------------ */

.sc-card .sc-card__brand {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-normal);
}

/* 詳細ページの商品名。一覧と同じ理由で 1.5 → 1.6 に上げる (19px と大きいぶん一覧より控えめ)。 */
.sc-card .sc-card__title {
	font-size: var(--sc-text-2xl);
	font-weight: 700;
	line-height: var(--sc-lh-relaxed);
}

.sc-card .sc-card__title a {
	border: 0;
	color: inherit;
	text-decoration: none;
}

.sc-card .sc-card__title a:hover {
	text-decoration: underline;
}

.sc-card .sc-card__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
}

.sc-card .sc-card__labels li {
	background: var(--sc-paper-chip);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-ink-2);
	font-size: var(--sc-text-xs);
	line-height: var(--sc-lh-none);
	padding: 7px 12px;
}

.sc-card .sc-card__notice {
	background: var(--sc-warn-bg);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-warn-ink);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-loose);
	padding: 10px 12px;
}

/*
 * 安全上の注意。取扱終了の注意文 (sc-card__notice) と同じ注意の色で、
 * 「選んだ理由」より先に置く (2026-08-26、専用の欄に分離)。
 */
.sc-card .sc-card__safety {
	background: var(--sc-warn-bg);
	border-left: 3px solid var(--sc-warn-ink);
	border-radius: var(--sc-radius-sm);
	padding: 10px 12px;
}

.sc-card .sc-card__safety .sc-card__section-title,
.sc-card .sc-card__safety p {
	color: var(--sc-warn-ink);
}

.sc-card .sc-card__safety p + p {
	margin-top: 6px;
}

/* ------------------------------------------------------------------
 * 4. 本文ブロック
 * ------------------------------------------------------------------ */

.sc-card .sc-card__section-title {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: var(--sc-lh-snug);
	margin-bottom: 6px;
}

.sc-card .sc-card__section p {
	font-size: var(--sc-text-md);
	line-height: var(--sc-lh-body);
}

.sc-card .sc-card__section ul {
	font-size: var(--sc-text-md);
	line-height: var(--sc-lh-body);
	list-style: disc outside;
	margin: 0;
	padding-left: 1.35em;
}

/*
 * テーマ側の li は padding-left が入っており (JIN の本文リスト装飾)、
 * それが残ると中黒と本文が離れて字下げだけが深くなる。ここで打ち消す。
 *
 * display: list-item が要る理由 (2026-07-28 実測):
 * JIN は本文の li に display: block を当てている。list-style-type: disc が
 * 効いていても、display が list-item でないとブラウザは中黒を描画しない。
 * 「リストに見えるのに点が出ない」状態はこれが原因だった。
 */
.sc-card .sc-card__section li {
	display: list-item;
	margin: 0 0 2px;
	padding-left: 0;
}

.sc-card .sc-card__pros li::marker {
	color: var(--sc-pro);
}

.sc-card .sc-card__cons li::marker {
	color: var(--sc-con);
}

/*
 * 検証情報 (実際に使ったのか / 誰が / いつ)。
 *
 * 12px・行間 1.6 だった。企画書がいちばん大事にしている「実使用にもとづく評価か」
 * の表明が、カードの中でいちばん読みにくい文字になっていた (2026-08-12 実測)。
 * 読ませる文章は 13px・行間 1.7 以上 (和文の目安) に引き上げる。
 */
.sc-card .sc-card__verified {
	border-top: 1px solid var(--sc-line-soft);
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	padding-top: 14px;
}

/* ------------------------------------------------------------------
 * 5. 価格・在庫 (Amazon API 接続時のみ表示)
 * ------------------------------------------------------------------ */

.sc-card .sc-card__price {
	font-size: var(--sc-text-xl);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
}

.sc-card .sc-card__fetched {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin-top: 4px;
}

/* ------------------------------------------------------------------
 * 6. 購入ボタン
 * ------------------------------------------------------------------ */

.sc-card .sc-card__button {
	background: var(--sc-buy);
	border: 0;
	border-radius: var(--sc-radius-md);
	color: var(--sc-ink-strong);
	display: block;
	font-weight: 700;
	line-height: var(--sc-lh-snug);
	padding: 15px 20px;
	text-align: center;
	text-decoration: none;
}

.sc-card .sc-card__button:hover,
.sc-card .sc-card__button:focus {
	background: var(--sc-buy-hover);
	color: var(--sc-ink-strong);
	text-decoration: none;
}

/*
 * キーボードで辿っている人に、いまどこにいるかを輪郭で示す。
 * 地の色を変えるだけでは不十分で、色の差を見分けにくい人には
 * 「触れている」のか「そこにいる」のかが分からない。
 * :focus ではなく :focus-visible にするのは、マウスで押した直後に
 * 輪郭が出ると誤操作のように見えるため (キーボード操作時だけ出る)。
 */
.sc-card .sc-card__button:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 2px;
}

/* 押している間の手応え。触れたときよりもう一段暗くする */
.sc-card .sc-card__button:active {
	background: var(--sc-buy-active);
}

/* ------------------------------------------------------------------
 * 7. 広告表記
 * ------------------------------------------------------------------ */

/*
 * 広告表記。景品表示法まわりで求められる表示なので、読めなければ意味がない。
 * 12px だったものを 13px に上げる (2026-08-12 実測での見直し)。
 */
.sc-disclosure {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin: 12px 0 28px;
}

/*
 * 価格・在庫の断り書き。アソシエイト規約が求める「表示している価格・在庫は
 * 取得時点のもので、変わることがある」旨の表示。価格を出したページにだけ出る。
 * 広告表記のすぐ上に並ぶので、同じ小ささ・同じ色にして 1 つのまとまりに見せる。
 */
/* 価格・在庫の断り書き。アソシエイト規約が求める表示なので、こちらも同じ扱い。 */
.sc-price-disclaimer {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin: 12px 0 0;
}

.sc-price-disclaimer + .sc-disclosure {
	margin-top: 4px;
}

/* ==================================================================
 * 8. 一覧用の型 (レシピ)
 *
 * 実地調査 (2026-07-29) で女性向けサイトの一覧が収束していた 3 形。
 * 1 つに決め打ちせず、並べて見比べられるように全部持つ。
 *   .sc-list--grid     2 列グリッド
 *   .sc-list--list     左サムネの横並びリスト
 *   .sc-list--ranking  順位バッジ付きグリッド
 * ================================================================== */

.sc-heading {
	margin: 32px 0 16px;
}

/*
 * 英字を黄のままにするのは 2026-08-12 のユーザー確定 (選択肢ボタン)。
 * 白との差は 1.92:1 で読みやすさの基準には届かないが、意匠を優先する判断。
 * この直下に同じ内容の和文見出し (.sc-heading__ja、9.50:1) が必ず出るので、
 * 英字が読み取れなくても意味は伝わる。詳細は :root のアクセントの節。
 */
.sc-heading .sc-heading__en {
	color: var(--sc-accent);
	font-size: var(--sc-text-6xl);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: var(--sc-lh-tight);
	margin: 0;
}

.sc-heading .sc-heading__ja {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: var(--sc-lh-snug);
	margin: 4px 0 0;
}

.sc-list {
	margin: 0 0 24px;
}

.sc-list--grid,
.sc-list--ranking {
	display: grid;
	gap: 20px 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.sc-list--grid,
	.sc-list--ranking {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 18px;
	}
}

.sc-list--list {
	display: flex;
	flex-direction: column;
}

/* ---- 共通 ---- */

.sc-mini,
.sc-mini p,
.sc-mini ul,
.sc-mini li {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.sc-mini li::before,
.sc-mini p::before {
	content: none;
	display: none;
}

.sc-mini {
	color: inherit;
	display: flex;
	flex-direction: column;
}

/*
 * グリッドの 1 行の中でカードの高さが揃うよう、本文を伸ばして
 * 購入ボタンを常に下端に置く (ボタンの位置がガタつく問題への対応)。
 */
.sc-mini.is-ended {
	opacity: 0.72;
}

.sc-mini .sc-mini__thumb {
	border: 0;
	display: block;
	position: relative;
	text-decoration: none;
}

.sc-mini .sc-mini__media {
	background: var(--sc-paper-media);
	border-radius: var(--sc-radius-md);
	display: block;
	overflow: hidden;
	padding-top: 100%;
	position: relative;
}

.sc-mini .sc-mini__media img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.sc-mini .sc-mini__media--empty {
	align-items: center;
	color: var(--sc-ink-placeholder);
	display: flex;
	font-size: var(--sc-text-6xl);
	font-weight: 700;
	justify-content: center;
	padding-top: 0;
}

.sc-mini .sc-mini__media--empty::before {
	content: "";
	display: block;
	padding-top: 100%;
}

/* 順位バッジ。調査したサイトはどれも画像の左上に載せていた */
.sc-mini .sc-mini__rank {
	align-items: center;
	background: var(--sc-ink-strong);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-paper);
	display: flex;
	font-size: var(--sc-text-sm);
	font-weight: 700;
	height: 28px;
	justify-content: center;
	left: 6px;
	line-height: var(--sc-lh-none);
	position: absolute;
	top: 6px;
	width: 28px;
	z-index: 2;
}

.sc-mini .sc-mini__body {
	display: flex;
	/* 行内でカードの高さが揃うよう本文を伸ばし、購入ボタンを常に下端に置く */
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding-top: 10px;
}

.sc-mini .sc-mini__brand {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-2xs);
	line-height: var(--sc-lh-snug);
}

/*
 * 一覧の商品名。
 *
 * 行間 1.55 だった。商品名は「ラベル」のつもりで組んでいたが、実際には
 * 「ハートウィンドウ痛リュック (クリア窓・大容量)」のように 20 文字を超えて
 * 2〜3 行に折り返すものが大半で、読ませる文章に近い (2026-08-12 実測)。
 * 和文の目安 1.7 に寄せる。カードは数 px 高くなる。
 */
.sc-mini .sc-mini__title {
	font-size: var(--sc-text-base);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
}

.sc-mini .sc-mini__title a {
	border: 0;
	color: inherit;
	text-decoration: none;
}

.sc-mini .sc-mini__title a:hover {
	text-decoration: underline;
}

/* Amazon 由来の価格。取得日時を必ず横に添える (アソシエイト規約の価格表示条件) */
.sc-mini .sc-mini__price {
	color: var(--sc-ink);
	font-size: var(--sc-text-base);
	font-weight: 700;
	line-height: var(--sc-lh-snug);
}

/*
 * 一覧に添える価格の取得日時。アソシエイト規約が価格の併記を求めている項目で、
 * 10px では読めなかった (2026-08-12 実測)。和文が読める下限に寄せて 11px にする。
 */
.sc-mini .sc-mini__fetched {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-2xs);
	font-weight: 400;
	margin-left: 6px;
}

.sc-mini .sc-mini__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
}

.sc-mini .sc-mini__labels li {
	background: var(--sc-paper-chip);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-ink-3);
	font-size: var(--sc-text-2xs);
	line-height: var(--sc-lh-none);
	padding: 5px 8px;
}

/* 一覧に必ず「なぜこれか」を一言だけ載せる */
.sc-mini .sc-mini__oneliner {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-list);
}

/* 一覧が薄いことが不誠実に見えないよう、詳細で全部書いていることを明示する */
.sc-mini .sc-mini__more {
	border: 0;
	color: var(--sc-accent-ink);
	font-size: var(--sc-text-2xs);
	line-height: var(--sc-lh-normal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-mini .sc-mini__ended {
	color: var(--sc-warn-ink);
	font-size: var(--sc-text-2xs);
	font-weight: 700;
}

.sc-mini .sc-mini__cta {
	/* auto でボタンを下端に押し付ける (2px だと行内でガタつく。2026-08-02 実測) */
	margin-top: auto;
	padding-top: 6px;
}

/*
 * 一覧の購入ボタン。
 *
 * 指で押す的は 44px 四方を下回らせない (保存ボタンと同じ基準)。
 * 2026-08-12 に実測したところ 35px しかなく、**売り場でいちばん押されるべき
 * ボタンが、いちばん押しにくい**状態だった。
 *
 * block のまま min-height を足すと文字が上端に寄るので、中央に置き直す。
 * text-align は flex では効かないため justify-content で揃える。
 *
 * 塗りは「淡い面 + 濃い橙の文字」。2026-08-13 にユーザーが選択肢ボタンで確定させた
 * (decision-log D-7)。それ以前は橙 #ff9900 の塗りつぶしで、2 列のカードが縦に並ぶと
 * 画面の 3.8〜7.6% が橙の面で埋まっていた (実測)。同じ物差しで測った他社は
 * マイベストがボタン 1 個 0.6%、LIPS / @cosme / 北欧、暮らしの道具店は
 * 一覧に購入導線を置いていない (0%)。
 * **一覧から購入導線を消す決定ではない** (D-3 は維持)。塗りの強さだけを変えている。
 * 商品ページの厚いカード (.sc-card__button) は主たる行動なので塗りつぶしのまま。
 */
.sc-mini .sc-mini__button {
	align-items: center;
	background: var(--sc-buy-soft);
	border: 1px solid var(--sc-buy-line);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-buy-ink);
	display: flex;
	font-weight: 700;
	justify-content: center;
	line-height: var(--sc-lh-snug);
	min-height: 44px;
	text-align: center;
	text-decoration: none;
}

.sc-mini .sc-mini__button--sm {
	font-size: var(--sc-text-xs);
	padding: 9px 10px;
}

.sc-mini .sc-mini__button:hover,
.sc-mini .sc-mini__button:focus {
	background: var(--sc-accent-bg);
	color: var(--sc-buy-ink);
	text-decoration: none;
}

/* 一覧のボタンも厚いカードと同じ扱いにする (理由は sc-card__button のコメント) */
.sc-mini .sc-mini__button:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 2px;
}

/* 押している間だけ濃い橙に塗る。押した手応えは色の変化がいちばん分かりやすい */
.sc-mini .sc-mini__button:active {
	background: var(--sc-buy);
	border-color: var(--sc-buy);
	color: var(--sc-ink-strong);
}

/* ------------------------------------------------------------------
 * 一覧の購入ボタン — 採らなかった型 (見比べ用に残す)
 *
 * [sc_products buy="fill|fill-compact|outline"] を付けた一覧にだけ効く。
 * 既定は上の soft (D-7 で確定)。旧 8 要素カードを verbose で残しているのと同じ扱いで、
 * 「見比べたときに何を選ばなかったのか」を後から再現できるようにしてある。
 * 見比べページ: /sc-poc-buy/
 *
 * どの型も守るもの: 指で押す的 44px / 文字は地に対し 4.5:1 以上 /
 * 輪郭は 3:1 以上 / 購入導線を一覧から消さない (decision-log D-3)。
 * ------------------------------------------------------------------ */

/* fill — D-7 以前の塗りつぶし (橙の面が画面の 3.8〜7.6% を占めていた形) */
.sc-list--buy-fill .sc-mini__button,
.sc-list--buy-fill-compact .sc-mini__button {
	background: var(--sc-buy);
	border-color: var(--sc-buy);
	color: var(--sc-ink-strong);
}

.sc-list--buy-fill .sc-mini__button:hover,
.sc-list--buy-fill .sc-mini__button:focus,
.sc-list--buy-fill-compact .sc-mini__button:hover,
.sc-list--buy-fill-compact .sc-mini__button:focus {
	background: var(--sc-buy-hover);
	border-color: var(--sc-buy-hover);
	color: var(--sc-ink-strong);
}

.sc-list--buy-fill .sc-mini__button:active,
.sc-list--buy-fill-compact .sc-mini__button:active {
	background: var(--sc-buy-active);
	border-color: var(--sc-buy-active);
}

/* fill-compact — 塗りは残し、幅を文言ぶんに詰める (色ではなく面積で弱める案) */
.sc-list--buy-fill-compact .sc-mini__cta {
	display: flex;
}

.sc-list--buy-fill-compact .sc-mini__button {
	display: inline-flex;
	width: auto;
}

.sc-list--buy-fill-compact .sc-mini__button--sm {
	padding: 9px 14px;
}

/* outline — 塗りをやめて枠線だけにする案 */
.sc-list--buy-outline .sc-mini__button {
	background: var(--sc-paper);
	border-width: 2px;
}

/* ---- 横並びリスト型 ---- */

.sc-mini--editorial {
	border-bottom: 1px solid var(--sc-line-soft);
	display: grid;
	gap: 0 14px;
	grid-template-columns: 104px minmax(0, 1fr);
	padding: 16px 0;
}

.sc-mini--editorial .sc-mini__body {
	padding-top: 0;
}

.sc-mini--editorial .sc-mini__foot {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sc-mini--editorial .sc-mini__cta {
	margin-top: 4px;
	max-width: 220px;
}

@media (min-width: 768px) {
	.sc-mini--editorial {
		grid-template-columns: 132px minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
 * 9. WordPress の自動段落挿入への耐性
 *
 * WordPress は本文に wpautop (段落タグの自動挿入) をかけており、
 * ショートコードの出力の合間に空の <p></p> が紛れ込むことがある
 * (2026-07-29 実測: 横並びリストのグリッドに空 p が 2 番目の項目として入り、
 *  本文列が 1 列目へ押し出されて幅 132px に潰れた)。
 *
 * 対策は 2 段構え。空 p を消し、かつ配置を番号で固定して
 * 想定外の要素が挟まっても崩れないようにする。
 * ------------------------------------------------------------------ */

.sc-list > p:empty,
.sc-mini > p:empty,
.sc-mini > br {
	display: none;
}

.sc-mini--editorial .sc-mini__thumb {
	grid-column: 1;
	grid-row: 1;
}

.sc-mini--editorial .sc-mini__body {
	grid-column: 2;
	grid-row: 1;
}

/* ==================================================================
 * 10. トップページ
 *
 * 実地調査 (2026-07-29) の結論にもとづく:
 *   - 商品一覧を前面に出さず、入口と読みものを先に置く (北欧、暮らしの道具店型)
 *   - 区画見出しは英字大 + 日本語小の二段
 *   - スマホは 2 列を基本にする
 * ================================================================== */

.sc-home {
	margin: 0 0 32px;
}

.sc-home .sc-home__section {
	margin: 0 0 40px;
}

.sc-home .sc-home__lead {
	color: var(--sc-ink-3);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-body);
	margin: 0 0 14px;
}

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

.sc-home .sc-hero {
	margin: 0 0 40px;
	padding: 0;
}

/*
 * eyebrow を黄のままにするのも 2026-08-12 のユーザー確定 (選択肢ボタン)。
 * ここは 12px と小さいぶん、見出しの英字より読み取りにくい。将来 eyebrow に
 * 「本文でしか説明していない情報」を入れるときは、この確定を取り直すこと。
 * 詳細は :root のアクセントの節。
 */
.sc-home .sc-hero__eyebrow {
	color: var(--sc-accent);
	font-size: var(--sc-text-xs);
	font-weight: 800;
	letter-spacing: 0.22em;
	margin: 0 0 10px;
}

.sc-home .sc-hero__copy {
	font-size: var(--sc-text-5xl);
	font-weight: 700;
	line-height: var(--sc-lh-card);
	margin: 0 0 12px;
}

@media (min-width: 768px) {
	.sc-home .sc-hero__copy {
		font-size: var(--sc-text-7xl);
	}
}

.sc-home .sc-hero__lead {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-md);
	line-height: var(--sc-lh-prose);
	margin: 0;
}

/* 世界観型は余白を大きく取り、罫線で場を区切る */
.sc-home .sc-hero--world {
	border-bottom: 1px solid var(--sc-line-soft);
	padding-bottom: 32px;
	text-align: center;
}

.sc-home .sc-hero--world .sc-hero__lead {
	margin: 0 auto;
	max-width: 34em;
}

/* 情報密度型は検索を最上部に出す */
.sc-home .sc-hero--search .sc-hero__copy {
	font-size: var(--sc-text-3xl);
}

.sc-home .sc-search {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

/*
 * 入力欄と検索ボタンは、文字の大きさが違うぶん自然高さがずれる (2026-08-12 実測で
 * 入力欄 45px / ボタン 42px)。並んだ 2 つの高さが揃っていないと作りかけに見えるので、
 * 両方に同じ下限を与えて揃える。44px は指で押す的の下限でもある (保存ボタンと同じ基準)。
 */
.sc-home .sc-search input[type="search"],
.sc-home .sc-search button {
	min-height: 44px;
}

.sc-home .sc-search input[type="search"] {
	border: 1px solid var(--sc-line-input);
	border-radius: var(--sc-radius-md);
	flex: 1 1 auto;
	font-size: var(--sc-text-lg);
	min-width: 0;
	padding: 12px 14px;
}

/*
 * 入力欄にフォーカスの表示が無かった (2026-08-12)。キーボードで辿ると、
 * どこに文字を打ち込むことになるのかが画面から読み取れない状態だった。
 * 枠 (border) ではなく輪郭 (outline) で示す。border を太くすると
 * その分だけ中身がずれて、入力中の文字が動いて見えるため。
 */
.sc-home .sc-search input[type="search"]:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 1px;
}

.sc-home .sc-search button {
	background: var(--sc-accent);
	border: 0;
	border-radius: var(--sc-radius-md);
	color: var(--sc-ink-strong);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: var(--sc-text-md);
	font-weight: 700;
	padding: 12px 20px;
}

.sc-home .sc-search button:hover {
	background: var(--sc-accent-hover);
}

.sc-home .sc-search button:active {
	background: var(--sc-accent-active);
}

.sc-home .sc-search button:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 2px;
}

/* ---- 入口タイル ---- */

.sc-home .sc-tiles {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-home .sc-tiles li {
	background: none;
	margin: 0;
	padding: 0;
}

.sc-home .sc-tiles li::before {
	content: none;
	display: none;
}

@media (min-width: 600px) {
	.sc-home .sc-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sc-home .sc-tiles--color {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sc-home .sc-tile {
	align-items: center;
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-tile);
	border-radius: var(--sc-radius-lg);
	color: inherit;
	display: flex;
	gap: 8px;
	min-height: 56px;
	padding: 12px 14px;
	text-decoration: none;
}

.sc-home .sc-tile:hover {
	border-color: var(--sc-accent);
}

.sc-home .sc-tiles--color .sc-tile {
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	padding: 12px 8px;
	text-align: center;
}

.sc-home .sc-tile__name {
	flex: 1 1 auto;
	font-size: var(--sc-text-base);
	font-weight: 700;
	line-height: var(--sc-lh-snug);
}

.sc-home .sc-tile__count {
	color: var(--sc-ink-muted);
	flex: 0 0 auto;
	font-size: var(--sc-text-2xs);
	font-variant-numeric: tabular-nums;
}

/*
 * 「0 件」を色で弱める指定はやめた (2026-08-12)。白地で読める濃さを保つと
 * 通常の件数と同じ色にしかならず、区別が成り立たないため
 * (旧 #a3a3ac は白地で 2.50:1 で、そもそも読めていなかった)。
 * 0 件であることは数字そのものが伝えている。--empty のクラスは残してあるので、
 * 色以外の手段 (書き方を変える等) で区別したくなったらここに書く。
 */

.sc-home .sc-tile__swatch {
	border: 1px solid var(--sc-line-swatch);
	border-radius: var(--sc-radius-circle);
	display: block;
	height: 26px;
	width: 26px;
}

/* ---- 編集部セレクト ---- */

.sc-home .sc-picks {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-home .sc-picks li {
	background: none;
	margin: 0;
	padding: 0;
}

.sc-home .sc-picks li::before {
	content: none;
	display: none;
}

.sc-home .sc-pick {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-tile);
	border-radius: var(--sc-radius-lg);
	color: inherit;
	display: block;
	padding: 16px;
	text-decoration: none;
}

.sc-home .sc-pick__title {
	display: block;
	font-size: var(--sc-text-md);
	font-weight: 700;
	line-height: var(--sc-lh-normal);
}

.sc-home .sc-pick__excerpt {
	color: var(--sc-ink-muted);
	display: block;
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin-top: 6px;
}

/* ---- SCENE WEAR 予告 ---- */

.sc-home .sc-wear {
	background: var(--sc-panel);
	border-radius: var(--sc-radius-xl);
	color: var(--sc-panel-title);
	padding: 28px 24px;
	text-align: center;
}

.sc-home .sc-wear__en {
	color: var(--sc-accent);
	font-size: var(--sc-text-3xl);
	font-weight: 800;
	letter-spacing: 0.18em;
	margin: 0 0 10px;
}

.sc-home .sc-wear__lead {
	color: var(--sc-panel-text);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-prose);
	margin: 0 auto;
	max-width: 30em;
}

/* ---- /collection-planb/ : SCENE WEAR を文脈でつなぐ比較ページ ---- */

.sc-planb {
	--sc-focus: var(--sc-planb-accent);
	box-sizing: border-box;
	color: var(--sc-ink);
	font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	margin: 0 auto 64px;
	max-width: 1040px;
	font-weight: 400;
}

.sc-planb__hero {
	background: var(--sc-planb-surface);
	margin: 0 0 48px;
	padding: 40px 32px 32px;
	text-align: center;
}

.sc-planb__eyebrow,
.sc-planb__kicker,
.sc-planb__layer-label,
.sc-planb__status-tag {
	font-size: var(--sc-text-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	margin: 0;
	text-transform: uppercase;
}

.sc-planb__eyebrow,
.sc-planb__kicker,
.sc-planb__layer-label {
	color: var(--sc-planb-accent);
}

.sc-planb__eyebrow span {
	color: var(--sc-ink-muted);
	margin-left: 8px;
}

.sc-planb h1,
.sc-planb h2,
.sc-planb h3 {
	background: none;
	border: 0;
	font-family: inherit;
	font-weight: 800;
	padding: 0;
}

.sc-planb h1::before,
.sc-planb h1::after,
.sc-planb h2::before,
.sc-planb h2::after,
.sc-planb h3::before,
.sc-planb h3::after {
	content: none;
	display: none;
}

.sc-planb__hero h1 {
	color: var(--sc-ink-strong);
	font-size: clamp(var(--sc-text-6xl), 4vw, var(--sc-planb-title));
	letter-spacing: -0.045em;
	line-height: 1.3;
	margin: 14px 0 16px;
}

.sc-planb__hero-copy > p:not(.sc-planb__eyebrow) {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-lg);
	line-height: var(--sc-lh-body);
	margin: 0 auto;
	max-width: 42em;
}

.sc-planb__hero-primary,
.sc-planb__hero-link,
.sc-planb__bridge-link,
.sc-planb__status-link,
.sc-planb__products-more,
.sc-planb__identity > a {
	align-items: center;
	display: inline-flex;
	font-size: var(--sc-text-base);
	font-weight: 700;
	gap: 10px;
	min-height: 44px;
	text-decoration: none;
}

.sc-planb__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 32px;
}

.sc-planb__hero-primary {
	background: var(--sc-ink-strong);
	border: 1px solid var(--sc-ink-strong);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-paper);
	justify-content: space-between;
	min-width: 220px;
	padding: 12px 18px;
}

.sc-planb__hero-link {
	border: 1px solid var(--sc-wear-line);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-wear-ink);
	justify-content: space-between;
	padding: 10px 14px;
}

.sc-planb__find {
	margin: 24px auto 0;
	max-width: 720px;
	scroll-margin-top: 24px;
}

.sc-planb__find-heading {
	text-align: center;
}

.sc-planb .sc-planb__find-heading h2 {
	font-size: var(--sc-text-2xl);
	margin: 6px 0 0;
}

.sc-planb__find-heading > p:not(.sc-planb__kicker) {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-body);
	margin: 0;
}

.sc-planb__search {
	margin-top: 16px;
}

.sc-planb__search > label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sc-planb__search > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	background: var(--sc-paper);
	border: 1px solid var(--sc-planb-accent);
	border-radius: var(--sc-radius-pill);
	padding: 5px;
}

.sc-planb__search input[type="search"] {
	background: var(--sc-paper);
	border: 0;
	border-radius: var(--sc-radius-pill);
	color: var(--sc-ink);
	font: inherit;
	min-width: 0;
	min-height: 48px;
	padding: 12px 16px;
}

.sc-planb__search button {
	background: var(--sc-planb-accent);
	border: 1px solid var(--sc-planb-accent);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-paper);
	font: inherit;
	font-weight: 700;
	font-size: var(--sc-text-base);
	min-height: 48px;
	padding: 12px 24px;
}

.sc-planb__search input[type="search"]:focus-visible,
.sc-planb__search button:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
}

.sc-planb__search-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.sc-planb__search-links a {
	align-items: center;
	background: var(--sc-paper);
	border: 1px solid var(--sc-planb-line);
	border-radius: var(--sc-radius-pill);
	color: var(--sc-ink-strong);
	display: inline-flex;
	font-size: var(--sc-text-sm);
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	text-decoration: none;
}

.sc-planb__products {
	border-bottom: 1px solid var(--sc-line-tile);
	margin: 0 0 72px;
	padding-bottom: 72px;
}

.sc-planb__products-heading {
	align-items: end;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin-bottom: 26px;
}

.sc-planb__products-heading h2 {
	margin-bottom: 0;
}

.sc-planb__products-heading > p {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-prose);
	margin: 0;
	max-width: 34em;
}

.sc-planb__products .sc-list--grid {
	gap: 32px 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 960px) {
	.sc-planb__products .sc-list--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Amazon / 楽天 / 編集部撮影で画像比率や背景が違っても、同じ額縁で整える。
 * 商品そのものを切らないよう cover ではなく contain を使い、加工はしない。
 */
.sc-planb__products .sc-mini__media {
	aspect-ratio: 100 / 118;
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-xl);
	padding-top: 0;
}

.sc-planb__products .sc-mini__media img {
	background: var(--sc-paper);
	box-sizing: border-box;
	object-fit: contain;
	padding: clamp(10px, 1.6vw, 18px);
}

.sc-planb__products .sc-mini__media--empty {
	padding-top: 0;
}

.sc-planb__products .sc-mini__media--empty::before {
	content: none;
}

.sc-planb__products .sc-mini__body {
	gap: 5px;
	padding-top: 12px;
}

.sc-planb__products .sc-mini__brand {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sc-planb__products .sc-mini__title {
	font-size: var(--sc-text-md);
	font-weight: 600;
	line-height: var(--sc-lh-loose);
}

.sc-planb__products .sc-mini__price {
	font-size: var(--sc-text-4xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: var(--sc-lh-snug);
}

.sc-planb__products .sc-mini__currency {
	font-size: var(--sc-text-base);
	font-weight: 600;
}

.sc-planb__products .sc-mini__fetched {
	display: block;
	font-size: var(--sc-text-sm);
	font-weight: 400;
	line-height: var(--sc-lh-loose);
	margin: 4px 0 0;
}

.sc-planb__products .sc-mini__oneliner,
.sc-planb__products .sc-mini__more {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
}

.sc-planb__products .sc-mini__labels li {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-snug);
}

.sc-planb__products .sc-mini__more {
	color: var(--sc-planb-accent);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sc-planb__products .sc-mini__button {
	background: var(--sc-planb-accent);
	border-color: var(--sc-planb-accent);
	border-radius: var(--sc-radius-md);
	color: var(--sc-paper);
	font-size: var(--sc-text-base);
	font-weight: 700;
	min-height: 48px;
}

.sc-planb__products-more {
	border-bottom: 2px solid var(--sc-planb-accent);
	color: var(--sc-ink-strong);
	margin-top: 10px;
}

.sc-planb__guide {
	border-bottom: 1px solid var(--sc-line-tile);
	margin: 0 0 72px;
	padding-bottom: 72px;
}

.sc-planb__guide-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 26px;
}

.sc-planb__guide-list article {
	padding: 6px 26px 8px;
}

.sc-planb__guide-list article:first-child {
	padding-left: 0;
}

.sc-planb__guide-list article + article {
	border-left: 1px solid var(--sc-line-tile);
}

.sc-planb__guide-number {
	color: var(--sc-planb-accent);
	font-size: var(--sc-text-xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	margin: 0;
}

.sc-planb__guide-list h3 {
	color: var(--sc-ink-strong);
	font-size: var(--sc-text-xl);
	line-height: var(--sc-lh-normal);
	margin: 12px 0 10px;
}

.sc-planb__guide-list article > p:not(.sc-planb__guide-number) {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-prose);
	margin: 0;
}

.sc-planb__orientation,
.sc-planb__status {
	margin: 0 0 72px;
}

.sc-planb h2 {
	color: var(--sc-ink-strong);
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	letter-spacing: -0.03em;
	line-height: 1.3;
	margin: 8px 0 20px;
}

.sc-planb__layers {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sc-planb__layer {
	border: 1px solid var(--sc-line-tile);
	border-radius: var(--sc-radius-sm);
	padding: 24px;
}

.sc-planb__layer--select {
	background: var(--sc-paper);
}

.sc-planb__layer--wear {
	background: var(--sc-wear-paper);
	border-color: var(--sc-wear-line);
}

.sc-planb__layer--wear h3,
.sc-planb__layer--wear > p,
.sc-planb__layer--wear > a {
	color: var(--sc-wear-ink);
}

.sc-planb__layer--wear .sc-planb__layer-note {
	border-color: var(--sc-wear-line);
	color: var(--sc-wear-muted);
}

.sc-planb__layer h3 {
	font-size: var(--sc-text-2xl);
	line-height: var(--sc-lh-normal);
	margin: 8px 0 10px;
}

.sc-planb__layer > p:not(.sc-planb__layer-label) {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-prose);
	margin: 0;
}

.sc-planb__layer-note {
	border-top: 1px solid var(--sc-line-soft);
	color: var(--sc-ink-muted);
	margin-top: 18px !important;
	padding-top: 14px;
}

.sc-planb__layer > a {
	align-items: center;
	display: inline-flex;
	font-size: var(--sc-text-sm);
	font-weight: 700;
	gap: 8px;
	margin-top: 18px;
	min-height: 44px;
	text-decoration: none;
}

.sc-planb__bridge {
	align-items: end;
	background: var(--sc-wear-accent-soft);
	border-left: 4px solid var(--sc-wear-accent-ink);
	border-radius: var(--sc-radius-sm);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 0 0 42px;
	padding: 28px;
}

.sc-planb__bridge h2 {
	margin-bottom: 8px;
}

.sc-planb__bridge p:not(.sc-planb__kicker) {
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-prose);
	margin: 0;
	max-width: 32em;
}

.sc-planb__bridge-link {
	border-bottom: 2px solid var(--sc-wear-accent-ink);
	color: var(--sc-wear-ink);
	flex: 0 0 auto;
}

.sc-planb__status-lead {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-prose);
	margin: -8px 0 16px;
}

.sc-planb__status-list {
	counter-reset: planb-step;
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-planb__status-list li {
	border-bottom: 1px solid var(--sc-line-tile);
	border-top: 1px solid var(--sc-line-tile);
	min-height: 210px;
	padding: 18px;
}

.sc-planb__status-list li + li {
	border-left: 1px solid var(--sc-line-tile);
}

.sc-planb__status-tag {
	color: var(--sc-wear-accent-ink);
}

.sc-planb__status-list h3 {
	color: var(--sc-ink-strong);
	font-size: var(--sc-text-lg);
	line-height: var(--sc-lh-normal);
	margin: 10px 0 8px;
}

.sc-planb__status-list p:not(.sc-planb__status-tag) {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-prose);
	margin: 0;
}

.sc-planb__status-link {
	border-bottom: 2px solid var(--sc-accent);
	color: var(--sc-ink-strong);
	margin-top: 16px;
}

.sc-planb__identity {
	align-items: end;
	background: var(--sc-planb-surface);
	border-bottom: 1px solid var(--sc-planb-line);
	border-top: 1px solid var(--sc-planb-line);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 32px;
}

.sc-planb__identity h2 {
	font-size: var(--sc-text-xl);
	margin-bottom: 8px;
}

.sc-planb__identity p:not(.sc-planb__kicker) {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-prose);
	margin: 0;
	max-width: 43em;
}

.sc-planb__identity > a {
	border-bottom: 2px solid var(--sc-planb-accent);
	color: var(--sc-ink-strong);
	flex: 0 0 auto;
}

.sc-planb a:hover {
	color: var(--sc-planb-accent-hover);
}

.sc-planb__search button:hover,
.sc-planb__search button:active,
.sc-planb__products .sc-mini__button:hover,
.sc-planb__products .sc-mini__button:focus,
.sc-planb__products .sc-mini__button:active {
	background: var(--sc-planb-accent-hover);
	border-color: var(--sc-planb-accent-hover);
	color: var(--sc-paper);
}

.sc-planb .sc-planb__hero-primary:hover {
	background: var(--sc-accent-active);
	border-color: var(--sc-accent-active);
	color: var(--sc-paper);
}

/* ---- 商品検索結果 ---- */

.sc-contact-colors { margin: 28px 0 24px; }
.sc-plan-b-page .sc-contact-colors h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.sc-contact-colors__list { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-plan-b-page .sc-contact-colors__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 9px 14px; border: 1px solid #d5d3cc; border-radius: 24px; background: #fff; color: #383c36; font-size: 14px; line-height: 1.4; text-decoration: none; }
.sc-plan-b-page .sc-contact-colors__list a:hover { border-color: #565f48; background: #f3f4ed; }
.sc-plan-b-page .sc-contact-colors__list a[aria-current="true"] { border-color: #222a32; background: #fff; color: #17212b; box-shadow: inset 0 0 0 2px #222a32; font-weight: 700; }
.sc-contact-colors__list a[aria-current="true"]::after { content: '✓'; font-size: 14px; font-weight: 700; }
.sc-plan-b-page .sc-search-results__head + p[role="note"] { margin-top: 24px; }
.sc-contact-colors__list a:focus-visible { outline: 3px solid #7a8862; outline-offset: 3px; }
.sc-contact-colors__swatch { display: block; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--sc-swatch); box-shadow: inset 0 0 0 1px #0002; }

.sc-search-results__head {
	background: var(--sc-planb-surface);
	border-bottom: 1px solid var(--sc-planb-line);
	padding: 32px;
}

.sc-search-results__head h1 {
	color: var(--sc-ink-strong);
	font-size: clamp(var(--sc-text-5xl), 4vw, var(--sc-text-7xl));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: var(--sc-lh-snug);
	margin: 8px 0 4px;
	overflow-wrap: anywhere;
}

.sc-search-results__count {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin: 0;
}

.sc-search-results__form {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) 220px auto;
	margin: 24px 0 36px;
}

.sc-search-results__form > label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sc-search-results__form input[type="search"],
.sc-search-results__form select,
.sc-search-results__form button {
	border-radius: var(--sc-radius-md);
	font: inherit;
	min-height: 48px;
}

.sc-search-results__form input[type="search"],
.sc-search-results__form select {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-input);
	color: var(--sc-ink);
	font-size: var(--sc-text-base);
	padding: 11px 14px;
}

.sc-search-results__form button {
	background: var(--sc-planb-accent);
	border: 1px solid var(--sc-planb-accent);
	color: var(--sc-paper);
	font-size: var(--sc-text-base);
	font-weight: 700;
	padding: 11px 24px;
}

.sc-search-results__form button:hover,
.sc-search-results__form button:active,
.sc-search-results__form button:focus {
	background: var(--sc-planb-accent-hover);
	border-color: var(--sc-planb-accent-hover);
	color: var(--sc-paper);
}

.sc-search-results__form input:focus-visible,
.sc-search-results__form select:focus-visible,
.sc-search-results__form button:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 2px;
}

.sc-search-results .sc-search-results__products {
	margin-bottom: 32px;
	padding-bottom: 32px;
}

.sc-search-results__empty {
	background: var(--sc-planb-surface);
	border: 1px solid var(--sc-planb-line);
	padding: clamp(28px, 6vw, 52px);
	text-align: center;
}

.sc-search-results .sc-search-results__empty h2 {
	font-size: var(--sc-text-4xl);
	margin: 0 0 10px;
}

.sc-search-results__empty p {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-base);
	line-height: var(--sc-lh-body);
	margin: 0 auto 18px;
	max-width: 38em;
}

.sc-search-results__empty a {
	border-bottom: 2px solid var(--sc-planb-accent);
	color: var(--sc-ink-strong);
	display: inline-flex;
	font-size: var(--sc-text-base);
	font-weight: 700;
	min-height: 44px;
	align-items: center;
	text-decoration: none;
}

.sc-search-results__suggestions {
	margin-top: 32px;
}

.sc-search-results__suggestions > div + p { margin-top: 24px; }
.sc-plan-b-page .sc-search-results .sc-search-recovery { margin-top: 40px; margin-bottom: 0; padding-top: 28px; padding-bottom: 0; border-top: 1px solid var(--sc-planb-line); border-bottom: 0; }
.sc-search-results .sc-search-recovery h2 { margin: 0 0 12px; font-size: var(--sc-text-2xl); font-weight: 700; line-height: 1.5; }
.sc-search-recovery__note { max-width: 672px; font-size: var(--sc-text-base); line-height: var(--sc-lh-body); color: var(--sc-ink-2); margin: 0 0 24px; }
.sc-search-recovery .sc-search-recovery__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
	.sc-search-recovery .sc-search-recovery__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sc-search-results__suggestions > p {
	font-size: var(--sc-text-lg);
	font-weight: 800;
	margin: 0 0 12px;
}

.sc-search-results__suggestions > div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sc-search-results__suggestions a {
	align-items: center;
	border: 1px solid var(--sc-planb-line);
	border-radius: var(--sc-radius-pill);
	display: inline-flex;
	font-size: var(--sc-text-sm);
	font-weight: 600;
	min-height: 44px;
	padding: 10px 16px;
	text-decoration: none;
}

.sc-planb a:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.sc-search-results__head {
		padding: 24px 18px;
	}

	.sc-search-results__form {
		grid-template-columns: 1fr;
		margin: 18px 0 28px;
	}

	.sc-search-results__form button {
		width: 100%;
	}

	.sc-search-results__suggestions > div {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-search-results__suggestions a {
		justify-content: center;
		padding: 10px;
	}

	.sc-planb__hero {
		margin-bottom: 36px;
		padding: 28px 16px;
	}

	.sc-planb__hero-actions {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.sc-planb__hero-primary,
	.sc-planb__hero-link {
		box-sizing: border-box;
		width: 100%;
	}

	.sc-planb__layers,
	.sc-planb__status-list,
	.sc-planb__guide-list {
		grid-template-columns: 1fr;
	}

	.sc-planb__find {
		margin-top: 20px;
	}

	.sc-planb__find-heading {
		max-width: none;
	}

	.sc-planb__search-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-planb__products .sc-list--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-planb__search-links a {
		font-size: var(--sc-text-sm);
		min-height: 44px;
		padding: 10px 11px;
	}

	.sc-planb__products .sc-mini__title {
		font-size: var(--sc-text-base);
	}

	.sc-planb__products-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 0;
	}

	.sc-planb__products,
	.sc-planb__guide {
		margin-bottom: 52px;
		padding-bottom: 52px;
	}

	.sc-planb__guide-list {
		margin-top: 20px;
	}

	.sc-planb__guide-list article,
	.sc-planb__guide-list article:first-child {
		padding: 22px 0;
	}

	.sc-planb__guide-list article + article {
		border-left: 0;
		border-top: 1px solid var(--sc-line-tile);
	}

	.sc-planb__status-list li + li {
		border-left: 0;
		border-top: 0;
	}

	.sc-planb__status-list li {
		min-height: 0;
	}

	.sc-planb__bridge,
	.sc-planb__identity {
		align-items: flex-start;
		flex-direction: column;
	}

	.sc-planb__identity {
		padding: 28px 20px;
	}
}

/* ------------------------------------------------------------------
 * 11. トップページの見出し階層の調整
 *
 * 実測 (2026-07-29): 英字見出しの下の日本語が 0.8125rem、その下の説明文が
 * 0.875rem になり、階層が逆転して見えた。日本語側を上げて説明文より強くする。
 * ------------------------------------------------------------------ */

.sc-home .sc-heading {
	margin: 0 0 6px;
}

.sc-home .sc-heading__en {
	font-size: var(--sc-text-4xl);
	letter-spacing: 0.14em;
}

.sc-home .sc-heading__ja {
	color: var(--sc-panel);
	font-size: var(--sc-text-lg);
	letter-spacing: 0.02em;
	margin: 2px 0 0;
}

.sc-home .sc-home__lead {
	font-size: var(--sc-text-sm);
	margin: 0 0 16px;
}

/* 作品タイル。数が多いので 2 列固定にせず、名前の長さに合わせて詰める */
.sc-home .sc-tiles--work {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sc-home .sc-tiles--work li {
	flex: 0 0 auto;
}

.sc-home .sc-tiles--work .sc-tile {
	border-radius: var(--sc-radius-pill);
	gap: 10px;
	min-height: 0;
	padding: 9px 14px;
}

.sc-home .sc-tiles--work .sc-tile__name {
	flex: 0 0 auto;
	font-size: var(--sc-text-sm);
}
/* ------------------------------------------------------------------
 * トップのランキングモジュール (Home::popular)
 * LIPS のトップの「カテゴリ別ランキングを 2 列で並べる」形に合わせる
 * ------------------------------------------------------------------ */

.sc-home__rankings {
	display: grid;
	gap: 8px 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sc-home__rankings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* モジュール内は 1 列で縦に積む (3 位まで) */
.sc-home__ranking .sc-list--ranking {
	grid-template-columns: 1fr;
}

.sc-home__ranking .sc-mini--compact {
	display: grid;
	gap: 0 14px;
	grid-template-columns: 96px minmax(0, 1fr);
}

.sc-home__ranking .sc-mini--compact .sc-mini__body {
	padding-top: 0;
}

/*
 * 保存ボタンを画像の列の中に戻す。
 *
 * 保存ボタンはカード (.sc-mini) の右上に絶対配置されている。縦積みのカードでは
 * 「カードの右上 = 画像の右上」なので問題ないが、ここは画像 96px + 文字の 2 列組みなので、
 * カードの右上は **商品名の 1 行目**にあたる。
 * 2026-08-13 に実測したところ、ランキングの 6 枚すべてで保存ボタンが商品名に重なり
 * (重なり 783〜1,259px²)、**重なった部分を押すと商品ページではなく保存が動いていた**。
 * 画像の列の右端に寄せることで、他のレイアウトと同じ「画像の右上」の意味に揃える。
 */
.sc-home__ranking .sc-mini--compact .sc-save--overlay {
	/* 96px = 上の画像の列幅 / 44px = ボタンの幅 / 6px = 端からの余白 */
	left: calc(96px - 44px - 6px);
	right: auto;
}

/* ==================================================================
 * 11. 保存ボタン (SCENE ID のお気に入り)
 *
 * このボタンは **ログイン状態に関係なく、常に同じ HTML** で出力される
 * (押されていない見た目で固定)。「保存済み」への切り替えは
 * ブラウザ側 (assets/js/saves.js) が aria-pressed を書き換えて行い、
 * 見た目の切り替えはこの CSS が受け持つ。
 * ページキャッシュにログイン状態が焼き付く事故を、
 * 「そもそも状態を HTML に書かない」ことで防ぐための分担である。
 * ================================================================== */

.sc-save,
.sc-mini .sc-save,
.sc-card .sc-save {
	align-items: center;
	background: var(--sc-paper);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	box-shadow: none;
	color: var(--sc-ink-3);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--sc-text-xs);
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	line-height: var(--sc-lh-snug);
	/* 指で押す領域は 44px 四方を下回らせない (小さな的は押し間違いを生む) */
	min-height: 44px;
	min-width: 44px;
	padding: 0 10px;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.sc-save:hover,
.sc-save:focus {
	background: var(--sc-paper-hover);
	border-color: var(--sc-line-hover);
	color: var(--sc-ink-2);
}

.sc-save:focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 2px;
}

/* ハートは 1 本のパスで描き、塗るかどうかだけを状態で変える */
.sc-save .sc-save__icon {
	display: block;
	flex: 0 0 auto;
}

.sc-save .sc-save__icon path {
	fill: none;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 1.8;
	transition: fill 0.16s ease;
}

.sc-save[aria-pressed="true"] {
	background: var(--sc-accent-bg);
	border-color: var(--sc-accent);
	color: var(--sc-accent-ink);
}

.sc-save[aria-pressed="true"] .sc-save__icon path {
	fill: currentColor;
}

/* ---- 一覧カード: 文字は読み上げにだけ残し、丸い的だけを見せる ---- */

.sc-mini .sc-save--overlay .sc-save__text,
.sc-mini .sc-save--mini .sc-save__text {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sc-mini .sc-save--mini {
	padding: 0;
	width: 44px;
}

/*
 * グリッド型 (compact / ranked) は画像の右上に重ねる。
 *
 * 購入ボタンの横に並べると、2 列表示のスマホで「Amazon で見る」が 2 行に折れる
 * (2026-08-10 実測)。重ねれば既存の並びを 1px も動かさずに足せるうえ、
 * 実地調査した一覧型サイト (LIPS / @cosme) の置き方とも一致する。
 *
 * 絶対配置なので、横並び型 (editorial) のグリッドでも列を 1 つ占有しない。
 * 順位バッジは左上なので重ならない。
 */
.sc-mini {
	position: relative;
}

.sc-mini .sc-save--overlay {
	background: var(--sc-overlay-paper);
	border-color: var(--sc-line-overlay);
	border-radius: var(--sc-radius-pill);
	box-shadow: var(--sc-shadow-overlay);
	padding: 0;
	position: absolute;
	right: 6px;
	top: 6px;
	width: 44px;
	z-index: 3;
}

.sc-mini .sc-save--overlay:hover,
.sc-mini .sc-save--overlay:focus {
	background: var(--sc-paper);
}

/*
 * 横並び型 (editorial) は 1 行が画面幅いっぱいに広いので、
 * 購入ボタンの右に並べても文字が折れない。画像に重ねると
 * 104px の小さなサムネを覆ってしまうため、こちらは並べる。
 */
.sc-mini--editorial .sc-mini__cta {
	align-items: stretch;
	display: flex;
	gap: 8px;
	max-width: 280px;
}

.sc-mini--editorial .sc-mini__cta .sc-mini__button {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
}

/* 取扱終了の表示も、隣の的と同じ高さで上下中央にそろえる */
.sc-mini--editorial .sc-mini__cta .sc-mini__ended {
	align-items: center;
	display: flex;
}

/* ---- 厚いカード: 購入ボタンと同じ行に、文字つきで置く ---- */

.sc-card .sc-card__actions {
	align-items: stretch;
	display: flex;
	gap: 10px;
}

.sc-card .sc-card__actions .sc-card__cta {
	flex: 1 1 auto;
	margin: 0;
}

.sc-card .sc-save--detail {
	padding: 0 16px;
}

/* ---- 押した手応え ---- */

@keyframes sc-save-pop {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.18);
	}

	100% {
		transform: scale(1);
	}
}

.sc-save.is-just-saved .sc-save__icon {
	animation: sc-save-pop 0.28s ease;
}

/* ---- 失敗の知らせ (JavaScript が必要になったときだけ作る) ---- */

.sc-save-notice {
	background: var(--sc-toast);
	border-radius: var(--sc-radius-md);
	bottom: 16px;
	color: var(--sc-paper);
	font-size: var(--sc-text-sm);
	left: 50%;
	line-height: var(--sc-lh-loose);
	margin: 0;
	max-width: min(92vw, 420px);
	opacity: 0;
	padding: 12px 16px;
	pointer-events: none;
	position: fixed;
	text-align: center;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9999;
}

.sc-save-notice.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/*
 * OS の「視差効果を減らす」設定を尊重する。
 * 前庭障害のある利用者には、拡大縮小や滑り込みのような小さな動きでも
 * めまいや吐き気を起こしうる。動きは消し、状態の変化 (色・文字) だけを残す。
 */
@media (prefers-reduced-motion: reduce) {
	.sc-save,
	.sc-save .sc-save__icon path,
	.sc-save-notice {
		transition: none;
	}

	.sc-save.is-just-saved .sc-save__icon {
		animation: none;
	}

	.sc-save-notice,
	.sc-save-notice.is-visible {
		transform: translate(-50%, 0);
	}
}

/* ------------------------------------------------------------------
 * サイズの引き当て (「あなたはこの店なら何サイズか」)
 *
 * 型は 4 つ (table / cards / bars / prose)。どれを採るかは未確定なので、
 * 共通部分と型ごとの差を分けて書く。見比べは /collection/size-poc/。
 * 色は必ずトークン経由 (docs/store/design.md)。
 * ------------------------------------------------------------------ */

.sc-size {
	margin: 28px 0;
}

/*
 * テーマ装飾の打ち消し (サイズの引き当ての内側だけ)。
 *
 * 商品カード (.sc-card) と同じ理由。親テーマ JIN は本文中の p / ul / li / table に
 * 独自の余白・地・擬似要素を当てるため、素で書くと中身が乗っ取られる。
 *
 * **:where() で包むのは詳細度を下げるため。** 素の `.sc-size li` は
 * クラス 1 + 要素 1 で、この下に書く `.sc-size__card` (クラス 1) より強い。
 * そのため打ち消しがカード自身の枠まで消してしまう (2026-08-27 に実際に消えた)。
 * :where() の中は詳細度に数えられないので、要素セレクタと同じ強さになり、
 * 部品側の指定が素直に勝つ。
 */

:where(.sc-size) p,
:where(.sc-size) ul,
:where(.sc-size) li,
:where(.sc-size) table,
:where(.sc-size) th,
:where(.sc-size) td,
:where(.sc-size) div {
	background: none;
	border: 0;
	box-shadow: none;
}

:where(.sc-size) p,
:where(.sc-size) ul,
:where(.sc-size) li {
	margin: 0;
	padding: 0;
}

:where(.sc-size) li::before,
:where(.sc-size) li::after,
:where(.sc-size) p::before,
:where(.sc-size) p::after,
:where(.sc-size) th::before,
:where(.sc-size) td::before {
	content: none;
	display: none;
}

.sc-size__heading {
	font-size: var(--sc-text-md);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	margin: 0 0 12px;
}

/* 入力欄 */

.sc-size__form {
	background: var(--sc-paper-sub);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-lg);
	display: grid;
	gap: 12px;
	padding: 16px;
}

/*
 * 入力欄とボタンを横に並べる箱。form 直下に label を置くと本文の自動整形が
 * <p> で包んで縦積みにするので、div で包んでから並べる (class-size-finder.php)。
 */

.sc-size__fields {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sc-size__field {
	display: grid;
	gap: 4px;
	flex: 1 1 120px;
	min-width: 120px;
}

.sc-size__label {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	color: var(--sc-ink-2);
}

.sc-size__input {
	align-items: center;
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-input);
	border-radius: var(--sc-radius-sm);
	display: flex;
	gap: 6px;
	padding: 0 10px;
}

.sc-size__input input {
	background: transparent;
	border: 0;
	color: var(--sc-ink);
	font-size: var(--sc-text-md);
	line-height: var(--sc-lh-loose);
	min-height: 44px;
	min-width: 0;
	width: 100%;
}

.sc-size__input input:focus-visible {
	outline: 2px solid var(--sc-accent-ink);
	outline-offset: 2px;
}

.sc-size__unit {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
}

.sc-size__submit {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-hover);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-ink);
	cursor: pointer;
	font-size: var(--sc-text-md);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	min-height: 44px;
	padding: 0 20px;
}

.sc-size__submit:hover {
	background: var(--sc-paper-sub);
}

.sc-size__submit:focus-visible {
	outline: 2px solid var(--sc-accent-ink);
	outline-offset: 2px;
}

.sc-size__sample,
.sc-size__privacy,
.sc-size__note {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	margin: 10px 0 0;
}

.sc-size__note {
	border-top: 1px solid var(--sc-line-soft);
	margin-top: 18px;
	padding-top: 12px;
}

/* サイズ名のバッジ (全型で共通) */

.sc-size__badge {
	background: var(--sc-paper-sub);
	border: 1px solid var(--sc-line);
	white-space: nowrap;
	border-radius: var(--sc-radius-sm);
	display: inline-block;
	font-size: var(--sc-text-md);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	padding: 1px 10px;
}

.sc-size__badge--split {
	background: var(--sc-warn-bg);
	border-color: var(--sc-warn-ink);
	color: var(--sc-warn-ink);
}

/* 型 A: 対照表 */

.sc-size__scroll {
	margin-top: 16px;
	overflow-x: auto;
}

.sc-size__table {
	border-collapse: collapse;
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	min-width: 560px;
	width: 100%;
}

.sc-size__table th,
.sc-size__table td {
	border-bottom: 1px solid var(--sc-line-soft);
	padding: 10px 12px;
	text-align: left;
	vertical-align: middle;
}

.sc-size__table thead th {
	border-bottom: 1px solid var(--sc-line);
	color: var(--sc-ink-2);
	font-weight: 700;
	white-space: nowrap;
}

.sc-size__cell--off {
	color: var(--sc-warn-ink);
	font-weight: 700;
}

/* 型 B: 店カード */

.sc-size__cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.sc-size__card {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-tile);
	border-radius: var(--sc-radius-lg);
	display: grid;
	gap: 6px;
	padding: 16px;
}

.sc-size__card--split {
	border-color: var(--sc-warn-ink);
}

.sc-size__card-shop {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin: 0;
}

.sc-size__card-size {
	font-size: var(--sc-text-xl);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	margin: 0;
}

.sc-size__card-note {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	margin: 0;
}

.sc-size__card-meta {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	margin: 0;
}

/* 型 C: ゆとりの目盛り */

.sc-size__bars {
	display: grid;
	gap: 20px;
	margin-top: 16px;
}

.sc-size__bar-group {
	border-bottom: 1px solid var(--sc-line-soft);
	padding-bottom: 16px;
}

.sc-size__bar-shop {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--sc-text-md);
	font-weight: 700;
	gap: 10px;
	line-height: var(--sc-lh-loose);
	margin: 0 0 10px;
}

.sc-size__bar-empty {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	margin: 0;
}

.sc-size__bar-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.sc-size__bar-label {
	color: var(--sc-ink-2);
	flex: 0 0 5em;
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
}

.sc-size__bar-track {
	background: var(--sc-paper-sub);
	border: 1px solid var(--sc-line);
	border-radius: 999px;
	flex: 1 1 140px;
	height: 12px;
	min-width: 120px;
	position: relative;
}

.sc-size__bar-track--out {
	background: var(--sc-warn-bg);
	border-color: var(--sc-warn-ink);
}

.sc-size__bar-pin {
	background: var(--sc-ink);
	border-radius: 999px;
	height: 18px;
	margin-left: -2px;
	position: absolute;
	top: -4px;
	width: 4px;
}

.sc-size__bar-track--out .sc-size__bar-pin {
	background: var(--sc-warn-ink);
}

.sc-size__bar-range {
	color: var(--sc-ink-2);
	flex: 0 0 auto;
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
}

.sc-size__bar-you {
	color: var(--sc-ink-muted);
	margin-left: 8px;
}

/* 型 D: 文章 */

.sc-size__prose {
	margin-top: 16px;
	max-width: 42em;
}

.sc-size__prose p {
	font-size: var(--sc-text-md);
	line-height: var(--sc-lh-body);
	margin: 0 0 10px;
}

.sc-size__prose-links {
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.sc-size__prose-links li {
	margin: 0 0 6px;
}

/* 女性用 / 男性用の切り替え (入力欄の先頭) */

.sc-size__gender {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.sc-size__gender legend {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	padding: 0;
}

.sc-size__gender-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.sc-size__gender-option {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--sc-text-md);
	gap: 6px;
	line-height: var(--sc-lh-loose);
	min-height: 44px;
}

/*
 * ラジオボタン本体を 44px の的にする。
 *
 * ブラウザ既定の丸は 13〜20px で、囲む label を大きくしても検査 (pnpm check:design) は
 * input 単体を測る (会員登録の同意欄で同じ指摘が出ている。tests/design/design-check.mjs)。
 * 見た目の丸は ::before で 20px に描き、押せる範囲だけを 44px に広げる。
 */

.sc-size__gender-option input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: grid;
	height: 44px;
	margin: 0 -8px 0 0;
	place-items: center;
	width: 44px;
}

.sc-size__gender-option input::before {
	background: var(--sc-paper);
	border: 2px solid var(--sc-ink-2);
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 20px;
	width: 20px;
}

.sc-size__gender-option input:checked::before {
	border-color: var(--sc-ink);
	box-shadow: inset 0 0 0 4px var(--sc-paper);
	background: var(--sc-ink);
}

.sc-size__gender-option input:focus-visible {
	outline: 2px solid var(--sc-ink);
	outline-offset: -6px;
	border-radius: 50%;
}

/* 店のサイズ表への導線 (4 型で共通) */

.sc-size__shop-link {
	color: var(--sc-ink);
	display: inline-block;
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-loose);
	min-height: 44px;
	padding: 10px 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-size__shop-link:hover,
.sc-size__shop-link:focus-visible {
	color: var(--sc-accent-ink);
}

.sc-size__table .sc-size__shop-link {
	white-space: nowrap;
}

.sc-size__card-link,
.sc-size__bar-link {
	margin: 4px 0 0;
}

/*
 * 訪問者ごとの出し分け (variant="auto")。
 *
 * 4 型を全部描いておき、振り分け (assets/js/size-finder.js) が section の
 * data-sc-size-variant に書いた型と一致する子だけを見せる。書き換わる前
 * (「auto」のまま = JavaScript が動かない環境) では、先頭の型 (--default = table) だけが見える。
 * 隠すのは CSS だけなので、印を消せば全部が出る (壊れても「何も出ない」にはならない)。
 */

.sc-size--split > .sc-size__variant {
	display: none;
}

.sc-size--split[data-sc-size-variant="auto"] > .sc-size__variant--default,
.sc-size--split[data-sc-size-variant="table"] > .sc-size__variant[data-sc-size-variant="table"],
.sc-size--split[data-sc-size-variant="cards"] > .sc-size__variant[data-sc-size-variant="cards"],
.sc-size--split[data-sc-size-variant="bars"] > .sc-size__variant[data-sc-size-variant="bars"],
.sc-size--split[data-sc-size-variant="prose"] > .sc-size__variant[data-sc-size-variant="prose"] {
	display: block;
}

/* ======================================================================
 * 試験台 (人が型を切り替えて見る操作盤)。ローカルと staging だけに出る。
 * includes/class-lab.php。色は全部トークン経由 (docs/store/design.md)。
 * ====================================================================== */

.sc-lab {
	color: var(--sc-ink);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
}

.sc-lab--page {
	margin: 28px 0;
}

.sc-lab--floating {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-lg);
	bottom: 12px;
	box-shadow: var(--sc-shadow-overlay);
	max-height: calc(100vh - 24px);
	max-width: min(420px, calc(100vw - 24px));
	overflow: auto;
	position: fixed;
	right: 12px;
	z-index: 60;
}

.sc-lab--floating[data-lab-active] {
	border-color: var(--sc-warn-ink);
}

.sc-lab__summary {
	cursor: pointer;
	font-size: var(--sc-text-sm);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	list-style: none;
	min-height: 44px;
	padding: 11px 16px;
	user-select: none;
}

.sc-lab__summary::-webkit-details-marker {
	display: none;
}

.sc-lab__summary::before {
	content: "▸ ";
}

.sc-lab--floating[open] .sc-lab__summary::before {
	content: "▾ ";
}

.sc-lab__body {
	border-top: 1px solid var(--sc-line-soft);
	padding: 12px 16px 16px;
}

/* テーマ装飾の打ち消し (サイズの引き当てと同じ理由)。 */

:where(.sc-lab) p,
:where(.sc-lab) fieldset,
:where(.sc-lab) div {
	background: none;
	border: 0;
	box-shadow: none;
}

:where(.sc-lab) p {
	margin: 0;
	padding: 0;
}

:where(.sc-lab) p::before,
:where(.sc-lab) p::after {
	content: none;
	display: none;
}

.sc-lab__form {
	display: grid;
	gap: 14px;
}

.sc-lab__status {
	background: var(--sc-paper-sub);
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
	padding: 8px 10px;
}

.sc-lab--floating[data-lab-active] .sc-lab__status {
	background: var(--sc-warn-bg);
	color: var(--sc-warn-ink);
}

.sc-lab__knob {
	border: 0;
	border-top: 1px solid var(--sc-line-soft);
	margin: 0;
	min-width: 0;
	padding: 10px 0 0;
}

.sc-lab__legend {
	font-size: var(--sc-text-sm);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	padding: 0;
}

.sc-lab__options {
	display: grid;
	gap: 0;
}

.sc-lab__option {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--sc-text-sm);
	gap: 4px;
	line-height: var(--sc-lh-loose);
	min-height: 44px;
}

/* ラジオ本体を 44px の的にする (サイズの引き当ての切り替えと同じ作り)。 */

.sc-lab__option input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: grid;
	flex: 0 0 44px;
	height: 44px;
	margin: 0 -8px 0 -12px;
	place-items: center;
	width: 44px;
}

.sc-lab__option input::before {
	background: var(--sc-paper);
	border: 2px solid var(--sc-ink-2);
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 18px;
	width: 18px;
}

.sc-lab__option input:checked::before {
	background: var(--sc-ink);
	border-color: var(--sc-ink);
	box-shadow: inset 0 0 0 3px var(--sc-paper);
}

.sc-lab__option input:focus-visible {
	border-radius: 50%;
	outline: 2px solid var(--sc-ink);
	outline-offset: -6px;
}

.sc-lab__note {
	color: var(--sc-ink-muted);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
}

.sc-lab__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sc-lab__apply,
.sc-lab__reset {
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
	font-size: var(--sc-text-md);
	font-weight: 700;
	line-height: var(--sc-lh-loose);
	min-height: 44px;
	padding: 0 18px;
}

.sc-lab__apply {
	background: var(--sc-ink);
	border: 1px solid var(--sc-ink);
	color: var(--sc-paper);
}

.sc-lab__reset {
	background: var(--sc-paper);
	border: 1px solid var(--sc-line-hover);
	color: var(--sc-ink);
}

.sc-lab__apply:focus-visible,
.sc-lab__reset:focus-visible {
	outline: 2px solid var(--sc-accent-ink);
	outline-offset: 2px;
}

.sc-lab__links a {
	color: var(--sc-ink);
	display: inline-block;
	line-height: var(--sc-lh-loose);
	min-height: 44px;
	padding: 10px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-lab__privacy,
.sc-lab__unavailable {
	color: var(--sc-ink-2);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-lh-body);
}

@media print {
	.sc-lab--floating {
		display: none;
	}
}
/* Independent Plan B shell: do not rely on generated utility classes for navigation. */
.sc-plan-b-page { color: var(--sc-ink); background: var(--sc-paper); }
.sc-planb-header { border-bottom: 1px solid var(--sc-planb-line); color: var(--sc-ink); }
.sc-planb-header__inner, .sc-planb-header__nav, .sc-planb-main { max-width: 1104px; margin: 0 auto; padding: 0 24px; }
.sc-planb-header__back { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-2); }
.sc-planb-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 0 4px; }
.sc-planb-header__brand { flex: 0 0 auto; color: var(--sc-ink); text-decoration: none; }
.sc-shop-shell .sc-store-logo { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 10 / 3; object-fit: contain; }
.sc-planb-header__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: 1; min-width: 0; margin: 0; border: 1px solid var(--sc-planb-accent); border-radius: var(--sc-radius-sm); overflow: hidden; background: var(--sc-paper); }
.sc-planb-header__search label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sc-planb-header__search input { appearance: none; width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; margin: 0; border: 0; border-radius: 0; background: var(--sc-paper); color: var(--sc-ink); font: inherit; font-size: 16px; box-shadow: none; }
.sc-planb-header__search input::placeholder, .sc-planb__search input::placeholder { color: var(--sc-ink-3); opacity: 1; }
.sc-planb-header__search button { min-height: 46px; min-width: 64px; padding: 8px 14px; border: 0; border-radius: 0; font-size: 14px; font-weight: 700; background: var(--sc-planb-accent); color: var(--sc-paper); cursor: pointer; }
.sc-planb-header__account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sc-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sc-planb-header__nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.sc-planb-header__nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--sc-ink); text-decoration: none; border-bottom: 3px solid transparent; padding-top: 3px; }
.sc-planb-header__nav a:hover { color: var(--sc-planb-accent); border-bottom-color: var(--sc-planb-accent); }
body.sc-plan-b-page .sc-planb-header a, body.sc-plan-b-page .sc-planb__hero .sc-planb__search-links a { color: var(--sc-ink); }
body.sc-plan-b-page .sc-planb-header__nav a:hover { color: var(--sc-planb-accent); }
.sc-planb-header a:focus-visible, .sc-plan-b-page button:focus-visible, .sc-plan-b-page input:focus-visible, .sc-plan-b-page select:focus-visible, .sc-planb a:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 3px; }
.sc-planb-main { padding-top: 24px; padding-bottom: 56px; min-height: 60vh; }
.sc-planb .sc-planb__hero--photo { background: var(--sc-planb-surface) url("../planb-preparation-bright.jpg") center 56% / cover no-repeat; min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 36px; margin: 0 0 40px; border: 0; text-align: left; }
.sc-planb__hero--photo .sc-planb__find { width: 64%; max-width: 640px; margin: 0; padding: 28px; background: var(--sc-planb-photo-panel); border-radius: var(--sc-radius-sm); }
.sc-planb__hero--photo .sc-planb__find-heading { text-align: left; }
.sc-planb__hero--photo h1 { color: var(--sc-ink); font-size: 28px; font-weight: 800; line-height: 1.5; margin: 0 0 18px; letter-spacing: .02em; }
.sc-planb__hero--photo .sc-planb__search { margin: 0; }
.sc-planb__hero--photo .sc-planb__search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.sc-planb__hero--photo .sc-planb__search input { width: 100%; font-size: 16px; }
.sc-planb__hero--photo .sc-planb__search-links { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 16px; gap: 4px 12px; }
.sc-planb__hero--photo .sc-planb__search-links a { background: transparent; border: 0; border-bottom: 1px solid var(--sc-planb-line); border-radius: 0; padding: 4px 0; min-height: 44px; min-width: 44px; width: auto; flex: none; font-size: 14px; }
.sc-plan-b-page .sc-planb__products { margin-bottom: 48px; padding-bottom: 32px; }
.sc-planb__scenes, .sc-planb__themes { margin: 0 0 56px; }
.sc-planb__scenes h2, .sc-planb__themes h2 { font-size: 26px; font-weight: 800; line-height: 1.5; margin: 0 0 20px; color: var(--sc-ink); }
.sc-planb__scenes nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-planb__scenes a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; min-height: 76px; background: var(--sc-planb-surface); border-bottom: 2px solid var(--sc-planb-line); color: var(--sc-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.sc-planb__scenes a:hover, .sc-planb__theme:hover { border-color: var(--sc-planb-accent); }
.sc-planb__section-note { font-size: 14px; color: var(--sc-ink-2); margin: -12px 0 24px; line-height: 1.8; }
.sc-planb__theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.sc-planb__theme { min-width: 0; display: flex; flex-direction: column; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-planb-line); padding-bottom: 16px; }
.sc-planb__theme-images { display: flex; justify-content: center; align-items: center; background: var(--sc-planb-surface); gap: 8px; padding: 16px; aspect-ratio: 1.8; overflow: hidden; }
.sc-planb__theme-images img { width: 30%; max-height: 100%; aspect-ratio: .85; object-fit: contain; mix-blend-mode: multiply; }
.sc-planb__theme h3 { font-size: 17px; font-weight: 700; line-height: 1.7; margin: 16px 0 12px; }
.sc-planb__theme-link { display: block; margin-top: auto; color: var(--sc-planb-accent); font-size: 14px; font-weight: 700; }
.sc-planb__member-invite { border-top: 1px solid var(--sc-planb-line); border-bottom: 1px solid var(--sc-planb-line); padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sc-planb__member-invite h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.sc-planb__member-invite p { font-size: 14px; line-height: 1.8; margin: 0; color: var(--sc-ink-2); }
.sc-planb__member-invite a { display: inline-flex; align-items: center; min-height: 48px; gap: 16px; border: 1px solid var(--sc-planb-accent); padding: 8px 20px; font-size: 14px; font-weight: 700; color: var(--sc-planb-accent); }
.sc-plan-b-page .sc-search-results__form { grid-template-columns: auto minmax(120px, 1fr) auto minmax(110px, .8fr); }
.sc-plan-b-page .sc-search-results__form input[type="hidden"] { display: none; }
.sc-planb__reset { margin: 12px 0 24px; font-size: 14px; }
.sc-search-results__intro { max-width: 672px; font-size: 14px; line-height: 1.8; margin: 16px 0; color: var(--sc-ink-2); }
.sc-planb__reset a { display: inline-flex; min-height: 44px; align-items: center; color: var(--sc-planb-accent); text-decoration: underline; }
.sc-planb-document { max-width: 672px; margin: 16px auto 40px; font-size: 14px; line-height: 1.8; }
.sc-planb-document h1 { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.sc-planb-document h2 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
.sc-planb-document p { margin: 16px 0; }
.sc-planb-document ol, .sc-planb-document ul { margin: 16px 0; padding-left: 1.75em; }
.sc-planb-document ol { list-style: decimal; }
.sc-planb-document ul { list-style: disc; }
.sc-planb-document li + li { margin-top: 8px; }
.sc-planb-document table { width: 100%; border-collapse: collapse; margin: 16px 0; overflow-wrap: anywhere; }
.sc-planb-document th, .sc-planb-document td { border: 1px solid #d8dcd7; padding: 10px 12px; text-align: left; vertical-align: top; }
.sc-planb-document th { background: #f6f7f1; font-weight: 700; }
.sc-planb-document td:first-child { width: 30%; }
.sc-planb-document a { color: var(--sc-planb-accent); text-decoration: underline; }
.sc-plan-b-page .sc-member { max-width: 672px; padding: 24px 0; color: var(--sc-ink); }
.sc-plan-b-page .sc-member .btn { min-height: 44px; height: auto; font-size: 14px; }
.sc-plan-b-page .sc-member .input, .sc-plan-b-page .sc-member .select { min-height: 48px; font-size: 16px; }
.sc-plan-b-page .sc-member .btn-neutral { background: var(--sc-planb-accent); border-color: var(--sc-planb-accent); color: var(--sc-paper); }
.sc-plan-b-page .sc-shop-footer__disclosure { font-size: 13px; line-height: 1.8; color: var(--sc-ink-3); }
@media (max-width: 767px) {
 .sc-planb-header__inner, .sc-planb-header__nav, .sc-planb-main { padding-left: 16px; padding-right: 16px; }
 .sc-planb-header__row { flex-wrap: wrap; justify-content: space-between; gap: 14px 10px; }
 .sc-shop-shell .sc-store-logo { width: min(180px, 50vw); }
 .sc-planb-header__account { gap: 5px; font-size: 13px; }
 .sc-planb-header__account svg { width: 18px; }
 .sc-planb-header__search { order: 3; flex-basis: 100%; }
 .sc-planb-header__nav ul { gap: 0 18px; }
 .sc-planb-header__nav a { font-size: 13px; min-height: 44px; }
 .sc-planb-main { padding-top: 16px; }
 .sc-planb .sc-planb__hero--photo { min-height: 0; padding: 64px 12px 16px; background-position: 72% center; margin-bottom: 32px; }
 .sc-planb__hero--photo .sc-planb__find { width: 100%; padding: 20px 16px; }
 .sc-planb__hero--photo h1 { font-size: 24px; }
 .sc-planb__hero--photo .sc-planb__search-links { gap: 0 12px; }
 .sc-planb__hero--photo .sc-planb__search-links a { font-size: 13px; }
 .sc-planb__scenes h2, .sc-planb__themes h2 { font-size: 22px; }
 .sc-planb__scenes nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .sc-planb__scenes a { font-size: 14px; padding: 14px 12px; min-height: 72px; }
 .sc-planb__theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
 .sc-planb__theme-images { gap: 4px; padding: 8px; }
 .sc-planb__theme-images img { display: none; }
 .sc-planb__theme-images img:first-child { display: block; width: 80%; aspect-ratio: 1; }
 .sc-planb__theme h3 { font-size: 15px; }
 .sc-planb__member-invite { align-items: flex-start; flex-direction: column; }
 .sc-plan-b-page .sc-search-results__form { grid-template-columns: 1fr; }
}

/* Account controls share the storefront typography and touch target baseline. */
.sc-account-settings summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.8; font-weight: 700; }
.sc-account-settings .btn { min-height: 44px; height: auto; white-space: normal; line-height: 1.8; }
.sc-account-settings input:not([type="checkbox"]) { min-height: 44px; font-size: 16px; }
.sc-account-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.8; cursor: pointer; }
.sc-account-check input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--sc-ink); }
.sc-notifications { max-width: 720px; font-size: 15px; line-height: 1.8; }
.sc-notifications h2 { margin: 0 0 12px; font-size: 20px; }
.sc-notifications p { margin: 0 0 16px; }
.sc-notifications-status { padding: 12px 16px; background: #f1f4ef; border-radius: 6px; }
.sc-notifications-note { color: #555d51; font-size: 14px; }
.sc-notifications-form { display: grid; gap: 20px; }
.sc-notifications-master { font-weight: 700; border-bottom: 1px solid #d9ded5; padding-bottom: 18px; }
.sc-notifications-targets { margin: 0; padding: 0; min-width: 0; border: 0; }
.sc-notifications-targets > legend { margin-bottom: 12px; font-size: 17px; font-weight: 700; }
.sc-notifications-interest { margin: 16px 0; padding: 14px 18px; min-width: 0; border: 1px solid #d9ded5; border-radius: 6px; }
.sc-notifications-interest > legend { padding: 0 6px; max-width: 100%; overflow-wrap: anywhere; font-weight: 700; }
.sc-notifications-empty, .sc-notifications-help { color: #555d51; font-size: 14px; }
.sc-notifications-form > .btn { justify-self: start; min-width: 200px; background: #59613c; border-color: #59613c; color: #fff; }
@media (max-width: 639px) { .sc-notifications-form > .btn { width: 100%; } .sc-notifications-interest { padding: 12px; } }
.sc-account-recommendation-list { display: grid; gap: 16px; list-style: none; padding: 0; }
.sc-account-recommendation-list li { padding: 16px; border: 1px solid var(--sc-line); border-radius: 8px; }
.sc-account-recommendation-list a { display: block; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.sc-account-recommendation-list .sc-save { margin-top: 8px; }

/* Private interest forms and the normal blog save component. */
.sc-member-interests select { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
.sc-member-interests summary { overflow-wrap: anywhere; }
.sc-member-interests details { border-bottom: 1px solid var(--sc-line); padding-bottom: 12px; margin-bottom: 12px; }
.sc-member-interests form { min-width: 0; }
.sc-saved-articles .btn { min-height: 44px; height: auto; white-space: normal; line-height: 1.8; }
.sc-saved-articles input { min-height: 44px; font-size: 16px; }
.sc-saved-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sc-saved-pagination [aria-current="page"] { font-weight: 700; border-color: var(--sc-ink); }
.sc-blog-save { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; margin: 24px 0; border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-paper); color: var(--sc-ink); font-size: 14px; line-height: 1.8; }
.sc-blog-save .sc-save { position: static; width: auto; min-width: 88px; min-height: 44px; flex-shrink: 0; }
.sc-blog-save span { overflow-wrap: anywhere; }
.sc-blog-save a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink); text-decoration: underline; font-size: 14px; line-height: 1.8; }
.sc-blog-save :focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
/* Keep the blog theme's later link-color rule from overriding this new component. */
.cps-post-main .sc-blog-save a { color: var(--sc-ink); }
.sc-member.sc-member--account { width: 100%; max-width: 944px; }
.sc-account-layout { display: grid; gap: 24px; }
.sc-account-content { min-width: 0; }
.sc-account-sidebar { display: none; }
.sc-account-intro { margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
.sc-account-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-account-menu a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 156px; padding: 16px 10px; border: 1px solid var(--sc-ink-muted); border-radius: 8px; text-align: center; color: var(--sc-ink); text-decoration: none; font-size: 15px; line-height: 1.8; }
.sc-account-menu a span { font-weight: 700; }
.sc-account-menu a small { font-size: 13px; line-height: 1.8; }
.sc-account-menu a:hover, .sc-account-sidebar a:hover { background: var(--sc-accent-bg); }
.sc-account-menu svg { color: var(--sc-accent-ink); flex-shrink: 0; }
.sc-account-back, .sc-account-logout a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.8; text-decoration: underline; }
.sc-account-back { margin-bottom: 16px; }
.sc-account-logout { margin-top: 32px; }
.sc-account-content > section > h2 { font-size: 18px; }
@media (min-width: 900px) {
 .sc-account-layout { grid-template-columns: 216px minmax(0, 672px); gap: 32px; align-items: start; }
 .sc-account-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--sc-ink-muted); padding-right: 16px; }
 .sc-account-sidebar a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-size: 14px; line-height: 1.8; color: var(--sc-ink); border-radius: 4px; text-decoration: none; }
 .sc-account-sidebar a[aria-current="page"] { background: var(--sc-accent-bg); font-weight: 700; border-left: 3px solid var(--sc-accent-ink); }
 .sc-account-back { display: none; }
}

/* カラコンは色を先に、シリーズを補足として表示する。 */
.sc-mini .sc-mini__title .sc-mini__color-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
.sc-mini .sc-mini__title .sc-mini__series-name { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #59614c; }
.sc-mini .sc-mini__image-note { margin: 0; font-size: 11px; line-height: 1.5; color: #59614c; }

/* Preparation guides link to item catalogs without combining scene filters. */
.sc-plan-b-page .sc-search-results__form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.sc-preparation__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0 32px; }
.sc-preparation__card { display:block; padding:24px; border:1px solid var(--sc-planb-line); background:var(--sc-planb-surface); color:var(--sc-ink); text-decoration:none; }
.sc-preparation__card h3 { margin:0 0 12px; font-size:20px; }
.sc-preparation__card p { margin:0 0 20px; }
.sc-preparation__card span { color:var(--sc-planb-accent); font-weight:700; }
.sc-preparation__card:hover { border-color:var(--sc-planb-accent); }
.sc-preparation__card:focus-visible { outline:2px solid var(--sc-planb-accent); outline-offset:3px; }
@media(max-width:640px) { .sc-plan-b-page .sc-search-results__form, .sc-preparation__grid { grid-template-columns:1fr; } .sc-plan-b-page .sc-search-results__form button { grid-column:auto; } }
.sc-preparation > h2 { font-size:24px; line-height:1.5; margin:28px 0 16px; }

.sc-planb__theme-grid--editorial { margin-top:24px; }
.sc-planb__scenes .sc-planb__theme { display:block; }
.sc-planb__theme-grid--editorial .sc-planb__theme-images:empty { display:none; }

/* Private account forms share one responsive rhythm. */
.sc-private-form { display:grid; gap:20px; margin:20px 0 32px; font-size:14px; line-height:1.8; }
.sc-profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; align-items:start; }
.sc-private-form label { display:grid; gap:8px; min-width:0; font-weight:600; }
.sc-private-form small, .sc-member-color h2 small, .sc-member-lenses h2 small { font-size:12px; font-weight:400; color:var(--sc-ink-muted); }
.sc-private-form input { min-width:0; max-width:100%; min-height:44px; }
.sc-private-form .btn { min-height:44px; width:auto; justify-self:start; }
.sc-personal-profile h2,.sc-member-lenses h2,.sc-member-color h2 { margin:0 0 12px; font-size:18px; font-weight:700; }
.sc-personal-profile p,.sc-member-lenses p,.sc-member-color p { font-size:14px; line-height:1.8; }
.sc-form-help { color:var(--sc-ink-muted); }
.sc-form-actions { display:flex; flex-wrap:wrap; gap:12px; }
.sc-color-controls { display:flex; align-items:end; gap:16px; }
.sc-color-controls input[type="color"] { width:64px; height:48px; cursor:pointer; border:1px solid var(--sc-ink-muted); padding:4px; background:#fff; border-radius:6px; }
.sc-color-controls input[type="text"] { width:160px; font-family:monospace; }
.sc-beta { display:inline-block; padding:2px 8px; border-radius:4px; background:var(--sc-accent-bg); font-size:12px; vertical-align:middle; }
.sc-account-greeting { margin-bottom:12px; font-size:18px; font-weight:700; }
.sc-address-section { margin:8px 0 0; padding:20px; border:1px solid var(--sc-line); border-radius:8px; background:var(--sc-paper); }
.sc-address-section legend { padding:0 8px; font-size:17px; font-weight:700; }
.sc-address-wide { grid-column:1/-1; }
.sc-email-edit { display:block; width:fit-content; margin-left:auto; padding-top:8px; min-height:44px; }
#sc-email-settings { scroll-margin-top:24px; }
.sc-color-picker-box { display:block; position:relative; width:80px; height:48px; }
.sc-color-controls { align-items:start; }
.sc-color-controls>label { grid-template-rows:26px 48px; align-content:start; }
.sc-color-picker-box input[type="color"],.sc-color-picker-box.is-empty input[type="color"] { display:block; position:absolute; inset:0; margin:0; box-sizing:border-box; }
.sc-private-form select { min-width:0; min-height:44px; max-width:100%; }
.sc-postal-tools { grid-column:1/-1; }
.sc-postal-field { min-width:0; }.sc-postal-field .sc-postal-tools { margin-top:8px; }
.sc-postal-tools [hidden] { display:none; }
.sc-postal-tools [role="status"]:empty { display:none; }
.sc-postal-tools [role="status"] { margin:8px 0; font-size:13px; }
.sc-postal-tools label { margin-top:12px; }
.sc-color-picker-box .sc-color-empty { display:none; }
.sc-color-picker-box input[type="color"] { width:80px; height:48px; }
.sc-color-picker-box.is-empty { border:0; outline:1px dashed var(--sc-ink-muted); outline-offset:-1px; border-radius:6px; background:#f5f5f2; }
.sc-color-picker-box.is-empty .sc-color-empty { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; font-size:12px; font-weight:400; color:var(--sc-ink); }
.sc-color-picker-box.is-empty input[type="color"] { position:absolute; inset:0; opacity:0; }
.sc-color-picker-box:focus-within { outline:2px solid var(--sc-focus); outline-offset:3px; }
.sc-recommendation-discover { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.sc-recommendation-discover a { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--sc-ink-muted); border-radius:8px; background:var(--sc-paper); color:var(--sc-ink); text-decoration:none; font-size:14px; line-height:1.8; }
.sc-recommendation-discover a strong { font-size:18px; }
.sc-recommendation-discover a:hover { background:var(--sc-accent-bg); }
.sc-recommendation-discover a:focus-visible { outline:2px solid var(--sc-focus); outline-offset:3px; }
@media(max-width:540px) { .sc-address-section { padding:16px; } .sc-recommendation-discover { grid-template-columns:1fr; } }
@media(min-width:900px) { .sc-account-sidebar .sc-sidebar-logout { margin-top:32px; border-top:1px solid var(--sc-line); border-radius:0; } .sc-mobile-logout { display:none; } }
@media(max-width:540px) { .sc-profile-fields { grid-template-columns:1fr; } .sc-private-form>.btn { width:100%; } }