@charset "UTF-8";

html{
	-webkit-text-size-adjust: 100%;
	
	--keyColorDeep: #171c61;
	--keyColorMedium: #2b317f;
	--keyColorSoft: #3840a5;
	--keyColorLight: #696eb2;
	--keyColorPale: #bfc2e7;
	--keyColorFaint: #dbddee;
	
	--linkColor: #ffa200;
	--linkHover: #ff6800;
	
	--ColorOsakaD: #dbc400;
	--ColorOsakaL: #f4e141;
	
	--ColorTokyoD: #db3a62;
	--ColorTokyoL: #f06c8e;
	
	--FontGothic: -apple-system, BlinkMacSystemFont, arial, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	--FontRuika: "nitalago-ruika", sans-serif;

	font-family: var(--FontGothic);
}

*, *::before, *::after{
	box-sizing: inherit;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 100;
	font-style: normal;
	font-size: 1em;
	vertical-align: bottom;
	font-family: inherit;
}

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

a{
	text-decoration: none;
}

body{
	&.modal-open{
		overflow:hidden;
		touch-action:none;
	}
	
	&::before{
		content: "";
		position: fixed;
		inset: 0;
		background: url(/games/prospi_a/fanfesta/assets/images/background.webp) center / cover no-repeat;
		z-index: -1;
		opacity: .1
	}
}


div.konami-header{
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	& a:first-child img{
		width: 130px;
	}
	& a:last-child img{
		width: 140px;
		margin-right: .3em;
	}
}

