*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}.demo a{text-decoration:underline;margin-left:10px}.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(25px);transition:.8s}.reveal.seen{opacity:1;transform:none}:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}@media(max-width:720px){.demo{max-width:calc(100vw - 20px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}:root{--bg:#8b5cff;--ink:#111;--body:"Barlow Condensed","Arial Narrow",sans-serif;--hand:Yomogi,cursive;--lime:#caff4a;--coral:#ff6b72}.pulse-side{position:fixed;z-index:30;left:0;top:0;bottom:0;width:180px;padding:30px 22px;background:#111;color:#fff;display:flex;flex-direction:column}.pulse-side>a{font:900 32px/.8 var(--body)}.pulse-side nav{display:flex;flex-direction:column;gap:18px;margin:auto 0}.pulse-side>span{font:20px var(--hand);color:var(--lime)}main,footer{margin-left:180px}.pulse-collage{height:100svh;min-height:700px;position:relative;overflow:hidden}.hero-person{position:absolute;inset:0;filter:saturate(1.35)}.pulse-collage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#8b5cffbb,transparent 70%)}.pulse-collage h1{position:absolute;z-index:2;left:4vw;bottom:4vh;font:900 clamp(85px,13vw,190px)/.68 var(--body);letter-spacing:-.05em;margin:0;color:white}.count{position:absolute;z-index:3;right:6vw;top:8vh;width:180px;aspect-ratio:1;border-radius:50%;background:var(--lime);display:grid;place-items:center;font:900 90px/1 var(--body);transform:rotate(9deg)}.count small{position:absolute;bottom:25px;font-size:16px}.sticker{position:absolute;z-index:3;padding:20px;background:var(--coral);font:24px var(--hand);transform:rotate(-8deg)}.s-one{left:40%;top:10%}.s-two{right:7%;bottom:20%}.pulse-collage svg{position:absolute;z-index:3;inset:0;width:100%;height:100%}.pulse-collage path{fill:none;stroke:var(--lime);stroke-width:12;stroke-dasharray:25;animation:dash 3s linear infinite}@keyframes dash{to{stroke-dashoffset:-100}}.three-gates{display:grid;grid-template-columns:repeat(3,1fr)}.three-gates>a{min-height:560px;padding:5vw 3vw;display:flex;flex-direction:column;background:var(--lime)}.three-gates>a:nth-child(2){background:var(--coral)}.three-gates>a:nth-child(3){background:#48d8da}.three-gates h2{font:900 clamp(55px,7vw,95px)/.9 var(--body)}.three-gates b{margin-top:auto;font-size:30px}.schedule{padding:14vh 5vw;background:#f4eee1}.schedule header{display:grid;grid-template-columns:1fr 2fr}.schedule h2,.pulse-story h2,.join-pulse h2{font:900 clamp(65px,9vw,125px)/.82 var(--body)}.schedule article{display:grid;grid-template-columns:130px 1fr auto;border-top:2px solid;padding:22px 0;align-items:center}.schedule time{font-size:45px}.schedule b{font-size:28px}.pulse-story{display:grid;grid-template-columns:1fr 1fr;background:#48d8da;align-items:center}.pulse-story>div{padding:6vw}.pulse-story img{height:760px}.join-pulse{padding:14vh 5vw;background:var(--coral)}.join-pulse a{display:inline-block;background:#111;color:#fff;padding:17px 24px}footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px;background:#111;color:#fff}@media(max-width:720px){.pulse-side{position:fixed;top:auto;right:0;width:auto;height:65px;padding:12px 16px;flex-direction:row}.pulse-side>a{font-size:20px}.pulse-side nav{display:none}.pulse-side>span{margin-left:auto}main,footer{margin-left:0}.pulse-collage h1{font-size:72px}.count{width:110px;font-size:55px}.count small{bottom:12px}.three-gates{grid-template-columns:1fr}.three-gates>a{min-height:400px}.schedule header{grid-template-columns:1fr}.schedule article{grid-template-columns:80px 1fr}.schedule article span{grid-column:2}.pulse-story{grid-template-columns:1fr}.pulse-story img{height:600px}.join-pulse h2{font-size:72px}footer{grid-template-columns:1fr;gap:8px;padding-bottom:90px}}
@media(max-width:720px){.pulse-side>a{font-size:18px;letter-spacing:-.02em}}

/*HEADING-LEADING-20260811 ── 見出しの行間を標準へ寄せる(空けすぎない)。
  対象 = 2 行以上に折り返し、行間が 1.06 未満で、日本語を含む見出しだけ。
  日本語は文字が全角の枠いっぱいなので 1.00 は行と行が接する。1.06 以上は隙間が見えているので触らない。
  欧文だけの見出しは、枠いっぱいという理屈が当てはまらないので対象外。
  セレクタが長いのは、共有スタイルが後から読まれて !important で勝つため。
  見出しは 1.15、1 行だけの小見出しは 1.25 を上限にする。
*/
html body div#main main section#times.schedule header h2{line-height:1.25!important}
html body div#main main section.pulse-story div h2{line-height:1.25!important}
html body div#main main section#join.join-pulse h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/*STUDIO-PULSE-RHYTHM-20260818 ── 余白のリズム
  ★見た目のリズムだけを扱うブロック。
  ★スマホ(720px 以下)は共有スタイルが別の形に組み替えるので、ここで触るのは 721px 以上だけ。
  1) 3 つの入口カード: 中身を中央に寄せ、「GO →」を下端へ置く。
  2) 予定表の見出し: 左の列を伸ばさず、見出しの下端に合わせる。 */
@media(min-width:721px){
  .three-gates>a>span{margin-top:auto}
  .schedule header{align-items:end}
}
/*/STUDIO-PULSE-RHYTHM-20260818*/

/*STUDIO-PULSE-BUILD-20260818 ── 章立てと動き
  ★章 = 写真 / 流れる帯 / 入口 / 数字 / 予定表 / プログラム / 物語 / 声 / 料金 / 質問 / 締め の 11 本。
  ★色の並び = 紫 → 黒と黄緑 → 3 色 → 紫 → クリーム → 白 → 水色 → 黄緑 → 黒 → クリーム → 珊瑚 → 黒。
    同じ色を隣り合わせない。
  ★ここで足したクラスは共有スタイルの対象外。文字 12px 以上 / 触る的 44px 以上 /
    見出しの行間 0.85〜1.35 / 見出しの太さ 700 以上 は、このファイルの中で守る。

  ★スクロールで出す仕掛け:
     隠しは clip-path で行い、opacity では隠さない。
   → 既定は「出したまま」。隠すのは html.js が付いているときだけにする。
      html.js は site.js が最初の 1 行で付ける。付かなければ何も隠れない。
    ★.seen の勝ち負けに注意。html.js .reveal は詳細度 (0,2,1) で .reveal.seen (0,2,0) より強い。
      .seen 側にも html.js を付けないと出てこない。 */

.reveal{opacity:1;transform:none}
html.js .reveal{clip-path:inset(0 -24px 101% -24px);
  transition:clip-path .72s cubic-bezier(.2,.75,.25,1)}
html.js .reveal.seen{clip-path:inset(-60px)}
/* 並びの中で少しずつ遅らせる(同じ親の中の順番で数える) */
html.js .reveal:nth-child(2){transition-delay:.07s}
html.js .reveal:nth-child(3){transition-delay:.14s}
html.js .reveal:nth-child(4){transition-delay:.21s}
html.js .reveal:nth-child(5){transition-delay:.28s}
html.js .reveal:nth-child(6){transition-delay:.35s}

/* ── ヒーローを動かす ───────────────────────────────────── */
/* 写真がゆっくり寄る。止まっていた画面に呼吸が出る。 */
.pulse-collage .hero-person{animation:pulseZoom 18s ease-in-out infinite alternate}
@keyframes pulseZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
/* 見出しは 3 行が下から順にめくれて出る。行は i で分けてある(br だと 1 行ずつ動かせない)。
   ★ここも opacity は使わない。透明にすると、主役の見出しが「無い物」として扱われる場面がある。 */
.pulse-collage h1 i{display:block;font-style:normal;
  clip-path:inset(-.18em -.25em 101% -.25em);
  animation:pulseLine .85s cubic-bezier(.2,.75,.25,1) forwards}
.pulse-collage h1 i:nth-child(1){animation-delay:.15s}
.pulse-collage h1 i:nth-child(2){animation-delay:.29s}
.pulse-collage h1 i:nth-child(3){animation-delay:.43s}
@keyframes pulseLine{to{clip-path:inset(-.18em -.25em -.18em -.25em)}}

/* ── 流れる帯 ───────────────────────────────────────────
   2 本を逆向きに流す。中身は同じ並びを 2 回書いてあるので、
   半分ぶん動かせば切れ目なくつながる(-50%)。 */
.pulse-ticker{background:#111;overflow:hidden;padding:0;border-block:3px solid #111}
.tick-row{overflow:hidden;padding:14px 0;white-space:nowrap}
.tick-row.alt{background:var(--lime);border-top:3px solid #111}
.tick-line{display:inline-flex;gap:34px;align-items:center;
  font:900 clamp(20px,2.4vw,34px)/1 var(--body);letter-spacing:.02em;color:var(--lime);
  animation:tickL 26s linear infinite}
.tick-row.alt .tick-line{color:#111;animation-name:tickR}
.tick-line span{flex:none}
@keyframes tickL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tickR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ── 入口カード: 矢印が伸びる ─────────────────────────── */
.three-gates b{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.three-gates>a:hover b,.three-gates>a:focus-visible b{transform:translateX(14px)}

/* ── 数字 ───────────────────────────────────────────────
   0 から実際の数まで数え上げる(site.js)。桁が増えても列が揺れないよう
   等幅の数字にする。 */
.pulse-stats{background:var(--bg);color:#fff;padding:11vh 5vw;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.pulse-stats>div{border-top:3px solid #fff;padding-top:18px}
.pulse-stats b{display:block;font:900 clamp(56px,7vw,104px)/1 var(--body);
  font-variant-numeric:tabular-nums;color:var(--lime)}
.pulse-stats span{display:block;margin-top:6px;font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.06em}

/* ── 予定表: 行に触ると起きる ───────────────────────────── */
.schedule article{transition:background .25s ease,padding-left .25s cubic-bezier(.2,.7,.3,1)}
.schedule article:hover{background:#fff;padding-left:14px}
.schedule article span{transition:color .25s ease}
.schedule article.is-full span{color:#c0343c;font-weight:700}

/* ── プログラム ─────────────────────────────────────────
   白地に太い黒枠。触ると持ち上がって枠が珊瑚色になる。 */
.pulse-programs{background:#fff;padding:13vh 5vw}
.pulse-programs header,.pulse-voice header,.pulse-plans header,.pulse-faq header{
  display:grid;grid-template-columns:1fr 2fr;align-items:end;margin-bottom:clamp(34px,4vw,58px)}
.pulse-programs header p,.pulse-voice header p,.pulse-plans header p,.pulse-faq header p{
  font-size:13px;letter-spacing:.16em;margin:0}
.pulse-programs h2,.pulse-voice h2,.pulse-plans h2,.pulse-faq h2{
  margin:0;font:900 clamp(40px,5.4vw,76px)/1.12 var(--body)}
.pulse-programs>div{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.pulse-programs article{border:3px solid #111;padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;min-height:270px;background:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease}
.pulse-programs article:hover{transform:translateY(-9px);border-color:var(--coral);
  box-shadow:12px 12px 0 var(--lime)}
.pulse-programs b{font:900 clamp(15px,1.4vw,18px)/1 var(--body);letter-spacing:.12em;color:#c0343c}
.pulse-programs h3{margin:12px 0 10px;font:900 clamp(26px,2.6vw,34px)/1.15 var(--body)}
.pulse-programs p{margin:0;font-size:clamp(13.5px,1.3vw,15px);line-height:1.75}
.pulse-programs i{margin-top:auto;padding-top:18px;font-style:normal;
  font:900 clamp(20px,2vw,26px)/1 var(--body)}

/* ── 声 ─────────────────────────────────────────────────
   黄緑の地に白い吹き出し。手書き書体を使うのは付箋と同じ扱い。
  ★傾きは 1.2 度まで。大きく傾けると隣の箱と重なる。 */
.pulse-voice{background:var(--lime);padding:13vh 5vw}
.pulse-voice>div{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px)}
.pulse-voice figure{margin:0;background:#fff;padding:clamp(26px,2.6vw,34px);
  border-radius:22px;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.pulse-voice figure:nth-child(1){transform:rotate(-1.2deg)}
.pulse-voice figure:nth-child(3){transform:rotate(1.2deg)}
.pulse-voice figure:hover{transform:rotate(0deg) translateY(-7px);
  box-shadow:0 22px 40px -26px rgba(17,17,17,.7)}
.pulse-voice figure::after{content:"";position:absolute;left:40px;bottom:-13px;
  width:24px;height:24px;background:#fff;transform:rotate(45deg)}
.pulse-voice blockquote{margin:0;font:22px/1.75 var(--hand)}
.pulse-voice figcaption{margin-top:16px;font-size:13px;letter-spacing:.08em;color:#4a4a4a}

/* ── 料金 ───────────────────────────────────────────────
   黒地にクリームの札。真ん中だけ黄緑にして、少し傾けて付箋を貼る。 */
.pulse-plans{background:#111;color:#fff;padding:13vh 5vw}
.pulse-plans h2{color:#fff}
.pulse-plans header p{color:var(--lime)}
.pulse-plans>div{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,30px);
  align-items:start}
.pulse-plans article{background:#f4eee1;color:#111;padding:clamp(28px,2.8vw,38px);
  position:relative;display:flex;flex-direction:column;min-height:330px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.pulse-plans article:hover{transform:translateY(-10px);box-shadow:0 26px 46px -28px rgba(0,0,0,.9)}
.pulse-plans article.is-best{background:var(--lime);transform:rotate(-1deg)}
.pulse-plans article.is-best:hover{transform:rotate(0deg) translateY(-10px)}
.pl-tag{position:absolute;top:-16px;right:18px;background:var(--coral);color:#111;
  padding:8px 14px;font:14px/1 var(--hand);transform:rotate(5deg)}
.pulse-plans b{font:900 clamp(15px,1.4vw,18px)/1 var(--body);letter-spacing:.12em}
/* ★「通い放題」のような語を途中で折らない。折れると『通い / 放題』になって読みにくい。 */
.pl-price{margin:14px 0 0;font:900 clamp(20px,1.9vw,24px)/1.2 var(--body);word-break:keep-all}
.pl-price em{font-style:normal;font-size:clamp(44px,4.6vw,64px);letter-spacing:-.02em}
.pl-note{margin:14px 0 0;font-size:clamp(13.5px,1.3vw,15px);line-height:1.75}
.pulse-plans a{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;margin-top:auto;background:#111;color:#fff;padding:14px 20px;
  font:900 clamp(14px,1.3vw,16px)/1.2 var(--body);letter-spacing:.04em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s ease}
.pulse-plans article.is-best a{background:#c0343c}
.pulse-plans a:hover{transform:translateY(-3px)}

/* ── よくある質問 ───────────────────────────────────────
   開閉は details。印は + が × へ回る。 */
.pulse-faq{background:#f4eee1;padding:13vh 5vw}
.pulse-faq>div{border-top:2px solid #111}
.pulse-faq details{border-bottom:2px solid #111}
.pulse-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  min-height:56px;padding:20px 0;font:900 clamp(17px,1.8vw,23px)/1.5 var(--body);
  transition:padding-left .25s cubic-bezier(.2,.7,.3,1)}
.pulse-faq summary::-webkit-details-marker{display:none}
.pulse-faq summary:hover{padding-left:10px}
.pulse-faq summary::after{content:"";margin-left:auto;flex:none;width:20px;height:20px;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 100% no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.pulse-faq details[open] summary::after{transform:rotate(135deg)}
.pulse-faq details p{margin:0 0 24px;padding-right:36px;
  font-size:clamp(14px,1.4vw,16px);line-height:1.9;max-width:78ch}

/* ── 申し込み: ボタンが動く ─────────────────────────────── */
.join-pulse a{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.join-pulse a:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}

/* ── 画面が狭いとき ─────────────────────────────────────
   ★触る的は 44px 以上を保つ。
   ★プログラムだけ 2 列へ落とす幅を上げてある(1100px)。3 列のままだと 1024px で
     カードの中身が狭く、見出しの最後の 1 文字が次の行へ落ちる。 */
@media(max-width:1100px){
  .pulse-programs>div{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .pulse-voice>div,.pulse-plans>div{grid-template-columns:1fr}
  .pulse-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .pulse-programs,.pulse-voice,.pulse-plans,.pulse-faq{padding:9vh 22px}
  .pulse-programs>div{grid-template-columns:1fr}
  .pulse-programs header,.pulse-voice header,.pulse-plans header,.pulse-faq header{
    grid-template-columns:1fr;gap:14px;align-items:start}
  .pulse-stats{padding:8vh 22px;gap:22px}
  .pulse-programs article{min-height:0}
  .pulse-plans article{min-height:0}
  .pulse-plans article.is-best{transform:none}
  .pulse-plans article.is-best:hover{transform:translateY(-10px)}
  .tick-line{font-size:19px;gap:24px}
  .pulse-voice figure:nth-child(1),.pulse-voice figure:nth-child(3){transform:none}
  .pulse-faq summary{min-height:60px}
}
/*/STUDIO-PULSE-BUILD-20260818*/

/*STUDIO-PULSE-PROGRAM-IMAGES-20260818 ── プログラムのカードに写真を入れる
  ★写真はカードの内側の縁いっぱいまで出す(枠の 3px の内側)。余白を残すと
    「カードの中に小さい写真が貼ってある」ように見えて、面の強さが出ない。
    そのために余白を変数で持ち、写真だけ負の余白で引き出す。
  ★枠は 3:2。写真も 3:2 なので、静止しているあいだの切り取りは 0。
  ★触ると写真がゆっくり寄る（1.06 倍）。上下左右から 2.83% ずつ枠の外へ出る。
    ★この倍率を上げるなら、写真の縁に何が写っているかを先に見ること。
  ★下地の色 #d4ae72 は、同じページの既存写真の地に合わせた値。読み込み中に見える。 */
.pulse-programs article{--pad:clamp(24px,2.4vw,32px);padding:var(--pad);min-height:0}
.pulse-programs figure{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 20px;
  aspect-ratio:3/2;overflow:hidden;background:#d4ae72}
.pulse-programs figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){
  /* タッチ端末では :hover が居座る。寄ったまま戻らないと
     6 枚のうち 1 枚だけ拡大されたまま並ぶ。 */
  .pulse-programs article:hover figure img{transform:scale(1.06)}
}
@media(max-width:720px){
  .pulse-programs figure{aspect-ratio:3/2;margin-bottom:18px}
}
/*/STUDIO-PULSE-PROGRAM-IMAGES-20260818*/

/*STUDIO-PULSE-MOTION-20260818 ── 常時の動きを「人が自然に気づく」強さへ
  ★飾りの動きの目安：移動なら 60px 以上 / 拡大なら 1.2 倍 / 周期は 5 秒以下。
    これより弱いと、見ている人は動いていることに気づかない。
    （以前は 1.08 倍 / 18 秒だった。）
  ★動かすのは position:absolute の飾りと overflow:hidden の内側の写真だけ。
    文字と枠は 1px も動かないので、横スクロールも幅の計算も変わらない。
  ★動きを減らす設定のときは、冒頭の一括指定(animation:none)が効く。 */
/* ★ヒーローの写真は 3:2。箱は height:100svh なので、画面が横長になるほど上下が切られる。
     1920x840 の実測では上から 14%(寄りの頂点では約 20%)が画面の外だった。
     写真の上端から 1〜2% の所に人の顔が並んでいるので、真ん中を基準に切ると必ず顔が落ちる。
   → 写真の上端を箱の上端に合わせ(object-position)、寄りもそこを支点にする(transform-origin)。
     こうすると倍率をいくつにしても、上端の顔は動かない。切られるのは下側だけになる。 */
.pulse-collage .hero-person{object-position:50% 0;transform-origin:50% 0;
  animation:pulseZoom 5s ease-in-out infinite alternate}
@keyframes pulseZoom{from{transform:scale(1)}to{transform:scale(1.2)}}

/* 付箋は元の傾き(transform)を残したまま、別指定の rotate/scale で揺らす。
   同じ transform に重ねると、静止の傾きが消える。 */
.sticker{animation:stickerSway 3.4s ease-in-out infinite alternate}
.sticker.s-two{animation-duration:4.1s;animation-delay:-1.7s}
@keyframes stickerSway{from{rotate:-5deg;scale:1}to{rotate:6deg;scale:1.12}}

.pulse-collage .count{animation:countFloat 3.6s ease-in-out infinite alternate}
@keyframes countFloat{from{translate:0 0}to{translate:0 -26px}}
/*/STUDIO-PULSE-MOTION-20260818*/

/*STUDIO-PULSE-FACILITY-20260819 ── 設備紹介(新設)
  ★オーナー指摘(2026-08-19 逐語)「フィットネスジムのホームページなのに、スタジオや
    筋トレマシン、各種器具など、設備案内の写真がないのは不自然」。
    プログラム(白地)と物語(水色)に挟まれる位置なので、地の色は黒にして
    「色の並びで同じ色を隣り合わせない」既存ルールを保った。
  ★カードは pulse-programs の 3:2 写真パターンを踏襲しつつ、枠は付けない
    (黒地に白枠だと重くなるため、写真とキャプションだけの素な構成にした)。
  ★写真はまだ無い(2026-08-19 時点はプレースホルダー参照)。オーナーが ChatGPT で
    生成した画像を images-v2/20-facility-{studio,strength,cardio}.webp として置けば、
    そのまま表示される(コードの変更は不要)。 */
.pulse-facility{background:#111;color:#fff;padding:13vh 5vw}
.pulse-facility header{display:grid;grid-template-columns:1fr 2fr;align-items:end;margin-bottom:clamp(34px,4vw,58px)}
.pulse-facility header p{font-size:13px;letter-spacing:.16em;margin:0;color:var(--lime)}
.pulse-facility h2{margin:0;font:900 clamp(40px,5.4vw,76px)/1.12 var(--body)}
.pulse-facility>div{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.pulse-facility figure{margin:0}
.pulse-facility figure>img{aspect-ratio:3/2;object-fit:cover;background:#2a2a2a;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.pulse-facility figcaption{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.pulse-facility figcaption b{font:700 20px/1.1 var(--body);letter-spacing:.02em}
.pulse-facility figcaption span{font-size:13px;color:#c9c9c9}
@media(hover:hover){.pulse-facility figure:hover img{transform:scale(1.06)}}
@media(max-width:960px){.pulse-facility>div{grid-template-columns:1fr}}
@media(max-width:720px){
  .pulse-facility{padding:9vh 22px}
  .pulse-facility header{grid-template-columns:1fr;gap:14px;align-items:start}
}
/*/STUDIO-PULSE-FACILITY-20260819*/
