@charset "utf-8";

/*--------swiper-------*/

.swiper{
    width: 100%;
    max-width: 1400px;
    height: 534px;
    margin: 0 auto;
    padding-top: 40px;
    overflow-x: hidden;
    z-index: 5000;
}
	
.swiper-wrapper {
  transition-timing-function: ease-in;
}

.swiper-slide {
		position: relative;
	  width: 525px;
	  text-align: center;
	  transform: scale(.8);
  	filter: brightness(50%) contrast(120%) ;
	  transition: transform .7s, filter .7s;
    }

/*読み込み時に始めのactiveが動いてしまうのを消すクラス（読み込み後スグに消す。）*/    

.swiper-slide.first {
		transform: scale(1);
  	filter: brightness(100%) contrast(100%);
    transition: transform -1s, filter -1s;
}

.swiper-slide[class*=-active] {
	transform: scale(1);
  filter: brightness(100%) contrast(100%) ;
}
.swiper-slide[class*=-prev] {
	transform: scale(.8);
  filter: brightness(50%) contrast(120%) ;
}
.swiper-slide[class*=-next] {
	transform: scale(.8);
  filter: brightness(50%) contrast(120%) ;
}

.swiper-slide-duplicate,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
  transform: scale(.8);
  filter: brightness(50%) contrast(120%) ;
}

	.swiper-slide img.content-logo{
		position: absolute;
		bottom: -17.4%;
		left: 50%;
		transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	}

@keyframes slide1 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(-100%);
  }
}


.swiper-slide img {
  height: auto;
  width: 100%;
  max-width: 100%;
}

.swiper-pagination {
	display: none;
}


.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px);
    background-color: #ff7f12;
    width: 15px;
    height: 15px;
    margin: 0 10px;
}

.swiper-button-next,
.swiper-button-prev {
    z-index: 10000;
}

.swiper-button-next:after {
    content: '→';
}
.swiper-button-prev:after {
    content: '←';
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: 'slick';
    font-size: 30px;
    line-height: 1;
    opacity: .5;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

	.swiper::before{
			content: "";
	    display: block;
	    position: absolute;
	    top: -40px;
	    left: 0;
	    width: 140px;
	    height: 740px;
	    background: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
	    z-index: 1000;
	}
	.swiper::after{
			content: "";
	    display: block;
	    position: absolute;
	    top: -40px;
	    right: 0;
	    width: 140px;
	    height: 740px;
	    background: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
	    z-index: 1000;
	}

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

				.swiper::before{
				display: none;
			}
				.swiper::after{
				display: none;
			}

		}

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


						.swiper-slide.first {
								transform: scale(1.1);
						  	filter: brightness(100%) contrast(100%);
						    transition: transform -1s, filter -1s;
						}

						.swiper-slide[class*=-active] {
							transform: scale(1.1);
						  filter: brightness(100%) contrast(100%) ;
						}

					.swiper {
		    		height: auto;
		    		margin: 0 auto;
		    		padding-top: 0;
						}
					.swiper-wrapper {
    				margin: 31px 0 127px;
						}
				  .swiper-slide {
					  width: 100%;
				    }
					.swiper-slide img.content-logo {
						bottom: -32%;
						}
						.quicklink {
						margin: -4px auto 0.4em;
						}

			}


		@media screen and (max-width: 767px){
					.swiper-wrapper {
    				margin: 40px 0 15%;
						}
						.swiper-horizontal>.swiper-pagination-bullets,
						.swiper-pagination-bullets.swiper-pagination-horizontal,
						.swiper-pagination-custom,
						.swiper-pagination-fraction {
				    top: 97%;
						}
						.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
						.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
						    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px);
						    background-color: #ff7f12;
						    width: 9px;
						    height: 9px;
						    margin: 0 10px;
						}
			}

		@media screen and (max-width: 640px){
					.swiper-wrapper {
    				margin: 36px 0 14%;
						}
						.swiper-horizontal>.swiper-pagination-bullets,
						.swiper-pagination-bullets.swiper-pagination-horizontal,
						.swiper-pagination-custom,
						.swiper-pagination-fraction {
				    top: 97%;
						}
						.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
						.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
						    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px);
						    background-color: #ff7f12;
						    width: 9px;
						    height: 9px;
						    margin: 0 10px;
						}
			}

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

	.bg-loop1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: hidden;
    display: flex;
    mix-blend-mode: screen;
    /*filter: brightness(140%);*/
	}

	.bg-loop2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: hidden;
    display: flex;
    mix-blend-mode: screen;
    /*filter: brightness(110%);*/
	}



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


	header {
	    background-color: #000;
    	/*height: 700px;*/
	}

	header > h1 {
	    padding-top:0;
	}


	.top-header-bg-2{
	    position: absolute;
	    top: 52%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    width: 100%;
	    height: 740px;
	    max-width: 1500px;
		background: repeating-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5) 1px,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px);
	    z-index: 360;
	    opacity: 0.5;
	    mix-blend-mode: overlay;
	}

	#mycanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 256 / 175;
    max-width: 1024px;
    height: 645px;
    /* padding-top: 700px; */
    mix-blend-mode: screen;
    z-index: 350;
    opacity: 1;
	}
	.adjust-ef{
		opacity: 0.1;
	}

	.slick-next, .slick-prev {
	    width: 30px;
	    height: 30px;
	    z-index: 1000;
	}

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

			.bg-loop1 img,
			.bg-loop2 img{
		    max-width: 160%;
			}

			#mycanvas {
				max-width: 100%;
				max-height: 70%;
			}

		}


