@charset "utf-8";

	/* 記事内部 */
	
	:root{
		--entry-border: #c3c6a6;
		
		--entry-acolor: #2180e2;
		
		--entry-text: #555;
		--entry-h2: #222;
		--entry-h3: #444;
		--entry-pointl: #ae943e;
		--entry-pointd:	#e6e5db;
	}
	
	.entry-main > section{
		padding-top: 4.5em;
	}
		.entry-main > section:first-child{
			padding-top: 0;	
		}
	.entry-main > section *{
		color: var(--entry-text);
	}
	
	.entry-main > figure img{
		width: 100%;
	}
	
	.entry-main > section > *:not(:last-child):not(h2):not(h3){
		margin-bottom: 1em;
	}
	.entry-main > section *.center{
		text-align: center;
	}
	
	.entry-main h2{
		color: var(--entry-h2);
		font-size: 1.9em;
		margin-bottom: 1em;
	}
	.entry-main h3{
		color: var(--entry-h3);
		border-left: var(--entry-pointl) 7px solid;
		font-size: 1.2em;
		padding-left: .8em;
		margin: 3em auto .8em;
		font-weight: bold;
	}
		.entry-main h3 > span.ps{
			color: #fff;
			display: inline-block;
			background: linear-gradient(to right, #e55412, #ef821c, #e55412);
			font-weight: bold;
			font-size: .65em;
			line-height: 1em;
			padding: .5em 1.4em .4em;
			border-radius: 5em;
			transform: translate(.5em,-.2em);
		}
		.entry-main h2 + h3{
			margin: auto auto .8em;
		}
	.entry-main h4{
		font-weight: bold;
	}
	.entry-main p{
		line-height: 1.8em;
	}
	.entry-main b{
		font-weight: bold;
	}
	.entry-main em{
		font-weight: bold;
		display: block;
	}
	.entry-main small{
		opacity: .7;
		display: block;
		position: relative;
		padding-left: 1.2em;
		font-size: .95em;
		line-height: 1.5em;
		margin-bottom: .3em;
	}
		.entry-main small::before{
			content: "※";
			left: 0; top: 0;
			position: absolute;
		}
		
	.entry-main a{
		color: var(--entry-acolor);
		position: relative;
		display: inline-block;
		padding: 0 .3em;
	}
		.entry-main a:hover{
			opacity: .8;
			transition: .2s;
		}
		.entry-main a.inpage , .entry-main a.outpage{
			padding-left: 1.5em;
		}
		.entry-main a.inpage::before , .entry-main a.outpage::before{
			content: "»";
			position: absolute;
			left: 0;
			top: 0;
			font-size: 1.5em;
			font-weight: bold;
		}
		.entry-main a.inpage::before{
			transform: rotate(90deg) translate(-1px,0);
			font-weight: normal;
		}
		.entry-main a.outpage{
				
		}
		.entry-main a.external{
			padding-right: 2.5em;
			padding-left: .3em;
		}
			.entry-main a.external::before{
				content: "";
				position: absolute;
				background: url(/https/img.konami.com/yugioh/assets/svg/external.svg);
				background-size: 100% auto;
				width: 1em; height: 1em;
				right: .8em; top: 50%;
				transform: translate(0,-50%);
				filter: invert(38%) sepia(99%) saturate(890%) hue-rotate(184deg) brightness(93%) contrast(90%);
			}
			.entry-main a.external:hover::before{
				opacity: .8;
				transition: .2s;
			}
		.entry-main a.btn{
			border: 1px solid var(--entry-acolor);
			text-decoration: none;
			font-size: .9em;
			padding-top: .2em;
		}
		.entry-main a.btn:hover{
			
		}
		.entry-main a.external.btn{
			padding-left: .7em;
			
		}			
		.entry-main a.outpage.btn{
			padding-right: 1em;
			padding-left: 2.5em;
		}
			.entry-main a.outpage.btn::before{
				left: .5em; top: 50%;
				transform: translate(0,-50%);
			}
		.entry-main a.img{
			
		}
		.entry-main a.img img{
			height: 120px;
		}
		
	.entry-main figure.prize{	
		text-align: center;
		background: #fff;
		padding: 1em;
	}
	.entry-main figure.guide{
		text-align: center;
		padding: 1em;
		border-top: 1px solid var(--entry-border);
		border-bottom: 1px solid var(--entry-border);
	}
	
	.entry-main  figure.card-list{
		
		& > *{
			float: left;
			display: block;
			width: 23%;
			margin: 1%;
			padding: 0;
			
			&.cboximage{
				position: relative;
				&::after{
					content: "";
					position: absolute;
					width: 15%;
					right: 5%;
					bottom: 4%;
					aspect-ratio: 1/1;
					background: url(/https/img.konami.com/yugioh/assets/svg/zoom.svg);
					background-size: 100% 100%;
					filter: invert(1);
				}
			}
			
			@media screen and (max-width:767px){
				width: 46%;
				margin: 2%;
			}
		}
		& img{
			vertical-align: bottom;
		}
		&::after{
			content: "";
			display: block;
			clear: both;
		}
	}

	
	
	.entry-main ul{
		padding-bottom: .5em;
	}
		.entry-main ul.toc{ /*table of contents*/
			padding: 1em 0;
			border-top: 1px solid var(--entry-border);
			border-bottom: 1px solid var(--entry-border);
		}
			.entry-main ul.toc li{
				margin: .3em auto;
			}
			.entry-main ul.toc li a::before{
				transform: rotate(90deg) translate(-7px,0);
			}
		.entry-main ul.marker{
			
		}
			.entry-main ul.marker > li{
				position: relative;
				padding: .2em 0 .1em 1.4em;
			}
			.entry-main ul.marker > li::before{
				content: "■";
				position: absolute;
				opacity: .7;
				left: 0;
				top: .2em;
			}
		.entry-main ul.linear{
			border-top: 1px dashed var(--entry-border);
		}
			.entry-main ul.linear > li{
				padding: .3em 0 .2em 0;
				border-bottom: 1px dashed var(--entry-border);
			}
		
		
	.entry-main table{
		border: 1px solid var(--entry-border);
	}
		.entry-main table tr > *{
			padding: .8em 1em;
			border-bottom: 1px solid var(--entry-border);
			vertical-align: top;
		}
		.entry-main table tr.center > *{
			text-align: center;
		}
		.entry-main table tr th{
			background: var(--entry-pointd);
			text-align: center;
		}
		.entry-main table tr td + td,
		.entry-main table tr th + th{
			border-left: 1px solid var(--entry-border);
		}
		.entry-main table tr > * > *:last-child{
			margin-bottom: auto;
		}
		
		
	.entry-main dl{}/*-----------------*/

		.entry-main dl.steps{
			position: relative;
			border-bottom: 1px solid var(--entry-border);
			padding: 0em 0 1em 3em;
		}
		.entry-main dl.steps:first-of-type{
			border-top: 1px solid var(--entry-border);
			padding-top: 1em;
		}
			.entry-main dl.steps dt{
				position: absolute;
				left: 0; top: 0;
				background: var(--entry-pointd);
				width: 2em;
				height: 2em;
				line-height: 2em;
				text-align: center;
				font-weight: bold;
				font-size: .9em;
			}
			.entry-main dl.steps:first-of-type dt{
				top: 1em;
			}
			.entry-main dl.steps dd > *:not(:last-child){
				margin-bottom: .5em;
			}
	
	
	.entry-main div{}/*-----------------*/
	
		.entry-main div.summary{
			position: relative;
			border-bottom: 1px solid var(--entry-border);
			padding: 0 0 1em 8em;
		}
			.entry-main div.summary > *:not(h4):not(:last-of-type){
				margin-bottom: 1em;
			}
		.entry-main div.summary:first-of-type{
			border-top: 1px solid var(--entry-border);
			padding-top: 1em;
		}
			.entry-main div.summary h4{
				position: absolute;
				left: 0; top: .2em;
				opacity: .7;
				font-size: .9em;
			}
			.entry-main div.summary:first-of-type h4{
				top: 1em;
			}
/*-----------------*/
			
		.entry-main div.img-right{
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
		}
			.entry-main div.img-right p{
				width: 70%;
				margin-top: 0;
				box-sizing: border-box;
				padding-right: 1em;
			}
			.entry-main div.img-right figure{
				width: 30%;	
				margin-top: 0;
			}
@media screen and (max-width:767px){
			.entry-main div.img-right p{
				width: 55%;
			}
			.entry-main div.img-right figure{
				width: 45%;	
			}		
}


/*-----------------*/
		.entry-main div.campaign-period{
			text-align: center;
		}
			.entry-main div.campaign-period span{
				color: #a68a32;
				font-weight: bold;
				font-size: 1.3em;
			}
			.entry-main div.campaign-period time{
				display: block;
				font-weight: bold;
				background: #a68a32;
				color: #fff;
				padding: .5em 1em;
				font-size: 1.1em;
			}
	
/*-----------------*/	
		.entry-main a.desc-link{
			display: flex;
			background: #fbfbfb;
			border: 1px solid #ced3ca;
			box-sizing: border-box;
			padding: .4em;
			text-decoration: none;
			position: relative;
		}
		.entry-main a.desc-link::after{
			content: "";
			position: absolute;
			background: url(/https/img.konami.com/yugioh/assets/svg/external.svg);
			background-size: 100% auto;
			width: 1.2em; height: 1.2em;
			right: .5em; top: .5em;
			filter: brightness(0) saturate(100%) invert(78%) sepia(13%) saturate(6054%) hue-rotate(180deg) brightness(93%) contrast(95%);
			opacity: 0;
		}
			.entry-main a.desc-link p{
				text-align: left;
				width: 77%;
				box-sizing: border-box;
				padding-left: 1em;
				font-size: .9em;
				color: #888;
			}
			.entry-main a.desc-link p em{
				display: block;
				font-size: 1.1em;
				color: #555;
			}
			.entry-main a.desc-link img{
				width: 23%;
				vertical-align: bottom;
				box-shadow: 0 0 0 1px #eee;
			}
			.entry-main a.desc-link:hover{
				transition: .2s;
				border-color: #6fade8;
			}
			.entry-main a.desc-link:hover::after{
				transition: .2s;
				opacity: 1;
			}
			
		
/*-----------------*/
		.entry-main div.sp-link{
			text-align: center;
			padding: 1.5em 1em 1em;	
		}
			.entry-main div.sp-link a{
				display: inline-block;
				max-width: 360px;
				box-sizing: border-box;
				margin: auto;
				padding: 0;
				overflow: hidden;
			}
			.entry-main div.sp-link a:hover{
				opacity: 1;
			}
				.entry-main div.sp-link a img{
					vertical-align: bottom;
				}
			.entry-main div.sp-link p{
				font-size: .9em;
				padding: 1em 0 0;	
			}
			
		.entry-main div.sp-link.satellite{
			background: repeating-linear-gradient(-45deg, #990014, #990014 3px, #8d0007 0, #8d0007 4px);		
		}
			.entry-main div.sp-link.satellite a{
				border-radius: .4em;
				border: 1px #ccc solid;
			}
			.entry-main div.sp-link.satellite p{
				color: #ddd;
			}
			
			
		.entry-main div.sp-link.neuron{
			position: relative;
			background:
				url(/yugioh/neuron/images/bg-hexagon.png) fixed,
				repeating-linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 2px),
				linear-gradient(to right, #031930 0%,#031930 25%,#045699 50%,#031930 75%,#031930 100%);
			border: 1px solid #010c18;
		}
			.entry-main div.sp-link.neuron a{
				border-radius: .4em;
				box-shadow: 0 0 0 4px #ddd inset;
				display: inline-block;
				border: 1px solid #2893ff;
				border-radius: .5em;
			}
			.entry-main div.sp-link.neuron a:hover{
				transition: .2s;
				border: 1px solid #fff;
				box-shadow: 0 0 0 1px rgba(10,220,250,.5), 0 0 1em 0 rgba(0,120,250,1);
			}
			
			.entry-main div.sp-link.neuron p{
				color: #ddd;
			}
		
	
@media screen and (max-width:768px){
		.entry-main div.summary{
			padding: 0 0 1em 0;
		}
			.entry-main div.summary h4{
				position: relative;
			}
		.entry-main div.summary:first-of-type{
			padding-top: 1em;
		}
			.entry-main div.summary:first-of-type h4{
				top: 0;
			}
}



	.entry-main aside.related-link{
		margin-top: 4em;
		border-top: 1px solid var(--entry-border);
		padding: 1em 0 0;
	}
		.entry-main aside.related-link::before{
			content: "関連リンク";
			color: #aaa;
			display: block;
			margin-bottom: .5em;
		}