@charset "utf-8";


/*????????????--------------------------------------------------*/
	#header_menu.top_p .logo{
		min-width: 200px;
	}
		#header_menu.top_p .logo a{/*??????*/
			height: 120px;
			width: 200px;
		}
		#header_menu.top_p .main_menu li a{
			flex-wrap: wrap;
			margin: 0 0 5px;
		}
		#header_menu.top_p ul svg{/*??????????*/
			height:32px;
			margin: 0 auto 2px;
		}
		#header_menu.top_p.scroll ul svg {
			height: 24px;
			margin-right: 3px;
		}

		#header_menu.top_p.scroll .logo{
			min-width: auto;
		}

		#header_menu.top_p.scroll .logo a{/*??????*/
			height: 60px;
			width: 100px;
			transition: .2s;
		}
		#header_menu.top_p.scroll .main_menu li a {
			flex-wrap: nowrap;
			margin: 0 10px 5px 0;
			transition: .2s;
		}

			#header_menu.top_p h1{/*????????????????css???*/
				width: 140px;
				height: 84px;
			}
			#header_menu.top_p.scroll h1{/*????????????????css???*/
				width: 70px;
				height: 42px;
			}
@media only screen and (max-width: 896px) {/*????????896px?????*/
		#header_menu.top_p .logo a{/*??????*/
			height: 60px;
			width: 100px;
		}
			#header_menu.top_p h1{/*????????????????css???*/
				width: 70px;
				height: 42px;
			}
}

#update_list{
    margin: 10px;
    width: auto;
}
#update_list .inside{
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	display: flex;
	box-sizing: border-box;
}
#update_list .inside >*{
	padding: 0;
}
#update_list .inside.ut_link .update_title{
	padding-right: 25px;
}
#update_list .inside .update_text {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;

}
#update_list .inside .update_text > span.update_text_in{
	flex: 1;
	padding: 5px 5px 0;
	border-top: 1px solid #7196a6;
	display: block;
}


#main_btn{
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0 10px;
	box-sizing: border-box;
	gap: 5px 12px;
}

@media only screen and (max-width: 896px) {/*????????896px?????*/
    #main_btn{
		padding: 0 0px;
		gap: 2px 9px;
		justify-content: center;
	}
}
@media only screen and (max-width: 800px) {/*????????800px?????*/
	#main_btn::after {
		content: "";
		display: block;
		width: 100%;
		max-width: 48%;
	}
}
.top_main_btn{
    width: 100%;
    max-width: clamp(184px, 22.25vw, 225px);
    border: none;
    border-radius: 10px;
    padding: 0;
    box-sizing: border-box;
    margin: 5px 0;
    filter: none;
    overflow: visible;
    color: rgb(255,255,255,.8);
    display: block;
	background: none;
	position: relative;
}
.top_main_btn:hover {
    text-decoration: none;
    opacity: 1;
}
.top_main_btn:active{
    filter: drop-shadow(0px 0px 0px rgb(140,205,255,0.8));
    margin: 9px 0 1px;
}
.top_main_btn:hover, .top_main_btn:active, .top_main_btn:focus{
	text-decoration:none;
}
.top_main_btn .top_btn_bg{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
}


.btn_top{
    box-sizing: border-box;
    min-height: 112px;
	width: 100%;
    height: 100%;
	display: inline-block;
	position: relative;
    padding: 20px 20px 10px;
}

.btn_top .icon{
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 1;
	padding: 13px 20px 15px 0 !important;
	box-sizing: border-box;
	text-align: end;
	border-radius: 22px;
}
.top_main_btn:hover .btn_top .icon{ background: rgba(150,204,255,.2);}

/*TOP????????????*/
.btn_top .icon svg{
    height: 100%;
    width: auto;
    display: inline-block;
    opacity: .4;
	fill: #00baff;
	filter: drop-shadow(4px 4px 0px rgb(2,19,32,.6));
}
.top_main_btn:hover .btn_top .icon svg{ opacity: .4;}
	/*???????????*/
	.btn_top .icon .svg_stroke_lighter{stroke-width: 10px;}
	.btn_top .icon .svg_stroke_normal{stroke-width: 15px;}
	.btn_top .icon .svg_stroke_bold{stroke-width: 30px;}


.btn_top h3{
    font-size: 2rem;
    line-height: 1.2;
    font-weight: bold;
    color: #ffffff;
}

.btn_top h3 span{
    position: relative;
    z-index: 20;
    word-break: break-all;
	filter: drop-shadow(1px 1px 2px rgb(0, 0, 0, 0.8));
}
.btn_top h3 .type1{display: none}

.btn_top .history{
    font-size: 1.2rem;
    color: #ffea00;
}

@media only screen and (max-width: 978px) {/*????????978px????? TOP???????*/

}
@media only screen and (max-width: 800px) {/*????????800px????? TOP???????*/
    .top_main_btn{
        max-width: 48%;
        margin: 2px 0;
    }
    .top_main_btn:active{
        margin: 4px 0 0px;
    }


    .top_main_btn:nth-child(n+4) .btn_top h3,
    .top_main_btn.forbidden .btn_top h3,
    .btn_top h3{
        font-size: 1.6rem;
    }
    .top_main_btn .btn_top{
        min-height: 64px;
		padding: 15px 0px 15px 20px;
    }
}




