/* ヒーローセクション */
.hero{
    position: relative;
}

.slides{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    overflow:hidden;
    height: 93dvh;
    background:#000;
}

/* 画像を重ねてクロスフェード */
.slides > li{
    position:absolute; inset:0;
    opacity:0;
    animation: slideFade calc(var(--step) * var(--n)) linear infinite;
    will-change: opacity;            /* スムーズさUP */
}
.slides > li:nth-child(1){ animation-delay: calc(var(--step) * 0); }
.slides > li:nth-child(2){ animation-delay: calc(var(--step) * 1); }
.slides > li:nth-child(3){ animation-delay: calc(var(--step) * 2); }
.slides > li:nth-child(4){ animation-delay: calc(var(--step) * 3); }
.slides > li:nth-child(5){ animation-delay: calc(var(--step) * 4); }
.slides > li:nth-child(6){ animation-delay: calc(var(--step) * 5); }
.slides > li:nth-child(7){ animation-delay: calc(var(--step) * 6); }
/* 枚数を増やす時は上を足して、--n も合わせて更新 */

.slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  display:block;
  transform: translateZ(0);         /* GPUヒント */
}

/* クロスフェード：冒頭でスッと現れ→しばらく保持→末尾でスッと消える */
@keyframes slideFade{
  0%   { opacity:0 }
  10%  { opacity:1 }  /* フェードイン */
  70%  { opacity:1 }  /* 表示維持 */
  100% { opacity:0 }  /* フェードアウト（次のスライドが10%でIN） */
}

/* モーション弱め希望の環境ではアニメ最小化＆1枚固定も可 */
@media (prefers-reduced-motion: reduce){
  .slides > li{ animation-duration:.01ms; }
  .hero::after{ animation:none; }
  .slides > li:not(:first-child){ display:none; }
}

/* ヒーローセクション分の波の部分を調整 */
section.hero,
section.about {
    position: relative;
}

section.hero div.wave {
    position: absolute;
    bottom: 0;
    width: 100%;
}

section.hero div.wave {
    bottom: 0;
}

section.hero div.wave img {
  width: 100%;
}

section.hero div.wave img {
    vertical-align: bottom;
}

@media (width >= 0px) and (width < 479px){
  h2.nav-title {
    font-size: 2.5rem;
  }
}

@media (width >= 480px) and (width < 767px){
  h2.nav-title {
    font-size: 3rem;
  }
}

@media (width >= 768px) and (width < 1199px){
  h2.nav-title {
    font-size: 3.5rem;
  }
}

@media (width >= 1200px){
  h2.nav-title {
    font-size: 5rem;
  }
}