/* =========================================================
   Test Layout (stylers_test.css)
   - 大きく配置変更：HEROを左右2カラム（右：大きい写真）
   - 既存トーン＆マナー踏襲（黒×金）
========================================================= */
:root{
  --bg1:#0f0f10; --bg2:#16171a;
  --paper:#121212; --ink:#eaeaea; --muted:#a8a8a8;
  --gold:#d4af37; --gold-deep:#b9972a; --line:#262626;

  --fs-xs:12px; --fs-sm:14px; --fs-md:16.5px; --fs-lg:18.5px;
  --fs-h2:32px; --fs-h1:40px;

  --hdr-h:72px; --hdr-h-sm:60px;

  /* 予約バーの実高さ（JSが更新） */
  --sb-h: 0px;
}

*{ box-sizing:border-box }
html,body{ margin:0 }
html{ scroll-behavior:smooth }
body{
  color:var(--ink);
  font: var(--fs-md)/1.85 'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  letter-spacing:.01em; font-feature-settings:"palt" 1,"liga" 1,"kern" 1;
  background:
    radial-gradient(120% 140% at 78% 18%, rgba(212,175,55,.12) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  /* 予約バー分の下余白（+ゆとり） */
  padding-bottom: calc(var(--sb-h) + env(safe-area-inset-bottom) + 24px);
}
html{ scroll-padding-bottom: calc(var(--sb-h) + 24px); }

a{ color:inherit; text-decoration:none }
.container{ max-width:1120px; margin:0 auto; padding:0 20px }
h1,h2,h3{ margin:0 0 .6em }
.serif{ font-family:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif }
.sec-title{ font-family:'Noto Serif JP',serif; font-weight:800; font-size:var(--fs-h2); letter-spacing:.02em }
p{ margin:0 0 1em; color:#e9e9e9 }
.lead{ font-size:var(--fs-lg); color:#f0f0f0; text-wrap:pretty }
.muted{ color:#bfbfbf }

/* =========================================================
   Background Logo
========================================================= */
.page-logo-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; isolation:isolate }
.page-logo-bg::after{
  content:""; position:absolute; inset:0;
  background-image:url("assets/logo.jpg");
  background-repeat:no-repeat; background-position:center 18vh;
  background-size:min(82vw,1200px) auto;
  mix-blend-mode:screen; opacity:.85; filter:drop-shadow(0 22px 64px rgba(0,0,0,.55));
}
body > *:not(.page-logo-bg){ position:relative; z-index:1 }

/* =========================================================
   Header
========================================================= */
.header{
  position:sticky; top:0; z-index:2000;
  background:linear-gradient(180deg,rgba(10,10,12,.9),rgba(18,20,24,.9));
  color:#f5f5f5; box-shadow:0 12px 28px rgba(0,0,0,.28);
  border-bottom:1px solid rgba(212,175,55,.18);
  backdrop-filter:saturate(140%) blur(6px);
  padding-top:env(safe-area-inset-top);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.header.is-scrolled{ background:linear-gradient(180deg,rgba(10,10,12,.92),rgba(16,18,22,.95)) }
.nav{ height:var(--hdr-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; justify-self:flex-start }
.brand img{ height: clamp(42px, 6.8vw, 92px); width:auto; display:block }
.global-nav{ justify-self:center; display:flex; gap:18px; font-weight:600; letter-spacing:.02em }
.global-nav a{ opacity:.9; border-bottom:1px solid transparent }
.global-nav a:hover{ opacity:1; border-bottom-color:rgba(212,175,55,.5) }
.nav-cta{ justify-self:end }

/* =========================================================
   Sections
========================================================= */
.section{ background:var(--paper); border-radius:28px; box-shadow:0 18px 60px rgba(0,0,0,.35); margin:24px 0; overflow:clip }

/* ---------- HERO（左右2カラム） ---------- */
.hero{ background:transparent; box-shadow:none; margin:12px 0 0 }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; padding:64px 0 32px }
.hero-copy{ max-width:66ch }
.eyebrow{ font-size:var(--fs-xs); letter-spacing:.18em; color:#c5b58b; text-transform:uppercase; margin-bottom:12px }
.hero-title{ font-family:'Noto Serif JP',serif; font-weight:900; font-size: clamp(26px,5.4vw,42px); line-height:1.22; color:#fff; margin:0 0 8px; letter-spacing:.01em }
.hero-title .divider{ display:inline-block; margin:0 .35em; color:#c5b58b }
.bullets{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 22px }
.chip{ font-size:12px; padding:7px 10px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid #3a3a3a }

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:12px 16px; border-radius:999px; border:1px solid transparent; font-weight:700; letter-spacing:.02em; white-space:nowrap }
.btn-gold{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#101010; box-shadow:0 8px 20px rgba(212,175,55,.22) }
.btn-ghost{ border-color:#3a3a3a; background:transparent; color:#eaeaea }

.hero-visual{ margin:0; }
.carousel{ position:relative; aspect-ratio: 3/4; border-radius:22px; overflow:hidden; border:1px solid #2a2a2a; background:#0f0f10; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -60px 120px rgba(0,0,0,.45) }
.c-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease; z-index:0 }
.c-slide.is-active{ opacity:1; z-index:1 }
.c-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.25); color:#fff; display:grid; place-items:center; backdrop-filter:blur(4px) }
.c-btn.prev{ left:10px } .c-btn.next{ right:10px }
.c-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:10 }
.c-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); border:0 }
.c-dots button.is-active{ background:#fff }

/* ---------- B/A ---------- */
#beforeafter{ padding:34px 0 }
.note{ color:#cfcfcf; margin:0 0 14px }
.ba-carousel{ position:relative; height:clamp(320px,52vw,560px); border-radius:16px; overflow:hidden; border:1px solid #2a2a2a; background:#0f0f10; margin-bottom:14px }
.ba-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0b0b0c; opacity:0; transition:opacity .5s ease }
.ba-slide.is-active{ opacity:1 }
.ba-btn{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.25); color:#fff; display:grid; place-items:center; backdrop-filter:blur(4px); z-index:2 }
.ba-btn.prev{ left:10px } .ba-btn.next{ right:10px }
.ba-dots{ display:flex; gap:8px; justify-content:center }
.ba-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); border:0 }
.ba-dots button.is-active{ background:#fff }

.ba-copy{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.ba-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ---------- reasons / credentials / plans / access（共通） ---------- */
#reasons{ padding:44px 0 }
.bigcopy{ font-family:'Noto Serif JP',serif; font-size:26px; margin:0 0 16px; color:#f3f3f3 }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:12px 0 22px }
.card{ border:1px solid #2a2a2a; border-radius:16px; background:#141414; padding:18px; transition:transform .12s ease, box-shadow .12s ease }
.card h3{ margin:0 0 6px; font-size:18px; color:#fff }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35) }

.credentials{ padding:44px 0 }
.cred-lead{ color:#d6d6d6; margin:-6px 0 14px }
.cred-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.cred-list li{ display:flex; align-items:center; gap:10px; background:#141414; border:1px solid #2a2a2a; color:#eaeaea; border-radius:14px; padding:12px 14px }
.cred-list .seal{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#101010; font-weight:800; font-size:12px; box-shadow:0 6px 16px rgba(212,175,55,.22) }

#reviews{ padding:44px 0 }
.ticker{ overflow:hidden; border:1px solid #2a2a2a; border-radius:16px; background:#141414 }
.t-row{ display:flex; gap:24px; white-space:nowrap; animation:marq 28s linear infinite; padding:12px }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.quote{ display:inline-flex; gap:8px; align-items:center }
.star{ color:#f3c80a }

#plans{ padding:44px 0 }
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.p{ border:1px solid #2a2a2a; border-radius:16px; background:#141414; padding:18px }
.p .yen{ font-family:'Noto Serif JP',serif; font-weight:800; font-size:22px; margin:6px 0 10px; color:#fff }

#access{ padding:44px 0 }
.map{ border-radius:22px; overflow:hidden; border:1px solid rgba(212,175,55,.35); box-shadow:0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) }
.map iframe{ width:100%; height:100%; border:0 }
.links-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px }
.lc{ background:linear-gradient(180deg,#fff,#f6f6f6); color:#111; font-weight:600; border:1px solid rgba(255,255,255,.65); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.65); text-align:center; padding:14px; transition:transform .18s ease, box-shadow .18s ease }
.lc:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.85) }
.contact{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(212,175,55,.28); color:#e9e9e9; line-height:1.85 }
.contact strong{ color:#f2f2f2 }

/* =========================================================
   Floating buttons etc.
========================================================= */
.floating-cta{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:50; display:none }
.floating-cta.show{ display:block }
.floating-cta .btn{ box-shadow:0 10px 24px rgba(0,0,0,.35) }

/* Sticky Booking Bar */
.sticky-booking{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  min-height: 64px;
  z-index: 2147483646;
  background: linear-gradient(180deg, rgba(20,22,26,.94), rgba(14,15,18,.96));
  border-top: 1px solid rgba(212,175,55,.28);
  backdrop-filter: saturate(140%) blur(8px);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  transform: translateZ(0);
}
.sticky-booking .sb-inner{
  max-width:1120px; margin:0 auto; padding:0 16px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.sb-copy{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sb-title{ font-weight:700; color:#fff; font-size:13px; letter-spacing:.02em }
.sb-note{ font-size:12.5px; color:#cfcfcf }
.sb-actions{ display:flex; gap:8px }
.sb-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; line-height:1; font-weight:700; letter-spacing:.02em; text-decoration:none; white-space:nowrap; border:1px solid transparent }
.sb-primary{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#101010; box-shadow:0 8px 20px rgba(212,175,55,.22) }
.sb-secondary{ border-color:#3a3a3a; background:transparent; color:#eaeaea }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:960px){
  .container{ padding:0 16px }
  .nav{ height:var(--hdr-h-sm) }
  .global-nav{ display:none }
  .hero-grid{ grid-template-columns:1fr; gap:18px; padding:28px 0 }
  .hero-copy{ text-align:center; margin-inline:auto }
  .lead{ margin-inline:auto; max-width:48ch }
  .hero-visual .carousel{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0 0 18px 18px; aspect-ratio: 10/9 }
  .c-slide{ object-position:center 20% }
  .bullets{ justify-content:center }
  .hero-actions{ justify-content:center }

  .cards{ grid-template-columns:1fr }
  .prices{ grid-template-columns:1fr }
  .links-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px){
  .links-grid{ grid-template-columns:1fr }
}

/* =================== Trust circles (5つの信頼) =================== */
.trust{ padding:44px 0 }
.trust-lead{ color:#d6d6d6; margin:-6px 0 14px }
.trust-grid{
  display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:center; align-items:center;
  margin-top:8px;
}
.trust-item{
  width:168px; aspect-ratio:1/1; border-radius:999px;
  background:#141414; border:1px solid #2a2a2a; position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.trust-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.25 }
.trust-code{
  font-weight:900; font-size:28px; letter-spacing:.06em; color:#101010;
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  box-shadow:0 8px 20px rgba(212,175,55,.22); margin-bottom:8px;
}
.trust-text{ color:#eaeaea; font-size:13.5px }
@media (max-width:960px){
  .trust-item{ width:148px }
}
@media (max-width:640px){
  .trust-item{ width:128px }
  .trust-code{ width:48px; height:48px; font-size:24px }
  .trust-text{ font-size:13px }
}

/* Header CTA removed – keep style here in case of residual markup */
.nav-cta{ display:none !important }

/* Mobile touch targets */
@media (max-width:768px){
  .btn{ min-height:48px }
  .sb-btn{ min-height:48px }
}

/* Header: center logo (desktop & mobile) */
header .nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-inline:16px }
header .nav .brand{ grid-column:2; justify-self:center; display:flex; align-items:center }
header .nav .brand img{ height: clamp(42px, 8.2vw, 96px); width:auto; display:block }
@media (max-width:768px){
  header .nav{ padding-inline:12px }
  header .nav .brand img{ height:75px }
}

/* ========== HERO stacked (image top -> copy below) ========== */
.hero.hero--stack .hero-grid{
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 12px 0 32px;
}
.hero.hero--stack .hero-copy{
  text-align: center;
  margin-inline: auto;
}
.hero.hero--stack .lead{
  margin-inline: auto;
  max-width: 52ch;
}
.hero.hero--stack .hero-visual .carousel{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0 0 18px 18px;
  aspect-ratio: 16 / 9;
}
@media (min-width: 961px){
  .hero.hero--stack .hero-visual .carousel{
    aspect-ratio: 16 / 6;
  }
}

/* =========================================================
   HERO: show full image (no cropping) for top.jpg
   - top.jpg intrinsic ratio = 1566x1044 = 3:2
   - Keep full-bleed width; maintain 3:2 height; use contain to avoid clipping
========================================================= */
.hero.hero--stack .hero-visual .carousel{
  aspect-ratio: 3 / 2 !important;
}
.hero.hero--stack .hero-visual .c-slide{
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 960px){
  .hero.hero--stack .hero-visual .carousel{
    aspect-ratio: 3 / 2 !important;
  }
}


/* =========================================================
   HERO Copy: relaxed spacing & better line breaks (PC / Mobile)
   - More breathing room around the H1 and lead
   - Balance heading line breaks (supported browsers)
   - Avoid lone "—" at line head on desktop
========================================================= */
.hero .hero-title{
  line-height: 1.35;          /* was 1.22 */
  margin-bottom: 16px;        /* was 8px */
  text-wrap: balance;         /* nicer auto line breaks on headings */
}
@media (min-width: 961px){
  .hero .hero-title{
    line-height: 1.32;
    margin-bottom: 18px;
  }
}

/* Lead paragraph spacing (only in hero) */
.hero .lead{
  line-height: 2.0;           /* was body default 1.85 */
  margin-top: 10px;
  margin-bottom: 10px;
  text-wrap: pretty;          /* keep natural phrase boundaries */
}

/* Keep "— 内側から美しく" together on desktop to prevent weird breaks */
.hero .hero-title .dash-group{ white-space: normal; }
@media (min-width: 961px){
  .hero .hero-title .dash-group{ white-space: nowrap; }
}

/* Slightly more vertical air within stacked hero */
.hero.hero--stack .hero-grid{
  gap: 24px;                   /* was 18px */
  padding: 16px 0 38px;        /* was 12px 0 32px */
}


/* =========================================================
   HERO copy: explicit line breaks per device
========================================================= */
.hero .hero-title{ display:grid; gap: 8px; }
.hero .hero-title .line{ display:block; }
.hero .hero-title .pc-only{ display:block; }
.hero .hero-title .mo-only{ display:none; }
.hero .hero-title .pc-line-1{ white-space:nowrap; }
.hero .hero-title .pc-line-2{ letter-spacing:.04em; }

/* Lead: show either PC or Mobile block */
.lead.lead-split .pc-only{ display:block; }
.lead.lead-split .mo-only{ display:none; }

@media (max-width: 960px){
  .hero .hero-title{ gap: 10px; }
  .hero .hero-title .pc-only{ display:none; }
  .hero .hero-title .mo-only{ display:block; }
  .lead.lead-split .pc-only{ display:none; }
  .lead.lead-split .mo-only{ display:block; }
}

/* =========================================================
   HERO: secondary slider under the copy
========================================================= */
.hero-copy .hero-slider{
  position:relative;
  width:100%;
  max-width:min(88vw, 860px);
  margin:16px auto 6px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #2a2a2a;
  background:#0f0f10;
  aspect-ratio:16 / 9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -30px 80px rgba(0,0,0,.35);
}
.hs-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .6s ease;
}
.hs-slide.is-active{ opacity:1 }
.hs-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(4px); z-index:2;
}
.hs-btn.prev{ left:10px } .hs-btn.next{ right:10px }
.hs-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; z-index:2;
}
.hs-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); border:0 }
.hs-dots button.is-active{ background:#fff }

/* spacing for CTA under slider */
.hero-copy .hero-actions{ margin-top:12px }

@media (max-width: 960px){
  .hero-copy .hero-slider{ aspect-ratio: 4 / 3; border-radius:14px; margin-top:12px }
}

/* ===== Reasons 調整：中央寄せ + モバイルでも2カラム維持 ===== */

/* テキストを中央寄せ（横）＋ブロック内で中央に寄せる */
.reason-row{ align-items: center; } /* 念のための縦センター */
.r-copy{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;                 /* 見出しと本文の間隔 */
}
.r-copy h3, .r-copy p{ text-align: center; }

/* デスクトップ：テキストの横幅を少し絞って真ん中感を強める（任意） */
@media (min-width: 961px){
  .r-copy{ max-width: 34ch; margin-inline: auto; }
}

/* ★モバイルでも2カラムのまま（前の1カラム指定を上書き） */
@media (max-width: 960px){
  .reason-row{
    grid-template-columns: 1fr 1fr; /* ← 以前の 1fr を上書き */
    gap: 10px;
    padding: 12px;
  }
  /* 画像の比率を少し縦寄りにして見やすく（お好みで調整可） */
  .r-img{ aspect-ratio: 4 / 3; }

  /* モバイルでの文字サイズを少しだけ調整（任意） */
  .r-copy{ font-size: 15px; line-height: 1.7; }
  .r-copy h3{ font-size: 16px; }
}

/* ===== Reasons: image + copy (2-column rows on PC & Mobile) ===== */
.reasons-rows{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 18px);
}

/* 行コンテナ（<a> でも <div> でもOK） */
.reason-row{
  display: grid;
  grid-template-columns: 1fr 1fr;         /* ← 横2ブロック化 */
  align-items: center;
  gap: clamp(10px, 2.2vw, 18px);
  padding: clamp(12px, 2.2vw, 16px);
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  background: #141414;
  text-decoration: none;                   /* <a>行の下線を消す */
  transition: transform .12s ease, box-shadow .12s ease;
}

/* 画像側 */
.r-img{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #0f0f10;
  aspect-ratio: 4 / 3;                    /* お好みで 16/9 などに */
}
.r-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

/* テキスト側（中央寄せ） */
.r-copy{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-inline: auto;
  max-width: 34ch;                        /* 読みやすく少し絞る */
}
.r-copy h3{
  margin: 0;
  font-size: clamp(16px, 1.7vw, 18px);
  color: #fff;
}
.r-copy p{ margin: 0; color: #e9e9e9; }

/* ①行（リンク行）のホバー効果：任意 */
.reason-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.reason-link:hover .r-img img{ transform: scale(1.02); }

/* ★スマホでも“横2ブロック”を維持（他の指定を強制上書き） */
@media (max-width: 960px){
  .reasons-rows .reason-row{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    padding: 12px;
  }
  .r-copy{ font-size: 15px; line-height: 1.7; }
  .r-copy h3{ font-size: 16px; }
}

/* ===== Before/After を2カラム（PC/モバイル共通で横並び） ===== */
#beforeafter .ba-grid{
  display: grid;
  align-items: center;
  gap: clamp(12px, 2.4vw, 22px);
}

/* 左カラム（見出し＋注記）を中央寄せ */
#beforeafter .ba-copy{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(6px, 1.4vw, 12px);
}
#beforeafter .ba-copy .sec-title{ margin: 0; }
#beforeafter .ba-copy .note{ margin: 0; }

/* 右カラム：スライダーのサイズを列幅にフィット（高さは比率で） */
#beforeafter .ba-carousel{
  width: 100%;
  height: auto !important;                      /* 既存の height 指定を打ち消し */
  aspect-ratio: 3 / 4;                          /* 縦画像想定。横長なら 4/3 や 16/9 に変更可 */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #0f0f10;
}

/* スライド画像の収まり（従来の contain は維持） */
#beforeafter .ba-slide{
  object-fit: contain;
  background: #0b0b0c;
}

/* ※スマホでも2カラム維持（他のメディアクエリより後で効かせる） */
@media (max-width: 960px){
  #beforeafter .ba-grid{
    gap: 10px;
  }
  #beforeafter .ba-carousel{ aspect-ratio: 3 / 4; }
}

/* ===== 5つの信頼：3-2 配置（PC/モバイル共通） ===== */
#trust .trust-grid{
  display: grid !important;                    /* 既存の flex を上書き */
  grid-template-columns: repeat(6, 1fr);       /* 6分割 → 各アイテムは2列ずつ使用 */
  gap: clamp(12px, 2.2vw, 22px) clamp(14px, 2.8vw, 28px);
  justify-items: center;
  align-items: center;
}

/* 円のサイズは枠幅に追従（大き過ぎないよう上限） */
#trust .trust-item{
  width: min(168px, 100%) !important;          /* PCでは最大168px、狭い画面では列幅にフィット */
  aspect-ratio: 1 / 1;                          /* 常に正円 */
}

/* 配置：上3つ（1行目）／下2つ（2行目を中央寄せオフセット） */
#trust .trust-item:nth-child(1){ grid-column: 1 / span 2; grid-row: 1; }
#trust .trust-item:nth-child(2){ grid-column: 3 / span 2; grid-row: 1; }
#trust .trust-item:nth-child(3){ grid-column: 5 / span 2; grid-row: 1; }
#trust .trust-item:nth-child(4){ grid-column: 2 / span 2; grid-row: 2; }
#trust .trust-item:nth-child(5){ grid-column: 4 / span 2; grid-row: 2; }

/*（任意）超狭幅端末で少しだけ小さくする
@media (max-width: 360px){
  #trust .trust-item{ width: min(140px, 100%) !important; }
}
*/

/* === 選ばれる3つの理由：画像を大きく（PC/スマホ対応） === */
/* 画像列 > テキスト列 にして、画像の比率も少しだけ縦を増やす */
#reasons .reason-row{
  grid-template-columns: 1.35fr .65fr;   /* ← 画像を広く（従来は 1fr 1fr） */
}
#reasons .reason-row.r--reverse{
  grid-template-columns: .65fr 1.35fr;   /* ← 2段目の左右反転にも対応 */
}
#reasons .r-img{
  aspect-ratio: 5 / 4;                   /* ← 少しだけ縦長にして背を高く */
}

/* スマホでも“2ブロック”のまま画像を広めに */
@media (max-width: 960px){
  #reasons .reason-row{
    grid-template-columns: 1.25fr .75fr !important;
  }
  #reasons .reason-row.r--reverse{
    grid-template-columns: .75fr 1.25fr !important;
  }
  #reasons .r-img{
    aspect-ratio: 4 / 3;                 /* スマホは過度に縦長にならないよう調整 */
  }
}

/* ==== 選ばれる3つの理由｜スマホで画像を大きく＆改行を自然に ==== */
@media (max-width: 960px){
  /* 常に2ブロック（50%｜50%）を維持 */
  #reasons .reason-row{
    grid-template-columns: 1fr 1fr !important;
    gap: 3px;                 /* 余白は少しだけ */
    padding: 12px;
  }

  /* 画像側：列幅いっぱいにしつつ「高さ」も確保（=存在感アップ） */
  #reasons .r-img{
    aspect-ratio: 5 / 4 !important;
    border-radius: 14px;
  }
  #reasons .r-img img{
    object-fit: cover;               /* 画角が違ってもはみ出しなく見栄え良く */
  }

  /* テキスト側：変なところで改行されにくくする */
  #reasons .r-copy{
    text-wrap: pretty;               /* 句読点や語のまとまりを優先 */
    line-break: strict;
    font-size: 15px;
    line-height: 1.7;
  }
  #reasons .r-copy h3{
    text-wrap: balance;              /* 見出しは段落内で均等割りの自動改行 */
    font-size: 16px;
  }

  /* 手動 <br> はモバイルでは隠して自然な折返しに任せる */
  #reasons .r-copy br{ display: none; }
}

/* ==== 選ばれる3つの理由：画像を“正方形にせず”もっと大きく ==== */
/* PC：画像 1.5fr｜テキスト 0.5fr にして、縦横比は 6:5（やや縦を広く） */
#reasons .reason-row{
  grid-template-columns: 1.3fr 0.7fr !important;
}
#reasons .reason-row.r--reverse{
  grid-template-columns: 0.7fr 1.3fr !important;
}
/* 高さ（面積）を増やす。1.2=6/5 は正方形(1.0)より少し横長、4/3(1.33)より背が高い */
#reasons .r-img{
  aspect-ratio: 5 / 4 !important;
}
#reasons .r-img img{
  object-fit: cover;
}

