@charset "UTF-8";
      body {height: 100%;
          font-family: "Noto Sans JP", sans-serif;
          font-weight: bold;
          font-style: normal;
}
ul
{
    text-align: center; 
    display:float;
    margin: 0;
    padding: 0;
}
li
{
    display: inline-block;
}
      .btn--blue,
      a.btn--blue {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      background: -webkit-gradient(135deg, #526ca3 15%, #46bdc6);
      background: linear-gradient(135deg, #526ca3 15%, #46bdc6);
      }
      .btn--blue:hover,
      a.btn--blue:hover {
      color: #fff;
      background: -webkit-gradient(135deg, #526ca3 15%, #46bdc6);
      background: linear-gradient(135deg, #526ca3 15%, #46bdc6);
      }
      .btn--green,
      a.btn--green {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      background: -webkit-gradient(135deg, #46bdc6 15%, #46c598);
      background: linear-gradient(135deg, #46bdc6 15%, #46c598);
      }
      .btn--green:hover,
      a.btn--green:hover {
      color: #fff;
      background: -webkit-gradient(135deg, #46bdc6 15%, #46c598);
      background: linear-gradient(135deg, #46bdc6 15%, #46c598);
      }
      .btn--lgreen,
      a.btn--lgreen {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      background: -webkit-gradient(135deg, #46c598 15%, #c5df4b);
      background: linear-gradient(135deg, #46c598 15%, #c5df4b);
      }
      .btn--lgreen:hover,
      a.btn--lgreen:hover {
      color: #fff;
      background: -webkit-gradient(135deg, #46c598 15%, #c5df4b);
      background: linear-gradient(135deg, #46c598 15%, #c5df4b);
      }
      .btn--yellow,
      a.btn--yellow {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      background: -webkit-gradient(135deg, #c5df4b 15%, #ffae00);
      background: linear-gradient(135deg, #c5df4b 15%, #ffae00);
      }
      .btn--yellow:hover,
      a.btn--yellow:hover {
      color: #fff;
      background: -webkit-gradient(135deg, #c5df4b 15%, #ffae00);
      background: linear-gradient(135deg, #c5df4b 15%, #ffae00);
      }
      .btn--orange,
      a.btn--orange {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      background: -webkit-gradient(135deg, #ffae00 15%, #ff4500);
      background: linear-gradient(135deg, #ffae00 15%, #ff4500);
      }
      .btn--orange:hover,
      a.btn--orange:hover {
      color: #fff;
      background: -webkit-gradient(135deg, #ffae00 15%, #ff4500);
      background: linear-gradient(135deg, #ffae00 15%, #ff4500);
      }
      .btn--gray,
      a.btn--gray {
      color: #fff;
      font-size: 0.85rem;
      font-weight: 500;
      text-decoration: none;
      text-shadow: rgba(0, 0, 0, 0.5) 0px 0 5px;
      white-space: nowrap;
      background: rgba(255,255,255,0.1);
      -webkit-backdrop-filter: blur(2px); /* ぼかしエフェクト */
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */
      border-right-color: rgba(255, 255, 255, 0.2);
      border-bottom-color: rgba(255, 255, 255, 0.3);
      border-radius: 100vh;
      box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); /* 薄い影 */
      padding: 2px 10px 4px 10px !important;
      }
      .btn--gray:hover,
      a.btn--gray:hover {
      color: #fff;
      background: rgba(255,255,255,0.1);
      -webkit-backdrop-filter: blur(2px); /* ぼかしエフェクト */
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */
      border-right-color: rgba(255, 255, 255, 0.2);
      border-bottom-color: rgba(255, 255, 255, 0.2);
      border-radius: 100vh;
      box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); /* 薄い影 */
      padding: 2px 10px 5px 10px !important;
      }
      .btn--clear,
      a.btn--clear {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      text-shadow: rgba(0, 0, 0, 0.5) 0px 0 5px;
      white-space: nowrap;
      background: rgba(255,255,255,0.1);
      -webkit-backdrop-filter: blur(2px); /* ぼかしエフェクト */
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */
      border-right-color: rgba(255, 255, 255, 0.2);
      border-bottom-color: rgba(255, 255, 255, 0.3);
      border-radius: 100vh;
      box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); /* 薄い影 */
      }
      .btn--clear:hover,
      a.btn--clear:hover {
      color: #fff;
      background: rgba(255,255,255,0.1);
      -webkit-backdrop-filter: blur(2px); /* ぼかしエフェクト */
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */
      border-right-color: rgba(255, 255, 255, 0.2);
      border-bottom-color: rgba(255, 255, 255, 0.2);
      border-radius: 100vh;
      box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); /* 薄い影 */
      }
      a.btn--radius {
      border-radius: 100vh;
      padding: 7px 15px 10px 15px;
      }
      .btn {
      margin: 25px 5px 10px 5px;
      list-style: none;
        }
      .slideBox {
      height: 70%;
      overflow: hidden;
      position: relative;
      }
      .bunsho {
       position: absolute;
       top: 50%; /* 上から50%の位置に */
       left: 50%; /* 左から50%の位置に */
       transform: translate(-50%, -50%); /* 要素自身のサイズの半分の分だけ戻す */
       overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
       width: 100%;
       height: auto;
       max-height: 100%;
       z-index: 98;
      }
      .caution-back {
       color: #fff;
       font-size: 1rem;
       text-decoration: none;
       text-shadow: none;
       white-space: nowrap;
       background: rgba(255, 79, 0, 0.7);
       -webkit-backdrop-filter: blur(2px); /* ぼかしエフェクト */
       backdrop-filter: blur(2px);
       border: 1px solid rgba(255, 161, 118, 0.4); /* ボーダー */
       border-right-color: rgba(255, 161, 118, 0.2);
       border-bottom-color: rgba(255, 161, 118, 0.3);
       border-radius: 10px;
       box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); /* 薄い影 */
       padding: 4px 13px 8px 13px;
       }
      .caution-back span {
            background: linear-gradient(transparent 50%, #800000 30%);  
            }
      .spacer {
            display: block;
            background: none !important;
            height: 10px;
            }

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 28s 0s infinite;
  animation: anime 24s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

.item1:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}