:root{
	--bg:#0a0a0a;
	--text:#f0f0f0;
	--text-dark:#1a1a1a;
	--muted:#b0b0b0;
	--accent:#6b9080;
	--accent-light:#7fa593;
	--card-bg:#1a1a1a;
	--card-border:#2a2a2a;
	--glass-bg:#f5f5f5;
	--glass-border:#d0d0d0;
	--hero-width-ratio: 1.2;
	--site-max-width: 1000px;
}

/* Site background image */
:root{
	--dots-color: rgba(255,255,255,0.06);
	--dots-size: 14px;
	--dots-opacity: 0.08;
	--dots-speed: 60s;
}

body{font-family:Inter,Segoe UI, Roboto, Arial, sans-serif;margin:0;padding:0;background:#0a0a0a;color:var(--text);-webkit-font-smoothing:antialiased;
}

/* グローバルリンクスタイル */
a{
	color:var(--accent-light);
	text-decoration:none;
	transition:color .18s ease;
}
a:hover{
	color:#9ec5b3;
	text-decoration:underline;
}

/* 背景画像レイヤー・透明度80% */
body::before{
	content:"";
	position:fixed;
	inset:0;
	background-image: url("/static/img/background/background.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.8;
	pointer-events:none;
	z-index:0;
}

/* ドットオーバ�Eレイ */
body::after{
	content:"";
	position:fixed;
	inset:0;
	background-image: radial-gradient(circle, var(--dots-color) 20%, transparent 21%);
	background-size: var(--dots-size) var(--dots-size);
	background-repeat: repeat;
	opacity: var(--dots-opacity);
	pointer-events:none;
	z-index:0;
	animation: dots-move var(--dots-speed) linear infinite;
}

/* ensure main structural elements sit above the overlay */
header{position:fixed;top:0;left:0;right:0;z-index:5}
main{position:relative;z-index:2;max-width:var(--site-max-width);margin:24px auto;padding:80px 16px 0 16px;box-sizing:border-box}
.history-page main{padding:120px 16px 0 16px;margin-top:0}
footer{position:relative;z-index:2;max-width:var(--site-max-width);margin:0 auto;padding:12px 16px;box-sizing:border-box}

/* Header / Glass nav */
header{
	background:rgba(0,0,0,0.75);
	color:#fff;
	padding:12px 20px;
	backdrop-filter: blur(6px);
	border-bottom:1px solid rgba(255,255,255,0.08);
}
nav{display:flex;gap:12px;align-items:center;max-width:var(--site-max-width);margin:0 auto;padding:0 16px;box-sizing:border-box;flex-wrap:wrap;justify-content:center}
nav a{color:#eaeaea;margin-right:8px;text-decoration:none;font-weight:600;padding:6px 10px;border-radius:4px;font-size:14px;transition:background-color .18s ease,color .18s ease}
nav a:hover{color:#fff;background-color:rgba(107,144,128,0.2)}
nav a.active{color:#fff;background-color:var(--accent)}

/* Index page hero (full GANYMEDE style) */
body:not(.history-page) .hero{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	padding:0;
	text-align:center;
	background: #000 url("/static/img/background/002.png") center center / cover no-repeat;
	color:#fff;
	aspect-ratio: 3556 / 4088;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	overflow:visible;
}

/* Hero video background */
.hero-video{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:0;
	image-rendering:pixelated;
	filter:contrast(1.1) saturate(1.15);
}

/* Hero overlay for darkening video */
.hero-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.5) 100%);
	z-index:1;
	pointer-events:none;
}

/* Dot pattern overlay */
.hero-overlay::after{
	content:"";
	position:absolute;
	inset:0;
	background-image:
		repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
	pointer-events:none;
	z-index:2;
}

/* Hero content wrapper */
.hero-content{
	position:relative;
	z-index:2;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}

/* Other pages hero (100px, solid black, no image) */
.history-page .hero{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	padding:32px 16px;
	text-align:center;
	background:#000;
	color:#fff;
	height:auto;
	min-height:160px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.hero + section{margin-top:10px}
/* 背景画像レイヤー・停止 */
.hero::after{content:none;}
.hero.is-scrolling::after{transition:none !important;}

/* Darken hero on history page for readability */
.history-page .hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.75) 100%);
	z-index:1;
	pointer-events:none;
}

