/* ＆rich トップページの各節。

   組みの方針
   ・コンテンツ幅は1つにせず、節の性格で使い分ける（w-wide / w-main / w-text / w-rail）
   ・縦に通る左端は2本だけ。コンテナの左端と、柱の右
   ・読ませる文字は本文サイズ・墨。補足以外に小さい字や薄い字を使わない
   ・同じ役割の要素は形をそろえる。写真の有無で行の高さを変えない
   ・数字は大きく、単位は小さく組む */

/* ---------- 節の見出し ---------- */
.sh{margin-bottom:clamp(36px,4vw,56px)}
.sh__k{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text);display:block;
  margin-bottom:14px}
.sh h2{margin:0}
.sh__lead{margin-top:18px;color:var(--c-text);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);max-width:var(--w-text)}

/* 見出しを細い柱に立てて、右に本体を置く型 */
.rail{display:grid;grid-template-columns:var(--w-rail) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.rail__head .sh{margin-bottom:0;position:sticky;top:120px}
/* 読ませる文字の幅は本体側で決める。柱の位置は節をまたいで動かさない */
.rail__body .acc{max-width:var(--w-text)}

/* ---------- お悩み ----------
   ファーストビューと同じローズのグラデーションで面を作り、
   裾を吹き出しの形に切り抜いて次の節へつなぐ。
   切り抜きは2枚のマスク（上の四角＋下の形）で作る。
   形の高さは --tail で固定しているので、節が長くなっても裾は伸びない。 */
.concerns{
  --tail-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V10C1030 46 880 70 760 78C700 82 668 86 600 120C532 86 500 82 440 78C320 70 170 46 0 10Z' fill='%23000'/%3E%3C/svg%3E");
  position:relative;isolation:isolate;z-index:1;color:#fff;
  background:url(../assets/grad-rose.jpg) center/cover no-repeat;
  padding-bottom:var(--sec-tight);
  -webkit-mask-image:linear-gradient(#000 0 0),var(--tail-mask);
  -webkit-mask-size:100% calc(100% - var(--tail) + 1px),100% var(--tail);
  -webkit-mask-position:top center,bottom center;
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-image:linear-gradient(#000 0 0),var(--tail-mask);
  mask-size:100% calc(100% - var(--tail) + 1px),100% var(--tail);
  mask-position:top center,bottom center;
  mask-repeat:no-repeat,no-repeat}
/* マスクが使えるときだけ、裾のぶんの余白を足す */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  .concerns{padding-bottom:calc(var(--sec-tight) + var(--tail))}
}
/* ファーストビューの足元は暗く落としてあるので、境目で色が段になる。
   同じ濃さから始めて消えるグラデーションを重ねて、段差を消す */
.concerns::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(46,32,27,.34) 0%,rgba(46,32,27,0) 100%)}
.concerns::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;
  opacity:.28;mix-blend-mode:overlay}
/* 縦組みの改行は <br> だけで決める。自動で折らせると変な位置で列が割れる */
.concerns__vt,.frame__vt{text-wrap:wrap;white-space:nowrap}
.concerns__vt{writing-mode:vertical-rl;text-orientation:mixed;
  font-size:clamp(22px,2.3vw,28px);font-weight:var(--fw-h2);line-height:1.8;
  letter-spacing:.16em;font-feature-settings:var(--ffeat-h2);
  margin:0 0 0 auto;padding-right:6px}
.concerns__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px)}
.concerns__list li{display:flex;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.32);
  font-size:var(--fs-body);letter-spacing:var(--ls-body)}
.concerns__list li:nth-child(1),.concerns__list li:nth-child(2){
  border-top:1px solid rgba(255,255,255,.32)}
