header{
  font-size: large;
  background:lightgreen;
  text-align: center;
}

header a{text-align: right;}

.contents1{background: #ffff7f;}

/*body{
  background-image: url(./HNCK8497-scaled.jpg);
}*/

.contents1,.contents2{
height: 660px;
}

.contents1{
width: 20%;
}

.contents2{
width: 80%;
text-align: center;
}

.main{
display: flex;
}








.fuwafuwa {
        position: fixed; /* 画面に固定 */
        bottom: 0;      /* 画面の下端に配置 */
        left: 0;        /* 画面の左端に配置 */
        width: 100px;   /* 例として幅を指定 */
        height: 100px;  /* 例として高さを指定 */
        z-index: 1000;  /* 他の要素より手前に表示 */
}

.fuwa {
        position: fixed; /* 画面に固定 */
        top: 0;      /* 画面の下端に配置 */
        right: 0;        /* 画面の左端に配置 */
        width: 100px;   /* 例として幅を指定 */
        height: 100px;  /* 例として高さを指定 */
        z-index: 1000;  /* 他の要素より手前に表示 */
}
.fuwafuwa,.fuwa{
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(./fuwafuwa.png) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 80px;
  height: 80px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa{
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}