*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;outline:none}
a img{border-style:none}
ul,li{list-style-type:none}

html{
font-size:62.5%;
position: relative;
min-height:100%
}
body{
cursor: url("https://files.catbox.moe/mmdseq.gif"), auto;
background: url('https://allyda.neocities.org/shrines/d69083cf-1ac2-47c7-aea1-fb1a5fbc1bce_needy_girl_overdose_desktop_bgbyequinox_86.webp');
color:#675950;/* 文字色 */
font-size:1.2em;/* 文字の大きさ */
font-family:'PixelMplus12-Regular','Verdana','Roboto','游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-weight: 100; 
font-style: normal;
letter-spacing:.1em;
line-height:1.5;
text-align:center;
overflow-wrap:break-word;
word-wrap:break-word;
height:100%;width:100%
}
a{
color:#8dd3e0
}
a:hover{
cursor: url("https://files.catbox.moe/9wfyin.gif"), auto;
text-decoration:underline
}
/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper{
text-align:left
}
/*--------------------------------------------------------
上
--------------------------------------------------------*/
header{
position:fixed;
top:0;left:0;
width:100%;
z-index:20
}
#header-inner{
padding:10px;
min-height:73px;
width:100%
}
header a{
color:#675950
}
/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents{
margin:0 auto;
height:100%;
width:1000px; /* 全体の幅・大きさはここで変更 */
}
#contents-inner{
padding:20px
}
.block{
background-image:url(https://files.catbox.moe/4exmau.gif);
border-radius:5px;
box-shadow:0 1px 5px #ccc;
clear:both;
margin:0 0 20px 0;
padding:15px;
word-wrap:break-word
}
.block-inner{
background:#fff;
padding:10px
}
/*--------------------------------------------------------
下
--------------------------------------------------------*/
footer{
background:url(image/back02.png)  repeat-x 100% 0;
position:fixed;
bottom:0;left:0;
min-height:50px;
width:100%;
z-index:10
}
#footer-inner{
padding-top:20px;
text-align:center
}
footer a{
color:#b6e8f2
}
/*--------------------------------------------------------
index
--------------------------------------------------------*/
#index{
background:url(image/back02.png) #fff repeat-x 0 100%;
height:auto
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
font-size:1.2em;
line-height:1;
margin:10px 0;
position:absolute;
text-align:center;
bottom:0;left:0;
width:100%
}
nav li{
display:inline-block; /* 横並び */
position:relative; /* サブメニュー表示位置の基準 */
height:2em;line-height:2em; /* メニュー高さ */
}
nav > ul > li+li:before{
content:url(image/icon02.gif)
}
nav li a,nav li span{
color:#675950;
display:inline-block;
padding:0 5px;
text-decoration:none
}
nav li a:hover,nav li span:hover{
text-decoration:none
}
/* サブメニュー */
.sub-menu{
background:#f4cbcf;
position:absolute;
width:180px; /* サブメニュー幅 */
z-index:20
}
.sub-menu li{
display:block; /* 横並びをリセット */
visibility:hidden; /* 隠す */
overflow:hidden; /* 隠す */
height:0; /* 隠す */
width:100%
}
.sub-menu li a{
display:block
}
.sub-menu li a:hover{
background:#b6e8f2;
color:#fff
}
nav li:hover .sub-menu li{
visibility:visible;
overflow:visible;
height:3em;line-height:3em; /* サブメニュー高さ */
transition: .5s
}
#open{display:none}
/*--------------------------------------------------------
ページ上部へのリンク、著作権表示
--------------------------------------------------------*/
#pagetop{
display:block;
position:fixed;
padding-top:5px;
right:10px;bottom:-100px;
width:50px;height:50px;
z-index:50;
-webkit-transition:.5s;
transition:.5s
}
#pagetop:before,#pagetop:after{
position:absolute;
content:"";
width:28px;height:40px;
background:#ffb9c5
}
#pagetop:before{
left:6px;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
border-radius:50px 50px 0 0
}
#pagetop:after{
left:16px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
border-radius:50px 50px 0 0
}
.arrow{
border-left:3px solid #fff;
border-top:3px solid #fff;
position:absolute;
top:40%;left:38%;
height:12px;width:12px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
box-sizing:border-box;
z-index:2
}
#pagetop:hover,#fl:hover{
transition:.3s
}
#fl a {
background:rgba(244,203,207,.8);
border-radius:5px;
color:#fff;
display:inline-block;
margin:10px 0
}
#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

    #container::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    #container::-webkit-scrollbar-thumb {
      background: transparent;
    }
    #statuscafe {
    padding: 0em;
    background-color: white;
    border: 0px solid midnightblue;
    width: 200px
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 300px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background:#FDE5EC; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 65px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 13px;
  color: #8dd3e0;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}
