@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap";

:root {
	--font-futura: futura-pt, sans-serif;
	--center-width: 450px;
	--color-yellow: #FFFF00;
}

*, :after, :before {
    box-sizing: border-box;
}

html
{
	scroll-behavior: smooth;
}

img
{
	pointer-events: none;
	-webkit-user-drag: none; /* Chrome, Safari, Operaを禁止する場合 */
	-khtml-user-drag: none; /* Konquerorを禁止する場合 */
	-moz-user-drag: none; /* Firefoxを禁止する場合 */
}
@keyframes space-drift {
	0% {
		transform: scale(1) translate(0, 0);
	}
	25% {
		transform: scale(1.04) translate(-0.5%, 0.3%);
	}
	50% {
		transform: scale(1.08) translate(0.3%, -0.5%);
	}
	75% {
		transform: scale(1.04) translate(-0.3%, -0.2%);
	}
	100% {
		transform: scale(1) translate(0, 0);
	}
}

body
{
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.7;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;

	&::before
	{
		content: "";
		position: fixed;
		left: 0;
		top: 0;
		/* z-index: -1; */
		width: 100%;
		height: 100vh;
		background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/bg.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		animation: space-drift 35s ease-in-out infinite;
		transform-origin: center center;
	}
}

.-center
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1;
	
	&::before
	{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.35) 100%), url("../images/bg.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	& .-header
	{
		position: relative;
		height: 870px;
		padding: 20px 0 0;
		overflow: hidden;
		
		& .-bg-video
		{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			z-index: -1;
			object-fit: cover;
		}
		
		& .-catch
		{
			position: relative;
			z-index: 1;
			width: 95%;
			margin: 0 auto;
		}
		
		& .-logo
		{
			position: absolute;
			top: calc(50% - 50px);
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			z-index: 1;
		}
		
		& .-schedule
		{
			position: absolute;
			left: 50%;
			bottom: calc(50px + 120px);
			width: 70%;
			transform: translateX(-50%);
			z-index: 1;
		}
	}
	
	& .-sec
	{
		padding: 30px 20px 40px;
	}
	
	& .-title_h2
	{
		color: var(--color-yellow);
		font-family: futura-pt, sans-serif;
		font-weight: 400;
		font-size: 3em;
		line-height: 1;
		margin: 0 0 .7em;
		text-align: center;
	}

	& .-title_h3
	{
		font-weight: 700;
		font-size: 1.6em;
		line-height: 1.6;
		margin: 0 0 1em;
		text-align: center;
	}
	
			
	& .-sec.-about, .-sec.-tickets, .-sec.-contact, .-sec.-collabo
	{
		margin-top: 120px;
		margin-bottom: 120px;
		
		&::before
		{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: -69px;
			background-color: #000000;
			height: 70px;
			width: 100%;
			clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0% 100%);
		}
		
		&::after
		{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			bottom: -69px;
			background-color: #000000;
			height: 70px;
			width: 100%;
			clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
		}
	
		& .-deco_before
		{
			content: "";
			display: block;
			position: absolute;
			left: 0;
            top: calc((-70px - (70px* 0.7)));
            background-color: #000000;
            height: calc(70px + (70px* 0.4));
            width: 100%;
            clip-path: polygon(0% 70%, 100% 0%, 100% 30%, 0% 100%);
		}
	
		& .-deco_after
		{
			content: "";
			display: block;
			position: absolute;
			left: 0;
            bottom: calc((-70px - (70px* 0.7)));
            background-color: #000000;
            height: calc(70px + (70px* 0.4));
            width: 100%;
			clip-path: polygon(0% 70%, 100% 0%, 100% 30%, 0% 100%);
		}
	}

	
	
			
	& .-sec.-collabo
	{
		
		&::before
		{
			background-color: var(--color-yellow);
		}
		
		&::after
		{
			background-color: var(--color-yellow);
		}
	
		& .-deco_before
		{
            background-color: var(--color-yellow);
		}
	
		& .-deco_after
		{
            background-color: var(--color-yellow);
		}
	}

	
	& .-sec.-about
	{
		background-color: #000000;
		color: #ffffff;
		position: relative;
		margin-top: 0;
		
		& .-prev_event
		{
			text-align: center;
			margin: 40px 0 0;

			& .-lead
			{
				font-size: 0.9em;
				margin-bottom: 15px;
				opacity: 0.9;
			}

			& .-btn.-text
			{
				width: auto;
				display: inline-block;
				padding: 12px 30px;
				font-size: 1em;
				font-weight: 700;
				color: #ffffff;
				text-decoration: none;
				transition: opacity 0.3s ease;

				&:hover
				{
					opacity: 0.8;
				}
			}
		}

		& .-schedule_location
		{
			text-align: center;
			margin: 60px 0 0;
			
			& h3
			{
				font-family: futura-pt, sans-serif;
				font-weight: 500;
				font-size: 2em;
				line-height: 1;
				margin: 0 0 .4em;
			}
			
			& p
			{
				font-size: 1.2em;
				font-weight: 700;
				
				&:first-of-type
				{
					margin-bottom: 50px;
				}
			}
		}

	}
	
	& .-sec.-artists
	{
		color: #000000;
		
		& .-text-comingsoon
		{
			font-family: futura-pt, sans-serif;
			font-size: 2.5em;
			font-weight: 500;
			text-align: center;
		}
		
		& .-artist
		{
			margin-bottom: 60px;
			position: relative;
			
			
			&:last-of-type
			{
				margin-bottom: 0;
			}

			& .-img
			{
				vertical-align: bottom;
				margin-bottom: 30px;
			}

			&.-new .-new_badge
			{
				position: absolute;
                top: -10px;
                right: 26px;
                width: 116px;
				height: auto;
				transform-origin: center;
				z-index: 2;
			}

			& .-name
			{
				text-align: center;
				line-height: 1;
				margin-bottom: 20px;

				& img
				{
					height: 30px;
				}
			}
			
			& .-oa
			{
				position: absolute;
				left: 0;
                bottom: 75px;
                width: 160px;
				display: block;
				
			}

			& .-sns
			{
				margin: 0 auto;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				& a
				{
					display: block;
					width: 24px;
					height: 24px;
					margin: 0 15px;
					color: #fff;

					& svg
					{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		& .-andmore
		{
			text-align: center;
			margin-top: 50px;

			& img
			{
				height: 40px;
			}
		}
	}

	& .-sec.-collabo
	{
		background-color: var(--color-yellow);
		color: #000000;
		position: relative;
		padding: 50px 20px 45px;

		& .-title_collabo
		{
			text-align: center;
			margin-bottom: 25px;

			& img
			{
				width: 92%;
				max-width: 360px;
			}
		}

		& .-text
		{
			font-weight: 900;
			font-size: 2.1em;
			line-height: 1.2;
			text-align: center;
			margin: 0;
		}

		& .-collabo-artists
		{
			display: flex;
			flex-wrap: wrap;
			margin: 0 -20px;
		}

		& .-collabo-artist
		{
			width: 50%;

			& img
			{
				width: 100%;
				height: auto;
				display: block;
			}
		}

		& .-collabo-lead
		{
			text-align: center;
			margin: 20px 0 0;

			& img
			{
				width: 92%;
				max-width: 360px;
			}
		}
	}

	& .-sec.-goods
	{
		position: relative;
		padding-top: 26px;
		padding-bottom: 70px;
		color: #000;

		& .-title_h2
		{
			margin-bottom: 20px;
		}

		& .-comingsoon
		{
			text-align: center;
			margin: 0;

			& img
			{
				width: 92%;
				max-width: 360px;
			}
		}

		& .-goods-presale
		{
			text-align: center;
			margin-bottom: 30px;
		}

		& .-goods-presale-title
		{
			font-weight: 900;
			font-size: 1.96em;
			line-height: 1.5;
		}

		& .-goods-presale-subtitle
		{
			font-weight: 700;
			font-size: 1.54em;
			margin-top: 12px;
		}

		& .-goods-presale-time,
		& .-goods-presale-place
		{
			font-weight: 700;
			font-size: 1.33em;
		}

		& .-goods-description
		{
			font-size: 1.09em;
			margin-top: 15px;
			padding: 0 10px;
			line-height: 1.7;
		}

		& .-goods-item
		{
			margin-bottom: 30px;
			text-align: center;
		}

		& .-goods-image
		{
			position: relative;
			margin-bottom: 12px;

			& img
			{
				width: 92%;
				max-width: 360px;
			}
		}

		& .-goods-info
		{
			text-align: center;
		}

		& .-goods-desc
		{
			font-weight: 700;
			font-size: 1.33em;
			margin-bottom: 6px;
		}

		& .-goods-price
		{
			font-weight: 700;
			font-size: 1.33em;
		}

		& .-goods-size
		{
			font-weight: 700;
			font-size: 1.33em;
		}

		& .-goods-notes
		{
			border: 1px solid #000;
			padding: 15px 12px;
			margin-top: 20px;
			text-align: left;
			font-size: 0.98em;

			& .-goods-notes-title
			{
				font-weight: 700;
				font-size: 1.3em;
				text-align: center;
				margin-bottom: 8px;
			}

			& ul
			{
				list-style: none;
				padding: 0;
				margin: 0;
			}

			& li
			{
				margin-bottom: 4px;
				line-height: 1.5;
			}
		}
	}
	
	
	& .-sec.-tickets
	{
		background-color: #000000;
		color: #ffffff;
		text-align: center;
		position: relative;

		& .-btn.-text
		{
			color: #ffffff;
			font-weight: 700;
			text-decoration: none;
		}
		
		& .-type
		{
			margin-bottom: 50px;
		}
		
		& .-title
		{

			font-size: 1.2em;
			font-weight: 700;
			line-height: 1.4;

			& span
			{
				font-size: .6em;
			}
		}
		
		& .-price
		{
			font-size: 1.2em;
			margin-bottom: 30px;
			font-weight: 700;
			line-height: 1.4;

			& span
			{
				font-size: .6em;
			}
		}
		& .-drink
		{
			margin-top: -20px;
		}

		& .-presale
		{
			margin-bottom: 30px;
			
			& .-title
			{
				margin-bottom: 0.6em;
			}
			
			& .-date
			{
				font-size: 1.2em;
				font-weight: 600;
				margin-bottom: 30px;
			}
		}
		
		& .-general
		{
			
			& .-title
			{
				margin-bottom: 0.6em;
			}
			
			& .-date
			{
				font-size: 1.2em;
				font-weight: 600;
				margin-bottom: 30px;
			}
		}

		& .-general + .-general
		{
			margin-top: 50px;
		}
	}
	
	& .-sec.-notice
	{
		color: #000000;
		
		& a
		{
			color: #0066cc;
			text-decoration: underline;
		}
		
		& .-list
		{
			list-style: disc;
			padding: 0 1.5em;
			font-size: 0.9em;
			
			& li
			{
				line-height: 1.4;
				margin-bottom: 5px;
			}
		}
	}
	
	& .-sec.-contact
	{
		background-color: #000000;
		color: #ffffff;
		position: relative;
		
		& h3
		{
			font-size: 1.1em;
		}
		
		& .-pia
		{
			margin-bottom: 50px;
		}
	}
	
	& .-sec.-sponsored
	{
		color: #000000;
		text-align: center;
		font-size: 1.1em;
		font-weight: 600;
		
		& p
		{
			margin-bottom: 1em;	
		}
		
		& p:last-of-type
		{
			margin-bottom: 0;	
		}
	}

		
	.-btn
	{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		display: block;
		border-radius: 9999px;
		padding: 15px;
		line-height: 1;

		& img
		{
			height: 20px;
		}

		&.-enable
		{
			background-color: #2778BE;
		}

		&.-disabled
		{
			background-color: #999999;
		}
	}
	
	
	
	& .-footer
	{
		background-color: #EFEFEF;
		padding: 30px 20px 15px;
		text-align: center;
		
		& .-logo
		{
			margin-bottom: 15px;
			
			& a
			{
				display: block;
				width: 130px;
				margin: 0 auto;
				
				& img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
		
		& .-copyright
		{
			color: #111111;
			font-size: 0.8em;
			
			& a
			{
				color: #111111;
				text-decoration: underline;
			}
		}
	}
	
	& .-share_sp
	{
		position: fixed;
		right: 20px;
		bottom: 30px;
		width: 40px;
		padding: 11px;
		background-color: var(--color-yellow);
		border-radius: 999999px;
		line-height: 1;
		animation: bounce 2s ease-in-out infinite;
		
		& a
		{
			display: block;
		}
	}

	@media screen and (min-width: 768px)
	{
		left: calc((100% - var(--center-width)) / 2);
		width: var(--center-width);
	}
}

.-left
{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	
	@media screen and (min-width: 768px)
	{
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc((100% - var(--center-width)) / 2);
		
		& .-logo
		{
			width: 70%;
			max-width: 400px;
		}
	}
}
.-right
{
	display: none;
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	overflow-x: hidden;
	
	
	& .-gnav
	{
		font-family: futura-pt, sans-serif;
		font-weight: 500;
		font-size: 1.6em;
		line-height: 1.4;
		margin: 0 0 13px;
		text-align: center;

		& a
		{
			color: #ffffff;
			transition-duration: .3s;

			&:hover
			{
				color: var(--color-yellow);
			}
		}
	}
	
	& .-share
	{
		text-align: center;
		margin-bottom: 50px;
		
		& a
		{
			border-radius: 9999px;
			background-color: #000000;
			color: #ffffff;
			display: inline-block;
			font-family: var(--font-futura);
			font-size: 1.1em;
			padding: 6px 20px;
			line-height: 1;
			
			& img
			{
				height: 0.7em;
			}
		}
	}
	
	& .-application
	{
        width: 380px;
        max-width: 90%;
		margin: 0 auto;
		text-align: center;
		
		.-btn
		{	
			display: block;
			border-radius: 9999px;
			padding: 13px 50px 13px 25px;
			line-height: 1;
			position: relative;
			
			& img
			{
				height: 18px;
			}
			
			&.-enable
			{
				background-color: #2778BE;
			}
			
			&.-pre
			{
				&::before
				{
					content: "";
					position: absolute;
					top: -32px;
					right: -19px;
					width: 80px;
					height: 80px;
					background: url("../images/baloon.webp");
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;

				}
			}
		}
	}
	
	@media screen and (min-width: 768px)
	{
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc((100% - var(--center-width)) / 2);
		
		& .-gnav
		{
            font-size: 1.8em;
			line-height: 1.5;
            margin: 0 0 15px;
		}
	}
}


.overlay-bg {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.overlay-bg.active {
	opacity: 1;
	pointer-events: all;
}

.overlay-panel {
	background-color: #ffffff;
	color: #222222;

	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90vh; /* ← 高さを固定（画面の90%） */
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	box-shadow: 0 -2px 20px rgba(0,0,0,0.25);
	z-index: 100;

	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.3s ease;

	display: flex;
	flex-direction: column;
	

	& .-title
	{
		text-align: center;
		font-size: 1.2rem;
		font-weight: 700;
		margin: 20px 0;
		line-height: 1;
	}

	
	& .-course
	{
		margin-bottom: 40px;
		
		& .-name
		{
			margin: 0 max(-44px, -4vw);
			text-align: center;
			
			& img
			{
				width: 95%;
			}
		}
		
		&:first-of-type
		{
			& .-name
			{
				& img
				{
                    width: 79%;
                    margin-left: -5%;
				}
			}
		}
		
		&:nth-of-type(2)
		{
			& .-name
			{
				& img
				{
					width: 89%;
                    margin-left: 4%;
				}
			}
		}
		
		&:last-of-type
		{
			margin-bottom: 0;
			
			& .-name
			{
				& img
				{
                    width: 89%;
                    margin-left: -1%;
				}
			}
		}

		& .-list
		{
			width: fit-content;
			margin: 0 auto 25px;
			margin-top: -60px;
			font-weight: 700;

			& ul
			{
				display: inline-block;
				list-style: disc;

				& li
				{
					text-indent: -0.4em;
				}
			}
		}
		
		& .-btn
		{
			& a
			{
				color: #ffffff;
				background-color: #e4007f;
				transition-duration: .3s;
				
				&::after
				{
				  border-top: 3px solid #ffffff;
				  border-right: 3px solid #ffffff;
				}				
				&:hover
				{
					color: #e4007f;
					background-color: #ffffff;

					&::after
					{
					  border-top: 3px solid #e4007f;
					  border-right: 3px solid #e4007f;
					}				
				}
			}
		}
	}
	
	
	@media screen and (min-width: 768px)
	{
		margin-left: calc(50% - 740px / 2);
		max-width: 740px;
	}
}

.overlay-panel.active {
	transform: translateY(0%);
	opacity: 1;
}

.overlay-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
	
	& strong
	{
		color: #000000;
	}
	
	& p
	{
		margin-bottom: 1em;
	}
	
	& .splide
	{
		margin: 0 -1.5rem;
	}
}

.close-btn {
	background-color: #3a5a9b;
	color: white;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background 0.3s;
	margin: 40px auto 10px;
	display: block;
}

.close-btn:hover {
	background-color: #4972C7;
}
/* スクロールバーのカスタム */
.overlay-content::-webkit-scrollbar {
	width: 8px;
}

.overlay-content::-webkit-scrollbar-track {
	background: transparent;
}

.overlay-content::-webkit-scrollbar-thumb {
	background-color: rgba(100, 100, 100, 0.3);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background-color 0.3s ease;
}

.overlay-content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(100, 100, 100, 0.5);
}

/* Firefox対応 */
.overlay-content {
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 100, 100, 0.3) transparent;
}

.-btn_fin
{
	text-align: center;
	margin-top: 30px;

	& a
	{
		color: #000000;
		background-color: var(--color-yellow);
		border-radius: 8px;
		display: inline-block;
		font-size: 1.2rem;
		font-weight: 700;
		position: relative;
		width: 90%;
		padding: 12px 0;
		text-decoration: none;

		&::after
		{
		  content: '';
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  right: 27px;
		  width: 12px;
		  height: 12px;
		  margin: auto;
		  border-top: 3px solid #000;
		  border-right: 3px solid #000;
		  transform: rotate(45deg);
		  box-sizing: border-box;
		}
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-8px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-4px);
	}
}