:root {
	--green: #80C655;
	--yellow: #DEE041;
	--light-yellow: #F8FA92;
	--blue: #5F9DC9;
	--black: #000000;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}
body {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.8;
	font-size: 16px;
	color: var(--black);
	background: #F8FA92;
}
img {
	max-width: 100%;
}
.container {
	display: flex;
	justify-content: center;
	background: var(--gray);
}
.main {
	max-width: 480px;
	width: 100%;
	position: relative;
	background: #E3E542;
	overflow: hidden;
}

.mv-box {
	position: relative;
	z-index: 5;
}

.mv-box img {
	width: 100%;
	height: auto;
}

.logo-center {
	width: 100%;
	padding: 0 20px;
	position: absolute;
	top: 16%;
	left: 0;
}
.end-txt{
	z-index: 2;
    width: 70%;
    text-align: center;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translateX(-50%);
	background: rgba(255,255,255,.6);
}
.logo-outer {
	width: 100%;
	padding: 0 20px;
	position: absolute;
	z-index: 5;
	top: 16%;
	left: 0;
	/* animation: rotate 6s cubic-bezier(0.25, 1, 0.5, 1) infinite; */
}

@keyframes rotate {
	0% {transform: rotate(0);}
	10% {transform: rotate(370deg);}
	35% {transform: rotate(350deg);}
	60% {transform: rotate(370deg);}
	100% {transform: rotate(362deg);}
}
.before-bg_intro {
	display: block;
	margin-top: -44px;
	width: 100%;
}

.intro {
	background: var(--green);
	position: relative;
	color: #fff;
	margin-top: -1px;
}

.common-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 20px 20px;
}

.section-title {
	color: var(--black);
	font-size: 24px;
	text-align: center;
	font-weight: bold;
	margin: 0px auto;
	letter-spacing: 0.04em;
}

.float-btn {
	position: fixed;
	z-index: 10;
	left:auto;
	right:12px;
	bottom: 12px;
	display: block;
    width: 72px;
    height: 72px;
}

.float-btn, .cta_pc {
	animation: float 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes float {
	0%   { transform:  translate(0%, 0%); }
	20%  { transform:  translate(0%, -15%); }
	40%  { transform:  translate(0%, 0%); }
	100% { transform: translate(0%, 0%); }
}

.logo {
	display: block;
	width: 60px;
	margin: 0 auto;
	padding: 24px 0 8px;
}

.sp-footer {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	font-size: 10px;
	text-align: center;
	padding-bottom: 40px;
	background: var(--yellow);
}

.return {
	margin: -80px auto 20px;
	position: relative;
	z-index: 5;
}

.link-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	line-height: 1.3;
	padding-bottom: 4px;
}

.link-list li:first-child {
	padding-right: 12px;
	border-right: 1px solid #000;
}

.lineup {
	width: 100%;
	margin-top: 24px;
	margin-bottom: 4px;
	position: relative;
}

.lineup img {
	width: 100%;
}

.lineup-title {
	position: absolute;
	top: 0;
	left: 0;
}

