:root {
  --ink: #1B2340;
  --accent: #D84F68;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #5073B1 0%, #5073B1 45%, #A59FCE 75%, #EDC2CC 100%);
  overflow-x: hidden;
}
h1, h2, h3, .pop {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
}
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }

/* ===== NAV ===== */
header {
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:center;
  padding: 18px 6vw;
  background: rgba(27,35,64,0.28);
  backdrop-filter: blur(8px);
}
nav ul { list-style:none; display:flex; gap: clamp(14px, 3vw, 34px); }
nav a {
  color:#fff; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700;
  font-size: 0.88rem; letter-spacing: 0.02em;
  opacity: 0.85;
}
nav a:hover { opacity: 1; }
nav a.active { opacity: 1; border-bottom: 1.5px solid #fff; padding-bottom:2px; }

/* ===== SECTION HEAD (shared) ===== */
.section-head { text-align:center; padding: 0 6vw 8vh; }
.section-head .bar {
  width: 30px; height: 3px; background: var(--accent); margin: 0 auto 16px;
  border-radius: 2px;
}
.section-head .eyebrow {
  display:block; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700;
  font-size:0.85rem; letter-spacing:0.14em; opacity:0.85; margin-bottom:14px;
}
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }

.more {
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.9rem;
  border-bottom: 1.5px solid #fff; padding-bottom:2px; display:inline-block;
}

/* ===== generic page hero (page title banners) ===== */
.page-hero {
  padding: 22vh 6vw 8vh; text-align:center;
}
.page-hero .logo-mark { width: min(60vw, 260px); margin: 0 auto 22px; }
.page-hero .tag {
  font-family:'M PLUS Rounded 1c',sans-serif; font-size:0.75rem; opacity:0.6;
  margin-bottom: 18px; letter-spacing:0.04em;
}
.page-hero p.copy {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem); max-width: 640px; margin: 0 auto;
  line-height: 1.8; opacity: 0.95;
}

/* ===== HERO (TOP page merged hero+concept) ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background-size: cover; background-position: center;
  isolation:isolate;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,25,55,0.45) 0%, rgba(20,25,55,0.3) 45%, rgba(20,25,55,0.55) 100%);
  z-index:-1;
}
.hero-inner { padding: 0 6vw; }
.hero-inner .logo-mark { width: min(64vw, 320px); margin: 0 auto 26px; }
.hero-inner .tagline {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  margin-bottom: 30px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
@media (max-width: 700px) {
  .hero.photo-hero { min-height: unset; aspect-ratio: 1400 / 933; padding-top: 90px; }
}

/* ===== GAMES (teaser rows, used on TOP) ===== */
.games { padding: 12vh 0 4vh; }
.game-row {
  display:flex; align-items:center; gap: 6vw;
  max-width: 1100px; margin: 0 auto;
  padding: 7vh 6vw;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.games .game-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.25); }
