/* 製造業派遣LP / 工場求人ミツカルクン - 本番用スタイル */

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --white: #ffffff;
  --muted: #6b6b68;
  --line: #e5e5e0;
  --accent: #d94a6a;
  --accent-dark: #b03953;
  --accent-soft: #fde8ee;
  --yellow: #ffe14d;
  --line-green: #06c755;
  --dark: #1a0d1f;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-num: "Archivo Black", "Zen Kaku Gothic New", sans-serif;

  --container: 420px;
  --pad: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.lp-wrap {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--white);
  padding-bottom: 80px; /* sticky bar 分 */
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.05);
}

/* ===== タイポ ===== */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 900; letter-spacing: -0.01em; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
p { margin: 0; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 13px; line-height: 1.6; }
.text-xs { font-size: 11px; line-height: 1.5; }
.mark-yellow { background: var(--yellow); padding: 0 6px; }
.mark-under { border-bottom: 3px solid var(--accent); padding-bottom: 2px; }

/* ===== セクション共通 ===== */
section {
  padding: 56px var(--pad);
  position: relative;
  border-top: 1px solid var(--line);
}
section.s-dark { background: var(--dark); color: #fff; border-top-color: #2a1a30; }
section.s-soft { background: var(--paper); }
section.s-yellow { background: #fff8e1; }
section.s-blue { background: #e8f5ff; }

.sec-head {
  margin-bottom: 28px;
  text-align: center;
  position: relative;
}
.sec-num {
  display: inline-block;
  font-family: var(--font-num); font-size: 11px;
  color: var(--accent); letter-spacing: 0.2em;
  background: #fff;
  border: 1.5px solid var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 800;
}
.sec-title {
  font-size: 24px; font-weight: 900; line-height: 1.35;
  letter-spacing: -0.02em;
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sec-title::before,
.sec-title::after {
  content: "";
  flex: 0 0 18px;
  height: 2px;
  background: var(--ink);
}
.sec-title .hl {
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 3px;
}
.sec-sub {
  margin: 10px auto 0;
  color: var(--muted); font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
}
/* 操作を促すサブ（悩みチェック誘導など） */
.sec-sub.sub-action {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  max-width: none;
}
.sec-sub.sub-action .hl {
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 3px;
}
.sec-sub.sub-action .arr {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
  font-weight: 900;
  animation: arr-nudge 1.4s ease-in-out infinite;
}
@keyframes arr-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-sub.sub-action .arr { animation: none; }
}
section.s-dark .sec-num {
  background: transparent; color: var(--yellow);
  border-color: var(--yellow);
}
section.s-dark .sec-title::before,
section.s-dark .sec-title::after {
  background: #fff;
}

/* ===== アクションバッジ（コンプ対象セクションに配置） ===== */
.action-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent);
  color: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 999px;
  padding: 5px 11px 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-5deg);
  z-index: 5;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.action-badge b {
  font-family: var(--font-num);
  font-size: 14px;
  color: var(--yellow);
}
/* 達成時: 黒バッジ + 黄色チェック */
.action-badge.done {
  background: var(--ink);
  color: var(--yellow);
  animation: action-done 0.55s cubic-bezier(.2,1.7,.3,1);
}
.action-badge.done::before {
  content: "✓";
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  margin-right: 2px;
}
.action-badge.done b { color: var(--yellow); }
@keyframes action-done {
  0%   { transform: rotate(-5deg) scale(1); }
  40%  { transform: rotate(6deg) scale(1.25); }
  100% { transform: rotate(-5deg) scale(1); }
}
section.s-dark .action-badge { border-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .action-badge.done { animation: none; }
}

/* ===== セクション見出し直下の画像スロット（差し替え用） =====
   差し替え方:
     .sec-image の中身を <img src="..."> に置換、または
     .sec-image[data-sec-img="service"] { background-image: url(...) } で一括設定
================================================= */
.sec-image {
  margin: 20px auto 0;
  aspect-ratio: 16 / 9;
  max-width: 340px;
  background: var(--accent-soft);
  border: 1.8px dashed var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.sec-image::before {
  content: "◆ IMAGE ◆";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  z-index: 1;
}
.sec-image .pose {
  font-family: "Courier New", monospace;
  font-size: 10px;
  margin-top: 6px;
  color: var(--accent-dark);
  display: block;
  font-weight: 700;
}
.sec-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
section.s-dark .sec-image {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.85);
}
section.s-dark .sec-image::before {
  background: var(--yellow); color: var(--ink);
}
section.s-dark .sec-image .pose { color: rgba(255,255,255,0.7); }

/* ===== ボタン ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 20px; border-radius: 12px;
  font-weight: 800; font-size: 15px;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.1s ease;
}
.btn:active { transform: scale(0.98); }
.btn-line {
  background: var(--line-green); color: #fff; box-shadow: 0 4px 0 #04993f;
  /* .btn の gap:8px が「LINE」と本文の間に入って
     「LINE で無料相談」のように不自然な空きになるため詰める */
  gap: 0;
}
.btn-line::before {
  content: "LINE";
  font-weight: 900;
  letter-spacing: 0.05em;
  /* letter-spacing の分だけ末尾に余白が出るので、その分だけ戻す */
  margin-right: -0.05em;
  padding-right: 3px;
}
.btn-line.no-prefix::before { content: none; }
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900;
  letter-spacing: 0.03em;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
}
.btn-ghost:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 #c9ad1a; }

/* ガチャ専用 高級感ボタン */
#gachaBtn {
  display: flex;
  max-width: 260px;
  margin: 18px auto 8px;
  padding: 16px 28px;
  background: linear-gradient(135deg, #fff176 0%, #ffd600 30%, #ffa000 65%, #ff6f00 100%);
  background-size: 220% 220%;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow:
    0 6px 0 var(--ink),
    0 0 20px rgba(255,215,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.12em;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: gacha-btn-shine 3s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
#gachaBtn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.8) 50%,
    transparent 65%,
    transparent 100%);
  animation: gacha-btn-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
#gachaBtn > * { position: relative; z-index: 2; }
#gachaBtn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 var(--ink),
    0 0 10px rgba(255,215,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation-play-state: paused;
}
#gachaBtn:disabled {
  opacity: 0.5;
  animation: none;
  cursor: not-allowed;
}
@keyframes gacha-btn-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes gacha-btn-sweep {
  0%, 55%  { left: -120%; }
  100%     { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
  #gachaBtn { animation: none; }
  #gachaBtn::before { animation: none; }
}
.btn-sm { padding: 10px 14px; font-size: 13px; border-radius: 10px; }

/* ===== ナビゲーター配置箇所の共通スタイル ===== */
/* 後から本物のイラストに差し替える。現在はダッシュ枠プレースホルダ */
.nav-slot {
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  border-radius: 12px;
  color: var(--accent-dark);
  font-size: 11px;
  line-height: 1.5;
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
}
.nav-slot::before {
  content: "◆ NAVIGATOR ◆";
  position: absolute; top: -9px; left: 10px;
  background: var(--accent); color: #fff;
  font-size: 9px; padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.1em;
}
.nav-slot .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 10px;
  margin-top: 4px;
  color: var(--accent-dark);
}
.nav-slot.s-hero { aspect-ratio: 3/4; max-width: 260px; margin: 0 auto; }
.nav-slot.s-portrait { aspect-ratio: 3/4; max-width: 200px; }
.nav-slot.s-square { aspect-ratio: 1; }
.nav-slot.s-round { border-radius: 50%; aspect-ratio: 1; }

/* 吹き出し（ナビゲーターのセリフ） */
.say {
  display: flex; gap: 10px; align-items: flex-start; margin: 20px 0;
}
/* display:flex が hidden 属性に勝ってしまうので明示的に打ち消す */
.say[hidden] { display: none !important; }
.say .nav-slot {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; aspect-ratio: 1;
  font-size: 8px; padding: 4px;
}
.say .nav-slot::before { font-size: 7px; top: -7px; padding: 1px 4px; }
.say .bubble {
  flex: 1;
  background: #fff; border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.6;
  color: var(--ink) !important;
  position: relative;
  box-shadow: 3px 3px 0 var(--ink);
  transform-origin: left center;
  opacity: 0;
  transform: translateX(-40px) scale(0.9);
}
.say .nav-slot {
  opacity: 0;
  transform: translateY(6px) scale(0.9);
}

/* 画面に入ってきた時にシュッとカットイン */
.say.in-view .nav-slot {
  animation: nav-in 0.4s cubic-bezier(.2,1.1,.3,1) 0s both,
             nav-sway 4.2s ease-in-out 0.6s infinite;
}
.say.in-view .bubble {
  animation: bubble-slide-in 0.5s cubic-bezier(.25,1.3,.4,1) 0.15s both,
             bubble-float 4.2s ease-in-out 0.7s infinite;
}

