/* peraauto 記事の見出し（設定で選ぶ）。公開ページと管理画面の見本で共通 */
/* ---- h2 ---- */
.h2-bar .review-body h2 { padding-left: 16px; border-left: 6px solid var(--h2-accent, var(--shu)); }
.h2-band .review-body h2 { padding: var(--h2-pad, 12px 18px); background: var(--h2-accent, var(--shu)); color: var(--on-shu, #fff); }
.h2-under .review-body h2 { padding-bottom: 8px; border-bottom: 4px double var(--h2-accent, var(--shu)); }
.h2-box .review-body h2 { padding: var(--h2-pad, 12px 18px); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--h2-accent, var(--shu)); }
.h2-tab .review-body h2 { position: relative; padding: calc(var(--h2-pad-v, 12px) + 10px) 18px var(--h2-pad-v, 12px); background: var(--paper-2); border-top: 3px solid var(--h2-accent, var(--shu)); }
.h2-tab .review-body h2::before { content: "POINT"; position: absolute; left: 0; top: -14px; background: var(--h2-accent, var(--shu)); color: var(--on-shu, #fff); font: italic 12px/1 var(--latin); padding: 6px 10px; letter-spacing: .1em; }
.h2-num .review-body { counter-reset: h2n; }
.h2-num .review-body h2 { counter-increment: h2n; display: flex; align-items: baseline; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.h2-num .review-body h2::before { content: counter(h2n, decimal-leading-zero); font: 34px/1 var(--latin); color: var(--h2-accent, var(--shu)); }
/* h3 の見た目（設定で選ぶ） */
.h3-diamond .review-body h3::before { content: "◆ "; color: var(--h3-accent, var(--shu)); font-size: 13px; }
.h3-dot .review-body h3 { display: flex; align-items: center; gap: 10px; }
.h3-dot .review-body h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--h3-accent, var(--shu)); flex: none; }
.h3-line .review-body h3 { padding-left: 12px; border-left: 3px solid var(--h3-accent, var(--shu)); }
.h3-under .review-body h3 { padding-bottom: 6px; border-bottom: 2px dotted var(--h3-accent, var(--shu)); }
.h3-bracket .review-body h3::before { content: "「"; color: var(--h3-accent, var(--shu)); } .h3-bracket .review-body h3::after { content: "」"; color: var(--h3-accent, var(--shu)); }
.h3-marker .review-body h3 { display: inline; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--h3-accent, var(--shu)) 30%, transparent) 55%); }
.h3-marker .review-body h3 + * { margin-top: 12px; }
.h2-underline .review-body h2 { padding-bottom: 8px; border-bottom: 4px solid var(--h2-accent, var(--shu)); }
.h2-underhalf .review-body h2 { position: relative; padding-bottom: 10px; border-bottom: 3px solid var(--line); }
.h2-underhalf .review-body h2::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 30%; height: 3px; background: var(--h2-accent, var(--shu)); }
.h2-check .review-body h2 { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.h2-check .review-body h2::before { content: "✓"; flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; background: var(--h2-accent, var(--shu)); color: var(--on-shu, #fff); border-radius: 50%; font-size: .8em; font-weight: 900; }
.h2-bubble .review-body h2 { position: relative; padding: var(--h2-pad, 12px 18px); background: var(--h2-accent, var(--shu)); color: var(--on-shu, #fff); border-radius: 8px; margin-bottom: 22px; }
.h2-bubble .review-body h2::after { content: ""; position: absolute; left: 26px; bottom: -12px; border: 7px solid transparent; border-top: 7px solid var(--h2-accent, var(--shu)); border-left-width: 9px; border-right-width: 9px; }
.h2-stripe .review-body h2 { padding: var(--h2-pad, 12px 18px); border-left: 6px solid var(--h2-accent, var(--shu)); background: repeating-linear-gradient(-45deg, var(--paper-2), var(--paper-2) 6px, transparent 6px, transparent 12px); }
.h2-corner .review-body h2 { position: relative; padding: var(--h2-pad, 14px 20px); }
.h2-corner .review-body h2::before, .h2-corner .review-body h2::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid var(--h2-accent, var(--shu)); }
.h2-corner .review-body h2::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.h2-corner .review-body h2::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.h2-gradient .review-body h2 { padding: var(--h2-pad, 12px 18px); color: var(--on-shu, #fff); background: linear-gradient(90deg, var(--h2-accent, var(--shu)), color-mix(in srgb, var(--h2-accent, var(--shu)) 35%, transparent)); }
.h2-dotted .review-body h2 { padding-bottom: 8px; border-bottom: 3px dotted var(--h2-accent, var(--shu)); }
/* ---- h3 追加 ---- */
.h3-check .review-body h3 { display: flex; align-items: baseline; gap: 8px; }
.h3-check .review-body h3::before { content: "✓"; color: var(--h3-accent, var(--shu)); font-weight: 900; font-size: 1.15em; }
.h3-checkcircle .review-body h3 { display: flex; align-items: center; gap: 10px; }
.h3-checkcircle .review-body h3::before { content: "✓"; flex: none; width: 1.45em; height: 1.45em; display: grid; place-items: center; border: 2px solid var(--h3-accent, var(--shu)); color: var(--h3-accent, var(--shu)); border-radius: 50%; font-size: .75em; font-weight: 900; }
.h3-underline .review-body h3 { padding-bottom: 6px; border-bottom: 3px solid var(--h3-accent, var(--shu)); }
.h3-underhalf .review-body h3 { position: relative; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.h3-underhalf .review-body h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 4em; height: 2px; background: var(--h3-accent, var(--shu)); }
.h3-wave .review-body h3 { text-decoration: underline wavy var(--h3-accent, var(--shu)); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.h3-arrow .review-body h3::before { content: "▶ "; color: var(--h3-accent, var(--shu)); font-size: .8em; }
.h3-label .review-body h3 { display: flex; align-items: center; gap: 10px; }
.h3-label .review-body h3::before { content: "CHECK"; flex: none; background: var(--ink); color: var(--paper, #fff); font: italic 11px/1 var(--latin); padding: 5px 8px; letter-spacing: .08em; }

/* 色の上書き（設定の「見出しの色」） */
.review-body h2 { color: var(--h2-color, inherit); }
.review-body h3 { color: var(--h3-color, inherit); }
.h2-fill .review-body h2 { background-color: var(--h2-bg); padding: var(--h2-pad, 12px 18px); }
.h3-fill .review-body h3 { background-color: var(--h3-bg); padding: var(--h3-pad, 8px 14px); }

/* 文字の大きさ（設定） */
.review-body h2 { font-size: var(--h2-size, 22px); }
.review-body h3 { font-size: var(--h3-size, 18px); }