/* =========================================================
   BIWAKO GYM  —  style.css
   色・余白・書体はこのファイル冒頭の :root でまとめて調整できます
   ========================================================= */

:root{
  /* ── 料金表PDFから採色したブランドカラー ───────────────── */
  --navy:       #1E3F65;   /* PDFの帯・ロゴの紺 */
  --navy-deep:  #16304E;   /* さらに濃い紺 */
  --blue:       #3074B2;   /* PDFの表ヘッダーの青 */
  --accent:     #CF4037;   /* PDFの価格・電話番号の赤 */
  --orange:     #E06426;   /* PDFのSTEPバッジの橙（予備） */
  --hero-en:    #2582BB;   /* ヒーローの「GOOD.」の青 */

  --paper:      #F7F9FC;   /* 背景（ごく淡いブルーグレー） */
  --paper-2:    #E9F1F9;   /* 一段濃い背景（PDFのタグ・囲みの水色） */
  --cream:      #FFF6E9;   /* 強調行・囲みのベージュ */
  --cream-line: #EFE0CB;   /* ベージュ囲みの罫線 */

  --ink:        #1B3A5E;   /* 文字・ボタン・ダーク面（＝紺） */
  --ink-mid:    #4E6480;   /* 本文グレー（紺寄り） */
  --ink-soft:   #8296AE;   /* 補足・キャプション */
  --line:       #D3DFEC;   /* 罫線 */
  --line-soft:  #E3EBF4;
  --white:      #FFFFFF;

  --w: 1180px;                        /* コンテンツ幅 */
  --pad: clamp(20px, 5.5vw, 72px);    /* 左右の余白 */
  --sec: clamp(88px, 13vw, 190px);    /* セクション上下の余白 */

  --en: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-size:15px; line-height:2.05; letter-spacing:.045em;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }

/* ── 日本語の折り返し ─────────────────────────────────
   balance：見出しの各行の長さを揃える（「い。」だけ最終行に残るのを防ぐ）
   pretty ：本文の最終行が極端に短くならないようにする
   strict ：句読点や小書き文字が行頭に来ないようにする（禁則処理）        */
h1,h2,h3,h4,h5,.sec-title,.big,.hero-lead{ text-wrap:balance }
p,li,dd,.jl,.note{ text-wrap:pretty }
/* 2〜4行程度の短い説明文は balance で行の長さを揃える */
.sec-desc, .step p, .pillar p, .scard p, .dsvc p, .dcard .d, .box li,
.tl p, .faq .a, .cp p, .callout .v small, .ccard p, .info dd small,
.box .fine, .ft .addr, .phero p, .hero-sub, .hero-ja, .band h2,
.scroll-hint, .crumb, .qlist li, .numlist li span,
.faq summary, .info dd, .ft li, .tbl-head .sub, td.note, .step .big{ text-wrap:balance }
body{ line-break:strict; word-break:normal }
a{ color:inherit; text-decoration:none }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4,h5,p{ margin:0 }
::selection{ background:var(--ink); color:var(--paper) }

.inner{ max-width:var(--w); margin:0 auto; width:100% }
.narrow{ max-width:860px; margin:0 auto; width:100% }
.sec{ padding:var(--sec) var(--pad); position:relative }
.sec.tight{ padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(56px,8vw,110px) }
.sec.dark{ background:var(--ink); color:var(--paper) }
.sec.tone{ background:var(--paper-2) }
.hide-sp{ display:inline }

/* ---------- 出現アニメーション ---------- */
[data-rv]{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.1s cubic-bezier(.16,.72,.24,1), transform 1.1s cubic-bezier(.16,.72,.24,1);
  transition-delay:var(--d, 0s);
}
[data-rv].in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  [data-rv]{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

/* =========================================================
   ヘッダー
   ========================================================= */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  transition:background .5s, padding .5s, box-shadow .5s;
}
.hd.solid{
  background:rgba(247,249,252,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:16px var(--pad); box-shadow:0 1px 0 var(--line);
}
.hd-logo{ position:relative; display:block; line-height:0; z-index:2 }
.hd-logo img{ height:clamp(28px,3.4vw,38px); width:auto; transition:opacity .4s }
.hd-logo .lw{ position:absolute; inset:0 auto auto 0 }
.hd .lb{ opacity:0 }
.hd .lw{ opacity:1 }
.hd.solid .lb, .hd.on-light .lb{ opacity:1 }
.hd.solid .lw, .hd.on-light .lw{ opacity:0 }

.hd-right{ display:flex; align-items:center; gap:clamp(18px,3vw,42px) }
.nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,36px) }
.nav a{
  font-family:var(--en); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--white);
  position:relative; padding-bottom:4px; transition:color .35s, opacity .35s;
}
.nav a .ja{
  display:block; font-family:var(--jp); font-size:9.5px; letter-spacing:.14em;
  opacity:.6; margin-top:2px; font-weight:400;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .4s cubic-bezier(.16,.72,.24,1);
}
.nav a:hover::after, .nav a[aria-current]::after{ width:100% }
.hd.solid .nav a, .hd.on-light .nav a{ color:var(--ink) }

