:root {
  --bg-0: #1a0d24;
  --bg-1: #291238;
  --bg-2: #3b1a4f;
  --ink: #fff9ff;
  --muted: #e1d5ef;
  --line: rgba(255,255,255,0.18);
  --glass: rgba(34, 18, 52, 0.62);
  --glass-2: rgba(41, 21, 61, 0.82);
  --cyan: #7aeaff;
  --blue: #6a9aff;
  --pink: #ff6fce;
  --gold: #ffd87d;
  --rose: #ffb2d7;
  --shadow: 0 24px 80px rgba(21, 8, 30, 0.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 111, 206, 0.16), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(122, 234, 255, 0.14), transparent 28%),
    radial-gradient(circle at 50% 34%, rgba(255, 216, 125, 0.08), transparent 30%),
    linear-gradient(180deg, #23102f 0%, #170a23 38%, #28113b 70%, #14091e 100%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .14;
  background-image: radial-gradient(rgba(255,255,255,.22) .55px, transparent .55px);
  background-size: 15px 15px;
}
.utility-bar {
  position: sticky; top: 0; z-index: 30; background: rgba(31, 16, 43, .68); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.10);
}
.utility-inner, .hero-inner, .section-inner, .footer-inner {
  width: min(1680px, calc(100% - 28px)); margin: 0 auto;
}
.utility-inner {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.utility-brand { font-size: 13px; letter-spacing: .16em; color: rgba(255,255,255,.76); text-transform: uppercase; }
.utility-links { display: flex; gap: 18px; color: var(--muted); font-size: 13px; }
.utility-r18 { margin-left: 18px; margin-right: auto; min-height: 30px; padding: 0 16px; font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
.eyebrow {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--gold); font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
}
.hero {
  position: relative; min-height: 860px; overflow: hidden; background:
    radial-gradient(circle at 58% 36%, rgba(122, 234, 255, .16), transparent 24%),
    radial-gradient(circle at 38% 48%, rgba(255, 111, 206, .18), transparent 26%),
    linear-gradient(180deg, rgba(42,18,56,.54), rgba(26,10,37,.78));
}
.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-bg {
  background-repeat: no-repeat; background-size: cover; opacity: .4; filter: blur(0px) saturate(1.15);
}
.hero-bg-a {
  background-image: url('./assets/hero-card-b.png?v=20260827h'); background-position: left center; transform: scale(1.55) translateX(-14%);
}
.hero-bg-b {
  background-image: url('./assets/hero-card-c.png?v=20260827h'); background-position: right center; transform: scale(1.42) translateX(16%); mix-blend-mode: screen; opacity: .22;
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(32,14,44,.82) 0%, rgba(39,18,55,.64) 28%, rgba(55,27,72,.34) 54%, rgba(29,13,40,.64) 100%),
    radial-gradient(circle at 68% 50%, rgba(255,111,206,.18), transparent 24%),
    radial-gradient(circle at 58% 46%, rgba(122,234,255,.12), transparent 22%);
}
.hero-inner {
  position: relative; z-index: 1; min-height: 560px; display: grid; grid-template-columns: .92fr 1.08fr; grid-template-areas: "brand brand" "copy visual"; align-items: start; gap: 10px 34px; padding: 16px 0 10px;
}
.hero-brand { grid-area: brand; display: flex; flex-direction: column; align-items: flex-start; justify-self: start; width: min(100%, 1080px); text-align: left; gap: 0; margin: 0 0 4px; }
.hero-copy { grid-area: copy; padding-left: 0; max-width: 640px; align-self: start; }
.hero-logo { display: block; width: min(100%, 300px); margin: 0 0 0 54px; filter: drop-shadow(0 14px 26px rgba(15, 61, 196, .25)); }
.hero-copy h2 {
  max-width: none; margin: 0 0 10px; font-family: "Noto Serif JP", serif; font-size: clamp(21px, 2.3vw, 33px); line-height: 1.15; letter-spacing: 0; white-space: nowrap;
}
.hero-lead {
  max-width: 630px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; text-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.hero-pills, .hero-actions, .footer-links, .age-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hero-pills { margin-top: 10px; gap: 14px; max-width: 630px; }
.hero-pills span, .hero-meta > div, .reward-card, .allure-panel, .flow-card, .dmm-shell, .age-card, .modal-card {
  border: 1px solid var(--line); background: var(--glass); box-shadow: var(--shadow);
}
.hero-pills span { padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #ece5ff; }
.button {
  border: 0; min-height: 46px; padding: 0 18px; border-radius: 999px; transition: transform .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled, .button.is-disabled { opacity: .52; cursor: not-allowed; filter: saturate(.55); box-shadow: none; transform: none; pointer-events: none; }
.button:disabled:hover, .button.is-disabled:hover { transform: none; }
.button-primary { background: linear-gradient(90deg, var(--gold), #ff92d3 55%, #8c68ff); color: #16091f; font-weight: 900; }
.button-ghost { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid rgba(255,255,255,.16); }
.button-secondary { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid rgba(255,255,255,.16); }
.hero-actions { margin-top: 14px; gap: 12px; }
.hero-meta { margin-top: 14px; max-width: 980px; }
.hero-meta > div { min-width: 0; padding: 12px 14px 12px; border-radius: 16px; backdrop-filter: blur(10px); }
.hero-meta span { display: block; margin-bottom: 7px; color: #a8a1c9; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta strong { font-size: 16px; }
.hero-visual {
  grid-area: visual; position: relative; min-height: 432px; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: 34px 136px 136px 86px 22px; gap: 0; align-items: stretch; padding: 8px 8px 0 0; margin-top: -2px; overflow: visible;
}
.visual-glow {
  position: absolute; inset: 6% 3% 8% 5%; border-radius: 999px; background: radial-gradient(circle, rgba(255,85,199,.26), rgba(87,136,255,.14) 42%, transparent 72%); filter: blur(44px); pointer-events: none;
}
.hero-card {
  position: relative; display: block; width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center top;
  border-radius: 28px; box-shadow: 0 24px 42px rgba(8, 5, 16, .42); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.03);
}
.card-a { grid-column: 1 / span 4; grid-row: 2 / span 3; z-index: 2; transform: rotate(-7deg) translate(8px, 10px); clip-path: polygon(0 8%, 12% 0, 100% 0, 100% 92%, 88% 100%, 0 100%); object-position: center 22%; opacity: .98; }
.card-b { grid-column: 4 / span 5; grid-row: 1 / span 4; z-index: 5; transform: rotate(-3deg) translateY(0); clip-path: polygon(0 10%, 11% 0, 100% 0, 100% 90%, 90% 100%, 0 100%); object-position: center 19%; }
.card-c { grid-column: 8 / span 4; grid-row: 3 / span 2; z-index: 6; transform: rotate(4deg) translate(-8px, -8px); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 10% 100%, 0 88%); object-position: center 16%; }
.card-d { grid-column: 10 / span 5; grid-row: 1 / span 4; z-index: 4; transform: rotate(7deg) translate(-10px, 6px); clip-path: polygon(0 8%, 10% 0, 100% 0, 100% 92%, 90% 100%, 0 100%); object-position: center 14%; }
.hotlove-stamp {
  position: absolute; left: 50%; bottom: 12px; z-index: 6; width: clamp(88px, 9vw, 138px); border-radius: 24px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 34px rgba(0,0,0,.4); transform: translateX(-50%) rotate(-4deg);
}
.section {
  position: relative; overflow: hidden; padding: 74px 0 40px; background: linear-gradient(180deg, rgba(30,12,43,.78), rgba(20,8,29,.88));
}
.section-inner { position: relative; z-index: 2; }
.section-head { position: relative; z-index: 2; max-width: 980px; margin-bottom: 22px; }
.section-head.compact { max-width: 760px; }
.section-head h3 {
  margin: 16px 0 0; white-space: pre-line; font-family: "Noto Serif JP", serif; font-size: clamp(32px, 4.5vw, 62px); line-height: 1.12; text-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.section-bg {
  position: absolute; top: 0; bottom: 0; width: min(30vw, 520px); opacity: .16; background-repeat: no-repeat; background-size: cover; filter: blur(10px) saturate(1.05);
}
.section-bg-left { left: 0; background-position: center left; }
.section-bg-right { right: 0; background-position: center right; }
.faint { opacity: .10; }
.bg-card-a { background-image: url('./assets/hero-card-a.png?v=20260827h'); }
.bg-card-b { background-image: url('./assets/hero-card-b.png?v=20260827h'); }
.bg-card-c { background-image: url('./assets/hero-card-c.png?v=20260827h'); }
.bg-card-d { background-image: url('./assets/hero-card-d.png?v=20260827h'); }
.reward-section::before, .allure-section::before, .flow-section::before, .dmm-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.reward-section { background: radial-gradient(circle at 18% 40%, rgba(255, 178, 215, .08), transparent 22%), radial-gradient(circle at 86% 54%, rgba(122, 234, 255, .08), transparent 24%), linear-gradient(180deg, rgba(38,16,51,.80), rgba(24,10,34,.90)); }
.allure-section { background: radial-gradient(circle at 22% 56%, rgba(122, 234, 255, .10), transparent 22%), radial-gradient(circle at 80% 38%, rgba(255, 111, 206, .10), transparent 24%), linear-gradient(180deg, rgba(34,13,47,.82), rgba(22,9,31,.92)); }
.flow-section { background: radial-gradient(circle at 26% 26%, rgba(255, 216, 125, .08), transparent 22%), radial-gradient(circle at 74% 62%, rgba(122, 234, 255, .08), transparent 24%), linear-gradient(180deg, rgba(39,18,52,.84), rgba(22,10,32,.92)); }
.dmm-section { background: radial-gradient(circle at 80% 50%, rgba(255, 111, 206, .06), transparent 24%), linear-gradient(180deg, rgba(35,15,46,.86), rgba(23,10,31,.94)); }
.reward-track {
  position: relative; display: flex; align-items: flex-end; gap: 14px; padding: 18px 8px 6px 0;
}
.reward-track::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 48%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.reward-card {
  position: relative; min-height: 154px; padding: 26px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(8px);
}
.reward-card-a { flex: 0 0 16%; margin-bottom: 30px; transform: rotate(-1.4deg); clip-path: polygon(0 18%, 14% 0, 86% 0, 100% 22%, 100% 100%, 10% 100%, 0 78%); }
.reward-card-b { flex: 0 0 31%; margin-bottom: 58px; clip-path: polygon(0 8%, 10% 0, 90% 0, 100% 18%, 100% 84%, 82% 100%, 0 100%); }
.reward-card-c { flex: 0 0 30%; margin-bottom: 6px; transform: rotate(.6deg); clip-path: polygon(0 22%, 14% 0, 100% 0, 100% 76%, 88% 100%, 0 100%); }
.reward-card-d { flex: 0 0 19%; margin-bottom: 42px; transform: rotate(-.8deg); clip-path: polygon(0 8%, 12% 0, 86% 0, 100% 14%, 100% 84%, 92% 100%, 0 100%); }
.reward-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--cyan), transparent 82%);
}
.reward-card::after {
  content: ""; position: absolute; left: 18px; right: 24px; top: 16px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.34), transparent);
}
.reward-card.unlocked { box-shadow: inset 0 0 0 1px rgba(100,231,255,.18), var(--shadow); }
.reward-card.final { box-shadow: inset 0 0 0 1px rgba(255,208,106,.28), var(--shadow); }
.reward-card em { display: block; color: #8deeff; font-style: normal; font-size: 13px; letter-spacing: .18em; }
.reward-card strong { display: block; margin: 14px 0 10px; font-size: 22px; line-height: 1.35; }
.reward-card p, .allure-panel p, .flow-card p, .dmm-copy p, .age-card p, .modal-card p { margin: 0; color: var(--muted); line-height: 1.9; }
.reward-foot {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin-top: 16px; align-items: center;
}
.reward-note {
  padding: 22px 24px; border: 1px solid var(--line); background: rgba(255,255,255,.04); clip-path: polygon(0 12%, 6% 0, 100% 0, 100% 86%, 94% 100%, 0 100%);
}
.reward-note span, .allure-tail-copy span {
  display: inline-block; color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.reward-note strong, .allure-tail-copy strong {
  display: block; margin: 10px 0 12px; white-space: pre-line; font-family: "Noto Serif JP", serif; font-size: 26px; line-height: 1.3;
}
.reward-mini-track {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
.reward-mini-track span, .flow-tail span {
  padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #efe6ff; font-size: 13px;
}

.allure-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas:
    "story goddess"
    "story system";
  gap: 18px 20px; align-items: stretch;
}
.allure-panel {
  position: relative; min-height: 260px; padding: 30px 30px 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  overflow: hidden;
}
.allure-panel::before {
  content: ""; position: absolute; inset: auto -6% -8% auto; width: 180px; height: 180px; border-radius: 999px; filter: blur(14px); opacity: .5;
}
.allure-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-size: cover; background-position: center;
  mix-blend-mode: screen;
}
.allure-panel.is-feature {
  grid-area: story; min-height: 468px; clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 88%, 84% 100%, 0 100%);
}
.allure-panel.is-wide {
  grid-area: goddess; min-height: 224px; clip-path: polygon(0 16%, 8% 0, 100% 0, 100% 82%, 94% 100%, 0 100%);
}
.allure-panel.is-overlap {
  grid-area: system; min-height: 224px; clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 82%, 90% 100%, 12% 100%, 0 74%);
  margin-left: 80px;
}
.panel-story { background: linear-gradient(145deg, rgba(20, 26, 88, .90), rgba(10, 6, 29, .92)); }
.panel-story::before { background: radial-gradient(circle, rgba(100,231,255,.85), transparent 70%); }
.panel-story::after { background-image: linear-gradient(180deg, rgba(9,8,29,.65), rgba(9,8,29,.9)), url('./assets/hero-card-b.png?v=20260827h'); background-position: right center; }
.panel-goddess { background: linear-gradient(145deg, rgba(88, 18, 78, .90), rgba(20, 8, 28, .92)); }
.panel-goddess::before { background: radial-gradient(circle, rgba(255,85,199,.85), transparent 70%); }
.panel-goddess::after { background-image: linear-gradient(90deg, rgba(18,8,28,.78), rgba(18,8,28,.18)), url('./assets/hero-card-d.png?v=20260827h'); background-position: 112% center; }
.panel-system { background: linear-gradient(145deg, rgba(93, 45, 10, .88), rgba(22, 10, 19, .92)); }
.panel-system::before { background: radial-gradient(circle, rgba(255,208,106,.75), transparent 70%); }
.panel-system::after { background-image: linear-gradient(90deg, rgba(22,10,19,.82), rgba(22,10,19,.2)), url('./assets/hero-card-a.png?v=20260827h'); background-position: 115% center; }
.allure-panel span, .flow-card span { display: inline-block; color: #93f1ff; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; position: relative; z-index: 1; }
.allure-panel strong, .flow-card strong {
  display: block; margin: 18px 0 14px; white-space: pre-line; font-family: "Noto Serif JP", serif; font-size: 28px; line-height: 1.28; position: relative; z-index: 1;
}
.allure-panel p { position: relative; z-index: 1; max-width: 66%; }
.panel-story p { max-width: 58%; }
.panel-goddess p, .panel-system p { max-width: 64%; }
.allure-tail {
  display: grid; grid-template-columns: 1fr 360px; gap: 18px; margin-top: 16px; align-items: center;
}
.allure-tail-copy {
  padding: 18px 22px; border-left: 2px solid rgba(255,255,255,.18);
}
.allure-tail-stack {
  position: relative; height: 210px;
}
.allure-thumb {
  position: absolute; display: block; width: 180px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
}
.thumb-a { left: 20px; top: 8px; transform: rotate(-8deg); }
.thumb-b { right: 12px; top: 18px; transform: rotate(7deg); }

.flow-grid {
  position: relative; display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 18px; align-items: end; padding: 38px 0 8px;
}
.flow-grid::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 20px; height: 1px;
  background: linear-gradient(90deg, rgba(122,234,255,.06), rgba(255,178,215,.22), rgba(122,234,255,.06));
}
.flow-card {
  position: relative; padding: 28px 28px 30px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}
