@charset "utf-8";

.contentCommon h6:before {border-left: 6px solid #D33333; content: ""; width: 4px; height: 100%; border-radius: 2px; margin-right: 10px;}
.contentCommon h6 {border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 10px;}

.contentCommon span {display:block; color: #f00;}

section {overflow: hidden;}
#copyright {font-size: 16px; text-align: center;}

#info #gamesc-h {margin-bottom: 40px;}
#info #gamesc-v {margin-bottom: 40px;}

#about {padding-top: 10px;}
#about img {border: 0 solid #000; display: block; width: 100%;}

#about h2 {margin-bottom: 0px;}
#about h2 span {color:#60676F; display: inline-block; background-color: #E5E5E5;}

.download p { text-align: center; font-size: 11px; }
#about .download p { margin-bottom: 10px; }
#about .download { padding: 10px; }

#info p span {color: #f00;}

#spec h6:before {content: "●"; color:#C8C8C8; margin-right: 5px;}
#spec h6+p {line-height: 150%; margin-bottom: 40px; padding-left: 1em;}

#sale span {font-weight: bold; color:#f00;}

#story {margin-bottom: 40px;}
#story div#l {}
#story div#l img {float: left; width: 48%; margin: 0 1%;}

#story div#c {text-align: center;}
#story div#c img {margin: 0 auto; width: 48%;}

#system div {overflow: hidden; margin-bottom: 40px;}
#system img {float: right; width: 340px; margin-left: 20px;}

#system p {padding-left: 1em; margin-bottom: 0;}

#contentMenu {border-top:1px solid #eee; border-bottom:0 solid #ccc; background-color: #f0f0f0;}
#contentMenu ul {display: flex;flex-wrap: wrap;justify-content: center;}
#contentMenu ul li {width: 20%; text-align: center; margin-bottom: 0; padding: 0 0; border: 0 solid #000;}

#contentMenu ul li a { text-decoration: none; font-size: 16px; color: #000; display: block; padding: 20px 0;}
#contentMenu ul li a:hover {background-color: rgba(0,0,0,0.5); transition-duration: .3s; color:#fff;}



@media screen and (min-width:0px) and (max-width:425px) {

	#container {padding-top: 0;}
	#contentMenu ul li {width: 50%; text-align: center; margin-bottom: 0;  padding: 4px 0;border: 0 solid #000;}
	#contentMenu ul li a { text-decoration: none; font-size: 12px; color: #000; display: block; padding: 4px 0;}

	#contentMenu ul li:nth-of-type(1) a {border-right: 1px solid #aaa;}
	#contentMenu ul li:nth-of-type(3) a {border-right: 1px solid #aaa;}
	#contentMenu ul li:nth-of-type(5) a {border-right: 1px solid #aaa;}

	#story div#c img {margin: 0 auto; width: 80%;}

	#copyright {font-size: 11px; text-align: center;}
	#system p {padding-left: 0px;}
	#system img {width: 100%; display: block; margin-bottom: 20px; float: none; margin-left: 0px;}

	#about h2 {margin-bottom: 10px; padding: 0 10px; font-size: 18px;}
	#about h2 span {padding: 0 10px; margin-right: 5px; font-size: 18px;}
}

@media screen and (min-width:426px) and (max-width:768px) {

	#contentMenu ul li {width: 16.666%; text-align: center; margin-bottom: 0; padding: 0 0; border: 0 solid #000;}
	#contentMenu ul li a { text-decoration: none; font-size: 12px; color: #000; display: block; padding: 20px 0;}

	#about h2 {margin-bottom: 0px; font-size: 22px;}
	#about h2 span { padding: 0 20px; margin-right: 10px; font-size: 22px;}

	#copyright {font-size: 11px; text-align: center;}
	#system p {padding-left: 0px;}
	#system img {width: 100%; display: block; margin-bottom: 20px; float: none; margin-left: 0px;}
}
@media screen and (min-width:769px) {

	#contentMenu ul li {width: 16.666%; text-align: center; margin-bottom: 0; padding: 0 0; border: 0 solid #000;}
	#contentMenu ul li a { text-decoration: none; font-size: 14px; color: #000; display: block; padding: 20px 0;}

	#about h2 {margin-bottom: 0px; font-size: 26px;}
	#about h2 span { padding: 0 20px; margin-right: 10px; font-size: 26px;}

	#about h2+p {font-size: 12px; margin-top: 10px; text-align: center;}
	#about h6+p {font-size: 14px;}
	.content p {font-size: 18px;}
}