* {
    list-style-type: none;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "YuMincho", "Yu Mincho";
}

.menu {
    position: fixed;
    top: 35px;
    right: 20px;
    width: 56px;
    height: 45px;
    /*    background-color: aqua;*/
    display: inline-block;
    box-sizing: border-box;
    z-index: 10;
}

.menu:hover {
    cursor: pointer;
}

.menu span {
    position: absolute;
    left: 25%;
    height: 2px;
    width: 28px;
    background-color: black;
    display: inline-block;
    box-sizing: border-box;
}

.menu:hover > span:nth-of-type(1) {
    transform: translateX(0.2vw);
}

.menu:hover > span:nth-of-type(2) {
    transform: translateX(-0.2vw);
}

.menu span:nth-of-type(1) {
    transition: 0.3s;
    top: 0;
}

.menu span:nth-of-type(2) {
    transition: 0.3s;
    top: 15px;
}

.menu .hamburgertext {
    font-size: 13px;
    margin: 0;
    position: absolute;
    top: 30px;
    left: 13%;
}

/*MenuWrap*/

.MenuWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*    visibility: hidden;*/
    /*    opacity: 0;*/
    display: none;
    z-index: 3;
}

.visible {
    visibility: visible;
    opacity: 1;
    overflow: hidden;
}

.MenuWrap .right {
    position: fixed;
    right: 0px;
    width: 25%;
    height: 100%;
    background-color: #414141;
}

.MenuWrap .left {
    position: fixed;
    left: 0px;
    width: 75%;
    height: 100%;
    background-color: #f3f3f3;
}

.gmenu {
    list-style-type: none;
    position: fixed;
    top: 16vh;
    left: 12vw;
}

.gmenu div {
    font-size: calc(0.8rem + 0.7vw);
    /*    padding: 8%;*/
    width: 100%;
    height: 9vh;
    line-height: 9vh;
    display: block;
    position: relative;
    /*    background-color: aqua;*/
}

/*
.about_c {
            width: 30vw;
}
*/

.gmenu div a {
    text-decoration: none;
    color: #212121;
}

.gmenu div ul {
    /*    display: none;*/
    opacity: 0;
    visibility: hidden;
    width: auto;
    height: auto;
    transition: all .5s ease;
    /*    background-color: blueviolet;*/
}

.gmenu div:hover ul {
    /*    display: block;*/
    opacity: 1;
    visibility: visible;
}

.gmenu div ul {
    position: absolute;
    top: -20px;
    left: 100%;
    /*    padding: 0;*/
}

.gmenu div ul li {
    font-size: calc(0.7rem + 0.6vw);
    width: calc(300px + 5vw);
    height: 6.5vh;
    margin: 0;
    padding: 0;
}

#underlayer {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 3s ease-out;
}

#underlayer li {
    font-size: calc(0.6rem + 0.5vw);
    transform: translateX(5%);
}

#underlayer_02 {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 3s ease-out;
}

#underlayer_02 li {
    font-size: calc(0.6rem + 0.5vw);
    transform: translateX(20%);
}

#search_b li:nth-child(n+2):nth-child(-n+4) {
/*
    display: none;
    opacity: 0;
    visibility: hidden;
*/
    transition: all .3s ease-out;
}

#search_b li:nth-child(n+2):nth-child(-n+4) {
    font-size: calc(0.6rem + 0.5vw);
    transform: translateX(5%);
}

/*
#underlayer li a {
    border-left: 1px solid #212121;
}
*/

#search_b:hover #underlayer {
    opacity: 1;
    visibility: visible;
}

#search_b:hover #underlayer_02 {
    opacity: 1;
    visibility: visible;
}

