@charset "utf-8";

/* ---------------------------------------------------------
  Contents Area
----------------------------------------------------------*/
#wrapper {
  width: 100%;
  margin: 1em auto 0;
}



/*  カテゴリタイトル
------------------------------------------------ */
#gameList h1 {
  margin-bottom: 1em;
  padding: 0.5em 0;
  text-align: center;
}
  #gameList h1.index {
    border-top: solid 3px #34809e;
    border-bottom: solid 3px #34809e;
    color: #34809e;
  }
  #gameList h1.rating {
    border-top: solid 3px #ae3838;
    border-bottom: solid 3px #ae3838;
    color: #ae3838;
  }
  #gameList h1.avg {
    border-top: solid 3px #339e33;
    border-bottom: solid 3px #339e33;
    color: #339e33;
  }
  #gameList h1.review {
    border-top: solid 3px #5ab5c2;
    border-bottom: solid 3px #5ab5c2;
    color: #5ab5c2;
  }
  #gameList h1.access {
    border-top: solid 3px #991b97;
    border-bottom: solid 3px #991b97;
    color: #991b97;
  }
  #gameList h1.old {
    border-top: solid 3px #af7337;
    border-bottom: solid 3px #af7337;
    color: #af7337;
  }
  #gameList h1.download {
    border-top: solid 3px #656566;
    border-bottom: solid 3px #656566;
    color: #656566;
  }
  #gameList h1 span {
    display: block;
    font-size: 2rem;
  }



/*  ソートボタン
------------------------------------------------ */
#sortAction {
  margin: 0 auto 2em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  width: 96%;
}
  #sortAction li {
    width: 33.33%;
    padding: 0.5em;
    list-style: none;
    text-align: center;
  }
    #sortAction li img {
      max-width: 100%;
      height: auto;
    }



/*  ゲーム記事リスト
------------------------------------------------ */
#catalog {
  margin-bottom: 3em;
	width: 100%;
	border: none;
	padding: 0;
  text-align: left;
}
  #catalog li {
  	margin-bottom: 0.25em;
  	width: 100%;
  	vertical-align: top;
  	padding: 0.5em;
  	padding-bottom: 0.25em;
    border-bottom: solid 4px #efefef;
  }
    #catalog li a {
      display: block;
      width: 100%;
      overflow: hidden;
      text-decoration: none;
    }
    #catalog li a div.ageLimit {
      border-radius: 3px;
      display: block;
      width: auto;
      padding: 0.15em 0;
      margin-bottom: 0.25em;
      box-sizing: border-box;
      background: #bf0000;
      color: #fff;
      text-decoration: none;
      text-align: center;
      font-size: 1.2rem;
      font-weight: bold;
    }
      #catalog li a div.R12 {
        background: #008b3a;
      }
      #catalog li a div.R15 {
        background: #ce0000;
      }
      #catalog li a div.R17 {
        background: #000;
      }
    
    #catalog li a img.gameImg {
      float: left;
      width: 50%;
      height: 100%;
      max-height: 100px;
      object-fit: cover;
      margin-bottom: 0.5em;
      margin-right: 1em;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
    }
    #catalog li a span.title {
      display: block;
      margin: 0.25em 0;
      line-height: 1.2;
      font-weight: bold;
      font-size: 1.5rem;
      text-align: left;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    #catalog li a span.desc {
      font-size: 1.3rem;
      line-height: 1.2;
      text-align: left;
      color: #333;
      overflow: hidden;
    }

/*  ゲーム記事リスト（インフィード広告)
------------------------------------------------ */
#catalog li.adInfeed {
  	width: 100%;
  	vertical-align: bottom;
  	padding: 0;
  	padding-bottom: 0;
}


/*  記事リストのカテゴリ表示
------------------------------------------------ */
div.category span {
  display: inline-block;
  height: 1.6em;
  padding: 0 1em;
	line-height: 1.7em;
	font-size: 1.2rem;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}
  /* --- ロールプレイング */
  div.category span.roleplaying {
  	background-color: #eb7212;
  }
  /* --- アドベンチャー */
  div.category span.adventure {
  	background-color: #342709;
  }
  /* --- シミュレーション */
  div.category span.simulation {
  	background-color: #1a1a1a;
  }
  /* --- アクション */
  div.category span.action {
  	background-color: #c22905;
  }
  /* --- 対戦格闘 */
  div.category span.fighting {
  	background-color: #690f02;
  }
  /* --- シューティング */
  div.category span.shooting {
  	background-color: #176c9c;
  }
  /* --- パズル */
  div.category span.puzzle {
  	background-color: #1b5028;
  }
  /* --- ブラウザ */
  div.category span.browser {
  	background-color: #322e7c;
  }
  /* --- オンライン */
  div.category span.onlinegame {
  	background-color: #b18107;
  }
  /* --- 海外 */
  div.category span.foreign {
  	background-color: #134b53;
  }
  /* --- スマホアプリ */
  div.category span.spapp {
  	background-color: #6f8a93;
  }
div.category span.entrydate {
  display: inline;
  padding-left: 0.5em;
	font-size: 1.2rem;
	font-weight: bold;
	color: #000;
}