.hd-cta{
  font-family:var(--en); font-size:11px; letter-spacing:.16em; font-weight:500;
  border:1px solid rgba(255,255,255,.7); color:var(--white);
  padding:12px 22px; border-radius:999px; transition:.4s; white-space:nowrap;
}
.hd-cta:hover{ background:var(--white); color:var(--ink) }
.hd.solid .hd-cta, .hd.on-light .hd-cta{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.hd.solid .hd-cta:hover, .hd.on-light .hd-cta:hover{ background:var(--accent); border-color:var(--accent) }

/* ハンバーガー */
.burger{
  display:none; width:44px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; position:relative; z-index:130;
}
.burger span{
  position:absolute; left:9px; width:26px; height:1.5px; background:var(--white);
  transition:transform .45s cubic-bezier(.16,.72,.24,1), opacity .3s, background .4s;
}
.burger span:nth-child(1){ top:17px }
.burger span:nth-child(2){ top:25px }
.hd.solid .burger span, .hd.on-light .burger span{ background:var(--ink) }
body.menu-open .burger span{ background:var(--paper) }
body.menu-open .burger span:nth-child(1){ transform:translateY(4px) rotate(28deg) }
body.menu-open .burger span:nth-child(2){ transform:translateY(-4px) rotate(-28deg) }

/* 全画面メニュー */
.menu{
  position:fixed; inset:0; z-index:110; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--pad) 48px;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto }
.menu ol{ counter-reset:m }
.menu li{ overflow:hidden; border-bottom:1px solid rgba(247,249,252,.14) }
.menu li:first-child{ border-top:1px solid rgba(247,249,252,.14) }
.menu li a{
  display:flex; align-items:baseline; gap:18px; padding:clamp(14px,2.4vw,22px) 4px;
  transform:translateY(105%); transition:transform .8s cubic-bezier(.16,.72,.24,1), color .3s;
}
body.menu-open .menu li a{ transform:none }
body.menu-open .menu li:nth-child(1) a{ transition-delay:.16s }
body.menu-open .menu li:nth-child(2) a{ transition-delay:.22s }
body.menu-open .menu li:nth-child(3) a{ transition-delay:.28s }
body.menu-open .menu li:nth-child(4) a{ transition-delay:.34s }
body.menu-open .menu li:nth-child(5) a{ transition-delay:.40s }
.menu .no{ font-family:var(--en); font-size:11px; letter-spacing:.2em; opacity:.45 }
.menu .en{ font-family:var(--en); font-size:clamp(28px,7vw,52px); font-weight:300; letter-spacing:-.01em; line-height:1.1 }
.menu .ja{ font-size:12px; letter-spacing:.14em; opacity:.55; margin-left:auto }
.menu li a:hover .en{ color:var(--accent) }
.menu-foot{
  margin-top:clamp(28px,5vw,54px); display:flex; flex-wrap:wrap; gap:10px 34px;
  font-family:var(--en); font-size:12px; letter-spacing:.14em; opacity:.6;
}

/* =========================================================
   ヒーロー（トップ）
   ========================================================= */
.hero{
  position:relative; min-height:640px; height:100svh; overflow:hidden;
  display:flex; align-items:flex-end; color:var(--white);
  padding:0 var(--pad) clamp(56px,8vw,96px);
}
.hero-bg{ position:absolute; inset:0; overflow:hidden }
.hero-bg img{ width:100%; height:100%; object-fit:cover; animation:heroZoom 16s cubic-bezier(.2,.6,.3,1) forwards }
@keyframes heroZoom{ from{ transform:scale(1.14) } to{ transform:scale(1) } }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,46,.60) 0%, rgba(10,26,46,.20) 34%, rgba(10,26,46,.84) 100%);
}
.hero-in{ position:relative; width:100%; max-width:var(--w); margin:0 auto }
.hero-en{
  font-family:var(--en); font-weight:300; letter-spacing:-.025em; line-height:.94;
  font-size:clamp(42px,8.6vw,116px); text-transform:uppercase;
  color:var(--hero-en);   /* ← ここを var(--white) にすると白に戻ります */
}
.hero-en span{ display:block; overflow:hidden }
.hero-en span i{
  display:block; font-style:normal; transform:translateY(105%);
  animation:rise 1.2s cubic-bezier(.16,.72,.24,1) forwards;
}
.hero-en span:nth-child(1) i{ animation-delay:.25s }
.hero-en span:nth-child(2) i{ animation-delay:.37s }
.hero-en span:nth-child(3) i{ animation-delay:.49s }
.hero-en em{ font-style:normal; color:var(--hero-en) }

