/* ポイギルド — プレローンチLP(prelaunch.html)専用。共通の style.css のうえに重ねる */

/* ───────── メインビジュアル ───────── */
.plhero { padding-top: 92px; padding-bottom: 36px; }
.plhero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 32px; }
.plhero__ribbon {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 4px 18px 4px 6px;
  border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 15px; transform: rotate(-2deg); box-shadow: 0 4px 0 var(--ink);
}
.plhero__ribbon span { padding: 1px 10px; border-radius: 999px; background: var(--red); color: #fff; font-family: Cinzel, serif; font-weight: 900; font-size: 11.5px; letter-spacing: .1em; }
/* (旧)正式ローンチの行はリボンにまとめた */
.plhero__launch { --stroke: 4px; margin: 0 0 6px; font-weight: 900; font-size: 18px; color: #fff; -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; }
.plhero__launch b { display: inline-block; padding: 0 12px; margin-left: 4px; border: 3px solid var(--ink); border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: 24px; -webkit-text-stroke: 0; box-shadow: 0 4px 0 var(--ink); transform: rotate(1.5deg); }
.plhero__title {
  --stroke: 11px; margin: 6px 0 0;
  font-family: var(--heavy); font-weight: 400; font-size: 58px; line-height: 1.22; letter-spacing: .01em;
  color: #fff; text-shadow: 0 6px 0 var(--ink); -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill;
}
.plhero__title em { font-style: normal; color: var(--yellow); }
.plhero__lead { --stroke: 4.5px; margin-top: 16px; font-size: 17px; font-weight: 900; line-height: 1.7; color: #fff; -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; }
.plhero__lead b { color: var(--yellow); }
.plhero__count { margin: 18px 0 0; font-weight: 900; font-size: 14px; color: #fff; }
.plhero__count b { display: inline-block; margin: 0 2px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 10px; background: var(--yellow); color: var(--ink); font-family: var(--heavy); font-weight: 400; font-size: 20px; line-height: 1.5; }
.plhero__count[hidden] { display: none; }


/* キャッチ「ポイントサービスの決定版」 */
.plhero__catch {
  --stroke: 7px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 14px;
  font-family: var(--heavy); font-weight: 400; font-size: 34px; line-height: 1.2; color: #fff;
  text-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill;
}
.plhero__catch em { font-style: normal; color: var(--yellow); }
.plhero__catch small {
  padding: 1px 12px; border: 3px solid var(--ink); border-radius: 8px; background: var(--red);
  font-family: var(--round); font-weight: 900; font-size: 14px; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 0; text-shadow: none;
}
.plhero__lead small { display: inline-block; margin-top: 6px; font-size: 14px; }

/* ヒーロー右側:交換の流れと交換先のロゴ */
.plhero__side { position: relative; padding-top: 18px; }
.plhero__burst {
  position: absolute; right: -14px; top: -34px; z-index: 3; padding: 26px 32px 28px; white-space: nowrap;
  font-family: var(--heavy); font-weight: 400; font-size: 19px; line-height: 1; color: var(--red); transform: rotate(8deg);
}
.plhero__burst b { font-weight: 400; font-size: 1.4em; }
.plswap { position: relative; z-index: 1; display: grid; gap: 14px; }
.plswap__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.plswap__flow li {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 8px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); box-shadow: 0 4px 0 var(--ink);
  font-weight: 900; font-size: 13.5px; line-height: 1.3;
}
.plswap__flow li:last-child { background: var(--red); color: #fff; }
.plswap__flow li + li::before { content: "▶"; position: absolute; left: -15px; top: 50%; translate: 0 -50%; font-size: 12px; color: var(--yellow); }
.plswap__flow i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font-style: normal; font-family: var(--heavy); font-weight: 400; font-size: 13px; }
.plswap__box { padding: 16px 16px 18px; border: 4px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 7px 0 var(--ink); }
.plswap__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; font-weight: 900; font-size: 16px; line-height: 1.5; }
.plswap__title b { color: var(--red-d); }
.plswap__title small { padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: 12px; }
/* 列数は prelaunch.js が交換先の数から --cols に入れる(半端な段は中央寄せ) */
.plswap__logos { --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plswap__item { display: flex; flex: 0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols)); flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; text-align: center; }
.plswap__item .xtile { height: 60px; padding: 6px 8px; }
.plswap__item .xtile b { font-size: 15px; }
.plswap__item .xtile--marks { gap: 4px; }
.plswap__item .xtile--marks img { max-height: 26px; }
.plswap__item small { font-weight: 900; font-size: 11px; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
/* 手数料がかかる交換先(銀行振込・暗号資産。prelaunch.js が PM.exchangeFeeRate から出す) */
.plswap__fee { display: block; width: fit-content; margin: 2px auto 0; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font-style: normal; font-size: 10px; line-height: 1.6; white-space: nowrap; }
.plhero__cast { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-top: 12px; }
.plhero__cast .char { width: 92px; animation: bob .7s ease-in-out infinite alternate; }
.plhero__cast .char:nth-child(2) { width: 118px; animation-delay: -.35s; }
/* Amazon・PayPay は目立たせる */
.plswap__item--amazon .xtile, .plswap__item--paypay .xtile { border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }

/* ───────── 受付中のクエスト ───────── */
.plquests .sec-head__sub--on { font-weight: 900; }
.plquests__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.plq { --c: var(--fx); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 8px 0 var(--ink); }
.plq__thumb { position: relative; display: grid; place-items: center; height: 132px; border-bottom: 4px solid var(--ink); background: var(--c); overflow: hidden; }
.plq__thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; background: repeating-conic-gradient(rgba(255, 255, 255, .18) 0 12deg, transparent 12deg 24deg); animation: spin 60s linear infinite; }
/* 画像は枠の内側に必ず収める(grid だと max-height:100% が効かず、縦長の画像が枠の下へはみ出していた) */
.plq__logo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 200px; height: 74px; padding: 8px 18px; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.plq__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Bubinga のロゴ画像(180×80)は白地で上下に余白が多いので、枠いっぱいに広げて上下の白地だけ切る(文字は切れない) */
.plq__logo--bo-bubinga { padding: 0 10px; }
.plq__logo--bo-bubinga img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.plq__area { position: absolute; left: 14px; top: 12px; z-index: 1; padding: 1px 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 12.5px; }
.plq__pre { position: absolute; right: -34px; top: 18px; z-index: 1; width: 160px; padding: 2px 0; rotate: 32deg; background: var(--red); color: #fff; text-align: center; font-family: Cinzel, serif; font-weight: 900; font-size: 11px; letter-spacing: .12em; border-block: 3px solid var(--ink); }
.plq__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; }
.plq__name { font-weight: 900; font-size: 13.5px; color: var(--ink-soft); }
.plq__quest { margin: 0; font-family: var(--heavy); font-weight: 400; font-size: 21px; line-height: 1.35; }
.plq__action { margin: 0; font-weight: 800; font-size: 14px; }
.plq__pt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); box-shadow: 0 4px 0 var(--ink); }
.plq__pt small { font-weight: 900; font-size: 13px; }
.plq__pt b { font-family: var(--heavy); font-weight: 400; font-size: 34px; line-height: 1; color: var(--red-d); }
.plq__pt b i { font-style: normal; font-size: .55em; margin-left: 2px; }
.plq__pt s { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.plq__pt .plq__yen { margin-left: 4px; font-weight: 900; font-size: 13px; color: var(--ink-soft); }
.plq__dl { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; margin: 6px 0 0; font-size: 13px; }
.plq__dl dt { padding: 0 8px; border-radius: 6px; background: var(--cream-2); font-weight: 900; text-align: center; align-self: start; }
.plq__dl dd { margin: 0; font-weight: 700; line-height: 1.6; }
.plq__dl ul { margin: 0; padding-left: 1.1em; }
.plq__spec { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.plq__spec li { padding: 0 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 12px; }
.plq__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.plq__btns .btn { flex: 1 1 auto; }
.plq__prep { margin: 0; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.plquests__note { margin: 26px auto 0; max-width: 820px; color: #fff; text-align: center; }

/* ───────── 流れ ───────── */
.plflow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 30px 0 0; list-style: none; }
.plflow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 38px 18px 22px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--ink); text-align: center; }
.plflow__num { position: absolute; left: 50%; top: -26px; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px; border: 4px solid var(--ink); border-radius: 50%; background: var(--red); color: #fff; font-family: var(--heavy); font-weight: 400; font-size: 24px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; box-shadow: 0 4px 0 var(--ink); }
.plflow__ico { width: 86px; }
.plflow__ico .char { width: 100%; }
.plflow__step > b { font-size: 15.5px; font-weight: 900; }
.plflow__step p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.7; }

/* ───────── 先行登録 ───────── */
.plreg { position: relative; overflow: hidden; padding: 70px 0 80px; border-block: 4px solid var(--ink); background: var(--ichimatsu) 0 0 / 48px 48px, linear-gradient(180deg, #1c2448, #2a3670); color: #fff; }
.plreg__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 40px; }
.plreg__ribbon { display: inline-block; margin: 0 0 12px; padding: 2px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 900; font-size: 13.5px; letter-spacing: .04em; transform: rotate(-2deg); box-shadow: 0 4px 0 var(--ink); }
.plreg__title { --stroke: 9px; margin: 0; font-family: var(--heavy); font-weight: 400; font-size: 42px; line-height: 1.3; color: #fff; text-shadow: 0 5px 0 var(--ink); -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; }
.plreg__title em { font-style: normal; color: var(--yellow); }
.plreg__perks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 900; font-size: 15.5px; }
.plreg__perks li { display: flex; align-items: center; gap: 10px; }
.plreg__perks li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 14px; }
.plreg__perks b { color: var(--yellow); font-family: var(--heavy); font-weight: 400; font-size: 1.2em; }
.plreg__cast { display: flex; align-items: flex-end; gap: 4px; margin-top: 26px; }
.plreg__cast .char { width: 96px; animation: bob .7s ease-in-out infinite alternate; }
.plreg__cast .char:nth-child(2) { width: 124px; animation-delay: -.35s; }

.plreg__card { width: 100%; border: 4px solid var(--ink); border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.plreg__box.auth { padding: 0; width: 100%; border: 4px solid var(--ink); border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.plreg__box .auth__panel { padding: 28px 30px 30px; }
.plreg__box .auth__panel[hidden], .plreg__done[hidden] { display: none; }
.plreg__done { padding: 30px 30px 30px; }
.plreg__done h3 { margin: 6px 0 10px; font-family: var(--heavy); font-weight: 400; font-size: 26px; }
.plreg__done h3:focus { outline: none; }
.plreg__done p { margin: 0 0 14px; font-weight: 700; line-height: 1.75; }
.plreg__doneico { width: 120px; margin: 0 auto; }
.plreg__donebtns { display: grid; gap: 10px; margin: 16px 0; }
.plreg__donebtns .btn { width: 100%; }
/* トップの案内カード(入力欄は登録ページへ) */
.plreg__card { padding: 32px 34px 28px; }
.plreg__guest[hidden] { display: none; }
.plreg__cardlead { margin: 0 0 18px; text-align: center; font-family: var(--heavy); font-weight: 400; font-size: 24px; line-height: 1.4; }
.plreg__cardlead b { font-weight: 400; color: var(--red-d); }
.plreg__mini { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.plreg__mini li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); font-weight: 900; font-size: 15px; }
.plreg__mini li span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--heavy); font-weight: 400; font-size: 15px; }
.plreg__mini b { color: var(--red-d); }
.plreg__mini p { margin: 0; }
.plreg__cardnote { margin: 16px 0 0; text-align: center; }
/* 登録ページ */
.plreg--page { border-top: 0; padding: 56px 0 72px; }
.plreg__back { margin: 22px 0 0; font-weight: 900; font-size: 14px; }
.plreg__back a { color: #fff; }

/* ───────── FAQ ───────── */
.plfaq__list { margin: 0; }
.plfaq__item { margin-bottom: 14px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink); overflow: hidden; }
.plfaq__item dt { display: flex; gap: 12px; padding: 14px 20px; font-weight: 900; font-size: 15.5px; background: var(--yellow); border-bottom: 4px solid var(--ink); }
.plfaq__item dt::before { content: "Q"; flex: none; font-family: var(--heavy); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--red-d); }
.plfaq__item dd { display: flex; gap: 12px; margin: 0; padding: 14px 20px 16px; font-weight: 700; font-size: 14px; line-height: 1.75; }
.plfaq__item dd::before { content: "A"; flex: none; font-family: var(--heavy); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--aqua-d); }
/* 「プレローンチって、なに?」(元の単独セクションをFAQに格納) */
.plfaq__body { flex: 1; min-width: 0; }
.plfaq__body > p { margin: 0 0 12px; }
.plfaq__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.plfaq__phases li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); }
.plfaq__phases li.is-now { background: var(--yellow); }
.plfaq__phases li > span { align-self: flex-start; padding: 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 900; font-size: 12px; line-height: 1.7; }
.plfaq__phases li.is-now > span { background: var(--red); }
.plfaq__phases li.is-now > span::before { content: "▶ "; }
.plfaq__phases li > b { font-family: var(--heavy); font-weight: 400; font-size: 17px; line-height: 1.4; }
.plfaq__phases li > small { font-size: 12.5px; line-height: 1.6; }
.plfaq__points { margin: 0; padding-left: 1.2em; list-style: disc; }
.plfaq__points li + li { margin-top: 4px; }

