/* ===============================================
   vintage love hotel — V2
   Motif: 「ジブリ × 昭和レトロ × 都市の静けさ」
   Reference vibe: HOTEL SHE old-site (spaced nav, generous whitespace, grain, muted palette)
   =============================================== */

:root{
  --bg: #F8F3E8;            /* 生成クリーム */
  --ink: #1D1C1A;           /* 深い墨 */
  --ink-2:#3a3834;
  --muted:#6b655b;
  --accent-teal:#79b9b2;    /* くすみミント */
  --accent-rust:#C56E58;    /* 赤茶 */
  --accent-lilac:#B8A8D6;   /* 藤 */
  --line:#e9e2d5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: var(--bg);
  color:var(--ink-2);
  line-height:1.9;
  letter-spacing:.02em;
}

/* Typography */
h1,h2,h3{
  font-family:"Zen Antique Soft","Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink);
  letter-spacing:.02em;
}
h1{font-size:clamp(30px,5.6vw,64px)}
h2{font-size:clamp(22px,3vw,36px)}
h3{font-size:clamp(18px,2.2vw,24px)}
p{color:var(--ink-2)}

/* Section headings (料金/お知らせ/設備/アクセス/お問い合わせ etc.) */
.wrapper h2,
.two-col > aside h2{
  font-family:"Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Japanese headings shouldn't be all-uppercase */
.wrapper h2:lang(ja),
.two-col > aside h2:lang(ja){
  text-transform:none;
}

.spaced{letter-spacing:.36em;text-transform:lowercase}
.caps-spaced{letter-spacing:.36em}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 22px}
.wrapper{padding:72px 0}
.hr{height:1px;background:var(--line);margin:48px 0}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
  background:rgba(248,243,232,.85);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:14px;text-decoration:none;color:inherit}
.brand-badge{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,#fff,#f0eadf);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  position:relative;overflow:hidden;
}
.brand-badge::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(300px 140px at 60% -10%, rgba(121,185,178,.25), transparent 60%);
  mix-blend-mode:multiply;opacity:.6;
}
.brand-title{line-height:1.05}
.brand-title .main{font-family:"Zen Antique Soft",serif;font-size:18px;letter-spacing:.04em}
.brand-title .sub{font-size:11px;opacity:.65;letter-spacing:.18em}

/* Nav links with spaced type */
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;color:var(--ink-2);
  font-size:13px;letter-spacing:.36em;text-transform:lowercase;
  padding:8px 6px;border-bottom:1px solid transparent;
}
.nav-links a:hover{border-color:var(--ink);}

/* Mobile hamburger menu (shared) */
.menu-toggle{
  --hamburger-ink: var(--ink);
  display:none;
  width:44px;height:44px;
  padding:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  position:relative;
  z-index:60;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.menu-toggle::before,
.menu-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  width:22px;
  height:3px;
  background:var(--hamburger-ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:transform .2s ease, opacity .2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.55);
}

.menu-toggle::before{
  top:14px;
  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 8px 0 var(--hamburger-ink),
    0 16px 0 var(--hamburger-ink);
}

.menu-toggle::after{opacity:0;}

.menu-toggle[aria-expanded="true"]::before{
  top:22px;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:none;
}

.menu-toggle[aria-expanded="true"]::after{
  top:22px;
  opacity:1;
  transform:translateX(-50%) rotate(-45deg);
}

.mobile-menu{
  border-top:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  z-index:55;
}

.mobile-menu-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 22px 14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 14px;
}

.mobile-menu-inner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  color:rgba(0,0,0,.82);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:none;
}

.mobile-menu-inner a:active{transform:translateY(1px)}

body.is-menu-open{
  overflow:hidden;
  touch-action:none;
  position:fixed;
  width:100%;
}

