/* common */
body {
    font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

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

#page section { margin-bottom: 9.375em;}

#page section:last-of-type { margin-bottom: 0;}

#page section h2 { 
    width: 53%;
    margin: 0 auto 3.125em auto;
}

#page section h2 img { width: 100%;}

.container {
    width: 1152px;
    margin: 0 auto;
    padding: 9.375em 0;
}

.ib { display: inline-block;}
/* common */


/* chohassou_top */
#chohassou_top {
    max-width: 1920px;
    /* width: 100%; */
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: url(../images/top_img_pc.jpg) no-repeat top center / 100%;
}

#chohassou_top div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 1.5625em;
}

#chohassou_top h1 { width: 75%;}

#chohassou_top p { width: 60%;}

#chohassou_top img { width: 100%;} 
/* chohassou_top */

/* intro */
#intro .movie {
    position: relative;
    width: 85%;
    aspect-ratio: 16 / 9;
    margin: 0 auto 9.375em auto;
    overflow: hidden;
 }

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

#intro p {
    font-size: 33px;
    font-weight: 900;
    line-height: 2;
    text-align: center;
}
/* intro */

/* cast */
#cast ul {
    width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3% 10%;
}

#cast li { 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#cast li img { width: 100%;}
/* cast */

/* episode */
#episode .ep_item {
    width: 100%;
    padding: 3.125em;
    border: solid 10px #e30202;
    border-radius: 50px;
    margin-bottom: 6.875em;
}

#episode .ep_item:last-of-type { margin-bottom: 0;}

#episode .ep_wrap {
    width: 100%;
    background-size: auto auto;
    background-color: rgba(227, 2, 2, 1);
    background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(205, 2, 2, 1) 10px, rgba(205, 2, 2, 1) 20px );
    border-radius: 50px;
    position: relative;
    border: solid 10px #fff;
    outline: solid 10px #e30202;
    padding: 2.5em;
    color: #fff;
    font-weight: 900;
}

#episode .ep_index {
    display: inline-block;
    padding: 0.1em 0.4em 0.2em;
    border-radius: 50px;
    font-size: 50px;
    color: #e30202;
    background-color: #fff;
}

#episode .makino h3 { 
    font-size: 115px;
    margin-bottom: 0.03em;
}

#episode .matsumoto h3 { 
    font-size: 140px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: -0.05em;
}

#episode .others h3 {
    font-size: 77px;
    line-height: 1.2;
    margin-bottom: 0.2em;
}

#episode .ep_intro { 
    font-size: 30px;
    line-height: 1.4;
}

#episode .ep_intro_wrap {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: right;
}

#episode .ep_intro_wrap div {
    position: absolute;
    width: 85%;
    left: 0;
    z-index: 1;
}

#episode .presentation { 
    position: absolute;
    bottom: 0;
}

#episode .makino .ep_intro_wrap { height: 320px;}

#episode .makino .ep_intro_wrap img { width: 425px;}

#episode .matsumoto .ep_intro_wrap { height: 350px;}

#episode .matsumoto .ep_intro_wrap img { width: 350px;}

#episode .mainimg, #episode .mainimg img,
#episode .ep_subimg, #episode .ep_subimg img { width: 100%;} 

#episode .mainimg { 
    margin-top: -0.1em;
    margin-bottom: 2.5em;
}

#episode .ep_subimg {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#episode .ep_subimg li { width: 50%;}

#episode .others .ep_intro_wrap div {
    position: static;
    width: 100%;
    margin-bottom: 0.5em;
}

#episode .ep03_detail li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#episode .ep03_detail li:nth-child(2) { 
    flex-direction: row-reverse;
    margin-top: 3em;
    margin-bottom: 3em;
}

#episode .ep03_detail li img { width: 52%;}

#episode .ep03_detail li div { 
    width: 45%;
    text-align: center;
}

#episode .ep03_detail li div p { 
    font-size: 29px;
    margin-bottom: 0.3em;
}

#episode .ep03_detail li div p:nth-of-type(2) {
    width: 100%;
    padding: 0.2em;
    color: #e30202;
    background-color: #fff;
    border-radius: 50px;
}