.underlayer_show {
    animation-name: layershow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes layershow {
    0% {
        opacity: 0;
        visibility: visible;
    }


    99.9%,
    to {
        opacity: 1;
        visibility: visible;
    }
}

.special_sd p {
    margin: 0;
    position: absolute;
    top: -0.4vh;
    /*    left: 0.4vw;*/
    font-size: calc(1.3rem + 0.7vw);
    transform: rotate(8deg);
    z-index: 2;
}

.goods p {
    margin: 0;
    position: absolute;
    top: -0.4vh;
    /*    left: 3.4vw;*/
    font-size: calc(1.3rem + 0.7vw);
    transform: rotate(8deg);
    z-index: 2;

}

.right .kmenu {
    margin-top: 15vh;
}

.right .kmenu div {
    color: #f3f3f3;
    font-size: calc(0.6rem + 0.6vw);
    width: 85%;
    padding-left: 15%;
    text-align: left;
    height: 8vh;
    line-height: 8vh;
}

.right .kmenu a {
    text-decoration: none;
    color: #f3f3f3;
}

.menu_logo {
    width: 25vw;
    position: absolute;
    top: 4vh;
    left: 3vw;
}

.gmenu div a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.gmenu div > a::after {
    position: absolute;
    bottom: 16px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #c91f1f;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}

.gmenu div:hover div > a::after {
    transform: scale(1, 1);
}

.kmenu a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.kmenu a::after {
    position: absolute;
    bottom: 13px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #f3f3f3;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}

.kmenu a:hover::after {
    transform: scale(1, 1);
}

.gmenu a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.gmenu a::after {
    position: absolute;
    bottom: 18px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #212121;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}

.gmenu a:hover::after {
    transform: scale(1, 1);
}


.a {
    animation-name: cross1;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.b {
    animation-name: cross2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes cross1 {
    0% {
        transform: rotate(0);
    }

    99.9%,
    to {
        transform: rotate(45deg);
        top: 9px;
        background-color: #f3f3f3;
    }
}

@keyframes cross2 {
    0% {
        transform: rotate(0);
        bottom: 0;
    }

    99.9%,
    to {
        transform: rotate(-45deg);
        /*        bottom: 30px;*/
        background-color: #f3f3f3;
        top: 9px;
    }
}

/*
.aa {
    animation-name: cross11;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.bb {
    animation-name: cross22;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes cross11 {
    0% {
        transform: rotate(45deg);
    }

    99.9%,
    to {
        transform: rotate(0);
        top: 15px;
    }
}

@keyframes cross22 {
    0% {
        transform: rotate(-45deg);
    }

    99.9%,
    to {
        transform: rotate(0);
        bottom: 15px;
    }
}
*/

#overwrap_before {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 3;
}

#overwrap_before2 {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    z-index: 3;
}


/* ↓開催中止用にコメント化↓ */

#overwrap_before_slow {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 4;
}

#overwrap_before_slow2 {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    z-index: 4;
}

.overwrap {
    background-color: #000000;
    animation-name: over;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
}

.overwrap2 {
    background-color: #000000;
    animation-name: over;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.overwrap_slow {
    background-color: #000000;
    animation-name: over_slow;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
}

.overwrap_slow2 {
    background-color: #000000;
    animation-name: over_slow;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes over {
    0% {
        width: 0;
        height: 100vh;
    }

    50% {
        width: 100vw;
        height: 100vh;
    }

    75% {
        width: 100vw;
        height: 100vh;
    }

    99.9%,
    to {
        width: 0;
        height: 100vh;
    }
}

@keyframes over_slow {
    0% {
        width: 100%;
        height: 100vh;
    }

    50% {
        width: 100vw;
        height: 100vh;
    }

    93% {
        width: 0;
        height: 100vh;
    }


    99.9%,
    to {
        width: 0;
        height: 100vh;
    }
}


.hamburgertext_after {
    display: none;
}

/*
.close {
    display: none;
    color: #f3f3f3;
}*/

.close {
    opacity: 0;
    visibility: hidden;
    color: #f3f3f3;
}

.close_after {
    display: inline;
    font-size: 13px;
    margin: 0;
    position: absolute;
    top: 25px;
    left: 11%;
    color: #f3f3f3;
    opacity: 1;
    visibility: visible;
}

#logo_over {
    width: 20vw;
    height: auto;
    position: fixed;
    top: 45%;
    left: 40%;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
}

#overwraplogo_over {
    width: 20vw;
    height: 10vh;
    position: fixed;
    top: 45%;
    left: 40%;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    background-color: #000000;
}

#overwraplogo_under {
    width: 20vw;
    height: 10vh;
    position: fixed;
    top: 55%;
    left: 40%;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    background-color: #000000;
}

.logo_over_after {
    animation-name: logo_animation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}

.overwraplogo_over_after {
    animation-name: overlogo_animation;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
}

.overwraplogo_under_after {
    animation-name: logo_vanish;
    animation-fill-mode: forwards;
    animation-duration: 1.3s;
    animation-delay: 0.5s;
}

@keyframes logo_animation {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translateY(0);
    }

    25% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        visibility: visible;
        transform: translateY(10vh);
    }

    51% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10vh);
    }

    99.9%,
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10vh);
    }
}