/* BIWAKO GYM の下：TRAINING × STRETCH × CONDITIONING */
.hero-tag{
  margin-top:clamp(12px,1.6vw,20px);
  font-family:var(--en); font-weight:300; text-transform:uppercase;
  font-size:clamp(12.5px,2.05vw,27px); letter-spacing:.13em; line-height:1.3;
}
.hero-tag span{ display:block; overflow:hidden }
.hero-tag span i{
  display:block; font-style:normal; transform:translateY(105%);
  animation:rise 1.2s cubic-bezier(.16,.72,.24,1) .4s forwards;
}
.hero-tag em{ font-style:normal; color:var(--hero-en); padding:0 .12em }

/* 日本語のメインコピー */
.hero-ja-main{
  margin-top:clamp(24px,3.4vw,42px); font-size:clamp(16px,2.4vw,28px); font-weight:500;
  line-height:1.75; letter-spacing:.05em; opacity:0;
  animation:fadeUp 1.2s cubic-bezier(.16,.72,.24,1) .66s forwards;
}
.hero-ja-main em{ font-style:normal; color:var(--hero-en) }
.hero-lead{
  margin-top:clamp(14px,2vw,22px); font-size:clamp(13px,1.65vw,18px); font-weight:400;
  line-height:2; letter-spacing:.07em; color:rgba(255,255,255,.92); opacity:0;
  animation:fadeUp 1.2s cubic-bezier(.16,.72,.24,1) .82s forwards;
}
.hero-sub{
  margin-top:clamp(12px,1.6vw,18px); font-size:clamp(12px,1.4vw,15px); line-height:2;
  letter-spacing:.08em; color:rgba(255,255,255,.72); opacity:0;
  animation:fadeUp 1.2s cubic-bezier(.16,.72,.24,1) .96s forwards;
}
@media (max-width:520px){
  .hero-tag{ letter-spacing:.06em; font-size:12px }
}
@keyframes rise{ to{ transform:none } }
.hero-ja{
  margin-top:clamp(20px,3vw,34px); font-size:clamp(13px,1.5vw,16px); line-height:2.1;
  letter-spacing:.1em; max-width:34em; opacity:0; animation:fadeUp 1.2s cubic-bezier(.16,.72,.24,1) .75s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.hero-meta{
  margin-top:clamp(26px,4vw,44px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  font-family:var(--en); font-size:11px; letter-spacing:.18em; opacity:0;
  animation:fadeUp 1.2s cubic-bezier(.16,.72,.24,1) .95s forwards;
}
.hero-meta b{ font-weight:500 }
.hero-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent) }

.scroll-cue{
  position:absolute; right:var(--pad); bottom:0; z-index:3;
  font-family:var(--en); font-size:10px; letter-spacing:.24em; color:var(--white);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-cue::after{
  content:""; width:1px; height:74px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;
}
.scroll-cue i{
  position:absolute; left:50%; bottom:0; width:1px; height:74px; background:var(--white);
  transform-origin:top; animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0) } 45%{ transform:scaleY(1) } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* =========================================================
   下層ページのヒーロー
   ========================================================= */
.phero{
  padding:clamp(140px,17vw,220px) var(--pad) clamp(50px,7vw,90px);
  border-bottom:1px solid var(--line);
}
.phero .inner{ position:relative }
.crumb{ font-family:var(--en); font-size:10.5px; letter-spacing:.2em; color:var(--ink-soft); margin-bottom:clamp(20px,3vw,34px) }
.crumb a:hover{ color:var(--ink) }
.phero h1{
  font-family:var(--jp); font-weight:500; letter-spacing:.02em; line-height:1.55;
  font-size:clamp(26px,4.4vw,50px); margin-top:6px;
}
.phero p{ margin-top:clamp(18px,2.6vw,28px); max-width:46em; color:var(--ink-mid); font-size:14.5px }

/* =========================================================
   セクション見出し
   ========================================================= */
