/*
Theme Name: Qooo!! LP
Theme URI: https://qooo.chet.com/
Description: Qooo!! Vライバー募集LP用の軽量テーマ（STUDIOからの載せ替え版）。
Author: CHET Group
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: qooo-lp
*/

/* ---------- tokens ---------- */
:root {
	--pink: #ff3d8b;
	--pink-deep: #e0186b;
	--pink-soft: #ffe1ee;
	--sun: #ffc93c;
	--sun-deep: #ffaa1d;
	--ink: #2a1b47;
	--ink-2: #5b4d74;
	--paper: #fff6fa;
	--white: #fff;
	--line: #06c755;
	--line-deep: #04a144;

	--f-round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;

	--col: 480px;
	--gutter: 16px;
	--r-lg: 20px;
	--r-md: 12px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink);
	background: var(--pink-soft);
	background-image: radial-gradient(var(--white) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page {
	max-width: var(--col);
	margin: 0 auto;
	background: var(--paper);
	min-height: 100vh;
	box-shadow: 0 0 0 1px rgba(42, 27, 71, .06);
	overflow-x: clip;
}

/* ---------- header ---------- */
.hd {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
	padding: 0 var(--gutter);
	background: rgba(255, 246, 250, .92);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
}
.hd__logo img { height: 32px; width: auto; }
.hd__logotext { font: 800 22px/1 var(--f-round); color: var(--pink-deep); letter-spacing: .02em; }
.hd__menu {
	width: 44px; height: 44px; margin-right: -10px;
	border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.hd__bars, .hd__bars::before, .hd__bars::after {
	display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); position: relative;
	transition: transform .2s, background-color .2s;
}
.hd__bars::before, .hd__bars::after { content: ""; position: absolute; left: 0; }
.hd__bars::before { top: -7px; }
.hd__bars::after { top: 7px; }
.hd__menu[aria-expanded="true"] .hd__bars { background: transparent; }
.hd__menu[aria-expanded="true"] .hd__bars::before { transform: translateY(7px) rotate(45deg); }
.hd__menu[aria-expanded="true"] .hd__bars::after { transform: translateY(-7px) rotate(-45deg); }

.nav {
	position: absolute; top: 52px; left: 0; right: 0;
	background: var(--white);
	border-bottom: 3px solid var(--pink);
	padding: 8px var(--gutter) 16px;
}
.nav[hidden] { display: none; }
.nav a {
	display: block; padding: 12px 4px;
	font-weight: 700; text-decoration: none;
	border-bottom: 1px dashed var(--pink-soft);
}

/* ---------- CTA ---------- */
.cta { margin-top: 24px; text-align: center; }
.fv .cta { margin-top: 18px; }
.cta__btn {
	display: flex; align-items: center; gap: 12px;
	width: 100%; min-height: 68px; padding: 10px 20px;
	border-radius: 999px;
	background: var(--line);
	color: var(--white);
	text-decoration: none;
	box-shadow: 0 5px 0 var(--line-deep);
	transition: transform .12s, box-shadow .12s;
}
.cta__btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line-deep); }
.cta__icon { width: 34px; height: auto; flex: none; }
.cta__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.35; }
.cta__label { font: 800 18px/1.3 var(--f-round); }
.cta__sub { font-size: 12.5px; font-weight: 700; opacity: .95; }
.cta__note { margin-top: 10px; font-size: 12px; color: var(--ink-2); }

/* ---------- FV ---------- */
.fv {
	position: relative;
	padding: 18px var(--gutter) 28px;
	background:
		radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .55) 0 18%, transparent 18.2%),
		radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .3) 0 28%, transparent 28.2%),
		linear-gradient(180deg, var(--sun) 0%, var(--sun-deep) 100%);
	text-align: center;
}
.fv__target {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-size: 12.5px;
	font-weight: 700;
}
.fv__brand {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	margin-top: 14px;
	font: 800 15px/1 var(--f-round);
}
.fv__app { width: 128px; }
.fv__title {
	margin-top: 6px;
	font: 800 38px/1.16 var(--f-round);
	letter-spacing: .01em;
	color: var(--ink);
	text-shadow: 3px 3px 0 var(--white);
}
.fv__lead { display: block; font-size: 20px; margin-bottom: 2px; }
.fv__sub { margin: 10px auto 0; max-width: 21em; font-size: 14px; font-weight: 700; line-height: 1.6; }

