@charset "utf-8";

@import "CardSearchCondition.css";

/*???????*/
#CardSet{
	padding: 0 0 10px;
	box-sizing: border-box;
	border: 2px solid #7196a6;
}


/*???????????*/
.cardname{
    color: #ffffff;
    padding: 5px;
	border-bottom: 2px solid #7196a6;
	background: rgb(1,30,48);
	background: -webkit-linear-gradient(rgba(1,30,48,1) 0%, rgba(26,71,103,1) 100%);
	background: -o-linear-gradient(rgba(1,30,48,1) 0%, rgba(26,71,103,1) 100%);
	background: linear-gradient(rgba(1,30,48,1) 0%, rgba(26,71,103,1) 100%);
}
.cardname.sp{
	display: none;
	padding: 2px 5px 0;
}
    .cardname h1{
        font-size: clamp(1.8rem, 2.04vw, 2.5rem);
		line-height: 1.2;
        text-align: center;
        color: #ffffff;
    }
        .cardname h1 span.ruby{
            font-size: var(--common-fontS2_m);
            line-height: 1.5;
            margin: 0;
        }
        .cardname h1 span{
            font-size: .8em;
            display: block;
            opacity: .8;
            margin: 2px 0 0;
        }
	@media only screen and (max-width: 500px) {/*????????500px?????*/
		.cardname.pc{display: none}
		.cardname.sp{
			display: block;
			margin-left: 105px;
			border: 1px solid #7196a6;
			border-bottom: none;
		}
    	.cardname h1{
			text-align: left;
    	    font-size: var(--common-fontS2_xl);
			font-weight: bold;
    	}
		.cardname h1 span.ruby{
            font-weight: normal;
        }
	}
