@charset "UTF-8";
/* =========================================================
   StudyGameX 事前登録ページ（prereg.html）専用  2026-10-20 全面リニューアル
   構成：キービジュアル → 追従ボタン → キャンペーン → ポイント → とは → 見どころ → News → SNS・ゲーム情報
   動き：main.js が .js-inview に .is-show を付ける → 下の「登場アニメーション」が動く
   ========================================================= */
.pg { --pg-up: min(10vw, 120px); --bounce: cubic-bezier(.28,1.64,.58,.87); --ease: cubic-bezier(.19,1,.22,1); --pop: cubic-bezier(.175,.885,.32,1.275);
  background: transparent; }
.pg-main { position: relative; overflow-x: clip; }

/* ---------- 背景（固定） ---------- */
.pg-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(10,91,214,.08) 1.2px, transparent 0) 0 0 / 22px 22px,
    url("../img/prereg/bg.webp") center / cover no-repeat,
    linear-gradient(180deg, #e8f5ff 0%, #ffffff 45%, #eaf6ff 100%); }

/* ---------- 画像の枠（画像が無いあいだはファイル名を表示） ---------- */
.slot { position: relative; display: block; }
.slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot:not(:has(img)) { background: repeating-linear-gradient(45deg, #eef6fd 0 12px, #dcecfa 12px 24px);
  outline: 2px dashed #8fb8de; outline-offset: -2px; }
.slot:not(:has(img))::after { content: "img/prereg/" attr(data-slot); position: absolute; inset: 0; display: grid; place-items: center; padding: 8px;
  text-align: center; font-size: clamp(.6rem, 1.4vw, .85rem); font-weight: 800; line-height: 1.4; color: var(--c-blue-dark); word-break: break-all; }

/* ---------- 共通：見出し ---------- */
.pg-sec { position: relative; margin-top: clamp(80px, 11vw, 200px); }
.pg-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 16px; }
.cpn__label, .pg-label { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; margin: 0;
  padding: 8px 18px 9px; background: var(--c-navy); color: #fff; font-size: clamp(1rem, 3.6vw, 1.5rem); font-weight: 900; white-space: nowrap;
  transform: rotate(-6deg) skewX(-8deg); box-shadow: 6px 6px 0 var(--c-sky); letter-spacing: .04em; }
.cpn__label small, .pg-label small { font-family: var(--font-en); font-weight: 800; font-size: .62em; letter-spacing: .12em; color: var(--c-sky-light); }
.pg-label { flex-direction: row; align-items: baseline; gap: .45em; }
.pg-label small { font-family: var(--font-ja); font-size: .8em; letter-spacing: .04em; color: #fff; }
.cpn__read, .pg-read { display: flex; flex-direction: column; margin: 4px 0 0 10px; font-weight: 900; line-height: 1.25;
  font-size: clamp(1.2rem, 5vw, 3.2rem); color: var(--c-navy); transform: skewX(-8deg);
  text-shadow: 3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff, 0 6px 14px rgba(10,91,214,.18); }
.pg-read { display: block; white-space: normal; }
.cpn__read { white-space: nowrap; }
.cpn__read > span { display: block; }
.cpn__read-l2 { padding-left: 1.2em; }
.cpn__read em, .pg-read em { font-style: normal; color: var(--c-blue);
  background: linear-gradient(transparent 68%, rgba(53,184,245,.45) 68%) no-repeat 0 0 / 100% 100%; }
.pg-read__sub { display: inline-block; margin-top: .3em; font-size: .55em; color: var(--c-text); }

/* =========================================================
   1. キービジュアル
   ========================================================= */
.pg-kv { position: relative; }
.pg-kv__img { position: relative; overflow: hidden; aspect-ratio: 9 / 16; max-height: calc(100svh - var(--header-h)); width: 100%;
  background: linear-gradient(180deg, #4fb6ff, #d9f1ff); }
.pg-kv__layer { position: absolute; inset: -3%; will-change: transform; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.pg-kv__bgimg, .pg-kv__bgimg img, .pg-kv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-kv__bgimg img { animation: pgKen 24s ease-in-out infinite alternate; }
.pg-kv__video { opacity: 0; transition: opacity 1.2s; }
.pg-kv__video.is-ready { opacity: 1; }
@keyframes pgKen { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.slot--kvchara { position: absolute; inset: 0; }
.slot--kvchara img { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 30px rgba(6,60,145,.35)); }
.slot--kvchara:not(:has(img)) { inset: 22% 12% 18%; background: rgba(255,255,255,.45); outline-color: #fff; border-radius: 16px; }
/* ふわふわ上がる記号 */
.pg-kv__symbols { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pg-kv__symbols span { position: absolute; bottom: -10%; color: #fff; font-family: var(--font-en); font-weight: 900; opacity: 0;
  text-shadow: 0 0 12px rgba(53,184,245,.9), 0 0 2px #0a5bd6; animation: pgRise 12s linear infinite; }
.pg-kv__symbols span:nth-child(1)  { left: 6%;  font-size: 2.2rem; animation-delay: 0s; }
.pg-kv__symbols span:nth-child(2)  { left: 15%; font-size: 1.4rem; animation-delay: 2.5s; }
.pg-kv__symbols span:nth-child(3)  { left: 24%; font-size: 1.8rem; animation-delay: 5s; }
.pg-kv__symbols span:nth-child(4)  { left: 33%; font-size: 1.2rem; animation-delay: 1.2s; }
.pg-kv__symbols span:nth-child(5)  { left: 44%; font-size: 2rem;   animation-delay: 7s; }
.pg-kv__symbols span:nth-child(6)  { left: 53%; font-size: 1.1rem; animation-delay: 3.6s; color: #ffe066; }
.pg-kv__symbols span:nth-child(7)  { left: 62%; font-size: 1.7rem; animation-delay: 8.4s; }
.pg-kv__symbols span:nth-child(8)  { left: 70%; font-size: 1.5rem; animation-delay: .6s; }
.pg-kv__symbols span:nth-child(9)  { left: 78%; font-size: 1.6rem; animation-delay: 6s; }
.pg-kv__symbols span:nth-child(10) { left: 85%; font-size: 1.1rem; animation-delay: 9.6s; }
.pg-kv__symbols span:nth-child(11) { left: 91%; font-size: 2.1rem; animation-delay: 4.4s; }
.pg-kv__symbols span:nth-child(12) { left: 97%; font-size: 1.2rem; animation-delay: 10.5s; color: #ffe066; }
@keyframes pgRise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translateY(-115vh) rotate(200deg); opacity: 0; } }
/* 登場の一瞬だけ光る */
.pg-kv__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 40% 45%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%); }
.pg-kv__logo { position: absolute; z-index: 2; left: 3%; top: 3%; width: clamp(130px, 22vw, 400px); height: auto;
  filter: drop-shadow(0 6px 12px rgba(6,60,145,.35)); }
.pg-kv__scroll { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; font-family: var(--font-en); font-weight: 800; font-size: .66rem; letter-spacing: .25em; text-shadow: 0 1px 4px rgba(6,60,145,.6); }
.pg-kv__scroll::after { content: ""; width: 2px; height: 38px; background: linear-gradient(#fff, transparent); animation: pgScroll 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes pgScroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.pg-kv__ribbon { position: absolute; z-index: 2; right: 0; top: 0; padding: 8px 18px 8px 30px; color: #fff; font-weight: 900;
  font-size: clamp(.68rem, 1.3vw, 1rem); background: linear-gradient(100deg, var(--c-blue), var(--c-sky));
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); transition: transform .3s var(--ease); }
.pg-kv__ribbon::after { content: " ›"; }
.pg-kv__ribbon:hover { transform: translateX(4px); }
.pg-kv__body { position: relative; z-index: 3; max-width: 1920px; margin: -12vw auto 0; padding: 0 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pg-kv__read { margin: 0; display: flex; flex-direction: column; font-weight: 900; line-height: 1.15; transform: skewX(-8deg);
  font-size: clamp(1.7rem, 6.6vw, 4.6rem); color: var(--c-navy); white-space: nowrap;
  text-shadow: 4px 4px 0 #fff, -4px 4px 0 #fff, 4px -4px 0 #fff, -4px -4px 0 #fff, 0 4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff, 0 -4px 0 #fff, 0 10px 20px rgba(10,91,214,.25); }
.pg-kv__read span:last-child { padding-left: 1.4em; }
.pg-kv__read em { font-style: normal; color: var(--c-blue); }
.pg-kv__cta { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 4px; }
.pg-store { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 12px; background: #111; color: #fff; line-height: 1.2;
  font-weight: 800; font-size: .9rem; min-width: 172px; box-shadow: 0 6px 14px rgba(0,0,0,.18); transition: transform .3s var(--pop); }
.pg-store:hover { transform: scale(.96); }
.pg-store small { display: block; font-size: .62rem; font-weight: 600; opacity: .8; }
.pg-store--soon { background: #6b7684; cursor: default; }
.pg-store--soon:hover { transform: none; }

/* =========================================================
   追従する丸い「事前登録」ボタン
   ========================================================= */
.pg-float { position: fixed; z-index: 90; right: 12px; bottom: 14px; width: clamp(104px, 12vw, 210px); aspect-ratio: 1;
  pointer-events: none; opacity: 0; transform: scale(.5); }
.pg-float.is-show { pointer-events: auto; opacity: 1; transform: scale(1); transition: transform .6s var(--bounce) .2s, opacity .6s var(--ease) .2s; }
.pg-float.is-hidden { pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.pg-float__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; color: #fff; text-align: center;
  background: radial-gradient(circle at 35% 28%, #7fd8ff 0%, var(--c-sky) 35%, var(--c-blue) 80%);
  border: clamp(4px, .5vw, 8px) solid #fff; box-shadow: 0 0 0 3px var(--c-sky), 0 12px 26px rgba(6,60,145,.35);
  transition: transform .3s var(--pop); animation: pgPulse 2.4s ease-in-out infinite; }
.pg-float__btn:hover { transform: scale(.95); transition: transform .5s var(--ease); }
.pg-float__ring { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.7); animation: pgSpin 14s linear infinite; }
.pg-float__txt { font-weight: 900; font-style: italic; line-height: 1.05; font-size: clamp(1.15rem, 2.3vw, 2.4rem); text-shadow: 0 3px 0 var(--c-blue-dark); }
.pg-float__btn small { margin-top: 3px; font-family: var(--font-en); font-weight: 800; font-size: clamp(.5rem, .8vw, .8rem); letter-spacing: .06em; }
@keyframes pgSpin { to { transform: rotate(360deg); } }
@keyframes pgPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--c-sky), 0 12px 26px rgba(6,60,145,.35); } 50% { box-shadow: 0 0 0 9px rgba(53,184,245,.35), 0 12px 26px rgba(6,60,145,.35); } }

/* =========================================================
   2. 事前登録キャンペーン
   斜めの青い帯が左から広がる → キャラが滑り込む → アイテムが順にポップ
   ========================================================= */
.cpn { position: relative; margin-top: clamp(40px, 6vw, 100px); padding-bottom: 20px; }
.cpn__inner { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.cpn__head { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.cpn__body { position: relative; display: grid; grid-template-columns: 44% 1fr; grid-template-areas: "chara main" "items items";
  gap: 18px 12px; align-items: center; margin-top: 22px; }

/* 斜めの帯（2層） */
.cpn__bg { position: absolute; z-index: 0; left: 50%; top: 6%; width: 100vw; height: 58%;
  transform: translateX(-50%) skewY(-9deg); pointer-events: none; }
.cpn__bg-back, .cpn__bg-front { position: absolute; inset: 0; overflow: hidden; }
.cpn__bg-back { background: var(--c-sky-light); transform: skewY(-3deg) translateY(-8%); }
.cpn__bg-front { background: linear-gradient(100deg, var(--c-blue) 0%, #1e8ef0 50%, var(--c-sky) 100%); }
.cpn__bg-front::before { content: ""; position: absolute; inset: -50%; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 40h30M45 25v30'/%3E%3Cpath d='M130 120l22 22M152 120l-22 22'/%3E%3Ccircle cx='150' cy='45' r='14'/%3E%3Cpath d='M40 150h28'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='54' cy='138' r='4'/%3E%3Ccircle cx='54' cy='162' r='4'/%3E%3Cpath d='M95 80l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px; transform: skewY(9deg); animation: cpnDrift 40s linear infinite; }
@keyframes cpnDrift { to { background-position: 200px -200px; } }

/* キャラ */
.cpn__chara { grid-area: chara; position: relative; z-index: 2; }
.cpn__glow { position: absolute; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(191,233,255,.6) 40%, transparent 70%); }
.cpn__chara-fig { position: relative; animation: cpnFloat 3.6s ease-in-out infinite; }
.slot--chara { aspect-ratio: 1300 / 1250; }
.slot--chara img { object-fit: contain; filter: drop-shadow(0 14px 18px rgba(6,60,145,.28)); }
@keyframes cpnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cpn__bubble { position: absolute; z-index: 3; right: -8%; top: -10%; margin: 0; padding: 8px 12px; border-radius: 18px;
  background: #fff; color: var(--c-blue); font-weight: 900; font-size: clamp(.7rem, 2.6vw, 1.15rem); line-height: 1.3; text-align: center;
  border: 3px solid var(--c-sky); box-shadow: 0 6px 14px rgba(10,91,214,.18); transform-origin: 20% 100%; }
.cpn__bubble::after { content: ""; position: absolute; left: 22%; bottom: -15px; border: 7px solid transparent; border-top: 9px solid var(--c-sky); }

/* アイテム共通 */
.cpn__item { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; }
.cpn__item dd { order: 1; position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: 20px; background: linear-gradient(160deg, #ffffff 0%, #e3f4ff 55%, #bfe9ff 100%);
  border: 5px solid #fff; box-shadow: 0 0 0 3px var(--c-sky), 0 12px 22px rgba(6,60,145,.25); }
.cpn__item dt { order: 2; position: relative; z-index: 2; margin-top: -.9em; font-weight: 900; color: var(--c-blue); text-align: center; line-height: 1.25;
  font-size: clamp(.8rem, 2.6vw, 1.25rem);
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 -3px 0 #fff; }
.cpn__item dt small { font-size: .78em; white-space: nowrap; }
.cpn__goal { position: absolute; left: -6px; top: -10px; z-index: 3; padding: 3px 9px; border-radius: 999px;
  background: var(--c-navy); color: #fff; font-family: var(--font-en); font-weight: 800; font-size: clamp(.6rem, 2vw, .85rem); line-height: 1.2; white-space: nowrap; }
.slot--icon { width: 74%; aspect-ratio: 1; }
.slot--icon img { object-fit: contain; filter: drop-shadow(0 4px 4px rgba(6,60,145,.25)); }
.slot--icon:not(:has(img))::after { font-size: clamp(.5rem, 1.2vw, .7rem); }

/* メイン（限定キャラ）カード */
.cpn__item--main { grid-area: main; }
.cpn__item--main dd { aspect-ratio: 4 / 3.4; grid-template-columns: 1fr 1fr; gap: 8%; padding: 12% 8% 15%;
  background: linear-gradient(160deg, #ffffff 0%, #d3efff 50%, #8fd8ff 100%); }
.cpn__item--main dt { font-size: clamp(.85rem, 3vw, 1.6rem); }
.cpn__item--main dt b { color: var(--c-navy); }
.cpn__secret { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 14px;
  background: linear-gradient(170deg, var(--c-blue), var(--c-sky)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.cpn__secret i { font-style: normal; font-family: var(--font-en); font-weight: 900; color: #fff; font-size: clamp(1.8rem, 8vw, 4.4rem); line-height: 1;
  text-shadow: 0 4px 0 rgba(6,60,145,.35); }
.slot--secret { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; }
.slot--secret:not(:has(img)) { display: none; }
.cpn__secret:has(.slot--secret img) i { display: none; }
.cpn__secret .cpn__goal { left: 50%; top: -10px; transform: translateX(-50%); background: var(--c-yellow); color: var(--c-navy); }
.cpn__spark { position: absolute; width: 22px; height: 22px; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px var(--c-sky)); animation: cpnTwinkle 1.8s ease-in-out infinite; }
.cpn__spark--1 { right: 4%; top: 4%; }
.cpn__spark--2 { left: 3%; bottom: 10%; width: 16px; height: 16px; animation-delay: .9s; }
@keyframes cpnTwinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* 小カード3枚 */
.cpn__items { grid-area: items; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 4px; }

/* 達成した報酬 */
[data-goal].is-done::after { content: "達成！"; position: absolute; z-index: 4; right: -6px; top: -12px; padding: 2px 10px; border-radius: 999px;
  background: #12a150; color: #fff; font-size: .72rem; font-weight: 900; box-shadow: 0 3px 0 #0b7a3b; }

/* 注記・登録者数 */
.cpn__foot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 30px; }
.cpn__notes { margin: 0; padding: 0; list-style: none; font-size: .75rem; color: var(--c-text-sub); }
.cpn__notes li { text-indent: -1em; padding-left: 1em; line-height: 1.7; }
.pr-count { width: min(100%, 560px); padding: 16px 20px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 0 0 3px var(--c-sky), 0 10px 20px rgba(6,60,145,.15); }
.pr-count[hidden] { display: none; }
.pr-count__label { margin: 0; font-weight: 800; font-size: .85rem; color: var(--c-text-sub); }
.pr-count__num { margin: 2px 0 8px; color: var(--c-blue); font-weight: 900; }
.pr-count__num b { font-family: var(--font-en); font-size: 2.2rem; }
.pr-count__bar { height: 12px; border-radius: 999px; background: var(--c-bg-tint); overflow: hidden; }
.pr-count__bar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--c-blue), var(--c-sky)); transition: width 1.2s var(--ease); }
.pr-count__next { margin: 8px 0 0; font-size: .85rem; font-weight: 800; }

/* =========================================================
   3. StudyGameXとは
   ========================================================= */
.pg-about__body { position: relative; margin-top: 10px; }
.pg-about__visual { position: relative; max-width: 1600px; margin: 0 auto; }
.slot--about { aspect-ratio: 1800 / 1000; }
.slot--about img { object-fit: contain; }
.pg-about__detail { position: relative; z-index: 2; width: calc(100% - 40px); margin: -6% auto 0; transform: skew(-8deg);
  background: rgba(255,255,255,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 14px 30px rgba(6,60,145,.2); }
.pg-tab { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--c-navy); color: #fff; font-weight: 900; text-align: center; }
.pg-tab button { position: relative; min-height: 52px; padding: 6px 4px; color: inherit; font-size: clamp(.68rem, 1.4vw, 1.1rem); transition: background-color .3s var(--ease); }
.pg-tab button:not(:first-child) { border-left: 1px solid rgba(255,255,255,.6); }
.pg-tab button:hover { background: #1e4f9a; }
.pg-tab button.is-active { pointer-events: none; background: var(--c-blue); }
.pg-tab button.is-active::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 11px; margin-left: -10px;
  background: var(--c-blue); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pg-tab p { margin: 0; transform: skew(8deg); line-height: 1.3; }
.pg-tab-text { transform: skew(8deg); padding: 26px 26px 26px 34px; line-height: 1.85; font-size: clamp(.85rem, 1.4vw, 1.1rem); min-height: 12em; display: flex; align-items: center; }
.pg-tab-text > div { display: none; }
.pg-tab-text > .is-active { display: block; }

/* =========================================================
   5. 見どころ（流れ続けるカード）
   ========================================================= */
.pg-project__head { text-align: center; padding: 0 16px; }
.pg-project__title { margin: 0; font-family: var(--font-en); font-style: italic; font-weight: 900; line-height: 1.1; letter-spacing: .02em;
  font-size: clamp(1.8rem, 6vw, 4.6rem); background: linear-gradient(100deg, var(--c-navy), var(--c-blue) 45%, var(--c-sky));
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #fff); }
.pg-project__read { margin: 18px 0 0; font-weight: 800; line-height: 1.8; font-size: clamp(.9rem, 1.8vw, 1.5rem); }
.pg-project__body { position: relative; margin-top: 30px; }
.pg-project__list { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; padding: 10px 0 20px; }
.pg-project__list ul { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.pg-project__list li { position: relative; width: clamp(150px, 19vw, 340px); margin: 0 calc(clamp(150px, 19vw, 340px) * -.08); }
.pg-project__list .slot { aspect-ratio: 4 / 5; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.pg-project__list .slot:has(img) { background: var(--c-navy); }
.pg-project__list li span { position: absolute; left: 8%; right: 18%; bottom: 7%; white-space: nowrap; z-index: 2; color: #fff; font-weight: 900; font-style: italic;
  font-size: clamp(.68rem, 1.25vw, 1.25rem); text-align: center; text-shadow: 0 2px 6px rgba(6,60,145,.8), 0 0 2px rgba(6,60,145,.8); }
.pg-project__list li:nth-child(odd) { transform: translateY(14px); }
@keyframes pgLoop { to { transform: translateX(-50%); } }

/* =========================================================
   6. News
   ========================================================= */
.pg-news { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.pg-news__head { position: relative; z-index: 2; padding-left: 4%; }
.pg-news__title { display: inline-block; margin: 0; padding: 4px 34px 6px 24px; color: #fff; font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: clamp(1.8rem, 4.6vw, 3.6rem); line-height: 1.1; background: linear-gradient(100deg, var(--c-blue), var(--c-sky));
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.pg-news__body { margin-top: -18px; padding: 34px 10px 30px; border-radius: 22px; background: rgba(255,255,255,.9);
  border: 5px solid var(--c-sky-light); box-shadow: 0 0 0 3px var(--c-sky), 0 16px 30px rgba(6,60,145,.15); }
.pg-news__list ul { max-height: 520px; overflow-y: auto; margin: 0; padding: 14px 10px; list-style: none; scrollbar-color: var(--c-sky) var(--c-bg-tint); }
.pg-card { position: relative; margin-bottom: 18px; transition: transform .3s var(--pop); }
.pg-card:last-child { margin-bottom: 0; }
.pg-card:hover { transform: scale(.97); transition: transform .5s var(--ease); }
.pg-card a { display: block; padding: 18px 20px 14px; border-radius: 12px; background: #fff; box-shadow: 0 3px 8px rgba(6,60,145,.16); }
.pg-card dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-card dt { order: 2; font-weight: 800; line-height: 1.5; }
.pg-card__meta { order: 1; margin: 0; display: flex; align-items: center; gap: 14px; }
.pg-card__cat { display: inline-flex; justify-content: center; min-width: 110px; padding: 3px 14px; border-radius: 999px;
  background: var(--c-sky); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .15em; }
.pg-card__cat--game { background: var(--c-blue); }
.pg-card time { font-family: var(--font-en); font-weight: 800; color: var(--c-blue); }
.pg-card__more { margin: 8px 0 0; text-align: right; color: var(--c-blue); font-weight: 800; font-size: .85rem; }
.pg-card__more::after { content: " ›"; }
.pg-card--new::before { content: "NEW"; position: absolute; z-index: 2; left: -10px; top: -10px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-yellow); color: var(--c-navy); font-family: var(--font-en); font-weight: 900; font-size: .74rem;
  transform: rotate(-14deg); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.pg-more { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: min(100%, 520px); height: 64px;
  margin: 28px auto 0; border-radius: 999px; border: 4px solid var(--c-sky-light); color: #fff; background: var(--c-blue);
  font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.8rem); transition: transform .3s var(--pop); }
.pg-more:hover { transform: scale(.95); transition: transform .5s var(--ease); }
.pg-more p { margin: 0; font-style: italic; font-family: var(--font-en); letter-spacing: .08em; }
.pg-more p::after { content: "→"; margin-left: .8em; font-style: normal; }
.pg-more::before, .pg-more::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px); }
.pg-more::before { left: 0; }
.pg-more::after { right: 0; transform: scaleX(-1); }

/* =========================================================
   7. SNS・バナー・ゲーム情報
   ========================================================= */
.pg-info { margin-top: clamp(80px, 10vw, 200px); }
.pg-info__top { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 16px 40px; }
.pg-sns { display: flex; align-items: center; gap: 18px; margin: 0; color: #5a6065; }
.pg-sns dt { font-family: var(--font-en); font-weight: 800; letter-spacing: .1em; }
.pg-sns dd { display: flex; align-items: center; gap: 16px; margin: 0; }
.pg-sns a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--c-navy); transition: transform .3s var(--pop); }
.pg-sns a:hover { transform: scale(.85); transition: transform .5s var(--ease); }
.pg-sns svg { width: 100%; height: 100%; fill: currentColor; }
.pg-sns__note { font-family: var(--font-en); font-weight: 900; font-size: 1rem; }
.pg-info__bnr { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: min(100%, 440px); padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(110deg, #fff 0 46%, var(--c-blue) 46% 100%); box-shadow: 0 0 0 3px var(--c-sky), 0 10px 20px rgba(6,60,145,.18);
  transition: transform .3s var(--pop); }
.pg-info__bnr img { width: 46%; height: auto; }
.pg-info__bnr span { color: #fff; font-weight: 800; font-size: .8rem; line-height: 1.5; }
.pg-info__bnr span b { font-size: 1.05rem; }
.pg-info__bnr::after { content: ""; position: absolute; top: 0; left: -40%; width: 30%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: pgShine 3.6s ease-in-out infinite; }
@keyframes pgShine { 0%, 65% { left: -40%; } 100% { left: 130%; } }
.pg-info__bnr:hover { transform: scale(.95); transition: transform .5s var(--ease); }
.pg-info__spec { display: flex; flex-direction: column; gap: 18px; padding: 30px 20px 40px; background: #fff; }
.pg-info__spec-title { align-self: flex-start; margin: 0; padding: 6px 22px; background: var(--c-navy); color: #fff; font-size: 1.1rem; font-weight: 900;
  transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--c-sky); }
.pg-spec { margin: 0; }
.pg-spec > div { display: grid; grid-template-columns: 7em 1fr; margin-bottom: .7em; }
.pg-spec dt { font-weight: 900; color: var(--c-navy); }
.pg-spec dd { margin: 0; letter-spacing: .06em; }
.pg-info__notes { margin: 20px 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--c-text-sub); }
.pg-info__notes li { text-indent: -1em; padding-left: 1em; line-height: 1.6; margin-bottom: .3em; }
.pg ~ .footer, .pg .footer { margin-top: 0; }

/* =========================================================
   PC（768px〜）
   ========================================================= */
@media (min-width: 768px) {
  .pg-kv__img { aspect-ratio: 16 / 9; }
  .slot--kvchara:not(:has(img)) { inset: 14% 22% 22% 30%; }
  .pg-kv__scroll { bottom: 14vw; left: auto; right: 3vw; transform: none; }
  .pg-kv__body { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-top: -6vw; padding: 0 3.4vw; }
  .pg-kv__read { font-size: clamp(1.7rem, 4.6vw, 4.6rem); }
  .pg-kv__cta { padding-bottom: 8px; }
  .pg-float { right: 1.8vw; bottom: 3vw; }
  .pg-head { padding-left: 8.3vw; flex-direction: row; align-items: flex-end; gap: 28px; }
  .pg-read { margin: 0 0 -.1em; font-size: clamp(1.6rem, 3.6vw, 3.4rem); }

  .cpn__inner { padding: 0 32px; }
  .cpn__head { flex-direction: row; align-items: flex-end; gap: 28px; padding-left: 4%; }
  .cpn__read { margin: 0 0 -.1em; font-size: clamp(1.6rem, 3.6vw, 3.2rem); }
  .cpn__body { grid-template-columns: 50% 1fr; grid-template-areas: "chara main" "chara items"; gap: 30px 40px; margin-top: 10px; }
  .cpn__bg { top: 18%; height: 60%; }
  .cpn__chara { margin-top: -4%; }
  .cpn__bubble { right: 6%; top: 4%; }
  .cpn__item--main { width: 76%; margin-left: auto; }
  .cpn__item--main dd { aspect-ratio: 4 / 3; }
  .cpn__items { gap: 22px; }
  .cpn__item dd { border-radius: 24px; }
  .cpn__notes { font-size: .8rem; }


  .pg-about__body { margin-top: -2vw; }
  .pg-about__detail { position: absolute; right: 3vw; bottom: -4vw; width: min(54%, 1010px); margin: 0; transform: skew(-12.5deg); }
  .pg-tab p, .pg-tab-text { transform: skew(12.5deg); }
  .pg-tab-text { padding: 30px 40px 30px 60px; }
  .pg-about { padding-bottom: 4vw; }

  .pg-news__body { padding: 40px 30px 36px; }
  .pg-card a { padding: 22px 28px 16px; }

  .pg-info__top { flex-direction: row; justify-content: center; gap: 0; }
  .pg-sns { padding-right: 50px; margin-right: 50px; border-right: 1px solid #5a6065; height: 120px; }
  .pg-info__spec { flex-direction: row; gap: 40px; padding: 45px 8.6vw 60px; }
  .pg-info__spec-title { flex-shrink: 0; }
}

/* =========================================================
   登場アニメーション（参考：見出し 0.6s バウンド／本文 0.3s遅れ）
   ========================================================= */
/* 汎用：下からバウンドして出る／ふわっと出る */
.inview-ready .js-inview .pg-up { opacity: 0; transform: translateY(var(--pg-up)); }
.inview-ready .js-inview.is-show .pg-up { opacity: 1; transform: none; transition: transform .6s var(--bounce), opacity .6s var(--ease); }
.inview-ready .js-inview.is-show .pg-up--d1 { transition-delay: .3s; }
.inview-ready .js-inview .pg-fade { opacity: 0; }
.inview-ready .js-inview.is-show .pg-fade { opacity: 1; transition: opacity .6s var(--ease); }

/* とは：説明パネルは遅れてふわっと */
.inview-ready .pg-about .pg-about__detail { opacity: 0; }
.inview-ready .pg-about.is-show .pg-about__detail { opacity: 1; transition: opacity .6s var(--ease) .6s; }

/* 見どころ：表示されたらカードが流れ始める */
.pg-project.is-show .pg-project__list ul, html:not(.inview-ready) .pg-project__list ul { animation: pgLoop 40s linear 1s infinite; }
.pg-project__list:hover ul { animation-play-state: paused; }

/* News：見出しが左からスッと現れる */
.inview-ready .pg-news .pg-news__title { clip-path: polygon(8% 0, 8% 0, 0 100%, 0 100%); }
.inview-ready .pg-news.is-show .pg-news__title { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); transition: clip-path .5s var(--ease) .5s; }

/* キャンペーン：帯 1.5s／キャラ 0.4s遅れ／アイテム 0.8〜1.2s遅れ */
.inview-ready .cpn__label { opacity: 0; transform: translateY(60px) rotate(-6deg) skewX(-8deg); }
.inview-ready .cpn__read > span { opacity: 0; transform: translateY(60px); }
.inview-ready .js-inview .cpn__read em, .inview-ready .js-inview .pg-read em { background-size: 0% 100%; }
.inview-ready .cpn__bg { clip-path: inset(-30% 100% -30% -30%); }
.inview-ready .cpn__chara { opacity: 0; transform: translateX(-35%); }
.inview-ready .cpn__glow { opacity: 0; }
.inview-ready .cpn__bubble { opacity: 0; transform: scale(.3); }
.inview-ready .cpn__item--main { opacity: 0; transform: scale(.5); }
.inview-ready .cpn__items .cpn__item { opacity: 0; transform: scale(.3); }
.inview-ready .cpn__foot { opacity: 0; }

.inview-ready .cpn.is-show .cpn__label { opacity: 1; transform: rotate(-6deg) skewX(-8deg); transition: transform .6s var(--bounce), opacity .6s var(--ease); }
.inview-ready .cpn.is-show .cpn__read > span { opacity: 1; transform: none; transition: transform .6s var(--bounce) .12s, opacity .6s var(--ease) .12s; }
.inview-ready .cpn.is-show .cpn__read-l2 { transition-delay: .24s, .24s; }
.inview-ready .js-inview.is-show .cpn__read em, .inview-ready .js-inview.is-show .pg-read em { background-size: 100% 100%; transition: background-size .5s ease-out .8s; }
.inview-ready .cpn.is-show .cpn__bg { clip-path: inset(-30%); transition: clip-path 1.5s var(--ease); }
.inview-ready .cpn.is-show .cpn__chara { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.075,.82,.165,1) .4s, opacity .6s var(--ease) .4s; }
.inview-ready .cpn.is-show .cpn__glow { opacity: 1; transition: opacity 1.5s cubic-bezier(.165,.84,.44,1) .4s; }
.inview-ready .cpn.is-show .cpn__bubble { opacity: 1; transform: none; transition: transform .45s var(--pop) 1.5s, opacity .3s 1.5s; }
.inview-ready .cpn.is-show .cpn__item--main { opacity: 1; transform: none; transition: transform .5s var(--pop) .8s, opacity .5s var(--ease) .8s; }
.inview-ready .cpn.is-show .cpn__items .cpn__item { opacity: 1; transform: none; transition: transform .4s var(--pop) var(--d, 1s), opacity .4s var(--ease) var(--d, 1s); }
.cpn__items .cpn__item:nth-child(2) { --d: 1.1s; }
.cpn__items .cpn__item:nth-child(3) { --d: 1.2s; }
.inview-ready .cpn.is-show .cpn__foot { opacity: 1; transition: opacity .6s var(--ease) 1.4s; }

/* 動きを減らす設定の人には、最初から全部表示 */
@media (prefers-reduced-motion: reduce) {
  .pg *, .pg *::before, .pg *::after { animation: none !important; transition: none !important; }
  .inview-ready .js-inview .pg-up, .inview-ready .js-inview .pg-fade, .inview-ready .pg-about .pg-about__detail,
  .inview-ready .cpn__read > span, .inview-ready .cpn__chara, .inview-ready .cpn__glow, .inview-ready .cpn__bubble,
  .inview-ready .cpn__item--main, .inview-ready .cpn__items .cpn__item, .inview-ready .cpn__foot { opacity: 1; transform: none; }
  .inview-ready .cpn__label { opacity: 1; transform: rotate(-6deg) skewX(-8deg); }
  .inview-ready .js-inview .cpn__read em, .inview-ready .js-inview .pg-read em { background-size: 100% 100%; }
  .inview-ready .cpn__bg, .inview-ready .pg-news .pg-news__title { clip-path: none; }
  .pg-project__list { overflow-x: auto; }
}

/* =========================================================
   オープニング（初回のみ：ロゴ → 読み込みバー → 白い光で画面が開く）
   ========================================================= */
.pg-loader { display: none; }
.pg-loading body { overflow: hidden; }
.pg-loading .pg-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #5fd0ff 0%, var(--c-blue) 55%, var(--c-navy) 100%); }
.pg-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; transition: opacity .3s, transform .3s; }
.pg-loader__mark { width: 96px; height: 96px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); animation: pgBob 1.2s ease-in-out infinite; }
@keyframes pgBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.pg-loader__txt { margin: 0; color: #fff; font-family: var(--font-en); font-weight: 800; letter-spacing: .3em; font-size: .8rem; }
.pg-loader__txt span { animation: pgDot 1.2s infinite; }
.pg-loader__txt span:nth-child(2) { animation-delay: .2s; }
.pg-loader__txt span:nth-child(3) { animation-delay: .4s; }
@keyframes pgDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.pg-loader__bar { width: 200px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.pg-loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff, #bfe9ff); transition: width .3s ease-out; }
.pg-loader__wipe { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; transform: scale(0); }
.pg-loader.is-done .pg-loader__inner { opacity: 0; transform: scale(.9); }
.pg-loader.is-done .pg-loader__wipe { transform: scale(140); transition: transform .7s cubic-bezier(.7,0,.3,1); }
.pg-loader.is-out { opacity: 0; transition: opacity .45s ease .05s; }

/* キービジュアルの登場（オープニング後に .is-play が付く） */
.inview-ready .pg-kv:not(.is-play) .pg-kv__logo { opacity: 0; transform: scale(.4) rotate(-8deg); }
.inview-ready .pg-kv:not(.is-play) .slot--kvchara { opacity: 0; transform: translateY(8%) scale(.96); }
.inview-ready .pg-kv:not(.is-play) .pg-kv__ribbon { transform: translateX(110%); }
.pg-kv.is-play .pg-kv__logo { transition: transform .8s var(--bounce) .55s, opacity .4s ease .55s; }
.pg-kv.is-play .slot--kvchara { transition: transform 1s cubic-bezier(.075,.82,.165,1) .15s, opacity .6s ease .15s; }
.pg-kv.is-play .pg-kv__ribbon { transition: transform .6s var(--ease) .9s; }
.pg-kv.is-play .pg-kv__flash { animation: pgFlash 1.1s ease-out .1s; }
@keyframes pgFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================================
   4. キャラクター紹介
   ========================================================= */
.pg-chara__stage { position: relative; display: grid; grid-template-areas: "item" "faces"; margin-top: 10px; padding: 0 16px; }
.pg-chara__stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 8%; width: 100vw; height: 70%;
  transform: translateX(-50%) skewY(-6deg);
  background: linear-gradient(100deg, rgba(10,91,214,.92), rgba(53,184,245,.88)),
              url("../img/prereg/kv-bg.webp") center / cover; }
.pg-chara__item { grid-area: item; position: relative; display: grid; grid-template-rows: auto auto; align-items: end;
  visibility: hidden; opacity: 0; pointer-events: none; }
.pg-chara__item.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.pg-chara__item::before { content: attr(data-en); position: absolute; z-index: 0; left: 0; right: 0; top: 4%; text-align: center; white-space: nowrap;
  font-family: var(--font-en); font-style: italic; font-weight: 900; font-size: clamp(2.4rem, 11vw, 9rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.55); }
.pg-chara__art { position: relative; z-index: 1; width: min(78%, 520px); margin: 0 auto; }
.slot--stand { aspect-ratio: 1000 / 1600; }
.slot--stand img { object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 24px rgba(6,60,145,.4)); }
.slot--stand:not(:has(img)) { background: rgba(255,255,255,.55); outline-color: #fff; border-radius: 18px; }
.pg-chara__info { position: relative; z-index: 2; margin-top: -14%; padding: 20px 20px 22px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 8px solid var(--c-blue); box-shadow: 0 14px 30px rgba(6,60,145,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.pg-chara__no { position: absolute; right: 14px; top: 4px; margin: 0; font-family: var(--font-en); font-style: italic; font-weight: 900; font-size: 3.2rem; line-height: 1;
  color: var(--c-sky-light); }
.pg-chara__name { position: relative; margin: 0; font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 900; color: var(--c-navy); line-height: 1.3; }
.pg-chara__name small { display: block; font-family: var(--font-en); font-size: .45em; letter-spacing: .14em; color: var(--c-sky); }
.pg-chara__cv { display: inline-block; margin: 8px 0 0; padding: 2px 12px; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: .78rem; font-weight: 800; }
.pg-chara__quote { margin: 12px 0 0; font-weight: 900; color: var(--c-blue); font-size: clamp(1rem, 2vw, 1.3rem); }
.pg-chara__text { margin: 8px 0 0; line-height: 1.85; font-size: .92rem; }
/* 切り替えアニメ */
.pg-chara__item.is-active .pg-chara__art { animation: pgCharaIn .7s cubic-bezier(.075,.82,.165,1) both; }
.pg-chara__item.is-active .pg-chara__info { animation: pgInfoIn .6s var(--ease) .15s both; }
.pg-chara__item.is-active::before { animation: pgEnIn .9s var(--ease) both; }
.pg-chara.is-back .pg-chara__item.is-active .pg-chara__art { animation-name: pgCharaInBack; }
@keyframes pgCharaIn { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
@keyframes pgCharaInBack { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: none; } }
@keyframes pgInfoIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pgEnIn { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: -.02em; } }
.pg-chara__arrow { position: absolute; z-index: 3; top: 34%; width: 48px; height: 48px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--c-sky), 0 6px 14px rgba(6,60,145,.25); transition: transform .3s var(--pop); }
.pg-chara__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: solid var(--c-blue); border-width: 0 4px 4px 0;
  transform: translate(-65%, -50%) rotate(-45deg); }
.pg-chara__arrow--prev { left: 8px; }
.pg-chara__arrow--prev::after { transform: translate(-35%, -50%) rotate(135deg); }
.pg-chara__arrow--next { right: 8px; }
.pg-chara__arrow:hover { transform: scale(.9); }
.pg-chara__faces { grid-area: faces; display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.pg-chara__faces button { width: clamp(58px, 7vw, 92px); aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(6,60,145,.2); transform: skewX(0); transition: transform .3s var(--pop), box-shadow .3s; }
.pg-chara__faces button.is-active { box-shadow: 0 0 0 4px var(--c-blue), 0 0 0 8px var(--c-sky-light), 0 6px 12px rgba(6,60,145,.2); transform: scale(1.08); }
.pg-chara__faces button:hover { transform: scale(1.08); }
.slot--face { width: 100%; height: 100%; }
.slot--face:not(:has(img))::after { font-size: .5rem; }

/* =========================================================
   6. ムービー
   ========================================================= */
.pg-movie__frame { max-width: 1040px; margin: 20px auto 0; padding: 0 16px; }
.pg-movie__btn { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: 18px; border: 6px solid #fff;
  box-shadow: 0 0 0 3px var(--c-sky), 0 20px 40px rgba(6,60,145,.28); cursor: pointer; }
.pg-movie__btn img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(1.05); }
.pg-movie__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,60,145,0) 40%, rgba(6,60,145,.45)); }
.pg-movie__btn:hover img { transform: scale(1.05); }
.pg-movie__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(70px, 10vw, 120px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: pgRing 2s infinite; }
.pg-movie__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 26px solid var(--c-blue); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
@keyframes pgRing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 30px rgba(255,255,255,0); } }
.pg-movie__soon { position: absolute; z-index: 2; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 6px 22px; background: var(--c-navy); color: #fff;
  font-family: var(--font-en); font-weight: 900; font-style: italic; letter-spacing: .2em; font-size: clamp(.8rem, 1.6vw, 1.1rem); white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.pg-movie.is-coming .pg-movie__btn { cursor: default; }
.pg-movie:not(.is-coming) .pg-movie__soon { display: none; }
.pg-modal[hidden] { display: none; }
.pg-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; }
.pg-modal__bg { position: absolute; inset: 0; background: rgba(6,20,50,.85); backdrop-filter: blur(4px); animation: pgFade .3s; }
.pg-modal__body { position: relative; width: min(100%, 1100px); animation: pgZoom .45s var(--pop); }
.pg-modal__video { aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.pg-modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.pg-modal__close { position: absolute; right: 0; top: -48px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--c-navy); font-size: 1.6rem; font-weight: 900; line-height: 1; }
@keyframes pgFade { from { opacity: 0; } }
@keyframes pgZoom { from { opacity: 0; transform: scale(.85); } }

@media (min-width: 768px) {
  .pg-chara__stage { padding: 0 6vw; }
  .pg-chara__item { grid-template-columns: 46% 1fr; grid-template-rows: none; align-items: center; gap: 2vw; }
  .pg-chara__art { width: 100%; }
  .pg-chara__info { margin-top: 0; padding: 34px 40px 36px; }
  .pg-chara__item::before { top: 8%; text-align: right; }
  .pg-chara__arrow { top: 46%; width: 60px; height: 60px; }
  .pg-chara__arrow--prev { left: 2vw; }
  .pg-chara__arrow--next { right: 2vw; }
  .pg-chara__faces { margin-top: 26px; position: relative; z-index: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-kv__symbols { display: none; }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo, .inview-ready .pg-kv:not(.is-play) .slot--kvchara { opacity: 1; transform: none; }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__ribbon { transform: none; }
}

/* =========================================================
   キービジュアル下：現在の事前登録者数 ＋ 大きい「事前登録する」ボタン
   ========================================================= */
.pg-kv__lead { display: flex; flex-direction: column; gap: 14px; }
.pg-entry { display: grid; grid-template-columns: 1fr 1.35fr; align-items: stretch; gap: 12px; width: 100%; padding: 12px;
  border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 0 0 4px var(--c-sky), 0 18px 36px rgba(6,60,145,.25); }
.pg-entry__count { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 4px;
  border-radius: 14px; background: linear-gradient(160deg, #f2faff, #dff3ff); }
.pg-entry__label { margin: 0; font-weight: 900; font-size: clamp(.68rem, 2.6vw, 1rem); color: var(--c-navy); white-space: nowrap; }
.pg-entry__num { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; line-height: 1.05; color: var(--c-blue); font-weight: 900; }
.pg-entry__num b { font-family: var(--font-en); font-size: clamp(2.2rem, 10vw, 4.4rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--c-sky), var(--c-blue) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 4px 6px rgba(6,60,145,.2)); }
.pg-entry__num span { font-size: clamp(1rem, 4vw, 1.6rem); color: var(--c-navy); }
.pg-entry__next { margin: 2px 0 0; font-size: clamp(.62rem, 2.2vw, .85rem); font-weight: 800; color: var(--c-text-sub); }
.pg-entry__next b { color: var(--c-blue); }
.pg-entry__btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 12px 14px; border-radius: 16px; color: #fff; text-align: center; container-type: inline-size;
  background: linear-gradient(100deg, var(--c-blue) 0%, #1e8ef0 55%, var(--c-sky) 100%);
  box-shadow: 0 7px 0 var(--c-blue-dark), 0 14px 26px rgba(10,91,214,.4); transition: transform .15s, box-shadow .15s;
  animation: pgEntryGlow 2.4s ease-in-out infinite; }
.pg-entry__btn:hover { transform: translateY(3px); box-shadow: 0 4px 0 var(--c-blue-dark), 0 10px 20px rgba(10,91,214,.4); }
.pg-entry__btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: pgShine 2.8s ease-in-out infinite; }
.pg-entry__main { position: relative; display: flex; align-items: center; gap: .35em; font-weight: 900; line-height: 1.1; letter-spacing: .04em;
  font-size: clamp(1.2rem, 12cqi, 2.8rem); text-shadow: 0 3px 0 rgba(6,60,145,.45); white-space: nowrap; }
.pg-entry__main::after { content: ""; width: .55em; height: .55em; border: solid #fff; border-width: .16em .16em 0 0; transform: rotate(45deg); }
.pg-entry__sub { position: relative; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: clamp(.62rem, 2.2vw, .85rem); font-weight: 800; white-space: nowrap; }
@keyframes pgEntryGlow { 0%, 100% { box-shadow: 0 7px 0 var(--c-blue-dark), 0 14px 26px rgba(10,91,214,.4); }
  50% { box-shadow: 0 7px 0 var(--c-blue-dark), 0 14px 26px rgba(10,91,214,.4), 0 0 0 8px rgba(53,184,245,.25); } }
.pg-entry__btn--wide { width: min(100%, 640px); padding: 20px 16px 16px; border-radius: 999px; }
.pg-entry__btn--wide .pg-entry__main { font-size: clamp(1.3rem, 8cqi, 2.4rem); }
.pr-count { display: block; }
@media (min-width: 768px) {
  .pg-kv__body { align-items: center; gap: 3vw; }
  .pg-entry { width: min(52%, 760px); flex-shrink: 0; padding: 14px; gap: 14px; }
  .pg-kv__read { font-size: clamp(1.5rem, 3.4vw, 4rem); }
  .pg-kv__lead { min-width: 0; }
  .pg-entry__btn { padding: 22px 16px 18px; }
}
@media (max-width: 767px) {
  .pg-kv__cta { flex-wrap: nowrap; width: 100%; padding-left: 0; }
  .pg-kv__cta .pg-store { flex: 1; min-width: 0; padding: 8px 10px; font-size: .74rem; white-space: nowrap; gap: 6px; }
}

/* ---------- キャラクター紹介：キャラシート画像（2:3）＋キャラごとのテーマ色 --cc ---------- */
.pg-chara__item { --cc: var(--c-blue); }
.slot--stand { aspect-ratio: 1024 / 1536; border-radius: 18px; overflow: hidden; border: 6px solid #fff;
  box-shadow: 0 0 0 3px var(--cc), 0 20px 40px rgba(6,60,145,.35); transform: rotate(-2deg); background: #fff; }
.slot--stand img { object-fit: cover; object-position: center; filter: none; }
.pg-chara__art { width: min(72%, 440px); }
.pg-chara__info { border-left-color: var(--cc); }
.pg-chara__type { position: relative; display: inline-block; margin: 0 0 6px; padding: 3px 14px; background: var(--cc); color: #fff; font-size: .78rem; font-weight: 900;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pg-chara__name small { color: var(--cc); }
.pg-chara__no { color: color-mix(in srgb, var(--cc) 22%, #fff); }
.pg-chara__quote { color: var(--cc); }
.pg-chara__faces button.is-active { box-shadow: 0 0 0 4px var(--cc, var(--c-blue)), 0 0 0 8px #fff, 0 6px 12px rgba(6,60,145,.2); }
.pg-chara__item::before { -webkit-text-stroke-color: rgba(255,255,255,.6); font-size: clamp(3rem, 16vw, 12rem); }
@media (min-width: 768px) {
  .pg-chara__item { grid-template-columns: 42% 1fr; }
  .pg-chara__art { width: 100%; max-width: 460px; justify-self: center; }
}

/* ---------- 2026-10-21 キービジュアル：PC＝公式キーアート（ロゴ入り）／スマホ＝背景＋みみ・にに＋ロゴ ---------- */
.slot--kvchara img { object-position: center bottom; }
@media (min-width: 768px) {
  .pg-kv__img { max-height: none; aspect-ratio: 16 / 9; background: #9ad8ff; }
  .pg-kv__layer { inset: -2%; }
  .pg-kv__layer--chara, .pg-kv__logo { display: none; }
  .pg-kv__bgimg img { animation-duration: 30s; }
  .pg-kv__scroll { bottom: 13vw; }
}
@keyframes pgKen { from { transform: scale(1); } to { transform: scale(1.05); } }

/* =========================================================
   2026-10-21 外部レビュー反映（第1回）
   ========================================================= */
body { word-break: auto-phrase; }
/* 見出しはゲームらしい太いゴシック */
.pg-kv__read, .cpn__read, .pg-read, .pg-label, .cpn__label, .pg-entry__main, .pg-chara__name, .pg-info__spec-title, .pg-float__txt {
  font-family: "Dela Gothic One", var(--font-ja); font-weight: 400; letter-spacing: .02em; }
.pg-read__sub { font-family: var(--font-ja); font-weight: 900; }
.pg-chara__name small { font-family: var(--font-en); }

/* ヘッダー：ゲームロゴ */
.logo--game .logo__img { height: 44px; width: auto; }

/* キービジュアル下：ジャンル・iOS表記 */
.pg-kv__genre { display: inline-block; margin: 0 0 2px; padding: 4px 14px; background: var(--c-navy); color: #fff; font-weight: 900; font-size: clamp(.78rem, 2.6vw, 1.05rem);
  transform: skewX(-8deg); box-shadow: 4px 4px 0 var(--c-sky); }
.pg-kv__ios { margin: 4px 0 0 6px; font-size: .78rem; font-weight: 800; color: var(--c-text-sub); }
.pg-kv__read { margin: 0; }
.pg-entry__label small { display: block; font-size: .72em; font-weight: 800; color: var(--c-text-sub); }

/* リボン：ロゴに重ねない（キービジュアルの下端へ）／PCのSCROLLは消す */
.pg-kv__ribbon { top: auto; bottom: 0; }
@media (min-width: 768px) {
  .pg-kv__ribbon { bottom: calc(6vw + 10px); }
  .pg-kv__scroll { display: none; }
}

/* スマホのキービジュアル：ロゴを主役に・見出しが1画面目に少し見えるように */
@media (max-width: 767px) {
  .pg-kv__img { aspect-ratio: auto; height: min(calc(100svh - var(--header-h) - 120px), 150vw); }
  .pg-kv__logo { left: 50%; top: auto; bottom: 7%; width: min(74vw, 340px); transform: translateX(-50%); }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: translateX(-50%) scale(.4); }
  .pg-kv__scroll { display: none; }
  .pg-kv__body { margin-top: -6vw; }
}

/* キャンペーン：報酬名をプレートに（枠で欠けない） */
.cpn__item dt { margin-top: -1.05em; padding: .3em 1.1em .35em; border-radius: 999px; background: var(--c-navy); color: #fff; text-shadow: none;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(6,60,145,.25); font-size: clamp(.78rem, 2.4vw, 1.05rem); white-space: nowrap; }
.cpn__item dt small { color: var(--c-sky-light); }
.cpn__item--main dt { white-space: normal; text-align: center; border-radius: 18px; font-size: clamp(.82rem, 2.4vw, 1.2rem); }
.cpn__item--main dt b { color: var(--c-yellow); }
.cpn__goal, .cpn__secret .cpn__goal { background: var(--c-yellow); color: var(--c-navy); font-size: clamp(.68rem, 2vw, .85rem); }
.cpn__notes { font-size: .78rem; color: #4a5a70; max-width: 760px; }
.cpn__name { position: absolute; z-index: 3; left: 4%; bottom: 6%; margin: 0; padding: 3px 16px; background: #8b6fd6; color: #fff; font-family: "Dela Gothic One", var(--font-ja);
  font-size: clamp(.9rem, 2.6vw, 1.3rem); transform: skewX(-8deg); box-shadow: 3px 3px 0 #fff; }
/* 限定キャラ：光とロックで「何が出るか」の期待感 */
.cpn__secret { overflow: hidden; }
.cpn__secret::before { content: ""; position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 10deg, transparent 10deg 30deg); animation: pgSpin 16s linear infinite; }
.cpn__secret i { position: relative; }
.cpn__lock { position: absolute; right: 8%; bottom: 7%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: rgba(6,40,100,.55) center / 56% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E"); }
/* スマホ：キャラを主役に縦並び */
@media (max-width: 767px) {
  .cpn__body { grid-template-columns: 1fr; grid-template-areas: "chara" "main" "items"; }
  .cpn__chara { width: 74%; margin: 0 auto -14%; }
  .cpn__bubble { right: -10%; top: 10%; }
  .cpn__item--main { width: 90%; margin: 0 auto; }
  .cpn__bg { top: 4%; height: 46%; }
}

/* とは：タブ */
.pg-tab button span { display: block; transform: skew(8deg); line-height: 1.3; }
.pg-tab button { font-size: clamp(.8rem, 1.4vw, 1.1rem); white-space: nowrap; }
.pg-tab-text > [hidden] { display: none; }
@media (max-width: 767px) {
  .pg-about__detail { transform: skew(-4deg); width: calc(100% - 56px); }
  .pg-tab button span, .pg-tab-text { transform: skew(4deg); }
}
@media (min-width: 768px) {
  .pg-tab button span { transform: skew(12.5deg); }
  .pg-about__visual { max-width: 1200px; margin-left: 4vw; }
  .pg-about__body::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 10%; height: 72%; transform: skewY(-5deg);
    background: linear-gradient(100deg, rgba(10,91,214,.10), rgba(53,184,245,.22)); }
  .pg-about__detail { right: 4vw; bottom: -2vw; width: min(48%, 760px); }
}

/* キャラクター：スマホは矢印をアイコン列の横に */
@media (max-width: 767px) {
  .pg-chara__arrow { top: auto; bottom: 4px; width: 44px; height: 44px; }
  .pg-chara__faces { padding: 0 52px; }
}
.pg-chara__text { text-wrap: pretty; }

/* 見どころ：見出しをそろえ、カードを大きく、文字を読みやすく */
.pg-project .pg-head { margin-bottom: 20px; }
.pg-project__list li { width: clamp(200px, 23vw, 400px); margin: 0 calc(clamp(200px, 23vw, 400px) * -.06); }
.pg-project__list .slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(6,40,100,.85)); }
.pg-project__list li span { z-index: 3; font-size: clamp(.9rem, 1.5vw, 1.4rem); left: 10%; right: 20%; }
.pg-project__list.is-paused ul { animation-play-state: paused; }
.pg-project__pause { position: absolute; z-index: 5; right: 16px; top: -6px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--c-navy);
  font-size: .78rem; font-weight: 800; box-shadow: 0 0 0 2px var(--c-sky); }

/* ムービー：公開前は再生ボタンを出さない */
.pg-movie.is-coming .pg-movie__play { display: none; }
.pg-movie__btn:disabled { cursor: default; opacity: 1; }
.pg-movie.is-coming .pg-movie__btn img { filter: saturate(.9) brightness(.85); }
.pg-movie__soon { top: 50%; bottom: auto; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 34px; font-family: "Dela Gothic One", var(--font-ja); font-style: normal; letter-spacing: .06em; font-size: clamp(1rem, 2.4vw, 1.6rem); }
.pg-movie__soon small { font-family: var(--font-ja); font-size: .55em; font-weight: 800; letter-spacing: 0; }

/* ニュース：中でスクロールさせない */
.pg-news__list ul { max-height: none; overflow: visible; }
.pg-more span { font-weight: 900; letter-spacing: .06em; }
.pg-more span::after { content: "→"; margin-left: .8em; }

/* SNS・バナー */
.pg-sns dt { white-space: nowrap; }
.pg-info__bnr { background: linear-gradient(110deg, #fff 0 55%, var(--c-blue) 55% 100%); }
.pg-info__bnr img { width: 44%; }
.pg-info__spec { background: linear-gradient(rgba(255,255,255,0), #fff 120px); }
@media (max-width: 767px) { .pg-sns { flex-direction: column; gap: 10px; } }

/* 追従ボタン：スマホは小さく・文字は10px以上・下に余白 */
@media (max-width: 767px) {
  .pg-float { width: 84px; right: 10px; bottom: 12px; }
  .pg-float__txt { font-size: 1.05rem; }
  .pg-float__btn small { font-size: .62rem; }
  .pg-main { padding-bottom: 96px; }
}
/* 小さすぎる文字 */
.pg-store small { font-size: .68rem; }
.pg-kv__ribbon { font-size: clamp(.72rem, 1.2vw, 1rem); }

/* ---------- 2026-10-21 確認で見つけた点 ---------- */
/* キービジュアルの © 表記（画像に焼き込まず、見出しと重ならない位置に） */
.pg-kv__copy { position: absolute; z-index: 2; left: 12px; top: 10px; color: #fff; font-family: var(--font-en); font-weight: 800; font-size: .68rem; letter-spacing: .04em;
  text-shadow: 0 0 3px rgba(20,20,60,.9), 0 1px 2px rgba(20,20,60,.9); }
/* スマホのリボンは右上（ロゴが下にあるため） */
@media (max-width: 767px) { .pg-kv__ribbon { top: 0; bottom: auto; } .pg-kv__copy { top: auto; bottom: 8px; left: 10px; } }
/* 名札は読みやすい書体で */
.cpn__name { font-family: var(--font-ja); font-weight: 900; letter-spacing: .12em; }
/* 限定キャラの光：枠の外の「1万人」バッジを隠さない */
@property --ray { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cpn__secret { overflow: visible; }
.cpn__secret::before { inset: 0; border-radius: 14px; animation: pgRay 16s linear infinite;
  background: repeating-conic-gradient(from var(--ray) at 50% 45%, rgba(255,255,255,.22) 0 10deg, transparent 10deg 30deg); }
@keyframes pgRay { to { --ray: 360deg; } }

/* =========================================================
   2026-10-21 外部レビュー反映（第2回）
   ========================================================= */
/* 太い書体は大きな見出しだけ。ボタン・タグ・小見出しは丸ゴシックの極太に */
.pg-label, .cpn__label, .pg-entry__main, .pg-info__spec-title, .pg-float__txt, .pg-movie__soon, .pg-chara__name, .pg-read__sub {
  font-family: var(--font-ja); font-weight: 900; letter-spacing: .04em; }
.pg-kv__read, .cpn__read, .pg-read { letter-spacing: .02em; }
.pg-entry__main { text-shadow: none; }

/* ヘッダーのゲームロゴを大きく */
.logo--game .logo__img { height: 52px; }

/* スマホ：1画面目に見出しと事前登録ボタンまで入れる */
@media (max-width: 767px) {
  .pg-kv__img { height: min(58svh, 128vw); }
  .pg-kv__logo { width: min(64vw, 300px); bottom: 5%; }
  .pg-kv__body { margin-top: -5vw; gap: 10px; }
  .pg-kv__ios { font-size: .72rem; margin-top: 2px; }
  .pg-kv__copy { top: 8px; bottom: auto; left: 16px; }
  .pg-entry { padding: 10px; gap: 10px; }
  .pg-entry__btn { padding: 14px 10px 12px; }
}
.pg-kv__copy { left: 16px; }

/* ニニの名札：キャラに付ける・報酬カードより前に */
.cpn__chara-fig { position: relative; }
.cpn__name { left: 6%; bottom: 10%; z-index: 4; }
@media (max-width: 767px) { .cpn__chara { z-index: 3; } .cpn__name { bottom: 18%; } }

/* キャラクター：スマホは絵の下に情報（重ねない）／PCは文字を大きく */
@media (max-width: 767px) { .pg-chara__info { margin-top: 14px; } }
.pg-chara__text { font-size: clamp(.92rem, 1.2vw, 1.05rem); }
@media (min-width: 768px) { .pg-chara__info { align-self: end; margin-bottom: 4vw; } .pg-chara__item::before { top: 2%; } }

/* 見どころ：一時停止ボタンは帯の下へ */
.pg-project__pause { top: auto; bottom: -34px; right: 16px; }
.pg-project__body { margin-bottom: 40px; }

/* ムービー：ポスターで枠を埋める・案内は下に */
.pg-movie__btn img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; }
.pg-movie__soon { top: auto; bottom: 8%; transform: translateX(-50%); }

/* 公式サイトへのバナー：文字が斜めの白に入らないよう2列に */
.pg-info__bnr { display: grid; grid-template-columns: 48% 1fr; align-items: center; gap: 0; padding: 0; background: #fff; }
.pg-info__bnr img { width: 100%; padding: 16px 10px 16px 18px; }
.pg-info__bnr span { position: relative; z-index: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 14px 12px 14px 30px; }
.pg-info__bnr span::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--c-blue); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); }

/* 注記：少し小さく・行間を詰める */
.cpn__notes { font-size: .72rem; line-height: 1.6; max-width: 40em; }
.cpn__name small { margin-left: .5em; font-family: var(--font-en); font-size: .62em; letter-spacing: .12em; opacity: .9; }
.pg-chara__more { grid-area: more; margin: 18px 0 0; text-align: center; font-weight: 900; color: var(--c-navy); font-size: clamp(.9rem, 1.6vw, 1.1rem); }
.pg-chara__more b { color: var(--c-blue); }
.pg-chara__stage { grid-template-areas: "item" "faces" "more"; }
.pg-info__bnr span b { white-space: nowrap; }
@media (max-width: 767px) { .pg-kv__ios { display: none; } .pg-info__bnr span b { font-size: .95rem; } }

.cpn__notes { margin-top: 26px; font-size: .7rem; max-width: 38em; opacity: .9; }

/* ---------- 2026-10-21 キービジュアル：PC＝ニニの背景＋ロゴ ---------- */
@media (min-width: 768px) {
  .pg-kv__img { aspect-ratio: 1920 / 850; }
  .pg-kv__bgimg img { object-position: 30% center; }
  .pg-kv__logo { display: block; left: auto; right: 4%; top: 46%; width: min(34%, 600px); transform: translateY(-50%);
    filter: drop-shadow(0 10px 22px rgba(6,60,145,.35)); }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: translateY(-50%) scale(.4) rotate(-8deg); }
}

/* ---------- 花びら（main.js が [data-petals] の中に生成） ---------- */
.petals { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.petals span { position: absolute; top: -40px; display: block; border-radius: 100% 0 100% 0;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd6e8 45%, #ff9cc6 100%);
  box-shadow: 0 0 6px rgba(255,170,210,.6); animation: petalFall var(--dur) linear var(--delay) infinite; }
@keyframes petalFall {
  0%   { transform: translate(0, -40px) rotate(0deg) rotateX(0deg); }
  25%  { transform: translate(calc(var(--drift) * .35), 25vh) rotate(calc(var(--spin) * .25)) rotateX(120deg); }
  50%  { transform: translate(calc(var(--drift) * -.15), 50vh) rotate(calc(var(--spin) * .5)) rotateX(240deg); }
  75%  { transform: translate(calc(var(--drift) * .6), 75vh) rotate(calc(var(--spin) * .75)) rotateX(360deg); }
  100% { transform: translate(var(--drift), 105vh) rotate(var(--spin)) rotateX(480deg); }
}
.petals span { background: radial-gradient(circle at 30% 30%, #fff 0%, #ffc2dc 35%, #ff7fb4 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 2px 6px rgba(200,60,120,.35); }

/* ---------- ストアボタン（Google Play／App Store）---------- */
.store-links { display: flex; flex-wrap: wrap; gap: 10px; }
.store-link { display: inline-flex; align-items: center; gap: 8px; min-width: 176px; padding: 9px 18px; border-radius: 12px; background: #111; color: #fff;
  line-height: 1.2; font-weight: 800; font-size: .9rem; box-shadow: 0 6px 14px rgba(0,0,0,.2); transition: transform .3s var(--pop, ease); text-decoration: none; }
.store-link:hover { transform: translateY(-2px) scale(.98); }
.store-link small { display: block; font-size: .66rem; font-weight: 600; opacity: .85; }
.store-link.is-soon { background: #6b7684; cursor: default; }
.store-link.is-soon:hover { transform: none; }
@media (max-width: 767px) { .store-links { flex-wrap: nowrap; } .store-link { flex: 1; min-width: 0; padding: 8px 10px; font-size: .78rem; white-space: nowrap; } }

/* ---------- 事前登録ページのヘッダー：ゲーム（StudyGameX）のブランドで ---------- */
.gamebrand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gamebrand__logo { display: block; flex-shrink: 0; transition: transform .3s cubic-bezier(.175,.885,.32,1.275); }
.gamebrand__logo:hover { transform: scale(1.05) rotate(-2deg); }
.gamebrand__logo img { display: block; height: 54px; width: auto; filter: drop-shadow(0 2px 4px rgba(6,60,145,.25)); }
.gamebrand__corp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--c-border);
  background: #fff; color: var(--c-text-sub); font-size: .7rem; font-weight: 800; white-space: nowrap; transition: border-color .2s, color .2s; }
.gamebrand__corp img { height: 16px; width: auto; }
.gamebrand__corp:hover { border-color: var(--c-sky); color: var(--c-blue); }
body.pg { --header-h: 72px; }
@media (max-width: 767px) {
  .gamebrand { gap: 8px; }
  .gamebrand__logo img { height: 44px; }
  .gamebrand__corp span { display: none; }
  .gamebrand__corp { padding: 4px 8px; }
  .gamebrand__corp img { height: 14px; }
}
@media (max-width: 420px) { .gamebrand__corp { display: none; } }
@media (max-width: 1399px) { .gamebrand__corp { display: none; } }

/* ---------- About（umamusume.jp の About 風：斜めタブ＋太枠の大ビジュアル） ---------- */
.ab2 { position: relative; max-width: 1240px; margin: 0 auto; padding: 46px 16px 0; }
.ab2__tab { position: absolute; z-index: 3; left: 4px; top: 0; margin: 0; display: flex; align-items: baseline; gap: 14px;
  padding: 6px 46px 8px 30px; color: #fff; background: linear-gradient(100deg, #0a5bd6, #35b8f5); clip-path: polygon(14px 0, 100% 0, calc(100% - 24px) 100%, 0 100%); }
.ab2__en { font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
.ab2__ja { font-weight: 900; font-size: clamp(.85rem, 1.4vw, 1.05rem); letter-spacing: .06em; }
.ab2__frame { position: relative; overflow: hidden; border-radius: 18px; border: 5px solid #1e8ef0; background: #0a5bd6;
  box-shadow: 0 18px 40px rgba(6,60,145,.25); aspect-ratio: 16 / 8.2; }
.ab2__visual { position: absolute; inset: 0; }
.ab2__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.ab2__frame:hover .ab2__visual img { transform: scale(1.06); }
.ab2__copy { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(58%, 680px); padding: 30px 60px 30px 34px; color: #fff;
  background: linear-gradient(100deg, rgba(6,40,110,.92) 0%, rgba(10,91,214,.85) 70%, rgba(10,91,214,0) 100%);
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
.ab2__catch { margin: 0 0 10px; font-family: "Dela Gothic One", var(--font-ja); font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.2; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.ab2__catch em { font-style: normal; color: var(--c-yellow); }
.ab2__text { margin: 0 0 16px; font-weight: 700; font-size: clamp(.8rem, 1.2vw, 1rem); line-height: 1.8; }
.ab2__points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab2__points li { padding: 6px 14px; border-radius: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-size: .78rem; font-weight: 700; backdrop-filter: blur(4px); }
.ab2__points b { display: block; font-size: 1rem; color: #ffe066; }
.ab2__more { position: absolute; z-index: 3; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 26px 14px 40px; color: #fff;
  background: linear-gradient(100deg, #063c91, #0a5bd6); clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
  font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: 1.1rem; transition: padding .3s; }
.ab2__more::after { content: "»"; font-size: 1.6rem; line-height: 1; transition: transform .3s; }
.ab2__more:hover::after { transform: translateX(6px); }
@media (max-width: 767px) {
  .ab2__frame { aspect-ratio: auto; display: flex; flex-direction: column; }
  .ab2__visual { position: relative; aspect-ratio: 16 / 10; }
  .ab2__copy { position: relative; width: 100%; padding: 22px 20px 64px; clip-path: none; background: linear-gradient(160deg, #063c91, #0a5bd6); }
}
/* About：ニニの背景。顔を左に、説明は右側へ */
@media (min-width: 768px) {
  .ab2__visual img { object-position: 25% 30%; }
  .ab2__copy { left: auto; right: 0; top: 0; bottom: 0; width: min(46%, 600px); display: flex; flex-direction: column; justify-content: center;
    padding: 30px 40px 70px 90px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(100deg, rgba(10,91,214,0) 0%, rgba(10,91,214,.82) 22%, rgba(6,40,110,.94) 100%); }
}

/* タブレット幅：キャンペーン見出しを縦積みにし、カードを列内に収める */
@media (min-width: 768px) {
  .cpn__body { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); }
  .cpn__items > * { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .cpn__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cpn__read { margin: 4px 0 0 10px; font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
  .cpn__items { gap: 12px; }
  .cpn__item dt { font-size: .82rem; }
}

/* ---------- 2026-10-21 スマホのキービジュアルもPCと同じ「ニニ＋桜」＋右にロゴ ---------- */
@media (max-width: 767px) {
  .pg-kv__img { aspect-ratio: 1300 / 850; height: auto; max-height: none; }
  .pg-kv__layer--chara { display: none; }
  .pg-kv__bgimg img { object-position: center; }
  .pg-kv__logo { left: auto; right: 3%; top: auto; bottom: 14%; width: 44%; transform: none;
    filter: drop-shadow(0 6px 14px rgba(6,60,145,.35)); }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: scale(.4) rotate(-8deg); }
  .pg-kv__body { margin-top: 14px; }
}

/* 事前登録者数を出さないとき：ボタンだけを横いっぱいに */
.pg-entry--nocount { grid-template-columns: 1fr; }
.pg-entry__count[hidden] { display: none; }

/* About の画像：ニニの頭の上が切れないよう上端合わせ */
.ab2__visual img { object-position: 30% 0%; }
@media (max-width: 767px) { .ab2__visual img { object-position: 25% 0%; } }

/* タブレット幅（768〜1099px）：About は画像の下に説明、SNSとバナーは縦に並べて切れないように */
@media (min-width: 768px) and (max-width: 1099px) {
  .ab2__frame { aspect-ratio: auto; display: flex; flex-direction: column; }
  .ab2__visual { position: relative; aspect-ratio: 16 / 8; }
  .ab2__copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; padding: 26px 32px 72px; clip-path: none;
    background: linear-gradient(160deg, #063c91, #0a5bd6); }
  .pg-info__top { flex-direction: column; gap: 24px; }
  .pg-sns { padding-right: 0; margin-right: 0; border-right: 0; height: auto; }
}

/* キャンペーンの吹き出し：キャラの頭の上に置き、どの画面幅でもキャラと重ならない */
.cpn__chara { display: flex; flex-direction: column; align-items: center; }
.cpn__chara-fig { width: 100%; }
.cpn__bubble { position: relative; order: -1; left: auto; right: auto; top: auto; bottom: auto; align-self: flex-end; margin: 0 6% 16px 0; white-space: nowrap; }
@media (max-width: 767px) { .cpn__bubble { margin: 0 0 14px; align-self: center; } }

/* 吹き出しがキャンペーンの見出しに重ならないよう、キャラの位置を少し下げる */
@media (min-width: 768px) {
  .cpn__chara { margin-top: 0; }
  .cpn__body { margin-top: 28px; }
}
/* PV をキービジュアルのすぐ下に置いたときの余白 */
.pg-movie { margin-top: clamp(40px, 6vw, 90px); }
/* キャンペーンの大きなボタンの下にも App Store／Google Play を並べる */
.store-links--cpn { justify-content: center; margin-top: -4px; }

/* ---------- About：ストア画像（01〜06）を並べる ---------- */
.ab2__store { list-style: none; margin: 0; padding: 18px 4px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ab2__store li { scroll-snap-align: center; }
.ab2__store a { display: block; border-radius: 18px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 12px 28px rgba(6,60,145,.22); transition: transform .3s, box-shadow .3s; cursor: zoom-in; }
.ab2__store a:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(6,60,145,.3); }
.ab2__store img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1201; }
@media (min-width: 768px) {
  .ab2__store { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); gap: 22px; overflow: visible; padding-top: 26px; }
}
@media (min-width: 1100px) { .ab2__store { grid-template-columns: repeat(6, 1fr); gap: 16px; } }

/* 画像の拡大表示 */
.zoom-view { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 56px 16px 24px; background: rgba(6,20,45,.88); }
.zoom-view[hidden] { display: none; }
.zoom-view img { max-width: min(100%, 720px); max-height: calc(100svh - 90px); width: auto; height: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.zoom-view__x { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #0b2a5b; font-size: 26px; cursor: pointer; }
.zoom-view__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: #0b2a5b; font-size: 28px; cursor: pointer; }
.zoom-view__nav--prev { left: 10px; } .zoom-view__nav--next { right: 10px; }

/* About のストア画像：大きく、自動で切り替わるスライド（2026-10-26 上書き） */
.ab2-car { position: relative; overflow: hidden; margin-top: 18px; padding: 10px 0 44px; }
.ab2-car .ab2__store { display: flex; gap: 22px; padding: 0; overflow: visible; grid-template-columns: none; transition: transform .7s cubic-bezier(.22,.8,.24,1); will-change: transform; }
.ab2-car .ab2__store li { flex: 0 0 min(74vw, 440px); transform: scale(.86); opacity: .55; transition: transform .7s cubic-bezier(.22,.8,.24,1), opacity .7s; }
.ab2-car .ab2__store li.is-active { transform: scale(1); opacity: 1; }
.ab2-car .ab2__store a:hover { transform: none; }
.ab2-car__nav { position: absolute; top: calc(50% - 22px); z-index: 2; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: #fff; color: var(--c-blue); font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(6,60,145,.25); }
.ab2-car__nav--prev { left: max(8px, calc(50% - min(37vw, 220px) - 26px)); }
.ab2-car__nav--next { right: max(8px, calc(50% - min(37vw, 220px) - 26px)); }
.ab2-car__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.ab2-car__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #c3d6f2; cursor: pointer; transition: width .3s, background .3s; }
.ab2-car__dots button[aria-selected="true"] { width: 30px; background: var(--c-blue); }

/* =========================================================
   2026-10-26 一番上：学生の写真＋小さめのロゴ＋「ゲームで合格!? 楽しい英語アプリ」
   ========================================================= */
.gx-catch { margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; }
.gx-catch__main { margin: 0; display: flex; flex-direction: column; font-weight: 900; line-height: 1.02; transform: rotate(-6deg); transform-origin: left bottom; }
.gx-catch__l1, .gx-catch__l2 { display: block; paint-order: stroke fill; -webkit-text-stroke: .16em #ff5a1f; letter-spacing: .02em;
  filter: drop-shadow(0 .06em 0 #c93a0a) drop-shadow(0 .12em .18em rgba(120,30,0,.3)); }
.gx-catch__l1 { font-size: 1em; color: #fff; }
.gx-catch__l2 { font-size: 1.32em; color: #ffe74c; margin-left: .55em; }
.gx-catch__band { margin: .35em 0 0 .9em; padding: .1em .55em .14em; background: #fff; transform: skewX(-10deg) rotate(-4deg); font-weight: 900; font-size: .42em;
  color: #232323; box-shadow: .12em .12em 0 rgba(0,0,0,.15); white-space: nowrap; }
.gx-catch__band em { font-style: normal; color: #ff4d1a; }

.pg-kv__symbols { display: none; }
.pg-kv__catch { display: none; }
/* スマホ：写真の下にロゴと大きなキャッチ */
.pg-kv__bgimg img { object-position: 70% 20%; }
.pg-kv__logo { display: none !important; }
.pg-kv__gxsp { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 22px; }
.pg-kv__gxlogo { width: min(52vw, 240px); height: auto; filter: drop-shadow(0 6px 14px rgba(6,60,145,.25)); }
.pg-kv__gxsp .gx-catch { font-size: clamp(2.8rem, 14vw, 4.2rem); }
@media (min-width: 768px) {
  .pg-kv__gxsp { display: none; }
  .pg-kv__img { aspect-ratio: 1920 / 860; }
  .pg-kv__bgimg img { object-position: 100% 18%; }
  .pg-kv__logo { display: block !important; left: 5% !important; right: auto !important; top: 7% !important; width: min(19%, 340px) !important; transform: none !important; }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: scale(.4) !important; }
  .pg-kv__catch { display: flex; position: absolute; z-index: 3; left: 6%; top: 33%; font-size: clamp(2.6rem, 5.4vw, 6.2rem); }
}
.pg-kv__gxsp { padding-left: 5vw; align-items: flex-start; } .pg-kv__gxsp .pg-kv__gxlogo { align-self: center; }
/* 2026-10-26 PC：「ゲームで合格!?」を横一列に寝かせて、写真の左側の真ん中に。ロゴもその上の真ん中へ */
@media (min-width: 768px) {
  .pg-kv__logo { left: 29% !important; top: 9% !important; width: min(18%, 330px) !important; transform: translateX(-50%) !important; }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: translateX(-50%) scale(.4) !important; }
  .pg-kv__catch { left: 29%; top: 47%; transform: translate(-50%, -50%); align-items: center; font-size: clamp(2.2rem, 4.1vw, 5.6rem); }
  .pg-kv__catch .gx-catch__main { flex-direction: row; align-items: baseline; transform: rotate(-4deg); transform-origin: center; white-space: nowrap; }
  .pg-kv__catch .gx-catch__l2 { margin-left: .06em; }
  .pg-kv__catch .gx-catch__band { margin: .45em 0 0; font-size: .46em; }
}
/* 2026-10-26 PC：2段の「ゲームで合格!?」を大きく、画面の真ん中寄りに。ロゴは小さく左上 */
@media (min-width: 768px) {
  .pg-kv__logo { left: 2.5% !important; top: 5% !important; width: min(13%, 240px) !important; transform: none !important; }
  .inview-ready .pg-kv:not(.is-play) .pg-kv__logo { transform: scale(.4) !important; }
  .pg-kv__catch { left: 34%; top: 50%; transform: translate(-50%, -50%); align-items: flex-start; font-size: clamp(3rem, 6.8vw, 8.6rem); }
  .pg-kv__catch .gx-catch__main { flex-direction: column; align-items: flex-start; transform: rotate(-6deg); transform-origin: left bottom; white-space: nowrap; }
  .pg-kv__catch .gx-catch__l2 { margin-left: .55em; }
  .pg-kv__catch .gx-catch__band { margin: .35em 0 0 .9em; font-size: .42em; }
}

/* 2026-10-26 「ゲームで合格!?」の下に、戦闘・学習のスマホ画面を1台ずつ順番に */
.pg-kv__phones { display: flex; gap: 14px; }
.kvp { flex: 0 0 auto; border-radius: 1.2em; padding: .32em; background: #101826; box-shadow: 0 12px 26px rgba(5,20,60,.35), inset 0 0 0 2px #2d3b55;
  opacity: 0; transform: translateY(30px) scale(.8) rotate(var(--r, 0deg)); }
.kvp img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1300; object-fit: cover; border-radius: .95em; }
.kvp:nth-child(1) { --r: -6deg; } .kvp:nth-child(2) { --r: 3deg; } .kvp:nth-child(3) { --r: -3deg; } .kvp:nth-child(4) { --r: 6deg; }
.pg-kv.is-play .kvp, .pg-kv__phones--sp .kvp { animation: kvpIn .7s cubic-bezier(.28,1.64,.58,.87) forwards, kvpFloat 4s ease-in-out infinite; }
.kvp:nth-child(1) { animation-delay: .5s, 1.2s !important; } .kvp:nth-child(2) { animation-delay: .8s, 1.5s !important; }
.kvp:nth-child(3) { animation-delay: 1.1s, 1.8s !important; } .kvp:nth-child(4) { animation-delay: 1.4s, 2.1s !important; }
@keyframes kvpIn { to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r)); } }
@keyframes kvpFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pg-kv__phones--sp { justify-content: center; margin-top: 10px; gap: 8px; }
.pg-kv__phones--sp .kvp { width: 20vw; font-size: 9px; }
@media (min-width: 768px) {
  .pg-kv__catch { top: 29%; font-size: clamp(2.6rem, 5.6vw, 7rem); }
  .pg-kv__phones { position: absolute; z-index: 3; left: 34%; top: 51%; transform: translateX(-50%); gap: 1.1vw; }
  .pg-kv__phones .kvp { width: min(6.6vw, 128px); font-size: min(.55vw, 10px); }
}
@media (prefers-reduced-motion: reduce) { .kvp { opacity: 1; transform: rotate(var(--r)); animation: none !important; } }
@media (max-width: 767px) { .pg-kv__img .pg-kv__phones { display: none; } }
/* 2026-10-26 スマホ画面は3台・大きく（ロゴの下）、「ゲームで合格!?」は真ん中に */
.kvp:nth-child(1) { --r: -7deg; } .kvp:nth-child(2) { --r: 0deg; } .kvp:nth-child(3) { --r: 7deg; }
.pg-kv__phones--sp .kvp { width: 27vw; }
@media (min-width: 768px) {
  .pg-kv__logo { left: 2.5% !important; top: 4% !important; width: min(12%, 230px) !important; }
  .pg-kv__phones { left: 2.5%; top: 25%; transform: none; gap: 0; align-items: flex-end; }
  .pg-kv__phones .kvp { width: min(8.4vw, 160px); font-size: min(.7vw, 13px); }
  .pg-kv__phones .kvp + .kvp { margin-left: -1.6vw; }
  .pg-kv__phones .kvp:nth-child(2) { z-index: 2; margin-bottom: 1.6vw; }
  .pg-kv__catch { left: 42%; top: 47%; transform: translate(-50%, -50%); font-size: clamp(2.4rem, 4.9vw, 6.2rem); }
}
@media (min-width: 768px) {
  .pg-kv__phones { top: 21%; }
  .pg-kv__phones .kvp { width: min(9.6vw, 184px); font-size: min(.8vw, 15px); }
  .pg-kv__phones .kvp + .kvp { margin-left: -2.2vw; }
  .pg-kv__catch { left: 45%; font-size: clamp(2.3rem, 4.6vw, 5.8rem); }
}
/* 2026-10-26 「ゲームで合格!?」は左、スマホ画面3台は大きく真ん中に */
@media (min-width: 768px) {
  .pg-kv__catch { left: 3%; top: 50%; transform: translateY(-50%); font-size: clamp(2.5rem, 5.1vw, 6.4rem); }
  .pg-kv__phones { left: 44%; top: 12%; transform: translateX(-50%); }
  .pg-kv__phones .kvp { width: min(12vw, 230px); font-size: min(1vw, 18px); }
  .pg-kv__phones .kvp + .kvp { margin-left: -2.8vw; }
  .pg-kv__phones .kvp:nth-child(2) { margin-bottom: 2vw; }
}
/* 女の人（切り抜き）をスマホ画面の手前に重ねる */
.pg-kv__layer--person { z-index: 4; pointer-events: none; }
/* 3台目（Perfect!）の「P」が隠れないよう、重なりを小さく */
@media (min-width: 768px) { .pg-kv__phones { left: 42.5%; } .pg-kv__phones .kvp:nth-child(3) { margin-left: -.3vw; } }
/* 写真の中の重なり（女の人・スマホ画面）は写真の中だけで決めて、下の「事前登録する」ボタンより上に出さない */
.pg-kv__img { isolation: isolate; }
/* 2026-10-26 スマホ画面が「ゲームで合格!?」にかぶらないよう、右へずらして少し小さく。文字は常に手前 */
@media (min-width: 768px) {
  .pg-kv__catch { left: 2.5%; font-size: clamp(2.3rem, 4.9vw, 6.2rem); z-index: 5; }
  .pg-kv__phones { left: 48.5%; }
  .pg-kv__phones .kvp { width: min(11vw, 212px); font-size: min(.92vw, 17px); }
  .pg-kv__phones .kvp + .kvp { margin-left: -1.6vw; }
  .pg-kv__phones .kvp:nth-child(3) { margin-left: -.3vw; }
}
/* スマホ画面を少し左へ（女の人のスマホにかぶらないように） */
@media (min-width: 768px) {
  .pg-kv__catch { font-size: clamp(2.1rem, 4.4vw, 5.6rem); }
  .pg-kv__phones { left: 43.5%; }
  .pg-kv__phones .kvp { width: min(10.2vw, 196px); font-size: min(.85vw, 16px); }
}

/* =========================================================
   2026-10-26 事前登録キャンペーン第2弾（抽選で実物の賞品）
   ========================================================= */
.cpn2 { position: relative; padding: clamp(60px, 8vw, 110px) 16px; background: linear-gradient(170deg, #fff7e0 0%, #ffe9b8 55%, #ffd97a 100%); overflow: hidden; }
.cpn2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.7), transparent 40%), radial-gradient(circle at 90% 80%, rgba(255,255,255,.5), transparent 40%); pointer-events: none; }
.cpn2__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.cpn2__head { text-align: center; }
.cpn2__no { display: inline-block; margin: 0; padding: 4px 16px; border-radius: 999px; background: #e0342f; color: #fff; font-family: var(--font-en); font-weight: 800; letter-spacing: .14em; font-size: .8rem; }
.cpn2__title { margin: 14px 0 0; font-weight: 900; font-size: clamp(1.6rem, 4.4vw, 3rem); line-height: 1.35; color: var(--c-navy); }
.cpn2__title small { display: block; font-size: .42em; color: #b35a00; letter-spacing: .08em; margin-bottom: 6px; }
.cpn2__title em { font-style: normal; color: #e0342f; }
.cpn2__lead { margin: 16px auto 0; max-width: 720px; font-weight: 700; line-height: 1.9; color: #4a3a1a; }
.cpn2__goal { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--c-navy); color: #ffd23f; font-weight: 900; font-size: .85rem; white-space: nowrap; }
.cpn2__top { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 40px); flex-wrap: wrap; margin: 34px auto 0; padding: 22px 26px; max-width: 760px; border-radius: 28px;
  background: linear-gradient(135deg, #fff, #fff6d8); border: 4px solid #f0b400; box-shadow: 0 16px 40px rgba(180,110,0,.25); }
.cpn2__top img { width: clamp(140px, 22vw, 220px); height: auto; animation: cpn2Float 3.6s ease-in-out infinite; }
.cpn2__top-name { margin: 6px 0 0; font-family: var(--font-en); font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--c-navy); line-height: 1.1; }
.cpn2__top-num { margin: 6px 0 0; font-weight: 900; font-size: 1.2rem; color: #4a3a1a; }
.cpn2__top-num b { font-family: var(--font-en); font-size: 2em; color: #e0342f; margin: 0 2px; }
@keyframes cpn2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cpn2__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cpn2__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .cpn2__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cpn2__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 18px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 8px 22px rgba(180,110,0,.15); }
.cpn2__list img { width: 78%; max-width: 140px; height: auto; }
.cpn2__name { margin: 0; font-weight: 900; font-size: .95rem; line-height: 1.4; color: var(--c-navy); }
.cpn2__name b { color: #e0342f; }
.cpn2__num { margin: 0; font-weight: 800; font-size: .82rem; color: #6b5a3a; }
.cpn2__num b { font-family: var(--font-en); font-size: 1.4em; color: var(--c-blue); margin: 0 1px; }
.cpn2__list-top { background: linear-gradient(160deg, #fff, #fff2c2) !important; outline: 3px solid #f0b400; }
.cpn2__how { margin: 40px auto 0; padding: 26px clamp(16px, 3vw, 34px); max-width: 920px; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(180,110,0,.15); }
.cpn2__how-title { margin: 0; font-weight: 900; font-size: 1.3rem; color: var(--c-navy); }
.cpn2__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .cpn2__steps { grid-template-columns: repeat(3, 1fr); } }
.cpn2__steps li { padding: 16px 12px; border-radius: 16px; background: #f4f8ff; font-weight: 700; font-size: .92rem; line-height: 1.7; color: var(--c-navy); }
.cpn2__steps b { display: block; margin-bottom: 4px; font-family: var(--font-en); color: var(--c-blue); letter-spacing: .1em; }
.cpn2__steps a { color: var(--c-blue); font-weight: 900; }
.cpn2__x { display: inline-flex; align-items: center; justify-content: center; margin-top: 20px; min-height: 56px; padding: 0 34px; border-radius: 999px; background: #111; color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 5px 0 #000; transition: transform .2s; }
.cpn2__x::before { content: "𝕏"; margin-right: 10px; font-size: 1.3em; }
.cpn2__x:hover { transform: translateY(2px); box-shadow: 0 3px 0 #000; }
.cpn2__notes { list-style: none; margin: 28px auto 0; padding: 0; max-width: 920px; font-size: .72rem; line-height: 1.8; color: #6b5a3a; }
.cpn2__notes li { text-indent: -1em; padding-left: 1em; }
@media (prefers-reduced-motion: reduce) { .cpn2__top img { animation: none; } }
.cpn2__top { flex-wrap: nowrap; }
.cpn2__top > div { text-align: left; }
@media (max-width: 600px) { .cpn2__top { flex-wrap: wrap; } .cpn2__top > div { text-align: center; } }
.cpn2__top-name { white-space: nowrap; }

/* =========================================================
   2026-10-26 事前登録キャンペーン：ゲーム内アイテムと抽選賞品を「道」で1つに
   （今の事前登録キャンペーンの色：青・紺・黄色・白カード をベースに）
   ========================================================= */
.cpn__body { grid-template-columns: 1fr !important; grid-template-areas: "chara" "road" !important; }
.cpn__body .cpn__bg { top: 4%; height: 26%; }
.cpn__chara { width: min(48%, 260px) !important; margin: 0 auto -6% !important; }
.rd { grid-area: road; position: relative; z-index: 2; padding: 0 4px; }
@media (min-width: 900px) {
  .cpn__body { grid-template-columns: 30% 1fr !important; grid-template-areas: "chara road" !important; gap: 30px 40px; align-items: start; }
  .cpn__body .cpn__bg { top: 6%; height: 40%; }
  .cpn__chara { position: sticky; top: 110px; width: 100% !important; margin: 40px 0 0 !important; }
}
.rd__start, .rd__goal { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; width: fit-content;
  padding: 10px 22px; border-radius: 999px; font-weight: 900; color: #fff; background: var(--c-navy); box-shadow: 0 6px 0 #061c3f; }
.rd__start span { font-family: var(--font-en); color: var(--c-yellow); letter-spacing: .12em; }
.rd__goal { flex-direction: column; gap: 0; padding: 14px 34px; font-family: var(--font-en); font-size: 1.6rem; letter-spacing: .14em; color: var(--c-navy);
  background: linear-gradient(135deg, #ffe873, #ffbf1f); box-shadow: 0 6px 0 #c98a00, 0 0 0 6px #fff; }
.rd__goal small { font-family: var(--font-ja); font-size: .78rem; letter-spacing: .05em; }

/* 道（中央に太い道＋白い点線） */
.rd__list { list-style: none; position: relative; margin: 0; padding: 26px 0; }
.rd__list::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 26px; border-radius: 14px;
  background: linear-gradient(#4f9bff, #1f6bff 40%, #0a5bd6); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 6px 16px rgba(10,91,214,.25); }
.rd__list::after { content: ""; position: absolute; left: 39px; top: 6px; bottom: 6px; width: 4px;
  background: repeating-linear-gradient(#fff 0 14px, transparent 14px 28px); opacity: .9; }
.rd__step { position: relative; display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 10px; padding: 12px 0; }
.rd__pin { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82px; min-height: 82px; padding: 6px; border-radius: 50%;
  background: #fff; border: 4px solid var(--c-blue); box-shadow: 0 6px 14px rgba(10,91,214,.25); text-align: center; line-height: 1.1; }
.rd__pin b { font-weight: 900; font-size: .92rem; color: var(--c-navy); white-space: nowrap; }
.rd__pin small { font-size: .62rem; font-weight: 800; color: var(--c-blue); }
.rd__card { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 20px; background: #fff; border: 3px solid #bfe0ff; box-shadow: 0 8px 20px rgba(10,91,214,.12); }
.rd__gift { position: relative; flex: 1 1 200px; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; align-items: center; column-gap: 12px;
  padding: 10px 12px; border-radius: 14px; }
.rd__gift img, .rd__q { grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: contain; }
.rd__tag { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 900; color: #fff; }
.rd__gift b { font-weight: 900; font-size: .95rem; line-height: 1.35; color: var(--c-navy); }
.rd__gift small { font-weight: 800; font-size: .78rem; color: #6b5a3a; }
.rd__gift small em { font-style: normal; font-family: var(--font-en); font-size: 1.3em; color: #e0342f; margin: 0 1px; }
.rd__gift--all { background: #eef7ff; }
.rd__gift--all .rd__tag { background: var(--c-blue); }
.rd__gift--lot { background: #fff6dd; }
.rd__gift--lot .rd__tag { background: #e86a00; }
.rd__q { display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--c-blue), var(--c-sky)); color: #fff; font-family: var(--font-en); font-weight: 900; font-size: 2rem; }
/* 達成済みの段階（js/prereg.js が is-done を付ける） */
.rd__step.is-done .rd__pin { background: var(--c-yellow); border-color: #f0b400; }
/* ゴール（100万人） */
.rd__step--goal .rd__pin { border-color: #f0b400; background: linear-gradient(135deg, #fff7c9, #ffe27a); }
.rd__step--goal .rd__card { border-color: #f0b400; background: linear-gradient(135deg, #fffdf2, #fff1c2); }
.rd__step--goal .rd__gift img { width: 88px; height: 88px; }
.rd__step--goal .rd__gift { grid-template-columns: 88px 1fr; }
.rd__step--goal .rd__gift b { font-family: var(--font-en); font-size: 1.5rem; }
@media (min-width: 900px) {
  .rd__step { grid-template-columns: 96px 1fr; }
  .rd__pin { width: 96px; min-height: 96px; }
  .rd__pin b { font-size: 1.05rem; }
  .rd__list::before { left: 35px; } .rd__list::after { left: 46px; }
}
/* 応募方法・注意書き（キャンペーンの下） */
.cpn__foot .cpn2__how { margin: 10px auto 0; width: 100%; }
.cpn__foot .cpn2__notes { margin-top: 0; }
.rd, .rd__card, .rd__gift { min-width: 0; }
.rd__step { grid-template-columns: 82px minmax(0, 1fr); }
@media (min-width: 900px) { .rd__step { grid-template-columns: 96px minmax(0, 1fr); } }
@media (max-width: 899px) { .cpn__body { grid-template-columns: minmax(0, 1fr) !important; } .rd__gift { flex-basis: 100%; } .rd__gift b { overflow-wrap: anywhere; } }
@media (max-width: 899px) {
  .rd__step { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
  .rd__pin { width: 66px; min-height: 66px; border-width: 3px; }
  .rd__pin b { font-size: .78rem; }
  .rd__list::before { left: 21px; width: 24px; } .rd__list::after { left: 31px; }
  .rd__card { padding: 8px; gap: 8px; }
  .rd__gift { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; padding: 8px 10px; }
  .rd__gift img, .rd__q { width: 48px; height: 48px; }
  .rd__tag { white-space: nowrap; font-size: .62rem; }
  .rd__gift b { font-size: .86rem; }
  .rd__step--goal .rd__gift { grid-template-columns: 64px minmax(0, 1fr); }
  .rd__step--goal .rd__gift img { width: 64px; height: 64px; }
}
.rd__step--goal .rd__gift { grid-template-columns: 130px minmax(0,1fr); } .rd__step--goal .rd__gift img { width: 130px; height: 100px; }
@media (max-width: 899px) { .rd__step--goal .rd__gift { grid-template-columns: 96px minmax(0,1fr); } .rd__step--goal .rd__gift img { width: 96px; height: 74px; } }

/* 現在の事前登録者数（キャンペーン見出しの下に大きく） */
.rd-now { position: relative; z-index: 3; width: min(100%, 680px); margin: 26px auto 10px; padding: 20px 24px 18px; border-radius: 26px; background: #fff; text-align: center;
  border: 4px solid var(--c-sky); box-shadow: 0 8px 0 var(--c-blue), 0 18px 36px rgba(10,91,214,.25); }
.rd-now__label { margin: 0; font-weight: 900; font-size: clamp(.95rem, 2.4vw, 1.15rem); color: var(--c-navy); }
.rd-now__label small { display: block; font-size: .72em; font-weight: 700; color: var(--c-text-sub); }
.rd-now__num { margin: 4px 0 0; display: flex; justify-content: center; align-items: baseline; gap: 4px; line-height: 1; color: var(--c-blue); }
.rd-now__num b { font-family: var(--font-en); font-weight: 900; font-size: clamp(3.4rem, 12vw, 6rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #2f8dff, #0a5bd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-now__num span { font-weight: 900; font-size: clamp(1.2rem, 3.6vw, 2rem); color: var(--c-navy); }
.rd-now__bar { height: 14px; margin: 14px auto 0; border-radius: 999px; background: #e3eefb; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.08); }
.rd-now__bar span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-yellow), #ff9d2e); transition: width 1.4s cubic-bezier(.19,1,.22,1); }
.rd-now__next { margin: 10px 0 0; font-weight: 800; font-size: clamp(.82rem, 2.3vw, .98rem); color: var(--c-navy); }
.rd-now__next b { color: #e86a00; }
/* 参加方法の補足 */
.cpn2__steps-note { display: block; margin-top: 8px; padding: 4px 8px; border-radius: 8px; background: #fff6dd; color: #8a4b00; font-size: .78rem; font-weight: 800; }
.cpn2__steps-note strong { color: #e0342f; }
.cpn2__dm { margin: 18px auto 0; padding: 12px 16px; max-width: 640px; border-radius: 14px; background: #eef7ff; border: 2px dashed #9cc8ff; font-weight: 700; font-size: .9rem; line-height: 1.8; color: var(--c-navy); }
.cpn2__dm strong { color: var(--c-blue); }

/* まだ達成していない段階はグレー（達成した段階は is-done で色つき） */
.rd__step:not(.is-done) .rd__card { filter: grayscale(1); opacity: .62; }
.rd__step:not(.is-done) .rd__pin { border-color: #b7c0cc; background: #eef1f5; }
.rd__step:not(.is-done) .rd__pin b, .rd__step:not(.is-done) .rd__pin small { color: #8a94a3; }
.rd__step:not(.is-done) .rd__pin small::before { content: "未"; }
.rd__step.is-done .rd__pin small { color: var(--c-navy); }
/* 今ここ！（ちびキャラ） */
.rd__here { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 6px; list-style: none; }
.rd__here-face { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #fff; border: 4px solid var(--c-yellow);
  box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(10,91,214,.35); animation: rdHere 1.6s ease-in-out infinite; }
.rd__here-face img { width: 100%; height: 100%; object-fit: cover; }
.rd__here-bubble { position: relative; padding: 8px 16px; border-radius: 14px; background: var(--c-yellow); color: var(--c-navy); font-weight: 900; font-size: 1.05rem; box-shadow: 0 4px 0 #c98a00; }
.rd__here-bubble::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right: 10px solid var(--c-yellow); border-left: 0; }
.rd__here-bubble b { margin-left: 8px; font-family: var(--font-en); }
@keyframes rdHere { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 900px) { .rd__here { padding-left: 12px; } .rd__here-face { width: 76px; height: 76px; } }
@media (max-width: 899px) { .rd__here-face { width: 58px; height: 58px; } .rd__here { padding-left: 4px; } }
@media (prefers-reduced-motion: reduce) { .rd__here-face { animation: none; } }
/* グレーは中身だけ（カードは白いまま、青い背景が透けないように） */
.rd__step:not(.is-done) .rd__card { filter: none; opacity: 1; background: #f3f5f8; border-color: #d5dbe3; }
.rd__step:not(.is-done) .rd__gift { filter: grayscale(1); opacity: .7; }
.rd__gift b { overflow-wrap: anywhere; } .rd__gift { flex-basis: 220px; }
/* 長い賞品名がはみ出さないよう、カードの中で折り返す */
.rd__gift { grid-template-columns: 64px minmax(0, 1fr); overflow: hidden; }
.rd__gift b, .rd__gift small { word-break: normal; overflow-wrap: anywhere; min-width: 0; }
.rd__step--goal .rd__gift { grid-template-columns: 130px minmax(0, 1fr); }
@media (max-width: 899px) { .rd__gift { grid-template-columns: 48px minmax(0, 1fr); } .rd__step--goal .rd__gift { grid-template-columns: 96px minmax(0, 1fr); } }
.pg-float__btn small { line-height: 1.2; text-align: center; }
/* キャンペーンのキャラを大きく */
.cpn__chara { width: min(78%, 420px) !important; margin: 0 auto -4% !important; }
@media (min-width: 900px) {
  .cpn__body { grid-template-columns: 36% minmax(0, 1fr) !important; }
  .cpn__chara { width: 100% !important; margin: 20px 0 0 !important; }
}
/* キャラの画像を枠いっぱいに（縦長の立ち絵をつぶさない） */
.cpn__chara .slot--chara { height: auto !important; aspect-ratio: auto !important; }
.cpn__chara .slot--chara img { width: 100% !important; height: auto !important; max-height: 82vh; aspect-ratio: 806 / 1500 !important; object-fit: contain; }
/* スマホ・タブレットでは大きすぎないように */
@media (max-width: 899px) { .cpn__chara { width: min(66%, 340px) !important; } .cpn__chara .slot--chara img { max-height: 70vh; } }
/* 参加方法を道の上に（イラストつき） */
.cpn__inner > .cpn2__how { position: relative; z-index: 3; margin: 6px auto 26px; max-width: 1000px; }
.cpn2__steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
.cpn2__step-img { width: 96px; height: 96px; object-fit: contain; margin: -6px 0 6px; filter: drop-shadow(0 6px 10px rgba(10,60,145,.18)); }
@media (min-width: 768px) {
  .cpn2__steps { position: relative; }
  .cpn2__steps li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 54px; width: 16px; height: 16px; border-top: 4px solid var(--c-blue); border-right: 4px solid var(--c-blue); transform: rotate(45deg); z-index: 2; }
}
@media (max-width: 767px) { .cpn2__step-img { width: 80px; height: 80px; } }
.cpn2__steps li { display: block; text-align: center; } .cpn2__step-img { display: block; margin: -6px auto 6px; }
.cpn2__period { margin: 10px auto 0; padding: 8px 16px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--c-navy); color: #fff; font-weight: 800; font-size: .92rem; }
.cpn2__period b { color: var(--c-yellow); }
.cpn2__period small { display: block; font-size: .7rem; font-weight: 600; opacity: .85; }
@media (max-width: 600px) { .cpn2__period { border-radius: 16px; } }

/* ゲーム画面（実際のプレイ・スクリーンショット） */
.pg-shots { padding-left: 16px; padding-right: 16px; }
.pg-shots__clips, .pg-shots__grid, .pg-shots__h { max-width: 1180px; margin-left: auto; margin-right: auto; }
.pg-shots__clips { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); margin-top: 26px; }
.pg-shot { margin: 0; text-align: center; }
.pg-shot--clip { width: min(42vw, 300px); }
.pg-shot video, .pg-shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 4px solid #fff; background: #0b2a5b; box-shadow: 0 12px 28px rgba(6,60,145,.22); }
.pg-shot video { aspect-ratio: 9 / 16; object-fit: cover; }
.pg-shot img { aspect-ratio: 9 / 16; object-fit: cover; object-position: center top; transition: transform .3s; }
.pg-shot a { display: block; cursor: zoom-in; border-radius: 18px; }
.pg-shot a:hover img { transform: translateY(-4px); }
.pg-shot figcaption { margin-top: 8px; font-weight: 900; font-size: .85rem; color: var(--c-navy); }
.pg-shots__h { margin-top: 40px; margin-bottom: 14px; padding-left: 12px; border-left: 6px solid var(--c-blue); font-weight: 900; font-size: 1.2rem; color: var(--c-navy); }
.pg-shots__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { .pg-shots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .pg-shots__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rd-now__note { margin: 10px 0 0; font-size: .72rem; line-height: 1.7; color: var(--c-text-sub); text-align: left; }
.pg-shot video { object-fit: cover; aspect-ratio: 540 / 1170; }
/* 学習モード：問題の形 10 種類（縦長の画面を切らずに見せる） */
.pg-shots__grid--study .pg-shot img { aspect-ratio: 720 / 1560; }
@media (min-width: 768px) { .pg-shots__grid--study { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* iPhone Duo の定価 */
.rd__price { display: block; font-weight: 900; font-size: .85rem; color: #e0342f; }
.rd__gift:has(.rd__price) img { grid-row: 1 / span 4; }
/* スマホ：「ほかにも〜」の文が左右の矢印と重ならないように */
@media (max-width: 767px) { .pg-chara__more { padding: 0 50px; } }
/* 「事前登録限定キャラクター」の「ー」だけが次の行に落ちないように */
.rd__gift--secret b { word-break: keep-all; overflow-wrap: anywhere; }
/* スマホ：浮きボタンの「App Store / Google Play」が丸からはみ出さないように */
@media (max-width: 767px) {
  .pg-float { width: 92px; }
  .pg-float__btn { padding-bottom: 8px; }
  .pg-float__txt { font-size: 1rem; }
  .pg-float__btn small { font-size: .47rem; letter-spacing: 0; margin-top: 2px; }
}