.sec-en{
  font-family:var(--en); font-weight:600; text-transform:uppercase;
  font-size:clamp(46px,10.5vw,132px); line-height:.82; letter-spacing:-.035em;
  color:#DCE7F3; margin-bottom:-.12em; user-select:none;
}
@supports (-webkit-text-stroke: 1px #000){
  .sec-en{ color:transparent; -webkit-text-stroke:1px #C2D5E7 }
}
.sec.dark .sec-en{ color:#2B4C74 }
@supports (-webkit-text-stroke: 1px #000){
  .sec.dark .sec-en{ color:transparent; -webkit-text-stroke:1px #355780 }
}
.sec-label{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--en); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mid);
}
.sec-label::before{ content:""; width:34px; height:1px; background:var(--accent) }
.sec.dark .sec-label{ color:rgba(247,249,252,.65) }
.sec-title{
  font-family:var(--jp); font-weight:500; letter-spacing:.02em;
  font-size:clamp(23px,3.6vw,42px); line-height:1.62; margin-top:18px;
}
.sec-desc{ margin-top:22px; color:var(--ink-mid); max-width:44em; font-size:14.5px }
.sec.dark .sec-desc{ color:rgba(247,249,252,.66) }
.sec-head{ margin-bottom:clamp(46px,7vw,86px) }
.sec-head.center{ text-align:center }
.sec-head.center .sec-desc{ margin-left:auto; margin-right:auto }
.sec-head.center .sec-label::before{ display:none }

/* =========================================================
   ボタン / リンク
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  padding:19px 34px; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  font-family:var(--en); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s, color .4s, border-color .4s, transform .4s;
}
.btn .ja{ font-family:var(--jp); font-size:12.5px; letter-spacing:.1em; text-transform:none }
.btn::after{ content:"→"; font-size:13px; transition:transform .4s }
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn:hover::after{ transform:translateX(5px) }
.btn.ghost{ background:transparent; color:var(--ink) }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn.light{ background:var(--paper); border-color:var(--paper); color:var(--ink) }
/* LINE（公式ブランドカラー） */
.btn.line{ background:#06C755; border-color:#06C755; color:#fff }
.btn.line:hover{ background:#05A948; border-color:#05A948 }
.btn.light:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn.outline-light{ background:transparent; border-color:rgba(247,249,252,.45); color:var(--paper) }
.btn.outline-light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,4vw,44px) }

.more{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--en); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  margin-top:clamp(26px,3.5vw,40px); transition:color .35s;
}
.more::after{ content:""; width:56px; height:1px; background:currentColor; transition:width .45s cubic-bezier(.16,.72,.24,1) }
.more:hover{ color:var(--accent) }
.more:hover::after{ width:88px }

/* =========================================================
   マーキー（流れる帯）
   ========================================================= */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden; background:var(--paper);
}
.marquee-track{ display:flex; width:max-content; animation:flow 38s linear infinite }
.marquee span{
  font-family:var(--en); font-size:clamp(15px,2.2vw,26px); font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); padding:0 22px; display:flex; align-items:center; gap:22px;
  white-space:nowrap;
}
.marquee span::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.8 }
@keyframes flow{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================================================
   横並びブロック（写真＋テキスト）
   ========================================================= */
.feat{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(30px,6vw,92px); align-items:center }
.feat + .feat{ margin-top:clamp(70px,10vw,150px) }
.feat.rev .feat-img{ order:2 }
.feat-img{ position:relative }
.feat-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px }
/* 横位置の写真用：高さを抑えて、上寄りをトリミング（人物を大きく見せる） */
.feat-img.wide img{ aspect-ratio:4/3; object-position:center 30% }

.feat-img .cap{
  position:absolute; left:16px; bottom:16px;
  background:var(--paper); padding:9px 17px; border-radius:999px;
  font-family:var(--en); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid);
}

/* 番号つきリスト */
/* ── CONCEPT の本文 ───────────────────────────────── */
.cp p{
  margin-top:clamp(15px,1.9vw,20px); font-size:14.5px; line-height:1.92;
  color:var(--ink-mid);
}
.cp .cp-open{ margin-top:0; color:var(--ink) }

/* 「〜分からない」の3行 */
.qlist{
  margin:clamp(18px,2.3vw,24px) 0 clamp(20px,2.6vw,28px);
  padding-left:clamp(16px,2vw,22px); border-left:2px solid var(--blue);
}
.qlist li{ font-size:15px; font-weight:500; letter-spacing:.02em; line-height:1.95; color:var(--ink); padding:4px 0 }

/* 転換点：ここだけ本文色を濃くして、キーワードを青に */
.cp .cp-pivot{
  margin-top:clamp(24px,3.2vw,34px); color:var(--ink); font-size:15px; line-height:1.95;
}
.cp .cp-pivot b{ font-weight:500; color:var(--blue) }

/* 締めの一文：本文で唯一の大きい行 */
.cp .cp-close{
  margin-top:clamp(28px,3.6vw,40px); padding-top:clamp(20px,2.6vw,26px);
  font-size:clamp(16px,1.9vw,19px); font-weight:500; line-height:1.8;
  letter-spacing:.03em; color:var(--ink); position:relative;
}
.cp .cp-close::before{ content:""; position:absolute; left:0; top:0; width:44px; height:2px; background:var(--blue) }

