/* ===== INSOLE MAGIC LP — custom style.css ===== */
/* Tailwind(CDN) を補完するカスタムスタイル */

body { font-family: 'Noto Sans JP', sans-serif; scroll-behavior: smooth; }

/* ヒーロー背景 */
.hero-bg {
  background:
    linear-gradient(135deg, rgba(37,99,235,0.92) 0%, rgba(30,64,175,0.96) 100%),
    radial-gradient(circle at 80% 20%, rgba(245,158,11,0.25), transparent 45%);
}
.text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* ふわっと浮くアニメ */
.float-anim { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* スクロールで出現 */
.reveal { opacity:0; transform: translateY(28px); transition: .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* 大きな数字バンド */
.statnum { font-weight:900; line-height:1; letter-spacing:-.02em; }

/* ゲーム用キャンバス */
#gameCanvas {
  width: 100%;
  max-width: 600px;
  height: 300px;
  background: linear-gradient(180deg,#e0f2fe,#f0f9ff);
  border: 4px solid #bae6fd;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  touch-action: manipulation;
}

/* 健康メーター */
.meter { height: 14px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.meter > span { display:block; height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); transition:width .2s; }

/* Googleマップ */
.map-frame { border:0; width:100%; height:100%; min-height:360px; border-radius:1rem; }

/* クイズ選択肢の状態 */
.quiz-option.is-correct { border-color:#22c55e !important; background:#dcfce7 !important; }
.quiz-option.is-wrong  { border-color:#ef4444 !important; background:#fee2e2 !important; }

/* フローティングCTA */
.floating-cta {
  position:fixed; right:16px; bottom:16px; z-index:60;
  box-shadow:0 12px 28px rgba(245,158,11,.5);
  transform:translateY(150%); transition:.35s;
}
.floating-cta.show { transform:translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ===== チャットボット（インソールマスター） ===== */
.floating-cta{right:auto;left:16px;}        /* CTAを左下へ移動しチャットと干渉回避 */
.chat-launcher{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:9px;background:#2563eb;color:#fff;border:0;cursor:pointer;border-radius:999px;padding:7px 18px 7px 7px;box-shadow:0 10px 26px rgba(37,99,235,.45);transition:.2s}
.chat-launcher:hover{background:#1d4ed8;transform:translateY(-2px)}
.chat-launcher .cl-avatar{position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid #fff;background:#f59e0b}
.chat-launcher .cl-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chat-launcher .cl-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.chat-launcher .cl-label{font-weight:800;font-size:13.5px;white-space:nowrap;line-height:1.2}
.chat-panel{position:fixed;right:20px;bottom:98px;z-index:71;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.98);pointer-events:none;transition:.25s}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-header{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chat-header .c-ico{width:40px;height:40px;border-radius:50%;background:#f59e0b;display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;flex:0 0 auto;border:2px solid rgba(255,255,255,.7)}
.chat-header .c-ico img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chat-header .ttl{font-weight:800;font-size:15px;line-height:1.2}
.chat-header .sub{font-size:11px;opacity:.85}
.chat-header .c-close{margin-left:auto;background:none;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:14px;background:#f1f5f9;display:flex;flex-direction:column;gap:10px}
.chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-row.user{flex-direction:row-reverse}
.chat-av{width:30px;height:30px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;overflow:hidden}
.chat-av img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chat-bubble{max-width:80%;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.65;background:#fff;color:#1f2937;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chat-row.user .chat-bubble{background:#2563eb;color:#fff}
.chat-row.user .chat-av{background:#f59e0b}
.chat-bubble a{color:#2563eb;font-weight:700;text-decoration:underline}
.chat-row.user .chat-bubble a{color:#fff}
.chat-choices{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.chat-choice{text-align:left;background:#fff;border:1.5px solid #bfdbfe;color:#1d4ed8;font-weight:700;font-size:12.5px;padding:9px 12px;border-radius:12px;cursor:pointer;transition:.15s}
.chat-choice:hover{background:#eff6ff;border-color:#2563eb}
.chat-choice.cat{border-color:#c7d2fe;background:#eef2ff}
.chat-choice.cta{background:#f59e0b;border-color:#f59e0b;color:#fff}
.chat-choice.cta:hover{background:#d97706}
.chat-choice.back{background:#f8fafc;border-color:#e2e8f0;color:#475569}
/* 呼び込みの吹き出し（ティザー） */
.chat-teaser{position:fixed;right:20px;bottom:104px;z-index:69;max-width:230px;background:#fff;border-radius:14px;padding:12px 28px 12px 14px;box-shadow:0 14px 34px rgba(0,0,0,.22);font-size:12.5px;line-height:1.6;color:#1f2937;opacity:0;transform:translateY(10px);transition:.25s;cursor:pointer}
.chat-teaser.show{opacity:1;transform:none}
.chat-teaser::after{content:"";position:absolute;right:24px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.chat-teaser b{color:#1d4ed8}
.chat-teaser .ct-close{position:absolute;top:5px;right:7px;background:none;border:0;font-size:16px;color:#9ca3af;cursor:pointer;line-height:1;padding:2px}
@media(max-width:480px){
  .chat-panel{right:8px;left:8px;width:auto;bottom:88px;height:70vh}
  .chat-launcher{right:12px;bottom:12px;padding:6px 14px 6px 6px}
  .chat-launcher .cl-avatar{width:36px;height:36px}
  .chat-launcher .cl-label{font-size:11.5px}
  .chat-teaser{right:10px;left:10px;max-width:none;bottom:76px}
  .floating-cta{left:14px;bottom:14px;font-size:.85rem;padding:.7em 1em}
}

/* ===== アクセシビリティ & 仕上げ ===== */
.skip-link{position:absolute;left:-9999px;top:0;background:#2563eb;color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100;font-weight:800}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #f59e0b;outline-offset:2px;border-radius:6px}
/* カウントダウン */
.countdown-bar{background:linear-gradient(90deg,#1d4ed8,#2563eb);color:#fff}
.cd-num{display:inline-block;min-width:2.2em;text-align:center;background:rgba(255,255,255,.18);border-radius:8px;padding:2px 8px;font-weight:900;font-variant-numeric:tabular-nums}

/* ===== ゲーム: インソール切替スイッチ ===== */
.ins-switch{width:42px;height:24px;background:#cbd5e1;border-radius:999px;position:relative;transition:.2s;display:inline-block;flex:0 0 auto}
.ins-dot{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
#insoleToggle:checked + .ins-switch{background:#f59e0b}
#insoleToggle:checked + .ins-switch .ins-dot{left:21px}

/* ===== クイズ：インソールマスターのコメント ===== */
.qm-row{display:flex;gap:10px;align-items:flex-start;text-align:left;max-width:480px;margin:0 auto 20px}
.qm-avatar{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15);background:#f59e0b}
.qm-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:filter .2s}
.qm-avatar-sm{width:24px;height:24px;box-shadow:none;border-width:1.5px}
/* 正解／不正解でインソールマスターの表情リアクションを変える */
.qm-avatar.qm-ok{box-shadow:0 0 0 3px #fde68a,0 2px 8px rgba(0,0,0,.15)}
.qm-avatar.qm-ok::after{content:"\2713";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#22c55e;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.qm-avatar.qm-ng img{filter:grayscale(60%) brightness(.9)}
.qm-avatar.qm-ng{box-shadow:0 0 0 3px #fecaca,0 2px 8px rgba(0,0,0,.15)}
.qm-avatar.qm-ng::after{content:"!";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
/* 難易度バッジ */
.ql-badge{display:inline-block;font-size:10px;font-weight:900;padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:middle;letter-spacing:.02em}
.ql-badge.normal{background:#dbeafe;color:#1d4ed8}
.ql-badge.hard{background:#ffedd5;color:#c2410c}
.ql-badge.extreme{background:#fee2e2;color:#b91c1c}
.qm-bubble{flex:1;background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;border-top-left-radius:4px;padding:14px 16px}
.qm-bubble .qm-name{font-size:11px;font-weight:900;color:#1d4ed8;margin-bottom:4px;letter-spacing:.02em}
.qm-bubble p{margin:0}
.qm-bubble.ok{background:#f0fdf4;border-color:#bbf7d0}
.qm-bubble.ok .qm-name{color:#15803d}
.qm-bubble.ng{background:#fef2f2;border-color:#fecaca}
.qm-bubble.ng .qm-name{color:#dc2626}
.qm-bubble.gold{background:#fffbeb;border-color:#fde68a}
.qm-bubble.gray{background:#f9fafb;border-color:#e5e7eb}
.qm-mini{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:#1d4ed8;letter-spacing:.02em;margin-bottom:10px}
/* qm-row は style.css の後読みで .hidden(display:none) より詳細度が同じため勝ってしまう。
   #answerFeedback は常にIDセレクタで確実に隠す。 */
#answerFeedback.hidden{display:none}
@media(max-width:480px){.qm-avatar{width:36px;height:36px}}

/* ===== 制作協力バナー（城東ウォーリアーズ） ===== */
.jw-partner-section{background:linear-gradient(135deg,#0f2a5c 0%,#1d4ed8 60%,#1e3a8a 100%)}
.jw-partner-banner{position:relative;display:block;max-width:900px;margin:0 auto;border:2px solid rgba(245,158,11,.6);border-radius:16px;overflow:hidden;background:#0b1b3a;box-shadow:0 20px 45px rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease}
.jw-partner-banner:hover{transform:translateY(-4px);box-shadow:0 26px 55px rgba(0,0,0,.45),0 0 26px rgba(245,158,11,.25)}
.jw-partner-banner img{display:block;width:100%;height:auto}
.jw-partner-link-text{position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;padding:.6rem 1rem;border-radius:999px;background:rgba(11,27,58,.92);border:1px solid #f59e0b;color:#fff;font-size:.8rem;font-weight:800;backdrop-filter:blur(6px)}
@media(max-width:600px){.jw-partner-banner{border-radius:10px}.jw-partner-link-text{position:static;justify-content:center;border:0;border-top:1px solid #f59e0b;border-radius:0;width:100%;padding:.75rem}}