#episode .ep03_detail li:nth-child(odd) h4 { font-size: 80px;}

#episode .ep03_detail li:nth-child(even) h4 { font-size: 70px;}

#episode .makino .break { display: none;}
/* episode */



/* ------------------------------------------------- responsive ------------------------------------------------- */
@media (max-width: 1920px) {
    /* common */
    body { font-size: 16px;}
    /* common */

    /* intro */
    #intro p { font-size: 2.0625em;}
    /* intro */

    /* episode */
    #episode .ep_index { font-size: 3.125em;}

    #episode .makino h3 { font-size: 7.1875em;}

    #episode .matsumoto h3 { font-size: 8.75em;}

    #episode .others h3 { font-size: 4.8125em;}

    #episode .ep_intro { font-size: 1.875em;}

    #episode .ep03_detail li div p { font-size: 1.8125em;}

    #episode .ep03_detail li:nth-child(odd) h4 { font-size: 5em;}

    #episode .ep03_detail li:nth-child(even) h4 { font-size: 4.375em;}
    /* episode */
}

@media (max-width: 1300px){
    /* common */
    body { font-size: 14px;}

    .container { width: 910px;}
    /* common */

    /* episode */
    #episode .ep_intro_wrap div { width: 100%;}

    #episode .ep_index { font-size: 2.7em;}

    #episode .matsumoto h3 { font-size: 7.5em;}

    #episode .makino h3 { font-size: 7em;}

    #episode .others h3 { font-size: 4.4em;}

    #episode .ep03_detail li:nth-child(odd) h4 { font-size: 4.5em;}

    #episode .matsumoto .ep_intro_wrap img { width: 295px;}

    #episode .makino .ep_intro_wrap img { width: 370px;}

    #episode .matsumoto .ep_intro_wrap { height: 280px;}

    #episode .makino .ep_intro_wrap { height: 275px;}

    #episode .ep_item { padding: 2em;}
    /* episode */
}

@media (max-width: 1000px) {
    /* common */
    .container { width: 750px;}
    /* common */

    /* episode */
    #episode .ep_item {
        padding: 1.5em;
        border: solid 7px #e30202;
    }

    #episode .ep_wrap { 
        border: solid 7px #fff;
        outline: solid 7px #e30202;
        border-radius: 30px;
    }

    #episode .ep_intro { font-size: 1.5em;}

    #episode .ep_index { font-size: 2.3em;}

    #episode .matsumoto .ep_intro_wrap { height: 240px;}

    #episode .matsumoto .ep_intro_wrap img { width: 215px;}

    #episode .makino .ep_intro_wrap { height: 220px;}

    #episode .makino .ep_intro_wrap img { width: 290px;}

    #episode .makino h3 { font-size: 5.5em;}

    #episode .matsumoto h3 { font-size: 6.5em;}

    #episode .others h3 { font-size: 3.45em;}

    #episode .ep03_detail li div p { font-size: 1.3em;}

    #episode .ep03_detail li:nth-child(odd) h4 { font-size: 3.5em;}

    #episode .ep03_detail li:nth-child(even) h4 { font-size: 3.5em;}
    /* episode */

}

@media (max-width: 800px) {
    /* common */
    .container { width: 85%;}
    /* common */

    /* episode */
    #episode .ep_index {
        text-align: center;
        display: block;
    }

    #episode .makino .ep_index,
    #episode .matsumoto .ep_index { position: relative;}

    #episode .makino .ep_index { padding-right: 1.5em;}

    #episode .makino .ep_index::before {
        position: absolute;
        content: "";
        width: 35%;
        aspect-ratio: 542 / 461;
        background: url(../images/deco_makino.png) no-repeat center / 100%;
        bottom: 0;
        right: 3%;
    }

    #episode .matsumoto .ep_index::before {
        position: absolute;
        content: "";
        width: 29%;
        aspect-ratio: 388 / 415;
        background: url(../images/deco_matsumoto.png) no-repeat center / 100%;
        bottom: -3%;
        right: 4%;
    }

    #episode h3,
    #episode .ep_intro { text-align: center;}

    #episode .matsumoto .ep_intro_wrap img {
        width: 30%;
        right: 4%;
        bottom: 80%;
        z-index: 2;
    }

    #episode .makino .ep_intro_wrap img,
    #episode .matsumoto .ep_intro_wrap img { display: none;}

    #episode .ep_intro_wrap { 
        height: auto !important;
        margin-bottom: 1.5em;
    }

    #episode .ep_intro_wrap,
    #episode .ep_intro_wrap div { position: static;}

    #episode .others h3 { font-size: 3em;}

    #episode .ep03_detail li:nth-child(even) h4,
    #episode .ep03_detail li:nth-child(odd) h4 { font-size: 2.9em;}

    #episode .ep03_detail li div p { font-size: 1.2em;}
    /* episode */
}

