@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description : トップページ
===================================================================== */


/* =====================================================================
    mv
======================================================================*/

.wrapper {
    position: relative;
}

.wrapper::before {
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 4%;
    background-image: url(../images/bg_line.png);
    background-size: 100% auto;
    background-position: right;
    background-repeat: repeat-y;
    z-index: 10;
}


/* #cast_staff::after {
    content: "";
    height: 105%;
    right: 0;
    position: absolute;
    top: -60px;
    width: 4%;
    background-image: url(../images/bg_line.png);
    background-size: 100% auto;
    background-position: right;
    background-repeat: repeat-y;
    z-index: 10;
} */

@media screen and (min-width: 768px) {
    .wrapper::before {
        content: "";
        height: 100%;
        right: 0;
        position: absolute;
        top: 0;
        width: 2%;
        background-image: url(../images/bg_line.png);
        background-size: 100% auto;
        background-position: right;
        background-repeat: repeat-y;
        z-index: 10;
    }
    /* #cast_staff::after {
        content: "";
        height: 105%;
        right: 0;
        position: absolute;
        top: -60px;
        width: 2%;
        background-image: url(../images/bg_line.png);
        background-size: 100% auto;
        background-position: right;
        background-repeat: repeat-y;
        z-index: 10;
    } */
}

#header {
    position: relative;
    z-index: 3;
    overflow: hidden;
}


/* #header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -45px;
  left: 0;
  right: 0;
  background: url(../images/bg_pattern02.png) repeat;
  background-size: 100%;
  transform: skewY(-13.5deg) translateY(-90px);
  z-index: -1;
} */

#header .mv_box {
    position: relative;
}

#header .mv_box .mv_onair {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(1051 / 750 * 100%);
    width: calc(581 / 750 * 100%);
}

#header .mv_box .btn_official {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: calc(95 / 750 * 100%);
    transform: translateX(-50%);
    width: calc(696 / 750 * 100%);
}

@media screen and (min-width: 768px) {
    #header {
        position: relative;
        z-index: 2;
        background-image: url(../images/bg_header.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: calc(300 / 1800 * 100%);
    }
    #header::before {
        display: none;
    }
    #header .mv_box {
        width: calc(709 / 740 * 100%);
        margin: 0 auto calc(50 / 740 * 100%) 0;
        padding-bottom: calc(266 / 740 * 100%);
    }
    #header .mv_box .mv_onair {
        top: auto;
        bottom: 0;
        padding: 0;
        width: calc(541 / 709 * 100%);
    }
    #header .mv_box .btn_official {
        position: absolute;
        bottom: 0;
        left: auto;
        right: 0;
        transform: translateX(0);
        margin: 0 calc(-16 / 709 * 100%) calc(255 / 709 * 100%) 0;
        width: calc(281 / 709 * 100%);
    }
    #header .mv_box .btn_official a {
        position: relative;
    }
    #header .mv_box .btn_official a:hover::before {
        opacity: 1;
    }
    #header .mv_box .btn_official a::before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/btn_official_h.png) no-repeat center/contain;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        opacity: 0;
    }
}

@media screen and (min-width: 767px) and (max-width: 850px) {
    #header {
        padding-bottom: 60rem;
    }
}

@media screen and (min-width: 850px) and (max-width: 1040px) {
    #header {
        padding-bottom: 40rem;
    }
}


/* =====================================================================
    intro
======================================================================*/

#intro {
    position: relative;
    z-index: 2;
}

#intro::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: calc(-250 / 1800 * 100%);
    background-color: #cb2624;
    transform: skewY(-13.5deg);
    z-index: -1;
}

#intro::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 calc(-80 / 750 * 100%) calc(65 / 750 * 100%);
    width: calc(174 / 750 * 100%);
    padding-top: calc(174 / 750 * 100%);
    background: url(../images/ball.png) no-repeat top left;
    background-size: contain;
    mix-blend-mode: screen;
    z-index: 10;
}

#intro .inner {
    position: relative;
    width: 100%;
    max-width: 1400px !important;
}

#intro .sec_ttl {
    padding-top: calc(212 / 750 * 100%);
}

