/* font */
.body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FBFDFF;
}

/* btn */
.btn-all {
  display: inline-flex;
  align-items: center;
  gap: 16px;                   /* テキストとアイコンの隙間 */
  padding: 16px 32px;
  border: 1px solid #003784;
  border-radius: 50px;
  color: #003784;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;           /* 擬似要素がはみ出さないように */
  position: relative;
  z-index: 999;
  transition: color 0.3s ease;
}

@media screen and (max-width: 834px) and (min-width: 441px) {
  .btn-all {
    align-self: center;
  }
}

.btn-all::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0%;                  /* 初期状態は幅ゼロ */
  height: 100%;
  background: #003784;        /* 塗りつぶし色 */
  border-radius: 50px;
  transition: width 0.4s ease; /* ← アニメ速度調整 */
  z-index: -1;                /* テキストの下に置く */
}

.btn-all:hover {
  color: #fff;                /* ホバー時は文字とアイコンを白に */
}

.btn-all:hover::before {
  width: 100%;                /* 左→右に広がる */
}

/* banner-list */
.banner-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 32px;
}

.banner-list img {
  width: 100%;
}

@media screen and (max-width: 835px) {
  .banner-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}