@charset "UTF-8";
/* =========================================================
   トップページ（index.html）2026-10-21 アップグレード
   事前登録ページ（prereg.css）のキャンペーン・キャラクター紹介を共用
   ========================================================= */
:root { --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); }

/* キービジュアル：公式キーアート（ロゴ入り）なので PC では上乗せロゴを出さない */
.kv__visual img { aspect-ratio: 4 / 5; object-position: center top; }
@media (min-width: 768px) {
  .kv__visual img { aspect-ratio: 16 / 9; object-position: center; }
  .kv__logo { display: none; }
}

/* キャンペーン（prereg.css の .cpn をそのまま使う） */
.cpn { padding-top: 10px; }
.cpn__more { margin: 0; font-weight: 800; }

/* キャラクター紹介 */
.home-chara { margin-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(30px, 4vw, 60px); }

/* ゲーム画面の一覧（横スクロール） */
.home-shots { margin: 36px -16px 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.home-shots ul { display: flex; gap: 16px; width: max-content; margin: 0; padding: 6px 16px 18px; list-style: none; }
.home-shots li { scroll-snap-align: center; width: clamp(150px, 40vw, 210px); }
.home-shots figure { margin: 0; }
.home-shots img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: center top;
  border-radius: 18px; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--c-sky-light), 0 12px 24px rgba(6,60,145,.22);
  transition: transform .4s var(--pop); }
.home-shots li:hover img { transform: translateY(-6px) rotate(-1deg); }
.home-shots figcaption { margin-top: 10px; text-align: center; font-size: .82rem; color: var(--c-text-sub); line-height: 1.4; }
.home-shots figcaption b { display: block; font-size: 1rem; color: var(--c-navy); }
@media (min-width: 1024px) {
  .home-shots { margin: 44px 0 0; overflow: visible; }
  .home-shots ul { width: auto; justify-content: center; flex-wrap: nowrap; padding: 6px 0 18px; }
  .home-shots li { width: calc((100% - 80px) / 6); }
}

/* オープニング：約2.7秒に短縮（元は約5.4秒） */
.intro-on .intro { animation-delay: 2.45s; }
.intro__mark { animation-duration: .7s; animation-delay: .15s; }
.intro__text { animation-duration: .6s; animation-delay: .55s; }
.intro__line1 { animation-duration: .5s; animation-delay: 1.15s; }
.intro__inner { animation-delay: 2s; }
.intro__wipe { animation-duration: .55s; animation-delay: 2s; }

/* 読み上げ専用（画面には出さない） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 見出しをゲーム寄りに：英字ラベルは紺のタグ、日本語見出しは太いゴシック */
.section__en { display: inline-block; padding: 3px 14px; background: var(--c-navy); color: #fff; letter-spacing: .14em; transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--c-sky); }
.section__title, .concept__answer-main, .mission__text, .cta__title, .campaign__title { font-family: "Dela Gothic One", var(--font-ja); font-weight: 400; letter-spacing: .02em; }
.header__cta { white-space: nowrap; }
body { word-break: auto-phrase; }

/* コンセプト：図形アイコン／特長：キャラの顔 */
.worry__face { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--c-bg-tint); color: var(--c-blue); font-size: 0; }
.worry__face svg { width: 40px; height: 40px; }
.feature__icon--face { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; font-size: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c-sky), 0 10px 20px rgba(6,60,145,.2); }
.feature__icon--face img { width: 100%; height: 100%; object-fit: cover; }
.feature, .worry, .target__inner, .about-card { border-radius: 8px; }
.feature__text { font-size: .95rem; color: var(--c-text); }

/* トピックス：実画像サムネイル */
.thumb--img img { width: 100%; height: 100%; object-fit: cover; }
.kv__frame { position: relative; }
.kv__copyright { position: absolute; z-index: 2; left: 14px; top: 12px; color: #fff; font-family: var(--font-en); font-weight: 800; font-size: .68rem;
  text-shadow: 0 0 3px rgba(20,20,60,.9), 0 1px 2px rgba(20,20,60,.9); }

