@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.heimaku {
  margin: 3em 1em -2em;
  color: #17b8aa;
  font-weight: bold;
  font-size: 110%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .heimaku {
    margin: 0;
    text-align: right;
    font-size: 120%;
  }
}

.mv {
  position: relative;
  width: 100%;
  padding: 0;
  border-radius: 0 0 8rem 8rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .mv {
    border-radius: 0;
  }
}
.mv_column {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 8rem;
}
@media screen and (min-width: 768px) {
  .mv_column {
    padding-top: 0;
  }
}
.mv_logo {
  position: absolute;
  left: 33.3333333333%;
  top: 33rem;
  display: block;
  width: 33.3333333333%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv_logo {
    left: 50%;
    top: 33.3333333333%;
    width: 25%;
  }
}
.mv_img {
  position: relative;
  width: 100%;
  aspect-ratio: 750/750;
  background-image: url(../images/top/mv_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .mv_img {
    aspect-ratio: 1920/1440;
    background-image: url(../images/top/mv_bg01_pc.png);
  }
}
.mv_holding {
  position: relative;
  display: block;
  width: 86.9333333333%;
  margin: 0 auto;
  padding: 6rem 0 12rem 0;
}
@media screen and (min-width: 768px) {
  .mv_holding {
    display: none;
  }
}

/* ========================================================
    intro
======================================================== */
.intro {
  position: relative;
  width: 100%;
  margin-top: -1px;
  padding: 16rem 0 36rem 0;
  border-radius: 8rem 8rem 0 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .intro {
    margin-top: 0;
    padding: 10.4166666667vw 0;
    border-radius: 0;
  }
}
.intro_ilust01 {
  position: absolute;
  left: 0;
  top: 24.8rem;
  display: block;
  width: 27.7333333333%;
  aspect-ratio: 208/324;
  background-image: url(../images/top/intro_illust01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .intro_ilust01 {
    top: 2.96875%;
    width: 19.21875%;
    aspect-ratio: 369/405;
    background-image: url(../images/top/intro_illust01_pc.png);
  }
}
.intro_ilust02 {
  position: absolute;
  right: 0;
  top: 4.3rem;
  display: block;
  width: 19.0666666667%;
  aspect-ratio: 143/195;
  background-image: url(../images/top/intro_illust02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .intro_ilust02 {
    top: 0;
    width: 12.8125%;
    aspect-ratio: 246/288;
    background-image: url(../images/top/intro_illust02_pc.png);
  }
}
.intro_ilust03 {
  position: absolute;
  right: 0;
  bottom: 31rem;
  display: block;
  width: 36.2666666667%;
  aspect-ratio: 272/540;
  background-image: url(../images/top/intro_illust03_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .intro_ilust03 {
    bottom: -1.0416666667%;
    width: 13.5416666667%;
    aspect-ratio: 260/440;
    background-image: url(../images/top/intro_illust03_pc.png);
  }
}
.intro_column {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.intro_ttl {
  position: relative;
  width: auto;
  margin-left: 14rem;
}
@media screen and (min-width: 768px) {
  .intro_ttl {
    margin-left: 24.21875%;
  }
}
.intro_ttl > span {
  position: relative;
  display: inline-block;
  color: #313131;
  font-size: 7rem;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .intro_ttl > span {
    font-size: 5.7291666667vw;
  }
}
.intro_ttl > span.text01 {
  margin: 0 1rem;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text01 {
    margin: 0 0.78125vw;
  }
}
.intro_ttl > span.text02 {
  margin: 0 1rem;
  transform: translateY(2rem);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text02 {
    margin: 0 0.78125vw;
    transform: translateY(1.5625vw);
  }
}
.intro_ttl > span.text03 {
  margin: 0 1rem;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text03 {
    margin: 0 0.78125vw;
  }
}
.intro_ttl > span.text04 {
  margin: 0 1rem;
  transform: translateY(-2rem);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text04 {
    margin: 0 0.78125vw;
    transform: translateY(-2.0833333333vw);
  }
}
.intro_ttl > span.text05 {
  margin: 5rem 1rem 0 26rem;
  transform: translateY(1.2rem);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text05 {
    margin: 0 0.78125vw 0 5.7291666667vw;
    transform: translateY(0.625vw);
  }
}
.intro_ttl > span.text06 {
  margin: 5rem 1rem 0 1rem;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text06 {
    margin: 0 0.78125vw;
    transform: translateY(-0.8333333333vw);
  }
}
.intro_ttl > span.text07 {
  margin: 5rem 1rem 0 0;
  transform: translateY(-1.2rem);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.text07 {
    margin: 0 0.78125vw 0 0;
    transform: translateY(-1.5625vw);
  }
}
.intro_ttl > span.apostrophe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3.5rem;
  display: block;
  width: 0.27em;
  aspect-ratio: 27/33;
  background-image: url(../images/common/common_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .intro_ttl > span.apostrophe::after {
    top: -2.6041666667vw;
  }
}
.intro_img {
  position: relative;
  width: 100%;
  aspect-ratio: 750/750;
  margin-top: 12rem;
  background-image: url(../images/top/intro_bg01.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: bgLoopAct 100s infinite linear;
}
@media screen and (min-width: 768px) {
  .intro_img {
    aspect-ratio: 1920/680;
    margin-top: 4.1666666667vw;
  }
}
.intro_img::before {
  content: "";
  position: absolute;
  left: 20.9333333333%;
  top: -1px;
  display: block;
  width: 43.3333333333%;
  aspect-ratio: 325/45;
  background-image: url(../images/top/intro_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .intro_img::before {
    left: 28.28125%;
    width: 42.7604166667%;
    aspect-ratio: 821/91;
    background-image: url(../images/top/intro_bg02_pc.png);
  }
}
.intro_img::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  display: block;
  width: 66.9333333333%;
  aspect-ratio: 722/334;
  background-image: url(../images/top/intro_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .intro_img::after {
    width: 37.6041666667%;
  }
}
.intro_text {
  position: relative;
  width: 100%;
  margin-top: -16rem;
}
@media screen and (min-width: 768px) {
  .intro_text {
    margin-top: -6.25vw;
  }
}

/* ========================================================
    news
======================================================== */
.news {
  position: relative;
  width: 100%;
  padding: 0 0 9rem 0;
  background-color: #deebea;
}
@media screen and (min-width: 768px) {
  .news {
    padding: 3.125vw 0;
  }
}
.news::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  display: block;
  width: 100%;
  aspect-ratio: 750/94;
  background-image: url(../images/top/news_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .news::before {
    aspect-ratio: 1920/225;
    background-image: url(../images/top/news_bg01_pc.png);
  }
}
.news::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  display: block;
  width: 100%;
  aspect-ratio: 750/95;
  background-image: url(../images/top/news_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .news::after {
    aspect-ratio: 1920/226;
    background-image: url(../images/top/news_bg02_pc.png);
  }
}
.news_column {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.news_cont {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .news_cont {
    width: 71.3541666667vw;
    margin-left: 9.8958333333vw;
  }
}
.news_ttl {
  position: relative;
  width: 40vw;
  margin: -16.5rem auto 0 auto;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .news_ttl {
    width: 14.0625vw;
    margin: 0;
  }
}
.news_text {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .news_text {
    width: 52.0833333333vw;
    margin-top: -1.0416666667vw;
  }
}
.news_text > dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 18.6666666667vw;
  margin-top: 3rem;
  background-color: #000000;
}
@media screen and (min-width: 768px) {
  .news_text > dt {
    width: 4.5em;
    margin-top: 1.0416666667vw;
  }
}
.news_text > dt > p {
  text-align: center;
}
.news_text > dt > p > span {
  display: block;
  color: #17b8aa;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .news_text > dt > p > span {
    font-size: 1.4rem;
  }
}
.news_text > dt > p > em {
  display: block;
  color: #17b8aa;
  font-style: normal;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .news_text > dt > p > em {
    font-size: 2rem;
  }
}
.news_text > dd {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 80vw;
  margin-top: 3rem;
  padding: 2.4rem 3.6rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .news_text > dd {
    width: calc(100% - 4.5em - 1rem);
    margin-top: 1.0416666667vw;
  }
}
.news_text > dd > p {
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.news_btn {
  position: relative;
  width: 45rem;
  aspect-ratio: 450/90;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .news_btn {
    width: 32.8rem;
    aspect-ratio: 328/60;
    margin: 2.0833333333vw auto 0 auto;
  }
}
.news_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  color: #000000;
  border-radius: 5rem;
  background-color: #17b8aa;
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover {
    color: #17b8aa;
    background-color: #000000;
  }
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover::after {
    background-image: url(../images/common/arrow_bg02_h.png);
  }
}
.news_btn > a::after {
  content: "";
  position: absolute;
  right: 4rem;
  top: 50%;
  display: block;
  width: 3.8rem;
  aspect-ratio: 38/26;
  background-image: url(../images/common/arrow_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .news_btn > a::after {
    right: 2.4rem;
    width: 2.4rem;
  }
}
.news_btn > a > span {
  font-size: 3.4rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .news_btn > a > span {
    font-size: 2rem;
  }
}

/* ========================================================
    info
======================================================== */
.info {
  position: relative;
  width: 100%;
  padding: 6rem 0 24rem 0;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .info {
    padding: 2.6041666667vw 0 9.375vw 0;
  }
}
.info_column {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.info_bnr {
  position: relative;
  width: 86.6666666667vw;
  margin: 18rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .info_bnr {
    width: 41.6666666667vw;
    margin: 7.8125vw auto 0 auto;
  }
}
.info_bnr > li {
  margin-top: 0;
}
.info_bnr > li + li {
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .info_bnr > li + li {
    margin-top: 1.0416666667vw;
  }
}
.info_bnr > li > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .info_bnr > li > a:hover::after {
    content: "";
  }
}
.info_bnr > li > a::after {
  content: none;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0.3rem solid #17b8aa;
}
.info_movie {
  position: relative;
  width: 100%;
  margin: 18rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .info_movie {
    width: 53.125vw;
    margin: 7.8125vw auto 0 auto;
  }
}
.info_movie_ttl {
  position: relative;
  text-align: center;
}
.info_movie_ttl > span {
  position: relative;
  display: inline-block;
  font-family: "ab-kirigirisu", sans-serif;
  font-size: 13rem;
  line-height: 1;
  letter-spacing: -0.3em;
}
@media screen and (min-width: 768px) {
  .info_movie_ttl > span {
    font-size: 5.7291666667vw;
  }
}
.info_movie_ttl > span > span {
  line-height: 1;
  letter-spacing: -0.2em;
}
.info_movie_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 750/576;
  padding: 7.2rem 0 0 0;
  background-image: url(../images/top/info_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .info_movie_wrap {
    aspect-ratio: 1020/694;
    padding: 4.1666666667vw 1.5625vw 0 1.5625vw;
    background-image: url(../images/top/info_bg01_pc.png);
  }
}
.info_movie_inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.info_movie_inner > iframe {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=top.css.map */