:root {
    --box-base-width: 300px;
    --box-base-height: 300px;
    --img-w: 150px;
}

.a-wrap .title {
    text-align: center;
}

.a-wrap img {
    max-width: none;
    width: var(--img-w);
    /* border: 1px solid; */
}

.a-wrap .border-wrapper {
    position: relative;
    overflow: visible;
    /* （div外の要素も見えるように） */
    /* border: 2px solid yellow; */
    /* margin: 13em auto 19em; */
    margin: 0em auto 0em;
    width: var(--box-base-width);
    display: flex;
    align-items: center;
}

.a-wrap .border-wrapper.illust1 {
    height: calc(var(--box-base-height) + 10px);
}

.a-wrap .border-wrapper.illust2 {
    height: calc(var(--box-base-height) + 150px);
}

.a-wrap .left-body,
.a-wrap .center-body,
.a-wrap .right-body {
    display: flex;
    flex-direction: column;
    /* border: 1px solid green; */
}

.a-wrap .movelefttop,
.a-wrap .moveleftbottom,
.a-wrap .moverighttop,
.a-wrap .moverightbottom {
    position: absolute;
}

/* -------------Left-------------- */
.a-wrap .movelefttop {
    animation: movefromlefttop ease-out;
    animation-duration: 1s;
    /* 画像を両端に位置 */
    top: 0;
    z-index: 99;
    left: -15%;
}

.a-wrap .illust1 .movelefttop {
    left: -20%;
    width: calc(var(--img-w) + 0%);
}

.a-wrap .illust2 .movelefttop {
    left: -7%;
    z-index: 9999;
}

.a-wrap .moveleftbottom {
    animation: movefromleftbottom ease-out;
    animation-duration: 1s;
    /* 画像を両端に位置 */
    left: 0;
    bottom: 0;
}

.a-wrap .hakihaki {
    animation: hakihaki 1s infinite ease-out !important;
}

/* -------------Cener-------------- */
.a-wrap .movecentertop {
    animation: movefromtop ease-out;
    animation-duration: 1s;
    width: 222%;
    position: absolute;
    top: -5%;
    left: -50%;
    transform: translateX(25%);
}

.a-wrap .illust1 .movecentertop {
    animation-delay: 1s;
    visibility: hidden;
}

.a-wrap .illust1 .movecentertop.visible {
    visibility: visible;
}

.a-wrap .illust2 .movecentertop {
    animation: movefromtop-2 ease-out;
    animation-duration: 1s;
    width: 130%;
    top: -40%;
}

.a-wrap .movecenterbody {
    animation: movefrombottom ease-out;
    animation-duration: 1s;
    width: 70%;
    position: absolute;
    left: 10%;
    top: -25%;
    z-index: 999;
}

.a-wrap .illust1 .movecenterbody {
    width: 65%;
    top: -24%;
}

.a-wrap .illust2 .movecenterbody {
    width: 59%;
    top: 14%;
    left: 17%;
}

/* --------------Right------------- */
.a-wrap .moverighttop {
    animation: movefromrighttop ease-out;
    animation-duration: 1s;
    z-index: 99;
    right: 0;
    top: 0;
}

.a-wrap .illust1 .moverighttop {
    top: -2%;
    right: -23%;
    width: calc(var(--img-w) + 12%);
}

.a-wrap .illust2 .moverighttop,
.a-wrap .illust2 .moverightbottom {
    z-index: 999;
}

.a-wrap .illust2 .movelefttop,
.a-wrap .illust2 .movecentertop,
.a-wrap .illust2 .moverighttop {
    top: -10%;
}

.a-wrap .illust2 .movecentertop {
    top: -45%;
    left: -18%;
}
@media screen and (max-width: 768px) {
    .a-wrap .illust2 .movecentertop {
        top: -53%;
        /* left: 20%; */
    }
}

.a-wrap .moverightbottom {
    animation: movefromrightbottom ease-out;
    animation-duration: 1s;
    bottom: 0;
}