.slide-in.active {
	animation: slide-in 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-in {
	0% {
		transform: translateX(-240px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
	}

	40%,
	100% {
		opacity: 1;
	}
}

.before-bg {
	display: block;
	margin-top: -48px;
	position: relative;
	z-index: 5;
	width: 100%;
}

.time-table {
	margin-top: -4px;
}

.event {
	position: relative;
	padding-bottom: 104px;
}

.event1 {
	background: var(--yellow);
}

.event2, .event4 {
	background: var(--green);
}

.event3 {
	background: var(--blue);
	padding-bottom: 0;
}

.event-icon {
	display: block;
	margin: -20px auto 12px;
	position: relative;
	z-index: 5;
}

.event-title img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

.event-photo {
	width: 100%;
	height: auto;
	padding: 0;
}

.event-date {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border-radius: 20px;
	background: var(--light-yellow);
}

.event-date-title {
	font-weight: 800;
}

.event-btn {
	display: flex;
	width: 100%;
	padding: 20px 16px;
	justify-content: center;
	align-items: center;
	border-radius: 40px;
	border: 2px solid #000;
	background: #E5E823;
	font-size: 20px;
	font-weight: 800;
	margin-top: 20px;
	line-height: 130%;
}

.gray-btn{
	background: #c8c8c8;
}

.green-btn {
	background: #8DEC53;
}

.event-note {
	font-size: 11px;
}

.marker {
	background:linear-gradient(transparent 60%, #ecef22 40%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 0.8s;
	font-weight: 800;
}

.event1 .marker {
	background:linear-gradient(transparent 60%, #99ff5a 40%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 0.6s;
	font-weight: 800;
}
  
.marker.active {
	background-size: 100% 100%;
}

.night-text {
	color: #EEF08C;
}

.access {
	background: #fff;
	padding-bottom: 120px;
	margin-top: -1px;
}

.access .common-inner {
	padding-top: 0;
}

.access-title {
	margin: -20px auto 0;
	position: relative;
	z-index: 5;
	display: block;
}

.place-title {
	font-weight: 800;
}

.place-text {
	font-size: 14px;
}

.left-content,
.right-content {
	display: none;
}

.zoom-in {
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
	0% {
	  transform: scale(0.8);
	  opacity: 0;
	}
	65% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
	  opacity: 1;
	  transform: scale(1);
	}
}

.zoom-in2 {
	animation: zoomIn2 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn2 {
	0% {
	  transform: scale(0.8);
	  opacity: 0;
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	  }
	100% {
	  opacity: 1;
	  transform: scale(1);
	}
}

.bounce.active {
	animation: bounce 1s ease-in-out forwards;
}

@keyframes bounce {
	0%  {
	  transform: scale(1.0, 1.0) translate(0, 0);
	}
	15% {
	  transform: scale(0.98, 0.9) translate(0, 5px);
	}
	30% {
	  transform: scale(1.02, 1.0) translate(0, 8px);
	}
	50% {transform: scale(0.98, 1.05) translate(0, -8px);
	}
	70% {
	  transform: scale(1.0, 0.9) translate(0, 5px);
	}
	100% {
	  transform: scale(1.0, 1.0) translate(0, 0);
	}
	0%, 100% {
	  opacity: 1;
	}
  }


@media screen and (min-width: 640px){
	.main {
		max-width: 440px;
		margin: 0 auto;
	}
	
	.left-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 40px;
		background: var(--gray);
		height: 100vh;
		position: sticky;
		top: 0;
		overflow: hidden;
	}
	.left-content::before {
		content: "";
		display: block;
		background: url(../img/deco_top-left.svg) no-repeat top left;
		width: 389px;
		height: 659px;
		position: absolute;
		top: 0;
		left: 0;
	} 
	.left-content::after {
		content: "";
		display: block;
		background: url(../img/deco_bottom-left.svg) no-repeat bottom left;
		width: 203px;
		height: 174px;
		position: absolute;
		bottom: 0;
		left: 0;
	} 
	.head-logo {
		width: 160px;
		position: relative;
		z-index: 1;
	}
	.menu {
		margin-top: auto;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
	}
	.anchor {
		font-weight: 800;
		display: flex;
		flex-direction: column;
		gap: 4px 0;
		max-width: 290px;
		position: relative;
		z-index: 5;
	}

	.anchor li {
		display: flex;
		padding: 16px;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		border-top: 2px solid #000;
		text-align: left;
		line-height: 1.6;
	}

	.anchor li:last-of-type {
		border-bottom: 2px solid #000;
	}

	.anchor li::before {
		content: "";
		display: block;
		background: #000;
		height: calc(tan(60deg) * 8px / 2);
		width: 8px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}

	.gw-title {
		padding-bottom: 16px;
	}

	.cta_pc {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		max-width: 220px;
		gap: 8px 0;
	}
	.float-btn {
		left:auto;
		right:auto;
		bottom: 40px;
		margin: 0px 0 0 340px;
	}
	.cta_pc .cta-btn::before {
		display: none;
	}
	.cta_pc .cta-btn {
		box-shadow: none;
	}
	.right-content {
		display: none;
	}
	.left-content .copyright {
		display: block;
		text-align: left;
		margin-top: 24px;
		font-size: 10px;
	}
	
}
@media screen and (min-width: 1080px){
	.right-content {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		flex: 1;
		padding: 40px;
		height: 100vh;
		position: sticky;
		top: 0;
		overflow: hidden;
	}
	.right-content::before {
		content: "";
		display: block;
		background: url(../img/deco_top-right.svg) no-repeat top right;
		width: 264px;
		height: 294px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.right-content::after {
		content: "";
		display: block;
		background: url(../img/deco_bottom-right.svg) no-repeat bottom right;
		width: 251px;
		height: 242px;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.right-content .menu {
		margin-left: auto;
	}

	.anchor-right {
		width: 290px;
	}

	.cta_pc {
		display: block;
		min-width: 160px;
		margin: 40px auto 0;
		position: relative;
		z-index: 5;
	}
	.cta_pc img {
		display: block;
		width: 100%;
		height: auto;
	}
	.note {
		text-align: right;
		margin-bottom: auto;
		font-size: 16px;
		line-height: 1.3;
	}
	.copyright {
		text-align: right;
		font-size: 10px;
	}
	.left-content .copyright {
		display: none;
	}
	.float-btn {
		display: none;
	}

}