@charset "UTF-8";
/************************************
  reset
************************************/
a, area, button, input:not([type=range]), label, select, summary, textarea {
  touch-action: manipulation;
}

/************************************
  base
************************************/
/************************************
  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;
}
@font-face {
  font-family: "Markazi Text";
  src: url("https://www.monsterhunter.com/common/font/MarkaziText-VariableFont.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 700;
}
@font-face {
  font-family: "Cinzel";
  src: url("https://www.monsterhunter.com/common/font/Cinzel-VariableFont_wght.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
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 / 19.2);
    overflow-x: hidden;
  }
}

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

body {
  color: #403621;
  font-family: "Source Serif 4", serif;
  font-size: 0.22rem;
  font-weight: 400;
  font-feature-settings: "palt";
}
@media screen and (min-width: 769px) {
  body {
    font-size: min(0.18rem, 18px);
  }
}
body.lang-zhhans {
  font-family: "source-han-sans-simplified-c", sans-serif;
}
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;
  margin: auto;
  outline: none;
}
body img.base-size {
  height: auto;
  width: auto;
}
body button {
  backface-visibility: hidden;
  cursor: pointer;
  outline: none;
}
body .wrapper {
  letter-spacing: 0.015rem;
  width: 100%;
}
@media screen and (min-width: 769px) {
  body .wrapper {
    letter-spacing: min(0.015rem, 1.5px);
  }
}

/************************************
    font
************************************/
body.lang-ja {
  font-family: "source-han-serif-japanese", serif;
}
body.lang-zhhant {
  font-family: "source-han-serif-tc", serif;
}
body.lang-zhhans {
  font-family: "source-han-serif-sc", serif;
}
body.lang-ko {
  font-family: "source-han-serif-korean", serif;
}

.ff-serif {
  font-family: "Source Serif 4", serif;
}
.lang-ja .ff-serif {
  font-family: "source-han-serif-japanese", serif;
}
.lang-zhhant .ff-serif {
  font-family: "source-han-serif-tc", serif;
}
.lang-zhhans .ff-serif {
  font-family: "source-han-serif-sc", serif;
}
.lang-ko .ff-serif {
  font-family: "source-han-serif-korean", serif;
}

.ff-sans {
  font-family: "Source Sans 3", sans-serif;
}
.lang-ja .ff-sans {
  font-family: "source-han-sans-japanese", sans-serif;
}
.lang-zhhant .ff-sans {
  font-family: "source-han-sans-traditional", sans-serif;
}
.lang-zhhans .ff-sans {
  font-family: "source-han-sans-simplified-c", sans-serif;
}
.lang-ko .ff-sans {
  font-family: "source-han-sans-korean", sans-serif;
}

.ff-cinzel {
  font-family: "Cinzel";
}

.ff-it {
  font-style: italic;
}

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

/************************************
	header
************************************/
html.is-spnav {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  html.is-spnav .spnav-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    opacity: 0.9;
  }
}

.site-header {
  position: absolute;
  font-family: "Cinzel", serif;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .site-header {
    height: min(0.98rem, 98px);
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-header.png);
    background-repeat: repeat-x;
    background-position: right;
    background-size: auto 100%;
    z-index: 9;
  }
}
.site-header-logo-sp {
  width: 30%;
  position: relative;
  margin: 15px auto 15px 10px;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .site-header-logo-sp {
    display: none;
  }
}
body.page-top .site-header-logo-sp {
  display: none;
}
.site-header-logo {
  margin-right: auto;
  z-index: 9;
}
@media screen and (max-width: 768px) {
  .site-header-logo {
    width: 50%;
    margin: 6vw auto 5vw;
    order: 1;
  }
}
@media screen and (min-width: 769px) {
  .site-header-logo {
    margin: 10px 0 0 10px;
    width: min(1.36rem, 136px);
  }
}
.site-header-inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9;
}
@media screen and (max-width: 768px) {
  .site-header-inner {
    width: 100%;
    height: 100dvh;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/gnav_bg.jpg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    transition: right 0.4s ease-in;
    position: fixed;
    top: 0;
    right: -100vw;
    overflow-y: auto;
  }
  .site-header-inner.is-open {
    right: 0;
  }
}
@media screen and (min-width: 769px) {
  .site-header-inner {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
}
.site-header-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.4rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .site-header-list {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 8vw 5vw 8vw 8vw;
    order: 3;
  }
}
@media screen and (min-width: 769px) {
  .site-header-list {
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    margin-inline: auto;
    padding: 0;
    height: min(0.7rem, 70px);
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .site-header-list {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .site-header-list {
    font-size: min(0.22rem, 20px);
  }
}
.site-header-list-item {
  line-height: 1.2;
  position: relative;
  text-shadow: 0px 0px 9px black;
}
@media screen and (max-width: 768px) {
  .site-header-list-item {
    margin-bottom: min(0.5rem, 50px);
  }
}
@media screen and (min-width: 769px) {
  .site-header-list-item {
    margin-right: min(0.3rem, 30px);
    padding-right: min(0.3rem, 30px);
  }
}
@media screen and (min-width: 769px) {
  .site-header-list-item:last-child {
    margin-right: 0;
    padding-right: 0;
  }
}
.site-header-list-item a {
  color: #FFF;
  transition: color 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.site-header-list-item a span {
  display: block;
}
.site-header-list-item a span.ruby {
  display: block;
  font-size: min(0.2rem, 20px);
}
@media screen and (min-width: 769px) {
  .site-header-list-item a span.ruby {
    font-size: min(0.12rem, 12px);
  }
}
@media screen and (max-width: 768px) {
  .site-header-list-item a span {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .site-header-products {
    width: 100%;
    order: 1;
    margin-bottom: 6vw;
  }
}
.site-header-products a {
  width: min(70vw, 500px);
  height: min(20vw, 140px);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-nav-products.png);
  background-size: 100%;
  transition: all 0.3s ease-in-out;
  color: #fff;
}
@media screen and (min-width: 769px) {
  .site-header-products a {
    width: min(2.5rem, 250px);
    height: min(0.7rem, 70px);
    margin-left: 0;
    margin-right: min(0.2rem, 20px);
  }
}
.site-header-products a span {
  display: block;
  font-size: min(0.4rem, 40px);
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .site-header-products a span {
    font-size: min(0.23rem, 23px);
  }
}
.site-header-products a span.ruby {
  display: block;
  font-size: min(0.2rem, 20px);
  margin-bottom: 0;
  margin-top: min(0.05rem, 5px);
}
@media screen and (min-width: 769px) {
  .site-header-products a span.ruby {
    font-size: min(0.15rem, 15px);
  }
}
.site-header-products a::after {
  content: "";
  display: block;
  width: min(0.15rem, 15px);
  height: min(0.15rem, 15px);
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn-wht.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 769px) {
  .site-header-products a:hover {
    filter: brightness(1.2);
  }
}
@media screen and (max-width: 768px) {
  .site-header .sp-nav {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99;
    width: 19.06vw;
    height: 20.93vw;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/gnav_btn_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: none;
  }
}
.site-header .sp-nav span {
  display: inline-block;
  transition: all 0.4s; /*アニメーションの設定*/
  position: absolute;
  left: 24%;
  height: 2px;
  border-radius: 5px;
  background: #fff;
  width: 50%;
}
.site-header .sp-nav span:nth-of-type(1) {
  top: 30%;
}
.site-header .sp-nav span:nth-of-type(2) {
  top: 40%;
}
.site-header .sp-nav span:nth-of-type(3) {
  top: 50%;
}
.site-header .sp-nav span:nth-of-type(3)::after {
  content: "MENU";
  width: 100%;
  position: absolute;
  top: 60%;
  left: 0;
  color: #fff;
  font-size: min(0.22rem, 22px);
  padding-top: 0.5em;
  text-align: center;
  text-transform: uppercase;
}
.site-header .sp-nav.is-open span:nth-of-type(1) {
  top: 30%;
  left: 25%;
  transform: translateY(6px) rotate(-45deg);
  width: 50%;
}
.site-header .sp-nav.is-open span:nth-of-type(2) {
  opacity: 0;
}
.site-header .sp-nav.is-open span:nth-of-type(3) {
  top: 45%;
  left: 26%;
  transform: translateY(-6px) rotate(45deg);
  width: 50%;
}
.site-header .sp-nav.is-open span:nth-of-type(3)::after {
  content: "CLOSE";
  font-size: min(0.22rem, 22px);
  transform: translateY(0) rotate(-45deg);
  bottom: 10px;
  left: 20%;
  width: 100%;
  padding-top: 1.2em;
}
@media screen and (min-width: 769px) {
  .site-header .sp-nav {
    display: none !important;
    opacity: 0;
  }
}

.video-control {
  position: absolute;
  z-index: 5;
  top: 50vw;
  right: 3%;
}
.video-control a {
  display: none;
  width: min(1.35rem, 135px);
  transition: filter 0.5s ease-in-out;
  cursor: pointer;
}
.video-control a:hover {
  filter: brightness(1.3);
}

.scroll {
  width: 100%;
  position: relative;
}
.scroll-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.scroll-inner .text-ctr .text {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .scroll-inner .text-ctr .text {
    font-size: min(0.24rem, 24px);
  }
}
.scroll-inner .pic {
  width: min(0.5rem, 50px);
}

/************************************
	footer
************************************/
#title_footer {
  position: relative;
  z-index: 1;
  background-color: #000;
  padding-top: 0.2rem;
}

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

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

.sec {
  padding: 11.33% 0% 11.33% 0%;
}
@media screen and (min-width: 769px) {
  .sec {
    padding: 3.9% 0% 4.42% 0%;
  }
}
@media screen and (min-width: 1400px) {
  .sec {
    padding: 100px 0 85px;
  }
}
.sec-inner {
  padding: 0% 5.33% 0% 5.33%;
}
@media screen and (min-width: 769px) {
  .sec-inner {
    padding: 0% 2.08% 0% 2.08%;
  }
}
@media screen and (min-width: 769px) {
  .sec-inner {
    padding: 0;
  }
}

.main {
  width: 100%;
}
.main .sec {
  position: relative;
  z-index: 1;
}

.sub {
  width: 100%;
  z-index: 1;
  padding: 0% 0% 0% 0%;
}
@media screen and (min-width: 769px) {
  .sub {
    padding: 0% 0% 2.08% 0%;
    position: relative;
  }
}
@media screen and (min-width: 1400px) {
  .sub {
    padding: 0;
  }
}
.sub .sec-inner {
  padding: 5.33% 5.33% 0% 5.33%;
}
@media screen and (min-width: 769px) {
  .sub .sec-inner {
    margin-right: auto;
    margin-left: auto;
    padding: 2.08% 2.08% 0% 2.08%;
  }
}
@media screen and (min-width: 1024px) {
  .sub .sec-inner {
    padding: 40px min(0.4rem, 40px);
    width: min(90%, 1240px);
  }
}

/************************************
	home-btn
************************************/
.home-btn {
  width: 100%;
  position: relative;
  padding: min(0.75rem, 75px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-wht.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/************************************
	btn-pagetop
************************************/
.btn-pagetop {
  display: block;
  width: min(1.3rem, 130px);
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: min(0.8rem, 80px);
  right: min(0.2rem, 20px);
  z-index: 4;
  transition: all 0.5s ease;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .btn-pagetop {
    bottom: min(0.2rem, 20px);
    width: min(1.25rem, 125px);
  }
}
.btn-pagetop.is-active {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 769px) {
  .btn-pagetop:hover {
    filter: brightness(1.4);
  }
}
.btn-pagetop img {
  width: 100%;
}

/************************************
	rating-logo
************************************/
.rating-logo {
  display: block;
  width: min(30%, 180px);
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .rating-logo {
    width: min(10%, 180px);
  }
}

/************************************
	module
************************************/
.page-bg {
  background-color: #000;
  display: block;
  width: 100vw;
  height: 100%;
  left: 50%;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  backface-visibility: visible;
  z-index: -2;
}
.page-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.page-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.deco-line-sec::before {
  content: "";
  width: 100%;
  height: 5vw;
  display: block;
  margin-top: min(-0.1rem, -10px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco_line_sec_first.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: top;
  position: absolute;
  top: 0;
  z-index: 20;
}
@media screen and (min-width: 769px) {
  .deco-line-sec::before {
    height: min(0.38rem, 38px);
  }
}

.deco-frame-line {
  width: 100%;
  margin: 0 auto;
  padding: min(0.4rem, 40px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-top.png), url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-bottom.png);
  background-repeat: repeat-x;
  background-size: min(0.36rem, 36px) auto;
  background-position: top, bottom;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #a98012;
  position: relative;
}
.deco-frame-line::before {
  content: "";
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  top: -5px;
  left: -5px;
  -o-border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/20px round;
     border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/20px round;
  pointer-events: none;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .deco-frame-line::before {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    -o-border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/40px round;
       border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/40px round;
  }
}

.deco-line-both-arrow {
  width: 100%;
  position: relative;
  margin-bottom: min(0.4rem, 40px);
}
.deco-line-both-arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: min(0.05rem, 5px);
  margin-top: min(0.4rem, 40px);
  background: url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-both-arrow-left.png), url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-both-arrow-center.png), url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-both-arrow-right.png);
  background-repeat: no-repeat, repeat-y, no-repeat;
  background-position: left 0, center 0, right 0;
  background-size: 10% 100%, 80% 100%, 10% 100%;
}
.page .deco-line-both-arrow.sec-ttl::after {
  width: min(5.8rem, 580px);
  margin-top: min(0.4rem, 40px);
  margin-left: auto;
  margin-right: auto;
}

