body {
        animation: fadeIn 1s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }




body {
background-image:url(kabe0.gif);
    text-align:center;
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

.ContentsFrame {
    background-image:url(kabe-top2.gif);
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}




.fixed-header {
  position: sticky; /* ヘッダーを固定する */
  top: 0; /* 画面の上部に固定 */
  width: 100%; /* 画面の幅いっぱいに広げる */
background-image:url(kabe-top1.png);/* 背景色を設定 */  
  color: white; /* テキストの色を設定 */
  padding: 10px; /* 内側の余白を設定 */
  z-index: 50; /* ヘッダーを他の要素の上に表示 */
}


#today {
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

#event {
  font-size: clamp(1rem, 1.4vw, 1.6rem);
}


.glow {
  position: relative;
  display: inline-block;
  animation: sparkle 1.5s infinite alternate, floaty 3s ease-in-out infinite;
}

@keyframes sparkle {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff2a8;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #ffd84d;
  }
}

@keyframes floaty {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}




@media  (max-width: 768px) {

   body {
    font-size: 2vw;
}

img {
    max-width: 25%;
    height :auto;{
}
}



 p {
  font-size:3vw;
}

contents{
  img{
    max-width:18vw;
}
}



contents2 {
img {
    max-width: 88%;
    height :auto;{
}
}