.contents_trigger {
    opacity: 0;
}

.contents_trigger.active {
    animation: fadeIn 0.8s forwards;
}

.sec_character_wrap {
    position: relative;
}

.sec_character {
    background: url(../images/character/momoka/character_bg01_left.webp) , url(../images/character/momoka/character_bg01_right.webp) , url(../images/character/momoka/character_bg01_deco_line.png) , url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg01.webp);
    background-size: auto 100% , auto 100% , auto 15px , auto 15px , contain;
    background-position: -20% 0 , 120% 0 , bottom , top , top;
    background-repeat:  repeat-y , repeat-y , repeat-x , repeat-x , repeat;
    padding: 70px 0 50px;
}

.sec_character.ura {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: url(../images/character/momoka/character_bg02_left.webp), url(../images/character/momoka/character_bg02_right.webp), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg02.webp);
    background-size: auto 100% , auto 100% , auto 15px , auto 15px , contain;
    background-position: -20% 0 , 120% 0 , bottom , top , top;
    background-repeat:  repeat-y , repeat-y , repeat-x , repeat-x , repeat;
}

.sec_character .ura_anime {
    background-color: #461eaf;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 100;
}

.sec_character .ura_anime.active {
    animation: uraAnime 0.5s ease-in-out;
}

@keyframes uraAnime {
    0% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

.sec_character .sec_contents {
    max-width: 900px;
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.sec_character .sec_contents .site_logo {
    width: 40%;
}

.sec_character .sec_contents .designer {
    width: 55%;
}


.sec_character .sec_contents .contents_bottom {
    position: relative;
    width: 100%;
}


.sec_character .sec_contents .img01 {
    opacity: 0;
    width: 40%;
    margin: 0 auto 0 28%;
}

.sec_character .sec_contents .copy {
    opacity: 0;
    position: absolute;
    width: 6.5%;
    top: 0;
    left: 24%;
}

.sec_character.ura .sec_contents .copy {
    width: 8%;
    left: 23%;
}

.sec_character .sec_contents .profile {
    position: absolute;
    width: 32%;
    top: 0;
    left: -3%;
}

.sec_character .sec_contents .img02 {
    opacity: 0;
    position: absolute;
    width: 22%;
    left: 3%;
    top: 38%;
}

.sec_character .sec_contents .img02 .balloon {
    position: absolute;
    width: 80%;
    bottom: 0;
    right: -30%;
    rotate: -10deg;
}

.sec_character .sec_contents .img03 {
    opacity: 0;
    position: absolute;
    width: 22%;
    left: 18%;
    top: 67%;
}

.sec_character .sec_contents .img03 .balloon {
    position: absolute;
    width: 80%;
    bottom: -10%;
    left: -10%;
    rotate: 10deg;
}

.sec_character .sec_contents .img04 {
    opacity: 0;
    position: absolute;
    width: 22%;
    right: 9%;
    top: 8%;
}

.sec_character .sec_contents .img04 .balloon {
    position: absolute;
    width: 80%;
    bottom: -5%;
    right: -30%;
    rotate: -10deg;
}

.sec_character .sec_contents .img05 {
    opacity: 0;
    position: absolute;
    width: 22%;
    right: 6%;
    top: 40%;
}

.sec_character .sec_contents .img05 .balloon {
    position: absolute;
    width: 80%;
    bottom: -8%;
    right: -25%;
    rotate: 10deg;
}

.sec_character .sec_contents .img06 {
    opacity: 0;
    position: absolute;
    width: 22%;
    right: -6%;
    top: 70%;
}

.sec_character .sec_contents .img06 .balloon {
    position: absolute;
    width: 80%;
    bottom: -20%;
    right: -20%;
    rotate: -10deg;
}

.sec_character .img01.active {
    animation: fadeIn 0.5s forwards;
}
.sec_character .img02.active,
.sec_character .img03.active,
.sec_character .img04.active,
.sec_character .img05.active,
.sec_character .img06.active,
.sec_character .copy.active {
    animation: fadeUp 0.5s forwards;
}

.change_btn_wrap {
    position: absolute;
    width: 30%;
    bottom: 0;
    right: 5%;
}

.change_btn_wrap .balloon {
    width: 60%;
    margin: 0 0 -15% auto;
}

.sec_character.ura .change_btn_wrap .balloon {
    width: 73%;
    margin: 0 -13% -15% auto;
}

.change_btn_wrap .change_btn {
    width: 60%;
    cursor: pointer;
    position: relative;
}

.change_btn_wrap .change_btn img {
    position: relative;
    z-index: 1;
    transition: 0.3s all;
}

.change_btn_wrap .change_btn::before {
    position: absolute;
    left: 23.3%;
    bottom: 20%;
    content: '';
    width: 53%;
    height: 51%;
    background-image: url(../images/character/momoka/change_btn_shadow.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}


.change_btn_wrap .change_btn:hover img {
    translate: 0 3.5%;
}



.sec_character.ura .change_btn_wrap .change_btn::before {
    background-image: url(../images/character/momoka/change_btn_shadow_ura.png);
}

/* SPのみ */
@media screen and (max-width:730px) {
    .sec_character {
        background-image: url(../images/character/momoka/character_bg01_left_sp.webp), url(../images/character/momoka/character_bg01_right_sp.webp), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg01.webp);
        padding: 15px 0 30px;
        background-size: auto 100%, auto 100%, auto 10px, auto 10px, 150%;
        background-position: -40% 0 , 150% 0 , top , bottom , top;
    }

    .sec_character.ura {
        background-image: url(../images/character/momoka/character_bg02_left_sp.webp), url(../images/character/momoka/character_bg02_right_sp.webp), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg01_deco_line.png), url(../images/character/momoka/character_bg02.webp);
        background-size: auto 100%, auto 100%, auto 10px, auto 10px, 150%;
        background-position: -40% 0 , 150% 0 , top , bottom , top;
    }

    .sec_character .sec_contents {
        width: 90%;
        flex-direction: column;
        align-items: flex-start;
    }

    .sec_character .sec_contents .site_logo {
        width: 75%;
        margin-left: -2%;
    }

    .sec_character .sec_contents .designer {
        order: 3;
        width: 100%;
        margin-top: 30%;
    }

    .sec_character .sec_contents .contents_bottom {
        margin-bottom: 38vw;
    }

    .sec_character .sec_contents .copy {
        width: 13%;
        top: 33%;
        left: 39%;
    }

    .sec_character.ura .sec_contents .copy {
        width: 17%;
        left: 39%;
        top: 55%;
    }

    .sec_character .sec_contents .profile {
        width: 70%;
        left: -10%;
        top: -5%;
    }

    .sec_character .sec_contents .img01 {
        width: 71%;
        margin: 0 -9% 0 auto;
    }

    .sec_character.ura .sec_contents .img01 {

        margin-right: -7%;
    }

    .sec_character .sec_contents .img02 {
        width: 34%;
        top: 37%;
        left: -3%;
    }

    .sec_character .sec_contents .img02 .balloon {
        width: 90%;
        bottom: -27%;
        right: 7%;
    }

    .sec_character .sec_contents .img03 {
        width: 34%;
        left: 2%;
        top: 70%;
    }

    .sec_character .sec_contents .img03 .balloon {
        width: 90%;
        bottom: -24%;
        right: -20%;
    }

    .sec_character .sec_contents .img04 {
        width: 34%;
        left: 13%;
        top: 101%;
    }

    .sec_character .sec_contents .img04 .balloon {
        width: 90%;
        rotate: -10deg;
        left: 0;
        bottom: -15%;
    }

    .sec_character .sec_contents .img05 {
        width: 34%;
        right: 12%;
        top: 106%;
    }

    .sec_character .sec_contents .img05 .balloon {
        width: 90%;
        bottom: -12%;
        right: -30%;
    }

    .sec_character .sec_contents .img06 {
        width: 34%;
        right: -1%;
        top: 105%;
    }

    .sec_character .sec_contents .img06 .balloon {
        width: 90%;
        bottom: 73%;
        right: 5%;
        rotate: -10deg;
    }

    .change_btn_wrap {
        width: 55%;
        bottom: auto;
        top: 133%;
        right: 50%;
    }

}