@charset "UTF-8";
/*
 * SMALL BIZ NOTE｜スモールビズノート  デザイン
 * 配色：ネイビー × アンバー
 * ------------------------------------------------------------------
 *  1. トークン
 *  2. ベース
 *  3. ボタン・共通パーツ
 *  4. セクション
 *  5. トップページ
 *  6. 診断ページ
 *  7. 用語集
 *  8. 記事内パーツ（ショートコード）
 *  9. レスポンシブ
 * ------------------------------------------------------------------
 */

/* ============================================================
 * 1. トークン
 * ============================================================ */
html:root {
	--sb-bg: #f6f8fb;
	--sb-surface: #ffffff;
	--sb-brand: #2f6fb5;
	--sb-brand-deep: #1f4e7a;
	--sb-brand-dark: #16304d;
	--sb-brand-pale: #e8f0f9;
	--sb-brand-mist: #f1f6fc;
	/* アクセントは色相30°前後のアンバー系（ネイビーと対比させるビジネス配色。2026-08-17 ワーカーD改定） */
	--sb-accent: #f0a03a;
	--sb-accent-deep: #d9821a;
	--sb-accent-dark: #b8680f;
	--sb-accent-pale: #fdf3e3;
	--sb-ink: #16304d;
	--sb-text: #2c3a47;
	--sb-muted: #6a7a88;
	--sb-line: #e1e8ef;
	--sb-radius: 10px;
	--sb-radius-lg: 16px;
	--sb-shadow: 0 2px 16px rgba(22, 48, 77, .06);
	--sb-shadow-lift: 0 10px 30px rgba(22, 48, 77, .10);
	--sb-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--sb-latin: "Jost", sans-serif;

	/* SWELL 側の変数も揃える */
	--color_main: #2f6fb5;
	--color_main_thin: rgba(47, 111, 181, .12);
	--color_main_dark: #1f4e7a;
	--color_sub: #f0a03a;
	--color_text: #2c3a47;
	--color_link: #1f4e7a;
	--color_htag: #16304d;
	--color_bg: #f6f8fb;
	--color_border: #e1e8ef;
	--color_gray: #8a99a6;
	--color_deep01: #1f4e7a;
	--color_deep02: #d9821a;
	--color_deep03: #16304d;
	--color_pale01: #e8f0f9;
	--color_pale02: #fdf3e3;
	--color_pale03: #eef3fa;
}

/* ============================================================
 * 2. ベース
 * ============================================================ */
body.sbn {
	background-color: var(--sb-bg);
	color: var(--sb-text);
}

.sbn .post_content h2,
.sbn .post_content h3,
.sbn .p-articleThumb__ttl,
.sbn .c-postTitle__ttl {
	font-family: var(--sb-heading);
	color: var(--sb-ink);
	letter-spacing: .02em;
}

/* 見出し h2：ゴシック＋ネイビー→アンバーのライン1本のみ
   SWELL既定は上下に 2px の濃い罫線（--color_htag）を引くため、
   本体の border と ::before の border-top を両方とも打ち消している。 */
.sbn .post_content h2 {
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	font-size: clamp(20px, 3.4vw, 25px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--sb-ink);
	margin: 3em 0 1.5em;
	padding: 0 0 .62em;
}

/* SWELL の濃い罫線（h2::before の border-top）を消す */
.sbn .post_content h2::before {
	display: none;
}

/* 唯一のラインをネイビー→アンバーのグラデーションにする */
.sbn .post_content h2::after {
	content: "";
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 2px;
	border: none;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sb-brand) 0%, var(--sb-accent) 100%);
	transform: none;
}

/* 記事の先頭にある h2 は上の余白を詰める */
.sbn .post_content > h2:first-child {
	margin-top: 1.2em;
}

/* 見出し h3：左に細いネイビーのライン */
/* h3 は本文と見分けがつかなかったため、淡い面と左のアクセントで見出しだと分かるようにする。
   罫線の色は h2 と同じネイビー→アンバーのグラデーションにして、親子関係が伝わるようにした
   （2026-08-15 ユーザー指摘「見出しが分かりづらい」）。 */
.sbn .post_content h3 {
	position: relative;
	border: none;
	background: var(--sb-brand-mist);
	border-radius: 0 10px 10px 0;
	font-size: clamp(17px, 2.8vw, 19.5px);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--sb-ink);
	margin: 2.8em 0 1.15em;
	padding: .66em 1.1em .66em 1.35em;
	overflow: hidden;
}

/* SWELL が h3::before に height:2px を入れているため、top/bottom だけでは伸びない。
   height を明示的に打ち消すこと（2026-08-15 実測: バーが2pxの点になっていた）。 */
.sbn .post_content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	height: auto;
	width: 4px;
	border: none;
	border-radius: 0;
	transform: none;
	background: linear-gradient(180deg, var(--sb-brand) 0%, var(--sb-accent) 100%);
}

.sbn .post_content h3::after {
	display: none;
}

.sbn .post_content h2 + h3 {
	margin-top: 1.6em;
}

.sbn .post_content a {
	color: var(--sb-brand-deep);
	text-underline-offset: .2em;
}

.sb-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* ヘッダーロゴ（スマホ）
   SWELL既定ではSPヘッダーの高さがロゴ高そのものになるため、
   ロゴがヘッダー下端からはみ出す。高さを確保したうえで上下中央に置く。 */
@media (max-width: 959px) {
	.l-header__inner {
		min-height: 56px;
		align-items: center;
	}

	.l-header__logo {
		width: auto;
		max-width: calc(100% - 92px);
		display: flex;
		align-items: center;
	}

	.l-header__logo .c-headLogo,
	.l-header__logo .c-headLogo__link {
		width: auto;
		display: flex;
		align-items: center;
		line-height: 1;
	}

	.c-headLogo__img {
		display: block;
		width: auto;
		height: var(--logo_size_sp, 32px);
		max-width: 100%;
		object-fit: contain;
	}
}

.sb-prNote {
	font-size: 12px;
	color: var(--sb-muted);
	margin: 0 0 1em;
}

/* 画面幅いっぱいに広げる（サイドバー無しページ用）
   ※ 50vw はスクロールバー幅を含むため、横スクロールが出ないよう親側で clip する
   ※ .sb-sec 側の margin/padding 指定に負けないよう、あえて詳細度を上げている */
.sbn .sb-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

body.sb-front {
	overflow-x: clip;
}

.sb-frontMain {
	padding: 0;
	background: none;
	box-shadow: none;
}

.sb-frontMain > .sb-sec:first-child,
.sb-frontMain > .sb-hero:first-child {
	margin-top: calc(-1 * var(--swl-pt_content, 0px));
}

/* ============================================================
 * 3. ボタン・共通パーツ
 * ============================================================ */
.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .95em 2em;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sb-btn--primary {
	background: var(--sb-accent-deep);
	color: #fff;
	box-shadow: 0 6px 18px rgba(217, 130, 26, .30);
}

.sb-btn--primary:hover {
	background: var(--sb-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(184, 104, 15, .36);
}

.sb-btn--ghost {
	background: #fff;
	color: var(--sb-accent-deep);
	border: 1px solid var(--sb-accent);
}

.sb-btn--ghost:hover {
	background: var(--sb-accent-pale);
	color: var(--sb-accent-deep);
	transform: translateY(-2px);
}

.sb-btn--wide {
	width: min(100%, 420px);
}

/* 記事本文の中では SWELL の .post_content a が文字色を上書きしてしまうため、
   ボタンだけは打ち消す（2026-08-15 実測: 白のはずが #1f4e7a で表示されていた）。 */
.post_content a.sb-btn--primary,
.post_content a.sb-btn--primary:hover,
.post_content a.sb-btn--primary:visited,
.post_content a.sb-btn--primary:focus {
	color: #fff;
	font-weight: 600;
}

.post_content a.sb-btn--ghost,
.post_content a.sb-btn--ghost:hover,
.post_content a.sb-btn--ghost:visited,
.post_content a.sb-btn--ghost:focus {
	color: var(--sb-accent-deep);
	font-weight: 600;
}

.sb-btnWrap {
	text-align: center;
	margin: 2em 0;
}

.sb-btnWrap__sub {
	display: block;
	font-size: 12px;
	color: var(--sb-muted);
	margin-top: .7em;
}

.sb-more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 14px;
	color: var(--sb-brand-deep);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.sb-more:hover {
	color: var(--sb-accent-deep);
}

/* --- サイドバーの検索フォーム ---
   ブロックエディタ既定の「四角い枠＋グレーのボタン」を、
   丸みのある1本のバーと円形の虫めがねボタンに置き換える。
   SWELL 側の .wp-element-button に負けないよう .sbn を前置する。 */
.sbn .widget_search .wp-block-search__label {
	display: block;
	margin: 0 0 .9em;
	font-family: var(--sb-heading);
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--sb-ink);
}

.sbn .widget_search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 18px;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	box-shadow: var(--sb-shadow);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.sbn .widget_search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--sb-brand);
	box-shadow: 0 0 0 3px rgba(47, 111, 181, .18);
}

.sbn .widget_search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 0;
	border: none;
	background: transparent;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sb-text);
}

.sbn .widget_search .wp-block-search__input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.sbn .widget_search .wp-block-search__input::placeholder {
	color: #93a4b1;
}

/* 検索アイコンだけの丸ボタン（文字は読み上げ用に残し、見た目上は隠す） */
.sbn .widget_search .wp-block-search__button {
	flex: none;
	width: 38px;
	height: 38px;
	min-width: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--sb-accent-deep);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.sbn .widget_search .wp-block-search__button:hover {
	background-color: var(--sb-accent-dark);
	transform: scale(1.06);
}

.sbn .widget_search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--sb-brand-deep);
	outline-offset: 2px;
}

/* ============================================================
 * 4. セクション
 * ============================================================ */
.sb-sec {
	margin: 0;
	padding: 68px 0;
}

.sb-sec--tint {
	background: var(--sb-brand-mist);
}

