/* =========================================================
   Respa One-page (Dreamweaver friendly)

   Theme v7: Deep Sea × Corporate Light
   - Deep-sea video stays in Hero
   - Main sections are light so BLACK text is readable
   - Uses crisp borders + generous whitespace (corporate feel)

   Files:
   - /images/deepsea.mp4
   - /images/poster.jpg
   - /images/headspa.jpg etc.
   ========================================================= */

:root{
  /* ===== Color System ===== */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface2:#f1f5f8;
  --ink: #0f172a;
  --muted:#475569;
  --subtle:#64748b;
  --line: #e2e8f0;

  /* Accent (deep-sea teal) */
  --accent:#0ea5a0;
  --accent2:#2dd4bf;
  --navy:#061a2b;

  /* ===== Layout ===== */
  --wrap:1120px;
  --radius:18px;
  --radius-lg:24px;
  --shadow: 0 18px 40px rgba(15,23,42,.08);
  --shadow-strong: 0 24px 60px rgba(2,6,23,.28);

  /* ===== Typography ===== */
  --fs-base:18px;
  --fs-sub:17px;
  --fs-small:12px;
  --fs-hero:clamp(52px, 5.0vw, 74px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.theme-dark{
  --bg: #021412; /* 深海グリーン（青寄り） */
  --surface: rgba(6, 18, 31, .72);
  --surface2: rgba(6, 18, 31, .52);
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --subtle: rgba(255,255,255,.60);
  --line: rgba(255,255,255,.12);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --shadow-strong: 0 24px 60px rgba(0,0,0,.55);
    background: radial-gradient(1100px 760px at 15% 0%, rgba(20,184,166,.18), transparent 62%),
    radial-gradient(900px 680px at 85% 10%, rgba(16,185,129,.14), transparent 58%),
    radial-gradient(1000px 760px at 40% 110%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg, #021412 0%, #031816 45%, #052923 100%);
    color: var(--ink);
    font-family: inherit;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin:0 auto; }
.narrow{ width:min(900px, calc(100% - 48px)); margin:0 auto; }
.center{ text-align:center; }

/* =========================
   Header / Nav
   ========================= */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background: rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header__inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{ display:flex; flex-direction:column; gap:4px; }
.brand__name{
  font-weight:500;
  letter-spacing:.12em;
  font-size:15px;
}
.brand__tag{
  letter-spacing:.16em;
  font-size:11px;
  color: rgba(15,23,42,.55);
  text-transform:uppercase;
}

.nav{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  font-size:12px;
  letter-spacing:.10em;
  color: rgba(15,23,42,.62);
  padding:10px 6px;
  border-radius:10px;
}
.nav a:hover{ color:var(--ink); background: rgba(15,23,42,.05); }

/* Mobile menu button */
.navToggle{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  display:none; /* PCでは非表示 */
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(15,23,42,.75);
}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:72px;
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* fallback background */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 30% 15%, rgba(14,165,160,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,26,43,.70), rgba(6,26,43,.94));
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  opacity:.62;
  filter: saturate(.95) contrast(1.02) brightness(.90);
}

/* dark veil for readability (we rely on white panel for black text) */
.hero__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(14,165,160,.16), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.88));
}

/* subtle shimmer near surface */
.hero__shimmer{
  position:absolute;
  left:-10%;
  right:-10%;
  top:-14%;
  height:46%;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 50% 82%, rgba(45,212,191,.18), transparent 62%),
    radial-gradient(720px 220px at 42% 70%, rgba(255,255,255,.10), transparent 65%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: shimmerPulse 18s ease-in-out infinite;
}
@keyframes shimmerPulse{
  0%, 34% { opacity:0; transform: translateY(0px) scale(1); }
  39%     { opacity:.55; transform: translateY(6px) scale(1.02); }
  46%     { opacity:.32; transform: translateY(10px) scale(1.03); }
  52%     { opacity:0; transform: translateY(0px) scale(1); }
  100%    { opacity:0; }
}

/* fine grain */
.hero__grain{
  position:absolute;
  inset:-20%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: grainMove 8s steps(2) infinite;
}
@keyframes grainMove{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-6%, 4%); }
}

.hero__content{ position:relative; padding:96px 0 64px; }

/* 2-column hero */
.hero__grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items:center;
}

/* White panel for corporate readability */
.hero__copy{
  min-width:0;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(10px);
}

.eyebrow{
  margin:0 0 14px;
  font-size:13px;
  letter-spacing:.14em;
  color: rgba(15,23,42,.66);
}

.hero__title{ margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.hero__brand{
  font-weight:400;
  font-size:var(--fs-hero);
  letter-spacing:.14em;
  line-height:1.05;
}
.hero__sub{
  font-size:12px;
  letter-spacing:.22em;
  color: rgba(15,23,42,.60);
  text-transform:uppercase;
}

.hero__lead{
  margin:0 0 22px;
  line-height:1.95;
  font-size:var(--fs-sub);
  color: rgba(15,23,42,.78);
  max-width:56ch;
}

.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 14px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius: 999px;
  font-size:13px;
  letter-spacing:.06em;
  border:1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--accent);
  color:#ffffff;
  border-color: rgba(255,255,255,.0);
}
.btn--primary:hover{ background: #0b948f; }

.btn--ghost{
  background: rgba(255,255,255,.0);
  border-color: rgba(15,23,42,.18);
  color: rgba(15,23,42,.86);
}
.btn--ghost:hover{ background: rgba(15,23,42,.05); }

.badges{ display:flex; gap:10px; flex-wrap:wrap; }
.badges span{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  color: rgba(15,23,42,.78);
  background: rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.08em;
}

.hero__visual{ display:flex; justify-content:flex-end; }

.heroCard{
  position:relative;
  width:min(460px, 42vw);
  margin:0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-strong);
}

/* Blend the photo into the deep-sea background */
.heroCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(90deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.55) 38%, rgba(2,6,23,0) 74%);
  pointer-events:none;
}
.heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(520px 360px at 22% 20%, rgba(14,165,160,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.00), rgba(2,6,23,.30));
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}

.heroCard__img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  object-position: 72% 55%;
  filter: saturate(.95) contrast(1.03) brightness(.90);
  opacity:.92;

  /* fade into background (left side) */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
}
.heroCard__cap{
  position:absolute;
  z-index:3;
  left:16px;
  bottom:14px;
  font-size:11px;
  letter-spacing:.24em;
  color: rgba(255,255,255,.86);
  text-transform:uppercase;
}
/* 3 pillars in hero */
.pillars{
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  gap:12px;
  margin-top:28px; /* gap fix */
}
.pillar{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-strong);
  overflow:hidden;
}
.pillar:hover{ transform: translateY(-1px); }
.pillar__media{
  display:block;
  width:100%;
  height:92px;
  border-radius: 18px;
  margin: 0 0 14px;
  background-size: cover;
  background-position: center;
  position:relative;
  overflow:hidden;
  filter: saturate(.90) contrast(1.04) brightness(.92);
  border:1px solid rgba(15,23,42,.08);
}
.pillar__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(320px 220px at 20% 10%, rgba(52,183,167,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(15,23,42,.18));
  pointer-events:none;
}

.pillar--headspa .pillar__media{
    background-image: url("../images/pillar_headspa.jpg");
}
.pillar--rental  .pillar__media{
    background-image: url("../images/pillar_rental.jpg");
}
.pillar--school  .pillar__media{ background-image:url("../images/pillar_school.jpg"); }

.pillar__kicker{
  position:relative;
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  color: rgba(15,23,42,.55);
  text-transform:uppercase;
  margin-bottom:8px;
}
.pillar__title{
  position:relative;
  display:block;
  font-weight:600;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.pillar__text{
  position:relative;
  display:block;
  font-size:13px;
  color: rgba(15,23,42,.72);
}
.pillar__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  align-self:flex-start;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.78);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  width:max-content;
}
.pillar:hover .pillar__cta{
  background: rgba(14,165,160,.12);
  border-color: rgba(14,165,160,.38);
}


/* scroll indicator */
.scroll{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.15);
}
.scroll__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.86);
  animation: dot 1.6s ease-in-out infinite;
}
@keyframes dot{
  0%,100%{ transform: translateY(-4px); opacity:.7; }
  50%{ transform: translateY(5px); opacity:1; }
}

/* =========================
   Sections (light & corporate)
   ========================= */
.section{ padding:84px 0; }

/* Light backgrounds (black text readable) */
.section--dark{
  background:
    radial-gradient(820px 360px at 12% 0%, rgba(14,165,160,.10), transparent 60%),
    linear-gradient(180deg, var(--surface2), var(--bg));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--panel{
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* CTA section keeps deep sea accent, but content stays light */
.section--cta{
  background:
    radial-gradient(860px 420px at 20% 20%, rgba(14,165,160,.18), transparent 65%),
    linear-gradient(180deg, #ffffff, #f2fbfa);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.h2{
  margin:0 0 14px;
  font-size:28px;
  letter-spacing:.04em;
}
.h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.04em;
}
.sub{
  margin:0 0 22px;
  color: var(--muted);
  font-size: var(--fs-sub);
}
.body{ color: var(--muted); }
.fine{ color: rgba(15,23,42,.55); font-size: 12px; }

/* =========================
   Concept (text + right photo)
   ========================= */
.conceptGrid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items:start;
}
.conceptText{ min-width:0; }
.poem p{ margin:0 0 14px; color: rgba(15,23,42,.82); }
.divider{ height:1px; background: var(--line); margin:22px 0; }

.mediaCard{
  position:relative;
  margin:0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.mediaCard__img{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.98) contrast(1.02);
}
.mediaCard__cap{
  position:absolute;
  left:16px;
  bottom:14px;
  font-size:11px;
  letter-spacing:.24em;
  color: rgba(255,255,255,.92);
  text-transform:uppercase;
  text-shadow: 0 6px 20px rgba(2,6,23,.45);
}

/* =========================
   Head Spa section
   ========================= */
.sectionHero{
  margin: 18px 0 18px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.sectionHero__img{
  width:100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 50%;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:16px;
}
.card{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding:18px 18px 16px;
  box-shadow: var(--shadow);
}
.card p{ margin:0; color: rgba(15,23,42,.72); font-size:14px; line-height:1.85; }

.flow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.flow__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.78);
  font-size:13px;
}
.flow__item span{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background: rgba(14,165,160,.12);
  color: rgba(14,165,160,.98);
  font-weight:700;
  font-size:12px;
}

/* =========================
   Price
   ========================= */
.pricegrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.pricecard{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding:18px;
  box-shadow: var(--shadow);
}
.pricedl{ margin:10px 0 10px; }
.pricedl > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(15,23,42,.10);
}
.pricedl dt{ color: rgba(15,23,42,.78); }
.pricedl dd{ margin:0; font-weight:700; color: rgba(15,23,42,.90); }
.note{ margin:10px 0 0; font-size:12px; color: rgba(15,23,42,.55); }

/* =========================
   Rental / School panels
   ========================= */
.twocol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:auto;
  align-self:flex-start;
}
.panel{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding:18px;
  box-shadow: var(--shadow);
}
.list{ margin:0; padding-left:18px; }
.list li{ color: rgba(15,23,42,.76); margin: 6px 0; }

.ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* =========================
   Reserve CTA
   ========================= */
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px; }

/* =========================
   Company / Access
   ========================= */
.access{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
  margin-top:16px;
}
.access__info,
.access__map{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding:18px;
  box-shadow: var(--shadow);
}
.access__name{ margin:0 0 6px; font-weight:700; letter-spacing:.04em; }
.access__meta{ margin:0 0 12px; color: rgba(15,23,42,.62); }

.dl{ margin:0; }
.dl > div{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.dl dt{ color: rgba(15,23,42,.62); }
.dl dd{ margin:0; color: rgba(15,23,42,.82); }

.links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;
  align-self:flex-start; }
.linkbtn{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.86);
  font-size:13px;
}
.linkbtn:hover{ background: rgba(15,23,42,.06); }

.mapdummy{
  height: 320px;
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,.18);
  display:grid;
  place-items:center;
  color: rgba(15,23,42,.45);
  background:
    radial-gradient(680px 240px at 30% 20%, rgba(14,165,160,.10), transparent 60%),
    #fbfdff;
}

/* =========================
   Footer
   ========================= */
.footer{
  padding:26px 0;
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.70);
}
.footer__inner{ display:flex; align-items:center; justify-content:center; }
.footer small{ color: rgba(15,23,42,.55); font-size: 12px; letter-spacing:.10em; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ justify-content:flex-start; }
  .heroCard{ width: min(520px, 100%); }
  .pillars{ grid-template-columns: 1fr; }
  .conceptGrid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .pricegrid{ grid-template-columns: 1fr; }
  .twocol{ grid-template-columns: 1fr; }
  .access{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .navToggle{ display:flex; }
  .nav{
    position: fixed;
    inset: 72px 12px auto 12px;
    padding: 12px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    align-items: stretch;
  }
  .nav a{ padding:12px 10px; }

  body.is-nav-open .nav{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__shimmer, .hero__grain, .scroll__dot{ animation:none; }
}


/* =========================================================
   v8 additions: Campaign + Banner Trio (Simpleidea-like)
   ========================================================= */

.section--paper{
  background: linear-gradient(70deg, rgba(250,252,253,1), rgba(242,246,248,1));
  color: rgba(15,23,42,.92);
}

.section--tight{ padding: 36px 0; }

.sectionHead{ margin: 0 0 20px; }
.sectionHead--center{ text-align:center; }
.muted{ color: rgba(15,23,42,.62); }

.sectionActions{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* Button: calm corporate */
.btn--dark{
  background: rgba(15,23,42,.86);
  color:#fff;
  border-color: rgba(15,23,42,.86);
}
.btn--dark:hover{ transform: translateY(-1px); }

/* Campaign cards */
.campaignGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 18px;
}
.campaignCard{
  display:block;
  text-decoration:none;
  color: inherit;
}
.campaignCard__img{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}
.campaignCard__body{
  padding: 12px 2px 0;
}
.campaignCard__date{
    display: block;
    font-size: 12px;
    letter-spacing: .02em;
    color: rgba(232,232,232,0.55);
}
.campaignCard__title{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15,23,42,.86);
}
.campaignCard:hover .campaignCard__img{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* Banner trio */
.ctaBanners{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ctaBanner{
  position:relative;
  display:block;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  text-decoration:none;
  color:#fff;
}
.ctaBanner__img{
  width:100%;
  height:auto;
  aspect-ratio: 3.2 / 1;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02) brightness(.95);
  transform: scale(1.01);
}
.ctaBanner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,10,18,.46), rgba(0,10,18,.12));
}
.ctaBanner__label{
  position:absolute;
  left: 18px;
  bottom: 16px;
  z-index:2;
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.ctaBanner:hover{ transform: translateY(-2px); transition: transform .18s ease; }

/* Responsive */
@media (max-width: 1020px){
  .campaignGrid{ grid-template-columns: repeat(2, 1fr); }
  .ctaBanners{ grid-template-columns: 1fr; }
  .ctaBanner__img{ aspect-ratio: 16 / 5; }
}
@media (max-width: 560px){
  .campaignGrid{ grid-template-columns: 1fr; }
  .ctaBanner__label{ font-size: 18px; }
}


/* =========================================================
   Theme override: Deep Sea Dark (white text on blue)
   ※ v12(コーポレートライト)の構造はそのまま、配色だけ深海寄りに。
   ========================================================= */
body.theme-dark{
  --bg: #020617;
  --surface: rgba(6, 18, 31, .72);
  --surface2: rgba(6, 18, 31, .52);
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --subtle: rgba(255,255,255,.60);
  --line: rgba(255,255,255,.12);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --shadow-strong: 0 24px 60px rgba(0,0,0,.55);

  background:
    radial-gradient(1100px 760px at 15% 0%, rgba(20,184,166,.18), transparent 62%),
    radial-gradient(900px 680px at 85% 10%, rgba(59,130,246,.14), transparent 58%),
    radial-gradient(1000px 760px at 40% 110%, rgba(2,132,199,.12), transparent 60%),
    #020617;
  color: var(--ink);
}

/* Header / Nav */
body.theme-dark .header{
  background: rgba(2,6,23,.68);
  border-bottom: 1px solid var(--line);
}
body.theme-dark .brand__name{ color: rgba(255,255,255,.92); }
body.theme-dark .brand__tag{ color: rgba(255,255,255,.60); }
body.theme-dark .nav a{
  color: rgba(255,255,255,.72);
}
body.theme-dark .nav a:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
}
body.theme-dark .navToggle{
  background: rgba(2,6,23,.55);
  border-color: var(--line);
}
body.theme-dark .navToggle span{ background: rgba(255,255,255,.86); }

/* Hero copy panel */
body.theme-dark .hero__copy{
  background: rgba(2,6,23,.60);
  border-color: rgba(255,255,255,.14);
}
body.theme-dark .eyebrow{ color: rgba(255,255,255,.70); }
body.theme-dark .hero__title,
body.theme-dark .section__title{ color: rgba(255,255,255,.94); }
body.theme-dark .hero__sub,
body.theme-dark .hero__lead,
body.theme-dark .section__sub{ color: rgba(255,255,255,.74); }

/* Buttons / chips */
body.theme-dark .btn--ghost{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  background: transparent;
}
body.theme-dark .btn--ghost:hover{
  background: rgba(255,255,255,.08);
}
body.theme-dark .badge{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}

/* Sections */
body.theme-dark .section{ background: rgba(2,6,23,.40); }
body.theme-dark .section--panel{ background: rgba(2,6,23,.42); }
body.theme-dark .section--dark{
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(20,184,166,.14), transparent 65%),
    rgba(2,6,23,.48);
}
body.theme-dark .section--cta{
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(59,130,246,.14), transparent 65%),
    rgba(2,6,23,.52);
}
body.theme-dark .section__kicker{ color: rgba(20,184,166,.90); }
body.theme-dark .divider{ border-color: rgba(255,255,255,.12); }

/* Concept / Quote */
body.theme-dark .poem{ color: rgba(255,255,255,.80); }
body.theme-dark .quote{ color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.12); }
body.theme-dark .note{ color: rgba(255,255,255,.60); }

/* Media cards & generic cards */
body.theme-dark .mediaCard,
body.theme-dark .card,
body.theme-dark .priceCard,
body.theme-dark .flow__item,
body.theme-dark .faq,
body.theme-dark .twocol__box{
    background: rgba(2,6,23,.55) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #FFFFFF;
}
body.theme-dark .card h3,
body.theme-dark .priceCard h3,
body.theme-dark .faq summary{
  color: rgba(255,255,255,.92) !important;
}
body.theme-dark .card p,
body.theme-dark .priceCard p,
body.theme-dark .flow__item p,
body.theme-dark .faq p,
body.theme-dark .twocol__box p{
  color: rgba(255,255,255,.72) !important;
}
body.theme-dark .flow__item span{
  background: rgba(20,184,166,.18) !important;
  color: rgba(210,255,249,.96) !important;
}

/* Lists / tables */
body.theme-dark .dl dt{ color: rgba(255,255,255,.78) !important; }
body.theme-dark .dl dd{ color: rgba(255,255,255,.72) !important; border-color: rgba(255,255,255,.12) !important; }
body.theme-dark .table{
  background: rgba(2,6,23,.55) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.theme-dark .table th,
body.theme-dark .table td{
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.72) !important;
}
body.theme-dark .table th{ color: rgba(255,255,255,.80) !important; }

/* Pillars CTA button */
body.theme-dark .pillar{
  background: rgba(2,6,23,.55) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.theme-dark .pillar__kicker{ color: rgba(20,184,166,.90) !important; }
body.theme-dark .pillar__title{ color: rgba(255,255,255,.92) !important; }
body.theme-dark .pillar__text{ color: rgba(255,255,255,.70) !important; }
body.theme-dark .pillar__cta{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.84) !important;
}
body.theme-dark .pillar:hover .pillar__cta{
  background: rgba(20,184,166,.16) !important;
  border-color: rgba(20,184,166,.45) !important;
}

/* Footer */
body.theme-dark .footer{
  background: rgba(2,6,23,.72) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
body.theme-dark .footer small{ color: rgba(255,255,255,.60) !important; }



/* =========================================================
   Patch: Force readable white text (remove leftover dark ink)
   ========================================================= */
body.theme-dark{
  color: var(--ink);
}

/* Force common text elements to inherit the theme ink */
body.theme-dark :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,span,strong,em,b,i,figcaption,label,legend,caption){
  color: inherit;
}

/* Links */
body.theme-dark a{
  color: rgba(255,255,255,.82);
}
body.theme-dark a:hover{
    color: rgba(255,255,255,.96);
    font-weight: bold;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* Buttons + form */
body.theme-dark button,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select{
  color: rgba(255,255,255,.86);
}

/* Any element explicitly set to dark navy in base theme */
body.theme-dark :where(.ink, .text, .text-dark, .title, .heading){
  color: rgba(255,255,255,.92) !important;
}

/* Safety net: if any component forces a dark color, override within key areas */
body.theme-dark .main,
body.theme-dark .hero,
body.theme-dark .section,
body.theme-dark .card,
body.theme-dark .mediaCard,
body.theme-dark .pillar,
body.theme-dark .campaign,
body.theme-dark .bannerGrid,
body.theme-dark .footer{
  color: rgba(255,255,255,.86);
}

/* Fine-tune muted text */
body.theme-dark .muted,
body.theme-dark .subtle,
body.theme-dark .note{
  color: rgba(255,255,255,.66) !important;
}

/* Ensure table and dl inherit */
body.theme-dark table,
body.theme-dark th,
body.theme-dark td{
  color: rgba(255,255,255,.74) !important;
}
/* ===== Deep Green Override ===== */
.section,
.section--panel,
.section--dark,
.section--paper,
.section--cta{
  background: transparent !important;
}
ion,
.section--panel,
.section--dark,
.section--paper,
.section--cta{
  background: transparent !important;
}
/* ===== Deep Sea Transparent Layer ===== */
body{
  background:
    radial-gradient(1000px 600px at 25% 0%, rgba(20,184,166,.12), transparent 65%),
    radial-gradient(800px 500px at 80% 10%, rgba(6,182,212,.10), transparent 65%),
    linear-gradient(180deg,
      rgba(2,18,24,.92) 0%,
      rgba(3,26,29,.90) 50%,
      rgba(4,36,38,.92) 100%
    ) !important;
}
body{
  background:
    radial-gradient(1000px 600px at 25% 0%, rgba(20,184,166,.08), transparent 70%),
    radial-gradient(800px 500px at 80% 10%, rgba(6,182,212,.06), transparent 70%),
    linear-gradient(180deg,
      rgba(2,18,24,.85) 0%,
      rgba(3,26,29,.82) 50%,
      rgba(4,36,38,.88) 100%
    ) !important;
}body::before{
  content:"";
  position:fixed;
  inset:0;
  background: radial-gradient(circle at 50% -20%, rgba(255,255,255,.03), transparent 60%);
  pointer-events:none;
}
/* ===== Header Deep Green ===== */
.header{
  background: rgba(3, 28, 30, .85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.header .brand__name,
.header .brand__tag,
.header .nav a{
  color: rgba(255,255,255,.85) !important;
}

.header .nav a:hover{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}
/* =========================================================
   Headspa A (TOP直下): Salon only + Campaign + Menu mini
   追記するだけでOK（既存を壊さない）
   ========================================================= */

.hsA{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  margin-top:28px;
}

/* 左：サロンカード */
.hsA__salon{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:18px 18px 16px;
  border-radius: var(--radius);
  overflow:hidden;

  background:
    radial-gradient(1200px 420px at 100% 0%, rgba(211, 232, 228, 0.72), transparent 55%),
    linear-gradient(135deg, #f6f4ef 0%, #edf5f2 52%, #e7f1ee 100%);
  border:1px solid rgba(200, 216, 214, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  color:#1e2942;
}

.hsA__salonMedia{
  width:100%;
  height:120px;
  border-radius:18px;
  margin:0 0 14px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  filter: saturate(.92) contrast(1.04) brightness(.92);
  position:relative;
  overflow:hidden;
}
.hsA__salonMedia::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(320px 220px at 20% 10%, rgba(20,184,166,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  pointer-events:none;
}

.hsA__kicker{
  font-size:11px;
  letter-spacing:.22em;
  color: rgba(20,184,166,.92);
  text-transform:uppercase;
  margin-bottom:8px;
}
.hsA__title{
  font-weight:600;
  letter-spacing:.06em;
  margin-bottom:6px;
  color: rgba(255,255,255,.92);
}
.hsA__text{
  font-size:13px;
  color: rgba(255,255,255,.70);
}
.hsA__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  width:max-content;
}
.hsA__salon:hover{ transform: translateY(-1px); }
.hsA__salon:hover .hsA__cta{
    background: rgba(20,184,166,.16);
    border-color: rgba(20,184,166,.45);
    float: right;
}

/* 右：サイド（2段） */
.hsA__side{
  display:grid;
  grid-template-rows: auto auto;
  gap:12px;
}

/* 共通 box */
.hsA__box{
  border-radius: var(--radius);
  background: rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-strong);
  padding:16px 16px 14px;
}

.hsA__boxHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.hsA__boxTitle{
  margin:0;
  font-size:13px;
  letter-spacing:.14em;
  color: rgba(255,255,255,.88);
}
.hsA__sub{
  font-size:11px;
  letter-spacing:.12em;
  color: rgba(255,255,255,.60);
}
.hsA__badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(20,184,166,.45);
  background: rgba(20,184,166,.10);
  color: rgba(220,255,249,.92);
  font-size:11px;
  letter-spacing:.08em;
}

/* campaign */
.hsA__campList{
  margin:0;
  padding-left:16px;
}
.hsA__campList li{
  color: rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.75;
  margin:6px 0;
}
.hsA__campList b{ color: rgba(255,255,255,.92); font-weight:700; }

.hsA__miniLink{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  letter-spacing:.06em;
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.hsA__miniLink:hover{ color: rgba(255,255,255,.92); }

/* menu mini */
.hsA__menuDl{ margin:0; }
.hsA__menuDl > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.hsA__menuDl dt{
  color: rgba(255,255,255,.78);
  font-size:13px;
}
.hsA__menuDl dd{
  margin:0;
  color: rgba(255,255,255,.92);
  font-weight:700;
  font-size:13px;
}
.hsA__menuDl .is-note dt,
.hsA__menuDl .is-note dd{
  color: rgba(255,255,255,.62);
  font-weight:500;
}

/* buttons */
.hsA__btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.hsA__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  border:1px solid transparent;
  text-decoration:none;
}
.hsA__btn--primary{
  background: rgba(20,184,166,.95);
  color:#041414;
  border-color: rgba(20,184,166,.95);
}
.hsA__btn--primary:hover{ filter: brightness(.95); }
.hsA__btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.14);
}
.hsA__btn--ghost:hover{
  background: rgba(255,255,255,.10);
}

/* Responsive */
@media (max-width: 980px){
  .hsA{ grid-template-columns: 1fr; }
}
/* ===== Headspa A：Campaign only layout ===== */

.hsA__side{
  display:block;   /* 2段構成を解除 */
}

.hsA__campaign{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:240px;  /* 高さを確保 */
}

/* キャンペーンを少し豪華に */
.hsA__campaign{
  background:
    radial-gradient(600px 300px at 80% 10%, rgba(20,184,166,.18), transparent 60%),
    rgba(2,6,23,.55);
}

/* リスト少し大きめ */
.hsA__campList li{
  font-size:14px;
  line-height:1.9;
}

/* 下に強いCTA */
.hsA__campaign .hsA__miniLink{
  margin-top:18px;
  font-weight:700;
  letter-spacing:.08em;
  color: rgba(20,184,166,.95);
}
.hsA__campaign .hsA__miniLink:hover{
  color:#ffffff;
}
/* ボタンを右端へ */
.hsA__box .btn,
.hsA__box .hsA__miniLink{
  margin-left:auto;
  display:inline-flex;
}
.pillar{
  display:flex;
  flex-direction:column;
}

.pillar{
  display:flex;
  flex-direction:column;
}

.pillar .btn,
.pillar .pillar__cta{
  align-self:flex-end;
  margin-top:auto;
}/* ▼流れ（STEP）を矢印で繋ぐ：親を .flow と仮定 */
.flow{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}

/* 2つ目以降の要素の前に矢印を表示 */
.flow > * + *{
  position:relative;
  padding-left:22px;
}
.flow > * + *::before{
  content:"→";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(255,255,255,.75);
  font-size:14px;
  letter-spacing:.1em;
}
/* =========================================
   STEP 横長バー化（強めデザイン）
========================================= */

.stepBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  margin-top:40px;
  position:relative;
  padding:24px 32px;
  border-radius:999px;
  background: rgba(6, 30, 34, .55);
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.10);
}

/* 横のつながりライン */
.stepBar::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(16,185,129,.4),
    rgba(20,184,166,.7),
    rgba(6,182,212,.4)
  );
  z-index:0;
}

.stepItem{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:1;
  color:#fff;
}