@keyframes bubble-slide-in {
  0%   { opacity: 0; transform: translateX(-40px) scale(0.9); }
  60%  { opacity: 1; transform: translateX(6px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes nav-in {
  0%   { opacity: 0; transform: translateY(6px) scale(0.88); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bubble-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-0.5deg); }
}
@keyframes nav-sway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .say .bubble, .say .nav-slot { opacity: 1; transform: none; }
  .say.in-view .bubble, .say.in-view .nav-slot { animation: none; }
}
section.s-dark .say .bubble { color: var(--ink) !important; }
.fv-bubble {
  text-align: left;
  line-height: 1.6;
  font-size: 13px;
}
.say .bubble::before {
  content: ""; position: absolute; left: -7px; top: 18px;
  width: 10px; height: 10px; background: #fff;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}

/* ===== FV ===== */
.fv {
  padding: 32px var(--pad) 48px;
  text-align: center;
  /* FVセクション全体を画像の暖色背景に合わせる → 画像と一体化 */
  background: linear-gradient(180deg, #fff5e2 0%, #fff8ea 45%, #fffaf0 100%);
}
.fv .eyebrow { display: block; }
.fv .nav-slot.s-hero { margin-top: 18px; }

.fv-hook { margin-top: 22px; }
.fv-q {
  font-size: 20px; font-weight: 700; color: var(--muted);
  line-height: 1.5; letter-spacing: 0.02em;
}

/* ===== FV 登場シーケンス =====
   ① eyebrow(0.1s) ② 問いかけ・ふわっと(0.3s) ③ 見出し・勢いよく(0.95s)
   ④ マーカー描画(1.4s/1.95s) ⑤ ミサキ・ぶわっと(2.35s / 最後)
   各delayは下の mark-anim と .fv-hero-img img の指定と揃えている */
.fv .eyebrow {
  animation: fv-fade-up 0.55s ease-out 0.1s both;
  will-change: transform, opacity;
}
.fv-hook {
  animation: fv-fade-up 0.7s cubic-bezier(.16,.84,.28,1) 0.3s both;
  will-change: transform, opacity;
}
@keyframes fv-fade-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 見出しは1行ずつ順番に。行が出るのと同時に下のマーカーが引かれる */
.fv-line {
  display: block;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
}
.fv-line-1 { animation: fv-headline-in 0.5s cubic-bezier(.2,.9,.2,1) 0.95s both; }
.fv-line-2 { animation: fv-headline-in 0.5s cubic-bezier(.2,.9,.2,1) 1.55s both; }
@keyframes fv-headline-in {
  0%   { opacity: 0; transform: translateY(22px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(0) scale(1.03); }
  82%  { transform: translateY(0) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fv-headline {
  font-size: 26px; line-height: 1.4; margin-top: 10px;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}
.fv-headline .mark-yellow { padding: 0 4px; display: inline-block; }

/* ===== マーカーが引かれる → 文字がピコンと弾む =====
   以前は background-size を伸ばしていたが、これは毎フレーム再描画が必要で
   カクつく原因になる。黄色の帯を疑似要素に分離し、transform: scaleX で
   伸ばすことで合成だけで済ませる */
.fv-headline .mark-anim {
  background: none;
  display: inline-block;
  position: relative;
  transform-origin: center;
  isolation: isolate;
}
.fv-headline .mark-anim::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 60%; bottom: 0;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  will-change: transform;
}
/* 行の出現と同時にマーカーを引き始め、引き終わりでピコンと弾む
   （delay は .fv-line-1 / .fv-line-2 と同値にしてある） */
.fv-headline .mark-anim-1::before {
  animation: markerDraw 0.5s cubic-bezier(0.55, 0.1, 0.3, 1) 0.95s forwards;
}
.fv-headline .mark-anim-2::before {
  animation: markerDraw 0.5s cubic-bezier(0.55, 0.1, 0.3, 1) 1.55s forwards;
}
.fv-headline .mark-anim-1 {
  animation: textPop 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 1.45s;
}
.fv-headline .mark-anim-2 {
  animation: textPop 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 2.05s;
}
@keyframes markerDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes textPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18) rotate(-2deg); }
  75%  { transform: scale(0.96) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.fv-free {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 20px auto 0; max-width: 360px;
  position: relative;
}
.fv-free::before {
  content: "ぜんぶ";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--ink); color: var(--yellow);
  font-size: 10px; font-weight: 900;
  padding: 3px 10px; border-radius: 3px;
  letter-spacing: 0.15em;
  /* タイル側も演出中に z-index:2 を持つ。同じ値だと後から来るタイルが
     上に乗って「ぜんぶ」が隠れるので、バッジは必ず上に置く */
  z-index: 6;
}
.fv-free li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 2px solid var(--ink); border-radius: 10px;
  padding: 10px 3px 8px; font-size: 15px; font-weight: 900;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* ラベルは全て2〜3文字。狭い端末でも枠から出さない */
  min-width: 0;
  overflow-wrap: anywhere;
  box-shadow: 2px 2px 0 var(--ink);
  position: relative;
}
/* 4項目のアイコン（インラインSVG・画像リクエストなし） */
.free-ico {
  width: 27px; height: 27px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
}
/* 発火前は隠しておく（JSが .will-pop を付ける） */
.fv-free.will-pop li,
.fv-free.will-pop::before { opacity: 0; }
.fv-free.will-pop li::before,
.fv-free.will-pop li::after { opacity: 0; }

/* 色と光は「タイル本体」ではなく専用レイヤーが担当する。
   box-shadow のぼかし半径や background を毎フレーム動かすと再描画が走ってカクつくため、
   見た目は固定したまま opacity だけを動かす（合成のみで完結する）。
   z-index:-1 は「タイルの背景より上・文字より下」に入るので、文字は隠れない。 */
.fv-free li::before,
.fv-free li::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
/* ::before ＝ 黄色い塗り（ちかっと光る瞬間だけ） */
.fv-free li::before { background: var(--yellow); }
/* ::after ＝ 枠の外へ広がる後光。ぼかしは固定値 */
.fv-free li::after { box-shadow: 0 0 16px 5px rgba(255,213,60,0.9); }
/* 演出中だけ合成レイヤーへ昇格させる（常時付けるとメモリを食うので付けっぱなしにしない） */
.fv-free.throw-in li,
.fv-free.pop-in li { will-change: transform; }
/* 拡大時に隣へ被せる。キーフレーム内で z-index を動かすと重なり順の再計算が入るため静的に持つ */
.fv-free.throw-in li,
.fv-free.pop-in li { z-index: 2; }

/* ===== ミサキの手から投げられて所定の位置に収まる =====
   --throw-x / --throw-y は「タイル中心から手のひらまでの距離」。
   JSが再生直前に実測して各タイルへ入れる */
.fv-free.throw-in li {
  animation: free-throw 0.62s cubic-bezier(.18,.72,.24,1) both;
}
.fv-free.throw-in li::before { animation: free-wash 0.62s ease-out both; }
.fv-free.throw-in li::after {
  animation:
    free-flash 0.62s ease-out both,
    free-breathe 3.6s ease-in-out infinite;
}
.fv-free.throw-in li:nth-child(1),
.fv-free.throw-in li:nth-child(1)::before { animation-delay: 0s;    }
.fv-free.throw-in li:nth-child(2),
.fv-free.throw-in li:nth-child(2)::before { animation-delay: 0.09s; }
.fv-free.throw-in li:nth-child(3),
.fv-free.throw-in li:nth-child(3)::before { animation-delay: 0.18s; }
.fv-free.throw-in li:nth-child(4),
.fv-free.throw-in li:nth-child(4)::before { animation-delay: 0.27s; }
/* 後光レイヤーは「点滅→常時ほんのり」の2本立て。2本目は点滅が終わってから始める */
.fv-free.throw-in li:nth-child(1)::after { animation-delay: 0s,    0.62s; }
.fv-free.throw-in li:nth-child(2)::after { animation-delay: 0.09s, 0.71s; }
.fv-free.throw-in li:nth-child(3)::after { animation-delay: 0.18s, 0.80s; }
.fv-free.throw-in li:nth-child(4)::after { animation-delay: 0.27s, 0.89s; }
/* 「ぜんぶ」バッジは4枚が着地してから */
.fv-free.throw-in::before {
  animation: free-badge-pop 0.4s cubic-bezier(.2,1.7,.35,1) 0.82s both;
}
@keyframes free-throw {
  /* 手のひらの中で小さく丸まっている */
  0% {
    opacity: 0;
    transform: translate(var(--throw-x, 0), var(--throw-y, 0)) scale(0.18) rotate(-32deg);
  }
  12% { opacity: 1; }
  /* 放物線に見せるため、中間で少し高めを通す */
  55% {
    opacity: 1;
    transform:
      translate(calc(var(--throw-x, 0px) * 0.42), calc(var(--throw-y, 0px) * 0.42 - 14px))
      scale(0.72) rotate(-12deg);
  }
  /* 着地。勢い余って一瞬だけ大きくなる */
  80% {
    opacity: 1;
    transform: translate(0, 0) scale(1.07) rotate(2deg);
  }
  92% {
    opacity: 1;
    transform: translate(0, 0) scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}
/* 初回に画面へ入ったとき、左から順にポンポンポンッと弾ませる（1回だけ）。
   弾け終わったら free-breathe に引き継ぎ、背後からほんのり発光し続ける */
.fv-free.pop-in li {
  animation: free-pop 0.5s cubic-bezier(.2,1.7,.35,1) both;
}
.fv-free.pop-in li::before { animation: free-wash 0.5s ease-out both; }
.fv-free.pop-in li::after {
  animation:
    free-flash 0.5s ease-out both,
    free-breathe 3.6s ease-in-out infinite;
}
.fv-free.pop-in li:nth-child(1),
.fv-free.pop-in li:nth-child(1)::before { animation-delay: 0s;    }
.fv-free.pop-in li:nth-child(2),
.fv-free.pop-in li:nth-child(2)::before { animation-delay: 0.09s; }
.fv-free.pop-in li:nth-child(3),
.fv-free.pop-in li:nth-child(3)::before { animation-delay: 0.18s; }
.fv-free.pop-in li:nth-child(4),
.fv-free.pop-in li:nth-child(4)::before { animation-delay: 0.27s; }
.fv-free.pop-in li:nth-child(1)::after { animation-delay: 0s,    0.5s;  }
.fv-free.pop-in li:nth-child(2)::after { animation-delay: 0.09s, 0.59s; }
.fv-free.pop-in li:nth-child(3)::after { animation-delay: 0.18s, 0.68s; }
.fv-free.pop-in li:nth-child(4)::after { animation-delay: 0.27s, 0.77s; }
/* 黄色い塗りは飛んでいる間だけ乗せて、着地したら白へ戻す */
@keyframes free-wash {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
/* ちかっと光る（不透明度だけ） */
@keyframes free-flash {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  100% { opacity: 0.38; }
}
/* 後光：着地後もゆっくり明滅させる（同じく不透明度だけ） */
@keyframes free-breathe {
  0%, 100% { opacity: 0.38; }
  50%      { opacity: 0.66; }
}
/* 弾む動きだけを担当。色と光は ::before 側 */
@keyframes free-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
  45% { opacity: 1; }
  55% {
    opacity: 1;
    /* 隣のタイルとぶつからない上限（枠79px・隙間6pxから逆算） */
    transform: translateY(0) scale(1.09);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 「ぜんぶ」バッジはタイルが出そろってから */
.fv-free.pop-in::before {
  animation: free-badge-pop 0.4s cubic-bezier(.2,1.7,.35,1) 0.36s both;
}
@keyframes free-badge-pop {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1.12); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fv-free.pop-in li,
  .fv-free.pop-in::before,
  .fv-free.throw-in li,
  .fv-free.throw-in::before { animation: none; opacity: 1; transform: none; }
  /* 黄色い塗りは消し、後光は静止した状態で残す */
  .fv-free.pop-in li::before,
  .fv-free.throw-in li::before { animation: none; opacity: 0; }
  .fv-free.pop-in li::after,
  .fv-free.throw-in li::after { animation: none; opacity: 0.42; }
}
.free-tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 10px;
  background: var(--accent); color: #fff;
  padding: 3px 8px; border-radius: 20px;
  letter-spacing: 0.08em; font-weight: 800;
  border: 1.2px solid var(--ink);
  transform: rotate(-5deg);
}

.fv .btn { margin: 6px auto 0; width: 100%; max-width: 340px; }
.fv-micro {
  margin: 18px auto 0; font-size: 12px; color: var(--muted);
  font-weight: 700; letter-spacing: 0.05em;
  text-align: center;
}
.fv-micro .micro-hi {
  color: var(--accent); font-size: 15px; font-weight: 900;
  font-family: var(--font-num); padding: 0 2px;
  background: linear-gradient(transparent 55%, var(--yellow) 55%);
}

.fv-cta-pulse {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fv-cta-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.55) 50%,
    transparent 60%,
    transparent 100%);
  background-size: 250% 100%;
  background-position: -100% 0;
  animation: cta-shine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.fv-cta-pulse > * { position: relative; z-index: 2; }
@keyframes cta-shine {
  0%   { background-position: -100% 0; }
  60%  { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}
.fv-cta-pulse:active::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fv-cta-pulse::after { animation: none; }
}
.fv .trust { margin-top: 14px; font-size: 11px; color: var(--muted); display: flex; gap: 12px; justify-content: center; }

/* ===== 悩み共感（ネガティブパート / スタンプ式チェック） ===== */
.worry-list { display: flex; flex-direction: column; gap: 8px; }
.worry-item {
  padding: 14px 16px;
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  display: flex; gap: 12px; align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, transform 0.1s ease,
              box-shadow 0.28s ease;
}
.worry-item:hover { background: #f6f4ef; }
.worry-item:active { transform: scale(0.985); }

.worry-item .cb-input {
  position: absolute;
  opacity: 0; width: 0; height: 0;
  pointer-events: none;
}
.worry-item .cb {
  width: 22px; height: 22px;
  border: 2px solid var(--ink); border-radius: 5px;
  flex-shrink: 0; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.worry-item .cb::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  opacity: 0;
}
.worry-item .worry-text { flex: 1; line-height: 1.5; }

/* Checked: 黒スタンプのように「押し込まれる」 */
.worry-item:has(.cb-input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: worry-stamp 0.42s cubic-bezier(.2,1.55,.3,1);
}
.worry-item:has(.cb-input:checked) .worry-text {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.worry-item:has(.cb-input:checked) .cb {
  background: var(--yellow);
  border-color: var(--yellow);
}
.worry-item:has(.cb-input:checked) .cb::after {
  opacity: 1;
  animation: check-draw 0.38s cubic-bezier(.2,1.7,.3,1) forwards;
}

@keyframes worry-stamp {
  0%   { transform: scale(1) rotate(0); }
  22%  { transform: scale(0.955) rotate(-0.5deg); }
  55%  { transform: scale(1.03) rotate(0.4deg); }
  80%  { transform: scale(0.992) rotate(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes check-draw {
  0%   { transform: rotate(-45deg) translate(1px, -1px) scale(0); opacity: 0; }
  55%  { transform: rotate(-45deg) translate(1px, -1px) scale(1.35); opacity: 1; }
  100% { transform: rotate(-45deg) translate(1px, -1px) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .worry-item:has(.cb-input:checked) { animation: none; }
  .worry-item:has(.cb-input:checked) .cb::after { animation: none; }
}

/* チェック数カウンター（段階メッセージ＋顔イラスト枠） */
.worry-count {
  margin-top: 0;
  padding: 0 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-size: 13px; font-weight: 800;
  text-align: left; line-height: 1.55;
  box-shadow: 3px 3px 0 var(--ink);
  border: 1.8px solid var(--ink);
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  max-height: 0;
  transform: translateY(-6px);
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease,
              transform 0.3s ease, margin-top 0.3s ease,
              padding 0.3s ease, background 0.3s ease;
}
.worry-count.show {
  opacity: 1;
  max-height: 220px;
  padding: 12px 14px;
  margin-top: 14px;
  transform: translateY(0);
}
.worry-count.level-heavy { background: var(--accent-dark); }
.worry-count.level-max {
  background: var(--ink); color: var(--yellow);
  font-size: 14px;
}
.worry-count-text { flex: 1; }
.worry-count .n {
  font-family: var(--font-num);
  font-size: 20px;
  color: var(--yellow);
  padding: 0 2px;
  line-height: 1;
}
.worry-count.level-heavy .n { color: var(--yellow); }
.worry-count.level-max .n { color: var(--accent); }

/* 顔イラスト差し替え枠（NAV_SLOT上書き） */
/* チェック数に応じて表情が変わるミサキのアイコン。
   以前はイラスト差し込み前提のプレースホルダー（破線枠＋「◆FACE◆」）だったが、
   実画像を入れたので枠と見出しは出さない */
.worry-count .worry-face {
  width: 62px; height: 62px; flex-shrink: 0;
  padding: 0;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.worry-count .worry-face::before { content: none; }
.worry-count.level-max .worry-face {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255,225,77,0.4);
}

/* ===== 応募するメリット（SEC02） ===== */
.merit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.merit {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 16px 12px; text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.merit .icon {
  width: 52px; height: 52px; margin-bottom: 10px;
  background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-family: var(--font-num); font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}
.merit .icon img {
  width: 100%; height: 100%; object-fit: cover;
}
.merit h3 {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding: 0 5px;
  display: inline-block;
  letter-spacing: 0.01em;
}
/* 画面に入ったら黄色マーカーを引いて見出しを立たせる */
.merit h3 {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}
.merit.emph-ready h3 { background-size: 0% 100%; }
.merit.emph-in h3 {
  animation:
    markerDraw 0.5s cubic-bezier(0.55, 0.1, 0.3, 1) 0.05s forwards,
    textPop 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .merit.emph-in h3 { animation: none; background-size: 100% 100%; }
}

.merit p {
  font-size: 12px; color: var(--ink);
  margin-top: 10px; line-height: 1.7; text-align: left;
  font-weight: 500;
}
/* hi card: 目玉特典バッジ＋グラデ＋影強調 */
.merit.hi {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  padding: 24px 18px 20px;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  margin-top: 26px;
}
.merit.hi::before {
  content: "★ 特典付き ★";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 14px;
  border: 1.8px solid var(--ink);
  border-radius: 4px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.merit.hi .icon {
  background: var(--yellow); color: var(--accent);
  border-color: var(--ink);
  width: 62px; height: 62px; font-size: 30px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.merit.hi h3 {
  color: #fff;
  font-size: 17px;
  background: none;
  padding: 0;
  line-height: 1.3;
  margin-top: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.merit.hi h3 .amt {
  color: var(--yellow);
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 900;
  padding: 0 3px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  display: inline-block;
  transform: rotate(-1deg);
}
.merit.hi p {
  color: rgba(255,255,255,0.96); text-align: center;
  font-size: 13px; margin-top: 12px; line-height: 1.7;
  font-weight: 600;
}
.merit.hi .note {
  color: rgba(255,255,255,0.7); font-size: 10px;
  margin-top: 10px; letter-spacing: 0.02em;
}

/* 枠なし・左揃えの安心コピー */
.merit-reassure {
  margin-top: 22px; padding: 0;
  background: none; border: none; border-radius: 0;
  text-align: left;
  box-shadow: none;
}
.merit-reassure p:first-child {
  font-size: 12px; font-weight: 800; line-height: 1.7; color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.merit-reassure p:last-child {
  font-size: 12px; color: var(--ink);
  margin-top: 8px; line-height: 1.8;
  font-weight: 500;
  white-space: nowrap;
}
.merit-reassure b {
  background: var(--yellow); color: var(--ink);
  padding: 1px 6px; font-weight: 900;
  border: 1.2px solid var(--ink); border-radius: 3px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  display: inline-block;
  margin-right: 2px;
}

/* ===== 選ばれる5つの理由 ===== */
.features { display: flex; flex-direction: column; gap: 12px; }
.feature {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 16px 14px 16px 60px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.feat-main { flex: 1; min-width: 0; }
.feat-illust {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 4px;
  overflow: hidden;
  position: relative;
}
.feat-illust::before {
  content: "IMG";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 7px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  z-index: 1;
}
.feat-illust .pose {
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: var(--accent-dark);
  line-height: 1.2;
}
.feat-illust img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.feature .fn {
  position: absolute; left: 14px; top: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 16px;
}
.feature h3 {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.feature h3 .feat-amt {
  font-family: var(--font-num);
  font-size: 24px;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 0 2px;
  display: inline-block;
  text-shadow: 2px 2px 0 rgba(217,74,106,0.12);
}
.feature h3 .feat-amt .u {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
  font-weight: 800;
  padding-left: 2px;
  letter-spacing: 0;
}
.feature h3 .feat-keyword {
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  padding: 0 2px;
  display: inline-block;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(217,74,106,0.12);
}
/* ===== 数字・キーワードを画面に入ったタイミングで強調 =====
   小さく現れて弾み、以降は3.2秒に一度だけ光る */
.feature.emph-ready .feat-amt,
.feature.emph-ready .feat-keyword { opacity: 0; }
.feature.emph-in .feat-amt,
.feature.emph-in .feat-keyword {
  animation:
    amt-in 0.55s cubic-bezier(0.2, 1.6, 0.35, 1) 0.15s both,
    amt-beat 3.2s ease-in-out 1.1s infinite;
}
@keyframes amt-in {
  0%   { opacity: 0; transform: scale(0.55) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.14) translateY(0); }
  80%  { transform: scale(0.97) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes amt-beat {
  0%, 86%, 100% {
    transform: scale(1);
    text-shadow: 2px 2px 0 rgba(217,74,106,0.12);
  }
  90% {
    transform: scale(1.09);
    text-shadow: 2px 2px 0 rgba(217,74,106,0.12), 0 0 16px rgba(217,74,106,0.55);
  }
  95% { transform: scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  .feature.emph-in .feat-amt,
  .feature.emph-in .feat-keyword { animation: none; opacity: 1; }
}
.feature p {
  font-size: 13px; color: var(--ink);
  margin-top: 6px; line-height: 1.7;
  font-weight: 500;
}
.feature .feat-note {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ===== 数字 ===== */
.hero-num {
  background: var(--ink); color: #fff; padding: 24px 20px;
  text-align: center; border-radius: 12px;
  position: relative;
}
.hero-num .lbl { font-size: 12px; color: var(--yellow); letter-spacing: 0.2em; font-weight: 700; }
.hero-num .big {
  font-family: var(--font-num); font-size: 54px; font-weight: 900;
  line-height: 1; margin-top: 8px;
}
.hero-num .big em { font-style: normal; color: var(--yellow); }
.hero-num .big .u { font-size: 22px; font-weight: 700; margin-left: 4px; }
.hero-num .foot { font-size: 11px; opacity: 0.7; margin-top: 8px; }

.num-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.num-cell {
  background: #fff; border: 1.8px solid var(--ink); border-radius: 10px;
  padding: 14px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.num-cell .v {
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  /* Japanese characters (万/円/〜/+) を強制的に太く（Zen Kaku Gothic Newのweight 900を効かせる） */
}
.num-cell .v .v-prefix {
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  margin-right: 2px;
  letter-spacing: 0;
  vertical-align: 0.18em;
}
.num-cell .v .v-unit {
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75em;
  font-weight: 900;
  color: var(--accent);
  margin-left: 1px;
  letter-spacing: 0;
  vertical-align: 0.06em;
}
.num-cell .l {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  margin-top: 10px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.bar-compare {
  margin-top: 16px; background: #fff; border: 1.8px solid var(--ink);
  border-radius: 10px; padding: 16px 14px;
  box-shadow: 2px 2px 0 var(--ink);
}
.bar-compare h3 {
  font-size: 14px; font-weight: 900;
  margin-bottom: 12px;
  color: var(--ink);
}
.bar-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bar-row .lbl {
  width: 70px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.bar-row .bar {
  flex: 1; height: 24px; background: #ececec;
  border: 1.2px solid var(--ink);
  border-radius: 4px; position: relative; overflow: hidden;
}
.bar-row .bar > div {
  height: 100%; background: var(--accent);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; color: #fff; font-size: 12px; font-weight: 900;
  width: 0; /* 初期値: アニメで伸ばす */
  transition: width 1.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.bar-row.gray .bar > div { background: #888; }
.bar-row .bar > div.bar-fill-active {
  /* JSが target px を style で設定 */
}

.footnote {
  font-size: 11px;
  color: #666;
  margin-top: 10px;
  font-weight: 600;
}

/* ===== 遊び共通 ===== */
.play-card {
  background: #fff; border: 2px solid var(--ink); border-radius: 16px;
  padding: 20px; box-shadow: 4px 4px 0 var(--ink);
}
.play-badge {
  display: inline-block; background: var(--yellow); color: var(--ink);
  padding: 4px 10px; font-size: 11px; font-weight: 800;
  border: 1.5px solid var(--ink); border-radius: 6px;
  letter-spacing: 0.1em; margin-bottom: 8px;
}

/* ===== 診断 ===== */
.quiz-q {
  font-size: 20px; font-weight: 900; margin-top: 6px;
  line-height: 1.4; letter-spacing: -0.01em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quiz-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quiz-options button {
  padding: 14px 6px; border-radius: 10px; background: #fff;
  border: 1.8px solid var(--ink); font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease,
              color 0.18s ease, opacity 0.2s ease, box-shadow 0.15s ease;
  position: relative;
  line-height: 1.35;
}
.quiz-options button:hover {
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 var(--ink);
}
.quiz-options button:active { transform: scale(0.96); }
.quiz-options button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  animation: quiz-pop 0.42s cubic-bezier(.2,1.6,.3,1);
}
.quiz-options button.dim {
  opacity: 0.3;
  transform: scale(0.96);
  pointer-events: none;
}
@keyframes quiz-pop {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.08) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0); }
}
/* 質問切り替え時のフェード */
.quiz-leaving .quiz-q,
.quiz-leaving .quiz-options {
  opacity: 0;
  transform: translateY(-6px);
}

.quiz-progress {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.quiz-progress .track {
  flex: 1; height: 5px; background: var(--line);
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.quiz-progress .track > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
  transition: width 0.5s cubic-bezier(.3,1.4,.4,1);
  position: relative;
}
.quiz-progress .track > div::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45));
}

/* 診断完了画面 */
.quiz-result {
  text-align: center;
  padding: 4px 0 6px;
  position: relative;
}
.qr-stars {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.35em;
  margin-bottom: 12px;
  font-weight: 900;
  animation: qr-stars 1.6s ease-in-out infinite;
}
@keyframes qr-stars {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}
.qr-badge {
  display: inline-block;
  background: var(--line-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 16px;
  border-radius: 999px;
  letter-spacing: 0.15em;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  animation: qr-badge-in 0.55s cubic-bezier(.2,1.6,.3,1) both;
}
@keyframes qr-badge-in {
  0%   { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.qr-headline {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  animation: qr-fade-in 0.6s ease 0.25s both;
}
.qr-headline .hl {
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 4px;
}
.qr-main {
  margin: 12px 0 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  animation: qr-fade-in 0.6s ease 0.4s both;
}
.qr-num {
  font-family: var(--font-num);
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 rgba(217,74,106,0.15);
}
.qr-unit {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
}
.qr-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 6px;
  animation: qr-fade-in 0.5s ease 0.55s both;
}
.qr-cta,
.qr-tel {
  width: 100%;
  max-width: 280px !important;
  box-sizing: border-box;
}
.qr-cta {
  margin: 20px auto 0 !important;
  animation: qr-cta-in 0.55s cubic-bezier(.2,1.5,.3,1) 0.7s both;
}
.qr-tel {
  margin: 10px auto 0 !important;
  text-decoration: none;
  animation: qr-cta-in 0.55s cubic-bezier(.2,1.5,.3,1) 0.85s both;
}
@keyframes qr-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qr-cta-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .qr-stars { animation: none; }
  .qr-badge, .qr-headline, .qr-main, .qr-sub, .qr-cta { animation: none; }
}

/* ===== 給与シミュ ===== */
.sim-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: var(--line); border-radius: 3px; outline: none;
  margin: 14px 0;
}
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--ink); cursor: pointer;
}
.sim-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--ink); cursor: pointer;
}
.sim-display {
  text-align: center;
}
.sim-display .v {
  font-family: var(--font-num); font-size: 48px; color: var(--accent); line-height: 1;
}
.sim-display .u { font-size: 16px; color: var(--ink); margin-left: 4px; }
.sim-meta { display: flex; justify-content: space-around; margin-top: 10px; font-size: 11px; color: var(--muted); }
.sim-meta b { display: block; font-family: var(--font-num); font-size: 18px; color: var(--ink); }
.sim-beforeafter {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 12px; background: var(--paper); border-radius: 10px;
}
.sim-beforeafter .col { flex: 1; text-align: center; }
.sim-beforeafter .col .l { font-size: 10px; color: var(--muted); }
.sim-beforeafter .col .n { font-family: var(--font-num); font-size: 18px; }
.sim-beforeafter .col.after .n { color: var(--accent); }
.sim-beforeafter .arrow { font-size: 16px; color: var(--muted); }

.sim-note {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* 案A: 希望カード（play-card内側下部にBleed、枠かぶり解消デザイン） */
.sim-reveal {
  margin: 22px -20px -20px;
  padding: 24px 20px 20px;
  background: var(--yellow);
  border: none;
  border-top: 2px dashed var(--ink);
  border-radius: 0 0 14px 14px;
  box-shadow: none;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2,1.5,.3,1);
}
.sim-reveal::before {
  content: "↓ あなたの結果 ↓";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 3px 14px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--accent);
  white-space: nowrap;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.sim-reveal[hidden] { display: none; }
.sim-reveal.show {
  opacity: 1;
  transform: translateY(0);
}
.sim-reveal-label {
  display: inline-block;
  background: var(--line-green);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.15em;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  margin-bottom: 10px;
}
.sim-reveal-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  text-align: center;
  padding: 10px 8px;
  background: var(--paper);
  border-radius: 8px;
  margin-bottom: 12px;
}
.sim-reveal-summary b {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 18px;
  padding: 0 2px;
  letter-spacing: -0.01em;
}
.sim-reveal-say {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 14px;
}
.sim-reveal-face {
  width: 52px; height: 52px; flex-shrink: 0;
  font-size: 7px; padding: 3px;
}
.sim-reveal-face::before {
  font-size: 7px; top: -7px; padding: 1px 4px;
}
.sim-reveal-say .bubble {
  flex: 1;
  background: #fff; border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px; line-height: 1.55;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  position: relative;
  font-weight: 600;
}
.sim-reveal-say .bubble::before {
  content: ""; position: absolute; left: -6px; top: 16px;
  width: 9px; height: 9px; background: #fff;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.sim-reveal-cta,
.sim-reveal-tel {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}
.sim-reveal-cta { margin-bottom: 8px; }
.sim-reveal-tel { text-decoration: none; }

/* ===== 求人 ===== */
/* フィルタチップ: 全5つを1行に収める（コンパクト化） */
.job-filters {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 0 14px;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  justify-content: space-between;
}
.job-filters::-webkit-scrollbar { display: none; }
.job-filters .chip {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 7px 9px 7px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, color 0.18s, box-shadow 0.1s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
/* チップ種別ごとの枠色＋下線帯 */
.job-filters .chip[data-filter="all"]      { border-color: var(--ink); }
.job-filters .chip[data-filter="dormFree"] { border-color: var(--line-green); }
.job-filters .chip[data-filter="over30"]   { border-color: var(--accent); }
.job-filters .chip[data-filter="noexp"]    { border-color: #e6a000; }
.job-filters .chip[data-filter="immediate"]{ border-color: var(--accent-dark); }
.job-filters .chip:active { transform: scale(0.94); }
.job-filters .chip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  animation: chip-pop 0.4s cubic-bezier(.2,1.7,.3,1);
}
@keyframes chip-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .job-filters .chip.on { animation: none; }
}

/* 求人リスト: 横スクロール・1画面1カード・スナップ */
.job-slider-wrap {
  position: relative;
  margin: 0 calc(var(--pad) * -1);
  padding: 0;
}
.job-list {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 6px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.job-list::-webkit-scrollbar { display: none; }
.job-list > .job-card {
  flex: 0 0 calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 0 10px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: translateZ(0);
}

/* カード入場アニメ（フィルタ切替/初期表示時） */
@keyframes job-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.job-list > .job-card {
  animation: job-card-in 0.4s cubic-bezier(.2,1.4,.3,1) both;
}
.job-list > .job-card:nth-child(2) { animation-delay: 0.05s; }
.job-list > .job-card:nth-child(3) { animation-delay: 0.1s; }
.job-list > .job-card:nth-child(4) { animation-delay: 0.14s; }
.job-list > .job-card:nth-child(5) { animation-delay: 0.17s; }
.job-list > .job-card:nth-child(n+6) { animation-delay: 0.2s; }

/* フィルタ切替時: 黄色フラッシュ */
.job-list.just-filtered { animation: list-flash 0.55s ease; }
@keyframes list-flash {
  0%   { background: rgba(255, 225, 77, 0); }
  35%  { background: rgba(255, 225, 77, 0.35); }
  100% { background: rgba(255, 225, 77, 0); }
}

.job-list .job-empty {
  flex: 0 0 calc(100% - 20px);
  margin-right: 10px;
  scroll-snap-align: center;
  padding: 28px 20px;
  text-align: center;
  background: #fff8e1;
  border: 1.8px dashed var(--ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.9;
}

/* 左右矢印: カード内の黒いキャッチ帯にオーバーレイ配置 */
.job-nav {
  position: absolute;
  /* カードのcatch帯の縦中央へ (card_width/2 の写真 + catch帯半分 + list上padding) */
  top: calc((min(420px, 100vw) - 20px) / 2 + 44px);
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.8px solid var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px 0;
  color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
}
.job-nav.prev { left: 18px; }
.job-nav.next { right: 18px; }
.job-nav:active {
  transform: translateY(-50%) translate(1.5px, 1.5px);
  box-shadow: 1px 1px 0 var(--ink);
}
.job-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}

/* カウンター（スライダー下） */
.job-slider-meta {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.job-slider-meta b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 22px;
  padding: 0 2px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.job-slider-meta .sep {
  color: var(--muted);
  margin: 0 2px;
  font-weight: 500;
}
.job-slider-meta #jobTotal {
  font-family: var(--font-num);
  color: var(--ink);
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .job-list > .job-card { animation: none; }
  .job-list.just-filtered { animation: none; }
}
/* 新デザイン: 写真メイン＋キャッチ帯＋データテーブル */
.job-card {
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  position: relative;
  box-shadow: 3px 3px 0 var(--ink);
}
.job-photo {
  aspect-ratio: 2 / 1;
  background: var(--accent-soft);
  border-bottom: 1.5px dashed var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-align: center;
}
.job-photo::before {
  content: "◆ PHOTO ◆";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  z-index: 2;
}
.job-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.job-photo .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: var(--accent-dark);
  letter-spacing: 0.02em;
}
.job-card .job-photo .fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 3;
}
.job-match {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  z-index: 3;
  letter-spacing: 0.02em;
}
.job-match b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 13px;
  padding: 0 2px;
  letter-spacing: 0;
}

.job-catch {
  background: linear-gradient(135deg, var(--ink) 0%, var(--dark) 100%);
  color: #fff;
  padding: 12px 14px 10px;
  text-align: center;
}
.job-catch h3 {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.job-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  justify-content: center;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.job-data {
  padding: 0;
  margin: 0;
}
.job-data .row {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.job-data .row:last-child { border-bottom: none; }
.job-data dt {
  background: var(--paper);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  margin: 0;
  letter-spacing: 0.02em;
}
.job-data dd {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  font-weight: 500;
  line-height: 1.4;
}
.job-data .row.hi dd {
  font-size: 14px;
  font-weight: 700;
}
.job-data .row.hi dd b {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 22px;
  padding: 0 2px;
  letter-spacing: -0.01em;
  line-height: 1;
  font-weight: 900;
}

.job-foot {
  padding: 10px 14px 12px;
  margin-top: 0;
  border-top: 1.5px dashed var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.job-stock { font-size: 11px; color: var(--muted); }
.job-stock.hot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  letter-spacing: 0.03em;
  line-height: 1;
  animation: stock-pulse 1.6s ease-in-out infinite;
}
.job-stock.hot b {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--yellow);
  padding: 0 2px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.job-stock.hot .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1.5px var(--ink);
  animation: stock-dot 1s ease-in-out infinite;
}
@keyframes stock-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}
@keyframes stock-pulse {
  0%, 100% { box-shadow: 1.5px 1.5px 0 var(--ink), 0 0 0 0 rgba(229,57,53,0.6); }
  60%      { box-shadow: 1.5px 1.5px 0 var(--ink), 0 0 0 8px rgba(229,57,53,0); }
}
@media (prefers-reduced-motion: reduce) {
  .job-stock.hot { animation: none; }
  .job-stock.hot .dot { animation: none; }
}

.job-more {
  margin-top: 18px;
  text-align: center;
}
.job-more .btn {
  display: inline-flex;
  width: auto;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 28px;
  font-size: 14px;
}
.job-more .meta { font-size: 10px; color: var(--muted); margin-top: 10px; }

/* ===== 異世界工場ガチャ ===== */
.gacha-box {
  background: var(--dark); color: #fff;
  text-align: center; padding: 28px 20px;
  border-radius: 16px; margin-top: 8px;
  position: relative; overflow: hidden;
}
.gacha-box .stars {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,225,77,0.15), transparent 30%),
              radial-gradient(circle at 80% 60%, rgba(217,74,106,0.2), transparent 40%);
  pointer-events: none;
}
.gacha-box > * { position: relative; }
.gacha-stage {
  position: relative;
  min-height: 240px;
  margin: 16px auto 8px;
  display: flex; align-items: center; justify-content: center;
}
/* 派手なフラッシュ演出（リビール直前） */
.gacha-stage.flash-burst::after {
  content: "";
  position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,225,77,0.6) 40%, transparent 70%);
  animation: flash-reveal 0.55s ease-out both;
  pointer-events: none;
  z-index: 20;
  border-radius: 50%;
}
@keyframes flash-reveal {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(3); }
}
/* 待機中のカプセル。全画面演出の召喚陣と同じ意匠（歯車＋輪＋核）で揃える */
.gacha-capsule {
  position: relative;
  width: 168px; height: 168px;
  display: grid;
  place-items: center;
  animation: gachaFloat 3.4s ease-in-out infinite;
}
@keyframes gachaFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* 外周の歯車リング */
.gc-cap-gear {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,225,77,0.75) 0deg 3.2deg,
    transparent 3.2deg 16deg
  );
  mask-image: radial-gradient(circle, transparent 42%, #000 45%, #000 50%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 45%, #000 50%, transparent 53%);
  animation: gc-ring-spin 16s linear infinite;
}
/* 内側の破線リング */
.gc-cap-ring {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 2px dashed rgba(255,225,77,0.85);
  box-shadow: 0 0 14px rgba(255,225,77,0.35), inset 0 0 14px rgba(255,225,77,0.25);
  animation: gc-ring-spin 9s linear infinite reverse;
}
/* 中心で脈動する核 */
.gc-cap-core {
  position: absolute;
  inset: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255,255,255,0.95) 0%,
    var(--yellow) 42%,
    #c9930f 100%);
  box-shadow: 0 0 28px 6px rgba(255,225,77,0.5), inset 0 0 18px rgba(255,255,255,0.5);
  animation: gc-cap-pulse 2.4s ease-in-out infinite;
}
@keyframes gc-cap-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 24px 4px rgba(255,225,77,0.42), inset 0 0 18px rgba(255,255,255,0.5); }
  50%      { transform: scale(1.06); box-shadow: 0 0 40px 12px rgba(255,225,77,0.7), inset 0 0 22px rgba(255,255,255,0.7); }
}
/* 中央の「?」 */
.gc-cap-mark {
  position: relative;
  z-index: 2;
  font-family: var(--font-num);
  font-size: 40px;
  line-height: 1;
  color: #2a1c00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .gacha-capsule, .gc-cap-gear, .gc-cap-ring, .gc-cap-core { animation: none; }
}
/* スピン演出 */
.gacha-stage.spinning .gacha-capsule {
  animation: gachaSpin 1.1s cubic-bezier(.3,.1,.3,1) forwards;
}
@keyframes gachaSpin {
  0%   { transform: rotate(0) scale(1); filter: blur(0); }
  40%  { transform: rotate(720deg) scale(1.1); filter: blur(2px); }
  80%  { transform: rotate(1800deg) scale(1.3); filter: blur(4px); }
  100% { transform: rotate(2160deg) scale(0.3); filter: blur(8px); opacity: 0; }
}

.gacha-meta {
  font-size: 12px; opacity: 0.9; margin-top: 8px;
  transition: background 0.3s;
  padding: 6px 14px; border-radius: 999px;
  display: inline-block;
  position: relative;
}
.gacha-meta b {
  color: var(--yellow); font-family: var(--font-num);
  font-size: 18px; padding: 0 3px;
  transition: transform 0.3s, color 0.3s;
}
.gacha-meta.flash { animation: meta-flash 0.7s ease; }
.gacha-meta.flash b { animation: rem-bump 0.5s cubic-bezier(.2,1.6,.3,1); }
@keyframes meta-flash {
  0%   { background: rgba(255,225,77,0); transform: scale(1); }
  40%  { background: rgba(255,225,77,0.35); transform: scale(1.08); }
  100% { background: rgba(255,225,77,0); transform: scale(1); }
}
@keyframes rem-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); color: #fff; }
  100% { transform: scale(1); }
}
/* +1 ポップ表示 */
.gacha-bonus-pop {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  color: var(--yellow);
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 0 8px rgba(255,225,77,0.7);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.gacha-bonus-pop.show {
  animation: bonus-pop 1.1s cubic-bezier(.2,1.4,.3,1) forwards;
}
@keyframes bonus-pop {
  0%   { opacity: 0; transform: translate(0, -50%) scale(0.4); }
  25%  { opacity: 1; transform: translate(6px, -100%) scale(1.2); }
  70%  { opacity: 1; transform: translate(10px, -180%) scale(1); }
  100% { opacity: 0; transform: translate(14px, -240%) scale(0.9); }
}

/* ガチャ サブ: 全20種類 + レア度ピル */
.gacha-rarity-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: none;
  color: rgba(255,255,255,0.9);
  margin-top: 10px;
}
.gacha-total {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
}
.gacha-total b {
  font-family: var(--font-num);
  font-size: 22px;
  color: var(--yellow);
  padding: 0 3px;
  letter-spacing: -0.01em;
}
.rarity-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 280px;
  margin: 0 auto;
}
.rarity-inline .r-pill {
  justify-content: center;
}
.r-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 9px 4px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  line-height: 1;
}
.r-pill .rp-name {
  font-size: 10px;
  letter-spacing: 0.05em;
}
.r-pill i {
  font-style: normal;
  font-family: var(--font-num);
  font-size: 11px;
  opacity: 0.92;
  letter-spacing: 0;
}
.r-pill .rp-prob {
  font-family: var(--font-num);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.32);
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.r-pill.ssr .rp-prob { background: rgba(0, 0, 0, 0.55); color: #ffd54a; }
.r-pill.ssr {
  background: linear-gradient(135deg, #ffd700 0%, #ff6f00 55%, #e91e63 100%);
  color: var(--ink);
  border-color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 0 8px rgba(255,215,0,0.4);
}
.r-pill.sr  { background: linear-gradient(135deg, #9d4edd 0%, #ff6ec7 100%); }
.r-pill.r   { background: linear-gradient(135deg, #1e88e5 0%, #26c6da 100%); }
.r-pill.n   { background: linear-gradient(135deg, #546e7a 0%, #90a4ae 100%); }

/* カウンター内のセパレーター */
.gacha-meta .sep {
  color: rgba(255,255,255,0.45);
  margin: 0 6px;
  font-weight: 400;
}

/* ガチャ残り下の案内文 */
.gacha-note {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.65;
  margin: 14px auto 0;
  max-width: 300px;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,225,77,0.18) 0%, rgba(255,193,7,0.10) 100%);
  border: 1.5px solid rgba(255,225,77,0.7);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(255,225,77,0.18);
  text-align: center;
  animation: gachaNoteGlow 2.4s ease-in-out infinite;
}
.gacha-note b {
  color: var(--yellow);
  font-weight: 900;
  font-size: 14px;
  padding: 0 2px;
  text-shadow: 0 0 8px rgba(255,225,77,0.6);
}
/* 「ガチャアクション」はセクション左上のバッジと同じ意匠にして、
   同じものを指していると一目で分かるようにする */
.gacha-note b.ga-chip {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 9px 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  text-shadow: none;
  margin-right: 3px;
  vertical-align: 1px;
}
@keyframes gachaNoteGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255,225,77,0.18); border-color: rgba(255,225,77,0.55); }
  50%      { box-shadow: 0 0 24px rgba(255,225,77,0.42); border-color: rgba(255,225,77,0.95); }
}

/* ガチャ結果カード */
.gacha-result {
  width: 100%;
  padding: 18px 14px 14px;
  border-radius: 16px;
  position: relative;
  border: 2.5px solid var(--yellow);
  animation: result-pop 0.55s cubic-bezier(.2,1.7,.3,1) both;
  overflow: hidden;
}
@keyframes result-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.gacha-burst {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.45) 0%, transparent 45%);
  animation: burst-flash 0.8s ease-out both;
  z-index: 1;
}
@keyframes burst-flash {
  0%   { opacity: 1; transform: scale(0.3); }
  40%  { opacity: 0.8; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.4); }
}
.gacha-result > *:not(.gacha-burst) { position: relative; z-index: 2; }

