header#hdr-ind {
    position: relative;
    overflow: hidden;
}

/* --- 桜吹雪のコンテナ（ステージ）--- */
.sakura {
	/* 画面全体に固定で配置（スクロールに追従） */
	position: fixed;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* サイトのコンテンツより手前に表示 (数字は必要に応じて調整) */
	z-index: 999; 
	
	/* ★最重要★
	   アニメーションがクリックや操作の邪魔をしないようにする */
	pointer-events: none; 
	padding: 0;
	margin: 0;
	list-style: none; /* liの黒丸を消す */
}

/* --- 桜の花びら（基本設定） --- */
.sakura li {
	width: 18px; /* 花びらのサイズ（お好みで調整）*/
	position: absolute;
	top: -50px; /* 画面の上からスタート */
	
	/* デフォルトのアニメーション */
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}

/* --- アニメーションの定義 (変更なし) --- */
@keyframes fall {
	to {
		/* 画面の下（100%）よりさらに下（120%）まで落ちる */
		top: 120%;
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}
	to {
		/* 横に200px揺れながら回転 */
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}
@keyframes rotate2 {
	from {
		/* スタート位置をずらす */
		transform: translateX(100px) rotate(-45deg);
	}
	to {
		/* 横に-100px揺れながら回転 */
		transform: translateX(-100px) rotate(0deg);
	}
}

/* --- 各花びらの設定（★animation-delay を追加） --- */

/* --- 左側に降る花びら (left: 0〜25vw) --- */
.sakura li:nth-child(2) {
	left: 5vw; 
	animation: fall 15s linear infinite, rotate1 3s ease-in-out infinite alternate;
	animation-delay: 0s; /* ★追加 */
}
.sakura li:nth-child(4) {
	left: 15vw; 
	animation: fall 20s linear infinite, rotate1 2s ease-in-out infinite alternate;
	animation-delay: 3s; /* ★追加 */
}
.sakura li:nth-child(6) {
	left: 10vw; 
	animation: fall 18s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
	animation-delay: 1s; /* ★追加 */
}
.sakura li:nth-child(8) {
	left: 20vw; 
	animation: fall 16s linear infinite, rotate2 4s ease-in-out infinite alternate;
	animation-delay: 5s; /* ★追加 */
}
.sakura li:nth-child(10) { /* 9番目 */
	left: 2vw; 
	animation: fall 21s linear infinite, rotate2 3s ease-in-out infinite alternate;
	animation-delay: 8s; /* ★追加 */
}
.sakura li:nth-child(12) { /* 10番目 */
	left: 25vw; 
	animation: fall 15s linear infinite, rotate1 2.5s ease-in-out infinite alternate;
	animation-delay: 4s; /* ★追加 */
}
.sakura li:nth-child(14) { /* 11番目 */
	left: 12vw; 
	animation: fall 23s linear infinite, rotate1 4s ease-in-out infinite alternate;
	animation-delay: 7s; /* ★追加 */
}


/* --- 右側に降る花びら (left: 70〜95vw) --- */
.sakura li:nth-child(1) {
	left: 80vw; 
	animation: fall 17s linear infinite, rotate1 4s ease-in-out infinite alternate;
	animation-delay: 1s; /* ★追加 */
}
.sakura li:nth-child(3) {
	left: 90vw; 
	animation: fall 22s linear infinite, rotate2 3s ease-in-out infinite alternate;
	animation-delay: 0.5s; /* ★追加 */
}
.sakura li:nth-child(5) {
	left: 75vw; 
	animation: fall 14s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
	animation-delay: 6s; /* ★追加 */
}
.sakura li:nth-child(7) {
	left: 85vw; 
	animation: fall 19s linear infinite, rotate1 3s ease-in-out infinite alternate;
	animation-delay: 2s; /* ★追加 */
}
.sakura li:nth-child(9) { /* 13番目 */
	left: 70vw; 
	animation: fall 24s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
	animation-delay: 9s; /* ★追加 */
}
.sakura li:nth-child(11) { /* 14番目 */
	left: 88vw; 
	animation: fall 16s linear infinite, rotate2 2.5s ease-in-out infinite alternate;
	animation-delay: 4.5s; /* ★追加 */
}
.sakura li:nth-child(13) { /* 15番目 */
	left: 78vw; 
	animation: fall 20s linear infinite, rotate1 4.5s ease-in-out infinite alternate;
	animation-delay: 10s; /* ★追加 */
}

/* --- スマホ用--- */
@media screen and (max-width:640px){

/* --- 左側に降る花びら (left: 0〜25vw) --- */
.sakura li:nth-child(2) {
	left: 5vw; 
	animation: fall 15s linear infinite, rotate1 3s ease-in-out infinite alternate;
	animation-delay: 0s; /* ★追加 */
}
.sakura li:nth-child(4) {
	left: 15vw; 
	animation: fall 20s linear infinite, rotate1 2s ease-in-out infinite alternate;
	animation-delay: 3s; /* ★追加 */
}
.sakura li:nth-child(6) {
	left: 10vw; 
	animation: fall 18s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
	animation-delay: 1s; /* ★追加 */
}
.sakura li:nth-child(8) {
display:none;
	left: 16vw; 
	animation: fall 16s linear infinite, rotate2 4s ease-in-out infinite alternate;
	animation-delay: 5s; /* ★追加 */
}
.sakura li:nth-child(10) { /* 9番目 */
display:none;
	left: 2vw; 
	animation: fall 21s linear infinite, rotate2 3s ease-in-out infinite alternate;
	animation-delay: 8s; /* ★追加 */
}
.sakura li:nth-child(12) { /* 10番目 */
display:none;
	left: 10vw; 
	animation: fall 15s linear infinite, rotate1 2.5s ease-in-out infinite alternate;
	animation-delay: 4s; /* ★追加 */
}
.sakura li:nth-child(14) { /* 11番目 */
display:none;
	left: 12vw; 
	animation: fall 23s linear infinite, rotate1 4s ease-in-out infinite alternate;
	animation-delay: 7s; /* ★追加 */
}


/* --- 右側に降る花びら (left: 70〜95vw) --- */
.sakura li:nth-child(1) {
	left: 80vw; 
	animation: fall 17s linear infinite, rotate1 4s ease-in-out infinite alternate;
	animation-delay: 1s; /* ★追加 */
}
.sakura li:nth-child(3) {
	left: 90vw; 
	animation: fall 22s linear infinite, rotate2 3s ease-in-out infinite alternate;
	animation-delay: 0.5s; /* ★追加 */
}
.sakura li:nth-child(5) {
	left: 75vw; 
	animation: fall 14s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
	animation-delay: 6s; /* ★追加 */
}
.sakura li:nth-child(7) {
display:none;
	left: 85vw; 
	animation: fall 19s linear infinite, rotate1 3s ease-in-out infinite alternate;
	animation-delay: 2s; /* ★追加 */
}
.sakura li:nth-child(9) { /* 13番目 */
display:none;
	left: 50vw; 
	animation: fall 24s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
	animation-delay: 9s; /* ★追加 */
}
.sakura li:nth-child(11) { /* 14番目 */
display:none;
	left: 58vw; 
	animation: fall 16s linear infinite, rotate2 2.5s ease-in-out infinite alternate;
	animation-delay: 4.5s; /* ★追加 */
}
.sakura li:nth-child(13) { /* 15番目 */
display:none;
	left: 48vw; 
	animation: fall 20s linear infinite, rotate1 4.5s ease-in-out infinite alternate;
	animation-delay: 10s; /* ★追加 */
}

}