/* 丸番号 */
.stepNo{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:700;
  background: linear-gradient(145deg, #0ea5a0, #065f5b);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  letter-spacing:.05em;
}

/* テキスト */
.stepText{
  font-size:14px;
  letter-spacing:.06em;
  font-weight:600;
}

/* ホバーで少し浮かせる */
.stepItem:hover .stepNo{
  transform:scale(1.05);
  transition:.2s ease;
}
/* Price section single column */
.pricegrid{
  display:flex;
  justify-content:center;
}

.pricegrid .pricecard{
  width: min(560px, 100%);
}
.pricegrid .pricecard{
  width: min(760px, 100%);
}

.pricedl{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.pricedl > div{
  border-bottom: 1px dotted rgba(255,255,255,.25);
  padding: 14px 0;
}
/* Head Spa 価格 2列レイアウト（自動調整） */
.pricedl{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 40px;
}

.pricedl > div{
  border-bottom: 1px dotted rgba(255,255,255,.25);
  padding: 16px 0;
}

.pricedl dd{
  font-size:18px;
  font-weight:600;
}
/* ===== Rental 3-column layout ===== */
.rentalGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  max-width:1000px;   /* ←追加 */
  margin:0 auto 60px; /* ←中央寄せ */
}

/* 右列だけ縦に伸びる */
.rentalPrice{
  display:flex;
  flex-direction:column;
}

/* 画像3枚 */
.rentalImages{
  margin-top:20px;
  display:grid;
  gap:14px;
}

.rentalImages img{
  width:100%;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* レスポンシブ */
@media(max-width:980px){
  .rentalGrid{
    grid-template-columns:1fr;
  }
}
.rentalGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}

.rentalGallery img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.rentalGallery img{
  transform: translateY(20px);
}
.rentalGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}

.rentalGallery img{
  width:300px;
  border-radius:18px;
  object-fit:cover;
}
/* === Rental gallery large layout === */
/* === Rental Gallery Wide Fix === */

.rentalGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
  margin-top:60px;
  width:100%;
}

.rentalGallery img{
  width:100%;
  height:auto;                 /* ← 高さ固定をやめる */
  aspect-ratio: 16 / 9;        /* ← 横長にする */
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}

.rentalGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:28px;
  margin-top:40px;
}

.rentalGallery img{
  width:100%;
  height:220px;          /* ← 高さ固定で存在感出す */
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 25px 50px rgba(0,0,0,.35);
  transition:.3s ease;
}

.rentalGallery img:hover{
  transform:scale(1.03);
}

/* === Rental Gallery Wide Fix === */

.rentalGallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
  margin-top:60px;
  width:100%;
}

.rentalGallery img{
  width:100%;
  height:auto;                 /* ← 高さ固定をやめる */
  aspect-ratio: 16 / 9;        /* ← 横長にする */
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.schoolGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  margin-top:30px;
}

/* =========================================================
   Client feedback updates (Deep Sea Meditation)
   ========================================================= */

/* Hero: "Respa" text emerges */
.hero__brand{
  opacity:0;
  animation: riseIn 1.25s ease-out .15s both;
  text-shadow: 0 14px 40px rgba(2,6,23,.22);
}
.hero__sub{
  opacity:0;
  animation: riseIn 1.25s ease-out .45s both;
}
.hero__lead{ opacity:0; animation: riseIn 1.25s ease-out .65s both; }
.hero__actions{ opacity:0; animation: riseIn 1.25s ease-out .85s both; }

@keyframes riseIn{
  from{ opacity:0; transform: translateY(10px); filter: blur(6px); }
  to  { opacity:1; transform: translateY(0);  filter: blur(0); }
}

/* Concept title */
.conceptTitle{
  margin: 6px 0 18px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* Features section */
.featureGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 14px;
}
@media(max-width:980px){
  .featureGrid{ grid-template-columns:1fr; }
}

.checkList{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
}
.checkList li{
  position:relative;
  padding-left: 26px;
  margin: 10px 0;
  color: rgba(15,23,42,.78);
  line-height: 1.8;
}
.checkList li::before{
  content: "✓";
  position:absolute;
  left:0;
  top:0;
  opacity:.8;
}

/* Campaign simple */
.campaignSimple{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  max-width: 860px;
  margin: 0 auto;
}
.campaignItem{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.campaignItem .h3{ margin:0; }


/* Campaign glam (more vibrant) */
.campaignGlow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
@media(max-width:980px){
  .campaignGlow{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:640px){
  .campaignGlow{ grid-template-columns: 1fr; }
}

.campaignGlowCard{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  border: 1px solid rgba(14,165,160,.26);
  box-shadow: 0 22px 46px rgba(15,23,42,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}

.campaignGlowCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(560px 220px at 18% -10%, rgba(45,212,191,.40), transparent 60%),
    radial-gradient(520px 260px at 110% 40%, rgba(14,165,160,.20), transparent 64%),
    radial-gradient(420px 180px at 60% 120%, rgba(6,182,212,.12), transparent 60%);
  opacity: 1;
  pointer-events:none;
}

.campaignGlowCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 22%, transparent 45%);
  transform: translateX(-120%);
  opacity: .6;
  pointer-events:none;
}

.campaignGlowCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 62px rgba(15,23,42,.14);
}
.campaignGlowCard:hover::after{
  transform: translateX(120%);
  transition: transform 1.2s ease;
}

.campaignGlowInner{ position:relative; }

.campaignGlowTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.campaignBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(6,26,43,.92);
  color: #fff;
}

.campaignIcon{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(14,165,160,.10);
  border: 1px solid rgba(14,165,160,.24);
  color: rgba(15,23,42,.80);
  font-weight: 800;
  font-size: 16px;
}

.campaignBig{
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(15,23,42,.92);
}

.campaignText{
  margin: 8px 0 0;
  color: rgba(15,23,42,.70);
  line-height: 1.8;
}
/* Menu cards */
.pricegrid--menu{
  grid-template-columns: repeat(2, 1fr);
}
@media(max-width:980px){
  .pricegrid--menu{ grid-template-columns:1fr; }
}

.menuCard .h3{ margin:0 0 8px; }
.menuTime{
  display:inline-block;
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(15,23,42,.62);
}
.menuPrice{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(15,23,42,.92);
}
.menuNote{
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(15,23,42,.56);
}
.menuIncludes{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(15,23,42,.74);
}

/* Options list spacing */
.pricedl--options{ margin-top: 12px; }

/* Rental: 2-column */
.rentalGrid{
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  max-width: 980px;
  margin: 18px auto 0;
}
@media(max-width:980px){
  .rentalGrid{ grid-template-columns:1fr; }
}
/* =========================
   Features Glam（Respaの特徴を飾る）
   ========================= */
#features.section--paper{
  position: relative;
  overflow: hidden;
}
#features.section--paper::before{
  content:"";
  position:absolute;
  inset:-140px -120px -160px -120px;
  background:
    radial-gradient(520px 420px at 15% 15%, rgba(14,165,160,.12), transparent 70%),
    radial-gradient(520px 420px at 85% 40%, rgba(99,102,241,.08), transparent 72%),
    radial-gradient(720px 520px at 60% 110%, rgba(34,211,238,.10), transparent 68%);
  pointer-events:none;
}
#features.section--paper::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(14,165,160,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 22%, rgba(15,23,42,.06) 0 1.5px, transparent 3px),
    radial-gradient(circle at 88% 66%, rgba(34,211,238,.10) 0 2px, transparent 3px);
  background-size: 260px 260px;
  opacity:.65;
  pointer-events:none;
  mix-blend-mode:multiply;
}
#features .wrap{ position:relative; z-index:1; }

.panelHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.panelTag{
  font-size: 11px;
  letter-spacing: .24em;
  color: rgba(15,23,42,.50);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}

/* うっすらグローの“ラグジュアリーパネル” */
.panel--lux{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid rgba(15,23,42,.10);
}
.panel--lux::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(650px 220px at 20% 0%, rgba(14,165,160,.16), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(99,102,241,.12), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.panel--lux > *{ position:relative; z-index:1; }

.featureCards{
  display:grid;
  gap:12px;
  margin-top: 12px;
}
.featureCard{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.65);
}
.featureIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(14,165,160,.10), rgba(14,165,160,.04));
  border: 1px solid rgba(14,165,160,.18);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.featureTitle{
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(15,23,42,.90);
}
.featureDesc{
  margin: 4px 0 0;
  color: rgba(15,23,42,.64);
  font-size: 14px;
  line-height: 1.7;
}

.featurePills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius:999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.78);
  font-size: 13px;
}



/* =========================
   Readability fix (Dark theme + light cards)
   ========================= */

/* CAMPAIGN cards: force dark text on light card backgrounds */
body.theme-dark #campaign .campaignGlowCard{
  color: rgba(15,23,42,.90) !important;
}
body.theme-dark #campaign .campaignGlowCard .h3,
body.theme-dark #campaign .campaignGlowCard .campaignBig{
  color: rgba(15,23,42,.92) !important;
}
body.theme-dark #campaign .campaignGlowCard .campaignText{
  color: rgba(15,23,42,.74) !important;
}

/* FEATURES panels: force readable light text on dark panels */
body.theme-dark #features .panel{
  color: rgba(255,255,255,.88) !important;
}
body.theme-dark #features .panel .h3{
  color: rgba(255,255,255,.94) !important;
}
body.theme-dark #features .panel p,
body.theme-dark #features .panel li{
  color: rgba(255,255,255,.74) !important;
}


/* =========================
   Respa Features (more glamorous)
   ========================= */
.panel--features{
  position: relative;
  overflow: hidden;
}
.panel--features::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(20,184,166,.24), transparent 60%),
    radial-gradient(520px 240px at 90% 20%, rgba(99,102,241,.18), transparent 62%),
    radial-gradient(520px 240px at 45% 110%, rgba(34,211,238,.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.panel--features > *{ position:relative; z-index:1; }

.featureList{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  gap:12px;
}
.featureItem{
  display:grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}
.featureItem:hover{
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.34);
  box-shadow: 0 24px 56px rgba(2,6,23,.30);
}
.featureIcon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.32), transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.30), rgba(99,102,241,.18));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.featureText{ min-width: 0; }
.featureLabel{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,255,255,.94);
}
.featureNote{
  margin: 6px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.7;
}

/* keywords pills: slightly brighter in dark */
body.theme-dark #features .pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
}


/* =========================
   Recommend (match Features: framed, bigger, centered)
   ========================= */
.panelHead--center{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.panelHead--center .panelTag{
  margin-top: 6px;
}

.panel--recommend{
  position: relative;
  overflow: hidden;
  text-align: center;
}
.panel--recommend::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 50% 0%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(520px 240px at 15% 40%, rgba(99,102,241,.14), transparent 62%),
    radial-gradient(520px 240px at 85% 70%, rgba(20,184,166,.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.panel--recommend > *{ position:relative; z-index:1; }

.recommendList{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  gap:12px;
}

/* Bigger, centered, framed items */
.recommendItem{
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  position: relative;
}
.recommendItem::before{
  content:"✓";
  position:absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.28), rgba(99,102,241,.18));
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}
.recommendItem{
  padding-left: 56px; /* room for icon */
  text-align: center;
}

.recommendItem:hover{
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.34);
  box-shadow: 0 24px 56px rgba(2,6,23,.30);
}

/* Make the recommend panel breathe on small screens */
@media (max-width: 720px){
  .recommendItem{ font-size: 17px; padding: 16px 12px 16px 54px; }
}


/* =========================
   Price/Menu cards: Luxury frame (Deep Sea Luxury)
   ========================= */

/* 4 cards on wide screens */
.pricegrid--menu{
  grid-template-columns: repeat(4, 1fr);
}

/* make menu cards look luxurious */
#price .menuCard{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px 20px 18px;
  background: rgba(2, 6, 23, .62); /* deep sea glass */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 60px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* gradient frame + subtle glow */
#price .menuCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(20,184,166,.55),
      rgba(99,102,241,.40),
      rgba(245, 214, 158, .26),
      rgba(20,184,166,.42)
    );
  opacity:.55;
  pointer-events:none;
  filter: blur(.2px);
}
#price .menuCard::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(520px 240px at 90% 25%, rgba(99,102,241,.14), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.58));
  pointer-events:none;
}
#price .menuCard > *{ position:relative; z-index:1; }

/* typography */
#price .menuCard .h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .05em;
  color: rgba(255,255,255,.95);
}
#price .menuPrice{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}
#price .menuNote{
  margin: 0 0 10px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
}
#price .menuIncludes{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.74);
}

/* time pill */
#price .menuTime{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* hover */
@media (hover:hover){
  #price .menuCard:hover{
    transform: translateY(-3px);
    box-shadow: 0 34px 78px rgba(0,0,0,.48);
    border-color: rgba(20,184,166,.30);
  }
  #price .menuCard:hover::before{ opacity:.72; }
}

/* responsive */
@media (max-width: 1180px){
  .pricegrid--menu{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px){
  .pricegrid--menu{ grid-template-columns: 1fr; }
}


/* =========================
   Lux Frames: Headspa / Rental / School blocks
   ========================= */

/* shared luxury glass frame */
:where(#headspa, #rental, #school) :where(.card, .panel){
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(2, 6, 23, .58);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 60px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* gradient frame */
:where(#headspa, #rental, #school) :where(.card, .panel)::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(20,184,166,.55),
      rgba(99,102,241,.40),
      rgba(245, 214, 158, .22),
      rgba(20,184,166,.42)
    );
  opacity:.52;
  pointer-events:none;
}
:where(#headspa, #rental, #school) :where(.card, .panel)::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(20,184,166,.16), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(99,102,241,.12), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.74), rgba(2,6,23,.56));
  pointer-events:none;
}
:where(#headspa, #rental, #school) :where(.card, .panel) > *{
  position: relative;
  z-index: 1;
}

/* typography inside those blocks */
:where(#headspa, #rental, #school) :where(.card, .panel) .h3{
  color: rgba(255,255,255,.95) !important;
  font-weight: 900;
  letter-spacing: .05em;
}
:where(#headspa, #rental, #school) :where(.card, .panel) p,
:where(#headspa, #rental, #school) :where(.card, .panel) li{
  color: rgba(255,255,255,.74) !important;
}
#rental .panel .muted{ color: rgba(255,255,255,.70) !important; }

/* list style in rental left box: nicer bullets */
#rental .panel .list{
  padding-left: 0;
  list-style: none;
  margin: 10px 0 0;
}
#rental .panel .list li{
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
}
#rental .panel .list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .65em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(20,184,166,.70);
  box-shadow: 0 0 0 4px rgba(20,184,166,.14);
  transform: translateY(-50%);
}

/* small decorative badge in top-right */
:where(#headspa, #school) .card .h3{
  padding-right: 48px;
}
:where(#headspa, #school) .card .h3::after{
  content:"";
  position:absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.26), rgba(99,102,241,.18));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}

/* hover lift */
@media (hover:hover){
  :where(#headspa, #rental, #school) :where(.card, .panel):hover{
    transform: translateY(-3px);
    border-color: rgba(20,184,166,.30);
    box-shadow: 0 34px 78px rgba(0,0,0,.48);
  }
  :where(#headspa, #rental, #school) :where(.card, .panel):hover::before{
    opacity: .70;
  }
}

/* keep spacing comfortable */
#headspa .cards, #school .cards{
  gap: 14px;
}
#rental .rentalGrid{
  gap: 14px;
}


/* =========================
   v5 tweak: remove/subdue top-right bubble & make frame more gold
   ========================= */

/* make the decorative top-right bubble almost invisible (or disable) */
:where(#headspa, #school) .card .h3::after{
  opacity: .10;           /* very subtle */
  filter: blur(.2px);
  box-shadow: none;
}
@media (max-width: 720px){
  :where(#headspa, #school) .card .h3::after{ opacity:.08; }
}

/* gold-leaning luxury frame */
:where(#headspa, #rental, #school) :where(.card, .panel)::before{
  background:
    linear-gradient(135deg,
      rgba(245, 214, 158, .62),   /* gold highlight */
      rgba(178, 138, 78,  .40),   /* warm gold */
      rgba(20,184,166,   .36),    /* teal */
      rgba(99,102,241,   .22)     /* indigo */
    );
  opacity: .62;
}
:where(#headspa, #rental, #school) :where(.card, .panel)::after{
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(245,214,158,.18), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(178,138,78,.12), transparent 62%),
    radial-gradient(520px 220px at 60% 120%, rgba(20,184,166,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.76), rgba(2,6,23,.56));
}

/* slightly warmer border */
:where(#headspa, #rental, #school) :where(.card, .panel){
  border-color: rgba(245,214,158,.16);
}
@media (hover:hover){
  :where(#headspa, #rental, #school) :where(.card, .panel):hover{
    border-color: rgba(245,214,158,.28);
  }
}


/* =========================
   v6: Campaign glass + luxury (readable badges)
   ========================= */
#campaign .campaignGlowCard{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px 20px 18px;
  background: rgba(2, 6, 23, .56); /* deep sea glass */
  border: 1px solid rgba(245,214,158,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#campaign .campaignGlowCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(245,214,158,.70),
      rgba(178,138,78,.44),
      rgba(20,184,166,.38),
      rgba(99,102,241,.22)
    );
  opacity: .55;
  pointer-events:none;
}
#campaign .campaignGlowCard::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(245,214,158,.16), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(20,184,166,.14), transparent 62%),
    radial-gradient(520px 260px at 60% 120%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.74), rgba(2,6,23,.52));
  pointer-events:none;
}
#campaign .campaignGlowCard > *{ position:relative; z-index:1; }

/* Make top badge readable (fix invisible text) */
#campaign .campaignBadge{
  background: rgba(0,0,0,.48) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .22em;
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
}
#campaign .campaignIcon{
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(245,214,158,.22), rgba(20,184,166,.18));
  border: 1px solid rgba(245,214,158,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(0,0,0,.30);
}

/* Typography */
#campaign .campaignBig{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#campaign .campaignGlowCard .h3{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
}
#campaign .campaignText{
  color: rgba(255,255,255,.74) !important;
}

/* subtle shine sweep */
@media (hover:hover){
  #campaign .campaignGlowCard{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #campaign .campaignGlowCard:hover{
    transform: translateY(-3px);
    border-color: rgba(245,214,158,.30);
    box-shadow: 0 40px 86px rgba(0,0,0,.54);
  }
  #campaign .campaignGlowCard:hover::before{ opacity: .72; }
}

/* Grid spacing */
#campaign .campaignGlow{
  gap: 14px;
}

#campaign .campaignCtaRow{
  margin-top: 16px;
  display:flex;
  justify-content:center;
}
#campaign .campaignCtaRow .btn{
  padding-left: 22px;
  padding-right: 22px;
  border-radius: 999px;
  box-shadow: 0 22px 48px rgba(0,0,0,.35);
}


/* =========================
   v7: Campaign back to WHITE glass (gorgeous + readable)
   ========================= */
#campaign .campaignGlowCard{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,252,251,.88)) !important;
  border: 1px solid rgba(245,214,158,.42) !important;
  box-shadow: 0 22px 46px rgba(15,23,42,.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#campaign .campaignGlowCard::before{
  opacity: .30 !important;
}
#campaign .campaignGlowCard::after{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,252,251,.88)) !important;
}

/* text on white card */
#campaign .campaignBig,
#campaign .campaignGlowCard .h3{
  color: rgba(15,23,42,.92) !important;
  text-shadow: none !important;
}
#campaign .campaignText{
  color: rgba(15,23,42,.70) !important;
}

/* top badge: make readable */
#campaign .campaignBadge{
  background: rgba(6,26,43,.92) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* icon bubble: keep subtle gold/mint */
#campaign .campaignIcon{
  color: rgba(15,23,42,.86) !important;
  border-color: rgba(245,214,158,.28) !important;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(245,214,158,.24), rgba(20,184,166,.14)) !important;
}

/* CTA row on campaign: keep premium but light */
#campaign .campaignCtaRow .btn{
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
}


/* =========================
   Site Bubble Dust (subtle, scattered)
   ========================= */
.siteBubbles{
  position: relative;
}

/* Global bubble layer */
.siteBubbles::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above bg, below cards (cards are z-indexed) */
  opacity: .55;

  /* Bubble field: multiple radial gradients */
  background:
    radial-gradient(10px 10px at 12% 78%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    radial-gradient(6px 6px at 18% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(14px 14px at 26% 62%, rgba(20,184,166,.10), rgba(20,184,166,0) 62%),
    radial-gradient(9px 9px at 40% 18%, rgba(99,102,241,.08), rgba(99,102,241,0) 60%),
    radial-gradient(12px 12px at 58% 44%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(7px 7px at 66% 78%, rgba(20,184,166,.09), rgba(20,184,166,0) 64%),
    radial-gradient(16px 16px at 76% 26%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(8px 8px at 86% 60%, rgba(99,102,241,.07), rgba(99,102,241,0) 62%),
    radial-gradient(6px 6px at 92% 22%, rgba(255,255,255,.09), rgba(255,255,255,0) 65%);
  filter: blur(.2px);
  transform: translateZ(0);

  animation: bubbleDrift 16s ease-in-out infinite;
}

/* Gentle drift */
@keyframes bubbleDrift{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -14px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Section-level bubble accents (optional) */
.bubbleAccent{
  position: relative;
}
.bubbleAccent::after{
  content:"";
  position:absolute;
  inset:-18px -18px;
  pointer-events:none;
  border-radius: 28px;
  opacity:.38;
  background:
    radial-gradient(14px 14px at 18% 80%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%),
    radial-gradient(9px 9px at 82% 30%, rgba(20,184,166,.10), rgba(20,184,166,0) 64%),
    radial-gradient(7px 7px at 62% 78%, rgba(99,102,241,.08), rgba(99,102,241,0) 66%);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .siteBubbles::before{ animation: none; opacity: .35; }
}

/* =========================
   Back to top button
   ========================= */
.backToTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(2,6,23,.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);

  box-shadow: 0 20px 48px rgba(0,0,0,.30);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}

.backToTop.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.backToTop__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.20), rgba(99,102,241,.14));
  border: 1px solid rgba(255,255,255,.16);
}

.backToTop__label{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
}

@media (hover:hover){
  .backToTop:hover{
    border-color: rgba(20,184,166,.30);
  }
}


/* =========================
   v10: Remove gold accents — Blue + Deep Green frames (rental/school blocks)
   ========================= */

/* panels/cards frame gradient */
:where(#headspa, #rental, #school) :where(.card, .panel)::before{
  background:
    linear-gradient(135deg,
      rgba(14, 165, 233, .55),   /* azure */
      rgba(20, 184, 166, .42),   /* teal */
      rgba(2, 132, 199, .30),    /* deep blue */
      rgba(13, 81, 63, .40)      /* deep green */
    ) !important;
  opacity: .58 !important;
}

/* inner glass */
:where(#headspa, #rental, #school) :where(.card, .panel)::after{
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(520px 220px at 92% 18%, rgba(20,184,166,.12), transparent 62%),
    radial-gradient(520px 260px at 60% 120%, rgba(13,81,63,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.74), rgba(2,6,23,.56)) !important;
}

/* borders (no gold) */
:where(#headspa, #rental, #school) :where(.card, .panel){
  border-color: rgba(255,255,255,.12) !important;
}
@media (hover:hover){
  :where(#headspa, #rental, #school) :where(.card, .panel):hover{
    border-color: rgba(14,165,233,.30) !important;
  }
}

/* bullet dots keep teal */
#rental .panel .list li::before{
  background: rgba(20,184,166,.70) !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.14) !important;
}
/* 見出しの後ろの横線を消す */
h2::after, h3::after,
.sectionTitle::after, .section__title::after,
.heading::after, .title::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}
/* ===== Headspa 画像を「もっと広範囲で見せる」 ===== */

/* 画像カード自体を大きく（PC） */
.heroCard{
  width: min(620px, 52vw) !important;  /* 520px→大きく */
}

/* 画像の縦を少し伸ばして、面積を増やす */
.heroCard__imgWrap{
  aspect-ratio: 4 / 5 !important;      /* もし元が 1/1 や 3/4 なら広く見える */
  /* height指定型の場合は下のどちらかを使う */
  /* height: 520px !important; */
}

/* トリミング位置（顔～手が気持ちよく入る位置に） */
.heroCard__img{
  object-fit: cover;
  object-position: 55% 55% !important; /* 上下左右はここで微調整 */
}

/* SPでは大きすぎないように */
@media (max-width: 780px){
  .heroCard{
    width: min(92vw, 520px) !important;
  }
  .heroCard__imgWrap{
    aspect-ratio: 1 / 1 !important;    /* SPは正方形で見やすく */
  }
}
/* ===== Bubble dust (site-wide, subtle) ===== */
body{ position: relative; }

/* 画面全体に薄い気泡を散らす（固定） */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;                /* 背景の上 / コンテンツの下にしたい場合は調整 */
  opacity: .28;              /* 透過：もっと薄くしたければ .18 など */
  mix-blend-mode: screen;    /* 深海色と馴染ませる */
  filter: blur(.2px);
  background:
    radial-gradient(10px 10px at 12% 78%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%),
    radial-gradient(6px 6px at 18% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%),
    radial-gradient(14px 14px at 26% 62%, rgba(20,184,166,.14), rgba(20,184,166,0) 64%),
    radial-gradient(9px 9px at 40% 18%, rgba(59,130,246,.12), rgba(59,130,246,0) 62%),
    radial-gradient(12px 12px at 58% 44%, rgba(255,255,255,.14), rgba(255,255,255,0) 64%),
    radial-gradient(7px 7px at 66% 78%, rgba(20,184,166,.12), rgba(20,184,166,0) 66%),
    radial-gradient(16px 16px at 76% 26%, rgba(255,255,255,.14), rgba(255,255,255,0) 64%),
    radial-gradient(8px 8px at 86% 60%, rgba(59,130,246,.10), rgba(59,130,246,0) 66%),
    radial-gradient(6px 6px at 92% 22%, rgba(255,255,255,.14), rgba(255,255,255,0) 68%);
  animation: bubbleDrift 18s ease-in-out infinite;
}

@keyframes bubbleDrift{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
  100%{ transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; opacity:.18; }
}
/* ===== bubbles near Respa (left of R) ===== */
.heroBrandBubbles{
  position: relative;
  display: inline-block;
}

.bubbleField{
  position: absolute;
  left: -56px;
  top: 50%;
  width: 46px;
  height: 120px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .55; /* もっと透過したいなら .35 */
}

.bubbleField .b{
  position:absolute;
  bottom:0;
  left:50%;
  border-radius:999px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 60% 70%, rgba(20,184,166,.20), rgba(59,130,246,.14) 60%, rgba(0,0,0,0) 75%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  animation: bubbleUp 6s linear infinite;
  opacity: 0;
}

.b1{ width: 7px;  height: 7px;  left: 40%; animation-duration: 5.6s; animation-delay: .2s; }
.b2{ width: 10px; height: 10px; left: 55%; animation-duration: 6.8s; animation-delay: 1.2s; }
.b3{ width: 14px; height: 14px; left: 35%; animation-duration: 7.6s; animation-delay: 2.0s; }
.b4{ width: 9px;  height: 9px;  left: 62%; animation-duration: 5.9s; animation-delay: 2.8s; }
.b5{ width: 6px;  height: 6px;  left: 48%; animation-duration: 4.8s; animation-delay: 3.6s; }
.b6{ width: 12px; height: 12px; left: 30%; animation-duration: 7.2s; animation-delay: 4.3s; }
.b7{ width: 8px;  height: 8px;  left: 58%; animation-duration: 6.1s; animation-delay: 5.0s; }
.b8{ width: 5px;  height: 5px;  left: 42%; animation-duration: 4.6s; animation-delay: 5.8s; }

@keyframes bubbleUp{
  0%   { transform: translateX(-50%) translateY(0) scale(.95); opacity: 0; }
  8%   { opacity: .45; }
  50%  { opacity: .28; }
  100% { transform: translateX(-50%) translateY(-120px) scale(1.15); opacity: 0; }
}
/* ===== Back to top ===== */
.backToTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(2,6,23,.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
  box-shadow: 0 20px 48px rgba(0,0,0,.30);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.backToTop.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.backToTop__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(20,184,166,.22), rgba(59,130,246,.16));
  border: 1px solid rgba(255,255,255,.16);
}
.backToTop__label{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
}/* ===== Recommendセクション画像 ===== */
.recommendImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 40, 60, 0.4),
    transparent 60%
  );
}
.recommendImage {
  margin-top: 30px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.recommendImage__img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transition: transform 0.6s ease;
}

.recommendImage:hover .recommendImage__img {
  transform: scale(1.03);
}


/* =========================================================
   Hero Slider (3 images) - added
   - Uses existing .heroCard look, only swaps images
   ========================================================= */
.heroSlider{ position:relative; }
.heroSlider__track{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5; /* match .heroCard__img */
}
.heroSlider__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition: opacity .7s ease;
}
.heroSlider__img.is-active{ opacity:.92; } /* keep same as .heroCard__img */

.heroSlider__dots{
  position:absolute;
  left:14px;
  bottom:12px;
  display:flex;
  gap:8px;
  z-index:4; /* above overlays */
}
.heroSlider__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
  padding:0;
  cursor:pointer;
}
.heroSlider__dot.is-active{
  background: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.85);
}
#price .pricegrid--menu{
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 900px){
  #price .pricegrid--menu{
    grid-template-columns: 1fr !important;
  }
}/* =========================================
   右固定：予約するボタン（追加のみ）
   ※既存の背景色・配色には触れません
   ========================================= */

.reserveFloatBtn{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 54px;
  padding: 0 22px;
  border-radius: 999px;

  /* エメラルドクリーン */
  background: #00BFA5;
  color: #ffffff;

  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;

  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: saturate(120%);
}

.reserveFloatBtn:hover{
  background: #00A894; /* 少し濃いめ */
}

.reserveFloatBtn:active{
  transform: translateY(-50%) scale(.98);
}