/* レア度別の背景グラデーション */
.gacha-result.rarity-ssr {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 30%, #ff4081 60%, #8a2be2 100%);
  background-size: 200% 200%;
  animation: result-pop 0.55s cubic-bezier(.2,1.7,.3,1) both, ssr-shine 3s ease-in-out infinite;
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255,215,0,0.6), 4px 4px 0 var(--ink);
}
@keyframes ssr-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.gacha-result.rarity-sr {
  background: linear-gradient(135deg, #9d4edd 0%, #ff6ec7 100%);
  border-color: #ff6ec7;
  box-shadow: 0 0 20px rgba(255,110,199,0.45), 3px 3px 0 var(--ink);
}
.gacha-result.rarity-r {
  background: linear-gradient(135deg, #1e88e5 0%, #26c6da 100%);
  border-color: #26c6da;
  box-shadow: 0 0 14px rgba(38,198,218,0.4), 3px 3px 0 var(--ink);
}
.gacha-result.rarity-n {
  background: linear-gradient(135deg, #546e7a 0%, #90a4ae 100%);
  border-color: #b0bec5;
  box-shadow: 3px 3px 0 var(--ink);
}

.rarity-badge {
  display: inline-block;
  background: rgba(0,0,0,0.4);
  color: var(--yellow);
  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.6);
  font-weight: 900;
  margin-bottom: 10px;
}
.rarity-badge b {
  font-family: var(--font-num);
  font-size: 16px;
  color: #fff;
  padding-left: 4px;
  letter-spacing: 0.05em;
}
.gacha-result.rarity-ssr .rarity-badge {
  animation: ssr-badge-pulse 0.9s ease-in-out infinite;
}
@keyframes ssr-badge-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 #fff; }
  50%      { transform: scale(1.06); text-shadow: 0 0 8px #fff, 0 0 12px var(--yellow); }
}

.gacha-illust {
  aspect-ratio: 2/3;
  max-width: 220px;
  margin: 0 auto 10px;
  background: rgba(255,255,255,0.15);
  border: 2px dashed rgba(255,255,255,0.7);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gacha-illust.has-photo {
  background: transparent;
  border: 2px solid rgba(255,215,0,0.6);
  padding: 0;
  box-shadow: 0 0 20px rgba(255,215,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
}
.gacha-illust img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}

/* キャラ名バナー */
.result-name {
  text-align: center;
  margin: 6px 0 8px;
  line-height: 1.2;
}
.result-name .result-title {
  display: block;
  font-size: 11px;
  color: rgba(255,225,77,0.85);
  letter-spacing: 0.15em;
  margin-bottom: 2px;
  font-weight: 700;
}
.result-name .result-charname {
  display: inline-block;
  font-size: 22px;
  font-weight: 900;
  color: #ffe14d;
  text-shadow: 0 0 8px rgba(255,180,0,0.5), 0 2px 4px rgba(0,0,0,0.6);
  letter-spacing: 0.08em;
}
.gacha-illust .pose {
  font-family: "Courier New", monospace;
  font-size: 9px;
  margin-top: 4px;
  color: rgba(255,255,255,0.85);
}
.result-hint {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: rgba(0,0,0,0.35);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 14px;
}
/* ガチャ回数使い切り後のLINE誘導 */
.gacha-exhausted {
  margin: 14px auto 0;
  padding: 16px 14px 14px;
  background: rgba(255,255,255,0.06);
  border: 1.8px dashed var(--yellow);
  border-radius: 14px;
  text-align: center;
  max-width: 320px;
  animation: exhausted-in 0.5s cubic-bezier(.2,1.5,.3,1) both;
}
.gacha-exhausted[hidden] { display: none; }
@keyframes exhausted-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gacha-exhausted-msg {
  font-size: 12px;
  color: #fff;
  line-height: 1.7;
  margin-bottom: 12px;
  font-weight: 600;
  text-align: left;
}
.gacha-exhausted-msg b {
  color: var(--yellow);
  font-weight: 900;
  padding: 0 2px;
}
.gacha-exhausted-cta {
  max-width: 260px;
  margin: 0 auto;
}

.result-ctas {
  display: flex;
  flex-direction: row;
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
}
.result-line,
.result-tel {
  flex: 1;
  padding: 9px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
  min-width: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  opacity: 0.92;
}
.result-line::before { font-size: 11px; letter-spacing: 0.02em; }
.result-tel {
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

/* ===== 応募した方の声（LINEトーク風スライダー） ===== */
.voice-slider-wrap {
  margin: 0 calc(var(--pad) * -1);
  padding: 0;
  position: relative;
}
.voice-list {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.voice-list::-webkit-scrollbar { display: none; }
.voice-chat {
  flex: 0 0 calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 0 10px;
  scroll-snap-align: center;
  background: #f4f4ed;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex;
  flex-direction: column;
}

/* ヘッダー（LINEトップバー風・視認性UP） */
.voice-chat-header {
  background: var(--line-green);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 22px;
  border-bottom: 2px solid var(--ink);
  position: relative;
  /* 顔画像がはみ出すので overflow:visible */
  overflow: visible;
}
.voice-chat-header .back-arrow {
  font-size: 26px;
  font-weight: 900;
  opacity: 0.95;
  line-height: 1;
}
.voice-chat-header .chat-menu {
  font-size: 24px;
  opacity: 0.85;
  line-height: 1;
  padding: 0 4px;
}

/* 左右矢印: カード中央の左右にオーバーレイ配置 */
.voice-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1.8px solid var(--ink);
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px;
  z-index: 10;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.voice-nav.prev { left: 16px; }
.voice-nav.next { right: 16px; }
.voice-nav:active {
  transform: translateY(-50%) translate(1.5px, 1.5px);
  box-shadow: 1px 1px 0 var(--ink);
}
.voice-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.voice-chat-header .chat-face-header {
  width: 72px; height: 72px;
  flex-shrink: 0;
  font-size: 9px;
  padding: 3px;
  background: rgba(255,255,255,0.98);
  border-color: var(--ink);
  border-width: 2.5px;
  color: var(--accent-dark);
  /* ヘッダー上下からはみ出して大きく見せる */
  margin: -16px 0 -16px -8px;
  box-shadow: 2px 2px 0 var(--ink), 0 0 0 2px #fff;
}
.voice-chat-header .chat-face-header::before {
  font-size: 7px; top: -7px; padding: 1px 5px;
}
.voice-chat-header .chat-header-info { flex: 1; line-height: 1.3; min-width: 0; }
.voice-chat-header .chat-name {
  font-size: 20px; font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.voice-chat-header .chat-sub {
  font-size: 14px;
  opacity: 0.95;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700;
}

/* チャット本体 */
.voice-chat-body {
  background: linear-gradient(180deg, #8fb2cc 0%, #a8c3d8 100%);
  padding: 14px 10px 16px;
  min-height: 320px;
  flex: 1;
}
.chat-date-wrap { text-align: center; margin-bottom: 14px; }
.chat-date {
  display: inline-block;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.chat-msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.chat-msg:last-child { margin-bottom: 0; }
.chat-avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  font-size: 6px;
  padding: 2px;
}
.chat-avatar:empty { background: transparent; border: none; }
.chat-avatar.nav-slot::before { font-size: 5px; top: -5px; padding: 1px 3px; }
.chat-msg.no-avatar .chat-avatar {
  visibility: hidden;
  width: 34px;
  background: transparent;
  border: none;
}
.chat-bubble {
  max-width: 80%;
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: 3px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  box-shadow: 1px 1.5px 2px rgba(0,0,0,0.08);
  position: relative;
  font-weight: 500;
  word-break: break-word;
}
.chat-msg:not(.no-avatar) .chat-bubble::before {
  content: "";
  position: absolute;
  top: 10px; left: -5px;
  width: 11px; height: 11px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.chat-bubble .chat-title {
  font-weight: 900;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* BEFORE/AFTERカード: フル幅に広げて見やすく */
.chat-bubble.stat {
  background: #fff8e1;
  max-width: calc(100% - 40px);
  width: calc(100% - 40px);
  border: 2px solid var(--ink);
  border-top-left-radius: 14px;
  padding: 14px 16px;
  box-shadow: 2.5px 2.5px 0 var(--ink);
}
.chat-bubble.stat::before { display: none; }
.chat-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-stat .col {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
}
.chat-stat .col.b { background: rgba(0,0,0,0.06); border: 1.5px solid rgba(0,0,0,0.15); }
.chat-stat .col.a { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.chat-stat .col .l {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.15em;
  font-weight: 900;
  margin-bottom: 4px;
}
.chat-stat .col.a .l { color: var(--accent-dark); }
.chat-stat .col .n {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.chat-stat .col .n b {
  font-family: var(--font-num);
  font-size: 24px;
  color: var(--ink);
  padding: 0 2px;
  letter-spacing: -0.01em;
}
.chat-stat .col.a .n b { color: var(--accent); }
.chat-stat .arr {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  flex-shrink: 0;
}

/* 下部カウンター（矢印はヘッダーに組み込み済み） */
.voice-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.voice-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.voice-meta b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 20px;
  padding: 0 3px;
}
.voice-meta #voiceTotal {
  font-family: var(--font-num);
  color: var(--ink);
  font-size: 14px;
}

/* ===== FAQ ===== */
.faq-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.faq-tabs .tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: 12px; font-weight: 800;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, box-shadow 0.15s;
}
/* タブごとの色分け（非アクティブ時は枠色のみ薄く反映） */
.faq-tabs .tab[data-cat="work"]   { border-color: #1565c0; color: #1565c0; }
.faq-tabs .tab[data-cat="dorm"]   { border-color: #2e7d32; color: #2e7d32; }
.faq-tabs .tab[data-cat="money"]  { border-color: #ef6c00; color: #ef6c00; }
.faq-tabs .tab[data-cat="other"]  { border-color: #6d6d6d; color: #6d6d6d; }
/* アクティブ時はそのカラーを背景に */
.faq-tabs .tab.on {
  color: #fff;
  background: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  animation: faq-tab-pop 0.4s cubic-bezier(.2,1.6,.3,1);
}
.faq-tabs .tab[data-cat="work"].on  { background: #1565c0; }
.faq-tabs .tab[data-cat="dorm"].on  { background: #2e7d32; }
.faq-tabs .tab[data-cat="money"].on { background: #ef6c00; }
.faq-tabs .tab[data-cat="other"].on { background: #6d6d6d; }
@keyframes faq-tab-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12) rotate(-1deg); }
  100% { transform: scale(1); }
}

/* タブ変更時にFAQ全体が再登場するフラッシュ */
#faqList.tab-flash {
  animation: faq-list-flash 0.45s ease;
}
@keyframes faq-list-flash {
  0%   { background: rgba(255,225,77,0); }
  45%  { background: rgba(255,225,77,0.22); }
  100% { background: rgba(255,225,77,0); }
}
#faqList.tab-flash .faq-item {
  animation: faq-item-in 0.4s cubic-bezier(.2,1.4,.3,1) both;
}
#faqList.tab-flash .faq-item:nth-child(2) { animation-delay: 0.04s; }
#faqList.tab-flash .faq-item:nth-child(3) { animation-delay: 0.08s; }
#faqList.tab-flash .faq-item:nth-child(4) { animation-delay: 0.12s; }
#faqList.tab-flash .faq-item:nth-child(5) { animation-delay: 0.15s; }
#faqList.tab-flash .faq-item:nth-child(n+6) { animation-delay: 0.18s; }
@keyframes faq-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-tabs .tab.on { animation: none; }
  #faqList.tab-flash { animation: none; }
  #faqList.tab-flash .faq-item { animation: none; }
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 14px 4px;
  cursor: pointer;
}
/* グリッドで Q. 位置を全行揃える: カテゴリ/質問/開閉アイコン */
.faq-item .q {
  display: grid;
  grid-template-columns: 40px 1fr 22px;
  gap: 10px;
  align-items: center;
}
.faq-item .q-cat {
  font-size: 10px;
  padding: 4px 0;
  background: var(--paper);
  border-radius: 4px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
}
/* タブと同じ色を質問カテゴリバッジへ反映 */
.faq-item[data-cat="work"]  .q-cat { background: #e3f2fd; color: #1565c0; }
.faq-item[data-cat="dorm"]  .q-cat { background: #e8f5e9; color: #2e7d32; }
.faq-item[data-cat="money"] .q-cat { background: #fff3e0; color: #ef6c00; }
.faq-item[data-cat="other"] .q-cat { background: #efefef; color: #6d6d6d; }
.faq-item .q-text {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.faq-item .q-text::before {
  content: "Q. ";
  color: #1e88e5;
  font-weight: 900;
  font-family: var(--font-num);
  margin-right: 4px;
  letter-spacing: 0.02em;
}
.faq-item .q-icon {
  font-size: 22px;
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
  text-align: center;
}
.faq-item.open { background: #fffdf5; padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.faq-item .a {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.85;
  font-weight: 500;
}
.faq-item.open .a { display: block; }
.faq-item .a b {
  color: var(--accent);
  font-family: var(--font-num);
  font-weight: 900;
  margin-right: 4px;
  font-size: 16px;
}

/* 「もっと見る」ボタン */
.faq-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0 32px;
}
.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1.8px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  line-height: 1;
}
.faq-toggle:hover { background: #fcd5e0; }
.faq-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 0.5px 0.5px 0 var(--ink);
}
.faq-toggle .arr {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.25s ease;
  line-height: 1;
}
.faq-toggle.expanded .arr { transform: rotate(180deg); }
.faq-item .a .accent { color: var(--accent); font-weight: 800; }
.faq-item .a-tags { display: flex; gap: 4px; margin-top: 8px; }
.faq-item .a-tags .t {
  font-size: 10px; padding: 2px 8px; background: var(--accent-soft);
  color: var(--accent-dark); border-radius: 4px; font-weight: 700;
}

.faq-more { margin-top: 16px; }

/* ===== 最終CTA ===== */
.final { text-align: center; padding: 56px var(--pad) 72px; }
.final .nav-slot.s-hero { max-width: 220px; margin-bottom: 20px; }
.final h2 { font-size: 26px; }
.final .cta-card {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
  padding: 20px; margin-top: 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.final .cta-card p { font-size: 12px; color: var(--muted); margin-top: 6px; }
.final .cta-card .btn { margin-top: 14px; }
.final .cta-card .foot { font-size: 10px; color: var(--muted); margin-top: 10px; }

/* ===== 次セクションへのブリッジ（案B） ===== */
.bridge-wrap { text-align: center; margin-top: 22px; }
.bridge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  letter-spacing: 0.02em;
}
.bridge:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.bridge .arr {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 900;
  animation: bridge-arr 1.3s ease-in-out infinite;
}
@keyframes bridge-arr {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .bridge .arr { animation: none; }
}
section.s-dark .bridge {
  background: var(--yellow); color: var(--ink);
  border-color: var(--yellow);
}

/* ===== 気になる♡（案D） ===== */
.fav-btn {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1.8px solid var(--ink);
  cursor: pointer;
  font-size: 16px; font-weight: 700;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.08s, background 0.25s, color 0.25s, border-color 0.25s;
  box-shadow: 2px 2px 0 var(--ink);
  z-index: 2;
  line-height: 1;
  padding: 0;
}
.fav-btn:active { transform: scale(0.9); }
.fav-btn::before { content: "♡"; }
.fav-btn.on {
  background: var(--accent);
  color: #fff;
  animation: fav-pop 0.45s cubic-bezier(.2,1.7,.3,1);
}
.fav-btn.on::before { content: "♥"; }
@keyframes fav-pop {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.35) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
/* 個別配置 */
.job-card .fav-btn { top: -10px; left: 12px; }
.perk { /* ensure relative already exists */ }
.perk .fav-btn { top: -8px; right: -8px; }
.perk.hi .fav-btn {
  background: #fff;
  color: var(--accent);
}
.perk.hi .fav-btn.on {
  background: var(--yellow);
  color: var(--ink);
}
.dorm-slide { position: relative; }
.dorm-slide .fav-btn { top: 8px; right: 8px; }

/* 気になるリスト（フッター前 / 最終） */
.fav-summary {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 16px;
  margin: 0 auto 20px;
  box-shadow: 4px 4px 0 var(--ink);
  max-width: 100%;
  text-align: left;
}
.fav-summary[hidden] { display: none; }
.fav-summary-final {
  margin: 28px 16px 36px;
  padding: 20px 18px;
}
.fav-head {
  font-size: 13px; font-weight: 800;
  margin-bottom: 14px;
  text-align: center;
  line-height: 1.6;
}
.fav-head b {
  font-family: var(--font-num);
  font-size: 26px;
  color: var(--accent);
  padding: 0 4px;
  line-height: 1;
}
.fav-head-sub {
  font-size: 13px; font-weight: 800;
  color: var(--ink);
}
.fav-list {
  list-style: none; padding: 0;
  margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
}
.fav-list li {
  font-size: 12px; padding: 8px 10px;
  background: var(--paper); border-radius: 6px;
  display: flex; align-items: center;
  gap: 8px;
  font-weight: 600;
}
.fav-list-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-list .fav-jump {
  background: #1976d2; color: #fff;
  border: none; cursor: pointer;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(25, 118, 210, 0.32);
  transition: transform 0.15s, background 0.15s;
  line-height: 1;
}
.fav-list .fav-jump:hover { background: #1565c0; }
.fav-list .fav-jump:active { transform: scale(0.92); background: #0d47a1; }
.fav-list .rm {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); line-height: 1;
  padding: 4px 6px;
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.fav-list .rm:hover { background: #ffe7e3; color: var(--accent); }

.fav-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fav-actions .btn {
  width: 100%;
  padding: 12px 6px;
  font-size: 12.5px;
}

/* ジャンプ先カードのフラッシュハイライト */
.job-card.jump-flash {
  animation: jumpFlash 1.4s ease-out;
}
@keyframes jumpFlash {
  0%   { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.55); }
  40%  { box-shadow: 0 0 0 12px rgba(25, 118, 210, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
}

/* ===== 常駐バー ===== */
.sticky-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--container);
  background: #fff; border-top: 2px solid var(--ink);
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
/* 進捗バー（案A） */
.sticky-progress {
  position: absolute;
  top: -2px; left: 0;
  height: 3px;
  background: var(--accent);
  width: 0%;
  transition: width 0.55s cubic-bezier(.2,1.5,.3,1), background 0.3s;
  border-radius: 0 2px 2px 0;
  z-index: 2;
}
.sticky-progress.max { background: var(--yellow); }
/* アチーブメントバッジ */
.sticky-achv {
  position: absolute;
  top: -13px; right: 14px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; gap: 4px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  z-index: 101;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.sticky-achv .txt { color: var(--muted); font-weight: 700; }
.sticky-achv b {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--accent);
  line-height: 1;
}
.sticky-achv.pop {
  animation: achv-pop 0.5s cubic-bezier(.2,1.7,.3,1);
}
@keyframes achv-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); background: var(--yellow); }
  100% { transform: scale(1); }
}
.sticky-achv.max {
  background: var(--ink);
  color: #fff;
}
.sticky-achv.max .txt { color: var(--yellow); }
.sticky-achv.max b { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .sticky-achv.pop { animation: none; }
}
.sticky-bar .nav-slot {
  width: 44px; height: 44px; flex-shrink: 0; font-size: 7px; padding: 2px;
  border-radius: 50%;
}
.sticky-bar .nav-slot::before { font-size: 6px; top: -5px; padding: 1px 3px; }
.sticky-bar .msg {
  flex: 1; font-size: 12px; line-height: 1.4;
  padding: 8px 12px; background: var(--paper);
  border-radius: 12px; font-weight: 500;
  transition: opacity 0.3s;
}
.sticky-bar .btn-sm {
  flex-shrink: 0; padding: 10px 14px; font-size: 13px;
}

/* ===== ここまで読んだ合図（FINISH / 6個目のマイルストーン） ===== */
.sec-finish {
  background: linear-gradient(180deg, #fff8e1 0%, #fff 100%);
  padding: 48px var(--pad) 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sec-finish::before,
.sec-finish::after {
  content: "";
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: 0.35;
  filter: blur(40px);
  z-index: 0;
}
.sec-finish::before { top: -60px; left: -50px; }
.sec-finish::after { bottom: -60px; right: -50px; }
.finish-wrap { position: relative; z-index: 1; }
.finish-sparkle {
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 0.6em;
  font-weight: 900;
  margin-bottom: 14px;
  animation: finish-sparkle 2.2s ease-in-out infinite;
}
@keyframes finish-sparkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}
.finish-lead {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
}
.finish-lead b {
  font-weight: 900;
  font-size: 24px;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 4px;
}
.finish-sub {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.finish-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--accent);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
  letter-spacing: 0.03em;
  position: relative;
  animation: finish-pulse 2.2s ease-in-out infinite;
}
.finish-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
  animation: none;
}
.finish-btn.done {
  background: var(--ink);
  animation: none;
  pointer-events: none;
}
.finish-btn.done::after {
  content: "✓ 達成";
  position: absolute;
  top: -12px; right: -8px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font-weight: 900;
}
.finish-emoji { font-size: 22px; }
@keyframes finish-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(217,74,106,0.5); }
  50%      { box-shadow: 4px 4px 0 var(--ink), 0 0 0 14px rgba(217,74,106,0); }
}
/* 枠を付けるとボタンに見えるので文字だけ。
   薄いグレーだと背景に沈むため、色と太さで読ませて1行に収める */
.finish-note {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.finish-note b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 14px;
  padding: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
  .finish-btn { animation: none; }
  .finish-sparkle { animation: none; }
}

/* ===== コンプ達成ご褒美モーダル ===== */
.reward-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(120,60,18,0.55) 0%, rgba(10,5,2,0.93) 68%),
    rgba(8, 4, 2, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  animation: overlay-in 0.3s ease;
}
.reward-overlay[hidden] { display: none; }
.reward-card {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(255,206,116,0.26) 0%, transparent 60%),
    linear-gradient(172deg, #2a1a09 0%, #180e05 52%, #0d0602 100%);
  border: 1.5px solid rgba(255,208,116,0.5);
  border-radius: 22px;
  padding: 16px 16px 14px;
  max-width: 352px;
  width: 100%;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  text-align: center;
  position: relative;
  color: #fdf3e0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    0 22px 60px rgba(0,0,0,0.7),
    0 0 46px rgba(255,186,74,0.18);
  animation: reward-pop 0.55s cubic-bezier(.2,1.6,.3,1);
}
/* 内側の金ヘアライン */
.reward-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,205,110,0.18);
  border-radius: 17px;
  pointer-events: none;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes reward-pop {
  0%   { transform: scale(0.7) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reward-close {
  position: absolute;
  top: 9px; right: 9px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,208,116,0.45);
  cursor: pointer;
  font-size: 17px;
  color: rgba(255,214,130,0.9);
  line-height: 1;
  padding: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.reward-close:active { background: rgba(255,208,116,0.18); }
/* 上部の小見出し（金ヘアラインで挟む） */
.reward-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 0.3em;
  font-weight: 900;
  margin: 2px 0 8px;
  color: #f3c778;
  text-shadow: 0 0 12px rgba(255,190,80,0.5);
}
.reward-eyebrow::before,
.reward-eyebrow::after {
  content: "";
  height: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255,205,110,0.75));
}
.reward-eyebrow::after { transform: scaleX(-1); }
.reward-title {
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff8e4 0%, #ffdf9d 52%, #e5a63a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffe6ab;
  filter: drop-shadow(0 1px 6px rgba(255,180,60,0.35));
}
/* 特別イラスト枠（タップで拡大表示するボタン） */
.reward-illust-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin: 12px auto 8px;
  max-width: 100%;
  /* button 要素なので既定スタイルを打ち消す */
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  font: inherit;
  color: inherit;
}
.reward-illust-link:active .reward-illust { transform: scale(0.97); }
.illust-hint {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.05em;
  animation: hint-pulse 1.6s ease-in-out infinite;
}
.reward-card .illust-hint {
  color: #f0c479;
  text-shadow: 0 0 10px rgba(255,190,80,0.35);
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .illust-hint { animation: none; }
}
.reward-illust {
  aspect-ratio: 3/4;
  margin: 0 !important;
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: 16px;
  color: var(--accent-dark);
  font-size: 13px;
  padding: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-weight: 700;
  position: relative;
  box-shadow: 0 0 24px rgba(255,225,77,0.55);
  overflow: hidden;
  transition: transform 0.12s;
}
.reward-illust::before {
  content: "✦ SPECIAL ✦";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 3px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-weight: 900;
  white-space: nowrap;
}
.reward-illust .pose {
  font-family: "Courier New", monospace;
  font-size: 10px;
  margin-top: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  display: block;
}
.reward-micro {
  margin: 0 0 9px;
  text-align: center;
}
.reward-micro-main {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
  background: var(--yellow);
  padding: 4px 10px;
  border: 1.2px solid var(--ink);
  border-radius: 5px;
  letter-spacing: 0.02em;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.reward-micro-main b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 14px;
  padding: 0 2px;
  letter-spacing: 0;
}
/* ご褒美カード内は金基調のチップに差し替え */
.reward-card .reward-micro-main {
  background: linear-gradient(180deg, rgba(255,214,132,0.16), rgba(255,180,70,0.07));
  border: 1px solid rgba(255,208,116,0.5);
  box-shadow: none;
  color: #ffe9c2;
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: 0.04em;
}
.reward-card .reward-micro-main b {
  color: #ffd06a;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(255,190,80,0.55);
}
.reward-micro-note {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.reward-cta {
  width: 100%;
  padding: 14px 20px;
  box-shadow: 0 3px 0 #04993f, 0 0 26px rgba(6,199,85,0.35);
}
.reward-note {
  font-size: 10px;
  color: rgba(253,243,224,0.5);
  margin-top: 8px;
  line-height: 1.5;
}
/* コンプバッジクリックで再表示可能を示す */
.sticky-achv.max { cursor: pointer; }
.sticky-achv.max:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  .reward-card { animation: none; }
}

/* ===== Footer ===== */
footer {
  padding: 30px var(--pad);
  text-align: center; font-size: 11px; color: var(--muted);
  background: var(--paper);
}
footer a { color: var(--muted); margin: 0 6px; }

/* ===== 3大特典（豪華デザイン） ===== */
.s-perks-luxe {
  background: linear-gradient(180deg, var(--dark) 0%, #0d0612 100%);
  position: relative;
  overflow: hidden;
}
.s-perks-luxe::before,
.s-perks-luxe::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  pointer-events: none;
}
.s-perks-luxe::before {
  top: -80px; right: -80px;
  background: radial-gradient(circle, rgba(255,225,77,0.18), transparent 70%);
}
.s-perks-luxe::after {
  bottom: -100px; left: -80px;
  background: radial-gradient(circle, rgba(217,74,106,0.22), transparent 70%);
}
.s-perks-luxe > * { position: relative; z-index: 1; }
.s-perks-luxe .sec-num {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.s-perks-luxe .sec-title { color: #fff; }
.s-perks-luxe .sec-title::before,
.s-perks-luxe .sec-title::after { background: var(--yellow); }
.s-perks-luxe .sec-sub { color: rgba(255,255,255,0.85); }

/* 「3大特典付き」タイトル: 自然に目立つ（数字のみ控えめに強調） */
.perks-title-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.perks-title-num {
  color: var(--yellow);
  font-family: var(--font-num);
  font-size: 30px;
  letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(255,225,77,0.45);
  padding-right: 2px;
  line-height: 1;
}
.perks-title-rest {
  color: #fff;
  line-height: 1.1;
}

/* 上部「最大10万円分サポート」金箔ヒーロー */
.perk-hero {
  background: linear-gradient(135deg, #fff176 0%, #ffd700 30%, #ffa000 65%, #ff6f00 100%);
  background-size: 200% 200%;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 18px 16px 14px;
  text-align: center;
  margin-top: 8px;
  box-shadow:
    4px 4px 0 var(--yellow),
    7px 7px 0 var(--ink),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: hero-shine 4s ease-in-out infinite;
}
@keyframes hero-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.perk-hero::before {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.7) 50%, transparent 65%);
  animation: hero-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hero-sweep {
  0%, 55% { left: -120%; }
  100%    { left: 150%; }
}
.perk-hero > * { position: relative; z-index: 2; }
.perk-hero-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.25em;
  margin-bottom: 6px;
  color: var(--ink);
}
.perk-hero-amount {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.perk-hero-amount b {
  font-family: var(--font-num);
  font-size: 38px;
  color: var(--accent-dark);
  text-shadow: 2px 2px 0 rgba(255,255,255,0.55);
  padding: 0 4px;
  letter-spacing: -0.02em;
}
.perk-hero-note {
  font-size: 9px;
  color: rgba(0,0,0,0.55);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* 3大特典カード */
.perk-tier {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,225,77,0.4);
  border-radius: 14px;
  padding: 24px 16px 16px;
  margin-top: 28px;
  position: relative;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.perk-tier-num {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow) 0%, #ffa000 100%);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(255,225,77,0.55), 2px 2px 0 var(--ink);
  letter-spacing: -0.02em;
}
.perk-tier-tag {
  text-align: center;
  color: var(--yellow);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,225,77,0.4);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* 各特典タグ下の横長画像スロット */
.perk-tier-img {
  margin-bottom: 14px;
  aspect-ratio: 16 / 7;
  background: rgba(255,255,255,0.08);
  border: 1.5px dashed rgba(255,225,77,0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255,225,77,0.85);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 8px;
  letter-spacing: 0.02em;
}
.perk-tier-img::before {
  content: "◆ IMAGE ◆";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--ink);
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-weight: 900;
}
.perk-tier-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.perk-tier-img .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 9px;
  margin-top: 4px;
  color: rgba(255,225,77,0.7);
  font-weight: 700;
}
.perk-tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.perk-tier-list li {
  font-size: 14px;
  color: #fff;
  padding: 9px 0 9px 28px;
  position: relative;
  font-weight: 600;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.perk-tier-list li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 9px;
  color: var(--yellow);
  font-weight: 900;
  font-size: 14px;
}
.perk-tier-list li:last-child { border-bottom: none; }
.perk-tier > p {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255,255,255,0.94);
  margin-bottom: 10px;
  font-weight: 500;
}
.perk-tier-secret {
  background: rgba(255,225,77,0.15);
  padding: 10px 14px !important;
  border-radius: 8px;
  font-weight: 800 !important;
  color: var(--yellow) !important;
  text-align: center;
  margin: 14px 0 !important;
  border: 1.5px dashed var(--yellow);
  font-size: 13px !important;
  letter-spacing: 0.02em;
}
.perk-tier .perk-note {
  font-size: 10.5px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.65 !important;
  margin-bottom: 4px !important;
  font-weight: 400 !important;
}

.perk-closing {
  margin-top: 26px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,225,77,0.12), rgba(217,74,106,0.08));
  border-left: 4px solid var(--yellow);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.85;
  color: #fff;
  font-weight: 600;
}
.perk-closing b {
  color: var(--yellow);
  font-weight: 900;
  background: linear-gradient(transparent 60%, rgba(255,225,77,0.25) 60%);
  padding: 0 2px;
}

.perk-foot-note {
  margin-top: 16px;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .perk-hero { animation: none; }
  .perk-hero::before { animation: none; }
}

/* ===== 入寮環境スライダー（横スワイプ・スクロールスナップ） ===== */
.dorm-slider-wrap {
  position: relative;
  margin: 0 calc(var(--pad) * -1);
}
.dorm-list {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  padding: 6px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  gap: 0;
}
.dorm-list::-webkit-scrollbar { display: none; }
.dorm-card {
  flex: 0 0 calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 0 10px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}
.dorm-card .dorm-img {
  aspect-ratio: 4/3;
  background: var(--accent-soft);
  border: none;
  border-bottom: 1.5px dashed var(--accent);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: var(--accent-dark);
  font-size: 12px; text-align: center;
  padding: 20px;
  line-height: 1.5;
  position: relative;
  font-weight: 700;
  margin: 0;
}
.dorm-card .dorm-img::before {
  content: "◆ PHOTO ◆";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  z-index: 2;
}
.dorm-card .dorm-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.dorm-card .dorm-img .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 10px;
  margin-top: 6px;
  color: var(--accent-dark);
  font-weight: 700;
}
.dorm-card .dorm-meta { padding: 14px 14px 16px; }
.dorm-card .dorm-meta h3 {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.dorm-card .dorm-meta .spec {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.dorm-card .dorm-meta .spec span {
  font-size: 10px; padding: 4px 9px; background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px; font-weight: 700;
  color: var(--ink);
}


/* 左右オーバーレイナビ: 写真エリアの縦中央・半透明 */
.dorm-nav {
  position: absolute;
  /* photo aspect 4/3, photo height = card_width * 0.75. 中央 = card_width * 0.375 */
  top: calc((min(420px, 100vw) - 20px) * 0.375 + 6px);
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(0,0,0,0.55);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px;
  color: var(--ink);
  z-index: 10;
  transition: transform 0.18s cubic-bezier(.2,1.6,.3,1),
              box-shadow 0.15s ease,
              background 0.2s ease,
              opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dorm-nav.prev { left: 18px; }
.dorm-nav.next { right: 18px; }
.dorm-nav:hover {
  background: rgba(255,255,255,0.92);
}
.dorm-nav:active {
  transform: translateY(-50%) scale(0.94);
  background: rgba(255,255,255,0.95);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.dorm-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 説明テキスト・生活環境ブロック */
.dorm-explain {
  margin-top: 22px;
  padding: 0 2px;
}
.dorm-explain p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  font-weight: 500;
}
.dorm-explain p + p { margin-top: 14px; }
.dorm-explain b {
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  font-weight: 900;
  padding: 0 2px;
}

.dorm-env {
  margin-top: 22px;
  padding: 16px 16px 18px;
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.dorm-env-title {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dorm-env-title::before {
  content: "✓";
  color: #fff;
  background: var(--line-green);
  border: 1.5px solid var(--ink);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.dorm-env p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
  font-weight: 500;
}
/* 各カード下の横長画像スロット（縦が長くなりすぎない比率） */
.dorm-env-img {
  margin-top: 12px;
  aspect-ratio: 16 / 7;
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 8px;
  letter-spacing: 0.02em;
}
.dorm-env-img::before {
  content: "◆ IMAGE ◆";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.dorm-env-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.dorm-env-img .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 9px;
  margin-top: 4px;
  color: var(--accent-dark);
  font-weight: 700;
}

/* カウンター */
.dorm-slider-meta {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dorm-slider-meta b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 22px;
  padding: 0 3px;
}
.dorm-slider-meta .sep { color: var(--muted); margin: 0 4px; }
.dorm-slider-meta #dormTotal {
  font-family: var(--font-num);
  color: var(--ink);
  font-size: 14px;
}

/* ===== 応募後の流れ ===== */
.flow-list {
  position: relative;
}
.flow-list::before {
  content: ""; position: absolute; left: 22px; top: 20px; bottom: 20px;
  width: 2px; background: var(--accent); opacity: 0.3;
}
.flow-item {
  display: flex; gap: 14px; margin-bottom: 18px;
  position: relative;
}
.flow-num {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; background: #fff;
  border: 2.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 18px;
  position: relative; z-index: 1;
  transition: transform 0.4s cubic-bezier(.2,1.5,.3,1),
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}
.flow-num.done { background: var(--accent); color: #fff; }
/* スクロール反応: 現在見ているステップが赤くポップ */
.flow-num.active {
  background: var(--accent);
  color: #fff;
  transform: scale(1.18);
  box-shadow:
    0 0 0 4px rgba(217,74,106,0.18),
    0 0 16px rgba(217,74,106,0.5);
  border-color: var(--ink);
}

.flow-body {
  flex: 1; background: #fff; border: 1.5px solid var(--ink);
  border-radius: 10px; padding: 18px 16px 18px;
}
.flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.flow-head .step-tag {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1.2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  font-family: var(--font-num);
  flex-shrink: 0;
  line-height: 1;
}
.flow-head h3 {
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
}

/* 各STEP下の横長画像スロット */
.flow-img {
  margin-top: 0;
  margin-bottom: 12px;
  aspect-ratio: 16 / 7;
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 8px;
  letter-spacing: 0.02em;
}
.flow-img::before {
  content: "◆ IMAGE ◆";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.flow-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.flow-img .pose {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 9px;
  margin-top: 4px;
  color: var(--accent-dark);
  font-weight: 700;
}

.flow-body p {
  font-size: 13px;
  color: var(--ink);
  margin-top: 0;
  line-height: 1.75;
  font-weight: 500;
}

/* ===== 最後の一言 ===== */
.final-words {
  background: var(--ink); color: #fff;
  padding: 64px var(--pad);
  text-align: center;
  position: relative;
}
.final-words .quote {
  font-size: 22px; font-weight: 900; line-height: 1.6;
  letter-spacing: -0.01em;
}
.final-words .quote .yellow { color: var(--yellow); }
.final-words .author { margin-top: 20px; font-size: 12px; opacity: 0.7; }
.final-words .nav-slot {
  max-width: 120px; margin: 0 auto 24px;
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
}
.final-words .nav-slot::before { background: var(--yellow); color: var(--ink); }
.final-words .nav-slot .pose { color: rgba(255,255,255,0.6); }

/* ===== 電話ボタン ===== */
.btn-tel {
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.cta-dual { display: flex; flex-direction: column; gap: 10px; }
.cta-dual .or {
  text-align: center; font-size: 11px; color: var(--muted);
  position: relative; padding: 4px 0;
}
.cta-dual .or::before, .cta-dual .or::after {
  content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--line);
}
.cta-dual .or::before { left: 0; }
.cta-dual .or::after { right: 0; }
.tel-hours { font-size: 10px; color: var(--muted); text-align: center; margin-top: 4px; }

/* 【一時的】電話導線を全て非表示にする。
   LINEに一本化するための措置。復活させるときはこのルールを削除するだけでよい
   （HTML側の <a class="btn btn-tel"> は残してある）。
   JSで動的生成される分（診断結果・ガチャ・QR等）もまとめて効く */
.btn-tel,
.tel-hours { display: none !important; }

/* ===== メールフォーム ===== */
.mail-form {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 20px;
}
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px;
}
.form-row label .req {
  color: #fff; background: var(--accent);
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  margin-left: 6px; letter-spacing: 0.05em;
  vertical-align: middle;
}
.form-row label .req.opt {
  background: #b9b9b9; color: #fff;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px;
  border: 1.2px solid var(--ink); border-radius: 8px;
  font-family: inherit; font-size: 14px;
  background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.form-row textarea { resize: vertical; min-height: 80px; }
.form-row .hint { font-size: 10px; color: var(--muted); margin-top: 4px; }
.form-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.5;
  margin: 14px 0;
}
.form-check input { margin-top: 3px; flex-shrink: 0; }
.form-check a { color: var(--accent); }
.mail-form .btn { width: 100%; }
/* スパム対策のハニーポット：人間には見えない位置に飛ばす（display:noneはbotに読まれるため避ける） */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* 送信エラー表示 */
.form-error {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff2f2;
  border: 1.5px solid #e2554f;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #c0392b;
}
.form-error[hidden] { display: none; }
/* 必須未入力のハイライト */
.form-row input:user-invalid,
.form-row select:user-invalid,
.form-row textarea:user-invalid {
  border-color: #e2554f;
  background: #fff8f8;
}
.form-toggle {
  text-align: center; font-size: 12px; color: var(--muted);
  margin-bottom: 12px;
}
.form-toggle a { color: var(--accent); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ===== サンクスページ ===== */
.thanks {
  padding: 36px var(--pad) 28px;
  text-align: center;
}
.thanks-check {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--line-green);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  line-height: 62px;
  box-shadow: 0 4px 0 #04993f;
  animation: thanks-pop 0.5s cubic-bezier(.2,1.6,.3,1);
}
@keyframes thanks-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.thanks .eyebrow { display: block; margin-bottom: 10px; }
.thanks-title {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.thanks-lead {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 22px;
}
.thanks-illust {
  max-width: 190px;
  margin: 0 auto 24px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--yellow), 6px 6px 0 var(--ink);
}
.thanks-illust > img { display: block; width: 100%; height: auto; }
.thanks-hurry {
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.thanks-hurry-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent-dark);
  margin: 0 0 4px;
}
.thanks-hurry-sub {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.thanks-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.thanks-cta .btn { width: 100%; }
.thanks-micro { margin-bottom: 26px; }
.thanks-note {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.thanks-back {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
}

/* ===== プライバシーポリシー モーダル ===== */
.privacy-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.privacy-modal.is-open {
  display: flex;
  animation: privacyFadeIn 0.28s ease-out;
}
.privacy-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.privacy-modal-card {
  position: relative;
  background: #fff;
  width: 100%; max-width: 480px;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1.5px var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: privacyRise 0.32s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.privacy-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1.2px solid #ececec;
  background: #fafafa;
}
.privacy-modal-head h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.02em;
}
.privacy-modal-close {
  background: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 22px; line-height: 1; color: #888;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.privacy-modal-close:hover { background: #ececec; color: var(--ink); }
.privacy-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px 14px;
  font-size: 12.5px; line-height: 1.75; color: #333;
  scrollbar-width: thin;
}
.privacy-modal-body::-webkit-scrollbar { width: 6px; }
.privacy-modal-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.privacy-modal-body .privacy-lead {
  font-size: 12.5px; color: #444; margin: 0 0 14px;
}
.privacy-modal-body h4 {
  margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink);
  padding-bottom: 4px; border-bottom: 1.2px solid #f0f0f0;
}
.privacy-modal-body p { margin: 0 0 10px; }
.privacy-modal-body ul { margin: 0 0 10px; padding-left: 18px; }
.privacy-modal-body li { margin-bottom: 4px; }
.privacy-modal-body .privacy-update {
  margin-top: 18px; font-size: 11px; color: var(--muted); text-align: right;
}
.privacy-modal-foot {
  padding: 12px 18px 16px;
  border-top: 1.2px solid #ececec;
  background: #fafafa;
}
.privacy-modal-foot .btn { width: 100%; }
@keyframes privacyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes privacyRise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.privacy-locked { overflow: hidden; }

/* ===== 最終CTA: 手紙風デザイン ===== */
.final-letter {
  text-align: left;
  padding: 40px 16px 48px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 220, 170, 0.45), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(255, 200, 200, 0.35), transparent 42%),
    linear-gradient(180deg, #fff8ec 0%, #fffaf2 100%);
}
.final-letter .fav-summary { max-width: 460px; margin: 0 auto 24px; }

.letter-wrap {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.letter-stamp {
  position: absolute;
  top: -14px; right: 18px;
  background: #c0392b;
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px; letter-spacing: 0.18em;
  padding: 8px 12px;
  transform: rotate(7deg);
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  z-index: 3;
  border: 2px solid rgba(255,255,255,0.35);
}
.letter-stamp::before {
  content: ''; position: absolute; inset: -3px;
  border: 1px dashed rgba(192, 57, 43, 0.45);
  border-radius: 2px;
}

.letter-paper {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 30px, rgba(213, 196, 146, 0.35) 30px, rgba(213, 196, 146, 0.35) 31px),
    linear-gradient(180deg, #fffdf5 0%, #fff8e8 100%);
  border: 1.5px solid #d4c8a8;
  border-radius: 4px;
  padding: 30px 22px 22px;
  box-shadow:
    0 14px 32px rgba(120, 100, 60, 0.22),
    0 2px 6px rgba(120, 100, 60, 0.12);
}
.letter-paper::before {
  /* 角の折り返し */
  content: '';
  position: absolute; top: 0; right: 0;
  width: 32px; height: 32px;
  background: linear-gradient(225deg, #f5e9c8 0%, #f5e9c8 50%, transparent 50%);
  border-bottom-left-radius: 4px;
  box-shadow: -2px 2px 4px rgba(120, 100, 60, 0.15);
  z-index: 1;
}

.letter-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1.2px dashed #c8b88a;
  position: relative;
}
.letter-to-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; color: #c0392b;
  letter-spacing: 0.05em;
}
.letter-to-name {
  font-size: 13px; font-weight: 700; color: #5a4a2a;
  letter-spacing: 0.02em;
}

.letter-body {
  font-size: 14px; line-height: 1.95;
  color: #3a2f1c;
  letter-spacing: 0.02em;
}
.letter-body p { margin: 0 0 16px; }
.letter-body b {
  color: #c0392b; font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255, 218, 110, 0.65) 60%);
  padding: 0 2px;
}
.letter-body em {
  font-style: normal; font-weight: 700; color: #c0392b;
  font-size: 1.08em;
}

.letter-quote {
  text-align: center;
  font-size: 17px; font-weight: 700;
  color: #c0392b;
  background: rgba(255, 235, 180, 0.55);
  padding: 14px 12px;
  margin: 18px 0 6px;
  border-radius: 6px;
  border: 1.4px dashed #d4a017;
  position: relative;
}
.letter-quote-sub {
  text-align: center;
  font-size: 13px; color: #6b5a3a;
  margin: 0 0 18px;
}

.letter-list {
  list-style: none; padding: 14px 18px;
  margin: 18px 0;
  background: rgba(255, 245, 220, 0.55);
  border-left: 4px solid #d4a017;
  border-radius: 0 6px 6px 0;
}
.letter-list li {
  margin: 6px 0;
  font-size: 14px; line-height: 1.6;
  position: relative;
  padding-left: 24px;
}
.letter-list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; line-height: 18px;
  background: #d4a017; color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 11px; font-weight: 700;
  margin-top: 3px;
}
.letter-list li b {
  background: none; color: #c0392b;
}

.letter-strong {
  text-align: center;
  font-size: 16px; font-weight: 700;
  margin: 18px 0;
  color: #3a2f1c;
}

.letter-cta-line {
  text-align: center;
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  color: #fff;
  padding: 16px 12px;
  margin: 22px 0;
  border-radius: 8px;
  line-height: 1.55;
  box-shadow: 0 6px 14px rgba(192, 57, 43, 0.32);
}
.letter-cta-line b {
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.letter-cta-line em {
  color: #ffe58a;
  font-size: 1.15em;
  font-weight: 700;
}

.letter-future {
  background: rgba(255, 250, 230, 0.6);
  padding: 14px 14px;
  border-radius: 6px;
  border: 1px dashed #d4c8a8;
  font-size: 13.5px;
  line-height: 2;
}
.letter-future b {
  color: #3a2f1c;
  background: linear-gradient(transparent 60%, rgba(255, 218, 110, 0.75) 60%);
}

.letter-num-line {
  text-align: center;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1.4px dashed #c8b88a;
  border-bottom: 1.4px dashed #c8b88a;
  font-size: 13.5px;
  line-height: 1.8;
}
.letter-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px; color: #c0392b;
  letter-spacing: 0.02em;
  margin: 0 2px;
  text-shadow: 0 2px 4px rgba(192, 57, 43, 0.12);
}
.letter-num-unit { font-weight: 700; color: #5a4a2a; }

.letter-end {
  text-align: center;
  font-size: 19px; font-weight: 700;
  color: #c0392b;
  margin: 24px 0 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.letter-sign {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1.2px dashed #c8b88a;
}
.letter-sign .letter-avatar {
  width: 52px !important; height: 52px !important;
  flex-shrink: 0;
  font-size: 9px !important;
  border: 2px solid #d4a017;
  background: #fffdf5;
}
.letter-sign-text {
  display: flex; flex-direction: column; gap: 2px;
}
.letter-from-label {
  font-family: 'Archivo Black', sans-serif;
  color: #c0392b;
  font-size: 11px; letter-spacing: 0.1em;
}
.letter-from-name {
  font-weight: 700; color: #3a2f1c;
  font-size: 16px; letter-spacing: 0.05em;
}
.letter-from-sub {
  color: #8b7a4a; font-size: 11px; letter-spacing: 0.08em;
}

.letter-actions {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.letter-actions .btn { width: 100%; }
.letter-actions .tel-hours { margin-top: 2px; text-align: center; }

/* 旧 .final 内のh2/cta-cardは消えたが、念のため削除に巻き込まれた方の影響をリセット */
.final-letter h2 { display: none; }

/* ===== 未達成時の説明パネル ===== */
.finish-encourage {
  margin-top: 22px;
  animation: feIn 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.finish-encourage[hidden] { display: none; }
.fe-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: left;
  color: var(--ink);
}
.fe-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1.4px dashed #ddd;
}
.fe-emoji {
  font-size: 24px;
  flex-shrink: 0;
}
.fe-title {
  font-size: 14px; font-weight: 800; margin: 0;
  flex: 1;
  line-height: 1.4;
}
.fe-title b {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 24px; padding: 0 4px;
  line-height: 1;
}
.fe-text {
  font-size: 13px; line-height: 1.85;
  margin: 0 0 12px;
}
.fe-text b { color: var(--accent); font-weight: 800; }
.fe-text em {
  font-style: normal; font-weight: 800; color: var(--ink);
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.55) 60%);
  padding: 0 2px;
}
.finish-pending-list {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.finish-pending-list li a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: var(--paper);
  border: 1.2px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px; font-weight: 700;
  transition: background 0.15s, transform 0.15s;
}
.finish-pending-list li a:hover { background: #ffe7e3; }
.finish-pending-list li a:active { transform: scale(0.98); }
.fpl-icon { font-size: 18px; flex-shrink: 0; }
.fpl-text { flex: 1; }
.fpl-go {
  background: var(--accent); color: #fff;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
@keyframes feIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== フローティング遷移ボタン（右側固定 / 初期は非表示） ===== */
.floating-actions {
  position: fixed;
  right: 8px;
  bottom: 110px; /* 追尾バー＋アチーブバッジに被らないクリアランス */
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.floating-actions.is-active {
  display: flex;
  animation: faContainerIn 0.4s ease-out;
}
.floating-actions[hidden],
.floating-actions.is-empty {
  display: none;
}
@keyframes faContainerIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.floating-action {
  pointer-events: auto;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  padding: 4px 10px 4px 4px;
  font-size: 10.5px; font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex; align-items: center; gap: 5px;
  animation: faPulse 2.4s ease-in-out infinite;
  transition: opacity 0.4s, transform 0.4s;
}
.floating-action[hidden] { display: none; }
.floating-action:active { transform: scale(0.94); }
.floating-action.hide-anim {
  opacity: 0;
  transform: translateX(50px);
}
.floating-action .fa-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.floating-action-gacha .fa-icon {
  background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
}
@keyframes faPulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}
.floating-actions.attention .floating-action {
  animation: faShake 0.5s ease-in-out 3;
}
@keyframes faShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(2px); }
}

/* ===== 特典を受け取るバー（早押し合図ルート用 / 追尾バーと差し替え） ===== */
.claim-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container);
  z-index: 110; /* sticky-bar(100)より上 */
  background: #fff;
  border-top: 2px solid var(--ink);
  padding: 10px 12px 12px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: claimIn 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.claim-cta[hidden] { display: none; }
.claim-cta-sub {
  font-size: 10px; font-weight: 800;
  color: #fff;
  background: var(--ink);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.claim-cta-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #ffd54a 0%, #ff7a1a 100%);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 13px 18px;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(255, 122, 26, 0.45), 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
  animation: claimGlow 1.6s ease-in-out infinite;
}
.claim-cta-btn:active { transform: scale(0.97); }
.claim-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.claim-text {
  font-size: 15px; flex-shrink: 0;
  white-space: nowrap;
}
.claim-arr {
  background: #fff; color: var(--accent);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
@keyframes claimIn {
  from { opacity: 0; transform: translate(-50%, 30px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes claimGlow {
  0%, 100% { box-shadow: 0 6px 14px rgba(255, 122, 26, 0.45), 3px 3px 0 var(--ink); }
  50%      { box-shadow: 0 10px 24px rgba(255, 122, 26, 0.65), 3px 3px 0 var(--ink); }
}

/* claim出現中は追尾バーを隠す */
body.claim-active .sticky-bar { display: none !important; }

/* 説明パネルが「特典受け取り」モードに切り替わった時 */
.fe-card.fe-card-claim {
  background: linear-gradient(135deg, #fff8e0 0%, #ffe9c2 100%);
  border-color: var(--ink);
}
.fe-card.fe-card-claim .fe-emoji { font-size: 28px; }
.fe-card.fe-card-claim .fe-title { color: var(--accent); }

/* ===== プレゼント再表示用の丸ボタン（モーダルを閉じた後に表示） ===== */
.reopen-reward {
  position: fixed;
  right: 12px;
  bottom: 80px; /* 追尾バーの上 */
  z-index: 95;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd54a 0%, #ff7a1a 100%);
  border: 2.5px solid var(--ink);
  box-shadow: 0 6px 16px rgba(255, 122, 26, 0.45), 3px 3px 0 var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 26px; line-height: 1;
  animation: reopenPulse 1.8s ease-in-out infinite, reopenIn 0.4s ease-out;
  transition: transform 0.15s;
}
.reopen-reward[hidden] { display: none; }
.reopen-reward:active { transform: scale(0.92); }
.reopen-emoji {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.reopen-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #fff;
  animation: reopenDotPulse 1.4s ease-in-out infinite;
}
@keyframes reopenPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(255, 122, 26, 0.40), 3px 3px 0 var(--ink); }
  50%      { box-shadow: 0 10px 22px rgba(255, 122, 26, 0.62), 3px 3px 0 var(--ink); }
}
@keyframes reopenDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}
@keyframes reopenIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== ガチャ: ボタン横並び（1回 / N連） ===== */
.gacha-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin: 18px auto 8px;
}
/* 横並び時は #gachaBtn の max-width / margin を打ち消して flex に合わせる */
.gacha-btn-row #gachaBtn,
.gacha-btn-row .gacha-btn-batch {
  flex: 1 1 0;
  width: 50%;
  max-width: none;
  margin: 0;
  padding: 14px 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  font-weight: 900;
}
/* 「2連回す」用スタイル（既存の#gachaBtnのきらびやかな金グラデ＋アニメと揃える） */
.gacha-btn-row .gacha-btn-batch {
  display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff176 0%, #ffd600 30%, #ffa000 65%, #ff6f00 100%);
  background-size: 220% 220%;
  color: var(--ink);
  box-shadow:
    0 6px 0 var(--ink),
    0 0 20px rgba(255,215,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: gacha-btn-shine 3s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.gacha-btn-row .gacha-btn-batch::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.8) 50%,
    transparent 65%,
    transparent 100%);
  animation: gacha-btn-sweep 3.2s ease-in-out infinite 0.6s;
  pointer-events: none;
  z-index: 1;
}
.gacha-btn-row .gacha-btn-batch:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 var(--ink),
    0 0 10px rgba(255,215,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation-play-state: paused;
}
.gacha-btn-batch[hidden] { display: none; }

/* ===== ガチャ: 単発結果のイラスト押下感（拡大可能を示す） ===== */
.gacha-result .gacha-illust {
  cursor: zoom-in;
  transition: transform 0.18s;
}
.gacha-result .gacha-illust:active { transform: scale(0.97); }
.gacha-result .gacha-illust::after {
  content: '🔍';
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 999px;
  pointer-events: none;
}

/* ===== ガチャ: まとめて結果（グリッド） ===== */
.gacha-batch-result {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 14px;
}
.batch-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 1.5px solid var(--yellow);
  border-radius: 10px;
  color: #fff;
}
.batch-header .batch-count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--yellow);
}
.batch-header .batch-summary {
  font-size: 11px; font-weight: 700;
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}
.batch-header .bs-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  letter-spacing: 0.04em;
}
.batch-header .bs-pill.ssr { background: linear-gradient(135deg, #ffe082 0%, #ffd54a 100%); color: #1a1a1a; box-shadow: 0 0 8px rgba(255, 213, 74, 0.6); }
.batch-header .bs-pill.sr  { background: linear-gradient(135deg, #d4b3ff 0%, #b388f8 100%); color: #fff; box-shadow: 0 0 6px rgba(179, 136, 248, 0.45); }
.batch-header .bs-pill.r   { background: linear-gradient(135deg, #6db5ff 0%, #1976d2 100%); color: #fff; }
.batch-header .bs-pill.n   { background: rgba(200, 200, 200, 0.85); color: #1a1a1a; }

.batch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.batch-card {
  position: relative;
  background: #fff;
  border: 1.8px solid var(--ink);
  border-radius: 10px;
  padding: 6px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: zoom-in;
  overflow: hidden;
  animation: batchCardIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 0.18s;
}
.batch-card:active { transform: scale(0.96); }
.batch-rarity {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  align-self: flex-start;
}
.batch-illust {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--paper);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--muted);
  position: relative;
  overflow: hidden;
}
.batch-illust .pose {
  font-size: 8px; color: var(--muted); padding: 0 4px;
  text-align: center; line-height: 1.3;
}
.batch-stars {
  font-size: 10px; color: #c0392b;
  letter-spacing: 1px;
}
.batch-zoom-hint {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff; font-size: 9px;
  padding: 2px 5px; border-radius: 999px;
  pointer-events: none;
}

/* Rarity tint */
.batch-card.rarity-n  .batch-rarity { background: #888; }
.batch-card.rarity-r  .batch-rarity { background: #1976d2; }
.batch-card.rarity-sr .batch-rarity { background: #8e44ad; }
.batch-card.rarity-ssr .batch-rarity { background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%); }

/* SR / SSR 特別演出 */
.batch-card.rarity-sr {
  border-color: #8e44ad;
  background: linear-gradient(135deg, #f6edff 0%, #e3d2ff 100%);
  box-shadow: 0 4px 12px rgba(142, 68, 173, 0.35);
  animation: batchCardIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             srPulse 2s ease-in-out infinite 0.6s;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.batch-card.rarity-ssr {
  border-color: #d4a017;
  background: linear-gradient(135deg, #fff7c2 0%, #ffd54a 100%);
  box-shadow: 0 4px 14px rgba(255, 213, 74, 0.55), 0 0 0 2px rgba(255, 213, 74, 0.4);
  animation: batchCardIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             ssrPulse 1.6s ease-in-out infinite 0.6s;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.batch-sparkles {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  pointer-events: none;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.95), 0 0 16px rgba(255, 215, 0, 0.6);
  animation: sparkleFloat 2.4s ease-in-out infinite;
  z-index: 2;
}
.batch-card.rarity-sr .batch-sparkles {
  color: #d4b3ff;
  text-shadow: 0 0 8px rgba(180, 130, 255, 0.95);
}
.batch-card.rarity-ssr::after {
  /* Shimmer overlay */
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 80%; height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%);
  transform: skewX(-20deg);
  animation: ssrShimmer 2.4s linear infinite 0.8s;
  pointer-events: none;
  z-index: 1;
}

@keyframes batchCardIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes srPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(142, 68, 173, 0.35); }
  50%      { box-shadow: 0 4px 20px rgba(142, 68, 173, 0.65); }
}
@keyframes ssrPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 213, 74, 0.55), 0 0 0 2px rgba(255, 213, 74, 0.4); }
  50%      { box-shadow: 0 6px 22px rgba(255, 213, 74, 0.85), 0 0 0 3px rgba(255, 213, 74, 0.65); }
}
@keyframes ssrShimmer {
  0%   { left: -150%; }
  100% { left: 150%; }
}
@keyframes sparkleFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 0.95; }
  50%      { transform: translate(-50%, -55%) scale(1.15) rotate(15deg); opacity: 1; }
}

.batch-ctas {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px;
}
.batch-ctas .btn { width: 100%; }

/* ===== ガチャ: ライトボックス（拡大表示） ===== */
.gacha-lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.gacha-lightbox[hidden] { display: none !important; }
.gacha-lightbox:not([hidden]) {
  display: flex;
  animation: glFadeIn 0.3s ease-out;
}
.gl-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gl-card {
  position: relative;
  background: transparent;
  width: 100%; max-width: 360px;
  max-height: 90vh;
  border-radius: 16px;
  overflow: visible;
  animation: glRise 0.36s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.gl-close {
  position: absolute; top: -48px; right: 0;
  z-index: 3;
  background: rgba(0,0,0,0.7); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gl-content { display: block; }
.gl-result {
  display: flex; flex-direction: column; align-items: center;
  padding: 0;
  gap: 12px;
  position: relative;
}
.gl-result .rarity-badge {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
}
/* 画像モード時は外側のSSRバッジは画像内バッジと被るので非表示 */
.gl-result:has(.gl-illust.has-photo) .rarity-badge,
.gl-result:has(.gl-illust.has-photo) .gl-sparkles {
  display: none;
}
.gl-result.rarity-ssr .rarity-badge {
  background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
  box-shadow: 0 0 12px rgba(255, 213, 74, 0.6);
}
.gl-result.rarity-sr .rarity-badge {
  background: linear-gradient(135deg, #b388f8 0%, #8e44ad 100%);
}
.gl-result.rarity-r .rarity-badge { background: #1976d2; }
.gl-result.rarity-n .rarity-badge { background: #888; }
.gl-illust {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-size: 12px; color: var(--muted);
  text-align: center;
  overflow: hidden;
}
.gl-result.rarity-ssr .gl-illust {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd54a 100%);
  border-color: #d4a017;
  box-shadow: 0 0 24px rgba(255, 213, 74, 0.55) inset;
}
.gl-result.rarity-sr .gl-illust {
  background: linear-gradient(135deg, #f6edff 0%, #e3d2ff 100%);
  border-color: #8e44ad;
}
.gl-sparkles {
  position: absolute; top: -6px;
  font-size: 18px; color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.85);
  letter-spacing: 0.4em;
  animation: sparkleFloat 2.4s ease-in-out infinite;
}
.gl-hint {
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-align: center;
}
.gl-result .btn { width: 100%; }
@keyframes glFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glRise {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.gacha-locked { overflow: hidden; }


@keyframes dimmerIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* charging phase: カプセルが「ためる」 */
.gacha-stage.charging .gacha-capsule {
  animation: capsuleCharge 0.35s cubic-bezier(0.3, 1.4, 0.4, 1);
}
@keyframes capsuleCharge {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.85) rotate(-3deg); filter: brightness(0.85); }
  100% { transform: scale(1.15) rotate(0); filter: brightness(1.15); }
}

/* かつては演出がこのステージ内で完結していたため z-index:200 で前面に出していたが、
   今は演出が全画面レイヤー(.gacha-cinema / z-index:300)に移ったので前面に出す必要がない。
   200 のままだと結果カードが追尾バー(100)やフローティングボタン(90)に覆いかぶさる */
.gacha-stage.gacha-batch-mode {
  position: relative;
  z-index: 1;
}

/* レア確定検出時の追加演出（スピン中にレア確定がわかる） */
.gacha-stage.rare-detect {
  animation: rareDetectPulse 0.45s ease-in-out infinite alternate;
}
@keyframes rareDetectPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 32px 6px rgba(255, 215, 0, 0.85), 0 0 48px 12px rgba(255, 122, 26, 0.55); }
}
.gacha-stage.rare-detect .gacha-capsule {
  animation: capsuleRareSpin 0.6s ease-in-out infinite;
}
@keyframes capsuleRareSpin {
  0%, 100% { transform: scale(1.1) rotate(0); filter: drop-shadow(0 0 6px gold); }
  50%      { transform: scale(1.25) rotate(360deg); filter: drop-shadow(0 0 16px gold); }
}








@keyframes rareRays {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.4); }
  20%  { opacity: 0.65; }
  100% { opacity: 0; transform: rotate(60deg) scale(1.4); }
}


@keyframes rareOverlayFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rareBurstScale {
  0%   { transform: scale(0.25); opacity: 0; }
  18%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes rareTextPop {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  18%  { transform: scale(1.35) rotate(3deg); opacity: 1; }
  55%  { transform: scale(1) rotate(-1deg); opacity: 1; }
  85%  { transform: scale(1.05) rotate(0); opacity: 1; }
  100% { transform: scale(1.25) rotate(0); opacity: 0; }
}

/* バッチカードのステイガーを長くしてドラマ性UP */
.batch-card {
  animation: batchCardIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards !important;
  animation-delay: calc(var(--i, 0) * 150ms) !important;
}
.batch-card.batch-card-high {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) backwards !important;
  animation-delay: calc(var(--i, 0) * 150ms) !important;
}
.batch-card.rarity-sr {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) backwards,
             srPulse 2s ease-in-out infinite calc(var(--i, 0) * 150ms + 800ms) !important;
}
.batch-card.rarity-ssr {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) backwards,
             ssrPulse 1.6s ease-in-out infinite calc(var(--i, 0) * 150ms + 800ms) !important;
}

