/* common */
body {
    font-family: "Noto Sans JP",'貂ｸ繧ｴ繧ｷ繝�け','繝偵Λ繧ｮ繝手ｧ偵ざ繧ｷ繝�け','MS繧ｴ繧ｷ繝�け','繝｡繧､繝ｪ繧ｪ',sans-serif;
    font-weight: 700;
}

picture { display: block;}

.sp_only { display: none;}

.wrapper {
    max-width: 1152px;
    margin: 0 auto;
}

.hd {
    width: 100%;
    text-align: center;
    margin-bottom: 2%;
}

.hd img {
    width: 50%;
    margin-bottom: 1.5%;
}

.hd span {
    font-size: 30px;
    display: block;
}

main::before { 
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/main_bk_pc.jpg);
    background-size: 100%;
    background-repeat: repeat-y;
    z-index: -2;
}

#page section { margin-bottom: 200px;}

#page_top {
    position: fixed;
    aspect-ratio: 81 / 128;
    width: 162px;
    background: url(../images/page_top.png) no-repeat center / 100%;
    right: 2%;
    bottom: 3%;
    z-index: 10;
}
/* common */

/* top */
#top .top_img {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 384 / 166;
    background: url(../images/top_back_pc.jpg) no-repeat top center / 100%;
    position: relative;
}

#top .top_img h1 {
    position: absolute;
    width: 45%;
    top: 3%;
    left: calc(50% - 22.5%);
    
}

#top .top_img h1 img { width: 100%;}

#top .time {
    width: 100%;
    background-size: auto auto;
    background-color: rgba(0, 0, 0, 1);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(26, 26, 26, 1) 15px, rgba(26, 26, 26, 1) 30px );
    padding: 20px 0;
}

#top .time p {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#top .time p img { width: 45%;}
/* top */

/* present */
#present {
    width: 100%;
    background: url(../images/present_bk.jpg) repeat-y fixed top center / 100%;
    padding: 100px 0;
    margin-bottom: 0 !important;
}

#present .present_wrapper {
    max-width: 1344px;
    margin: 0 auto;
}

#present .present_detail {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#present .present_img,
#present .present_img_end { 
    width: 45%;
    position: relative;
}

#present .present_img img,
#present .present_img_end img { width: 100%;}

#present .present_img::before {
    position: absolute;
    content: "";
    display: block;
    width: 47%;
    aspect-ratio: 306 / 143;
    background: url(../images/present_fukidashi.png) no-repeat center / 100%;
    top: -14%;
    left: -3%;
}

#present .present_txt { width: 50%;}

#present .hd img { margin-bottom: 0;}

#present h3 { 
    width: 100%;
    text-align: center;
    margin-bottom: 2.5%;
}

#present h3 img { width: 100%;}

#present p { text-align: center;}

#present .sign_name {
    position: relative;
    width: 100%;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 2%;
}

#present .present_desc,
#present .present_limit { font-size: 25px;}
 
#present .present_desc {
    line-height: 1.7;
    margin-bottom: 2.5%;
}

#present .present_desc span { color: #e60000;}

#present .present_limit {
    font-size: 25px;
    line-height: 2.5;
    border: solid 3px #000;
    margin-bottom: 2.5%;
}

#present .present_caption {
    font-size: 18px;
    margin-bottom: 2.5%;
}

#present a {
    display: block;
    width: 100%;
    font-size: 30px;
    text-align: center;
    line-height: 2.3;
    color: #fff;
    background-color: #e60000;
    border: solid 3px #e60000;
    transition: all .2s;
}

#present a:hover {
    color: #e60000;
    background-color: #fff;
}

#present .end {
    font-size: 30px;
    line-height: 2.5;
    color: #fff;
    background-color: #000;
}
/* present */

/* intro */
#intro {
    padding-top: 100px !important;
    max-width: 1920px;
    height: 1601px;
    margin: 0 auto;
    background: url(../images/intro_bk_pc.png) no-repeat top center / 100%;
    margin-bottom: 100px !important;
} 

#intro .movie {
    position: relative;
    width: 90%;
    aspect-ratio: 16/9;
    margin: 0 auto 3% auto;
    overflow: hidden;
 }

 #intro .tvo-video {
    position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
}