/* ---------- 2026-10-21 第2回 ---------- */
/* オープニング：さらに短く（約1.8秒） */
.intro-on .intro { animation-delay: 1.6s; }
.intro__mark { animation-duration: .55s; animation-delay: .1s; }
.intro__text { animation-duration: .45s; animation-delay: .35s; }
.intro__line1 { animation-duration: .4s; animation-delay: .7s; }
.intro__inner, .intro__wipe { animation-delay: 1.25s; }
.intro__wipe { animation-duration: .45s; }
/* KV：ジャンルの一言・ストア表記 */
.kv__genre { margin: 6px auto 12px; width: fit-content; padding: 4px 14px; background: var(--c-navy); color: #fff; font-weight: 900; font-size: clamp(.8rem, 2.8vw, 1rem);
  transform: skewX(-8deg); box-shadow: 4px 4px 0 var(--c-sky); }
.kv__note { margin: 0; font-size: .78rem; font-weight: 800; color: var(--c-text-sub); }
@media (min-width: 768px) {
  .kv__genre { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; }
  .kv__note { margin-bottom: 30px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--c-navy); }
}
/* 特長：ゲームのアイテム */
.feature__icon--item { width: 92px; height: 92px; margin: 0 auto 12px; font-size: 0; filter: drop-shadow(0 8px 12px rgba(6,60,145,.25)); }
.feature__icon--item img { width: 100%; height: 100%; object-fit: contain; }
/* 下半分のカード：角は小さめの丸み（切り欠きは番号バッジや枠線を欠けさせるのでやめる） */
.feature, .worry, .target__inner, .about-card { border-radius: 6px; }
@media (min-width: 768px) { .kv__genre { left: 114px; top: 12px; } }
@media (min-width: 1100px) { .kv__genre { left: 140px; } }

/* 縦書きコピーの後ろに白い帯（背景の模様と重ならないように） */
@media (min-width: 768px) {
  .kv__copy-v { position: relative; z-index: 1; padding: 10px 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 25%, rgba(255,255,255,.9) 75%, rgba(255,255,255,0)); }
}

/* ---------- 2026-10-21 キービジュアル：PC＝ニニの背景＋ロゴ ---------- */
@media (min-width: 768px) {
  .kv__visual img { aspect-ratio: 1920 / 850; object-position: 30% center; }
  .kv__logo { display: block; left: auto; right: 4%; top: 48%; width: min(34%, 560px); transform: translateY(-50%);
    filter: drop-shadow(0 10px 22px rgba(6,60,145,.35)); }
}

/* =========================================================
   2026-10-21 キービジュアル：画面いっぱいの全面表示（ウマ娘公式のように）
   ========================================================= */
@media (min-width: 768px) {
  .kv { padding: 0; background: #eaf6ff; }
  .kv__bg { display: none; }
  .kv__stage { display: block; max-width: none; padding: 0; }
  .kv__frame { border-radius: 0; box-shadow: none; }
  .kv__frame::after { display: none; }
  .kv__visual img { width: 100%; aspect-ratio: 1920 / 850; min-height: 520px; max-height: calc(100svh - var(--header-h)); object-fit: cover; object-position: 30% 35%; }
  /* 下に向かって少し濃くして、ボタンを読みやすく */
  .kv__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%), linear-gradient(0deg, rgba(10,50,130,.35) 0%, rgba(10,50,130,0) 30%); }
  /* 縦書きコピーはやめて、左上に大きな横書き（ボタンと重ならない） */
  .kv__copy-v { display: none; }
  .kv__copy { display: block; position: absolute; z-index: 3; left: 3.4vw; top: calc(3vw + 52px); margin: 0; text-align: left;
    font-family: "Dela Gothic One", var(--font-ja); font-weight: 400; font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1.15; color: var(--c-navy); letter-spacing: .02em;
    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 24px rgba(10,60,160,.35); }
  .kv__genre { left: 3.4vw; top: 3vw; }
  .kv__copyright { left: auto; right: 16px; top: auto; bottom: 12px; }
  .kv__logo { z-index: 2; right: 4%; top: 44%; width: min(36%, 640px); }
  .kv__cta { position: absolute; z-index: 3; left: 3.4vw; bottom: 3vw; align-items: center; }
  .kv__note { margin: 0; }
}
@media (min-width: 1100px) { .kv__genre { left: 3.4vw; } }
/* KV のストアボタン */
@media (min-width: 768px) { .kv__stores2 { margin: 0; } }
@media (max-width: 767px) { .kv__stores2 { justify-content: center; } }

