@charset "utf-8";

/************************************
  font
************************************/
@font-face {
  font-family: "source-han-sans-japanese";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@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: 100 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: 100 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: 100 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: 100 900;
}
@font-face {
  font-family: "source-han-serif-japanese";
  src: url("https://www.capcom-games.com/common/font/SourceHanSerifJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 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: 100 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: 100 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: 100 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: 100 900;
}

/************************************
  base
************************************/
html,
body {
  height: 100%;
  width: 100%;
}

html {
  box-sizing: border-box;
  font-size: calc(100vw / 19.2);
}
@media screen and (max-width: 768px) {
  html {
    font-size: calc(100vw / 7.5);
  }  
}
body {
  width: 100%;
  background-color: #fff;
  word-wrap: break-word;
  color: #000;
  font-family: "Source Sans 3", sans-serif;
  font-size: min(0.18rem, 18px);
  letter-spacing: 0.025em;
  line-height: 1.6;
  min-height: 100vh;
  font-feature-settings: "palt";
  word-break: break-all;
}
body > *:not(footer) {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 0.24rem;
    min-height: 100vh;
    letter-spacing: .05em;
  }
}
body.ja {
  font-family: "source-han-sans-japanese";
}
body.zh-cmn-Hans {
  font-family: "source-han-sans-simplified-c";
}
body.zh-cmn-Hant {
  font-family: "source-han-sans-traditional";
}
body.ko {
  font-family: "source-han-sans-korean";
}
body .serif {
  font-family: "Source Serif 4", serif;
}
body.ja .serif {
  font-family: "source-han-serif-japanese", serif;
}
body.zh-cmn-Hans .serif {
  font-family: "source-han-serif-sc", serif;
}
body.zh-cmn-Hant .serif {
  font-family: "source-han-serif-tc", serif;
}
body.ko .serif {
  font-family: "source-han-serif-korean", serif;
}
body:not(.ja) {
  word-break: break-word;
}
#wrapper {
  position: relative;
  border-top: 10px solid #c2101c;
}
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}
small {
  font-size: .75em;
}
a {
  transition: filter .2s;
}
a:hover {
  filter: brightness(110%);
}
footer#title_footer {
  border-top: solid 2px #5d5d5d;
  background-color: #000;
  padding: 1em 0;
}

@media screen and (min-width:769px) {
  .hide_pc {
      display: none!important;
  }
}
@media screen and (max-width:768px) {
  .hide_pc {
    display: block;
  }
  .hide_sp {
      display: none!important;
  }
}

.t_red {
  color: #d3101d!important;
}
.t_blue {
  color: #1280aa!important;
}
.tax {
  font-size: .7em;
}

.blink {
  position: relative
}
.blink:after,.blink:before {
    background: #d3101d;
    border-radius: 100%;
    content: "";
    display: inline-block;
    position: absolute;
    height: min(0.5208vw, 10px);
    left: min(0.2604vw, 5px);
    top: max(-1.0417vw, -20px);
    width: min(0.5208vw, 10px);
}
.blink:after {
  animation: pulsate 2s ease infinite;
  opacity: .2
}
.blink.left:after,.blink.left:before {
  left: 0
}
@media screen and (max-width: 768px) {
  .blink:after, .blink:before {
    height: 1.5vw;
    left: .75vw;
    top: -3vw;
    width: 1.5vw;
    border-radius: 100%;
} 
}
@keyframes pulsate {
  0% {
      opacity: .6;
      transform: scale(1)
  }

  to {
      opacity: .1;
      transform: scale(3)
  }
}

.reserve_btn a {
  min-width: min(27.0833vw, 520px);
  width: auto;
  padding: min(1.5625vw, 30px) min(2.0833vw, 40px);
  font-size: min(.37rem, 37px);
  color: #fff;
  display: inline-block;
  border: 2px solid #fff;
  letter-spacing: 0.05em;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
  line-height: 1;
  transition: all .2s;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to right, #a00410 10%, #e50012, #a00410 90%);

}
.reserve_btn a:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.reserve_btn a:hover:before {
  filter: brightness(110%);
}
.reserve_btn a:after {
  content: "";
  position: absolute;
  width: min(0.625vw, 12px);
  height: min(0.9375vw, 18px);
  background: url(../images/common/arrow_btn.png) center / contain no-repeat;
  top: 0;
  bottom: 0;
  left: 90%;
  margin: auto;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .reserve_btn a {
    min-width: 69.3333vw;
    padding: 4vw;
}
.reserve_btn a:after {
    width: 1.6vw;
    height: 2.4vw;
}
}

