:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
      --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:15px;
     padding:0;
     height:100%;
     background-image:url('/images/1-babyblue1.gif');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
     overflow-y:hidden;
font-family: zen-maru-gothic,sans-serif;
font-style: normal;
    font-size: 14px;
}
    
body a {
  color: saddlebrown;
  font-weight:bold;
  }


 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:15px;
     height:100%;
}
 h1, h3, h5 {
     color:var(--dk-color);
      font-family: 'Gaegu', cursive;
}
 h2, h4, h6 {
     color:var(--accent);
      font-family: 'Gaegu', cursive;
  }

h1 a {
    text-decoration: none;
    color: white;
}
 #headerhp {
     max-width:890px;
     height:105px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     border-style: ri;
     background-image: url(/images/titleheader.png);
     border-radius: 25px;

}




 .title {
     font-size:80px;
     text-align:center;
     font-style:italic;
      font-family: 'Gaegu', cursive;
 text-shadow: 4px 4px 4px #aaa;
     color: white;
}
 #wrapper {
     margin:0 auto;
     max-width:890px;
}

#topmarquee {
    margin-top: 5px;
    margin-right: 5px;
    font-size:20px;
      font-family: 'Gaegu', cursive;
     text-shadow: 4px 4px 4px #aaa;
    color: hotpink;
    
    
}
.content {
  padding:10px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
     padding-top: 5px;
}

#three-boxes {
    display:flex;
    flex-wrap: wrap;
    max-width:900px;
}

.navbar {
    
    width: auto;
}

 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six, .zinebox {
     border:5px white;
     border-style: ridge;
     background-color:var(--lt-color);
     border-radius: 25px;
     box-shadow: 4px 4px 4px #000000;
}
 .box-one, .box-two{
     height:200px;
     width:320px;
     margin-left:5px;
}

.boxsns {
     margin-top:5px;
     margin-right:5px;
    margin-left: 5px;
    height:200px;
     width:175px;
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
     overflow: hidden;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:260px;
     height:326px;
     overflow: hidden;
     text-align: center;
}
 .box-four {
     margin-top:5px;
     margin-left:10px;
     width:581px;
     height:326px;
     overflow-y: inherit;
     background-image: url(images/witchpw.jpeg);
     
     
}

.zinebox {
    margin-top:5px;
     margin-left:5px;
     width:auto;
     height:500px;
    
}

.aboutbox {
    margin-top:5px;
     margin-left:5px;
     width:auto;
     height:500px;
    display:flex;
     flex-wrap:wrap;
    background-image: url(/images/witchpw.jpeg);
    background-repeat: round;
    border:5px white;
     border-style: ridge;
    overflow-y: inherit;
     border-radius: 25px;
     box-shadow: 4px 4px 4px #000000;
    
}

.aboutbox b {
    font-family: zen-maru-gothic,sans-serif;
font-weight: 700;
font-style: normal;
}

.aboutboxleft { 
    width: 600px;
    margin: 5px;
    
}



.aboutboxtext {
    width: auto;
    height: 450px;
    overflow: hidden;
    border: 5px;
    border-style:ridge;
    margin: 5px;
    border-radius: 25px;
    background-image: url(images/f-naka.gif);
     box-shadow: 4px 4px 4px #000000;
  
}

.aboutboxtext img{
    max-width: 200px;
    margin: 5px;
}

.aboutboxtext img right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}

.aboutboxscroll {
    width: auto;
    height: 390px;
    margin-left: 10px;
    overflow-y:scroll;
 font-family: zen-maru-gothic,sans-serif;
font-style: normal;
    font-size: 13px;

}

.aboutboximage {
    width: 200px;
    height: 150px;
    overflow: hidden;
    border: 1px;
    border-style:groove;
    margin: 5px;
    text-align: center;
        background-color: powderblue;
    border-radius: 25px;
     border: 5px;
    border-style:ridge;
    box-shadow: 4px 4px 4px #000000;

    
}

.aboutboxscroll2 {
    width: auto;
    height: 145px;
    margin-left: 10px;
    overflow-y:auto;
 font-family: zen-maru-gothic,sans-serif;
font-style: normal;
    font-size: 13px;

}

.aboutboxscroll2 img {
    max-width: 150px;
}

.aboutboxright {
    width: auto;
    height: 90%;
   margin-left: 5px;
    
}