@media (max-width: 700px) {
    /* common */
    .container { padding: 5em 0;}

    #page section { margin-bottom: 5em;}
    
    #page section h2 {
        width: 80%;
        margin: 0 auto 1.5em auto;
    }
    /* common */

    /* intro */
    #intro .movie { 
        width: 100%;
        margin-bottom: 5em;
    }

    #intro p { font-size: 4vw;}
    /* intro */

    /* cast */
    #cast ul { 
        width: 95%;
        gap: 3%;
    }
    /* cast */

    /* episode */
    #episode .ep_index { font-size: 4.5vw;}

    #episode .makino h3 { font-size: 11vw;}

    #episode .matsumoto h3 { font-size: 13vw;}

    #episode .others h3 { 
        font-size: 6vw;
        margin-bottom: 0;
    }

    #episode .ep_intro { font-size: 3.5vw;}

    #episode .ep_wrap { padding: 2em;}

    #episode .mainimg { margin-bottom: 1.5em;}

        
    #episode .ep03_detail li {
        padding-bottom: 1.5em;
        border-bottom: dotted 5px #fff;
    }

    #episode .ep03_detail li:first-child { 
        padding-top: 2em;
        border-top: dotted 5px #fff;
    }

    #episode .ep03_detail li:nth-child(2) {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    #episode .ep03_detail li img,
    #episode .ep03_detail li div { width: 100%;}

    #episode .ep03_detail li img { margin-bottom: 0.5em;}

    #episode .ep03_detail li div p { font-size: 3.5vw;}

    #episode .ep03_detail li:nth-child(odd) h4 { font-size: 10vw;}

    #episode .ep03_detail li:nth-child(even) h4 { font-size: 9vw;}
    /* episode */
}

@media (max-width: 500px) {
    /* common */
    #page::before { background-image: url(../images/back_sp.jpg);}

    .container { width: 90%;}
    /* common */

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

    #chohassou_top h1 { width: 99%;}

    #chohassou_top p { width: 90%;}
    /* chohassou_top */

    /* intro */
    #intro p { font-size: 4.3vw;}
    /* intro */

    /* episode */
    #episode .ep_wrap { 
        padding: 1.5em;
        border: solid 5px #fff;
        outline: solid 5px #e30202;
        border-radius: 20px;
    }

    #episode .ep_item {
        padding: 1em;
        border: solid 5px #e30202;
        border-radius: 30px;
        margin-bottom: 5em;
    }

    #episode .ep_intro_wrap div { margin-bottom: 0.5em;}

    #episode .ep_intro { font-size: 4vw;}

    #episode .ep_index { font-size: 5vw;}

    #episode .makino .ep_index::before {
        width: 45%;
        right: -5%;
    }

    #episode .matsumoto .ep_index::before {
        width: 39%;
        right: -6%;
    }

    #episode .others h3 { font-size: 6.5vw;}

    #episode .ep_intro_wrap { margin-bottom: 0;}

    #episode .ep03_detail li div p { font-size: 4.5vw;}

    #episode .ep03_detail li:nth-child(odd) h4,
    #episode .ep03_detail li:nth-child(even) h4 { font-size: 12vw;}

    #episode .others .ep_intro_wrap div { margin-bottom: 1.5em;}

    #episode .mainimg { margin-bottom: 1em;}
    /* episode */
}