.reserveFloatBtn:focus-visible{
  outline: 3px solid rgba(0,191,165,.35);
  outline-offset: 4px;
}

/* スマホ：右下に移動（邪魔になりにくい） */
@media (max-width: 860px){
  .reserveFloatBtn{
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none;
    right: 14px;
    height: 52px;
    padding: 0 20px;
  }
  .reserveFloatBtn:active{
    transform: scale(.98);
  }
}/* =========================================
 yoyaku
   ========================================= */

.reserveBeautyBtn{
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  text-decoration: none;
}

/* ボタン本体 */
.reserveBeautyBtn__inner{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 60px;
  padding: 0 28px;

  border-radius: 999px;

  /* エメラルドクリーン・グラデーション */
  background: linear-gradient(135deg, #00C9A7 0%, #00BFA5 60%, #00A894 100%);
  color: #ffffff;

  font-weight: 700;
  letter-spacing: .08em;

  box-shadow:
    0 18px 40px rgba(0, 191, 165, .28),
    inset 0 0 0 1px rgba(255,255,255,.18);

  transition: all .35s ease;
}

/* テキスト */
.reserveBeautyBtn__text{
  font-size: 15px;
}

/* ホバー：少し浮く */
.reserveBeautyBtn:hover .reserveBeautyBtn__inner{
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(0, 191, 165, .35),
    inset 0 0 0 1px rgba(255,255,255,.25);
}

/* クリック */
.reserveBeautyBtn:active .reserveBeautyBtn__inner{
  transform: translateY(-1px);
}

/* フォーカス */
.reserveBeautyBtn:focus-visible .reserveBeautyBtn__inner{
  outline: 3px solid rgba(0,191,165,.35);
  outline-offset: 4px;
}

/* スマホ */
@media (max-width: 860px){
  .reserveBeautyBtn{
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: 16px;
    transform: none;
  }

  .reserveBeautyBtn__inner{
    height: 56px;
    padding: 0 24px;
  }
}/* ================================
   SP右上：ハンバーガー（追加のみ）
   ================================ */
.navToggle{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* スマホ時：タップ領域＋見える色 */
@media (max-width: 860px){
  .navToggle{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;            /* ← 3本線を白で表示（背景が暗くても見える） */
  }
}

/* 3本線 */
.navToggle__icon{
  width: 24px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.navToggle__bar{
  width: 100%;
  height: 2px;
  background: currentColor; /* navToggleのcolorに追従 */
  border-radius: 2px;
  opacity: .95;
}/* =========================================
   SP：縦一列メニュー（黒背景＋白文字）
   PCの雰囲気を崩さず、白パネル化を防ぐ
   ========================================= */
@media (max-width: 860px){

  /* navを「縦リスト」にする（白パネル・影・角丸などを無効化） */
  .nav{
    position: fixed !important;
    top: 64px !important;          /* ヘッダーの高さに合わせて調整可 */
    right: 12px !important;
    left: 12px !important;

    display: none;                  /* まず閉じる（開いた時だけ表示） */
    flex-direction: column !important;
    gap: 0 !important;

    padding: 10px 12px !important;
    margin: 0 !important;

    background: rgba(6, 26, 43, .94) !important; /* PCの黒帯に近いダーク */
    color: #fff !important;

    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998 !important;
  }

  /* リンク：縦一列で押しやすく */
  .nav a{
    display: block !important;
    padding: 12px 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    border-radius: 12px;
  }

  .nav a:hover{
    background: rgba(255,255,255,.08);
  }

  /* 開閉：aria-expanded=true の時だけ表示
     ※JSが navToggle の aria-expanded を切り替えている前提 */
  .navToggle[aria-expanded="true"] + .nav{
    display: flex !important;
  }

  /* navToggleを見えるように（黒四角のままでもOK、文字色だけ白に） */
  .navToggle{
    color: #fff;
    z-index: 9999;
  }

  /* 「白文字に何か描かれる」原因になりがちな疑似要素を無効化 */
  .navToggle::before,
  .navToggle::after{
    content: none !important;
  }
}/* =========================================
   SP: Google Mapのはみ出し対策（画面内に収める）
   色味は変えない
   ========================================= */

/* iframeは必ず親幅に追従 */
iframe{
  max-width: 100%;
}

/* mapブロック（クラス名が違っても効くよう保険） */
.map,
.gmap,
.googlemap,
.accessMap,
.mapWrap,
.map-wrapper{
  max-width: 100%;
  overflow: hidden;
}

/* もっとも効く：iframeをレスポンシブに固定 */
.map iframe,
.gmap iframe,
.googlemap iframe,
.accessMap iframe,
.mapWrap iframe,
.map-wrapper iframe,
iframe[src*="google.com/maps"]{
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  border: 0;
}

/* iOS/Safariで横スクロールが出る系の保険 */
html, body{
  overflow-x: hidden;
}

/* 余白込みで100vw超えしがちな要素を抑える保険 */
@media (max-width: 860px){
  .wrap, .container, .section, .card, .panel{
    max-width: 100%;
  }
}/* =========================================
   Google Map のはみ出し対策（角丸内に収める）
   ========================================= */

/* Google Maps iframe を含む親を“マスク”する */
iframe[src*="google.com/maps"]{
  width: 100% !important;
  display: block;
  border: 0;
}

/* iframeの直近の親が角丸カードの場合が多いので、まずここを抑える */
iframe[src*="google.com/maps"]{
  max-width: 100%;
}

iframe[src*="google.com/maps"]{
  border-radius: inherit; /* 親の角丸があるなら追従 */
}

/* 「地図を入れている枠」を角丸内に収める：親にoverflow hidden */
.mapWrap,
.map,
.gmap,
.googlemap,
.accessMap,
.mapRatio,
.map-embed,
.mapEmbed{
  overflow: hidden;
}

/* さらに確実に：Google Maps iframeの親要素に効かせる保険 */
iframe[src*="google.com/maps"]{
  overflow: hidden;
}/* =========================================
   SP: stepBar（01〜）が崩れる対策
   ========================================= */
@media (max-width: 860px){

  .stepBar{
    display: grid;                       /* flexの上書きでもOK */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;                      /* 行/列の間隔 */
    align-items: stretch;
  }

  .stepItem{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;                        /* テキストのはみ出し対策 */
  }

  .stepNo{
    flex: 0 0 auto;
  }

  .stepText{
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;                 /* ちゃんと折り返す */
    word-break: keep-all;                /* 日本語の変な分割を抑える */
    line-height: 1.2;
  }
}

/* さらに小さい端末は1列に */
@media (max-width: 380px){
  .stepBar{
    grid-template-columns: 1fr;
  }
}/* =========================================
   Logo Bubble for "R"（CSSだけで泡）
   ========================================= */

.logoR{
  position: relative;
  display: inline-block;
  padding-right: .22em;          /* 泡の置き場 */
}

/* 泡：3つ（疑似要素＋box-shadowで増やす） */
.logoR::before,
.logoR::after{
  content: "";
  position: absolute;
  right: -0.05em;
  top: 0.15em;
  width: .38em;
  height: .38em;
  border-radius: 999px;

  /* “泡っぽい”質感：透明感＋ハイライト */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 22%, rgba(255,255,255,.25) 35%, rgba(0,0,0,0) 70%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);

  /* 外周の薄い縁（泡の輪郭） */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    0 6px 18px rgba(0, 191, 165, .22);
  opacity: .92;

  pointer-events: none;
}

/* 2個目・3個目はbox-shadowで複製（位置違い） */
.logoR::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    0 6px 18px rgba(0, 191, 165, .22),
    /* 2つ目 */
    0.42em 0.38em 0 0 rgba(255,255,255,0),
    /* 3つ目 */
    0.20em 0.82em 0 0 rgba(255,255,255,0);
  animation: bubbleFloat1 3.8s ease-in-out infinite;
}

/* afterは少し大きい泡（別テンポ） */
.logoR::after{
  width: .26em;
  height: .26em;
  right: -0.12em;
  top: 0.55em;
  opacity: .78;
  animation: bubbleFloat2 4.6s ease-in-out infinite;
}

/* 泡が“ふわっ”と上がって消える */
@keyframes bubbleFloat1{
  0%   { transform: translate(0, 0) scale(1); opacity: .00; filter: blur(0px); }
  12%  { opacity: .92; }
  55%  { transform: translate(.10em, -0.55em) scale(1.08); opacity: .88; }
  100% { transform: translate(.16em, -1.05em) scale(.92); opacity: 0; filter: blur(.2px); }
}

@keyframes bubbleFloat2{
  0%   { transform: translate(0, .05em) scale(.92); opacity: 0; }
  18%  { opacity: .78; }
  60%  { transform: translate(.10em, -0.55em) scale(1.05); opacity: .62; }
  100% { transform: translate(.12em, -1.15em) scale(.88); opacity: 0; }
}

/* 動きが苦手な人向け（OS設定に従う） */
@media (prefers-reduced-motion: reduce){
  .logoR::before, .logoR::after{ animation: none; opacity: .55; }
}/* =========================================
   Hero Logo Bubble（大きめ・上品）
   ========================================= */

.heroLogoR{
  position: relative;
  display: inline-block;
  padding-right: .35em;
}

/* メイン泡 */
.heroLogoR::before,
.heroLogoR::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 22%, rgba(255,255,255,.28) 35%, rgba(0,0,0,0) 70%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    0 10px 30px rgba(0,191,165,.25);
}

/* 大きい泡 */
.heroLogoR::before{
  width: .55em;
  height: .55em;
  right: -.05em;
  top: .10em;
  animation: heroBubble1 5s ease-in-out infinite;
}

/* 小さい泡 */
.heroLogoR::after{
  width: .32em;
  height: .32em;
  right: -.15em;
  top: .65em;
  opacity: .85;
  animation: heroBubble2 6s ease-in-out infinite;
}

/* ふわっと浮く */
@keyframes heroBubble1{
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  12%  { opacity: .95; }
  55%  { transform: translate(.1em,-.8em) scale(1.1); opacity: .9; }
  100% { transform: translate(.2em,-1.4em) scale(.95); opacity: 0; }
}

@keyframes heroBubble2{
  0%   { transform: translate(0,.1em) scale(.9); opacity: 0; }
  20%  { opacity: .85; }
  60%  { transform: translate(.15em,-.9em) scale(1.05); opacity: .7; }
  100% { transform: translate(.25em,-1.6em) scale(.85); opacity: 0; }
}

/* 動きを抑える設定 */
@media (prefers-reduced-motion: reduce){
  .heroLogoR::before,
  .heroLogoR::after{
    animation: none;
    opacity: .6;
  }
}
/* ===== 全体を明朝体に統一 ===== */
body {
  font-family: "Noto Serif JP",
               "Yu Mincho",
               "Hiragino Mincho ProN",
               serif;
}/* ===== 全体を強制的に明朝体にする ===== */
* {
  font-family: "Yu Mincho",
               "Hiragino Mincho ProN",
               "Noto Serif JP",
               serif !important;
}


/* =========================
   Concept: 1-column (no right photo)
   ========================= */
#concept .conceptGrid{
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
  gap: 0;
}
#concept .conceptText{
  text-align: left;
}
#concept .conceptTitle{
  opacity: .9;
}
#concept .poem p{
  color: rgba(255,255,255,.86);
}
.section--dark #concept .poem p{
  color: rgba(255,255,255,.86);
}
.hsA__desc {
  margin: 10px 0 12px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

/* =========================
   Brain Recovery Program
   ========================= */
.section--deepRecovery{
  position: relative;
  background:
    radial-gradient(circle at 18% 10%, rgba(119, 236, 218, .18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(72, 213, 189, .13), transparent 28%),
    linear-gradient(180deg, rgba(4, 30, 40, .90), rgba(7, 67, 83, .82)),
    url('../images/_hero_source.jpg') center/cover no-repeat;
}
.section--deepRecovery::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 16% 12%, rgba(146,245,230,.18), transparent 22%),
    radial-gradient(circle at 78% 20%, rgba(78,219,190,.10), transparent 18%),
    radial-gradient(circle at 82% 82%, rgba(179,255,241,.08), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 1px, transparent 2px);
  background-size: auto, auto, auto, 180px 180px;
  pointer-events:none;
}
.section--deepRecovery > .wrap{ position:relative; z-index:1; }
.recoveryLead{ letter-spacing:.12em; }
.recoveryHero{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items:center;
  margin: 28px 0 34px;
}
.recoveryHero__logo img,
.recoveryMockup img{
    display: block;
    width: 80%;
    height: auto;
    border-radius: 24px;
}
.recoveryHero__logo img{ box-shadow:0 20px 50px rgba(0,0,0,.28); }
.recoveryHero__copy{ font-size:18px; line-height:1.9; color:rgba(255,255,255,.9); }
.recoveryPriceBox{
  margin-top:18px; display:inline-flex; gap:18px; align-items:center;
  padding:14px 22px; border-radius:999px; background:#050505; color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.recoveryPriceBox strong{ font-size: clamp(28px, 4vw, 44px); font-weight:700; }
.recoveryGrid{ display:grid; gap:24px; margin-top:24px; }
.recoveryGrid--two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.recoveryCard{
  background: rgba(8, 54, 79, .52);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 28px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
}
.recoveryCard__head{ margin-bottom:18px; }
.recoveryCard__head .h3{ margin-top:10px; }
.recoveryList, .recoveryFeatures{ margin:0; padding-left:1.2em; color:rgba(255,255,255,.92); line-height:1.9; }
.recoveryFeatures li + li, .recoveryList li + li{ margin-top:6px; }
.recoveryMockup{ margin-top:20px; }
.recoveryMockup--wide{ margin-top:28px; }
.recoverySteps{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
.recoveryStep{
  padding:18px; border-radius:18px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.recoveryStep span{
  display:inline-flex; min-width:58px; justify-content:center; align-items:center;
  padding:5px 10px; border-radius:999px; background:rgba(255,170,95,.18); color:#ffb26f;
  font-size:12px; letter-spacing:.08em; margin-bottom:12px;
}
.recoveryStep h4{ margin:0 0 10px; font-size:20px; color:#fff; }
.recoveryStep p{ margin:0; color:rgba(255,255,255,.86); line-height:1.8; }
.recoveryStep--after{ grid-column:1 / -1; }
.recoveryTags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.recoveryTags span{
  padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); color:#fff; font-size:14px;
}
@media (max-width: 960px){
  .recoveryHero, .recoveryGrid--two, .recoverySteps{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .recoveryCard{ padding:20px; border-radius:22px; }
  .recoveryPriceBox{ display:flex; width:100%; justify-content:space-between; gap:10px; padding:14px 18px; }
  .recoveryPriceBox strong{ font-size:32px; }
  .recoveryHero__copy{ font-size:16px; }
  .recoveryStep h4{ font-size:18px; }
}


.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand__nameRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__logoImage{
  display:block;
  width:40px;
  height: 40px;
  object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.16));
  flex-shrink:0;
}

.recoveryCard--menu .recoveryCard__head{
  margin-bottom: 16px;
}
.menuCompact{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  position:relative;
  z-index:1;
}
.menuCompact__item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(186,240,255,.10);
}
.menuCompact__item img{
  display:block;
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 16px rgba(0,0,0,.20);
}
.menuCompact__item span{
  color:#fff;
  font-size:15px;
  line-height:1.45;
  letter-spacing:.03em;
}

@media (max-width: 640px){
  .brand__nameRow{
    gap:8px;
  }
  .brand__logoImage{
    width:32px;
    height: 32px;
  }
  .menuCompact__item{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    padding:7px 9px;
  }
  .menuCompact__item img{
    width:48px;
    height:48px;
  }
  .menuCompact__item span{
    font-size:14px;
  }
}



@media (max-width: 640px){
  
  
  
}


.recoveryCard--features .recoveryFeatures{
  position: relative;
  z-index: 1;
}

.featuresVisual{
  position: relative;
  margin-top: 24px;
  padding: 28px 22px 22px;
  border-radius: 32px;
  overflow: hidden;
 
  border: 1px solid rgba(186,240,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 46px rgba(0,10,25,.22);
}
.featuresVisual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(171,242,255,.16), transparent 16%),
    radial-gradient(circle at 88% 12%, rgba(171,242,255,.12), transparent 14%),
    radial-gradient(circle at 82% 82%, rgba(23,194,255,.18), transparent 22%),
    radial-gradient(circle at 30% 70%, rgba(124,214,255,.08), transparent 18%);
  pointer-events:none;
}
.featuresVisual__title{
  position: relative;
  z-index: 1;
  margin: 0 0 18px 10px;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 400;
  letter-spacing: .08em;
  text-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.featuresColumns{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}
.featuresColumn{
  min-height: 182px;
  display: flex;
  align-items: stretch;
}
.featuresColumn__frame{
  position: relative;
  width: 100%;
  border-radius: 24px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(245,250,252,.92), rgba(227,239,245,.88));
  border: 2px solid rgba(239,247,250,.92);
  box-shadow:
    inset 0 0 0 2px rgba(143,207,228,.58),
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 28px rgba(0,0,0,.14);
  backdrop-filter: blur(4px);
}
.featuresColumn__frame::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.92);
  pointer-events:none;
}
.featuresColumn span{
  position: relative;
  z-index: 1;
  color: #567e95;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  text-shadow: none;
}
@media (max-width: 960px){
  .featuresVisual{
    padding: 24px 16px 18px;
    border-radius: 26px;
  }
  .featuresColumns{
    gap: 10px;
  }
  .featuresColumn{
    min-height: 164px;
  }
  .featuresColumn__frame{
    border-radius: 20px;
    padding: 10px 6px;
  }
  .featuresColumn__frame::before{
    inset: 6px;
    border-radius: 15px;
  }
  .featuresColumn span{
    font-size: 16px;
  }
}
@media (max-width: 640px){
  .featuresVisual{
    padding: 22px 12px 16px;
  }
  .featuresVisual__title{
    margin-left: 4px;
    font-size: 24px;
  }
  .featuresColumns{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
  }
  .featuresColumn{
    min-height: 148px;
  }
  .featuresColumn__frame{
    border-radius: 18px;
    padding: 8px 4px;
  }
  .featuresColumn__frame::before{
    inset: 5px;
    border-radius: 13px;
  }
  .featuresColumn span{
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: .03em;
  }
}


/* Stylish hero/menu card for brain recovery */
.recoveryHero--stylish{
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 34px;
  align-items: center;
  margin: 34px 0 38px;
}
.recoveryHero__logoCard{
  position: relative;
  overflow: hidden;
  padding: 28px 24px 20px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(10, 61, 92, .22), rgba(6, 33, 54, .18)),
    radial-gradient(circle at 50% 18%, rgba(103,137,255,.12), transparent 26%),
    radial-gradient(circle at 20% 80%, rgba(59,196,255,.12), transparent 34%);
  border: 1px solid rgba(186,240,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 44px rgba(0,20,40,.16);
  backdrop-filter: blur(10px);
}
.recoveryHero__logoGlow{
  position: absolute;
  inset: auto -24px -28px auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,93,255,.28), rgba(0,151,255,.08) 45%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
.recoveryHero__logoCard img{
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 220px);
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 30px rgba(45,110,255,.10));
}
.recoveryHero__logoCaption{
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  text-align: center;
  color: rgba(255,255,255,.86);
  font-size: 15px;
  letter-spacing: .12em;
}
.recoveryHero__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recoveryHero__eyebrow{
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(210,240,255,.92);
  font-size: 12px;
  letter-spacing: .20em;
}
.recoveryHero__copy{
  margin: 0;
  max-width: 820px;
  font-size: 18px;
  line-height: 2;
  color: rgba(255,255,255,.92);
}
.recoveryHero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recoveryHero__meta span{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
  font-size: 13px;
  letter-spacing: .08em;
}
.recoveryPriceBox{
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  align-self: flex-start;
  padding: 16px 24px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(8, 35, 54, .78), rgba(6, 24, 40, .82));
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 40px rgba(0,20,40,.18);
  backdrop-filter: blur(8px);
}
.recoveryPriceBox__label,
.recoveryPriceBox__tax{
  font-size: 15px;
  color: rgba(255,255,255,.84);
  letter-spacing: .08em;
}
.recoveryPriceBox strong{
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: .02em;
}
@media (max-width: 960px){
  .recoveryHero--stylish{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .recoveryHero__logoCard{
    max-width: 340px;
  }
  .recoveryHero__copy{
    font-size: 17px;
    line-height: 1.9;
  }
}
@media (max-width: 640px){
  .recoveryHero--stylish{
    margin: 28px 0 32px;
  }
  .recoveryHero__logoCard{
    padding: 22px 18px 16px;
    border-radius: 24px;
  }
  .recoveryHero__logoCard img{
    width: min(100%, 190px);
  }
  .recoveryHero__logoCaption{
    font-size: 13px;
    letter-spacing: .08em;
  }
  .recoveryHero__copy{
    font-size: 15px;
    line-height: 1.8;
  }
  .recoveryHero__meta span{
    padding: 8px 12px;
    font-size: 12px;
  }
  .recoveryPriceBox{
    gap: 12px;
    padding: 14px 18px;
  }
  .recoveryPriceBox__label,
  .recoveryPriceBox__tax{
    font-size: 13px;
  }
  .recoveryPriceBox strong{
    font-size: 34px;
  }
}


/* Blend the FEATURES visual into the page background more naturally */
.featuresVisual{
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 28px rgba(0,20,40,.10) !important;
}

.featuresVisual::before{
  background:
    radial-gradient(circle at 10% 20%, rgba(171,242,255,.07), transparent 16%),
    radial-gradient(circle at 88% 12%, rgba(171,242,255,.05), transparent 14%),
    radial-gradient(circle at 82% 82%, rgba(23,194,255,.08), transparent 22%),
    radial-gradient(circle at 30% 70%, rgba(124,214,255,.04), transparent 18%) !important;
  opacity: .72;
}

.featuresColumn__frame{
    border: 1.5px solid rgba(233,242,247,.58) !important;
    box-shadow: inset 0 0 0 1.5px rgba(82,195,233,.34),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 20px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(2px);
}

.featuresColumn__frame::before{
  border: 1px solid rgba(240,248,252,.52) !important;
}

.featuresVisual__title{
  text-shadow: 0 6px 16px rgba(0,0,0,.12);
}


/* --- Flow section: single column with arrows between steps --- */
.recoverySteps{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.recoveryStep{
  position: relative;
  padding: 20px 22px !important;
}

.recoveryStep:not(.recoveryStep--after)::after{
  content: "↓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
  font-size: 20px;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.recoveryStep--after{
  grid-column: auto !important;
  margin-top: 8px;
}

@media (max-width: 640px){
  .recoverySteps{
    gap: 16px !important;
  }

  .recoveryStep{
    padding: 18px 16px !important;
  }

  .recoveryStep:not(.recoveryStep--after)::after{
    width: 34px;
    height: 34px;
    bottom: -23px;
    font-size: 18px;
  }
}


/* --- VISUALIZE card: full-width, brighter head spa scene with positive feel --- */
.recoveryCard--visualize{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(16, 92, 109, .92) 0%, rgba(8, 87, 112, .86) 38%, rgba(5, 78, 104, .92) 100%);
}

.recoveryCard--visualize::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(225, 249, 255, .18), transparent 20%),
    radial-gradient(circle at 62% 16%, rgba(255, 244, 227, .18), transparent 18%),
    radial-gradient(circle at 82% 74%, rgba(160, 255, 233, .15), transparent 22%),
    linear-gradient(90deg, rgba(6, 54, 70, .82) 0%, rgba(6, 54, 70, .68) 28%, rgba(6, 54, 70, .32) 48%, rgba(6, 54, 70, .10) 66%, rgba(6, 54, 70, .20) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 36, 51, .16) 100%);
  pointer-events: none;
  z-index: 0;
}

.recoveryCard--visualize::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 59, 78, .14) 0%, rgba(7, 59, 78, .00) 36%, rgba(7, 59, 78, .04) 100%),
    url(../images/_hero_source.jpg) center center / cover no-repeat;
  opacity: .58;
  filter: saturate(1.04) brightness(1.06);
  transform: scale(1.02);
  pointer-events: none;
  z-index: 0;
}

.recoveryCard--visualize > *{
  position: relative;
  z-index: 1;
}

.recoveryCard--visualize .panelTag{
  background: rgba(255, 255, 255, .74);
  color: #60707a;
  border-color: rgba(255,255,255,.34);
}

.recoveryCard--visualize .h3{
  text-shadow: 0 1px 10px rgba(0, 26, 38, .18);
}

.recoveryCard--visualize .recoveryMockup{
  display: none;
}

.recoveryCard--visualize .recoveryList{
  max-width: 54%;
  padding-bottom: 28px;
}

.recoveryCard--visualize .recoveryList li{
  text-shadow: 0 1px 10px rgba(0, 20, 28, .22);
}

@media (max-width: 960px){
  .recoveryCard--visualize::before{
    background:
      radial-gradient(circle at 16% 18%, rgba(225, 249, 255, .16), transparent 20%),
      radial-gradient(circle at 62% 16%, rgba(255, 244, 227, .16), transparent 18%),
      linear-gradient(90deg, rgba(6, 54, 70, .84) 0%, rgba(6, 54, 70, .74) 34%, rgba(6, 54, 70, .44) 54%, rgba(6, 54, 70, .18) 74%, rgba(6, 54, 70, .20) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 36, 51, .16) 100%);
  }

  .recoveryCard--visualize::after{
    background:
      linear-gradient(90deg, rgba(7, 59, 78, .12) 0%, rgba(7, 59, 78, .00) 40%, rgba(7, 59, 78, .04) 100%),
      url(../images/_hero_source.jpg) 62% center / cover no-repeat;
    opacity: .60;
  }

  .recoveryCard--visualize .recoveryList{
    max-width: 60%;
  }
}

@media (max-width: 640px){
  .recoveryCard--visualize::before{
    background:
      radial-gradient(circle at 18% 14%, rgba(225, 249, 255, .14), transparent 20%),
      linear-gradient(180deg, rgba(6, 54, 70, .48) 0%, rgba(6, 54, 70, .32) 22%, rgba(6, 54, 70, .52) 64%, rgba(6, 54, 70, .80) 100%);
  }

  .recoveryCard--visualize::after{
    background: url(../images/_hero_source.jpg) 64% center / cover no-repeat;
    opacity: .50;
  }

  .recoveryCard--visualize .recoveryList{
    max-width: 100%;
    padding-bottom: 136px;
  }
}

/* --- 2026-03 deep-recovery polish: greener tone + more space around FLOW --- */
.section--deepRecovery .recoveryCard{
  background:
    linear-gradient(180deg, rgba(8, 71, 89, .58), rgba(4, 56, 78, .66));
  border: 1px solid rgba(190, 248, 238, .12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 50px rgba(0,0,0,.14);
}

.recoveryCard--flow{
  margin: 28px 0 30px;
}

@media (max-width: 640px){
  .recoveryCard--flow{
    margin: 20px 0 22px;
  }
}


/* ===== Hero logo lockup refinement ===== */
.heroTitle{
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 18px);
  font-size: var(--fs-hero);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 14px 40px rgba(2,6,23,.22);
  flex-wrap: nowrap;
}

.heroTitle .heroLogoR{
  padding-right: 0;
  width: 0;
  margin-right: 0;
}

.heroTitle .brand__logoImage.hero__logoLarge{
  width: clamp(62px, 8vw, 110px);
  height: clamp(62px, 8vw, 110px);
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: .05em;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}

@media (max-width: 640px){
  .heroTitle{
    gap: 10px;
  }

  .heroTitle .brand__logoImage.hero__logoLarge{
    width: clamp(48px, 14vw, 74px);
    height: clamp(48px, 14vw, 74px);
  }
}


/* --- Green tone for hero and upper cards --- */
body{
  background:
    radial-gradient(circle at 18% 10%, rgba(140,255,232,.10), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(85,230,202,.10), transparent 18%),
    linear-gradient(180deg, #2f4f54 0%, #173f49 18%, #0a2f3f 45%, #062438 100%) !important;
}

.hero,
.topHero,
.fv,
.firstView,
.mv,
.mainVisual{
  position: relative;
  background:
    radial-gradient(circle at 70% 16%, rgba(123,255,231,.08), transparent 18%),
    radial-gradient(circle at 16% 84%, rgba(83,223,196,.08), transparent 20%),
    linear-gradient(180deg, rgba(8,67,80,.46), rgba(5,34,49,.68)) !important;
}

.hero::before,
.topHero::before,
.fv::before,
.firstView::before,
.mv::before,
.mainVisual::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,32,44,.14), rgba(4,32,44,.06) 40%, rgba(4,32,44,.18) 100%),
    radial-gradient(circle at 84% 22%, rgba(194,255,245,.06), transparent 14%);
}