@media (max-width:480px){
  .site-header{z-index:80;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .site-header .nav-links{display:none;}
}

@media (max-width:480px){
  /* Top page: members card text size */
  #members-card p{font-size:.8rem !important;}
  #members-card p{line-height:1.55;}
  #members-card p + p{margin-top:8px !important;}
}

@media (max-width:480px){
  /* Top page: contact form overflow fix */
  #contact form.form [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  #contact .input,
  #contact input,
  #contact select,
  #contact textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}

/* Hero: quiet city at dusk */
.hero{
  position:relative;min-height:68vh;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(900px 320px at 80% 0%, rgba(184,168,214,.14), transparent 55%),
    radial-gradient(700px 260px at 0% 10%, rgba(121,185,178,.14), transparent 50%),
    linear-gradient(180deg,#FBF7EE,var(--bg));
}
.hero::before{
  /* film grain */
  content:"";position:absolute;inset:0;
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/57/Noise_Texture.png');
  background-size:600px 600px;opacity:.06;mix-blend-mode:multiply;pointer-events:none;
}
.hero::after{
  /* subtle vignette */
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 160px rgba(0,0,0,.15);pointer-events:none;
}
.hero-inner{text-align:center;padding:48px 0;position:relative;z-index:1}
.tag{font-size:11px;letter-spacing:.36em;opacity:.7;margin-bottom:8px}
.title-script{font-family:"Great Vibes","Zen Antique Soft",serif;font-weight:400}
.subtitle{opacity:.85;margin-top:8px}

/* Store selector (minimal tubes, no flashy neon) */
.store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
@media(max-width:860px){.store-grid{grid-template-columns:1fr}}
.tube{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:18px 18px;
  background:#fff8; backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tube:hover{ transform:translateY(-2px); border-color:#d8cfbf; box-shadow:0 12px 36px rgba(0,0,0,.1)}
.tube .label{ font-family:"Zen Antique Soft",serif; letter-spacing:.18em; }
.tube small{ display:block; opacity:.7; margin-top:6px; font-size:12px; }
.tube.red   .label{ color:var(--accent-rust); }
.tube.teal  .label{ color:var(--accent-teal); }
.tube.lilac .label{ color:var(--accent-lilac); }

/* Cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  padding:26px;
}

/* Gallery: fade + film look */
.gallery{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#d8d2c6}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.92) contrast(1.02) saturate(.9) hue-rotate(-6deg)}
.gallery::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 50% 10%, transparent, rgba(0,0,0,.25))}
.gallery-controls{display:flex;justify-content:center;gap:10px;margin-top:10px}
.dot{width:10px;height:10px;border-radius:50%;background:#cfc6b6;border:none;cursor:pointer}
.dot.active{outline:2px solid var(--ink);background:#a89e8f}

/* Two-column */
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

/* Map */
.map-embed{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.map-embed iframe{width:100%;height:100%;border:0}

/* News (shared: store pages) */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
}

.news-list li{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.news-list li:last-child{border-bottom:none;}

.news-list time{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgba(0, 31, 77, 0.9);
  margin-right: 10px;
  letter-spacing: 0.02em;
}

/* Tables (shared: store pages) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.85);
  margin:12px 0 18px;
}

.price-table,
.info-table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  font-size:.98rem;
  line-height:1.6;
}

.price-table th,
.price-table td,
.info-table th,
.info-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  vertical-align:top;
}

.price-table thead th,
.info-table thead th{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.95);
  color:rgba(0,31,77,.9);
  font-family:"Zen Antique Soft","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.06em;
  font-weight:600;
  text-align:left;
}

.price-table tbody tr:nth-child(even),
.info-table tbody tr:nth-child(even){
  background:rgba(0,0,0,.02);
}

.price-table th[scope="row"],
.info-table th[scope="row"]{
  white-space:nowrap;
  color:rgba(0,31,77,.85);
  font-weight:600;
}

.note{
  color:rgba(0,0,0,.62);
  font-size:.95rem;
  margin:10px 0;
}

.inline-list{
  margin:0;
  padding-left:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 18px;
}

.inline-list li{margin:0;}

@media (max-width:480px){
  .price-table,
  .info-table{
    font-size:.89rem;
  }

  .inline-list{grid-template-columns:1fr;}
}

/* Buttons */
.button{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);font-weight:600}
.button:hover{transform:translateY(-1px)}
.button.ghost{background:transparent}
.button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Retro button (used for About us call-to-action) */
.button.retro{
  font-family:"Zen Antique Soft","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em;
  border-radius:14px;
  padding:12px 18px;
  border:1px solid rgba(0,0,0,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  color:rgba(0,0,0,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.10),
    0 10px 24px rgba(0,0,0,.14);
  position:relative;
}

.button.retro::after{
  /* tiny gloss + film feel */
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:50%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

.button.retro:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.10),
    0 14px 34px rgba(0,0,0,.18);
}

.button.retro:active{
  transform:translateY(0px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 2px 10px rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.12);
}

.button.retro:focus-visible{
  outline:3px solid rgba(121,185,178,.55);
  outline-offset:3px;
}

/* Footer */
.site-footer{background:#111;color:#e9e9e9;padding:52px 0 70px;margin-top:56px}
.site-footer a{color:#d7d7d7;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Footer credits (align name starts) */
.footer-credits{
  margin-top:10px;
  line-height:1.8;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:2px;
}

.footer-credits .label{
  opacity:.9;
  white-space:nowrap;
}

.footer-credits .name{
  white-space:nowrap;
}