@charset "UTF-8";

.relative{
  position: relative;
}

body {
  font-family: sans-serif;
  background-color: magenta;
  margin: 0;
  padding: 0;
}

/* メニューコンテナ全体のスタイル */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 901;
}

/* メニューボタンのスタイル */
.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

/* メニューバーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: magenta;
  opacity: 1.0;
  transition: 0.4s;
}

/* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

/* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

/* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

/* メニュートグルのスタイル */
#menu-toggle {
  display: none;
}

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 20;
  left: -100%; /* 変更: メニューを左からスライドインさせるために left に設定 */
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: 0.4s;
  opacity: 0.7;
  z-index: 1;
  overflow-y: auto;
}

/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
#menu-toggle:checked ~ .menu {
  left: 0; /* メニューを表示させるために left を 0 に変更 */
}

/* メニュー内のリストのスタイル */
.menu ul {
  color: magenta;
  list-style: none;
  opacity: 1.0;
  padding: 20px;
  margin-top: 40px;
}

/* メニュー内リストのリンクのスタイル */
.menu ul li a {
  text-decoration: none;
  color: magenta;
  font-size: 30px;
  display: block;
  padding: 0;
  transition: 0.2s;
  margin-top: 20px;
}

/* メニュー内リストのリンクのホバー時のスタイル */
.menu ul li a:hover {
  color: rgb(170, 0, 170);
}

#rainCanvas {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.absolute3{
  width: 100%;
  position: fixed;
  text-align: center;
  margin: 65% 0 0 0;
  z-index: 4;
}

.absolute3 {
animation:sample 5s linear infinite;
}


@keyframes sample{
to {
transform:scale(0.8);
}
    0%{
        opacity: 0;
    }  
    50%{
        opacity: 1;
    }  
    100%{
        opacity: 0;
    }
}