Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="content">
  <div id="bento" class="container">
    <main>
      <div id="main_content" class="container d-block d-md-flex mt-4 p-0">
        <div class="main_content col-md-10 p-0">
          <div class="bento__contents">
            <div class="bento__block">
              <div class="bento__block__left">
                <div class="bento__block__left__top">
                  <div class="bento__egg__block">
                    <div class="bento__egg__element"></div> 
                    <div class="bento__egg__element"></div> 
                    <div class="bento__egg__element"></div>
                  </div> 
                  <div class="bento__chicken__block">
                    <div class="bento__chicken__element">
                      <div class="bento__chicken__pattern"></div>
                    </div> 
                    <div class="bento__chicken__element">
                      <div class="bento__chicken__pattern"></div>
                    </div>
                  </div>
                </div> 
                <div class="bento__block__left__bottom">
                  <div class="bento__sukiyaki">
                    <div class="sukiyakientry">
                      <div class="sukiyakientry_item ninjin"></div> 
                      <div class="sukiyakientry_item greenonions">
                        <div class="sukiyakientry_item_inner"></div>
                      </div> 
                      <div class="sukiyakientry_item greenonions">
                        <div class="sukiyakientry_item_inner"></div>
                      </div> 
                      <div class="sukiyakientry_item niku"></div> 
                      <div class="sukiyakientry_item tofu"></div> 
                      <div class="sukiyakientry_item mushroom">
                        <div class="mushroom-skew mushroom-skew-1"></div> 
                        <div class="mushroom-skew mushroom-skew-2"></div> 
                        <div class="mushroom-skew mushroom-skew-3"></div>
                      </div> 
                      <div class="sukiyakientry_item shungiku">
                        <div class="shungiku-skew shungiku-skew-1"></div> 
                        <div class="shungiku-skew shungiku-skew-2"></div> 
                        <div class="shungiku-skew shungiku-skew-3"></div> 
                        <div class="shungiku-skew shungiku-skew-4"></div> 
                        <div class="shungiku-skew shungiku-skew-5"></div> 
                        <div class="shungiku-skew shungiku-skew-6"></div> 
                        <div class="shungiku-skew shungiku-skew-7"></div> 
                        <div class="shungiku-skew shungiku-skew-8"></div> 
                        <div class="shungiku-skew shungiku-skew-9"></div> 
                        <div class="shungiku-skew shungiku-skew-10"></div> 
                        <div class="shungiku-skew shungiku-skew-11"></div> 
                        <div class="shungiku-skew shungiku-skew-12"></div>
                      </div> 
                      <div class="sukiyakientry_item shungiku">
                        <div class="shungiku-skew shungiku-skew-1"></div> 
                        <div class="shungiku-skew shungiku-skew-2"></div> 
                        <div class="shungiku-skew shungiku-skew-3"></div> 
                        <div class="shungiku-skew shungiku-skew-4"></div> 
                        <div class="shungiku-skew shungiku-skew-5"></div> 
                        <div class="shungiku-skew shungiku-skew-6"></div> 
                        <div class="shungiku-skew shungiku-skew-7"></div> 
                        <div class="shungiku-skew shungiku-skew-8"></div> 
                        <div class="shungiku-skew shungiku-skew-9"></div> 
                        <div class="shungiku-skew shungiku-skew-10"></div> 
                        <div class="shungiku-skew shungiku-skew-11"></div> 
                        <div class="shungiku-skew shungiku-skew-12"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div> 
              <div class="bento__block__right">
                <div class="bento__block__right__top">
                  <div class="bento__salmon"></div> 
                  <div class="bento__suan"></div> 
                  <div class="bento__suan"></div> 
                  <div class="bento__tempura">
                    <div class="bento__tempura__tail"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div>
                  </div> 
                  <div class="bento__tempura__poteto">
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div> 
                    <div class="bento__tempura__pattern"></div>
                  </div>
                </div> 
                <div class="bento__block__right__bottom">
                  <div class="bento__apple">
                    <div class="bento__apple__inner">
                      <div class="bento__apple__inner__top"></div> 
                      <div class="bento__apple__inner__bottom"></div>
                    </div> 
                    <div class="bento__apple__inner">
                      <div class="bento__apple__inner__top"></div> 
                      <div class="bento__apple__inner__bottom"></div>
                    </div> 
                    <div class="bento__apple__inner">
                      <div class="bento__apple__inner__top"></div> 
                      <div class="bento__apple__inner__bottom"></div>
                    </div> 
                    <div class="bento__apple__inner">
                      <div class="bento__apple__inner__top"></div> 
                      <div class="bento__apple__inner__bottom"></div>
                    </div>
                  </div> 
                  <div class="bento__strawberry">
                    <div class="bento__strawberry__inner">
                      <div class="bento__strawberry__inner__top"></div> 
                      <div class="bento__strawberry__inner__bottom">
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div>
                      </div>
                    </div> 
                    <div class="bento__strawberry__inner">
                      <div class="bento__strawberry__inner__top"></div> 
                      <div class="bento__strawberry__inner__bottom">
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div>
                      </div>
                    </div> 
                    <div class="bento__strawberry__inner">
                      <div class="bento__strawberry__inner__top"></div> 
                      <div class="bento__strawberry__inner__bottom">
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div>
                      </div>
                    </div> 
                    <div class="bento__strawberry__inner">
                      <div class="bento__strawberry__inner__top"></div> 
                      <div class="bento__strawberry__inner__bottom">
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div> 
                        <div class="dot"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
            <div class="bento__block">
              <div class="bento__rice">
                <div class="bento__rice__saltedplum"></div> 
                <div class="bento__rice__pattern"></div> 
                <div class="bento__rice__pattern"></div> 
                <div class="bento__rice__pattern"></div> 
                <div class="bento__rice__pattern"></div> 
                <div class="bento__rice__pattern"></div> 
                <div class="bento__rice__pattern"></div>
              </div>
            </div>
          </div> 
          <div class="bento__box"></div> 
          <div class="mokumoku no1"></div> 
          <div class="mokumoku no2"></div> 
          <div class="mokumoku no3"></div>
        </div>
      </div>
    </main>
  </div>
