@charset "UTF-8";
body {
  color: #fff;
}

aside {
  background: #000;
  z-index: 1;
}

/* firstView */
#firstView {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1c1104;
  /* background: #000 url("../images/top/mv_sp.jpg") top center no-repeat; */
  background-size: 100% auto;
  overflow: hidden;
}

@media only screen and (min-width: 1024px) {
  #firstView.mv_m {
    height: calc(56.25vw + 30px);
    background: #000 url("../images/top/mv_m.jpg") center no-repeat;
    background-size: 100%;
    background-position: center 45px;
  }

  #firstView.mv_l {
    height: 42vw;
    background: #000 url("../images/top/mv.jpg") center no-repeat;
    background-size: 106%;
    background-position: 25% 65px;
  }
}

#firstView {
  /* animation: fadeIn .3s ease-in-out; */
  display: block;
}

#firstView .mv {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

@media only screen and (min-width: 1024px) {
  #firstView .mv {
    display: none;
    /* min-height: 720px; */
  }
}

#firstView .mv::after {
  content: "";
  display: block;
  height: 186vw;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: url(../images/top/mv_sp.jpg) no-repeat;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  z-index: -1;
}

#firstView .mv img {
  width: auto;
  height: 100%;
}

.sec-bg-box {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.sec-bg-box::before {
  background: rgba(0, 0, 0, 0.45);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease-out;
}

.is-overlay .sec-bg-box::before {
  opacity: 1;
}

@media only screen and (min-width: 1024px) {
  #firstView .contsInner {
    position: absolute;
    z-index: 99;
    top: 65px;
    left: 0;
    width: 100%;
    height: calc(100% - 65px);
    padding: 0;
  }
}

#firstView .platform {
  line-height: 0;
  position: absolute;
  z-index: 99;
  top: 2vw;
  left: 2%;
  width: 35%;
  max-width: 210px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (min-width: 1024px) {
  #firstView .platform {
    width: 15vw;
    top: 1.5vw;
    left: 1.5vw;
    max-width: 320px;
  }
}

@media only screen and (min-width: 1600px) {
  #firstView .platform {
    top: 1vw;
    left: 1vw;
  }
}

#firstView .platform .logo_switch {
  width: 28%;
}

#firstView .platform .logo_steam {
  width: 62%;
  margin: 0 0.25vw 0 0.5vw;
}

#firstView .platform .logo_ps4 {
  width: 62%;
}

@media only screen and (max-width: 1023px) {
  #firstView .logo {
    padding-top: 30vw;
  }
}

#firstView h1 {
  position: relative;
  z-index: 99;
  width: 76.935%;
  margin: 2vw auto 15vw;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.7));
}

@media only screen and (min-width: 1024px) {
  #firstView.mv_m h1 {
    width: 32.8125%;
    padding: 0;
    margin: 15vw auto 2vw;
  }

  #firstView.mv_l h1 {
    width: 28.8125%;
    padding: 0;
    margin: 12vw auto 3vw;
  }

  #firstView.mv_m.sale h1 {
    width: 32.8125%;
    padding: 0;
    margin: 0 auto 2vw;
  }
  #firstView.mv_l.sale h1 {
    width: 30%;
    padding: 0;
    margin: -6vw auto 2vw;
  }

}

#firstView .btn_buy {
  width: 80%;
  margin: 0 auto 10vw;
}

@media only screen and (min-width: 1024px) {
  #firstView .btn_buy {
    margin: 0 auto 3vw;
  }
}

#firstView .btn_buy a {
  font-family: "source-han-serif-japanese", serif;
  background-size: contain, cover;
  font-size: 8vw;
}

#firstView .btn_buy span:after {
  content: "";
  width: 7vw;
  height: 9vw;
  right: 15px;
}

#firstView .btn_buy_text {
  font-family: "source-han-serif-japanese", serif;
  text-align: center;
  font-size: 4.6666vw;
  margin-bottom: 3vw;
}

#firstView .videoArea {
  margin-bottom: 6vw;
  z-index: 12;
}

@media only screen and (min-width: 1024px) {
  #firstView .videoArea {
    width: 20%;
    margin: 0;
    max-width: 350px;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  #firstView .videoArea.left {
    left: 20px;
  }

  #firstView.mv_m .videoArea {
    width: 23%;
  }

  #firstView.mv_l .videoArea {
    width: 22%;
  }

  #firstView.mv_l.sale .videoArea {
    width: 18%;
    bottom: 10px;
  }
  #firstView.mv_l.sale .videoArea {
    width: 20%;
  }

}



#firstView .trailer {
  width: 87.467%;
  margin: 8% auto 6%;
}

@media only screen and (min-width: 1024px) {
  #firstView .trailer {
    width: 100%;
    margin: 0;
  }
}

#firstView .trailer h2 {
  font-family: "source-han-serif-japanese", serif;
  text-align: center;
  letter-spacing: .2em;
  font-weight: bold;
  font-size: 4.6666vw;
  margin-bottom: 3.334vw;
  text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000;
}

@media only screen and (min-width: 1024px) {
  #firstView .trailer h2 {
    font-size: 1.01171875vw;
    margin-bottom: 1vw;
  }
}

@media only screen and (min-width: 1400px) {
  #firstView .trailer h2 {
    font-size: 15px;
  }
}

#firstView .trailer .trailerBox {}

#firstView .trailer .trailerBox a {
  border: 1px solid #fff;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 1;
  transition: box-shadow .5s ease-in-out;
  margin-bottom: 0.5em;
}

@media only screen and (min-width: 1024px) {
  #firstView .trailer .trailerBox a:hover {
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }
}

#firstView .trailer .trailerBox a img {
  vertical-align: bottom;
}

#firstView .trailer .trailerBox a::after {
  content: "";
  display: inline-block;
  background: url("../images/common/icon_play.png") center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 5%;
  right: 3%;
  width: 3.483em;
  height: 3.483em;
}

@media only screen and (min-width: 1024px) {
  #firstView .trailer .trailerBox a::after {
    background-size: cover;
    width: 2.483em;
    height: 2.483em;
    max-width: 40px;
    max-height: 40px;
  }
}

#firstView .medal {
  width: 32vw;
  height: 32vw;
  margin: 0 auto 6vw;
  background: url(../images/top/bg_medal.png) no-repeat;
  background-size: cover;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

#firstView .logo .medal {
  /* position: absolute;
  top: 30vw;
  right: 1vw; */
  margin-right: 1vw;
  margin-left: auto;
}

@media only screen and (min-width: 1024px) {
  #firstView .logo .medal {
    display: none;
  }

  #firstView .medal {
    width: 12vw;
    height: 12vw;
    margin: 0 0 1vw auto;
  }

  #firstView.sale .logo .medal {
    display: flex;
  }
  #firstView.sale .videoArea .medal {
    display: none;
  }

}
@media only screen and (min-width: 1400px) {
  #firstView .medal {
    width: 10vw;
    height: 10vw;
    margin: 0 0 1vw auto;
  }
}