@keyframes batchHighIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.4) rotate(-6deg); }
  50%  { opacity: 1; transform: translateY(-12px) scale(1.18) rotate(2deg); }
  75%  { transform: translateY(4px) scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* 高レアカード登場時のバースト（スパーク発射） */
.batch-card-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd54a 40%, transparent 70%);
  pointer-events: none;
  z-index: 3;
  animation: cardBurst 0.9s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 150ms + 350ms);
}
.batch-card.rarity-sr .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #d4b3ff 40%, transparent 70%);
}
@keyframes cardBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; box-shadow: 0 0 0 0 rgba(255,215,0,0.95); }
  50%  { transform: translate(-50%, -50%) scale(8); opacity: 0.8; box-shadow: 0 0 30px 12px rgba(255,215,0,0.7); }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; box-shadow: 0 0 60px 30px rgba(255,215,0,0); }
}








/* ===== バッチカード: 個別演出 リング + バースト（全レアリティ対応・カードサイズに収まる） ===== */
.batch-card { isolation: isolate; }

.batch-card-ring {
  position: absolute; inset: -3px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 4;
  animation: cardRingShow 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 150ms + 200ms);
}
.batch-card.rarity-n .batch-card-ring {
  border: 2px solid rgba(180, 180, 180, 0.9);
  box-shadow: 0 0 6px rgba(180, 180, 180, 0.45);
}
.batch-card.rarity-r .batch-card-ring {
  border: 2.5px solid #4d9eff;
  box-shadow: 0 0 14px rgba(77, 158, 255, 0.85);
}
.batch-card.rarity-sr .batch-card-ring {
  border: 3px solid #b388f8;
  box-shadow: 0 0 22px rgba(179, 136, 248, 0.95);
}
.batch-card.rarity-ssr .batch-card-ring {
  border: 3.5px solid #ffd54a;
  box-shadow: 0 0 30px rgba(255, 213, 74, 1);
}
@keyframes cardRingShow {
  0%   { opacity: 0; transform: scale(0.55); }
  35%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* バースト: 中心から放射状の光（カードサイズに収まる） */
.batch-card-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: cardBurstShow 0.95s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 150ms + 320ms);
}
.batch-card.rarity-n .batch-card-burst {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(200,200,200,0.55) 45%, transparent 75%);
}
.batch-card.rarity-r .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #b6dcff 35%, #4d9eff 60%, transparent 78%);
}
.batch-card.rarity-sr .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #e3d2ff 35%, #b388f8 60%, transparent 78%);
}
.batch-card.rarity-ssr .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #fff7c2 28%, #ffd54a 55%, transparent 78%);
}
@keyframes cardBurstShow {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(7); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(13); opacity: 0; }
}

