/* =========================================================
   Solar Hikaku — メインスタイル
   設計方針: 信頼感 × コンバージョン重視。緑=エコ / 橙=行動喚起。
   ========================================================= */

:root {
	--c-primary: #1b8a5a;      /* エコグリーン */
	--c-primary-dark: #136c46;
	--c-accent: #ff6b1a;       /* CTAオレンジ */
	--c-accent-dark: #e85400;
	--c-blue: #1c74c4;
	--c-ink: #23282d;
	--c-ink-soft: #4a5158;
	--c-line: #e3e7ea;
	--c-bg: #ffffff;
	--c-bg-soft: #f5f8f6;
	--c-bg-soft2: #eef4f0;
	--c-gold: #f5b301;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 2px 12px rgba(0,0,0,.07);
	--shadow-lg: 0 8px 28px rgba(0,0,0,.12);
	--maxw: 1160px;
	--maxw-content: 760px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--c-ink);
	background: var(--c-bg);
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
}

a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.sh-container { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.sh-skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 16px; z-index: 1000; }
.sh-skip-link:focus { left: 0; }

/* ---------- ヘッダー / ナビ ---------- */
.sh-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--c-line); }
.sh-header__inner { max-width: var(--maxw); margin-inline: auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.sh-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--c-ink); }
.sh-logo:hover { text-decoration: none; }
.sh-logo__mark { font-size: 22px; }
.custom-logo { max-height: 48px; width: auto; }

.sh-global-nav { margin-left: auto; }
.sh-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.sh-menu a { display: block; padding: 10px 12px; color: var(--c-ink); font-weight: 600; font-size: 15px; border-radius: var(--radius-sm); }
.sh-menu a:hover { background: var(--c-bg-soft); text-decoration: none; color: var(--c-primary); }

.sh-nav-toggle { display: none; }

/* ---------- レイアウト ---------- */
.sh-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; padding-top: 28px; padding-bottom: 60px; }
.sh-content { min-width: 0; }