#firstView .medal p {
  font-family: "source-han-serif-japanese", serif;
  padding-top: 0.3em;
  font-weight: bold;
  font-size: 3.4666vw;
  line-height: 1.2;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

@media only screen and (min-width: 1024px) {
  #firstView .medal p {
    font-size: 1.3vw;
  }
}

@media only screen and (min-width: 1400px) {
  #firstView .medal p {
    font-size: 1.1vw;
  }
}

#firstView .medal span {
  text-align: center;
  transform: translate(-40%, -50%);
  background: -moz-linear-gradient(top, #fef691 40%, #dbb326 60%);
  background: -webkit-linear-gradient(top, #fef691 40%, #dbb326 60%);
  background: linear-gradient(to bottom, #fef691 40%, #dbb326 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#firstView .medal p span.big {
  font-size: 180%;
}

#firstView .medal p span.small {
  font-size: 60%;
}

#firstView .videoArea .bnr {
  width: 87.467%;
  margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr {
    width: 100%;
  }
}

#firstView .videoArea .bnr a {
  width: 100%;
  display: block;
  line-height: 0;
  margin-bottom: 4vw;
  border: 1px solid #f1f8f1;
}

@media only screen and (min-width: 1024px) {
  #firstView .bnr a:hover {
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }
}

/*バナー　体験版配信中*/
/*バナー　PS4版発売決定*/
#firstView .videoArea .bnr a.bnr_demo,
#firstView .videoArea .bnr a.bnr_ps4 {
  display: block;
  width: 100%;
  height: auto;
  padding-top: 31.25%;
  position: relative;
}
#firstView .videoArea .bnr a.bnr_demo {
  background: url(../images/top/bg_bnr_demo.jpg) no-repeat;
  background-size: cover;
}
#firstView .videoArea .bnr a.bnr_ps4 {
  background: url(../images/top/bg_bnr_ps4.jpg) no-repeat;
  background-size: cover;
}
#firstView .videoArea .bnr .bnr_st {
  margin-bottom: 0;
}

@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr a {
    margin-bottom: 1vw;
  }
  #firstView .videoArea .bnr .bnr_st {
    display: none;
  }
}

#firstView .videoArea .bnr a.bnr_demo span,
#firstView .videoArea .bnr a.bnr_ps4 span {
  width: 100%;
  font-family: "source-han-serif-japanese", serif;
  text-align: center;
  font-weight: 900;
  font-size: 8vw;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

#firstView .videoArea .bnr a.bnr_ps4 span:last-child {
  font-size: 5.5vw;
}

#firstView .videoArea .bnr a.bnr_demo span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  background: -moz-linear-gradient(top, #ffffff 30%, #ffec70 70%);
  background: -webkit-linear-gradient(top, #ffffff 30%, #ffec70 70%);
  background: linear-gradient(to bottom, #ffffff 30%, #ffec70 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px #000) drop-shadow(0 0 8px #000) drop-shadow(0 0 8px #000);
}

#firstView .videoArea .bnr a.bnr_ps4 p {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#firstView .videoArea .bnr a.bnr_ps4 span {
  background: -moz-linear-gradient(top, #6e3c08 30%, #432505 70%);
  background: -webkit-linear-gradient(top, #6e3c08 30%, #432505 70%);
  background: linear-gradient(to bottom, #6e3c08 30%, #432505 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #fff);
}

#firstView .videoArea .bnr a.bnr_ps4 span:first-child {
  margin: 0 0 8px;
}

#firstView .videoArea .bnr a.bnr_ps4 span:last-child {
  letter-spacing: unset;
}

@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr a.bnr_demo span,
  #firstView .videoArea .bnr a.bnr_ps4 span {
    font-size: 2vw;
  }
  #firstView .videoArea .bnr a.bnr_ps4 span:last-child {
    font-size: 1.5vw;
  }
}

@media only screen and (min-width: 1366px) {
  #firstView .videoArea .bnr a.bnr_demo span,
  #firstView .videoArea .bnr a.bnr_ps4 span {
    font-size: 30px;
  }

  #firstView .videoArea .bnr a.bnr_ps4 span:last-child {
    font-size: 21px;
  }
}

/*media*/
#firstView .videoArea .bnr_media {
  font-family: "source-han-serif-japanese", serif;
  display: block;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 6vw;
}
@media only screen and (max-width: 1023px) {
  #firstView .videoArea .bnr_media {
    width: 87.467%;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr_media {
    margin-bottom: 1vw;
  }

  #firstView .videoArea .bnr_media:hover {
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }

}

#firstView .videoArea .bnr_media h3{
  background: #1272cb;
  color: #fff;
  font-weight: bold;
  padding: 0.5em 0;
  text-align: center;
  font-size: 3vw;
  line-height: 1.2;
}
@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr_media h3{
    font-size: 1vw;
  }
  #firstView.mv_l .videoArea .bnr_media h3{
    font-size: 12px;
  }

}

#firstView .videoArea .bnr_media figure{
  width:90%;
  margin: 3vw auto;
}
@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr_media figure{
    width:90%;
    margin: 1vw auto;
  }
}

#firstView .videoArea .bnr_media figure figcaption{
  color: #0c6bc3;
  font-size: 5vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  padding-bottom: 3vw;
  text-shadow:
            3px 3px 3px #fff, -3px -3px 3px #fff,
           -3px 3px 3px #fff,  3px -3px 3px #fff,
            3px 0px 3px #fff, -3px -0px 3px #fff,
            0px 3px 3px #fff,  0px -3px 3px #fff;
}

#firstView .videoArea .bnr_media figure figcaption span{
  font-size: 120%;
}

@media only screen and (min-width: 1024px) {
  #firstView .videoArea .bnr_media figure figcaption{
    font-size: 1.5vw;
    padding-bottom: 1vw;
  }
}
@media only screen and (min-width: 1400px) {
  #firstView .videoArea .bnr_media figure figcaption{
    font-size: 16px;
  }
}


#firstView .linkBtn {
  width: 87.467%;
  margin: 6vw auto 0;
  background: rgba(0, 0, 0, 0.6);
}

@media only screen and (min-width: 1024px) {
  #firstView .linkBtn {
    width: 100%;
    max-width: 314px;
    margin: 0;
  }
}

#firstView .linkBtn a {
  display: block;
  font-family: "source-han-serif-japanese", serif;
  position: relative;
  border: 1px solid #fff;
  box-sizing: border-box;
  transition: box-shadow .5s ease-in-out;
  line-height: 1.3;
  text-align: center;
  font-size: 3.5vw;
  font-weight: 500;
  padding: 2.5vw 14vw 2.5vw 2.4vw;
}

@media only screen and (min-width: 1024px) {
  #firstView .linkBtn a {
    font-weight: 300;
    font-size: 1vw;
    padding: 0.6vw 3vw 0.6vw 0.5vw;
  }
}

