@charset "utf-8";

.bgMain{
	position: fixed;
	top:20%;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg_map.jpg");
	background-position: 90% 0;
	background-repeat: no-repeat;
	background-size: 150% auto;
	z-index: -1;
}

/* ヘッダー */
header{
	position: relative;
	margin: 0 auto ;
	padding-bottom: 40%;
	display: block;
	width: 100%;
	background-color: #900411;
}
header h1{
	position: absolute;
	display: block;
	top: .5%;
	left: 1%;
	width: 22%;
	text-align: left;
}
header #keyvisual{
	position: relative;
	margin: 0 auto ;
	display: block;
	background-image: url("../img/header01_sp.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
	padding-top: 106.25%;
	width: 100%;
}
header .headerTxt{
	position: relative;
	margin: -32% auto 0 auto;
	background-color: transparent;
	color: #ffffff;
	font-size: .18rem;
	font-weight: 900;
	line-height: 1.5em;
	padding: 0;
	width: 90%;
}
header .headerTxt h3{
	position: relative;
	margin: 8% auto 0 auto;
	padding: 1% 0;
	width: 100%;
	color: #ffffff;
	background-color: #001c46;
	box-shadow:2px 2px 0px 0px #FFD400;
}
header .headerTxt dl{
	position: relative;
	margin: 4% auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	text-align: left;
}
header .headerTxt dl dt, header .headerTxt dl dd{
	position: relative;
	width: 6em;
	font-weight: 700;
	margin-bottom: 3%;
}
header .headerTxt dl dd{width: calc(100% - 6em);}
header .headerTxt dl dd span{font-size: .14rem;}
header .headerTxt ul.caution{
	width: 100%;
	font-weight: 500;
	font-size: .14rem;
}
header .headerTxt ul.caution li.boldTxt{font-weight: 900;}
header .headerTxt ul.caution li.boldTxt span{font-size: .16rem;}
.btn_access{
	position: relative;
	display: block;
	margin: 8% auto;
	width: 60%;
}
.tokyobtn {
	position: relative;
	margin: auto;
	text-align: left;
}
.tokyobtn a{
	position: relative;
	display: inline-block;
	margin: 5% 0 0 1%;
	width: 48%;
}

.wrapBg{
	position: relative;
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-size: 184% auto;
	background-position: 50% 60px;
}
.wrapBg::before{
	position: absolute;
	content: '';
	top:0;
	left: 0;
	width: 100%;
	height: 30%;
	background-image: url("../img/bg_item14.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 100px;
}

footer{padding-bottom: 25%;}

/* メニュー */
#menu01 {position: relative; margin: -42% auto 0 auto; overflow: hidden;}
#menu01::before{
	position: absolute;
	display: block;
	content: '';
	top:5%;
	left: -6%;
	width: 24%;
	height: 24%;
	background-image: url("../img/bg_item03.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 80% 0;
	z-index: 8;
}
#menu01::after{
	position: absolute;
	display: block;
	content: '';
	bottom:-2%;
	right: -6%;
	width: 23%;
	height: 23%;
	background-image: url("../img/bg_item01.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 80% 0;
}
#menu01 h2{
	position: relative;
	background-image: url("../img/bg_game_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
}
#menu01 .bg{
	position: relative;
	margin: 0;
	padding: 4% 0 50% 0;
	background: -webkit-linear-gradient(bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1));
	background: -o-linear-gradient(bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1)) ;
	background: linear-gradient(to bottom, rgba(181,225,229,1) 50%, rgba(112,184,214,1)) ;
}
#menu01 .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url("../img/bg_game.png");
	background-size: 180% auto;
	background-repeat: no-repeat;
}
#menu01 ul{
	position: relative;
	margin: 0 auto;
	width: 80%;
}
#menu01 ul li{
	position: relative;
	margin: 0 auto 12% auto;
	padding: 0;
}
#menu01 ul li:nth-child(2){margin: 0 0 1% 0;}


/* twitter */
#twitter {margin: -45% auto 0 auto; overflow: hidden;}
#twitter h2{
	background-image: url("../img/bg_special_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
	padding-top: 20px;
}
#twitter .bg{
	position: relative;
	margin: 0;
	padding: 3% 0 50% 0;
	background-image: url("../img/bg_special.png");
	background-size: 100% auto;
}
#twitter .twi_wiget{
	position: relative;
	width: 90%;
	margin: 0 auto;
	height: 300px;
	border: solid 3px #0054c6;
	background-color: #ffffff;
}
#twitter .twitter-timeline{height: 300px !important;}
.twi_wiget iframe { width: 740px !important; }
#twitter .bg::before{
	position: absolute;
	display: block;
	content: '';
	top:-5%;
	left: -9%;
	width: 119%;
	height: 100%;
	background-image: url("../img/bg_item02.png"), url("../img/bg_item07.png");
	background-size: 23% auto, 30% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: 0 0, 100% 90%;
}

 /* CONTACT */
#contact {margin: -40% auto 0 auto; color:#001c46;font-weight: 700;}
/*#contact::after{
	position: absolute;
	display: block;
	content: '';
	top:42px;
	left: 42%;
	width: 21%;
	height: 11%;
	background-image: url("../img/bg_item13.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}*/
