/*20240430*/

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

ベース

--------------------------------------------------------------------------------*/
@charset "utf-8";

:root {
  --c-primary: #2352ff;
  --c-primary-darker: #223C99;
  --c-primary-lighter: #edf1ff;
  --c-link: #1a73e8;
  --c-link-hover: #0099ff;
  --c-body: #333;
  --c-gray: #545466;
  --c-gray-darker: #373747;
  --c-gray-lighter: #9292a8;
  --c-gray-border: #e9e9ef;
  --c-gray-border-darker: #D4D4D9;
  --c-base-bg: #fff;
  --c-primary-bg: #F5F5F7;
  --c-primary-bg-darker: #ececf4;
  --c-secondary-bg: #3F3F4D;
  --c-theme-news: #1492E6;
  --c-theme-news-bg: #e5f1fa;
  --c-theme-game: #05bd9b;
  --c-theme-game-bg: #e0f7f2;
  --c-theme-app: #f98900;
  --c-theme-app-bg: #fff1db;

  --c-play-btn: #00d5ae;
  --c-play-btn-download: #ff367a;
  --c-play-btn-entry: #ff6a00;

  --c-play-btn-hover: #00e7bd;
  --c-play-btn-download-hover: #ff6196;
  --c-play-btn-entry-hover: #ff8800;

  /*ニュース*/
  --c-cat-news: #1492E6;
  --c-cat-news-bg: #e5f1fa;

  /*エンタメ、グッズ、コラボカフェ*/
  --c-cat-entame: #ff8800;
  --c-cat-entame-bg: #fff1e0;

  /*新作*/
  --c-cat-newtitle: #f75437;
  --c-cat-newtitle-bg: #ffeae7;

  /*セール*/
  --c-cat-sale: #ff6795;
  --c-cat-sale-bg: #ffedf3;
  
  /*動画*/
  --c-cat-video: #b75aff;
  --c-cat-video-bg: #f5e9ff;

  /*eスポーツ、業界動向*/
  --c-cat-business: #7272ff;
  --c-cat-business-bg: #f1f1ff;

  /*ハード、周辺機器*/
  --c-cat-product: #489cfd;
  --c-cat-product-bg: #e8f3ff;

  /*特集*/
  --c-cat-special: #08d8d2;
  --c-cat-special-bg: #ddfffe;

  /*インタビュー、取材、プレイレポート*/
  --c-cat-report: #2fcf87;
  --c-cat-report-bg: #e6fff4;

  /*おすすめ*/
  --c-cat-recommend: #a6e200;
  --c-cat-recommend-light: #bbff00;
  --c-cat-recommend-bg: #f2ffd0;
  --c-cat-recommend-text: #4d6608;

  --font-base: "Hiragino Sans","メイリオ",Meiryo,YuGothic,"Yu Gothic",sans-serif;
  --header-height: 50px;
  --rounded-circle: 50%;
  --rounded-full: 100vh;
  --rounded-app: 20%;
  --animation: .1s all linear;
  --shadow: 0 0 6px 3px rgb(55 99 255 / 14%);
  --contents-padding: 10px;
  --sub-contents-padding: 14px;
  scroll-padding: var(--header-height);
}

@media screen and (min-width: 520px){
  :root {
    --contents-padding: 14px;
  }
}

@media screen and (min-width: 960px) {
  :root {
    --header-height: 70px;
  }
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body{
  position: relative;
  font-family: var(--font-base);
  color: var(--c-body);
  font-size: 1.6rem;
  line-height: 1.3;
  background-color: var(--c-primary-bg);
  padding-top: var(--header-height);
  overflow-x: hidden;
  word-break: break-word;
}

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

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

summary{
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker{
  display: none
}

label{
  cursor: pointer;
}

button{
  cursor: pointer;
}

@media screen and (min-width: 520px){
  body{
    font-size: 1.8rem;
  }
}

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

レイアウト

--------------------------------------------------------------------------------*/
.l-header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: var(--header-height);
}

.l-container{
  padding: 20px 0;
}

.l-article-container{
  padding-bottom: 20px;
}

.l-contents{
  padding: 0 var(--contents-padding);
}

.l-contents+*{
  margin-top: 20px;
}

.l-2col{
  display: grid;
  gap: 20px;
  grid-template-columns: 100%;
}

.l-main>*+*{
  margin-top: 20px;
}

.l-sub>*+*{
  margin-top: 20px;
}

.l-footer{
  padding: 20px 0;
}

.bg-dot{
  background-color: #fff;
  background-image:
    radial-gradient(var(--c-primary-bg-darker) 1px, transparent 1px),
    radial-gradient(var(--c-primary-bg-darker) 1px, transparent 1px);
  background-size: 10px 10px;
}

@media screen and (min-width: 520px) {
  .l-contents{
    max-width: 792px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
  }

  .l-article-container{
    padding-bottom: 40px;
    margin-top: -70px;
  } 
}

@media screen and (min-width: 960px) {
  .l-container{
    padding: 40px 0;
  }

  .l-contents{
    max-width: 1200px;
  }

  .l-contents+*{
    margin-top: 40px;
  }

  .l-2col{
    grid-template-columns: 1fr 1fr minmax(300px, 1fr);
    gap: 24px;
  }

  .l-main{
    grid-column-start: 1;
    grid-column-end: 3;
    max-width: 792px;
  }

  .l-main>*+*{
    margin-top: 40px;
  }

  .l-sub>*+*{
    margin-top: 16px;
  }

  .l-footer{
    padding: 30px 0;
  }
}

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

モジュール

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

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

ヘッダー

----------------------------------------*/
header{
  transition: transform 0.1s;
  height: var(--header-height);
  border-bottom: 1px solid var(--c-gray-border-darker);
  background-color: var(--c-base-bg);
}

header.hidden {
  transition: transform 0.3s;
  transform: translateY(calc(var(--header-height) * -1));
}

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

@media screen and (min-width: 960px) {
  .header{
    display: flex;
    justify-content: space-between;
  }
}

/*ロゴ
---------------------------*/
.header-logo {
  height: var(--header-height);
  background-color: var(--c-base-bg);
  border-bottom: 1px solid var(--c-gray-border-darker);
}

.header-logo img{
  width: auto;
  height: var(--header-height);
}

/*メニュー（ボタン）
---------------------------*/
#menu-btn-check{
  display: none;
}

.menu-btn{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: var(--header-height);
  width: var(--header-height);
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--c-gray-border-darker);
  border-left: 1px solid var(--c-gray-border);
  transition: var(--animation);
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: var(--c-gray);
  position: absolute;
  transition: var(--animation);
}

.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media screen and (min-width: 960px) {
  .menu-btn{
    display: none;
  }
}

@media (hover: hover) {
  .menu-btn:hover{
    background-color: var(--c-primary-lighter);
  }
}

/*メニュー
---------------------------*/
.header-content{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding-top: var(--header-height);
  width: 100%;
  height: calc(100vh + var(--header-height));
  background-color: var(--c-primary-bg);
  display: none;
}

#menu-btn-check:checked ~ .header-content {
  display: block;
}

.menu__item{
  position: relative;
  line-height: 50px;
  font-size: 1.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--c-gray-border-darker);
  transition: var(--animation);
}

.menu__item::before{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  content: '';
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--c-gray-lighter);
  border-right: 3px solid var(--c-gray-lighter);
}

.menu__item a{
  display: block;
  padding: 0 var(--contents-padding) 0 calc(var(--contents-padding) + 20px + 10px);
}

.menu__item svg{
  position: absolute;
  top: 50%;
  left: var(--contents-padding);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: var(--c-gray);
}

.menu__item--news svg{
  fill: var(--c-theme-news);
}

.menu__item--game svg{
  fill: var(--c-theme-game);
}

.menu__item--app svg{
  fill: var(--c-theme-app);
}

.sub-menu{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px var(--contents-padding);
}

.sub-menu__item{
  width: 100%;
}

.sub-menu__item a{
  display: block;
  text-align: center;
  white-space: nowrap;
  line-height: 50px;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0 10px;
  transition: var(--animation);
}

.sub-menu__item--release{
  display: flex;
  gap: 8px;
}

.sub-menu__item--release a:nth-child(n+2){
  width: 100%;
  background-color: var(--c-primary-bg-darker);
  overflow: hidden;
  border-radius: var(--rounded-full);
}

.sub-menu__item--program{
  background-color: var(--c-primary-bg-darker);
  overflow: hidden;
  border-radius: var(--rounded-full);
}

@media screen and (min-width: 960px) {
  .header-content{
    display: flex;
    align-items: center;
    position: static;
    width: auto;
    height: auto;
    padding: 0 var(--header-height) 0 0;
    background-color: transparent;
  }

  .header-content nav{
    display: flex;
    align-items: center;
  }

  .menu{
    display: flex;
    align-items: center;
  }

  .menu__item{
    height: var(--header-height);
    line-height: var(--header-height);
    border-left: 1px solid var(--c-gray-border);
  }

  .menu__item--news:hover{
    border-bottom: 5px solid var(--c-theme-news);
  }
  .menu__item--game:hover{
    border-bottom: 5px solid var(--c-theme-game);
  }
  .menu__item--app:hover{
    border-bottom: 5px solid var(--c-theme-app);
  }

  .menu__item:nth-of-type(3){
    border-right: 1px solid var(--c-gray-border);
  }

  .menu__item::before{
    content: none;
  }

  .menu__item a{
    padding: 0 24px;
  }

  .menu__item svg{
    display: none;
  }

  .menu__item--news.is-current{
    color: var(--c-theme-news);
    border-bottom: 5px solid var(--c-theme-news)!important;
  }

  .menu__item--game.is-current{
    color: var(--c-theme-game);
    border-bottom: 5px solid var(--c-theme-game)!important;
  }

  .menu__item--app.is-current{
    color: var(--c-theme-app);
    border-bottom: 5px solid var(--c-theme-app)!important;
  }

  .sub-menu{
    flex-direction: row;
    padding: 0;
    gap: 10px;
    margin: 0 14px;
  }

  .sub-menu__item{
    width: auto;
    min-width: 80px;
    overflow: hidden;
    border-radius: var(--rounded-full);
  }

  .sub-menu__item a{
    line-height: 38px;
    font-size: 1.2rem;
    background-color: var(--c-primary-bg);
  }

  .sub-menu__item--release a:first-child{
    width: 100%;
  }

  .sub-menu__item--release a:nth-child(n+2){
    display: none;
  }
}

@media (hover: hover) {
  .menu__item--news:hover{
    color: var(--c-theme-news);
    background-color: var(--c-theme-news-bg);
  }
  .menu__item--game:hover{
    color: var(--c-theme-game);
    background-color: var(--c-theme-game-bg);
  }
  .menu__item--app:hover{
    color: var(--c-theme-app);
    background-color: var(--c-theme-app-bg);
  }

  .sub-menu__item--release a:hover{
    color: var(--c-cat-newtitle);
    background-color: var(--c-cat-newtitle-bg);
  }

  .sub-menu__item--program a:hover{
    color: var(--c-primary);
    background-color: #e4eaff;
  }
}

/*検索ボタン
---------------------------*/
#search-btn-check{
  display: none;
}

.search-btn{
  display: none;
}

@media screen and (min-width: 960px) {
  .search-btn{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-height);
    height: var(--header-height);
    border-bottom: 1px solid var(--c-gray-border-darker);
    border-left: 1px solid var(--c-gray-border);
    transition: var(--animation);
  }

  .search-btn span{
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .search-btn span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 25px;
    height: 25px;
    border: solid 3px var(--c-gray);
    border-radius: var(--rounded-circle);
    transition: var(--animation);
  }

  .search-btn span::after{
    content: '';
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 3px;
    height: 10px;
    border-radius: 0 0 3px 3px;
    background-color: var(--c-gray);
    transition: var(--animation);
  }

  #search-btn-check:checked+.search-btn{
    background-color: rgba(63, 63, 77, 0.95);
  }

  #search-btn-check:checked+.search-btn span::before{
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 3px;
    border-radius: 3px;
    border: none;
    background-color: #fff;
  }

  #search-btn-check:checked+.search-btn span::after{
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 28px;
    border-radius: 3px;
    background-color: #fff;
  }

  #search-btn-check:checked ~ .search-content {
    opacity: 1;
    visibility: visible;
  }

  @media (hover: hover) {
    .search-btn:hover{
      background-color: var(--c-primary-lighter);
    }
  }
}

/*検索
---------------------------*/
.search-content{
  clear: both;
  padding: 18px var(--contents-padding);
  border-bottom: 1px solid var(--c-gray-border-darker);
  background-color: rgba(63, 63, 77, 0.95);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.search-content__title{
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

#checke-news,
#checke-game,
#checke-app{
  display: none;
}

.search-select{
  position: relative;
  display: inline-block;
  color: #D4D4D9;
  font-size: 1.4rem;
  line-height: 36px;
  text-align: center;
  transition: var(--animation);
  padding: 0 8px 0 28px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.search-select::before{
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  content: '';
  width: 14px;
  height: 14px;
  border-radius: var(--rounded-circle);
  outline: 1px solid #D4D4D9;
}

#checke-news:checked+label,
#checke-game:checked+label,
#checke-app:checked+label{
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

#checke-news:checked+label::before,
#checke-game:checked+label::before,
#checke-app:checked+label::before{
  border-color: #fff;
}

#checke-news:checked+label::after,
#checke-game:checked+label::after,
#checke-app:checked+label::after{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--rounded-circle);
  background-color: #fff;
}

.search-field{
  position: relative;
}

.search-field input{
  width: 100%;
  font-size: 1.4rem;
  line-height: 50px;
  background-color: #fff;
  padding: 0 14px;
  border-radius: 5px;
  transition: var(--animation);
}

.search-field input::placeholder {
  color: var(--c-gray-lighter);
}

.search-field button{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 0 5px 5px 0;
}

.search-field button::before{
  position: absolute;
  top: 0;
  left: -10px;
  content: '';
  width: 10px;
  height: 50px;
  background: linear-gradient(to right,transparent,#fff);
}

.search-field svg{
  width: 30px;
  height: 30px;
  fill: var(--c-gray);
  transition: var(--animation);
}

#checke-news:checked+label~.search-field input:focus{
  outline: 1px solid var(--c-theme-news);
  box-shadow: 0 0 8px var(--c-theme-news);
}

#checke-news:checked+label~.search-field input:focus+button svg{
  fill: var(--c-theme-news);
}

#checke-game:checked+label~.search-field input:focus{
  outline: 1px solid var(--c-theme-game);
  box-shadow: 0 0 8px var(--c-theme-game);
}

#checke-game:checked+label~.search-field input:focus+button svg{
  fill: var(--c-theme-game);
}

#checke-app:checked+label~.search-field input:focus{
  outline: 1px solid var(--c-theme-app);
  box-shadow: 0 0 8px var(--c-theme-app);
}

#checke-app:checked+label~.search-field input:focus+button svg{
  fill: var(--c-theme-app);
}

@media screen and (min-width: 960px) {
  .search-content{
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(63, 63, 77, 0.95);
    border-bottom: 0;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .search-content form{
    max-width: 800px;
    margin: 0 auto;
  }

  .search-content__title{
    font-size: 2.8rem;
  }
}

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

広告

----------------------------------------*/
.pr-note{
  color: #777;
  font-size: 1.1rem;
  text-align: right;
  margin-top: 5px;
}

/*ジャック(ネットワーク)
---------------------------*/
.ad-jack-adn{
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  text-align: center;
  background-color: var(--c-primary-bg-darker);
  padding-bottom: 10px;
}

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

/*ジャック
---------------------------*/
.ad-jack {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--c-primary-bg-darker);
  margin-bottom: 10px;
}

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

@media screen and (min-width: 960px) {
  .ad-jack {
    margin-bottom: 0;
  }
}

/*メインカラム
---------------------------*/
.ad-jack-main{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  background-color: var(--c-primary-bg-darker);
  border-top: none!important;
}

.ad-jack-main+.news-list__item{
  border-top: none!important;
}

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

/*フローティングバナー
---------------------------*/
.ad-jack-siderail{
  display: none;
}

@media screen and (min-width: 1200px) {
.l-container-wrap{
  padding-bottom: 624px;
}

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

.ad-jack-siderail{
  display: block;
  position: sticky;
  top: var(--header-height);
  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: 12px 0;
  box-sizing: content-box;
}

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

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

/*インフィード
---------------------------*/
.ad-infeed{
  overflow: hidden;
}

/*ジャンルに関連したバナー
---------------------------*/
.ad-relate{
  overflow: hidden;
  background-color: var(--c-primary-bg-darker);
  height: 300px;
}

/*記事内
---------------------------*/
.ad-article-top,
.ad-article-bottom{
  overflow: hidden;
  margin-left: var(--contents-padding);
  margin-right: var(--contents-padding);
}

.ad-infeed-article{
  margin: var(--article-margin) var(--contents-padding);
  overflow: hidden;
}

.ad-primecaster{
  text-align: center;
}

/*サブの広告
---------------------------*/
.ad-rectangle{
  min-height: 280px;
}
@media screen and (min-width: 520px) {
  .ad-rectangle{
    overflow: hidden;
  }
}

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

パンくず

----------------------------------------*/
.breadcrumb-wrapper{
  background-color: rgba(0, 0, 0, 0.3);
}

.breadcrumb-wrapper .breadcrumb li{
  color: #ccc;
}

.breadcrumb-wrapper .breadcrumb svg{
  fill: #ccc;
}

.breadcrumb{
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  padding: 0 var(--contents-padding);
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.breadcrumb li{
  position: relative;
  font-size: 1.2rem;
  line-height: 30px;
  color: var(--c-gray);
  transition: var(--animation);
}

.breadcrumb li::before {
  position: absolute;
  top: 50%;
  right: -12px;
  content: "";
  width: 6px;
  height: 6px;
  border-top: solid 2px #aaa;
  border-right: solid 2px #aaa;
  transform: translate(0,-50%) rotate(45deg);
}

.breadcrumb li:last-child::before{
  content: none;
}

.breadcrumb a{
  display: flex;
  align-items: center;
  height: 30px;
  white-space: nowrap;
}

.breadcrumb svg{
  width: 16px;
  height: 16px;
  fill: var(--c-gray);
  transition: var(--animation);
}
@media screen and (min-width: 520px){
  .breadcrumb {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
  }
}

@media screen and (min-width: 960px){
  .breadcrumb {
      max-width: 1200px;
  }
}

@media (hover: hover) {
  .breadcrumb li:hover{
    text-decoration: underline;
  }
}

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

ページの見出し

----------------------------------------*/
.page-head-bg + .l-container{
  padding-top: var(--contents-padding);
}

.page-head-bg{
  background-color: #597DFF;
  background-image:
  linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)),
  radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
  radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
  radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-position: 0 0, 9px 9px, 3px 3px, 0 0;
  background-size: 100% 100%, 12px 12px, 12px 12px, 6px 6px;
}