.fv__stage {
	position: relative;
	height: 236px;
	margin: 0 calc(var(--gutter) * -1) -40px;
	pointer-events: none;
}
.chara { position: absolute; bottom: 0; width: auto; max-width: none; }
.chara--l { height: 205px; left: 0; }
.chara--r { height: 240px; right: -12%; bottom: -10px; }
.chara--c { height: 236px; left: 50%; transform: translateX(-52%); }

/* ---------- ticket ---------- */
.ticket {
	position: relative;
	z-index: 2;
	background: var(--white);
	border-radius: var(--r-lg);
	box-shadow: 0 6px 0 var(--pink-deep);
	border: 3px solid var(--pink);
	padding: 26px 8px 14px;
	color: var(--ink);
}
.ticket__ribbon {
	position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
	white-space: nowrap;
	padding: 4px 18px;
	border-radius: 999px;
	background: var(--pink);
	color: var(--white);
	font: 800 14px/1.4 var(--f-round);
}
.ticket__body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ticket__half { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ticket__label { font-size: 12px; font-weight: 700; }
.ticket__big {
	font: 800 46px/1.05 var(--f-round);
	color: var(--pink-deep);
	letter-spacing: -.02em;
}
.ticket__big small { font-size: .42em; letter-spacing: 0; margin-left: 1px; }
.ticket__tail { font: 800 15px/1.3 var(--f-round); }
/* ミシン目：or の位置で切り取り線 */
.ticket__or {
	position: relative;
	align-self: stretch;
	display: grid; place-items: center;
	width: 34px;
	font: 800 14px/1 var(--f-round);
	color: transparent;
	background-image: repeating-linear-gradient(to bottom, var(--pink) 0 5px, transparent 5px 10px);
	background-size: 2px 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.ticket__or::after {
	content: "or";
	position: absolute;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--pink);
	color: var(--pink-deep);
}
.ticket::before, .ticket::after {
	content: "";
	position: absolute; left: 50%;
	width: 22px; height: 22px; margin-left: -11px;
	border-radius: 50%;
	background: var(--sun-deep);
	border: 3px solid var(--pink);
}
.ticket::before { top: -14px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -14px; clip-path: inset(0 0 50% 0); }
.ticket--lg { padding: 30px 10px 18px; }
.ticket--lg .ticket__big { font-size: 54px; }
.ticket--lg::before, .ticket--lg::after,
.final .ticket::before, .final .ticket::after { background: var(--paper); }

/* 読み込み時に一度だけ光る（FVの見どころ） */
.fv .ticket__body { position: relative; overflow: hidden; border-radius: 10px; }
.fv .ticket .ticket__body::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: shine 1.1s .6s ease-out 1 forwards;
	pointer-events: none;
}
.fv .ticket::before, .fv .ticket::after { display: none; }
@keyframes shine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .fv .ticket .ticket__body::after { animation: none; display: none; } }

