@charset "utf-8";
/* ---------------------------------------------------
 Layout-Midium
--------------------------------------------------- */
@media only screen and (min-width:520px) and (max-width:959px){


	.br-mid{
		display: none;
	}
	.br-sp{
		display: none;
	}


	#top-mv{
		position: relative;
	}

	/*========= cookie- ===============*/
	.cookie-bloc{
		position: absolute;
		z-index: 1000;
	}
	.cookie-consent{
	}

	/*========= ヘッダーナビ ===============*/
	.header-nav{
		position: absolute;
		z-index: 20;
		top: 0;
		right: 0;
		left: auto;
		width: 100%;
		margin-right: 0;
	}
	.header-nav-container{
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: right;
	  margin: 0 auto;
	}
	.header-nav-container-item{
		font-family:'Special Elite', sans-serif;
		font-size: 1.2vw;
		color: #FFF;
		margin: 0 1%;
		padding-top: 2%;
		opacity: 1;
		transition: 1.0s ;
	}
	.header-nav-container-item:hover{
		opacity: 0.5;
	}
	.header-nav-container-item a{text-decoration: none; color:#fff ;}
	.header-nav-container-item a:link {text-decoration: none; color:#fff;}
	.header-nav-container-item a:visited{text-decoration: none; color:#fff;}
	.header-nav-container-item a:active{text-decoration: none;}

	.header-nav-container-lang{
		background: #674594;
		color: #fff;
		padding: 1.8% 1.5% 0.5% 1.5%;
			margin-left: 2%;
			width: 12%;
			font-family:'Special Elite', sans-serif;
			font-size: 1.3vw;
			text-align: center;
			opacity: 1;
			transition: 1.0s ;
	}


	.header-nav-container-lang:hover{
		opacity: 0.8;
	}
	.header-nav-container-lang a{text-decoration: none; color:#fff ;}
	.header-nav-container-lang a:link {text-decoration: none; color:#fff;}
	.header-nav-container-lang a:visited{text-decoration: none; color:#fff;}
	.header-nav-container-lang a:active{text-decoration: none;}

	.header-nav-el{
		width: 80%;
		padding-left: 15%;
	}
	/*========= sp 三本線 ===============*/
	.openbtn{
	  display: none;
	}
	#g-nav{
		display: none;
	}
	.sp-en{
		display: none;
	}
	/*--------------------------------------------------------
	  メインビジュアル
	--------------------------------------------------------*/
	.main_visual{
		}
	.main_back{
	}
	.v{
	  display: block;
	}
	.sp-v{
	  display: none;
	}

	.main_back img{
		width: 100%;
		object-fit: cover;
	}

	/*--------------------------------------------------------
	  セクションタイトル
	--------------------------------------------------------*/
	.gold_line {
	  height: 2px;
	  width: 100%;
	    background-image: linear-gradient(90deg, rgba(161, 136, 61, 1), rgba(219, 201, 134, 1) 39%, rgba(212, 182, 66, 1) 47%, rgba(81, 71, 21, 1));
	}
	.ttl_gold {
		font-size: 40px;
		font-family: "Special Elite", system-ui;
		font-weight: 400;
	  margin: 5px auto ;
		padding: 10px 30px 0px;
	  background-image: linear-gradient(90deg, rgba(161, 136, 61, 1), rgba(219, 201, 134, 1) 39%, rgba(212, 182, 66, 1) 47%, rgba(81, 71, 21, 1));
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;

	}
	.about_ttl{
		margin-top: 30px;
		display: inline-block;
	}
	.char_ttl{
		margin: 0 auto 60px;
		width: 300px;
		text-align: center;
	}
	.location_ttl{
		margin: 0 auto;
		width: 300px;
		text-align: center;
	}
	.location_ttl_block{
			width: 100%;
			background: rgb(11,6,96);
			background: linear-gradient(90deg, rgba(11,6,96,1) 10%, rgba(0,0,0,1) 50%, rgba(11,6,96,1) 90%);
			padding-top: 100px;
	}
	.gameplay_ttl{
		margin: 0 auto;
		width: 300px;
		text-align: center;
		padding-top: 100px;
	}

	/*--------------------------------------------------------
	  INFORMATION
	--------------------------------------------------------*/
	#info_area{
		width: 100%;
		background: #000;
		padding-bottom: 60px;
	}
	.info_ttl{
		font-size: 4.5vw;
	  font-family: "Roboto Condensed", sans-serif;
		text-align: center;
		color: #fff;
		font-weight: bold;
		padding-top: 40px;
	}
	.info_ttl_s{
		font-size: 2.4vw;
	  font-family: "Roboto Condensed", sans-serif;
		font-weight: bold;
		text-align: center;
		color: #000;
		background: #b30000;
		padding-top: 10px;
		padding-bottom: 8px;
		width: 26vw;
		margin: 5px auto;
	}
	/*コンテナ*/
	.info_container{
		max-width: 90%;
		margin: 30px auto;

		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
	}
	.info_item{
		width: 25%;
		border: solid 1px #fff;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: bold;
		letter-spacing: 0.01em;
	}
	.info_logo{
		width: 85%;
		margin: 0 auto;
	}
	.info_date{
		font-size: 2vw;
		text-align: center;
	}
	.info_btn{
		font-size: 2vw;
		text-align: center;
		background: #b30000;
		padding: 5px;
		width: 80%;
		margin: 20px auto 40px;
	}

	/*--------------------------------------------------------
	  TRAILER
	--------------------------------------------------------*/
	.trailer_ttl{
		font-size: 4.5vw;
		font-family: "Roboto Condensed", sans-serif;
		text-align: center;
		color: #fff;
		font-weight: bold;
		margin-bottom: 20px;
		padding-top: 40px;
	}

	.trailer_mv{
		background-image: url("../images/trailer-back.jpg");
		background-position: top;
	  background-repeat: no-repeat;
		height: auto;
	  background-size:100% auto;
	}
	.movie{
		width: 565px;
		height: 315px;
		margin: 0 auto;
	}
	#trailer_area{
		width: 100%;
		position: relative;
		height: 600px;
				pointer-events: none;
	}
	.trailer_bg{
		position: absolute;
		z-index: -100;
		opacity: 0.5;
			width: 100%;
	}
	.trailer_bg img{
		object-fit: cover;
		height: 600px;
		width: 100%;
	}
	.trailer_movie{
		position: absolute;
		top: 60px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
			z-index: -50;
			pointer-events: auto;
	}

	/*--------------------------------------------------------
	about
	--------------------------------------------------------*/
	#about_area{
		width: 100%;
		position: relative;
		height: 500px;
	}
	.about_bg{
		display: block;
		position: absolute;
		z-index: -100;
		width: 100%;
	}
	.about_bg img{
		object-fit: cover;
		height: 500px;
		width: 100%;
	}
	.about_bg-sp{
		display: none;
	}
	.about_txt{
		position: absolute;
		right: 5%;
		top: 5vh;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
	}
	.about_headline{
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		color: #674594;
		font-size: 30px;
		margin-top: 20px;
	}
	.about_body{
		color: #333;
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 30px;
	}
	/*--------------------------------------------------------
	about-img
	--------------------------------------------------------*/
	#about_img{
		width: 100%;
	}
	.about_pic{
		display: block;
		max-width:100%;
		margin: 60px auto;
	}
	.about_pic-sp{
		display: none;
	}

	/*--------------------------------------------------------
	about-2
	--------------------------------------------------------*/
	#about2_area{
	}
	.sec_about2{
		width: 100%;
	}
	/* -- 背景固定 --*/
	/*-- 親 --*/
	.fix-block{
	   position: relative;
   	height: 860px;
	}
	/*-- 画像 --*/
	.inner{
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   clip-path: inset(0);
		 z-index: -100;
	}
	.bg{
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100vw;
	   height: 110vh;
	   background-image: url("../images/about2-bg.jpg");
	   background-size: cover;
	   background-position: center;
	   z-index: -1;
	}
	/*-- コンテンツ --*/
	.contents{
		width: 100%;
		position: absolute;
		z-index: 10;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -50;
	}

	.container{
		width: 100%;
		display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  margin: 0 auto;
	}
	.about2-pic{
		width: 60%;
	}
	.about2-txt{
		width: 80%;
		margin-right: 0%;
		margin-left: 15%;

		font-size: 16px;
		line-height: 1.5em;
		margin-top: 10px;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		text-align: right;
	}
	.about2-headline{
		font-size: 30px;
		margin-bottom: 30px;
		margin-top: 40px;
		font-weight: 600;
	}
	.about2-bottom{
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: right;
		margin: 0 auto;
	}
	.about2-bottom-img{
		width: 30%;
		margin-top: 40px;
	}

	/*--------------------------------------------------------
	CHARACTER
	--------------------------------------------------------*/
	#char_area{
	}
	.sec_about2{
		width: 100%;
	}
	/* -- 背景固定 --*/
	/*-- 親 --*/
	.fix-block-char{
	   position: relative;
   		height: 780px;
	}
	/*-- 画像 --*/
	.inner{
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   clip-path: inset(0);
		 z-index: -100;
	}
	.char_bg{
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100vw;
	   height: 90vh;
	   background-image: url("../images/char-bg.jpg");
	   background-size: cover;
	   background-position: center;
	   z-index: -1;
	}
	/*-- コンテンツ --*/
	.contents{
		width: 100%;
		position: absolute;
		z-index: 10;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -50;
	}

	.char_container{
		width: 90%;
		display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: center;
	  margin: 0 auto;
	}
	.char_pic{
		width: 40%;
	}
	.char_txt{
		width: 50%;
		margin-right: 6%;
		margin-left: 4%;
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 0px;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		text-align: justify;
	}
	.char_pic-2{
		width: 40%;
	}
	.char_txt-2{
		width: 50%;
		margin-right: 6%;
		margin-left: 4%;

		font-size: 16px;
		line-height: 1.5em;
		margin-top: 0px;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		text-align: justify;
	}
	.char_headline{
		font-size: 32px;
		margin-bottom: 20px;
		margin-top: 0px;
		font-weight: 600;
	}
	.hr-char{
		width: 90%;
		height: 1px;
		background-color: #fff;
		border: none;
		color: #fff;
		margin: 60px auto;
	}

	/*--------------------------------------------------------
	location
	--------------------------------------------------------*/

	.location_1{
		height: 330px;
		position: relative;
		width: 100%;
	}
	.location_bg{
		width: 100%;
		position: absolute;
		z-index: -100;
		height: 330px;
		background: rgb(11,6,96);
		background: linear-gradient(90deg, rgba(11,6,96,1) 10%, rgba(0,0,0,1) 50%, rgba(11,6,96,1) 90%);
	}
	.location_1_pic{
		position: absolute;
		left: 0%;
		width: 65%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: left;
		margin: 40px auto;
		z-index: -50;
	}
	.location_1_pic img{
		width: 100%;
		object-fit: cover;
	}

	.location_1_number{
		position: absolute;
		z-index: -50;
		right: 3%;
		top: 80px;

		font-size: 30px;
		font-weight: 500;

		width: 25%;
		color: #1E1E66;
		text-align: center;

		line-height: 1.5em;

		font-family: "Special Elite", system-ui;
		font-weight: 400;
		font-style: normal;
	}
	.location_1_number-l{
		font-size: 120px;
		font-weight: 500;
		margin-top: 40px;
	}
	.location_1_txt{
		position: absolute;
		z-index: -40;
		right: 20%;
		top: 120px;

		font-size: 30px;
		font-weight: 700;

		width: 20%;
		color: #fff;
		text-align: center;
		font-family: "Zen Old Mincho", serif;
		font-weight: 500;
		font-style: normal;
		line-height: 1.2em;
		border-bottom: solid 1px #fff;
		text-shadow: 3px 3px 3px #333;
	}

	/*2*/
	.location_2_pic{
		position: absolute;
		right: 0%;
		width: 65%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: right;
		margin: 40px auto;
		z-index: -50;
	}
	.location_2_pic img{
		width: 100%;

		object-fit: cover;
	}

	.location_2_number{
		position: absolute;
		z-index: -50;
		left: 5%;
		top: 80px;

		font-size: 32px;
		font-weight: 500;

		width: 20%;
		color: #1E1E66;
		text-align: center;

		line-height: 1.5em;

		font-family: "Special Elite", system-ui;
		font-weight: 400;
		font-style: normal;
	}
	.location_2_number-l{
		font-size: 120px;
		font-weight: 500;
		margin-top: 40px;
	}

	.location_2_txt{
		position: absolute;
		z-index: -40;
		left: 20%;
		top: 140px;

		font-size: 30px;
		font-weight: 700;

		width: 40%;
		color: #fff;
		text-align: center;
		font-family:'Cormorant Garamond', serif;
		line-height: 1.2em;
		border-bottom: solid 1px #fff;
		text-shadow: 3px 3px 3px #333;
	}
	.location_3{
		height: 330px;
		position: relative;
		width: 100%;
		margin-bottom: 60px;
	}

	/*--------------------------------------------------------
	game play
	--------------------------------------------------------*/

	.gameplay-1{
		width: 100%;
		background: url("../images/play-bg.jpg") no-repeat 0 0 / cover;
	}
	.gameplay-2{
		width: 100%;
		background: url("../images/play-bg2.jpg") no-repeat 0 0 / cover;
	}

	.gameplay_container{
		width: 90%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		margin: 60px auto 0;
		padding-bottom: 60px;
	}
	.gameplay_txt{
		width: 60%;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		font-style: normal;
		font-size: 30px;
	}
	.gameplay_body{
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 20px;
	}
	.gameplay_graph{
			width: 40%;
	}
	.gameplay_container2{
		width: 90%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0px auto 0;
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.gameplay_txt2{
		width: 65%;
		font-family: "Zen Old Mincho", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 32px;
		text-align: right;
	}
	.gameplay_body2{
		font-size: 16px;
		line-height: 1.5em;
		margin-top: 20px;
		text-align: right;

	}
	.gameplay_graph2{
			width: 35%;
	}


	/*========= ループ 1 ===============*/
	#gameplay_img{
	}
	.gameplay-loop{
		position: relative;
		 overflow: hidden;
		height: 140px;
		width: 100%;

	}
	.gameplay-block{
		position: absolute;
		z-index: -10;
		 overflow: hidden;
		width: 100%;
	}
	.loop-1{

	}
	@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}
	.scroll-infinity__wrap {
	  display: flex;
	  overflow: hidden;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	  padding: 0
	}
	.scroll-infinity__list--left {
	  animation: infinity-scroll-left 40s infinite linear 0.5s both;
	}

	.scroll-infinity__item {
	  width: calc(100vw / 3);
		height: 140px;

	}
	.scroll-infinity__item img {
	  width: 100%;
			height: 140px;
			object-fit: cover;

	}

	/*--------------------------------------------------------
	bottom-img
	--------------------------------------------------------*/
	.bottom-img img{
		height: 240px;
		object-fit: cover;
	}

	/*--------------------------------------------------------
	フッター
	--------------------------------------------------------*/
	.footer{
		width: 100%;
	}
	.footer_inner{
		background: #000;
		width: 100%;
	}
	.footer_container{
		width: 95%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto;
	}

	.footer_nav_block{
		width: 100%;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: center;
	  margin: 0 auto;
		padding-bottom: 0px;
	}
	.footer_nav{
		padding-top: 30px;
	}
	.footer_nav a{
		transition: 0.5s;
	}
	/*-- タグリンク --*/
	.footer_nav a{text-decoration: none; color:#fff;}
	.footer_nav a:link {text-decoration: none; color:#fff;}
	.footer_nav a:visited{text-decoration: none; color:#fff;}
	.footer_nav a:hover{color:#a9a9a9;}
	.footer_nav a:active{text-decoration: fff;}

	.footer_nav nav{
	   margin: 0 0 0 auto;
	}
	.footer_nav ul{
	   list-style: none;
	   margin: 0;
	   display: -webkit-box;
	   display: -ms-flexbox;
	   display: flex;
	   -ms-flex-wrap: wrap;
	   flex-wrap: wrap;
	   justify-content: left;
	}
	.footer_nav li{
		font-size: 16PX;
		margin: 0 0 0 40px;
	 line-height: 2.5em;
	 font-weight: bold;
	 line-height: 2.2em;
	 letter-spacing: 0.05em;
	 	font-family:'Special Elite', sans-serif;
	}
	.footer_address{
		width: 85%;
		margin: 40px auto;
		color: #fff;
		font-size: 1.2vw;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	.footer_phone{
		font-size: 1.8vw;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin-top: 10px;
	}
	/*-- クレジット --*/
	.footer_cr{
		font-size: 16px;
		padding-bottom: 100px;
		text-align: center;
		color: #fff;
		margin-top: 60px;
	}

	.footer_logo{
		width: 300px;
		margin: 20px auto;
	}
	.footer_logo img{
		opacity: 1;
		transition: 0.5s ;
	}
	.footer_logo img:hover{
		opacity: 0.5;
	}

	.footer_g-logo{
		width: 140px;
		margin: 20px auto 20px;
	}
	.footer_logo img{
		opacity: 1;
		transition: 0.5s ;
	}
	.footer_logo img:hover{
		opacity: 0.5;
	}


}/** end////@media only screen **/