@charset "UTF-8";
/* top
---------------------------------------------------------------------  */
.main-visual_pc_mask {
  width: 100%;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-visual_pc.png) center right no-repeat;
  background-size: 100% auto;
  opacity: 1;
  transition: opacity 1s ease-out;
  height: 100vh;
  mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: 150%;
  -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
  -webkit-mask-size: 150%;
  background-size: 100% auto;
}

.main-visual_pc_mask img {
  width: 100%;
}

.movie-background {
  width: 100%;
  position: absolute;
}

.header-info {
  z-index: 1;
  position: absolute;
}

.introduction-wp {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#video-area {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  height: 100vh;
  mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: 150%;
  -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
  -webkit-mask-size: 150%;
  background-size: 100% auto;
  z-index: -2;
  padding-top: 60px;
}

#video-area video {
  overflow: hidden;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  opacity: 0;
}

@media screen and (max-width: 1100px) {
  .main-visual_pc_mask {
    width: 100%;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-visual_tab.png) bottom right no-repeat;
    background-size: 100% auto;
    opacity: 1;
    transition: opacity 1s ease-out;
    height: 100vh;
    mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    mask-repeat: no-repeat;
    mask-position: bottom right;
    mask-size: 150%;
    -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
    -webkit-mask-size: 150%;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 820px) {
  .main-visual_pc_mask {
    width: 100%;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-visual_tab.png) top right no-repeat;
    background-size: auto 100%;
    opacity: 1;
    transition: opacity 1s ease-out;
    height: 100vh;
    mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    mask-repeat: no-repeat;
    mask-position: top right;
    mask-size: 200%;
    -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    -webkit-mask-size: 200%;
    background-size: 100% auto;
  }
  #video-area {
    mask-size: 200%;
    -webkit-mask-size: 200%;
  }
}
@media screen and (max-width: 750px) {
  .main-visual_pc_mask {
    width: 100%;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-visual_sp.png) top right no-repeat;
    background-size: auto 100%;
    opacity: 1;
    transition: opacity 1s ease-out;
    height: 100vh;
    mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    mask-repeat: no-repeat;
    mask-position: top right;
    mask-size: 200%;
    -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    -webkit-mask-size: 200%;
    background-size: 100% auto;
  }
  #video-area {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
    height: 100vh;
    mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask_sp.svg);
    mask-repeat: no-repeat;
    mask-position: top right;
    mask-size: 100%;
    -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask_sp.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    -webkit-mask-size: 100%;
    background-size: 100% auto;
    z-index: -2;
    padding-top: 60px;
  }
  #video-area video {
    overflow: hidden;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media screen and (max-width: 600px) {
  .main-visual_pc_mask {
    width: 100%;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-visual_sp.png) bottom right no-repeat;
    background-size: auto 100%;
    opacity: 1;
    transition: opacity 1s ease-out;
    height: 100vh;
    mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    mask-repeat: no-repeat;
    mask-position: top right;
    mask-size: 200%;
    -webkit-mask-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-introduction-wp-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    -webkit-mask-size: 200%;
    background-size: 100% auto;
  }
}
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in;
}

/* header-info
---------------------------------------------------------------------  */
.header-info {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  height: 90vh;
  position: relative;
}

@media screen and (max-width: 1700px) {
  .header-info {
    height: 90vh;
  }
}
@media screen and (max-width: 700px) {
  .header-info {
    height: 100vh;
  }
}
@media screen and (max-width: 600px) {
  .header-info {
    height: 90vh;
    max-height: 750px;
  }
}
@media screen and (max-width: 600px) {
  .header-info {
    height: 90vh;
    max-height: 750px;
  }
}
@media screen and (max-width: 500px) {
  .header-info {
    height: 90vh;
    max-height: 650px;
  }
}
@media screen and (max-width: 350px) {
  .header-info {
    height: 90vh;
    max-height: 550px;
  }
}
.header-info-cont {
  position: absolute;
  top: 65%;
  left: 0;
  width: 40%;
  transform: translate(0, -50%);
}