/*???????????*/
.list .icon {
    padding-right: 5px !important;
}
.icon.rarity {
    padding: 5px !important;
    flex: none;
}
/*?????????*/
	.forbidden_limited_ber{
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
		align-items: center;
		padding: 2px 0 ;
		line-height: 1;
	}
	.forbidden_limited_ber.limited_type_1{background-color: #dc0000}
	.forbidden_limited_ber.limited_type_2{background-color: #fb8c32}
	.forbidden_limited_ber.limited_type_3{background-color: #fbb830}
	.forbidden_limited_ber span{
		text-align: center;
		color: #fff;
		margin: 0 5px;
	}
	.forbidden_limited_ber .title{margin: 3px 0 0}

	.forbidden_limited_ber .img{
		display: block;
		width: 100%;
		height: 100%;
		max-width: 20px;
		max-height: 30px;
		aspect-ratio: 3 / 2;
		background-position: center right;
		background-size: auto 90%;
		background-repeat: no-repeat;
	}
	.forbidden_limited_ber.limited_type_1 .img{background-image:url(../image/parts/svg/icon_forb_unlim.svg);	background-color: #dc0000;}
	.forbidden_limited_ber.limited_type_2 .img{background-image:url(../image/parts/svg/icon_limit_unlim.svg);	background-color: #fb8c32;}
	.forbidden_limited_ber.limited_type_3 .img{background-image:url(../image/parts/svg/icon_slim_unlim.svg);	background-color: #fbb830;}

/*?????????*/
/*??????????????????*/
#CardSet .top{
	width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
	overflow: hidden;
}
	@media only screen and (max-width: 500px) {/*????????500px?????*/
		#CardSet .top{padding: 5px;}
	}
	/*?????????????*/
	#CardImgSet{
		width: 20%;
		max-width: 220px;
		min-width: 100px;
		float: left;
		padding-bottom:10px;
	}
		@media only screen and (max-width: 650px) {/*????????650px?????*/
	#CardImgSet{
		width: 100px;
	}
		}
		/*????? ???*/
		#card_frame {
			margin-bottom:5px;
			position: relative;
			width: 100%;
		}
			#card_frame::before{
				content: "";
				display: block;
				padding-top: 145%;
			}
			#card_frame .set{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: url(../image/en/card_back.png) no-repeat ;
				background-size: contain;
			}
			.ja #card_frame .set{
				background-image:  url(../image/ja/card_back.png)  ;
			}
			.ko #card_frame .set{
				background-image: url(../image/ko/card_back.png)  ;
			}

			#card_frame img{
				width:100%;
				height:auto;
				max-width: 220px;

			}
		/*????? ????PC??*/
		#thumbnail{
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
		}

			#thumbnail img{
				margin:1px;
				width:21.8%;
				height:auto;
				border:solid 2px #000;
				cursor:pointer;
			}

			#thumbnail img.current{
				 border:solid 3px #888;
				 margin:0;
			}
			#thumbnail img:hover,#thumbnail img.current:hover{border-color: var(--common-color);}
		/*????? ????SP??*/
		.img_yaji{
			display: none;
			justify-content: space-between;
		}
			.img_yaji >*{
				padding: 2px 10px;
				color: #ffffff;
				line-height: 1;
				font-size: 1.6rem;
				min-width: auto;
			}
			@media only screen and (max-width: 700px) {/*????????700px?????*/
			   .img_yaji{display: flex;}
				#thumbnail{display: none}
			}

		/*????????*/
		#cboxContent,#cboxLoadedContent{background: none;border: none}
		#pop_set{
			box-sizing: border-box;
			height: 100%;
			width: 100%;
			margin: 0 auto;
			position: relative;
		}
			#pop_set .btn_set{
				padding: 0 20px;
			}
			#pop_set .img_set{
				display: flex;
				justify-content: center;
				align-items: center;

				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}
			#pop_card{
				margin: 0;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				#pop_set img{
					border: 1px solid rgb(255,255,255,.5);
					width: 100%;
					max-width: 300px;
					height: auto;
				}
				#pop_set .img_set .btn{
					font-size: 4rem;
					color: #ffffff;
					padding: 2px 5px 0;
					min-width: auto;
				}
				#pop_set .img_set .btn:active{
					padding:0 0 2px;
				}

			#cboxClose {
				position: absolute;
				top: 0;
				right: 0;
				margin: 10px;
				z-index: 3;
				display: block;
				box-sizing: border-box;
				width: 28px;
				height: 28px;
				background: rgb(255,255,255,0.2);
				text-indent: 0;
				font-size: 0;
				line-height: 28px;
				border-radius: 100%;
				color: #ffffff;
			}

				#cboxClose:before {
					font-size:1.4rem;
					content:'X';
				}

			#card_frame a{
				position: relative;
				display: block;
				height: 100%;
				width: 100%;
			}
			#card_frame svg{
				position: absolute;
				bottom: 8%;
				right: 8%;
				width: 20%;
				height: 20%;
			}
			#card_frame a:hover svg{opacity: .5;}
			@media only screen and (max-width: 700px) {/*????????896px?????*/
				#card_frame svg{
				}
			}
			@media only screen and (max-width: 510px) {/*????????510px?????*/
				#pop_set{min-width: 300px;}
			}
			@media only screen and (max-width: 500px) {/*????????500px?????*/
				#card_frame svg{

				}
			}
	/*?????????????*/

	/*??????????????*/
		/*???????????????*/
		#legend{
			margin: 0 0 5px;
			justify-content: flex-end;
			display: flex;
		}
			#legend span{
				height: 20px;
				line-height: 20px;
			}

				#legend span.fuki:before{
					border: 10px solid transparent;
					margin-top: -10px;
				}
				#legend span.fuki:after {
					margin-top: -12px;
					border: 12px solid transparent;
				}
				#legend span.f1:before {
				  left: -22px;
				  border-right: 10px solid #C29B00;
				}

				#legend span.f1:after {
					left: -26px;
					border-right: 12px solid #000;
				}

				#legend span.f2:before {
					right: -21px;
					border-left: 10px solid #C29B00;
				}
				#legend span.f2:after {
					right: -25px;
					border-left: 12px solid #000;
				}
		@media only screen and (max-width: 500px) {/*????????500px?????*/
			#legend span{
				line-height: 12px;
				height: 12px;
			}
			#legend span.fuki:before{
				border: 6px solid transparent;
				margin-top: -6px;
			}
			#legend span.fuki:after {
				margin-top: -8px;
				border: 8px solid transparent;
			}
			#legend span.f1:before {
				left: -14px;
				border-right: 6px solid #C29B00;
			}

			#legend span.f1:after {
				left: -18px;
				border-right: 8px solid #000;
			}

			#legend span.f2:before {
				right: -13px;
				border-left: 6px solid #C29B00;
			}
			#legend span.f2:after {
				right: -17px;
				border-left: 8px solid #000;
			}
		}

		/*??????*/
		.CardText{
			border: 1px solid #7196a6;
			border-right: none;
			border-top: none;
			margin-bottom: 10px;
			margin-left: 22%;
			background: #01233a;
		}
			.CardText .frame{
				display: flex;
				flex-wrap: wrap;
			}
		@media only screen and (max-width: 650px) {/*????????650px?????*/
			.CardText{
				margin-left: 105px;
			}
		}
		@media only screen and (max-width: 500px) {/*????????500px?????*/
			.CardText:nth-child(n+4){
				margin-left: auto;
				clear: both;
			}
			.CardText .frame{display: block;}
			.pen.CardText .frame{display: flex;}
			.pen.CardText .item_box{flex-wrap: nowrap;}
		}

		.CardText .item_box{
			border: 1px solid #7196a6;
			border-left: none;
			border-bottom: none;
			box-sizing: border-box;
		}
			.CardText .item_box,.CardText .atkdef{
				display: flex;
				flex-wrap: wrap;
				justify-content: end;
				flex: 1;
				flex-grow: 1;
				width: 100%;
			}
				.CardText .item_box img{
					width: auto;
					height: 20px;
				}
		.CardText .atkdef .item_box{min-width: 150px;}
			.CardText .item_box >*{
                color: #ffffff;
                padding: 5px;
				line-height: var(--common-fontS2_h1);
			}
		.icon_img_set {
			width: auto;
			height: 20px;
			aspect-ratio: 1 / 1;
			margin: 0;
			filter: drop-shadow(1px 1px 0px rgba(255,255,255,.5)) drop-shadow(-1px -1px 0px rgba(255,255,255,.5)) drop-shadow(-1px 1px 0px rgba(255,255,255,.5)) drop-shadow(1px -1px 0px rgba(255,255,255,.5));
		}
	@media only screen and (max-width: 500px) {/*????????500px?????*/
		.CardText .item_box,.CardText .atkdef{min-height: auto;}
			.CardText .item_box >*{	padding: 2px 5px;}

				.CardText .item_box img{
					height: 18px;
				}
		.icon_img_set {
			height: 18px;
		}
	}

	.CardText .item_box .item_box_title{
		white-space: nowrap;
		display: flex;
		text-align: center;
		background-color: #0c5483;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		flex: 1;
	}
	.CardText .item_box.maxatk .item_box_title{
		white-space:normal;
		display: flex;
		align-items: center;
		line-height: 1.2;
		font-size: var(--common-fontS2_s);
		padding: 2px 5px;
	}
	.CardText .item_box .item_box_title img{display: block;}
	@media only screen and (max-width: 500px) {/*????????500px?????*/
		.CardText .item_box .item_box_title img{
			width: 18px;
			height: 18px;
			max-width: 18px;
			max-height: 18px;
			display: block;
		}
	}
	.CardText .item_box .item_box_value{
		flex: 5;
		text-align: left;
		display: flex;
		align-items: center;
	}
	.t_center {justify-content: center;}
        .CardText .item_box_text{
            flex: 1;
            border: 1px solid #7196a6;
            padding: 5px;
            box-sizing: border-box;
            width: 100%;
            line-height: 1.5;
            border-left: none;
            border-bottom: none;
			min-height: 8rem;
        }
	.CardText .item_box_text .item_box_title_note{
		border-bottom: 1px solid #7196a6;
		font-weight: bold;
		margin: 5px 0 0;
		padding: 5px 0 0;
	}

	.CardText.pen .item_box{justify-content: flex-start;}
	.CardText.pen .item_box_text{border-top: none;}
	.CardText .item_box.pen_s{border-bottom: 1px solid #7196a6;}
	.text_title{
		margin: 0 0px 5px;
		flex: 1;
		border-bottom: 1px solid #7196a6;
		box-sizing: border-box;
		font-weight: bold;
	}
	.pen .text_title{
		margin: 0 5px 0;
		padding: 2px 0 0;
	}


	/*??????????????*/
/*??????????????????*/

#CardRelation{
	display: flex;
    justify-content: center;
    padding: 0 10px 10px;
    flex-wrap: wrap;
}
	#CardRelation >a{
		margin: 5px 10px;
	}