.heroCard,
.fvCard,
.mainVisual__card,
.heroPanel,
.conceptCard,
.campaignCard,
.infoCard,
.panel,
.card{
  background:
    radial-gradient(circle at 82% 18%, rgba(120,255,233,.06), transparent 18%),
    radial-gradient(circle at 20% 82%, rgba(87,220,194,.06), transparent 20%),
    linear-gradient(180deg, rgba(7,63,76,.74), rgba(4,38,54,.88)) !important;
  border: 1px solid rgba(193,247,235,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 50px rgba(0, 18, 24, .16) !important;
}

.concept,
.section--concept,
.conceptWrap,
.conceptPanel{
  background:
    radial-gradient(circle at 86% 18%, rgba(115,255,229,.06), transparent 18%),
    linear-gradient(180deg, rgba(6,57,73,.74), rgba(3,33,48,.90)) !important;
  border: 1px solid rgba(193,247,235,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 42px rgba(0,16,24,.14) !important;
}

.hero h1,
.hero h2,
.hero p,
.topHero h1,
.topHero h2,
.topHero p,
.fv h1,
.fv h2,
.fv p,
.firstView h1,
.firstView h2,
.firstView p,
.mv h1,
.mv h2,
.mv p,
.mainVisual h1,
.mainVisual h2,
.mainVisual p,
.concept h2,
.concept h3,
.concept p,
.section--concept h2,
.section--concept h3,
.section--concept p{
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}

.hero .tag,
.hero .badge,
.topHero .tag,
.fv .tag,
.mv .tag,
.mainVisual .tag,
.panelTag{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.hero .cta,
.hero .btn,
.topHero .cta,
.topHero .btn,
.fv .cta,
.fv .btn,
.mv .cta,
.mv .btn,
.mainVisual .cta,
.mainVisual .btn{
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-width: 640px){
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(140,255,232,.08), transparent 18%),
      linear-gradient(180deg, #345459 0%, #173f49 18%, #0a2f3f 45%, #062438 100%) !important;
  }
}


/* ==== REASONS card: make the card itself wide ==== */
.recoveryGrid--two > .recoveryCard--features{
  grid-column: 1 / -1;
}

.recoveryCard--features{
  width: 100%;
  max-width: none;
}

@media (min-width: 981px){
  .recoveryCard--features{
    display: grid;
    grid-template-columns: minmax(420px, 520px) minmax(360px, 1fr);
    gap: 28px 36px;
    align-items: start;
  }

  .recoveryCard--features .recoveryCard__head{
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .recoveryCard--features .featuresVisual{
    grid-column: 1;
    margin-top: 8px;
  }

  .recoveryCard--features .recoveryTextBlock{
    margin-top: 8px;
  }

  .recoveryCard--features .recoveryTextBlock:first-of-type{
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .recoveryCard--features .recoveryTextBlock:last-of-type{
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}


/* ==== RECOMMEND card: widen from this latest HTML only ==== */
#features .wrap{
  width:min(1280px, calc(100% - 56px));
}

#features .featureGrid{
  grid-template-columns: 1fr;
  max-width: 1220px;
  margin: 18px auto 0;
}

#features .panel--recommend{
  width: 100%;
  max-width: none;
  padding: 18px 18px 20px;
}

#features .recommendList{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 0;
}

#features .recommendItem{
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#features .recommendImage{
  margin-top: 18px;
}

#features .recommendImage__img{
  width: 100%;
  aspect-ratio: 18 / 4.8;
  max-height: 300px;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 900px){
  #features .recommendList{
    grid-template-columns: 1fr;
  }
  #features .recommendImage__img{
    aspect-ratio: 16 / 7.5;
    max-height: 220px;
  }
}


/* ==== CONCEPT section: light gradient background ==== */
#concept .panel,
#concept .conceptPanel,
#concept .panel--concept{
  background:
    radial-gradient(1200px 420px at 100% 0%, rgba(211, 232, 228, 0.72), transparent 55%),
    linear-gradient(135deg, #f6f4ef 0%, #edf5f2 52%, #e7f1ee 100%) !important;
  border: 1px solid rgba(200, 216, 214, 0.9) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
}

#concept .panel *,
#concept .conceptPanel *,
#concept .panel--concept *{
  color: #1e2942 !important;
}

#concept .muted,
#concept .sub,
#concept .eyebrow{
  color: rgba(30, 41, 66, 0.78) !important;
}


.hsA__salon .hsA__kicker,
.hsA__salon .hsA__title,
.hsA__salon .conceptTitle,
.hsA__salon p,
.hsA__salon span{
  color:#1e2942;
}

.hsA__salon .hsA__kicker{
    color: rgba(30, 41, 66, 0.78);
    text-align: center;
}

.hsA__salon .hsA__title{
    color: #1e2942;
    text-align: center;
}

.hsA__salon .conceptTitle{
    color: #1e2942;
    text-align: center;
    font-size: 20px;
}

.hsA__salon p{
  color: rgba(30, 41, 66, 0.88);
}
.wrap.hero__content .hsA__salon .waku {
    text-align: center;
}



/* --- 2026-04 FLOW layout rebuild: number top-left, smaller image below, text on right --- */
.recoveryCard--flow .recoverySteps{
  gap: 18px !important;
}

.recoveryCard--flow .recoveryStep{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas:
    "tag body"
    "media body";
  column-gap: 26px;
  row-gap: 14px;
  align-items: start;
  padding: 20px 22px !important;
  min-height: 0;
}

.recoveryCard--flow .recoveryStep > span{
  grid-area: tag;
  justify-self: start;
  align-self: start;
  min-width: 58px;
  margin: 0;
}

.recoveryCard--flow .recoveryStep__media{
  grid-area: media;
  margin: 0;
  width: 100%;
  max-width: 220px;
  justify-self: start;
}

.recoveryCard--flow .recoveryStep__media img{
    display: block;
    width: 80%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 28px;
}

.recoveryCard--flow .recoveryStep__body{
  grid-area: body;
  align-self: center;
  min-width: 0;
}

.recoveryCard--flow .recoveryStep__body h4{
  margin: 0 0 12px;
  line-height: 1.45;
}

.recoveryCard--flow .recoveryStep__body p{
  margin: 0;
}

@media (max-width: 960px){
  .recoveryCard--flow .recoveryStep{
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 20px;
  }

  .recoveryCard--flow .recoveryStep__media{
    max-width: 180px;
  }
}

@media (max-width: 640px){
  .recoveryCard--flow .recoveryStep{
    grid-template-columns: 1fr;
    grid-template-areas:
      "tag"
      "media"
      "body";
    row-gap: 14px;
  }

  .recoveryCard--flow .recoveryStep__media{
    max-width: 160px;
  }

  .recoveryCard--flow .recoveryStep__body h4{
    margin-bottom: 10px;
  }
}

/* ==== REASONS section white gradient refinement ==== */
.recoveryCard--features{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(168, 225, 221, .30), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(210, 236, 232, .46), transparent 24%),
    radial-gradient(circle at 82% 82%, rgba(162, 214, 223, .20), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(242,248,249,.93) 48%, rgba(232,243,245,.91) 100%);
  border: 1px solid rgba(208, 226, 231, .92);
  box-shadow:
    0 20px 50px rgba(3, 26, 39, .18),
    inset 0 1px 0 rgba(255,255,255,.90);
}
.recoveryCard--features::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(12, 74, 110, .035) 1px, transparent 1.6px);
  background-size: auto, 170px 170px;
  pointer-events:none;
}
.recoveryCard--features > *{
  position: relative;
  z-index: 1;
}
.recoveryCard--features .recoveryCard__head .h3,
.recoveryCard--features .recoveryTextBlock h4,
.recoveryCard--features .featuresColumn span{
    color: #88ABC4 !important;
    text-shadow: none;
}
.recoveryCard--features .body,
.recoveryCard--features .muted,
.recoveryCard--features p{
  color: rgba(24, 54, 75, .82) !important;
}
.recoveryCard--features .panelTag{
  color: #325269;
  border: 1px solid rgba(50, 82, 105, .16);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(233,241,244,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 18px rgba(18, 46, 66, .08);
}
.recoveryCard--features .featuresVisual{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(244,249,250,.26)),
    linear-gradient(135deg, rgba(207, 228, 233, .24), rgba(255,255,255,.10));
  border: 1px solid rgba(184, 211, 218, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 14px 34px rgba(7, 36, 52, .10);
}
.recoveryCard--features .featuresVisual::before{
  background:
    radial-gradient(circle at 14% 18%, rgba(118, 183, 191, .15), transparent 18%),
    radial-gradient(circle at 84% 14%, rgba(174, 216, 221, .18), transparent 18%),
    radial-gradient(circle at 80% 82%, rgba(121, 181, 195, .12), transparent 22%),
    radial-gradient(circle at 28% 72%, rgba(207, 233, 236, .45), transparent 20%);
}
.recoveryCard--features .featuresColumn__frame{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(237,245,247,.70));
  border: 1px solid rgba(88, 129, 153, .26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.90),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 20px rgba(12, 44, 63, .10);
  backdrop-filter: none;
}
.recoveryCard--features .featuresColumn__frame::before{
  border: 1px solid rgba(120, 160, 180, .34);
}
@media (max-width: 980px){
  .recoveryCard--features{
    padding: 24px;
  }
}


/* --- 2026-04 FLOW panel: soft translucent white background --- */
.recoveryCard--flow{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(229,242,246,.10)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.waku {
}

/* ===== 2026-04 tonal rebalance: brighten whole page while keeping deep-sea mood ===== */
body{
  background:
    radial-gradient(circle at 18% 10%, rgba(170,255,239,.13), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(110,238,214,.11), transparent 20%),
    linear-gradient(180deg, #325b61 0%, #1c4954 18%, #0f3950 44%, #0b2d43 100%) !important;
}

body::before{
  opacity: .22;
}

body.theme-dark .header{
  background: rgba(7, 24, 42, .54);
  border-bottom: 1px solid rgba(214, 244, 239, .14);
  backdrop-filter: blur(10px);
}

.hero,
.topHero,
.fv,
.firstView,
.mv,
.mainVisual{
  background:
    radial-gradient(circle at 70% 16%, rgba(148,255,236,.10), transparent 18%),
    radial-gradient(circle at 16% 84%, rgba(103,229,205,.10), transparent 20%),
    linear-gradient(180deg, rgba(12,78,92,.34), rgba(7,41,58,.54)) !important;
}

.hero__video{
  opacity: .76;
  filter: saturate(1.02) contrast(1.04) brightness(1.03);
}

.hero__veil{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(129,245,224,.12), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.28), rgba(2,6,23,.58));
}

.hero__shimmer{
  opacity: .24;
}

body.theme-dark .hero__copy{
  background: linear-gradient(180deg, rgba(8,22,46,.38), rgba(7,18,39,.48));
  border-color: rgba(226,247,244,.18);
  box-shadow:
    0 18px 44px rgba(1, 15, 28, .18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.theme-dark .hero__lead,
body.theme-dark .section__sub,
body.theme-dark .nav a,
body.theme-dark .brand__tag{
  color: rgba(255,255,255,.82);
}

.hero .badges span,
.badges span{
  background: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.22);
  color: rgba(16, 30, 58, .82);
}

.heroCard{
  border-color: rgba(221,248,243,.18);
  box-shadow: 0 24px 56px rgba(1, 16, 28, .18);
}

.heroCard::before{
  background: linear-gradient(90deg, rgba(2,6,23,.68) 0%, rgba(2,6,23,.34) 36%, rgba(2,6,23,0) 72%);
}

.heroCard::after{
  background:
    radial-gradient(520px 360px at 22% 20%, rgba(151,255,234,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(2,6,23,.14));
  opacity: .7;
}

.heroCard__img,
.heroSlider__img.is-active{
  filter: saturate(1.01) contrast(1.02) brightness(1.06);
  opacity: .98;
}

body.theme-dark .section,
body.theme-dark .section--panel,
body.theme-dark .section--dark,
body.theme-dark .section--cta{
  background: rgba(7, 37, 52, .24);
}

@media (max-width: 640px){
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(170,255,239,.10), transparent 18%),
      linear-gradient(180deg, #395f65 0%, #204955 20%, #10384e 48%, #0a2c42 100%) !important;
  }

  .hero__video{
    opacity: .72;
  }

  body.theme-dark .hero__copy{
    background: linear-gradient(180deg, rgba(8,22,46,.42), rgba(7,18,39,.52));
  }
}


/* Slider stability fix */
.heroSlider__track{ overflow:hidden; }
.heroSlider__img{ z-index:1; pointer-events:none; }
.heroSlider__img.is-active{ z-index:2; opacity:1 !important; }


/* ==== Recommend section refinement: woman image subtle, aligned to the right ==== */
#features .panel--recommend{
  position: relative;
  isolation: isolate;
  padding: 18px;
  overflow: hidden;
}

#features .panel--recommend::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  background:
    linear-gradient(90deg,
      rgba(6,33,43,.94) 0%,
      rgba(6,33,43,.90) 34%,
      rgba(6,33,43,.82) 62%,
      rgba(6,33,43,.64) 100%),
    url('../images/bk.png') right -6px center / auto 118% no-repeat;
  opacity: .52;
  pointer-events:none;
  z-index: 0;
}

#features .panel--recommend > *{
  position: relative;
  z-index: 1;
}

#features .recommendList{
  gap: 16px 16px;
}

#features .recommendItem{
  min-height: 74px;
  padding: 18px 18px 18px 58px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

#features .recommendItem::before{
  left: 16px;
}

#features .recommendImage{
  display:none !important;
}

@media (max-width: 900px){
  #features .panel--recommend::after{
    inset: 12px;
    background:
      linear-gradient(180deg,
        rgba(6,33,43,.90) 0%,
        rgba(6,33,43,.80) 55%,
        rgba(6,33,43,.68) 100%),
      url('../images/bk.png') right -8px bottom / auto 96% no-repeat;
    opacity: .40;
  }

  #features .recommendItem{
    min-height: 68px;
    padding: 16px 14px 16px 54px;
  }
}


/* --- 2026-04 visualize readability tune: stronger text contrast on full-photo panel --- */
.recoveryCard--visualize::before{
  background:
    radial-gradient(circle at 16% 18%, rgba(225, 249, 255, .14), transparent 18%),
    radial-gradient(circle at 62% 16%, rgba(255, 244, 227, .12), transparent 16%),
    radial-gradient(circle at 82% 74%, rgba(160, 255, 233, .10), transparent 18%),
    linear-gradient(90deg, rgba(4, 45, 58, .96) 0%, rgba(4, 45, 58, .92) 24%, rgba(4, 45, 58, .76) 42%, rgba(4, 45, 58, .44) 60%, rgba(4, 45, 58, .26) 74%, rgba(4, 45, 58, .22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 36, 51, .18) 100%);
}

.recoveryCard--visualize .recoveryCard__head,
.recoveryCard--visualize .recoveryList{
  position: relative;
  z-index: 1;
}

.recoveryCard--visualize .recoveryCard__head{
    display: inline-block;
    max-width: min(560px, 64%);
    padding: 18px 22px 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(6, 57, 73, .66), rgba(6, 57, 73, .36));
    box-shadow: 0 18px 40px rgba(0, 22, 30, .18);
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    backdrop-filter: blur(2px);
}

.recoveryCard--visualize .h3{
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 14px rgba(0, 18, 28, .48);
}

.recoveryCard--visualize .recoveryList{
    max-width: 85%;
    margin-top: 10px;
    padding: 16px 24px 26px 36px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(5, 54, 69, .58), rgba(5, 54, 69, .28));
    box-shadow: 0 16px 36px rgba(0, 20, 28, .14);
    backdrop-filter: blur(2px);
}

.recoveryCard--visualize .recoveryList li{
    color: rgba(255,255,255,.98);
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0, 16, 24, .48);
    max-width: none;
    margin-left: auto;
    margin-bottom: 0px;
}

@media (max-width: 960px){
  .recoveryCard--visualize::before{
    background:
      radial-gradient(circle at 16% 18%, rgba(225, 249, 255, .12), transparent 18%),
      linear-gradient(90deg, rgba(4, 45, 58, .96) 0%, rgba(4, 45, 58, .90) 34%, rgba(4, 45, 58, .72) 52%, rgba(4, 45, 58, .42) 72%, rgba(4, 45, 58, .24) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 36, 51, .18) 100%);
  }

  .recoveryCard--visualize .recoveryCard__head{
    max-width: 72%;
    padding: 16px 18px 10px;
  }

  .recoveryCard--visualize .recoveryList{
    max-width: 68%;
    padding: 14px 20px 22px 30px;
  }
}

@media (max-width: 640px){
  .recoveryCard--visualize .recoveryCard__head,
  .recoveryCard--visualize .recoveryList{
    max-width: 100%;
  }

  .recoveryCard--visualize .recoveryCard__head{
    padding: 14px 16px 8px;
    border-radius: 18px;
  }

  .recoveryCard--visualize .recoveryList{
    padding: 14px 18px 124px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(4, 45, 58, .56), rgba(4, 45, 58, .32));
  }
}


/* ===== 2026-04 concept card soft translucent white fix ===== */
.hsA__salon{
  background:
    radial-gradient(1200px 420px at 100% 0%, rgba(211, 232, 228, 0.46), transparent 55%),
    linear-gradient(135deg, rgba(246,244,239,.78) 0%, rgba(237,245,242,.72) 52%, rgba(231,241,238,.66) 100%) !important;
  border:1px solid rgba(214, 228, 228, 0.42) !important;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hsA__salon .hsA__kicker{
    color: rgba(0,27,55,0.82) !important;
}

.hsA__salon .hsA__title,
.hsA__salon .conceptTitle,
.hsA__salon p,
.hsA__salon span,
.wrap.hero__content .hsA__salon .waku{
  color:#3a536e !important;
}

.hsA__salon .conceptTitle{
  text-shadow:none;
}

/* ==== 2026-04 REASONS section: brighter, more positive visual without changing structure ==== */
.recoveryCard--features{
  background:
    radial-gradient(circle at 12% 14%, rgba(190, 236, 230, .26), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(221, 241, 235, .18), transparent 22%),
    linear-gradient(180deg, rgba(14, 73, 102, .84) 0%, rgba(8, 61, 89, .90) 42%, rgba(6, 57, 84, .94) 100%) !important;
  border: 1px solid rgba(162, 219, 226, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 56px rgba(1, 24, 38, .18) !important;
}

.recoveryCard--features::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(167, 229, 236, .06) 1px, transparent 1.7px) !important;
  background-size: auto, 170px 170px !important;
  opacity: .8;
}

.recoveryCard--features .recoveryCard__head .h3{
  color: rgba(226, 240, 245, .92) !important;
}

.recoveryCard--features .recoveryTextBlock h4{
  color: #dceef6 !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

.recoveryCard--features .body,
.recoveryCard--features .muted,
.recoveryCard--features p{
  color: rgba(232, 242, 246, .88) !important;
}

.recoveryCard--features .featuresVisual{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(226,241,246,.20)),
    linear-gradient(135deg, rgba(203, 230, 236, .24), rgba(255,255,255,.10)) !important;
  border: 1px solid rgba(203, 229, 236, .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 16px 34px rgba(2, 30, 46, .12) !important;
}

.recoveryCard--features .featuresColumn__frame{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,246,249,.84)) !important;
  border: 1px solid rgba(170, 208, 222, .54) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.92),
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 22px rgba(8, 43, 64, .12) !important;
}

.recoveryCard--features .featuresColumn__frame::before{
  border: 1px solid rgba(255,255,255,.74) !important;
}

.recoveryCard--features .featuresColumn span{
  color: #2e4e6f !important;
  text-shadow: none !important;
}

/* badges before the two headings */
.recoveryCard--features .recoveryTextBlock:first-of-type h4:first-of-type::before,
.recoveryCard--features .recoveryTextBlock:first-of-type h4 + p + h4::before{
  content: "";
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 20px rgba(3, 28, 45, .18);
  border: 1px solid rgba(255,255,255,.26);
  position: relative;
}

.recoveryCard--features .recoveryTextBlock:first-of-type h4:first-of-type::before{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.52), transparent 22%),
    linear-gradient(135deg, #90e7df 0%, #5fcfd7 52%, #368bc7 100%);
}

.recoveryCard--features .recoveryTextBlock:first-of-type h4 + p + h4::before{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.52), transparent 22%),
    linear-gradient(135deg, #ffe0a6 0%, #ffc46a 45%, #ff9b56 100%);
}

.recoveryCard--features .recoveryTextBlock:first-of-type h4:first-of-type::after,
.recoveryCard--features .recoveryTextBlock:first-of-type h4 + p + h4::after{
  font-size: 19px;
  line-height: 1;
  margin-left: -56px;
  width: 42px;
  text-align: center;
  flex: 0 0 0;
  position: relative;
  z-index: 1;
}

.recoveryCard--features .recoveryTextBlock:first-of-type h4:first-of-type::after{
  content: "✦";
  color: #123452;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.recoveryCard--features .recoveryTextBlock:first-of-type h4 + p + h4::after{
  content: "♨";
  color: #6a3b10;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}


/* explicit badges for reasons headings */
.recoveryCard--features .recoveryTextBlock h4{
  display:flex;
  align-items:center;
  gap:14px;
}
.recoveryCard--features .reasonBadge{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 20px rgba(3,28,45,.18);
  border:1px solid rgba(255,255,255,.26);
}
.recoveryCard--features .reasonBadge--star{
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.52), transparent 22%), linear-gradient(135deg, #90e7df 0%, #5fcfd7 52%, #368bc7 100%);
  color:#123452;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.recoveryCard--features .reasonBadge--footbath{
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.52), transparent 22%), linear-gradient(135deg, #ffe0a6 0%, #ffc46a 45%, #ff9b56 100%);
  color:#6a3b10;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}


/* Fix company section readability on white card */
body.theme-dark #company .access__info,
body.theme-dark #company .access__map{
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(241,248,250,.88) 100%) !important;
  border: 1px solid rgba(167, 205, 220, .55) !important;
  box-shadow: 0 18px 44px rgba(6, 42, 68, .16) !important;
}
body.theme-dark #company .access__name{ color:#213b5a !important; }
body.theme-dark #company .access__meta{ color:rgba(33,59,90,.72) !important; }
body.theme-dark #company .dl > div{ border-bottom:1px solid rgba(33,59,90,.12) !important; }
body.theme-dark #company .dl dt{ color:rgba(33,59,90,.78) !important; }
body.theme-dark #company .dl dd{ color:rgba(28,49,76,.90) !important; }
body.theme-dark #company .linkbtn{
  background: rgba(255,255,255,.72) !important;
  border:1px solid rgba(33,59,90,.18) !important;
  color:#213b5a !important;
  box-shadow: 0 6px 18px rgba(6,42,68,.08) !important;
}
body.theme-dark #company .linkbtn:hover{ background: rgba(255,255,255,.9) !important; }


/* remove only the last arrow under feedback step */
.recoveryCard--flow .recoveryStep:last-child::after{
  display:none !important;
  content:none !important;
}


