.hsi{--navy:#14213d;--ink:#1a2432;--mute:#4f5f73;--line:#d6dfea;--ok:#0a8a55;--okd:#06683f;--pt:#d98a00;--ptd:#a96400;--ng:#d0372a;--ngd:#a2261c;--blue:#1f5fa8;font-size:15px;line-height:1.75;color:var(--ink)}
.hsi *{box-sizing:border-box}
.hsi p{margin:0;padding:0}
section.hsi{margin:40px 0 24px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(20,33,61,.10)}
section.hsi[data-st]{padding:0 22px 22px}
.hsi__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 -22px 16px;padding:12px 22px;background:linear-gradient(135deg,#14213d,#1f3a68);color:#fff}
.hsi__tag{font-size:12.5px;font-weight:900;letter-spacing:.08em;background:#ffb703;color:#14213d;border-radius:999px;padding:3px 12px}
.hsi__flow{display:flex;gap:0;font-size:12.5px;font-weight:800}
.hsi__flow i{font-style:normal;padding:3px 14px 3px 18px;background:rgba(255,255,255,.14);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%);margin-left:-4px;color:#dbe6f5}
.hsi__flow i:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:12px;margin-left:0}
.hsi__flow i.on{background:#ffb703;color:#14213d}
.hsi__q{font-size:19px;font-weight:900;color:var(--navy);line-height:1.5;margin-bottom:6px !important}
.hsi__q strong{color:var(--ok);background:linear-gradient(transparent 62%,#c9f2de 62%)}
.hsi__lead{font-size:14px;color:#3b4a5c;line-height:1.75;margin-bottom:8px !important}
.hsi__why{font-size:13px;color:#4f5f73;background:#f3f7fb;border-left:4px solid #1f5fa8;border-radius:6px;padding:6px 10px;margin:0 0 4px !important}
.hsi__qline{font-size:13.5px;color:var(--mute);margin-bottom:10px !important}
.hsi__qline b{color:var(--blue)}
.hsi__vs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 10px}
.hsi__v{appearance:none;border:0;cursor:pointer;font-family:inherit;color:#fff;border-radius:14px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 18px rgba(20,33,61,.14);transition:transform .12s,box-shadow .12s,filter .12s}
.hsi__v:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hsi__v:active,.hsi__v.is-on{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18),0 4px 10px rgba(20,33,61,.14)}
.hsi__v b{font-size:16px;font-weight:900;letter-spacing:.02em}
.hsi__v small{font-size:12px;opacity:.92;line-height:1.4}
.hsi__v--solved{background:linear-gradient(160deg,#16a96b,var(--okd))}
.hsi__v--partly{background:linear-gradient(160deg,#f0a21a,var(--ptd))}
.hsi__v--no{background:linear-gradient(160deg,#e3503f,var(--ngd))}
.hsi__vi{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);position:relative;margin-bottom:2px}
.hsi__vi::after{content:"";position:absolute;inset:0;margin:auto}
.hsi__v--solved .hsi__vi::after{width:12px;height:7px;border:3px solid #fff;border-top:0;border-right:0;transform:translateY(-2px) rotate(-45deg)}
.hsi__v--partly .hsi__vi::after{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:13px solid #fff;transform:translateY(-1px)}
.hsi__v--no .hsi__vi::after{width:14px;height:3px;background:#fff;box-shadow:none;transform:rotate(45deg)}
.hsi__v--no .hsi__vi::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:3px;background:#fff;transform:rotate(-45deg)}
.hsi__note{font-size:12.5px;color:var(--mute)}
.hsi__thanks{font-size:16px;font-weight:800;color:var(--navy);margin:18px 0 10px !important;line-height:1.6}
.hsi__opt{font-size:12.5px;color:var(--mute);font-weight:600;margin-left:4px}
.hsi__badge{display:inline-block;color:#fff;font-size:12px;font-weight:900;border-radius:999px;padding:2px 10px;margin-right:8px;vertical-align:2px}
.hsi__badge--solved{background:var(--ok)}.hsi__badge--partly{background:var(--pt)}.hsi__badge--no{background:var(--ng)}
.hsi__lab{display:block;font-size:13.5px;font-weight:800;color:#2b3a4c;margin:12px 0 6px !important}
.hsi__cats{display:flex;flex-wrap:wrap;gap:7px}
.hsi__cat{appearance:none;border:1.5px solid #c9d5e3;background:#f6f9fc;color:#2b3a4c;border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.hsi__cat:hover{border-color:var(--blue)}
.hsi__cat.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.hsi__cat.is-on::before{content:"✓ "}
.hsi__in{width:100%;border:1.5px solid #c9d5e3;border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.7;background:#fbfdff;font-family:inherit;color:var(--ink);resize:vertical}
.hsi__in:focus{outline:2px solid rgba(31,95,168,.3);border-color:var(--blue)}
.hsi__acts{display:flex;gap:10px;align-items:center;margin-top:14px}
.hsi__send{appearance:none;border:0;background:var(--navy);color:#fff;border-radius:999px;padding:11px 30px;font-size:15px;font-weight:900;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(20,33,61,.3)}
.hsi__send:disabled{opacity:.6}
.hsi__skip{appearance:none;border:0;background:none;color:var(--mute);font-size:13.5px;cursor:pointer;text-decoration:underline;font-family:inherit}
.hsi__done{font-size:15.5px;font-weight:800;color:var(--okd);margin:18px 0 4px !important}
.hsi__next{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;background:#fff7ec;border:1px solid #f2d6ad;border-radius:12px;font-size:13.5px;color:#6b4a14}
.hsi__btn{display:inline-block;background:var(--blue);color:#fff !important;text-decoration:none !important;font-weight:900;border-radius:999px;padding:7px 16px;font-size:13.5px}
.hsi__search{display:flex;gap:6px;margin:0;flex:1;min-width:200px}
.hsi__search input{flex:1;min-width:0;border:1.5px solid #e2c697;border-radius:999px;padding:6px 12px;font-size:14px}
.hsi__search button{border:0;background:#6b4a14;color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;cursor:pointer}

/* 途中の小窓 */
.hsi--peek{position:fixed;right:18px;bottom:20px;z-index:2147483000;width:380px;max-width:calc(100vw - 24px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:16px;padding:14px 16px 14px;box-shadow:0 18px 40px rgba(20,33,61,.28);transform:translateY(24px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.hsi--peek.is-in{transform:none;opacity:1}
.hsi--peek .hsi__q{font-size:15.5px;padding-right:26px}
.hsi--peek .hsi__lead{font-size:14px;color:#3b4a5c;line-height:1.75;margin-bottom:8px !important}
.hsi__why{font-size:13px;color:#4f5f73;background:#f3f7fb;border-left:4px solid #1f5fa8;border-radius:6px;padding:6px 10px;margin:0 0 4px !important}
.hsi__qline{font-size:12.5px;margin-bottom:4px !important}
.hsi--peek .hsi__vs{gap:7px;margin:8px 0 2px}
.hsi--peek .hsi__v{padding:9px 4px 8px;border-radius:12px}
.hsi--peek .hsi__v b{font-size:13.5px}
.hsi--peek .hsi__vi{width:24px;height:24px}
.hsi--peek .hsi__thanks{font-size:14.5px;margin:4px 0 6px !important;padding-right:24px}
.hsi--peek .hsi__cat{padding:4px 11px;font-size:12.5px}
.hsi--peek .hsi__in{font-size:14px;padding:8px 10px}
.hsi--peek .hsi__done{margin:4px 0 0 !important;padding-right:24px}
.hsi__x{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;border-radius:50%;background:#eef2f7;color:#3b4a5c;font-size:18px;line-height:1;cursor:pointer}

@media(max-width:700px){
	section.hsi[data-st]{padding:0 14px 16px}
	.hsi__head{margin:0 -14px 12px;padding:10px 14px}
	.hsi__flow{font-size:11px}
	.hsi__flow i{padding:2px 10px 2px 13px}
	.hsi__q{font-size:17px}
	.hsi__vs{gap:7px}
	.hsi__v{padding:11px 4px 10px}
	.hsi__v b{font-size:13px;letter-spacing:-.02em;white-space:nowrap}
	.hsi__v small{display:none}
	.hsi--peek{left:12px;right:12px;bottom:12px;width:auto}
}

/* 旧アンケートの保険 */
.hfb,.hfb-peek{display:none !important}