@media only screen and (min-width: 1400px) {
  #firstView .linkBtn a {
    font-size: 13px;
    padding: 0.5vw 3vw 0.5vw 0.5vw;
  }
}

@media only screen and (min-width: 1024px) {
  #firstView .linkBtn a:hover {
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }
}

#firstView .linkBtn a::after {
  content: "";
  display: inline-block;
  background: url("../images/common/icon_play_white.png") center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 2.6em;
  height: 2.6em;
}

@media only screen and (min-width: 1024px) {
  #firstView .linkBtn a::after {
    width: 2.431em;
    height: 2.431em;
    max-width: 33px;
    max-height: 33px;
  }
}

@media only screen and (min-width: 1024px) {
  #firstView.mv_l .leadArea {
    position: absolute;
    top: 43%;
    left: 2vw;
  }

  #firstView.mv_m .leadArea {
    position: absolute;
    top: 48%;
    left: 2vw;
  }
}

#firstView .lead {
  font-family: "source-han-serif-japanese", serif;
  font-weight: 600;
  filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 8px #000);
  letter-spacing: .3em;
  font-size: 4vw;
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  #firstView .lead {
    font-size: 1.7vw;
    margin-bottom: 2vw;
    width: auto;
    text-align: left;
  }
}

@media only screen and (min-width: 1400px) {
  #firstView .lead {
    font-size: 25px;
  }
}

#firstView .mainTxt {
  width: 100%;
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  text-align: center;
  filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 8px #000);
  letter-spacing: .1em;
  position: relative;
  z-index: 99;
  font-size: 6.6666vw;
  padding: 0 0 3vw;
  margin-bottom: 26vw;
  z-index: 11;
}

@media only screen and (min-width: 1024px) {
  #firstView .mainTxt {
    position: absolute;
    bottom: 0;
    background-size: cover;
    font-size: 2.5875vw;
    padding: 2.3vw 0 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1400px) {
  #firstView .mainTxt {
    font-size: 35px;
    padding: 30px 0 0;
  }

}

#firstView.sale .mainTxt {
  margin: 10vw 0 6vw;
}
@media only screen and (min-width: 1024px) {
  #firstView.sale .mainTxt {
    margin: 10vw 0 1vw;
  }
}

#firstView .mainTxt .big {
  font-size: 1.5em;
}

@media only screen and (min-width: 1024px) {
  #firstView.sale .mainTxt .big {
    font-size: 0.8em;
  }
}

#firstView .mainTxt p::after {
  content: "";
  display: block;
  width: 100%;
  height: 4vw;
  background: url(../images/top/deco_element_release.png) no-repeat;
  background-size: contain;
  background-position: center;
  /* filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); */
  margin: 10px 0 20px;
}

@media only screen and (min-width: 1024px) {
  #firstView .mainTxt p::after {
    height: 2vw;
  }
}

#firstView.sale .mainTxt p::after {
  content: none;
}

#firstView.sale .mainTxt .sale_txt {
  margin-top: 0.2em;
  line-height: 1.2;
}

#firstView.sale .mainTxt .sale_txt span {
  width: 100%;
  font-family: "source-han-serif-japanese", serif;
  text-align: center;
  transform: translate(-40%, -50%);
  background: -moz-linear-gradient(top, #ffffff 30%, #ffec70 70%);
  background: -webkit-linear-gradient(top, #ffffff 30%, #ffec70 70%);
  background: linear-gradient(to bottom, #ffffff 30%, #ffec70 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-size: 1em;
}
@media only screen and (min-width: 1024px) {
  #firstView.sale .mainTxt .sale_txt span {
  }
}
@media only screen and (min-width: 1400px) {
  #firstView.sale .mainTxt .sale_txt span {
    font-size: 30px;
  }
}

#firstView.sale .mainTxt .btn_hex{
  width: 80%;
  height: 20vw;
  font-size: 8vw;
  letter-spacing: normal;
  margin: 4vw auto;
}
@media only screen and (min-width: 1024px) {
  #firstView.sale .mainTxt .btn_hex{
    width: 20vw;
    height: 4vw;
    font-size: 1.6vw;
    margin: 1vw auto;
  }

  #firstView.sale.mv_l .mainTxt .btn_hex{
    width: 15vw;
    height: 3vw;
    font-size: 20px;
  }

}

#firstView.sale .mainTxt .btn_hex span {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#firstView .firefly {
  position: absolute;
  top: 0;
  background-color: #9ee8ff;
  box-shadow: 0px 0px 17px 2px #0d85d9, 0px 0px 17px 2px #0d85d9, 0px 0px 34px 4px #0d85d9, 0px 0px 34px 4px #0d85d9;
  border-radius: 50%;
  filter: blur(1.5px);
  width: 1.2vw;
  height: 1.2vw;
}

@media only screen and (min-width: 1024px) {
  #firstView .firefly {
    width: 0.7vw;
    height: 0.7vw;
  }
}

/*bnr*/
#firstView .fvBnr {
  width: 87.467%;
  margin: 15% auto 10%;
  position: relative;
  z-index: 99;
}

@media only screen and (min-width: 1024px) {
  #firstView .fvBnr {
    margin: 0 1vw 0 auto;
  }
}

@media only screen and (min-width: 1600px) {
  #firstView .fvBnr {
    width: 310px;
  }
}

#firstView .fvBnr a {
  display: block;
  transition: box-shadow .5s ease-in-out;
  padding-right: 0;
}

@media only screen and (min-width: 1024px) {
  #firstView .fvBnr a:hover {
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }
}

@media only screen and (min-width: 1600px) {
  #firstView .fvBnr a {
    padding-right: 0;
  }
}

#firstView .fvBnr .bnrListItem {
  position: relative;
  border: 1px solid #fff;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
}

#firstView .fvBnr .bnrListItem:not(:last-child) {
  margin-bottom: 4vw;
}

@media only screen and (min-width: 1024px) {
  #firstView .fvBnr .bnrListItem:not(:last-child) {
    margin-bottom: 1vw;
  }
}

#firstView .fvBnr .bnrListItem .bnrBox {
  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: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
}

#firstView .fvBnr .bnrThumb {
  line-height: 0;
  width: 100%;
}

#firstView .fvBnr .bnrTxt {
  font-size: 2.9vw;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  padding: 1em;
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  #firstView .fvBnr .bnrTxt {
    font-size: 0.9vw;
  }
}

@media only screen and (min-width: 1600px) {
  #firstView .fvBnr .bnrTxt {
    font-size: 15px;
  }
}

#firstView .fvBnr .bnrTxt .date {
  color: #ffd200;
  display: block;
  font-size: 2.8vw;
}

@media only screen and (min-width: 1024px) {
  #firstView .fvBnr .bnrTxt .date {
    font-size: 0.88vw;
  }
}