.flow-card::before {
  position: absolute; top: 16px; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); color: var(--rose); font-weight: 900; font-size: 11px; letter-spacing: .08em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.flow-card::after {
  content: ""; position: absolute; top: 24px; right: 16px; width: 54px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent);
}
.flow-card-pc {
  min-height: 186px; clip-path: polygon(0 10%, 12% 0, 82% 0, 100% 24%, 100% 100%, 0 100%);
  transform: translateY(14px);
}
.flow-card-pc::before { content: "01"; left: 18px; }
.flow-card-android {
  min-height: 236px; clip-path: polygon(0 18%, 8% 0, 90% 0, 100% 18%, 100% 82%, 94% 100%, 0 100%);
  z-index: 2;
}
.flow-card-android::before { content: "02"; left: 18px; }
.flow-card-ios {
  min-height: 186px; clip-path: polygon(0 0, 100% 0, 100% 76%, 84% 100%, 18% 100%, 0 72%);
  transform: translateY(14px);
}
.flow-card-ios::before { content: "03"; left: 18px; }
.flow-tail {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center;
}
.dmm-shell {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 28px; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.dmm-copy h3 {
  margin: 16px 0; white-space: pre-line; font-family: "Noto Serif JP", serif; font-size: clamp(28px, 4vw, 48px); line-height: 1.18;
}
.dmm-form {
  display: flex; flex-direction: column; justify-content: center; gap: 14px; color: #ece5ff;
}
.dmm-form a { color: #9ceeff; text-decoration: underline; }
.footer {
  position: relative; background: linear-gradient(180deg, rgba(7,2,15,.98), rgba(5,2,12,1)); border-top: 1px solid rgba(255,255,255,.08);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 42px 0 48px;
}
.footer strong { display: block; font-size: 18px; }
.footer span { color: var(--muted); font-size: 14px; }
.footer-links { color: var(--muted); font-size: 14px; }
.age-gate, .modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5,3,14,.84); backdrop-filter: blur(18px);
}
.age-card, .modal-card {
  width: min(560px, 100%); padding: 30px; border-radius: 28px; background: var(--glass-2); position: relative;
}
.age-card h1, .modal-card h4 { margin: 16px 0; font-family: "Noto Serif JP", serif; }
.modal-close {
  position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--ink); font-size: 22px;
}
@media (max-width: 1260px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "brand" "copy" "visual"; min-height: auto; padding-bottom: 28px; }
  .hero-brand { align-items: flex-start; text-align: left; margin-bottom: 6px; }
  .hero-copy { padding-left: 0; max-width: none; }
  .hero-visual { min-height: 360px; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: 22px 118px 118px 84px 18px; gap: 0; margin-top: 2px; padding-right: 0; }
  .card-a { grid-column: 1 / span 3; grid-row: 2 / span 3; transform: rotate(-6deg) translate(4px, 8px)  }
  .card-b { grid-column: 3 / span 4; grid-row: 1 / span 4; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 6 / span 3; grid-row: 3 / span 2; transform: rotate(4deg) translate(-4px, -6px)  }
  .card-d { grid-column: 7 / span 4; grid-row: 1 / span 4; transform: rotate(6deg) translate(-8px, 4px); }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-track { display: grid; align-items: stretch; }
  .reward-card, .allure-panel, .flow-card { transform: none !important; margin: 0 !important; }
  .reward-card { flex: initial; min-height: 170px; }
  .reward-foot, .allure-tail { grid-template-columns: 1fr; }
  .reward-mini-track { justify-content: flex-start; }
  .allure-grid { grid-template-areas: "story story" "goddess system"; }
  .allure-panel.is-overlap { margin-left: 0; }
  .allure-panel p { max-width: 78%; }
  .allure-tail-stack { height: 190px; }
  .flow-grid::before { left: 8%; right: 8%; bottom: 18px; }
  .dmm-copy { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .utility-links { display: none; }
  .utility-r18 { margin-left: 0; }
  .hero { min-height: auto; }
  .hero-inner { width: calc(100% - 18px); }
  .hero-copy h2 { font-size: 23px; max-width: none; white-space: nowrap; }
  .hero-lead { font-size: 16px; }
  .hero-visual { min-height: 276px; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 16px 92px 92px 54px 12px; gap: 0; padding: 8px 0 2px; margin-top: 0; }
  .hero-card { width: 100%; height: auto; max-height: none; border-radius: 16px; object-fit: contain; object-position: center top; }
  .card-a { grid-column: 1 / span 2; grid-row: 2 / span 3; transform: rotate(-6deg) translate(2px, 6px); }
  .card-b { grid-column: 2 / span 2; grid-row: 1 / span 3; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 2 / span 2; grid-row: 4 / span 1; transform: rotate(4deg) translate(0, -10px); }
  .card-d { grid-column: 3 / span 2; grid-row: 2 / span 3; transform: rotate(6deg) translate(-4px, 2px); }
  .hotlove-stamp { width: 82px; left: auto; right: 8px; bottom: 8px; transform: rotate(-4deg); }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: 1fr; }
  .reward-card, .allure-panel, .flow-card { clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }
}