/* ===== バッチ演出強化版（しょぼく感を解消） ===== */

/* スタッガーを少し長めに、リングをもっと大胆に拡張 */
.batch-card {
  animation-delay: calc(var(--i, 0) * 200ms) !important;
}
.batch-card.batch-card-high {
  animation-delay: calc(var(--i, 0) * 200ms) !important;
}
.batch-card.rarity-sr,
.batch-card.rarity-ssr {
  animation-delay: calc(var(--i, 0) * 200ms),
                   calc(var(--i, 0) * 200ms + 800ms) !important;
}

.batch-card-ring {
  animation-delay: calc(var(--i, 0) * 200ms + 200ms) !important;
}
.batch-card-burst {
  animation-delay: calc(var(--i, 0) * 200ms + 320ms) !important;
}

/* リングをもっと大きく派手に拡張 */
@keyframes cardRingShow {
  0%   { opacity: 0; transform: scale(0.4); }
  20%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 0.6; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(2.3); }
}

/* バーストもサイズアップ */
@keyframes cardBurstShow {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(7); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* 高レアカードに「外側のオーラリング」追加（カードを越えてふわっと拡散） */
.batch-card.batch-card-high::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: cardHaloShow 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 200ms + 280ms);
  transform: translate(-50%, -50%);
}
.batch-card.rarity-sr::before {
  background: radial-gradient(ellipse at center,
    rgba(179, 136, 248, 0.55) 0%,
    rgba(179, 136, 248, 0.25) 40%,
    transparent 70%);
  box-shadow: 0 0 32px 8px rgba(179, 136, 248, 0.5);
}
.batch-card.rarity-ssr::before {
  background: radial-gradient(ellipse at center,
    rgba(255, 213, 74, 0.65) 0%,
    rgba(255, 213, 74, 0.35) 40%,
    transparent 70%);
  box-shadow: 0 0 40px 10px rgba(255, 213, 74, 0.6);
}
@keyframes cardHaloShow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

/* 高レアカード本体に「パンチ入場」（拡大→収束） */
@keyframes batchHighIn {
  0%   { opacity: 0; transform: translateY(50px) scale(0.3) rotate(-8deg); filter: blur(4px); }
  35%  { opacity: 1; transform: translateY(-18px) scale(1.35) rotate(4deg); filter: blur(0); }
  55%  { transform: translateY(8px) scale(0.93) rotate(-2deg); }
  75%  { transform: translateY(-3px) scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* 通常カードも少しドラマ性UP */
@keyframes batchCardIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


@keyframes dimmerFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* バッチサマリーピルにスケール強調 */
.batch-header .bs-pill.ssr,
.batch-header .bs-pill.sr {
  animation: pillPulse 1.4s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}





@keyframes rareBuildPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.75; }
  50%      { transform: scale(1.45); opacity: 1; }
}
@keyframes rareBuildFade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* シーケンシャル時: カードはJSが.batch-card-revealedを付けるまで非表示 */
.gacha-batch-result.is-sequential .batch-card {
  opacity: 0;
  visibility: hidden;
  animation: none !important;
}
.gacha-batch-result.is-sequential .batch-card .batch-card-ring,
.gacha-batch-result.is-sequential .batch-card .batch-card-burst {
  animation: none !important;
}
.gacha-batch-result.is-sequential .batch-card.batch-card-high::before {
  animation: none !important;
}

/* シーケンシャル: revealed されたカードだけ通常通り登場 */
.gacha-batch-result.is-sequential .batch-card.batch-card-revealed {
  opacity: 1;
  visibility: visible;
  animation: batchCardIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards !important;
  animation-delay: 0ms !important;
}
.gacha-batch-result.is-sequential .batch-card.batch-card-revealed.batch-card-high {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) forwards !important;
  animation-delay: 0ms !important;
}
.gacha-batch-result.is-sequential .batch-card.rarity-sr.batch-card-revealed {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) forwards,
             srPulse 2s ease-in-out infinite 0.7s !important;
  animation-delay: 0ms, 0ms !important;
}
.gacha-batch-result.is-sequential .batch-card.rarity-ssr.batch-card-revealed {
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) forwards,
             ssrPulse 1.6s ease-in-out infinite 0.6s !important;
  animation-delay: 0ms, 0ms !important;
}
.gacha-batch-result.is-sequential .batch-card.batch-card-revealed .batch-card-ring {
  animation: cardRingShow 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards !important;
  animation-delay: 220ms !important;
}
.gacha-batch-result.is-sequential .batch-card.batch-card-revealed .batch-card-burst {
  animation: cardBurstShow 0.95s ease-out forwards !important;
  animation-delay: 350ms !important;
}
.gacha-batch-result.is-sequential .batch-card.batch-card-revealed.batch-card-high::before {
  animation: cardHaloShow 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards !important;
  animation-delay: 280ms !important;
}

/* シーケンシャル時: CTAボタン群は最後に登場 */
.gacha-batch-result.is-sequential .batch-ctas {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease;
}
.gacha-batch-result.is-sequential.batch-finalized .batch-ctas {
  opacity: 1; visibility: visible;
}

/* ===== ガチャコレクション（後から見れる一覧） ===== */
.gacha-collection {
  margin: 18px auto 0;
  padding: 12px;
  max-width: 320px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
}
.gc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  color: #fff;
}
.gc-title {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.05em;
}
.gc-count {
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.gc-count b {
  font-family: 'Archivo Black', sans-serif;
  color: var(--yellow);
  font-size: 17px;
  line-height: 1;
}
.gc-count i {
  font-style: normal; opacity: 0.55;
  font-size: 11px;
}
.gc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  min-height: 50px;
}
.gc-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  padding: 12px 0;
  margin: 0;
  font-weight: 600;
}
.gc-mini {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  position: relative;
  font-size: 9px;
  color: var(--muted);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: gcMiniIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
.gc-mini:hover { transform: scale(1.06); }
.gc-mini:active { transform: scale(0.95); }
.gc-mini.rarity-n  { border-color: #888; background: #f5f5f5; }
.gc-mini.rarity-r  { border-color: #1976d2; background: #e3f2fd; box-shadow: 0 0 6px rgba(25, 118, 210, 0.3); }
.gc-mini.rarity-sr {
  border-color: #8e44ad;
  background: linear-gradient(135deg, #f6edff 0%, #e3d2ff 100%);
  box-shadow: 0 0 8px rgba(142, 68, 173, 0.55);
}
.gc-mini.rarity-ssr {
  border-color: #d4a017;
  background: linear-gradient(135deg, #fff7c2 0%, #ffd54a 100%);
  box-shadow: 0 0 12px rgba(255, 213, 74, 0.7);
  animation: gcMiniIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             ssrPulse 1.6s ease-in-out infinite 0.5s;
}
.gc-mini-rarity {
  position: absolute;
  top: 2px; left: 2px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 7px;
  background: var(--ink); color: #fff;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  z-index: 2;
}
.gc-mini.rarity-n  .gc-mini-rarity { background: #888; }
.gc-mini.rarity-r  .gc-mini-rarity { background: #1976d2; }
.gc-mini.rarity-sr .gc-mini-rarity { background: #8e44ad; }
.gc-mini.rarity-ssr .gc-mini-rarity {
  background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
}
.gc-mini-id {
  font-size: 8px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  padding: 0 2px;
  word-break: break-all;
}
.gc-note {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 8px 0 0;
}
@keyframes gcMiniIn {
  0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ===== レアリティ色をタグの配色に統一（オーバーレイ／カード／コレクション／ライトボックス） ===== */
:root {
  --rar-ssr-1: #ffd700; /* gold */
  --rar-ssr-2: #ff6f00; /* orange */
  --rar-ssr-3: #e91e63; /* pink/red */
  --rar-sr-1:  #9d4edd; /* purple */
  --rar-sr-2:  #ff6ec7; /* pink */
  --rar-r-1:   #1e88e5; /* blue */
  --rar-r-2:   #26c6da; /* cyan */
  --rar-n-1:   #546e7a; /* dark gray */
  --rar-n-2:   #90a4ae; /* light gray */
}
















/* === バッチカード本体（タグ色準拠＋持続グロー） === */
.batch-card.rarity-n {
  border-color: var(--rar-n-1);
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e6ea 100%);
}
.batch-card.rarity-r {
  border-color: var(--rar-r-1);
  background: linear-gradient(135deg, #e3f2fd 0%, #b3e5fc 100%);
  box-shadow: 0 4px 12px rgba(30, 136, 229, 0.35);
  animation: batchCardIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             rPulse 2.4s ease-in-out infinite 0.6s !important;
}
.batch-card.rarity-sr {
  border-color: var(--rar-sr-1);
  background: linear-gradient(135deg, #f3e5ff 0%, #ffd9eb 100%);
  box-shadow: 0 4px 14px rgba(157, 78, 221, 0.55);
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) backwards,
             srPulse 2s ease-in-out infinite 0.7s !important;
}
.batch-card.rarity-ssr {
  border-color: var(--rar-ssr-1);
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 45%, #ff6f00 100%);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.7),
              0 0 0 2px rgba(255, 215, 0, 0.4);
  animation: batchHighIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) backwards,
             ssrPulse 1.6s ease-in-out infinite 0.6s !important;
}
.batch-card.rarity-n .batch-rarity { background: var(--rar-n-1); }
.batch-card.rarity-r .batch-rarity { background: var(--rar-r-1); }
.batch-card.rarity-sr .batch-rarity { background: var(--rar-sr-1); }
.batch-card.rarity-ssr .batch-rarity {
  background: linear-gradient(135deg, var(--rar-ssr-1) 0%, var(--rar-ssr-2) 60%, var(--rar-ssr-3) 100%);
  color: #1a1a1a;
}

/* バッチカードの個別演出色も統一 */
.batch-card.rarity-n .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, var(--rar-n-2) 50%, transparent 78%) !important;
}
.batch-card.rarity-r .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #b3e5fc 30%, var(--rar-r-1) 60%, transparent 80%) !important;
}
.batch-card.rarity-sr .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #f5e9ff 30%, var(--rar-sr-1) 58%, var(--rar-sr-2) 75%, transparent 82%) !important;
}
.batch-card.rarity-ssr .batch-card-burst {
  background: radial-gradient(circle, #fff 0%, #fff7c2 22%, var(--rar-ssr-1) 50%, var(--rar-ssr-2) 70%, transparent 84%) !important;
}
.batch-card.rarity-n .batch-card-ring {
  border: 1.8px solid var(--rar-n-2);
  box-shadow: 0 0 6px rgba(144, 164, 174, 0.45);
}
.batch-card.rarity-r .batch-card-ring {
  border: 2.5px solid var(--rar-r-1);
  box-shadow: 0 0 14px rgba(30, 136, 229, 0.85);
}
.batch-card.rarity-sr .batch-card-ring {
  border: 3px solid var(--rar-sr-1);
  box-shadow: 0 0 22px rgba(157, 78, 221, 0.9);
}
.batch-card.rarity-ssr .batch-card-ring {
  border: 3.5px solid var(--rar-ssr-1);
  box-shadow: 0 0 30px rgba(255, 215, 0, 1),
              0 0 50px rgba(233, 30, 99, 0.5);
}
.batch-card.rarity-sr::before {
  background: radial-gradient(ellipse at center,
    rgba(157, 78, 221, 0.55) 0%,
    rgba(255, 110, 199, 0.3) 40%,
    transparent 70%) !important;
  box-shadow: 0 0 32px 8px rgba(157, 78, 221, 0.5) !important;
}
.batch-card.rarity-ssr::before {
  background: radial-gradient(ellipse at center,
    rgba(255, 215, 0, 0.75) 0%,
    rgba(255, 111, 0, 0.5) 35%,
    rgba(233, 30, 99, 0.3) 55%,
    transparent 75%) !important;
  box-shadow: 0 0 40px 10px rgba(255, 215, 0, 0.65) !important;
}

/* === 持続グローのキーフレームを差し替え（タグ色 + 段階的強度） === */
@keyframes rPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(30, 136, 229, 0.32); }
  50%      { box-shadow: 0 6px 18px rgba(30, 136, 229, 0.6); }
}
@keyframes srPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(157, 78, 221, 0.45); }
  50%      { box-shadow: 0 6px 22px rgba(157, 78, 221, 0.8),
                         0 0 12px rgba(255, 110, 199, 0.45); }
}
@keyframes ssrPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255, 215, 0, 0.55),
                         0 0 0 2px rgba(255, 215, 0, 0.4),
                         0 0 24px rgba(233, 30, 99, 0.25); }
  50%      { box-shadow: 0 6px 24px rgba(255, 215, 0, 0.95),
                         0 0 0 3px rgba(255, 215, 0, 0.7),
                         0 0 36px rgba(233, 30, 99, 0.55); }
}

/* === コレクション ミニカード（全レア光らせる、強度は段階的） === */
.gc-mini.rarity-n {
  border-color: var(--rar-n-1);
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e6ea 100%);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.gc-mini.rarity-r {
  border-color: var(--rar-r-1);
  background: linear-gradient(135deg, #e3f2fd 0%, #b3e5fc 100%);
  box-shadow: 0 0 8px rgba(30, 136, 229, 0.55);
  animation: gcMiniIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             gcRPulse 2.6s ease-in-out infinite 0.5s !important;
}
.gc-mini.rarity-sr {
  border-color: var(--rar-sr-1);
  background: linear-gradient(135deg, #f3e5ff 0%, #ffd9eb 100%);
  box-shadow: 0 0 10px rgba(157, 78, 221, 0.65);
  animation: gcMiniIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             gcSrPulse 2s ease-in-out infinite 0.5s !important;
}
.gc-mini.rarity-ssr {
  border-color: var(--rar-ssr-1);
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 45%, #ff6f00 100%);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.85),
              0 0 0 1.5px rgba(233, 30, 99, 0.35);
  animation: gcMiniIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
             gcSsrPulse 1.6s ease-in-out infinite 0.5s !important;
}
.gc-mini.rarity-n .gc-mini-rarity  { background: var(--rar-n-1); }
.gc-mini.rarity-r .gc-mini-rarity  { background: var(--rar-r-1); }
.gc-mini.rarity-sr .gc-mini-rarity { background: var(--rar-sr-1); }
.gc-mini.rarity-ssr .gc-mini-rarity {
  background: linear-gradient(135deg, var(--rar-ssr-1) 0%, var(--rar-ssr-2) 60%, var(--rar-ssr-3) 100%);
  color: #1a1a1a;
}
@keyframes gcRPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(30, 136, 229, 0.45); }
  50%      { box-shadow: 0 0 14px rgba(30, 136, 229, 0.85); }
}
@keyframes gcSrPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(157, 78, 221, 0.55); }
  50%      { box-shadow: 0 0 18px rgba(157, 78, 221, 0.95),
                         0 0 6px rgba(255, 110, 199, 0.5); }
}
@keyframes gcSsrPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.7),
                         0 0 0 1px rgba(233, 30, 99, 0.3); }
  50%      { box-shadow: 0 0 22px rgba(255, 215, 0, 1),
                         0 0 8px rgba(255, 111, 0, 0.7),
                         0 0 0 2px rgba(233, 30, 99, 0.5); }
}