/************************************
  MENU
************************************/
div#menu_btn {
  position: fixed;
  width: min(5.8333vw, 112px);
  height: min(6.7188vw, 129px);
  background: url(../images/common/menu_btn.png) center top / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.1));
  top: 0;
  right: min(1.4583vw, 28px);
  z-index: 9999;
  cursor: pointer;
  transition: filter .2s;
}
div#menu_btn:hover {
  filter: brightness(110%);
}
.menu_icon {
  position: absolute;
  top: min(0.2604vw, 5px);
  right: 0;
  left: 0;
  margin: auto;
  width: min(3.5938vw, 69px);
  height: min(3.5417vw, 68px);
}
.menu_wrapper.open {
  z-index: 3;
  position: relative;
}
.menu_wrapper.open .menu_icon img {
  display: none;
}
.menu_wrapper.open .menu_icon {
  width: min(2.3438vw, 45px);
  height: min(2.3438vw, 45px);
  position: relative;
  top: min(1.0417vw, 20px);
}
.menu_wrapper.open .menu_icon:before, .menu_wrapper.open .menu_icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: min(0.1563vw, 3px);
  height: min(3.0208vw, 58px);
  background-color: #fff;
  transform: rotate(45deg);
}
.menu_wrapper.open .menu_icon:after {
  transform: rotate(-45deg);
}
div#menu {
  position: fixed;
  width: min(44.8958vw, 862px);
  height: 100vh;
  top: 0;
  right: 0;
  overflow: scroll;
  background-color: rgba(255,255,255,.7);
  flex-direction: column;
  display: flex;
  transition: transform .5s;
  z-index: 1000;
  transform: translateX(min(44.8958vw, 862px));
}
.menu_wrapper.open #menu {
  transform: translateX(0);
}
.menu_wrapper:after {
  position: fixed;
  z-index: -1;
  content: "";
  background-color: rgba(0,0,0,.8);
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity .3s;
}
.menu_wrapper.open:after {
  opacity: 1;
  z-index: 999;
}
.menu_top {
  background: url(../images/common/bg04_white.jpg) top right / cover no-repeat;
  padding: min(2.0833vw, 40px) 0;
  text-align: center;
  border-top: 10px solid #c2101c;
}
.menu_logo img {
  width: min(20.8333vw, 400px);
}
.menu_logo {
  margin-bottom: min(1.5625vw, 30px);
}
#menu .reserve_btn {
  display: inline-block;
}
#menu .reserve_btn a {
  min-width: min(17.7083vw, 340px);
  width: auto;
  padding: min(1.0416vw, 20px) min(2.0833vw, 40px);
  font-size: min(.24rem, 24px);
}
.menu_bottom {
  background-color: #fff;
  flex-grow: 1;
}
.menu_bottom a {
  transition: opacity .3s;
}
.menu_bottom a:hover {
  filter: none;
  opacity: .6;
}

