@charset "UTF-8";
/*
 * SwitchBot診断 採用版CSS（デザイン案A「sketch」原典色・2026-09-22 shaun裁定）
 * 出典: .claude/skills/design-sketch（bergside/awesome-design-skills skills/sketch・MIT）
 * 骨子: クリーム紙（#F4EDE0系）に鉛筆描き。ティール #1DAD97 の差し色、破線のカード枠、ピル型ボタン、
 *       右下にずらした「鉛筆影」。文字はサイトのゴシックのまま（指定フォント Delicious Handrawn は英字専用のため借りない）。
 * 設置: wp-content/themes/swell_child/sb-diag.css（正本は sb-diag.sketch.css。直すときは両方を揃える）
 */
.sb-diag {
	--sbd-ink: #1f2937;          /* 鉛筆の線 */
	--sbd-teal: #1DAD97;
	--sbd-teal-dark: #158a78;
	--sbd-teal-pale: #dff5f0;
	--sbd-paper: #fbf7ee;        /* 紙 */
	--sbd-paper-deep: #f4ede0;   /* 濃い紙 */
	--sbd-text: #111827;
	--sbd-muted: #5b6470;
	--sbd-red: #DC2626;
	--sbd-shadow: 3px 3px 0 var(--sbd-ink);
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto 2em;
	padding: 22px 18px 18px;
	border: 2px dashed var(--sbd-ink);
	border-radius: 18px;
	background: var(--sbd-paper);
	color: var(--sbd-text);
	line-height: 1.6;
	font-size: 16px;
	box-shadow: var(--sbd-shadow);
}
.sb-diag *, .sb-diag *::before, .sb-diag *::after { box-sizing: inherit; }
.sb-diag p { margin: 0; }
.sb-diag ul { list-style: none; margin: 0; padding: 0; }
.sb-diag button { font: inherit; }

/* ---- 質問 ---- */
.sb-diag__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-diag__step {
	font-size: 13px; font-weight: 800; color: var(--sbd-ink);
	padding: 2px 10px; border: 2px solid var(--sbd-ink); border-radius: 999px; background: #fff;
}
.sb-diag__bar { flex: 1; height: 8px; border: 2px dashed var(--sbd-ink); border-radius: 999px; background: #fff; overflow: hidden; }
.sb-diag__bar i { display: block; height: 100%; background: var(--sbd-teal); transition: width .25s ease; }
.sb-diag__q { font-size: 1.2em; font-weight: 800; margin: 0 0 16px !important; line-height: 1.45; }
.sb-diag__q::before { content: '✎ '; color: var(--sbd-teal); }

.sb-diag__opts { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .sb-diag__opts { grid-template-columns: 1fr 1fr; } }
.sb-diag__opt {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	min-height: 56px; width: 100%;
	padding: 12px 46px 12px 16px;
	border: 2px dashed #8b8f96;
	border-radius: 14px;
	background: #fff;
	color: var(--sbd-text);
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: border-color .15s, box-shadow .15s, transform .08s, background .15s;
	-webkit-tap-highlight-color: transparent;
}
.sb-diag__opt::after {
	content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font-weight: 800; color: var(--sbd-teal);
}
.sb-diag__opt:hover, .sb-diag__opt:focus-visible {
	border-style: solid; border-color: var(--sbd-ink); background: var(--sbd-teal-pale);
	box-shadow: var(--sbd-shadow); transform: translate(-1px, -1px); outline: none;
}
.sb-diag__opt:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--sbd-ink); }
.sb-diag__optLabel { font-weight: 700; }
.sb-diag__optSub { font-size: 13px; color: var(--sbd-muted); margin-top: 2px; }

.sb-diag__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; min-height: 28px; }
.sb-diag__hint { font-size: 13px; color: var(--sbd-muted); }
.sb-diag__back, .sb-diag__restart {
	background: none; border: none; padding: 6px 4px; cursor: pointer;
	color: var(--sbd-muted); font-size: 14px;
	text-decoration: underline wavy var(--sbd-teal); text-underline-offset: 4px;
}
.sb-diag__back:hover, .sb-diag__restart:hover { color: var(--sbd-teal-dark); }

/* ---- 結果 ---- */
.sb-diag__result { animation: sbd-fade .25s ease; }
@keyframes sbd-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sb-diag__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em;
	color: #fff; background: var(--sbd-ink); padding: 3px 10px; border-radius: 999px;
	transform: rotate(-2deg); margin-bottom: 6px;
}
.sb-diag__rTitle { font-size: 1.05em; margin: 4px 0 14px !important; line-height: 1.45; }
.sb-diag__rTitle strong {
	font-size: 1.4em; color: var(--sbd-text);
	background: linear-gradient(transparent 62%, rgba(29,173,151,.35) 62%);
}
.sb-diag__headline { font-weight: 700; margin-bottom: 8px !important; }
.sb-diag__body { color: var(--sbd-muted); font-size: 15px; margin-bottom: 18px !important; }

