@charset "utf-8";
/* CSS Document */

.flex {
	display: flex;
	justify-content: space-between;
}
.sp {
	display: none;
}
.sp_bar {
	display: none;
}
@media screen and (max-width: 949px) {
	.flex {
		display: block;
	}
	.pc {
		display: none;
	}
	.sp_bar {
		display: block;
	}
}
@media screen and (max-width: 420px) {
	.sp {
		display: block;
	}
}
@media screen and (max-width: 320px) {
	.sp_s {
		display: block;
	}
}


/* link buttons
------------------------------------------- */
#gameTop ul.btns li a,
#navbar ul li a {
	display: block;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
	font-size: 120%;
	line-height: 1.2;
	letter-spacing: 2px;
	text-align: center;
	padding: 8px 0 10px;
	color: #fff;
	background: #AF1E24;
	text-shadow: 2px 2px 2px #140000;
}
#gameTop ul.btns li a,
#navbar ul li a {
	border: 2px solid #140000;
	border-radius: 5px;
}

#gameTop ul.btns li a:hover,
#navbar ul li a:hover {
	color: #AF1E24;
	background: #fff;
	text-shadow: 2px 2px 2px #ccc;
	text-decoration: none;
}
#gameTop ul.btns li span,
#navbar ul li span {
	font-family: 'Noto Sans',sans-serif;
	font-size: 12px;
}


/* nav
------------------------------------------- */
#gameTop ul.btns {
	margin-top: 10px;
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
}
#gameTop ul.btns li,
#navbar ul li {
	width: 24%;
	margin: 0 0.5% 10px;
}
/* 下層用 */
#navbar {
	margin-bottom: 25px;
}
#navbar ul {
	position: relative;
	top: 0;
	display: flex;
	flex-wrap: wrap;
}


/* game top
------------------------------------------- */
#gameTop {
	position: relative;
	text-align: center;
	overflow: hidden;
}
#gameTop h3 {
	overflow: hidden;
	text-align: center;
	margin-top: 20px;
}
#gameTop h3 span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}
#gameTop h3 span::before,
#gameTop h3 span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 800%;
	height: 1px;
	background-color: #1E1E1E;
}
#gameTop h3 span::before {
	right: 100%;
}
#gameTop h3 span::after {
	left: 100%;
}

#gameTop #txtBox { background: #fff; border: 6px double #AF1E24; padding: 0 1em; margin-bottom: 2em; }
#gameTop #txtBox h1 { font-size: 18px; }
#gameTop #txtBox p { text-align: left; line-height: 1.4; margin-bottom: 1em; }
#gameTop #txtBox p:last-child { text-align: right; }
@media only screen and (max-width: 949px) {
	#gameTop #txtBox { margin: 1em; }
	#gameTop #txtBox h1 { display: block; }
}


/* lower contents
------------------------------------------- */
#gameWrap h3 {
	background: #221814;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	padding: .4em 1em .2em;
}
#gameWrap h3 span {
	font-size: 12px;
}

#gameWrap .unit {
	padding-left: 2em;
	padding-right: 2em;
	margin: .8em 0 40px;
	font-size: 14px;
	line-height: 1.8;
}

#gameWrap h4 {
	background: #fff;
	position: relative;
	padding: 0.8em 1em;
	font-size: 16px;
	margin-bottom: .5em;
	margin-top: 1em;
	text-align: center;
}
#gameWrap h4::before,
#gameWrap h4::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
#gameWrap h4::before {
	top: 0;
	border-top: 2px solid #221814;
	border-bottom: 1px solid #221814;
}
#gameWrap h4::after {
	bottom: 0;
	border-top: 1px solid #221814;
	border-bottom: 2px solid #221814;
}

.dotline {
	border-top: 1px dashed #000;
	padding-top: 1em;
	text-align: right;
}
.small {
	font-size: 12px;
	line-height: 1.6;
}


