@charset "utf-8";

	
.konami-header{
	background: #000;
	z-index: 30;
	position: relative;
	
	& a.wcstop{
		position: absolute;
		height: calc(100% - 8px);
		inset: 4px 0 4px auto;
		font-size: .9em;
		text-decoration: none;
		display: flex;
		align-items: center;
		padding: 0 1em;
		color: #6a6a6a;
		font-family: var(--FontGoth);
		border-left: 1px solid #5c5c5c;
		z-index: 30;
		&:hover{
			color: #777;
			transition: .2s;
		}
	}
}
	
img{
	display: block;
	max-width: 100%;
	height: auto;
}
a{
	color: #ff6c00;
	text-decoration: none;
}


.wrapper{
	color: #222;
	background: radial-gradient(circle at center top, #b27eff 0%, #673bd1 600px);
	position: relative;
	text-align: center;
	
	box-shadow: 0 1em 1em -1em #2800b9aa inset;
	
	& > div.cloud{
		position: fixed;
		z-index: 4;
		inset: 5% 0;
		
		@media (min-width:1060px){
			& {
			background:
				url(/yugioh/worldchampionship/2026/watching/images/cloud-left.webp) calc(37% - 500px) top no-repeat,
				url(/yugioh/worldchampionship/2026/watching/images/cloud-right.webp) right calc(44% - 500px) bottom -15% no-repeat;
			}
		}
		@media (max-width:1059px){
			& {
			background:
				url(/yugioh/worldchampionship/2026/watching/images/cloud-left.png) -23% top / 32% auto no-repeat,
				url(/yugioh/worldchampionship/2026/watching/images/cloud-right.png) right -13% bottom -15% / 19% auto no-repeat;
			}
		}
	}
	
	&::before, &::after{
		content: "";
		position: absolute;
		inset: 0;
	}
	&::before{
		background: url(/yugioh/worldchampionship/2026/memorialevent/images/seigaiha.svg) center / 100px auto;
		/*filter: brightness(0) saturate(100%) invert(12%) sepia(86%) saturate(6967%) hue-rotate(257deg) brightness(92%) contrast(144%);
		filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(7500%) hue-rotate(247deg) brightness(102%) contrast(143%);*/
		z-index: 1;
	}
	&::after{
		content: none;
		background: linear-gradient(to top, #2800b9aa, transparent 80%);
		z-index: 2;
	}
	@media (max-width: 767px){
		&::before{
			background-size: 18% auto;
		}
	}
	
	& > header, & > main{
		position: relative;
		z-index: 5;
	}
	
}


header{
	padding: 2em 0;
	h1{
		max-width: 750px;
		& img:first-child{
			width: 45%;
		}
	}
}

main{

	position: relative;
	&::before,&::after{
		content: "";
		position: absolute;
		width: 100%;
		height: 15%;
		transform: skew(0,15deg);
		z-index: 0;
		opacity: .2;
	}
	&::before{
		inset: 20% 0 auto 0;
		background: #2300a3;
	}
	&::after{
		inset: 60% 0 auto 0;
		background: #2300a3;
		
	}
	& >*{
		position: relative;
		z-index: 10;
	}
	& > dl.summary{
		margin-bottom: 3em;
	}
	
	& > aside.transitad{
		padding: 0 0 5em;
		margin-bottom: 3em;
	}
	
	& > section:not(.precautions){
		max-width: 1100px;
		padding: 0 1em 1em;
		box-sizing: border-box;
		margin-bottom: 3em;
		@media (max-width:767px){
			padding: 0 .5em 1em;
		}
		
	}
	
	& > section.precautions{
		
	}
}	


dl.summary{
	width: fit-content;
	box-sizing: border-box;
	color: #fff;
	max-width: 600px;
	display: flex;
	flex-wrap: wrap;
	background: rgba(0,0,0,.7);
	border: 4px solid #8b8619;
	border-radius: 1em;
	position: relative;
	padding: 1em 2em;
	box-shadow: 3px 3px 1px 0 rgba(0,0,0,.2);
	
	&::before{
		content: "";
		position: absolute;
		inset: -2px 2em;
		border-block: 1px solid #8b8619;
		border-image: linear-gradient(to right, #8b8619, #ffeb64, #8b8619) 1;
		z-index: 1;
	}
	& *{
		font-weight: bold;
		position: relative;
		z-index: 5;
		padding: .3em 0;
		text-align: left;
	}
	& dt{
		width: 7em;
		color: #bfbfbf;
	}
	& dd{
		width: calc(100% - 7em);
	}
	@media (max-width:640px){
		margin: auto 1em;
		padding: 1em 1em .5em;
		display: block;
		width: auto;
		font-size: .9em;
		& dt{
			font-weight: normal;
			width: 100%;	
			padding: 0;
		}
		& dd{
			width: 100%;
			padding: 0 0 .2em;
		}
	}
}
	
main > div.manner{
	color: #fff;
	background: #7d56ffaa;
	max-width: 620px;
	margin-bottom: 3em;
	font-size: .9em;
	padding: 1em;
	border: 3px double #9499cb;
	& span{
		display: inline-block;
	}
	@media (max-width:640px){
		margin: auto 1em 2em;
	}
}

main > aside.transitad{
	padding: 2.5em 1em;
	position: relative;
	background: #2300a3bb;
	box-shadow: 0 0 1.5em 0 #2300a3;
	border-block: 5px solid #ccc;
	border-image: linear-gradient(to right, #b48b0d, #d0b30c, #b48b0d) 1;
	
	&::before{
		content: "";
		position: absolute;
		inset: 0;
		background: url(/yugioh/assets/svg/asanoha.svg) center / 80px auto;
		filter: invert(1);
		z-index: 1;
		opacity: .2;
	}
	
	& > div{
		position: relative;
		z-index: 10;
		max-width: 1000px;
		box-sizing: border-box;
		background: #dedede;
		background: url(/yugioh/worldchampionship/2026/images/kv-texture.jpg) center -3px / cover;
		border-radius: 1em;
		padding: 1em 2em 3em;
		border: 2px solid #8B8619;
		box-shadow: 0 0 0 1px #dedede inset, 0 0 0 3px #8B8619 inset, 0 0 1.5em 0 #dedede inset;
		
		& h2{
			padding: .5em;
			max-width: 470px;	
		}
		
		& p{
			margin-bottom: 2em;
			color: #555;
		}
		
		& table{
			margin-bottom: 2em;
			& th{
				text-align: center;
				font-weight: bold;
				padding: .5em;
				&:not(:nth-of-type(2)){
					background: #d0d0d0;
					width: 49%;
				}
				&:nth-of-type(2){
					width: 2%;
				}
			}
			& td{
				padding: .5em;
				&:not(:nth-of-type(2)){
					background: #e9e9e9;
					border: 1px solid #d0d0d0;
				}
				&:nth-of-type(2){
					
				}
				& em{
					font-weight: bold;
					display: block;
					color: #777;
					padding: .2em 0;
				}
				& small{
					display: block;
					width: fit-content;
					font-size: .8em;
					color: #777;
					&::before{
						content: "※";
					}
				}				
			}
		}
		
		& > small{
			display: block;
			width: fit-content;
			padding: .5em 3em .5em 5em;
			/*border: 1px solid #6e6e6e;*/
			background: #f2f1ed;
			background: #b3a2a2;
			border-radius: 5em;
			font-size: .85em;
			color: #6e6e6e;
			color: #f2f1ed;
			position: relative;
				&::before {
					content: "";
					position: absolute;
					aspect-ratio: 1 / 1;
					height: 100%;
					inset: 0 auto 0 .5em;
					background: url(/yugioh/assets/svg/attention.svg) center / 70% auto no-repeat;
					filter: invert(1);
					transform: translate(0,-5%);
				}
			}
	}
}

main > section:not(.precautions){
	& h2{
		padding: 1em 0 2em; 
	}
	& div{
		&.event-grid{
			display: grid;
			gap: 1em;
			
			@media (min-width:768px){
				grid-template-columns: 1fr 1fr;
				
			}
			@media (max-width:767px){
				grid-template-columns: 1fr;	
			}
		}
	}
	& > .content + .content{
		margin-top: 2em;
	}
}

section.content{
	position: relative;
	border-radius: 10px;
	background: #dedede;
	background: url(/yugioh/worldchampionship/2026/images/kv-texture.jpg) center -3px / cover;
	border: 2px solid #dedede;
	box-shadow: 0 0 0 2px #c8b455 inset;
	filter: drop-shadow(3px 3px 0 rgba(0,0,0,.2));
	margin: .5em 0;
	padding: 1em 1em 1.5em;
	
	@media (max-width:768px){
		font-size: .9em;
	}
	
	/*
	display: flex;
	flex-direction: column;
	*/
	
	&::before, &::after{
		content: "";
		position: absolute;
	}
	&::before{
		--InsetB: 14px;
		inset: -12px 12px;
		background: url(/yugioh/worldchampionship/2026/images/kv-texture.jpg) center top / cover;
		border-radius: inherit;
		border: inherit;
		mask-image: linear-gradient(to bottom, black, black var(--InsetB), transparent var(--InsetB), transparent calc(100% - var(--InsetB)), black calc(100% - var(--InsetB)));
		z-index: 0;
		box-shadow: 0 0 0 2px #c8b455 inset;
	}
	&::after{
		--InsetA: 4px;
		inset: 0px 12px;
		border-block: 2px solid #c8b455;
		mask-image: linear-gradient(to right, black, black var(--InsetA), transparent var(--InsetA), transparent calc(100% - var(--InsetA)), black calc(100% - var(--InsetA)));
		z-index: 1;
	}
	
	& > *{
		position: relative;
		z-index: 10;
		&:not(h3){
			text-align: left;
			margin-bottom: 1em;
		}
	}
	
	& > h3{
		max-width: 490px;
		padding: 0 0 1em;
		opacity: .9;
	}
	& > h4{
		background: #55555566;
		width: fit-content;
		line-height: 1em;
		padding: .4em 1.5em .2em;
		font-size: .8em;
		color: #DCDAD7;
		margin: auto auto .5em 0;
		border-radius: .1em;
	}
	
	& figure{
		&.kv{
			margin-bottom: 1.5em;
			box-shadow: 0 0 .2em 0 #888;
		}
		&.collabomenu{
			background: #ffffff77;
			padding: 1em;
			text-align: center;
			& a{
				display: inline-block;
				width: 70%;
				box-shadow: 0 0 .2em 0 #ccc;
				position: relative;
			}
			& img{
				vertical-align: bottom;
			}
		}
	}
	
	& > span{
		display: block;
		text-align: left;
		background: #f0f;
		&[data-label]::before{
			content: attr(data-label);
		}
	}
	& p {
		font-size: .95em;
		text-align: left;
		
		&.center{
			padding: .5em;
			text-align: center;
		}
		& time{
			display: block;
			background: #e9e9e9;
			text-align: center;
			margin: 1em 0 .5em;
			padding: .3em 1em;
			font-size: .9em;
			font-weight: bold;
		}
	}
	& small{
		opacity: .8;
		font-size: .9em;
		display: block;
		position: relative;
		padding: 0 0 0 1.2em;
		margin: 0;
		&::before{
			content: "※";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
	
	& details{
		border: 1px solid #777;
		box-shadow: 1px 1px 2px 0 #bbbbbbbb;
		background: #ffffff77;
		border-radius: 0;
		
		& > summary{
			padding: .6em 2em .45em .8em;
			position: relative;
			cursor: pointer;
			
			&::-webkit-details-marker {
				display: none;/*safari default marker*/
			}
			
			&::after{
				content: "";
				display: block;
				top: 50%;
				transform: translate(0,-40%) scale(1,-1);
				right: 1em;
				width: 1em;
				height: 1em;
				position: absolute;
				background: url(/yugioh/assets/svg/filltriangle.svg) no-repeat center center;
				background-size: 80% 80%;
				opacity: .4;
				transition: .1s;
				&:hover{
					opacity: .2;
				}
			}
		}
		
		&[open] > summary{
			border-bottom: 1px solid #ccc;
			&::after{
				transform:translate(0, -60%) scale(1,1);
				transition: .1s;
			}
		}
		&[open] > :not(summary){
			padding: 1em;
		}
		&:not([open]) > summary:hover{
			box-shadow: 0 0 0 1px #999;
		}
		
		
	}
	& ul{
		& li{
			padding: 0 0 .2em 1.4em;
			line-height: 1.4em;
			text-align: left;
			font-size: .95em;
			position: relative;
			
			&::before{
				content: "■";
				transform: scale(.7);
				position: absolute;
				inset: 0 auto auto 0;
				opacity: .5;
			}
		}
	}
	& table{
		width: 100%;
		box-shzing: border-box;
		border: 1px solid #b1aea9;
		background: #e9e9e9;
		font-size: .85em;
		& caption{
			font-weight: bold;
			color: #561212;
			padding-bottom: .3em;
		}
		& tr:not(:last-child) > *{
			border-bottom: 1px solid #c5c5c5;
		}
		& tr > *{
			padding: .3em .4em;
				}
		& th{
			font-weight: bold;
			text-align: center;
		}
		
		& caption{
			
		}
	}
	& a.zoom{
		position: relaive;
		width: fit-content;
		display: block;
		overflow: hidden;
		position: relative;

		&::before{
			content: "";
			position: absolute;
			width: 8%;
			inset: auto 1.5% 2% auto;
			aspect-ratio: 1/1;
			background: rgba(255,255,255,.5) url(/yugioh/assets/svg/zoom.svg) center / 70% auto no-repeat;
			filter: invert(1);
			z-index: 10;
		}
		&:hover img{
			transition: .2s;
			transform: scale(1.02);
		}
	
	}
	& a.btn{
		
		display: block;
		background: #ff6c00;
		color: #ffffffdd;
		text-align: center;
		position: relative;
		padding: 1em 1em;
		
		&.fit{
			width: fit-content;	
			padding: 1em 3em;
		}
		
		& em{
			font-weight: bold;
			display: block;
		}
		&::before{
			content: "";
			position: absolute;
			inset: 3px;
			box-shadow: 0 0 0 1px #fff;
			opacity: .5;
		}
		&:hover{
			background: #ff7c1c;
			transition: .2s;
		}
	}
	
	&.map{
		padding: 2em;	
		@media (min-width:768px){
			display: grid;
			gap: 1em;
			grid-template-columns: 1fr 1fr;
		}
		@media (max-width:767px){
			display: block;
		}
		
		& a.zoom{
			border: 2px solid #b1aea9;
			box-shadow: 2px 2px 0 0 rgba(0,0,0,.1);
		}
	}
	
	&.merchandise{
		& > h4{
			display: inline-block;
			margin-right: 1em;
		}
		& > p{
			display: inline-block;
		}
	}
	
	& div.paynotice{
		background: #ffffff44;
		border: 1px solid #56121222;
		color: #555;
		margin: 1em 1.5em 0;
		padding: 1em 1em .1em;
		box-shadow: 0 0 .3em 0 rgba(0,0,0,.2);
		& > *{
			margin-bottom: 1em;
		}
		& h5{
			color: #561212;
			background: #56121222;
			font-weight: bold;
			text-align: center;
			padding: .3em 0 .2em
		}
	}
	
}



div.item-layout{
	
	@media (min-width:768px){
		padding: 0 1em;
		display: grid;
		gap: .3em;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	@media (max-width:767px){
		padding: 0;	
	}
}

section.item{
	background: #fafafa;
	box-sizing: border-box;
	padding: 1em;
	margin: 0 auto 1em;
	
	border: 2px solid #b1aea9;
	box-shadow: 0 0 0 2px #fafafa inset, 0 0 0 3px #b1aea9 inset;
	text-align: left;
	font-size: .92em;
	position: relative;
	color: #555555;
	
	& > *{
		margin-top: 0;
		width: 100%;
		box-sizing: border-box;
	}
	& div.icons{
		display: flex;
		gap: .5em;
		justify-content: start;
		margin-bottom: 1em;
	}
	
	& figure{
		position: relative;
		text-align: center;
		& img{
			margin: auto;
		}
		&:not(.duelset){
			padding: 1.8em .5em;
			border-bottom: 1px solid #d8d8d8;
			margin-bottom: 1em;	
			& > span{
				inset: 0 0 auto auto;
			}
		}
		&.duelset{
			margin-top: 1em;
			padding: 2.2em .5em 0;
			border-top: 1px solid #d8d8d8;
			display: flex;
			flex-wrap: wrap;
			& img{
				&:nth-of-type(1){	width: 50%;}
				&:nth-of-type(2){	width: 50%;}
				&:nth-of-type(3){	width: 41.665%;}
				&:nth-of-type(4){	width: 58.335%;}
			}
			& > span{
				inset: 1em 0 auto auto;
			}
			@media (max-width:767px){
				& {
					flex-direction: column;
					& img{
						margin: .5em auto;
						&:nth-of-type(1){	width: 90%;}
						&:nth-of-type(2){	width: 90%;}
						&:nth-of-type(3){	width: 80%;}
						&:nth-of-type(4){	width: 100%;}
					}
				}
			}
		}
		
		& > span{
			position: absolute;
			display: block;
			width: fit-content;
			background: #94a8cb;
			color: #fff;
			border-radius: .3em;
			font-size: .7em;
			line-height: 1em;
			padding: .4em 1em .3em;
		}
		
	}
	
	& h4{
		margin-bottom: .5em;
		color: #6b2a2f;
		font-weight: bold;
		text-align: left;
		line-height: 1.3em;
		font-size: .9em;
		
		& > span{
			display: block;
			font-weight: inherit;
		}
	}
	&.wide h4{
		font-size: 1.2em;
		margin-bottom: .8em;
	}
	& > p:not([data-label]){
		padding: .5em 0 0;
		margin-bottom: .5em;
		font-size: .85em;
		& small{
			margin-left: 0;
		}
	}
	& ol li{
		padding-left: 1.2em;
		position: relative;
		&::before{
			content: attr(data-num);
			position: absolute;
			inset: 0 auto auto 0;
		}
		& p{
			font-size: .9em;
		}
	}
	& *[data-label]{
		margin-top: .5em;
		padding-left: 5.5em;
		position: relative;
		&::before{
			position: absolute;
			inset: 0 auto auto 0;
			content: attr(data-label);
			background: #c9c5bd;
			color: #fff;
			width: 6em;
			font-size: .8em;
			text-align: center;
			line-height: 1em;
			padding: .4em 0 .2em;
			border-radius: .1em;
		}
	}
	@media (max-width:767px){
		& ol[data-label]{
			padding-left: 0;
			padding-top: 2em;
		}
	}
	& a{
		margin-top: 1em;
		padding: 1em 1em .8em;
		font-size: .95em;
		line-height: 1em;
	}
	& a:not([tabindex]){
		display: block;
		text-decoration: none;
		background: #ff6c00;
		color: #ffffffdd;
		text-align: center;
		position: relative;
		font-size: .9em;
		&::before{
			content: "";
			position: absolute;
			inset: 3px;
			box-shadow: 0 0 0 1px #fff;
			opacity: .5;
		}
		&:hover{
			background: #ff7c1c;
			transition: .2s;
		}
	}
}


div.kcitem{
	background: #fafafa;
	box-sizing: border-box;
	padding: 1.2em;
	margin: 0 1em 2em;
	
	border: 2px solid #b1aea9;
	box-shadow: 0 0 0 2px #fafafa inset, 0 0 0 3px #b1aea9 inset;
	text-align: left;
	font-size: .92em;
	position: relative;
	color: #555555;
	
	&::before{
		content: "";
		position: absolute;
		background: #dedede;
	}
	
	@media (min-width:768px){
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		&::before{
			width: 1px;
			inset: 15px auto 15px 50%;			
		}
	}
	@media (max-width:767px){
		display: block;
		& figure:nth-of-type(1){
			padding-bottom: .5em;
			margin-bottom: .5em;
			border-bottom: 1px solid #dedede;
		}
		&::before{
			content: none;
		}		
	}
	
	& figure{
		& figcaption{
			text-align: center;
			font-weight: bold;
			color: #6b2a2f;
		}
	}
}


section.precautions{
	background: url(/yugioh/worldchampionship/2026/images/kv-texture.jpg) center top / cover;
	box-shadow: 0 0 1em 0 #fff inset;
	padding: 3em 1em;
	text-align: center;
	
	& > *{
		max-width: 1100px;
		box-sizing: border-box;
		margin: auto;
	}
	& ul{
		background: rgba(255,255,255,.3);
		border-radius: 1em;
		padding: 2em 1em;
	}
	& li{
		padding: 0 0 .8em 1.4em;
		line-height: 1.4em;
		text-align: left;
		font-size: .95em;
		position: relative;
		color: #555;
		&::before{
			content: "●";
			transform: scale(.7);
			position: absolute;
			inset: 0 auto auto 0;
			opacity: .5;
		}
	}
}


.ariake{
	max-width: 900px;
	padding: 0 1em 3em;
	& a{
		display: block;
		font-family: var(--FontMinc);
		font-size: 1.3em;
		padding: .9em 1em .7em;
		background: #197471;
		border: 1px solid #31a39f;
		box-shadow: 0 0 0 4px #176663 inset;
		color: #fff;
		position: relative;
		&::before{
			content: "";
			position: absolute;
			inset: .5em .5em auto auto;
			width: .8em;
			aspect-ratio: 1/1;
			background: url(/yugioh/assets/svg/external.svg) center / 100% auto;
			filter: invert(1) opacity(.3);
		}
		&:hover{
			background: #31a39f;
			border: 1px solid #31a39f;
			box-shadow: 0 0 0 2px #176663 inset;
			transition: .2s;
		}
		@media (max-width:767px){
			padding: 1.3em 0 1em;
			font-size: 3.5vw;	
		}
	}
}