@charset "utf-8";

html {
/*    scroll-behavior: smooth;*/
    scroll-padding-top: 10px;
}

body { 
	box-sizing: border-box;
	background-color: #000;
	background: #2c4b6d;
   }

header{
	position: relative;
	z-index: 20;
}

main{
	overflow-x: hidden;	
	position: relative;
	z-index: 10;
}

footer{

	position: relative;
	z-index: 20;
}

main img{
	max-width: 100%;
	vertical-align: bottom;
}

h4{
	font-family: var(--FontGoth);
    font-weight: 900;
}




.konami-header{
	background-color: #000;
	border-bottom: 3px solid #e38931;
	position: relative;
}
	:lang(en) .intro .intro-body h2 {
		width: 55%;
	}


/*------------------select-lang------------------*/

dl.select-lang{
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 30;
	height: 37px;
	text-align: left;
	font-size: .8em;
	z-index: 10000;
	min-width: 12em;
	color: rgba(255,255,255,1);
	background-color: #000;
	
}
	@media screen and (max-width:767px){
		dl.select-lang{
			font-size: .6em;
		}
	}

dl.select-lang dt.pull-down{
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 2px 42px 0 54px;
    transition: .2s;
    font-weight: bold;
    font-size: 1.2em;
	& button{
		padding: 0;
		cursor: pointer;
		border: none;
		background: none;
		font-weight: inherit;
		color: #fff;
		font-size: 1.1em;
	}
}

dl.select-lang dt:hover{
	opacity: .7;
}
dl.select-lang dt::after{
	content: "";
    position: absolute;
	inset: 9px 14px auto auto;
    width: 20px;
    height: 20px;
    background: url(/yugioh/assets/svg/global.svg) center / 100% auto no-repeat;
    filter: invert(1);
    border-color: rgba(255, 255, 255, .7);
    
}
/*
dl.select-lang dt:hover:after{
	border-color: rgba(255,255,255,1);
	border-width: 0 2px 2px 0;
}
*/
dl.select-lang dt.open::after{
	border-width: 2px 0 0 2px;
	border-color: rgba(255,255,255,1);
	/*top: 1.3em;*/	
}




dl.select-lang dd{
	overflow: hidden;
	display: none;
}
dl.select-lang dd ul li{
	border-top:1px solid #333;
}
dl.select-lang dd ul a {
    display: block;
    color: #8a8a8a;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    padding: .8em 2em .6em 1.5em;
    background-color: #000;
}
dl.select-lang dd ul a:hover{
	background:#222;
	color:#ffae00;
}
dl.select-lang dd ul li:last-child a {
    border-bottom-left-radius: 5px;
}




/*---------------btn-sticky---------------*/


.btn-sticky{
    position: fixed;
    right: 1.5%;
    bottom: 6%;
    z-index: 999;
}
.btn-sticky img {
	display: block;
	width: 100%;
}



			:lang(fr-fr) .btn-sticky img {
				    display: block;
				    width: 100%;
				    margin-bottom: 25px;
				}
				:lang(pt-br) .btn-sticky img {
				    display: block;
				    width: 100%;
				    margin-bottom: 25px;
				}