/* === ライトボックス === */
.gl-result.rarity-ssr .rarity-badge {
  background: linear-gradient(135deg, var(--rar-ssr-1) 0%, var(--rar-ssr-2) 55%, var(--rar-ssr-3) 100%) !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.7),
              0 0 24px rgba(233, 30, 99, 0.45) !important;
}
.gl-result.rarity-sr .rarity-badge {
  background: linear-gradient(135deg, var(--rar-sr-1) 0%, var(--rar-sr-2) 100%) !important;
}
.gl-result.rarity-r .rarity-badge {
  background: linear-gradient(135deg, var(--rar-r-1) 0%, var(--rar-r-2) 100%) !important;
}
.gl-result.rarity-n .rarity-badge {
  background: linear-gradient(135deg, var(--rar-n-1) 0%, var(--rar-n-2) 100%) !important;
}
.gl-result.rarity-ssr .gl-illust {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 50%, #ff6f00 100%) !important;
  border-color: var(--rar-ssr-1) !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.55) inset,
              0 0 32px rgba(233, 30, 99, 0.25) inset !important;
}
.gl-result.rarity-sr .gl-illust {
  background: linear-gradient(135deg, #f3e5ff 0%, #ffd9eb 100%) !important;
  border-color: var(--rar-sr-1) !important;
}
.gl-result.rarity-r .gl-illust {
  background: linear-gradient(135deg, #e3f2fd 0%, #b3e5fc 100%) !important;
  border-color: var(--rar-r-1) !important;
}

/* === 単発結果のステージ（既存の単発ガチャ結果カード） === */
.gacha-result.rarity-r .gacha-illust { background: linear-gradient(135deg, #e3f2fd, #b3e5fc); border-color: var(--rar-r-1); }
.gacha-result.rarity-sr .gacha-illust { background: linear-gradient(135deg, #f3e5ff, #ffd9eb); border-color: var(--rar-sr-1); }
.gacha-result.rarity-ssr .gacha-illust {
  background: linear-gradient(135deg, #fff7c2, #ffd700, #ff6f00);
  border-color: var(--rar-ssr-1);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.55) inset, 0 0 32px rgba(233, 30, 99, 0.25) inset;
}

/* gacha-note を見ている時、追尾バーのアチーブ数バッジが目立つアニメ */
.sticky-achv.notice {
  animation: achvNotice 1s ease-in-out infinite;
}
.sticky-achv.notice::after {
  content: '👀';
  position: absolute;
  top: -10px; right: -16px;
  font-size: 14px;
  animation: achvEyeBounce 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achvNotice {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 225, 77, 0.0); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255, 225, 77, 0.5), 0 0 14px rgba(255, 225, 77, 0.7); }
}
@keyframes achvEyeBounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-3px) rotate(8deg); }
}

/* ===== コレクション ミニカード: 重複カウントバッジ ===== */
.gc-mini-count {
  position: absolute;
  bottom: 2px; right: 2px;
  background: var(--accent);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1.2px solid #fff;
  z-index: 4;
  letter-spacing: 0.04em;
  line-height: 1.1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.gc-mini.rarity-ssr .gc-mini-count {
  background: linear-gradient(135deg, var(--rar-ssr-1) 0%, var(--rar-ssr-3) 100%);
  color: #1a1a1a;
}
.gc-mini.rarity-sr .gc-mini-count { background: var(--rar-sr-1); }
.gc-mini.rarity-r  .gc-mini-count { background: var(--rar-r-1); }
.gc-mini.rarity-n  .gc-mini-count { background: var(--rar-n-1); }

/* ===== 説明パネル: おまけ（ガチャ）アイテム ===== */
.finish-pending-list li.bonus a {
  background: linear-gradient(135deg, rgba(255, 213, 74, 0.18), rgba(255, 122, 26, 0.12));
  border-color: #d4a017;
}
.fpl-bonus-tag {
  display: inline-block;
  margin-left: 6px;
  background: linear-gradient(135deg, #ffd54a 0%, #ff7a1a 100%);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ===== アクションラベル: セクションに差し掛かった時の注目アニメ ===== */
.action-badge.in-view {
  animation: actionBadgePop 0.9s cubic-bezier(.2,1.6,.3,1);
}
.action-badge.in-view::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  animation: actionBadgeRing 0.9s ease-out forwards;
  pointer-events: none;
}
section.s-dark .action-badge.in-view::after { border-color: var(--yellow); }
@keyframes actionBadgePop {
  0%   { transform: rotate(-5deg) scale(1); }
  20%  { transform: rotate(8deg) scale(1.35); }
  40%  { transform: rotate(-8deg) scale(0.92); }
  60%  { transform: rotate(5deg) scale(1.15); }
  80%  { transform: rotate(-3deg) scale(0.98); }
  100% { transform: rotate(-5deg) scale(1); }
}
@keyframes actionBadgeRing {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.9); }
}
/* 達成済みのバッジは登場アニメをスキップ */
.action-badge.done.in-view { animation: none; }
.action-badge.done.in-view::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .action-badge.in-view,
  .action-badge.in-view::after { animation: none; }
}

/* claim-active時はclaim CTA（高さあり）の上にガチャボタンを置く */
body.claim-active .floating-actions {
  bottom: 130px;
}

/* ===== バッチ: サマリータグ（SSR×1 SR×2 R×3 N×4）はカード全公開後に表示 ===== */
.gacha-batch-result.is-sequential .batch-summary {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gacha-batch-result.is-sequential.batch-finalized .batch-summary {
  visibility: visible;
  opacity: 1;
}

/* ===== タグの色をr-pill（上部表示）と完全一致させる ===== */
.batch-header .bs-pill.ssr {
  background: linear-gradient(135deg, #ffd700 0%, #ff6f00 55%, #e91e63 100%) !important;
  color: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5),
              0 0 16px rgba(233, 30, 99, 0.35);
}
.batch-header .bs-pill.sr {
  background: linear-gradient(135deg, #9d4edd 0%, #ff6ec7 100%) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 8px rgba(157, 78, 221, 0.5);
}
.batch-header .bs-pill.r {
  background: linear-gradient(135deg, #1e88e5 0%, #26c6da 100%) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.batch-header .bs-pill.n {
  background: linear-gradient(135deg, #546e7a 0%, #90a4ae 100%) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

/* ===== SSR系の背景にピンク差し色を加えて「金」だけにならないようにする ===== */
.batch-card.rarity-ssr {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 35%, #ff6f00 70%, #ffafd0 100%) !important;
  border-color: #ffd700;
}
.gc-mini.rarity-ssr {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 35%, #ff6f00 70%, #ffafd0 100%) !important;
}
.gl-result.rarity-ssr .gl-illust,
.gacha-result.rarity-ssr .gacha-illust {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 35%, #ff6f00 70%, #ffafd0 100%) !important;
}

/* SSR バッジ（バッチカード上の小バッジ）も三色グラデに */
.batch-card.rarity-ssr .batch-rarity {
  background: linear-gradient(135deg, #ffd700 0%, #ff6f00 55%, #e91e63 100%) !important;
  color: #1a1a1a;
}
.gc-mini.rarity-ssr .gc-mini-rarity {
  background: linear-gradient(135deg, #ffd700 0%, #ff6f00 55%, #e91e63 100%) !important;
  color: #1a1a1a;
}




/* 特典再表示ボタンが出ているときは、フローティングのガチャボタンを上に逃がす */
body.reopen-active .floating-actions {
  bottom: 160px; /* reopen-reward (56px @ bottom 80px) の上にクリアランス */
}

/* ===== 最終CTA: セクションタイトル ===== */
.final-letter .sec-head {
  text-align: center;
  margin-bottom: 18px;
}
.final-section-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
  position: relative;
  display: inline-block;
}
.final-section-title::before,
.final-section-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1.5px;
  background: var(--ink);
  opacity: 0.55;
}
.final-section-title::before { right: 100%; margin-right: 12px; }
.final-section-title::after  { left: 100%;  margin-left:  12px; }

/* ===== FV: 最後まで読むご褒美のティーザー（お知らせ風 / 枠なし） ===== */
.fv-teaser {
  display: block;
  margin: 18px auto 0;
  text-align: center;
  /* 枠もbg-shadowも無し。完全に「お知らせ文」 */
}
.fv-teaser-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.fv-teaser-deco-line {
  flex: 0 0 36px;
  height: 1.2px;
  background: var(--ink);
  opacity: 0.55;
}
.fv-teaser-deco-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.18em;
  padding: 0 4px;
  text-transform: none;
}
.fv-teaser-line1 {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.05em;
  margin: 0 0 2px;
  line-height: 1.4;
}
.fv-teaser-line2 {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin: 0;
}
.fv-teaser-line2 b {
  color: var(--accent);
  font-weight: 900;
  background: linear-gradient(transparent 65%, rgba(255, 215, 0, 0.75) 65%);
  padding: 0 2px;
}
/* ===== 特典2語を目立たせる =====
   画面に入ったらマーカーが引かれ→ピコンと弾み→以降ゆっくり周期的に跳ねる */
.fv-teaser-line2 b.teaser-hi {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  transform-origin: 50% 80%;
}
/* 発火前はマーカーを引く前の状態で待機 */
.fv-teaser.hi-ready .teaser-hi { background-size: 0% 100%; }
.fv-teaser.hi-in .teaser-hi-1 {
  animation:
    markerDraw 0.5s cubic-bezier(0.55, 0.1, 0.3, 1) 0.1s forwards,
    textPop 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 0.6s,
    teaser-beat 3s ease-in-out 1.3s infinite;
}
.fv-teaser.hi-in .teaser-hi-2 {
  animation:
    markerDraw 0.5s cubic-bezier(0.55, 0.1, 0.3, 1) 0.55s forwards,
    textPop 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 1.05s,
    teaser-beat 3s ease-in-out 1.75s infinite;
}
/* 3秒に一度だけ跳ねる。常時動かすとうるさいので短く鋭く */
@keyframes teaser-beat {
  0%, 84%, 100% { transform: scale(1) rotate(0); }
  88%           { transform: scale(1.12) rotate(-2deg); }
  93%           { transform: scale(0.97) rotate(1.5deg); }
  97%           { transform: scale(1.02) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fv-teaser .teaser-hi { animation: none !important; background-size: 100% 100% !important; }
}

/* ===== FV: ナビゲーター紹介セクション（独立した自己紹介ブロック） ===== */
.fv-intro {
  position: relative;
  margin: 38px -8px 18px;
  padding: 22px 14px 18px;
  background: linear-gradient(180deg, #fff7f3 0%, #ffeae3 100%);
  border-radius: 16px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.fv-intro-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.fv-intro-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  align-items: center;
}
.fv-intro-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  text-align: left;
  letter-spacing: 0.02em;
}
.fv-intro-bubble p {
  margin: 0;
}
.fv-intro-bubble p + p {
  margin-top: 4px;
}
.fv-intro-bubble b {
  color: var(--accent);
  font-weight: 900;
  background: linear-gradient(transparent 65%, rgba(255, 215, 0, 0.7) 65%);
  padding: 0 2px;
}
/* 吹き出しの "口" — 右向き */
.fv-intro-bubble::before,
.fv-intro-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
}
.fv-intro-bubble::before {
  right: -14px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid var(--ink);
}
.fv-intro-bubble::after {
  right: -10px;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #fff;
}
.fv-intro-portrait {
  width: 110px !important;
  height: 150px !important;
  border-radius: 14px !important;
  flex-shrink: 0;
  font-size: 10px !important;
  background: #fff !important;
  border: 2px solid var(--ink) !important;
}
.fv-intro-portrait .pose {
  font-size: 8px;
  padding: 0 4px;
  text-align: center;
  line-height: 1.3;
  color: var(--muted);
}

/* ===== FV メインビジュアル: ミサキ立ち絵（エッジぼかし／余白なし） ===== */
.fv-hero-img {
  width: 100%;
  max-width: 420px;
  margin: 18px auto 0;
  position: relative;
  overflow: visible;
  line-height: 0;
}
/* マスクは動かないこの枠に掛ける。
   マスクと変形を同じ要素に載せると、変形のたびにマスクを合成し直すことになり
   毎フレーム再描画が走ってカクつく。枠を静止させれば一度焼いたマスクを使い回せる */
.fv-hero-frame {
  display: block;
  line-height: 0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}
.fv-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  /* 2行目のマーカーが引かれ始めた頃（1.9s）にふわっと登場 → そのまま呼吸するように上下し続ける */
  animation:
    fv-hero-in 1.05s cubic-bezier(.16,.84,.28,1) 1.9s both,
    fv-hero-float 4.2s ease-in-out 2.95s infinite;
  /* 合成専用のレイヤーに載せて、変形時の再描画を避ける */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* ふわっと浮かび上がって登場（跳ね返しなし・素直に定位置へ） */
@keyframes fv-hero-in {
  0%   { opacity: 0; transform: translateY(30px) scale(0.965); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 手書きフォント「あずきフォント」。使用する7文字だけにサブセット化して1.9KBに圧縮 */
@font-face {
  font-family: "AzukiSubset";
  src: url("fonts/azuki-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== ミサキのひとこと（＼ ／ で挟む手書き文字・右上に斜め配置） =====
   吹き出しの枠やしっぽは使わず、文字だけを置いて軽さを出す */
.fv-hero-say {
  will-change: transform, opacity;
  position: absolute;
  right: 3%;
  top: 4%;
  z-index: 2;
  margin: 0;
  font-family: "AzukiSubset", "Zen Kaku Gothic New", sans-serif;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  /* イラストの上に乗っても読めるよう、白い薄縁を回す */
  text-shadow:
    0 0 4px #fff, 0 0 4px #fff,
    0 0 8px rgba(255,255,255,0.9);
  transform-origin: 50% 50%;
  animation: fv-say-in 0.45s cubic-bezier(.2,1.5,.35,1) 2.75s both;
}
/* 傾きは最終状態でも保つ必要があるため keyframes 側に含める。
   左下（ミサキ側）が上がる向きに傾けて、彼女が言っているように見せる */
@keyframes fv-say-in {
  0%   { opacity: 0; transform: rotate(13deg) scale(0.75); }
  100% { opacity: 1; transform: rotate(13deg) scale(1); }
}
/* 待機中：ゆっくり上下＋わずかに拡縮（呼吸感） */
@keyframes fv-hero-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .fv-hero-img img,
  .fv-hero-say,
  .fv .eyebrow,
  .fv-hook,
  .fv-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== チビキャラ表示モード（吹き出しアバター用） ===== */
.nav-slot.has-chibi {
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 0;
  overflow: hidden;
}
.nav-slot.has-chibi > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* 頭～胸（上半身）に少しゆとりを持たせて表示 */
  transform: scale(1.45);
  transform-origin: 50% 18%;
  display: block;
}
/* チビ表示時はNAVIGATORバッジとposeラベルは非表示でスッキリ */
.nav-slot.has-chibi::before,
.nav-slot.has-chibi .pose {
  display: none;
}

/* ===== 特別ご褒美イラスト: チビVictory用 ===== */
.reward-illust.has-chibi {
  background: linear-gradient(135deg, #fffaf0 0%, #fff5e2 100%) !important;
  border: 2.5px solid var(--ink) !important;
  padding: 0 !important;
  overflow: hidden;
}
.reward-illust.has-chibi > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* ✦ SPECIAL ✦ バッジは継続表示 */
.reward-illust.has-chibi::before {
  display: block !important;
}

/* LIMITEDカード（2:3・カード全体が絵）は画像を主役に最大表示 */
.reward-illust.is-limited-card {
  aspect-ratio: 2/3;
  /* 高さ基準で伸ばす → 画面が縦に余ってる端末ほど大きく見せる */
  height: min(50vh, 470px);
  width: auto;
  max-width: 100%;
  /* 枠線・角丸で絵が切れるのを防ぐため枠は付けずグローだけ */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 0 34px rgba(255,190,80,0.3);
  /* flex中央寄せだと img が実サイズに膨らむので block に */
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
}
.reward-illust.is-limited-card > img {
  width: 100%;
  height: 100%;
  /* カードは絵の四隅まで意味があるので絶対に切らない */
  object-fit: contain;
  object-position: center;
  /* has-chibi 用の scale(1.45) ズームを持ち込まない */
  transform: none;
  display: block;
}
/* 画像自体にLIMITED表記があるので ✦SPECIAL✦ バッジは出さない */
.reward-illust.is-limited-card::before {
  display: none !important;
}

/* ===== ご褒美カード拡大ビューア ===== */
.reward-zoom {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.reward-zoom[hidden] { display: none !important; }
.reward-zoom:not([hidden]) { animation: overlay-in 0.25s ease; }
.rz-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 3, 1, 0.92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.rz-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.rz-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 画面いっぱいに拡大（ヒント＆閉じるボタン分だけ残す） */
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 44px rgba(255,190,80,0.35);
}
.rz-close {
  position: absolute;
  top: -6px; right: -6px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20,12,4,0.85);
  border: 1px solid rgba(255,208,116,0.55);
  color: rgba(255,214,130,0.95);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.rz-hint {
  font-size: 12px;
  font-weight: 800;
  color: #f0c479;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
}
.rz-hint b {
  color: #ffd06a;
  text-shadow: 0 0 12px rgba(255,190,80,0.5);
}

/* ===== fv-intro 立ち絵: ミサキ上半身バストアップ ===== */
.nav-slot.has-portrait {
  background: #fff;
  border: 2px solid var(--ink);
  padding: 0;
  overflow: hidden;
}
.nav-slot.has-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* 顔をしっかり見せる */
  display: block;
}
.nav-slot.has-portrait::before,
.nav-slot.has-portrait .pose {
  display: none;
}

/* ===== sec-image: 実画像モード（悩み等・コンテナ幅いっぱい） ===== */
.sec-image.has-photo {
  background: none;
  border: none;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  max-width: none;
  /* コンテナ幅を超えないように、100vwはvar(--container)でキャップ */
  width: min(100vw, var(--container));
  margin-left: calc(50% - min(50vw, calc(var(--container) / 2)));
  margin-right: calc(50% - min(50vw, calc(var(--container) / 2)));
}
.sec-image.has-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sec-image.has-photo::before,
.sec-image.has-photo .pose {
  display: none;
}

/* ===== 特典カード: 紙吹雪クラッカー演出 ===== */
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.confetti-piece {
  position: absolute;
  bottom: 24px;
  border-radius: 2px;
  will-change: transform, opacity;
}

/* ===== 特典カード: 横長バナービジュアル（¥アイコンの置き換え） ===== */
.merit.hi .bonus-visual {
  width: calc(100% + 36px);
  margin: -24px -18px 14px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.merit.hi .bonus-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== feat-illust: 実画像モード ===== */
.feat-illust.has-photo {
  background: transparent;
  border: none;
  padding: 0;
}
.feat-illust.has-photo::before,
.feat-illust.has-photo .pose {
  display: none;
}

/* ===== 求人IDコピー ボタン & 注釈 ===== */
.btn-copy {
  background: #fff;
  color: var(--ink);
  border: 1.8px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-copy::before {
  content: "📋";
  margin-right: 6px;
  font-size: 14px;
}
.btn-copy:hover {
  background: #fff8dc;
}
.btn-copy:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-copy.copied {
  background: #d4f7d4;
  color: #0d6b30;
  border-color: #0d6b30;
  box-shadow: 2px 2px 0 #0d6b30;
}
.btn-copy.copied::before { content: ""; margin-right: 0; }

.job-copy-hint {
  margin: 14px 16px 0;
  padding: 10px 14px;
  background: #fffef2;
  border: 1.5px dashed var(--ink);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
}
.job-copy-hint b {
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 2px;
}

/* ===== job-photo: 実画像モード ===== */
.job-photo.has-photo {
  background: #f6f6f6;
  border-bottom: 1.5px solid var(--ink);
}
.job-photo.has-photo::before {
  display: none;
}
.job-photo.has-photo .pose {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* ===== dorm-img: 実写真モード ===== */
.dorm-card .dorm-img.has-photo {
  background: #f2f2f2;
  border-bottom: 1.5px solid var(--ink);
  padding: 0;
}
.dorm-card .dorm-img.has-photo::before,
.dorm-card .dorm-img.has-photo .pose {
  display: none;
}

/* ===== 間取り図は全体を見せる ===== */
.dorm-card .dorm-img.has-photo[data-dorm-img="plan"] {
  background: #fff;
}
.dorm-card .dorm-img.has-photo[data-dorm-img="plan"] img {
  object-fit: contain;
  transform: scale(1.35);
}
/* 画像タップで拡大: カーソルとホバー */
.dorm-card .dorm-img.has-photo {
  cursor: zoom-in;
}
.dorm-card .dorm-img.has-photo::after {
  content: "🔍";
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}

/* ===== 汎用ライトボックス ===== */
.dorm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.85);
  cursor: zoom-out;
  animation: overlay-in 0.2s ease;
}
.dorm-lightbox.is-open {
  display: flex;
}
.dorm-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background: #fff;
}
.dorm-lightbox .dl-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.95);
  color: #000;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dorm-lightbox .dl-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}
body.dorm-lightbox-open { overflow: hidden; }

/* ===== dorm-env-img: 実画像モード ===== */
.dorm-env-img.has-photo {
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 0;
}
.dorm-env-img.has-photo::before,
.dorm-env-img.has-photo .pose {
  display: none;
}

/* ===== perk-tier-img: 実画像モード 豪華エフェクト ===== */
.perk-tier-img.has-photo {
  background: #000;
  border: 2px solid #d4a833;
  padding: 0;
  box-shadow:
    0 0 0 1px rgba(255,225,77,0.4),
    0 0 24px rgba(255,215,0,0.35),
    0 0 48px rgba(255,180,0,0.18),
    inset 0 0 30px rgba(255,215,0,0.08);
  position: relative;
  overflow: hidden;
  animation: perk-glow-pulse 3.6s ease-in-out infinite;
}
.perk-tier-img.has-photo::before,
.perk-tier-img.has-photo .pose {
  display: none;
}
/* シマー削除（脈動グロー＋金枠のみ残す） */
@keyframes perk-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,225,77,0.4),
      0 0 24px rgba(255,215,0,0.35),
      0 0 48px rgba(255,180,0,0.18),
      inset 0 0 30px rgba(255,215,0,0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,235,120,0.6),
      0 0 32px rgba(255,215,0,0.55),
      0 0 68px rgba(255,180,0,0.32),
      inset 0 0 40px rgba(255,215,0,0.14);
  }
}
/* 四隅の金の飾り */
.perk-tier-img.has-photo > img {
  position: relative;
  z-index: 1;
}
.perk-tier {
  position: relative;
}
.perk-tier-img.has-photo .perk-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid #ffd700;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.7));
}
.perk-tier-img.has-photo .perk-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.perk-tier-img.has-photo .perk-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.perk-tier-img.has-photo .perk-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.perk-tier-img.has-photo .perk-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* ===== flow-img: 実画像モード ===== */
.flow-img.has-photo {
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 0;
  aspect-ratio: 16 / 9;
}
.flow-img.has-photo::before,
.flow-img.has-photo .pose {
  display: none;
}

/* ===== ガチャライトボックス: 実画像モード ===== */
.gl-illust.has-photo {
  aspect-ratio: 2 / 3;
  background: #000;
  border: 3px solid #d4a833;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(255,215,0,0.5), 0 12px 40px rgba(0,0,0,0.7);
}
.gl-illust.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gl-name {
  text-align: center;
  margin: 8px 0;
  line-height: 1.2;
}
.gl-name .gl-title {
  display: block;
  font-size: 11px;
  color: rgba(212, 168, 23, 0.9);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
  font-weight: 700;
}
.gl-name .gl-charname {
  display: inline-block;
  font-size: 26px;
  font-weight: 900;
  color: #b8860b;
  text-shadow: 0 0 8px rgba(255,180,0,0.35);
  letter-spacing: 0.08em;
}

/* ガチャライトボックス: 保存促しの文言 */
.gl-save-hint {
  text-align: center;
  margin: 4px 0;
  padding: 8px 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.gl-save-hint b {
  padding: 0 2px;
  font-weight: 900;
}

/* ガチャライトボックス画像: iOS/Androidの長押し保存を明示的に有効化 */
.gl-illust.has-photo img {
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}

/* ===== ガチャバッチ結果: 実画像モード ===== */
.batch-illust.has-photo {
  aspect-ratio: 2 / 3;
  background: #000;
  padding: 0;
  border-radius: 6px;
}
.batch-illust.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== コレクションミニカード: 実画像モード ===== */
.gc-mini.has-photo {
  padding: 0;
}
.gc-mini.has-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gc-mini.has-photo .gc-mini-rarity {
  z-index: 2;
}
.gc-mini.has-photo .gc-mini-id {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 30%, transparent);
  color: #fff;
  padding: 3px 2px 2px;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
}

/* =========================================================================
   ガチャ全画面演出（シネマ）
   構成: オーブ出現 → 色が確定（レア度判明）→ 収束 → 爆発 → カード登場
   レア度差は --gc-* のカスタムプロパティと data-rarity で切り替える
   ========================================================================= */
.gacha-cinema {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* レア度別の基本色。レアリティピル（--rar-*）と完全に揃えてある。
     JS側は data-rarity を付け替えるだけでよい */
  --gc-c1: var(--rar-n-2);
  --gc-c2: var(--rar-n-1);
  --gc-glow: rgba(144,164,174,0.85);
  --gc-label: "GET!";
}
.gacha-cinema[hidden] { display: none !important; }
.gacha-cinema[data-rarity="r"] {
  --gc-c1: var(--rar-r-2);
  --gc-c2: var(--rar-r-1);
  --gc-glow: rgba(38,198,218,0.9);
}
.gacha-cinema[data-rarity="sr"] {
  --gc-c1: var(--rar-sr-2);
  --gc-c2: var(--rar-sr-1);
  --gc-glow: rgba(255,110,199,0.95);
}
.gacha-cinema[data-rarity="ssr"] {
  --gc-c1: var(--rar-ssr-1);
  --gc-c2: var(--rar-ssr-2);
  --gc-glow: rgba(255,215,0,1);
}

/* ---- 背景 ---- */
.gc-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(40,20,60,0.55) 0%, rgba(6,4,12,0.97) 70%),
    #05040a;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.gacha-cinema.is-open .gc-bg { opacity: 1; }

/* ---- 放射光線（爆発後に回り続ける） ---- */
.gc-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 240vmax; height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(
    from 0deg,
    var(--gc-glow) 0deg 2.2deg,
    transparent 2.2deg 11deg
  );
  opacity: 0;
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
}
.gacha-cinema.is-burst .gc-rays {
  animation: gc-rays-in 0.5s ease-out forwards, gc-rays-spin 14s linear infinite;
}
@keyframes gc-rays-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 0.5; transform: scale(1); }
}
@keyframes gc-rays-spin {
  to { transform: rotate(360deg); }
}
/* Nは光線を出さない（安っぽく散らかるため） */
.gacha-cinema[data-rarity="n"].is-burst .gc-rays { opacity: 0 !important; animation: none; }

/* ---- 集中線（収束フェーズ） ---- */
.gc-streaks {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.5) 0deg 0.5deg,
    transparent 0.5deg 5deg
  );
  mask-image: radial-gradient(circle, transparent 18%, #000 55%);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 55%);
  opacity: 0;
}
.gacha-cinema.is-converge .gc-streaks {
  animation: gc-streaks 0.55s ease-in forwards;
}
@keyframes gc-streaks {
  0%   { opacity: 0; transform: scale(1.5) rotate(0deg); }
  70%  { opacity: 0.65; }
  100% { opacity: 0; transform: scale(0.55) rotate(28deg); }
}

/* ---- オーブ ---- */
.gc-orb-wrap {
  position: relative;
  width: 168px; height: 168px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.3);
}
/* 召喚陣が弾けてから出す。delay は JS の GACHA_SUMMON_MS と揃えてある */
.gacha-cinema.is-open .gc-orb-wrap {
  animation: gc-orb-enter 0.55s cubic-bezier(.2,1.5,.35,1) 1.25s both;
}
/* 召喚中はまだオーブを出さない（陣と重なるため） */
.gacha-cinema.is-summon .gc-orb-wrap { opacity: 0; }
@keyframes gc-orb-enter {
  0%   { opacity: 0; transform: scale(0.25) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.gc-orb {
  position: relative;
  width: 118px; height: 118px;
  display: grid;
  place-items: center;
}
.gacha-cinema.is-open .gc-orb { animation: gc-orb-breathe 1.5s ease-in-out infinite; }
@keyframes gc-orb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.gc-orb-core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--gc-c1) 45%, var(--gc-c2) 100%);
  box-shadow: 0 0 30px 6px var(--gc-glow), inset 0 0 22px rgba(255,255,255,0.75);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.gc-orb-glow {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gc-glow) 0%, transparent 68%);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
.gc-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gc-c1);
  opacity: 0.75;
}
.gc-orb-ring1 { animation: gc-ring-spin 3.4s linear infinite; }
.gc-orb-ring2 {
  inset: -14px;
  border-style: dashed;
  border-color: var(--gc-c2);
  animation: gc-ring-spin 5s linear infinite reverse;
}
@keyframes gc-ring-spin {
  to { transform: rotate(360deg); }
}
.gc-orb-spark {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--gc-glow);
  opacity: 0;
}

