:root{
  --bg:#ffffff;
  --text:#0b0f16;
  --muted:#5b6472;
  --line:#e6e8ee;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(10,15,22,.08);
  --radius: 18px;
  --max: 1120px;
  --accent:#0b0f16;
  --accent2:#2563eb;
  --chip:#f3f4f6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--text)}
.navlinks{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.navlinks a{padding:8px 10px;border-radius:999px;color:var(--muted);font-weight:600}
.navlinks a:hover{background:var(--chip);color:var(--text)}
.actions{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);box-shadow:none;font-weight:700;
}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.blue{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.btn.ghost{background:transparent}
.btn:active{transform:translateY(1px)}
.mobileToggle{display:none}
.hero{padding:64px 0 18px;}
.heroGrid{display:grid;grid-template-columns: 1.2fr .8fr;gap:24px;align-items:start}
.kicker{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-weight:700}
.kicker span{background:var(--chip);padding:6px 10px;border-radius:999px}
h1{font-size:clamp(30px, 4vw, 54px);line-height:1.07;margin:12px 0 10px}
.lead{color:var(--muted);font-size:clamp(15px, 1.4vw, 18px);line-height:1.7;margin:0 0 18px}
.heroCard{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--card)}
.heroMedia{position:relative;aspect-ratio: 4/3;background:linear-gradient(135deg, #f3f4f6, #fff);}
.heroMedia img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02);}
.heroCardBody{padding:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pill{background:var(--chip);padding:8px 10px;border-radius:999px;color:var(--muted);font-weight:700;font-size:13px}
.section{padding:34px 0}
.sectionHeader{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.sectionHeader h2{margin:0;font-size:26px}
.sectionHeader p{margin:0;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.7}
.split{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
.embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%;}
.embed.video{aspect-ratio:16/9}
.embed.map{min-height:360px}
.menuWrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.menuTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-bottom:1px solid var(--line)}
.menuTop .hint{color:var(--muted);font-weight:700;font-size:13px}
.menuScroll{overflow:auto}
.menuScroll table{width:100%;border-collapse:collapse;min-width:720px}
.menuScroll th, .menuScroll td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.menuScroll thead th{background:#fafafa;font-weight:800}
.menuScroll small{color:var(--muted);font-weight:700}
.notice{border:1px dashed #d1d5db;border-radius:14px;padding:12px 14px;background:#fafafa;color:var(--muted);line-height:1.8}
.notice strong{color:var(--text)}
.calWrap{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:14px}
.calHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.calHead h3{margin:0;font-size:16px}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dow{font-size:12px;color:var(--muted);font-weight:800;text-align:center;padding:6px 0}
.day{border:1px solid var(--line);border-radius:12px;padding:10px 0;text-align:center;font-weight:800;background:#fff;min-height:40px}
.day.muted{opacity:.35}
.day.closed{background:#0b0f16;color:#fff;border-color:#0b0f16}
.day.today{outline:2px solid #2563eb}
.footer{padding:30px 0 44px;border-top:1px solid var(--line);color:var(--muted)}
.footerGrid{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.badgeRow{display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#fff;color:var(--muted);font-weight:700;font-size:12px}
@media (max-width: 920px){
  .heroGrid{grid-template-columns: 1fr; }
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .navlinks{display:none}
  .mobileToggle{display:inline-flex}
}


/* ===== Full Width Hero ===== */
.heroFull {
  width:100%;
  height: clamp(460px, 70vh, 820px);
  position:relative;
  overflow:hidden;
}
.heroFull img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.heroOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.58));
  display:flex;
  align-items:flex-end;
}
.heroOverlayContent{
  max-width:1120px;
  margin:0 auto;
  padding:60px 20px;
  color:#fff;
}
.heroOverlayContent h1{
  margin:0 0 12px;
  font-size:clamp(34px,5vw,64px);
  font-weight:900;
  letter-spacing:.01em;
}
.heroOverlayContent p{
  margin:0 0 18px;
  font-size:clamp(14px,1.4vw,18px);
  opacity:.95;
  line-height:1.7;
}
.heroOverlayContent .btn.primary{
  background:#fff;
  color:#000;
  border-color:#fff;
}



/* ===== Embed iframe sizing fix (Gallery / Map) ===== */
.embed{position:relative;}
.embed iframe{position:absolute; inset:0; width:100%; height:100%;}
/* Ensure reasonable heights */
.embed.video{aspect-ratio:16/9;}
.embed.map{height:420px; min-height:420px;}
.embed.gallery{height:780px; min-height:780px;}
@media (max-width: 920px){
  .embed.map{height:360px; min-height:360px;}
  .embed.gallery{height:640px; min-height:640px;}
}



/* ===== Hero Slider (crossfade) ===== */
.heroFull .heroSlideLayer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
  transition: opacity 1200ms ease;
  will-change: opacity;
}
.heroFull .heroSlideLayer.isTop{opacity:1}
.heroFull .heroSlideLayer.isBottom{opacity:0}



/* ===== Full Width Sections (Gallery / Map) ===== */
.section.fullwidth{
  padding-left:0;
  padding-right:0;
}
.section.fullwidth .container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
.section.fullwidth .embed,
.section.fullwidth .portfolioWrap{
  border-radius:0;
}



/* ===== Video overlay on hero ===== */
.heroFull{
  position:relative;
}

.heroOverlayVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
}


.heroOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;   /* ← 下に配置 */
  z-index:2;
}


.page-visit .heroOverlayVideo{
  opacity:.25;
}

.page-salon .heroOverlayVideo{
  opacity:.35;
}