@media only screen and (min-width: 1600px) {
  #firstView .fvBnr .bnrTxt .date {
    font-size: 14px;
  }
}

#firstView .logo.is-anim[data-anim="image"] {
  transition: border 0.2s ease-in, box-shadow 0.4s ease-in, opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#firstView .lead.is-anim[data-anim="elem"] {
  transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}

/*NEWS*/
#news {
  width: 100%;
  background: url(../images/common/bg_news.jpg) repeat-y;
  background-size: 100%;
}

@media only screen and (min-width: 1024px) {
  #news {
    background-size: cover;
  }
}

#news .news_inner {
  display: block;
  width: 100%;
  margin: 6vw 0 0 auto;
  position: relative;
}

@media only screen and (min-width: 1024px) {
  #news .news_inner {
    margin: 5vw 0 0 auto;
  }
}

@media only screen and (min-width: 1024px) {
  .swiper-wrapper.noswipe {
    justify-content: center;
    margin: 0 auto;
  }
}

#news .news_list_slider figure {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#news .news_list_slider figure img {
  vertical-align: bottom;
  transition: transform 0.5s ease;
}

@media only screen and (min-width: 1024px) {
  #news .news_list_slider figure:hover img {
    -webkit-filter: brightness(110%);
    filter: brightness(110%);
    transform: scale(1.02);
  }
}

#news .news_list_slider figure figcaption {
  padding: 1em 1em 4em;
  color: #000;
  font-size: 3.02666vw;
  background: url(../images/common/deco1_down.png) no-repeat, url(../images/common/bg_news_panel.jpg) no-repeat;
  background-position: 1em 90%, top left;
  background-size: 60% auto, cover;
  flex: 1 0 auto;
}

@media only screen and (min-width: 1024px) {
  #news .news_list_slider figure figcaption {
    font-size: 1.01171875vw;
  }
}

@media only screen and (min-width: 1400px) {
  #news .news_list_slider figure figcaption {
    font-size: 15px;
  }
}

#news .news_list_slider figure figcaption .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

#news .news_list_slider figure figcaption .date {
  color: #7e7a75;
  font-weight: bold;
  font-size: 80%;
}

#news .news_list_slider figure figcaption .text {
  color: #452505;
}

#news .movie {
  width: 90%;
  margin: 13vw auto 0;
  position: relative;
}

@media only screen and (min-width: 1024px) {
  #news .movie {
    width: 60%;
    margin: 4.5vw auto 0;
  }
}

#news .movie .trailer .trailerBox {
  border: 2px solid rgba(227, 202, 104, 0.8);
}

#news .movie .trailer .trailerBox a img {
  display: block;
}

#news .movie .trailer .trailerBox a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  transition: background 0.3s;
}

#news .movie .trailer .trailerBox a:hover::before {
  background: rgba(0,0,0,0.2);
}

#news .movie .trailer .trailerBox a::after {
  content: "";
  display: inline-block;
  background: url(../images/common/icon_play_white.png) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.483em;
  height: 3.483em;
  filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 5px #000);
  z-index: 2;
}

@media only screen and (min-width: 1024px) {
  #news .movie .trailer .trailerBox a::after {
    width: 6em;
    height: 6em;
    max-width: 120px;
    max-height: 120px;
  }
}

#news .movie .movie_name {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 10px #000, 0 0 20px #000;
  font-size: 0.9em;
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  text-align: center;
  z-index: 2;
}

@media only screen and (min-width: 1024px) {
  #news .movie .movie_name {
    top: 70%;
    font-size: 1.2em;
  }
}

#news .bnr_st {
  display: none;
}

@media only screen and (min-width: 1024px) {
  #news .bnr_st {
    display: block;
    width: 60%;
    max-width: 1920px;
    margin: 4vw auto 0;
    border: 2px solid rgba(227, 202, 104, 0.8);
    box-sizing: border-box;
  }
  #news .bnr_st a:hover {
    display: block;
    box-shadow: 0px 0px 20px 0 #9ee8ff;
  }
  #news .bnr_st img {
    display: block;
  }
}

#news .pickup {
  width: 92%;
  margin: 6vw auto 0;
  padding-bottom: 4vw;
}

@media only screen and (min-width: 1024px) {
  #news .pickup {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 2vw;
    display: flex;
    justify-content: center;
  }
}

#news .pickup .bnr {
  display: block;
  border: 1px solid rgba(227, 202, 104, 0.3);
  background: #0f0e0d;
  width: 100%;
  padding: 2vw;
}

#news .pickup .bnr {
  margin-bottom: 2vw;
}

@media only screen and (min-width: 1024px) {
  #news .pickup .bnr {
    width: calc(94 / 3);
    margin: 1%;
    padding: 0.7vw;
  }

  #news .pickup .bnr:hover {
    filter: brightness(110%);
  }
}

#news .pickup .bnr figure {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#news .pickup .bnr figure img {
  width: 45%;
  margin-right: 4vw;
}

@media screen and (min-width: 1024px) {
  #news .pickup .bnr figure img {
    margin-right: 1vw;
  }
}

#news .pickup .bnr figure figcaption {
  width: 55%;
}

#news .pickup .bnr figure figcaption .ttl {
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  margin-bottom: 0.5vw;
  font-size: 3.5vw;
}

@media screen and (min-width: 1024px) {
  #news .pickup .bnr figure figcaption .ttl {
    font-size: 1.2vw;
  }
}

#news .pickup .bnr figure figcaption .info {
  margin-top: auto;
  font-size: 3vw;
}

@media screen and (min-width: 1024px) {
  #news .pickup .bnr figure figcaption .info {
    font-size: 1vw;
  }
}

#news .pickup .bnr figure figcaption .info .date {
  color: #e3ca68;
  font-size: 3vw;
}

@media screen and (min-width: 1024px) {
  #news .pickup .bnr figure figcaption .info .date {
    font-size: 1vw;
  }
}

/* ゲーム情報　*/
#about {
  position: relative;
  overflow: hidden;
}

#about .bg_movie {
  position: absolute;
  top: 0;
  left: 50%;
  padding-top: 56.6%;
  transform: translateX(-50%);
  width: 450%;
  height: 100%;
  z-index: 1;
  filter: brightness(0.6);
}

@media only screen and (min-width: 1024px) {
  #about .bg_movie {
    position: absolute;
    top: 0;
    padding-top: 56.6%;
    height: 100%;
  }
}

#about .bg_movie .yt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#about .bg_movie .yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#about .about_inner {
  width: 87.467%;
  margin: 0 auto;
  padding: 14vw 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 11;
}

@media only screen and (min-width: 1024px) {
  #about .about_inner {
    padding: 6vw 0;
    flex-direction: row;
    max-width: 1366px;
  }
}

#about .logo {
  width: 100%;
  margin-bottom: 1em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 1024px) {
  #about .logo {
    width: 35%;
    margin-right: auto;
  }
}