.deco-cap-left-line {
  padding-left: 1em;
  position: relative;
  text-align: left !important;
}
.deco-cap-left-line::before {
  content: "";
  display: block;
  width: 0.3em;
  height: 1.5em;
  position: absolute;
  left: 0;
  margin-right: 0.5em;
  background: url(https://www.monsterhunter.com/stories/assets/images/common/deco-cap-left-line.png);
  background-repeat: no-repeat;
  background-position: left 0, center 0, right 0;
  background-size: contain;
}

/*sec*/
.sec {
  position: relative;
}
.sec-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
}
.sec-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.sec-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sec-bg.bg-wht {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-top.png), url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-bottom.png);
  background-repeat: repeat-x;
  background-size: min(0.36rem, 36px) auto;
  background-position: top, bottom;
  background-color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid #a98012;
  border-bottom: 1px solid #a98012;
}

/***************************
下層fv
***************************/
body.page .sec-fv {
  overflow: hidden;
  padding-bottom: 6vw;
}
@media screen and (min-width: 769px) {
  body.page .sec-fv {
    padding: min(1.58rem, 158px) 0 min(0.5rem, 50px);
  }
}
body.page .sec-fv .fv-bg {
  display: block;
  width: 100%;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  backface-visibility: visible;
  z-index: -2;
}
body.page .sec-fv .fv-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
body.page .sec-fv .fv-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  body.page .sec-fv .title {
    padding-top: min(0.8rem, 80px);
  }
}
body.page .sec-fv .title-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.page .sec-fv .title .sec-ttl {
  font-size: clamp(20px, 0.4rem, 40px);
}
body.page .sec-fv .title .sec-ttl .deco-frame-line {
  width: 80%;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  body.page .sec-fv .title .sec-ttl .deco-frame-line {
    width: min(8rem, 800px);
    z-index: 4;
  }
}
body.page .sec-fv .title .sec-ttl .deco-frame-line .deco-line-both-arrow {
  margin-bottom: min(0.2rem, 20px);
}
body.page .sec-fv .title .sec-ttl .pic1 {
  position: absolute;
}
@media screen and (max-width: 768px) {
  body.page .sec-fv .title .sec-ttl .pic1 {
    z-index: 3;
  }
}
body.page .sec-fv .title .sec-ttl .pic2 {
  position: absolute;
}
@media screen and (max-width: 768px) {
  body.page .sec-fv .title .sec-ttl .pic2 {
    z-index: 2;
  }
}