#intro .intro_box {
    position: relative;
    width: calc(700 / 750 * 100%);
    margin: 0 auto;
    padding-bottom: calc(190 / 750 * 100%);
    z-index: 1;
}

.intro_txt {
    font-size: 2.6rem;
    color: #ffffff;
    line-height: 2.6;
}

.intro_txt strong {
    font-size: 1.4em;
}

@media screen and (min-width: 768px) {
    #intro {
        position: relative;
        margin-top: calc(-200 / 1800 * 100%);
        height: 0;
    }
    #intro::after {
        display: none;
    }
    #intro .inner {
        padding-bottom: calc(42 / 1800 * 100%);
    }
    .intro_txt {
        font-size: clamp(1.5rem, 1.3vw, 2.6rem);
        color: #ffffff;
        line-height: 2;
        margin-left: 2em;
    }
    #intro::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: calc(-279 / 1800 * 100%);
        background: url(../images/chara.png) no-repeat bottom 60% right 10%;
        background-size: 50% auto;
        height: 0;
        padding-top: calc(1260 / 1800 * 100%);
        background-color: #cb2624;
        transform: none;
        clip-path: polygon(0 34%, 100% 0, 100% 66%, 0 100%);
        z-index: -1;
    }
    /* #intro::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: contain;
    width: calc(933 / 1800 * 100%);
    height: 0;
    padding-top: calc(844 / 1800 * 100%);
    margin: 0 0 0 auto;
  } */
    #intro .inner::before {
        bottom: -264rem;
        right: -315rem;
        width: 430rem;
        height: 330rem;
    }
    #intro .inner::after {
        bottom: -201rem;
        left: -186rem;
        width: 300rem;
        height: 230rem;
    }
    #intro .sec_ttl {
        padding-top: calc(121 / 740 * 100%);
        width: calc(778 / 1040* 100%);
        max-width: 778px;
        margin-left: calc(80 / 740 * 100%);
        margin-bottom: calc(50 / 740 * 100%);
    }
    #intro .intro_box {
        width: calc(659 / 740 * 100%);
        padding-bottom: calc(90 / 740 * 100%);
        margin-left: calc(80 / 740 * 100%);
    }
}


/* =====================================================================
    cast & staff
======================================================================*/

#cast_staff {
    position: relative;
    margin-top: -10rem;
    background: url(../images/bg_pattern.jpg) repeat;
    background-size: cover;
}

#cast_staff::before {
    background: url(../images/bg_pattern.jpg) repeat;
    background-size: 100%;
    padding-top: calc(1000 / 750 * 100%);
}

#cast_staff>section {
    transform: skewY(-13.5deg);
}

#cast_staff .inner {
    transform: skewY(13.5deg);
}


/* #cast{
    padding-bottom: calc(240 / 750 * 100%);
} */

#cast_staff ul {
    font-size: 4rem;
    color: #ffffff;
    line-height: 1.8;
}

#cast_staff li {
    text-align: center;
    padding-bottom: 1.5em;
}

#cast_staff li span {
    font-size: 0.6em;
}

#cast_staff li .part {
    font-size: 0.7em;
}

@media screen and (min-width: 768px) {
    #cast_staff {
        margin-top: calc(550 / 1800 * 100%);
        padding-top: calc(400 / 1800 * 100%);
    }
    #cast_staff::before {
        background-size: 11rem auto;
    }
    #cast_staff ul {
        font-size: 2.8rem;
        color: #ffffff;
        line-height: 1.8;
    }
    #cast_staff li {
        padding-bottom: 2.5em;
    }
}


/* =====================================================================
    cast
======================================================================*/

#cast {
    position: relative;
    padding: 36rem 0 30rem;
}

#cast::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 39rem;
    width: 100%;
    height: 76%;
    /* padding-top: calc(1670 / 750 * 100%); */
    background-color: #436093;
    z-index: 2;
}

#cast .sec_ttl {
    width: calc(284 / 670 * 100%);
    margin-bottom: 12rem;
}

#cast ul {
    display: flex;
    flex-wrap: wrap;
}

