/*===========================================

  共通

===========================================*/
html {
  font-size: 62.5%;
}

body{
  padding-top: 86px;
  color: #333;
  font-family: "Hiragino Sans","メイリオ",Meiryo,YuGothic,"Yu Gothic",sans-serif;
  font-weight: 500;
  background-color: #f5f5f5;
  overflow-x: hidden;
  word-break: break-word;
  line-height: 1.4;
}

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 30px;
}

main,.main{
  position: relative;
  margin-bottom: 30px;
}

.main-section{
  margin: 30px 0;
}

.main-section:first-child{
  margin-top: 0;
}

.main-section:last-child{
  margin-bottom: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

img {
  vertical-align: top;
  width: 100%;
  height: auto;
}

a{
  transition: all .2s;
}

@media (hover: hover) and (pointer: fine) {
  a:hover{
    transition: all .2s;
  }
}

svg{
  display: inline-block;
}


/* PC */
@media screen and (min-width: 960px) {
  body{
    padding-top: 70px;
  }

  .container{
    flex-direction: row;
    margin: 0 auto;
    max-width: 1200px;
    box-sizing: content-box;
    padding: 50px 20px;
  }

  main,
  .main{
    width: 66%;
    margin-bottom: 0;
  }

  .main-section{
    margin: 40px 0;
  }

  sub,
  .sub{
    width: 32%;
    min-width: 300px;
    margin-left: 24px;
  }
}

/*===========================================

  header

    1.logo
    2.nav
    3.pickup-tags
    4.search

===========================================*/

:root {
  scroll-padding: 80px;
}

header{
  background-color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 50px;
  padding: 0 50px 0 0;
  justify-content: space-between;
  transition: transform 0.1s;
}

header.hidden{
  transition: transform 0.3s;
  transform: translateY(-86px);
}

@media screen and (min-width: 520px) {
  header.hidden{
    transform: translateY(0);
  }
}

@media screen and (min-width: 960px) {
  header{
    justify-content: flex-start;
    height: 70px;
    border-bottom: 1px solid #ccc;
    padding: 0 90px 0 0;
  }  
}

/*logo
-------------------------------------------*/
header .logo{
  height: 50px;
  flex-shrink: 0;
}

header .logo a{
  height: 100%;
  display: flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  header .logo a:hover{
    opacity: 0.7;
  }
}

header .logo img{
  width: auto;
  height: 50px;
}

/* PC */
@media screen and (min-width: 960px) {
  header .logo{
    height: 70px;
    border-right: 1px solid #E5E5E5;
  }

  header .logo img{
    height: 70px;
  }
}


/*nav
-------------------------------------------*/
header nav ul{
  display: flex;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 50px;
  white-space: nowrap;
}

header nav ul li{
  position: relative;
  border-left: 1px solid #E5E5E5;
  width: 70px;
  text-align: center;
  transition: all .2s;
}

header nav ul li::before{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  height: 4px;
  background-color: #1b94e0;
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: left top;/*左上基点*/
}

header nav ul li a{
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  header nav ul li:hover{
    color: #1b94e0;
    background-color: #EBFAFF;
  }
  header nav ul li:hover:before{
    transform: scale(1, 1);
  }
  }

@media screen and (min-width: 960px) {
  header nav ul{
    font-size: 1.8rem;
    border-right: 1px solid #E5E5E5;
    line-height: 70px;
  }

  header nav ul li{
    width: 120px;
  }
  header nav ul li:first-child{
    border: none;
  }
}


/*pickup-tags
-------------------------------------------*/
header .pickup-tags{
  position: absolute;
  top: 50px;
  left: 0;
  display: flex;
  width: 100%;
  height: 36px;
  background-color: #141446;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

header .pickup-tags li{
  position: relative;
}

header .pickup-tags li+li::before{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  width: 1px;
  height: 10px;
  background-color: #6d6d6d;
}

header .pickup-tags a{
  display: block;
  padding: 0 14px;
  line-height: 36px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  header .pickup-tags a:hover{
    color: #1b94e0;
    text-decoration: underline;
  }
}

@media screen and (max-width: 960px) {
  header .pickup-tags{
    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
  }

  /*スクロールバー非表示（Chrome・Safari）*/
header .pickup-tags::-webkit-scrollbar{
  display:none;
}
}

@media screen and (min-width: 960px) {
  header .pickup-tags{
    align-items: center;
    position: static;
    height: 70px;
    background-color: transparent;
    padding: 14px 14px 0;
  }

  header .pickup-tags::-webkit-scrollbar{
    height: 14px;
  }

  header .pickup-tags:hover::-webkit-scrollbar-thumb{
    background: rgba(229, 229, 229, 1);
    border: solid transparent; /* 透明なボーダーをつける */
    border-width: 5px 6px 6px 6px;
    background-clip: padding-box; /* 背景を切り取る */
  }

  header .pickup-tags li+li::before{
    height: 12px;
    background-color: #E4E4E4;
  }

  header .pickup-tags a{
    line-height: 28px;
    color: #333;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 500;
  }
}

/*search
-------------------------------------------*/
.search-btn-check{
  display: none;
}

.search-btn-label{
  position: absolute;
  cursor: pointer;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-left: 1px solid #E5E5E5;
}

.search-btn-label::before{
  content: "";
  background-color: #707070;
  display: inline-block;
  height: 24px;
  width: 24px;
  -webkit-mask: url("/svg/icon_search.svg");
  mask: url("/svg/icon_search.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: .2s;
}

@media (hover: hover) and (pointer: fine) {
  .search-btn-label:hover{
    background-color: #333;
    transition: .2s;
  }

  .search-btn-label:hover:before{
    background-color: #fff;
    transition: .2s;
  }
}

.search-btn-check:checked+.search-btn-label{
  background-color: #333;
}

.search-btn-check:checked+.search-btn-label::before{
  background-color: #fff;
  -webkit-mask: url("/svg/icon_close.svg");
  mask: url("/svg/icon_close.svg");
}

.search-btn-check+.search-btn-label+.search-content{
  display: none;
}

.search-btn-check:checked+.search-btn-label+.search-content{
  display: block;
}

.search-content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh + 86px);
  background-color: #333;
  padding: 49px 13px;
  margin-top: 50px;
  z-index: 11;
}

.search-content>div{
  margin: 0 auto;
  max-width: 520px;
}

.search-content>div>*+*{
  margin-top: 25px;
}

.search-content>div>.word-search{
  margin-bottom: 25px;
}

.word-search-heading,
.tags-heading{
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
}

.word-search-heading{
  font-size: 2.8rem;
}

.word-search input[type="radio"] {
  display: none;
}

.word-search label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 600;
  padding-left: 26px;
  margin: 0 20px 10px 0;
  color: #fff;
}

.word-search label:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform:translateY(-50%);
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid #ccc;
}

.word-search input[type="radio"]:checked + label:after {
  position: absolute;
  top: 50%;
  left: 3px;
  transform:translateY(-50%);
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #03A9F4;
}

fieldset>div{
  position: relative;
}

.word-search .field{
  width: 100%;
  height: 50px;
  color: #7d7d7d;
  background-color: #fff;
  border-radius: 5px;
  padding: 0 13px;
  font-size: 1.4rem;
}

.word-search .field+button{
  position: absolute;
  top: 50%;
  right: 0;
  transform:translateY(-50%);
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid #ccc;
  text-align: center;
}

.word-search .field+button svg{
  width: 24px;
  height: 24px;
  fill: #707070;
  transition: .2s;
}

@media (hover: hover) and (pointer: fine) {

  .tags-heading a:hover{
    color: #03A9F4;
  }

  .word-search .field+button:hover svg{
    fill: #03A9F4;
    transition: .2s;
  }
}

@media screen and (min-width: 960px) {
  .search-btn-label{
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F0F0F0;
  }

  .search-btn-check:checked+.search-btn-label+.search-content{
    margin-top: 70px;
    padding: 70px 20px;
    height: calc(100vh + 70px);
  }
}

/*===========================================

  広告

===========================================*/

