@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :top.css
 style info :トップのスタイル
=================================================================== */
#visual {
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (min-width: 768px) {
  #visual {
    background-image: url(../img/top/bg_visual_pc.jpg);
    background-size: cover;
  }
}
@media screen and (max-width: 767px) {
  #visual {
    background-image: url(../img/top/bg_visual_sp.jpg);
    background-size: 100%;
  }
}
#visual .inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  #visual .inner {
    width: min(96%, 1100px);
    height: min(75.4vw, 878px);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  #visual .inner {
    height: 74.4vw;
  }
}
@media screen and (max-height: 980px) and (min-width: 768px) {
  #visual .inner {
    width: clamp(704px, 96%, 102vh);
    height: clamp(540px, 73vw, 80vh);
  }
}
@media screen and (max-width: 767px) {
  #visual .inner {
    overflow-x: hidden;
    height: 122vw;
  }
}
#visual .inner .logo {
  position: absolute;
}
@media screen and (min-width: 768px) {
  #visual .inner .logo {
    width: min(20%, 257px);
    top: 1em;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .logo {
    width: 34%;
    top: 2vw;
    left: 2vw;
  }
}
#visual .inner h1 {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #visual .inner h1 {
    width: min(42%, 540px);
    padding-top: min(23vw, 270px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  #visual .inner h1 {
    padding-top: 22vw;
  }
}
@media screen and (max-height: 980px) and (min-width: 768px) {
  #visual .inner h1 {
    padding-top: clamp(162px, 22vw, 24vh);
  }
}
@media screen and (max-width: 767px) {
  #visual .inner h1 {
    width: 48%;
    padding-top: 45vw;
  }
}
#visual .inner .main {
  position: absolute;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  #visual .inner .main {
    top: -50px;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main {
    width: 110%;
    top: 14vw;
    left: -5%;
  }
}
#visual #specialArea {
  position: relative;
  z-index: 1;
  background: url(../img/top/18th_bg_pc.jpg), -webkit-gradient(linear, left top, right top, from(#082475), color-stop(50%, #082475), color-stop(50%, #0864b7));
  background: url(../img/top/18th_bg_pc.jpg), linear-gradient(90deg, #082475 0%, #082475 50%, #0864b7 50%);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 768px) {
  #visual #specialArea {
    background-position: center top;
    padding: min(1.6vw, 1.4em) 0;
  }
}
@media screen and (max-width: 767px) {
  #visual #specialArea {
    background-position: center center;
    padding: 6vw 0;
  }
}
#visual #specialArea .box {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: min(94%, 840px);
  }
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box figure {
    width: min(38%, 371px);
  }
}
@media screen and (max-width: 767px) {
  #visual #specialArea .box figure {
    width: 90%;
    margin-inline: auto;
  }
}
#visual #specialArea .box dl {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box dl {
    text-align: left;
    width: min(60%, 499px);
  }
}
#visual #specialArea .box dl dt {
  line-height: 1.4;
  text-align: left;
  margin: 0 auto 1em;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box dl dt {
    width: min(100%, 499px);
  }
}
@media screen and (max-width: 767px) {
  #visual #specialArea .box dl dt {
    width: 84%;
  }
}
#visual #specialArea .box dl dd {
  text-align: left;
  margin-bottom: 0.6em;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box dl dd {
    font-size: 18px;
  }
}
#visual #specialArea .box dl .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  color: #fff;
  background: #cf0000;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box dl .btn {
    font-size: min(1.8vw, 18px);
    padding: 0.6em 2.5em 0.7em;
  }
}
@media screen and (max-width: 767px) {
  #visual #specialArea .box dl .btn {
    font-size: 4vw;
    padding: 1em 2.5em 1.1em;
    margin: 2vw 0;
  }
}
#visual #specialArea .box dl .btn:before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat 0 0/100%;
}
@media screen and (min-width: 768px) {
  #visual #specialArea .box dl .btn:before {
    width: 18px;
    height: 21px;
  }
}
@media screen and (max-width: 767px) {
  #visual #specialArea .box dl .btn:before {
    width: 4vw;
    height: 4.7vw;
  }
}