.concerns__ic{flex:none;width:46px;height:46px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* 結びの一行は画面の左右中央に置き、上から十分に離す */
.concerns__end{margin-top:clamp(52px,7vw,96px);text-align:center;
  font-size:var(--fs-h3);font-weight:var(--fw-h3);letter-spacing:var(--ls-h3)}

/* ---------- 額縁 ----------
   吹き出しの裾に食い込ませて、お悩み節と地続きに見せる。
   ＆のシンボルは裾の高さまで伸ばし、スクロールに合わせて描かれていく。 */
.frame{position:relative;z-index:0;overflow:hidden;background:var(--c-bg);
  margin-top:calc(var(--tail) * -1);
  padding-top:calc(clamp(64px,7vw,104px) + var(--tail));
  padding-bottom:clamp(64px,7vw,104px)}
/* シンボルは左右2つ。ファーストビュー検討時に取っておいた額縁の型のまま */
.frame__mark{position:absolute;z-index:0;pointer-events:none;
  width:min(46vw,560px);aspect-ratio:1559 / 2344;opacity:.6}
.frame__mark--l{left:-13%;top:calc(var(--tail) * -1.15)}
.frame__mark--r{right:-13%;bottom:-8%;rotate:180deg}
.frame__mark i{display:block;width:100%;height:100%;background:var(--c-brand);
  -webkit-mask-image:url(../assets/logo-symbol.png);
  -webkit-mask-size:contain;-webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-image:url(../assets/logo-symbol.png);
  mask-size:contain;mask-position:center;mask-repeat:no-repeat}
/* 線が引かれていくように、下から斜めに現れる。--p は js が動かす */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  .frame__mark i{--p:100%;
    -webkit-mask-image:url(../assets/logo-symbol.png),
      linear-gradient(162deg,#000 0 var(--p),rgba(0,0,0,0) calc(var(--p) + 13%));
    -webkit-mask-size:contain,100% 100%;
    -webkit-mask-position:center,center;
    -webkit-mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:source-in;
    mask-image:url(../assets/logo-symbol.png),
      linear-gradient(162deg,#000 0 var(--p),rgba(0,0,0,0) calc(var(--p) + 13%));
    mask-size:contain,100% 100%;
    mask-position:center,center;
    mask-repeat:no-repeat,no-repeat;
    mask-composite:intersect}
  .js-draw .frame__mark i{--p:0%}
}
@media (prefers-reduced-motion:reduce){
  .js-draw .frame__mark i{--p:100%}
}
/* 写真を左、縦組みを右。お悩み節と左右を入れ替えてリズムを作る */
.frame__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) var(--w-rail);gap:clamp(28px,5vw,72px);
  align-items:center;max-width:calc(var(--w-wide) + var(--pad-x) * 2);
  margin-inline:auto;padding-inline:var(--pad-x)}
.frame__vt{writing-mode:vertical-rl;text-orientation:mixed;
  font-size:clamp(20px,2.3vw,30px);font-weight:var(--fw-display);line-height:1.75;
  letter-spacing:.16em;font-feature-settings:var(--ffeat-display);
  margin:0 auto 0 0;padding-left:6px}
/* 写真は本文の読み幅までに収める。全幅に伸ばすと余白が消える */
.frame__body img{width:100%;max-width:var(--w-text);aspect-ratio:4/3;
  object-fit:cover;border-radius:var(--r-base);display:block}
.frame__body p{margin-top:var(--sp-lg)}
.frame__body .sub{color:var(--c-text);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body)}

/* ---------- 選ばれる5つの理由 ----------
   中央に写真を置いてスティッキーで固定し、左に見出し、右に本文を流す。
   全部を固定するとスクロールしている感覚が消えるので、動かないのは写真だけ。
   写真は js/reveal.js が切り替える。 */
.rz{--media:clamp(260px,26vw,380px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--media) minmax(0,1fr);
  column-gap:clamp(24px,3.4vw,56px);align-items:start;
  margin-top:clamp(16px,2vw,28px)}
.rz__media{grid-column:2;grid-row:1 / span var(--rz-n,5);position:sticky;
  top:max(96px, calc(50vh - var(--media) * .62));
  aspect-ratio:4/5;border-radius:var(--r-base);overflow:hidden;
  background:var(--c-bg)}
