/* ブクロジム v2 — ダーク／高コントラスト
   既存サイト(Bootstrap3)とは独立。読み込むのはこの1枚だけ。 */

:root{
  --bg:#FFFFFF;            /* リッチブラック */
  --bg-2:#F5F6F8;          /* セクション交互 */
  --surface:#FFFFFF;       /* カード */
  --line:#E4E6EB;
  --text:#16181D;
  --muted:#666B75;
  --accent:#F04E0A;        /* 既存ロゴのオレンジ #FF5700 を暗背景用に少し明るく */
  --accent-2:#C03A04;
  --max:1200px;
  --pad:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
              "Yu Gothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.85;letter-spacing:.02em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.en{font-family:Anton,"Noto Sans JP",sans-serif;font-weight:400;letter-spacing:.04em;
    text-transform:uppercase;line-height:1}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:100;transition:background .3s,backdrop-filter .3s,border-color .3s;
    border-bottom:1px solid transparent}
.hd.is-solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(0,0,0,.05)}
.hd__in{display:flex;align-items:center;gap:24px;height:74px;max-width:var(--max);margin:0 auto;
        padding-inline:var(--pad)}
.hd__logo img{height:34px;width:auto}
.hd__nav{display:flex;gap:clamp(14px,1.5vw,26px);margin-left:auto;font-size:14px;font-weight:700;flex-wrap:nowrap}
.hd__nav a{position:relative;padding:6px 0;color:var(--text);white-space:nowrap}
.hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
                  background:var(--accent);transition:right .25s}
.hd__nav a:hover::after{right:0}
.hd__tel{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.hd__cta{background:var(--accent);color:#fff;font-weight:700;font-size:14px;
         padding:11px 20px;border-radius:2px;white-space:nowrap;transition:background .2s,transform .2s}
.hd__cta:hover{background:var(--accent-2);transform:translateY(-1px)}
.hd__burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;
            color:var(--text);font-size:0;cursor:pointer;position:relative}
.hd__burger span,.hd__burger::before,.hd__burger::after{
  content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--text);transition:.25s}
.hd__burger::before{top:15px}.hd__burger span{top:21px}.hd__burger::after{top:27px}
.hd.is-open .hd__burger::before{top:21px;transform:rotate(45deg)}
.hd.is-open .hd__burger span{opacity:0}
.hd.is-open .hd__burger::after{top:21px;transform:rotate(-45deg)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;
  animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
@media(prefers-reduced-motion:reduce){.hero__media img,.hero__media video{animation:none}}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,14,18,.55) 0%,rgba(12,14,18,.32) 35%,rgba(12,14,18,.80) 100%),
             radial-gradient(70% 60% at 20% 70%,rgba(240,78,10,.16),transparent 70%)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:120px 64px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.18em;color:#FFB185;margin-bottom:18px}
.hero__eyebrow::before{content:"";width:36px;height:1px;background:var(--accent)}
.hero h1{font-size:clamp(34px,7.4vw,86px);font-weight:900;line-height:1.08;letter-spacing:.01em;
  text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:#FF7A33}
.hero__lead{margin-top:20px;max-width:36em;color:#D6D6DC;font-size:clamp(14px,1.6vw,17px)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:34px;
  font-size:13px;color:#B9B9C2;border-top:1px solid rgba(255,255,255,.28);padding-top:18px}
.hero__meta b{color:#fff;font-weight:700}
.hero__down{position:absolute;right:var(--pad);bottom:26px;z-index:2;
  font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.75);writing-mode:vertical-rl}
.hero__down::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(rgba(255,255,255,.8),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-weight:700;font-size:15px;border-radius:2px;border:1px solid transparent;
  transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(240,78,10,.28)}
.btn--primary:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(22,24,29,.28);color:var(--text)}
.btn--ghost:hover{border-color:var(--text);background:rgba(22,24,29,.05)}
.btn--wide{width:100%;max-width:360px}

/* ---------- セクション ---------- */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec--alt{background:var(--bg-2)}
.sec__head{margin-bottom:clamp(32px,5vw,56px)}
.sec__en{display:block;font-size:clamp(40px,7vw,78px);color:rgba(22,24,29,.07);line-height:.9;
  margin-bottom:-.32em}
.sec__ttl{position:relative;font-size:clamp(21px,3.1vw,32px);font-weight:900;padding-left:18px}
.sec__ttl::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;background:var(--accent)}
.sec__lead{margin-top:16px;color:var(--muted);max-width:44em}

