@charset "utf-8";

body{
	position: relative;
	text-align: center;
}
body::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
	z-index: -1;
	position: fixed;
	background: #000 url(/yugioh/crossduel/images/content-bk.jpg) center center repeat-x ;
	background-size: auto 120%;
}
header h1{
	max-width: 280px;
	text-align: center;
	margin: auto;
}


main{
	padding: 2em 1em;
	overflow: hidden;
}	
@media screen and (max-width:799px){
main{
	padding: 1em 1em;
	overflow: hidden;
}	
}

.contents{
	/*background: rgba(150,150,0,.1);*/
	text-align: center;
	max-width: 1200px;
	margin: auto auto 4em;
	padding: 3em 0 0;
	color: #eee;
}

	/* page-subject */
	.contents h2{
		background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 10%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0.65) 90%,rgba(0,0,0,0) 100%);
		position: relative;
		box-shadow: 0 -1em 1em -1em #ff6600 , 0 1em 1em -1em #ff6600;
		margin: auto 22% 7em;
	}
	.contents h2::before , .contents h2::after{
		content: "";
		position: absolute;
		background: url(/yugioh/crossduel/images/h2title-light.png) center center no-repeat;
		background-size: 80% auto;
		width: 30%;
		height: 300%;
		top: -100%;
	}
	.contents h2::before{left: -14%;}
	.contents h2::after{right: -14%;}
	.contents h2 span{
		font-size: 2.5em;
		line-height: 1.3em;
		font-weight: bold;
		padding: .3em 2em .2em;
		color: #fff;
		letter-spacing: -.03em;
		position: relative;
		display: block;
		font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
		font-feature-settings: "palt";
	}
	.contents.news-style h2 span{
		font-size: 1.5em;
	}
		.contents h2 span::before,
		.contents h2 span::after{
			content: "";
			position: absolute;
			height: 2px;
			width: 100%;
			left: 0;
			background: linear-gradient(to right, rgba(221,150,15,0) 0%,rgba(227,167,39,0.65) 9%,rgba(234,187,68,1) 20%,rgba(255,248,155,1) 53%,rgba(235,192,75,1) 80%,rgba(226,165,36,0.65) 93%,rgba(221,150,15,0) 100%);
		}
		.contents h2 span::before{	top: 0px;}
		.contents h2 span::after{	bottom: 0px;}
	
@media screen and (max-width:799px){
	.contents h2{
		margin: auto 2% 3em;
	}
	.contents h2 span{
		font-size: 2em;
		padding: .5em 2em .4em;
	}
}
	.contents >*:not(h2){
		max-width: 980px;
		margin: auto auto 3.5em;
	}

	.contents.introduction-style * h3{
		font-weight: bold;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-shadow: 0 0 .2em #00ffe9, 0 0 .5em #00ffe9, 0 0 .5em #00ffe9;
		font-feature-settings: "palt";
		line-height: 1em;
	}
	
	.contents.introduction-style * p{
		color: #00ffe9;
		/*text-shadow: 1px 1px 1px #000;*/
	}
		.contents.introduction-style * p:lang(ja){
			font-size: .95em;	
		}
		.contents.introduction-style * p:lang(en){
			font-size: 1.1em;	
		}



