@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ===================================================================
CSS information
 file name  :top.css
 style info :トップのスタイル
=================================================================== */
#visual {
  position: relative;
  background: #051812 url(../img/top/bg_visual_pat.jpg) no-repeat center top/auto 100%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #visual {
    height: min(50.6rem, 56vw);
  }
}
@media screen and (max-width: 767px) {
  #visual {
    background: url(../img/top/bg_main_sp_260917.webp) no-repeat center top/100% auto;
    aspect-ratio: 750/1060;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner {
    background: url(../img/top/bg_main_pc_260917.webp) no-repeat center top;
    margin-inline: auto;
    background-size: 100%;
    -webkit-box-shadow: 0 0 2rem rgb(9, 178, 150);
            box-shadow: 0 0 2rem rgb(9, 178, 150);
    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 {
    padding: 4vw 0;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .main {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .main .txt01 {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 35%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .txt01 {
    position: absolute;
    width: 53%;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .main .txt02 {
    width: min(74%, 451px);
    margin: max(-8.5vw, -165px) auto min(7vw, 90px);
    position: absolute;
    top: 17vw;
    left: 9vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #visual .inner .main .txt02 {
    margin: max(-13vw, -170px) auto min(7vw, 90px);
    width: 36vw;
    top: 21.5vw;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .txt02 {
    width: 74%;
    margin: -24vw auto 24vw;
  }
}
#visual .inner .main .logoPlatform {
  position: absolute;
}
@media screen and (min-width: 768px) {
  #visual .inner .main .logoPlatform {
    right: 1%;
    width: 26%;
    top: 1%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .logoPlatform {
    width: 40%;
    right: 1%;
    top: 1%;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .main .logo {
    width: 29%;
    position: absolute;
    bottom: 11%;
    left: 10%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #visual .inner .main .logo {
    width: 29%;
    bottom: 17%;
    left: 10%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .logo {
    position: absolute;
    width: 53%;
    top: 24%;
    left: 2%;
  }
}
#visual .inner .main .dateImage {
  position: absolute;
}
@media screen and (min-width: 768px) {
  #visual .inner .main .dateImage {
    width: 26%;
    left: 12%;
    bottom: 1.5%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #visual .inner .main .dateImage {
    bottom: 3.5%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .dateImage {
    width: 35%;
    left: 11%;
    top: 58%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #visual .inner .main .dateImage {
    left: 12%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .main .movieArea {
    padding-top: 6vw;
  }
}
#visual .inner .main .movieArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  #visual .inner .main .movieArea ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4vw;
  }
}
#visual .inner .main .movieArea ul li figure {
  border-radius: 10px;
  background: -webkit-gradient(linear, left top, right top, from(#fff600), to(#3ab48b));
  background: linear-gradient(90deg, #fff600, #3ab48b);
  padding: 4px;
}
#visual .inner .main .movieArea ul li figure img {
  width: 100%;
  border-radius: 10px;
}
#visual .inner .main .movieArea ul li p {
  color: #fff600;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  margin-top: 0.3rem;
}
@media screen and (max-width: 767px) {
  #visual .inner .main .movieArea ul li p {
    font-size: 3.3vw;
  }
}
#visual .inner .bnrArea {
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  #visual .inner .bnrArea {
    position: absolute;
    left: 49%;
    bottom: 2.67%;
    width: 50%;
    gap: 1.75%;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .bnrArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    width: 64%;
    margin: 6vw auto 0;
    gap: 4vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 65%;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .bnrArea .bnr {
    width: 50%;
  }
}
#visual .inner .bnrArea .bnr a img {
  border-radius: min(1rem, 0.8vw);
}
@media screen and (max-width: 767px) {
  #visual .inner .bnrArea .bnr a img {
    border-radius: 8px;
  }
}
@media screen and (min-width: 768px) {
  #visual .inner .bnrArea .new:before {
    width: min(3.3rem, 3vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #visual .inner .bnrArea .new:before {
    top: -1rem;
    width: 3.8vw;
  }
}
@media screen and (min-width: 1921px) {
  #visual .inner .bnrArea .new:before {
    top: -2.1rem;
  }
}
@media screen and (max-width: 767px) {
  #visual .inner .bnrArea .new:before {
    top: -1.1rem;
    right: -0.5rem;
    width: 2.3rem;
  }
}

