@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : TOPページCSS
===================================================================== */

/* =====================================================================
*    header
* =================================================================== */
#header {
}

.mv {
  background: url(../images/bg_mv_sp.png) no-repeat center top;
  background-size: 100% auto;
  padding-bottom: calc(100 / 750 * 100%);
}

.site_ttl {
  width: calc(668 / 750 * 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: calc(602 / 750 * 100%) 0 0 calc(52 / 750 * 100%);
  z-index: 3;
}

.mv_img {
  padding-top: calc(13 / 750 * 100%);
  width: calc(583 / 750 * 100%);
  margin: 0 auto;
}

.mv_onair {
  width: calc(670 / 750 * 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: calc(874 / 750 * 100%) auto 0;
  z-index: 2;
}

.official_link {
}

.official_link a {
  width: calc(459 / 750 * 100%);
  margin: calc(182 / 750 * 100%) auto 0;
  padding-top: calc(101 / 750 * 100%);
  display: block;
  background: url(../images/btn_official_sp.png) no-repeat center;
  background-size: contain;
}

.official_link a {
}

@media screen and (min-width: 700px) {
  .mv {
    background: url(../images/bg_mv_pc.png) no-repeat center top;
    background-size: auto 100%;
    padding-bottom: calc(100 / 740 * 100%);
  }

  .mv_box {
    padding: 0 calc(178 / 740 * 100%) 0 auto;
    z-index: 10;
  }
  .mv_img {
    padding-top: calc(34 / 740 * 100%);
    width: calc(544 / 740 * 100%);
  }

  .site_ttl {
    width: calc(630 / 740 * 100%);
    margin: calc(560 / 740 * 100%) calc(80 / 740 * 100%) 0 auto;
  }

  .mv_onair {
    width: calc(640 / 740 * 100%);
    top: 0;
    bottom: 0;
    margin: calc(823 / 740 * 100%) calc(80 / 740 * 100%) 0 auto;
  }

  .mv_bnr {
    padding: 0;
  }

  .official_link {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(211 / 740 * 100%);
    margin: calc(8 / 740 * 100%) 0 0 calc(20 / 740 * 100%);
  }

  .official_link a {
    width: 100%;
    padding-top: 100%;
    margin: 0;
    background: url(../images/btn_official_off_pc.png) no-repeat center;
    background-size: contain;
  }
  .official_link a:hover {
    background: url(../images/btn_official_on_pc.png) no-repeat center;
    background-size: contain;
  }
}

@media screen and (min-width: 1040px) {
  .mv {
    background-size: 1720px auto;
    padding-bottom: 140px;
  }
}

/* =====================================================================
*    intro
* =================================================================== */
.intro {
  background: #fdcd3a;
  /* transform: skewY(-4deg); */
  overflow: hidden;
  transform: skewY(-4deg);
  transform-origin: left top;
}
.intro .inner {
  transform: skewY(4deg);
  padding-bottom: calc(100 / 750 * 100%);
  /* margin: -20px 0; */
  z-index: 2;
}
.intro_bg {
  background: url(../images/bg_intro.png) repeat left top;
  background-size: 52px;
  position: relative;
  /* transform: skewY(4deg); */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.intro_bg::before {
  content: "";
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: calc(733 / 750 * 100%);
  padding-top: calc(1256 / 750 * 100%);
  margin-top: calc(383 / 750 * 100%);
  margin-left: calc(50 / 750 * 100%);
  background: url(../images/bg_chara_sp.png) no-repeat center right;
  background-size: auto 100%;
}
.intro .sec_ttl {
  width: calc(612 / 750 * 100%);
  margin: 0 calc(40 / 750 * 100%) calc(60 / 750 * 100%) auto;
  padding: 0;
}

.intro_box {
  width: calc(645 / 750 * 100%);
  margin: 0 auto 0;
  padding: 0;
  z-index: 3;
}

@media screen and (min-width: 700px) {
  .intro {
    background-size: auto;
    transform-origin: center top;
  }
  .intro .inner {
    padding-bottom: calc(68 / 1040 * 100%);
    /* margin: -20px auto; */
  }
  .intro .sec_ttl {
    width: calc(556 / 740 * 100%);
    margin: 0 calc(80 / 740 * 100%) calc(80 / 740 * 100%) auto;
    padding: 0;
  }

  .intro_box {
    width: calc(660 / 740 * 100%);
    margin: 0 calc(80 / 740 * 100%) 0 0;
    padding: 0;
    z-index: 3;
  }

  .intro_bg::before {
    width: 1500px;
    padding-top: calc(1401 / 1500 * 100%);
    margin-top: calc(480 / 1500 * 100%);
    margin-left: 0;
    background: url(../images/bg_chara_pc.png) no-repeat bottom left;
    background-size: contain;
  }
  .intro_bg::after {
  }
}

@media screen and (min-width: 1040px) {
  .intro .inner {
    padding-bottom: 70px;
  }
  .intro_bg {
    background-size: auto;
  }
  .intro_bg::before {
    content: "";
    display: block;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    z-index: 1;
    width: 1500px;
    margin: 0 auto;
    padding-top: calc(1256 / 1500 * 100%);
    background: url(../images/bg_chara_pc.png) no-repeat center center;
    background-size: 1500px auto;
  }
}

/* =====================================================================
*    staff
* =================================================================== */
.staff {
  background: #9c73e7;
  overflow: hidden;
  z-index: 4;
  margin-top: calc(-60 / 750 * 100%);
}
.staff .inner {
  /* padding-bottom: calc(100 / 750 * 100%); */
  margin: 0 auto;
}

.staff .sec_ttl {
  width: calc(270 / 750 * 100%);
  margin: calc(-20 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%)
    auto;
  padding: 0;
}

.staff_box {
  width: calc(668 / 750 * 100%);
  margin: 0 auto;
  padding: 0 0 calc(180 / 750 * 100%);
}
.staff_bg {
  background: url(../images/bg_staff.png) repeat left top;
  background-size: 52px;
  position: relative;
  /* transform: skewY(4deg); */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  margin-top: calc(-60 / 750 * 100%);
  padding-top: calc(100 / 750 * 100%);
}

@media screen and (min-width: 700px) {
  .staff {
    margin-top: calc(-60 / 1040 * 100%);
  }
  .staff .inner {
    padding-bottom: calc(118 / 1040 * 100%);
    margin: 0 auto;
  }

  .staff .sec_ttl {
    width: calc(270 / 740 * 100%);
    margin: 0 calc(80 / 740 * 100%) calc(80 / 740 * 100%) auto;
    padding: 0;
  }

  .staff_box {
    width: calc(660 / 740 * 100%);
    margin: 0 calc(80 / 740 * 100%) 0 0;
    padding: 0;
  }
  .staff_bg {
    margin-top: 0;
    padding-top: calc(40 / 740 * 100%);
  }
}

@media screen and (min-width: 1040px) {
  .staff {
  }
  .staff .inner {
    padding-bottom: 150px;
  }
  .staff_bg {
    background-size: auto;
  }
}

/* =====================================================================
*    cast
* =================================================================== */
.cast {
  position: relative;
  transform: skewY(-4deg);
  transform-origin: left top;
  z-index: 5;
  background: #fff;
  overflow: hidden;
}
.cast::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: skewY(4deg);
  background: url(../images/bg_cast_sp.png) no-repeat center top;
  background-size: 100% auto;
  margin-top: 0;
}
.cast::after {
}
.cast .inner {
  padding-bottom: calc(100 / 750 * 100%);
  transform: skewY(4deg);
}
.cast .sec_ttl {
  width: calc(288 / 750 * 100%);
  margin: calc(-20 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%)
    auto;
  padding: 0;
}
.cast_box {
  width: calc(441 / 750 * 100%);
  margin: 0 auto;
}
@media screen and (min-width: 700px) {
  .cast {
    transform-origin: center top;
  }
  .cast::before {
    background: url(../images/bg_cast_pc.png) no-repeat center top;
    background-size: 1720px auto;
  }

  .cast_bg {
  }
  .cast .inner {
    padding-bottom: calc(70 / 1040 * 100%);
    /* margin: -20px auto; */
  }
  .cast .sec_ttl {
    width: calc(263 / 740 * 100%);
    margin: calc(-10 / 740 * 100%) calc(80 / 740 * 100%) calc(80 / 740 * 100%)
      auto;
    padding: 0;
  }

  .cast_box {
    width: calc(660 / 740 * 100%);
    margin: 0 calc(80 / 740 * 100%) 0 0;
    padding: 0;
  }
}

@media screen and (min-width: 1040px) {
  .cast_bg {
    background-size: auto;
  }
}