.btn-sticky .btn-move {
    position: absolute;
    width: 110%;
    background-image: linear-gradient(#c45a0033, rgb(255 190 0) ), url(../images/dot-bg-right.png);
    background-repeat: no-repeat,no-repeat;
    background-position: center,center;
    background-size: 100%, 150%;
    background-color: #df6000;
    padding: 9px 28px 9px 10px;
    bottom: -33px;
    right: -20.5%;
    border-radius: 40px 0 0 40px;
    text-align: center;
    z-index: -1;
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0px 0px 12px 3px rgba(255, 255, 255, 0.4),0px 0px 0px 3px rgb(255 255 255), 0px 0px 0px 7px rgb(0 0 0);
}



			@media screen and (max-width: 768px){

				.btn-sticky img {
				    width: 74%;
				    margin-right: 4%;
				}

					.btn-sticky .btn-move {
				    width: 95%;
				    padding: 5px 20px 5px 3px;
				    bottom: -25px;
				    right: -20.5%;
				    font-size: .8em;
				}

			}




/*---------------update---------------*/

.update{
	position: relative;
	padding: 15px 10px 15px;
	
    text-align: center;
    background-image: linear-gradient(rgb(0 0 0 / 74%), rgb(0 0 0 / 60%)), url(../images/base-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    border: 1px solid #003737;
    border-width: 1px 0;
    color: #6d6d6d;
    z-index: 1;
	
	& > a.btn.tgs{
		display: block;
		background: #a41c2a;
		max-width: 800px;
		box-sizing: border-box;
		padding: 1.5em 0; 
		border-radius: .5em;
		position: relative;
		text-decoration: none;
		box-shadow: 0 0 0 2px #401616 inset;
		
		& > img{
			width: 85%;
		}
		& span{
			display: block;
			color: #a41c2a;
			background: #fff;
			width: fit-content;
			border-radius: 50em;
			font-family: var(--FontGoth);
			font-weight: bold;
			line-height: 1em;
			padding: .2em 2em;
			margin-bottom: 2%;
		}
		&::after{
			content: "";
			position: absolute;
			inset: .5em .5em auto auto;
			width: 2.5%;
			aspect-ratio: 1/1;
			background: url(/yugioh/assets/svg/external.svg) center / 100% auto no-repeat;
			filter: invert(1);
			opacity: 0;
		}
		&:hover{
			background: #7d1b28;
			transition: .3s;
			&::after{
				opacity: .4;	
				transition: .3s;
			}
		}
	}
}
.update time{
	padding-right: .5em;
}

.update ul {
    width: max-content;
    font-size: 0.9em;
    margin: 0 auto;
    text-align: left;
}
.update ul li{
	margin-bottom: .2em;
}

.update ul li a {
	text-decoration: none;
	color: #969696;
}


@media screen and (max-width: 768px){

    .update ul {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

	.update time {
	    padding-right: .5em;
	    display: block;
	    font-size: .8em;
	}

    .update ul li a {
        display: inline-block;
        width: 100%;
        font-size: .8em;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

}







/*---------------title-area----------*/


.title-area{
	background-color: #000;
	overflow: hidden;
	border-bottom :1px solid #222;
}
.title-area img{
	width: 100%;
	max-width: none;
}
.title-area-inner{
	position: relative;
	width: 100%;
	background-image: url(../images/title-area-bg.webp);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	background-color: #000;
    animation: fadein 1.5s ease .0s forwards;
}

.title-area-inner::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 177px;
    background: linear-gradient(to top,rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 50%) 64%, rgba(0, 0, 0, 0) 100%);
    z-index: 5000;
}



.position-adjuster-titleset{
	position: absolute;
    width: clamp(100px, 100%, 1500px);
	
    aspect-ratio: 15 / 8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    /*background-color: #00b7ff80;*/
	
}		

	.title-area-inner h1 {
		width: 42%;
		max-width: 621px;
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translateX(-50%);
	}
	.title-area-inner h2 {
		position: absolute;
		inset: auto 0 2% 0;
		font-size: clamp(1.5em, 2.5vw, 2.5em);
		font-weight: bold;
		color: #fff;
		text-align: center;
	}
.title-area-inner h1 img,
.title-area-inner h2 img{
	width: 100%;
	max-width: 100%;
}

.pf-icon{
	position: absolute;
    bottom: 10px;
    left: 20px;
    width: 22%;
}
.pf-icon img{
	display: inline-block;
	width: 47%;
}




	@media screen and (max-width : 768px){	

		.title-area {
			width: 100%;
			/*aspect-ratio: 90 / 97;*/
		}
		.title-area-inner::before {
			height: 204px;
			background: linear-gradient(to top, rgb(0 0 0) 55%, rgba(0, 0, 0, 0) 100%);
		}


	}






/*---------------mv-area---------------*/




.mv-area{
	position: relative;
	width: 100%;
	aspect-ratio: 15 / 8;
	max-width:1500px;
}


.mv-area .position-adjuster{
	position: absolute;
	width: clamp(100px, 20%, 1000px);
	aspect-ratio: 1440 / 769;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    /*background-color: #00b7ff;*/
}
.mv-area .position-adjuster img{
	position: absolute;
	width: 168%;
	display: block;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
}
.mv-area .position-adjuster h1{
	position: absolute;
    width: 132%;
    height: auto;
    top: 176%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    z-index: 1500;
}
.mv-area .position-adjuster h2{
	position: absolute;
    width: 70%;
    height: auto;
    top: clamp(80px, 276%, 1000px);
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    z-index: 1500;
}


.mv-area .position-adjuster img.character-2-pos,
.mv-area .position-adjuster img.character-3-pos,
.mv-area .position-adjuster img.character-4-pos,
.mv-area .position-adjuster img.character-5-pos,
.mv-area .position-adjuster img.character-6-pos,
.mv-area .position-adjuster img.character-7-pos{
	display: block;
}

.mv-area .position-adjuster img.character-2-pos.spsize,
.mv-area .position-adjuster img.character-3-pos.spsize,
.mv-area .position-adjuster img.character-4-pos.spsize,
.mv-area .position-adjuster img.character-5-pos.spsize,
.mv-area .position-adjuster img.character-6-pos.spsize,
.mv-area .position-adjuster img.character-7-pos.spsize{
	display: none;
}


.mv-area .position-adjuster img.character-1-pos{
    width: 195%;
    top: 70%;
    left: 64%;
}

.mv-area .position-adjuster img.character-2-pos{
    width: 230%;
    top: 203%;
    left: 187%;
}

.mv-area .position-adjuster img.character-3-pos{
	width: 203%;
    top: 136%;
    left: -106%;
}

.mv-area .position-adjuster img.character-4-pos{
    width: 222%;
    top: 83%;
    left: 183%;
}

.mv-area .position-adjuster img.character-5-pos{
    width: 301%;
    top: 98%;
    left: -78%;
}

.mv-area .position-adjuster img.character-6-pos{
    width: 264%;
    top: -21%;
    left: -97%;
}

.mv-area .position-adjuster img.character-7-pos{
    width: 392%;
    top: -39%;
    left: 230%;
    z-index: 5;
}






.title-set{
    z-index: 50;
}


.first-group{
    position:absolute;
    inset:0;
    animation: slidin-first 1.9s ease .0s forwards;
    z-index: 40;
}
.front-group{
    position:absolute;
    inset:0;
    animation: slidin-front 1.1s ease .1s forwards;
    z-index: 30;
}
.middle-group{
    position:absolute;
    inset:0;
    animation: slidin-middle 1.1s ease .25s forwards;
    z-index: 20;
}
.back-group{
    position:absolute;
    inset:0;
    animation: slidin-back 1.1s ease .35s forwards;
    z-index: 10;
}





					@keyframes fadein{
					    0%{
					        opacity: 0;
					        background-size: 100% auto;
					    }
					    70%{
					        opacity: 1;
					        background-size: 110% auto;
					    }
					    100%{
					        opacity: 1;
					        background-size: 110% auto;
					    }
					}

					@keyframes slidin-first{
					    0%{
					        transform: translateY(110px) scale(.90);
					        opacity: 1;
					    }
					    30%{
					        transform: translateY(-15px) scale(.98);
					        opacity: 1;
					    }
					    100%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					}

					@keyframes slidin-front{
					    0%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					    50%{
					        transform: translateY(-8px) scale(1);
					        opacity: 1;
					    }
					    100%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					}

					@keyframes slidin-middle{
					    0%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					    50%{
					        transform: translateY(-7px) scale(1);
					        opacity: 1;
					    }
					    100%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					}

					@keyframes slidin-back{
					    0%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					    50%{
					        transform: translateY(-3px) scale(1);
					        opacity: 1;
					    }
					    100%{
					        transform: translateY(0) scale(1);
					        opacity: 1;
					    }
					}




								@media screen and (max-width : 768px){	


									@keyframes fadein{
									    0%{
									        opacity: 0;
									        background-size: 290% auto;
									    }
									    70%{
									        opacity: 1;
									        background-size: 300% auto;
									    }
									    100%{
									        opacity: 1;
									        background-size: 300% auto;
									    }
									}

									.position-adjuster-titleset{
								        position: absolute;
										inset: 0;
								        z-index: 10000;
										transform: none;
										aspect-ratio: auto;
									}	
									.title-area-inner h1 {
										width: 72%;
								        top: 58%;
									}
									.title-area-inner h2 {
										/*width: 40%;
								        top: 83%;*/
										bottom: 10.5%;
										font-size: clamp(1.5em, 4.5vw, 2.5em);
									}
									.pf-icon {
										width: 100%;
										position: absolute;
										inset: auto 0 2% 0;
										text-align: center;
										& img{
											width: 18%;
										}
									}									

									.mv-area{
								        width: 100%;
								        aspect-ratio: 74 / 97;
									}

									.mv-area .position-adjuster {
										width: 18vw;
								        aspect-ratio: 18 / 9;
								        top: 0;
									}
									.mv-area .position-adjuster img {
									    width: 260%;
									}

									.mv-area .position-adjuster img.character-2-pos,
									.mv-area .position-adjuster img.character-3-pos,
									.mv-area .position-adjuster img.character-4-pos,
									.mv-area .position-adjuster img.character-5-pos,
									.mv-area .position-adjuster img.character-6-pos,
									.mv-area .position-adjuster img.character-7-pos{
										display: none;
									}

									.mv-area .position-adjuster img.character-2-pos.spsize,
									.mv-area .position-adjuster img.character-3-pos.spsize,
									.mv-area .position-adjuster img.character-4-pos.spsize,
									.mv-area .position-adjuster img.character-5-pos.spsize,
									.mv-area .position-adjuster img.character-6-pos.spsize,
									.mv-area .position-adjuster img.character-7-pos.spsize{
										display: block;
										/*opacity: .5;*/
									}


									.mv-area .position-adjuster img.character-1-pos{
								        width: 421%;
								        top: 859%;
								        left: 64%;
									}

									.mv-area .position-adjuster img.character-2-pos.spsize{
										width: 357%;
								        top: 1040%;
								        left: 217%;
									}

									.mv-area .position-adjuster img.character-3-pos.spsize{
										width: 300%;
								        top: 865%;
								        left: -123%;
									}

									.mv-area .position-adjuster img.character-4-pos.spsize{
								        width: 305%;
								        top: 656%;
								        left: 216%;
									}

									.mv-area .position-adjuster img.character-5-pos.spsize{
										width: 488%;
								        top: 749%;
								        left: -116%;
									}

									.mv-area .position-adjuster img.character-6-pos.spsize{
										width: 494%;
									    top: 385%;
									    z-index: 10; 
									}

									.mv-area .position-adjuster img.character-7-pos.spsize{
								        width: 720%;
								        top: 311%;
								        left: 228%;
								    	z-index: 5;
									}




								}






/*---------------movie-area---------------*/


.movie-area{
	position: relative;
	overflow: hidden;
	z-index: 1;
	text-align: center;
	padding: 0 2em 3em;
	background: url(/yugioh/tagforcegx/assets/images/pv-bk.jpg) center / cover;
	
	&::before{
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		background: repeating-linear-gradient(
		  to bottom,
		  rgba(0,0,0,.2) 0 3px,
		  rgba(0,0,0,.3) 3px 6px
		);
	}
	
	& > *{
		position: relative;
		z-index: 10;
	}
	
	& a.youtube{
		max-width: 450px;
		position: relative;
		border: 3px solid #e38931;
		display: block;
		width: fit-content;
		overflow: hidden;
		padding: 1px;
		background: #555;
		&::before{
			content: "";
			position: absolute;
			z-index: 10;
			inset: auto 5% 9% auto;
			width: 10%;
			aspect-ratio: 1/1;
			background: url(/yugioh/assets/svg/play.svg) center / 100% auto no-repeat;
			filter: invert(1);
		}
		&:hover{
			border: 3px solid #fff;
			transition: .2s;
			box-shadow: 0 0 1em 0 #e38931;
			& img{
				transform: scale(1.05);
				transition: .2s;
			}
			&::before{
				opacity: .5;
				transition: .2s;
			}
		}
	}
	
}

span.maincopy{
	font-family: var(--FontGoth);
	font-weight: 900;
	font-size: clamp(5px, 3.4vw, 36px);
	display: block;
	width: max-content;
	margin: .8em auto;
	color: #fff;
	/*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);*/
	
	text-shadow: 0 0 .2em #ffff00, 0 0 .2em #e38931, 0 0 .3em #e38931;
	
/*	font-family: wanpaku-ruika, sans-serif;
    font-style: normal;
    font-weight: 100;*/

}

.movie-area .movie-area-clip{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110%;
	clip-path: inset(0);
	z-index: -50;
}

.movie-area video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120vw;
 	aspect-ratio: 16 / 9;   
    z-index: -1000;
    opacity: 0;
    filter: brightness(.5) saturate(.5);
}
.movie-area .movie-area-clip::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
    z-index: -1500;
}
.movie-area .movie-area-clip::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgb(0 0 0 / 42%), rgb(0 0 0 / 94%)), url(../images/afterline.png);
    background-repeat: repeat;
    background-size: auto;
    z-index: -500;
}