#about .text {
  width: 100%;
  /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8),-2px -2px 5px rgba(0, 0, 0, 0.8),2px -2px 5px rgba(0, 0, 0, 0.8),2px -2px 5px rgba(0, 0, 0, 0.8),-2px 2px 5px rgba(0, 0, 0, 0.8); */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

@media only screen and (min-width: 1024px) {
  #about .text {
    width: 60%;
  }
}

#about .text h3 {
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 4vw;
}

@media screen and (min-width: 1024px) {
  #about .text h3 {
    font-size: 2.3479vw;
    letter-spacing: 0.1em;
  }
}

@media screen and (min-width: 1400px) {
  #about .text h3 {
    font-size: 35px;
  }
}

#about .text h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: bold;
  font-size: 6vw;
  letter-spacing: 0.2em;
  margin: 1em 0;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  #about .text h4 {
    font-size: 4vw;
  }
}

@media screen and (min-width: 1400px) {
  #about .text h4 {
    font-size: 45px;
  }
}

#about .text h4::after {
  content: "";
  width: 100%;
  height: 3vw;
  display: block;
  background: url(../images/common/deco_element_wht.png) no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0.5vw auto;
}

@media screen and (min-width: 1024px) {
  #about .text h4::after {
    height: 1.5vw;
    max-height: 24px;
  }
}

#about .text p {
  font-size: 3.02666vw;
  margin-bottom: 1em;
  line-height: 2;
}

@media screen and (min-width: 1024px) {
  #about .text p {
    font-size: 1.171875vw;
  }
}

@media screen and (min-width: 1300px) {
  #about .text p {
    font-size: 18px;
  }
}

#about .text .lead {
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  font-size: 4.5vw;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  #about .text .lead {
    font-size: 1.25vw;
  }
}

/* ゲーム情報　*/
#game_info {
  padding-bottom: 4vw;
  z-index: 1;
}

@media screen and (min-width: 1024px) {
  #game_info {
    /* background-image: url(../images/common/bg_game.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; */
  }
}

#game_info .game_info_block {
  min-height: 45vw;
  margin: 0 auto;
  padding: 8vw 0 0;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block {
    max-width: 1600px;
    margin: 2vw auto;
    align-items: flex-start;
    padding: 6.44vw 0 0;
    flex-direction: row;
  }
}

#game_info .game_info_block.chara {
  flex-direction: column-reverse;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.chara {
    flex-direction: row;
    justify-content: center;
    margin-top: -3vw;
  }
}

#game_info .game_info_block.monster {
  padding: 5vw 0 0;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.monster {
    justify-content: flex-start;
    padding: 0;
  }
}

#game_info .game_info_block.field {
  margin-bottom: 0;
  padding: 14vw 0;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.field {
    justify-content: flex-end;
    padding: 0;
  }
}

#game_info .game_info_block .caption {
  width: 95%;
  padding: 8vw 0;
  background: url(../images/common/bg_game_caption.jpg) no-repeat;
  background-size: cover;
  position: relative;
  box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.15);
  ;
  margin-top: -6vw;
  z-index: 100;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption {
    width: 80%;
    padding: 3em 0;
    width: 34%;
  }
}

#game_info .game_info_block .caption::before {
  content: "";
  width: 100%;
  height: 6vw;
  display: block;
  position: absolute;
  top: 0.5vw;
  left: 0;
  background: url(../images/common/deco1_up.png) no-repeat;
  background-position: 98% top;
  background-size: contain;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption::before {
    height: 2vw;
  }
}

#game_info .game_info_block .caption::after {
  content: "";
  width: 100%;
  height: 6vw;
  display: block;
  position: absolute;
  bottom: 0.5vw;
  left: 0;
  background: url(../images/common/deco1_down.png) no-repeat;
  background-position: 2% top;
  background-size: contain;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption::after {
    height: 2vw;
  }
}

#game_info .game_info_block.chara .caption {}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.chara .caption[data-anim="elem"] {
    transform: translate(6vw, 15vw);
  }

  #game_info .game_info_block.chara .caption.is-anim[data-anim="elem"] {
    transform: translate(6vw, 10vw);
  }
}

/* @media screen and (min-width: 1024px) {
  #game_info .game_info_block.chara .caption {
    transform: translate(6vw, 10vw);
  }
} */
#game_info .game_info_block.monster .caption {}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.monster .caption {
    position: absolute;
    bottom: 5vw;
    right: 7vw;
  }
}

#game_info .game_info_block.field .caption {}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.field .caption {
    position: absolute;
    top: 40%;
    left: 5vw;
    /* transform: translateY(-30%); */
  }
}

@media screen and (min-width: 1600px) {
  #game_info .game_info_block.field .caption {
    position: absolute;
    top: 50%;
    left: 5vw;
    /* transform: translateY(-40%); */
  }
}

#game_info .game_info_block .caption h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #452505;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#game_info .game_info_block .caption h3 .ja {
  color: #452505;
  font-weight: bold;
  font-size: 3vw;
  font-family: "source-han-serif-japanese", serif;
}

#game_info .game_info_block .caption h3 .en {
  background: -moz-linear-gradient(top, #77440e 30%, #452505 70%);
  background: -webkit-linear-gradient(top, #77440e 30%, #452505 70%);
  background: linear-gradient(to bottom, #77440e 30%, #452505 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 8vw;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption h3 .ja {
    font-size: 1.25vw;
  }

  #game_info .game_info_block .caption h3 .en {
    font-size: 4.166vw;
  }
}

@media screen and (min-width: 1400px) {
  #game_info .game_info_block .caption h3 .ja {
    font-size: 20px;
  }

  #game_info .game_info_block .caption h3 .en {
    font-size: 62px;
  }
}

#game_info .game_info_block .caption h3::after {
  content: "";
  width: 100%;
  height: 3vw;
  display: block;
  background: url(../images/common/deco_element.png) no-repeat;
  background-position: center;
  background-size: contain;
  margin: 2vw 0;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption h3::after {
    height: 1.5vw;
    margin: 1vw 0;
  }
}

#game_info .game_info_block .caption p {
  font-family: "source-han-serif-japanese", serif;
  font-weight: bold;
  color: #452505;
  font-size: 3vw;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block .caption p {
    font-size: 1.25vw;
  }
}

#game_info .game_info_block .caption .btn_hex {
  margin-bottom: 0;
  background: url(../images/common/deco_btn_pattern2.png), url(../images/common/bg_game_btn.png);
  background-size: contain, cover;
  background-repeat: no-repeat;
  margin: 1.5vw 0 0;
  transition: all 0.5s ease-out;
}

#game_info .game_info_block .caption .btn_hex span {
  color: #e3ca68;
}

#game_info .game_info_block .caption .btn_wrap .btn_hex:hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}

#game_info .game_info_block.chara .pic {
  position: relative;
  z-index: 99;
}

