.contents_trigger {
    opacity: 0;
}

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

.sec_character {
    background: url(../images/character/nanaho/character_bg01_left.webp) , url(../images/character/nanaho/character_bg01_right.webp) , url(../images/character/nanaho/character_bg01_deco_line.png) , url(../images/character/nanaho/character_bg01_deco_line.png), url(../images/character/nanaho/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: 50%;
    margin: 0 auto;
}

.sec_character .sec_contents .copy {
    opacity: 0;
    position: absolute;
    width: 11%;
    top: -3%;
    left: 25%;
}

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

.sec_character .sec_contents .img02 {
    opacity: 0;
    position: absolute;
    width: 23%;
    left: 5%;
    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: 23%;
    right: 8%;
    top: 10%;
}

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

.sec_character .sec_contents .img04 {
    opacity: 0;
    position: absolute;
    width: 23%;
    left: 3%;
    top: 70%;
}

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

.sec_character .sec_contents .img05 {
    opacity: 0;
    position: absolute;
    width: 23%;
    right: 10%;
    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: 23%;
    right: 5%;
    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;
}




.sec_other {
    padding: 3vw 0 5vw;
    background: url(../images/character/nanaho/character_bg02_left.webp) , url(../images/character/nanaho/character_bg02_right.webp) , url(../images/character/nanaho/character_bg02.webp);
    background-size: auto 100% , auto 100% , cover;
    background-position: -5% 0 , 105% 0 , top;
    background-repeat: repeat-y , repeat-y , no-repeat;
}

.sec_other .sec_ttl {
    max-width: 350px;
    width: 50%;
    margin: 0 auto;
}

.sec_other .sec_contents {
    max-width: 800px;
    width: 70%;
    margin: 30px auto 0;
}

.sec_other .sec_contents ul {
    display: flex;
    justify-content: space-between;
}

.sec_other .sec_contents ul li {
    max-width: 450px;
    margin: 0 auto;
    /* width: calc(90%/3); */
    color: #fff;
    text-shadow: 3px 0 3px #7137f2 , -3px 0 3px #7137f2 , 0 -3px 3px #7137f2 , 0 3px 3px #7137f2; 
}

.sec_other .sec_contents ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sec_other .sec_contents ul li .image {
    width: 48%;
}

.sec_other .sec_contents ul li .txt_wrap {
    margin: 0 auto;
}

.sec_other .sec_contents ul li .ttl {
    font-weight: bold;
    font-size: clamp(16px,1.8vw,20px);
    line-height: 1.3;
}

.sec_other .sec_contents ul li .txt {
    font-size: clamp(13px,1.5vw,17px);
    margin-top: 5px;
}


/* SPのみ */
@media screen and (max-width:730px) {
    .sec_character {
        background-image: url(../images/character/nanaho/character_bg01_left_sp.webp), url(../images/character/nanaho/character_bg01_right_sp.webp), url(../images/character/nanaho/character_bg01_deco_line.png), url(../images/character/nanaho/character_bg01_deco_line.png), url(../images/character/nanaho/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: 21%;
        top: 25%;
        left: 32%;
    }

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

    .sec_character .sec_contents .img01 {
        width: 80%;
        margin: 0 -15% 0 auto;
    }

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

    .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%;
        right: 64%;
        top: 59%;
    }

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

    .sec_character .sec_contents .img04 {
        width: 33%;
        left: -2%;
        top: 88%;
    }

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

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

    .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;
    }

    .sec_other {
        padding: 30px 0 40px;
        background-image: url(../images/character/nanaho/character_bg02_left_sp.webp), url(../images/character/nanaho/character_bg02_right_sp.webp), url(../images/character/nanaho/character_bg02.webp);
        background-size: auto 105% , auto 110% , cover;
        background-position: -10% 30% , 150% 20% , top;
    }

    .sec_other .sec_contents {
        width: 80%;
        margin-top: 20px;
    }
}