/* ---------- 強み帯 ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.facts li{background:var(--bg);padding:30px 22px;text-align:center}
.facts b{display:block;font-family:Anton,sans-serif;font-size:clamp(28px,3.6vw,44px);
  color:var(--accent);line-height:1;margin-bottom:8px}
.facts span{font-size:13px;color:var(--muted)}

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

.card{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.04);
  transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(240,78,10,.45);transform:translateY(-4px)}
.card__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:22px 22px 26px}
.card__ttl{font-size:19px;font-weight:900;margin-bottom:10px}
.card__txt{font-size:14px;color:var(--muted)}
.card__more{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:var(--accent-2)}
.card__more::after{content:" →"}

/* トレーナー */
.trainer{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.trainer img{aspect-ratio:4/5;width:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02);
  transition:filter .4s,transform .5s}
.trainer:hover img{filter:none;transform:scale(1.04)}
.trainer__cap{position:absolute;inset:auto 0 0;padding:44px 18px 16px;
  background:linear-gradient(transparent,rgba(10,10,12,.92))}
.trainer__name{font-size:17px;font-weight:900}
.trainer__role{font-size:12px;color:var(--accent-2);font-weight:700;letter-spacing:.08em}

/* 料金 */
.price{border:1px solid var(--line);background:var(--surface)}
.price__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.price__row:last-child{border-bottom:0}
.price__row>*{padding:18px 20px}
.price__row--head{background:#F4F5F7;font-size:13px;color:var(--muted);font-weight:700}
.price__name{font-weight:700}
.price__val{font-family:Anton,sans-serif;font-size:24px;color:var(--accent)}
.price__val small{font-family:inherit;font-size:12px;color:var(--muted);margin-left:4px}
.notice{border:1px solid rgba(240,78,10,.35);background:rgba(240,78,10,.06);padding:22px 24px;
  margin-bottom:26px}
.notice b{color:var(--accent-2)}

/* 声 */
.voice{background:var(--surface);border:1px solid var(--line);padding:24px}
.voice__txt{font-size:15px}
.voice__who{margin-top:14px;display:flex;align-items:center;gap:12px}
.voice__who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.voice__who span{font-size:12px;color:var(--muted)}

/* コラム */
.post{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.post:first-child{border-top:1px solid var(--line)}
.post__date{font-family:Anton,sans-serif;font-size:13px;color:var(--muted);min-width:82px;padding-top:3px}
.post__ttl{font-weight:700;font-size:16px}
.post:hover .post__ttl{color:var(--accent-2)}

/* アクセス */
.access{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.access dl{display:grid;grid-template-columns:88px 1fr;gap:12px 16px;font-size:15px}
.access dt{color:var(--muted);font-size:13px;padding-top:3px}
.access dd{margin:0}
.map{position:relative;padding-bottom:66%;height:0;overflow:hidden;border:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* CTA帯 */
.cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(64px,9vw,110px)}
.cta::before{content:"";position:absolute;inset:0;background:url(/assets/ph/staff_1.jpg) center/cover;
  filter:grayscale(.4) brightness(.42)}
.cta::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 50%,rgba(240,78,10,.28),rgba(12,14,18,.78))}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(24px,4.6vw,46px);font-weight:900;line-height:1.25;color:#fff}
.cta p{margin-top:16px;color:rgba(255,255,255,.88);font-size:15px}
.cta .hero__btns{justify-content:center}

/* フッター */
.ft{background:#F5F6F8;border-top:1px solid var(--line);padding-block:56px 30px;font-size:14px}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.ft__logo img{height:38px;margin-bottom:16px}
.ft a:hover{color:var(--accent-2)}
.ft h4{font-size:12px;letter-spacing:.14em;color:var(--muted);margin-bottom:14px;font-weight:700}
.ft li{margin-bottom:9px}
.ft__sns{display:flex;gap:12px;margin-top:18px}
.ft__sns img{width:34px;height:34px;border-radius:50%}
.ft__copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;text-align:center}

/* スクロール表示アニメーション */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- レスポンシブ ---------- */
@media(max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .access{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .hero__down{display:none}
  .hd__nav,.hd__tel{display:none}
  .hd__burger{display:block}
  .hd__cta{display:none}
  .hd.is-open .hd__nav{display:flex;position:fixed;inset:74px 0 auto;flex-direction:column;gap:0;
    background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:8px 0 18px}
  .hd.is-open .hd__nav a{padding:15px var(--pad);border-bottom:1px solid var(--line);font-size:15px}
  .hd.is-open .hd__nav a::after{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .price__row{grid-template-columns:1fr 1fr}
  .price__row>*:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line);
    font-size:13px;color:var(--muted);padding-top:10px}
  .price__row--head>*:nth-child(3){display:none}
  .ft__grid{grid-template-columns:1fr}
  .post{flex-direction:column;gap:6px}
}


/* ===== hero-motion.css を統合 ===== */
/* ヒーローの「動き」— 動画ファイルを使わず、実写のクロスフェード＋寄りで作る。
   v2.css の後に読み込む（後勝ち）。 */

/* 既存の一枚絵用アニメーションは止める */
.hero__media img { animation: none; }

.hero__slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.05);
  transition:opacity 1.4s ease;
  will-change:opacity, transform; backface-visibility:hidden;
}
.hero__slide.is-on{ opacity:1; }
/* カットごとに寄り方を変える（同じ動きの繰り返しに見せない） */
.hero__slide.is-on:nth-child(1){ animation:kb1 9s ease-out forwards; }
.hero__slide.is-on:nth-child(2){ animation:kb2 9s ease-out forwards; }
.hero__slide.is-on:nth-child(3){ animation:kb3 9s ease-out forwards; }
.hero__slide.is-on:nth-child(4){ animation:kb4 9s ease-out forwards; }
.hero__slide.is-on:nth-child(5){ animation:kb1 9s ease-out forwards; }
@keyframes kb1{ from{transform:scale(1.04) translate3d(0,0,0)}      to{transform:scale(1.16) translate3d(-1.4%,-1%,0)} }
@keyframes kb2{ from{transform:scale(1.16) translate3d(1.2%,0,0)}   to{transform:scale(1.04) translate3d(0,0,0)} }
@keyframes kb3{ from{transform:scale(1.05) translate3d(1.6%,1%,0)}  to{transform:scale(1.18) translate3d(0,-1.2%,0)} }
@keyframes kb4{ from{transform:scale(1.14) translate3d(-1.4%,-1%,0)}to{transform:scale(1.04) translate3d(0,.6%,0)} }