/* -------------- Legs ------------- */
.a-wrap .moveleftbottom,
.a-wrap .moverightbottom {
    width: calc(var(--img-w) + 10%);
}

.a-wrap .moverightbottom {
    width: calc(var(--img-w) + 13%);
    right: -5%;
}

/* -------------- Items Delay for illust2 area. ------------- */
.a-wrap .illust2 .movelefttop,
.a-wrap .illust2 .moverighttop,
.a-wrap .illust2 .movecenterbody,
.a-wrap .illust2 .moveleftbottom,
.a-wrap .illust2 .moverightbottom {
    animation-delay: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

.a-wrap .visible {
    visibility: visible !important;
}


/* ==============Keyframes============== */
/* animation */
.anime-from-leftTop {
    animation-name: movefromlefttop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.anime-from-leftBottom {
    animation-name: movefromleftbottom;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.anime-from-centerTop {
    animation-name: movefromtop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.anime-from-centerBottom {
    animation-name: movefrombottom;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.anime-from-rightTop {
    animation-name: movefromrighttop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.anime-from-rightBottom {
    animation-name: movefromrightbottom;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.hakihaki {
    animation-name: hakihaki;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    visibility: visible !important;
}


/* ==============Keyframes============== */
@keyframes movefromlefttop {
    from {
        transform: translate(-100%, -100%) rotate(0);
        left: -50%;
        visibility: visible;
    }


    to {
        transform: translate(0%) rotate(1turn);
        left: 0;
        visibility: visible;
    }
}

@keyframes movefromleftbottom {
    from {
        transform: translate(-150%, 70%) rotate(0);
        bottom: -50%;
        visibility: visible;
    }

    to {
        transform: translate(0%) rotate(1turn);
        bottom: 0;
        visibility: visible;
    }
}

/* -------------Cener-------------- */
/* item is not rotete. */
@keyframes movefromtop {
    from {
        transform: translate(100%, -100%);
        visibility: hidden;
    }

    to {
        transform: translate(0, 0);
        top: -5%;
        visibility: visible;
    }
}

@keyframes movefromtop-2 {
    from {
        transform: translate(100%, -100%);
        visibility: hidden;
    }

    to {
        transform: translate(0, 0);
        top: -45%;
        left: -18%;
        visibility: visible;
    }
}

@keyframes movefrombottom {
    from {
        transform: translateY(-80%) rotate(0);
        visibility: visible;
    }

    to {
        transform: translateY(0) rotate(2turn);
        bottom: 0;
        visibility: visible;
    }
}

/* --------------Right------------- */
@keyframes movefromrighttop {
    from {
        transform: translate(100%, -100%) rotate(0);
        right: -50%;
        visibility: visible;
    }

    to {
        transform: translate(0%) rotate(3turn);
        right: 0;
        visibility: visible;
    }
}

@keyframes movefromrightbottom {
    from {
        transform: translate(150%, 150%) rotate(0);
        visibility: visible;
    }

    to {
        transform: translate(0%, 0%) rotate(1turn);
        visibility: visible;
    }
}

@keyframes hakihaki {
    from {
        transform: translate(0);
    }
    20% {
        transform: translate(0);
    }
    30% {
        transform: translate(0);
    }
    40% {
        transform: translate(0);
    }
    50% {
        transform: translate(0);
    }
    57% {
        transform: translate(0);
    }
    /*
     = この開き ％ が行きの速度 =
     */
    60% {
        transform: translate(0, 15%);
    }
    70% {
        transform: translate(0, 15%);
    }
    80% {
        transform: translate(0, 15%);
    }
    90% {
        transform: translate(0, 15%);
    }
    95% {
        transform: translate(0, 15%);
    }
    97% {
        transform: translate(0, 15%);
    }
    /*
     = このエリアが戻り=
     */
    to {
        transform: translate(0);
    }
}