/* ── CONCEPT 直下の 01 / 02 / 03（全幅3カラム） ──────── */
.pillars{
  margin-top:clamp(56px,7.5vw,104px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
}
.pillar{ padding-top:clamp(20px,2.6vw,28px); border-top:1px solid var(--ink) }
.pillar b{
  display:block; font-family:var(--en); font-weight:500; font-size:11px;
  letter-spacing:.2em; color:var(--accent);
}
.pillar strong{
  display:block; margin-top:clamp(14px,1.8vw,20px);
  font-size:clamp(15.5px,1.8vw,18px); font-weight:500; letter-spacing:.02em; line-height:1.7;
}
.pillar p{ margin-top:14px; font-size:13.5px; color:var(--ink-mid); line-height:1.95 }
@media (max-width:820px){
  .pillars{ grid-template-columns:1fr; gap:0 }
  .pillar{ padding:clamp(20px,2.6vw,28px) 0; border-top:1px solid var(--line) }
  .pillar:first-child{ border-top:1px solid var(--ink) }
  .pillar strong br{ display:none }
}

.numlist{ margin-top:clamp(28px,4vw,40px); border-top:1px solid var(--line) }
.numlist li{
  display:flex; gap:20px; align-items:baseline;
  padding:17px 2px; border-bottom:1px solid var(--line); font-size:14px;
}
.numlist b{ font-family:var(--en); font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--accent); flex:none }
.sec.dark .numlist{ border-color:rgba(247,249,252,.16) }
.sec.dark .numlist li{ border-color:rgba(247,249,252,.16) }

/* =========================================================
   ステップ（3ステップサポート）
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line) }
.step{ padding:clamp(30px,4vw,46px) clamp(20px,2.6vw,38px); border-bottom:1px solid var(--line); border-right:1px solid var(--line) }
.step:first-child{ border-left:1px solid var(--line) }
.step .no{ font-family:var(--en); font-size:clamp(34px,4.4vw,58px); font-weight:300; line-height:1; color:#C7D9EB; letter-spacing:-.02em }
.step h3{ margin-top:clamp(22px,3vw,34px); font-size:12px; letter-spacing:.16em; color:var(--accent); font-weight:500 }
.step .big{ margin-top:10px; font-size:clamp(17px,2vw,21px); font-weight:500; line-height:1.6; letter-spacing:.02em }
.step p{ margin-top:16px; font-size:13.5px; color:var(--ink-mid); line-height:2 }

/* 3ステップからの流れをつなぐ矢印 */
.flow-arrow{ display:flex; flex-direction:column; align-items:center; padding:clamp(18px,2.6vw,30px) 0 }
.flow-arrow i{ display:block; width:1px; height:clamp(26px,3.6vw,44px); background:var(--line) }
.flow-arrow::after{
  content:""; width:9px; height:9px; margin-top:-5px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg);
}

.callout{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3.4vw,52px); align-items:center;
  padding:clamp(28px,3.8vw,44px) clamp(24px,3.4vw,44px); background:var(--ink); color:var(--paper);
  border-radius:6px; overflow:hidden;
}
.callout::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent) }
.callout .k{ flex:none }
.callout .k small{
  display:block; font-family:var(--en); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
}
.callout .k em{
  display:block; margin-top:8px; font-family:var(--en); font-style:normal; font-weight:500;
  font-size:clamp(24px,3.6vw,38px); line-height:1; letter-spacing:.01em; white-space:nowrap;
}
.callout .v b{ display:block; font-weight:500; font-size:clamp(16px,2vw,21px); letter-spacing:.02em; line-height:1.7 }
.callout .v small{ display:block; margin-top:10px; font-size:13px; color:rgba(247,249,252,.66); line-height:2 }
@media (max-width:700px){
  .callout{ grid-template-columns:1fr; gap:18px }
  .callout .k em{ font-size:26px }
}

/* =========================================================
   FACILITY（設備台数）
   ========================================================= */
.sec-title .hl{ color:var(--blue) }

.facility-hero{ margin-bottom:clamp(32px,4.6vw,58px); border-radius:6px; overflow:hidden; position:relative }
.facility-hero img{ width:100%; aspect-ratio:16/7; object-fit:cover }
.facility-hero .cap{
  position:absolute; left:16px; bottom:16px; background:var(--paper); padding:9px 17px; border-radius:999px;
  font-family:var(--en); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid);
}

