@charset "UTF-8";
small {
	font-size: smaller;
}

.gameBox {
	margin: 50px 0 0;
}

.gameSide {
	float: left;
	width: 200px;
	font-size: 2rem;
}

.gameMain {
	float: right;
	width: 715px;
	margin: 0 0 50px;
}

.gameSide h3 {
	font-weight: normal;
	background-color: #f8f8f8;
	border-left: 3px solid #0096da;
	padding: 20px 0 20px 20px;
}

.gameSide li {
	border-bottom: 1px solid #bfbfbf;
	padding: 20px 0 20px 20px;
	cursor: pointer;
}

.gameSide li.active {
	background-color: #d0f0ff;
}

.gameMain h3 {
	font-size: 2.4rem;
	color: #0096da;
	border-bottom: 1px dashed #0096da;
	background: url("../../img/card/tit_icon.png") left center no-repeat;
	padding: 10px 0 5px 40px;
	margin: 0 0 30px;
}

.recommendGame{
  background:#0096da;
  border-radius:20px;
  margin:0 0 40px;
  padding:30px 30px 40px;
}

.gameMain .recommendGame h3{
  color:#fff;
  border-bottom:none;
  background:none;
  padding:0;
	margin: 0 0 15px;
}

.gameMain .gameNotice{
  background:#ffc;
  padding:10px;
  color:#f00;
}

.gameMain .gameCategory {
  margin-bottom:50px;
}

.gameMain .gameList {
	display: flex;
  flex-wrap: wrap;
}

.gameMain .gameList li {
	box-sizing: border-box;
	width: 48%;
	margin: 0 4% 30px 0;
}

.gameMain .gameList li.hide {
	display:none;
}

.gameMain .gameList.column3 li{
  width:32%;
  margin-right:2%;
}

.gameMain .recommendGame .gameList li{
  background:#fff;
  padding:10px;
  margin-bottom:0;
}

.gameMain .gameList li:nth-child(2n) {
	margin-right:0;
}

.gameMain .gameList.column3 li:nth-child(2n){
  margin-right:2%;
}

.gameMain .gameList.column3 li:nth-child(3n){
	margin-right:0;
}

.gameMain .gameList li a {
	position:relative;
  display:block;
	transition:all .2s;
}

.gameMain .gameList li a:hover {
	opacity:.7;
}

.gameMain .gameList li .gameImg {
	position:relative;
  margin:0;
}

.gameMain .gameList li .new {
	position:absolute;
  top:10px;
  left:10px;
  background:#f00;
  color:#fff;
  font-size:1.2rem;
  padding:2px 5px;
  z-index:1;
}

.gameMain .gameList li .gameCat {
	position:absolute;
  bottom:10px;
  left:10px;
  background:rgba(0,0,0,.6);
  color:#fff;
  border-radius:15px;
  padding:5px 10px;
  font-size:1.3rem;
}

.gameMain .gameList li img {
	height:auto;
}

.gameMain .gameList li .gameTit {
  font-weight:bold;
	margin: 10px 0 5px;
}

.gameMain .gameList li .gameDesc {
  font-size: 1.4rem;
}

.gameListBtn {
  margin:10px 0 0;
	text-align: center;
}

.gameListBtn a {
  display:inline-block;
	background-color: #fff;
	border: 3px solid #0096da;
	border-radius: 5px;
	color: #0096da;
	background-image: url("../../img/card/list_arrow02.png");
	background-position: 45px center;
	background-repeat: no-repeat;
	padding: 20px 0;
	font-size: 2.2rem;
	font-weight: bold;
  width:50%;
  box-sizing:border-box;
}

.gameListBtn a:hover {
	background-color: #0096da;
	color: #fff;
	background-image: url("../../img/card/list_arrow.png");
}

.gameOffer{
  border:2px solid #ffcc69;
  margin:50px 0 0 0;
}

.gameOffer .title{
  background:#ffcc69;
  padding:10px;
  font-size:1.4rem;
}

.gameOffer .box{
  padding:15px;
}

.gameOffer .box .logo dd{
  text-align:center;
}