/* --pink は複製元サイトの名残。新規マークアップでは --accent を使う（両方効く） */
.sb-sec--accent,
.sb-sec--pink {
	background: var(--sb-accent-pale);
}

.sb-sec__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 20px;
}

.sb-sec__head {
	text-align: center;
	margin-bottom: 38px;
}

.sb-sec__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--sb-brand);
	margin-bottom: .7em;
}

.sb-sec__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(21px, 3.4vw, 28px);
	font-weight: 500;
	color: var(--sb-ink);
	line-height: 1.5;
	margin: 0;
	letter-spacing: .03em;
}

.sb-sec__sub {
	font-size: 14px;
	color: var(--sb-muted);
	line-height: 1.9;
	margin: 1em auto 0;
	max-width: 660px;
}

.sb-sec__foot {
	text-align: center;
	margin-top: 34px;
}

/* ============================================================
 * 5. トップページ
 * ============================================================ */

/* --- ヒーロー --- */
.sb-hero {
	position: relative;
	background: linear-gradient(160deg, #f1f6fc 0%, #fdf3e3 100%);
	padding: 62px 0 70px;
	overflow: hidden;
}

.sb-hero__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 20px;
	position: relative;
	z-index: 2;
}

.sb-hero__label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: #fff;
	color: var(--sb-brand-deep);
	font-size: 12px;
	letter-spacing: .08em;
	padding: .5em 1.1em;
	border-radius: 999px;
	box-shadow: var(--sb-shadow);
	margin-bottom: 1.4em;
}

.sb-hero__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(28px, 6vw, 46px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--sb-ink);
	letter-spacing: .04em;
	margin: 0 0 .5em;
}

.sb-hero__ttl em {
	font-style: normal;
	position: relative;
	white-space: nowrap;
}

.sb-hero__ttl em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .06em;
	height: .34em;
	background: rgba(240, 160, 58, .32);
	z-index: -1;
}

.sb-hero__lead {
	font-size: clamp(14px, 2.3vw, 16px);
	line-height: 2;
	color: var(--sb-text);
	max-width: 30em;
	margin: 0 0 2em;
}

.sb-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 2.6em;
}

.sb-hero__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: 720px;
}

.sb-hero__step {
	background: rgba(255, 255, 255, .82);
	border-radius: var(--sb-radius);
	padding: 18px 16px;
	text-align: center;
}

.sb-hero__stepEn {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--sb-brand);
	margin-bottom: .5em;
}

.sb-hero__stepTtl {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--sb-ink);
	margin-bottom: .35em;
}

.sb-hero__stepTxt {
	display: block;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sb-muted);
}

.sb-hero__deco {
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(240, 160, 58, .22), rgba(47, 111, 181, .14) 60%, transparent 70%);
	z-index: 1;
	pointer-events: none;
}

/* --- 悩みタイル --- */
.sb-concernGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.sb-concern {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 24px 12px 20px;
	text-align: center;
	text-decoration: none;
	color: var(--sb-ink);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sb-concern:hover {
	transform: translateY(-3px);
	border-color: var(--sb-brand);
	box-shadow: var(--sb-shadow-lift);
	color: var(--sb-brand-deep);
}

.sb-concern__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
	margin-bottom: 6px;
}

.sb-concern:nth-child(even) .sb-concern__icon {
	background: var(--sb-accent-pale);
	color: var(--sb-accent-deep);
}

.sb-concern__label {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .02em;
}

.sb-concern__note {
	font-size: 11px;
	color: var(--sb-muted);
}

/* --- ツールのタイプ --- */
.sb-typeGrid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.sb-type {
	display: block;
	background: var(--sb-surface);
	border-radius: var(--sb-radius);
	padding: 24px 18px;
	text-decoration: none;
	color: var(--sb-text);
	box-shadow: var(--sb-shadow);
	border-top: 3px solid var(--sb-brand);
	transition: transform .2s ease, box-shadow .2s ease;
}

.sb-type:hover {
	transform: translateY(-4px);
	box-shadow: var(--sb-shadow-lift);
	color: var(--sb-text);
}

.sb-type__icon {
	color: var(--sb-brand-deep);
	margin-bottom: 10px;
}

.sb-type__label {
	display: block;
	font-family: var(--sb-heading);
	font-size: 17px;
	color: var(--sb-ink);
	margin-bottom: .6em;
}

.sb-type__lead {
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--sb-muted);
	margin: 0 0 1em;
}

.sb-type__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-type__tag {
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .04em;
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
	padding: 3px 10px;
	border-radius: 999px;
}

/* --- 3つの軸 --- */
.sb-axisGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	counter-reset: axis;
}

.sb-axis {
	position: relative;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	padding: 34px 26px 30px;
	text-align: center;
	box-shadow: var(--sb-shadow);
}

.sb-axis::before {
	counter-increment: axis;
	content: counter(axis);
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sb-brand);
	color: #fff;
	font-family: var(--sb-latin);
	font-size: 14px;
}

.sb-axis__icon {
	color: var(--sb-accent-deep);
	margin-bottom: 10px;
}

.sb-axis__ttl {
	font-family: var(--sb-heading);
	font-size: 18px;
	color: var(--sb-ink);
	margin: 0 0 .8em;
}

.sb-axis__txt {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--sb-muted);
	margin: 0;
	text-align: left;
}

/* --- 診断CTA --- */
.sb-shindanCta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 30px;
	background: linear-gradient(120deg, #f1f6fc 0%, #fdf3e3 100%);
	border-radius: var(--sb-radius-lg);
	padding: 44px 46px;
	overflow: hidden;
}

.sb-shindanCta__body {
	flex: 1;
	min-width: 0;
}

.sb-shindanCta__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--sb-brand);
	margin-bottom: .8em;
}

.sb-shindanCta__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(20px, 3.2vw, 26px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--sb-ink);
	margin: 0 0 .7em;
}

.sb-shindanCta__lead {
	font-size: 14px;
	line-height: 1.95;
	color: var(--sb-text);
	margin: 0 0 1.6em;
	max-width: 34em;
}

.sb-shindanCta__note {
	font-size: 12px;
	color: var(--sb-muted);
	margin: .9em 0 0;
}

.sb-shindanCta__deco {
	color: var(--sb-brand);
	opacity: .28;
	flex-shrink: 0;
}

/* --- 記事カード --- */
.sb-cardGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.sb-card {
	background: var(--sb-surface);
	border-radius: var(--sb-radius);
	overflow: hidden;
	box-shadow: var(--sb-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.sb-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sb-shadow-lift);
}

.sb-card__link {
	display: block;
	text-decoration: none;
	color: var(--sb-text);
	height: 100%;
}

.sb-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sb-brand-pale);
	overflow: hidden;
}

.sb-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-card__noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--sb-brand);
	opacity: .5;
}

.sb-card__body {
	padding: 16px 18px 20px;
}

.sb-card__cat {
	display: inline-block;
	font-size: 11px;
	background: var(--sb-accent-pale);
	color: var(--sb-accent-deep);
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: .8em;
}

.sb-card__ttl {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--sb-ink);
	margin: 0 0 .6em;
}

.sb-card__excerpt {
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--sb-muted);
	margin: 0 0 1em;
}

.sb-card__date {
	font-family: var(--sb-latin);
	font-size: 11.5px;
	color: var(--sb-muted);
	letter-spacing: .06em;
}

/* --- 空状態 --- */
.sb-empty {
	background: var(--sb-surface);
	border: 1px dashed var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 40px 24px;
	text-align: center;
	color: var(--sb-muted);
	font-size: 14px;
	line-height: 1.9;
}

/* --- はじめての方へ（3ステップ） --- */
.sb-stepGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sb-step {
	background: var(--sb-surface);
	border-radius: var(--sb-radius);
	padding: 26px 22px;
	border-left: 3px solid var(--sb-accent);
	border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
}

.sb-step__num {
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--sb-accent-deep);
	display: block;
	margin-bottom: .6em;
}

.sb-step__ttl {
	font-family: var(--sb-heading);
	font-size: 17px;
	color: var(--sb-ink);
	margin: 0 0 .7em;
}

.sb-step__txt {
	font-size: 13px;
	line-height: 1.95;
	color: var(--sb-muted);
	margin: 0;
}

/* ============================================================
 * 6. 診断ページ
 * ============================================================ */
.sb-shindan {
	max-width: 780px;
	margin-inline: auto;
}

.sb-shindan__intro {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	padding: 32px 30px;
	box-shadow: var(--sb-shadow);
	margin-bottom: 26px;
	text-align: center;
}

.sb-shindan__introTtl {
	font-family: var(--sb-heading);
	font-size: clamp(20px, 4vw, 26px);
	color: var(--sb-ink);
	margin: 0 0 .7em;
	line-height: 1.5;
}

.sb-shindan__introTxt {
	font-size: 14px;
	line-height: 2;
	color: var(--sb-muted);
	margin: 0 0 1.6em;
}

.sb-shindan__meta {
	display: flex;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--sb-brand-deep);
}

.sb-shindan__meta span {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

/* 進捗 */
.sb-progress {
	margin-bottom: 20px;
}

.sb-progress__bar {
	height: 6px;
	background: var(--sb-brand-pale);
	border-radius: 999px;
	overflow: hidden;
}

.sb-progress__in {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--sb-brand), var(--sb-accent));
	border-radius: 999px;
	transition: width .35s ease;
}

.sb-progress__txt {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--sb-muted);
	margin-top: .7em;
	font-family: var(--sb-latin);
	letter-spacing: .06em;
}

/* 設問 */
.sb-q {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	padding: 34px 30px;
	box-shadow: var(--sb-shadow);
}

.sb-q__num {
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--sb-brand);
	display: block;
	margin-bottom: .8em;
}

.sb-q__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(18px, 3.4vw, 22px);
	line-height: 1.6;
	color: var(--sb-ink);
	margin: 0 0 .6em;
}