.game-row.reverse { flex-direction: row-reverse; }
.game-visual { flex: 1 1 42%; display:flex; align-items:center; justify-content:center; }
.game-visual img {
  width: 100%; max-width: 320px; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.game-visual .placeholder {
  width: 100%; max-width: 320px; aspect-ratio: 4/5;
  border: 1.5px dashed rgba(255,255,255,0.5); border-radius: 10px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'M PLUS Rounded 1c',sans-serif; opacity:0.85; padding: 20px;
  flex-direction: column; gap: 14px;
}
.game-visual .placeholder img { width: 60%; max-width:180px; }
.game-visual .placeholder span { opacity:0.8; font-size:0.8rem; letter-spacing:0.08em; }
.game-info { flex:1 1 58%; }
.game-info .title-logo { width: min(52vw, 220px); margin-bottom: 18px; }
.game-info .tag {
  font-family:'M PLUS Rounded 1c',sans-serif;
  font-size:0.72rem; font-weight:500; opacity:0.55; margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.game-info p.copy { font-size:1rem; line-height:1.9; max-width: 44ch; opacity:0.92; margin-bottom: 20px; }

/* ===== SCENE ===== */
.scene { padding: 12vh 0; }
.strip {
  display:flex; gap: 22px; padding: 0 6vw 2vh; overflow-x:auto;
  scrollbar-width: none; max-width: 1100px; margin: 0 auto;
}
.strip::-webkit-scrollbar { display:none; }
.strip .frame {
  flex: 0 0 auto; width: min(60vw, 260px); aspect-ratio: 4/5;
  border: 1.5px dashed rgba(255,255,255,0.45); border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'M PLUS Rounded 1c',sans-serif; font-size:0.8rem; opacity:0.7;
}

/* ===== JOURNAL ===== */
.journal { padding: 12vh 0; }
.posts { max-width: 760px; margin: 0 auto; padding: 0 6vw; display:flex; flex-direction:column; }
.post { display:flex; justify-content:space-between; gap: 20px; padding: 4vh 0; border-top: 1px solid rgba(255,255,255,0.25); }
.posts .post:last-child { border-bottom: 1px solid rgba(255,255,255,0.25); }
.post .date { font-family:'M PLUS Rounded 1c',sans-serif; font-size:0.78rem; opacity:0.7; flex: 0 0 90px; }
.post .body h4 { font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:1.08rem; margin-bottom:8px; }
.post .body p { font-size:0.92rem; opacity:0.85; line-height:1.8; max-width:48ch; }

.post h4 a { color:#fff; }
.post h4 a:hover { text-decoration: underline; }
.post .body h4 { margin:0; text-indent:0; }
.post .body h4 a { display:inline-block; margin-left: -0.05em; }

/* ===== ARTICLE (JOURNAL detail page) ===== */
.article { max-width: 700px; margin: 0 auto; padding: 22vh 6vw 12vh; }
.article .back { display:inline-block; margin-bottom: 6vh; opacity:0.7; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.85rem; }
.article .back:hover { opacity:1; }
.article .date { font-family:'M PLUS Rounded 1c',sans-serif; font-size:0.82rem; opacity:0.65; margin-bottom: 14px; }
.article h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height:1.5; margin-bottom: 5vh; }
.article .photo-frame {
  aspect-ratio: 16/9; border: 1.5px dashed rgba(255,255,255,0.45); border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'M PLUS Rounded 1c',sans-serif; font-size:0.85rem; opacity:0.6;
  margin-bottom: 6vh;
}
.article .body-text { font-size:1rem; line-height:2.1; opacity:0.95; margin-bottom: 5vh; white-space:pre-line; }
.article .ext-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.9rem;
  border-bottom: 1.5px solid #fff; padding-bottom:2px;
}

/* ===== SHOP / buttons ===== */
.shop { padding: 12vh 0 10vh; text-align:center; }
.shop-buttons { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn-cutout {
  display:inline-block;
  padding: 14px 40px; border-radius: 50px;
  background:#fff;
  transition: transform .2s ease;
}
.btn-cutout:hover { transform: translateY(-2px); }
.btn-cutout .cut-label {
  display:block;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.98rem;
  color: #7A96CC;
  white-space: nowrap;
}

/* ===== TABS (GAMES detail page) ===== */
.tabs-nav {
  display:flex; justify-content:center; gap: 10px; margin: 0 auto 6vh;
  max-width: 480px; padding: 0 6vw;
}
.tab-btn {
  flex:1; padding: 12px 10px; text-align:center; border-radius: 40px;
  border: 1.5px solid rgba(255,255,255,0.5);
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.85rem;
  cursor:pointer; background:transparent; color:#fff; opacity:0.7;
  transition: all .2s ease;
}
.tab-btn.active { background:#fff; color: var(--ink); opacity:1; border-color:#fff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.tab-visual { text-align:center; margin-bottom: 6vh; }
.tab-visual img {
  max-width: 380px; width: 80%; margin: 0 auto; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.card-grid {
  display:flex; flex-wrap:wrap; justify-content:center; gap: 16px;
  max-width: 900px; margin: 0 auto; padding: 0 6vw;
}
.card-grid img {
  width: 120px; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* ===== STORY (ABOUT page) ===== */
.story { padding: 6vh 0 4vh; }
.story-block {
  max-width: 640px; margin: 0 auto; padding: 8vh 6vw;
  border-top: 1px solid rgba(255,255,255,0.25);
  text-align: center;
}
.story .story-block:first-child { border-top: none; }
.story-block .label {
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:0.16em; opacity:0.6; margin-bottom: 18px;
}
.story-block .quote {
  font-size: clamp(1.3rem, 3.2vw, 1.7rem); line-height:1.7; margin-bottom: 30px;
}
.story-block p.body {
  font-size:0.98rem; line-height:2; opacity:0.92; white-space: pre-line;
}

/* ===== TEAM (ABOUT page) ===== */
.team { padding: 10vh 0 12vh; }
.team-grid {
  display:flex; justify-content:center; gap: 8vw; flex-wrap:wrap;
  max-width: 700px; margin: 0 auto; padding: 0 6vw;
}
.member-card { text-align:center; max-width:220px; }
.avatar-placeholder {
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px; font-family:'M PLUS Rounded 1c',sans-serif;
  font-size:0.75rem; opacity:0.6;
}
.member-card h4 { font-size:1.15rem; margin-bottom: 8px; }
.member-card .role { font-size:0.85rem; opacity:0.75; line-height:1.7; margin-bottom: 16px; }
.member-card .x-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.8rem;
  border: 1.5px solid rgba(255,255,255,0.5); border-radius: 30px; padding: 8px 18px;
}
.member-card .x-link:hover { background:#fff; color: var(--ink); border-color:#fff; }

/* ===== STATS (price / set contents) ===== */
.stats { padding: 10vh 0; }
.stats-row {
  display:flex; justify-content:center; gap: 10vw; flex-wrap:wrap;
  max-width: 700px; margin: 0 auto; text-align:center;
}
.stats-row .stat .num { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 6px; }
.stats-row .stat .num.small { font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight:700; max-width: 26ch; }
.stats-row .stat .label { font-size:0.82rem; opacity:0.75; }

/* ===== RULES ===== */
.rules { padding: 10vh 0; }
.rule-list { max-width: 700px; margin: 0 auto; padding: 0 6vw; display:flex; flex-direction:column; gap: 5vh; }
.rule-step { display:flex; gap: 24px; align-items:flex-start; }
.rule-step .n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.9rem;
}
.rule-step .t h4 { font-family:'M PLUS Rounded 1c',sans-serif; font-size:1.05rem; margin-bottom:8px; }
.rule-step .t ul { padding-left: 1.1em; opacity:0.92; line-height:1.9; font-size:0.96rem; }
.rule-step .t p { opacity:0.92; line-height:1.9; font-size:0.96rem; }

.pdf-links {
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  margin-top: 7vh; padding: 0 6vw;
}
.pdf-link {
  display:flex; align-items:center; gap:10px;
  border: 1.5px solid rgba(255,255,255,0.5); border-radius: 40px;
  padding: 12px 26px;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.85rem;
  transition: all .2s ease;
}
.pdf-link:hover { background:#fff; color:var(--ink); border-color:#fff; }
.pdf-note {
  text-align:center; font-size:0.82rem; opacity:0.65; margin-top:16px;
}

.rule-note {
  max-width: 700px; margin: 6vh auto 0; padding: 0 6vw;
}
.rule-note .box {
  border: 1.5px solid rgba(255,255,255,0.4); border-radius: 12px;
  padding: 3vh 5vw; font-size:0.94rem; line-height:1.9; opacity:0.95;
}

/* ===== FOOTER / SNS / CONTACT ===== */
footer { flex-wrap: wrap; }
.sns-links { display:flex; gap:16px;  }
.sns-links a {
  width:36px; height:36px; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size: 0.95rem;
}
.sns-links a:hover { background:#fff; color: var(--ink); border-color:#fff; }

/* ===== CONTACT FORM ===== */
.contact-form { max-width: 560px; margin: 0 auto; padding: 0 6vw; display:flex; flex-direction:column; gap: 22px; }
.contact-form label {
  display:block; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700;
  font-size:0.85rem; margin-bottom:8px; opacity:0.85;
}
.contact-form input, .contact-form textarea {
  width:100%; padding: 14px 16px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08); color:#fff; font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:0.95rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form button.submit {
  align-self:center; margin-top:10px;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:700; font-size:0.98rem;
  padding: 14px 46px; border-radius: 50px; border:none; cursor:pointer;
  background:#fff; color: var(--ink);
  transition: transform .2s ease;
}
.contact-form button.submit:hover { transform: translateY(-2px); }

footer {
  padding: 6vh 6vw 5vh; border-top: 1px solid rgba(255,255,255,0.2);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
footer .logo-mark { height: 22px; }
footer .copy { font-size:0.75rem; opacity:0.6; }
footer nav ul { display:flex; gap:20px; }
footer nav a { font-size:0.82rem; }

@media (max-width: 760px) {
  .game-row, .game-row.reverse { flex-direction: column; }
}

/* SNS icons / footer */
.sns-links svg{width:16px;height:16px;display:block}
footer .copy{flex-basis:100%;text-align:center}
@media(max-width:760px){footer{flex-direction:column;text-align:center}footer nav ul{flex-wrap:wrap;justify-content:center;gap:14px 18px}}
/* Character intro */
.character{max-width:760px;margin:5vh auto 0}
.character summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:0 auto;padding:10px 26px;border:1.5px solid rgba(255,255,255,0.6);border-radius:999px;font-weight:700;font-size:0.9rem;letter-spacing:0.08em}
.character summary::-webkit-details-marker{display:none}
.character summary:hover{background:rgba(255,255,255,0.15)}
.character .chev{width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.character[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.character-body{display:flex;gap:32px;align-items:center;margin-top:28px;animation:charFade .4s ease}
.character-art{flex:0 0 220px;background:#fff;border-radius:20px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:220px}
.character-art img{width:100%;height:auto;display:block}
.character-art.unknown span{font-size:6rem;font-weight:800;color:#5073B1;line-height:1}
.character-info{flex:1}
.character-info .label{font-size:0.78rem;letter-spacing:0.12em;opacity:0.75;margin-bottom:6px}
.character-info h4{font-size:1.6rem;margin:0 0 12px}
.character-info ul{list-style:none;padding:0;margin:0}
.character-info li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.25)}
.character-info p{line-height:1.9;margin:0}
@keyframes charFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:700px){.character-body{flex-direction:column;gap:20px}.character-art{flex:none;width:70%}.character-info{text-align:center;width:100%}}
@media(max-width:700px){.character{padding:0 6vw}.character-info{width:auto}}

/* Photos (SCENE / gallery / avatar) */
.strip .photo{flex:0 0 auto;width:min(72vw,300px);aspect-ratio:4/5;border-radius:8px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,0.25)}
.strip .photo img{width:100%;height:100%;object-fit:cover;display:block}
.game-visual>img{max-width:420px}
.gallery-sec{padding:2vh 6vw 6vh}
.gallery{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gallery img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,0.25)}
.gallery img.wide{grid-column:1/-1}
@media(max-width:700px){.gallery,.gallery.two{grid-template-columns:1fr}}
.avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;border:2px solid rgba(255,255,255,0.6)}

.rule-note{max-width:640px;margin:4vh auto 0;padding:0 6vw;text-align:center;font-size:0.85rem;line-height:1.9;opacity:0.8}

.article .article-photo{width:100%;height:auto;display:block;border-radius:10px;margin-bottom:5vh;box-shadow:0 14px 30px rgba(0,0,0,0.25)}

/* ===== NAV dropdown (GAMES) ===== */
nav ul li.has-sub{position:relative}
nav ul.sub{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);flex-direction:column;gap:2px;padding-top:14px;white-space:nowrap;min-width:140px}
nav ul.sub::before{content:'';position:absolute;top:14px;left:0;right:0;bottom:0;background:rgba(27,35,64,0.88);backdrop-filter:blur(8px);border-radius:10px;z-index:-1}
nav ul.sub li{padding:0}
nav ul.sub a{display:block;padding:9px 20px;text-align:center}
@media (hover:hover){nav ul li.has-sub:hover>ul.sub,nav ul li.has-sub:focus-within>ul.sub{display:flex}}
/* game switch */
.game-switch{display:inline-flex;margin-top:28px;border:1.5px solid rgba(255,255,255,0.55);border-radius:999px;overflow:hidden;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:0.82rem}
.game-switch a{padding:9px 22px;opacity:0.85}
.game-switch a.on{background:#fff;color:var(--ink);opacity:1}
/* card strip (swipe) */
.card-grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:1000px;padding:0 6vw 14px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card-grid::-webkit-scrollbar{display:none}
.card-grid img{flex:0 0 auto;width:clamp(120px,34vw,150px);scroll-snap-align:center}
.card-grid>img:first-child{margin-left:auto}
.card-grid>img:last-child{margin-right:auto}
/* photo strip (swipe) */
.photo-sec{padding:6vh 0 8vh}
.photo-strip{display:flex;gap:20px;overflow-x:auto;padding:0 6vw 2vh;max-width:1100px;margin:0 auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.photo-strip::-webkit-scrollbar{display:none}
.photo-strip .photo{flex:0 0 auto;width:min(82vw,520px);aspect-ratio:3/2;border-radius:10px;overflow:hidden;scroll-snap-align:center;box-shadow:0 14px 30px rgba(0,0,0,0.25)}
.photo-strip .photo img{width:100%;height:100%;object-fit:cover}
/* rule extras */
.rule-step .note{font-size:0.88rem;opacity:0.85;margin-top:8px;line-height:1.8}
.rule-extra{max-width:640px;margin:2vh auto 0;padding:0 6vw;display:flex;flex-direction:column;gap:16px}
.rule-box{border:1.5px solid rgba(255,255,255,0.55);border-radius:14px;padding:20px 22px;background:rgba(255,255,255,0.08)}
.rule-box .box-tag{display:inline-block;background:#fff;color:#7A96CC;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;font-size:0.82rem;padding:4px 14px;border-radius:999px;margin-bottom:12px}
.rule-box ul{list-style:none;padding:0;margin:0}
.rule-box li{line-height:1.9}
.rule-box p{line-height:1.9;margin:0}
/* ABOUT: line breaks / photos */
.story-block .quote,.story-block p.body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.story-photo{width:100%;max-width:520px;aspect-ratio:16/9;margin:0 auto 5vh;border:1.5px dashed rgba(255,255,255,0.45);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'M PLUS Rounded 1c',sans-serif;font-size:0.85rem;opacity:0.6}
@media(max-width:700px){.story-block p.body{font-size:0.94rem;line-height:1.95}}

/* character: circle icon */
.character-art{flex:0 0 200px;width:200px;height:200px;min-height:0;padding:0;background:none;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,0.6);box-shadow:0 12px 26px rgba(0,0,0,0.22)}
.character-art img{width:100%;height:100%;object-fit:cover}
.character-info .nick{font-size:0.9rem;opacity:0.85;margin:-6px 0 12px;line-height:1.6}
@media(max-width:700px){.character-art{flex:none;width:min(56vw,200px);height:auto;aspect-ratio:1/1;margin:0 auto}}
/* rule callout */
.rule-step .callout{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;background:rgba(244,193,50,0.16);border-left:4px solid #F4C132;border-radius:8px;font-weight:700;font-size:0.92rem;line-height:1.8;opacity:1}
.rule-step .callout::before{content:'!';flex:0 0 22px;width:22px;height:22px;margin-top:3px;border-radius:50%;background:#F4C132;color:#1B2340;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;font-size:0.9rem;line-height:1;display:flex;align-items:center;justify-content:center}
/* callout: pink highlight */
.rule-step .callout{background:rgba(216,79,104,0.22);border-left-color:#D84F68}
.rule-step .callout::before{background:#D84F68;color:#fff}
/* mobile: TOP game text alignment + header fit */
@media(max-width:760px){.game-row,.game-row.reverse{align-items:stretch}.game-info{width:100%;flex:none}}
@media(max-width:480px){header{padding:14px 3vw}nav ul{gap:12px}nav a{font-size:0.78rem}}
@media(max-width:480px){.shop-buttons{padding:0 6vw;gap:12px}.btn-cutout{min-width:0;padding-left:20px;padding-right:20px}}

/* ===== ABOUT (renewed) ===== */
.page-hero p.copy{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.about-sec{padding:6vh 0 4vh}
.about-lead-photo,.about-photo-wrap{max-width:640px;margin:0 auto;padding:0 6vw}
.about-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,0.25);display:block}
.about-photo-wrap{margin-top:5vh;margin-bottom:5vh}
.about-text{max-width:640px;margin:0 auto;padding:0 6vw;text-align:center;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.about-text p{font-size:1rem;line-height:2.05;opacity:0.94;margin-bottom:1.4em}
.about-text p:last-child{margin-bottom:0}
.style-quote{font-size:clamp(1.3rem,3.4vw,1.8rem);line-height:1.7;margin:6px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.about-sec.style .section-head{padding-bottom:5vh}
.timeline{list-style:none;max-width:600px;margin:0 auto;padding:0 6vw;position:relative;text-align:left}
.timeline::before{content:'';position:absolute;left:calc(6vw + 5px);top:10px;bottom:10px;width:2px;background:rgba(255,255,255,0.4)}
.timeline li{position:relative;display:grid;grid-template-columns:92px 1fr;gap:4px 16px;padding:0 0 26px 30px;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,0.18)}
.timeline li.upcoming::before{background:transparent;border:2px solid #fff;box-sizing:border-box}
.timeline .when{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;line-height:1.5}
.timeline .y{font-size:1.15rem;margin-right:6px}
.timeline .p{font-size:0.82rem;opacity:0.8}
.timeline p{font-size:0.98rem;line-height:1.85;opacity:0.95;padding-top:2px}
.timeline li.upcoming p{opacity:0.85}
@media(max-width:560px){.timeline li{grid-template-columns:1fr;gap:0}.timeline p{padding-top:0}}

.about-photo-wrap.first{margin-top:0}
.about-sec.style .section-head{padding-bottom:0}

/* ===== TOP: 100% BURST hero ===== */
html.burst-intro,html.burst-intro body{overflow:hidden}
header{transition:opacity .7s ease}
html.burst-intro header{opacity:0;pointer-events:none}
.hero.burst-hero{min-height:100vh;min-height:100svh;aspect-ratio:auto;padding:0;overflow:hidden;background:none;--cw:min(44vw,180px)}
.burst-hero::before{background:radial-gradient(ellipse at 50% 46%,rgba(24,30,62,.88) 0%,rgba(24,30,62,.62) 55%,rgba(24,30,62,.35) 100%);opacity:0;transition:opacity 1.2s ease}
.burst-hero.done::before{opacity:1}
.burst-hero .hero-inner{position:relative;z-index:3;transition:opacity .7s ease,transform .9s cubic-bezier(.2,1.25,.3,1)}
.burst-hero.is-intro .hero-inner{opacity:0;transform:translateY(18px) scale(.92);pointer-events:none}
.burst-hero .hero-inner .logo-mark{filter:drop-shadow(0 6px 22px rgba(0,0,0,.45));margin-bottom:22px}
.burst-hero .hero-inner .tagline{margin-bottom:0;text-shadow:0 2px 6px rgba(0,0,0,.7),0 2px 22px rgba(0,0,0,.6);font-weight:700}
.stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.meter{position:absolute;left:0;right:0;top:13%;text-align:center;transition:opacity .5s}
.meter-label{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.3em;opacity:.85}
.pct{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;line-height:1;font-size:clamp(72px,24vw,150px);margin:6px 0 12px;text-shadow:0 6px 24px rgba(0,0,0,.3)}
.pct small{font-size:.42em;margin-left:.06em}
.bar{width:min(62vw,360px);height:10px;border-radius:99px;background:rgba(255,255,255,.25);margin:0 auto;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .45s cubic-bezier(.2,.9,.3,1),background .3s}
.bar i.warn{background:#F4C132}.bar i.over{background:#D84F68}
.meter.over .pct{color:#ffd0d8}
.burst-hero:not(.is-intro) .meter{opacity:0}
.flash{position:absolute;inset:0;background:#fff;opacity:0}
.burst-text{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;font-size:clamp(64px,23vw,170px);color:#fff;text-shadow:5px 5px 0 #D84F68,-4px 4px 0 #D84F68,0 12px 34px rgba(0,0,0,.45);opacity:0;transform:scale(.3) rotate(-8deg)}
.cards{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.2s ease}
.burst-hero.done .cards{opacity:.34}
.cards .c{position:absolute;left:50%;top:54%;width:var(--cw);margin:calc(var(--cw)*-.7) 0 0 calc(var(--cw)/-2);opacity:0;will-change:transform}
.cards .c img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));-webkit-user-drag:none;user-select:none}
.burst-hero.done .cards .c img{animation:floaty 4.2s ease-in-out infinite}
.burst-hero.done .cards .c:nth-child(2n) img{animation-duration:5s;animation-delay:-1.2s}
.burst-hero.done .cards .c:nth-child(3n) img{animation-duration:3.6s;animation-delay:-2.1s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);text-align:center;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.28em;opacity:0;transition:opacity .8s 1s;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.scroll-cue::after{content:'';display:block;width:2px;height:34px;margin:8px auto 0;background:linear-gradient(#fff,rgba(255,255,255,0));animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.burst-hero.done .scroll-cue{opacity:1}
.part{position:absolute;z-index:5;pointer-events:none;border-radius:2px}
.burst-hero.shake{animation:shake .6s}
@keyframes shake{0%,100%{transform:translate(0)}15%{transform:translate(-12px,6px)}30%{transform:translate(10px,-8px)}45%{transform:translate(-8px,-5px)}60%{transform:translate(7px,6px)}80%{transform:translate(-4px,3px)}}
@media (prefers-reduced-motion:reduce){.burst-hero.is-intro .hero-inner{opacity:1;transform:none;pointer-events:auto}.stage{display:none}.burst-hero.done .cards .c img,.scroll-cue::after{animation:none}}
@media(min-width:900px){.hero.burst-hero{--cw:190px}}

.replay{position:absolute;z-index:4;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .8s 1.2s,background .2s;pointer-events:none;-webkit-tap-highlight-color:transparent}
.burst-hero.done .replay{opacity:.55;pointer-events:auto}
.burst-hero.done .replay:hover{opacity:1;background:rgba(255,255,255,.2)}
/* 背景: 下から紫〜ピンクが立ち上がる */
.rise{position:absolute;inset:0;z-index:0;pointer-events:none;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity 1.2s ease;background:linear-gradient(0deg,#EE86AA 0%,#CF7FC0 24%,#A98ED6 58%,rgba(150,140,214,.6) 82%,rgba(150,140,214,0) 100%)}
.burst-hero.done .rise{opacity:0}
/* GAMES: スマホのみ、元レイアウトのまま縦幅だけ軽く圧縮 */
@media(max-width:760px){
  .games{padding:66px 0 12px}
  .games .section-head{padding-bottom:4vh}
  .games .game-row{padding:4.5vh 6vw}
  .games .game-info .title-logo{margin-bottom:14px}
  .games .game-info .tag{margin-bottom:12px}
  .games .game-info p.copy{line-height:1.8;margin-bottom:16px}
}
/* 価格・内容物: ラベルを上に揃える */
.stats-row{align-items:flex-start}
.stats-row .stat{display:flex;flex-direction:column-reverse;align-items:center;gap:8px}
.stats-row .stat .num{margin-bottom:0}
.stats-row .stat .num.small{line-height:1.5}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}