/* ---------- trust ---------- */
.trust {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
	margin-top: 18px;
}
.trust__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 10px 4px 8px;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .9);
	line-height: 1.25;
}
.trust__icon {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--pink);
	margin-bottom: 4px;
}
.trust__icon img { width: 18px; height: 18px; object-fit: contain; }
.trust__label { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.trust__num { font: 800 20px/1.2 var(--f-round); color: var(--ink); }
.trust__num small { font-size: 11px; }

/* ---------- section common ---------- */
.sec { padding: 56px var(--gutter); }
.sec + .sec { border-top: 2px dashed var(--pink-soft); }
.h2 {
	font: 800 26px/1.35 var(--f-round);
	text-wrap: balance;
	word-break: auto-phrase;
	text-align: center;
	color: var(--ink);
}
.h2::after {
	content: ""; display: block;
	width: 44px; height: 6px; margin: 12px auto 0;
	border-radius: 3px;
	background: var(--pink);
}
.h3 { font: 800 19px/1.4 var(--f-round); margin-bottom: 8px; }
.lead { margin-top: 12px; text-align: center; font-weight: 700; color: var(--ink-2); }
.note { margin-top: 14px; font-size: 12px; color: var(--ink-2); }

/* ---------- worries ---------- */
.worries { background: var(--white); }
.worries__list { margin-top: 24px; display: grid; gap: 10px; }
.worries__list li {
	position: relative;
	padding: 12px 16px 12px 44px;
	border-radius: 18px 18px 18px 4px;
	background: var(--paper);
	font-weight: 700;
	line-height: 1.5;
}
.worries__list li::before {
	content: "";
	position: absolute; left: 14px; top: 50%;
	width: 20px; height: 20px; margin-top: -10px;
	border-radius: 50%;
	background: var(--sun);
	box-shadow: inset 0 0 0 5px var(--white);
	border: 2px solid var(--sun-deep);
}
.worries__answer {
	margin-top: 24px;
	padding: 16px;
	border-radius: var(--r-lg);
	background: var(--pink);
	color: var(--white);
	font: 800 19px/1.5 var(--f-round);
	text-align: center;
	text-wrap: balance;
	word-break: auto-phrase;
	position: relative;
}
.worries__answer::before {
	content: ""; position: absolute; top: -12px; left: 50%; margin-left: -12px;
	border: 12px solid transparent; border-top: 0; border-bottom-color: var(--pink);
}

/* ---------- offer ---------- */
.offer .ticket { margin-top: 36px; }
.offer__detail { margin-top: 28px; display: grid; gap: 12px; }
.offer__item {
	display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
	padding: 14px;
	border-radius: var(--r-md);
	background: var(--white);
	font-size: 14px; line-height: 1.6;
}
.offer__item strong { display: block; font: 800 16px/1.4 var(--f-round); margin-bottom: 2px; }
.offer__icon { width: 64px; height: 64px; object-fit: contain; }

/* ---------- reasons ---------- */
.reasons__list { margin-top: 28px; display: grid; gap: 14px; }
.reason {
	display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start;
	padding: 18px 16px;
	border-radius: var(--r-lg);
	background: var(--white);
	border-left: 6px solid var(--sun);
}
.reason:nth-child(even) { border-left-color: var(--pink); }
.reason__icon { width: 72px; height: 72px; object-fit: contain; }
.reason__title { font: 800 17px/1.4 var(--f-round); }
.reason__points { margin-top: 6px; font-size: 14px; line-height: 1.6; }
.reason__points li { position: relative; padding-left: 18px; margin-top: 4px; }
.reason__points li::before {
	content: ""; position: absolute; left: 2px; top: .55em;
	width: 8px; height: 5px;
	border-left: 2.5px solid var(--pink-deep); border-bottom: 2.5px solid var(--pink-deep);
	transform: rotate(-45deg);
}

/* ---------- voices ---------- */
.voices__list { margin-top: 28px; display: grid; gap: 14px; }
.voice { padding: 18px; border-radius: var(--r-lg); background: var(--white); }
.voice__head { display: flex; align-items: center; gap: 12px; }
.voice__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pink-soft); }
.voice__name { font: 800 17px/1.3 var(--f-round); }
.voice__qa { margin-top: 12px; font-size: 14px; }
.voice__qa dt { margin-top: 10px; font-weight: 700; color: var(--pink-deep); font-size: 12.5px; }

/* ---------- stage ---------- */
.stage { background: var(--white); }
.stage__block { margin-top: 36px; }
.stage__block > p { font-size: 14px; }
.stage__music { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stage__music img { border-radius: var(--r-md); aspect-ratio: 1; object-fit: cover; width: 100%; }
.stage__goods {
	display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	margin: 6px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 12px;
	scrollbar-width: thin;
}
.stage__goods figure { scroll-snap-align: start; }
.stage__goods img { border-radius: var(--r-md); aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--paper); }
.stage__goods figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.quote {
	margin-top: 12px;
	padding: 16px 18px;
	border-radius: var(--r-lg);
	background: var(--paper);
}
.quote__case { font-size: 12px; font-weight: 700; color: var(--pink-deep); }
.quote blockquote { margin-top: 4px; font-weight: 700; line-height: 1.6; }
.quote__who { margin-top: 6px; font-size: 13px; color: var(--ink-2); text-align: right; }
.quote__who::before { content: "— "; }

