@charset "utf-8";

.headbox {
    position: relative;
}

.main_gm .sec_inner{
    max-width: 720px;
}

.img_illust {
    position: absolute;
    width: auto;
    z-index: calc(infinity);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
}

.is-hidden {
    visibility: hidden;
    opacity: 0;
  }

.illust01 {
    top: 84px;
    left: 72%;
    transform: translate(-50%, -50%);
    width: 14%;
}

.illust02 {
    top: 240px;
    left: 65%;
    transform: translate(-50%, -50%);
    width: 17%;
}

.illust03 {
    top: 200px;
    left: 26%;
    transform: translate(-50%, -50%);
    width: 16%;
}

.illust04 {
    top: 70px;
    left: 32%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 12%;
}

.illust05 {
    top: 270px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12%;
}
#topics img{
    margin-bottom: 40px;
}
/*kids*/
.kids #topics{
    padding-top: 60px;
}

@media (max-width: 820px) and (min-width: 769px) {
    .illust01 {
        width: 18%;
        top: 145px;
        left: 72%;
    }

    .illust02 {
        width: 20%;
        top: 360px;
        left: 80%;
    }

    .illust03 {
        width: 18%;
        top: 340px;
        left: 18%;
    }

    .illust04 {
        width: 16%;
        top: 136px;
        left: 24%;
    }

    .illust05 {
        width: 12%;
        top: 380px;
        left: 56%;
    }
}

@media screen and (max-width:767px) {
    .img_illust {
        z-index: 1000;
    }

    .illust01 {
        top: 155px;
        left: 78%;
        width: 28%;
    }

    .illust02 {
        width: 28%;
        top: 346px;
        left: 76%;
    }

    .illust03 {
        width: 26%;
        top: 380px;
        left: 20%;
    }

    .illust04 {
        width: 18%;
        top: 390px;
        left: 48%;

    }

    .illust05 {
        width: 20%;
        top: 136px;
        left: 26%;
    }
}