/*ニュース*/
.contents.news-style .text-box{
		text-align: left;
}
	.contents.news-style {
		
	}
	.contents.news-style .text-box > *{
		margin-bottom: 1.5em;
	}
	.contents.news-style .text-box h3{
		font-size: 1.4em;
		color: #ee0;
		font-weight: bold;
		text-align: center;
		padding: .8em 0;
		text-shadow: 0 0 1em #ff5a00 ,  0 0 .5em #ff5a00;
	}
	.contents.news-style .text-box time{
		display: block;
		text-align: right;
		color: #ccc;
		font-size: .9em;
	}
	.contents.news-style .text-box h4{
		font-size: 1.2em;
		line-height: 1.4em;
		color: #eee;
		margin-bottom: .5em;
		padding-top: 1.5em;
	}
	.contents.news-style .text-box p{
		color: #bbb;
	}
	.contents.news-style .text-box p em{
		color: #eee;
	}
	.contents.news-style .text-box a{
		color: #f3b300;
		text-decoration: underline;
	}
	.contents.news-style .text-box a.btnstyle{
		color: #f3b300;
		border: 1px solid #f3b300;
		border-radius: 0.2em;
		line-height: 1em;
		padding: .6em 1em .4em;
		display: inline-block;
		margin: auto;
		text-decoration: none;
		font-size: .9em;
		background: rgba(0,0,0,.8);
	}
	.contents.news-style .text-box a:hover{
		color: #fff;
		transition: .2s;
	}
	.contents.news-style .text-box dl.step{
			position: relative;
			padding: 1em 0 0 4.5em;
			border-top: 1px  solid #333;
		}
			.contents.news-style .text-box dl.step dt{
				position: absolute;
				left: 0; top: 1em;
				color: #ffd200;
				font-weight: bold;
			}
			.contents.news-style .text-box dl.step dd p:not(:last-child){
				margin-bottom: .5em;
			}
	

	.contents.news-style .text-box ul{
		
	}
	.contents.news-style .text-box li{
		position: relative;
		padding-bottom: .5em;
		color: #bbb;
	}
		.contents.news-style .text-box ul.liner{
			padding-top: .3em;
		}
		.contents.news-style .text-box ul.liner > li{
			border-top: 1px dashed #999;
			padding-top: .3em;
			padding-bottom: .3em;
		}
		.contents.news-style .text-box ul.marker > li{
			padding-left: 1.3em;
		}
		.contents.news-style .text-box ul.marker > li::before{
			content: "・";
			position: absolute;
			left: 0; top: 0;
		}
	.contents.news-style .text-box table{
		width: auto;
		border: 1px solid rgba(150,150,150,.5);
	}
		.contents.news-style .text-box table tr > *{
			padding: .3em .8em;
			text-align: center;
		}
		.contents.news-style .text-box table tr th{
			background: rgba(150,150,150,.3);
		}
		.contents.news-style .text-box table tr td{
			border-top: 1px solid rgba(150,150,150,.2);
		}

@media screen and (max-width: 767px){
	.contents.news-style .text-box{
		padding: 2em 1.3em;
	}
}



	/* .movie-txt */
	
	section.movie-txt{
		display: flex;
		align-items: center;
	}
		section.movie-txt > figure{
			width: 60%;
		}
		section.movie-txt > div{
			width: 40%;
			text-align: left;
			box-sizing: border-box;
			padding-left: 4%;
		}
		/*reverce*/
		section.movie-txt.rev figure{
			order: 1;
		}
		section.movie-txt.rev > div {
			padding-left: 0;
			padding-right: 3%;
		}
		section.movie-txt h3{
			font-size: 3em;
			margin-bottom: .3em;
		}
		section.movie-txt p{
			opacity: .8;
		}

@media screen and (max-width:799px){
	section.movie-txt{
		display: block;
		margin: auto -1em 3em;
	}
		section.movie-txt > figure{
			width: auto;
		}
		section.movie-txt > figure.ss-img img{
			box-shadow: none;
		}
		section.movie-txt > div{
			width: auto;
			padding: 1.5em 1em 1em;
		}
		/*reverce*/
		section.movie-txt.rev figure{
			order: 0;
		}
		section.movie-txt.rev > div {
			width: auto;
			padding: 1.5em 1em 1em;
		}
		section.movie-txt h3{
			font-size: 3em;
			margin-bottom: .3em;
		}
		section.movie-txt p{
			opacity: .8;
		}
}


	/* .layout-flex*/ 
	.layout-flex{
		letter-spacing: -.40em;
		text-align: left;
	}
		.layout-flex > *{
			vertical-align: top;
			width: 48.5%;
			letter-spacing: normal;
			display: inline-block;
			box-sizing: border-box;
			margin-bottom: 3em;
		}
		.layout-flex > *:nth-child(2n){
			margin-left: 3%;
		}
