/* ========== Zerosta Salon Relax – Reset & Theme ========== */
:root{
  --ink:#0b3b36;            /* 文字の濃い緑がかった黒 */
  --muted:#4b6b68;          /* 説明文 */
  --bg:#ffffff;             /* 背景 */
  --accent:#1f8b79;         /* ブランドの緑 */
  --accent-2:#e6f3f1;       /* 薄い緑(淡背景) */
  --pill:#ffffffbf;         /* 半透明白(テキスト背面用) */
  --radius:28px;
  --shadow:0 10px 28px rgba(16,24,40,.06);
}

*{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", Meiryo, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75;
}

/* util */
.container{width:min(1100px,92vw); margin:0 auto; padding-inline:20px}
.center{text-align:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.95rem 1.4rem; border-radius:999px; font-weight:700;
  border:1px solid transparent; text-decoration:none; transition:.2s ease;
}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.outline{background:#fff; color:var(--accent); border-color:var(--accent)}
.btn.outline:hover{background:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--accent); border-color:transparent}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px; top:12px; background:#fff; padding:.6rem 1rem; border-radius:.6rem; z-index:10000}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px;
}
.brand{font-weight:800; font-size:1.375rem; letter-spacing:.02em; color:var(--ink); text-decoration:none}

/* PCナビ */
.nav{display:flex; align-items:center; gap:24px; flex-wrap:nowrap}
.nav a{color:var(--ink); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--accent)}
.nav .btn.btn-sm{padding:.6rem 1rem}

/* モバイルナビ（HTML編集なし版：横スクロール） */
@media (max-width: 820px){
  .nav{
    overflow:auto hidden; scrollbar-width:none; -ms-overflow-style:none;
    gap:16px; padding-block:6px; max-width:75%;
  }
  .nav::-webkit-scrollbar{display:none}
  .brand{font-size:1.25rem; line-height:1.2}
}

/* ========== Hero ========== */
.hero{
  position:relative; isolation:isolate;
  min-height:56svh; display:grid; place-items:center; overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;     /* ← 画像のセンター固定 */
  filter:none;                                   /* 緑や暗さのフィルタは一切ナシ */
  transform:translateZ(0);
}
/* 画面端の読みにくさだけ薄く補正（明るさは保つ） */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255,255,255,.06)),
    radial-gradient(80% 60% at 50% 10%, rgba(255,255,255,.08), transparent 70%);
  z-index:0;
}

/* テキストだけを浮かせる「軽いグラス」 */
.hero-content{
  position:relative; z-index:1;
  display:grid; gap:18px; place-items:center; text-align:center;
  padding:28px clamp(20px, 3.4vw, 40px);
  border-radius:var(--radius);
  background:var(--pill);                          /* 半透明白 */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);       /* 文字の直下だけ薄くぼかす */
  border:1px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  max-width:min(100%, 980px);
}
.hero .eyebrow{display:none}                      /* 「Hair Removal Clinic」徽章は非表示 */
.hero h1{
  margin:0; font-weight:800; letter-spacing:.01em;
  font-size:clamp(1.8rem, 3.6vw + .6rem, 3.6rem);
  color:var(--ink);
  text-shadow: 0 2px 15px rgba(255,255,255,.55);  /* 文字の縁をやんわり持ち上げる */
}
.hero .sub{
  margin:0; color:var(--muted);
  font-size:clamp(.95rem, .5vw + .9rem, 1.15rem);
}
.hero .cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}

/* ========== Sections / Cards ========== */
.section{padding:72px 0}
.section.alt{background:var(--accent-2)}
.section-title{
  font-size:clamp(1.5rem, 1.1rem + .9vw, 2.1rem);
  margin:0 0 20px; text-align:center; font-weight:800; letter-spacing:.02em; color:var(--ink);
}

/* グリッド */
.grid{display:grid; gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06); display:flex; flex-direction:column
}
.card-img{width:100%; height:220px; object-fit:cover; object-position:center} /* ← センター固定 */
.card-img.portrait{height:320px; object-fit:cover}
.card-body{padding:16px 18px}
.card-body h3{margin:0 0 6px; font-size:1.1rem}
.price{font-weight:800; color:var(--accent); margin:.3rem 0 0}

/* News list */
.news-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.news-item{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:14px; overflow:hidden}
.news-item img{width:100%; height:100%; object-fit:cover}
.news-meta{display:flex; flex-direction:column; gap:6px}
.news-title{text-decoration:none; color:var(--ink); font-weight:700}
.news-title:hover{color:var(--accent)}

