.contents_trigger {
    opacity: 0;
}

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

.sec_character {
    background: url(../images/character/mio/character_bg01_left.webp) , url(../images/character/mio/character_bg01_right.webp) , url(../images/character/mio/character_bg01_deco_line.png) , url(../images/character/mio/character_bg01_deco_line.png), url(../images/character/mio/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 .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;
}


.sec_character .sec_contents .img01 {
    opacity: 0;
    width: 43%;
    margin: 0 auto 0 35%;
}

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

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

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

.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: 25%;
    left: 3%;
    top: 70%;
}

.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: 25%;
    right: 0%;
    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: 25%;
    right: 5%;
    top: 40%;
}

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

.sec_character .sec_contents .img06 {
    opacity: 0;
    position: absolute;
    width: 25%;
    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;
}





/* SPのみ */
@media screen and (max-width:730px) {
    .sec_character {
        background-image: url(../images/character/mio/character_bg01_left_sp.webp), url(../images/character/mio/character_bg01_right_sp.webp), url(../images/character/mio/character_bg01_deco_line.png), url(../images/character/mio/character_bg01_deco_line.png), url(../images/character/mio/character_bg01.webp);
        padding: 15px 0 30px;
        background-size: auto 100%, auto 100%, auto 10px, auto 10px, 150%;
        background-position: -30% 0 , 180% 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%;
    }

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

    .sec_character .sec_contents .copy {
        width: 17%;
        top: 23%;
        left: 30%;
    }

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

    .sec_character .sec_contents .img01 {
        width: 60%;
        margin: 5% -8% 0 auto;
    }

    .sec_character .sec_contents .img02 {
        width: 33%;
        top: 28%;
        left: -3%;
    }

    .sec_character .sec_contents .img02 .balloon {
        bottom: -19%;
        right: -11%;
    }

    .sec_character .sec_contents .img02 .balloon {
        width: 90%;
    }

    .sec_character .sec_contents .img03 {
        width: 33%;
        left: 3%;
        top: 58%;
    }

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

    .sec_character .sec_contents .img04 {
        width: 33%;
        left: -1%;
        top: 90%;
    }

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

    .sec_character .sec_contents .img05 {
        width: 33%;
        right: 36%;
        top: 104%;
    }

    .sec_character .sec_contents .img05 .balloon {
        width: 90%;
        bottom: -12%;
        left: -30%;
        rotate: 10deg;
    }

    .sec_character .sec_contents .img06 {
        width: 33%;
        right: -1%;
        top: 103%;
    }

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

}