/* メインスタイルシート */

/* 基本スタイル */
.hero-image {
		background-position: center;
		background-size: cover;
}

.product-image img, 
.book-image img, 
.campaign-image img {
		max-width: 100%;
		height: auto;
}

/* ヒーローセクション */
.hero-single {
		position: relative;
		height: 85vh;
		min-height: 500px;
		overflow: hidden;
		/* 背景色変更可能 - ここを変更してください */
		background-color: #ff5722; /* オレンジ系 */
		/* その他の背景色例:
		background-color: #2196F3; // 青系
		background-color: #4CAF50; // 緑系  
		background-color: #9C27B0; // 紫系
		background-color: #FFC107; // 黄系
		background-color: #F44336; // 赤系
		background-color: #607D8B; // グレー系
		background-color: #795548; // 茶系
		*/
		display: flex;
		align-items: center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		/* 初期画像を削除 - JSで設定するため */
		transition: background-image 1.5s ease-in-out;
}

/* アニメーション用の背景画像レイヤー */
.hero-single::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0;
		transition: opacity 1.5s ease-in-out;
		z-index: 0;
		pointer-events: none;
}

.hero-single::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* フィルタの透明度変更可能 - ここを変更してください */
		background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
		/* 完全に透明にする場合: background: transparent; */
		/* より暗くする場合: background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)); */
		/* 色付きフィルタの例:
		background: linear-gradient(to bottom, rgba(255,87,34,0.2), rgba(255,87,34,0.4)); // オレンジフィルタ
		background: linear-gradient(to bottom, rgba(33,150,243,0.2), rgba(33,150,243,0.4)); // 青フィルタ
		*/
		z-index: 1;
}

.hero-single::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
		z-index: 1;
}

.hero-content-single {
		position: relative;
		z-index: 2;
		padding: 2rem;
		max-width: 700px;
		color: white;
}

.hero-title {
		font-size: 3.5rem;
		font-weight: 900;
		margin-bottom: 1rem;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		line-height: 1.2;
}

.hero-subtitle {
		font-size: 1.5rem;
		margin-bottom: 2rem;
		text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.hero-badge {
		display: inline-block;
		background-color: var(--primary-color);
		color: white;
		padding: 0.5rem 1rem;
		border-radius: 50px;
		font-weight: bold;
		margin-bottom: 1rem;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 画像のみの振動アニメーション */
.hero-single.hero-shake::before,
.hero-single.hero-shake::after {
		animation: heroImageShake 0.5s ease-in-out;
}

@keyframes heroImageShake {
		0%, 100% { transform: translateX(0) translateY(0) scale(1); }
		10% { transform: translateX(-8px) translateY(-2px) scale(1.02) rotate(-0.5deg); }
		20% { transform: translateX(8px) translateY(2px) scale(0.98) rotate(0.5deg); }
		30% { transform: translateX(-6px) translateY(-1px) scale(1.01) rotate(-0.3deg); }
		40% { transform: translateX(6px) translateY(1px) scale(0.99) rotate(0.3deg); }
		50% { transform: translateX(-4px) translateY(0px) scale(1.005) rotate(-0.2deg); }
		60% { transform: translateX(4px) translateY(0px) scale(0.995) rotate(0.2deg); }
		70% { transform: translateX(-2px) translateY(0px) scale(1.002) rotate(-0.1deg); }
		80% { transform: translateX(2px) translateY(0px) scale(0.998) rotate(0.1deg); }
		90% { transform: translateX(-1px) translateY(0px) scale(1.001) rotate(-0.05deg); }
}

/* 画像のみのズームアニメーション */
.hero-single.hero-zoom::before,
.hero-single.hero-zoom::after {
		animation: heroImageZoom 0.6s ease-out;
}

@keyframes heroImageZoom {
		0% { transform: scale(1); }
		30% { transform: scale(1.03); }
		60% { transform: scale(1.06); }
		100% { transform: scale(1); }
}

/* パルスエフェクト（追加の派手さ） */
.hero-pulse {
		animation: heroPulse 0.8s ease-in-out;
}

@keyframes heroPulse {
		0% { 
				transform: scale(1);
				filter: brightness(1);
		}
		25% { 
				transform: scale(1.02);
				filter: brightness(1.1);
		}
		50% { 
				transform: scale(1.05);
				filter: brightness(1.2) saturate(1.2);
		}
		75% { 
				transform: scale(1.02);
				filter: brightness(1.1);
		}
		100% { 
				transform: scale(1);
				filter: brightness(1);
		}
}

/* レスポンシブデザイン */
@media (max-width: 767.98px) {
		.hero-single {
				height: 100vh;
				text-align: center;
		}
		
		.hero-title {
				font-size: 2.5rem;
		}
		
		.hero-subtitle {
				font-size: 1.2rem;
		}
		
		.hero-buttons .btn {
				display: block;
				width: 100%;
				margin: 0.5rem 0;
		}
}