/*ジャック*/
.ad-jack {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.ad-jack>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*アドジャック*/
.ad-jack-adn{
  background-color: #fff;
  width: 100%;
  min-height: 312px;
  text-align: center;
  overflow: hidden;
}

@media screen and (min-width: 520px) and (max-width: 959px) {
  .ad-jack-adn{
    min-height: 280px;
  }
}

@media screen and (min-width: 960px) {
  .ad-jack-adn{
    min-height: 340px;
    padding: 30px;
  }
}

.ad-jack-main{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 520px) {
  .game-list .ad-jack-main,
  .news-list .ad-jack-main{
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

/*ジャックサイド*/
.ad-jack-siderail{
  display: none;
}

@media screen and (min-width: 960px) {
.container-wrap{
  padding-bottom: 660px;
}

.container-wrap::after{
  content: '';
  display: block;
  margin-bottom: -660px;
}

.ad-jack-siderail{
  display: block;
  position: sticky;
  top: 70px;
  left: 0;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  z-index: 5;
}

.ad-jack-siderail__right,
.ad-jack-siderail__left{
  position: absolute;
  width: 300px;
  height: 600px;
  padding: 30px 0;
  box-sizing: content-box;
}

.ad-jack-siderail__right{
  right: -320px;
}

.ad-jack-siderail__left{
  left: -320px;
}
}

/*動画*/
.ad-video{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 520px) {
  .game-list .ad-video,
  .news-list .ad-video{
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

/*サブ*/
.ad-sub{
  text-align: center;
  overflow: hidden;
}

/*インフィード*/

.ad-infeed{
  overflow: hidden;
}

.news-list .ad-infeed{
  background-color: #fff;
}
@media screen and (min-width: 960px) {
  .recommend-list .ad-infeed{
    background-color: #fff;
  }
}

/*記事*/
.ad-article-top,
.ad-article-bottom{
  overflow: hidden;
  margin: 30px 0;
}

.ad-multiplex{
  overflow: hidden;
  margin-bottom: 20px;
}

.ad_pager{
  margin: 20px 0;
}

.ad_list_bottom{
  margin: 20px 0;
}

@media screen and (min-width: 960px) {
  .ad_pager{
    margin: 20px 18px;
  }
  
  .ad_list_bottom{
    margin: 20px 18px;
  }
}

/*特設サイト
-------------------------------------------*/

.special-site{
  margin: 30px 13px;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .special-site a:hover{
    opacity: 0.7;
  }  
}

.special-site img{
  max-width: 600px;
  height: auto;
}

@media screen and (min-width: 960px) {

  .special-site{
    margin: 30px 0;
  }

  aside .special-site img{
    width: 300px;
    height: 100px;
  }
}

/*===========================================

  共通パーツ

===========================================*/

/*item-box
-------------------------------------------*/

.item-box{
  position: relative;
  transition: .2s;
}

.img-box{
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.img-box img{
  transition: transform .5s;
}

.img-box-catchcopy{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 16px 8px 8px;
  text-shadow: 0 0 3px rgb(0, 0, 0);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.text-box .title{
  font-weight: 600;
  line-height: 1.3;
}

.text-box .title>a{
  display: block;
}

.text-box .info{
  color: #8e8e8e;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: right;
  flex-wrap: wrap;
  font-size: 1.2rem;
}

.text-box .info>*+*{
  margin-left: 5px;
}

.text-box .hot{
  color: #ff738a;
  font-weight: 600;
}

.text-box .new{
  color: #ffa945;
  font-weight: 600;
}

.info .date{
  position: relative;
  margin-right: 7px;
  padding-left: 17px;
}

.info .date svg{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: #8e8e8e;
}

.text-box .info .comment{
  width: 33px;
}

.text-box .sponsored{
  color: #8e8e8e;
  line-height: 1;
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  .item-box:hover{
    box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 10%);
    transition: .2s;
    z-index: 1;
  }

  .img-box:hover img{
    transform: scale(1.1,1.1);
    transition: transform .5s;
  }

  .title:hover a{
    color: #1b94e0;
  }
}


/*tags
-------------------------------------------*/

.news-tag,
.game-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-tag a,
.game-tag a{
  display: block;
  color: #116DA7;
  font-size: 1.2rem;
  line-height: 2.2;
  padding: 0 10px;
  border-radius: 100vh;
  text-align: center;
}

.news-tag a{
  border: 1px solid #116DA7;
  background-color: #fff;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .news-tag a:hover{
    background-color: #ebfaff;
  }
}

.game-tag a{
  background-color: #EDF3FF;
}

.game-tag a.free{
  color: #DB000F;
  background-color: #ffebeb;
}

.game-tag a.app{
  color: #E36600;
  background-color: #FFF8EB;
}

.game-tag a.browser{
  color: #088018;
  background-color: #dfffe3;
}

.game-tag a.ios,
.game-tag a.android,
.game-tag a.steam,
.game-tag a.mac{
  position: relative;
  color: #282828;
  background-color: #f0f0f0;
}

.game-tag a.ios::before,
.game-tag a.android::before,
.game-tag a.steam::before,
.game-tag a.mac::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-color: #fff;
}

.game-tag a.ios::after,
.game-tag a.android::after,
.game-tag a.steam::after,
.game-tag a.mac::after{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 8px;
  height: 8px;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.game-tag a.ios::after{
  background-color: #6fcdf4;
}

.game-tag a.android::after{
  background-color: #68dda0;
}

.game-tag a.steam::after{
  background-color: #4778b1;
}

.game-tag a.mac::after{
  background-color: #888;
}

@media (hover: hover) and (pointer: fine) {

  .game-tag a:hover{
    color: #fff;
    background-color: #1b94e0;
  }

  .game-tag a.free:hover{
    background-color: #E60012;
  }

  .game-tag a.app:hover{
    background-color: #FF7300;
  }

  .game-tag a.browser:hover{
    background-color: #088018;
  }

  .game-tag a.ios:hover,
  .game-tag a.android:hover,
  .game-tag a.steam:hover,
  .game-tag a.mac:hover{
    background-color: #707070;
  }
}

/*status
-------------------------------------------*/

.formal,
.formal a{
  color: #0DA324;
}

.formal svg{
  fill: #0DA324;
}

.entry,
.entry a{
  color: #F78000;
}

.entry svg{
  fill: #F78000;
}

.test,
.test a{
  color: #9740ED;
}

.test svg{
  fill: #9740ED;
}

.close,
.close a{
  color: #707070;
}

.close svg{
  fill: #707070;
}


/*rank
-------------------------------------------*/
.rank-num{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 40px;
  height: 30px;
  font-size: 1.4rem;
  line-height: 30px;
  font-weight: 600;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.8);
  text-align: center;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.rank1{
  background-color: rgba(249, 91, 101, 0.8);
}

.rank2{
  background-color: rgba(255, 132, 69, 0.8);
}

.rank3{
  background-color: rgba(248, 181, 52, 0.8);
}

@media screen and (min-width: 520px) {
  .rank-num{
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 1.8rem;
  }
}

/*ribbon
-------------------------------------------*/

.ribbon{
  position: absolute;
  top: 0;
  right: 13px;
  display: inline-block;
  width: 48px;
  line-height: 40px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  z-index: 1;
}

.ribbon::before,
.ribbon::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.ribbon::before{
  left: 0;
  bottom: -8px;
  border-width: 8px 24px 0 0;
}

.ribbon::after{
  right: 0;
  bottom: -8px;
  border-width: 0 24px 8px 0;
}

/*注目*/
.ribbon.attention{
  color: #734D11;
  background: linear-gradient(-30deg, #F2E325 0%, #F2E325 70%, #F4EB6E 30%, #F4EB6E 100%);
  background-color: #F2E325;
}

.ribbon.attention::before{
  border-color: #F2E325 transparent transparent transparent;
}

.ribbon.attention::after{
  border-color: transparent #F2E325 transparent transparent;
}

/*新作*/
.ribbon.new{
  color: #742931;
  background: linear-gradient(-30deg, #ffaed5 0%, #ffaed5 70%, #ffbedd 30%, #ffbedd 100%);
  background-color: #ffaed5;
}

.ribbon.new::before{
  border-color: #ffaed5 transparent transparent transparent;
}

.ribbon.new::after{
  border-color: transparent #ffaed5 transparent transparent;
}

/*star
-------------------------------------------*/
.star{
  display: inline-block;
  position: relative;
  margin-right: 5px;
}

.star::before{
  display: inline-block;
  content: "★★★★★";
  color: #E5E5E5;
}

.star::after{
  display: inline-block;
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  color: #FFA620;
  overflow: hidden;
  white-space: nowrap;
}

.star00::after{
  width: 0;
}

.star05::after{
  width: 10%;
}

.star10::after{
  width: 20%;
}

.star15::after{
  width: 30%;
}

.star20::after{
  width: 40%;
}

.star25::after{
  width: 50%;
}

.star30::after{
  width: 60%;
}

.star35::after{
  width: 70%;
}

.star40::after{
  width: 80%;
}

.star45::after{
  width: 90%;
}

.star50::after{
  width: 100%;
}

/*comment
-------------------------------------------*/

.comment{
  color: #8e8e8e;
  white-space: nowrap;
}

.comment svg{
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  fill: #8e8e8e;
  margin-right: 2px;
}

.comment.active{
  color: #1b94e0;
}

.comment.active span{
  font-weight: 600;
}

.comment.active svg{
  fill: #1b94e0;
  transition: .2s;
}

@media (hover: hover) and (pointer: fine) {
  .comment a:hover{
    color: #00C3FF;
  }

  .comment a:hover svg{
    fill: #00C3FF;
    transition: .2s;
  }
}

/*play-btn
-------------------------------------------*/
.play-btn{
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1!important;
  text-align: center;
  border-radius: 5px;
  color: #7A7A7A;
  background-color: #E3E3E3;
}

.play-btn a{
  display: block;
  color: #fff!important;
  background-color: #16c263;
  border-radius: 5px;
  box-shadow: 0 3px 0 #22a35c;
  transform: translateY(-3px);
}

.play-btn a.play-btn-entry{
  background-color: #F78000;
  box-shadow: 0 3px 0 #de790e;
}

.play-btn a.play-btn-download{
  background-color: #ff367a;
  box-shadow: 0 3px 0 #cf2c62;
}

.play-btn a:hover{
  background-color: #22e178;
  color: #fff;
  box-shadow: none;
  transform: translateY(0);
}
.play-btn a.play-btn-entry:hover{
  background-color: #ff9c32;
}

.play-btn a.play-btn-download:hover{
  background-color: #ff699b;
}

.play-btn-inner{
  display: block;
  padding: 16px 13px;
}

.play-btn-inner>span{
  display: block;
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.play-btn-ad{
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: 'AD';
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 500;
}

@media screen and (min-width: 960px) {
  .play-btn{
    font-size: 2rem;
  }
}

/*share-box
-------------------------------------------*/
.share-box{
  padding: 20px;
  border-radius: 5px;
  background-color: #ebfaff;
}

.share-box>h3{
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 10px;
}

.share {
  display: flex;
  gap: 10px;
}

.share li{
  width: calc(100%/4);
}

.share li a,
.share li span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border-radius: 3px;
}

.share li span{
  transition: background-color .2s;
}

@media (hover: hover) and (pointer: fine) {
  .share a:hover{
    opacity: 0.7;
  }

  .share li span:hover{
    background-color: #f0f0f0;
    transition: background-color .2s;
  }
}

.share svg{
  width: 25px;
  height: 25px;
  fill: #fff;
}

.share a.X{
  background-color: #3d4247;
}

.share a.facebook{
  background-color: #3B5998;
}

.share a.line{
  background-color: #3FB900;
}

.share span.linkcopy{
  background-color: #E5E5E5;
  cursor: pointer;
  position: relative;
}

.share span.linkcopy svg{
  fill: #8e8e8e;
}

@keyframes fade-tooltip {
  to { opacity: 0; }
}

.js-copied::before{
  content:'コピー';
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  line-height: 30px;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  animation-name: fade-tooltip;
  animation-duration: .5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  background: #333;
  color: #fff;
  border-radius: 3px;
}

@media screen and (min-width: 960px) {
  .share-box>h3{
    font-size: 2rem;
  }

  .share-box .share a,
  .share-box .share span{
    height: 40px;
  }

  .share-box .js-copied::before{
    line-height: 40px;
  }
}

/*more-btn
-------------------------------------------*/
.more-btn {
  padding: 0 13px;
}

.more-btn a{
  display: block;
  color: #003c8d;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center; 
  border: 1px solid #003c8d;
  border-radius: 5px;
  padding: 13px;
  width: fit-content;
  margin: 20px auto;
  background-color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .more-btn a:hover{
    background-color: #eaf1fa;
  }
}

@media screen and (min-width: 960px) {
  .more-btn a{
    font-size: 1.8rem;
    min-width: 400px;
  }
}

/*more-btn_s
-------------------------------------------*/

.more-btn-s{
  position: relative;
  text-align: right;
  font-size: 1.5rem;
  color: #1b94e0;
}

.more-btn-s a,
.more-btn-s span{
  padding-right: 20px;
}

.more-btn-s a::after,
.more-btn-s span::after{
  position: absolute;
  top: 50%;
  right: 5px;
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #84cfff;
  border-right: solid 2px #84cfff;
  transform: translateY(-50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .more-btn-s a:hover{
    color: #00C3FF;
  }
}

/*pager
-------------------------------------------*/
.nextpage-btn{
  margin: 20px 13px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  background-color: #003c8d;
  border-radius: 5px;
  text-align: center;
  line-height: 62px;
  transition: .3s;
}

.nextpage-btn a{
  display: block;
}

.pager{
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  margin: 20px 13px;
  border-radius: 10px;
  gap: 0 5px;
}

.pager li{
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
}


.pager li a{
  display: block;
  color: #003c8d;
}

@media (hover: hover) and (pointer: fine) {
  .pager li a:not(.now):hover{
    background-color: #cfe2ff;
  }

  .nextpage-btn:hover{
    background-color: #1565de;
    transition: .3s;
  }
}

.pager .prev,
.pager .next{
  width: 70px;
  color: #B3B3B3;
  background-color: #e1e1e1;
  flex-shrink: 0;
}

.pager .prev a,
.pager .next a{
  font-weight: 600;
  background-color: #fff;
  line-height: 43px;
  border-radius: 5px;
  border: 1px solid #003c8d;
}

.pager li:has(.now){
  flex-shrink: 0;
}

.pager .now{
  font-weight: 600;
  font-size: 1.8rem;
  background-color: #cfe2ff;
}

@media screen and (min-width: 960px) {
  .nextpage-btn{
    line-height: 54px;
    margin: 20px 0;
  }

  .pager{
    font-size: 1.8rem;
    gap: 0 8px;
    margin: 20px 0;
  }

  .pager li{
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  .pager .prev,
  .pager .next{
    width: 100px;
  }

  .pager .prev a,
  .pager .next a{
    line-height: 48px;
  }
}

/*関連タグ
-------------------------------------------*/
.tag-list{
  margin: 20px 10px;
  background-color: #fff;
  padding: 16px;
  border-radius: 10px;
}

.game-list .tag-list{
  margin: 0;
  border-radius: 0;
  box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 10%);
}

.tag-list h2{
  font-size: 1.6rem;
  color: #003c8d;
  margin-bottom: 8px;
}

.tag-list ul{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.4rem;
  line-height: 2.6;
}

.tag-list ul li a{
  display: block;
  color: #116DA7;
  border-radius: 100vh;
  padding: 0 14px;
  min-width: 70px;
  text-align: center;
  background-color: #EDF3FF;
}

@media (hover: hover) and (pointer: fine) {
  .tag-list ul li a:hover{
    color: #fff;
    background-color: #1b94e0;
  }
}

@media screen and (min-width: 960px) {
  .tag-list{
    margin: 30px 0;
    padding: 16px;
  }
}

/*===========================================

  pickup-slider

===========================================*/

.pickup-slider{
  background-color: #dde8f0;
  overflow: hidden;
  padding: 30px 0;
}

.pickup-slider .swiper{
  overflow: visible;
  width: 80%;
  min-width: 300px;
  max-width: 400px;
}

.pickup-slider .swiper-slide{
  height: auto;
}

.pickup-slider-item{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 10%);
  background-color: #fff;
  margin: 0 10px;
}

@media (hover: hover) and (pointer: fine) {
  .pickup-slider-item:hover{
    box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 20%);
  }
}

.pickup-slider-item .text-box{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 13px;
  flex-grow: 1;
}

.pickup-slider-item .title{
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.pickup-slider-item .news-tag a{
  line-height: 1.5;
  padding: 0 6px;
}

.pickup-slider-item .news-tag{
  margin-bottom: 10px;
}

.article-cat{
  position: absolute;
  line-height: 20px;
  padding: 0 8px;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
}

.text-box .article-cat{
  top: -20px;
  left: 0;
}

.img-box .article-cat{
  top: 0;
  left: 0;
}

.article-cat.news{
  background-color: #3aaef6;
}

.article-cat.special{
  background-color: #e7ae07;
}

@media screen and (min-width: 960px) {
  .pickup-slider{
    padding: 50px 0;
  }

  .pickup-slider .swiper{
    width: 820px;
    max-width: none;
  }

  .pickup-slider-item{
    flex-direction: row;
    margin: 0 15px;
    max-height: 300px;
  }

  .pickup-slider-item .img-box{
    width: 480px;
    height: auto;
  }

  .pickup-slider-item .text-box{
    padding: 18px;
  }

  .pickup-slider-item .title{
    font-size: 2rem;
    margin-top: 28px;
  }

  .text-box .article-cat{
    top: 18px;
    left: 18px;
  }
}

/*===========================================

  main

    1.list
      1.1 news-list
      1.2 game-list

    2.full
      2.1 game-header
      2.2 article共通デザイン
      2.3 game-full
      2.4 news-full
      2.5 information-full

===========================================*/

/*----- 見出し -----*/
.content-heading{
  font-size: 2.4rem;
  margin: 0 13px 10px 13px;
  color: #003c8d;
  line-height: 1.3;
  display: flex;
    /* background-color: #dde8f0;
  padding: 10px; */
}

.content-heading::after{
content: "";
height: 1px;
display: inline-block;
margin: auto 0 14px 20px;
background-color: #003c8d;
flex-grow: 1;
}

.content-heading a{
  color: #003c8d;
}

@media (hover: hover) and (pointer: fine) {
  .content-heading a:hover{
    color: #1b94e0;
  }
}

/* PC */
@media screen and (min-width: 960px) {
  .content-heading{
    font-size: 2.6rem;
    margin: 0 0 10px 0;
  }
}


/*----- パンくず -----*/

.breadcrumb{
  position: absolute;
  top: -30px;
  left: 0;
  display: flex;
  font-size: 1.2rem;
  line-height: 30px;
  width: 100%;
  color: #767676;
  background-color: #eee;
  border-bottom: 2px solid #fff;
  padding: 0 13px;
  z-index: 2;
  overflow: scroll;
  white-space: nowrap;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}

/*スクロールバー非表示（Chrome・Safari）*/
.breadcrumb::-webkit-scrollbar{
  display:none;
}

.breadcrumb li{
  position: relative;
}

.breadcrumb *+*{
  margin-left: 30px;
}

.breadcrumb *+*::before{
  position: absolute;
  top: 50%;
  left: -20px;
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  transform: translate(0,-50%) rotate(45deg);
}

.breadcrumb a{
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover{
    opacity: 0.5;
  }
}

/* PC */
@media screen and (min-width: 960px) {
  .breadcrumb{
    position: absolute;
    top: -30px;
    left: 0;
    margin-top: 0;
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

/*-------------------------------------------

  list

-------------------------------------------*/

/*list-header
-------------------------------------------*/

.list-header{
  padding: 18px 13px;
}

.list-header h1{
  font-size: 2.4rem;
  line-height: 1.3;
  color: #003c8d;
  margin-bottom: 10px;
}

.list-header p{
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.list-header p:last-child{
  margin-bottom: 0;
}

.list-header p strong{
  font-weight: 600;
}

@media screen and (min-width: 960px) {
  .list-header{
    padding: 0;
    margin-bottom: 18px;
  }

  .list-header h1{
    font-size: 3.6rem;
  }

  .list-header p{
    font-size: 1.6rem;
  }
}

/*----- 続きを読む -----*/
.readmore-check{
  display: none;
}

.readmore{
  position: relative;
  box-sizing: border-box;
}

.readmore-content{
  position: relative;
  overflow: hidden;
  max-height: 80px;
}

.readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  height: 80px;
  background: linear-gradient(rgba(245,245,245,0), rgba(245,245,245,1)80%)
}

.readmore-label{
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 2;
  cursor: pointer;
  width: 100%;
  height: 50px;
  transition: 0.3s;
}

.readmore-label:before{
  content: '続きを読む';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  font-size: 1.4rem;
  color: #1b94e0;
}

@media (hover: hover) and (pointer: fine) {
  .readmore-label:hover {
    opacity: 0.7;
    transition: 0.3s;
  }
}

/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
display: none;
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
  max-height: none;
  height: 100%;
  overflow: visible;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
  display: none;
}

@media screen and (min-width: 960px) {
  .readmore-label:before{
    left: auto;
    right: 0;
    transform: none;
    -webkit-transform: none;
  }
}

/*----- sort -----*/
.sort{
  position: relative;
  margin: 0 13px 10px;
  padding: 14px 0;
  border-top: 1px solid #B3B3B3;
  border-bottom: 1px solid #B3B3B3;
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.list-header+.sort{
  position: relative;
  padding-bottom: 35px;
  margin-bottom: 18px;
}

.sort>div{
  display: flex;
  align-items: center;
}

.sort>div>div{
  font-size: 1.4rem;
  margin-right: 10px;
  font-weight: 600;
}

.sort svg{
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: #B3B3B3;
  vertical-align: middle;
  margin-right: 3px;
}

.sort ul{
  display: flex;
  font-size: 1.3rem;
  color: #116DA7;
}

.sort div ul *+*{
  margin-left: 8px;
}

.sort a{
  display: block;
  border: 1px solid #1b94e0;
  border-radius: 5px;
  line-height: 2.2;
  padding: 0 8px;
  min-width: 50px;
  background-color: #fff;
  text-align: center;
}

.sort .now a{
  background-color: #ebfaff;
  font-weight: 600;
}

.maxcount{
  position: absolute;
  right: 0;
  bottom: 8px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 20px;
  color: #707070;
}

.switch-sp{
  margin: 18px 36px;
}

.switch-pc{
  margin: 18px auto;
  padding: 0 13px;
  width: fit-content;
}

.switch-sp a,
.switch-pc a{
  position: relative;
  display: table;
  background-color: #fff;
  border-radius: 5px;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  height: 60px;
  width: 100%;
  overflow: hidden;
  transition: .3s;
}

.switch-pc a:hover{
  background-color: #eef8ff;
  transition: .3s;
}

.switch-sp a{
  color: #f262b0;
  border: 1px solid #f262b0;
  padding: 0 10px 0 70px;
}

.switch-pc a{
  color: #0095ff;
  border: 1px solid #0095ff;
  padding: 0 20px 0 80px;
}

.switch-sp a::before,
.switch-pc a::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 60px;
  height: 60px;
}

.switch-sp a::before{
  background-color: #fff2fa;
}

.switch-pc a::before{
  background-color: #eef8ff;
}

.switch-sp svg,
.switch-pc svg{
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
}

.switch-sp svg{
  fill: #f262b0;
}

.switch-pc svg{
  fill: #0095ff;
}

.switch-sp span,
.switch-pc span{
  display: table-cell;
  vertical-align: middle; 
}

@media (hover: hover) and (pointer: fine) {
  .sort li a:hover{
    background-color: #ebfaff;
  }
}
@media screen and (min-width: 520px) and (max-width: 960px) {
  .list-header+.sort{
    margin: 16px 13px;
    padding: 14px 70px 14px 0;
  }
  .maxcount{
    bottom: 14px;
  }
}

@media screen and (min-width: 960px) {
  .sort{
    margin: 16px 0;
    padding: 14px 0;
  }

  .list-header+.sort{
    padding: 14px 70px 14px 0;
  }

  .maxcount{
    bottom: 14px;
  }
}

/*----- 目次 -----*/
.page-contents{
  margin: 18px 14px;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 5px;
}

.page-contents summary{
  position: relative;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 14px;
  list-style: none;
}

.page-contents summary::-webkit-details-marker {
  display:none;
}

.page-contents summary::before,
.page-contents summary::after{
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background-color: #B3B3B3;
}

.page-contents summary::before{
  right: 22px;
  width: 4px;
  height: 20px;
}

.page-contents summary::after{
  right: 14px;
  width: 20px;
  height: 4px;
}

.page-contents[open] summary::before{
  content: none;
}

.page-contents ul{
  padding:  0 14px 14px;
}

.page-contents li{
  position: relative;
  padding-left: 30px;
  counter-increment : num 1;
  font-size: 1.4rem;
}

.page-contents li+li{
  margin-top: 12px;
}

.page-contents li:before{
  position: absolute;
  left: 0;
  content: counter(num);
  width: 24px;
  height: 24px;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 24px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #707070;
}

.page-contents li a{
  display: block;
  color: #333;
}

.article-content .page-contents{
  margin-right: 0;
  margin-left: 0;
  background-color: #f0f0f0;
  border: none;
}

.article-content .page-contents ul{
  margin: 0;
  padding:  0 14px 14px;
  list-style: none;
}

.article-content .page-contents li:before{
  background-color: #999;
  color: #fff;
}

@media screen and (min-width: 520px) {
  .page-contents li{
    font-size: 1.6rem;
  }
}

/*----- ad-newgame-box -----*/

.ad-newgame-box{
  margin: 0 20px;
}

.ad-newgame-item{
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 10%);
}

.ad-newgame-item a{
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.ad-newgame-item .img-box{
  width: 100%;
}

.ad-newgame-item .text-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 14px;
}

.ad-newgame-item .title{
  font-size: 1.6rem;
  transition: .2s;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.ad-newgame-item .sponsored{
  position: absolute;
  bottom: 14px;
  right: 14px;
  text-align: right;
  font-size: 1rem;
  color: #6F6F6F;
}

.ad-newgame-item .ribbon{
  left: 13px;
  right: inherit;
  color: #fff;
  background: linear-gradient(-30deg, #f95b65 0%, #f95b65 70%, #ff747d 30%, #ff747d 100%);
  background-color: #f95b65;
}

.ad-newgame-item .ribbon::before{
  border-color: #f95b65 transparent transparent transparent;
}

.ad-newgame-item .ribbon::after{
  border-color: transparent #f95b65 transparent transparent;
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  .ad-newgame-box{
    max-width: 700px;
    margin: 0 auto;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .ad-newgame-item a{
    flex-direction: row;
  }
  .ad-newgame-item .img-box{
    width: 35%;
  }
}

/* PC */
@media screen and (min-width: 960px){
  .ad-newgame-box{
    max-width: 700px;
    margin: 0 auto;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .ad-newgame-item a{
    flex-direction: row;
  }

  .ad-newgame-item .img-box{
    width: 35%;
  }

  .ad-newgame-item .text-box{
    padding: 18px;
  }

  .ad-newgame-item .title{
    font-size: 1.8rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ad-newgame-item:hover .title{
    color: #f95b65;
  }

  .ad-newgame-item:hover img{
    transform: scale(1.1,1.1);
    transition: .8s transform;
  }
}


/*news-list
-------------------------------------------*/

.news-list{
  margin-bottom: 20px;
}

.news-list>*+*{
  border-top: 1px solid #E4E4E4;
}

.news-list-item{
  padding: 13px;
  background-color: #fff;
}

.news-list-item .img-box{
  aspect-ratio: 8/5;
}

.news-list-item .text-box{
  display: flex;
  gap: 4px 8px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.news-list-item .news-tag a{
  line-height: 1.5;
  padding: 0 6px;
}

.news-list-item .info{
  margin: 0 0 0 auto;
}

/*.news-list-item-l*/
.news-list-item-l{
  flex-direction: column;
}

.news-list-item-l .title{
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.news-list-item-l .img-box{
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/*.news-list-item-s*/
.news-list-item-s{
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 130px 1fr;
  gap: 6px 10px;
}

.news-list-item-s .text-box{
  grid-column: 1 / 3;
}

.news-list-item-s .title{
  font-size: 1.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.news-list-item-s .img-box{
  width: 130px;
  height: auto;
}

/*PR用*/
.news-pr{
  background-color: #ffffe7!important;
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  .news-list{
    margin-right: 18px;
    margin-left: 18px;
  }
}

@media screen and (min-width: 520px) {
  .news-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .news-list-item{
    display: flex;
    gap: 8px;
    flex-direction: column;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
  }

  .news-list>*+*{
    border: none;
  }

  .news-list-item .title{
    font-size: 1.8rem;
    padding: 0 14px;
  }

  .news-list-item .text-box{
    margin-top: auto;
    padding: 0 14px 14px;
  }

  .news-list-item .img-box{
    width: 100%;
    height: auto;
    margin: 0;
  }
}

/*----- main-slider -----*/
main>.main-slider{
  margin-top: 30px;
}

.news-list .main-slider{
  background-color: #eeeded;
  padding: 20px 0;
}

.main-slider{
  overflow: hidden;
}

.main-slider,
.main-slider+div{
  border-top: 0;
}

.main-slider-heading{
  margin: 0 0 10px 13px;
  font-size: 2rem;
  display: flex;
  color: #003c8d;
}

.main-slider-heading::before,
.main-slider-heading::after{
  content: "";
  height: 4px;
  display: inline-block;
  margin-top: calc(1em / 2);
  background-color:#006bff;
  opacity: 0.2;
}

.main-slider-heading::before{
  width: 18px;
  margin-right: 8px;
}

.main-slider-heading::after{
  margin-left: 8px;
  flex-grow: 1;
}

@media (hover: hover) and (pointer: fine) {
  .main-slider-heading a:hover{
    color: #3fa9f5;
  }
}

.main-slider .swiper{
  overflow: visible;
}

.main-slider .swiper-wrapper{
  padding-left: 13px;
}

.main-slider .swiper-slide {
  height: auto;
  width: 240px;
  margin-right: 15px;
}

.main-slider-item{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.main-slider-item .text-box{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px;
}

.main-slider-item .title{
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.gamelist_pick .title{
  font-size: 1.6rem;
  -webkit-line-clamp: 1;
  color: #003c8d;
}

.main-slider-item .news-tag{
  margin-bottom: 5px;
}

.main-slider-item .news-tag a{
  line-height: 1.5;
  padding: 0 6px;
}

.main-slider-item .play-btn{
  margin: auto 0 0 auto!important;
  font-size: 1.2rem;
}

.main-slider-item .play-btn-inner{
  padding: 10px;
}

.main-slider>.news-tag{
  margin: 13px 13px 0;
}

.main-slider>.news-tag a{
  font-size: 1.4rem;
  line-height: 2.6;
}

.main-slider>.sponsored{
  display: block;
  margin: 8px 13px 0;
  text-align: right;
  color: #767676;
  line-height: 1;
}

.read-more-box{
  height: 100%;
  color: #1b94e0;
  font-size: 1.4rem;
  font-weight: 600;
  transition: .2s;
  text-align: center;
}

.read-more-box a{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 14px;
  background-color: #fff;
  border-radius: 5px;
}

.read-more-box span{
  position: relative;
  display: inline-block;
  margin-top: 100px;
  width: 100%;
}

.read-more-box span::before{
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: 3px solid #1b94e0;
}

.read-more-box span::after{
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-70%) rotate(45deg);
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  border-top: solid 5px #1b94e0;
  border-right: solid 5px #1b94e0;
}

@media (hover: hover) and (pointer: fine) {
  .read-more-box a:hover{
    background-color: #ebfaff;
    box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 10%);
    transition: .2s;
  }
}

@media screen and (min-width: 520px) {
  main>.main-slider .swiper{
    position: relative;
  }

  main>.main-slider .swiper::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50px;
    z-index: 2;
    background: linear-gradient(to right,transparent,#f5f5f5);
  }

  .news-list .main-slider{
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .main-slider-heading{
    margin: 0 0 10px 18px;
    font-size: 2.2rem;
  }

  .schedule-slider .swiper-button-next,
  .main-slider .swiper-button-next{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0,-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(63, 169, 245, 0.8);
    border-radius: 50%;
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 10%);
    z-index: 3;
    cursor: pointer;
    transition: .2s;
  }

  .schedule-slider .swiper-button-next::before,
  .main-slider .swiper-button-next::before{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
    display: inline-block;
    content: '';
    width: 18px;
    height: 18px;
    border-top: solid 5px #fff;
    border-right: solid 5px #fff;
  }

  @media (hover: hover) and (pointer: fine) {
    .schedule-slider .swiper-button-next:hover,
    .main-slider .swiper-button-next:hover{
      background-color: rgba(63, 169, 245, 1);
      transition: .2s;
    }
  }

  .main-slider .swiper-wrapper{
    padding-left: 0;
  }

  .news-list .main-slider .swiper-wrapper{
    padding-left: 18px;
  }

  .main-slider .swiper-slide {
    width: 32%;
    min-width: 240px;
    margin-right: 18px;
  }

  .main-slider>.news-tag{
    margin: 18px 18px 0 18px;
  }

  .read-more-box{
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  .news-list .main-slider{
    margin: 0 -18px;
  }
  .main-slider .swiper-wrapper{
    padding-left: 13px;
  }
}

/*----- schedule-slider -----*/
.schedule-slider .swiper::after{
  content: none!important;
}

.schedule-slider .swiper-slide{
  width: 180px;
  min-width: 180px;
  margin-right: 12px;
}

.schedule-slider-item{
  border: 1px solid #ddd;
  background-color: #dde8f0;
}

.schedule-slider-item a{
  flex-grow: 1;
}

.schedule-slider-item .img-box::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.schedule-slider-item .img-box{
  aspect-ratio: 5/4;
}

.schedule-slider-item img{
  aspect-ratio: 5/4;
  object-fit: cover;
}

.schedule-slider-item .text-box{
  padding: 8px;
}

.schedule-slider .title{
 font-size: 1.4rem;
 line-height: 1.2;
 font-weight: 500;
 text-align: center;
 transition: .3s;
 margin: 0;
 color: #003c8d;
 -webkit-line-clamp: 1;
}

.status-label{
  width: fit-content;
  margin: -19px auto 5px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 22px;
  padding-right: 8px;
  background-color: #fff;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;
  overflow: hidden;
}

.status-label span{
  color: #fff;
  padding: 0 6px 0 8px;
  margin-right: 6px;
  display: inline-block;
}

.status-label.formal span{
  background-color: #0DA324;
}

.status-label.entry span{
  background-color: #F78000;
}

.status-label.test span{
  background-color: #9740ED;
}

.date-label{
  position: absolute;
  top: 0;
  left: 6px;
  font-size: 1.2rem;
  padding: 3px 8px;
  border-radius: 0 0 5px 5px;
  color: #fff;
  background-color: #333;
}

@media (hover: hover) and (pointer: fine) {
  .schedule-slider-item:hover .title{
    color: #1b94e0;
  }
}

/*game-list
-------------------------------------------*/
.game-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 0;
  margin-bottom: 20px;
}

.game-list-item{
  display: flex;
  flex-direction: column-reverse;
  background-color: #fff;
  width: 100vw;
  height: 100%;
  box-shadow: 1px 1px 8px 1px rgb(0 0 0 / 10%);
}

.game-list-item .info-box{
  display: flex;
  position: absolute;
  right: 12px;
  top: -23px;
  z-index: 5;
}

.game-list-item .info-box>*{
  position: relative;
  text-align: center;
  font-size: 1.2rem;
  line-height: 20px;
  padding-top: 3px;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.game-list-item .info-box>*::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

.game-list-item .info-box .pc,
.game-list-item .info-box .sp{
  width: 45px;
  color: #ccc;
  background-color: #fff;
  opacity: 0.8;
  border-left: 1px solid #E5E5E5;
}

.game-list-item .info-box .pc.true{
  color: #0095ff;
  opacity: 1;
}

.game-list-item .info-box .pc.true::before{
  background-color: #0095ff;
}

.game-list-item .info-box .sp.true{
  color: #f262b0;
  opacity: 1;
}

.game-list-item .info-box .sp.true::before{
  background-color: #f262b0;
}

.game-list-item .info-box .status{
  width: 100px;
  background-color: #fff;
}

.game-list-item .info-box .status.formal::before{
  background-color: #0FB126;
}

.game-list-item .info-box .status.entry::before{
  background-color: #F78000;
}

.game-list-item .info-box .status.test::before{
  background-color: #a244ff;
}

.game-list-item .info-box .status.close::before{
  background-color: #707070;
}

.game-list-item .text-box {
  position: relative;
  padding: 10px 10px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.item-box-head{
  display: flex;
  margin-bottom: 10px;
}

.item-box-head-icon{
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: -20px;
  position: relative;
  z-index: 5;
}

.item-box-head-icon img{
  border-radius: 16px;
  border: 3px solid #fff;
}

.item-box-head-content{
  flex-grow: 1;
}

.game-list-item .title{
  font-size: 2.2rem;
  line-height: 1.3;
}

.game-list-item-stat{
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
}

.game-list-item .star{
  font-size: 2rem;
}

.game-list-item .pt{
  font-size: 1.7rem;
  font-weight: 600;
  color: #de2020;
}

.game-list-item .comment{
  margin-left: 13px;
  font-size: 1.4rem;
}

.game-list-item .game-tag{
  gap: 5px;
}

.game-list-item .game-tag a{
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 5px;
}

.game-list-item .game-tag .entry a{
  font-weight: 600;
  outline: 1px solid #F78000;
  background-color: #fff;
}

.game-list-item .catchcopy{
  font-size: 2rem;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1565de;
}

.game-list-item .readmore{
  margin-bottom: 10px;
}

.game-list-item .readmore p{
  font-size: 1.5rem;
  margin-bottom: 10px;
  line-height: 1.6;
}

.game-list-item .readmore-content::before{
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)80%);
}

.game-list-item .readmore-content{
  max-height: 140px;
}

.game-list-item .readmore-label:before{
  border: 1px solid #1b94e0;
  padding: 6px 20px;
  background-color: #fff;
  border-radius: 100vh;
}

.readmore-content .title{
  font-size: 1.5rem!important;
  line-height: 1.6;
}

.readmore-content img{
  max-height: none!important;
}

.game-list-item .text-box>.point{
  position: relative;
  margin-bottom: 14px;
  padding: 8px;
  border-radius: 5px;
  background-color: #ffebd0;
}

.game-list-item .text-box>.point p{
  font-size: 1.6rem;
  font-weight: 600;
  color: #ef7000;
  text-align: center;
  margin-bottom: 8px;
}

.game-list-item .text-box>.point ul{
  font-size: 1.5rem;
  background-color: #fff;
  padding: 8px;
}

.game-list-item .text-box>.point li{
  position: relative;
  padding-left: 14px;
}

.game-list-item .text-box>.point li::before{
  position: absolute;
  top: 7px;
  left: 0;
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #ef7000;
  border-bottom: 2px solid #ef7000;
  transform: rotate(-45deg);
}

.game-list-item .text-box>.point li+li{
  margin-top: 5px;
}

.game-list-item figure{
  margin-bottom: 8px;
}

.game-list-item figcaption{
  font-size: 1.2rem;
  margin-top: 4px;
  color: #555;
}

.store-image{
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 0 -10px 10px;
  padding: 0 10px;
}

.store-image ul{
  white-space: nowrap;
}

.store-image .landscape{
  height: 180px;
}

.store-image .portrait{
  height: 380px;
}

.store-image li{
  display: inline-block;
  height: 100%;
  margin-right: 4px;
}

.store-image li:last-child{
  margin-right: 10px;
}

.store-image img{
  width: auto;
  height: 100%;
}

.game-review{
  margin-bottom: 13px;
  padding: 8px;
  border-radius: 5px;
  background-color: #fffbdc;
}

.game-list-item .game-review-title{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
  text-align: center;
}

.game-list-item .game-review-title::before,
.game-list-item .game-review-title::after{
  content: '';
  width: 20px;
  height: 3px;
  background-color: #eed300;
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px;
}

.game-review ul{
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.game-review li{
  background-color: #fff;
  padding: 6px 8px;
}

.game-review li+li{
  margin-top: 6px;
}

.game-review .star{
  font-size: 1.6rem;
}

.game-review .more-btn-s{
  font-size: 1.4rem;
  color: #1b94e0;
}

.game-review .more-btn-s a{
  padding-right: 10px;
}

.game-review .more-btn-s a::after{
  right: 2px;
  width: 6px;
  height: 6px;
}

.game-list-item .play-btn{
  max-width: none!important;
  margin: auto 0 0!important;
  font-size: 1.8rem;
}

.game-list-item .play-btn-inner{
  padding: 22px 13px;
}

.game-list-item .sponsored{
  padding: 0 5px;
  margin: 5px 0 0;
}

.text-box-close .title{
  color: #707070;
}

.game-list-item .text-box-close .star::after,
.game-list-item .text-box-close .pt{
  color: #707070;
}

.game-list-item .text-box-close .play-btn{
  z-index: 0;
}

.game-list-item-more{
  text-align: center;
  font-size: 1.4rem;
  margin-top: -5px;
  color: #777;
}

.game-list-item .play-btn+.game-list-item-more{
  margin-top: 10px;
}

/* TB */
@media screen and (min-width: 520px) and (max-width: 960px) {
  .game-list{
    padding: 0 13px;
  }
}

@media screen and (min-width: 520px) {
  .game-list{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .game-list-item{
    border-radius: 10px;
    overflow: hidden;
    width: auto;
    box-shadow: none;
  }

  .game-list-item .info-box{
    font-size: 1.2rem;
  }
  
  .game-list-item .text-box{
    padding: 18px 18px 22px 18px;
  }

  .game-list-item .title{
    font-size: 2.4rem;
  }

  .game-list-item .catchcopy{
    font-size: 1.5rem;
    color: #0F4AA3;
  }

  .game-list-item .play-btn-inner{
    padding: 14px;
  }

  .game-list-item .sponsored{
    position: absolute;
    right: 18px;
    bottom: 8px;
    width: auto;
    margin: 0;
  }

}


/*review-list
-------------------------------------------*/
.review-list{
  margin-bottom: 20px;
  background-color: #fff;
}

.review-list>h2{
  padding: 18px 13px 5px;
  font-size: 2.2rem;
}

.review-list>.outline{
  font-size: 1.4rem;
  padding: 0 13px 18px;
}

.review-list-item{
  padding: 18px 13px;
  background-color: #fff;
  border-top: 1px solid #E4E4E4;
}

.review-list-item .text-box{
  width: 100%;
}

.review-list-item .title{
  font-size: 1.8rem;
  transition: .2s;
}

@media (hover: hover) and (pointer: fine) {
  .review-list-item:hover .title{
    color: #1b94e0;
    transition: .2s;
  }
}

.review-list-item .title span{
  display: block;
  margin-bottom: 3px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #003c8d;
}

.review-list-item .star{
  font-size: 2rem;
}

.review-list-item .pt{
  font-size: 1.7rem;
  font-weight: 600;
  color: #66420c;
}

.review-list-item .rate-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.review-list-item .rate-list>*+*::before{
  content: '/';
  display: inline-block;
  margin: 0 5px;
}

.review-list-item .rate-list li{
  white-space: nowrap;
}

.review-list-item .rate-list li span{
  margin-left: 3px;
  font-weight: 600;
}

.review-list-item .outline{
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.review-list-item .info{
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  margin-top: 8px;
}

.review-list+.play-btn{
  margin: 0 13px;
}

/* TB~PC */
@media screen and (min-width: 520px) {
  .review-list{
    margin-bottom: 30px;
    border-radius: 10px;
  }

  .review-list>h2{
    padding: 30px 30px 5px;
    font-size: 2.8rem;
  }

  .review-list>.outline{
    padding: 0 30px 18px;
  }

  .review-list-item{
    padding: 18px 30px;
  }
}

/* PC */
@media screen and (min-width: 960px){
  .review-list-item:first-child{
    border-radius: 10px 10px 0 0;
  }

  .review-list-item:last-child{
    border-radius: 0 0 10px 10px;
  }
}

/*list-none
-------------------------------------------*/
.list-none{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 600;
  color: #707070;
  background-color: #fff;
  height: 150px;
  padding: 13px;
  text-align: center;
}

.list-none a{
  color: #1b94e0;
}

@media screen and (min-width: 960px){
  .list-none{
    border-radius: 10px;
    padding: 18px;
  }
}

/*-------------------------------------------

  full

-------------------------------------------*/


/*game-header
-------------------------------------------*/
.game-header-outer{
  position: relative;
  padding-top: 30px;
}

.game-header-outer+.container{
  margin-top: 0;
}

.game-header{
  display: flex;
  flex-direction: column;
  padding: 28px 13px;
  box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 10%);
  background-color: #fafafa;
  position: relative;
  z-index: 2;
}

.game-header-main{
  margin-bottom: 15px;
}

.game-header-main .game-title{
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 4px;
}

.game-header-main .game-title a{
 color:#333
}

.game-header-main .game-company{
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 15px;
  color: #888;
}

.game-header-main .game-company a{
  margin-right: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .game-header-main .game-title a:hover,
  .game-header-main .game-company a:hover{
    color: #1b94e0;
  }
}

.game-header-stat{
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
  line-height: 1;
}

.game-header-stat>*+*::before{
  content: "";
  width: 1px;
  height: 20px;
  margin: 0 13px;
  background-color: #E4E4E4;
  display: inline-block;
  vertical-align: sub;
}

.game-header-main .rank{
  font-size: 1.8rem;
  font-weight: 600;
  min-width: 55px;
  text-align: center;
}

.game-header-main .star{
  font-size: 1.8rem;
}

.game-header-main .pt{
  font-size: 1.4rem;
  font-weight: 600;
  color: #66420c;
}

.game-header-main .comment{
  font-size: 1.4rem;
}

.game-header-main .comment span{
  display: inline-block;
  margin-left: 4px;
}

.game-header-info{
  display: flex;
  gap: 8px;
  justify-content: end;
  text-align: center;
  margin-bottom: 12px;
  font-size: 1.3rem;
}

.game-header-info>div{
  border-radius: 5px;
}

.game-header-info a{
  padding: 2px 6px;
  display: block;
  height: 100%;
  border-radius: 5px;
}

.game-header-info svg{
  width: 15px;
  height: 15px;
  margin-right: 3px;
  vertical-align: middle;
}

.game-header-info .pc,
.game-header-info .sp{
  color: #ccc;
  background-color: #f1f1f1;
}

.game-header-info .pc svg,
.game-header-info .sp svg{
  fill: #ccc;
}

.game-header-info .pc.true a{
  color: #1977D4;
  border: 1px solid #afd7ff;
  background-color: #f1f9ff;
}

.game-header-info .pc.true svg{
  fill: #1977D4;
}

.game-header-info .sp.true a{
  color: #f262b0;
  border: 1px solid #ffd2e9;
  background-color: #fff6fb;
}

.game-header-info .sp.true svg{
  fill: #f262b0;
}

.game-header-info .formal{
  border: 1px solid #a7e8b1;
  background-color: #ecffef;
}

.game-header-info .test{
  border: 1px solid #dcbeff;
  background-color: #f5ecff;
}

.game-header-info .entry{
  border: 1px solid #ffd6a4;
  background-color: #fff3e3;
}

.game-header-info .close,
.game-header-info .stop{
  border: 1px solid #ddd;
  background-color: #eee;
}

.game-header-info .free{
  color: #DB000F;
  border: 1px solid #ffcbcd;
  background-color: #fff1f1;
}

/* TB */
@media screen and (min-width: 520px) and (max-width: 960px) {
  .game-header-main,
  .game-header-sub {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 960px) {
  .game-header-outer{
    background-color: #dde8f0;
    padding: 30px 0 0 0;
  }

  .game-header{
    flex-direction: row;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    transform: translate(0,40px);
    background-color: #fff;
  }

  .game-header .breadcrumb{
    left: 30px;
  }

  .game-header-main{
    width: calc(100% - 320px);
    margin-bottom: 0;
  }

  .game-header-main .game-title{
    font-size: 3.4rem;
  }

  .game-header-sub{
    width: 350px;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex-shrink: 0;
  }

  .game-header-info {
    display: grid;
    gap: 8px 10px;
    grid-template-rows: 26px 26px;
    grid-template-columns: 1fr 70px 70px;
    margin-bottom: 15px;
  }

  .game-header-info a{
    padding: 4px;
  }

  .game-header-info .pc{
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }
  .game-header-info .sp{
    grid-row: 1 / 3;
    grid-column: 3 / 4;
  }

  .game-header-info .pc a,
  .game-header-info .sp a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  }

  .game-header-info .pc svg,
  .game-header-info .sp svg{
    width: 100%;
    height: 30px;
    margin: 0 0 2px 0;
  }

  /* .game-header-info .formal,
  .game-header-info .test,
  .game-header-info .entry,
  .game-header-info .close,
  .game-header-info .stop,
  .game-header-info .free{
    border: none;
  } */
}

@media screen and (min-width: 1150px) {
  .game-header{
    border-radius: 10px;
  }
}

/*article共通デザイン
-------------------------------------------*/

article{
  background-color: #fff;
  padding: 28px 13px;
  margin-bottom: 20px;
}

article>*{
  margin-bottom: 20px;
}

article>*:last-child{
  margin-bottom: 0!important;
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  article>*{
    margin: 0 auto 20px;
    max-width: 740px;
  }
}

@media screen and (min-width: 960px) {
  article{
    padding: 30px 60px;
    border-radius: 10px;
  }
}

/*----- article-header -----*/
.article-header{
  position: relative;
  border-bottom: 1px solid #ccc;
  padding: 0 13px 20px 13px;
  margin-right: -13px;
  margin-left: -13px;
}

.article-header:has(.article-cat){
  padding-top: 12px;
}

.article-header h1{
  font-size: 2.4rem;
  line-height: 1.3;
}

.article-header .article-cat{
  top: -12px;
  left: 13px;
}

.article-header .news-tag{
  margin-top: 10px;
}

.share-info-wrapper{
  display: flex;
  flex-direction: column-reverse;
  margin-top: 15px;
}

.article-header .info{
  display: flex;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #8e8e8e;
}

.article-header .info>*:last-child{
  margin: 0;
}

.article-header .info .writer{
  width: 100%;
  text-align: right;
}

.article-header .info .writer a{
  color: #1b94e0;
}

@media (hover: hover) and (pointer: fine) {
  .article-header .info .writer a:hover{
    color: #6bccff;
  }
}

/* TB */
@media screen and (min-width: 520px) and (max-width: 960px) {
  .article-header {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 960px) {
  .article-header {
    margin-right: -60px;
    margin-left: -60px;
    padding: 0 30px 30px;
    margin-bottom: 30px;
  }
  .article-header h1{

    font-size: 3rem;
  }

  .article-header .article-cat{
    left: 30px;
  }

  .share-info-wrapper{
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }

  .article-header .info{
    margin-bottom: 0;
  }

  .article-header .share li{
    width: 70px;
  }
}

/*----- article-content -----*/
.article-content{
  font-size: 1.6rem;
}

.article-content>*:first-child{
  margin-top: 0!important;
}

.article-content>*:last-child{
  margin-bottom: 0!important;
}

@media screen and (min-width: 960px) {
  .game-header-outer+.container{
    padding-top: 70px;
  }

  .article-content{
    font-size: 1.7rem;
  }
}

/*----- コメントを読む -----*/

.comment-read-btn{
  margin: 30px 20px;
}

.comment-read-btn a{
  display: block;
  padding: 13px;
  border: 1px solid #003c8d;
  color: #003c8d!important;
  font-size: 1.6rem;
  border-radius: 5px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .comment-read-btn a:hover{
    background-color: #f0f9ff;
  }
}

/*----- 見出し -----*/

.article-content h2{
  font-size: 2.2rem;
  margin: 40px 0 15px 0;
  line-height: 1.3;
}

.article-content h3{
  font-size: 2rem;
  margin: 40px 0 15px 0;
  line-height: 1.3;
}

.article-content h4{
  font-size: 1.8rem;
  margin: 40px 0 15px 0;
  line-height: 1.3;
}

.article-content h5{
  font-size: 1.8rem;
  margin: 30px 0 15px 0;
  line-height: 1.3;
}

@media screen and (min-width: 960px) {

  .article-content h2{
    margin: 60px 0 20px 0;
    font-size: 2.8rem;
  }

  .article-content h3{
    margin: 50px 0 20px 0;
    font-size: 2.5rem;
  }

  .article-content h4{
    margin: 50px 0 20px 0;
    font-size: 2.3rem;
  }

  .article-content h5{
    margin: 40px 0 20px 0;
  }
}

/*game-full*/

.game-article .article-content h2,
.game-article .article-content h2>a{
  color: #1565de;
}

span.title{
  font-weight: 600;
}

/*news-full*/

.news-article-content h2{
  background: #f7f7f9;
  border-left: 6px solid #3fa9f5;
  padding: 15px;
}

.news-article-content h3{
  position: relative;
  padding-bottom: 10px;
  border-bottom: 3px solid #E5E5E5;
}

.news-article-content h3::before{
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 20%;
  height: 3px;
  content: '';
  background: #3fa9f5;
}

.news-article-content h4{
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

/*information-full*/

.information .article-content h2{
  padding-left: 15px;
  border-left: 6px solid #3fa9f5;
}

.information .article-content h3{
  font-size: 2rem;
}

/*----- 本文など -----*/

.article-content a{
  color: #1b94e0;
}

.article-content .pr-link{
  display: block;
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(3px);
  color: #767676;
}

@media (hover: hover) and (pointer: fine) {
  .article-content a:hover{
    color: #00C3FF;
  }
}

.article-content .outline{
  margin-bottom: 30px;
}

.article-content .outline a{
  font-weight: 600;
}

.article-content p{
  line-height: 1.8;
  margin: 15px 0;
}

span.bold{
  font-weight: 600;
}

span.red{
  color: #C1211C;
}

span.blue{
  color: #1565de;
}

span.green{
  color: #2E854B;
}

span.markerred{
  background:linear-gradient(transparent 60%, #ffcbcb 60%);
}

span.markerblue{
  background:linear-gradient(transparent 60%, #b5e7ff 60%);
}

span.markeryellow{
  background:linear-gradient(transparent 60%, #fcf69f 60%);
}

span.markergreen{
  background:linear-gradient(transparent 60%, #9ffca7 60%);
}

.article-content p.notes{
  font-size: 1.4rem;
  line-height: 1.5;
  color: #767676;
}

.article-content p.company{
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 5px 0;
}

.article-content p.copyright{
  font-size: 1.4rem;
  line-height: 1.2;
  color: #767676;
  margin: 0 0 5px 0;
}

@media screen and (min-width: 960px) {

  .article-content p{
    margin: 20px 0;
  }
}

/*----- リスト -----*/

.article-content ol{
  list-style: decimal;
  padding-left: 20px;
  margin: 15px 0;
  line-height: 1.8;
}

.article-content ol>*+*{
  margin-top: 5px;
}

.article-content ul{
  list-style-type: square;
  padding-left: 20px;
  margin: 15px 0;
  line-height: 1.8;
}

.article-content ul>li::marker {
  color: #ddd;
}
.article-content ul>*+*{
  margin-top: 5px;
}

.article-content ul>li:has(ul,ol)::marker {
  color: transparent;
}

@media screen and (min-width: 960px) {

  .article-content ol{
    margin: 20px 0;
  }

  .article-content ul{
    margin: 20px 0;
  }

  .article-content ol>*+*,
  .article-content ul>*+*{
    margin-top: 10px;
  }
}

/*-----　画像レイアウト -----*/

.article-image {
  display: table;
  margin: 15px auto;
  width: fit-content;
}

.article-image a{
  display: table;
  margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .article-image a:hover{
    opacity: 0.8;
  }
}

.article-image img{
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 700px;
}

.article-image figcaption{
  display: table-caption;
  caption-side: bottom;
  margin-top: 5px;
  font-size: 1.1rem;
  color: #333;
  pointer-events: none;
  text-align: left;
}

.article-image-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.article-image-box .article-image{
  margin: 0;
}

.clear{
  clear: both;
}

@media screen and (min-width: 520px) {

  .article-image {
    margin: 20px auto;
  }

  .article-image figcaption{
    font-size: 1.3rem;
  }

  .article-image-box{
    flex-direction: row;
    align-items: flex-start;
    margin: 20px 0;
  }

  .article-image-box .column2{
    text-align: center;
    max-width: calc((100% - 10px)/2);
  }

  .article-image-box .column3{
    text-align: center;
    max-width: calc((100% - 20px)/3);
  }

  .clearfix::after{
    content: "";
    clear: both;
    display: block;
 }

  .article-image.right,
  .article-image.left{
    width: fit-content;
    max-width: 250px;
    overflow: hidden;
  }

  .article-image.right{
    margin: 0 0 15px 15px;
    float: right;
  }

  .article-image.left{
    margin: 0 15px 15px 0;
    float: left;
  }
}

/*-----　動画　-----*/
.movie{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 15px 0;
}

.movie>iframe{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

@media screen and (min-width: 960px) {
  .movie{
    margin: 20px 0;
  }
}

/*-----　table　-----*/

.article-content table{
  margin: 20px auto;
  font-size: 1.5rem;
  vertical-align: middle;
  min-width: 50%;
}

.article-content table *{
  vertical-align: middle;
}

.article-content thead th{
  background-color: #e4e4e4;
  font-size: 1.8rem;
  font-weight: 600;
}

.article-content tbody th{
  background-color: #f7f7f9;
}

.article-content table th,
.article-content table td{
  border: 1px solid #ccc;
  padding: 5px;
}

.article-content table .center{
  text-align: center;
}

/*-----　blockquote -----*/

.article-content blockquote{
  background-color: #f7f7f9;
  padding: 10px;
  margin: 15px 0;
  border-radius: 5px;
}

.article-content blockquote>*:first-child{
  margin-top: 0;
}

.article-content blockquote>*:last-child{
  margin-bottom: 0;
}

.article-content blockquote>h2{
  border-color: #707070;
  background-color: #eeeded;
}

.article-content blockquote>h3::before{
  background-color: #707070;
}

.quote-text{
  color: #777;
  text-align: center;
  font-size: 1.4rem;
  line-height: 30px!important;
  font-weight: 600;
}

.quote-text+*{
  margin-top: 0!important;
}

@media screen and (max-width: 960px) {
  .article-content blockquote h2{
    padding: 10px;
  }

  .article-content blockquote h3,
  .article-content blockquote h4{
    padding-bottom: 6px;
  }
}

@media screen and (min-width: 960px) {
  .article-content blockquote{
    padding: 18px;
    margin: 20px 0;
  }
}

/*-----　box内の処理 -----*/
/* quote-textだけの時 */
.box:has(.quote-text) .quote-text{
  margin: -40px 0 10px!important;
}

@media screen and (min-width: 960px) {
  .box:has(.quote-text) .quote-text{
    margin: -48px 0 18px!important;
  }
}

/* play-btnとquote-textの時 */
.box:has(.play-btn+.quote-text){
  margin-top: 137px!important;
}

.box:has(.play-btn+.quote-text) .quote-text{
  margin: 10px 0!important;
}

.box:has(.play-btn+.quote-text) .play-btn{
  margin: -117px auto 0!important;
}

@media screen and (min-width: 960px) {
  .box:has(.play-btn+.quote-text){
    margin-top: 139px!important;
  }

  .box:has(.play-btn+.quote-text) .quote-text{
    margin-bottom: 18px!important;
  }
  .box:has(.play-btn+.quote-text) .play-btn{
    margin-top: -127px!important;
  }
}

/*-----　box -----*/
.article-content .box{
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 50px 0 20px;
  border-radius: 5px;
}

.article-content .box::after{
  content: "";
	display: block;
  clear: both;
}

.article-content .box>*:first-child{
  margin-top: 0;
}

.article-content .box>*:last-child{
  margin-bottom: 0;
}

@media screen and (max-width: 960px) {
  .article-content .box h2{
    padding: 10px;
  }

  .article-content .box h3,
  .article-content .box h4{
    padding-bottom: 6px;
  }
}

/*blue*/
.article-content .box.blue{
  border: 0;
  background-color: #f4fbff;
}

.article-content .box.blue>h2{
  background-color: #dbf3ff;
}

.article-content .box.blue>h3{
  border-color: #dbf3ff;
}

/*red*/
.article-content .box.red{
  border: 0;
  background-color: #fff4f4;
}

.article-content .box.red>h2{
  border-color: #ff4444;
  background-color: #ffe4e4;
}

.article-content .box.red>h3::before{
  background-color:#ff4444;
}

.article-content .box.red>h3{
  border-color: #ffe4e4;
}

/*green*/
.article-content .box.green{
  border: 0;
  background-color: #f6fff9;
}

.article-content .box.green>h2{
  border-color: #4fdc7e;
  background-color: #d9f9e4;
}

.article-content .box.green>h3::before{
  background-color:#4fdc7e;
}

.article-content .box.green>h3{
  border-color: #d9f9e4;
}

/*orange*/
.article-content .box.orange{
  border: 0;
  background-color: #fff9ed;
}

.article-content .box.orange>h2{
  border-color: #ffae0c;
  background-color: #fff0d2;
}

.article-content .box.orange>h3::before{
  background-color:#ffae0c;
}

.article-content .box.orange>h3{
  border-color: #fff0d2;
}

@media screen and (min-width: 960px) {
  .article-content .box{
    padding: 18px;
  }
}

/*-----　link-btn　-----*/

.article-content .link-btn{
  display: block;
  margin: 15px auto 30px;
  max-width: 740px;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  padding: 13px;
  color: #fff;
  background-color: #f56636;
}

@media (hover: hover) and (pointer: fine) {
  .article-content .link-btn:hover{
  background-color: #ffb638;
  color: #fff;
  }
}

@media screen and (min-width: 960px) {
  .article-content .link-btn{
    margin: 20px auto 40px;
    font-size: 2rem;
  }
}

/*----- インタビュー -----*/
.question{
  color: #003c8d;
  font-weight: 600;
}

span.name-blue{
  color: #1565de;
  font-weight: 600;
}

span.name-orange{
  color: #C75126;
  font-weight: 600;
}

span.name-pink{
  color: #C738B4;
  font-weight: 600;
}

span.name-violet{
  color: #A235FF;
  font-weight: 600;
}

span.name-green{
  color: #2E854B;
  font-weight: 600;
}

/*----- 商品埋め込み -----*/

.shop-link{
  margin: 20px 0;
  padding: 13px;
  border: 1px solid #ddd;
}

.shop-title{
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.8rem;
  line-height: 1.3;
}

.shop-title .outline{
  font-size: 1.4rem;
  font-weight: 500;
  color: #6F6F6F;
}

.shop-btn{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-btn a{
  display: block;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  width: 100%;
}

.shop-link .pr{
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .shop-btn a:hover{
    color: #fff;
    opacity: 0.7;
  }
}

.shop-amazon{
  background-color: #f90;
}

.shop-yahoo{
  background-color: #f03;
}

.shop-rakuten{
  background-color:#bf0000;
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  .shop-btn{
    flex-direction: row;
    gap: 15px;
  }
}

@media screen and (min-width: 960px) {

  .shop-link{
    margin: 30px 0;
    padding: 30px;
  }
  
  .shop-title{
    font-size: 2rem;
  }

  .shop-btn{
    flex-direction: row;
    gap: 15px;
  }
}

/*----- 記事埋め込み -----*/
.relate-news{
  margin: 15px;
}

.relate-game{
  max-width: 550px;
  margin: 40px auto 15px;
}  

.relate-news a,
.relate-game a{
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

.relate-news a{
  background-color: #f4fbff;
  border: 1px solid #1b94e0;
}

.relate-game a{
  background-color: #fff;
  border: 1px solid #003c8d;
}

.relate-news a::before,
.relate-game a::before{
  position: absolute;
  left: 0;
  display: block;
  font-size: 1.2rem;
  color: #fff;
  padding: 0 8px;
  line-height: 24px;
  z-index: 1;
}

.relate-news a::before{
  content: '関連記事';
  background-color: #1b94e0;
  top: 0;
}

.relate-game a::before{
  content: '関連ゲームをチェック';
  background-color: #003c8d;
  top: -24px;
}

.relate-news .img-box,
.relate-game .img-box{
  width: 120px;
  height: auto;
}

.relate-game .text-box{
  display: table;
}

.relate-news .title,
.relate-game .title{
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 600;
  transition: .2s;
  color: #333;
}

.relate-game .title{
  font-size: 1.8rem;
}

.relate-game .catchcopy{
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 6px 0 0 0;
  color: #8e8e8e;
}

.relate-news time{
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  color: #8e8e8e;
  margin-top: 8px;
}

.relate-game .hard{
  margin-top: 6px;
}

.relate-game .hard span{
  display: inline-block;
  padding: 0 5px;
  font-size: 1.2rem;
  line-height: 20px;
  height: 20px;
  border: 1px solid;
  margin-right: 4px;
  background-color: #fff;
}
.relate-game .pc{
 color: #1977D4;
 border-color: #1977D4;
}

.relate-game .sp{
  color: #f262b0;
  border-color: #f262b0;
 }

@media screen and (min-width: 960px) {
  .relate-news{
    margin: 20px 30px;
  }

  .relate-game{
    margin: 46px auto 20px;
  }

  .relate-news a,
  .relate-game a{
    padding: 20px;
    gap: 14px;
  }

  .relate-news a::before{
    line-height: 26px;
  }

  .relate-game a::before{
    line-height: 26px;
    top: -26px;
  }

  .relate-news .img-box,
  .relate-game .img-box{
    width: 200px;
  }

  .relate-news .title{
    font-size: 1.8rem;
  }

  .relate-game .title{
    font-size: 2rem;
  }

  .relate-game .catchcopy{
    font-size: 1.6rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .relate-game a:hover{
    background-color: #f4fbff;
  }

  .relate-news:hover .title,
  .relate-game:hover .title{
    color: #1b94e0;
    transition: .2s;
  }

  .relate-news:hover img,
  .relate-game:hover img{
    transform: scale(1.1,1.1);
    transition: .8s transform;
  }
}

/*-----　記事内関連ニュース　-----*/

.relate-list{
  margin: 15px 0;
}

.relate-list>*+*{
  margin-top: 13px;
  border-top: 1px solid #ddd;
  padding-top: 13px;
}

.relate-list-item a{
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  transition: .2s;
}

.relate-list-item .title{
  font-size: 1.6rem;
  line-height: 1.4;
  color: #333;
  margin: 0 0 8px;
}

.relate-list-item .outline{
  font-size: 1.4rem;
  line-height: 1.4;
  color: #777;
  margin: 0;
}

.relate-list-item time{
  font-size: 1.2rem;
  line-height: 1;
  color: #8e8e8e;
  padding-left: 17px;
  position: relative;
}

.relate-list-item time svg{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 15px;
height: 15px;
fill: #8e8e8e;
}

.relate-list-item .sponsored{
  font-size: 1.2rem;
  line-height: 1;
  color: #8e8e8e;
  margin-left: 7px;
}

@media screen and (min-width: 520px) {
  .relate-list{
    margin: 20px 0;
  }

  .relate-list>*+*{
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }

  .relate-list-item a{
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 5px;
  }

  .relate-list-item .title{
    font-size: 2rem;
  }

  .relate-list-item .img-box{
    width: 40%;
  }

  @media (hover: hover) and (pointer: fine) {
    .relate-list-item:hover a{
      background-color: #f5f5f5;
      transition: .2s;
    }
  }
}

@media (hover: hover) and (pointer: fine) {

  .relate-list-item:hover .title{
    color: #1b94e0;
    transition: .2s;
  }

  .relate-list-item:hover img{
    transform: scale(1.1,1.1);
    transition: .8s transform;
  }
}

/*-----　play-btn　-----*/
article .play-btn{
  max-width: 500px;
  margin: 15px auto;
}

/*-----　コメント -----*/
.comment-box>h2{
  font-size: 2.2rem;
  margin-bottom: 5px;
}

.comment-box>h3{
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.comment-box>.outline{
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.comment-box>.outline a{
  color: #1b94e0;
}

@media (hover: hover) and (pointer: fine) {
  .comment-box>.outline a:hover{
    color: #00C3FF;
  }
}

.comment-box .more-btn-s-outer{
  margin-top: 5px;
  border-top: 2px dotted #ddd;
  padding-top: 10px;
}

@media screen and (min-width: 960px) {
  .comment-box>h2{
    font-size: 2.8rem;
    margin-bottom: 5px;
  }  

  .comment-box>h3{
    font-size: 2rem;
  }
}

/*news-image-full
-------------------------------------------*/
main.width100{
  width: 100%;
  margin-bottom: 0;
}

.news-image-full{
  margin-bottom: 0;
}

.news-image-full>*{
  max-width: none;
}

.news-image-full .article-header{
  border-bottom: none;
  margin-bottom: 0;
}

.news-image-box{
  position: relative;
  margin: 0 -13px 10px;
  text-align: center;
  background-color: #eeeded;
}

.news-image-box .prev,
.news-image-box .next{
  position: absolute;
  top: 0;
  display: block;
  width: 40%;
  height: 100%;
  opacity: 0;
}

.news-image-box .prev{
  left: 0;
}

.news-image-box .next{
  right: 0;
}

.news-image-box .prev::before,
.news-image-box .next::before{
  position: absolute;
  top: 50%;
  display: inline-block;
  content: '';
  width: 30px;
  height: 30px;
  border-top: solid 5px #1b94e0;
  border-right: solid 5px #1b94e0;
  z-index: 1;
}

.news-image-box .prev::before{
  left: 15px;
  transform: translateY(-50%) rotate(-135deg);
}

.news-image-box .next::before{
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
}

.news-image-box .prev::after,
.news-image-box .next::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 50px;
  height: 100px;
  background-color: #fff;
}

.news-image-box .prev::after{
  left: 0;
  border-radius: 0 5px 5px 0;
}

.news-image-box .next::after{
  right: 0;
  border-radius: 5px 0 0 5px;
}

@media (hover: hover) and (pointer: fine) {
  .news-image-box .prev:hover,
  .news-image-box .next:hover{
    opacity: 1;
  }
}

.news-image-box figcaption{
 padding: 5px 13px;
 font-size: 1.2rem;
 background-color: #fff;
}

.news-image-box img{
  width: auto;
}

.news-image-list{
  padding: 0 48px;
  margin: 0 -13px 20px;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .news-image-thumb:hover{
    opacity: 0.7;
  }
}

.news-image-thumb figure{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eeeded;
  height: 80px;
}

.news-image-thumb img{
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.news-image-list .swiper-button-prev,
.news-image-list .swiper-button-next {
  position: absolute;
  z-index: 3;
  top: 0;
  display: block;
  width: 48px;
  height: 100%;
  cursor: pointer;
}

.news-image-list .swiper-button-prev::before,
.news-image-list .swiper-button-next::before{
  position: absolute;
  top: 50%;
  display: inline-block;
  content: '';
  width: 15px;
  height: 15px;
  border-top: solid 2px #1b94e0;
  border-right: solid 2px #1b94e0;
}

.news-image-list .swiper-button-prev{
  left: 0;
}

.news-image-list .swiper-button-prev::before{
  left: 18px;
  transform: translateY(-50%) rotate(-135deg);
}

.news-image-list .swiper-button-next{
  right: 0;
}

.news-image-list .swiper-button-next::before{
  right: 18px;
  transform: translateY(-50%) rotate(45deg);
}

.news-image-full .share-box{
  max-width: 740px;
  margin: 20px auto;
}

@media screen and (min-width: 520px) and (max-width: 960px) {
  .news-image-box{
    margin-left: 0;
    margin-right: 0;
  }

  .news-image-thumb figure{
    height: 100px;
  }
}

@media screen and (min-width: 960px) {
  .news-image-box{
    margin: 0 -60px 15px;
  }

  .news-image-box figcaption{
    padding: 13px 30px;
   }

   .news-image-thumb figure{
    height: 120px;
  }
}

/*-----　back-btn　-----*/

.back-btn{
  max-width: 300px;
  margin: 20px auto;
}

.back-btn a{
  display: block;
  color: #1b94e0;
  border: 1px solid #1b94e0;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  padding: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .back-btn a:hover{
    background-color: #EDF8FF;
  }
}

@media screen and (min-width: 960px) {
  .back-btn{
    font-size: 2rem;
  }
}

/*listの中のarticle
-------------------------------------------*/
.list-header+article{
  padding-top: 30px;
}

/*review-full
-------------------------------------------*/

.review-article-header h1 span{
  display: block;
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #003c8d;
}

.review-article-header .info{
  margin: 10px 0 0 0;
}

.rate-user-box h2{
  font-size: 2.2rem;
}

.rate-user-box table{
  width: 100%;
  font-size: 1.4rem;
  margin: 0;
}

.rate-user-box table tr{
  border-bottom: 1px dotted #ccc;
}

.rate-user-box table th{
  text-align: left;
  border: none;
  background-color: transparent;
}

.rate-user-box table td{
  text-align: right;
  border: none;
}

.rate-box table tr.total{
  font-size: 1.6rem;
  font-weight: 600;
}

.rate-box table tr.total .pt{
  color: #f95b65;
}

.user-box{
  border: 0!important;
  background-color: #f5f5f5;
}


@media screen and (min-width: 520px){
  .rate-user-box{
    display: flex;
    gap: 3%;
  }

  .rate-box{
    width: 100%;
  }

  .user-box{
    flex-shrink: 0;
  }
}


/*main-sectionの中のボタン
-------------------------------------------*/
.main-section .play-btn{
  margin: 0 13px;
}

.main-section .more-btn{
  margin-bottom: 20px;
}

@media screen and (min-width: 520px){
  .main-section .play-btn{
    max-width: 500px;
    margin: 0 auto;
  }
}

/*===========================================

  sub

    1.category
    2.genre
    3.game-rank
    4.comment-rank
    5.schedule
    6.follow

===========================================*/
.sub>*+*{
  margin-top: 30px!important;
}

.sub section{
  background-color: #fff;
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
}

.sub section.sub-content{
  padding: 16px;
}

/* TB */
@media screen and (min-width: 520px) and (max-width: 960px) {
  .sub{
    margin: 0 13px;
  }

  .sub section{
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    }
}

/* PC */
@media screen and (min-width: 960px){
  .sub section{
    margin: 0;
    }

  .sticky-box{
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
  }
}

/*----- 見出し -----*/

.sub section.sub-content h2{
  font-size: 1.8rem;
  color: #003c8d;
  padding-bottom: 5px;
  border-bottom: 1px solid #003c8d;
}

.sub section.sub-nav h2{
  font-size: 1.8rem;
  padding: 10px 16px;
  color: #003c8d;
  background-color: #dde8f0;
}


/*人気カテゴリ
-------------------------------------------*/

.category>ul>*+*{
  border-top: 3px solid #f5f5f5;
}

.category>ul>li:nth-child(4),
.category>ul>li:nth-child(5){
  padding-bottom: 15px;
}

.category>ul>li>a{
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 50px;
  padding: 0 16px;
  color: #333;
}

.category>ul>li>a>svg{
  fill: #3fa9f5;
  width: 22px;
  height: 22px;
  margin-right: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .category>ul>li>a:hover{
    color: #1b94e0;
  }
}

.category>ul>li>ul{
  padding: 0 16px 0 41px;
}


/*ジャンル
-------------------------------------------*/
.genre>ul>li{
  padding: 13px 16px;
}

.genre>ul>*+*{
  border-top: 3px solid #f5f5f5;
}

.genre>ul>li>div{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.genre>ul>li>div::before{
  display: inline-block;
  content: '';
  width: 3px;
  height: 18px;
  background-color: #b5e0fe;
  vertical-align: -3px;
  margin-right: 6px;
}

.genre>ul>li>div>a{
  color: #1b94e0;
}

@media (hover: hover) and (pointer: fine) {
  .genre>ul>li>div>a:hover{
    color: #00C3FF;
    text-decoration: underline;
  }
}

/*----- 人気カテゴリ・ジャンル共通デザイン -----*/

.category>ul>li>ul,
.genre>ul>li>ul{
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4rem;
  line-height: 2.2;
}

.category>ul>li>ul>li::after,
.genre>ul>li>ul>li::after{
  content: "|";
  color: #E4E4E4;
}

.category>ul>li>ul>li:last-child:after,
.genre>ul>li>ul>li:last-child::after{
  display: none;
}

.category>ul>li>ul>li>a,
.genre>ul>li>ul>li>a{
  padding: 0 10px;
  color: #333;
}

@media (hover: hover) and (pointer: fine) {
  .category>ul>li>ul>li>a:hover,
  .genre>ul>li>ul>li>a:hover{
    color: #1b94e0;
    text-decoration: underline;
  }
}

@media screen and (min-width: 960px){
  .category>ul>li>ul,
  .genre>ul>li>ul{ 
    line-height: 1.8;
  }
}

/*ランキング
-------------------------------------------*/

/*----- タブ -----*/
.rank-tab{
  padding-top: 10px;
}

/*タブのスタイル*/
.tab-menu {
  width: calc((100% - 20px)/3);
  height: 28px;
  line-height: 28px;
  font-size: 1.4rem;
  display: block;
  float: left;
  text-align: center;
  cursor: pointer;
  border: 1px solid #1b94e0;
  color: #116DA7;
  transition: .2s;
  margin-right: 10px;
  border-radius: 5px;
}

.tab-menu:last-of-type {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .tab-menu:hover {
    background-color: #ebfaff;
    transition: .2s;
  }
}

/*ラジオボタンを全て消す*/
input[name="tab-menu"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab-contents {
  display: none;
  clear: both;
}

/*選択されているタブを表示*/
#all-menu:checked ~ #all-menu,
#pc-menu:checked ~ #pc-menu,
#sp-menu:checked ~ #sp-menu {
  display: block;
}

/*選択されているタブのスタイル*/
.rank-tab input:checked + .tab-menu {
  background-color: #ebfaff;
  font-weight: 600;
}

.rank-tab .rank-list{
  margin-bottom: 10px;
}

/*----- ランキングリスト -----*/

.rank-list {
  counter-reset: number 0;
}

.rank-list li{
  font-size: 1.6rem;
  position: relative;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

.rank-list li::before{
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
  counter-increment: number 1;
  content: counter(number) " "; 
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 23px;
  color: #1b94e0;
  border: 1px solid #1b94e0;
  white-space: nowrap;
}

.rank-list li:nth-child(1):before{
  background-color: #f95b65;
  border-color: #f95b65;
  color: #fff;
}

.rank-list li:nth-child(2):before{
  background-color: #ff8445;
  border-color: #ff8445;
  color: #fff;
}

.rank-list li:nth-child(3):before{
  background-color: #f8b534;
  border-color: #f8b534;
  color: #fff;
}

.rank-list a{
  display: block;
  padding-left: 35px;
  color: #333;
}

@media (hover: hover) and (pointer: fine) {
  .rank-list a:hover{
    color: #1b94e0;
  }  
}

/*----- ゲームランキング -----*/

.game-rank .rank-list li{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  height: 45px;
}

.game-rank .rank-list a{
  line-height: 45px;
}

/*----- コメントランキング -----*/

.comment-rank .rank-list li:last-child{
  border-bottom: none;
}

.comment-rank .rank-list a{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.4rem;
}

.comment-rank .rank-list .comment{
  margin-left: 8px;
}

/*スケジュール
-------------------------------------------*/

.schedule-list>*+*{
  border-top: 1px solid #ccc;
}

.schedule-list li a{
  display: block;
  padding: 10px 0;
  font-size: 1.4rem;
}

.schedule-list li a time{
  color: #333;
}

.schedule-list li span::before{
  content: '-';
  color: #333;
  margin: 0 5px;
}

.schedule-list li a .title{
  transition: .2s;
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .schedule-list li a:hover .title{
    color: #1b94e0;
    transition: .2s;
  }
}

/*フォロー
-------------------------------------------*/

.follow{
  margin: 30px 10px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(27, 148, 224, 0.2);
}

.follow h2{
  font-size: 2.5rem;
  color: #1b94e0;
}

.follow h2 span{
  position: relative;
}

.follow h2 span::before,
.follow h2 span::after{
  position: absolute;
  display: inline-block;
  top: 50%;
  content: "";
  width: 2px;
  height: 25px;
  background-color: #1b94e0;
}

.follow h2 span::before{
  left: -20px;
  transform: translate(0,-50%) rotate(-25deg);
}

.follow h2 span::after{
  right: -20px;
  transform: translate(0,-50%) rotate(25deg);
}

.follow p{
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.follow div{
  display: flex;
  justify-content: center;
}

.follow div *+*{
  margin-left: 15px;
}

.follow div a{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.follow svg{
  width: 25px;
  height: 50px;
  fill: #fff;
}

.follow div a.X{
  background-color: #3d4247;
}

.follow div a.rss{
  background-color: #ff7a3c;
}


@media (hover: hover) and (pointer: fine) {
  .follow div a.X:hover{
    background-color: #555758;
  }

  .follow div a.rss:hover{
    background-color: #ff9728;
  }
}

/* TB */
@media screen and (min-width: 520px) and (max-width: 960px) {
  .follow{
    margin: 30px auto;
    max-width: 480px;
  }
}

/* PC */
@media screen and (min-width: 960px){
  .follow{
    margin: 30px 0 0 0;
  }
}

/*===========================================

  FootBottom

===========================================*/
.recommend-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 10px 20px;
}

.recommend-list .item-box{
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.recommend-list .text-box{
  padding: 8px;
}

.recommend-list .img-box::before{
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  line-height: 18px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 0 5px;
  color: #fff;
  background-color: #3fa9f5;
  z-index: 2;
}

.recommend-list .news .img-box::before{
  content: "ニュース";
}

.recommend-list .game .img-box::before{
  content: "ゲーム";
}

.recommend-list .game,
.recommend-list .game .text-box{
  display: flex;
  flex-direction: column;
}

.recommend-list .game .text-box{
  position: relative;
  flex-grow: 1;
  justify-content: space-between;
}

.recommend-list .game .text-box::after{
  content: "AD";
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
  color: #8e8e8e;
  border: 1px solid #8e8e8e;
  border-radius: 3px;
  padding: 2px 4px;
}

.recommend-list .title{
  font-size: 1.2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.recommend-list .game .title{
  margin-bottom: 5px;
}

.recommend-list .game .play-btn{
  margin: auto 0 0 auto;
  width: fit-content;
  font-size: 1.2rem;
  line-height: 2.2!important;
  border-radius: 3px
}

.recommend-list .game .play-btn .play-btn-inner{
  padding: 0 6px;
}

@media screen and (min-width: 960px){
  .recommend-list{
    gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0;
  }
  
  main .recommend{
    margin-top: 30px;
  }

  main .recommend-list{
    grid-template-columns: 1fr 1fr;
  }
    
  .recommend-list .img-box::before{
    top: auto;
    bottom: 0;
    line-height: 20px;
    font-size: 1.1rem;
    padding: 0 8px;
  }

  .recommend-list .text-box{
    padding: 13px;
  }

  .recommend-list .game .text-box::after{
    bottom: 13px;
    left: 13px;
  }

  .recommend-list .title{
    font-size: 1.4rem;
  }
}

/*===========================================

  footer

===========================================*/


footer {
  text-align: center;
  background-color: #333;
  padding: 30px 0 10px 0;
}

footer .og-logo{
  display: inline-block;
  margin-bottom: 20px;
}

footer .og-logo svg{
  display: inline-block;
  width: auto;
  height: 50px;
  fill: #fff;
}

footer ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 13px 20px 13px;
  border-bottom: 1px solid #707070;
  font-size: 1.3rem;
}

footer ul li{
  margin: 0 10px 10px;
}

footer ul li a{
  color: #fff;
}

footer .media a{
  display: inline-block;
  margin: 15px;
}

footer .media svg{
  display: inline-block;
  width: auto;
  height: 30px;
  fill: #ccc;
}

footer .copyright{
  color: #ccc;
}

@media (hover: hover) and (pointer: fine) {
  footer a:hover{
    opacity: 0.7;
    color: #fff;
  }
}

/* PC */
@media screen and (min-width: 960px){
  footer ul{
    font-size: 1.5rem;
  }

  footer ul *+*{
    margin-left: 20px;
  }
  
}