/* ------------------------ header ------------------------ */
header{
	
}
div.fanfesta-header{
	background: var(--keyColorDeep);
	height: 55px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	
	& p{
		font-family: var(--FontRuika);
		font-size: 1.4em;
		font-size: min(4.5vw,1.4em);
		color: #fff;
		position: absolute;
		inset: 0 auto 0 50%;
		transform: translate(-50%,0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	& img{
		margin: auto 10px;
		width: 110px;
	}
	
	@media (max-width:767px){
		& img{
			width: 85px;
		}
	}
	
	& button.menu-open{
		background: var(--keyColorMedium);
		display: block;
		height: 100%;
		aspect-ratio: 1/1;
		position: relative;
		border: none;
		&:hover{
			background: #3840a5;
			transition: .3s;
		}
		&::before{
			content: "";
			inset: 0;
			position: absolute;
			background: url(/games/prospi_a/fanfesta/assets/svg/menu.svg) center / 50% auto no-repeat;
			filter: invert(1);
			cursor: pointer;
		}
	}
}


h1.fanfesta-keyvisual{
	text-align: center;
	position: relative;
	
	&.event{
		position: relative;
		overflow: hidden;
		background: var(--keyColorDeep);
		&::before{
			content: "";
			position: absolute;
			inset: -5%;
			background: url(/games/prospi_a/fanfesta/assets/images/background.webp) center / 150% auto no-repeat;
			filter: blur(5px);
			opacity: .5;
		}
		
		& img{
			margin: auto;
			height: 100%;
			object-fit: cover;
			z-index: 1;
		}
		@media (min-width:768px){
			height: 350px;
			& img{
				transform: scale(1.2);
				--mask: 10em;
				mask-image: linear-gradient(to right, transparent, black var(--mask), black calc(100% - var(--mask)), transparent 100%);
				-webkit-mask-image: linear-gradient(to right, transparent, black var(--mask), black calc(100% - var(--mask)), transparent 100%);
				z-index: 0;
			}
		}
		@media (max-width:767px){
			aspect-ratio: 14/9;
			& img{
				transform: scale(1);
			}
		}
		
	}
	
	&.venue{
		height: 200px;
		display: flex;
		& img{
			height: 85%;
			margin: auto;
			filter: drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
			position: relative;
			z-index: 10;
		}
	}
	
	&:not(.venue):not(.event){
		margin-bottom: 10em;
		padding: 3em 0 7%;

		mask-image: url(/games/prospi_a/fanfesta/assets/svg/kv-mask.svg);
		mask-repeat: no-repeat;
		mask-size: 100% auto;
		mask-position: center bottom;
		
		-webkit-mask-image: url(/games/prospi_a/fanfesta/assets/svg/kv-mask.svg);
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% auto;
		-webkit-mask-position: center bottom;
		
		& img{
			margin: auto auto 2em;
			filter: drop-shadow(0 0 .5em #fff) drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
			position: relative;
			z-index: 10;
		}
		& span{
			font-family: var(--FontRuika);
			font-size: 3em;
			font-size: min(9vw,3em);
			color: #fff;
			letter-spacing: -.05em;
			position: relative;
			z-index: 10;
			text-shadow: 0 0 .2em var(--keyColorDeep), 0 0 .2em var(--keyColorDeep), 0 0 .2em var(--keyColorDeep), 0 0 .2em var(--keyColorDeep), 0 0 .5em var(--keyColorDeep);
		}
		
		@media (max-width:767px){
			margin-bottom: 10em;
			padding: 3em 0 15%;
		}
	}
	
	&.fade-bk{
		background: url(/games/prospi_a/fanfesta/2026/images/main-kv-01.jpg) center / cover no-repeat;
		
		&::before, &::after{
			content: "";
			position: absolute;
			inset: 0;
			opacity: 0;
		}
		
		&::before{
			background: url(/games/prospi_a/fanfesta/2026/images/main-kv-02.jpg) center / cover no-repeat;
			z-index: 1;
			animation: fadebefore 20s infinite;
		}
		
		&::after{
			background: url(/games/prospi_a/fanfesta/2026/images/main-kv-03.jpg) center / cover no-repeat;
			z-index: 2;
			animation: fadeafter 20s infinite;
		}
	}
}

@keyframes fadebefore{
	0%, 20%{	opacity: 0;}
	33.3%, 70%{	opacity: 1;}
	70.1%,100%{	opacity: 0;}
}

@keyframes fadeafter{
	0%,	53.3%{		opacity: 0;}
	66.6%,	86.6%{	opacity: 1;}
	100%{		opacity: 0;}
}



/* ------------------------ menu ------------------------ */

nav.fanfesta-menu{
	
	&.show{
		transition: .2s ease-out;
		transform: scale(1,1);
		background: var(--keyColorDeep);
	}
	&:not(.show){
		transform: scale(0,1);
		background: #fff;
		
	}
	
	box-shadow: 0 0 2em 0 #000;
	transform-origin: top right;
	width: 380px;
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 5000;
	text-align: center;
	padding: 2.5em 1.3em 0;
	
	& h3{
		text-align: center;
		& img{
			margin: auto auto 7%;
			width: 40%;
			filter: drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
		}
		& span{
			color: #fff;
			font-size: 1.6em;
			font-size: min(5vw, 1.6em);
			font-family: var(--FontRuika);
		}
		margin-bottom: 2em;
	}
	& h4{
		text-align: left;
		color: #fff;
		padding: .4em .8em.5em;
		margin-bottom: .4em;
		font-size: .9em;
		background: var(--keyColorSoft);
		font-family: var(--FontRuika);
	}
	& ul{
		text-align: left;
		margin-bottom: 1.5em;
		& a, & span{
			display: block;
			font-size: .95em;
			padding: .3em 0 .2em 1em;
			position: relative;
			color: #fff;
			&::before{
				content: "";
				position: absolute;
				width: .4em;
				height: .6em;
				inset: 50% auto auto 2px;
				transform: translate(0,-50%);
				background: url(/games/prospi_a/fanfesta/assets/svg/filltriangleright.svg) center / 100% auto no-repeat;
				filter: invert(1);
			}
		}
		& span{
			opacity: .4;
		}
		& a{
			&:hover{
				background: rgba(255,255,255,.1);
				transition: .2s;
			}
		}
	}
	& div{
		 & a{
			 display: block;
			 overflow: hidden;
			 border-radius: .2em;
			 margin-bottom: 1em;
			 &:hover{
				 opacity: .8;
				 transition: .2s;
			 }
		 }
	}
	& button.menu-close{
		background: var(--keyColorMedium);
		display: block;
		height: 3em;
		aspect-ratio: 1/1;
		position: absolute;
		inset: 0 0 auto auto;
		border: none;
		&:hover{
			background: #3840a5;
			transition: .3s;
		}
		&::before{
			content: "";
			inset: 0;
			position: absolute;
			background: url(/games/prospi_a/fanfesta/assets/svg/cross.svg) center / 50% auto no-repeat;
			filter: invert(1);
			cursor: pointer;
			
		}
	}
	
}

div.fanfesta-menu-shadow{
	position: fixed;
	inset: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(0,0,0,.75) 0 3px,
		rgba(0,0,0,.8) 4px 10px,
		rgba(0,0,0,.75) 11px 14px
	);
	z-index: 4900;
	backdrop-filter: blur(2px);
}


/* ------------------------ nav ------------------------ */

div.fanfesta-fixed-base{
	background: var(--keyColorMedium);
	& *{
		transition: height .2s ease-out;
	}
	
	& .fanfesta-fixed{
		box-shadow: 0 0 .5em 0 var(--keyColorDeep);
	}
	
	&.fixed .fanfesta-fixed{
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 100;
	}
	
	&:not(.fixed){
		&.venue{
			height: 135px;
			@media (max-width:767px){
				height: 150px;
			}
		}
		&.event{
			height: 80px;
			@media (max-width:767px){
				height: 60px;
			}
		}		
		
			& p.fanfesta-subtitle{
				height: 80px;
				font-size: 1.7em;
				transition: font-size .2s;
				& b{
					font-size: 1.4em;
					transform: translate(0,.07em);
				}
				@media (max-width:767px){
					transition: font-size .2s;
					font-size: 1.2em;
					height: 60px;
				}
			}
			& nav.fanfesta-nav{
				height: 55px;
				@media (max-width:767px){
					height: 90px;
				}
			}
		
	}
	
	&.fixed{
		&.venue{
			height: 80px;
			@media (max-width:767px){
				height: 116px;
			}
		}
		&.event{
			height: 40px;
			@media (max-width:767px){
				height: 40px;
			}
		}	
			
			& p.fanfesta-subtitle{
				height: 40px;
				font-size: 1.3em;
				& b{font-size: 1.1em;}
				@media (max-width:767px){
					height: 40px;
				}
			}
			& nav.fanfesta-nav{
				height: 40px;
				@media (max-width:767px){
					height: 76px;
				}
			}
		& .fanfesta-fixed{
			
		}
		
	}
	
}


p.fanfesta-subtitle{
	font-family: var(--FontRuika);
	position: relative;
	display: flex;
	justify-content: center;
	flex-align: center;
	overflow: hidden;
	& *{font-weight: inherit;}
	
	& span{
		margin: auto;
		display: inline-block;
		letter-spacing: -.05em;
		position: relative;
		z-index: 20;
		& b{
			display: inline-block;
		}
	}
	&:not(.event)::before{
		content: "";
		position: absolute;
		background: var(--subTitleColL);
		inset: 0 auto;
		width: 100%;
		max-width: 650px;
		box-shadow:
			0 0 0 15px var(--subTitleColD),
			0 0 0 37px var(--subTitleColL),
			0 0 0 47px var(--subTitleColD),
			0 0 0 57px var(--subTitleColL)
		;
		transform: skewX(-45deg);
		transition: .2s;
	}
	@media (max-width:767px){
		&:not(.event)::before{
			box-shadow:
				0 0 0 9px var(--subTitleColD),
				0 0 0 18px var(--subTitleColL),
				0 0 0 23px var(--subTitleColD),
				0 0 0 32px var(--subTitleColL)
			;
			width: 76%;
			transform: skewX(-45deg);
			transition: .2s;
		}	
	}
	&.osaka{
		color: var(--keyColorDeep);
		--subTitleColD: #dbc400;
		--subTitleColL: #f4e141;
	}
	&.tokyo{
		color: var(--keyColorDeep);
		--subTitleColD: #dbc400;
		--subTitleColL: #f4e141;
	}
	
	&.event{
		color: #fff;
		--subTitleColD: var(--keyColorMedium);
		--subTitleColL: var(--keyColorLight);
		& span{
			font-size: .8em;
			display: flex;
			gap: 1em;
			align-items: center;
			line-height: 1em;
			padding-right: 3em;
			&::before{
				content: "イベント詳細";
				font-size: .8em;
				color: var(--keyColorPale);
				transform: translate(0,.2em);
			}
			& b{
				color: #fff;
				--h2: 0 0 5px var(--keyColorLight); 
				text-shadow: var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2);
			}
		}
		&:before{
			content: "";
			position: absolute;
			inset: 50% auto auto 50%;
			transform: translate(-50%,-50%);
			width: 200em;
			max-width: 650px;
			aspect-ratio: 3/2;
			border-radius: 100%;
			box-shadow: 0 0 0 8px var(--subTitleColD), 0 0 0 20px var(--subTitleColL);
			background: var(--subTitleColL);
			opacity: .3;
		}
	}
	
	background: var(--subTitleColD);
}


nav.fanfesta-nav{
	background: var(--keyColorDeep);
	
	
	& ul{
		background: #171c61;
		max-width: 1000px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 100%;
	}
		& li{
			text-align: center;
			height: 100%;
			position: relative;
			
			&::before, &::after{
				content: "";
				position: absolute;
				background: #455174;
			}
			&::before{/* tate line */
				inset: 5px 0 5px auto;
				width: 1px;
			}
			&::after{/* yoko line*/
				inset: auto 5px 0 5px;
				height: 1px;
			}
			@media (max-width:767px){
				height: 50%;
			}

		}
		
		&:has(:last-child:nth-of-type(8)) li{
			width: calc(100%/8);
			@media (max-width:767px){
				width: calc(100%/4);
				&:nth-of-type(4),
				&:nth-of-type(8){
					&::before{	content: none;}
				}
				&:nth-of-type(n + 5){
					&::after{	content: none;}
				}
			}
		}
		&:has(:last-child:nth-of-type(7)) li{
			width: calc(100%/7);
			@media (max-width:767px){
				width: calc(100%/4);
				&:nth-of-type(4),
				&:nth-of-type(7){
					&::before{	content: none;}
				}
				&:nth-of-type(n + 5){
					width: calc(100%/3);
					&::after{	content: none;}
				}
			}
		}
		&:has(:last-child:nth-of-type(6)) li{
			width: calc(100%/6);
			@media (max-width:767px){
				width: calc(100%/3);
				&:nth-of-type(3),
				&:nth-of-type(6){
					&::before{	content: none;}
				}
				&:nth-of-type(n + 4){
					&::after{	content: none;}
				}
			}
		}
		&:has(:last-child:nth-of-type(5)) li{
			width: calc(100%/5);
			@media (max-width:767px){
				width: calc(100%/2);
				&:nth-of-type(2),
				&:nth-of-type(5){
					&::before{	content: none;}
				}
				&:nth-of-type(n + 3){
					width: calc(100%/3);
					&::after{	content: none;}
				}
			}
		}
		
		& li a{
			color: #fff;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: .95em;
			font-family: var(--FontRuika);
			&:hover{
				background: var(--keyColorLight);
				transition: background .2s;
			}
			&.new::before, &.new::after{
				content: "";
				position: absolute;
				display: block;
				inset: 6px auto auto 6px;
				width: 6px;
				height: 6px;
				border-radius: 100px;
				background: var(--linkHover);
				z-index: 2101;
			}
			&.new::after {
				background: var(--linkHover);
				animation: anime-sonar 1.2s ease;
				animation-iteration-count: infinite;
				z-index: 2100;
			}
		}
	
	@media (min-width:1001px){
		& li:first-child::after{
			inset: 5px auto 5px 0;
			width: 1px;
			height: auto;
		}
		& li:not(:first-child)::after{
			content: none;
		}
	}
	
	@media (min-width:768px) and (max-width:1000px){
		& li::after{
			content: none;
		}
		& li:last-child::before{
			content: none;
		}
	}
}

@keyframes anime-sonar {
	0% {transform:scale(1);}
	100% {transform:scale(3);opacity:0.0;}
}


/* ------------------------ update ------------------------ */

section.fanfesta-update{
	background: var(--keyColorMedium);
	text-align: center;
	margin: 0 -1em 4em;
	padding: 1.5em 1em;
	
	& > div{
		display: flex;
		align-items: center;
		gap: 2em;
		max-width: 800px;
		margin: auto;
		& h2{
			font-weight: bold;
			font-size: .9em;
			padding: .3em 2em;
			border-radius: .3em;
			border: 1px solid var(--keyColorSoft);
			color: var(--keyColorFaint);
		}
		& ul li{
			padding: 5px 0;
			text-align: left;
			& a , & span{
				display: inline-block;
				line-height: 1.3em;
				margin-left: 0;
			}
			& a{
				color: #fff;
				&:hover{
					color: #ffd03b;
					transition: color .2s;
				}
			}
			& span{
				color: #b7c0ff;
			}
			& time{
				opacity: .8;
				padding-right: .8em;
			}
			
			
		}
	}
	
	@media (max-width:767px){
		margin: 0 -.5em 4em;
		padding: 0;
		& > div{
			display: block;
			padding: .8em;
			& h2{
				font-size: .8em;
			}
			& ul{
				padding: 0 .5em;
				& li{
					padding: 1em 0;
					& a , & span{
						display: flex;
					}
				}
				
			}
		}
	}
}



/* ------------------------ main ------------------------ */

main.fanfesta-main{
	position: relative;
	overflow: hidden;
	
	&.osaka::before{
		content: "";
		position: fixed;
		z-index: -1;
		inset: 0;
		background: linear-gradient(to bottom, var(--ColorOsakaL), var(--ColorOsakaD));
		opacity: .4;
	}
	
	&.tokyo::before{
		content: "";
		position: fixed;
		z-index: -1;
		inset: 0;
		background: linear-gradient(to bottom, var(--ColorTokyoL), var(--ColorTokyoD));
		opacity: .4;
	}
	
	@media (min-width:768px){
		& {
			padding: 0 1em;
			transition: padding .2s;
		}
		& *{
			font-size: 1em;
			transition: font-size .2s;
		}
		
	}
	@media (max-width:767px){
		& {
			padding: 0 .5em;
			transition: padding .2s;
		}
		& *{
			font-size: .95em;
			transition: font-size .2s;
		}
	}
	
	&.top{
		margin-top: -10%;
		@media (max-width:767px){
			margin-top: -13%;
		}
	}
	&.event{
		padding-top: 5em;
		@media (max-width:767px){
			padding-top: 3em;
		}
	}
	&.venue{
		padding-top: 5em;
		@media (max-width:767px){
			padding-top: 5em;	
		}
	}


	
	& > *:not(.fullwidth):not(.fanfesta-update):not(.fanfesta-imageband):not(.about-fanfesta):not(.past-fanfesta){
		margin: auto auto 6em;
	}
	
}

	section.fanfesta-content{
		max-width: 1000px;
		box-sizing: border-box;
		border: 6px solid var(--keyColorDeep);
		border-radius: 1em;
		background: var(--keyColorDeep);
		text-align: center;
		box-shadow: 0 .2em .5em 0 rgba(0,0,0,.5);
		position: relative;
		@media (max-width:767px){
			border-radius: .5em;
		}
		
		& h2{
			line-height: 1.5em;
			font-family: var(--FontRuika);
			color: #fff;
			padding: .3em 1em;
			width: fit-content;
			margin: auto;
			position: relative;
			z-index: 10;
			--h2: 0 0 5px var(--keyColorLight); 
			text-shadow: var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2);
			font-size: min(4.8vw,1.7em);
			& > *{
				position: relative;
				z-index: 5;
			}
			
			&::before{
				content: "";
				position: absolute;
				inset: 50% 0 auto 0;
				transform: translate(0,-50%);
				height: 24%;
				background: var(--keyColorLight);
				border-radius: 10em;
				opacity: .3;
				mix-blend-mode: screen;	
			}
		}
	}

	div.fanfesta-content-inner{
		background: #fcfcfc;
		box-shadow: 0 0 0 2px var(--keyColorPale) inset , 0 0 70px 0 #ddd inset;
		position: relative;
		z-index: 10;
		color: #333;
		
		@media (min-width:768px){
			& {
				border-radius: .7em;
				padding: 3em 2em;
			}
		}
		@media (max-width:767px){
			& {
				border-radius: .3em;
				padding: 1.5em .8em;
			}
		}
	}
	
	
	section.fanfesta-lead{
		font-family: var(--FontRuika);
		text-align: center;
		margin-bottom: 4em !important;
		
		max-width: 1000px;
		& p{
			font-size: 1.25em;
			font-size: min(3.8vw,1.25em);
			line-height: 1.6em;	
			font-weight: normal;
			text-shadow:
				0 -2px 0 #fff,
				0  2px 0 #fff,
				-2px 0 0 #fff,
				 2px 0 0 #fff,
				-2px -2px 0 #fff,
				 2px -2px 0 #fff,
				-2px  2px 0 #fff,
				 2px  2px 0 #fff;
			margin-bottom: 1em;
			
			& span{
				display: inline-block;
			}
			@media (max-width: 767px){
				br {
					
				}
			}
			
		}
		& figure:has(:last-child:nth-of-type(1)){
			
		}
		& figure:has(:last-child:nth-of-type(2)){
			display: flex;
			justify-content: center;
			gap: 1em;
			& img{
				width: 40%;
				max-width: 240px;
			}
		}
		
	}
	
	
	section.fanfesta-portal{
		max-width: 900px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 1.5em;
		position: relative;
		padding-top: 4em;
		@media (max-width: 767px){
			gap: .5em;
		}
		
		& h3{
			position: absolute;
			inset: 0 0 auto 0;
			font-size: 1.8em;
			font-size: min(5vw,1.8em);
			color: var(--keyColorDeep);
			font-family: var(--FontRuika);
			text-align: center;
		}
		& dl{
			flex: 1;
			box-sizing: border-box;
			border: 4px solid var(--keyColorDeep);
			border-radius: .8em;
			background: linear-gradient(to right, var(--keyColorDeep), var(--keyColorSoft), var(--keyColorDeep));
			text-align: center;
			box-shadow: 0 .2em .5em 0 rgba(0,0,0,.5);
			font-family: var(--FontRuika);
			position: relative;
			@media (max-width: 767px){
				border: 3px solid var(--keyColorDeep);
				border-radius: .5em;
			}
			
			&::before{
				opacity: 0;
				transition: .2s;
			}
			
			@media (min-width:900px){
				&::before{
					content: "";
					position: absolute;
					aspect-ratio: 5 / 7;
					width: 30%;
					max-width: 100px;
					opacity: 1;
					transition: .2s;
				}
				&:nth-of-type(1)::before{
					background: url(/games/prospi_a/fanfesta/assets/choshi/top-b.png) center / 100% auto no-repeat;
					inset: 17% auto auto -15%;
				}
				&:nth-of-type(2)::before{
					background: url(/games/prospi_a/fanfesta/assets/choshi/top-a.png) center / 100% auto no-repeat;
					inset: 15% -15% auto auto;
				}
			}
		}
		& dt{
			font-size: 1.3em;
			font-size: min(3.5vw,1.3em);
			line-height: 1.5em;
			color: #fff;
			padding: .3em 1em;
			@media (max-width: 767px){
				padding: 1em .5em;	
			}
			
		}
		& dd{
			background: #fff;
			box-shadow: 0 0 0 2px var(--keyColorPale) inset;
			border-radius: .5em;
			padding: 2em 1.2em 1em;
			@media (max-width:767px){
				&{
					padding: 1em .5em 1em;
				}
			}
				
			
			& > *{
				display: block;
			}
			& time{
				color: #333;
				font-size: 1.5em;
				letter-spacing: -.05em;
				margin-bottom: 15px;
				& em{
					display: inline-block;
					padding: 0 .02em;
					font-size: 1.6em;
					letter-spacing: -.1em;
					transform: translate(0,.07em);
				}
				@media (max-width:767px){
					& {
						font-size: 6vw;
						& em{
							font-size: inherit;
						}
					}
					& span{
						font-size: .6em;
						display: block;
						margin-bottom: .5em;
					}
				}
			}
			& p{
				&.countdown{
					font-size: .95em;
					border-block: 1px solid #bbb;
					color: #555;
					padding: .5em;
					margin-bottom: 15px;
				}
				&.venue{
					color: #222;
					font-size: 1.2em;
					font-size: min(3.2vw,1.2em);
					margin-bottom: 20px;
				}
				@media (max-width:767px){
					&.countdown{
						font-size: 2.5vw;
					}
					&.venue{
						font-size: 3vw;
					}
				}
			}
			&.ended{
				& time, & p{
					color: #999;
					border-color: #999;
				}
			}
			& a, & > span{
				display: block;
				color: #fff;
				border-radius: .5em;
				padding: 1.2em 0;
				font-size: 1.1em;
			}
			& > span{
				color: #bbb;
				box-shadow: 0 0 0 3px #bbb inset, 0 0 0 6px #eee inset;
			}
			& a{
				position: relative;
				box-shadow: .1em .1em .1em 0 rgba(0,0,0,.2);
				&::after{
					position: absolute;
					content: "";
					width: 1.1em;
					height: 1.1em;
					background: url(/games/prospi_a/fanfesta/assets/svg/pageancor.svg) center / 100% auto no-repeat;
					filter: invert(1);
					inset: 50% 1em auto auto;
					transform: translate(0,-50%) rotate(-90deg);
				}
				&.btn-osaka{
					background: linear-gradient(to bottom, var(--ColorOsakaD), var(--ColorOsakaL));
				}
				&.btn-tokyo{
					background: linear-gradient(to bottom, var(--ColorTokyoD), var(--ColorTokyoL));
				}
				&:hover{
					transition: .2s;
					opacity: .9;
				}
				
			}
		}
	}
	
	
	div.fanfesta-imageband{
		background: var(--keyColorDeep) url(/games/prospi_a/fanfesta/assets/images/imageband.jpg) repeat-x;
		border-block: 2px solid var(--keyColorMedium);
		background-position: 0 center;
		height: 200px;
		margin: auto -1em 6em;
		animation: imgbdn 16s linear infinite ;
		@media (max-width:767px){
			margin: auto -.5em 6em;	
		}
	}
	@keyframes imgbdn{
		0%    { background-position: 0 center; }
		100%  { background-position: -2240px center; }
	}
	
	

	section.fanfesta-relatedevents{
		border: 1px solid var(--keyColorLight);
		border-image: linear-gradient(to right, var(--keyColorPale),var(--keyColorFaint),var(--keyColorPale)) 1;
		box-shadow: 0 0 0 3px var(--keyColorPale) inset, 0 0 .5em 6px var(--keyColorFaint) inset, 0 0 .5em 0 rgba(0,0,0,.5);
		background: #fff;
		max-width: 1000px;
		padding: 1em 2em;
		box-sizing: border-box;
		color: #555;
		@media (max-width:767px){
			padding: 1em 1.5em;
		}
		& h2{
			font-family: var(--FontRuika);
			font-size: 1.6em;
			text-align: center;
			color: var(--keyColorLight);
			padding: 2em 0 1em;
		}
		& p{
			font-family: var(--FontRuika);
			font-size: 1.1em;
			text-align: center;
			& span{
				display: inline-block;
			}
		}
		& div{
			padding: 2em 0;
			display: flex;
			gap: 1em;
			& a{
				flex: 1;
				border-radius: .3em;
				box-shadow: 0 0 0 2px var(--keyColorPale);
				overflow: hidden;
				&:hover{
					box-shadow: 0 0 0 2px var(--linkHover);
					transition: .2s ease-out;
				}
			}
		}
		& dl{
			max-width: 80%;
			display: flex;
			align-items: center;
			gap: 2em;
			margin: auto auto 2em;
			
			& dt{
				color: #222;
				text-align: center;
				width: 10em;
				font-family: var(--FontRuika);
				font-size: 1.1em;
				font-size: min(2vw,1.1em);
				position: relative;
				z-index: 0;
				& b{
					font-size: 1.2em;
				}
				&::before{
					content: "";
					position: absolute;
					height: 1em;
					transform: skewX(-45deg);
					inset: 50% 0 auto 0;
					z-index: -1;
				}
				&.osaka::before{
					background: var(--ColorOsakaL);
				}
				&.tokyo::before{
					background: var(--ColorTokyoL);
				}
			}
			& dd{
				flex: 1;
				& b{
					font-weight: bold;
				}
				
			}
			@media (max-width:767px){
				max-width: 90%;
				& dt{
					width: fit-content;
					padding: 0 1em;
				}
			}
		}
	}
	
	section.fanfesta-generalnotice{
		max-width: 1000px;
		margin: auto;
		box-sizing: border-box;
		padding: 2em 0;
		& h2{
			font-family: var(--FontRuika);
			font-size: 1.6em;
			text-align: center;
			color: var(--keyColorMedium);
			padding: 2em 0;
		}
		
		& ul{
			text-align: left;
			& li{
				position: relative;
				padding: 0 0 0 1.1em;
				margin-bottom: .5em;
				color: #555;
				font-weight: bold;
				&::before{
					content: "";
					position: absolute;
					inset: .4em auto auto 0;
					width: .6em;
					aspect-ratio:1/1;
					border-radius: .1em;
					background: var(--keyColorPale);
				}
			}
		}
		
	}
	
	section.fanfesta-summary{
		border: 1px solid var(--keyColorLight);
		box-shadow: 0 0 0 3px var(--keyColorPale) inset, 0 0 .5em 0 rgba(0, 0, 0, .5);
		background: #fff;
		max-width: 1000px;
		font-family: var(--FontRuika);
		
		& dl{
			align-items: center;
			& dt{
				
			}
			& dd{
				color: var(--keyColorDeep);
				text-align: left;
				& small{
					opacity: .5;
					position: relative;
					padding-left: 1em;
					display: block;
					font-size: .6em;
					&::before{
						content: "※";
						position: absolute;
						inset: 0 auto auto 0;
					}
				}
				& span{
					padding: .3em 0 .1em;
					font-size: .8em;
					display: block;
				}
				& a.map{
					display: inline-block;
					border: 1px solid var(--linkColor);
					color: var(--linkColor);
					font-size: .6em;
					line-height: 1em;
					padding: .3em 1em;
					border-radius: .2em;
					margin-left: 1em;
					transform: translate(0,-.2em);
					&:hover{
						border-color: var(--linkHover);
						color: var(--linkHover);
						transition: border-color color .2s;
					}
				}
				& a:not(.map){
					font-size: .75em;
					color: var(--linkColor);
					display: inline-block;
					margin-left: .5em;
					&:hover{
						color: var(--linkHover);
						transition: color .2s;
					}
				}
			}
		}
		
		@media (min-width:768px){
			& {
				padding: 2em 3em;
			}
			& dl{
				display: flex;
				&:not(:last-child){
					border-bottom: 1px solid var(--keyColorPale);
				}
				& > *{
					padding: 1em 0 .8em;
				}
			}
			& dt{
				width: 20%;
				text-align: center;
				font-size: 1.1em;
				color: var(--keyColorLight);
			}
			& dd{
				width: 80%;
				font-size: 1.3em;
			}
		}
		@media (max-width:767px){
			& {
				padding: 1.5em 1em 1em;
				width: 90%;
			}
			& dl{
				display: block;
			}
			& dt{
				width: auto;
				text-align: left;
				font-size: min(3vw,.9em);
				background: linear-gradient(to bottom, var(--keyColorLight), var(--keyColorSoft));
				padding: .5em;
				color: #fff;
			}
			& dd{
				width: auto;
				font-size: 1.2em;
				font-size: min(4vw,1.2em);
				padding: .5em 0 1em;
			}
		}
		
		& div{
			text-align: center;
			margin-bottom: 1em;
			
			& h3{
				color: var(--keyColorLight);
				font-size: 1.1em;
				padding: .5em 0;
				background: var(--keyColorPale);
			}
			& h4{
				color: var(--keyColorDeep);
				font-size: min(4vw,1.3em);
				padding: 1em 0 .5em;
			}
			
			& figure{
				background: #fff;
				border-radius: .5em;
				margin-bottom: 1.5em;
				&.soon{
					border: 2px solid #ddd;
					& img{
						max-width: 25%;
					}
				}
				&.icon{
					border: 2px solid var(--keyColorPale);
					padding: 1.5em;
				}
				& img{
					margin: auto;
				}
			}
			
			& div.notice{
				color: #666;
				background: #e9e9e9;
				font-size: .9em;
				padding: 1em 1.2em 1em 5em;
				text-align: left;
				position: relative;
				font-family: var(--FontGothic);
				&::before{
					position: absolute;
					content: "";
					width: 3em;
					height: 3em;
					background: url(/games/prospi_a/fanfesta/assets/svg/attention.svg) center / 100% auto no-repeat;
					filter: invert(.8);
					inset: 50% auto auto 1em;
					transform: translate(0,-50%);
				}
			}
			
		}
		


		
	}
	
	section.about-fanfesta{
		margin: auto -1em 0;
		padding: 5em 0;
		text-align: center;
		overflow: hidden;
		background: 
			repeating-linear-gradient(to bottom, #171c6155 0px, #171c6155 3px, transparent 3px, transparent 6px),
			url(/games/prospi_a/fanfesta/assets/images/aboutfanfes.jpg) center / 120% auto no-repeat,
			#252a6b ;
		@media (max-width:767px){
			margin: auto -.5em 0;
			background-size: auto, auto 100%, auto;
		}
		& h2{
			color: #fff000;
			font-size: 1.8em;
			font-family: var(--FontRuika);
			text-shadow: 0 0 .5em var(--keyColorDeep), 0 0 .5em var(--keyColorDeep), 0 0 .5em var(--keyColorDeep);
		}
		& div.choshi{
			height: 220px;
			background: url(/games/prospi_a/fanfesta/assets/images/choshi-line.png) center / auto 100% repeat-x;
			margin: 2em auto;
			animation: choshiline 25s infinite linear;
		}
		& p{
			color: #fff;
			font-size: 1.1em;
			line-height: 1.5em;
			margin-bottom: 1em;
			text-shadow: 0 0 .5em var(--keyColorDeep), 0 0 .5em var(--keyColorDeep), 0 0 .5em var(--keyColorDeep);
			& span{
				display: inline-block;
			}
			
		}
		
	}
	
@keyframes choshiline{
	0%    { background-position: 0 0; }
	100%  { background-position: -1200px 0; }
}

	section.past-fanfesta{
		margin: auto -1em 0;
		background: var(--keyColorDeep);
		padding: 2em 1em 3em;
		color: var(--keyColorPale);
		@media (max-width:767px){
			margin: auto -.5em 0;
			padding: 2em 1em 3em;	
		}
		& h3{
			font-family: var(--FontRuika);
			margin: auto;
			width: fit-content;
			
			text-align: center;
			font-size: 1.2em;
			padding: 0 2em 1em;
			position: relative;
			&::before, &::after{
				content: "";
				position: absolute;
				width: 1.2em;
				aspect-ratio:1/1;
				background: url(/games/prospi_a/fanfesta/assets/svg/choshi.svg) center / 100% auto no-repeat;
				filter: invert(1);
				opacity: .4;
				
			}
			&::before{
				inset: 0 auto auto 0;
			}
			&::after{
				inset: 0 0 auto auto;
			}
		}
		
		& table{
			max-width: 900px;
			width: 100%;
			margin: auto;
			border-spacing: 0;
			text-align: left;
			font-size: .95em;
			border-bottom: 1px solid var(--keyColorSoft);
			
			& th, td{
				border-top: 1px solid var(--keyColorSoft);
				vertical-align: middle;
			}
			& th{
				font-family: var(--FontRuika);
				padding: 1em 0;
				width: 12em;
				color: #fff;
				@media (max-width:767px){
					width: 8.5em;
				}
			}
			& td{
				padding: .5em 0;
				&:nth-of-type(1){
					display: flex;
					align-items: center;
					& span{
						&:nth-of-type(1){
							flex: 0 0 4em;
							grid-area: in;
						}
						&:nth-of-type(2){
							flex: 0 0 11em;
							grid-area: date;
						}
						&:nth-of-type(3){
							flex: 1;
							grid-area: venue;
						}
					}
					@media (max-width:767px){
						display: grid;
						grid-template-columns: 4em 1fr;
						grid-template-areas:
							"in date"
							"in venue";
						align-items: start;
					}
				}
				&:last-child{
					width: 6em;
					text-align: right;
					vertical-align: middle;
					& a{
						color: var(--linkColor);
						font-family: var(--FontRuika);
						display: inline-block;
						padding-left: 1.2em;
						position: relative;
						font-size: .9em;

						&::before{
							content: "";
							position: absolute;
							width: .9em;
							aspect-ratio: 1/1;
							background: var(--linkColor);
							mask: url(/games/prospi_a/fanfesta/assets/svg/play.svg) center / contain no-repeat;
							-webkit-mask: url(/games/prospi_a/fanfesta/assets/svg/play.svg) center / contain no-repeat;
							inset: .05em auto auto 0;
						}
						@media (max-width:767px){
							&::before{
								
							}
						}
						&:hover{
							color: var(--linkHover);
							transition: .2s;
							&::before{
								background: var(--linkHover);
								transition: .2s;
							}
						}
					}
				}
			}
		}
	}



/* ------------------------ footer ------------------------ */

.fanfesta-footer{
	background: var(--keyColorDeep);
	text-align: center;
	color: #fff;
	padding: 0 1em 1em;
	
	& > *{
		margin: auto auto 1.5em;
	}
	& div.share{
		background: var(--keyColorMedium);
		margin: 0 -1em 2em;
		padding: 1em;
		
		& a{
			margin: 0 .3em;
			display: inline-block;
			vertical-align: top;
			width: 2em;
			aspect-ratio: 1/1;
			position: relative;
			border-radius: 15%;
			overflow: hidden;
			&::after{
				content: "";
				position: absolute;
				inset: 0;
			}
			&.facebook{	border-radius: 10em;}
			&.x::after{			background-image: url(/games/prospi_a/fanfesta/assets/svg/x.svg);}
			&.facebook::after{	background-image: url(/games/prospi_a/fanfesta/assets/svg/facebook.svg);}
			&.line::after{		background-image: url(/games/prospi_a/fanfesta/assets/svg/line.svg);}
			&:hover{
				opacity: .8;
				transition: .2s;
			}
		}
	}
	.logo{
		padding: 1.5em 0;
		& img{
			margin: auto;
			width: 40%;
			max-width: 160px;
			filter: drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
		}
		& span{
			color: #fff;
			font-size: 1.6em;
		}
	}
	.appinfo{
		background: #212880;
		background: var(--keyColorMedium);
		box-shadow: 0 0 1em 0 rgba(0,0,0,.2);
		max-width: 750px;
		margin-bottom: 2em;
		padding: 1.5em;
		font-size: .8em;
		font-size: min(2.5vw,.8em);
		text-align: left;
		display: grid;

		& figure{
			grid-area: img;
			
			& img{
				overflow: hidden;
				border-radius: 10%;
			}
		}
		& p{
			grid-area: txt;
			& em{
				font-size: 1.2em;
				display: block;
				margin-bottom: .5em;
			}
		}
		& div{
			grid-area: link;
			& a{
				display: inline-block;
				&:hover{
					opacity: .7;
					transition: 2s;
				}
			}
		}
		@media (min-width:768px){
			gap: 1.5em;
			grid-template-columns: 103px 1fr;
			grid-template-areas:
				"img txt"
				"img link";
		}
		@media (max-width:767px){
			gap: 1em;
			grid-template-columns: 18% 1fr;
			grid-template-areas:
				"img txt"
				"link link";
		}
	}
	figure.petmarks{
		display: flex;
		width: 100%;
		max-width: 800px;
		flex-wrap: wrap;
		& img{
			@media (min-width:768px){
				width: calc(100% / 12);
			}
			@media (max-width:767px){
				width: calc(100% / 6);
			}
		}
		@media (max-width:767px){
			width: 60%;
		}
	}
	picture.petmarks{
		text-align: center;
		& img{
			width: 90%;
			max-width: 850px;
			margin: auto;
		}
	}
	
	.npb{
		width: fit-content;
		display: flex;
		flex-align: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1em;
		line-height: 1.2em;
		&::before{
			display: inline-block;
			content: "";
			width: 3em;
			aspect-ratio: 1/1;
			background: url(/games/prospi_a/fanfesta/assets/svg/npb.svg) center / 100% auto no-repeat;
		}
		& span{
			font-size: .9em;
			margin: auto 0;
		}
		@media (min-width:768px){
			font-size: .8em;
		}
		@media (max-width:767px){
			font-size: .5em;
		}
	}
	.copyright{
		& small{
			display: block;
			font-size: min(2.5vw,.7em);
			color: var(--keyColorFaint);
		}
	}
}

.related-footer{
	background: #fff;
	
	& a{
		color: #000;
		&:hover{
			transition: .3s;
		}
	}
	
	& *{
		font-family: inherit;
	}
	
	& ul.event{
		max-width: 900px;
		display: flex;
		gap: 10px;
		padding: 10px;
		box-sizing: border-box;
		margin: auto;
		@media (max-width:767px){
			flex-direction: column;
		}
		& li{
			flex: 1;
		}
		
		& a{
			display: block;
			padding: 12px 8px;
			text-align: left;
			background-color: #eee;
			position: relative;
			font-size: .8em;
			
			&::after {
			  content: "";
			  position: absolute;
			  top: calc(50% - 4px);
			  right: 20px;
			  width: 6px;
			  height: 6px;
			  border-top: 1px solid #000;
			  border-right: 1px solid #000;
			  transform: rotate(45deg);
			}
			&:hover{
				opacity: .8;
			}
		}
	}
	
	& .recommend{
		background: #bbb;
		
		& ul{
			margin: auto;
			max-width: 900px;
			padding: 25px 16px;
			display: grid;
			
			@media (min-width:768px){
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: .9em;
			}
			@media (max-width:767px){
				grid-template-columns: 1fr 1fr;
				gap: .5em;
				
			}
			& a{
				display: block;
				border: 1px solid #fff;
				&:hover{
					opacity: .7;
				}
			}
		}
	}
	
	& .l-footer{
		max-width: 900px;
		margin: auto;
		padding: 20px 20px 70px;
		gap: 0 1.5em;
		
		@media (min-width:768px){
			display: grid;
			grid-template-columns: 183px 1fr;
			grid-template-areas:
				"banner links"
				"banner copyright";
		}
		@media (max-width:767px){
			display: flex;
			flex-direction: column;
			gap: 1em;
			justify-content: center;
			& > *{
				margin: auto;	
			}
		}
		& > a{
			grid-area: banner;
			display: block;
			width: 183px;
		}
		& > ul{
			grid-area: links;
			gap: .2em 2em;
			font-size: .68em;
			display: flex;
			justify-content: center;
			justify-content: left;
			
			@media (min-width:768px){
				
			}
			@media (max-width:767px){
				flex-wrap: wrap;
			}
			& li{
				position: relative;
				& *:hover{
					opacity: .5;
				}
			}
			& li:not(:last-child)::after{
				content: "";
				position: absolute;
				inset: 0 -1.1em 17% auto;
				height: 70%;
				width: 1px;
				background: #999;
			}
			& li button#ot-sdk-btn.ot-sdk-show-settings{
				border: none;
				cursor: pointer;
				outline: none;
				padding: 0;
				appearance: none;
				background-color: transparent;
				color: #000000;
				margin: 0;
			}
		}
		& > p{
			grid-area: copyright;
			& small{
				display: inline-block;
				font-size: .7em;
				color: #828282;
				padding-right: .5em;
				@media (max-width:767px){
					display: block;
					text-align: center;
					padding-right: 0;
				}
			}
		}
	}
}