/* outline
------------------------------------------- */
#gameWrap .outUnit {
	margin: 1em 0 0;
	text-align: center;
}
#gameWrap .outUnit dl {
	margin: 2em 1em 0;
	font-weight: bold;
}
#gameWrap .outUnit dt {
	background: #fff;
	font-size: 120%;
	margin-bottom: .5em;
	border-top: 3px double #221814;
	border-bottom: 3px double #221814;
}
#gameWrap .outUnit ul {
	font-size: 90%;
	text-align: left;
	margin: 2em 1em 0;
}


/* time
------------------------------------------- */
#gameWrap .timeUnit {
	text-align: center;
}
#gameWrap .timeUnit p {
	margin: 1em 0;
	line-height: 1;
}


/* detail
------------------------------------------- */
#gameWrap .spUnit h4 {
	font-size: 140%;
}
#gameWrap .spUnit div.shooting {
	margin-top: 1em;
}
#gameWrap .spUnit div.shooting dl {
	clear: both;
	margin: 0 2em;
	line-height: 1.8;
}
#gameWrap .spUnit div.shooting dt {
	float: left;
	width: 20%;
	background: #221814;
	color: #fff;
	font-size: 80%;
	text-align: center;
	margin-right: 1em;
}
#gameWrap .spUnit div.shooting dd {
	font-weight: bold;
}
#gameWrap .spUnit div.flex,
#gameWrap .spUnit ul,
#gameWrap .spUnit p {
	margin-left: 1em;
	margin-right: 1em;
	line-height: 1.6;
}
#gameWrap .spUnit ul {
	margin-top: 1em;
}
#gameWrap .spUnit li {
	margin-left: 1em;
	text-indent: -1em;
	font-size: 90%;
}
#gameWrap .spUnit div.flex dl {
	width: 29%;
	background: #fff;
	font-size: 90%;
	border-radius: 8px;
	padding: .5em 1em;
}
#gameWrap .spUnit div.flex img {
	display: block;
	margin: 0 auto -1em;
}
#gameWrap .spUnit h5 {
	margin: 10px 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-top: 3px double #221814;
	border-bottom: 3px double #221814;
}
#gameWrap .spUnit ul.prize {
	margin-left: 2em;
}
#gameWrap .spUnit ul.prize li {
	margin-bottom: .5em;
}
#gameWrap .spUnit div.flex dt,
#gameWrap .spUnit ul.prize span {
	font-weight: bold;
}
#gameWrap .spUnit .subunit {
	width: 48%;
}
#gameWrap .spUnit .notes {
	font-size: 90%;
	line-height: 1.6;
}


/* access
------------------------------------------- */
#gameWrap .acsUnit {
	margin: 1em 1em 0;
}
#gameWrap .acsUnit dl {
	margin-bottom: 20px;
}
#gameWrap .acsUnit dt {
	text-align: center;
}
#gameWrap .acsUnit dt h4 {
	margin-top: 0;
	margin-bottom: .5em;
	padding: .5em 0;
	background: #221814;
	color: #fff;
	border: none;
}
#gameWrap .acsUnit dd {
	line-height: 1.6;
}
#gameWrap .acsUnit .flex p {
	margin-right: 2%;
}
#gameWrap .acsUnit dl:nth-child(2) {
	font-size: 80%;
	font-weight: bold;
}
#gameWrap .acsUnit .flex div {
	width: 50%;
}
#gameWrap .acsUnit .flex div:nth-child(2) p {
	text-align: center;
}
#gameWrap .acsUnit .unit h4 {
	color: #AF1E24;
	font-size: 120%;
}
#gameWrap .acsUnit .unit h4 span {
	color: #fff;
	background: #AF1E24;
	padding: .3em .3em .1em;
}
#gameWrap .acsUnit .unit .notes {
	color: #AF1E24;
	font-weight: bold;
}
#gameWrap .acsUnit .unit .notes span {
	color: #000;
}


