@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
.fri{
  margin: 4rem 0;
    font-weight: 700;
    text-align: center;
    font-size: 3rem;
    color: #f4853d;
}
.sec-ttl {
  text-align: center;
  margin-bottom: 5.5rem;
  font-size: 5.5rem;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  .sec-ttl {
    margin-bottom: 6.5rem;
  }
  .sp{
  display: none;
}
}
.sec-ttl .ja {
  display: block;
}
.sec-ttl .en {
  display: inline-block;
  margin-top: 0.8em;
  padding: 1rem 0.2em 0;
  font-size: 54%;
  color: #35b467;
  border-top: 0.6rem solid currentColor;
}

.sec-ttl02 {
  margin: 0 auto 5rem;
  text-align: center;
  padding: 0.3em 0;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 9em;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.3;
  color: #ffffff;
  background: url(../images/common/shape_ttl_orange.svg) no-repeat center/100% 100%;
}

/* =====================================================================
    header
======================================================================*/
@media screen and (min-width: 768px) {
  .header > .inner {
    width: 100%;
    max-width: 1600px;
  }
}
@media screen and (max-width: 767px) {
  .header h1 {
    margin: 0 calc(50% - 50vw);
  }
}
.header-sns {
  display: flex;
  justify-content: center;
  margin-top: 4.5rem;
  font-size: 11rem;
}
@media screen and (min-width: 768px) {
  .header-sns {
    margin-top: 0;
    font-size: 6.4rem;
    justify-content: flex-end;
  }
}
.header-sns li {
  margin: 0 0.09em;
  width: 1em;
  height: 1em;
}
.header-sns li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #35b467;
  border-radius: 50%;
  transition-property: background-color;
}
@media screen and (min-width: 768px) {
  .header-sns li a:hover {
    opacity: 1;
    background-color: #f4853d;
  }
}
.header-sns li a svg {
  position: relative;
  width: 40%;
  height: 40%;
  fill: #ffffff;
}

/* =====================================================================
    lead
======================================================================*/
.lead {
  padding: 7rem 0 0;
}
.lead-deco01 {
  position: relative;
  margin: 0 -6rem 0 auto;
  width: 48.5rem;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .lead-deco01 {
    position: absolute;
    bottom: -27rem;
    right: 0;
    margin-right: -10rem;
  }
}
.lead-deco01-text {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 -28.8659793814% 10.3092783505%;
  width: 45.3608247423% !important;
}
@media screen and (min-width: 768px) {
  .lead-deco01-text {
    bottom: auto;
    top: 0;
    margin-bottom: 0;
    margin-top: -18%;
  }
}
.lead-deco01-character {
  position: absolute;
  top: 0;
  left: 0;
  margin: 12.9896907216% 0 0 -13.8144329897%;
  width: 68.2474226804% !important;
}
.lead-text {
  text-align: center;
  margin-top: 3rem;
  font-size: 114%;
}

/* =====================================================================
    movie
======================================================================*/
.movie {
  padding: 20rem 0 34.4rem;
}
@media screen and (min-width: 768px) {
  .movie {
    padding: 13.4rem 0 16.3rem;
  }
}
.movie .bg-shape {
  top: 43%;
}
.movie .bg-shape .cloud01_r {
  top: 16rem;
  right: -5.3rem;
}
@media screen and (min-width: 768px) {
  .movie .bg-shape .cloud01_r {
    top: 49.4rem;
    right: -5.8rem;
  }
}
.movie-deco01 {
  position: absolute;
  bottom: -8rem;
  left: -10.4rem;
  width: 53.3rem;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .movie-deco01 {
    bottom: auto;
    top: -20rem;
    left: -6rem;
  }
}
.movie-list li {
  margin-bottom: 10rem;
}
.movie-list li:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .movie-list li {
    margin: 0 auto 8rem;
    max-width: 800px;
  }
}

