@charset "utf-8";
/* ==========================================================================
   ポイギルド — 冒険者ギルドテーマ
   太い墨色の輪郭線 / 夜空の紺・ギルドの赤・金貨の黄 / 木の看板と石畳 / はずむ動き
   ========================================================================== */

:root {
  --ink: #2a1708;          /* 輪郭・文字(こげ茶の墨) */
  --ink-soft: #6b5546;
  --red: #dc2f3f;          /* ギルドの赤 */
  --red-d: #b01f2e;
  --orange: #ff8a00;
  --yellow: #ffc61a;       /* 金貨 */
  --yellow-d: #f0a000;
  --aqua: #2f9be1;         /* 魔法の青 */
  --aqua-d: #1f6fc0;
  --pink: #e8457a;
  --cream: #f4e4bf;        /* 羊皮紙 */
  --cream-2: #ecd5a2;
  --paper: #fff8e8;
  --line: #dcc28d;
  --navy: #1c2448;         /* 夜空 */
  --navy-2: #2a3670;

  --fx: #2f9be1;
  --bo: #ff8a00;
  --crypto: #14b8a6;
  --token: #e05297;
  --mining: #c58a2a;
  --auto: #6aa121;
  --predict: #8f3fd1;     /* 予測市場(予言の天文台) */
  --exchange: #14b8a6;
  --nft: #5b5bd6;
  --news: #a0612b;         /* ニュース(木の掲示板) */
  --campaign: #e8457a;     /* キャンペーン */
  --column: #7a52c7;       /* コラム(読みもの) */

  --heavy: "Dela Gothic One", "Hiragino Kaku Gothic StdN", "Arial Black", sans-serif;
  --round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* キャンペーン風の部品(トゲ吹き出し・雲吹き出し・星・紙吹雪・赤の市松) */
  --shape-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50.0,3.0 56.4,17.7 65.5,12.7 69.1,21.5 81.9,18.1 77.0,32.0 86.5,34.9 84.1,43.2 97.0,50.0 82.7,56.5 88.2,65.8 78.1,68.8 82.2,82.2 68.3,77.4 65.3,86.9 56.8,84.1 50.0,97.0 43.7,81.8 34.4,87.8 30.9,78.5 18.4,81.6 22.3,68.5 13.5,65.1 16.8,56.6 3.0,50.0 17.7,43.6 11.8,34.2 21.1,30.7 18.1,18.1 32.0,23.0 34.7,13.1 43.3,16.3' fill='%23fff' stroke='%232a1708' stroke-width='5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --shape-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50.0 9.0 A13 13 0 0 1 70.5 14.5 A13 13 0 0 1 85.5 29.5 A13 13 0 0 1 91.0 50.0 A13 13 0 0 1 85.5 70.5 A13 13 0 0 1 70.5 85.5 A13 13 0 0 1 50.0 91.0 A13 13 0 0 1 29.5 85.5 A13 13 0 0 1 14.5 70.5 A13 13 0 0 1 9.0 50.0 A13 13 0 0 1 14.5 29.5 A13 13 0 0 1 29.5 14.5 A13 13 0 0 1 50.0 9.0Z' fill='%23fff' stroke='%232a1708' stroke-width='5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --shape-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,4.0 58.0,14.9 70.0,8.6 72.4,21.9 86.0,21.3 82.4,34.4 94.8,39.8 86.0,50.0 94.8,60.2 82.4,65.6 86.0,78.7 72.4,78.1 70.0,91.4 58.0,85.1 50.0,96.0 42.0,85.1 30.0,91.4 27.6,78.1 14.0,78.7 17.6,65.6 5.2,60.2 14.0,50.0 5.2,39.8 17.6,34.4 14.0,21.3 27.6,21.9 30.0,8.6 42.0,14.9' fill='%23ffd21e' stroke='%232a1708' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='320' viewBox='0 0 480 320'%3E%3Crect x='30' y='40' width='10' height='10' fill='%23ffd21e' transform='rotate(30 35 45)'/%3E%3Crect x='150' y='18' width='10' height='10' fill='%23c92a0a' transform='rotate(30 155 23)'/%3E%3Crect x='300' y='70' width='8' height='8' fill='%23c92a0a' transform='rotate(0 304 74)'/%3E%3Crect x='400' y='30' width='10' height='10' fill='%23fff' transform='rotate(30 405 35)'/%3E%3Crect x='90' y='170' width='7' height='7' fill='%23ffd21e' transform='rotate(-16 93 173)'/%3E%3Crect x='230' y='210' width='8' height='8' fill='%23c92a0a' transform='rotate(0 234 214)'/%3E%3Crect x='350' y='250' width='7' height='7' fill='%23ffd21e' transform='rotate(30 353 253)'/%3E%3Crect x='440' y='180' width='10' height='10' fill='%23fff' transform='rotate(30 445 185)'/%3E%3C/svg%3E");
  --ichimatsu: conic-gradient(rgba(42, 23, 8, .06) 25%, transparent 0 50%, rgba(42, 23, 8, .06) 0 75%, transparent 0);
  /* ギルドの部品(石れんが・旗のガーランド) */
  --bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 1.5H80M0 41.5H80M1.5 0V40M41.5 40V80' fill='none' stroke='rgba(0,0,0,.32)' stroke-width='3'/%3E%3C/svg%3E");
  --bricks-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 1.5H60M0 31.5H60M1.5 0V30M31.5 30V60' fill='none' stroke='rgba(255,255,255,.22)' stroke-width='3'/%3E%3C/svg%3E");
  --bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='44'%3E%3Cpath d='M0 5 Q48 12 96 5' fill='none' stroke='%232a1708' stroke-width='4'/%3E%3Cpath d='M6 7 L42 9 L24 38 Z' fill='%23dc2f3f' stroke='%232a1708' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M54 9 L90 7 L72 38 Z' fill='%23ffc61a' stroke='%232a1708' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--round);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(138, 90, 46, .13) 2px, transparent 2.5px);
  background-size: 22px 22px;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 4px solid var(--aqua-d); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 32px); }
.fine { font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.7; }

/* 白ヌキ文字 + 墨フチ(見出し用) */
.outlined, .slide__title, .slide__lead, .sec-head__title, .door__name, .rank__head,
.cta__title, .cta__lead, .pagehead__title, .step__num, .onomato {
  -webkit-text-stroke: var(--stroke, 6px) var(--ink);
  paint-order: stroke fill;
}

/* ───────── ボタン ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 22px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink);
  font-weight: 900; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, background-color .15s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn--red { background: var(--red); color: #fff; }
.btn--yellow { background: var(--yellow); }
.btn--aqua { background: var(--aqua); }
.btn--pink { background: var(--pink); color: #fff; }
.btn--sm { padding: 6px 16px; font-size: 13.5px; box-shadow: 0 4px 0 var(--ink); }
.btn--lg { padding: 12px 30px; font-size: 17px; border-width: 4px; box-shadow: 0 6px 0 var(--ink); }
.btn--xl { padding: 16px 44px; font-size: 21px; border-width: 4px; box-shadow: 0 7px 0 var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--bounce { animation: bounce 1.8s ease-in-out infinite; }
.btn--bounce:hover { animation-play-state: paused; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ───────── 小パーツ ───────── */
.r18 {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 20px; padding: 0 5px; margin-right: 8px;
  border-radius: 4px; background: var(--red); color: #fff;
  font-family: var(--round); font-weight: 900; font-size: 11.5px; line-height: 1; letter-spacing: .02em;
}

