@charset "utf-8";

@media screen and (min-width:768px) and (max-width:979px){ /* tb */
}

@media screen and (max-width:767px){ /* sp */
}

#main_banner{
	height:380px;
	background-color:#000;
	background-position:center center;
	background-repeat:no-repeat;
	text-align:center;
	overflow:hidden;
}
	#main_banner>div{
		height:0px;
		max-width:2000px;
		position:relative;
		margin:auto;
	}
		#main_banner>div span{
			position:absolute;
			width:40px;
			height:0px;
			top:130px;
			overflow:hidden;
			padding-top:100px;
			background:url(../images/common/top_main_next_prev.png);
			border-radius:5px;
			box-shadow:0px 0px 10px rgba(0,0,0,0.4);
			display:none;
			cursor:pointer;
			z-index:5;
		}
			#main_banner:hover>div span{display:block;}
			#main_banner>div span#main_banner_prev{
				background-position:-25px center;
				left:10px;
			}
			#main_banner>div span#main_banner_next{
				background-position:-135px center;
				right:10px;
			}
	#main_banner ul{
		overflow:hidden;
		height:380px;
		margin:auto;
		position:relative;
		background:#000 url(../images/common/loading.gif) center center no-repeat;
	}
		#main_banner li{
			position:absolute;
			top:0px;
			right:0px;
			height:380px;
			width:100%;
			
		}
			#main_banner li a{
				display:block;
				height:0px;
				padding-top:380px;
				overflow:hidden;
				background-position:center;
				background-repeat:no-repeat;
			}
			
@media screen and (min-width:768px) and (max-width:979px){ /* tb */
	#main_banner{
		height:auto;
		min-width:100%;
		max-width:100%;
		width:100%;
		overflow:visible;
	}
		#main_banner>div{
			min-width:100%;
			max-width:100%;
			width:100%;
		}
			#main_banner>div span{
				top:25px;
				padding-top:30%;
				display:block;
			}
		#main_banner ul{
			height:auto;
			width:100%;
			padding-top:35%;
		}
			#main_banner li{
				height:100%;
				top:0px;
				right:0px;
				left:0px;
				bottom:0px;
			}
				#main_banner li a{
					width:100%;
					padding-top:35%;
					background-size:cover;
				}

}

@media screen and (max-width:767px){ /* sp */
	#main_banner{
		height:auto;
		min-width:100%;
		background-color:#fff;
		overflow:visible;
	}
		#main_banner>div{display:none;}
		#main_banner ul{
			overflow:visible;
			height:auto;
			margin:auto;
			width:100%;
			padding-top:none;
			padding-top:49%;
		}
			#main_banner li{
				height:auto;
				width:100%;
				height:100%;
				top:0px;
				right:0px;
				left:0px;
				bottom:0px;
				margin-bottom:1px;
			}
				#main_banner li a{
					display:block;
					height:0px;
					padding-top:49%;
					overflow:hidden;
					background-position:center;
					background-repeat:no-repeat;
					background-size:cover;
				}
}

#sub-banner-area{}
	.sub-banner-area{
		background: url(../images/top/sub-banner_bk.jpg) center center fixed;
		background-size: contain;
		text-align: center;
		box-shadow:rgba(0, 0, 0, 0.65098) 0px 0px 7px 3px inset;
		-webkit-box-shadow:rgba(0, 0, 0, 0.65098) 0px 0px 7px 3px inset;
		-moz-box-shadow:rgba(0, 0, 0, 0.65098) 0px 0px 7px 3px inset;
		border-top: 1px solid #ccc;
		padding: .5em;
	}

