@charset "UTF-8";

/* --------------------------------

	index

-------------------------------- */
main {}

@media only screen and (min-width: 1024px) {
  main {
    background-image: url(../../assets/images/common/bg_game.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
}

#contents h2 {
  color: #452505;
  font-family: 'Cormorant Garamond', serif;
  font-weight: bold;
  font-size: 5vw;
  margin-bottom: 6vw;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff);
  text-align: left;
}

.cn #contents h2 {
  font-family: "source-han-serif-sc", serif !important;
}

.hk #contents h2 {
  font-family: "source-han-serif-tc", serif !important;
}

.kr #contents h2 {
  font-family: "source-han-serif-korean", serif !important;
}

@media screen and (min-width: 1024px) {
  #contents h2 {
    font-size: 3.125vw;
    margin-bottom: 3vw;
    text-align: center;
  }

  .cn #contents h2,
  .hk #contents h2,
  .kr #contents h2 {
    font-size: 2.5vw
  }
}

@media screen and (min-width: 1366px) {
  #contents h2 {
    font-size: 40px;
    margin-bottom: 3vw;
  }

  .cn #contents h2,
  .hk #contents h2 {
    font-size: 40px;
  }

  .kr #contents h2 {
    font-size: 35px;
  }
}

#contents h2 span {}

#contents h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 4vw;
  padding-top: 2vw;
  background: url(../images/common/deco_h3_element.png) no-repeat;
  background-size: contain;
  background-position: center;
  margin: 3vw auto 4vw;
}

@media screen and (min-width: 1024px) {
  #contents h2::after {
    padding-top: 1vw;
    height: 2vw;
    margin: 1vw auto 2vw;
  }
}

#contents .article {
  display: block;
  width: 87.467%;
  margin: 0 auto 10vw;
  position: relative;
  padding-top: 21vw;
}

@media only screen and (min-width: 1024px) {
  #contents .article {
    width: 85.9375vw;
    margin: 0 auto 6.641vw;
    max-width: 1366px;
    padding-top: 8vw;
  }
}

#contents .article .mv {
  width: 100%;
  line-height: 0;
}

#contents .article .article_inner {
  background: url(../images/common/bg_article.png) no-repeat;
  background-size: cover;
  padding: 8% 8% 15%;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner {
    padding: 5%;
    max-width: 1366px;
  }
}

#contents .article .article_inner::before {
  content: "";
  width: 100%;
  height: 8vw;
  display: block;
  position: absolute;
  right: 2%;
  top: 0.5vw;
  background: url(../../assets/images/common/deco1_up.png) no-repeat;
  background-position: right top;
  background-size: contain;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner::before {
    height: 4vw;
  }
}

#contents .article .article_inner::after {
  content: "";
  width: 100%;
  height: 8vw;
  display: block;
  position: absolute;
  left: 2%;
  bottom: 0.5vw;
  background: url(../../assets/images/common/deco1_down.png) no-repeat;
  background-position: left top;
  background-size: contain;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner::after {
    height: 4vw;
  }
}

#contents .article .article_inner h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #452505;
  font-size: 4.8vw;
  margin-bottom: 1em;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.cn #contents .article .article_inner h3 {
  font-family: "source-han-serif-sc", serif !important;
}

.hk #contents .article .article_inner h3 {
  font-family: "source-han-serif-tc", serif !important;
}

.kr #contents .article .article_inner h3 {
  font-family: "source-han-serif-korean", serif !important;
}

@media screen and (min-width: 1024px) {
  #contents .article .article_inner h3 {
    text-align: center;
    font-size: 1.8vw;
  }
}

@media screen and (min-width: 1300px) {
  #contents .article .article_inner h3 {
    font-size: 28px;
  }
}

#contents .article .article_inner .lead {
  font-family: 'Cormorant Garamond', serif;
  color: #452505;
  text-align: left;
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 10vw;
  line-height: 1.8;
}

.cn #contents .article .article_inner .lead {
  font-family: "source-han-serif-sc", serif !important;
}

.hk #contents .article .article_inner .lead {
  font-family: "source-han-serif-tc", serif !important;
}

.kr #contents .article .article_inner .lead {
  font-family: "source-han-serif-korean", serif !important;
}

@media screen and (min-width: 1024px) {
  #contents .article .article_inner .lead {
    font-size: 1.8vw;
    margin-bottom: 3vw;
  }
}

@media screen and (min-width: 1366px) {
  #contents .article .article_inner .lead {
    font-size: 26px;
    margin-bottom: 3vw;
  }
}

#contents .article .article_inner .lead p {
  margin-bottom: 1em;
}

#contents .article .article_inner .text {
  font-size: 3vw;
  line-height: 1.8;
  margin-bottom: 10vw;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .text {
    font-size: 1vw;
    margin-bottom: 3vw;
  }
}

@media only screen and (min-width: 1366px) {
  #contents .article .article_inner .text {
    font-size: 16px;
  }
}

#contents .article .article_inner .text h4 {
  font-size: 110%;
  font-weight: bold;
}

#contents .article .article_inner .pic {
  width: 100%;
  margin-bottom: 6vw;
}