@media screen and (max-width: 1800px) {
  .header-info-cont {
    position: absolute;
    top: 56%;
    left: 5%;
    width: 40%;
    transform: translate(0, -50%);
  }
}
.header-info-catch {
  position: absolute;
  right: 0;
  top: 120px;
  font-size: clamp(2.5rem, -0.909rem + 9.55vw, 6.25rem);
  font-weight: 600;
  text-align: right;
  text-shadow: black 1px -1px 10px, black -1px -1px 10px;
}
:lang(ja) .header-info-catch {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) .header-info-catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) .header-info-catch {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) .header-info-catch {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) .header-info-catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) .header-info-catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) .header-info-catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) .header-info-catch {
  font-family: "athelas", "Noto serif", sans-serif;
}

.header-info-movie {
  width: 15%;
  max-width: 200px;
  position: absolute;
  right: 5%;
  bottom: 0;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-movie_btn.png) no-repeat;
  background-size: 100% auto;
}

.header-info-movie img {
  animation: 10s linear infinite top-movie-rotation;
}

.header-info-movie img:hover {
  transform: scale(1.2, 1.2);
  transition: transform 0.6s ease;
}

@keyframes top-movie-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.header-info-buy-title {
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  margin-left: -35px;
  text-shadow: black 1px -1px 10px, black -1px -1px 10px;
}
:lang(ja) .header-info-buy-title {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) .header-info-buy-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) .header-info-buy-title {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) .header-info-buy-title {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) .header-info-buy-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) .header-info-buy-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) .header-info-buy-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) .header-info-buy-title {
  font-family: "athelas", "Noto serif", sans-serif;
}

.header-info-buy-title:after {
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-arrow.png);
  width: 20px;
  height: 20px;
  background-size: cover;
  content: "　";
  top: 50%;
  right: 10px;
  margin-top: -12px;
  margin-left: 5px;
  transform: rotate(90deg);
}

.header-info-buy-title::before {
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/top-arrow-left.png);
  width: 20px;
  height: 20px;
  background-size: cover;
  content: "　";
  top: 50%;
  right: 10px;
  margin-top: -12px;
  margin-right: 5px;
}

.header-info-day span {
  font-size: clamp(0.75rem, 0.682rem + 0.34vw, 1rem);
}

@media screen and (max-width: 700px) {
  .header-info-cont {
    position: relative;
    transform: translate(0, 0);
    top: auto;
    left: 0;
    width: 80%;
    padding-left: 0;
    margin: 0 auto;
    padding-top: calc(60px + 30%);
  }
  .header-info-catch {
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 100px;
    text-align: center;
  }
  .header-info-movie {
    width: 20%;
    max-width: 200px;
    margin: 0 auto;
    position: static;
    margin-top: 5%;
  }
}
/* news
---------------------------------------------------------------------  */
.news-main-cont {
  width: 100%;
  margin-top: 5%;
}

.news-main-cont_in {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; /*flex-wrap: wrap;*/
  flex-wrap: wrap;
}

.news-main-title {
  width: 28%;
  margin: 0 5%;
  padding: 0 1%;
  font-size: clamp(1.875rem, 0.284rem + 7.95vw, 6.25rem);
  text-align: center;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/news-bg.png) center center no-repeat;
  background-size: 100% auto;
  padding-top: 200px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
:lang(ja) .news-main-title {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) .news-main-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) .news-main-title {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) .news-main-title {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) .news-main-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) .news-main-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) .news-main-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) .news-main-title {
  font-family: "athelas", "Noto serif", sans-serif;
}

.news-main-title span {
  width: 50%;
  max-width: 100px;
  margin: 10px auto 0 auto;
  display: block;
  font-size: 16px;
  letter-spacing: 0.1em;
  border-radius: 30px;
  background: #fff;
  text-align: center;
  line-height: 1.61;
  font-weight: 600;
}
.news-main-title span a {
  display: block;
  width: 100%;
  color: #000;
}

.news-main-more:hover {
  opacity: 0.8;
}

@media screen and (min-width: 2300px) {
  .news-main-title {
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/news-bg.png) center center no-repeat;
    background-size: auto 100%;
  }
}
.news-main-list {
  width: 60%;
}

.news-main-list li {
  background: rgba(0, 0, 0, 0.8);
  margin: 10px 0 10px 10px;
  padding: 10px;
  display: flex;
}

.news-list-ss {
  width: 300px;
}

