@charset "utf-8";

body {
}

/* 画像の親要素のスタイル */
.banner {
  cursor: pointer;
  height: 70px;
  margin-inline: auto;
  margin-top: 10%;
  position: relative;
  width: 300px;
}
/* 画像のスタイル */
.banner img {
  height: 70px;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初透明 */
.banner img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.banner:hover img {
  opacity: 1;
}