.box-movie{
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
}

.movie-area .thumb{
    box-shadow: 0px 0px 0px 2px rgb(250 175 37), 0px 0px 0px 4px rgb(0 0 0);
}
.movie-area a{
	width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.movie-area span.thumb-text {
    position: relative;
    display: block;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    width: max-content;
    text-align: center;
    margin: 0 auto 30px;
	padding-left: 12px;
}
.movie-area span.thumb-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: -21px;
    width: 25px;
    height: 25px;
    background-image: url(../images/icon-play.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100%;
}


				@media screen and (max-width: 768px){

					.movie-area .movie-area-clip {
					    position: absolute;
					    top: 50%;
					    left: 50%;
					    transform: translate(-50%, -50%);
					    height: calc(100vh * 16 / 9);
					    min-width: calc(100vh * 16 / 9);
					}
					.movie-area video {
					    position: fixed;
					    top: 50%;
					    left: 50%;
					    transform: translate(-50%, -50%);
					    height: calc(100vh * 16 / 9);
					    width: auto;
					    aspect-ratio: auto;
					    z-index: -1000;
					    opacity: 0;
					    filter: brightness(.5) saturate(.5);
					}

    .movie-area {
        padding: 0 1.5em 3em;
    }
    span.maincopy {
        font-family: var(--FontGoth);
        font-weight: 900;
        font-size: clamp(5px, 4.4vw, 15px);
        display: block;
        width: max-content;
        margin: 29px auto;
        padding: 0;
        color: #fff;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
    }
					.movie-area a {
					    width: 90%;
					}

					.movie-area span.thumb-text::before {
					    left: -10%;
					    background-size: 100%;
					}

				}





/*---------------title-area-bg-video----------*/

#title-area-bg-video{
	position: relative;
	width: 100%;
	height: calc(56.25vw - 37px);
	height: calc(26vw);
	/*max-width:1000px;*/
	/*max-height: 525.5px;*/
	margin: 0 auto;
    /*background-color: #00a2ff47;*/
}
/*#title-area .video-box-wrapper{
	width: 100vw;
	height: calc(56.25vw - 37px);
	background-color: #000;
}*/
#title-area-bg-video .video-box {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 56.25vw;
    /*max-width: 1000px;*/
    /*max-height: 562.5px;*/
    z-index: -100;
    overflow: hidden;
    /* background-color: #ff0000;*/
}
#title-area-bg-video .video-box video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 56.25vw;
    opacity: .5;
}
#title-area-bg-video .video-box::after{
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgb(0 0 0 / 50%),rgb(0 0 0 / 100%)), url(../images/afterdot.png);
    background-repeat: repeat;
    background-size: auto;
    z-index: 150;
}



#title-area-bg-video .position-adjuster{
	position: absolute;
	width: clamp(100px, 20%, 1000px);
	aspect-ratio: 16 / 9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    background-color: #ff0000;
}
#title-area-bg-video .position-adjuster h1{
	position: absolute;
    width: 220%;
    /*max-width: 540px;*/
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#title-area-bg-video .position-adjuster h2{
    position: absolute;
    width: 220%;
    /*max-width: 540px;*/
    height: auto;
    top: clamp(80px, 180%, 1000px);
    left: 50%;
    transform: translate(-50%, -50%);
}
#title-area-bg-video .position-adjuster h1 img,
#title-area-bg-video .position-adjuster h2 img{
	width: 100%;
	display: block;
}








/*---------------ss-loop-------------*/


.ss-loop-wrap{
	width: 100%;
	overflow: hidden;
}
.ss-loop{
	display: flex;
	width:max-content;
	animation: move 30s linear infinite;
	will-change: transform;
	transform: translateZ(0);
}
.ss-loop img{
	display: block;
	width: 30%;
	margin: 10px 5px;
	will-change: transform;
}

@keyframes move{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(-50%);
    }
}





/*------------------intro------------------*/