/****** 見出し/リード文/説明文 ******/
.sec-ttl {
  font-weight: 500;
  font-size: min(0.67rem, 67px);
  line-height: 1.2;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .sec-ttl {
    margin-bottom: min(0.75rem, 75px);
    font-size: min(0.75rem, 75px);
  }
}
.sec-ttl .deco-arrow {
  width: -moz-fit-content;
  width: fit-content;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
}
.sec-ttl .deco-arrow:before, .sec-ttl .deco-arrow:after {
  content: "";
  height: 1em;
  width: 40px;
  display: inline-block;
  background-size: 40px 3px;
  background-repeat: no-repeat;
  margin: 0 1%;
}
@media screen and (min-width: 769px) {
  .sec-ttl .deco-arrow:before, .sec-ttl .deco-arrow:after {
    width: 85px;
    background-size: 85px 6px;
  }
}
.sec-ttl .deco-arrow:before {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-ttl-left.png);
  background-position: 0 65%;
}
.sec-ttl .deco-arrow:after {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-ttl-right.png);
  background-position: 0 65%;
}
.sec-ttl span {
  background: linear-gradient(to bottom, #a77e10 20%, #483606 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-ttl span.strong {
  display: inline-block;
  background: linear-gradient(to bottom, #c19f29 20%, #a98012 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.conts-topics .sec-ttl span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-ttl .ruby {
  font-size: min(0.19rem, 19px);
  color: #403621;
  font-weight: 700;
}
.page-top .sec-ttl .ruby {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
}
.sec-lead {
  font-family: "Source Serif 4", serif;
  font-size: min(0.45rem, 45px);
  color: #FFF;
  letter-spacing: normal;
  line-height: 1.2;
  margin-bottom: min(0.4rem, 40px);
}
.sec-desc {
  color: #FFF;
}

.conts-lead {
  font-size: min(0.45rem, 45px);
  margin-bottom: min(0.7rem, 70px);
  font-weight: 700;
}
.conts-lead span {
  background-position: left 0.2em;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
}
@media screen and (max-width: 768px) {
  .conts-lead span {
    color: #FFF;
  }
}
.conts-lead span.conts-lead-pattarn {
  filter: drop-shadow(5px 0 10px rgba(193, 145, 17, 0.5));
}
@media screen and (min-width: 769px) {
  .conts-lead span.conts-lead-pattarn {
    display: block;
  }
}

/****** グラデーション *****/
.text-grad span {
  background: linear-gradient(to bottom, #a77e10 20%, #483606 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/****** 注釈文 ******/
.notes-list-item {
  font-size: 0.7em;
  line-height: 1.2;
}
.notes-list-item:not(:last-child) {
  margin-bottom: 0.4em;
}

/****** 下層ページ ******/
.page .sec-ttl {
  font-weight: 700;
  font-size: min(0.4rem, 40px);
  line-height: 1.2;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .page .sec-ttl {
    margin-bottom: min(0.5rem, 50px);
    font-size: clamp(30px, 0.5rem, 50px);
  }
}
.page .sec-ttl .ruby {
  color: #a98012;
}
.page .sec-ttl .deco-frame-line div {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
}
.page .sec-fv .title {
  width: 100%;
}
.page .sec-fv .title.deco-arrow-ttl .title-inner {
  width: 100% !important;
}
.page .sec-fv .title.deco-arrow-ttl .sec-ttl {
  font-weight: 500;
  font-size: min(0.55rem, 55px);
  width: 100%;
}
@media screen and (min-width: 769px) {
  .page .sec-fv .title.deco-arrow-ttl .sec-ttl {
    font-size: min(0.78rem, 78px);
  }
}

/* 期間 */
.period {
  margin-bottom: min(0.4rem, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.period-ttl {
  width: 20%;
  background-color: #a98012;
  padding: 0.2em;
  text-align: center;
  font-size: clamp(10px, 0.16rem, 16px);
  font-weight: 700;
  letter-spacing: 0;
}
@media screen and (min-width: 769px) {
  .period-ttl {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.period-ttl span {
  display: block;
  color: #fff;
}
@media screen and (min-width: 769px) {
  .period-ttl span {
    padding: 0.2em 1em;
  }
}
.period-date {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: min(0.3rem, 30px);
  font-size: 4.3vw;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .period-date {
    width: -moz-fit-content;
    width: fit-content;
    font-size: clamp(20px, 0.35rem, 35px);
  }
}
.period-date small {
  font-size: 0.8em;
}

/****** TOPICS カテゴリー *****/
:root {
  --category-game-color: #0d7ec4;
  --category-media-color: #019478;
  --category-campaign-color: #d77417;
  /*キャンペーン*/
  --category-mhb-color: #ae8f63;
  --category-event-color: #8c48af;
  --category-goods-color: #cf0707;
}

.topics-list {
  font-size: clamp(12px, 0.15rem, 15px);
  color: #403621;
}
.topics-list .info {
  font-weight: 500;
}
.topics-list .info .category {
  margin-right: auto;
  border-left: min(0.04rem, 4px) #000 solid;
  padding-left: 0.5em;
}
.topics-list .info .category.cat_game {
  border-color: var(--category-game-color);
  color: var(--category-game-color);
}
.topics-list .info .category.cat_media {
  border-color: var(--category-media-color);
  color: var(--category-media-color);
}
.topics-list .info .category.cat_campaign {
  border-color: var(--category-campaign-color);
  color: var(--category-campaign-color);
}
.topics-list .info .category.cat_event {
  border-color: var(--category-event-color);
  color: var(--category-event-color);
}
.topics-list .info .category.cat_goods {
  border-color: var(--category-goods-color);
  color: var(--category-goods-color);
}
.topics-list .info .date {
  margin-top: auto;
  color: #5b4406;
}

/****** ボタン ******/
.btn {
  display: flex;
  justify-content: center;
}
.btn-ellipse {
  position: relative;
  width: min(395px, 3.95rem);
  height: min(90px, 0.9rem);
  padding: 2px;
  border-radius: 50px;
  background: linear-gradient(#fef5cb, #caab55);
  filter: brightness(1) drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5));
  transition: filter 0.3s ease;
}
@media screen and (min-width: 769px) {
  .btn-ellipse {
    width: min(395px, 3.95rem);
    height: min(90px, 0.9rem);
    filter: brightness(1) drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.5));
  }
}
@media screen and (min-width: 769px) {
  .btn-ellipse:hover {
    filter: brightness(1.2) drop-shadow(5px 10px 10px rgba(141, 108, 37, 0.5019607843));
  }
}
.page-top .btn-ellipse {
  min-width: min(395px, 3.95rem);
  max-width: 80vw;
  width: -moz-fit-content;
  width: fit-content;
}
.page-top .btn-ellipse .inner {
  padding: 0 2.5em;
}
.btn-ellipse .inner {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-ellipse.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  font-size: min(0.2rem, 20px);
}
.btn-ellipse .inner:after {
  content: "";
  display: block;
  margin-top: min(0.5rem, 5px);
  width: min(0.21rem, 21px);
  height: min(0.14rem, 14px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn-down.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.btn-ellipse .inner span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-top .btn-ellipse .inner {
  font-size: min(0.22rem, 22px);
}
.page-top .btn-ellipse .inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: min(0.3rem, 30px);
  transform: translateY(-50%);
  margin-top: 0;
  width: min(0.17rem, 17px);
  height: min(0.22rem, 22px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.page-top .btn-ellipse .inner span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.character-detail .btn-ellipse {
  margin-top: min(0.1rem, 10px);
  width: -moz-fit-content;
  width: fit-content;
  height: 4em;
}
.character-detail .btn-ellipse .inner {
  font-size: min(0.18rem, 18px);
  padding: 0 3em;
}
.character-detail .btn-ellipse .inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: min(0.3rem, 30px);
  transform: translateY(-50%);
  margin-top: 0;
  width: min(0.17rem, 17px);
  height: min(0.22rem, 22px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.character-detail .btn-ellipse .inner span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-btn .btn-ellipse .inner {
  font-size: min(0.26rem, 26px);
  letter-spacing: 0.1em;
}
.home-btn .btn-ellipse .inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: min(0.3rem, 30px);
  transform: translateY(-50%);
  margin-top: 0;
  width: min(0.17rem, 17px);
  height: min(0.22rem, 22px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.btn-cw {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: min(0.3rem, 30px);
  padding: 0.8em 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 50px;
  color: #fff;
  font-size: clamp(14px, 0.22rem, 22px);
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  text-align: center;
  background: none;
  transition: all 0.3s ease-in-out;
}
.lang-ja .btn-cw {
  font-family: "source-han-sans-japanese", sans-serif;
}
@media screen and (min-width: 769px) {
  .btn-cw:hover {
    border-color: #f0e0a9;
    color: #f0e0a9;
  }
}
.btn-buy {
  width: 100%;
  height: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: filter 0.3s ease-in-out;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  font-size: clamp(4vw, 0.22rem, 22px);
  line-height: 1.3;
  font-weight: 700;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
[data-js-tab=ns] .btn-buy {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-buy-ns.png);
}
[data-js-tab=ps] .btn-buy {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-buy-ps.png);
}
[data-js-tab=steam] .btn-buy {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-buy-steam.png);
}
[data-js-tab=xbox] .btn-buy {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-buy-xbox.png);
}
@media screen and (min-width: 769px) {
  .btn-buy:hover {
    filter: brightness(1.2) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
  }
}
@media screen and (min-width: 769px) {
  .btn-buy {
    width: min(4.83rem, 483px);
    height: min(0.9rem, 90px);
    font-size: min(0.22rem, 22px);
  }
}
.btn-buy span {
  color: #fff;
  text-shadow: 0px 0px 9px black;
  transform: translateY(-0.03rem);
  display: block;
}
.btn-buy span.video::before {
  content: "";
  display: inline-block;
  width: min(0.44rem, 44px);
  height: min(0.26rem, 26px);
  margin-right: 0.5em;
  transform: translateY(0.05rem);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon_video.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.btn-buy::after {
  content: "";
  display: inline-block;
  width: min(0.2rem, 20px);
  height: min(0.25rem, 25px);
  margin-left: 1em;
  position: absolute;
  right: 6%;
  margin-left: auto;
  margin-block: auto;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn-wht.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.btn-buy.is-disabled {
  opacity: 0.8;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  will-change: filter;
  pointer-events: none;
  flex-direction: column;
  font-weight: 500;
}
.btn-buy.is-disabled span {
  color: rgba(255, 255, 255, 0.7);
}
.btn-buy.is-disabled::after {
  content: none;
}
.btn.shoplist {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-inline: auto;
}
.btn.shoplist .btn-buy {
  margin-bottom: min(0.3rem, 30px);
}
@media screen and (min-width: 769px) {
  .btn.shoplist .btn-buy {
    margin: 2% 0;
    width: min(2.7rem, 270px);
    height: min(0.48rem, 48px);
    font-size: min(0.18rem, 18px);
  }
  .btn.shoplist .btn-buy::after {
    content: "";
    display: inline-block;
    width: min(0.1rem, 10px);
    height: min(0.125rem, 12.5px);
    margin-left: 1em;
    position: absolute;
    right: 10%;
  }
}
.btn-zoom {
  width: 15%;
  position: absolute;
  left: 2%;
  bottom: 5%;
  border: 1px solid #fff;
  background-color: #6a5c1f;
  padding: 0.5em;
}
@media screen and (min-width: 769px) {
  .btn-zoom {
    width: min(1.7rem, 170px);
  }
}
.btn-zoom a {
  color: #fff;
  font-weight: 700;
  display: flex;
}
.btn-zoom a::before {
  content: "";
  width: min(0.27rem, 27px);
  height: min(0.27rem, 27px);
  margin-right: 10px;
  display: inline-block;
  background: url(https://www.monsterhunter.com/stories/assets/images/common/icon-zoom.png) no-repeat;
  background-position: center;
  background-size: contain;
}

/****** アイコン ******/
.ic::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}
.ic.ic-up {
  display: inline-block;
  line-height: 1;
  position: relative;
}
.ic.ic-up::before, .ic.ic-up::after {
  background: #FF8911;
  border-radius: 100%;
  content: "";
  display: block;
  height: 6px;
  left: 50%;
  position: absolute;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  width: 6px;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .ic.ic-up::before, .ic.ic-up::after {
    left: 50%;
  }
}
.ic.ic-up::before {
  left: calc(50% + 3px);
}
.ic.ic-up::after {
  animation: pulsate 1.5s ease infinite;
}
.ic.ic-up.sec-ttl-pattarn::before {
  left: 6px;
  top: -12px;
}
.ic.ic-up.sec-ttl-pattarn::after {
  left: 3px;
  top: -12px;
}
.ic.ic-up.site-header-ic::before, .ic.ic-up.site-header-ic::after {
  left: -15px;
  transform: translateY(-50%);
}
.ic.ic-up.site-header-ic::before {
  top: calc(50% - 3px);
}
.ic.ic-up.site-header-ic::after {
  top: calc(50% - 6px);
}
.ic.ic-up.trailer-text-ic::before, .ic.ic-up.trailer-text-ic::after {
  left: -15px;
  transform: translateY(-50%);
}
.ic.ic-up.trailer-text-ic::before {
  top: calc(50% - 3px);
}
.ic.ic-up.trailer-text-ic::after {
  top: calc(50% - 6px);
}
.ic.ic-up.topics-update::before, .ic.ic-up.topics-update::after {
  left: -5px;
  transform: none;
}
.ic.ic-up.topics-update::before {
  top: 6px;
}
.ic.ic-up.topics-update::after {
  top: 6px;
}
.ic.ic-up.topics-panel {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}
.ic.ic-up.topics-panel::before, .ic.ic-up.topics-panel::after {
  left: 0;
  transform: none;
}
.ic.ic-up.topics-panel::before {
  top: -12px;
}
.ic.ic-up.topics-panel::after {
  top: -12px;
}
.ic.ic-up.trailer-ttl-pattarn::before, .ic.ic-up.trailer-ttl-pattarn::after {
  left: -1em;
  transform: none;
}
.ic.ic-up.trailer-ttl-pattarn::before {
  top: 50%;
}
.ic.ic-up.trailer-ttl-pattarn::after {
  top: 50%;
}
.sec-ttl .ic.ic-up {
  line-height: 1.2;
  display: inline-block;
  position: relative;
}
.sec-ttl .ic.ic-up::before, .sec-ttl .ic.ic-up::after {
  width: 0.08rem;
  height: 0.08rem;
  left: -0.1em;
  transform: none;
}
.sec-ttl .ic.ic-up::before {
  top: -0.75em;
}
.sec-ttl .ic.ic-up::after {
  top: -0.75em;
}

/****** 言語選択 ******/
#lang {
  width: auto;
  position: absolute;
  top: 20px;
  right: 90px;
  margin-top: 0;
  display: flex;
  align-items: center;
  z-index: 4;
}
@media screen and (min-width: 769px) {
  #lang {
    top: min(0.98rem, 98px);
    margin-left: 10px;
    margin-right: 10px;
    right: 0;
  }
}
@media screen and (min-width: 769px) {
  #lang.hide-pc {
    display: none;
  }
}

.langselect {
  color: #fff;
  font-family: "Source Sans 3", sans-serif;
  letter-spacing: normal;
}
@media screen and (min-width: 769px) {
  .langselect {
    text-align: center;
  }
}
.langselect-inner {
  position: relative;
}
@media screen and (max-width: 768px) {
  .langselect-inner {
    display: inline-block;
    text-align: left;
  }
}
@media screen and (min-width: 769px) {
  .langselect-inner {
    display: inline-block;
    text-align: left;
  }
}
.langselect .SumoSelect {
  width: auto;
}
@media screen and (max-width: 768px) {
  .langselect .SumoSelect {
    text-align: right;
  }
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect {
    text-align: right;
    padding: 0 10px 0;
    transition: background 0.2s ease;
  }
}
.langselect .SumoSelect.open .optWrapper {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
  bottom: auto;
  visibility: visible;
  z-index: 1;
}
.langselect .SumoUnder {
  display: none;
}
.langselect .CaptionCont {
  color: #354462;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  min-height: auto;
  min-height: initial;
  padding: 0.5em;
}
@media screen and (min-width: 769px) {
  .langselect .CaptionCont {
    font-size: 14px;
    transition: border 0.2s ease;
    padding: 0.5em 1.5em;
  }
}
.langselect .CaptionCont span {
  cursor: pointer;
  display: inline-block;
  padding: 0.5em;
  position: relative;
  vertical-align: middle;
}
.langselect .CaptionCont label {
  display: none;
}
.langselect .CaptionCont::before {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/earth_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  width: 20px;
}
.langselect .optWrapper {
  width: 150px;
  min-height: 300px;
  background: none;
  border: none;
  border-radius: 0;
  bottom: 100%;
  box-shadow: none !important;
  display: block !important;
  font-size: 13px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 100%;
  transition: all 0.2s ease;
  visibility: hidden;
  z-index: -1;
}
.langselect .optWrapper .options {
  border-radius: 0;
  display: inline-block;
  max-height: initial;
}
.langselect .optWrapper .opt {
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: right;
  line-height: 1.5;
  transition: background 0.2s ease;
}
.langselect .optWrapper .opt:not(:last-child) {
  margin-bottom: 4px;
}
.langselect .optWrapper .opt:hover {
  background: none !important;
  color: #d2b03a;
}
.langselect .optWrapper .opt.is-selected {
  color: #d2b03a;
  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;
}

.SumoSelect.open > .optWrapper {
  top: 40px;
}

.SumoSelect > .optWrapper {
  left: unset;
  right: 0;
}

/****** スライダー ******/
.swiper-container {
  position: relative;
}
@media screen and (min-width: 769px) {
  .swiper-container {
    padding-right: min(0.5rem, 50px);
  }
}
.swiper-container .swiper-scrollbar {
  background-color: #000;
  border: 1px solid #403621;
  border-radius: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  height: 6px;
}
.swiper-container .swiper-scrollbar-drag {
  height: 100%;
  background: none;
  border-radius: 0;
}
.swiper-container .swiper-scrollbar-drag::before {
  content: "";
  display: inline-block;
  background: url(https://www.monsterhunter.com/stories/assets/images/common/slider_scrollbar.png) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 30px;
}
.swiper-container .swiper-button-arrow {
  background: none;
  height: 2rem;
  width: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .swiper-container .swiper-button-arrow {
    height: 200px;
    width: 59px;
  }
}
.swiper-container .swiper-button-arrow::after {
  content: "";
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/arrow-btn-next.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  height: 100%;
  width: min(0.32rem, 32px);
}
.swiper-container .swiper-button-arrow.swiper-button-prev::after {
  transform: scale(-1, 1);
}
.swiper-container .swiper-pagination:not(.square) {
  position: relative;
  top: -2px;
}
@media screen and (min-width: 769px) {
  .swiper-container .swiper-pagination:not(.square) {
    margin-right: 1em;
    margin-left: 1em;
  }
}
.swiper-container .swiper-pagination:not(.square) .swiper-pagination-bullet {
  width: min(0.2rem, 20px);
  height: min(0.2rem, 20px);
  margin: 2%;
  border-radius: 0;
  transform: rotate(45deg);
  background-color: #a2812e;
}
@media screen and (min-width: 769px) {
  .swiper-container .swiper-pagination:not(.square) .swiper-pagination-bullet {
    margin: min(10px, 0.1rem);
  }
}
.swiper-container .swiper-pagination:not(.square) .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #eecb57;
}
.swiper-container .swiper-nav {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .swiper-container .swiper-nav {
    justify-content: space-between;
  }
}
.swiper-container .swiper-nav .swiper-button-box,
.swiper-container .swiper-nav .swiper-button-arrow {
  left: auto;
  margin-top: 0;
  position: relative;
  right: auto;
  top: auto;
  transition: filter 0.4s ease;
}
.swiper-container .swiper-nav .swiper-pagination {
  position: relative;
}

[data-js-slider=freeMode],
[data-js-slider=notfreeMode] {
  padding: min(0.5rem, 50px) 0;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode],
  [data-js-slider=notfreeMode] {
    padding: min(0.2rem, 20px);
  }
}
[data-js-slider=freeMode] .swiper-nav,
[data-js-slider=notfreeMode] .swiper-nav {
  position: relative;
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode] .swiper-nav,
  [data-js-slider=notfreeMode] .swiper-nav {
    margin-top: 0.4rem;
    width: 23.43%;
  }
}
@media screen and (max-width: 768px) {
  [data-js-slider=freeMode] .swiper-scrollbar,
  [data-js-slider=notfreeMode] .swiper-scrollbar {
    order: 2;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode] .swiper-scrollbar,
  [data-js-slider=notfreeMode] .swiper-scrollbar {
    margin-right: min(0.2rem, 20px);
  }
}
@media screen and (max-width: 768px) {
  [data-js-slider=freeMode] .swiper-button-box.swiper-button-prev,
  [data-js-slider=notfreeMode] .swiper-button-box.swiper-button-prev {
    order: 1;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode] .swiper-button-box.swiper-button-prev,
  [data-js-slider=notfreeMode] .swiper-button-box.swiper-button-prev {
    margin-right: min(0.1rem, 10px);
  }
}
@media screen and (max-width: 768px) {
  [data-js-slider=freeMode] .swiper-button-box.swiper-button-next,
  [data-js-slider=notfreeMode] .swiper-button-box.swiper-button-next {
    order: 3;
  }
}
[data-js-slider=freeMode] .topics-list .swiper-slide,
[data-js-slider=notfreeMode] .topics-list .swiper-slide {
  height: auto;
  margin-right: min(0.2rem, 20px);
  width: clamp(300px, 46%, 420px);
  box-sizing: border-box;
  padding: 3px;
  background: none;
  transition: background 0.5s ease;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode] .topics-list .swiper-slide,
  [data-js-slider=notfreeMode] .topics-list .swiper-slide {
    width: clamp(250px, 24%, 450px);
  }
  [data-js-slider=freeMode] .topics-list .swiper-slide:hover,
  [data-js-slider=notfreeMode] .topics-list .swiper-slide:hover {
    background: #caab55;
  }
}
[data-js-slider=freeMode] .topics-list .swiper-slide:last-child,
[data-js-slider=notfreeMode] .topics-list .swiper-slide:last-child {
  margin-right: min(1.2rem, 120px);
}
@media screen and (min-width: 1024px) {
  [data-js-slider=freeMode] .topics-list .swiper-slide:last-child,
  [data-js-slider=notfreeMode] .topics-list .swiper-slide:last-child {
    margin-right: min(2.8rem, 280px);
  }
}
[data-js-slider=freeMode] .topics-list .topics-link,
[data-js-slider=notfreeMode] .topics-list .topics-link {
  height: calc(100% - 1px);
}
[data-js-slider=freeMode] .monsters-list .swiper-slide,
[data-js-slider=notfreeMode] .monsters-list .swiper-slide {
  height: auto;
  margin-right: min(0.3rem, 30px);
  width: clamp(200px, 30%, 390px);
  box-sizing: border-box;
  padding: 0;
  background: none;
  transition: background 0.5s ease;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freeMode] .monsters-list .swiper-slide,
  [data-js-slider=notfreeMode] .monsters-list .swiper-slide {
    margin-right: min(0.4rem, 40px);
    width: clamp(250px, 24%, 390px);
  }
}
[data-js-slider=freeMode] .monsters-list .swiper-slide:last-child,
[data-js-slider=notfreeMode] .monsters-list .swiper-slide:last-child {
  margin-right: min(1.2rem, 120px);
}
@media screen and (min-width: 1024px) {
  [data-js-slider=freeMode] .monsters-list .swiper-slide:last-child,
  [data-js-slider=notfreeMode] .monsters-list .swiper-slide:last-child {
    margin-right: min(2.8rem, 280px);
  }
}
[data-js-slider=freeMode] .monsters-list .swiper-slide .deco-frame-line,
[data-js-slider=notfreeMode] .monsters-list .swiper-slide .deco-frame-line {
  padding: 0;
  background: none;
  margin-bottom: min(0.2rem, 20px);
}
[data-js-slider=freeMode].monsters .swiper-scrollbar,
[data-js-slider=notfreeMode].monsters .swiper-scrollbar {
  background-color: #d5cdb6;
  border: 1px solid #bcb7aa;
}

[data-js-slider=character] {
  width: 100%;
}
@media screen and (max-width: 768px) {
  [data-js-slider=character] {
    margin-top: -5vw;
    overflow: visible;
  }
  [data-js-slider=character] .swiper-button-prev,
  [data-js-slider=character] .swiper-rtl .swiper-button-next {
    left: -4vw;
    top: auto;
    bottom: 15vw;
    right: auto;
  }
  [data-js-slider=character] .swiper-button-next,
  [data-js-slider=character] .swiper-rtl .swiper-button-prev {
    right: -4vw;
    top: auto;
    bottom: 15vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=character] {
    margin-top: -7%;
  }
  [data-js-slider=character] .swiper-button-prev,
  [data-js-slider=character] .swiper-rtl .swiper-button-next {
    left: 8%;
    right: auto;
  }
  [data-js-slider=character] .swiper-button-next,
  [data-js-slider=character] .swiper-rtl .swiper-button-prev {
    right: 8%;
    left: auto;
  }
}

[data-js-slider=museum] {
  width: 100%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=museum] {
    padding-right: 0;
  }
}
[data-js-slider=museum] .swiper-slide {
  padding: min(0.7rem, 70px);
  box-sizing: border-box;
}
[data-js-slider=museum] .swiper-slide .deco-frame-line {
  width: 100%;
  padding: 0;
  background: none;
}
[data-js-slider=museum] .swiper-slide .deco-frame-line a {
  display: block;
}
[data-js-slider=museum] .swiper-slide .deco-frame-line img {
  vertical-align: bottom;
}
@media screen and (min-width: 769px) {
  [data-js-slider=museum] .swiper-slide .deco-frame-line::before {
    pointer-events: visible;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=museum] .swiper-button-prev,
  [data-js-slider=museum] .swiper-rtl .swiper-button-next {
    left: 18%;
    right: auto;
  }
  [data-js-slider=museum] .swiper-button-next,
  [data-js-slider=museum] .swiper-rtl .swiper-button-prev {
    right: 18%;
    left: auto;
  }
}
@media screen and (min-width: 1400px) {
  [data-js-slider=museum] .swiper-button-prev,
  [data-js-slider=museum] .swiper-rtl .swiper-button-next {
    left: 22%;
    right: auto;
  }
  [data-js-slider=museum] .swiper-button-next,
  [data-js-slider=museum] .swiper-rtl .swiper-button-prev {
    right: 22%;
    left: auto;
  }
}

[data-js-slider=world] .swiper-pagination {
  height: min(0.5rem, 50px);
  position: absolute;
  bottom: 5%;
  top: unset;
  left: 0;
}
[data-js-slider=world] .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  width: min(0.15rem, 15px);
  height: min(0.15rem, 15px);
  margin: 3%;
  background-color: #87660c;
}
@media screen and (min-width: 769px) {
  [data-js-slider=world] .swiper-pagination .swiper-pagination-bullet {
    margin: 1%;
  }
}