@media screen and (max-width:799px){
		.layout-flex > *{
			vertical-align: top;
			width: auto;
			display: block;
			margin: auto 1em 2em;
		}
		.layout-flex > *:nth-child(2n){
			margin-left: 1em;
		}
}	
	
	/*-figure*/
	figure.ss-img{
		position: relative;
	}
	figure.ss-img img{
		box-shadow: 0 0 0 1px #f25e00;
	}
	figure.ss-img:not(.plural)::before , figure.ss-img:not(.plural)::after{
		content: "";
		height: 1px;
		width: 100%;
		left: 0;
		position: absolute;
		z-index: 20;
		background: linear-gradient(to right, rgba(232,162,0,0) 0%,rgba(232,162,0,1) 50%,rgba(232,162,0,0) 100%);
	}
	figure.ss-img::before{
		top: -1px; 
	}
	figure.ss-img::after{
		bottom: -1px; 
	}
	
	figure.ss-img.plural{
		letter-spacing: -.40em;
	}
	figure.ss-img.plural img{
		display: inline-block;
		letter-spacing: normal;
		width: 49.3%;
	}
	figure.ss-img.plural img:nth-child(2n){
		margin-left: 1.4%;
	}

@media screen and (max-width:799px){
	figure.ss-img.plural img{
		display: block;
		width: auto;
		margin: .5em auto;
	}
	figure.ss-img.plural img:nth-child(2n){
		margin-left: auto;
	}	
}


	/* .stack-style */
	.stack-style{
		text-align: left;
	}
	.stack-style h3{
		font-size: 2em;
		margin-bottom: .4em;
	}
	.stack-style figure{
		margin-bottom: .8em;	
	}
	.stack-style p{
		background: url(/yugioh/crossduel/images/content-p-bk.png) right bottom;
		/*border-top: 1px #444 solid;
		border-left: 1px #444 solid;*/
		line-height: 1.2em;
		padding: .8em;
	}
		




	.contents small{
		font-size: .9em;
		opacity: .6;
	}


	
	.news-list{
		background: rgba(0,0,0,.7);
		border: 1px solid #f35a00;
		
		box-shadow: 0 0 1.5em 0 rgba(0,0,0,.5);
		padding: .5em;
	}
		.news-list .news-headline{
			padding: 1.5em;
			text-align: left;
			border-bottom: 1px solid rgba(243,90,0,.4);
		}
		.news-list .news-headline:last-child{
			border: none;
		}
		.news-list .news-headline h1{
			font-size: 1.4em;
			padding: 1em 0 .5em;
		}
		.news-list .news-headline h3{
			text-shadow: none !important;
			padding: .2em 0 .1em .5em;
			margin: 1.5em auto .5em;
			border-left: .3em solid #F35A00;
			font-weight: normal;
		}
		.news-list .news-headline h3:lang(ja){font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
		.news-list .news-headline h3:lang(en){font-family: Verdana, Helvetica, Arial, sans-serif !important;}
		
		.news-list .news-headline p{
			margin-bottom: .5em;
			color: #0bab9d;
		}
		.news-list .news-headline p span{
			color: #d9ff7d;
			font-weight: bold;
		}
		.news-list .news-headline ul{
			color: #0bab9d;
			margin-bottom: 1em;
		}
			.news-list .news-headline ul li{
				padding-left: 1.3em;
				position: relative;
			}
			.news-list .news-headline ul li::before{
				content: "・";
				position: absolute;
				left: 0;
				top: 0;
			}
		
		.news-list .news-headline ol{
			color: #0bab9d;
			margin-bottom: 1em;
			counter-reset: ol 0;
		}
			.news-list .news-headline ol li{
				padding-left: 1.5em;
				padding-bottom: .5em;
				position: relative;
			}
			.news-list .news-headline ol li::before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				content: counter(ol) ".";
				counter-increment: ol;
			}
		
		.news-list .news-headline p:last-child{
			margin-bottom: auto;
		}
		.news-list .news-headline > *:not:last-child{
			margin-bottom: auto;
		}
		.news-list .news-headline p:lang(ja){font-size: .95em;}
		.news-list .news-headline p:lang(en){font-size: 1em;}
		.news-list .news-headline p a{
			color: #f3b300;
			text-decoration: underline;
			opacity: 1;
		}
		.news-list .news-headline p a::before{
			content: "» ";
		}
		.news-list .news-headline p a:hover{
			color: #fff;
			transition: .2s;
		}
		.news-list .news-headline small{
			display: block;
			padding-left: 1.2em; 
			position: relative;
			opacity: .7;
		}
			.news-list .news-headline small::before{
				content: "*";
				position: absolute;
				left: 0; top: 0;
			}
			.news-list .news-headline small:lang(ja)::before,
			.news-list .news-headline small:lang(ko)::before,
			.news-list .news-headline small::lang(zh-tw)::before,
			.news-list .news-headline small::lang(zh-cn)::before{
				content: "※";
			}
			.news-list .news-headline hr{
				height: 1px;
				border: none;
				border-bottom: 1px dashed #f35a00;
				background: none;
				opacity: .5;
				margin: 1.8em auto auto;
			}
	
	
	
	
	.contents .gradient-bk{
		background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 10%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0.65) 90%,rgba(0,0,0,0) 100%);
		position: relative;
		box-shadow: 0 -1em 1em -1em #ff6600 , 0 1em 1em -1em #ff6600;
	}
		.contents .gradient-bk{
			line-height: 1.2em;
			padding: 1em 2em .9em;
			position: relative;
			display: block;
		}
			.contents .gradient-bk::before,
			.contents .gradient-bk::after{
				content: "";
				position: absolute;
				height: 2px;
				width: 100%;
				left: 0;
				background: linear-gradient(to right, rgba(221,150,15,0) 0%,rgba(227,167,39,0.65) 9%,rgba(234,187,68,1) 20%,rgba(255,248,155,1) 53%,rgba(235,192,75,1) 80%,rgba(226,165,36,0.65) 93%,rgba(221,150,15,0) 100%);
			}
			.contents .gradient-bk::before{	top: 0px;}
			.contents .gradient-bk::after{	bottom: 0px;}
	
	.contents p.description{
		color: #00c6c8;
		font-size: 1.2em;
		font-weight: bold;
	}
	
	.contents div.flex{
		letter-spacing: -.40em;
	}
		.contents div.flex > *{
			width: 50%;
			letter-spacing: normal;
			display: inline-block;
			vertical-align: top;
		}
	.contents figure.ss{
		padding: 0 .5em;
	}
	.contents figure.ss img{
		border: 1px solid #bd7400;
		
	}
	
	.news-sort ul{
		letter-spacing: -.40em;
		width: 90%;
		margin: auto;
	}
	.news-sort ul li{
		letter-spacing: normal;
		display: inline-block;
		width: calc(100% / 6);
	}
	.news-sort ul li a{
		color: #fff;
		display: block;
		font-weight: bold;
		font-size: .9em;
	}
	
	.news-entry > div{
		max-width: 980px;
		text-align: left;
		color: #fff;
		padding: 1em 0;
	}
		.news-entry > div h3{
			color: #00c6c8;
			font-size: 1.2em;
			padding: .5em 0 1em;
			font-weight: bold;
			display: block;
		}
		.news-entry > div div.news-body{
			color: #eee;
		}
		div.news-body > *:not(:last-child){
			margin-bottom: 1.5em;
		}
		div.news-body p{
			
		}
	
	
