@charset "UTF-8";

/* CSS Document */
/************************************
  font
************************************/
@font-face {
  font-family: "Noto Sans JP";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}
@font-face {
  font-family: "Noto Sans";
  src: url("https://www.capcom-games.com/common/font/SourceSans3-VF.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}
@font-face {
  font-family: "Noto Serif JP";
  src: url("https://www.capcom-games.com/common/font/SourceHanSerifJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}
@font-face {
  font-family: "Noto Serif";
  src: url("https://www.capcom-games.com/common/font/SourceSerif4-VF.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}

@font-face {
  font-family: "Roboto";
  src: url("https://www.capcom-games.com/common/font/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}


/************************************
  common
************************************/
html, body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

body.lang-en,
body.pg-404 {
  font-family: "Noto Sans", sans-serif;
}


@media only screen and (max-width: 768px) {
  html, body {
    font-size: 90%;
  }
}

figure img {
  width: 100%;
  height: auto;
}

/* a:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.05" /><feFuncG type="linear" slope="1.05" /><feFuncB type="linear" slope="1.05" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: brightness(115%);
  filter: brightness(115%);
} */

.date {
  color: #8e8e8e;
}

@media only screen and (min-width: 769px) {
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

.fsd70p {
  font-size: 70%;
}

.fsd80p {
  font-size: 80%;
}

.fsd90p {
  font-size: 90%;
}

.fsu110p {
  font-size: 110%;
}

.fsu120p {
  font-size: 120%;
}

.fsu130p {
  font-size: 130%;
}

.fwb {
  font-weight: 900;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.wht {
  color: #fff;
}

.ylw {
  color: #fff000;
}

.blu {
  color: #4ac6ff;
}

.org {
  color: #ff7124;
}

.gre {
  color: #1ed284;
}

.red {
  color: #df0a0a;
}

.jcc {
  justify-content: center;
}

.jcsa {
  justify-content: space-around;
}

.alistr {
  align-items: stretch;
}

.alista {
  align-items: flex-start;
}

a.btn {
  background: #452c09;
  color: #fff;
  padding: 0.5em 2em;
  border-radius: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.6;
}

a.btn:hover {
  background: #7f5315;
}

.flex_box {
  display: flex;
  flex-wrap: wrap;
}

.flex_box_2col {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 2vw auto;
}
.flex_box_2col>* {
  width: 48%;
  text-align: center;
}


@media only screen and (max-width: 768px) {
  .flex_box_2col > * {
    width: 100%;
    margin: 4vw 0;
  }

  .flex_box,
  .flex_box_2col {
    flex-wrap: wrap;
  }

  a.btn {
    width: 100%;
    border-radius: 2em;
  }
}

#wrapper {
  background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/bg.jpg);
  background-repeat: repeat;
  background-position: center top;
  z-index: 1;
  overflow-x: hidden;
}

.mhb_contents #wrapper {
  background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/bg_mhb.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  .mhb_contents #wrapper {
    background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/bg_mhb_sp.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;  
  }
}

/*global*/
.mhb_contents.lang-gl #wrapper {
  background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/bg_mhb_gl.jpg);
  background-position: 100%;
}

@media only screen and (max-width: 768px) {
  .mhb_contents.lang-gl #wrapper {
    background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/bg_mhb_gl.jpg);
  }
}

#title_footer {
  border-top: 0.5px solid #ccc;
  background: #000;
}

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

.info .category{
  margin-right: auto;
  font-size: 3vw;
  font-weight: 500;
  border-left: 6px #000 solid;
  padding-left: 0.5em;
}
@media screen and (min-width: 769px) {
  .info .category{
    font-size: 0.9vw;
  }
}

.info .category.cat_game{
  border-color: var(--category-game-color);
  color: var(--category-game-color);
}

.info .category.cat_media{
  border-color: var(--category-media-color);
  color: var(--category-media-color);
}

.info .category.cat_campaign{
  border-color: var(--category-campaign-color);
  color: var(--category-campaign-color);
}

.info .category.cat_mhb{
  border-color: var(--category-mhb-color);
  color: var(--category-mhb-color);
}

.info .category.cat_event{
  border-color: var(--category-event-color);
  color: var(--category-event-color);
}

.info .category.cat_goods{
  border-color: var(--category-goods-color);
  color: var(--category-goods-color);
}

.info .date{
  margin-top: auto;
  font-size: 2vw;
}
@media screen and (min-width: 769px) {
  .info .date{
    font-size: 0.8vw;
  }
}

/*mhNews_category*/
.mhNews_category .cat_game{
  color: var(--category-game-color);
}

.mhNews_category .cat_media{
  color: var(--category-media-color);
}

.mhNews_category .cat_campaign{
  color: var(--category-campaign-color);
}

.mhNews_category .cat_mhb{
  color: var(--category-mhb-color);
}

.mhNews_category .cat_event{
  color: var(--category-event-color);
}

.mhNews_category .cat_goods{
  color: var(--category-goods-color);
}

/*btn hex*/
.btn_hex{
  width: 50%;
  height: 8vw;
  font-size: 3.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4e2208;
  color: #fff;
  position: relative;
  margin: 4vw auto;
	transition: background .2s ease-out;
}

.btn_hex:hover{
  background: #813b11;
}

@media screen and (min-width: 769px) {
  .btn_hex{
    width: 15vw;
    height: 3vw;
    font-size: 1vw;
    margin: 2vw auto;
  }
}

.btn_hex span:after{
  content: "";
  width: 3vw;
  height: 3vw;
  display: block;
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  background: url(https://www.monsterhunter.com/ja/wp-content/themes/mhseries/assets/images/common/icon_arrow_btn.png) no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (min-width: 769px) {
  .btn_hex span:after{
    width: 0.8vw;
    height: 0.8vw;
  }
}

.btn_hex:before,
.btn_hex:after {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    content: '';
    border: 4vw solid transparent;
    border-right: 2.5vw solid transparent;
    border-left: 2.5vw solid transparent;
		transition: border .2s ease-out;
}

@media screen and (min-width: 769px) {
  .btn_hex:before,
  .btn_hex:after {
      border: 1.5vw solid transparent;
      border-right: 1vw solid transparent;
      border-left: 1vw solid transparent;
  }
}

.btn_hex:before {
    right: 100%;
    border-right-color: #4e2208;
}
.btn_hex:after {
    left: 100%;
    border-left-color: #4e2208;
}

.btn_hex:hover:before {
    right: 100%;
    border-right-color: #813b11;
}
.btn_hex:hover:after {
    left: 100%;
    border-left-color: #813b11;
}

.btn_hex.lbrwn {
  background: #ad6920;
}
.btn_hex.lbrwn:before {
  right: 100%;
  border-right-color: #ad6920;
}
.btn_hex.lbrwn:after {
  left: 100%;
  border-left-color: #ad6920;
}
.btn_hex.lbrwn:hover {
  background: #d48c3e;
}
.btn_hex.lbrwn:hover:before {
  right: 100%;
  border-right-color: #d48c3e;
}
.btn_hex.lbrwn:hover:after {
  left: 100%;
  border-left-color: #d48c3e;
}

.is-hide{
  display: none !important;
}

.cat_uncategorized-ja{
  display: none !important;
}

.cat_uncategorized {
  display: none !important;
}

  .hover-img {
    position: relative;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
  }
  .hover-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    display: block;
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
  }
  .hover-img:hover img:nth-of-type(2) {
    opacity: 0;
  }

/*** animation ***/
[data-js-anime=scroll][data-js-anime-scroll=sec],
[data-js-anime=scroll][data-js-anime-scroll=mhb] .title,
[data-js-anime=scroll][data-js-anime-scroll=mhb] figure,
[data-js-anime=scroll][data-js-anime-scroll=mhb]::after,
[data-js-anime=scroll][data-js-anime-scroll=mhb]::before,
[data-js-anime=scroll][data-js-anime-scroll=conts],
[data-js-anime=scroll][data-js-anime-scroll=mhb2],
[data-js-anime=scroll][data-js-anime-scroll=mhb3],
[data-js-anime=scroll][data-js-anime-scroll=mhb4] {
  opacity: 0
}

[data-js-anime=scroll][data-js-anime-scroll=sec].is-anime,
[data-js-anime=scroll][data-js-anime-scroll=conts].is-anime {
  animation: fadeInUp .4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

[data-js-anime=scroll][data-js-anime-scroll=mhb].is-anime::before {
  animation: fadeInRight .4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
[data-js-anime=scroll][data-js-anime-scroll=mhb].is-anime::after {
  animation: fadeInLeft .4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

[data-js-anime=scroll][data-js-anime-scroll=mhb].is-anime .title,
[data-js-anime=scroll][data-js-anime-scroll=mhb].is-anime figure {
  animation: fadeInUp .4s cubic-bezier(0.215, 0.61, 0.355, 1) .2s forwards;
}

[data-js-anime=scroll][data-js-anime-scroll=mhb2] {
  animation: fadeInUp .4s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}

[data-js-anime=scroll][data-js-anime-scroll=mhb3] {
  animation: fadeInUp .4s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s forwards;
}

[data-js-anime=scroll][data-js-anime-scroll=mhb4] {
  animation: fadeInUp .4s cubic-bezier(0.215, 0.61, 0.355, 1) 2s forwards;
}


@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(80px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(80px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-80px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}