/* ヒーロー：箱SVGは16:9のアートボードをそのまま表示する。 */
.slide1-logo-main {
	width: min(860px, 74vw);
	margin: 26px auto 14px;
}

.hero-box-animation {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	/* 箱SVG全体を1.5倍で表示する。
	   親の .slide1-logo-main には js/gsap-script.js が scale をアニメーションさせるため、
	   そちらではなくSVG要素側に掛ける（GSAPのtransformと衝突させない）。 */
	transform: scale(1.5);
	transform-origin: 50% 50%;
}

/* 初期状態：蓋1と箱本体だけを見せる。GSAPが開始時にinline styleで切り替える。 */
#lid-2-main,
#lid-2-detail,
#lid-3,
#ribbon,
#ribbon3,
#ribbon1_00000060732248619446100070000015510525076076745113_,
#ribbon2,
#ribbon4,
#ribbon5,
#ribbon6,
#kami1,
#kami2,
#kami3,
#kami4,
#kami5,
#kami6,
#hoshi1,
#hoshi2,
#hoshi3,
#hoshi4,
#G,
#I,
#F,
#T,
#girls_idol_festival_tokyo {
	opacity: 0;
	visibility: hidden;
}

@media screen and (max-width: 767px) {
	.slide1-logo-main {
		width: min(680px, 100%);
		margin: 16px auto 8px;
	}

	/* 箱SVGを35px下げ、KVタイトルと日付のちょうど中間に置く。
	   margin ではなく transform でずらすのは、日付や会場ロゴの位置を動かさないため。
	   transform は上書きなので scale(1.5) を書き直す必要がある。
	   並び順も重要で、translateY を先に書かないと移動量が1.5倍される。 */
	.hero-box-animation {
		transform: translateY(35px) scale(1.5);
	}
}