/**
フロント（表示）用CSSスタイルを記述してください
 */
body {
    /* background-color: red; */
}


/* =========================================================
# mv
========================================================= */
/*
# スライドショー
---------------------------------- */
#imageSlide {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

#imageSlide::before {
  content: "";
  display: block;
  padding-top: 51.59722%;
}

#imageSlide div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.mv-slide__bg01 {
  background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2.png);
}
.mv-slide__bg02 {
  background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2-2.png);
}
.mv-slide__bg03 {
  background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2-3.png);
}

/*
# 640以下で画像を切り替え
---------------------------------- */
@media screen and (max-width: 640px) {
  #imageSlide::before {
    content: "";
    display: block;
    padding-top: 157.8666%;
  }

  .mv-slide__bg01 {
    background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2-4.png);
  }
  .mv-slide__bg02 {
    background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2-5.png);
  }
  .mv-slide__bg03 {
    background-image: url(/wp-content/uploads/2025/12/KOMOREBI-COFFEE-ver.2-6.png);
  }
}

/* ヒーロー下のバウンス矢印（チェブロン） */
#imageSlide::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px; /* 下からの距離を調整 */
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 60; /* 必要に応じて調整 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  animation: mv-chevron-bounce 1.2s ease-in-out infinite;
  opacity: 0.7;
}

/* 小さい画面は矢印を少し小さく・下寄せ */
@media screen and (max-width:640px){
  #imageSlide::after{
    width: 32px;
    height: 32px;
    bottom: 18px;
    background-size: 70% 70%;
  }
}

/* バウンスアニメーション */
@keyframes mv-chevron-bounce {
  0%   { transform: translateX(-50%) translateY(0);     }
  50%  { transform: translateX(-50%) translateY(-10px); }
  100% { transform: translateX(-50%) translateY(0);     }
}