@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :beta-test_shared.css
 style info :ペータテストの共通のスタイル
=================================================================== */
@media screen and (min-width: 768px) {
  header .inner .rBox .langBox ul {
    width: 92px;
  }
}
@media screen and (max-width: 767px) {
  header .inner .rBox .langBox ul {
    width: 22vw;
  }
}
.jpEnOnly header .inner .rBox .langBox ul li:nth-of-type(n + 2) {
  display: none;
}

.contentArea {
  color: #000;
  font-weight: bold;
  position: relative;
}
@media screen and (min-width: 768px) {
  .contentArea {
    background: url(../img/beta-test/bg_pc.jpg) no-repeat center top/cover;
    background-attachment: fixed;
    font-size: clamp(16px, 1.6vw, 18px);
    padding: 20px 0 0;
  }
}
@media screen and (max-width: 767px) {
  .contentArea {
    padding: 4vw 0 0;
  }
}
.contentArea:before {
  display: none;
}
@media screen and (max-width: 767px) {
  .contentArea:after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../img/beta-test/bg_sp.jpg) no-repeat center top/100%;
  }
}

.product {
  position: relative;
  background: rgba(5, 37, 0, 0.75) url(../img/beta-test/bg_black-stripe.png) repeat 0 0;
}
@media screen and (min-width: 768px) {
  .product {
    padding: 70px 0;
  }
}
@media screen and (max-width: 767px) {
  .product {
    padding: 8vw 0;
  }
}
.product .inner {
  color: #fff;
  margin: 0 auto 2em;
}
@media screen and (min-width: 768px) {
  .product .inner {
    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: flex-start;
    width: min(96%, 1300px);
  }
}
@media screen and (max-width: 767px) {
  .product .inner {
    width: 90%;
  }
}
@media screen and (min-width: 768px) {
  .product .inner dl {
    width: 32%;
  }
}
@media screen and (max-width: 767px) {
  .product .inner dl {
    margin-bottom: 4em;
  }
}
.product .inner dl dt {
  font-weight: 900;
  border-bottom: solid 2px #d9ef06;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .product .inner dl dt {
    font-size: min(1.4vw, 16px);
  }
}
.product .inner dl dt em {
  display: block;
  font-weight: 900;
  color: #d9ef06;
}
@media screen and (min-width: 768px) {
  .product .inner dl dt em {
    font-size: min(1.8vw, 20px);
  }
}
@media screen and (max-width: 767px) {
  .product .inner dl dt em {
    font-size: 4.4vw;
  }
}
.product .inner dl dd {
  text-align: left;
}
.product .inner dl dd table {
  margin-bottom: 1em;
}
.product .inner dl dd table th,
.product .inner dl dd table td {
  font-weight: 700;
  vertical-align: top;
  padding: 0.2em 0;
}
@media screen and (min-width: 768px) {
  .product .inner dl dd table th,
  .product .inner dl dd table td {
    font-size: min(1.4vw, 16px);
  }
}
.product .inner dl dd table th {
  white-space: nowrap;
  vertical-align: top;
}
.product .inner dl dd table td {
  position: relative;
  vertical-align: top;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 0.5em;
  padding-left: 0.5em;
}
.product .inner dl dd table td:before {
  content: "：";
}
.product .inner dl dd table td:nth-of-type(2):before {
  display: none;
}
.product .inner dl dd table td:nth-of-type(2) a {
  text-decoration: underline;
  text-indent: 1em;
}
:lang(en) .product .inner dl dd table td:nth-of-type(2) a, :lang(fr) .product .inner dl dd table td:nth-of-type(2) a, :lang(it) .product .inner dl dd table td:nth-of-type(2) a, :lang(de) .product .inner dl dd table td:nth-of-type(2) a, :lang(es) .product .inner dl dd table td:nth-of-type(2) a, :lang(pt-BR) .product .inner dl dd table td:nth-of-type(2) a, .pt-br .product .inner dl dd table td:nth-of-type(2) a {
  text-indent: 1.5em;
}
.product .inner dl dd table td:nth-of-type(2) a:before {
  display: none;
}
.product .inner dl dd table td.ano {
  margin-left: 1em;
}
:lang(en) .product .inner dl dd table td.ano, :lang(fr) .product .inner dl dd table td.ano, :lang(it) .product .inner dl dd table td.ano, :lang(de) .product .inner dl dd table td.ano, :lang(es) .product .inner dl dd table td.ano, :lang(pt-BR) .product .inner dl dd table td.ano, .pt-br .product .inner dl dd table td.ano {
  margin-left: 1.5em;
}
.product .inner dl dd table td.ano span {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
:lang(en) .product .inner dl dd table td.ano span, :lang(it) .product .inner dl dd table td.ano span, :lang(de) .product .inner dl dd table td.ano span, :lang(es) .product .inner dl dd table td.ano span, :lang(pt-BR) .product .inner dl dd table td.ano span, .pt-br .product .inner dl dd table td.ano span {
  padding-left: 0.5em;
  text-indent: -0.6em;
}
:lang(fr) .product .inner dl dd table td.ano span {
  padding-left: 0.8em;
  text-indent: -0.8em;
}
@media screen and (min-width: 768px) {
  .product .inner dl dd table td.ano span {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .product .inner dl dd table td.ano span {
    font-size: 3vw;
  }
}
.product .inner dl dd .anoTxt {
  color: #999;
  font-weight: 700;
  background: #212121;
  border-radius: 10px;
  padding: 0.8em 1.4em;
}
@media screen and (min-width: 768px) {
  .product .inner dl dd .anoTxt {
    font-size: min(1.2vw, 14px);
  }
}
.product .inner dl dd .anoTxt li {
  padding-left: 1em;
  text-indent: -1em;
}
:lang(en) .product .inner dl dd .anoTxt li, :lang(de) .product .inner dl dd .anoTxt li, :lang(pt-BR) .product .inner dl dd .anoTxt li, .pt-br .product .inner dl dd .anoTxt li {
  padding-left: 0.5em;
  text-indent: -0.5em;
}
:lang(fr) .product .inner dl dd .anoTxt li, :lang(es) .product .inner dl dd .anoTxt li {
  text-indent: -0.8em;
}
.product .inner dl .link a {
  display: inline-block;
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat left center/1em;
  padding-left: 1.6em;
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .product .inner dl .link a {
    font-size: min(1.4vw, 16px);
  }
}
.product .anoBox {
  font-weight: 700;
  margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
  .product .anoBox {
    text-align: left;
    padding: 0 5%;
  }
}
.product .anoBox ul li {
  color: #999;
}
@media screen and (min-width: 768px) {
  .product .anoBox ul li {
    font-size: min(1.2vw, 14px);
  }
}
@media screen and (max-width: 767px) {
  .product .anoBox ul li {
    padding-left: 1em;
    text-indent: -1em;
  }
}
.product .btn {
  display: block;
  border-radius: 100px;
  background: -webkit-gradient(linear, left top, right top, from(#7cff85), to(#eaff00));
  background: linear-gradient(90deg, #7cff85 0%, #eaff00 100%);
  margin: 0 auto 1.5em;
}
@media screen and (min-width: 768px) {
  .product .btn {
    width: 400px;
  }
}
@media screen and (max-width: 767px) {
  .product .btn {
    width: 80%;
  }
}
.product .btn.beta {
  display: none;
}
.product .btn a {
  display: block;
  color: #006836;
  font-weight: 700;
  padding: 1.2em;
}
@media screen and (min-width: 768px) {
  .product .btn a {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  .product .btn a {
    font-size: 4vw;
  }
}

@media screen and (min-width: 768px) {
  footer .innerB {
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 767px) {
  footer .innerB {
    padding: 8vw 0 28vw;
  }
}

.btnFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  border-bottom: solid 10px #ffc000;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.btnFloat .mainBtn {
  position: relative;
}
@media screen and (min-width: 768px) {
  .btnFloat .mainBtn {
    bottom: -10px;
  }
}
.btnFloat .mainBtn a {
  display: block;
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat left 1em center/1em, linear-gradient(60deg, #ff3f3a, #ffc000);
}
@media screen and (min-width: 768px) {
  .btnFloat .mainBtn a {
    border-radius: 4px 4px 0 0;
    height: min(8.6vw, 86px);
    padding: 2px min(4vw, 70px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .btnFloat .mainBtn a {
    padding: 0 2vw 0 4vw;
  }
}
@media screen and (max-width: 767px) {
  .btnFloat .mainBtn a {
    border-radius: 10px 0 0 0;
    height: 14vw;
    padding: 3vw 3vw 3vw 8vw;
  }
}
.btnFloat .mainBtn a img {
  width: auto;
  height: 100%;
}
.btnFloat .subBtn {
  background: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .btnFloat .subBtn {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: min(7.4vw, 74px);
    gap: 0 min(0.6vw, 6px);
    padding: 0 min(1vw, 10px) 0 min(2vw, 30px);
  }
}
@media screen and (max-width: 767px) {
  .btnFloat .subBtn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    height: 20vw;
    padding: 2vw 2vw 0;
  }
}
@media screen and (max-width: 767px) {
  .btnFloat .subBtn.before {
    height: 12vw;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
  }
}
.btnFloat .subBtn li {
  position: relative;
}
.btnFloat .subBtn li a {
  display: block;
}
@media screen and (min-width: 768px) {
  .btnFloat .subBtn li a {
    height: min(5.4vw, 65px);
  }
}
@media screen and (max-width: 767px) {
  .btnFloat .subBtn li a {
    height: 8.6vw;
  }
}
.btnFloat .subBtn li a img {
  width: auto;
  height: 100%;
}

#store {
  font-weight: 700;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #store {
    width: 500px;
  }
}
#store h1 {
  display: inline-block;
  color: #ff841b;
  font-weight: 900;
  margin-bottom: 1.5em;
  background-image: url(../img/beta-test/icn_inazuma_l.svg), url(../img/beta-test/icn_inazuma_r.svg);
  background-repeat: no-repeat;
  background-position: center left, center right;
  background-size: auto 2em;
  padding: 0 2em;
}
@media screen and (min-width: 768px) {
  #store h1 {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  #store h1 {
    font-size: 5vw;
  }
}
#store .storeBtn li {
  margin-bottom: 2em;
}
#store .storeBtn li .btn {
  background: -webkit-gradient(linear, left top, right top, from(#7cff85), to(#eaff00));
  background: linear-gradient(90deg, #7cff85 0%, #eaff00 100%);
  color: #000;
  font-weight: 700;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
  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.8em;
  line-height: 1.4;
  padding: 1.8em;
  margin-bottom: 0.5em;
}
#store .storeBtn li .btn:before {
  content: "";
  background: url(../img/shared/bg_arrow_yellow.svg) no-repeat center center/100%;
  width: 1.2em;
  height: 1.4em;
}
#store .storeBtn li .btn span {
  margin-left: -0.5em;
}
:not(:lang(en)) #store .storeBtn li .btn span {
  display: none;
}
:not(:lang(en)) #store .storeBtn li .btn.uk {
  display: none;
}
#store .anoTxt {
  text-align: left;
  padding: 0 1em;
  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;
}
#store .anoTxt li {
  color: #999;
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 768px) {
  #store .anoTxt li {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  #store .anoTxt li {
    font-size: 3vw;
  }
}
:lang(en) #store .anoTxt li, :lang(it) #store .anoTxt li, :lang(de) #store .anoTxt li, :lang(es) #store .anoTxt li, :lang(pt-BR) #store .anoTxt li, .pt-br #store .anoTxt li {
  padding-left: 0.5em;
  text-indent: -0.5em;
}
:lang(fr) #store .anoTxt li {
  padding-left: 0.5em;
  text-indent: -0.8em;
}

.modalStore #cboxContent {
  background-color: transparent !important;
  border: none !important;
}