/*2023 クイックリンク追加*/


		main {
		    margin-top: -13px;
		}

		.quicklink{
			display: flex;
			overflow-x: scroll;
			/*-webkit-overflow-scrolling: touch;*/
			white-space: nowrap;
			padding: 0.7em 0.5em 0.9em;
			margin:0.4em auto;
			--sb-track-color: #232E33;
			--sb-thumb-color: #f3994c;
			--sb-size: 6px;
			scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
		}

			.quicklink::-webkit-scrollbar {
			 width: var(--sb-size);
			 height: var(--sb-size);
			}
			.quicklink::-webkit-scrollbar-track {
			 background: var(--sb-track-color);
			 border-radius: 4px;
			}
			.quicklink::-webkit-scrollbar-thumb {
			 background: var(--sb-thumb-color);
			 border-radius: 4px;
			}

		.quicklink li{
			position: relative;
		    background-color: #000000;
    		border: 1px solid #d18c17;
		    color: white;
		    font-size: 0.7em;
		    padding: 0.6em 1em;
		    border-radius: 0.6em;
		    text-align: center;
		    flex-grow: 1;
		}

		.quicklink li.ctg-a{
			border: 2px solid #9b5000;
    	background-color: #4b2800;
		}
		.quicklink li.ctg-b{
	    border: 2px solid #0150a3;
    	background-color: #00205b;
		}
		.quicklink li.ctg-c{
			border: 2px solid #830202;
    	background-color: #4f1200;
		}

		.quicklink li:hover{
		    background-color: #fb7d10;
		    transition: .5s;
		}
		.quicklink li.ctg-a:hover{
		    background-color: #fb7d10;
		}
		.quicklink li.ctg-b:hover{
		    background-color: #004ac9;
		}
		.quicklink li.ctg-c:hover{
		    background-color: #d10700;
		}

		.quicklink li.attention{
			padding-left: 2.2em;
		}
		.quicklink li.attention::before{
			content: "!";
			position: absolute;
			top: 48%;
	        left: 7%;
	        transform: translate(-50%, -50%);
	        -webkit-transform: translate(-50%, -50%);
	        -ms-transform: translate(-50%, -50%);
			width: 1.5em;
			height: 1.5em;
			background-color: #ff0000;
			border-radius: 8px;
			color: #fff;
			font-weight: bold;
		}

		.quicklink li.new{
			padding-left: 43px;
		}
		.quicklink li.new::before{
			content: "NEW";
		    position: absolute;
		    top: 48%;
		    left: 19px;
		    transform: translate(-50%, -50%);
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		    width: 3.2em;
		    height: 1.5em;
		    background-color: #0051b5;
		    border-radius: 2px;
		    color: #fff;
		    font-weight: bold;
		}

		.quicklink li.hajimete {
			padding-left: 26px;
		}

		.quicklink li.hajimete::before {
		    content: "";
		    position: absolute;
		    width: 14px;
		    height: 19px;
		    top: 49%;
		    left: 19px;
		    transform: translate(-50%, -50%);
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		    background: url(/yugioh/rushduel/images/common/icon-hajimete.png) no-repeat top center;
		    background-size: 100%;
		}
		

		.quicklink li a{
			color:white;
			font-weight:bold;
			text-decoration:none;
		}
		
		.quicklink > li:not(:last-child) {
			margin-right: 5px;
		}


		.quicklink li.hajimete: :before{
			font-family: 'Noto Sans JP', sans-serif;
			font-size: 14px;
			content: "NEW";
		    position: absolute;
		    top: 48%;
		    left: 19px;
		    transform: translate(-50%, -50%);
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		    width: 3.2em;
		    height: 1.5em;
		    background-color: #0051b5;
		    border-radius: 2px;
		    color: #fff;
		    font-weight: bold;
		}


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

		.quicklink {
			flex-wrap: wrap;
		    overflow-x: hidden;
		    overflow-y: hidden;
		    padding: 0 8px 6px;
		    max-width: 980px;
		    max-height: 2.3em;
		    justify-content: center;
		    align-items: center;
		    margin: 2px auto;
		    box-sizing: border-box;
		}
		.quicklink li{
			margin-bottom:0.4em;
		}
		.quicklink li.attention::before {
		    left: 9%;
		}
		.quicklink li.new{
			padding-left: 53px;
		}
		.quicklink li.new::before{
		    left: 25px;
		}

	}

	@media screen and (max-width: 768px) {
		.quicklink li.hajimete::before {
		    left: 14px;
		}
	}
		