.rz__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1}
/* 中央の写真が2列目を塞ぐので、見出しは1列目、本文は3列目へ自動で流れる */
.rz__h{text-align:right;
  padding-block:clamp(30px,7vh,84px);min-height:56vh;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.rz__t{padding-block:clamp(30px,7vh,84px);min-height:56vh;
  display:flex;flex-direction:column;justify-content:center}
.rz__en{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text)}
.rz__h h3{margin:0;font-size:clamp(19px,1.8vw,24px);font-weight:500;
  letter-spacing:var(--ls-h3);line-height:1.7}
.rz__name{font-size:var(--fs-body-small);letter-spacing:var(--ls-body-small);
  color:var(--c-text);padding-top:10px;border-top:1px solid var(--c-primary);
  align-self:flex-end}
.rz__t p{color:var(--c-text);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body)}

/* ---------- プログラム ---------- */
.prog3__lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:var(--sp-lg)}
.prog3__lead img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r-base);display:block}
.prog3__sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--c-line);padding-top:clamp(32px,4vw,48px)}
.prog3__sub img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-base);display:block;margin-bottom:var(--sp-md)}
.prog3__en{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text);display:block}
.prog3 h3{margin:10px 0 0}
.prog3__sub h3{font-size:var(--fs-h4)}
.prog3__for{margin-top:14px;padding:11px 0;border-block:1px solid var(--c-line);
  font-size:var(--fs-body-small);letter-spacing:var(--ls-body-small);color:var(--c-text)}
.prog3 p{margin-top:14px;color:var(--c-text);font-size:var(--fs-body-small);
  line-height:var(--lh-body-small);letter-spacing:var(--ls-body-small)}
.prog3__time{margin-top:14px;font-size:var(--fs-body-small);
  letter-spacing:var(--ls-body-small);color:var(--c-text-sub)}
.prog3__tag{display:inline-block;background:var(--c-brand);border-radius:var(--r-base);
  padding:4px 12px;font-size:13px;letter-spacing:.06em;margin-left:12px;
  vertical-align:middle}

/* ---------- 料金 ----------
   塊は枠線ではなく地の色差で作る（節はベージュ、カードは白）。
   読ませる文字はすべて本文サイズ・墨。数字だけを大きくする。 */
.fee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
.fee__c{background:var(--c-surface);border-radius:var(--r-base);
  padding:clamp(22px,2.2vw,30px)}
.fee__name{display:flex;align-items:baseline;gap:6px;margin:0;
  padding-bottom:var(--sp-md);border-bottom:1px solid var(--c-line)}
.fee__name b{font-size:clamp(40px,4.2vw,54px);font-weight:500;line-height:1;
  letter-spacing:-.02em}
.fee__name span{font-size:var(--fs-h4);letter-spacing:.02em;color:var(--c-text)}
.fee__c dl{margin-top:var(--sp-xs)}
.fee__c dl>div{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:14px 0}
.fee__c dl>div+div{border-top:1px solid var(--c-line)}
.fee__c dt{font-size:var(--fs-body);letter-spacing:var(--ls-body);
  color:var(--c-text)}
/* 回数の数字だけ一段大きく。単位より情報として重い */
.fee__c dt b{font-size:20px;font-weight:500;letter-spacing:0;padding-inline:1px}
.fee__c dd{margin:0;display:flex;align-items:baseline;gap:3px}
.fee__c dd b{font-size:clamp(22px,2.1vw,28px);font-weight:500;line-height:1;
  letter-spacing:.01em}
.fee__c dd span{font-size:var(--fs-body);letter-spacing:.02em;color:var(--c-text)}
.fee__note{margin-top:clamp(28px,3vw,40px);color:var(--c-text);
  font-size:var(--fs-body-small);line-height:var(--lh-body-small);
  letter-spacing:var(--ls-body-small);max-width:var(--w-text)}

/* ---------- 体験の流れ ----------
   円の節点を点線でつなぐ。円はスクロールに合わせて広がり、そのあと点線が下へ伸びる。
   角丸4pxの原則の例外はここと顔写真だけ（円であることが「節」の記号になる）。 */