.page-head-bg--news{
  background-color: var(--c-theme-news);
}

.page-head-bg--game{
  background-color: var(--c-theme-game);
}

.page-head-bg--app{
  background-color: var(--c-theme-app);
}

.page-head{
  padding: 14px var(--contents-padding);
  margin: 0;
}

.page-head__title{
  position: relative;
  font-size: 2.4rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.page-head__outline{
  position: relative;
  margin-top: 10px;
}

.page-head__outline p+p{
  margin-top: 10px;
}

.page-head__outline p{
  font-size: 1.4rem;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/*もっと読む*/
.page-head__outline.-long{
  padding-bottom: 32px;
}

.page-head__outline.is-hide p:first-child{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.page-head__outline.is-hide p:nth-child(n+2){
  visibility: hidden;
  position:absolute;
}

.page-head__outline button{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  line-height: 24px;
  padding: 0 10px;
  border-radius: var(--rounded-full);
  background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 520px){
  .page-head{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media screen and (min-width: 960px) {
  .page-head-bg + .l-container{
    padding-top: 40px;
  }  

  .page-head {
    max-width: 1200px;
  }

  .page-head__title{
    font-size: 3rem;
  }
}

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

ゲームフルの見出し

----------------------------------------*/
.game-head-bg{
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.game-head-bg::before{
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  filter: blur(10px);
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
}

.game-head-bg::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}

.game-head-bg-noimage{
  background-color: var(--c-theme-game);
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px), radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px), radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-position: 0 0, 9px 9px, 3px 3px, 0 0;
  background-size: 100% 100%, 12px 12px, 12px 12px, 6px 6px;
}

.page-head-bg:has(.game-head){
  background-color: #444;
}

.game-head{
  padding: 20px var(--contents-padding);
  margin: 0;
}

.game-head__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 14px;
}

.game-head__icon{
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--rounded-app);
  overflow: hidden;
  box-shadow: 0 0 5px 3px rgb(0 0 0 / 10%);
}

.game-head__text{
  flex-grow: 1;
}

.game-head__title{
  font-size: 2.6rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.game-head__genre{
  font-size: 1.4rem;
  color: #fff;
  margin-top: 2px;
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.game-head .play-btn{
  margin-top: 14px;
}

@media screen and (min-width: 520px) {
  .game-head{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
    padding-bottom: 100px;
  }

  .game-head__inner{
    flex-direction: row;
  }
  .game-head__title{
    font-size: 2.8rem;
    text-align: left;
  }
  .game-head__genre{
    font-size: 1.6rem;
    text-align: left;
  }
}

@media screen and (min-width: 960px) {
  .game-head{
    max-width: 1200px;
  }
  .game-head:has(.play-btn){
    display: flex;
    align-items: center;
  }
  .game-head:has(.play-btn) .game-head__inner{
    width: 66%;
  }
  .game-head .play-btn{
    width: 32%;
    min-width: 300px;
    margin-top: 0;
    margin-left: 24px;
  }
}

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

ニュースフルの背景

----------------------------------------*/
@media screen and (min-width: 520px) {
  .article-bg{
    padding-bottom: 100px;
  }
}

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

カード型のスライダ―

----------------------------------------*/
.over-card-swiper-wrap{
  overflow: hidden;
}

.card-swiper,
.over-card-swiper{
  position: relative;
  margin: -10px calc(var(--contents-padding) * -1);
  padding: 10px var(--contents-padding);
}

.over-card-swiper{
  overflow: visible;
}

.card-swiper .swiper-slide,
.over-card-swiper .swiper-slide{
  transition: .2s transform linear;
  width: 60%;
  min-width: 135px;
  height: auto;
  margin-right: 11px;
}

.over-card-swiper .swiper-slide{
  width: 54%;
}

.card-swiper .swiper-button-next,
.over-card-swiper .swiper-button-next{
  visibility: hidden;
  opacity: 0;
  transition: var(--animation);
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: var(--rounded-circle);
  background-color: #fff;
  box-shadow: var(--shadow);
  z-index: 2;
  cursor: pointer;
}
.card-swiper .swiper-button-next{
  visibility: visible;
  opacity: 1;
}
.card-swiper .swiper-button-next::before,
.over-card-swiper .swiper-button-next::before{
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%) rotate(45deg);
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
  border-top: solid 4px var(--c-primary);
  border-right: solid 4px var(--c-primary);
}

.card-swiper .swiper-button-next{
  width: 40px;
  height: 40px;
}
.card-swiper .swiper-button-next::before{
  width: 14px;
  height: 14px;
  right: 16px;
}

@media screen and (min-width: 520px) {
  .card-swiper{
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .card-swiper .swiper-slide{
    width: 38%;
    margin-right: 14px;
  }
  .over-card-swiper .swiper-slide{
    width: 33%;
    margin-right: 20px;
    max-width: 224px;
  }
}

@media screen and (min-width: 1200px) {
  .over-card-swiper{
    overflow: hidden;
    margin-right: -150px;
    margin-left: -150px;
    padding-right: 150px;
    padding-left: 150px;
  }
  .over-card-swiper::before,
  .over-card-swiper::after{
    content: '';
    width: 150px;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
  }
  .over-card-swiper::before{
    left: 0;
    background: linear-gradient(to left,transparent,#fff);
  }
  .over-card-swiper::after{
    right: 0;
    background: linear-gradient(to right,transparent,#fff);
  }
  .over-card-swiper .swiper-slide{
    width: calc((100% - 80px)/5);
  }
  .over-card-swiper .swiper-button-next{
    right: 150px;
  }
}

@media (hover: hover) {
  .card-swiper .swiper-slide:hover,
  .over-card-swiper .swiper-slide:hover{
    transform: translateY(-6px);
  }
  .over-card-swiper:hover .swiper-button-next{
    visibility: visible;
    opacity: 1;
  }
  .card-swiper .swiper-button-next:hover,
  .over-card-swiper .swiper-button-next:hover{
    opacity: 1!important;
    transform: translateY(-50%) scale(1.1);
  }
}

/* スライダー非活性時 */
.card-swiper:not(.swiper-initialized) .swiper-wrapper,
.over-card-swiper-s:not(.swiper-initialized) .swiper-wrapper{
  display: flex;
}

.card-swiper:not(.swiper-initialized) .swiper-button-next,
.over-card-swiper:not(.swiper-initialized) .swiper-button-next{
  display: none;
}

.over-card-swiper:not(.swiper-initialized)::before,
.over-card-swiper:not(.swiper-initialized)::after{
  display: none;
}

/* item */
.card-swiper-item{
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  transition: var(--animation);
  box-sizing: border-box;
}

.card-swiper .card-swiper-item img{
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.over-card-swiper .card-swiper-item img{
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card-swiper-item__text{
  position: relative;
  padding: 4px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-swiper-item__release{
  font-size: 1.2rem;
  color: var(--c-cat-newtitle);
  border-radius: 3px;
  padding-right: 48px;
}

.card-swiper-item__title{
  font-size: 1.2rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: var(--animation);
}

.over-card-swiper .card-swiper-item__title{
  font-size: 1.4rem;
}

.card-swiper-item__genre{
  font-size: 1.2rem;
}

.card-swiper-item__icon{
  position: absolute;
  top: -44px;
  right: 6px;
  aspect-ratio: 1 / 1;
  width: 60px;
  height: 60px;
  border-radius: var(--rounded-app);
  border: 2px solid #fff;
}

.card-swiper-item .pr-badge{
  margin: auto 0 0 auto;
}

.card-swiper-more{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: var(--animation);
  border-radius: 5px;
  padding: 6px;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  box-sizing: border-box;
}

.card-swiper-more span{
  position: relative;
  display: block;
  padding-bottom: 60px;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
}

.card-swiper-more svg{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,0);
  fill: var(--c-primary);
  width: 60px;
  height: 60px;
}

@media screen and (min-width: 520px) {
  .card-swiper-item__title{
    font-size: 1.3rem;
  }
  .card-swiper-item__text{
    padding: 6px;
  }
}

@media (hover: hover) {
  .card-swiper-item:hover .card-swiper-item__title{
    color: var(--c-primary);
  }

  .card-swiper-more:hover{
    background-color: var(--c-primary-lighter);
  }
}

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

もっと見るボタン

----------------------------------------*/
.more-btn{
  margin: 14px auto 0;
  background-color: var(--c-gray-darker);
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 600;
  border-radius: var(--rounded-full);
  transition: var(--animation);
}

.more-btn a{
  display: block;
}

@media (hover: hover) {
  .more-btn:hover{
    background-color: var(--c-primary-darker);
    transform: scale(1.02);
  }
}

@media screen and (min-width: 520px) {
  .more-btn{
    max-width: 600px;
    margin: 16px auto 0;
    font-size: 1.8rem;
    height: 60px;
    line-height: 60px;
  }
}

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

もっと見るリンク

----------------------------------------*/
.more-link{
  text-align: right;
  font-size: 1.4rem;
  color: var(--c-link);
  font-weight: 600;
}

.more-link a{
  position: relative;
  padding-right: 12px;
}

.more-link a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-link);
  border-right: 2px solid var(--c-link);
  transform: translateY(-50%) rotate(45deg);
  transition: var(--animation);
  opacity: 0.5;
}

@media (hover: hover) {
  .more-link a:hover{
    text-decoration: underline;
  }
}

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

記事ページ

----------------------------------------*/
.article{
  background-color: var(--c-base-bg);
  margin-right: calc(var(--contents-padding) * -1);
  margin-left: calc(var(--contents-padding) * -1);
  container: article / inline-size;
}

.article-body{
  padding: 20px 0;
}

.article-body>*+*{
  margin-top: 20px;
}

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

@media screen and (min-width: 520px) {
  .article-body>*+*{
    margin-top: 30px;
  }
  .article-body{
    padding: 24px 24px 40px;
  }
}
@media screen and (min-width: 792px) {
  .article{
    margin-right: 0;
    margin-left: 0;
    border-radius: 10px;
    overflow: hidden;
  }
}

@container (min-width: 700px) {
  .article-body{
    padding: 24px 60px 40px;
  }
}

/*記事見出し
---------------------------*/
.article-head{
  position: relative;
  background-color: var(--c-base-bg);
  border-bottom: 3px solid #ececf4;
  padding: 14px var(--contents-padding);
}

/*タイトル*/
.article-head__title{
  font-size: 2.4rem;
}

.article-head__title a{
  color: var(--c-primary-darker);
  transition: var(--animation); 
}

.article-head__title span{
  font-size: 60%;
  display: block;
  color: var(--c-gray);
  margin-top: 4px;
}

.article-head__title svg{
  width: 28px;
  height: 28px;
  fill: var(--c-primary);
  vertical-align: middle;
  margin-right: 4px;
  opacity: 0.6;
}

.article--game .article-head__title svg{
  fill: var(--c-theme-game);
}

/*スペシャルタグ*/
.article-head:has(.special-badge){
  position: relative;
  padding-top: 40px;
}

.article-head .special-badge{
  position: absolute;
  top: 10px;
  left: 10px;
}

@media screen and (min-width: 520px) {
  .article-head:has(.special-badge){
    padding-top: 46px;
  }
  
  .article-head .special-badge{
    top: 16px;
    left: 16px;
  }
}

/*ニュースタグ*/
.article-head .news-tag-box{
  margin-top: 6px;
}

/*日付、コメント、筆者、シェア*/
.article-head__info-share{
  margin-top: 10px;
}

.article-head__info:has(.article-head__news-media){
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/*日付*/
.article-head__date{
  font-size: 1.4rem;
  line-height: 20px;
  color: var(--c-gray-lighter);
}

/*コメント*/
.article-head__comment{
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 18px;
  color: #fd4f58;
  border: 1px solid #fd4f58;
  border-radius: 3px;
  transition: var(--animation);
}

.article-head__comment svg{
  width: 12px;
  height: 12px;
  fill: #fd4f58;
  vertical-align: middle;
  margin-right: 2px;
}

.article-head__comment:hover{
  background-color: #ffecee;
}

/*PR*/
.article-head .pr-badge{
  vertical-align: middle;
  margin-left: 6px;
}

/*筆者*/
.article-head .news-author{
  font-size: 1.4rem;
}

/*ニュースメディア*/
.article-head__news-media{
  font-size: 1.4rem;
}

/*シェア*/
.article-head__share{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  justify-content: right;
}

.article-head__share-item{
  position: relative;
  line-height: 30px;
  white-space: nowrap;
  border-radius: 5px;
  font-size: 1.1rem;
  color: #fff;
  overflow: hidden;
  transition: var(--animation);
}

.article-head__share-item a,
.article-head__share-item button{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  gap: 3px;
}

.article-head__share-item svg{
  width: 18px;
  height: 18px;
  fill: #fff;
}

.article-head__share-item--x{
  background-color: #3d4247;
}

.article-head__share-item--facebook{
  background-color: #1877F2;
}

.article-head__share-item--line{
  background-color: #06C755;
}

.article-head__share-item--linkcopy{
  background-color: var(--c-primary-lighter);
  color: var(--c-primary);
}

.article-head__share-item--linkcopy svg{
  fill: var(--c-primary);
}

@media screen and (min-width: 520px) {
  .article-head{
    padding: 24px;
  }

  .article-head__title{
    font-size: 2.8rem;
  }

  .article-head__info-share{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: end;
    gap: 0 10px;
  }

  .article-head__share{
    margin-left: auto;
  }
}

@container (min-width: 700px) {
  .article-head{
    padding: 24px;
  }
}

@media (hover: hover) {
  .article-head__title a:hover{
    color: var(--c-primary); 
  }

  .article-head__share-item--x:hover{
    background-color: #52575b;
  }
  
  .article-head__share-item--facebook:hover{
    background-color: #2b87ff;
  }
  
  .article-head__share-item--line:hover{
    background-color: #12e369;
  }

  .article-head__share-item--linkcopy:hover{
    background-color: #b6c5ff;
  }
}

/* Tooltip */
.tooltip::before,
.tooltip::after{
  position: absolute;
  animation: fade-tooltip .5s 1s 1 forwards;
}

.tooltip::before {
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--c-primary);
}

.tooltip::after {
	content: 'コピー';
	display: block;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

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

/*概要
---------------------------*/
.description{
  font-size: 1.6rem;
  line-height: 1.6;
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

.description a{
  font-weight: 600;
  color: var(--c-link);
}

@media screen and (min-width: 520px) {
  .description{
    font-size: 1.8rem;
  }
}

@media (hover: hover) {
  .description a:hover{
    text-decoration: underline;
    color: var(--c-link-hover);
  }
}

/*コメントを読むボタン
---------------------------*/
.to-comment-btn{
  font-size: 1.4rem;
  font-weight: 600;
  max-width: 300px;
  margin-right: auto;
  margin-left: auto;
  color: #fd4f58;
  border: 2px solid #fd4f58;
  text-align: center;
  border-radius: 10px;
  transition: var(--animation);
}

.to-comment-btn a{
  display: block;
  padding: 14px 10px;
}

.to-comment-btn svg{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 4px;
  fill: #fd4f58;
}

@media (hover: hover) {
  .to-comment-btn:hover{
    background-color: #ffecee;
  }
}

/*目次
---------------------------*/
.table-of-contents{
  background-color: #fff;
  border: 1px solid var(--c-gray-border-darker);
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

.table-of-contents summary{
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--c-gray);
  padding: 14px;
}

.table-of-contents summary::after{
  display: inline-block;
  content: '[表示]';
  font-size: 1.4rem;
  font-weight: 500;
  vertical-align: middle;
  width: 60px;
  text-align: center;
}

.table-of-contents[open] summary::after{
  content: '[非表示]';
}

.table-of-contents ol{
  padding: 0 14px 20px;
}

.table-of-contents li{
  position: relative;
  counter-increment: num 1;
  font-size: 1.4rem;
  border-bottom: 1px dotted #ccc;
  padding-left: 26px;
  padding-bottom: 8px;
}

.table-of-contents li+li{
  margin-top: 8px;
}

.table-of-contents li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.table-of-contents li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(num);
  width: 20px;
  height: 20px;
  background-color: var(--c-gray);
  text-align: center;
  line-height: 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  border-radius: 3px;
}

.table-of-contents li a{
  display: block;
}

@media screen and (min-width: 520px) {
  .table-of-contents{
    max-width: 550px;
    margin-right: auto;
    margin-left: auto;
  }
  .table-of-contents summary{
    font-size: 2rem;
  }
  .table-of-contents li{
    font-size: 1.6rem;
  }
}

@media (hover: hover) {
  .table-of-contents a:hover{
    text-decoration: underline;
  }
}

/*プレイボタン
---------------------------*/
.article-body .play-btn{
  margin-top: 20px;
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}
@media screen and (min-width: 520px) {
  .article-body .play-btn{
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
  }
}

/*記事コンテンツ
---------------------------*/
.article-body{
  --article-margin: 24px;
}

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

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

@media screen and (min-width: 520px) {
  .article-content{
    --article-margin: 26px;
  }
}

/*見出し*/
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5{
  margin: 40px 0 calc(var(--article-margin) / 2);
}
.article-content h2+*,
.article-content h3+*,
.article-content h4+*,
.article-content h5+*{
  margin-top: 0;
}

@media screen and (min-width: 520px) {
  .article-content h2,
  .article-content h3,
  .article-content h4,
  .article-content h5{
    margin-top: 50px;
  }
  .article-content h2+*,
  .article-content h3+*,
  .article-content h4+*,
  .article-content h5+*{
    margin-top: 0;
  }
}

@media (hover: hover) {
  .article-content h2 a:hover,
  .article-content h3 a:hover,
  .article-content h4 a:hover,
  .article-content h5 a:hover{
    text-decoration: underline;
  }
}

/*本文*/
.article-content p{
  font-size: 1.6rem;
  line-height: 1.65;
  margin: 0 var(--contents-padding) var(--article-margin);
}

@media screen and (min-width: 520px) {
  .article-content p{
    font-size: 1.8rem;
  }
}

/*リンク*/
.article-content a{
  color: var(--c-link);
}

@media (hover: hover) {
  .article-content a:hover{
    text-decoration: underline;
    color: var(--c-link-hover);
  }
}

/*リンクボタン*/
.link-btn{
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 var(--contents-padding) var(--article-margin);
  background-color: var(--c-link);
  text-align: center;
  border-radius: 10px;
  transition: var(--animation);
}

.link-btn::before{
  position: absolute;
  top: 50%;
  right: 12px;
  content: "";
  width: 10px;
  height: 10px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: translate(0,-50%) rotate(45deg);
  opacity: 0.7;
}

.link-btn a{
  display: block;
  padding: 18px 26px;
  color: #fff;
}

.article-content .link-btn a{
  color: #fff;
}
.link-btn.pr{
  background-color: #f81f4b;
}
.link-btn.present{
  background-color: #ff1eb0;
}

@media screen and (min-width: 520px) {
  .link-btn{
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (hover: hover) {
  .article-content .link-btn a:hover{
    text-decoration: none;  
  }

  .link-btn:hover{
    background-color: var(--c-link-hover);
  }
  .link-btn.pr:hover{
    background-color: #ff5577;
  }
  .link-btn.present:hover{
    background-color: #ff57c4;
  }
}

/*文字装飾*/
span.title{
  font-weight: 600;
}

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 .notes{
  font-size: 1.4rem;
  color: var(--c-gray-lighter);
}

/*リスト(番号なし)*/
.article-content ul{
  margin: 0 var(--contents-padding) var(--article-margin);
}

.article-content ul>li{
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}

.article-content ul>li+li{
  margin-top: 12px;
}

.article-content ul>li::before{
  position: absolute;
  left: 6px;
  top: 8px;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #d9d9df;
  border-radius: var(--rounded-circle);
}

@media screen and (min-width: 520px) {
  .article-content ul>li::before{
    top: 8px;
  }
}

/*リスト(番号あり)*/
.article-content ol{
  margin: 0 var(--contents-padding) var(--article-margin);
  counter-reset: number 0;
}

.article-content ol>li{
  font-size: 1.5rem;
  line-height: 1.4;
}

.article-content ol>li+li{
  margin-top: 12px;
}

.article-content ol>li::before{
  counter-increment: number 1;
  content: counter(number) ".";
}

@media screen and (min-width: 520px) {
  .article-content ol>li{
    font-size: 1.7rem;
  }
}

/*インタビュー*/
.question{
  color: var(--c-primary-darker);
  font-weight: 600;
}

.name{
  color: #C1211C;
  font-weight: 600;
}
.name.orange{
  color: #e05d00;
}
.name.pink{
  color: #e30093;
}
.name.violet{
  color: #6b25cb;
}

/*吹き出し*/
.talk-box{
  display: flex;
  gap: 8px;
  align-items: start;
  margin-bottom: var(--article-margin);
}

.talk-box.icon-right{
  flex-direction: row-reverse;
}

.talk-box__icon{
  width: 40px;
  flex-shrink: 0;
}

.talk-box.icon-left .talk-box__icon{
  margin-left: -4px;
}

.talk-box.icon-right .talk-box__icon{
  margin-right: -4px;
}

.talk-box__icon img{
  border-radius: var(--rounded-circle);
  border: 1px solid var(--c-gray-border-darker);
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 2px;
}

.talk-box__icon span{
  display: block;
  color: var(--c-gray);
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  margin: 0 -5px;
}

.talk-box__content{
  position: relative;
  padding: 6px 8px;
  border-radius: 8px;
  background-color: #e7f4ff;
}

.talk-box__content::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 14px;
  border: 6px solid transparent;
  border-right: 6px solid #e7f4ff;
}

.talk-box.icon-left .talk-box__content::after{
  left: -12px;
}

.talk-box.icon-right .talk-box__content::after{
  right: -12px;
  transform: rotate(180deg);
}

.talk-box__content p{
  padding: 0!important;
  font-size: 1.4rem;
}

.talk-box__content>*:last-child{
  margin-bottom: 0;
}

/*吹き出しオレンジ*/
.talk-box.orange .talk-box__content{
  background-color: #fff4d0;
}
.talk-box.orange .talk-box__content::after{
  border-right-color: #fff4d0;
}

/*吹き出しピンク*/
.talk-box.pink .talk-box__content{
  background-color: #ffe9f8;
}
.talk-box.pink .talk-box__content::after{
  border-right-color: #ffe9f8;
}

/*吹き出し紫*/
.talk-box.violet .talk-box__content{
  background-color: #f0e6ff;
}
.talk-box.violet .talk-box__content::after{
  border-right-color: #f0e6ff;
}

/*吹き出し緑*/
.talk-box.green .talk-box__content{
  background-color: #d8ffd3;
}
.talk-box.green .talk-box__content::after{
  border-right-color: #d8ffd3;
}

@media screen and (min-width: 520px) {
  .talk-box{
    gap: 12px;
  }
  .talk-box__icon{
    width: 60px;
  }
  .talk-box__icon img{
    margin-bottom: 4px;
  }
  .talk-box__content{
    padding: 12px 14px;
  }
  .talk-box__content::after {
    border-width: 8px!important;
    top: 22px;
  }
  .talk-box.icon-left .talk-box__content::after{
    left: -16px;
  }
  .talk-box.icon-right .talk-box__content::after{
    right: -16px;
  }
  .talk-box__content p{
    font-size: 1.6rem;
  }
}

/*テーブル*/
.article-content table{
  margin: 0 var(--contents-padding) var(--article-margin);
  font-size: 1.4rem;
}

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

.article-content table th,
.article-content table td {
  border: 1px solid var(--c-gray-border-darker);
  padding: 5px;
}

.article-content table th{
  background-color: #f5f5f7;
  text-align: center;
}

@media screen and (min-width: 520px) {
  .article-content table{
    font-size: 1.6rem;
  }
}

/*画像*/
.article img{
  width: auto;
  max-height: 700px;
  transition: var(--animation);
}

.article-image-box{
  margin-bottom: var(--article-margin);
}

.article-image-box .article-image{
  margin-bottom: 10px;
}

.article-image{
  display: table;
  margin: 0 auto var(--article-margin);
}

.article-image a{
  display: table;
}

.article-image figcaption{
  display: table-caption;
  caption-side: bottom;
  font-size: 1.2rem;
  color: var(--c-gray);
  margin: 4px var(--contents-padding) 0;
}

@media (hover: hover) {
  .article-content .article-image>a>img:hover{
    opacity: 0.6;
  }
  .article-content .article-image a:hover{
    text-decoration: none;
  }
}

@container (min-width: 600px) {
  /*画像横並び*/
  .article-image-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .article-image-box .article-image{
    margin: 0;
  }
  
  .article-image-box .column2{
    max-width: calc((100% - 10px)/2);
  }
  
  .article-image-box .column3{
    max-width: calc((100% - 20px)/3);
  }

  /*画像左右寄せ*/
  .article-image.right{
    max-width: 40%;
    float: right;
    margin: 0 var(--contents-padding) 8px 8px;
  }

  .article-image.left{
    max-width: 40%;
    float: left;
    margin: 0 8px 8px var(--contents-padding);
  }
}

/*文字の回り込み停止*/
.clear{
  clear: both;
}

/*動画*/
.video{
  aspect-ratio: 16 / 9;
  margin-bottom: var(--article-margin);
}

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

/*記事埋め込み*/
.relate-news-row,
.relate-news-col{
  position: relative;
  margin: calc(var(--article-margin) + 11px) var(--contents-padding) var(--article-margin);
  border: 1px solid #c1cefc;
  background-color: #f7f9ff;
  transition: var(--animation);
  border-radius: 5px;
}

.relate-news-row{
  max-width: 600px;
}

.relate-news-col{
  max-width: 450px;
}

.relate-news-row::before,
.relate-news-col::before{
  position: absolute;
  top: -11px;
  left: 14px;
  content: '関連記事';
  font-size: 1.1rem;
  line-height: 22px;
  padding: 0 6px;
  color: #fff;
  background-color: var(--c-primary);
}

.relate-news-row a,
.relate-news-col a{
  padding: 14px;
}

.relate-news-row a{
  display: flex;
  align-items: start;
  gap: 5px;
}

.relate-news-col a{
  display: block;
}

.relate-news-row img{
  width: 120px;
  flex-shrink: 0;
  border-radius: 5px;
}

.relate-news-col img{
  margin-bottom: 8px;
  border-radius: 5px;
}

.relate-news__title{
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
}

.relate-news__title time{
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-gray-lighter);
  margin-top: 4px;
}

@container (min-width: 600px) {
  .relate-news-row,
  .relate-news-col{
    margin-right: auto;
    margin-left: auto;
  }

  .relate-news-row a,
  .relate-news-col a{
    padding: 20px;
  }

  .relate-news-row img{
    width: 150px;
  }

  .relate-news__title{
    font-size: 1.6rem;
  }
}

@media (hover: hover) {
  .article-content .relate-news-row a:hover,
  .article-content .relate-news-col a:hover{
    text-decoration: none;
  }

  .relate-news-row:hover,
  .relate-news-col:hover{
    background-color: #e9eeff;
    border-color: var(--c-primary);
  }

  .relate-news-row:hover .relate-news__title,
  .relate-news-col:hover .relate-news__title{
    color: var(--c-primary);
  }
}

/*PRリンク*/
.pr-link{
  display: block;
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(3px);
  color: #767676;
}

/*商品埋め込み*/
.shop-link{
  position: relative;
  margin: 0 auto var(--article-margin);
  max-width: 600px;
  border: 1px solid var(--c-gray-border-darker);
  background-color: #fff;
  padding: 16px 16px 18px;
}

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

.shop-link__title{
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 10px;
}

.shop-link__outline{
  font-size: 1.4rem;
  color: var(--c-gray);
  font-weight: 500;
}

.shop-link__btn-box{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-link__btn{
  display: block;
  padding-left: 48px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  color: #fff!important;
  width: 100%;
  line-height: 48px;
  overflow: hidden;
  transition: var(--animation);
}

.shop-link__btn svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  fill: #fff;
}

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

.shop-link__sponsored{
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: #777;
  font-size: 1rem;
}

@media (hover: hover) {
  .shop-link__btn:hover{
    opacity: 0.7;
    text-decoration: none!important;
  }
}

@media screen and (min-width: 520px) {
  .shop-link__btn{
    font-size: 1.6rem;
  }
  .shop-link__btn-box{
    flex-direction: row;
  }
}

/*ボックス*/
.box{
  position: relative;
  border: 1px solid var(--c-gray-border-darker);
  margin: 0 var(--contents-padding) var(--article-margin);
  background-color: #fff;
}

.box::after{
  content: '';
  display: block;
  clear: both;
}

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

@media screen and (min-width: 520px) {
  .box{
    margin-right: 0;
    margin-left: 0;
  }
}

/*ボックス青*/
.box.blue{
  border-color: #dce4ff;
  background-color: #f6f8ff;
}
.box.blue h2{
  background-color: #657fde;
}
.box.blue h3{
  background-color: #d9e1ff;
}
.box.blue h4::after{
  background-color: #657fde;
}

/*ボックス赤*/
.box.red{
  border-color: #ffe5e5;
  background-color: #fff7f7;
}
.box.red h2{
  background-color: #ed6060;
}
.box.red h3{
  background-color: #ffdbdb;
}
.box.red h4::after{
  background-color: #ed6060;
}

/*ボックス緑*/
.box.green{
  border-color: #cfe6d5;
  background-color: #f7fffa;
}
.box.green h2{
  background-color: #43b363;
}
.box.green h3{
  background-color: #c4eed0;
}
.box.green h4::after{
  background-color: #43b363;
}

/*ボックスオレンジ*/
.box.orange{
  border-color: #f6deb4;
  background-color: #fff9f3;
}
.box.orange h2{
  background-color: #ffad21;
}
.box.orange h3{
  background-color: #ffe0aa;
}
.box.orange h4::after{
  background-color: #ffad21;
}

/*引用注意書き*/
.article-content p.quote-text{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #777;
}

.article-content .box:has(p.quote-text){
  margin-top: calc(var(--article-margin) + 22px);
}

.article-content .box p.quote-text{
  position: absolute;
  top: -22px;
  left: 0;
  width: 100%;
  line-height: 22px;
  margin: 0;
}

.article-content .box p.quote-text+*{
  margin-top: 0;
}

.article-content .box p.quote-text+p{
  margin-top: var(--article-margin);
}

@media screen and (min-width: 520px) {
  .article-content .box p.quote-text{
    font-size: 1.4rem;
  }
}

/*引用*/
blockquote{
  position: relative;
  padding: 16px;
  margin: 0 var(--contents-padding) var(--article-margin);
  background-color: #F8F8FB;
  border-radius: 10px;
}

blockquote::before,
blockquote::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #F2F2F7;
  mix-blend-mode: multiply;
}

blockquote::before{
  top: -20px;
  left: 0;
  -webkit-mask: url("/svg/double-quotes-l.svg");
  mask: url("/svg/double-quotes-l.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

blockquote::after{
  right: 0;
  bottom: -20px;
  -webkit-mask: url("/svg/double-quotes-r.svg");
  mask: url("/svg/double-quotes-r.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

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

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

blockquote>h2,
blockquote>h3,
blockquote>h4,
blockquote>h5{
  text-shadow: none!important;
  background: none!important;
  border: none!important;
  padding: 0!important;
  color: var(--c-gray)!important;
  margin-right: 0!important;
  margin-left: 0!important;
}

blockquote>h4::after{
  content: none!important;
}

.box.red blockquote,
.box.blue blockquote,
.box.green blockquote,
.box.orange blockquote{
  background-color: #fff;
}

@media screen and (min-width: 520px) {
  blockquote{
    padding: 20px;
    margin-top: 50px;
  }
  blockquote::before,
  blockquote::after{
    width: 60px;
    height: 60px;
  }
}

/*コピーライト*/
.article-body .copyright{
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--c-gray-lighter);
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

/*Twitter埋め込み*/
.article-content .twitter-tweet{
  margin: 0 auto var(--article-margin);
}

/*--------------------
ニュースフル
--------------------*/
/*見出し*/
.article-content--news h2{
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  font-size: 2.2rem;
  padding: 12px var(--contents-padding);
  color: #fff;
  background: var(--c-gray) linear-gradient(315deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 20%, transparent 100%);
}

.article-content--news h3{
  position: relative;
  font-size: 2rem;
  padding: 10px var(--contents-padding);
  background: #ececf4 linear-gradient(315deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 30%, transparent 30%, transparent 100%);
}

.article-content--news h4{
  position: relative;
  font-size: 1.8rem;
  padding-bottom: 10px;
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

.article-content--news h4::after{
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #656576 linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, transparent 70%, transparent 100%);
}

.article-content--news h5{
  font-size: 1.8rem;
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

@media screen and (min-width: 520px) {
  .article-content--news h2{
    font-size: 2.6rem;
  }
  
  .article-content--news h3{
    font-size: 2.4rem;
  }

  .article-content--news h4{
    font-size: 2.2rem;
  }

  .article-content--news h5{
    font-size: 2rem;
  }
}

/*--------------------
イメージフル
--------------------*/
/*メイン画像*/
.article-img-main{
  position: relative;
  text-align: center;
  background-color: var(--c-primary-bg-darker);
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-img-main img{
  width: auto;
}

.article-img-main__next{
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media screen and (min-width: 520px) {
  .article-img-main__next::before{
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    content: '';
    width: 70px;
    height: 70px;
    background-color: #fff; 
    border-radius: var(--rounded-circle);
    box-shadow: var(--shadow);
    opacity: 0;
    transition: var(--animation);
  }

  .article-img-main__next::after {
    position: absolute;
    top: 50%;
    right: 43px;
    transform: translateY(-50%) rotate(45deg);
    display: inline-block;
    content: '';
    width: 18px;
    height: 18px;
    border-top: solid 4px var(--c-primary);
    border-right: solid 4px var(--c-primary);
    opacity: 0;
    transition: var(--animation);
  }

  @media (hover: hover) {
    .article-img-main__next:hover::before,
    .article-img-main__next:hover::after{
      opacity: 1;
    }
  }
}

/*画像一覧*/
.article-img-thmb{
  position: relative;
  padding: 0 20px;
  margin-top: 14px;
}

.article-img-thmb a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eeeded;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-img-thmb img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.article-img-thmb .swiper-button-prev,
.article-img-thmb .swiper-button-next{
  position: absolute;
  z-index: 3;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  cursor: pointer;
}

.article-img-thmb .swiper-button-prev{
  left: 0;
}

.article-img-thmb .swiper-button-next{
  right: 0;
}

.article-img-thmb .swiper-button-prev::before,
.article-img-thmb .swiper-button-next::before{
  position: absolute;
  top: 50%;
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px var(--c-primary);
  border-right: solid 2px var(--c-primary);
}

.article-img-thmb .swiper-button-prev::before{
  left: 7px;
  transform: translateY(-50%) rotate(-135deg);
}

.article-img-thmb .swiper-button-next::before{
  right: 7px;
  transform: translateY(-50%) rotate(45deg);
}

/* スライダー非活性時 */
.article-img-thmb .swiper:not(.swiper-initialized)~.swiper-button-prev,
.article-img-thmb .swiper:not(.swiper-initialized)~.swiper-button-next{
  display: none;
}

.article-img-thmb .swiper:not(.swiper-initialized) .swiper-wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

@media screen and (min-width: 520px) {
  /* スライダー非活性時 */
  .article-img-thmb .swiper:not(.swiper-initialized) .swiper-wrapper{
    grid-template-columns: repeat(6, 1fr);
  }  
}

@media screen and (min-width: 960px) {
  .article-img-thmb{
    padding: 0 60px;
  }
  .article-img-thmb .swiper-button-prev,
  .article-img-thmb .swiper-button-next{
    width: 60px;
  }
  .article-img-thmb .swiper-button-prev::before,
  .article-img-thmb .swiper-button-next::before{
    width: 14px;
    height: 14px;
  }
  .article-img-thmb .swiper-button-prev::before{
    left: 35px;
  }
  .article-img-thmb .swiper-button-next::before{
    right: 35px;
  }
  /* スライダー非活性時 */
  .article-img-thmb .swiper:not(.swiper-initialized) .swiper-wrapper{
    grid-template-columns: repeat(8, 1fr);
  }  
}

@media (hover: hover) {
  .article-img-thmb a:hover img{
    opacity: 0.8;
  }
}

/*ページへ移動ボタン*/
.to-page-btn{
  width: fit-content;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--c-primary);
  font-size: 1.5rem;
  color: var(--c-primary);
  transition: var(--animation);
  border-radius: var(--rounded-full);
  text-align: center;
}

.to-page-btn a{
  display: block;
  padding: 14px 20px;
}

@media (hover: hover) {
  .to-page-btn:hover{
    background-color: var(--c-primary-lighter);
  }
}

/*--------------------
ゲームフル
--------------------*/
/*見出し*/
.article-content--game h2{
  font-size: 2.2rem;
  color: var(--c-primary-darker);
}

@media screen and (min-width: 520px) {
  .article-content--game h2{
    font-size: 2.4rem;
  }
}

/*プレイボタン*/
.play-btn{
  position: relative;
  max-width: 550px;
  margin: 14px auto 0;
  text-align: center;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #bbb;
  background-color: #ebebeb;
}

.play-btn:has(a)::before{
  content: "";
  background-color: #fff;
  opacity: 0.8;
  display: inline-block;
  width: 26px;
  height: 26px;
  -webkit-mask: url("/svg/window-fill.svg");
  mask: url("/svg/window-fill.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.play-btn:has(a.play-btn-entry)::before{
  -webkit-mask: url("/svg/calendar-check-fill.svg");
  mask: url("/svg/calendar-check-fill.svg");
}

.play-btn:has(a.play-btn-download)::before{
  -webkit-mask: url("/svg/download-fill.svg");
  mask: url("/svg/download-fill.svg");
}

.play-btn a{
  display: block;
  color: #fff;
  background-color: var(--c-play-btn);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transition: var(--animation);
}

.article-content .play-btn a{
  color: #fff;
}

.play-btn a.play-btn-entry{
  background-color: var(--c-play-btn-entry);
}

.play-btn a.play-btn-download{
  background-color: var(--c-play-btn-download);
}

.play-btn-inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  padding: 12px;
}

.play-btn:has(a) .play-btn-inner{
  padding: 12px 40px;
}

.play-btn-inner>span{
  display: block;
  font-size: 1.2rem;
  line-height: 1;
}

.play-btn-ad{
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  opacity: 0.8;
}
@media screen and (min-width: 520px) {
  .play-btn{
    font-size: 2rem;
  }
}
@media (hover: hover) {
  .play-btn a:hover{
    background-color: var(--c-play-btn-hover);
    box-shadow: none;
  }

  .article-content .play-btn a:hover{
    text-decoration: none;
  }

  .play-btn a.play-btn-entry:hover{
    background-color: var(--c-play-btn-entry-hover);
  }
  
  .play-btn a.play-btn-download:hover{
    background-color: var(--c-play-btn-download-hover);
  }
}

/*画像*/
.portrait-wrapper{
  display: flex;
  gap: 10px;
  overflow-y: hidden;
  overflow-x: auto;
  margin: 0 auto var(--article-margin);
  width: fit-content;
}

.portrait-wrapper .article-image{
  margin: 0;
  flex-shrink: 0;
  max-width: 100%;
}

.portrait-wrapper::-webkit-scrollbar{
  height: 10px;
}
.portrait-wrapper::-webkit-scrollbar-track{
  background-color: #F1F1F1;
}
.portrait-wrapper::-webkit-scrollbar-thumb{
  background-color: #C1C1C1;
}
.portrait-wrapper::-webkit-scrollbar-thumb:hover{
  background-color: #909090;
}

/*注目ニュース*/
.article-content--game__relate{
  margin: 30px 0 var(--article-margin);
  clear: both;
  transition: var(--animation);
}

.article-content--game__relate h2{
  position: relative;
  padding-top: 28px;
  margin-top: 0;
}

.article-content--game__relate h2::before{
  position: absolute;
  top: 0;
  left: -6px;
  content: '注目ニュース';
  font-size: 1.2rem;
  line-height: 22px;
  padding: 0 10px;
  background-color: #dde5ff;
  border-radius: var(--rounded-full);
}

.article-content--game__relate h2::after{
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  border-top: 7px solid #dde5ff;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.article-content--game__relate p{
  margin-bottom: 0;
  color: #333;
}

.article-content--game__relate p::after{
  content: '...続きを読む';
  color: var(--c-link);
}

.article-content--game__relate time{
  display: block;
  font-size: 1.3rem;
  color: var(--c-gray-lighter);
}

.article-content--game__relate time::after{
  content: '';
  display: block;
  clear: both;
}

@media screen and (min-width: 520px) {
  .article-content--game__relate{
    padding: 14px;
    margin: 30px -14px var(--article-margin);
    border-radius: 10px;
    background-color: #fff;
  }
}

@media (hover: hover) {
  .article-content .article-content--game__relate:hover{
    background-color: var(--c-primary-bg);
  }

  .article-content .article-content--game__relate a:hover{
    text-decoration: none!important;
  }

  .article-content--game__relate:hover h2{
    color: var(--c-primary);
  }

  .article-content--game__relate:hover p::after{
    text-decoration: underline;
  }
}

/*--------------------
インフォ
--------------------*/
/*見出し*/
.article-content--common h2{
  font-size: 2rem;
  padding: 12px var(--contents-padding);
  background-color: var(--c-primary-bg);
}

.article-content--common h3{
  font-size: 1.9rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-gray-border);
  margin: 0 var(--contents-padding) var(--article-margin);
}

.article-content--common h4{
  font-size: 1.8rem;
  color: var(--c-gray-darker);
  margin: 0 var(--contents-padding) var(--article-margin);
}

.article-content--common h5{
  font-size: 1.8rem;
  color: var(--c-gray);
  margin: 0 var(--contents-padding) var(--article-margin);
}

@media screen and (min-width: 520px) {
  .article-content--common h2{
    font-size: 2.4rem;
  }
  .article-content--common h3{
    font-size: 2.3rem;
  }
  .article-content--common h4{
    font-size: 2.2rem;
  }
  .article-content--common h5{
    font-size: 2rem;
  }
}

/*ヘルプ*/
.help{
  line-height: 1.8;
  margin: 0 var(--contents-padding) var(--article-margin);
}

.help dt{
  margin-top: var(--article-margin);
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--c-gray);
}

.help dd{
  margin-bottom: var(--article-margin);
}

/*筆者
---------------------------*/
.author{
  position: relative;
  border-radius: 10px;
  background-color: var(--c-primary-bg);
  margin: 0 var(--contents-padding) var(--article-margin);
  clear: both;
  overflow: hidden;
}

.author__head{
  border-bottom: 2px solid #fff;
  transition: var(--animation);
}

.author__head a{
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  padding: 10px 14px;
  align-items: center;
}

.author__head img{
  width: 50px;
  height: 50px;
  border-radius: var(--rounded-circle);
  overflow: hidden;
  border: 1px solid var(--c-gray-border);
  transition: var(--animation);
  flex-shrink: 0;
}

.author__name{
  flex-grow: 1;
  font-size: 1.6rem!important;
  font-weight: 600;
  margin: 0!important;
  line-height: 1.1!important;
  padding: 0!important;
  color: var(--c-primary-darker)!important;
  transition: var(--animation);
}

.author__job{
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-gray-lighter);
}

.author__content{
  padding: var(--contents-padding) 0;
}

.author__profile p{
  font-size: 1.5rem;
}

.author__profile p:last-of-type{
  margin-bottom: 0;
}

@media (hover: hover) {
  .author__head:hover{
    background-color: var(--c-primary-bg-darker);
  }

  .author__head a:hover{
    text-decoration: none;
  }

  .author__head:hover .author__name{
    color: var(--c-primary)!important;
  }
  .author__head:hover img{
    border-color: var(--c-primary);
  }
}

@container (min-width: 600px) {
  .author{
    display: flex;
  }

  .author__head{
    width: 140px;
    border-bottom: 0;
    border-right: 2px solid #fff;
    flex-shrink: 0;
  }

  .author__head a{
    flex-direction: column-reverse;
    padding: 14px 10px;
    height: 100%;
  }

  .author__name{
    text-align: center;
  }

  .author img{
    width: 80px;
    height: 80px;
  }
}

/*続きを読む*/
.author__profile{
  position: relative;
}

.author__profile.-long{
  padding-bottom: 30px;
}

.author__profile.is-hide{
  height: 135px;
  overflow: hidden;
}

.author__profile button{
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: right;
  align-items: end;
  font-size: 1.4rem;
  color: var(--c-gray-lighter);
  transition: var(--animation);
  padding-right: calc(16px + var(--contents-padding));
}

.author__profile.is-hide button{
  background: linear-gradient(to bottom,transparent,var(--c-primary-bg) 50%);
  height: 50px;
}

.author__profile button::after{
  position: absolute;
  right: var(--contents-padding);
  bottom: 4px;
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--c-gray-lighter);
  border-right: 2px solid var(--c-gray-lighter);
  transform: rotate(-45deg);
  transition: var(--animation);
  opacity: 0.8;
}

.author__profile.is-hide button::after{
  bottom: 6px;
  transform: rotate(135deg);
}

@media (hover: hover) {
  .author__profile button:hover{
    color: var(--c-primary);
    text-decoration: underline;
  }
}

/*シェアする
---------------------------*/
.share{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share__head{
  position: relative;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.share__head::before,
.share__head::after{
  position: absolute;
  content: "";
  background: var(--c-gray-border);
  width: 3px;
  height: 20px;
  bottom: 2px;
}
 
.share__head:before{
  left: -18px;
  transform: rotate(-35deg);
}

.share__head:after{
  right: -18px;
  transform: rotate(35deg);
}

.share__list{
  display: flex;
  gap: 12px;
}

.share__item{
  border-radius: var(--rounded-circle);
  overflow: hidden;
  transition: var(--animation);
}

.share__item a,
.share__item button{
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.share__item svg{
  width: 30px;
  height: 30px;
  fill: #fff;
}

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

.share__item--facebook{
  background-color: #1877F2;
}

.share__item--line{
  background-color: #06C755;
}

.share__item--linkcopy{
  position: relative;
  background-color: #d9e1ff;
}

.share__item--linkcopy svg{
  fill: var(--c-primary);
}

.js-clipBoard-bottom.js-copied::before{
  line-height: 50px;
}

@media (hover: hover) {
  .share__item:hover{
    transform: scale(1.1);
  }

  .share__item--X:hover{
    background-color: #52575b;
  }
  
  .share__item--facebook:hover{
    background-color: #2b87ff;
  }
  
  .share__item--line:hover{
    background-color: #12e369;
  }

  .share__item--linkcopy:hover{
    background-color: #b6c5ff;
  }
}

/*関連ワード
---------------------------*/
.relate-word{
  background-color: var(--c-primary-bg);
  padding: 14px;
  border-radius: 8px;
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}
.relate-word__head{
  font-size: 1.6rem;
  color: var(--c-gray);
  font-weight: 600;
  margin-right: 6px;
}

/*コメント
---------------------------*/
.comment{
  position: relative;
  padding: 10px;
  background-color: #fff8f9;
  border-top: 5px solid #ffe3e5;
  border-bottom: 5px solid #ffe3e5;
}
.comment__head{
  font-size: 1.8rem;
  margin-bottom: 4px;
}
.comment__head svg{
  display: none;
}
.comment__outline{
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.comment__outline a{
  color: var(--c-link);
}
.comment__outline a:hover{
  color: var(--c-link-hover);
  text-decoration: underline;
}

@media screen and (min-width: 520px) {
  .comment__head{
    position: relative;
    padding-left: 34px;
  }
  .comment__head svg{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: var(--rounded-circle);
    fill: #fff;
    background-color: rgba(253, 79, 88, 0.6);
  }
  .comment__outline{
    padding-left: 34px;
  }
}

/*記事下のコンテンツの見出し
---------------------------*/
.article-relate-head{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 2rem;
  margin-bottom: 14px;
}

.article-relate-head::after {
  content: '';
  flex-grow: 1;
  height: 3px;
  background-color: var(--c-primary);
  border-radius: 3px;
  opacity: 0.3;
}

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

カード型のリスト

----------------------------------------*/
.card-list{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.card-list__item,
.card-list__text{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: var(--animation);
  container: card-list__text / inline-size;
}

.card-list__item{
  border-radius: 5px;
}

.card-list__img-box{
  position: relative;
}

.card-list__img{
  display: block;
  border-radius: 5px;
  overflow: hidden;
  transition: var(--animation);
}

.card-list__img img{
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: var(--animation);
}

.card-list__img-box .news-cat{
  border-radius: 0 0 0 5px;
}

.card-list__text{
  padding: 3px;
}

.card-list__title{
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: var(--animation);
}

.card-list__catchcopy{
  font-size: 1.3rem;  
}

.card-list__btn-box{
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.card-list__item .play-btn{
  font-size: 1.1rem;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
}

.card-list__item .play-btn a{
  border-radius: 4px;
}

.card-list__item .play-btn::before{
  content: none;
}

.card-list__item .play-btn-inner{
  padding: 5px 6px!important;
  min-height: auto;
}

.card-list__ad{
  font-size: 1rem;
  line-height: 1;
  color: #8e8e8e;
  border: 1px solid #8e8e8e;
  border-radius: 3px;
  padding: 1px 2px;
}

.card-list .ad-infeed{
  grid-column-start: 1;
  grid-column-end: 3;
}

@container (min-width: 200px){
  .card-list__text{
    padding: 4px;
  }
}

@media screen and (min-width: 520px) {
  .card-list{
    gap: 14px;
  }

  .card-list{
    grid-template-columns: repeat(3, 1fr);
  }

  .card-list .ad-infeed{
    grid-column-start: auto;
    grid-column-end: auto;
  }
}

@media screen and (min-width: 960px) {
  .l-main .card-list{
    grid-template-columns: repeat(3, 1fr);
  }

  .card-list{
    grid-template-columns: repeat(4, 1fr);
  }

  .card-list__play-btn{
    font-size: 1.2rem;
    padding: 6px;
  }
}

@media (hover: hover) {
  .card-list__item:hover{
    background-color: #fff;
    box-shadow: var(--shadow);
  }
  .card-list__item:hover .card-list__img{
    border-radius: 5px 5px 0 0;
  }
  .card-list__item:hover .card-list__img img{
    transform: scale(1.05);
  }
  .card-list__item:hover .card-list__img-box .news-cat{
    border-radius: 0;
  }
  .card-list__item:hover .card-list__title{
    color: var(--c-primary);
  }
}

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

セクションごとの見出し

----------------------------------------*/
.section-head{
  margin-bottom: 12px;
}

.section-head--flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.section-head__title{
  position: relative;
  font-weight: 600;
  font-size: 2.2rem;
  padding-left: 15px;
}

.section-head__title::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 6px;
  height: 28px;
  border-radius: 3px;
  background-color: var(--c-primary);
}

.section-head__title a{
  transition: var(--animation);
}

.section-head__outline{
  font-size: 1.4rem;
  margin-top: 2px;
  padding-left: 15px;
}

.section-head .news-tag-box{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(var(--contents-padding) * -1);
  padding: 0 var(--contents-padding);
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}

.section-head .news-tag-box::-webkit-scrollbar{
  display:none;
}

@media screen and (min-width: 520px) {
  .section-head--flex{
    gap: 10px 40px;
  }
  .section-head .news-tag-box{
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 960px) {
  .section-head{
    margin-bottom: 16px;
  }

  .section-head__title{
    font-size: 2.4rem;
  }
}

@media (hover: hover) {
  .section-head__title a:hover{
    opacity: 0.7;
  }
}
/*----------------------------------------

スペシャルビデオ

----------------------------------------*/
.l-2col.special-video{
  gap: 10px;
}
.special-video{
  background-color: #d3f477;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 20px, transparent 20px, transparent 40px);
  padding: var(--contents-padding);
}
.special-video-info{
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.9);
  padding: var(--contents-padding);
  border-radius: 10px;
  height: 100%;
}
.special-video-info input{
  display: none;
}
.special-video-info h2{
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 14px;
  transition: var(--animation);
}
.special-video-info h2:hover{
  color: var(--c-primary);
}
.special-video-info label{
  font-size: 1.4rem;
  margin-bottom: 14px; 
}
.special-video-info label::before{
  content: '番組概要を見る';
}
.special-video-info label::after{
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
  transform: rotate(135deg);
  transition: var(--animation);
  opacity: 0.5;
  margin: 4px;
}
.special-video-info__content{
  display: none;
}
.special-video-info__content a{
  color: var(--c-link);
}
.special-video-info__content a:hover{
  color: var(--c-link-hover);
  text-decoration: underline;
}
.special-video-info p,
.special-video-info ul{
  font-size: 1.4rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.special-video-info .channel{
  margin-top: auto;
}
.special-video-info input:checked~label::before{
  content: '番組概要を閉じる';
}
.special-video-info input:checked~label::after{
  transform: rotate(-45deg);
}
.special-video-info input:checked~.special-video-info__content{
  display: block;
}
@media screen and (min-width: 960px) {
  .special-video-info h2{
    font-size: 2rem;
  }
  .special-video-info label{
    display: none;
  }
  .special-video-info__content{
    display: block;
  }
  .special-video-info p,
  .special-video-info li{
    font-size: 1.6rem;
  }
}

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

新着ニュース

----------------------------------------*/
.news-list>*+*{
  border-top: 1px solid var(--c-gray-border-darker);
}

.ad-main+.news-list__item{
  border-top: none; 
}

.news-list__item{
  display: flex;
  position: relative;
  padding: 10px 0;
  transition: var(--animation);
}

.news-list__item:first-child{
  padding-top: 0;
}

.news-list__item:last-child{
  padding-bottom: 0;
}

.news-list__img-box{
  width: 160px;
  height: fit-content;
  flex-shrink: 0;
  position: relative
}

.news-list__img{
  display: block;
  border-radius: 5px;
  overflow: hidden;
  transition: var(--animation);
}

.news-list__img img{
  transition: var(--animation);
}

.news-list__img-box .news-cat{
  border-radius: 0 0 0 5px;
}

.news-list__text{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding-left: 6px;
  container: news-list__text / inline-size;
}

.news-list__title{
  margin-bottom: 2px;
  transition: var(--animation);
  font-size: 1.4rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.news-list .ad-infeed{
  padding: 9px 0;
}

@container (min-width: 300px){
  .news-list__title{
    font-size: 1.6rem;
    -webkit-line-clamp: 3;
  }
}

/*大きいサイズ*/
.news-list__item--l{
  flex-direction: column;
}
.news-list__item--l .news-list__img-box{
  width: 100%;
}
.news-list__item--l .news-list__text{
  padding: 5px 0 0 0;
}

@media screen and (max-width: 519px) {
  /*トップニュース*/
  .news-list--topics{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .news-list--topics .news-list__item{
    padding: 0;
    border: none;
  }
  .news-list--topics .news-list__text{
    padding: 3px;
  }
}

@media screen and (min-width: 520px) {
  .news-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 3.03%;
  }

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

  .news-list__item{
    flex-direction: column;
    padding: 0;
    border-radius: 5px;
  }

  .news-list__img-box{
    width: 100%;
  }

  .news-list__text{
    padding: 6px 8px!important;
  }

  .news-list .ad-infeed{
    padding: 0;
  }
}

@media screen and (min-width: 960px) {
  .news-list{
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
  }

  .l-main .news-list{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (hover: hover) {
  .news-list__item:hover{
    box-shadow: var(--shadow);
    background-color: #fff;
  }

  .news-list__item:hover .news-list__img{
    border-radius: 5px 5px 0 0;
  }

  .news-list__item:hover .news-list__img img{
    transform: scale(1.05);
  }

  .news-list__item:hover .news-list__img-box .news-cat{
    border-radius: 0;
  }

  .news-list__item:hover .news-list__title{
    color: var(--c-primary);
  }
}

/*コメントバッジ
---------------------------*/
.comment-badge{
  position: absolute;
  top: -2px;
  right: -1px;
  min-width: 24px;
  color: #fd4f58;
  fill: #fd4f58;
  background-color: #fff;
  border: 1px solid #fd4f58;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0 4px;
  line-height: 18px;
  text-align: center;
  border-radius: var(--rounded-full);
}

.comment-badge::before{
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-right: 7px solid transparent;
  border-top: 4px solid #fff;
  z-index: 3;
}

.comment-badge::after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-right: 8px solid transparent;
  border-top: 5px solid #fd4f58;
  z-index: 2;
}

/*カテゴリ
---------------------------*/
.news-cat{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  font-size: 1rem;
  line-height: 20px;
  height: 20px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: block;
  padding: 0 6px;
  overflow: hidden;
  transition: var(--animation);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.news-cat::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  opacity: 0.85;
  transition: var(--animation);
  z-index: -1;
  background-color: var(--c-cat-news);
}

/*エンタメ、グッズ、コラボカフェ*/
.news-cat--entame::before,
.news-cat--goods::before,
.news-cat--collabocafe::before{
  background-color: var(--c-cat-entame);
}

/*新作*/
.news-cat--newtitle::before{
  background-color: var(--c-cat-newtitle);
}

/*セール*/
.news-cat--sale::before{
  background-color: var(--c-cat-sale);
}

/*特集*/
.news-cat--planning::before,
.news-cat--special::before{
  background-color: var(--c-cat-special);
}

/*動画*/
.news-cat--movie::before{
  background-color: var(--c-cat-video);
}

/*インタビュー、取材、プレイレポート*/
.news-cat--interview::before,
.news-cat--report::before,
.news-cat--playreport::before{
  background-color: var(--c-cat-report);
}

/*ハード、周辺機器*/
.news-cat--hard::before,
.news-cat--product::before{
  background-color: var(--c-cat-product);
}

/*eスポーツ、業界動向*/
.news-cat--esports::before,
.news-cat--business::before{
  background-color: var(--c-cat-business);
}

/*pr*/
.news-cat--recommend::before{
  background-color: var(--c-cat-recommend);
}
.news-cat--recommend{
  color: var(--c-cat-recommend-text);
}

@media (hover: hover) {
  .news-cat:hover::before{
    opacity: 1;
  }
}

/*筆者、日付、PR
---------------------------*/
.news-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  white-space: nowrap;
  margin-top: 2px;
}

/*筆者*/
.news-author{
  display: flex;
  align-items: center;
  gap: 2px;
}

.news-author img{
  width: 20px;
  height: 20px;
  border-radius: var(--rounded-circle);
  border: 1px solid var(--c-gray-border-darker);
  transition: var(--animation);
}

.news-author span{
  display: inline-block;
  font-size: 1.2rem;
  line-height: 20px;
  transition: var(--animation);
}

/*日付*/
.news-date{
  display: flex;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: auto;
}

.news-date time{
  color: var(--c-gray-lighter);
  line-height: 1.2;
  font-size: 1.2rem;
}

/*バッジ*/
.new-badge,
.hot-badge,
.pr-badge{
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 3px;
}

/*new*/
.new-badge{
  font-weight: 600;
  color: #ff750f;
  border: 1px solid #ff750f;
}

/*hot*/
.hot-badge{
  font-weight: 600;
  color: #fff;
  border: 1px solid #ff4e27;
  background-color: #ff4e27;
  padding-left: 1px;
}

.hot-badge svg{
  width: 9px;
  height: 9px;
  fill: #fff;
  vertical-align: -1px;
}

/*pr*/
.pr-badge{
  font-weight: 500;
  color: #777;
  border: 1px solid #aaa;
}

/*スペシャル*/
.special-badge{
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 26px;
  padding: 0 10px;
  color: var(--c-cat-recommend-text);
  background-color: var(--c-cat-recommend-light);
}

@media screen and (min-width: 520px) {
  .news-info{
    flex-direction: row-reverse;
  }
  .news-date{
    flex-direction: row-reverse;
    justify-content: left;
    margin-left: 0;
    margin-right: auto;
  }
}

@media (hover: hover) {
  .news-author:hover{
    color: var(--c-primary);
  }
  .news-author:hover img{
    border-color: var(--c-primary);
  }
  .news-author:hover span{
    text-decoration: underline;
  }
}

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

リストに差し込むコンテンツ

----------------------------------------*/
.list-inner-box{
  position: relative;
  border-top: 0;
  margin: 0 calc(var(--contents-padding) * -1);
  padding: 16px var(--contents-padding);
  background-color: #e7edfc;
}

.list-inner-box+.list-inner-box{
  margin-top: 2px;
}

.list-inner-box+*{
  border-top: 0;
}

.list-inner-box__head{
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.list-inner-box__head::after{
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #a8c1ff;
  margin-left: 10px;
}

.list-inner-box .swiper::after{
  content: '';
  width: 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(to right, transparent, #e7edfc 76%);
}

.list-inner-box--comment{
  background-color: #ffebed;
}
.list-inner-box--comment .list-inner-box__head::after{
  background-color: #ffb9c0;
}
.list-inner-box--comment .swiper::after{
  background: linear-gradient(to right, transparent, #ffebed 76%);
}
.list-inner-box--video{
  background-color: var(--c-primary-bg-darker);
}

@media screen and (min-width: 520px) {
  .list-inner-box{
    margin: 0;
    padding: 18px 13px;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .list-inner-box+.list-inner-box{
    margin-top: 0;
  }

  .list-inner-box__head{
    font-size: 1.8rem;
  }

  .list-inner-box .card-swiper{
    margin-right: -13px;
    margin-left: -13px;
    padding-right: 13px;
    padding-left: 13px;
  }
}

/*
動画
---------------------------*/
.channel{
  margin-top: 12px;
  background-color: #ececf4;
  border-radius: 10px;
  transition: var(--animation);
}

.channel a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.channel__icon{
  width: 50px;
  height: 50px;
  border-radius: var(--rounded-circle);
}

.channel__title{
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-grow: 1;
}

.channel__subscribe{
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--rounded-full);
  font-size: 1.2rem;
  color: #fff;
  background-color: var(--c-gray-darker);
  white-space: nowrap;
}

.play-video{
  aspect-ratio: 16 / 9;
}

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

@media screen and (min-width: 520px) {
  .channel__title{
    font-size: 1.6rem;
  }
  .channel__subscribe{
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .channel:hover{
    background-color: #e0e0f2;
  }
}

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

リストの共通パーツ

----------------------------------------*/
/*
リスト
---------------------------*/
.game-list,
.app-list{
  margin-left: calc(var(--contents-padding) * -1);
  margin-right: calc(var(--contents-padding) * -1);
}

.game-list>*+*,
.app-list>*+*{
  margin-top: 28px;
}

.game-list__item,
.app-list__item{
  position: relative;
  background-color: var(--c-base-bg);
  box-shadow: 0 3px 0 #ececf4;
  transition: var(--animation);
  padding-bottom: 10px;
}

/*タイトル*/
.game-list__title,
.app-list__title{
  font-size: 2.2rem;
  color: var(--c-link);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: var(--animation);
}

.game-list__title a,
.app-list__title a{
  display: block;
}

/*会社*/
.game-list__company,
.app-list__company{
  font-size: 1.2rem;
  color: var(--c-gray);
}

.game-list__company a,
.app-list__company a{
  position: relative;
  transition: var(--animation);
  padding: 0 6px;
}

.game-list__company a+a::before,
.app-list__company a+a::before{
  position: absolute;
  top: 3px;
  left: 0;
  content: '';
  width: 1px;
  height: 12px;
  background-color: var(--c-gray-border-darker);
}

.game-list .ad-infeed,
.app-list .ad-infeed{
  box-shadow: 0 3px 0 #ececf4;
  padding-bottom: 10px;
  background-color: #fff;
}

@media screen and (min-width: 520px) {
  .game-list,
  .app-list{
    margin-right: 0;
    margin-left: 0;
  }
  .game-list__item,
  .app-list__item{
    padding: 12px;
    border-radius: 10px;
    box-shadow: none;
  }
  .game-list__title,
  .app-list__title{
    font-size: 2.6rem;
  }
  .game-list__company,
  .app-list__company{
    font-size: 1.4rem;
  }
  .game-list .ad-infeed,
  .app-list .ad-infeed{
    padding: 11px;
    border-radius: 10px;
    box-shadow: none;
  }
}

@media (hover: hover) {
  .game-list__item:hover,
  .app-list__item:hover{
    box-shadow: var(--shadow);
  }

  .game-list__title a:hover,
  .game-list__company a:hover,
  .app-list__title a:hover,
  .app-list__company a:hover{
    color: var(--c-link-hover);
  }
}

/*
検索結果が無い時
---------------------------*/
.none-box{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-base-bg);
  padding: var(--contents-padding);
  color: var(--c-gray-lighter);
  height: 100px;
}

/*
タグ
---------------------------*/
.game-tag-box{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
}

.game-tag{
  display: block;
  padding: 0 6px;
  font-size: 1.1rem;
  line-height: 20px;
  border-radius: var(--rounded-full);
  transition: var(--animation);
  border: 1px solid;
}

.game-tag--genre{
  background: #e7f3f8;
  color: #006ba0;
  border-color: #5fb7e3;
}

.game-tag--hard{
  background: #e0f2e0;
  color: #207e20;
  border-color: #50b750;
}

.game-tag--platform{
  background: #e6edfc;
  color: #184ac8;
  border-color: #617fcb;
}

.game-tag--free{
  background: #ffe5e5;
  color: #c81818;
  border-color: #ec5d5d;
}

@media (hover: hover) {
  .game-tag:hover{
    color: #fff;
  }

  .game-tag--genre:hover{
    background: #5fb7e3;
  }
  
  .game-tag--hard:hover{
    background: #50b750;
  }

  .game-tag--platform:hover{
    background: #617fcb;
  }
  
  .game-tag--free:hover{
    background: #ec5d5d;
  }
}

/*
ストアレビュー
---------------------------*/
.store-review{
  margin: 14px 0;
  padding: 0 var(--contents-padding);
}
.store-review__head{
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 auto 4px;
  padding: 6px;
  text-align: center;
  color: #654411;
  background-color: #ffeab4;
  border-radius: 6px;
}

.store-review__list li{
  font-size: 1.4rem;
  padding: 6px;
  background-color: #fffbe4;
  border-radius: 6px;
  margin-bottom: 4px;
}
.store-review__list .star{
  margin-right: 4px;
}
.store-review__list-title{
  font-weight: 600;
  color: #d78100;
  margin-right: 4px;
}

/*
リボン
---------------------------*/
.ribbon{
  display: inline-block;
  width: 120px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: top center;
  position: absolute;
  top: 0;
  right: calc( 120px * -1 / 2);
  padding: 16px 0 4px;
  z-index: 5;
}

.ribbon--recommend{
  color: var(--c-cat-recommend-text);
  background-color: var(--c-cat-recommend-light);
}

.ribbon--special{
  color: var(--c-cat-recommend-text);
  background-color: var(--c-cat-recommend-light);
  top: 14px;
  right: calc( 120px * -1 / 2 + 14px);
  padding: 7px 0;
}

/*
スポンサード
---------------------------*/
.sponsored {
  font-size: 1.1rem;
  margin-top: 4px;
  color: var(--c-gray-lighter);
  text-align: right;
}

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

ゲームリスト

----------------------------------------*/
.section-game-list .ad-relate{
  margin-bottom: 20px;
}

/*ゲームを探す
---------------------------*/
.game-navi{
  background-color: #fff;
  padding: 12px 12px 0 12px;
  border-radius: 5px;
  margin-bottom: 12px;
  border: 3px solid #ececf4;
}

.game-navi__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 2px solid #ececf4;
}

.game-navi__title{
  font-size: 2rem;
  font-weight: 600;
}
.game-navi__title svg{
  width: 22px;
  height: 22px;
  margin-right: 2px;
  vertical-align: middle;
  fill: var(--c-theme-game);
  opacity: 0.5;
}

.game-navi__box{
  padding: 12px 0;
  border-bottom: 1px solid var(--c-gray-border);
}

.game-tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  align-items: center;
  --tag-height: 30px;
}

.game-tag-list__item{
  font-size: 1.2rem!important;
  line-height: var(--tag-height)!important;
  border-radius: var(--rounded-full);
  transition: var(--animation);
  border: 1px solid var(--c-gray-border-darker);
  background-color: #fff;
}

.game-tag-list__item a{
  display: block;
  padding: 0 10px;
}

.game-tag-list__item.is-select{
  border-color: var(--c-primary)!important;
  color: var(--c-primary);
  background-color: var(--c-primary-lighter)!important;
}

/*一覧へ*/
.game-tag-list__more{
  display: block;
  padding-right: 12px;
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-gray);
  margin-left: auto;
}

.game-tag-list__more::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-gray);
  border-right: 2px solid var(--c-gray);
  transform: translateY(-50%) rotate(45deg);
  transition: var(--animation);
  opacity: 0.5;
}

/*タグ折りたたみ*/
#game-tag-list-check{
  display: none;
}
.game-tag-list__item-hide{
  display: none;
}
#game-tag-list-check:checked+.game-tag-list .game-tag-list__item-hide{
  display: block;
}
.game-tag-list-plus{
  position: relative;
  display: block;
  width: var(--tag-height);
  height: var(--tag-height);
  transition: var(--animation);
  border: 1px solid var(--c-gray-border-darker);
  border-radius: var(--rounded-circle);
  background-color: #fff;
}
.game-tag-list-plus::before,
.game-tag-list-plus::after{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  background-color: var(--c-gray-lighter);
  border-radius: var(--rounded-full);  
}
.game-tag-list-plus::before{
  width: 46%;
  height: 3px;
}
.game-tag-list-plus::after{
  width: 3px;
  height: 46%;
}
#game-tag-list-check:checked+.game-tag-list li:has(.game-tag-list-plus){
  display: none;
}

/*ボックス折りたたみ*/
#game-navi-check{
  display: none;
}
.game-navi-hide{
  display: none;
}
#game-navi-check:checked~.game-navi-hide{
  display: block;
}
.game-navi-lavel{
  display: block;
  text-align: center;
  padding: 16px 0;
  font-size: 1.2rem;
  color: var(--c-gray);
}
.game-navi-lavel::before{
  content: 'もっと絞り込む';
  margin-right: 6px;
}
#game-navi-check:checked~.game-navi-lavel::before{
  content: '折りたたむ';
}

.game-navi-lavel::after{
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-gray-lighter);
  border-right: 2px solid var(--c-gray-lighter);
  transform: translateY(-2px) rotate(135deg);
  transition: var(--animation);
}

#game-navi-check:checked~.game-navi-lavel::after{
  transform: rotate(-45deg);
}

/*発売カレンダー*/
.release-calendar-list{
  display: flex;
  gap: 4px;
}
.release-calendar-list__item{
  font-size: 1.2rem;
  line-height: 36px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid var(--c-gray-border-darker);
  white-space: nowrap;
  width: 100%;
  background-color: #fafafd;
  transition: var(--animation);
}
.release-calendar-list__item a{
  display: block;
}
.release-calendar-list__item-head{
  border: 1px solid var(--c-gray-border-darker);
  white-space: nowrap;
  font-weight: 600;
}
.release-calendar-list__item-head a{
  padding: 0 8px;
}

@media screen and (min-width: 520px) {
  .game-navi{
    padding: 20px;
  }
  .game-navi__title{
    font-size: 2.2rem;
  }
  .game-navi__box:last-of-type{
    padding-bottom: 0;
    border-bottom: none;
  }

  /*ボックス折りたたみ*/
  .game-navi-hide{
    display: block;
  }
  .game-navi-lavel{
    display: none;
  }
}

@media (hover: hover) {
  .game-tag-list__more:hover{
    text-decoration: underline;
  }

  .game-tag-list__item:hover,
  .game-tag-list-plus:hover,
  .release-calendar-list__item:hover{
    background-color: var(--c-primary-bg-darker);
    border-color: var(--c-gray-border-darker);
  }
}

/*並べ替え・件数
---------------------------*/
.sort-count-box{
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sort{
  display: flex;
  font-size: 1.4rem;
  line-height: 36px;
  color: #86868b;
  background-color: #d4d4d7;
  border-radius: 5px;
  overflow: hidden;
}

.sort a{
  display: block;
  width: 94px;
  text-align: center;
  transition: var(--animation);
}

.sort .is-select{
  background-color: #545466;
  color: #fff;
}

.count{
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: right;
}

@media (hover: hover) {
  .sort a:hover{
    color: #fff;
    background-color: var(--c-primary);
  }
}

/*ゲームリスト
---------------------------*/
.game-list__item{
  container: game-list__item / inline-size;
}

.game-list__text{
  padding: var(--contents-padding);
}

/*画像*/
.game-list__img-wrap{
  position: relative;
}

.game-list__img{
  position: relative;
  display: block;
  overflow: hidden;
}

.game-list__img::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.game-list__img,
.game-list__img img{
  transition: var(--animation);
}

.game-list__img img{
  max-height: 400px;
  object-fit: cover;
}
.game-list__img--dummy::before{
  content: none;
}
.game-list__img--dummy img{
  aspect-ratio: 3 / 1;
}

/*ハード*/
.game-hard-box{
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  padding: 4px;
  gap: 4px;
  z-index: 2;
}

.game-hard{
  display: inline-block;
  padding: 0 5px 0 12px;
  position: relative;
  font-size: 1.2rem;
  line-height: 20px;
  white-space: nowrap;
  transition: var(--animation);
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.9);
}

.game-hard::before{
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background-color: #9292a8;
  opacity: 0.6;
}

.game-hard--PS5::before,
.game-hard--PS4::before,
.game-hard--PS3::before{
  background-color: #0070D1;
}

.game-hard--Switch::before{
  background-color: #E22130;
}

.game-hard--XboxSX::before,
.game-hard--XboxOne::before{
  background-color: #107B10;
}

.game-hard--Android::before{
  background-color: #3ec963;
}

.game-hard--iOS::before{
  background-color: #11baed;
}

/*タグ*/
.game-list__text .game-tag-box{
  margin-top: 4px;
}

/*
ポイント
---------------------------*/
.game-list__item .point-list{
  margin-top: 8px;
  padding-left: 6px;
}

.game-list__item .point-list li{
  position: relative;
  padding-left: 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-gray-darker);
}

.game-list__item .point-list li+li{
  margin-top: 4px;
}

.game-list__item .point-list li::after{
  position: absolute;
  top: 5px;
  left: 0;
  content: '';
  width: 8px;
  height: 5px;
  border-bottom: 2px solid;
  border-left: 3px solid;
  border-color: #7291ff;
  transform: rotate(-45deg);
}

@media screen and (min-width: 520px) {
  .game-list__item .point-list li{
    font-size: 1.5rem;
  }
}

/*レビュー*/
.game-list__review{
  position: relative;
  margin-top: 10px;
  background-color: #fff9e1;
  transition: var(--animation);
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 5px;
}

.point-list+.game-list__review{
  margin-top: 4px;
}

.game-list__review::before {
  position: absolute;
  top: 11px;
  left: 6px;
  content: '';
  width: 8px;
  height: 5px;
  border-bottom: 2px solid;
  border-left: 3px solid;
  border-color: #ffa717;
  transform: rotate(-45deg);
}

.game-list__review a{
  display: block;
  padding: 6px 6px 6px 18px;
}

.game-list__review a::after {
  content: '';
  width: 50px;
  height: 13px;
  display: inline-block;
}

.game-list__review-head{
  color: #d16c00;
  margin-right: 6px;
}

.game-list__review-more{
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  color: var(--c-gray);
}
@media screen and (min-width: 520px) {
  .game-list__review{
    font-size: 1.5rem;
  }
}

/*関連ニュース*/
.game-list__related{
  padding: var(--contents-padding);
}

.game-list__related-head{
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.game-list__related-head a{
  font-size: 1.4rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 5px;
  color: var(--c-gray);
}
.game-list__related-head::after{
  display: inline-block;
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #ececf4;
  flex-grow: 1;
}

.game-list__related-item{
  display: flex;
  flex-direction: column;
  align-items: start;
  border-radius: 5px;
  overflow: hidden;
  transition: var(--animation);
  background-color: var(--c-primary-bg);
  height: 100%;
}

.game-list__related-img{
  border-bottom: 1px solid #fff;
}

.game-list__related-title{
  font-size: 1.3rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 6px;
}

.game-list__related-more{
  display: flex;
  height: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color: var(--c-primary-lighter);
  border-radius: 5px;
  padding: 6px;
  font-size: 1.3rem;
  color: var(--c-primary-darker);
  transition: var(--animation);
}

.game-list__related .swiper{
  margin: 0 calc(var(--contents-padding) * -1);
  padding: 0 var(--contents-padding);
}

.game-list__related .swiper-slide{
  width: 45%;
  max-width: 200px;
  height: auto;
}

/*--------------------
メディアクエリ
--------------------*/
@media screen and (min-width: 520px) {
  /*画像*/
  .game-list__img{
    border-radius: 5px;
  }

  /*テキスト*/
  .game-list__text{
    flex-grow: 1;
    padding: 10px 0;
  }

  /*関連ニュース*/
  .game-list__related{
    padding: 0;
  }
  .game-list__related-item{
    flex-direction: row;
    align-items: center;
  }

  .game-list__related-img{
    width: 130px;
    flex-shrink: 0;
    border-bottom: 0;
    border-right: 1px solid #fff;
  }

  .game-list__related .swiper{
    position: relative;
    padding: 0 50px 0 12px;
    margin: 0 -12px;
  }

  .game-list__related .swiper::before{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    content: '';
    width: 40px;
    height: 100%;
    background: linear-gradient(to right,transparent,#fff 50%);
  }

  .game-list__related .swiper-slide{
    width: 320px;
    max-width: none;
  }

  .game-list__related .swiper-button-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: var(--rounded-circle);
    opacity: 0.8;
    cursor: pointer;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid var(--c-primary);
    opacity: 1;
    transition: var(--animation);
  }
  
  .game-list__related .swiper-button-next::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--c-primary);
    border-right: 2px solid var(--c-primary);
    transform: translateY(-50%) rotate(45deg);
  }
  
  .game-list__related .swiper-button-next:hover{
    background-color: var(--c-primary-lighter);
  }
}

/*--------------------
コンテナクエリ
要素の幅が〇〇px以上の時に画像とテキストがflex
--------------------*/
@container (min-width: 500px) {
  .game-list__item-inner{
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
  }
  .game-list__text{
    padding: 8px 0 8px 8px;
  }

  .game-list__img-wrap{
    width: calc((100% - 12px)/2);
    flex-shrink: 0;
  }
  .game-list__img::before{
    content: none;
  }
  .game-list__img--dummy img{
    aspect-ratio: auto;
  }
  /*ハード*/
  .game-hard-box{
    position: static;
    margin-top: 2px;
    padding: 0;
    gap: 0 4px;
  }
}

/*--------------------
ホバー
--------------------*/
@media (hover: hover) {
  .game-list__img:hover img{
    transform: scale(1.05);
  }

  .game-hard:hover{
    background-color: #eee;
  }
  .game-hard:hover::before{
    opacity: 1;
  }

  .game-list__review:hover{
    background-color: #fff4c7;
  }

  .game-list__review:hover .game-list__review-more{
    text-decoration: none;
  }

  .game-list__related-item:hover{
    background-color: var(--c-primary-lighter);
  }

  .game-list__related-item:hover .game-list__related-title{
    color: var(--c-primary);
  }

  .game-list__related-more:hover{
    background-color: #dae2ff;
  }
}

/*
リリースのバッジ
---------------------------*/
.release-badge{
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  color: #fff;
  font-size: 1rem;
  background-color: #ff4b4b;
  padding: 2px 6px;
  border-radius:  5px;
}

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

アプリリスト

----------------------------------------*/
.section-app-list details{
  margin-bottom: 24px;
}

/*ヘッド*/
.app-list__head{
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
  padding: 10px var(--contents-padding) 0;
}

.app-list__head-content{
  flex-grow: 1;
}

/*アイコン*/
.app-list__icon{
  position: relative;
  flex-shrink: 0;
  text-align: center;
  margin-top: -24px;
  z-index: 1;
}

.app-list__icon img{
  width: 100px;
  height: 100px;
  border-radius: var(--rounded-app);
  border: 3px solid #fff;
  box-sizing: content-box;
}

/*評価*/
.app-list__rating{
  padding: 0 6px;
}
.app-list__rating .star{
  font-size: 1.6rem;
  margin-right: 4px;
}

.app-list__rating .pt{
  font-size: 1.6rem;
}

/*タグ*/
.app-list__item .game-tag-box{
  margin-top: 2px;
}

/*ポイント*/
.app-list__item .point-list{
  padding: 0 var(--contents-padding);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px 12px;
}
.app-list__item .point-list li::before{
  content: '';
  width: 12px;
  height: 8px;
  display: inline-block;
  vertical-align: 2px;
  margin-right: 2px;
  border-bottom: 3px solid;
  border-left: 4px solid;
  border-color: #ff7a75;
  transform: rotate(-45deg);
}
.app-list__item .point-list li{
  color: #555;
  border-bottom: 2px dotted #ddd;
  font-size: 1.4rem;
  font-weight: 600;
  padding-bottom: 2px;
  width: fit-content;
}

/*キャッチコピー*/
.app-list__catchcopy{
  position: relative;
  font-size: 2rem;
  font-weight: 600;
  padding: 0 var(--contents-padding);
  margin-top: 12px;
  color: #f0322c;
}

/*概要*/
.app-list__outline{
  position: relative;
  margin-top: 12px;
  padding: 0 var(--contents-padding);
}

.app-list__outline>*+*{
  margin-top: 12px;
}

.app-list__outline p{
  font-size: 1.6rem;
  line-height: 1.6;
}

.app-list__outline figure{
  min-height: 150px;
}

.app-list__outline figcaption{
  margin-top: 2px;
  font-size: 1.2rem;
  color: var(--c-gray);
}

.app-list__outline.-long{
  position: relative;
}

.app-list__outline.-long button{
  display: none;
}

.app-list__outline.is-hide{
  height: 120px;
  overflow: hidden;
}

.app-list__outline.is-hide::before{
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom,transparent,#fff);
  z-index: 1;
}

.app-list__outline.is-hide button{
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;
  line-height: 38px;
  text-align: center;
  font-size: 1.4rem;
  color: var(--c-link);
  border: 1px solid var(--c-link);
  border-radius: var(--rounded-full);
  background-color: #fff;
  transition: var(--animation);
  z-index: 2;
}

@media (hover: hover) {
  .app-list__outline.is-hide button:hover{
    background-color: #ebfaff;
  }
}

/*画像リスト*/
.app-list__landscape,
.app-list__portrait{
  margin: 14px 0;
  padding: 0 var(--contents-padding);
  display: flex;
  gap: 8px;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.app-list__landscape a,
.app-list__portrait a{
  flex-shrink: 0;
}

.app-list__landscape a{
  width: 320px;
}
.app-list__portrait a{
  width: 214px;
}

/*公式ボタン*/
.app-list .play-btn{
  margin-right: var(--contents-padding);
  margin-left: var(--contents-padding);
}

/*公式ボタン*/
.app-list .sponsored{
  padding: 0 var(--contents-padding);
}

@media screen and (min-width: 520px) {
  .app-list__item {
    padding: 20px;
  }
  .app-list__head{
    gap: 8px;
    padding: 0;
  }
  .app-list__icon{
    margin-top: 0;
  }
  .app-list__icon img{
    width: 110px;
    height: 110px;
  }
  .app-list__catchcopy{
    padding: 0;
  }
  .app-list__item .point-list{
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
  }
  .app-list__outline{
    padding: 0;
  }
  .app-list__outline figure{
    display: table;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .app-list__outline figure img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 700px;
  }
  .app-list__landscape,
  .app-list__portrait{
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    height: auto;
    overflow-y: auto;
  }
  .app-list__landscape{
    grid-template-columns: repeat(2, 1fr);
  }
  .app-list__portrait{
    grid-template-columns: repeat(4, 1fr);
  }
  .app-list__landscape a,
  .app-list__portrait a{
    width: 100%;
  }
  /*公式ボタン*/
  .app-list .play-btn{
    margin-right: auto;
    margin-left: auto;
  }
}

/*アプリのランク表示*/
.app-rank{
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--c-gray);
  border-radius: 13px;
  outline: 2px solid #fff;
  padding: 0 3px;
}

.app-rank--1{
  background-color: #f95b65;
}

.app-rank--2{
  background-color: #ff8445;
}

.app-rank--3{
  background-color: #f8b534;
}

/*星・評価*/
.star{
  position: relative;
  display: inline-block;
}

.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;
}

.star--00::after {
  width: 0%;
}

.star--05::after {
  width: 10%;
}

.star--10::after {
  width: 20%;
}

.star--15::after {
  width: 30%;
}

.star--20::after {
  width: 40%;
}

.star--25::after {
  width: 50%;
}

.star--30::after {
  width: 60%;
}

.star--35::after {
  width: 70%;
}

.star--40::after {
  width: 80%;
}

.star--45::after {
  width: 90%;
}

.star--50::after {
  width: 100%;
}

.pt{
  font-weight: 600;
  color: #C1211C;
}

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

タイムテーブル

----------------------------------------*/
.time-table{
  border-radius: 8px;
  background-color: var(--c-base-bg);
}

/*ナビ*/
.time-table-navi{
  display: flex;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 50px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.time-table-navi:last-child{
  border-radius: 0 0 8px 8px;
}

.time-table-navi a{
  display: block;
}

.time-table-navi__prev,
.time-table-navi__next{
  width: 20%;
  background-color: #585860;
  transition: var(--animation);
}

.time-table-navi__now{
  flex-grow: 1;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  background-color: #585860;
  transition: var(--animation);
}

@media (hover: hover) {
  .time-table-navi__prev:hover,
  .time-table-navi__next:hover,
  .time-table-navi__now:hover{
    opacity: 0.8;
  }
}

/*日付*/
.time-table-date{
  padding: 8px 12px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #3f3f4d;
  text-align: center;
  background-color: var(--c-gray-border);
  border-bottom: 1px solid var(--c-gray-border);
}

/*時間*/
.time-table-time{
  position: absolute;
  top: 12px;
  left: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-primary);
  width: 48px;
  text-align: center;
  line-height: 20px;
  background-color: #fff;
  border-radius: 3px;
}

/*ボックス*/
.time-table-item{
  position: relative;
  border-bottom: 1px solid var(--c-gray-border);
  container: time-table-time / inline-size;
}
.time-table-item>a{
  display: block;
  padding: 12px;
  transition: var(--animation);
}

.time-table-item.is-highlight{
  background-color: #f6ffde;
}

.time-table-item>a .time-table-item__title{
  position: relative;
  color: var(--c-primary-darker);
  transition: var(--animation);
  padding-right: 10px;
}
.time-table-item>a .time-table-item__title::after{
  content: '';
  position: absolute;
  top: 6px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-gray);
  border-right: 2px solid var(--c-gray);
  transform: rotate(45deg);
  transition: var(--animation);
  opacity: 0.5;
}

.time-table-item__info{
  font-size: 1.2rem;
  margin-top: 4px;
}

@media (hover: hover) {
  .time-table-item>a:hover{
    box-shadow: var(--shadow);
  }

  .time-table-item>a:hover .time-table-item__title{
    color: var(--c-primary);
  }
}

/*
発売カレンダー
---------------------------*/

/*ソフト*/
.game-soft{
  margin-top: 6px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px 8px;
  padding-left: 6px;
  font-size: 1.2rem;
  line-height: 1.4;
}

.game-soft__platform{
  font-weight: 600;
  color: #585860;
}

.game-soft__hard span{
  position: relative;
  display: inline-block;
  margin: 0 2px 2px 0;
  background-color: #f4f4f4;
  padding: 0 6px;
}

.game-soft__hard span::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 5px;
  height: 5px;
  border-left: 5px solid var(--c-gray);
  border-bottom: 5px solid transparent;
}