/* latest fix: remove white margin/card around company map only */
body.theme-dark #company .access__map{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.theme-dark #company .access__map .mapdummy{
  background: transparent !important;
  border: none !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  height: 460px !important;
  box-shadow: none !important;
}
body.theme-dark #company .access__map iframe{
  display:block;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  border-radius: 22px !important;
}
@media (max-width: 980px){
  body.theme-dark #company .access__map .mapdummy{
    height: 380px !important;
  }
}
@media (max-width: 640px){
  .recoveryCard--visualize .recoveryList{
    padding-bottom: 20px !important;
  }
}@media (max-width: 640px){
  .recoveryStep{
    text-align: center;
  }

  .recoveryStep__visual{
    display: inline-block;
    margin: 0 auto 18px;
  }

  .recoveryStep__title,
  .recoveryStep__text{
    text-align: left;
  }
}@media (max-width: 640px){
  .recoveryStep__visual{
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .recoveryStep__visual img{
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 640px){
  .conceptSection p{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 640px){
  .recoveryCard--flow .recoveryStep{
    justify-items: center !important;
  }

  .recoveryCard--flow .recoveryStep__media{
    width: 100%;
    max-width: 160px;
    margin: 0 auto 18px !important;
    justify-self: center !important;
  }

  .recoveryCard--flow .recoveryStep__media img{
    display: block;
    width: 100%;
    margin: 0 auto !important;
  }

  .recoveryCard--flow .recoveryStep__body{
    width: 100%;
  }
}

/* ===== Luxury trial polish 2026-05-24 ===== */
.heroTitle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.35em;
  font-size: clamp(56px, 9vw, 132px);
  line-height:.92;
  letter-spacing:.015em;
  font-weight: 500;
}
.conceptLuxury{
  max-width: 920px;
  margin: 34px auto 0;
  text-align: center;
  text-decoration: none;
}
.conceptLuxury .conceptTitle{
  font-size: clamp(22px, 3vw, 34px) !important;
  letter-spacing: .08em;
  margin: 10px 0 18px !important;
  color: #203b58 !important;
}
.conceptLuxury .waku{
  line-height: 2.05 !important;
  font-size: clamp(14px, 1.55vw, 17px) !important;
}
body.theme-dark .btn--primary,
.btn--primary{
  background: linear-gradient(135deg, #e7d7a3 0%, #c6a968 48%, #7b6333 100%) !important;
  color: #071923 !important;
  border: 1px solid rgba(255, 238, 177, .42) !important;
  box-shadow: 0 14px 30px rgba(198, 169, 104, .18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
body.theme-dark .btn--primary:hover,
.btn--primary:hover{
  filter: brightness(1.04) saturate(1.03);
  transform: translateY(-1px);
}
.reserveBeautyBtn__inner{
  background: linear-gradient(180deg, rgba(16,31,44,.96), rgba(5,19,31,.96)) !important;
  border-color: rgba(226, 206, 145, .55) !important;
  color: #f5e7b8 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.reserveBeautyBtn__text{
  letter-spacing:.12em !important;
}
.badges span{
  border-color: rgba(229, 210, 155, .36) !important;
  color: rgba(249, 235, 189, .92) !important;
  background: rgba(2, 14, 24, .36) !important;
}
.luxuryPrivacy{
  background:
    radial-gradient(circle at 20% 0%, rgba(228, 210, 154, .13), transparent 31%),
    radial-gradient(circle at 80% 20%, rgba(137, 213, 224, .10), transparent 30%),
    linear-gradient(180deg, #061827 0%, #092334 100%) !important;
  color: #f4f0e5;
}
.privacyGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.privacyCard{
  position:relative;
  min-height: 238px;
  padding: 30px 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border: 1px solid rgba(231, 215, 163, .25);
  box-shadow: 0 22px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}
.privacyCard::after{
  content:"";
  position:absolute;
  inset:auto -20% -44% auto;
  width: 190px;
  height: 190px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(226,207,145,.16), transparent 66%);
  pointer-events:none;
}
.privacyCard__num{
  display:inline-flex;
  width: 48px;
  height: 48px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  margin-bottom: 18px;
  font-family: Georgia, 'Times New Roman', serif;
  color:#0b1f2e;
  background: linear-gradient(135deg, #f0e4bd, #b99d5e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 24px rgba(0,0,0,.16);
}
.privacyCard .h3{
  color:#fff7dc !important;
  letter-spacing:.04em;
}
.privacyCard .body,
.privacyCard .muted{
  color: rgba(245, 241, 226, .78) !important;
  line-height: 1.9;
}
.reservationButtons{
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 24px;
}
.access__privateNote{
  display:inline-block;
  margin-top: 4px;
  font-size: .93em;
}
#rental .sectionHero__img,
.ctaBanner__img{
  filter: saturate(.88) contrast(1.04);
}
@media (max-width: 860px){
  .privacyGrid{ grid-template-columns: 1fr; }
  .privacyCard{ min-height:auto; }
  .heroTitle{ font-size: clamp(48px, 17vw, 90px); }
  .conceptLuxury{ margin-top: 24px; }
}


/* ===== Final color correction 2026-05-24 =====
   User requested: revert green tone to BLACK + DEEP NAVY.
   Keep gold menu / luxury accent.
   This block intentionally overrides earlier teal/green experiments.
   ============================================ */
:root{
  --accent:#0f2743 !important;
  --accent2:#173455 !important;
  --navy:#081425 !important;
}
body,
body.theme-dark{
  background:
    radial-gradient(circle at 18% 8%, rgba(212,169,98,.12), transparent 16%),
    radial-gradient(circle at 82% 16%, rgba(56,84,128,.20), transparent 18%),
    linear-gradient(180deg, #050608 0%, #081321 22%, #0b1728 56%, #05080e 100%) !important;
  color: rgba(245, 243, 236, .94) !important;
}
body::before{ opacity:.12 !important; }

body.theme-dark .header,
.header{
  background: rgba(6, 10, 17, .78) !important;
  border-bottom: 1px solid rgba(213, 191, 140, .16) !important;
  backdrop-filter: blur(14px);
}
.brand__name,
body.theme-dark .brand__name{ color: #f5e7b8 !important; }
.brand__tag,
body.theme-dark .brand__tag,
.nav a,
body.theme-dark .nav a{ color: rgba(238, 241, 248, .76) !important; }
.nav a:hover,
body.theme-dark .nav a:hover{ color:#fff !important; background: rgba(255,255,255,.05) !important; }
.navToggle,
body.theme-dark .navToggle{
  background: rgba(12, 18, 30, .85) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.hero,
.topHero,
.fv,
.firstView,
.mv,
.mainVisual,
body.theme-dark .hero{
  background:
    radial-gradient(circle at 72% 18%, rgba(26, 58, 92, .40), transparent 19%),
    radial-gradient(circle at 16% 82%, rgba(198, 166, 105, .08), transparent 20%),
    linear-gradient(180deg, rgba(7, 13, 23, .34), rgba(6, 12, 21, .72)) !important;
}
.hero__video{ opacity:.70 !important; filter: saturate(.88) contrast(1.02) brightness(.92) !important; }
.hero__veil,
body.theme-dark .hero__veil{
  background:
    radial-gradient(960px 440px at 18% 8%, rgba(20, 40, 68, .34), transparent 60%),
    linear-gradient(180deg, rgba(3,6,12,.22), rgba(3,6,12,.68)) !important;
}
.hero__copy,
body.theme-dark .hero__copy{
  background: linear-gradient(180deg, rgba(8,12,19,.72), rgba(10,18,31,.78)) !important;
  border: 1px solid rgba(228, 210, 165, .14) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.hero__title,
.hero__sub,
.hero__lead,
.hero h1,.hero h2,.hero p,
body.theme-dark .hero__title,
body.theme-dark .hero__sub,
body.theme-dark .hero__lead{ color:#f4f1e8 !important; text-shadow: 0 4px 18px rgba(0,0,0,.38) !important; }
.badges span,
.hero .badges span,
body.theme-dark .badges span{
  background: rgba(10,16,26,.82) !important;
  border: 1px solid rgba(228,210,165,.18) !important;
  color: rgba(247, 240, 221, .92) !important;
}
.heroCard,
.panel,
.card,
.infoCard,
.conceptCard,
.campaignCard,
body.theme-dark .heroCard,
body.theme-dark .panel,
body.theme-dark .card{
  background:
    radial-gradient(circle at 82% 16%, rgba(35, 63, 99, .22), transparent 22%),
    radial-gradient(circle at 16% 84%, rgba(198, 166, 105, .08), transparent 22%),
    linear-gradient(180deg, rgba(10,16,27,.90), rgba(12,21,36,.96)) !important;
  border: 1px solid rgba(231, 216, 182, .10) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.heroCard::before{ background: linear-gradient(90deg, rgba(4,6,10,.74) 0%, rgba(4,6,10,.28) 40%, rgba(4,6,10,0) 72%) !important; }
.heroCard::after{ background: radial-gradient(520px 360px at 22% 20%, rgba(34, 63, 98, .24), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(2,6,23,.16)) !important; }

#concept,
.conceptLuxury,
.hsA__salon{
  position: relative;
  padding: 56px 24px !important;
  margin: 24px auto 0 !important;
  max-width: 1040px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(198, 166, 105, .08), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(34, 64, 101, .26), transparent 24%),
    linear-gradient(180deg, rgba(10,16,27,.92), rgba(12,20,35,.98)) !important;
  border: 1px solid rgba(228, 210, 165, .12) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.22) !important;
}
#concept .hsA__kicker,
#concept .hsA__title,
#concept .conceptTitle,
#concept p,
#concept span,
.conceptLuxury .conceptTitle,
.conceptLuxury .waku,
.conceptLuxury .conceptTitle,
body.theme-dark .conceptLuxury .conceptTitle,
body.theme-dark .conceptLuxury .waku{
  color: #f3efe4 !important;
}
#concept .hsA__kicker{ color: rgba(244, 231, 184, .74) !important; letter-spacing:.18em; }
#concept .conceptTitle{ color:#f6e8be !important; }
#concept .waku{ color: rgba(245, 241, 226, .84) !important; }

.section,
.section--panel,
.section--dark,
.section--paper,
.section--cta,
body.theme-dark .section,
body.theme-dark .section--panel,
body.theme-dark .section--dark,
body.theme-dark .section--paper,
body.theme-dark .section--cta{
  background: transparent !important;
}
.sectionHead .h2,
.sectionHead h2,
.h2,.h3,
body.theme-dark .sectionHead .h2,
body.theme-dark .sectionHead h2,
body.theme-dark .h2,
body.theme-dark .h3{ color:#f4f1e8 !important; }
.sectionHead .sub,
.sub,
.muted,
body.theme-dark .sectionHead .sub,
body.theme-dark .sub,
body.theme-dark .muted{ color: rgba(235, 238, 246, .70) !important; }

#features .panel--recommend,
#campaign .panel,
#school .panel,
#rental .panel,
#company .panel,
.recoveryCard,
.priceCard,
.priceBlock,
.priceItem,
.recoveryCard--features,
.recoveryCard--flow,
body.theme-dark #features .panel--recommend,
body.theme-dark .recoveryCard,
body.theme-dark .priceCard,
body.theme-dark .recoveryCard--features,
body.theme-dark .recoveryCard--flow{
  background:
    radial-gradient(circle at 82% 14%, rgba(35, 63, 99, .18), transparent 20%),
    radial-gradient(circle at 18% 86%, rgba(198, 166, 105, .06), transparent 18%),
    linear-gradient(180deg, rgba(10,16,27,.90), rgba(12,20,35,.98)) !important;
  border: 1px solid rgba(228, 210, 165, .12) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: none !important;
}
#features .recommendItem,
.recoveryCard p,
.recoveryCard li,
.priceCard p,
.priceCard li,
.priceItem,
#company p,
#company li,
#campaign p,
#school p,
#rental p,
body.theme-dark #features .recommendItem,
body.theme-dark .recoveryCard p,
body.theme-dark .priceCard p{ color: rgba(243, 241, 234, .86) !important; }
#features .recommendItem{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(228,210,165,.10) !important;
}
#features .recommendImage__img,
.recoveryStep__media img,
.featuresVisual,
body.theme-dark .featuresVisual{
  border: 1px solid rgba(228,210,165,.10) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.18) !important;
}
.recoveryCard--features .recoveryCard__head .h3,
.recoveryCard--features .recoveryTextBlock h4,
.recoveryCard--features .featuresColumn span,
.recoveryCard--flow h4,
.recoveryStep h4,
.priceCard .h3,
.priceCard h3,
#campaign .h3,
#company .h3{
  color: #f6e8be !important;
}
.recoveryCard--features .body,
.recoveryCard--features .muted,
.recoveryCard--features p,
.recoveryCard--flow p,
.recoveryCard--flow .muted,
body.theme-dark .recoveryCard--features p,
body.theme-dark .recoveryCard--flow p{ color: rgba(245, 241, 226, .82) !important; }
.panelTag,
.recoveryCard--features .panelTag{
  color: #f6e8be !important;
  border: 1px solid rgba(228,210,165,.16) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: none !important;
}
.featuresColumn__frame,
.recoveryCard--features .featuresColumn__frame,
body.theme-dark .recoveryCard--features .featuresColumn__frame{
  background: linear-gradient(180deg, rgba(14,22,36,.92), rgba(15,24,39,.98)) !important;
  border: 1px solid rgba(228,210,165,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.16) !important;
}
.featuresColumn__frame::before,
.recoveryCard--features .featuresColumn__frame::before{ border-color: rgba(228,210,165,.12) !important; }

.luxuryPrivacy,
body.theme-dark .luxuryPrivacy{
  background:
    radial-gradient(circle at 20% 0%, rgba(228, 210, 154, .10), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(40, 66, 100, .24), transparent 30%),
    linear-gradient(180deg, #05080e 0%, #0a1321 100%) !important;
}
.privacyCard{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(231, 215, 163, .18) !important;
}

body.theme-dark .btn--ghost,
.btn--ghost,
.reserveFloatBtn,
.reserveBeautyBtn__inner{
  background: linear-gradient(180deg, rgba(8,16,28,.98), rgba(5,10,18,.98)) !important;
  color: #f5e7b8 !important;
  border: 1px solid rgba(228,210,165,.30) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.theme-dark .btn--ghost:hover,
.btn--ghost:hover,
.reserveFloatBtn:hover,
.reserveBeautyBtn__inner:hover{ filter: brightness(1.06); }
.reserveFloatBtn:focus-visible{ outline: 3px solid rgba(228,210,165,.26) !important; }

.access__name,
.access__privateNote,
body.theme-dark #company .access__name,
body.theme-dark .access__privateNote{ color:#f6e8be !important; }
#company .access__map,
#company iframe,
#company img{
  border-radius: 18px;
}
#company .access__box,
#company .companyCard,
body.theme-dark #company .access__box,
body.theme-dark #company .companyCard{
  background: linear-gradient(180deg, rgba(10,16,27,.90), rgba(12,20,35,.98)) !important;
  border: 1px solid rgba(228,210,165,.12) !important;
}

@media (max-width: 640px){
  body,
  body.theme-dark{
    background:
      radial-gradient(circle at 50% 0%, rgba(212,169,98,.10), transparent 18%),
      linear-gradient(180deg, #050608 0%, #081321 26%, #0b1728 58%, #05080e 100%) !important;
  }
  #concept,
  .conceptLuxury,
  .hsA__salon{ padding: 40px 18px !important; border-radius: 22px; }
}


/* ===== Campaign two-column rebalance 2026-05-24 =====
   Make the 2 cards wider and more naturally integrated with page width.
   ============================================ */
#campaign .wrap{
  width: min(1160px, calc(100% - 56px)) !important;
}
#campaign .sectionHead{
  max-width: 920px;
  margin: 0 auto 28px !important;
}
#campaign .campaignGlow{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: stretch;
}
#campaign .campaignGlowCard{
  min-height: 292px;
  padding: 26px 24px 22px !important;
  border-radius: 24px;
}
#campaign .campaignGlowInner{
  height: 100%;
  display: flex;
  flex-direction: column;
}
#campaign .campaignGlowTop{
  margin-bottom: 18px;
}
#campaign .campaignBig{
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.04;
  margin: 0 0 12px !important;
}
#campaign .campaignGlowCard .h3{
  margin-bottom: 10px;
}
#campaign .campaignText{
  font-size: 15px;
  line-height: 2.0;
  max-width: 34ch;
}
#campaign .campaignCtaRow{
  margin-top: 26px !important;
}

/* keep a calm 2-column layout until tablet, then stack */
@media (max-width: 900px){
  #campaign .wrap{
    width: min(100%, calc(100% - 32px)) !important;
  }
  #campaign .campaignGlow{
    max-width: 100%;
    gap: 18px !important;
  }
  #campaign .campaignGlowCard{
    min-height: 276px;
    padding: 22px 20px 20px !important;
  }
}
@media (max-width: 760px){
  #campaign .campaignGlow{
    grid-template-columns: 1fr !important;
    max-width: 620px;
  }
  #campaign .campaignGlowCard{
    min-height: auto;
  }
  #campaign .campaignText{
    max-width: none;
  }
}


/* ===== Hero update 2026-05-24 =====
   - Background sea switched to uploaded ocean video
   - RESPA logotype reduced so it fits inside left panel
   - Right hero slider shortened to align better with left copy panel
   ============================================ */
.hero__grid{
  align-items: stretch !important;
  grid-template-columns: minmax(420px, 1.02fr) minmax(460px, .98fr) !important;
  gap: 30px !important;
}
.hero__copy,
body.theme-dark .hero__copy{
  align-self: stretch;
  padding: 28px 30px 26px !important;
}
.hero__title{ margin-bottom: 16px !important; }
.heroTitle{
  display: inline-flex;
  align-items: center !important;
  gap: clamp(10px, 1vw, 16px) !important;
  font-size: clamp(42px, 6vw, 92px) !important;
  line-height: .95 !important;
  letter-spacing: .01em !important;
  max-width: 100%;
  white-space: nowrap;
}
.heroTitle .brand__logoImage.hero__logoLarge{
  width: clamp(52px, 5.6vw, 82px) !important;
  height: clamp(52px, 5.6vw, 82px) !important;
  margin-top: 0 !important;
}
.hero__lead{
  font-size: clamp(16px, 1.2vw, 17px) !important;
  line-height: 1.9 !important;
  max-width: 46ch !important;
}
.hero__visual{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
}
.heroCard,
body.theme-dark .heroCard{
  width: min(620px, 100%) !important;
  height: 100%;
  max-height: 570px;
  min-height: 520px;
  border-radius: 26px !important;
}
.heroSlider__track{
  height: 100% !important;
  aspect-ratio: auto !important;
}
.heroCard__img,
.heroSlider__img,
.heroSlider__img.is-active{
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center center !important;
}
.hero__video{
  opacity: .82 !important;
  filter: saturate(.88) contrast(1.02) brightness(.88) !important;
}
.hero__veil,
body.theme-dark .hero__veil{
  background:
    radial-gradient(960px 420px at 14% 10%, rgba(9, 34, 64, .38), transparent 60%),
    linear-gradient(180deg, rgba(2, 7, 14, .18), rgba(2, 7, 14, .62)) !important;
}
@media (max-width: 1100px){
  .hero__grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .heroCard,
  body.theme-dark .heroCard{
    max-height: 530px;
    min-height: 490px;
  }
  .heroTitle{
    font-size: clamp(38px, 5vw, 74px) !important;
  }
}
@media (max-width: 860px){
  .hero__grid{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .hero__visual{
    height: auto;
  }
  .heroCard,
  body.theme-dark .heroCard{
    width: min(560px, 100%) !important;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .heroSlider__track{
    aspect-ratio: 5 / 4.4 !important;
    height: auto !important;
  }
  .heroTitle{
    font-size: clamp(40px, 12vw, 72px) !important;
    white-space: normal;
  }
}
@media (max-width: 640px){
  .hero__copy,
  body.theme-dark .hero__copy{
    padding: 22px 20px 22px !important;
  }
  .heroTitle{
    font-size: clamp(36px, 12vw, 58px) !important;
    gap: 8px !important;
  }
  .heroTitle .brand__logoImage.hero__logoLarge{
    width: clamp(42px, 12vw, 64px) !important;
    height: clamp(42px, 12vw, 64px) !important;
  }
  .hero__lead{
    font-size: 15px !important;
  }
}


/* ===== Visualize panel navy correction 2026-05-24 =====
   User requested the greenish translucent blocks here to shift to navy.
   ============================================ */
.recoveryCard--visualize,
body.theme-dark .recoveryCard--visualize{
  background:
    linear-gradient(135deg, rgba(10, 24, 42, .94) 0%, rgba(11, 30, 52, .90) 40%, rgba(8, 22, 41, .95) 100%) !important;
}
.recoveryCard--visualize::before,
body.theme-dark .recoveryCard--visualize::before{
  background:
    radial-gradient(circle at 16% 18%, rgba(225, 239, 255, .10), transparent 18%),
    radial-gradient(circle at 62% 16%, rgba(255, 244, 227, .10), transparent 16%),
    radial-gradient(circle at 82% 74%, rgba(160, 190, 255, .08), transparent 18%),
    linear-gradient(90deg, rgba(6, 20, 36, .95) 0%, rgba(6, 20, 36, .90) 24%, rgba(6, 20, 36, .74) 42%, rgba(6, 20, 36, .42) 60%, rgba(6, 20, 36, .24) 74%, rgba(6, 20, 36, .22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 12, 24, .22) 100%) !important;
}
.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head{
  background: linear-gradient(180deg, rgba(11, 34, 58, .76), rgba(11, 34, 58, .46)) !important;
  box-shadow: 0 18px 40px rgba(0, 10, 20, .22) !important;
}
.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  background: linear-gradient(180deg, rgba(10, 36, 58, .64), rgba(10, 36, 58, .36)) !important;
  box-shadow: 0 16px 36px rgba(0, 10, 20, .18) !important;
}
.recoveryCard--visualize .panelTag,
body.theme-dark .recoveryCard--visualize .panelTag{
  background: rgba(9, 24, 41, .82) !important;
  color: #f3e7bb !important;
  border-color: rgba(228, 210, 165, .22) !important;
}
@media (max-width: 960px){
  .recoveryCard--visualize::before,
  body.theme-dark .recoveryCard--visualize::before{
    background:
      radial-gradient(circle at 16% 18%, rgba(225, 239, 255, .10), transparent 18%),
      linear-gradient(90deg, rgba(6, 20, 36, .95) 0%, rgba(6, 20, 36, .88) 34%, rgba(6, 20, 36, .70) 52%, rgba(6, 20, 36, .42) 72%, rgba(6, 20, 36, .22) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .00) 34%, rgba(2, 12, 24, .22) 100%) !important;
  }
}
@media (max-width: 640px){
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    background: linear-gradient(180deg, rgba(8, 24, 42, .62), rgba(8, 24, 42, .40)) !important;
  }
}


/* ===== Access maps restore 2026-05-24 =====
   Add uploaded guide map + Google Map embed, aligned with premium navy theme.
   ============================================ */
#company .access{
  grid-template-columns: minmax(440px, .92fr) minmax(520px, 1.08fr) !important;
  gap: 28px !important;
  align-items: start;
}
#company .access__info,
body.theme-dark #company .access__info{
  background: linear-gradient(180deg, rgba(238,243,246,.94), rgba(224,232,237,.92)) !important;
  border: 1px solid rgba(228, 210, 165, .18) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.24) !important;
}
#company .accessMaps,
#company .access__map,
body.theme-dark #company .accessMaps,
body.theme-dark #company .access__map{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0;
}
#company .accessGuideMap,
#company .googleMapEmbed{
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(228, 210, 165, .18);
  box-shadow: 0 24px 54px rgba(0,0,0,.24);
}
#company .accessGuideMap img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.1;
  height: auto;
  object-fit: cover;
  object-position: center;
}
#company .googleMapEmbed{
  height: 340px;
}
#company .googleMapEmbed iframe{
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 22px !important;
}
#company .mapOpenBtn{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e7d7a3 0%, #c6a968 48%, #7b6333 100%);
  color: #071923 !important;
  border: 1px solid rgba(255, 238, 177, .42);
  box-shadow: 0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.38);
  font-size: 13px;
  letter-spacing: .06em;
}
#company .mapOpenBtn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
@media (max-width: 1100px){
  #company .access{
    grid-template-columns: 1fr !important;
  }
  #company .accessMaps,
  #company .access__map{
    max-width: 760px;
    width: 100%;
  }
}
@media (max-width: 640px){
  #company .accessGuideMap img{
    aspect-ratio: 16 / 9.4;
  }
  #company .googleMapEmbed{
    height: 300px;
  }
  #company .mapOpenBtn{
    justify-self: stretch;
  }
}


/* ===== Rental salon price presentation 2026-05-24 =====
   Add elegant 3-hour flat-rate package block.
   ============================================ */
#rental .sub{
  max-width: 920px;
}
.rentalPriceBanner{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: min(980px, 100%);
  margin: 20px auto 18px;
  padding: 24px 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(228,210,165,.10), transparent 22%),
    linear-gradient(180deg, rgba(10,18,31,.92), rgba(9,17,30,.98));
  border: 1px solid rgba(228,210,165,.18);
  box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.rentalPriceBanner::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(228,210,165,.10), transparent 34%, rgba(42,70,110,.14));
  pointer-events:none;
}
.rentalPriceBanner > *{
  position: relative;
  z-index: 1;
}
.rentalPriceBanner__label{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f3e7bb;
  border: 1px solid rgba(228,210,165,.20);
  background: rgba(255,255,255,.035);
}
.rentalPriceBanner h3{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: .08em;
  color: #f7f1df;
}
.rentalPriceBanner p{
  margin: 0;
  line-height: 1.9;
  color: rgba(243,241,234,.76) !important;
}
.rentalPriceBanner__price{
  min-width: 190px;
  padding: 18px 24px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(231,215,163,.96), rgba(183,151,83,.92));
  color: #07131f;
  box-shadow: 0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.rentalPriceBanner__price span{
  display:block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .18em;
}
.rentalPriceBanner__price strong{
  display:block;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: .02em;
  font-family: Georgia, 'Times New Roman', serif;
}
#rental .panel .list li::before{
  background: #cdb879 !important;
  box-shadow: 0 0 0 4px rgba(205,184,121,.16) !important;
}
@media (max-width: 760px){
  .rentalPriceBanner{
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  .rentalPriceBanner__price{
    width: 100%;
    min-width: 0;
  }
}


/* ===== SP luxury refinement 2026-05-24 =====
   Mobile-first polish so the site still feels luxurious on smartphones.
   ============================================ */
@media (max-width: 860px){
  html, body{
    overflow-x: hidden;
  }
  .wrap,
  .narrow,
  #campaign .wrap,
  #company .wrap{
    width: min(100%, calc(100% - 32px)) !important;
  }
  .section,
  .section--panel,
  .section--paper,
  .section--dark,
  .section--cta{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .h2,
  .sectionHead .h2,
  .sectionHead h2{
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.18 !important;
    letter-spacing: .03em;
  }
  .sub,
  .sectionHead .sub,
  .body,
  .muted{
    font-size: 15px !important;
    line-height: 1.95 !important;
  }

  /* Hero */
  .hero__content{
    padding: 88px 0 44px !important;
  }
  .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .hero__copy,
  body.theme-dark .hero__copy{
    border-radius: 24px !important;
    padding: 22px 18px 20px !important;
    order: 1;
  }
  .eyebrow{
    font-size: 11px !important;
    letter-spacing: .12em !important;
    margin-bottom: 10px !important;
  }
  .heroTitle{
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .96 !important;
    gap: 8px !important;
  }
  .hero__lead{
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin-bottom: 18px !important;
    max-width: none !important;
  }
  .hero__actions{
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .hero__actions .btn{
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    font-size: 13px;
  }
  .badges{
    gap: 8px !important;
  }
  .badges span{
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  .hero__visual{
    order: 2;
    justify-content: center !important;
  }
  .heroCard,
  body.theme-dark .heroCard{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 24px !important;
  }
  .heroSlider__track{
    aspect-ratio: 5 / 4.2 !important;
    height: auto !important;
  }
  .heroCard__cap{
    left: 14px;
    bottom: 14px;
    font-size: 10px;
  }
  .heroSlider__dots{
    left: 14px;
    bottom: 10px;
  }

  /* Concept and campaign */
  #concept,
  .conceptLuxury,
  .hsA__salon{
    margin-top: 18px !important;
    padding: 34px 18px !important;
    border-radius: 24px !important;
  }
  .conceptLuxury .conceptTitle{
    font-size: clamp(20px, 6vw, 28px) !important;
    margin-bottom: 14px !important;
  }
  .conceptLuxury .waku{
    font-size: 15px !important;
    line-height: 2 !important;
  }
  #campaign .sectionHead{
    margin-bottom: 20px !important;
  }
  #campaign .campaignGlow{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  #campaign .campaignGlowCard{
    min-height: auto !important;
    padding: 22px 18px 18px !important;
    border-radius: 22px !important;
  }
  #campaign .campaignBig{
    font-size: clamp(30px, 9vw, 40px) !important;
  }
  #campaign .campaignText{
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.95 !important;
  }
  #campaign .campaignCtaRow .btn{
    width: 100%;
    min-height: 48px;
  }

  /* Deep recovery blocks */
  .recoveryHero,
  .recoveryGrid,
  .recoveryGrid--two,
  .rentalGrid,
  .cards,
  .twocol,
  .privacyGrid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .recoveryHero{
    gap: 16px !important;
  }
  .recoveryHero__logoCard,
  .recoveryHero__body,
  .recoveryCard,
  .panel,
  .privacyCard,
  .access__info,
  .accessGuideMap,
  .googleMapEmbed,
  .rentalPriceBanner{
    border-radius: 22px !important;
  }
  .recoveryCard,
  .panel,
  .privacyCard{
    padding: 20px 18px !important;
  }
  .recoveryCard__head{
    margin-bottom: 12px !important;
  }
  .recoveryCard--visualize .recoveryCard__head,
  .recoveryCard--visualize .recoveryList{
    max-width: 100% !important;
  }
  .recoveryCard--visualize .recoveryCard__head{
    padding: 14px 16px 8px !important;
    border-radius: 18px !important;
  }
  .recoveryCard--visualize .recoveryList{
    padding: 14px 16px 18px 24px !important;
    border-radius: 20px !important;
  }
  .recoveryList,
  .recoveryFeatures,
  .list{
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  /* Rental */
  #rental .sectionHero{
    margin-top: 16px !important;
    border-radius: 24px !important;
  }
  #rental .sectionHero__img{
    height: 210px !important;
    object-position: center center !important;
  }
  .rentalPriceBanner{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 18px !important;
    margin-top: 16px !important;
  }
  .rentalPriceBanner h3{
    font-size: clamp(22px, 7vw, 30px) !important;
  }
  .rentalPriceBanner__price{
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
  }
  .rentalPriceBanner__price strong{
    font-size: clamp(30px, 10vw, 42px) !important;
  }
  #rental .ctaRow,
  #reserve .ctaRow{
    gap: 10px !important;
  }
  #rental .ctaRow .btn,
  #reserve .ctaRow .btn{
    width: 100%;
    min-height: 48px;
  }

  /* Access */
  #company .access{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #company .access__info,
  body.theme-dark #company .access__info{
    padding: 18px !important;
  }
  .dl > div{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  .dl dt{
    font-size: 13px;
    letter-spacing: .04em;
  }
  .dl dd{
    font-size: 15px;
    line-height: 1.8;
  }
  #company .accessMaps,
  #company .access__map{
    gap: 14px !important;
  }
  #company .accessGuideMap img{
    aspect-ratio: 16 / 10 !important;
  }
  #company .googleMapEmbed{
    height: 260px !important;
  }
  #company .mapOpenBtn{
    justify-self: stretch !important;
    width: 100%;
    min-height: 46px;
  }

  /* floating reservation */
  .reserveFloatBtn,
  .reserveBeautyBtn{
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .reserveBeautyBtn__inner{
    height: 50px !important;
    padding: 0 18px !important;
  }
}

@media (max-width: 480px){
  .wrap,
  .narrow,
  #campaign .wrap,
  #company .wrap{
    width: min(100%, calc(100% - 24px)) !important;
  }
  .section,
  .section--panel,
  .section--paper,
  .section--dark,
  .section--cta{
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .hero__content{
    padding-top: 82px !important;
  }
  .hero__actions .btn{
    flex: 1 1 100%;
  }
  .heroTitle{
    font-size: clamp(34px, 12vw, 50px) !important;
  }
  .badges span{
    font-size: 10px !important;
  }
  #rental .sectionHero__img{
    height: 180px !important;
  }
  #company .googleMapEmbed{
    height: 220px !important;
  }
}


/* ===== Campaign text width adjustment 2026-05-24 =====
   Expand body copy to use the full card width on desktop/mobile.
   ============================================ */
#campaign .campaignGlowInner{
  align-items: stretch !important;
}
#campaign .campaignText{
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.95 !important;
}
#campaign .campaignGlowCard p,
#campaign .campaignGlowCard .campaignText,
#campaign .campaignGlowCard .body{
  max-width: none !important;
}
@media (max-width: 860px){
  #campaign .campaignText{
    width: 100% !important;
    max-width: none !important;
  }
}




/* ===== Hero slider image replacement 2026-05-24 =====
   Slider contents changed to the uploaded luxury salon photos.
   Cropping positions adjusted per image so the subject remains elegant.
   ============================================ */
.heroSlider__img--towel{
  object-position: center center !important;
}
.heroSlider__img--headcare{
  object-position: center center !important;
}
.heroSlider__img--moon{
  object-position: 52% 50% !important;
}
.heroSlider__img--products{
  object-position: center center !important;
}
@media (min-width: 861px){
  .heroSlider__img--towel{
    object-position: center center !important;
  }
  .heroSlider__img--headcare{
    object-position: center center !important;
  }
  .heroSlider__img--moon{
    object-position: 52% 52% !important;
  }
  .heroSlider__img--products{
    object-position: center center !important;
  }
}


/* ===== Hero slider first image update 2026-05-24 =====
   First slide changed to the luxury moonlight recovery image.
   ============================================ */
.heroSlider__img--moonFirst{
  object-position: 50% 50% !important;
}
@media (max-width: 860px){
  .heroSlider__img--moonFirst{
    object-position: 50% 50% !important;
  }
}


/* ===== Moon particle animation near logo 2026-05-24 =====
   Replace generic bubbles with elegant moon-like floating particles.
   ============================================ */
.heroBrandBubbles{
  overflow: visible;
}
.bubbleField{
  position: absolute;
  left: -76px !important;
  top: 50%;
  width: 82px !important;
  height: 176px !important;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .96 !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.22));
}
.bubbleField .b{
  position: absolute;
  border-radius: 50%;
  overflow: visible;
  opacity: 0;
  border: 1px solid rgba(250,244,232,.22) !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.36) 28%, rgba(243,236,221,.16) 40%, rgba(213,196,166,.12) 58%, rgba(0,0,0,0) 76%),
    radial-gradient(circle at 62% 66%, rgba(230,223,207,.18), rgba(0,0,0,0) 56%),
    radial-gradient(circle at 54% 46%, rgba(245,240,232,.94), rgba(223,213,194,.86) 62%, rgba(182,166,138,.88) 100%) !important;
  box-shadow:
    inset -8px -10px 18px rgba(102, 83, 58, .18),
    inset 2px 2px 9px rgba(255,255,255,.28),
    0 0 0 1px rgba(255,255,255,.06),
    0 16px 36px rgba(11, 25, 46, .22),
    0 0 18px rgba(228,210,165,.18) !important;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubbleField .b::before{
  content:"";
  position:absolute;
  inset: 14% 16% 18% 18%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 36%, rgba(140,120,90,.16) 0 10%, transparent 11%),
    radial-gradient(circle at 58% 30%, rgba(150,132,102,.12) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 60%, rgba(132,114,89,.13) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 68%, rgba(156,140,112,.09) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 66%);
  mix-blend-mode: multiply;
  opacity: .72;
}
.bubbleField .b::after{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(240,229,203,.18) 0%, rgba(240,229,203,.08) 42%, rgba(240,229,203,0) 72%);
  z-index:-1;
}