/*  ソートした場合の変化する表示部
------------------------------------------------ */
div.sortResult {
  text-align: center;
  overflow: hidden;
  padding-bottom: 0.1em;
  font-size: 1.2rem;
  color: #333;
}
div.sortResult span.entrydate {
  display: inline;
	font-size: 1.2rem;
	font-weight: bold;
	color: #000;
}
div.sortResult span.score1 {
  padding-right: 2px;
  font-weight: bold;
  font-size: 2rem;
  color: #d6280c;
}
div.sortResult span.score2 {
  padding-right: 3px;
  font-weight: bold;
  font-size: 1.4rem;
  color: #d6280c;
}
div.sortResult span.ten {
  font-weight: bold;
  font-size: 1.2rem;
  color: #d6280c;
}
div.sortResult span.reviewCount {
  padding-right: 5px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #11a6d7;
}
div.sortResult span.review {
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
}
div.sortResult span.downloadCount {
  padding-right: 5px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #d6280c;
}
div.sortResult span.download {
  font-size: 1.2rem;
  color: #d6280c;
  font-weight: bold;
}
div.sortResult span.access {
  padding-right: 0.2em;
  font-weight: bold;
  font-size: 1.8rem;
  color: #333;
}
div.sortResult span.pv {
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
}


/*  記事リストの対応OS表示
------------------------------------------------ */
#catalog li div.os {
  clear: left;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
  #catalog li div.os img {
    width: 70px;
    height: 22px;
    vertical-align: middle;
    padding-right: 0.5em;
    padding-bottom: 0.25em;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  #catalog li div.os span.oswin {
    padding-right: 1em;
    font-size: 1.4rem;
    color: #00adef;
  }
    #catalog li div.os span.oswin img {
      padding-right: 0;
    }



/*  別のカテゴリ一覧へのリンク
------------------------------------------------ */
#categoryLink {
  margin: 0 auto 3em;
  width: 100%;
}
  #categoryLink div.category {
    margin-bottom: 0.5em;
    text-align: center;
  }
    #categoryLink div.category img {
      width: 100px;
      height: 19px;
    }
  #categoryLink ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 96%;
  }
    #categoryLink li {
      width: 33.33%;
      padding: 0.5em;
    }
      #categoryLink li a {
        display: block;
        position: relative;
        border-radius: 4px;
        color: #fff;
        line-height: 3em;
        -webkit-transition: none;
        transition: none;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        text-decoration: none;
        text-align: center;
        font-weight: bold;
      }
      #categoryLink li a:hover {
        top: 3px;
        box-shadow: none;
      }
      #categoryLink li.newgame a {
        background-color: #fe329c;
        box-shadow: 0 3px 0 #e24299;
      }
      #categoryLink li.roleplaying a {
        background-color: #ed8916;
        box-shadow: 0 3px 0 #cc8430;
      }
      #categoryLink li.adventure a {
        background-color: #1abc9c;
        box-shadow: 0 3px 0 #23a188;
      }
      #categoryLink li.simulation a {
        background-color: #555;
        box-shadow: 0 3px 0 #000;
      }
      #categoryLink li.action a {
        background-color: #c92702;
        box-shadow: 0 3px 0 #ad3011;
      }
      #categoryLink li.fighting a {
        background-color: #ad2817;
        box-shadow: 0 3px 0 #8e3023;
      }
      #categoryLink li.shooting a {
        background-color: #2d93c4;
        box-shadow: 0 3px 0 #3a84a8;
      }
      #categoryLink li.puzzle a {
        background-color: #257841;
        box-shadow: 0 3px 0 #265e3a;
      }
      #categoryLink li.browser a {
        background-color: #4c50a9;
        box-shadow: 0 3px 0 #494f89;
      }
      #categoryLink li.onlinegame a {
        background-color: #b48508;
        box-shadow: 0 3px 0 #937216;
      }
      #categoryLink li.foreign a {
        background-color: #19626d;
        box-shadow: 0 3px 0 #1c4c54;
      }
      #categoryLink li.spapp a {
        background-color: #6f8a93;
        box-shadow: 0 3px 0 #637075;
      }



/*  Ad
------------------------------------------------ */
#adListPageHeader {
  margin: 1em auto;
  width: 100%;
  text-align: center;
}
#adListPageFooter {
  margin: 0 auto 3em;
  width: 100%;
  text-align: center;
}



/* ---------------------------------------------------------
  Media Query 縦向き固定
----------------------------------------------------------*/
/* 縦向き 359px未満 (iPhone 3/4/5/SE) */
@media screen and (max-width: 359px) and (orientation: portrait) {

}
/* 縦向き 360px以上413px未満 (Android iPhone 7/6) */
@media screen and (min-width: 360px) and (max-width: 413px) and (orientation: portrait) {
  /* 基本ベースレイアウト */
}
/* 縦向き 414px以上768px未満 (iPhone 7/6 Plus 小型タブレット) */
@media screen and (min-width: 414px) and (max-width: 767px) and (orientation: portrait) {

}
/* 縦向き 768px以上 (タブレット) */
@media screen and (min-width: 768px) and (orientation: portrait) {

}