#special-banner{}
	.special-banner{
		width:100%;
		max-width: 980px;
		margin: auto;
		position: relative;
		height: 95px;
		margin-bottom: .5em;
		z-index: 10;
	}
		.special-banner>*{
			display: block;
			position: absolute;
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;
			height: 0;
		}
		.special-banner>*::before , .special-banner>*::after{
			content: "";
			display: block;
			position: absolute;
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;
			height: 0;
			bottom: 0;
			left: 0;
			opacity: 0;
		}
		.spb-begin{
			bottom: 0px;
			left: -30px;
			width: 561px;
			padding-top: 116px;
			background-image: url(../images/top/spb-begin.png);
			z-index: 13;
		}
		.spb-begin::before{
			width: 561px;
			padding-top: 116px;
			background-image: url(../images/top/spb-begin_hover.png);
			z-index: 14;
		}
		.spb-begin::after{
			width: 561px;
			padding-top: 116px;
			background-image: url(../images/top/spb-begin_hover.png);
			z-index: 15; 
			animation: Flash 3s infinite;
		}
		@keyframes Flash{
			  50%{
			    opacity: 1;
			  }
			}
		
		.spd-master{
			bottom: 1px;
			right: -21px;
			width: 509px;
			padding-top: 94px;
			background-image: url(../images/top/spb-masterrule2020.png);
			z-index: 11;
		}
		.spd-master::before{
			bottom: 0px;
			right: 0px;
			width: 509px;
			padding-top: 94px;
			background-image: url(../images/top/spb-masterrule2020_hover.png);
			z-index: 12;
		}
		
		.special-banner>*:hover::before{
			opacity: 1;
			transition: .3s;
		}
@media screen and (min-width:768px) and (max-width:979px){ /* tb */
	.special-banner{
		margin: auto;
		height: auto;
		margin-bottom: 0em;
		z-index: 10;
	}
		.special-banner>*{
			position: static;
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;
			height: 0;
			margin: auto;
			background-size: contain;
			display: inline-block;
			margin: auto .5%;
			width: 49%;
		}
		.spb-begin{
			bottom: 0;
			left: 0;
			padding-top: 9.375%;
			background-image: url(../images/top/spb-begin_sp.jpg);
		}
		.spd-master{
			bottom: 0;
			right: 0;
			padding-top: 9.375%;
			background-image: url(../images/top/spb-masterrule2020_sp.png);
		}
		.spb-begin::before,.spb-begin::after{
			content: none;
		}
}
@media screen and (max-width:767px){ /* sp */
	.special-banner{
		width:auto;
		margin: auto;
		position: static;
		height: auto;
		margin: auto;
		z-index: 10;
	}
		.special-banner>*{
			display: block;
			position: static;
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;
			height: 0;
			margin: auto;
			background-size: contain;
		}
		.spb-begin{
			bottom: 0;
			left: 0;
			width: 100%;
			padding-top: 18.75%;
			background-image: url(../images/top/spb-begin_sp.jpg);
		}
		.spd-master{
			bottom: 0;
			right: 0;
			width: 100%;
			padding-top: 18.55%;
			background-image: url(../images/top/spb-masterrule2020_sp.png);
		}
		.spb-begin::before,.spb-begin::after{
			content: none;
		}
}


#promotion-banner{}
	ul.promotion-banner{
		max-width: 980px;
		margin: auto;
	}
		ul.promotion-banner li{
			width: 25%;
			vertical-align: bottom;
		}
			ul.promotion-banner li a{
				margin: 2%;
				display: block;
				height: 0px;
				padding-top: 66.8%;
				overflow: hidden;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: auto 100%;
				border-radius: .3em;
				box-shadow: 0 0 2px 1px rgba(150,150,150,.7) inset;
			}
@media screen and (min-width:768px) and (max-width:979px){ /* tb */
	ul.promotion-banner{
		
	}
		ul.promotion-banner li a{
			
		}
}

@media screen and (max-width:767px){ /* sp */
	ul.promotion-banner{
		
	}
		ul.promotion-banner li{
			width: 49%;
		}
		ul.promotion-banner li a{
			/*margin: auto 1% 2%;*/
		}
	ul.promotion-banner br{display:none;}
}