@media only screen and (max-width: 896px) {/*????????896px?????*/
    .navbtn h4{
        line-height: 1.2;
    }
}



/*????????????*/
#user_box{
    padding: 0 10px;
    box-sizing: border-box;
}
#user_box form{
	display: flex;
    flex-wrap: wrap;
}
#user_box .inner_box{
	flex: 1;
	margin: 0;
    min-width: 200px;
	border: 1px solid #000;
	background-color: rgba(0,204,204,.5);
	padding: 5px 10px 60px;
	box-sizing: border-box;
	position: relative;

}
@media only screen and (max-width: 500px) {
    #user_box .inner_box{
        width: 100%;
        min-width: 100%;
    }
}
#user_box p{

}

#user_box .select,#user_box select{
	width: 100%;
    margin: 1px 0;
}
#user_box .dk_container {
    transform: skewX(0deg);
    background: #fff;
	border: 1px solid #000;
	width: 100%;
}
#user_box .dk_container >* {
    transform: skewX(0deg);

}
#user_box .dk_container  >a{
	width: 100% !important;
	box-sizing: border-box;
}
#user_box .dk_container.dk_open .dk_options {
    top: auto !important;
    margin: 0px 0px 0 0;
}
#user_box .dk_container .dk_label {
    color: #000;
    white-space: break-spaces;
}
#user_box .f_del{
	 width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    bottom: 5px;
    display: flex;
    justify-content: center;
}

#user_box #message{
	color: red;
	text-align: center;
	margin-top: 10px;
}
/*????????????*/