.intro{
	background-color: #242424;
	background: repeating-linear-gradient(
		  45deg,
		  #242424 0 6px,
		  #252525 6px 12px
		);
}
.intro .intro-inner1{
    width: 100%;
    aspect-ratio: 31 / 12;
    background-image:url(../images/intro-bg-map.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
}
.intro .intro-inner2{
	background-repeat: no-repeat;
	
	@media (min-width: 768px){
		aspect-ratio: 31 / 12;
		background-image:
			url(../images/en/intro-bg-ss-left.webp),
			url(../images/en/intro-bg-ss-right.webp);
		background-position:
			left center,
			right center;
		background-size:
			auto 110%,
			auto 110%;
	}
	
	@media (max-width: 767px){
		background-image:
			url(../images/en/intro-bg-ss-top.webp),
			url(../images/en/intro-bg-ss-bottom.webp);
		background-size:
			100%,
			100%;
		background-position:
			center top,
			center bottom;
	}
	
	&:lang(ja){
		@media (min-width: 768px){	
			background-image:
				url(../images/ja/intro-bg-ss-left.webp),
				url(../images/ja/intro-bg-ss-right.webp);
			}
		@media (max-width: 767px){
			background-image:
				url(../images/ja/intro-bg-ss-top.webp),
				url(../images/ja/intro-bg-ss-bottom.webp);
		}
	}
	
}

.intro .intro-body {
    width: 90%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 14% 0;
    line-height: 2.2em;
    color: #fff;
    text-align: center;
    font-size: clamp(1px, calc(100vw / 64), 24px);
    text-shadow: 0px 0px 25px rgb(0 0 0), 0px 0px 18px rgb(0 0 0), 0px 0px 32px rgb(0 0 0);
    text-shadow: 0 0 .3em #000, 0 0 .3em #000, 0 0 .1em #000, 0 0 .1em #000;
}

.intro .intro-body h2{
    /*width: max-content;*/
    width: 75%;
    font-size: clamp(1px, calc(100vw / 45), 25px);
	margin-bottom: calc(100vw / 76);

	font-family: var(--FontGoth);
	font-weight: 900;

}

	:lang(en) .intro .intro-body{
		width: 55%;
	}

	:lang(en) .intro .intro-body p{
		font-family: var(--FontGoth);
		font-weight: 900;
	}

@media (max-width:767px){
	.intro-body br{
		display: none;
	}
}

.intro-notes{
	width: 97%;
    max-width: 1000px;
    color: #f9b129;
    margin: 0 auto;
    padding: 20px 0;
    font-size: .9em;
}
.intro-notes p{
    line-height: 1.7em;
    margin-bottom: 15px;
}
.intro-notes .box-left{
	width: 50%;
}
.intro-notes .box-right{
	width: 45%;
}
.logos{
	width: 100%;
}
.logos img{
	display: block;
}



				@media screen and (max-width: 768px){


					.flex.intro-notes{
				        flex-direction: column;
				        width: 94%;
					}
					.intro-notes p{
						font-size: .9em;
					}

					.intro-notes .box-left{
						width: 100%;
					}
					.intro-notes .box-right{
						width: 100%;	
					}

					.intro .intro-body {
						width: 99%;
					    padding: 50% 0;
					    font-size: clamp(1px, calc(174vw / 64), 24px);
					}


							    :lang(en) .intro .intro-body {
							    	width: 85%;
							        padding: 40% 0;
							        font-size: clamp(1px, calc(216vw / 64), 24px);
							    }


					.intro .intro-body h2 {
					    width: 95%;
					    font-size: clamp(1px, calc(183vw / 45), 27px);
					}
					.logos {
					    width: 95%;
					    max-width: 454px;
					    margin: 8px auto 8px;
					}
					.logos img {
					    display: block;
					    width: 31%;
					}

				}



/*------------------汎用------------------*/


.flex{
	display: flex;
}

.m0{
	margin: 0 auto;
}
.mt1{
	margin-top: 70px;
}
.mt2{
	margin-top: 10px;
}
.mt-figcap{
/*margin-top: 1.2em;*/	
}
.tagforce .content-box span.pm0{
    padding: 0;
    margin: 0;
}
.disp_inlne{
	display: inline-block;
}

.tagforce .content-box span.inline{
	display: inline;
}

.products .content-box .img-benefits figcaption h5 span.phys{
	font-family: var(--FontGoth);
    font-weight: 900;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0;
}


.mb1{
	margin-bottom: 10px;
}
.mb50{
	margin-bottom: 50px;
}
 .products .content-box .caution_small.mb2{
	margin-bottom: 2.5em;
}
.border-b{
	border: 2px solid #000;
}

.caution-1{
	position: relative;
    width: 46%;
    min-width: 496px;
    max-width: 606px;
    margin: 50px auto;
    padding: 2% 3% 2% 109px;
    background-color: #a80000;
    border-radius: 50px;
    color: #fff;
    font-size: .9em;
}
.caution-1::before{
	content: "";
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-image: url(../images/icon-caution1.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100%;
}
main h3 {
	font-size: clamp(28px, 3.5vw, 40px);
    line-height: .9em;
}
.font-small-1{
	font-size: .8em;
}
.font-small-1-pd0-inline{
	display: inline;
	font-size: .8em;
	padding: 0;
}

.caution_small,
.products .content-box .img-benefits .caution_small {
    display: block;
    color: #f4f4f4c4;
    text-align: center;
    font-size: .8em;
    margin: 0 auto;
}

.caution_small, .products .content-box .img-benefits .caution_small.mt2{
	margin: 15px auto 10px;
    color: #696969;
}
.caution_small, .products .content-box .img-benefits .caution_small.outside{
	margin: 8px auto;
	color: #f4f4f4c4;
} 
.intro .caution_small{
    display: block;
    color: #f4f4f4c4;
    text-align: center;
    font-size: .7em;
    margin: 0px auto;
} 
ruby rb {
    font-weight: bold;
}


.fontgoth{
	font-family: var(--FontGoth);
    font-weight: 900;
}


.products .content-box .img-benefits span.fontgoth{
	font-family: var(--FontGoth);
    font-weight: 900;
}



						@media screen and (max-width: 768px){

						    .caution-1 {
						        position: relative;
						        width: 97%;
						        min-width: 155px;
						        max-width: 606px;
						        margin: 50px auto;
						        padding: 12% 4% 4%;
						        background-color: #a80000;
						        border-radius: 24px;
						        color: #fff;
						        font-size: 0.7em;
						        box-sizing: border-box;
						    }

							    .caution-1::before {
								content: "";
						        position: absolute;
						        top: 23%;
						        left: 50%;
						        transform: translate(-50%, -50%);
						        width: 36px;
						        height: 36px;
						        background-image: url(../images/icon-caution1.png);
						        background-repeat: no-repeat;
						        background-position: left top;
						        background-size: 100%;
							}

							.caution_small, .products .content-box .img-benefits .caution_small.outside {
						        margin: 15px auto 3px;
						        color: #f4f4f4c4;
						        text-align: left;
						        text-indent: -1em;
						        padding-left: 1em;
						        margin: 5px;
							}



						}






/*----------wanpaku---100 bold 400 normal-------*/



.maincopy,h2,h3,h4,h5{
	font-family: var(--FontGoth);
	font-weight: 900;
/*	font-synthesis-weight: none;
	font-family: "wanpaku-ruika", sans-serif;
	font-weight: 100; 
	font-style: normal;*/
}
.wanpaku-n{
	font-synthesis-weight: none;
	font-family: "wanpaku-ruika", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8em;
}
.wanpaku-n.bold{
	font-weight: 100;
}




/*------------------contents-area------------------*/

.contents-area{
	position: relative;
	padding: 45px 0;
	overflow: hidden;
	
	& .tagforce, & .character, & .products-specs, & .products, & .notes-image{
		position: relative;
		z-index: 10;
	}
	
	&::before, &::after{
		content: "";
		pointer-events: none;
		inset: 0;
	}
	&::after{
		z-index: 1;
		position: absolute;
		background: 
			repeating-linear-gradient(
				-8deg,
				transparent 0 20px,
				#ffffff02 20px 40px
			),
			linear-gradient(
				to right,
				rgba(0,0,0,.4),
				transparent,
				rgba(0,0,0,.4)
			);
	}
	&::before{
		z-index: -1;
		position: fixed;
		background-repeat: no-repeat;
		background-image: 
			linear-gradient(
				-135deg,
				transparent,
				#2d7aa14c
			),
			url(/yugioh/tagforcegx/assets/images/bk-academialogo.png),
			url(/yugioh/tagforcegx/assets/images/bk-bottomright.png),
			url(/yugioh/tagforcegx/assets/images/bk-topleft.png);
		background-position:
			center,
			center, 
			right bottom,
			top left;
		background-size:
			auto,
			44% auto,
			60% auto,
			60% auto;
	}
	@media (min-width:1601px){
		&::before{
		background-size:
			auto,
			auto auto,
			auto auto,
			auto auto;			
		}
	}
	@media (max-width:767px){
		&::before{
		background-size:
			auto,
			80% auto,
			90% auto,
			90% auto;			
		}
	}
	
	
	
/*	background-image: url(../images/bg-deco-upper.png);
	background-repeat: repeat-y;
	background-size: auto;*/
}

.contents-area .contents-area-inner-clip{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -100;
}
.contents-area .contents-area-inner-bg{
	position: fixed;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vw;
	background-image: url(../images/base-bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/*.about::after{
	content: "";
	position: absolute;
    width: 100%;
    height: 100%;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-image: url(../images/base-bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}*/

.hw-deco-c-path {
    background-color: #e38931;
    color: #fff;
    font-size: 1.3em;
    font-style: oblique;
    margin: 10px auto;
    text-align: center;
    padding: 4px;
    margin-bottom: 20px;
    clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
	filter: drop-shadow(.3em .3em 0 #f0f);
}
.hw-deco-c-path span{
    display: inline-block;
    transform: skewX(-15deg);
	font-family: var(--FontGoth);
    font-weight: 900;
}


.contents-area h3 {
    padding: 2% 0 2.4%;
    text-align: center;
    background-image: url(../images/hw-bg.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
}



							@media screen and (max-width: 768px){

								.contents-area .contents-area-inner-bg {
								    height: 100vh;
								}
								.contents-area h3 {
								    padding: 5% 0 5.4%;
								    background-size: 176% 100%;
								}
								.hw-deco-c-path span {
								    font-size: 0.8em;
								}

							}





/*------------------content-box------------------*/






.content-outer{
	max-width: 1000px;
}

.content-box{
	width: 97%;
    position: relative;
    margin: 30px auto;
    padding: 3px;
    background-color: #15344c;
    box-shadow: 
		0px 0px 0px 4px rgb(250 175 37),
		0px 0px 0px 8px rgb(0 0 0),
		13px 13px 0px 0px rgba(0,0,0,.2)
		;
    box-sizing: border-box;
	& > *{
		position: relative;
		z-index: 1;
	}
}
.content-box.multiple{
	width: 30%;
	margin: 30px 20px;
}

/*
.content-box::after{
	content: "";
	content: none;
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background-color: #0000004d;
    z-index: -1;
}
*/

.content-box.dot-bg-left{
	/*
	background-image: url(../images/dot-bg-left.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto;
	*/
	&::before{
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	&::before{	background: url(../images/dot-bg-left.png) left top / auto 150% no-repeat;}
}
.content-box.dot-bg-both{
	/*background-image: url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
	background-size: auto, auto;*/
	&::before, &::after{
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	&::before{	background: url(../images/dot-bg-left.png) left -10% top / 40% auto no-repeat;}
	&::after{	background: url(../images/dot-bg-right.png) right -10% bottom / 40% auto no-repeat;}
}
.content-box.dot-bg-both.content-box-switch{
	background-image:
		linear-gradient(to bottom, rgb(230 0 18 / 38%), rgb(189 9 0 / 0%));
		
}
.content-box.dot-bg-both.content-box-steam{
	background-image:
		linear-gradient(to bottom, rgb(50 51 61 / 38%), rgb(4 44 61 / 55%));
		
}



.content-box img.img-ss{
	display: block;
	border: 2px solid #122d43;
	box-sizing: border-box;
}

.content-box h4 {
	color: #000;
    background-color: #00000094;
    padding: 15px;
    font-size: 1.6em;
    margin: 8px 7px 15px;
    text-align: center;
}




.content-box dl {
	padding: 15px;
}

							@media screen and (max-width: 768px){


								.content-box {
								    width: 93%;
								}

								.content-box h4 {
								    color: #000;
								    font-size: 1.4em;
								}

							}



/*------------------TAGFORCE------------------*/

.tagforce{
}

/*.tagforce .s-movie-box{
    margin: 20px 14px 50px;
    padding: 20px;
    border: 2px solid #ccc;
    background-color: #cccccca3;
}
*/
.tagforce .content-box video{
	width: 100%;
}
.tagforce .content-box span{
    display: block;
    padding: 3% 0;
    text-align: center;
    box-sizing: border-box;
    text-align: left;
	font-size: .9em;
}

.tagforce .content-box h4 span {
	width: max-content;
    font-size: 1em;
    position: relative;
    display: block;
    padding: 0;
    z-index: 1;
    font-family: var(--FontGoth);
    font-weight: 900;
    margin: 3px auto 0;
}


			:lang(en) .tagforce .content-box h4 span {
			    font-size: .8em;
			}



.tagforce .content-box h4 span::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke: 4px #ffffff;
    color: #000000;
    text-align: center;
}


.content-box .inner.multiple {
    width: 33%;
    margin: 10px 8px;
	color: #becfdb;
}

.tagforce .content-box.pickup span{
	display: block;
    padding: 5% 4% 8%;
    text-align: center;
    color: #becfdb;
}
.tagforce .content-box.pickup span.disp_inlne {
    display: inline-block;
    padding: 0;
}
.tagforce .content-box.pickup span.adjust_small {
    padding: 5% 4% 10%;
    font-size: clamp(14px, calc(46vw / 45), 17px);
}
.tagforce .content-box.pickup h5{
    padding-top: 4%;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
}

.remake-notice{
	margin: 1em;
	color: #ffffffcc;
	padding: 1em;
	background: #ffffff11;
	position: relative;
	padding-left: 2.2em;
	&::before{
		content: "*";
		position: absolute;
		inset: 1em auto auto 1em;
	}
}

:lang(ja) .remake-notice::before{content: "※";}

							@media screen and (max-width: 768px){

								.tagforce .flex{
									display: block;
								}

								.content-box .inner.multiple {
								    width: 90%;
								    margin: 10px auto;
								    color: #fff;
								}
								.tagforce .content-box.pickup span {
								    padding: 5% 2% 10%;
								    font-size: clamp(1px, calc(127vw / 45), 27px);
								}
								.tagforce .content-box.pickup span.adjust_small {
								    padding: 5% 4% 10% 1em;
        							font-size: clamp(1px, calc(122vw / 45), 27px);
								}


							}



/*------------------product-specs------------------*/

.product-specs{
	color: #fff;
    align-items: flex-start;
    margin: 50px auto 0;
	padding: 1em;
	gap: 1em;
}
.product-specs figure,
.product-specs dl
{
    margin: 0 auto;
}
.product-specs .icon-tfgx{
	margin-top: 0;
    max-width: 250px;
}
.product-specs dl dt{
	font-family: var(--FontGoth);
    font-weight: 900;
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    background-color: #0000005e;
    padding: 1px 30px;
    margin: 7px;
    max-width: 13em;
    color: #ffa700;
    line-height: 1.8em;
}
.product-specs dl dd{
    padding: 7px 30px 1em 10px;
    margin: 7px;
    line-height: 1.8em;
	font-family: var(--FontGoth);
    font-weight: 900;
}

div.product-specs-caution{
	position: relative;
    padding-left: 1.5em;
    max-width: 78%;
	border: 1px solid #eeeeee77;
	border-radius: .5em;
    color: #fff;
    font-size: .9em;
    margin: 9px auto 50px;
	padding: 1em 1em 1em 8%;
	&::before{
		content: "";
		position: absolute;
		width: 5%;
		aspect-ratio: 1/1;
		background: url(/yugioh/assets/svg/attention.svg) center / 100% auto no-repeat;
		inset: 50% auto auto 1.5em;
		transform: translate(0,-50%);
		filter: invert(1);
		
	}
}
	.product-specs-caution ul li{
		position: relative;
		padding-left: 1.3em;
		&::before{
			content: "・";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
:lang(de).product-specs-caution ul ::before{content: "-";}



							@media screen and (max-width: 768px){

								.product-specs.flex{
									display: block;
									text-align: center;
								}
								.product-specs dl dt {
								    max-width: 100%;
								    color: #ffa700;
								}
								.product-specs .icon-tfgx {
								    margin-bottom: 23px;
								}
								.product-specs-caution {
								    position: relative;
								    padding: 6px;
								    max-width: 97%;
								    color: #fff;
								    font-size: .9em;
								    margin: 9px auto 50px;
								    box-sizing: border-box;
								}

							}




/*------------------products------------------*/



.content-box.tab-upper{
	margin-top: 130px;
}

.content-box.tab-upper::before{
    content: "パッケージ版";
    position: absolute;
    top: -62px;
    left: 50%;
    transform: translateX(-50%);
    width: 53%;
    padding: 10px;
    box-sizing: border-box;
    background-color: hsl(0deg 0% 0% / 80%);
    color: #fff;
    text-align: center;
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    line-height: 1.5em;
    font-size: 1.5em;
}

.icon-pf{
    display: block;
    width: 100%;
    max-width: 180px;
    margin: 6px auto;
}

.tab-upper{
    width: 60%;
    display: block;
    padding: 10px 0 7px;
    margin: 0px auto -27px;
    box-sizing: border-box;
    background-color: hsl(0deg 0% 0% / 80%);
    color: #fff;
    text-align: center;
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    line-height: 1.5em;
    font-size: 1.5em;
	font-family: var(--FontGoth);
    font-weight: 900;
}




.products .content-box{
	max-width: 980px;
	margin-bottom: 111px;
}

.products .content-box h4 {
	position: relative;
    color: #000;
    background-image: url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
    background-repeat: no-repeat, no-repeat;
    background-position: -7px center, calc(0% - -581px) center;
    background-size: 40%, 40%;
    background-color: #c40a00;
    font-size: 1.6em;
    border: 2px solid #ff7f0d;
}

	.products .content-box h4 span {
		position: relative;
		display: block;
		width: fit-content;
		color: #000;
		font-family: var(--FontGoth);
		font-weight: 900;
		z-index: 1;
	}
	.products .content-box h4 span::after{
		content: attr(data-text);
		position: absolute;
		inset: 0;
		z-index: -1;
		-webkit-text-stroke: 4px #ffffffff;
		color: #000000;
		text-align: center;
	}


	.products .content-box.content-box-switch h4 {
		color: #000;
		background-image: url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
		background-repeat: no-repeat, no-repeat;
		background-position: left top, right top;
		background-size: 40%, 40%;
		background-color: #c40a00;
		
		border: 2px solid #c52d31;
	}
	.products .content-box.content-box-steam h4 {
		color: #000;
		background-image: url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
		background-repeat: no-repeat, no-repeat;
		background-position: -7px center, calc(0% - -581px) center;
		background-size: 40%, 40%;
		background-color: #004f74;
		
		border: 2px solid #184563;
	}

.products .content-box.content-box-switch{
	background-color: #740000;
}

.products .content-box.content-box-steam{
	background-color: #001a29;
}

.notes-benefits{
	text-align: left;
	width: 94%;
	margin: 0 auto 50px;
	
	& small{
		color: #f4f4f4;
		opacity: .8;
		display: block;
		padding-left: 1.3em;
		position: relative;
		font-size: .8em;
		&::before{
			content: "*";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
}
:lang(ja) .notes-benefits small::before{content: "※";}


.notes-edition,.text-benefits{
	margin: 7px 7px 7px;
	background: rgba(0,0,0,.2);
	border-radius: .5em;
	color: #ffffffbb;
	padding: 1em;
	& small{
		color: #f4f4f4c4;
		display: block;
		padding-left: 1.3em;
		position: relative;
		font-size: .95em;
		&::before{
			content: "・";
			position: absolute;
			inset: 0 auto auto 0;
		}
	}
}
:lang(de) .notes-edition small::before{content: "-";}

.products .content-box .img-benefits{
	width: 96%;
    margin: 10px auto 15px;
    padding: 32px 25px 23px;
    border: 2px solid #a66b00;
    background-image: url(../images/bg-benefits.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 13px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}

.products .content-box.content-box-switch .img-benefits{
	border-color: #c52d31;
}
.products .content-box.content-box-steam .img-benefits{
	border-color: #184563;
}





	@media screen and (max-width: 768px){

		.tab-upper{
		    width: 80%;
		}

		.products .content-box {
			width: 93%;
		}
		.products .content-box .img-benefits .flex{
			display: block;
		}
		.products .content-box .img-benefits {
			width: 98%;
			padding: 14px 14px;
			background-size: cover;
		}

	}







.products .content-box .img-benefits.img-benefits-dl{
    background-image: url(../images/bg-benefits-dl.jpg);
}
.products .content-box .img-benefits span{
    display: block;
    margin: 10px auto;
    font-size: 1.4em;
    font-weight: 100;
    font-family: var(--FontGoth);
    font-weight: 900;
}
.products .content-box .img-benefits img{
    width: 100%;
    max-width: 194px;
    display: block;
}
.products .content-box .img-benefits img.img-card{
	width: 100%;
    max-width: 170px;
    display: block;
    border-radius: 2.5% 2.5% 2.5% 2.5% / 1.714% 1.714% 1.714% 1.714%;
    box-sizing: border-box;
    margin: 10px auto 20px;
}

						@media screen and (max-width: 480px){

							.products .content-box .img-benefits img.img-card{
							    max-width: 130px;
							}

						}

.products .content-box .img-benefits figure{
	margin-top: 0;
}



figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.products .content-box .img-benefits figcaption span {
	display: block;
    font-size: .8em;
    font-weight: 400;
	line-height: 1.2em;
}
.products .content-box .img-benefits figcaption span.font-smaller{
	font-size: .8em;
}

.products .content-box .img-benefits .img-benefits-card-chank{
    display: flex;
    align-items: flex-start;
    width: 70%;
}






.products .content-box .link-store{
	margin: 10px 10px 15px;
    justify-content: center;
	flex-wrap: wrap;
    color: #fff;
    text-align: center;
}
.products .content-box .link-store a{
	text-decoration: none;
	color: #fff;
}
.products .content-box .link-store .caution_small{
	width: 100%;
	margin: 0 auto 20px;
}


.products .content-box.content-box-switch .link-store {
    border-block: 1px solid #c52d31;
    padding: 12px 0 0;
}
.products .content-box.content-box-steam .link-store {
    border-block: 1px solid #184563;
    padding: 12px 0 0;
}



.products .content-box .chunk{
    width: 46%;
    margin: 10px;
}
.products .content-box-steam .chunk{
    width: 46%;
    margin: 10px auto;
}
.products .content-box .chunk div{
    width: 94%;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 1.1em;
}

.products .content-box.content-box-switch .to-store {
	position: relative;
    padding: 18px;
    border-radius: 35px;
    box-shadow: 0px 0px 0px 3px rgb(255 255 255), 0px 0px 0px 6px rgb(0 0 0);
    font-size: 1.4em;
    background-image: linear-gradient(to bottom, rgb(189 9 0 / 0%), rgb(255 120 3)), url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center center, calc(0% - 53px) center, calc(0% - -98px) center;
    background-size: 100% 100%, 87%, 86%;
    background-color: #d80b00ed;
}
.products .content-box.content-box-switch .to-store:hover {
	box-shadow: 0px 0px 0px 3px rgb(255 78 73), 0px 0px 0px 6px rgb(255 169 0);
}
.products .content-box.content-box-switch .storelinks{
	& li{
		margin-bottom: 15px;
		padding: 0 2%;
	}
	& a {
		border-radius: .5em;
		display: block;
		position: relative;
		padding: 8px;
		box-shadow: 0px 0px 0px 1px rgb(255 255 255), 0px 0px 0px 4px rgb(0 0 0);
		background-image: linear-gradient(to bottom, rgb(189 9 0 / 0%), rgb(255 120 3)), url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center center, calc(0% - 53px) center, calc(0% - -98px) center;
		background-size: 100% 100%, 87%, 86%;
		background-color: #d80b00ed;
		
		& div{
			margin: auto;
			font-size: .9em;
			padding: 0;
		}
		
		&:hover{
			box-shadow: 0px 0px 0px 1px rgb(255 78 73), 0px 0px 0px 4px rgb(255 169 0);
		}
	}
}


.products .content-box.content-box-steam .to-store {
	position: relative;
    padding: 18px;
    border-radius: 35px;
    box-shadow: 0px 0px 0px 3px rgb(255 255 255), 0px 0px 0px 6px rgb(0 0 0);
    font-size: 1.4em;
    background-image: linear-gradient(to bottom, rgb(189 9 0 / 0%), rgb(0 174 232)), url(../images/dot-bg-left.png), url(../images/dot-bg-right.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center center, calc(0% - 53px) center, calc(0% - -98px) center;
    background-size: 100% 100%, 87%, 86%;
    background-color: #005562ed;
}

.products .content-box.content-box-steam .to-store:hover {
	box-shadow: 0px 0px 0px 3px rgb(2 101 116), 0px 0px 0px 6px rgb(0 137 160);
}


.products .content-box.content-box-switch .to-store::before,
.products .content-box.content-box-steam .to-store::before
 {
    content: "";
    position: absolute;
    top: 22px;
    left: 23px;
    width: 36px;
    height: 36px;
    background-image: url(../images/icon-cart.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100%;
    opacity: .9;
}


.products-specs figure.rating {
    padding: .5em 0;
	& img{
		height: 80px;
	}
}




						@media screen and (max-width : 768px){	

							.about .about-inner-bg {
							    height: 100vh;
							    background-size: auto 100%;
							}
							.products .content-box.content-box-switch .link-store {
							    display: block;
							    background-color: #0000002e;
							    padding: 13px 0;
							}
							.products .content-box.content-box-steam .link-store {
							    display: block;
							    background-color: #0000002e;
							    padding: 13px 0;
							}
							.products .content-box .chunk {
							    width: 94%;
							    margin: 10px;
							}


						}






/*------------------benefit------------------*/



.products .content-box .img-benefits .digitalbook {
    max-width: 523px;
    margin: 0px auto 10px;
}
.products .content-box .img-benefits .benefits-reserve{
	flex: 1;
}
.products .content-box .img-benefits .benefits-reserve img{
	width: 100%;
    max-width: 430px;
    margin: 0 auto 18px;
}


						@media screen and (max-width : 768px){



							.products .content-box .img-benefits .benefits-reserve{
						        display: block;
						        width: 96%;
						        margin: 25px auto;
							}

							.products .content-box .img-benefits figure {
							    margin-top: 0;
							    display: inline-block;
							    width: 48%;
							    vertical-align: top;
							}


						}



/*------------------footer------------------*/

footer{
}

    figure.platform {
        padding: 1em 0;
        border-top: 1px solid #222;
    }

    figure.platform img.switch {
		width: 50%;
		max-width: 185px;
    }

    .trademark{
        max-width: 1000px;
		&:last-child{
			margin-bottom: 1em;
		}
    }
    p.trademark span {
        display: block;
        font-size: .75em;
        opacity: .5;
    }
    figure.rating {
        padding: 2em 0;
    }
    figure.rating img {
         height: 60px;
    }

	.tfgx-footer{
		background-color: #000;
		color: #fff;
		text-align: center;
		padding: 20px 0;
    	border-top: 3px solid #e38931;
        border-bottom: 1px solid #222;
	}
	.tfgx-footer .title-logo {
	    width: 30%;
	    min-width: 300px;
	    max-width: 400px;
	    display: block;
	    margin: 25px auto 30px;
	}

	.footer-copyright {
		padding-top: 22px;
	    display: block;
	    font-size: .75rem;
	    color: #999;
	    border-top: 1px solid #222;
	}






/*------------------slick------------------*/

.slick-slide{
    height:auto;
}
.slick-dots {
	position: absolute;
    bottom: -18px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 13px;
    padding: 0;
    cursor: pointer;
    background-color: #1c1c1c;
    border-radius: 50%;
}
.slick-dots li.slick-active{
    opacity: 1;
    background-color: #f59c00;
}
.slick-dots li button:before {
	display: none;
}
.slick-dotted.slick-slider {
    margin-bottom: 73px;
}

.slick-slider .slick-track{
	display: flex;
}



/*-------------colorbox------------*/




/*ラグ対策*/

/* カルーセルの親要素（初期状態：1枚目以外を非表示にする） */
.carousel:not(.slick-initialized) .content-box:nth-child(n+2) {
  display: none;
}

/* （オプション）もし1枚目すら表示がガタつき　起動するまで親ごと隠す */
.carousel:not(.slick-initialized) {
  opacity: 0;
  visibility: hidden;
}






/*---------hystmodal-character-------*/

section.character h5{
	width: 75%;
    font-size: clamp(1px, calc(100vw / 45), 24px);
    margin-bottom: calc(100vw / 76);
    color: #fff;
    text-align: center;
    margin-top: 3%;
	line-height: 1.8em;
}

.character-inner{
	width: 100%;
    text-align: center;
    margin: 4% 0;
}
.chank.flex.justify-content-center{
	justify-content: center;
    flex-wrap: wrap;
}



						@media screen and (max-width : 768px){	

							section.character h5 {
							    width: 95%;
							    font-size: clamp(1px, calc(168vw / 45), 24px);
							    margin-bottom: calc(100vw / 76);
							    color: #fff;
							    text-align: center;
							    margin-top: 5%;
							    line-height: 1.8em;
							}

							.character-inner .flex {
								display: block;
							}


						}





.character-inner img{
	width: 100%;
}
.character-inner a{
	width: 20%;
    display: block;
    border-radius: 50%;
    margin: 0 19px;
    box-sizing: border-box;
}



img.chara-thumb{
	width: 100%;
	border-radius: 50%;
	/*box-shadow: 0px 0px 0px 3px rgb(255 255 255), 0px 0px 0px 6px rgb(0 0 0);
	overflow: hidden;*/
}

.character-inner a.red img{
    box-shadow: 0px 0px 0px 3px rgb(233 56 0), 0px 0px 0px 7px rgb(0 0 0);
}
.character-inner a.blue img{
    box-shadow: 0px 0px 0px 3px rgb(0 166 224), 0px 0px 0px 7px rgb(0 0 0);	
}
.character-inner a.black img{
	box-shadow: 0px 0px 0px 3px rgb(165 165 165), 0px 0px 0px 7px rgb(0 0 0);	
}
.character-inner a.independent img{
    box-shadow: 0px 0px 0px 3px rgb(0 130 144), 0px 0px 0px 7px rgb(0 0 0);	
}
.character-inner a.yellow img{
	box-shadow: 0px 0px 0px 3px rgb(198 156 0), 0px 0px 0px 7px rgb(0 0 0);	
}

.thumb-wrap{
	position: relative;
    width: 100%;
    border-radius: 50%;
    margin: 5%;
    box-sizing: border-box;
}
.thumb-wrap::after{
    content: "";
    position: absolute;
    top: -5px;
    left: 5px;
    width: 104%;
    height: 104%;
    border-radius: 50%;
    background-color: #00000042;
    z-index: -1;
}











.character-datail{
	position: absolute;
	top: 50%;
    left: 24%;
    transform: translate(-50%, -50%);
	width: 41%;
	z-index: 100;
	padding: 3% 0 0 5%;
}
.character-datail.twolines {;
    padding: 1% 0 0 5%;
}

.character-datail .char-name{
	position: relative;
	display: block;
    line-height: 1em;
    margin: 30px 0 0px;
    font-size: clamp(20px, 3vw, 44px);
    font-family: var(--FontGoth);
    font-weight: 900;	
}
.character-datail .char-name::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke: 4px #ffffff;
    color: #000000;
}

.character-datail .char-name2-text{
	position: relative;
	display: block;
	line-height: 1em;
	font-size: clamp(20px, 3vw, 44px);
	font-family: var(--FontGoth);
    font-weight: 900;	
}
.character-datail .char-name2-text::after{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke: 4px #ffffff;
    color: #000000;	
}
.character-datail .char-belong{
	position: relative;
	display: block;
	line-height: 1em;
	font-size: clamp(20px, 3vw, 44px);
	font-family: var(--FontGoth);
    font-weight: 900;	
}
.character-datail .char-belong::after{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke: 4px #ffffff;
    color: #000000;	
}



				@media screen and (max-width: 768px){

						.character-datail .char-name,
						.character-datail .char-name2-text,
						.character-datail .char-belong {
						    position: relative;
						    display: inline-block;
						}

						.character-datail .char-name::after,
						.character-datail .char-name2-text::after,
						.character-datail .char-belong::after {
						    content: attr(data-text);
						    position: absolute;
						    

						    top: 0;
						    left: 50%;
						    transform: translateX(-50%);
						    
						    white-space: nowrap;
						    -webkit-text-stroke: 4px #ffffff;
						    color: #ffffff;
						    z-index: -1;
						}


				}



.character-datail .char-name2 .twolines{
	position: relative;
	display: block;
	line-height: 1em;
	font-size: clamp(20px, 3vw, 44px);
	font-family: var(--FontGoth);
    font-weight: 900;	
}
.character-datail .char-name2 .twolines::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-family: var(--FontGoth);
    font-weight: 900;
}
.character-datail .char-name2 .chara-name-small{
    display: block;
    font-size: clamp(16px, 2vw, 29px);
    margin-bottom: 10px;
    line-height: 1.8em;
}


.character-datail .char-text {
    display: block;
    color: #fff;
    font-size: clamp(9px, 1.2vw, 18px);
    margin: 3% 0 5%;
    text-shadow: 0px 0px 5px rgb(0 0 0), 0px 0px 10px rgb(0 0 0);
}
.character-datail.twolines .char-text {
	font-size: clamp(9px, 1.2vw, 18px);
    margin: 1% 0 2%;
}

			:lang(ja) .character-datail.twolines .char-text {
			    line-height: 1.8em;
			}

			:lang(en) .character-datail.twolines .char-text {
			    line-height: 1.5em;
			}

.character-datail .card-container{
    width: 80%;
    background-color: #00000087;
    border-radius: 7px;
    margin: 7% auto;
    padding: 6%;
    text-align: center;
}
.character-datail.twolines .card-container {
    margin: 4% auto;
}
.hystmodal__inner.black .character-datail .card-container {
    width: 80%;
    background-color: #00000087;
    border-radius: 7px;
    margin: 4% auto;
    padding: 4%;
    text-align: center;
}


		@media screen and (max-width: 768px){

			.hystmodal__inner.black .character-datail .char-name2 .chara-name-small {
			    display: block;
			    font-size: clamp(16px, 2vw, 29px);
			    margin-bottom: -3px;
			    line-height: 1.8em;
			}

			.hystmodal__inner.black .character-datail .card-container {
			        width: 72%;
			        background-color: #00000087;
			        border-radius: 7px;
			        margin: 0% auto;
			        padding: 3%;
			        text-align: center;
			}

		}


.character-datail .card-container img{
	width: 45%;
	max-width: 300px;
}

.character-img{
    position: absolute;
    top: 0px;
    right: -1%;
    width: 57%;
    aspect-ratio: 29 / 30;
    z-index: 0;
}

.character-img img{
	display: block;
	width: 100%;
}



.stroke {
    -webkit-text-stroke: 6px #ff0000;  /* フチの太さと色（赤） */   
    /* フチ（stroke）を文字の「後ろ」に回り込ませる */
    paint-order: stroke fill; 

    color: #ffffff;
    -webkit-text-stroke: 9px #000000;
    paint-order: stroke fill;
    font-size: 2.5em;
    font-weight: bold;         
}

/* スマホ（画面幅767px以下）の時の微調整 */
@media screen and (max-width: 767px) {
    .stroke {
        -webkit-text-stroke: 5px #000000; /* スマホは文字が潰れないように少し細めの5pxに */
    }
}





/* モーダルボタン ポインターに */
[data-hystmodal] {
  cursor: pointer;
}

.hystmodal {
    z-index: 1000 !important;
}

/* パソコン大画面時のサイズとレイアウト */
.hystmodal__window {
    width: 82vw;
    max-width: 990px;
    aspect-ratio: 31 / 18;
    background: #000;
    padding: 0;
    overflow: visible;
}
.hystmodal__window::after{
    content: "";
    position: absolute;
    top: -11px;
    left: -12px;
    width: 110%;
    height: 110%;
    aspect-ratio: 31 / 18;
    background-color: #000000;
    clip-path: polygon(0.5% 0.9%, 93.5% 0%, 92.5% 93.5%, 0% 95%);
    z-index: -5;
}


.hystmodal__inner{
	position: relative;
	width: 100%;
    aspect-ratio: 31 / 18;
    background-color: #ff0000;
    overflow: hidden;
    background-image: url(../images/character-bg-red.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}
.hystmodal__inner::before{
    content: "";
    position: absolute;
    top: -15%;
    left: -3%;
    width: 89%;
    height: 19%;
    background: #e38931;
    border: 8px solid #000000;
    transform: rotate(-8deg);
}
.hystmodal__inner::after{
    content: "";
    position: absolute;
    bottom: -9%;
    right: -9%;
    width: 44%;
    height: 10%;
    background: #e38931;
    border: 8px solid #000000;
    transform: rotate(-6deg);
}

#modal-mp4 .hystmodal__inner::before{
	display: none;;
}
#modal-mp4 .hystmodal__inner::after{
	display: none;
}
#modal-mp4 .hystmodal__inner{
    aspect-ratio: 16 / 9;
}



.hystmodal__inner.red{
    background-image: url(../images/character-bg-red.jpg);	
}
.hystmodal__inner.blue{
    background-image: url(../images/character-bg-blue.jpg);	
}
.hystmodal__inner.black{
    background-image: url(../images/character-bg-black.jpg);	
}
.hystmodal__inner.independent{
    background-image: url(../images/character-bg-independent.jpg);	
}
.hystmodal__inner.yellow{
    background-image: url(../images/character-bg-yellow.jpg);	
}





#modal-youtube .hystmodal__inner{
	aspect-ratio: 16 / 9;
    background-image: none;
    background-color: #000;
}

#modal-youtube .hystmodal__inner::before,
#modal-youtube .hystmodal__inner::after{
display:none;
}









.modal-content.flex {
	/*flex-direction: row-reverse;*/
}


/* pc時閉じボタン */
.hystmodal__close {
  position: absolute;
  top: -56px;
  right: 0;
  width: 35px;
  height: 35px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999;
}
.hystmodal__close::before,
.hystmodal__close::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 5px;
    width: 25px;
    height: 2px;
    background: #fff;
}
.hystmodal__close::before { transform: rotate(45deg); }
.hystmodal__close::after { transform: rotate(-45deg); }


.hystmodal__close{ 
    background-color: #00000061;
    padding: 15px;
}




.modal-nav {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 100;
}

.modal-nav .btn-prev {
	position: absolute;
    top: 50%;
    left: -55px;
    width: 10px;
    height: 10px;
    z-index: 100;
    background-color: #ffffff17;
    padding: 19px;
    border-radius: 50%;
    cursor: pointer;
}
.modal-nav .btn-prev::after {
	content: "←";
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}
.modal-nav .btn-next {
	position: absolute;
    top: 50%;
    right: -55px;
    width: 10px;
    height: 10px;
    z-index: 100;
    background-color: #ffffff17;
    padding: 19px;
    border-radius: 50%;
    cursor: pointer;
}
.modal-nav .btn-next::after {
	content: "→";
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}






/* クラス1個のまま、!important */
.hystmodal .hystmodal__window .hystmodal__close,
[data-hystclose] {
    outline: 0;
}




















/* movie-Play-sequentially */





.video-container-wrapper{
	display: block;
	text-align: left;
	flex-direction: row-reverse;
}
.video-container {
	position: relative;
	width: 120%;
    aspect-ratio: 19 / 11;
    overflow: hidden;
	align-self: flex-end; 
    margin-left: auto;
}

.video-container video { 
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.video-v1 { z-index: 2; }
.video-v2 { z-index: 1; }
.hidden { display: none !important; }





		@media screen and (max-width: 768px) {

		    #modal-youtube .hystmodal__window {
		        width: 93vw;
		        max-width: 450px;
		        aspect-ratio: 16 / 9;
		        height: auto;
		    }
		    #modal-youtube .hystmodal__close {
		        top: -56px !important;
		        right: 10px !important;
		        background: rgba(0, 0, 0, 0.5) !important;
		        border-radius: 50%;
		    }
		    #modal-mp4 .hystmodal__window {
		        width: 93vw;
		        max-width: 450px;
		        aspect-ratio: 16 / 9;
		        height: auto;
		    }
		    #modal-mp4 .hystmodal__close {
		        top: -56px !important;
		        right: 10px !important;
		        background: rgba(0, 0, 0, 0.5) !important;
		        border-radius: 50%;
		    }
			.hystmodal__inner::before {
			    content: "";
			    position: absolute;
			    top: -19%;
			    left: -8%;
			    width: 89%;
			    height: 19%;
			    background: #e38931;
			    border: 8px solid #000000;
			    transform: rotate(-8deg);
			}
			.hystmodal__inner::after {
			    content: "";
			    position: absolute;
			    bottom: -12%;
			    right: -3%;
			    width: 71%;
			    height: 10%;
			    background: #e38931;
			    border: 8px solid #000000;
			    transform: rotate(-6deg);
			}
			.character-inner a {
		        width: 37%;
		        display: inline-block;
		        border-radius: 50%;
		        margin: 0 auto 14px;
		        margin-right: 5%;
		        box-sizing: border-box;
			}
		    .character-inner a#chara1 {
		        width: 37%;
		        display: block;
		        margin: 0 auto;
		        justify-content: center;
		    }

			.hystmodal__window {
			    width: 93vw;
			    max-width: 990px;
			    aspect-ratio: 12 / 18;
			    background: #000;
			    padding: 0;
			    overflow: visible;
			    overflow-x: visible;
			    overflow-y: visible;
			}

			.hystmodal__window .flex {
				flex-direction: column-reverse;
			}

			.character-datail{
				width: 88%;
		        position: static;
		        transform: translate(0, 0);
		        margin: 0 auto;
		        text-align: center;
			}
			.character-img {
	            position: static;
	            width: 60%;
			}
		    .character-datail .char-name {
		        display: block;
		        line-height: .5em;
		        margin: 11px 0 10px;
		        font-size: clamp(20px, 3vw, 44px);
		    }
		    .character-datail .char-text,
		    .character-datail.twolines .char-text{
		        font-size: clamp(9px, 3vw, 18px);
		        margin: 1% 0 2%;
		        text-align: left;
		    }
			.character-datail .card-container {
				width: 88%;
		        margin: 0% auto;
		        padding: 3%;
			}
			.character-datail .card-container img {
			    width: 34%;
			    max-width: 300px;
			}

			.hystmodal__close {
			top: 10px !important;
			right: 10px !important;
			background: rgba(0, 0, 0, 0.5) !important;
			border-radius: 50%;
			}
		    .hystmodal__inner {
		        position: relative;
		        width: 92vw;
		        aspect-ratio: 12 / 18;
		        overflow: hidden;
		        background-image: url(../images/character-bg-red.jpg);
		        background-repeat: no-repeat;
		        background-position: left 84% center;
		        background-size: cover;
		    }


		    .character-datail.twolines {
		        padding: 0;
		        width: 95%;
		        text-align: center;
		    }






								@media screen and (max-width: 768px){
													
									.hystmodal__inner {
									    display: flex;
									    flex-direction: column;
									    justify-content: center;
									}

									.character-datail .card-container {
										width: 68%;
								        margin: 0% auto;
								        padding: 3%;
									}

								}








		  .video-container {
		    width: 100%;
		    height: auto !important;
		    aspect-ratio: 19 / 11;
		    flex-shrink: 0; /* 縦が狭くなっても動画が潰されないように */
		  }

		  /* キャラクター詳細エリアをスマホ用に可変スクロール化 */
		  .character-datail {
		    flex-grow: 1;        /* 残りの高さをすべてこのエリアに割り振る */
		    overflow-y: auto;    /* ★重要：説明文が長くなったら、この中だけで綺麗にスクロールさせる */
		    padding: 20px;
		    padding-top: 0;
		    -webkit-overflow-scrolling: touch; /* iPhoneのスクロールを滑らかにするおまじない */
		  }


		}













/* パーツ全体の枠（位置調整用） */
.scroll-video-block {
    width: 100%;
    display: flex;
    justify-content: center; /* ひとまず画面の中央に配置 */
    margin: 40px 0;          /* 上下の余白 */
}

/* 動画コンテナ：ここでサイズ（58%）を指定 */
.scroll-video-container {
    position: relative;      /* 中の動画を重ねるための基準点 */
    width: 58%;
    max-width: 800px;        /* 大きくなりすぎないための制限（お好みで） */
    aspect-ratio: 16 / 9;    /* 動画の16:9比率を保つ */
    overflow: hidden;        /* はみ出し防止 */
}

/* 中のvideoタグ：2枚を完全に同じ位置に重ねる */
.scroll-video-container video {
    position: absolute;      /* 絶対配置で2枚を重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;     /* 比率を崩さずに枠内に収める */
}

/* レイヤの上下関係（1本目を上、2本目を下に） */
.video-v1 { z-index: 2; }
.video-v2 { z-index: 1; }

/* 1本目が終わった時に消すためのクラス */
.hidden { display: none !important; }


small.notes-image{
	color: #ccc;
	text-align: center;
	display: block;
}