.sb-q__note {
	font-size: 12.5px;
	color: var(--sb-muted);
	line-height: 1.8;
	margin: 0 0 1.6em;
}

.sb-q__options {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 16px 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sb-text);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
	font-family: inherit;
}

.sb-opt:hover {
	border-color: var(--sb-brand);
	background: var(--sb-brand-mist);
	transform: translateX(3px);
}

.sb-opt__mark {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--sb-line);
	flex-shrink: 0;
	position: relative;
	transition: border-color .18s ease;
}

.sb-opt:hover .sb-opt__mark {
	border-color: var(--sb-brand);
}

.sb-opt:hover .sb-opt__mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--sb-brand);
}

.sb-q__foot {
	margin-top: 22px;
	text-align: center;
}

.sb-back {
	background: none;
	border: none;
	font-size: 13px;
	color: var(--sb-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .25em;
	font-family: inherit;
}

.sb-back:hover {
	color: var(--sb-brand-deep);
}

/* 結果 */
.sb-result {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
}

.sb-result__head {
	background: linear-gradient(120deg, #f1f6fc 0%, #fdf3e3 100%);
	padding: 40px 32px 34px;
	text-align: center;
}

.sb-result__en {
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--sb-brand);
	display: block;
	margin-bottom: 1em;
}

.sb-result__name {
	font-family: var(--sb-heading);
	font-size: clamp(24px, 5.4vw, 34px);
	font-weight: 500;
	color: var(--sb-ink);
	margin: 0 0 .4em;
	letter-spacing: .03em;
}

.sb-result__catch {
	font-size: 15px;
	color: var(--sb-accent-deep);
	margin: 0;
	line-height: 1.7;
}

.sb-result__body {
	padding: 30px 32px 36px;
}

.sb-result__lead {
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--sb-text);
	margin: 0 0 2em;
}

.sb-result__block {
	margin-bottom: 2em;
}

.sb-result__blockTtl {
	display: flex;
	align-items: center;
	gap: .5em;
	font-family: var(--sb-heading);
	font-size: 17px;
	color: var(--sb-ink);
	margin: 0 0 .9em;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--sb-line);
}

.sb-result__blockTtl .sb-icon {
	color: var(--sb-brand);
}

.sb-tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-tagList li {
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
}

.sb-checkList {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sb-checkList li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--sb-text);
	background: var(--sb-brand-mist);
	border-radius: 10px;
	padding: 12px 16px;
}

.sb-checkList li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: .3em;
	border-radius: 50%;
	background: var(--sb-brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 6.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.sb-result__pace {
	background: var(--sb-accent-pale);
	border-radius: var(--sb-radius);
	padding: 22px 24px;
}

.sb-result__paceName {
	font-family: var(--sb-heading);
	font-size: 18px;
	color: var(--sb-accent-deep);
	margin: 0 0 .6em;
}

.sb-result__paceLead {
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--sb-text);
	margin: 0 0 1em;
}

.sb-result__paceTips {
	margin: 0;
	padding-left: 1.3em;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--sb-text);
	list-style: disc;
}

.sb-result__paceTips li::marker {
	color: var(--sb-accent-deep);
}

/* 診断結果の「続けて読む」リンク一覧 */
.sb-linkList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sb-linkList li {
	margin: 0;
}

.sb-linkList a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--sb-brand-pale);
	background: var(--sb-brand-mist);
	border-radius: 999px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sb-brand-deep);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

.sb-linkList a:hover {
	background: var(--sb-brand-pale);
	border-color: var(--sb-brand);
}

.sb-result__note {
	background: var(--sb-accent-pale);
	border: 1px solid var(--sb-accent);
	border-radius: var(--sb-radius);
	padding: 18px 20px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--sb-accent-deep);
}

.sb-result__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px solid var(--sb-line);
}

.sb-result__disclaimer {
	font-size: 12px;
	line-height: 1.9;
	color: var(--sb-muted);
	margin: 2em 0 0;
	text-align: center;
}

/* ============================================================
 * 7. 用語集
 * ============================================================ */
.sb-glossIndex__tools {
	background: var(--sb-surface);
	border-radius: var(--sb-radius);
	padding: 20px 22px;
	box-shadow: var(--sb-shadow);
	margin-bottom: 30px;
}

.sb-glossSearch {
	position: relative;
	margin-bottom: 16px;
}

.sb-glossSearch input {
	width: 100%;
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	padding: 13px 20px 13px 46px;
	font-size: 15px;
	color: var(--sb-text);
	background: #fff;
	font-family: inherit;
}

.sb-glossSearch input:focus {
	outline: none;
	border-color: var(--sb-brand);
	box-shadow: 0 0 0 3px rgba(47, 111, 181, .16);
}

.sb-glossSearch__icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sb-brand);
	pointer-events: none;
}

.sb-kanaNav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-kanaNav a,
.sb-kanaNav button {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	background: var(--sb-brand-mist);
	color: var(--sb-brand-deep);
	font-size: 14px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: background-color .18s ease, color .18s ease;
}

.sb-kanaNav a:hover,
.sb-kanaNav button:hover {
	background: var(--sb-brand);
	color: #fff;
}

.sb-glossGroup {
	margin-bottom: 34px;
	scroll-margin-top: 90px;
}

.sb-glossGroup__ttl {
	display: flex;
	align-items: center;
	gap: .6em;
	font-family: var(--sb-heading);
	font-size: 20px;
	color: var(--sb-ink);
	margin: 0 0 16px;
}

.sb-glossGroup__ttl::before {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sb-accent-pale);
}

.sb-glossGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}

.sb-gloss {
	position: relative;
	display: block;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 18px 20px;
	text-decoration: none;
	color: var(--sb-text);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
	overflow: hidden;
}

.sb-gloss:hover {
	border-color: var(--sb-brand);
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow-lift);
	color: var(--sb-text);
}

.sb-gloss__ttl {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--sb-ink);
	margin-bottom: .2em;
}

.sb-gloss__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4em;
	margin-bottom: .7em;
}

.sb-gloss__kana {
	font-size: 11px;
	color: var(--sb-muted);
}

.sb-gloss__sep {
	font-size: 10px;
	color: var(--sb-line);
}

.sb-gloss__en {
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--sb-brand);
}

.sb-gloss__desc {
	display: block;
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--sb-muted);
}

.sb-glossEmpty {
	display: none;
	text-align: center;
	padding: 40px 20px;
	color: var(--sb-muted);
	font-size: 14px;
}

/* 用語詳細 */
.sb-glossSingle__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 1.4em;
}

.sb-glossSingle__cat {
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.sb-glossSingle__en {
	font-family: var(--sb-latin);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--sb-muted);
}

.sb-relatedGloss {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--sb-line);
}

.sb-relatedGloss__ttl {
	font-family: var(--sb-heading);
	font-size: 18px;
	color: var(--sb-ink);
	margin: 0 0 16px;
}

/* ============================================================
 * 8. 記事内パーツ（ショートコード）
 * ============================================================ */
/* --- この記事でわかること --- */
.sb-summary {
	background: var(--sb-brand-mist);
	border: 1px solid var(--sb-brand-pale);
	border-radius: var(--sb-radius);
	padding: 22px 26px;
	margin: 0 0 2.4em;
}

.sb-summary__ttl {
	display: flex;
	align-items: center;
	gap: .5em;
	font-family: var(--sb-heading);
	font-size: 17px;
	font-weight: 500;
	color: var(--sb-brand-deep);
	margin: 0 0 .9em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--sb-brand-pale);
	letter-spacing: .04em;
}

.sb-summary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.sb-summary__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--sb-text);
	margin: 0;
}

.sb-summary__list li::before {
	content: "";
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin-top: .35em;
	border-radius: 50%;
	background: var(--sb-brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 6.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* --- 目次（SWELLの p-toc を読みやすく上書き） --- */
.post_content .p-toc,
.p-toc {
	background-color: var(--sb-surface);
	background-image: none;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 24px 28px;
	max-width: 100%;
}

.p-toc::before,
.p-toc::after {
	display: none;
}

.p-toc__ttl {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .5em;
	font-family: var(--sb-heading);
	font-size: 17px;
	font-weight: 500;
	color: var(--sb-ink);
	letter-spacing: .08em;
	margin: 0 0 .2em;
	padding: 0 0 .7em;
	border-bottom: 1px solid var(--sb-line);
	width: 100%;
}

.p-toc__ttl::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--sb-brand-deep);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.p-toc__list {
	margin: 1em 0 0;
}

.p-toc__list > li {
	margin-bottom: .5em;
	line-height: 1.7;
}

.p-toc__list > li::before {
	color: var(--sb-brand);
	font-family: var(--sb-latin);
	font-weight: 500;
}

.p-toc__link {
	color: var(--sb-text);
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.p-toc__link:hover {
	color: var(--sb-brand-deep);
	border-bottom-color: var(--sb-brand);
}

.p-toc .p-toc__list .p-toc__list .p-toc__link {
	font-size: 13.5px;
	color: var(--sb-muted);
}

.sb-score {
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 20px 22px;
	margin: 2em 0;
}

.sb-score__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sb-line);
}

.sb-score__name {
	font-size: 15px;
	font-weight: 500;
	color: var(--sb-ink);
}

.sb-score__totalNum {
	font-family: var(--sb-latin);
	font-size: 26px;
	color: var(--sb-brand-deep);
	margin-right: .2em;
}

.sb-score__totalMax {
	font-size: 12px;
	color: var(--sb-muted);
}

.sb-score__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sb-score__item {
	display: grid;
	grid-template-columns: 7.5em 1fr 2.5em;
	align-items: center;
	gap: 10px;
}

.sb-score__label {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 13px;
	color: var(--sb-muted);
}

.sb-score__bar {
	height: 8px;
	background: var(--sb-brand-pale);
	border-radius: 999px;
	overflow: hidden;
}

.sb-score__barIn {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sb-brand), var(--sb-accent));
	border-radius: 999px;
}

