@charset "UTF-8";
/************************************
  Font
************************************/
@font-face {
  font-family: "Noto Sans JP";
  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: "Noto Sans TC";
  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: "Noto Sans SC";
  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: "Noto Sans KR";
  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: "Noto Sans";
  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: "Roboto Condensed";
  src: url("https://www.residentevil.com/common/font/RobotoCondensed-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("https://www.residentevil.com/common/font/RobotoCondensed-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: "Oswald";
  src: url("https://www.residentevil.com/common/font/Oswald-VariableFont.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
/************************************
  reset
************************************/
a, area, button, input:not([type=range]), label, select, summary, textarea {
  touch-action: manipulation;
}

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

html {
  box-sizing: border-box;
  font-size: calc(100vw / 7.5);
}
@media screen and (min-width: 769px) {
  html {
    font-size: calc(100vw / 14.4);
    overflow-x: hidden;
  }
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 13.5px;
  }
}

*, ::after, ::before {
  box-sizing: inherit;
}

body {
  background: #000;
  color: #333;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.22rem;
  font-weight: 400;
  font-feature-settings: "palt";
}
@media screen and (min-width: 1024px) {
  body {
    font-size: 0.135rem;
  }
}
@media screen and (min-width: 1440px) {
  body {
    font-size: 13.5px;
  }
}
body[data-rating=ceroD] .disp-none {
  display: none !important;
}
body .title-ctr-re7 .disp-none {
  display: none !important;
}
body a {
  backface-visibility: hidden;
  border: none;
  color: #333;
  outline: none;
  text-decoration: none;
}
body ul li {
  list-style: none;
}
body ul li a {
  display: block;
}
body img {
  height: auto;
  width: 100%;
  border: none;
  image-rendering: -webkit-optimize-contrast;
  margin: auto;
  outline: none;
}
body img.base-size {
  height: auto;
  width: auto;
}
body button {
  backface-visibility: hidden;
  cursor: pointer;
  outline: none;
}

/************************************
    font
************************************/
body .ff-roboto {
  font-family: "Roboto Condensed", sans-serif;
}
body .ff-oswald {
  font-family: "Oswald", sans-serif;
}
body.lang-sbcs {
  font-family: "Roboto Condensed", sans-serif;
}
body.lang-ja {
  font-family: "Noto Sans JP", sans-serif;
}
body.lang-ja .ff-roboto {
  font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
}
body.lang-ja .ff-oswald {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
body.lang-zhhant {
  font-family: "Noto Sans TC", sans-serif;
}
body.lang-zhhant .ff-roboto {
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
}
body.lang-zhhant .ff-oswald {
  font-family: "Oswald", "Noto Sans TC", sans-serif;
}
body.lang-zhhans {
  font-family: "Noto Sans SC", sans-serif;
}
body.lang-zhhans .ff-roboto {
  font-family: "Roboto Condensed", "Noto Sans SC", sans-serif;
}
body.lang-zhhans .ff-oswald {
  font-family: "Oswald", "Noto Sans SC", sans-serif;
}
body.lang-ko {
  font-family: "Noto Sans KR", sans-serif;
}
body.lang-ko .ff-roboto {
  font-family: "Roboto Condensed", "Noto Sans KR", sans-serif;
}
body.lang-ko .ff-oswald {
  font-family: "Oswald", "Noto Sans KR", sans-serif;
}

/************************************
    hack
************************************/
.ua-ie main,
.ua-ie aside,
.ua-ie article,
.ua-ie section {
  display: block;
}

/************************************
	header
************************************/
/************************************
	footer
************************************/
.footer {
  position: relative;
  z-index: 1;
}

#title_footer .title-footer-menu ul li a span::before,
#title_footer .title-footer-legal a {
  color: #EB0000;
}

/************************************
	Container
************************************/
.wrapper {
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.sec-inner {
  padding: 0vw 5.97vw 0vw 5.97vw;
}
@media screen and (min-width: 769px) {
  .sec-inner {
    padding: 0vw 2.17vw 0vw 2.17vw;
  }
}
@media screen and (min-width: 1024px) {
  .sec-inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
    padding: 0vw 2.17vw 0vw 2.17vw;
    width: 69.56%;
  }
}
@media screen and (min-width: 1440px) {
  .sec-inner {
    padding: 0 40px;
  }
}

.main .sec {
  padding: 10.66vw 0vw 11.33vw 0vw;
}
@media screen and (min-width: 769px) {
  .main .sec {
    padding: 4.16vw 0vw 4.42vw 0vw;
  }
}
@media screen and (min-width: 1440px) {
  .main .sec {
    padding: 80px 0 85px;
  }
}

.sub {
  border-bottom: 1px solid #454545;
  padding: 10.66vw 0vw 11.33vw 0vw;
}
@media screen and (min-width: 769px) {
  .sub {
    padding: 4.16vw 0vw 4.42vw 0vw;
  }
}
@media screen and (min-width: 1440px) {
  .sub {
    padding: 80px 0 85px;
  }
}
@media screen and (min-width: 1024px) {
  .sub-inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }
}
.sub .sec {
  margin-bottom: 11.33vw;
}
@media screen and (min-width: 769px) {
  .sub .sec {
    margin-bottom: 8.66vw;
  }
}
@media screen and (min-width: 1440px) {
  .sub .sec {
    margin-bottom: 65px;
  }
}
.sub .sec-inner {
  width: 100%;
}

body:not(.page-top) .wrapper {
  padding-top: 11.33vw;
}
@media screen and (min-width: 769px) {
  body:not(.page-top) .wrapper {
    padding-top: 4.42vw;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .wrapper {
    padding-top: 85px;
  }
}
body:not(.page-top) .sub {
  padding: 0vw 0vw 11.33vw 0vw;
}
@media screen and (min-width: 769px) {
  body:not(.page-top) .sub {
    padding: 0vw 0vw 4.42vw 0vw;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .sub {
    padding: 0 0 85px;
  }
}

/************************************
	module
************************************/
/****** 背景 ******/
.page-bg::after {
  background-image: url(../images/bg-sp.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .page-bg::after {
    background-image: url(../images/bg.jpg);
  }
}

/****** 見出し/リード文/説明文 ******/
.sec-ttl {
  color: #EB0000;
  font-family: "Oswald", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 1024px) {
  .sec-ttl {
    font-size: 0.525rem;
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .sec-ttl {
    font-size: 52.5px;
    margin-bottom: 40px;
  }
}
.sec-ttl-s {
  font-size: 0.435rem;
}
@media screen and (min-width: 1024px) {
  .sec-ttl-s {
    font-size: 0.375rem;
  }
}
@media screen and (min-width: 1440px) {
  .sec-ttl-s {
    font-size: 37.5px;
  }
}
.sec-ttl-ss {
  font-size: 0.26rem;
}
@media screen and (min-width: 1024px) {
  .sec-ttl-ss {
    font-size: 0.178rem;
  }
}
@media screen and (min-width: 1440px) {
  .sec-ttl-ss {
    font-size: 17.8px;
  }
}
.sec-lead {
  color: #FFF;
  font-size: 0.35rem;
  font-weight: 900;
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 1024px) {
  .sec-lead {
    font-size: 0.3rem;
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .sec-lead {
    font-size: 30px;
    margin-bottom: 40px;
  }
}
.sec-desc {
  color: #FFF;
  font-size: 0.235rem;
  font-weight: 700;
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 1024px) {
  .sec-desc {
    font-size: 0.165rem;
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .sec-desc {
    font-size: 16.5px;
    margin-bottom: 40px;
  }
}

.conts-ttl {
  color: #EB0000;
  font-size: 0.35rem;
  font-weight: 900;
  margin-bottom: 4vw;
}
@media screen and (min-width: 1024px) {
  .conts-ttl {
    font-size: 0.3rem;
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1440px) {
  .conts-ttl {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.conts-desc {
  color: #FFF;
  font-size: 0.235rem;
  font-weight: 700;
  margin-bottom: 4vw;
}
@media screen and (min-width: 1024px) {
  .conts-desc {
    font-size: 0.165rem;
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1440px) {
  .conts-desc {
    font-size: 16.5px;
    margin-bottom: 30px;
  }
}

body:not(.page-top) .page-ttl {
  color: #EB0000;
  font-family: "Oswald", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) {
  body:not(.page-top) .page-ttl {
    font-size: 0.525rem;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .page-ttl {
    font-size: 52.5px;
  }
}
body:not(.page-top) .page-ttl-ctr {
  text-align: center;
}
body:not(.page-top) .page-ttl-s {
  font-size: 0.435rem;
}
@media screen and (min-width: 1024px) {
  body:not(.page-top) .page-ttl-s {
    font-size: 0.375rem;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .page-ttl-s {
    font-size: 37.5px;
  }
}
body:not(.page-top) .page-ttl-ss {
  font-size: 0.26rem;
}
@media screen and (min-width: 1024px) {
  body:not(.page-top) .page-ttl-ss {
    font-size: 0.178rem;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .page-ttl-ss {
    font-size: 17.8px;
  }
}
body:not(.page-top) .page-lead {
  color: #FFF;
  font-size: 0.35rem;
  font-weight: 900;
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 1024px) {
  body:not(.page-top) .page-lead {
    font-size: 0.3rem;
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  body:not(.page-top) .page-lead {
    font-size: 30px;
    margin-bottom: 40px;
  }
}

/****** テキスト ******/
.text-ctr .text {
  color: #FFF;
  line-height: 2;
}
.text-ctr .text:not(:last-of-type) {
  margin-bottom: 1em;
}

.text-link {
  display: inline;
  position: relative;
}
.text-link::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: background 0.2s ease;
  width: 100%;
}
.text-link-red {
  color: #eb0000;
  font-weight: 700;
}
.text-link-red::after {
  background: linear-gradient(#eb0000, #eb0000) 100% 100%/100% 1px no-repeat;
}
.text-link-red:hover::after {
  background: linear-gradient(#eb0000, #eb0000) 100% 100%/100% 0 no-repeat;
}
.text-link-yellow {
  color: #ffe179;
}
.text-link-yellow::after {
  background: linear-gradient(#ffe179, #ffe179) 100% 100%/100% 1px no-repeat;
}
.text-link-yellow:hover::after {
  background: linear-gradient(#ffe179, #ffe179) 100% 100%/100% 0 no-repeat;
}

/****** ボタン ******/
.btn-item a {
  display: block;
  padding: 4vw 5.33vw 4vw 5.33vw;
}
@media screen and (min-width: 769px) {
  .btn-item a {
    padding: 2vw 5.33vw 2vw 5.33vw;
  }
}
@media screen and (min-width: 1024px) {
  .btn-item a {
    padding: 0.78vw 2.08vw 0.78vw 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .btn-item a {
    padding: 15px 40px;
  }
}
.btn-buy .btn-item a {
  background-color: #EB0000;
  background-image: url(../images/common/btn-buy_pattern.png);
  background-repeat: no-repeat;
  color: #FFF;
}
.btn-buy-page {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .btn-buy-page {
    top: 1.8518518519%;
    right: 1.5625%;
    position: fixed;
  }
}
.btn-buy-page .btn-item a {
  background-position: 65% 5%;
  background-size: 140%;
  display: block;
  padding: 2.66vw 5.33vw 2.66vw 5.33vw;
}
@media screen and (min-width: 769px) {
  .btn-buy-page .btn-item a {
    padding: 1.6vw 5.33vw 1.6vw 5.33vw;
  }
}
@media screen and (min-width: 1024px) {
  .btn-buy-page .btn-item a {
    padding: 0.62vw 2.08vw 0.62vw 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .btn-buy-page .btn-item a {
    padding: 12px 40px;
  }
}
.btn-border .btn-item {
  border: 2px solid #EB0000;
  transition: background 0.2s ease;
}
.btn-border .btn-item a {
  color: #FFF;
  display: block;
}
.btn-border .btn-item:hover {
  background: #EB0000;
}
.btn-home {
  margin-bottom: 10.66vw;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .btn-home {
    margin-bottom: 4.16vw;
  }
}
@media screen and (min-width: 1440px) {
  .btn-home {
    margin-bottom: 80px;
  }
}
.btn-home .btn-item {
  display: inline-block;
  font-size: 0.34rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 1024px) {
  .btn-home .btn-item {
    font-size: 0.225rem;
  }
}
@media screen and (min-width: 1440px) {
  .btn-home .btn-item {
    font-size: 22.5px;
  }
}
.btn-home .btn-item a {
  background-color: #EB0000;
  background-image: url(../images/common/btn-buy_pattern.png);
  background-position: 90% 15%;
  background-repeat: no-repeat;
  background-size: 120%;
  color: #FFF;
  padding: 2.66vw 8vw 2.66vw 8vw;
}
@media screen and (min-width: 769px) {
  .btn-home .btn-item a {
    padding: 0.78vw 3.12vw 0.78vw 3.12vw;
  }
}
@media screen and (min-width: 1440px) {
  .btn-home .btn-item a {
    padding: 15px 60px;
  }
}

.prev-home {
  left: 20px;
  position: fixed;
  top: 10px;
}
.prev-home-label {
  font-size: 0.27rem;
}
@media screen and (min-width: 1024px) {
  .prev-home-label {
    font-size: 18px;
  }
}
.prev-home-label a {
  color: #FFF;
}
.prev-home-label a::before {
  background-image: url(../images/common/arrow_ic-w.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1em;
  display: inline-block;
  margin-right: 0.5em;
  width: 1.2em;
}

/****** アイコン ******/
.ic {
  line-height: 1;
}
.ic-more::after {
  background-image: url(../images/common/more_ic.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1.4em;
  margin-left: 0.5em;
  vertical-align: middle;
  width: 1.6em;
}
@media screen and (min-width: 769px) {
  .ic-more::after {
    height: 1em;
    width: 1.2em;
  }
}
.ic-text {
  vertical-align: middle;
}

/****** 言語選択 ******/
.langselect {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 769px) {
  .langselect {
    text-align: center;
  }
}
.langselect-inner {
  position: relative;
}
@media screen and (max-width: 768px) {
  .langselect-inner {
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .langselect-inner {
    display: inline-block;
    text-align: left;
  }
}
.langselect .SumoSelect {
  width: auto;
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect {
    background: rgba(0, 0, 0, 0);
    min-width: 160px;
    padding: 0 40px;
    transition: background 0.2s ease;
  }
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect.open {
    background: rgba(0, 0, 0, 0.8);
  }
}
.langselect .SumoSelect.open .optWrapper {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
  top: auto;
  visibility: visible;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect:hover .CaptionCont {
    border: 1px solid #EB0000 !important;
  }
}
.langselect .SumoUnder {
  display: none;
}
.langselect .CaptionCont {
  background: #000;
  border: 1px solid #454545 !important;
  border-radius: 0;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 1.1em;
  min-height: auto;
  min-height: initial;
  padding: 0.5em 1.5em;
}
@media screen and (min-width: 769px) {
  .langselect .CaptionCont {
    font-size: 13px;
    transition: border 0.2s ease;
  }
}
.langselect .CaptionCont span {
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 6px;
  position: relative;
  vertical-align: middle;
}
.langselect .CaptionCont label {
  display: none;
}
.langselect .CaptionCont::before {
  background-image: url(../images/common/earth_ic.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  width: 20px;
}
.langselect .optWrapper {
  background: none;
  border: none;
  border-radius: 0;
  bottom: 100%;
  box-shadow: none !important;
  display: block !important;
  font-size: 13px;
  opacity: 0;
  padding: 20px 20px 10px;
  position: absolute;
  text-align: center;
  top: auto;
  transition: all 0.2s ease;
  visibility: hidden;
  z-index: -1;
}
.langselect .optWrapper .options {
  border-radius: 0;
  display: inline-block;
  max-height: auto;
  max-height: initial;
}
.langselect .optWrapper .opt {
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: right;
  transition: background 0.2s ease;
}
.langselect .optWrapper .opt:not(:last-child) {
  margin-bottom: 4px;
}
.langselect .optWrapper .opt:hover {
  background: none !important;
  color: #EB0000;
}
.langselect .optWrapper .opt.is-selected {
  color: #EB0000;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .langselect .optWrapper .opt.blank {
    display: none;
  }
}

/* Hack */
.ua-ie .SumoSelect.open .optWrapper .options {
  max-height: 100% !important;
}

/****** モーダル ******/
.mfp-ctr {
  display: none;
}

.agecheck-btn {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

/*--- AJAX ---*/
.mfp-ajax {
  overflow-y: auto;
}
.mfp-ajax .mfp-ctr {
  display: block;
}
.mfp-ajax .mfp-ctr .mfp {
  display: none;
}
.mfp-ajax.mfp-upgrade-upgrade #upgrade {
  display: block;
}
.mfp-ajax.mfp-upgrade-cost #cost {
  display: block;
}
.mfp-ajax.mfp-upgrade-trophy #trophy {
  display: block;
}
.mfp-ajax.mfp-upgrade-downgrade #downgrade {
  display: block;
}

/*--- common ---*/
.mfp-zoom-out-cur {
  cursor: pointer;
}
.mfp-img {
  padding: 0 !important;
}
.mfp-image-holder .mfp-close, .mfp-image-holder .mfp-close {
  overflow: hidden;
}
.mfp-preloader {
  font-size: 0;
}
.mfp-preloader::before {
  animation: loadingSpin 1s linear infinite;
  background: url(../images/common/loading_ic.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 36px;
  margin: -18px 0 0 -18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  z-index: -1;
}
.mfp-close {
  cursor: pointer !important;
  height: 8vw !important;
  opacity: 1;
  position: fixed !important;
  right: 1.5vw !important;
  text-indent: 1000%;
  top: 1.5vw !important;
  white-space: nowrap;
  width: 8vw !important;
}
@media screen and (min-width: 769px) {
  .mfp-close {
    height: 3vw !important;
    right: 2vw !important;
    transition: opacity 0.4s ease-in-out;
    width: 3vw !important;
  }
}
.mfp-close::before, .mfp-close::after {
  background: #FFF;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
}
.mfp-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mfp-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 769px) {
  .mfp-close:hover {
    opacity: 0.8;
  }
}
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.9;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade .mfp-content {
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.mfp-fade.mfp-ready .mfp-container {
  opacity: 1;
}
.mfp-fade.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-removing .mfp-content {
  opacity: 0;
}
.mfp-agecheck-simple {
  color: #FFF;
}
.mfp-agecheck-simple.mfp-bg {
  opacity: 0.9 !important;
}
.mfp-agecheck-simple .mfp-content {
  margin: 0 auto;
  width: 86.66%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck-simple .mfp-content {
    max-width: 980px;
    position: relative;
    width: 45.83%;
  }
}
.mfp-agecheck-simple .mfp-agecheck {
  padding: 12.3vw 6.15vw 12.3vw 6.15vw;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck-simple .mfp-agecheck {
    padding: 12vw 16vw 12vw 16vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck-simple .mfp-agecheck {
    padding: 120px 160px;
  }
}
.mfp-agecheck-simple .mfp-ttl {
  font-size: 0.4rem;
  margin-bottom: 1.5em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .mfp-agecheck-simple .mfp-ttl {
    font-size: 0.32rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck-simple .mfp-ttl {
    font-size: 32px;
  }
}
.mfp-agecheck-simple .mfp-btn .btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mfp-agecheck-simple .mfp-btn .btn-item {
  font-size: 0.28rem;
  font-weight: 700;
  text-align: center;
  width: 48%;
}
@media screen and (min-width: 1024px) {
  .mfp-agecheck-simple .mfp-btn .btn-item {
    font-size: 0.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck-simple .mfp-btn .btn-item {
    font-size: 20px;
  }
}
@media screen and (min-width: 769px) {
  .mfp-video .mfp-container {
    padding: 40px 0;
  }
}
.mfp-video .mfp-content {
  height: inherit;
  max-width: 100%;
}
.mfp-video .mfp-iframe-scaler {
  height: inherit;
  max-height: 90vh;
  padding-top: 0;
  position: relative;
}
.mfp-video .mfp-close {
  right: 0.5vw !important;
  top: 0.25vw !important;
}
@media screen and (min-width: 769px) {
  .mfp-video .mfp-close {
    height: 3vw !important;
    width: 3vw !important;
  }
}
.mfp-video .mfp-close::before, .mfp-video .mfp-close::after {
  width: 20px;
}
.mfp-upgrade .mfp-content {
  margin: 0 auto;
  padding: 16vw 0;
  width: 86.66%;
}
@media screen and (min-width: 769px) {
  .mfp-upgrade .mfp-content {
    padding: 8vw 0;
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade .mfp-content {
    max-width: 980px;
    width: 51.04%;
  }
}
.mfp-upgrade .mfp-upgrade {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #454545;
  color: #FFF;
  padding: 5.79vw 5.79vw 5.79vw 5.79vw;
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade .mfp-upgrade {
    padding: 4.08vw 4.08vw 4.08vw 4.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade .mfp-upgrade {
    padding: 40px;
  }
}
.mfp-upgrade .mfp-upgrade-ttl {
  color: #EB0000;
  font-size: 0.35rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4vw;
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade .mfp-upgrade-ttl {
    font-size: 0.3rem;
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-upgrade .mfp-upgrade-ttl {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.mfp-upgrade .mfp-text-ctr {
  font-size: 0.24rem;
  line-height: 2;
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade .mfp-text-ctr {
    font-size: 0.16rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-upgrade .mfp-text-ctr {
    font-size: 16px;
  }
}
.mfp-upgrade .mfp-text-ctr .text:not(:last-child) {
  margin-bottom: 1em;
}
.mfp-upgrade .mfp-text-ctr .text-link-ic .ic-text {
  vertical-align: middle;
}
.mfp-upgrade .mfp-text-ctr .text-link-ic::before {
  content: "»";
  font-size: 1.4em;
  margin-right: 0.1em;
  vertical-align: middle;
}
.mfp-upgrade-trophy .mfp-text-ctr {
  margin-bottom: 4vw;
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade-trophy .mfp-text-ctr {
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-upgrade-trophy .mfp-text-ctr {
    margin-bottom: 30px;
  }
}
.mfp-upgrade-trophy .trophy-list {
  border-top: 1px solid #454545;
  border-left: 1px solid #454545;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.2;
}
.mfp-upgrade-trophy .trophy-list-item {
  border-right: 1px solid #454545;
  border-bottom: 1px solid #454545;
  padding: 1em;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .mfp-upgrade-trophy .trophy-list-item {
    width: 50%;
  }
}
.mfp-update .mfp-content {
  margin: 0 auto;
  padding: 16vw 0;
  width: 86.66%;
}
@media screen and (min-width: 769px) {
  .mfp-update .mfp-content {
    padding: 8vw 0;
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-content {
    max-width: 980px;
    width: 51.04%;
  }
}
.mfp-update .mfp-update {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #454545;
  color: #FFF;
  line-height: 1.5;
  padding: 5.79vw 5.79vw 5.79vw 5.79vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-update {
    padding: 4.08vw 4.08vw 4.08vw 4.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-update {
    padding: 40px;
  }
}
.mfp-update .mfp-update-inner:not(:last-of-type) {
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-update-inner:not(:last-of-type) {
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-update .mfp-update-inner:not(:last-of-type) {
    margin-bottom: 40px;
  }
}
.mfp-update .mfp-ctr .mfp {
  display: block;
}
.mfp-update .mfp-ttl {
  color: #EB0000;
  font-size: 0.35rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 2.66vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-ttl {
    font-size: 0.3rem;
    margin-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-update .mfp-ttl {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
.mfp-update .mfp-update-date {
  font-size: 0.3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 2.66vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .mfp-update-date {
    font-size: 0.24rem;
    margin-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-update .mfp-update-date {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
.mfp-update .update-title-name {
  color: #EB0000;
  font-size: 0.22rem;
  font-weight: 700;
  margin-bottom: 2vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .update-title-name {
    font-size: 0.16rem;
    margin-bottom: 0.78vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-update .update-title-name {
    font-size: 16px;
    margin-bottom: 15px;
  }
}
.mfp-update .update-title:not(:last-child) {
  margin-bottom: 4vw;
}
@media screen and (min-width: 1024px) {
  .mfp-update .update-title:not(:last-child) {
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-update .update-title:not(:last-child) {
    margin-bottom: 30px;
  }
}
.mfp-update .update-item {
  border-top: 1px solid #454545;
  border-left: 1px solid #454545;
}
.mfp-update .update-item .update-list-ttl {
  border-right: 1px solid #454545;
  font-weight: 700;
  padding: 1em 1em 0;
}
.mfp-update .update-item .update-list {
  border-right: 1px solid #454545;
  border-bottom: 1px solid #454545;
  line-height: 1.2;
  padding: 1em;
}
.mfp-update .update-item .update-list-item:not(:last-child) {
  margin-bottom: 0.2em;
}
.mfp-agecheck.mfp-bg {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.8);
}
.mfp-agecheck .mfp-content {
  margin: 0 auto;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-content {
    margin: 8vh auto;
    position: relative;
    width: 45.83%;
  }
}
.mfp-agecheck .mfp-agecheck {
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck {
    padding: 0.4rem 0.8rem;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
  margin-right: auto;
  margin-bottom: 0.4rem;
  margin-left: auto;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
    margin-bottom: 0.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
    margin-bottom: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
  color: #FFF;
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
    font-size: 0.32rem;
    margin-bottom: 0.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-block form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input {
  position: relative;
  text-align: center;
  width: 28%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input {
    width: 26%;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl,
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-text {
  display: inline-block;
  vertical-align: middle;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
  color: #FFF;
  display: block;
  font-size: 0.28rem;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
    font-size: 0.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
    font-size: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-text {
  display: block;
  width: 100%;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
  border: 1px solid #454545;
  box-sizing: border-box;
  font-size: 0.26rem;
  padding: 0.8em 0.5em 0.6em;
  text-align: center;
  max-width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
    font-size: 0.2rem;
    padding: 0.6em 1em 0.4em;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
    font-size: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel].is-error {
  background: #FFCCCC;
  border: 1px solid #EB0000;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
  color: #FFF;
  font-size: 0.36rem;
  position: relative;
  text-align: center;
  top: 1.5em;
  width: 1em;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
    font-size: 0.28rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
    font-size: 28px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
  margin: 0.8rem auto 0;
  width: 56.71%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
    margin: 0.4rem auto 0;
    width: 35.18%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
    margin: 40px auto 0;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
  background: #000;
  cursor: pointer;
  font-size: 0.26rem;
  transition: all 0.4s ease;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
    font-size: 0.18rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
    font-size: 18px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
  background: transparent;
  border: none;
  color: #FFF;
  display: none;
  font-size: 0.74rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
    font-size: 0.58rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
    font-size: 58px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder {
  pointer-events: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-active {
  display: block;
  pointer-events: initial;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-active a {
  background-color: #eb0000;
  background-position: left top;
  background-size: cover;
  color: #FFF;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-hide {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-active {
  display: block;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-active a {
  background-color: #eb0000;
  background-position: left top;
  background-size: cover;
  color: #FFF;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-hide {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFF;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0.3rem 0.35rem;
  position: relative;
  text-align: center;
  transition: all 0.4s ease;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
    padding: 0.2rem 0.1rem;
  }
}
@media screen and (min-width: 1440px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
    padding: 20px 10px;
  }
}

.is-age-under .mfp-agecheck .mfp-agecheck {
  background: transparent;
  border: none;
  padding: 0;
}
.is-age-under .mfp-agecheck .mfp-agecheck-form {
  display: none;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn {
  width: 100%;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#under {
  display: block;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#enterUnder {
  display: none;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#enter {
  display: none;
}

/****** hover ******/
.hover-brightness {
  display: block;
}
@media screen and (min-width: 769px) {
  .hover-brightness img {
    transition: filter 0.3s ease;
  }
}
@media screen and (min-width: 769px) {
  .hover-brightness:hover img {
    filter: brightness(1.2);
  }
}
.hover-opacity {
  display: block;
}
@media screen and (min-width: 769px) {
  .hover-opacity {
    transition: opacity 0.3s ease;
  }
}
@media screen and (min-width: 769px) {
  .hover-opacity:hover {
    opacity: 0.8;
  }
}

/************************************
	Object
************************************/
/****** 表示 ******/
@media screen and (max-width: 768px) {
  .hide-sp {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .hide-pc {
    display: none;
  }
}
/****** Flexbox ******/
.fl-ctr {
  display: flex;
  flex-wrap: warp;
}
.fl-al-t {
  align-items: flex-start;
}
.fl-al-c {
  align-items: center;
}
.fl-al-b {
  align-items: flex-end;
}
.fl-jc-l {
  justify-content: flex-start;
}
.fl-jc-c {
  justify-content: center;
}
.fl-jc-r {
  justify-content: flex-end;
}
.fl-jc-sb {
  justify-content: space-between;
}
.fl-jc-ar {
  justify-content: space-around;
}

/****** テキスト ******/
/*----- 位置 -----*/
.ta-l {
  text-align: left !important;
}
@media screen and (min-width: 769px) {
  .ta-l-pc {
    text-align: left !important;
  }
}
.ta-c {
  text-align: center !important;
}
@media screen and (min-width: 769px) {
  .ta-c-pc {
    text-align: center !important;
  }
}
.ta-r {
  text-align: right !important;
}
@media screen and (min-width: 769px) {
  .ta-r-pc {
    text-align: right !important;
  }
}

/****** 余白 ******/
/*----- margin -----*/
.mg-0 {
  margin: 0 !important;
}
.mg-b-0 {
  margin-bottom: 0 !important;
}
.mg-b-10 {
  margin-bottom: 2.66vw;
}
@media screen and (min-width: 769px) {
  .mg-b-10 {
    margin-bottom: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-10 {
    margin-bottom: 10px;
  }
}
.mg-b-20 {
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 769px) {
  .mg-b-20 {
    margin-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-20 {
    margin-bottom: 20px;
  }
}
.mg-b-30 {
  margin-bottom: 8vw;
}
@media screen and (min-width: 769px) {
  .mg-b-30 {
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-30 {
    margin-bottom: 30px;
  }
}
.mg-b-40 {
  margin-bottom: 10.66vw;
}
@media screen and (min-width: 769px) {
  .mg-b-40 {
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-40 {
    margin-bottom: 40px;
  }
}
.mg-t-10 {
  margin-top: 2.66vw;
}
@media screen and (min-width: 769px) {
  .mg-t-10 {
    margin-top: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-10 {
    margin-top: 10px;
  }
}
.mg-t-20 {
  margin-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .mg-t-20 {
    margin-top: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-20 {
    margin-top: 20px;
  }
}
.mg-t-30 {
  margin-top: 8vw;
}
@media screen and (min-width: 769px) {
  .mg-t-30 {
    margin-top: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-30 {
    margin-top: 30px;
  }
}
.mg-t-40 {
  margin-top: 10.66vw;
}
@media screen and (min-width: 769px) {
  .mg-t-40 {
    margin-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-40 {
    margin-top: 40px;
  }
}

/*----- padding -----*/
.pd-0 {
  padding: 0 !important;
}
.pd-b-0 {
  padding-bottom: 0 !important;
}
.pd-b-10 {
  padding-bottom: 1.33vw;
}
@media screen and (min-width: 769px) {
  .pd-b-10 {
    padding-bottom: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-10 {
    padding-bottom: 10px;
  }
}
.pd-b-20 {
  padding-bottom: 2.66vw;
}
@media screen and (min-width: 769px) {
  .pd-b-20 {
    padding-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-20 {
    padding-bottom: 20px;
  }
}
.pd-b-30 {
  padding-bottom: 4vw;
}
@media screen and (min-width: 769px) {
  .pd-b-30 {
    padding-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-30 {
    padding-bottom: 30px;
  }
}
.pd-b-40 {
  padding-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .pd-b-40 {
    padding-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-40 {
    padding-bottom: 40px;
  }
}
.pd-t-10 {
  padding-top: 1.33vw;
}
@media screen and (min-width: 769px) {
  .pd-t-10 {
    padding-top: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-10 {
    padding-top: 10px;
  }
}
.pd-t-20 {
  padding-top: 2.66vw;
}
@media screen and (min-width: 769px) {
  .pd-t-20 {
    padding-top: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-20 {
    padding-top: 20px;
  }
}
.pd-t-30 {
  padding-top: 4vw;
}
@media screen and (min-width: 769px) {
  .pd-t-30 {
    padding-top: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-30 {
    padding-top: 30px;
  }
}
.pd-t-40 {
  padding-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .pd-t-40 {
    padding-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-40 {
    padding-top: 40px;
  }
}

/****** Clearfix ******/
.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}