/* 色が確定する瞬間の一撃 */
.gacha-cinema.is-reveal-color .gc-orb-spark {
  animation: gc-color-hit 0.5s ease-out;
}
@keyframes gc-color-hit {
  0%   { opacity: 1; box-shadow: 0 0 0 0 var(--gc-glow); }
  100% { opacity: 0; box-shadow: 0 0 0 90px transparent; }
}
.gacha-cinema.is-reveal-color .gc-orb-glow { opacity: 1; }

/* SSRだけ最上位色（金→橙→ピンク）に昇格する追加ビート */
.gacha-cinema[data-rarity="ssr"].is-rainbow .gc-orb-core {
  background: conic-gradient(from 0deg,
    var(--rar-ssr-1), var(--rar-ssr-2), var(--rar-ssr-3),
    var(--rar-ssr-2), var(--rar-ssr-1));
  box-shadow: 0 0 46px 12px rgba(255,215,0,0.9), inset 0 0 26px rgba(255,255,255,0.9);
  animation: gc-ring-spin 2.2s linear infinite;
}
.gacha-cinema[data-rarity="ssr"].is-rainbow .gc-orb-glow {
  background: conic-gradient(from 0deg,
    rgba(255,215,0,0.7), rgba(255,111,0,0.7), rgba(233,30,99,0.7),
    rgba(255,111,0,0.7), rgba(255,215,0,0.7));
  opacity: 1;
}

/* 収束: オーブが一点に吸い込まれる */
.gacha-cinema.is-converge .gc-orb-wrap {
  animation: gc-orb-converge 0.55s cubic-bezier(.7,0,.9,.3) forwards;
}
@keyframes gc-orb-converge {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.05); opacity: 0.9; }
}
.gacha-cinema.is-burst .gc-orb-wrap { opacity: 0; }

/* ---- レア度コール（SSR/SRのみ大きく出す） ---- */
.gc-rarity-call {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-num);
  font-size: 58px;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 18px var(--gc-glow), 0 0 40px var(--gc-glow);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.gc-rarity-call::before { content: var(--gc-label); }
.gacha-cinema.is-burst .gc-rarity-call {
  animation: gc-call 0.9s cubic-bezier(.15,1.4,.35,1) forwards;
}
@keyframes gc-call {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.4); filter: blur(6px); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(0.9); }
}

/* ---- フラッシュ ---- */
.gc-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.gacha-cinema.is-burst .gc-flash { animation: gc-flash 0.62s ease-out forwards; }
@keyframes gc-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- カード ---- */
/* フレックスの子として並べるとオーブを横に押しのけてしまうため、
   絶対配置で中央に重ねる。中央寄せは transform ではなく translate プロパティで行い、
   スラムイン（transform を動かす）と衝突しないようにする */
.gc-card-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* パネル(4)より前。これが下だとパネルの色や「?」が
     カードに透けて、絵が薄く濁って見える */
  z-index: 5;
  width: min(74vw, 300px);
  opacity: 0;
  pointer-events: none;
}
.gacha-cinema.is-card .gc-card-slot {
  animation: gc-card-slam 0.6s cubic-bezier(.14,1.35,.3,1) forwards;
  pointer-events: auto;
}
@keyframes gc-card-slam {
  0%   { opacity: 0; transform: scale(1.9) rotate(-7deg); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  78%  { transform: scale(0.97) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.gc-card-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #120a03;
  border: 3px solid var(--gc-c1);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 18px 44px rgba(0,0,0,0.7), 0 0 40px 6px var(--gc-glow);
}
.gc-card-inner img { display: block; width: 100%; height: auto; }
.gc-card-fallback {
  display: block;
  padding: 60px 12px;
  text-align: center;
  color: #fff;
  font-weight: 900;
}
/* イラストの上に被せず、カードの外側（上）に置く */
.gc-card-rarity {
  display: block;
  width: fit-content;
  margin: 0 auto 10px;
  font-family: var(--font-num);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(135deg, var(--gc-c2), var(--gc-c1));
  border: 2px solid rgba(0,0,0,0.5);
  border-radius: 999px;
  padding: 4px 18px 5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  box-shadow: 0 0 20px 3px var(--gc-glow);
}

/* SSR/SR は登場後もキラキラが残る */
.gc-card-slot::after {
  content: "";
  position: absolute;
  inset: -30px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 26%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 12% 74%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 90% 80%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 4%,  #fff 0 2px, transparent 3px);
  opacity: 0;
}
.gacha-cinema[data-rarity="sr"].is-card .gc-card-slot::after,
.gacha-cinema[data-rarity="ssr"].is-card .gc-card-slot::after {
  animation: gc-sparkle 1.9s ease-in-out 0.5s infinite;
}
@keyframes gc-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.94); }
  50%      { opacity: 0.9; transform: scale(1.04); }
}

/* ---- スキップ表示 ---- */
.gacha-cinema.is-open .gacha-cinema.is-card 
/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion: reduce) {
  .gacha-cinema *,
  .gacha-cinema *::after,
  .gacha-cinema *::before { animation: none !important; transition: none !important; }
  .gacha-cinema .gc-orb-wrap { opacity: 0; }
  .gacha-cinema .gc-card-slot { opacity: 1; }
}

/* シネマ表示中は背面をスクロールさせない */
body.gacha-cinema-open { overflow: hidden; }

/* ===== まとめて回す: 玉が並ぶフェーズ =====
   引いた数だけ玉を出し、色でレア度を匂わせてから1枚ずつ公開する */
.gc-orb-row {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 14px;
  width: min(86vw, 340px);
  opacity: 0;
  pointer-events: none;
}
.gacha-cinema.is-orbs .gc-orb-row { opacity: 1; }
.gc-mini-orb {
  /* 色はレアリティピル（--rar-*）と共通 */
  --o1: var(--rar-n-2);
  --o2: var(--rar-n-1);
  --oglow: rgba(144,164,174,0.75);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0%, var(--o1) 46%, var(--o2) 100%);
  box-shadow: 0 0 14px 2px var(--oglow), inset 0 0 10px rgba(255,255,255,0.7);
  opacity: 0;
  transform: scale(0.2);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
/* 出現（1つずつ遅らせるのはJSがstyleで指定する） */
.gacha-cinema.is-orbs .gc-mini-orb {
  animation: gc-mini-orb-in 0.45s cubic-bezier(.2,1.5,.35,1) forwards;
}
@keyframes gc-mini-orb-in {
  0%   { opacity: 0; transform: scale(0.2) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* レア度が判明した玉 */
.gc-mini-orb[data-r="r"]  { --o1: var(--rar-r-2);  --o2: var(--rar-r-1);  --oglow: rgba(38,198,218,0.85); }
.gc-mini-orb[data-r="sr"] { --o1: var(--rar-sr-2); --o2: var(--rar-sr-1); --oglow: rgba(255,110,199,0.9); }
/* SSRはピルと同じ 金→橙→ピンク の3色を回転させる */
.gc-mini-orb[data-r="ssr"] {
  --oglow: rgba(255,215,0,0.95);
  background: conic-gradient(from 0deg,
    var(--rar-ssr-1), var(--rar-ssr-2), var(--rar-ssr-3),
    var(--rar-ssr-2), var(--rar-ssr-1));
  animation: gc-ring-spin 2.4s linear infinite !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 色が付いた瞬間の一撃 */
.gc-mini-orb.is-hit { animation: gc-mini-hit 0.42s ease-out !important; }
@keyframes gc-mini-hit {
  0%   { box-shadow: 0 0 0 0 var(--oglow), 0 0 14px 2px var(--oglow); }
  100% { box-shadow: 0 0 0 26px transparent, 0 0 14px 2px var(--oglow); }
}
/* 公開待ちの玉は少し沈ませ、公開中の玉だけ前に出す */
.gc-mini-orb.is-done { opacity: 0.22 !important; transform: scale(0.72) !important; }
.gc-mini-orb.is-active {
  animation: gc-mini-pop 0.34s ease-out !important;
  z-index: 2;
}
@keyframes gc-mini-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.55); box-shadow: 0 0 34px 10px var(--oglow); }
  100% { transform: scale(0.1); opacity: 0; }
}

/* まとめて回す時は単発用の大オーブを出さない（玉列と重なるため） */
.gacha-cinema.is-orbs .gc-orb-wrap { display: none; }
/* カード公開中は玉列を後ろに退かせる */
.gacha-cinema.is-orbs.is-card .gc-orb-row { opacity: 0.18; transition: opacity 0.25s ease; }

/* ===== 昇格演出 =====
   格上げされる直前、玉が白く光りながら震えて「何かが起きる」と知らせる */
.gc-mini-orb.is-promote {
  animation: gc-promote-charge 0.42s ease-in-out 2 !important;
  z-index: 3;
}
@keyframes gc-promote-charge {
  0%, 100% {
    transform: scale(1) rotate(0);
    box-shadow: 0 0 14px 2px var(--oglow);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.22) rotate(-7deg);
    box-shadow: 0 0 30px 10px #fff;
    filter: brightness(1.9);
  }
  65% {
    transform: scale(1.1) rotate(6deg);
    box-shadow: 0 0 22px 6px #fff;
    filter: brightness(1.5);
  }
}

/* ===== まとめて回す: 手動送りUI ===== */
.gc-controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  translate: -50% 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(88vw, 340px);
}
.gc-controls[hidden] { display: none !important; }
.gc-progress {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.gc-controls-btns {
  display: flex;
  gap: 10px;
  width: 100%;
}
.gc-btn {
  flex: 1;
  padding: 13px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.28);
  transition: transform 0.1s ease;
}
.gc-btn:active { transform: scale(0.96); }
.gc-btn-next {
  background: linear-gradient(135deg, var(--gc-c1), var(--gc-c2));
  color: #1a1a1a;
  box-shadow: 0 0 22px 2px var(--gc-glow);
  border-color: rgba(255,255,255,0.5);
}
.gc-btn-all {
  flex: 0 0 38%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
/* 手動送り中は「タップでスキップ」の案内を出さない */
.gacha-cinema.is-manual 
/* =========================================================================
   ガチャ演出: 背景の空気感と、押した直後の召喚シーケンス
   ========================================================================= */

/* ---- 背景: 黒一色をやめて、奥行きのある星空＋光のもやにする ---- */
.gc-nebula {
  position: absolute;
  inset: -20%;
  opacity: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(157,78,221,0.30) 0%, transparent 42%),
    radial-gradient(circle at 78% 24%, rgba(30,136,229,0.26) 0%, transparent 44%),
    radial-gradient(circle at 62% 76%, rgba(255,111,0,0.20) 0%, transparent 46%),
    radial-gradient(circle at 30% 82%, rgba(38,198,218,0.18) 0%, transparent 44%);
  filter: blur(8px);
  transition: opacity 0.6s ease;
}
.gacha-cinema.is-open .gc-nebula {
  opacity: 1;
  animation: gc-nebula-drift 26s ease-in-out infinite alternate;
}
@keyframes gc-nebula-drift {
  0%   { transform: scale(1) translate(0, 0) rotate(0deg); }
  100% { transform: scale(1.18) translate(-3%, 2%) rotate(8deg); }
}

.gc-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,0.9) 50%, transparent),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1.8px 1.8px at 58% 22%, rgba(255,255,255,0.85) 50%, transparent),
    radial-gradient(1.2px 1.2px at 74% 68%, rgba(255,255,255,0.65) 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 36%, rgba(255,255,255,0.8) 50%, transparent),
    radial-gradient(1.1px 1.1px at 20% 84%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1.4px 1.4px at 46% 90%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1.3px 1.3px at 66% 8%,  rgba(255,255,255,0.75) 50%, transparent);
  transition: opacity 0.5s ease;
}
.gacha-cinema.is-open .gc-stars {
  opacity: 1;
  animation: gc-stars-twinkle 4.5s ease-in-out infinite;
}
@keyframes gc-stars-twinkle {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-7px); }
}

/* ---- 召喚陣 ---- */
.gc-summon {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 300px; height: 300px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.gacha-cinema.is-summon .gc-summon { animation: gc-summon-in 0.55s ease-out forwards; }
@keyframes gc-summon-in {
  0%   { opacity: 0; transform: scale(0.35) rotate(-40deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.gc-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(190,215,255,0.55);
  box-shadow: 0 0 16px rgba(150,190,255,0.45), inset 0 0 16px rgba(150,190,255,0.3);
}
.gc-ring-a { width: 300px; height: 300px; border-style: dashed; animation: gc-ring-spin 9s linear infinite; }
.gc-ring-b { width: 232px; height: 232px; border-width: 1.5px; border-style: dotted; animation: gc-ring-spin 6s linear infinite reverse; }
.gc-ring-c {
  width: 166px; height: 166px;
  border-width: 3px;
  border-color: rgba(190,215,255,0.75) transparent rgba(190,215,255,0.75) transparent;
  animation: gc-ring-spin 3.4s linear infinite;
}
/* 歯車リング（異世界×工場のモチーフ） */
.gc-gear {
  position: absolute;
  width: 268px; height: 268px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(190,215,255,0.5) 0deg 3deg,
    transparent 3deg 15deg
  );
  mask-image: radial-gradient(circle, transparent 44%, #000 47%, #000 50%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, transparent 44%, #000 47%, #000 50%, transparent 53%);
  animation: gc-ring-spin 12s linear infinite reverse;
}
/* 中心で光が溜まる */
.gc-core {
  position: absolute;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(190,215,255,0.9) 55%, transparent 72%);
  box-shadow: 0 0 24px 6px rgba(170,205,255,0.8);
  transform: scale(0.35);
  opacity: 0.7;
}
.gc-sparks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(200,225,255,0.9);
  opacity: 0;
}

/* 充填フェーズ: 回転が速まり、中心が膨らむ */
.gacha-cinema.is-charge .gc-ring-a { animation-duration: 2.4s; }
.gacha-cinema.is-charge .gc-ring-b { animation-duration: 1.6s; }
.gacha-cinema.is-charge .gc-ring-c { animation-duration: 0.9s; }
.gacha-cinema.is-charge .gc-gear   { animation-duration: 3s; }
.gacha-cinema.is-charge .gc-summon { animation: gc-summon-shake 0.16s linear infinite; }
/* 揺れが登場アニメを差し替えるため、opacity を各フレームで維持しないと
   .gc-summon の初期値（opacity:0）に戻って陣が消えてしまう */
@keyframes gc-summon-shake {
  0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
  25%      { opacity: 1; transform: translate(-2px, 1px) scale(1.01); }
  75%      { opacity: 1; transform: translate(2px, -1px) scale(1.01); }
}
.gacha-cinema.is-charge .gc-core {
  animation: gc-core-charge 0.85s cubic-bezier(.5,0,.9,.4) forwards;
}
@keyframes gc-core-charge {
  0%   { transform: scale(0.35); opacity: 0.7; }
  70%  { transform: scale(2.2);  opacity: 1; box-shadow: 0 0 60px 22px rgba(200,225,255,0.95); }
  100% { transform: scale(1.6);  opacity: 1; }
}

/* 解放フェーズ: 陣が弾けて消える */
.gacha-cinema.is-release .gc-summon {
  animation: gc-summon-out 0.45s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes gc-summon-out {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(2.1); }
}
.gacha-cinema.is-release .gc-sparks {
  animation: gc-sparks-burst 0.5s ease-out forwards;
}
@keyframes gc-sparks-burst {
  0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(200,225,255,0.9); }
  100% { opacity: 0; box-shadow: 0 0 0 170px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-summon, .gc-nebula, .gc-stars { animation: none !important; }
}

/* =========================================================================
   高レア演出の強化: 衝撃波・光柱・降り注ぐ粒・画面揺れ・昇格
   レア度が上がるほど層を重ねる（Nは何も足さない）
   ========================================================================= */

/* ---- 衝撃波リング（3重・時間差で広がる） ---- */
.gc-shock {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 10px; height: 10px;
  pointer-events: none;
  z-index: 4;
}
.gc-shock span {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid var(--gc-c1);
  opacity: 0;
}
/* R以上で1本目、SR以上で2本目、SSRで3本目まで出す */
.gacha-cinema[data-rarity="r"].is-burst   .gc-shock span:nth-child(1),
.gacha-cinema[data-rarity="sr"].is-burst  .gc-shock span:nth-child(-n+2),
.gacha-cinema[data-rarity="ssr"].is-burst .gc-shock span {
  animation: gc-shockwave 0.85s cubic-bezier(.15,.75,.3,1) forwards;
}
.gc-shock span:nth-child(2) { animation-delay: 0.14s !important; border-width: 2px; }
.gc-shock span:nth-child(3) { animation-delay: 0.28s !important; border-width: 1.5px; }
@keyframes gc-shockwave {
  0%   { opacity: 0.95; transform: scale(0.15); border-width: 5px; }
  70%  { opacity: 0.4; }
  100% { opacity: 0; transform: scale(9); border-width: 1px; }
}

/* ---- 光柱（SSRのみ）左右から立ち上がる ---- */
.gc-pillars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background:
    linear-gradient(to top, transparent 0%, var(--gc-glow) 45%, transparent 100%) 8% 0/ 12px 100% no-repeat,
    linear-gradient(to top, transparent 0%, var(--gc-glow) 55%, transparent 100%) 24% 0/ 7px 100% no-repeat,
    linear-gradient(to top, transparent 0%, var(--gc-glow) 40%, transparent 100%) 76% 0/ 9px 100% no-repeat,
    linear-gradient(to top, transparent 0%, var(--gc-glow) 60%, transparent 100%) 92% 0/ 14px 100% no-repeat;
  filter: blur(2px);
}
.gacha-cinema[data-rarity="ssr"].is-burst .gc-pillars {
  animation: gc-pillars 1.25s ease-out forwards;
}
@keyframes gc-pillars {
  0%   { opacity: 0; transform: scaleY(0.1); transform-origin: 50% 100%; }
  25%  { opacity: 0.9; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.1); }
}

/* ---- 降り注ぐ粒（SR以上） ---- */
.gc-confetti {
  position: absolute;
  inset: -10% 0 0 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  background-image:
    radial-gradient(2.5px 2.5px at 10% 0%, var(--gc-c1) 50%, transparent),
    radial-gradient(2px 2px   at 26% 0%, #fff 50%, transparent),
    radial-gradient(3px 3px   at 41% 0%, var(--gc-c1) 50%, transparent),
    radial-gradient(2px 2px   at 57% 0%, #fff 50%, transparent),
    radial-gradient(2.5px 2.5px at 70% 0%, var(--gc-c2) 50%, transparent),
    radial-gradient(2px 2px   at 84% 0%, #fff 50%, transparent),
    radial-gradient(3px 3px   at 95% 0%, var(--gc-c1) 50%, transparent);
  background-repeat: repeat-y;
  background-size: 100% 190px;
}
.gacha-cinema[data-rarity="sr"].is-card .gc-confetti,
.gacha-cinema[data-rarity="ssr"].is-card .gc-confetti {
  animation: gc-confetti-fall 2.6s linear infinite;
}
@keyframes gc-confetti-fall {
  0%   { opacity: 0;    background-position-y: -190px; }
  12%  { opacity: 0.95; }
  100% { opacity: 0.7;  background-position-y: 760px; }
}

/* ---- 画面揺れ（SR以上・爆発の瞬間だけ） ---- */
.gacha-cinema.is-shake .gc-bg,
.gacha-cinema.is-shake .gc-nebula,
.gacha-cinema.is-shake .gc-stars { animation-play-state: paused; }
.gacha-cinema.is-shake {
  animation: gc-screen-shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
@keyframes gc-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-7px, 4px); }
  28% { transform: translate(6px, -5px); }
  44% { transform: translate(-5px, -3px); }
  60% { transform: translate(4px, 4px); }
  78% { transform: translate(-2px, 2px); }
}
.gacha-cinema[data-rarity="ssr"].is-shake { animation-duration: 0.62s; }

/* ---- SSRのカード枠を虹色に脈動させる ---- */
.gacha-cinema[data-rarity="ssr"].is-card .gc-card-inner {
  border-color: transparent;
  background:
    linear-gradient(#120a03, #120a03) padding-box,
    conic-gradient(from 0deg,
      var(--rar-ssr-1), var(--rar-ssr-2), var(--rar-ssr-3),
      var(--rar-ssr-2), var(--rar-ssr-1)) border-box;
  animation: gc-frame-glow 1.6s ease-in-out infinite;
}
@keyframes gc-frame-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 18px 44px rgba(0,0,0,0.7), 0 0 34px 4px var(--gc-glow); }
  50%      { box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 18px 44px rgba(0,0,0,0.7), 0 0 60px 14px var(--gc-glow); }
}

/* ---- レア度コールをレア度で大きさ・演出を変える ---- */
.gacha-cinema[data-rarity="sr"] .gc-rarity-call  { font-size: 68px; }
.gacha-cinema[data-rarity="ssr"] .gc-rarity-call {
  font-size: 82px;
  background: linear-gradient(100deg,
    var(--rar-ssr-1), #fff 30%, var(--rar-ssr-2) 55%, #fff 75%, var(--rar-ssr-3));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px var(--gc-glow)) drop-shadow(0 0 42px var(--gc-glow));
}
.gacha-cinema[data-rarity="ssr"].is-burst .gc-rarity-call {
  animation: gc-call 0.9s cubic-bezier(.15,1.4,.35,1) forwards,
             gc-call-shine 1.1s linear forwards;
}
@keyframes gc-call-shine {
  from { background-position: 200% 0; }
  to   { background-position: -60% 0; }
}

/* =========================================================================
   昇格演出
   ========================================================================= */
/* 昇格エフェクトは「昇格したパネルの中心」に出す。
   画面中央固定だと、端のパネルが昇格したときに演出とパネルがずれる。
   座標はJSが --fx-x / --fx-y に実測値を入れる */
.gc-promote-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 7;
}
.gacha-cinema.is-promoting .gc-promote-fx { opacity: 1; }
.gc-promote-fx > * {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  translate: -50% -50%;
}
/* リングを3重に、時間差で連続して広げる */
.gc-promote-ring {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 5px solid #fff;
  opacity: 0;
}
.gacha-cinema.is-promoting .gc-promote-ring {
  animation: gc-promote-ring 0.9s cubic-bezier(.12,.7,.25,1) 2;
}
.gc-promote-ring2 {
  border-color: var(--gc-c1);
  animation-delay: 0.16s !important;
}
.gc-promote-ring3 {
  border-color: var(--gc-c2);
  border-width: 3px;
  animation-delay: 0.32s !important;
}
@keyframes gc-promote-ring {
  0%   { opacity: 1; transform: scale(0.15); border-width: 8px; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(11); border-width: 1px; }
}

/* 中心から色が爆発する */
.gc-promote-burst {
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0%,
    var(--gc-c1) 22%,
    var(--gc-c2) 42%,
    transparent 66%);
  opacity: 0;
  mix-blend-mode: screen;
}
.gacha-cinema.is-promoting .gc-promote-burst {
  animation: gc-promote-burst 1.05s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes gc-promote-burst {
  0%   { opacity: 0;    transform: scale(0.04); }
  14%  { opacity: 0.95; transform: scale(0.4); }
  45%  { opacity: 0.6;  transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.5); }
}

/* 昇格するパネル自身を主役にする */
.gc-panel.is-promoted {
  z-index: 6;
  animation: gc-panel-promoted 1.1s cubic-bezier(.15,1.4,.3,1) forwards !important;
}
@keyframes gc-panel-promoted {
  0% {
    opacity: 1; transform: scale(1);
    box-shadow: 0 0 0 0 #fff;
    filter: brightness(4) saturate(0);
  }
  18% {
    opacity: 1; transform: scale(1.3);
    box-shadow: 0 0 60px 22px #fff;
    filter: brightness(3) saturate(1.4);
  }
  55% {
    opacity: 1; transform: scale(1.14);
    box-shadow: 0 0 46px 14px var(--pglow);
    filter: brightness(1.6) saturate(1.2);
  }
  100% {
    opacity: 1; transform: scale(1);
    box-shadow: 0 0 22px 4px var(--pglow);
    filter: brightness(1) saturate(1);
  }
}
/* 昇格中は他のパネルを沈めて視線を集める。
   登場アニメが opacity を持っているため、!important でないと勝てない */
.gacha-cinema.is-promoting .gc-panel:not(.is-promoted) {
  opacity: 0.22 !important;
  filter: blur(1.5px) saturate(0.5) !important;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gc-shock span, .gc-pillars, .gc-confetti,
  .gc-promote-fx *, .gacha-cinema.is-shake { animation: none !important; }
}

/* =========================================================================
   まとめて回す: レア度色の縦パネルを並べる（伏せ → 1枚ずつ開示）
   ========================================================================= */
.gc-panels {
  position: absolute;
  top: 50%; left: 0; right: 0;
  translate: 0 -50%;
  z-index: 4;
  display: flex;
  /* 横並びは5枚まで。6枚以上は2段に折り返す。
     スマホの縦画面で10枚を横一列にすると1枚44pxまで細って絵が見えないため */
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: center;
  gap: 4px;
  --cols: 5;
  height: min(62vh, 460px);
  padding: 0 6px;
  opacity: 0;
  pointer-events: none;
}
.gacha-cinema.is-orbs .gc-panels { opacity: 1; }

.gc-panel {
  /* 色はレアリティピル（--rar-*）と共通 */
  --p1: var(--rar-n-2);
  --p2: var(--rar-n-1);
  --pglow: rgba(144,164,174,0.8);
  position: relative;
  /* 列数はJSが --cols に入れる（最大5） */
  flex: 0 0 calc((100% - (var(--cols) - 1) * 4px) / var(--cols));
  min-width: 0;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transform: translateY(26px);
}
/* 1枚ずつ順に出す。JSが .is-in を付けたタイミングで登場する */
.gc-panel.is-in {
  animation: gc-panel-in 0.5s cubic-bezier(.16,1.3,.3,1) forwards;
}
@keyframes gc-panel-in {
  0%   { opacity: 0; transform: translateY(60px) scaleY(0.25) scaleX(0.7); filter: brightness(3); }
  45%  { opacity: 1; transform: translateY(0) scaleY(1.06) scaleX(1.04); filter: brightness(2.2); }
  70%  { transform: translateY(0) scaleY(0.98) scaleX(0.99); filter: brightness(1.3); }
  100% { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); filter: brightness(1); }
}
/* 出現の瞬間に走る光の帯 */
.gc-panel-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, transparent, #fff 45%, transparent);
  opacity: 0;
  pointer-events: none;
}
.gc-panel.is-in .gc-panel-flash {
  animation: gc-panel-flash 0.5s ease-out forwards;
}
@keyframes gc-panel-flash {
  0%   { opacity: 0.95; transform: scaleY(0.2); }
  100% { opacity: 0; transform: scaleY(1.3); }
}
/* 背後の光の柱＝レア度の色 */
.gc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    transparent 0%,
    var(--p2) 18%,
    var(--p1) 52%,
    var(--p2) 82%,
    transparent 100%);
  opacity: 0.5;
  transition: opacity 0.35s ease, background 0.35s ease;
}
/* 上下の締め */
.gc-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 0 26px rgba(0,0,0,0.55);
  pointer-events: none;
}
.gc-panel[data-r="r"]   { --p1: var(--rar-r-2);  --p2: var(--rar-r-1);  --pglow: rgba(38,198,218,0.85); }
.gc-panel[data-r="sr"]  { --p1: var(--rar-sr-2); --p2: var(--rar-sr-1); --pglow: rgba(255,110,199,0.9); }
.gc-panel[data-r="ssr"] { --p1: var(--rar-ssr-1); --p2: var(--rar-ssr-2); --pglow: rgba(255,215,0,0.95); }
/* SSRは光の柱そのものが流れる */
.gc-panel[data-r="ssr"]::before {
  background: linear-gradient(to top,
    transparent 0%, var(--rar-ssr-3) 16%, var(--rar-ssr-2) 42%,
    var(--rar-ssr-1) 62%, var(--rar-ssr-2) 84%, transparent 100%);
  opacity: 0.72;
  animation: gc-panel-flow 2.6s ease-in-out infinite;
}
@keyframes gc-panel-flow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.95; }
}