/*2021 メガプロモ*/

	.megapromo{
		background: linear-gradient(to bottom, rgba(255,88,0,0.8) 0%,rgba(255,160,0,0.8) 100%),
		url(/yugioh/rushduel/images/common/background-b.png) center;
		padding: 1em .5em .5em;
		text-align: center;
		border-top: .8em solid #000;
		border-bottom: .8em solid #000;
		box-shadow: 0 .3em 0 0 rgba(0,0,0,.2) inset , 0 -.3em 0 0 rgba(0,0,0,.2) inset 
	}
	.megapromo > h4{
		background: rgba(0,0,0,.2);
		max-width: 800px;
		display: inline-block;
		margin: auto auto 1em;
	}
	.megapromo > div{
		max-width: 450px;
		width: 60%;
		background: #000;
		margin: auto .5em;
		box-shadow: .2em .2em 0 0 rgba(0,0,0,.3);
		display: inline-block;
		padding: .5em;
		color: #ddd;
	}
		.megapromo > div a{
			width: 100%;
			display: block;
			box-shadow: 0 0 0 2px #ffa000;
			margin-bottom: .7em;
		}
		.megapromo > div span{
			display: inline-block;
			background: #333;
			font-weight: bold;
			padding: .2em 2em .1em;
			font-size: .8em;
			border-radius: 1em;
		}
		.megapromo > div a:hover{
			box-shadow: 0 0 0 3px #fff;
			transition: .2s;
		}
		.megapromo > div img{
			width: 100%;
			
		}
@media screen and (max-width:767px){
	.megapromo > div {
    	width: 97%;
    	margin: auto;
	}
	.megapromo > ul , .megapromo > table{
		width: 100%;
		margin: auto auto 1em;
	}
}

/*2022 メガプロモ*/

<style type="text/css">
		.special-sbd{
			background: url(/yugioh/rushduel/products/battledeck/images/header-bk.png);
			text-align: center;
			padding: 1.4em 1em 1em;
			box-shadow: 0 -6em 2em -2em #000 inset ,  0 6em 2em -2em #000 inset;
		}
		.btn-style.w_auto{
			width: auto;
		    margin-top: 20px;
		    background-color: #fb7d10;
		    padding: 0.7em 2em 0.55em;
		}

		@media screen and (min-width: 1340px){
				.special-sbd{
				/*padding: 0 1em 1em;*/
			}
		}


			.special-sbd > *{
				max-width: 980px;
			    margin: auto;
			    background: transparent;
			    border-width: 0;
			}
			.special-sbd p{
				padding-top: 94px;
			    overflow: hidden;
			    height: 0;
			    background: url(/yugioh/rushduel/products/battledeck2022/images/text-date.png) no-repeat center center;
			    background-size: auto 100%;
			}
			.special-sbd h3{
				font-size: 1.1em;
				background: rgba(255,255,255,.1);
				padding: .3em 0 .2em;
				margin-bottom: 1em;
				color: #fff;
			}
				.special-sbd h3 span{
					display: inline-block;
					font-weight: bold;
				}
		ul.sp-cm {
			padding: 1.5em 0 2em;
			margin: auto;
		}
			ul.sp-cm li{
				width: 50%;
				padding: 0 2%;
			}
			ul.sp-cm a{
				width: 100%;
				display: block;
				box-shadow: 0 0 0 2px #ffa000;
			}
			ul.sp-cm a:hover{
				box-shadow: 0 0 0 3px #fff;
				transition: .2s;
			}
			ul.sp-cm img{
				width: 100%;
			}


@media screen and (max-width:767px){
			.special-sbd{
				padding: 1em 0.5em 0;
			}
			.special-sbd p{
				padding-top: 10vw;
			}

}


