:root{
	--bg:#fff5eb; --panel:#ffffff; --ink:#222; --muted:#555;
	--accent:#ff7a00; --accent2:#00a2ff; --link:#005bbb; --border:#e5e5e5;
}
*{box-sizing:border-box}
	html,body{margin:0;padding:0;background:linear-gradient(180deg,#fff5eb 0%,#ffffff 80%);color:var(--ink);font-family:"Yu Gothic","Noto Sans JP",sans-serif;line-height:1.6}
		a{color:var(--link);text-decoration:none}
			a:hover{text-decoration:underline}
				.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
					header{position:sticky;top:0;z-index:20;background:#fff8f0;border-bottom:1px solid var(--border)}
						.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
							.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.08em;color:#ff7a00}
								.orb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff1c9, #ff7a00 60%, #c04a00);box-shadow:0 0 12px #ff7a00aa}
									nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
										nav a{display:block;padding:8px 10px;border-radius:8px}
											nav a:hover{background:#ffe2c4}
												.hero{background:#ffe8d4;border-bottom:1px solid var(--border)}
													.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;min-height:60vh}
														.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.2;margin:0;color:#ff6200}
															.hero p{color:var(--muted);margin:14px 0 22px}
																.cta{display:flex;gap:12px;flex-wrap:wrap}
																	.btn{padding:12px 16px;border-radius:10px;font-weight:700;border:1px solid var(--border);background:#fff;color:#222}
																		.btn--accent{background:linear-gradient(90deg,#ff7a00,#ffc400);color:#fff;border:none;box-shadow:0 4px 16px #ff7a0040}
																			.splash{border-radius:18px;aspect-ratio:16/10;background:url("https://images.unsplash.com/photo-1587574293340-e04f4dcd6159?q=80&w=1200&fit=crop") center/cover;border:2px solid #ffc4a4}
																				section{padding:48px 0}
																					.grid{display:grid;gap:18px}
																						.grid.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
																							.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
																								.card .ph{aspect-ratio:16/9;background:#eee;border-bottom:1px solid var(--border)}
																									.card h3{margin:14px 16px 6px;font-size:18px;color:#ff6200}
																										.card p{margin:0 16px 16px;color:#333}
																											.card a.more{margin:0 16px 18px auto;color:var(--link)}
																												.card1 .ph{background:url("https://images.unsplash.com/photo-1613623195410-10fb50a62ddb?q=80&w=1200&fit=crop") center/cover}
																													.card2 .ph{background:url("https://images.unsplash.com/photo-1508614589041-895b88991e6b?q=80&w=1200&fit=crop") center/cover}
																														.card3 .ph{background:url("https://images.unsplash.com/photo-1508610048659-a06a20c1c4d3?q=80&w=1200&fit=crop") center/cover}
																															.updates{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
																																.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px}
																																	footer{border-top:1px solid var(--border);padding:28px 0;color:#555;background:#fff8f0}
																																		.copy{font-size:12px;opacity:.8}
																																			@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.grid.cards{grid-template-columns:1fr 1fr}.updates{grid-template-columns:1fr}}
																																						@media (max-width:560px){.grid.cards{grid-template-columns:1fr}}
																																							
																																							/* === TOPバナー === */
																																							header::after{
																																								content:"";
																																								display:block;
																																								width:100%;
																																								height:300px; /* 固定高さに変更（好みで調整） */
																																								background: url("./db.png") center center/contain no-repeat;
																																								background-color: #000;  /* 余白は黒塗りに */
																																								border-bottom:1px solid var(--border);
																																							}
																																							
																																							/* デフォルト: PCでは非表示 */
																																							.nav-toggle { display: none; }
																																							@media (max-width:560px){
																																								/* 横スクロール抑止（保険） */
																																								html, body { overflow-x: hidden; }
																																								
																																								/* トグルは右寄せのまま */
																																								.nav-toggle{
																																									display:inline-block;
																																									margin-left:auto;
																																									padding:8px 12px;
																																									font-size:14px;
																																									line-height:1;
																																									border:1px solid #ccc;
																																									background:#fff;
																																									border-radius:6px;
																																								}
																																								
																																								/* ナビは幅100%、折りたたみ */
																																								header nav{ width:100%; }
																																								header nav ul{
																																									/* 横並びのflexを使わない＝縦一列 */
																																									display:block;               /* ← 重要 */
																																									max-height:0;
																																									overflow:hidden;
																																									transition:max-height .25s ease;
																																									background:#fff;
																																									border:1px solid #eee;
																																									border-radius:10px;
																																									margin-top:8px;
																																									padding:0;                   /* 余白リセット */
																																								}
																																								header nav.is-open ul{ max-height:60vh; } /* 展開時 */
																																								
																																								/* 縦一列&全幅、横スクロールしない */
																																								header nav ul li{
																																									display:block;
																																									width:100%;
																																									border-top:1px solid #f1f1f1;
																																									margin:0;
																																								}
																																								header nav ul li:first-child{ border-top:none; }
																																								
																																								header nav ul li a{
																																									display:block;
																																									width:100%;
																																									padding:12px 14px;
																																									font-size:14px;
																																									white-space:nowrap;         /* 1行キープ */
																																									text-overflow:ellipsis;     /* 長い文字は省略表示 */
																																									overflow:hidden;            /* はみ出し隠す */
																																									text-align:left;            /* お好みで center→left */
																																								}
																																								header::after{
																																									height: min(48vw, 220px);   /* 例: 画面幅ベースで高さ調整 */
																																									background-size: contain;   /* ← cover をやめて contain に */
																																									background-position: center center;
																																									background-color: #000;     /* 余白が出たときの土台色 */
																																								}
																																							}
																																							
																																							/* ===== HERO右側（ball.png 768x768 = 正方形）===== */
																																							.splash{
																																								aspect-ratio: 1 / 1;                     /* 正方形で確保 */
																																								background: #000 url("./space.png") center center / contain no-repeat;
																																								border:2px solid #ffc4a4;
																																								border-radius:18px;
																																							}
																																							
																																							/* ===== カード画像 ===== */
																																							.card1 .ph,
																																							.card2 .ph,
																																							.card3 .ph {
																																								aspect-ratio: 1 / 1;              /* 全部を正方形に統一 */
																																								background-position: center center;
																																								background-repeat: no-repeat;
																																								background-size: cover;           /* 枠いっぱいに表示、トリミングあり */
																																								width: 100%;
																																							}
																																							.card1 .ph { background-image: url("./saiyan.png"); }
																																							.card2 .ph { background-image: url("./dragonball.png"); }
																																							.card3 .ph { background-image: url("./ball.png"); }