/*???????*/
#form_regist_voto{
    display: flex;
    justify-content: center;
}

#CardSet #voto_btn_set{
    display: inline-block;
    border: 2px solid #7196a6;
    background: #01233a;
    margin: 10px 10px;
    box-sizing: border-box;
}
#CardSet #voto_btn_set .top{
    align-items: center;
    color: #fff;
    padding: 0;
    background: #023765;
    width: auto ;
    margin: 0;
    justify-content: center;
}

    #CardSet #voto_btn_set .top img{
        width: 100%;
        max-width: 768px;
        display: none;
    }
    #CardSet #voto_btn_set .top p{
        text-align: center;
        line-height: 1.2;
        font-size: var(--common-fontS_h1);
        font-weight: bold;
        padding: 10px 5px;
        display: none;
    }
    #voto_btn_set .top span{
         font-weight: bold;
         padding: 0 5px;
         font-size: var(--common-fontS_l);
    }
.votebtn{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
    .votebtn .message{
        width: 100%;
        text-align: center;
        margin: 10px 10px 0;
        line-height: 1.2;
        color: red;
    }
#CardSet #voto_btn_set .bottom{text-align: center;}
#CardSet #voto_btn_set  a{
    width: auto;
    margin: 10px;
    justify-content: center;
}
#CardSet #voto_btn_set .navbtn .icon.hex span{

}
@keyframes blinkAnime{
   0% { background: #f3cd4d }
 100% { background:#ff9000 }
}

#CardSet #voto_btn_set  a img{
    width: 25px;
    vertical-align: middle;
}

#CardSet #messageVoto{
    display: none;
    text-align: center;
    padding: 0 0 10px;
    color: red;
}
/*???????*/

#pack_list,#relationCard,#form_search{
	margin-top:20px;
}

/**/
.list .inside .contents{
    display: flex;
    line-height: 1.4;
}
.list .inside .time{
    line-height: 1.4;
    margin: 0;
}
.list .inside .contents .pack_name{
    font-weight: bold;
	color: #ffffff;
}
.list .inside .contents .card_number{
    margin: 0;
    min-width: 100px;
}
.list .inside .icon{
    padding: 5px;
    margin: 0;
    display: flex;
    align-items: flex-start;
}
@media only screen and (max-width: 896px) {/*????????896px?????*/
     .list .inside {
        display: flex;
        justify-content:space-between;
        flex-wrap: wrap;
    }

}
@media only screen and (max-width: 500px) {/*????????500px?????*/
    .list .inside .contents{
        order: 3;
        min-width: 100%;
        padding: 0 2px 2px;
    }
    .list .inside .rarity{
        order: 4;
        margin: 0 ;
        padding: 2px !important;
		flex: 1;
    }
	.list .inside .rarity .lr_icon{
		margin-right: 0;
	}
    .list .inside .time{padding: 2px 2px 0}
    .list .inside .contents >*{
        line-height: 1.2;
    }


}

.subcatergory {
    padding: 0;
}

#relationCard{
	padding: 50px 0 0;
}
	article #relationCard .li_top{
		font-weight: bold;
		color: #fff;
		background:#333 !important;
		padding: 2px 10px;
		cursor: default;
		margin: 0 0 20px;
		border:double 4px;
	}
article #relationCard ul{
	padding:0;
}
	article #relationCard li{
		cursor:pointer;
	}


#relationCard_a{
	text-align:center;
	margin:20px auto ;
}
	#relationCard_a a{
		display: inline-block;
		color:#fff;
		text-align:center;
		line-height:20px;
		padding:15px 20px;
		border:1px solid #b4b4b4;
		border-radius:3px;
		font-weight:bold;

		box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
		-ms-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);

	}
#CD_Simple{
	background-color: #888;
    border: solid 2px #555;
    margin-bottom: 20px;
	border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
	#CD_Simple table{
		width:100%;
		border-collapse: collapse;
	}
		#CD_Simple table tr.row {
			background: #fff url(../image/parts/list_style_line_bk.png) center repeat-x;
			background-size: 100% 100%;
			cursor: pointer;
		}
		#CD_Simple table tr.row:hover{
			background: #6ec0ff;
			color: #fff;
		}
		#CD_Simple table tr th {
			text-align: center;
			color: #fff;
		}

			#CD_Simple table tr td {
				padding: 5px 0;
				line-height: 14px;
			}

#relationCard .dk_options_inner{
	border:1px solid #aaa;
	border-radius: 0;
}

#relationCard #CD_Simple,#relationCard .box_list{
	margin:0 10px;
}

article #relationCard.list_style ul.box_list li dl dd.box_card_pen_info span.box_card_pen_effect {
    width: 758px;
}

.BeforeRelease:not(:first-child){
	display: none;
}