@charset "UTF-8";
a:focus { outline: none; }
img { width: 100%; }
html { font-size: 62.5%; }

body {
	position: relative;
	width: 100%;
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	background: url(../img/bg01.jpg) repeat;
	background-size: auto auto;
}

/* NAV BUTTON */
.navBtn {
	position: absolute;
	width: 13.75vw;
	height: 13.75vw;
	top: 13.125vw;
	right: 3vw;
	background: url(../img/nav/navBg.png) no-repeat 0 0;
	background-size: 100% 100%;
	z-index: 999;
}
	.navLine {
		position: absolute;
		width: 5vw;
		height: 4vw;
		top: 2.8vw;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		   -moz-transform: translate(-50%, 0);
		    -ms-transform: translate(-50%, 0);
		     -o-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
	}
		.navLine p {
			position: absolute;
			width: 100%;
			height: 2px;
			background: #fff;
			-webkit-transition: all .3s ease-out;
			   -moz-transition: all .3s ease-out;
			    -ms-transition: all .3s ease-out;
			     -o-transition: all .3s ease-out;
			        transition: all .3s ease-out;
		}
		.no-active .navLine p:first-child {
			top: 0;
		}
		.no-active .navLine p:nth-child(2) {
			top: 50%;
		}
		.no-active .navLine p:nth-child(3) {
			top: 100%;
		}
		.active .navLine p:first-child {
			top: 50%;
			transform: rotate(45deg);
		}
		.active .navLine p:nth-child(2) {
			display: none;
		}
		.active .navLine p:nth-child(3) {
			top: 50%;
			transform: rotate(-45deg);
		}

	.no-active:after {
		display: block;
		position: absolute;
		width: 100%;
		bottom: 2.5vw;
		content: "MENU";
		color: #fff;
		font-size: 9px;
		font-size: 0.9rem;
		text-align: center;
	}
	.active:after {
		display: block;
		position: absolute;
		width: 100%;
		bottom: 2.5vw;
		content: "CLOSE";
		color: #fff;
		font-size: 9px;
		font-size: 0.9rem;
		text-align: center;
	}

/* INTRODUCTION */
h1 {
	width: 100%;
	margin: 0 0 12.5vw;
	padding: 3.125vw 0 0;
}
	.hlogo {
		width: 36.875vw;
		margin: 0 auto 6.5vw;
	}
.gamemode_block {
	width: 100%;
	margin: 0 0 12.5vw;
}
	.gamemode_block h2 {
		margin: 0 0 9.3vw;
	}
	.gm_01,
	.gm_02,
	.gm_03,
	.gm_04,
	.gm_05 {
		position: relative;
		width: 100%;
		margin: 0 0 9.3vw;
	}
	.gm_02 {
		margin: 0 0 25vw;
	}
		.gmTxt {
			width: 90.6%;
			margin: 0 auto;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			line-height: 1.6;
		}

		/* GAMEMODE 01 IMG */

		.gm_01_img,
		.gm_03_img,
		.gm_04_img,
		.gm_05_img {
			position: relative;
			width: 100vw;
			height: 62.5vw;
			margin: 12.5% 0 0;
		}
			/* SLICK CUSTAMIZE */
			button:focus {
				outline: none;
			}
			.slick-prev {
				position: absolute;
				width: 12.5vw;
				height: 12.5vw;
				bottom: -1vw;
				left: 3vw;
				text-indent: -9999px;
				background: url(../img/gamemode/gm_01_arrow_left.png) no-repeat 0 0;
				background-size: 100% auto;
				border: none;
				z-index: 1;
			}
			.slick-next {
				position: absolute;
				width: 12.5vw;
				height: 12.5vw;
				bottom: -1vw;
				right: 3vw;
				text-indent: -9999px;
				background: url(../img/gamemode/gm_01_arrow_right.png) no-repeat 0 0;
				background-size: 100% auto;
				border: none;
				z-index: 1;
			}
			.slick-dots {
				position: absolute;
				width: 62.5vw;
				height: 7.5vw;
				bottom: -1vw;
				left: 50%;
				margin: 0 0 0 -31.25vw;
				padding: 2.5vw 0;
				letter-spacing: -.4em;
				text-align: center;
				background: url(../img/gamemode/gm_01_pager_bg.png) no-repeat 0 0;
				background-size: 100%;
				z-index: 1;
			}
				.slick-dots li {
					display: inline-block;
					width: 7.5vw;
					height: 7.5vw;
					margin: 0 2.5vw;
					letter-spacing: normal;
					text-indent: -9999px;
					border: none;
				}
					.slick-dots li:nth-child(1) {
						background: url(../img/gamemode/pager_01_off.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li.slick-active:nth-child(1) {
						background: url(../img/gamemode/pager_01_on.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li:nth-child(2) {
						background: url(../img/gamemode/pager_02_off.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li.slick-active:nth-child(2) {
						background: url(../img/gamemode/pager_02_on.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li:nth-child(3) {
						background: url(../img/gamemode/pager_03_off.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li.slick-active:nth-child(3) {
						background: url(../img/gamemode/pager_03_on.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li:nth-child(4) {
						background: url(../img/gamemode/pager_04_off.png) no-repeat 0 0;
						background-size: 100% 100%;
					}
					.slick-dots li.slick-active:nth-child(4) {
						background: url(../img/gamemode/pager_04_on.png) no-repeat 0 0;
						background-size: 100% 100%;
					}


		/*
			.gm_01_pager {
				position: relative;
				width: 100vw;
				height: 12.5vw;
				z-index: 5;
			}
				.gm_01_arrow_left,
				.gm_01_arrow_right {
					position: absolute;
					width: 12.5vw;
					height: 12.5vw;
					top: 0;
				}
				.gm_01_arrow_left {
					left: 3.1vw;
				}
				.gm_01_arrow_right {
					right: 3.1vw;
				}
				.gm_01_pager_base {
					width: 62.5vw;
					height: 12.5vw;
					margin: 0 auto;
					background: url(../img/gamemode/gm_01_pager_bg.png) no-repeat 0 0;
					background-size: 100%;
				}
					.gm_01_pager_base ul {
						padding: 2.5vw 0;
						letter-spacing: -.4em;
						text-align: center;
					}
					.gm_01_pager_base li {
						display: inline-block;
						width: 7.5vw;
						height: 7.5vw;
						margin: 0 2.5vw;
					}
			.gm_01_img01,
			.gm_01_img02,
			.gm_01_img03 {
				position: absolute;
				width: 100vw;
				height: 56.25vw;
				bottom: 0;
				left: 0;
				z-index: 1;
			}
			.gm_01_img02,
			.gm_01_img03 {
				display: none;
			}
		*/
		/* GAMEMODE 02 IMAGE */
		.gm_02_img {
			width: 100%;
			margin: 6.25% 0 0;
		}