a.pagetop{
	position: fixed;
    z-index: 1100;
	background: #ffffff;
	font-family: var(--FontRuika);
	color: var(--keyColorLight);
	display: block;
    overflow: hidden;
	box-shadow: 0 0 5px var(--keyColorDeep);
    text-align: center;
    border: 3px solid var(--keyColorDeep);
	
	@media (min-width:768px){
		font-size: 1em;
		padding: .5em 1em;
		font-weight: 900;
		inset: auto 1em 0 auto;
		border-bottom: none;
		border-radius: 10px 10px 0 0;
	}
	@media (max-width:767px){
		font-size: .8em;
		padding: .3em .8em;
		inset: auto 0 .5em auto;
		border-right: none;
		border-radius: 10px 0 0 10px;
	}
	&::before{
		content: "▲";
		display: block;
		font-size: .8em;
		margin-bottom: .2em;
	}
	
}


	& a{
		&.link-btn{
			color: #fff;
			background: var(--linkColor);
			display: block;
			border-radius: .5em;
			line-height: 1em;
			text-align: center;
			position: relative;
			font-family: var(--FontRuika);
			@media (min-width:768px){
				padding: 10px 0;
			}
			@media (max-width:767px){
				padding: 15px 0;
			}
			&::after{
				position: absolute;
				content: "";
				width: 1em;
				height: 1em;
				background: url(/games/prospi_a/fanfesta/assets/svg/pageancor.svg) center / 100% auto no-repeat;
				filter: invert(1);
				inset: 50% .6em auto auto;
				transform: translate(0,-50%) rotate(-90deg);
			}
			&.external::after{
				background-image: url(/games/prospi_a/fanfesta/assets/svg/external.svg);
				transform: translate(0,-50%) rotate(0);
			}
			&:hover{
				background: var(--linkHover);
				transition: background .2s;
			}
		}
		
		&.zoom{
			display: inline-block;
			position: relative;
			overflow: hidden;
			&:hover > img{
				transform: scale(1.05);
				transition: transform .2s ease-out;
			}
			&::after{
				content: "+";
				font-family: var(-boldFont);
				overflow: hidden;
				color: #fff;
				font-weight: bold;
				display: flex;
				font-size: 1.45em;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 10%;
				line-height: 1.2em;
				border-radius: 100%;
				aspect-ratio: 1 / 1;
				right: 5%;
				bottom: 5%;
				background: var(--linkColor);
			}
			&:hover::after{
				opacity: .5;
				transition: opacity .2s ease-out;
			}
		}
	}
	.novelty-caution{
		color: var(--keyColorLight);
		font-family: var(--FontRuika);
		 & p{
			position: relative;
			display: inline-block;
			padding-left: 1em;
			font-size: 0.9em;
			&:before{
				content: "※";
				width: 1em;
				height: 1em;
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

	}
	.normal-text-caution{
		color: var(--keyColorLight);
		font-family: var(--FontRuika);
		font-size: 1em !important;
		margin-top: 0.4em;
		@media (min-width:767px){
			font-size: 0.8em !important;
			margin-top: 0.2em;
		}
		& > *{
			position: relative;
			display: inline-block;
			width: auto;
			padding-left: 1em;

			&:before{
				content: "※";
				width: 1em;
				height: 1em;
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		& span{
			display: inline-block;
		}

	}
	.content-add-text{
		font-family: var(--FontRuika);
		font-size: 0.9em;
		margin-bottom: 0 !important;
		@media (min-width:767px){
		font-size: 1.2em !important;
		}
	}
	.s-catch-text{
		display: inline-block;
		font-size: min(9vw,2.5em) !important;
		margin-top: 0.05em;
	}