/* 粒子（フィルムグレイン）— 画像を読まずSVGノイズで */
.hero__grain{
  position:absolute; inset:-40px; z-index:2; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}  60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}   100%{transform:translate3d(0,0,0)}
}

/* オレンジの光が斜めに走る */
.hero__sweep{
  position:absolute; inset:-20% -30%; z-index:2; pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgba(255,138,61,.20) 49%,transparent 57%);
  animation:sweep 11s ease-in-out infinite;
}
@keyframes sweep{
  0%,72%{transform:translate3d(-45%,0,0); opacity:0}
  80%{opacity:1} 100%{transform:translate3d(45%,0,0); opacity:0}
}

/* 見出しなどの入り */
.hero__in > *{ opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards; }
.hero__eyebrow{ animation-delay:.15s }
/* 見出しは最初から見せる（消えていると描画が遅れ、LCPが悪化する）。動きは変形だけ */
.hero h1{ opacity:1; animation:riseT .85s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes riseT{ from{transform:translateY(16px)} to{transform:none} }
.hero__lead{ animation-delay:.52s }
.hero__btns{ animation-delay:.70s }
.hero__meta{ animation-delay:.86s }
@keyframes rise{ to{opacity:1; transform:none} }

/* スライドの進行を示す細いバー */
.hero__bars{
  position:absolute; left:var(--pad); bottom:26px; z-index:3;
  display:flex; gap:7px; align-items:center;
}
.hero__bars span{
  display:block; width:34px; height:2px; background:rgba(255,255,255,.45); overflow:hidden;
}
.hero__bars span::after{
  content:""; display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
}
.hero__bars span.is-on::after{ animation:barfill 9s linear forwards; }
.hero__bars span.is-done::after{ transform:scaleX(1); }
@keyframes barfill{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* スクロールすると奥に引く（次のセクションへ視線を送る） */
.hero__in{ transform:translateY(calc(var(--hs,0) * -40px)); opacity:calc(1 - var(--hs,0) * 1.15); }
.hero__media{ transform:scale(calc(1 + var(--hs,0) * .06)); }

@media(max-width:767px){
  .hero__bars{ bottom:18px }
  .hero__bars span{ width:24px }
  .hero__sweep{ display:none }
}

/* 動きを減らす設定の人には静止画で見せる */
@media(prefers-reduced-motion:reduce){
  .hero__slide, .hero__slide.is-on{ animation:none !important; transform:none !important }
  .hero__grain, .hero__sweep{ animation:none; opacity:.08 }
  .hero__in > *{ opacity:1; transform:none; animation:none }
  .hero__bars span.is-on::after{ animation:none; transform:scaleX(1) }
  .hero__in, .hero__media{ transform:none; opacity:1 }
}


/* ===== type-system.css を統合 ===== */
/* ブクロジム — タイポグラフィ確定仕様
   見出し : Dela Gothic One       （看板・ポスターの語彙。短い言葉だけに使う）
   本文   : Zen Kaku Gothic Antique（Notoより字面に温度がある。長文が読める）
   数字   : Big Shoulders Display  （縦長。料金・時刻・分数が締まる）
   ---- Noto Sans JP + Anton（生成AIの既定値）は使わない ---- */

:root{
  --f-head: "Dela Gothic One", "Zen Kaku Gothic Antique", sans-serif;
  --f-body: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-num : "Big Shoulders Display", "Zen Kaku Gothic Antique", sans-serif;
}

body{ font-family:var(--f-body); font-weight:400; line-height:1.9; letter-spacing:.015em; }

/* --- 見出し：Dela Gothic One は太いので、字間と行間を詰める --- */
.hero h1,
.sec__ttl,
.cta h2,
.card__ttl,
.trainer__name,
.bukurogym_news .news-head{
  font-family:var(--f-head); font-weight:400;
  letter-spacing:-.005em; line-height:1.18;
}
.hero h1{ font-size:clamp(30px,6.6vw,74px); line-height:1.16; letter-spacing:-.01em; }
.sec__ttl{ font-size:clamp(19px,2.8vw,30px); line-height:1.35; }
.cta h2 { font-size:clamp(22px,4.2vw,42px); line-height:1.3; }
.card__ttl{ font-size:17px; line-height:1.45; }
.trainer__name{ font-size:16px; }

/* --- 数字・英字ラベル --- */
.en, .sec__en, .hero__down,
.facts b, .price__val, .post__date, .hd__tel{
  font-family:var(--f-num); font-weight:800; letter-spacing:.01em;
}
.sec__en{ font-weight:800; letter-spacing:-.005em; }
.facts b{ font-size:clamp(32px,4.2vw,52px); letter-spacing:-.01em; }
.facts b small{ font-size:.5em; letter-spacing:0; }
.price__val{ font-size:27px; font-weight:800; }
.hd__tel{ font-size:16px; font-weight:800; letter-spacing:.02em; }
.post__date{ font-size:14px; font-weight:800; }

/* --- 小さいラベルは欧文で字間を開ける --- */
.hero__eyebrow, .trainer__role, .ft h4{
  font-family:var(--f-num); font-weight:700; letter-spacing:.16em;
}

/* --- 本文まわりの太さ --- */
.hero__lead, .sec__lead, .card__txt, .voice__txt, .access dd{ font-weight:400; }
.hero__meta b, .price__name, .post__ttl, .hd__nav a, .hd__cta, .btn{ font-weight:700; }
.hd__nav a{ letter-spacing:.02em; }

/* Dela Gothic One は約物が大きいので、見出しの句読点を少し詰める */
.hero h1, .sec__ttl, .cta h2{ font-feature-settings:"palt" 1; }


/* ===== interactions.css を統合 ===== */
/* マイクロインタラクション — 「色がパッと変わる」を禁止し、物理挙動で扱う。
   共通イージング: cubic-bezier(.2,.7,.3,1)（減速して止まる＝重さが出る）
   出現はバネ寄り     : cubic-bezier(.16,1,.3,1) */

:root{
  --e-out:cubic-bezier(.2,.7,.3,1);
  --e-spring:cubic-bezier(.16,1,.3,1);
  --t:.3s;
}

/* --- ボタン：0.3秒で浮き上がり、押すと沈む --- */
.btn, .hd__cta{
  transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out),
             background-color var(--t) var(--e-out), border-color var(--t) var(--e-out);
  will-change:transform;
}
.btn--primary{ box-shadow:0 6px 18px rgba(240,78,10,.24); }
.btn--primary:hover, .hd__cta:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 32px rgba(240,78,10,.38);
}
.btn--ghost:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  background:rgba(255,255,255,.10);
}
.btn:active, .hd__cta:active{ transform:translateY(0) scale(.97); transition-duration:.12s; }