.content {
  background: url(../img/shared/bg_content_rep.jpg) repeat 0 0;
}
@media screen and (min-width: 768px) {
  .content {
    padding-bottom: 4em;
    margin-top: -2em;
  }
}
@media screen and (max-width: 767px) {
  .content {
    padding: 8vw 0;
    margin-top: -8vw;
  }
}
.content:before {
  background: url(../img/shared/bg_content_top_rep.jpg) repeat-x 0 0/auto 100%;
  content: "";
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .content:before {
    height: min(10vw, 140px);
  }
}
@media screen and (max-width: 767px) {
  .content:before {
    height: 14vw;
  }
}
@media screen and (min-width: 768px) {
  .content #infoArea {
    margin-bottom: min(6vw, 6em);
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea {
    margin-bottom: 12vw;
  }
}
.content #infoArea .inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: min(96%, 1000px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #infoArea .inner {
    width: 86%;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner {
    width: 87%;
  }
}
.content #infoArea .inner .topicsBox {
  text-align: left;
  border-radius: 8px;
  background: rgba(52, 94, 17, 0.7);
  width: 100%;
  padding: 1.4em 2em;
  margin-bottom: 2.8em;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .topicsBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
.content #infoArea .inner .topicsBox h2 {
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .topicsBox h2 {
    border-right: solid 3px #3E6817;
    font-size: 20px;
    padding-right: 1.3em;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .topicsBox h2 {
    border-bottom: solid 3px #3E6817;
    font-size: 4vw;
    padding-bottom: 0.5em;
  }
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .topicsBox ul {
    width: min(90%, 835px);
    height: 240px;
    padding: 0 1.5em;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .topicsBox ul {
    width: 78vw;
    height: 60vw;
    padding: 0.5em 1.5em 0 0;
  }
}
.content #infoArea .inner .topicsBox ul li {
  font-weight: bold;
  margin-bottom: 1.2em;
}
.content #infoArea .inner .topicsBox ul li:last-child {
  margin-bottom: 0;
}
.content #infoArea .inner .topicsBox ul li dl dt {
  color: #ffe900;
  margin-bottom: 0.4em;
}
.content #infoArea .inner .topicsBox ul li dl dd {
  color: #fff;
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat left top;
  padding-left: 2em;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .topicsBox ul li dl dd {
    background-size: 18px auto;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .topicsBox ul li dl dd {
    background-size: 4vw auto;
  }
}
.content #infoArea .inner .topicsBox ul li dl dd a {
  color: #ffe900;
}
.content #infoArea .inner .topicsBox ul li dl dd a:hover {
  text-decoration: underline;
}
.content #infoArea .inner .bnrBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrBox {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .bnrBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 6vw 0;
  }
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrBox .main {
    width: min(61%, 603px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #infoArea .inner .bnrBox .main {
    width: 54%;
  }
}
.content #infoArea .inner .bnrBox .sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 1em 0;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrBox .sub {
    width: min(37%, 370px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #infoArea .inner .bnrBox .sub {
    width: 43%;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .bnrBox .sub {
    width: 80%;
    margin-inline: auto;
  }
}
.content #infoArea .inner .bnrBox .sub li.btnX a {
  color: #000;
  font-weight: 700;
  background: #fff url(../img/shared/bg_arrow_yellow.svg) no-repeat right 1em center/1em;
  border: solid 1px;
  border-radius: 100px;
  border: 6px solid #efefef;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 0.5em;
  padding: 0.6em 1em;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrBox .sub li.btnX a {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #infoArea .inner .bnrBox .sub li.btnX a {
    font-size: 1.9vw;
  }
}
.content #infoArea .inner .bnrBox .sub li.btnX a:before {
  content: "";
  display: block;
  background: #efefef url(../img/shared/icn_x.svg) no-repeat center center/1.4em;
  border-radius: 100%;
  width: 1.4em;
  height: 1.4em;
  padding: 0.5em;
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #infoArea .inner .bnrBox .sub li.btnX a:before {
    width: 1em;
    height: 1em;
    background-size: 1em;
  }
}
.content #infoArea .inner .bnrShowcase {
  margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .bnrShowcase {
    background: -webkit-gradient(linear, left top, right top, from(#7cff85), to(#eeff12));
    background: linear-gradient(90deg, #7cff85, #eeff12);
    padding: 4px;
    margin-bottom: 4vw;
  }
}
.content #infoArea .inner .bnrTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin-bottom: 3em;
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrTop {
    gap: 2em 3%;
  }
}
@media screen and (max-width: 767px) {
  .content #infoArea .inner .bnrTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 4vw 0;
  }
}
@media screen and (min-width: 768px) {
  .content #infoArea .inner .bnrTop li {
    width: 48.5%;
  }
}
.content #infoArea .inner .bnrTop li a img {
  outline: solid 4px #000;
  outline-offset: -4px;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner {
    width: min(96%, 1220px);
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner {
    width: 86%;
  }
}
.content #listArea .inner .gameList {
  margin: 0 auto 4em;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner .gameList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.5em 2%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner .gameList {
    gap: 1.5em 3%;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner .gameList {
    width: 87%;
  }
}
.content #listArea .inner .gameList li {
  background-color: #fff;
  background-image: url(../img/top/bg_title_hexagon.png);
  background-repeat: no-repeat;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 0 0 rgba(131, 131, 131, 0.5);
          box-shadow: 0 2px 0 0 rgba(131, 131, 131, 0.5);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner .gameList li {
    background-position: right -40px bottom -70px;
    background-size: 150px auto;
    width: min(32%, 392px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner .gameList li {
    width: 48.5%;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner .gameList li {
    background-position: right -10vw bottom -16vw;
    background-size: 34vw auto;
    margin-bottom: 4vw;
  }
}
.content #listArea .inner .gameList li a figure {
  background: #3162bd;
  padding: 0.5em;
}
.content #listArea .inner .gameList li a figure img {
  border: 2px solid #fff;
}
.content #listArea .inner .gameList li a dl {
  text-align: left;
  padding: 0.5em 0.7em;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner .gameList li a dl {
    min-height: 96px;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner .gameList li a dl {
    min-height: 24vw;
  }
}
.content #listArea .inner .gameList li a dl dt {
  color: #000;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner .gameList li a dl dt {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner .gameList li a dl dt {
    font-size: 4vw;
  }
}
.content #listArea .inner .gameList li a dl dd span {
  color: #fff;
  font-weight: bold;
  display: inline-block;
  border-radius: 4px;
  padding: 0 0.5em 0.1em;
  margin: 0 0.2em 0.2em 0;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner .gameList li a dl dd span {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner .gameList li a dl dd span {
    font-size: 3vw;
  }
}
.content #listArea .inner .gameList li a dl dd span.switch {
  background: #e60012;
}
.content #listArea .inner .gameList li a dl dd span.ds3 {
  background: #c00;
}
.content #listArea .inner .gameList li a dl dd span.ds {
  background: #ff418c;
}
.content #listArea .inner .gameList li a dl dd span.wii {
  background: #34beed;
}
.content #listArea .inner .gameList li a dl dd span.ps4 {
  background: #165ebf;
}
.content #listArea .inner .gameList li a dl dd span.steam {
  background: #171d25;
}
.content #listArea .inner .gameList li a dl dd span.app {
  background: #5b5b5b;
}
.content #listArea .inner .gameList li a dl dd span:last-of-type {
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner #movieArea {
    display: block;
  }
}
.content #listArea .inner #movieArea h1 {
  background: #000;
  font-weight: bold;
  text-align: left;
  padding: 0.5em 1em;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea h1 {
    width: min(32%, 392px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner #movieArea h1 {
    width: 100%;
    padding: 0.5em 1em 0.6em;
    margin-bottom: 2em;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner #movieArea h1 {
    font-size: 4vw;
    margin-bottom: 10vw;
  }
}
.content #listArea .inner #movieArea h1 span {
  display: block;
  border-left: solid 8px #004dfe;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea h1 span {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner #movieArea h1 span br {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: min(66%, 806px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .content #listArea .inner #movieArea ul {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner #movieArea ul {
    width: 80%;
    margin: 0 auto;
  }
}
.content #listArea .inner #movieArea ul li {
  text-align: left;
  margin-bottom: 1.5em;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea ul li {
    width: min(48.5%, 418px);
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner #movieArea ul li {
    margin-bottom: 4vw;
  }
}
.content #listArea .inner #movieArea ul li figure {
  border-radius: 8px;
  margin-bottom: 0.5em;
  overflow: hidden;
}
.content #listArea .inner #movieArea ul li p {
  color: #000;
  font-weight: bold;
  background-image: url(../img/shared/bg_arrow_black.svg);
  background-repeat: no-repeat;
  background-position: right center;
}
@media screen and (min-width: 768px) {
  .content #listArea .inner #movieArea ul li p {
    background-size: 1.4em;
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .content #listArea .inner #movieArea ul li p {
    background-size: 4vw;
  }
}