@charset "utf-8";

/*　2026.10*/
/* JumpFesta / JumpVictoryCarnival */

html{
	-webkit-text-size-adjust: 100%;
}

*, *::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;
	font-weight: inherit;
}

img{
	max-width: 100%;
	vertical-align: bottom;
}

body{
	background: #000;
	
	--LinkColor: #2ab1ff;
	--LinkHover: #d9ff2a;

	&::before{
		content: "";
		position: fixed;
		background-image: url(/yugioh/assets/images/bk-cards-mess.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 120% auto;
		width: 100%; height: 100%;
		left: 0; top: 0;
		z-index: -1;
		box-shadow: 0 0 20em 3px #000 inset;
		opacity: .7;
	}
	@media (max-width:767px){
		&::before{
			background-size: auto 100%;
			box-shadow: 0 0 5em 3px #000 inset;
			opacity: .6;
		}			
	}
	
	& > .konami-header{
		position: relative;
		background: #000;
		z-index: 10;
	}
	& > header{
		position: relative;
		z-index: 10;
	}
	& > main{
		position: relative;
		z-index: 5;
	}
	& > footer{
		position: relative;
		z-index: 10;
		& > .footer-wrapper{
			border-top: 1px solid #222;
		}
	}
	
	& > header,
	& > main{
		font-size: 1.1em;
		@media (max-width:767px){
			font-size: .85rem;
		}
		font-family: "nitalago-ruika", sans-serif;
		font-weight: inherit;
		
		
	}
}
	
	
/* ----------------- 更新情報----------------- */
.update{
	background: repeating-linear-gradient(-45deg, #000, #000 1px , #222 0 , #222 3px);
	background: #222;
	padding: 5px 8px;
	font-size: .9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	
	&::before{
		content: "更新情報";
		font-weight: 100;
		width: fit-content;
		color: #bbb;
		padding-right: 5px;
	}
	& ul{
		flex: 1;
		background: #000;
		box-shadow: 0 0 0 1px #555;
		border-radius: .5em;
		padding: 0 .7em;
		text-align: left;
		
		& li{
			display: flex;
			&:not(:first-child){
				border-top: 1px dashed #444;
			}
		}
		& li time{
			width: fit-content;
			color: #b8b8b8;
			padding-right: .5em;
			&::after{	content: " : ";}
			@media (max-width:767px){
				&{
					display: block;
					&::after{	content: "";}
				}
			}
		}
		& li span{
			flex: 1;
			color: #eee;
			text-align: left;
			line-height: 1em;
			padding: .4em 0 .2em;
			text-decoration: none;
			& > a{
				color: #fff727;
				display: inline-block;
				margin-right: 1em;
				text-decoration: none;
				&:hover{
					color: #ffffff;
					transition: .2s;
				}
			}
		}
	}
			
	& button{
		background:#fdcd00 url(/yugioh/assets/svg/filltriangle.svg) center / 45% 40% no-repeat;
		width: 1.5em;
		aspect-ratio: 1/1;
		border-radius: 5em;
		border: none;
		cursor: pointer;
		color: #000000dd;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transform: rotate(180deg);
		&.open{
			transform: rotate(0deg);
			color: #00000099;
		}
	}
}




/* ----------------- 来場特典 ----------------- */
	
		.visit-benefits{
			text-align: center;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #000;
			border-block: 2px solid #333;
			margin-bottom: 3em;
			box-shadow: 0 2em 1em -1em #000; 
		}
@media screen and (min-width: 1300px){
	.visit-benefits{
		background-size: 110% auto;
	}
}
@media screen and (min-width: 768px) and (max-width: 1299px){
	.visit-benefits{
		background-size: auto 100%;
	}
}
@media screen and (max-width: 767px){
	.visit-benefits{
		background-size: auto 120%;
	}
}


		
/* ----------------- navigation ----------------- */
.shadow{
	background: rgba(0,0,0,.5);
	height: 100%; width: 100%;
	left: 0; top: 0;
	position: fixed;
	z-index: 500;
	backdrop-filter: blur(8px);
	display: none;
}

.navimenu{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 501;
	text-align: center;
	font-size: .87em;
	background: #720000;
	border-top: 1px solid rgba(255,255,255,.2);
	
	& ul{
		display: flex;
		align-items: stretch;
		max-width: 1000px;
		padding: 0;
		background: #720000;
		&:has(:nth-of-type(6):last-child) > li{
			width: calc(100% / 6);
		}
		&:has(:nth-of-type(5):last-child) > li{
			width: calc(100% / 5);
		}
		&:has(:nth-of-type(4):last-child) > li{
			width: calc(100% / 4);
		}
		&:has(:nth-of-type(3):last-child) > li{
			width: calc(100% / 3);
		}
		& li{
			border-left: 1px solid rgba(255,255,255,.2);
			&:last-child{
				border-right: 1px solid rgba(255,255,255,.2);
			}
			& a{
				display: block;
				margin: auto;
				color: #eee;
				text-decoration: none;
				padding: .8em .3em;
				text-align: center;
				font-weight: bold;
				position: relative;
				font-size: 1.01em;
				
				&:hover{
					color: #FDCD00;
					transition: .2s;
				}
				
				&.new::before, &.new::after{
					content: "";
					position: absolute;
					display: block;
					top: 8px;
					left: 8px;
					width: 6px;
					height: 6px;
					border-radius: 100px;
					background: rgba(255,247,39,.9);
					z-index: 2101;
				}

				&.new::after {
					background: rgba(255,247,39,.5);
					animation: anime-sonar 1.2s ease;
					animation-iteration-count: infinite;
					z-index: 2100;
				}
			}
		}
		

		
	@media (max-width:767px){
		& {
			display: none;
			flex-direction: column;
			& li{
				width: 100% !important;
				border-left: none;
				border-right: none;
				border-bottom: 1px solid rgba(255,255,255,.2);
				& a{
					padding: 1.4em 0;
				}
			}
		}
		}
	}
	
	& > button{
		display: none;
		margin: auto;
		background-color: #111;
		padding: 2px 0 1em;
		text-align: center;
	}
	
	@media (max-width:767px){
		& {
			background: #111;
		}
		& button{
			border: none;
			display: inline-block;
			color: #fff;
			box-sizing: border-box;
			padding: 2px;
			background-size: 100% 100%;
			position: relative;
			height: 2.3em;
			line-height: 2.3em;
			padding: 0 2.5em 0 2.5em;
			box-sizing: border-box;
			font-size: 1.2em;
			margin: .5em auto;
			cursor: pointer;
			
			&::before, &::after{
				content: "";
				position: absolute;
				display: inline-block;
				top: 1em;
				left: 0;
				background: #fff;
				width: 1.4em;
				height: .25em;
				box-shadow: 0 -.6em 0 0 #fff , 0 .6em 0 0 #fff;
				transition: .2s;
			}
			&.close::before{
				box-shadow: none;
				transform: rotate(45deg);
				transition: .2s;
			}
			&.close::after{
				box-shadow: none;
				transform: rotate(-45deg);
				transition: .2s;
			}
		}
	}
}	
	
@keyframes anime-sonar {
	0% {transform:scale(1);}
	100% {transform:scale(5);opacity:0.0;}
}


/* ----------------- key-visual ----------------- */
h1.key-visual{
	background-repeat: no-repeat;
	background-position: center center;
	height: 0;
	overflow: hidden;
	padding-top: 54.5%;
	transition: .2s;
	background-size: auto 100%;
	position: relative;
}

h1.pre-visual{
	--sec: 15s;
	background: #000;
	padding: 12% 5%;
	position: relative;
	overflow: hidden;
	@media (max-width:767px){
		padding: 30% 5%;
	}
	
	& figure{
		position: relative;
		z-index: 100;
		max-width: 800px;
		width: width: 70%;
		display: flex;
		gap: 1em;
		filter: drop-shadow(0,0,3em,#000);
		& img{
			width: 44%;
		}
	}
	
	&::before,
	&::after,
	& > div{
		content: "";
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		inset: 0;
	}
	
	&::after{
		z-index: 60;
		inset: 7px;
		border-radius: 1em;
		box-shadow: 0 0 0 2em rgba(0,0,0,.5);
	}
	&::before{
		z-index: 50;
		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,.1) 0 1.5px,
			transparent 1.5px 3px
			);
	}
	
	& > div.kv-bk4{
		z-index: 40;
		background-image: url(/yugioh/jumpfesta/images2027/pre-kv4.jpg);
		animation: kv-bk4 var(--sec) linear infinite;
	}
	& > div.kv-bk3{
		z-index: 30;
		background-image: url(/yugioh/jumpfesta/images2027/pre-kv3.jpg);
		animation: kv-bk3 var(--sec) linear infinite;
	}
	& > div.kv-bk2{
		z-index: 20;
		background-image: url(/yugioh/jumpfesta/images2027/pre-kv2.jpg);
		animation: kv-bk2 var(--sec) linear infinite;
	}
	& > div.kv-bk1{
		z-index: 10;
		background-image: url(/yugioh/jumpfesta/images2027/pre-kv1.jpg);
		animation: kv-bk1 var(--sec) linear infinite;
	}

}
	
@keyframes kv-bk4{
	0%,68%{		opacity: 0;	transform: scale(1)}
	75%,93%{	opacity: 1;}
	100%{		opacity: 0;	transform: scale(1.1)}
}

@keyframes kv-bk3{
	0%,43%{		opacity: 0;	transform: scale(1)}
	50%,84%{	opacity: 1;}
	85%,100%{		opacity: 0;	transform: scale(1.1)}
}
@keyframes kv-bk2{
	0%,18%{		opacity: 0;	transform: scale(1)}
	25%,59%{	opacity: 1;}
	60%,100%{	opacity: 0;	transform: scale(1.1)}
}
@keyframes kv-bk1{
	0%{			transform: scale(1.02)}
	34%{		transform: scale(1.1)}
	35%,92%{	transform: scale(1)}
	100%{		transform: scale(1.02)}
}

main{
	position: relative;
	overflow: hidden;
	&::before{
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: url(/yugioh/assets/images/jumpevent/background-cards.webp) center / cover;
	}
}

/* ----------------- overview ----------------- */
section.about{
	background: url(/yugioh/assets/images/bk-cards-gradient.jpg);
	text-align: center;
	padding: 2em 1em 5em;
	
	& div.overview{
		display: flex;
		justify-content: space-between;
		background: linear-gradient(to bottom, #333, #111);
		max-width: 900px;
		margin: auto auto 1.5em;
		gap: 1.5em;
		border: 1px solid #444;
		box-shadow: 0 0 0 3px #111;
		border-radius: .5em;
		padding: 1em 1em .8em;
		& figure{
			width: 29%;	
		}
		@media (max-width:767px){
			flex-direction: column;
		}
		& dl{
			flex: 1;
			display: grid;
			grid-template-columns: 100px minmax(0, 1fr);
			@media (max-width:767px){
				width: 100%;
				grid-template-columns: 80px minmax(0, 1fr);
			}
			&  > *{
				text-align: left;
				padding: .4em 0;
				line-height: 1.6em;
				margin: 0;
				&:not(:nth-of-type(1)){
					border-top: 1px solid #333;
				}
			}
			& > dt{
				color: #aaa;
				font-size: .9em;
			}
			& > dd{
				color: #eeeeee;
				font-weight: bold;
				& em{
					font-size: 1.3em;
					font-weight: inherit;
				}
				& small{
					font-size: .8em;
					padding-left: .5em;
				}
			}
		}
	}
	
	& div.information{
		paddin-bottom: .5em;
		& p{
			font-weight: 100;
			font-size: 1.2em;
			padding: .5em 0 1em;
			color: #ee0;
		}
		& a.jumplink{
			background: #fd8300;
			display: block;
			width: fit-content;
			border-radius: .2em;
			border: 2px solid #ff9f3e;
			color: #fff;
			text-decoration: none;
			font-weight: 100;
			line-height: 1.4em;
			padding: 1.2em 4em 1em;
			position: relative;
			font-size: 1em;
			box-shadow: .1em .1em .2em 0 rgba(0,0,0,.2);
			&::before{
				content: "";
				display: block;
				position: absolute;
				background: url(/yugioh/assets/svg/external.svg) center center no-repeat;
				filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
				inset: 50% 1.2em auto auto;
				width: 1em;
				aspect-ratio: 1/1;
				transform: translate(0,-50%);
			}
			&:hover{
				background-color: #ff9f3e;
				transition: .2s;
			}
			& em{
				font-weight: inherit;
				font-size: 1.1em;
				display: inline-block;
				padding: 0 .1em;
			}
			& span{
				font-weight: inherit;
				display: inline-block;
			}
			@media (max-width:767px){
				width: auto;
				padding: 1.2em .5em 1em;
			}
		}
	}
	
}


/* コーナー */
.corner{
	box-sizing: border-box;
	padding: 10em 1em 5em;
	padding: 0 0 5em;
	position: relative;
	
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,.5) 100%);
}
.corner h2{
	background: url(/yugioh/assets/images/jumpevent/corner-title-bk.png) center / cover no-repeat;
	border-block: 3px solid #e83a3a;
	border-image: linear-gradient(to right, #720000, #e83a3a, #720000) 1;
	text-align: center;
	box-shadow: 0 0 1em 0 #e83a3a55;
	padding: .8em;
	box-sizing: border-box;
	font-weight: 100;
	font-size: 2em;
	color: #fff;
	margin-bottom: 2em;
	
	@media (max-width:767px){
		& {
			font-size: 5vw;
			background-size: auto 100%;
		}
	}
	&.rushland{
		margin-bottom: 0;
	}
	& *{
		font-family: inherit;
		font-weight: inherit;
	}
	& rt{
		font-size: .2em;
		padding-bottom: .5em;
	}
	& span{
		display: inline-block;
	}
}

.corner > section{
	max-width: 1000px;
	margin: auto auto 4em;
	
	@media (max-width:1040px){
		margin: auto 1em 3em;
	}
	@media (max-width:767px){
		margin: auto .5em 2em;
	}
	&.content{}
	&.timetable{}
	&.soon{}
	&.introduction{}
	&.guide{}
	
	/*-- 各セクション共通 --*/
	color: #ccc;
	line-height: 1.3em;
	& > *:not(:last-child){
		margin-bottom: 1.5em;
	}
	& ul{
		&.marker li{
			position: relative;
			padding-left: 1.3em;
			padding-bottom: .5em;
			&::before{
				content: "■";
				position: absolute;
				inset: 0 auto auto 0;
				opacity: .5;
				transform: scale(.6);
			}
		}
		&.linear li{
			border-top: 1px solid rgba(85,85,85,.5);
			position: relative;
			padding: .5em 0;
		}
	}
	
	& a{
		color: var(--LinkColor);
		padding: 0px 0.2em;
		position: relative;
		&:hover{
			color: var(--LinkHover);
			transition: .2s;
		}
		&.linkbtn{
			display: block;
			background: #0055ff;
			border: 1px solid #4683ff;
			color: #fff !important;
			text-decoration: none;
			border-radius: .2em;
			line-height: 1em;
			position: relative;
			padding: 1em 5em;
			font-size: .9em;
			&::before{
				content: "";
				position: absolute;
				height: 0; width: 0;
				border-style: solid;
				border-width: .4em .5em;
				border-color: transparent transparent transparent rgba(255,255,255,.2);
			}
			&:hover{
				background: #4683ff;
				transition: .2s;
			}
			@media (min-width:768px){
				width: fit-content;
			}
			@media (max-width:767px){
				
			}
		}
		
		&.external{
			display: inline-block;
			padding-right: 1.4em;
			&::after{
				content: "";
				position: absolute;
				inset: .1em .4em auto auto;
				width: .8em;
				aspect-ratio :1/1;
				mask: url(/yugioh/assets/svg/external.svg) center / contain no-repeat;
				-webkit-mask: url(/yugioh/assets/svg/external.svg) center / contain no-repeat;
				background: var(--LinkColor);
			}
			&:hover::after{
				background: var(--LinkHover);
				transition: .2s;
			}
		}
	}
	& em{
		font-weight: bold;
		color: #fff;
	}
	& small{
		font-size: .9em;
		position: relative;
		display: block;
		opacity: .6;
		padding-left: 1.2em;
		&:first-of-type{
			margin-top: .3em;
		}
		&::before{
			content: "※";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
	& figure.images{
		
		&:has(> :nth-child(1):last-child){
			border: 1px solid #333;
			text-align: center;
			padding: 1em;
		}
		&:has(> :nth-child(2):last-child){
			display: flex;
			justify-content: space-between;
			gap: 1em;
			& img{
				flex: 1;
				width: 10%;
			}
		}
	}


}

/*--------------------------------*/
.corner > section.soon{
	padding: 5em;
	text-align: center;
	background: rgba(50,50,50,.5);
	border: 2px solid rgba(50,50,50,.8);
	max-width: 800px;
	& p{
		font-size: 1.3em;
		font-weight: 100;
		color: #bbb;
	}
}
	
/*--------------------------------*/
.corner > section.introduction{
	text-align: center;
	& > *{
		margin: auto auto 1.5em;
	}
	& p {
		color: #eee;
		&.lead{
			font-size: 1.1em;
			line-height: 1.6em;
			font-weight: bold;	
		}
		& span{
			display: inline-block;
			font-weight: inherit;
		}
		@media (max-width:767px){
			
		}
	}
	& figure{
		&:has(>:nth-of-type(1):last-child){
			& > img{
				margin: auto;
			}
		}
		&:has(>:nth-of-type(4):last-child){
			display: flex;
			flex-wrap: wrap;
			& > img{
				width: 50%;
			}
		}
	}
	& small{
		width: fit-content;
	}
}

/*--------------------------------*/
.corner > section.timetable{
	background: #161616;
	background: radial-gradient(circle at 50% -10%, #2d2d2dee 0%, #111111ee 70%);
	padding: 1.5em;
	border: 2px solid #444;
	@media (max-width:767px){
		padding: 1.5em 1em;
	}
	
	& h3{
		font-size: 1.2em;
		font-weight: 100;
		border-bottom: 3px double #444;
		padding: .5em 0 1.5em;
		color: #eee;
		text-align: center;
	}
}
	.gridtimetable {
		display: grid;
		padding: 1em 0 0;
		overflow: hidden;
		gap: 0 1em;
		grid-template-columns: 80px 1fr;
		grid-template-rows: repeat(28, minmax(25px, 1fr));
		position: relative;
		@media (max-width:767px){
			grid-template-columns: 40px 1fr;
		}
	}

	.gridtimetable > time {
		grid-column: 1;
		grid-row: var(--row) / span 4;
		position: relative;
		z-index: 1;
		color: #bbb;
		border: 1px solid #444;
		font-size: .75em;
		line-height: 1em;
		padding: .3em 0 .2em;
		border-radius: .3em;
		margin: 0 0 auto;
		text-align: center;
		transform: translate(0,-50%);
		
		&:last-child{
			grid-row: var(--row) / span 1;
			background: #111;
		}
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 80px;
			width: calc(100vw);
			border-top: 1px dashed #444;
		}
		@media (max-width:767px){
			&::after {
				left: 40px;
			}			
		}
	}

	.gridtimetable > div {
		grid-column: 2;
		grid-row: var(--start) / span var(--span);
		position: relative;
		z-index: 2;
		margin: 0 1em 0 0;
		font-size: .85em;
		display: flex;
		
		box-sizing: border-box;
		background: #252525;
		box-shadow: 0 0 0 3px #222 inset;
		border: solid 1px #555;
		color: #ccc;
		text-align: left;
		line-height: 1.4em;
		padding: 1em .8em;
		&:has(a.inpage){
			padding: 1em 4em 1em .8em;
		}
		& p{
			margin: auto auto auto 0;
			& time{
				display: block;
				opacity: .8;
				font-size: .9em;
				font-weight: bold;
				color: #eee;
			}
			& em{
				display: block;
				color: #ee0;
				font-size: 1.1em;
				padding: .3em 0;
			}
			& a.inpage{
				position: absolute;
				inset: 50% .8em auto auto;
				transform: translate(0,-50%);
				text-align: center;
				text-decoration: none;
				&::before{
					content: "";
					display: block;
					margin: auto;
					background: var(--LinkColor);
					mask: url(/yugioh/assets/svg/pageancor.svg) center / contain no-repeat;
					-webkit-mask: url(/yugioh/assets/svg/pageancor.svg) center / contain no-repeat;
					width: 1.3em;
					aspect-ratio: 1/1;
					margin-bottom: .3em;
				}
				&:hover::before{
					background: var(--LinkHover);
					transition: .2s;
				}
			}
		}
		
	}
	

/*--------------------------------*/
.corner > section.guide{
	background: rgba(17,17,17,.5);
	border: 1px solid #222222;
	padding: 2em;
	
	@media (max-width:767px){
		padding: 2em 1em;
	}
	
	& h4{
		width: fit-content;
		font-weight: 100;
		font-size: 1.3em;
		padding: 0 2em;
		text-align: center;
		color: #fff;
		position: relative;
		&::before,&::after{
			content: "";
			position: absolute;
			width: 10%;
			height: .2em;
			aspect-ratio: 1/1;
			background: rgba(150,150,150,.5);
			border-radius: 10em;
			transform: translate(0,-50%);
		}
		&::before{	inset: 50% auto auto 0;}
		&::after{	inset: 50% 0 auto auto;}
	}
	& table.pay-brand{
		color: #ccc;
		font-size: .98em;
		width: 100%;
		border: 1px solid rgba(85,85,85,.5);
		& tr > *{
			border-bottom: 1px solid rgba(85,85,85,.5);
			padding: .5em;
			font-size: .9em;
		}
		& tr > td{
			opacity: .8;
		}
		
		& caption{
			margin-bottom: .3em;
			font-weight: bold;
			padding-left: .3em;
		}
	}

}

/*--------------------------------*/
.corner > section.content{
	background:
		url(/yugioh/jumpfesta/images2027/bk-noise.png) center top / 100% auto,
		radial-gradient(
			circle at 50% 0%,
			#323232 0%,
			#171717 70%
		);
	border-radius: 1em;
	padding: 3em 2.5em 2em;
	border: 6px solid #171717;
	box-shadow: 0 0 0 3px var(--contentColorD) inset,  0 0 4px 3px #171717 inset;
	@media (max-width:767px){
		border-radius: .8em;
		padding: 2em 1.5em;	
		border: 4px solid #171717;
		box-shadow: 0 0 0 1px var(--contentColorD) inset,  0 0 4px 3px #171717 inset;
	}
	--contentColorL: #888;
	--contentColorD: #444;
	&.ocg{		
		--contentColorL: #d71a1a;
		--contentColorD: #751515;
	}
	&.rushduel{	
		--contentColorL: #e77f33;
		--contentColorD: #753c12;
	}
	&.tagforce{	
		--contentColorL: #24958e;
		--contentColorD: #0f4541;
	}
	
	& > header{
		position: relative;
		margin-bottom: 1em;
		@media (min-width:768px){
			min-height: 8em;	
		}
		@media (max-width:767px){
			min-height: 0;	
		}
		&:has(a.officalsite-btn){
			padding-right: 26%;	
			& h3{
				font-size: min(7vw,3em);
			}
		}
		&:not(:has(.officalsite-btn)){
			& h3{
				font-size: min(6vw,3em);
			}
		}
		& span{
			font-weight: 100;
			display: block;
			margin-bottom: 1em;
			color: var(--contentColorL);
			letter-spacing: -.02em;
		}
		& h3{
			font-weight: 100;
			line-height: 1.2em;
			color: #fff;
			margin: auto auto .5em 0;
			width: fit-content;
			& ruby{
				font-weight: 100;
			}
			& rt{
				font-size: .2em;
				font-weight: 400;
			}
		}
		& a.officalsite-btn{
			position: absolute;
			width: 24%;
			inset: 0 0 auto auto;
			@media (max-width:767px){
				width: 30%;
			}
		}
		
	}
	
	&.small header{
		min-height: 0 !important;
		& h3{
			font-size: min(4vw,2em);
		}
	}
	
	& ul.event-sales-products.bk000.double{
		border-block: 3px double #444;
		padding: 1.5em .5em;
		& li a::before , & li a::after{
			content: none;
		}
		& img{
			border-radius: .3em;
		}
	}
	
	& div.item{
		border-top: 1px solid #333;
		padding: 1.5em 0 0 7em;
		position: relative;
		
		&.center{
			padding: 1.5em 1em 0;
			text-align: center;
		}
		
		&::before, &::after{
			content: "";
			position: absolute;
			background: #333;
			height: 5px;
			width: 2%;
			border-radius: .5em;
		}
		&::before{	inset: -3px auto auto 0;}
		&::after{	inset: -3px 0 auto auto;}
		
		& > *:not(:last-child){
			margin-bottom: 1em;
		}
		& h4{
			position: absolute;
			inset: 1.5em auto auto 0;
			color: #fff;
			color: var(--contentColorL);
			font-weight: 100;
		}
		@media (max-width:767px){
			padding: 1em 0 0 0;
			& h4{
				position: relative;
				inset: 0;
				border-left: 5px solid  var(--contentColorD);
				padding: .4em .5em .2em;
			}
		}
		& figure.soon{
			aspect-ratio: 4/1;
			background: #222;
			border: 1px solid #222;
			box-shadow: 0 0 0 2px #111 inset;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			font-weight: 100;
			font-size: 1.3em;
		}
		& figure.prizes{
			background: linear-gradient(to bottom, #222, #111);
			border: 1px solid #333;
			box-shadow: 0 0 0 2px #111 inset; 
			padding: 1.5em;
			text-align: center;
			position: relative;
			&::before,&::after{
				content: "";
				position: absolute;
				height: 7px;
				border-left: 7px solid #333; 
				border-right: 7px solid #333; 
			}
			&::before{	inset: -3px -3px auto -3px;}
			&::after{	inset: auto -3px -3px -3px;}
			
			&.pack > img{
				width: 18%;
			}
			&.protector > img{
				width: 30%;
			}
			&.card:has(>:nth-of-type(4):last-child){
				display: flex;
				justify-content: space-between;
				--gaps: 3em;
				gap: calc(var(--gaps) / 3);
				& img{
					width: calc((100% - var(--gaps)) / 4);
				}
			}
			& figcaption{
				padding-top: 1em;
				font-size: .8em;
			}
			& details{
				margin: 1em auto .3em;
				padding: 0 1em;
				
				& summary{
					cursor: pointer;
					display: block;
					width: fit-content;
					position: relative;
					line-height: 1em;
					padding: .3em 2em .2em;
					color: #777;
					border: 1px solid #555;
					margin: auto;
					&:hover{
						background: #333;
						transition: .2s;
					}
					@media screen and (max-width:767px){
						width: auto;	
						padding: .5em 2em .4em;
					}
				}
				& summary::-webkit-details-marker{
					display: none;
				}
				&[open] summary{
					width: auto;
				}
				& summary::after{
					content: "+";
					position: absolute;
					right: .5em;
					top: 50%;
					transform: translate(0,-50%);
				}
				&[open] summary::after{
					content: "-";
				}
				& div{
					opacity: 0;
					transition: .2s;
					padding: 1em 0 0;
					display: flex;
					justify-content: space-between;
					& > *{
						width: 18%;
					}
				}
				&[open] div{
					opacity: 1;
					transition: .2s;
				}
				& a.cboximage{
					position: relative;
					&::before{
						content: "";
						display: block;
						position: absolute;
						width: 20%;
						aspect-ratio: 1/1;
						right: 3.5%;
						bottom: 2.4%;
						background: #fff url(/yugioh/assets/svg/zoom.svg) center center no-repeat;
						background-size: 66% 66%;
						filter: invert(1);
						opacity: .5;
					}
				}
				& a.cboximage:hover{
					transform: scale(1.05,1.05);
					transition: .2s;
				}
			}
		}/*figure.prizes*/
		
		& table.receive-pack{
			width: 100%;
			border: 1px solid rgba(85,85,85,.5);
			border-collapse: separate;
			border-spacing: 2px;
			font-size: .8em;
			vertical-align: center;
			}
			& tr > *{
				padding: .3em 2em;
				text-align: center;
				border-bottom: 1px solid rgba(85,85,85,.5);
			}
			& tr > th[rowspan]{
				vertical-align: middle;
				background: rgba(85,85,85,.3);
				border: none;
			}
			& tr > td{
				color: #cc0;
				font-weight: bold;
				border-left: 1px solid rgba(85,85,85,.5);
			}
			& tr:last-child > *{
				border-bottom: none;
			}
		}
		
		& div.product{
			display: flex;
			margin: 2em -1em -.5em;
			border: 1px solid #222;
			background: #111;
			border-radius: .5em;
			padding: .5em;
			gap: 1em;
			&::before{
				content: "商品情報";
				font-size: .9em;
				width: 7em;
				padding-right: 1em;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #333;
				color: #888;
			}
			& figure{
				width: 20%;
				justify-content: center;
				text-align: center;
				& img{
					
				}
			}
			& div{
				flex: 1;
				font-size: .9em;
				& > *:not(a){
					display: block;
				}
				& em{
					font-size: 1.15em;
				}
				& span{
					font-size: .85em;
					opacity: .6;
				}
				& a{
					font-size: .9em;
					margin-top: 1em;
					text-decoration: none;
					border: 1px solid var(--LinkColor);
					line-height: 1em;
					padding: .25em 1.6em .15em 1em;
					&::after{
						inset: 50% .4em auto auto;
						transform: translate(0,-50%) ;
					}
					&:hover{
						border-color: var(--LinkHover);
						transition: .2s;
					}
				}
				
			}
		}
		
	}/*.item*/
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* コーナーナビ 
	.department-nav{
		display: flex;
		margin: auto auto 3em;
		text-align: center;
		justify-content: space-between;

		&:has(> :nth-child(2):last-child){
			max-width: 400px;
		}
		&:has(> :nth-child(3):last-child){
			max-width: 600px;
		}
		&:has(> :nth-child(4):last-child){
			max-width: 800px;
		}
	
		& li{
			padding: 0 1%;
			
			& a{
				border: 1px solid #fdcd00;
				display: block;
				background: #0c0c0c;
				padding: 1em 1em 2em;
				position: relative;
				& img{
					width: 80%;
				}
				&::before{
					content: "▼";
					position: absolute;
					text-decoration: none;
					bottom: .1em;
					left: calc(50% - .5em);
					color: #fdcd00;
				}
				&:hover{
					border: 1px solid #fff;
					transition: .2s;
				}
				&:hover::before{
					color: #fff;
					transition: .2s;	
				}
			}
		
		}
	}

	
	.corner .department{}

/* 部門基本 content と　productsに分ける/
	.department{
		
		background: #111;
		
		max-width: 1000px;
		padding: 2em 1em ;
		margin: auto auto 6em;
		color: #ddd;
		font-size: 1em;
		letter-spacing: -.40em;
		transition: .2s;
	}
		.department > *{
			letter-spacing: normal;
			box-sizing: border-box;
			vertical-align: top;
			transition: .2s;
		}
		
		.department > section.event-product-view{
			width: 20%;
			display: inline-block;
			& figure{
				margin: auto;
			}
			& p{
				text-align: center;
				padding: 1.5em 0;
				margin: auto;
			}
			& span{
				display: block;
				text-align: center;
				font-size: .8em;
				padding: 0 1em;
				opacity: .5;
				margin: auto;
			}
		}
		
		.department > section.contents{
			width: 80%;
			display: inline-block;
			box-sizing: border-box;
			padding-right: 1em;
		}
		
		
@media screen and (max-width:767px){
	.department{
		font-size: .9em;
	}
		.department > section.event-product-view{
			width: 100%;
			padding: .5em 1em .5em 0;
			box-sizing: border-box;
			border: 1px solid rgba(85,85,85,.7);
		}
			.department > section.event-product-view figure{
				width: 30%;
				box-sizing: border-box;
				padding: 0 .5em;
				float: left;
				border-right: 1px solid rgba(85,85,85,.5);
			}
			.department > section.event-product-view p{
				padding: .5em 0;
				margin: auto auto auto 33%;
			}
			.department > section.event-product-view span{
				margin: auto auto auto 33%;
			}
		
		.department > section.contents{
			width: auto;
			display: block;
			padding-right: 0;
		}
}


/* 内容　
		.department > h3{
			font-size: 2.2em;
			border-bottom: 1px solid rgba(85,85,85,.8);
			margin-bottom: .8em;
			padding-bottom: .5em;
			position: relative;
			
			@media (max-width:767px){
				&{
					font-size: 4.5vw;
				}
			}
			& span{
				opacity: .7;
				font-size: .4em;
				display: block;
				width: fit-content;
				border: 1px solid #fdcd00;
				margin: auto auto .7em 0;
				line-height: 1em;
				padding: .5em 1.5em .3em;
				background: #fdcd0011;
			}
			& time{
				color: #ff0;
				border: 1px solid #ff0;
				border-radius: .3em;
				position: absolute;
				right: 0;
				top: .8em;
				line-height: 1em;
				padding: .3em 0 .2em;
				width: 6em;
				font-size: .45em;
				text-align: center;
			}
				& time::after{
					content: "更新";
				}
		}
		
		.department h4{
			background: #72000066;
			color: #fdcd00;
			color: #ffffff;
			font-size: 1.3em;
			
			font-weight: bold;
			padding: .6em 1em .4em;
			margin-bottom: 1em;
			margin-top: 2em;
			position: relative;
			border-block: solid #720000 3px;
			@media (max-width:767px){
				&{
					font-size: 3.5vw;
				}
			}
			& ruby{
				font-weight: inherit;
				font-family: inherit;
			}
			& rt{
				font-weight: inherit;
				font-family: inherit;
				font-size: .3em;
				opacity: .7;
			}
		}
			.department h4:first-child , p.h4-deco + h4{
				margin-top: auto !important;
			}
			
			.department h4.ppp-ocg,
			.department h4.ppp-rush{
				position: relative;
				padding-left: 4em; 
				margin-bottom: 2em;
			}
			.department h4.ppp-ocg::before,
			.department h4.ppp-rush::before{
				content: "";
				width: 4em;
				top: 50%;
				transform: translate(0,-50%);
				aspect-ratio: 1 / 1;
				position: absolute;
				left: -1em;
				background-size: 100% auto;
			}
			.department h4.ppp-ocg::before{
				background-image: url(/yugioh/assets/images/jumpevent/ppp-ocg.png);
			}
			.department h4.ppp-rush::before{
				background-image: url(/yugioh/assets/images/jumpevent/ppp-rush.png);
			}
			
			.department h4 span{
				padding-left: .5em;
				opacity: .7;
			}
			
			
			
			
			
		.department h5:not([class]){
			display: block;
			width: fit-content;
			text-align: center;
			color: #ccc;
			padding: .4em 0 .3em;
			box-sizing: border-box;
			line-height: 1.4em;
			border: 1px solid #999;
			box-shadow: 0 0 0 3px rgba(200,200,200,.3) inset;
			margin-bottom: 1em;
			font-weight: bold;
		}
		
		.department h6.speedduel,.department h6.rushduel{
			display: block;
			
			line-height: 1em;
			padding: .4em .5em .2em;
			font-weight: bold;
			margin: auto auto 1em auto;
			
		}
		.department h6.speedduel{
			background: linear-gradient(to bottom, #0052af, #005fb9, #0052af);
			border: 1px solid #005fb9;
		}
		.department h6.rushduel{
			background: linear-gradient(to bottom, #f65116, #fa8825, #f65116);
			border: 1px solid #fa8524;
			margin-top: 2em;
		}
		
		
		.department div.flex-style{
			display: flex;
			align-items: flex-start;
			
		}
			.department div.flex-style > p,
			.department div.flex-style > div{
				width: 50%;
			}
			
			.department div.flex-style > figure{
				width: 50%;
				max-width: 400px;
				text-align: center;
				box-sizing: border-box;
				padding: 0 .5em;
				margin: auto;
			}
		.department a{
			color: #8ab1ff;
			padding: 0 .2em;
		}
			.department a:not([tabindex]):hover{
				color: #ff5500;
				transition: .2s;
			}
		.department p{
			margin-bottom: 1.5em;
			&.noticep{
				text-align: center;
				background: #720000aa;
				margin-bottom: 2em;
				padding: 1em;
				color: #ff9a7a;
				& span{
					display: inline-block;
				}
			}
		}
			.department p time{
				color: #ccc;
				display: block;
				padding: .7em .8em .5em;
				font-weight: bold;
				font-size: 1.1em;
				border: 1px solid rgba(85, 85, 85, .5);
			}
			.department p em{
				display: block;
				font-weight: bold;
				opacity: 1;
				font-size: 1.2em;
				margin-top: -.1em;
				color: #fd0;
			}
			.department p.h3-deco{
				color: #ff9c00;
				border: 2px solid #ff9c00;
				font-weight: bold;
				text-align: center;
				line-height: 1em;
				padding: .5em 0 .3em;
				border-radius: 5em;
				margin-top: 2em;
			}
		.department small{
			display: block;
			position: relative;
			padding-left: 1.2em;
			font-size: .95em;
			opacity: .7;
		}
			.department small::before{
				content: "※";
				position: absolute;
				left: 0; top: 0;
			}
			

		.department table{
			margin-bottom: 1em;
		}
/* 景品数表示 */
			table.receive{
				width: auto;
				border: 1px solid rgba(85,85,85,.5);
				border-collapse: separate;
				border-spacing: 3px;
				font-size: .9em;
			}
			table.receive tr > *{
				padding: .1em 2em;
				text-align: center;
				border-bottom: 1px solid rgba(85,85,85,.5);
			}
			table.receive tr > th.pk{
				background: rgba(85,85,85,.3);
				border: none;
			}
			table.receive tr > td{
				color: #ff0;
				font-weight: bold;
				border-left: 1px solid rgba(85,85,85,.5);
			}
			table.receive tr:last-child > *{
				border-bottom: none;
			}
@media screen and (max-width:767px){
			table.receive{
				width: 100%;
			}
}

/* タイムテーブル */
			
table.time-table{
	color: #ccc;
	font-size: .98em;
	width: 100%;
		
	& tbody{
		width: 100%;
	}
	
	@media (max-width:767px){
		& , & tbody, & tr{
			display: block;
		}
	}
	
	& tr > *{
		padding: 1em .5em;
	}
	& tr:not(:first-child) > *{
		border-top: 1px solid rgba(85,85,85,.5); 
		
	}
	@media (max-width:767px){
		& tr:not(:first-child) > td{
			border-top: none; 
		}
	}
	
	& tr th{
		width: 15%;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		line-height: 2em;
		& time{
			display: block;
		}
		@media (max-width:767px){
			& {
				margin-top: 1em;
				display: block;
				width: auto;
				text-align: left;
				padding: 1em 0 0;
				font-size: 1.2em;
				& time{
					display: inline-block;
					padding-right: .5em;
					&:not(:last-child)::after{
						content: "/";
						padding-left: .5em;
					}
				}
			}
		}
	}
	& tr td{
		text-align: left;
		padding: 1.2em 0 1.2em 1em;
		@media (max-width:767px){
			& {
				display: block;
				padding: .5em 0 1.2em;
			}
		}
		
		
		& em{
			color: #fff005;
			display: block;
			font-weight: bold;
			font-size: 1.1em;
			margin-bottom: .3em;
		}
		& p{
			margin-bottom: .3em;
		}
		& p:last-child{
			padding-top: 1em;
		}
		& span{
			display: block;
			color: #999;
			opacity: .9;
			font-size: .9em;
			&::before{
				content: "出演者：";
				opacity: .7;
			}
		}
		
		& small{
			margin-top: .5em;
			color: #a7bd00;
			border: 1px solid #a7bd00;
			font-size: .85em;
			padding: .5em .5em .5em 1.8em;
			border-radius: .3em;
			&::before{
				left: .5em;
				top: .5em;
			}
			& a{
				text-decoration: underline;
			}
		}
		& a.detail:hover{
			border-color: #fff;
			color: #fff;
			transition: .2s;
		}
		
		&.right{
			text-align: right;
			& > *{
				margin: auto 0 auto auto;
			}
		}
		& a.liveicon{
			width: 50px;
			display: block;
		}
		& a.liveicon:hover img{
			transform: scale(1.15);
			transition: .2s;
		}
		
	}
	

	
}

table.pay-table{
	color: #ccc;
	font-size: .98em;
	width: 100%;
	border: 1px solid rgba(85,85,85,.5);
	& tr > *{
		border-bottom: 1px solid rgba(85,85,85,.5);
		padding: .5em;
		font-size: .9em;
	}
	& tr > td{
		opacity: .8;
	}
	
	& caption{
		margin-bottom: .3em;
		font-weight: bold;
		padding-left: .3em;
	}
}

		.department ul{
			margin-bottom: 1em;
		}
/* step */
		dl.method{
			letter-spacing: -.40em;
			padding: 1em 0 .5em;
		}
			dl.method + dl.method{
				border-top: 1px solid rgba(85,85,85,.5);
			}
			dl.method > *{
				letter-spacing: normal;
				display: inline-block;
				vertical-align: top;
			}
			dl.method dt{
				background: #e83a3a;
				bcolor: #fff;
				font-weight: bold;
				width: 8em;
				line-height: 1em;
				padding: .5em 0;
				text-align: center;
			}
			dl.method dd{
				box-sizing: border-box;
				width: calc(100% - 8em);
				padding-left: 1.5em;
			}
			
			
			
/*■つきUL*/
	ul.markera{}
		ul.marker li{
			position: relative;
			padding-left: 1.2em;
			padding-bottom: .3em;
		}
		ul.marker li::before{
			content: "■";
			position: absolute;
			left: 0; top: 0;
			opacity: .5;
		}
	/*■つき－つきUL*/
	ul.line{}
		ul.line li{
			border-top: 1px solid rgba(85,85,85,.5);
			position: relative;
			padding: .5em 0 .3em 1.4em;
		}
			ul.line li::before{
				content: "■";
				position: absolute;
				left: 0;
				top: .5em;
				opacity: .5;
			}
			
/**/
		.department figure{
			margin-bottom: 1em;
			text-align: center;
		}
		.department figure.image{
			text-align: left;
		}
		.department figure.prize{
			background: rgba(85,85,85,.3);
			border-radius: .5em;
			padding: .5em 0;
		}
			.department figure.prize figcaption{
				font-size: .85em;
				opacity: .6;
				padding: .5em;
			}
		.department figure.prize + p{
			margin-top: 2em;
		}
		
		
		.department figure.prizes{
			background: rgba(85,85,85,.3);
			border-radius: .5em;
			padding: .5em 0;
			
			& > *{
				margin: auto;
				max-width: 100%;
			}
			& > picture{
				display: inline-block;
			}
			&.pack > img,
			&.pack > picture{
				margin: 2% auto;
				max-width: 20%;
			}
			&.card > *{
				width: 20%;
				margin: 1% 5%;
			}
			&.protector > *{
				width: 25%;
				margin: 1% 5%;
			}
			&.protector.three > *{
				width: 25%;
				margin: 1% 2%;
			}
			&.field > *{
				margin: 2% auto;
				max-width: 80%;
			}
			&.pouch{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				& > img{
					width: calc(96% / 4);
				}
				@media (max-width:767px){
					& > img{
						width: calc(96% / 2);
						margin-bottom: 2%;
					}
				}
			}
			&.sticker{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				& > img{
					width: calc(100% / 4 - 2%);
					margin: auto .8%;
				}
				@media (max-width:767px){
					& > img{
						width: calc(80% / 2 - 2%);
						margin-bottom: 2%;
					}
				}
			}
			
			& figcaption {
				font-size: .9em;
				
				& br+a.db{
					margin-top: 1em;
				}

			}
			
		}
		
		.department figure.prizes details{
				margin: 1em auto .3em;
				padding: 0 1em;
				
				& summary{
					font-size: .9em;
					cursor: pointer;
					display: block;
					width: fit-content;
					position: relative;
					line-height: 1em;
					padding: .3em 2em .2em;
					color: #777;
					border: 1px solid #999;
					margin: auto;
					
					&:hover{
						background: #eee;
						transition: .2s;
					}
					@media screen and (max-width:767px){
					& {
						width: auto;	
						padding: .5em 2em .4em;
					}
					}
				}
				& summary::-webkit-details-marker{
					display: none;
				}
				&[open] summary{
					width: auto;
					background: #eee;
					transition: .2s;
				}
				& summary::after{
					content: "+";
					position: absolute;
					right: .5em;
					top: 50%;
					transform: translate(0,-50%);
				}
				&[open] summary::after{
					content: "-";
				}
				& div{
					opacity: 0;
					transition: .2s;
					padding: 1em 0 0;
					display: flex;
					justify-content: space-between;
					& > *{
						width: 18%;
					}
				}
				&[open] div{
					opacity: 1;
					transition: .2s;
				}
				& a.cboximage{
					position: relative;
					&::before{
						content: "";
						display: block;
						position: absolute;
						width: 20%;
						aspect-ratio: 1/1;
						right: 3.5%;
						bottom: 2.4%;
						background: #fff url(/yugioh/assets/svg/zoom.svg) center center no-repeat;
						background-size: 66% 66%;
						filter: invert(1);
						opacity: .5;
					}
				}
				& a.cboximage:hover{
					transform: scale(1.05,1.05);
					transition: .2s;
				}
			}
		
		
		
		
		
		
		.department div{}
		
/* 購入特典 */		


		
/* 注意事項系 */		
		
	.department div.explanation{
		padding-left: 8em;
		position: relative;
		padding-top: 1.8em;
		border-top: 1px solid rgba(85,85,85,.5);
		
		& h5{
			position: absolute;
			left: 0;
			top: 1.4em;
			font-size: .9em;
			width: 7.5em;
			color: #ccc;
		}
	}
		
		.explanation + .explanation{
			margin-top: -.5em !important;
			border-top: none !important;
		}

@media screen and (max-width:767px){
			.department div.explanation{
				padding-left: 0;
				position: relative;
				padding-top: 1.5em;
				margin-top: 2em;
				border-top: 1px solid rgba(85,85,85,.5);
			}
				.department div.explanation h5{
					position: relative;
					left: 0; top: 0;
					margin-left: 0;
					width: auto;
					text-align: left;
					padding: .7em 1em .5em;
					font-size: 2.5vw;
				}
}

/* DL：レジェンドデュエリスト */
		.department div.legend-list{}
			div.legend-list{
				letter-spacing: -.40em;
				margin-bottom: 1em;
			}
			div.legend-list > figure{
				letter-spacing: normal;
				display: inline-block;
				width: calc(100% / 3);
				margin-bottom: 1em;
				text-align: center;
				box-sizing: border-box;
				padding: 0 .5em;
				vertical-align: top;
			}




/* movie */
	ul.movie-area{
		display: flex;
		border: 1px solid rgba(85,85,85,.5);
		background: #222;
		padding: .4em .3em;
	}
		ul.movie-area li{
			box-sizing: border-box;
			padding: 0 .1em;
			text-align: center;
		}
		ul.movie-area span{
			display: block;
			text-align: center;
			font-size: .75em;
			color: #aaa;
			padding: .5em 0 0;
		}
@media screen and (max-width:767px){
	ul.movie-area{
		flex-wrap: wrap;
	}
		ul.movie-area li{
			width: 50%;
			margin-bottom: .5em;
		}
}


/*　内容終わり　*/



/* イベント自体の注意事項 */
	.notice{
		background: rgba(10,10,10,.5);
		padding: 0 1em 1em;
		border-top: 1px solid #444;
		border-bottom: 1px solid #222;
	}
		.notice h1{
			text-align: center;
			margin-bottom: .3em;
		}
		
/* menu分のfooterスキマ */		
	footer{
		padding-bottom: 3em;
	}
		
/* プラットフォームの商標表記 */		
.footer-notes{
	color: #6c6c6c !important;
}
	.footer-notes img{
		filter: invert(43%) sepia(0%) saturate(2%) hue-rotate(55deg) brightness(96%) contrast(86%);
		height: 1em;
		vertical-align: middle;
	}
		
		
/* ジャンプフェスストアで受注販売 */
	.jf-goods{
		letter-spacing: -.40em;
		margin: auto auto 2em;
	}
		.jf-goods > dl{
			box-shadow: 0 0 0 1px rgba(85,85,85,.5) inset;
			letter-spacing: normal;
			display: inline-block;
			margin: auto 2%;
			width: 46%;
			text-align: center;
			box-sizing: border-box;
			padding: .5em .5em 1.5em;
			vertical-align: top;
		}
		.jf-goods > dl dd > *:not(a){
			display: block;
		}
		.jf-goods > dl dd .price{
			margin-bottom: 1em;
			opacity: .8;
		}

/* ジャンプフェスストアで受注販売2 */		
	div.jump-store{
		display: flex;
		justify-content: space-between;
		padding-bottom: 1em; 
		@media screen and (max-width:767px){
			display: block;
		}
		
		& div{
			width: 48%;
			@media screen and (max-width:767px){
				width: 100%;	
			}
			margin-top: 0;
			
			& figure{
				position: relative;
			}
				& figure.mto::before , & figure.sav::after{
					position: absolute;
					right: 1em;
					font-weight: bold;
					padding: .2em 1em .1em;
					border-radius: 50em;
					background: #f0f;
					box-shadow: 1px 1px 0 0 rgba(250,250,250,.2) inset;
				}
				& figure.mto::before{
					content: "受注販売";
					top: 1em;
					color: #04e4ff;
					background: linear-gradient(to bottom, #2e2eff 50%, #6060ff);
				}
				& figure.sav::after{
					content: "会場販売";
					top: 3.5em;
					color: #ffd634;
					background: linear-gradient(to bottom, #e03636 50%, #e45050);
				}
			
			& figure img{
				max-width: 50%;
			}
			& span{
				display: block;
			}
			& span.ontheday{
				background: #720000;
				border-radius: .3em;
				text-align: center;
				padding: .5em;
				font-size: .9em;
				font-weight: bold;
			}
			& span.price{
				color: #ff0;
				margin-bottom: 1.5em;
			}
			& strong{
				display: block;
				font-size: 1.2em;
			}
			& a.linkbtn{
				float: right;
			}
		}
	}

/* ジャンプフェスストアで受注販売3 */
section.aside.corner{
	& h2{
		margin-bottom: auto;
	}
}
	.limited-section{
		
		color: #fff;
		
		& div.limited-ocg{
			padding: 3em 1em;
			display: flex;
			justify-content: center;
			position:relative;
			background: #200b0e;
			@media (max-width:767px){
				& {
					display: block;
				}
			}
			
			&::before,&::after{
				content: "";
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			&::before{
				background:
				url(/yugioh/assets/images/jumpevent/premiumpack-bk-left.png) left center no-repeat,
				url(/yugioh/assets/images/jumpevent/premiumpack-bk-right.png) right center no-repeat;
				background-size: 40% auto, 40% auto;
				filter: brightness(0) saturate(100%) invert(12%) sepia(92%) saturate(7485%) hue-rotate(327deg) brightness(99%) contrast(106%);
				opacity: .6;
			}
			&::after{
				background: url(/yugioh/assets/images/jumpevent/premiumpack-bk.png) center center;
				filter: brightness(0) saturate(100%) invert(12%) sepia(92%) saturate(7485%) hue-rotate(327deg) brightness(99%) contrast(106%);
				opacity: .6;
			}
			
			
			& > *{
				position:relative;
				z-index: 5;
			}
			& > figure{
				width: 25%;
				max-width: 350px;
				margin-right: 0;
				text-align: center;
				& > img{
					width: 80%;
					margin: auto;
				}
				@media (max-width:767px){
					& {
						width: 100%;
						max-width: 100%;
						margin-bottom: 1.5em;
						& > img{
							width: 50%;
						}
					}
				}
			}
			& > div{
				width: 75%;
				max-width: 650px;
				margin-left: 0;
				@media (max-width:767px){
					& {
						width: 100%;
						max-width: 100%;
					}
				}
				
				& >*{
					margin-bottom: 1em;
				}
				& h3{
					color: #ffc200;
					font-weight: bold;
					font-size: 1.2em;
					& > span{
						display: inline-block;
						font-weight: inherit;
					}
					@media (max-width:767px){
						& {
							text-align: center;
						}
					}
				}
				& > p{
					color: #ffbdca;
				}
				& > span{
					display: block;
					color: #a5a5a5;
				}
			}
		}
		
		.limited-notice{
			background: #560001;
			text-align: center;
			padding: 1em;
			& p{
				color: #ffb400;
				margin: auto;
				padding: 0 1.7em;
				position: relative;
				width: fit-content;
				&::before, &::after{
					content: "";
					position: absolute;
					width: 1.2em;
					aspect-ratio: 1/1;
					top: 50%;
					transform: translate(0,-50%);
					height: 1.2em;
					background: url(/yugioh/assets/svg/attention.svg) center center no-repeat;
					background-size: 100% auto;
					filter: brightness(0) saturate(100%) invert(73%) sepia(48%) saturate(2912%) hue-rotate(359deg) brightness(103%) contrast(104%);
				}
				&::before{
					left: 0;
				}
				&::after{
					right: 0;
				}
				& span{
					display: inline-block;
				}
				@media (max-width:767px){
					& {
						width: fit-content;
						display: inline-block;
						padding: 0 1.2em;
					}
				}
			}
			
		}
		
		.limited-howtobuy{
			letter-spacing: -.40em;
			text-align: center;
			padding: 4em 0;
			background: #111;
			position: relative;
			@media (max-width:767px){
				& {
					padding: 2em 0;
				}
			}
			&::before{
				content: "";
				position: absolute;
				left: 50%;
				top: 2em;
				width: 1px;
				height: calc(100% - 4em);
				background: #333;
			}
			
			& > dl{
				letter-spacing: normal;
				display: inline-block;
				width: 50%;
				margin: auto auto 1em;
				max-width: 450px;
				text-align: center;
				vertical-align: top;
				box-sizing: border-box;
				padding: 0 1em;

				& dt{
					padding: .4em 2.5em .2em;
					border: 2px solid #ccc;
					width: fit-content;
					font-weight: bold;
					font-size: 1.2em;
					line-height: 1em;
					border-radius: 50em;
					margin-bottom: 1em;
				}
				& dd{
					
					& > p{
						text-align: left;
						margin-bottom: 2em;
						color: #aaa;
						font-size: .95em;
						@media (min-width:767px){
							& {
								height: 6em;
							}
						}
					}
					& > a{
						display: block;
						margin: auto 1em;
						@madia (max-wdith:767px){
							& {
								margin: auto;
							}
						}
					}
				}
				&.order{
					& dt{
						background: #ff7800;
						border-color: #ff9e47;
					}
					& p{
						color: #ff9e47;
					}
				}
				&.venue{
					& dt{
						background: #ff0072;
						border-color: #ffb4d6;
					}
					& p{
						color: #ffb4d6;
					}
				}
			}
			
		}
	}


		
/* RUSHLAND */

:root{
	--drawphase: #f6a451;
	--mainphase: #b8ddf0;
	--battlephase: #e6afbd;
	--endphase: #b8d7ac;
	
	--drawphaseThin: rgba(190,105,19,.7);
	--mainphaseThin: #799aab94;
	--battlephaseThin: #e6afbd94;
	--endphaseThin: #b8d7ac94;
	
	--drawphaseBK: #f6a45115;
	--mainphaseBK: #b8ddf015;
	--battlephaseBK: #e6afbd15;
	--endphaseBK: #b8d7ac15;
	
	--drawpahseImg:		invert(25%) sepia(93%) saturate(2099%) hue-rotate(29deg) brightness(96%) contrast(99%);
	--mainpahseImg:		invert(32%) sepia(59%) saturate(1257%) hue-rotate(172deg) brightness(94%) contrast(91%);
	--battlepahseImg:	invert(38%) sepia(83%) saturate(2924%) hue-rotate(340deg) brightness(83%) contrast(115%);
	--endpahseImg:		invert(42%) sepia(39%) saturate(627%) hue-rotate(84deg) brightness(97%) contrast(90%);
	
}


div.rushland-header{
	
	margin: 0 auto 2em;
	box-sizing: border-box;
	background: none;
	color: #eee;
	border-block: 1px solid rgba(85, 85, 85, .5);
	padding: 1.5em;
	box-shadow: 0 0 0 5px #000 inset;
	position: relative;
	text-align: center;

	&::before,
	&::after{
		content: "";
		width: calc(100% - .6em);
		height: calc(100% - .6em);
		left: .3em; top: .3em;
		position: absolute;
		z-index: 1;
	}
	&::before{
		background: url(/yugioh/25th/images/countdown/card-bk.png) center center;
		background-size: 120% auto;
	}
@media screen and (max-width:869px){
	&::before{
		background-size: auto 100%;
	}
}
	&::after{
		background: #a14315;
		mix-blend-mode: overlay;
	}
	& > *{
		position: relative;
		z-index: 5;
	}
	& figure{
		background: none;
		border: none;
		margin: auto;
	}
	& em{
		display: block;
		font-size: 1.5em;
		font-weight: bold;
		padding: .5em 0;
		color: #ffff00;
		& span{
			font-weight: inherit;
			display: inline-block;
		}
	}
	& p{
		display: block;
		opacity: .9;
		padding-bottom: 1em;
	}
	& p small{
		font-size: .9em;
		opacity: .8;
	}
}



/* ラッシュランドナビ*/

div.rushland-nav{
	max-width: 1000px;
	padding: 1em;
	
	& p{
		color: #fff;
		text-align: center;
		margin-bottom: 1em;
	}
	& ul{
		padding: 1em .5em;
		margin: auto auto 1em;
		display: flex;
		box-sizing: border-box;
		border: 1px solid rgba(85, 85, 85, .5);
	
		& li{
			box-sizing: border-box;
			width: 25%;
			position: relative;
			padding: 0 .5em;
		}
		
		& li:not(:nth-child(4))::after{
			content: "";
			position: absolute;
			background: url(/yugioh/assets/svg/filltriangleright.svg) no-repeat;
			background-size: 100% 100%;
			width: .5em;
			height: 1.5em;
			right: -.3em;
			top: 50%;
			transform: translate(0,-50%);
			filter: invert(100%);
			opacity: .7;
		}
		
		& li a{
			display: block;
			text-align: center;
			position: relative;
			padding: 1em .5em;
			
			&.draw{
				background: var(--drawphase);
				& img{	filter: var(--drawpahseImg);}
			}
			&.main{
				background: var(--mainphase);
				& img{	filter: var(--mainpahseImg);}
			}
			&.battle{
				background: var(--battlephase);
				& img{	filter: var(--battlepahseImg);}
			}
			&.end{
				background: var(--endphase);
				& img{	filter: var(--endpahseImg);}
			}
			& img{
				display: block;
				max-height: 25px;
			}
			&::before,
			&::after{
				content: "";
				position: absolute;
				top: 0; left: 0;
			}
			&::before{
				box-shadow: 0 0 0 3px #fff inset;
				mix-blend-mode: overlay;
				opacity: .3;
				width: 100%;
				height: 100%;
			}
			&:hover::before{
				opacity: 1;
				transition: .2s;
			}
			&::after{
				width: 1.5em;
				height: 1.5em;
				background: linear-gradient(135deg, #000 0%, #000 50%, #00000000 50%, #00000000 100%);
				mix-blend-mode: overlay;
			}
			&.draw::after{
				opacity: .5;
			}
			
		}
	}
}
	
	
/* ラッシュランド本体 */
section.rushland-body{
	max-width: 1000px;
	padding: 1em;
	
}
	
div.phase{
	color: #eee;
	margin-bottom: 2em;
	padding: 5px calc(2px + 1.5em) 1.5em;
	
	&.draw{
		--phasecolor: var(--drawphase);
		--phasecolorThin: var(--drawphaseThin);
		background: var(--drawphaseBK);
		box-shadow: 0 0 0 2px var(--phasecolor) inset;
		& h3{
			background: var(--phasecolor);
			& img{	filter: var(--drawpahseImg);}
		}
		& p{ color: #fbebc6;}
	}
	&.main{
		--phasecolor: var(--mainphase);
		--phasecolorThin: var(--mainphaseThin);
		background: var(--mainphaseBK);
		box-shadow: 0 0 0 2px var(--phasecolor) inset;
		& h3{
			background: var(--phasecolor);
			& img{	filter: var(--mainpahseImg);}
		}
		& p{ color: #b7c5cb;}
		
	}
	&.battle{
		--phasecolor: var(--battlephase);
		--phasecolorThin: var(--battlephaseThin);
		background: var(--battlephaseBK);
		box-shadow: 0 0 0 2px var(--phasecolor) inset;
		& h3{
			background: var(--phasecolor);
			& img{	filter: var(--battlepahseImg);}	
		}
		& p{ color: #ffe8ee;}
		
	}
	&.end{
		--phasecolor: var(--endphase);
		--phasecolorThin: var(--endphaseTin);
		background: var(--endphaseBK);
		box-shadow: 0 0 0 2px var(--phasecolor) inset;
		& h3{
			background: var(--phasecolor);
			& img{	filter: var(--endpahseImg);}	
		}
		& p{ color: #ebfde4;}
		
	}
	
	& h3{
		position: relative;
		overflow: hidden;
		text-align: center;
		padding: 1.2em 1.5em;
		margin: auto calc(-1.3em) 2em;
		
		& img{
			max-height: 35px;
		}
		&::before,
		&::after{
			content: "";
			position: absolute;
			inset: 0 auto auto 0;
		}
		&::before{
			box-shadow: 0 0 0 3px #fff inset;
			mix-blend-mode: overlay;
			opacity: .3;
			width: 100%;
			height: 100%;
		}
		&::after{
			width: 1.5em;
			height: 1.5em;
			background: linear-gradient(135deg, #000 0%, #000 50%, #00000000 50%, #00000000 100%);
			mix-blend-mode: overlay;
		}
		&.draw::after{
			opacity: .5;
		}
	}
	
	& h4{
		font-size: 1.5em;
		display: block;
		color: #ffff00;
		font-weight: bold;
		margin: auto auto .5em;
		border: none;
		background: none;
		padding: 0;
	}
	
	& h5{
		background: var(--phasecolorThin);
		border: none;
		padding: .2em 0;
		font-size: 1.1em;
		text-align: center;
		position: relative;
		font-family: var(--FontGoth);
		font-weight: bold;
		margin: auto auto 1em;
		
		&::before, &::after{
			content: "1";
			position: absolute;
			width: .8em;
			height: .8em;
			z-index: 0;
			background: var(--phasecolor);
			opacity: .7;
		}
		&::before{
			inset: 2px auto auto 2px;
			clip-path: polygon(0 0, 100% 0, 0 100%);
		}
		&::after{
			inset: 2px 2px auto auto;
			clip-path: polygon(0 0, 100% 0, 100% 100%);
		}
		
		& span{
			display: inline-block;
			font-family: inherit;
			font-weight: inherit;
		}
		
	}
	
	& p{
		font-size: 1.05em;
		margin-bottom: 1em;
		& em{
			font-weight: bold;
			color: #ee0;
			font-size: 1.05em;
		}
		& small{
			font-size: .9em;
			
			position: relative;
			display: block;
			opacity: .6;
			padding-left: 1.2em;
			&::before{
				content: "※";
				position: absolute;
				inset: 0 auto auto 0;
			}
		}
	}
	& p.point{
		--PointColor: var(--phasecolor);
		
		width: fit-content;
		background: rgba(0,0,0,.2);
		margin: auto auto 1.5em 0;
		position: relative;
		line-height: 1em;
		padding: .5em 1em .3em 7em;
		color: var(--phasecolor);
		border: 1px solid var(--PointColor);
		border-radius: 8em;
		&::before{
			content: "ポイント";
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 7em;
			font-size: .9em;
			line-height: 1em;
			background: var(--PointColor);
			font-weight: bold;
			color: #000;
			border-radius: 10em;
			inset: 2px auto 2px 2px;
		}
	}
	
	& figure.prizes{
		background: rgba(255,255,255,.1);
		border-radius: .5em;
		text-align: center;
		box-sizing: border-box;
		padding: 1em;
		margin-bottom: 1em;
		
		&.pack img{
			width: 30%;
		}
		& figcaption{
			font-size: .9em;
			padding: 1em 0 0;
		}
	}
	
	& a:not(.cardlist){
		color: #8ab1ff;
		padding: 0 .2em;
		&:not([tabindex]):hover{
			color: #ff5500;
			transition: .2s;
		}
	}


}

div.division55{
	display: flex;
	gap: 1.5em;
	
	& > *{
		width: 50%;
	}
	@media screen and (max-width: 767px){
		& {
			flex-direction: column;
			& > *{
				width: auto;
			}
		}
	}
}

div.division731{
	display: flex;
	gap: 1.5em;
	& > div{
		width: 70%;
	}
	& > figure{
		width: 30%;
	}
}


/*- アトラクション-*/
section.attraction{
	padding: 0;
	border-top: 1px solid rgba(190,105,19,.7);
	overflow: hidden;
	margin-bottom: 2.5em;
	display:grid;
	
	@media (min-width:768px){
		& {
			gap: 0 1em;
			grid-template-columns: 1fr 35%;
			grid-template-areas:
				"count count"
				"title image"
				"text image"
				"intro image"
				"notice image"
				"prize image";
		}
	}
	@media (max-width:767px){
		& {
			gap: 0;
			grid-template-columns: 1fr;
			grid-template-areas:
				"count"
				"title"
				"image"
				"intro"
				"text"
				"notice"
				"prize";
		}
	}	
	
	& > span{
		grid-area: count;
		margin: 0 auto 0 0;
		display: block;
		width: fit-content;
		line-height: 1em;
		padding: .5em 1em .5em 1.8em;
		font-size: .9em;
		position: relative;
		font-weight: bold;
		font-family: var(--FontGoth);
		z-index: 0;
		color: #fff;
		&::before, &::after{
			content: "";
			position: absolute;
		}
		&::before{
			inset: 0 -1.5em;
			background: rgba(190,105,19,.7);
			transform: skew(-45deg,0);
			z-index: -1;
		}
		&::after{
			width: .8em;
			height: .8em;
			z-index: -1;
			inset: 2px auto auto 3px;
			background: var(--drawphase);
			clip-path: polygon(0 0, 100% 0, 0 100%);
			opacity: .6;
		}
	}
	& h4{
		grid-area: title;
		margin: 0 auto 0 0;
		padding: .8em 0 .5em;
	}
	& p{
		grid-area: text;
		margin: 0 auto 0 0;
	}
	& p + p{
		grid-area: notice;
	}
	
	& dl{
		grid-area: prize;
		padding-top: 1em;
		margin: 0 auto 0 0;
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: .5em;
		font-size: .9em;
		& dt{
			width: 5em;
			border-radius: .3em;
			text-align: center;
			color: #5b383d;
			font-size: .9em;
			font-weight: bold;
			background: #ffb400;
		}
		& dd{
			margin: 0;
			color: #ffb400;
			& span{
				display: inline-block;
			}
			@media (max-width:767px){
			gap: 1em;
			& span{
				display: block;
			}
			}
		}
	}
	& figure.attraction-image{
		grid-area: image;
		text-align: center;
		& figcaption{
			font-size: .8em;
			opacity: .5;
		}
		
		@media (max-width:767px){
			& img{
				max-width: 70%;
			}
		}
	}
	& figure.attraction-intro{
		margin-left: 0;
		grid-area: intro;
		text-align: left;
		padding: 1em 0;
		& img{
			
		}
		
		@media (max-width:767px){
			& {
				text-align: center;
				& img{
					max-width: 90%;
					margin: auto auto 1em;
				}
			}
			
		}
	}
}



		
.event-sales-products img{
	filter: drop-shadow(0 0 .05rem #ffffff);
}

.department.artgallery{
	
	& p{
		max-width: 750px;
		text-align: center;
		& small{
			display: inline-block;
			font-size: .9em;
		}
	}
	& figure{
		padding: 1em;
		background: #000;
		border: solid 1px #222;
		overflow: hidden;
		position: relative;
		
		&::before{
			content: "";
			position: absolute;
			width: 120%;
			height: 120%;
			left: -10%;
			top: -10%;
			z-index: 1;
			background: url(<?php echo $jEvent["IMAGE"]?>/artsample.jpg) center center no-repeat;
			background-size: 110% auto;
			filter: blur(5px) grayscale(50%);
			opacity: .5;
		}
		
		& img{
			max-width: 100%;
			width: 750px;
			position: relative;
			z-index: 5;
		}
		&.artgallery-images{
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			
			& img{	
				width: 50%;
				aspect-ratio: 3/2;
				object-fit: cover;
			}
		}
	}	
}

/*ガチャンス*/
.gachance-prizes{
	background: rgba(85,85,85,.3);
	border-radius: .5em;
	padding: 1em .5em;
	letter-spacing: -.40em;
	text-align: center;
	
	& figure{
		letter-spacing: normal;
		vertical-align: top;
		
		&.wide{
			width: 800px;
			max-width: 100%;
			display: block;
			
		}
		&.box{
			width: 220px;
			display: inline-block;
			box-sizing: border-box;
			padding: 1em .5em;
			max-width: 25%;
		}
		& figcaption {
			font-size: .75em;
			opacity: .7;
			
			& span{
				display: inline-block;
			}
		}
	}
	@media screen and (max-width:767px){
		& figure.box{
			width: 45%;
			max-width: 45%;
		}
	}
}

.gachance-lead{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	
	& p{
		margin: 0 auto auto 0;
		width: 70%;
	}
	
	& figure{
		width: 30%;
		& img{
			width: 80%;
			border-radius: 1.5em;
		}
		& small{
			width: fit-content;
			margin-top: .5em;
			font-size: .9em;
			opacity: .8;
		}
	}
}




a.cardlist{
	display: block;
	font-size: .8em;
	width: fit-content;
	position: relative;
	line-height: 1em;
	padding: .4em 2em .2em;
	color: #aaa;
	border: 1px solid #999;
	margin: 1em auto auto;
	position: relative;
	text-decoration: none;
	
	&::after{
		content: "";
		right: .3em;
		top: .3em;
		position: absolute;
		display: inline-block;
		width: 1em;
		height: 1em;
		background: url(/yugioh/assets/svg/external.svg);
		filter: brightness(0) saturate(100%) invert(68%) sepia(22%) saturate(0%) hue-rotate(162deg) brightness(88%) contrast(78%);
		backgroud-size: 100% auto;
	}
	
	&:hover{
		background: rgba(250,250,250,.8);
		transition: .1s;
	}
}