@charset "UTF-8";
/************************************
  font
************************************/
@font-face {
  font-family: "source-han-sans-traditional";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansTW-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 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-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;
}

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

body {
  background: #000;
  color: #333;
  font-family: "Source Sans 3", sans-serif;
  font-size: 3.46667vw;
  font-weight: 400;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

@media only screen and (min-width: 769px) {
  body {
    font-size: 0.9375vw;
  }
}

body.lang-hk {
  font-family: "source-han-sans-traditional", sans-serif;
}

body.lang-cn {
  font-family: "source-han-sans-simplified-c", sans-serif;
}

body.lang-kr {
  font-family: "source-han-sans-korean", sans-serif;
}

body a {
  border: none;
  color: #333;
  outline: none;
}

body ul li a {
  display: block;
}

body ul.note li {
  padding-left: 1em;
  text-indent: -1em;
}

body ul.note li::before {
  content: '※';
}

body button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  outline: none;
}

body small.note {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

body small.note::before {
  content: '※';
}

body .btn a {
  display: block;
}

body #wrapper img {
  border: none;
  height: auto;
  margin: auto;
  outline: none;
  width: 100%;
}

/************************************
	header
************************************/
.title-header {
  left: 0;
	position: fixed;
  top: 0;
	width: 100%;
  z-index: 7;
}
/****** ナビ ******/
.gnav .gnav-btn {
  border-right: 1px solid #023bae;
  border-bottom: 1px solid #023bae;
  border-left: 1px solid #023bae;
  cursor: pointer;
  line-height: 0;
  position: fixed;
  right: 1vw;
  top: 0;
  width: 15%;
  z-index: 8;
}
.gnav .gnav-btn-item.gnav-btn-open {
  display: none;
}
.gnav .gnav-btn img {
  margin: 0 1px 1px !important;
  width: calc(100% - 2px) !important;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-btn {
    right: 1vw;
    width: 6%;
  }
}
.gnav .gnav-logo {
  margin-right: auto;
  margin-bottom: 4vw;
  margin-left: auto;
  width: 40%;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-logo {
    margin-bottom: 2vw;
    width: 25%;
  }
}
.gnav .gnav-menu {
  background: url(../images/common/gnav_bg.jpg) left top repeat;
  background-size: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  left: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transition: left .4s ease;
  width: 100%;
}
.gnav .gnav-menu-inner {
  padding: 12vw 0 6vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-inner {
    padding: 1vw 0 3vw;
  }
}
.gnav .gnav-menu-list {
  font-weight: 700;
  font-size: 3.73vw;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list {
    font-size: 1.4583vw;
  }
	/*210730 add*/
  .lang-es .gnav .gnav-menu-list {
    font-size: 1.3vw;
  }
}
.gnav .gnav-menu-list a {
  color: #FFF;
  padding-right: 2vw;
  transition: color .2s ease-in;
}
.gnav .gnav-menu-list-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.gnav .gnav-menu-list-info a {
	padding-right: 0;
	display: inline;
}
@media only screen and (max-width: 768px) {
	.gnav .gnav-menu-list-info .gnav-menu-list-item {
		width: 100%;
		margin-bottom: 4vw;
	}
	.gnav .gnav-menu-list-info .gnav-menu-list-item:last-child {
		margin-bottom: 0;
	}
}
@media only screen and (min-width: 769px) {
	.gnav .gnav-menu-list-info .gnav-menu-list-item {
		width: 28%;
	}
	.gnav .gnav-menu-list-info .gnav-menu-list-item:first-child {
		width: 100%;
		margin-bottom: 2.5vw;
	}
	.gnav .gnav-menu-list-info .gnav-menu-list-item#tu {
		text-align: right;
	}
	.gnav .gnav-menu-list-info .gnav-menu-list-item#event-quest {
		text-align: left;
	}
	/* en-asia */
	.lang-en-asia .gnav .gnav-menu-list-info .gnav-menu-list-item#event-quest {
		margin-left: 6%;
	}
	/* pt-br */
	.lang-pt-br .gnav .gnav-menu-list-info .gnav-menu-list-item#event-quest {
		width: 100%;
		text-align: center;
	}

}
.gnav .gnav-menu-list-site {
  background: rgba(0,0,0,.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Source Serif 4", serif;
  font-size: 4vw;
  font-weight: 700;
  margin: 6vw 0;
  padding: 6vw 10vw;
}
body.lang-hk .gnav-menu-list-site {
  font-family: "source-han-serif-tc",  serif;
}

body.lang-cn .gnav-menu-list-site {
  font-family: "source-han-serif-sc", serif;
}

body.lang-kr .gnav-menu-list-site {
  font-family: "source-han-serif-korean", serif;
}

@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list-site {
    font-size: 1.77vw;
    margin: 3vw 0;
    padding: 4vw 8vw;
  }
  .gnav .gnav-menu-list-site::before,
  .gnav .gnav-menu-list-site::after {
    height: 1vw;
    margin: 2vw 0;
  }
}
@media only screen and (max-width: 768px) {
  .gnav .gnav-menu-list-site .gnav-menu-list-item:not(:last-of-type) {
    margin-bottom: 1.5em;
  }
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list-site .gnav-menu-list-item:not(:nth-last-of-type(-n+2)) {
    margin-bottom: 1.5em;
  }
}
.gnav .gnav-menu-list-site .gnav-menu-list-item {
  line-height: 1.2;
  padding: 0 4vw;
  text-align: left;
  width: 100%;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list-site .gnav-menu-list-item {
    padding: 0;
    width: 40%;
  }
}
.gnav .gnav-ic {
  display: inline-block;
  position: relative;
  padding-left: 2.2em;
}
.gnav .gnav-ic-arrow {
  padding-left: 1.1em;
}
.gnav .gnav-ic::before {
  content: "";
  display: inline-block;
  height: 2em;
  left: 0;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  transition: background .2s ease-in;
  width: 2em;
}
.gnav .gnav-ic-arrow::before {
  height: .9em;
  transition: background .2s ease-in;
  width: .9em;
}
.gnav .gnav-ic-arrow::before {
  background: url("../images/common/arrow_ic-r-w.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-world::before {
  background: url("../images/common/world_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-action::before {
  background: url("../images/common/action_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-field::before {
  background: url("../images/common/field_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-otomo::before {
  background: url("../images/common/otomo_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-monster::before {
  background: url("../images/common/monster_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-weapon::before {
  background: url("../images/common/weapon_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-kamura::before {
  background: url("../images/common/kamura_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-field::before {
  background: url("../images/common/field_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-environment::before {
  background: url("../images/common/environment_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-multiplayer::before {
  background: url("../images/common/multiplayer_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-ic-rampage::before {
  background: url("../images/common/rampage_ic.png") center no-repeat;
  background-size: contain;
}
.gnav .gnav-menu-list-artist {
  display: inline-block;
}
.gnav .gnav-menu-list-item.is-disable {
  opacity: .3;
  pointer-events: none;
}
.gnav.is-active .gnav-menu {
  left: 0;
}
@media only screen and (min-width: 769px) {
  .gnav.is-active .gnav-btn {
    right: calc(1vw + 17px);
  }
}
.gnav.is-active .gnav-btn-item.gnav-btn-close {
  display: none;
}
.gnav.is-active .gnav-btn-item.gnav-btn-open {
  display: block;
}
@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list a:hover {
    color: #EED998;
  }
  .gnav .gnav-menu-list a:hover {
    color: #EED998;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-arrow::before {
    background: url("../images/common/arrow_ic-r-y.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-world::before {
    background: url("../images/common/world_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-action::before {
    background: url("../images/common/action_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-field::before {
    background: url("../images/common/field_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-otomo::before {
    background: url("../images/common/otomo_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-monster::before {
    background: url("../images/common/monster_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-weapon::before {
    background: url("../images/common/weapon_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-kamura::before {
    background: url("../images/common/kamura_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-field::before {
    background: url("../images/common/field_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-environment::before {
    background: url("../images/common/environment_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-multiplayer::before {
    background: url("../images/common/multiplayer_ic-active.png") center no-repeat;
    background-size: contain;
  }
  .gnav .gnav-menu-list a:hover .gnav-ic-rampage::before {
    background: url("../images/common/rampage_ic-active.png") center no-repeat;
    background-size: contain;
  }
}
body.is-gnav {
  overflow: hidden;
}
.gnav .topics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
	margin-top: 8vw;
}
@media only screen and (min-width: 769px) {
	.gnav .topics {
		margin-top: 4vw;
	}
}
.gnav .topics .bnr {
  overflow: hidden;
  width: 80%
}
@media only screen and (min-width: 769px) {
  .gnav .topics .bnr {
    width: 34.22%;
  }
}
@media only screen and (max-width: 768px) {
  .gnav .topics .bnr:not(:last-child) {
    margin-bottom: 2vw;
  }
}
@media only screen and (min-width: 769px) {
  .gnav .topics .bnr:not(:last-child) {
    margin-right: 1.5%;
  }
}
.gnav .topics .bnr a {
  color: #FFF;
  display: block;
  position: relative;
  width: 100%;
  z-index: 2;
}

.gnav .topics .enclose-box {
  border: 4px solid rgba(0, 15, 44, 0.9);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.gnav .topics .enclose-box-inner {
  background: rgba(0, 15, 44, 0.9);
  margin: 2px;
  padding: 1vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .gnav .topics .enclose-box-inner {
    padding: 0.5vw;
  }
}
.gnav .topics .enclose-box-inner::before {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 3.2vw;
  position: absolute;
  right: 1vw;
  top: 50%;
  transform: translateY(-50%);
  width: 4vw;
}

@media only screen and (min-width: 769px) {
  .gnav .topics .enclose-box-inner::before {
    height: 1.6em;
    right: 0.5vw;
    width: 2em;
  }
}
.gnav .topics .enclose-box-inner::after {
  background: url(../images/common/elem_pt.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: calc(100% + 12px);
  right: -8px;
  opacity: .6;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45.65217%;
}
@media only screen and (min-width: 769px) {
  .gnav .topics .enclose-box-inner::after {
    height: calc(100% + 24px);
    right: -12px;
  }
}
.gnav .topics .bnr-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.gnav .topics .bnr-flame {
  line-height: 0;
  position: relative;
  z-index: 2;
}
.gnav .topics .bnr .thumb {
  line-height: 0;
  width: 40%;
}
.gnav .topics .bnr .text-box {
  padding: 0 4vw 0 2vw;
  width: 60%;
}
@media only screen and (min-width: 769px) {
  .gnav .topics .bnr .text-box {
    padding: 0 2vw 0 1vw;
  }
}
.gnav .topics .bnr .text-box .text {
  font-size: 2.7vw;
  text-align: left;
}
@media only screen and (min-width: 769px) {
  .gnav .topics .bnr .text-box .text {
    font-size: 1.1vw;
  }
}

.gnav .manual {
	width: 80%;
	margin: 6vw auto 0;
}
@media only screen and (max-width: 768px) {
	.lang-de .gnav .manual,
	.lang-es .gnav .manual {
		width: 90%;
  }
}
@media only screen and (min-width: 769px) {
	.gnav .manual {
		width: 35%;
		margin: 3vw auto 0;
  }
}

.gnav .manual a {
	position: relative;
	display: block;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	padding: 2vw 5vw 2vw 2vw;
}
@media only screen and (max-width: 768px) {
	.lang-de .gnav .manual a {
		font-size: 3.1vw;
	}
}
@media only screen and (min-width: 769px) {
	.gnav .manual a {
		transition: border .3s ease, color .3s ease;
		padding: 1vw 2.5vw 1vw 1vw;
  }
	.gnav .manual a:hover {
		border: 1px solid #eed998;
		color: #eed998;
  }
}

.gnav .manual a::after {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  transition: background .5s ease;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2vw;
  width: 0.697em;
  height: 0.976em;
}
@media only screen and (min-width: 769px) {
	.gnav .manual a::after {
		right: 1vw;
		width: 0.868em;
		height: 1.23em;
	}
  .gnav .manual a:hover::after {
    background: url(../images/common/arrow_ic-r-y.png) center no-repeat;
    background-size: contain;
  }
}

/****** 購入ボタン ******/
.buy-btn {
  border: 1px solid rgba(230, 0, 18, 0.9);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .buy-btn {
    border: 2px solid rgba(230, 0, 18, 0.9);
  }
}
.buy-btn-inner {
  animation: btnAnime 6s linear infinite reverse;
  background: linear-gradient(135deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  background-size: 200%;
  margin: 1px;
  padding: 7.2vw 4vw 11.2vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .buy-btn-inner {
    margin: 2px;
    padding: 2vw 2vw 3.2vw;
  }
}
.buy-btn a {
  color: #FFF;
  display: block;
  position: relative;
}
.buy-btn a::before {
  background: linear-gradient(135deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  background-size: 200%;
  content: "";
  display: block;
  height: calc(100% - 4px);
  left: 2px;
  position: absolute;
  top: 2px;
  transition: z-index .5s ease-in-out;
  z-index: -1;
  width: calc(100% - 4px);
}
@media only screen and (min-width: 769px) {
  .buy-btn a:hover::before {
    animation: btnAnime .5s linear reverse;
    z-index: 1;
  }
}
.buy-btn-text {
  color: #FFF;
  font-size: 5.06667vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
}
@media only screen and (min-width: 769px) {
  .buy-btn-text {
    font-size: 1.5625vw;
  }
}
.buy-btn-text-image {
  position: absolute;
  width: 100%;
}
.buy-btn-text::after {
  display: none;
}
.buy-btn-text .ruby {
  display: block;
  font-size: .8em;
  line-height: 1.1;
}
.buy-btn.is-disable {
  border: 2px solid #e1d1ba;
  pointer-events: none;
}
@media only screen and (min-width: 769px) {
  .buy-btn.is-disable {
    border: 4px solid #e1d1ba;
  }
}
.buy-btn.is-disable .buy-btn-inner {
  background: #E1D1BA;
}
.buy-pos-fixed {
  position: fixed;
  left: 0;
  top: -8vw;
  width: 37.33333%;
  z-index: 8;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed {
    left: 0;
    width: 15%;
  }
}
.buy-pos-fixed .buy-btn-inner {
  padding: 4vw 4vw 7.2vw;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn-inner {
    padding: 1.66667vw 2vw 2.4vw;
  }
}
.buy-pos-fixed .buy-btn-text {
  font-weight: 700;
  font-size: 2.93333vw;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn-text {
    font-size: 1.14583vw;
  }
}
.buy-pos-fixed .buy-btn::after {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.2em;
  margin-left: 1vw;
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  z-index: 2;
}

@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn::after {
    margin-left: 0.5vw;
  }
}
/*---- 購入ボタン- -----*/
.buy.buy-pos-fixed {
  top: -8vw;
}
.buy.buy-pos-fixed.is-hide {
  visibility: hidden;
  transition: .5s;
}
.buy.buy-pos-fixed.is-show {
  left: 0;
  top: 0;
  transition: top .5s ease-in, visibility .5s ease-in;
  visibility: visible;
}
@media only screen and (min-width: 769px) {
  .buy.buy-pos-fixed.is-show {
    left: 0;
  }
}
.buy.buy-header {
  position: absolute;
  left: 0;
  top: -8vw;
  transition: .5s;
  visibility: hidden;
  width: 37.33333%;
  z-index: 4;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header {
    left: 0;
    width: 15%;
  }
}
.buy.buy-header .buy-btn-inner {
  padding: 4vw 4vw 7.2vw;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn-inner {
    padding: 1.66667vw 2vw 2.4vw;
  }
}
.buy.buy-header .buy-btn-text {
  font-weight: 700;
  font-size: 2.93333vw;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn-text {
    font-size: 1.14583vw;
  }
}
.buy.buy-header .buy-btn::after {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.2em;
  margin-left: 1vw;
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  z-index: 2;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn::after {
    margin-left: 0.5vw;
  }
}
/****** TOPページ制御 ******/
.page-top .title-header .site-logo,
.page-top .title-header .buy-header {
  display: none;
}
/****** 商品情報ページ制御 ******/
.page-product .site-logo {
  display: none;
}
.page-product .title-header {
  position: absolute;
  top: -7vw;
}
.page-product .title-header .buy-header {
  display: none;
}
@media only screen and (min-width: 769px) {
  .page-product .title-header {
    position: fixed;
    top: 0;
  }
}
/****** 動画/最新情報ページ制御 ******/
.page-news .site-logo,
.page-movie .site-logo {
  display: none;
}
.page-news .buy.buy-header,
.page-movie .buy.buy-header {
  left: 0;
  top: 0;
  right: auto;
  visibility: visible;
}
@media only screen and (min-width: 769px) {
  .page-news .buy.buy-header,
  .page-movie .buy.buy-header {
    right: auto;
  }
}
/****** スクロール制御 ******/
.title-header .site-logo {
  transition: opacity .2s ease-out;
}
.is-overlay .title-header .site-logo {
  opacity: 0;
}
.is-overlay .buy.buy-header {
  top: 0;
  visibility: visible;
}

/************************************
	footer
************************************/
#title_footer {
  border-top: 1px solid #777;
  position: relative;
  z-index: 1;
}


/************************************
	content
************************************/
#wrapper {
  line-height: 1.5;
  position: relative;
}

@media only screen and (min-width: 769px) {
  #wrapper {
    width: 100%;
    /*overflow-x: hidden;*/
  }
}

#wrapper > .main {
  position: relative;
  z-index: 1;
}

#wrapper > .sub {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 769px) {
  #wrapper > .sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.sec {
  position: relative;
}

.sec-box {
  position: relative;
}

.sec-inner {
  padding: 0 4vw;
  position: relative;
}

@media only screen and (min-width: 769px) {
  .sec-inner {
    padding: 0 4vw;
  }
}

/************************************
	module
************************************/
/****** 更新アイコン ******/
.ic-up {
  position: relative;
}
.ic-up::before,
.ic-up::after {
  content: "";
  display: block;
  height: 5.2vw;
  left: .2vw;
  position: absolute;
  top: .1vw;
  width: 5.6vw;
}
@media only screen and (min-width: 769px) {
  .ic-up::before,
  .ic-up::after {
    height: 2vw;
    width: 2.2vw;
  }
}
.ic-up.ic-up-gnav::before,
.ic-up.ic-up-gnav::after {
  left: -4.2vw;
  top: -1.6vw;
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-gnav::before,
  .ic-up.ic-up-gnav::after {
    left: -2vw;
    top: -.8vw;
  }
}
.ic-up.ic-up-gnav-menu::before,
.ic-up.ic-up-gnav-menu::after {
  left: 0;
  top: -1.6vw;
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-gnav-menu::before,
  .ic-up.ic-up-gnav-menu::after {
    left: -1.6vw;
    top: -.8vw;
  }
}
.ic-up.ic-up-flame::before,
.ic-up.ic-up-flame::after {
  left: 2.8vw;
  top: 2.8vw;
  z-index: 4;
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-flame::before,
  .ic-up.ic-up-flame::after {
    left: 1vw;
    top: 1vw;
  }
}
.ic-up.ic-up-text::before,
.ic-up.ic-up-text::after {
  left: -1.8em;
  top: -.6em;
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-text::before,
  .ic-up.ic-up-text::after {
    left: -1.8em;
    top: -.6em;
  }
}
.ic-up.ic-up-news::before,
.ic-up.ic-up-news::after {
  left: .5vw;
  top: -4vw;
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-news::before,
  .ic-up.ic-up-news::after {
    left: .2vw;
    top: -1.5vw;
  }
}
.ic-up.ic-up-sitenav::before,
.ic-up.ic-up-sitenav::after {
  left: -2.6vw;
  top: -1.1vw;
	width: 4.2vw;
	height: 4.6vw;
}
@media only screen and (max-width: 768px) {
	.lang-kr .ic-up.ic-up-sitenav::before,
	.lang-kr .ic-up.ic-up-sitenav::after,
	.lang-hk .ic-up.ic-up-sitenav::before,
	.lang-hk .ic-up.ic-up-sitenav::after,
	.lang-cn .ic-up.ic-up-sitenav::before,
	.lang-cn .ic-up.ic-up-sitenav::after {
		left: -3.6vw;
	}
}
@media (orientation: portrait) and (max-width: 768px) {
	.site-nav-list-item.size-s .ic-up.ic-up-sitenav::before,
	.site-nav-list-item.size-s .ic-up.ic-up-sitenav::after {
		left: 0;
	}
	.lang-hk .site-nav-list-item.size-s .ic-up.ic-up-sitenav::before,
	.lang-hk .site-nav-list-item.size-s .ic-up.ic-up-sitenav::after,
	.lang-cn .site-nav-list-item.size-s .ic-up.ic-up-sitenav::before,
	.lang-cn .site-nav-list-item.size-s .ic-up.ic-up-sitenav::after	{
		left: -1vw;
	}
	.lang-kr .site-nav-list-item.size-s .ic-up.ic-up-sitenav::before,
	.lang-kr .site-nav-list-item.size-s .ic-up.ic-up-sitenav::after {
		left: -3.6vw;
	}
}
@media only screen and (min-width: 769px) {
  .ic-up.ic-up-sitenav::before,
  .ic-up.ic-up-sitenav::after {
    left: -3.3vw;
    top: 0;
		width: 2.6vw;
		height: 2.4vw;
  }
}
.ic-up.ic-up-bnr::before {
	z-index: 3;
}
.ic-up.ic-up-bnr::after {
	z-index: 2;
}
.ic-up.ic-up-bnr::before,
.ic-up.ic-up-bnr::after {
	left: initial;
	right: .2vw;
	top: .2vw;
}
.ic-up::before {
  background: url(../images/common/up_ic.png) center no-repeat;
  background-size: contain;
  z-index: 2;
 }
.ic-up::after {
  animation: ic-blink 1s ease-in-out infinite alternate;
  background: url(../images/common/up_ic-blink.png) center no-repeat;
  background-size: contain;
  z-index: 1;
}

/****** ページタイトル ******/
.page-ttl-logo {
  color: #FFF;
  font-size: 5.53333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  margin: 12vw 0 9vw;
  position: relative;
  text-align: center;
}
.page-ttl-logo span {
  padding-left: 0;
}
.page-ttl-logo .logo {
  display: block;
  line-height: 0;
  margin-right: auto;
  margin-left: auto;
  width: 45%;
}
@media only screen and (min-width: 769px) {
  .page-ttl-logo .logo {
    width: 25%;
  }
  .page-ttl-logo {
    font-size: 2.5vw;
    margin: 2.5vw 0 5vw;
    width: 100%;
  }
}
/****** 背景 ******/
.page-bg {
  left: 0;
  position: absolute;
  width: 100%;
}

.page-bg::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.page-bg-base {
  height: 100%;
  position: fixed;
  top: 0;
}

.page-bg-base::after {
  background-image: url(../images/common/page_bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (min-width: 769px) {
  .page-bg-base::after {
    background-image: url(../images/common/page_bg.jpg);
    background-attachment: fixed;
  }
}
/****** マルチカラム ******/
.col-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/****** toTOP ******/
.to-top {
  bottom: 2vw;
  cursor: pointer;
  position: fixed;
  right: 2vw;
  transition: bottom 1s linear;
  width: 10%;
  z-index: -1;
}

@media only screen and (min-width: 769px) {
  .to-top {
    bottom: 2vw;
    right: 2vw;
    width: 4%;
  }
}

.to-top img {
  height: auto;
  width: 100%;
}
/*---- ToTOP- -----*/
.to-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-in, visibility .2s ease-in, z-index .2s ease-in;
}

.to-top.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 5;
}

@media only screen and (min-width: 769px) {
  .to-top.is-stop {
    bottom: 5vw;
  }
}

/*----- ニュースパネル -----*/
.product-lineup .panel-item-inner::before, .panel-item-inner::after {
  content: "";
  display: block;
  width: 100%;
  z-index: -1;
}

.product-lineup .panel-item-inner::before {
  background: url(../images/common/panel_bg-t.png) center bottom no-repeat;
  background-size: 100% 25px;
  height: 25px;
}

@media only screen and (min-width: 769px) {
  .product-lineup .panel-item-inner::before {
    background-size: 100% 51px;
    height: 51px;
  }
}

.product-lineup .panel-item-inner::after {
  background: url(../images/common/panel_bg-b.png) center top no-repeat;
  background-size: 100% 33px;
  height: 33px;
}

@media only screen and (min-width: 769px) {
  .product-lineup .panel-item-inner::after {
    background-size: 100% 66px;
    height: 66px;
  }
}

.product-lineup .panel-item-inner .inner {
  background: url(../images/common/panel_bg-c.png) center top repeat-y;
  background-size: 100% 13px;
  margin: -1px 0;
  padding: 0.66667vw 2vw;
}

@media only screen and (min-width: 769px) {
  .product-lineup .panel-item-inner .inner {
    background-size: 100% 22px;
    padding: 1vw 2vw;
  }
}

/*----- ニュースパネル -----*/
.news .panel-item-inner::before,
.news .panel-item-inner::after {
  content: "";
  display: block;
  width: 100%;
  z-index: -1;
}

.news .panel-item-inner::before {
  background: url(../images/common/panel_bg-t.png) center bottom no-repeat;
  background-size: 100% 25px;
  height: 25px;
}

@media only screen and (min-width: 769px) {
  .news .panel-item-inner::before {
    background-size: 100% 51px;
    height: 51px;
  }
}
.news .panel-item-inner::after {
  background: url(../images/common/panel_bg-b.png) center top no-repeat;
  background-size: 100% 33px;
  height: 33px;
}

@media only screen and (min-width: 769px) {
  .news .panel-item-inner::after {
    background-size: 100% 66px;
    height: 66px;
  }
}
.news .panel-item-inner .inner {
  background: url(../images/common/panel_bg-c.png) center top repeat-y;
  background-size: 100% 30px;
  margin: -1px 0;
  padding: 0.66667vw 2vw;
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 769px) {
  .news .panel-item-inner .inner {
    background-size: 100% 60px;
    padding: 1vw 2vw;
  }
}
.news .slide-thumb {
  line-height: 0;
  margin-top: -14px;
}
@media only screen and (min-width: 769px) {
  .news .slide-thumb {
    margin-top: -32px;
  }
}
.news .slide-thumb .ic {
  display: block;
}
.news .slide-thumb::after {
  background: url(../images/common/panel_line.png) center no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  margin: 2vw auto;
  padding: 1vw 0;
  width: 60%;
}

@media only screen and (min-width: 769px) {
  .news .slide-thumb::after {
    margin: 1vw auto;
    padding: .5vw 0;
    width: 75%;
  }
}
.news .slide-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 2.66667vw;
  margin-bottom: -14px;
  padding: 0 .5em .5em;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .news .slide-text {
    font-size: 0.9375vw;
    margin-bottom: -38px;
  }
}
.news .slide-text .text {
  margin-bottom: 2em;
  width: 100%;
}
.news .slide-text .date {
  color: #D9C19E;
  font-size: .9em;
  overflow: hidden;
  padding: 0 .4em;
  position: relative;
  text-align: right;
}
.news .slide-text .date span {
  display: block;
  position: relative;
  z-index: 2;
}
.news .slide-text .cat {
  color: #FFF;
  font-size: .9em;
  line-height: 1;
  padding: 0 .5em;
  position: relative;
}
.news .slide-text .cat span {
  position: relative;
  vertical-align: middle;
  z-index: 2;
}
.news .slide-text .cat.cat-game {
  color: #0b7fc2;
  border-left: 4px solid #0b7fc2;
}
.news .slide-text .cat.cat-media {
  color: #009577;
  border-left: 4px solid #009577;
}
.news .slide-text .cat.cat-goods {
  color: #ce0606;
  border-left: 4px solid #ce0606;
}
.news .slide-text .cat.cat-event {
  color: #7e1abd;
  border-left: 4px solid #7e1abd;
}
/************************************
	Object
************************************/
/****** clearfix ******/
.cf::before, .cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

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

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

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

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

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

.ic-twitch {
  background: url(../images/common/twitch_ic.png) center no-repeat;
  background-size: contain;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pd-b1 {
  padding-bottom: 4vw;
}

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

.pd-b1h {
  padding-bottom: 6vw;
}

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

.pd-b1h-d {
  padding-bottom: 2.66667vw;
}

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

.pd-b2 {
  padding-bottom: 8vw;
}

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

.pd-b2-d {
  padding-bottom: 2vw;
}

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

.pd-t1 {
  padding-top: 4vw;
}

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

.pd-t1h {
  padding-top: 6vw;
}

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

.pd-t1h-d {
  padding-top: 2.66667vw;
}

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

.pd-t2 {
  padding-top: 8vw;
}

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

.pd-t2-d {
  padding-top: 2vw;
}

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

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

.mg-b1 {
  margin-bottom: 4vw;
}

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

.mg-b1h {
  margin-bottom: 6vw;
}

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

.mg-b1h-d {
  margin-bottom: 2.66667vw;
}

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

.mg-b2 {
  margin-bottom: 8vw;
}

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

.mg-b2-d {
  margin-bottom: 2vw;
}

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

.mg-t1 {
  margin-top: 4vw;
}

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

.mg-t1h {
  margin-top: 6vw;
}

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

.mg-t1h-d {
  margin-top: 2.66667vw;
}

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

.mg-t2 {
  margin-top: 8vw;
}

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

.mg-t2-d {
  margin-top: 2vw;
}

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

/****** 位置 ******/
.pos-float {
  position: absolute;
}

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

/****** 表示 ******/
.d-block {
  display: block;
}

@media only screen and (max-width: 768px) {
  .d-block-sp {
    display: block;
  }
}

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

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

@media only screen and (min-width: 769px) {
  .hide-sp {
    display: block;
  }
  br.hide-sp,
  span.hide-sp {
    display: inline;
  }
  .img-pc {
    display: inline;
  }
  .hide-pc,
  .img-sp {
    display: none;
  }
}
/****** 購入ボタン ******/
.buy-btn {
  border: 1px solid rgba(230, 0, 18, 0.9);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .buy-btn {
    border: 2px solid rgba(230, 0, 18, 0.9);
  }
}
.buy-btn-inner {
  animation: btnAnime 6s linear infinite reverse;
  background: linear-gradient(135deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  background-size: 200%;
  margin: 1px;
  padding: 7.2vw 4vw 11.2vw;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .buy-btn-inner {
    margin: 2px;
    padding: 2vw 2vw 3.2vw;
  }
}
.buy-btn a {
  color: #FFF;
  display: block;
  position: relative;
}
.buy-btn a::before {
  background: linear-gradient(135deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  background-size: 200%;
  content: "";
  display: block;
  height: calc(100% - 4px);
  left: 2px;
  position: absolute;
  top: 2px;
  transition: z-index .5s ease-in-out;
  z-index: -1;
  width: calc(100% - 4px);
}
@media only screen and (min-width: 769px) {
  .buy-btn a:hover::before {
    animation: btnAnime .5s linear reverse;
    z-index: 1;
  }
}
.buy-btn-text {
  color: #FFF;
  font-size: 5.06667vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
}
@media only screen and (min-width: 769px) {
  .buy-btn-text {
    font-size: 1.5625vw;
  }
}
.buy-btn-text-image {
  position: absolute;
  width: 100%;
}
.buy-btn-text::after {
  display: none;
}
.buy-btn-text .ruby {
  display: block;
  font-size: .8em;
  line-height: 1.1;
}
.buy-btn.is-disable {
  border: 2px solid #e1d1ba;
  pointer-events: none;
}
@media only screen and (min-width: 769px) {
  .buy-btn.is-disable {
    border: 4px solid #e1d1ba;
  }
}
.buy-btn.is-disable .buy-btn-inner {
  background: #E1D1BA;
}
.buy-pos-fixed {
  position: fixed;
  left: 0;
  top: -8vw;
  width: 37.33333%;
  z-index: 8;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed {
    left: 0;
    width: 15%;
  }
}
.buy-pos-fixed .buy-btn-inner {
  padding: 4vw 4vw 7.2vw;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn-inner {
    padding: 1.66667vw 2vw 2.4vw;
  }
}
.buy-pos-fixed .buy-btn-text {
  font-weight: 700;
  font-size: 2.93333vw;
}
@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn-text {
    font-size: 1.14583vw;
  }
}
.buy-pos-fixed .buy-btn::after {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.2em;
  margin-left: 1vw;
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  z-index: 2;
}

@media only screen and (min-width: 769px) {
  .buy-pos-fixed .buy-btn::after {
    margin-left: 0.5vw;
  }
}
/*---- 購入ボタン- -----*/
.buy.buy-pos-fixed {
  top: -8vw;
}
.buy.buy-pos-fixed.is-hide {
  visibility: hidden;
  transition: .5s;
}
.buy.buy-pos-fixed.is-show {
  left: 0;
  top: 0;
  transition: top .5s ease-in, visibility .5s ease-in;
  visibility: visible;
}
@media only screen and (min-width: 769px) {
  .buy.buy-pos-fixed.is-show {
    left: 0;
  }
}
.buy.buy-header {
  position: absolute;
  left: 0;
  top: -8vw;
  transition: .5s;
  visibility: hidden;
  width: 37.33333%;
  z-index: 4;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header {
    left: 0;
    width: 15%;
  }
}
.buy.buy-header .buy-btn-inner {
  padding: 4vw 4vw 7.2vw;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn-inner {
    padding: 1.66667vw 2vw 2.4vw;
  }
}
.buy.buy-header .buy-btn-text {
  font-weight: 700;
  font-size: 2.93333vw;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn-text {
    font-size: 1.14583vw;
  }
}
.buy.buy-header .buy-btn::after {
  background: url(../images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.2em;
  margin-left: 1vw;
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  z-index: 2;
}
@media only screen and (min-width: 769px) {
  .buy.buy-header .buy-btn::after {
    margin-left: 0.5vw;
  }
}
/****** TOPページ制御 ******/
.page-top .title-header .site-logo,
.page-top .title-header .buy-header {
  display: none;
}
/****** 商品情報ページ制御 ******/
.page-product .site-logo {
  display: none;
}
.page-product .title-header {
  position: absolute;
  top: -7vw;
}
.page-product .title-header .buy-header {
  display: none;
}
@media only screen and (min-width: 769px) {
  .page-product .title-header {
    position: fixed;
    top: 0;
  }
}
/****** 動画/最新情報ページ制御 ******/
.page-news .site-logo,
.page-movie .site-logo {
  display: none;
}
.page-news .buy.buy-header,
.page-movie .buy.buy-header {
  left: 0;
  top: 0;
  right: auto;
  visibility: visible;
}
@media only screen and (min-width: 769px) {
  .page-news .buy.buy-header,
  .page-movie .buy.buy-header {
    right: auto;
  }
}
/****** スクロール制御 ******/
.title-header .site-logo {
  transition: opacity .2s ease-out;
}
.is-overlay .title-header .site-logo {
  opacity: 0;
}
.is-overlay .buy.buy-header {
  top: 0;
  visibility: visible;
}

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

.ua-ie .sec#timeline {
  display: none;
}

.ua-ie .sec#gameinfo .conts.Field .conts-lead[data-elem="animElem"] .image {
  transform: translate(16px, -16px);
}

.ua-ie .sec#gameinfo .conts.Field .conts-lead[data-elem="animElem"].is-anim .image {
  transform: translate(0, 0);
}

@media only screen and (min-width: 769px) {
  .ua-ie .sec#spec {
    margin-right: 0;
    margin-left: 0;
  }
}

/****** Edge ******/
@media only screen and (min-width: 769px) {
  .ua-edge {
    width: calc(100% - 12px);
  }
  .ua-edge .gnav .gnav-btn {
    right: calc(1vw + 12px);
  }
}

.ua-edge .nicescroll-rails-vr {
  background: #DDD !important;
  opacity: 1 !important;
  width: 12px !important;
  z-index: 99 !important;
}

.ua-edge .nicescroll-rails-vr .nicescroll-cursors {
  background: #AAA !important;
  border-radius: none !important;
  height: 250px !important;
  width: 12px !important;
}

.ua-edge .nicescroll-rails-hr {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.ua-edge .mv-bg {
  -webkit-mask: initial;
  -webkit-mask-size: initial;
  z-index: 3;
}

@media only screen and (min-width: 769px) {
  .ua-edge .sec#gameinfo .conts-list .inner:hover .monster-name {
    animation: none !important;
  }
}

/************************************
  local
************************************/
/****** US ******/
/****** ナビ ******/
.lang-us .gnav .gnav-menu-list {
  font-weight: 700;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-us .gnav .gnav-menu-list {
    font-size: 1.4583vw;
  }
}
.lang-us .gnav .gnav-menu-list-site {
  font-family: "Source Serif 4", serif;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-us .gnav .gnav-menu-list-site {
    font-size: 1.4583vw;
  }
}
/****** uk ******/
/****** ナビ ******/
.lang-uk .gnav .gnav-menu-list {
  font-weight: 700;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-uk .gnav .gnav-menu-list {
    font-size: 1.4583vw;
  }
}
.lang-uk .gnav .gnav-menu-list-site {
  font-family: "Source Serif 4", serif;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-uk .gnav .gnav-menu-list-site {
    font-size: 1.4583vw;
  }
}
/****** en-asia ******/
/****** ナビ ******/
.lang-en-asia .gnav .gnav-menu-list {
  font-weight: 700;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-en-asia .gnav .gnav-menu-list {
    font-size: 1.4583vw;
  }
}
.lang-en-asia .gnav .gnav-menu-list-site {
  font-family: "Source Serif 4", serif;
  font-size: 3.6vw;
}
@media only screen and (min-width: 769px) {
  .lang-en-asia .gnav .gnav-menu-list-site {
    font-size: 1.4583vw;
  }
}
/****** fr ******/
/****** 購入ボタン ******/
.lang-fr .buy.buy-header .buy-btn-text {
  font-size: 2.66667vw;
}

@media only screen and (min-width: 769px) {
  .lang-fr .buy.buy-header .buy-btn-text {
    font-size: 1.04167vw;
  }
}

.lang-fr .buy.buy-header .buy-btn-text-subscription {
  line-height: 1.1;
  font-size: 2.66667vw;
}

@media only screen and (min-width: 769px) {
  .lang-fr .buy.buy-header .buy-btn-text-subscription {
    font-size: 1.04167vw;
  }
}

.lang-fr .buy.buy-header .buy-pos-fixed .buy-btn-text {
  font-size: 2.66667vw;
}

@media only screen and (min-width: 769px) {
  .lang-fr .buy.buy-header .buy-pos-fixed .buy-btn-text {
    font-size: 1.04167vw;
  }
}

.lang-fr .buy.buy-header .buy-pos-fixed .buy-btn-text-subscription {
  font-size: 2.66667vw;
  left: 45%;
}

@media only screen and (min-width: 769px) {
  .lang-fr .buy.buy-header .buy-pos-fixed .buy-btn-text-subscription {
    font-size: 1.04167vw;
    left: 47.5%;
  }
}
/****** es ******/
/****** 購入ボタン ******/
.lang-es .buy.buy-header .buy-btn-text-subscription {
  line-height: 1.1;
}


/************************************
  Anim
************************************/
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mvMask {
  from {
    -webkit-mask-position: 0 0;
    -ms-mask-position: 0 0;
    -moz-mask-position: 0 0;
    -o-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    -ms-mask-position: 100% 0;
    -moz-mask-position: 100% 0;
    -o-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes mvBefore {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes mvAfter {
  0% {
    opacity: .2;
  }
  50% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes btnAnime {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}

@keyframes monsterName {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}

@keyframes zoomUp {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1) rotate(-15deg);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 2.2) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) rotate(-15deg);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    opacity: .8;
    transform: translate(0, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes ic-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}