/* 全面FV */
.hero{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: #20345b;
}

/* 背景スライド */
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation: fadeSlide 18s infinite;
}

.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: inherit;
  transform: scale(1.02);
  animation: zoomSlow 18s infinite;
}

/* 暗めの青オーバーレイ */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(18,31,58,.72) 0%,
    rgba(18,31,58,.42) 45%,
    rgba(18,31,58,.58) 100%
  );
}

/* 文字エリア */
.hero-content{
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 140px 0 80px;
  color: #fff;
}

.hero-title{
  font-size: clamp(42px, 6vw, 96px);
  line-height: 1.15;
}

.hero-text{
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.9;
}

/* 画像ブロック上に文字を載せる */
.image-copy-block{
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.image-copy-block .bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position:center;
  transform: scale(1.03);
}

.image-copy-block .panel{
  position:relative;
  z-index:2;
  max-width: 680px;
  padding: 40px;
  background: rgba(12,22,44,.68);
  color:#fff;
  backdrop-filter: blur(6px);
}

@keyframes fadeSlide{
  0%{opacity:0}
  8%{opacity:1}
  28%{opacity:1}
  36%{opacity:0}
  100%{opacity:0}
}

@keyframes zoomSlow{
  0%{transform:scale(1.02)}
  100%{transform:scale(1.12)}
}