body {
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#page { overflow: hidden;}

.wrapper {
    max-width: 1344px;
    width: 70%;
    margin: 0 auto;
}

.sp_only { display: none;}

#family_buyuden_top {
    width: 100%;
    padding-top: 42.8%;
    background: url(../images/familybuyuden_top_img_pc.jpg) no-repeat top center / 100%;
    position: relative;
}

#family_buyuden_top h1, #family_buyuden_top div { 
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
}

#family_buyuden_top h1 {
    width: 100%;
    height: 100%;
    top: 0;
    padding-bottom: 5%;
}

#family_buyuden_top h1 img { width: 25%;}

#family_buyuden_top div {
    width: 100%;
    height: 15%;
    bottom: 0;
    background-color: #f00000;
    border-bottom: solid .6em #9b0000;
}
 
#family_buyuden_top div picture {
    display: block;
    width: 54%;    
    text-align: center;
    padding: 3%;
}

#family_buyuden_top div picture img { max-width: 100%;}

main {
    background: url(../images/main_back.jpg) repeat-y fixed top center / 100%;
    padding: 5% 0;
}

#tver {
    text-align: center;
    width: 100%;
}

#tver a { 
    display: block;
    margin: 0 auto;
}

#tver img, #tver a { width: 55%;}

#tver a img { width: 100%;}

#tver a:hover { opacity: .7;}

#tver, #concept, #cast, #movie_wrap { margin-bottom: 8%;}

#movie_wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
 }

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

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

#page section h2 {
    width: 100%;
    text-align: center;
}

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

#concept picture { 
    display: block;
    padding: 3% 0 3.5%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, 
    rgba(255,255,255,.8) 10%, rgba(255,255,255,.8) 90%, rgba(255,255,255,0) 100%);
    width: 75%;
    margin: -2% auto 0 auto;
}

#concept picture img { width: 100%;}

#cast h2 { margin-bottom: 4%;}

#cast ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#cast ul li:first-child {
    width: 100%;
    margin-bottom: -2%;
    text-align: center;
}

#cast ul li:nth-child(1) img { width: 38%;}

#cast ul li:nth-child(2),
#cast ul li:nth-child(3) { width: 30%;}

#cast ul li:nth-child(2) img,
#cast ul li:nth-child(3) img { max-width: 100%;}

#cast ul li:nth-child(2) { margin-right: 20%;}

#episode { 
    margin-top: 18%;
    margin-bottom: 18%;
}

#episode .episode_wrap {
    width: 100%;
    position: relative;
    padding: 0 8% 8% 8%;
    background: url(../images/deco_middle_pc.png) repeat-y top center / 100%;
}

#episode .episode_wrap::before,
#episode .episode_wrap::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 10.5%;
    left: 0;
    right: 0;
    position: absolute;
} 

#episode .episode_wrap::before {
    background: url(../images/deco_top_pc.png) no-repeat top / 99.85%;
    top: -1.5%;
}

#episode .episode_wrap::after {
    background: url(../images/deco_bottom_pc.png) no-repeat top / 99.85%;
    bottom: -1.6%;
}

#episode h2 { position: sticky;}

#episode .episode_wrap picture {
    display: block;
    width: 90%;
    margin: 0 auto 5% auto;
}

#episode .episode_wrap picture img { width: 100%;}

#episode h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 3%;
    font-family: "kozuka-mincho-pro", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2.7vw;
    line-height: 1.2;
}

#episode h3 span:first-of-type {
    display: block;
    width: 100%;
    margin-bottom: 1%;
}

#episode h3 span:first-of-type img { width: 30%;}

#episode .case { margin-bottom: 8%;}

#episode .main_img {
    width: 100%;
    position: relative;
}

#episode .main_img img:nth-of-type(1) { width: 100%;}

#episode .main_img img:nth-of-type(2),
#episode .main_img img:nth-of-type(3),
#episode .main_img img:nth-of-type(4) { position: absolute;}

#episode .main_img img:nth-of-type(2) {
    top: -7%;
    left: -15%;
    width: 28%;
}