/*????????--------------------------------------------------*/
#banner_list {
	position: relative;
    background:url("../image/play_bg_bk.png");
    background-size: 88px auto;

}
	#banner_list img{
		width: 100%;
		max-width: 1024px;
	}
    #banner_list img.pc{display: block}
    #banner_list img.sp{display: none}
@media only screen and (max-width: 652px) {/*????????652px????? TOP???????*/
    #banner_list img.sp{display: block}
    #banner_list img.pc{display: none}
}
	#banner_list .bg{

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+93&1+1,1+1,0.25+50,1+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.9) 93%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.9) 93%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.9) 93%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */


	}

	#banner_list .main_banner{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
	}
		#banner_list .main_banner li{
			text-align: center;
            display: none;
		}
		#banner_list .main_banner li:first-child{
			display: block;
		}
			#banner_list .main_banner a{
				display:inline-block;
				background-color: #fff;
			}
			#banner_list .main_banner a:hover{
				opacity:1;
			}
/*?????????*/
#banner_list svg{
	position: absolute;
	display: block;
	width: 40px;
	height: 64px;
	top: 0;
	bottom: 0;
	margin: auto;
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.3));
    
    opacity: .5;
}

#banner_list svg:hover{
	fill: #312f26;
    opacity: .8;
    transition-duration: .05s;
}
#banner_list svg:active{
	transform: translateY(6px);
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.3));
    opacity: 1;
    transition-duration: .05s;
}
#banner_list svg path{
	fill:#888;
}
#banner_list #left_btn{
	left: 15px;
}
#banner_list #right_btn{
	right: 15px;
}
@media only screen and (max-width: 980px) {/*????????960px?????*/
	#banner_list svg{
		display:none;
	}
}
#main_banner_mini{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	padding: 8px 0;
}
#main_banner_mini >div{
	width: 28px;
	height: 8px;
	background-color: #000;
	display: block;
    text-indent: -9999px;
    overflow: hidden;
	margin: 5px 10px;
	transform: skewX(-40deg);
	transition-duration: .2s;
}
#main_banner_mini >div.now{background-color: #ffce00}

#main_banner_mini >div:hover{opacity: 0.50;}

/*????????--------------------------------------------------*/

