@charset "UTF-8";
/* AUTHOR:t-styles */

/* ==========================================
   TOP HERO SLIDER (mobile-first)
========================================== */

/* ---------- HERO ---------- */
.hero {
  width: 100%;
}

.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 497;

}

/* ---------- SLIDE IMAGES ---------- */
.hero-slide {
  position: absolute;
  inset: 0;

  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;

  opacity: 0;
  transform: none;              /* ← scale を完全にやめる */
  filter: blur(0px);

  animation: heroFade 24s infinite;
}
@keyframes heroFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-slide { animation: heroFade 24s infinite; }

.is-1 { animation-delay: 0s; }
.is-2 { animation-delay: 6s; }
.is-3 { animation-delay: 12s; }
.is-4 { animation-delay: 18s; }



/* 4枚分（6秒刻み） */
.hero-slide.is-1 { background-image: url("../images/top01.jpg"); animation-delay: 0s; }
.hero-slide.is-2 { background-image: url("../images/top02.png"); animation-delay: 6s; }
.hero-slide.is-3 { background-image: url("../images/top03.png"); animation-delay: 12s; }
.hero-slide.is-4 { background-image: url("../images/top04.png"); animation-delay: 18s; }

.hero-inner{
  max-width: 1200px;
  margin: 0 auto;     /* ←中央寄せ */
}

.hero-inner > img{
  display: block;     /* ←marginが効くように */
  width: 100%;        /* 1400pxまでは伸びる */
  height: auto;
}


@media (min-width: 768px){
.hero-slider {
  max-height: 520px;   /* PCで大きくなりすぎない保険 */
  min-height: 240px;   /* スマホで潰れない保険 */
  overflow: hidden;
}
}