.game-soft__hard .PS5::before,
.game-soft__hard .PS4::before{
  border-left: 5px solid #0070D1;
}

.game-soft__hard .Switch::before{
  border-left: 5px solid #E22130;
}

.game-soft__hard .XboxSX::before,
.game-soft__hard .XboxOne::before{
  border-left: 5px solid #107B10;
}

.game-soft__hard .iOS::before{
  border-left: 5px solid #11baed;
}

.game-soft__hard .Android::before{
  border-left: 5px solid #3ec963;
}

/*
番組表
---------------------------*/
.program-item{
  position: relative;
  padding: 12px 12px 12px 60px;
}

.program-item::before{
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 30px;
  border-left: 2px dotted var(--c-primary);
  opacity: 0.5;
}

.program__outline{
  font-size: 1.2rem;
  color: var(--c-gray);
  margin-top: 4px;
}

.program-btn-box{
  display: flex;
  justify-content: right;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.program-btn{
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  background-color: #eee;
  color: #aaa;
  overflow: hidden;
  min-width: 90px;
}

.program-btn svg{
  fill: #aaa;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
}

.program-btn a{
  display: block;
  color: #fff;
  transition: var(--animation);
}

.program-btn a svg{
  fill: #fff;
}

.program-btn--youtube a{
  background-color: #f63c3c;
}

.program-btn--niconico a{
  background-color: #444444;
}

@media screen and (min-width: 520px) {
  .program__outline{
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .program-btn--youtube a:hover{
    background-color: #ff8282;
  }
  
  .program-btn--niconico a:hover{
    background-color: #777;
  }
}

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

ピックアップニュース

----------------------------------------*/
/*スワイパー*/
.pickup .swiper{
  overflow: visible;
}

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

.pickup .swiper-pagination{
  display: flex;
}

.pickup .swiper-pagination-bullet{
  width: 100%;
  height: 3px;
  background-color: #849eff;
  opacity: 0.1;
  cursor: pointer;
  transition: var(--animation);
}

.pickup .swiper-pagination-bullet-active{
  opacity: 1;
}

@media screen and (min-width: 520px) {
  .pickup .swiper-slide{
    width: 480px;
  }

  .pickup .swiper-pagination{
    display: none;
  }

  .pickup .swiper-button-next,
  .pickup .swiper-button-prev{
    visibility: hidden;
    opacity: 0;
    transition: var(--animation);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: var(--rounded-circle);
    background-color: #fff;
    box-shadow: var(--shadow);
    z-index: 2;
    cursor: pointer;
  }
  
  .pickup .swiper-button-next{
    right: 3%;
  }
  
  .pickup .swiper-button-prev{
    left: 3%;
  }

  .pickup .swiper-button-next::before,
  .pickup .swiper-button-prev::before{
    position: absolute;
    top: 50%;
    display: inline-block;
    content: '';
    width: 18px;
    height: 18px;
    border-top: solid 4px var(--c-primary);
    border-right: solid 4px var(--c-primary);
  }

  .pickup .swiper-button-next::before{
    right: 25px;
    transform: translateY(-50%) rotate(45deg);
  }

  .pickup .swiper-button-prev::before{
    left: 25px;
    transform: translateY(-50%) rotate(225deg);
  }

  @media (hover: hover) {
    .pickup .swiper:hover .swiper-button-next,
    .pickup .swiper:hover .swiper-button-prev{
      visibility: visible;
      opacity: 0.7;
    }
  
    .pickup .swiper:hover .swiper-button-next:hover,
    .pickup .swiper:hover .swiper-button-prev:hover{
      opacity: 1;
      transform: translateY(-50%) scale(1.1);
    }
  }
}

/*ピックアップニュース*/
.pickup{
  overflow: hidden;
}

.pickup__item{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pickup__img{
  display: block;
  position: relative;
  overflow: hidden;
}

.pickup__img img{
  transition: var(--animation);
}

.pickup__text{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  background-color: #fff;
  padding: 10px;
  transition: var(--animation);
}

.pickup__title{
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 1.8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: var(--animation);
}

.pickup__text .news-info{
  margin-top: auto;
}

/*PRのスタイル*/
.is-pr .pickup__text{
  background-color: var(--c-cat-recommend-bg);
}

@media screen and (min-width: 520px) {
.pickup{
  padding: 40px 0 10px 0;
	background-image:
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(135deg, #d6e1ff, #e3e3f7);
  background-position: 9px 9px, 3px 3px, 0 0, 0 0;
  background-size: 12px 12px, 12px 12px, 6px 6px, 100% 100%;
}

.pickup__item{
  transform: translateX(-15px);
}

.pickup__img{
  border-radius: 8px;
  margin: 0;
  z-index: 2;
  box-shadow:  0 0 6px 0px rgb(55 99 255 / 10%);
}

.pickup__text{
  transform: translate(30px,-30px);
  margin: 0;
  padding: 40px 12px 12px;
  border-radius: 8px;
  z-index: 1;
  box-shadow:  0 0 6px 0px rgb(55 99 255 / 10%);
}

.pickup__title{
  font-size: 2rem;
}

.is-pr .pickup__img{
  border: 2px solid var(--c-cat-recommend);
}
}

@media (hover: hover) {
  .pickup__item:hover .pickup__img{
    box-shadow:  0 0 8px 2px rgb(55 99 255 / 18%);
  }
  .pickup__item:hover .pickup__text{
    box-shadow:  0 0 8px 2px rgb(55 99 255 / 18%);
  }

  .pickup__item:hover .pickup__img img{
    transform: scale(1.05);
  }
  .pickup__item:hover .pickup__title{
    color: var(--c-primary);
  }
}

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

ニュースタグ

----------------------------------------*/
.news-tag-box{
  display: flex;
  gap: 6px 4px;
  flex-wrap: wrap;
  align-items: center;
}

.news-tag{
  display: inline-block;
  padding: 0 10px 0 20px;
  position: relative;
  text-align: center;
  font-size: 1.2rem;
  height: 30px;
  line-height: 30px;
  border-radius: var(--rounded-full);
  transition: var(--animation);
  border: 1px solid var(--c-gray-border-darker);
  background-color: #fff;
  white-space: nowrap;
}

.news-tag::before{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--rounded-circle);
  background-color: var(--c-cat-news);
}

.news-tag:hover{
  border-color: var(--c-cat-news);
  background-color: var(--c-cat-news-bg);
}

/*インタビュー、取材、プレイレポート*/
.news-tag--interview::before,
.news-tag--report::before,
.news-tag--playreport::before,
.news-tag--appreview::before{
  background-color: var(--c-cat-report);
}
.news-tag--interview:hover,
.news-tag--report:hover,
.news-tag--playreport:hover,
.news-tag--appreview:hover{
  border-color: var(--c-cat-report);
  background-color: var(--c-cat-report-bg);
}

/*特集*/
.news-tag--special::before{
  background-color: var(--c-cat-special);
}
.news-tag--special:hover{
  border-color: var(--c-cat-special);
  background-color: var(--c-cat-special-bg);
}

/*新作*/
.news-tag--newtitle::before{
  background-color: var(--c-cat-newtitle);
}
.news-tag--newtitle:hover{
  border-color: var(--c-cat-newtitle);
  background-color: var(--c-cat-newtitle-bg);
}

/*エンタメ、グッズ、コラボカフェ*/
.news-tag--entame::before,
.news-tag--goods::before,
.news-tag--collabocafe::before{
  background-color: var(--c-cat-entame);
}
.news-tag--entame:hover,
.news-tag--goods:hover,
.news-tag--collabocafe:hover{
  border-color: var(--c-cat-entame);
  background-color: var(--c-cat-entame-bg);
}

/*セール、プレゼント*/
.news-tag--sale::before,
.news-tag--present::before{
  background-color: var(--c-cat-sale);
}
.news-tag--sale:hover,
.news-tag--present:hover{
  border-color: var(--c-cat-sale);
  background-color: var(--c-cat-sale-bg);
}

/*ハード、周辺機器*/
.news-tag--hard::before,
.news-tag--product::before{
  background-color: var(--c-cat-product);
}
.news-tag--hard:hover,
.news-tag--product:hover{
  border-color: var(--c-cat-product);
  background-color: var(--c-cat-product-bg);
}

/*eスポーツ、業界動向*/
.news-tag--esports::before,
.news-tag--business::before{
  background-color: var(--c-cat-business);
}
.news-tag--esports:hover,
.news-tag--business:hover{
  border-color: var(--c-cat-business);
  background-color: var(--c-cat-business-bg);
}

/*おすすめ*/
.news-tag--recommend::before{
  background-color: var(--c-cat-recommend);
}
.news-tag--recommend:hover{
  border-color: var(--c-cat-recommend);
  background-color: var(--c-cat-recommend-bg);
}

/*動画*/
.news-tag--video::before{
  background-color: var(--c-cat-video);
}
.news-tag--video:hover{
  border-color: var(--c-cat-video);
  background-color: var(--c-cat-video-bg);
}

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

新作ゲーム

----------------------------------------*/
.section-newtitle .section-head__title::before{
  background-color: var(--c-cat-newtitle);
}

.section-newtitle .card-swiper-more{
  color: var(--c-cat-newtitle);
  border: 1px solid var(--c-cat-newtitle);
}

.section-newtitle .card-swiper-more svg{
  fill: var(--c-cat-newtitle);
}

@media (hover: hover) {
  .section-newtitle .card-swiper-more:hover{
    background-color: var(--c-cat-newtitle-bg);
  }
}

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

動画

----------------------------------------*/
/*
.section-video{
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(135deg, rgba(183, 90, 255, 0.1), rgba(183, 90, 255, 0.2));
  background-position: 9px 9px, 3px 3px, 0 0, 0 0;
  background-size: 12px 12px, 12px 12px, 6px 6px, 100% 100%;
}

.section-video .section-head__title::before{
  background-color: var(--c-cat-video);
}

.play-video{
  aspect-ratio: 16 / 9;
  margin: 0 calc(var(--contents-padding) * -1);
}

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

.playlist{
  container: playlist / inline-size;
  border-radius: 10px;
  overflow: hidden;
}

.playlist__item{
  background-color: rgba(255, 255, 255, 0.7);
  transition: var(--animation);
}

.playlist__item+.playlist__item{
  border-top: 1px solid var(--c-gray-border-darker);
}

.playlist__item a{
  display: flex;
  align-items: center;
  padding: 14px var(--sub-contents-padding);
}

.playlist__img{
  width: 130px;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 5px;
}

.playlist__title{
  font-size: 1.6rem;
  font-weight: 600;
}

.channel{
  transition: var(--animation);
  border-top: 1px solid var(--c-gray-border-darker);
  background-color: rgba(255, 255, 255, 0.7);
}

.channel a{
  display: flex;
  align-items: center;
  padding: 14px var(--sub-contents-padding);
}

.channel__icon{
  width: 80px;
  height: 80px;
  border-radius: var(--rounded-circle);
  flex-shrink: 0;
  margin-right: 10px;
}

.channel__title{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 1.6rem;
  font-weight: 600;
}

.channel__subscribe{
  display: inline-block;
  font-size: 1.2rem;
  line-height: 24px;
  padding: 0 12px;
  background-color: #444;
  color: #fff;
  border-radius: var(--rounded-full);
}

@media screen and (min-width: 520px) {
  .play-video{
    width: 100%;
    height: auto;
    margin: 0;
  }
}

@container (min-width: 600px) {
  .playlist__item{
    float: left;
    width: calc(100%/3);
    text-align: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: transparent;
  }

  .playlist__item+.playlist__item{
    border-top: 0;
  }

  .playlist__item a{
    display: block;
    padding: 14px;
  }

  .playlist__img{
    width: 100%;
    margin: 0 0 8px 0;
  }

  .channel {
    clear: both;
    margin: 0 auto;
    max-width: 520px;
    border-top: none;
    border-radius: 10px;
  }
}

@media (hover: hover) {
  .playlist__item:hover,
  .channel:hover{
    background-color: rgba(255, 255, 255, 1);
  }
}  
*/

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

特集

----------------------------------------*/
.section-special .section-head__title::before{
  background-color: var(--c-cat-special);
}

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

プレスリリース

----------------------------------------*/
.press-list{
  background-color: #fff;
  border-radius: 8px;
}

.press-list>*{
  border-bottom: 1px solid var(--c-gray-border);
}

.press-list__item{
  padding: 12px 14px;
  transition: var(--animation);
}

.press-list__item:first-child{
  border-radius: 8px 8px 0 0;
}

.press-list__item:last-child{
  border: none;
  border-radius: 0 0 8px 8px;
}

.press-list__title{
  font-size: 1.4rem;
  margin-bottom: 2px;
  transition: var(--animation);
}

.news-media{
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--c-gray-lighter);
}

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

@media (hover: hover) {
  .press-list__item:hover{
    box-shadow: var(--shadow);
  }
  .press-list__item:hover .press-list__title{
    color: var(--c-primary);
  }
}

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

ページャー

----------------------------------------*/
.pager{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: calc(var(--pager-size) + 8px);
  --pager-size: 46px;
}

.pager li{
  text-align: center;
  line-height: var(--pager-size);
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 25px;
  transition: var(--animation);
  width: var(--pager-size);
  height: var(--pager-size);
  background-color: #fff;
  border: 1px solid var(--c-gray-border-darker);
}

.pager li a{
  display: block;
}

.pager li.is-now{
  color: var(--c-primary);
  background-color: var(--c-primary-lighter);
  border-color: var(--c-primary);
}

.pager li.prev,
.pager li.next{
  position: absolute;
  top: 0;
  width: calc(50% - 5px);
  height: var(--pager-size);
  color: #fff;
  background-color: #d3d3d6;
  overflow: hidden;
}

.pager li.prev{
  left: 0;
}

.pager li.next{
  right: 0;
}

.pager li.prev::before,
.pager li.next::before{
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  opacity: 0.8;
}

.pager li.prev::before{
  left: 16px;
  transform: translateY(-50%) rotate(225deg);
}

.pager li.next::before{
  right: 16px;
  transform: translateY(-50%) rotate(45deg);
}

.pager li.prev a,
.pager li.next a{
  color: #fff;
  background-color: var(--c-primary);
  transition: var(--animation);
}

@media screen and (min-width: 520px) {
  .pager{
    padding-top: 0;
    --pager-size: 50px;
  }
  .pager li.prev,
  .pager li.next{
    position: relative;
    max-width: 120px;
  }
}

@media (hover: hover) {
  .pager li:has(a):hover{
    color: var(--c-primary);
    background-color: var(--c-primary-lighter);
    border-color: var(--c-primary);
  }
  .pager li.prev a:hover,
  .pager li.next a:hover{
    background-color: #6c8cff;
  }
}

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

タグ一覧

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

/* 大きいタグ */
.article-content .pickup-game-tag-list li{
  padding: 0;
  margin: 0;
}
.article-content .pickup-game-tag-list li::before{
  content: none;
}

.pickup-game-tag-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pickup-game-tag-list__item{
  border-radius: 8px;
  transition: var(--animation);
  border: 1px solid var(--c-gray-border-darker);
  background-color: #fff;
  overflow: hidden;
}
.pickup-game-tag-list__item a{
  display: flex;
  align-items: center;
  height: 48px;
}
.pickup-game-tag-list__item img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: auto;
  height: 48px;
}
.pickup-game-tag-list__item span{
  line-height: 1.2;
  padding: 0 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 普通のリスト */
.article-content .common-game-tag-list li{
  margin: 0;
}
.common-game-tag-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 10px;
}

.common-game-tag-list__item{
  border-bottom: 1px dotted var(--c-gray-border-darker);
}

.common-game-tag-list__item a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 2.2;
}