/* Nav focus / active */
nav a:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:4px;border-radius:4px}

/* Accessible focus for buttons */
.btn:focus{outline:3px solid var(--accent);outline-offset:3px}

/* ドット動きアニメ */
@keyframes dots-move{from{background-position:0 0, center center}to{background-position:120px 120px, center center}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Index page hero の子要素共通スタイル（history-page以外）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body:not(.history-page) .hero-content > *{
	position:relative;             /* 相対配置（通常フロー内） */
	z-index:2;                     /* オーバーレイより前面 */
	max-width:var(--site-max-width);  /* 最大幅を変数で制限 */
	width:100%;                    /* 幅100% */
	margin:0 auto;                 /* 中央揃え */
	padding:0 16px;                /* 左右16pxの余白 */
	box-sizing:border-box;         /* パディング含めて幅計算 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Index page ロゴ（sticky動作）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body:not(.history-page) .hero-content .hero-logo {
	position: sticky;
	/* スクロール時に画面内に固定 */
	top: calc(50vh - 40vh);
	/* 画面上部から10vh（50vh-40vh）の位置に固定 */
	margin-top: calc(50vh - 40vh);
	/* 初期位置：50vh-40vh = 10vh下から開始 */
	z-index: 10;
	/* 最前面 */
	max-width: 80vh;
	/* 最大幅も画面高さ基準（vh）に統一 */
	max-height: 55vh;
	/* 最大高さは画面高さの55% */
	width: auto;
	/* 幅は自動調整 */
	height: auto;
	/* 高さは自動調整 */
	pointer-events: none;
	/* クリックイベント無効 */
	object-fit: contain;
	/* アスペクト比を保持してフィット */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Index page タグライン（sticky動作、ロゴの下に表示）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body:not(.history-page) .hero-content .hero-tagline {
	position: sticky;
	/* スクロール時に画面内に固定 */
	top: 50vh;
	/* 画面上部から50vhの位置に固定（ロゴの下） */
	margin-top: 50vh;
	/* 初期位置：50vh下から開始（ロゴ10vh + ロゴ高さ約55vh） */
	margin-bottom: 10vh;
	/* 下マージン10vh（vh単位で統一） */
	z-index: 10;
	/* 最前面 */
	color: #fff;
	/* 白色テキスト */
	font-size: clamp(14px, 1.5vw, 18px);
	/* レスポンシブなフォントサイズ */
	font-weight: 500;
	/* やや太字 */
	letter-spacing: 1.5px;
	/* 文字間隔 */
	text-transform: uppercase;
	/* 大文字変換 */
	opacity: 0.9;
	/* 90%の不透明度 */
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	/* テキストシャドウで視認性向上 */
	text-align: center;
	/* 中央揃え */
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   動作の仕組み：
   1. hero-logoは初期位置（margin-top: 10vh）から開始、高さ約55vh
   2. スクロールするとposition:stickyでtop:10vh位置に固定
   3. hero-taglineは初期位置（margin-top: 65vh = ロゴ10vh + 55vh）から開始
   4. スクロールするとposition:stickyでtop:65vh位置に固定
   5. 両要素ともvh単位で統一され、画面比率が変わってもずれない
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Other pages hero children */
.history-page .hero > *{
	position:relative;
	z-index:2;
	margin:0;
}

/* Other pages - no hero-logo */
.history-page .hero-logo{
	display:none;
}
.hero h1{font-size:clamp(40px,8vw,90px);margin:8px 0;font-weight:900;line-height:1.05;text-shadow:0 3px 10px rgba(0,0,0,0.4)}
.hero .lead{font-size:clamp(18px,2.5vw,28px);margin:16px 0;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,0.6);max-width:900px}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* Typography */
h1{font-weight:800;font-size:clamp(28px,6.5vw,72px);line-height:1;margin:0 0 8px;color:var(--text);letter-spacing:-0.5px}
h2{font-weight:600;font-size:clamp(18px,2.8vw,24px);margin:0 0 24px;color:var(--text);text-transform:uppercase;letter-spacing:1px}
.lead{opacity:0.95;color:var(--muted);margin:0 0 12px}

/* Button */
.btn{display:inline-block;margin-top:10px;padding:12px 20px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;box-shadow:0 6px 18px rgba(255,87,34,0.3);transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,background-color .18s ease}
.btn:hover,.btn:focus{transform:translateY(-6px);background-color:var(--accent-light);box-shadow:0 18px 34px rgba(255,87,34,0.4)}
.btn.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn.ghost:hover,.btn.ghost:focus{background:var(--accent);color:#fff;box-shadow:0 18px 34px rgba(255,87,34,0.4)}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* Contact CTA Card and Button Styles */
.contact-card{
	background:var(--card-bg);
	border:1px solid var(--card-border);
	border-radius:12px;
	padding:20px;
	max-width:540px;
	margin:0 auto;
}
.contact-cta{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted);font-size:0.9rem}
.inline-link{color:var(--accent);text-decoration:none;font-weight:700}
.inline-link:hover{text-decoration:underline;color:var(--accent-light)}
.alt-link{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,0.5);font-weight:700}
.alt-link:hover{color:var(--accent);text-decoration-color:var(--accent)}
.platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0}
.platform-card{display:flex;align-items:center;gap:16px;padding:16px;border-radius:10px;background:var(--card-bg);border:1px solid var(--card-border);text-decoration:none;color:var(--text);box-shadow:0 8px 20px rgba(0,0,0,0.5);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(255,87,34,0.2);border-color:var(--accent)}
.platform-card .label{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px}
.platform-card .title{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--text)}
.platform-card .desc{margin:0;color:var(--muted)}
.platform-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:80px;height:80px;background:#1a1a1a;border-radius:8px}
.platform-logo svg{color:#fff;width:40px;height:40px}
.platform-logo img{height:auto;width:auto;max-width:70px;max-height:40px;display:block}
.platform-content{flex:1;min-width:0}
.platform-content .platform-name{color:var(--accent);font-weight:600;font-size:14px;margin-bottom:4px}
.video-embed{position:relative;width:100%;max-width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,0.5);border:1px solid var(--card-border);background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Cards (ライブ一覧など - simple text style) */
.live-list{display:flex;flex-direction:column;gap:20px;margin:24px 0}
.card{background:var(--card-bg);border:1px solid var(--card-border);padding:16px;border-radius:8px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 4px 12px rgba(0,0,0,0.4);overflow:hidden}
.card:hover,.card:focus{transform:translateY(-4px);box-shadow:0 8px 24px rgba(107,144,128,0.2);border-color:var(--accent)}
.card h3{margin:12px 0 8px;font-size:18px;color:var(--text);font-weight:600}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* Tweet list (simple text style) */
.tweet-list{display:flex;flex-direction:column;gap:20px;margin:24px 0}
.tweet-card{display:block;padding:16px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:0 4px 12px rgba(0,0,0,0.4);border-radius:8px}
.tweet-body{display:flex;flex-direction:column;gap:8px}
.tweet-date{color:var(--muted);font-size:13px;font-weight:400;margin:0;text-transform:uppercase;letter-spacing:0.5px}
.tweet-text{color:var(--text);line-height:1.8;white-space:pre-wrap;font-size:15px;margin:8px 0}
.tweet-link{margin:8px 0 0}
.tweet-link a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.tweet-link a:hover{text-decoration:underline;color:var(--accent-light)}
.tweet-media{margin-top:16px;display:grid;gap:12px}
.tweet-media img{width:100%;height:auto;object-fit:cover;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.tweet-media-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:720px){
	.tweet-media-grid{grid-template-columns:1fr}
}

.member-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.member-avatar {
	width: 144px;
	height: 144px;
	object-fit: cover;
	border-radius: 12px;
	background: #222;
	flex-shrink: 0;
}

.member-body h3 {
	margin: 0 0 4px;
	color: var(--text);
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

.photo-wide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.5);
	margin-bottom: 14px;
}