/* --- カード：浮き上がりと、写真のゆっくりした寄り --- */
.card, .trainer, .voice{
  transition:transform var(--t) var(--e-out), border-color var(--t) var(--e-out),
             box-shadow var(--t) var(--e-out);
}
.card:hover, .trainer:hover{
  transform:translateY(-6px) scale(1.012);
  box-shadow:0 22px 50px rgba(16,24,40,.12);
  border-color:rgba(240,78,10,.45);
}
.card__img img{ transition:transform .7s var(--e-out); }
.card:hover .card__img img{ transform:scale(1.07); }
.trainer img{ transition:filter .5s var(--e-out), transform .7s var(--e-out); }

/* --- リンク：下線が左から伸びる --- */
.card__more, .post__ttl{ transition:color var(--t) var(--e-out); }
.post{ transition:background-color var(--t) var(--e-out), padding-left var(--t) var(--e-out); }
.post:hover{ background:rgba(22,24,29,.035); padding-left:10px; }

/* --- 出現：下からバネ気味に、少し遅らせながら --- */
.rv{
  opacity:0; transform:translateY(28px) scale(.985);
  transition:opacity .8s var(--e-spring), transform .8s var(--e-spring);
}
.rv.is-in{ opacity:1; transform:none; }

/* グリッド内は自動で時間差をつける（data-delayが無くても効く） */
.grid > .rv:nth-child(1){ transition-delay:0s }
.grid > .rv:nth-child(2){ transition-delay:.09s }
.grid > .rv:nth-child(3){ transition-delay:.18s }
.grid > .rv:nth-child(4){ transition-delay:.27s }
.facts > .rv:nth-child(1){ transition-delay:0s }
.facts > .rv:nth-child(2){ transition-delay:.08s }
.facts > .rv:nth-child(3){ transition-delay:.16s }
.facts > .rv:nth-child(4){ transition-delay:.24s }

