@charset "utf-8";

/*----- header -----*/
header {
  box-shadow: 0 0.3rem 0.6rem #0000004d;
  position: relative;
}
#h_logo {
  max-width: 30rem;
}

/*----- mi -----*/
/* 親要素 #mi の設定 */
#mi {
  background: #fff;
  background-size: cover;
  position: relative; /* 子要素を重ねるために必要 */
  /* 元々あった background 指定は削除するか、読み込み中の保険として残してもOK */
  width: 100%; /* 必要に応じて調整 */
  height: 100%; /* 必要に応じて調整 */
  overflow: hidden;
  z-index: 1;
}

/* 背景画像を表示する共通クラス */
.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0; /* 最初は透明 */
  /* 2つのアニメーションをカンマ(,)で区切って指定します。
     1つ目: bgFade (透明度の切替) 15秒かけて無限ループ
     2つ目: bgZoom (拡大の動き) 15秒かけて滑らかに(linear)無限ループ
  */
  animation: bgFade 15s infinite, bgZoom 15s linear infinite;
}

/* 1枚目の画像設定 */
.bg-slide:nth-child(1) {
  background-image: url(../img/mi/bg01.webp);
  animation-delay: 0s; /* すぐ開始 */
}

/* 2枚目の画像設定 */
.bg-slide:nth-child(2) {
  background-image: url(../img/mi/bg02.webp);
  animation-delay: 5s; /* 5秒後に開始 */
}

/* 3枚目の画像設定 */
.bg-slide:nth-child(3) {
  background-image: url(../img/mi/bg03.webp);
  animation-delay: 10s; /* 10秒後に開始 */
}

/* フェードのアニメーション */
@keyframes bgFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}

/* ▼▼▼ ズームのアニメーション ▼▼▼ */
@keyframes bgZoom {
  0% {
    /* 開始時：通常サイズ(1倍) */
    transform: scale(1);
  }
  100% {
    /* 終了時：少し拡大(1.15倍) */
    /* 数字を大きくすると、よりダイナミックに拡大します */
    transform: scale(1.3);
  }
}
#mi_ttl_flare {
  top: 2.8rem;
  left: 17.8rem;
}
#mi_li li {
  background: #222;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 0.2rem;
  padding: 0 1.5rem;
  line-height: 3.5rem;
  height: 3.7rem;
  border-radius: 0.3rem;
  box-shadow: 0.1rem 0.1rem 0.5rem #0000004d;
}
#mi_medal {
  padding-left: 1rem;
}
#mi_medal_flare {
  top: 2.7rem;
  left: 2.1rem;
}
#mi_txt {
  margin-left: 0.6rem;
}
/*----- cta -----*/
.cta {
  margin-top: -5.6rem;
  position: relative;
  z-index: 1;
}
.btn_box {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 9rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0.2rem 0.2rem 0.6rem #0000004d;
}