#episode .case07 img:nth-of-type(2) {
    top: 30% !important;
    left: -15% !important;
    width: 35% !important;
    transform: rotate(-35deg);
}

#episode .main_img img:nth-of-type(3) {
    bottom: -10%;
    right: -15%;
    width: 28%;
}

#episode .right02 {
    right: -20%;
    top: -10%;
    width: 30%;
}

#episode ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 2%;
}

#episode ul li { width: 34%;}

#episode ul li img { width: 100%;}

#episode .case p {
    text-align: center;
    font-size: 1.3vw;
    line-height: 2;
    margin-top: 3%;
    margin-bottom: 3%;
}

#episode .case04 p { margin-top: 2%;}

#episode .case a {
    display: block;
    width: 85%;
    margin: 0 auto;
    padding-top: 12.21%;
    background: url(../images/bnr_comic_before_pc.png) no-repeat center / 100%;
}

#episode .case a:hover { background: url(../images/bnr_comic_before_pc02.png) no-repeat center / 100%;}

#episode hr {
    width: 33%;
    padding-top: 2.5%;
    margin: 0 auto 8% auto;
    background: url(../images/star.png) no-repeat center / 100%;
    border: none;
}

#episode .other_case p { 
    font-size: 2vw;
    font-weight: 700;
    width: 100%;
}

#episode .other_case p:first-of-type {
    text-align: center;
    margin-bottom: 3%;
    clear: both;
}

#episode .other_case p:last-of-type { text-align: end;}

#episode .other_case ul { flex-wrap: wrap;}

#episode .other_case ul li:first-child,
#episode .other_case ul li:nth-child(2) { width: 50%;}

#episode .other_case ul li:nth-child(2) { margin-top: 7%;}

#episode .other_case ul li:last-child { 
    width: 45%;
    margin-top: -2%;
    margin-left: 7%;
}

#episode .other_case ul li img { width: 100%;}

#last { 
    text-align: center;
    width: 100%;
    margin-bottom: 10%;
}

#last picture {
    display: block;
    width: 90%;
    margin: 0 auto;
}

#last picture img { width: 100%;}

#archives h2, #recommend h2 {
    font-size: 2vw;
    font-weight: 700;
    position: relative;
    margin-bottom: 3%;
}

#archives h2::before,
#archives h2::after,
#recommend h2::before,
#recommend h2::after {
    content: "";
    display: block;
    position: absolute;
    width: 27%;
    padding-top: 2%;
    background: url(../images/star.png) no-repeat center / 100%;
    top: 25%;
}

#archives h2::before,
#recommend h2::before { left: 12%;}

#archives h2::after,
#recommend h2::after { right: 12%;}

#archives ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#archives ul li {
    width: 22%;
    margin-right: 3%;
}

#archives ul li a {
    display: block;
    width: 100%;
}

#archives ul li:hover { opacity: .7;}

#archives ul li:nth-child(4n) { margin-right: 0;}

#archives ul li img { width: 100%;}

#recommend { margin-bottom: 10%;}

#recommend p {
    width: 60%;
    margin: 0 auto;
}

#recommend p a:hover { opacity: .7;}

#recommend p a,
#recommend p img { width: 100%;}