.article-content ul>li.common-game-tag-list__item::before {
  top: 14px;
}

/* 開閉 */
#common-game-tag-list-check-genre,
#common-game-tag-list-check-hard{
  display: none;
}
.common-game-tag-list__item-hide{
  display: none;
}
#common-game-tag-list-check-genre:checked+ul>.common-game-tag-list__item-hide,
#common-game-tag-list-check-hard:checked~ul>.common-game-tag-list__item-hide{
  display: block;
}

.common-game-tag-list li:has(.common-game-tag-list-label){
  padding: 0;
}
.common-game-tag-list li:has(.common-game-tag-list-label)::before{
  content: none;
}
.common-game-tag-list-label{
  display: block;
  text-align: right;
  padding: 4px 0;
  font-size: 1.4rem;
}
.common-game-tag-list-label::before{
  content: 'タグをもっと表示';
  margin-right: 6px;
}
#common-game-tag-list-check-genre:checked+ul>li>.common-game-tag-list-label::before,
#common-game-tag-list-check-hard:checked+ul>li>.common-game-tag-list-label::before{
  content: '閉じる';
}
.common-game-tag-list-label::after{
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-gray-lighter);
  border-right: 2px solid var(--c-gray-lighter);
  transform: translateY(-2px) rotate(135deg);
  transition: var(--animation);
}
#common-game-tag-list-check-genre:checked+ul>li>.common-game-tag-list-label::after,
#common-game-tag-list-check-hard:checked+ul>li>.common-game-tag-list-label::after{
  transform: rotate(-45deg);
}
@media screen and (min-width: 520px) {
  .article-content ul>li.common-game-tag-list__item::before {
    top: 16px;
  }
  .common-game-tag-list-label{
    font-size: 1.6rem;
  }
}
@container (min-width: 700px) {
  .pickup-game-tag-list{
    grid-template-columns: repeat(3, 1fr);
  }
  .common-game-tag-list{
    grid-template-columns: repeat(2, 1fr);
  }
  .common-game-tag-list li:has(.common-game-tag-list-label){
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
@media (hover: hover) {
  .pickup-game-tag-list__item:hover{
    background-color: var(--c-primary-bg);
  }
  .common-game-tag-list-label:hover{
    text-decoration: underline;
  }
}

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

サブ

----------------------------------------*/
.sub-section{
  position: relative;
  container: sub-section / inline-size;
  background-color: var(--c-base-bg);
  border-radius: 5px;
}

.sub-head{
  font-weight: 600;
  font-size: 2rem;
  background-color: #fff;
  border-bottom: 3px solid #ececf4;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  padding-top: 3px;
}

.sub-head::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: var(--c-gray-lighter);
}

.sub-head__inner{
  display: block;
  padding: 12px var(--sub-contents-padding);
  transition: var(--animation);
}

.sub-more-btn{
  position: relative;
}

.sub-more-btn::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
  transform: translateY(-50%) rotate(45deg);
  transition: var(--animation);
  opacity: 0.5;
}