/* Large moon */
.bubbleField .b1{
  width: 58px !important;
  height: 58px !important;
  left: 8px !important;
  bottom: 38px !important;
  animation-name: moonFloatLarge !important;
  animation-duration: 8.8s !important;
  animation-delay: .2s !important;
}
/* Medium moon */
.bubbleField .b2{
  width: 32px !important;
  height: 32px !important;
  left: 36px !important;
  bottom: 26px !important;
  animation-name: moonFloatMedium !important;
  animation-duration: 7.4s !important;
  animation-delay: 1.6s !important;
}
/* Small moon */
.bubbleField .b3{
  width: 16px !important;
  height: 16px !important;
  left: 18px !important;
  bottom: 4px !important;
  animation-name: moonFloatSmall !important;
  animation-duration: 6.6s !important;
  animation-delay: 3.0s !important;
}
/* soft glint moon */
.bubbleField .b4{
  width: 12px !important;
  height: 12px !important;
  left: 48px !important;
  bottom: 86px !important;
  animation-name: moonFloatTiny !important;
  animation-duration: 9.2s !important;
  animation-delay: 2.4s !important;
}
/* hide surplus old bubble nodes */
.bubbleField .b5,
.bubbleField .b6,
.bubbleField .b7,
.bubbleField .b8{
  display:none !important;
}

@keyframes moonFloatLarge{
  0%   { transform: translateY(8px) translateX(0) scale(.94); opacity: 0; }
  10%  { opacity: .92; }
  38%  { transform: translateY(-10px) translateX(-1px) scale(1); opacity: .96; }
  72%  { transform: translateY(-30px) translateX(2px) scale(1.04); opacity: .72; }
  100% { transform: translateY(-46px) translateX(4px) scale(1.08); opacity: 0; }
}
@keyframes moonFloatMedium{
  0%   { transform: translateY(6px) translateX(0) scale(.94); opacity: 0; }
  14%  { opacity: .82; }
  50%  { transform: translateY(-18px) translateX(2px) scale(1.04); opacity: .84; }
  100% { transform: translateY(-42px) translateX(5px) scale(1.09); opacity: 0; }
}
@keyframes moonFloatSmall{
  0%   { transform: translateY(4px) translateX(0) scale(.88); opacity: 0; }
  18%  { opacity: .68; }
  55%  { transform: translateY(-16px) translateX(1px) scale(1); opacity: .58; }
  100% { transform: translateY(-38px) translateX(3px) scale(1.08); opacity: 0; }
}
@keyframes moonFloatTiny{
  0%   { transform: translateY(2px) scale(.86); opacity: 0; }
  12%  { opacity: .46; }
  50%  { transform: translateY(-12px) translateX(1px) scale(1); opacity: .34; }
  100% { transform: translateY(-26px) translateX(2px) scale(1.06); opacity: 0; }
}

@media (max-width: 860px){
  .bubbleField{
    left: -58px !important;
    width: 64px !important;
    height: 146px !important;
  }
  .bubbleField .b1{ width: 44px !important; height: 44px !important; left: 8px !important; bottom: 36px !important; }
  .bubbleField .b2{ width: 26px !important; height: 26px !important; left: 30px !important; bottom: 26px !important; }
  .bubbleField .b3{ width: 12px !important; height: 12px !important; left: 14px !important; bottom: 8px !important; }
  .bubbleField .b4{ width: 10px !important; height: 10px !important; left: 40px !important; bottom: 78px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b{
    animation: none !important;
    opacity: .66 !important;
  }
  .bubbleField .b1{ transform: translateY(-18px) !important; }
  .bubbleField .b2{ transform: translateY(-4px) !important; }
  .bubbleField .b3{ transform: translateY(10px) !important; }
  .bubbleField .b4{ transform: translateY(-28px) !important; }
}


/* ===== Star sparkle animation near logo 2026-05-24 =====
   Replace moon-bubble particles with elegant star-like twinkles.
   ============================================ */
.heroBrandBubbles{ overflow: visible; }
.bubbleField{
  position: absolute;
  left: -74px !important;
  top: 50%;
  width: 82px !important;
  height: 176px !important;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .96 !important;
}
.bubbleField .b{
  position: absolute;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255,249,238,.98) 0 18%, rgba(250,236,198,.92) 19% 28%, rgba(250,236,198,0) 29%) !important;
  box-shadow: 0 0 12px rgba(244, 232, 194, .42) !important;
  filter: drop-shadow(0 0 8px rgba(242,232,201,.25));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubbleField .b::before,
.bubbleField .b::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,248,232,.92) 46%, rgba(255,255,255,0));
}
.bubbleField .b::before{
  width: 2px;
  height: 100%;
}
.bubbleField .b::after{
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,248,232,.92) 46%, rgba(255,255,255,0));
}
.bubbleField .b .diag,
.bubbleField .b .diag2{ display:none; }
.bubbleField .b1,
.bubbleField .b2,
.bubbleField .b3,
.bubbleField .b4{
  animation-name: starFloatTwinkle !important;
}
.bubbleField .b1{
  width: 18px !important; height: 18px !important;
  left: 12px !important; bottom: 20px !important;
  animation-duration: 7.8s !important; animation-delay: .3s !important;
}
.bubbleField .b2{
  width: 12px !important; height: 12px !important;
  left: 38px !important; bottom: 50px !important;
  animation-duration: 6.4s !important; animation-delay: 1.2s !important;
}
.bubbleField .b3{
  width: 9px !important; height: 9px !important;
  left: 24px !important; bottom: 88px !important;
  animation-duration: 8.2s !important; animation-delay: 2.6s !important;
}
.bubbleField .b4{
  width: 7px !important; height: 7px !important;
  left: 54px !important; bottom: 116px !important;
  animation-duration: 7.1s !important; animation-delay: 3.1s !important;
}
.bubbleField .b5,
.bubbleField .b6,
.bubbleField .b7,
.bubbleField .b8{ display:none !important; }

@keyframes starFloatTwinkle{
  0%   { transform: translateY(10px) scale(.72) rotate(45deg); opacity: 0; }
  12%  { opacity: .88; }
  28%  { transform: translateY(-2px) scale(1.05) rotate(45deg); opacity: 1; }
  50%  { transform: translateY(-14px) scale(.82) rotate(45deg); opacity: .58; }
  66%  { transform: translateY(-24px) scale(1) rotate(45deg); opacity: .92; }
  86%  { transform: translateY(-36px) scale(.78) rotate(45deg); opacity: .32; }
  100% { transform: translateY(-48px) scale(.64) rotate(45deg); opacity: 0; }
}

@media (max-width: 860px){
  .bubbleField{
    left: -58px !important;
    width: 64px !important;
    height: 146px !important;
  }
  .bubbleField .b1{ width: 14px !important; height: 14px !important; left: 10px !important; bottom: 14px !important; }
  .bubbleField .b2{ width: 10px !important; height: 10px !important; left: 30px !important; bottom: 44px !important; }
  .bubbleField .b3{ width: 8px !important; height: 8px !important; left: 20px !important; bottom: 76px !important; }
  .bubbleField .b4{ width: 6px !important; height: 6px !important; left: 42px !important; bottom: 102px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b{ animation: none !important; opacity: .9 !important; transform: rotate(45deg) !important; }
}


/* ===== One full moon + star sparkle adjustment 2026-05-24 =====
   Keep the star sparkle look, but restore exactly one full moon particle.
   ============================================ */
.bubbleField .b1{
  width: 56px !important;
  height: 56px !important;
  left: 8px !important;
  bottom: 20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(250,244,232,.22) !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.36) 28%, rgba(243,236,221,.16) 40%, rgba(213,196,166,.12) 58%, rgba(0,0,0,0) 76%),
    radial-gradient(circle at 62% 66%, rgba(230,223,207,.18), rgba(0,0,0,0) 56%),
    radial-gradient(circle at 54% 46%, rgba(245,240,232,.94), rgba(223,213,194,.86) 62%, rgba(182,166,138,.88) 100%) !important;
  box-shadow:
    inset -8px -10px 18px rgba(102, 83, 58, .18),
    inset 2px 2px 9px rgba(255,255,255,.28),
    0 0 0 1px rgba(255,255,255,.06),
    0 16px 36px rgba(11, 25, 46, .22),
    0 0 18px rgba(228,210,165,.18) !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.22));
  animation-name: singleMoonFloat !important;
  animation-duration: 9.2s !important;
  animation-delay: .2s !important;
}
.bubbleField .b1::before{
  content:"";
  position:absolute;
  inset: 14% 16% 18% 18%;
  left:auto; top:auto; transform:none;
  border-radius:50%;
  width:auto; height:auto;
  background:
    radial-gradient(circle at 30% 36%, rgba(140,120,90,.16) 0 10%, transparent 11%),
    radial-gradient(circle at 58% 30%, rgba(150,132,102,.12) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 60%, rgba(132,114,89,.13) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 68%, rgba(156,140,112,.09) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 66%) !important;
  mix-blend-mode: multiply;
  opacity: .72;
}
.bubbleField .b1::after{
  content:"";
  position:absolute;
  inset:-18%;
  left:auto; top:auto; transform:none;
  width:auto; height:auto;
  border-radius:50%;
  background: radial-gradient(circle, rgba(240,229,203,.18) 0%, rgba(240,229,203,.08) 42%, rgba(240,229,203,0) 72%) !important;
  z-index:-1;
}
.bubbleField .b2,
.bubbleField .b3,
.bubbleField .b4{
  border-radius: 0 !important;
  border: 0 !important;
  animation-name: starFloatTwinkle !important;
}
.bubbleField .b2{
  width: 12px !important; height: 12px !important;
  left: 44px !important; bottom: 54px !important;
}
.bubbleField .b3{
  width: 9px !important; height: 9px !important;
  left: 22px !important; bottom: 96px !important;
}
.bubbleField .b4{
  width: 7px !important; height: 7px !important;
  left: 56px !important; bottom: 118px !important;
}
@keyframes singleMoonFloat{
  0%   { transform: translateY(8px) translateX(0) scale(.94); opacity: 0; }
  10%  { opacity: .92; }
  38%  { transform: translateY(-10px) translateX(-1px) scale(1); opacity: .96; }
  72%  { transform: translateY(-30px) translateX(2px) scale(1.04); opacity: .72; }
  100% { transform: translateY(-46px) translateX(4px) scale(1.08); opacity: 0; }
}
@media (max-width: 860px){
  .bubbleField .b1{ width: 42px !important; height: 42px !important; left: 8px !important; bottom: 16px !important; }
  .bubbleField .b2{ width: 10px !important; height: 10px !important; left: 30px !important; bottom: 44px !important; }
  .bubbleField .b3{ width: 8px !important; height: 8px !important; left: 18px !important; bottom: 78px !important; }
  .bubbleField .b4{ width: 6px !important; height: 6px !important; left: 42px !important; bottom: 98px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b1{ animation: none !important; opacity: .9 !important; transform: translateY(-18px) !important; }
  .bubbleField .b2,
  .bubbleField .b3,
  .bubbleField .b4{ animation: none !important; opacity: .9 !important; transform: rotate(45deg) !important; }
}


/* ===== One full moon + true star sparkle cleanup 2026-05-24 =====
   Remove remaining bubble look. Keep only one full moon and tiny star sparkles.
   ============================================ */
.bubbleField .b1{
  width: 56px !important;
  height: 56px !important;
  left: 8px !important;
  bottom: 20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(250,244,232,.22) !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.36) 28%, rgba(243,236,221,.16) 40%, rgba(213,196,166,.12) 58%, rgba(0,0,0,0) 76%),
    radial-gradient(circle at 62% 66%, rgba(230,223,207,.18), rgba(0,0,0,0) 56%),
    radial-gradient(circle at 54% 46%, rgba(245,240,232,.94), rgba(223,213,194,.86) 62%, rgba(182,166,138,.88) 100%) !important;
  box-shadow:
    inset -8px -10px 18px rgba(102, 83, 58, .18),
    inset 2px 2px 9px rgba(255,255,255,.28),
    0 0 0 1px rgba(255,255,255,.06),
    0 16px 36px rgba(11, 25, 46, .22),
    0 0 18px rgba(228,210,165,.18) !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.22));
  animation-name: singleMoonFloat !important;
  animation-duration: 9.2s !important;
  animation-delay: .2s !important;
}
.bubbleField .b1::before{
  content:"";
  position:absolute;
  inset: 14% 16% 18% 18%;
  left:auto; top:auto; transform:none;
  border-radius:50%;
  width:auto; height:auto;
  background:
    radial-gradient(circle at 30% 36%, rgba(140,120,90,.16) 0 10%, transparent 11%),
    radial-gradient(circle at 58% 30%, rgba(150,132,102,.12) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 60%, rgba(132,114,89,.13) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 68%, rgba(156,140,112,.09) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 66%) !important;
  mix-blend-mode: multiply;
  opacity: .72;
}
.bubbleField .b1::after{
  content:"";
  position:absolute;
  inset:-18%;
  left:auto; top:auto; transform:none;
  width:auto; height:auto;
  border-radius:50%;
  background: radial-gradient(circle, rgba(240,229,203,.18) 0%, rgba(240,229,203,.08) 42%, rgba(240,229,203,0) 72%) !important;
  z-index:-1;
}

/* True star sparkles: tiny, no bubble fill */
.bubbleField .b2,
.bubbleField .b3,
.bubbleField .b4{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(245,233,200,.28)) !important;
  background: transparent !important;
  overflow: visible !important;
  animation-name: starFloatTwinkle !important;
}
.bubbleField .b2::before,
.bubbleField .b3::before,
.bubbleField .b4::before,
.bubbleField .b2::after,
.bubbleField .b3::after,
.bubbleField .b4::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  border-radius:999px;
}
/* vertical/horizontal rays */
.bubbleField .b2::before,
.bubbleField .b3::before,
.bubbleField .b4::before{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.96) 46%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.96) 46%, rgba(255,255,255,0) 100%);
  background-size: 2px 100%, 100% 2px;
  background-position: center, center;
  background-repeat: no-repeat;
}
/* center glow */
.bubbleField .b2::after,
.bubbleField .b3::after,
.bubbleField .b4::after{
  width: 34%;
  height: 34%;
  background: radial-gradient(circle, rgba(255,252,244,1) 0%, rgba(251,237,196,.96) 48%, rgba(251,237,196,0) 100%) !important;
  box-shadow: 0 0 8px rgba(244,232,194,.35);
}
.bubbleField .b2{
  width: 14px !important; height: 14px !important;
  left: 44px !important; bottom: 54px !important;
  animation-duration: 6.8s !important; animation-delay: 1.2s !important;
}
.bubbleField .b3{
  width: 10px !important; height: 10px !important;
  left: 22px !important; bottom: 96px !important;
  animation-duration: 8.2s !important; animation-delay: 2.6s !important;
}
.bubbleField .b4{
  width: 8px !important; height: 8px !important;
  left: 56px !important; bottom: 118px !important;
  animation-duration: 7.1s !important; animation-delay: 3.1s !important;
}
.bubbleField .b5,
.bubbleField .b6,
.bubbleField .b7,
.bubbleField .b8{ display:none !important; }

@keyframes singleMoonFloat{
  0%   { transform: translateY(8px) translateX(0) scale(.94); opacity: 0; }
  10%  { opacity: .92; }
  38%  { transform: translateY(-10px) translateX(-1px) scale(1); opacity: .96; }
  72%  { transform: translateY(-30px) translateX(2px) scale(1.04); opacity: .72; }
  100% { transform: translateY(-46px) translateX(4px) scale(1.08); opacity: 0; }
}
@keyframes starFloatTwinkle{
  0%   { transform: translateY(10px) scale(.72) rotate(45deg); opacity: 0; }
  12%  { opacity: .88; }
  28%  { transform: translateY(-2px) scale(1.05) rotate(45deg); opacity: 1; }
  50%  { transform: translateY(-14px) scale(.82) rotate(45deg); opacity: .58; }
  66%  { transform: translateY(-24px) scale(1) rotate(45deg); opacity: .92; }
  86%  { transform: translateY(-36px) scale(.78) rotate(45deg); opacity: .32; }
  100% { transform: translateY(-48px) scale(.64) rotate(45deg); opacity: 0; }
}
@media (max-width: 860px){
  .bubbleField .b1{ width: 42px !important; height: 42px !important; left: 8px !important; bottom: 16px !important; }
  .bubbleField .b2{ width: 11px !important; height: 11px !important; left: 30px !important; bottom: 44px !important; }
  .bubbleField .b3{ width: 8px !important; height: 8px !important; left: 18px !important; bottom: 78px !important; }
  .bubbleField .b4{ width: 6px !important; height: 6px !important; left: 42px !important; bottom: 98px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b1{ animation: none !important; opacity: .9 !important; transform: translateY(-18px) !important; }
  .bubbleField .b2,
  .bubbleField .b3,
  .bubbleField .b4{ animation: none !important; opacity: .9 !important; transform: rotate(45deg) !important; }
}


/* ===== Matte full moon + stars only cleanup 2026-05-24 =====
   Remove glossy bubble look. Keep only one matte full moon and tiny star sparkles.
   ============================================ */
.bubbleField .b1{
  width: 48px !important;
  height: 48px !important;
  left: 10px !important;
  bottom: 22px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 236, 215, .18) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(246,240,228,.98) 0%, rgba(234,225,205,.96) 62%, rgba(197,183,153,.94) 100%) !important;
  box-shadow:
    0 0 16px rgba(236,226,196,.18),
    0 10px 24px rgba(5,12,24,.14) !important;
  filter: none !important;
  animation-name: singleMoonFloat !important;
  animation-duration: 9.2s !important;
  animation-delay: .2s !important;
  overflow: visible !important;
}
/* crater texture only, no glossy highlight */
.bubbleField .b1::before{
  content:"";
  position:absolute;
  inset: 12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(150,132,101,.16) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 28%, rgba(148,131,101,.12) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 58%, rgba(138,120,90,.14) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 66%, rgba(156,140,112,.10) 0 7%, transparent 8%),
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
  opacity: .9;
  mix-blend-mode: multiply;
}
.bubbleField .b1::after{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(243,233,200,.12) 0%, rgba(243,233,200,.04) 44%, rgba(243,233,200,0) 72%) !important;
  z-index:-1;
}

/* tiny star sparkles only */
.bubbleField .b2,
.bubbleField .b3,
.bubbleField .b4{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(245,233,200,.22)) !important;
  background: transparent !important;
  overflow: visible !important;
  animation-name: starFloatTwinkle !important;
}
.bubbleField .b2::before,
.bubbleField .b3::before,
.bubbleField .b4::before,
.bubbleField .b2::after,
.bubbleField .b3::after,
.bubbleField .b4::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  border-radius:999px;
}
.bubbleField .b2::before,
.bubbleField .b3::before,
.bubbleField .b4::before{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.96) 46%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.96) 46%, rgba(255,255,255,0) 100%);
  background-size: 2px 100%, 100% 2px;
  background-position: center, center;
  background-repeat: no-repeat;
}
.bubbleField .b2::after,
.bubbleField .b3::after,
.bubbleField .b4::after{
  width: 34%;
  height: 34%;
  background: radial-gradient(circle, rgba(255,252,244,1) 0%, rgba(251,237,196,.96) 48%, rgba(251,237,196,0) 100%) !important;
}
.bubbleField .b2{ width: 12px !important; height: 12px !important; left: 46px !important; bottom: 56px !important; }
.bubbleField .b3{ width: 9px !important; height: 9px !important; left: 24px !important; bottom: 94px !important; }
.bubbleField .b4{ width: 7px !important; height: 7px !important; left: 56px !important; bottom: 116px !important; }
.bubbleField .b5,
.bubbleField .b6,
.bubbleField .b7,
.bubbleField .b8{ display:none !important; }

@keyframes singleMoonFloat{
  0%   { transform: translateY(8px) translateX(0) scale(.96); opacity: 0; }
  10%  { opacity: .92; }
  38%  { transform: translateY(-9px) translateX(-1px) scale(1); opacity: .96; }
  72%  { transform: translateY(-26px) translateX(2px) scale(1.02); opacity: .78; }
  100% { transform: translateY(-40px) translateX(4px) scale(1.04); opacity: 0; }
}
@keyframes starFloatTwinkle{
  0%   { transform: translateY(10px) scale(.72) rotate(45deg); opacity: 0; }
  12%  { opacity: .88; }
  28%  { transform: translateY(-2px) scale(1.05) rotate(45deg); opacity: 1; }
  50%  { transform: translateY(-14px) scale(.82) rotate(45deg); opacity: .58; }
  66%  { transform: translateY(-24px) scale(1) rotate(45deg); opacity: .92; }
  86%  { transform: translateY(-36px) scale(.78) rotate(45deg); opacity: .32; }
  100% { transform: translateY(-48px) scale(.64) rotate(45deg); opacity: 0; }
}
@media (max-width: 860px){
  .bubbleField .b1{ width: 38px !important; height: 38px !important; left: 8px !important; bottom: 16px !important; }
  .bubbleField .b2{ width: 10px !important; height: 10px !important; left: 30px !important; bottom: 42px !important; }
  .bubbleField .b3{ width: 8px !important; height: 8px !important; left: 18px !important; bottom: 74px !important; }
  .bubbleField .b4{ width: 6px !important; height: 6px !important; left: 40px !important; bottom: 96px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b1{ animation: none !important; opacity: .92 !important; transform: translateY(-14px) !important; }
  .bubbleField .b2,
  .bubbleField .b3,
  .bubbleField .b4{ animation: none !important; opacity: .9 !important; transform: rotate(45deg) !important; }
}


/* ===== Flow image white border adjustment 2026-05-24 ===== */
.recoveryStep__media img{
  border: 1px solid rgba(255,255,255,.82) !important;
}


/* ===== Access text readability tweak 2026-05-24 ===== */
#company .access__name,
#company .access__privateNote,
body.theme-dark #company .access__name,
body.theme-dark #company .access__privateNote{
  color: #213b5a !important;
}


/* ===== Flow 04/05 white background polish 2026-05-24 ===== */
.recoveryCard--flow .recoveryStep__media{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 30px !important;
  padding: 10px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}
.recoveryCard--flow .recoveryStep__media img{
  width: 100% !important;
  border-radius: 24px !important;
  border: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}


/* ===== Remove glossy bubble / keep stars only 2026-05-24 ===== */
.bubbleField .b1,
.bubbleField .b1::before,
.bubbleField .b1::after{
  display: none !important;
  content: none !important;
}
/* rebalance star positions after moon removal */
.bubbleField .b2{ left: 22px !important; bottom: 46px !important; }
.bubbleField .b3{ left: 12px !important; bottom: 82px !important; }
.bubbleField .b4{ left: 34px !important; bottom: 112px !important; }
@media (max-width: 860px){
  .bubbleField .b2{ left: 18px !important; bottom: 40px !important; }
  .bubbleField .b3{ left: 10px !important; bottom: 70px !important; }
  .bubbleField .b4{ left: 28px !important; bottom: 94px !important; }
}


/* ===== Restore matte full moon while keeping glossy bubble removed 2026-05-24 ===== */
.bubbleField .b1{
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  left: 10px !important;
  bottom: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244,236,215,.16) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(244,239,229,.98) 0%, rgba(231,223,205,.96) 62%, rgba(193,181,154,.92) 100%) !important;
  box-shadow:
    0 0 12px rgba(236,226,196,.14),
    0 8px 18px rgba(5,12,24,.10) !important;
  filter: none !important;
  overflow: visible !important;
  animation-name: singleMoonFloatMatte !important;
  animation-duration: 9.4s !important;
  animation-delay: .2s !important;
}
.bubbleField .b1::before{
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(150,132,101,.14) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 28%, rgba(148,131,101,.11) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 58%, rgba(138,120,90,.13) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 66%, rgba(156,140,112,.10) 0 7%, transparent 8%),
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.05), rgba(255,255,255,0) 65%) !important;
  opacity: .9;
  mix-blend-mode: multiply;
}
.bubbleField .b1::after{
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,233,200,.10) 0%, rgba(243,233,200,.04) 44%, rgba(243,233,200,0) 72%) !important;
  z-index: -1;
}
.bubbleField .b2{ left: 24px !important; bottom: 52px !important; }
.bubbleField .b3{ left: 10px !important; bottom: 88px !important; }
.bubbleField .b4{ left: 34px !important; bottom: 116px !important; }
@keyframes singleMoonFloatMatte{
  0%   { transform: translateY(8px) translateX(0) scale(.96); opacity: 0; }
  10%  { opacity: .92; }
  38%  { transform: translateY(-9px) translateX(-1px) scale(1); opacity: .96; }
  72%  { transform: translateY(-24px) translateX(2px) scale(1.02); opacity: .78; }
  100% { transform: translateY(-38px) translateX(4px) scale(1.04); opacity: 0; }
}
@media (max-width: 860px){
  .bubbleField .b1{ width: 36px !important; height: 36px !important; left: 8px !important; bottom: 14px !important; }
  .bubbleField .b2{ left: 18px !important; bottom: 40px !important; }
  .bubbleField .b3{ left: 8px !important; bottom: 72px !important; }
  .bubbleField .b4{ left: 26px !important; bottom: 96px !important; }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField .b1{ animation: none !important; opacity: .92 !important; transform: translateY(-14px) !important; }
}


/* ===== Logo smoothing refinement 2026-05-24 ===== */
.recoveryHero__logoCard img,
.heroTitle .brand__logoImage.hero__logoLarge,
.brand__logoImage{
  image-rendering: auto !important;
  transform: translateZ(0);
}
.recoveryHero__logoCard img{
  width: min(100%, 214px) !important;
  filter: drop-shadow(0 12px 24px rgba(45,110,255,.08)) !important;
}


/* ===== 2026-05-24 bundled refinements ===== */
/* Fixed reservation button label */
.reserveBeautyBtn{
  overflow: visible !important;
}
.reserveBeautyBtn::before{
  content: "ご予約はこちら";
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  color: rgba(255,243,219,.95);
  font-size: 12px;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
@media (max-width: 860px){
  .reserveBeautyBtn::before{
    top: -22px;
    font-size: 11px;
    letter-spacing: .1em;
  }
}

/* Price area: carry gold price-box language into signature price */
.recoveryPriceBox{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px !important;
}
.recoveryPriceBox__label{
  flex: 1 1 260px;
}
.recoveryPriceBox__valueBox{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px 12px;
  border-radius: 24px;
  background: linear-gradient(135deg, #decc92 0%, #c8aa60 55%, #a8843f 100%);
  box-shadow: inset 0 1px 0 rgba(255,248,221,.45), 0 10px 24px rgba(15,22,36,.24);
}
.recoveryPriceBox strong{
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1;
  color: #0c1830 !important;
  letter-spacing: .02em;
}
.recoveryPriceBox__tax{
  font-size: 16px !important;
  font-weight: 700;
  color: rgba(12,24,48,.88) !important;
}
@media (max-width: 860px){
  .recoveryPriceBox{
    align-items: stretch !important;
  }
  .recoveryPriceBox__valueBox{
    align-self: flex-start;
    padding: 10px 16px 11px;
  }
  .recoveryPriceBox strong{
    font-size: 42px !important;
  }
}

/* Flow 04/05 generated-image swap polish */
.recoveryCard--flow .recoveryStep__media{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 30px !important;
  padding: 10px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}
.recoveryCard--flow .recoveryStep__media img{
  width: 100% !important;
  border-radius: 24px !important;
  border: none !important;
  background: #ffffff !important;
}

/* Visualize card: make it shorter / more balanced */
.recoveryGrid--two{
  align-items: start;
}
.recoveryCard--visualize,
body.theme-dark .recoveryCard--visualize{
  padding: 26px 28px 20px !important;
}
.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head{
  padding: 16px 18px !important;
  border-radius: 24px !important;
  margin-bottom: 10px !important;
}
.recoveryCard--visualize .recoveryCard__head--compact{
  margin-top: 12px !important;
}
.recoveryCard--visualize .h3,
body.theme-dark .recoveryCard--visualize .h3{
  font-size: clamp(24px, 2vw, 30px) !important;
}
.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 8px !important;
  padding-left: 1.15em !important;
}
.recoveryCard--visualize .recoveryList li,
body.theme-dark .recoveryCard--visualize .recoveryList li{
  margin-top: 2px !important;
}
.recoveryNote{
  margin: 8px 4px 12px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  line-height: 1.65;
}
.recoveryCard--visualize .recoveryMockup{
  margin-top: 8px !important;
}
@media (max-width: 860px){
  .recoveryCard--visualize,
  body.theme-dark .recoveryCard--visualize{
    padding: 22px 18px 18px !important;
  }
  .recoveryCard--visualize .recoveryCard__head,
  body.theme-dark .recoveryCard--visualize .recoveryCard__head{
    padding: 14px 16px !important;
  }
  .recoveryCard--visualize .h3,
  body.theme-dark .recoveryCard--visualize .h3{
    font-size: 22px !important;
  }
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* MEMBER PRIVILEGE section luxury image background */
#campaign{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2,10,23,.78) 0%, rgba(5,15,31,.62) 100%),
    url("../images/campaign_luxury_bg.jpg") center center / cover no-repeat !important;
}
#campaign::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(221,171,119,.14), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(195,108,131,.18), transparent 28%),
    radial-gradient(circle at 64% 76%, rgba(121,62,92,.16), transparent 24%);
  pointer-events: none;
}
#campaign .wrap{
  position: relative;
  z-index: 1;
}
#campaign .campaignGlowCard{
  background: rgba(246,247,243,.89) !important;
  backdrop-filter: blur(8px);
}
#campaign .campaignGlowCard::before{
  opacity: .25 !important;
}

/* Optional note styling over reserve button area if needed */
.section--paper .campaignCtaRow{ margin-top: 18px; }