/* list
------------------------------------------- */
#gameWrap ul.list {
	padding-left: 0;
}
#gameWrap ul.list li {
	display: inline-block;
	width: 24.6%;
	margin-bottom: 10px;
}
#gameWrap ul.tgbslogolist,
#gameWrap ul.suplogolist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	background: #fff;
	margin-bottom: 15px;
	margin-left: -25px;
	margin-right: -25px;
	padding-left: 0;
	border-radius: 5px;
}
#gameWrap ul.tgbslogolist li {
	padding: .8em;
}
#gameWrap ul.suplogolist li {
	list-style: none;
	flex-basis: 16%;
	padding: 1em;
}
#gameWrap ul.suplogolist li img {
	width: 100%;
}
#gameWrap ul.suplogolist li:nth-of-type(4) img {
	width: 60%;
}



/* media queries
------------------------------------------- */

/*-----------------------------------------
				PC
--------------------------------------------*/
@media only screen and (min-width: 950px) {
	#gameTop ul.btns li:last-child,
	#navbar ul li:last-child {
		display: none;
	}
}


/*-----------------------------------------
				moblile
--------------------------------------------*/
@media only screen and (max-width: 949px) {

	/* common */
	body { 
		background: url(http://nborde.arrows-agent.com/img/common/bg.jpg);
	}
	.wrapper {
		width:auto;
		margin:0 auto;
		height:100%;
	}
	header {
		height: auto;
	}
	.logo {
		display: none;
	}
	header nav {
		display: none;
	}
	ul.lang {
		display: none;
	}
	.contents {
		width: auto;
		margin: 0;
	}
	footer {
		width: auto;
		margin: 0;
	}
	h1 {
		display: none;
	}

	/* link buttons */
	#gameTop  ul.btns li:last-child a,
	#navbar ul li:last-child a {
		color: #ccc;
		background: #000;
		background: -moz-linear-gradient(top, #000000 0%, #6A6A6A 50%, #000000 100%);
		background: -webkit-linear-gradient(top, #000000 0%,#6A6A6A 50%,#000000 100%);
		background: linear-gradient(to bottom, #000000 0%,#6A6A6A 50%,#000000 100%);
	}
	#gameTop ul.btns {
	}
	#gameTop ul.btns li {
		width: 49%;
		margin: 0 0.5% 10px;
	}
	#navbar ul li {
		width: 99%;
		margin: 0 0.5% 10px;
	}

	/* nav */
	#navbar {
		z-index: 9999;
		margin-bottom: -2px;
	}
	#nav-toggle {
		background: rgba(255,0,0,0.6);
		position: fixed;
		top: 0;
		right: 0;
		height: 32px;
		cursor: pointer;
		padding: 1em;
	}
	#nav-toggle > div {
		position: relative;
		width: 32px;
	}
	#nav-toggle span {
		width: 100%;
		height: 3px;
		left: 0;
		display: block;
		background: #000;
		position: absolute;
		-webkit-transition: top .5s ease, -webkit-transform .6s ease-in-out;
		transition: top .5s ease, -webkit-transform .6s ease-in-out;
		transition: transform .6s ease-in-out, top .5s ease;
		transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
		top: 0;
	}
	#nav-toggle span:nth-child(2) {
		top: 14px;
	}
	#nav-toggle span:nth-child(3) {
		top: 28px;
	}

	.open #nav-toggle {
		background: rgba(0,0,0,0.8);
	}
	.open #nav-toggle span {
		background: #fff;
	}
	.open #nav-toggle span:nth-child(1) {
		top: 15px;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
		top: 15px;
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 15px;
		-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
	}

	/* z-index */
	#nav-toggle {
		z-index: 1000;
	}

	#container {
		z-index: 900;
	}

	#gloval-nav {
		background: #333;
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		display: -webkit-box;
		display: flex;
		visibility: hidden;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
				flex-direction: column;
		-webkit-box-pack: center;
				justify-content: center;
		-webkit-box-align: center;
				align-items: center;
		/*font-size: 24px;*/
		opacity: 0;
		-webkit-transition: opacity .6s ease, visibility .6s ease;
		transition: opacity .6s ease, visibility .6s ease;
	}

	#gloval-nav a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 10px 0;
		-webkit-transition: color .6s ease;
		transition: color .6s ease;
	}
	#gloval-nav a:hover {
		color: #666;
	}
	#gloval-nav ul {
		list-style: none;
	}
	#gloval-nav ul li {
		opacity: 0;
		-webkit-transform: translateX(200px);
				transform: translateX(200px);
		-webkit-transition: opacity .2s ease, -webkit-transform .6s ease;
		transition: opacity .2s ease, -webkit-transform .6s ease;
		transition: transform .6s ease, opacity .2s ease;
		transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
	}
	#gloval-nav ul li:nth-child(2) {
		-webkit-transition-delay: .15s;
				transition-delay: .15s;
	}
	#gloval-nav ul li:nth-child(3) {
		-webkit-transition-delay: .3s;
				transition-delay: .3s;
	}
	#gloval-nav ul li:nth-child(4) {
		-webkit-transition-delay: .45s;
				transition-delay: .45s;
	}
	#gloval-nav ul li:nth-child(5) {
		-webkit-transition-delay: .6s;
				transition-delay: .6s;
	}
	#gloval-nav ul li:nth-child(6) {
		-webkit-transition-delay: .75s;
				transition-delay: .75s;
	}
	#gloval-nav ul li:nth-child(7) {
		-webkit-transition-delay: .9s;
				transition-delay: .9s;
	}
	#gloval-nav ul li:nth-child(8) {
		-webkit-transition-delay: 1.15s;
				transition-delay: 1.15s;
	}
	/* open */
	.open {
		overflow: hidden;
	}
	.open #gloval-nav {
		visibility: visible;
		opacity: 1;
	}
	.open #gloval-nav li {
		opacity: 1;
		-webkit-transform: translateX(0);
				transform: translateX(0);
		-webkit-transition: opacity .9s ease, -webkit-transform 1s ease;
		transition: opacity .9s ease, -webkit-transform 1s ease;
		transition: transform 1s ease, opacity .9s ease;
		transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
	}

	#navbar img {
		width: 100%;
	}

	/* titlebar */
	#gameWrap h3 {
		border-radius: 0;
	}
	/* unit */
	#gameWrap .unit {
		padding-left: 1em;
		padding-right: 1em;
	}

	/*     detail     */
	#gameWrap .spUnit div.flex {
		margin-left: 0;
		margin-right: 0;
	}
	#gameWrap .spUnit div.flex dl {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 2em;
	}
	#gameWrap .spUnit .subunit {
		width: 100%;
	}

	/*     access     */
	#gameWrap .acsUnit .flex p {
		margin-right: 0;
		text-align: center;
	}
	#gameWrap .acsUnit .flex div {
		width: 100%;
	}
	#gameWrap .acsUnit .flex div.unit {
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/*     list     */
	#gameWrap ul.list li {
		width: 49.2%;
	}
	#gameWrap ul.tgbslogolist,
	#gameWrap ul.suplogolist {
		margin-left: -8px;
		margin-right: -8px;
		text-align: center;
	}
	#gameWrap ul.suplogolist li {
		flex-basis: 22.8%;
	}
	#gameWrap ul.tgbslogolist img,
	#gameWrap ul.suplogolist li:nth-of-type(4) img {
		width: 70%;
	}
}


@media only screen and (max-width: 605px) {
	/*     detail     */
	#gameWrap .spUnit div.shooting dl {
		margin: 0 1em;
	}
	#gameWrap .spUnit div.shooting dt {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	#gameWrap .spUnit div.shooting dd {
		margin: 0 1em;
	}
	/*     access     */
	#gameWrap .acsUnit .map img {
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
	#gameWrap h3 {
		line-height: 1.4;
		padding-bottom: .4em;
	}
	#gameTop ul.btns li {
		width: 96%;
		margin: 0 2% 10px;
	}
}
@media only screen and (max-width: 375px) {
	#gameWrap .spUnit h4 {
		font-size: 110%;
	}
}
@media only screen and (max-width: 320px) {
	#navbar ul li {
		width: 100%;
		margin: 0;
	}
	#navbar ul li a {
		line-height: 1;
		border: none;
		border-top: 2px solid #140000;
		border-radius: 0;
		padding: 7px 0 8px;
	}
	#gameWrap ul.list li {
		width: 100%;
	}
}