div.hr{
	background: rgba(255,255,255,.5);
	color: #000;
	padding: 2em;
	font-weight: bold;
}


.contents > .text-box{
	background: rgba(0,0,0,.5);
	padding: 3em 3em;
	max-width: 800px;
	margin: auto;
}

.terms-format{
	text-align: left;
	margin-bottom: 3em;
}
	.terms-format > *:not(last-child){
		margin-bottom: 1em;
		color: #ccc;
	}
	.terms-format h4{
		font-size: 1.4em;
		color: #eee;
	}
	.terms-format ul{
		
	}
	.terms-format ul li{
		position: relative;
		padding-left: 1.3em;
		padding-bottom: .5em;
	}
		.terms-format ul li::before{
			content: "・";
			position: absolute;
			left: 0; top: 0;
		}
	.terms-format table{
		width: auto;
		border: 1px solid rgba(150,150,150,.5);
	}
		.terms-format table tr > *{
			padding: .3em .8em;
			text-align: center;
		}
		.terms-format table tr th{
			background: rgba(150,150,150,.3);
		}
		.terms-format table tr td{
			border-top: 1px solid rgba(150,150,150,.2);
		}
	.right{
		text-align: right;
		
	}
@media screen and (max-width:799px){
.text-box{
	background: rgba(0,0,0,.5);
	padding: 2em 1.5em;
}
	.terms-format table{
		width: 100%;
	}
}