/* 色が確定した瞬間の光。
   同じ要素の animation は後勝ちで置き換わるため、opacity/transform を
   各フレームで維持しないと .gc-panel の初期値（opacity:0）に戻って消えてしまう。
   登場アニメと同時に走るので、ここでも見えている状態を明示する */
.gc-panel.is-hit { animation: gc-panel-hit 0.5s ease-out forwards; }
@keyframes gc-panel-hit {
  0% {
    opacity: 0; transform: translateY(60px) scaleY(0.25) scaleX(0.7);
    box-shadow: 0 0 0 0 var(--pglow), 0 0 34px 8px var(--pglow);
    filter: brightness(3);
  }
  45% {
    opacity: 1; transform: translateY(0) scaleY(1.06) scaleX(1.04);
    filter: brightness(2.2);
  }
  70% {
    opacity: 1; transform: translateY(0) scaleY(0.98) scaleX(0.99);
    filter: brightness(1.3);
  }
  100% {
    opacity: 1; transform: translateY(0) scaleY(1) scaleX(1);
    box-shadow: 0 0 0 0 transparent;
    filter: brightness(1);
  }
}

/* 昇格待ちのパネルが震える */
.gc-panel.is-promote {
  animation: gc-panel-promote 0.4s ease-in-out 2 !important;
  z-index: 4;
}
@keyframes gc-panel-promote {
  0%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  35%      { opacity: 1; transform: translateY(0) scale(1.06) rotate(-1.2deg); filter: brightness(2.6); }
  70%      { opacity: 1; transform: translateY(0) scale(1.02) rotate(1deg); filter: brightness(1.7); }
}

/* 伏せ札のマーク */
.gc-panel-lock {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 2;
  font-family: var(--font-num);
  font-size: 22px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 12px var(--pglow);
  transition: opacity 0.25s ease;
}
/* キャラ絵。開示されるまで隠す */
.gc-panel-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.45s ease, transform 0.6s ease;
  z-index: 1;
}
.gc-panel.is-open .gc-panel-img { opacity: 1; transform: scale(1); }
.gc-panel.is-open .gc-panel-lock { opacity: 0; }
.gc-panel.is-open::before { opacity: 0.26; }

/* 開示中のパネルを強調 */
.gc-panel.is-active {
  z-index: 3;
  box-shadow: 0 0 24px 4px var(--pglow);
}
.gc-panel.is-active::before { opacity: 0.9; }

/* 全部見えている結果状態: パネルを主役にする */
.gacha-cinema.is-result .gc-panels { height: min(70vh, 520px); }
.gacha-cinema.is-result .gc-card-slot { opacity: 0 !important; pointer-events: none; }

/* 開示中はパネルを沈めてカードを主役にする */
.gacha-cinema.is-card:not(.is-result) .gc-panels {
  opacity: 0.28;
  filter: blur(2px) saturate(0.7);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
/* カードの背面に暗幕を敷いてコントラストを確保する */
.gc-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.gacha-cinema.is-card:not(.is-result) .gc-card-scrim { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gc-panel, .gc-panel::before { animation: none !important; }
}

/* =========================================================================
   パネル出現時のレア度別エフェクト
   高レアほど光・輪・柱・揺れを積み増す。原点は出現したパネルの中心
   ========================================================================= */
.gc-pop-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.gacha-cinema.is-popping .gc-pop-fx { opacity: 1; }
.gc-pop-fx > * {
  position: absolute;
  left: var(--pop-x, 50%);
  top: var(--pop-y, 50%);
  translate: -50% -50%;
  opacity: 0;
}

/* 中心のフラッシュ玉 */
.gc-pop-core {
  width: 26vmax; height: 26vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--pop-c1) 26%, var(--pop-c2) 48%, transparent 70%);
  mix-blend-mode: screen;
}
/* 広がる輪 */
.gc-pop-ring {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 4px solid var(--pop-c1);
}
.gc-pop-ring2 { border-color: var(--pop-c2); border-width: 2.5px; }
/* SSRだけ立ち上がる光の柱 */
.gc-pop-pillar {
  width: 120px;
  height: 200vh;
  background: linear-gradient(to top, transparent, var(--pop-c1) 35%, #fff 50%, var(--pop-c1) 65%, transparent);
  filter: blur(6px);
  mix-blend-mode: screen;
}

/* レア度ごとの色 */
.gacha-cinema[data-pop="r"]   { --pop-c1: var(--rar-r-2);   --pop-c2: var(--rar-r-1); }
.gacha-cinema[data-pop="sr"]  { --pop-c1: var(--rar-sr-2);  --pop-c2: var(--rar-sr-1); }
.gacha-cinema[data-pop="ssr"] { --pop-c1: var(--rar-ssr-1); --pop-c2: var(--rar-ssr-2); }

/* R: 小さく光る */
.gacha-cinema[data-pop="r"].is-popping .gc-pop-core { animation: gc-pop-core 0.5s ease-out forwards; --pop-scale: 0.45; }
.gacha-cinema[data-pop="r"].is-popping .gc-pop-ring { animation: gc-pop-ring 0.55s cubic-bezier(.15,.75,.3,1) forwards; }

/* SR: 輪を2重に、光も大きく */
.gacha-cinema[data-pop="sr"].is-popping .gc-pop-core { animation: gc-pop-core 0.65s ease-out forwards; --pop-scale: 0.8; }
.gacha-cinema[data-pop="sr"].is-popping .gc-pop-ring { animation: gc-pop-ring 0.7s cubic-bezier(.15,.75,.3,1) forwards; }
.gacha-cinema[data-pop="sr"].is-popping .gc-pop-ring2 { animation: gc-pop-ring 0.7s cubic-bezier(.15,.75,.3,1) 0.13s forwards; }

/* SSR: 光の柱まで立てて別格にする */
.gacha-cinema[data-pop="ssr"].is-popping .gc-pop-core { animation: gc-pop-core 0.95s ease-out forwards; --pop-scale: 1.35; }
.gacha-cinema[data-pop="ssr"].is-popping .gc-pop-ring { animation: gc-pop-ring 0.95s cubic-bezier(.12,.7,.25,1) forwards; }
.gacha-cinema[data-pop="ssr"].is-popping .gc-pop-ring2 { animation: gc-pop-ring 0.95s cubic-bezier(.12,.7,.25,1) 0.16s forwards; }
.gacha-cinema[data-pop="ssr"].is-popping .gc-pop-pillar { animation: gc-pop-pillar 1.05s ease-out forwards; }

@keyframes gc-pop-core {
  0%   { opacity: 0;    transform: scale(calc(var(--pop-scale, 0.6) * 0.1)); }
  16%  { opacity: 0.95; transform: scale(calc(var(--pop-scale, 0.6) * 0.65)); }
  100% { opacity: 0;    transform: scale(var(--pop-scale, 0.6)); }
}
@keyframes gc-pop-ring {
  0%   { opacity: 1; transform: scale(0.1); border-width: 6px; }
  70%  { opacity: 0.45; }
  100% { opacity: 0; transform: scale(6); border-width: 1px; }
}
@keyframes gc-pop-pillar {
  0%   { opacity: 0;    transform: scaleX(0.15) scaleY(0.3); }
  20%  { opacity: 0.95; transform: scaleX(1) scaleY(1); }
  100% { opacity: 0;    transform: scaleX(1.6) scaleY(1); }
}

/* 出現するパネル自身も、レア度が高いほど強く光らせる */
.gc-panel[data-r="sr"].is-hit  { animation-duration: 0.62s; }
.gc-panel[data-r="ssr"].is-hit { animation-duration: 0.8s; }
.gc-panel[data-r="ssr"].is-in::after {
  box-shadow: inset 0 0 0 2px var(--rar-ssr-1), inset 0 0 34px rgba(255,215,0,0.6);
}

@media (prefers-reduced-motion: reduce) {
  .gc-pop-fx > * { animation: none !important; }
}


/* ===== 手紙の下＝ページ最後のCTA =====
   ここが最終接点なので、迷いを外す一言と安心材料を添えて主ボタンを立てる */
.letter-cta-lead {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 4px;
}
.letter-cta-lead b {
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 3px;
  font-weight: 900;
}
/* 主ボタン。他のLINEボタンより一段大きく、脈打たせて視線を集める */
.letter-actions .letter-btn-line {
  padding: 19px 20px;
  font-size: 17px;
  border-radius: 14px;
  animation: letter-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes letter-cta-pulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 5px 0 #04993f, 0 0 22px rgba(6,199,85,0.32); }
  50%      { transform: scale(1.025); box-shadow: 0 5px 0 #04993f, 0 0 40px rgba(6,199,85,0.58); }
}
.letter-actions .letter-btn-line:active { animation: none; }
/* ボタン直下の一言。押した先で何が起きるかを明示して不安を消す */
.letter-cta-micro-lead {
  margin: 8px 0 2px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* 安心材料 */
.letter-cta-micro {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
}
.letter-cta-micro li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 11px 5px 8px;
}
.letter-cta-micro li::before {
  content: "✓";
  color: var(--line-green);
  font-weight: 900;
}
.letter-cta-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.6;
}
.letter-cta-note b {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 15px;
  padding: 0 2px;
}
.lcn-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .letter-actions .letter-btn-line { animation: none; }
}

/* ===== ライトボックス: 小さい画面での見切れ対策 =====
   iPhone SE 等の低い画面では、カード内容（画像＋保存案内＋ボタン）が
   max-height を超えて溢れ、上下が切れていた。
   画像の高さを画面基準にして、常に全体が収まるようにする */
.gl-illust.has-photo {
  /* 保存案内33px＋ボタン52px＋余白ぶんを差し引いた高さに収める */
  max-height: calc(90vh - 150px);
  height: auto;
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  margin-inline: auto;
}
.gl-illust.has-photo img {
  object-fit: contain;
}

/* ===== やることリストの開閉 =====
   常時出しっぱなしだと読む邪魔になるので閉じられるようにする。
   閉じた後も後から使う人がいるため、小さな再表示ボタンを残す */
.floating-actions { pointer-events: none; }
.floating-actions .floating-action,
.floating-actions .fa-close { pointer-events: auto; }

/* 閉じるボタン。リストの右上に小さく置き、項目に被らせない。
   リストの項目は右端に余白がないため、はみ出さないよう内側に寄せる */
.fa-close {
  align-self: flex-end;
  margin-right: 2px;
  width: 26px; height: 26px;
  margin-bottom: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.fa-close:active { transform: scale(0.92); }

/* 再表示ボタン。追尾バーと achievement バッジを避けた位置に小さく出す */
.fa-reopen {
  position: fixed;
  right: 8px;
  bottom: 110px;
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 2px 2px 0 var(--ink);
  animation: fa-reopen-in 0.35s cubic-bezier(.2,1.4,.35,1);
}
.fa-reopen[hidden] { display: none; }
.fa-reopen:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.fa-reopen__ico { font-size: 14px; line-height: 1; }
.fa-reopen__n {
  font-family: var(--font-num);
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}
@keyframes fa-reopen-in {
  0%   { opacity: 0; transform: scale(0.4) translateX(20px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-reopen { animation: none; }
}

/* ==========================================================
   全ガチャアクション達成 かつ ガチャを回し切った人への案内
   最上部に貼りつき、LINEで全カードが見られることを伝える
   ========================================================== */
/* この案内が出るのは「全アクション達成 かつ ガチャを回し切った」ときだけ。
   その状態では通常の追尾バーは役目を終えているので、入れ替えて画面下に固定する */
.allclear {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  background: linear-gradient(135deg, #1a1030 0%, #2a1650 55%, #3a1a4e 100%);
  border-top: 2px solid #ffd700;
  box-shadow: 0 -6px 22px rgba(0,0,0,0.45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.allclear[hidden] { display: none; }
.allclear.is-in { animation: acRise 0.5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes acRise {
  0%   { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 元の追尾バーは隠す。中のアチーブメント表示もまとめて消える */
body.allclear-active .sticky-bar { display: none !important; }
/* 右側のボタン類は、この案内の上へ逃がす */
body.allclear-active .floating-actions,
body.allclear-active .fa-reopen { bottom: 132px; }
body.allclear-active .reopen-reward { bottom: 136px; }
.ac-inner {
  max-width: var(--container, 420px);
  margin: 0 auto;
  padding: 9px 14px 11px;
}
/* バッジは見出しと同じ行に置く。
   本文と同じ行に並べると横幅を食い、案内文が折り返してしまう */
.ac-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px;
  font-size: 12.5px; line-height: 1.3; color: #ffd700;
}
.ac-badge {
  flex: 0 0 auto;
  font-family: 'Archivo Black', sans-serif;
  font-size: 9px; letter-spacing: 0.1em;
  color: #1a1a1a;
  padding: 4px 8px; border-radius: 3px;
  background: linear-gradient(135deg, #ffd700 0%, #ff6f00 60%, #e91e63 100%);
}
/* 案内文は1行に収める。横幅いっぱいを使い、狭い端末では文字を少し詰める */
.ac-text {
  margin: 0 0 8px;
  font-size: 11.5px; line-height: 1.4; color: #f4efe6;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ac-text b { color: #ffd700; }
.ac-btn {
  width: 100%;
  min-height: 40px; padding: 0 14px;
  font-size: 14px; border-radius: 999px;
}
@media (max-width: 374px) {
  .ac-text { font-size: 10.5px; }
  .ac-head { font-size: 11.5px; }
}
@media (max-width: 339px) {
  .ac-text { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .allclear.is-in { animation: none; }
}

/* ガチャ演出の飾りレイヤーは、透明でもタップを受け取ってしまう。
   万一この層が残った場合、下のボタン（特典の受け取りなど）が押せなくなるため塞ぐ */
.gc-streaks,
.gc-rays,
.gc-nebula,
.gc-stars,
.gc-bg { pointer-events: none; }

/* 右下のボタンの積み方。
   通常時は 🎁 が下・ガチャが上（body.reopen-active の既存ルール）。
   案内バナー（高さ約110px）が出ている間は、その上下関係を保ったまま
   まとめてバナーの上へ逃がす */
body.allclear-active .reopen-reward { bottom: 124px; }
body.allclear-active .floating-actions,
body.allclear-active .fa-reopen { bottom: 124px; }
body.allclear-active.reopen-active .floating-actions,
body.allclear-active.reopen-active .fa-reopen { bottom: 204px; }

/* ===== ガチャ結果ヘッダーを1行に収める =====
   「10枚 GET!」とレア度ピルが折り返して2段になっていたので、
   nowrap を敷いた上で余白と文字を詰めて、狭い端末でも1列で並ぶようにする */
.gacha-batch-result .batch-header {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 7px 10px;
}
.gacha-batch-result .batch-header .batch-count {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.gacha-batch-result .batch-header .batch-summary {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px;
  font-size: 10px;
}
.gacha-batch-result .batch-header .bs-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 2px 6px;
  letter-spacing: 0;
}
/* 360px 未満の端末では更に詰める */
@media (max-width: 359px) {
  .gacha-batch-result .batch-header { gap: 6px; padding: 7px 8px; }
  .gacha-batch-result .batch-header .batch-count { font-size: 13px; }
  .gacha-batch-result .batch-header .batch-summary { gap: 3px; font-size: 9px; }
  .gacha-batch-result .batch-header .bs-pill { padding: 2px 5px; }
}

/* ===== 図鑑コンプ率のバー =====
   結果パネルの下に細く敷く。数字は控えめ、バーだけ光らせて
   「あと何種類あるのか」を意識してもらう */
.gacha-batch-result .batch-collect {
  display: flex; align-items: center; gap: 8px;
  margin-top: -6px;
  padding: 0 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}
.batch-collect .bc-label { flex: 0 0 auto; }
.batch-collect .bc-bar {
  flex: 1 1 auto; min-width: 0;
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.batch-collect .bc-bar i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd700 0%, #ff6f00 100%);
  box-shadow: 0 0 6px rgba(255, 183, 0, 0.6);
  transform-origin: left center;
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.batch-collect .bc-num { flex: 0 0 auto; white-space: nowrap; }
.batch-collect .bc-num b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; color: var(--yellow);
  margin-right: 1px;
}
/* カードがめくり終わるまでは出さない。ピルと同じタイミングで現れる */
.gacha-batch-result.is-sequential .batch-collect {
  visibility: hidden; opacity: 0;
  transition: opacity 0.4s ease;
}
.gacha-batch-result.is-sequential.batch-finalized .batch-collect {
  visibility: visible; opacity: 1;
}

/* ===== 見出しの折り返し対策 =====
   .sec-title は左右に18pxの罫線＋12pxのgapで計60pxを飾りに使っていた。
   375px幅だと本文に275pxしか残らず、13文字の見出しが2行になっていたので
   飾りを細くしたうえで、文字サイズを画面幅に追従させる */
.sec-title {
  font-size: clamp(19px, 5.9vw, 24px);
  gap: 8px;
}
.sec-title::before,
.sec-title::after { flex: 0 0 12px; }
@media (max-width: 359px) {
  .sec-title { gap: 6px; }
  .sec-title::before,
  .sec-title::after { flex: 0 0 8px; }
}

/* ===== ガチャの残り回数バッジ（追尾ボタン） =====
   7個目のアクションで限定イラストが出たあと、最後の1回が残っていることに
   気づかれない問題への対策。ページのどこにいても数字が目に入るようにする */
.floating-action-gacha { position: relative; }
.fa-remain {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #e5004f;
  color: #fff;
  font-size: 11px; font-weight: 900; line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: faRemainPulse 1.6s ease-in-out infinite;
}
@keyframes faRemainPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}

/* ===== 限定イラストの中に出す「ラスト◯回」の案内 ===== */
.reward-lastpull {
  margin: 12px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f1533 0%, #2c1c46 100%);
  border: 1.5px solid var(--yellow);
  text-align: center;
}
.rlp-txt {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.rlp-txt .rlp-n {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  color: var(--yellow);
  margin: 0 2px;
}
.rlp-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 11px 14px;
  border: none; border-radius: 999px;
  background: linear-gradient(135deg, #ffd700 0%, #ff9800 100%);
  color: #1a1a1a;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 0 #c77800, 0 6px 14px rgba(255, 152, 0, 0.4);
  animation: rlpBtnPulse 1.8s ease-in-out infinite;
}
.rlp-btn .rlp-n { font-size: 17px; margin: 0 1px; }
.rlp-btn .rlp-arrow { font-size: 18px; margin-left: 2px; }
.rlp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c77800; }
@keyframes rlpBtnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ガチャ画面に着地したとき、押すボタンを一時的に光らせる */
.btn.is-callout {
  animation: gachaCallout 1s ease-in-out 4;
}
@keyframes gachaCallout {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8); }
  50%      { box-shadow: 0 0 0 14px rgba(255, 215, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fa-remain, .rlp-btn, .btn.is-callout { animation: none; }
}

/* 「ラスト◯回を引きに行く」の着地点。
   ボタンが画面の上端に貼り付かないよう、少し上に余白を取って中央寄りに見せる */
#gacha-play { scroll-margin-top: 40vh; }

/* 「生活支援 最大10万円分サポート」は1行に収まらず「サポー／ト」で割れていた。
   「生活支援」を上の行に逃がして、下の行を「最大10万円分サポート」だけにする */
.merit.hi h3 .bonus-lead {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.92;
  margin-bottom: 2px;
}
.merit.hi h3 { white-space: nowrap; }

/* ===== ガチャアクション達成のトースト =====
   達成を知らせているのが右下の小さなカウンターだけで、視線がそこにないため
   気づかれなかった。達成した瞬間に画面の中央下へ大きく出す */
.action-toast {
  position: fixed;
  left: 50%;
  bottom: 94px;
  transform: translate(-50%, 16px);
  z-index: 120;
  display: flex; align-items: center; gap: 11px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1f1533 0%, #33204f 100%);
  border: 2px solid var(--yellow);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.action-toast.is-in  { animation: atIn  0.42s cubic-bezier(.18,1.5,.35,1) forwards; }
.action-toast.is-out { animation: atOut 0.3s ease forwards; }
@keyframes atIn {
  0%   { opacity: 0; transform: translate(-50%, 22px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}
@keyframes atOut {
  0%   { opacity: 1; transform: translate(-50%, 0)     scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.97); }
}
.at-check {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700 0%, #ff9800 100%);
  color: #1a1a1a;
  font-size: 17px; font-weight: 900;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  animation: atRing 0.9s ease-out 0.1s 2;
}
@keyframes atRing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
  100% { box-shadow: 0 0 0 13px rgba(255, 215, 0, 0); }
}
.at-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-main {
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.at-main b {
  font-family: var(--font-num);
  font-size: 17px;
  color: var(--yellow);
  margin: 0 1px;
}
.at-sub {
  font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.at-sub b { color: var(--yellow); font-size: 13px; }

/* トーストのあと、右下のカウンターにも視線を送る。
   もとは0.5秒で終わっていて速すぎたので、余韻を長くして波紋を足す */
.sticky-achv.pop {
  animation: achv-pop 1s cubic-bezier(.2,1.7,.3,1);
}
.sticky-achv.pop::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  animation: achvRipple 0.9s ease-out 2;
  pointer-events: none;
}
@keyframes achvRipple {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .action-toast.is-in { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .at-check, .sticky-achv.pop::before { animation: none; }
}

/* 全部達成したあとの追尾リストと重ならないよう、少し持ち上げる */
body.reopen-active .action-toast { bottom: 158px; }

/* トーストは1行に。件数の行を落として縦幅を詰めた */
.action-toast {
  padding: 9px 16px 9px 11px;
  gap: 9px;
  align-items: center;
}
.action-toast .at-check { width: 26px; height: 26px; font-size: 15px; }
.action-toast .at-sub {
  font-size: 13px;
  color: #fff;
  font-weight: 800;
}
.action-toast .at-sub b { font-size: 16px; }

/* ===== ホーム画面追加ユーザー向けの戻るボタン =====
   左下。固定バーの上に小さく置く。通常のブラウザでは JS 側で出さない */
.pwa-back {
  position: fixed;
  left: 10px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 118;
  display: flex; align-items: center; gap: 1px;
  padding: 6px 11px 6px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  color: var(--ink);
  font-size: 11px; font-weight: 800;
  line-height: 1;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  cursor: pointer;
}
.pwa-back .pb-arrow { font-size: 15px; line-height: 1; margin-top: -1px; }
.pwa-back:active { transform: translateY(1px); box-shadow: 0 0 0 var(--ink); }
/* 全達成後の追尾リストや、全クリア帯が出ているときは一緒に持ち上げる */
body.reopen-active .pwa-back { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
body.allclear-active .pwa-back { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }

/* ===== 月収スライダーの指ヒント ===== */
.sim-range-wrap { position: relative; }
.sim-hand {
  position: absolute;
  top: 50%;
  transform: translate(-50%, 4px);
  display: flex; align-items: center; gap: 2px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}
.sim-hand.is-on {
  opacity: 1;
  animation: simHandSwipe 1.9s ease-in-out infinite;
}
@keyframes simHandSwipe {
  0%, 100% { transform: translate(-50%, 4px); }
  30%      { transform: translate(calc(-50% - 13px), 4px); }
  70%      { transform: translate(calc(-50% + 13px), 4px); }
}
.sim-hand .sh-ico {
  width: 27px; height: 27px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.sim-hand .sh-ico svg { width: 100%; height: 100%; display: block; }
.sim-hand .sh-arrow {
  font-size: 15px; font-weight: 900;
  line-height: 1;
  opacity: 0.45;
  margin-top: -8px;
}
@media (prefers-reduced-motion: reduce) {
  .sim-hand.is-on { animation: none; }
}

/* ===== ガチャアクションの「ここを触れます」ヒント =====
   JSがbodyの直下に置き、対象のページ座標に合わせる。
   指先が対象を指すよう、アイコンの上端を基準にぶら下げる */
.act-hint {
  position: absolute;
  z-index: 90;
  display: flex; align-items: flex-start; gap: 2px;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.act-hint .ah-ico {
  position: relative;
  width: 27px; height: 27px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.act-hint .ah-ico svg { width: 100%; height: 100%; display: block; }
.act-hint .ah-arrow {
  font-size: 15px; font-weight: 900; line-height: 1;
  opacity: 0.45;
  margin-top: 4px;
}

/* 横に動かせる系（スライダー・カード） */
.act-hint--swipe { transform: translate(-50%, -4px); }
.act-hint--swipe.is-on {
  opacity: 1;
  animation: ahSwipe 1.9s ease-in-out infinite;
}
@keyframes ahSwipe {
  0%, 100% { transform: translate(-50%, -4px); }
  30%      { transform: translate(calc(-50% - 13px), -4px); }
  70%      { transform: translate(calc(-50% + 13px), -4px); }
}

/* 押せる系（チェック・選択肢・FAQ・最後のボタン） */
.act-hint--tap { transform: translate(-50%, -6px); }
.act-hint--tap.is-on {
  opacity: 1;
  animation: ahTap 1.5s ease-in-out infinite;
}
@keyframes ahTap {
  0%, 100% { transform: translate(-50%, -6px)  scale(1); }
  22%      { transform: translate(-50%, -1px)  scale(0.9); }
  44%      { transform: translate(-50%, -6px)  scale(1); }
}
/* 押した瞬間に広がる波紋。指先の位置から出す */
.act-hint--tap .ah-ico::before {
  content: "";
  position: absolute;
  left: 50%; top: 2px;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.act-hint--tap.is-on .ah-ico::before {
  animation: ahRipple 1.5s ease-out infinite;
}
@keyframes ahRipple {
  0%       { opacity: 0;    transform: scale(0.6); }
  25%      { opacity: 0.75; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .act-hint.is-on { animation: none; }
  .act-hint--tap.is-on .ah-ico::before { animation: none; }
}

/* 指が文字に重なって読めなくなっていたので、対象の右端に逃がしたうえで
   アイコン自体も少し小さくする。揺れ幅も控えめに */
.act-hint .ah-ico { width: 23px; height: 23px; }
.act-hint .ah-arrow { font-size: 13px; }
@keyframes ahSwipe {
  0%, 100% { transform: translate(-50%, -4px); }
  30%      { transform: translate(calc(-50% - 11px), -4px); }
  70%      { transform: translate(calc(-50% + 11px), -4px); }
}

/* デバッグ表示から安全領域の値を読むための計測用 */
:root { --sab-probe: env(safe-area-inset-bottom, 0px); }
/* iOSのホームバー分だけ、下の固定バーに余白を足す */
.sticky-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* hidden 属性は UA スタイルの [hidden]{display:none} で効いているだけなので、
   こちら側で display を指定した要素では負けてしまう。
   このLPは要素ごとに打ち消す書き方で揃えているので、追加分もそれに倣う。
   （.pwa-back が display:flex のせいで常に表示されていた） */
.pwa-back[hidden]      { display: none !important; }
.action-toast[hidden]  { display: none !important; }
.fa-remain[hidden]     { display: none !important; }
.reward-lastpull[hidden] { display: none !important; }

/* 求人カード・寮写真のスワイプヒントは、写真の上だと指が埋もれて見つけられない。
   濃い丸帯に白い指と文字を載せて、どんな背景でも浮くようにする */
.act-hint--chip {
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.86);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4);
}
.act-hint--chip .ah-ico { width: 21px; height: 21px; filter: none; }
.act-hint--chip .ah-arrow { opacity: 0.9; margin-top: 0; font-size: 14px; }
.act-hint--chip .ah-txt {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}