@keyframes overlogo_animation {
    0% {
        opacity: 1;
        visibility: visible;
        height: 10vh;
    }

    50% {
        opacity: 1;
        visibility: visible;
        height: 2vh;
    }

    51% {
        opacity: 0;
        visibility: hidden;
        height: 2vh;
    }

    99.9%,
    to {
        height: 0;
    }
}

@keyframes logo_vanish {
    0% {
        visibility: visible;
        opacity: 1;
    }

    99% {
        visibility: visible;
        opacity: 1;
    }

    99.9%,
    to {
        visibility: hidden;
        opacity: 0;
    }
}

#overwrapbar {
    width: 0;
    height: 10vh;
    border-bottom: 2px solid #707070;
    position: fixed;
    top: 45%;
    left: 40%;
    z-index: 6;
}

#overwrapbar2 {
    width: 0;
    height: 10vh;
    border-bottom: 2px solid #000000;
    position: fixed;
    top: 45%;
    left: 40%;
    z-index: 7;
}

.overwrapbar_after {
    animation-name: bar_animation;
    animation-duration: 1.3s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

.overwrapbar2_after {
    animation-name: bar_animation2;
    animation-duration: 1.3s;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
}

@keyframes bar_animation {
    0% {
        transform-origin: top left;
        width: 0;
    }

    50% {
        transform-origin: top left;
        width: 20vw;
    }

    99% {
        opacity: 1;
        visibility: visible;
        width: 20vw;
    }

    99.9%,
    to {
        opacity: 0;
        visibility: hidden;
        width: 20vw;
    }
}

@keyframes bar_animation2 {
    0% {
        transform-origin: top left;
        width: 0;
    }

    50% {
        transform-origin: top left;
        width: 20vw;
    }

    60% {
        opacity: 1;
        visibility: visible;
        width: 20vw;
    }

    61% {
        opacity: 0;
        visibility: hidden;
        width: 20vw;
    }

    99.9%,
    to {
        opacity: 0;
        visibility: hidden;
        width: 20vw;
    }
}

.back1 {
    width: 100%;
    height: auto;
    background-image: url(../images/DIET_STUDY.jpg);
    background-repeat: repeat;
    background-size: cover;
}

.back2 {
    width: 100%;
    height: auto;
    background-image: url(../images/shimauma_print.jpg);
    background-repeat: repeat;
    background-size: cover;
}

.back3 {
    width: 100%;
    height: auto;
    background-image: url(../images/sprout.jpg);
    background-repeat: repeat;
    background-size: cover;
}

.back4 {
    width: 100%;
    height: auto;
    background-image: url(../images/KIKIMIMI.jpg);
    background-repeat: repeat;
    background-size: contain;
}

.back1,
.back2,
.back3,
.back4:hover {
    cursor: pointer;
}