/*-----------------------------------------------*/
#topmenu_set{
	overflow:hidden;
	width:100%;
	margin:0 auto;
}
	#topmenu_set .menu_top,
	#topmenu_set .menu_mid{
		display: table;
		table-layout:fixed;
		min-width:100%;
	}
		#topmenu_set .menu_top_td{
			display: table-cell;
			box-sizing: border-box;
			width:500px;
		}
		#topmenu_set .menu_mid .menu_top_td{
			width:25%;
		}
		#topmenu_set .menu_mid.jp .menu_top_td{
			width:500px;
		}
			#topmenu_set  .menu_top_td div{
				background: #606060;
				background: -moz-linear-gradient(top, #606060 0%, #484747 50%, #2e2c2d 100%);
				background: -webkit-linear-gradient(top, #606060 0%,#484747 50%,#2e2c2d 100%);
				background: linear-gradient(to bottom, #606060 0%,#484747 50%,#2e2c2d 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#2e2c2d',GradientType=0 );
				border-radius: 8px;
				border: 2px solid #212121;

				box-shadow:0px 1px 6px 0px #000;
				-moz-box-shadow:0px 1px 6px 0px #000;
				-webkit-box-shadow:0px 1px 6px 0px #000;
			}
			#topmenu_set  .login_btn div{
				background: #3a563c;
				background: -moz-linear-gradient(top, #3a563c 0%, #323d32 50%, #2e2c2d 100%);
				background: -webkit-linear-gradient(top, #3a563c 0%,#323d32 50%,#2e2c2d 100%);
				background: linear-gradient(to bottom, #3a563c 0%,#323d32 50%,#2e2c2d 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a563c', endColorstr='#2e2c2d',GradientType=0 );
				border-radius: 8px;
				border: 2px solid #212121;
			}
			#topmenu_set  .menu_top_td div:hover{
				background: #838383;
				background: -moz-linear-gradient(top, #838383 0%, #6d6d6d 50%, #5d5c5d 100%);
				background: -webkit-linear-gradient(top, #838383 0%,#6d6d6d 50%,#5d5c5d 100%);
				background: linear-gradient(to bottom, #838383 0%,#6d6d6d 50%,#5d5c5d 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#5d5c5d',GradientType=0 );
				border: 2px solid #212121;
			}
			#topmenu_set  .login_btn div:hover{
				background: #93b196;
				background: -moz-linear-gradient(top, #93b196 0%, #636b63 50%, #5d5c5d 100%);
				background: -webkit-linear-gradient(top, #93b196 0%,#636b63 50%,#5d5c5d 100%);
				background: linear-gradient(to bottom, #93b196 0%,#636b63 50%,#5d5c5d 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b196', endColorstr='#5d5c5d',GradientType=0 );
				border: 2px solid #212121;
			}
			#topmenu_set  .menu_top_td div:active{
				background: #d2d2d2;
				background: -moz-linear-gradient(top, #d2d2d2 0%, #bbbabb 50%, #a09e9f 100%);
				background: -webkit-linear-gradient(top, #d2d2d2 0%,#bbbabb 50%,#a09e9f 100%);
				background: linear-gradient(to bottom, #d2d2d2 0%,#bbbabb 50%,#a09e9f 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#a09e9f',GradientType=0 );
				border: 2px solid #212121;
			}
			#topmenu_set  .login_btn div:active{
				background: #c6dbc8;
				background: -moz-linear-gradient(top, #c6dbc8 0%, #ced7ce 50%, #a09e9f 100%);
				background: -webkit-linear-gradient(top, #c6dbc8 0%,#ced7ce 50%,#a09e9f 100%);
				background: linear-gradient(to bottom, #c6dbc8 0%,#ced7ce 50%,#a09e9f 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0f5d2', endColorstr='#a09e9f',GradientType=0 );
				border: 2px solid #212121;
			}
			#topmenu_set .menu_top_td div{
				margin:5px;
			}

				#topmenu_set a{
					min-height:30px;
					border-radius: 8px;
					padding:10px 10px 5px;
					display:block;
					color:#fff;
					text-decoration:none;
					line-height: 16px;
					background-size: auto 90%;
					background-repeat: no-repeat;
					background-position: right bottom;

					box-shadow:0px 0px 5px 1px rgba(255,255,255,0.24) inset;
					-moz-box-shadow:0px 0px 5px 1px rgba(255,255,255,0.24) inset;
					-webkit-box-shadow:0px 0px 5px 1px rgba(255,255,255,0.24) inset;
				}
				#topmenu_set .menu_top .menu_top_td div a{
					min-height:12em;
				}
				#topmenu_set .menu_mid .menu_top_td div a{
					min-height:12em;
				}
					#topmenu_set .menu_mid.en .menu_top_td div a{
						min-height:13em;
					}
					#topmenu_set .menu_mid.de .menu_top_td div a{
						min-height:14em;
					}
					#topmenu_set .menu_mid.fr .menu_top_td div a{
						min-height:15em;
					}
					#topmenu_set .menu_mid.it .menu_top_td div a{
						min-height:14em;
					}
					#topmenu_set .menu_mid.es .menu_top_td div a{
						min-height:11em;
					}
					#topmenu_set .menu_mid.pt .menu_top_td div a{
						min-height:14em;
					}
					#topmenu_set .menu_mid.ko .menu_top_td div a{
						min-height:11em;
					}
				#topmenu_set .menu_bottom .menu_top_td div a{
					min-height:12em;
				}
				#topmenu_set a.cards{background-image:url(../image/top_card_search.png);}
				#topmenu_set a.cardl{background-image:url(../image/top_card_list.png);}
				#topmenu_set a.Limit{background-image:url(../image/top_forbidden_limited.png);}
				#topmenu_set a.faq{background-image:url(../image/top_faq.png);}
				#topmenu_set a.myd{background-image:url(../image/top_my_deck.png);}
				#topmenu_set a.mylist{background-image:url(../image/top_my_list.png);}
				#topmenu_set a.decks{background-image:url(../image/top_deck_search.png);}
				#topmenu_set a.plays{background-image:url(../image/top_plays.png);}
					#topmenu_set .menu_main_title{
						font-size: 2rem;
						line-height: 22px;
						min-height:44px;
						font-weight:bold;
					}
					#topmenu_set .menu_top .menu_main_title{
						font-size: 2.8rem;
						line-height: 38px;
					}


					#topmenu_set .menu_main_sab{
						font-size:1.2rem;
						line-height:22px;
						margin:0px 0 0;
					}
					#topmenu_set .en .menu_main_sab,
					#topmenu_set .de .menu_main_sab,
					#topmenu_set .fr .menu_main_sab,
					#topmenu_set .it .menu_main_sab,
					#topmenu_set .es .menu_main_sab,
					#topmenu_set .pt .menu_main_sab,
					#topmenu_set .ko .menu_main_sab{
						display:block;
						font-size:1rem;
						line-height:14px;
					    letter-spacing:0.8px;
					}
					#topmenu_set .menu_top .menu_main_sab{
						margin:20px 0 0;
					}





#vote{
	text-align:center;
}
	#vote a{
		border: 2px solid #000000;
		display: inline-block;
		margin: 6px auto 0;
		border-radius: 10px;
		box-shadow: 0px 1px 6px 0px #000;
		-moz-box-shadow: 0px 1px 6px 0px #000;
		-webkit-box-shadow: 0px 1px 6px 0px #000;
		background-color:#ffffff;
	}
		#vote a img{
			border: 1px solid #cccccc;
			border-radius: 8px;
		}

	#vote a:hover img{
		opacity: 0.90;
		border-color:#ffffff;
	}