@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;
}

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%
}
.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: 2vw;
    width: 6%
  }
}
.gnav .gnav-logo {
  margin-right: auto;
  margin-left: auto;
  width: 40%
}

@media only screen and (min-width: 769px) {
  .gnav .gnav-logo {
    width: 25%
  }
}
.gnav .gnav-logo-steam {
  margin-right: auto;
  margin-bottom: 4vw;
  margin-left: auto;
width:calc((352/2)/1920*100vw)
}

@media only screen and (max-width: 768px) {
  .gnav .gnav-logo-steam {
    margin-bottom: 2vw;
  width:calc((300/2)/750*100vw)
  }
}
.gnav .gnav-menu {
  background: url(../images/common/gnav_bg.jpg) left top repeat;
  background-size: 26px;
  height: 100%;
  left: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  -webkit-transition: left .4s ease;
  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.0vw
}

@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list {
    font-size: 1.4583vw
  }
}
.gnav .gnav-menu-list a {
  color: #FFF;
  padding-right: 2vw;
  -webkit-transition: color .2s ease-in;
  transition: color .2s ease-in
}
@media only screen and (max-width: 768px) {
  .gnav .gnav-menu-list-info a {
    padding-right: 0;
    display: inline;
  }
}

.gnav .gnav-menu-list-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

@media only screen and (max-width: 768px) {
  .gnav .gnav-menu-list-info .gnav-menu-list-item {
    width: 100%;
  }
  .gnav .gnav-menu-list-info .gnav-menu-list-item + .gnav-menu-list-item {
    margin-top: 3vw;
  }
}

.gnav .gnav-menu-list-site {
  background: rgba(0,0,0,0.3);
  font-family: "Source Serif 4", serif;
  font-size: 4vw;
  font-weight: 900;
  margin: 6vw 0vw;
  padding: 10vw 5vw 10vw 12vw
}
.lang-cn .gnav .gnav-menu-list-site {
  font-family: "source-han-serif-sc", serif;
}
.lang-hk .gnav .gnav-menu-list-site {
  font-family: "source-han-serif-tc", serif;
}
.lang-kr .gnav .gnav-menu-list-site {
  font-family: "source-han-serif-korean", serif;
}

@media only screen and (max-width: 768px) {
  .gnav .gnav-menu-list-site .gnav-menu-list-item:not(:last-child) {
    margin-bottom: 1.6em
  }
}
.gnav .gnav-menu-list-site .gnav-menu-list-item {
  text-align: left;
  width: 100%
}

@media only screen and (min-width: 769px) {
  .gnav .gnav-menu-list-site {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  font-size:calc(36 /1920*100vw);
    margin: 3vw 0;
    padding: 6vw 0vw 6vw 8vw
  }
  .gnav .gnav-menu-list-site::before, .gnav .gnav-menu-list-site::after {
    height: 1vw;
    margin: 2vw 0
  }
  .gnav .gnav-menu-list-site .gnav-menu-list-item {
    width: 50%;
    margin: 1.5vw 0vw
  }
}
.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;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: background .2s ease-in;
  transition: background .2s ease-in;
  width: 2em
}
.gnav .gnav-ic-arrow::before {
  height: .9em;
  -webkit-transition: background .2s ease-in;
  transition: background .2s ease-in;
  width: .9em
}
.gnav .gnav-ic-item::before {
  background: url("../images/common/gnav-ic.png") center no-repeat;
  background-size: contain
}
.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
}
.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: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: 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%;
  -webkit-transform: translateY(-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%;
  -webkit-transform: translateY(-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: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: 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: 90%;
  margin: 6vw auto 0
}

@media only screen and (min-width: 769px) {
  .gnav .manual {
    width: 25%;
    margin: 5vw auto 0
  }
}
.gnav .manual a {
  position: relative;
  display: block;
  text-align: center;
font-size:calc(28/750*100vw);
  color: #fff;
  border: 1px solid #fff;
  padding: 2vw 0vw
}

@media only screen and (min-width: 769px) {
  .gnav .manual a {
    font-size:calc(24/1920*100vw);
    -webkit-transition: border .3s ease, color .3s ease;
    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;
  -webkit-transition: background .5s ease;
  transition: background .5s ease;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-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: -webkit-linear-gradient(315deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  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: -webkit-linear-gradient(315deg, #e60012 0%, #eb7833 50%, #e60012 100%);
  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;
  -webkit-transition: z-index .5s ease-in-out;
  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%;
  -webkit-transform: translate(-50%, -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%;
  -webkit-transform: translateY(-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;
  -webkit-transition: .5s;
  transition: .5s
}
.buy.buy-pos-fixed.is-show {
  left: 0;
  top: 0;
  -webkit-transition: top .5s ease-in, visibility .5s ease-in;
  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;
  -webkit-transition: .5s;
  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%;
  -webkit-transform: translateY(-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
  }
}
.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 {
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out
}
.is-overlay .title-header .site-logo {
  opacity: 0
}
.is-overlay .buy.buy-header {
  top: 0;
  visibility: visible
}
#title_footer {
  border-top: 1px solid #777;
  position: relative;
  z-index: 1
}
#wrapper {
  width: 100%;
  line-height: 1.5;
  position: relative;
  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: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: 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
  }
}
.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: -1.75em;
  top: -1.1vw;
  width: 4.2vw;
  height: 4.6vw
}

@media only screen 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: -1.5em;
    top: -0.5vw
  }
}