[data-js-slider=world-bg] .swiper-slide-active img,
[data-js-slider=world-bg] .swiper-slide-duplicate-active img,
[data-js-slider=world-bg] .swiper-slide-prev img {
  animation: zoomUP2 1s linear 0s;
  animation-fill-mode: both;
}

[data-js-slider=story] .swiper-button-arrow::after {
  content: "";
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/arrow-btn-gold-next.png);
}
@media screen and (max-width: 768px) {
  [data-js-slider=story] .swiper-button-prev,
  [data-js-slider=story] .swiper-rtl .swiper-button-next {
    left: -1.5vw;
    top: auto;
    bottom: 15vw;
    right: auto;
  }
  [data-js-slider=story] .swiper-button-next,
  [data-js-slider=story] .swiper-rtl .swiper-button-prev {
    right: -1.5vw;
    top: auto;
    bottom: 15vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=story] .swiper-button-prev,
  [data-js-slider=story] .swiper-rtl .swiper-button-next {
    left: calc(50% - min(5rem, 500px));
    right: auto;
  }
  [data-js-slider=story] .swiper-button-next,
  [data-js-slider=story] .swiper-rtl .swiper-button-prev {
    right: calc(50% - min(5rem, 500px));
    left: auto;
  }
}

[data-js-slider=field].swiper-container {
  padding-right: 0;
}
[data-js-slider=field] .swiper-button-arrow::after {
  content: "";
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/arrow-btn-gold-next.png);
}
@media screen and (min-width: 769px) {
  [data-js-slider=field] .swiper-button-prev,
  [data-js-slider=field] .swiper-rtl .swiper-button-next {
    bottom: 5%;
    top: unset;
    left: 26%;
  }
  [data-js-slider=field] .swiper-button-next,
  [data-js-slider=field] .swiper-rtl .swiper-button-prev {
    bottom: 5%;
    top: unset;
    right: 26%;
  }
}

