.page_head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.page_head::after {
    content: "";
    height: 100vh;
    width: 100%;
    background: #0000005c;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.page_head>img {
    position: absolute;
    object-fit: cover;
    object-position: 0px -7vw;
    max-width: 1500px;
    left: 0;
    right: 0;
    margin: auto;
}


.page_head>img.head_bigpen {
    transform: translate(0, -1vw);
    animation: head_bigpen 3s infinite alternate linear;
}

@keyframes head_bigpen {

    100% {
        transform: translate(0, 0vw);
    }

}

.page_head>img.head_midori_b {
    animation: midori_b 2s steps(2, jump-none) infinite;
}

@keyframes midori_b {

    to {
        opacity: 0;
    }

}

.page_head>img.head_pen_b {
    animation: pen_b 2s steps(2, jump-none) infinite;
}

@keyframes pen_b {

    to {
        opacity: 0;
    }

}

.page_head>img.head_midori_a {
    opacity: 0;
    animation: midori_a 2s steps(2, jump-none) infinite;
}

@keyframes midori_a {

    to {
        opacity: 1;
    }

}

.page_head>img.head_pen_a {
    opacity: 0;
    animation: pen_a 2s steps(2, jump-none) infinite;
}

@keyframes pen_a {

    to {
        opacity: 1;
    }

}

@media screen and (max-width: 767px) {

    .page_head>img {
        height: auto;
        object-position: 0 2em;
    }

}