/* top */
#top img{
    width: 100%;
}
.main-bg{
    background: url(../images/top/mv.png) no-repeat top center;
    background-size: cover;
    height: 663px;
}
.main-bg h1{
    padding: 114px 0 205px;
    width: 375px;
    margin: 0 auto;
}
.btn-area{
    position: relative;
    z-index: 9;
}
.main-bg .btn-img{
    margin: auto;
    position: absolute;
    top: -123px;
    left: 0;
    right: 0;
    z-index: 9;
}
.main-bg .btn-img.third-btn02{
    position: inherit;
}
.main-bg #second-btn .btn-img,
.main-bg #third-btn .third-btn{
    top: -70px;
}
.main-bg #third-btn .third-btn{
    top: -40px;
}
.third-btn-text{
    width: 283px;
    margin: 0 auto;
}
#third-btn-bottom .third-btn-text img{
    margin: -22px 0 0 0;
}
.main-top .flex{
    width: 355px;
    margin: 108px auto 0;
    justify-content: space-between;
}
.main-top .flex a{
    z-index: 9;
}
.story-bg{
    background: url(../images/bg/stage_bg01.png) no-repeat center center;
    background-size: cover;
    height: 1150px;
    position: relative;
}
.story-bg::before{
    content: '';
    background: url(../images/bg/bg_cloud_01.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 508px;
    position: absolute;
    top: -185px;
    z-index: 1;
}
.story-bg::after{
    content: '';
    background: url(../images/bg/bg_cloud_02.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 325px;
    position: absolute;
    bottom: -100px;
    z-index: 9;
}
.story-area{
    padding: 400px 0 0 0;
}
.story-area h2{
    width: 220px;
    margin: 0 auto 30px;
}
.story-text{
    width: 335px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 28.8px;
}
.character-bg{
    background: url(../images/bg/stage_bg02.png) no-repeat center center;
    background-size: cover;
    height: 1240px;
    position: relative;
}
.character-bg::after{
    content: '';
    background: url(../images/bg/bg_cloud_03.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 392px;
    position: absolute;
    bottom: -90px;
    z-index: 9;
}
.character-area{
    padding: 170px 0 0 0;
}
.character-area h2{
    width: 220px;
    margin: 0 auto 40px;
}
.character-box{
    background: url(../images/bg/bg_modal.png) center center;
    background-size: contain;
    width: 335px;
    max-width: 335px;
    margin: 40px 20px;
    position: relative;
}
.character-box::before{
    content: '';
    background: url(../images/bg/bg_modal_top.png) no-repeat center center;
    background-size: cover;
    width: 335px;
    height: 36px;
    position: absolute;
    top: -36px;
}
.character-box::after{
    content: '';
    background: url(../images/bg/bg_modal_bottom.png) no-repeat center center;
    background-size: cover;
    width: 335px;
    height: 36px;
    position: absolute;
    bottom: -36px;
}
.character-img-slick{
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.character-img-01{
    width: 122px;
}
.character-img-02{
    width: 140px;
}
.character-img-03{
    width: 188px;
}
.character-img-04{
    width: 335px;
}
.character-name{
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    color: #F2E8B7;
    background: linear-gradient(180deg, #F2E8B7 0%, #E0D59E 50.51%, #F2E8B7 50.52%, #CEC185 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 35px 0 20px 0;
}
.character-text{
    width: 273px;
    color: #DBC77E;
    margin: 0 auto;
    padding: 0 0 15px 0;
}
.content-bg{
    background: url(../images/bg/stage_bg03.png) no-repeat center center;
    background-size: cover;
    height: 100%;
    position: relative;
    padding: 187px 0 106px 0;
}
.content-area{
    background: url(../images/bg/bg_paper.png) center center;
    background-size: cover;
    width: 350px;
    margin: 0 auto 70px;
    padding: 60px 0;
    position: relative;
}
.content-area::before{
    content: '';
    background: url(../images/bg/bg_paper_top.png) center center;
    background-size: cover;
    width: 350px;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    top: -25px;
}
.content-area::after{
    content: '';
    background: url(../images/bg/bg_paper_bottom.png) center center;
    background-size: cover;
    width: 350px;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    bottom: -25px;
}
.content-area h2{
    width: 233px;
    margin: 0 auto 20px;
}
.content-text{
    width: 275px;
    margin: 0 auto;
}
/* top end */

@media screen and (max-width:599px) {
    .main-bg{
        position: relative;
    }
    .btn-area {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: -60px;
    }
    .main-top .flex {
        width: 94.667vw;
        max-width: 355px;
    }
    .main-bg .btn-img,.main-bg .btn-img-red {
        top: 0;
        width: 89.333vw;
        height: 16.8vw;
        max-width: 335px;
        max-height: 63px;
    }
    .main-bg #second-btn .btn-img,
    .main-bg #third-btn .third-btn {
        top: -70px;
    }
    .main-bg #third-btn .third-btn {
        top: -40px;
    }
    .main-bg h1 {
        width: 100vw;
        max-width: 375px;
    }
    .story-area {
        padding: 106.667vw 0 0 0;
    }
    .story-text {
        width: 89.333vw;
        max-width: 335px;
    }
    .character-bg {
        height: 330.667vw;
        max-height: 1325px;
    }
    .story-bg{
        background: url(../images/bg/stage_bg01.png) no-repeat center center;
        background-size: cover;
        height: 306.667vw;
        max-height: 1440px;
        position: relative;
    }
    .story-bg::before{
        content: '';
        background: url(../images/bg/bg_cloud_01.png) no-repeat center center;
        background-size: cover;
        width: 100vw;
        height: 135.467vw;
        position: absolute;
        top: -49.333vw;
        z-index: 1;
    }
    .story-bg::after{
        content: '';
        background: url(../images/bg/bg_cloud_02.png) no-repeat center center;
        background-size: cover;
        width: 100vw;
        height: 86.667vw;
        position: absolute;
        bottom: -26.667vw;
        z-index: 9;
    }
    .character-bg::after{
        content: '';
        background: url(../images/bg/bg_cloud_03.png) no-repeat center center;
        background-size: cover;
        width: 100vw;
        height: 104.533vw;
        position: absolute;
        bottom: -24vw;
        z-index: 9;
    }
}
@media screen and (max-width:374px) {
    .story-text {
        font-size: 4.8vw;
        line-height: 7.68vw;
    }
    .character-area{
        padding: 45.333vw 0 0 0;
    }
    .character-area h2{
        width: 58.667vw;
        margin: 0 auto 10.667vw;
    }
    .character-box{
        background: url(../images/bg/bg_modal.png) center center;
        background-size: contain;
        width: 89.333vw;
        margin: 10.667vw 5.333vw;
        position: relative;
    }
    .character-box::before{
        content: '';
        background: url(../images/bg/bg_modal_top.png) no-repeat center center;
        background-size: cover;
        width: 89.333vw;
        height: 9.6vw;
        position: absolute;
        top: -9.6vw;
    }
    .character-box::after{
        content: '';
        background: url(../images/bg/bg_modal_bottom.png) no-repeat center center;
        background-size: cover;
        width: 89.333vw;
        height: 9.6vw;
        position: absolute;
        bottom: -9.6vw;
    }
    .character-img-slick{
        height: 80vw;
    }
    .character-img-01{
        width: 32.533vw;
    }
    .character-img-02{
        width: 37.333vw;
    }
    .character-img-03{
        width: 50.133vw;
    }
    .character-img-04{
        width: 89.333vw;
    }
    .character-name{
        font-size: 8vw;
        line-height: 8vw;
        font-weight: bold;
        text-align: center;
        color: #F2E8B7;
        background: linear-gradient(180deg, #F2E8B7 0%, #E0D59E 50.51%, #F2E8B7 50.52%, #CEC185 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 9.333vw 0 5.333vw 0;
    }
    .character-text{
        width: 72.8vw;
        color: #DBC77E;
        margin: 0 auto;
        padding: 0 0 4vw 0;
        font-size: 4.267vw;
        line-height: 6.827vw;
    }
    .content-area{
        background: url(../images/bg/bg_paper.png) center center;
        background-size: cover;
        width: 93.333vw;
        margin: 0 auto 70px;
        padding: 6vw 0;
        position: relative;
    }
    .content-area::before{
        content: '';
        background: url(../images/bg/bg_paper_top.png) center center;
        background-size: cover;
        width: 93.333vw;
        height: 16vw;
        margin: 0 auto;
        position: absolute;
        top: -6.667vw;
    }
    .content-area::after{
        content: '';
        background: url(../images/bg/bg_paper_bottom.png) center center;
        background-size: cover;
        width: 93.333vw;
        height: 16vw;
        margin: 0 auto;
        position: absolute;
        bottom: -6.667vw;
    }
    .content-area h2{
        width: 62.133vw;
        margin: 0 auto 20px;
    }
    .content-text{
        width: 73.333vw;
        margin: 0 auto;
    }
}