.news-list-text {
  flex: 1;
  padding: 0 10px;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.news-list-day {
  font-size: clamp(1rem, 0.932rem + 0.34vw, 1.25rem);
  margin-bottom: 2%;
  color: #f5efcc;
}

.news-list-info {
  line-height: 1.61;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

@media screen and (max-width: 1000px) {
  .news-main-list {
    z-index: 4;
  }
  .news-list-ss {
    width: 40%;
  }
  .news-list-text {
    width: 60%;
  }
  .news-main-title {
    margin-top: 5%;
    padding-top: 15%;
  }
}
@media screen and (max-width: 700px) {
  .news-main-cont {
    width: 100%;
    margin-top: 10%;
  }
  .news-main-cont_in {
    display: block;
    padding-top: 5%;
  }
  .news-main-title {
    width: 70%;
    margin: 0 auto 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
    background-size: 100% auto;
  }
  .news-main-list {
    width: 100%;
  }
  .news-main-list li:first-child {
    margin-top: 0;
  }
}
/* cont-system
--------------------------------------------------------- */
.cont-system {
  width: 90%;
  margin: 0 auto;
  padding-top: 5%;
  padding-bottom: 10%;
  background-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon1.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon2.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon3.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon4.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon3.png);
  /* linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%)) */
  background-size: 30% auto, 30% auto, 25% auto, 10% auto, 25% auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 18%, 100% 0, 100% 70%, 100% 90%, 0 100%;
}

.cont-system_catch {
  width: 75%;
  margin-left: 25%;
  font-size: 2vw;
  font-weight: 600;
  line-height: 1.61;
}
:lang(ja) .cont-system_catch {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) .cont-system_catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) .cont-system_catch {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) .cont-system_catch {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) .cont-system_catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) .cont-system_catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) .cont-system_catch {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) .cont-system_catch {
  font-family: "athelas", "Noto serif", sans-serif;
}

h2.system-title {
  width: 90%;
  max-width: 1700px;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/cont-title.png) center bottom no-repeat;
  background-size: 100% auto;
  color: #f5efcc;
  font-size: clamp(1rem, 0.763rem + 1.19vw, 1.875rem);
  text-align: center;
  padding-bottom: clamp(10px, 0.4237vw + 8.6441px, 15px);
  line-height: 1.61;
  margin: 5% auto 0;
}
:lang(ja) h2.system-title {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) h2.system-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) h2.system-title {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) h2.system-title {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) h2.system-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) h2.system-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) h2.system-title {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) h2.system-title {
  font-family: "athelas", "Noto serif", sans-serif;
}

h2.system-title span {
  display: block;
  font-size: 70%;
}

.system-point1 {
  position: relative;
  width: 100%;
  max-width: 1700px;
  padding-top: 5%;
  padding-bottom: 10%;
  margin: 0 auto 5% auto;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; /*flex-wrap: wrap;*/
  flex-wrap: wrap;
}

.system-point1 .system-text {
  width: 35%;
  position: absolute;
  margin-left: 10%;
  padding-top: 5%;
}

@media screen and (max-width: 800px) {
  .system-point1 .system-text {
    width: 45%;
    position: absolute;
    margin-left: 0;
    padding-top: 5%;
  }
}
.system-point1 .system-movie {
  width: 60%;
  margin-left: auto;
}

.system-text_center {
  width: 85%;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/system-cont_text-center.png) repeat-y center center;
  background-size: 100% auto;
  line-height: 1.61;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.system-point1 .system-text_center {
  padding: 0 6% 0 9%;
}

.system-point2 .system-text_center {
  padding: 0 6% 0 9%;
}

.system-movie video {
  width: 100%;
}

.system-point2 {
  position: relative;
  width: 100%;
  max-width: 1700px;
  padding-top: 5%;
  margin: 0 auto;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; /*flex-wrap: wrap;*/
  flex-wrap: wrap;
}

.system-point2 .system-text {
  width: 35%;
  padding-top: 5%;
  margin-left: auto;
  z-index: 1;
}

.system-point2 .system-movie {
  position: absolute;
  margin-left: 10%;
  width: 60%;
}