.sub-more-btn a{
  display: block;
  color: var(--c-primary);
  font-size: 1.4rem;
  text-align: right;
  font-weight: 600;
  padding: 14px calc(var(--sub-contents-padding) + 20px) 14px var(--sub-contents-padding);
  transition: var(--animation);
}

@media (hover: hover) {
  .sub-head a:hover{
    color: var(--c-primary);
    background-color: var(--c-primary-lighter);
  }
  
  .sub-more-btn:hover::before{
    right: 20px;
  }

  .sub-more-btn:hover a{
    background-color: var(--c-primary-lighter);
  }
}

/*追従
---------------------------*/
.sticky-box>*+*{
  margin-top: 20px;
}
@media screen and (min-width: 960px) {
  .sticky-box{
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-height) + 12px);
    max-height: calc(100vh - var(--header-height) - 26px);
  }
  .sticky-box>*+*{
    margin-top: 16px;
  }
  .sticky-box>.sub-section{
    overflow-y: auto;
  }
  .sticky-box .sub-head{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

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

ゲーム情報

----------------------------------------*/
.game-info{
  padding: var(--sub-contents-padding);
}

@container (min-width: 600px) {
  .game-info{
    display: flex;
  }
  .game-detail,
  .game-store{
    width: calc((100% - 30px)/2);
  }
}

/*詳細情報
----------------------------------------*/
.game-detail{
  margin-bottom: 14px;
}

/*詳細リスト*/
.game-detail-list{
  display: flex;
  flex-wrap: wrap;
}

.game-detail-list dt{
  width: 74px;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--c-gray);
  padding: 10px 18px 10px 0;
  border-bottom: 1px solid var(--c-gray-border);
}

