/* =========================================================
   tickets.css  ?  チケット（外部サイト決済版）ページ専用
   ========================================================= */

/* フォールバック変数（base/animals 未読でも最低限保つ） */
:root{
  --page-max: 1100px;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(2,33,73,.08);
  --c-bg: #f5f9ff;
  --c-surface: #ffffff;
  --c-fg: #0f172a;
  --c-muted: #475569;
  --c-border: #e2e8f0;
  --c-primary: #0b63c5;
  --c-primary-dk: #0a55aa;
  --blue-accent: #98c7ff;
}

/* ページ幅（保険） */
#main.tickets > .page{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 16px;
}

/* --- 料金グリッド --- */
.price-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(2,1fr);
}
@media (min-width:900px){
  .price-grid{ grid-template-columns: repeat(3,1fr); }
}
.price-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.price-card h3{
  margin:0; font-size:1.1rem; line-height:1.3;
}
.price{
  font-size:1.6rem; font-weight:800; letter-spacing:.02em;
}
.price small{ font-weight:600; color:var(--c-muted); font-size:.9rem; margin-left:.2em }
.note{ color:var(--c-muted); font-size:.92rem }

/* --- 料金プラン切替（通常 / 割引） --- */
.plan-switch{
  display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 12px;
}
.plan-switch label{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--c-border); border-radius:999px;
  background:#fff; cursor:pointer; user-select:none;
}
.plan-switch input{ accent-color:var(--c-primary); }

/* --- CTA（外部サイト遷移） --- */
.cta-box{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px;
}
.cta-box .cta-lead{ margin:0 0 10px; color:var(--c-fg) }
.external-note{ color:var(--c-muted); font-size:.92rem; margin-top:8px }

/* ボタン（このページ内で完結させるためスコープを付ける） */
.tickets .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px;
  border-radius:999px; border:1px solid var(--c-primary);
  background:var(--c-primary); color:#fff; font-weight:700;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration:none;
}
.tickets .btn-primary:hover,
.tickets .btn-primary:focus-visible{
  background:#fff; color:var(--c-primary); border-color:var(--c-primary);
  outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}
.tickets .btn-primary:active{ transform: translateY(1px); }

/* --- 購入フロー（ステップ） --- */
.steps{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width:800px){ .steps{ grid-template-columns: repeat(3,1fr) } }
.step{
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  box-shadow:var(--shadow); padding:14px 16px;
}
.step h3{ margin:0 0 6px; font-size:1.05rem }
.step .num{
  display:inline-grid; place-items:center;
  width:26px; height:26px; margin-right:8px;
  border-radius:999px; background:var(--c-primary); color:#fff; font-weight:700;
}

/* FAQ */
.faq details{
  background:#fff; border:1px solid var(--c-border); border-radius:12px;
  padding:12px 14px; box-shadow:var(--shadow); margin:10px 0;
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ margin:.6rem 0 0; color:var(--c-fg) }

/* チェックリスト */
.ul-check{
  list-style: none; padding:0; margin:0;
}
.ul-check li{ padding-left:1.2em; position:relative; margin:.35rem 0; color:var(--c-fg) }
.ul-check li::before{
  content:"☆"; position:absolute; left:0; top:.1em; font-size:.95em; color:var(--c-primary);
}

/* クリック時に注意文を一瞬ハイライト（デモ遷移停止の視覚フィードバック） */
.external-note.note-pulse{
  animation: notePulse .9s ease;
}
@keyframes notePulse{
  0%   { background:#fff7cc; box-shadow:0 0 0 2px rgba(255,199,0,.2) inset; }
  100% { background:transparent; box-shadow:none; }
}