<style>
    
/*Fade In */
   body {
            animation: fadeInAnimation ease 3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    
.s_box16 {
background:#f0f0f0;
border:1px dashed #999;
border-radius:10px;
box-shadow:4px 6px 0px #DCD8D8;
box-sizing:border-box;
margin:15px 0 25px; /* 中央寄せは0をautoに変更 */
padding:.5em;
width:100% /* 幅 */
}


@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}
    
@font-face {
    font-family: 'Mali';
    src: url('https://dl.dropbox.com/scl/fi/smb4k5rz17x9pvdrj0952/Mali-Regular.ttf?rlkey=vlpbb7i9r1cyyaby11pxbyu0v&');
    font-weight: normal;
    font-style: normal;
}
/*Fade In */
   body {
            animation: fadeInAnimation ease 3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
   
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #d94c7b #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 21px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #d94c7b;
    border-radius: -10px;
    border: 3px solid #ffffff;
  }

.body {
text-align:left;
}
      :root {
                --content: #43256E;
            }
            
             @font-face {
                font-family: "mali";
                src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf);
                }
                #magica {
                font-family: "Magica";
                }

            body {
                font-family: 'day';
                font-size:22px;
                text-align: center;
                margin: 0;
                background-color: #FEE9E6;
                color: #444140;
            }

            * {
                box-sizing: border-box;
            }
#container {
                padding-top: 25px;
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }
    body { cursor: url("/assets/cursor.gif") 0 0,  default; }

        
#container a:hover {
                color: #FABCB1;
                cursor: crosshair;
                text-decoration: wavy underline;
                transition: ease 0.5s;
            }


            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #B06D6D;
                text-decoration:none;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }
    
    #space:hover {
letter-spacing: 5px;
}
    
    #space {
text-decoration: none;
transition: 0.4s;
}

.tab { text-indent: 50px; }

/* box deco */
.u01 {
flex: 1;
background:url(/assets/f-ue.gif) repeat-x;
height:23px;
margin:0 23px
}
.s01 {
flex: 1;
background:url(/assets/f-sita.gif) repeat-x;
height:23px;
margin:0 23px
}
.box-top {
flex: 1;
background-image:url(/assets/f-kado1.gif), url(/assets/f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:23px
}
.box-center {
flex: 1;
background-image:url(/assets/f-migi.gif), url(/assets/f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y
}
.box-inner {
flex: 1;
order: 1;
background:#fff; /* 背景色 */
margin:0 23px
}
.box-bottom {
flex: 1;
background-image:url(/assets/f-kado3.gif), url(/assets/f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:23px
}



            main {
                
                flex: 1;
                padding: 20px;
                order: 2;
                background-color: white;
                border-color: white;
            }

            h1,
            h2,
            h3 {
                color: #6E4634; 
            }

            h1 {
                font-size: 1.5625em;
            }
            

              }

            @media only screen and (max-width: 500px) {
                #flex {
                    flex-wrap: wrap;
                }

                #container {
                    order: 1;
                }
                
            
/* Dashed border */
hr.dashed {
  border-top: 1px dashed #bbb;
}


::-webkit-scrollbar {
width: 14px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

::-webkit-scrollbar-button {
display: block;
width: 14px;
height: 16px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}



p.indent {
    text-align: left;
    text-indent: 30px;
}
</style>