html, body { margin:0; min-height:100%; overflow-x:hidden; overflow-y:auto; background:#000000; color:#F3F3F3; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing:border-box; }
a { color:#ffd8b0; text-decoration:none; transition:all .22s ease; }
a:hover { color:#F2C995; }
img { display:block; max-width:100%; height:auto; }
main { position:relative; z-index:1; }
.site-header { position:sticky; top:0; width:100%; z-index:9999; background:#000000; box-shadow:0 8px 24px rgba(0,0,0,.38); backdrop-filter:blur(10px); }
.header-inner { max-width:1280px; margin:0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:0 24px; }
.brand-logo img { width:142px; max-height:48px; object-fit:contain; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; }
.desktop-nav a { color:#ffd8b0; padding:12px 13px; border-radius:999px; font-size:15px; line-height:1; position:relative; white-space:nowrap; }
.desktop-nav a.active, .desktop-nav a:hover { background:#111111; color:#ffd8b0; box-shadow:inset 0 -2px 0 rgba(255,216,176,.75),0 10px 22px rgba(255,216,176,.08); }
.main-btn { display:inline-flex; align-items:center; justify-content:center; background:#ffd8b0; color:#000000; border-radius:999px; box-shadow:0 10px 24px rgba(255,216,176,.22); padding:12px 22px; font-weight:700; border:0; cursor:pointer; }
.main-btn:hover { background:#F2C995; color:#000000; transform:translateY(-1px); }
.main-btn.small { padding:9px 14px; font-size:13px; }
.mobile-top { display:none; }
.mobile-drawer, .menu-mask { display:none; }
.container { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.hero-section { background:radial-gradient(circle at 18% 20%, rgba(255,216,176,.15) 0%, rgba(255,216,176,0) 30%),linear-gradient(135deg,#000000 0%,#111111 52%,#161616 100%); padding:74px 0 56px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:36px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#ffd8b0; border:1px solid rgba(255,216,176,.22); background:rgba(255,216,176,.06); border-radius:999px; padding:8px 14px; font-size:14px; margin-bottom:18px; }
h1,h2,h3 { color:#ffd8b0; margin:0; line-height:1.25; }
h1 { font-size:clamp(34px,5vw,62px); letter-spacing:.02em; }
h2 { font-size:clamp(26px,3.4vw,42px); }
h3 { font-size:22px; }
p { color:#C9C9C9; line-height:1.85; margin:0; }
.hero-copy p { margin:20px 0 28px; font-size:17px; color:#F3F3F3; max-width:660px; }
.hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.text-link { border-bottom:1px solid rgba(255,216,176,.38); padding-bottom:2px; }
.hero-visual { border:1px solid rgba(255,216,176,.22); border-radius:30px; background:linear-gradient(145deg,#050505,#161616); box-shadow:0 24px 80px rgba(255,216,176,.12),0 20px 60px rgba(0,0,0,.5); padding:20px; }
.hero-visual img, .content-img, .zone-card img, .app-section img, .page-visual img { width:100%; max-width:100%; height:auto; object-fit:contain; border-radius:22px; background:#0b0b0b; }
.hero-cards { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px; }
.card, .zone-card, .info-card, .service-card, .faq-item, .notice-card { background:#111111; border:1px solid rgba(255,216,176,.18); box-shadow:0 14px 36px rgba(0,0,0,.42); border-radius:24px; }
.hero-cards .info-card { padding:22px; }
.num { color:#ffd8b0; font-weight:800; letter-spacing:.08em; display:block; margin-bottom:10px; }
.section { padding:72px 0; }
.section.alt { background:#050505; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:30px; }
.section-head p { max-width:680px; }
.pill-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.pill { background:rgba(255,216,176,.06); border:1px solid rgba(255,216,176,.18); border-radius:999px; padding:14px 18px; display:flex; gap:10px; align-items:center; color:#F3F3F3; }
.pill strong { color:#ffd8b0; }
.service-strip { background:#111111; border-top:1px solid rgba(255,216,176,.12); border-bottom:1px solid rgba(255,216,176,.12); padding:28px 0; }
.service-strip p { color:#F3F3F3; font-size:17px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card { padding:28px; }
.service-card ul, .text-panel ul, .app-text ul, .page-card ul { padding-left:18px; margin:18px 0 0; color:#C9C9C9; line-height:1.8; }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-bottom:38px; }
.feature-row:last-child { margin-bottom:0; }
.image-box { background:#111111; border:1px solid rgba(255,216,176,.18); border-radius:28px; padding:18px; box-shadow:0 14px 36px rgba(0,0,0,.42); }
.text-panel { padding:10px; }
.text-panel p { margin:18px 0; }
.zone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.zone-card { overflow:hidden; }
.zone-card .zone-body { padding:22px; }
.zone-tag { color:#ffd8b0; font-size:13px; letter-spacing:.08em; display:block; margin-bottom:10px; }
.app-section { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:34px; background:linear-gradient(145deg,#111111,#1D1D1D); border:1px solid rgba(255,216,176,.18); border-radius:30px; padding:26px; box-shadow:0 14px 36px rgba(0,0,0,.42); }
.point-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.point-grid .info-card { padding:20px; }
.faq-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.faq-item { padding:24px; }
.faq-item p { margin-top:10px; }
.notice-card { padding:30px; background:linear-gradient(135deg,#111111,#050505); }
.site-footer { background:#050505; color:#DADADA; border-top:1px solid rgba(255,216,176,.14); }
.footer-inner { width:min(1180px, calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:28px; padding:46px 0; }
.footer-brand img { width:140px; max-height:48px; object-fit:contain; margin-bottom:16px; }
.footer-links, .footer-note { display:flex; flex-direction:column; gap:10px; }
.footer-links h2, .footer-note h2 { font-size:18px; }
.footer-links a { color:#DADADA; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:18px; text-align:center; color:#9A9A9A; }
.page-hero { padding:68px 0 34px; background:radial-gradient(circle at 20% 10%,rgba(255,216,176,.12),transparent 32%),#000000; }
.page-hero .container { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; }
.page-hero p { margin-top:18px; font-size:17px; }
.page-visual { border-radius:28px; padding:18px; background:#111111; border:1px solid rgba(255,216,176,.18); }
.content-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.page-card { padding:28px; }
.rich-text { background:#111111; border:1px solid rgba(255,216,176,.18); border-radius:26px; padding:30px; }
.rich-text p + p { margin-top:16px; }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width: 1020px) { .desktop-nav { gap:2px; } .desktop-nav a { padding:10px 8px; font-size:13px; } .zone-grid, .point-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 820px) {
  .header-inner { display:none; }
  .mobile-top { min-height:64px; display:grid; grid-template-columns:84px 1fr 98px; align-items:center; padding:0 14px; background:#000000; }
  .mobile-logo { justify-self:center; }
  .mobile-logo img { width:128px; max-height:44px; object-fit:contain; }
  .menu-toggle { width:42px; height:42px; border:1px solid rgba(255,216,176,.22); background:#111111; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .menu-toggle span { width:20px; height:2px; background:#ffd8b0; border-radius:10px; }
  .mobile-drawer { display:block; position:fixed; left:0; top:0; bottom:0; width:min(82vw,330px); background:#050505; border-right:1px solid rgba(255,216,176,.2); transform:translateX(-105%); transition:transform .25s ease; z-index:10002; padding:20px; overflow-y:auto; }
  .menu-mask { display:block; position:fixed; inset:0; background:rgba(0,0,0,.62); opacity:0; visibility:hidden; z-index:10001; transition:.25s ease; }
  body.menu-open { overflow:hidden; }
  body.menu-open .mobile-drawer { transform:translateX(0); }
  body.menu-open .menu-mask { opacity:1; visibility:visible; }
  .drawer-brand { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
  .drawer-brand img { width:132px; max-height:48px; object-fit:contain; }
  .drawer-close { background:#111111; color:#ffd8b0; border:1px solid rgba(255,216,176,.2); width:36px; height:36px; border-radius:50%; font-size:22px; }
  .mobile-drawer nav { display:flex; flex-direction:column; gap:8px; }
  .mobile-drawer nav a { padding:14px 12px; border-radius:14px; color:#ffd8b0; background:#111111; }
  .mobile-drawer nav a.active { box-shadow:inset 3px 0 0 #ffd8b0; background:#1D1D1D; }
  .drawer-btn { width:100%; margin-top:18px; }
  .hero-grid, .page-hero .container, .feature-row, .app-section { grid-template-columns:1fr; }
  .hero-section { padding:46px 0; }
  .hero-cards, .service-grid, .pill-nav, .zone-grid, .point-grid, .faq-list, .content-grid, .contact-grid, .footer-inner { grid-template-columns:1fr; }
  .section-head { display:block; }
  .section-head p { margin-top:12px; }
  .footer-inner { padding:36px 0; }
}
@media (max-width: 480px) { .container, .footer-inner { width:min(100% - 28px, 1180px); } .mobile-top { grid-template-columns:62px 1fr 92px; padding:0 10px; } .main-btn.small { padding:8px 11px; } .hero-visual, .image-box, .page-visual, .app-section { padding:12px; border-radius:22px; } .card, .zone-card, .info-card, .service-card, .faq-item, .notice-card, .rich-text, .page-card { border-radius:20px; } }