#game_info .game_info_block.field .pic {
  width: 100%;
}

#game_info .game_info_block.monster .pic {
  width: 100%;
  margin-top: 0;
}

@media screen and (min-width: 1024px) {
  #game_info .game_info_block.chara .pic {
    width: 58%;
    margin-top: -15vw;
  }

  #game_info .game_info_block.monster .pic {
    width: 80%;
    margin-top: -5vw;
  }

  #game_info .game_info_block.field .pic {
    width: 80%;
  }
}

/*product*/
#product {
  width: 100%;
  background: url(../images/common/bg_news.jpg) repeat-y;
  background-size: 100%;
  padding-bottom: 3vw;
  z-index: 1;
}

@media only screen and (min-width: 1024px) {
  #product {
    background-size: cover;
  }
}

#product .product_area {
  padding: 10vw 0 0;
}

@media only screen and (min-width: 1024px) {
  #product .product_area {
    padding: 5vw 0 0;
  }
}

#product h3,
#product .platform_select h4 {
  filter: unset;
}

#product h3::after {
  background: url(../images/common/deco_element_wht.png) no-repeat;
  background-position: center;
  background-size: contain;
}

#product h3 span,
#product .platform_select h4 span {
  background: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #fff;
}

#product .product_area .note_box {
  color: #fff;
  background: unset;
  border: unset;
}

#product .featured {
  background: url(../images/common/bg_game.jpg) no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#product .lineup_nav li a {
  background: url(../images/common/deco_btn_pattern.png), url(../images/common/bg_btn.png);
  background-size: contain, cover;
  background-repeat: no-repeat;
}

#product .lineup_nav li a span {
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#product .lineup_nav li a span::after {
  background: url(../images/common/icon_btn_arrow_sdw.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 6vw;
  height: 6vw;
  top: 50%;
  right: 4%;
  transform: translateY(-50%) rotate(90deg);
}

@media only screen and (min-width: 1024px) {
  #product .lineup_nav li a span::after {
    width: min(2vw, 45px);
    height: min(2vw, 45px);
    right: 7%;
  }
}

#product .product_area .platform_select .colbox a.ps4 {
  background: url(../images/product/btn_off_ps4_top.png) no-repeat center center/100% auto;
}

#product .product_area .platform_select .colbox a.switch {
  background: url(../images/product/btn_off_switch_top.png) no-repeat center center/100% auto;
}

#product .product_area .platform_select .colbox a.steam {
  background: url(../images/product/btn_off_steam_top.png) no-repeat center center/100% auto;
}

/* info */
#info {
  width: 87.467%;
  margin: 0 auto;
  padding: 14vw 0;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 1024px) {
  #info {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 76.953%;
    padding: 6.641vw 0;
  }
}

#info .spec {
  margin-bottom: 13vw;
}

@media only screen and (min-width: 1024px) {
  #info .spec {
    width: 57%;
    margin: 0;
  }
}

#info .spec .specBox {
  position: relative;
}

#info .spec .specBox .ttl {
  font-weight: bold;
  font-size: 4.4vw;
  margin-bottom: 3vw;
}

@media only screen and (min-width: 1024px) {
  #info .spec .specBox .ttl {
    font-size: 1.675vw;
    margin-bottom: 1.563vw;
  }
}

#info .spec .specBox .specList {
  font-size: 3.02666vw;
  font-weight: 400;
  line-height: 2.2;
}

#info .spec .specBox .specList li {}

@media only screen and (min-width: 1024px) {
  #info .spec .specBox .specList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 1.171875vw;
    font-weight: 300;
    line-height: 1.8;
  }

  #info .spec .specBox .specList li {
    margin-right: 2em;
  }
}

#info .spec .specBox .rating {
  position: absolute;
  bottom: 0;
  right: 3vw;
  width: 58px;
}

#info .spec .specBox .rating img {
  vertical-align: bottom;
}

@media only screen and (min-width: 1024px) {
  #info .spec .specBox .rating {
    width: 9.830508%;
    max-width: 58px;
  }
}

#info .sns {}

@media only screen and (min-width: 1024px) {
  #info .sns {
    width: 32%;
  }
}

#info .sns .snsListTtl {
  font-size: 4.6666vw;
  margin-bottom: 3.735vw;
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  #info .sns .snsListTtl {
    font-size: 1.25vw;
    margin-bottom: 2vw;
  }
}

#info .sns .snsList a {
  transition: opacity .4s ease-in-out;
}

@media only screen and (min-width: 1024px) {
  .snsList a:hover {
    opacity: .8;
  }
}

#info .sns .snsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#info .sns .snsList li {
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
}

#info .sns .snsList li:not(:last-child) {
  margin-right: 1.5em;
}

#info .sns .snsList .ic {
  display: block;
  height: 3em;
  position: relative;
  width: 3em;
}

#info .sns .snsList .ic_yt {
  background: url("../images/common/icon_yt.png") center no-repeat;
  background-size: contain;
}

#info .sns .snsList .ic_tw {
  background: url("../images/common/icon_x.png") center no-repeat;
  background-size: contain;
}

#info .sns .snsList .ic_fb {
  background: url("../images/common/icon_fb.png") center no-repeat;
  background-size: contain;
}

#info .sns .snsList .ic_insta {
  background: url("../images/common/icon_insta.png") center no-repeat;
  background-size: contain;
}

#info .sns .snsList .ic_line {
  background: url("../images/common/icon_line.png") center no-repeat;
  background-size: contain;
}

/*FAQ*/
#info .faq {
  width: 100%;
  margin: 12vw 0 0;
}

@media only screen and (min-width: 1024px) {
  #info .faq {
    margin: 2vw 0 0;
  }
}

#info .faq h4 {
  font-size: 4.6666vw;
  text-align: center;
  padding-top: 0.5vw;
}

@media only screen and (min-width: 1024px) {
  #info .faq h4 {
    font-size: 1.25vw;
    padding-top: 0.5vw;
  }
}

@media only screen and (min-width: 1600px) {
  #info .faq h4 {
    font-size: 22px;
  }
}

#info .faq ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

@media only screen and (min-width: 1024px) {
  #info .faq ul {
    justify-content: flex-start;
  }
}

#info .faq li{
  width: auto;
  margin: 0 2%;
}

#info .faq > ul > li:last-of-type {
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  #info .faq li {
    width: auto;
    margin:0 3% 0 0;
  }

  #info .faq > ul > li:last-of-type {
    width: inherit;
  }
}

#info .faq li a {
  display: table;
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0.5em 0 0;
  color: #fff;
  font-size: 4vw;
  transition: all 0.5s ease-out;
}

@media only screen and (min-width: 1024px) {
  #info .faq li a {
    font-size: 1.2vw;
    border-bottom: 1px solid #fff;
  }

  #info .faq li a:hover {
    color: #e3ca68;
    border-bottom: none;
  }
}

