*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;background:#0b1220;color:#e6eef8}
main{padding:24px 12px}

.description-container{
	max-width:1000px;
	margin:0 auto 16px;
	padding:0 16px;
	text-align:left;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, #20AAFF, #ee0979) 1;
}
.description-container h2{
	font-size:1.5rem;
	margin-bottom:6px;
	color: #cbd5e1;
}
.description-container p{
	color:#cbd5e1;
	line-height:1.5;
	margin-bottom:12px;
}

.image-container{
	display:flex;
	flex-direction:row;
	/* allow wrapping so images adjust to available width without horizontal scroll */
	flex-wrap:wrap;
	gap:10px; /* 固定間隔 */
	align-items:center;
	justify-content:center; /* グループを表示領域中央に配置 */
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	padding:20px;
	height:70vh;
	margin:0 auto 20px;
	box-sizing:border-box;
	width:100%;
}
/* anchors inside the container act as frames matching the container height */
.image-container a{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto; /* サイズは中の画像に合わせる（固定間隔で配置） */
	min-width:120px;
	max-width:100%;
	height:100%;
	text-decoration:none;
	margin:0; /* gap が間隔を制御 */
}
.image-container a img{
	display:block;
	/* fit whole image inside the anchor (which fills the container height) */
	height:100%;
	width:auto;
	object-fit:contain;
	border-radius:8px;
	box-shadow:0 6px 18px rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.04);
	background:rgba(255,255,255,0.02);
	cursor:zoom-in;
}

.swiper{width:100vw;max-width:none;margin:28px calc(50% - 50vw) 60px;overflow:visible;height:70vh}
.swiper-wrapper{display:flex;align-items:center;height:100%}

.swiper-slide{width:40%;max-width:520px;transition:transform .32s ease,opacity .32s ease;transform-origin:center center;overflow:visible;height:100%;display:flex;align-items:center;justify-content:center}
.swiper-slide img{display:block;height: 100%;width:auto;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.6)}

.swiper-slide-prev, .swiper-slide-next{
	opacity:0.5;
	transform:scale(0.92);
	filter:saturate(0.9);
}

.swiper-slide-active{opacity:1;transform:scale(1);z-index:2}

.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
    opacity:0.25;
}

.swiper-slide:not(.swiper-slide-active){
    transform:scale(0.95);
}

.swiper-button-next, .swiper-button-prev{color:#e6eef8}
.swiper-pagination-bullet{background:#6b7280;opacity:1}
.swiper-pagination-bullet-active{background:#e6eef8}

@media (max-width:900px){
	.swiper-slide{width:60%}
}
@media (max-width:480px){
	.swiper{width:98%}
	.swiper-slide{width:92%}
	.swiper-button-next,.swiper-button-prev{display:none}
}

/* Lightbox (click-to-enlarge) styles */
.image-container img{cursor:zoom-in}