/* Trial sequence: spacious numerals and a quiet continuous rule. */
.flow{--node:70px;--fgap:46px;display:grid;gap:var(--fgap);margin-top:8px;list-style:none}
.flow li{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);gap:36px;align-items:start}
.flow__node{display:block;width:var(--node);height:60px;background:none;border:0;border-radius:0}
.flow__node b{display:block;white-space:nowrap;font-family:var(--ff-label);font-size:52px;font-weight:400;letter-spacing:-.025em;line-height:1;color:var(--c-primary-text)}
.flow li:not(:last-child)::before{content:"";position:absolute;left:30px;top:75px;width:1px;height:calc(100% + var(--fgap) - 93px);background:var(--c-line-strong);transform-origin:top}
.flow__b{padding-top:3px}.flow h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);letter-spacing:var(--ls-h3);margin:0 0 14px}
.flow p{color:var(--c-text);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);max-width:var(--w-text)}
.flow__note{margin-top:36px;font-size:var(--fs-body-small);line-height:var(--lh-body-small)}
.js-reveal .flow li::before{transform:scaleY(.15);transition:transform 1000ms var(--ease-exhale)}
.js-reveal .flow li.is-in::before{transform:scaleY(1)}
@media(max-width:767px){.flow{--node:48px;--fgap:36px}.flow li{gap:22px}.flow__node{height:46px}.flow__node b{font-size:40px}.flow li:not(:last-child)::before{left:22px;top:61px;height:calc(100% + var(--fgap) - 78px)}.flow h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.js-reveal .flow li::before{transform:none;transition:none}}

/* ---------- スタッフ ---------- */
/* 4人が横一列。写真は段いっぱいに使う（小さいと節が空いて見える） */
.staff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px)}
.staff__ph{width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 12%;border-radius:var(--r-base);display:block;
  background:var(--c-surface)}
/* 写真待ちの枠。地と同じ色だと「空き」に見えるので白い面にする */
.staff__ph--none{position:relative;border:1px solid var(--c-line-strong)}
.staff__ph--none::after{content:"";position:absolute;inset:0;
  background:url(../assets/logo-symbol.png) center/auto 30% no-repeat;
  opacity:.14;filter:brightness(0)}
.staff h3{margin:18px 0 2px;font-size:var(--fs-h4)}
.staff__en{font-family:var(--ff-label);font-size:13px;
  letter-spacing:var(--ls-label);color:var(--c-text-sub)}
.staff__r{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-line);
  font-size:var(--fs-body-small);color:var(--c-text);
  letter-spacing:var(--ls-body-small);line-height:1.9}

/* ---------- お客様の声（Googleから取得して差し込む） ---------- */
.gvoice{min-height:120px}
.gvoice__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px)}
.gvoice__c{border-top:1px solid var(--c-line);padding-top:var(--sp-lg)}
.gvoice__hd{display:flex;align-items:center;gap:12px}
.gvoice__av{width:38px;height:38px;border-radius:var(--r-full);flex:none;
  background:var(--c-bg-alt);object-fit:cover}
.gvoice__nm{font-size:var(--fs-body-small);letter-spacing:var(--ls-body-small)}
.gvoice__st{color:var(--c-primary);letter-spacing:.16em;font-size:13px}
.gvoice__c p{margin-top:14px;font-size:var(--fs-body-small);color:var(--c-text);
  line-height:var(--lh-body-small);letter-spacing:var(--ls-body-small)}
/* 投稿された本文は改行も含めて原文のまま出す */
.gvoice__tx{white-space:pre-line}
.gvoice__num{margin-left:8px;font-size:13px;color:var(--c-text)}
.gvoice__foot b{margin-left:10px;font-weight:500;color:var(--c-text)}
a.gvoice__nm{text-decoration:none;border-bottom:1px solid var(--c-line)}
.gvoice__when{margin-top:10px;font-size:13px;color:var(--c-text-sub);
  letter-spacing:.04em}
.gvoice__foot[hidden]{display:none}
.gvoice__foot{margin-top:var(--sp-lg);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap;
  font-size:13px;color:var(--c-text-sub);letter-spacing:.04em}
.gvoice__sum{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp-lg)}
.gvoice__sum b{font-size:clamp(28px,2.6vw,34px);font-weight:500;line-height:1}
.gvoice__load{color:var(--c-text-sub);font-size:var(--fs-body-small)}