#contact .bg{
	position: relative;
	margin: 0;
	padding: 4% 0 40% 0;
	background: -webkit-linear-gradient(bottom, rgba(181,225,229,1) 20%, rgba(112,184,214,1));
	background: -o-linear-gradient(bottom, rgba(181,225,229,1) 20%, rgba(112,184,214,1)) ;
	background: linear-gradient(to bottom, rgba(181,225,229,1) 20%, rgba(112,184,214,1)) ;
}
#contact h2{
	background-image: url("../img/bg_game_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
	padding-top: 15px;
}


 /* PAGE TOP */
.totop {
	position: relative;
	margin: -40% auto 0 auto;
	background-image: url("../img/bg_pagetop.png");
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 100% 100px;
	height: 100px;
}
.totop img{ position: relative;height: 14px; width:auto; padding-top: 65px;z-index: 2;}
.btn_top::before{
	position: absolute;
	display: block;
	content: '';
	top:-10%;
	left: 2%;
	width: 40%;
	height: 150%;
	background-image: url("../img/chara08.png");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	.bgMain{
		top:0;
		background-size: 101% auto;
		background-position: 90% 80%;
	}
	
	/* ヘッダー */
	header{padding-bottom: 230px;}
	header h1{
		top: 1%;
		width: 17%;
	}
	header #keyvisual{
		background-image: url("../img/header01.jpg");
		padding-top: 36.92%;
	}
	header .headerTxt{
		margin: -26% 0 0 5%;
		font-size: .20rem;
		width: 75%;
	}
	header .headerTxt h3{
		margin: 50px 0 20px 0;
		width: 500px;
		padding: 2px 0;
	}
	header .headerTxt dl{
		margin: 0 0 10px 0;
		width: 600px;
	}
	header .headerTxt dl dt, header .headerTxt dl dd{margin-bottom: 20px;}
	header .headerTxt .boxWrap{
		position: relative;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items:flex-start;
	}
	header .headerTxt ul.caution{
		width: 70%;
		margin: 0;
		font-size: .17rem;
		text-align: left;
	}
	header .headerTxt ul.caution li.boldTxt span{font-size: .19rem;}
	
	.btn_access{
		position: relative;
		margin: 0;
		width: 20%;
	}
	header .btn_access{
		position: absolute;
		margin: -14% 0 0 70%;
	}
	.tokyobtn{
		position: absolute;
		margin: -7% 0 0 70%;
		width: 55%;
		text-align: left;
	}
	.tokyobtn a{
		position: relative;
		display: inline-block;
		margin: 0 0 2% 0;
		width: 32%;
	}

	
	footer{padding-bottom: 120px;}
	
	.wrapBg{background-size: 100% auto;background-position: 50% 120px;}
	.wrapBg::before{
		background-size: 80% auto;
		background-position: -12% 240px;
	}

	/* メニュー */
	#menu01 {margin: -200px auto 0 auto;}
	#menu01::before{
		top:60px;
		left: -15px;
		width: 178px;
		height: 145px;
		background-position: 0 0;
	}
	#menu01::after{
		bottom:20px;
		right: -30px;
		width: 234px;
		height: 216px;
		background-position: 0 0;
	}
	#menu01 .bg{padding: 10px 0 200px 0;}
	#menu01 .bg01{background-size: 100% 100%;}
	#menu01 h2{background-size: 100% 120px;}
	#menu01 h2 img{padding-top: 40px;}
	#menu01 ul{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		align-content:space-around;
		width: 960px;
		margin: 0 auto;
		align-items:flex-end;
	}
	#menu01 ul li{margin: 0 0 10px 0; width: 480px;}
	#menu01 ul li:nth-child(2){margin: 0 0 10px 0 !important;}
	#menu01 ul li img{width: 400px; height:auto; }
	
	/* Twitter */
	#twitter {margin: -100px auto 0 auto;}
	#twitter .bg{padding: 40px 0 200px 0;}
	#twitter h2{background-size: 100% 120px;}
	#twitter h2 img{padding-top: 40px;}
	#twitter .twi_wiget{
		width: 960px;
		height: 400px;
	}
	#twitter .twitter-timeline{height: 400px !important;}
	.twi_wiget iframe { width: 960px !important; }
	#twitter .bg::before{
		top:-50px;
		left: 50%;
		transform: translateX(-50%);
		width: 1200px;
		height: 110%;
		background-size: 221px auto, 214px auto;
		background-position: 20px 0, 100% 100%;
	}

	
	/* CONTACT */
	#contact {margin: -100px auto 0 auto;}
	/*#contact::after{
		top:88px;
		left: 46%;
		width: 120px;
		height: 80px;
	}*/
	#contact .bg{padding: 40px 0 250px 0;}
	#contact h2{background-size: 100% 120px;}
	#contact h2 img{padding-top: 30px;}
	#contact p{ position: relative; font-size: .20rem;}
	
	 /* PAGE TOP */
	.totop {
		margin: -200px auto 0 auto;
		background-size: 100% 220px;
		height: 220px;
	}
	.totop:hover{cursor: pointer;}
	.totop img{height: 25px;padding-top: 135px;}
	.btn_top{
		position: relative;
		margin: 0 auto;
		width: 960px;
	}
	.btn_top::before{
		top:-130px;
		left: 130px;
		width: 296px;
		height: 387px;
		background-image: url("../img/chara08.png");
	}

	
		
}