@charset "UTF-8";

#index.type3 #top.ajust .yukkuri,
#index.type3 #top.ajust .titlebox {
    text-align: center;
}

#index.type3 #top.ajust .titlebox {
    max-width: 600px;
}

@media screen and (min-width: 768px) {
    #index.type3 #top {
        padding-top: 107px; /* header分 */
        position: relative;
    }

    #index.type3 #top .titlebox {
        bottom: calc(13vh + 107px);
    }

    #index.type3 #top .inner {
        position: relative;
        height: 100%;
    }
}

@media screen and (min-width: 768px) and (max-height: 1030px) {
    #index.type3 #top.ajust .yukkuri img {
        height: 37.777vh;
        max-height: 408px;
        min-height: 200px;
    }
    #index.type3 #top .kuro.posi01 {
        bottom: 50vh;
    }
    #index.type3 #top .kuro.posi02 {
        bottom: 52vh;
    }
    #index.type3 #top .kuro.posi03 {
        bottom: 30vh;
    }
}

@media screen and (min-width: 919px) and (max-height: 1030px) {
    #index.type3 #top .kuro.posi01 {
        bottom: 70vh;
    }
    #index.type3 #top .kuro.posi02 {
        bottom: 72vh;
    }
    #index.type3 #top .kuro.posi03 {
        bottom: 57vh;
    }
}

@media screen and (min-width: 768px) and (max-height: 540px) {
    #index.type3 #top.ajust {
        height: 90vh;
    }
    #index.type3 #top.ajust .titlebox {
        width: 32vw;
        bottom: 22vh;
    }
    #index.type3 #top.ajust .titlebox img {
        height: 28vh;
        object-fit: contain;
    }
    #index.type3 #top.ajust .kuro.posi02 .balloon {
        left: -5.729vw;
        top: -5.729vw;
    }
    #index.type3 #top.ajust .kuro.posi01 .balloon,
    #index.type3 #top.ajust .kuro.posi02 .balloon,
    #index.type3 #top.ajust .kuro.posi03 .balloon {
        width: 5.729vw;
        height: 5.729vw;
    }
    #index.type3 #top.ajust .kuro.posi01 .balloon__01 {
        width: 7.8125vw;
        height: 7.8125vw;
        top: -3.90625vw;
        right: -5.859375vw;
    }
    #index.type3 #top.ajust .kuro.posi01 .balloon__01 .label {
        font-size: 1.5vw;
    }
    #index.type3 #top.ajust .kuro.posi02 .balloon .label {
        font-size: 1.0416vw;
    }
    #index.type3 #top.ajust .kuro.posi03 .balloon {
        left: -5.729vw;
        top: -5.729vw;
    }
    #index.type3 #top.ajust .kuro.posi03 .balloon .label {
        font-size: 1.25vw;
    }
    #index.type3 #top .kuro.posi03 {
        width: 2.8vw;
    }
}

@media screen and (max-width: 919px) {
    #index.type3 #top .titlebox {
        bottom: 9%;
    }
}

@media screen and (max-width: 919px) and (max-height: 540px) {
    #index.type3 #top.ajust .yukkuri img {
        height: 37.777vh;
        max-height: 408px;
        min-height: 140px;
    }
    #index.type3 #top .titlebox {
        width: 32vw;
    }
    #index.type3 #top.ajust .yukkuri {
        width: 7vw;
    }
}

@media screen and (max-width: 767px) and (max-height: 1030px) {
    #index.type3 #top .kuro.posi03 {
        bottom: 28%;
    }
}