/* =====================================================================
    cast
======================================================================*/
.cast {
  padding: 25rem 0 0;
}
@media screen and (min-width: 768px) {
  .cast {
    padding-bottom: 25rem;
  }
}
.cast .bg-shape:first-child {
  top: 0;
  transform: translateY(0);
}
.cast .bg-shape:first-child .cloud01 {
  top: 52rem;
  left: -5.3rem;
}
@media screen and (min-width: 768px) {
  .cast .bg-shape:first-child .cloud01 {
    top: 34.7rem;
    left: -16rem;
  }
}
.cast .bg-shape:nth-child(2) {
  top: auto;
  bottom: 0;
  transform: translateY(0);
}
.cast .bg-shape:nth-child(2) .cloud01_r {
  top: 36.8rem;
  right: -4rem;
}
@media screen and (min-width: 768px) {
  .cast .bg-shape:nth-child(2) .cloud01_r {
    top: 14.1rem;
    right: -6.1rem;
  }
}
.cast .bg-shape:nth-child(2) .cloud02 {
  bottom: -4.9rem;
  left: 9.6rem;
}
.cast-deco01 {
  position: absolute;
  top: -0.05rem;
  right: -11rem;
  width: 55rem;
}
.cast-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .cast-list {
    justify-content: flex-start;
  }
}
.cast-list li {
  margin-top: 5rem;
  width: calc(300 / 650 * 100%);
}
.cast-list li:nth-child(-n+2) {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .cast-list li {
    margin: 16rem calc(50 / 1000 * 100%) 0 0;
    width: calc(300 / 1000 * 100%);
  }
  .cast-list li:nth-child(3n) {
    margin-right: 0;
  }
  .cast-list li:nth-child(-n+3) {
    margin-top: 0;
  }
}
.cast-list li figure img {
  aspect-ratio: 0.811/1;
  -o-object-position: center bottom;
     object-position: center bottom;
  -o-object-fit: contain;
     object-fit: contain;
}
.cast-list li figure[data-popup] {
  position: relative;
}
@media screen and (min-width: 768px) {
  .cast-list li figure[data-popup] {
    cursor: pointer;
  }
  .cast-list li figure[data-popup]:hover::after {
    bottom: 1rem;
  }
}
.cast-list li figure[data-popup]::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 8rem;
  height: 6.4rem;
  background: url(../images/common/shape_comment.svg) no-repeat center/contain;
  transition: bottom 0.3s ease;
}
.cast-list li dl {
  text-align: center;
  margin-top: 0.8em;
  font-weight: 700;
  font-size: 128%;
}
@media screen and (min-width: 768px) {
  .cast-list li dl {
    font-size: 180%;
  }
}
.cast-list li dl > * {
  line-height: 1.25;
}
.cast-list li dl dt {
  display: block;
  margin-bottom: 0.35em;
  font-size: 72%;
  font-weight: 900;
  color: #35b467;
}

/* =====================================================================
    castWeek
======================================================================*/
.castWeek {
  padding: 11rem 0;
}
.castWeek-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.castWeek-list li {
  margin: 3rem calc(15 / 650 * 100%) 0;
  width: calc(180 / 650 * 100%);
}
@media screen and (max-width: 767px) {
  .castWeek-list li:nth-child(-n+3) {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .castWeek-list li {
    margin: 3rem calc(25 / 1000 * 100%) 0 0;
    width: calc(180 / 1000 * 100%);
  }
  .castWeek-list li:nth-child(5n), .castWeek-list li:last-child {
    margin-right: 0;
  }
  .castWeek-list li:nth-child(-n+5) {
    margin-top: 0;
  }
}
.castWeek-list li figure img {
  aspect-ratio: 0.846/1;
  -o-object-position: center bottom;
     object-position: center bottom;
  -o-object-fit: contain;
     object-fit: contain;
}
.castWeek-list li dl {
  text-align: center;
  margin-top: 0.5em;
  font-weight: 700;
  font-size: 121%;
}
.castWeek-list li dl > * {
  line-height: 1.25;
}
@media screen and (min-width: 768px) {
  .castWeek-list li dl {
    font-size: 140%;
  }
}
.castWeek-list li dl small {
  display: block;
  font-size: 70%;
}

@media screen and (max-width: 767px) {
  .text_center {
    white-space: nowrap;
    margin-left: -0.7em;
  }
}
/* =====================================================================
    character
======================================================================*/
.character {
  padding: 7rem 0 38.8rem;
}
@media screen and (min-width: 768px) {
  .character {
    padding-bottom: 46.2rem;
  }
}
.character-deco01 {
  position: absolute;
  top: -12.4rem;
  right: -11.3rem;
  width: 32.5rem;
}
@media screen and (min-width: 768px) {
  .character-deco01 {
    top: 31.5rem;
    right: 10.2rem;
  }
}
.character-deco02 {
  position: absolute;
  bottom: 10.4rem;
  left: -9.5rem;
  width: 62rem;
}
@media screen and (min-width: 768px) {
  .character-deco02 {
    bottom: -1rem;
    width: 76.5rem;
  }
}
.character .sec-ttl02 {
  background-image: url(../images/common/shape_ttl_green.svg);
}
.character-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .character-column {
    position: relative;
    align-items: center;
    margin: 0 auto;
    max-width: 760px;
  }
}
.character-column figure {
  margin-bottom: 6rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .character-column figure img {
    margin: 0 auto;
    width: calc(326 / 650 * 100%);
  }
}
@media screen and (min-width: 768px) {
  .character-column figure {
    order: 2;
    margin-bottom: 0;
    width: 42.8947368421%;
  }
}
.character-column dl {
  width: calc(280 / 650 * 100%);
}
@media screen and (min-width: 768px) {
  .character-column dl {
    width: 22.3684210526%;
  }
  .character-column dl:first-child {
    order: 1;
  }
  .character-column dl:last-child {
    order: 3;
  }
}
.character-column dl dt {
  margin-bottom: 0.5em;
  font-size: 142%;
  font-weight: 900;
  line-height: 1.2;
  color: #f4853d;
}