.gameOffer .box .about{
  margin:15px 0 25px;
}

.gameOffer .box .about dt{
  font-weight:bold;
}

.gameOffer .box .env{
  background:#eee;
  padding:15px;
}

.gameOffer .box .env dt{
  cursor:pointer;
}

.gameOffer .box .env dt::before {
	content: "\FF0B";
	font-size: 1.8rem;
	color: #fff;
	display: inline-block;
	background-color: #24A77C;
	padding: 0 5px;
  font-weight:bold;
  border-radius:5px;
}

.gameOffer .box .env dt.open::before {
	content: "\30FC";
}

.gameOffer .box .env .box{
  background:#fff;
  padding:15px;
  margin:15px 0 0 0;
}

.gameMainBox .gameImg img {
	width: 100%;
}

.gameMainBox .gameTit {
	font-size: 3rem;
	text-align: center;
	font-weight: bold;
	margin: 55px 0;
	color: #0096da;
}

/* 上部お知らせパーツ追加20231011 */

.announce {
	padding: 5px 9px;
	display: block;
    margin: 0 auto 10px;
    width: 85%;
    text-align: center;
	background: #da0000;
    border-radius: 5vh;
	position: relative;
}

.announce::after {
	transform: translateY(-25%) rotate(45deg);
	width: 18px;
    height: 18px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
	position: absolute;
    top: 33%;
    right: 7%;
}

.annTtl {
	font-size: 1.8rem;
    width: 41%;
    text-align: center;
    margin: 0 auto;
	font-weight: bold;
	color: #fff!important;
}

.announce p {
	margin-top: 2px;
    font-size: 1.3rem;
    color: #fff;
}

.small {
	font-size: smaller;
}

/* --上部お知らせパーツここまで-- */

@media (max-width: 767px) {
	#gHeader {
	    padding: 9px 0 8px 10px!important;
	}
	.gameBox {
		margin: 40px 10px 0;
	}
	.gameSide {
	    font-size: 1.6rem;
	}
	.gameSide dt {
		display: block;
		font-weight: normal;
    	background-color: #f8f8f8;
	    border-left: 3px solid #0096da;
	    padding: 15px 0 15px 20px;
		position: relative;
		cursor:pointer;
	}
	.gameSide dt::after {
		content: "＋";
		font-size: 2.5rem;
		color: #000;
		display: block;
		background-color: #fff;
		position: absolute;
		top: 8px;
		right: 10px;
		text-align: center;
		padding: 0 10px;
	}
	.gameSide dt.active::after {
		content: "ー";
	}
	.gameSide dd {
		display: none;
	}
	.gameSide li {
    	padding: 15px 0 15px 20px;
	}
	.gameSide , .gameMain {
		float: none;
		width: 100%;
	}
	.gameMain {
		margin: 55px 0 50px;
	}
  .gameMain .recommendGame{
    padding:15px;
    margin-bottom:20px;
  }
  .gameMain .gameList li {
    width:100%;
    margin-right:0;
  }
  .gameMain .recommendGame .gameList li:nth-of-type(1) {
    margin-bottom:15px;
  }
  .gameMain .gameList li a {
    display:grid;
    grid-template-columns: 130px 1fr;
    gap:10px;
  }
  .gameMain .gameList li .gameTit {
    font-size:1.6rem;
    margin-top:0;
  }
  .gameMain .gameList li .gameCat {
    bottom:5px;
    left:5px;
    padding:2px 5px;
    font-size:1.2rem;
  }
  .gameMain .gameList li .new {
  	position:static;
    margin-left:10px;
  }

  .gameMain .gameNotice{
    margin:0 -10px 20px;
  }
  .gameListBtn a {
    width:100%;
  }

/* --上部お知らせパーツ-- */
  .annTtl {
	font-size: 1.5rem;
  }

  .announce {
	padding: 8px 20px;
	border-radius: 3vh;
  }

  .announce::after {
    width: 8px;
    height: 8px;
    top: 44%;
  }

  .announce p {
    font-size: 1.2rem;
  }

/* --上部お知らせパーツここまで-- */
}