.member-body .role {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 0.95rem;
}

.member-body .bio {
	margin: 0 0 8px;
	line-height: 1.5;
	color: var(--text);
}

.member-body .sns a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.member-body .sns a:hover {
	text-decoration: underline;
	color: var(--accent-light);
}
.event-date{font-weight:400;color:var(--muted);font-size:13px;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}
.event-desc{font-size:14px;margin-top:8px;color:var(--text);line-height:1.7}
.event-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin:0 0 12px 0;transition:opacity .18s ease;background:#1a1a1a}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover .event-image{opacity:0.9}
.card-link h3{color:var(--text);transition:color .18s ease}
.card-link:hover h3{color:var(--accent)}

/* Timeline (history) */
.timeline{list-style:none;padding:0;margin:16px 0 0 0;position:relative}
.timeline::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),rgba(255,87,34,0.2));border-radius:2px}
.timeline-item{position:relative;padding-left:68px;margin-bottom:84px}
.timeline-item time{display:block;font-weight:700;font-size:13px;color:var(--accent);margin-bottom:6px}
.timeline-item .title{font-weight:700;color:var(--text);margin-bottom:6px}
.timeline-item .desc{color:var(--muted);margin:0}
.timeline-item .desc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(255,87,34,0.5);font-weight:600}
.timeline-item .desc a:hover{color:var(--accent-light);text-decoration-color:var(--accent-light)}
.timeline-item::before{content:"";position:absolute;left:16px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(255,87,34,0.1)}

