@charset "UTF-8";
/************************************
  font
************************************/
@font-face {
  font-family: "source-han-sans-traditional";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansTW-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500 900;
}
@font-face {
  font-family: "source-han-sans-simplified-c";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansCN-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500 900;
}
@font-face {
  font-family: "source-han-sans-korean";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansKR-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500 900;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("https://www.capcom-games.com/common/font/SourceSans3-VF.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500 900;
}
@font-face {
  font-family: "source-han-serif-tc";
  src: url("https://www.capcom-games.com/common/font/SourceHanSerifTW-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 500 900;
}
@font-face {
  font-family: "source-han-serif-sc";
  src: url("https://www.capcom-games.com/common/font/SourceHanSerifCN-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 500 900;
}
@font-face {
  font-family: "source-han-serif-korean";
  src: url("https://www.capcom-games.com/common/font/SourceHanSerifKR-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 500 900;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("https://www.capcom-games.com/common/font/SourceSerif4-VF.woff2") format("woff2");
  font-display: swap;
  font-weight: 500 900;
}
/************************************
	base
************************************/
html {
  height: 100%;
  width: 100%;
}

body {
  background: #000;
  color: #000;
  font-family: "Source Sans 3", sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}
@media only screen and (min-width: 769px) {
  body {
    font-size: 1.04167vw;
  }
}
html:lang(zh-HK) body{
  font-family: "source-han-sans-traditional", serif;
}
html:lang(zh-CN) body{
  font-family: "source-han-sans-simplified-c", serif;
}
html:lang(ko) body{
  font-family: "source-han-sans-korean", serif;
}
body a {
  border: none;
  color: #000;
  outline: none;
}
body ul li a {
  display: block;
}
body ul.note li {
  padding-left: 1em;
  text-indent: -1em;
}
body ul.note li::before {
  content: "※";
}
body main,
body picture {
  display: block;
}
body button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  outline: none;
}
body small.note {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
body small.note::before {
  content: "※";
}
body .btn a {
  display: block;
}
body #wrapper img {
  border: none;
  height: auto;
  margin: auto;
  outline: none;
  width: 100%;
}
body a:not(.is-origin) {
  transition: opacity 0.2s ease;
}
body a:not(.is-origin):hover {
  opacity: 0.8;
}

/************************************

  header

************************************/
.gnav-btn {
  background-image: url(../images/common/header_nav_btn.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  height: 14vw;
  position: fixed;
  right: 2vw;
  top: 2vw;
  width: 14vw;
  z-index: 9; }
  @media only screen and (min-width: 769px) {
    .gnav-btn {
      display: none; } }

.gnav-list {
  background: rgba(4, 23, 77, 0.9);
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 8; }
  @media only screen and (max-width: 768px) {
    .gnav-list {
      height: 100%;
      padding: 18vw 4vw 0;
      right: 100%; } }
  @media only screen and (min-width: 769px) {
    .gnav-list {
      background: linear-gradient(to bottom, #04174d 0%, #04174d 40%, rgba(4, 23, 77, 0) 90%, rgba(4, 23, 77, 0) 100%);
      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;
      left: 0; } }
  .gnav-list-item {
    position: relative; }
    @media only screen and (max-width: 768px) {
      .gnav-list-item {
        margin-bottom: 6vw; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-item {
        text-align: center; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-item a {
        padding: .5em 0;
        position: relative;
        z-index: 3; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-item a:hover .text-image .text-image-default {
        opacity: 0;
        visibility: hidden; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-item a:hover .text-image .text-image-active {
        opacity: 1;
        visibility: visible; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-item a:hover .text {
        color: #FACD46;
        text-shadow: 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8), 0 0 3px rgba(148, 0, 0, 0.8); } }
    .gnav-list-item .text-image {
      margin-bottom: -.6em;
      line-height: 0; }
      @media only screen and (min-width: 769px) {
        .gnav-list-item .text-image {
          margin-right: auto;
          margin-bottom: -.4em;
          margin-left: auto;
          position: relative;
          width: 90%; } }
      .gnav-list-item .text-image-default {
        display: block;
        opacity: 1;
        transition: opacity .2s ease-in, visibility .2s ease-in;
        visibility: visible; }
      .gnav-list-item .text-image-active {
        display: block;
        height: 100%;
        left: 50%;
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: opacity .2s ease-in, visibility .2s ease-in;
        visibility: hidden;
        width: 100%; }
      .gnav-list-item .text-image img {
        height: auto;
        width: 100%; }
    .gnav-list-item .text {
      color: #FFF;
      display: inline-block;
      font-size: 2.93333vw;
      font-weight: 400;
      text-shadow: 0px 0px 6px rgba(255, 255, 255, 0);
      transition: color .2s ease-in, text-shadow .2s ease-in; }
      @media only screen and (min-width: 769px) {
        .gnav-list-item .text {
          font-size: 0.72917vw; } }
  .gnav-list-top {
    width: 23%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-top {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-top {
        width: calc(6.35% / 1.2); } }
  .gnav-list-introduction {
    width: 67%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-introduction {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-introduction {
        width: calc(18.44% / 1.2); } }
  .gnav-list-story {
    width: 32%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-story {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-story {
        width: calc(8.8% / 1.2); } }
  .gnav-list-gameplay {
    width: 49.5%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-gameplay {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-gameplay {
        width: calc(13.64% / 1.2); } }
  .gnav-list-coopplay {
    width: 81.4%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-coopplay {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-coopplay {
        width: calc(22.4% / 1.2); } }
  .gnav-list-product {
    width: 49.5%; }
    @media only screen and (max-width: 768px) {
      .gnav-list-product {
        margin-right: auto;
        margin-left: auto; } }
    @media only screen and (min-width: 769px) {
      .gnav-list-product {
        width: calc(13.64% / 1.2); } }

.gnav-list-preorder {
    width: calc(12.24% / 1.2);
}
@media only screen and (max-width: 768px) {
  .gnav-list-preorder {
        width: 49.5%;
    margin: auto;
  }
}
.gnav-list .gnav-list-item.gnav-list-preorder,
.gnav-list .gnav-list-item.gnav-list-product {
  background: linear-gradient(to bottom, rgba(225,1,19,1) 33%,rgba(225,1,19,0.58) 59%,rgba(225,1,19,0) 82%);
}
@media only screen and (max-width: 768px){
  .gnav-list .gnav-list-item.gnav-list-preorder,
  .gnav-list .gnav-list-item.gnav-list-product {
    background: linear-gradient(to bottom, rgba(225,1,19,1) 40%,rgba(225,1,19,0.58) 69%,rgba(225,1,19,0) 100%);
  }
}

/************************************

	content

************************************/
#wrapper {
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  width: 100%;
}

.sec {
  margin-bottom: 24vw;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .sec {
    margin-bottom: 8vw;
  }
}
.sec-inner {
  padding: 0 4vw;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .sec-inner {
    padding: 0 4vw;
  }
}
@media only screen and (max-width: 768px) {
  .sec#langSelect {
    margin-bottom: 8vw;
  }
}

/************************************

	module

************************************/
/****** 背景動画 ******/
.movie-bg {
  height: 110%;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  z-index: -1;
}
@media only screen and (min-width: 769px) {
  .movie-bg {
    height: 140%;
    width: 160%;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1023px) {
  .movie-bg {
    height: 140%;
    width: 240%;
  }
}
.movie-bg-player {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.movie-bg::before {
  background-image: url(../images/common/moviebg_overlay.png);
  background-position: left top;
  background-repeat: repeat;
  background-size: 9px;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  opacity: 0.4;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease-out;
  width: 100%;
  z-index: 1;
}

/****** 見出し ******/
.sec-ttl {
  margin-bottom: 8vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .sec-ttl {
    margin-right: auto;
    margin-bottom: 4vw;
    margin-left: auto;
    width: 53.40909%;
  }
}
.sec-ttl-image {
  display: block;
  line-height: 0;
}
.sec-ttl-image img {
  padding: 0 4vw;
}
.sec-ttl-image.full-size img {
  padding: 0;
}
.sec-ttl-image::after {
  background-image: url(../images/common/ttl_line-yellow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 4vw;
  margin: 0.5em 0 0.2em;
  width: 100%;
}
@media only screen and (min-width: 769px) {
  .sec-ttl-image::after {
    height: 2vw;
  }
}
.sec-ttl-text {
  color: #facd46;
  font-family: "Source Serif 4", serif;
  font-size: 5.33333vw;
  font-weight: 900;
}
@media only screen and (min-width: 769px) {
  .sec-ttl-text {
    font-size: 1.875vw;
  }
}
:lang(zh-HK) .sec-ttl-text {
  font-family: "source-han-serif-tc", serif
}
:lang(zh-CN) .sec-ttl-text {
  font-family: "source-han-serif-sc", serif
}
:lang(ko) .sec-ttl-text {
  font-family: "source-han-serif-korean", serif
}

.sec-sttl,
.sec .lead {
  color: #fff;
  font-family: "Source Serif 4", serif;
  font-size: 6.13333vw;
  font-weight: 900;
  margin-bottom: 6vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .sec-sttl,
  .sec .lead {
    font-size: 2.1875vw;
    margin-bottom: 3vw;
  }
}
:lang(zh-HK) .sec-sttl,
:lang(zh-HK) .sec .lead {
  font-family: "source-han-serif-tc", serif
}
:lang(zh-CN) .sec-sttl,
:lang(zh-CN) .sec .lead {
  font-family: "source-han-serif-sc", serif
}
:lang(ko) .sec-sttl,
:lang(ko) .sec .lead {
  font-family: "source-han-serif-korean", serif
}

/****** テキスト ******/
.text-box .text {
  line-height: 1.8;
}
.text-box .text:not(:last-child) {
  margin-bottom: 1em;
}

.title-note {
  color: #fff;
  font-size: 2.93333vw;
  padding: 0 4vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .title-note {
    font-size: 0.9375vw;
    padding: 0 4vw;
  }
}

/****** 更新アイコン ******/
.__common-new-mark {
  position: absolute;
  background: #e60012;
  color: #fff;
  padding: .2rem .3rem .1rem;
  font-size: 0.62917vw;
  display: block;
  text-align: center;
  font-weight: 600;
  font-family: sans-serif;
  line-height: 1;
  z-index: 2;
}
@media only screen and (max-width: 768px){
  .__common-new-mark {
    font-size: 2.93333vw
  }
}
/*---- グローバルナビ ----*/
.gnav-list-item .__common-new-mark {
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
/*---- 見出し ----*/
.sec-ttl .__common-new-mark {
  bottom: calc(100% + 1em);
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 769px){
  .sec-ttl .__common-new-mark {
    bottom: calc(100% + 1.5em);
  }
}
/*---- ファーストビュー ----*/
.conts.conts-campaign p .__common-new-mark {
  right: -.25em;
  top: -.5em;
}
@media only screen and (min-width: 769px){
  .conts.conts-campaign p .__common-new-mark {
    right: -.5em;
    top: -1em;
  }
}
.trailer-btn-item .__common-new-mark {
  top: -0.6rem;
  right: 0.6rem;
}
/*---- ゲームプレイ ----*/
.conts-play .slide-ttl .__common-new-mark {
  top: -1rem;
}
.conts-play h5.lead .__common-new-mark {
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
@media only screen and (max-width: 768px){
  .conts-play h5.lead .__common-new-mark {
    right: -8.5vw;
  }
}
.sec#gameplay .conts-overview-under .conts-overview .__common-new-mark {
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .sec#gameplay .conts-overview-under .conts-overview .__common-new-mark {
    top: -1rem;
  }
}

/************************************

	Object

************************************/
/****** clearfix ******/
.cf::before,
.cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

/****** icon ******/
.ic-yt {
  background: url(../images/common/yt_ic.svg) center no-repeat;
  background-size: contain;
}

.ic-tw {
  background: url(../images/common/tw_ic.svg) center no-repeat;
  background-size: contain;
}

.ic-fb {
  background: url(../images/common/fb_ic.svg) center no-repeat;
  background-size: contain;
}

.ic-insta {
  background: url(../images/common/insta_ic.svg) center no-repeat;
  background-size: contain;
}

.ic-line {
  background: url(../images/common/line_ic.svg) center no-repeat;
  background-size: contain;
}

/****** テキスト ******/
/*----- 字間 -----*/
.t-kerning {
  margin-right: -0.5em;
  margin-left: -0.5em;
  position: relative;
}

.t-mark {
  margin-right: -0.5em;
  margin-left: -0.16667em;
  position: relative;
}

.t-comma {
  margin-right: -0.5em;
  position: relative;
}

/*----- 位置 -----*/
.t-bracket {
  margin: 0 0.2em;
  position: relative;
  top: -0.05em;
}

.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

@media only screen and (min-width: 769px) {
  .ta-l-pc {
    text-align: left;
  }
}

@media only screen and (min-width: 769px) {
  .ta-c-pc {
    text-align: center;
  }
}

@media only screen and (min-width: 769px) {
  .ta-r-pc {
    text-align: right;
  }
}

/*----- 配色 -----*/
.fc-r {
  color: #f00;
}

/****** 余白 ******/
/*----- padding -----*/
.pd-0 {
  padding: 0;
}

.pd-b1 {
  padding-bottom: 4vw;
}
@media only screen and (min-width: 769px) {
  .pd-b1 {
    padding-bottom: 2vw;
  }
}

.pd-b1h {
  padding-bottom: 6vw;
}
@media only screen and (min-width: 769px) {
  .pd-b1h {
    padding-bottom: 3vw;
  }
}

.pd-b1h-d {
  padding-bottom: 2.66667vw;
}
@media only screen and (min-width: 769px) {
  .pd-b1h-d {
    padding-bottom: 1.33333vw;
  }
}

.pd-b2 {
  padding-bottom: 8vw;
}
@media only screen and (min-width: 769px) {
  .pd-b2 {
    padding-bottom: 4vw;
  }
}

.pd-b2-d {
  padding-bottom: 2vw;
}
@media only screen and (min-width: 769px) {
  .pd-b2-d {
    padding-bottom: 1vw;
  }
}

.pd-t1 {
  padding-top: 4vw;
}
@media only screen and (min-width: 769px) {
  .pd-t1 {
    padding-top: 2vw;
  }
}

.pd-t1h {
  padding-top: 6vw;
}
@media only screen and (min-width: 769px) {
  .pd-t1h {
    padding-top: 3vw;
  }
}

.pd-t1h-d {
  padding-top: 2.66667vw;
}
@media only screen and (min-width: 769px) {
  .pd-t1h-d {
    padding-top: 1.33333vw;
  }
}

.pd-t2 {
  padding-top: 8vw;
}
@media only screen and (min-width: 769px) {
  .pd-t2 {
    padding-top: 4vw;
  }
}

.pd-t2-d {
  padding-top: 2vw;
}
@media only screen and (min-width: 769px) {
  .pd-t2-d {
    padding-top: 1vw;
  }
}

/*----- margin -----*/
.mg-0 {
  margin: 0;
}

.mg-b1 {
  margin-bottom: 4vw;
}
@media only screen and (min-width: 769px) {
  .mg-b1 {
    margin-bottom: 2vw;
  }
}

.mg-b1h {
  margin-bottom: 6vw;
}
@media only screen and (min-width: 769px) {
  .mg-b1h {
    margin-bottom: 3vw;
  }
}

.mg-b1h-d {
  margin-bottom: 2.66667vw;
}
@media only screen and (min-width: 769px) {
  .mg-b1h-d {
    margin-bottom: 1.33333vw;
  }
}

.mg-b2 {
  margin-bottom: 8vw;
}
@media only screen and (min-width: 769px) {
  .mg-b2 {
    margin-bottom: 4vw;
  }
}

.mg-b2-d {
  margin-bottom: 2vw;
}
@media only screen and (min-width: 769px) {
  .mg-b2-d {
    margin-bottom: 1vw;
  }
}

.mg-t1 {
  margin-top: 4vw;
}
@media only screen and (min-width: 769px) {
  .mg-t1 {
    margin-top: 2vw;
  }
}

.mg-t1h {
  margin-top: 6vw;
}
@media only screen and (min-width: 769px) {
  .mg-t1h {
    margin-top: 3vw;
  }
}

.mg-t1h-d {
  margin-top: 2.66667vw;
}
@media only screen and (min-width: 769px) {
  .mg-t1h-d {
    margin-top: 1.33333vw;
  }
}

.mg-t2 {
  margin-top: 8vw;
}
@media only screen and (min-width: 769px) {
  .mg-t2 {
    margin-top: 4vw;
  }
}

.mg-t2-d {
  margin-top: 2vw;
}
@media only screen and (min-width: 769px) {
  .mg-t2-d {
    margin-top: 1vw;
  }
}

/****** 位置 ******/
.pos-float {
  position: absolute;
}
@media only screen and (min-width: 769px) {
  .pos-float-pc {
    position: absolute;
  }
}

/****** 表示 ******/
.d-block {
  display: block;
}
@media only screen and (max-width: 768px) {
  .d-block-sp {
    display: block;
  }
}
@media only screen and (min-width: 769px) {
  .d-block-pc {
    display: block;
  }
}

.hide-sp,
.img-pc {
  display: none;
}

@media only screen and (min-width: 769px) {
  .hide-sp {
    display: block;
  }
  .hide-spbr,
  .hide-spspan {
    display: inline;
  }
  .img-pc {
    display: inline;
  }
  .hide-pc,
  .img-sp {
    display: none;
  }
}

/************************************

  Anim

************************************/
@keyframes mask-effect {
  0% {
    transform: translateX(-5%);
  }
  99% {
    transform: translateX(-95%);
    opacity: 1;
  }
  100% {
    transform: translateX(-95%);
    opacity: 0;
  }
}