</div>
              
            
!

CSS

              
                /**************
reset
**************/
body, div, span, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*::before, *::after {
    content: '';
}


/**************
content
**************/
#content {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}
#bento {
    overflow: hidden;
}
#bento .bento__contents {
    border: .5vw solid #EFC398;
    height: auto;
    border-radius: 0;
    -webkit-border-radius: .5vw;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    box-shadow: 0 5vw 0 #d8b28d;
    margin: 9vw 0;
}
#bento .bento__block {
    border: .5vw solid #e69b51;
    width: 50%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    padding: 0;
    background: #c78646;
    box-shadow: inset .1vw .10vw 0 #a56f39;
    position: relative;
}
#bento .bento__block__left {border: 0;
    width: 50%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
#bento .bento__block__left__top {
    border: .5vw solid #af3636;
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0.25vw;
    background-color: #8c2f2f;
    box-shadow: inset .10vw .10vw 0 #712727;
}
#bento .bento__egg__block {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}
#bento .bento__egg__element {
    background-color: #F9BE35;
    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.15vw -0.23vw 0 #96622E;
}
#bento .bento__egg__element:nth-of-type( 1 ):before {
    top: 57%;
}
#bento .bento__egg__element:nth-of-type( 1 ):after {
    top: 30%;
}
#bento .bento__egg__element:nth-of-type( 2 ) {
    border-radius: 60% 50% 50% 30% / 20% 30% 30% 80%;
    box-shadow: inset -.6vw -.2vw 0 #96622E;
}
#bento .bento__egg__element:nth-of-type( 3 ) {
    margin: 0;
    border-radius: 10% 80% 50% 30% / 80% 30% 60% 50%;
}
#bento .bento__egg__element:nth-of-type( 3 ):before {
    top: 50%;
    border-radius: 60% 80% 50% 30% / 80% 30% 60% 50%;
    width: 30%;
    padding: 7% 0 0;
}
#bento .bento__egg__element:nth-of-type( 3 ):after {
    width: 30%;
    top:   70%; 
    right: 10%;
}
#bento .bento__egg__element:before, #bento .bento__egg__element:after {
    position: absolute;
    background: white;
    width: 25%;
    padding: 10% 0 0 0;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