/* Timeline iframe (YouTube) responsive */
.timeline-item iframe{
	width:100% !important;
	max-width:100%;
	height:auto;
	aspect-ratio:16/9;
	border-radius:8px;
	margin-top:12px;
}

/* コンテンツエリア（section等）に不透明レイヤー */
main > section{background:rgba(26,26,26,0.6);padding:24px;border-radius:12px;margin-bottom:40px;border:1px solid var(--card-border);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
main > section h2{color:var(--text);margin:0 0 24px;letter-spacing:1px;font-size:14px;text-transform:uppercase;font-weight:600}
main > section p{margin:0 0 12px;line-height:1.8;color:var(--text)}
main > section ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}

.intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 24px;
	background: none;
	border: none;
	padding: 0;
}

.intro p {
	color: var(--text);
}

/* About CTA Section */
.about-cta{
	margin-bottom: 32px;
}

.about-cta-container{
	display: block;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px 28px;
	background: transparent;
	border: 1px solid rgba(107,144,128,0.3);
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
}

.about-cta-container:hover{
	background: linear-gradient(135deg, rgba(107,144,128,0.12) 0%, rgba(107,144,128,0.05) 100%);
	border-color: rgba(107,144,128,0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(107,144,128,0.2);
}

.about-cta-title{
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 6px;
	letter-spacing: 0.3px;
}

.about-cta-desc{
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.intro-card{
	background:rgba(0,0,0,0.65);
	border:1px solid var(--card-border);
	border-radius:12px;
	padding:24px 20px;
	box-shadow:0 6px 18px rgba(0,0,0,0.4);
}

.intro-title{
	font-size:16px;
	font-weight:700;
	color:var(--text);
	text-transform:uppercase;
	letter-spacing:1px;
	margin:0 0 20px;
	text-align:center;
}

.intro-links-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
	margin-top:16px;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}

.intro-link-card{
	display:flex;
	align-items:flex-start;
	gap:20px;
	padding:16px;
	background:rgba(255,255,255,0.03);
	border:1px solid var(--card-border);
	border-radius:10px;
	text-decoration:none;
	transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
	box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.intro-link-card:hover,
.intro-link-card:focus{
	transform:translateY(-3px);
	background:rgba(107,144,128,0.08);
	border-color:var(--accent);
	box-shadow:0 6px 16px rgba(107,144,128,0.2);
}

.link-icon{
	flex-shrink:0;
	width:80px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.link-icon img{
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}

.link-icon-text{
	font-size:28px;
}

.link-content{
	flex:1;
	min-width:0;
	text-align:left;
}

.link-title{
	font-size:16px;
	font-weight:700;
	color:var(--text);
	margin:0 0 6px;
}

.link-desc{
	font-size:13px;
	line-height:1.6;
	color:var(--muted);
	margin:0;
}

/* Legacy styles (kept for backward compatibility) */
.intro-links{
	margin-top:16px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
}

.intro-link{
	color:var(--text);
	text-decoration:none;
	border:1px solid var(--card-border);
	border-radius:999px;
	padding:10px 14px;
	font-weight:600;
	background:rgba(255,255,255,0.04);
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}

.intro-link:hover,
.intro-link:focus{
	color:#fff;
	background:rgba(107,144,128,0.15);
	border-color:var(--accent);
}

.section-lead{color:var(--muted);font-size:15px}

/* About page layout */
.about-content{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:32px;
	align-items:start;
}

.goods-content{
	grid-template-columns:1fr;
	max-width:800px;
}

.about-text{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.about-photos{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.about-photos img{
	width:100%;
	height:auto;
	object-fit:cover;
	border-radius:10px;
	box-shadow:0 10px 24px rgba(0,0,0,0.5);
}

@media (max-width:900px){
	.about-content{
		grid-template-columns:1fr;
	}
	.intro-links-grid{
		grid-template-columns:1fr;
	}
}

@media (max-width:1500px){
	body:not(.history-page) .hero{
		width:1500px;
		min-width:1500px;
		margin-left:0;
		left:50%;
		transform:translateX(-50%);
	}
}

@media (max-width:800px){
	header{padding:10px 12px}
	nav{gap:10px}
	nav a{font-size:14px}
	.history-page main{padding-top:90px;padding-left:16px;padding-right:16px}
	.history-page .hero{
		height:auto;
		min-height:140px;
		padding:28px 16px;
	}
	body:not(.history-page) .hero{
		width:100vw;
		min-width:0;
		margin-left:calc(50% - 50vw);
		left:0;
		transform:none;
	}
}

@media (max-width:600px){
	.hero-logo{max-width:95%;max-height:75%}
	.card{padding:12px}
	body:not(.history-page) .hero{height:auto}
	.history-page main{padding-top:80px;padding-left:16px;padding-right:16px}
	.history-page .hero{
		height:auto;
		min-height:140px;
		padding:24px 12px;
	}
	.hero .lead{font-size:16px}
}

footer{padding:24px;text-align:center;background:#111;color:#b0b0b0;border-top:1px solid #2a2a2a}
/* Archive grid layout (4 columns on desktop) */
.archive-grid{
	display:grid !important;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
}

/* Responsive archive grid */
@media (max-width:1200px){
	.archive-grid{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width:900px){
	.archive-grid{
		grid-template-columns:repeat(2, 1fr);
	}
}

@media (max-width:800px){
	.archive-grid{
		grid-template-columns:1fr;
	}
	/* hero-contentを中央揃えに */
	body:not(.history-page) .hero-content {
		align-items: center;
	}
	/* ロゴの幅を制限 */
	body:not(.history-page) .hero-content .hero-logo {
		max-width: 90vw;
	}
	/* タグラインをhero領域の最下部に固定表示 */
	body:not(.history-page) .hero-content .hero-tagline {
		position: absolute;
		bottom: 20px;
		top: auto;
		margin-top: 0;
		margin-bottom: 0;
		left: 0;
		right: 0;
	}
}

/* Booth Items Grid */
.booth-items-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.booth-item-card{
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booth-item-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.booth-item-image{
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bg);
}

.booth-item-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.booth-item-body{
	padding: 20px;
}

.booth-item-title{
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

.booth-item-title a{
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.booth-item-title a:hover{
	color: var(--accent-light);
}

.booth-item-desc{
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

.booth-item-link{
	margin: 0;
}

.btn-small{
	display: inline-block;
	background: var(--accent);
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-small:hover{
	background: var(--accent-light);
	text-decoration: none;
	transform: translateX(2px);
}

@media (max-width:600px){
	.booth-items-grid{
		grid-template-columns: 1fr;
	}
}