/* セコサポ ドットキャラのナビ（セコきつね） */
#spg{position:fixed;left:14px;bottom:14px;z-index:9400;display:flex;align-items:flex-end;gap:8px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;font-size:14px;line-height:1.6;color:#1f2a33;pointer-events:none}
#spg *{box-sizing:border-box}
#spg > *{pointer-events:auto}
#spg.spg-hide{display:none}

/* ドット絵の本体 */
.spg-av{appearance:none;border:0;background:transparent;padding:0;margin:0;width:56px;height:56px;cursor:pointer;position:relative;flex:0 0 auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.spg-av svg{width:56px;height:56px;display:block;image-rendering:pixelated;shape-rendering:crispEdges}
.spg-av .spg-bob{animation:spg-bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
.spg-av:hover .spg-bob,.spg-av:focus-visible .spg-bob{animation:spg-hop .5s ease-out 1}
.spg-av .spg-dot{position:absolute;right:-2px;top:-2px;width:14px;height:14px;border-radius:50%;background:#e8822a;border:2px solid #fff;display:none}
#spg[data-open="0"] .spg-av .spg-dot{display:block}
#spg[data-open="0"] .spg-av .spg-dot.spg-dot-off{display:none}
.spg-av:focus-visible{outline:3px solid #f2c230;outline-offset:2px;border-radius:8px}
@keyframes spg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes spg-hop{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-9px) scaleY(1.06)}60%{transform:translateY(0) scaleY(.94)}100%{transform:translateY(0) scaleY(1)}}

/* 吹き出し */
.spg-bub{position:relative;background:#fff;color:#1f2a33;border-radius:14px;padding:12px 14px 10px;max-width:min(330px,calc(100vw - 96px));box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);transform-origin:0% 100%;animation:spg-in .22s ease-out}
.spg-bub::after{content:"";position:absolute;left:-7px;bottom:18px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px;box-shadow:-2px 2px 2px rgba(0,0,0,.06)}
#spg[data-open="0"] .spg-bub{display:none}
@keyframes spg-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.spg-name{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:#e8822a;border-radius:999px;padding:1px 9px;margin-bottom:6px;letter-spacing:.02em}
.spg-step{display:inline-block;font-size:11px;color:#8a6a4a;margin-left:6px}
.spg-txt{font-size:14px;margin:0 0 8px;word-break:break-word}
.spg-txt b{color:#b5561a}
.spg-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.spg-btns:empty{display:none}
.spg-btn{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;line-height:1.2;background:#e8822a;color:#fff;box-shadow:0 2px 0 #b5561a;transition:transform .08s,box-shadow .08s;text-decoration:none;display:inline-block}
.spg-btn:active{transform:translateY(2px);box-shadow:0 0 0 #b5561a}
.spg-btn.spg-sub{background:#eef2f5;color:#1f2a33;box-shadow:0 2px 0 #cdd5dc}
.spg-btn:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
.spg-foot{display:flex;gap:12px;font-size:11px;color:#6b7680;border-top:1px dashed #e3e8ec;padding-top:6px;margin-top:2px}
.spg-foot button{appearance:none;border:0;background:transparent;padding:0;color:#6b7680;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.spg-foot button:hover{color:#1f2a33}
.spg-x{position:absolute;right:6px;top:6px;width:26px;height:26px;border:0;border-radius:50%;background:#f1f4f6;color:#5a6670;font-size:16px;line-height:26px;text-align:center;cursor:pointer;padding:0}
.spg-x:hover{background:#e3e8ec;color:#1f2a33}

/* 「次はここ」の目印 */
.spg-flash{outline:3px solid #f2c230 !important;outline-offset:4px;border-radius:8px;animation:spg-flash 1.6s ease-out 1}
@keyframes spg-flash{0%{box-shadow:0 0 0 0 rgba(242,194,48,.75)}100%{box-shadow:0 0 0 22px rgba(242,194,48,0)}}

/* 印刷時は出さない */
@media print{#spg{display:none !important}}

/* スマホ */
@media (max-width:640px){
	#spg{left:10px;bottom:10px;gap:6px}
	.spg-av,.spg-av svg{width:48px;height:48px}
	.spg-bub{padding:10px 12px 8px;font-size:13px;max-width:calc(100vw - 80px)}
	.spg-txt{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
	.spg-av .spg-bob,.spg-av:hover .spg-bob{animation:none}
	.spg-bub{animation:none}
}