.game-detail-list dd{
  width: calc(100% - 74px);
  font-size: 1.4rem;
  line-height: 1.2;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-gray-border);
  flex-grow: 1;
}

.game-detail-list dt:first-of-type,
.game-detail-list dd:first-of-type{
  padding-top: 0;  
}

.game-detail-list dd a{
  display: inline-block;
  color: var(--c-link);
  margin-right: 12px;
}

@media screen and (min-width: 960px) {
  .game-detail-list dt,
  .game-detail-list dd{
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/*公式ボタン*/
.to-official-btn{
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  line-height: 36px;
  max-width: 160px;
  color: var(--c-link);
  border: 1px solid var(--c-link);
  border-radius: var(--rounded-full);
  transition: var(--animation);
  margin: 2px auto 0;
}

.to-official-btn a{
  display: block;
  padding: 0 10px;
} 

@media screen and (min-width: 960px) {
  .to-official-btn{
    line-height: 34px;
  }
}

/*詳細情報の開閉*/
#game-detail-check{
  display: none;
}
.game-detail-hide{
  display: none;
}
.game-detail-lavel{
  display: block;
  text-align: right;
  padding-top: 2px;
}
.game-detail-lavel::before{
  content: '詳細を見る';
  font-size: 1.2rem;
  margin-right: 4px;
}
.game-detail-lavel::after{
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--c-gray-lighter);
  border-right: 2px solid var(--c-gray-lighter);
  transform: translateY(-2px) rotate(135deg);
  transition: var(--animation);
}

