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: 18px;
  font-weight: normal; /* ←これ */
}
  font-weight: bold;
}

#event {
  font-size: 30px;
  font-weight: normal; /* ←これ */
}
  font-weight: bold;
}



#event {
  color: #333;
}

#event.birthday {
  color: #d2691e;
}






@media  (max-width: 768px) {

   body {
    font-size: 14px;
}

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




 p {
  font-size:3vw;
}

contents img {
    max-width:18vw;
}




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




.date-row {
  display: flex;
  align-items: center;
  justify-content: center;
gap: 10px; /* 余白追加 */
  flex-wrap: nowrap; /* ←これも重要 */
}


/* ←これが超重要 */
#today {
  margin: 0;   /* pの余白を消す */
  white-space: nowrap; /* 改行させない */
 display: inline-block; /* ←安定する */
}



/* お花 */
.flower {
  width: clamp(30px, 6vw, 60px);
  height: auto;
  animation: spin 6s linear infinite;
  flex-shrink: 0; /* ←これ超重要 */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* 念のため */
.date-row img {
  display: block;
}







#today {
  font-size: clamp(14px, 3.5vw, 22px);
}

#event {
  font-size: clamp(16px, 4.5vw, 30px);
}