@charset "utf-8";

/*- 2022.3 common footer style -*/

.footer-wrapper{
	background: #000;
	padding-bottom: 2em;
	position: relative;
	z-index: 50;
	text-align: center;
}
	.footer-wrapper > div{
		border-top: 1px solid rgba(250,250,250,.1);
		padding: 1.5em 0;
		letter-spacing: -.40em;
	}
		.footer-wrapper > div:first-child{
				border: none;
				padding: 1em 0;
		}
		.footer-wrapper div > *{letter-spacing: normal;	}
	.footer-wrapper > div:empty{
		padding: .5em 0;
	}

@media screen and (max-width: 767px){
	.footer-wrapper > div{
		padding: 1em 0;
	}	
}		
		
		.footer-pagetop , .footer-share{
			display: inline-block;
			max-width: 490px;
			width:50%;
			vertical-align: top;
			box-sizing: border-box;
		}
		.footer-pagetop{
			padding-right: 1em;
			text-align: right;
		}
			.footer-pagetop a{
				line-height: 2em;
				font-weight: bold;
				color: #555;
				display: inline-block;
				padding-left: 1em;
				text-decoration: none;
			}
				.footer-pagetop a::before{
					content: "";
					display: inline-block;
					width: 1.6em;
					height: 1.6em;
					background: url(/yugioh/common/svg/pagetop.svg) center center no-repeat;
					background-size: contain;
					vertical-align: bottom;
					margin-right: .8em;
					margin-bottom: .2em;
				}
			.footer-pagetop a:hover{
				opacity: .5;
				transition: 0.2s;
			}
		.footer-share{
			text-align: left;
			padding-left: 1em;
		}
			.footer-share::before{
				content: "SHARE";
				line-height: 2em;
				color: #777;
				margin-bottom: .5em;
				vertical-align: top;
				font-weight: bold;
			}
		.footer-share > *{
			display: inline-block;
			vertical-align: top;
			background: center center no-repeat;
			background-size: contain;
			height: 0;
			margin-left: .3em;
			overflow: hidden;
			padding-top: 2em;
			width: 2em;
			border-radius: .2em;
		}
			.footer-share > .twitter{
				background-color: #1da1f2;
				background-image: url(/yugioh/common/svg/twitter.svg);
			}
			.footer-share > .x{
				background-color: #fff;
				background-image: url(/yugioh/common/svg/x.svg);
			}
			.footer-share > .facebook{
				background-color: #3564a2;
				background-image: url(/yugioh/common/svg/facebook.svg);
			}
			.footer-share > .line{
				background-color: #00B900;
				background-image: url(/yugioh/common/svg/line.svg);
			}
			.footer-share > *:hover{
				background-color: #555;
				transition: 0.2s;
			}
@media screen and (max-width: 767px){
	.footer-pagetop , .footer-share{
		display: block;
		width: 100%;
		font-size: .9rem !important;
		text-align: center;
		padding: 0;
		margin: auto;
	}
	.footer-pagetop{
		border-top: 1px solid rgba(250,250,250,.1);
		padding-top: 1em;
	}
	.footer-share{
		
		padding-bottom: 1em;
	}
}	


/*- notes & copyright -*/			
	.footer-notes{
		display: block; 
		font-size: .75rem;
		color: #666;
	}
	.footer-notes img{
		height: .75rem;
	}
	.footer-copyright{
		display: block;
		font-size: .75rem;
		color: #999;
	}
		.footer-notes + .footer-copyright , .footer-copyright + .footer-notes{
			padding-top: 1em;
		}
@media screen and (max-width: 767px){
	.footer-notes{
		font-size: .7rem;
	}
	.footer-copyright{
		font-size: .7rem;
	}	
}