.spec{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.7vw,20px) }
.scard{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:clamp(26px,2.8vw,34px) clamp(20px,2.2vw,28px); display:flex; flex-direction:column;
}
.sec.tone .scard{ background:var(--paper) }
.scard .sl{ font-family:var(--en); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue) }
.scard .snum{
  margin-top:clamp(14px,1.8vw,20px); font-family:var(--en); font-weight:300;
  font-size:clamp(44px,5.2vw,66px); line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.scard .snum span{ font-family:var(--jp); font-size:.26em; letter-spacing:.06em; margin-left:6px; color:var(--ink-mid) }
.scard h4{ margin-top:clamp(14px,1.8vw,20px); font-size:14.5px; font-weight:500; letter-spacing:.02em; line-height:1.7 }
.scard p{ margin-top:12px; font-size:13px; color:var(--ink-mid); line-height:1.95 }

/* =========================================================
   PERSONAL & CARE
   ========================================================= */
.duo{ display:grid; gap:clamp(26px,3.2vw,40px) }
.dsvc{ padding-top:clamp(22px,2.8vw,30px); border-top:1px solid var(--line) }
.dsvc .l{ font-family:var(--en); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--accent) }
.dsvc h3{ margin-top:14px; font-size:clamp(17px,2.2vw,23px); font-weight:500; line-height:1.65; letter-spacing:.02em }
.dsvc p{ margin-top:14px; font-size:13.5px; color:var(--ink-mid); line-height:2 }

/* =========================================================
   全幅の写真バンド
   ========================================================= */
.band{ position:relative; height:clamp(320px,52vw,560px); overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff }
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.band::after{ content:""; position:absolute; inset:0; background:rgba(11,28,50,.55) }
.band .band-in{ position:relative; z-index:2; padding:0 var(--pad) }
.band .band-en{ font-family:var(--en); font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.75 }
.band h2{ margin-top:20px; font-size:clamp(21px,3.4vw,40px); font-weight:500; line-height:1.66; letter-spacing:.03em }

/* =========================================================
   料金ダイジェスト
   ========================================================= */
.digest{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line) }
.dcard{ padding:clamp(30px,4vw,48px) clamp(18px,2.4vw,34px); border-bottom:1px solid var(--line); border-right:1px solid var(--line) }
.dcard:first-child{ border-left:1px solid var(--line) }
.dcard.on{ position:relative; background:var(--ink); color:var(--paper); border-color:var(--ink) }
.dcard.on::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--accent) }
.dcard.on .p{ font-size:clamp(44px,5.8vw,76px) }
.dcard .tag{
  display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:10.5px; letter-spacing:.14em;
}
.dcard .l{ font-family:var(--en); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft) }
.dcard.on .l{ color:var(--accent) }
.dcard .jl{ margin-top:8px; font-size:13px; letter-spacing:.1em }
.dcard .p{ margin-top:clamp(18px,2.6vw,28px); font-family:var(--en); font-weight:300; font-size:clamp(34px,4.6vw,60px); line-height:1; letter-spacing:-.02em }
.dcard .p span{ font-size:.34em; letter-spacing:.06em; margin-left:6px; font-family:var(--jp) }
.dcard .p em{ font-style:normal; font-size:.28em; letter-spacing:.1em; margin-left:6px; color:var(--ink-soft) }
.dcard.on .p em{ color:rgba(247,249,252,.55) }
.dcard .d{ margin-top:20px; font-size:13px; color:var(--ink-mid); line-height:2 }
.dcard.on .d{ color:rgba(247,249,252,.66) }

/* =========================================================
   料金表
   ========================================================= */
.tbl-block{ margin-top:clamp(56px,8vw,110px) }
.tbl-block:first-of-type{ margin-top:0 }
.tbl-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; padding-bottom:22px; border-bottom:1px solid var(--ink) }
.tbl-head h3{ font-size:clamp(17px,2.2vw,24px); font-weight:500; letter-spacing:.03em; display:flex; align-items:baseline; gap:14px }
.tbl-head h3 i{ font-family:var(--en); font-style:normal; font-size:11px; letter-spacing:.18em; color:var(--accent) }
.tbl-head .sub{ font-size:12.5px; color:var(--ink-soft); margin-left:auto }
.tbl-head .badge{ margin-left:auto; font-size:11.5px; letter-spacing:.1em; background:var(--accent); color:#fff; padding:6px 15px; border-radius:999px }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; min-width:560px }
th,td{ text-align:left; padding:20px 16px; border-bottom:1px solid var(--line); vertical-align:middle }
th{ font-size:11px; font-family:var(--en); letter-spacing:.18em; text-transform:uppercase; color:var(--blue); font-weight:500; padding-top:22px }
td{ font-size:14px }
tr.hl td{ background:var(--cream) }
td.price{ color:var(--accent); font-family:var(--en); font-weight:400; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.01em; white-space:nowrap }
td.price span{ font-family:var(--jp); font-size:12.5px; letter-spacing:.06em; margin-left:5px; color:var(--ink-mid) }
td.note{ font-size:13px; color:var(--ink-mid); line-height:1.9 }
td.win{ color:var(--accent); font-weight:500; font-size:13.5px }
.scroll-hint{ margin-top:12px; font-size:11px; color:var(--ink-soft); letter-spacing:.1em; text-align:right }
@media (min-width:781px){ .scroll-hint{ display:none } }

/* =========================================================
   2カラムのボックス
   ========================================================= */
.boxes{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,32px) }
.box{ background:var(--cream); border:1px solid var(--cream-line); border-radius:6px; padding:clamp(28px,3.6vw,44px) }
.sec.tone .box{ background:var(--cream) }
.box h4{ font-size:clamp(16px,2vw,19px); font-weight:500; letter-spacing:.03em; padding-bottom:18px; border-bottom:1px solid var(--cream-line) }
.box ul{ margin-top:20px }
.box li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--ink-mid); line-height:2.05 }
.box li + li{ margin-top:10px }
.box li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:1px; background:var(--accent) }
.box .fine{ margin-top:20px; font-size:11.5px; color:var(--ink-soft); line-height:1.95 }

