@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.mv {
  position: relative;
  width: 100%;
  padding: 0;
}
.mv::before {
  content: none;
}
@media screen and (min-width: 768px) {
  .mv::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 35.4166666667%;
    aspect-ratio: 680/669;
    background-image: url(../images/top/mv_bg01_pc.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: -3;
  }
}
.mv .inner {
  max-width: inherit;
  padding: 0;
}
.mv_column {
  position: relative;
  width: 100%;
}
.mv_wrap {
  position: relative;
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mv_wrap {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto;
    grid-template-areas: "mv_ttl mv_img" "mv_onair mv_img" "mv_news mv_img";
    align-items: start;
    justify-content: space-between;
  }
}
.mv_ttl {
  position: absolute;
  left: 50%;
  top: 9rem;
  display: block;
  width: 85.3333333333%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv_ttl {
    grid-area: mv_ttl;
    position: relative;
    left: inherit;
    top: inherit;
    width: 76.6666666667%;
    margin: 0 auto auto auto;
    padding: 14.5833333333% 0 0 0;
    transform: none;
  }
}
.mv_img {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mv_img {
    grid-area: mv_img;
  }
}
.mv_onair {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 4.8rem 0 6.4rem 0;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mv_onair {
    grid-area: mv_onair;
    width: 86.4583333333%;
    margin: auto;
    padding: 0;
    overflow: visible;
  }
}
.mv_onair::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(-60deg, #004089 0%, #004089 5%, #1393d0 80%, #5ee1d9 100%);
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .mv_onair::before {
    content: none;
  }
}
.mv_onair::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  aspect-ratio: 750/443;
  background-image: url(../images/top/mv_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  transform: none;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .mv_onair::after {
    top: 50%;
    aspect-ratio: 830/543;
    background-image: url(../images/top/mv_bg02_pc.png);
    transform: translateY(-50%);
  }
}
.mv_onair * {
  line-height: 1;
  letter-spacing: 0;
}
.mv_onair_text01 {
  color: #ffffff;
  font-size: 4.5rem;
  font-weight: 900;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .mv_onair_text01 {
    font-size: 2.0833333333vw;
    color: #1393d0;
  }
}
.mv_onair_text01 > span {
  display: inline-block;
  font-size: 80%;
}
@media screen and (min-width: 768px) {
  .mv_onair_text01 > span {
    color: transparent;
    background: linear-gradient(0deg, #004089 0%, #1393d0 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }
}
.mv_onair_text02 {
  margin-top: 9.6rem;
  color: #ffffff;
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 1rem #ff84ce;
}
@media screen and (min-width: 768px) {
  .mv_onair_text02 {
    margin-top: 5.0602409639%;
    font-size: 1.875vw;
    text-shadow: none;
  }
}
.mv_onair_text02 > span {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .mv_onair_text02 > span {
    color: transparent;
    background: linear-gradient(90deg, #c962f5 0%, #c299ff 20%, #0680d1 90%, #0680d1 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }
}
.mv_onair_text03 {
  display: inline-block;
  margin-top: 1.8rem;
  color: #ffffff;
  font-size: 7.4rem;
  font-weight: 900;
  text-align: right;
  text-shadow: 0 0 1rem #fffaad;
}
@media screen and (min-width: 768px) {
  .mv_onair_text03 {
    margin-top: 1.4457831325%;
    font-size: 3.6458333333vw;
    text-shadow: none;
  }
}
.mv_onair_text03 > span {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .mv_onair_text03 > span {
    color: transparent;
    background: linear-gradient(-90deg, #004089 0%, #004089 5%, #1393d0 80%, #5ee1d9 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }
}
.mv_onair_text03 > small {
  display: block;
  margin-top: 1.2rem;
  font-size: 2.8rem;
  text-shadow: none;
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .mv_onair_text03 > small {
    margin-top: 1.2048192771%;
    color: #000000;
    font-size: 1.0416666667vw;
    opacity: 0.5;
  }
}
.mv_onair_text04 {
  margin-top: 1.2rem;
  color: #ffffff;
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .mv_onair_text04 {
    margin-top: 0.9638554217%;
    font-size: 1.875vw;
  }
}
.mv_onair_text04 > span {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .mv_onair_text04 > span {
    color: transparent;
    background: linear-gradient(0deg, #705218 0%, #a98d50 20%, #c1b170 80%, #c1b170 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }
}
.mv_onair_text04 > span > span {
  display: inline-block;
  font-size: 80%;
}
.mv_onair_text04 > small {
  display: inline-block;
  font-size: 2.8rem;
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .mv_onair_text04 > small {
    color: #000000;
    font-size: 1.0416666667vw;
    opacity: 0.5;
  }
}
.mv_news {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 12rem 4rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .mv_news {
    grid-area: mv_news;
    margin: auto 0 0 0;
    padding: 0;
  }
}
.mv_news::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 54.8%;
  aspect-ratio: 411/595;
  background-image: url(../images/top/news_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .mv_news::before {
    content: none;
  }
}
.mv_news_ttl {
  position: relative;
  width: 46.7164179104%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_news_ttl {
    width: 22.5%;
  }
}
.mv_news_list {
  position: relative;
  width: 100%;
  margin: 6rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_news_list {
    width: 75%;
    margin: 3.125% auto 0 auto;
  }
}
.mv_news_list > li {
  width: 100%;
  margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
  .mv_news_list > li {
    margin-top: 2.5%;
  }
}
.mv_news_list > li:first-child {
  margin-top: 0;
}
.mv_news_list > li > a {
  position: relative;
  display: block;
  width: 100%;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .mv_news_list > li > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .mv_news_list > li > a:hover::before {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .mv_news_list > li > a:hover .mv_news_item > dt > span {
    color: #1393d0;
  }
}
@media screen and (min-width: 768px) {
  .mv_news_list > li > a:hover .mv_news_item > dd > span {
    color: #1393d0;
  }
}
.mv_news_list > li > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(100% + 0.4em);
  height: calc(100% + 0.4em);
  border: 1px solid;
  -o-border-image: linear-gradient(-90deg, #004089 0%, #004089 5%, #1393d0 80%, #5ee1d9 100%) 1;
     border-image: linear-gradient(-90deg, #004089 0%, #004089 5%, #1393d0 80%, #5ee1d9 100%) 1;
  transform: translate(-50%, -50%);
  transition: 0.3s ease;
  opacity: 0;
}
.mv_news_item {
  position: relative;
  width: 100%;
  padding: 2rem;
  transform: translateY(-0.1em);
}
@media screen and (min-width: 768px) {
  .mv_news_item {
    padding: 2.0833333333% 4.1666666667%;
  }
}
.mv_news_item > dt {
  width: 100%;
}
.mv_news_item > dt > span {
  display: block;
  color: #004089;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .mv_news_item > dt > span {
    font-size: 0.9375vw;
  }
}
.mv_news_item > dd {
  width: 100%;
}
.mv_news_item > dd > span {
  display: block;
  color: #000000;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 768px) {
  .mv_news_item > dd > span {
    font-size: 0.9375vw;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
}

/* ========================================================
    movie
======================================================== */
.movie {
  position: relative;
  width: 100%;
  padding: 12rem 0;
}
.movie::before {
  content: none;
}
@media screen and (min-width: 768px) {
  .movie::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 28.6458333333%;
    aspect-ratio: 550/754;
    background-image: url(../images/top/movie_bg01_pc.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: -3;
  }
}
.movie_column {
  position: relative;
  width: 100%;
}
.movie_ttl {
  position: relative;
  width: 68.5074626866%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .movie_ttl {
    width: 45.0833333333%;
  }
}
.movie_wrap {
  position: relative;
  width: 100%;
  margin-top: 6rem;
}
.movie_embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie_embed::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  display: block;
  width: 108.9552238806%;
  aspect-ratio: 730/521;
  background-image: url(../images/top/movie_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .movie_embed::before {
    width: 122.8333333333%;
    aspect-ratio: 1474/903;
    background-image: url(../images/top/movie_bg02_pc.png);
  }
}
.movie_embed * {
  line-height: inherit;
}
.movie_embed iframe {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ========================================================
    intro
======================================================== */
.intro {
  position: relative;
  width: 100%;
  padding: 12rem 0;
}
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: -31rem;
  display: block;
  width: 24%;
  aspect-ratio: 180/308;
  background-image: url(../images/top/intro_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .intro::before {
    top: -25rem;
    width: 25.5729166667%;
    aspect-ratio: 491/593;
    background-image: url(../images/top/intro_bg01_pc.png);
  }
}
.intro::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(127, 225, 238, 0.1);
  z-index: -2;
}
.intro_column {
  position: relative;
  width: 100%;
}
.intro_ttl {
  position: relative;
  width: 106.4179104478%;
  margin: 0 -3.2089552239%;
}
@media screen and (min-width: 768px) {
  .intro_ttl {
    width: 73.25%;
    margin: 0 auto;
  }
}
.intro_wrap {
  position: relative;
  width: 100%;
  margin-top: 6rem;
}
.intro_wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 111.9402985075%;
  aspect-ratio: 750/1278;
  background-image: url(../images/top/intro_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .intro_wrap::before {
    width: 110%;
    aspect-ratio: 1320/844;
    background-image: url(../images/top/intro_bg02_pc.png);
  }
}
.intro_subttl {
  position: relative;
  width: 102.9850746269%;
  margin: 0 -1.4925373134%;
}
@media screen and (min-width: 768px) {
  .intro_subttl {
    width: 87.9166666667%;
    margin: 0 auto;
  }
}
.intro_text {
  position: relative;
  width: 102.9850746269%;
  margin: 4rem -1.4925373134% 0 -1.4925373134%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .intro_text {
    width: 100%;
    margin: 4rem auto 0 auto;
  }
}
.intro_text > p {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2.4;
}
@media screen and (min-width: 768px) {
  .intro_text > p {
    font-size: 2.4rem;
  }
}
.intro_text > p .color_purple {
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  .intro_text > p .color_purple {
    font-size: 3.2rem;
  }
}
.intro_text > p .color_green {
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  .intro_text > p .color_green {
    font-size: 3.2rem;
  }
}
.intro_text > p .color_blue02 {
  font-size: 3.6rem;
}
@media screen and (min-width: 768px) {
  .intro_text > p .color_blue02 {
    font-size: 2.8rem;
  }
}
.intro_text > p .color_grade01 {
  margin-top: 5rem;
  font-size: 4.6rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .intro_text > p .color_grade01 {
    font-size: 3.8rem;
  }
}

/* ========================================================
    caststaff
======================================================== */
.caststaff {
  position: relative;
  width: 100%;
  padding: 12rem 0 0 0;
}
.caststaff::before {
  content: "";
  position: absolute;
  right: 0;
  top: -31rem;
  display: block;
  width: 23.2%;
  aspect-ratio: 174/392;
  background-image: url(../images/top/caststaff_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .caststaff::before {
    top: -49rem;
    width: 26.1458333333%;
    aspect-ratio: 502/880;
    background-image: url(../images/top/caststaff_bg01_pc.png);
  }
}
.caststaff_column {
  position: relative;
  width: 100%;
  padding: 8rem 0;
}
.caststaff_column::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 102.9850746269%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .caststaff_column::before {
    width: 120%;
  }
}
.caststaff_bg02 {
  position: absolute;
  left: -4.4776119403%;
  top: -4rem;
  display: block;
  width: 17.3134328358%;
  aspect-ratio: 201/180;
  background-image: url(../images/top/caststaff_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .caststaff_bg02 {
    left: -13.3333333333%;
    top: -6rem;
    width: 16.75%;
  }
}
.caststaff_bg03 {
  position: absolute;
  right: -4.4776119403%;
  bottom: -4rem;
  display: block;
  width: 16.2686567164%;
  aspect-ratio: 194/190;
  background-image: url(../images/top/caststaff_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .caststaff_bg03 {
    right: -13.3333333333%;
    bottom: -6rem;
    width: 16.1666666667%;
  }
}
.caststaff_ttl {
  position: relative;
  width: 94.9253731343%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .caststaff_ttl {
    width: 65.5833333333%;
  }
}
.caststaff_wrap {
  position: relative;
  width: 100%;
  margin-top: 6rem;
}
.caststaff_subttl {
  position: relative;
  width: 94.0298507463%;
  margin: 6rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .caststaff_subttl {
    width: 86.6666666667%;
  }
}
.caststaff_subttl:first-child {
  margin-top: 0;
}
.caststaff_list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.caststaff_list > li {
  width: 50%;
  margin: 3rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .caststaff_list > li {
    width: 33.3333333333%;
  }
}
.caststaff_list > li.wide {
  width: 100%;
}
.caststaff_item {
  position: relative;
  width: 100%;
  text-align: center;
}
.caststaff_item > dt {
  width: 100%;
}
.caststaff_item > dt > span {
  display: inline-block;
  color: #004089;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dt > span {
    font-size: 2rem;
  }
}
.caststaff_item > dd {
  width: 100%;
}
.caststaff_item > dd > span {
  position: relative;
  display: inline-block;
  color: #000000;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span {
    font-size: 3.2rem;
  }
}
.caststaff_item > dd > span > span {
  display: inline-block;
  font-size: 80%;
  line-height: 1.6;
}
.caststaff_item > dd > span > small {
  display: block;
  margin-top: 0.2em;
  font-size: 60%;
}
.caststaff_item > dd > span > a {
  position: absolute;
  right: -7rem;
  top: 50%;
  display: block;
  width: 6.4rem;
  aspect-ratio: 64/37;
  font-size: 0;
  background-image: url(../images/common/btn_comment.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span > a {
    right: -5.4rem;
    width: 4.8rem;
  }
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span > a:hover {
    background-image: url(../images/common/btn_comment_h.png);
    transform: translateY(-64%);
    opacity: 1;
  }
}
.caststaff_comment {
  position: relative;
  width: 100%;
  margin: 7rem 0 5rem 0;
  padding: 2rem 7.9104477612%;
  background-image: url(../images/top/caststaff_bg05_sp.png);
  background-repeat: repeat-y;
  background-position: center center;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .caststaff_comment {
    padding: 1.5rem 9.3023255814%;
    background-image: url(../images/top/caststaff_bg05_pc.png);
  }
}
.caststaff_comment::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7rem;
  display: block;
  width: 100%;
  height: 7rem;
  background-image: url(../images/top/caststaff_bg04_sp.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .caststaff_comment::before {
    background-image: url(../images/top/caststaff_bg04_pc.png);
  }
}
.caststaff_comment::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5rem;
  display: block;
  width: 100%;
  height: 5rem;
  background-image: url(../images/top/caststaff_bg06_sp.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .caststaff_comment::after {
    background-image: url(../images/top/caststaff_bg06_pc.png);
  }
}
.caststaff_comment_head {
  position: relative;
  width: 100%;
  padding-bottom: 6rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_head {
    padding-bottom: 4rem;
  }
}
.caststaff_comment_head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2rem;
  background-image: url(../images/top/caststaff_bg07.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_head::before {
    height: 1rem;
  }
}
.caststaff_comment_head > dt {
  width: 100%;
}
.caststaff_comment_head > dt > span {
  display: block;
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_head > dt > span {
    font-size: 2rem;
  }
}
.caststaff_comment_head > dd {
  width: 100%;
  margin-top: 1.6rem;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_head > dd {
    margin-top: 1.2rem;
  }
}
.caststaff_comment_head > dd > span {
  display: block;
  color: #ffffff;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_head > dd > span {
    font-size: 3rem;
  }
}
.caststaff_comment_body {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4rem;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_body {
    margin-top: 3rem;
    padding: 0 1.4285714286%;
  }
}
.caststaff_comment_img {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_img {
    width: 44.1176470588%;
  }
}
.caststaff_comment_text {
  position: relative;
  width: 100%;
  margin: 4rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_text {
    width: 50%;
    margin: 0;
  }
}
.caststaff_comment_text:first-child {
  width: 100%;
  margin: 0;
}
.caststaff_comment_text > p {
  margin-top: 1.2em;
  color: #ffffff;
  font-weight: 700;
}
.caststaff_comment_text > p:first-child {
  margin-top: 0;
}

/* ========================================================
    previous
======================================================== */
.previous {
  position: relative;
  width: 100%;
  padding: 12rem 0;
}
@media screen and (min-width: 768px) {
  .previous {
    padding: 19rem 0 12rem 0;
  }
}
.previous::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14rem;
  display: block;
  width: 24.1333333333%;
  aspect-ratio: 181/274;
  background-image: url(../images/top/previous_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .previous::before {
    top: -26rem;
    width: 25.2083333333%;
    aspect-ratio: 484/598;
    background-image: url(../images/top/previous_bg01_pc.png);
  }
}
.previous::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 31.0666666667%;
  aspect-ratio: 233/350;
  background-image: url(../images/top/previous_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .previous::after {
    width: 21.25%;
    aspect-ratio: 408/624;
    background-image: url(../images/top/previous_bg02_pc.png);
  }
}
.previous_column {
  position: relative;
  width: 100%;
}
.previous_ttl {
  position: relative;
  width: 71.1940298507%;
  margin: 0 auto 0 5.9701492537%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .previous_ttl {
    width: 32.75%;
    margin: 0 auto 0 calc(50% - 50vw);
  }
}
@media screen and (min-width: 1440px) {
  .previous_ttl {
    margin-left: calc(50% - 720px);
  }
}
.previous_wrap {
  position: relative;
  width: 100%;
  margin-top: -5rem;
}
@media screen and (min-width: 768px) {
  .previous_wrap {
    margin-top: -20%;
  }
}
.previous_img {
  position: relative;
  width: 105.9701492537%;
  margin: 0 -2.9850746269%;
}
@media screen and (min-width: 768px) {
  .previous_img {
    width: 57.6666666667%;
    margin: 0 auto;
  }
}
.previous_btn {
  position: relative;
  width: 94.0298507463%;
  aspect-ratio: 630/120;
  margin: 2rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .previous_btn {
    width: 52rem;
    aspect-ratio: 520/100;
    margin: -7.5% 0 0 auto;
  }
}
.previous_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  padding: 0 9rem 0.2em 0;
  background: linear-gradient(-90deg, #284e8f 0%, #2c8ec4 68%, #5ee1d9 100%);
}
@media screen and (min-width: 768px) {
  .previous_btn > a {
    padding: 0 7rem 0.2em 0;
  }
}
@media screen and (min-width: 768px) {
  .previous_btn > a:hover {
    background: linear-gradient(90deg, #284e8f 0%, #2c8ec4 68%, #5ee1d9 100%);
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .previous_btn > a:hover::before {
    right: 3.5rem;
  }
}
.previous_btn > a::before {
  content: "";
  position: absolute;
  right: 4rem;
  top: 50%;
  display: block;
  width: 11.1111111111%;
  aspect-ratio: 70/8;
  background-image: url(../images/common/arrow_bg01.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) {
  .previous_btn > a::before {
    width: 9.6153846154%;
  }
}
.previous_btn > a > span {
  display: block;
  color: #ffffff;
  font-size: 4rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .previous_btn > a > span {
    font-size: 3.2rem;
  }
}

/* ========================================================
    animation
======================================================== */
.scroll_anime_target {
  transform: translateY(3rem);
  transition: 1s ease-in-out;
  opacity: 0;
}
.scroll_anime_target.is-appear {
  transform: translateY(0);
  opacity: 1;
}/*# sourceMappingURL=top.css.map */