* {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
html,
body {
    opacity: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
section {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

p#sec_1_1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 800;
    height: 54px;
    animation: open 1.5s ease 0s 1 alternate forwards, open 1.5s ease 4.5s 1 reverse, toCircle 1.5s ease 6s 1 forwards, secneChange 0s step-end 7.6s 1 forwards;
    overflow: hidden;
    background-color: #fff;
}
p#sec_1_1::before,
p#sec_1_1::after {
    position: absolute;
    top: 0;
    content: "";
    width: 30px;
    height: 50px;
    border: 2px solid #121212;
    border-width: 2px 0 2px 2px;
}
p#sec_1_1::before{border-width: 2px 0 2px 2px; left: 0;}
p#sec_1_1::after {border-width: 2px 2px 2px 0; right: 0;}

p#sec_1_1 span {
    position: absolute;
    top: 50%; left: 50%;transform: translate(-50%, -50%); 
    text-align: center; opacity: 0;
    width: 0;
}
p#sec_1_1 span#_1_1_1 {
    opacity: 1;
    width: 300px;
    height: 70px;
    line-height: 70px;

    transform-origin: 0% -25%;
    transform: rotateX(0deg) translate(-50%, -50%);
    animation: upCloseText .8s ease 1.5s 1 alternate forwards;
}
p#sec_1_1 span#_1_1_2,
p#sec_1_1 span#_1_1_3 {
    opacity: 0;
    width: 300px;
    height: 70px;
    line-height: 70px;

    transform-origin: 0% 100%;
    transform: rotateX(90deg) translate(-50%, -50%);
}
p#sec_1_1 span#_1_1_2 {
    animation: upShowText .8s ease 1.5s 1 alternate forwards, upCloseText .8s ease 3s 1 alternate forwards;
}
p#sec_1_1 span#_1_1_3 {
    animation: upShowText .8s ease 3s 1 alternate forwards, upCloseText .8s ease 4.5s 1 alternate forwards;
}

@keyframes open {
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

@keyframes upShowText {
    0% {
        transform-origin: 0% 25%;
        opacity: 0;
        width: 300px;
        transform: rotateX(90deg) translate(-50%, -50%);
    }
    1% {
        transform-origin: 0% 25%;
        opacity: 1;
        width: 300px;
        transform: rotateX(90deg) translate(-50%, -50%);
    }
    100% {
        transform-origin: 0% 25%;
        opacity: 1;
        width: 300px;
        transform: rotateX(0deg) translate(-50%, -50%);
    }
}
@keyframes upCloseText {
    0% {
        transform-origin: 0% -25%;
        opacity: 1;
        width: 300px;
        transform: rotateX(0deg) translate(-50%, -50%);
    }
    99% {
        transform-origin: 0% -25%;
        opacity: 1;
        width: 300px;
        transform: rotateX(-90deg) translate(-50%, -50%);
    }
    100% {
        transform-origin: 0% -25%;
        opacity: 0;
        width: 300px;
        transform: rotateX(-90deg) translate(-50%, -50%);
    }
}

@keyframes toCircle {
    0% {
        top: 50%;
        width: 4px;
        height: 52px;
        border-radius: 0%;
        background-color: #121212;
    }
    30% {
        top: 50%;
        width: 4px;
        height: 90px;
        border-radius: 100%;
        background-color: #121212;
    }
    60% {
        top: 50%;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background-color: #121212;
    }
    100% {
        top: calc(100% - 20px);
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background-color: #121212;
    }
}

/* secne2 */
section#secne2 {
    height: 100%;
    opacity: 0;
    animation: opacity 0s step-end 7.5s 1 alternate forwards;
}
div#secne2_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transform: translate(0,0) rotateZ(0);
    animation: moveBase 5s cubic-bezier(0.53, 0.05, 0.58, 0.88) 8s 1 alternate forwards;
}
div#circle {
    width: 40px;
    height: 40px;
    position: absolute;
    top: calc(100% - 40px);
    left: 50%;
    background-color: #121212;
    border-radius: 100%;
    transform: translate(-50%, 0%);
    animation: moveCircle 5s ease 9s 1 alternate forwards;
}
div#base {
    width: 200%;
    height: 50%;
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translate(-50%, calc(0% - 20px));
    background-color: #121212;
}
p#text_23 {
    top: calc(100% - 3.6rem);
    left: calc(100% + 3.6rem);
    line-height: 4.6rem;
    position: absolute;
    font-weight: bolder;
    font-size: 3.6rem;
    animation: move23Text 5s ease 9s 1 alternate forwards;
    width: calc(3rem * 3);
    transform-origin: bottom left;
}
p#text_23 span#text_2_stay,
p#text_23 span#text_2_junp {
    display: inline-block;
    transform-origin: bottom left;
    transform: scale(1, 1) translate(0,0) rotateX(0) rotateY(0) rotateZ(0);
}
p#text_23 span#text_2_stay {animation: junpFont 1s ease 14s 1 alternate forwards;}
p#text_23 span#text_2_junp {
    position: absolute;
    top: 0;
    left: 0;
    animation: junpFont 1s ease 14s 1 alternate forwards, moveFont 5s ease 14.9s 1 alternate forwards;
}
img {
    opacity: 0;
    position: absolute;
    left: 50%;
    max-height: 60%;
    max-width: 100%;
    bottom: 60%;
    transform: translate(-50%,50%);
    animation: opacity 1s ease 20s 1 alternate forwards;
}
@keyframes moveBase {
    0% {
        top: 0%;
        transform: translate(0,0) rotateZ(0);
    }
    100% {
        top: calc(-15% - 20px);
        transform: translate(0,0) rotateZ(10deg);
    }
}
@keyframes moveCircle {
    0% {
        top: calc(100% - 40px);
        left: 50%;
    }
    80% {
        top: calc(100% - 40px);
        left: calc(100% - 4.5rem);
    }
    100% {
        top: calc(100% - 40px);
        left: calc(100% - 5rem);
    }
}
@keyframes move23Text {
    0% {
        left: calc(100% + 3.6rem);
    }
    100% {
        left: calc(100% - 3.6rem);
    }
}
@keyframes junpFont {
    0% {
        transform: scale(1, 1) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
    45% {
        transform: scale(1, 0.6) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
    50% {
        transform: scale(1, 0.55) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
    55% {
        transform: scale(1, 0.6) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
    100% {
        transform: scale(1, 1) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
}
@keyframes moveFont {
    0% {
        transform: scale(1, 1) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)
    }
    25% {
        transform: scale(1, 1) translate(-80px,-100px) rotateX(0) rotateY(90deg) rotateZ(11deg)
    }
    50% {
        transform: scale(1, 1) translate(-47px,0px) rotateX(0) rotateY(180deg) rotateZ(-11deg);
    }
    60% {
        transform: scale(1, 1) translate(-33px,-6px) rotateX(0) rotateY(180deg) rotateZ(11deg);
    }
    70% {
        transform: scale(1, 1) translate(-80px,-6px) rotateX(0) rotateY(0deg) rotateZ(11deg);
    }
    100% {
        transform: scale(1, 1) translate(-80px,1px) rotateX(0) rotateY(0deg) rotateZ(0deg);
    }
}

@keyframes secneChange {
    0% {
        opacity: 1;
        width: 100%;
        height: 100%;
    }
    100% {
        opacity: 0;
        width: 0%;
        height: 0%;
    }
}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}