.sb-diag__label { display: block; font-size: 12px; font-weight: 800; color: var(--sbd-muted); letter-spacing: .08em; margin-bottom: 6px; }

.sb-diag__primary {
	display: block; text-decoration: none !important; color: var(--sbd-text) !important;
	padding: 16px 18px; border-radius: 16px;
	background: #fff; border: 2px solid var(--sbd-ink);
	box-shadow: var(--sbd-shadow);
	margin-bottom: 18px;
	transition: transform .08s, box-shadow .08s;
}
.sb-diag__primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sbd-ink); }
.sb-diag__aTitle { display: block; font-weight: 800; line-height: 1.5; margin: 2px 0 10px; }
.sb-diag__cta {
	display: inline-block; font-size: 14px; font-weight: 800; color: #fff;
	background: var(--sbd-teal); padding: 6px 14px; border-radius: 999px;
}

.sb-diag__secondary { margin-bottom: 18px; }
.sb-diag__secondary li { padding: 7px 0; border-bottom: 2px dashed #c9c3b5; font-size: 15px; }
.sb-diag__secondary li::before { content: '☐ '; color: var(--sbd-teal); }
.sb-diag__secondary li:last-child { border-bottom: none; }
.sb-diag__secondary a { color: var(--sbd-teal-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.sb-diag__buy { padding: 16px 16px 14px; border-radius: 16px; border: 2px dashed var(--sbd-ink); background: var(--sbd-paper-deep); }
.sb-diag__saleNow { font-size: 15px; margin-bottom: 10px !important; }
.sb-diag__saleNow strong { color: var(--sbd-red); }
.sb-diag__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sbd-red); border: 2px solid var(--sbd-ink); margin-right: 6px; vertical-align: 0; animation: sbd-blink 1.4s infinite; }
@keyframes sbd-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.sb-diag__saleSoon { font-size: 15px; margin-bottom: 10px !important; color: var(--sbd-muted); }
.sb-diag__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .sb-diag__btns { grid-template-columns: 1fr 1fr; } }
.sb-diag__btn {
	display: flex; align-items: center; justify-content: center; min-height: 50px;
	padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 15px;
	text-decoration: none !important; text-align: center;
	border: 2px solid var(--sbd-ink); box-shadow: var(--sbd-shadow);
	transition: transform .08s, box-shadow .08s;
}
.sb-diag__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sbd-ink); }
.sb-diag__btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--sbd-ink); }
.sb-diag__btn--buy { background: var(--sbd-teal); color: #fff !important; }
.sb-diag__btn--sale { background: #fff; color: var(--sbd-text) !important; }
.sb-diag__nav--result { margin-top: 18px; }

/* ---- 入口バナー ---- */
.sb-diagBanner,
.post_content > .sb-diagBanner:first-child {  /* 2026-09-24: SWELLの `.post_content > :first-child {margin-top:0 !important}` は詳細度0,2,0。0,3,0で上回らせる */
	display: flex; align-items: center; gap: 14px;
	max-width: 720px; margin: 32px auto 64px !important;  /* 2026-09-24: shaun「上下の余白が少ない」。SWELLの「本文先頭は margin-top:0 !important」に負けるため !important で上32px・下64px */
	padding: 14px 16px;
	border: 2px dashed #1f2937; border-radius: 18px;
	background: #fbf7ee;
	color: #111827 !important;
	text-decoration: none !important;
	box-shadow: 3px 3px 0 #1f2937;
	transition: transform .08s, box-shadow .08s;
}
.sb-diagBanner:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1f2937; }
.sb-diagBanner__icon {
	flex: none; width: 46px; height: 46px; border-radius: 50%;
	background: #1DAD97; color: #fff; font-weight: 900; font-size: 22px;
	border: 2px solid #1f2937;
	display: flex; align-items: center; justify-content: center;
	transform: rotate(-6deg);
}
.sb-diagBanner__text { flex: 1; min-width: 0; }
.sb-diagBanner__title { display: block; font-weight: 900; font-size: 17px; line-height: 1.3; background: linear-gradient(transparent 62%, rgba(29,173,151,.35) 62%); width: fit-content; }
.sb-diagBanner__sub { display: block; font-size: 13px; color: #5b6470; margin-top: 4px; line-height: 1.45; }
.sb-diagBanner__arrow { flex: none; color: #1DAD97; font-weight: 900; font-size: 20px; }