#game-detail-check:checked+* .game-detail-hide,
#game-detail-check:checked~.game-detail-hide{
  display: block;
}
#game-detail-check:checked~.game-detail-lavel::before{
  content: '閉じる';
}
#game-detail-check:checked~.game-detail-lavel::after{
  transform: rotate(-45deg);
}

/*備考*/
.game-detail-memo{
  font-size: 1.3rem;
  padding: 7px 0 7px 1em;
  line-height: 1.4;
  color: var(--c-gray);
  border-bottom: 1px solid var(--c-gray-border);
}

.game-detail-memo__heading{
  margin-left: -12px;
  font-weight: 600;
  font-size: 1.4rem;
}

.game-detail-memo__item{
  margin-left: -1em;
  font-weight: 600;
}

.game-detail-memo__item::before{
  content: '・';
}

/*注意書き*/
.game-detail-nb{
  margin-top: 4px;
  margin-bottom: -14px;
  line-height: 1;
  font-size: 1rem;
  color: var(--c-gray-lighter);
}

@media (hover: hover) {
  .game-detail dd a:hover{
    text-decoration: underline;
  }
  .to-official-btn:hover{
    background-color: #f2f8ff;
  }
  .game-detail-lavel:hover{
    text-decoration: underline;
  }
}

@container (min-width: 600px) {
  .game-detail{
    margin: 0 30px 0 0;
  }
}