#intro p {
    line-height: 1.7;
    text-align: center;
    color: #fff;
    text-shadow: 3px 3px 5px #082600;
    letter-spacing: 0.03em;
}

#intro p span { 
    color: #fff600;
    font-size: 128%;
}

#intro .intro_txt {
    font-size: 35px;
    font-weight: 900;
    margin-bottom: 1%;
}

#intro .intro_caution {
    font-size: 27px;
    font-weight: 700;
}
/* intro */

/* cast */
#cast .cast_list {
    width: 90%;
    margin: 0 auto 15%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6em 15em;
}

#cast .cast_list li {
    display: flex;
    align-items: end;
}

#cast .announcer {
    width: 33%;
    margin: 0 auto;
}

#cast .cast_list li img, #cast .announcer img { width: 100%;}
/* cast */

/* interview */
#interview h2, #interview h2 img { width: 100%;}

#interview h2 { margin-bottom: 1%;}

#interview .interview_desc {
    width: 100%;
    text-align: center;
    font-size: 42px;
    margin-bottom: 5%;
}

#interview section {
    width: 95%;
    margin: 0 auto 18% !important;
    background-color: rgba(000, 000, 000, .8);
    padding: 1.8em;
    border: solid 2px #fffd3f;
    outline: solid 1.8em rgba(000, 000, 000, .8);
    display: flex;
    flex-direction: column-reverse;
}

#interview section h3 {
    width: 100%;
    text-align: center;
}

#interview section:nth-of-type(1) h3 img { width: 67%;}

#interview section:nth-of-type(2) h3 img,
#interview section:nth-of-type(3) h3 img { width: 75%;}

#interview .interview_mainimg { 
    width: 100%;
    margin-bottom: 3%;
}

#interview .interview_others {
    max-width: 1344px;
    margin: 0 auto;
}

#interview .interview_others img { width: 100%;}
/* interview */

/* youtube */
#youtube { margin-bottom: 100px !important;}

#youtube h2 {
    width: 100%;
    margin: 0 auto 1.5%;
    text-align: center;
}

#youtube h2 img { width: 90%;}

#youtube p {
    width: 100%;
    text-align: center;
    font-size: 35px;
    line-height: 1.5;
    margin-bottom: 3%;
}

#youtube .movie {
    position: relative;
    width: 95%;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 0 auto;
 }

 #youtube .tvo-video {
    position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
}
/* youtube */


/* ================================ responsive ================================ */

@media (max-width: 1920px) {
    /* common */
    #page section { margin-bottom: 10%;}

    .wrapper { width: 60%;}

    .hd span { font-size: 1.8vw;}

    #page_top { width: 7%;}
    /* common */

    /* top */
    #top .time { padding: 1% 0;}
    /* top */

    /* present */
    #present { padding: 5.2% 0;}

    #present .present_desc, #present .present_limit { font-size: 1.4vw;}

    #present .present_caption { font-size: 1vw;}

    #present a, #present .end { font-size: 1.5vw;}

    #present .sign_name { font-size: 0.95vw;}
    /* present */

    /* intro */
    #intro {
        padding-top: 5.2% !important;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1601;
        margin-bottom: 5.2% !important;
    }

    #intro .intro_txt { font-size: 1.8vw;}

    #intro .intro_caution { font-size: 1.4vw;}
    /* intro */

    /* cast */
    #cast .cast_list { gap: 10% 20%;}
    /* cast */

    /* interview */
    #interview .interview_desc { font-size: 2.1vw;}

    #interview .interview_others { width: 70%;}
    /* interview */

    /* youtube */
    #youtube { margin-bottom: 5.2% !important;}

    #youtube p { font-size: 1.8vw;}
    /* youtube */
}

@media (max-width: 1366px) {
    /* commmon */
    #present .present_wrapper { width: 90%;}
    /* commmon */
}