#cast li {
    width: 50%;
}

.cast_box {
    position: relative;
    margin: 0 auto;
    width: calc(670 / 750 * 100%);
}

.cast_box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 0 calc(-210 / 670 * 100%) auto;
    width: calc(384 / 670 * 100%);
    padding-top: calc(249 / 670 * 100%);
    background: url(../images/bottle.png) no-repeat bottom right;
    background-size: contain;
    mix-blend-mode: screen;
    z-index: 10;
}

@media screen and (min-width: 768px) {
    #cast {
        padding: 10rem 0 30rem;
    }
    #cast::before {
        right: auto;
        width: 75%;
        height: 80%;
        margin-top: 9.7rem;
    }
    #cast::after {
        width: calc(490 / 1800 * 100%);
        margin: 0 calc(280 / 1800 * 100%) calc(120 / 1800 * 100%) auto;
    }
    #cast .sec_ttl {
        margin: 0 auto calc(90 / 740 * 100%);
        width: calc(325 / 740 * 100%);
    }
    .cast_box {
        width: 100%;
    }
    .cast_box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        margin: calc(20 / 740 * 100%) 0 0 calc(0 / 740 * 100%);
        width: calc(168 / 740 * 100%);
        padding-top: calc(168 / 740 * 100%);
        background: url(../images/ball.png) no-repeat top left;
        background-size: contain;
        mix-blend-mode: screen;
        z-index: 10;
    }
    .cast_box::after {
        margin: 0 calc(-300 / 740 * 100%) calc(-100 / 740 * 100%) auto;
        width: calc(480 / 740 * 100%);
        padding-top: calc(311 / 740 * 100%);
    }
}

@media screen and (min-width: 1040px) {
    .cast_box::after {
        margin: 0 calc(-450 / 740 * 100%) calc(-100 / 740 * 100%) auto;
    }
}

@media screen and (min-width: 1200px) {
    .cast_box::before {
        margin: calc(120 / 740 * 100%) 0 0 calc(-200 / 740 * 100%);
    }
}


/* =====================================================================
    staff
======================================================================*/

#staff {
    position: relative;
    padding: 0 0 46rem;
}

#staff::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 85%;
    background-color: #163264;
    margin: 7rem 0 0 auto;
    z-index: 2;
}

#staff .sec_ttl {
    margin: 0 auto calc(120 / 750 * 100%);
    width: calc(450 / 750 * 100%);
}

.staff_box {
    position: relative;
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
}

.staff_box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/shoes.png) no-repeat bottom left;
    background-size: contain;
    width: calc(288 / 670 * 100%);
    padding-top: calc(234 / 750 * 100%);
    margin: 0 0 calc(-265 / 670 * 100%) calc(-50 / 670 * 100%);
    mix-blend-mode: screen;
    z-index: 10;
}

.staff_text {
    line-height: 1.2;
}

@media screen and (min-width: 768px) {
    #staff {
        padding-bottom: 40rem;
    }
    #staff::before {
        left: auto;
        margin-top: -3rem;
        width: 100%;
        height: 88%;
        opacity: 0.85;
    }
    #staff::after {
        width: calc(450 / 1800 * 100%);
        margin: 0 calc(330 / 1800 * 100%) 0 auto;
    }
    #staff .sec_ttl {
        width: calc(379 / 740 * 100%);
    }
    .staff_box {
        width: 100%;
    }
    .staff_box::after {
        width: calc(361 / 740 * 100%);
        padding-top: calc(292 / 740 * 100%);
        margin: 0 0 100% calc(-150 / 740 * 100%);
    }
    .staff_box::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        background: url(../images/ball.png) no-repeat bottom left;
        background-size: contain;
        z-index: 10;
        width: calc(174 / 740 * 100%);
        padding-top: calc(174 / 740 * 100%);
        margin-bottom: calc(-80 / 740 * 100%);
        margin-right: calc(-300 / 740 * 100%);
        mix-blend-mode: screen;
    }
}

@media screen and (min-width: 1040px) {
    #staff::before {
        width: 85%;
        left: auto;
    }
}