body {
    margin: 0%;
    background-color: black;
    color: white;
    font-family: "DotGothic16", sans-serif;
}
      /* 動画を背景全体に表示 */
      #background-video {
          position: fixed;
          top: 0;
          left: 0;
          margin-left: 10%;
          width: auto;
          height: 100vh;
          object-fit: cover; /* アスペクト比を保ちながら画面全体をカバー */
          z-index: -1; /* コンテンツの後ろに表示 */
      }

      .aint {
        margin: 15% 0 0 auto;
        background-color: #0000006c;
        padding: 20px;
        font-size: 120%;
        color: rgb(255, 255, 255);
        width: 70%;
      }
      .tint {
        margin-top: 25%;
        margin-bottom: 10%;
        border:  solid #0099ff 1px;
        background-color: #000000b7;
        padding: 20px;
        font-size: 120%;
        color: rgb(255, 255, 255);
        width: 70%;
      }
      .playnow a {
        text-align: center;
        position: relative;
        display: inline-block;
        font-weight: 800;
        padding: 20px;
        background-color: #0000006c;
        transform: skewX(-35deg);
        font-size: 120%;
        text-decoration: none;
        border: solid #ff1e00 1px;
        color: rgb(255, 255, 255);
        width: 70%;
        overflow: hidden; /* 背景がボタン外に出ないようにする */
      }
      r {
        transform: skewX(35deg);
      }
      
      .playnow a::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100%; /* 初期状態でボタンの左側に隠す */
        width: 100%;
        z-index: -1;
        border-radius: 3px;
        background: linear-gradient(to right, #5e0000, #ff0000); /* ホバー時の赤色 */
        transition: left 0.4s ease; /* アニメーションをスムーズに */
      }
      
      .playnow a:hover::before {
        left: 0; /* ホバー時に赤色をスライドイン */
      }
      
      .playnow a:hover {
        color: white; /* テキストが目立つように変更（任意） */
      }
      
      .playnow  {
        text-align: center;
        margin: 0 auto 25% auto;
      }

      /* CSS */
/* メニューバーの背景色と高さを設定 */
.topnav {
    background-color: #ffffff;
    height: 50px;
    overflow: hidden;
  }
  
  /* メニューアイテムのスタイルを設定 */
  .topnav a {
    float: left;
    color: #0099ff;
    text-align: center;
    padding: 0px 20px 0px 20px;
    text-decoration: none;
    font-size: 17px;
    line-height: 50px;
    transition: all 0.3s ease-in-out; /* アニメーションの効果と時間を設定 */
  }
  
  /* メニューアイテムにマウスオーバーしたときのスタイルを設定 */
  .topnav a:hover {
    background-color: #0099ffaf;
    color: #ffffff;
    transform: scale(1.1); /* アイテムを少し大きくする */
  }
  
  /* アクティブなメニューアイテムのスタイルを設定 */
  .topnav a.active {
    background-color: #0099ff;
    color: white;
  }
  
  .hidden {
    display: none;
}

#mobile-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 183, 255, 0.8);
  color: white;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  z-index: 1000;
  align-items: center;
  padding-top: 230px;
  justify-content: center;
}