.sb-score__num {
	font-family: var(--sb-latin);
	font-size: 14px;
	color: var(--sb-brand-deep);
	text-align: right;
}

.sb-pair {
	position: relative;
	background: var(--sb-accent-pale);
	border-radius: var(--sb-radius);
	padding: 26px 22px 22px;
	margin: 2em 0;
}

.sb-pair__badge {
	position: absolute;
	top: -12px;
	left: 20px;
	background: var(--sb-accent-deep);
	color: #fff;
	font-size: 12px;
	padding: 4px 14px;
	border-radius: 999px;
}

.sb-pair__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
}

.sb-pair__col {
	background: #fff;
	border-radius: 10px;
	padding: 14px 16px;
}

.sb-pair__label {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 11.5px;
	color: var(--sb-muted);
	margin-bottom: .5em;
}

.sb-pair__val {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--sb-ink);
	margin: 0;
	line-height: 1.6;
}

.sb-pair__plus {
	font-size: 20px;
	color: var(--sb-accent-deep);
}

.sb-pair__reason {
	font-size: 13px;
	line-height: 1.9;
	color: var(--sb-text);
	margin: 1em 0 0;
}

.sb-point {
	background: var(--sb-brand-mist);
	border-radius: var(--sb-radius);
	padding: 20px 22px;
	margin: 2em 0;
}

.sb-point__ttl {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: 15px;
	font-weight: 500;
	color: var(--sb-brand-deep);
	margin: 0 0 .7em;
}

.sb-point__body p:last-child {
	margin-bottom: 0;
}

/* --- 商品紹介カード --- */
.sb-item {
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	padding: 22px 24px;
	margin: 2.4em 0;
}

.sb-item__head {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.sb-item__thumb {
	flex: none;
	width: 150px;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: 10px;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 8px;
}

.sb-item__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
}

.sb-item__body {
	flex: 1;
	min-width: 0;
}

.sb-item__brand {
	display: block;
	font-size: 12px;
	color: var(--sb-muted);
	letter-spacing: .04em;
	margin-bottom: .3em;
}

/* SWELL の `.post_content h4`（詳細度 0,1,1）が左の罫線と余白を付けるため、
   `.post_content` を前置して詳細度 0,2,1 で打ち消す */
.sb-item__name,
.post_content .sb-item__name {
	font-family: var(--sb-heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--sb-ink);
	margin: 0 0 .5em;
	padding: 0;
	border: none;
	background: none;
}

.sb-item__name::before,
.sb-item__name::after,
.post_content .sb-item__name::before,
.post_content .sb-item__name::after {
	display: none;
	content: none;
}

.sb-item__note {
	font-size: 13px;
	line-height: 1.85;
	color: var(--sb-muted);
	margin: 0 0 1em;
}

.sb-item__spec {
	margin: 0;
	border-top: 1px solid var(--sb-line);
}

.sb-item__specRow {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sb-line);
}

.sb-item__spec dt {
	font-size: 12.5px;
	color: var(--sb-muted);
	margin: 0;
	font-weight: 400;
}

.sb-item__spec dd {
	font-size: 13.5px;
	color: var(--sb-text);
	margin: 0;
	line-height: 1.7;
}

.sb-item__malls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-top: 20px;
}

/* モールのボタンは白地＋枠線＋各モールの色の文字。
   ホバーでうっすら色を敷く。 */
.sb-mall {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid currentColor;
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.sb-mall:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

/* 本文リンクの色指定 `.sbn .post_content a`（詳細度 0,2,1）に負けると
   ボタンが全部ネイビー色になるため、`.post_content .sb-item__malls a.sb-mall--◯◯`
   （詳細度 0,3,1）まで上げている。セレクタを短くするとネイビー一色に戻るので注意。 */
.post_content .sb-item__malls a.sb-mall--rakuten { color: #bf0000; }
.post_content .sb-item__malls a.sb-mall--rakuten:hover { background: #fdf0f0; color: #bf0000; }
.post_content .sb-item__malls a.sb-mall--amazon { color: #a86400; }
.post_content .sb-item__malls a.sb-mall--amazon:hover { background: #fff6e8; color: #a86400; }
.post_content .sb-item__malls a.sb-mall--yahoo { color: #d1004b; }
.post_content .sb-item__malls a.sb-mall--yahoo:hover { background: #fdeff4; color: #d1004b; }
.post_content .sb-item__malls a.sb-mall--qoo10 { color: #c22a76; }
.post_content .sb-item__malls a.sb-mall--qoo10:hover { background: #fdeef6; color: #c22a76; }
.post_content .sb-item__malls a.sb-mall--official { color: var(--sb-brand-deep); }
.post_content .sb-item__malls a.sb-mall--official:hover { background: var(--sb-brand-mist); color: var(--sb-brand-deep); }

.sb-item__pr {
	font-size: 11.5px;
	color: var(--sb-muted);
	text-align: center;
	margin: .9em 0 0;
}

@media (max-width: 599px) {
	.sb-item { padding: 18px 16px; }
	.sb-item__head { flex-direction: column; align-items: center; gap: 14px; }
	.sb-item__thumb { width: 168px; }
	.sb-item__body { width: 100%; }
	.sb-item__name { text-align: center; }
	.sb-item__brand { text-align: center; }
	.sb-item__specRow { grid-template-columns: 7em 1fr; }
	.sb-item__malls { grid-template-columns: repeat(2, 1fr); }
}

/* --- よくある質問（FAQ） --- */
.sb-faq {
	margin: 3em 0;
}

.sb-faq__ttl {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5em;
	font-family: var(--sb-heading);
	font-size: clamp(19px, 3.2vw, 23px);
	font-weight: 500;
	color: var(--sb-ink);
	letter-spacing: .05em;
	margin: 0 0 1.2em;
	padding: 0 0 .62em;
	border: none;
	background: none;
}

.sb-faq__ttl::before {
	display: none;
}

.sb-faq__ttl::after {
	content: "";
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 2px;
	border: none;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sb-brand) 0%, var(--sb-accent) 100%);
	transform: none;
}

.sb-faq__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-faq__item {
	border-bottom: 1px solid var(--sb-line);
	padding: 20px 0;
	margin: 0;
}

.sb-faq__item:first-child {
	padding-top: 4px;
}

.sb-faq__q,
.sb-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.sb-faq__q {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--sb-ink);
}

.sb-faq__a {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--sb-text);
}

.sb-faq__q::before,
.sb-faq__a::before {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--sb-latin);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.sb-faq__q::before {
	content: "Q";
	background: var(--sb-brand);
	color: #fff;
}

.sb-faq__a::before {
	content: "A";
	background: var(--sb-accent-pale);
	color: var(--sb-accent-deep);
	margin-top: .1em;
}

.sb-caution {
	background: var(--sb-accent-pale);
	border: 1px solid var(--sb-accent);
	border-radius: var(--sb-radius);
	padding: 20px 22px;
	margin: 2em 0;
}

.sb-caution__ttl {
	font-size: 15px;
	font-weight: 500;
	color: var(--sb-accent-deep);
	margin: 0 0 .7em;
}

.sb-caution__body p:last-child {
	margin-bottom: 0;
}

/* --- この記事を書いた人 --- */
.sb-author {
	margin: 3.4em 0 0;
	padding: 26px 30px 28px;
	background: var(--sb-brand-mist);
	border: 1px solid var(--sb-brand-pale);
	border-radius: var(--sb-radius-lg);
}

.sb-author__ttl {
	margin: 0 0 18px;
	font-family: var(--sb-heading);
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--sb-brand-deep);
}

.sb-author__row {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 24px;
	align-items: start;
}

.sb-author__avatar {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--sb-brand-pale);
	box-shadow: var(--sb-shadow);
}

.sb-author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sb-author__mono {
	font-family: var(--sb-heading);
	font-size: 34px;
	line-height: 1;
	color: var(--sb-brand-deep);
}

.sb-author__role {
	margin: 0 0 .25em;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--sb-accent-deep);
}

.sb-author__name {
	margin: 0 0 .7em;
	font-family: var(--sb-heading);
	font-size: 20px;
	color: var(--sb-ink);
}

.sb-author__kana {
	margin-left: .8em;
	font-family: var(--sb-latin);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--sb-muted);
}

.post_content .sb-author__lead {
	margin: 0 0 1em;
	font-size: 14.5px;
	line-height: 1.9;
}

.post_content .sb-author__career {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.post_content .sb-author__career li {
	position: relative;
	margin: 0 0 .35em;
	padding-left: 1.2em;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--sb-text);
}

.post_content .sb-author__career li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sb-brand);
}

.post_content .sb-author__area {
	margin: 0;
	font-size: 12.5px;
	color: var(--sb-muted);
}

.sb-author__area span {
	display: inline-block;
	margin-right: .8em;
	padding: 2px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sb-brand-pale);
	font-size: 11px;
	color: var(--sb-brand-deep);
}

/* 執筆者の一覧（編集ポリシー） */
.sb-authorList {
	display: grid;
	gap: 18px;
	margin: 0 0 2.4em;
}

.sb-authorList__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 20px;
	align-items: start;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow);
}

.sb-authorList__item .sb-author__avatar {
	width: 72px;
	height: 72px;
}

.sb-authorList__item .sb-author__mono {
	font-size: 28px;
}

.sb-authorList__item .sb-author__name {
	font-size: 18px;
}

/* --- 商品カード（アフィリエイト広告） --- */
.sb-promo {
	position: relative;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-lg);
	padding: 26px 28px 28px;
	margin: 0 0 2.6em;
	box-shadow: var(--sb-shadow);
}

.sb-promo__tag {
	display: inline-block;
	margin: 0 0 16px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--sb-brand-mist);
	color: var(--sb-muted);
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .08em;
}

.sb-promo__row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	align-items: start;
}

.sb-promo__media {
	display: block;
	border-radius: var(--sb-radius);
	overflow: hidden;
	line-height: 0;
	background: var(--sb-brand-mist);
	transition: transform .25s ease, box-shadow .25s ease;
}