#page-top {
    position: fixed;
    bottom: 3%;
    right: 1.5%;
    width: 5.5%;
    height: auto;
    z-index: 50;
 }
 
 #page-top img { max-width: 100%;}

 /* -------------------- responsive -------------------- */

 @media (max-width: 767px) {

    .wrapper { width: 90%;}

    .sp_only { display: block;}

    #page-top {
        right: 5%;
        width: 13%;
    }

     #family_buyuden_top {
        padding-top: 166%;
        background: url(../images/familybuyuden_top_img_sp.jpg) no-repeat top center / 100%;
     }

     #family_buyuden_top div { height: 18%;}

     #family_buyuden_top div picture { width: 80%;}

     #family_buyuden_top h1 img { width: 55%;}

     #family_buyuden_top h1 {
        align-items: flex-start;
        padding-top: 5%;
     }

     main { padding: 15% 0;}

     #movie_wrap, #tver img, #tver a { width: 100%;}

     #tver, #concept, #cast, #movie_wrap { margin-bottom: 17%;}

     #concept picture {
        display: block;
        padding: 8% 0 6%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 5%, rgba(255,255,255,.8) 95%, rgba(255,255,255,0) 100%);
        width: 100%;
        text-align: center;
        margin-top: -5%;
    }

    #concept picture img { width: 85%;}

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

    #cast h2 { margin-bottom: 6%;}

    #cast ul {
        flex-direction: column;
        align-items: center;
    }

    #cast ul li:nth-child(2) { margin-right: 0;}

    #cast ul li:nth-child(1) img { width: 75%;}

    #cast ul li:nth-child(2), #cast ul li:nth-child(3) { 
        width: 60%;
        text-align: center;
    }

    #cast ul li:nth-child(1), #cast ul li:nth-child(2) { margin-bottom: 8%;}
    
    #episode {
        margin-top: 28%;
        margin-bottom: 28%;
    }

    #episode .episode_wrap::before, #episode .episode_wrap::after { padding-top: 20%;}

    #episode .episode_wrap::before { background: url(../images/deco_top_sp.png) no-repeat top / 99.55%;}

    #episode .episode_wrap::after { 
        background: url(../images/deco_bottom_sp.png) no-repeat top / 99.55%;
        bottom: -2.5%;
    }

    #episode .episode_wrap {
        background: url(../images/deco_middle_sp.png) repeat-y top center / 100%;
        padding: 0 8% 8% 8%;
    }

    #episode .episode_wrap picture { width: 100%;}

    #episode .episode_wrap picture img { margin-top: -10%;}
    
    #episode h3 span:first-of-type img { width: 60%;}

    #episode h3 {
        font-size: 6vw;
        line-height: 1.25;
        margin-bottom: 4%;
    }

    #episode h3 span:first-of-type { margin-bottom: 3%;}

    #episode .case { margin-bottom: 15%;}

    #episode .case p { font-size: 3vw;}

    #episode ul { margin-bottom: 3%;}

    #episode .case a {
        width: 100%;
        padding-top: 18.4%;
        background: url(../images/bnr_comic_before_sp.png) no-repeat center / 100%;
    }

    #episode .case a:hover { background: url(../images/bnr_comic_before_sp02.png) no-repeat center / 100%;}

    #episode hr {
        width: 55%;
        margin: 0 auto 13% auto;
    }

    #episode .main_img img:nth-of-type(2) {
        top: -7%;
        left: -19%;
        width: 37%;
    }

    #episode .case07 img:nth-of-type(2) {
        top: 20% !important;
        width: 40% !important;
    }

    #episode .main_img img:nth-of-type(3) {
        bottom: -15%;
        right: -15%;
        width: 30%;
    }

    #episode .case03 .main_img img:nth-child(4) {
        right: -20%;
        top: -25%;
        width: 40%;
    }

    #episode .other_case p { font-size: 5.4vw;}

    #episode .other_case ul { flex-direction: column;}

    #episode .other_case ul li { 
        width: 100% !important;
        margin-bottom: 5%;
    }

    #episode .other_case ul li:nth-child(2) { margin-top: 0;}

    #episode .other_case ul li:last-child { 
        margin-left: 0;
        margin-bottom: 0;
    }

    #last picture { width: 100%;}

    #archives h2, #recommend h2 { font-size: 5vw;}

    #archives h2::before, #archives h2::after
    #recommend h2::before, #recommend h2::after {
        width: 28%;
        padding-top: 5%;
        background: url(../images/star.png) no-repeat left / 165%;
        top: 15%;
    }

    #archives h2::before,
    #recommend h2::before { left: 0;}

    #archives h2::after,
    #recommend h2::after { right: 0;}

    #archives ul li { 
        width: 47%;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    #archives ul li:nth-child(even) { margin-right: 0;}

    #recommend p { width: 100%;}

 }