/* =========================================================
   2026-10-21 コンセプト／3つの特長：ウマ娘公式風の左右2パネル（青系）
   ========================================================= */
.board { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 100px) 0;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(53,184,245,.10) 58% 72%, transparent 72%),
    linear-gradient(65deg, transparent 0 20%, rgba(10,91,214,.06) 20% 30%, transparent 30%),
    radial-gradient(circle at 1px 1px, rgba(10,91,214,.08) 1.2px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #f3f9ff, #eaf5ff); }
.board__inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: grid; gap: 56px; }
@media (min-width: 1024px) { .board__inner { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }

/* 斜めタブの見出し */
.bpanel { position: relative; padding-top: 44px; }
.bpanel__tab { position: absolute; z-index: 2; left: -6px; top: 0; margin: 0; display: flex; align-items: baseline; gap: 14px;
  padding: 6px 40px 8px 30px; color: #fff; clip-path: polygon(14px 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
.bpanel__en { font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: .01em; }
.bpanel__ja { font-weight: 900; font-size: clamp(.8rem, 1.3vw, 1rem); letter-spacing: .08em; }
.bpanel--concept .bpanel__tab { background: linear-gradient(100deg, #0a5bd6, #35b8f5); }
.bpanel--features .bpanel__tab { background: linear-gradient(100deg, #063c91, #0a5bd6); }

/* 色付きの太い枠のパネル */
.bpanel__box { position: relative; border-radius: 18px; padding: 42px 22px 24px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px); box-shadow: 0 16px 34px rgba(6,60,145,.14); }
.bpanel--concept .bpanel__box { border: 4px solid #35b8f5; background: linear-gradient(180deg, rgba(232,246,255,.95), rgba(255,255,255,.95)); }
.bpanel--features .bpanel__box { border: 4px solid #0a5bd6; }
.bpanel__lead { margin: 0 0 16px; font-family: "Dela Gothic One", var(--font-ja); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--c-navy); }

/* Concept：ニュース風カード */
.bnews { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bnews__item { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  padding: 14px 18px 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(6,60,145,.14); }
.bnews__item::before { content: ""; position: absolute; left: -10px; top: -10px; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 34%, #35b8f5 36% 100%); box-shadow: 0 2px 6px rgba(6,60,145,.25); }
.bnews__tag { grid-column: 1 / -1; justify-self: start; padding: 1px 16px; border-radius: 999px; background: linear-gradient(90deg, #0a5bd6, #35b8f5);
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.bnews__face { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e8f5ff; color: var(--c-blue); }
.bnews__face svg { width: 30px; height: 30px; }
.bnews__item p { margin: 0; font-size: .98rem; color: var(--c-text); }
.bnews__item b { color: var(--c-blue); font-size: 1.08em; }
.banswer { position: relative; margin-top: 26px; padding: 22px 20px 18px; border-radius: 14px; text-align: center; color: #fff;
  background: linear-gradient(110deg, #0a5bd6, #1e8ef0 55%, #35b8f5); box-shadow: 0 10px 22px rgba(10,91,214,.3); overflow: hidden; }
.banswer::before { content: ""; position: absolute; left: 50%; top: -12px; width: 24px; height: 24px; transform: translateX(-50%) rotate(45deg); background: #0a5bd6; }
.banswer::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: hpillShine 4s ease-in-out infinite; }
.banswer__lead { margin: 0; font-weight: 800; opacity: .9; }
.banswer__main { margin: 2px 0 8px; font-family: "Dela Gothic One", var(--font-ja); font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.2; }
.banswer__main .hl { color: var(--c-yellow); }
.banswer__text { margin: 0; font-size: .9rem; line-height: 1.8; opacity: .95; }

/* Features：斜めに区切ったゲーム画面 */
.bstrip { display: flex; height: clamp(180px, 22vw, 260px); margin: -18px -18px 20px; border-radius: 12px; overflow: hidden; background: #0a5bd6; }
.bstrip figure { position: relative; flex: 1; margin: 0 -14px; overflow: hidden; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.bstrip figure:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.bstrip figure:last-child { margin-right: 0; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.bstrip img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.bstrip figure:hover img { transform: scale(1.08); }
.bstrip figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,60,160,.15), rgba(10,60,160,.0) 40%, rgba(6,40,100,.55)); }
.bstrip figcaption { position: absolute; z-index: 1; left: 20%; top: 10px; color: #fff; font-family: var(--font-en); font-style: italic; font-weight: 800;
  font-size: clamp(.9rem, 1.6vw, 1.3rem); text-shadow: 0 2px 6px rgba(6,40,100,.7); }
.bfeat { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bfeat li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px 16px 14px 14px;
  border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(6,60,145,.14); }
.bfeat img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(6,60,145,.25)); }
.bfeat__num { position: absolute; left: -8px; top: -10px; padding: 1px 12px; border-radius: 999px; background: linear-gradient(90deg, #063c91, #0a5bd6);
  color: #fff; font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: .8rem; box-shadow: 0 2px 6px rgba(6,60,145,.3); }
.bfeat h3 { margin: 0 0 4px; font-family: "Dela Gothic One", var(--font-ja); font-weight: 400; font-size: 1.05rem; color: var(--c-blue); }
.bfeat p { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--c-text); }
@media (max-width: 520px) {
  .bpanel__box { padding: 38px 14px 18px; }
  .bstrip { margin: -14px -10px 16px; }
  .bnews__item { padding: 12px 12px 12px 14px; }
}

/* ---------- こんな人におすすめ：斜めに並ぶ4枚（ウマ娘公式のContents風） ---------- */
.board__inner--single { grid-template-columns: 1fr !important; }
.bpanel--for .bpanel__tab { background: linear-gradient(100deg, #1e8ef0, #35b8f5); }
.bpanel--for .bpanel__box { border: 4px solid #1e8ef0; padding-top: 48px; }
.bfor__age { position: absolute; right: 18px; top: 12px; margin: 0; padding: 2px 14px; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: .78rem; font-weight: 800; }
.bfor { display: flex; height: clamp(300px, 30vw, 380px); margin: 0; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; background: #0a5bd6; }
.bfor__card { position: relative; flex: 1; margin: 0 -2.2%; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  transition: flex .5s cubic-bezier(.19,1,.22,1); }
.bfor__card:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.bfor__card:last-child { margin-right: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.bfor__card:hover { flex: 1.35; }
.bfor__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.bfor__card:hover img { transform: scale(1.06); }
.bfor__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,60,160,.35) 0%, rgba(10,60,160,.05) 35%, rgba(6,30,90,.85) 100%); }
.bfor__card:nth-child(2)::after { background: linear-gradient(180deg, rgba(30,142,240,.35) 0%, rgba(30,142,240,.05) 35%, rgba(6,40,110,.85) 100%); }
.bfor__body { position: absolute; z-index: 1; left: 16%; right: 16%; bottom: 18px; color: #fff; }
.bfor__card:first-child .bfor__body { left: 8%; }
.bfor__en { position: absolute; left: 16%; top: -9999px; }
.bfor__card .bfor__en { position: static; display: block; font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.5rem); line-height: 1; text-shadow: 0 2px 6px rgba(6,40,100,.7); }
.bfor__ja { display: inline-block; margin: 8px 0 6px; padding: 2px 12px; border-radius: 999px; background: #fff; color: var(--c-blue); font-weight: 900; font-size: .85rem; }
.bfor__body p { margin: 0; font-weight: 800; font-size: clamp(.8rem, 1.2vw, .95rem); line-height: 1.5; text-shadow: 0 1px 4px rgba(6,40,100,.8); }
@media (max-width: 767px) {
  .bfor { flex-direction: column; height: auto; gap: 6px; background: none; }
  .bfor__card, .bfor__card:first-child, .bfor__card:last-child { margin: 0; height: 130px; flex: none; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); border-radius: 10px; }
  .bfor__body, .bfor__card:first-child .bfor__body { left: 16px; right: 16px; bottom: 12px; }
  .bfor__card img { object-position: center 25%; }
}
.banswer__main .hl { background: none; color: #ffe066; padding: 0; text-shadow: 0 3px 0 #063c91, 0 0 14px rgba(255,224,102,.55); }
.bfor__card::after, .bfor__card:nth-child(2)::after { background: linear-gradient(180deg, rgba(10,60,160,.25) 0%, rgba(10,60,160,.15) 30%, rgba(6,30,90,.92) 68%, rgba(6,30,90,.96) 100%); }
.bfor__body p { font-size: clamp(.85rem, 1.25vw, 1rem); }
.topic-card__sub { display: block; margin-top: 8px; font-size: .85rem; font-weight: 800; color: var(--c-blue); }
.topic-card__sub::after { content: " ›"; }

/* =========================================================
   最新情報（ニュースサイト風）・ゲーム一覧
   ========================================================= */
.nhead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding: 6px 36px 8px 22px; width: fit-content; color: #fff;
  background: linear-gradient(100deg, #0a5bd6, #35b8f5); clip-path: polygon(10px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.nhead__en { font-family: var(--font-en); font-style: italic; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; }
.nhead__ja { font-weight: 900; font-size: .9rem; }
.newsroom .nhead:not(:first-child) { margin-top: 56px; }
.ngrid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ngrid { grid-template-columns: repeat(3, 1fr); } .ncard--lead { grid-column: 1 / -1; } }
.ncard a { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--c-border), 0 8px 18px rgba(6,60,145,.1); transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s; }
.ncard a:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--c-sky), 0 14px 26px rgba(6,60,145,.18); }
.ncard__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg-tint); }
.ncard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.ncard a:hover .ncard__thumb img { transform: scale(1.05); }
.ncard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; flex: 1; }
.ncard__meta { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-en); font-weight: 800; font-size: .85rem; color: var(--c-sky); }
.ncard__cat { padding: 1px 12px; border-radius: 999px; background: linear-gradient(90deg, #0a5bd6, #35b8f5); color: #fff; font-family: var(--font-ja); font-size: .72rem; letter-spacing: .1em; }
.ncard h3 { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--c-text); }
.ncard__more { margin-top: auto; align-self: flex-end; color: var(--c-blue); font-weight: 800; font-size: .82rem; }
.ncard__more::after { content: " »"; }
@media (min-width: 768px) {
  .ncard--lead a { flex-direction: row; }
  .ncard--lead .ncard__thumb { flex: 0 0 62%; aspect-ratio: 16 / 9; }
  .ncard--lead .ncard__body { justify-content: center; padding: 24px 28px; }
  .ncard--lead h3 { font-size: 1.5rem; }
}
.nlist { border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--c-border); padding: 4px 18px; }

.games__lead { margin: 0 0 28px; color: var(--c-text-sub); }
.glist { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.gcard { display: grid; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 3px var(--c-sky-light), 0 14px 30px rgba(6,60,145,.12); }
@media (min-width: 900px) { .gcard { grid-template-columns: 1.15fr 1fr; } }
.gcard__visual { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #0a5bd6, #35b8f5); }
.gcard__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.19,1,.22,1); }
a.gcard__visual:hover img { transform: scale(1.04); }
.gcard__badge { position: absolute; left: 14px; top: 14px; padding: 4px 14px; border-radius: 999px; background: var(--c-yellow); color: var(--c-navy); font-weight: 900; font-size: .8rem; box-shadow: 0 3px 0 var(--c-yellow-dark); }
.gcard__badge--soon { background: #fff; color: var(--c-blue); box-shadow: none; font-family: var(--font-en); letter-spacing: .12em; }
.gcard__q { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-family: var(--font-en); font-weight: 900; font-size: 6rem; }
.gcard__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; }
.gcard__genre { margin: 0; color: var(--c-sky); font-weight: 900; font-size: .85rem; }
.gcard__title { margin: 0; font-family: "Dela Gothic One", var(--font-ja); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-navy); }
.gcard__text { margin: 0; line-height: 1.8; }
.gcard__spec { margin: 0; display: grid; gap: 4px; font-size: .88rem; }
.gcard__spec div { display: grid; grid-template-columns: 4em 1fr; }
.gcard__spec dt { font-weight: 900; color: var(--c-blue); }
.gcard__spec dd { margin: 0; }
.gcard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gcard--soon { opacity: .9; }

/* ---------- 2026-10-21 スマホのキービジュアルもPCと同じ「ニニ＋桜」＋右にロゴ ---------- */
@media (max-width: 767px) {
  .kv__visual img { aspect-ratio: 1300 / 850; object-position: center; }
  .kv__logo { display: block; left: auto; right: 3%; bottom: 12%; width: 44%; transform: none; }
}
.gcard__badge { left: auto; right: 14px; }