@charset "utf-8";

/* ===== Keyframes（4枚分） ===== */
/* 1枚目 */
@keyframes slide1 {
  0% {opacity: 0; transform: scale(1);}
  10% {opacity: 1;}
  40% {transform: scale(1.1);}
  50% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0;}
}
/* 2枚目 */
@keyframes slide2 {
  0% {opacity: 0;}
  25% {opacity: 0; transform: scale(1);}
  35% {opacity: 1;}
  65% {transform: scale(1.1);}
  75% {opacity: 1;}
  85% {opacity: 0;}
  100% {opacity: 0;}
}
/* 3枚目 */
@keyframes slide3 {
  0% {opacity: 0;}
  50% {opacity: 0; transform: scale(1);}
  60% {opacity: 1;}
  80% {opacity: 1;}
  90% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 0;}
}
/* 4枚目 */
@keyframes slide4 {
  0% {opacity: 0;}
  75% {opacity: 0; transform: scale(1);}
  85% {opacity: 1;}
  95% {opacity: 1;}
  100% {opacity: 0; transform: scale(1.1);}
}

/* ===== メイン枠 ===== */
#mainimg {
  position: fixed;        /* 固定表示のままでOK */
  inset: 0 auto auto 0;   /* top:0; left:0 と同じ */
  width: 100%;
  height: 60vh;           /* ←高さを必ず指定（任意の値でOK） */
  background: url(../images/1.jpg) no-repeat center/cover; /* 土台画像 */
  overflow: hidden;       /* はみ出し防止 */
  z-index: 0;
}

/* ===== 4枚の共通設定 ===== */
.slide1,.slide2,.slide3,.slide4 {
  position: absolute; left:0; top:0;
  width: 100%; height: 100%;
  object-fit: cover;      /* 画像を枠いっぱいに */
  animation-duration: 20s;             /* ←4枚×5秒想定 */
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 0s;                 /* 必要なら調整 */
}

/* 個別にキーフレームを割当 */
.slide1 { animation-name: slide1; }
.slide2 { animation-name: slide2; }
.slide3 { animation-name: slide3; }
.slide4 { animation-name: slide4; }

/* 装飾 */
#kazari {
  position: absolute;
  bottom: -1px;
  z-index: 2;
  width: 100%;
}
/* PC（タブレット含む）用 */
@media screen and (min-width: 769px) {
  #mainimg {
    height: 70vh;  /* 画面の7割くらいの高さ */
  }
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  #mainimg {
    height: 40vh;  /* ←画面の4割くらい。好みで30〜50vhに調整 */
  }
}