/* ───────── スマホ ───────── */
@media (max-width: 1080px) {
  .plhero__side { max-width: 640px; margin-top: 26px; }
  /* 登録ページはフォームを早く見せる(キャラ絵ともどるリンクは省く。トップへはロゴから) */
  .plreg--page .plreg__cast, .plreg--page .plreg__back { display: none; }
  .plreg--page .plreg__in { gap: 26px; }
  .plhero__in { grid-template-columns: 1fr; }
  .plflow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
  .plreg__in { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .plfaq__phases { grid-template-columns: minmax(0, 1fr); }
  .plquests__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .plhero__catch { --stroke: 6px; font-size: 26px; }
  .plswap__flow { gap: 14px; }
  .plswap__flow li { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; font-size: 12px; }
  .plswap__flow li + li::before { left: -12px; font-size: 10px; }
  .plswap__box { padding: 14px 12px 16px; }
  .plswap__title { font-size: 14.5px; }
  .plswap__item .xtile { height: 52px; }
  .plhero__burst { right: -6px; top: -30px; font-size: 15px; padding: 20px 24px 22px; }
  .plhero__cast .char { width: 70px; }
  .plhero__cast .char:nth-child(2) { width: 90px; }
  .plreg__card { padding: 24px 18px 22px; }
  .plreg__cardlead { font-size: 20px; }
  .plreg__mini li { font-size: 13.5px; }
  .plreg--page { padding-top: 36px; }
  .plhero { padding-top: 80px; }
  .plhero__title { font-size: 42px; }
  .plhero__lead { font-size: 15px; }
  .plhero__lead br { display: none; }
  .plflow__list { grid-template-columns: minmax(0, 1fr); }
  .plreg__title { font-size: 32px; }
  .plreg__box .auth__panel, .plreg__done { padding: 22px 18px 24px; }
  .plq__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .plq__dl dt { justify-self: start; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .plq__thumb::before, .plreg__cast .char { animation: none; }
}

/* リボンに正式ローンチを並べる・キャッチは1行・タイトルは少し小さく(2026-10-15 ヒーローの見直し) */
.plhero__ribbon i { margin-left: 4px; padding-left: 12px; border-left: 3px solid var(--line); font-style: normal; }
.plhero__ribbon i b { color: var(--red-d); }
.plhero__catch > span { display: block; }
.plhero__title { font-size: 46px; }
.plhero__title em { margin-left: 4px; }
@media (max-width: 640px) {
  .plhero__ribbon { flex-wrap: wrap; font-size: 13.5px; }
  .plhero__title { font-size: 34px; }
}

/* 吹き出しはキャラの横へ(交換の流れを隠さない)・キャッチを主役に・ロゴの文字の折り返し */
.plhero__burst { top: auto; bottom: 10px; right: -10px; }
.plhero__catch { font-size: 44px; }
.plhero__catch small { font-size: 15px; }
.plhero__title { font-size: 38px; }
.plswap__item .xtile b { font-size: 13px; white-space: nowrap; }
.plswap__item .xtile i { width: 26px; height: 26px; font-size: 14px; }
@media (max-width: 640px) {
  .plhero__ribbon i { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  .plhero__catch { font-size: 29px; }
  .plhero__catch small { font-size: 13px; }
  .plhero__title { font-size: 28px; }
  .plhero__burst { bottom: 4px; right: -4px; }
  .plswap__item small { font-size: 10px; }
  .plswap__item .xtile b { font-size: 11px; }
}

/* キャラと吹き出しは横並び(重ねない) */
.plhero__foot { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; }
.plhero__foot .plhero__cast { margin-top: 0; }
.plhero__foot .plhero__burst { position: static; flex: none; transform: rotate(-6deg); }
@media (max-width: 640px) {
  .plhero__foot { gap: 0; }
  .plhero__foot .plhero__burst { font-size: 13px; padding: 18px 20px 20px; }
  .plhero__cast .char { width: 58px; }
  .plhero__cast .char:nth-child(2) { width: 76px; }
  .plswap__item--bank .xtile i { display: none; }
}