@charset "utf-8";

	.description {
	    box-shadow: 0 0.4em 0 0 #000, 0 0 0 0 rgba(0, 0, 0, .2);
	}

	.description-incline p {
	    font-weight: normal;
	    text-align: left;
	    font-size: 1.1em;
	    color: #ffee00;
	    line-height: 1.9em;
	}

	.introduction-box .txt h2{
		font-size: 1.4em;
		font-weight:bolder;
		color: #ffe200;
	}
	.introduction-box .txt p{
		font-weight:bold;
		color: #f1f1f1;
	}
	.cardlist h2 {
		opacity: 0.8;

    	background: url(../../assets/images/cardlist-title-k.png) center center no-repeat;

	}
	.btn-style {
    background-color: #86cf10;
    box-shadow: 0 0 0 1px #fffefc inset, 0.2em 0.2em 0 0 rgb(0 0 0 / 30%);
	}
	.btn-style:hover{
		background-color: #9ddd36;
		transition: .2s;
		box-shadow: 0 0 0 1px #ffffff inset, 0.2em 0.2em 0 0 rgb(0 0 0 / 30%);
	}
	.main-visual::after {
    box-shadow: 0 0 4em 0 #432406;
	}


	/*----------add--modify----------*/

	header {
	    z-index: 20;
	}

	.description {
	    transform: skewY(0deg);
	    padding: 2em 0;
	}
	.description > * {
	    transform: skewY(0deg);
	}

	.description-incline {
	    width: 850px;
	    padding: 0em 10px;
	}
	.description-incline img {
	    max-width: 100%;
	}
	.description-incline p {
	    color: #000;
	    font-weight: bolder;
	    font-size: 1.1em;
	}

	main::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 200px;
	    background-color: #000000;
	    z-index: 1;
    }
	.information::before {
	    content: "";
	    position: absolute;
	    bottom: -182px;
	    left: 0;
	    width: 100%;
	    height: 200px;
	    background-color: #0e0e0e;
	    z-index: 0;
	}
	.introduction {
	    padding: 5em 0 8em;
	}
	.introduction::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../images/introduction-bk_ex.jpg);
		background-size: cover;
		background-position: center;
		z-index: 0;
	}



	/*--------------introduction-set-----------*/

    .fade-in {
        opacity: 0;
        transform: translateY(50px);
    }

	.fade-in.even{
	    background-color: #00000080;
	    border: 1px solid #ccc;
	    border-width: 1px 0;
	    padding: 50px 0;
	}

	main .introduction > * {
	    position: static;
	}

	.introduction > section.introduction-set{
		margin: 0 auto;
		padding-top: 0px;
	}
	section.introduction-set.first{
		margin: 6px auto 0;
	}
	section.introduction-set::before,
	.section_movie::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
    	background-image: linear-gradient(360deg, rgba(0, 0, 0, 0), rgb(255 255 255 / 40%));
		z-index: -1;
	}
	section.introduction-set::after, .section_movie::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 4px;
	    background-image: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(201 226 233) 20% 20%, rgb(136 189 217) 50%, rgb(201 226 233) 80%, rgb(255 255 255) 100%);
	    z-index: 1;
	}

	section.introduction-set:first-child{

	}
	section.introduction-set div.wrap-cards-img{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: top 0px center;
	}

	section.introduction-set h2.hw-setnum-1,
	section.introduction-set h2.hw-setnum-2,
	section.introduction-set h2.hw-setnum-3,
	section.introduction-set h2.hw-setnum-4,
	section.introduction-set h2.hw-setnum-5,
	section.introduction-set h2.hw-setnum-6,
	section.introduction-set h2.hw-setnum-7,
	section.introduction-set h2.hw-setnum-8 {
	    width: 100%;
	    padding-top: 70px;
	    background-repeat: no-repeat;
	    background-position: center top;
	    background-size: 830px auto;
	}

	section.introduction-set h2.hw-setnum-1{ background-image: url(../images/introduction_1_hw.png); padding-top: 132px;}
	section.introduction-set h2.hw-setnum-2{ background-image: url(../images/introduction_2_hw.png);}
	section.introduction-set h2.hw-setnum-3{ background-image: url(../images/introduction_3_hw.png);}
	section.introduction-set h2.hw-setnum-4{ background-image: url(../images/introduction_4_hw.png);}
	section.introduction-set h2.hw-setnum-5{ background-image: url(../images/introduction_5_hw.png);}
	section.introduction-set h2.hw-setnum-6{ background-image: url(../images/introduction_6_hw.png);}
	section.introduction-set h2.hw-setnum-7{ background-image: url(../images/introduction_7_hw.png); padding-top: 195px;}
	section.introduction-set h2.hw-setnum-8{ background-image: url(../images/introduction_8_hw.png);}

	section.introduction-set div.wrap-cards-img.setnum-1{ background-image: url(../images/cards-1.png);	height: 705px;}	
	section.introduction-set div.wrap-cards-img.setnum-2{ background-image: url(../images/cards-2.png);	height: 802px;}
	section.introduction-set div.wrap-cards-img.setnum-3{ background-image: url(../images/cards-3.png);	height: 688px;}
	section.introduction-set div.wrap-cards-img.setnum-4{ background-image: url(../images/cards-4.png);	height: 853px;}
	section.introduction-set div.wrap-cards-img.setnum-5{ background-image: url(../images/cards-5.png);	height: 705px;}
	section.introduction-set div.wrap-cards-img.setnum-6{ background-image: url(../images/cards-6.png);	height: 377px;}
	section.introduction-set div.wrap-cards-img.setnum-7{ background-image: url(../images/cards-7.png);	height: 410px;}
	section.introduction-set div.wrap-cards-img.setnum-8{ background-image: url(../images/cards-8.png);	height: 433px;}



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

			section.introduction-set h2.hw-setnum-1,
			section.introduction-set h2.hw-setnum-2,
			section.introduction-set h2.hw-setnum-3,
			section.introduction-set h2.hw-setnum-4,
			section.introduction-set h2.hw-setnum-5,
			section.introduction-set h2.hw-setnum-6,
			section.introduction-set h2.hw-setnum-7,
			section.introduction-set h2.hw-setnum-8{
			    width: 100%;
			    /*max-width: 830px;*/
			    padding-top: 10%;
			    background-repeat: no-repeat;
			    background-position: center top;
			    background-size: 89% auto;
			}

			section.introduction-set div.wrap-cards-img{
		        background-size: auto 98%;
		        background-position: center 123%;
			}

			section.introduction-set div.wrap-cards-img.setnum-1{
		        height: 0px;
		        padding-top: 70%;
		    }
			section.introduction-set div.wrap-cards-img.setnum-2{
				height: 0px;
				padding-top: 87%;
			}
			section.introduction-set div.wrap-cards-img.setnum-3{
				height: 0px;
		        padding-top: 68%;
			}
			section.introduction-set div.wrap-cards-img.setnum-4{
				height: 0px;
		        padding-top: 86%;
			}
			section.introduction-set div.wrap-cards-img.setnum-5{
				height: 0px;
		        padding-top: 74%;
			}
			section.introduction-set div.wrap-cards-img.setnum-6{
				height: 0px;
				padding-top: 39%;
			}
			section.introduction-set div.wrap-cards-img.setnum-7{
				height: 0px;
				padding-top: 50%;
			}
			section.introduction-set div.wrap-cards-img.setnum-8{
				height: 0px;
				padding-top: 50%;
			}


				/*2行*/
				section.introduction-set h2.hw-setnum-1
				{
				    padding-top: 15.5%;
				}

								
				section.introduction-set h2.hw-setnum-5
				{
				    /*padding-top: 20.5%;*/
				}
				section.introduction-set h2.hw-setnum-7
				{
				    padding-top: 23.5%;
				}
				

			}




	section.introduction-set h2,
	section.introduction-set p{
	    width: 95%;
	    margin: 1em auto 0.5em;
	}
	section.introduction-set h2{
		padding-top: 43px;
		margin: 0 auto;
	}
	section.introduction-set p,
	.section_movie h3{
	    font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	    font-size: 1.2em;
	    font-weight: bold;
	    color: #fff;
	    /*text-shadow: 0px 0px 5px rgb(255 255 255 / 100%);*/
	}


	/*-----section_movie-----*/

	.escape-intro-relative{
		position: relative;
	}

	.section_movie {
		position: static;
	    width: 100%;
	    margin: 80px 0 0;
	    color: #fff;
	    /*background-color: #000000ba;*/
	}
	.section_movie h3 {
	    font-weight: bold;
	    font-size: 1.8em;
	    margin: 0 auto;
	    padding: 50px 0 43px;
	    color: #ffe042;
	}

	.sec-movie-flex{
		display: flex;
	    width: 100%;
	    max-width: 1000px;
	    margin: 0 auto;
	    padding: 0 0 60px;
	}
	a.youtube {
    	display: block;
    	width: 100%;
    	max-width: 480px;
	}
	.coveriframe {
	    position: relative;
	    width: 100%;
	    padding-top: 56.25%;
	}
	.coveriframe::before {
	    content: "";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    border: 3px solid rgb(0 0 0 / 25%);
	    border-radius: 7px;
	    box-sizing: border-box;
	    z-index: 101;
	}
	.coveriframe:hover::before {
	    content: "";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    border: 3px solid rgb(215 169 0 / 100%);
	    border-radius: 7px;
	    box-sizing: border-box;
	    z-index: 101;
	}
	.coveriframe iframe {
	    position: absolute;
	    display: block;
	    width: 100%;
	    aspect-ratio: 16 / 9;
	    top: 0;
	    left: 0;
	    z-index: 100;
	    border-radius: 7px;
	}


			@media screen and (max-width: 1000px){
					.sec-movie-flex {
					    display: block;
					    width: 90%;
					    padding: 0;
					}
					a.youtube:first-child{
						margin-bottom: 30px;
					}
					section.introduction-set .adjs-left-center{
						display: flex;
						justify-content: center;

					}
					section.introduction-set .adjs-left-center p{
						text-align: left;
						width: 95%;
						margin-top: 0;
						padding-top: 0;
					}
					section.introduction-set .adjs-left-center p.mt1em {
					    margin-top: 1em;
					}
					.pcbr{
						display: none;
					}
			}

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

				    .description {
				        transform: skewY(0);
				        padding: 2em 1em 1em;
				    }
					section.introduction-set {
					    margin: 19px auto;
					}

					section.introduction-set p, .section_movie h3 {
					    font-size: 1em;
					}
					.cardlist h2 {
					    background-size: 220%;
					}
					section.introduction-set p{
						text-align: left;
						padding: 10px 15px 0;
				        box-sizing: border-box;
				        font-size: 1.1em;
					}
					.section_movie {
					    margin: 45px 0 0;
					}
				    .section_movie h3 {
				        font-size: 1.4em;
				    }

			}


			/*--------------bonuscard-------------*/



			.bonuscard{
				margin: 27px auto 0;
				max-width: 900px;
			}
			section.introduction-set .bonuscard h2{
				font-size: 1.4em;
				color: #fff700;
				padding-top: 0;
			}
			.bonuscard h2 img{
				filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));

			}
			section.introduction-set .bonuscard p{
				color:#fff;
				font-size: 1.2em;
				text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
			    width: 95%;
			    margin: 1em auto;
			}


			.bonuscard figure{
				max-width: 700px;
			}

			.bonuscard figure img{
				    margin: 0px 6px 12px;
			}


			.related-link::before {
			    content: "デュエルフィールド［PDF(A4サイズ)］";
			}

			.related-link img{
				border:1px solid #3a3a3a;
				box-sizing:border-box;
				border-radius:0.3em;
				width: 100%;			
				max-width:354px;
			}
			.related-link a.half-bk-none img:hover,
			.related-link a.fullwidth img:hover{
				border:1px solid #3a3a3a;
			}
			.related-link a.half-bk-none,
			.related-link a.fullwidth{
				background:none;
				width: 100%;
			}
			.related-link a.fullwidth{
				width:60%;
				margin-top:10px;	
			}
			.related-link a.fullwidth img {
				width:100%;
			}

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

						section.introduction-set .bonuscard p {
						    font-size: 1.1em;
						}
						.spbr{
							display:none;
						}
						.bonuscard h2 img {
						    max-width: 68%;
						}
						.bonuscard figure img{
							margin: 0px 3px 6px;
						}
						.bonuscard figure a img {
							max-width: 28%;
						}

				}








	/*-----section_movie-----*/



	main .introduction > * ,
	main .introduction > .escape-intro-relative{
		position: relative;
	}

	.escape-intro-relative .section_movie {
		position: static;
	    width: 100%;
	    margin: 0 0 0;
	    color: #fff;
  		background-image: linear-gradient(0deg, rgba(233, 233, 233, 0), rgb(0 0 0));
	}
	.section_movie h3 {
	    font-weight: bold;
	    font-size: 1.8em;
	    margin: 0 auto;
	    padding: 50px 0 43px;
	    color: #ffe042;
	}

	.sec-movie-flex{
		display: flex;
	    width: 100%;
	    max-width: 1000px;
	    margin: 0 auto;
	    padding: 0 0 60px;
	}
	a.youtube {
    	display: block;
    	width: 100%;
    	max-width: 640px;
	}
	.coveriframe {
	    position: relative;
	    width: 100%;
	    padding-top: 56.25%;
	}
	.coveriframe::before {
	    content: "";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    border: 3px solid rgb(0 0 0 / 25%);
	    border-radius: 7px;
	    box-sizing: border-box;
	    z-index: 101;
	}
	.coveriframe:hover::before {
	    content: "";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    border: 3px solid rgb(215 169 0 / 100%);
	    border-radius: 7px;
	    box-sizing: border-box;
	    z-index: 101;
	}
	.coveriframe iframe {
	    position: absolute;
	    display: block;
	    width: 100%;
	    aspect-ratio: 16 / 9;
	    top: 0;
	    left: 0;
	    z-index: 100;
	    border-radius: 7px;
	}
	.section_movie::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 2px;
	    background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 162, 0, 1) 22%, rgba(255, 198, 0, 1) 43%, rgba(255, 220, 98, 1) 54% 60%, rgba(255, 198, 0, 1) 72%, rgba(255, 162, 0, 1) 83%, rgba(34, 21, 0, 1));
	    z-index: 1;
	}

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

					.section_movie {
					    margin: 45px 0 0;
					}
				    .section_movie h3 {
				        font-size: 1.4em;
				    }
					.sec-movie-flex {
					    width: 96%;
					    padding: 0px 0 10px;
					}

			}