@charset "UTF-8";


div.fanfesta-content-inner{
	
	line-height: 1.4em;
	
	& > *:not(:last-child){
		margin-bottom: 15px;
	}
	
	& > h3{
		color: #fff;
		font-family: var(--FontRuika);
		border: 2px solid var(--keyColorLight);
		box-shadow: 0 0 0 1px #fff inset;
		background: var(--keyColorLight) repeating-linear-gradient(-45deg, transparent 0px, transparent 3px, #5a67ae 3px, #5a67ae 6px);
		border-radius: .5em;
		padding: .7em 0;
		margin-top: 2em;
		position: relative;
		&::before, &::after{
			content: "";
			position: absolute;
			width: 1.4em;
			aspect-ratio: 1/1;
			top: 50%;
			transform: translate(0,-50%);
			background: url(/games/prospi_a/fanfesta/assets/svg/choshi.svg) center / 100% auto no-repeat;
			opacity: .5;
			filter: invert(1);
		}
		&::before{	left: .7em;}
		&::after{	right: .7em;}
		@media (min-width:768px){
			& {
				font-size: 1.2em;
			}
		}
		@media (max-width:767px){
			& {
				font-size: 1.1em;
			}
		}
	}
	
	& > h4{
		font-family: var(--FontRuika);
		color: var(--keyColorLight);
		font-size: 1.3em;
		display: flex;
		align-items: end;
		border-bottom: 2px solid var(--keyColorLight);
		padding: 2em 0 12px;
		&::before, &::after{
			content: "";
			height: 2px;
			flex-grow: 1;
			background: var(--keyColorPale);
			transform: translate(0,14px);
		}
		&::before{	margin-right: .7em;}
		&::after{	margin-left: .7em;}
		& span{
			display: inline-block;
		}
	}
	
	& > h5{
		font-family: var(--FontRuika);
		color: #888;
		font-size: 1.1em;
		display: flex;
		align-items: center;
		margin: 2em auto !important;
		&::before, &::after{
			content: "";
			height: 1px;
			flex-grow: 1;
			background: #ccc;
		}
		&::before{	margin-right: .7em;}
		&::after{	margin-left: .7em;}
	}
	
	& p{
		&.center{
			text-align: center;
			& span{
				display: inline-block;
			}
		}
		&.pay{
			margin-bottom: 2em;
		}
		&.read{
			font-family: var(--FontRuika);
			
			& *{
				font-family: inherit;
			}
		}
		&.andmore{
			text-align: center;
			font-family: var(--FontRuika);
			border: 2px solid var(--keyColorFaint);
			border-radius: 50em;
			color: var(--keyColorPale);
			padding: .5em;
		}
		& span{
			display: inline-block;
		}
		@media (min-width:768px){
			&.read{
				font-size: 1.2em;
				line-height: 1.4em;
			}
		}
		@media (max-width:767px){
			&.read{
				font-size: .9em;
				line-height: 1.2em;
			}
		}
	}
	& em{
		font-weight: 600;
		display: block;
	}
	& small{
		opacity: .7;
		position: relative;
		padding-left: 1.3em;
		display: block;
		width: fit-content;
		font-size: .85em;
		line-height: 1.3em;
		margin-bottom: .3em;
		text-align: left;
		&::before{
			content: "※";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
	

	& ul{
		&.marker{
			text-align: left;
			& > li{
				position: relative;
				padding: 0 0 .5em 1.1em;
				&::before{
					content: "";
					position: absolute;
					display: flex;
					inset: .3em auto auto 0;
					width: .6em;
					height: .6em;
					border-radius: .1em;
					background: var(--keyColorPale);
				}
				& b{
					display: block;
					padding-top: .8em;
					color: var(--keyColorLight);
					font-weight: bold;
				}
			}
		}
		&.dot{
			text-align: left;
			& > li{
				position: relative;
				padding: 0 0 .2em .8em;
				&::before{
					content: "";
					position: absolute;
					display: flex;
					inset: .4em auto auto 0;
					width: .4em;
					height: .4em;
					background: var(--keyColorLight);
					border-radius: 50em;
				}
			}
		}
	}
	& ol{
		&.number{
			counter-reset: item;
			text-align: left;
			& > li{
				position: relative;
				padding: .3em 0 .3em 1.4em;
				font-weight: bold;
				
				&::before{
					content: "";
					position: absolute;
					display: block;
					inset: .2em auto auto 0;
					counter-increment: item;
					content: counter(item) '.';
					font-family: var(--FontRuika);
					color: var(--keyColorLight);
				}
			}
		}
	}
	
	& table.time-table{
		font-family: var(--FontRuika);
		margin-top: -.5em;
		width: 100%;
		font-size: 1.15em;
		& tbody tr{
			box-shadow: 0 -1px 0 0 var(--keyColorPale) inset;
			& > *{
				vertical-align: middle;
			}
			& th{
				color: var(--keyColorLight);
				padding: .6em 0;
				width: 8em;
				
			}
			& td{
				text-align: left;
			}
			
		}
	}
	& table.get-point{
		border-radius: .2em;
		overflow: hidden;
		margin-top: 2em;
		border-spacing: 0;
		font-family: var(--FontRuika);
		font-size: 1.5em;
		width: 100%;
		border: 2px solid var(--keyColorLight);
		& tr > *{
			padding: .5em;
			text-align: center;
			&:nth-of-type(2){
				border-left: 1px solid var(--keyColorLight);
				border-right: 1px solid var(--keyColorLight);
			}
		}
		& th{
			width: calc(100% / 3);
			background: var(--keyColorPale);
			color: var(--keyColorDeep);
		}
		& td{
			
		}
	}
	& table.regulation{
		border-spacing: 0;
		font-family: var(--FontRuika);
		width: 100%;
		font-size: 1.1em;
		& tr{
			box-shadow: 0 -1px 0 0 var(--keyColorPale) inset;
		}
		& tr > *{
			width: 50%;
			padding: .5em;
		}
		& th{
			text-align: right;
			color: var(--keyColorLight);
		}
		& td{
			text-align: left;
		}
		
	}
	& table.event-benefit{
		width: 100%;
		font-family: var(--FontRuika);
		border: 5px solid #e6e1b2;
		border-image: linear-gradient(5deg, #555326, #e6e1b2, #555326) 1;
		background: #fff;
		border-spacing: 0;
		
		& tr >*{
			vertical-align: middle;
			border-bottom: 1px solid var(--keyColorPale);
		}
		& th{
			background: linear-gradient(25deg, var(--keyColorDeep), var(--keyColorLight));
			color: #fff;
			font-size: 1.2em;
			font-weight: normal;
			width: 20%;
			padding: 2em .5em;
			--h2: 0 0 5px var(--keyColorLight);
			text-shadow: var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2), var(--h2);
			& em{
				display: inline-block;
				font-size: 1.4em;
				padding: 0 .2em;
			}
			@media (max-width:767px){
				font-size: 1em;
				width: auto;
			}
		}
		& td{
			font-size: 1.1em;
			&:nth-of-type(1){
				width: 150px;
				text-align: center;
				padding: .5em 0;
				& img{
					width: 60px;
					margin: auto;
				}
			}
			&:nth-of-type(2){
				text-align: left;
				& span{
					font-size: .85em;
					display: block;
					margin-left: -.5em;
				}
			}
			@media (max-width:767px){
				&:nth-of-type(1){
					width: 100px;
					& img{
						width: 50px;
						margin: auto;
					}
				}
				&:nth-of-type(2){
					& span{
						font-size: .85em;
						display: block;
						margin-left: -.5em;
					}
				}
			}
		}
	}
	
	& figure.prize{
		border: 1px solid var(--keyColorPale);
		background: #fff;
		border-radius: .5em;
		overflow: hidden;
		text-align: center;
		& img{
			max-width: 40%;
			margin: auto;
		}
	}
	& figure.foodlogo{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1em;
		& img{
			box-shadow: .2em .2em .2em 0 rgba(0,0,0,.3);
			border: 1px solid #f2f2f2;
		}
	}
	
	
	
	
	& div{}
	
	& div.content-ingames{
		margin-bottom: 2em;
		position: relative;
		@media (min-width:768px){
			&::before{
				content: "";
				position: absolute;
				inset: 0 50%;
				height: 100%;
				width: 1px;
				background: var(--keyColorPale);
			}
		}
		
		& > div{
			display: flex;
			flex-direction: column;
			
			& p{
				text-align: left;
				padding: 0 1em 1em;
				flex-grow: 1;
			}
		}
		
		@media (min-width:768px){
			display: flex;
			justify-content: space-between;
			gap: 2em;
			& > div{
				flex: 1;
			}
			& figure{
				text-align: center;
				overflow: hidden;
				& img{
					margin: -10% auto;
					clip-path: inset(15% 0);
				}
			}
		}
		@media (max-width:767px){
			display: block;
			& > div{
				width: auto;
				&:nth-of-type(1){
					margin-bottom: 2em;
				}
			}
			& figure{
				margin-bottom: 1em;
				& img{
					margin: -10% auto;
					clip-path: inset(15% 0);
				}
			}
		}
	}
	
	& div.comingsoon{
		background: #fff;
		border: 2px solid #ddd;
		border-radius: .5em;
		& img{
			width: 25%;
			margin: auto;
		}
	}
	
	& div.notice{
		color: #666;
		background: #e9e9e9;
		font-size: .9em;
		padding: 1em 1.2em 1em 5em;
		text-align: left;
		position: relative;
		&::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%);
		}
	}
	
	& div.stage-content-list{
		display: grid;
		@media (min-width:768px){
			grid-template-columns: repeat(3, 1fr);
			gap: 1em;	
		}
		@media (max-width:767px){
			grid-template-columns: repeat(2, 1fr);
			gap: 1em;			
		}
		
		& a{
			flex: 1;
			display: block;
			border: 2px solid var(--keyColorLight);
			box-shadow: 0 0 0 3px var(--keyColorPale) inset;
			padding: 1em;
			border-radius: .8em;
			background: #fff;
			& img{
				margin-bottom: .5em;
			}
			&:hover{
				border-color: var(--linkColor);
				box-shadow: 0 0 0 2px #fff inset;
				background: var(--linkHover);
				transition: .2s;
			}
		
			& span{		
				font-family: var(--FontRuika);
				font-size: .9em;
				color: #fff;
				display: block;
				padding: .3em;
				background: var(--keyColorPale);
				opacity: .8;
				border-radius: .4em;
			}
		}
	}
	
	& div.stage-content-hide{
		display: none;
		/*display: block;*/
	}
	
	& div.stage-content{
		display: grid;
		padding: 1em 0;
		text-align: left;
		&:not(:last-child) {
			border-bottom: 1px solid var(--keyColorPale);
		}
		@media (min-width:768px){
		& {
			gap: 1em ;
			grid-template-columns: 1fr 30%;
			grid-template-areas:
			"title img"
			"text  img"
			"schedule  img"
			"link  img";
		}
		}
		@media (max-width:767px){
		& {
			gap: 16px 8px;
			grid-template-columns: 1fr 30%;
			grid-template-areas:
			  "title title"
			  "text  img"
			  "link  link";
			align-items: start;
		}
		}				

		& h4{
			grid-area: title;
			font-family: var(--FontRuika);
			color: var(--keyColorDeep);
			font-size: 1.5em;
			& span{
				display: block;
				font-size: .8em;
				padding-top: .3em;
				opacity: .8;
			}
		}
		& p{
			grid-area: text;
		}
		& dl{
			grid-area: schedule;
			display: grid;
			grid-template-columns: max-content 1fr;
			gap: .4em;
			font-family: var(--FontRuika);
			line-height: 1em;

			& dt {
				font-size: .8em;
				background-color: var(--keyColorPale);
				padding: .3em 1.2em .2em;
				color: #fff;
				text-align: center;
			}

			& dd {
				font-size: .9em;
				margin: 0;
				padding: .3em 0em .2em;
				& time{
					color: var(--keyColorLight);
					display: inine-block;
					padding-right: .5em;
				}
			}

		}
		& figure{
			grid-area: img;
		}
		& a{
			grid-area:link;
			height: 36px;
			box-sizing: border-box;
			width: fit-content;
			padding-left: 1em;
			padding-right: 3em;
		}
		@media (max-width:767px){
			& a{
				width: auto;
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	
	
	& div.field-content{
		display: grid;
		padding: 1em 0;
		text-align: left;
		&:not(:nth-last-of-type(1)) {
			border-bottom: 1px solid var(--keyColorPale);
		}
		&.new{
			position: relative;
			padding-top: 2.2em;
			&::before{
				content: "NEW";
				position: absolute;
				inset: 0 auto auto 0;
				font-family: var(--FontRuika);
				background: #ffd03b;
				padding: 4px 10px 3px;
				line-height: 1em;
				font-size: .9em;
				border-radius: .3em; 
				color: #c00;
			}
			
		}
		
		@media (min-width:768px){
			& {
				gap: 1em;
				grid-template-columns: 1fr 30%;
				grid-template-areas:
				"title img"
				"text  img"
				"prize  img"
				"link  img";
			}
		}
		@media (max-width:767px){
			& {
				gap: 1em;
				grid-template-columns: 1fr 40%;
				grid-template-areas:
				  "title title"
				  "text  img"
				  "prize  img"
				  "link  link";
				align-items: start;
			}
		}				

		& h4{
			grid-area: title;
			font-family: var(--FontRuika);
			color: var(--keyColorDeep);
			font-size: 1.5em;
			& span{
				display: block;
				font-size: .8em;
				padding-top: .3em;
				opacity: .8;
			}
		}
		& p{
			grid-area: text;
			& small{
				margin-top: .5em;
			}
		}
		
		& dl{
			grid-area: prize;
			display: grid;
			grid-template-columns: max-content 1fr;
			gap: 5px;
			font-family: var(--FontRuika);

			& dt {
				font-size: .8em;
				background-color: var(--keyColorFaint);
				padding: .3em 1.2em .2em;
				color: var(--keyColorLight);
				text-align: center;
			}
			& dd {
				font-size: .9em;
				margin: 0;
				padding: .3em 0em .2em;
				color: var(--keyColorMedium);
			}

		}
		
		& figure{
			grid-area:img;
			& img{
				max-width: 100%;
			}
			& figcaption{
				padding-top: .5em;
				text-align: center;
				& *{
					margin: auto;
				}
			}
			&.comingsoon{
				background: #fff;
				border: 1px solid #ddd;
				border-radius: .5em;
				box-sizing: border-box;
				padding: 0 10%;
				& img{
					
				}
			}
		}
		& a{
			grid-area:link;
			height: 36px;
			box-sizing: border-box;
			width: fit-content;
			padding-left: 1em;
			padding-right: 3em;
		}
		@media (max-width:767px){
			& a{
				width: auto;
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	
	
	& div.stage-guests{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: .5em;
		
		@media (max-width:767px){
			& {
				grid-template-columns: repeat(3, 1fr);
			}
		}
		
		& figure{
			border: solid 1px var(--keyColorFaint);
			border-radius: 8px;
			overflow: hidden;
			background: #ffffff;
			
			& figcaption{
				font-size: .9em;
				color: var(--keyColorDeep);
				display: flex;
				flex-direction: column;
				aling-items: center;
				justify-content: center;
				padding: .5em .2em;
				text-align: center;
				
				& span{
					font-size: .7em;
					display: block;
					line-height: 1.2em;
				}
			}
		}

	}
	
	
	& div.gallery{
		display:grid;
		gap:1em;
		
		& figure{
			position: relative;
			
			& > a , & > span{
				display: block;
				text-align: center;
				border-radius: .3em;
				padding: 3%;
				background: #fff;
			}
			& > a{
				border: 1px solid var(--keyColorPale);				
			}
			& > span{
				border: 1px solid #ddd;
			}
			& figcaption{
				font-family: var(--FontRuika);
				font-size: .9em;
				padding: .5em 0 1em;
				& span{
					display: block;
					font-size: .9em;
					padding: .2em 0 0;
				}
			}
		}
	}
	
	& div.novelty{
		@media (min-width:850px){
			grid-template-columns:repeat(4, 1fr);
		}
		@media (min-width:600px) and (max-width:849px){
			grid-template-columns:repeat(3, 1fr);
		}
		@media (max-width:599px){
			grid-template-columns:repeat(2, 1fr);
		}
	}
	
	& div.merchandise{
		@media (min-width:600px){
			& figure{	
				grid-template-columns:repeat(3, 1fr);
			}
		}
		@media (max-width:599px){
			& figure{	
				grid-template-columns:repeat(2, 1fr);
			}
		}
	}
	
	& div.paymethod{
		justify-content: space-between;
		gap: 1em;
		& figure{
			border: 1px solid var(--keyColorPale);
			flex: 1;
			text-align: center;
			padding: .3em;
			background: #fff;
			& img{
				margin: auto;
			}
			& figcaption{
				background: var(--keyColorPale);
				color: var(--keyColorDeep);
				font-weight: bold;
				font-size: .95em;
				padding: .5em 0;
			}
		}
		@media (min-width:768px){
			& {
				display: flex;
			}
			& figure{
				width: calc(97% / 2);	
			}
			& img{
				width: 96%;
			}
		}
		@media (max-width:767px){
			& {
				display: block;
			}
			& figure{
				width: auto;
				margin-bottom: 2em;
			}
			& img{
				width: 80%;
			}
		}
		
	}
	
	& div.event-flow{
		text-align: left;
		font-family: var(--FontRuika);
		padding: .5em 0 1em 4em;
		margin-bottom: 1em;
		position: relative;
		&::before{
			content: attr(data-num);
			position: absolute;
			inset: 0 auto auto 0;
			border-radius: .2em;
			width: 2em;
			height: 2em;
			display: flex;
			font-size: 1.2em;
			align-items: center;
			justify-content: center;
			background: var(--keyColorLight);
			box-shadow: 0 0 0 2px var(--keyColorLight) inset, 0 0 0 3px var(--keyColorPale) inset;
			color: #fff;
		}
		&::after{
			content: "";
			
		}
		& h3{
			font-size: 1.5em;
			margin-bottom: .8em;
			color: var(--keyColorDeep);
			&::before{
				
			}
		}
		& p{
			margin-bottom: .8em;
			color: #333;
			font-size: 1.2em;
			line-height: 1.5em;
			& a{
				color: var(--linkColor);
				font-size: .8em;
				display: inline-block;
				margin-right: 1em;
				position:relative;
				padding-left: 1.3em;
				&::before{
					content: "";
					position: absolute;
					width: 1em;
					aspect-ratio: 1/1;
					background: var(--linkColor);
					mask: url(/games/prospi_a/fanfesta/assets/svg/pageancor.svg) center / contain no-repeat;
					-webkit-mask: url(/games/prospi_a/fanfesta/assets/svg/pageancor.svg) center / contain no-repeat;
					inset: .5em auto auto 0;
				}
				&:hover{
					color: var(--linkHover);
					transition: .2s;
					&::before{
						background: var(--linkHover);
						transition: .2s;
					}
				}
			}
		}
		& ul{
			& span{
				display: inline-block;
				padding-left: .5em;
				color: var(--keyColorLight);
			}
		}
		& div.event-flow-images{
			display: flex;
			& figure{
				width: 25%;
				text-align: center;
				& img{
					width: 60%;
					border-radius: .5em;
					margin: auto;
				}
				& figcaption{
					text-align: center;
				}
				&.red figcaption{	color: #ba1c00;}
				&.blue figcaption{	color: #005fb8;}
				&.green figcaption{	color: #307f00;}
				&.white figcaption{	color: #b6b9b7;}
					
			}
		}
	}
	
	& div.point-result{
		display: flex;
		justify-content: space-between;
		& dl{
			width: 30%;
			font-family: var(--FontRuika);
			& dt{
				font-size: .9em;
				color: var(--keyColorMedium);
			}
			& dd{
				background: var(--keyColorLight);
				box-shadow: 0 0 0 2px var(--keyColorLight) inset, 0 0 0 3px var(--keyColorPale) inset;
				color: #fff;
				border-radius: .3em;
				font-size: 1.25em;
				padding: 1em;
				position: relative;
				& span{
					display: block;
					font-size: .85em;
				}
				&::before{
					content: "+";
					width: 13.6%;
					aspect-ratio: 1/1;
					position: absolute;
					color: var(--keyColorLight);
					inset: 50% 102.5% auto auto;
					transform: translate(0,-50%);
					font-size: 1.2em;
				}
			}
			&:first-child dd::before{
				content: none;
			}
			&:last-child dd::before{
				content: "=";
			}
		}
		
	}
	
}



div.stage-content{
	
	max-width: 900px;
	box-sizing: border-box;
	border: 6px solid var(--keyColorDeep);
	border-radius: 1.5em;
	background: var(--keyColorDeep);
	text-align: center;
	box-shadow: 0 0 0 3px var(--keyColorPale) inset;
	position: relative;
	
	display: grid;
	
	text-align: left;
	background: #fff;
	
	@media (min-width:768px){
		padding: 2em;
		& {
			gap: 1em ;
			grid-template-columns: 1fr 35%;
			grid-template-areas:
			"title img"
			"text  img"
			"schedule  img"
			"link  img";
		}
	}
	@media (max-width:767px){
		padding: 1.5em;
		& {
			gap: 1em ;
			grid-template-columns: 1fr 40%;
			grid-template-areas:
			  "title title"
			  "text  img"
			  "schedule  img"
			  "link  link";
			align-items: start;
		}
	}				

	& h4{
		grid-area: title;
		font-family: var(--FontRuika);
		color: var(--keyColorDeep);
		font-size: 1.6em;
		& span{
			display: block;
			font-size: .8em;
			padding-top: .3em;
			opacity: .8;
		}
	}
	& p{
		grid-area: text;
	}
	& dl{
		grid-area: schedule;
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: .4em;
		font-family: var(--FontRuika);
		line-height: 1em;

		& dt {
			font-size: .8em;
			background-color: var(--keyColorPale);
			padding: .3em 1.2em .2em;
			color: #fff;
			text-align: center;
		}

		& dd {
			font-size: .9em;
			margin: 0;
			padding: .3em 0em .2em;
			& time{
				color: var(--keyColorLight);
				display: inine-block;
				padding-right: .5em;
			}
		}

	}
	& figure{
		grid-area: img;
	}
	& a{
		grid-area:link;
		
		box-sizing: border-box;
		width: fit-content;
		padding-left: 1em;
		padding-right: 3em;
	}
	@media (max-width:767px){
		& a{
			width: auto;
			padding-left: 0;
			padding-right: 0;
		}
	}
}