:root{
  /* refined dark palette */
  --bg: #07131a; /* deep charcoal-blue */
  --panel: #0d1620; /* cards / panels */
  --muted: #9aa6b0; /* secondary text */
  --text: #eef3f7; /* main text */
  --accent: #c9a951; /* soft gold */
  --accent-2: #8a5a34; /* warm brown */
  --glass: rgba(255,255,255,0.03);
  --ring: rgba(201,169,81,0.18);
  --shadow-soft: 0 8px 22px rgba(2,8,15,0.5);
  --shadow-deep: 0 18px 48px rgba(2,6,23,0.55);
  font-size:16px;
}
/* Local corporate Mincho font (placed in docs/assets/) */
@font-face{
  font-family: 'Corporate Mincho';
  src: url('assets/Corporate-Mincho-ver3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
body{
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,#031018 0%, var(--bg) 100%);
  color:var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1040px;padding:28px 20px;margin:0 auto}

/* header */
.site-header{
  position:sticky;top:0;z-index:60;padding:14px 0;background:transparent;border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px)
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.logo{font-family:'Noto Serif JP', 'Noto Sans JP', serif; font-weight:700;margin:0;font-size:1.15rem;color:var(--text);letter-spacing:0.4px;flex:1 1 0;min-width:0;display:flex;align-items:center}
.logo img{height:44px;max-height:56px;width:auto;display:block}
/* responsive header tweaks: prevent wrapping and keep controls aligned */
.reserve-btn{white-space:nowrap}
.menu-toggle{order:2}
.reserve-btn{order:3}

/* nav */
.main-nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600;padding:8px;border-radius:8px;transition:color .15s ease, background .15s ease}
.main-nav a:hover, .main-nav a:focus{color:var(--text);background:rgba(255,255,255,0.02)}

/* Make visited/active links clearly visible (use main text color / white) */
a:visited{color:var(--text)}
a:active{color:var(--text)}
a:focus{color:var(--text);outline:3px solid var(--ring);outline-offset:2px}

/* reservation button (primary) */
.reserve-btn{margin-left:18px;display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);color:#07131a;font-weight:700;text-decoration:none;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,0.2)}
.reserve-btn:focus,.reserve-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-deep);outline:3px solid var(--ring)}

/* hero */
.hero{padding:72px 0;min-height:60vh;display:flex;align-items:center}
.hero-inner{display:flex;gap:32px;align-items:center}
.hero h2{font-family:'Corporate Mincho', 'Noto Serif JP', serif;margin:0 0 14px;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.02;color:var(--text)}
.hero p{margin:0 0 16px;color:var(--muted);font-size:1.05rem}
.hero .reserve-btn{margin-left:0;margin-top:10px;padding:12px 20px;font-size:1rem}

.mascot{display:flex;align-items:center;justify-content:center}

/* content */
.features{padding:32px 0}
.features h3{margin-top:0;color:var(--text);font-family:'Corporate Mincho', 'Noto Serif JP'}
.features p, .card p { font-family: 'Corporate Mincho', 'Noto Serif JP', 'Noto Mincho', serif; color:var(--muted); }
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:linear-gradient(180deg,var(--panel), rgba(13,22,32,0.95));padding:20px;border-radius:12px;box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,0.02);transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-deep)}
.card h4{margin:0 0 8px;font-family:'Corporate Mincho', 'Noto Serif JP'}
.card p{margin:0;color:var(--muted)}

.gallery{padding:28px 0}
.muted{color:var(--muted)}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.photo{background:transparent;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease}
.photo:focus,.photo:hover{transform:translateY(-6px);box-shadow:var(--shadow-deep)}
.photo::after{content:"拡大して見る";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.45);color:var(--text);padding:6px 10px;border-radius:8px;opacity:0;transition:opacity .18s ease}
.photo:hover::after,.photo:focus::after{opacity:1}

/* thumbnails inside .photo anchors */
.photo img{display:block;width:100%;height:auto;object-fit:cover}
.photo{position:relative;display:block}
.photo .play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.45);color:var(--text);padding:8px 12px;border-radius:999px;font-weight:700;box-shadow:0 6px 18px rgba(2,6,9,0.6)}
.photo:focus .play-overlay,.photo:hover .play-overlay{background:rgba(0,0,0,0.6);transform:translate(-50%,-50%) scale(1.05)}

.contact{padding:28px 0}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:48px;background:transparent}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mini{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer}

/* Secret key button more refined */
.secret-btn{font-size:20px;padding:10px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);box-shadow:none;color:var(--text);transition:transform .12s ease, box-shadow .12s ease}
.secret-btn:hover,.secret-btn:focus{transform:scale(1.08);box-shadow:0 8px 22px rgba(138,90,52,0.12)}

/* responsive */
@media (max-width:900px){
  .container{padding:20px}
}
@media (max-width:760px){
  .hero{padding:36px 0}
  .hero-inner{flex-direction:column;text-align:center}
  .main-nav{display:none}
  .menu-toggle{display:inline-block}
  .reserve-btn{margin-left:8px;padding:8px 10px;font-size:0.95rem}
  .logo{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logo img{height:36px;max-height:42px}
  .mascot svg{max-width:120px;height:auto}
}

/* mobile nav overlay */
.menu-toggle{display:none;border:0;background:transparent;color:var(--text);font-size:22px;padding:8px 10px;border-radius:8px;cursor:pointer}
.mobile-nav{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:64px;padding-left:18px;padding-right:18px;background:linear-gradient(180deg, rgba(2,6,9,0.6), rgba(2,6,9,0.85));backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .22s ease;transform:translateY(-6%);z-index:180}
.mobile-nav.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.mobile-nav-inner{max-width:420px;width:100%;background:linear-gradient(180deg,#07131a,#0d1620);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-deep)}
.mobile-nav nav{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.mobile-nav a{color:var(--text);text-decoration:none;padding:12px 14px;border-radius:8px;background:rgba(255,255,255,0.02);font-weight:700}
.mobile-close{position:absolute;right:22px;top:22px;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,9,0.6);display:flex;align-items:center;justify-content:center;z-index:200}
.modal{background:linear-gradient(180deg,#0b1216,#0d1418);padding:20px;border-radius:12px;max-width:520px;width:92%;box-shadow:var(--shadow-deep);border:1px solid rgba(255,255,255,0.03);color:var(--text)}
.modal h4{margin:0 0 8px;font-family:'Noto Serif JP'}
.modal label{display:block;font-size:0.95rem;margin-top:10px;color:var(--muted)}
.modal input,.modal textarea,.modal select{width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:var(--text);cursor:pointer}
.btn-primary{background:var(--accent);color:#07131a;padding:8px 12px;border-radius:8px;border:0;cursor:pointer}

/* small tweaks */
@media (max-width:520px){
  .hero h2{font-size:1.5rem}
}

/* confetti pieces */
.confetti-piece{position:fixed;width:10px;height:14px;pointer-events:none;z-index:9999;border-radius:2px;opacity:0.95}