* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; font-family: "Hiragino Kaku Gothic Pro","Noto Sans JP",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Yu Gothic", sans-serif; color:#222; background:#fafafa; }

body {
  font-family: "Hiragino Kaku Gothic Pro","Noto Sans JP",sans-serif;
  color: #222;
  background: url("background.png") no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
/* コンテナ */
.container { width: min(1100px, 92%); margin: 0 auto; }

/* ヘッダー */
.site-header { background: linear-gradient(180deg, #111, #0e0e0e); color: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.8rem 0; }
.logo { font-size:1.25rem; letter-spacing:0.08em; }
.logo a { color:inherit; text-decoration:none; }

/* ナビ */
.main-nav ul { display:flex; gap:0.75rem; list-style:none; align-items:center; }
.nav-link { color:#dcdcdc; text-decoration:none; padding:0.45rem 0.6rem; border-radius:6px; display:inline-block; font-weight:600; }
.nav-link:hover { background: rgba(255,255,255,0.04); color:#fff; }
.nav-link.active { background: rgba(255,255,255,0.06); color:#fff; }

/* 無効リンクの見た目 */
.no-link { cursor: default; opacity: .7; pointer-events: none; }

/* ハンバーガー（モバイル） */
.hamburger { display:none; background:transparent; border:0; padding:0.5rem; margin-left:0.5rem; }
.hamburger span { display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }

/* モバイルナビ（初期非表示） */
.mobile-nav { display:none; background:#0b0b0b; color:#fff; }
.mobile-nav[aria-hidden="false"] { display:block; padding:0.75rem 0; }
.mobile-nav ul { list-style:none; display:flex; flex-direction:column; gap:0.5rem; padding:0 1rem; }
.mobile-nav a, .mobile-nav .mobile-no-link { color:#fff; text-decoration:none; padding:0.6rem 0.8rem; display:block; }

/* ヒーロー */
.hero { padding:3.2rem 0; background: linear-gradient(180deg, #faf7f4 0%, #fff 100%); text-align:center; }
.hero-title { font-size:2rem; margin-bottom:0.5rem; color:#111; }
.hero-sub { color:#555; margin-bottom:1rem; }

/* ボタン */
.btn { display:inline-block; padding:0.65rem 1rem; border-radius:8px; font-weight:700; text-decoration:none; border:1px solid rgba(0,0,0,0.06); }
.btn.primary { background:linear-gradient(90deg,#6b2cff,#2f7bff); color:#fff; box-shadow: 0 6px 18px rgba(47,123,255,0.12); border:0; }
.btn.ghost { background:transparent; color:#333; border:1px solid #ddd; }

/* コンテンツ */
.intro { padding:1.6rem 0; color:#333; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; padding:1.6rem 0; }
.features article { background:#fff; border-radius:10px; padding:1rem; box-shadow:0 6px 18px rgba(15,15,15,0.04); }

/* ページタイトル */
.page-title { padding:2rem 0; }
.placeholder .box { padding:2rem; border:2px dashed #e4e4e4; border-radius:8px; text-align:center; color:#666; }

/* フッター */
.site-footer { padding:1rem 0; background:#111; color:#ddd; margin-top:2rem; text-align:center; }

/* レスポンシブ */
@media (max-width: 800px) {
  .main-nav { display:none; }
  .hamburger { display:block; color:#fff; }
  .hero-title { font-size:1.5rem; }
}