/* =========================================================
   タイムライン（当日の流れ）
   ========================================================= */
.tl{ position:relative; padding-left:clamp(24px,3.4vw,44px); border-left:1px solid var(--line) }
.tl li{ position:relative; padding-bottom:clamp(34px,4.6vw,54px) }
.tl li:last-child{ padding-bottom:0 }
.tl li::before{
  content:""; position:absolute; left:calc(-1 * clamp(24px,3.4vw,44px) - 4px); top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.tl .time{ font-family:var(--en); font-size:11px; letter-spacing:.2em; color:var(--ink-soft) }
.tl h4{ margin-top:12px; font-size:clamp(16px,2vw,20px); font-weight:500; letter-spacing:.03em }
.tl p{ margin-top:12px; font-size:13.5px; color:var(--ink-mid) }

/* =========================================================
   FAQ
   ========================================================= */
/* ステップを2列で並べる（写真の下に全幅で置くとき） */
/* 見出しを全幅で横長に使うとき */
.sec-head.wide .sec-desc{ max-width:58em }

/* 折り返しを制御したい見出し */
/* 下層ページの h1 を1行に収める（900px以上。それ未満は通常どおり折り返し） */
@media (min-width:900px){
  .phero h1.one-line{ white-space:nowrap; font-size:min(3.35vw, 45px) }
}
/* セクション見出しを2行に収める */
/* 全幅で使うので、通常のセクション見出しと同じ大きさに戻す（スマホだけ少し小さく） */
.sec-title.two-lines{ font-size:clamp(22px, 3.6vw, 42px) }

/* 3カラム版の設備カード（無料体験の 15分 / 30分 / 0円） */
.spec.cols3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .spec.cols3{ grid-template-columns:1fr } }

.tl.grid2{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4vw,48px) clamp(30px,5vw,72px);
  padding-left:0; border-left:0;
}
.tl.grid2 li{ padding-left:clamp(22px,2.6vw,34px); border-left:1px solid var(--line); padding-bottom:0 }
.tl.grid2 li::before{ left:-4px }
@media (max-width:760px){ .tl.grid2{ grid-template-columns:1fr; gap:30px } }

.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 44px 26px 34px; position:relative;
  font-size:15px; font-weight:500; letter-spacing:.03em; line-height:1.8;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:"Q"; position:absolute; left:0; top:26px;
  font-family:var(--en); font-size:12px; letter-spacing:.1em; color:var(--accent);
}
.faq summary::after{
  content:""; position:absolute; right:6px; top:34px; width:11px; height:11px;
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(45deg); transition:transform .4s;
}
.faq details[open] summary::after{ transform:rotate(-135deg) }
.faq .a{ padding:0 44px 30px 34px; font-size:13.5px; color:var(--ink-mid) }

/* =========================================================
   店舗情報 / 地図
   ========================================================= */
.info{ border-top:1px solid var(--line) }
/* 店舗情報を2カラムで並べる（全幅で使うとき） */
.info.cols2{
  margin-top:clamp(28px,4vw,42px); border-top:0;
  display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,72px);
}
.info.cols2 dl{ border-top:1px solid var(--line); border-bottom:0 }
@media (max-width:760px){ .info.cols2{ grid-template-columns:1fr } }
.info dl{ display:grid; grid-template-columns:120px 1fr; gap:14px 20px; padding:20px 2px; border-bottom:1px solid var(--line) }
.info dt{ font-family:var(--en); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); padding-top:5px }
.info dd{ font-size:14.5px }
.info dd small{ display:block; margin-top:6px; font-size:12px; color:var(--ink-soft) }
.info dd a:hover{ color:var(--accent) }
.tbd{ background:rgba(207,64,55,.09); border-bottom:1px dashed var(--accent); padding:2px 8px; color:var(--accent); font-size:13px }

.map{
  position:relative;
  aspect-ratio:16/9; background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  font-size:12.5px; color:var(--ink-soft); line-height:2;
}
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
@media (max-width:640px){ .map{ aspect-ratio:4/3 } }

