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

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

.mv {
  background: url(../images/bg_mv_pc.jpg) no-repeat center top;
  background-size: cover;
  padding-bottom: calc(315 / 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(750 / 750 * 100%);
  margin: 0 auto;
}

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

.official_link {
}

.official_link a {
  width: calc(665 / 750 * 100%);
  margin: calc(-20 / 750 * 100%) auto 0;
  padding-top: calc(165 / 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.jpg) 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(40 / 740 * 100%);
    width: calc(797 / 740 * 100%);
  }

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

  .mv_onair {
    width: calc(797 / 740 * 100%);
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .mv_bnr {
    padding: 0;
  }

  .official_link {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(523 / 740 * 100%);
    margin: 0 auto calc(-300 / 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: 1820px auto; */
    background-size: cover;
    padding-bottom: calc(90 / 1040 * 100%);
  }
}

/* =====================================================================
*    intro
* =================================================================== */
.intro {
  background: #000;
  /* transform: skewY(-4deg); */
  overflow: hidden;
  /* transform: skewY(-4deg);
  transform-origin: left top; */
}

.intro .inner {
  /* transform: skewY(4deg); */
  padding-bottom: calc(230 / 750 * 100%);
  /* margin: -20px 0; */
  z-index: 2;
}

.intro .inner::before {
  content: "";
  display: block;
  top: 0;
  right: 0;
  position: absolute;
  z-index: 1;
  width: calc(285 / 750 * 100%);
  padding-top: calc(234 / 750 * 100%);
  margin-right: calc(-136 / 750 * 100%);
  margin-top: calc(-113 / 750 * 100%);
  background: url(../images/bg_intro_r.png) no-repeat center right;
  background-size: auto 100%;
}
.intro .inner::after {
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: calc(296 / 750 * 100%);
  padding-top: calc(296 / 750 * 100%);
  margin-bottom: calc(50 / 750 * 100%);
  margin-left: calc(-39 / 750 * 100%);
  background: url(../images/bg_intro_l.png) no-repeat center right;
  background-size: auto 100%;
  transform: rotate(
164deg);
}
.intro_bg {
  background-color: #000;
  background-size: cover;
  position: relative;
  /* transform: skewY(4deg); */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.intro .sec_ttl {
  width: calc(390 / 750 * 100%);
  margin: calc(72 / 750 * 100%) auto calc(65 / 750 * 100%);
  padding: 0;
}

.intro_box {
  position: relative;
  width: calc(590 / 750 * 100%);
  margin: 0 auto 0;
  padding: 0;
  z-index: 3;
}
.intro_box::after {
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  width: calc(983 / 750 * 100%);
  padding-top: calc(140 / 750 * 100%);
  margin-bottom: calc(0 / 750 * 100%);
  background: url(../images/bg_title_sp.png) no-repeat center right;
  background-size: auto 100%;
  margin-left: calc(-103 / 750 * 100%);
}
@media screen and (min-width: 700px) {
  .intro {
    background-size: auto;
    transform-origin: center top;
    margin-top: calc(-60 / 1040 * 100%);
    }

    .intro .inner {
      padding-bottom: calc(260 / 1040 * 100%);
    }
    .intro .inner::before {
      content: "";
      display: block;
      top: 0;
      right: 0;
      position: absolute;
      z-index: 1;
      width: calc(300 / 1040 * 100%);
      padding-top: calc(250 / 1040 * 100%);
      margin-right: calc(127 / 1040 * 100%);
      margin-top: calc(-96 / 750 * 100%);
      background: url(../images/bg_intro_r.png) no-repeat center right;
      background-size: auto 100%;
    }
  .intro .inner::after {
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    width: calc(325 / 1040 * 100%);
    padding-top: calc(325 / 1040 * 100%);
    margin-bottom: calc(441 / 1040 * 100%);
    margin-left: calc(-226 / 1040 * 100%);
    background: url(../images/bg_intro_l.png) no-repeat center right;
    background-size: auto 100%;
    transform: none;
  }


  .intro .sec_ttl {
    width: calc(280 / 740 * 100%);
    margin: calc(190 / 740 * 100%) auto calc(72 / 740 * 100%);
    padding: 0;
  }

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

  .intro_box::after {
    /* FONT-VARIANT: JIS04; */
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    width: calc(1290 / 660 * 100%);
    padding-top: calc(365 / 660 * 100%);
    margin-bottom: calc(-330/ 750 * 100%);
    background: url(../images/bg_title.png) no-repeat center right;
    background-size: cover;
    margin-left: calc(-265/ 750 * 100%);
}
  .intro_bg::before {
    width: 1500px;
    padding-top: calc(1401 / 1500 * 100%);
    margin-top: calc(480 / 1500 * 100%);
    margin-left: 0;
    background: url(../images/bg_intro_pc.png) no-repeat bottom left;
    background-size: contain;
  }

}

@media screen and (min-width: 1040px) {
  .intro .inner {
    padding-bottom: calc(200 / 1040 * 100%);
  }
  .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_intro_sp.png) no-repeat center center;
    background-size: 1500px auto;
  }
}

/* =====================================================================
*    staff
* =================================================================== */
.staff {
  background: #000;
  overflow: hidden;
  z-index: 4;
  margin-top: calc(-118 / 750 * 100%);
  transform: skewY(-8deg);
  background: url(../images/bg_staff.jpg) no-repeat left top;
  background-size: cover;
  z-index: 6;

}
.staff .inner {
  /* padding-bottom: calc(100 / 750 * 100%); */
  margin: 0 auto;
}

.staff .sec_ttl {
  width: calc(153 / 750 * 100%);
  margin: calc(58 / 750 * 100%) auto calc(58 / 750 * 100%);
  padding: 0;
}

.staff_box {
  width: calc(600 / 750 * 100%);
  margin: 0 auto;
  padding: 0 0 calc(180 / 750 * 100%);
}
.staff_bg {
  /* background: url(../images/bg_staff.jpg) no-repeat left top; */
  background-size: cover;
  position: relative;
  transform: skewY(8deg);
  -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(-82 / 1040 * 100%);
 }
  .staff .inner {
    padding-bottom: calc(118 / 1040 * 100%);
    margin: 0 auto;
  }

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

  .staff_box {
    width: calc(620 / 740 * 100%);
    margin: 0 auto;
    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; */
    padding-bottom: calc(90 / 1040 * 100%);
  }
  .staff_bg {
    background-size: auto;
  }
}