#about {
  position: relative;
}
#about:after {
  opacity: 0.2;
  content: "";
  display: block;
  background: url(../img/top/bg_dot.png) repeat 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #about:after {
    background-size: 6px;
  }
}
@media screen and (min-width: 1921px) {
  #about:after {
    background-size: 16px 16px;
  }
}
@media screen and (max-width: 767px) {
  #about:after {
    background-size: 4px;
  }
}
#about .bg {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  display: block;
  content: "";
  width: 100%;
  height: 100vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  #about .bg {
    background-image: url(../img/top/bg_content_pc.jpg);
  }
}
@media screen and (max-width: 767px) {
  #about .bg {
    background-image: url(../img/top/bg_content_sp.jpg);
  }
}
#about .inner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: -100vh;
}
@media screen and (min-width: 768px) {
  #about .inner {
    padding: 0 0 min(6vw, 80px);
  }
}
@media screen and (max-width: 767px) {
  #about .inner {
    padding: 0 0 12vw;
  }
}
#about .inner .movieArea {
  background-image: url(../img/top/bg_movie_area.webp);
  background-repeat: repeat;
  margin-bottom: 10rem;
  background-size: 300px 200px;
}
@media screen and (max-width: 767px) {
  #about .inner .movieArea {
    padding: 10vw 0 8vw;
    margin-bottom: 4rem;
  }
}
#about .inner .movieArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: min(4rem, 1.3vw);
  margin: 0 auto;
  width: min(165rem, 72vw);
}
@media screen and (min-width: 768px) {
  #about .inner .movieArea ul {
    padding: 3vw 0 3vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .movieArea ul {
    width: 90vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .movieArea ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4vw;
  }
}
#about .inner .movieArea ul li figure {
  border-radius: min(1.3rem, 0.5vw);
  background: -webkit-gradient(linear, left bottom, left top, from(#fdea96), to(#e252e0));
  background: linear-gradient(0deg, #fdea96, #e252e0);
  padding: min(0.5rem, 0.2vw);
}
@media screen and (max-width: 767px) {
  #about .inner .movieArea ul li figure {
    padding: 1vw;
    border-radius: 1.3vw;
  }
}
#about .inner .movieArea ul li figure img {
  width: 100%;
  border-radius: min(1.3rem, 0.5vw);
}
#about .inner .movieArea ul li p {
  color: #fff600;
  font-size: min(2rem, 1.1vw);
  font-weight: 500;
  text-align: left;
  margin-top: 0.3rem;
}
@media screen and (max-width: 767px) {
  #about .inner .movieArea ul li p {
    font-size: 3.3vw;
  }
}
:lang(en) #about .inner .movieArea ul li p {
  text-indent: 0.7em;
}
@media screen and (min-width: 768px) {
  #about .inner .movieArea ul .new:before {
    width: min(6.8rem, 3.3vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .movieArea ul .new:before {
    top: -1rem;
    right: -0.5rem;
    width: 4vw;
  }
}
@media screen and (min-width: 1921px) {
  #about .inner .movieArea ul .new:before {
    top: -2.2rem;
  }
}
#about .inner .mainArea {
  margin-bottom: min(20rem, 15vw);
}
#about .inner .mainArea h1 {
  position: relative;
  font-weight: 900;
  -webkit-filter: drop-shadow(0 0 0.2em rgb(0, 0, 0));
          filter: drop-shadow(0 0 0.2em rgb(0, 0, 0));
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea h1 {
    font-size: min(4.2rem, 1.8vw);
    line-height: 1.4;
    margin-bottom: min(4vw, 50px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea h1 {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea h1 {
    font-size: 5.8vw;
    line-height: 1.75;
    margin-bottom: 6vw;
  }
}
#about .inner .mainArea h1 span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), to(#d3f2be));
  background: linear-gradient(180deg, #fff 50%, #d3f2be 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#about .inner .mainArea h1 em {
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea h1 em {
    font-size: min(8rem, 3.1vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  #about .inner .mainArea h1 em {
    font-size: 3.5vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea h1 em {
    font-size: 4.5vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea .main {
    width: min(87rem, 40vw);
    margin: 0 auto min(3vw, 40px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea .main {
    width: 50vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea .main {
    margin-bottom: 6vw;
  }
}
#about .inner .mainArea .txt {
  position: relative;
  color: #d3f2be;
  font-weight: 700;
  -webkit-filter: drop-shadow(0 0 0.2em rgb(0, 0, 0));
          filter: drop-shadow(0 0 0.2em rgb(0, 0, 0));
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea .txt {
    font-size: min(1.5rem, 1.95vw);
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea .txt {
    font-size: 4vw;
    margin-bottom: 104vw;
  }
}
#about .inner .mainArea .chara,
#about .inner .mainArea .photo {
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea .chara01 {
    width: min(40rem, 20vw);
    left: calc(50% - min(69rem, 36vw));
    top: min(80rem, 40vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea .chara01 {
    top: 55vw;
    left: 9vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea .chara01 {
    width: 56vw;
    left: 2vw;
    top: 360vw;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .mainArea .chara01 {
    top: 308vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea .chara02 {
    width: min(27rem, 14vw);
    right: calc(50% - min(65rem, 31vw));
    top: min(79rem, 44vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea .chara02 {
    top: 56vw;
    left: 72vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea .chara02 {
    width: 36vw;
    right: 4vw;
    top: 375vw;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .mainArea .chara02 {
    top: 325vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .mainArea .photo {
    width: min(32rem, 16vw);
    right: calc(50% - min(68rem, 35vw));
    top: min(112rem, 62vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .mainArea .photo {
    top: 74vw;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .mainArea .photo {
    width: 40vw;
    right: 4vw;
    top: 421vw;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .mainArea .photo {
    top: 372vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .info {
    margin-bottom: min(12rem, 11vw);
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info {
    margin-bottom: 6rem;
  }
}
#about .inner .info .infoTxt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoTxt {
    margin-bottom: 6vw;
  }
}
#about .inner .info .infoTxt .infoTitle {
  width: min(35rem, 36vw);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoTxt .infoTitle {
    gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoTxt .infoTitle {
    width: 68vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoTxt .new:before {
    top: -1.5rem;
    right: 2rem;
    width: 4rem;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoTxt .new:before {
    right: 0.2rem;
  }
}
#about .inner .info .infoTxt p {
  color: #fff;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoTxt p {
    margin-bottom: 4rem;
    font-size: min(1.25rem, 1.7vw);
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoTxt p {
    font-size: 3vw;
  }
}
#about .inner .info .infoImage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: min(17rem, 16vw);
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 80%;
    margin: 0 auto 11rem;
    gap: 1vw;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .image01 {
    width: 35%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .image01 {
    width: 70%;
    -ms-flex-item-align: center;
        align-self: center;
  }
}
#about .inner .info .infoImage .image02 {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdea96), to(#e252e0));
  background: linear-gradient(0deg, #fdea96, #e252e0);
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .image02 {
    margin-top: min(1.3rem, 1.2vw);
    padding: min(0.3rem, 0.2vw);
    border-radius: 0.8rem;
    width: 37%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .image02 {
    width: 90%;
    -ms-flex-item-align: center;
        align-self: center;
    padding: 0.7vw;
    border-radius: 3vw;
  }
}
#about .inner .info .infoImage .image02 img {
  width: 100%;
  border-radius: 0.9rem;
}
#about .inner .info .infoImage .mononokeImage .mononoke01 {
  position: absolute;
  width: 9%;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .mononokeImage .mononoke01 {
    left: 17%;
    bottom: 61%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  #about .inner .info .infoImage .mononokeImage .mononoke01 {
    bottom: 59%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .info .infoImage .mononokeImage .mononoke01 {
    bottom: 57.5%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .mononokeImage .mononoke01 {
    top: 46%;
    right: 9%;
    width: 17%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke01 {
    bottom: 59.8%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke01 {
    bottom: 58%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke01 {
    bottom: 57.4%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke01 {
    top: 43%;
  }
}
#about .inner .info .infoImage .mononokeImage .mononoke01 {
  z-index: -1;
}
#about .inner .info .infoImage .mononokeImage .mononoke02 {
  position: absolute;
  width: 21%;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .mononokeImage .mononoke02 {
    left: 69%;
    bottom: 60%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  #about .inner .info .infoImage .mononokeImage .mononoke02 {
    bottom: 58.5%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .info .infoImage .mononokeImage .mononoke02 {
    bottom: 57%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .mononokeImage .mononoke02 {
    width: 29%;
    top: 48.7%;
    right: 3%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke02 {
    left: 71%;
    bottom: 59%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke02 {
    bottom: 57.5%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke02 {
    bottom: 56.5%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke02 {
    top: 46.2%;
  }
}
#about .inner .info .infoImage .mononokeImage .mononoke03 {
  position: absolute;
  width: 21%;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .mononokeImage .mononoke03 {
    left: 16%;
    top: 46%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 47.5%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 48%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 54%;
    left: 17%;
    width: 32%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 47%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 48%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 49%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke03 {
    top: 52%;
  }
}
#about .inner .info .infoImage .mononokeImage .mononoke04 {
  position: absolute;
  width: 11%;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoImage .mononokeImage .mononoke04 {
    left: 70%;
    top: 48%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 49%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 51%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 48.5%;
    left: 4%;
    width: 20%;
  }
}
@media screen and (min-width: 768px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 48.7%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1460px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 49.7%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 50.5%;
  }
}
@media screen and (max-width: 767px) {
  :lang(en) #about .inner .info .infoImage .mononokeImage .mononoke04 {
    top: 46%;
  }
}
#about .inner .info .infoArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea {
    gap: min(7rem, 6vw);
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#about .inner .info .infoArea .infoTxt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea .infoTxt {
    -ms-flex-item-align: center;
        align-self: center;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoArea .infoTxt {
    margin: 0 auto 6vw;
  }
}
#about .inner .info .infoArea .infoTxt .infoTitle {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea .infoTxt .infoTitle {
    width: min(35rem, 36vw);
    gap: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea .infoTxt .new:before {
    top: -1.5rem;
    right: 2rem;
    width: 4rem;
  }
}
#about .inner .info .infoArea .infoTxt p {
  color: #fff;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea .infoTxt p {
    font-size: min(1.25rem, 1.7vw);
    margin-bottom: 0;
  }
}
#about .inner .info .infoArea .txtImage {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdea96), to(#e252e0));
  background: linear-gradient(0deg, #fdea96, #e252e0);
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (min-width: 768px) {
  #about .inner .info .infoArea .txtImage {
    padding: min(0.3rem, 0.2vw);
    border-radius: 0.8rem;
    width: 40%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoArea .txtImage {
    width: 75%;
    margin: 0 auto 6vw;
    padding: 0.7vw;
    border-radius: 3vw;
  }
}
#about .inner .info .infoArea .txtImage img {
  width: 100%;
  border-radius: 0.9rem;
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoArea .spOrder1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .infoArea .spOrder2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
#about .inner .info .buildImage {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #about .inner .info .buildImage {
    width: 52%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .buildImage {
    width: 77%;
  }
}
#about .inner .info .cardImage {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #about .inner .info .cardImage {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  #about .inner .info .cardImage {
    width: 90%;
  }
}
#about .bgSlide {
  position: relative;
  background: url(../img/top/img_slide.jpg) repeat-x 0 0/auto 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #about .bgSlide {
    height: 230px;
    -webkit-animation: visual-bg-pc 30s infinite linear;
            animation: visual-bg-pc 30s infinite linear;
  }
}
@media screen and (max-width: 767px) {
  #about .bgSlide {
    height: 50vw;
    -webkit-animation: visual-bg-sp 30s infinite linear;
            animation: visual-bg-sp 30s infinite linear;
  }
}
@-webkit-keyframes visual-bg-pc {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2044px;
  }
}
@keyframes visual-bg-pc {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2044px;
  }
}
@-webkit-keyframes visual-bg-sp {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -444vw;
  }
}
@keyframes visual-bg-sp {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -444vw;
  }
}
#about .lastTxt {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #about .lastTxt {
    width: min(90rem, 30vw);
  }
}
@media screen and (max-width: 767px) {
  #about .lastTxt {
    width: 90%;
    margin: 26vw auto 16vw;
  }
}