@media (max-width: 1080px) {
    /* common */
    .wrapper { width: 75%;}

    .hd span { font-size: 2vw;}
    /* common */

    /* present */
    #present .present_desc, #present .present_limit { font-size: 1.8vw;}

    #present a, #present .end { 
        font-size: 2vw;
        line-height: 2.5;
    }

    #present h3 img { width: 100%;}

    #present .present_caption { font-size: 1.4vw;}

    #present .sign_name { font-size: 1.2vw;}
    /* present */

    /* intro */
    #intro { 
        background-size: 110%;
        background-position: right 20%;
        aspect-ratio: 1920 / 1750;
    }

    #intro .intro_txt { font-size: 2vw;}

    #intro .intro_caution { font-size: 1.6vw;}
    /* intro */

    /* interview */
    #interview .interview_desc { 
        font-size: 2.75vw;
        margin-bottom: 7%;
    }

    #interview section:nth-of-type(1) h3 img { width: 80%;}

    #interview section:nth-of-type(2) h3 img,
    #interview section:nth-of-type(3) h3 img { width: 85%;}
    /* interview */

    /* youtube */
    #youtube p { font-size: 2.5vw;}
    /* youtube */
}

@media (max-width: 768px) {
    /* top */
    #top .time { padding-top: 1.5%;}

    #top .time p img { width: 60%;}
    /* top */

    /* interview */
    #interview section {
        padding: 1em;
        outline: solid 1em rgba(000, 000, 000, .8);
    }
    /* interview */
}

@media (max-width: 450px) {
    /* common */
    .sp_only { display: block;}

    .wrapper { width: 90%;}

    .hd { margin-bottom: 5%;}

    .hd img { width: 100%;}

    .hd span { font-size: 4.5vw;}

    #page section { margin-bottom: 20%;}

    #page_top { width: 15%;}
    /* common */

    /* top */
    #top .top_img {
        aspect-ratio: 642 / 1039;
        background: url(../images/top_back_sp.jpg) no-repeat top center / 100%;
    }

    #top .top_img h1 {
        width: 100%;
        top: 25%;
        left: calc(50% - 50%);
    }
    /* top */

    /* present */
    #present { 
        padding: 7% 0;
        background: url(../images/present_bk_sp.jpg) repeat-y top center / 100%;
    }

    #present .present_detail {
        flex-direction: column;
        align-items: center;
    }

    #present .present_img,
    #present .present_img_end,
    #present .present_txt { width: 100%;}

    #present .present_img { 
        margin-top: 10%;
        margin-bottom: 5%;
    }

    #present .present_img_end { margin-bottom: 5%;}

    #present .present_img::before { width: 52%;}

    #present .present_desc, #present .present_limit { font-size: 4.5vw;}



    #present .present_limit { margin-bottom: 4%;}

    #present .present_caption { 
        font-size: 3.1vw;
        margin-bottom: 4%;
    }

    #present a, #present .end { font-size: 5.45vw;}

    #present .sign_name { font-size: 3.5vw;}
    /* present */

    /* intro */
    #intro { 
        padding-top: 7% !important;
        aspect-ratio: 321 / 600;
        background: url(../images/intro_bk_sp.png) no-repeat bottom center / 100%;
    }

    #intro .movie {
        width: 100%;
        margin: 0 auto 5% auto;
    }
    
    #intro .intro_txt { font-size: 4.1vw;}

    #intro .intro_caution { font-size: 3.1vw;}
    /* intro */

    /* cast */
    #cast .cast_list {
        width: 75%;
        margin: 0 auto 57% 8%;
        grid-template-columns: 1fr;
        gap: 4%;
    }

    #cast .announcer {
        width: 60%;
        margin: 0 auto 0 17%;
    }
    /* cast */

    /* interview */
    #interview h2 { margin-bottom: 3%;}

    #interview .interview_desc {
        font-size: 5vw;
        margin-bottom: 8%;
        line-height: 1.5;
    }

    #interview section {
        padding: 0.8em;
        outline: solid 0.8em rgba(000, 000, 000, .8);
    }

    #interview section h3 img { width: 100% !important;}

    #interview .interview_others { width: 80%;}
    /* interview */

    /* youtube */
    #youtube { margin-bottom: 7% !important;}

    #youtube h2 img { width: 100%;}

    #youtube p { font-size: 4.9vw;}

    #youtube .movie { width: 100%;}
    /* youtube */
}