@charset 'UTF-8';

:root {
	--page-change-speed: 0.66s;
}
.outfit {
	font-family: "Outfit", sans-serif;
	font-weight: normal;
	font-style: normal;
}

body { background:black; color:#fff; }
main { overflow:hidden; }

footer { color:black; }
footer .footerContainer { padding:0; }

.blackShadow { box-shadow:3rem 3rem 10rem #00000020; }
.filterShadow { filter:drop-shadow(0 0 10rem #00000020); }

.whiteBg { background:white; color:black; padding:0; }

@media (max-width:780px) {
	section { padding:12rem 0; }
}

/*	VOTE30ロゴ
--------------------------------------------------------*/
.vote30Logo { position:fixed; left:50%; top:50vh; transform:translate(-50%, -50%); opacity:0.1; width:auto; height:75vh; aspect-ratio:378.82 / 517.57; }


/*	ページハンドル
--------------------------------------------------------*/
.pageHandle { position:fixed; left:50%; top:50vh; transform:translate(-50%, -50%); width:80rem; cursor:pointer; transition:left var(--page-change-speed); overflow:hidden; z-index:1000; }
@media (max-width:780px) {
	.pageHandle { width:48rem; }
}


/*	ページタイトル
--------------------------------------------------------*/
.sectionTitle { font-size:40rem; font-weight:bold; }
@media (max-width:780px) {
	.sectionTitle { font-size:24rem; line-height:1.4em; }
}


/*	コンテンツラッパー
--------------------------------------------------------*/
.contentWrapper { padding:40rem 40rem 60rem; }
@media (max-width:780px) {
	.contentWrapper { padding:20rem 12rem 40rem; max-width:344rem; }
}


/*--------------------------------------------------------
	ページラッパー
--------------------------------------------------------*/
.pageWrapper { width:calc(200% - 100rem); display:flex; align-items:stretch; overflow:hidden; transform:translateX(calc(-25% + 25rem)); transition:transform var(--page-change-speed); }
.pageWrapper .page { width:50%; transition:padding var(--page-change-speed); }
.pageWrapper .page section.keyVisual { transition:padding var(--page-change-speed); }
.pageWrapper .page.pageC9 { border-right:2rem solid white; color:black; }
.pageWrapper .page.pageC9 section.keyVisual { padding-left:calc(50% - 25rem); }
.pageWrapper .page.pageC9 .contentWrapper { background:#D9D9D9;}
.pageWrapper .page.pageJT2 { background:#ffffffc0; border-left:2rem solid white; }
.pageWrapper .page.pageJT2 section.keyVisual { padding-right:calc(50% - 25rem); }
.pageWrapper .page.pageJT2 .contentWrapper { background:black; color:white; }
@media (max-width:780px) {
	.pageWrapper { width:calc(200% - 40rem); transform:translateX(calc(-25% + 10rem)); }
	.pageWrapper .page.pageC9 { border-right-width:1rem; }
	.pageWrapper .page.pageC9 section.keyVisual { padding-left:calc(50% - 10rem); }
	.pageWrapper .page.pageJT2 { border-left-width:1rem; }
	.pageWrapper .page.pageJT2 section.keyVisual { padding-right:calc(50% - 10rem); }
}


/***********************************************************

	KEY VISUAL

***********************************************************/
section.keyVisual { display:flex; flex-direction:column; gap:60rem; height:100vh; }
section.keyVisual + section { padding-top:0; }
section.keyVisual .vote30Text { width:50%; }
.pageC9 section.keyVisual .logo { /* aspect-ratio:183.93 / 63.34; */ width:60%; }
.pageJT2 section.keyVisual .logo { /* aspect-ratio:177.36 / 70.72; */ width:52%; }
@media (max-width:780px) {
	section.keyVisual { gap:30rem; }
	section.keyVisual .vote30Text { width:56%; }
	.pageC9 section.keyVisual .logo { width:72%; }
	.pageJT2 section.keyVisual .logo { width:62%; }
}

/*--------------------------------------------------------
	ページ切り替え
--------------------------------------------------------*/
.activeC9 .pageWrapper { transform:translateX(0); }
.activeC9 .pageWrapper .pageC9 { padding-left:50rem; }
.activeC9 .pageWrapper .pageC9 section.keyVisual { padding-left:0; }
.activeC9 .pageWrapper .pageJT2 { cursor:pointer; }
.activeC9 .pageHandle { left:calc(100% - 50rem); }
.activeJT2 .pageWrapper { transform:translateX(calc(-50% + 50rem)); }
.activeJT2 .pageWrapper .pageJT2 { padding-right:50rem; }
.activeJT2 .pageWrapper .pageJT2 section.keyVisual { padding-right:0; }
.activeJT2 .pageWrapper .pageC9 { cursor:pointer; }
.activeJT2 .pageHandle { left:50rem; }
@media (max-width:780px) {
	.activeC9 .pageWrapper .pageC9 { padding-left:0; }
	.activeC9 .pageHandle { left:calc(100% - 20rem); }
	.activeJT2 .pageWrapper { transform:translateX(calc(-50% + 20rem)); }
	.activeJT2 .pageWrapper .pageJT2 { padding-right:0; }
	.activeJT2 .pageHandle { left:20rem; }
}


/***********************************************************

	NEWS

***********************************************************/
section.archiveLists dl { text-align:left; }
section.archiveLists dl + dl { margin-top:20rem; }
section.archiveLists dt { font-size:var(--font-size-L); }
section.archiveLists dd { font-size:var(--font-size-LL); }
@media (max-width:780px) {
	section.archiveLists dl + dl { margin-top:10rem; padding-top:10rem; border-top:1rem solid #666; }
	section.archiveLists dt { font-size:14rem; }
	section.archiveLists dd { font-size:16rem; line-height:1.5em; }
}

.wpPost { padding:40rem; background:white; color:black; }

/***********************************************************

	SCHEDULE

***********************************************************/
section.schedule dl + dl { margin-top:50rem; }
section.schedule dt { font-size:15rem; line-height:28rem; }
section.schedule dt .date { font-size:32rem; font-weight:bold; }
section.schedule dt .sat { color:#0000ff; font-weight:bold; }
section.schedule dt .sun { color:#ff0000; font-weight:bold; }
section.schedule dd p.venue { font-size:32rem; font-weight:bold; letter-spacing:0.05em; }
/* section.schedule dd p.venue span { color:red; } */
@media (max-width:780px) {
	section.schedule .contentWrapper { padding-left:0; padding-right:0; }
	section.schedule dl { text-align:left; padding:16rem 16rem; }
	section.schedule dl + dl { margin-top:0; }
	section.schedule dl:nth-child(even) { background:#00000010; }
	.activeJT2 section.schedule dl:nth-child(even) { background:#ffffff20; }
	section.schedule dt { font-size:13rem; }
	section.schedule dt .date { font-size:20rem; }
	section.schedule dd p.venue { font-size:20rem; letter-spacing:-0.075em; }
	section.schedule dd .inquiry { font-size:13rem; }
}

/***********************************************************

	TICKET

***********************************************************/
@media (max-width:780px) {
}


/***********************************************************

	GOODS

***********************************************************/
section.goods .item { padding-bottom:20rem; border-bottom:1rem solid #666; cursor:pointer; }
section.goods .item .name { font-size:22rem; line-height:1.4em; font-weight:bold; margin-bottom:12rem; min-height:64rem; }
section.goods .item .price { margin-top:12rem; line-height:1.2em; }
section.goods .item .price span { font-size:24rem; font-weight:500; }

html.hoverReady section.goods .item img { transition:transform 0.3s; }
html.hoverReady section.goods .item:hover img { transform:scale(1.1); }
@media (max-width:780px) {
	section.goods .item .name { font-size:15rem; min-height:32rem; }
	section.goods .item .price { margin-top:12rem; line-height:1.2em; }
	section.goods .item .price span { font-size:20rem; font-weight:500; }
	
	section.goods .item .details { padding:0 12rem; }
	section.goods .item dl { font-size:15rem; }
	section.goods .item dt { margin-bottom:6rem; }
	section.goods .item dd { line-height:1.4em; }
}

.noirDialogContent .frame { max-width:1000rem; padding:40rem; background:white; color:black; }
.noirDialogContent .viewer { overflow:hidden; }
.noirDialogContent .viewer .items { white-space:nowrap; line-height:0; }
.noirDialogContent .viewer .items > * { display:inline-block; width:100%; }
.noirDialogContent .details { text-align:left; }
.noirDialogContent .details .name { font-size:24rem; font-weight:bold; text-align:center; }
.noirDialogContent .details .price { margin-top:12rem; text-align:center; }
.noirDialogContent .details .price span { font-size:24rem; font-weight:bold; }
.noirDialogContent dl { margin-top:20rem; }
.noirDialogContent dt { border-bottom:1rem solid; font-weight:bold; margin-bottom:12rem; }
.noirDialogContent .close { width:60rem; height:60rem; }
@media (max-width:780px) {
	.noirDialogContent { padding:12rem; }
	.noirDialogContent .bg { padding: }
	.noirDialogContent .frame { max-width:none; display:block; padding:20rem 12rem 60rem; }
}



/***********************************************************

	BANNERS / ARCHIVES

***********************************************************/
.banners .contentWrapper { display: flex; gap:40rem; background:white; padding:80rem 20rem; max-width:none; }
.banners img { width:auto; height:100rem; }
@media (max-width:780px) {
	.banners .contentWrapper { display: flex; flex-wrap:wrap; gap:10rem; background:white; padding:40rem 0; }
	.banners img { width:auto; height:50rem; }
}

.archive .contentWrapper { padding:40rem 10rem; }
.archive .title { font-size:20rem; font-weight:bold; margin-bottom:20rem; }
.archive .links { display:flex; gap:20rem; }
.archive .links img { width:auto; height:100rem; }
@media (max-width:780px) {
	.archive .contentWrapper { padding:40rem 0; }
	.archive .links { flex-wrap:wrap; gap:10rem; }
	.archive .links img { width:auto; height:50rem; }
}