@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ==========================================================
  EXTEND
========================================================== */
/* ===================================================================
CSS information
 file name  :top.css
 style info :トップのスタイル
=================================================================== */
#visual {
  position: relative;
  background: #3399cc url(../img/top/bg_visual-pat.webp) no-repeat center top/auto 100%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #visual {
    height: min(50.6rem, 56.8vw);
  }
}
#visual:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(15%, #6393cb), color-stop(33%, #badca7), color-stop(50%, #ffffff), color-stop(67%, #ed89aa), color-stop(85%, #feeb6a), to(#ffffff));
  background-image: linear-gradient(90deg, #ffffff, #6393cb 15%, #badca7 33%, #ffffff 50%, #ed89aa 67%, #feeb6a 85%, #ffffff);
  border-top: solid 0.1rem #701a00;
  border-bottom: solid 0.25rem #701a00;
}
#visual .inner {
  background: url(../img/top/bg_visual.webp) no-repeat center top;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #visual .inner {
    background-size: 100%;
    -webkit-box-shadow: 0 0 1rem rgb(0, 0, 0);
            box-shadow: 0 0 1rem rgb(0, 0, 0);
    position: absolute;
    left: 50%;
    margin-left: max(-45rem, -50vw);
    width: min(90rem, 100vw);
    aspect-ratio: 1440/810;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner {
    background-size: 260%;
    padding-top: 6vw;
    height: 145vw;
  }
}
#visual .inner .logo {
  position: relative;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #visual .inner .logo {
    width: min(33.6rem, 36vw);
    margin-top: max(-1rem, -1vw);
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .logo {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #visual .inner .logo {
    width: min(28.6rem, 31vw);
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #visual .inner .logo {
    width: 70%;
  }
}
#visual .inner .txt {
  position: relative;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #visual .inner .txt {
    width: min(13.75rem, 14.3vw);
    margin-top: max(-1rem, -1vw);
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .txt {
    width: 40vw;
    margin-top: -2vw;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #visual .inner .txt {
    width: min(26.9rem, 32.1vw);
    margin-top: max(-1.5rem, -1.5vw);
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #visual .inner .txt {
    width: 64vw;
    margin-top: -4vw;
  }
}
#visual .inner .logoPlatform {
  border-radius: 0 0 0 1.875rem;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  #visual .inner .logoPlatform p {
    width: 6.75rem;
    padding: 1rem 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .logoPlatform p {
    width: 18vw;
    padding: 2vw 3.5vw 2.5vw 4.5vw;
  }
}
#visual .inner .bnrBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 1.2rem 0;
}
@media screen and (min-width: 768px) {
  #visual .inner .bnrBox {
    position: absolute;
    bottom: min(2vw, 2rem);
    right: min(2vw, 1rem);
    width: min(26.4vw, 22rem);
  }
}
#visual .inner .bnrBox .bnr a {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #visual .inner .bnrBox .bnr.new:before {
    width: 4.6rem;
  }
}
@media screen and (max-width: 767px) {
  #visual.visual02 {
    height: 182vw;
  }
}
@media screen and (max-width: 767px) {
  #visual.visual02:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/top/bg_visual_02.jpg) no-repeat center top/100% 100%;
    -webkit-animation: animation-mv-move-sp 20s infinite ease-in-out alternate, animation-mv-fadeIn 1s ease;
            animation: animation-mv-move-sp 20s infinite ease-in-out alternate, animation-mv-fadeIn 1s ease;
    width: 320vw;
    aspect-ratio: 1440/810;
  }
}
@media screen and (min-width: 768px) {
  #visual.visual02 .inner {
    background-image: url(../img/top/bg_visual_02.jpg);
  }
}
@media screen and (max-width: 767px) {
  #visual.visual02 .inner {
    background: none;
    padding-top: 12vw;
  }
}
@media screen and (max-width: 767px) {
  #visual.visual02 .inner .logo {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #visual.visual02 .inner .logo {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #visual.visual02 .inner .txt {
    width: 64vw;
  }
}

@-webkit-keyframes animation-mv-move-sp {
  from {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(calc(100vw - 100%), 0px);
            transform: translate(calc(100vw - 100%), 0px);
  }
}

@keyframes animation-mv-move-sp {
  from {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(calc(100vw - 100%), 0px);
            transform: translate(calc(100vw - 100%), 0px);
  }
}
@-webkit-keyframes animation-mv-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animation-mv-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #content .bnrBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 1.2rem 0;
    width: 80%;
    margin: 0 auto 8vw;
  }
}
#content .bnrBox .bnr a {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
#content #movieArea {
  background: url(../img/top/bg_movie.webp) no-repeat center top/auto 100%;
  padding: 3.5rem 0 2.5rem;
}
#content #movieArea .movie {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #content #movieArea .movie {
    width: 34rem;
  }
}
@media screen and (max-width: 767px) {
  #content #movieArea .movie {
    width: 80%;
  }
}
#content #movieArea .movie figure {
  position: relative;
  overflow: hidden;
  border: solid 0.2rem #330000;
  border-radius: 2rem;
}
#content #movieArea .movie figure:after {
  display: block;
  content: "";
  position: absolute;
  background: url(../img/shared/icn_play.png) no-repeat center center/100%;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 24%;
  height: 100%;
}
#content #movieArea .movie p {
  color: #333366;
  font-weight: 900;
  -webkit-text-stroke: 0.1em #fff;
  paint-order: stroke;
}
@media screen and (min-width: 768px) {
  #content #movieArea .movie p {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 767px) {
  #content #movieArea .movie p {
    font-size: 5vw;
  }
}
#content #bnrArea {
  background: url(../img/shared/bg_yokai-pat.png) repeat center top/30rem;
  padding: 3.5rem 0;
}
#content #bnrArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 0.6rem;
}
@media screen and (max-width: 1020px) {
  #content #bnrArea ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 2vw 0;
  }
}
@media screen and (min-width: 768px) {
  #content #bnrArea ul li {
    height: min(90px, 5.62rem);
  }
}
@media screen and (max-width: 1020px) {
  #content #bnrArea ul li {
    width: 60%;
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) {
  #content #bnrArea ul li img {
    width: auto;
    height: 100%;
  }
}