/*- Series Banner -*/	
	ul.footer-series-banner{
		text-align: center;
	}
		ul.footer-series-banner{
			max-width: 980px;
			margin: auto;
			letter-spacing: -.40em;
		}
		ul.footer-series-banner li{
			display: inline-block;
			vertical-align: top;
			letter-spacing: normal;
			width: 40%;
		}
		ul.footer-series-banner.line3 li{
			width: 33.3%;
		}
		ul.footer-series-banner.line4 li{
			width: 25%;
		}
		ul.footer-series-banner li a{
			display: block;
			margin: auto 3%;
			overflow: hidden;
			border-radius: .2em;
		}
		ul.footer-series-banner li a img{
			max-width: 100%;
			vertical-align: bottom;
		}
		ul.footer-series-banner li a:hover{
			background: #fff;
		}
		ul.footer-series-banner li a:hover img{
			box-shadow: 0 0 1em 0 #fff;
			opacity: .8;
			transition: .2s;
		}
		
	@media screen and (max-width:767px){
		.footer-series-banner{padding: 0;}
		ul.footer-series-banner li ,
		ul.footer-series-banner.line3 li ,
		ul.footer-series-banner.line4 li{
			width: 80%;
			max-width: 640px;
			display: block;
			margin: 1em auto 1.3em;
		}
		ul.footer-series-banner a{margin: 3%;}
	}


/*- Konami Link */
	ul.konami-link{
		padding: 0 0 1em;

	}
		ul.konami-link > li{
			display: inline-block;
			padding: 0 .5em;
			line-height: .8em;
			border-right: 1px solid #555;
		}
		ul.konami-link > li:last-child{
			border: none;
		}
			ul.konami-link > li a{
				color: #888;
				font-size: .7rem;
				line-height: 1em;
				text-decoration: none;
				display: block;
			}
				ul.konami-link > li a:hover{
					color: #ccc;
					text-decoration: underline;
					transition: .2s;
				}
			ul.konami-link > li button#ot-sdk-btn.ot-sdk-show-settings,
			ul.konami-link > li button#ot-sdk-btn.optanon-show-settings{
				/*
				background: none !important;
				border: none !important;
				color: #888 !important;
				font-size: .7rem !important;
				line-height: 1em !important;
				text-decoration: none !important;
				display: block !important;
				padding: 0 !important;
				*/
				
				background: none;
				border: none;
				color: #888;
				font-size: .7rem;
				line-height: 1em;
				text-decoration: none;
				display: block;
				padding: 0;
				
			}
			ul.konami-link > li button#ot-sdk-btn.ot-sdk-show-settings:hover,
			ul.konami-link > li button#ot-sdk-btn.optanon-show-settings:hover{
				color: #ccc !important;
				text-decoration: underline !important;
				transition: .2s !important;
				cursor: pointer;
			}
				
	a.ccpa{
		display: inline-block;
		background: #333;
		padding: .3em 2em .2em;
		color: #888;
		border-radius: 50em;
		font-size: .7rem;
		margin-bottom: 1em;
		text-decoration: none;
	}
	a.ccpa:hover{
		background: #444;
		transition: .2s;
	}
	.site-copyright{
		color: #777;
		font-size: .7rem;
		display: block;
	}
	
@media screen and (max-width: 767px){
	
	.footer-wrapper:not(.widefix) ul.konami-link{
		padding: .5em;
		letter-spacing: -.40em;
	}
		.footer-wrapper:not(.widefix) ul.konami-link > li{
			display: inline-block;
			border: none;
			padding: 0 .2em;
			box-sizing: border-box;
			width: 50%;
			letter-spacing: normal;
		}
		.footer-wrapper:not(.widefix) ul.konami-link > li:nth-last-child(5){
			display: block;
			width: auto;
		}
			.footer-wrapper:not(.widefix) ul.konami-link > li a,
			.footer-wrapper:not(.widefix) ul.konami-link > li button.ot-sdk-show-settings{
				padding: 1em 0 !important;
				margin: auto auto .4em !important;
				background: rgba(255,255,255,.2) !important;
				border: 1px solid rgba(10,10,10,.1) !important;
				border-radius: 3px !important;
				dislay: block !important;
				width: 100% !important;
			}
				.footer-wrapper:not(.widefix) ul.konami-link > li a:hover,
				.footer-wrapper:not(.widefix) ul.konami-link > li button.ot-sdk-show-settings:hover{
					color: #ccc !important;
					text-decoration: none !important;
					transition: .2s !important;
				}
}