#contents .article .article_inner .text .note li {
  font-size: 90%;
  text-indent: -0.6em;
  margin-left: 0.6em;
}

.hk #contents .article .article_inner .text .note li,
.cn #contents .article .article_inner .text .note li,
.kr #contents .article .article_inner .text .note li {
  font-size: 90%;
  text-indent: -1em;
  margin-left: 1em;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .pic {
    width: 70%;
    margin: 0 auto 2vw;
  }
}

#contents .article .article_inner .pic figure {
  width: 100%;
  /* z-index: 10; */
}

#contents .article .article_inner .colBox {
  flex-direction: column;
  margin-bottom: 10vw;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .colBox {
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 2vw;
  }

  #contents .article .article_inner .colBox .pic {
    width: 48%;
    margin: 0 0 2vw;
  }
}

#contents .article .article_inner .period {
  width: 100%;
  margin-bottom: 6vw;
  font-size: 2vw;
  border: 1px solid #452505;
  background: #f8f7f2;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
}

#contents .article .article_inner .period.mauto {
  margin: 0 auto 2vw;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .period {
    width: 48%;
    margin-bottom: 1vw;
    font-size: 1vw;
  }
}

@media only screen and (min-width: 1366px) {
  #contents .article .article_inner .period {
    font-size: 0.9vw;
  }
}

#contents .article .article_inner .period dt {
  color: #452505;
  padding: 1em 2em 0;
}

#contents .article .article_inner .period dd {
  font-size: 1.4em;
  font-weight: bold;
  color: #452505;
}

#contents .article .article_inner .period dd span {
  font-size: 1.8em;
}

#contents .article .article_inner .period .btn_store{
  margin: 1vw auto;
}

#contents .article .article_inner .btn_wrap {
  width: 80%;
  margin-bottom: 6vw;
  position: relative;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .btn_wrap {
    width: 30%;
    margin-bottom: 2vw;
  }

  #contents .article .article_inner .btn_wrap.w50 {
    width: 50%;
  }
}

#contents .article .article_inner .btn_hex {
  font-family: 'Cormorant Garamond', serif !important;
  width: 100%;
  margin: 0;
  background: url(../../assets/images/common/deco_btn_pattern2.png), url(../../assets/images/common/bg_game_btn.png);
  background-size: contain, cover;
  background-repeat: no-repeat;
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  cursor: pointer;
}

#contents .article .article_inner .btn_hex.cn {
  font-family: "source-han-serif-sc", serif !important;
}
#contents .article .article_inner .btn_hex.hk {
  font-family: "source-han-serif-tc", serif !important;
}
#contents .article .article_inner .btn_hex.kr {
  font-family: "source-han-serif-korean", serif !important;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .btn_hex {
    height: 4vw;
    clip-path: polygon(9% 0%, 91% 0%, 100% 50%, 91% 100%, 9% 100%, 0% 50%);
  }

  #contents .article .article_inner .btn_wrap.w50 .btn_hex {
    clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
  }
}

#contents .article .article_inner .btn_hex.selected {
  background: url(../../assets/images/common/deco_btn_pattern2.png), url(../../assets/images/common/bg_hover_btn.png);
  background-size: contain, cover;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .btn_hex:hover {
    background: url(../../assets/images/common/deco_btn_pattern2.png), url(../../assets/images/common/bg_hover_btn.png);
    background-size: contain, cover;
    -webkit-filter: none;
    filter: none;
    background-repeat: no-repeat;
  }

  #contents .article .article_inner .btn_hex:hover span {
    color: #fff;
  }
}

#contents .article .article_inner .btn_hex span {
  color: #e3ca68;
  font-size: 2.8vw;
  line-height: 1.2;
  text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000;
}

#contents .article .article_inner .btn_hex.selected span {
  color: #fff;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .btn_hex span {
    font-size: 1.4vw;
  }
  #contents .article .article_inner .btn_wrap.w50 .btn_hex span {
    font-size: 1.6vw;
  }
}

@media only screen and (min-width: 1600px) {
  #contents .article .article_inner .btn_hex span {
    font-size: 22px;
  }
  #contents .article .article_inner .btn_wrap.w50 .btn_hex span {
    font-size: 24px;
  }
}
#contents .article .article_inner .btn_hex span:after {
  background: url(../../assets/images/common/icon_btn_arrow_sdw.png) no-repeat;
  background-position: center;
  background-size: cover;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .btn_wrap.w50 .btn_hex span:after {
    width: 1vw;
    height: 1vw;
    right: 4%;
  }
}

.fb{
  font-weight: bold;
}

#contents .article .article_inner .period dt{
  padding: 1em 0 0;
}
#contents .article .article_inner .period .note{
  font-size: 3vw;
  margin-top: 1em;
  text-indent: -1em;
  margin-left: 1em;
  text-align: left;
}

@media only screen and (min-width: 1024px) {
  #contents .article .article_inner .period .note{
    font-size: 0.9vw;
  }
}
@media only screen and (min-width: 1366px) {
  #contents .article .article_inner .period .note{
    font-size: 13px;
  }
}