@media only screen and (min-width: 1600px) {
  #info .faq li a {
    font-size: 20px;
  }
}

#info .faq li a span {
  position: relative;
}

#info .faq li:not(:last-of-type) a span:after {
  content: "";
  display: inline-block;
  margin-left: 1em;
  width: 0.8em;
  height: 0.8em;
  background: url(../images/common/icon_btn_arrow_wht.png) no-repeat;
  background-size: contain;
  transition: all 0.5s ease-out;
}

@media only screen and (min-width: 1024px) {
  #info .faq li:not(:last-of-type) a:hover span:after {
    background: url(../images/common/icon_btn_arrow.png) no-repeat;
    background-size: contain;
  }
}

/*WEBマニュアル*/
#info .manual {
  width: 100%;
  margin: 8vw 0 0;
}

@media only screen and (min-width: 1024px) {
  #info .manual {
    width: 25vw;
    margin: 0 4vw;
  }
}

#info .manual ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#info .manual li {
  width: 100%;
  margin-bottom: 4%;
}

@media only screen and (min-width: 1024px) {
  #info .manual li {
    margin: 1%;
  }
}

#info .manual li a {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  padding: 1em 2em;
  border: 1px solid #fff;
  color: #fff;
  font-size: 4vw;
  transition: all 0.5s ease-out;
}

@media only screen and (min-width: 1024px) {
  #info .manual li a {
    font-size: 1.2vw;
    padding: 0.5em 2em;
  }

  #info .manual li a:hover {
    color: #e3ca68;
    border: 1px solid #e3ca68;
  }
}

@media only screen and (min-width: 1600px) {
  #info .manual li a {
    font-size: 20px;
  }
}

#info .manual li a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2%;
  width: 0.8em;
  height: 0.8em;
  transform: translateY(-50%);
  background: url(../images/common/icon_btn_arrow_wht.png) no-repeat;
  background-size: contain;
  transition: all 0.5s ease-out;
}

@media only screen and (min-width: 1024px) {
  #info .manual li a:hover:after {
    background: url(../images/common/icon_btn_arrow.png) no-repeat;
    background-size: contain;
  }
}

#sale_medal_note {
  margin: 6vw auto 0;
}

@media only screen and (min-width: 1024px) {
  #sale_medal_note {
    text-align: left;
    margin: 2vw 0 0;
  }
}

#lang {
  position: relative;
  width: 100%;
  display: flex;
  margin: 0 0 1vw;
  justify-content: center;
}

/* link */
#link {
  border-bottom: 1px solid #797979;
}

#link .titleLink {
  text-align: center;
}

#link .titleLink a {
  display: block;
  transition: opacity .4s ease-in-out;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink a {
    width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1024px) {
  #link .titleLink a:hover {
    opacity: .8;
  }
}

#link .titleLink .contsInner {
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid #797979;
  border-bottom: 2px solid #797979;
  background: url("../images/bg_link_sp.jpg") center top no-repeat;
  background-size: 100% auto;
  padding: 8vw 0 2vw;
  margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .contsInner {
    border: 1px solid #797979;
    background: url("../images/bg_link.jpg") center top no-repeat;
    background-size: cover;
    padding: 10vw 0;
  }
}

#link .titleLink .contsBox {}

@media only screen and (min-width: 1024px) {
  #link .titleLink .contsBox {
    width: 30.3125%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15.5%;
  }
}

@media only screen and (min-width: 1024px) {
  #link .titleLink h2 {
    /*position: relative;*/
    line-height: 1.2;
    margin-bottom: 1vw;
  }

  #link .titleLink h2 small {
    /*position: absolute;
		bottom: 0.7vw;
		right: 4vw;
		text-shadow: 0px 0px 15px #000,0px 0px 15px #000;*/
    display: block;
    font-size: 0.7vw;
    color: #d9d9d9;
  }
}

#link .titleLink h2 img {
  width: 52.533333%;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink h2 img {
    width: 70%;
  }
}

#link .titleLink p {
  text-shadow: 0px 0px 15px #000, 0px 0px 15px #000, 0px 0px 15px #000, 0px 0px 15px #000;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink p {
    text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;
  }
}

#link .titleLink .contsBox .txtArea {
  width: 80%;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .contsBox .txtArea {
    width: 100%;
  }
}

#link .titleLink .contsBox .lead {
  font-size: 3.3333vw;
  font-weight: 500;
  margin-top: 15.5vw;
  line-height: 1.4;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .contsBox .lead {
    font-size: 1vw;
    margin-top: 0;
    line-height: 1.3;
  }
}

#link .titleLink .contsBox .date {
  font-family: "source-han-serif-japanese", serif;
  font-weight: 500;
  line-height: 1.2;
  font-size: 7.86666vw;
}

#link .titleLink .contsBox .date small {
  font-size: 55%;
}

#link .titleLink .contsBox .date small span {
  font-size: 4.44405vw;
}

#link .titleLink .contsBox .date span {
  font-size: 70%;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .contsBox .date {
    font-size: 2.50859375vw;
  }

  #link .titleLink .contsBox .date small span {
    font-size: 1.69875vw;
  }
}

#link .titleLink .note {
  font-size: 3.2vw;
  font-weight: 500;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .note {
    font-size: 1.40625vw;
  }
}

#link .titleLink .platform {
  position: absolute;
  top: 0;
  left: 0;
  width: 15.06666%;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .platform {
    left: auto;
    right: 0;
    width: 7.96875%;
  }
}

#link .titleLink .noteMedal {
  border-radius: 50%;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  position: absolute;
  width: 21.0666vw;
  height: 21.0666vw;
  bottom: 2vw;
  right: 3vw;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .noteMedal {
    width: 10.078125vw;
    height: 10.078125vw;
    bottom: 1vw;
    right: 1vw;
  }
}

#link .titleLink .noteMedal p {
  text-shadow: none;
  position: absolute;
  display: block;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
  width: 80%;
  font-weight: 500;
  line-height: 1.2;
  font-size: 2.533333vw;
}

@media only screen and (min-width: 1024px) {
  #link .titleLink .noteMedal p {
    font-size: 1.053125vw;
  }
}

#link .fsLink {
  text-align: center;
  margin-top: 6vw;
}

@media only screen and (min-width: 1024px) {
  #link .fsLink {
    text-align: center;
    margin-top: 2vw;
  }
}

#link .fsLink a {
  display: block;
  transition: opacity .4s ease-in-out;
}

@media only screen and (min-width: 1024px) {
  #link .fsLink a {
    width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1024px) {
  #link .fsLink a:hover {
    opacity: .8;
  }
}

#link .fsLink .contsInner {
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid #797979;
  border-bottom: 2px solid #797979;
  margin: 0 auto;
}

#link .fsLink .contsInner img {
  vertical-align: bottom;
}

@media only screen and (min-width: 1024px) {
  #link .fsLink .contsInner {
    border: 1px solid #797979;
  }
}