/* ==== #reasons：端の余白を減らして画像を拡大（特にスマホ） ==== */
@media (max-width: 960px){
  /* セクション内ガター（左右の余白）を狭くする */
  #reasons .container{
    padding-left: 2px !important;
    padding-right: 2px !important; /* 既定は16px → 8pxに */
  }

  /* 行カードの内側余白 & 隣接余白を減らす */
  #reasons .reasons-rows{ gap: 10px; }  /* 段間の上下余白を少し圧縮 */
  #reasons .reasons-rows .reason-row{
    padding: 1px !important;           /* 12～16px → 8px */
    gap: 10px !important;               /* 画像とテキストの隙間も少しだけ */
    grid-template-columns: 1.45fr 0.55fr !important; /* 画像の面積を拡大 */
  }
  #reasons .reasons-rows .reason-row.r--reverse{
    grid-template-columns: 0.55fr 1.45fr !important;
  }

  /* テキスト側の横幅制限を解除（狭い列でも詰まりにくく） */
  #reasons .r-copy{
    max-width: none !important;
  }

  /* 画像は“正方形にせず”少し背を高く（横長写真でもバランス良く） */
  #reasons .r-img{ aspect-ratio: 4 / 3 !important; }
  #reasons .r-img img{ object-fit: cover; }
}

