﻿@charset "UTF-8";
html{
	font-size:100%;
}
body{
	font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ　Pro W3",sans-serif;
	line-height:1.7;
	color:#fff;
}
.big-bg-a{
	text-align:center;
	background-size:cover;
	background-position: center top;
	background-image:url(../images/haikei2.jpg),linear-gradient(#b92b27,#1565C0);
	background-blend-mode:darken;
	min-height:100vh;
}
.big-bg-b{
	text-align:center;
	background-size:cover;
	background-position: center top;
	background-image:url(../images/fps_haikei.jpg),linear-gradient(#E55D87,#5FC3E4);
	background-blend-mode:darken;
	min-height:100vh;
}

.big-bg-c{
	text-align:center;
	background-size:cover;
	background-position: center top;
	background-image:url(../images/simulation_haikei.jpg),linear-gradient(#1FA2FF,#A6FFCB);
	background-blend-mode:darken;
	min-height:100vh;
}

.big-bg-d{
	text-align:center;
	background-size:cover;
	background-position: center top;
	background-image:url(../images/rpg_haikei.jpg),linear-gradient(#ff6a00,#ee0979);
	background-blend-mode:darken;
	min-height:100vh;
}

.big-bg-e{
	text-align:center;
	background-size:cover;
	background-position: center top;
	background-image:url(../images/haikei2.jpg),linear-gradient(#FDFC47,#24FE41);
	background-blend-mode:darken;
	min-height:100vh;
}


.big-bg p{
	font-size:1.3rem;
}
header{
	background-color:#333;
	color:#fff;
	padding:20px;
	text-align:center;
}
h1{
	margin:0;
}
main{
	margin:10px;
}
article{
	width:74%;
}
aside{
	width:22%;
	margin:100px;
}
aside p{
	padding:12px 10px;
}
.main-contents{
	display:flex;
	margin-bottom:20px;
}
h2{
	color:#fff;
}
.page-heading{
	background-color:#333;
	color:#fff;
	padding:20px;
	text-align:center;
	margin-left:40rem;
}

footer{
	background-color:#333;
	color:#fff;
	padding:26px 0;
	text-align:center;
}
footer p{
	color:#fff;
	font-size:1rem;
}
h3{
	margin:0;
}
p{
	color:#fff;
}
.page-title{
	font-size:4rem;
	font-family:'Philosopher',serif;
	text-transform:uppercase;
	font-weight:normal;
	margin:40px;
}
.sub-title{
	font-size:2rem;
	padding:0 8px 8px;
	border-bottom:2px #6DD5FA solid;
	font-weight:normal;
}
.sub-menu{
	margin-bottom:60px;
	list-style:none;
}
.sub-menu a{
	color:#fff;
	padding:10px;
	display:block;
}
.li1{
	margin:10px;
	background-color:#143268;
	border-radius:5px;
}
.li1:hover{
	background-color:#6DD5FA;
}
.li2{
	margin:10px;
	background-color:#ff9933;
	border-radius:5px;
}
.li2:hover{
	background-color:#6DD5FA;
}

.li3{
	margin:10px;
	background-color:#ff5757;
	border-radius:5px;
}
.li3:hover{
	background-color:#6DD5FA;
}

.li4{
	margin:10px;
	background-color:#6fc6be;
	border-radius:5px;
}
.li4:hover{
	background-color:#6DD5FA;
}

.li5{
	margin:10px;
	background-color:#45B649;
	border-radius:5px;
}
.li5:hover{
	background-color:#6DD5FA;
}

.appeal_li{
	color:#333;
	font-size:30px;
	background-color:#fff;
}
.game-container{
	margin:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.game{
	width:calc(80%);
	margin-bottom:20px;
	padding:10px;
	background-color:#432;
	border-radius:5px;
}
.game img{
	width:100%;
	height:auto;
	border-radius:5px;
	margin-bottom:10px;
}
.game a{
	display:inline-block;
	background-color:#fff;
	color:#333;
	padding:5px 10px;
	border-radius:5px;
	text-decoration:none;
	margin-top:10px;
}
.game a:hover{
	background-color:#6DD5FA;
}
.page-title{
	font-size:3rem;
}
@media (max-width:600px){
	.page-title{
		font-size:2.5rem;
		margin-top:30px;
	}
	.page-header wrapper{
		flex-direction:column;
		align-items:center;
	}
	h1{
		font-size:1rem;
		margin-top:10px;
	}
	.main-contents{
		flex-direction:column;
	}
	article,
	aside{
		width:100%;
		margin-top:60px;
		margin:-5px;
	}
	.game{
		width:100%;
	}
	img{
		width:100%;
}
}