/* right: 26%;
/*not slider*/
@media screen and (max-width: 768px) {
  .swiper-container.not-slider .swiper-wrapper {
    width: 90%;
    margin: 0 auto;
    display: block;
  }
  .swiper-container.not-slider .swiper-wrapper .swiper-slide {
    width: 100%;
    margin: 0 0 4%;
    max-width: 100%;
  }
}

[data-js-slider=quest] {
  padding-right: 0;
}
[data-js-slider=quest] .swiper-pagination .swiper-pagination-bullet {
  margin: 1%;
  width: min(0.16rem, 16px);
  height: min(0.16rem, 16px);
}

[data-js-slider=comic] {
  padding-right: 0;
  margin-bottom: min(0.4rem, 40px);
}
[data-js-slider=comic] .swiper-pagination {
  display: flex;
  justify-content: center;
}
[data-js-slider=comic] .swiper-pagination-bullet {
  width: min(0.65rem, 65px);
  height: min(0.65rem, 65px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/topics/comic/bg-no.png);
  border-radius: 0;
  transform: rotate(0);
  border: 1px solid #87660c;
  color: #f6edaa;
  font-weight: 700;
  font-size: min(0.24rem, 24px);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
[data-js-slider=comic] .swiper-pagination-bullet-active {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/topics/comic/bg-no-active.png);
}
[data-js-slider=comic] .swiper-pagination-bullet::before {
  content: "";
  display: block;
  position: absolute;
  width: min(0.58rem, 58px);
  height: min(0.58rem, 58px);
  top: min(0.03rem, 3px);
  left: min(0.03rem, 3px);
  border: 1px solid #87660c;
}
[data-js-slider=comic] .swiper-button-prev, [data-js-slider=comic] .swiper-rtl .swiper-button-next {
  left: 0;
  right: auto;
}
@media screen and (min-width: 769px) {
  [data-js-slider=comic] .swiper-button-prev, [data-js-slider=comic] .swiper-rtl .swiper-button-next {
    left: 10%;
  }
}
[data-js-slider=comic] .swiper-button-next, [data-js-slider=comic] .swiper-rtl .swiper-button-prev {
  right: 0;
  left: auto;
}
@media screen and (min-width: 769px) {
  [data-js-slider=comic] .swiper-button-next, [data-js-slider=comic] .swiper-rtl .swiper-button-prev {
    right: 10%;
  }
}

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

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