/* ===== Patch: 2025-09-19 – LP微調整（スマホ改行／B&A矢印／理由レイアウト／連絡先の改行） ===== */

/* 文字改行を自然に（見出しは balance、本文は pretty） */
h1,h2,h3,.sec-title,.bigcopy{ text-wrap: balance; }
p{ text-wrap: pretty; }

/* Before/After：スマホで矢印が人物に被らないよう、サイズ縮小＋下部へ退避 */
@media (max-width: 560px){
  .ba-btn{
    width: 28px; height: 28px; 
    top: auto; bottom: 44px;            /* ドットの上に配置 */
    transform: none;
    background: rgba(0,0,0,.28);
    border-color: rgba(255,255,255,.2);
  }
  .ba-btn.prev{ left: 8px }
  .ba-btn.next{ right: 8px }
  .ba-dots{ bottom: 10px }
}

/* 選ばれる理由：画像と文字の距離を詰め、左寄せに統一 */
#reasons .reason-row{ gap: clamp(8px, 1.6vw, 14px) !important; }
#reasons .reason-row .r-copy{
  text-align: left !important;
  align-items: flex-start !important;
  max-width: 42ch;                 /* 読みやすい横幅に微調整 */
}
@media (max-width: 960px){
  #reasons .reason-row{ gap: 8px !important; }
  #reasons .reason-row .r-copy{ max-width: none; }
}

