:root {
     --color1:#214950;
     --color2:#232323;
     --color3:#337882;
     --color4:#1c3c6c;
     --accent:#ea8e5d;
}

@font-face {
  font-family: 'Sans-serif'; 
}


 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family: sans-serif;
     font-size:11px;
     color:var(--color3);
     background-color:var(--color2);
     background-image:url("-");
     background-attachment:fixed;
     background-size:17%;
     background-repeat:repeat;
     color:var(--color4);
     padding:1px;
}



 body a {
     color:var(--accent);
     font-weight:bold;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     margin-top:15px;
}
 h1, h2, h3, h4, h5 {
     color:var(--color1);
}
 #header {
     max-width:1000px;
     height:auto;
     margin:0 auto;
     
}
 .navbar li a {
     text-decoration:none;
     color:#ffffff;
     background-color:var(--color1);
     border-radius:25px;
     padding:15px;
}
 .navbar ul {
     list-style-type:none;
     padding-left:20px;
     padding-right:20px;
     border-radius:25px;
     background-color:var(--color1);
}
 .navbar {

     max-width:1000px;
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}
 .title {
     display:block;
     font-size:35px;
     text-align:center;
     color:var(--color4);
     margin-left:auto;
     margin-right:auto;
     width:75%;
     background-color:#f4f5f7;
     padding:10px;
     border-radius:25px;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:7px;
     padding-bottom:7px;
     background-color:var(--color1);
     color:#ffffff;
     font-size:12px;
     border-radius:25px;
}
 .wrapper {
     display:flex;
     flex-direction:row;
     height:auto;
     width:100%;
}

 .content {
     padding:10px;
}
 .main-content {
     border-radius:25px;
     margin-left:197px;
     width:700px;
     height:auto;
     background-color:#f4f5f7;
}

 .main-content2 {
     border-radius:25px;
     width:700px;
     height:auto;
     background-color:#f4f5f7;
}

.warp {
  text-decoration:none;
}


.navigation-button {
  text-align: center;
  position: relative;
}



 p {
     padding:5px;
}
 p a {
     color:var(--color4);
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--color3);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:var(--accent);
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:12px;
     margin-right:40px;
}
 .navbar a:hover{
     background:var(--color3);
     color:var(--accent);
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul {
     background:var(--drkbrown);
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid var(--color4);
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}

.sakuhin {
  border-radius:25px;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--color4);
     color:var(--color3);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}

 .main-content {
     width:600px;
     border-right:none;
}

 #container {
     max-width:1000px;
     
}


     .main-content {
         order:2;
         width:100%;
         border-bottom:none;
         border-radius:25px;
         margin-left:0px;
    }
    .main-content2 {
         order:2;
         width:100%;
         border-bottom:none;
         border-radius:25px;
         margin-left:0px;
    }
     .navbar a {
         padding-bottom:10px;
    }
   
     #container {
         max-width:1000px;
    }
    
}