#bento .bento__egg__element:before {
    top: 39%;
    left: 30%;
    border-radius: 80% 80% 48% 80% / 40% 70% 90% 90%;
}
#bento .bento__egg__element:after {
    border-radius: 20% 40% 48% 80% / 80% 70% 40% 90%;
    padding: 5% 0 0 0;
    right: 10%;
    top: 55%;
    width: 20%;
}
#bento .bento__chicken__block {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}
#bento .bento__chicken__element {
    width: 100%;
    padding: 30%;
    background: linear-gradient(#8a6143,#6f4e36 40%,#715038 70%,#715038 80%);
    border-radius: 60% 50% 50% 30% / 20% 30% 30% 50%;
    box-shadow: inset -.4vw -.5vw 0 #614326;
    position: relative;
}
#bento .bento__chicken__element:before,
#bento .bento__chicken__element:after {
    position: absolute;
}
#bento .bento__chicken__pattern {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
#bento .bento__chicken__pattern:nth-of-type( 1 ) {
    background: radial-gradient(#654541,#402e28 40%,#4a2a1e 70%,#3c1c11 80%);
    width: 80%;
    padding: 50% 0 0 0;
    border-radius: 30% 70% 50% 30% / 50% 30% 60% 70%;
    top: 58%;
    left: 58%;
}
#bento .bento__chicken__element:nth-of-type( 2 ) {
    border-radius: 60% 30% 50% 60% / 60% 40% 40% 50%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
}
#bento .bento__chicken__element:nth-of-type( 2 ) .bento__chicken__pattern {
    border-radius: 60% 70% 50% 30% / 50% 30% 50% 80%;
    top: 58%;
    left: 48%;
}
#bento .bento__chicken__pattern:before,
#bento .bento__chicken__pattern:after {
    position: absolute;
}
#bento .bento__chicken__pattern:before {
    background-color: white;
    width: 50%;
    padding: 10% 0 0;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    top: 20%;
    left: 50%;
    border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
}
#bento .bento__chicken__pattern:after {
    background-color: white;
    width: 10%;
    padding: 10% 0 0;
    top: 27%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    left: 85%;
    border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
}
#bento .bento__block__left__bottom {
    border: .5vw solid #1c2484;
    width: 100%;
    padding: 0;
    background-color: #141a56;
    box-shadow: inset 1vw 1vw 0 #0c103a;
}
#bento .bento__sukiyaki .sukiyakientry {
    position: relative;
    padding: 70% 0 0;
}
#bento .bento__sukiyaki .sukiyakientry:before {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
    background-color: #3c1f1f;
    width: 90%;
    padding: 60% 0 0 0;
    top: 50%;
    left: 50%;
}
#bento .bento__sukiyaki .sukiyakientry_item {
    position: absolute;
}
#bento .bento__sukiyaki .ninjin {
    top: 0;
    left: 9%;
    width: 30%;
    padding: 50% 0 0;
    background: #FF5F00;
    border-radius: 80% 40% 30% 70% / 60% 30% 80% 40%;
    box-shadow: inset -.25vw -.25vw 0 #F44A1C;
    -webkit-transform: rotate(126deg);
    transform: rotate(126deg);
}
#bento .bento__sukiyaki .niku {
    width: 60%;
    padding: 50% 0 0;
    background: linear-gradient(#7d2b21,#9a2800 40%,#802f10 70%,#75280d 80%);
    border-radius: 60% 70% 100% 30% / 50% 30% 70% 80%;
    box-shadow: inset -0.75vw -0.025vw .25vw #562010;
    top: -2%;
    right: 10%;
}
#bento .mushroom {
    width: 40%;
    padding: 42% 0 0;
    background: radial-gradient(#443d3d,#402e28 40%,#4a2a1e 70%,#3c1c11 80%);
    border-radius: 40% 40% 40% 40%;
    box-shadow: inset -.8vw -.1vw .15vw #84644e;
    top: 39%;
    left: 0;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
}
#bento .mushroom .mushroom-skew {
    display: block;
    width: 40%;
    height: 40%;
    background: #795f5f;
    position: absolute;
}
#bento .mushroom .mushroom-skew > * {
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}
#bento .mushroom .mushroom-skew-1 {
    -webkit-transform: rotate(0deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
            transform: rotate(0deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
    left: 23%;
    top: 30%;
}
#bento .mushroom .mushroom-skew-2 {
    -webkit-transform: rotate(60deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
            transform: rotate(60deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
    top: 28%;
    left: 24%;
}
#bento .mushroom .mushroom-skew-3 {
    -webkit-transform: rotate(120deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
            transform: rotate(120deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
    top: 30%;
    left: 24%;
}
#bento .shungiku {
    position: absolute;
    top: 49%;
    right: 8%;
    width: 10%;
    padding: 38% 0 0;
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg);
}
#bento .shungiku:last-child {
    right: 18%;
    top: 45%;
    -webkit-transform:rotate(-5deg);
            transform:rotate(-5deg);
}
#bento .shungiku .shungiku-skew {
    display: block;
    width: 50%;
    padding: 70% 0 0;
    background: #7B9D52;
    position: absolute;
    border-radius: .5vw;
    box-shadow: inset -.25vw -.1vw 0 #5a733c;
    z-index: 3;
}
#bento .shungiku .shungiku-skew-1 {
    -webkit-transform: rotate(50deg) skew(calc((60deg - 3deg)));
            transform: rotate(50deg) skew(calc((60deg - 3deg)));
    right: 29%;
    top: 9%;
}
#bento .shungiku .shungiku-skew-2 {
    -webkit-transform: rotate(30deg) skew(calc((60deg - 3deg)));
            transform: rotate(30deg) skew(calc((60deg - 3deg)));
    right: 61%;
    top: 23%;
}
#bento .shungiku .shungiku-skew-3 {
    -webkit-transform: rotate(70deg) skew(calc((60deg - 3deg)));
            transform: rotate(70deg) skew(calc((60deg - 3deg)));
    left: 50%;
    top: 30%;
}
#bento .shungiku .shungiku-skew-4 {
    -webkit-transform: rotate(90deg) skew(calc((60deg - 0deg)));
            transform: rotate(90deg) skew(calc((60deg - 0deg)));
    left: 60%;
    top: 40%;
}
#bento .shungiku .shungiku-skew-5 {
    -webkit-transform: rotate(41deg) skew(calc((60deg - 3deg)));
            transform: rotate(41deg) skew(calc((60deg - 3deg)));
    right: 43%;
    top: 19%;
}
#bento .shungiku .shungiku-skew-6 {
    -webkit-transform: rotate(30deg) skew(calc((60deg - 3deg)));
            transform: rotate(30deg) skew(calc((60deg - 3deg)));
    right: 50%;
    top: 40%;
}
#bento .shungiku .shungiku-skew-7 {
    -webkit-transform: rotate(70deg) skew(calc((60deg - 3deg)));
            transform: rotate(70deg) skew(calc((60deg - 3deg)));
    left: 58%;
    top: 50%;
}
#bento .shungiku .shungiku-skew-8 {
    -webkit-transform: rotate(90deg) skew(calc((60deg - 0deg)));
            transform: rotate(90deg) skew(calc((60deg - 0deg)));
    left: 60%;
    top: 28%;
}
#bento .shungiku .shungiku-skew-9 {
    -webkit-transform: rotate(39deg) skew(calc((60deg - 3deg)));
            transform: rotate(39deg) skew(calc((60deg - 3deg)));
    right: 43%;
    top: 55%;
}
#bento .shungiku .shungiku-skew-10 {
    -webkit-transform: rotate(30deg) skew(calc((60deg - 3deg)));
            transform: rotate(30deg) skew(calc((60deg - 3deg)));
    right: 59%;
    top: 60%;
}
#bento .shungiku .shungiku-skew-11 {
    -webkit-transform: rotate(70deg) skew(calc((60deg - 3deg)));
           transform: rotate(70deg) skew(calc((60deg - 3deg)));
    left: 42%;
    top: 6%;
}
#bento .shungiku .shungiku-skew-12 {
    -webkit-transform: rotate(90deg) skew(calc((60deg - 0deg)));
            transform: rotate(90deg) skew(calc((60deg - 0deg)));
    left: 60%;
    top: 58%;
}
#bento .shungiku:after {
    content: "";
    position: absolute;
    height: 100%;
    border-left: .25vw solid #a5cc75;
    padding: 100% 0 0;
    left: 50%;
    top: 0;
    z-index: 2;
    border-radius: 1vw .2vw .1vw 0;
    -webkit-transform: translateY(-0%) translateX(-50%);
            transform: translateY(-0%) translateX(-50%);
}
#bento .greenonions {
    width: 12%;
    background: linear-gradient(#fbfbfb,#e6e6e6 40%,#e2dede 70%,#d6d1d1 80%);
    border-radius: 40% 20% 30% 10%;
    box-shadow: inset -0.15vw -0.15vw 0 #8c8c8c, inset -0.15vw -0.15vw 0.3vw #8c8c8c;
    padding: 30% 0 0;
    top: 0;
    right: 15%;
    z-index: 1;
    -webkit-transform: rotate(26deg);
            transform: rotate(26deg);
}
#bento .greenonions .sukiyakientry_item_inner {
    border: .1vw solid #5ed422;
    position: absolute;
    width: 64%;
    height: 70%;
    border-radius: 50% 20% 50% 20%;
    top: 50%;
    left: 45%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}
