h1 { background: orange;
 color: white;
 text-shadow: 3px 3px 0 black,-3px 3px 0 black,-3px -3px 0 black,3px -3px 0 black;
 font-size: 2em;
 text-align: center;
 border-radius: 8px; padding-left: 10px }
body
 { background: beige;
   color: black; 
   text-align: center;}
p { line-height: 1.7em; }
em { font-style: italic; font-style: bold; color: red;}
a:link { color: skyblue; }
a:visited{ color:purple; }
a:hover{ color: darkorange; }
p.welcome { text-align: center; }
p.welcome img { box-shadow: 4px 4px 4px; }

.MENU {
 width: 100%;
 height: 70px;
 background-color: black;
 padding-top: 5px;
}
.MENU ul {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0;
margin: 0;
}
.MENU li {
 list-style: none;
}
.MENU a {
 color: skyblue;
 display: block;
 margin-right: 35px;
 text-decoration: none; /*下線消した*/
 font-size: 30px;
}
.MENU a:hover {
 color: darkorange; 
 transform: scale(1.05);
 transition: transform 0.3s;
}

 .hover1:hover {
 transform: scale(1.05);
 transition: transform 0.3s;
}


 .box {
 
 width: 350px;
 margin: 0 auto;
 transition: transform 0.2s;
  }
  .shake {
    animation: shake 0.5s infinite;
  }
  @keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
  }
  #kekka {
    margin-top: 50px;
    font-size: 48px;
    font-weight: bold;
    display: none;
  }
  button {
    padding: 10px 20px;
    font-size: 18px;
    margin-top: 30px;
  }

body.omikuji-page{
background-image: url("temple.jpg" );
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}

.Anime {
 position: relative;
 overflow: hidden;
 width: 700px;
 height: 400px;
 border: 2px solid #333;
 margin: 0 auto;
    }

.slide {
 position: absolute;
 width: 700px;
 height: 400px;
 opacity: 0;
 text-decoration: none;
  overflow: hidden;
  position: absolute;
 animation: slideAnimation /*アニメーションの名前（@keyframes)で定義*/ 17.1s /*１ループにかかる時間*/
 linear /*アニメーションの早さの変化、linearは一定という意味 */ infinite;/*アニメーションの繰り返し回数*/
 
   }

.slide:hover {
 filter: brightness(80%);
 transition: filter 0.3s
}
.slide img{
 width: 700px;
 height: 400px;
 display: block;
}
    .slide:nth-child(1) {
      animation-delay: 0s;

    }

    .slide:nth-child(2) {
      animation-delay: 5.7s;

    }

    .slide:nth-child(3) {
      animation-delay: 11.4s;
}
    @keyframes slideAnimation {
      0% {
        right: -100%;
        opacity: 0;
      }
      5% {
        right: 0;
        opacity: 1;
      }
      30%{
        right: 0;
        opacity: 1;
}
      35% {
        right: 100%;
        opacity: 0;
      }
      

      100% {
        right: 100%;
        opacity: 0;
      }

}
.read-more {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 8px 16px;
  border: 2px solid white;
  color: white;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.3s;
}

.read-more:hover {
  background: rgba(255, 255, 255, 0.2);