.sb-promo__media:hover {
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow-lift);
}

.sb-promo__media img {
	width: 100%;
	height: auto;
}

.sb-promo__maker {
	margin: 0 0 .3em;
	color: var(--sb-brand-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}

.sb-promo__name {
	margin: 0 0 .6em;
	font-family: var(--sb-heading);
	font-size: 22px;
	line-height: 1.4;
	color: var(--sb-ink);
}

.sb-promo__lead {
	margin: 0 0 1.4em;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--sb-text);
}

.sb-promo__btn {
	margin: 0;
}

.post_content .sb-promo__btn .sb-btn {
	width: 100%;
	font-size: 15px;
}

.sb-promo__note {
	margin: .9em 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sb-muted);
	text-align: center;
}

.sb-promo__px {
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* 記事の冒頭に置く小さめのカード */
.sb-promo--lead {
	padding: 20px 22px 22px;
	margin: 0 0 2.4em;
	background: linear-gradient(180deg, var(--sb-accent-pale) 0%, #fff 55%);
	border-color: var(--sb-accent);
}

.sb-promo--lead .sb-promo__tag {
	margin-bottom: 12px;
	background: #fff;
	color: var(--sb-accent-deep);
	border: 1px solid var(--sb-accent);
}

.sb-promo--lead .sb-promo__row {
	grid-template-columns: 200px 1fr;
	gap: 20px;
	align-items: center;
}

.sb-promo--lead .sb-promo__name {
	font-size: 19px;
	margin-bottom: .45em;
}

.sb-promo--lead .sb-promo__lead {
	margin-bottom: 1em;
	font-size: 14px;
}

.sb-promo--lead .sb-promo__note {
	font-size: 11.5px;
}

/* ボタンだけの枠 */
.sb-promo--btn {
	padding: 22px 26px 24px;
	text-align: center;
}

.sb-promo--btn .sb-promo__tag {
	margin-bottom: 14px;
}

.post_content .sb-promo--btn .sb-promo__btn .sb-btn {
	width: min(100%, 420px);
}


/* --- 本文中の表（ブロックエディタの「テーブル」） ---
   WordPress 既定の細い格子は素っ気ないため、カード状に整える。
   見出し行（thead）のある比較表は素の見た目を残し、
   見出し行の無い「項目名｜内容」の表だけ1列目をラベルとして扱う。 */
.post_content .wp-block-table {
	margin: 0 0 2.6em;
	overflow-x: auto;
}

.post_content .wp-block-table table {
	width: 100%;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sb-shadow);
	font-size: 15px;
}

.post_content .wp-block-table th,
.post_content .wp-block-table td {
	border: none;
	border-bottom: 1px solid var(--sb-line);
	padding: 17px 24px;
	line-height: 1.85;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.post_content .wp-block-table tr:last-child th,
.post_content .wp-block-table tr:last-child td {
	border-bottom: none;
}

.post_content .wp-block-table thead th {
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* 見出し行の無い表＝1列目は項目名 */
.post_content .wp-block-table table:not(:has(thead)) td:first-child {
	width: 12em;
	background: var(--sb-brand-mist);
	border-right: 1px solid var(--sb-line);
	color: var(--sb-brand-deep);
	font-size: 14px;
	font-weight: 600;
}

.post_content .wp-block-table a {
	color: var(--sb-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ============================================================
 * 9. お問い合わせフォーム
 * ============================================================ */
.sb-form {
	max-width: 720px;
	margin: 0 auto;
}

/* --- 入力 → 確認 → 完了 --- */
.sb-formSteps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 2.6em;
	padding: 0;
	counter-reset: none;
}

.sb-formSteps__item {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: 8px 18px 8px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sb-line);
	font-size: 13px;
	color: var(--sb-muted);
	white-space: nowrap;
}

.sb-formSteps__num {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sb-line);
	color: var(--sb-muted);
	font-family: var(--sb-latin);
	font-size: 13px;
	line-height: 1;
}

.sb-formSteps__item.is-current {
	background: var(--sb-brand);
	border-color: var(--sb-brand);
	color: #fff;
	font-weight: 500;
	box-shadow: 0 4px 14px rgba(47, 111, 181, .3);
}

.sb-formSteps__item.is-current .sb-formSteps__num {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

.sb-formSteps__item.is-done {
	background: var(--sb-brand-pale);
	border-color: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
}

.sb-formSteps__item.is-done .sb-formSteps__num {
	background: var(--sb-brand-deep);
	color: #fff;
}

/* --- 入力欄 --- */
.sb-form__body {
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-lg);
	padding: 34px 34px 38px;
	box-shadow: var(--sb-shadow);
}

.sb-form__row {
	margin-bottom: 1.7em;
}

.sb-form__label {
	display: flex;
	align-items: center;
	gap: .7em;
	margin-bottom: .6em;
	font-weight: 600;
	font-size: 15px;
	color: var(--sb-ink);
}

.sb-form__req,
.sb-form__any {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .04em;
}

.sb-form__req {
	background: var(--sb-accent-pale);
	color: var(--sb-accent-deep);
}

.sb-form__any {
	background: var(--sb-brand-mist);
	color: var(--sb-muted);
}

.sb-form__input {
	width: 100%;
	padding: .85em 1em;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
	color: var(--sb-text);
	font-size: 16px; /* iOS で自動ズームさせない */
	line-height: 1.7;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sb-form__input::placeholder {
	color: #93a4b1;
}

.sb-form__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--sb-brand);
	box-shadow: 0 0 0 3px rgba(47, 111, 181, .18);
}

.sb-form__textarea {
	resize: vertical;
	min-height: 190px;
}

select.sb-form__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sb-brand-deep) 50%), linear-gradient(135deg, var(--sb-brand-deep) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6em;
}

.sb-form__row.has-error .sb-form__input {
	border-color: var(--sb-accent-deep);
	background: var(--sb-accent-pale);
}

.sb-form__error {
	display: block;
	margin-top: .5em;
	font-size: 13px;
	font-weight: 500;
	color: var(--sb-accent-deep);
}

.sb-form__alert {
	background: var(--sb-accent-pale);
	border: 1px solid var(--sb-accent);
	border-radius: var(--sb-radius);
	padding: 16px 22px;
	margin-bottom: 1.8em;
	color: var(--sb-accent-deep);
	font-size: 14px;
	line-height: 1.8;
}

.sb-form__alert p {
	margin: 0;
}

.sb-form__alertTtl {
	font-weight: 600;
}

/* honeypot（人には見えないが、読み上げ・タブ移動の対象にもしない） */
.sb-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- 同意チェック --- */
.sb-form__agree {
	background: var(--sb-brand-mist);
	border-radius: var(--sb-radius);
	padding: 18px 22px;
}

.sb-form__check {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.7;
}

.sb-form__check input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: .15em;
	accent-color: var(--sb-brand-deep);
	cursor: pointer;
}

.sb-form__check a {
	color: var(--sb-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sb-form__agree.has-error {
	background: var(--sb-accent-pale);
}

.sb-form__captcha {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sb-form__submit {
	margin-top: 2.2em;
	text-align: center;
}

.sb-form__submit .sb-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

/* --- 確認画面 --- */
.sb-form__lead {
	text-align: center;
	font-size: 15px;
	color: var(--sb-muted);
	margin-bottom: 1.8em;
}

.sb-form__confirm {
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-lg);
	padding: 10px 34px;
	margin: 0;
	box-shadow: var(--sb-shadow);
}

.sb-form__confirmRow {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 1.4em;
	padding: 22px 0;
	border-bottom: 1px solid var(--sb-line);
}

.sb-form__confirmRow:last-child {
	border-bottom: none;
}

.sb-form__confirm dt {
	font-weight: 600;
	font-size: 14px;
	color: var(--sb-brand-deep);
}

.sb-form__confirm dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	word-break: break-word;
}

.sb-form__empty {
	color: var(--sb-muted);
	font-size: 14px;
}

.sb-form__confirmBtns {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 2.2em;
	flex-wrap: wrap;
}

.sb-form__confirmBtns form {
	margin: 0;
}

.sb-form__confirmBtns .sb-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

/* --- 完了画面 --- */
.sb-form__done {
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-lg);
	padding: 46px 34px 38px;
	text-align: center;
	box-shadow: var(--sb-shadow);
}

.sb-form__doneIcon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 1em;
	border-radius: 50%;
	background: var(--sb-brand-pale);
	color: var(--sb-brand-deep);
}

.sb-form__doneTtl {
	font-family: var(--sb-heading);
	font-size: 24px;
	color: var(--sb-ink);
	margin-bottom: .8em;
}

.sb-form__done p {
	line-height: 1.9;
}

.sb-form__doneNote {
	margin-top: 1.4em;
	font-size: 13px;
	color: var(--sb-muted);
}

/* ============================================================
 * 10. レスポンシブ
 * ============================================================ */
@media (max-width: 1100px) {
	.sb-typeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.sb-concernGrid { grid-template-columns: repeat(4, 1fr); }
	.sb-cardGrid { grid-template-columns: repeat(2, 1fr); }
	.sb-axisGrid { grid-template-columns: 1fr; gap: 30px; }
	.sb-stepGrid { grid-template-columns: 1fr; }
	.sb-shindanCta__deco { display: none; }
	.sb-shindanCta { padding: 34px 28px; }
}