/* 固定予約バー：ボタン群の折返し対応（狭幅で崩れないように） */
.sticky-booking .sb-actions{ flex-wrap: wrap; }
@media (max-width: 560px){
  .sticky-booking .sb-actions .sb-btn.sb-primary{ flex: 1 1 100%; }
  .sticky-booking .sb-actions .sb-btn{ flex: 1 1 calc(50% - 6px); min-width: 160px; }
}

/* 連絡先：電話番号・メールを改行させない */
.contact a[href^="mailto:"],
.contact a[href^="tel:"]{ white-space: nowrap; }

section#reasons.reasons-v2 .bigcopy{
  font-family:'Noto Serif JP',serif;
  font-weight:900;
  font-size: clamp(22px, 3.8vw, 30px);
  letter-spacing:.02em;
  margin:0 0 12px;
}
section#reasons.reasons-v2 .bigcopy::after{
  content:"";
  display:block;
  width:72px; height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(212,175,55,.0));
  margin-top:8px;
}

section#reasons.reasons-v2 .reasons-rows{
  display:flex; flex-direction:column;
  gap: clamp(14px, 2.2vw, 18px);
}

section#reasons.reasons-v2 .reason-row{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr !important; /* image wider */
  align-items:center;
  gap: clamp(12px, 2.2vw, 18px) !important;
  padding: clamp(12px, 2vw, 18px) !important;
  border:1px solid #2a2a2a; border-radius:18px;
  background:#141414;
  overflow:clip;
  text-decoration:none;
  box-shadow: 0 14px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
