/* はみ出し防止 */
#slider1 .box{
  position:relative;
  overflow:hidden;
}


/* 画像基本 */
#slider1 .box img{
  width:100%;
  height:auto;
  display:block;
}


/* ===== 共通（6秒に合わせる） ===== */
#slider1 .box:nth-child(1) img,
#slider1 .box:nth-child(3) img{
  animation-duration:6s; /* ←ここ重要（pauseと合わせる） */
  animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode:forwards;
}


/* ===== 1枚目：ズームアウト ===== */
#slider1 .box:nth-child(1) img{
  animation-name:zoomOut;
}

@keyframes zoomOut{
  from{
    transform:scale(1.08) translate(2%, 2%);
  }
  to{
    transform:scale(1) translate(0,0);
  }
}


/* ===== 3枚目：ズームイン ===== */
#slider1 .box:nth-child(3) img{
  animation-name:zoomIn;
}

@keyframes zoomIn{
  from{
    transform:scale(1) translate(0,0);
  }
  to{
    transform:scale(1.08) translate(-2%, -2%);
  }
}


/* 初期状態（全テキスト共通） */
#slider1 .slide-text{
  opacity:0;
}


/* ===== 1枚目：下からスライドイン ===== */
#slider1 .box:nth-child(1) .slide-text{
  animation: textUp 1s ease forwards;
  animation-delay:0.5s;
}

@keyframes textUp{
  from{
    opacity:0;
    transform:translate(-50%, calc(-50% + 20px));
  }
  to{
    opacity:1;
    transform:translate(-50%, -50%);
  }
}


/* ===== 2枚目：シンプルフェード ===== */
#slider1 .box:nth-child(2) .slide-text{
  animation: textFade 1s ease forwards;
  animation-delay:0.8s;
}

@keyframes textFade{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}


/* ===== 2枚目：テキスト下線アニメ ===== */
#slider1 .box:nth-child(2) strong{
  position:relative;
  display:inline-block;
}

#slider1 .box:nth-child(2) strong::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:#ffd900;

  transform:scaleX(0);
  transform-origin:left;

  animation:lineGrow 0.8s ease forwards;
  animation-delay:1.2s; /* ←テキスト出現より少し遅らせる */
}

@keyframes lineGrow{
  to{
    transform:scaleX(1);
  }
}


/* ===== 3枚目：少しゆっくり＋軽く拡大 ===== */
#slider1 .box:nth-child(3) .slide-text{
  animation: textZoom 1.2s ease forwards;
  animation-delay:1s;
}

@keyframes textZoom{
  from{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.95);
  }
  to{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
}


@media (max-width:768px){
  .slide-text .sub{
    display:block;
    margin-top:12px;  /* スマホのみスペース調整 */
  }
}



/* ===== スライダー下帯 ===== */
.key-band{
  background:linear-gradient(
    to right,
    #6a1317,
    #71151A 40%,
    #8a1c22 100%
  );
  color:#fff;
  text-align:center;
  padding:12px 10px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.05em;
}


@media (max-width:768px){
  .key-band{
    font-size:12px;
    padding:8px 8px;
    letter-spacing:0.04em;
	margin-top:-1px;
  }
}