@media (max-width: 599px) {
	.sb-sec { padding: 48px 0; }
	.sb-sec__inner { padding-inline: 16px; }
	.sb-hero { padding: 42px 0 50px; }
	.sb-hero__inner { padding-inline: 16px; }
	.sb-hero__deco { width: 260px; height: 260px; right: -90px; top: 12%; transform: none; }
	.sb-hero__btns .sb-btn { width: 100%; }
	.sb-hero__steps { grid-template-columns: 1fr; gap: 10px; }
	.sb-hero__step { text-align: left; padding: 14px 18px; }
	.sb-hero__stepEn { margin-bottom: .3em; }
	.sb-hero__stepTtl { display: inline; margin-right: .6em; }
	.sb-hero__stepTxt { display: inline; }
	.sb-concernGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.sb-concern { padding: 20px 8px 16px; }
	.sb-cardGrid { grid-template-columns: 1fr; gap: 16px; }
	.sb-typeGrid { grid-template-columns: 1fr; }
	.sb-glossGrid { grid-template-columns: 1fr; }
	.sb-q { padding: 26px 20px; }
	.sb-shindan__intro { padding: 26px 20px; }
	.sb-result__head { padding: 30px 20px 26px; }
	.sb-result__body { padding: 24px 20px 28px; }
	.sb-pair__row { grid-template-columns: 1fr; }
	.sb-pair__plus { justify-self: center; }
	.sb-score__item { grid-template-columns: 6.5em 1fr 2.4em; }
	.sb-result__foot .sb-btn { width: 100%; }

	.sb-author { padding: 22px 18px 24px; }
	.sb-author__row { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; }
	.sb-author__body { text-align: left; }
	.post_content .sb-author__career li { text-align: left; }
	.sb-authorList__item { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; padding: 20px 18px; }

	.sb-promo { padding: 20px 18px 24px; }
	.sb-promo__row { grid-template-columns: 1fr; gap: 20px; }
	.sb-promo__media { max-width: 300px; margin: 0 auto; }
	.sb-promo__name { font-size: 20px; }
	.sb-promo--lead { padding: 18px 16px 20px; }
	.sb-promo--lead .sb-promo__row { grid-template-columns: 1fr; gap: 16px; }
	.sb-promo--lead .sb-promo__media { max-width: 240px; }
	.sb-promo--btn { padding: 20px 16px 22px; }

	/* 項目名｜内容 の表は、狭い画面では縦積みにする */
	.post_content .wp-block-table table:not(:has(thead)) tr,
	.post_content .wp-block-table table:not(:has(thead)) td {
		display: block;
		width: auto;
	}

	.post_content .wp-block-table table:not(:has(thead)) tr {
		border-bottom: 1px solid var(--sb-line);
	}

	.post_content .wp-block-table table:not(:has(thead)) tr:last-child {
		border-bottom: none;
	}

	.post_content .wp-block-table table:not(:has(thead)) td {
		border-bottom: none;
		padding: 14px 18px 15px;
	}

	.post_content .wp-block-table table:not(:has(thead)) td:first-child {
		background: transparent;
		border-right: none;
		padding-bottom: 0;
	}

	.sb-formSteps { gap: 4px; }
	.sb-formSteps__item { padding: 6px 12px 6px 8px; font-size: 12px; }
	.sb-formSteps__num { width: 20px; height: 20px; font-size: 12px; }
	.sb-form__body { padding: 24px 20px 28px; }
	.sb-form__confirm { padding: 6px 20px; }
	.sb-form__confirmRow { grid-template-columns: 1fr; gap: .4em; padding: 18px 0; }
	.sb-form__confirmBtns { flex-direction: column-reverse; }
	.sb-form__confirmBtns .sb-btn { width: 100%; }
	.sb-form__done { padding: 34px 20px 30px; }
	.sb-form__agree { padding: 16px; }

	/* reCAPTCHA の枠（304px固定）が画面からはみ出さないように縮める */
	.sb-form__captcha .g-recaptcha { transform: scale(.86); transform-origin: center top; }
}


/* ============================================================
 * 10. 記事内パーツ（SMALL BIZ NOTE で追加したショートコード）
 *     [sb_combo] [sb_fee] [sb_service] のボタン
 * ============================================================ */

/* ---- 組み合わせ提案 [sb_combo] -------------------------------- */
.sb-combo {
	position: relative;
	background: var(--sb-brand-mist);
	border: 1px solid var(--sb-brand-pale);
	border-radius: var(--sb-radius);
	padding: 26px 22px 20px;
	margin: 2.4em 0;
}

.sb-combo__badge {
	position: absolute;
	top: -12px;
	left: 20px;
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--sb-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
}

.sb-combo__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 14px;
}

.sb-combo__col {
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: 10px;
	padding: 16px 18px;
}

.sb-combo__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sb-brand-deep);
	letter-spacing: .02em;
}

.sb-combo__label svg {
	flex: none;
	color: var(--sb-brand);
}

.sb-combo__val {
	margin: 8px 0 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--sb-ink);
}

.sb-combo__plus {
	align-self: center;
	font-family: var(--sb-latin);
	font-size: 20px;
	font-weight: 500;
	color: var(--sb-accent-deep);
}

.sb-combo__reason {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.95;
	color: var(--sb-text);
}

/* ---- 料金比較テーブル [sb_fee] -------------------------------- */
.sb-fee {
	margin: 2.4em 0;
}

.sb-fee__ttl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sb-ink);
}

.sb-fee__ttl svg {
	flex: none;
	color: var(--sb-accent-deep);
}

/* 横に長い表はこの中だけでスクロールさせる（本文は横スクロールさせない） */
.sb-fee__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-surface);
}

.sb-fee__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

.sb-fee__table th,
.sb-fee__table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--sb-line);
	text-align: left;
	vertical-align: top;
}

.sb-fee__table thead th {
	background: var(--sb-brand-pale);
	color: var(--sb-brand-dark);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.sb-fee__table tbody tr:last-child th,
.sb-fee__table tbody tr:last-child td {
	border-bottom: none;
}

.sb-fee__plan {
	background: var(--sb-brand-mist);
	font-weight: 700;
	color: var(--sb-ink);
	white-space: nowrap;
}

.sb-fee__none {
	color: var(--sb-muted);
}

.sb-fee__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--sb-muted);
}

/* ---- サービスカードのボタン [sb_service] ---------------------- */
.sb-item__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.sb-svcBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}

/* SWELL の .post_content a に負けないよう .post_content を前置する */
.post_content a.sb-svcBtn--official {
	background: var(--sb-accent-deep);
	border: 1px solid var(--sb-accent-deep);
	color: #fff;
}

.post_content a.sb-svcBtn--official:hover {
	background: var(--sb-accent-dark);
	border-color: var(--sb-accent-dark);
	color: #fff;
}

.post_content a.sb-svcBtn--doc {
	background: var(--sb-surface);
	border: 1px solid var(--sb-brand);
	color: var(--sb-brand-deep);
}

.post_content a.sb-svcBtn--doc:hover {
	background: var(--sb-brand-pale);
	color: var(--sb-brand-dark);
}

/* ---- 3軸スコアの総合点 ---------------------------------------- */
.sb-score__total {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-left: auto;
}

/* ---- 商品カード（広告）の本文側 ------------------------------- */
.sb-promo__body {
	flex: 1;
	min-width: 0;
}

/* ---- スマホ ---------------------------------------------------- */
@media (max-width: 599px) {
	.sb-combo__row {
		grid-template-columns: 1fr;
	}

	.sb-combo__plus {
		justify-self: center;
	}

	.sb-item__btns .sb-svcBtn {
		width: 100%;
	}

	.sb-fee__table {
		min-width: 480px;
	}
}


/* ============================================================
 * 11. トップページ 改稿分（2026-08-18 00:18 JST 追記）
 *     行で引く一覧・記事のピックアップ・2カラム・索引・用語デスク・診断の帯
 *     ※ 既存のトップページ用クラス（5.）は触らず、新しい名前で足している
 * ============================================================ */

/* ---- 見出し（左寄せ・右端にリンク） ---------------------------- */
.sb-headL {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sb-line);
}

.sb-headL__body {
	min-width: 0;
}

.sb-headL__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11.5px;
	letter-spacing: .22em;
	color: var(--sb-accent-deep);
	margin-bottom: .6em;
}

.sb-headL__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(20px, 3.2vw, 27px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .03em;
	color: var(--sb-ink);
	margin: 0;
}

.sb-headL__sub {
	font-size: 14px;
	line-height: 1.9;
	color: var(--sb-muted);
	max-width: 44em;
	margin: .9em 0 0;
}

.sb-headL__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: 13.5px;
	white-space: nowrap;
	color: var(--sb-brand-deep);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
}

.sb-headL__link:hover {
	color: var(--sb-accent-deep);
}

/* ---- セクションの間隔（帯を前のセクションに寄せる） ------------ */
.sb-sec--flat {
	padding-top: 0;
}

/* ---- ヒーローに置く数 ------------------------------------------ */
.sb-hero--desk {
	padding: 66px 0 62px;
}

.sb-heroFacts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.sb-heroFacts__item a {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	background: var(--sb-surface);
	border-radius: 999px;
	padding: .6em 1.25em;
	box-shadow: var(--sb-shadow);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.sb-heroFacts__item a:hover {
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow-lift);
}

.sb-heroFacts__num {
	font-family: var(--sb-latin);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	color: var(--sb-brand-deep);
}

.sb-heroFacts__label {
	font-size: 12.5px;
	color: var(--sb-muted);
}

/* ---- 困りごとから引く（行で並ぶ一覧） -------------------------- */
.sb-issueList {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 34px;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sb-line);
}

.sb-issueList__item {
	border-bottom: 1px solid var(--sb-line);
	min-width: 0;
}

.sb-issue {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 15px 8px;
	text-decoration: none;
	transition: background-color .18s ease;
}

.sb-issue:hover {
	background: var(--sb-brand-mist);
}

.sb-issue__icon {
	display: inline-flex;
	color: var(--sb-brand);
}

.sb-issue__txt {
	font-size: 15px;
	line-height: 1.65;
	color: var(--sb-ink);
	min-width: 0;
}

.sb-issue:hover .sb-issue__txt {
	color: var(--sb-brand-deep);
}

.sb-issue__to {
	font-size: 11.5px;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--sb-brand-deep);
	background: var(--sb-brand-pale);
	border-radius: 999px;
	padding: .35em .9em;
}