section#reasons.reasons-v2 .reason-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Gold numbered medallion */
section#reasons.reasons-v2 .reason-row::before{
  content: attr(data-no);
  position:absolute; top:10px; left:10px;
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:900; font-size:14px; letter-spacing:.06em;
  color:#101010;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  box-shadow:0 8px 20px rgba(212,175,55,.22);
  z-index:3;
}

/* image */
section#reasons.reasons-v2 .r-img{
  border-radius:14px; overflow:hidden;
  border:1px solid #2a2a2a;
  aspect-ratio: 5 / 4 !important;
  background:#0f0f10;
}
section#reasons.reasons-v2 .r-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
section#reasons.reasons-v2 .reason-row:hover .r-img img{ transform: scale(1.02) }

/* copy */
section#reasons.reasons-v2 .r-copy{
  text-align:left !important;
  display:flex; flex-direction:column;
  align-items:flex-start !important; justify-content:center;
  gap:8px; margin-inline:auto; max-width: 50ch !important;
  padding: clamp(4px, 1vw, 8px);
}
section#reasons.reasons-v2 .r-title{
  margin:0;
  font-family:'Noto Serif JP',serif;
  font-weight:900;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height:1.35; color:#fff;
  text-wrap: balance;
}
section#reasons.reasons-v2 .r-desc{
  margin:0; color:#e8e8e8;
  line-height:1.9; text-wrap: pretty;
}