#bento .greenonions:nth-of-type( 2 ) {
    top: 7%;
    right: 4%;
    -webkit-transform: rotate(33deg);
            transform: rotate(33deg);
}
#bento .tofu {
    width: 30%;
    padding: 40% 0 0;
    background: #e6e6e6;
    border-radius: 10% 21% 10% 24%;
    box-shadow: inset -0.5vw -0.3vw 0 #c5c5c5;
    top: 74%;
    right: 10%;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(80deg);
            transform: translateY(-50%) translateX(-50%) rotate(80deg);
}
#bento .bento__block__right {
    border: 0;
    width: 50%;
    padding: 0;
}
#bento .bento__block__right__top {
    border: .5vw solid #3f841c;
    width: 100%;
    position: relative;
    padding: 59% 0 0;
    background: #3f841c;
    box-shadow: inset 1vw 1vw 0 #346d17;
}
#bento .bento__salmon {
    background: linear-gradient(120deg, #c7994e ,#deb678 30%,#e9c999 50%,#ffdca8 80%);
    width: 100%;
    padding: 35% 0 0;
    position: absolute;
    top: 0;
    left: 1%;
    border-radius: 90% 80% 50% 80% / 45% 50% 100% 80%;
    z-index: 1;
    box-shadow: inset 0 0.5vw 0.1vw 0.05vw #91846b, inset 0 0 0 0 #91846b, inset 0 0 0 0 #91846b, inset 0 0 0 0.08vw #af8746;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

#bento .bento__suan {
    background: radial-gradient(#cca626,#e4ba2a 90%);
    width: 35%;
    position: absolute;
    padding: 25% 0 0;
    border-radius: 56% 50% 50% 30% / 30% 30% 30% 50%;
    box-shadow: inset -0.25vw -0.25vw 0 #efc01e, inset -0.15vw -0.15vw 0 #dab01d, inset -0.1vw -0.1vw 0 #caa117, inset -0.05vw -0.05vw 0 #c59e15, -0.05vw -0.05vw 0.35vw #c59e15;
    bottom: 3%;
    left: 0%;
}
#bento .bento__suan:nth-of-type( 2 ) {
    left: 8%;
    bottom: 0%;
}
#bento .bento__tempura{
    width: 64%;
    padding: 16% 0 0;
    position: absolute;
    border-radius: 10% 80% 50% 30% / 80% 30% 60% 50%;
    background: linear-gradient(120deg, #e2b61d ,#e6bd2d 25%,#e4ca65 50%,#f7da6c 70%);
    bottom: 14%;
    right: 10%;
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
    z-index: 1;
    box-shadow: inset 0.25vw -0.25vw 0 #d2a91d, inset 0.15vw -0.15vw 0 #dab01d, inset 0.1vw -0.1vw 0 #caa117, inset 0.05vw -0.05vw 0 #c59e15, -0.05vw -0.05vw 0.35vw #c59e15;
}
#bento .bento__tempura .bento__tempura__tail {
    position: absolute;
    top: 43%;
    right: -16%;
    width: 17%;
    padding: 10% 0 0;
    background: linear-gradient(90deg,#e53502,#c72f03 40%,#c13208 80%);
    -webkit-transform: translateY(-50%) translateX(0%);
            transform: translateY(-50%) translateX(0%);
    border-radius: 60% 70% 50% 30% / 50% 70% 50% 80%;
}
#bento .bento__tempura .bento__tempura__tail:before,
#bento .bento__tempura .bento__tempura__tail:after {
    content: '';
    transform: translateY(-50%) translateX(0%) rotate( 90deg );
    -webkit-transform: translateY(-50%) translateX(0%) rotate( 90deg );
    border-radius: 90% 0% 90% 0% / 90% 0% 90% 0%;
    width: 30%;
    padding: 60% 0 0;
    position: absolute;
}
#bento .bento__tempura .bento__tempura__tail:before {
    top: 38%;
    right: -14%;
    background: linear-gradient(90deg,#e53502,#c72f03 40%,#c13208 80%);
}
#bento .bento__tempura .bento__tempura__tail:after {
    top: 30%;
    right: -15%;
    -webkit-transform: rotate( -80deg );
            transform: rotate( -80deg );
    background: linear-gradient(90deg,#c13208,#c72f03 40%,#e53502 80%);
}
#bento .bento__tempura .bento__tempura__pattern {
    position: absolute;
    width: 10%;
    padding: 10% 0 0;
    top: 15%;
    left: 10%;
}
#bento .bento__tempura .bento__tempura__pattern:before,
#bento .bento__tempura .bento__tempura__pattern:after {
    content: '';
    background: transparent;
    border-radius: 50%;
    position: absolute;
    -webtki-transform: rotate(180deg);
            transform: rotate(180deg);
    box-shadow: inset 0.1vw 0 0 #e07b0a;
    padding: 13% 0 0;
    width: 50%;
    padding: 75% 0 0;
}
#bento .bento__tempura .bento__tempura__pattern:before {
    top: 0;
    left: 0;
}
#bento .bento__tempura .bento__tempura__pattern:after {
    top: 73%;
    left: 6%;
}
#bento .bento__tempura .bento__tempura__pattern:nth-of-type( 2 ) {
    top: 16%;
    left: 27%;
}
#bento .bento__tempura .bento__tempura__pattern:nth-of-type( 3 ) {
    top: 18%;
    left: 41%;
    width: 10%;
    padding: 7% 0 0;
}
#bento .bento__tempura .bento__tempura__pattern:nth-of-type( 3 ):after {
    top: 100%;
    left: 0%;
}
#bento .bento__tempura .bento__tempura__pattern:nth-of-type( 4 ) {
    top: 10%;
    left: 55%;
    width: 13%;
    padding: 13% 0 0;
}
#bento .bento__tempura .bento__tempura__pattern:nth-of-type( 5 ) {
    top: 15%;
    left: 71%;
}
#bento .bento__tempura__poteto {
    background: radial-gradient(#ddad58,#f5cc83 90%);
    width: 35%;
    position: absolute;
    padding: 25% 0 0;
    border-radius: 56% 50% 50% 50% / 40% 70% 30% 50%;
    box-shadow: inset -0.25vw -0.25vw 0 #7F2109, inset -0.15vw -0.15vw 0 #7F2109, inset -0.35vw -0.1vw 0 #7F2109, inset -0.65vw -0.15vw 0 #7F2109, -0.05vw -0.05vw 0.35vw #7F2109;
    bottom: 3%;
    right: 2%;
}
#bento .bento__tempura__poteto .bento__tempura__pattern {
    position: absolute;
    width: 28%;
    padding: 20% 0 0;
    top: 15%;
    left: 10%;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:before {
    content: '';
    background: transparent;
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    -webkit-transform: rotate(170deg);
            transform: rotate(170deg);
    box-shadow: inset 0.05vw 0 0 #d09a4f;
    padding: 13% 0 0;
    width: 50%;
    padding: 75% 0 0;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:before {
    top: 0;
    left: 0;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:after {
    top: 73%;
    left: 6%;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:nth-of-type( 2 ) {
    top: 51%;
    left: 21%;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:nth-of-type( 3 ) {
    top: 49%;
    left: 33%;
    width: 30%;
    padding: 7% 0 0;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:nth-of-type( 3 ):after {
    top: 100%;
    left: 0%;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:nth-of-type( 4 ) {
    top: 31%;
    left: 47%;
    width: 30%;
    padding: 13% 0 0;
}
#bento .bento__tempura__poteto .bento__tempura__pattern:nth-of-type( 5 ) {
    top: 38%;
    left: 10%;
}
#bento .bento__block__right__bottom {
    border: .5vw solid #ecf924;
    width: 100%;
    padding: 67% 0 0;
    position: relative;
    background: #ecf924;
    box-shadow: inset 1vw 1vw 0 #cfda1f;
}
#bento .bento__block__right__bottom .bento__apple {
    width: 50%;
    position: absolute;
    top: 0;
    left: 4%;
}
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner {
    width: 100%;
    padding: 33% 0 0;
    background: #eee59d;
    border-radius: 40% 80% 40% 80% / 40% 80% 40% 80%;
    box-shadow: inset -0.25vw -0.25vw 0 #d6c45a;
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
    display: inline-block;
}
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner:nth-of-type( 2 ),
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner:nth-of-type( 3 ),
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner:nth-of-type( 4 ) {
    margin: 0;
    position: relative;
}
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner .bento__apple__inner__top {
    background: linear-gradient(45deg, #b50906, #e60603);
    width: 90%;
    padding: 20% 0 0;
    position: absolute;
    top: 0%;
    left: -2%;
    border-radius: 100% 10% 100% 10% / 100% 10% 100% 10%;
    -webkit-transform: rotate(11deg);
            transform: rotate(11deg);
    box-shadow: inset -0.05vw -0.05vw 0 #d6c45a;
}
#bento .bento__block__right__bottom .bento__apple .bento__apple__inner .bento__apple__inner__bottom {
    background: linear-gradient(45deg, #b50906, #e60603);
    width: 95%;
    padding: 20% 0 0;
    position: absolute;
    top: 45%;
    border-radius: 100% 0% 100% 10% / 100% 0% 100% 10%;
    left: -4%;
    -webkit-transform: rotate(27deg);
            transform: rotate(27deg);
    box-shadow: inset -0.05vw -0.05vw 0 #d6c45a;
}
#bento .bento__strawberry {
    width: 50%;
    position: absolute;
    top: 0%;
    left: 50%;
    padding: 70% 0 0;
}
#bento .bento__strawberry .bento__strawberry__inner {
    position: absolute;
    width: 60%;
    top: 32%;
    left: 15%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}
#bento .bento__strawberry .bento__strawberry__inner:nth-of-type( 2 ) {
    top: 40%;
    left: 68%;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(20deg);
            transform: translateY(-50%) translateX(-50%) rotate(20deg);
}
#bento .bento__strawberry .bento__strawberry__inner:nth-of-type( 3 ) {
    bottom: 0%;
    top: 62%;
    left: 15%;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(7deg);
            transform: translateY(-50%) translateX(-50%) rotate(7deg);
    z-index: 1;
}
#bento .bento__strawberry .bento__strawberry__inner:nth-of-type( 4 ) {
    top: 68%;
    z-index: 1;
    left: 61%;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(37deg);
            transform: translateY(-50%) translateX(-50%) rotate(37deg);
}
#bento .bento__strawberry .bento__strawberry__inner__top {
    display: block;
    width: 11%;
    padding: 23% 0 0;
    background: #678445;
    position: absolute;
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
    box-shadow: inset -0.1vw -0.1vw 0 #5a733c;
    top: -16%;
    left: 24%;
    -webkit-transform: rotate(17deg);
            transform: rotate(17deg);
    z-index: 2;
}
#bento .bento__strawberry .bento__strawberry__inner__top:before,
#bento .bento__strawberry .bento__strawberry__inner__top:after {
    content: '';
    display: block;
    width: 100%;
    padding: 300% 0 0;
    background: #678445;
    position: absolute;
    border-radius: 0% 100% 0% 100% / 00% 100% 0% 100%;
    box-shadow: inset -0.1vw -0.1vw 0 #5a733c;
    z-index: 10;
}
#bento .bento__strawberry .bento__strawberry__inner__top:before {
    -webkit-transform: rotate(32deg);
            transform: rotate(32deg);
    top: 9%;
    left: 80%;
}
#bento .bento__strawberry .bento__strawberry__inner__top:after {
    -webkit-transform: rotate(-62deg);
            transform: rotate(-62deg);
    top: 28%;
    left: -66%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom {
    width: 100%;
    padding: 130% 0 0;
    background: linear-gradient( 90deg, #cc0200,#c30503 30%,#ce0301 60%,#c30705 80%);
    border-radius: 60% 70% 20% 100% / 40% 70% 20% 100%;
    display: inline-block;
    position: relative;
    box-shadow: -0.15vw 0.15vw 0.25vw 0 #ab0a0a;
    z-index: 3;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom:before,
#bento .bento__strawberry .bento__strawberry__inner__bottom:after {
    content: '';
}
#bento .bento__strawberry .bento__strawberry__inner__bottom:before {
    background-color: white;
    width: 43%;
    padding: 7% 0 0;
    top: 26%;
    left: 76%;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(59deg);
            transform: translateY(-50%) translateX(-50%) rotate(59deg);
    border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
    position: absolute;
    z-index: 10;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom:after {
    background-color: white;
    width: 5%;
    padding: 5% 0 0;
    left: 90%;
    top: 47%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    border-radius: 60% 70% 50% 30% / 80% 80% 80% 80%;
    position: absolute;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot {
    background: #b90303;
    width: 10%;
    padding: 11% 0 0;
    border-radius: 80% 70% 80% 100% / 80% 70% 80% 100%;
    position:absolute;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:before,
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:after {
    content:'';
    background: #b90303;
    width: 100%;
    padding: 100% 0 0;
    border-radius: 60% 70% 20% 100% / 20% 70% 20% 100%;
    position: absolute;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:before {
    top: 180%;
    left: 120%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:after {
    bottom: 200%;
    left: 150%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 1 ) {
    top: 69%;
    left: 59%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 1 ):before {
    top: 100%;
    left: 170%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 1 ):after {
    bottom: 200%;
    left: 150%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 2 ) {
    top: 63%;
    left: 28%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 2 ):before {
    top: 150%;
    left: 140%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 2 ):after {
    bottom: 80%;
    left: 140%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 3 ) {
    top: 44%;
    left: 59%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 3 ):before {
    top: 0%;
    left: 180%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 3 ):after {
    bottom: 200%;
    left: 140%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 4 ) {
    top: 22%;
    left: 37%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 4 ):before {
    top: 50%;
    left: 180%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 4 ):after {
    bottom: 200%;
    left: 140%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 5 ) {
    top: 24%;
    left: 14%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 5 ):before {
    top: 86%;
    left: 100%;
}
#bento .bento__strawberry .bento__strawberry__inner__bottom .dot:nth-of-type( 5 ):after {
    bottom: 170%;
    left: 140%;
}
#bento .bento__rice {
    width: 85%;
    height: 85%;
    background: #fff;
    position: absolute;
    transform: translate(24vw, 7vw);
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    border-radius: 26% 20% 25% 10% / 18% 14% 20% 10%;
}
#bento .bento__rice__saltedplum {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    width: 10%;
    padding: 10% 0 0;
    background: radial-gradient(#ff8879,#fd6b38 40%,#fd6b38 70%,#fd6b38 80%);
    border-radius: 40% 50% 50% 40%;
    box-shadow: inset -0.15vw -0.23vw 0 #b5401c;
}
#bento .bento__rice__pattern {
    width: 25%;
    padding: 12% 0 0;
    top: -2%;
    left: 69%;
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
    border-radius: 60%;
    background: #fff;
    position: absolute;
    border-radius: 86% 80% 75% 80% / 88% 84% 60% 80%;
}
#bento .bento__rice__pattern:nth-of-type(2) {
    border-radius: 86% 80% 85% 80% / 88% 84% 80% 10%;
    top: -3%;
    left: 30%;
    width: 50%;
    padding: 12% 0 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
#bento .bento__rice__pattern:nth-of-type(3) {
    border-radius: 86% 80% 85% 80% / 88% 84% 80% 60%;
    top: 63%;
    left: 33%;
    width: 52%;
    padding: 30% 0 0;
    z-index: 2;
    box-shadow: inset 0 -0.2vw 0 #E8D6CC;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
#bento .bento__rice__pattern:nth-of-type(4) {
    border-radius: 86% 80% 85% 80% / 88% 84% 80% 50%;
    top: 60%;
    left: 13%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset 0 -0.25vw 0 #E8D6CC;
    width: 30%;
    padding: 30% 0 0;
}
#bento .bento__rice__pattern:nth-of-type(5) {
    border-radius: 86% 80% 85% 80% / 88% 84% 80% 80%;
    top: 42%;
    left: -23%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 50%;
    padding: 12% 0 0;
}
#bento .bento__rice__pattern:nth-of-type(6) {
    border-radius: 86% 80% 85% 80% / 58% 54% 30% 50%;
    top: 27%;
    left: 63%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 55%;
    padding: 31% 0 0;
    box-shadow: inset 0 0.15vw 0 #E8D6CC;
}
#bento .bento__rice__pattern:nth-of-type(7) {
    top: 72%;
    left: 73%;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    padding: 21% 0 0;
    z-index: 4;
    box-shadow: inset 0 -0.25vw 0 #E8D6CC;
}
#bento .bento__rice__pattern:before, #bento .bento__rice__pattern:after {
    content: '';
    background: #fff;
    width: 8%;
    padding: 15% 0 0;
    border-radius: 50%;
    position: absolute;
    transform: rotate(125deg);
    box-shadow: inset 0.15vw 0 0 #e4e2da, inset 0.15vw 0.15vw 0 #e4e2da, inset 0 0 0 #e4e2da, inset 0.15vw 0.05vw 0 #e4e2da;
}
#bento .bento__rice__pattern:before {
    left: 26%;
    top: 39%;
}
#bento .bento__rice__pattern:after {
    left: 15%;
    top: 26%;
}
#bento .bento__rice__pattern:nth-of-type(2):before {
    left: 26%;
    top: 61%;
}
#bento .bento__rice__pattern:nth-of-type(4):before {
    top: 8%;
    width: 14%;
    padding: 22% 0 0;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
}
#bento .bento__rice__pattern:nth-of-type(4):after {
    top: 0;
}
#bento .bento__rice__pattern:nth-of-type(5):before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: -136%;
}
#bento .bento__rice__pattern:nth-of-type(5):after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: -100%;
}
#bento .bento__rice__pattern:nth-of-type(6):before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 80%;
    left: 26%;
}
#bento .bento__rice__pattern:nth-of-type(6):after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 98%;
    left: 15%;
}
#bento .bento__rice__pattern:nth-of-type(7):before {
    width: 13%;
    padding: 26% 0 0;
}
#bento .bento__rice__pattern:nth-of-type(7):after {
    width: 13%;
    padding: 26% 0 0;
    left: 5%;
}
#bento .bento__box {
    left: 0;
    top: calc( 0% + 9vw);
    position: absolute;
    width: 100%;
    padding: calc(34.5% + .5vw + .5vw ) 0 0;
    background-color: #EFC398;
    z-index: 10;
    border-radius: .5vw;
    animation:2s ease infinite bento__box 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