@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 {
  -webkit-animation: ic-blink 1s ease-in-out infinite alternate;
  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: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap
}
.to-top {
  bottom: 2vw;
  cursor: pointer;
  position: fixed;
  right: 2vw;
  -webkit-transition: bottom 1s linear;
  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%
}
.to-top {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease-in, visibility .2s ease-in, z-index .2s ease-in;
  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: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  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
}
.news .slide-text .cat.cat-campaign {
  color: #d87319;
  border-left: 4px solid #d87319
}
.news .slide-text .cat.cat-other {
  color: #505050;
  border-left: 4px solid #505050
}
.cf::before, .cf::after {
  content: "";
  display: table
}
.cf::after {
  clear: both
}
.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
}
.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
  }
}
.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
  }
}
.ua-ie .lang-select .SumoSelect.open .optWrapper .options {
  max-height: 100% !important
}
.ua-ie .sec#timeline {
  display: none
}

@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
}
@-webkit-keyframes loading {
  0% {
  opacity:0
  }
  100% {
  opacity:1
  }
}
@keyframes loading {
  0% {
  opacity:0
  }
  100% {
  opacity:1
  }
}
@-webkit-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 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
  }
}
@-webkit-keyframes mvBefore {
  0% {
  -webkit-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1)
  }
  50% {
  -webkit-transform:scale3d(1.1, 1.1, 1.1);
  transform:scale3d(1.1, 1.1, 1.1)
  }
  100% {
  -webkit-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1)
  }
}
@keyframes mvBefore {
  0% {
  -webkit-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1)
  }
  50% {
  -webkit-transform:scale3d(1.1, 1.1, 1.1);
  transform:scale3d(1.1, 1.1, 1.1)
  }
  100% {
  -webkit-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1)
  }
}
@-webkit-keyframes mvAfter {
  0% {
  opacity:.2
  }
  50% {
  opacity:.8
  }
  100% {
  opacity:0
  }
}
@keyframes mvAfter {
  0% {
  opacity:.2
  }
  50% {
  opacity:.8
  }
  100% {
  opacity:0
  }
}
@-webkit-keyframes btnAnime {
  0% {
  background-position:0%
  }
  100% {
  background-position:200%
  }
}
@keyframes btnAnime {
  0% {
  background-position:0%
  }
  100% {
  background-position:200%
  }
}
@-webkit-keyframes monsterName {
  0% {
  -webkit-transform:translate(0px, 0px) rotateZ(0deg);
  transform:translate(0px, 0px) rotateZ(0deg)
  }
  25% {
  -webkit-transform:translate(2px, 2px) rotateZ(1deg);
  transform:translate(2px, 2px) rotateZ(1deg)
  }
  50% {
  -webkit-transform:translate(0px, 2px) rotateZ(0deg);
  transform:translate(0px, 2px) rotateZ(0deg)
  }
  75% {
  -webkit-transform:translate(2px, 0px) rotateZ(-1deg);
  transform:translate(2px, 0px) rotateZ(-1deg)
  }
  100% {
  -webkit-transform:translate(0px, 0px) rotateZ(0deg);
  transform:translate(0px, 0px) rotateZ(0deg)
  }
}
@keyframes monsterName {
  0% {
  -webkit-transform:translate(0px, 0px) rotateZ(0deg);
  transform:translate(0px, 0px) rotateZ(0deg)
  }
  25% {
  -webkit-transform:translate(2px, 2px) rotateZ(1deg);
  transform:translate(2px, 2px) rotateZ(1deg)
  }
  50% {
  -webkit-transform:translate(0px, 2px) rotateZ(0deg);
  transform:translate(0px, 2px) rotateZ(0deg)
  }
  75% {
  -webkit-transform:translate(2px, 0px) rotateZ(-1deg);
  transform:translate(2px, 0px) rotateZ(-1deg)
  }
  100% {
  -webkit-transform:translate(0px, 0px) rotateZ(0deg);
  transform:translate(0px, 0px) rotateZ(0deg)
  }
}
@-webkit-keyframes zoomUp {
  0% {
  opacity:0;
  -webkit-transform:scale3d(1, 1, 1) rotate(-15deg);
  transform:scale3d(1, 1, 1) rotate(-15deg)
  }
  50% {
  opacity:1;
  -webkit-transform:scale3d(1.2, 1.2, 2.2) rotate(-15deg);
  transform:scale3d(1.2, 1.2, 2.2) rotate(-15deg)
  }
  100% {
  opacity:1;
  -webkit-transform:scale3d(1, 1, 1) rotate(-15deg);
  transform:scale3d(1, 1, 1) rotate(-15deg)
  }
}
@keyframes zoomUp {
  0% {
  opacity:0;
  -webkit-transform:scale3d(1, 1, 1) rotate(-15deg);
  transform:scale3d(1, 1, 1) rotate(-15deg)
  }
  50% {
  opacity:1;
  -webkit-transform:scale3d(1.2, 1.2, 2.2) rotate(-15deg);
  transform:scale3d(1.2, 1.2, 2.2) rotate(-15deg)
  }
  100% {
  opacity:1;
  -webkit-transform:scale3d(1, 1, 1) rotate(-15deg);
  transform:scale3d(1, 1, 1) rotate(-15deg)
  }
}
@-webkit-keyframes blink {
  0% {
  opacity:1;
  -webkit-transform:translate(0, 0);
  transform:translate(0, 0)
  }
  50% {
  opacity:.8;
  -webkit-transform:translate(0, -5px);
  transform:translate(0, -5px)
  }
  100% {
  opacity:1;
  -webkit-transform:translate(0, 0);
  transform:translate(0, 0)
  }
}
@keyframes blink {
  0% {
  opacity:1;
  -webkit-transform:translate(0, 0);
  transform:translate(0, 0)
  }
  50% {
  opacity:.8;
  -webkit-transform:translate(0, -5px);
  transform:translate(0, -5px)
  }
  100% {
  opacity:1;
  -webkit-transform:translate(0, 0);
  transform:translate(0, 0)
  }
}
@-webkit-keyframes ic-blink {
  0% {
  opacity:1
  }
  50% {
  opacity:.4
  }
  100% {
  opacity:1
  }
}
@keyframes ic-blink {
  0% {
  opacity:1
  }
  50% {
  opacity:.4
  }
  100% {
  opacity:1
  }
}
@-webkit-keyframes rotate {
  0% {
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg)
  }
  100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
  }
}
@keyframes rotate {
  0% {
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg)
  }
  100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
  }
}

@media only screen and (min-width: 769px) {
  .lang-cn .gnav .gnav-menu-list-site .gnav-menu-list-item, .lang-hk .gnav .gnav-menu-list-site .gnav-menu-list-item, .lang-kr .gnav .gnav-menu-list-site .gnav-menu-list-item {
    width: 33%;
    margin: 1.5vw 0vw
  }
}

/*license*/
.license-note {
  margin: 1em 0 2em;
  color: #fff;
  text-align: center;
  font-size: 3vw;
}

@media only screen and (min-width: 769px) {
  .license-note {
      margin: 0 0 2em;
      font-size: 1vw;
  }
}

/*動画枠*/
.video-area .video-box .player a {
  display: block;
}

.video-area .video-box .player a img {
  vertical-align: bottom;
}

.video-area .video-box .player a:hover {
  filter: brightness(110%);
}

.video-area .video-box .player a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9vw;
  height: 6vw;
  transform: translate(-50%, -50%);
  background: url("../images/video/yt_icon_r.svg") no-repeat;
  background-size: contain;
}

@media only screen and (min-width: 769px) {
  .video-area .video-box .player a::after {
    width: min(5.2vw, 100px);
    height: min(4vw, 80px);
  }
}