@charset "UTF-8";

/* ----TOP---- */
/* 親要素に overflow: hidden があると sticky が効かないため解除する */
body, .wrapper {
overflow: visible !important;
overflow-x: clip !important; /* 横スクロールの発生は防ぐ */
}

/* ★改修: スクロールで固定・変化させるためのラッパー */
.mainImage_wrapper {
position: relative;
height: 200vh; /* ここをスクロールする間アニメーションが進行する */
}
.mainImage {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;

}
/* ★改修: 画像エリアを最初から100%にし、clip-pathで半分だけ見せる */
.mainImage_image_area {
position: absolute;
bottom: 0;
right: 0;
width: 100%; 
height: 100%;
overflow: hidden;
z-index: 1;
clip-path: inset(0 0 0 50%); /* ★ 初期状態で左半分を隠す */
will-change: clip-path; /* ★ アニメーション対象を変更 */
}
/* テキストエリアは元の top.css の配置を維持 */
.mainImage_inner {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
pointer-events: none;
will-change: opacity;
}
/* 全画面時の中央テキスト */
.mainImage_new_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
color: #ec6c00;
font-size: 4rem;
font-family:"Nothing You Could Do",cursive;
text-align: center;
opacity: 0; /* 初期は非表示 */
pointer-events: none;
white-space: nowrap;
text-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
will-change: opacity;
}
/* 新テキストを読みやすくするための暗いオーバーレイ */
.mainImage_dark_overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(255, 255, 255, 0.4);
opacity: 0; 
z-index: 1;
pointer-events: none;
will-change: opacity;
}

/*縦移動に耐えられるように画像の範囲を広げる */
.mainImage_bg_new {
position: absolute;
top: -40%;
left: -20%;
width: 140%;
height: 180%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5vw;
transform: rotate(-8deg) translateY(var(--parallax-y, 0px));
z-index: 0;
will-change: transform;
}
.marquee-row {
display: flex;
width: max-content;
gap: 1.5vw;
}
.marquee-row.left {
animation: marquee-left 50s linear infinite;
}
.marquee-row.right {
animation: marquee-right 50s linear infinite;
}
.marquee-img {
width: 25vw;
height: 35vh;
object-fit: cover;
border-radius: 0;
opacity: 1;
transition: opacity 0.3s ease;
}
.marquee-img:hover {
opacity: 0.7;
}
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}

@media screen and (max-width: 768px) {
.mainImage {
	display: block; 
	height: 100vh;
}
.mainImage_inner {
	height: 40vh; /* テキスト領域を上部40%に配置 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mainImage_image_area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100%;
	order: unset;
	clip-path: inset(40% 0 0 0); /* 画像を少し上に上げる（下から60%を表示） */
}
.mainImage_new_text {
	font-size: 2.2rem;
	white-space: normal;
	width: 90%;
}
.mainImage_bg_new {
	transform: rotate(0) translateY(calc(var(--parallax-y, 0px) * 0.5));
	top: -10%; left: -10%; width: 120%; height: 120%; /* 隙間をなくすため余白調整 */
	gap: 10px;
}
.marquee-row { gap: 10px; width: max-content; }
.marquee-img { width: 60vw; height: 25vh; border-radius: 0; }
.mainImage_scroll {
	bottom: 10px; /* スクロールテキストを境界線に被らないよう調整 */
}
}