/*2022 ルール動画*/

			section.box-movie-rule{
				width: 100%;
				padding: 15px 10px;
				background-color: #1a1a1a;
				text-align:center;
				text-align: -webkit-center;
			}
			section.box-movie-rule .movie-cheack{
			    width: 100%;
			    max-width: 1000px;
			    margin: 0 auto;
			    border-radius: 11px;
			    padding: 10px;
			    border: none;
			    box-shadow: none;
			    box-sizing: border-box;
			}
			section.box-movie-rule .movie-cheack ul.flex li{
				width: 28%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-direction: column;
			    padding: 0;
			    margin: 0 20px;
			}
			section.box-movie-rule .movie-cheack ul.flex li img.thumb{
				width: 100%;
    			max-width: 287px;
			}
			section.box-movie-rule .movie-cheack ul.flex li img.title{
			    width: 100%;
    			margin: 3% auto 5%;
    			max-width: 416px;
			}

			.movie-cheack > ul {
			    margin: auto;
			    max-width: 960px;
			    display: flex;
			    justify-content: center;
			}
			.movie-cheack > ul li {
			    padding: 1em 1.5em;
    			width: 40%;
			}
			.movie-cheack ul.flex li img.title{
				margin-top: 3%;
			}
			.movie-cheack h3 img {
				margin: 10px auto 13px;
			    max-width: 100%;
			}
			.movie-cheack h3 img.mt15 {
				margin-top: 15px;
    			margin-bottom: 0;
			}

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

				section.box-movie-rule .movie-cheack > ul {
				    flex-direction: column;
				}

				section.box-movie-rule .movie-cheack ul.flex li {
				    display: block;
				    width: 56%;
				    max-width: 300px;
				    margin: 4px auto 0;
				}

				section.box-movie-rule .movie-cheack ul.flex li img.thumb {
				    width: 100%;
				    max-width: 100%;
				    display: block;
				}

				section.box-movie-rule .movie-cheack ul.flex li img.title {
				    margin: 3% auto 7%;
    				width: 100%;
    				max-width: 418px;
				}

				.movie-cheack > ul {
				    flex-direction: column;
				    align-items: center;
				}
				.movie-cheack ul.flex li {
				    width: 63%;
				    max-width: 340px;
				}
				.movie-cheack h3 img {
			    	width: 54%;
    				max-width: 225px;
				}


			}


/*2023 0928 リンクス追加時*/


			.starter {
    			padding:0;
			}
			.starter > a {
    			margin: auto 1% 0.5em;
			}
			.starter.add230928 h2{
				margin-bottom: -2em;
			}

			.starter-add{
				background-color: #ccc;
				width: 95%;
				max-width: 900px;
				margin: 0 auto;
				background: rgba(255,255,255,.7);
    			box-shadow: 0 0 0 0.5em #000 inset, 0.2em 0.2em 0 0 rgba(0,0,0,.3);
			}
			.starter-add.mb{
				margin-bottom: 2em;
			}

			.starter-add a{
				width: 100%;
			    display: block;
			}

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

						 	.starter-add{
							width: 92%;
						}

					 }  

/*2023 1219 youtubeエリア追加*/

			.box-movie {
			    display: flex;
			    justify-content: space-between;
			    align-items: flex-start;
			    max-width: 905px;
			    margin: 40px auto 30px
			}
			.box-movie .leftcolumn {
				width: 50%;
				max-width: 430px;
		    border-radius: 2px;
		    margin: 0 5px;
			}
			.box-movie .rightcolumn {
		    width: 50%;
				max-width: 430px;
		    border-radius: 2px;
		    margin: 0 5px;
			}
			.box-movie .rightcolumn img.thumb {
				border-radius: 7px;
			}
			.box-movie .rightcolumn a {
				text-decoration: none;
				color: #fff;
				font-size: 80%;
			}
			.coveriframe{
				position: relative;
				padding-top: 56.25%;
			}
			.coveriframe::before{
				content: "";
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
		    border: 3px solid rgb(215 169 0 / 0%);
		    border-radius: 7px;
		    box-sizing: border-box;
			}
			.coveriframe:hover::before{
				transition: .4s;
		    border: 3px solid rgb(215 169 0 / 100%);
			}
			.coveriframe iframe{
				width: 100%;
				position: absolute;
				display: block;
				top: 0;
				left: 0;
				z-index: -100;
				aspect-ratio: 16 / 9;
				border-radius: 7px;
			}
			h4 img.hw-anime{
				width: 84%;
		    margin: 22px auto 0;
			}

			.set-rdtv{
				display: flex;
				align-items: center;
				margin-top: 22px;
			}
			.set-rdtv img{
		    width: 20%;
		    margin-right: 10px
			}
			.set-rdtv span{
				width: 89%;
		    display: block;
		    text-align: left;
		    font-size: 115%;
			}

					@media screen and (max-width: 767px) {
									.box-movie {
										flex-direction: column;
									}
									.box-movie .leftcolumn,
									.box-movie .rightcolumn
									{
								    width: 60%;
								    min-width: 320px;
								    margin: 0 auto;
									}
									.box-movie .leftcolumn {
								    margin-bottom:20px;
									}
									.set-rdtv span{
								    font-size: 110%;
									}
					}