/* --- キーボード操作でも居場所が分かるように（WCAG） --- */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--accent-2); outline-offset:3px; border-radius:2px;
}

@media(prefers-reduced-motion:reduce){
  .btn,.hd__cta,.card,.trainer,.voice,.post,.card__img img{ transition:none !important }
  .btn:hover,.hd__cta:hover,.card:hover,.trainer:hover{ transform:none !important }
  .rv{ opacity:1; transform:none; transition:none }
}


/* ===== 下層ページのヘッダー ===== */
.phero{position:relative;overflow:hidden;padding-block:150px 62px;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.phero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,14,18,.72) 0%,rgba(12,14,18,.50) 45%,rgba(12,14,18,.86) 100%),
             radial-gradient(60% 70% at 15% 60%,rgba(240,78,10,.16),transparent 70%)}
.phero__crumb{font-size:12px;color:rgba(255,255,255,.75);margin-bottom:16px}
.phero__crumb a{color:rgba(255,255,255,.75)}
.phero__crumb a:hover{color:#FFB185}
.phero__en{display:block;font-family:var(--f-num);font-weight:800;
  font-size:clamp(44px,8vw,86px);color:rgba(255,255,255,.14);line-height:.9;margin-bottom:-.3em}
.phero h1{font-family:var(--f-head);font-weight:400;position:relative;padding-left:18px;color:#fff;
  font-size:clamp(24px,4.4vw,44px);line-height:1.25;letter-spacing:-.01em}
.phero h1::before{content:'';position:absolute;left:0;top:.16em;bottom:.16em;width:4px;background:var(--accent)}
.phero__lead{margin-top:18px;color:rgba(255,255,255,.9);max-width:44em;font-size:15px}
@media(max-width:767px){.phero{padding-block:118px 46px}}

/* 画像なしカードでも余白が崩れないように */
.card > .card__body:first-child{padding-top:26px}

/* よくある質問 */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:16px;transition:color .3s var(--e-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:12px;height:12px;
  margin-top:-8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .3s var(--e-out)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq summary:hover{color:var(--accent-2)}
.faq__a{padding:0 0 22px;color:var(--muted);font-size:15px;line-height:1.95}
.faq__g{margin:44px 0 6px;font-family:var(--f-num);font-weight:800;letter-spacing:.1em;
  font-size:13px;color:var(--accent-2)}

/* 設備・道順のギャラリー */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{margin:0;border:1px solid var(--line);background:var(--surface)}
.gal img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gal figcaption{padding:12px 14px;font-size:13px;color:var(--muted)}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}

/* トレーナー詳細 */
.tprof{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line)}
.tprof img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tprof h3{font-family:var(--f-head);font-weight:400;font-size:22px;margin-bottom:6px}
.tprof .role{font-family:var(--f-num);font-weight:800;letter-spacing:.14em;
  font-size:12px;color:var(--accent-2);margin-bottom:16px}