/* reverse row on desktop */
section#reasons.reasons-v2 .reason-row.r--reverse{
  grid-template-columns: .75fr 1.25fr !important;
}

/* Mobile: editorial stack (image top → text below) */
@media (max-width: 960px){
  section#reasons.reasons-v2 .reason-row{
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  section#reasons.reasons-v2 .reason-row .r-img{ aspect-ratio: 4 / 3 !important; border-radius:14px }
  section#reasons.reasons-v2 .reason-row .r-copy{ padding: 2px 4px 4px; max-width: none !important }
  section#reasons.reasons-v2 .reason-row.r--reverse .r-img{ order:1 }
  section#reasons.reasons-v2 .reason-row.r--reverse .r-copy{ order:2 }
  section#reasons.reasons-v2 .reason-row::before{ top:8px; left:8px; width:38px; height:38px; font-size:13px }
}

/* Ensure legacy center-alignment rules are neutralized inside .reasons-v2 */
section#reasons.reasons-v2 .r-copy h3, 
section#reasons.reasons-v2 .r-copy p{ text-align:left !important; }

@media (max-width: 960px) {
  section#reasons.reasons-v2 .reason-row,
  section#reasons.reasons-v2 .reason-row.r--reverse {
    grid-template-columns: 1fr !important; /* 全て縦積み */
  }
}
@media (max-width: 960px) {
  /* タイトル（見出し）は均等割りで見栄えを保つ */
  section#reasons.reasons-v2 .r-title {
    word-break: keep-all;       /* 単語の途中で切らない */
    overflow-wrap: anywhere;    /* 長すぎる単語は折る */
    text-wrap: balance;         /* 均等改行 */
  }

  /* 説明文は自然な文単位で改行 */
  section#reasons.reasons-v2 .r-desc {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    line-height: 1.7;
  }
}
/* ===== 集中ケアコース（高級感スタイル） ===== */
.focus-course{
  position:relative;
  background:linear-gradient(180deg,#14161a 0%, #0f0f10 100%);
  border-radius:24px;
  padding:22px 18px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  border:1px solid rgba(212,175,55,.22);
  overflow:hidden;
}
.focus-course::before{
  /* やわらかなゴールドのグロー */
  content:""; position:absolute; inset:-30% -20%;
  background:radial-gradient(55% 40% at 70% 25%, rgba(212,175,55,.14), transparent 65%);
  filter:blur(18px); pointer-events:none;
}

.fc-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px }
.fc-eyebrow{
  font-size:12px; letter-spacing:.18em; color:#c5b58b; text-transform:uppercase;
  background:rgba(0,0,0,.25); border:1px solid rgba(212,175,55,.25);
  padding:6px 10px; border-radius:999px;
}
.fc-title{ font-size:28px; margin:0; color:#fff; letter-spacing:.02em }
.fc-meta{ display:flex; align-items:center; gap:8px; margin-left:auto }
.fc-meta .pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px;
  background:#151515; border:1px solid #2a2a2a; color:#e8e8e8; font-size:13px;
}
.fc-meta .dot{ color:#7a7a7a; }

.fc-copy{
  color:#d9d9d9; margin:8px 0 14px; line-height:1.9;
}
.fc-copy strong{ color:#fff; font-weight:700 }
.fc-note{ color:#cfcfcf; font-size:12.5px }

.fc-actions{ display:flex; gap:10px; flex-wrap:wrap }
.fc-actions .btn{ min-height:46px; padding:12px 18px; }

/* モバイル最適化 */
@media (max-width:768px){
  .focus-course{ padding:18px 14px }
  .fc-head{ justify-content:center }
  .fc-title{ font-size:24px; text-align:center }
  .fc-meta{ margin-left:0 }
  .fc-copy{ text-align:center }
  .fc-actions{ flex-direction:column; }
  .fc-actions .btn{ width:100% }
}
/* ===== 集中ケアコース（改良版） ===== */
.focus-course{position:relative;background:linear-gradient(180deg,#14161a 0%,#0f0f10 100%);border:1px solid rgba(212,175,55,.22);border-radius:24px;padding:22px 18px;box-shadow:0 18px 60px rgba(0,0,0,.35);overflow:hidden}
.focus-course::before{content:"";position:absolute;inset:-30% -20%;background:radial-gradient(55% 40% at 70% 25%,rgba(212,175,55,.14),transparent 65%);filter:blur(18px);pointer-events:none}
.fc-head{display:flex;align-items:center;justify-content:flex-start;margin:0 0 6px}
.fc-title{margin:0;color:#fff;letter-spacing:.02em;font-size:28px}

/* 回数段落：独立＆中央寄せ可読 */
.fc-plan{display:flex;align-items:center;gap:12px;margin:6px 0 12px;color:#e8e8e8;justify-content:flex-start}
@media (max-width:768px){.fc-plan{justify-content:center}}
.plan-sep{opacity:.6}

/* スタイリッシュなピル（ゴールド縁取り＋グラス） */
.plan-badge{
  --bd:rgba(212,175,55,.6);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:999px;color:#fff;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.04);backdrop-filter:blur(6px);
  border:1px solid var(--bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.plan-badge:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35);background:rgba(255,255,255,.06)}
.plan-badge:active{transform:translateY(0) scale(.98)}

/* 説明文：見出しと同じセリフ体＋行間広めでスッキリ */
.fc-copy{color:#d9d9d9;margin:6px 0 0;line-height:1.9;font-size:16px}
.fc-copy strong{color:#fff;font-weight:700}
.fc-note{color:#cfcfcf;font-size:12.5px}
@media (max-width:768px){
  .focus-course{padding:18px 14px}
  .fc-title{font-size:24px;text-align:center}
  .fc-copy{text-align:center}
}
/* ===== 集中ケアコース：1枚ずつフェード切替 ===== */
.fc-fade{
  position:relative;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.22);
  background:#0f0f10;
  box-shadow:0 16px 48px rgba(0,0,0,.35);

  /* 高さ（見せ方に合わせて調整可） */
  aspect-ratio: 3 / 2;
  max-height: 560px;
  align-items: center;
  justify-content: center;
}

.fc-fade .fc-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 1s ease-in-out; /* フェードの滑らかさ */
}
.fc-fade .fc-slide.is-active{ opacity:1; }

/* PCでホバー中は一時停止したい場合は以下をON
.fc-fade:hover { --pause: paused; }
*/

@media (max-width:768px){
  .fc-fade{ aspect-ratio: 4 / 3; max-height: 480px; }
}

/* 動きが苦手な方向け */
@media (prefers-reduced-motion: reduce){
  .fc-fade .fc-slide{ transition:none }
}
/* ===== 1枚ずつフェード切替 ===== */
.fc-fade{
  position:relative;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.22);
  background:#0f0f10;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
  aspect-ratio: 3 / 2;
  max-height: 560px;
}

.fc-fade .fc-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 1s ease-in-out;
  z-index:0;
}
.fc-fade .fc-slide.is-active{ opacity:1; z-index:1; }

@media (max-width:768px){
  .fc-fade{ aspect-ratio: 4 / 3; max-height: 480px; }
}
@media (prefers-reduced-motion: reduce){
  .fc-fade .fc-slide{ transition:none }
}
/* ===============================
   Brand logo を下に下げる（PC/モバイル）
   ※数値だけ変えれば位置調整が完結
================================= */

/* どれだけ下げるか（PC） */
:root{
  --brand-shift: 16px;   /* ← 12〜24px くらいでお好み調整 */
}

/* モバイルは少し控えめ（任意） */
@media (max-width: 768px){
  :root{ --brand-shift: 10px; }
}

/* ヘッダーの行高を広げる（ロゴの分だけ余白を追加） */
header .nav{
  height: calc(var(--hdr-h) + var(--brand-shift));
}

/* ロゴだけ下へオフセット（見た目の位置を下げる） */
header .nav .brand{
  transform: translateY(var(--brand-shift));
}

/* 念のため画像にも反映したい場合は以下でもOK（どちらか一方で可） */
/* header .nav .brand img{ margin-top: var(--brand-shift); } */
/* ===============================
   Brand logo を下に下げる（PC/モバイル）
   ※数値だけ変えれば位置調整が完結
================================= */

/* どれだけ下げるか（PC） */
:root{
  --brand-shift: 16px;   /* ← 12〜24px くらいでお好み調整 */
}

/* モバイルは少し控えめ（任意） */
@media (max-width: 768px){
  :root{ --brand-shift: 10px; }
}

/* ヘッダーの行高を広げる（ロゴの分だけ余白を追加） */
header .nav{
  height: calc(var(--hdr-h) + var(--brand-shift));
}

/* ロゴだけ下へオフセット（見た目の位置を下げる） */
header .nav .brand{
  transform: translateY(var(--brand-shift));
}

/* 念のため画像にも反映したい場合は以下でもOK（どちらか一方で可） */
/* header .nav .brand img{ margin-top: var(--brand-shift); } */

/* ===== Section separator logo ===== */
.section-logo{
  background: linear-gradient(180deg,#0f0f10 0%, #0d0e12 100%);
  border-top: 1px solid rgba(212,175,55,.18);
  border-bottom: 1px solid rgba(212,175,55,.12);
  padding: 18px 0;                 /* 上下余白 */
}

.section-logo .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-logo img{
  display: block;
  width: min(220px, 38vw);         /* PC: 最大220px, 画面に応じて縮小 */
  height: auto;
  opacity: .98;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
}

@media (max-width: 768px){
  .section-logo{ padding: 14px 0; }
  .section-logo img{ width: min(190px, 52vw); }
}

/* ===== 見出し横にロゴを並べる ===== */
.sec-title--withlogo{
  display: flex;
  align-items: center;
  justify-content: space-between; /* テキスト左／ロゴ右 */
  gap: 14px;
  /* 見出し上下の余白は既存.sec-titleに準拠 */
}

.sec-title--withlogo > span{
  display: block;                 /* テキスト側はそのまま */
}

/* ロゴのサイズ＆質感 */
.sec-title--withlogo .title-logo{
  height: 36px;                  /* 見出しに対して控えめな高さ */
  width: auto;
  opacity: .98;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* 画面幅でロゴを少しだけ縮小 */
@media (max-width: 960px){
  .sec-title--withlogo{ gap: 10px; }
  .sec-title--withlogo .title-logo{ height: 60px; }
}
@media (max-width: 560px){
  .sec-title--withlogo .title-logo{ height: 60px; }
}