.section {
  padding: 66px 0 34px;
}
.section-support {
  max-width: 960px;
  margin: 16px 0 0;
  color: rgba(235, 223, 246, .88);
  font-size: 16px;
  line-height: 1.9;
  text-shadow: 0 4px 12px rgba(0,0,0,.24);
}
.hero-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  max-width: 980px;
}
.hero-brand .eyebrow { margin: 0; }
.hero-strip-card,
.reward-status-bar > div,
.reward-numbers > div,
.allure-tail-points > div,
.dmm-specs > div {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.hero-strip-card {
  padding: 12px 12px 10px;
  clip-path: polygon(0 10%, 8% 0, 100% 0, 100% 86%, 92% 100%, 0 100%);
}
.hero-strip-card span,
.reward-brief-copy span,
.flow-band-copy span,
.dmm-specs small,
.reward-status-bar small,
.reward-numbers small,
.allure-tail-points small {
  display: inline-block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-strip-card strong {
  display: block;
  margin: 9px 0 7px;
  font-size: 19px;
  line-height: 1.32;
}
.hero-strip-card p,
.reward-brief-copy p,
.flow-band-copy p,
.allure-tail-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
  font-size: 16px;
}
.reward-status-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.reward-status-bar > div,
.reward-numbers > div,
.allure-tail-points > div,
.dmm-specs > div {
  padding: 16px 18px;
  border-radius: 20px;
}
.reward-status-bar strong,
.reward-numbers strong,
.allure-tail-points strong,
.dmm-specs strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
  line-height: 1.35;
}
.reward-foot {
  grid-template-columns: .88fr 1.12fr;
  align-items: stretch;
}
.reward-brief {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  clip-path: polygon(0 10%, 6% 0, 100% 0, 100% 90%, 94% 100%, 0 100%);
  box-shadow: var(--shadow);
}
.reward-brief-copy strong {
  display: block;
  margin: 10px 0 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  line-height: 1.3;
}
.reward-mini-track {
  justify-content: flex-start;
}
.reward-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.allure-tail {
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "copy stack"
    "points stack";
  gap: 16px 18px;
  align-items: stretch;
}
.allure-tail-copy {
  grid-area: copy;
  padding: 22px 24px;
  border-left: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  clip-path: polygon(0 10%, 5% 0, 100% 0, 100% 86%, 94% 100%, 0 100%);
  box-shadow: var(--shadow);
}
.allure-tail-copy strong {
  display: block;
  margin: 10px 0 10px;
  white-space: pre-line;
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  line-height: 1.32;
}
.allure-tail-stack {
  grid-area: stack;
  min-height: 240px;
  height: auto;
}
.allure-tail-points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.flow-band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  margin: 2px 0 12px;
}
.flow-band-copy,
.flow-band-tags {
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: var(--shadow);
}
.flow-band-copy {
  clip-path: polygon(0 12%, 6% 0, 100% 0, 100% 86%, 94% 100%, 0 100%);
}
.flow-band-copy strong {
  display: block;
  margin: 10px 0 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  line-height: 1.32;
}
.flow-band-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%, 0 12%);
}
.flow-band-tags span,
.reward-mini-track span,
.flow-tail span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #f2eaff;
  font-size: 13px;
}
.flow-grid {
  padding-top: 14px;
}
.dmm-shell {
  align-items: stretch;
}
.dmm-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dmm-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.dmm-form {
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.03);
}
@media (max-width: 1260px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "brand" "copy" "visual"; min-height: auto; padding-bottom: 28px; }
  .hero-brand { align-items: flex-start; text-align: left; margin-bottom: 6px; }
  .hero-copy { padding-left: 0; max-width: none; }
  .hero-visual { min-height: auto; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto; gap: 10px; margin-top: 0; }
  .card-a { grid-column: 1 / span 2; grid-row: 1; }
  .card-b { grid-column: 3 / span 2; grid-row: 1; }
  .card-c { grid-column: 5 / span 2; grid-row: 1; }
  .card-d { grid-column: 7 / span 2; grid-row: 1; }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-track { display: grid; align-items: stretch; }
  .reward-card, .allure-panel, .flow-card { transform: none !important; margin: 0 !important; }
  .reward-card { flex: initial; min-height: 170px; }
  .reward-foot, .allure-tail { grid-template-columns: 1fr; }
  .reward-mini-track { justify-content: flex-start; }
  .allure-grid { grid-template-areas: "story story" "goddess system"; }
  .allure-panel.is-overlap { margin-left: 0; }
  .allure-panel p { max-width: 78%; }
  .allure-tail-stack { height: 190px; }
  .flow-grid::before { left: 8%; right: 8%; bottom: 18px; }
  .dmm-copy { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .utility-links { display: none; }
  .utility-r18 { margin-left: 0; }
  .hero { min-height: auto; }
  .hero-inner { width: calc(100% - 18px); }
  .hero-copy h2 { font-size: 23px; max-width: none; white-space: nowrap; }
  .hero-lead { font-size: 16px; }
  .hero-visual { min-height: 276px; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 16px 92px 92px 54px 12px; gap: 0; padding: 8px 0 2px; margin-top: 0; }
  .hero-card { width: 100%; height: auto; max-height: none; border-radius: 16px; object-fit: contain; object-position: center top; }
  .card-a { grid-column: 1 / span 2; grid-row: 2 / span 3; transform: rotate(-6deg) translate(2px, 6px) scale(.97); }
  .card-b { grid-column: 2 / span 2; grid-row: 1 / span 3; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 2 / span 2; grid-row: 4 / span 1; transform: rotate(4deg) translate(0, -10px) scale(.92); }
  .card-d { grid-column: 3 / span 2; grid-row: 2 / span 3; transform: rotate(6deg) translate(-4px, 2px); }
  .hotlove-stamp { width: 82px; left: auto; right: 8px; bottom: 8px; transform: rotate(-4deg); }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: 1fr; }
  .reward-card, .allure-panel, .flow-card { clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }
}