/* =====================================================================
    song
======================================================================*/
.song {
  padding: 23rem 0 13rem;
  background: url(../images/top/bg_song-sp.svg) no-repeat center/100% 100%;
}
@media screen and (min-width: 768px) {
  .song {
    margin: 0 auto;
    max-width: 1000px;
    background-image: url(../images/top/bg_song-pc.svg);
  }
  .song > .inner {
    width: calc(800 / 1000 * 100%);
    max-width: initial;
  }
}
.song-deco01 {
  position: absolute;
  top: 7.1rem;
  left: 5.9rem;
  width: 22.1rem;
}
@media screen and (min-width: 768px) {
  .song-deco01 {
    top: 6.6rem;
    left: 0;
    margin-left: calc(120 / 1000 * 100%);
  }
}
.song-deco02 {
  position: absolute;
  top: -0.03rem;
  right: 7rem;
  width: 17.7rem;
}
@media screen and (min-width: 768px) {
  .song-deco02 {
    top: 10.4rem;
    right: 0;
    margin-right: calc(68 / 1000 * 100%);
  }
}
.song-deco03 {
  position: absolute;
  bottom: -3.6rem;
  left: 9.6rem;
  width: 8rem;
}
@media screen and (min-width: 768px) {
  .song-deco03 {
    bottom: 0;
    left: 0;
    margin-left: calc(149 / 1000 * 100%);
  }
}
.song .sec-ttl .en {
  color: #f4853d;
}
@media screen and (min-width: 768px) {
  .song-column {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.song-column figure {
  margin: 0 auto 7rem;
  width: calc(340 / 650 * 100%);
}
@media screen and (min-width: 768px) {
  .song-column figure {
    flex-shrink: 0;
    margin: 0 5.75% 0 0;
    width: 42.5%;
  }
}
.song-desc {
  margin: 0 auto;
  width: calc(560 / 650 * 100%);
}
@media screen and (min-width: 768px) {
  .song-desc {
    flex-grow: 1;
  }
}
.song-desc-text01 {
  margin-bottom: 0.3em;
  font-size: 125%;
  font-weight: 700;
  color: #f4853d;
}
@media screen and (min-width: 768px) {
  .song-desc-text01 {
    font-size: 200%;
  }
}
.song-desc-text02 {
  margin-bottom: 1em;
  font-size: 114%;
  font-weight: 700;
  color: #f4853d;
}

/* =====================================================================
*    sns
* =================================================================== */
.sns {
  padding-top: 32rem;
}
@media screen and (min-width: 768px) {
  .sns {
    padding-top: 30rem;
  }
}
.sns-deco01 {
  position: absolute;
  top: 7.9rem;
  right: 0;
  width: 36rem;
}
@media screen and (min-width: 768px) {
  .sns-deco01 {
    top: -3.5rem;
    width: 58rem;
  }
}
.sns-deco02 {
  position: absolute;
  top: 13.6rem;
  left: 0;
  width: 31rem;
}
@media screen and (min-width: 768px) {
  .sns-deco02 {
    top: 3.4rem;
    width: 52.3rem;
  }
}
.sns-deco03 {
  position: absolute;
  bottom: 4rem;
  right: 3.3rem;
  width: 22.1rem;
  z-index: 2;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .sns-deco03 {
    right: 17.8rem;
  }
}
.sns-wrap {
  position: relative;
  padding: 8rem 0 16rem;
  background-color: #35b467;
  z-index: 1;
}
.sns-wrap::before, .sns-wrap::after {
  content: "";
  position: absolute;
  display: block;
  top: -2.4rem;
  left: 0;
  width: 100%;
  height: 2.6rem;
  background: url(../images/common/shape_wave.svg) repeat-x center top/auto 100%;
}
.sns-wrap::after {
  top: auto;
  bottom: -2.4rem;
  transform: scale(1, -1);
}
.sns .sec-ttl > * {
  color: #ffffff;
}
.sns-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sns-list li {
  margin-top: 4.8rem;
  width: calc(480 / 650 * 100%);
}
.sns-list li:first-child {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .sns-list li {
    margin: 4rem calc(40 / 1000 * 100%) 0 0;
    width: calc(480 / 1000 * 100%);
  }
  .sns-list li:nth-child(-n+2) {
    margin-top: 0;
  }
  .sns-list li:nth-child(2n), .sns-list li:last-child {
    margin-right: 0;
  }
}
.sns-list li a {
  display: flex;
  align-items: center;
  padding: 5% 8.3333333333%;
  background-color: #ffffff;
  border-radius: 2rem;
}
.sns-list li a svg {
  flex-shrink: 0;
  font-size: 350%;
  padding: 0.2em 0 0.25em;
  width: 1em;
  height: 0.785em;
  background: url(../images/common/shape_balloon.svg) no-repeat center/contain;
  fill: #ffffff;
}
@media screen and (min-width: 768px) {
  .sns-list li a svg {
    font-size: 490%;
  }
}
.sns-list li a dl {
  flex-grow: 1;
  margin-left: 1em;
}
@media screen and (min-width: 768px) {
  .sns-list li a dl {
    font-size: 120%;
  }
}
.sns-list li a dl dt {
  margin-bottom: 0.2em;
  font-weight: 900;
  color: #f4853d;
}
.sns-list li a dl dd {
  font-size: 70%;
}

/* =====================================================================
    related
======================================================================*/
.related {
  padding: 14rem 0;
}
.related .swiper-wrap {
  position: relative;
  margin: 0 auto;
  padding: 0 2rem;
  width: calc(580 / 650 * 100%);
}
@media screen and (min-width: 768px) {
  .related .swiper-wrap {
    padding: 0 7rem;
    width: calc(870 / 1000 * 100%);
  }
}
.related .swiper-wrap .swiper-button-next,
.related .swiper-wrap .swiper-button-prev {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 5rem;
  height: 5rem;
  background-color: #f4853d;
  border-radius: 50%;
}
@media screen and (min-width: 768px) {
  .related .swiper-wrap .swiper-button-next,
  .related .swiper-wrap .swiper-button-prev {
    width: 5rem;
    height: 5rem;
  }
}
.related .swiper-wrap .swiper-button-next::after,
.related .swiper-wrap .swiper-button-prev::after {
  font-size: 0;
  /* デフォルト矢印を消す */
  position: absolute;
  display: block;
  top: 36%;
  left: 45%;
  width: 30%;
  height: 30%;
  border-top: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
  transform: translateX(-50%) rotate(45deg);
}
.related .swiper-wrap .swiper-button-prev {
  left: -4rem;
  transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
  .related .swiper-wrap .swiper-button-prev {
    left: 0;
  }
}
.related .swiper-wrap .swiper-button-next {
  right: -4rem;
}
@media screen and (min-width: 768px) {
  .related .swiper-wrap .swiper-button-next {
    right: 0;
  }
}
.related-list .swiper-slide img {
  border: 1.5px solid #999999;
  border-radius: 2rem;
}

/* =====================================================================
    popup
======================================================================*/
.popup-list li figure {
  margin: 0 auto 4rem;
  width: 54.5454545455%;
}
@media screen and (min-width: 768px) {
  .popup-list li figure {
    margin: 0 7.3529411765% 0 0;
    width: 44.1176470588%;
  }
}
.popup-list li dl {
  margin-bottom: 6rem;
  text-align: center;
  font-size: 114%;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .popup-list li dl {
    text-align: left;
    margin-bottom: 0;
    font-size: 130%;
  }
}
.popup-list li dl > * {
  line-height: 1.25;
}
.popup-list li dl dt {
  margin-bottom: 0.6em;
  font-weight: 900;
  color: #35b467;
}
.popup-list li dl dd {
  font-size: 137%;
}
.popup-list li dl small {
  margin-left: 0.5em;
  font-size: 60%;
}
@media screen and (min-width: 768px) {
  .popup-list-column {
    display: flex;
    align-items: center;
    margin-bottom: 7rem;
  }
}
.popup-comment {
  position: relative;
  font-size: 114%;
}
.popup-comment::before {
  content: "Comment";
  display: block;
  text-align: center;
  padding: 0.1em 0;
  margin-bottom: 0.5em;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 8.8em;
  font-size: 112%;
  font-weight: 900;
  color: #ffffff;
  background: url(../images/common/shape_ttl_green.svg) no-repeat center/100% 100%;
}/*# sourceMappingURL=top.css.map */