.sb-issue__arrow {
	display: inline-flex;
	color: var(--sb-muted);
	transition: transform .18s ease, color .18s ease;
}

.sb-issue:hover .sb-issue__arrow {
	color: var(--sb-accent-deep);
	transform: translateX(3px);
}

.sb-issueList__note {
	font-size: 13px;
	line-height: 1.9;
	color: var(--sb-muted);
	margin: 22px 0 0;
}

.sb-issueList__note a {
	color: var(--sb-brand-deep);
}

/* ---- 選び方の一言（帯） ---------------------------------------- */
.sb-claimBar {
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--sb-accent-pale);
	border-left: 4px solid var(--sb-accent);
	border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
	padding: 24px 28px;
}

.sb-claimBar__mark {
	flex: none;
	display: inline-flex;
	color: var(--sb-accent-dark);
}

.sb-claimBar__body {
	flex: 1;
	min-width: 0;
}

.sb-claimBar__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(16px, 2.6vw, 19px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--sb-ink);
	margin: 0 0 .5em;
}

.sb-claimBar__txt {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--sb-text);
	margin: 0;
}

.sb-claimBar__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: 13.5px;
	white-space: nowrap;
	color: var(--sb-accent-dark);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
}

/* ---- 記事（大きい1本 ＋ 続きの行） ----------------------------- */
.sb-pickup {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: 26px;
	align-items: start;
}

.sb-pickup__lead {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.sb-pickup__lead:hover {
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow-lift);
}

.sb-pickup__link {
	display: block;
	text-decoration: none;
}

.sb-pickup__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sb-brand-mist);
	overflow: hidden;
}

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

/* アイキャッチが無いときは帯を薄くして、文字のほうを主役にする */
.sb-pickup__thumb--none {
	aspect-ratio: 16 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-pickup__noimg {
	color: var(--sb-brand);
	opacity: .5;
}

.sb-pickup__badge {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--sb-surface);
	background: var(--sb-accent-deep);
	padding: .45em 1.1em;
	border-radius: 0 0 var(--sb-radius) 0;
}

.sb-pickup__body {
	padding: 22px 26px 26px;
}

.sb-pickup__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 .8em;
}

.sb-pickup__cat {
	font-size: 11.5px;
	color: var(--sb-brand-deep);
	background: var(--sb-brand-pale);
	border-radius: 999px;
	padding: .3em .9em;
}

.sb-pickup__date {
	font-family: var(--sb-latin);
	font-size: 12px;
	color: var(--sb-muted);
}

.sb-pickup__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(18px, 2.8vw, 22px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--sb-ink);
	margin: 0 0 .7em;
}

.sb-pickup__excerpt {
	font-size: 14px;
	line-height: 1.95;
	color: var(--sb-text);
	margin: 0 0 1.1em;
}

.sb-pickup__cont {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: 13.5px;
	color: var(--sb-accent-dark);
}

.sb-pickup__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
}

.sb-pickRow + .sb-pickRow {
	border-top: 1px solid var(--sb-line);
}

.sb-pickRow__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	text-decoration: none;
	transition: background-color .18s ease;
}

.sb-pickRow__link:hover {
	background: var(--sb-brand-mist);
}

.sb-pickRow__num {
	font-family: var(--sb-latin);
	font-size: 15px;
	color: var(--sb-accent);
}

.sb-pickRow__body {
	min-width: 0;
}

.sb-pickRow__cat {
	display: block;
	font-size: 11.5px;
	color: var(--sb-brand);
	margin-bottom: .3em;
}

.sb-pickRow__ttl {
	display: block;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sb-ink);
}

.sb-pickRow__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sb-brand-mist);
}

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

/* ---- 比べ方（左）＋ 読む順番（右） ----------------------------- */
.sb-stance {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: 40px;
	align-items: start;
}

.sb-stance__main {
	min-width: 0;
}

.sb-stance__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11.5px;
	letter-spacing: .22em;
	color: var(--sb-accent-deep);
	margin-bottom: .7em;
}

.sb-stance__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(19px, 3vw, 25px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--sb-ink);
	margin: 0 0 .8em;
}

.sb-stance__lead {
	font-size: 14.5px;
	line-height: 2;
	color: var(--sb-text);
	margin: 0 0 1.8em;
}

.sb-stance__defs {
	margin: 0;
}

.sb-stance__def {
	padding: 20px 0;
	border-top: 1px solid var(--sb-line);
}

.sb-stance__def:last-child {
	border-bottom: 1px solid var(--sb-line);
}

.sb-stance__dt {
	display: flex;
	align-items: baseline;
	gap: .7em;
	font-family: var(--sb-heading);
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--sb-ink);
	margin: 0 0 .55em;
}

.sb-stance__no {
	flex: none;
	font-family: var(--sb-latin);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--sb-accent);
}

.sb-stance__dd {
	font-size: 14px;
	line-height: 1.95;
	color: var(--sb-text);
	margin: 0;
	padding-left: 2.5em;
}

.sb-stance__side {
	position: sticky;
	top: 100px;
	background: var(--sb-brand-dark);
	border-radius: var(--sb-radius-lg);
	padding: 26px 24px 28px;
}

.sb-stance__sideEn {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--sb-accent);
	margin-bottom: .6em;
}

.sb-stance__sideTtl {
	font-family: var(--sb-heading);
	font-size: 19px;
	font-weight: 500;
	color: var(--sb-surface);
	margin: 0 0 .6em;
}

.sb-stance__sideTxt {
	font-size: 13px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .78);
	margin: 0 0 1.2em;
}

.sb-orderList {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.sb-orderItem + .sb-orderItem {
	margin-top: 8px;
}

.sb-orderItem__link {
	display: block;
	background: rgba(255, 255, 255, .08);
	border-radius: var(--sb-radius);
	padding: 13px 15px;
	text-decoration: none;
	transition: background-color .18s ease;
}

.sb-orderItem__link:hover {
	background: rgba(255, 255, 255, .16);
}

.sb-orderItem__step {
	display: block;
	font-family: var(--sb-latin);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--sb-accent);
	margin-bottom: .4em;
}

.sb-orderItem__ttl {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sb-surface);
	margin-bottom: .45em;
}

.sb-orderItem__cat {
	display: inline-block;
	font-size: 10.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	padding: .15em .8em;
}

.sb-more.sb-stance__sideMore {
	font-size: 13px;
	color: var(--sb-accent);
}

.sb-more.sb-stance__sideMore:hover {
	color: var(--sb-accent-pale);
}

/* ---- 索引（文字だけの3列） ------------------------------------- */
.sb-indexBoard {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* 列ごとに項目数が違うので、flex で「すべて見る」を下端にそろえる */
.sb-indexCol {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow);
	padding: 24px 22px 20px;
}

.sb-indexCol__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 2px solid var(--sb-brand-pale);
}

.sb-indexCol__icon {
	display: inline-flex;
	color: var(--sb-brand);
}

.sb-indexCol__en {
	font-family: var(--sb-latin);
	font-size: 10.5px;
	letter-spacing: .2em;
	color: var(--sb-muted);
}

.sb-indexCol__ttl {
	flex: 1 0 100%;
	font-family: var(--sb-heading);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sb-ink);
	margin: 0;
}

.sb-indexCol__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-indexCol__list li + li {
	border-top: 1px dotted var(--sb-line);
}

.sb-indexCol__link {
	display: block;
	padding: 11px 2px;
	text-decoration: none;
}

.sb-indexCol__name {
	display: block;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sb-ink);
}

.sb-indexCol__link:hover .sb-indexCol__name {
	color: var(--sb-brand-deep);
}

.sb-indexCol__note {
	display: block;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--sb-muted);
	margin-top: .3em;
}

.sb-indexCol__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--sb-line);
}

/* 索引の一覧と「すべて見る」の間に、最低限の間隔を残す */
.sb-indexCol__list {
	margin-bottom: 14px;
}

.sb-indexCol__foot a {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: 12.5px;
	color: var(--sb-accent-dark);
	text-decoration: none;
}

/* ---- 用語の引き方 ---------------------------------------------- */
.sb-wordDesk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: 36px;
	align-items: start;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow);
	padding: 34px 34px 36px;
}

.sb-wordDesk__main,
.sb-wordDesk__side {
	min-width: 0;
}

.sb-wordDesk__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11.5px;
	letter-spacing: .22em;
	color: var(--sb-accent-deep);
	margin-bottom: .7em;
}

.sb-wordDesk__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(19px, 3vw, 24px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--sb-ink);
	margin: 0 0 .7em;
}

.sb-wordDesk__txt {
	font-size: 14px;
	line-height: 1.95;
	color: var(--sb-text);
	margin: 0 0 1.5em;
}

.sb-wordRows {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.7em;
	padding: 0;
}

.sb-wordRow {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	background: var(--sb-brand-mist);
	border: 1px solid var(--sb-line);
	border-radius: 8px;
	padding: .5em .9em;
	text-decoration: none;
}

.sb-wordRow:hover {
	background: var(--sb-brand-pale);
	border-color: var(--sb-brand);
}

.sb-wordRow__char {
	font-size: 15px;
	color: var(--sb-ink);
}

.sb-wordRow__count {
	font-family: var(--sb-latin);
	font-size: 11px;
	color: var(--sb-muted);
}

.sb-wordDesk__side {
	border-left: 1px solid var(--sb-line);
	padding-left: 36px;
}

.sb-wordDesk__sideTtl {
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--sb-muted);
	margin: 0 0 1em;
}

.sb-wordPills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sb-wordPill {
	display: inline-flex;
	flex-direction: column;
	gap: .1em;
	max-width: 100%;
	background: var(--sb-accent-pale);
	border-radius: 14px;
	padding: .55em 1.1em;
	text-decoration: none;
}

.sb-wordPill:hover {
	background: var(--sb-accent);
}

.sb-wordPill__ttl {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sb-ink);
}