/* ---------- ヒーロー ---------- */
.sh-hero { background: linear-gradient(135deg, #eaf6ef 0%, #e7f1fb 100%); padding: 56px 0; }
.sh-hero__eyebrow { color: var(--c-primary); font-weight: 700; margin: 0 0 8px; }
.sh-hero__title { font-size: clamp(28px, 5vw, 44px); line-height: 1.35; margin: 0 0 16px; font-weight: 800; }
.sh-hero__title strong { color: var(--c-accent); }
.sh-hero__lead { font-size: 17px; color: var(--c-ink-soft); margin: 0 0 24px; }
.sh-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sh-hero__sub-link { font-weight: 700; }

/* ---------- ボタン / CTA ---------- */
.sh-cta { margin: 24px 0; text-align: center; }
.sh-cta__btn {
	display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
	background: linear-gradient(180deg, #ff8339, var(--c-accent));
	color: #fff; font-weight: 800; font-size: 18px;
	padding: 16px 40px; border-radius: 999px; border: none; cursor: pointer;
	box-shadow: 0 6px 0 var(--c-accent-dark), var(--shadow);
	transition: transform .08s ease, box-shadow .08s ease;
	text-align: center; line-height: 1.4; max-width: 100%;
}
.sh-cta__btn:hover { text-decoration: none; color: #fff; transform: translateY(2px); box-shadow: 0 4px 0 var(--c-accent-dark), var(--shadow); }
.sh-cta__btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--c-accent-dark); }
.sh-cta__sub { font-size: 12px; font-weight: 600; opacity: .95; }
.sh-cta__note { font-size: 12px; color: var(--c-ink-soft); margin: 8px 0 0; }
.sh-cta--secondary .sh-cta__btn { background: linear-gradient(180deg, #2ba36c, var(--c-primary)); box-shadow: 0 6px 0 var(--c-primary-dark), var(--shadow); }
.sh-cta--secondary .sh-cta__btn:hover { box-shadow: 0 4px 0 var(--c-primary-dark), var(--shadow); }

.sh-btn-sm {
	display: inline-block; background: var(--c-accent); color: #fff; font-weight: 700; font-size: 13px;
	padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.sh-btn-sm:hover { color: #fff; text-decoration: none; background: var(--c-accent-dark); }

/* ---------- トップ: カード導線 ---------- */
.sh-front-block { padding: 40px 20px; }
.sh-front-heading { font-size: 24px; text-align: center; margin: 0 0 24px; position: relative; }
.sh-front-heading::after { content: ""; display: block; width: 48px; height: 4px; background: var(--c-primary); border-radius: 2px; margin: 10px auto 0; }
.sh-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sh-card { display: flex; flex-direction: column; gap: 6px; padding: 24px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--c-ink); transition: transform .1s, box-shadow .1s; }
.sh-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--c-ink); }
.sh-card__icon { font-size: 28px; }
.sh-card__title { font-weight: 800; font-size: 16px; }
.sh-card__desc { font-size: 13px; color: var(--c-ink-soft); }

/* ---------- 記事グリッド ---------- */
.sh-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sh-post-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .1s, box-shadow .1s; }
.sh-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sh-post-card__link { color: var(--c-ink); }
.sh-post-card__link:hover { text-decoration: none; }
.sh-post-card__thumb { aspect-ratio: 16/9; background: var(--c-bg-soft2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sh-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-post-card__noimg { font-size: 40px; }
.sh-post-card__body { padding: 14px 16px 18px; }
.sh-post-card__cat { display: inline-block; background: var(--c-bg-soft2); color: var(--c-primary); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-bottom: 8px; }
.sh-post-card__title { font-size: 16px; margin: 0 0 8px; line-height: 1.5; }
.sh-post-card__date { font-size: 12px; color: #8a9198; }

/* ---------- パンくず ---------- */
.sh-breadcrumbs { font-size: 12px; color: #8a9198; margin-bottom: 16px; }
.sh-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.sh-breadcrumbs li::after { content: "›"; margin-left: 6px; color: #c3c9cd; }
.sh-breadcrumbs li:last-child::after { content: ""; }

/* ---------- 記事本文（entry） ---------- */
.sh-single__header { margin-bottom: 20px; }
.sh-single__cat { display: inline-block; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; }
.sh-single__cat:hover { color: #fff; text-decoration: none; background: var(--c-primary-dark); }
.sh-single__title { font-size: clamp(24px, 4vw, 34px); line-height: 1.45; margin: 0 0 12px; font-weight: 800; }
.sh-single__meta { display: flex; gap: 16px; font-size: 13px; color: #8a9198; }
.sh-single__eyecatch { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; }

.sh-entry { font-size: 16.5px; }
.sh-entry > h2 { font-size: 25px; font-weight: 800; margin: 52px 0 20px; padding: 14px 18px; background: var(--c-bg-soft); border-left: 6px solid var(--c-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.5; }
.sh-entry > h3 { font-size: 21px; font-weight: 800; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--c-line); }
.sh-entry > h4 { font-size: 18px; font-weight: 800; margin: 28px 0 12px; color: var(--c-primary-dark); }
.sh-entry p { margin: 0 0 20px; }
.sh-entry ul, .sh-entry ol { margin: 0 0 22px; padding-left: 1.4em; }
.sh-entry li { margin-bottom: 8px; }
.sh-entry a { text-decoration: underline; font-weight: 600; }
.sh-entry img { border-radius: var(--radius-sm); }
.sh-entry blockquote { margin: 0 0 22px; padding: 12px 18px; background: var(--c-bg-soft); border-left: 4px solid #c3c9cd; color: var(--c-ink-soft); }
.sh-entry strong { color: #c0392b; }

/* H2下などの本文画像（figure既定の40pxマージンを打ち消す） */
.sh-h2img { margin: 24px 0; }
.sh-h2img img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* wpautopが混入させる余分な改行のCSS保険（囲み要素内） */
.sh-checklist br, .sh-compare br, .sh-faq br, .sh-steps br, .sh-voice__bubble br, .sh-box__body br, .sh-rank__body > br:first-child { display: none; }

/* マーカー（蛍光ペン風ハイライト） */
.sh-marker { background: linear-gradient(transparent 62%, #fff176 62%); font-weight: 700; padding: 0 .08em; }
.sh-marker--pink { background: linear-gradient(transparent 62%, #ffb3cd 62%); }
.sh-marker--blue { background: linear-gradient(transparent 62%, #a9d9ff 62%); }

/* ===== 吹き出し（会話ボックス） ===== */
.sh-voice { display: flex; align-items: flex-start; gap: 14px; margin: 24px 0; }
.sh-voice--right { flex-direction: row-reverse; }
.sh-voice__icon { flex: none; width: 64px; text-align: center; }
.sh-voice__icon img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-line); }
.sh-voice__ph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-bg-soft2); font-size: 30px; border: 2px solid var(--c-line); }
.sh-voice__name { display: block; font-size: 11px; color: var(--c-ink-soft); margin-top: 4px; line-height: 1.2; }
.sh-voice__bubble { position: relative; flex: 1; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 14px; padding: 14px 18px; }
.sh-voice__bubble p:last-child { margin-bottom: 0; }
.sh-voice__bubble::before { content: ""; position: absolute; top: 20px; left: -8px; width: 14px; height: 14px; background: var(--c-bg-soft); border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); transform: rotate(45deg); }
.sh-voice--right .sh-voice__bubble::before { left: auto; right: -8px; transform: rotate(-135deg); }

/* ===== 内部リンクカード（ブログカード） ===== */
.sh-lcard { display: flex; gap: 0; margin: 24px 0; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); color: var(--c-ink); transition: transform .1s, box-shadow .1s; }
.sh-lcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--c-ink); }
.sh-lcard__thumb { flex: none; width: 130px; background: var(--c-bg-soft2); overflow: hidden; display: grid; place-items: center; }
.sh-lcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-lcard__thumb--ph { font-size: 34px; }
.sh-lcard__body { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sh-lcard__label { font-size: 11px; font-weight: 700; color: var(--c-primary); }
.sh-lcard__title { font-weight: 800; font-size: 15.5px; line-height: 1.45; margin: 3px 0; }
.sh-lcard__desc { font-size: 12.5px; color: var(--c-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 見出し付きキャプションボックス ===== */
.sh-box { border: 2px solid var(--c-line); border-radius: var(--radius); margin: 24px 0; overflow: hidden; background: #fff; }
.sh-box__title { margin: 0; padding: 10px 16px; font-weight: 800; font-size: 15.5px; color: #fff; display: flex; align-items: center; gap: 8px; }
.sh-box__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.28); font-size: 12px; }
.sh-box__body { padding: 14px 16px; }
.sh-box__body p:last-child { margin-bottom: 0; }
.sh-box--merit   { border-color: #2ba36c; } .sh-box--merit .sh-box__title   { background: #2ba36c; }
.sh-box--demerit { border-color: #6b7a86; } .sh-box--demerit .sh-box__title { background: #6b7a86; }
.sh-box--check   { border-color: var(--c-primary); } .sh-box--check .sh-box__title { background: var(--c-primary); }
.sh-box--caution { border-color: #e0736f; } .sh-box--caution .sh-box__title { background: #e0736f; }
.sh-box--info    { border-color: var(--c-blue); } .sh-box--info .sh-box__title { background: var(--c-blue); }
.sh-box--point   { border-color: var(--c-accent); } .sh-box--point .sh-box__title { background: var(--c-accent); }

/* ===== グラフ・インフォグラフィック ===== */
.sh-chart { margin: 24px 0; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.sh-chart__title { font-weight: 800; font-size: 15.5px; margin: 0 0 14px; color: var(--c-ink); }
.sh-chart__note { font-size: 12px; color: #8a9198; margin: 12px 0 0; }
/* 横棒グラフ */
.sh-bars { display: grid; gap: 12px; }
.sh-bar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 14px; }
.sh-bar__label { color: var(--c-ink-soft); }
.sh-bar__val { font-weight: 800; color: var(--c-primary-dark); }
.sh-bar__track { background: var(--c-bg-soft); border-radius: 999px; height: 16px; overflow: hidden; }
.sh-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, #2ba36c, var(--c-primary)); border-radius: 999px; }
/* 数値タイル */
.sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 24px 0; }
.sh-stat { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 12px; text-align: center; background: var(--c-bg-soft); }
.sh-stat__num { display: block; font-size: 24px; font-weight: 900; color: var(--c-accent-dark); line-height: 1.2; }
.sh-stat__label { display: block; font-size: 12.5px; color: var(--c-ink-soft); margin-top: 6px; }
/* 内訳バー */
.sh-breakdown { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; }
.sh-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; min-width: 0; white-space: nowrap; }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--c-ink-soft); }
.sh-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sh-legend__dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ===== 図解パーツ ===== */
/* 計算式ボックス */
.sh-formula { margin: 24px 0; padding: 18px; border: 2px solid var(--c-primary); border-radius: var(--radius); background: var(--c-bg-soft); text-align: center; }
.sh-formula__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; font-weight: 800; }
.sh-formula__result { background: var(--c-primary); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 16px; }
.sh-formula__eq { font-size: 20px; color: var(--c-ink-soft); }
.sh-formula__expr { font-size: 17px; color: var(--c-ink); }
.sh-formula__note { font-size: 12.5px; color: var(--c-ink-soft); margin-top: 10px; }
/* 横フロー */
.sh-flow { margin: 24px 0; }
.sh-flow__title { font-weight: 800; font-size: 15.5px; margin-bottom: 12px; }
.sh-flow__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.sh-flow__item { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; border: 2px solid var(--c-primary); border-radius: var(--radius-sm); padding: 12px 10px; font-weight: 700; font-size: 14px; }
.sh-flow__arrow { display: flex; align-items: center; color: var(--c-primary); font-weight: 900; font-size: 20px; }
/* タイムライン */
.sh-timeline { margin: 24px 0; padding-left: 6px; }
.sh-timeline__title { font-weight: 800; font-size: 15.5px; margin-bottom: 14px; }
.sh-tl { position: relative; display: flex; gap: 14px; padding: 0 0 18px 0; }
.sh-tl:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--c-line); }
.sh-tl__dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--c-accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-accent); z-index: 1; }
.sh-tl__when { display: block; font-weight: 800; color: var(--c-primary-dark); font-size: 14.5px; }
.sh-tl__what { display: block; font-size: 14px; color: var(--c-ink-soft); margin-top: 2px; }
/* 左右対比 */
.sh-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 24px 0; }
.sh-versus__col { border: 2px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: #fff; align-self: stretch; }
.sh-versus__head { margin: 0; padding: 10px; font-weight: 800; font-size: 14.5px; color: #fff; text-align: center; }
.sh-versus__col--merit { border-color: #2ba36c; } .sh-versus__col--merit .sh-versus__head { background: #2ba36c; }
.sh-versus__col--demerit { border-color: #6b7a86; } .sh-versus__col--demerit .sh-versus__head { background: #6b7a86; }
.sh-versus__col ul { list-style: none; margin: 0; padding: 10px 12px; }
.sh-versus__col li { font-size: 13.5px; padding: 4px 0 4px 18px; position: relative; }
.sh-versus__col li::before { content: "•"; position: absolute; left: 4px; color: var(--c-ink-soft); }
.sh-versus__vs { font-weight: 900; color: var(--c-accent); font-size: 15px; }
@media (max-width: 560px) {
	.sh-versus { grid-template-columns: 1fr; }
	.sh-versus__vs { padding: 2px 0; }
	.sh-flow__row { flex-direction: column; }
	.sh-flow__arrow { transform: rotate(90deg); align-self: center; }
}

/* ===== 番号付きステップ ===== */
.sh-steps { margin: 24px 0; counter-reset: sh-step; }
.sh-step { position: relative; display: flex; gap: 14px; padding: 0 0 20px 0; }
.sh-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--c-line); }
.sh-step__num { flex: none; counter-increment: sh-step; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 800; display: grid; place-items: center; z-index: 1; }
.sh-step__num::before { content: counter(sh-step); }
.sh-step__content { flex: 1; padding-top: 3px; }
.sh-step__title { font-weight: 800; font-size: 16px; margin: 0 0 6px; }
.sh-step__body p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
	.sh-lcard__thumb { width: 96px; }
}

/* 通常のWPテーブル */
.sh-entry table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.sh-entry table th, .sh-entry table td { border: 1px solid var(--c-line); padding: 10px 12px; }
.sh-entry table th { background: var(--c-bg-soft); }

/* ---------- 比較表（ショートコード） ---------- */
.sh-table-wrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.sh-table-title { font-weight: 800; margin: 0 0 10px; font-size: 17px; }
.sh-compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; font-size: 14.5px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.sh-compare thead th { background: var(--c-primary); color: #fff; padding: 12px 10px; font-size: 13px; text-align: center; }
.sh-compare tbody th, .sh-compare tbody td { border-top: 1px solid var(--c-line); padding: 12px 10px; text-align: center; vertical-align: middle; }
.sh-compare__name { text-align: left !important; background: var(--c-bg-soft); font-weight: 800; min-width: 150px; }
.sh-compare__name-text { display: block; }
.sh-compare__cta { white-space: nowrap; }
.sh-compare tbody tr:nth-child(even) td { background: #fbfcfb; }

/* バッジ */
.sh-badge { display: inline-block; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }
.sh-badge--accent { background: var(--c-accent); }

/* ---------- ランキングカード ---------- */
.sh-rank { position: relative; border: 2px solid var(--c-line); border-radius: var(--radius); padding: 24px; margin: 28px 0; background: #fff; box-shadow: var(--shadow); }
.sh-rank__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.sh-rank__no { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #fff; background: #9aa4ab; }
.sh-rank__no--1 { background: linear-gradient(135deg, #f7c948, #e6a100); }
.sh-rank__no--2 { background: linear-gradient(135deg, #c7ccd1, #9aa4ab); }
.sh-rank__no--3 { background: linear-gradient(135deg, #d99a63, #b5763f); }
.sh-rank__name { font-size: 20px; margin: 4px 0 6px; font-weight: 800; }
.sh-rank__info { background: var(--c-bg-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; color: var(--c-ink-soft); margin: 0 0 14px; }
.sh-rank__body { font-size: 15.5px; }
.sh-rank__body p:last-child { margin-bottom: 0; }
.sh-rank .sh-cta { margin-bottom: 0; }

/* 星 */
.sh-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 1px; vertical-align: middle; }
.sh-stars__bg { color: #dcdfe2; }
.sh-stars__fg { position: absolute; left: 0; top: 0; color: var(--c-gold); overflow: hidden; white-space: nowrap; }
.sh-stars__num { display: inline-block; margin-left: 6px; font-weight: 800; color: var(--c-accent-dark); vertical-align: middle; }

/* ---------- ポイント / 結論ボックス ---------- */
.sh-point { border-radius: var(--radius); padding: 20px 22px; margin: 28px 0; border: 2px solid; }
.sh-point__title { font-weight: 800; font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sh-point__body p:last-child { margin-bottom: 0; }
.sh-point--conclusion { background: #fff6ee; border-color: var(--c-accent); }
.sh-point--conclusion .sh-point__title::before { content: "✔"; color: var(--c-accent); }
.sh-point--caution { background: #fdf0f0; border-color: #e08383; }
.sh-point--caution .sh-point__title::before { content: "⚠"; }
.sh-point--info { background: var(--c-bg-soft); border-color: var(--c-primary); }
.sh-point--info .sh-point__title::before { content: "💡"; }

/* ---------- 監修者コメント ---------- */
.sh-sv { display: flex; gap: 14px; background: #eef4fb; border: 1px solid #cfe0f2; border-radius: var(--radius); padding: 16px 18px; margin: 24px 0; }
.sh-sv__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #cfe0f2; display: grid; place-items: center; }
.sh-sv__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sh-sv__ph { font-size: 12px; font-weight: 800; color: var(--c-blue); }
.sh-sv__meta { margin: 0 0 4px; font-size: 13px; color: var(--c-ink-soft); }
.sh-sv__meta strong { color: var(--c-ink); }
.sh-sv__text p:last-child { margin-bottom: 0; }
.sh-sv__text { font-size: 15px; }

/* ---------- 口コミ ---------- */
.sh-review { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; background: #fff; box-shadow: var(--shadow); }
.sh-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.sh-review__title { font-weight: 800; margin: 0; font-size: 15.5px; }
.sh-review__body { font-size: 15px; }
.sh-review__body p:last-child { margin-bottom: 0; }
.sh-review__meta { text-align: right; font-size: 12px; color: #8a9198; margin: 6px 0 0; }

/* ---------- チェックリスト ---------- */
.sh-checklist { list-style: none; padding: 0; margin: 20px 0; }
.sh-checklist .sh-check { position: relative; padding: 10px 12px 10px 40px; margin: 0 0 8px; background: var(--c-bg-soft); border-radius: var(--radius-sm); }
.sh-checklist .sh-check::before { content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: var(--c-primary); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }

/* ---------- FAQ ---------- */
.sh-faq { margin: 24px 0; }
.sh-qa { border: 1px solid var(--c-line); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.sh-qa__q { cursor: pointer; padding: 14px 44px 14px 44px; font-weight: 700; position: relative; background: #fff; list-style: none; }
.sh-qa__q::-webkit-details-marker { display: none; }
.sh-qa__q::before { content: "Q"; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; background: var(--c-primary); color: #fff; border-radius: 4px; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.sh-qa__q::after { content: "＋"; position: absolute; right: 16px; top: 14px; color: var(--c-primary); font-weight: 800; }
.sh-qa[open] .sh-qa__q::after { content: "－"; }
.sh-qa__a { padding: 14px 18px 16px 44px; border-top: 1px solid var(--c-line); background: var(--c-bg-soft); position: relative; font-size: 15px; }
.sh-qa__a p:last-child { margin-bottom: 0; }

/* ---------- シミュレーター ---------- */
.sh-sim { border: 2px solid var(--c-primary); border-radius: var(--radius); overflow: hidden; margin: 32px 0; background: #fff; box-shadow: var(--shadow); }
.sh-sim__head { background: linear-gradient(135deg, var(--c-primary), #2ba36c); color: #fff; padding: 20px 22px; }
.sh-sim__title { margin: 0 0 6px; font-size: 20px; }
.sh-sim__lead { margin: 0; font-size: 14px; opacity: .95; }
.sh-sim__lead strong { color: #fff8d6; }
.sh-sim__form { padding: 22px; display: grid; gap: 18px; }
.sh-sim__field { display: grid; gap: 6px; }
.sh-sim__field label { font-weight: 700; font-size: 14.5px; }
.sh-sim__input, .sh-sim__range { width: 100%; }
.sh-sim__input { padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: 16px; background: #fff; }
.sh-sim__range { accent-color: var(--c-primary); height: 28px; }
.sh-sim__field output { font-weight: 800; color: var(--c-primary-dark); }
.sh-sim__toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sh-sim__battery-cap { margin-top: 10px; display: grid; gap: 6px; }
.sh-sim__run { background: var(--c-accent); color: #fff; font-weight: 800; font-size: 17px; padding: 14px; border: none; border-radius: var(--radius-sm); cursor: pointer; box-shadow: 0 4px 0 var(--c-accent-dark); }
.sh-sim__run:hover { background: var(--c-accent-dark); box-shadow: 0 2px 0 var(--c-accent-dark); }

.sh-sim__result { padding: 0 22px 22px; }
.sh-sim__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sh-sim__card { background: var(--c-bg-soft); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; border: 1px solid var(--c-line); }
.sh-sim__card--hl { background: #fff6ee; border-color: var(--c-accent); }
.sh-sim__card-label { display: block; font-size: 12px; color: var(--c-ink-soft); margin-bottom: 6px; }
.sh-sim__card-value { display: block; font-size: 19px; font-weight: 900; color: var(--c-primary-dark); }
.sh-sim__card--hl .sh-sim__card-value { color: var(--c-accent-dark); }
.sh-sim__summary { background: #eef4fb; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; margin: 0 0 8px; }
.sh-sim__disclaimer { font-size: 11.5px; color: #8a9198; margin: 12px 0 0; }

/* ---------- サイドバー / ウィジェット ---------- */
.sh-sidebar .widget { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; box-shadow: var(--shadow); }
.sh-sidebar .widget-title { font-size: 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--c-primary); }
.sh-side-cta { background: var(--c-bg-soft) !important; }
.sh-side-cta .sh-cta__btn { width: 100%; font-size: 16px; padding: 14px; }
.sh-side-posts { list-style: none; margin: 0; padding: 0; }
.sh-side-posts__item { border-bottom: 1px dashed var(--c-line); }
.sh-side-posts__item:last-child { border-bottom: none; }
.sh-side-posts__item a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; }
.sh-side-posts__thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 64px; background: var(--c-bg-soft); }
.sh-side-posts__thumb--none { display: block; }
.sh-side-posts__title { font-size: 13px; line-height: 1.45; font-weight: 600; }
.sh-side-posts__item a:hover .sh-side-posts__title { color: var(--c-primary); }
/* WordPress標準の「最近の投稿」(Latest Posts)ブロックを小さめアイキャッチで横並びに揃える */
.sh-sidebar .wp-block-latest-posts.is-grid { display: block !important; }
.sh-sidebar ul.wp-block-latest-posts__list { margin: 0; padding: 0; list-style: none; }
.sh-sidebar ul.wp-block-latest-posts__list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; margin: 0; border-bottom: 1px dashed var(--c-line); }
.sh-sidebar ul.wp-block-latest-posts__list li:last-child { border-bottom: none; }
.sh-sidebar .wp-block-latest-posts__featured-image { flex: 0 0 64px; margin: 0; line-height: 0; }
.sh-sidebar .wp-block-latest-posts__featured-image img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; }
.sh-sidebar .wp-block-latest-posts__post-title { font-size: 13px; line-height: 1.45; font-weight: 600; }

/* ---------- 目次(TOC) ---------- */
.sh-toc { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-md, 10px); padding: 16px 20px; margin: 24px 0 28px; max-width: var(--maxw-content, 760px); }
.sh-toc__title { font-weight: 700; font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sh-toc__title::before { content: ""; width: 4px; height: 18px; background: var(--c-primary); border-radius: 2px; display: inline-block; }
.sh-toc__list { margin: 0; padding-left: 1.4em; }
.sh-toc__list li { margin: 6px 0; line-height: 1.5; }
.sh-toc__list a { color: var(--c-text, #333); text-decoration: none; }
.sh-toc__list a:hover { color: var(--c-primary); text-decoration: underline; }
.sh-entry h2 { scroll-margin-top: 80px; }

/* ---------- 関連記事 ---------- */
.sh-related { margin-top: 48px; }
.sh-related__title { font-size: 20px; margin: 0 0 18px; }
.sh-tags { margin-top: 24px; font-size: 13px; }
.sh-tags a { display: inline-block; background: var(--c-bg-soft); padding: 4px 12px; border-radius: 999px; margin: 0 6px 6px 0; color: var(--c-ink-soft); }

/* ---------- 検索フォーム ---------- */
.sh-searchform { display: flex; gap: 8px; }
.sh-searchform__input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.sh-searchform__btn { background: var(--c-primary); color: #fff; border: none; padding: 0 18px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }

/* サイドバー内の検索窓はコンパクトに（テーマ標準・ブロック版どちらも） */
.sh-sidebar .sh-searchform__input,
.sh-sidebar .wp-block-search__input,
.sh-sidebar input[type="search"] { padding: 7px 10px; font-size: 14px; height: auto; line-height: 1.4; }
.sh-sidebar .sh-searchform__btn,
.sh-sidebar .wp-block-search__button { padding: 0 14px; font-size: 14px; }
.sh-sidebar .wp-block-search { max-width: 100%; }
.sh-sidebar .wp-block-search__inside-wrapper { gap: 8px; }

/* ---------- ページネーション ---------- */
.pagination { margin-top: 32px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; }
.pagination .page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- アーカイブ見出し ---------- */
.sh-archive__header { margin-bottom: 24px; }
.sh-archive__title { font-size: 26px; margin: 0 0 8px; }
.sh-archive__desc { color: var(--c-ink-soft); font-size: 15px; }

/* ---------- 404 ---------- */
.sh-404 { text-align: center; padding: 40px 0; }
.sh-404__title { font-size: 24px; }
.sh-404 .sh-searchform { max-width: 420px; margin: 20px auto; }

/* ---------- フッター ---------- */
.sh-footer { background: #1e2a24; color: #cdd6d0; margin-top: 40px; padding: 40px 0 24px; }
.sh-footer__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.sh-footer .widget-title { color: #fff; font-size: 18px; margin: 0 0 8px; }
.sh-footer a { color: #a9d9c1; }
.sh-footer__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 20px 0; }
.sh-footer__disclosure { font-size: 12px; color: #8fa197; border-top: 1px solid #33443b; padding-top: 16px; margin-top: 16px; }
.sh-footer__copy { font-size: 12px; color: #8fa197; margin: 8px 0 0; }

/* ---------- スマホ追従CTA ---------- */
.sh-float-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 12px; background: rgba(255,255,255,.96); box-shadow: 0 -2px 12px rgba(0,0,0,.12); transform: translateY(120%); transition: transform .25s ease; display: none; }
.sh-float-cta.is-visible { transform: translateY(0); }
.sh-float-cta a { display: block; text-align: center; background: linear-gradient(180deg, #ff8339, var(--c-accent)); color: #fff; font-weight: 800; padding: 14px; border-radius: 999px; }
.sh-float-cta a:hover { text-decoration: none; color: #fff; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
	.sh-layout { grid-template-columns: 1fr; gap: 32px; }
	.sh-cards { grid-template-columns: repeat(2, 1fr); }
	.sh-post-grid { grid-template-columns: repeat(2, 1fr); }
	.sh-sim__cards { grid-template-columns: repeat(2, 1fr); }

	.sh-nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; }
	.sh-nav-toggle span:not(.sh-nav-toggle__label) { width: 24px; height: 2px; background: var(--c-ink); border-radius: 2px; }
	.sh-nav-toggle__label { font-size: 10px; margin-top: 2px; }
	.sh-global-nav { position: fixed; inset: 0 0 0 auto; width: min(80%, 320px); background: #fff; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); padding: 72px 20px 20px; overflow-y: auto; z-index: 200; }
	.sh-global-nav.is-open { transform: translateX(0); }
	.sh-menu { flex-direction: column; gap: 2px; }
	.sh-menu a { padding: 14px 12px; border-bottom: 1px solid var(--c-line); }
	.sh-float-cta { display: block; }
}

@media (max-width: 560px) {
	body { font-size: 15.5px; }
	.sh-cards { grid-template-columns: 1fr; }
	.sh-post-grid { grid-template-columns: 1fr; }
	.sh-sim__cards { grid-template-columns: 1fr 1fr; }
	.sh-entry > h2 { font-size: 21px; }
	.sh-entry > h3 { font-size: 19px; }
	.sh-hero { padding: 40px 0; }
	.sh-cta__btn { padding: 15px 28px; font-size: 17px; width: 100%; }
}