/* =====================================================================
*    cast
* =================================================================== */
.cast {
  position: relative;
  /* transform: skewY(-8deg); */
  transform-origin: left top;
  z-index: 5;
  background: #fff;
  overflow: hidden;
  margin-top: calc(-150 / 1600 * 100%);
  padding-top: calc(150 / 1600 * 100%);
}

.cast_bg {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: calc(750 / 750 * 100%);
  /* transform: skewY(8deg); */
  background: url(../images/bg_cast_pc.jpg) no-repeat center top;
  background-size: cover;
  margin-top: calc(-150 / 1600 * 100%);
  padding-top: calc(150 / 1600 * 100%);
}

.cast .inner {
  padding-bottom: calc(100 / 750 * 100%);
  /* transform: skewY(8deg); */
}
.cast .sec_ttl {
  width: calc(128 / 750 * 100%);
  margin: calc(98 / 750 * 100%) auto calc(70 / 750 * 100%);
  padding: 0;
}
.cast_box {
  width: calc(441 / 750 * 100%);
  margin: 0 auto;
}
.cast .inner::before {
  content: "";
  display: block;
  top: 0;
  right: 0;
  position: absolute;
  z-index: 1;
  width: calc(478 / 750 * 100%);
  padding-top: calc(330 / 750 * 100%);
  margin-right: calc(-143 / 750 * 100%);
  margin-top: calc(-315 / 750 * 100%);
  background: url(../images/bg_cast_r.png) no-repeat center top;
  background-size: auto 100%;
}
.cast .inner::after {
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: calc(266 / 750 * 100%);
  padding-top: calc(281 / 750 * 100%);
  margin-left: calc(-93 / 750 * 100%);
  margin-bottom: calc(-84 / 750 * 100%);
  background: url(../images/bg_cast_l.png) no-repeat center top;
  background-size: auto 100%;
}
@media screen and (min-width: 700px) {
  .cast {
    transform-origin: center top;
  }

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

  .cast_box {
    width: calc(313 / 740 * 100%);
    margin: 0 auto calc(80 / 740 * 100%);
    padding: 0;
  }
  .cast .inner::before {
    content: "";
    display: block;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    width: calc(567 / 1040 * 100%);
    padding-top: calc(430 / 1040 * 100%);
    margin-right: calc(82 / 1040 * 100%);
    margin-top: calc(102 / 1040 * 100%);
    background: url(../images/bg_cast_r.png) no-repeat center top;
    background-size: auto 100%;
}
.cast .inner::after {
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: calc(380 / 1040 * 100%);
  padding-top: calc(401 / 1040 * 100%);
  margin-left: calc(-216 / 1040 * 100%);
  margin-bottom: calc(263 / 1040 * 100%);
  background: url(../images/bg_cast_l.png) no-repeat center top;
  background-size: auto 100%;
}

}

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