/*ストア
----------------------------------------*/
.game-store-head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  margin-bottom: 10px;
  white-space: nowrap;
}

.game-store-head::after{
  content: '';
  flex-grow: 1;
  height: 3px;
  background-color: var(--c-gray-lighter);
  border-radius: 3px;
  opacity: 0.5;
}

.game-store-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}


.play-btn+.game-store-list,
.game-store-list+.game-store-list{
  margin-top: 10px;
  border-top: 1px solid var(--c-gray-border);
  padding-top: 10px;
}

.game-store-list__item{
  font-size: 1.3rem;
  line-height: 46px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
  background-color: #eee;
  color: #ccc;
}

.game-store-list__item a{
  display: block;
  background-color: #fff;
  border-radius: 10px;
  transition: var(--animation);
  color: #333;
  border: 1px solid #e8e8ee;
  box-shadow: 0 3px #e8e8ee;
  transform: translateY(-2px);
  overflow: hidden;
}

.game-store-list__item span{
  position: relative;
  padding: 0 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.game-store-list__item svg{
  width: 38px;
  height: 46px;
  padding: 8px;
  float: left;
  fill: #ccc;
  border-right: 1px solid #ddd;
  background-color: #e1e1e1;
  border-radius: 10px 0 0 10px;
}

.game-store-list__item--app a{
  border-color: #11baed;
}
.game-store-list__item--app a svg{
  fill: #11baed;
  border-color: rgba(17, 186, 237, 0.4);
  background-color: #d0f0fa;
}

.game-store-list__item--google a{
  border-color: #3ec963;
}
.game-store-list__item--google a svg{
  fill: #3ec963;
  border-color: rgba(62, 201, 99, 0.4);
  background-color: #d3f7dc;
}

.game-store-list__item--pss a{
  border-color: #0070D1;
}
.game-store-list__item--pss a svg{
  fill: #0070D1;
  border-color: rgba(0, 112, 209, 0.2);
  background-color: #d2e6f7;
}

.game-store-list__item--mns a{
  border-color: #E22130;
}
.game-store-list__item--mns a svg{
  fill: #E22130;
  border-color: rgba(226, 33, 49, 0.2);
  background-color: #ffe2e4;
}

.game-store-list__item--mss a{
  border-color: #107B10;
}
.game-store-list__item--mss a svg{
  fill: #107B10;
  border-color: rgba(16, 123, 16, 0.2);
  background-color: #d6f0d6;
}

.game-store-list__item--steam a{
  border-color: #68727E;
}
.game-store-list__item--steam a svg{
  fill: #68727E;
  border-color: rgba(104, 114, 126, 0.2);
  background-color: #e3e5ea;
}

.game-store-list__item--amazon a{
  border-color: #FE9800;
}
.game-store-list__item--amazon a svg{
  fill: #FE9800;
  border-color: rgba(254, 152, 0, 0.3);
  background-color: #ffecd0;
}

.game-store__sponsored{
  text-align: right;
  line-height: 1;
  font-size: 1rem;
  color: var(--c-gray-lighter);
  margin-top: 8px;
}

@media screen and (min-width: 960px) {
  .game-store-list__item{
    line-height: 38px;
  }
  .game-store-list__item svg{
    height: 38px;
  }
}

@media (hover: hover) {
  .game-store-list a:hover{
    transform: translateY(0);
    box-shadow: none;
  }

  .game-store-list__item--app a:hover{
    background-color: #d0f0fa;
  }

  .game-store-list__item--google a:hover{
    background-color: #d3f7dc;
  }

  .game-store-list__item--pss a:hover{
    background-color: #d2e6f7;
  }
  
  .game-store-list__item--mns a:hover{
    background-color: #ffe2e4;
  }
  
  .game-store-list__item--mss a:hover{
    background-color: #d6f0d6;
  }
  
  .game-store-list__item--steam a:hover{
    background-color: #e3e5ea;
  }
  
  .game-store-list__item--amazon a:hover{
    background-color: #ffecd0;
  }
}

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

サブニュースリスト

----------------------------------------*/
.sub-news-list__item {
  border-bottom: 1px solid var(--c-gray-border);
  transition: var(--animation);
}

.sub-news-list__item a{
  display: flex;
  align-items: flex-start;
  gap: 5px 6px;
  padding: 12px var(--sub-contents-padding);
}

.sub-news-list__img {
  position: relative;
  width: 150px;
  height: fit-content;
  flex-shrink: 0;
  border-radius: 5px;
}

.sub-news-list__img img{
  border-radius: 5px;
}

.sub-news-list__text{
  flex-grow: 1;
}

.sub-news-list__title {
  font-size: 1.4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.sub-news-list__title+.news-date{
  margin-top: 4px;
}

.sub-news-list .ad-infeed{
  padding: 0 calc(var(--sub-contents-padding) - 1px);
  border-bottom: 1px solid var(--c-gray-border);
}

@media (hover: hover) {
  .sub-news-list__item:hover{
    background-color: var(--c-primary-lighter);
    color: var(--c-primary);
  }
}

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

キーワード

----------------------------------------*/
.sub-section .news-tag-box{
  padding: var(--sub-contents-padding);
}

.keyword__item{
  padding: 12px var(--sub-contents-padding);
  border-bottom: 1px solid var(--c-gray-border);
}

.keyword__item:last-child{
  border: none;
}

/*キーワードのタイトル
----------------------------------------*/
.keyword__title{
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  transition: var(--animation);
  outline: 1px solid var(--c-gray-border);
  border-radius: 20px;
  display: block;
  padding: 8px 12px 8px 26px;
  width: fit-content;
}

.keyword__title::before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--rounded-circle);
}

/*インタビュー*/
.keyword__item--interview .keyword__title{
  outline-color: var(--c-cat-report);
  background-color: var(--c-cat-report-bg);
}
.keyword__item--interview .keyword__title::before{
  background-color: var(--c-cat-report);
}

/*セール*/
.keyword__item--sale .keyword__title{
  outline-color: var(--c-cat-sale);
  background-color: var(--c-cat-sale-bg);
}
.keyword__item--sale .keyword__title::before{
  outline-color: var(--c-cat-sale);
  background-color: var(--c-cat-sale);
}

/*新作*/
.keyword__item--newtitle .keyword__title{
  outline-color: var(--c-cat-newtitle);
  background-color: var(--c-cat-newtitle-bg);
}
.keyword__item--newtitle .keyword__title::before{
  background-color: var(--c-cat-newtitle);
}

/*キーワードに紐づくニュース
---------------------------*/
.keyword__news{
  display: flex;
  align-items: start;
  transition: var(--animation);
  gap: 8px;
}

.keyword__news-title{
  font-size: 1.3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.keyword__news img{
  width: 110px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  transition: var(--animation);
}

@container (min-width: 600px) {
  .keyword{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .keyword__item{
    padding: 12px;
  }

  .keyword__item:nth-child(2n){
    border-left: 1px solid var(--c-gray-border);
  }

  .keyword__item:nth-last-child(2){
    border-bottom: 0;
  }
}

@media (hover: hover) {
  .keyword__title:hover{
    outline-width: 2px;
  }

  .keyword__news:hover{
    color: var(--c-primary);
  }
}

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

ランキング

----------------------------------------*/
.sub-news-list--ranking{
  counter-reset: number 0;
}

.sub-news-list--ranking .sub-news-list__img::before{
  position: absolute;
  top: -8px;
  left: -8px;
  counter-increment: number 1;
  content: counter(number) " ";
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--c-gray);
  border-radius: var(--rounded-circle);
  outline: 2px solid #fff;
  outline-offset: -1px;
}

.sub-news-list--ranking .sub-news-list__item:nth-child(1) .sub-news-list__img:before{
  background-color: #f95b65;
}

.sub-news-list--ranking .sub-news-list__item:nth-child(2) .sub-news-list__img:before{
  background-color: #ff8445;
}

.sub-news-list--ranking .sub-news-list__item:nth-child(3) .sub-news-list__img:before{
  background-color: #f8b534;
}

@container (min-width: 600px) {
  .sub-news-list--ranking{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .sub-news-list--ranking .sub-news-list__item:nth-child(1),
  .sub-news-list--ranking .sub-news-list__item:nth-child(2){
    border-right: 1px solid var(--c-gray-border);
  }

  .sub-news-list--ranking .sub-news-list__item:nth-child(-n+3) a{
    flex-direction: column;
  }

  .sub-news-list--ranking .sub-news-list__item:nth-child(-n+3) .sub-news-list__img{
    width: 100%;
  }

  .sub-news-list--ranking .sub-news-list__item:nth-child(n+4){
    grid-column-start: 1;
    grid-column-end: 4;
  }
}

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

おすすめアプリ

----------------------------------------*/
.sub-app-list__item{
  border-bottom: 1px solid var(--c-gray-border);
  transition: var(--animation);
  display: flex;
  gap: 8px;
  align-items: start;
  padding: 12px var(--sub-contents-padding);
}

.sub-app-list__img{
  width: 80px;
  height: 80px;
  border-radius: var(--rounded-app);
  overflow: hidden;
  flex-shrink: 0;
  transition: var(--animation);
}

.sub-app-list__title{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.sub-app-list__catch{
  margin-bottom: 4px;
  font-size: 1.3rem;
}

.sub-app-list__item .game-tag-box{
  margin-top: 2px;
}

@container (min-width: 600px) {
  .sub-app-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sub-app-list__item:nth-child(2n){
    border-left: 1px solid var(--c-gray-border);
  }
}

@media (hover: hover) {
  .sub-app-list__item:hover{
    background-color: var(--c-primary-lighter);
  }
  
  .sub-app-list__item:hover .sub-app-list__title{
    color: var(--c-primary);
  }
}

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

ゲームイベント番組

----------------------------------------*/
.program-list{
  font-size: 1.4rem;
}

.program-list__item{
  border-bottom: 1px solid var(--c-gray-border);
  transition: var(--animation);
}

.program-list__item a{
  display: flex;
  padding: 10px var(--sub-contents-padding);  
}

.program-list__item time{
  display: block;
  color: var(--c-gray);
  white-space: nowrap;
  padding-right: 8px;
  border-right: 2px solid var(--c-gray-border);
  margin-right: 8px;
}

.program-list__date{
  color: var(--c-gray);
  border-bottom: 1px solid var(--c-gray-border);
  transition: var(--animation);
  font-weight: 600;
}

.program-list__date a{
  display: block;
  padding: 10px var(--sub-contents-padding);  
}

@media (hover: hover) {
  .program-list__item:hover{
    color: var(--c-primary);
    background-color: var(--c-primary-lighter);
  }
  .program-list__date:hover{
    background-color: var(--c-primary-lighter);
  }
}

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

follow-us

----------------------------------------*/
.follow-us{
  background-color: #d7e0ff;
  padding: var(--sub-contents-padding);
  width: 100%;
  max-width: 384px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.follow-us:has(.follow-us__head){
  margin-top: 90px;
}
.follow-us__head{
  position: relative;
  max-width: 280px;
  background-color: #fff;
  padding: 16px;
  border-radius: 20px;
  margin: -36px auto 20px;
}
.follow-us__head::before{
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 14px solid #fff;
  border-bottom: 0;
}

.follow-us__title{
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
}

.follow-us__outline{
  font-size: 1.6rem;
  text-align: center;
  color: var(--c-gray);
}

.follow-us__img{
  position: absolute;
  top: -74px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
}

.follow-us .play-video{
  margin-bottom: 10px;
}

.sns{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sns__item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: var(--rounded-circle);
  transition: var(--animation);
}

.sns__item svg{
  width: 30px;
  height: 30px;
  transition: var(--animation);
}

.sns__item--x svg{
  fill: #3d4247;
  width: 24px;
  height: 24px;
}

.sns__item--facebook svg{
  fill: #1877F2;
}

.sns__item--youtube svg{
  fill: #EA3500;
}

.sns__item--rss svg{
  fill: #FF7F00;
}

@media (hover: hover) {
  .sns__item:hover{
    transform: scale(1.1);
  }

  .sns__item--x:hover{
    background-color: #3d4247;
  }

  .sns__item--facebook:hover{
    background-color: #1877F2;
  }

  .sns__item--youtube:hover{
    background-color: #EA3500;
  }

  .sns__item--rss:hover{
    background-color: #FF7F00;
  }

  .sns__item:hover svg{
    fill: #fff;
  }
}

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

フッター

----------------------------------------*/
footer{
  background-image:
  radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px),
  radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px),
  radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px),
  linear-gradient(135deg, rgba(20, 20, 70, 0.7), rgb(55, 55, 122), rgba(20, 20, 70, 0.9));
  background-position: 9px 9px, 3px 3px, 0 0, 0 0;
  background-size: 12px 12px, 12px 12px, 6px 6px, 100% 100%;
}

.footer-logo{
  max-width: 500px;
  margin: 0 auto;
}

.footer-logo svg{
  fill: #fff;
}

.footer-nav{
  display: flex;
  justify-content: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-size: 1.4rem;
  padding: 0 var(--contents-padding) 20px;
  color: #fff;
}

.footer-media{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 15px;
  padding: 20px var(--contents-padding);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.footer-media svg{
  width: 150px;
  fill: rgba(255, 255, 255, 0.7);
  transition: var(--animation);
}

.footer-copyright{
  font-size: 1.2rem;
  text-align: center;
  padding: 0 var(--contents-padding);
  color: #fff;
}

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

@media (hover: hover) {
  .footer-nav a:hover{
    text-decoration: underline;
  }
  .footer-media svg:hover{
    fill: rgba(255, 255, 255, 1);
  }
}