/* ---------- conditions ---------- */
.cond__list { margin-top: 28px; display: grid; gap: 12px; }
.cond__item {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border-radius: var(--r-lg);
	background: var(--white);
	border: 2px solid var(--pink-soft);
	font: 800 17px/1.45 var(--f-round);
}
.cond__icons { display: flex; flex: none; }
.cond__icons img { width: 52px; height: 52px; }
.cond__icons img + img { margin-left: -14px; }

/* ---------- flow ---------- */
.flow__list { margin-top: 28px; position: relative; }
.flow__list::before {
	content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px;
	width: 3px; border-radius: 2px;
	background: repeating-linear-gradient(to bottom, var(--pink) 0 6px, transparent 6px 11px);
}
.flow__step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 8px 0; }
.flow__num {
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--pink); color: var(--white);
	font: 800 20px/1 var(--f-round);
	box-shadow: 0 0 0 4px var(--paper);
}
.flow__step:last-child .flow__num { background: var(--sun); color: var(--ink); }
.flow__title { font: 800 17px/1.4 var(--f-round); margin-top: 9px; }
.flow__step p { font-size: 14px; color: var(--ink-2); }

/* ---------- faq ---------- */
.faq { background: var(--white); }
.faq__list { margin-top: 28px; display: grid; gap: 10px; }
.faq__item { border-radius: var(--r-md); background: var(--paper); }
.faq__item summary {
	position: relative;
	display: flex; gap: 10px; align-items: flex-start;
	padding: 14px 44px 14px 14px;
	font-weight: 700; line-height: 1.55;
	cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: ""; position: absolute; right: 18px; top: 50%;
	width: 9px; height: 9px; margin-top: -7px;
	border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
	transform: rotate(45deg); transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { display: flex; gap: 10px; padding: 0 14px 16px; font-size: 14px; }
.faq__q, .faq__a {
	flex: none; display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	font: 800 14px/1 var(--f-round);
}
.faq__q { background: var(--ink); color: var(--white); }
.faq__a { background: var(--pink); color: var(--white); }

/* ---------- final ---------- */
.final { background: linear-gradient(180deg, var(--paper), var(--pink-soft)); padding-bottom: 64px; }
.final__title { margin-bottom: 36px; font-size: 23px; }

/* ---------- footer ---------- */
.ft { padding: 28px var(--gutter) 100px; text-align: center; background: var(--ink); color: rgba(255, 255, 255, .8); font-size: 12px; }
.ft__links { display: flex; justify-content: center; gap: 20px; }
.ft__links a { text-decoration: none; }
.ft__copy { margin-top: 10px; }

/* ---------- sticky CTA（FVのボタンが画面外に出たら表示） ---------- */
.sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, rgba(255, 246, 250, .97) 70%, rgba(255, 246, 250, 0));
	transform: translateY(110%);
	transition: transform .25s ease-out;
}
.sticky.is-show { transform: none; }
.sticky__btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	max-width: calc(var(--col) - var(--gutter) * 2); margin: 0 auto;
	height: 56px; border-radius: 999px;
	background: var(--line); color: var(--white);
	font: 800 17px/1 var(--f-round); text-decoration: none;
	box-shadow: 0 4px 0 var(--line-deep);
}
.sticky__btn .cta__icon { width: 28px; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* ---------- 小さい画面 ---------- */
@media (max-width: 359px) {
	.fv__title { font-size: 34px; }
	.ticket__big { font-size: 38px; }
	.ticket--lg .ticket__big { font-size: 44px; }
	.cta__label { font-size: 16px; }
}