/* ---------- アクセス ----------
   読ませる文字なので本文サイズ・墨。項目名だけを小さい英字ラベルにして段差をつける。 */
.access2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.access2 dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
  padding:16px 0;border-bottom:1px solid var(--c-line)}
.access2 dl>div:first-child{border-top:1px solid var(--c-line)}
.access2 dt{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text)}
.access2 dd{margin:0;font-size:var(--fs-body);letter-spacing:var(--ls-body);
  line-height:var(--lh-body);color:var(--c-text)}
.access2 iframe{width:100%;height:100%;min-height:520px;border:0;
  border-radius:var(--r-base);display:block;background:var(--c-bg-alt)}

/* ---------- 画面幅ごとの調整 ---------- */
@media(max-width:1023px){
  .rail{grid-template-columns:minmax(0,1fr);gap:var(--sp-xl)}
  .rail__head .sh{position:static}
  .concerns__vt{writing-mode:horizontal-tb;letter-spacing:-.02em;margin:0;
    padding:0;white-space:normal}
  /* 2列だと項目が2行に折れて高さがばらつく幅がある。1列に切り替える */
  .concerns__list{grid-template-columns:minmax(0,1fr)}
  .concerns__list li:nth-child(2){border-top:0}
  /* 3列だと写真が小さくなりすぎる。写真は上に貼りつけ、文字がその下を流れる。
     グリッドのままだと写真の行の高さぶんしか貼りつかないので、通常の流し込みに戻す */
  .rz{display:block}
  .rz__media{grid-column:1;grid-row:auto;position:sticky;top:70px;z-index:2;
    width:auto;aspect-ratio:auto;margin-bottom:var(--sp-xl);background:var(--c-bg-alt);
    margin-inline:calc(var(--pad-x) * -1);padding:26px var(--pad-x) 18px;
    border-radius:0}
  .rz__media img{position:relative;inset:auto;aspect-ratio:16/10;
    border-radius:var(--r-base)}
  .rz__media img:not(.is-on){position:absolute;inset:26px var(--pad-x) 18px}
  .rz__h,.rz__t{grid-column:1;min-height:0;
    padding-block:0;text-align:left}
  .rz__h{padding-top:clamp(26px,5vw,40px);gap:8px}
  .rz__t{padding-bottom:clamp(20px,4vw,32px)}
  .rz__name{align-self:flex-start}
  .prog3__lead{grid-template-columns:minmax(0,1fr)}
  .staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gvoice__grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
  .concerns__list{grid-template-columns:minmax(0,1fr)}
  .concerns__list li:nth-child(2){border-top:0}
  .frame__in{grid-template-columns:minmax(0,1fr);gap:var(--sp-lg)}
  .frame__vt{order:-1;margin:0;padding:0}
  .frame__mark--l{width:86vw;left:-24%}
  .frame__mark--r{width:86vw;right:-24%}
  .frame__vt{writing-mode:horizontal-tb;letter-spacing:-.02em;margin:0;padding:0;
    white-space:normal}
  .frame__mark{width:74vw}
  .prog3__sub{grid-template-columns:minmax(0,1fr)}
  .fee{grid-template-columns:minmax(0,1fr)}
  /* 4人・4段は縦に積むと長い。2列で畳む */
  .staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .access2{grid-template-columns:minmax(0,1fr)}
  .staff__ph{max-width:132px}
}
/* 幅が狭いと2列では「ピラティスインストラクター」が語の途中で折れる。
   1列に戻し、写真を左・文字を右に並べて縦の長さを抑える */
@media(max-width:520px){
  .staff{grid-template-columns:minmax(0,1fr);gap:var(--sp-lg)}
  .staff>div{max-width:none;display:grid;grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:auto auto 1fr;column-gap:var(--sp-md);align-items:start}
  .staff__ph{grid-column:1;grid-row:1 / span 3}
  .staff h3{grid-column:2;grid-row:1;margin-top:0}
  .staff__en{grid-column:2;grid-row:2;display:block}
  .staff__r{grid-column:2;grid-row:3;margin-top:10px;padding-top:10px}
}