/*--- common ---*/
.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(https://www.monsterhunter.com/stories/assets/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;
}
@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-product.mfp-wrap {
  overflow: auto;
}
.mfp-product.mfp-container {
  padding: 0;
}
.mfp-product .mfp-close {
  height: 11vw !important;
  transform: scaleY(0.4);
  width: 11vw !important;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-close {
    height: 4.5vw !important;
    width: 4.5vw !important;
  }
}
.mfp-product .mfp-close::before, .mfp-product .mfp-close::after {
  background: #FFF;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
}
.mfp-product .sec-ttl {
  font-size: 0.3rem;
}
@media screen and (min-width: 769px) {
  .mfp-product .sec-ttl {
    font-size: min(0.3rem, 30px);
  }
}
.mfp-product-ctr {
  color: #403621;
  padding: 0.8rem 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-ctr {
    margin-left: auto;
    margin-right: auto;
    padding: min(0.8rem, 80px) min(0.4rem, 40px);
    position: relative;
    width: 96%;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-product-ctr {
    max-width: 1480px;
    width: 77.08%;
  }
}
.mfp-product-item {
  display: none;
}
.mfp-product-ttl {
  font-size: 0.44rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-ttl {
    font-size: min(0.44rem, 44px);
    margin-bottom: min(0.4rem, 40px);
  }
}
.mfp-product-list {
  border: 1px solid #4A4A4A;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.mfp-product-list::before, .mfp-product-list::after {
  bottom: 100%;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}
.mfp-product-list::before {
  background-color: #e44732;
}
.mfp-product-list::after {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/text_pattern.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.4;
}
.mfp-product-list-item {
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-list-item {
    padding: min(0.4rem, 40px) min(0.5rem, 50px);
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product-list-item:not(:last-child) {
    border-bottom: 1px solid #4A4A4A;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product-list-item:not(:nth-child(3n)) {
    border-right: 1px solid #4A4A4A;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product-list-item:nth-child(-n+6) {
    border-bottom: 1px solid #4A4A4A;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product-list-storePrivilege .mfp-product-list-item {
    width: 100%;
  }
}
.mfp-product-list-store {
  color: #e44732;
  font-size: 0.24rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-list-store {
    font-size: min(0.24rem, 22px);
    margin-bottom: min(0.1rem, 10px);
  }
}
.mfp-product-list-name {
  font-size: 0.22rem;
  margin-bottom: 0.3rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-list-name {
    font-size: min(0.16rem, 16px);
    margin-bottom: min(0.3rem, 30px);
  }
}
.mfp-product-list-image {
  line-height: 0;
  margin-bottom: 0.3rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-list-image {
    margin-bottom: min(0.2rem, 20px);
  }
}
.mfp-product-list-desc {
  font-size: 0.22rem;
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .mfp-product-list-desc {
    font-size: min(0.16rem, 16px);
  }
}
.mfp-product-notes {
  border-right: 1px solid #4A4A4A;
  border-bottom: 1px solid #4A4A4A;
  border-left: 1px solid #4A4A4A;
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product-notes {
    padding: min(0.4rem, 40px) min(0.5rem, 50px);
  }
}
.mfp-product-notes .notes-list-ttl {
  font-size: 0.8em;
  line-height: 1.5;
  margin-bottom: 0.25em;
}
.mfp-product-notes .notes-list:not(:last-child) {
  margin-bottom: 1em;
}
.mfp-product.mfp-storePrivilege #modalStorePrivilege {
  display: block;
}
@media screen and (min-width: 1024px) {
  .mfp-product.mfp-storePrivilege .mfp-product-ctr {
    max-width: 1080px;
    width: 56.25%;
  }
}
.mfp-product.mfp-deluxe #modalDlc {
  display: block;
}
.mfp-product.mfp-collectors #modalCollectors,
.mfp-product.mfp-collectors #modalDlc {
  display: block;
}
.mfp-product.mfp-collectors #modalCollectors {
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product.mfp-collectors #modalCollectors {
    margin-bottom: min(0.4rem, 40px);
  }
}
.mfp-product.mfp-collectors .text-list-item {
  font-size: 0.2rem;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .mfp-product.mfp-collectors .text-list-item {
    font-size: min(0.14rem, 14px);
  }
}
.mfp-product.mfp-useSoundTrack #modalUseSoundTrack {
  display: block;
}
@media screen and (min-width: 1024px) {
  .mfp-product.mfp-useSoundTrack .mfp-product-ctr {
    max-width: 1080px;
    width: 56.25%;
  }
}
.mfp-product.mfp-useSoundTrack .text-ctr {
  border: 1px solid #4A4A4A;
  line-height: 2;
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product.mfp-useSoundTrack .text-ctr {
    padding: min(0.4rem, 40px) min(0.5rem, 50px);
  }
}
.mfp-product.mfp-useSoundTrack .text-ctr .text:not(:last-child) {
  margin-bottom: 1.5em;
}
.mfp-product.mfp-useSoundTrack .text-ctr .text-list {
  margin-bottom: 1.5em;
}
.mfp-product.mfp-useSoundTrack .text-ctr .text-list .text-list-item {
  padding-left: 1em;
  text-indent: -1em;
}
.mfp-product.mfp-useSoundTrack .text-ctr .notes-list {
  margin-bottom: 1.5em;
}
.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.31%;
  }
}
.mfp-agecheck .mfp-agecheck {
  font-family: "Cinzel", serif;
  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: 1400px) {
  .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: 1400px) {
  .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: 1400px) {
  .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 #4A4A4A;
  box-sizing: border-box;
  font-family: "Cinzel", serif;
  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: 1400px) {
  .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 #e44732;
}
.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: 1400px) {
  .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: 1400px) {
  .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-image: url(https://www.monsterhunter.com/stories/assets/images/common/text_pattern.jpg);
  background-color: #e44732;
  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-image: url(https://www.monsterhunter.com/stories/assets/images/common/text_pattern.jpg);
  background-color: #e44732;
  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: 1400px) {
  .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.1);
  }
}
.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;
  }
}
@media screen and (min-width: 769px) {
  .hover-2swipe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .hover-2swipe::before, .hover-2swipe::after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 0;
    content: "";
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.5s;
  }
  .hover-2swipe::before {
    top: 0;
    left: 0;
    border-top: 5px solid #caab55;
    border-left: 5px solid #caab55;
  }
  .hover-2swipe::after {
    right: 0;
    bottom: 0;
    border-right: 5px solid #caab55;
    border-bottom: 5px solid #caab55;
  }
  .hover-2swipe:hover::before, .hover-2swipe:hover::after {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}