.aboutboxrighttext {
    
    width: 200px;
    height: 300px;
    border: 5px;
    border-style:ridge;
    border-radius: 25px;
    background-color: lemonchiffon;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 4px 4px 4px #000000;
    
}

.aboutrightscroll {
    width: auto;
    max-height: 240px;
    margin-left: 5px;
    padding-right: 5px;
    height: 300px;
    border: 1px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: zen-maru-gothic,sans-serif;
font-style: normal;
    font-size: 13px;

}

.aboutrightscroll b {
    font-family: zen-maru-gothic,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 13px;
}
.aboutinner {
    width: auto;
    height: 400px;
}

.zineinner {
    width: auto;
    height: 400px;
}

.innerbox {
     height:220px;
    overflow-y: auto;
}

.innerbox1 {
    width: 98%;
    max-height:140px;
    margin: 5px;
    overflow: auto;
}

.aboutdoublebox {
    width: 265px;
    height: 290px;
     margin-left: 5px;
    border: 5px;
    border-style:ridge;
    border-radius: 25px;
    float: left; 
    overflow: hidden;
    background-color: #ffe8e3;
    box-shadow: 4px 4px 4px #aaa;
}

.aboutdoubleboxtext {
    width: 250px;
    height: 280px;
    margin: 5px;
    padding: 5px;
    overflow-y: auto;
}

.profilepic {
    width:200px;
    padding-left: 5px;
}

.profilepic img{
    width: 150px;
}

.profilesection {
    width: 280px;
    overflow: auto;
}

 .section-title {
     text-align:left;
     font-weight:bold;
     max-height: 40px;
     padding:5px;
    background-image: url(/images/check_004.gif);
     color:var(--dkest-color);
     font-size:30px;
      font-family: 'Gaegu', cursive;
     text-shadow: 4px 4px 4px #aaa;
     border-top-left-radius: 25px;
     border-top-right-radius: 25px;

}
.section-title img{
text-align: left;}

.absection-title {
    max-height: 60px;
     text-align:left;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
    background-image: url(/images/check_004.gif);
     color:var(--dkest-color);
     font-size:30px;
      font-family: 'Gaegu', cursive;
    text-shadow: 4px 4px 4px #aaa;}

 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:300px;
     height:50px;
     margin:0 auto;
     padding-left: 10px;
     margin-top:5px;
}
 button {
     width:140px;
     height:35px;
     font-weight:bold;
     border:solid;
     border-color:pink;
     margin-top:5px;
     margin-right:5px;
     border-radius: 25px;
     background-color: rgba(176, 224, 230, .5);

     box-shadow: 4px 4px 4px #aaa;
}
  button a {
    font-weight:bold;
       font-size:20px;
      font-family: 'Gaegu', cursive;
      color: hotpink;
      text-decoration: none;
  }

button img {
    text-align: center;
    width: 80%;
    margin-top: 5px
}

button:hover {
    box-shadow: 0px 0px 0px;
}
  p {
     padding:5px;
}
 p a {
  color:var(--dkest-color);
  font-weight:bold;
  }


 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-size:10px;
  }
 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:97.6%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six, .aboutbox, .aboutboxright, {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one, {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
     .aboutbox {
         overflow-y: auto;
     }
}


.box11 {
margin:1em 0; /* 中央寄せは0をautoに変更 */
width: 260px;
min-height: 326px;
}
.u01 {
background:url(/images/f-ue.gif) repeat-x;
height:45px;
margin:0 50px
}
.s01 {
background:url(/images/f-sita.gif) repeat-x;
height:13px;
margin:0 50px
}
.box-top {
background-image:url(/images/f-kado1.gif), url(/images/f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:45px
}
.box-center {
background-image:url(/images/f-migi.gif), url(/images/f-hidari.gif) , url(/images/f-naka.gif);
background-position:top right, top left, top center;
background-repeat:repeat-y, repeat-y ,repeat;
overflow: auto;
padding:10px;
text-align: center;
height: 250px;
}

.box-bottom {
background-image:url(/images/f-kado3.gif), url(/images/f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:13px
}

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

/* Track */
::-webkit-scrollbar-track {
  background: pink; 
        border-radius: 25px;

}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: lemonchiffon; 
        border-radius: 25px;

}