/*- series -*/


	.series-select{
		margin: auto -1em;
		background: rgba(0,0,0,.5);
		text-align: center;
		overflow: hidden;
		position: relative;
		box-shadow: 0 -1em 1em -1em #ff6600, 0 1em 1em -1em #ff6600;
	}
		.series-select::before,
		.series-select::after{
			content: "";
			position: absolute;
			height: 2px;
			width: 100%;
			left: 0;
			background: linear-gradient(to right, rgba(221,150,15,0) 0%,rgba(227,167,39,0.65) 9%,rgba(234,187,68,1) 20%,rgba(255,248,155,1) 53%,rgba(235,192,75,1) 80%,rgba(226,165,36,0.65) 93%,rgba(221,150,15,0) 100%);
			z-index: 50;
		}
		.series-select::before{	top: 0px;}
		.series-select::after{	bottom: 0px;}
	
		ul.chara-position{
			max-width: 1120px;
			display: flex;
			margin: auto;
		}
		ul.chara-position li{
			visibility: visible;
			width: calc(100% / 7);
			position: relative;
			margin: -2em auto;
		}
		
		.chara-position:lang(ja) li::after{
			content: "";
			display: block;
			position: absolute;
			bottom: 8%; left: -10%;
			width: 120%; height: 0;
			padding-top: 80%;
			z-index: 50;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		.chara-position li.series-dm::after{		background-image: url(/yugioh/crossduel/images/ja/anime-dm.png);	bottom: 15%;}
			.chara-position li.series-gx::after{		background-image: url(/yugioh/crossduel/images/ja/anime-gx.png);}
			.chara-position li.series-5ds::after{		background-image: url(/yugioh/crossduel/images/ja/anime-5ds.png);	bottom: 15%;}
			.chara-position li.series-zexal::after{		background-image: url(/yugioh/crossduel/images/ja/anime-zexal.png);}
			.chara-position li.series-arcv::after{		background-image: url(/yugioh/crossduel/images/ja/anime-arcv.png);	bottom: 15%;}
			.chara-position li.series-vrains::after{	background-image: url(/yugioh/crossduel/images/ja/anime-vrains.png);}
			.chara-position li.series-sevens::after{	background-image: url(/yugioh/crossduel/images/ja/anime-sevens.png);	bottom: 15%;}
	
		.chara-position li a{
			display: inline-block;
			position: relative;
		}
		.chara-position:hover img{
			transition: .2s;
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: grayscale(100%);
			z-index: 1;
		}
		.chara-position li:hover{
			z-index: 20;
		}
		.chara-position li:hover a{
			box-shadow: 0 0 0 1px #fff , 0 0 1em 0 #ff0;
			transition: .2s;
		}
		.chara-position li:hover a img{
			-webkit-filter: grayscale(0%);
			-moz-filter: grayscale(0%);
			-ms-filter: grayscale(0%);
			-o-filter: grayscale(0%);
			filter: grayscale(0%);
		}
		
		li.series-dm a{		transform: rotate(-5deg); z-index: 5;}
		li.series-gx a{		transform: rotate(2deg);}
		li.series-5ds a{	transform: rotate(-2deg);}
		li.series-zexal a{	transform: rotate(-1deg);}
		li.series-arcv a{	transform: rotate(5deg);}
		li.series-vrains a{	transform: rotate(0deg);}
		li.series-sevens a{	transform: rotate(7deg);}


@media screen and (max-width:799px){
		ul.chara-position{
			max-width: 1120px;
			display: block;
			margin: auto;
			letter-spacing: -.40em; 
			padding: 1em;
			text-align: left;
		}
		ul.chara-position li{
			letter-spacing: normal; 
			display: inline-block;
			visibility: visible;
			width: calc(100% / 2);
			position: relative;
			margin: auto;
			box-sizing: border-box;
			padding: .5em;
		}
		.chara-position:lang(ja) li::after{
			content: none;
		}
		li.series-dm a{		transform: rotate(0); z-index: 5;}
		li.series-gx a{		transform: rotate(0);}
		li.series-5ds a{	transform: rotate(0);}
		li.series-zexal a{	transform: rotate(0);}
		li.series-arcv a{	transform: rotate(0);}
		li.series-vrains a{	transform: rotate(0);}
		li.series-sevens a{	transform: rotate(0);}
		
		ul.chara-position li{
			
		}
}
	
	
	.contents > .hidden{
		display: none;
		max-width: 1100px !important;
	}
	.contents > .hidden._1000{
		max-width: 1000px !important;
	}
	.contents > .hidden._900{
		max-width: 900px !important;
	}
	.contents > .hidden._800{
		max-width: 800px !important;
	}
	
	.seriesdetail{
		width: 100%;
		height: 0;
		padding-top: 57.5%;
		position: relative;
		overflow: hidden;
		background-color: #000;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 102% auto;
	}
	.seriesdetail._dm{	background-image: url(/yugioh/crossduel/images/series-bk-dm.jpg);}
	.seriesdetail._gx{	background-image: url(/yugioh/crossduel/images/series-bk-gx.jpg);}
	.seriesdetail._5ds{	background-image: url(/yugioh/crossduel/images/series-bk-5ds.jpg);}
	.seriesdetail._zexal{	background-image: url(/yugioh/crossduel/images/series-bk-zexal.jpg);}
	.seriesdetail._arcv{	background-image: url(/yugioh/crossduel/images/series-bk-arcv.jpg);}
	.seriesdetail._vrains{	background-image: url(/yugioh/crossduel/images/series-bk-vrains.jpg);}
	.seriesdetail._sevens{	background-image: url(/yugioh/crossduel/images/series-bk-sevens.jpg);}
	
	.seriesdetail::after{
		content: "";
		background: url(/yugioh/crossduel/images/title-light.png) center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: -87.8%; left: -30.5%;
		width: 64%;
		height: 200%;
		z-index: 5;
	}
	.seriesdetail::before{
		content: "";
		background: top left no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: 0; left: 0;
		width: 53.3333%;
		height: 100%;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% auto;
		z-index: 6;
	}
	.seriesdetail:lang(ja)::before{ background-image: url(/yugioh/crossduel/images/ja/series-character-title.png); }
	.seriesdetail:lang(en)::before{ background-image: url(/yugioh/crossduel/images/en/series-character-title.png); }
	.seriesdetail:lang(de)::before{ background-image: url(/yugioh/crossduel/images/de/series-character-title.png); }
	.seriesdetail:lang(fr)::before{ background-image: url(/yugioh/crossduel/images/fr/series-character-title.png); }
	.seriesdetail:lang(it)::before{ background-image: url(/yugioh/crossduel/images/it/series-character-title.png); }
	.seriesdetail:lang(es)::before{ background-image: url(/yugioh/crossduel/images/es/series-character-title.png); }
	.seriesdetail:lang(pt-br)::before{ background-image: url(/yugioh/crossduel/images/pt-br/series-character-title.png); }
	.seriesdetail:lang(ko)::before{ background-image: url(/yugioh/crossduel/images/ko/series-character-title.png); }
	.seriesdetail:lang(zh-tw)::before{ background-image: url(/yugioh/crossduel/images/zh-tw/series-character-title.png); }
	.seriesdetail:lang(zh-cn)::before{ background-image: url(/yugioh/crossduel/images/zh-cn/series-character-title.png); }
	
	.seriesdetail > *{
		position: absolute;
	}
	.seriesdetail p{
		color: #fff;
		text-align: left;
	}
	.seriesdetail h3 , .seriesdetail h4{
		border-bottom: 2px solid #d5d801;
		text-align: left;
		text-shadow: none;
		transform: skewX(-32deg);
		line-height: 1em;
		background: url(/yugioh/crossduel/images/series-h3-bk.png) left top no-repeat;
		background-size: auto 200%;
		box-sizing: border-box;
		margin-left: 3%;
		margin-right: -3%;
	}
	.seriesdetail h3 span , .seriesdetail h4 span{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-weight: bold;
		font-feature-settings: "palt";
		transform: skewX(32deg);
		display: block;
		color: #fff;
		line-height: 1em;
		    
    
	}
	.seriesdetail._dm h3 span , .seriesdetail._dm h4 span{color: #ae00ff;}
	.seriesdetail._gx h3 span , .seriesdetail._gx h4 span{color: #c30032;}
	.seriesdetail._5ds h3 span , .seriesdetail._5ds h4 span{color: #0558b7;}
	.seriesdetail._zexal h3 span , .seriesdetail._zexal h4 span{color: #f8e100;}
	.seriesdetail._arcv h3 span , .seriesdetail._arcv h4 span{color: #00984b;}
	.seriesdetail._vrains h3 span , .seriesdetail._vrains h4 span{color: #09a0b2;}
	.seriesdetail._sevens h3 span , .seriesdetail._sevens h4 span{color: #c16a0e;}

		.seriesdetail > h3{
			z-index: 12;
			left: 0; bottom: 3%;
			width: 29%;
			background:
				url(/yugioh/crossduel/images/series-h3-bk.png) left top no-repeat,
				rgba(0,0,0,.8);
			background-size: auto 200%;
		}
			.seriesdetail h3 span{
				padding: .4em 0 .2em 1.5em;
				font-size: 2em;
			}
	
		.seriesdetail figure.character{
			width: 50%;
			height: 100%;
			left: 0; top: 0;
			z-index: 1;
		}
		
		.seriesdetail .story{
			width: 66%;
			right: 0;
			bottom: 66%;
			letter-spacing: -.40em;
			z-index: 2;
		}
			.seriesdetail .story figure{
				width: 25%;
				margin-right: 1%;
				letter-spacing: normal;
				display: inline-block;
			}
			.seriesdetail .story div{
				width: 74%;
				letter-spacing: normal;
				display: inline-block;
			}
			.seriesdetail .story div p{
				padding-right: 1em;
				padding-bottom: .5em;
				font-size: .8em !important;
			}
			.seriesdetail .story div h4 span{
			   padding: .4em 0 .2em 1.5em;
			   font-size: 1.5em;
			}
		
		
		
		.seriesdetail .monster{
			width: 65%;
			height: 59.7%;
			bottom: 3%;
			right: 0;
			background: rgba(0,0,0,.5);
			border: 2px solid #d5d801;
			border-right: none;
			text-align: left;
			padding: 1%;
			box-sizing: border-box;
			letter-spacing: -.40em;
			z-index: 3;
		}
			.seriesdetail .monster figure.card{
				float: left;
				width: 35%;
				letter-spacing: normal;
			}
			.seriesdetail .monster figure.card img{
				border-radius; .2em;
			}
			.seriesdetail .monster div.movie{
				width: 62.3%;
				display: inline-block;
				vertical-align: top;
				margin-left: 2%;
				padding: 0;
				letter-spacing: normal;
			}
				.seriesdetail .monster div.movie > div{
					position: relative;
					padding-top: 56.25%;
					height: 0;
					overflow: hidden;
					background: #666;
				}
				.seriesdetail .monster div.movie > div iframe{
					position: absolute;
					z-index: 2;
					left: 0;
					top: 0;
					height: 100%;
					width: 100%;
				}
			.seriesdetail .monster div.text{
				letter-spacing: normal;
				padding: .6em .2em 0 37%;
			}
			.seriesdetail .monster div.text h4{
				margin-bottom: .5em;
			}
			.seriesdetail .monster div.text h4 span{
			   padding: .4em 0 .2em 1.7em;
			   font-size: 1em;
			}
			.seriesdetail .monster div.text p{
				font-size: .7em !important;
			}
			
			
			
@media screen and (max-width:799px){
	
	.seriesdetail{
		width: 100%;
		height: auto;
		padding-top: 12%;
		overflow: scrolling;
		margin-bottom: 1em;
		background-size: auto 100%;
		background-position: 3% top;
	}
	.seriesdetail::after{
		content: "";
		background: url(/yugioh/crossduel/images/title-light.png) center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: -91.8%; left: -53.5%;
		width: 113%;
		height: 200%;
		z-index: 5;
	}
	.seriesdetail::before{
		top: 0; left: 0;
		width: 100%;
	}
	
	
		.seriesdetail > h3{
			z-index: 12;
			width: auto;
			margin-left: 30%;
			margin-bottom: .5em;
			background:
				url(/yugioh/crossduel/images/series-h3-bk.png) left top no-repeat,
				rgba(0,0,0,.8);
			background-size: auto 200%;
			position: relative;
		}
			.seriesdetail h3 span{
				padding: .4em 0 .2em 1.5em;
				font-size: 1.8em;
			}
		.seriesdetail figure.character{
			width: 100%;
			height: 100%;
			left: 0; top: 0;
			z-index: 1;
		}
		
		.seriesdetail .story{
			margin-left: 60%;
			width: auto;
			position: relative;
			margin-bottom: 1em;
		}
			.seriesdetail .story figure{
				width: auto;
				margin-right: auto;
			}
			.seriesdetail .story div{
				width: auto;
			}
			.seriesdetail .story div p{
				padding-right: 1em;
				padding-left: 1em;
				font-size: .8em !important;
				background: rgba(0,0,0,.5);
				text-shadow: 1px 1px 1px #000;
			}
		
		
		.seriesdetail .monster{
			position: relative;
			width: auto;
			height: auto;
			margin-left: 3%;
			margin-bottom: 1em;
			padding: 2% 1%;
			background: rgba(0,0,0,.8);
			z-index: 20;
		}
			.seriesdetail .monster figure.card{
				width: 27.5%;
			}
			.seriesdetail .monster figure.card img{
				border-radius; .2em;
			}
			.seriesdetail .monster div.movie{
				width: 71.3%;
				display: inline-block;
				vertical-align: top;
				margin-left: 1%;
				padding: 0;
			}
				.seriesdetail .monster div.movie > div{
					position: relative;
					padding-top: 56.25%;
					height: 0;
					overflow: hidden;
					background: #666;
				}
				.seriesdetail .monster div.movie > div iframe{
					position: absolute;
					z-index: 2;
					left: 0;
					top: 0;
					height: 100%;
					width: 100%;
				}
			.seriesdetail .monster div.text{
				clear: both;
				padding: .6em .2em 0;
			}
			.seriesdetail .monster div.text h4{
				margin-bottom: .5em;
			}
			.seriesdetail .monster div.text h4 span{
			   padding: .4em 0 .2em 1.7em;
			   font-size: 1.4em;
			}
			.seriesdetail .monster div.text p{
				font-size: .8em !important;
			}
	
	
}