body {
    background-color: #000000;
    color: white;
    font-family: "DotGothic16", sans-serif;
    cursor: url("https://cur.cursors-4u.net/cursors/cur-2/cur117.cur"), auto;/*本文カーソル*/

    filter: blur(1,2px) contrast(180%) saturate(150%);
    image-rendering: pixelated;
}

.content {
  animation: wobble 3s infinite ease-in-out;
  filter: blur(1px) contrast(120%);
}

#content {
  width: 75%;
  margin: 0 auto;
  padding-left: 20px; /* 必要なら調整 */
}

/*いらっしゃいませ*/
.Aisathu {
  font-size: 24px;
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  animation: swapColors 0.4s infinite alternate,blink 0.1s infinite;

}

@keyframes blink {
  50% { opacity: 0; }
}

/* 2色の切り替えアニメーション */
@keyframes swapColors {
  0% {
    color: #ff0000; /* 蛍光マゼンタ */
    text-shadow: 0 0 8px #ff0000;
  }
  100% {
    color: #00ff0d; /* 蛍光シアン */
    text-shadow: 0 0 8px #00ff0d;
  }
}



/*ホラー風加工フィルター*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #cc111b;
  background: url("https://www.transparenttextures.com/patterns/bright-squares.png");
  opacity: 0.20;
}

/* 画面揺れエフェクト */
@keyframes screen-shake-distort {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); }
  5%   { transform: translate(-5px, 0px) skew(1deg, -1deg); }
  8%  { transform: translate(10px, 1px) skew(5deg, 5deg); }
  15%  { transform: translate(-10px, 1px) skew(15deg, 15deg); }
  80%  { transform: translate(10px, 1px) skew(-1deg, -1deg); }
  100% { transform: translate(0, 0) skew(0deg, 0deg); }
}


/*点滅エフェクト*/
.blink {
  animation: blink 1s steps(2, start) infinite;
  color: #f0f;
}

@keyframes blink {
  to { visibility: hidden; }
}

/*点滅エフェクト2*/
.blink2 {
  animation: blink 0.2s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/*見えないメッセージ*/
.hidden-msg {
  position: fixed;
  bottom: 4px;
  right: 8px;
  opacity: 0.2;
  font-size: 1px;
}

/*壊れたリンク1*/
.broken1 {
  color: #ff0000;
  text-align: center;
}

/*壊れたリンク*/
.broken {
  color: #bbff00;
  text-decoration: line-through;
  cursor: not-allowed;
  text-align: center;
}
.Nu {
  text-align: center;
}




/*ランダムな色*/
.char {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.2s ease;
  font-family: "DotGothic16", sans-serif;
  text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}


#content.shake {
  animation: screen-shake-distort 0.1s ease-in-out;
  will-change: transform; /*余韻消し*/
}



h2,p,button{
  text-align: center;
}

h2 {
  text-shadow: 0 0 15px #ff0000;
}

/*タイトル画像用*/
img{
  display: block;
  margin: 0 auto;
}

.title-img {
  width: 45%;      /* 画面幅の50% */
  height: auto;    /* 縦横比を保つ */
  display: block;  /* 中央寄せのため */
  margin: 0 auto;  /* 中央に配置 */
}
.icon-img {
  width: 50%;      /* 画面幅の50% */
  height: auto;    /* 縦横比を保つ */
  display: block;  /* 中央寄せのため */
  margin: 0 auto;  /* 中央に配置 */
}
/*タイトル画像用ここまで*/

.banner {
  max-height: 100px;
  width: auto;  
  height: auto;
  overflow: hidden;
  display: block;
  margin: 20px auto; /* 中央寄せ */
  cursor: pointer;
}



  ul{
    list-style: none;
    padding-left: 0;
  }

/* メニューボタン */
.menu-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 24px;
  background: #0f0;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  z-index: 2000;

}

/* サイドバー（最初は隠す） */
.sidebar {
  position: fixed;
  top: 0;
  left: -160px; /* ← 隠す位置 */
  width: 160px;
  height: 100%;
  background-color: #b6b6b6;
  padding-top: 60px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  transition: left 0.3s ease; /* ← スライドアニメーション */
  z-index: 1500;

}

/* サイドバーのリンク */
.sidebar a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
}

.sidebar a:hover {
  background-color: #ffffff;
}

/* サイドバーが開いた状態 */
.sidebar.open {
  left: 0;
}

.sidebar a[href*="pixiv"] {
  color: #cc111b;
  font-weight: bold;
}

/*カーソル*/
.sidebar,
.sidebar a,
.sidebar a:hover,
.menu-btn
{
  cursor: url("https://cur.cursors-4u.net/cursors/cur-2/cur117.cur"), auto;
}


/*以下profileについて*/
.box {
  width: 45%;
  border: 2px solid #1805c000; /* 枠線の色 */
  padding: 12px;
  border-radius: 8px;        /* 角丸 */
  background-color: #150aaa; /* 背景色（薄い青） */
  margin: 16px auto;
  text-align: center;

}

/*e.htmlについて*/
.img-Aya {
  display: flex;
  gap: 10px; /* ← 画像の間隔 */
}

.img-Aya img {
  width: 150px; /* ← 好きなサイズに調整 */
  height: auto;
}