.sidebar-box {
  background-color: #f9f9f9; /* Background color */
  border: 20px solid #FDE5EC;    /* Border style */
  padding: 100;             /* Space inside the box */
  margin-bottom: 0px;       /* Space below this box */
  border-radius: 8px;        /* Optional: rounded corners */
}

.sidenav2 {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 300px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background:#FDE5EC;  /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 65px;
  
}
.sidebar-box2 {
  background-color: #f9f9f9; /* Background color */
  border: 20px solid #FDE5EC;    /* Border style */
  padding: 100;  
  margin-bottom: 0px;       /* Space below this box */
  border-radius: 8px;  
}

/* The navigation menu links */
.sidenav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 13px;
  color: #8dd3e0;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav2 a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main2 {
  margin-right: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}




/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

/*--------------------------------------------------見出し、枠、線
--------------------------------------------------------*/
h1{
font-size:2em;
line-height:1;
margin-bottom:10px
}
h2{
font-size:1.5em;
margin:0.2em 0 0.5em 0;
padding:0.2em 0;
position:relative;
border-bottom:2px solid #ffd6da
}
h2:first-letter{
color:#ffd6da;
font-size:1.7em
}
h2::after{
background:#b6e8f2;
position:absolute;
bottom:-2px;left:0;
content:'';
height:2px;width:20%;
z-index:2
}
h3{
font-size:1.3em;
border-bottom:1px dotted;
font-weight:400;
line-height:18px;
margin:20px 0
}
dt{
color:#f4cbcf;
font-weight:700;
float:left;
clear:both;
margin:0 0 5px;
width:12em
}
dd{
border-bottom:1px solid;
margin:0 0 5px 13em
}
em{
background:#b6e8f2; /* Ie9 */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.79, #fff), color-stop(0.8, #f4cbcf), color-stop(1, #b6e8f2));
background:-webkit-linear-gradient(transparent 80%, #b6e8f2 0%);
background:linear-gradient(transparent 80%, #b6e8f2 0%);
font-weight:700
}
input,textarea{
background:#b6e8f2;
border:1px solid;
margin:3px 0;
width:200px
}
textarea{
height:50px;
cursor: url('https://files.catbox.moe/lbqgyb.gif'), auto;
}
hr{
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker{
background: #fcfbd7;
padding:1px 5px
}
.dcline{
border-left:5px solid #b6e8f2;
margin:5px 0;
padding:3px
}
.textbox{
border:1px solid;
margin:10px 0;
padding:3px;
text-align:center
}
.title{
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:center
}
.title:first-letter{
color:#ffd6da;
font-size:1.6em
}
.txt{
border-left:1px dotted;
color:#999;
margin:1em;
padding:0 0 0 1em
}
.frame{
background:#fff;
border-radius:3px;
padding:6px;
box-shadow:3px 3px 3px #ccc
}
.imageflex { display: flex; }
.imageflexcontent { margin-left: 5px; margin-top: 0; }
.img-with-text {
    text-align: justify;
    width:300;
}
.imageflex2 { display: flex; }
.imageflexcontent2 { margin-left: 5px; margin-top: 0; }
.img-with-text2 {
    text-align: justify;
    width:300;
}

.image-row {
    display: flex;      /* 1 */
    flex-wrap: wrap; /* 2 */
    gap: 20px;         /* 3 */
}

/* Remove default margin from figure elements nested inside an element belonging to the "image-row" class. */
.image-row figure {
    margin: 0;
}

.image-row2 {
    display: flex;
    justify-content: center;/* 1 */
    flex-wrap: wrap; /* 2 */
    gap: 0px;         /* 3 */
}

/* Remove default margin from figure elements nested inside an element belonging to the "image-row" class. */
.image-row2 figure {
    margin: 0;
}

.marquee {
  overflow: hidden;
  border:0;
  padding:0;
  
  /* default animations */
  --loop: infinite;
  --delay: 0s;
  --hover: unset;
}

.marquee:hover .marquee-guts {
  animation-play-state: paused;
}

.marquee .marquee-guts.pausit {
  animation-play-state: paused;
}

/* scrollers */
.marquee > .marquee-guts
{
  display: block;
  width: fit-content;
  animation-duration: 20s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-iteration-count: var(--loop);
  animation-delay: var(--delay);
  
  /* default: .left */
  animation-name: scroll-left;
  white-space:nowrap;
}

/* animation name */
.marquee.up > .marquee-guts,
.marquee.down > .marquee-guts {
  animation-name: scroll-up;
  white-space: unset;
  width: 100%;
}

.marquee.alt > .marquee-guts {
  animation-name: alt-left;
  animation-direction: alternate;
}
.marquee.up.alt > .marquee-guts,
.marquee.down.alt > .marquee-guts {
  animation-name: alt-up;
}


.marquee.slide {
  --loop: 1;
}
.marquee.slide > .marquee-guts {
  animation-name: slide-left;
}
.marquee.slide.right > .marquee-guts {
  animation-name: slide-right;
  animation-direction: normal;
  float: right;
}
.marquee.slide.up > .marquee-guts {
  animation-name: slide-up;
}

/* to stay down */
.marquee.slide.down {
  display: flex;
  align-items: flex-end;
}
.marquee.slide.down > .marquee-guts {
  flex: none;
  animation-name: slide-down;
  animation-direction: normal;
}


/* direction */
.marquee.right > .marquee-guts,
.marquee.down > .marquee-guts {
  animation-direction: reverse;
}
.marquee.left.alt > .marquee-guts,
.marquee.up.alt > .marquee-guts {
  animation-direction: alternate;
}
.marquee.right.alt > .marquee-guts,
.marquee.down.alt > .marquee-guts {
  animation-direction: alternate-reverse;
}

.marquee-guts img {
  max-width: unset;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}




/* keyframes */
@keyframes scroll-left {
  100% {
    transform: translate( var(--p-offset) , 0);
  }
  100% {
    transform: translate( var(--s-offset) , 0);
  }
}
@keyframes scroll-up {
  0% {
    transform: translate(0, var(--p-offset) );
  }
  100% {
    transform: translate(0, var(--s-offset) );
  }
}

@keyframes alt-left {
  0% {
    transform: translate( var(--s-offset) ,0);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes alt-up {
  0% {
    transform: translate(0, var(--s-offset) );
  }
  100% {
    transform: translate(0,0);
  }
}


@keyframes slide-left {
  0% {
    transform: translate( var(--p-offset) ,0);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes slide-right {
  0% {
    transform: translate( var(--s-offset), 0);
  }
  100% {
    transform: translate(0,0);
  }
}

@keyframes slide-up {
  0% {
    transform: translate(0, var(--p-offset));
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes slide-down {
  0% {
    transform: translate(0, var(--s-offset));
  }
  100% {
    transform: translate(0,0);
  }
}`),

#glenplayer02 {
position:relative;
top:0px;
left:5px;
display:flex;
z-index:99;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
}
 
.playy, .pausee {color:#F6D5F0; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:14px;
color:#F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */
}
 
.labeltext {
margin-left:0px;
position: relative;
bottom:10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:14px;
color:#F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */
}
.rounded-img {
  border-radius: 8px; /* Adjust this value for more or less rounding */
}
@font-face {
    font-family: 'PixelMplus12-Regular';
    src:url('PixelMplus12-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 600px){
body{
font-size:1.2em;
font-family:'Raleway','Roboto','游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-weight: 100
}
header{
position:relative;
min-width:100%
}
h1{
min-height:40px;
padding-right:60px
}
#index h1{
min-height:inherit;
padding-right:0
}
#contents{
height:auto;width:100%
}
footer{
position:absolute;
min-width:100%
}
input,textarea{
width:200px
}
dt{float:none;clear:none;width:auto}
dd{margin-left:20px}
img{max-width:100%;height:auto} /* 画像の縮小表示 */

/*--------------------------------------------------------
スマホ、タブレット用メニュー
--------------------------------------------------------*/
/* メニュー */
#menu{
background:rgba(103,89,80,.8); /* メニューの背景色 */
margin:0;
display:none;
bottom:inherit;
text-align:left;
z-index:20
}
nav li{
display:block; /* 横並び解除 */
height:auto;line-height:inherit /* 高さリセット */
}
nav > ul > li+li:before{
content:none
}
nav li a,nav li span{
color:#fff;
display:block;
position:relative;
padding:15px 20px /* リンクの余白 一列の高さはここで調節 */
}
nav li a:hover,nav li span:hover,.sub-menu li a:hover{
background:rgba(248,207,211,.8);
color:#675950
}
/* サブメニュー */
.sub-menu{
background:none;
position:static;
display:none; /* 隠す */
width:100%;
z-index:auto
}
.sub-menu li{
display:inline-block;/* 一列ごとにするならここを削除 */
visibility:visible; /* リセット */
overflow:visible; /* リセット */
height:auto; /* 高さリセット */
width:50% /* 一列ごとにするならここを削除 */
}
.sub-menu li a{
color:#fff
}
.sub-menu li a:after{
display:none
}
.imageflex { display: flex; max-width: 200px; max-height: 200px; }
.imageflexcontent { margin-left: 5px;  margin-right: 5px; margin-top: 0; max-width: 900px; max-height: 100px; font-size:.5em; }
.img-with-text {
    text-align: justify;
    width:200;
    height:200
}
nav li:hover .sub-menu li{
height:auto;line-height:inherit /* 高さリセット */
}
nav li span:after{
border-top:3px solid #fff;/* メニュー「>」の色 */
border-right:3px solid #fff;/* メニュー「>」の色 */
content:"";
display:block;
margin-top:-5px;
position:absolute;
top:50%;right:20px;
height:5px;width:5px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transition:.2s
}
nav li span.open:after{
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg)
}
/* メニューを開くボタン */
#open{
background:rgba(103,89,80,.8);
border:3px solid #fff;
border-radius:20px;
box-shadow:0 1px 5px #675950;
display:inline-block;
position:absolute;
height:40px;width:40px;/* 大きさ */
top:10px;right:20px/* 位置 */
}
#open-icon,#open-icon:before,#open-icon:after{
background:#ffd6da; /* 線の色 */
}
#open-icon{display:block;margin:-1px 0 0 -10px;position:absolute;top:50%;left:50%;height:2px;width:20px}
#open-icon:before,#open-icon:after{content:"";display:block;position:absolute;top:50%;left:0;height:2px;width:20px;transition:.3s}
#open-icon:before{margin-top:-8px}
#open-icon:after{margin-top:6px}
#open .close{background:transparent}
#open .close:before,#open .close:after{margin-top:0}
#open .close:before{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
}