.chip {
  display: inline-block; padding: 0 10px;
  border: 2px solid var(--ink); border-radius: 999px;
  font-size: 11px; font-weight: 900; line-height: 1.75; color: var(--ink);
  background: var(--yellow);
}
.chip--fx { background: var(--fx); }
.chip--bo { background: var(--bo); }
.chip--crypto { background: var(--crypto); }
.chip--token { background: var(--token); color: #fff; }
.chip--mining { background: var(--mining); color: #fff; }
.chip--auto { background: var(--auto); color: #fff; }
.chip--predict { background: var(--predict); color: #fff; }
.chip--exchange { background: var(--exchange); }
.chip--nft { background: var(--nft); color: #fff; }
.chip--news { background: var(--news); color: #fff; }
.chip--campaign { background: var(--campaign); color: #fff; }
.chip--column { background: var(--column); color: #fff; }

.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 0 10px; border: 3px solid var(--ink); border-radius: 999px;
  font-family: var(--heavy); font-weight: 400; font-size: 13px; line-height: 1.6;
  transform: rotate(-8deg);
}
.badge--up { display: grid; place-items: center; top: 4px; left: 4px; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 0; background: var(--shape-star) center / contain no-repeat; font-size: 14px; color: var(--red-d); transform: rotate(-12deg); }
.badge--new { background: #fff; color: var(--aqua-d); }
.badge--prep { background: #5b6170; color: #fff; font-family: var(--round); font-weight: 900; font-size: 12.5px; letter-spacing: .06em; transform: rotate(-6deg); }
/* 準備中のクエスト(色を落とす) */
.card--prep .card__thumb, .detail--prep .detail__thumb { filter: grayscale(.9); }
.card--prep .card__pt .pt { color: var(--ink-soft); }
.btn--prep, .btn--prep[disabled] { opacity: 1; background: #d9d2c3; color: var(--ink-soft); box-shadow: 0 7px 0 var(--ink); }
.badge--raid { background: var(--navy); color: var(--yellow); font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 12px; letter-spacing: .08em; transform: rotate(-6deg); }

/* 屋号マーク(太鼓の皮のような二重丸に一文字) */
.mark {
  --s: 44px;
  flex: none; display: inline-grid; place-items: center;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--c, var(--red));
  font-family: var(--round); font-weight: 900; font-size: calc(var(--s) * .5); line-height: 1; color: var(--c, var(--red));
}
.mark--sm { --s: 38px; }
.mark--lg { --s: 78px; font-family: var(--heavy); font-weight: 400; border-width: 4px; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px var(--c, var(--red)); }
.mark--xl { --s: 132px; font-family: var(--heavy); font-weight: 400; border-width: 5px; box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 13px var(--c, var(--red)); }
.mark--wide { font-size: calc(var(--s) * .34); letter-spacing: -.03em; }

/* ポイント表記 */
.pt { display: inline-flex; align-items: baseline; white-space: nowrap; color: var(--red); }
.pt b { font-family: var(--heavy); font-weight: 400; font-size: 26px; line-height: 1.1; }
.pt i { font-family: var(--heavy); font-weight: 400; font-style: normal; font-size: 15px; margin-left: 2px; }
.pt__per { margin-right: 5px; font-size: 11px; font-weight: 800; color: var(--ink); }

/* お気に入り */
.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 3px solid var(--ink); border-radius: 50%; background: #fff;
  transition: transform .1s;
}
.fav:hover { transform: scale(1.12); }
.fav svg { width: 18px; height: 18px; fill: #fff; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.fav.is-on svg { fill: var(--red); animation: pop .3s; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 900;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 10px 24px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--yellow); font-weight: 900; box-shadow: 0 5px 0 var(--ink);
  transition: transform .2s, opacity .2s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.hdr { background: var(--paper); border-bottom: 4px solid var(--ink); }
.hdr__in { display: flex; align-items: center; gap: 22px; padding: 10px 0; }

.logo { flex: none; display: flex; align-items: center; gap: 6px; }
.logo .logo__mark { flex: none; width: 62px; height: 62px; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__tag {
  align-self: flex-start; margin-bottom: 4px; padding: 3px 9px;
  border-radius: 999px; background: var(--navy); color: var(--yellow);
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em; white-space: nowrap;
}
.logo__name { display: flex; align-items: center; font-family: var(--heavy); font-weight: 400; font-size: 34px; color: var(--red); letter-spacing: .02em; }
.logo__name em { margin-left: 1px; font-style: normal; color: var(--navy); }
.logo:hover .logo__mark { animation: wiggle .5s; }

.search {
  flex: 1; display: flex; min-width: 0; height: 46px;
  border: 3px solid var(--ink); border-radius: 999px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 0 var(--ink);
}
.search__input { flex: 1; min-width: 0; border: 0; padding: 0 18px; font: inherit; font-weight: 700; color: var(--ink); background: transparent; outline: 0; }
.search__input::placeholder { color: #a8957f; }
.search:focus-within { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px rgba(34, 195, 214, .45); }
.search__btn { flex: none; border: 0; border-left: 3px solid var(--ink); padding: 0 22px; background: var(--red); color: #fff; font-weight: 900; }
.search__btn:hover { background: var(--red-d); }

.hdr__act { flex: none; display: flex; align-items: center; gap: 12px; }
.hdr__acct { display: flex; align-items: center; gap: 12px; }   /* ログイン・登録(ログイン中は名前・報酬金と冒険の記録) */
.hdr__fav { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.hdr__fav svg { width: 22px; height: 22px; fill: var(--red); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.hdr__favnum {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--yellow); font-size: 11px; font-weight: 900; line-height: 1;
}
.hdr__user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
a.hdr__user:hover .hdr__nick { text-decoration: underline; }
.hdr__nick { font-size: 12px; font-weight: 800; }
.hdr__point { font-size: 12px; font-weight: 900; color: var(--red); }
.hdr__point b { font-family: var(--heavy); font-weight: 400; font-size: 20px; margin-right: 2px; }

.gnav { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 4px solid var(--ink); box-shadow: inset 0 3px 0 var(--yellow-d); }
.gnav__list { display: flex; }
.gnav__list li { flex: 1 1 auto; }
.gnav__item {
  position: relative; display: block; padding: 11px 4px; text-align: center; white-space: nowrap;
  color: #fff; font-weight: 900; font-size: 14.5px;
  -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill;
  transition: background-color .12s;
}
.gnav__list li + li .gnav__item::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; border-left: 2px dotted rgba(255, 255, 255, .65);
}
.gnav__item:hover { background: var(--navy-2); }
.gnav__item.is-current { background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; box-shadow: inset 4px 0 0 var(--ink), inset -4px 0 0 var(--ink); }
.gnav__item.is-current::before { display: none; }
button.gnav__item { width: 100%; border: 0; background: transparent; cursor: pointer; }
button.gnav__item[aria-expanded="true"]:not(.is-current) { background: var(--navy-2); }
.gnav__caret { display: inline-block; width: 0; height: 0; margin-left: 7px; border: 5px solid transparent; border-top: 7px solid currentColor; border-bottom: 0; vertical-align: 2px; transition: transform .15s; }
[aria-expanded="true"] > .gnav__caret { transform: rotate(180deg); }

/* メニューの吹き出し(レイドボスの説明など。.gnav の直下に置き、left と口の位置 --arrow は JS で合わせる) */
.gtip {
  --arrow: 50%;
  position: absolute; top: calc(100% + 14px); z-index: 61; display: flex; align-items: center; gap: 12px; width: 336px;
  padding: 10px 16px 10px 10px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 var(--ink); font-size: 13px; font-weight: 700; line-height: 1.65;
  pointer-events: none; animation: pop .2s;
}
.gtip[hidden] { display: none; }
.gtip::before, .gtip::after { content: ""; position: absolute; left: var(--arrow); border-style: solid; border-color: transparent; transform: translateX(-50%); }
.gtip::before { bottom: 100%; border-width: 0 12px 14px; border-bottom-color: var(--ink); }
.gtip::after { bottom: calc(100% - 4px); border-width: 0 8px 10px; border-bottom-color: #fff; }
.gtip__char { flex: none; display: grid; place-items: end center; width: 58px; height: 58px; overflow: hidden; border: 3px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 50% 70%, rgba(255, 90, 90, .55), transparent 70%), #2b2440; }
.gtip__char .char { width: 62px; margin-bottom: -8px; }
.gtip__txt { word-break: auto-phrase; }
/* プルダウンの項目の横に出すとき(口は左向き。左横に出すときは右向き) */
.gtip--side { width: 290px; padding: 10px 16px; }
.gtip--side::before, .gtip--side::after { left: auto; bottom: auto; top: var(--arrow-y, 50%); transform: translateY(-50%); }
.gtip--side::before { right: 100%; border-width: 12px 14px 12px 0; border-color: transparent var(--ink) transparent transparent; }
.gtip--side::after { right: calc(100% - 4px); border-width: 8px 10px 8px 0; border-color: transparent #fff transparent transparent; }
.gtip--side.gtip--flip::before { right: auto; left: 100%; border-width: 12px 0 12px 14px; border-color: transparent transparent transparent var(--ink); }
.gtip--side.gtip--flip::after { right: auto; left: calc(100% - 4px); border-width: 8px 0 8px 10px; border-color: transparent transparent transparent #fff; }   /* 対応ブラウザでは文節で折り返す */
.gtip__txt b { display: block; margin-bottom: 1px; font-size: 14.5px; font-weight: 900; color: var(--red-d); }

/* クエストエリアのプルダウン(.gnav の直下に置き、left は JS で合わせる) */
.gmenu { position: absolute; top: 100%; z-index: 60; width: 270px; padding: 10px; border: 4px solid var(--ink); border-radius: 0 0 18px 18px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); color: var(--ink); }
.gmenu__list { display: grid; gap: 4px; }
.gmenu__link { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 14px; border-radius: 12px; font-weight: 900; box-shadow: inset 6px 0 0 var(--c); transition: background-color .1s; }
.gmenu__link:hover, .gmenu__link:focus-visible { background: var(--cream-2); }
.gmenu__link.is-current { background: var(--yellow); }
.gmenu__char { flex: none; display: grid; place-items: end center; width: 42px; height: 42px; overflow: hidden; border: 3px solid var(--ink); border-radius: 50%; background: #fff; }
.gmenu__char .char { width: 40px; margin-bottom: -3px; }
.gmenu__txt { display: flex; flex-direction: column; line-height: 1.35; }
.gmenu__txt b { font-size: 15.5px; }
.gmenu__txt small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.gmenu__prep { margin-left: 8px; padding: 0 8px; border-radius: 999px; background: #5b6170; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 1.7; vertical-align: 2px; }
.gmenu__sep { margin-top: 4px; padding-top: 8px; border-top: 2px dashed var(--line); }
.gmenu__char--raid { background: radial-gradient(circle at 50% 70%, rgba(255, 90, 90, .55), transparent 70%), #2b2440; }
.gmenu__char--raid .char { width: 46px; margin-bottom: -6px; }
.gmenu__link--all { justify-content: center; margin-top: 6px; padding: 7px 10px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); font-size: 14px; }
.gmenu__link--all::after { content: " ▶"; font-size: .75em; }

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; border-bottom: 4px solid var(--ink); padding: 96px 0 22px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .85) 1px, transparent 1.7px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.7px) 23px 17px / 70px 70px,
    radial-gradient(ellipse at 72% 62%, rgba(255, 198, 26, .38), transparent 55%),
    linear-gradient(180deg, #121733, #2a3670);
}
.hero__rays {
  position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(rgba(255, 210, 30, .1) 0 9deg, transparent 9deg 18deg);
  animation: spin 120s linear infinite;
}
.hero__in { position: relative; }

/* ギルドの旗 */
.flags { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 3%; }
.flags::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 5px; background: var(--ink); }
.flag {
  position: relative; margin-top: 10px; transform-origin: 50% 0; animation: swing 3.4s ease-in-out infinite alternate;
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink));
}
.flag i {
  display: grid; place-items: center; width: 44px; height: 66px; padding-bottom: 14px;
  background: linear-gradient(var(--yellow) 0 7px, transparent 7px), var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  font-style: normal; font-family: var(--round); font-weight: 900; font-size: 19px; color: #fff;
}
.flag--b i { background: linear-gradient(var(--yellow) 0 7px, transparent 7px), #2f6fd6; }
.flag--y i { background: linear-gradient(var(--ink) 0 7px, transparent 7px), var(--yellow); color: var(--ink); }
.flag:nth-child(even) { animation-delay: -1.7s; }
.flag:nth-child(3n) { animation-duration: 4.1s; }

/* スライド */
.slides { position: relative; height: 418px; }
.slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px;
  opacity: 0; visibility: hidden; transform: translateX(46px);
  transition: opacity .45s, transform .45s, visibility 0s .45s;
}
.slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .45s; }
.slide__label {
  display: inline-block; margin-bottom: 14px; padding: 3px 18px;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow);
  font-weight: 900; font-size: 15px; transform: rotate(-2deg); box-shadow: 0 4px 0 var(--ink);
}
.slide__label--fx { background: var(--aqua); }
.slide__label--new { background: var(--crypto); }
.bigbadge.bigbadge--new { background: var(--crypto); box-shadow: 0 9px 0 var(--ink), inset 0 0 0 10px var(--crypto), inset 0 0 0 15px #fff; }
.bigbadge--new .bigbadge__top, .bigbadge--new .bigbadge__unit { color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.bigbadge.bigbadge--new .bigbadge__num { font-size: 80px !important; color: var(--yellow); -webkit-text-stroke: 11px var(--ink); font-size: 104px; }
.slide__label--raid { background: var(--red); color: #fff; }
.slide__label--event { background: var(--pink); color: #fff; }
.slide__title {
  --stroke: 11px;
  font-family: var(--heavy); font-weight: 400; font-size: 54px; line-height: 1.24; letter-spacing: .01em;
  color: #fff; text-shadow: 0 6px 0 var(--ink);
}
.slide__title em { font-style: normal; color: var(--yellow); }
.slide__lead { --stroke: 4.5px; margin-top: 16px; font-size: 18px; font-weight: 900; line-height: 1.6; color: #fff; }
.slide__lead { word-break: auto-phrase; }   /* 対応ブラウザでは文節で折り返す */
.slide__lead b { font-family: var(--heavy); font-weight: 400; font-size: 1.3em; color: var(--yellow); }
.slide__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
/* 1枚目の数字の札(1G=1円・登録ボーナス・手数料) */
.slide__points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.slide__points + .slide__btns { margin-top: 20px; }
.spoint { display: flex; flex-direction: column; justify-content: center; min-width: 148px; padding: 6px 16px 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); line-height: 1.25; }
.spoint small { font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.spoint b { font-family: var(--heavy); font-weight: 400; font-size: 27px; line-height: 1.15; color: var(--red); white-space: nowrap; }
.spoint b i { margin-left: 3px; font-family: var(--round); font-style: normal; font-weight: 900; font-size: 11px; color: var(--ink-soft); }
.spoint--gold { background: var(--yellow); transform: rotate(-2deg); }
.spoint--gold small, .spoint--gold b, .spoint--gold b i { color: var(--ink); }
.slide__art { position: relative; height: 100%; display: grid; place-items: center; }

/* スライド1:太鼓の上のポイ丸 */
.stage { cursor: pointer; }
.stage__mascot { position: absolute; left: 50%; bottom: 112px; z-index: 1; width: 226px; margin-left: -113px; }
.chest { position: absolute; left: 50%; bottom: 0; z-index: 1; width: 290px; margin-left: -145px; }
.mascot { width: 100%; height: auto; overflow: visible; }
.mascot--hero { animation: bob .7s ease-in-out infinite alternate; }
.mascot--hero .mascot__arm--l { transform-origin: 52px 126px; animation: shield .7s ease-in-out infinite alternate; }
.mascot--hero .mascot__arm--r { transform-origin: 168px 120px; animation: sword .7s ease-in-out infinite alternate; }
.onomato {
  --stroke: 9px;
  position: absolute; z-index: 2; font-family: var(--heavy); font-weight: 400; font-size: 46px; line-height: 1; color: var(--yellow);
  text-shadow: 0 5px 0 var(--ink);
}
.onomato--1 { left: -6px; top: 26px; transform: rotate(-14deg); animation: thump .7s ease-out infinite alternate; }
.stage .stage__burst { position: absolute; right: 4px; top: 30px; z-index: 4; padding: 30px 38px 32px; white-space: nowrap; font-family: var(--heavy); font-weight: 400; font-size: 25px; line-height: 1; color: var(--red); transform: rotate(9deg); animation: thump .7s ease-out infinite alternate-reverse; }
.stage__burst b { font-weight: 400; font-size: 1.4em; margin-right: 1px; }
.coin {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  border: 4px solid var(--ink); border-radius: 50%; background: var(--yellow);
  box-shadow: inset -4px -4px 0 var(--yellow-d);
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 19px; line-height: 1;
  animation: float 2.6s ease-in-out infinite alternate;
}
.coin--1 { right: 18px; top: 6px; }
.coin--2 { left: 34px; top: 132px; width: 34px; height: 34px; font-size: 14px; animation-delay: -.9s; }
.coin--3 { right: 2px; bottom: 156px; width: 38px; height: 38px; font-size: 16px; animation-delay: -1.7s; }
.is-hit .mascot { animation: hit .35s; }
.is-hit .onomato { animation: hit .35s; }

/* スライド2・3:大きな丸バッジ */
.bigbadge {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 300px; height: 300px; border-radius: 50%;
  border: 6px solid var(--ink); background: var(--yellow);
  box-shadow: 0 9px 0 var(--ink), inset 0 0 0 10px var(--yellow), inset 0 0 0 15px #fff;
  transform: rotate(-6deg); line-height: 1.1; text-align: center;
  animation: bob 1.2s ease-in-out infinite alternate;
}
.bigbadge__top { font-family: var(--heavy); font-weight: 400; font-size: 26px; }
.bigbadge__num { font-family: var(--heavy); font-weight: 400; font-size: 66px; color: var(--red); -webkit-text-stroke: 9px #fff; paint-order: stroke fill; }
.bigbadge__unit { font-family: var(--heavy); font-weight: 400; font-size: 26px; }
.bigbadge--event { background: var(--pink); box-shadow: 0 9px 0 var(--ink), inset 0 0 0 10px var(--pink), inset 0 0 0 15px #fff; color: #fff; }
.bigbadge--event .bigbadge__top, .bigbadge--event .bigbadge__unit { -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.bigbadge--event .bigbadge__num { font-size: 96px; color: var(--yellow); -webkit-text-stroke: 11px var(--ink); }
.boss { position: absolute; right: 0; top: 0; z-index: 1; width: 300px; }
.boss__monster { animation: bob 1s ease-in-out infinite alternate; }
.boss__hp {
  display: flex; align-items: center; gap: 8px; width: 270px; margin: 0 auto 2px; padding: 4px 10px;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 4px 0 var(--ink);
}
.boss__hp i { flex: 1; height: 13px; border: 2px solid var(--ink); border-radius: 7px; background: linear-gradient(90deg, #ff5a6a 0 86%, #3a1f2a 86%); }
.slide__pal--l2 { left: 104px; bottom: 6px; }
.chart { position: absolute; right: -10px; bottom: 6px; z-index: 2; width: 220px; }
.moon { position: absolute; right: 12px; top: 8px; width: 74px; height: 74px; border: 5px solid var(--ink); border-radius: 50%; background: #fff6c2; box-shadow: inset -15px -7px 0 var(--yellow); animation: float 3s ease-in-out infinite alternate; }

.slides__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.slides__dots { display: flex; gap: 10px; }
.slides__dot { width: 18px; height: 18px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: #fff; transition: transform .15s; }
.slides__dot.is-on { background: var(--yellow); transform: scale(1.3); }
.slides__arrow { display: grid; place-items: center; width: 38px; height: 38px; padding: 0 0 4px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: 0 4px 0 var(--ink); }
.slides__arrow:active { transform: translateY(4px); box-shadow: none; }

/* ───────── 流れるレーン ───────── */
.lane { position: relative; display: flex; align-items: center; height: 74px; overflow: hidden; background: var(--ink); }
.lane__label {
  flex: none; z-index: 3; display: flex; align-items: center; height: 100%;
  padding: 0 22px 0 max(16px, calc((100vw - 1120px) / 2));
  background: var(--yellow); font-family: var(--round); font-weight: 900; font-size: 15px; line-height: 1.3;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  padding-right: 34px;
}
.lane__ring { flex: none; z-index: 2; width: 54px; height: 54px; margin: 0 -40px 0 6px; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); pointer-events: none; }
.lane__track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px); mask-image: linear-gradient(90deg, transparent, #000 70px); }
.lane__move { display: flex; width: max-content; animation: lane 50s linear infinite; }
/* 毎日ガチャのさそい(トップ。ログイン中で今日まだ引いていないときだけ top.js が出す) */
.gnudge { border-bottom: 4px solid var(--ink); background: var(--yellow) repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 18px, transparent 18px 36px); }
.gnudge__in { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.gnudge__pal { flex: none; width: 54px; margin: -14px 0 -10px; }
.gnudge__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.gnudge__text { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; font-weight: 800; line-height: 1.5; }
.gnudge__text b { font-size: 15px; }
.gnudge__btn { flex: none; }
@media (max-width: 640px) {
  .gnudge__in { flex-wrap: wrap; gap: 8px 10px; padding: 10px 0 12px; }
  .gnudge__pal { width: 44px; margin: -8px 0 -6px; }
  .gnudge__text { flex-basis: calc(100% - 54px); }
  .gnudge__text span { font-size: 12px; }
  .gnudge__btn { display: flex; width: 100%; }
}
.lane:hover .lane__move, .lane:focus-within .lane__move { animation-play-state: paused; }
.lane__set { display: flex; gap: 20px; padding-right: 20px; }
.note {
  display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 4px;
  border: 4px solid var(--fx); border-radius: 999px; background: #fff; white-space: nowrap;
}
.note--bo { border-color: var(--bo); }
.note--crypto { border-color: var(--crypto); }
.note--token { border-color: var(--token); }
.note--mining { border-color: var(--mining); }
.note--auto { border-color: var(--auto); }
.note--predict { border-color: var(--predict); }
.note__name { font-weight: 900; font-size: 14px; }
.note__pt { font-family: var(--heavy); font-weight: 400; font-size: 16px; color: var(--red); }
.note:hover { background: var(--yellow); }

/* ==========================================================================
   セクション共通
   ========================================================================== */
.sec { position: relative; padding: 70px 0 76px; }
.sec--cream2 { background: var(--cream-2); border-block: 4px solid var(--ink); }
.sec--yellow {
  border-block: 4px solid var(--ink);
  background: conic-gradient(#ffd21e 25%, #ffc61a 0 50%, #ffd21e 0 75%, #ffc61a 0) 0 0 / 56px 56px;
}
.sec--aqua {
  --w1: #22c3d6; --w2: #4fd3e2;
  border-block: 4px solid var(--ink);
  background-color: var(--w1);
  background-image:
    radial-gradient(circle at 100% 150%, var(--w1) 24%, var(--w2) 24% 28%, var(--w1) 28% 36%, var(--w2) 36% 40%, transparent 40%),
    radial-gradient(circle at 0 150%, var(--w1) 24%, var(--w2) 24% 28%, var(--w1) 28% 36%, var(--w2) 36% 40%, transparent 40%),
    radial-gradient(circle at 50% 100%, var(--w2) 10%, var(--w1) 10% 23%, var(--w2) 23% 30%, var(--w1) 30% 43%, var(--w2) 43% 50%, transparent 50%),
    radial-gradient(circle at 100% 50%, var(--w2) 5%, var(--w1) 5% 15%, var(--w2) 15% 20%, var(--w1) 20% 29%, var(--w2) 29% 34%, var(--w1) 34% 44%, var(--w2) 44% 49%, transparent 49%),
    radial-gradient(circle at 0 50%, var(--w2) 5%, var(--w1) 5% 15%, var(--w2) 15% 20%, var(--w1) 20% 29%, var(--w2) 29% 34%, var(--w1) 34% 44%, var(--w2) 44% 49%, transparent 49%);
  background-size: 90px 45px;
}
.sec--board {
  border-block: 4px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 236px, rgba(42, 23, 8, .38) 236px 239px, transparent 239px 480px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(180deg, #a86c38 0 96px, #6b4020 96px 100px);
}
.sec--dungeon {
  border-block: 4px solid var(--ink);
  background: radial-gradient(ellipse at 50% 0, rgba(232, 56, 79, .5), transparent 62%), var(--bricks) 0 0 / 80px 80px, #262338;
}
.sec--stone { border-block: 4px solid var(--ink); background: var(--bricks) 0 0 / 80px 80px, linear-gradient(#8a93a3, #6f7889); }
.sec--vault {
  border-block: 4px solid var(--ink);
  background: radial-gradient(circle, rgba(255, 198, 26, .16) 0 11px, transparent 12px) 0 0 / 64px 64px, radial-gradient(ellipse at 50% 30%, var(--navy-2), var(--navy) 70%);
}
.sec--red {
  border-block: 4px solid var(--ink);
  background: var(--confetti) 0 0 / 480px 320px, var(--ichimatsu) 0 0 / 48px 48px, var(--red);
}

.sec-head { margin-bottom: 40px; text-align: center; }
.sec-head__title {
  --stroke: 6px;
  position: relative; display: inline-block; padding: 8px 56px 10px;
  border: 4px solid var(--ink); border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 9px),
    linear-gradient(#b8793f, #8a5226);
  color: #fff;
  font-family: var(--heavy); font-weight: 400; font-size: 29px; line-height: 1.4; letter-spacing: .05em;
  box-shadow: 0 7px 0 var(--ink), inset 0 0 0 3px rgba(255, 255, 255, .16); transform: rotate(-1.2deg);
}
.sec-head__title::before, .sec-head__title::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 3px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b9c4d0 60%);
}
.sec-head__title::before { left: 16px; }
.sec-head__title::after { right: 16px; }
.sec-head__title--yellow { background: linear-gradient(#ffdc5e, #f0a800); }
.sec-head__title--raid { background: linear-gradient(#ec4757, #a81c2a); }
.sec-head__sub { margin-top: 22px; font-size: 16px; font-weight: 800; }
.sec-head__sub--on {
  display: table; margin-inline: auto; padding: 2px 18px; border: 3px solid var(--ink); border-radius: 999px; background: #fff;
}
.more { margin-top: 36px; text-align: center; }

/* ───────── 3ステップ ───────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding-top: 52px; }
.step {
  position: relative; padding: 46px 24px 26px; text-align: center;
  border: 4px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 7px 0 var(--ink);
}
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -35px; top: 50%; margin-top: -16px;
  border: 16px solid transparent; border-left: 22px solid var(--ink); border-right: 0;
}
.step__num {
  --stroke: 5px;
  position: absolute; top: -30px; left: 50%; margin-left: -30px;
  display: grid; place-items: center; width: 60px; height: 60px;
  border: 4px solid var(--ink); border-radius: 50%; background: var(--red); color: #fff;
  font-family: var(--heavy); font-weight: 400; font-size: 28px; line-height: 1;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 6px #fff;
}
.step--2 .step__num { background: var(--aqua); box-shadow: inset 0 0 0 3px var(--aqua), inset 0 0 0 6px #fff; }
.step--3 .step__num { background: var(--yellow-d); box-shadow: inset 0 0 0 3px var(--yellow-d), inset 0 0 0 6px #fff; }
.step__icon { width: 84px; height: 84px; margin: 0 auto 10px; }
.step__title { font-family: var(--heavy); font-weight: 400; font-size: 21px; }
.step__text { margin-top: 8px; font-size: 14px; font-weight: 700; text-align: left; }

/* ───────── たとえば ───────── */
.eg__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px; }
.eg__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 6px 14px; text-align: center; overflow: visible;
  border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink);
}
.eg__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; border-radius: 13px 13px 0 0; border-bottom: 3px solid var(--ink); background: var(--fx); }
.eg__item--bo::before { background: var(--bo); }
.eg__item--crypto::before { background: var(--crypto); }
.eg__item--token::before { background: var(--token); }
.eg__item--mining::before { background: var(--mining); }
.eg__item--auto::before { background: var(--auto); }
.eg__item--predict::before { background: var(--predict); }
.eg__item:not(:last-child)::after { content: "+"; position: absolute; right: -32px; top: 50%; margin-top: -22px; width: 26px; text-align: center; font-family: var(--heavy); font-weight: 400; font-size: 28px; line-height: 44px; }
.eg__what { font-weight: 900; font-size: 14px; line-height: 1.45; }
.eg__pt { margin-top: 6px; font-family: var(--heavy); font-weight: 400; font-size: 25px; line-height: 1.2; color: var(--red); }
.eg__pt i { font-style: normal; font-size: 15px; margin-left: 2px; }
.eg__total { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 34px 0 18px; }
.eg__sum { font-family: var(--heavy); font-weight: 400; font-size: 26px; }
.eg__num { font-family: var(--heavy); font-weight: 400; font-size: 88px; line-height: 1; color: var(--red); -webkit-text-stroke: 12px #fff; paint-order: stroke fill; filter: drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)); }
.eg__yen { font-family: var(--heavy); font-weight: 400; font-size: 44px; color: var(--red); -webkit-text-stroke: 8px #fff; paint-order: stroke fill; }
.eg__otoku { align-self: center; padding: 2px 18px; border: 4px solid var(--ink); border-radius: 14px; background: var(--red); color: #fff; font-family: var(--heavy); font-weight: 400; font-style: normal; font-size: 22px; transform: rotate(-6deg); box-shadow: 0 5px 0 var(--ink); }
.eg .fine { text-align: center; color: var(--ink); }

/* ───────── ジャンルの入口 ───────── */
/* 5エリアを1列に並べる(タブレットは3つずつ、スマホは2つずつ) */
.doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.doors > * { flex: 0 1 calc((100% - 72px) / 5); min-width: 0; }
.door {
  --c: var(--fx);
  position: relative; display: block; overflow: hidden; padding: 30px 10px 22px; text-align: center;
  border: 4px solid var(--ink); border-radius: 180px 180px 22px 22px; box-shadow: 0 8px 0 var(--ink);
  background: var(--bricks-w) 0 0 / 60px 60px, var(--c);
  transition: transform .12s, box-shadow .12s;
}
.door--bo { --c: var(--bo); }
.door--crypto { --c: var(--crypto); }
.door--token { --c: var(--token); }
.door--mining { --c: var(--mining); }
.door--auto { --c: var(--auto); }
.door--predict { --c: var(--predict); }
.door:hover { transform: translateY(-5px) rotate(-.8deg); box-shadow: 0 13px 0 var(--ink); }
.door__area { display: inline-block; margin-bottom: 12px; padding: 2px 14px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); font-family: var(--heavy); font-weight: 400; font-size: 15px; letter-spacing: .04em; box-shadow: 0 4px 0 var(--ink); }
.door__face {
  position: relative; display: grid; place-items: center; width: 122px; height: 122px; margin: 0 auto 12px;
  border: 5px solid var(--ink); border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 10px var(--c);
}
.door__char { display: block; width: 100px; }
.door:hover .door__char { animation: pop .35s; }
.door__kanji {
  position: absolute; right: -8px; bottom: -4px; display: grid; place-items: center; width: 46px; height: 46px;
  border: 4px solid var(--ink); border-radius: 50%; background: var(--yellow);
  font-family: var(--round); font-weight: 900; font-size: 23px; line-height: 1; color: var(--ink);
}
.door__name { --stroke: 6px; letter-spacing: .02em; font-family: var(--heavy); font-weight: 400; font-size: 22px; line-height: 1.3; color: #fff; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.door__lead { margin-top: 6px; font-size: 13px; font-weight: 900; line-height: 1.55; text-wrap: balance; word-break: auto-phrase; }
.door__meta { display: inline-block; margin-top: 14px; padding: 3px 18px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-size: 13px; font-weight: 800; line-height: 1.5; }
.door__meta b { font-family: var(--heavy); font-weight: 400; font-size: 18px; color: var(--red); }
.door__meta span { display: block; height: 0; overflow: hidden; }
.door__meta { white-space: nowrap; }
.door__go { display: table; margin: 16px auto 0; padding: 7px 20px; white-space: nowrap; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-weight: 900; box-shadow: 0 4px 0 var(--ink); }
.door__go::after { content: " ▶"; font-size: .8em; }
/* エリアごと準備中 */
.door--prep .door__face { filter: grayscale(.9); }
.door--prep .door__go { background: #d9d2c3; color: var(--ink-soft); }
.door__status { display: table; margin: 6px auto 0; padding: 0 14px; border: 3px solid var(--ink); border-radius: 999px; background: #5b6170; color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.7; letter-spacing: .06em; }
.cards__none { grid-column: 1 / -1; padding: 26px 16px; border: 4px dashed var(--ink); border-radius: 18px; background: var(--paper); text-align: center; font-weight: 900; }

/* ───────── タブ ───────── */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 30px; }
.tab { padding: 7px 24px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; box-shadow: 0 5px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.tab:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.tab.is-on { background: var(--yellow); transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

/* ───────── 案件カード ───────── */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  position: relative;
  border: 4px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.card:nth-child(odd) { transform: rotate(-.7deg); }
.card:nth-child(even) { transform: rotate(.6deg); }
.card::before {
  content: ""; position: absolute; left: 50%; top: -13px; z-index: 3; width: 22px; height: 22px; margin-left: -11px;
  border: 3px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9aa3, var(--red) 60%); box-shadow: 0 3px 0 var(--ink);
}
.card:hover { transform: translateY(-4px) rotate(0); box-shadow: 0 10px 0 var(--ink); }
.card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 4px; }
.card__thumb { position: relative; display: grid; place-items: center; height: 118px; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--c); }
.card__thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 12deg, transparent 12deg 24deg); }
.card__thumb .mark { position: relative; }
.card:hover .mark { animation: pop .35s; }
.card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px 14px; }
.card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.card__label { align-self: center; margin-right: auto; padding: 0 8px; border-radius: 4px; background: var(--ink); color: var(--yellow); font-size: 11px; font-weight: 900; line-height: 1.8; }
.card--raid .card__thumb { place-items: end center; background: radial-gradient(circle at 50% 70%, rgba(255, 90, 90, .55), transparent 65%), #2b2440; }
.card__boss { position: relative; width: 112px; margin-bottom: -16px; }
.card:hover .card__boss { animation: pop .35s; }

/* 難易度 */
.diff { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; color: #d8c49a; white-space: nowrap; }
.diff b { margin-right: 4px; font-size: 10.5px; font-weight: 900; color: var(--ink-soft); }
.diff i { font-style: normal; }
.diff i.on { color: var(--yellow-d); -webkit-text-stroke: .6px var(--ink); }

/* 冒険者ランク(小) */
.rank-pill { display: inline-block; margin-right: 6px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 999px; font-size: 10.5px; font-weight: 900; line-height: 1.6; vertical-align: 1px; }
.rank-pill--bronze { background: #d08a4e; color: #fff; }
.rank-pill--silver { background: #c3ccd6; }
.rank-pill--gold { background: var(--yellow); }
.rank-pill--legend { background: #9b6bff; color: #fff; font-family: Cinzel, Georgia, serif; font-weight: 900; letter-spacing: .06em; }
.chip--area { background: var(--paper); }
.card__name { margin-top: 7px; font-size: 16.5px; font-weight: 900; line-height: 1.35; }
.card__cond { margin-top: 2px; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--ink-soft); }
.card__spec { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card__spec span { padding: 0 7px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 800; line-height: 1.7; color: var(--ink-soft); }
.card__pt { align-self: stretch; display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 8px; margin-top: auto; padding-top: 10px; }
.card__pt s { font-size: 12px; color: #8a7566; }

/* ───────── ランキング ───────── */
.ranks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; }
.ranks > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 0; }
.rank { --c: var(--fx); overflow: hidden; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 7px 0 var(--ink); }
.rank--bo { --c: var(--bo); }
.rank--crypto { --c: var(--crypto); }
.rank--token { --c: var(--token); }
.rank--mining { --c: var(--mining); }
.rank--auto { --c: var(--auto); }
.rank--predict { --c: var(--predict); }
.rank__head {
  --stroke: 4px;
  display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 12px; letter-spacing: .05em;
  border-bottom: 4px solid var(--ink); background: var(--c); color: #fff;
  font-family: var(--round); font-weight: 900; font-size: 21px;
}
.rank__head small { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--round); font-weight: 900; font-size: 12px; line-height: 1.7; letter-spacing: .1em; -webkit-text-stroke: 0; }
.rank__pal { flex: none; width: 48px; margin: -8px 0 -10px; }
.rank__ttl { flex: 1; }
.rk + .rk { border-top: 2px dashed var(--line); }
.rk__link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; transition: background-color .12s; }
.rk__link:hover { background: #fff6dc; }
.rk__no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; background: var(--cream); font-family: var(--heavy); font-weight: 400; font-size: 14px; line-height: 1; }
.rk--1 .rk__no { background: var(--yellow); width: 36px; height: 36px; font-size: 17px; margin: 0 -3px; }
.rk--2 .rk__no { background: #d5dbe1; }
.rk--3 .rk__no { background: #eaa76f; }
.rk__main { flex: 1; min-width: 0; line-height: 1.35; }
.rk__name, .rk__cond { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk__name { font-weight: 900; font-size: 14.5px; }
.rk__cond { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.rk__pt .pt { display: inline-grid; grid-template-columns: 1fr auto; align-items: baseline; }
.rk__pt .pt b { justify-self: end; }
.rk__pt .pt__per { grid-column: 1 / -1; justify-self: end; margin: 0; font-size: 10px; line-height: 1.2; }
.rk__pt .pt b { font-size: 19px; }
.rk__pt .pt i { font-size: 12px; }
.rank__more { display: block; padding: 10px; border-top: 4px solid var(--ink); background: var(--cream); text-align: center; font-weight: 900; font-size: 14px; }
.rank__more::after { content: " ▶"; font-size: .8em; }
.rank__more:hover { background: var(--yellow); }

/* ───────── しくみ ───────── */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px 14px; max-width: 940px; margin: 0 auto; }
.flow__node {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 178px; padding: 16px 12px; text-align: center;
  border: 4px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--ink);
}
.flow__node b { font-family: var(--heavy); font-weight: 400; font-size: 22px; line-height: 1.4; }
.flow__node small { font-size: 12px; color: var(--ink-soft); }
.flow__pal { width: 108px; }
.flow__pal--duo { display: flex; width: 168px; }
.flow__pal--duo .char { width: 50%; }
.flow__kanji {
  display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 6px;
  border: 4px solid var(--ink); border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px var(--aqua-d);
  font-family: var(--round); font-weight: 900; font-size: 42px; line-height: 1; color: var(--aqua-d);
}
.flow__kanji--red { color: var(--red); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px var(--red); }
.flow__arrow { text-align: center; }
.flow__arrow span { display: block; padding: 1px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 14px; font-weight: 900; white-space: nowrap; }
.flow__arrow::after { content: ""; display: block; width: 84px; height: 22px; margin: 8px auto 0; background: var(--ink); clip-path: polygon(0 32%, 72% 32%, 72% 0, 100% 50%, 72% 100%, 72% 68%, 0 68%); }
.flow__back {
  grid-column: 1 / -1; position: relative; padding: 9px 24px 10px 70px; text-align: center;
  border: 4px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff;
  font-family: var(--round); font-weight: 900; font-size: 19px; letter-spacing: .04em; box-shadow: 0 6px 0 var(--ink);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.flow__back::before { content: ""; position: absolute; left: 22px; top: 50%; width: 40px; height: 24px; margin-top: -12px; background: #fff; clip-path: polygon(100% 32%, 40% 32%, 40% 0, 0 50%, 40% 100%, 40% 68%, 100% 68%); }

.safe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.talk.talk--safe { margin-top: 52px; }
.safe__item { position: relative; padding: 18px 18px 18px 94px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); }
.safe__mark {
  position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 62px; height: 62px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--aqua);
  box-shadow: inset 0 0 0 3px var(--aqua), inset 0 0 0 5px #fff;
  font-family: var(--round); font-weight: 900; font-size: 28px; line-height: 1;
}
.safe__item h3 { font-size: 16.5px; font-weight: 900; }
.safe__item p { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.65; }

/* ───────── ポイント交換 ───────── */
.xstats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 30px; }
.xstats li { min-width: 210px; padding: 10px 24px 12px; text-align: center; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.xstats b { display: block; font-family: var(--heavy); font-weight: 400; font-size: 28px; line-height: 1.3; color: var(--red); }
.xstats span { font-size: 13.5px; font-weight: 800; }


/* ───────── こんな冒険者に ───────── */
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 980px; margin: 0 auto; }
.persona { --c: var(--fx); display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-content: start; padding: 20px 22px 22px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.persona--bo { --c: var(--bo); }
.persona--crypto { --c: var(--crypto); }
.persona--invite { --c: var(--campaign); }
.persona--auto { --c: var(--auto); }
.persona--predict { --c: var(--predict); }
.persona__voice { grid-column: 1 / -1; position: relative; margin-bottom: 18px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 16px; background: color-mix(in srgb, var(--c) 28%, #fff); font-weight: 900; line-height: 1.6; text-align: center; }
.persona__voice::after { content: ""; position: absolute; left: 36px; bottom: -13px; width: 20px; height: 20px; border: solid var(--ink); border-width: 0 3px 3px 0; background: inherit; transform: rotate(45deg) skew(12deg, 12deg); }
.persona__who { margin-top: 4px; font-weight: 900; font-size: 16.5px; line-height: 1.5; }
.persona__text { margin-top: 6px; font-size: 13.5px; }
.persona__pal { grid-row: 2 / span 2; width: 76px; }
.persona__who, .persona__text { grid-column: 2; }

/* ───────── FAQ ───────── */
.faq { margin-bottom: 16px; overflow: hidden; border: 4px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 5px 0 var(--ink); }
.faq__q { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 54px 13px 14px; font-weight: 900; font-size: 16px; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 18px; top: 50%; margin-top: -17px; font-family: var(--heavy); font-weight: 400; font-size: 24px; line-height: 34px; }
.faq[open] .faq__q::after { content: "−"; }
.faq__q:hover { background: #fff6dc; }
.faq__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 50%; font-family: var(--round); font-weight: 900; font-size: 19px; line-height: 1; }
.faq__icon--q { background: var(--red); color: #fff; }
.faq__icon--a { background: var(--aqua); }
.faq__a { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 16px 14px; border-top: 3px dashed var(--line); background: #fffaf0; }
.faq__a p { padding-top: 4px; font-size: 14.5px; font-weight: 700; }

/* ───────── 登録CTA ───────── */
.cta { position: relative; overflow: hidden; padding: 54px 0 60px; background: var(--confetti) 0 0 / 480px 320px, var(--ichimatsu) 0 0 / 48px 48px, var(--red); border-top: 4px solid var(--ink); }
.cta__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cta__cast { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 2px; max-width: 1080px; }
.cta__cast .char { flex: none; width: 90px; animation: bob .6s ease-in-out infinite alternate; }
.cta__cast .char:nth-child(2n) { animation-delay: -.3s; }
.cta__cast .char--poimaru { width: 124px; }
.cta__title { --stroke: 11px; font-family: var(--heavy); font-weight: 400; font-size: 46px; line-height: 1.3; color: #fff; text-shadow: 0 6px 0 var(--ink); }
.cta__lead { --stroke: 5px; margin: 10px 0 22px; font-size: 17px; font-weight: 900; color: #fff; }

/* ==========================================================================
   フッター
   ========================================================================== */
.maku { height: 50px; border-top: 4px solid var(--ink); background: var(--bunting) 0 2px / 96px 44px repeat-x, var(--paper); }
.ftr { border-top: 4px solid var(--ink); }
.ftr { padding: 44px 0 26px; background: var(--ink); color: #f1e2c2; }
.ftr__top { display: flex; justify-content: space-between; gap: 48px; }
.logo--ftr .logo__tag { background: var(--yellow); color: var(--ink); }
.logo--ftr .logo__name { color: #fff; }
.logo--ftr .logo__name em { color: var(--yellow); }
.ftr__lead { margin-top: 14px; font-size: 13px; font-weight: 700; text-wrap: pretty; word-break: auto-phrase; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 56px; }
.ftr h3 { margin-bottom: 10px; font-family: var(--round); font-weight: 900; font-size: 15px; letter-spacing: .06em; color: var(--yellow); }
.ftr__cols li { margin-bottom: 6px; font-size: 13.5px; }
.ftr__cols a:hover { color: var(--yellow); text-decoration: underline; }
.ftr__legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(241, 226, 194, .2); }
.ftr__legal p { font-size: 11.5px; font-weight: 500; line-height: 1.85; color: #cdb98f; }
.ftr__legal p + p { margin-top: 8px; }
.ftr__legal b { font-weight: 800; color: #f1e2c2; }
.ftr__copy { margin-top: 26px; text-align: center; font-size: 12px; letter-spacing: .02em; }

/* ==========================================================================
   一覧ページ
   ========================================================================== */
.pagehead { --c: var(--red); position: relative; overflow: hidden; padding: 26px 0 30px; border-bottom: 4px solid var(--ink); background: var(--c) repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 22px, transparent 22px 44px); }
.pagehead--fx { --c: var(--fx); }
.pagehead--bo { --c: var(--bo); }
.pagehead--crypto { --c: var(--crypto); }
.pagehead--token { --c: var(--token); }
.pagehead--mining { --c: var(--mining); }
.pagehead--auto { --c: var(--auto); }
.pagehead--predict { --c: var(--predict); }
.pagehead--exchange { --c: var(--exchange); }
.pagehead--nft { --c: var(--nft); }
.pagehead--vault { --c: #2b3a8a; }
.pagehead--board { --c: var(--navy-2); }
.pagehead--news { --c: var(--news); }
.pagehead--campaign { --c: var(--campaign); }
.pagehead--column { --c: var(--column); }
.pagehead--rank { --c: #d39400; }
.pagehead--guide { --c: #1f9d55; }
.pagehead--faq { --c: #2f7fc4; }
.pagehead--doc { --c: #4a5a8a; }
.pagehead--ranking { --c: #e07a10; }
.pagehead--invite { --c: var(--campaign); }
.pagehead--claim { --c: #2fa36b; }
/* 口座申請(claim.html) */
.claimpage { padding-bottom: 80px; }
.claimflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px; counter-reset: cf; }
.claimflow li { position: relative; padding: 34px 14px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.65; counter-increment: cf; }
.claimflow li::before { content: counter(cf); position: absolute; left: 12px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2fa36b; color: #fff; font-family: var(--heavy); font-size: 12px; }
.claimflow b { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 900; }
.claimpage__form { margin-top: 0; }
.claimpage__back .btn::before { content: "◀"; font-size: .7em; }
.cltabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 20px; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); }
.cltab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; border: 0; background: var(--cream-2); color: var(--ink-soft); cursor: pointer; }
.cltab + .cltab { border-left: 4px solid var(--ink); }
.cltab b { font-family: var(--heavy); font-weight: 400; font-size: 19px; line-height: 1.4; }
.cltab small { font-size: 12px; font-weight: 800; }
.cltab.is-on { background: #2fa36b; color: #fff; }
.cltab.is-on b { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.cltab__step { padding: 0 10px; border-radius: 999px; background: rgba(42, 23, 8, .14); font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; line-height: 1.7; }
.cltab.is-on .cltab__step { background: var(--ink); color: var(--yellow); }

/* 口座開設:対応ブローカーのカード */
.bgroup + .bgroup { margin-top: 28px; }
.bgroup__title { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.bgroup__title::after { content: ""; flex: 1; border-top: 2px dashed var(--line); }
.bgroup__title .chip { padding: 1px 16px; font-size: 13px; }
.bgroup__title small { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bcard { --c: var(--red); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.bcard:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.bcard__top { position: relative; display: grid; place-items: center; height: 100px; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--c); }
.bcard__top::before { content: ""; position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 12deg, transparent 12deg 24deg); }
.bcard__top .logoplate, .bcard__top .mark { position: relative; }
.bcard__top .logoplate--lg { width: 150px; max-width: calc(100% - 24px); height: 60px; }
.bcard:hover .bcard__top .logoplate { animation: pop .35s; }
.bcard__status { position: absolute; left: 6px; top: 6px; z-index: 1; }
.bcard__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 12px 14px; text-align: center; }
.bcard__name { margin: 0; font-family: var(--heavy); font-weight: 400; font-size: 18px; line-height: 1.3; }   /* h4 はブラウザ標準の余白があるので消す */
.bcard__quest { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.bcard__quest:hover { color: var(--ink); }
.bcard__cond { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink-soft); }
.bcard__reward { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bcard__reward small { flex: none; padding: 0 8px; border-radius: 4px; background: var(--ink); color: var(--yellow); font-size: 11px; font-weight: 900; line-height: 1.8; white-space: nowrap; }
.bcard__reward .pt b { font-size: 24px; }
.bcard__code { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.bcard__code code { padding: 0 6px; border-radius: 4px; background: var(--cream); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 12px; user-select: all; display: inline-block; overflow-wrap: anywhere; }   /* コードは途中で折らず、入らなければ次の行へ */
.bcard__acts { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding-top: 12px; }
.bcard__go { width: 100%; padding-inline: 8px; }
a.bcard__go::after { content: "↗"; font-family: var(--round); font-weight: 900; }
.bcard__sub { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
a.bcard__sub::after { content: " ↗"; }
.bcard__hint { display: none; margin-top: 2px; font-size: 11.5px; font-weight: 900; color: var(--red-d); }
.bcard__hint::after { content: " ▼"; font-size: .8em; }
.bcard__done { padding: 4px 12px; border-radius: 999px; background: var(--cream-2); font-size: 12.5px; font-weight: 900; }
/* 「口座を開設する」を押したあと:次の一歩(口座番号を申請する)を目立たせる */
.bcard.is-opened { box-shadow: 0 6px 0 var(--ink), 0 0 0 5px var(--yellow); }
.bcard.is-opened .bcard__hint { display: block; }
.bcard.is-opened .bcard__sub--next { padding: 6px 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); text-decoration: none; box-shadow: 0 4px 0 var(--ink); animation: bounce 1.8s ease-in-out infinite; }
.claimbox__pr { margin-top: 22px; padding-top: 14px; border-top: 2px dashed var(--line); }
.clpanel[hidden] { display: none; }
.claimbox__noacct { margin: 0; padding: 10px 12px; border: 2px dashed var(--ink); border-radius: 12px; background: #fff8dd; font-size: 13px; font-weight: 800; line-height: 1.7; }
.claimbox__noacct .btn { margin-top: 6px; }
/* 友達紹介(invite.html) */
.invitepage { padding-bottom: 80px; }
.invitepage__sec { margin-top: 64px; }
.perks__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.perk { --c: var(--campaign); position: relative; padding: 28px 18px 20px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--ink); text-align: center; }
.perk--share { --c: var(--red); }
.perk--friend { --c: var(--aqua-d); }
.perk__who { position: absolute; top: -14px; left: 50%; padding: 0 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.7; transform: translateX(-50%); white-space: nowrap; }
.perk__num { display: block; font-family: var(--heavy); font-weight: 400; font-size: 46px; line-height: 1.15; color: var(--c); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.perk__num i { margin-left: 2px; font-style: normal; font-size: .5em; }
.perk__text { margin-top: 8px; font-size: 13px; font-weight: 800; line-height: 1.65; }
.myref { margin-top: 30px; padding: 22px 26px 24px; }
.myref--guest { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.myref__title { font-family: var(--heavy); font-weight: 400; font-size: 19px; }
.myref__note { margin-top: 4px; font-size: 13.5px; font-weight: 700; }
.myref__link { display: flex; gap: 10px; margin-top: 12px; }
.myref__link .field__input { flex: 1; min-width: 0; background: #fff; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.myref__share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.myref__x { background: #111; color: #fff; }
.myref__line { background: #06c755; color: #fff; }
.myref__code { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.myref__code code { padding: 0 6px; border-radius: 4px; background: var(--cream); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.myref__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.myref__stats li { padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); text-align: center; }
.myref__stats small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.myref__stats b { font-family: var(--heavy); font-weight: 400; font-size: 26px; color: var(--red); }
.myref__stats i { margin-left: 2px; font-style: normal; font-size: .55em; color: var(--ink); }
.myref__h { margin: 20px 0 8px; font-size: 14.5px; font-weight: 900; }
.myref__list { display: grid; gap: 6px; }
.myref__list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13.5px; font-weight: 800; }
.myref__list small { color: var(--ink-soft); font-size: 12px; }
.myref__list em { margin-left: auto; font-style: normal; }
.myref__empty { margin-top: 16px; padding: 14px; border: 3px dashed var(--line); border-radius: 14px; text-align: center; font-weight: 800; }
.rankingpage { padding-bottom: 80px; }
.qrhow { margin: 18px 0 34px; padding: 18px 26px 20px; }
.qrhow__title { font-family: var(--heavy); font-weight: 400; font-size: 18px; }
.qrhow__list { margin-top: 6px; padding-left: 1.3em; list-style: disc; font-size: 13.5px; font-weight: 700; line-height: 1.85; }
.pagehead--ads { --c: var(--red); }
.pagehead--contact { --c: #2f9be1; }

/* 運営者情報・利用規約・プライバシーポリシー・広告掲載・お問い合わせ */
.docpage { padding-bottom: 80px; }
.doc { margin-top: 16px; padding: 30px 34px 34px; font-size: 14.5px; font-weight: 700; line-height: 1.95; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc a.btn { text-decoration: none; }
.doc__lead { font-size: 15px; font-weight: 800; }
/* 利用規約など、かための文書(見出しを落ち着いた書体に) */
.doc--formal .doc__h { font-family: var(--round); font-weight: 900; font-size: 16.5px; letter-spacing: .02em; }
.doc--formal .doc__h::before { width: 8px; height: 16px; border: 0; border-radius: 2px; background: var(--ink); }
.doc__h { display: flex; align-items: center; gap: 10px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 3px dashed var(--line); font-family: var(--heavy); font-weight: 400; font-size: 18px; line-height: 1.5; }
.doc__h::before { content: ""; flex: none; width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.doc__lead + .doc__h, .doc > .doc__h:first-child { margin-top: 18px; }
.doc__ol { padding-left: 1.6em; list-style: decimal; }
.doc__ol--paren { list-style: none; counter-reset: paren; padding-left: 2.4em; }
.doc__ol--paren > li { position: relative; counter-increment: paren; }
.doc__ol--paren > li::before { content: "(" counter(paren) ")"; position: absolute; left: -2.4em; }
.doc__ol li + li, .doc__ul li + li { margin-top: 4px; }
.doc__ul { padding-left: 1.4em; list-style: disc; }
.doc__table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.doc__table th, .doc__table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.doc__table th { width: 30%; border-right: 3px solid var(--ink); background: var(--cream-2); font-weight: 900; }
.doc__table tr + tr th, .doc__table tr + tr td { border-top: 2px dashed var(--line); }
.doc__table--info th { width: 26%; }
.doc__tbd { color: var(--ink-soft); }
.doc__date { margin-top: 30px; text-align: right; font-size: 13px; color: var(--ink-soft); }
.doc__note { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.doc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.doc__chips li { padding: 2px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 13.5px; font-weight: 900; }
.doc__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.doc__steps li { position: relative; padding: 38px 12px 14px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.7; counter-increment: step; }
.doc__steps li::before { content: counter(step); position: absolute; left: 12px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--heavy); font-size: 12px; }
.doc__steps b { display: block; font-size: 14.5px; font-weight: 900; }
.doc__cta { margin-top: 30px; text-align: center; }
.field__input--select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a1708' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; cursor: pointer; }
.field__input--area { height: auto; min-height: 180px; padding: 12px 16px; line-height: 1.75; resize: vertical; }
.contact { margin-top: 22px; }
.contact .check { margin-top: 6px; }
.contact .check a { text-decoration: underline; }
.contact__submit { margin-top: 18px; }
.contact__note { margin-top: 12px; text-align: center; }
.contact__done { padding: 20px 10px 6px; text-align: center; }
.contact__done-char { width: 110px; margin: 0 auto 6px; }
.contact__done-title { font-family: var(--heavy); font-weight: 400; font-size: 24px; }
.contact__done-title:focus { outline: none; }
.contact__done p { margin-top: 8px; }
.contact__done .btn { margin-top: 18px; }
.faqpage { padding: 6px 0 80px; }
.faqpage .talk { margin-top: 28px; }
.faqpage__more { margin-top: 36px; padding: 18px 22px; border: 3px dashed var(--ink); border-radius: 18px; background: var(--paper); text-align: center; font-weight: 800; }
.faqpage__more .btn { margin-top: 12px; }
body[data-page="guide"] #howto { padding-top: 36px; }   /* パンくずのすぐ下なので詰める */
.pagehead__in { position: relative; display: flex; align-items: center; gap: 22px; padding-right: 150px; }
.pagehead__pal { position: absolute; right: 0; bottom: -40px; width: 136px; animation: bob .8s ease-in-out infinite alternate; }
.pagehead__kanji {
  flex: none; display: grid; place-items: center; width: 92px; height: 92px;
  border: 5px solid var(--ink); border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 9px var(--c);
  font-family: var(--heavy); font-weight: 400; font-size: 46px; line-height: 1; color: var(--c);
}
.pagehead__title { --stroke: 8px; letter-spacing: .02em; font-family: var(--heavy); font-weight: 400; font-size: 38px; line-height: 1.3; color: #fff; text-shadow: 0 5px 0 var(--ink); }
.pagehead__desc { display: inline-block; margin-top: 8px; padding: 4px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.6; }

.crumb { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px 0 0; font-size: 12.5px; font-weight: 800; }
.crumb li + li::before { content: "▶"; margin-right: 8px; font-size: .7em; opacity: .5; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }

.layout { display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: start; padding: 22px 0 80px; }
.side__box { margin-bottom: 22px; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.side__title { padding: 7px 16px; border-bottom: 4px solid var(--ink); background: var(--yellow); font-family: var(--round); font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.side__list li + li { border-top: 2px dashed var(--line); }
.side__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; font-weight: 900; }
.side__link::before { content: ""; flex: none; width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--c, #fff); }
.side__link span { flex: 1; }
.side__link small { font-family: var(--heavy); font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.side__link:hover { background: #fff6dc; }
.side__link.is-current { background: var(--cream-2); }
.side__title--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding-right: 12px; letter-spacing: 0; }
.side__h { font: inherit; white-space: nowrap; }
.side__clear { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 900; line-height: 1.6; letter-spacing: 0; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .08s, box-shadow .08s; animation: pop .25s; }
.side__clear[hidden] { display: none; }
.side__clear:hover { background: #fff0ec; transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.side__clear:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.side__checks { padding: 10px 16px 14px; }
.check { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 800; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 3px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer; }
.check input:checked { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

.results__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.results__count { font-weight: 900; }
.results__count b { margin-right: 3px; font-family: var(--heavy); font-weight: 400; font-size: 26px; color: var(--red); }
.select { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 13.5px; }
.select label, .results__count { white-space: nowrap; }
.select select {
  appearance: none; -webkit-appearance: none; padding: 7px 40px 7px 16px;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a1708' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  font: inherit; font-weight: 900; color: var(--ink); cursor: pointer;
}
.empty { padding: 40px 20px 46px; text-align: center; border: 4px dashed var(--ink); border-radius: 22px; background: var(--paper); }
.empty__mascot { width: 130px; margin: 0 auto 6px; }
.empty__title { font-family: var(--heavy); font-weight: 400; font-size: 22px; }
.empty p { margin-top: 6px; }
.empty .btn { margin-top: 18px; }

/* ==========================================================================
   案件詳細ページ
   ========================================================================== */
.detail-wrap { padding-bottom: 80px; }
.detail { --c: var(--red); margin-top: 16px; overflow: hidden; border: 4px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 0 8px 0 var(--ink); }
.detail__top { display: grid; grid-template-columns: 330px 1fr; }
.detail__thumb { position: relative; display: grid; place-items: center; min-height: 290px; overflow: hidden; border-right: 4px solid var(--ink); background: var(--c); }
.detail__thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 10deg, transparent 10deg 20deg); animation: spin 90s linear infinite; }
.detail__thumb .mark { position: relative; }
.detail__thumb .badge { top: 14px; left: 14px; font-size: 16px; padding: 0 14px; }
.detail__thumb .badge--up { width: 76px; height: 76px; padding: 0; font-size: 19px; }
.detail__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-right: 54px; }
.detail__client { margin-top: 2px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.detail__client b { color: var(--ink); }
.detail--raid .detail__thumb { place-items: end center; background: radial-gradient(circle at 50% 62%, rgba(255, 90, 90, .55), transparent 62%), #2b2440; }
.detail__boss { position: relative; width: 250px; margin-bottom: -16px; animation: bob 1s ease-in-out infinite alternate; }
.detail__raid { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 2px 14px 5px; border: 3px solid var(--ink); border-radius: 8px; background: var(--red); color: #fff; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 12px; letter-spacing: .1em; line-height: 1.5; }
.detail__raid b { display: block; font-family: var(--heavy); font-weight: 400; font-size: 17px; letter-spacing: 0; }
.detail__main { position: relative; padding: 24px 28px 26px; }
.detail__main .fav { top: 20px; right: 20px; width: 44px; height: 44px; }
.detail__main .fav svg { width: 22px; height: 22px; }
.detail__name { margin-top: 8px; padding-right: 50px; font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.35; }
.detail__action { font-weight: 900; font-size: 15.5px; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail__tags li { padding: 1px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 800; }
.detail__get { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; padding: 16px 24px; outline: 3px dotted rgba(42, 23, 8, .5); outline-offset: -9px; border: 4px solid var(--ink); border-radius: 18px; background: conic-gradient(#ffd21e 25%, #ffc61a 0 50%, #ffd21e 0 75%, #ffc61a 0) 0 0 / 36px 36px; }
.detail__getlabel { padding: 1px 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 13.5px; }
.detail__get s { font-weight: 800; color: var(--ink-soft); }
.detail__get .pt { margin-left: auto; }
.detail__get .pt b { font-size: 52px; -webkit-text-stroke: 8px #fff; paint-order: stroke fill; }
.detail__get .pt i { font-size: 26px; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; }
.detail__get .pt__per { font-size: 14px; font-weight: 900; }
.detail__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 20px; }
.detail__cta .fine { flex: 1; min-width: 220px; }

.detail__body { padding: 28px; border-top: 4px solid var(--ink); background: var(--paper); }
.dl { border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #fff; }
.dl__row { display: grid; grid-template-columns: 190px 1fr; }
.dl__row + .dl__row { border-top: 2px dashed var(--line); }
.dl dt { display: flex; align-items: center; padding: 14px 18px; background: var(--cream-2); border-right: 3px solid var(--ink); font-weight: 900; }
.dl dd { margin: 0; padding: 14px 18px; font-weight: 700; }
.dl dd ul { list-style: disc; padding-left: 1.3em; }
.dl dd b { font-weight: 900; color: var(--red-d); font-size: 18px; }
.dl--spec dt { background: #e3ecf8; }
.spec__demo { color: var(--red-d); font-weight: 900; }

.detail__h { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-family: var(--heavy); font-weight: 400; font-size: 21px; }
.detail__h::before { content: ""; flex: none; width: 20px; height: 20px; border: 4px solid var(--ink); border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 2px #fff; }
.howto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: howto; }
.howto li { position: relative; padding: 16px 14px 14px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.6; counter-increment: howto; }
.howto li::before { content: counter(howto); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--heavy); font-weight: 400; font-size: 14px; line-height: 1; }
.caution { padding: 16px 20px; border: 3px solid var(--ink); border-radius: 16px; background: #fff0ec; }
.caution h3 { display: flex; align-items: center; font-weight: 900; font-size: 15.5px; }
.caution ul { margin-top: 6px; padding-left: 1.3em; list-style: disc; font-size: 13.5px; font-weight: 700; }

.related { margin-top: 56px; }
.related .sec-head { margin-bottom: 30px; }

.modal { width: min(440px, calc(100% - 32px)); padding: 0; border: 5px solid var(--ink); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 0 #000; }
.modal::backdrop { background: rgba(42, 23, 8, .7); }
.modal__in { padding: 28px 26px 26px; text-align: center; }
.modal__mascot { width: 110px; margin: 0 auto 4px; }
.modal__title { font-family: var(--heavy); font-weight: 400; font-size: 22px; }
.modal__text { margin-top: 8px; font-size: 14px; }
.modal__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.modal--form { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
.modal__in[hidden] { display: none; }
.modal__skip { flex-basis: 100%; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.detail__code { padding: 0 6px; border-radius: 4px; background: var(--cream); font-family: Consolas, Menlo, monospace; letter-spacing: .04em; user-select: all; }

/* ==========================================================================
   会員登録・ログイン
   ========================================================================== */
.auth { padding: 70px 0 90px; }
.auth__box { position: relative; width: min(520px, 100% - 32px); margin: 0 auto; border: 4px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 0 8px 0 var(--ink); }
.auth__mascot { position: absolute; left: 50%; top: -62px; width: 110px; margin-left: -55px; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-bottom: 4px solid var(--ink); border-radius: 20px 20px 0 0; }
.auth__tab { padding: 46px 8px 12px; border: 0; background: var(--cream-2); font-family: var(--round); font-weight: 900; font-size: 18px; letter-spacing: .04em; color: var(--ink-soft); }
.auth__tab + .auth__tab { border-left: 4px solid var(--ink); }
.auth__tab.is-on { background: var(--red); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.auth__panel { padding: 26px 30px 30px; }
.auth__panel[hidden] { display: none; }
.auth__lead { margin-bottom: 18px; text-align: center; font-weight: 800; }
.auth__ref { margin: -6px 0 18px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 14px; background: #ffe3f0; text-align: center; font-size: 13.5px; font-weight: 800; }
.auth__ref b { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 999px; background: var(--campaign); color: #fff; font-size: 12px; }
.auth__ref em { font-style: normal; font-family: var(--heavy); font-weight: 400; font-size: 1.15em; color: var(--red-d); }
.field { margin-bottom: 16px; }
.field__label { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-weight: 900; font-size: 14px; }
.field__req { padding: 0 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; line-height: 1.7; }
.field__input { width: 100%; height: 48px; padding: 0 16px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); font: inherit; font-weight: 700; color: var(--ink); }
.field__input:focus { outline: 0; box-shadow: 0 0 0 4px rgba(34, 195, 214, .5); background: #fff; }
/* かざり付きのプルダウン(PM.fancySelect。<select> を置きかえる) */
.fsel { position: relative; }
.fsel[hidden] { display: none; }
.fsel__native { display: none !important; }
.fsel__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 5px 8px 5px 12px;
  border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink);
  font: inherit; font-weight: 900; line-height: 1.4; text-align: left; box-shadow: 0 4px 0 var(--ink); cursor: pointer;
  transition: transform .08s, box-shadow .08s, background-color .12s;
}
.fsel__btn:hover { background: #fffbe6; }
.fsel.is-open .fsel__btn { background: #fff3c4; transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.fsel__btn[aria-invalid="true"] { border-color: var(--red); background: #fff0ec; }
.fsel__btn[disabled] { background: #ece6d8; color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
.fsel__value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.fsel__value--placeholder { padding-left: 4px; color: var(--ink-soft); font-weight: 800; }
.fsel__caret { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); transition: transform .18s; }
.fsel__caret::before { content: ""; margin-top: 2px; border: 6px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0; }
.fsel.is-open .fsel__caret { transform: rotate(180deg); }
.fsel__btn[disabled] .fsel__caret { background: #d8d0bf; }
.fsel__btn[disabled] .fsel__caret::before { border-top-color: var(--ink-soft); }

.fsel__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; padding: 8px;
  border: 4px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 7px 0 var(--ink);
  transform-origin: 50% 0; animation: fsel-in .16s ease-out;
}
.fsel__pop[hidden] { display: none; }
.fsel--up .fsel__pop { top: auto; bottom: calc(100% + 10px); transform-origin: 50% 100%; }
.fsel__list { position: relative; max-height: min(372px, 56vh); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }   /* 下の余白は、最後の行の影が切れないように */
.fsel__list:focus { outline: none; }
/* 検索窓 */
.fsel__search { position: relative; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px dashed var(--line); }
.fsel__search[hidden] { display: none; }
.fsel__q {
  width: 100%; height: 46px; padding: 0 44px 0 44px; border: 3px solid var(--ink); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%232a1708' stroke-width='3'/%3E%3Cpath d='M15.5 15.5 L21 21' stroke='%232a1708' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 15px center / 20px no-repeat;
  font: inherit; font-size: 16px; font-weight: 800; color: var(--ink);   /* 16px 未満だと iPhone で拡大されるので 16px */
}
.fsel__q::placeholder { color: var(--ink-soft); font-weight: 700; font-size: 14.5px; }
.fsel__q:focus { outline: 0; box-shadow: 0 0 0 4px rgba(34, 195, 214, .5); }
.fsel__clear { position: absolute; right: 9px; top: 9px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream-2); color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer; }
.fsel__clear[hidden] { display: none; }
.fsel__clear:hover { background: var(--yellow); }
.fsel__group { display: flex; align-items: center; gap: 10px; margin: 10px 4px 6px; }
.fsel__group:first-child { margin-top: 2px; }
.fsel__group::after { content: ""; flex: 1; border-top: 2px dashed var(--line); }
.fsel__group .chip { padding: 0 12px; font-size: 12px; }
.fsel__opt {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 10px;
  border: 3px solid transparent; border-radius: 12px; font-weight: 900; line-height: 1.4; cursor: pointer;
}
.fsel__opt + .fsel__opt { margin-top: 2px; }
.fsel__opt.is-active { border-color: var(--ink); background: #fff3c4; box-shadow: 0 3px 0 var(--ink); }
.fsel__opt.is-selected { background: #ffe9a8; }
.fsel__opt[aria-disabled="true"] { color: var(--ink-soft); cursor: not-allowed; }
.fsel__opt[aria-disabled="true"] .fsel__icon, .fsel__opt[aria-disabled="true"] .fsel__right { filter: grayscale(1); opacity: .55; }
.fsel__icon { flex: none; display: grid; place-items: center; min-width: 64px; }
.fsel__icon--glyph { min-width: 0; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 50%; background: var(--c, var(--yellow)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); font-family: var(--heavy); font-weight: 400; font-size: 15px; line-height: 1; color: var(--ink); }
.fsel__sub { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--ink-soft); }
/* 小さめの丸いボタン(並び替えなど) */
.fsel--compact { min-width: 218px; font-size: 14px; }
.fsel--compact .fsel__btn { min-height: 46px; padding: 4px 6px 4px 8px; border-radius: 999px; }
.fsel--compact .fsel__btn .fsel__icon--glyph { width: 30px; height: 30px; border-width: 2px; font-size: 13px; }
.fsel--compact .fsel__value--placeholder { padding-left: 10px; }
.fsel--compact .fsel__caret { width: 30px; height: 30px; }
.fsel--compact .fsel__caret::before { margin-top: 2px; border-width: 5px; border-top-width: 7px; border-bottom-width: 0; }
.fsel--compact .fsel__pop { left: auto; right: 0; min-width: 276px; }
.fsel--compact .fsel__opt { min-height: 54px; }
.fsel__icon .mark { --s: 32px; }
.fsel__label { flex: 1; min-width: 0; }
.fsel__label--mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .03em; word-break: break-all; }
.fsel__right { flex: none; }
.fsel__right .pt b { font-size: 20px; }
.fsel__right .pt i { font-size: 12.5px; }
.fsel__badge { flex: none; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #ddd5c4; color: var(--ink-soft); font-size: 11.5px; font-weight: 900; line-height: 1.7; white-space: nowrap; }
.fsel__badge--done { background: #2fa36b; color: #fff; }
.fsel__badge--pending { background: var(--yellow); color: var(--ink); }
.fsel__check { flex: none; width: 24px; height: 24px; border: 2px solid transparent; border-radius: 50%; }
.fsel__opt.is-selected .fsel__check { border-color: var(--ink); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fsel__empty { padding: 14px; text-align: center; font-weight: 800; color: var(--ink-soft); }
@keyframes fsel-in { from { opacity: 0; transform: scaleY(.92) translateY(-4px); } }

/* パスワードの目のマーク */
.pwfield { position: relative; }
.pwfield .field__input { padding-right: 58px; }
.pwfield .field__input::-ms-reveal { display: none; }
.pwfield__eye { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); transform: translateY(-50%); cursor: pointer; }
.pwfield__eye:hover { background: var(--cream-2); color: var(--ink); }
.pwfield__eye[aria-pressed="true"] { color: var(--red-d); }
.pwfield__eye svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.field__input[aria-invalid="true"] { border-color: var(--red); background: #fff0ec; }
.field__hint { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.field__err { margin-top: 4px; font-size: 12.5px; font-weight: 900; color: var(--red-d); }
.field__err:empty { display: none; }
.auth .check { align-items: flex-start; margin: 6px 0 4px; font-size: 13.5px; line-height: 1.55; }
.auth .check a { text-decoration: underline; }
.auth__submit { margin-top: 18px; }
.auth__note { margin-top: 16px; text-align: center; }
.auth__error { margin-bottom: 14px; padding: 10px 14px; border: 3px solid var(--red); border-radius: 12px; background: #fff0ec; color: var(--red-d); font-weight: 900; font-size: 14px; }
.auth__error[hidden] { display: none; }
.auth__error:focus { outline: none; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.auth__done { padding: 56px 30px 34px; text-align: center; }
.auth__done h2 { font-family: var(--heavy); font-weight: 400; font-size: 26px; }
.auth__done p { margin-top: 8px; }
.auth__done .btn { margin-top: 22px; }
/* ログインの2段階目(認証アプリの6桁か、リカバリーコード) */
.auth__lock { display: block; width: 72px; height: 72px; margin: -4px auto 6px; }
.auth__panel--totp .auth__lead small { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.auth__panel--totp .auth__lead small b { color: var(--red-d); }
.auth__panel--totp .field__hint b { color: var(--ink); }
.auth__panel--totp .fine a { text-decoration: underline; }
.auth__back { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth__back:hover { color: var(--ink); }
/* 認証コードの入力欄(数字が読みやすいように大きく・等幅) */
.field__input--code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .18em; text-align: center; }
.field__input--code::placeholder { letter-spacing: .18em; color: #c9bfae; }

/* ==========================================================================
   キャンペーン風の部品
   ========================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 吹き出し(形は背景に敷いて、影は形だけに付ける) */
.bubble { position: relative; z-index: 0; display: inline-grid; place-items: center; text-align: center; }
.bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; background: center / 100% 100% no-repeat; filter: drop-shadow(4px 6px 0 var(--ink)); }
.bubble--burst::before { background-image: var(--shape-burst); }
.bubble--cloud::before { background-image: var(--shape-cloud); }

/* 星バッジ */
.star { flex: none; display: inline-grid; place-items: center; width: 62px; height: 62px; background: var(--shape-star) center / contain no-repeat; font-family: var(--heavy); font-weight: 400; font-size: 25px; line-height: 1; color: var(--red-d); }

/* 斜めの日付バー */
.datebar {
  display: inline-flex; align-items: baseline; gap: 10px; margin: 20px 0 0 12px; padding: 1px 22px 5px;
  border: 4px solid var(--ink); background: #fff; color: var(--ink); box-shadow: -9px 9px 0 var(--yellow);
  font-family: var(--heavy); font-weight: 400; font-size: 27px; line-height: 1.4; white-space: nowrap;
  transform: rotate(-2deg) skewX(-7deg);
}
.datebar small, .camp__date small { margin-left: 2px; font-family: var(--round); font-weight: 900; font-size: .52em; }
.datebar i, .camp__date i { font-style: normal; font-size: .5em; transform: translateY(-.3em); }

/* ───────── 開催中のキャンペーン ───────── */
.camp {
  position: relative; border-top: 4px solid var(--ink);
  background:
    var(--confetti) 0 0 / 480px 320px,
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, .07) 0 5deg, transparent 5deg 10deg),
    var(--ichimatsu) 0 0 / 48px 48px,
    var(--red);
}
.camp__in { position: relative; padding-bottom: 46px; }
.camp__head { display: flex; align-items: flex-end; justify-content: center; margin-top: -76px; }
.camp__pal { flex: none; width: 128px; margin-bottom: 4px; }
.camp__pal .char { animation: bob .7s ease-in-out infinite alternate; }
.camp__pal--r .char { animation-delay: -.35s; }
.camp__burst { padding: 52px 124px 58px; margin: 0 -22px; }
.camp__title { font-family: var(--heavy); font-weight: 400; font-size: 44px; line-height: 1.15; letter-spacing: .02em; color: var(--red); white-space: nowrap; }
.camp__pre { display: block; margin-bottom: 2px; font-size: .6em; color: var(--ink); }
.camp__title small { display: table; margin: 0 auto 6px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--round); font-weight: 900; font-size: 14px; line-height: 1.9; letter-spacing: .08em; }
.camp__cloud { align-self: center; margin: 0 -26px 0 -10px; padding: 34px 34px 36px; font-family: var(--round); font-weight: 900; font-size: 16px; line-height: 1.45; transform: rotate(-7deg); }
.camp__cloud b { display: block; font-family: var(--round); font-weight: 900; font-size: 22px; color: var(--red-d); white-space: nowrap; }

.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
/* 報酬アップ中のクエストが3件に満たないときは、中央に寄せる */
.tickets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; margin-inline: auto; }
.tickets.tickets--1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.ticket {
  --stub: 158px;
  position: relative; display: block; min-width: 0;
  transition: transform .12s;
}
/* 切り欠きのある形に輪郭と段差の影を付ける(順に重ねると全周に太る) */
.ticket__body { height: 100%; filter: drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink)) drop-shadow(0 7px 0 var(--ink)); }
.ticket:hover { transform: translateY(-5px) rotate(-.8deg); }
.ticket__in {
  position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 20px; background: #fff;
  -webkit-mask:
    radial-gradient(circle 15px at 0 calc(100% - var(--stub)), transparent 14.5px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% calc(100% - var(--stub)), transparent 14.5px, #000 15px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 15px at 0 calc(100% - var(--stub)), transparent 14.5px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% calc(100% - var(--stub)), transparent 14.5px, #000 15px) right / 51% 100% no-repeat;
}
.ticket__in::before { content: ""; position: absolute; inset: 9px; border: 3px dotted rgba(42, 23, 8, .45); border-radius: 13px; pointer-events: none; }
.ticket__top { flex: 1; display: flex; align-items: center; gap: 14px; padding: 30px 26px 20px; }
.ticket__star { position: absolute; left: -16px; top: -20px; z-index: 1; width: 72px; height: 72px; font-size: 29px; transform: rotate(-14deg); }
.ticket__info { min-width: 0; }
.ticket__name { margin-top: 5px; font-size: 19px; font-weight: 900; line-height: 1.35; }
.ticket__cond { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.ticket__bottom { height: var(--stub); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0 22px; border-top: 3px dashed var(--ink); padding-bottom: 8px; }
.ticket__up { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ticket__up s { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.ticket__up i { font-style: normal; font-size: 12px; }
.ticket__up b { font-family: var(--heavy); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--red); }
.ticket__up b small { margin-left: 2px; font-size: .55em; }
.ticket__plus { position: absolute; right: 24px; top: calc(100% - var(--stub) - 13px); padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-style: normal; font-size: 12px; font-weight: 900; line-height: 1.7; }
.ticket__go { padding: 6px 24px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; font-size: 14.5px; box-shadow: 0 4px 0 var(--ink); }
.ticket__go::after { content: " ▶"; font-size: .75em; }

.camp__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 36px; }
.camp__note { font-family: var(--round); font-weight: 900; font-size: 21px; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.camp__date { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 14px; padding: 4px 16px 9px; background: var(--ink); color: #fff; font-family: var(--heavy); font-weight: 400; font-size: 36px; line-height: 1.35; }

.door__zones { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; }
.door__zone { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; line-height: 1.7; }
.door__zone--token { background: #ffd6ea; }
.door__zone--mining { background: #ffe9b0; }
.door__zone--nft { background: #dcdcff; }
.door__zone--exchange { background: #c9f4ee; }

/* 仮想通貨エリアのゾーン */
.zones { margin-top: 40px; padding: 22px 22px 24px; border: 4px solid var(--ink); border-radius: 22px; background: var(--bricks-w) 0 0 / 60px 60px, var(--exchange); box-shadow: 0 8px 0 var(--ink); }
.zones:empty { display: none; }
.zones__head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 18px; }
.zones__badge { padding: 1px 14px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); font-family: var(--heavy); font-weight: 400; font-size: 15px; }
.zones__title { --stroke: 6px; font-family: var(--heavy); font-weight: 400; font-size: 26px; color: #fff; -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.zones__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zone {
  --c: var(--exchange);
  display: flex; flex-direction: column; align-items: center; height: 100%; padding: 12px 10px 14px; text-align: center;
  border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.zone:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink); }
.zone--token { --c: var(--token); }
.zone--mining { --c: var(--mining); }
.zone--nft { --c: var(--nft); }
.zone__char { display: grid; place-items: end center; width: 96px; height: 96px; border: 4px solid var(--ink); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 4px #fff; overflow: hidden; }
.zone__char .char { width: 84px; margin-bottom: -4px; }
.zone:hover .zone__char .char { animation: pop .35s; }
.zone__area { margin-top: 8px; padding: 0 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.8; }
.zone__name { margin-top: 4px; font-family: var(--heavy); font-weight: 400; font-size: 21px; line-height: 1.3; }
.zone__lead { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); line-height: 1.5; }
.zone__meta { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 900; }
.zone__meta b { font-family: var(--heavy); font-weight: 400; font-size: 16px; color: var(--red); }

/* 一覧ページのゾーンタブ */
.ztabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ztabs[hidden] { display: none; }
.ztab { --c: var(--crypto); display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); font-size: 13.5px; line-height: 1.2; }
.ztab--token { --c: var(--token); }
.ztab--mining { --c: var(--mining); }
.ztab--nft { --c: var(--nft); }
.ztab--exchange { --c: var(--exchange); }
.ztab__char { flex: none; display: grid; place-items: end center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); overflow: hidden; }
.ztab__char .char { width: 34px; margin-bottom: -2px; }
.ztab b { flex: 1; font-weight: 900; }
.ztab small { font-family: var(--heavy); font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.ztab:hover { background: #fff8dd; }
.ztab.is-on { background: var(--c); color: #fff; transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ztab.is-on small { color: #fff; }
/* 準備中のゾーン(仮想通貨の トークン / マイニング / NFT)。入口・タブ・サイドバーに印をつける */
.door__zone.door__zone--prep { border-style: dashed; background: #ece7db; color: var(--ink-soft); }
.door__zone--prep i { margin-left: 4px; font-style: normal; font-size: 10px; }
.zone--prep .zone__char { filter: grayscale(.9); }
.zone--prep .zone__area { background: #5b6170; }
.zone__status { display: inline-block; padding: 0 16px; border: 3px solid var(--ink); border-radius: 999px; background: #5b6170; color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.7; letter-spacing: .06em; }
.ztab--prep .ztab__char { filter: grayscale(.9); }
.ztab__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ztab__txt b { flex: none; white-space: nowrap; }
.ztab__prep { flex: none; padding: 0 7px; border-radius: 999px; background: #5b6170; color: #fff; font-style: normal; font-size: 10px; font-weight: 900; line-height: 1.6; }
.ztab.is-on .ztab__prep { background: #fff; color: var(--ink); }
.side__prep { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #5b6170; color: #fff; font-style: normal; font-size: 10px; font-weight: 900; line-height: 1.7; vertical-align: 1px; }

/* サイドバーの入れ子(ゾーン) */
.side__sub { margin: -4px 0 6px; padding-left: 18px; border-left: 3px dotted var(--line); margin-left: 22px; }
.side__sub li + li { border-top: 0; }
.side__link--sub { padding: 5px 16px 5px 6px; font-size: 13.5px; }
.side__link--sub::before { width: 11px; height: 11px; border-width: 2px; }

/* 実在の業者のロゴの札 */
.logoplate { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.logoplate img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--ih, 40px); object-fit: contain; }
.logoplate--dark { background: #15172a; }
.logoplate--xs { --ih: 26px; width: 92px; height: 38px; padding: 4px 8px; border-width: 2px; border-radius: 8px; box-shadow: 0 2px 0 var(--ink); }
.logoplate--sm { --ih: 22px; width: 64px; height: 32px; padding: 3px 6px; border-width: 2px; border-radius: 8px; box-shadow: none; }
.logoplate--lg { --ih: 44px; width: 170px; height: 68px; padding: 9px 14px; }
.logoplate--xl { --ih: 70px; width: 250px; height: 110px; padding: 16px 22px; border-width: 4px; border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
.card:hover .logoplate { animation: pop .35s; }
.card__bosslogo { position: absolute; right: 8px; bottom: 8px; z-index: 1; }
.detail__bosslogo { position: absolute; left: 14px; bottom: 14px; z-index: 1; }
.ticket__top .logoplate--lg { --ih: 34px; width: 124px; height: 54px; padding: 7px 10px; }
.rk__link .logoplate--sm { width: 58px; }
.note .logoplate--sm { height: 30px; border-radius: 999px; }

/* ==========================================================================
   クエストランキング
   ========================================================================== */
.qr__title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.2; }
.qr__crown { width: 52px; height: auto; }
.qr__tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 4px solid var(--ink); }
.qr__tabs::-webkit-scrollbar { display: none; }
.qr__tab {
  position: relative; flex: 1 0 auto; min-width: 104px; padding: 14px 18px 12px; border: 0; background: transparent;
  color: var(--ink-soft); font-size: 16px; font-weight: 900; white-space: nowrap;
}
.qr__tab + .qr__tab::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; border-left: 2px solid var(--line); }
.qr__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.qr__tab.is-on { margin-bottom: -4px; border: 4px solid var(--ink); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 6px 0 var(--orange); }
.qr__tab.is-on::before, .qr__tab.is-on + .qr__tab::before { display: none; }
.qr__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 46px 20px; margin-top: 46px; }
.qr__item { position: relative; }
.qr__card {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 14px 14px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.qr__card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink); }
.qr__medal { position: absolute; left: -12px; top: -30px; z-index: 2; width: 58px; height: 58px; filter: drop-shadow(0 3px 0 rgba(42, 23, 8, .35)); }
.qr__item--top .qr__medal { width: 64px; height: 64px; top: -34px; }
.qr__card:hover .qr__medal { animation: wobble .4s ease-in-out 2 alternate; }
.qr__name { display: block; margin: 6px 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15.5px; font-weight: 900; line-height: 1.4; }
.qr__art {
  position: relative; display: grid; place-items: center; height: 132px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--c);
}
.qr__art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 12deg, transparent 12deg 24deg); }
.qr__art > * { position: relative; }
.qr__art .logoplate--lg { --ih: 40px; width: 86%; height: 62px; }
.qr__art .mark--lg { --s: 70px; }
.qr__art .badge { position: absolute; top: 6px; left: 6px; }
.qr__art .badge--up { top: 2px; left: 2px; width: 50px; height: 50px; font-size: 12px; }
.qr__pal { position: absolute; right: -4px; bottom: -8px; width: 62px; }
.qr__boss { width: 116px; align-self: end; margin-bottom: -12px; }
.qr__bosslogo { position: absolute; right: 6px; bottom: 6px; }
.qr__cond { display: block; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }
.qr__reward { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.qr__reward small { font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.qr__reward .pt { color: #ef6b3a; }
.qr__reward .pt b { font-size: 25px; }
.qr__reward .pt__per { font-size: 10.5px; }
.qr__note { margin-top: 30px; font-size: 13.5px; font-weight: 800; line-height: 1.7; }

/* ==========================================================================
   レイドボス
   ========================================================================== */
.raids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* レイドボスが4体に満たないとき(準備中のぶんは出さない)は、件数に合わせて並べる */
.raids--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raids--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.raids.raids--1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.raid { display: flex; flex-direction: column; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 0 #000; transition: transform .12s; }
.raid:hover { transform: translateY(-4px); }
.raid--top { box-shadow: 0 8px 0 #000, 0 0 0 5px var(--yellow); }
.raid__stage { position: relative; display: grid; place-items: end center; height: 186px; overflow: hidden; border-bottom: 4px solid var(--ink); background: radial-gradient(circle at 50% 62%, rgba(255, 90, 90, .6), transparent 62%), #2b2440; }
.raid__stage::before { content: ""; position: absolute; left: 50%; top: 60%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: repeating-conic-gradient(rgba(255, 255, 255, .07) 0 8deg, transparent 8deg 16deg); animation: spin 60s linear infinite; }
.raid__tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 0 12px; border: 3px solid var(--ink); border-radius: 6px; background: var(--red); color: #fff; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 12px; letter-spacing: .1em; line-height: 1.9; }
.raid__monster { position: relative; width: 176px; margin-bottom: -14px; animation: bob 1s ease-in-out infinite alternate; }
.raid__body { flex: 1; display: flex; flex-direction: column; padding: 14px 18px 18px; }
.raid__boss { font-family: var(--heavy); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--red-d); }
.raid__hp { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 12px; }
.raid__hp i { flex: 1; height: 15px; border: 3px solid var(--ink); border-radius: 8px; background: linear-gradient(180deg, #ff7783, var(--red)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.raid__hp b { font-family: var(--heavy); font-weight: 400; font-size: 14px; }
.raid__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.raid__quest { margin-top: 6px; font-size: 16px; font-weight: 900; line-height: 1.4; }
.raid__client { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.raid__cond { margin-top: 8px; padding: 8px 10px; border: 2px dashed var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.55; }
.raid__cond b { display: block; font-size: 11px; font-weight: 900; color: var(--red-d); }
.raid__foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 12px; }
.raid__foot .btn { width: 100%; }
.raid__reward small { display: block; font-size: 11px; font-weight: 900; color: var(--ink-soft); }
.raid__reward .pt b { font-size: 30px; }
.raid-warn .r18 { flex: none; }
.raid-warn { display: flex; align-items: center; gap: 4px; max-width: 900px; margin: 34px auto 0; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 12px; background: #fff0ec; font-size: 13.5px; font-weight: 800; line-height: 1.6; }

/* ==========================================================================
   冒険者ランク
   ========================================================================== */
.ranksys { position: relative; max-width: 1000px; margin: 0 auto; padding-top: 10px; }
.ranksteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: end; }
.rankstep {
  display: flex; flex-direction: column; align-items: center; margin-bottom: calc(var(--i) * 28px); padding: 16px 12px 18px; text-align: center;
  border: 4px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 6px 0 var(--ink);
}
.rankstep__emblem { width: 112px; height: auto; overflow: visible; margin-top: 8px; }
.rankstep:hover .rankstep__emblem { animation: pop .35s; }
.rankstep__need { margin-top: 10px; font-size: 13px; font-weight: 800; }
.rankstep__need b { font-family: var(--heavy); font-weight: 400; font-size: 18px; color: var(--red-d); }
.rankstep__perk { margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: var(--cream-2); font-size: 12.5px; font-weight: 900; line-height: 1.5; }
.rankstep--legend { background: linear-gradient(160deg, #2a1f55, #5b3fae); color: #fff; }
.rankstep--legend .rankstep__need b { color: var(--yellow); }
.rankstep--legend .rankstep__perk { background: rgba(255, 255, 255, .16); }
.ranksys__note { margin-top: 20px; text-align: center; }
/* 自分のランク(いまここ) */
.rankstep { position: relative; }
.rankstep--current { outline: 4px solid var(--red); outline-offset: 4px; }
.rankstep__now { position: absolute; top: -16px; left: 50%; z-index: 1; padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.7; white-space: nowrap; transform: translateX(-50%) rotate(-4deg); }

/* 冒険者ランクのページ(rank.html) */
.rankpage { padding-bottom: 80px; }
.rankpage__sec { margin-top: 70px; }
.myrank { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 24px; margin-top: 18px; padding: 22px 28px; }
.myrank__loading { grid-column: 1 / -1; padding: 30px 0; text-align: center; font-weight: 800; color: var(--ink-soft); }
.myrank__emblem .emblem { display: block; width: 124px; height: auto; overflow: visible; margin: 0 auto; }
.myrank--guest .myrank__emblem { filter: grayscale(.6); opacity: .8; }
.myrank__label { font-size: 13.5px; font-weight: 900; color: var(--ink-soft); }
.myrank__name { margin-top: 2px; font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.35; }
.myrank--guest .myrank__name { font-size: 24px; }
.myrank__perk { display: inline-block; margin-top: 6px; padding: 2px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 13px; font-weight: 900; }
.myrank__note { margin-top: 6px; font-size: 13.5px; font-weight: 700; }
.myrank__btns { display: flex; flex-direction: column; gap: 14px; }
.rankrules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; counter-reset: rr; }
.rankrules li { position: relative; padding: 18px 22px 20px 70px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink); counter-increment: rr; }
.rankrules li::before { content: counter(rr); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--heavy); font-weight: 400; font-size: 17px; line-height: 1; }
.rankrules b { display: block; font-size: 16.5px; font-weight: 900; line-height: 1.5; }
.rankrules p { margin-top: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.rankpage__cta { max-width: 820px; margin: 64px auto 0; }
.rankbar__more { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.rankbar__more::after { content: " ▶"; font-size: .75em; }

/* ==========================================================================
   換金所
   ========================================================================== */
/* 交換先の名前帯(公式ロゴの代わり) */
.xtile {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 76px; padding: 8px 12px; overflow: hidden;
  border: 2px solid #ead9b0; border-radius: 14px; background: #fff;
}
.xtile i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-family: Arial, sans-serif; font-weight: 900; font-size: 19px; line-height: 1; }
.xtile b { font-family: var(--round); font-weight: 900; font-size: 19px; line-height: 1.2; color: var(--c); text-align: center; letter-spacing: .01em; }
.xtile--logo img { display: block; width: auto; height: auto; max-width: 84%; max-height: 40px; }
.xtile--amazon img { max-height: 38px; }
.xtile--paypay img { max-height: 30px; }
.xtile--rakuten img { max-height: 34px; }
.xtile--dpoint img { max-height: 58px; }
.xtile--apple img, .xtile--eth img { max-height: 50px; }
.xtile--googleplay img { max-height: 34px; }
.xtile--marks { gap: 10px; }
.xtile--marks img { max-height: 40px; max-width: none; }
.xform__head .xtile--marks img { max-height: 30px; }
.xform__head .xtile--marks { gap: 6px; }

/* 暗号資産の通貨えらび */
.coinpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.coinpick__opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border: 3px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: center; }
.coinpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.coinpick__opt img { height: 34px; width: auto; }
.coinpick__opt b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.coinpick__opt small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.coinpick__opt:has(input:checked) { border-color: var(--ink); background: #fff8dd; box-shadow: 0 4px 0 var(--ink); }
.coinpick__opt:has(input:focus-visible) { outline: 4px solid var(--aqua-d); outline-offset: 2px; }

.xcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.xcards--top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xcard {
  display: flex; flex-direction: column; padding: 14px 14px 16px;
  border: 4px solid var(--yellow-d); border-radius: 22px; background: linear-gradient(#fffdf2, var(--paper)); box-shadow: 0 6px 0 #c9a04a;
  color: var(--ink);
}
.xcard__name { margin-top: 12px; min-height: 2.7em; font-size: 15px; font-weight: 900; line-height: 1.35; }
.xcard__min { margin-top: 4px; font-size: 13px; font-weight: 900; color: #a07a43; }
.xcard__min b { margin-right: 1px; font-family: var(--heavy); font-weight: 400; font-size: 24px; color: var(--ink); }
.xcard__rate { font-size: 12px; font-weight: 800; color: #a07a43; }
.xcard__btn { display: block; margin-top: 12px; padding: 8px 6px; border-radius: 999px; text-align: center; font-size: 13.5px; font-weight: 900; }
.xcard__btn--short { background: #f3e5c3; color: #a07a43; }
.xcard__btn--go { border: 3px solid var(--ink); background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.xcard__btn--go:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.xcard__btn--join { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 0 4px 0 var(--ink); }
.sec--vault .xcard { box-shadow: 0 6px 0 #000; }

.xpage { padding-bottom: 80px; }
.wallet { margin: 18px 0 34px; padding: 18px 24px; border: 4px solid var(--ink); border-radius: 20px; background: radial-gradient(circle at 90% 20%, rgba(255, 198, 26, .35), transparent 50%), var(--navy); color: #fff; box-shadow: 0 7px 0 var(--ink); }
.wallet__in { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px; }
.wallet__label { font-weight: 900; font-size: 15px; }
.wallet__balance { font-family: var(--heavy); font-weight: 400; font-size: 22px; color: var(--yellow); }
.wallet__balance b { font-size: 46px; line-height: 1.1; margin-right: 3px; font-weight: 400; }
.wallet__balance small { margin-left: 10px; font-family: var(--round); font-weight: 900; font-size: 14px; color: #fff; }
.wallet__hint { flex-basis: 100%; font-size: 13.5px; font-weight: 800; color: #e4e8ff; }
.wallet__hint b { color: var(--yellow); }
.wallet__hint a { margin-left: 8px; color: var(--yellow); text-decoration: underline; }
.wallet__btns { display: flex; gap: 10px; margin-left: auto; }
.xgroup { margin-bottom: 36px; }
.xgroup__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 4px dotted var(--line); font-family: var(--heavy); font-weight: 400; font-size: 23px; }
.xgroup__title small { font-family: var(--round); font-weight: 900; font-size: 13px; color: var(--ink-soft); }
.xnotes ul { padding: 16px 20px 16px 36px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; list-style: disc; font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.xnotes a { text-decoration: underline; }

/* 交換の申請フォーム */
.xform { text-align: left; }
.xform__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.xform__head .xtile { flex: none; width: 150px; height: 64px; }
.xform__head .xtile b { font-size: 15px; }
.xform__meta { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.xform__amount { display: flex; align-items: center; gap: 8px; }
.xform__amount input { font-family: var(--heavy); font-weight: 400; font-size: 24px; }
.xform__amount span { font-family: var(--heavy); font-weight: 400; font-size: 22px; }
.xform__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xform__chip { padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 900; }
.xform__chip:hover { background: var(--yellow); }
.xform__extra { margin: 6px 0 12px; padding: 12px 14px 4px; border: 3px dashed var(--line); border-radius: 14px; }
.xform__extra[hidden] { display: none; }
.xform__extra legend { padding: 0 6px; font-weight: 900; font-size: 14px; }
.xform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.xform__mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.xform__net { padding: 0 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.8; white-space: nowrap; }
.xform .check { align-items: flex-start; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.xform .modal__btns { justify-content: flex-start; }

/* ==========================================================================
   冒険の記録(マイページ)
   ========================================================================== */
.mypage { padding-bottom: 80px; }
.mypage__loading { padding: 80px 0; text-align: center; font-weight: 900; }
.card-plain { border: 4px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 7px 0 var(--ink); }
.profile { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 22px; margin-top: 16px; padding: 22px 26px; }
.profile__emblem .emblem { width: 120px; height: auto; overflow: visible; }
.profile__hello { font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.profile__name { font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.3; }
.profile__since { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.rankbar { margin-top: 10px; max-width: 460px; }
.rankbar__track { height: 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.rankbar__track i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--yellow-d)); }
.rankbar__text { margin-top: 4px; font-size: 12.5px; font-weight: 800; }
.rankbar__text b { color: var(--red-d); }
.profile__wallet { position: relative; width: 268px; padding: 16px 18px 18px; border: 3px solid var(--ink); border-radius: 18px; background: radial-gradient(circle at 88% 10%, rgba(255, 198, 26, .32), transparent 46%), var(--navy); color: #fff; text-align: center; box-shadow: 0 5px 0 var(--ink); }
.profile__pal { position: absolute; right: -18px; top: -46px; width: 76px; pointer-events: none; }
.profile__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.profile__label { font-size: 12px; font-weight: 900; color: #cfd5ff; }
.profile__balance { font-family: var(--heavy); font-weight: 400; font-size: 20px; color: var(--yellow); }
.profile__balance b { font-weight: 400; font-size: 40px; margin-right: 2px; }
.profile__go { display: flex; width: 100%; margin-top: 10px; padding: 10px 16px; font-size: 16px; }
/* 名前の横の小さなボタン:「名前を変える」と「アカウントの守り」(2段階認証の入口。専用ページ security.html へ。盾のマークと「有効/未設定」の印) */
.profile__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 4px; }
.profile__rename { display: inline-block; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 900; color: var(--ink); cursor: pointer; }
.profile__rename:hover { background: var(--yellow); }
.profile__rename[aria-expanded="true"] { background: var(--yellow); }
.profile__guard { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 5px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; line-height: 1.5; color: var(--ink); text-decoration: none; }
.profile__guard:hover { background: var(--yellow); }
.profile__guard__icon { flex: none; width: 18px; height: 18px; }
.profile__guard__state { padding: 0 7px; border-radius: 999px; background: #ffe08a; color: var(--red-d); font-size: 10.5px; line-height: 1.75; white-space: nowrap; }
.profile__guard:not(.profile__guard--on):hover .profile__guard__state { background: #fff; }
.profile__guard--on .profile__guard__state { background: #3bbf6a; color: #fff; }
.profile__logout { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 2px 2px 2px 12px; border: 0; border-left: 2px solid rgba(42, 23, 8, .22); border-radius: 0; background: none; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.profile__logout:hover { color: var(--red-d); }
.profile__logout__icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 冒険者の名前(ニックネーム)を決める・変える欄(登録では決めない。未設定なら開いた状態で出す) */
.nickset { display: flex; align-items: flex-start; gap: 18px; margin-top: 18px; padding: 20px 24px 22px; background: linear-gradient(180deg, #fff6d6, var(--paper)); }
.nickset[hidden] { display: none; }
.nickset__pal { flex: none; width: 92px; margin-top: 4px; }
.nickset__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.nickset__main { flex: 1; min-width: 0; }
.nickset__title { margin: 0 0 4px; font-family: var(--heavy); font-weight: 400; font-size: 21px; }
.nickset__lead { margin-bottom: 14px; font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }
.nickset__form { max-width: 460px; }
.nickset__form .field { margin-bottom: 12px; }
.nickset__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nickset__submit { padding: 10px 24px; font-size: 16px; }

/* ギルドの受付:報酬金をもらうまでの3ステップ(口座申請ページの STEP と同じ並び)と友達紹介 */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; }
.desk__steps { padding: 20px 22px 22px; }
.desk__head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.desk__title { margin: 0; font-size: 19px; }
.desk__more { font-size: 12.5px; font-weight: 900; color: var(--ink-soft); text-decoration: underline; }
.desk__guide { display: flex; align-items: center; gap: 12px; margin: 12px 0 24px; }
.desk__pal { flex: none; width: 58px; }
.desk__say { position: relative; flex: 1; min-width: 0; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); font-size: 13.5px; font-weight: 900; line-height: 1.6; }
.desk__say::before, .desk__say::after { content: ""; position: absolute; left: -15px; top: 50%; border: 8px solid transparent; border-right: 12px solid var(--ink); border-left: 0; transform: translateY(-50%); }
.desk__say::after { left: -10px; border-right-color: var(--yellow); }
.desk__say b { color: var(--red-d); }
.desk__say a { text-decoration: underline; }
.qsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.qstep { position: relative; }
.qstep:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 50%; margin-top: -11px; border: 11px solid transparent; border-left: 15px solid var(--ink); border-right: 0; }
.qstep__link { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 20px 10px 14px; text-align: center; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.qstep__link:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.qstep__link:hover .qstep__icon { animation: pop .35s; }
.qstep__num { position: absolute; top: -17px; left: 50%; margin-left: -18px; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 50%; background: var(--red); color: #fff; font-family: var(--heavy); font-weight: 400; font-size: 17px; line-height: 1; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 4px #fff; }
.qstep--2 .qstep__num { background: var(--aqua); box-shadow: inset 0 0 0 2px var(--aqua), inset 0 0 0 4px #fff; }
.qstep--3 .qstep__num { background: var(--yellow-d); box-shadow: inset 0 0 0 2px var(--yellow-d), inset 0 0 0 4px #fff; }
.qstep__icon { width: 56px; height: 56px; margin: 4px 0 6px; }
.qstep__title { font-family: var(--heavy); font-weight: 400; font-size: 17px; line-height: 1.3; }
.qstep__text { margin-top: 3px; font-size: 11.5px; font-weight: 800; line-height: 1.5; color: var(--ink-soft); }
.qstep__states { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
.qstep__states[hidden] { display: none; }
.qstep__state { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream-2); font-size: 11.5px; font-weight: 900; line-height: 1.8; white-space: nowrap; }
.qstep__state--pending { background: var(--yellow); }
.qstep__state--done { background: #3bbf6a; color: #fff; }
.qstep__state--rejected { background: #ddd5c4; color: var(--ink-soft); }
.qstep__now { display: none; position: absolute; top: -14px; right: -8px; z-index: 1; padding: 0 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; white-space: nowrap; transform: rotate(6deg); }
.qstep--next .qstep__now { display: block; }
.qstep--next .qstep__link { outline: 4px solid var(--red); outline-offset: 3px; }
.qstep--done .qstep__link { background: #f2fbf4; }
.invite-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 22px 118px 22px 24px; overflow: hidden; background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .3), transparent 42%), var(--pink); color: #fff; transition: transform .12s, box-shadow .12s; }
.invite-card:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ink); }
.invite-card:hover .invite-card__pal .char { animation: pop .35s; }
.invite-card__pal { position: absolute; right: 8px; bottom: -6px; width: 104px; pointer-events: none; }
.invite-card__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.invite-card__tag { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--pink); font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.invite-card__title { font-family: var(--heavy); font-weight: 400; font-size: 21px; line-height: 1.3; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.invite-card__perk { font-size: 12.5px; font-weight: 900; line-height: 1.6; }
.invite-card__perk b { font-family: var(--heavy); font-weight: 400; font-size: 15px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.invite-card__btn { margin-top: 6px; }
/* 毎日ガチャ(gacha.html。冒険の記録から分けた専用ページ。1日1回・無料。ガチャの機械は gacha.html の SVG、動きはここ。中身は gacha.js の render) */
.gacha { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 16px 26px; margin-top: 18px; padding: 20px 150px 22px 24px; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(255, 198, 26, .35), transparent 38%), var(--paper); }
.gacha__machine { width: 190px; filter: drop-shadow(0 6px 0 rgba(42, 23, 8, .9)); }
.gmachine { display: block; width: 100%; height: auto; overflow: visible; }
.gmachine__knob { transform-origin: 100px 198px; }
.gmachine__balls > g { transform-origin: center; }
.gmachine__drop { opacity: 0; transform-origin: 100px 238px; }
.gacha.is-spinning .gmachine__knob { animation: gacha-knob .7s linear infinite; }
.gacha.is-spinning .gmachine__balls { animation: gacha-shake .18s ease-in-out infinite alternate; }
.gacha.is-spinning .gmachine__balls > g:nth-child(odd) { animation: gacha-jump .36s ease-in-out infinite alternate; }
.gacha.is-spinning .gmachine__balls > g:nth-child(even) { animation: gacha-jump .3s ease-in-out .1s infinite alternate-reverse; }
.gacha.is-dropped .gmachine__drop, .gacha.is-won .gmachine__drop { opacity: 1; animation: gacha-drop .5s cubic-bezier(.3, 1.6, .5, 1); }
.gacha.is-won .gmachine__drop { animation: gacha-wobble .5s ease-in-out 2 alternate; }
.gacha.is-won::before { content: ""; position: absolute; inset: 0; background: var(--confetti); background-size: 480px 320px; opacity: 0; animation: gacha-confetti 2.4s ease-out; pointer-events: none; }
.gacha__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gacha__tag { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.gacha__streak { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.gacha__streak[hidden] { display: none; }
.gacha__streak b { color: var(--red-d); font-size: 14px; }
.gacha__streak em { font-style: normal; color: var(--red-d); }
.gacha__title { margin-top: 8px; font-family: var(--heavy); font-weight: 400; font-size: 27px; line-height: 1.2; }
.gacha__lead { margin-top: 4px; font-size: 13.5px; font-weight: 800; line-height: 1.7; }
.gacha__lead b { color: var(--red-d); }
.gacha__stage { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.gacha__btn { padding: 13px 28px; font-size: 17px; }
.gacha__btn:disabled { animation: none; opacity: .7; cursor: wait; }
.gacha__note { font-size: 12.5px; font-weight: 800; line-height: 1.6; color: var(--ink-soft); }
.gacha__note b { color: var(--ink); }
.gacha__total { width: 100%; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.gacha__total b { color: var(--ink); }
.gacha__retry { margin-left: 6px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.gacha__result { --c: #b9b9b9; display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "stars stars" "prize rarity"; align-items: baseline; column-gap: 10px; padding: 10px 20px 12px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 4px var(--c); }
.gacha__result.is-new { animation: pop .5s; }
.gacha__result .gacha__stars { grid-area: stars; font-size: 15px; letter-spacing: .08em; color: var(--c); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.gacha__prize { grid-area: prize; font-family: var(--heavy); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--red-d); }
.gacha__rarity { grid-area: rarity; padding: 0 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.8; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.gacha__result--c, .gacha__row--c { --c: #a8a8a8; }
.gacha__result--u, .gacha__row--u { --c: #3bbf6a; }
.gacha__result--r, .gacha__row--r { --c: var(--aqua); }
.gacha__result--sr, .gacha__row--sr { --c: #9b6bff; }
.gacha__result--ur, .gacha__row--ur { --c: var(--orange); }
.gacha__result--lg, .gacha__row--lg { --c: var(--red); }
.gacha__result--lg { background: linear-gradient(135deg, #fff 0 45%, #fff1b8 55%, #fff) ; }
.gacha__odds { margin-top: 12px; font-size: 12.5px; }
.gacha__odds summary { display: inline-block; font-weight: 900; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.gacha__table { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.gacha__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 800; }
.gacha__row .gacha__stars { font-size: 11px; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: .6px var(--ink); paint-order: stroke fill; }
.gacha__rowname { font-size: 12px; }
.gacha__row b { font-family: var(--heavy); font-weight: 400; font-size: 13px; }
.gacha__pal { position: absolute; right: 14px; bottom: -8px; width: 124px; pointer-events: none; }
/* 冒険のはじめかた「報酬金のしくみ」の毎日ガチャの一言 */
.flow__plus { display: flex; align-items: flex-start; gap: 10px; margin: 18px auto 0; max-width: 760px; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.7; }
.flow__plusmark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 15px; font-weight: 900; line-height: 1; }
.flow__plus a { text-decoration: underline; }
.flow__plus b { color: var(--red-d); }
.gacha.is-spinning .gacha__pal .char, .gacha.is-won .gacha__pal .char { animation: hop .7s ease-in-out infinite; }
@keyframes gacha-knob { to { transform: rotate(360deg); } }
@keyframes gacha-shake { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes gacha-jump { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes gacha-drop { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 60% { opacity: 1; transform: translateY(4px) scale(1.05); } 100% { transform: translateY(0) scale(1); } }
@keyframes gacha-wobble { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes gacha-confetti { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
/* 運命の宝箱(bet.html。冒険の記録から分けた専用ページ。手持ちの報酬金をかけて、ハズレ(0倍)〜100倍の倍率を引く。宝箱は bet.html の SVG(クラス名は、トップのメインビジュアルの .chest とかぶらないよう bchest)、動きはここ。中身は bet.js の render) */
.betting { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 16px 26px; margin-top: 18px; padding: 20px 150px 22px 24px; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(91, 91, 214, .2), transparent 38%), var(--paper); }
.betting[hidden] { display: none; }
.betting__art { position: relative; align-self: center; width: 200px; padding-top: 48px; }
.bchest { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 0 rgba(42, 23, 8, .9)); }
.bchest__lid { transform-origin: 30px 102px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bchest__inside { opacity: 0; transition: opacity .15s; }
.bchest__coins, .bchest__dust { opacity: 0; transform-origin: 110px 96px; }
.betting.is-spinning .bchest { animation: chest-shake .14s ease-in-out infinite alternate; }
.betting.is-open .bchest__lid { transform: rotate(-32deg); }
.betting.is-open .bchest__inside { opacity: 1; }
.betting.is-open.is-win .bchest__coins, .betting.is-open.is-even .bchest__coins, .betting.is-open.is-back .bchest__coins { opacity: 1; animation: coins-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.betting.is-open.is-back .bchest__coins { opacity: .5; }
.betting.is-open.is-miss .bchest__dust { opacity: 1; animation: dust-puff .5s ease-out; }
.betting.is-open.is-win::before { content: ""; position: absolute; inset: 0; background: var(--confetti); background-size: 480px 320px; opacity: 0; animation: gacha-confetti 2.4s ease-out; pointer-events: none; }
/* 倍率の札(宝箱の上。回っているあいだは数字がパラパラ変わり、開くと出た倍率で止まる) */
.betting__mult { --c: var(--ink); position: absolute; left: 62%; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: center; width: 112px; height: 112px; padding-top: 38px; translate: -50% 0; background: var(--shape-burst) center / contain no-repeat; font-family: var(--heavy); font-weight: 400; color: var(--c); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.betting__mult b { font-weight: 400; font-size: 30px; line-height: 1; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.betting__multx { margin-right: 2px; font-size: 14px; }
.betting.is-spinning .betting__mult, .betting.is-open .betting__mult { opacity: 1; transform: scale(1); }
.betting.is-spinning .betting__mult { animation: mult-flicker .18s ease-in-out infinite alternate; }
.betting__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.betting__tag { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--navy); color: var(--yellow); font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.betting__left { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.betting__left[hidden] { display: none; }
.betting__left b { color: var(--red-d); font-size: 14px; }
.betting__left.is-out { background: #ddd5c4; color: var(--ink-soft); }
.betting__title { margin-top: 8px; font-family: var(--heavy); font-weight: 400; font-size: 27px; line-height: 1.2; }
.betting__lead { margin-top: 4px; font-size: 13.5px; font-weight: 800; line-height: 1.7; }
.betting__lead b { color: var(--red-d); }
.betting__stage { margin-top: 14px; }
/* かける金額の入力(数字・はやいえらび・開けるボタン) */
.betting__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "input go" "quick quick" "note note" "err err"; align-items: center; gap: 8px 12px; max-width: 560px; }
.betting__label { grid-area: label; font-size: 13px; font-weight: 900; }
.betting__label small { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.betting__input { grid-area: input; position: relative; }
.betting__stake { height: 52px; padding-right: 44px; font-family: var(--heavy); font-weight: 400; font-size: 24px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.betting__stake::-webkit-outer-spin-button, .betting__stake::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.betting__stake:disabled { opacity: .6; }
.betting__unit { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-family: var(--heavy); font-size: 16px; color: var(--ink-soft); pointer-events: none; }
.betting__go { grid-area: go; padding: 12px 26px; font-size: 17px; }
.betting__go:disabled { animation: none; opacity: .6; pointer-events: none; }
.betting__quick { grid-area: quick; display: flex; flex-wrap: wrap; gap: 6px; }
.betting__chip { padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 900; color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.betting__chip:hover { background: var(--yellow); }
.betting__chip.is-on { background: var(--yellow); transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.betting__chip:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.betting__note { grid-area: note; }
.betting__err { grid-area: err; margin: 0; }
.betting__err:empty { display: none; }
/* 結果の札 */
.betting__result { --c: #9a9a9a; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mult label" "mult flow"; align-items: center; column-gap: 14px; max-width: 560px; margin-top: 14px; padding: 10px 18px 12px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 4px var(--c); }
.betting__result.is-new { animation: pop .5s; }
.betting__result.bt--x100 { background: linear-gradient(135deg, #fff 0 45%, #fff1b8 55%, #fff); }
.betting__rmult { grid-area: mult; font-family: var(--heavy); font-weight: 400; font-size: 34px; line-height: 1; color: var(--c); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.betting__rlabel { grid-area: label; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 15px; font-weight: 900; }
.betting__pill { padding: 0 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.8; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.betting__rflow { grid-area: flow; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.betting__rflow b { font-family: var(--heavy); font-weight: 400; font-size: 18px; }
.betting .plus { color: #16994a; }
.betting .minus { color: var(--red-d); }
.betting .zero { color: var(--ink); }
/* 最近の結果・これまでの実績 */
.betting__recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.betting__recent li { --c: #9a9a9a; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; }
.betting__recent li::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); }
.betting__recent b { font-family: var(--heavy); font-weight: 400; }
.betting__total { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.betting__total b { color: var(--ink); }
/* 倍率一覧 */
.betting__odds { margin-top: 12px; font-size: 12.5px; }
.betting__odds summary { display: inline-block; font-weight: 900; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.betting__table { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.betting__row { --c: #9a9a9a; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 800; }
.betting__row::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); }
.betting__row b { font-family: var(--heavy); font-weight: 400; font-size: 13px; color: var(--c); -webkit-text-stroke: .6px var(--ink); paint-order: stroke fill; }
.betting__rowname { font-size: 12px; }
.betting__rowfoot { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.betting__pal { position: absolute; right: 14px; bottom: -8px; width: 124px; pointer-events: none; }
.betting.is-spinning .betting__pal .char, .betting.is-open.is-win .betting__pal .char { animation: hop .7s ease-in-out infinite; }
/* 倍率ごとの色(札・結果・表・最近の結果で共通。--c の初期値を持つ部品より後ろ・強めに書く) */
.betting .bt--miss { --c: #9a9a9a; }
.betting .bt--r10 { --c: #8c9bb0; }
.betting .bt--r30 { --c: #78a4c6; }
.betting .bt--r50 { --c: #5fa8d3; }
.betting .bt--r70 { --c: #46b4b4; }
.betting .bt--x1 { --c: #3bbf6a; }
.betting .bt--x2 { --c: var(--aqua); }
.betting .bt--x3 { --c: #9b6bff; }
.betting .bt--x5 { --c: var(--orange); }
.betting .bt--x10 { --c: var(--red); }
.betting .bt--x30 { --c: var(--pink); }
.betting .bt--x100 { --c: #e0a200; }
@keyframes chest-shake { from { transform: translateX(-3px) rotate(-2deg); } to { transform: translateX(3px) rotate(2deg); } }
@keyframes coins-pop { 0% { opacity: 0; transform: translateY(18px) scale(.6); } 60% { opacity: 1; transform: translateY(-8px) scale(1.08); } 100% { transform: translateY(0) scale(1); } }
@keyframes dust-puff { from { opacity: 0; transform: translateY(10px) scale(.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mult-flicker { from { transform: scale(1) rotate(-5deg); } to { transform: scale(1.1) rotate(5deg); } }
@media (max-width: 1080px) {
  .betting { grid-template-columns: 160px minmax(0, 1fr); padding-right: 120px; }
  .betting__art { width: 160px; padding-top: 40px; }
  .betting__mult { width: 94px; height: 94px; padding-top: 32px; }
  .betting__mult b { font-size: 26px; }
  .betting__pal { width: 100px; right: 8px; }
}
@media (max-width: 640px) {
  .betting { grid-template-columns: 1fr; gap: 8px; padding: 18px 18px 20px; }
  .betting__art { width: 150px; margin: 0 auto; }
  .betting__title { font-size: 23px; }
  .betting__form { grid-template-columns: 1fr; grid-template-areas: "label" "input" "quick" "go" "note" "err"; }
  .betting__go { display: flex; width: 100%; }
  .betting__result { grid-template-columns: 1fr; grid-template-areas: "mult" "label" "flow"; row-gap: 4px; }
  .betting__pal { width: 72px; right: 2px; top: 8px; bottom: auto; }
}
.mp-sec { margin-top: 10px; }
.mp-empty { padding: 18px; border: 3px dashed var(--line); border-radius: 14px; background: #fff; text-align: center; font-weight: 800; }
.mp-empty a { text-decoration: underline; }
/* クエスト達成の申請(冒険の記録) */
.claimbox { margin-bottom: 18px; padding: 20px 24px 22px; }
.claimbox__lead { margin-bottom: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.claimbox__lead b { color: var(--red-d); }
.claimbox__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 16px; }
.claimbox__cond { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: #fff8dd; font-size: 12.5px; font-weight: 700; line-height: 1.7; }
.claimbox__cond b { margin-right: 8px; padding: 1px 8px; border-radius: 4px; background: var(--ink); color: var(--yellow); font-size: 11px; }
.claimbox__h { margin: 22px 0 10px; font-size: 15px; font-weight: 900; }
.clist { display: grid; gap: 10px; }
.clist__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.clist__main { flex: 1; min-width: 0; }
.clist__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 900; }
.clist__st { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 11.5px; font-weight: 900; line-height: 1.7; }
.clist__st--pending { background: var(--yellow); }
.clist__st--done { background: #2fa36b; color: #fff; }
.clist__st--rejected { background: #ddd5c4; color: var(--ink-soft); }
.clist__meta { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.clist__meta code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ink); word-break: break-all; }
.clist__ok { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: #1f7a4d; }
.clist__note { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.clist__item--rejected .clist__note { color: var(--red-d); }
.xhist { display: grid; gap: 12px; }
.xhist__item { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.xhist__item .xtile { height: 56px; padding: 6px 8px; }
.xhist__item .xtile b { font-size: 13.5px; }
.xhist__item .xtile--logo img { max-height: 30px; }
.xhist__item .xtile--marks { gap: 4px; }
.xhist__item .xtile--coin img { max-height: 34px; }
.xhist__item .xtile--marks img { max-height: 24px; }
.xhist__item .xtile--dpoint img { max-height: 44px; }
.xhist__item .xtile i { width: 26px; height: 26px; font-size: 15px; }
.xhist__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 900; }
.xhist__meta { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.xhist__code { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fff8dd; font-size: 12px; font-weight: 800; }
.xhist__code code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em; word-break: break-all; }
.xhist__copy { padding: 1px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 900; }
.xhist__note { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--red-d); }
.xhist__amount { font-family: var(--heavy); font-weight: 400; font-size: 20px; color: var(--ink); white-space: nowrap; }
.pill { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1.7; }
.pill--pending { background: var(--yellow); }
.pill--done { background: #3bbf6a; color: #fff; }
.pill--rejected { background: #d6d6d6; }
.ledger { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-size: 13.5px; }
.ledger th, .ledger td { padding: 10px 14px; text-align: left; border-bottom: 2px dashed var(--line); }
.ledger tr:last-child td { border-bottom: 0; }
.ledger th { background: var(--cream-2); font-weight: 900; font-size: 12.5px; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger .plus { color: #16994a; font-family: var(--heavy); font-weight: 400; }
.ledger .minus { color: var(--red-d); font-family: var(--heavy); font-weight: 400; }
.ledger__kind { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--cream); font-size: 11px; font-weight: 900; }
.ledger__kind--exchange { background: #ffe1e4; }
.ledger__kind--refund, .ledger__kind--bonus { background: #def7e6; }
.ledger__kind--referral { background: #ffe3f0; }
.ledger__kind--gacha { background: #fff1b8; }
.ledger__kind--bet { background: #e9e4ff; }
/* アカウントの守り:2段階認証(認証アプリ)。中身は mypage.js の renderGuard */
.guard { position: relative; margin-top: 18px; padding: 20px 150px 22px 24px; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(47, 155, 225, .22), transparent 40%), var(--paper); }
.guard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.guard__icon { flex: none; width: 54px; height: 54px; }
.guard__main { flex: 1; min-width: 0; }
.guard__title { margin: 0; font-size: 21px; }
.guard__lead { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.guard__state { padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: #ddd5c4; color: var(--ink-soft); font-size: 12px; font-weight: 900; line-height: 1.8; white-space: nowrap; }
.guard__state[hidden] { display: none; }
.guard__state--on { background: #3bbf6a; color: #fff; }
.guard__body { max-width: 680px; margin-top: 14px; }
.guard__text { font-size: 13.5px; font-weight: 700; line-height: 1.75; }
.guard__text + .guard__text { margin-top: 6px; }
.guard__text b { color: var(--red-d); }
.guard__text small { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.guard__text a { text-decoration: underline; }
.guard__steps { display: grid; gap: 6px; margin: 10px 0 14px; padding: 0; list-style: none; counter-reset: guard; font-size: 13px; font-weight: 800; line-height: 1.7; }
.guard__steps li { position: relative; padding-left: 32px; counter-increment: guard; }
.guard__steps li::before { content: counter(guard); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 12.5px; font-weight: 900; line-height: 1; color: var(--ink); }
.guard__steps b { color: var(--red-d); }
.guard__warn { margin-top: 8px; padding: 8px 12px; border: 3px solid var(--red); border-radius: 12px; background: #fff0ec; color: var(--red-d); font-size: 13px; font-weight: 900; line-height: 1.6; }
.guard__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.guard__retry { margin-left: 6px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
/* 設定の途中:QRコード + 手で入れるキー + 6桁の確認 */
.guard__setup { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.guard__qr { padding: 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.guard__qr svg { display: block; width: 100%; height: auto; }
.guard__step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 12.5px; font-weight: 900; line-height: 1; color: var(--ink); vertical-align: -5px; }
.guard__secret { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.guard__secret code { padding: 6px 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; letter-spacing: .08em; word-break: break-all; user-select: all; }
.guard__form .field { margin-bottom: 12px; }
.guard__form .field__label { font-size: 13.5px; }
.guard__form .field__input--code { max-width: 220px; }
.guard__form .field__hint b { color: var(--ink); }
/* リカバリーコード(見せるのは1回だけ) */
.guard__codes { padding: 14px 16px 16px; border: 3px dashed var(--ink); border-radius: 14px; background: #fff; }
.guard__codelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.guard__codelist code { display: block; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-align: center; user-select: all; }
/* 解除・作り直しの前の確認(パスワード + コード) */
.guard__confirm { margin-top: 14px; padding: 14px 16px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.guard__confirm[hidden] { display: none; }
.guard__confirm .field { margin-bottom: 10px; }
.guard__confirm .field__input { max-width: 360px; }
.guard__confirm__title { margin-bottom: 8px; font-size: 15px; font-weight: 900; }
.guard__pal { position: absolute; right: 14px; bottom: -8px; width: 124px; pointer-events: none; }
.guard.is-on .guard__pal .char { animation: bob .8s ease-in-out infinite alternate; }

/* ==========================================================================
   管理画面(admin.html)の見た目は assets/css/admin.css(このファイルのあとに読む)
   ========================================================================== */
.admin { background: #e9ecf4; }

/* ==========================================================================
   なかまたち(キャラクター)
   ========================================================================== */
/* それぞれのクセ:まねく・しっぽをふる・たたく・あおぐ・はばたく・はねる・ゆれる */
.char--koban .char__arm--l { transform-origin: 72px 152px; animation: beckon .8s ease-in-out infinite alternate; }
.char--koban .char__tail { transform-origin: 152px 178px; animation: wag 1.3s ease-in-out infinite alternate; }
.char--shiba .char__tail { transform-origin: 150px 170px; animation: wag .32s ease-in-out infinite alternate; }
.char--alto .char__arm--l { transform-origin: 80px 148px; animation: tap .45s ease-in infinite alternate; }
.char--alto .char__arm--r { transform-origin: 140px 148px; animation: cheer .45s ease-out infinite alternate; }
.char--mira .char__arm--l { transform-origin: 82px 148px; animation: cheer .6s ease-in-out infinite alternate-reverse; }
.char--mira .char__arm--r { transform-origin: 138px 148px; animation: fan .6s ease-in-out infinite alternate; }
.char--gantetsu .char__arm--r { transform-origin: 150px 156px; animation: fan 1s ease-in-out infinite alternate; }
.char--dragon .char__arm--l { transform-origin: 82px 112px; animation: flap-l .5s ease-in-out infinite alternate; }
.char--dragon .char__arm--r { transform-origin: 138px 112px; animation: flap-r .5s ease-in-out infinite alternate; }
.char--dragon .char__tail { transform-origin: 150px 176px; animation: wag 1s ease-in-out infinite alternate; }
.char--golem .char__arm--l { transform-origin: 56px 110px; animation: shield 1.2s ease-in-out infinite alternate; }
.char--golem .char__arm--r { transform-origin: 164px 110px; animation: shield 1.2s ease-in-out infinite alternate-reverse; }
.char--golem .golem__eye, .char--golem .golem__rune { animation: glow 1.4s ease-in-out infinite alternate; }
.char--slime { animation: hop 1.3s ease-in-out infinite; transform-origin: 50% 94%; }
.char--penta .char__arm--l { transform-origin: 58px 120px; animation: flap-r .5s ease-in-out infinite alternate; }
.char--penta .char__arm--r { transform-origin: 162px 120px; animation: wag .7s ease-in-out infinite alternate; }
.char--kon .char__tail { transform-origin: 146px 180px; animation: wag 1s ease-in-out infinite alternate; }
.char--moguro .char__arm--r { transform-origin: 150px 150px; animation: dig .6s ease-in infinite alternate; }
.char--moguro .moguro__lamp { animation: glow-lamp 1.2s ease-in-out infinite alternate; }
.char--gearmaru .gearmaru__gear { transform-box: fill-box; transform-origin: center; animation: spin 3s linear infinite; }
.char--gearmaru .char__tail { transform-box: fill-box; transform-origin: 0 50%; animation: wind 1.4s ease-in-out infinite alternate; }
.char--gearmaru .char__arm--r { transform-origin: 152px 140px; animation: cheer .5s ease-in-out infinite alternate; }
.char--gearmaru .gearmaru__eye { animation: blink 3.6s steps(1) infinite; transform-box: fill-box; transform-origin: center; }
.char--mimi .mimi__lid { transform-box: fill-box; transform-origin: 0% 100%; animation: lid 1.6s ease-in-out infinite alternate; }
.char--mimi .mimi__glow { animation: glow-lid 1.6s ease-in-out infinite alternate; }
.char--mimi .char__arm--r { transform-origin: 170px 144px; animation: cheer .6s ease-in-out infinite alternate; }
.char--horo .horo__eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s steps(1) infinite; }
.char--horo .horo__ball { animation: glow-ball 1.5s ease-in-out infinite alternate; }
.char--horo .horo__twinkle { transform-box: fill-box; transform-origin: center; animation: thump .9s ease-in-out infinite alternate; }
.char--kraken .char__tail { transform-origin: 110px 150px; animation: wobble 1.2s ease-in-out infinite alternate; }
.char--kero { animation: hop 1.5s ease-in-out infinite; transform-origin: 50% 94%; }

/* ヒーロー */
.stage__pal { position: absolute; bottom: -4px; z-index: 3; width: 132px; }
.stage__pal .char { animation: bob .7s ease-in-out infinite alternate; }
.stage__pal--l { left: -22px; }
.stage__pal--l .char { animation-delay: -.35s; }
.stage__pal--r { right: -22px; }
.slide__pal { position: absolute; z-index: 2; width: 132px; }
.slide__pal--l { left: 0; bottom: 6px; }
.slide__pal--r { right: 0; bottom: 6px; width: 150px; }
.slide__pal--t { right: 30px; top: -4px; width: 104px; }
.slide__pal--l .char, .slide__pal--r .char { animation: bob .8s ease-in-out infinite alternate; }

/* カードのふちに立つ */
.step__pal { position: absolute; right: 14px; top: -72px; width: 78px; pointer-events: none; }
.eg__pal { align-self: flex-end; width: 104px; margin: 0 2px -6px 0; }
.detail__pal { position: absolute; right: 8px; bottom: -8px; z-index: 1; width: 112px; }
.auth__pal { position: absolute; bottom: -8px; width: 124px; }
.auth__pal--l { left: -116px; }
.auth__pal--r { right: -116px; }

/* ひとこと(キャラクター+ふきだし) */
.talk { display: flex; align-items: flex-end; gap: 4px; max-width: 760px; margin: 0 auto 28px; }
.talk__char { flex: none; width: 100px; }
.talk__bubble {
  position: relative; flex: 1; margin-bottom: 20px; padding: 12px 20px 13px;
  border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1.65;
}
.talk__bubble::before {
  content: ""; position: absolute; left: -13px; bottom: 18px; width: 18px; height: 18px;
  border: solid var(--ink); border-width: 0 0 4px 4px; background: inherit; transform: rotate(45deg);
}
.talk__bubble b { display: inline-block; margin-right: 10px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.8; vertical-align: 1px; }

/* なかまたち紹介 */
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.cast > li { flex: 0 1 calc((100% - 66px) / 4); }
.cast__item {
  display: flex; flex-direction: column; align-items: center; overflow: hidden; padding-bottom: 18px; text-align: center;
  border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.cast__item:hover { transform: translateY(-4px) rotate(.6deg); box-shadow: 0 10px 0 var(--ink); }
.cast__stage { position: relative; align-self: stretch; display: grid; place-items: end center; height: 138px; margin-bottom: 12px; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--c); }
.cast__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; background: repeating-conic-gradient(rgba(255, 255, 255, .28) 0 12deg, transparent 12deg 24deg); }
.cast__char { position: relative; width: 128px; margin-bottom: -8px; }
.cast__item:hover .cast__char { animation: pop .35s; }
.cast__name { margin-top: 6px; font-family: var(--heavy); font-weight: 400; font-size: 22px; line-height: 1.3; }
.cast__role { margin-top: 4px; padding: 0 16px; font-size: 13px; font-weight: 700; line-height: 1.6; text-align: left; }
.cast__say { position: relative; margin: auto 14px 0; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); font-size: 13px; font-weight: 900; }
.cast__role + .cast__say { margin-top: 12px; }

/* ==========================================================================
   ニュース・キャンペーン(news.html・トップ)
   ========================================================================== */
/* キャンペーンの状態(開催中・予告・終了) */
.status { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; font-size: 11px; font-weight: 900; line-height: 1.75; white-space: nowrap; }
.status small { font-size: 10px; font-weight: 900; }
.status--on { background: var(--red); color: #fff; }
.status--soon { background: var(--yellow); }
.status--end { background: #ddd5c4; color: var(--ink-soft); }

/* 一覧の1行 */
.posts { display: grid; gap: 16px; }
.posts[hidden] { display: none; }
.post { --c: var(--news); }
.post--campaign { --c: var(--campaign); }
.post--column { --c: var(--column); }
.post__link {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 26px;
  border: 4px solid var(--ink); border-radius: 16px; background: var(--paper);
  box-shadow: inset 10px 0 0 var(--c), 0 6px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.post__link:hover { transform: translateY(2px); box-shadow: inset 10px 0 0 var(--c), 0 4px 0 var(--ink); }
.post__icon {
  flex: none; display: grid; place-items: end center; width: 72px; height: 72px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px var(--c);
}
.post__icon .char { width: 66px; margin-bottom: -4px; }
.post__link:hover .post__icon .char { animation: pop .35s; }
.post__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.post__date { font-family: var(--heavy); font-weight: 400; font-size: 13px; letter-spacing: .03em; color: var(--ink-soft); }
.post__title { font-weight: 900; font-size: 17px; line-height: 1.45; }
.post__link:hover .post__title { text-decoration: underline; text-underline-offset: 3px; }
.post__lead { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.post__period { margin-top: 4px; padding: 0 10px; border: 2px dashed var(--ink); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 800; }
.post__period b { margin-right: 6px; color: var(--campaign); }
.post__go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 11px; line-height: 1; }
.post--end .post__icon { filter: grayscale(1); opacity: .7; }
.post--end .post__link { background: #f3eee3; }

/* トップでは小さめに */
.posts--compact { gap: 12px; }
.posts--compact .post__link { gap: 12px; padding: 10px 14px 10px 22px; border-width: 3px; box-shadow: inset 8px 0 0 var(--c), 0 4px 0 var(--ink); }
.posts--compact .post__link:hover { box-shadow: inset 8px 0 0 var(--c), 0 2px 0 var(--ink); }
.posts--compact .post__icon { width: 56px; height: 56px; }
.posts--compact .post__icon .char { width: 52px; }
.posts--compact .post__title { font-size: 15px; }
.posts--compact .post__lead { display: none; }
.posts--compact .post__go { width: 28px; height: 28px; font-size: 9px; }

.newsbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.newsbox__col--campaign { --c: var(--campaign); }
.newsbox__col--news { --c: var(--news); }
.newsbox__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.newsbox__title {
  padding: 2px 22px; border: 3px solid var(--ink); border-radius: 999px; background: var(--c); color: #fff;
  font-family: var(--heavy); font-weight: 400; font-size: 19px; line-height: 1.5; letter-spacing: .04em;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; box-shadow: 0 4px 0 var(--ink);
}
.newsbox__all { font-weight: 900; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.newsbox__all::after { content: " ▶"; font-size: .75em; }
.newsbox__none { padding: 18px; border: 3px dashed var(--ink); border-radius: 14px; background: var(--paper); text-align: center; font-weight: 800; }

/* 記事 */
.article { --c: var(--news); overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 8px 0 var(--ink); }
.article--campaign { --c: var(--campaign); }
.article--column { --c: var(--column); }
.article__head {
  position: relative; overflow: hidden; min-height: 176px; padding: 22px 180px 24px 28px; border-bottom: 4px solid var(--ink);
  background: var(--c) repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 18px, transparent 18px 36px);
}
.article--end .article__head { filter: saturate(.35); }
.article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.article__meta time { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--heavy); font-weight: 400; font-size: 12.5px; line-height: 1.75; }
.article__meta .chip { background: #fff; color: var(--ink); }
.article__title {
  --stroke: 7px; margin-top: 10px; color: #fff;
  font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.35;
  -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
}
.article__lead { display: table; margin-top: 10px; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 900; font-size: 14.5px; line-height: 1.6; }
.article__period { display: table; margin: 14px 0 0 6px; padding: 2px 16px; border: 3px solid var(--ink); background: var(--yellow); font-weight: 900; font-size: 15px; box-shadow: -6px 6px 0 var(--ink); transform: rotate(-1.5deg); }
.article__period b { margin-right: 10px; padding: 0 8px; border-radius: 4px; background: var(--ink); color: var(--yellow); font-size: 12px; vertical-align: 2px; }
.article__pal { position: absolute; right: 16px; bottom: -8px; width: 156px; animation: bob .8s ease-in-out infinite alternate; }
.article__body { padding: 26px 30px 30px; background: var(--paper); font-size: 15.5px; line-height: 1.95; }
.article__body > p + p { margin-top: 12px; }
.article__ended { margin-bottom: 16px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #e9e3d6; text-align: center; font-weight: 900; }
.article__h { display: flex; align-items: center; gap: 10px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 3px dashed var(--line); font-family: var(--heavy); font-weight: 400; font-size: 19px; line-height: 1.5; }
.article__h::before { content: ""; flex: none; width: 10px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; background: var(--c); }
.article__body > .article__h:first-child { margin-top: 4px; }
.article__body > .article__h + p { margin-top: 0; }
.article__body > .article__h + .article__points { margin-top: 12px; }
.article__points { margin-top: 18px; padding: 14px 20px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.article__points li { position: relative; padding-left: 26px; font-weight: 800; }
.article__points li + li { margin-top: 4px; }
.article__points li::before { content: "★"; position: absolute; left: 0; color: var(--c); -webkit-text-stroke: .8px var(--ink); }
.article__note { display: flex; align-items: flex-start; margin-top: 18px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff0ec; font-size: 13.5px; line-height: 1.75; }
.article__note .r18 { flex: none; margin-top: 2px; }
.article__btns { margin-top: 24px; text-align: center; }

/* 前後の記事 */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 44px; }
.pager__link { display: flex; flex-direction: column; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); font-weight: 900; font-size: 13.5px; line-height: 1.5; transition: transform .08s, box-shadow .08s; }
.pager__link:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.pager__link small { font-size: 11.5px; color: var(--ink-soft); }
.pager__link--next { text-align: right; }

@media (max-width: 820px) {
  .newsbox { grid-template-columns: 1fr; gap: 34px; }
  .post__link { gap: 12px; padding: 12px 14px 12px 22px; }
  .post__icon { width: 58px; height: 58px; }
  .post__icon .char { width: 54px; }
  .post__title { font-size: 15.5px; }
  .post__go { display: none; }
  .article__head { min-height: 0; padding: 18px 104px 22px 18px; }
  .article__pal { right: 6px; width: 96px; }
  .article__title { --stroke: 6px; font-size: 22px; }
  .article__lead { font-size: 13.5px; }
  .article__period { font-size: 13px; }
  .article__body { padding: 20px 18px 24px; font-size: 14.5px; }
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager__back { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ==========================================================================
   アニメーション
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes beat-l { from { transform: rotate(0); } to { transform: rotate(-58deg); } }
@keyframes beat-r { from { transform: rotate(0); } to { transform: rotate(58deg); } }
@keyframes thump { from { scale: .88; opacity: .75; } to { scale: 1.1; opacity: 1; } }
@keyframes float { from { translate: 0 0; rotate: -8deg; } to { translate: 0 -14px; rotate: 10deg; } }
@keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes pop { 0% { scale: .7; } 60% { scale: 1.14; } 100% { scale: 1; } }
@keyframes hit { 0% { scale: 1; } 40% { scale: 1.16 .86; } 100% { scale: 1; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 10deg; } }
@keyframes lane { to { transform: translateX(-50%); } }
@keyframes sword { from { transform: rotate(6deg); } to { transform: rotate(-16deg); } }
@keyframes shield { from { transform: rotate(0); } to { transform: rotate(8deg); } }
@keyframes glow { from { fill: #22e3ff; } to { fill: #c8f8ff; } }
@keyframes wind { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes lid { from { transform: rotate(0); } to { transform: rotate(-9deg); } }
@keyframes glow-lid { from { opacity: .3; } to { opacity: 1; } }
@keyframes glow-ball { from { fill: #bfe9ff; } to { fill: #f2fbff; } }
@keyframes dig { from { transform: rotate(10deg); } to { transform: rotate(-24deg); } }
@keyframes glow-lamp { from { fill: #fff; } to { fill: #ffe27a; } }
@keyframes beckon { from { transform: rotate(-4deg); } to { transform: rotate(16deg); } }
@keyframes wag { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes tap { from { transform: rotate(4deg); } to { transform: rotate(-20deg); } }
@keyframes cheer { from { transform: rotate(6deg); } to { transform: rotate(-14deg); } }
@keyframes fan { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes flap-l { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes flap-r { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0) scale(1); } 65% { transform: translateY(0) scale(1.06, .92); } 80% { transform: translateY(-9%) scale(.96, 1.05); } }
@keyframes wobble { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

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

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1080px) {
  .hdr__in { flex-wrap: wrap; gap: 12px 16px; }
  .search { order: 3; flex-basis: 100%; }
  .hdr__act { margin-left: auto; }
  .gnav .wrap { width: 100%; }
  .gnav__list { overflow-x: auto; scrollbar-width: none; }
  .gnav__list::-webkit-scrollbar { display: none; }
  .gnav__list li { flex: none; }
  .gnav__item { padding-inline: 18px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doors > * { flex-basis: calc((100% - 36px) / 3); }
  .slide__title { font-size: 44px; }
  .stage .stage__burst { right: -10px; top: 30px; padding: 24px 30px 26px; font-size: 20px; }
  .stage__pal { width: 112px; }
  .stage__pal--l { left: -6px; }
  .stage__pal--r { right: -6px; }
  .slide__pal { width: 112px; }
  .slide__pal--r { width: 124px; }
  .slide__pal--t { width: 90px; right: 10px; }
  .cast { gap: 16px; }
  .cast > li { flex-basis: calc((100% - 48px) / 4); }
  .raids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .raids--3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
  .qr__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zones__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ztabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xcards--top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile { grid-template-columns: 110px 1fr; }
  .profile__wallet { grid-column: 1 / -1; }
  .raid__monster { width: 170px; }
  .camp__pal { width: 104px; }
  .camp__burst { padding: 48px 104px 54px; }
  .camp__title { font-size: 38px; }
  .camp__cloud { display: none; }
  .tickets { gap: 22px; }
  .ticket__top { flex-direction: column; text-align: center; padding: 30px 16px 16px; gap: 8px; }
  .ticket__up b { font-size: 32px; }
  .datebar { font-size: 23px; }
  .cta__cast .char { width: 76px; }
  .cta__cast .char--poimaru { width: 104px; }
  .auth__pal { display: none; }
  .eg__list { gap: 30px 34px; grid-template-columns: repeat(3, 1fr); }
  .eg__item:nth-child(3n)::after { display: none; }
  .howto { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .hero { padding-top: 84px; }
  .flag:nth-child(n+6) { display: none; }
  .slides { height: 610px; }
  .slide__points { justify-content: center; gap: 8px; margin-top: 12px; }
  .spoint { flex: 1 1 0; min-width: 0; padding: 5px 6px 6px; border-radius: 12px; }
  .spoint small { font-size: 10.5px; }
  .spoint b { font-size: 19px; }
  .spoint b i { display: block; margin: 0; font-size: 9.5px; line-height: 1.2; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 6px; text-align: center; align-items: start; }
  .slide__title { --stroke: 8px; font-size: 34px; }
  .slide__lead { font-size: 15px; margin-top: 10px; }
  .slide__lead br { display: none; }
  .slide__btns { justify-content: center; margin-top: 16px; }
  .slide__art { min-height: 0; }
  .stage__mascot { width: 150px; margin-left: -75px; bottom: 74px; }
  .stage__pal { width: 92px; bottom: -2px; }
  .stage__pal--l { left: 2%; }
  .stage__pal--r { right: 2%; }
  .slide__pal { width: 92px; }
  .slide__pal--l { left: 4%; }
  .slide__pal--r { right: 4%; width: 100px; }
  .slide__pal--t { width: 74px; right: 12%; top: -2px; }
  .chest { width: 200px; margin-left: -100px; }
  .onomato { font-size: 30px; }
  .onomato--1 { left: 4%; top: 10px; }
  .stage .stage__burst { right: 1%; top: -4px; padding: 16px 18px 18px; font-size: 12.5px; }
  .coin--2 { top: 90px; }
  .bigbadge { width: 210px; height: 210px; }
  .bigbadge__top, .bigbadge__unit { font-size: 19px; }
  .bigbadge__num { font-size: 46px; }
  .bigbadge--event .bigbadge__num { font-size: 66px; }
  .boss { width: 200px; right: 4%; }
  .boss__hp { width: 190px; font-size: 11px; }
  .slide__pal--l2 { left: 26%; }
  .chart { width: 150px; right: 4%; }
  .moon { right: 8%; width: 56px; height: 56px; }

  .sec { padding: 54px 0 60px; }
  .sec-head__title { --stroke: 5px; font-size: 22px; padding-inline: 40px; }
  .sec-head__sub--on { border-radius: 18px; }
  .steps { grid-template-columns: 1fr; gap: 64px; padding-top: 56px; }
  .step:not(:last-child)::after { right: 50%; top: auto; bottom: -44px; margin: 0 -16px 0 0; border: 16px solid transparent; border-top: 22px solid var(--ink); border-bottom: 0; }
  .eg__list { grid-template-columns: repeat(2, 1fr); }
  .eg__item:nth-child(3n)::after { display: block; }
  .eg__item:nth-child(2n)::after { display: none; }
  .eg__item:last-child { grid-column: 1 / -1; }
  .eg__num { font-size: 62px; -webkit-text-stroke-width: 9px; }
  .doors, .ranks, .personas, .safe { grid-template-columns: 1fr; }
  .raids { grid-template-columns: 1fr; }
  .raids--3 > :last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .ranksteps { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
  .rankstep { margin-bottom: 0; }
  .myrank { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; text-align: center; }
  .myrank__name { font-size: 26px; }
  .myrank--guest .myrank__name { font-size: 20px; }
  .myrank .rankbar { margin-inline: auto; }
  .myrank__btns { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .rankrules { grid-template-columns: 1fr; gap: 16px; }
  .perks__list { grid-template-columns: 1fr; gap: 26px; }
  .perk__num { font-size: 40px; }
  .myref { padding: 18px 16px 20px; }
  .myref--guest { flex-direction: column; text-align: center; }
  .myref__stats { grid-template-columns: 1fr; }
  .myref__code { margin-left: 0; }
  .rankrules li { padding: 16px 16px 18px 62px; }
  .rankrules li::before { left: 12px; }
  .rankpage__sec { margin-top: 54px; }
  .doc { padding: 22px 18px 26px; font-size: 14px; }
  .claimflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claimbox__grid { grid-template-columns: 1fr; }
  .doc__table th, .doc__table td { display: block; width: auto; }
  .doc__table th { border-right: 0; border-bottom: 2px dashed var(--line); }
  .doc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors { gap: 16px; }
  .doors > * { flex-basis: calc((100% - 16px) / 2); }
  .ranks > * { flex-basis: 100%; }
  .door { padding: 20px 8px 16px; border-radius: 100px 100px 18px 18px; }
  .door__area { margin-bottom: 8px; padding: 1px 10px; font-size: 12.5px; letter-spacing: 0; }
  .door__face { width: 92px; height: 92px; margin-bottom: 6px; border-width: 4px; }
  .door__char { width: 76px; }
  .door__kanji { width: 34px; height: 34px; font-size: 17px; border-width: 3px; right: -10px; bottom: -6px; }
  .door__name { --stroke: 5px; font-size: 19px; }
  .door__lead { display: none; }
  .door__meta { margin-top: 8px; padding: 1px 10px; font-size: 11px; }
  .door__meta b { font-size: 14px; }
  .door__go { margin-top: 10px; padding: 5px 14px; font-size: 13px; }
  .camp__head { flex-wrap: wrap; margin-top: -54px; }
  .camp__burst { order: -1; flex: 0 0 100%; margin: 0; padding: 40px 0 46px; }
  .camp__title { font-size: 23px; }
  .camp__title small { font-size: 11.5px; }
  .camp__pal { width: 84px; margin: 4px 0 0; }
  .camp__cloud { display: inline-grid; align-self: center; margin: 0 -8px; padding: 26px 26px 28px; font-size: 13.5px; }
  .camp__cloud b { font-size: 18px; }
  .tickets { grid-template-columns: 1fr; gap: 24px; margin-top: 22px; }
  .ticket { --stub: 132px; }
  .ticket__top { flex-direction: row; text-align: left; padding: 26px 22px 16px; gap: 14px; }
  .ticket__star { left: -8px; }
  .ticket__up b { font-size: 36px; }
  .camp__note { font-size: 17px; text-align: center; }
  .camp__date { font-size: 26px; }
  .datebar { margin: 16px auto 0; font-size: 20px; box-shadow: -6px 6px 0 var(--yellow); }
  .cast > li { flex-basis: calc((100% - 16px) / 2); }
  .cast__stage { height: 116px; }
  .cast__char { width: 108px; }
  .talk__char { width: 76px; }
  .talk__bubble { padding: 10px 14px 11px; font-size: 14px; }
  .eg__pal { width: 84px; }
  .flow__pal { width: 92px; }
  .flow__pal--duo { width: 150px; }
  .eg__pal { order: 5; margin: 0; }
  .cta__cast { flex-wrap: wrap; row-gap: 0; }
  .cta__cast .char { width: 62px; }
  .cta__cast .char--poimaru { width: 80px; }
  .pagehead__in { padding-right: 86px; }
  .pagehead__pal { width: 84px; bottom: -34px; }
  .cards, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .flow { grid-template-columns: 1fr; }
  .flow__node { min-height: 0; }
  .flow__arrow::after { transform: rotate(90deg); margin-top: 22px; margin-bottom: 14px; }
  .flow__back { border-radius: 22px; padding: 12px 18px; font-size: 16px; }
  .flow__back::before { display: none; }
  .cta__title { --stroke: 9px; font-size: 32px; }
  .ftr__top { flex-direction: column; gap: 30px; }
  .ftr__cols { gap: 28px; }

  .pagehead__title { font-size: 28px; --stroke: 8px; }
  .pagehead__kanji { width: 70px; height: 70px; font-size: 34px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .detail__top { grid-template-columns: 1fr; }
  .detail__thumb { min-height: 200px; border-right: 0; border-bottom: 4px solid var(--ink); }
  .dl__row { grid-template-columns: 1fr; }
  .dl dt { border-right: 0; border-bottom: 2px solid var(--ink); padding-block: 8px; }
}

/* スマホのヘッダー:1段目=ロゴとお気に入り、2段目=ログイン・登録(ログイン中は名前・報酬金と冒険の記録)、3段目=検索 */
@media (max-width: 640px) {
  .hdr__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0 14px; }
  .hdr__act { display: contents; }
  .logo { grid-area: 1 / 1; justify-self: start; }
  .hdr__fav { grid-area: 1 / 2; }
  .hdr__acct { grid-area: 2 / 1 / auto / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
  .hdr__acct .btn { padding: 8px 10px; font-size: 14px; }
  .hdr__acct .btn--bounce { animation: none; }   /* となりのボタンと高さがずれて見えるので、はねさせない */
  .hdr__acct--user { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hdr__acct--user .hdr__user { align-items: flex-start; min-width: 0; }
  .hdr__acct--user .hdr__nick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr__acct--user .btn { padding-inline: 18px; }
  .search { grid-area: 3 / 1 / auto / -1; }
}

@media (max-width: 520px) {
  body { font-size: 14.5px; }
  .logo .logo__mark { width: 50px; height: 50px; }
  .logo__name { font-size: 27px; }
  .slides { height: 640px; }
  .slide__label { padding: 3px 14px; font-size: 12.5px; letter-spacing: -.01em; }   /* 1行に収める */
  .slide__title { --stroke: 7px; font-size: 29px; text-shadow: 0 4px 0 var(--ink); }
  .lane__label { font-size: 12.5px; padding-right: 28px; }
  .eg__sum, .eg__yen { font-size: 20px; }
  .eg__otoku { font-size: 24px; }
  .card__thumb { height: 96px; }
  .card .badge--up { width: 46px; height: 46px; font-size: 11.5px; }
  .card__thumb .logoplate--lg { --ih: 36px; width: 88%; height: 54px; padding: 6px 8px; }
  .logoplate--xl { --ih: 56px; width: 200px; height: 90px; }
  .card__bosslogo .logoplate--xs { --ih: 20px; width: 70px; height: 30px; }
  .card__name { font-size: 14px; }
  .pt b { font-size: 22px; }
  .xstats { flex-wrap: nowrap; gap: 8px; }
  .xstats li { min-width: 0; flex: 1 1 0; padding: 8px 4px 10px; border-width: 3px; }
  .xstats b { font-size: 17px; }
  .xstats span { font-size: 11px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .detail__main { padding: 20px 18px 22px; }
  .detail__name { font-size: 24px; }
  .detail__get .pt b { font-size: 40px; }
  .detail__body { padding: 20px 16px; }
  .howto { grid-template-columns: 1fr; }
  .qr__title { font-size: 24px; }
  .qr__crown { width: 40px; }
  .qr__tab { min-width: 0; padding: 11px 14px 9px; font-size: 14px; }
  .qr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 12px; margin-top: 40px; }
  .qr__card { padding: 24px 10px 12px; }
  .qr__medal { width: 48px; height: 48px; left: -8px; top: -26px; }
  .qr__item--top .qr__medal { width: 54px; height: 54px; top: -28px; }
  .qr__name { font-size: 13.5px; margin-bottom: 8px; }
  .qr__art { height: 100px; }
  .qr__art .logoplate--lg { --ih: 32px; height: 50px; }
  .qr__art .mark--lg { --s: 56px; }
  .qr__pal { width: 48px; }
  .qr__boss { width: 90px; }
  .qr__cond { font-size: 12px; }
  .qr__reward .pt b { font-size: 20px; }
  .qr__note { font-size: 12.5px; }
  .zones { padding: 16px 10px 18px; margin-top: 28px; }
  .zones__title { --stroke: 4px; font-size: 18px; }
  .zones__list { gap: 10px; }
  .zone__char { width: 72px; height: 72px; }
  .zone__char .char { width: 62px; }
  .zone__name { font-size: 17px; }
  .zone__lead { font-size: 11px; }
  .ztabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ztab { font-size: 12.5px; }
  .xcards, .xcards--top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .xcard { padding: 10px 10px 12px; border-radius: 18px; }
  .xtile { height: 60px; padding: 6px; }
  .xtile b { font-size: 14px; }
  .xtile--logo img { max-height: 30px; }
  .xtile--dpoint img { max-height: 46px; }
  .xtile--apple img, .xtile--eth img { max-height: 38px; }
  .xtile--marks { gap: 5px; }
  .xtile--marks img { max-height: 28px; }
  .xtile i { width: 26px; height: 26px; font-size: 15px; }
  .xcard__name { font-size: 13.5px; }
  .xcard__min b { font-size: 20px; }
  .xcard__btn { font-size: 12.5px; }
  .wallet__balance b { font-size: 36px; }
  .wallet__btns { margin-left: 0; }
  .xform__row { grid-template-columns: 1fr; }
  .xform__head .xtile { width: 110px; }
  .profile { grid-template-columns: 1fr; text-align: center; padding: 18px; }
  .profile__emblem .emblem { margin: 0 auto; }
  .rankbar { margin-inline: auto; }
  .xhist__item { grid-template-columns: 1fr auto; }
  .claimbox { padding: 16px 16px 18px; }
  /* せまい画面では2段組み:1段目に名前、2段目に札(左)と報酬(右) */
  .fsel__opt, .fsel__value { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; }
  .fsel__opt { padding: 6px 8px; }
  .fsel__icon { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .fsel__label { grid-column: 2; grid-row: 1; font-size: 14.5px; }
  /* 2段目(札・報酬)がない項目は、名前を上下のまん中に */
  .fsel__opt:not(:has(.fsel__badge, .fsel__right)) .fsel__label, .fsel__value:not(:has(.fsel__badge, .fsel__right)) .fsel__label { grid-row: 1 / span 2; }
  .fsel__badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .fsel__right { grid-column: 2; grid-row: 2; justify-self: end; line-height: 1.2; }
  .fsel__right .pt b { font-size: 17px; }
  .fsel__value--placeholder { display: block; }
  .fsel__check { display: none; }
  .fsel__opt.is-selected { box-shadow: inset 5px 0 0 var(--red); }
  .fsel__opt.is-active.is-selected { box-shadow: inset 5px 0 0 var(--red), 0 3px 0 var(--ink); }
  .claimflow { display: none; }   /* スマホでは、STEP のタブだけにして、ブローカーのカードをすぐ見せる */
  .cltab { padding: 10px 4px; }
  .select { gap: 6px; }
  .fsel--compact { min-width: 190px; }
  .fsel--compact .fsel__pop { min-width: 262px; }
  .cltab b { font-size: 15px; }
  .cltab small { display: none; }
  .cltab.is-on b { -webkit-text-stroke-width: 3px; }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bcard__top { height: 84px; }
  .bcard__top .logoplate--lg { width: 124px; height: 50px; --ih: 34px; }
  .bcard__body { padding: 10px 8px 12px; }
  .bcard__name { font-size: 16px; }
  .bcard__reward { gap: 6px; }
  .bcard__reward small { padding: 0 6px; }
  .bcard__reward .pt b { font-size: 18px; }
  .bcard__reward .pt i { font-size: 12px; }
  .bcard__go { gap: 4px; padding: 8px 4px; font-size: 13px; line-height: 1.3; white-space: normal; }   /* せまい幅では、はみ出さずに折り返す */
  .clist__item { align-items: flex-start; padding: 12px; }
  .xhist__item .xtile { grid-column: 1 / -1; }
  .ledger th, .ledger td { padding: 8px 8px; font-size: 12px; }
  .rk--4, .rk--5 { display: none; }
  .rank__head small { font-size: 0; }
  .rank__head small::after { content: "TOP3"; font-size: 12px; }
  .auth__panel { padding: 22px 18px 26px; }
}

/* ───────── 冒険の記録:財布・ギルドの受付のレスポンシブ ───────── */
@media (max-width: 1080px) {
  .profile__wallet { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; width: auto; padding: 12px 18px; text-align: left; }
  .profile__pal { position: static; flex: none; width: 56px; margin: -26px 0 -8px; }
  .profile__balance b { font-size: 34px; }
  .profile__go { width: auto; margin: 0 0 0 auto; }
  .desk { grid-template-columns: 1fr; }
  .gacha { grid-template-columns: 150px minmax(0, 1fr); padding-right: 120px; }
  .gacha__machine { width: 150px; }
  .gacha__pal { width: 100px; right: 8px; }
  .guard { padding-right: 120px; }
  .guard__pal { width: 100px; right: 8px; }
  .invite-card { padding-right: 140px; }
  .invite-card__title br { display: none; }
  .invite-card__pal { width: 112px; right: 14px; }
}
@media (max-width: 640px) {
  .profile__wallet { display: block; padding: 14px 16px 16px; text-align: center; }
  .profile__pal { position: absolute; right: -8px; top: -42px; width: 66px; margin: 0; }
  .profile__go { display: flex; width: 100%; margin-top: 10px; }
  .desk__steps { padding: 16px 16px 18px; }
  .desk__guide { margin-bottom: 18px; }
  .qsteps { grid-template-columns: 1fr; gap: 14px; }
  .qstep:not(:last-child)::after { display: none; }
  .qstep__link { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "num title state" "num text state"; align-items: center; column-gap: 10px; padding: 12px 12px 12px 12px; text-align: left; }
  .qstep__num { position: static; grid-area: num; margin: 0; }
  .qstep__icon { display: none; }
  .qstep__title { grid-area: title; font-size: 16px; }
  .qstep__text { grid-area: text; margin: 0; }
  .qstep__states { grid-area: state; flex-direction: column; align-items: flex-end; margin: 0; }
  .qstep__state { padding: 0 9px; }
  .qstep__now { top: -13px; right: 10px; }
  .gacha { grid-template-columns: 1fr; gap: 8px; padding: 18px 18px 20px; }
  .gacha__machine { width: 120px; margin: 0 auto; }
  .gacha__title { font-size: 23px; }
  .gacha__lead br { display: none; }
  .gacha__stage { flex-direction: column; align-items: stretch; text-align: center; }
  .gacha__btn { display: flex; width: 100%; }
  .gacha__result { justify-self: center; margin: 0 auto; }
  .gacha__pal { width: 84px; right: 2px; top: 12px; bottom: auto; }
  .invite-card { padding: 18px 112px 18px 18px; }
  .invite-card__title { font-size: 18px; }
  .invite-card__title br { display: inline; }
  .invite-card__pal { width: 92px; right: 4px; }
}

/* 冒険の記録:冒険者の名前の欄のレスポンシブ */
@media (max-width: 640px) {
  .nickset { gap: 12px; padding: 16px 16px 18px; }
  .nickset__pal { width: 64px; }
  .nickset__title { font-size: 18px; }
  .nickset__actions .btn { flex: 1 1 auto; }
  .profile__tools { justify-content: center; margin: 4px 0 6px; }
  .profile__logout { flex-basis: 100%; justify-content: center; margin: 2px 0 0; padding-left: 2px; border-left: 0; }
}

/* 冒険の記録:アカウントの守りのレスポンシブ */
@media (max-width: 640px) {
  .guard { padding: 16px 16px 18px; }
  .guard__head { padding-right: 64px; }
  .guard__icon { width: 44px; height: 44px; }
  .guard__title { font-size: 18px; }
  .guard__state { position: absolute; right: 14px; top: 18px; }
  .guard__pal { display: none; }
  .guard__body { max-width: none; }
  .guard__setup { grid-template-columns: 1fr; }
  .guard__qr { width: 212px; margin: 0 auto; }
  .guard__form .field__input--code, .guard__confirm .field__input { max-width: none; }
  .guard__actions .btn { flex: 1 1 auto; }
  .guard__codelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   報酬金の記録(history.html。冒険の記録から「交換の申請」「報酬金の記録」を移した専用ページ)
   ========================================================================== */
.pagehead--history { --c: #b7791f; }
.histpage { padding-bottom: 80px; }
.histpage__fine { margin-top: 14px; }
/* 集計タイル(交換できる報酬金・手に入れた・交換に使った・受付中) */
.hstats { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.hstat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink); }
.hstat__label { font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.hstat__num { font-family: var(--heavy); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.hstat__num i { margin-left: 2px; font-style: normal; font-size: 15px; }
.hstat__num--plus { color: #16994a; }
.hstat__link { align-self: flex-start; margin-top: 6px; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 900; }
.hstat__link:hover { background: var(--yellow-d); }
.hstat--balance { background: radial-gradient(circle at 90% 10%, rgba(255, 198, 26, .32), transparent 46%), var(--navy); color: #fff; }
.hstat--balance .hstat__label { color: #cfd5ff; }
.hstat--balance .hstat__num { color: var(--yellow); font-size: 34px; }
.hstat--hot { background: #fff6d6; }
.hstat--hot .hstat__num { color: var(--red-d); }
.hstat--hot::after { content: "確認中"; position: absolute; top: -12px; right: 12px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 11px; font-weight: 900; line-height: 1.7; }
/* タブ(口座申請ページの cltabs を2列で。色はこのページの色) */
.cltabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cltabs--history .cltab.is-on { background: #b7791f; }
.cltabs--history .cltab { position: relative; }
.cltab--hot:not(.is-on) small { color: var(--red-d); }
.cltab--hot::before { content: ""; position: absolute; top: 10px; right: 12px; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); }
/* 種類の絞り込み */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 900; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.chip small { padding: 0 7px; border-radius: 999px; background: var(--cream); font-size: 11px; font-weight: 900; line-height: 1.6; }
.chip:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.chip.is-on { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.chip.is-on small { background: #fff; }
/* 月ごとのまとまりと1行ずつの記録 */
.lgroup + .lgroup { margin-top: 18px; }
.lgroup__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px 4px; font-family: var(--heavy); font-weight: 400; font-size: 17px; }
.lgroup__head small { font-family: var(--round); font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.lgroup__head b { margin-left: auto; font-weight: 400; font-size: 16px; }
.lgroup__head .plus { color: #16994a; }
.lgroup__head .minus { color: var(--red-d); }
.lrows { overflow: hidden; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.lrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 2px dashed var(--line); }
.lrow:last-child { border-bottom: 0; }
.lrow__date { display: flex; flex-direction: column; line-height: 1.2; }
.lrow__date b { font-family: var(--heavy); font-weight: 400; font-size: 16px; }
.lrow__date small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.lrow__main { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 13.5px; font-weight: 800; }
.lrow__main .ledger__kind { margin-right: 0; line-height: 1.8; }
.lrow__note { overflow-wrap: anywhere; }
.lrow__amt { font-family: var(--heavy); font-weight: 400; font-size: 18px; white-space: nowrap; }
.lrow__amt.plus { color: #16994a; }
.lrow__amt.minus { color: var(--red-d); }
.lrow--exchange { background: #fff7f8; }
.xhist__item--pending { background: #fffbe9; }
/* まだ何もないとき(キャラ付き) */
.hempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px 28px; border: 3px dashed var(--line); border-radius: 18px; background: #fff; text-align: center; }
.hempty__pal { width: 96px; margin-bottom: 4px; }
.hempty__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.hempty__title { font-family: var(--heavy); font-weight: 400; font-size: 18px; }
.hempty__text { max-width: 480px; font-size: 13px; font-weight: 800; line-height: 1.7; color: var(--ink-soft); }
.hempty .btn { margin-top: 8px; }

/* 冒険の記録の「記録の棚」:報酬金の記録・交換の申請への入口(最新の1件と件数だけ) */
.logcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.logcard { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; transition: transform .12s, box-shadow .12s; }
.logcard:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ink); }
.logcard:hover .logcard__icon { animation: pop .35s; }
.logcard__icon { width: 64px; height: 64px; }
.logcard__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-family: var(--heavy); font-weight: 400; font-size: 18px; line-height: 1.3; }
.logcard__title small { font-family: var(--round); font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.logcard__sum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 13px; font-weight: 800; line-height: 1.6; }
.logcard__sum .ledger__kind { margin-right: 0; line-height: 1.8; }
.logcard__sum a { text-decoration: underline; }
.logcard__sum small { width: 100%; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.logcard__amt { font-family: var(--heavy); font-weight: 400; font-size: 15px; }
.logcard__amt.plus { color: #16994a; }
.logcard__amt.minus { color: var(--red-d); }
.logcard__go { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.logcard__go::after { content: "▶"; font-size: .7em; }
.logcard__badge { position: absolute; top: -14px; right: 16px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; white-space: nowrap; transform: rotate(3deg); }
.logcard__badge[hidden] { display: none; }
.logcard--hot { outline: 4px solid var(--red); outline-offset: 3px; }

@media (max-width: 1080px) {
  .hstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstat--balance { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
  .hstat--balance .hstat__link { margin: 0 0 0 auto; }
  .logcards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hstats { gap: 10px; }
  .hstat { padding: 12px 14px; }
  .hstat__num { font-size: 24px; }
  .hstat--balance .hstat__num { font-size: 30px; }
  .hstat--balance .hstat__link { width: 100%; margin: 6px 0 0; text-align: center; }
  .cltabs--2 .cltab { padding: 10px 6px; }
  .cltabs--2 .cltab b { font-size: 16px; }
  .cltabs--2 .cltab small { display: block; font-size: 11px; }
  .chips { gap: 6px; }
  .chip { padding: 3px 11px; font-size: 12px; }
  .lrow { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; }
  .lrow__date { grid-row: 1 / span 2; }
  .lrow__amt { grid-column: 2; justify-self: start; font-size: 16px; }
  .lgroup__head { font-size: 15px; }
  .logcard { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; padding: 16px 16px 14px; }
  .logcard__icon { width: 52px; height: 52px; }
  .logcard__go { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   運だめし:毎日ガチャ(gacha.html)・運命の宝箱(bet.html)。冒険の記録から分けた専用ページと、冒険の記録に置いた入口のカード
   ========================================================================== */
.pagehead--gacha { --c: #d8323f; }
.pagehead--bet { --c: #4a3fb8; }
.playpage { padding-bottom: 80px; }
.playpage .gacha, .playpage .betting { margin-top: 16px; }
/* 残高の帯(ページの上。引いた・かけた結果はすぐここに反映) */
.pwallet { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 18px; background: radial-gradient(circle at 90% 10%, rgba(255, 198, 26, .32), transparent 46%), var(--navy); color: #fff; box-shadow: 0 5px 0 var(--ink); }
.pwallet__label { font-size: 12px; font-weight: 900; color: #cfd5ff; }
.pwallet__num { font-family: var(--heavy); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--yellow); white-space: nowrap; }
.pwallet__num i { margin-left: 2px; font-style: normal; font-size: 14px; }
.pwallet__link { margin-left: auto; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 900; }
.pwallet__link:hover { background: var(--yellow-d); }
/* お休み中(BET_DISABLED=1)の案内 */
.playpage__closed { margin-top: 16px; }
/* ページの下:もうひとつの運だめしへ・冒険の記録にもどる */
.playpage__nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.playpage__back::before { content: "◀"; font-size: .7em; }
/* 冒険の記録の「運だめし」:2枚の入口カード(今日の状況だけ。mypage.js の renderPlaycards) */
.playsec { margin-top: 18px; }
.playcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.playcard { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 96px 18px 20px; transition: transform .12s, box-shadow .12s; }
.playcard[hidden] { display: none; }
.playcard--gacha { background: radial-gradient(circle at 100% 0%, rgba(255, 198, 26, .35), transparent 38%), var(--paper); }
.playcard--bet { background: radial-gradient(circle at 100% 0%, rgba(91, 91, 214, .2), transparent 38%), var(--paper); }
.playcard:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ink); }
.playcard:hover .playcard__icon { animation: pop .35s; }
.playcard__icon { width: 64px; height: 64px; }
.playcard__tag { display: inline-block; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 1.7; }
.playcard--bet .playcard__tag { background: var(--navy); color: var(--yellow); }
.playcard__title { display: block; margin-top: 4px; font-family: var(--heavy); font-weight: 400; font-size: 18px; line-height: 1.3; }
.playcard__sum { margin-top: 4px; font-size: 12.5px; font-weight: 800; line-height: 1.6; color: var(--ink-soft); }
.playcard__sum b { color: var(--red-d); }
.playcard__sum small { display: block; font-size: 11.5px; font-weight: 800; }
.playcard__go { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.playcard__go::after { content: "▶"; font-size: .7em; }
.playcard__badge { position: absolute; top: -14px; right: 16px; z-index: 1; padding: 0 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 900; line-height: 1.7; white-space: nowrap; transform: rotate(3deg); }
.playcard__badge[hidden] { display: none; }
.playcard--hot { outline: 4px solid var(--red); outline-offset: 3px; }
.playcard__pal { position: absolute; right: 8px; bottom: -6px; width: 78px; pointer-events: none; }
.playcard__pal .char { animation: bob .8s ease-in-out infinite alternate; }
.playcard:hover .playcard__pal .char { animation: pop .35s; }
@media (max-width: 1080px) {
  .playcards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pwallet { gap: 4px 12px; padding: 10px 14px; }
  .pwallet__num { font-size: 22px; }
  .pwallet__link { width: 100%; margin: 6px 0 0; text-align: center; }
  .playpage__nav .btn { flex: 1 1 auto; }
  .playcard { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; padding: 16px 76px 14px 16px; }
  .playcard__icon { width: 52px; height: 52px; }
  .playcard__go { grid-column: 2; justify-self: start; }
  .playcard__pal { width: 62px; right: 4px; }
}

/* ==========================================================================
   未知のモンスター襲来(トップ。30日に一度のカウントダウン。日時は data.js の invasion、描画は top.js の invasion)
   ========================================================================== */
:root { --inv: #7a3fe0; --inv-d: #5a24b8; }
.btn--inv { background: var(--inv); color: #fff; }
.slide__label--inv { background: var(--inv); color: #fff; }
.datebar--inv > small { align-self: center; margin-left: 2px; padding: 0 10px; border-radius: 999px; background: var(--red); color: #fff; font-size: .42em; line-height: 1.9; }

/* メインビジュアル:影とミニカウントダウン */
.omen { position: relative; z-index: 1; width: 300px; text-align: center; }
.omen__monster { position: relative; width: 236px; margin: 0 auto; animation: bob 1.4s ease-in-out infinite alternate; }
.omen__monster .char, .inv__monster .char { filter: brightness(1) drop-shadow(0 0 16px rgba(255, 90, 90, .55)); transition: filter .9s ease, opacity .9s ease; }
.omen__monster--shadow .char, .inv__monster--shadow .char { filter: brightness(0) drop-shadow(0 0 16px rgba(170, 120, 255, .8)); opacity: .92; }
.omen__q, .inv__q {
  position: absolute; z-index: 2; font-family: var(--heavy); font-weight: 400; font-size: 54px; line-height: 1;
  color: var(--yellow); text-shadow: 0 5px 0 var(--ink); animation: float 2.4s ease-in-out infinite alternate; pointer-events: none;
}
.omen__q--1 { left: 0; top: 0; }
.omen__q--2 { right: 4px; top: 36px; font-size: 40px; animation-delay: -.8s; }
.omen__q--3 { left: 22px; bottom: 96px; font-size: 32px; animation-delay: -1.6s; }
.omen--on .omen__q { display: none; }
.omen__cd {
  display: inline-flex; flex-direction: column; align-items: center; margin-top: -12px; padding: 4px 22px 8px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--navy); color: #fff; box-shadow: 0 4px 0 var(--ink);
}
.omen__cd small { font-size: 12px; font-weight: 900; color: var(--yellow); }
.omen__cd b { font-family: var(--heavy); font-weight: 400; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.omen--on .omen__cd { background: var(--red-d); }

/* 欄(夜空と霧) */
.sec--invasion {
  border-block: 4px solid var(--ink);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .7) 1px, transparent 1.6px) 0 0 / 52px 52px,
    radial-gradient(ellipse at 50% 100%, rgba(122, 63, 224, .55), transparent 60%),
    linear-gradient(180deg, #0f1230, #2a1f5c);
}
.sec-head__title--inv { background: linear-gradient(#8d5cf0, #4b22a8); }
.inv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
.inv__stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 400px; padding: 24px 20px 20px; overflow: hidden; text-align: center;
  border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 #000;
  background: radial-gradient(circle at 50% 72%, rgba(122, 63, 224, .6), transparent 60%), var(--bricks) 0 0 / 80px 80px, #1a1535;
}
.inv--on .inv__stage { background: radial-gradient(circle at 50% 72%, rgba(232, 56, 79, .6), transparent 60%), var(--bricks) 0 0 / 80px 80px, #2b1a2e; }
.inv__stage::before {
  content: ""; position: absolute; left: 50%; top: 62%; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 8deg, transparent 8deg 16deg); animation: spin 70s linear infinite;
}
.inv__tag {
  position: absolute; left: 14px; top: 14px; z-index: 2; padding: 0 12px; border: 3px solid var(--ink); border-radius: 6px;
  background: var(--inv); color: #fff; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 12px; letter-spacing: .12em; line-height: 1.9;
}
.inv--on .inv__tag { background: var(--red); animation: thump .7s ease-out infinite alternate; }
.inv__monster { position: relative; z-index: 1; width: 230px; animation: bob 1.3s ease-in-out infinite alternate; }
.inv__q--1 { left: 12%; top: 16%; }
.inv__q--2 { right: 12%; top: 10%; font-size: 42px; animation-delay: -.8s; }
.inv__q--3 { right: 16%; top: 44%; font-size: 34px; animation-delay: -1.6s; }
.inv__name { position: relative; z-index: 1; margin-top: 6px; font-family: var(--heavy); font-weight: 400; font-size: 24px; line-height: 1.3; color: #fff; text-shadow: 0 4px 0 var(--ink); }
.inv--on .inv__name { color: var(--yellow); }
.inv__say { position: relative; z-index: 1; margin-top: 4px; font-size: 13.5px; font-weight: 800; color: #d9ccff; }
.inv__body {
  display: flex; flex-direction: column; gap: 16px; padding: 24px 26px 26px;
  border: 4px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 8px 0 #000;
}
.inv__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.inv__pill { padding: 2px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--inv); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.inv--on .inv__pill { background: var(--red); animation: thump .7s ease-out infinite alternate; }
.inv__when { font-family: var(--heavy); font-weight: 400; font-size: 20px; line-height: 1.3; }
.inv__when small { margin: 0 2px; font-family: var(--round); font-weight: 900; font-size: 13px; }

/* カウントダウンの数字(日・時間・分・秒) */
.cd { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.cd__box {
  display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: 8px 8px 6px;
  border: 4px solid var(--ink); border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, #2a3670 0 50%, #1c2448 50%); box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .2);
}
.cd__num { font-family: var(--heavy); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--yellow); }
.cd__unit { margin-top: 4px; font-size: 12px; font-weight: 900; color: #cfd8ff; }
.cd__sep { align-self: center; margin-top: -14px; font-family: var(--heavy); font-style: normal; font-size: 34px; color: var(--ink); animation: blink-sep 1s steps(1) infinite; }
.inv--on .cd__num { color: #ff8a93; }

.inv__bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 900; }
.inv__bar span { flex: none; }
.inv__bar i { flex: 1; height: 16px; overflow: hidden; border: 3px solid var(--ink); border-radius: 9px; background: #fff; }
.inv__bar b { display: block; width: 0; height: 100%; background: linear-gradient(180deg, #b48cff, var(--inv)); transition: width 1s linear; }
.inv--on .inv__bar b { background: linear-gradient(180deg, #ff7783, var(--red)); }

.inv__bonus { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 10px 18px; border: 3px dashed var(--line); border-radius: 14px; background: #fff; }
.inv__bonus small { padding: 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.9; white-space: nowrap; }
.inv__bonus b { font-family: var(--heavy); font-weight: 400; font-size: 34px; line-height: 1; color: var(--red); }
.inv__bonus span { flex-basis: 100%; font-size: 12.5px; font-weight: 800; line-height: 1.5; color: var(--ink-soft); }
.inv__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

/* ルール(3つ) */
.inv__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.inv__rule { position: relative; padding: 18px 18px 16px 64px; border: 4px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.inv__rule i {
  position: absolute; left: 14px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--heavy); font-style: normal; font-size: 18px; line-height: 1;
}
.inv__rt { display: block; font-size: 16px; font-weight: 900; line-height: 1.4; }
.inv__rt b { color: var(--inv-d); }
.inv__rs { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 800; line-height: 1.55; color: var(--ink-soft); }

@keyframes blink-sep { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* なかまたち:襲来モンスターのクセ(影のときも動く) */
.char--shade .char__arm--l { transform-origin: 72px 132px; animation: fan 1.6s ease-in-out infinite alternate; }
.char--shade .char__arm--r { transform-origin: 148px 132px; animation: fan 1.6s ease-in-out infinite alternate-reverse; }
.char--shade .shade__eye, .char--shade .shade__fire { animation: glow-lid 1.1s ease-in-out infinite alternate; }
.char--shade .shade__mist { animation: bob 1.8s ease-in-out infinite alternate; }
.char--orb .char__arm--l { transform-origin: 70px 104px; animation: flap-l .45s ease-in-out infinite alternate; }
.char--orb .char__arm--r { transform-origin: 150px 104px; animation: flap-r .45s ease-in-out infinite alternate; }
.char--orb .char__tail { transform-origin: 110px 176px; animation: wobble 1.1s ease-in-out infinite alternate; }
.char--orb .orb__iris { animation: glow 1.4s ease-in-out infinite alternate; }
.char--armor .char__arm--l { transform-origin: 66px 112px; animation: shield 1.3s ease-in-out infinite alternate; }
.char--armor .char__arm--r { transform-origin: 154px 112px; animation: sword .9s ease-in-out infinite alternate; }
.char--armor .armor__eye { animation: glow-lid .9s ease-in-out infinite alternate; }

@media (max-width: 1080px) {
  .cd__box { min-width: 72px; }
  .cd__num { font-size: 38px; }
  .inv__monster { width: 200px; }
  .inv__stage { min-height: 360px; }
  .omen { width: 240px; }
  .omen__monster { width: 190px; }
  .omen__q { font-size: 42px; }
}
@media (max-width: 820px) {
  .inv { grid-template-columns: 1fr; gap: 20px; }
  .inv__stage { min-height: 300px; }
  .inv__monster { width: 170px; }
  .inv__rules { grid-template-columns: 1fr; gap: 14px; }
  .omen { width: 210px; }
  .omen__monster { width: 160px; }
  .omen__q { font-size: 36px; }
  .omen__q--3 { bottom: 80px; }
  .omen__cd { padding: 3px 16px 6px; }
  .omen__cd b { font-size: 20px; }
  .datebar--inv { font-size: 21px; }
}
@media (max-width: 640px) {
  .cd { gap: 4px; }
  .cd__box { flex: 1 1 0; min-width: 0; padding: 6px 4px 5px; border-width: 3px; }
  .cd__num { font-size: 28px; }
  .cd__unit { font-size: 10.5px; }
  .cd__sep { margin-top: -8px; font-size: 22px; }
  .inv__body { padding: 18px 16px 20px; }
  .inv__when { font-size: 17px; }
  .inv__bonus b { font-size: 28px; }
  .inv__btns .btn { width: 100%; }
}

/* ==========================================================================
   アカウントの守り(security.html。冒険の記録の名前の横の「アカウントの守り」から入る、2段階認証の専用ページ。
   中身のカード(.guard)の見た目は「冒険の記録:アカウントの守り」のまま。案内役(シバ)はページの見出しに出す)
   ========================================================================== */
.pagehead--security { --c: #2f9be1; }
.securitypage { padding-bottom: 80px; }
.securitypage .guard { margin-top: 18px; padding-right: 24px; }   /* 案内役はカードの右ではなく見出しに出すので、右の余白はいらない */
.securitypage .guard__body { max-width: 760px; }
/* 守りの豆知識(設定の背中を押す短い説明) */
.guard-tips { margin-top: 18px; padding: 18px 24px 20px; }
.guard-tips__title { margin: 0 0 12px; font-size: 19px; }
.guard-tips__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guard-tips__list li { position: relative; padding-left: 22px; font-size: 13.5px; font-weight: 700; line-height: 1.75; }
.guard-tips__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.guard-tips__list b { color: var(--red-d); }
.guard-tips__list li > b:first-child { display: block; font-size: 14px; font-weight: 900; color: var(--ink); }
.guard-tips__fine { margin-top: 12px; }
.guard-tips__fine a { text-decoration: underline; }
@media (max-width: 640px) {
  .securitypage .guard { padding-right: 16px; }
  .guard-tips { padding: 16px 16px 18px; }
}