/* デスクトップでは通常表示 */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 携帯表示での対応 */
@media (max-width: 768px) {
  .hero-carousel {
    height: 100vh; /* 全画面の高さ */
  }
  
  .carousel-slide {
    position: relative;
    height: 100vh;
  }
  
  /* 元の画像を透明にする */
  .carousel-slide img {
    opacity: 0;
    position: absolute;
  }

  /* 既存の.heroの高さ制限を上書き */
  .hero {
    height: 55vh !important;
    min-height: 55vh !important;
    max-height: none !important;
  }
  
  .hero-carousel {
    height: 100vh !important;
    width: 100vw;
    position: relative;
  }
  
  .carousel-container {
    height: 100vh !important;
  }
  
  .carousel-slide {
    position: relative;
    height: 100vh !important;
  }
  
  /* 元の画像を透明にする */
  .carousel-slide img {
    opacity: 0;
    position: absolute;
  }
  
  /* 各スライドに携帯用背景画像を設定 */
  .carousel-slide:nth-child(1) {
    background: url('../mobile/沖縄県-結婚式-琉球和婚１-mobile.jpg') no-repeat;
    background-size: cover;
    background-position: center bottom; /* 完全に下部 */
  }
  
  .carousel-slide:nth-child(2) {
    background: url('../mobile/沖縄県-結婚式-琉球和婚２-mobile.jpg') no-repeat;
    background-size: auto 100%; /* 幅を100%、高さは自動 */
    background-position: center center;
  }
  
  .carousel-slide:nth-child(3) {
    background: url('../mobile/沖縄県-結婚式-琉球和婚３-mobile.jpg') no-repeat;
    background-size: cover;
    background-position: center bottom; /* 完全に下部 */
  }
  
  .carousel-slide:nth-child(4) {
    background: url('../mobile/沖縄県-結婚式-琉球和婚４-mobile.jpg') no-repeat;
    background-size: cover;
    background-position: center bottom; /* 完全に下部 */
  }
  
  .carousel-slide:nth-child(5) {
    background: url('../mobile/沖縄県-結婚式-琉球和婚５-mobile.jpg') no-repeat;
    background-size: auto 100%; /* 幅を100%、高さは自動 */
    background-position: center center;
  }
  
/* background-size: auto 100%; /* 高さを100%、幅は自動 */
/* background-position: center center;*/

/* background-position: X% Y%;
/* X%: 左右の位置 (0%=左端, 50%=中央, 100%=右端) */
/* Y%: 上下の位置 (0%=上端, 50%=中央, 100%=下端) */
  
}

/* 既存のメディアクエリを上書き */


@media (max-width: 480px) {
/* 携帯用のスタイル */
	.section-subtitle{
		position: absolute;
		top: 0px;
		left: 50px;
	}
}
@media (max-width: 768px) {
	.section-subtitle{
		position: absolute;
		top: 0px;
		left: 50px;
	}
    .plan-image {
        min-height: 43vw;
    }
}
@media (min-width: 1024px) {
/* PC用のスタイル */
	.section-subtitle{
		position: absolute;
		top: 0px;
		left: 50px;
	}
	.plan-image {
		min-height: 360px;
		
        margin: 50px auto;
	}
	.main-image {
    left: 8%;
	}
	
	.sub-image {
		top: -5%;
		left: 5%;
		width: 50%;
	}
	.sub-image2 {
		top: -5%;
        left: -3%;
        width: 60%;
    }
	}
	  .hero-text-bg2 {
	  margin-top: 5vw;
}
}
@media (max-width: 480px) {
/* 携帯用のスタイル */
  .hero {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: none !important;
  }
  .hero-text-bg2 {
  margin-top: 20vw;
}
	.plan-image {
		min-height: 180px;
	}
	
	.main-image {
    left: 3vw;
	}
	
	.sub-image {
		top: -5.5vw;
		left: -3vw;
		width: 250px;
	}
	.sub-image2 {
		top: -5.5vw;
		left: -3vw;
		width: 250px;
	}
	.section-header{
		margin-right: 30px;
	}
	
	.event-images {
    width: 96% !important;
    margin-left: 2% !important;
	}
	
	  .hero-text-bg {
    font-size: min(20px, 5vw);
    line-height: 24px;
    padding: min(10px, 2vw) min(6px, 1.5vw);
  }
  .hero-text-bg2 {
    font-size: min(20px, 5vw);
    line-height: 24px;
    padding: min(10px, 2vw) min(6px, 1.5vw);
  }
}
@media (max-width: 768px) {
  .floating-buttons {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  /* ページ読み込み3秒後 & スクロール時に表示 */
  .floating-buttons.show {
    opacity: 1;
  }
  
  .section-subtitle {
  
  left: 62% !important;
}
  
}

.sub-image {
  position: absolute;
  background-color: #f39c12;
  z-index: -1;
  /* モバイルファーストのベーススタイル */
    top: -9%;
    left: -1%;
    width: 65%;
  height: auto; /* アスペクト比を保持 */
}

/* タブレット向け */
@media (min-width: 768px) {
  .sub-image {
    top: -9%;
    left: -1%;
    width: 65%;
  }
}

/* デスクトップ向け */
@media (min-width: 1024px) {
	.sub-image {
		top: -5%;
		left: 5%;
		width: 50%;
	}
	.flow .container {
    top: -9vw;
}

/* 大画面デスクトップ向け */
@media (min-width: 1440px) {
  .sub-image {
        top: -25px;
        left: 5%;
        width: 50%;
  }
}



/* 雲用のスタイル */
@media (max-width: 768px) {
	.flow-decoration-image1 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
	.flow-decoration-image2 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
	.flow-decoration-image3 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
	.flow-decoration-image4 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
	.flow-decoration-image5 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
	.flow-decoration-image6 {
	    position: absolute;
	    bottom: -28px;
	    right: -20px;
	    width: 100px;
	    height: 52px;
	    object-fit: cover;
	}
}