/*

#icon_banners{
	display:block;
	display:none;
	padding:5px 0.3% 5px 0;
	margin:0px auto 0;
	text-align:center;
	background:#f3f3f3;
	border-bottom:1px solid #bbbbbb;
}
	#icon_banners ul{
		letter-spacing:-.40em;
		overflow:hidden;
		margin:auto;
	}
		#icon_banners li{
			display:inline-block;
			* display:inline;
			* zoom:1;
			letter-spacing:normal;
			width:15.65%;
			width:15%;
			margin:0.8%;
		}
		#icon_banners li a{
			display:block;
			overflow:hidden;
			background-position:center center;
			background-repeat:no-repeat;
			background-size:cover;
		 	width:100%;
			padding-top:80%;
			height:0px;
			border:1px solid #fff;
			box-shadow:rgba(64, 64, 64, 0.4) 0px 0px 1px 1px;
			-webkit-box-shadow:rgba(64, 64, 64, 0.4) 0px 0px 1px 1px;
			-moz-box-shadow:rgba(64, 64, 64, 0.4) 0px 0px 1px 1px;
		}
		#icon_banners li a#icon_duelist_com{	background-image:url(../images/banners/icon/duelist_com.jpg);}
		#icon_banners li a#icon_onepush{	background-image:url(../images/banners/icon/onepush.jpg);}
		#icon_banners li a#icon_cho_duel_juku{	background-image:url(../images/banners/icon/cho_duel_juku.jpg);}
		#icon_banners li a#icon_twitter{	background-image:url(../images/banners/icon/twitter.png);}
		#icon_banners li a#icon_ocg_ch{		background-image:url(../images/banners/icon/ocg_ch.jpg);}
		#icon_banners li a#icon_rule_qa{	background-image:url(../images/banners/icon/rule_qa.jpg);}
		
*/

@media screen and (min-width:768px) and (max-width:979px){ /* tb */
	#icon_banners{display:block;}
}

@media screen and (max-width:767px){ /* sp */
	#icon_banners{
		display:block;
		padding:5px;
	}
	#icon_banners li{
			display:inline-block;
			* display:inline;
			* zoom:1;
			letter-spacing:normal;
			width:30.5%;
			margin:0;
			padding:1%;
		}
}


section.information{
	position:relative;
}
	section.information a.more{
		position:absolute;
		top:10px;
		right:5px;
		background:#dcb900;
		padding:3px 20px;
		border-radius:30px;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
		font-size:75%;
		margin-top:10px;
	}

@media screen and (max-width:767px){ /* sp */
	section.information a.more{
		position:relative;
		display:block;
		padding:10px;
		right:0px;
		border-radius:5px;
		font-size:100%;
		text-align:center;
		margin:auto;
	}
}


section#notice{}
	section#notice>h1{
		background:url(../images/common/top_title_icon_notice.png) left center no-repeat;
		font-size:160%;
		border-bottom:3px #333 solid;
		padding:6px 0 2px 35px;
		margin-bottom:10px;
		font-weight:bold;
		color:#333;
	}
	section#notice li{
		padding:6px 0 6px 85px;
		background-position:left 6px;
		background-repeat:no-repeat;
		line-height:1.0em;
		border-bottom:#eee solid 1px;
	}
	section#notice li.topics{background-image:url(../images/common/info_topics.png);}
	section#notice li.attention{background-image:url(../images/common/info_attention.png);}
	section#notice li.important{background-image:url(../images/common/info_important.png);}
	section#notice li.information{background-image:url(../images/common/info_information.png);}
	section#notice li.revision{background-image:url(../images/common/info_revision.png);}
	section#notice li.campaign{background-image:url(../images/common/info_campaign.png);}
	section#notice li a{
		text-decoration:none;
		font-size:90%;
		background-position:left 0px !important;
	}
		section#notice li a:hover{text-decoration:underline;}
