/* ===== 体験チュートリアル(ガイドツアー) ===== */
/* オーバーレイ本体は透過。暗幕(4枚のマスク)がクリックをブロックし、
   光っている“穴”(対象)だけがタップできる。ツールチップも操作可。 */
#tourOv{position:fixed;inset:0;z-index:9000;pointer-events:none}
/* 対象の周囲を覆う暗幕(上下左右)。ここへのタップは無効化される。 */
.tourMask{position:absolute;background:rgba(10,12,16,.62);pointer-events:auto;transition:all .15s ease}
/* スポットライトの枠(穴のフチ)。クリックは透過。 */
#tourSpot{position:absolute;border-radius:12px;transition:all .15s ease;pointer-events:none;outline:3px solid #e8912d;outline-offset:0;border:2px solid rgba(255,255,255,.25)}
#tourSpot.pulse{animation:tourPulse 1.4s ease-in-out infinite}
@keyframes tourPulse{0%,100%{outline-color:#e8912d}50%{outline-color:#ffd39a}}

#tourTip{position:absolute;max-width:300px;width:calc(100vw - 32px);background:#fff;color:#15181e;border-radius:14px;padding:15px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.4);pointer-events:auto;z-index:9001}
#tourTip .tt-step{font-size:11px;font-weight:800;letter-spacing:.08em;color:#cf7c1c}
#tourTip h4{margin:5px 0 6px;font-size:16px;font-weight:800;line-height:1.4}
#tourTip p{margin:0;font-size:13.5px;line-height:1.65;color:#3a414c}
#tourTip .tt-btns{display:flex;align-items:center;gap:8px;margin-top:14px}
#tourTip .tt-spacer{flex:1}
#tourTip button{font:inherit;font-weight:700;cursor:pointer;border-radius:9px;padding:9px 16px;border:1px solid transparent;font-size:14px}
#tourTip .tt-next{background:#e8912d;color:#241403}
#tourTip .tt-next:active{background:#cf7c1c}
#tourTip .tt-skip{background:transparent;color:#6b7280;border-color:transparent;padding:9px 8px;font-weight:600;font-size:13px}
#tourTip .tt-arrow{position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
#tourTip.center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:340px}
#tourTip.center .tt-btns{justify-content:center}
#tourTip.center .tt-arrow{display:none}
/* 結果表示中はツールチップを画面下に固定(結果を隠さない) */
#tourTip.pin{position:fixed;left:50%;top:auto;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:340px}
#tourTip.pin .tt-arrow{display:none}
#tourTip .tt-hint{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;color:#cf7c1c;font-weight:700}

/* 体験を再生する小ボタン(デモ中に表示) */
#tourReplay{position:fixed;right:14px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:8000;background:#181b22;color:#fff;border:1px solid #2c313b;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3)}
body.hasDemoBanner #tourReplay{bottom:calc(108px + env(safe-area-inset-bottom,0px))}

@media(prefers-color-scheme:dark){
  #tourTip{background:#1e242d;color:#e7e9ee}
  #tourTip p{color:#c2c8d2}
  #tourTip .tt-arrow{background:#1e242d}
}