/* Gallery */
.gallery-img{width:100%; height:220px; object-fit:cover; object-position:center; border-radius:14px; box-shadow:var(--shadow); background:#fff}

/* Access */
.access-grid{align-items:stretch}
.access-card .card-img{height:240px}
.address,.hours{margin:.25rem 0 .4rem; color:var(--muted)}

/* Reservation */
.reservation .sub{color:var(--muted)}
.note{color:#6b7c7a; font-size:.95rem; margin-top:12px}

/* Footer */
.site-footer{padding:26px 0; border-top:1px solid rgba(15,23,42,.06)}
.foot-inner{display:flex; align-items:center; justify-content:space-between}

/* ========== Responsive ========== */
@media (max-width: 1024px){
  .g-4{grid-template-columns:repeat(3,1fr)}
  .card-img{height:200px}
}
@media (max-width: 820px){
  /* モバイル：各カード/画像は1列で大きく見せる */
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .card-img,.gallery-img{height: clamp(200px, 42vw, 340px)}
  .hero{min-height:64svh}
  .hero-content{
    padding:22px 18px; background:#ffffffcc;    /* モバイルは少しだけ濃いめで視認性UP */
    -webkit-backdrop-filter: blur(7px) saturate(125%);
            backdrop-filter: blur(7px) saturate(125%);
  }
  .hero .cta{gap:12px}
  .site-footer .foot-inner{flex-direction:column; gap:12px}
}
/* ===== Hero透明背景修正 ===== */
.hero-content {
  background: none; /* 白カードをなくす */
  color: #0f172a;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4); /* 背景ぼかさずテキスト強調 */
  padding: clamp(40px, 8vw, 80px) 20px;
}

.hero-content h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ===== ハンバーガーメニュー ===== */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 64px; left: 0; right: 0;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .nav.active { display: flex; }

  .hamburger {
    display: block;
  }

  .site-header .header-inner {
    justify-content: space-between;
    align-items: center;
  }
}
/* ==============================
   Hero 修正（背景ボケ削除）
   ============================== */
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}

.hero-img {
  width: 100%;
  height: min(72vh, 680px);
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: transparent !important;  /* 背景完全削除 */
  backdrop-filter: none !important;     /* ボケ削除 */
  box-shadow: none !important;
  border: 0 !important;
}

.hero-content h1,
.hero-content .sub {
  color: #0f172a;
  text-shadow:
    0 2px 6px rgba(255,255,255,.9),
    0 1px 0 rgba(0,0,0,.2);
}

/* ==============================
   ハンバーガーメニュー
   ============================== */
.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
}

@media (max-width: 960px) {
  .hamburger { display: block; }

  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(80vw, 320px);
    background: #fff;
    box-shadow: -8px 0 20px rgba(0,0,0,.15);
    padding: 80px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1000;
  }
  .nav.is-open {
    transform: translateX(0);
  }

  body.menu-open {
    overflow: hidden;
  }

  .nav a {
    font-size: 18px;
    line-height: 1.6;
  }
}
/* ======= overrides for RELAX (image-only hero + mobile header) ======= */

/* ベース安全策：横スクロール抑止 */
html, body { overflow-x: hidden; }

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}
.brand { font-weight: 700; color: #0e4a43; }

/* ナビ（PC） */
.nav { display: flex; align-items: center; gap: 20px; }

/* ハンバーガー（SPのみ表示） */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 8px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.nav-toggle span{
  display:block; width:22px; height:2px; margin:5px auto;
  background:#0e4a43; border-radius:2px; transition:.25s;
}

/* HERO：画像のみ、中央配置＆カバー */
.hero { position: relative; width: 100%; height: min(80vh, 760px); }
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* 既存の .hero-content があっても非表示にする保険 */
.hero .hero-content{ display:none !important; }

/* セクション見出しの周辺は既存のまま前提 */

/* ====== Responsive ====== */
@media (max-width: 960px){
  /* ハンバーガー表示・ナビは引っ込める */
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .nav{
    position: fixed;
    inset: 64px 0 auto auto; /* ヘッダーの下から */
    right: 16px;
    width: min(88vw, 320px);
    max-height: calc(100dvh - 80px);
    padding: 16px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0,0,0,.16);
    display: grid;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  /* 開いた状態 */
  .nav.is-open{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* HERO 高さ少し下げる */
  .hero{ height: 58vh; min-height: 320px; }

  /* グリッドは縦１列に（読みやすさ優先） */
  .grid.g-3, .grid.g-4, .grid.g-2{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 予約セクションのボタン改行 */
  .reservation .cta{
    display: grid; gap: 12px; justify-content: center;
  }
}

/* ほんのりフォーカスリング */
a, button { outline-color: #58a99a; }