@media screen and (max-width:767px){ /* sp */
	section#notice{margin-bottom:50px;}
		section#notice>h1{
			font-size:120%;
			margin:0px 0px 10px;
			padding:6px 0 3px 28px;
			background-size:20px 20px;
			background-position:3px;
			border-bottom-width:2px;
		}
		section#notice li a{
			text-decoration:none;
			font-size:80%;
			line-height:1em;
		}
}


section#update{}
	section#update>h1{
		background:url(../images/common/top_title_icon_update.png) left center no-repeat;
		font-size:160%;
		border-bottom:3px #333 solid;
		padding:6px 0 2px 35px;
		margin-bottom:10px;
		font-weight:bold;
		color:#333;
	}
		section#update dl{margin-bottom:15px;}
		section#update dl dt{
			font-weight:bold;
			padding:7px 0 3px 0px;
		}
		section#update dl dd{
			border-top:#eee solid 1px;
		}
		section#update dl dd li{
			padding:6px 0 6px 90px;
			background-position:left center;
			background-repeat:no-repeat;
			border-bottom:#eee solid 1px;
			line-height:1.2em;
		}
		section#update dl dd li a{
			text-decoration:none;
			font-size:90%
		}
			section#update dl dd li a:hover{text-decoration:underline;}
		section#update li.begin{background-image:url(../images/common/update_begin.png);}
		section#update li.lineup{background-image:url(../images/common/update_lineup2.png);}
		section#update li.howto{background-image:url(../images/common/update_howto.png);}
		section#update li.list{background-image:url(../images/common/update_list.png);}
		section#update li.event{background-image:url(../images/common/update_event.png);}
		section#update li.topics{background-image:url(../images/common/update_topics2.png);}
		section#update li.onepush{background-image:url(../images/common/update_onepush.png);}
		section#update li.faq{background-image:url(../images/common/update_qanda.png);}
		section#update li.other{background-image:url(../images/common/update_other.png);}
		section#update li.academy{background-image:url(../images/common/update_academy.png);}
		section#update li.dueljuku{background-image:url(../images/common/update_dueljuku.png);}
		section#update li.chodueljuku{background-image:url(../images/common/update_chodueljuku.png);}
@media screen and (max-width:767px){ /* sp */
	section#update{margin-bottom:0px;}
		section#update>h1{
			font-size:120%;
			margin:0px 0px 10px;
			padding:6px 0 3px 28px;
			background-size:20px 20px;
			background-position:3px;
			border-bottom-width:2px;
		}
			section#update dl dd li a{
				text-decoration:none;
			
				line-height:1em;
			}
}

#compatible{
	max-width:980px;
	margin:auto auto 40px;
}
	#compatible *{font-weight:bold;}
	#compatible div{
		text-align:left;
		padding:30px 10px 30px 90px;
		border:1px solid #ddd;
		border-radius:5px;
		box-shadow:rgba(173, 173, 173, 0.3) 0px 0px 3px 3px inset;
		background:url(../images/common/compatible_icon.png) 25px center no-repeat;
		color:#777;
		line-height:1.3em;
	}
		#compatible div span{color:#fcaa0c;}

@media screen and (min-width:768px) and (max-width:979px){ /* tb */
	#compatible{
		width:760px;
		margin:auto auto 30px;
	}
		#compatible div{
			font-weight:bold;
			font-size:90%;
		}
}

@media screen and (max-width:767px){ /* sp */
	#compatible{
		width:auto;
		margin:auto 10px 30px;
	}
		#compatible *{font-weight:normal;}
		#compatible div{
			font-size:70%;
			padding:10px 10px 10px 50px;
			background-position:15px center;
			background-size:24px 34px;
		}
}

@media screen and (min-width:960px){
	/*#side_banner{margin-top:-50px;}*/
}





#preload{display:none;}