@media screen and (min-width: 769px) {
  .hover-product {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .hover-product::before, .hover-product::after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 0;
    content: "";
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.5s;
  }
  .hover-product::before {
    top: 0;
    left: 0;
    border-top: 3px solid #caab55;
    border-left: 3px solid #caab55;
  }
  .hover-product::after {
    right: 0;
    bottom: 0;
    border-right: 3px solid #caab55;
    border-bottom: 3px solid #caab55;
  }
  .hover-product:hover {
    width: 100%;
    height: 100%;
  }
  .hover-product:hover::before, .hover-product:hover::after {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}
.page-field .is-selected .hover-product::before, .page-field .is-selected .hover-product::after {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.page-wallpaper header, .page-oot header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .page-wallpaper header, .page-oot header {
    position: absolute;
  }
}
.page-wallpaper header .logo, .page-oot header .logo {
  width: min(1.7rem, 170px);
}
.page-wallpaper header .logo img, .page-oot header .logo img {
  width: 100%;
  height: auto;
}
.page-wallpaper header .logout, .page-oot header .logout {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5em 1.5em 1em;
  margin-right: 0.2rem;
  font-size: min(0.18rem, 18px);
  background-color: #877125;
  border-radius: 0 0 10px 10px;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background 0.3s ease-in-out;
}
@media screen and (min-width: 769px) {
  .page-wallpaper header .logout, .page-oot header .logout {
    font-size: min(0.14rem, 14px);
  }
}
@media screen and (min-width: 769px) {
  .page-wallpaper header .logout:hover, .page-oot header .logout:hover {
    background-color: #c1a236;
  }
}

/************************************
  products
************************************/
.sec-products {
  /*license*/
}
.sec-products .sec-bg {
  background-color: #1e180e;
}
.sec-products .sec-bg img {
  width: auto;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .sec-products .sec-inner {
    padding: 0;
  }
}
.sec-products .sec-ttl .deco-arrow {
  filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 4px #000);
}
@media screen and (max-width: 768px) {
  .sec-products .sec-ttl .deco-arrow {
    font-size: min(0.45rem, 45px);
  }
}
.sec-products .sec-ttl .deco-arrow span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-products .sec-ttl .deco-arrow::before {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-product-ttl-left.png);
}
.sec-products .sec-ttl .deco-arrow::after {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-product-ttl-right.png);
}
.sec-products .license-note {
  margin-bottom: min(2rem, 200px);
  color: #fff;
  text-align: center;
  font-size: 3vw;
}
@media only screen and (min-width: 769px) {
  .sec-products .license-note {
    font-size: 1vw;
  }
}
.sec-products .conts-privilege {
  width: 90%;
  margin: min(0.4rem, 40px) auto min(0.7rem, 70px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege {
    width: min(12rem, 1230px);
    margin: min(1.2rem, 120px) auto;
  }
}
.sec-products .conts-privilege-bg {
  width: 120%;
  height: calc(100% - 0.5rem);
  position: absolute;
  top: 0.5rem;
  left: -10%;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/products/bg-privilege.png);
  background-repeat: repeat-y;
  background-size: 100%;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-bg {
    width: 100%;
    top: 0.2rem;
    left: 0;
  }
}
.sec-products .conts-privilege-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: min(0.64rem, 64px);
  position: absolute;
  top: min(-0.2rem, -20px);
  z-index: 2;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/products/bg-privilege-top.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-bg::before {
    top: min(-0.3rem, -30px);
  }
}
.sec-products .conts-privilege-bg::after {
  content: "";
  display: block;
  width: 100%;
  height: min(1rem, 100px);
  position: absolute;
  bottom: min(-0.2rem, -20px);
  z-index: 2;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/products/bg-privilege-bottom.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-bg::after {
    bottom: min(-0.4rem, -40px);
  }
}
.sec-products .conts-privilege-inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  z-index: 2;
}
.sec-products .conts-privilege-inner .text {
  font-weight: 600;
}
.sec-products .conts-privilege-inner img {
  width: 100%;
}
.sec-products .conts-privilege-pic {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-pic {
    margin-right: 3%;
    transform: translateY(min(-0.3rem, 30px));
    width: min(3.45rem, 345px);
  }
}
.sec-products .conts-privilege-pic img {
  width: 100%;
}
.sec-products .conts-privilege-text {
  width: 100%;
  margin: 0.5rem 0 0 1em;
  text-align: left;
  font-weight: 600;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-text {
    margin: 0;
    width: 65%;
  }
}
.sec-products .conts-privilege-text .ttl .name {
  margin-bottom: min(0.2rem, 20px);
  line-height: 1.2;
  font-size: min(0.36rem, 36px);
  font-weight: 700;
  background: linear-gradient(to bottom, #a77e10 20%, #483606 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege-text .ttl .name {
    margin-bottom: min(0.3rem, 30px);
    font-size: min(0.42rem, 42px);
  }
}
.sec-products .conts-privilege-text .ttl .ruby {
  font-size: min(0.27rem, 27px);
  font-weight: 700;
  background: linear-gradient(to bottom, #c19f29 20%, #a98012 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-products .conts-privilege .note {
  width: 100%;
  position: relative;
  z-index: 3;
  font-size: clamp(12px, 0.14rem, 14px);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege .note {
    font-size: clamp(12px, 0.14rem, 14px);
  }
}
.sec-products .conts-privilege.save-data {
  margin: min(0.4rem, 40px) auto min(0.6rem, 60px);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege.save-data {
    margin: min(1.2rem, 120px) auto;
  }
}
.sec-products .conts-privilege.save-data .conts-privilege-bg {
  width: 100%;
  height: 100%;
  left: 0;
}
.sec-products .conts-privilege.save-data .conts-privilege-inner {
  padding: 2em 0 0;
}
@media screen and (max-width: 768px) {
  .sec-products .conts-privilege.save-data .conts-privilege-inner {
    width: 100%;
  }
}
.sec-products .conts-privilege.save-data .conts-privilege-text {
  text-align: center;
  width: 90%;
  margin-left: 0;
}
.sec-products .conts-privilege.save-data .conts-privilege-text .logo {
  width: 100%;
  margin: 0 auto min(0.2rem, 20px);
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege.save-data .conts-privilege-text .logo {
    width: min(5.9rem, 590px);
  }
}
.sec-products .conts-privilege.save-data .conts-privilege-text .logo .st2 {
  width: min(2.6rem, 266px);
}
.sec-products .conts-privilege.save-data .conts-privilege-text .logo .arrow {
  width: min(0.64rem, 64px);
}
.sec-products .conts-privilege.save-data .conts-privilege-text .logo .st {
  width: min(2.9rem, 290px);
}
.sec-products .conts-privilege.save-data .conts-privilege-text .ttl .text {
  font-size: min(0.25rem, 25px);
  font-weight: 700;
}
.sec-products .conts-privilege.save-data .conts-privilege-text .ttl .text span {
  background: linear-gradient(to bottom, #a77e10 20%, #483606 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege.save-data .conts-privilege-text .ttl .text {
    font-size: min(0.27rem, 27px);
  }
}
.sec-products .conts-privilege.save-data .conts-privilege-pic {
  width: 50%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-privilege.save-data .conts-privilege-pic {
    margin: 0 3% 0 0;
    transform: none;
    width: min(2.28rem, 228px);
  }
}
.sec-products .conts-privilege.save-data .conts-privilege-pic img {
  width: 100%;
}
.sec-products .conts-notelist {
  width: 90%;
  margin-inline: auto;
  margin-bottom: min(1.2rem, 120px);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist {
    width: min(15rem, 1530px);
  }
}
.sec-products .conts-notelist .ttl {
  position: relative;
  padding: 1em;
  box-sizing: border-box;
  border: solid 1px rgba(255, 255, 255, 0.9);
  line-height: 1.2;
  font-size: min(0.24rem, 24px);
  font-weight: 600;
  text-align: center;
  color: #FFF;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist .ttl {
    font-size: min(0.32rem, 32px);
  }
}
.sec-products .conts-notelist .ttl .btn-toggle {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 35%;
  right: 1em;
  font-weight: bold;
  font-size: min(0.3rem, 30px);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist .ttl .btn-toggle {
    font-size: min(0.4rem, 40px);
  }
}
.sec-products .conts-notelist .ttl .btn-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist .ttl .btn-toggle span {
    height: 3px;
  }
}
.sec-products .conts-notelist .ttl .btn-toggle span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
.sec-products .conts-notelist .ttl .btn-toggle.is-active span:last-child {
  transform: translate(-50%, -50%) rotate(180deg);
}
.sec-products .conts-notelist .toggle-box {
  width: 100%;
  border-bottom: 1px solid #777777;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.sec-products .conts-notelist .toggle-box.is-active {
  opacity: 1;
  height: -moz-fit-content;
  height: fit-content;
}
.sec-products .conts-notelist-grid {
  width: 100%;
  display: grid;
  border-right: 1px solid #fff;
  grid-template-columns: 40% 1fr;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid {
    grid-template-columns: 15% 30% 1fr;
  }
}
.sec-products .conts-notelist-grid-item {
  display: grid;
  align-items: center;
  height: 100%;
  padding: 1em;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
  font-size: clamp(12px, 0.18rem, 18px);
  color: #fff;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid-item {
    padding: 1em 2em;
  }
}
.sec-products .conts-notelist-grid-item.platform {
  padding: 1em;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid-item.platform {
    padding: 0.5em;
  }
}
.sec-products .conts-notelist-grid-item.platform img {
  width: 30%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid-item.platform img {
    width: 80%;
  }
}
.sec-products .conts-notelist-grid-item.platform.ns {
  background-color: #af151d;
}
.sec-products .conts-notelist-grid-item.platform.ps {
  background-color: #064899;
}
.sec-products .conts-notelist-grid-item.platform.steam {
  background-color: #23536e;
}
.sec-products .conts-notelist-grid-item.platform.xbox {
  background-color: #107c10;
}
.sec-products .conts-notelist-grid-item.pic {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sec-products .conts-notelist-grid-item.pic picture {
  width: 40%;
  background-color: rgba(255, 255, 255, 0.9);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col4 {
    grid-template-rows: repeat(4, 1fr);
  }
}
.sec-products .conts-notelist-grid.col4 .conts-notelist-grid-item.platform {
  height: 100%;
  grid-column: 1/3;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col4 .conts-notelist-grid-item.platform {
    grid-row: 1/5;
    grid-column: 1/2;
  }
}
.sec-products .conts-notelist-grid.col4 .conts-notelist-grid-item.bundle-note {
  grid-column: 2/3;
  grid-row: 4/6;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col4 .conts-notelist-grid-item.bundle-note {
    grid-column: 3/4;
    grid-row: 3/5;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col3 {
    grid-template-rows: repeat(3, 1fr);
  }
}
.sec-products .conts-notelist-grid.col3 .conts-notelist-grid-item.platform {
  height: 100%;
  grid-column: 1/3;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col3 .conts-notelist-grid-item.platform {
    grid-row: 1/4;
    grid-column: 1/2;
  }
}
.sec-products .conts-notelist-grid.col3 .conts-notelist-grid-item.bundle-note {
  grid-column: 2/3;
  grid-row: 3/5;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-notelist-grid.col3 .conts-notelist-grid-item.bundle-note {
    grid-column: 3/4;
    grid-row: 2/4;
  }
}
.sec-products .conts-products {
  width: 100%;
  background: #100d07;
  padding: min(1rem, 100px) 0 min(0.2rem, 20px);
  border-top: 1px solid #a98012;
  border-bottom: 1px solid #a98012;
  position: relative;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products {
    width: min(15rem, 1530px);
    padding: min(1rem, 100px) min(0.4rem, 40px) min(0.4rem, 40px);
    margin: 0 auto;
    border: 1px solid #a98012;
    position: relative;
  }
  .sec-products .conts-products::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -5px;
    -o-border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/20px round;
       border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/20px round;
    pointer-events: none;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) {
  .sec-products .conts-products::before {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    -o-border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/40px round;
       border-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-frame-outer.png) 40/40px round;
  }
}
.sec-products .conts-products-platform {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform {
    width: -moz-fit-content;
    width: fit-content;
    top: max(-1.3rem, -130px);
    left: 50%;
  }
}
.sec-products .conts-products-platform .ttl {
  margin-bottom: min(0.3rem, 30px);
  line-height: 1.2;
  font-size: min(0.3rem, 30px);
  font-weight: 700;
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .ttl {
    font-size: min(0.32rem, 32px);
  }
}
.sec-products .conts-products-platform .platform-list {
  display: flex;
  text-align: center;
  align-items: center;
  width: min(7.04rem, 704px);
  height: min(1.19rem, 119px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-sp.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .sec-products .conts-products-platform .platform-list {
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list {
    width: min(12.6rem, 1260px);
    height: min(1.19rem, 119px);
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab.png);
  }
}
.sec-products .conts-products-platform .platform-list li {
  height: calc(100% - 2px);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.sec-products .conts-products-platform .platform-list li.ns {
  width: min(2.32rem, 232px);
  transition: background 0.5s ease-in-out;
  margin-left: min(0.04rem, 4px);
  border-right: solid 1px #caab55;
  background-position: left;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ns {
    width: min(3.28rem, 328px);
  }
}
.sec-products .conts-products-platform .platform-list li.ns.is-selected {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-switch_on-sp.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ns.is-selected {
    background-position: left;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-switch_on.png);
    background-size: auto 100%;
  }
}
.sec-products .conts-products-platform .platform-list li.ns img {
  width: 65%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ns img {
    width: 60%;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ns:hover {
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-switch_on.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
  }
}
.sec-products .conts-products-platform .platform-list li.ps {
  width: min(2.3rem, 230px);
  transition: background 0.5s ease-in-out;
  border-right: solid 1px #caab55;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ps {
    width: min(3rem, 300px);
  }
}
.sec-products .conts-products-platform .platform-list li.ps.is-selected {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-ps_on-sp.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100% 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ps.is-selected {
    background-position: center;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-ps_on.png);
  }
}
.sec-products .conts-products-platform .platform-list li.ps img {
  width: 65%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ps img {
    width: 60%;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.ps:hover {
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-ps_on.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
.sec-products .conts-products-platform .platform-list li.xbox {
  width: min(2.3rem, 230px);
  transition: background 0.5s ease-in-out;
  border-right: solid 1px #caab55;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.xbox {
    width: min(3rem, 300px);
  }
}
.sec-products .conts-products-platform .platform-list li.xbox.is-selected {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-xbox_on-sp.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100% 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.xbox.is-selected {
    background-position: center;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-xbox_on.png);
  }
}
.sec-products .conts-products-platform .platform-list li.xbox img {
  width: 75%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.xbox img {
    width: 65%;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.xbox:hover {
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-xbox_on.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
.sec-products .conts-products-platform .platform-list li.steam {
  width: min(2.32rem, 232px);
  transition: background 0.5s ease-in-out;
  background-position: right min(0.03rem, 3px) top 0;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.steam {
    width: min(3.28rem, 328px);
  }
}
.sec-products .conts-products-platform .platform-list li.steam.is-selected {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-steam_on-sp.png);
  background-repeat: no-repeat;
  background-position: right min(0.03rem, 3px) top 0;
  background-size: auto 100%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.steam.is-selected {
    background-position: right min(0.03rem, 3px) top 0;
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-steam_on.png);
  }
}
.sec-products .conts-products-platform .platform-list li.steam img {
  width: 65%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.steam img {
    width: 50%;
  }
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-platform .platform-list li.steam:hover {
    background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-products-tab-steam_on.png);
    background-repeat: no-repeat;
    background-position: right min(0.03rem, 3px) top 0;
    background-size: auto 100%;
  }
}
.sec-products .conts-products-inner {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-inner {
    width: min(90%, 1230px);
  }
}
.sec-products .conts-products-nav {
  margin: 0 auto min(0.5rem, 50px);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .sec-products .conts-products-nav {
    width: 90%;
    margin: 0 3% min(0.5rem, 50px);
  }
}
.sec-products .conts-products-nav ul {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-nav ul {
    flex-direction: row;
    width: min 90%, 1230px;
  }
}
.sec-products .conts-products-nav ul li {
  width: 95%;
  margin: 4%;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-nav ul li {
    width: 44%;
    margin: 2%;
  }
}
.sec-products .conts-products-nav ul li a {
  background: #100d07;
  padding: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.sec-products .conts-products-nav ul li a:after {
  content: "";
  display: block;
  margin-top: min(0.1rem, 10px);
  width: min(0.21rem, 21px);
  height: min(0.14rem, 14px);
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/icon-arrow-btn-down.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.sec-products .conts-products .tab {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sec-products .conts-products .tab.is-selected {
  display: block;
  opacity: 1;
}
.sec-products .conts-products .xbox-lead {
  width: 100%;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/products/bg-xbox-grad.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0;
  text-align: center;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products .xbox-lead {
    padding: min(0.2rem, 20px) 0;
  }
}
.sec-products .conts-products .xbox-lead-text {
  font-size: 0.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2em;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products .xbox-lead-text {
    font-size: min(0.4rem, 40px);
  }
}
.sec-products .conts-products .xbox-lead-period {
  font-size: 0.26rem;
  color: #fff;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products .xbox-lead-period {
    font-size: min(0.32rem, 32px);
  }
}
.sec-products .conts-products .xbox-lead-period span {
  font-size: 1.4em;
}
.sec-products .conts-products-list .products-name {
  text-align: center;
  margin-bottom: min(0.5rem, 50px);
  position: relative;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 4px;
  background: linear-gradient(#a68030, #fef5cb, #a68030);
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}
.sec-products .conts-products-list .products-name .inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/bg-btn-ellipse.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  font-size: min(0.25rem, 25px);
  padding: 0.5em;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-name .inner {
    flex-direction: row;
  }
}
.sec-products .conts-products-list .products-name .inner span {
  background: linear-gradient(to bottom, #fef5cb 20%, #caab55 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-products .conts-products-list .products-item {
  background-image: url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-top.png), url(https://www.monsterhunter.com/stories/assets/images/common/deco-line-frame-bottom.png);
  background-repeat: repeat-x;
  background-size: min(0.36rem, 36px) auto;
  background-position: top, bottom;
  background-color: rgba(255, 255, 255, 0.9);
  padding: min(0.4rem, 40px);
  margin-bottom: min(0.5rem, 50px);
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item {
    padding: min(0.7rem, 70px);
  }
}
.sec-products .conts-products-list .products-item-detail {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
}
.sec-products .conts-products-list .products-item-detail .pic {
  width: 100%;
  background: #fff;
  margin: 0 0 min(0.5rem, 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .pic {
    width: min(4.9rem, 490px);
    height: min(4.9rem, 490px);
  }
}
.sec-products .conts-products-list .products-item-detail .pic picture {
  height: 100%;
}
.sec-products .conts-products-list .products-item-detail .pic picture img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .pic picture img {
    height: 100%;
    width: auto;
  }
}
.sec-products .conts-products-list .products-item-detail .version {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .version {
    width: 55%;
    margin-left: 5%;
  }
}
.sec-products .conts-products-list .products-item-detail .version-item {
  text-align: center;
  margin-bottom: min(0.4rem, 40px);
}
.sec-products .conts-products-list .products-item-detail .version-item .name {
  font-size: 0.36rem;
  font-weight: 700;
  color: #483606;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .version-item .name {
    font-size: min(0.3rem, 30px);
  }
}
.sec-products .conts-products-list .products-item-detail .version-item .price {
  font-size: min(0.22rem, 22px);
  font-weight: 600;
  color: #483606;
  margin-bottom: min(0.2rem, 20px);
}
.sec-products .conts-products-list .products-item-detail .version-item .price span {
  font-size: min(0.28rem, 28px);
}
.sec-products .conts-products-list .products-item-detail .version-item .price.is-through span {
  position: relative;
}
.sec-products .conts-products-list .products-item-detail .version-item .price.is-through span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(6deg);
  background-color: red;
}
.sec-products .conts-products-list .products-item-detail .version-item .price.is-through::after {
  content: "";
  display: block;
  width: 100%;
  height: min(0.26rem, 26px);
  margin: 1em 0;
  background-image: url(https://www.monsterhunter.com/stories/assets/images/products/arrow-icon-price.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.sec-products .conts-products-list .products-item-detail .version-item .price.sale span {
  font-size: min(0.38rem, 38px);
}
.sec-products .conts-products-list .products-item-detail .version-item .cap {
  font-size: 0.24rem;
  font-weight: 700;
  color: #483606;
  margin-bottom: 1em;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .version-item .cap {
    font-size: min(0.2rem, 20px);
  }
}
.sec-products .conts-products-list .products-item-detail .version-item .btn {
  font-size: min(0.24rem, 24px);
  font-weight: 700;
  color: #483606;
}
@media screen and (max-width: 768px) {
  .sec-products .conts-products-list .products-item-detail .version-item .btn {
    width: 82vw;
  }
}
.sec-products .conts-products-list .products-item-detail .version-item .note {
  font-size: 0.22rem;
  font-weight: 500;
  color: #483606;
  margin-block: 1em;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .version-item .note {
    font-size: min(0.18rem, 18px);
  }
}
.sec-products .conts-products-list .products-item-detail .version .contents-list {
  font-size: 0.2rem;
}
@media screen and (min-width: 769px) {
  .sec-products .conts-products-list .products-item-detail .version .contents-list {
    font-size: min(0.16rem, 16px);
  }
}
.sec-products .conts-products-list .products-item-detail .version .contents-list .ttl {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 0.5em;
  padding: 0.4em 1em;
  background-color: #382b16;
  color: #fff;
  font-weight: 700;
}
.sec-products .conts-products-list .products-item-detail .version .contents-list li {
  margin-bottom: 0.2em;
}
.sec-products .conts-products-list .products-item-detail .version .contents-list li.note {
  margin-top: 1em;
  font-size: 0.9em;
}
.sec-products .conts-products-list .products-item .product-item-note {
  font-size: 0.8em;
}

/************************************
	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;
}
.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;
}

/*----- 縦書き -----*/
.t-combine {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}

/*----- 位置 -----*/
.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;
}