@media (max-width: 860px) {
  .utility-links { display: none; }
  .utility-r18 { margin-left: 0; }
  .hero { min-height: auto; }
  .hero-inner { width: calc(100% - 18px); }
  .hero-copy h2 { font-size: 23px; max-width: none; white-space: nowrap; }
  .hero-lead { font-size: 16px; }
  .hero-visual { min-height: 276px; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 16px 92px 92px 54px 12px; gap: 0; padding: 8px 0 2px; margin-top: 0; }
  .hero-card { width: 100%; height: auto; max-height: none; border-radius: 16px; object-fit: contain; object-position: center top; }
  .card-a { grid-column: 1 / span 2; grid-row: 2 / span 3; transform: rotate(-6deg) translate(2px, 6px) scale(.97); }
  .card-b { grid-column: 2 / span 2; grid-row: 1 / span 3; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 2 / span 2; grid-row: 4 / span 1; transform: rotate(4deg) translate(0, -10px) scale(.92); }
  .card-d { grid-column: 3 / span 2; grid-row: 2 / span 3; transform: rotate(6deg) translate(-4px, 2px); }
  .hotlove-stamp { width: 82px; left: auto; right: 8px; bottom: 8px; transform: rotate(-4deg); }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: 1fr; }
  .reward-card, .allure-panel, .flow-card { clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }
}