.sb-wordPill__en {
	font-family: var(--sb-latin);
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--sb-muted);
}

/* ---- 診断への案内（帯） ---------------------------------------- */
.sb-quizBand {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 34px;
	align-items: center;
	background: linear-gradient(120deg, var(--sb-brand-dark) 0%, var(--sb-brand-deep) 100%);
	border-radius: var(--sb-radius-lg);
	padding: 38px 40px;
}

.sb-quizBand__body {
	min-width: 0;
}

.sb-quizBand__en {
	display: block;
	font-family: var(--sb-latin);
	font-size: 11px;
	letter-spacing: .24em;
	color: var(--sb-accent);
	margin-bottom: .8em;
}

.sb-quizBand__ttl {
	font-family: var(--sb-heading);
	font-size: clamp(20px, 3.2vw, 27px);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: .03em;
	color: var(--sb-surface);
	margin: 0 0 .7em;
}

.sb-quizBand__txt {
	font-size: 14px;
	line-height: 1.95;
	color: rgba(255, 255, 255, .82);
	max-width: 40em;
	margin: 0 0 1.6em;
}

.sb-quizBand__note {
	font-size: 12px;
	color: rgba(255, 255, 255, .62);
	margin: 1em 0 0;
}

.sb-quizBand__list {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.sb-quizBand__list li {
	display: flex;
	align-items: center;
	gap: .6em;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sb-surface);
	background: rgba(255, 255, 255, .10);
	border-radius: 999px;
	padding: .7em 1.3em;
	white-space: nowrap;
}

.sb-quizBand__list .sb-icon {
	flex: none;
	color: var(--sb-accent);
}

/* ---- レスポンシブ（改稿分） ------------------------------------ */
@media (max-width: 1000px) {
	.sb-pickup { grid-template-columns: 1fr; }
	.sb-stance { grid-template-columns: 1fr; gap: 30px; }
	.sb-stance__side { position: static; }
	.sb-indexBoard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-wordDesk { grid-template-columns: 1fr; gap: 26px; }
	.sb-wordDesk__side { border-left: none; padding-left: 0; border-top: 1px solid var(--sb-line); padding-top: 24px; }
	.sb-quizBand { grid-template-columns: 1fr; gap: 26px; }
	.sb-quizBand__list li { white-space: normal; border-radius: var(--sb-radius); }
}

@media (max-width: 820px) {
	.sb-issueList { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.sb-indexBoard { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
	.sb-hero--desk { padding: 44px 0 46px; }
	.sb-headL { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
	.sb-headL__link { white-space: normal; }
	.sb-heroFacts { gap: 8px; }
	.sb-heroFacts__item a { padding: .55em 1em; }
	.sb-heroFacts__num { font-size: 17px; }

	.sb-issue { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 7px; padding: 14px 4px; }
	.sb-issue__txt { grid-column: 2; grid-row: 1; }
	.sb-issue__to { grid-column: 2; grid-row: 2; justify-self: start; }
	.sb-issue__arrow { grid-column: 3; grid-row: 1 / span 2; }

	.sb-claimBar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; }
	.sb-claimBar__link { white-space: normal; }

	.sb-pickup__body { padding: 20px 18px 22px; }
	.sb-pickRow__link { gap: 10px; padding: 14px; }
	.sb-pickRow__thumb { width: 52px; height: 52px; }

	.sb-stance__dd { padding-left: 0; }
	.sb-stance__side { padding: 22px 18px 24px; }

	.sb-indexCol { padding: 20px 18px 18px; }

	.sb-wordDesk { padding: 24px 18px 26px; }
	.sb-wordDesk__btn { width: 100%; }

	.sb-quizBand { padding: 28px 20px 30px; }
	.sb-quizBand .sb-btn { width: 100%; }
}


/* ============================================================
 * 12. 記事冒頭の広告枠（[sb_promo type="lead"]）
 *     本文の流れを止めないよう、カードより控えめな見た目にする
 * ============================================================ */
.sb-promo--lead {
	background: var(--sb-brand-mist);
	border: 1px solid var(--sb-brand-pale);
	border-radius: var(--sb-radius);
	padding: 16px 18px 14px;
	margin: 1.8em 0;
	text-align: left;
}

.sb-promo--lead .sb-promo__tag {
	display: inline-block;
	margin: 0 0 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	color: var(--sb-muted);
	font-size: 11px;
	letter-spacing: .04em;
}

.sb-promo__leadName {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sb-ink);
}

.sb-promo__leadMaker {
	font-size: 12px;
	font-weight: 500;
	color: var(--sb-muted);
}

.sb-promo__leadTxt {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--sb-text);
}

.sb-promo__leadFoot {
	margin: 10px 0 0;
}

/* SWELL の .post_content a に負けないよう .post_content を前置する */
.post_content a.sb-promo__leadLink,
.sb-promo__leadLink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sb-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--sb-accent);
	padding-bottom: 1px;
}

.post_content a.sb-promo__leadLink:hover {
	color: var(--sb-accent-deep);
	border-bottom-color: var(--sb-accent-deep);
}

@media (max-width: 599px) {
	.sb-promo--lead { padding: 14px 15px 12px; }
	.sb-promo__leadName { font-size: 15px; }
}

/* ============================================================
 * 13. トップページの写真（2026-09-21 追加）
 *    画像が無いときは PHP 側で出さないので、この節は写真がある前提で書く
 * ============================================================ */

/* --- 見出しの写真 ---
 *   スマホ・タブレット … 文章の下に16:9で置く
 *   PC（1001px〜）     … 見出しの右半分に、縦いっぱいで敷く。
 *                        左端はぼかした同じ写真を重ねて、背景のグラデーションへ溶かす
 */
.sb-hero__body {
	min-width: 0;
}

.sb-hero__inner--split .sb-hero__lead {
	max-width: none;
}

.sb-hero__visual {
	position: relative;
	min-width: 0;
	margin: 30px 0 0;
}

.sb-hero__visualIn {
	display: block;
}

.sb-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--sb-radius-lg);
	box-shadow: 0 18px 40px rgba(22, 48, 77, .18);
}

/* PC はトップの上余白を無くして、ヘッダーの真下からメインビジュアルを始める */
@media (min-width: 960px) {
	.top #content {
		padding-top: 0;
	}
}

@media (min-width: 1001px) {

	.sb-hero--desk {
		display: flex;
		align-items: center;
		min-height: 560px;
		padding: 56px 0;
	}

	/* 写真の位置をセクション基準にするため、内側の枠は position を外す
	   （重なり順は .sb-hero__body 側の z-index で付ける） */
	.sb-hero--desk > .sb-hero__inner {
		width: 100%;
		position: static;
	}

	.sb-hero__body {
		position: relative;
		z-index: 2;
		max-width: 500px;
	}

	/* 写真はセクションの高さいっぱい・右端まで。文章には重ねない */
	.sb-hero__visual {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: max(40%, 580px);   /* グラデーションの始まり。画面が狭いときは右へ寄せて、文章にかからないようにする */
		width: auto;
		--sb-heroZoom: 1.19;   /* 写真を少し拡大して、被写体を右へ送る（グラデーションは動かさない） */
		margin: 0;
		z-index: 1;
		pointer-events: none;
	}

	/* 写真の左端はグラデーションで背景へ溶かす。
	   グラデーション（マスク）は枠側に掛けているので、中の写真だけを動かせる */
	.sb-hero__visualIn {
		position: absolute;
		inset: 0;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent 8%, rgba(0, 0, 0, .12) 34%, #000 62%);
		        mask-image: linear-gradient(to right, transparent 8%, rgba(0, 0, 0, .12) 34%, #000 62%);
	}

	.sb-hero__visual img {
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
		/* 写真の左端を枠の左端にそろえる（ぼかしの途中で写真が切れないように）。
		   そのうえで左を基点に拡大し、被写体だけを右へ送る。グラデーションの位置は動かさない */
		object-position: 0% center;
		transform: scale(var(--sb-heroZoom));
		transform-origin: left center;
	}
}

/* 画面が狭いときは枠が細く、切り取りの余白が大きいので、拡大せず位置だけで寄せる */
@media (min-width: 1001px) and (max-width: 1279px) {
	.sb-hero__visual {
		--sb-heroZoom: 1;
	}

	.sb-hero__visual img {
		object-position: 28% center;
	}
}

/* --- 読む順番のカード：上に写真を載せる --- */
.sb-stance__sidePhoto {
	display: block;
	width: calc(100% + 48px);
	max-width: none;   /* テーマ側の img { max-width:100% } を上書きする */
	margin: -26px -24px 20px;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
}

/* --- 診断への案内：帯の背景に写真を敷く --- */
.sb-quizBand--photo {
	background-image:
		linear-gradient(105deg, rgba(22, 48, 77, .96) 0%, rgba(22, 48, 77, .93) 42%, rgba(31, 78, 122, .72) 100%),
		var(--sb-quizPhoto);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

@media (max-width: 1000px) {
	.sb-quizBand--photo {
		background-image:
			linear-gradient(170deg, rgba(22, 48, 77, .96) 0%, rgba(22, 48, 77, .93) 55%, rgba(31, 78, 122, .78) 100%),
			var(--sb-quizPhoto);
	}
}

@media (max-width: 599px) {
	.sb-hero__visual { margin-top: 24px; }
	.sb-stance__sidePhoto { width: calc(100% + 36px); margin: -22px -18px 16px; }   /* 横は .sb-stance__side の padding と同じ値にする */
}

/* --- 診断ページ：開始カードの上に写真を載せる --- */
.sb-shindan__introPhoto {
	display: block;
	width: calc(100% + 60px);
	max-width: none;
	margin: -32px -30px 24px;   /* 横は .sb-shindan__intro の padding と同じ値にする */
	aspect-ratio: 16 / 6;
	object-fit: cover;
	border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
}

@media (max-width: 599px) {
	.sb-shindan__introPhoto { width: calc(100% + 40px); margin: -26px -20px 20px; }
}