/* ===== Final cleanup: remove lingering glossy bubble, keep clean moon + stars 2026-05-25 ===== */
/* Hide the old glossy sphere element completely */
.bubbleField .b1,
.bubbleField .b1::before,
.bubbleField .b1::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Draw a new non-glossy full moon from the field itself */
.bubbleField::before{
  content: "";
  position: absolute;
  left: 10px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(129,116,95,.18) 0 7%, transparent 8%),
    radial-gradient(circle at 60% 28%, rgba(118,106,88,.13) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 60%, rgba(120,108,90,.16) 0 8%, transparent 9%),
    radial-gradient(circle at 42% 68%, rgba(135,120,96,.12) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #f1e8d4 0%, #e3d7ba 66%, #c8b88f 100%);
  border: 1px solid rgba(246,238,214,.24);
  box-shadow: 0 0 14px rgba(229,210,164,.12);
  filter: none !important;
  animation: cleanMoonRise 9.6s ease-in-out infinite;
  z-index: 0;
}
.bubbleField::after{
  content: "";
  position: absolute;
  left: 5px;
  bottom: 12px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,218,174,.08), rgba(234,218,174,0) 70%);
  animation: cleanMoonRise 9.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Keep stars above the moon */
.bubbleField .b2,
.bubbleField .b3,
.bubbleField .b4{
  z-index: 2;
}
@keyframes cleanMoonRise{
  0%   { transform: translateY(10px) translateX(0) scale(.98); opacity: 0; }
  12%  { opacity: .92; }
  42%  { transform: translateY(-8px) translateX(-1px) scale(1); opacity: .96; }
  74%  { transform: translateY(-24px) translateX(2px) scale(1.01); opacity: .78; }
  100% { transform: translateY(-38px) translateX(4px) scale(1.02); opacity: 0; }
}
@media (max-width: 860px){
  .bubbleField::before{
    left: 8px;
    bottom: 14px;
    width: 34px;
    height: 34px;
  }
  .bubbleField::after{
    left: 4px;
    bottom: 10px;
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce){
  .bubbleField::before,
  .bubbleField::after{
    animation: none !important;
    opacity: .88 !important;
    transform: translateY(-14px) !important;
  }
}


/* ===== Regression fix v31: force correct flow images + compact visualize card ===== */
/* Flow images: make the newly generated images show and avoid old cached thumbnails */
.recoveryCard--flow .recoveryStep__media{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  border-radius: 28px !important;
  padding: 8px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}
.recoveryCard--flow .recoveryStep__media img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* Visualize card: reduce height and keep title clean */
.recoveryCard--visualize,
body.theme-dark .recoveryCard--visualize{
  padding: 20px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head{
  width: fit-content !important;
  max-width: calc(100% - 12px) !important;
  padding: 12px 18px 10px !important;
  border-radius: 20px !important;
  margin: 0 !important;
}
.recoveryCard--visualize .recoveryCard__head .panelTag,
body.theme-dark .recoveryCard--visualize .recoveryCard__head .panelTag{
  display: inline-flex !important;
  margin-bottom: 8px !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
}
.recoveryCard--visualize .h3,
body.theme-dark .recoveryCard--visualize .h3{
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
.recoveryCard--visualize .recoveryCard__head--compact .h3,
body.theme-dark .recoveryCard--visualize .recoveryCard__head--compact .h3{
  font-size: 16px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}
.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  width: min(100%, 560px) !important;
  padding: 14px 18px 14px 28px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  background: linear-gradient(180deg, rgba(10, 26, 45, .66), rgba(10, 26, 45, .42)) !important;
}
.recoveryCard--visualize .recoveryList li,
body.theme-dark .recoveryCard--visualize .recoveryList li{
  margin-top: 0 !important;
  margin-bottom: 3px !important;
}
.recoveryNote{
  margin: -2px 4px 0 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.72) !important;
}
.recoveryCard--visualize .recoveryMockup{
  margin-top: 2px !important;
}
@media (max-width: 860px){
  .recoveryCard--visualize,
  body.theme-dark .recoveryCard--visualize{
    padding: 18px 14px 16px !important;
    gap: 9px !important;
  }
  .recoveryCard--visualize .recoveryCard__head,
  body.theme-dark .recoveryCard--visualize .recoveryCard__head{
    padding: 11px 14px 9px !important;
    border-radius: 18px !important;
  }
  .recoveryCard--visualize .h3,
  body.theme-dark .recoveryCard--visualize .h3,
  .recoveryCard--visualize .recoveryCard__head--compact .h3,
  body.theme-dark .recoveryCard--visualize .recoveryCard__head--compact .h3{
    font-size: 15px !important;
    letter-spacing: .04em !important;
  }
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 12px 14px 12px 24px !important;
  }
  .recoveryNote{
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }
}


/* ===== MEMBER PRIVILEGE card line-art background 2026-05-25 =====
   Subtle left/right illustrations added inside each benefit card.
   Left: rose / botanical. Right: moon / stars / gift.
   ============================================ */
#campaign .campaignGlowCard{
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255,253,246,.95) 0%, rgba(244,247,239,.91) 46%, rgba(225,243,241,.88) 100%) !important;
  border-color: rgba(215,188,129,.46) !important;
  box-shadow:
    0 22px 48px rgba(5, 12, 24, .20),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}
#campaign .campaignGlowCard::before,
#campaign .campaignGlowCard::after{
  z-index: 0 !important;
}
#campaign .campaignGlowCard::after{
  background:
    radial-gradient(520px 250px at 100% 0%, rgba(202,226,219,.34), transparent 60%),
    radial-gradient(420px 220px at 14% 12%, rgba(236,221,184,.22), transparent 62%),
    linear-gradient(135deg, rgba(255,253,246,.94), rgba(232,245,243,.82)) !important;
}
#campaign .campaignGlowInner{
  position: relative !important;
  z-index: 3 !important;
}
#campaign .campaignDecor{
  position: absolute;
  z-index: 2 !important;
  pointer-events: none;
  color: rgba(173, 139, 82, .22);
  opacity: .92;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 14px 28px rgba(255,255,255,.22));
}
#campaign .campaignDecor svg{
  display: block;
  width: 100%;
  height: auto;
}
#campaign .campaignDecor--rose{
  width: min(62%, 430px);
  right: -7%;
  top: 7%;
  transform: rotate(-3deg);
  color: rgba(161, 128, 76, .24);
}
#campaign .campaignDecor--moon{
  width: min(66%, 470px);
  right: -7%;
  top: -1%;
  transform: rotate(1deg);
  color: rgba(171, 138, 82, .22);
}
#campaign .campaignGlowCard--priority .campaignDecor--rose{
  opacity: .86;
}
#campaign .campaignGlowCard--gift .campaignDecor--moon{
  opacity: .9;
}
#campaign .campaignBadge,
#campaign .campaignIcon,
#campaign .campaignBig,
#campaign .campaignGlowCard .h3,
#campaign .campaignText{
  position: relative;
  z-index: 4;
}
#campaign .campaignIcon{
  background:
    radial-gradient(15px 15px at 30% 28%, rgba(255,255,255,.46), transparent 64%),
    linear-gradient(180deg, rgba(239,226,183,.46), rgba(201,232,226,.34)) !important;
  box-shadow: 0 16px 32px rgba(9, 24, 40, .10) !important;
}
@media (max-width: 900px){
  #campaign .campaignDecor--rose{
    width: 64%;
    right: -11%;
    top: 10%;
  }
  #campaign .campaignDecor--moon{
    width: 70%;
    right: -12%;
    top: 3%;
  }
}
@media (max-width: 760px){
  #campaign .campaignDecor--rose{
    width: 72%;
    right: -18%;
    top: 4%;
    opacity: .68;
  }
  #campaign .campaignDecor--moon{
    width: 78%;
    right: -22%;
    top: 0;
    opacity: .7;
  }
  #campaign .campaignGlowCard{
    padding-right: 20px !important;
  }
}
@media (max-width: 480px){
  #campaign .campaignDecor{
    opacity: .5;
  }
  #campaign .campaignDecor--rose,
  #campaign .campaignDecor--moon{
    width: 88%;
    right: -34%;
  }
}
#campaign .campaignGlowCard::after,
#campaign .campaignGlowCard:hover::after{
  transform: none !important;
  transition: none !important;
}


/* ===== MEMBER PRIVILEGE background image swap 2026-05-25 =====
   Replaced simple line art with richer luxury illustration assets.
   Only the card background/decor image has been updated.
   ============================================ */
#campaign .campaignDecor{
  z-index: 2 !important;
  pointer-events: none;
  opacity: .96;
  mix-blend-mode: normal !important;
  filter: none !important;
  color: transparent !important;
}
#campaign .campaignDecor img{
  display: block;
  width: 100%;
  height: auto;
}
#campaign .campaignDecor svg{
  display: none !important;
}
#campaign .campaignDecor--rose{
  width: min(64%, 430px);
  right: -3%;
  top: 3%;
  transform: none;
}
#campaign .campaignDecor--moon{
  width: min(66%, 450px);
  right: -4%;
  top: 2%;
  transform: none;
}
#campaign .campaignGlowCard--priority .campaignDecor--rose,
#campaign .campaignGlowCard--gift .campaignDecor--moon{
  opacity: .94;
}
@media (max-width: 900px){
  #campaign .campaignDecor--rose{
    width: 67%;
    right: -8%;
    top: 5%;
  }
  #campaign .campaignDecor--moon{
    width: 71%;
    right: -9%;
    top: 4%;
  }
}
@media (max-width: 760px){
  #campaign .campaignDecor--rose{
    width: 74%;
    right: -14%;
    top: 7%;
    opacity: .86;
  }
  #campaign .campaignDecor--moon{
    width: 80%;
    right: -16%;
    top: 5%;
    opacity: .88;
  }
}
@media (max-width: 480px){
  #campaign .campaignDecor--rose,
  #campaign .campaignDecor--moon{
    width: 86%;
    right: -24%;
  }
}


/* ===== MEMBER PRIVILEGE full-card background image adjustment 2026-05-25 =====
   Apply each luxury illustration across the entire card area.
   ============================================ */
#campaign .campaignGlowCard{
  background: linear-gradient(135deg, rgba(255,253,246,.96) 0%, rgba(244,247,239,.93) 46%, rgba(225,243,241,.92) 100%) !important;
}
#campaign .campaignDecor{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: .90;
  overflow: hidden;
  border-radius: inherit;
}
#campaign .campaignDecor img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}
#campaign .campaignGlowCard--priority .campaignDecor img,
#campaign .campaignGlowCard--gift .campaignDecor img{
  object-position: center center;
}
#campaign .campaignGlowInner{
  z-index: 3 !important;
}
#campaign .campaignGlowCard::after{
  background:
    linear-gradient(135deg, rgba(255,253,246,.26) 0%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.02) 100%),
    radial-gradient(420px 220px at 12% 18%, rgba(255,250,240,.55), transparent 58%) !important;
}
@media (max-width: 760px){
  #campaign .campaignDecor{
    opacity: .84;
  }
}

/* ===== TOP HERO moon animation: remove bubbles, keep full moon + stars 2026-05-25 =====
   The old bubble HTML remains for compatibility, but its circular/glossy styling is fully neutralized here.
   Moon is drawn by .bubbleField::before, stars are b2-b4 only.
   ============================================ */
.heroBrandBubbles .bubbleField{
  opacity: 1 !important;
  overflow: visible !important;
}

/* Remove the bubble/halo that can look like a glossy soap bubble */
.heroBrandBubbles .bubbleField::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
}

/* Keep one clean full moon, independent from old bubble nodes */
.heroBrandBubbles .bubbleField::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  bottom: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 36%, rgba(129,116,95,.18) 0 7%, transparent 8%),
    radial-gradient(circle at 60% 28%, rgba(118,106,88,.13) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 60%, rgba(120,108,90,.16) 0 8%, transparent 9%),
    radial-gradient(circle at 42% 68%, rgba(135,120,96,.12) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #f1e8d4 0%, #e3d7ba 66%, #c8b88f 100%) !important;
  border: 1px solid rgba(246,238,214,.22) !important;
  box-shadow: 0 0 12px rgba(229,210,164,.10) !important;
  filter: none !important;
  animation: cleanMoonRise 9.6s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* Neutralize all old soap-bubble circles */
.heroBrandBubbles .bubbleField .b,
.heroBrandBubbles .bubbleField .b::before,
.heroBrandBubbles .bubbleField .b::after{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hide the old moon/bubble node and surplus bubbles */
.heroBrandBubbles .bubbleField .b1,
.heroBrandBubbles .bubbleField .b1::before,
.heroBrandBubbles .bubbleField .b1::after,
.heroBrandBubbles .bubbleField .b5,
.heroBrandBubbles .bubbleField .b6,
.heroBrandBubbles .bubbleField .b7,
.heroBrandBubbles .bubbleField .b8{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Rebuild b2-b4 as tiny stars only */
.heroBrandBubbles .bubbleField .b2,
.heroBrandBubbles .bubbleField .b3,
.heroBrandBubbles .bubbleField .b4{
  display: block !important;
  position: absolute !important;
  opacity: .9 !important;
  overflow: visible !important;
  transform: rotate(45deg) !important;
  animation: starFloatTwinkle 4.8s ease-in-out infinite !important;
  z-index: 2 !important;
}
.heroBrandBubbles .bubbleField .b2{ width: 12px !important; height: 12px !important; left: 46px !important; bottom: 56px !important; animation-delay: .2s !important; }
.heroBrandBubbles .bubbleField .b3{ width: 9px !important; height: 9px !important; left: 24px !important; bottom: 94px !important; animation-delay: 1.1s !important; }
.heroBrandBubbles .bubbleField .b4{ width: 7px !important; height: 7px !important; left: 56px !important; bottom: 116px !important; animation-delay: 1.8s !important; }

.heroBrandBubbles .bubbleField .b2::before,
.heroBrandBubbles .bubbleField .b3::before,
.heroBrandBubbles .bubbleField .b4::before,
.heroBrandBubbles .bubbleField .b2::after,
.heroBrandBubbles .bubbleField .b3::after,
.heroBrandBubbles .bubbleField .b4::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.heroBrandBubbles .bubbleField .b2::before,
.heroBrandBubbles .bubbleField .b3::before,
.heroBrandBubbles .bubbleField .b4::before{
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.95) 48%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,248,232,.95) 48%, rgba(255,255,255,0) 100%) !important;
  background-size: 2px 100%, 100% 2px !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
}
.heroBrandBubbles .bubbleField .b2::after,
.heroBrandBubbles .bubbleField .b3::after,
.heroBrandBubbles .bubbleField .b4::after{
  width: 34% !important;
  height: 34% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,252,244,1) 0%, rgba(251,237,196,.9) 48%, rgba(251,237,196,0) 100%) !important;
}

@media (max-width: 860px){
  .heroBrandBubbles .bubbleField::before{
    left: 8px !important;
    bottom: 14px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .heroBrandBubbles .bubbleField .b2{ width: 10px !important; height: 10px !important; left: 30px !important; bottom: 42px !important; }
  .heroBrandBubbles .bubbleField .b3{ width: 8px !important; height: 8px !important; left: 18px !important; bottom: 74px !important; }
  .heroBrandBubbles .bubbleField .b4{ width: 6px !important; height: 6px !important; left: 40px !important; bottom: 96px !important; }
}


/* ===== Deep Recovery price inline next to session label 2026-05-25 ===== */
.recoveryPriceBox{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 17px 20px !important;
}
.recoveryPriceBox__label{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.recoveryPriceBox__valueBox{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
  padding: 7px 15px 8px !important;
  border-radius: 999px !important;
}
.recoveryPriceBox strong{
  font-size: clamp(30px, 3.2vw, 42px) !important;
  letter-spacing: .03em !important;
}
.recoveryPriceBox__tax{
  font-size: 14px !important;
}
@media (max-width: 680px){
  .recoveryPriceBox{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    padding: 15px 16px !important;
  }
  .recoveryPriceBox__label{
    flex: 1 1 100% !important;
    white-space: normal !important;
  }
  .recoveryPriceBox strong{
    font-size: 38px !important;
  }
}

/* ===== 2026-05 luxury gallery additions ===== */
.heroSlider__img--massageStanding{ object-position: center 42%; }
.heroSlider__img--spaTray{ object-position: center center; }
.heroSlider__img--footbathHands{ object-position: center 54%; }
.heroSlider__img--moonRoom{ object-position: center center; }

.luxeGallerySection{
  background:
    radial-gradient(circle at top left, rgba(185,153,90,.12), transparent 40%),
    linear-gradient(180deg, rgba(10,18,34,.98) 0%, rgba(15,24,42,.96) 100%);
}
.luxeGalleryLead{
  max-width: 820px;
  margin: 10px auto 0;
}
.luxeGalleryHero{
  display:grid;
  grid-template-columns: minmax(0,1.45fr) minmax(260px,.75fr);
  gap: 22px;
  margin-top: 38px;
  align-items: stretch;
}
.luxeGalleryHero__main,
.luxeGalleryMiniCard,
.luxeTile{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 70px rgba(0,0,0,.28);
}
.luxeGalleryHero__main{
  min-height: 420px;
}
.luxeGalleryHero__main img,
.luxeGalleryMiniCard img,
.luxeTile img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}
.luxeGalleryHero__main::after,
.luxeGalleryMiniCard::after,
.luxeTile::after{
  content: "";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(8,15,28,0) 35%, rgba(8,15,28,.68) 100%);
  pointer-events:none;
}
.luxeGalleryHero__side{
  display:grid;
  gap: 22px;
  grid-template-rows: 1fr 1fr;
}
.luxeGalleryMiniCard{
  min-height: 198px;
}
.luxeGalleryMiniCard figcaption,
.luxeTile figcaption{
  position:absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  color:#fff;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: .08em;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.luxeGalleryGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 22px;
}
.luxeTile{
  min-height: 250px;
}
.luxeTile--tall{
  grid-row: span 2;
  min-height: 524px;
}
.luxeTile:nth-child(3) img{ object-position: center 52%; }
.luxeTile:nth-child(4) img{ object-position: center center; }
.luxeTile:nth-child(6) img{ object-position: center center; }

@media (max-width: 980px){
  .luxeGalleryHero{
    grid-template-columns: 1fr;
  }
  .luxeGalleryHero__main{
    min-height: 360px;
  }
  .luxeGalleryHero__side{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .luxeGalleryGrid{
    grid-template-columns: repeat(2, 1fr);
  }
  .luxeTile--tall{
    grid-row: auto;
    min-height: 420px;
  }
}

@media (max-width: 640px){
  .luxeGalleryHero__main{
    min-height: 300px;
  }
  .luxeGalleryHero__side{
    grid-template-columns: 1fr;
  }
  .luxeGalleryGrid{
    grid-template-columns: 1fr;
  }
  .luxeTile,
  .luxeTile--tall,
  .luxeGalleryMiniCard{
    min-height: 280px;
  }
  .luxeGalleryMiniCard figcaption,
  .luxeTile figcaption{
    font-size: 20px;
    left: 16px;
    bottom: 14px;
  }
}

/* ===== 2026-05 second revision: replace visualize bg and one duplicate tall portrait ===== */
.recoveryCard--visualize::after,
body.theme-dark .recoveryCard--visualize::after{
  background:
    linear-gradient(90deg, rgba(7, 41, 58, .30) 0%, rgba(7, 41, 58, .16) 28%, rgba(7, 41, 58, .10) 58%, rgba(7, 41, 58, .18) 100%),
    url(../images/gallery_moon.jpg) center center / cover no-repeat !important;
  opacity: .34 !important;
  filter: saturate(.96) brightness(.92) !important;
  transform: scale(1.01) !important;
}
.luxeTile--moonTall img{
  object-position: center center;
}

/* ===== 2026-05 rev3: avoid duplicate moon tile ===== */
.luxeTile--teaMood img{
  object-position: center center;
}

/* ===== 2026-05 mobile reservation upgrade (moon/star untouched) ===== */
.mobileReserveBar{
  display: none;
}
.heroQuickOffer{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(213, 181, 112, .42);
  background: linear-gradient(135deg, rgba(8,18,32,.72), rgba(255,255,255,.08));
  box-shadow: 0 14px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  letter-spacing: .08em;
  backdrop-filter: blur(12px);
}
.heroQuickOffer span{
  font-size: 11px;
  color: rgba(225, 195, 128, .96);
  text-transform: uppercase;
}
.heroQuickOffer strong{
  font-size: 15px;
  font-weight: 500;
  color: #fff6de;
  white-space: nowrap;
}
.heroQuickOffer small{
  font-size: 10px;
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
}
.hero__actions--reservation .btn{
  min-width: 154px;
}
.firstVisitCards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 620px;
}
.firstVisitCards article{
  padding: 13px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.firstVisitCards span{
  display: block;
  margin-bottom: 6px;
  color: #f5dfaa;
  font-size: 12px;
  letter-spacing: .10em;
  font-weight: 600;
}
.firstVisitCards p{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.55;
}
.reservationEase{
  max-width: 720px;
  margin: 18px auto 24px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(213,181,112,.26);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: rgba(255,255,255,.84);
  line-height: 1.8;
  font-size: 14px;
}

@media (max-width: 760px){
  body.theme-dark{
    padding-bottom: 88px;
  }
  .reserveBeautyBtn{
    display: none !important;
  }
  .mobileReserveBar{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 9px;
    border-radius: 999px;
    border: 1px solid rgba(213,181,112,.34);
    background: rgba(4, 13, 25, .82);
    box-shadow: 0 18px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
  }
  .mobileReserveBar__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .mobileReserveBar__btn--primary{
    color: #142033;
    background: linear-gradient(135deg, #f5e3b0, #b89447);
    box-shadow: 0 10px 24px rgba(185,145,70,.28);
  }
  .mobileReserveBar__btn--ghost{
    color: #fff3d4;
    border: 1px solid rgba(245,223,170,.38);
    background: rgba(255,255,255,.06);
  }
  .heroQuickOffer{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 9px;
    margin: 16px 0 12px;
    padding: 10px 12px;
    border-radius: 22px;
    text-align: center;
  }
  .heroQuickOffer span,
  .heroQuickOffer strong,
  .heroQuickOffer small{
    width: auto;
  }
  .hero__actions--reservation{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .hero__actions--reservation .btn{
    min-width: 0;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
  .firstVisitCards{
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .firstVisitCards article{
    padding: 11px 13px;
  }
  .firstVisitCards span{
    margin-bottom: 4px;
  }
  .firstVisitCards p{
    font-size: 11.5px;
  }
  .reservationEase{
    margin: 16px auto 20px;
    padding: 14px 15px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* Mobile gallery becomes a luxury horizontal rail to reduce scroll fatigue */
  .luxeGallerySection .wrap{
    overflow: hidden;
  }
  .luxeGalleryHero{
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 26px -20px 0 !important;
    padding: 0 20px 6px;
  }
  .luxeGalleryHero__side{
    display: contents !important;
  }
  .luxeGalleryHero__main,
  .luxeGalleryMiniCard{
    flex: 0 0 82vw;
    min-height: 300px !important;
    scroll-snap-align: start;
  }
  .luxeGalleryGrid{
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 14px -20px 0 !important;
    padding: 0 20px 10px;
  }
  .luxeTile,
  .luxeTile--tall{
    flex: 0 0 76vw;
    min-height: 330px !important;
    grid-row: auto !important;
    scroll-snap-align: start;
  }
  .luxeGalleryHero::-webkit-scrollbar,
  .luxeGalleryGrid::-webkit-scrollbar{
    display: none;
  }
  .luxeGalleryHero,
  .luxeGalleryGrid{
    scrollbar-width: none;
  }
}

/* ===== 2026-05 moon phase visibility fix =====
   VISUALIZE背景：三日月→半月→満月がはっきり見えるように調整
   ============================================ */
.recoveryCard--visualize,
body.theme-dark .recoveryCard--visualize{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: linear-gradient(180deg, rgba(5, 18, 39, .96) 0%, rgba(5, 22, 47, .96) 100%) !important;
}

.recoveryCard--visualize::after,
body.theme-dark .recoveryCard--visualize::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 76% 25%, rgba(255,232,188,.18) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 86% 41%, rgba(255,232,188,.14) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 55%, rgba(255,232,188,.11) 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 66%, rgba(255,232,188,.14) 0 1.1px, transparent 1.8px),
    linear-gradient(90deg, rgba(4,14,31,.42) 0%, rgba(4,14,31,.30) 50%, rgba(4,14,31,.44) 100%) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.recoveryCard--visualize > *,
body.theme-dark .recoveryCard--visualize > *{
  position: relative;
  z-index: 3;
}

.recoveryCard--visualize .phaseMoonSprite{
  position: absolute !important;
  right: -22px !important;
  top: 48% !important;
  width: clamp(230px, 30vw, 340px) !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .95 !important;
  background-image: url(../images/visualize_moon_phase_sprite.png) !important;
  background-repeat: no-repeat !important;
  background-size: 600% 100% !important;
  background-position: 0% 0% !important;
  filter: drop-shadow(0 0 34px rgba(255,211,142,.42)) drop-shadow(0 0 80px rgba(255,211,142,.16)) !important;
  transform: translateY(-50%) !important;
  animation: visualizeMoonPhase 18s steps(5, end) infinite alternate, visualizeMoonFloat 9s ease-in-out infinite !important;
}

@keyframes visualizeMoonPhase{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 100% 0%; }
}

@keyframes visualizeMoonFloat{
  0%,100%{ margin-top: 0; }
  50%{ margin-top: -8px; }
}

.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head{
  position: relative !important;
  z-index: 4 !important;
  background: linear-gradient(180deg, rgba(8, 35, 76, .92) 0%, rgba(6, 29, 64, .86) 100%) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(10px) !important;
}

.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  position: relative !important;
  z-index: 4 !important;
  width: min(78%, 500px) !important;
  background: linear-gradient(180deg, rgba(8, 32, 70, .88) 0%, rgba(6, 28, 62, .82) 100%) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(11px) !important;
}

.recoveryCard--visualize .recoveryNote,
body.theme-dark .recoveryCard--visualize .recoveryNote{
  position: relative !important;
  z-index: 4 !important;
  max-width: min(78%, 500px) !important;
  color: rgba(255,255,255,.90) !important;
  background: linear-gradient(180deg, rgba(4, 19, 42, .66) 0%, rgba(4, 19, 42, .44) 100%) !important;
  border-radius: 14px !important;
  padding: 9px 12px !important;
  backdrop-filter: blur(8px) !important;
}

@media (max-width: 900px){
  .recoveryCard--visualize .phaseMoonSprite{
    width: clamp(185px, 34vw, 250px) !important;
    right: -28px !important;
    top: 50% !important;
    opacity: .92 !important;
  }
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList,
  .recoveryCard--visualize .recoveryNote,
  body.theme-dark .recoveryCard--visualize .recoveryNote{
    width: min(82%, 500px) !important;
    max-width: min(82%, 500px) !important;
  }
}

@media (max-width: 640px){
  .recoveryCard--visualize .phaseMoonSprite{
    width: 175px !important;
    right: -54px !important;
    top: 55% !important;
    opacity: .68 !important;
  }
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList,
  .recoveryCard--visualize .recoveryNote,
  body.theme-dark .recoveryCard--visualize .recoveryNote{
    width: 100% !important;
    max-width: 100% !important;
  }
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    background: linear-gradient(180deg, rgba(8, 32, 70, .88) 0%, rgba(6, 28, 62, .84) 100%) !important;
  }
}
/* ===== VISUALIZE：右余白に半分見える満月 ===== */
.recoveryCard--visualize{
  position: relative;
  overflow: hidden;
}

/* 月の位置 */
.recoveryCard--visualize .phaseMoon{
  position: absolute !important;
  right: -110px !important;   /* 右にはみ出させる */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 220px !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 1 !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

/* 月そのもの */
.recoveryCard--visualize .phaseMoon__orb{
  background: url(../images/visualize_moon_full.jpg) center center / cover no-repeat !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 28px rgba(255, 220, 170, .22),
    0 0 70px rgba(255, 220, 170, .10) !important;
}

/* 満ち欠けを一旦止めて、満月を見せる */
.recoveryCard--visualize .phaseMoon__mask{
  display: none !important;
}

/* ほんのり発光 */
.recoveryCard--visualize .phaseMoon__halo{
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,160,.18) 0%, rgba(255,220,160,.08) 42%, rgba(255,220,160,0) 72%);
  filter: blur(8px);
}

/* 文字ブロックが月とかぶらないように少し幅を制限 */
.recoveryCard--visualize .recoveryCard__head,
.recoveryCard--visualize .recoveryList,
.recoveryCard--visualize .recoveryNote{
  max-width: calc(100% - 180px);
  position: relative;
  z-index: 2;
}

/* スマホでは少し小さく */
@media (max-width: 640px){
  .recoveryCard--visualize .phaseMoon{
    right: -55px !important;
    width: 120px !important;
    opacity: .88 !important;
  }

  .recoveryCard--visualize .recoveryCard__head,
  .recoveryCard--visualize .recoveryList,
  .recoveryCard--visualize .recoveryNote{
    max-width: 100%;
  }
}/* SPのときだけ改行 */
.spBreak{
  display: none;
}

@media (max-width: 767px){
  .spBreak{
    display: block;
  }
}

/* ===== VISUALIZE moon layout update 2026-05-26 =====
   右側に満月をはっきり配置し、注意書きの文章幅を広げる調整
   ============================================ */
.recoveryCard--visualize,
body.theme-dark .recoveryCard--visualize{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 600px !important;
  padding: 20px 28px 22px 24px !important;
  background:
    radial-gradient(420px 360px at 82% 46%, rgba(48, 95, 150, .18), transparent 62%),
    linear-gradient(180deg, rgba(4, 17, 38, .98) 0%, rgba(4, 20, 43, .98) 100%) !important;
}

.recoveryCard--visualize::after,
body.theme-dark .recoveryCard--visualize::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 76% 25%, rgba(255,232,188,.26) 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 40%, rgba(255,232,188,.20) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 63%, rgba(255,232,188,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 68%, rgba(255,232,188,.22) 0 1.1px, transparent 1.9px),
    linear-gradient(90deg, rgba(4,14,31,.34) 0%, rgba(4,14,31,.20) 52%, rgba(4,14,31,.32) 100%) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.recoveryCard--visualize > *{
  position: relative !important;
  z-index: 4 !important;
}

.recoveryCard--visualize .phaseMoonSprite{
  display: none !important;
}

.recoveryCard--visualize .phaseMoon,
body.theme-dark .recoveryCard--visualize .phaseMoon{
  display: block !important;
  position: absolute !important;
  right: clamp(26px, 7vw, 72px) !important;
  top: 47% !important;
  width: clamp(150px, 24vw, 220px) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.recoveryCard--visualize .phaseMoon__halo,
body.theme-dark .recoveryCard--visualize .phaseMoon__halo{
  position: absolute !important;
  inset: -30% !important;
  display: block !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 225, 173, .34) 0%, rgba(255, 216, 154, .18) 36%, rgba(255, 216, 154, .06) 58%, rgba(255, 216, 154, 0) 74%) !important;
  filter: blur(10px) !important;
}