@media screen and (max-width: 700px) {
  .cont-system_catch {
    width: 80%;
    margin-left: 20%;
    font-size: 3vw;
    font-weight: 600;
    line-height: 1.61;
  }
  :lang(ja) .cont-system_catch {
    font-family: "Shippori Mincho", serif;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
  }
  :lang(en) .cont-system_catch {
    font-family: "athelas", "Noto serif", sans-serif;
  }
  :lang(zh-cmn-hant) .cont-system_catch {
    font-family: "Noto Serif TC", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
  }
  :lang(zh-cmn-hans) .cont-system_catch {
    font-family: "Noto serif SC", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
  }
  :lang(fr) .cont-system_catch {
    font-family: "athelas", "Noto serif", sans-serif;
  }
  :lang(it) .cont-system_catch {
    font-family: "athelas", "Noto serif", sans-serif;
  }
  :lang(de) .cont-system_catch {
    font-family: "athelas", "Noto serif", sans-serif;
  }
  :lang(es) .cont-system_catch {
    font-family: "athelas", "Noto serif", sans-serif;
  }
  .system-point1 .system-text_center,
  .system-point2 .system-text_center {
    padding: 5% 7% 0 8%;
  }
  .system-text_top {
    display: none;
  }
  .system-point1, .system-point2 {
    position: static;
    width: 100%;
    max-width: 1700px;
    padding-top: 5%;
    padding-bottom: 10%;
    margin: 0 auto 5% auto;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex; /*flex-wrap: wrap;*/
    flex-wrap: wrap;
  }
  .system-point1 {
    flex-direction: column-reverse;
  }
  .system-point1 .system-text,
  .system-point2 .system-text {
    width: 95%;
    position: static;
    margin: 0 auto;
    padding-top: 0;
  }
  .system-point1 .system-movie,
  .system-point2 .system-movie {
    width: 95%;
    margin: 0 auto;
  }
  .system-point2 .system-movie {
    position: static;
  }
  .cont-system {
    width: 100%;
    margin: 0 auto;
    padding-top: 5%;
    background-image: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon1.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon2.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon3.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon4.png), url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/main-bg_icon3.png);
    background-size: 50% auto, 50% auto, 55% auto, 10% auto, 34% auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: -23% 7%, 127% 0, 100% 70%, 100% 90%, 3% 100%;
  }
}
/* cont-story
--------------------------------------------------------- */
.cont-story {
  width: 90%;
  max-width: 1700px;
  margin: 0 auto;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/story-bg.png) no-repeat center center;
  background-size: 100% auto;
  margin-top: 10%;
  padding-bottom: 20%;
}

.cont-story_pointtext {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.cont-story p {
  text-align: center;
  line-height: 1.81;
  font-size: clamp(0.938rem, 0.717rem + 1.1vw, 1.75rem);
  font-weight: 600;
  text-shadow: black 1px -1px 10px, black 1px -1px 10px, black -1px -1px 10px;
}
:lang(ja) .cont-story p {
  font-family: "Shippori Mincho", serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(en) .cont-story p {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(zh-cmn-hant) .cont-story p {
  font-family: "Noto Serif TC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(zh-cmn-hans) .cont-story p {
  font-family: "Noto serif SC", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
:lang(fr) .cont-story p {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(it) .cont-story p {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(de) .cont-story p {
  font-family: "athelas", "Noto serif", sans-serif;
}
:lang(es) .cont-story p {
  font-family: "athelas", "Noto serif", sans-serif;
}

.cont-story p.pointtext {
  font-size: 200%;
  line-height: 1.2;
  padding-top: 5%;
}

.cont-story .poincolor {
  color: #d81248;
  font-weight: 800;
}

@media screen and (max-width: 700px) {
  .cont-story {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/story-bg.png) no-repeat center center;
    background-size: 100% auto;
    margin-top: 10%;
    padding: 0 5% 10% 5%;
    padding-bottom: 10%;
  }
  .cont-story p {
    font-size: 3vw;
  }
  .cont-story p.pointtext {
    font-size: 110%;
    padding-top: 5%;
  }
}
@media screen and (max-width: 650px) {
  .cont-story {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto;
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/story-bg.png) no-repeat center center;
    background-size: auto 100%;
    margin-top: 5%;
    padding: 0 5% 10% 5%;
    padding-bottom: 10%;
  }
}
/* product-cont
--------------------------------------------------------- */
.product-cont {
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/common/footer-wp.png) bottom center no-repeat;
  background-size: 100% auto;
}

.product-cont_main-wp {
  width: 90%;
  max-width: 1700px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 各アイテムを均等に配置 */
  gap: 20px; /* 各アイテム間のスペース */
  flex-wrap: wrap; /* レスポンシブ対応のために折り返しを許可 */
}

.item-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.309804) 0px 0px 6px 3px;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/product_index_bg.jpg);
  flex: 1; /* 各アイテムを同じ幅にする */
  box-sizing: border-box; /* パディングを含めたサイズ計算 */
  min-width: 250px; /* レスポンシブ対応のための最小幅 */
}

