:root {
    --gray: #666;
    --white: #fff;
    --white2: #dfdfdf;
    --white3: #f5e1c6;
    --black: #000;
    --pink: #d77584;
    --pinktwo: #ff9db5;
    --pinkthree: #f0608b;
    --pinkfour: #ffc8d6;
    --brown: #5b2234;
    --brown2: #B5753F;
    --darkbrown: #654541;
    --darkbrown2: #84644e;
    --darkbrown3: #443d3d;
    --darkbrown4: #795f5f;    
    --red: #af2d13;
    --red2: #861d08;
    --sakura: #fcb5c7;
    --sakura2: #fcafbc;
    --blue: #1c22d5;
    --blue2: #1c2484;
    --green: #139a44;
    --green2: #0f8611;
    --orange: #d56e18;
    --orange2: #e3761a;
    --yellow: #F9BE35;
    --waterblue: #8ed3dd;
    --waterblue2: #d7feff;
    --ricecolor: #E8D6CC;
    --ricecolor2: #e4e2da;
    --ricecolor3: #ffffff;
    --switch-transition: 250ms ease-out;
    --border-width: 0.2vw;
    --switch-shadow: 0.3vw 0.3vw 0.1vw 0;
    --label-size: 30px;
    --checkbox-size: 15px;
    --kirby-animation-timing: 0.25s ease-in-out;
    --eye-animation-timing: 5s ease-out;
    --eye-gradient: radial-gradient(circle at 100% center, rgb(0, 0, 0), rgb(0, 0, 0) 50%, var(--blue) 75%, var(--blue) 75%);
    --eye2-gradient: linear-gradient(90deg, #f6bfce, #fcb5c7 95%, var(--black) 95% 100%);
    --eye3-gradient: linear-gradient(-90deg, #f6bfce, #fcb5c7 95%, var(--black) 95% 100%);
    --kirby-gradient: linear-gradient(0deg, var(--pink), var(--pinktwo) 20%, var(--pinkfour));
    --kirby-hand-gradient: linear-gradient(116deg, #f8b6c7 38%, #ff99b2);
    --kirby-hand2-gradient: linear-gradient(-35deg, #f8b6c7 38%, #ff99b2);
    --red-gradient: linear-gradient(75deg, var(--brown), var(--red2) 40%, var(--red));
    --tree-color: linear-gradient(10deg, var(--brown), var(--brown2) 30%, var(--brown2));
}
body {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(0deg, var(--green), var(--green2) 200px, var(--waterblue) 205px, var(--waterblue2) 89.5%) no-repeat;
}
li {
    list-style-type: none;
}
.kirby_content {
    position: absolute;
    transform: translateX(-50%) translateY(0%);
    bottom: 20px;
    left: calc(50% - 160px);
    width: 100px;
    height: auto;
    animation: kirbymove var(--kirby-animation-timing) infinite;
    opacity: 1;
    z-index: 100;
    & .kirby_inner {
        background: linear-gradient(0deg, var(--pink), var(--pinktwo) 20%, var(--pinkfour));
        border-radius: 50%;
        width: 100%;
        padding: 100% 0px 0px;
    }
    & .eye, & .mouth, & .cheek, & .hand, & .foot {
        position: absolute;
        transition: 0.3s ease-in-out;
    }
    & .eye {
        width: 14%;
        padding: 33% 0px 0px;
        background: var(--black);
        border-radius: 50%;
        top: 23%;
        left: 37%;
        animation: var(--eye-animation-timing) 0s infinite normal none running eye;
        &::before {
            content: "";
            background-color: var(--white);
            position: absolute;
            width: 65%;
            height: 45%;
            border-radius: 50%;
            top: 5%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            animation: var(--eye-animation-timing) 0s infinite normal none running eye-before;
        }
        &.two {
            left: 61%;
            &::after {
                transform: rotate(-60deg);
                background-image: var(--eye3-gradient);
                left: 35%;
            }
        }
        & .eye_inner {
            background: var(--eye-gradient);
            border-radius: 50%;
            width: 100%;
            padding: 65% 0px 0px;
            transform: rotate(-90deg);
            bottom: 15%;
            position: absolute;
            animation: var(--eye-animation-timing) 0s infinite normal none running eye-inner;
        }
    }
    & .mouth {
        z-index: 50;
        border-radius: 35% 35% 50% 50% / 30% 30% 70% 70%;
        height: 16%;
        width: 21%;
        left: 46%;
        top: 59%;
        background: var(--brown);
        &::before {
            content: "";
            bottom: 3%;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 70%;
            border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
            background: var(--pinkthree);
            display: block;
            position: absolute;
        }
    }
    & .cheek {
        background-color: var(--pinkthree);
        top: 56%;
        left: 20%;
        filter: blur(0.1vw);
        width: 14%;
        height: 8%;
        border-radius: 50%;
        transform: rotate(-10deg);
        z-index: 3;
        &.two {
            left: auto;
            right: 9%;
            transform: rotate(10deg);
        }
    }
    & .hand {
        top: 22%;
        left: -12%;
        background: var(--kirby-hand-gradient);
        border-radius: 60% 40% 40% 60% / 60% 40%;
        width: 30%;
        padding: 30% 0px 0px;
        transform: rotate(34deg);
        &.two {
            top: 19%;
            left: auto;
            right: -12%;
            background: var(--kirby-hand2-gradient);
            transform: rotate(164deg);
            z-index: -1;
        }
    }
    & [class*="foot"] {
        width: 50%;
        height: 35%;
        position: absolute;
        background: var(--red-gradient);
        border-radius: 78% 22% 70% 30% / 59% 29% 71% 41%;
        z-index: 10;
    }
    & .foot-right {
        bottom: 0%;
        left: -10%;
        transform: rotate(-112deg);
    }
    & .foot-left {
        right: -16%;
        bottom: 1%;
        transform: rotate(-34deg);
        animation: 0.1s ease-in-out 0s infinite normal none running foot-mov-3;
    }
}
.wado_content {
    position: absolute;
    transform: translateX(100%) translateY(0%);
    bottom: 20px;
    right: calc(50% - 150px);
    width: 100px;
    height: auto;
    animation: kirbymove var(--kirby-animation-timing) infinite;
    opacity: 1;
    z-index: 100;
    & .wado_inner {
        background: linear-gradient(314deg, var(--orange) 38%, var(--orange2));
        border-radius: 50%;
        width: 100%;
        padding: 100% 0px 0px;
        &::before, &::after {
            content: "";
            position: absolute;
            background: var(--white3);
        }
        &::before {
            top: 12%;
            left: 46%;
            width: 69%;
            height: 60%;
            border-radius: 50% 50% 40%;
            transform: translateX(-50%);
        }
        &::after {
            top: 43%;
            left: 46%;
            width: 81%;
            height: 45%;
            border-radius: 40%;
            transform: translateX(-50%);
            z-index: 0;
        }
    }
    & .eye, & .mouth, & .cheek, & .hand, & .foot {
        position: absolute;
        transition: 0.3s ease-in-out;
    }
    & .eye {
        width: 14%;
        padding: 33% 0px 0px;
        background: var(--black);
        border-radius: 50%;
        top: 23%;
        left: 25%;
        animation: var(--eye-animation-timing) 0s infinite normal none running eye;
        z-index: 10;
        &::before {
            content: "";
            background-color: var(--white);
            position: absolute;
            width: 65%;
            height: 45%;
            border-radius: 50%;
            top: 5%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            animation: var(--eye-animation-timing) 0s infinite normal none running eye-before;
        }
        &.two {
            left: 51%;
            &::after {
                transform: rotate(-60deg);
                background-image: var(--eye3-gradient);
                left: 35%;
            }
        }
        & .eye_inner {
            background: var(--eye-gradient);
            border-radius: 50%;
            width: 100%;
            padding: 65% 0px 0px;
            transform: rotate(-90deg);
            bottom: 15%;
            position: absolute;
            animation: var(--eye-animation-timing) 0s infinite normal none running eye-inner;
        }
    }
    & .mouth {
        z-index: 50;
        border-radius: 35% 35% 50% 50% / 30% 30% 70% 70%;
        height: 16%;
        width: 21%;
        left: 46%;
        top: 59%;
        background: var(--brown);
        &::before {
            content: "";
            bottom: 3%;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 70%;
            border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
            background: var(--pinkthree);
            display: block;
            position: absolute;
        }
    }
    & .cheek {
        background-color: var(--pinkthree);
        top: 56%;
        left: 8%;
        filter: blur(0.1vw);
        width: 14%;
        height: 8%;
        border-radius: 50%;
        transform: rotate(-10deg);
        z-index: 3;
        &.two {
            left: auto;
            right: 15%;
            transform: rotate(10deg);
        }
    }
    & .hand {
        top: 22%;
        left: 87%;
        background: linear-gradient(-35deg, var(--orange) 38%, var(--orange2));
        border-radius: 60% 40% 40% 60% / 60% 40%;
        width: 30%;
        padding: 30% 0px 0px;
        transform: rotate(34deg);
        z-index: 1;
        &.two {
            top: 19%;
            left: -13%;
            background: linear-gradient(-35deg, var(--orange) 38%, var(--orange2));
            transform: rotate(253deg);
            z-index: -1;
        }
    }
    & [class*="foot"] {
        width: 50%;
        height: 35%;
        position: absolute;
        background: var(--red-gradient);
        border-radius: 78% 22% 70% 30% / 59% 29% 71% 41%;
        z-index: 10;
    }
    & .foot-right {
        bottom: 0%;
        left: -13%;
        transform: rotate(251deg);
    }
    & .foot-left {
        right: -10%;
        bottom: -1%;
        transform: rotate(-34deg);
        animation: 0.1s ease-in-out 0s infinite normal none running foot-mov-3;
    }
}
.sakura_content {
    position: absolute;
    left: 50%;
    bottom: 120px;
    width: 600px;
    height: auto;
    transform: translateX(-50%) translateY(0%);
    & .sakura_content_tree {
        background: var(--tree-color);
        mask-image: url("tree.png");
        mask-size: 600px;
        mask-repeat: no-repeat;
        mask-position: center bottom;
        height: 750px;
        width: 100%;
        position: relative;
        overflow: hidden;
        & .eye, & .nose ,& .mouth {
            position: absolute;
            transition: 0.3s ease-in-out;
        }
        & .eye {
            width: 3%;
            padding: 7% 0px 0px;
            border-radius: 50%;
            top: 63%;
            left: 53%;
            animation: var(--eye-animation-timing) 0s infinite normal none running eye2;
            z-index: 10;
            background: var(--brown);
            &.two {
                left: 58%;
            }
            &:before {
                content: '';
                box-shadow: inset 0 0 0 10px var(--black);
                width: 90%;
                height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 10%;
                z-index: 100;
                border-radius: 50%;
                animation: var(--eye-animation-timing) 0s infinite normal none running eye-before2;
            }
        }
        & .nose {
            top: 70%;
            left: 51%;
            width: 7%;
            height: 2%;
            border-radius: 50% 30% 30% 50%;
            z-index: 1000;
            background: linear-gradient(10deg, var(--brown), var(--brown2));
        }
        & .mouth {
            z-index: 50;
            border-radius: 50%;
            height: 5%;
            width: 3%;
            left: 55.5%;
            top: 73%;
            background: var(--brown);
                &:before {
                    content: '';
                    box-shadow: inset 0 0 0 10px var(--black);
                    width: 85%;
                    height: 100%;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 15%;
                    z-index: 100;
                    border-radius: 50%;
                } 
        }
    }
    & .sakura_content_leaf {
        content: "";
        background-image:
            radial-gradient(circle at 19% 49%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 33% 34%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 20% 61%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 28% 61%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 27% 44%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 27% 53%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 22% 38%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 27% 32%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%), 
            radial-gradient(circle at 35% 71%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 29% 69%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 33% 54%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 35% 46%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 41% 22%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 34% 25%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 37% 58%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 42% 61%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 39% 37%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 44% 32%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 43% 73%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 50% 76%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 46% 43%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 43% 49%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 49% 65%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 62% 72%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 48% 58%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 63% 58%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 55% 26%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 49% 29%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 54% 20%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 48% 21%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 50% 50%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 61% 44%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 56% 43%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 50% 40%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 72% 38%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 55% 29%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 57% 63%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 57% 36%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 57% 75%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 65% 75%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 58% 51%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 76% 51%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 62% 21%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 62% 21%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 67% 27%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 65% 35%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 79% 63%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 67% 63%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 70% 50%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 88% 50%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 72% 71%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 80% 68%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 74% 58%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 74% 44%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 75% 28%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 81% 33%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 66% 53%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 67% 44%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 55% 53%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 83% 41%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 87% 60%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%),
            radial-gradient(circle at 86% 41%, var(--sakura) 0.25%, var(--sakura2) 2.5%, transparent 11%);
        background-size: 100% 100%;
        display: block;
        width: 600px;
        height: 500px;
        background-repeat: no-repeat;
        position: absolute;
        top: 0px;
        left: -1%;
        z-index: 10;
        transform: translateX(0%) translateY(0%);
    }
    & .sakura {
        position: absolute;
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 10px;
        left: 0px;
        overflow: hidden;
        perspective: 50px;
        border-radius: 0% 70%;
        & .sakura_inner {
            padding: 10px;
            position: absolute;
            list-style: none;
            background: var(--sakura);
            border-radius: 0% 80% 0% 60% / 0% 70% 0% 90%;
            top: 0px;
            &:nth-child(2n) {
                background: var(--sakura2);
                border-radius: 0% 70% 0% 90% / 0% 90% 0% 70%;
            }
            &:nth-child(1) {
                left: 0px;
                animation:
                    10s ease-in-out 0s infinite normal none running fall,
                    3s ease-in-out 0s infinite alternate none running sakura_rotate2;
            }
            &:nth-child(2) {
                left: 5%;
                animation:
                    15s ease-in-out 0s infinite normal none running fall,
                    2s ease-in-out 0s infinite alternate none running sakura_rotate3;
            }
            &:nth-child(3) {
                left: 15%;
                animation:
                    9s ease-in-out 0s infinite normal none running fall,
                    3.5s ease-in-out 0s infinite alternate none running sakura_rotate1;
            }
            &:nth-child(4) {
                left: 30%;
                animation:
                    8s ease-in-out 0s infinite normal none running fall,
                    6s ease-in-out 0s infinite alternate none running sakura_rotate2;
            }
            &:nth-child(5) {
                left: 40%;
                animation:
                    10s ease-in-out 0s infinite normal none running fall,
                    4s ease-in-out 0s infinite alternate none running sakura_rotate3;
            }
            &:nth-child(6) {
                left: 55%;
                animation:
                    11s ease-in-out 0s infinite normal none running sakura_fall,
                    3s ease-in-out 0s infinite alternate none running sakura_rotate1;
            }
            &:nth-child(7) {
                left: 65%;
                animation:
                    7s ease-in-out 0s infinite normal none running sakura_fall,
                    3.5s ease-in-out 0s infinite alternate none running sakura_rotate2;
            }
            &:nth-child(8) {
                left: 50%;
                animation:
                    7s ease-in-out 0s infinite normal none running sakura_fall,
                    5s ease-in-out 0s infinite alternate none running sakura_rotate3;
            }
            &:nth-child(9) {
                left: 60%;
                animation:
                    10s ease-in-out 0s infinite normal sakura_fall,
                    2s ease-in-out 0s infinite alternate sakura_rotate1;
            }
            &:nth-child(10) {
                left: 75%;
                animation:
                    10s ease-in-out 0s infinite normal sakura_fall,
                    3.5s ease-in-out 0s infinite alternate sakura_rotate2;
            }
            &:nth-child(11) {
                left: 85%;
                animation:
                    5s ease-in-out 0s infinite normal sakura_fall,
                    4s ease-in-out 0s infinite alternate sakura_rotate3;
            }
            &:nth-child(12) {
                left: 90%;
                animation:
                    10s ease-in-out 0s infinite normal sakura_fall,
                    3.5s ease-in-out 0s infinite alternate sakura_rotate1;
            }
        }
    }
}
.sheet_content {
    position: absolute;
    width: 500px;
    height: 23%;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, 0);
    border-bottom: 92px solid var(--blue);
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
}

/* 弁当 */
.bento_content {
    overflow: hidden;
    width: 150px;
    position: absolute;
    bottom: 2px;
    left: calc(50% + 20px);
    background: var(--brown2);
    padding: 0 0 0.5%;
    transform: translateX(-50%) translateY(0%) scale(1, 0.7);
    & .bento__content_inner {
        border: 0.2vw solid var(--brown);
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        box-shadow: 0 2vw 0 var(--brown);
        margin: 0px;
    }
    & .bento__block {
        border: .25vw solid var(--brow2);
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        background: var(--brown2);
        box-shadow: inset .05vw .10vw 0 var(--brown);
        position: relative;
        box-sizing: border-box;
        & .bento__block__left {
            border: 0;
            width: 100%;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }
        & .bento__block__left__top {
            border: .25vw solid var(--red2);
            width: 100%;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            padding: 0.1vw;
            background-color: var(--red);
            box-shadow: inset .05vw .05vw 0 var(--darkbrown);
            & .bento__egg__block {
                display: flex;
                flex-wrap: wrap;
                width: 50%;
                & .bento__egg__element {
                    background-color: var(--yellow);
                    width: 100%;
                    padding: 30% 0 0;
                    border-radius: 30% 30% 50% 30% / 40% 30% 40% 40%;
                    margin: 0 0 -.1vw;
                    position: relative;
                    box-shadow: inset -0.1vw -0.13vw 0 var(--darkbrown);
                    &:nth-of-type( 1 ):before {
                        top: 57%;
                    }
                    &:nth-of-type( 1 ):after {
                        top: 30%;
                    }
                    &:nth-of-type( 2 ) {
                        border-radius: 60% 50% 50% 30% / 20% 30% 30% 80%;
                        box-shadow: inset -.1vw -.1vw 0 var(--darkbrown);
                    }
                    &:before, &:after {
                        position: absolute;
                        background: var(--white);
                        width: 25%;
                        padding: 10% 0 0 0;
                        transform: translateY(-50%) translateX(-50%);
                    }
                    :before {
                        top: 39%;
                        left: 30%;
                        border-radius: 80% 80% 48% 80% / 40% 70% 90% 90%;
                    }
                    :after {
                        border-radius: 20% 40% 48% 80% / 80% 70% 40% 90%;
                        padding: 5% 0 0 0;
                        right: 10%;
                        top: 55%;
                        width: 20%;
                    }
                }
            }
            & .bento__chicken__block {
                display: flex;
                flex-wrap: wrap;
                width: 50%;
                & .bento__chicken__element {
                    width: 100%;
                    padding: 30%;
                    background: linear-gradient(var(--darkbrown2),var(--darkbrown) 80%););
                    border-radius: 60% 50% 50% 30% / 20% 30% 30% 50%;
                    box-shadow: inset -.1vw -.1.5vw 0 var(--darkbrown);
                    position: relative;
                    &:before, &:after {
                        position: absolute;
                    }
                }
                & .bento__chicken__pattern {
                    position: absolute;
                    transform: translateY(-50%) translateX(-50%);
                    &:nth-of-type( 1 ) {
                        background: radial-gradient(var(--darkbrown),var(--darkbrown3) 80%);
                        width: 80%;
                        padding: 50% 0 0 0;
                        border-radius: 30% 70% 50% 30% / 50% 30% 60% 70%;
                        top: 58%;
                        left: 58%;
                    }
                    &:before, &:after {
                        position: absolute;
                        background-color: var(--white);
                        width: 50%;
                        padding: 10% 0 0;
                        transform: translateY(-50%) translateX(-50%);
                    }
                    &:before {
                        top: 20%;
                        left: 50%;
                        border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
                    }
                    &:after {
                        top: 27%;
                        left: 85%;
                        border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
                    }
                }
            }
        }
        & .bento__block__left__bottom {
            border: .25vw solid var(--blue2);
            width: 100%;
            padding: 0;
            background-color: var(--blue);
            box-shadow: inset 0.25vw 0.25vw 0 var(--blue2);
            & .bento__sukiyaki {
                & .sukiyakientry {
                    position: relative;
                    padding: 70% 0 0;
                    & .sukiyakientry_item {
                        position: absolute;
                    }
                    & .ninjin {
                        top: 0;
                        left: 9%;
                        width: 30%;
                        padding: 50% 0 0;
                        background: var(--orange);
                        border-radius: 80% 40% 30% 70% / 60% 30% 80% 40%;
                        box-shadow: inset -.25vw -.25vw 0 var(--orange2);
                        transform: rotate(126deg);
                    }
                    & .niku {
                        width: 60%;
                        padding: 50% 0 0;
                        background: var(--red-gradient);
                        border-radius: 60% 70% 100% 30% / 50% 30% 70% 80%;
                        box-shadow: inset -0.75vw -0.025vw .25vw var(--brown);
                        top: -2%;
                        right: 10%;
                    }
                    & .mushroom {
                        width: 40%;
                        padding: 42% 0 0;
                        background: var(--darkbrown3);
                        border-radius: 40% 40% 40% 40%;
                        box-shadow: inset -.1vw -.1vw .1vw var(--darkbrown2);
                        top: 39%;
                        left: 0;
                        transform: rotate(10deg);
                        & .mushroom-skew {
                            display: block;
                            width: 40%;
                            height: 40%;
                            background: var(--darkbrown2);
                            position: absolute;
                            & > * {
                            transform: translateY(-50%) translateX(-50%);
                            }
                            &.mushroom-skew-1 {
                                transform: rotate(0deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
                                left: 23%;
                                top: 30%;
                            }
                            &.mushroom-skew-2 {
                                transform: rotate(60deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
                                top: 28%;
                                left: 24%;
                            }
                            &.mushroom-skew-3 {
                                transform: rotate(120deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
                                top: 30%;
                                left: 24%;
                            }
                        }
                    }
                    & .shungiku {
                        position: absolute;
                        top: 49%;
                        right: 8%;
                        width: 10%;
                        padding: 38% 0 0;
                        transform: rotate(22deg);
                        &:last-child {
                            right: 18%;
                            top: 45%;
                            transform:rotate(-5deg);
                        }    
                        & .shungiku-skew {
                            display: block;
                            width: 50%;
                            padding: 70% 0 0;
                            background: var(--green);
                            position: absolute;
                            border-radius: .5vw;
                            box-shadow: inset -.25vw -.1vw 0 var(--green2);
                            z-index: 3;
                            &.shungiku-skew-1 {
                                transform: rotate(50deg) skew(calc((60deg - 3deg)));
                                right: 29%;
                                top: 9%;
                            }
                            &.shungiku-skew-2 {
                                transform: rotate(30deg) skew(calc((60deg - 3deg)));
                                right: 61%;
                                top: 23%;
                            }
                            &.shungiku-skew-3 {
                                transform: rotate(70deg) skew(calc((60deg - 3deg)));
                                left: 50%;
                                top: 30%;
                            }
                            &.shungiku-skew-4 {
                                transform: rotate(90deg) skew(calc((60deg - 0deg)));
                                left: 60%;
                                top: 40%;
                            }
                            &.shungiku-skew-5 {
                                transform: rotate(41deg) skew(calc((60deg - 3deg)));
                                right: 43%;
                                top: 19%;
                            }
                            &.shungiku-skew-6 {
                                transform: rotate(30deg) skew(calc((60deg - 3deg)));
                                right: 50%;
                                top: 40%;
                            }
                            &.shungiku-skew-7 {
                                transform: rotate(70deg) skew(calc((60deg - 3deg)));
                                left: 58%;
                                top: 50%;
                            }
                            &.shungiku-skew-8 {
                                transform: rotate(90deg) skew(calc((60deg - 0deg)));
                                left: 60%;
                                top: 28%;
                            }
                            &.shungiku-skew-9 {
                                transform: rotate(39deg) skew(calc((60deg - 3deg)));
                                right: 43%;
                                top: 55%;
                            }
                            &.shungiku-skew-10 {
                                transform: rotate(30deg) skew(calc((60deg - 3deg)));
                                right: 59%;
                                top: 60%;
                            }
                            &.shungiku-skew-11 {
                                transform: rotate(70deg) skew(calc((60deg - 3deg)));
                                left: 42%;
                                top: 6%;
                            }
                            &.shungiku-skew-12 {
                                transform: rotate(90deg) skew(calc((60deg - 0deg)));
                                left: 60%;
                                top: 58%;
                            }
                            & :after {
                                content: "";
                                position: absolute;
                                height: 100%;
                                border-left: .25vw solid var(--green2);
                                padding: 100% 0 0;
                                left: 50%;
                                top: 0;
                                z-index: 2;
                                border-radius: 1vw .2vw .1vw 0;
                                transform: translateY(-0%) translateX(-50%);
                            }
                        }
                    }
                    & .greenonions {
                        width: 12%;
                        background: var(--white);
                        border-radius: 40% 20% 30% 10%;
                        box-shadow:
                            inset -0.15vw -0.15vw 0 var(--white2),
                            inset -0.15vw -0.15vw 0.3vw var(--white2);
                        padding: 30% 0 0;
                        top: 0;
                        right: 15%;
                        z-index: 1;
                        transform: rotate(26deg);
                        & .sukiyakientry_item_inner {
                            border: .1vw solid var(--green);
                            position: absolute;
                            width: 64%;
                            height: 70%;
                            border-radius: 50% 20% 50% 20%;
                            top: 50%;
                            left: 45%;
                            transform: translateY(-50%) translateX(-50%);
                        }
                        &:nth-of-type( 2 ) {
                            top: 7%;
                            right: 4%;
                            transform: rotate(33deg);
                        }
                    }
                    & .tofu {
                        width: 30%;
                        padding: 40% 0 0;
                        background: var(--white);
                        border-radius: 10% 21% 10% 24%;
                        box-shadow: inset -0.5vw -0.3vw 0 var(--white2);
                        top: 74%;
                        right: 10%;
                        transform: translateY(-50%) translateX(-50%) rotate(80deg);
                    }
                }
            }
        }
    }
    & .bento__rice {
        width: 85%;
        height: 85%;
        background: var(--ricecolor3);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        border-radius: 26% 20% 25% 10% / 18% 14% 20% 10%;
        & .bento__rice__saltedplum {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 10%;
            padding: 10% 0 0;
            background: var(--red);
            border-radius: 40% 50% 50% 40%;
        }
        & .bento__rice__pattern {
            width: 25%;
            padding: 12% 0 0;
            top: -2%;
            left: 69%;
            transform: rotate(25deg);
            border-radius: 60%;
            background: var(--ricecolor3);
            position: absolute;
            border-radius: 86% 80% 75% 80% / 88% 84% 60% 80%;
            &:nth-of-type(2) {
                border-radius: 86% 80% 85% 80% / 88% 84% 80% 10%;
                top: -3%;
                left: 30%;
                width: 50%;
                padding: 14% 0 0;
                transform: rotate(0deg);
                &:before {
                    left: 26%;
                    top: 61%;
                }
            }
            &:nth-of-type(3) {
                border-radius: 86% 80% 85% 80% / 88% 84% 80% 60%;
                top: 70%;
                left: 33%;
                width: 52%;
                padding: 30% 0 0;
                z-index: 2;
                box-shadow: inset 0 -0.1vw 0 var(--ricecolor);
                transform: rotate(0deg);
            }
            &:nth-of-type(4) {
                border-radius: 86% 80% 85% 80% / 88% 84% 80% 50%;
                top: 70%;
                left: 3%;
                transform: rotate(0deg);
                box-shadow: inset 0 -0.127vw 0 var(--ricecolor);
                width: 30%;
                padding: 30% 0 0;
                &:before {
                    top: 8%;
                    width: 14%;
                    padding: 22% 0 0;
                    transform: rotate(110deg);
                }
                &:after {
                    top: 0;
                }
            }
            &:nth-of-type(5) {
                border-radius: 86% 80% 85% 80% / 88% 84% 80% 80%;
                top: 42%;
                left: -22%;
                transform: rotate(90deg);
                width: 50%;
                padding: 11% 0 0;
                &:before {
                    transform: rotate(45deg);
                    top: -136%;
                }
                &:after {
                    transform: rotate(45deg);
                    top: -100%;
                }
            }
            &:nth-of-type(6) {
                border-radius: 86% 80% 85% 80% / 58% 54% 30% 50%;
                top: 27%;
                left: 63%;
                transform: rotate(90deg);
                width: 55%;
                padding: 31% 0 0;
                box-shadow: inset 0 0.075vw 0 var(--ricecolor);
                &:before {
                    transform: rotate(45deg);
                    top: 80%;
                    left: 26%;
                }
                &:after {
                    transform: rotate(45deg);
                    top: 98%;
                    left: 15%;
                }
            }
            &:nth-of-type(7) {
                top: 74%;
                left: 73%;
                transform: rotate(-10deg);
                padding: 14% 0 0;
                z-index: 4;
                box-shadow: inset 0 -0.125vw 0 var(--ricecolor);
                &:before {
                    width: 13%;
                    padding: 26% 0 0;
                }
                &:after {
                    width: 13%;
                    padding: 26% 0 0;
                    left: 5%;
                }
            }
            &:before, &:after {
                content: '';
                background: var(--ricecolor);
                width: 8%;
                padding: 15% 0 0;
                border-radius: 50%;
                position: absolute;
                transform: rotate(125deg);
                box-shadow:
                    inset 0.15vw 0 0 var(--ricecolor2),
                    inset 0.15vw 0.15vw 0 var(--ricecolor2),
                    inset 0 0 0 var(--ricecolor2),
                    inset 0.15vw 0.05vw 0 var(--ricecolor2);
            }
            &:before {
                left: 26%;
                top: 39%;
            }
            &:after {
                left: 15%;
                top: 26%;
            }
        }
    }
}
@keyframes eye {
    0%, 51%, 53%, 98%, 100% {
        background: var(--black);
    }
    51.5%, 52.5%, 98.5%, 99.5% {
        background: transparent;
    }
    52%, 99% {
        background: var(--black);
    }
}
@keyframes eye-inner {
    0%, 51%, 53%, 98%, 100% {
        background: var(--eye-gradient);
    }
    51.5%, 52.5%, 98.5%, 99.5% {
        background: transparent;
    }
    52%, 99% {
        background: var(--eye-gradient);
    }
}
@keyframes eye-before {
    0%, 51%, 52%, 53%, 98%, 99%, 100% {
        top: 5%;
        background-color: var(--white);
        width: 65%;
        height: 45%;
    }
    51.5%, 52.5%, 98.5%, 99.5% {
        top: 62%;
        background-color: var(--black);
        width: 200%;
        height: 2%;
    }
    100% {
        width: 60%;
    }
}
@keyframes eye2 {
    0%, 51%, 53%, 98%, 100% {
        background: var(--brown);
    }
    51.5%, 52.5%, 98.5%, 99.5% {
        background: transparent;
    }
    52%, 99% {
        background: var(--brown);
    }
}
@keyframes eye-before2 {
    0%, 51%, 53%, 98%, 100% {
        box-shadow: inset 0 0 0 10px var(--black);
    }
    51.5%, 52.5%, 98.5%, 99.5% {
        box-shadow: inset 0 0 0 10px transparent;
    }
    52%, 99% {
        box-shadow: inset 0 0 0 10px var(--black);
    }
}
@keyframes sakura_fall {
    0% {
        top: 0%;
    }
    100% {
        top: 150%;
    }
}
@keyframes sakura_rotate1 {
    0% {
        transform: translateX(0px) translateZ(-50px) rotate(0deg);
    }
    100% {
        transform: translateX(100px) translateZ(-30px) rotateY(10deg);
    }
}
@keyframes sakura_rotate2 {
    0% {
        transform: translateX(0px) translateZ(-40px) rotate(0deg);
    }
    100% {
        transform: translateX(100px) translateZ(-60px) rotateY(20deg);
    }
}
@keyframes sakura_rotate3 {
    0% {
        transform: translateX(0px) translateZ(-40px) rotate(10deg);
    }
    100% {
        transform: translateX(100px) translateZ(-60px) rotateY(0deg);
    }
}
@media (420px <= width <= 600px ) {
    #container  {
        .sakura_content, .kirby_content, .wado_content, .bento_content, .sheet_content {
            zoom: 0.75;
        }
    }
}
@media (420px >= width){
    body {
        background: linear-gradient(0deg, var(--green), var(--green2) 50%, var(--waterblue) 51%, var(--waterblue2) 89.5%) no-repeat;
    }
    #container  {
        & .sakura_content, & .kirby_content, & .wado_content, & .bento_content, & .sheet_content {
            zoom: 0.5;
        }
        & .sakura_content{
            bottom: calc(50% + 120px);
            transform: translateX(-50%) translateY(50%);
        }
        & .kirby_content{
            bottom: calc(50% - 300px);
            transform: translateX(-50%) translateY(50%);
        }
        & .wado_content{
            bottom: calc(50% - 300px);
            transform: translateX(100%) translateY(50%);
        }
        & .bento_content{
            bottom: calc(50% - 375px);
        }
        & .sheet_content {
            bottom: calc(50% - 380px);
        }
    }
}