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-diary5.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; /* ヘッダーを他の要素の上に表示 */
}






@media  (max-width: 768px) {

   body {
    font-size: 1.5vw;
}



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


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


contents2{
  img{
    max-width:28vw;
}
}



 b {
  font-size:5vw;
}


 p {
  font-size:3.5vw;
}