.menu_bottom_inner {
  padding: min(2.0833vw, 40px) min(4.1667vw, 80px);
}
p.menu_cate_ruby {
  font-weight: 900;
  color: #d3101d;
  font-size: min(.16rem, 16px);
  font-style: italic;
}
.menu_title {
  font-size: min(.34rem, 34px);
  font-weight: 900;
  font-style: italic;
  margin-bottom: min(0.5208vw, 10px);
}
body[class^="en"] .menu_title, body.de .menu_title {
  font-size: min(.32rem, 32px);
}
body.fr .menu_title {
  font-size: min(.27rem, 27px);
}
ul.menu_list li {
  padding: min(0.5208vw, 10px) 0 min(0.5208vw, 10px) min(1.5625vw, 30px);
  position: relative;
  line-height: 1;
}
ul.menu_list li:before {
  content: "";
  background: url(../images/common/arrow_btn_r.png) center / contain no-repeat;
  width: min(0.4167vw, 8px);
  height: min(0.7292vw, 14px);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
}
ul.menu_list li:not(.menu_title) {
  font-size: min(.21rem, 21px);
}
.menu_bottom ul:not(:last-child) {
  margin-bottom: min(2.0833vw, 40px);
}
.menu_recorded_item {
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.menu_recorded {
  border: 1px solid #747474;
  height: min(7.2917vw, 140px);
  align-items: stretch;
  display: flex;
  margin-bottom: min(2.0833vw, 40px);
}
.menu_recorded_item a {
  display: block;
}
.menu_recorded_item img {
  width: 80%;
  margin-top: 6%;
  margin-left: 6%;
}
.menu_recorded_item:first-child img {
  width: 64%;
  margin-top: 3%;
  margin-left: 2%;
}
.menu_recorded_item:not(last-child) {
  border-right: 1px solid #747474;
}
.menu_recorded_item:before {
  content: "";
  background: url(../images/common/arrow_btn_r.png) center / contain no-repeat;
  width: min(0.4167vw, 8px);
  height: min(0.7292vw, 14px);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: min(0.625vw, 12px);
}
#menu [class*="delay"] {
  transform: translateX(min(2.0833vw, 40px));
  opacity: 0;
  transition-duration: .3s;
}
.menu_wrapper.open #menu [class*="delay"] {
  transform: translate(0);
  opacity: 1;
}
.menu_wrapper.open #menu .delay01 {
  transition-delay: .2s;
}
.menu_wrapper.open #menu .delay02 {
  transition-delay: .3s;
}
.menu_wrapper.open #menu .delay03 {
  transition-delay: .4s;
}
.menu_wrapper.open #menu .delay04 {
  transition-delay: .5s;
}
.menu_wrapper.open #menu .delay05 {
  transition-delay: .6s;
}
.menu_wrapper.open #menu .delay06 {
  transition-delay: .7s;
}
.menu_wrapper.open #menu .delay07 {
  transition-delay: .8s;
}
.menu_wrapper.open #menu .delay08 {
  transition-delay: .9s;
}
.menu_wrapper.open #menu .delay09 {
  transition-delay: 1s;
}
.menu_wrapper.open #menu .delay10 {
  transition-delay: 1.1s;
}

#menu .menu_bottom .menu_title.delay07.blink:after, #menu .menu_bottom .menu_title.delay07.blink:before {
  left: max(-1.0417vw, -20px);
}
body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.blink:after, body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.blink:before {
  top: 0;
}
#menu .menu_bottom .menu_title.delay09 a.blink:after, #menu .menu_bottom .menu_title.delay09 a.blink:before {
  left: max(-2.6042vw, -50px);
}
body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.delay09 a.blink:after, body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.delay09 a.blink:before {
  top: 0;
}

@media screen and (max-width: 768px) {
  div#menu_btn {
    width: 14.9333vw;
    height: 17.2vw;
    right: 1.8667vw;
  }
  .menu_icon {
    width: 9.2vw;
    height: 9.0667vw;
    top: 0.6667vw;
  }
  .menu_wrapper.open .menu_icon {
    width: 6vw;
    height: 6vw;
    top: 2.6667vw;
  }
  .menu_wrapper.open .menu_icon:before, .menu_wrapper.open .menu_icon:after {
      width: 0.4vw;
      height: 7.7333vw;
  }
  div#menu {
    width: 100%;
    transform: translateX(100%);
  }
  .menu_logo {
    margin-bottom: 4vw;
  }
  .menu_logo img {
    width: 57.0667vw;
  }
  .menu_top {
    padding: 6.6667vw 0;
  }
  #menu .reserve_btn a {
    padding: 3vw 9.3333vw;
    min-width: 48vw;
  }
  .menu_bottom_inner {
    padding: 8vw;
  }
  .menu_title {
    font-size: .34rem;
    margin-bottom: 1.3333vw;
  }
  body[class^="en"] .menu_title, body.de .menu_title {
    font-size: .24rem;
  }
  body.fr .menu_title {
    font-size: .22rem;
  }
  .menu_bottom ul:not(:last-child) {
    margin-bottom: 5.3333vw;
  }
  ul.menu_list li:before {
    width: 1.0667vw;
    height: 1.8667vw;
  }
  ul.menu_list li {
    padding: 2vw 0 2vw 4vw;
  }
  ul.menu_list li:not(.menu_title) {
    font-size: .21rem;
  }
  .menu_recorded {
    height: 16.6667vw;
  }
  .menu_recorded_item:before {
    width: 1.0667vw;
    height: 1.8667vw;
    left: 2.1333vw;
  }
  #menu .menu_bottom .menu_title.delay07.blink:after, #menu .menu_bottom .menu_title.delay07.blink:before {
    left: -4vw;
  }
  body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.blink:after, body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.blink:before {
    top: 0;
  }
  #menu .menu_bottom .menu_title.delay09 a.blink:after, #menu .menu_bottom .menu_title.delay09 a.blink:before {
    left: -8vw;
  }
  body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.delay09 a.blink:after, body:not(.ja):not(.zh-cmn-Hant):not(.zh-cmn-Hans):not(.ko) #menu .menu_bottom .menu_title.delay09 a.blink:before {
    top: 0;
  }
}