/* =========================================================
   お問い合わせカード
   ========================================================= */
.ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px) }
.ccard{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:clamp(30px,3.6vw,44px); display:flex; flex-direction:column;
  transition:transform .5s cubic-bezier(.16,.72,.24,1), box-shadow .5s;
}
.ccard:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -28px rgba(27,58,94,.5) }
.ccard .ico{ font-family:var(--en); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent) }
.ccard h3{ margin-top:16px; font-family:var(--en); font-size:clamp(24px,3vw,34px); font-weight:300; letter-spacing:-.01em }
.ccard p{ margin-top:18px; font-size:13.5px; color:var(--ink-mid); flex:1 }
.ccard .val{ margin-top:20px; font-family:var(--en); font-size:22px; letter-spacing:.02em }
.ccard .btn{ margin-top:26px; justify-content:center }

/* =========================================================
   下部CTA
   ========================================================= */
.cta{ position:relative; padding:var(--sec) var(--pad); background:var(--ink); color:var(--paper); overflow:hidden; text-align:center }
.cta .big{
  font-family:var(--en); font-weight:600; text-transform:uppercase; letter-spacing:-.035em;
  font-size:clamp(52px,13vw,168px); line-height:.84; color:transparent;
  -webkit-text-stroke:1px #375A82; user-select:none;
}
.cta h2{ margin-top:clamp(-.1em,-1vw,-.05em); font-size:clamp(21px,3.4vw,40px); font-weight:500; line-height:1.6; letter-spacing:.03em; position:relative }
.cta p{ margin-top:22px; font-size:14px; color:rgba(247,249,252,.66) }
.cta .btns{ justify-content:center }
.cta .tel-big{
  display:inline-flex; align-items:baseline; gap:14px; margin-top:clamp(34px,5vw,54px);
  font-family:var(--en); font-size:clamp(26px,4vw,42px); font-weight:300; letter-spacing:.01em;
}
.cta .tel-big small{ font-size:11px; letter-spacing:.24em; color:var(--accent) }
.cta .tel-big:hover{ color:var(--accent) }

/* =========================================================
   フッター
   ========================================================= */
.ft{ background:var(--ink); color:var(--paper); padding:clamp(60px,8vw,100px) var(--pad) 34px; border-top:1px solid rgba(247,249,252,.12) }
.ft-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(34px,5vw,64px) }
.ft-logo{ height:38px; width:auto }
.ft .addr{ margin-top:24px; font-size:12.5px; color:rgba(247,249,252,.6); line-height:2.1 }
.ft h5{ font-family:var(--en); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:500 }
.ft ul{ margin-top:20px }
.ft li{ font-size:13px; color:rgba(247,249,252,.72); padding:7px 0 }
.ft li a{ transition:color .3s }
.ft li a:hover{ color:var(--accent) }
.ft-bot{
  margin-top:clamp(44px,6vw,72px); padding-top:24px; border-top:1px solid rgba(247,249,252,.12);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-family:var(--en); font-size:10.5px; letter-spacing:.18em; color:rgba(247,249,252,.45);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .nav{ display:none }
  .burger{ display:block }
  .hd-right{ gap:14px }
  .hd-cta{ padding:11px 18px; font-size:10.5px }
}
@media (max-width:900px){
  .feat{ grid-template-columns:1fr; gap:34px }
  .feat.rev .feat-img{ order:0 }
  .feat-img img{ aspect-ratio:3/2 }
  .steps{ grid-template-columns:1fr; border-left:1px solid var(--line) }
  .step{ border-right:1px solid var(--line) }
  .step:first-child{ border-left:0 }
  .digest{ grid-template-columns:1fr; border-left:1px solid var(--line) }
  .dcard:first-child{ border-left:0 }
  .dcard{ border-right:1px solid var(--line) }
  .ccards{ grid-template-columns:1fr }
  .spec{ grid-template-columns:repeat(2,1fr) }
  .facility-hero img{ aspect-ratio:3/2 }
}
@media (max-width:620px){
  .spec{ grid-template-columns:1fr }
}
@media (max-width:780px){
  body{ font-size:14px; line-height:2 }
  .boxes{ grid-template-columns:1fr }
  .hide-sp{ display:none }
  .scroll-cue{ display:none }
  .info dl{ grid-template-columns:1fr; gap:6px; padding:18px 2px }
  .ft-grid{ grid-template-columns:1fr; gap:36px }
  .tbl-head .sub, .tbl-head .badge{ margin-left:0 }
  .faq summary{ padding:22px 36px 22px 28px; font-size:14px }
  .faq .a{ padding:0 8px 26px 28px }
  .cta .big{ -webkit-text-stroke-width:.8px }
}