#bento .mokumoku {
    width: 20%;
    padding: 20% 0 0 0;
    position: absolute;
    background: white;
    filter: blur(2vw);
    will-change: filter;
    z-index: 50;
    border-radius: 60% 50% 50% 30% / 20% 30% 30% 50%;
    left: 0;
    opacity: .2;
    animation:3s linear infinite mokumoku 5s;
}
#bento .mokumoku.no2 {
    left: 30%;
    animation:3s linear infinite mokumoku 5.24s;
}
#bento .mokumoku.no3 {
    left: 55%;
    width: 40%;
    animation: 3s linear infinite mokumoku 5.46s;
}

@media screen and (max-width: 767px) {
    #bento .bento__block {
        width: 100%;
    }
    #bento .bento__box {
        bottom: 0;
        padding: 137.5% 0 0;
        animation:2s ease infinite bento__box_sp 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    #bento .bento__block:nth-of-type( 2 ) {
        padding: 66% 0 0;
    }
    #bento .mokumoku {
        width: 80%;
        padding: 50% 0 0 0;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        filter: blur(8vw);
        will-change: filter;
        animation:3s linear infinite mokumokusp 5s;
    }
    #bento .mokumoku.no2,
    #bento .mokumoku.no3 {
        display: none;
    }
}
@media screen and (min-width: 768px) {
    #bento .main_content {
        overflow-y: hidden;    
    }
}
@media screen and (max-width: 768px) {
    #content {
        width: 90%;
        margin: 0 auto;
    }
}

@keyframes bento__box { 
    0% { top : calc( 9vw ); left: 0; } 
    20% { top: calc( 9vw ); left: 0; } 
    100% { top: calc( 9vw ); left: calc( 100% + 1.5vw ); }
}
@keyframes bento__box_sp { 
    0% { top: calc( 9vw ); left: 0; } 
    20% { top: calc( 9vw ); left: 0; } 
    100% { top: calc( 9vw ); left: calc( 100% + 3vw ); }
}
@keyframes mokumoku { 
    0% { opacity: 0; bottom: 10%;  } 
    25% { opacity: 1; } 
    75% { opacity: 1; } 
    100% { opacity: 0; bottom: 50%; }
}

@keyframes mokumokusp { 
    0% { opacity: 0; bottom: 0%; } 
    25% { opacity: 1; } 
    75% { opacity: 1; } 
    100% { opacity: 0; bottom: 70%; }
}
              
            
!

JS

              
                
              
            
!
999px

Console