.tprof dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;font-size:14px;margin-bottom:16px}
.tprof dt{color:var(--muted);font-size:13px}
.tprof dd{margin:0}
@media(max-width:767px){.tprof{grid-template-columns:1fr;gap:18px}}


/* ===== コラム本文 ===== */
.post-body{max-width:44em;font-size:16px;line-height:2.05}
.post-body p{margin:0 0 22px}
.post-body h2{font-family:var(--f-head);font-weight:400;font-size:clamp(19px,2.6vw,26px);
  line-height:1.4;margin:44px 0 16px;padding-left:16px;position:relative}
.post-body h2::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:4px;background:var(--accent)}
.post-body h3{font-family:var(--f-head);font-weight:400;font-size:17px;margin:30px 0 10px;color:var(--text)}
.post-body strong{color:var(--text);font-weight:700}
.post-body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--accent)}
.post-body ol,.post-body ul{margin:0 0 22px 1.4em;line-height:2}
.post-body li{margin-bottom:6px}
.post-body table{width:100%;max-width:560px;margin:0 0 22px;border-collapse:collapse;
  border:1px solid var(--line)}
.post-body td{border:1px solid var(--line);padding:12px 16px;font-size:15px}
.post-body td:first-child{color:var(--muted);width:38%}


/* ===== お知らせ ===== */
.news{border-top:1px solid var(--line)}
.news-item{padding:24px 0;border-bottom:1px solid var(--line)}
.news-date{font-family:var(--f-num);font-weight:800;font-size:14px;color:var(--accent-2);margin:0 0 6px}
.news-head{font-family:var(--f-head);font-weight:400;font-size:18px;margin:0 0 14px;line-height:1.4}
.news-body{color:#3B4048;font-size:15px;line-height:1.95;max-width:46em}
.news-body p{margin:0 0 14px}
.news-body strong{color:var(--text)}
.news-past > summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:14px;color:var(--muted)}
.news-past > summary::-webkit-details-marker{display:none}
.news-past > summary::before{content:'▶ ';font-size:10px;color:var(--accent)}
.news-past[open] > summary::before{content:'▼ '}


/* ===== 問い合わせフォーム ===== */
.form{max-width:760px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__row{margin-bottom:22px}
.form__2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.form .req{color:var(--accent);font-size:12px;margin-left:4px}
.form input,.form select,.form textarea{
  width:100%;background:#FFFFFF;color:var(--text);border:1px solid #CFD3DA;
  border-radius:2px;padding:13px 14px;font:inherit;font-size:15px;
  transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out)}
