@charset "utf-8";

/*オープニングアニメーション案3：ライト・スピード
---------------------------------------------------------------------------*/

/* 光の線（閃光）*/
.line {
	position: fixed;
	height: 2px;
	background: #A0D0B0;
	width: 0%;
	left: 50%;
	top: 50%;
	z-index: 20;
}
.home .line {
	animation: lightSpeed 0.8s ease-in-out forwards;
}

@keyframes lightSpeed {
	0% { width: 0%; left: 50%; }
	50% { width: 100%; left: 0%; }
	100% { width: 0%; left: 100%; }
}

/* 全ての写真に対する共通指定 */
.photo {
	position: fixed;
	z-index: -1;
	display: none; /* デフォルトは非表示 */
	border-radius: 30px; /* 角をさらに丸くする */
}

/* 全ての写真に対する共通指定（※トップページのみ有効化）*/
.home .photo {
	display: block;
	opacity: 0;
	animation: fadeInPhotos 0.5s 0.6s forwards; /* 閃光の後にふわっと表示 */
}

@keyframes fadeInPhotos {
	0% { opacity: 0; }
	100% { opacity: 0.3; } /* 背景として控えめに表示 */
}

/* --- PC・タブレット横・スマホ横向け（幅601px以上）の配置 --- */
@media screen and (min-width: 601px) {
	.photo { width: 30%; } /* 少し小さめに */
	.photo1 { left: -5%; top: -10%; transform: rotate(-10deg); }
	.photo2 { right: -5%; bottom: -5%; transform: rotate(15deg); }
	.photo3 { left: -10%; bottom: -5%; transform: rotate(5deg); }
	.photo4 { right: -5%; top: -10%; transform: rotate(-15deg); }
	.photo5 { left: 40%; top: -10%; transform: rotate(10deg); }
	.photo6 { right: 40%; bottom: -10%; transform: rotate(-5deg); }
	.photo7 { left: -8%; top: 40%; transform: rotate(20deg); }
	.photo8 { right: -5%; top: 45%; transform: rotate(-12deg); }
	.photo9 { left: 20%; top: -5%; transform: rotate(-20deg); }
	.photo10 { right: 20%; bottom: -8%; transform: rotate(18deg); }
	.photo11 { left: 50%; bottom: -5%; transform: rotate(-15deg); }
}

/* --- スマホ向け（縦向き、横向き）（〜600px）の配置 --- */
@media screen and (max-width: 600px) {
	.photo { width: 50%; } /* 少しサイズを調整して枚数を増やす */
	.photo1 { left: -15%; top: -5%; transform: rotate(-10deg); }
	.photo2 { right: -20%; top: 5%; transform: rotate(15deg); }
	.photo3 { left: -10%; top: 25%; transform: rotate(-15deg); } 
	.photo4 { right: -5%; top: 35%; transform: rotate(20deg); } 
	.photo5 { left: -15%; top: 50%; transform: rotate(-25deg); }
	.photo6 { right: -10%; top: 55%; transform: rotate(10deg); }
	.photo7 { left: -5%; top: 75%; transform: rotate(-8deg); }  
	.photo8 { right: -15%; bottom: -5%; transform: rotate(12deg); }
	.photo9 { left: 45%; top: 10%; transform: rotate(25deg); }  /* アクセントとして中央寄り */
	.photo10 { left: 5%; bottom: 10%; transform: rotate(-12deg); }
	.photo11 { right: 40%; top: 45%; transform: rotate(5deg); }  /* アクセントとして中央寄り */
}