#link .col3Link {
  text-align: center;
  margin-top: 6vw;
}

@media only screen and (min-width: 1024px) {
  #link .col3Link {
    width: 80%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 1.5vw auto 0;
  }
}

#link .col3Link a {
  width: 100%;
  display: block;
  transition: opacity .4s ease-in-out;
  margin-bottom: 6vw;
}

@media only screen and (min-width: 1024px) {
  #link .col3Link a {
    width: 32%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  #link .col3Link a:hover {
    opacity: .8;
  }
}

#link .col3Link .contsInner {
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid #797979;
  border-bottom: 2px solid #797979;
  margin: 0 auto;
}

#link .col3Link .contsInner img {
  vertical-align: bottom;
}

@media only screen and (min-width: 1024px) {
  #link .col3Link .contsInner {
    border: 1px solid #797979;
  }
}


#link .mhstLink {
  width: 92%;
  margin: 0 auto;
  padding: 7vw 0;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink {
    width: 78.953%;
    padding: 2.345vw 0;
  }
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox {
    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;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

#link .mhstLink .linkBox .title {
  margin-bottom: 3vw;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .title {
    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;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 42%;
    margin-bottom: 0;
  }
}

#link .mhstLink .linkBox .title .logo {
  width: 50%;
  margin: 0 auto 1vw;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .title .logo {
    width: 56.3679245%;
    margin: 0;
  }
}

#link .mhstLink .linkBox .title .txt {
  font-weight: 500;
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .title .txt {
    font-size: 1.475vw;
  }
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn {
    width: 56%;
  }
}

#link .mhstLink .linkBox .storeBtn ul {
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li {
    width: 46%;
    margin: 0 2%;
  }
}

#link .mhstLink .linkBox .storeBtn ul li+li {
  margin-top: 4vw;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li+li {
    margin-top: 0;
  }
}

#link .mhstLink .linkBox .storeBtn ul li.ds {
  background: -moz-linear-gradient(top, #121f2f, #000);
  background: -webkit-linear-gradient(top, #121f2f, #000);
  background: linear-gradient(to bottom, #121f2f, #000);
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li.sale.ds {}
}

#link .mhstLink .linkBox .storeBtn ul li.app {
  background: -moz-linear-gradient(top, #230606, #000);
  background: -webkit-linear-gradient(top, #230606, #000);
  background: linear-gradient(to bottom, #230606, #000);
}

#link .mhstLink .linkBox .storeBtn ul li a {
  display: block;
  position: relative;
  border: 1px solid #808080;
  box-sizing: border-box;
  padding: 3vw 2vw;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li a {
    transition: border .4s ease-in-out;
    padding: 1vw 1vw 1.2vw 1vw;
  }

  #link .mhstLink .linkBox .storeBtn ul li.sale a {
    padding: 1vw 1vw 1.2vw 0;
  }

  #link .mhstLink .linkBox .storeBtn ul li a:hover {
    border: 1px solid #fff;
  }
}

#link .mhstLink .linkBox .storeBtn ul li a .txtBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

#link .mhstLink .linkBox .storeBtn ul li a .txtBox::after {
  content: "";
  display: inline-block;
  background-image: url("../images/common/icon_arrow.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.937em;
  height: 1.437em;
}

#link .mhstLink .linkBox .storeBtn ul li a .platform {
  font-weight: 500;
  width: 80%;
  line-height: 1.35;
  margin: 0 0 0.4em;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li a .platform {
    font-size: 1.203125vw;
  }
}

#link .mhstLink .linkBox .storeBtn ul li a .buynow {
  color: #ffd200;
  width: 80%;
  font-weight: 500;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li a .buynow {
    font-size: 1.203125vw;
  }
}

#link .mhstLink .linkBox .storeBtn ul li.sale a .buynow {
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 2em;
  width: 80%;
  color: #fff;
  font-weight: 300;
  padding: 1vw;
  margin-top: 1vw;
}

@media only screen and (min-width: 1024px) {
  #link .mhstLink .linkBox .storeBtn ul li.sale a .buynow {
    padding: 0.5vw;
    margin-top: 0.7vw;
    font-size: 1.06375vw;
  }
}

#link .mhstLink .linkBox .storeBtn ul li.sale a .buynow span {
  color: #ffd200;
  font-weight: 500;
}

#link .bnrLink {
  border-top: 1px solid #797979;
}

#link .bnrLink .inner {
  width: 92%;
  margin: 0 auto;
  padding: 7vw 0;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink .inner {
    width: 80%;
    padding: 2.345vw 0;
    display: flex;
    justify-content: space-between;
  }
}

#link .bnrLink .inner .cp_bnr {
  width: 100%;
  margin-bottom: 4%;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink .inner .cp_bnr {
    width: 52%;
    margin-bottom: 0;
  }
}

#link .bnrLink .inner .cp_bnr a {
  display: block;
  border: 1px solid #797979;
  vertical-align: middle;
  transition: opacity .4s ease-in-out;
}

#link .bnrLink .inner .cp_bnr a:hover {
  opacity: 0.8;
}

#link .bnrLink .inner .cp_bnr a img {
  vertical-align: middle;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul {
    width: 44%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #link .bnrLink.dfrow ul {
    width: 90%;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
}

#link .bnrLink ul li+li {
  margin-top: 4vw;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul li+li {
    margin-top: 0;
    margin-bottom: 0;
  }

  #link .bnrLink ul li {
    width: 100%;
    margin: 0 0 3%;
  }

  #link .bnrLink.dfrow ul li {
    width: 48%;
    margin: 0;
  }

  #link .bnrLink ul li:nth-child(n+3) {
    margin-top: 1.5vw;
  }
}

#link .bnrLink ul li a {
  display: block;
  position: relative;
  border: 1px solid #808080;
  box-sizing: border-box;
  padding: 2.2vw 4vw;
  height: 100%;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul li a {
    transition: border .4s ease-in-out;
    padding: 0.7vw 1.5vw 0.7vw 3.5vw;
  }

  #link .bnrLink ul li a:hover {
    border: 1px solid #fff;
  }
}

#link .bnrLink ul li .linkBox {
  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;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

#link .bnrLink ul li .linkBox::after {
  content: "";
  display: block;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  width: 2vw;
  height: 2vw;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul li .linkBox::after {
    width: 0.8vw;
    height: 0.8vw;
  }
}

#link .bnrLink ul li .logo {
  width: 14%;
}

#link .bnrLink ul li .logo img {
  vertical-align: bottom;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul li .logo {
    width: 17.124%;
  }
}

#link .bnrLink ul li .label {
  line-height: 1.3;
  width: 80%;
  font-size: 2.9vw;
}

@media only screen and (min-width: 1024px) {
  #link .bnrLink ul li .label {
    font-size: 0.89609375vw;
    width: 78%;
  }
}