body.noscroll {
  overflow: hidden;
}

.close_btn {
  width: min(2.6042vw, 50px);
  height: min(2.6042vw, 50px);
  position: fixed;
  right: min(2.6042vw, 50px);
  top: min(2.6042vw, 50px);
  z-index: 1;
  cursor: pointer;
  transition: opacity .2s;
}
.close_btn:hover {
  opacity: .8;
}
.close_btn:after, .close_btn:before {
  content: "";
  width: min(0.2083vw, 4px);
  height: min(3.125vw, 60px);
  background-color: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
}
.close_btn:after {
  transform: rotate(45deg);
}
.close_btn:before {
  transform: rotate(-45deg);
}
.modal {
  opacity: 0;
  z-index: -1;
  transition: .2s;
}
.modal.open {
  opacity: 1;
  z-index: 99999;
}
@media screen and (max-width: 768px) {
  .close_btn {
      width: 6.6666vw;
      height: 6.6666vw;
      top: 6.6666vw;
      right: 6vw;
  }
  .close_btn:after, .close_btn:before {
      width: 0.5333vw;
      height: 8vw;
  }
}


.page_logo {
  width: min(9.7396vw, 187px);
  position: absolute;
  left: min(1.4063vw, 27px);
  top: min(1.4063vw, 27px);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page_logo {
    width: 24.9333vw;
    top: 3.7333vw;
    left: 3.6vw;
  }
  body[class^="en"] .page_logo, body.fr .page_logo, body.de .page_logo {
    width: 20vw;
  }
  /* 購入導線追加 */
  .ja .page_logo {
    width: 20.9333vw;
  }
}

.bg {
  position: relative;
}
#fixed_bg {
  width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
}
#fixed_bg > * {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100%;
}
.fixed_bg_img {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
}
.fixed_bg_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

/* 追従購入ボタン */
#fixed_btn {
  position: fixed;
  top: 0;
  right: min(8.3333vw, 160px);
  z-index: 2;
  transition: transform .3s, opacity .3s;
}
#fixed_btn a {
  color: #fff;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: all .2s;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to right, #a00410 10%, #e50012, #a00410 90%);
  border: 1px solid #fff;
  border-top: none;
  text-align: center;
  min-width: min(14.5833vw, 280px);
  width: auto;
  padding: min(1.8229vw, 35px) min(3.125vw, 60px) min(1.8229vw, 35px) min(2.0833vw, 40px);
  font-size: min(.28rem, 28px);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.1);
}
#fixed_btn a:hover {
  box-shadow: none;
}
#fixed_btn a:hover:before {
  filter: brightness(110%);
}
#fixed_btn a:after {
  content: "";
  position: absolute;
  width: min(0.625vw, 12px);
  height: min(0.9375vw, 18px);
  background: url(../images/common/arrow_btn.png) center / contain no-repeat;
  top: 0;
  bottom: 0;
  right: min(1.8229vw, 35px);
  margin: auto;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #fixed_btn {
      right: 18.6667vw;
  }
  #fixed_btn a {
      font-size: .28rem;
      min-width: 40vw;
      padding: 4.6667vw 7vw 4.6667vw 6vw;
  }
  #fixed_btn a:after {
      width: 1.6vw;
      height: 2.4vw;
      right: 4.6667vw;
  }
}