body {
    font-family: m-plus-rounded-2p,sans-serif;
    font-weight: 700;
    font-style: normal;  
}

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

.content { padding: 8% 0;}

.content picture { display: block;}

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

.content h1 img { width: 75%;}

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

#sp_top .top_wrapper {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - calc(100% / 2));;
    text-align: center;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

#sp_top .top_wrapper > img {
    width: 65%;
    z-index: 10;
    margin-bottom: -3%;
}

#sp_top .top_wrapper div {
    width: 100%;
    height: 22%;
    background-color: #5cf1d7;
    background-image:
      radial-gradient(#57e5cc 20%, transparent 20%),
      radial-gradient(#57e5cc 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3%;
}

#sp_top .top_wrapper picture { width: 65%;}

#sp_top .top_wrapper picture img { max-width: 100%;}

#concept {
    width: 100%;
    background: url(../images/back_pk.jpg) repeat-y top center / 100%;
}

#concept .movie_wrap {
    width: 80%;
    margin: 0 auto 8% auto;
}

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

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

#concept picture { 
    width: 80%;
    margin: 0 auto;
}

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

#cast {
    width: 100%;
    background: url(../images/back_ye.jpg) repeat-y top center / 100%;
}

#cast ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#cast ul li { width: 43%;}

#cast ul li img { max-width: 100%;}

#cast ul li:nth-child(1),
#cast ul li:nth-child(2) { margin-bottom: 10%;}

#place {
    width: 100%;
    background-size: auto auto;
    background-color: rgba(175, 255, 223, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(143, 255, 209, 1) 10px, rgba(143, 255, 209, 1) 20px );
}

#place h1 img { width: 100% !important;}

#place iframe {
    display: block;
    width: 80%;
    aspect-ratio: 16/9;
    margin: 0 auto 5% auto;
}

#place p {
    text-align: center;
    font-size: 1.8vw;
    margin-bottom: 8%;
}

#place p br { display: none;}

#place .tver {
    width: 70%;
    margin: 0 auto; 
    text-align: center;
 }

#place a {
    width: 70%;
    margin: 0 auto;
    display: block;
}

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

#place .tver02 { 
    width: 100%;
    text-align: center;
}

#place .tver img, #place .tver02 img { max-width: 100%;}

#page-top {
    position: fixed;
    bottom: 3%;
    right: 1%;
    width: 8%;
    height: auto;
}

#page-top img { max-width: 100%;}


/* -------------------- 縺薙％縺九ｉ繝ｬ繧ｹ繝昴Φ繧ｷ繝� -------------------- */

@media (max-width: 767px) {

    .wrapper { width: 90%;}

    .content { padding: 18% 0;}

    .content h1 img { width: 100%;}

    #sp_top {
        padding-top: 168%;
        /* margin-top: -13%; */
        background: url(../images/top_mainimg_sp.jpg) no-repeat center / cover;
    }

    #sp_top .top_wrapper { 
        justify-content: center;
        padding-bottom: 12%;
    }

    #sp_top .top_wrapper > img { width: 90%;}

    #sp_top .top_wrapper div { height: 18%;}

    #concept picture { width: 100%;}

    #concept .movie_wrap { 
        width: 100%;
        margin-bottom: 18%;
    }

    #cast ul li { 
        width: 73%;
        margin-bottom: 18% !important;
    }

    #cast ul li:last-child { margin-bottom: 0 !important;}

    #cast ul { justify-content: center;}

    #place h1 { margin-bottom: 7% !important;}

    #place h1 picture { width: 100%;}

    #place iframe {
        width: 100%;
        margin: 0 auto 18% auto;
    }

    #place p { 
        font-size: 5.4vw;
        margin-bottom: 18%;
    }

    #place p br { display: block;}

    #place .tver { 
        width: 100%;
        margin: 0 auto;
    }

    #place a { 
        width: 100%;
        margin: 0 auto;
    }

    #page-top {
        right: 3%;
        width: 14%;
    }
}