@charset "utf-8";
/* CSS Document */

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 440px;
	height: 170px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/

/* 全体のレイアウト設定 */
.scroll-container {
	padding: 40px 0 100px 0;
	max-width: 600px;
	margin: 0 auto;
}

/* スクロール用の大きな下の余白 */
.scroll-instruction {
	text-align: center;
	font-weight: bold;
	color: #aaa;
	margin-bottom: 500px; 
}

/* 動かすボックスの共通スタイル */
.fade-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 350px; /* 下に余白 */
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.06);
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-box img {
	width: 150px;
	height: 100px;
	object-fit: cover;
	border-radius: 4px;
}

.fade-box .text p {
	margin: 0;
	font-size: 20px;
	color: #666;
}

/* 左から出るやつ */
.fade-left {
	transform: translateX(-50px);
}

/* 右から出るやつ */
.fade-right {
	transform: translateX(50px);
}

.fade-box.is-active {
	opacity: 1;
	transform: translateX(0);
}