.runtime-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.runtime-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
}
.runtime-head strong {
  font-size: 20px;
}
.runtime-head span,
.runtime-grid span {
  color: #b8b0d8;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.runtime-grid > div {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.runtime-grid strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
}
.runtime-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.runtime-actions .button {
  min-height: 48px;
  padding: 0 18px;
}
.runtime-note {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.8;
}
.runtime-note code {
  font-family: inherit;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
@media (max-width: 860px) {
  .utility-links { display: none; }
  .utility-r18 { margin-left: 0; }
  .hero { min-height: auto; }
  .hero-inner { width: calc(100% - 18px); }
  .hero-copy h2 { font-size: 23px; max-width: none; white-space: nowrap; }
  .hero-lead { font-size: 16px; }
  .hero-visual { min-height: 276px; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 16px 92px 92px 54px 12px; gap: 0; padding: 8px 0 2px; margin-top: 0; }
  .hero-card { width: 100%; height: auto; max-height: none; border-radius: 16px; object-fit: contain; object-position: center top; }
  .card-a { grid-column: 1 / span 2; grid-row: 2 / span 3; transform: rotate(-6deg) translate(2px, 6px) scale(.97); }
  .card-b { grid-column: 2 / span 2; grid-row: 1 / span 3; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 2 / span 2; grid-row: 4 / span 1; transform: rotate(4deg) translate(0, -10px) scale(.92); }
  .card-d { grid-column: 3 / span 2; grid-row: 2 / span 3; transform: rotate(6deg) translate(-4px, 2px); }
  .hotlove-stamp { width: 82px; left: auto; right: 8px; bottom: 8px; transform: rotate(-4deg); }
  .reward-track, .allure-grid, .flow-grid, .dmm-shell { grid-template-columns: 1fr; }
  .reward-card, .allure-panel, .flow-card { clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }
}


.review-section { background: radial-gradient(circle at 24% 34%, rgba(255,216,125,.08), transparent 20%), linear-gradient(180deg, rgba(33,14,47,.86), rgba(21,9,31,.94)); }
.delivery-section { background: radial-gradient(circle at 78% 40%, rgba(122,234,255,.08), transparent 22%), linear-gradient(180deg, rgba(30,12,42,.88), rgba(16,8,25,.96)); }
.review-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.review-card { padding:24px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); clip-path:polygon(0 10%, 7% 0, 100% 0, 100% 88%, 93% 100%, 0 100%); }
.review-card span { display:inline-block; color:var(--gold); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.review-card strong { display:block; margin:10px 0 10px; font-family:"Noto Serif JP", serif; font-size:28px; line-height:1.28; }
.review-card p { margin:0; color:var(--muted); line-height:1.85; }
.review-card a { display:block; margin-top:10px; color:#9ceeff; text-decoration:underline; }
.review-card ul { margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.85; }
.delivery-shell { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.delivery-col { padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:26px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.delivery-col h4 { margin:0 0 14px; font-family:"Noto Serif JP", serif; font-size:26px; }
.delivery-item { padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#efe7ff; margin-bottom:10px; line-height:1.6; }
.support-page { min-height:100vh; color:var(--ink); font-family:"Noto Sans JP", sans-serif; background: radial-gradient(circle at 20% 10%, rgba(255,111,206,.12), transparent 24%), radial-gradient(circle at 80% 16%, rgba(122,234,255,.12), transparent 24%), linear-gradient(180deg, #20102d 0%, #14091e 100%); }
.support-shell { width:min(1320px, calc(100% - 28px)); margin:0 auto; padding:32px 0 64px; }
.support-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.support-back { display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--ink); text-decoration:none; }
.support-stage { display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:stretch; }
.support-card { padding:28px; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow); }
.support-card h1 { margin:14px 0 16px; font-family:"Noto Serif JP", serif; font-size:clamp(38px, 5vw, 72px); line-height:1.08; }
.support-card p { margin:0; color:var(--muted); line-height:1.95; }
.support-points, .support-specs { display:grid; gap:12px; margin-top:18px; }
.support-point, .support-spec { padding:16px 18px; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.support-point strong, .support-spec strong { display:block; margin-bottom:6px; }
.support-preview { position:relative; min-height:520px; overflow:hidden; }
.support-preview img { position:absolute; border-radius:24px; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); }
.support-preview .pv-a { width:260px; left:18px; top:42px; transform:rotate(-7deg); }
.support-preview .pv-b { width:300px; right:18px; top:16px; transform:rotate(6deg); }
.support-preview .pv-c { width:220px; left:120px; bottom:20px; transform:rotate(-3deg); }
.support-note { margin-top:16px; padding:18px 20px; border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.support-note code, .support-point code { font-family:inherit; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.08); }
.support-footer { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:18px; }
.support-tile { padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.support-tile span { display:block; color:var(--gold); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.support-tile strong { display:block; margin-top:8px; font-size:22px; }
@media (max-width: 1260px) { .review-grid, .delivery-shell, .support-footer { grid-template-columns:1fr; } .support-stage { grid-template-columns:1fr; } }
@media (max-width: 860px) { .review-card strong { font-size:24px; } .support-card h1 { font-size:42px; } .support-preview { min-height:420px; } .support-preview .pv-a { width:190px; left:8px; top:80px; } .support-preview .pv-b { width:220px; right:0; } .support-preview .pv-c { width:170px; left:70px; bottom:16px; } }













.signup-meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.signup-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #f0e8ff;
  font-size: 13px;
}
.signup-check input {
  width: 16px;
  height: 16px;
}
.policy-line {
  display: inline-block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.policy-line a {
  color: var(--gold);
  text-decoration: underline;
}
.hero-summary {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}
.hero-summary > div {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
}
.hero-summary small {
  display: block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .12em;
}
.hero-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}
.feature-grid,
.character-grid,
.gallery-grid {
  display: grid;
  gap: 18px;
}
.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-card,
.character-card,
.gallery-card,
.community-shell {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.feature-card {
  padding: 28px;
  border-radius: 28px;
}
.feature-card span,
.character-copy span,
.gallery-card span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.feature-card strong,
.character-copy strong,
.gallery-card strong {
  display: block;
  margin: 12px 0 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 30px;
  line-height: 1.2;
}
.feature-card p,
.character-copy p,
.community-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
.character-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character-card {
  overflow: hidden;
  border-radius: 30px;
}
.character-card img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.character-copy {
  padding: 24px;
}
.gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery-card {
  overflow: hidden;
  border-radius: 28px;
}
.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gallery-card div {
  padding: 20px 22px 24px;
}
.community-shell {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 24px;
  padding: 36px;
  border-radius: 32px;
}
.community-copy h3 {
  margin: 14px 0 12px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.08;
}
.community-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}
.support-cta-group {
  margin-top: 18px;
}
@media (max-width: 1260px) {
  .feature-grid,
  .gallery-grid,
  .character-grid,
  .community-shell,
  .hero-summary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .utility-links {
    gap: 12px;
    flex-wrap: wrap;
  }
  .hero-summary {
    gap: 10px;
  }
  .feature-card strong,
  .character-copy strong,
  .gallery-card strong {
    font-size: 24px;
  }
  .character-card img {
    height: 360px;
  }
  .community-actions {
    justify-content: flex-start;
  }
}

/* 2026-08-27 hero visual layout refinement */
.hero-visual {
  grid-area: visual;
  position: relative;
  min-height: 470px;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: 30px 126px 126px 100px 86px 18px;
  gap: 0;
  align-items: stretch;
  padding: 4px 4px 0 0;
  margin-top: -4px;
  overflow: visible;
}
.hero-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  box-shadow: 0 22px 40px rgba(8, 5, 16, .42);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}
.hero-card-main {
  object-fit: contain;
  object-position: center top;
}
.hero-card-accent {
  object-fit: cover;
  object-position: center top;
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(6, 3, 15, .5);
}
.card-a { grid-column: 1 / span 4; grid-row: 2 / span 3; z-index: 2; transform: rotate(-7deg) translate(8px, 8px); clip-path: polygon(0 8%, 12% 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }
.card-b { grid-column: 4 / span 5; grid-row: 1 / span 4; z-index: 4; transform: rotate(-3deg) translateY(-2px); clip-path: polygon(0 10%, 11% 0, 100% 0, 100% 90%, 90% 100%, 0 100%); }
.card-c { grid-column: 8 / span 4; grid-row: 2 / span 3; z-index: 3; transform: rotate(4deg) translate(-4px, 4px); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 10% 100%, 0 88%); }
.card-d { grid-column: 11 / span 5; grid-row: 1 / span 4; z-index: 5; transform: rotate(7deg) translate(-10px, 4px); clip-path: polygon(0 8%, 10% 0, 100% 0, 100% 92%, 90% 100%, 0 100%); }
.card-e { grid-column: 1 / span 4; grid-row: 4 / span 1; z-index: 8; height: 352px; align-self: start; transform: rotate(-6deg) translate(26px, -8px); clip-path: polygon(0 8%, 12% 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }
.card-f { grid-column: 6 / span 4; grid-row: 4 / span 1; z-index: 9; height: 352px; align-self: start; transform: rotate(3deg) translate(2px, -10px); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 10% 100%, 0 88%); }
.card-g { grid-column: 11 / span 5; grid-row: 4 / span 1; z-index: 10; height: 382px; align-self: start; justify-self: start; transform: rotate(7deg) translate(-22px, -8px); clip-path: polygon(0 8%, 10% 0, 100% 0, 100% 92%, 90% 100%, 0 100%); }

@media (max-width: 1260px) {
  .hero-visual {
    min-height: 428px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 22px 120px 120px 88px 74px 14px;
    padding-right: 0;
    margin-top: 0;
  }
  .card-a { grid-column: 1 / span 3; grid-row: 2 / span 3; transform: rotate(-6deg) translate(4px, 6px); }
  .card-b { grid-column: 3 / span 4; grid-row: 1 / span 4; }
  .card-c { grid-column: 7 / span 3; grid-row: 2 / span 3; transform: rotate(4deg) translate(-2px, 2px); }
  .card-d { grid-column: 9 / span 4; grid-row: 1 / span 4; transform: rotate(6deg) translate(-8px, 2px); }
  .card-e { grid-column: 1 / span 4; grid-row: 4 / span 3; transform: rotate(-5deg) translate(16px, -6px); }
  .card-f { grid-column: 5 / span 4; grid-row: 4 / span 3; transform: rotate(3deg) translate(2px, -8px); }
  .card-g { grid-column: 9 / span 4; grid-row: 4 / span 3; transform: rotate(6deg) translate(-16px, -6px); }
}
@media (max-width: 860px) {
  .hero-visual {
    min-height: 348px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: 10px 96px 96px 72px 64px 12px;
    padding: 6px 0 0;
  }
  .hero-card { border-radius: 18px; }
  .hero-card-accent { border-radius: 18px; }
  .card-a { grid-column: 1 / span 3; grid-row: 2 / span 3; transform: rotate(-5deg) translate(2px, 4px); }
  .card-b { grid-column: 2 / span 3; grid-row: 1 / span 3; transform: rotate(-2deg) translateY(0); }
  .card-c { grid-column: 4 / span 3; grid-row: 2 / span 3; transform: rotate(3deg) translate(0, 4px); }
  .card-d { grid-column: 6 / span 3; grid-row: 1 / span 3; transform: rotate(5deg) translate(-4px, 2px); }
  .card-e { grid-column: 1 / span 3; grid-row: 4 / span 3; transform: rotate(-4deg) translate(10px, -4px); }
  .card-f { grid-column: 3 / span 3; grid-row: 4 / span 3; transform: rotate(3deg) translate(0, -4px); }
  .card-g { grid-column: 6 / span 3; grid-row: 4 / span 3; transform: rotate(5deg) translate(-8px, -4px); }
}





/* 2026-08-27 utility bar refinement: keep official header, soften custom brand nav */
.utility-bar {
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(35, 16, 48, .92), rgba(33, 15, 46, .78));
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.utility-inner {
  min-height: 50px;
  gap: 12px;
}
.utility-brand {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(255,255,255,.84);
}
.utility-r18 {
  margin-left: 4px;
  margin-right: auto;
  min-height: 30px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: .12em;
  border-color: rgba(255,216,125,.18);
  background: linear-gradient(180deg, rgba(255,216,125,.08), rgba(255,255,255,.02));
}
.utility-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(233, 225, 245, .86);
}
.utility-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.utility-links a:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: #fff7ff;
}
@media (max-width: 860px) {
  .utility-bar {
    background: linear-gradient(180deg, rgba(35, 16, 48, .95), rgba(33, 15, 46, .86));
  }
  .utility-inner {
    min-height: 48px;
    width: calc(100% - 16px);
    gap: 8px;
  }
  .utility-brand {
    padding: 0 10px;
    font-size: 11px;
  }
  .utility-r18 {
    margin-left: 0;
    padding: 0 10px;
    font-size: 10px;
  }
  .utility-links {
    gap: 6px;
  }
  .utility-links a {
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* 2026-08-27 story panel copy expansion */
.allure-panel p + p {
  margin-top: 14px;
}