.form textarea{resize:vertical;line-height:1.8}
.form input::placeholder,.form textarea::placeholder{color:#9AA0AA}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,78,10,.16)}
.form input:user-invalid,.form textarea:user-invalid{border-color:#E4572E}
.form__note{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.8}
.form__note a{color:var(--accent-2)}
.form__submit{margin-top:34px}
.form__submit .btn{min-width:260px}
.form__err{max-width:760px;margin:0 0 24px;padding:14px 18px;border:1px solid #E4572E;
  background:rgba(228,87,46,.07);color:#8A2B12;font-size:14px}
@media(max-width:600px){.form__2{grid-template-columns:1fr}
  .form__submit .btn{width:100%}}


/* ===== 写真の上に乗る部分だけ白文字にする（背景は白ベース） ===== */
.hero h1, .phero h1, .cta h2{ color:#fff }
.hero__lead, .phero__lead, .cta p{ color:rgba(255,255,255,.93) }
.hero__meta{ color:rgba(255,255,255,.86) }
.hero__meta b{ color:#fff }
.hero .btn--ghost, .cta .btn--ghost, .phero .btn--ghost{
  border-color:rgba(255,255,255,.55); color:#fff }
.hero .btn--ghost:hover, .cta .btn--ghost:hover, .phero .btn--ghost:hover{
  border-color:#fff; background:rgba(255,255,255,.16); box-shadow:0 12px 26px rgba(0,0,0,.28) }

/* ヘッダー：写真の上（スクロール前）は白、スクロールして白帯になったら黒 */
.hd:not(.is-solid) .hd__nav a,
.hd:not(.is-solid) .hd__tel{ color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.35) }
.hd:not(.is-solid) .hd__logo img{ filter:brightness(0) invert(1) }
.hd:not(.is-solid) .hd__burger span,
.hd:not(.is-solid) .hd__burger::before,
.hd:not(.is-solid) .hd__burger::after{ background:#fff }
/* スマホでメニューを開いたら白い面になるので黒文字へ戻す */
.hd.is-open .hd__nav a{ color:var(--text); text-shadow:none }
.hd.is-open .hd__burger span,
.hd.is-open .hd__burger::before,
.hd.is-open .hd__burger::after{ background:var(--text) }

/* トレーナーカードの名前は暗いグラデーションの上に乗るので白 */
.trainer__name{ color:#fff }
.trainer__role{ color:#FFB185 }
/* 縦写真をそのまま見せる（切り抜かない） */
.trainer img{ object-position:center top }


/* ===== 比較表 ===== */
.vs{border:1px solid var(--line);background:var(--surface);overflow:hidden}
.vs__row{display:grid;grid-template-columns:150px 1fr 1fr;border-bottom:1px solid var(--line)}
.vs__row:last-child{border-bottom:0}
.vs__row>*{padding:16px 18px;font-size:14.5px;line-height:1.8}
.vs__row--head{background:#F4F5F7;font-size:13px;color:var(--muted);font-weight:700}
.vs__k{color:var(--muted);font-size:13px;font-weight:700;background:#FAFBFC}
.vs__ours{background:rgba(240,78,10,.05);border-left:3px solid var(--accent)}
.vs__row--head .vs__ours{color:var(--accent-2);font-weight:800}
@media(max-width:767px){
  .vs__row{grid-template-columns:1fr}
  .vs__row>*{padding:12px 16px}
  .vs__row--head{display:none}
  .vs__k{background:#F4F5F7}
  .vs__row>div:nth-child(2)::before{content:'大人数のグループレッスン：';color:var(--muted);font-size:12px;display:block}
  .vs__row>div:nth-child(3)::before{content:'ブクロジム：';color:var(--accent-2);font-size:12px;font-weight:700;display:block}
}

/* ===== 動画（押すまでYouTubeを読み込まない） ===== */
.ytf{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);
  background:#000;cursor:pointer;max-width:900px}
.ytf img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out),opacity .3s}
.ytf:hover img{transform:scale(1.03);opacity:.92}
.ytf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytf__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .3s var(--e-out),background .3s var(--e-out)}
.ytf__btn::before{content:'';position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.ytf:hover .ytf__btn{transform:translate(-50%,-50%) scale(1.08);background:var(--accent-2)}
.ytf__cap{position:absolute;left:14px;bottom:12px;background:rgba(0,0,0,.62);color:#fff;
  font-size:12px;padding:5px 10px;border-radius:2px}
.ytf.is-playing .ytf__btn,.ytf.is-playing .ytf__cap,.ytf.is-playing img{display:none}