.product-btn-info-title {
  color: #f5efcc;
  text-align: center;
  font-size: clamp(0.875rem, 0.706rem + 0.85vw, 1.5rem);
  padding-top: 5%;
  font-weight: 400;
}

.product-btn-info-text {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  width: 90%;
  height: 100px; /* 固定の高さを設定して揃える */
  box-sizing: border-box;
  margin: 30px auto 0 auto;
  line-height: 1.61;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.product-btn-list {
  width: 95%;
  margin: 0 auto 5% auto;
}

.item-cont .main-btn {
  width: 93%;
  display: block;
  margin: 6px 0;
  text-align: center;
  background-size: 150% auto;
  background-position: center center;
  border: solid 1px #f5efcc;
}

.product-more-btn {
  width: 100%;
  background: #f5efcc;
}

.product-more-btn a {
  color: #001920;
  display: block;
  text-align: center;
  padding: 1% 0 4% 0;
  margin-top: 10px;
  line-height: 1.2;
}

.product-more-btn:hover {
  opacity: 0.8;
}

.product-cont_sub-wp .product-more-btn a {
  padding: 10px 0 10px 0;
}

@media screen and (max-width: 700px) {
  .product-cont {
    background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/common/footer-wp_sp.png) bottom right no-repeat;
    background-size: 100% auto;
  }
  .product-btn-info-text {
    height: auto;
    margin: 30px auto 5% auto;
  }
}
/* product-cont
--------------------------------------------------------- */
.hlink {
  height: 60px;
}

.product-cont_sub-wp {
  width: 90%;
  max-width: 1700px;
  margin: 0 auto;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; /*flex-wrap: wrap;*/
  flex-wrap: wrap;
  box-shadow: rgba(0, 0, 0, 0.309804) 0px 0px 6px 3px;
  background: url(https://www.koeitecmoamerica.com/warriors_abyss/assets/img/index/product_index_bg.jpg);
  margin-top: 5%;
}

.product-btn-info-title2 {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  color: #f5efcc;
  text-align: center;
  font-size: clamp(0.875rem, 0.706rem + 0.85vw, 1.5rem);
  margin-top: 3%;
  padding-top: 2%;
  font-weight: 400;
  border-top: solid 1px #f5efcc;
}

.product-cont_sub-wp dt {
  width: 50%;
}

.product-cont_sub-wp dd {
  width: 50%;
}

.product-cont_at {
  padding-top: 5%;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.product-cont_at li {
  line-height: 1.61;
}
:lang(ja) .product-cont_at li {
  text-indent: -1em;
  padding-left: 1em;
}
:lang(en) .product-cont_at li {
  text-indent: -0.5em;
}
:lang(zh-cmn-hant) .product-cont_at li {
  text-indent: -1em;
  padding-left: 1em;
}
:lang(zh-cmn-hans) .product-cont_at li {
  text-indent: -1em;
  padding-left: 1em;
}
:lang(fr) .product-cont_at li {
  text-indent: -0.5em;
}
:lang(it) .product-cont_at li {
  text-indent: -0.5em;
}
:lang(de) .product-cont_at li {
  text-indent: -0.5em;
}
:lang(es) .product-cont_at li {
  text-indent: -0.5em;
}

.product-cont_sub-wp .product-more-btn {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 700px) {
  .product-cont_sub-wp dt {
    width: 100%;
  }
  .product-cont_sub-wp dd {
    width: 100%;
    padding-bottom: 5%;
  }
}
.dlcbtn {
  width: 50%;
  max-width: 600px;
  margin: 5% auto 0 auto;
}/*# sourceMappingURL=index.css.map */