/* ================= Variante C = B en menta =================
   ひとみ eligió C «pero como B» (2026-11-07): todo lo pulido de B —cintas en los títulos,
   marcos dobles, foto de perfil en arco, sus dibujos, fechas en cursiva— con su color
   menta mandando en vez del papel crema y el marrón. Fuera lo que ensucia: festones,
   rayas del papel, halos de color. Arriba, lo propio de C: barra menta lisa y la foto a
   sangre debajo.
   El <body> lleva v-b y v-c, y esta hoja va después de style-b.css: aquí solo hay lo que
   cambia respecto a B. Dorado (el del logo) solo para señalar: NEXT LIVE y ワンマン. */

/* ---------- color ---------- */
.v-c {
	--paper: #fff;                /* fondo de las secciones (y hueco de los marcos dobles) */
	--tint: #e6f8ec;              /* franjas y PICK UP: el menta de la cinta de su vestido (OKLCH H 157, C 0.023)
	                                 con la luminosidad del #eaf6f0 de antes (texto 12,8:1). El de antes era casi
	                                 gris: genérico de plantilla y casi el del nuevo TIGET (#EDF6F2). El #e3f9eb
	                                 (C 0.030) se comía el protagonismo. Elegido 2026-11-12; a ひとみ le gusta:
	                                 «私のカラーが分かりやすいし目に優しい». */
	--band: var(--tint);          /* secciones en franja */
	--top: var(--tint);           /* barra, hero y PICK UP: su menta, como todos los fondos (antes #d6efe3, más gris) */
	--frame: #2a7354;             /* marcos, placas de los títulos: 5,6:1 sobre blanco */
	--frame-soft: #a9d9c1;        /* segundo marco, el desplazado */
	--ribbon: #d6efe3;            /* cinta del título */
	--accent: #00857e;           /* = --pop: el único color de acción de C (antes un verde #2a7354 que solo salía en hovers sueltos) */
	--gold-dark: #1f5c43;         /* B lo usa en botones y kickers: aquí, verde hondo */
	--gold: #ae8d6f;              /* dorado real, solo para NEXT LIVE */
	--gold-light: #d9c7ad;
	--hot-bg: #fbf6ec;            /* ワンマン */
	--hot-ink: #86643f;
	--mint-bg: var(--tint);       /* todos los fondos menta son el suyo: 2026-11-14 */
	--tint-deep: #d1efdb;         /* recuadros y etiquetas: el mismo menta más hondo (L 0.925 C 0.042 H 156), para
	                                 que no se fundan con el hover de su fila, que va en --tint */
	--mint-soft: var(--tint-deep); /* antes el #ddefe5 grisáceo de style.css */
	--line: #dcebe3;
	--bar: 64px;
}
body.v-c { background: #fff; }
@media (min-width: 960px) { body.v-c { background: #fff; } }
html:has(body.v-c), body.v-c { overflow-x: hidden; }

/* ---------- barra: menta lisa, siempre ---------- */
.v-c .bar, .v-c.home .bar, .v-c.home .bar.solid, .v-c:not(.home) .bar {
	position: sticky; top: 0; height: var(--bar);
	background: rgb(214 239 227 / 0.96); border-bottom: 0; backdrop-filter: blur(10px);
}
.v-c .logo img { width: 190px; }
.v-c .menu { background: var(--tint); }
.v-c .burger { box-shadow: 0 0 0 1px rgb(42 115 84 / 0.25), 0 6px 16px -8px rgb(36 73 58 / 0.35); }
@media (max-width: 959px) {
	.v-c .burger { box-shadow: 0 0 0 2px var(--top), 0 0 0 3px var(--frame); }
}
@media (min-width: 960px) {
	.v-c { --bar: 0px; --top-bar: clamp(118px, calc(70px + 3.4vw), 140px); }
	.v-c .bar, .v-c.home .bar, .v-c.home .bar.solid, .v-c:not(.home) .bar {
		position: relative; height: var(--top-bar); flex-direction: column; justify-content: center; gap: 12px;
		padding: 0 var(--gutter); background: var(--top); backdrop-filter: none;
	}
	.v-c .logo { position: static; transform: none; }
	.v-c .logo img { width: clamp(250px, 15vw, 320px); }
	.v-c .burger, .v-c .menu { display: none !important; }
	.v-c .bar-nav { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 0; margin: 0; }
	.v-c .bar-nav a {
		position: relative; padding: 6px clamp(14px, 1.1vw, 24px); color: var(--frame);
		font: 700 clamp(13px, 0.78vw, 16px)/1 "Zen Maru Gothic", sans-serif; letter-spacing: 0.16em;
	}
	.v-c .bar-nav a + a::before {
		content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
		border-radius: 50%; background: var(--frame-soft);
	}
	.v-c .bar-nav a:hover { color: var(--gold-dark); }
}

/* ---------- hero: foto a sangre bajo la barra ----------
   Fotos distintas en móvil (.sl-sp) y en PC (.sl-pc): en PC es una franja ~2,5:1 donde
   una vertical solo enseña media cara. Sin puntos: pasa sola y se desliza con el dedo. */
@media (max-width: 959px) { .v-c { --top-bar: 64px; } }
.v-c.home .hero {
	position: relative; max-width: none; height: auto; min-height: 0; display: block; overflow: visible;
	padding: 0; background: var(--top);
}
.hc-photo {
	position: relative; overflow: hidden; width: 100%; background: #ececec; /* el gris del fondo de la foto: mientras carga no se ve un bloque menta */
	height: calc(100svh - var(--top-bar) - var(--strip-h));
}
.hc-photo .sl { position: absolute; inset: 0; overflow: hidden; opacity: 0; z-index: 0; }
/* la nueva se funde encima de la anterior (.was), que sigue entera debajo hasta el
   siguiente cambio. Antes la anterior se quitaba a los 1,4 s con un temporizador, y si
   Safari tardaba en repintar la nueva (la descarta de memoria cuando lleva rato oculta)
   quedaba el fondo gris a la vista */
.hc-photo .sl.was { opacity: 1; z-index: 1; }
.hc-photo .sl.on { opacity: 1; z-index: 2; transition: opacity 1.4s ease-in-out; }
.hc-photo img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
	object-fit: cover; object-position: var(--pos);
}
@media (min-width: 960px) { .hc-photo img { object-position: var(--wide); } }
/* cada foto entra con un fundido cuando ya ha cargado (site.js le pone .ld-wait mientras) */
.hc-photo img { transition: opacity 0.6s ease; }
.hc-photo img.ld-wait { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hc-photo .sl, .hc-photo .sl.on { transition: none; } }
.v-c .hc-dots { display: none; }
@media (max-width: 959px) { .v-c .sl-pc { display: none; } }
@media (min-width: 960px) { .v-c .sl-sp { display: none; } }

/* ---------- PICK UP: franja menta lisa (sin festones, líneas ni adorno) ----------
   Mismo aire arriba y abajo. La primera pantalla = barra + foto + franja; en móvil la
   franja sigue 10px por debajo del pliegue porque Chrome de iPhone enseña algo más
   que 100svh y si no asoma el blanco de NEWS. */
.v-c .strip, .v-c.home .strip {
	position: relative; z-index: 2; margin: 0; box-shadow: none; box-sizing: border-box;
	background: var(--top);
}
.v-c .strip::before, .v-c .strip::after { content: none; }
.v-c .strip-orn { display: none; }
.v-c .bn, .v-c .bn-hot, .v-c .bn-mint, .v-c .bn-cream {
	height: var(--bn-h); aspect-ratio: auto; background: #fff;
	border: 1.5px solid var(--frame); border-radius: 10px; box-shadow: none; overflow: hidden;
}
.v-c .bn .bn-kicker { color: var(--gold-dark); }
@media (max-width: 959px) {
	.v-c { --bn-h: 128px; --strip-h: calc(var(--bn-h) + 32px); }
	.v-c.home .strip { height: calc(var(--strip-h) + 10px); padding: 18px 0 0; }
	.v-c .strip-track { padding-block: 0; }
	.v-c .bn { width: min(88vw, 360px); }
	.v-c .bn img { flex: 0 0 46%; width: 46%; height: 100%; }
}
@media (min-width: 960px) {
	.v-c { --bn-h: clamp(126px, calc((100vw - 80px) / 4 / 2.7), 210px); --strip-h: calc(var(--bn-h) + 52px); }
	.v-c.home .strip { height: var(--strip-h); padding: 26px 0; }
	.v-c .strip-track { padding-block: 0; }
	.v-c .bn { width: calc((100vw - 4 * 34px) / 4); height: var(--bn-h); padding: 8px; }
	.v-c .bn img { flex-basis: 42%; width: 42%; }
}

/* ---------- secciones: franjas con corte recto ----------
   B alterna papel y franjas con festones; aquí blanco y menta con borde limpio. Dentro
   de una franja, el hueco de los marcos dobles va a juego con el fondo. */
.v-c #schedule, .v-c #movie, .v-c #fanclub { --band: var(--tint); --paper: var(--tint); }
.v-c #schedule::before, .v-c #movie::before, .v-c #fanclub::after { background: var(--band); }
.v-c #profile::after { content: none; }

/* ---------- detalles en dorado: lo próximo y lo especial ---------- */
.v-c .ev.next::before { background: linear-gradient(100deg, #9a7557, #ae8d6f 55%, #9a7557); }
.v-c .ev.next .md i { color: #c2a57f; }
.v-c .tag-hot { background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1px var(--gold-light); }

/* ---------- el resto, del marrón de B a verde ---------- */
@media (hover: hover) { .v-c .ev:not(.next):hover { background: var(--tint); } }
.v-c .btn-off { background: linear-gradient(100deg, var(--accent), var(--gold-dark)); }
.v-c footer { background: var(--top); }
.v-c footer::before { content: none; }

/* ---------- スケジュール en móvil ----------
   Con el doble marco de B, fecha + flyer se comían la fila y el título salía en columnas
   de seis letras. Menos relleno, fecha y flyer más estrechos. */
@media (max-width: 959px) {
	.v-c #schedule .events, .v-c .page .events { padding: 4px 14px; }
	.v-c .events .ev { gap: 10px; }
	.v-c .events .date { flex-basis: 46px; }
	.v-c .events .md { font-size: 24px; }
	.v-c .events .ev-flyer { flex-basis: 50px; }
	.v-c .events .ev-flyer img { width: 50px; height: 70px; }
	.v-c .events .ev.next { margin-inline: -6px; padding: 24px 12px 16px; }
	.v-c .events .ev.next .md { font-size: 32px; }
	.v-c .events .ev.next .ev-title { font-size: 17px; }
}

/* sin festones, la franja llena su sección entera (B la mete 40px para el festón) */
@media (min-width: 960px) {
	.v-c #schedule::before, .v-c #movie::before, .v-c #fanclub::after { top: 0; bottom: 0; }
	/* PICK UP: tarjetas algo más altas para que quepan título y subtítulo de dos líneas */
	.v-c { --bn-h: clamp(150px, calc((100vw - 136px) / 4 / 2.3), 220px); }
}
/* mientras la Fan Club está oculta, perfil y goods quedan seguidas y las dos en blanco:
   goods toma la franja para que se siga alternando. Con la Fan Club visible deja de aplicar. */
.v-c #profile + #goods { --band: var(--tint); --paper: var(--tint); position: relative; }
.v-c #profile + #goods::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; width: 100vw; transform: translateX(-50%); top: 0; bottom: 0; background: var(--band);
}
/* el cierre de la ワンマン va pegado a la franja de la Fan Club, sin hueco blanco */
.v-c .cta { margin-top: 0; }
/* el cierre de la ワンマン va pegado a la franja de la Fan Club, sin hueco blanco */
.v-c .cta { margin-top: 0; }

/* nada ensancha la página: los destellos de los títulos largos rozan el borde en móvil */
html:has(body.v-c), body.v-c { overflow-x: clip; }

/* ================= títulos: los de C, sin cinta =================
   Se probó la cinta de B y una cinta arqueada; ninguna quedaba bien. Título en inglés
   grande (Quicksand), la estrella de su emblema encima y los destellos a los lados.
   El japonés (お知らせ…) sigue en el HTML para lectores de pantalla. */
.v-c h2 { flex-direction: column; align-items: center; gap: 4px; }
.v-c h2 .clover { display: block; color: #8fd0b0; width: 18px; height: 18px; }
.v-c h2 b {
	order: 0; margin: 0; padding: 0; background: none; clip-path: none; color: var(--ink);
	-webkit-text-fill-color: currentColor;
	font: 700 30px/1.2 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: 0.18em;
}
.v-c h2 span, .v-c #schedule h2 span, .v-c #movie h2 span, .v-c #fanclub h2 span {
	position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; background: none;
}
@media (min-width: 960px) { .v-c h2 b { font-size: 40px; } }

/* ---------- ritmo de secciones: mismo aire arriba y abajo ----------
   B dejaba 96–170px de margen y alargaba las franjas 70–80px fuera de la sección para
   los festones. Sin festones: relleno fijo dentro y la franja justo del tamaño de la
   sección. Título → contenido, también igual en todas. */
.v-c main > .block, .v-c .strip + main .block:first-child,
.v-c #schedule + .block, .v-c #movie + .block { margin-top: 0 !important; padding-block: 64px; }
.v-c #schedule::before, .v-c #movie::before, .v-c #fanclub::after { top: 0; bottom: 0; }
.v-c .head { margin-bottom: 28px; }
/* el chibi y los perros ocupan su sitio encima del título; no hace falta más hueco */
.v-c #profile .head, .v-c #fanclub .head, .v-c #first .head { padding-top: 92px; }
.v-c .more-end { margin-top: 28px; }
@media (min-width: 960px) {
	.v-c main > .block, .v-c .strip + main .block:first-child,
	.v-c #schedule + .block, .v-c #movie + .block { padding-block: 100px; }
	.v-c .head { margin-bottom: 40px; }
}

/* ---------- barra blanca ----------
   La barra menta sobre la foto parecía un bloque pegado. Blanca y neutra: el logo
   dorado se lee limpio y la foto empieza justo debajo, sin nada encima. */
.v-c .bar, .v-c.home .bar, .v-c.home .bar.solid, .v-c:not(.home) .bar {
	background: rgb(255 255 255 / 0.96); border-bottom: 1px solid var(--line);
}
.v-c .menu { background: #fff; }
@media (max-width: 959px) {
	.v-c .burger { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--frame); }
}
@media (min-width: 960px) {
	.v-c .bar, .v-c.home .bar, .v-c.home .bar.solid, .v-c:not(.home) .bar { background: #fff; }
}

/* ---------- móvil: la foto llega hasta arriba ----------
   La barra es transparente sobre la foto y se vuelve blanca al bajar (site.js le pone
   .solid). El logo puede perder algo sobre fotos claras; lo que tiene que verse siempre
   es el menú, que es un trébol blanco con las rayas en verde. */
@media (max-width: 959px) {
	.v-c.home .bar {
		position: fixed; left: 0; right: 0; top: 0;
		background: transparent; border-bottom-color: transparent; backdrop-filter: none;
		transition: background 0.25s, border-color 0.25s;
	}
	.v-c.home .bar.solid { background: rgb(255 255 255 / 0.96); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
	.v-c.home .hc-photo { height: calc(100svh - var(--strip-h)); }
}
.v-c .burger, .v-c .burger:hover {
	width: 48px; height: 48px; border-radius: 0; box-shadow: none; backdrop-filter: none;
	background: url(/img/clover-btn.svg) center / 44px no-repeat;
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.25));
}
.v-c .burger span, .v-c .burger span::before, .v-c .burger span::after { width: 14px; height: 1.8px; background: var(--frame); }
.v-c.menu-open .burger span { background: transparent; }
.v-c .burger, .v-c .burger:hover { background-size: 46px; }
.v-c .burger span, .v-c .burger span::before, .v-c .burger span::after { width: 12px; height: 1.6px; border-radius: 1px; }
.v-c .burger span::before { top: -4px; }
.v-c .burger span::after { top: 4px; }
.v-c.menu-open .burger span::before { transform: translateY(4px) rotate(45deg); }
.v-c.menu-open .burger span::after { transform: translateY(-4px) rotate(-45deg); }
/* trébol en el menta oficial (#99CDB0), rayas blancas */
.v-c .burger span, .v-c .burger span::before, .v-c .burger span::after { background: #fff; height: 2px; }
.v-c.menu-open .burger span { background: transparent; }
.v-c .burger, .v-c .burger:hover { filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.22)); }

/* el trébol gira solo, muy despacio (como el de su vídeo); las rayas, quietas encima.
   Va en ::before para que el giro no arrastre a las rayas ni a la ✕. */
.v-c .burger, .v-c .burger:hover { background: none; }
.v-c .burger::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url(/img/clover-btn.svg) center / 46px no-repeat;
	animation: clover-spin 45s linear infinite;
}
.v-c .burger span { z-index: 1; }
@keyframes clover-spin { to { transform: rotate(1turn); } }
/* quieto (sin saltar de ángulo) mientras el botón grande de la ワンマン está en pantalla */
.v-c.cta-live-in .burger::before { animation-play-state: paused; }
/* en las páginas de evento, quieto y derecho: la página entera es para decidir ir */
.v-c:has(main.event) .burger::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .v-c .burger::before { animation: none; } }
/* NEXT LIVE sin doble filete: dentro del marco ya hay bastantes líneas. Se destaca
   por el fondo crema y la etiqueta dorada. */
.v-c .events .ev.next, .v-c main > .block:nth-child(even) .ev.next, .v-c .ev.next {
	border: 0; box-shadow: none; background: #fbf6ec; border-radius: 8px;
}
.v-c .ev.next + .ev { border-top: 0; }

/* ---------- imágenes sin marco ----------
   Lo que pidió ella: marco para lo que NO es foto. B enmarcaba también vídeos, portadas,
   miniaturas y flyers con borde blanco + filete; aquí van limpios, esquinas suaves. La
   foto de perfil conserva el arco de B, sin borde. */
.v-c .jk img, .v-c .yt, .v-c .vmain .yt, .v-c .vmain iframe, .v-c .first-photo, .v-c .evp-flyer {
	border: 0; outline: 0; box-shadow: none; border-radius: 8px;
}
.v-c .vt img { border: 0; outline: 0; border-radius: 6px; }
.v-c .vt[aria-current="true"] img { outline: 2px solid var(--frame); outline-offset: 2px; }
.v-c .pf-photo { border: 0; padding: 0; background: none; border-radius: 8px; } /* sin arco: la foto de sesión, tal cual (como en /beginners/) */
/* /profile/ en PC: la foto sticky entera (2:3, sin recortar), con tope en el alto de la pantalla */
@media (min-width: 960px) {
	.v-c .pf-intro .pf-photo { aspect-ratio: 2 / 3; height: auto; max-height: calc(100vh - var(--bar, 84px) - 48px); object-position: 50% 15%; }
}

/* móvil: la barra siempre fija (no sticky). Con el menú abierto el body bloquea el
   scroll y una barra sticky se quedaba arriba fuera de pantalla: sin logo ni botón
   para cerrar. En las páginas de dentro, el contenido empieza bajo la barra. */
@media (max-width: 959px) {
	.v-c .bar, .v-c.home .bar, .v-c.home .bar.solid, .v-c:not(.home) .bar { position: fixed; left: 0; right: 0; top: 0; }
	body.v-c:not(.home) { padding-top: var(--bar); }
	.v-c.menu-open .bar, .v-c.menu-open.home .bar, .v-c.menu-open.home .bar.solid {
		background: #fff; border-bottom-color: var(--line); backdrop-filter: none;
	}
}
.v-c .burger::after, .v-c.menu-open .burger::after { content: none; }

/* ---------- pie: logo, contacto y ©; sin iconos (ya están arriba) ---------- */
.v-c footer { margin-top: 0; padding: 44px var(--gutter) calc(32px + env(safe-area-inset-bottom)); background: var(--top); text-align: center; }
.v-c .foot-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.v-c .foot-logo { width: 200px; height: auto; }
.v-c .foot-contact, .v-c .foot-in .foot-contact {
	display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0;
	padding: 12px 28px; background: #fff; border: 1.5px solid var(--frame); border-radius: 999px; box-shadow: none;
	color: var(--frame); font-weight: 700; text-decoration: none;
}
.v-c .copy { margin-top: 24px; color: var(--ink-2); font-size: 12px; }
@media (min-width: 960px) { .v-c .foot-in { flex-direction: column; } }

/* ================= GOODS ================= */
.gd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }
.gd { position: relative; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.gd img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; transition: transform 0.2s; }
.gd:hover img { transform: translateY(-3px); }
.gd-new {
	position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px;
	background: linear-gradient(100deg, #9a7557, #ae8d6f 55%, #9a7557); color: #fff;
	font: 700 11px/1.6 "Quicksand", sans-serif; letter-spacing: 0.08em;
}
.gd-name { font-size: 14px; font-weight: 700; line-height: 1.45; }
.gd-price { color: var(--frame); font-size: 14px; font-weight: 700; }
.gd-shop { display: flex; justify-content: center; margin: 32px 0 0; }
.v-c #goods .more-end { display: none; }
/* 4 productos también en escritorio: con 6 se veían pequeños; el resto, en la tienda */
.gd-list li:nth-child(n+5) { display: none; }
@media (min-width: 960px) {
	.gd-list { grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1120px; margin-inline: auto; }
	.gd-name { font-size: 15px; }
	.gd-shop .btn-wide { min-width: 360px; }
}
.gd-shop .btn-wide { padding-inline: 28px; width: auto; max-width: 100%; }

/* PICK UP como en B: tarjeta de 300px (asoma la siguiente) y borde suave, no el marco
   verde oscuro de las cajas de texto */
.v-c .bn, .v-c .bn-hot, .v-c .bn-mint, .v-c .bn-cream { border: 1px solid rgb(42 115 84 / 0.2); }
@media (max-width: 959px) {
	.v-c { --bn-h: 112px; }
	.v-c .bn { width: min(78vw, 300px); }
	.v-c .bn img { flex: 0 0 40%; width: 40%; }
}
/* franja PICK UP: el mismo menta que las franjas */
.v-c .strip, .v-c.home .strip { background: var(--tint); }

.view-all { display: flex; justify-content: center; margin: 28px 0 0; }
.view-all a {
	position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 320px); min-height: 50px;
	border: 1.5px solid var(--frame); border-radius: 6px; background: #fff; color: var(--frame);
	font: 700 15px/1 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: 0.1em; text-decoration: none;
}
.view-all a span { position: absolute; right: 18px; font-size: 20px; }
.view-all a:hover { background: var(--frame); color: #fff; }
.v-c #movie .head .more-link { display: none; }

/* ---------- pie: iconos grandes, cada uno en su color (como iLiFE) ---------- */
.foot-sns { display: flex; justify-content: center; align-items: center; gap: 26px; }
.fs { display: grid; place-items: center; width: 44px; height: 44px; }
.fs svg { width: 34px; height: 34px; }
.fs-x, .fs-tiktok { color: #000; }
.fs-instagram { color: #e1306c; }
.fs-youtube { color: #ff0000; }
.fs-youtube svg { width: 40px; }
.fs-showroom { width: 44px; border-radius: 10px; background: #0b0000 url(/img/showroom-app.webp) center / cover no-repeat; }
.fs-showroom svg { display: none; }
.fs:hover { transform: translateY(-2px); }

/* ---------- ritmo como iLiFE ----------
   Poco aire sobre el título (abre la sección) y mucho alrededor del contenido: entre
   título y contenido, y entre contenido y botón. Lo que respira es la foto/vídeo. */
.v-c main > .block, .v-c .strip + main .block:first-child,
.v-c #schedule + .block, .v-c #movie + .block { padding-top: 36px; padding-bottom: 56px; }
.v-c .head { margin-bottom: 40px; }
.v-c .more-end, .v-c .view-all, .v-c .gd-shop { margin-top: 48px; }
.v-c #profile .head, .v-c #fanclub .head, .v-c #first .head { padding-top: 88px; }
@media (min-width: 960px) {
	.v-c main > .block, .v-c .strip + main .block:first-child,
	.v-c #schedule + .block, .v-c #movie + .block { padding-top: 56px; padding-bottom: 88px; }
	.v-c .head { margin-bottom: 56px; }
	.v-c .more-end, .v-c .view-all, .v-c .gd-shop { margin-top: 64px; }
}

/* ================= cierre: la ワンマン con la paleta de su flyer =================
   El fondo gris (la flyer difuminada) apagaba todo y el botón blanco no llamaba. Ahora
   la noche de 『アイノカタチ』: azul marino → índigo con nieve tenue, fecha y título en el
   aguamarina del flyer con brillo, y el botón en ese aguamarina con un halo que late. */
.v-c .cta { background: linear-gradient(180deg, #0c0a17 0%, #154667 100%); color: #fff; }
.v-c .cta::before { content: none; }
.v-c .cta::after {
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 82% 24%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 66% 78%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 90% 56%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 44% 12%, #fff 50%, transparent 51%),
		radial-gradient(ellipse 70% 40% at 50% 30%, rgb(157 247 255 / 0.12), transparent 70%);
	opacity: 0.8;
}
.v-c .cta-flyer { box-shadow: 0 0 0 1px rgb(157 247 255 / 0.25), 0 30px 60px -20px rgb(0 0 0 / 0.7); }
.v-c .cta-kicker { color: #9df7ff; opacity: 1; }
.v-c .cta-date, .v-c .cta-title { color: #9df7ff; text-shadow: 0 0 18px rgb(157 247 255 / 0.55); }
.v-c .cta-venue { color: #d8f6fa; opacity: 1; }
.v-c .cta-btn {
	background: #9df7ff; color: #0c0a17; font-weight: 800; letter-spacing: 0.14em;
	box-shadow: 0 0 0 0 rgb(157 247 255 / 0.6), 0 10px 30px -8px rgb(157 247 255 / 0.6);
	animation: cta-pulse 2.4s ease-out infinite;
}
.v-c .cta-btn:hover { background: #c4fbff; }
@keyframes cta-pulse {
	0% { box-shadow: 0 0 0 0 rgb(157 247 255 / 0.55), 0 10px 30px -8px rgb(157 247 255 / 0.6); }
	70%, 100% { box-shadow: 0 0 0 16px rgb(157 247 255 / 0), 0 10px 30px -8px rgb(157 247 255 / 0.6); }
}
@media (prefers-reduced-motion: reduce) { .v-c .cta-btn { animation: none; } }
.v-c .cta-more { color: #9df7ff; }

/* ---------- pie limpio (como iLiFE) ----------
   Blanco, logo, iconos y dos líneas de texto pequeño. La cápsula de contacto con el
   email dentro pesaba como un botón principal: ahora es un enlace discreto. */
.v-c footer { background: #fff; padding: 56px var(--gutter) calc(36px + env(safe-area-inset-bottom)); }
.v-c .foot-in { gap: 28px; }
.v-c .foot-logo { width: 220px; }
.v-c .foot-contact, .v-c .foot-in .foot-contact {
	display: inline; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
	color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.v-c .foot-contact small { display: none; }
.v-c .copy { margin-top: 18px; font-size: 11px; letter-spacing: 0.06em; }
.v-c .menu .foot-sns { margin: 32px 0 8px; }
.v-c .menu .foot-sns { display: flex; justify-content: center; gap: 26px; max-width: none; }
.v-c .menu .foot-sns .fs { min-height: 0; padding: 0; border: 0; justify-content: center; }
.v-c .menu .fs-x, .v-c .menu .fs-tiktok { color: #000; }
.v-c .menu .fs-instagram { color: #e1306c; }
.v-c .menu .fs-youtube { color: #ff0000; }

/* el menú es siempre el trébol, también sobre barra blanca (antes ahí pasaba a ≡ normal
   y cambiaba de forma al bajar) */

/* ================= móvil: al bajar, solo el trébol =================
   Arriba del todo, logo + trébol (sobre la foto en la home, sobre blanco dentro). Al
   bajar, la barra y el logo se van y queda el trébol flotando en la esquina, como el
   botón de inoriminase: todo el ancho para el contenido. Con el menú abierto vuelve la
   barra blanca con el logo. */
@media (max-width: 959px) {
	.v-c .bar .logo { transition: opacity 0.25s; }
	.v-c.scrolled:not(.menu-open) .bar, .v-c.scrolled:not(.menu-open).home .bar.solid {
		background: transparent; border-bottom-color: transparent; backdrop-filter: none; pointer-events: none;
	}
	.v-c.scrolled:not(.menu-open) .bar .logo { opacity: 0; }
	.v-c.scrolled .bar .burger { pointer-events: auto; }
	/* el trébol relleno vuelve a flotar con su sombra */
	.v-c.scrolled:not(.menu-open) .bar .burger { filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.25)); }
	.v-c.scrolled:not(.menu-open) .bar .burger span,
	.v-c.scrolled:not(.menu-open) .bar .burger span::before,
	.v-c.scrolled:not(.menu-open) .bar .burger span::after { width: 12px; height: 2px; background: #fff; }
	.v-c.scrolled:not(.menu-open) .bar .burger span::before { top: -4px; }
	.v-c.scrolled:not(.menu-open) .bar .burger span::after { top: 4px; }
}

/* ================= DISCOGRAPHY: carrusel (como inoriminase) ================= */
.dcar { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.dcar-track {
	--w: 70vw;
	display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 10px calc((100% - var(--w)) / 2);
}
.dcar-track::-webkit-scrollbar { display: none; }
.dcar-slide {
	position: relative; flex: 0 0 var(--w); scroll-snap-align: center; display: block;
	transform: scale(0.82); opacity: 0.55; transition: transform 0.35s, opacity 0.35s;
}
.dcar-slide.on { transform: none; opacity: 1; }
.dcar-jump .dcar-slide { transition: none; } /* el salto invisible a la copia del medio (site.js) */
.dcar-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.45); }
.dcar-type {
	position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 4px;
	background: rgb(42 115 84 / 0.85); color: #fff; font: 700 11px/1.4 "Quicksand", sans-serif; letter-spacing: 0.08em;
}
.dcar-arrow {
	position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%; z-index: 2; cursor: pointer;
	background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}
.dcar-arrow::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
	border-right: 1.8px solid var(--frame); border-bottom: 1.8px solid var(--frame);
}
.dcar-arrow.prev { left: calc((100% - 70vw) / 2 - 10px); }
.dcar-arrow.prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.dcar-arrow.next { right: calc((100% - 70vw) / 2 - 10px); }
.dcar-arrow.next::after { transform: translate(-70%, -50%) rotate(-45deg); }

.dcar-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dcar-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--frame-soft); transition: width 0.3s, background 0.3s; }
.dcar-dots span.on { width: 18px; background: var(--frame); }
.dcar-date { margin: 18px 0 0; color: var(--frame); font: 700 14px/1 "Quicksand", sans-serif; letter-spacing: 0.06em; }
.dcar-title { margin: 8px 0 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
@media (min-width: 960px) {
	.dcar { margin-inline: auto; max-width: 1120px; }
	.dcar-track { --w: 420px; gap: 24px; }
	.dcar-arrow { width: 44px; height: 44px; margin-top: -22px; }
	.dcar-arrow.prev { left: calc(50% - 210px - 22px); }
	.dcar-arrow.next { right: calc(50% - 210px - 22px); }
	.dcar-date, .dcar-title { text-align: center; }
	.dcar-title { font-size: 20px; }
}
.v-c #music .head .more-link { display: none; }

/* ================= MOVIE: 4 reproductores de YouTube apilados (como Ange☆Reve) ================= */
.vstack { list-style: none; margin: 0 calc(-1 * var(--gutter) + 8px); padding: 0; display: grid; gap: 10px; }
.vstack iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
@media (min-width: 960px) {
	.vstack { margin: 0 auto; max-width: 1120px; grid-template-columns: 1fr 1fr; gap: 20px; }
	.vstack iframe { border-radius: 8px; }
}
/* ficha de la portada activa centrada bajo ella */
.dcar-date, .dcar-title { text-align: center; }

/* ================= botones secundarios: todos iguales =================
   VIEW ALL, la tienda, はじめての方へ, ver スケジュール…: contorno verde, mismo tamaño
   y la flecha a la derecha. El único botón relleno de color es チケットを取る (y los de
   チケット / 入会する), que son la acción principal. */
.v-c :is(.view-all a, .btn-wide) {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: min(100%, 320px); min-height: 52px; margin-inline: auto; padding: 0 44px;
	border: 1.5px solid var(--frame); border-radius: 6px; background: #fff; color: var(--frame);
	font: 700 15px/1.3 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: 0.1em; text-align: center; text-decoration: none;
	box-shadow: none;
}
.v-c .btn-wide::after { content: "›"; position: absolute; right: 18px; font-size: 20px; }
.v-c .view-all a span { position: absolute; right: 18px; font-size: 20px; }
.v-c :is(.view-all a, .btn-wide):hover { background: var(--frame); color: #fff; }
.v-c .gd-shop .btn-wide { width: min(100%, 320px); min-width: 0; padding-inline: 44px; }
/* etiquetas de las lives: todas en el menta (無料 incluido) y del mismo ancho, que la
   columna se lea alineada aunque el texto tenga 2 o 3 letras */
.v-c .tag, .v-c .tag-hot, .v-c .tag-free {
	display: inline-flex; justify-content: center; min-width: 5.4em; box-sizing: border-box;
	background: var(--mint-soft); color: var(--mint-ink); box-shadow: none; border-radius: 6px; font-weight: 700;
}

/* home: la lista de lives es un avance; menos peso en cada fila */
/* チケット compacto, en la línea de la hora y a la derecha: no añade altura a la fila */
.v-c.home #schedule .ev-foot { flex-wrap: nowrap; align-items: center; }
.v-c.home #schedule .btn-ticket {
	margin-left: auto; flex: none; min-height: 0; height: 32px; padding: 0 16px;
	display: inline-flex; align-items: center; border-radius: 6px; font-size: 13px; letter-spacing: 0.08em;
	position: relative; z-index: 2;
}
.v-c.home #schedule .ev-title { font-size: 16px; line-height: 1.5; }
.v-c.home #schedule .ev-meta { font-size: 13px; }
.v-c.home #schedule .ev-foot { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.v-c.home #schedule .ev.next .ev-title { font-size: 17px; }
.v-c .ev-foot > * { white-space: nowrap; }
.v-c.home #schedule .ev-foot { gap: 8px; }
/* hora bajo la fecha */
.v-c .date .tm { margin-top: 4px; color: var(--ink-2); font: 600 12px/1 "Quicksand", sans-serif; letter-spacing: 0.02em; }
.v-c .ev-foot:not(:has(*)) { display: none; }
/* la etiqueta va al final del título (no ocupa fila propia) */
.v-c .ev-title .tag { margin-left: 6px; vertical-align: 2px; font-size: 11px; line-height: 1.7; }

/* ================= filas de live (como oshisuki) ================= */
.v-c .evc { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; position: relative; }
.v-c .evc-flyer { flex: 0 0 84px; }
.v-c .evc-flyer img, .v-c .evc-noflyer {
	display: block; width: 84px; height: 118px; object-fit: cover; border-radius: 6px;
	box-shadow: 0 4px 12px -6px rgb(0 0 0 / 0.35);
}
.v-c .evc-noflyer {
	display: grid; place-items: center; background: var(--mint-soft); color: var(--frame); box-shadow: none;
	font: 600 italic 22px/1 var(--display);
}
.v-c .evc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v-c .evc-when { margin: 0; color: var(--frame); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.v-c .evc-wd { font-size: 12px; }
.v-c .evc-wd.sat { color: var(--sat); } .v-c .evc-wd.sun { color: var(--sun); }
.v-c .evc-time { margin-left: 10px; }
.v-c .evc-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.v-c .evc-title a { color: var(--ink); text-decoration: none; }
.v-c .evc-title a::after { content: ""; position: absolute; inset: 0; }
.v-c .evc-meta { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 13px; }
.v-c .evc-meta .tag { flex: none; margin: 0; }
.v-c .evc-venue { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-c .evc-ticket {
	position: relative; z-index: 2; align-self: flex-start; margin-top: 8px;
	display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 6px;
	background: var(--frame); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none;
}
.v-c .evc-ticket:hover { background: #1f5c43; }
.v-c .events .evc + .evc { border-top: 1px solid var(--line); }
/* NEXT LIVE: misma fila, sobre crema y con la etiqueta dorada */
.v-c .evc.next { padding: 26px 12px 16px; margin: 12px -6px 6px; border-radius: 8px; background: #fbf6ec; }
.v-c .evc.next + .evc { border-top: 0; }
@media (min-width: 960px) {
	.v-c .evc { gap: 24px; padding: 22px 8px; }
	.v-c .evc-flyer { flex-basis: 110px; }
	.v-c .evc-flyer img, .v-c .evc-noflyer { width: 110px; height: 155px; }
	.v-c .evc-when { font-size: 15px; }
	.v-c .evc-title { font-size: 19px; }
	.v-c .evc-meta { font-size: 14px; }
	.v-c .evc.next { padding: 32px 24px 22px; margin-inline: -12px; }
}
/* fecha y hora en turquesa vivo (familia de los destellos del logo), como el rosa de
   oshisuki: es lo que el ojo busca primero en la lista. #00857e da 4,5:1 sobre blanco. */
.v-c .evc-when { color: #00857e; }
/* en las filas de live la etiqueta es secundaria, gris como en oshisuki: lo que tiene que
   saltar a la vista es la fecha (turquesa) y チケット (verde) */
.v-c .evc-meta .tag { background: #f1f1f3; color: #6b6b73; }
/* eventos propios (con página larga): solo el fondo, en el cian de su ワンマン; la etiqueta sigue gris para no
   confundirse con チケット. El dorado
   queda solo para NEXT LIVE, que manda si coinciden. */
.v-c .evc.own:not(.next) { margin: 8px -6px; padding-inline: 12px; border-radius: 8px; background: #e8fcff; box-shadow: inset 0 0 0 1px #9df7ff; } /* el cian de la ワンマン (.cta), en tinte */
.v-c .events .evc.own + .evc, .v-c .events .evc + .evc.own { border-top: 0; }
@media (min-width: 960px) { .v-c .evc.own:not(.next) { margin-inline: -12px; padding-inline: 20px; } }
/* fechas de NEWS en el mismo turquesa que las de las lives */
.v-c .nw-date { color: #00857e; }

/* ================= turquesa para los textos de acento =================
   El verde oscuro se veía apagado en el texto. Fechas, precios, kickers, enlaces y los
   botones de contorno pasan al turquesa vivo (#00857e, 4,5:1 sobre blanco), familia de
   los destellos del logo. Los rellenos (チケット) y los marcos de las cajas siguen verdes,
   y los títulos de sección en verde casi negro. */
.v-c { --pop: #00857e; }
.v-c :is(.facts dt, .evx-dl dt, .dcar-date, .gd-price, .evc-when, .nw-date, .hist-year, .bn .bn-kicker, .jk-type, .bar-nav a:hover, .menu a:hover span, a.nw:hover .nw-title) { color: var(--pop); }
.v-c :is(.view-all a, .btn-wide) { color: var(--pop); border-color: var(--pop); }
.v-c :is(.view-all a, .btn-wide):hover { background: var(--pop); color: #fff; }
.v-c .vt[aria-current="true"] img { outline-color: var(--pop); }
/* botones rellenos en el mismo turquesa: blanco sobre #00857e da 4,5:1 (AA) */
.v-c :is(.evc-ticket, .btn-ticket, .btn:not(.btn-off)) { background: var(--pop); color: #fff; }
.v-c :is(.evc-ticket, .btn-ticket, .btn:not(.btn-off)):hover { background: #006e69; }
.v-c .btn-off { background: linear-gradient(100deg, #00857e, #006e69); color: #fff; }

/* marcos de las cajas en el turquesa claro del logo: ordenan sin competir con las fechas
   y los botones (que van en el turquesa vivo). Elegido entre 3 versiones, 2026-11-07. */
.v-c { --frame: #7ac9c4; --frame-soft: #d3eeec; }
/* todos los botones con la misma esquina (6px); solo チケットを取る del cierre de la
   ワンマン queda en cápsula, que es la acción principal de toda la web */
.v-c .btn { border-radius: 6px; }

/* ================= menú: solo inglés, centrado (como los títulos de sección) =================
   El japonés a la otra punta de la fila obligaba a cruzar la pantalla para leerlo.
   Se queda en el HTML para lectores de pantalla. */
.v-c .menu a { justify-content: center; gap: 0; }
.v-c .menu a span {
	font: 700 20px/1.2 "Quicksand", "Zen Maru Gothic", sans-serif; font-style: normal; letter-spacing: 0.16em; color: var(--ink);
}
.v-c .menu a small {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.v-c .menu a:hover span { color: var(--pop); }

/* ================= barra fija de la ワンマン (como oshisuki) ================= */
.scta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 6px;
	background: linear-gradient(100deg, #0c0a17, #154667); color: #fff;
	box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.5);
	animation: scta-in 0.3s ease-out;
}
.scta[hidden] { display: none; }
@keyframes scta-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .scta { animation: none; } }
.scta-x { flex: none; width: 32px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.scta-x::before, .scta-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: rgb(255 255 255 / 0.7); }
.scta-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.scta-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.scta-img { flex: none; width: 38px; height: 54px; object-fit: cover; border-radius: 4px; }
.scta-txt { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.35; }
.scta-txt b { color: #9df7ff; font-size: 13px; letter-spacing: 0.02em; }
.scta-txt span { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scta-btn {
	flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 999px;
	background: #9df7ff; color: #0c0a17; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-decoration: none;
}
@media (min-width: 960px) {
	.scta { left: 50%; right: auto; bottom: 20px; width: 560px; transform: translateX(-50%); border-radius: 14px; padding: 10px 14px 10px 6px; }
	@keyframes scta-in { from { transform: translate(-50%, 120%); } }
}
/* en PC no: tapa contenido y la ワンマン ya está en PICK UP y al final */
@media (min-width: 960px) { .scta, .scta:not([hidden]) { display: none; } }

/* ================= página de evento: entradas siempre a mano (como TIGET) =================
   Solo el botón, a todo el ancho: la página ya dice de qué evento es. Sticky, no fixed:
   va pegado abajo mientras se lee el evento y, al acabar sus detalles, se queda en su
   sitio y sube con la página, así el cierre de la ワンマン sale solo. Uno por fecha
   (el 集会): site.js quita los pasados y aquí se enseña el primero. Solo en móvil.
   En su sitio es el botón de entradas de siempre (.evx-ticket); la banda blanca solo
   mientras va pegado (.stuck, site.js), en un ::before para que el botón no salte. */
.tixbar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 25; margin-top: 24px; }
.tixbar.stuck::before {
	content: ""; position: absolute; z-index: -1;
	inset: -10px calc(-1 * var(--gutter)) calc(-10px - env(safe-area-inset-bottom));
	background: rgb(255 255 255 / 0.94); backdrop-filter: blur(8px);
	box-shadow: 0 -8px 24px -14px rgb(36 73 58 / 0.35);
}
/* mismo ancho y alto que 「ほかのライブを見る」 (.btn-wide), pegado y en su sitio */
.v-c .tixbar-btn { width: min(100%, 320px); min-height: 52px; margin-inline: auto; }
.tixbar-btn ~ .tixbar-btn { display: none; }
/* la ワンマン: fijo hasta el final; el footer deja hueco para que no tape el © */
.tixbar.pin { position: fixed; left: var(--gutter); right: var(--gutter); margin: 0; }
@media (max-width: 959px) { .v-c:has(.tixbar.pin) footer { padding-bottom: calc(36px + 72px + env(safe-area-inset-bottom)); } }
.v-c.menu-open .tixbar { display: none; }
@media (min-width: 960px) { .tixbar { display: none; } }

/* ================= ESCRITORIO: todo más grande en pantallas anchas =================
   Mismo método que oshisuki (apps/web/app/zoom.css): zoom por escalones. En un monitor
   de 2000px las secciones se quedaban en una columna de ~860px con texto de 15-17px.
   No se usa el truco de html{font-size:vw} porque anula el zoom del navegador.
   Cabecera, hero y franja PICK UP quedan fuera: ya crecen con clamp()/vw y la altura
   del hero se calcula con ellas. Lo que dentro va en svh se divide por --z para que el
   zoom no lo multiplique. */
@media (min-width: 960px) {
	.v-c { --z: 1; }
	.v-c main, .v-c .cta, .v-c footer { zoom: var(--z); }
	.v-c .cta { min-height: calc(100svh / var(--z)); }
	.v-c .cta-flyer { width: min(400px, calc((100svh / var(--z) - 160px) * 0.707)); }
	/* el VIEW ALL de abajo ya lleva a la página; el enlace de la cabecera sobraba */
	.v-c .head .more-link { display: none; }
}
@media (min-width: 1200px) { .v-c { --z: 1.05; } }
@media (min-width: 1366px) { .v-c { --z: 1.1; } }
@media (min-width: 1536px) { .v-c { --z: 1.2; } }
@media (min-width: 1750px) { .v-c { --z: 1.3; } }
@media (min-width: 1900px) { .v-c { --z: 1.45; } }
@media (min-width: 2300px) { .v-c { --z: 1.7; } }

/* menú también en el pie: al terminar de bajar se puede saltar a otra sección sin subir */
.foot-nav { display: none; }
@media (min-width: 960px) {
	.v-c .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
	.v-c .foot-nav a { padding: 6px 0; text-decoration: none; color: var(--ink); font: 700 13px/1 "Quicksand", sans-serif; letter-spacing: 0.14em; }
	.v-c .foot-nav a:hover { color: var(--pop); }
}

/* ワンマン en escritorio: el texto centrado en vertical junto al flyer y el par centrado
   en la página. Antes el texto iba arriba y en una columna 1fr, y quedaba un hueco grande
   abajo a la derecha. */
@media (min-width: 960px) {
	.v-c .cta-in { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 80px; }
}

/* 「ライブの詳細」: enlace secundario bajo el botón, centrado con él y con la flecha › de
   los demás enlaces. Antes iba subrayado y desplazado, y parecía un resto. */
.v-c .cta-more {
	display: block; width: min(100%, 360px); margin: 14px auto 0; padding: 8px 0;
	text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: #9df7ff; opacity: 0.8;
}
.v-c .cta-more::after { content: "›"; margin-left: 8px; }
.v-c .cta-more:hover { opacity: 1; }
@media (min-width: 960px) { .v-c .cta-more { margin-left: 0; } }

/* ================= NEWS: página de cada noticia ================= */
.v-c .nwp { max-width: 760px; }
.v-c .nwp-date { margin: 20px 0 0; color: var(--pop); font: 700 14px/1 "Quicksand", sans-serif; letter-spacing: 0.06em; }
.v-c .nwp-title { margin: 10px 0 28px; color: var(--ink); font-size: 22px; line-height: 1.55; }
.v-c .nwp-img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 28px; border-radius: 8px; }
.v-c .nwp-text { margin: 0 0 1em; font-size: 16px; line-height: 1.95; }
.v-c .nwp-video { margin: 28px 0; }
.v-c .nwp-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.v-c .nwp-event { margin: 32px 0 0; }
/* enlaces de la noticia: filas como la lista de canciones, justo después del texto */
.v-c .nwp-links { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.v-c .nwp-links li { border-bottom: 1px solid var(--line); }
.v-c .nwp-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.v-c .nwp-links a::after { content: "›"; color: var(--pop); font-size: 18px; }
.v-c .nwp-links a:hover { color: var(--pop); }
.v-c .nwp > .btn-wide { margin: 48px auto 0; }
@media (min-width: 960px) {
	.v-c .nwp-title { font-size: 30px; }
	.v-c .nwp-text { font-size: 17px; }
}

/* ================= DISCOGRAPHY (página) =================
   Rejilla de 3 columnas, como 7 de las 16 webs de referencia (CANDY TUNE, FRUITS ZIPPER,
   日向坂46…). Cada CD luce en su ficha. El tipo (SINGLE) sobra: todos son singles digitales.
   El título de página, solo en inglés como en la home. */
.v-c .page-title span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-c .page .jk-type { display: none; }
.v-c .page .jk-title { margin-top: 10px; }
@media (min-width: 960px) {
	.v-c .page .jk-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
	.v-c .page .jk-title { font-size: 18px; }
}

/* ficha de CD: el ▶ en el turquesa de los botones; títulos de bloque a la izquierda */
.v-c .pv { border-color: var(--pop); color: var(--pop); }
.v-c .pv[aria-pressed="true"] { background: var(--pop); color: #fff; }
.v-c .pv-bar { background: var(--pop); }
.v-c .rl-h { display: block; text-align: left; margin-top: 40px; color: var(--ink); font-size: 15px; letter-spacing: 0.08em; }

/* Páginas internas en escritorio: su altura mínima va en svh y el zoom la multiplicaba
   (a 2000px pedía 1,45 pantallas), dejando un hueco blanco enorme antes del pie en las
   páginas cortas. Se divide por --z, como en oshisuki (zoom.css). */
@media (min-width: 960px) {
	.v-c main.page { min-height: calc((100svh - 360px) / var(--z)); padding-bottom: 96px; }
}

/* ---------- フルで聴く: un botón por plataforma, con su icono en su color ---------- */
.v-c .ls-wrap { margin-top: 24px; }
.v-c .ls-h { margin: 0 0 10px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.v-c .ls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-c .ls a {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px;
	background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color 0.2s, background 0.2s;
}
.v-c .ls a:hover { border-color: var(--frame); background: var(--tint); }
.v-c .ls svg { flex: none; width: 22px; height: 22px; }
.v-c .ls-applemusic svg { color: #fa243c; }
.v-c .ls-spotify svg { color: #1db954; }
.v-c .ls-line svg { color: #06c755; }
.v-c .ls-youtubemusic svg { color: #ff0000; }
.v-c .ls-amazonmusic svg { color: #25d1da; }
.v-c .ls-more { display: inline-block; margin-top: 10px; padding: 6px 0; color: var(--pop); font-size: 13px; font-weight: 700; text-decoration: none; }
.v-c .ls-more::after { content: "›"; margin-left: 8px; }
@media (min-width: 960px) { .v-c .ls { grid-template-columns: repeat(3, 1fr); } }

/* NEWS (página): sin marco, como SCHEDULE. En la home el marco separa bloques; en una
   página de un solo tema la lista larga enmarcada pesaba. Solo fecha y título: el texto
   está en la página de cada noticia. */
.v-c main.page .news { border: 0; box-shadow: none; background: none; padding: 0; max-width: none; border-top: 1px solid var(--line); }
.v-c main.page .news li { border-bottom: 1px solid var(--line); }
.v-c main.page .news li + li { border-top: 0; }
.v-c main.page .news-full .nw { padding: 20px 4px; }

/* ---------- PHOTO (perfil): rejilla 3×3 cuadrada y visor al tocar ---------- */
.ph-grid { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ph { display: block; aspect-ratio: 1; overflow: hidden; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.ph:hover img { transform: scale(1.04); }
@media (min-width: 960px) {
	.ph-grid { margin: 0; gap: 12px; }
	.ph { border-radius: 6px; }
}
/* Visor de fotos: el de oshisuki (foto a pantalla completa, barra fina arriba, flechas a los lados) */
.ph-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; background: rgb(18 12 16); color: #fff; animation: phv-in 0.2s ease-out; }
.ph-view[hidden] { display: none; }
@keyframes phv-in { from { opacity: 0; } }
/* los controles flotan sobre la foto, que ocupa todo el visor */
.phv-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(rgb(18 12 16 / 0.6), rgb(18 12 16 / 0)); transition: opacity 0.2s; pointer-events: none; }
.phv-bar > * { pointer-events: auto; }
.phv-count { margin-top: 16px !important; }
.phv-count { margin: 0; font: 700 14px/1 "Quicksand", sans-serif; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; opacity: 0.85; }
.phv-x { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.phv-x:hover { background: rgb(255 255 255 / 0.15); }
.phv-x:focus:not(:focus-visible) { outline: none; }
.phv-x::before, .phv-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.5px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.phv-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.phv-main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.phv-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.phv-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform 0.2s; -webkit-user-drag: none; }
.phv-stage img.zoomed { cursor: grab; }
.phv-stage img.touching { transition: none; }
.phv-arrow { display: none; z-index: 2; transition: opacity 0.2s; position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.15); box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); cursor: pointer; }
.phv-arrow:hover { background: rgb(255 255 255 / 0.25); }
.phv-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.phv-arrow.prev { left: 16px; } .phv-arrow.prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.phv-arrow.next { right: 16px; } .phv-arrow.next::after { transform: translate(-70%, -50%) rotate(-45deg); }
.ph-view.single .phv-arrow, .ph-view.pulling .phv-arrow { display: none; }
/* con el dedo se pasa deslizando, como en oshisuki: las flechas, solo con ratón */
@media (hover: hover) and (pointer: fine) { .phv-arrow { display: block; } }
.ph-view.ui-off .phv-bar, .ph-view.ui-off .phv-arrow { opacity: 0 !important; pointer-events: none; }
.ph-view.ui-off .phv-bar > * { pointer-events: none; }

/* con FOR BEGINNERS el menú tiene 9 entradas: entre 960 y 1199px se aprieta para caber en
   una fila */
@media (min-width: 960px) and (max-width: 1199px) {
	.v-c .bar-nav a { padding-inline: 8px; letter-spacing: 0.1em; }
}

/* ================= FOR BEGINNERS =================
   Contenido primero: quién es (foto pequeña), tres canciones con ▶ y los 4 pasos, cada uno
   con lo que hace falta para darlo. */
.v-c .beginners { max-width: 760px; }
/* Bienvenida de ひとみ: la foto manda, cuadrada y sin adornos (cercanía, como una foto suya) */
.v-c .bg-intro { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 8px 0 40px; }
.v-c .bg-face { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; justify-self: center; border-radius: 8px; object-fit: cover; object-position: 50% 15%; }
/* nombre como en PROFILE (.pf-name): japonés en negrita + nombre latino en cursiva */
.v-c .bg-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: 0.06em; }
.v-c .bg-name small { color: var(--ink-2); font-family: var(--display); font-style: italic; font-weight: 600; font-size: 16px; letter-spacing: 0.04em; }
.v-c .bg-text { margin: 8px 0 0; font-size: 15px; line-height: 1.85; white-space: pre-line; } /* respeta los saltos de línea del texto de ひとみ */
.v-c .bg-more { display: inline-block; margin-top: 12px; padding: 6px 0; color: var(--pop); font-size: 14px; font-weight: 700; text-decoration: none; }
.v-c .bg-more::after { content: "›"; margin-left: 8px; }
/* Títulos de paso como los de las páginas de evento (.evl-h): turquesa con línea fina debajo */
.v-c .bg-h { display: block; margin: 0 0 14px; padding-bottom: 10px; text-align: left; border-bottom: 1px solid var(--frame); color: var(--pop); font-size: 18px; letter-spacing: 0.08em; }
.v-c .bg-step { position: relative; padding: 36px 0 32px 52px; }
.v-c .bg-num { position: absolute; left: 0; top: 34px; margin: 0; color: var(--frame); font: 700 22px/1 "Quicksand", sans-serif; }
.v-c .bg-step .events { margin-top: 16px; }
.v-c .events:empty { display: none; }
@media (min-width: 960px) {
	/* la foto toma el alto del texto (height 0 + min-height 100%: no estira la fila) */
	.v-c .bg-intro { grid-template-columns: 300px 1fr; gap: 44px; align-items: stretch; margin-bottom: 56px; }
	.v-c .bg-face { max-width: none; aspect-ratio: auto; height: 0; min-height: 100%; }
	.v-c .bg-h { font-size: 20px; }
	.v-c .bg-step { padding-left: 72px; }
	.v-c .bg-num { font-size: 28px; }
}
@media (max-width: 959px) {
	/* número y título en una sola línea, con la raya fina debajo de los dos */
	.v-c .bg-step { padding-left: 0; display: grid; grid-template-columns: auto 1fr; }
	.v-c .bg-step > * { grid-column: 1 / -1; }
	.v-c .bg-step > .bg-num { grid-column: 1; position: static; margin: 0 0 14px; padding: 0 10px 10px 0; border-bottom: 1px solid var(--frame); font-size: 18px; }
	.v-c .bg-step > .bg-h { grid-column: 2; }
	.v-c .bg-step > .bg-num, .v-c .bg-step > .bg-h { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; line-height: 1.4; }
}

.v-c .bg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.v-c .bg-actions .btn { min-width: 200px; justify-content: center; }
.v-c .bg-follow, .v-c .bg-yt {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 6px;
	font-size: 15px; font-weight: 700; text-decoration: none;
}
.v-c .bg-follow { border: 1.5px solid #111; color: #111; background: #fff; }
.v-c .bg-yt { background: #ff0000; color: #fff; min-width: 220px; }
.v-c .bg-yt:hover { background: #d90000; }
.v-c .bg-follow svg, .v-c .bg-yt svg { width: 20px; height: 20px; }
.v-c .bg-actions .bg-more { margin-top: 0; }
/* 特典会: precios como lista de dos columnas y la nota de la primera vez destacada */
.v-c .bg-menu { margin: 18px 0 0; border-top: 1px solid var(--line); }
.v-c .bg-menu div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.v-c .bg-menu dt { font-weight: 700; }
.v-c .bg-menu dd { margin: 0; color: var(--pop); font: 700 17px/1 "Quicksand", sans-serif; }
.v-c .bg-first { display: inline-block; margin: 14px 0 0; padding: 6px 12px; border-radius: 4px; background: #fbf6ec; color: #8a6a4c; font-size: 14px; font-weight: 700; }
/* hojas (特典会, goods): a todo el ancho de la columna, que se lean sin abrirlas */
.v-c .bg-sheet { display: block; margin-top: 20px; aspect-ratio: auto; border-radius: 8px; }
.v-c .bg-sheet img { height: auto; }
.v-c .bg-follow { background: #111; color: #fff; border-color: #111; min-width: 220px; }
.v-c .bg-follow:hover { background: #333; }
.v-c .bg-step .events + .bg-more { margin-top: 8px; }
/* normas de grabación: aviso crema, la parte OK fuerte y la excepción debajo */
.v-c .bg-rule { margin: 20px 0 4px; padding: 14px 16px; border-radius: 8px; background: #fbf6ec; }
.v-c .bg-rule-ok { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.v-c .bg-rule-ng { margin: 4px 0 0; color: #8a6a4c; font-size: 13px; }
.v-c .bg-radio { margin: 18px 0 0; color: var(--ink-2); font-size: 14px; }
.v-c .bg-radio a { color: var(--pop); font-weight: 700; text-decoration: none; }
.v-c .bg-radio a::after { content: "›"; margin-left: 6px; }

/* ---------- FOR BEGINNERS en la home: tarjeta enmarcada al final de PROFILE ---------- */
.v-c .bgc {
	position: relative; display: grid; gap: 4px; margin: 28px 0 0; padding: 22px 56px 22px 24px; text-align: left;
	background: #fff; border: 2px solid var(--frame); border-radius: 2px; box-shadow: 9px 9px 0 -2px #fff, 9px 9px 0 0 var(--frame-soft);
	color: var(--ink); text-decoration: none;
}
.v-c .bgc::after { content: "›"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--pop); font-size: 26px; transition: transform 0.2s; }
.v-c .bgc:hover::after { transform: translate(4px, -50%); }
.v-c .bgc-en { color: var(--pop); font: 700 13px/1.2 "Quicksand", sans-serif; letter-spacing: 0.16em; }
.v-c .bgc-ja { color: var(--ink); font-size: 20px; font-weight: 700; }
.v-c .bgc-text { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.v-c .pf-more { display: inline-block; margin-top: 14px; padding: 6px 0; color: var(--pop); font-size: 14px; font-weight: 700; text-decoration: none; }
.v-c .pf-more::after { content: "›"; margin-left: 8px; }
@media (min-width: 960px) { .v-c .bgc { margin-top: 36px; padding: 26px 64px 26px 32px; } .v-c .bgc-ja { font-size: 22px; } }
/* PHOTO en móvil: 2 columnas (en 3 se veían pequeñas) y la primera a todo el ancho, así
   las 9 encajan sin hueco: 1 grande + 4 filas de 2 */
@media (max-width: 959px) {
	.ph-grid { grid-template-columns: 1fr 1fr; }
	.ph-grid li:first-child { grid-column: 1 / -1; }
	.ph-grid li:first-child .ph { aspect-ratio: 4 / 3; }
}
html.phv-lock, html.phv-lock body { overflow: hidden; }
/* 特典会: cómo funciona, en lista con puntos */
.v-c .bg-list { margin: 18px 0 0; padding: 0 0 0 1.2em; font-size: 14px; line-height: 1.8; }
.v-c .bg-list li + li { margin-top: 6px; }
.v-c .bg-list li::marker { color: var(--pop); }
.v-c .bg-step .events { margin-top: 16px; }
/* lista del 特典会: nota bajo el nombre y la fila de la primera vez destacada, con el precio
   normal tachado */
.v-c .bg-menu dt small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.v-c .bg-menu .bg-new { margin-top: 10px; padding: 14px 12px; border: 0; border-radius: 8px; background: #fbf6ec; }
.v-c .bg-new-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: linear-gradient(100deg, #9a7557, #ae8d6f 55%, #9a7557); color: #fff; font-size: 11px; vertical-align: 2px; }
.v-c .bg-menu .bg-new dd { display: flex; align-items: baseline; gap: 8px; }
.v-c .bg-menu .bg-new s { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.v-c .bg-menu .bg-new { align-items: center; }
/* la nota va en la misma línea, después del nombre */
.v-c .bg-menu dt small { display: inline; margin: 0 0 0 8px; }
/* おうちから楽しむ: SHOWROOM y la radio, filas iguales bajo el botón de YouTube */
.v-c .bg-also { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.v-c .bg-also li { border-bottom: 1px solid var(--line); }
.v-c .bg-also a { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-height: 52px; padding: 10px 28px 10px 4px; position: relative; color: var(--ink); text-decoration: none; }
.v-c .bg-also a::after { content: "›"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--pop); font-size: 18px; }
.v-c .bg-also b { font-size: 15px; }
.v-c .bg-also small { color: var(--ink-2); font-size: 13px; }
.v-c .bg-also a:hover b { color: var(--pop); }
.v-c .bg-also-h { margin: 32px 0 0; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.v-c .bg-also-h + .bg-also { margin-top: 10px; }
/* índice de los pasos: chips enlazados a cada sección */
.v-c .bg-toc { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-c .bg-toc a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.v-c .bg-toc a:hover { border-color: var(--frame); background: var(--tint); }
.v-c .bg-toc span { color: var(--pop); font: 700 14px/1 "Quicksand", sans-serif; }
.v-c .bg-step { scroll-margin-top: 16px; }
@media (min-width: 960px) { .v-c .bg-toc { grid-template-columns: repeat(4, 1fr); margin-bottom: 56px; } }
@media (max-width: 959px) { .v-c .bg-step { scroll-margin-top: calc(var(--bar) + 8px); } }

/* ================= EVENTO (página) ================= */
.v-c main.evx { max-width: 1040px; }
.evx-grid { display: grid; gap: 32px; margin-top: 12px; }
.evx-when { margin: 8px 0 0; color: var(--pop); font: 700 30px/1.1 "Quicksand", sans-serif; letter-spacing: 0.02em; }
.evx-y { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 14px; letter-spacing: 0.08em; }
.evx-when .evc-wd { font-size: 16px; }
.v-c .evx-title { display: block; margin: 12px 0 0; text-align: left; color: var(--ink); font-size: 22px; line-height: 1.5; letter-spacing: 0.02em; }
.evx-tag { margin: 12px 0 0; }
.evx-tag .tag { background: #f1f1f3; color: #6b6b73; }
.evx-dl { margin: 24px 0 0; border-top: 1px solid var(--line); }
/* bajo un título de sección (.evl-h) ya hay línea: la de arriba de la tabla sobra */
.evl-h + .evx-dl, .evl-sec .evx-dl { margin-top: 0; border-top: 0; }
.v-c .evl-h + .bg-menu { margin-top: 0; border-top: 0; }
/* en las páginas de evento las notas son largas: debajo del nombre, y el precio nunca se parte */
.v-c .evl-sec .bg-menu dt small { display: block; margin: 4px 0 0; }
.v-c .bg-menu dd { flex-shrink: 0; padding-left: 12px; white-space: nowrap; }
.evx-dl div { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.evx-dl dt { color: var(--ink-2); font-size: 13px; padding-top: 2px; }
.evx-dl dd { margin: 0; font-size: 15px; font-weight: 700; }
.evx-note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.v-c .evx-ticket { display: flex; justify-content: center; width: 100%; max-width: 360px; margin-top: 24px; }
.evx-media { display: grid; gap: 12px; }
.v-c .evx-flyer { display: block; aspect-ratio: auto; overflow: hidden; border-radius: 8px; box-shadow: none; }
.v-c .evx-flyer img { height: auto; }
.v-c .evx-flyer:hover img { transform: none; }
.v-c main.evx > .btn-wide { margin: 56px auto 0; }
/* galería del evento (más de una imagen): el marco toma la forma de la primera (site.js) */
.evx-gal { position: relative; }
.evx-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: 8px; background: #f3f6f5; }
.evx-track::-webkit-scrollbar { display: none; }
.v-c .evx-track .evx-flyer { flex: 0 0 100%; scroll-snap-align: center; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.v-c .evx-track .evx-flyer img { width: 100%; height: 100%; object-fit: contain; }
.evx-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / 0.92); color: #1f2a26; box-shadow: 0 2px 10px rgb(0 0 0 / 0.22); cursor: pointer; }
.evx-nav.prev { left: 10px; }
.evx-nav.next { right: 10px; }
.evx-nav:hover { background: #fff; }
/* en táctil se pasa con el dedo y el 1 / 2 ya lo dice: las flechas solo con ratón */
@media (hover: none) { .evx-nav { display: none; } }
.evx-count { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 99px; background: rgb(0 0 0 / 0.6);
  color: #fff; font: 600 13px/1.4 "Quicksand", sans-serif; letter-spacing: 0.04em; pointer-events: none; }
/* móvil: como las páginas largas, fecha → título → imagen → detalles. Con las entradas en
   la barra fija ya no hace falta subir el botón: arriba va lo que impacta, la imagen. */
@media (max-width: 959px) {
	.evx-grid { gap: 0; }
	.evx-info { display: contents; }
	.evx-info > * { order: 4; }
	.evx-info > .nwp-date { order: 1; }
	.evx-info > .evx-title { order: 2; }
	.evx-media { order: 3; margin-top: 20px; }
	.evx-grid:not(.no-flyer) .evx-tag { margin-top: 24px; }
	/* con la barra fija abajo, ningún otro botón de entradas: se veía repetido */
	.v-c:has(.tixbar) .evx-ticket { display: none; }
}
@media (min-width: 960px) {
	.evx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: start; margin-top: 20px; }
	.evx-grid.no-flyer { grid-template-columns: minmax(0, 640px); }
	.evx-media { order: -1; }
	.evx-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
	.evx-when { font-size: 40px; }
	.v-c .evx-title { font-size: 28px; }
	.evx-media { position: sticky; top: 24px; }
}

/* ================= EVENTO LARGO (ワンマン) =================
   Como las de BanG Dream: key visual arriba, una columna, secciones con título y filete. */
.v-c main.evl { max-width: 760px; }
.v-c .evl-kv { display: block; aspect-ratio: auto; margin: 16px auto 0; max-width: 520px; border-radius: 8px; overflow: hidden; box-shadow: none; }
.v-c .evl-kv img { height: auto; }
.v-c .evl-kv:hover img { transform: none; }
.v-c .evl .evx-when { margin-top: 32px; }
.evl-venue { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.evl-sec { margin-top: 56px; }
.v-c .evl-h { display: block; margin: 0 0 18px; padding-bottom: 10px; text-align: left; border-bottom: 1px solid var(--frame); color: var(--pop); font-size: 18px; letter-spacing: 0.08em; }
.evl-text { margin: 0; font-size: 15px; line-height: 1.95; }
.evl-lead { margin: 0 0 10px; color: var(--ink); font-size: 17px; font-weight: 700; }
.evl-small { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
.evl-map { display: inline-block; margin-left: 12px; color: var(--pop); font-size: 13px; font-weight: 700; text-decoration: none; }
.evl-map::after { content: "›"; margin-left: 6px; }
.evl-tix { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.evl-tix > li { padding: 18px 18px; border: 1px solid var(--line); border-radius: 8px; }
.evl-tix > li:first-child { border-color: var(--frame); background: #f6fbfa; }
.evl-tix-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.evl-tix-head b { font-size: 17px; }
.evl-tix-note { padding: 2px 8px; border-radius: 4px; background: #fbf6ec; color: #8a6a4c; font-size: 12px; font-weight: 700; }
.evl-tix-price { margin-left: auto; color: var(--pop); font: 700 17px/1.3 "Quicksand", "Zen Maru Gothic", sans-serif; }
.evl-perks { margin: 12px 0 0; padding-left: 1.2em; font-size: 14px; line-height: 1.85; }
.evl-perks li::marker { color: var(--pop); }
.evl-sheets { margin-top: 20px; }
.v-c .evl-sheet { display: block; width: 160px; aspect-ratio: auto; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.v-c .evl-sheet img { height: auto; }
.evl .rl-mv { margin: 12px 0 0; }
.v-c main.evl > .btn-wide { margin: 72px auto 0; }
@media (min-width: 960px) { .v-c .evl-h { font-size: 20px; } .evl-sec { margin-top: 72px; } }
.v-c .evl .evx-when { margin-top: 16px; }
.v-c .evl .evx-title { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.v-c .evl-kv { margin-top: 28px; }
.v-c .evl-venue { margin-top: 24px; }
/* enlace de vuelta (noticias, discografía): pequeño y gris, que no compita con el título.
   En las páginas de concierto no hay: para volver está 「ほかのライブを見る」 al final. */
.v-c .back { display: inline-block; margin-top: 8px; padding: 6px 0; color: var(--ink-2); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; }
.v-c .back:hover { color: var(--pop); }
.v-c .event .evx-when { margin-top: 16px; }

/* ================= MOVIE (página) ================= */
.v-c main.mvp { max-width: 1120px; }
.mv-sec { margin-top: 32px; }
.mv-sec + .mv-sec { margin-top: 64px; }
.mv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px; }
.mv-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.mv-thumb:hover img { transform: scale(1.03); }
.mv-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 46px; margin: -23px 0 0 -32px; border-radius: 12px; background: rgb(255 0 0 / 0.92); }
.mv-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.mv-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.mv-title { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.mv-title small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.mv-cta { margin-top: 72px; padding: 32px 20px; border-radius: 8px; background: var(--band); text-align: center; }
.mv-cta p { margin: 0 0 16px; font-weight: 700; color: var(--ink); }
@media (min-width: 640px) { .mv-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (min-width: 960px) { .mv-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } }
/* cabecera del concierto = la de la noticia: fecha en una línea pequeña y el mismo título */
.v-c .event .nwp-date { margin-top: 24px; }
.v-c .event .nwp-date .evc-wd { font-size: 13px; }
.v-c .evx-title.nwp-title { margin: 10px 0 0; padding-bottom: 0; border-bottom: 0; color: var(--ink); font-size: 22px; line-height: 1.55; letter-spacing: 0.02em; }
@media (min-width: 960px) { .v-c .evx-title.nwp-title { font-size: 30px; } }
.v-c .evl-kv { margin-top: 32px; }
/* títulos japoneses: cortar por frases, no a mitad de palabra (「アイノカタ／チ」) */
.v-c :is(.nwp-title, .evc-title, .nw-title, .cta-title) { word-break: auto-phrase; text-wrap: pretty; }
.v-c .evl-cta { margin: 28px auto 0; }
/* (los títulos de sección vuelven al turquesa: los enlaces ya son azules y no se confunden) */
/* hover de las filas de live: el turquesa de los enlaces, como en NEWS (el verde --accent
   era de la variante A) */
@media (hover: hover) { .v-c .ev:hover .ev-link, .v-c .evc:hover .evc-title a { color: var(--pop); } }
.v-c .ev:has(.ev-link:focus-visible) { outline-color: var(--pop); }

/* Enlaces de texto en azul subrayado, como BanG Dream (#33aaff): el turquesa es el color de
   las etiquetas (fechas, 誕生日, FOR BEGINNERS…) y un enlace turquesa se confundía con ellas.
   Los botones rellenos siguen en turquesa. La 「›」 va sin subrayar. */
.v-c { --link: #33aaff; }
.v-c :is(.pf-more, .bg-more, .ls-more, .bg-radio a, .evl-map) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.v-c :is(.pf-more, .bg-more, .ls-more, .bg-radio a, .evl-map)::after { display: inline-block; }
.v-c :is(.pf-more, .bg-more, .ls-more, .bg-radio a, .evl-map):hover { opacity: 0.75; }

/* Pasos numerados de una sección libre de la página larga (las colas del 特典会 del UHHD集会) */
.evl-steps { counter-reset: st; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.evl-steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-weight: 700; }
/* números como los pasos de /beginners/ (01, 02…): turquesa claro, sin círculo; el turquesa vivo es de los botones */
.evl-steps li::before { content: counter(st, decimal-leading-zero); flex: none; min-width: 26px; color: var(--frame); font: 700 18px/1 "Quicksand", sans-serif; }

/*
 * Entrada de los bloques de la portada al hacer scroll (como la landing de oshisuki).
 * CSS puro con `animation-timeline: view()`, sin JS: si el script falla, todo se ve.
 * Donde no hay soporte (Firefox) la animación dura 0s y `both` la deja visible.
 * Solo hijos directos de cada bloque: dentro de los carruseles horizontales, view()
 * mediría contra el carrusel y no contra la página.
 */
@keyframes reveal {
	from { opacity: 0; translate: 0 16px; }
	to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.v-c.home main > .block > *,
	.v-c.home main > section:not(.block) {
		animation: reveal linear both;
		animation-timeline: view();
		animation-range: entry 8% cover 20%;
	}
}

/* Producto destacado en el paso del 特典会 de /beginners/ (la camiseta) */
.v-c .bg-pick { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.v-c .bg-pick:hover { border-color: var(--frame); }
.v-c .bg-pick img { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: 6px; background: #f4f4f4; }
.v-c .bg-pick-body { display: grid; gap: 2px; }
.v-c .bg-pick-kicker { color: var(--ink-2); font: 700 11px/1.4 "Quicksand", sans-serif; letter-spacing: 0.12em; }
.v-c .bg-pick b { font-size: 16px; }
.v-c .bg-pick-price { color: var(--pop); font: 700 17px/1.3 "Quicksand", sans-serif; }
.v-c .bg-pick small { color: var(--ink-2); font-size: 13px; }
.v-c .bg-pick-addon { font-size: 13px; font-weight: 700; }
.v-c .bg-pick-addon b { color: var(--pop); font: 700 14px/1.3 "Quicksand", sans-serif; }
/* tarjeta de la camiseta: foto + dos filas (nombre/precio, 落書き/suplemento) */
.v-c .bg-pick-body { flex: 1; gap: 8px; }
.v-c .bg-pick-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v-c .bg-pick-addon { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.v-c .bg-pick-addon .bg-pick-price { font-size: 15px; }

/* Selector de idioma (menú y pie): texto pequeño, por debajo de las SNS. Se usa una vez;
   no tiene que competir con ellas. El idioma actual en verde, los demás en gris. */
.v-c .lang-sw { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; }
.v-c .lang-sw a, .v-c .menu .lang-sw a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border: 0;
	color: var(--ink-2); text-decoration: none; font: 500 13px/1 "Zen Maru Gothic", sans-serif; letter-spacing: 0.04em;
}
.v-c .lang-sw a + a::before { content: "/"; margin: 0 10px 0 -10px; padding-right: 10px; color: var(--line, #ccc); pointer-events: none; }
.v-c .lang-sw a[aria-current], .v-c .menu .lang-sw a[aria-current] { color: var(--pop); font-weight: 700; }
.v-c .lang-sw a:not([aria-current]):hover { color: var(--pop); text-decoration: underline; }
.v-c .menu .lang-sw { margin: 16px auto 0; }

/* Con el menú abierto, la barra de la ワンマン taparía las SNS del final del menú */
.v-c.menu-open .scta { display: none; }

/* Romaji debajo del título japonés (solo en inglés) */
.v-c .rmj { display: block; margin-top: 2px; color: var(--ink-2); font: 500 0.72em/1.4 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: 0.02em; }
.v-c .rl-title .rmj { font-size: 0.6em; margin-top: 4px; }
.v-c .dcar-rmj { margin: 2px 0 0; min-height: 1.4em; font-size: 14px; text-align: center; }
.v-c .mv-title .rmj { font-size: 13px; }

/* FOR BEGINNERS en los dos menús: la estrella de su emblema delante, en turquesa.
   Se probó un recuadro de botón y pesaba demasiado en la barra. */
.v-c .nav-spark { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.45em; vertical-align: -0.08em; color: var(--pop); }

/* ---------- orden de la home: NEWS · SCHEDULE · MOVIE · PROFILE · DISCOGRAPHY (2026-11-09) ----------
   Las franjas siguen alternando: blanco · menta · blanco · menta · blanco · goods en menta
   (con la Fan Club visible, la Fan Club pone la menta y goods vuelve a blanco). */
.v-c #movie { --band: #fff; --paper: #fff; }
.v-c #movie::before { content: none; }
/* B recorta el perfil (era para su arcoíris, que en C no está) y cortaría la franja */
.v-c #profile { --band: var(--tint); --paper: var(--tint); overflow: visible; }
.v-c #profile::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 1;
	left: 50%; width: 100vw; aspect-ratio: auto; transform: translateX(-50%); top: 0; bottom: 0;
	background: var(--band); -webkit-mask-image: none; mask-image: none;
}
.v-c #profile + #goods { --band: #fff; --paper: #fff; }
.v-c #profile + #goods::before { content: none; }
.v-c #music + #goods { --band: var(--tint); --paper: var(--tint); position: relative; }
.v-c #music + #goods::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; width: 100vw; transform: translateX(-50%); top: 0; bottom: 0; background: var(--band);
}
/* en el menú del móvil todo va centrado: la estrella queda fuera de la línea para que
   FOR BEGINNERS se centre igual que las demás palabras */
.v-c .menu a.nav-hl span { position: relative; }
.v-c .menu .nav-spark { position: absolute; right: 100%; top: 50%; margin-right: 0.45em; transform: translateY(-50%); vertical-align: 0; }

/* ---------- CONTACT ---------- */
/* título y contenido en la misma columna estrecha: si no, el título se queda solo a la izquierda */
.v-c .ct, .v-c .contact > .page-title { max-width: 640px; margin-inline: auto; }
.v-c .ct-lead { margin: 16px 0 0; font-size: 15px; line-height: 1.85; }
.v-c .ct-addr { margin: 24px 0 16px; font: 700 19px/1.4 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: 0.02em; word-break: break-all; }
.v-c .ct-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.v-c .ct-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 180px; padding: 0 22px;
	border: 1.5px solid var(--pop); border-radius: 6px; background: #fff; color: var(--pop); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.v-c .ct-main { background: var(--pop); color: #fff; }
.v-c .ct-h { margin: 40px 0 0; font-weight: 700; }

/* Chino y coreano: Zen Maru Gothic es japonesa (sin hangul, y los caracteres simplificados
   que no tiene saldrían de otra fuente, mezclados). Mejor la del sistema para cada idioma. */
html:lang(zh-Hans) body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; }
html:lang(ko) body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif; word-break: keep-all; }

/* ================= cierre: el fan club (tras la ワンマン) =================
   El mismo cierre que la ワンマン, con la misma noche azul y el aguamarina: se ve más
   premium que el verde, y el aguamarina es casi su turquesa. Solo añade los 特典. */
.cta[hidden] { display: none; }
.v-c .cta-photo { object-fit: cover; aspect-ratio: 2 / 3; }
/* el llavero de sus perros (UHHD = sus fans) colgando de la esquina de la foto */
.v-c .cta-pic { position: relative; }
.v-c .cta-charm {
	position: absolute; right: -28px; bottom: -22px; width: 96px; height: auto;
	transform: rotate(8deg); transform-origin: 50% 0;
	filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.45));
}
@media (min-width: 960px) { .v-c .cta-charm { width: 120px; right: -44px; bottom: -30px; } }
.v-c .cta-fc .cta-date { font-style: italic; }
.v-c .cta-fc .cta-title { font-size: 20px; }
@media (min-width: 960px) { .v-c .cta-fc .cta-title { font-size: 24px; } }
.v-c .cta-perks {
	list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px 22px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 460px;
	text-align: left; color: #d8f6fa; font-size: 15px;
}
.v-c .cta-perks li { display: flex; align-items: center; gap: 8px; }
.v-c .cta-perks .clover { width: 14px; height: 14px; flex: none; color: #9df7ff; }
.v-c .cta-fc .cta-btn.is-off { cursor: default; animation: none; }
.v-c .cta-fc .cta-btn.is-off:hover { transform: none; background: #9df7ff; }
@media (max-width: 959px) { .v-c .cta-perks { margin-inline: auto; } }

/* ---------- hero: mientras carga, la misma foto en borroso ----------
   build.mjs pone en --lqip la foto en 20 px; el navegador la estira y se ve difuminada.
   La buena entra encima con el fundido de .ld-wait. */
.hc-photo .sl::before {
	content: ""; position: absolute; inset: -24px;
	background: var(--lqip, none) var(--pos) / cover no-repeat; filter: blur(14px);
}
@media (min-width: 960px) { .hc-photo .sl::before { background-position: var(--wide); } }