.recoveryCard--visualize .phaseMoon__orb,
body.theme-dark .recoveryCard--visualize .phaseMoon__orb{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  background: url(../images/visualize_moon_attached.png) center center / contain no-repeat !important;
  opacity: 1 !important;
  filter:
    brightness(1.08)
    contrast(1.08)
    drop-shadow(0 0 24px rgba(255, 219, 165, .52))
    drop-shadow(0 0 66px rgba(255, 219, 165, .24)) !important;
}

.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head,
.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  max-width: 340px !important;
}

.recoveryCard--visualize .recoveryCard__head,
body.theme-dark .recoveryCard--visualize .recoveryCard__head{
  background: linear-gradient(180deg, rgba(8, 35, 76, .94) 0%, rgba(6, 29, 64, .88) 100%) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(10px) !important;
}

.recoveryCard--visualize .recoveryList,
body.theme-dark .recoveryCard--visualize .recoveryList{
  width: min(100%, 340px) !important;
  background: linear-gradient(180deg, rgba(8, 32, 70, .90) 0%, rgba(6, 28, 62, .84) 100%) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(11px) !important;
}

.recoveryCard--visualize .recoveryNote,
body.theme-dark .recoveryCard--visualize .recoveryNote{
  width: calc(100% - 44px) !important;
  max-width: 560px !important;
  margin: 8px 0 0 2px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
  border-radius: 0 !important;
  line-height: 1.72 !important;
  letter-spacing: .04em !important;
  backdrop-filter: none !important;
}

.recoveryCard--visualize .recoveryMockup,
body.theme-dark .recoveryCard--visualize .recoveryMockup{
  display: none !important;
}

@media (max-width: 900px){
  .recoveryCard--visualize,
  body.theme-dark .recoveryCard--visualize{
    min-height: 570px !important;
    padding: 18px 20px 20px !important;
  }
  .recoveryCard--visualize .phaseMoon,
  body.theme-dark .recoveryCard--visualize .phaseMoon{
    right: 26px !important;
    top: 47% !important;
    width: clamp(136px, 30vw, 176px) !important;
  }
  .recoveryCard--visualize .recoveryCard__head,
  body.theme-dark .recoveryCard--visualize .recoveryCard__head,
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    max-width: min(72%, 340px) !important;
  }
  .recoveryCard--visualize .recoveryNote,
  body.theme-dark .recoveryCard--visualize .recoveryNote{
    width: calc(100% - 26px) !important;
    max-width: 520px !important;
  }
}

@media (max-width: 640px){
  .recoveryCard--visualize,
  body.theme-dark .recoveryCard--visualize{
    min-height: 0 !important;
    padding: 18px 14px 16px !important;
  }
  .recoveryCard--visualize .phaseMoon,
  body.theme-dark .recoveryCard--visualize .phaseMoon{
    right: -42px !important;
    top: 52% !important;
    width: 132px !important;
    opacity: .9 !important;
  }
  .recoveryCard--visualize .phaseMoon__halo,
  body.theme-dark .recoveryCard--visualize .phaseMoon__halo{
    opacity: .82 !important;
  }
  .recoveryCard--visualize .recoveryCard__head,
  body.theme-dark .recoveryCard--visualize .recoveryCard__head,
  .recoveryCard--visualize .recoveryList,
  body.theme-dark .recoveryCard--visualize .recoveryList{
    max-width: 100% !important;
    width: 100% !important;
  }
  .recoveryCard--visualize .recoveryNote,
  body.theme-dark .recoveryCard--visualize .recoveryNote{
    width: 100% !important;
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.62 !important;
  }
}
/* 注意書きの1行目を右まで伸ばす */
.recoveryCard--visualize .recoveryNote,
body.theme-dark .recoveryCard--visualize .recoveryNote {
  width: calc(100% - 20px) !important;
  max-width: 680px !important;
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
}

/* ============================================
   2026-05-26 SP Fix: Gallery one-column + MENU label
   スマホではギャラリーを横スクロールにせず縦1列表示
   ハンバーガーメニューは3本線＋MENU表記で分かりやすく
   ============================================ */
@media (max-width: 860px){
  .luxeGallerySection .wrap{
    overflow: visible !important;
  }

  .luxeGalleryHero,
  .luxeGalleryGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    scrollbar-width: auto !important;
  }

  .luxeGalleryHero__side{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 16px !important;
  }

  .luxeGalleryHero__main,
  .luxeGalleryMiniCard,
  .luxeTile,
  .luxeTile--tall{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    grid-row: auto !important;
    scroll-snap-align: none !important;
  }

  .luxeGalleryHero__main,
  .luxeGalleryMiniCard,
  .luxeTile{
    min-height: 260px !important;
    aspect-ratio: 4 / 3 !important;
  }

  .luxeTile--tall{
    min-height: 420px !important;
    aspect-ratio: 4 / 5 !important;
  }

  .luxeTile--moonTall{
    min-height: 560px !important;
    aspect-ratio: 9 / 16 !important;
  }

  .luxeGalleryHero__main img,
  .luxeGalleryMiniCard img,
  .luxeTile img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .luxeGalleryMiniCard figcaption,
  .luxeTile figcaption{
    font-size: 20px !important;
    left: 16px !important;
    bottom: 14px !important;
  }

  .navToggle,
  body.theme-dark .navToggle{
    width: 58px !important;
    height: 48px !important;
    min-width: 58px !important;
    padding: 6px 7px 5px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #fff !important;
    background: rgba(5, 18, 39, .86) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
    line-height: 1 !important;
  }

  .navToggle__icon,
  .navToggle span.navToggle__icon{
    width: 24px !important;
    height: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .navToggle__bar,
  .navToggle span.navToggle__bar{
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    min-height: 2px !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 999px !important;
    opacity: 1 !important;
  }

  .navToggle__label,
  .navToggle span.navToggle__label{
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.90) !important;
    font-family: "Cormorant Garamond", "Times New Roman", serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-indent: .16em !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }
}

/* ============================================
   2026-05-29 Requested restructure
   コンセプト → コース → デバイス/可視化 → 施術の流れ
   ============================================ */

/* ヒーロー冒頭は情報を詰めすぎない */
.hero__actions--reservation,
.hero .badges,
.hero .firstVisitCards{
  display: none !important;
}

/* 旧おすすめセクションはいったん非表示。コンセプトとコース訴求を優先 */
#features{
  display: none !important;
}

/* MENUボタンを少し明るく・押しやすく */
@media (max-width: 860px){
  .navToggle,
  body.theme-dark .navToggle{
    background:
      radial-gradient(circle at 50% 15%, rgba(96, 130, 180, .36), transparent 48%),
      linear-gradient(180deg, rgba(15, 38, 76, .98), rgba(7, 24, 52, .96)) !important;
    border-color: rgba(190, 215, 255, .38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 10px 26px rgba(0,0,0,.34),
      0 0 0 1px rgba(117, 151, 212, .10) !important;
  }
  .navToggle__bar,
  .navToggle span.navToggle__bar{
    background: rgba(255,255,255,.98) !important;
  }
  .navToggle__label,
  .navToggle span.navToggle__label{
    color: #fff !important;
  }
}

/* コンセプトブロック */
.recoveryHero--concept{
  align-items: center !important;
  margin-bottom: 22px !important;
}
.recoveryHero__copy--concept{
  max-width: 880px !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 2.05 !important;
  letter-spacing: .05em !important;
}

/* コースと価格を主役にする */
.recoveryCourseSpotlight{
  position: relative;
  overflow: hidden;
  margin: 18px auto 34px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 88% 18%, rgba(242, 207, 125, .24), transparent 30%),
    linear-gradient(135deg, rgba(8, 31, 61, .96), rgba(5, 20, 43, .98));
  border: 1px solid rgba(227, 199, 126, .36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 60px rgba(0,0,0,.28);
}
.recoveryCourseSpotlight::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 38%, rgba(230,194,103,.10));
  pointer-events:none;
}
.recoveryCourseSpotlight > *{
  position: relative;
  z-index: 1;
}
.recoveryCourseSpotlight__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(226, 191, 103, .95), rgba(186, 139, 48, .95));
  color: #061427;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .16em;
  font-size: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.recoveryCourseSpotlight__body h3{
  margin: 0;
  color: rgba(255,255,255,.98);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.28;
}
.recoveryCourseSpotlight__body p{
  margin: 8px 0 0;
  color: rgba(226, 207, 151, .88);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: .16em;
}
.recoveryCourseSpotlight__price{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #efd985, #c5983f);
  color: #071421;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 14px 32px rgba(0,0,0,.28);
}
.recoveryCourseSpotlight__price span,
.recoveryCourseSpotlight__price small{
  font-size: 15px;
  letter-spacing: .08em;
  font-weight: 600;
}
.recoveryCourseSpotlight__price strong{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 60px);
  line-height: .9;
  font-weight: 500;
  letter-spacing: .02em;
}

/* デバイス → 測れる項目 → 余韻の見せ方 */
.recoveryGrid--condition{
  align-items: stretch !important;
  margin-top: 16px !important;
}
.recoveryCard--device .h3{
  line-height: 1.55 !important;
}
.recoveryMockup--device{
  margin: 24px auto 0 !important;
  text-align: center !important;
}
.recoveryMockup--device img{
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,.96) !important;
  border-radius: 26px !important;
}
.recoveryNote--device{
  margin-top: 18px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  letter-spacing: .04em !important;
}

.recoveryCard--compactVisualize,
body.theme-dark .recoveryCard--compactVisualize{
  min-height: 0 !important;
  padding: 26px 28px 24px !important;
}
.recoveryCard--compactVisualize .recoveryCard__head,
body.theme-dark .recoveryCard--compactVisualize .recoveryCard__head,
.recoveryCard--compactVisualize .recoveryList,
body.theme-dark .recoveryCard--compactVisualize .recoveryList{
  max-width: min(70%, 380px) !important;
}
.recoveryCard--compactVisualize .recoveryCard__head--compact{
  margin-top: 22px !important;
}
.recoveryList--after{
  margin-bottom: 0 !important;
}

/* 施術の流れ：日本語を主役、英語は補助 */
.recoveryCard--flow .h3{
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: .08em;
}
.recoveryStep{
  display: grid !important;
  grid-template-columns: 86px minmax(120px, 190px) minmax(0,1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 24px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.055) !important;
}
.recoveryStep > span{
  align-self: start !important;
}
.recoveryStep__media{
  margin: 0 !important;
}
.recoveryStep__media img{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
}
.recoveryStep h4{
  margin: 0 0 12px !important;
  line-height: 1.35 !important;
}
.flowTitleJa{
  display: block;
  color: rgba(255,255,255,.98);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: clamp(24px, 3.3vw, 36px);
  font-weight: 500;
  letter-spacing: .08em;
}
.recoveryStep h4 small{
  display: block;
  margin-top: 6px;
  color: rgba(229, 207, 151, .92);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.4;
}
.recoveryStep p{
  font-size: 15px !important;
  line-height: 1.9 !important;
}

@media (max-width: 900px){
  .recoveryCourseSpotlight{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 16px;
    padding: 24px 18px;
    border-radius: 30px;
  }
  .recoveryCourseSpotlight__label{
    width: auto;
    height: auto;
    padding: 7px 14px;
  }
  .recoveryCourseSpotlight__body h3{
    font-size: clamp(30px, 8vw, 42px);
  }
  .recoveryCourseSpotlight__price{
    width: min(100%, 420px);
  }
  .recoveryGrid--condition{
    grid-template-columns: 1fr !important;
  }
  .recoveryStep{
    grid-template-columns: 68px 150px minmax(0,1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px){
  .hero__content{
    padding-bottom: 30px !important;
  }
  .heroQuickOffer{
    margin-top: 18px !important;
  }

  .section--deepRecovery{
    padding-top: 58px !important;
  }
  .section--deepRecovery .sectionHead{
    margin-bottom: 22px !important;
  }
  .section--deepRecovery .h2{
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
  }
  .recoveryHero--concept{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    margin: 22px 0 22px !important;
  }
  .recoveryHero__logoCard{
    width: min(100%, 340px) !important;
    margin: 0 auto !important;
  }
  .recoveryHero__body{
    align-items: center !important;
  }
  .recoveryHero__eyebrow{
    align-self: center !important;
  }
  .recoveryHero__copy--concept{
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.92 !important;
    max-width: 100% !important;
  }

  .recoveryCourseSpotlight{
    margin: 18px 0 26px !important;
    padding: 22px 14px !important;
  }
  .recoveryCourseSpotlight__body h3{
    font-size: clamp(28px, 8.4vw, 36px) !important;
    line-height: 1.36 !important;
  }
  .recoveryCourseSpotlight__body p{
    font-size: 13px !important;
  }
  .recoveryCourseSpotlight__price{
    flex-wrap: wrap !important;
    width: min(100%, 340px) !important;
    padding: 14px 16px 16px !important;
    gap: 8px 12px !important;
  }
  .recoveryCourseSpotlight__price span{
    width: 100% !important;
    text-align: center !important;
  }
  .recoveryCourseSpotlight__price strong{
    font-size: 48px !important;
  }

  .recoveryCard{
    padding: 22px 18px !important;
    border-radius: 26px !important;
  }
  .recoveryCard--device .h3,
  .recoveryCard--compactVisualize .h3{
    font-size: 24px !important;
    line-height: 1.5 !important;
  }
  .recoveryMockup--device img{
    width: min(100%, 330px) !important;
    border-radius: 24px !important;
  }
  .recoveryCard--compactVisualize,
  body.theme-dark .recoveryCard--compactVisualize{
    padding: 20px 14px 18px !important;
  }
  .recoveryCard--compactVisualize .phaseMoon,
  body.theme-dark .recoveryCard--compactVisualize .phaseMoon{
    right: -34px !important;
    top: 50% !important;
    width: 128px !important;
    opacity: .86 !important;
  }
  .recoveryCard--compactVisualize .recoveryCard__head,
  body.theme-dark .recoveryCard--compactVisualize .recoveryCard__head,
  .recoveryCard--compactVisualize .recoveryList,
  body.theme-dark .recoveryCard--compactVisualize .recoveryList{
    width: 100% !important;
    max-width: calc(100% - 74px) !important;
  }
  .recoveryCard--compactVisualize .recoveryList{
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  .recoveryCard--compactVisualize .recoveryCard__head--compact{
    margin-top: 18px !important;
  }

  .recoveryStep{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
    text-align: left !important;
  }
  .recoveryStep > span{
    margin-bottom: 0 !important;
  }
  .recoveryStep__media{
    width: min(100%, 250px) !important;
  }
  .flowTitleJa{
    font-size: 28px !important;
    line-height: 1.28 !important;
  }
  .recoveryStep h4 small{
    font-size: 14px !important;
  }
  .recoveryStep p{
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}


/* ============================================
   2026-05-29 PC menu visibility update
   PC表示でもメニューまわりの背景を少し明るくして視認性を上げる
   ============================================ */

/* MENUボタン自体：PC/SP共通で少し明るいネイビーに */
.navToggle,
body.theme-dark .navToggle{
  background:
    radial-gradient(circle at 50% 14%, rgba(112, 148, 205, .42), transparent 50%),
    linear-gradient(180deg, rgba(20, 48, 88, .98), rgba(8, 27, 58, .98)) !important;
  border: 1px solid rgba(205, 226, 255, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(120, 158, 220, .12) !important;
}
.navToggle__bar,
.navToggle span.navToggle__bar{
  background: rgba(255,255,255,.98) !important;
}
.navToggle__label,
.navToggle span.navToggle__label{
  color: rgba(255,255,255,.96) !important;
}

/* PCで通常ナビが表示される場合も、各メニューを少し明るいピル型にする */
@media (min-width: 861px){
  body.theme-dark .nav a{
    background: rgba(18, 45, 78, .46) !important;
    border: 1px solid rgba(190, 215, 255, .18) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    color: rgba(255,255,255,.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 8px 20px rgba(0,0,0,.14) !important;
  }
  body.theme-dark .nav a:hover{
    background: rgba(31, 69, 112, .64) !important;
    border-color: rgba(220, 235, 255, .32) !important;
    color: #fff !important;
  }
}

/* ============================================
   2026-05-29 Header background brightness update
   メニュー背景全体（ヘッダー帯）を少し明るい紺色に調整
   ============================================ */
.header,
body.theme-dark .header{
  background:
    radial-gradient(circle at 12% 0%, rgba(42, 82, 122, .30), transparent 40%),
    linear-gradient(180deg, rgba(13, 28, 48, .98) 0%, rgba(10, 25, 43, .96) 100%) !important;
  border-bottom: 1px solid rgba(168, 190, 218, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.26) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
}

.header__inner{
  background: transparent !important;
}

/* MENUボタンもヘッダー帯に合わせて少しだけ明るい紺へ */
.navToggle,
body.theme-dark .navToggle{
  background:
    linear-gradient(180deg, rgba(28, 55, 91, .98), rgba(12, 34, 65, .98)) !important;
  border-color: rgba(205, 226, 255, .42) !important;
}


/* ============================================
   2026-05-29 Flow PC text balance update
   PC表示：施術の流れカードの右余白を活かし、文字エリアを横に広げる
   ============================================ */
@media (min-width: 901px){
  .recoveryCard--flow .recoverySteps{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .recoveryCard--flow .recoveryStep{
    display: grid !important;
    grid-template-columns: 76px 112px minmax(0, 1fr) !important;
    grid-template-areas: "tag media body" !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 24px 28px !important;
    min-height: 150px !important;
  }

  .recoveryCard--flow .recoveryStep > span{
    grid-area: tag !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .recoveryCard--flow .recoveryStep__media{
    grid-area: media !important;
    width: 112px !important;
    max-width: 112px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  .recoveryCard--flow .recoveryStep__media img{
    width: 100% !important;
    border-radius: 22px !important;
  }

  .recoveryCard--flow .recoveryStep__body{
    grid-area: body !important;
    width: 100% !important;
    max-width: none !important;
    align-self: center !important;
  }

  .recoveryCard--flow .recoveryStep__body h4{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 10px 18px !important;
    margin: 0 0 10px !important;
    width: 100% !important;
  }

  .recoveryCard--flow .flowTitleJa{
    display: inline !important;
    font-size: clamp(24px, 2.6vw, 34px) !important;
    line-height: 1.28 !important;
    letter-spacing: .07em !important;
    white-space: normal !important;
  }

  .recoveryCard--flow .recoveryStep h4 small{
    display: inline !important;
    margin-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .recoveryCard--flow .recoveryStep p{
    max-width: none !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    letter-spacing: .04em !important;
  }
}

/* TOPの横長料金バッジは不要のため非表示（念のため） */
.heroQuickOffer{
  display: none !important;
}

/* ============================================
   2026-05-29 final mobile/PC refinement
   コース価格を「上=タイトル / 下=金額」の2段に整理、施術フロー見出しを小さめに調整
   ============================================ */

/* コース価格：2行構成（上=タイトル、下=金額） */
.recoveryCourseSpotlight,
body.theme-dark .recoveryCourseSpotlight{
  max-width: 760px !important;
  margin: 20px auto 34px !important;
  padding: 24px 26px 26px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: center !important;
  border-radius: 30px !important;
}

.recoveryCourseSpotlight__label{
  display: none !important;
}

.recoveryCourseSpotlight__body h3{
  margin: 0 !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.38 !important;
  letter-spacing: .08em !important;
}

.recoveryCourseSpotlight__body p{
  display: none !important;
}

.recoveryCourseSpotlight__price{
  width: auto !important;
  min-width: min(100%, 420px) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 13px 28px 15px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 12px !important;
  border-radius: 999px !important;
}

.recoveryCourseSpotlight__price span,
.recoveryCourseSpotlight__price small{
  width: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

.recoveryCourseSpotlight__price strong{
  font-size: clamp(34px, 4.2vw, 50px) !important;
  line-height: .95 !important;
}

/* 施術フローの日本語見出し：大きすぎる印象を抑える */
.recoveryCard--flow .flowTitleJa,
.flowTitleJa{
    font-size: clamp(18px, 1.9vw, 24px) !important;
    line-height: 1.42 !important;
    letter-spacing: .06em !important;
    white-space: normal !important;
    font-weight: 700;
}

.recoveryCard--flow .recoveryStep h4 small{
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.recoveryCard--flow .recoveryStep p{
  font-size: 15px !important;
  line-height: 1.9 !important;
}

@media (max-width: 640px){
  .recoveryCourseSpotlight,
  body.theme-dark .recoveryCourseSpotlight{
    margin: 18px 0 26px !important;
    padding: 22px 16px 24px !important;
    gap: 12px !important;
  }

  .recoveryCourseSpotlight__body h3{
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.42 !important;
  }

  .recoveryCourseSpotlight__price{
    min-width: 0 !important;
    width: min(100%, 330px) !important;
    padding: 12px 16px 14px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .recoveryCourseSpotlight__price span,
  .recoveryCourseSpotlight__price small{
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .recoveryCourseSpotlight__price strong{
    font-size: 38px !important;
    white-space: nowrap !important;
  }

  .recoveryCard--flow .flowTitleJa,
  .flowTitleJa{
    font-size: 22px !important;
    line-height: 1.38 !important;
  }
}


/* ============================================
   Concept full text / course emphasis update
   2026-05 concept修正
   ============================================ */
.conceptLuxury .waku{
  max-width: 980px !important;
  margin: 34px auto 0 !important;
  text-align: left !important;
  line-height: 2.15 !important;
  letter-spacing: .055em !important;
}

@media (max-width: 680px){
  .conceptLuxury .waku{
    max-width: 100% !important;
    margin-top: 24px !important;
    line-height: 2.0 !important;
    font-size: 14px !important;
    letter-spacing: .035em !important;
  }

  .recoveryHero--concept .recoveryHero__body{
    text-align: center !important;
  }

  .recoveryCourseSpotlight{
    margin-top: 22px !important;
  }
}


/* ============================================
   Restore / emphasize For Executive VIP section
   2026-05-29
   ============================================ */
#features.section--paper{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  padding: 72px 0 76px !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(32, 88, 96, .30), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(34, 64, 106, .30), transparent 36%),
    linear-gradient(115deg, #071522 0%, #0b1d2f 52%, #111f37 100%) !important;
  color:#f4f1e8 !important;
}

#features .sectionHead{
  margin-bottom: 28px !important;
}

#features .sectionHead .h2{
  color:#f4f1e8 !important;
  letter-spacing:.08em !important;
}

#features .sectionHead .sub,
#features .sectionHead .muted{
  color:rgba(244,241,232,.72) !important;
}

#features .featureGrid{
  display:grid !important;
  grid-template-columns:1fr !important;
  max-width:1220px !important;
  margin: 18px auto 0 !important;
}

#features .panel--recommend{
  display:block !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:22px !important;
  background:
    linear-gradient(90deg, rgba(6,33,43,.94) 0%, rgba(6,33,43,.90) 48%, rgba(6,33,43,.76) 100%) !important;
  border:1px solid rgba(228,210,165,.14) !important;
  box-shadow:0 20px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#features .panel--recommend::after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border-radius:20px !important;
  background:
    linear-gradient(90deg, rgba(6,33,43,.94) 0%, rgba(6,33,43,.88) 52%, rgba(6,33,43,.56) 100%),
    url('../images/bk.png') right -6px center / auto 118% no-repeat !important;
  opacity:.55 !important;
  pointer-events:none !important;
  z-index:0 !important;
}

#features .panel--recommend > *{
  position:relative !important;
  z-index:1 !important;
}

#features .recommendList{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:16px 16px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

#features .recommendItem{
  min-height:74px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:18px 18px 18px 58px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
  color:rgba(255,255,255,.92) !important;
  font-size:17px !important;
  line-height:1.55 !important;
  letter-spacing:.06em !important;
}

#features .recommendItem::before{
  left:16px !important;
}

#features .recommendImage{
  display:none !important;
}

@media (max-width: 680px){
  #features.section--paper{
    padding:52px 0 56px !important;
  }

  #features .wrap{
    width:min(100% - 28px, 1220px) !important;
  }

  #features .recommendList{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #features .recommendItem{
    min-height:64px !important;
    font-size:14px !important;
    padding:15px 14px 15px 52px !important;
  }

  #features .panel--recommend::after{
    inset:12px !important;
    background:
      linear-gradient(180deg, rgba(6,33,43,.92) 0%, rgba(6,33,43,.82) 62%, rgba(6,33,43,.68) 100%),
      url('../images/bk.png') right -8px bottom / auto 96% no-repeat !important;
    opacity:.38 !important;
  }
}
/* CONCEPT見出しを金色に */
.conceptLuxury .hsA__kicker,
.conceptLuxury .hsA__title,
.conceptLuxury .conceptTitle {
  color: #d8b76a !important;
}

/* 「— 静けさの中で、思考は整う。—」を少し上品な金色に */
.conceptLuxury .conceptTitle {
  color: #e6cf91 !important;
  text-shadow: 0 0 18px rgba(216, 183, 106, 0.18) !important;
}

/* 英字CONCEPTとコンセプトも金色寄りに */
.conceptLuxury .hsA__kicker,
.conceptLuxury .hsA__title {
  color: #c9a85d !important;
  letter-spacing: 0.18em !important;
}/* コース金額メニューを横長に調整 */
.recoveryCourseSpotlight {
  width: min(720px, 92vw) !important;
  max-width: 720px !important;
  padding: 28px 32px !important;
}

.recoveryCourseSpotlight__price {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.recoveryCourseSpotlight__price strong {
  font-size: 48px !important;
}/* 施術フローの日本語タイトル帯を金＋クリーム系に変更 */
.recoveryStep .flowTitleJa,
.recoveryCard--flow .flowTitleJa {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 7px 18px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(
    90deg,
    #f7e6ad 0%,
    #d8b45e 48%,
    #f2df9b 100%
  ) !important;
    color: #071421 !important;
    border: 1px solid rgba(255, 238, 184, 0.75) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 22px rgba(0, 0, 0, 0.22) !important;
    font-size: clamp(17px, 2vw, 22px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
    font-style: normal;
}

/* 英語サブタイトルも少し金色寄りに */
.recoveryStep h4 small,
.recoveryCard--flow .recoveryStep h4 small {
  color: #e8d28d !important;
}

/* スマホ時は横にはみ出さないように */
@media (max-width: 680px) {
  .recoveryStep .flowTitleJa,
  .recoveryCard--flow .flowTitleJa {
    font-size: 17px !important;
    padding: 7px 14px 8px !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
  }
}
/* 施術フロー写真を大きくする */
@media (min-width: 681px) {
  .recoveryCard--flow .recoveryStep {
    grid-template-columns: 76px 180px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    min-height: 230px !important;
    padding: 30px 34px !important;
  }

  .recoveryCard--flow .recoveryStep__media {
    width: 180px !important;
    max-width: 180px !important;
  }

  .recoveryCard--flow .recoveryStep__media img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 26px !important;
  }
}


/* =====================================================
   2026-06-04 Instagram icon追加
   - 下部バナー：INSTAGRAM文字の左にアイコン
   - PC左追随：Instagramマークのみ
   ===================================================== */
.ctaBanner--instagram .ctaBanner__label{
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}
.ctaBanner--instagram .instagramSvg{
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.30));
}
.fixedInstagramIcon{
  position: fixed;
  left: 28px;
  top: calc(50% + 76px);
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5e7b8;
  background: linear-gradient(180deg, rgba(8,16,28,.96), rgba(5,10,18,.96));
  border: 1px solid rgba(228,210,165,.38);
  box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .22s ease, filter .22s ease, border-color .22s ease;
}
.fixedInstagramIcon .instagramSvg{
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}
.fixedInstagramIcon:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.62);
}
.fixedInstagramIcon:focus-visible{
  outline: 3px solid rgba(228,210,165,.28);
  outline-offset: 4px;
}
@media (max-width: 760px){
  .fixedInstagramIcon{
    display: none !important;
  }
}