@charset "utf-8";
/* =========================================================
   Mayso Golf Lab LP  —  Figma comp "PC" (1080) / "SP" (375)
   content width 67.5rem / backgrounds full-bleed
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --navy:#192750;
  --navy-d:#05223d;
  --navy-l:#3b476a;
  --gold:#c5af5e;
  --lav:#d5dae8;
  --gray:#eaedef;
  --gray2:#d3d9de;
  --ice:#edf7ff;
  --peri:#92a1cc;
  --white:#fff;

  --dg:min(11.11vw,10.625rem);      /* 120/1080  standard diagonal        */
  --dg-about:min(41.7vw,28.125rem); /* 450/1080  about -> white wedge（1080超も450で止める）*/
  --dg-peak:min(19.44vw,13.125rem); /* 210/1080  features top peak（カンプ実測）*/
  --dg-feat:min(17.4vw,15.625rem);  /* 188/1080  features -> 01           */
  --dg-f03:min(19.9vw,17.5rem);   /* 215/1080  03 -> coach              */

  --ff:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-disp:"Zen Kaku Gothic Antique","Noto Sans JP",sans-serif;
  --ff-num:"Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
  --ff-en:"Roboto","Noto Sans JP",sans-serif;
  --ff-serif:"Roboto Serif",serif;
  --ff-mincho:"Noto Serif JP",serif;                          /* カンプ: STRENGTHSリード */
  --ff-zkn:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;   /* カンプ: 一打/確実/成長/Mayso Golf Lab */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* ====== 全体の縮尺 ======
   CSSの寸法はすべて rem。1080pxのカンプを 16px = 1rem で組んであるので、
   ルートを画面幅に比例させれば、どの幅でもカンプと同じ比率で表示される。
     1.48148vw = 16px / 1080px × 100
   上限1920px（ルート28.444px）。それ以上は文字が大きくなりすぎるため固定する。 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;font-size:16px}
@media (min-width:769px){ html{font-size:min(calc(100vw / 67.5),28.4444px)}   /* 67.5rem = 1080px。1080pxちょうどで16pxになる */ }
/* スマホはSPカンプ(375px)基準。23.4375rem = 375px。375pxちょうどで16pxになる。 */
@media (max-width:768px){ html{font-size:min(calc(100vw / 23.4375),18.3467px)} }   /* 430pxで頭打ち。それ以上は横に伸びるだけにする */
body{
  margin:0;font-family:var(--ff);color:var(--navy);background:var(--white);
  line-height:1.7;font-weight:500;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0}
/* <picture> はWebPの出し分け用ラッパー。レイアウトには関与させない */
picture{display:contents}
/* display:contents で <source> が親の flex/grid の子になってしまう。
   幅0でも gap が1つ余分に入るため、WebPを出し分けている要素だけ位置がずれる
   （menu6 の 03/04/05 でアイコンが3.5625remずれていた）。source は描画対象ではないので消す */
source{display:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.wrap{width:min(67.5rem,100%);margin-inline:auto;position:relative;z-index:2}
@media (max-width:768px){.wrap{width:calc(100% - 2rem)}}
.pc-only{display:block}
.sp-only{display:none}
.sp-line{display:none}
.studio__sp{display:none}
.gold{color:var(--gold)}
.b{font-weight:700}
.uline.strong{font-size:1.5rem}
.uline{background:linear-gradient(transparent 64%,rgba(197,175,94,.9) 64%,rgba(197,175,94,.9) 94%,transparent 94%);font-weight:700}
.strong{font-weight:700}

/* ---------- arrow icon ---------- */
.arw{
  position:absolute;right:0.9375rem;top:50%;transform:translateY(-50%);
  width:2.375rem;height:2.375rem;border-radius:50%;background:#fff;
}
.arw::before{content:"";position:absolute;left:0.5625rem;top:50%;width:1.25rem;height:0.125rem;background:var(--navy);transform:translateY(-50%)}
.arw::after{
  content:"";position:absolute;right:0.625rem;top:50%;width:0.5625rem;height:0.5625rem;
  border-top:0.125rem solid var(--navy);border-right:0.125rem solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
}

/* =========================================================
   HEADER / GLOBAL NAV
   ========================================================= */
.header{
  position:absolute;top:0;left:0;width:100%;z-index:60;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.25rem 1.125rem 0 1.3125rem;
}
.header__logo{pointer-events:auto}
.header__logo img{width:6.8125rem}
.hamburger{pointer-events:auto;width:2.75rem;height:1.625rem;position:relative;margin-top:0.625rem}
.hamburger span{position:absolute;left:0;width:100%;height:0.1875rem;background:#fff;border-radius:0.125rem}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:0.6875rem}
.hamburger span:nth-child(3){top:1.375rem}

.gnav{
  position:fixed;inset:0;z-index:100;background:rgba(19,39,80,.93);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.gnav.is-open{opacity:1;visibility:visible}
.gnav__inner{width:min(67.5rem,100% - 2.5rem);height:100%;margin-inline:auto;display:flex;align-items:center;gap:2.5rem}
.gnav__logo{margin-left:min(13.875rem,20vw)}
.gnav__logo img{width:6.375rem}
.gnav__menu{margin-left:auto;width:min(29.375rem,46%);padding-right:min(10.5rem,15vw)}
.gnav__menu li+li{margin-top:2.3125rem}
.gnav__menu a{color:#fff;font-size:1.1875rem;font-weight:400;line-height:1.2;letter-spacing:.02em;transition:color .25s;display:inline-block}
.gnav__menu a:hover{color:var(--gold)}
.gnav__close{position:absolute;top:1.375rem;right:1.625rem;width:3.625rem;height:3.625rem;border-radius:50%;background:#fff;z-index:2}
.gnav__close::before,.gnav__close::after{content:"";position:absolute;top:50%;left:50%;width:1.625rem;height:0.15625rem;background:var(--navy)}
.gnav__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.gnav__close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* =========================================================
   FV
   ========================================================= */
/* 数値はカンプ(1080×702)のノード実寸から。%指定なので幅が変わっても比率が崩れない。
   Rectangle 44 / Exclude / Rectangle 45 / magnific_jSoE5RTLD0 / Group 60-62 に対応 */
.fv{position:relative;width:100%;aspect-ratio:1080/702;overflow:hidden;
  /* 画面が43.875remより低いときは、FV全体を1080:702のまま縮めて1画面に収める。
     --fvstage は「縮めた後の67.5rem相当の横幅」。中の要素はすべてこれを基準に置く */
  --fvstage:min(67.5rem,calc(100vh * 1.53846));
  --fvstage:min(67.5rem,calc(100svh * 1.53846));
  max-height:min(43.875rem,100vh);
  max-height:min(43.875rem,100svh)}
.fv__bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(90deg,#243857 0%,#174b79 100%)}
/* Exclude: -115,-20 / 1011×893 / #fff 5% */
.fv__glow{position:absolute;left:-10.648%;top:-2.849%;width:93.611%;height:127.208%;border-radius:50%;background:rgba(255,255,255,.05)}
/* Rectangle 45: 0,127 / 1080×394 / #072e52 / path M0 66 L1080 0 L1080 248 L0 394 Z */
.fv__band{position:absolute;left:0;top:18.091%;width:100%;height:56.125%;background:#072e52;
  clip-path:polygon(0 16.75%,100% 0,100% 62.94%,0 100%)}
/* ゴルファー: 画像枠は -208,80 / 975×626。透過余白を詰めたので不透明域の位置で指定 */
/* カンプは切り抜きの人物に影が付いている（輪郭とクラブに沿って地の紺が約26%沈む）。
   box-shadow は矩形に付くので使えない。drop-shadow はアルファに沿うのでこちらを使う。
   値はカンプの「暗くなり方」と実レンダリングを突き合わせて総当りで決めた（残差 0.104→0.058）。 */
.fv__golfer{position:absolute;left:-4.315%;top:23.575%;width:60.861%;display:block;
  filter:drop-shadow(3.625rem -0.3125rem 0.375rem rgba(0,0,0,.26))}
.fv__golfer img{width:100%;height:auto;display:block}

.fv__inner{position:relative;z-index:2;height:100%;width:min(67.5rem,100%);margin-inline:auto}
.fv__copy{position:absolute;right:0.375rem;top:25%;text-align:right;margin:0;font-family:var(--ff-disp)}
.fv__copy-sub{
  display:block;color:#fff;font-size:2rem;font-weight:700;line-height:1.6;letter-spacing:.02em;
  text-shadow:0 0.125rem 0.875rem rgba(0,0,0,.3);
}
.fv__copy-main{
  display:block;color:var(--gold);font-size:2.5rem;font-weight:700;line-height:1.5;letter-spacing:.02em;
  margin-top:0.25rem;text-shadow:0 0.125rem 0.875rem rgba(0,0,0,.3);
}

/* 3つのブロブ。Group 60/61/62 = 149×138、影は drop-shadow 0 0.25rem 0.625rem rgba(0,0,0,.26) */
.fv__points{position:absolute;inset:0;pointer-events:none}
.fvpt{position:absolute;width:13.796%;height:19.658%;display:grid;place-items:center}
.fvpt--1{left:34.907%;top:71.083%}   /* 377,499 数値で分析 */
.fvpt--2{left:51.296%;top:71.083%}   /* 554,499 スイングを解析 */
.fvpt--3{left:67.685%;top:71.795%}   /* 731,504 最大効率で */
.fvpt__bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  fill:#d3d9de;filter:drop-shadow(0 0.25rem 0.625rem rgba(0,0,0,.26))}
.fvpt__t{position:relative;text-align:center;color:var(--navy);font-weight:700;
  font-size:min(1.481vw,1rem);line-height:1.2;letter-spacing:.01em}
.sp-br{display:none}

/* 67.5rem を超えたら FV は引き伸ばさない。グラデと斜め帯だけフルワイドに伸ばし、
   ゴルファーとグローは中央1080のステージに実寸で固定する（拡大すると縦が伸びて
   下のブロブがノートPCの画面外に落ちるため） */
@media (min-width:769px){
  /* コピーとブロブの親。cqw を使うので文字サイズもステージと一緒に縮む */
  .fv__inner{width:var(--fvstage);container-type:inline-size}
  .fv__copy{right:.556%}                        /* 6/1080 */
  .fv__copy-sub{font-size:2.963cqw}             /* 32/1080 */
  .fv__copy-main{font-size:3.704cqw;margin-top:.37cqw}  /* 40/1080 */
  .fvpt__t{font-size:1.481cqw}                  /* 16/1080 */
  /* 背景のグローとゴルファーも同じステージ基準に固定する */
  .fv__glow{left:calc(50% - var(--fvstage) * .60648);top:calc(var(--fvstage) * -.01852);
            width:calc(var(--fvstage) * .93611);height:calc(var(--fvstage) * .82685)}  /* -115,-20 1011x893 */
  .fv__golfer{left:calc(50% - var(--fvstage) * .54315);top:calc(var(--fvstage) * .15324);
              width:calc(var(--fvstage) * .60861)}                                     /* -47,166 657 */
}

/* =========================================================
   STRENGTHS
   ========================================================= */
.strengths{background:var(--lav);padding:2.5rem 0 4.8125rem}
.strengths__lead{text-align:center;font-size:1.875rem;font-weight:700;color:#000;letter-spacing:.01em;line-height:1;font-family:var(--ff-mincho)}
.strengths__lead .mark{background:var(--gold);padding:0.125rem 0.625rem;font-size:2.25rem;font-weight:700;font-family:var(--ff-zkn)}
.strengths__head{
  text-align:center;font-family:var(--ff-disp);font-weight:700;font-size:3.125rem;color:#000;
  letter-spacing:.005em;margin-top:1rem;line-height:1.2;
}
.menu6{display:grid;grid-template-columns:repeat(3,1fr);row-gap:4.125rem;margin-top:1.9375rem}
.menu6__item{text-align:center}
.menu6__item:nth-child(3n){transform:translateX(-0.75rem)}  /* カンプでは右列が0.75rem左 */
.menu6__head{display:flex;align-items:center;gap:3.625rem;width:11.25rem;margin:0 auto;transform:translateX(-2.8125rem)}
.menu6__no{
  font-family:var(--ff-en);font-weight:500;font-size:2.5rem;line-height:1;color:#000;
  position:relative;padding-bottom:0.75rem;
}
.menu6__no::after{content:"";position:absolute;left:0;bottom:0;width:2.375rem;height:0.1875rem;background:var(--gold)}
/* 金の円は画像から外して CSS で描く。焼き込みだと2倍表示でふちがぼけるため。
   画像側は白い線画だけ（透過・150x150）。--gold はカンプ実測の rgb(197,175,94) と同値。 */
.menu6__icon{width:4.6875rem;height:4.6875rem;background:var(--gold);border-radius:50%}
.menu6__lead{font-size:1rem;font-weight:500;color:#000;margin-top:0.875rem;line-height:1}
.menu6__title{font-size:1.5rem;font-weight:900;color:#000;line-height:1;margin-top:0.25rem}

.spcta{display:none}
.spcta__btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;height:3.25rem;font-size:1.0625rem;font-weight:700;letter-spacing:.04em}
.spcta__btn--gold{background:var(--gold);color:var(--navy)}
.spcta__btn--navy{background:var(--navy);color:#fff}

/* =========================================================
   NAVY BAND
   ========================================================= */
.band{background:var(--navy);padding:1.0625rem 0 0.8125rem}
.band__sub{font-size:2rem;font-weight:500;color:#fff;line-height:1.25;text-align:center}
.band__main{font-size:2rem;font-weight:700;color:#fff;line-height:1.25;text-align:center;margin-top:0.25rem}

/* =========================================================
   CTA 1
   ========================================================= */
.cta1{background:var(--gray);padding:0.875rem 0 0.1875rem}
.cta1__inner{display:flex;align-items:flex-start}
.cta1__img{width:26.625rem;flex:none;margin-top:0.125rem;margin-left:-0.75rem;margin-right:-4.75rem}
.cta1__body{flex:1;min-width:0;padding:0 0 0 4.1875rem}
.cta1__head{font-size:2.5rem;font-weight:900;color:var(--navy);text-align:center;line-height:1.8;letter-spacing:.01em;padding-left:6.375rem}
/* price */
.price{margin-top:1rem}
.cta1 .price__arrow{margin-right:2.0625rem}  /* カンプ: 5,500 の字面 x=667 */
.price--card{margin-left:1.5625rem}
.price__label{font-size:1.75rem;font-weight:700;color:var(--navy);line-height:1.3}
.price__row{display:flex;align-items:flex-end;gap:0.25rem;margin-top:-0.25rem}
.price__normal{display:flex;align-items:flex-end;gap:0.25rem}
.price__normal-l{font-size:1.125rem;font-weight:500;line-height:1.1;padding-bottom:0.5rem}
.price__strike{font-family:var(--ff-num);font-weight:700;font-size:3.125rem;line-height:1.05;color:var(--navy);position:relative}
.price__strike::after{content:"";position:absolute;left:-0.5rem;right:-0.625rem;top:52%;height:0.3125rem;background:var(--gold);transform:rotate(-12deg)}
.price__yen{font-size:1.125rem;font-weight:500;padding-bottom:0.375rem}
.price__arrow{
  width:0;height:0;border-left:1.25rem solid var(--navy);
  border-top:0.8125rem solid transparent;border-bottom:0.8125rem solid transparent;margin:0 0.625rem 1rem 0.625rem;
}
.price__sale{font-family:var(--ff-num);font-weight:700;font-size:6rem;line-height:.78;color:var(--gold);letter-spacing:-.015em;
  -webkit-text-stroke:0.375rem var(--navy);paint-order:stroke fill}  /* カンプ実測: 紺の縁0.1875rem */
.price__tax{font-family:var(--ff-num);font-weight:700;font-size:2rem;color:var(--gold);padding-bottom:0.5rem;white-space:nowrap;font-feature-settings:"palt" 1;
  -webkit-text-stroke:0.375rem var(--navy);paint-order:stroke fill}  /* 同上 */
/* refund */
.refund{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.cta1 .refund{margin-left:3rem}
.bcard .refund{margin-left:2.125rem}  /* 「当日」を足した分の逃げ */
.bcard .refund>:last-child{margin-left:0}  /* 重なり解消 */
.refund__badge{
  width:4.5rem;height:4.5rem;border-radius:50%;background:var(--gold);color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.refund__txt{font-size:1.5rem;font-weight:900;line-height:1.5;color:var(--navy)}
.refund__big{
  font-size:4rem;font-weight:900;color:var(--gold);line-height:1.1;letter-spacing:.01em;white-space:nowrap;
  /* カンプ実測: 全方向0.125remの均一な縁。4隅にずらした text-shadow だと斜めの画や
     「！」の丸で輪郭を追えずガタつくので、字の形に沿う text-stroke で描く。
     stroke は輪郭の内外に半分ずつ乗るので、外に0.125rem出すには0.25remを指定する。 */
  -webkit-text-stroke:0.25rem var(--navy);paint-order:stroke fill;
}
/* buttons */
.btnrow{display:flex;align-items:flex-start;gap:1.5rem;margin-top:1.25rem}
.cta1 .btnrow{margin-left:-4.6875rem;gap:2rem}
.btnrow__col{position:relative;display:flex;flex-direction:column;align-items:center}
.ribbon{background:var(--navy);color:#fff;font-size:1rem;font-weight:500;min-width:14rem;text-align:center;padding:0.1875rem 1rem 0.5625rem;position:relative;z-index:2;margin-bottom:-0.75rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 0.375rem),calc(50% + 0.3125rem) calc(100% - 0.375rem),50% 100%,calc(50% - 0.3125rem) calc(100% - 0.375rem),0 calc(100% - 0.375rem))}
.btn{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:21.875rem;height:3.75rem;border-radius:62.4375rem;font-size:1.5rem;font-weight:700;letter-spacing:.1em;padding-right:2.5rem;
  transition:transform .2s,box-shadow .2s;
}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--navy{background:var(--navy);color:#fff;margin-top:1.3125rem} /* 金ボタン側のリボン分(33.2-12=1.325rem)に合わせる */
.btn:hover{transform:translateY(-0.125rem);box-shadow:0 0.5rem 1.125rem rgba(25,39,80,.22)}
.note{font-size:0.875rem;font-weight:500;color:var(--navy);margin-top:0.5rem}

/* =========================================================
   CONCERNS
   ========================================================= */
.concerns{background:var(--navy);padding:2.3125rem 0 calc(var(--dg) + 2.3125rem);color:#fff}  /* 吹き出しを14px上げた分をここで戻してセクションの高さを保つ */  /* 見出しを0.9375rem下げた分 */
.sechead{position:relative;text-align:left}
.sechead--center{text-align:center}
.sechead__wm{
  display:block;font-family:var(--ff-serif);font-weight:400;font-size:8rem;line-height:.7525;
  color:transparent;-webkit-text-stroke:0.03125rem rgba(255,255,255,.148);
  letter-spacing:0;white-space:nowrap;user-select:none;  /* カンプは全透かし letterSpacing 0 */
}
.sechead__ttl.gold{color:var(--gold)}  /* カンプ: コーチプロフィールは金 */
.sechead__ttl{font-size:2rem;font-weight:700;line-height:1.3;color:#fff;margin-top:-3.75rem;position:relative}  /* カンプ実測に合わせて -75→-60（CONCERNS / Q&A） */
.sechead__sub{font-size:1.25rem;font-weight:700;color:var(--gold);margin-top:0.5rem}
.bubbles{margin-top:4.375rem;display:grid;grid-template-columns:1fr 1fr;gap:2.375rem 0.6875rem;padding:0 1.0625rem 0 1.125rem}  /* カンプ: 各32.3125rem @18/546 */
.bubble{
  position:relative;background:#fff;border-radius:0.875rem;color:var(--navy);
  font-size:1rem;font-weight:700;line-height:1.75;padding:0 0.625rem;min-height:4.25rem;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
}
.bubble::before{
  content:"\201C";position:absolute;left:0.6875rem;top:-1.25rem;   /* カンプ実測: 引用符のグリフ y2029〜2054 に対し吹き出しは y2038〜2105。上辺に16px食い込む */
  font-family:"Franklin Gothic Demi","Arial Black",sans-serif;font-weight:700;
  font-size:4rem;color:var(--gold);line-height:1;   /* カンプ実測: 1字13x26px。5.5remだと19x36pxで大きすぎた */
}
.bubble--center{grid-column:1/3;width:calc(50% - 0.25rem);margin-inline:auto}
.concerns__close{text-align:center;font-size:1.5rem;font-weight:700;line-height:1.75;margin-top:5.6875rem;color:#fff}

/* =========================================================
   PROBLEM / ROUTE
   ========================================================= */
/* 斜めのクリップは「背面レイヤー」にかける。要素本体にかけると中のテキストまで切れる
   （カンプではFigmaの図形とテキストが別レイヤーなので、中身は切られていない） */
/* 写真は斜めの境界をまたいで次のセクションに重なる（カンプもそうなっている）。
   後ろのDOMほど上に描かれるので、そのままだと次のセクションの地色に隠れる。
   背景は ::before の clip-path で自分の形に切られているので、持ち上げても他を覆わない。 */
/* 重なり順は3層に割れる: prob の背景 < 次セクションの紺 < prob の写真。
   セクションごと持ち上げると背景まで上がって次セクションの斜めを覆うので、
   isolation を外して「写真だけ」を上げる。 */
.prob{position:relative;margin-top:calc(var(--dg) * -1)}
.prob::before{
  content:"";position:absolute;inset:0;z-index:0;
  clip-path:polygon(0 0,100% var(--dg),100% 100%,0 100%);
}
.prob--1{padding:6.9375rem 0 calc(var(--dg) + 4.25rem)}
.prob--2{padding:5.6875rem 0 calc(var(--dg) + 2.8125rem)}  /* カンプは写真の下・左端に ice が8px出る（3811〜3818）。8px足りずgray2が直接来ていた */  /* ラベルを1行に直した分(+1.75rem)を戻す */
.prob--3{padding:5.3125rem 0 calc(var(--dg) - 0.25rem)}  /* prob2を8px伸ばした分をここで吸収。本文とABOUTの位置は変わらない */  /* 同上 */
.prob--1::before{background:var(--gray2)}
.prob--2::before{background:var(--ice);inset:-2.3125rem 0 0 0}  /* カンプ実測: iceの斜めはwedge--tlの上端(セクション上端-37px)から始まる */
.prob--3::before{background:var(--gray2)}
.prob__inner{position:relative}
/* 67.5rem超では .wrap が中央寄せになるため、right:0 が「画面の右端」ではなく
   「wrapの右端」になり、写真の外側に地色が残る。カンプは画面の端まで出る。
   PC幅では位置の基準をセクション(.prob 全幅)に移す。写真と紺枠だけが対象。 */
/* 等比スケールにしたことで 67.5rem = 100vw になり、wrap がそのまま画面幅になった。
   そのため right:0 が画面の右端を指す。position:static にする必要はもう無い
   （static にすると top の基準が .prob になり、写真が padding-top ぶん上へずれる）。 */
.prob__body{padding:0 23.75rem 0 6.875rem;position:relative;z-index:1}  /* 背景(::before z-index:0)より上に */
/* 写真の背面にずらして敷く紺の矩形。カンプでは別レイヤーの装飾なのでCSSで再現する */
/* 写真は矩形ではなく平行四辺形。.fig のノードが VECTOR で、パスの四隅は
   (0,0) (315,30.93) (315,483) (0,444) ＝ 上辺も下辺も右へ下がる。
   prob2 は枠が330x506だが割合は同じ（6.404% / 91.925%）。 */
/* CSSの描画順は filter → clip-path。同じ要素に両方置くと影まで切り落とされるので、
   紺の枠は影ではなく「同じ平行四辺形をもう1枚0.9375remずらして後ろに敷く」形で作る。 */
.prob__photo{position:absolute;width:19.6875rem;z-index:3;   /* 次セクションより上。カンプは写真が境界にかぶる */
  clip-path:polygon(0 0,100% 6.404%,100% 100%,0 91.925%)}
.prob__inner::after{
  content:"";position:absolute;z-index:2;background:var(--navy);
  clip-path:polygon(0 0,100% 6.404%,100% 100%,0 91.925%);
}
.prob--1 .prob__photo{right:0;top:4.1875rem}   /* .fig: x765〜1080＝右端に接する。上端はカンプ実測で+1.25rem */
.prob--1 .prob__inner::after{right:0.9375rem;top:5.125rem;width:19.6875rem;aspect-ratio:315/482.4}   /* 写真の位置 +(-15,+15)。高さは比率で追従させる */
/* .fig のノードが m00=-1（行列式-1＝左右反転）。原本を差し替えたときに反転を
   持ってきていなかった。影も transform の影響を受けるので符号を先に反転させておく。 */
.prob--2 .prob__photo{left:-0.9375rem;top:1rem;width:20.625rem;transform:scaleX(-1)}
.prob--2 .prob__inner::after{left:0;top:1.9375rem;width:20.625rem;aspect-ratio:330/505.4;transform:scaleX(-1)}  /* 写真より0.9375rem下げ、下端にも紺の縁を見せる */
.prob--3 .prob__photo{right:0;top:3.9375rem}   /* 同上。上端はカンプ実測で+2.25rem */
.prob--3 .prob__inner::after{right:0.9375rem;top:4.875rem;width:19.6875rem;aspect-ratio:315/483.1}
.wedge{position:absolute;background:var(--navy);z-index:1}
/* カンプ実測: この三角はセクションの上端より2.125rem上から始まる（x2で3150、セクション上端は3184）。
   top:0 だと下に2.125remずれて、下の写真に食い込む。 */
.wedge--tl{left:0;top:-2.3125rem;width:57.7%;height:13.3vw;max-height:12.75rem;clip-path:polygon(0 0,100% 48.6%,0 100%)}
.wedge--br{right:0;bottom:0;width:67%;height:15.6vw;max-height:15rem;clip-path:polygon(100% 0,100% 100%,0 53.8%)}

.labelbox{
  display:inline-block;position:relative;margin-left:-0.875rem;background:var(--navy);color:#fff;
  font-size:1.5rem;font-weight:700;letter-spacing:.02em;padding:0.75rem 0.875rem;line-height:1.2;text-align:center;
  white-space:nowrap;   /* 必ず1行。折り返すと箱が53→5.125remになり下が全部ずれる */
}
.labelbox::after{content:"";position:absolute;left:0.5625rem;top:0.5625rem;width:100%;height:100%;background:var(--gold);z-index:-1}
/* カンプ実寸（canvas.fig）: prob1 349x53 / prob2 413x53 / prob3 346x53。
   ただし Chrome の字送りは Figma よりわずかに広く、カンプ幅のままだと
   prob2 が0.25rem・prob3 が0足りずに2行になる。文字サイズは変えずに箱だけ広げる */
.prob--1 .labelbox{width:21.8125rem;margin-left:-0.375rem}
.prob--2 .labelbox{width:26.125rem;text-align:left;padding-left:0.6875rem}  /* カンプ25.8125rem＋0.3125rem */
.prob--3 .labelbox{width:21.9375rem;margin-left:-0.9375rem}  /* カンプ21.625rem＋0.3125rem */
/* prob3のラベルは transform ではなく padding で合わせる（下の要素との間隔もカンプに合うため） */
.prob__lead{font-size:1.25rem;font-weight:400;margin-top:2.5625rem;color:var(--navy)}  /* カンプ実測: ラベルの箱の下端から40px。5remだと金の下敷き(9px)に文字が乗る */
/* カンプ: 枠線は0.125rem。幅は prob1 507 / prob2 549 / prob3 404（canvas.fig実寸） */
/* カンプ実測: ・は枠の内側から prob1 27 / prob2 30 / prob3 2.1875rem、大きさ4x0.25rem、
   ・の右端から本文まで1rem。以前は left:0.125rem・6x0.375rem で枠に貼り付いていた。 */
.listbox{border:0.125rem solid var(--navy);padding:1.25rem 0 1.25rem 1.6875rem;margin-top:0.75rem;display:block;box-sizing:border-box}
.prob--1 .listbox{width:31.6875rem;margin-left:-0.0625rem;margin-top:1.125rem}
.prob--2 .listbox{width:34.3125rem;margin-left:-0.1875rem;margin-top:1.5625rem;padding-left:1.875rem}
.prob--3 .listbox{width:25.25rem;margin-left:0.25rem;margin-top:2rem;padding-left:2.1875rem}
/* 本文の上余白もカンプ実測に合わせる（セクションごとに違う） */
.prob--2 .prob__txt--top{margin-top:2.0625rem}  /* 同上。カンプ実測33px */
.prob--2 .listbox + .prob__txt{margin-top:1.375rem}
.prob--3 .labelbox + .prob__txt{margin-top:2.0625rem}  /* 同上。カンプ実測34px */
.prob--3 .listbox + .prob__txt{margin-top:2.1875rem}
.listbox li{position:relative;padding-left:1.3125rem;font-size:1.25rem;font-weight:400;line-height:1.8;color:var(--navy)}
.prob--2 .listbox li{padding-left:1.25rem}
.prob--3 .listbox li{padding-left:1.125rem}
.listbox li::before{content:"";position:absolute;left:0;top:1rem;width:0.25rem;height:0.25rem;border-radius:50%;background:var(--navy)}
  /* top:1rem = (行送り2.25rem − 点0.25rem) ÷ 2。1行目の中心に来る */
.prob__txt{font-size:1.25rem;font-weight:400;line-height:1.8;margin-top:1.625rem;color:var(--navy)}
.prob__txt--top{margin-top:1.875rem}
.prob__txt--bold{font-weight:700}
.prob--2 .prob__body{padding:0 1.625rem 0 30.875rem}

/* =========================================================
   ABOUT + FEATURES (white bridge)
   ========================================================= */
.bridge{background:var(--white);position:relative}
.about{
  color:#fff;position:relative;margin-top:calc(var(--dg) * -1);isolation:isolate;
  /* 斜め境界より上に残る三角は、カンプでは直前のセクションと同じ #d3d9de。
     .bridge の白がそのまま出ていたので、上端 --dg 分だけ地色を敷く。
     下側の三角（--dg-about）はカンプでも白なので触らない。 */
  background:linear-gradient(var(--gray2),var(--gray2)) top/100% var(--dg) no-repeat;
  padding:11.6875rem 0 18.25rem;   /* FEATURES頂点を13.125remにした分を相殺。見出しを1.1875rem下げた分と、
                              チェック行を3.75rem+0.5625remにして0.6875rem伸びた分も引く */
}
.about::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--navy);
  clip-path:polygon(0 0,100% var(--dg),100% calc(100% - var(--dg-about)),0 100%);
}
/* ABOUT→FEATURES の4色は同じ48.33%の頂点を共有する。
   濃紺の高さ = 紺の斜線の深さ × 0.4833 / (1 - 0.4833)。 */
.about::after{
  content:"";position:absolute;left:0;top:auto;bottom:0;width:48.33%;height:calc(var(--dg-about) * 0.935359);
  background:var(--navy-d);z-index:1;
  clip-path:polygon(0 0,100% 48.33%,0 100%);
}
.about .sechead__ttl{font-family:var(--ff);font-size:2rem;margin-top:-5.8125rem;font-weight:900}  /* -112→-93 */
.about__lead{text-align:center;font-family:var(--ff);font-size:2.25rem;font-weight:700;line-height:1.55;margin-top:5.5625rem}
.about__div{display:block;width:2.875rem;height:0.125rem;background:#fff;margin:3.875rem auto}
.about__lead2{text-align:center;font-size:2rem;font-weight:700;line-height:1.44}
.about__cols{display:flex;gap:2.125rem;margin-top:7.3125rem;align-items:flex-start;padding:0 2.6875rem}  /* カンプ実測: 本文1行目が0.9375rem上 */
.about__txt{flex:1;font-size:1.25rem;font-weight:400;line-height:2;letter-spacing:-.035em;margin-top:-1.4375rem}  /* カンプは本文1行目(5148)が金のチェック1行目(5143)と揃う。本番は23px下だった */  /* カンプ実測: 1行目442px。書体差3.4%を字送りで詰めて1行を確保 */
.checks{width:30.875rem;flex:none;margin-top:-1.125rem}  /* カンプ実測: 金の帯の上端が本文よりさらに1.125rem上 */
.checks li{font-size:1.125rem;
  position:relative;background:var(--gold);color:var(--navy);font-size:1.125rem;font-weight:700;
  padding:0.75rem 1rem 0.75rem 5.3125rem;min-height:3.75rem;display:flex;align-items:center;line-height:1.3;  /* カンプ実測: 帯の高さ3.75rem */
}
.checks li+li{margin-top:0.5625rem}  /* カンプ実測: 帯の間隔0.5625rem（ピッチ4.3125rem） */
/* カンプ: 白い太いリング＋紺のチェック（チェックは円からはみ出す） */
/* このLPは *{box-sizing:border-box} なので width に border が含まれる。
   外径2.1875rem（カンプ実測）にしたいなら width も 2.1875rem。1.5625remにすると外径1.5625remになり、
   2.1875remのレ点の箱と中心がずれる。 */
.checks li::before{content:"";position:absolute;left:1.9375rem;top:50%;transform:translateY(-50%);width:2.1875rem;height:2.1875rem;border-radius:50%;border:0.3125rem solid #fff}
.checks li::after{content:"";position:absolute;left:1.9375rem;top:50%;width:2.1875rem;height:2.1875rem;transform:translateY(-50%);
  background:no-repeat center/2.1875rem 2.1875rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cpath d='M9.5 13.5 17.5 25 32 0' fill='none' stroke='%23192750' stroke-width='4.5'/%3E%3C/svg%3E")}

.features{
  position:relative;margin-top:calc(var(--dg-about) * -0.4833);isolation:isolate;
  padding:6.625rem 0 9.9375rem;
}
.features::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--peri);
  /* ABOUT下端から頂点までの深さと同じ値を使い、3本の斜線を一点に揃える。 */
  clip-path:polygon(48.33% 0,100% calc(var(--dg-about) * 0.4833),100% 100%,0 100%,0 calc(var(--dg-about) * 0.4833));
}
/* FEATURESの透かしは斜めの頂点をまたいで「ペリウィンクル」と「白」の両方に載る。
   白のストロークだと白地側で完全に消える（Sの上が欠けて見える原因）。
   カンプは薄いグレー。ペリ地で #afb4ca / 白地で #e5e3e3 になる値を逆算した */
.feathead .sechead__wm{-webkit-text-stroke:0.03125rem rgba(203,200,200,.5)}
.feathead__ttl{
  font-family:var(--ff);font-size:2rem;font-weight:700;color:var(--navy);
  margin-top:-3.375rem;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0.375rem;
}
.feathead__num{
  font-family:var(--ff-en);font-weight:700;font-size:8.3125rem;line-height:.537;color:#fff;  /* カンプ実測: 字面 64x92 */
  -webkit-text-stroke:0.375rem var(--navy);paint-order:stroke fill;padding:0 0.25rem;position:relative;top:-0.5625rem;
}
.featintro{display:flex;gap:0;margin-top:4.9375rem;align-items:flex-start;padding-left:4rem}
.featintro__body{flex:1;min-width:0}
.featintro__ttl{font-family:var(--ff);font-size:2.25rem;font-weight:700;color:var(--navy);line-height:1.55;letter-spacing:-.04em}  /* 同上。枠に対し余りが1.4%しかなく2行に落ちていた */
.featintro__txt{font-size:1.125rem;font-weight:500;color:var(--navy);line-height:1.78;margin-top:1.5rem}
.featintro__img{width:31.8125rem;flex:none;margin:-5rem -4.9375rem 0 0;transform:translateY(-1rem)}

/* --- 01 / 02 / 03 --- */
.feats{
  position:relative;margin-top:calc(var(--dg-feat) * -1 - 0.875rem);isolation:isolate;  /* カンプ実測: セクション上端 6169（本番は21px下だった）*/
}
.feats::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--navy);
  clip-path:polygon(0 var(--dg-feat),100% 0,100% 100%,0 100%);
}
.feat{color:#fff;position:relative;z-index:2}
.feat--01{padding:5.5625rem 0 0.0625rem}   /* カンプ実測: 01の帯はセクション上端+221px */
.feat--02{margin-top:-4.375rem;padding:0 0 0.25rem}   /* 帯の1行化と本文位置の調整ぶんを相殺 */
.feat--03{margin-top:-1.1875rem;padding:0 0 13.125rem}  /* 01・02を計48px下げた分をここで戻す */ /* feat--02本文を2.125rem詰めた分を margin-top で相殺 */
.feat__head{display:flex;align-items:center;gap:1.5rem}
/* カンプ実測: 番号＋見出しは右端揃えではなく、本文カラムの左端(36.625rem)に揃う。
   flex-end だと01が8.9375rem右に出ていた。 */
.feat__head--r{justify-content:flex-start;padding-left:36.625rem}
.feat__head--l{justify-content:flex-start;padding-left:3.75rem}
.feat__no{font-family:var(--ff-en);font-weight:600;font-style:italic;font-size:9.375rem;line-height:.677;color:#fff;letter-spacing:-.02em}
.feat__name{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0.75rem}
.feat__ttl{font-size:2.25rem;font-weight:700;line-height:1.2}
.feat__sub{font-size:1rem;font-weight:700;margin-top:0.25rem}
.feat__body{display:flex;gap:1.5rem;align-items:flex-start;margin-top:1.875rem}
.feat--02 .feat__desc{margin-top:0.9375rem}  /* カンプ実測1.625rem。-0.875remは帯が2行だった頃の逃げで、1行に直したら本文に食い込んでいた */
.feat__shot{margin:0;flex:none;width:34.375rem;position:relative}
.feat__shot--l{margin-left:0.75rem}
.feat__shot--r{margin-right:0.75rem}
.feat__shot::before{content:"";position:absolute;left:-0.875rem;top:1.125rem;width:100%;height:100%;background:var(--gold);z-index:-1}
.feat__shot--r::before{left:0.875rem}
.feat__text{flex:1;min-width:0}
.feat__body--rev .feat__text{padding-left:4.0625rem}
/* カンプ実測: 帯は6本とも1行・高さ55〜3.5rem。折り返すと5remになり下の本文に食い込む。 */
.feat__bar{display:table;background:var(--gold);color:var(--navy);font-size:1.5rem;font-weight:700;padding:0.75rem 1.125rem;line-height:1.3;white-space:nowrap;letter-spacing:-.025em}  /* 書体差で帯が2〜4%長くなり、02で写真とのすき間が18→9pxに潰れていた */
.feat__bar+.feat__bar{margin-top:0.3125rem}   /* カンプ実測: 帯どうしの間は5〜0.375rem */
.feat__desc{font-size:1rem;font-weight:500;line-height:2;margin-top:0.75rem;color:#fff}  /* カンプ実測: 帯の下端から本文まで1.4375rem */

.fdiv{height:20.9vw;max-height:18.75rem;position:relative;overflow:hidden;z-index:1}
.fdiv::after{content:"";position:absolute;inset:0;background:var(--peri)}
.fdiv--right::after{clip-path:polygon(43.5% 50%,100% 0,100% 100%)}
.fdiv--left::after{clip-path:polygon(0 0,63.5% 50%,0 100%)}

/* =========================================================
   COACH
   ========================================================= */
/* periwinkle wedge between feature 03 and coach */
.fdiv3{
  height:min(22.96vw,20rem);margin-top:calc(min(22.96vw,20rem) * -1);
  background:var(--peri);position:relative;
  clip-path:polygon(0 min(19.9vw,17.375rem),100% 0,100% 100%,0 100%);
}
.coach{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding-top:2.3125rem;padding-bottom:3.8125rem;   /* 見出しを0.5625rem下げた分 */
}
.coach__band{
  position:absolute;left:0;right:0;top:16.4375rem;height:64.375rem;
  background:var(--navy-l);z-index:0;clip-path:polygon(0 27.4%,100% 0,100% 100%,0 75.5%);
}
.coach .sechead__ttl{font-size:2rem;margin-top:-4.125rem}  /* 共通の-60より0.5625rem上 */
.coachview{margin-top:3.125rem}
.coachlist{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;padding:0 2.625rem;margin-top:5.625rem}  /* 行の間隔0だと上の段のカードと下の段の金の枠が接する。カンプ実測26px */
.ccard{
  width:calc((100% - 3rem)/3);background:var(--gray2);border-radius:0.375rem;position:relative;
  padding:0 1.375rem 2.5rem;box-shadow:0 0.375rem 1.125rem rgba(0,0,0,.18);overflow:hidden;
}
.ccard::before{content:"";position:absolute;left:0;top:0;width:100%;height:13.625rem;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 52%,0 100%)}
.ccard__photo{position:relative;width:13.75rem;max-width:100%;margin:2.25rem auto 0}
.ccard__photo img{width:100%;border-radius:50%}
.ccard__name{text-align:center;font-size:1.5rem;font-weight:700;color:var(--navy);margin-top:0.875rem;letter-spacing:.06em;line-height:1.25}
.ccard__kana{text-align:center;font-size:0.75rem;font-weight:700;color:var(--navy);letter-spacing:.04em;line-height:1.5}
.ccard__cred{font-size:0.875rem;font-weight:700;color:var(--navy);line-height:1.6;letter-spacing:-.012em;margin-top:1.25rem;border-top:0.0625rem solid #9aa0a8;padding-top:1.25rem}
.ccard__bio{font-size:0.875rem;font-weight:400;color:var(--navy);line-height:1.62;margin-top:1.375rem;letter-spacing:-.03em}  /* 書体差で1行増え、カードが24px高くなって下の金の枠に接していた */
.coachnav{display:none}

/* =========================================================
   BENEFIT
   ========================================================= */
.benefit{
  background:#2b3a4e url(../images/benefit-bg.jpg) no-repeat center top;background-size:cover;
  color:#fff;padding:4.8125rem 0 4.3125rem;text-align:center;position:relative;  /* カード内を2.875rem詰めた分を戻す */
}
/* 対応ブラウザにはWebPを配る（604KB → 165KB）。非対応はjpgのまま */
@supports (background-image:image-set(url(x.webp) type("image/webp"))){
  .benefit{background-image:image-set(url(../images/benefit-bg.webp) type("image/webp"),url(../images/benefit-bg.jpg) type("image/jpeg"))}
}
.benefit__head{font-size:3rem;font-weight:700;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:1.625rem}
.benefit__head::before,.benefit__head::after{content:"";width:13.125rem;height:0.0625rem;background:#fff}
.benefit__txt{font-size:1.25rem;font-weight:700;line-height:1.8;margin-top:2.1875rem;text-shadow:0 0.0625rem 0.5rem rgba(0,0,0,.25)}
.benefit__txt:first-of-type{margin-top:5.0625rem}
.bcard{
  width:48.125rem;max-width:100%;margin:3.875rem auto 0;background:rgba(255,255,255,.84);
  border:0.3125rem solid var(--gold);padding:2.125rem 1.875rem 1.875rem;color:var(--navy);text-align:left;
}
.bcard__ttl{font-size:2.5rem;font-weight:900;color:var(--navy);line-height:1.25;text-align:center;margin-top:0.9375rem}  /* カンプ実測: 見出しが0.9375rem上にあった */
.price--card{margin-top:1.8125rem}  /* 見出しを0.9375rem下げた分を相殺 */  /* カンプ実測: 見出しとの間が1.4375rem広かった */
.price--card .price__row{margin-top:-1.3125rem}  /* カンプは5,500が初回体験50分とほぼ同じ高さから始まる */
.price--card .price__label{font-size:1.75rem;line-height:1.3}
.price--card .price__sale{font-size:6rem;line-height:.78}
.price--card .price__tax{font-size:2rem}
.bcard .refund{margin-top:1rem}
.bcard .refund__badge{width:4.25rem;height:4.25rem}
.bcard .refund__txt{font-size:1.5rem}
.bcard .refund__big{font-size:4rem}
.bcard__note{font-size:0.875rem;font-weight:500;text-align:right;margin-top:1.25rem;padding-right:0;margin-right:-1.4375rem}
.btnrow--benefit{justify-content:center;margin-top:2.25rem}

/* =========================================================
   VOICE
   ========================================================= */
.voice{background:var(--peri);padding:1.875rem 0 4.6875rem;color:var(--navy)} /* 内部調整分を相殺。見出しを2.0625rem下げた分も引く */
.voice__head{padding-left:7rem}  /* カンプ: 見出しの字面 x=126 */
.sechead__wm--l{-webkit-text-stroke:0.03125rem rgba(255,255,255,.5)}
/* 透かし文字は装飾なので transform で位置合わせする（flowを動かさない）。値はカンプ実測との差分 */
/* ↓SP用。PCは下の @media (min-width:769px) で上書きする */
.about .sechead__wm{transform:translateY(-1.125rem)}
.features .sechead__wm{transform:translateY(-1.125rem)}
.voice .sechead__wm{transform:translateY(0.3125rem)}
.studio .sechead__wm{transform:translateY(0.1875rem)}

/* 透かし文字の縦位置。Figmaのテキストボックスの上端と、CSSの行ボックスの上端は一致しない
   （カンプはボックスより約2.4375rem上に字面がある）。カンプPNGの「インク上端」を実測して合わせた値 */
@media (min-width:769px){
  /* 紺帯の2行は同じ右端に揃える。 */
  .band__sub{text-align:right;padding-right:0}
  .band__main{text-align:right;padding-right:0;white-space:nowrap}
  /* 英字の輪郭が直前のセクションに出ないよう、上端付近の見出しだけ12px下げる。 */
  .concerns .sechead__wm{transform:translate(-0.25rem,-1.9375rem)}
  .about    .sechead__wm{transform:translateY(-3.1875rem)}
  .features .sechead__wm{transform:translateY(-3.75rem)}
  .coach    .sechead__wm{transform:translate(1.0625rem,-1.875rem)}
  .voice    .sechead__wm{transform:translate(-2.8125rem,-1.625rem)}
  .studio   .sechead__wm{transform:translate(0.0625rem,-1.4375rem)}
  .faq      .sechead__wm{transform:translate(-1.5625rem,-1.625rem)}
}
.voice__ttl{font-size:2rem;font-weight:700;margin-top:-2.375rem;position:relative;color:var(--navy);padding-left:0.875rem}  /* -71→-38 */
.voice__sub{font-size:1.25rem;font-weight:700;color:var(--navy);margin-top:-0.25rem;margin-left:-1.375rem;padding-left:2.25rem}
/* カンプ実測: カードは幅29.0625rem @ x=65 / 566、本文は x=110 / 611 */
.voicelist{display:grid;grid-template-columns:29.0625rem 29.0625rem;gap:2.25rem;margin-top:1.3125rem;padding:0 3.0625rem 0 4.0625rem}
.voicecol--offset{margin-top:-3.875rem}
.vcard{position:relative;background:#fff;border-radius:1rem;padding:2rem 1.3125rem 1.5rem 2.8125rem;box-shadow:0 0.5rem 1rem rgba(25,39,80,.16)}
.vcard+.vcard{margin-top:3.5rem}
.vcard__avatar{position:absolute;left:-1.0625rem;top:-1rem;   /* カンプ実測: 丸はカードの上端から16px上。-2.9375rem(47px)だと上のカードに23px食い込んでいた */width:4.375rem;height:4.375rem;border-radius:50%;background:var(--navy) url(../images/avatar.png) no-repeat center/100% 100%;overflow:hidden}  /* カンプ実測: 丸はカードの上端から16px上（本番は47pxで上のカードに食い込んでいた） */
.vcard::after{
  content:"\201D";position:absolute;right:1.375rem;top:-0.25rem;
  font-family:"Franklin Gothic Demi","Arial Black",sans-serif;font-weight:700;font-size:4.625rem;color:var(--gold);line-height:1;
}
.vcard__stars{color:var(--gold);font-size:1.25rem;font-weight:700;letter-spacing:.08em;line-height:1}
.vcard__txt{font-size:1rem;font-weight:400;line-height:1.75;margin-top:0.75rem;color:#000}

/* =========================================================
   STUDIO
   ========================================================= */
.studio{background:var(--navy);color:#fff;padding:2.125rem 0 5.5rem}  /* 見出しを0.8125rem下げた分 */
.studio .wrap{width:min(61.5rem,calc(100% - 2rem))}
/* カンプは1ノード2サイズ: Mayso Golf Lab=1.5rem / レッスンスタジオ=2rem、行送り2.625rem */
.studio__ttl{font-size:1.5rem;font-weight:700;line-height:2.625rem;margin-top:-4.75rem;position:relative}  /* -89→-76 */
.studio__ttl span:last-child{font-size:2rem}
/* カンプ: 本文は x=52 / 幅462、写真は x=541 / 幅494 */
.studio__cols{display:flex;gap:1.6875rem;margin-top:4.8125rem;align-items:flex-start;padding-left:0.25rem}
.studio__txt{width:28.875rem;flex:none;text-align:left;flex:1;font-size:1.125rem;font-weight:400;line-height:2}
.studio__photo{margin:0;width:30.875rem;flex:none}
.studio__tel{display:flex;align-items:baseline;gap:0.75rem;margin-top:1.9375rem;line-height:1}
.studio__tel-l{font-size:1.5rem;font-weight:700;letter-spacing:.06em}
.studio__tel a{font-size:2.5rem;font-weight:700;letter-spacing:.01em}
.studio__hours{display:flex;align-items:center;gap:0.875rem;margin-top:0.25rem;font-size:1.5rem;font-weight:400}
/* カンプは白の丸ピル。金ではない */
.studio__hours-l{background:#fff;color:var(--navy);font-size:0.875rem;font-weight:500;padding:0.25rem 0.9375rem;border-radius:62.4375rem}
.studio__acc{font-size:1.5rem;font-weight:700;margin-top:2.25rem;letter-spacing:.02em}
.studio__addr{font-size:1rem;font-weight:400;line-height:1.75;margin-top:0.25rem}
.studio__map{margin:0.125rem auto 0;width:61.4375rem;max-width:100%;aspect-ratio:983/435}
.studio__map iframe{width:100%;height:100%;border:0;display:block}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--peri);padding:2.125rem 0 6.8125rem;color:var(--navy)}  /* 見出しを0.9375rem下げた分 */  /* 下の余白がカンプで7rem分ある */
.faq .sechead__wm{-webkit-text-stroke:0.03125rem rgba(255,255,255,.25)}
.faq__ttl{color:var(--navy);margin-top:-3.75rem}  /* カンプ実測に合わせて -75→-60 */
.faqlist{margin-top:4.1875rem;padding:0 7.1875rem 0 4.25rem}
.faqitem+.faqitem{margin-top:1.125rem;border-top:0.0625rem solid rgba(25,39,80,.25);padding-top:1.125rem}
.faqitem__q{display:flex;align-items:center;gap:1.375rem;width:100%;text-align:left;padding:0}
.faqitem__mark{
  width:3.375rem;height:3.375rem;border-radius:50%;background:#fff;color:var(--navy);flex:none;
  font-family:var(--ff-serif);font-size:1.75rem;display:flex;align-items:center;justify-content:center;
}
.faqitem__qtxt{flex:1;font-size:1.25rem;font-weight:700;line-height:1.5}
.faqitem__icon{width:2.125rem;height:2.125rem;border-radius:50%;background:var(--navy);flex:none;position:relative}
.faqitem__icon::before,.faqitem__icon::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.faqitem__icon::before{width:1rem;height:0.125rem}
.faqitem__icon::after{width:0.125rem;height:1rem;transition:transform .3s}
.faqitem.is-open .faqitem__icon::after{transform:translate(-50%,-50%) scaleY(0)}
/* grid-template-rows:0fr は minmax(auto,0fr) と等価。auto最小値が中身の高さで効くため
   Chromeでは潰れず閉じない（実測4.625rem）。必ず minmax(0,0fr) と書く */
.faqitem__a{display:grid;grid-template-rows:minmax(0,0fr);visibility:hidden;
  transition:grid-template-rows .35s ease,visibility 0s linear .35s}
.faqitem.is-open .faqitem__a{grid-template-rows:minmax(0,1fr);visibility:visible;
  transition:grid-template-rows .35s ease,visibility 0s}
.faqitem__a>div{overflow:hidden;min-height:0}
.faqitem__inner{display:flex;gap:1.125rem;background:var(--navy);color:#fff;border-radius:0.375rem;padding:1.625rem 1.875rem;margin:0.375rem 0 0 3.375rem}
.faqitem__mark--a{width:auto;height:auto;background:none;color:#fff;font-size:1.625rem;line-height:1.3;display:block;flex:none}
.faqitem__inner p{font-size:1rem;font-weight:500;line-height:2}

/* =========================================================
   FOOT CTA / FOOTER / STICKY
   ========================================================= */
.footcta{background:var(--gray);padding:4.25rem 0 4.625rem}
.btnrow--foot{justify-content:center;margin-top:0}
.footer{background:var(--navy);color:#fff;text-align:center;padding:2.875rem 0}
.footer p{font-size:0.875rem;font-weight:400}

/* カンプ: 金ボール 182x182 @877,560 / 白ボール 182x182 @877,731
   文字はボール上のテキストノード（今すぐ体験予約する @+51,+65 / LINEで問い合わせ @+43,+69） */
.sticky{position:fixed;right:1rem;bottom:1.5rem;z-index:50;width:11.375rem;
  opacity:0;visibility:hidden;transform:translateY(1rem);
  transition:opacity .35s ease,transform .35s ease,visibility .35s}
.sticky.is-shown{opacity:1;visibility:visible;transform:none}
.sticky__ball{position:relative;display:block;width:11.375rem;transition:transform .25s}
.sticky__ball:hover{transform:translateY(-0.25rem)}
.sticky__ball img{width:100%;height:auto;filter:drop-shadow(0 0.5rem 0.875rem rgba(0,0,0,.32))}
.sticky__label{
  position:absolute;left:0;right:0;text-align:center;color:var(--navy);
  font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:.01em;pointer-events:none;
}
.sticky__gold .sticky__label{top:35.7%}   /* 65/182 */
.sticky__white{margin-top:-0.25rem}
.sticky__white .sticky__label{top:37.9%}  /* 69/182 */
.sticky__badge{font-size:0.75rem;font-weight:500;
  position:absolute;left:50%;top:2.7%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:0.75rem;font-weight:500;line-height:1.25;
  text-align:center;padding:0.25rem 0.625rem;border-radius:0.1875rem;white-space:nowrap;pointer-events:none;
}
.sticky__badge::after{
  content:"";position:absolute;left:50%;bottom:-0.5rem;transform:translateX(-50%);
  border:0.3125rem solid transparent;border-top:0.5625rem solid var(--navy);
}
.stickysp{display:none;transform:translateY(100%);transition:transform .35s ease}
.stickysp.is-shown{transform:none}

/* =========================================================
   TABLET
   ========================================================= */


/* =========================================================
   SP  (375)
   ========================================================= */
@media (max-width:768px){
  :root{
    --dg:min(11.11vw,2.75rem);
    --dg-about:min(41.7vw,10rem);
    --dg-peak:min(20.4vw,4.875rem);
    --dg-feat:min(17.4vw,4.125rem);
    --dg-f03:min(19.9vw,4.75rem);
  }
  .wrap{width:calc(100% - 2rem)}
  .pc-only{display:none}
  .sp-only{display:block}
  .sp-line{display:initial}

  .header{position:fixed;background:#bdc3cc;padding:0 0.875rem;height:3.5625rem;align-items:center;box-shadow:0 0.0625rem 0.375rem rgba(0,0,0,.12)}
  .header__logo img{width:2.875rem}
  .hamburger{width:2rem;height:1.375rem;margin-top:0}
  .hamburger span{height:0.15625rem;background:var(--navy)}
  .hamburger span:nth-child(1){top:0}
  .hamburger span:nth-child(2){top:0.59375rem}
  .hamburger span:nth-child(3){top:1.1875rem}
  .gnav__inner{flex-direction:column;justify-content:center;gap:1.625rem;padding-top:2.5rem}
  .gnav__logo{margin-left:0}
  .gnav__logo img{width:4.625rem}
  .gnav__menu{margin:0;width:100%;text-align:center;padding-right:0}
  .gnav__menu li+li{margin-top:1.25rem}
  .gnav__menu a{font-size:1rem}
  .gnav__close{width:2.75rem;height:2.75rem;top:0.625rem;right:0.875rem}
  .gnav__close::before,.gnav__close::after{width:1.125rem;height:0.125rem}

  /* FV — SPカンプ(375×406)のノード実寸。PCと同じ重ね構造で、座標だけ差し替える */
  .fv{aspect-ratio:375/406;height:auto;max-height:none;display:block;overflow:hidden}
  .fv__bg{position:absolute;inset:0;background:linear-gradient(90deg,#243857 0%,#174b79 100%)}
  .fv__glow{left:-22.133%;top:12.562%;width:106.667%;height:86.946%}          /* -83,51 400×353 */
  .fv__band{left:-8.267%;top:9.852%;width:110.667%;height:48.522%}            /* -31,40 415×197 */
  .fv__golfer{left:2.555%;top:42.049%;width:89.706%;filter:drop-shadow(1.875rem -0.125rem 0.1875rem rgba(0,0,0,.26))}  /* 人物が小さいので影も比例させる */                          /* 枠 -73,127 499×320 */
  .fv__inner{position:relative;width:100%;height:100%}
  .fv__copy{position:absolute;left:0;right:0;top:17.488%;text-align:center;padding:0 0.625rem}  /* 26,71 */
  .fv__copy-sub{font-size:4.3vw;line-height:1.5}
  .fv__copy-main{font-size:5.15vw;margin-top:0.375rem}
  /* Group 137: 19,303 337×96 / 子は x=0,115,232 */
  .fvpt{height:23.645%}
  .fvpt--1{left:5.067%;top:74.631%;width:28%}
  .fvpt--2{left:35.733%;top:74.631%;width:28.533%}
  .fvpt--3{left:66.933%;top:74.631%;width:28%}
  .fvpt__t{font-size:3.733vw}
  .pc-br{display:none}
  .sp-br{display:inline}

  /* strengths */
  .strengths{padding:0.875rem 0 0}  /* -40: カンプ23.8125rem */
  .strengths__lead{font-size:0.8125rem}
  .strengths__lead .mark{font-size:1rem;padding:0.0625rem 0.375rem}
  .strengths__head{font-size:1.375rem;margin-top:0.25rem}
  .menu6{grid-template-columns:repeat(3,1fr);column-gap:0.375rem;row-gap:1.25rem;margin-top:1.125rem}
  .menu6__head{width:auto;gap:0.375rem;transform:none;justify-content:center}
  .menu6__no{font-size:1.25rem;padding-bottom:0.375rem}
  .menu6__no::after{width:1.25rem;height:0.125rem}
  .menu6__icon{width:2.375rem;height:2.375rem}
  .menu6__lead{font-size:0.625rem;margin-top:0.5rem;line-height:1.4}
  .menu6__title{font-size:0.8125rem;line-height:1.3}
  .menu6{display:flex;flex-wrap:wrap}
  .menu6__item{width:calc((100% - 0.75rem)/3)}
  .spcta{display:grid;grid-template-columns:1fr 1fr;margin-top:0}
  .spcta__btn{font-size:0.875rem;height:3rem;position:relative}
  .spcta__btn .arw{width:1.5rem;height:1.5rem;position:static;flex:none;margin-left:0.25rem}
  .spcta__btn .arw::before{left:0.3125rem;width:0.8125rem}
  .spcta__btn .arw::after{right:0.375rem;width:0.375rem;height:0.375rem}
  .spcta__btn--gold .arw{background:#fff}

  /* band */
  .band{padding:1.3125rem 0}
  .band__sub,.band__main{font-size:1.0625rem;line-height:1.5}

  /* cta1 */
  .cta1{padding:0 0 2.9375rem}
  .cta1__inner{display:block;position:relative}
  .cta1__head{font-size:1.4375rem;line-height:1.6;background:#fcfcfc;margin:0 -1rem;padding:0.3125rem 0.5rem}
  /* float だと見出しの行が画像に食われて「初回割引キャンペーン実施中！」が2行になる。
     カンプは見出しが全幅1行で、画像はその下。絶対配置にして行から外す。 */
  .cta1__img{width:13.5625rem;float:none;position:absolute;left:-1rem;top:3.125rem;margin:0}
  .cta1__body{padding:0}
  .price{margin-left:8.75rem;margin-top:0.625rem}  /* 9.5remだと5,500+（税込）円が191pxに入らず改行していた */
  .price__label{font-size:1.25rem}
  .price__row{flex-wrap:wrap;gap:0}
  .price__normal-l{font-size:0.875rem;padding-bottom:0.375rem;line-height:1.2}
  .price__strike{font-size:2.75rem}
  .price__yen{font-size:1.25rem}
  .price__arrow{display:block;width:100%;height:auto;border:0;margin:0.125rem 0 0;text-align:center;line-height:0}
  .price__arrow::before{content:"";display:inline-block;border-left:0.625rem solid transparent;border-right:0.625rem solid transparent;border-top:0.75rem solid var(--navy)}
  .price__sale{font-size:3.75rem;line-height:.9}
  .price__tax{display:inline-flex;flex-direction:column-reverse;align-items:center;width:3rem;padding-bottom:0.25rem;line-height:1}
  .tax-yen{font-size:1.625rem;line-height:1}
  .tax-in{font-size:0.6875rem;line-height:1.1}
  .refund{margin:1rem 0 0;clear:both;justify-content:center;gap:0.75rem;flex-wrap:wrap}
  .refund__badge{width:4.75rem;height:4.75rem;font-size:1rem}
  .refund__txt{font-size:1.3125rem;line-height:1.5}
  .refund__big{font-size:3.875rem;width:100%;text-align:center;margin-top:0.125rem}
  .btnrow{display:block;margin-top:1rem}
  .cta1 .btnrow{margin-left:0;gap:0}   /* PCの -4.6875rem が残っていてボタンが左に75pxはみ出していた */
  .btnrow__col{align-items:stretch}
  .btn{width:100%;height:3.375rem;font-size:1.125rem}
  .btn--navy{margin-top:0.875rem}
  .ribbon{background:none;color:var(--navy);font-size:0.875rem;font-weight:700;text-align:center;min-width:0;margin:0 0 0.375rem;padding:0;clip-path:none}
  .ribbon::before{content:"＼"}
  .ribbon::after{content:"／"}
  .note{font-size:0.6875rem;text-align:center;width:100%;margin-top:0.5rem}
  .arw{width:1.875rem;height:1.875rem;right:0.75rem}
  .arw::before{left:0.4375rem;width:1rem}
  .arw::after{right:0.5rem;width:0.4375rem;height:0.4375rem}

  /* concerns */
  .concerns{padding:1.375rem 0 calc(var(--dg) + 2.5rem)}
  .sechead__wm{font-size:2.875rem}
  .sechead__ttl{font-size:1.1875rem;margin-top:-1.875rem}
  .bubbles{margin-top:1.625rem;gap:1.375rem 0.625rem}
  .bubble{font-size:0.75rem;padding:0.875rem 0.75rem;border-radius:0.625rem;min-height:0;line-height:1.55;
    white-space:normal;display:block}  /* PCの nowrap を解除。SPは2列グリッドなので折り返さないと文字が切れる */
  .bubble::before{font-size:2.75rem;top:-1.125rem;left:0.125rem}
  .bubble--center{width:calc(50% - 0.3125rem)}
  .concerns__close{font-size:0.875rem;margin-top:2.625rem;line-height:1.9}

  /* problems */
  .prob--1,.prob--2,.prob--3{padding-top:calc(var(--dg) + 1.875rem);padding-bottom:calc(var(--dg) + 1.25rem)}
  .prob--1{padding-bottom:calc(var(--dg) + 12.875rem)}
  .prob__inner,.prob__inner--rev{display:block}
  .prob__body,.prob--2 .prob__body{padding:0}
  .prob__body{text-align:center}
  .prob__photo,.prob--1 .prob__photo,.prob--2 .prob__photo,.prob--3 .prob__photo{position:static;width:calc(100% + 2rem);margin:1.5rem -1rem 0;aspect-ratio:355/195;object-fit:cover;object-position:center 34%;box-shadow:none;clip-path:none;transform:none}
  .prob__inner::after{display:none}   /* SPは写真が全幅なので紺の枠は出さない */
  .labelbox{margin-left:0}
  .prob__inner--rev .prob__photo{margin:0 auto 1.25rem}
  .labelbox{font-size:0.9375rem;padding:0.5625rem 1rem;display:inline-block;text-align:center}
  .labelbox::after{left:0.5rem;top:0.5rem}
  .prob__lead{font-size:0.8125rem;margin-top:1.125rem;text-align:center}
  .listbox{display:block;padding:0.875rem 0.75rem;margin-top:0.625rem;text-align:left}
  /* PCで入れた固定幅を解除 */
  .prob--1 .listbox,.prob--2 .listbox,.prob--3 .listbox{width:auto;margin-left:0;margin-top:0.625rem}
  .prob--1 .labelbox,.prob--2 .labelbox,.prob--3 .labelbox{width:auto;margin-left:0}
  .listbox li{font-size:0.8125rem;line-height:1.9;padding-left:1.125rem}
  .listbox li::before{left:0.25rem;width:0.25rem;height:0.25rem}
  .prob__txt{font-size:0.8125rem;margin-top:1.125rem;text-align:center;line-height:2}
  /* カンプSP実測: 「計測→原因特定→1点矯正→再現性」は x20〜352＝333px の1行。
     1.5rem(24px)だと423pxで2行に割れていた。 */
  .uline.strong{font-size:1.1875rem;letter-spacing:-.02em}
  .prob--2 .prob__body{padding-left:0}
  .wedge--tl,.wedge--br{max-height:5rem}

  /* about */
  .about{padding:2.125rem 0 calc(var(--dg-about) + 0.625rem)}
  /* PC用の 522x420px のままだと、SPでは ABOUT の外（y5081〜）に 375px をはみ出して描かれ、
     ペリの下に細い濃紺の線として残っていた。カンプSP実測: x0〜186 / y5042〜5156（115px）。
     高さに依存しないよう bottom:0 でセクションの下端に合わせる。 */
  /* 頂点は「ペリの頂点と同じ x」でなければ1点で交わらない。
     ペリ 50.93%×375=191px なので幅を191pxにし、下辺の傾きもペリと同じ -0.283 になる
     53% を採る（115×(1-0.53)/191 = 0.283）。1px下げてペリに必ず覆わせる。 */
  /* カンプSPでは「紺の下辺」も ∧ 形で、ペリの上辺と頂点(x191)で1点に交わる。
     本番は紺が直線だったため、頂点の手前で紺が終わり、濃紺の先端だけが白の中に取り残されていた。
     カンプSP実測: 紺の下辺は 両端 5041 / 頂点(195,5103) → 深さ62px。
     ペリは 両端 5158 / 頂点(191,5104) → 深さ54px。濃紺はその間の115px。 */
  .about::before{clip-path:polygon(0 0,100% var(--dg),100% calc(100% - 3.875rem),50.93% 100%,0 calc(100% - 3.875rem))}
  .about::after{top:calc(100% - 3.875rem);bottom:auto;width:11.9375rem;height:7.1875rem;clip-path:polygon(0 0,100% 53.9%,0 100%)}
  /* カンプSP実測: 頂点(188,+60.7) → 52.8%。PCの48.33%のままだと下辺の傾きが -0.32 になり
     ペリの -0.283 と合わず、頂点に向かって白いすき間が開いていく。 */
  .about .sechead__ttl{font-size:1.25rem}
  .about__lead{font-size:1.125rem;margin-top:1.625rem}
  .about__lead2{font-size:0.875rem}
  .about__div{margin:1rem auto}
  .about__cols{display:block;margin-top:1.875rem;padding:0}  /* PCの左右2.6875remを解除。343→257pxに狭まって本文が不自然に折り返していた */
  .about__txt{font-size:0.8125rem;line-height:2;text-align:center}  /* カンプSPは中央揃え */
  .checks{width:100%;margin-top:1.375rem}
  .checks li{font-size:0.78125rem;padding:0.625rem 0.75rem 0.625rem 2.875rem;min-height:2.75rem}
  .checks li::before{width:1.75rem;height:1.75rem;left:0.75rem;border-width:0.125rem}   /* border-box なので外径＝1.75rem */
  .checks li::after{left:0.75rem;width:1.75rem;height:1.75rem;background-size:1.75rem 1.75rem}  /* 輪と同じ箱にする */

  /* features */
  /* clip の深さを PC の 13.5625rem(217px) のままにしていたため、SPではペリの斜めが
     深すぎて ABOUT の下に130px以上の白が空き、濃紺の三角と離れていた。
     カンプSP実測: 頂点 x約200(53%) / 深さ54px。 */
  .features{padding:calc(var(--dg-peak) + 0.875rem) 0 calc(var(--dg-feat) + 0.375rem);margin-top:0}  /* 紺・濃紺・ペリの頂点を同じyに揃える */
  .features::before{clip-path:polygon(50.93% 0,100% 3.375rem,100% 100%,0 100%,0 3.375rem)}  /* カンプSP実測: 頂点 x191 */
  .feathead__ttl{font-size:1.25rem;margin-top:-1.875rem}
  .feathead__num{font-size:2.875rem;-webkit-text-stroke:0.09375rem var(--navy)}
  .featintro{display:block;margin-top:1.5rem}
  .featintro__ttl{font-size:1rem;text-align:center}
  .featintro__txt{font-size:0.8125rem;line-height:2;margin-top:1rem}
  .feat--01{padding:calc(var(--dg-feat) + 0.75rem) 0 1rem}
  .feat--02,.feat--03{padding:0.5rem 0 1rem;margin-top:0}
  .feat--03{padding-bottom:9.3125rem}
  .feat__head,.feat__head--r,.feat__head--l{justify-content:flex-start;padding:0;gap:0.75rem}
  .feat__no{font-size:3.25rem}
  .feat__ttl{font-size:1.1875rem}
  .feat__sub{font-size:0.6875rem}
  .feat__body,.feat__body--rev{display:block;margin-top:0.75rem}
  .feat__shot{width:calc(100% + 2rem);margin:0 -1rem}
  .feat__shot::before{display:none}
  .feat__text,.feat__body--rev .feat__text{padding:1rem 0 0}
  .feat__bar{font-size:0.9375rem;padding:0.375rem 0.75rem}
  .feat__desc{font-size:0.8125rem;line-height:1.95;margin-top:0.875rem}
  .fdiv{height:16vw;max-height:4.375rem}

  /* coach : slider */
  .fdiv3{height:min(22.96vw,5.375rem);margin-top:calc(min(22.96vw,5.375rem) * -1);clip-path:polygon(0 min(19.9vw,4.6875rem),100% 0,100% 100%,0 100%)}
  .coach{padding-top:1.625rem;padding-bottom:2.5rem}
  .coach .sechead__ttl{font-size:1.1875rem}
  .coach__band{height:26.25rem;top:5.625rem}
  .coachview{overflow:hidden;margin:1.375rem 1.625rem 0}
  .coachlist{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;transition:transform .4s ease}
  .coachlist{padding:0}
  .ccard{flex:0 0 100%;width:100%;padding:0 1.125rem 1.375rem}
  .ccard::before{height:9.375rem}
  .ccard__photo{width:9.375rem;margin-top:1.375rem}
  .ccard__name{font-size:1.25rem;margin-top:0.625rem}
  .ccard__kana{font-size:0.75rem}
  .ccard__cred{font-size:0.78125rem;margin-top:1rem;padding-top:1rem}
  .ccard__bio{font-size:0.78125rem;margin-top:0.875rem;line-height:1.9}
  .coachnav{display:block;position:absolute;top:50%;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--navy);border:0.0625rem solid rgba(255,255,255,.7);z-index:5}
  .coachnav::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-top:0.375rem solid transparent;border-bottom:0.375rem solid transparent}
  .coachnav--prev{left:-0.25rem}
  .coachnav--prev::before{border-right:0.5625rem solid #fff;transform:translate(-60%,-50%)}
  .coachnav--next{right:-0.25rem}
  .coachnav--next::before{border-left:0.5625rem solid #fff;transform:translate(-40%,-50%)}

  /* benefit */
  .benefit{padding:2.125rem 0 1.625rem}
  .benefit__head{font-size:1.25rem;gap:0.75rem}
  .benefit__head::before,.benefit__head::after{width:3.25rem}
  .benefit__txt{font-size:0.8125rem;margin-top:1.125rem;line-height:1.85}
  .bcard{width:100%;margin-top:1.625rem;padding:0.75rem 0.75rem 0.5rem;border-width:0.1875rem}
  .bcard__ttl{display:none}
  .price--card .price__label{font-size:0.75rem}
  .price--card .price__sale{font-size:2.75rem}
  .price--card .price__tax{font-size:0.9375rem}
  .bcard .refund{margin-top:0.375rem;gap:0.5rem;justify-content:flex-start}
  .bcard .refund__badge{width:2.625rem;height:2.625rem;font-size:0.6875rem}
  .bcard .refund__txt{font-size:0.9375rem}
  .bcard .refund__big{font-size:1.625rem}
  .bcard__note{font-size:0.5625rem}
  .btnrow--benefit{margin-top:1.25rem}

  /* voice */
  .voice{padding:0.5625rem 0 0}
  .voice__head{padding-left:0;text-align:center}
  .voice__ttl{font-size:1.1875rem;margin-top:-2rem;text-align:center;padding-left:0}
  .voice__sub{font-size:0.75rem;padding-left:0;margin-left:0;text-align:center}  /* PCの -1.375rem が残っていた */
  .voicelist{display:block;margin-top:0;padding:0}
  .voicecol--offset{margin-top:0}
  .vcard{padding:1.625rem 1rem 1.125rem;border-radius:0.75rem;margin-left:0.75rem}
  .vcard,.vcard+.vcard{margin-top:0.5rem}
  .vcard__avatar{width:2.875rem;height:2.875rem;left:-1.25rem;top:-1.125rem}
  .vcard::after{font-size:3rem;right:0.875rem;top:-0.125rem}
  .vcard__stars{font-size:0.9375rem}
  .vcard__txt{font-size:0.78125rem;line-height:1.85}

  /* studio */
  .studio{padding:1.5rem 0 7.875rem}
  .studio__txt{width:auto}   /* PCの28.875rem(462px)が残っていて画面から107pxはみ出していた */
  .studio__ttl{font-size:1.1875rem;margin-top:-2rem}
  .studio__cols{display:block;margin-top:1.625rem}
  .studio__txt{font-size:0.8125rem;line-height:1.95}
  .studio__photo{width:100%;margin-top:1.25rem}
  .studio__tel{margin-top:1.875rem;justify-content:center}
  .studio__tel-l{font-size:1rem}
  .studio__tel a{font-size:1.875rem}
  .studio__hours{justify-content:center;font-size:1rem}
  .studio__acc{font-size:1.1875rem;margin-top:1.75rem}
  .studio__addr{font-size:0.8125rem}

  /* faq */
  .faq{padding:0.5rem 0 0}
  .faq__ttl{font-size:1.1875rem;margin-top:-2rem}
  .faqlist{margin-top:0;padding:0}
  .faqitem+.faqitem{margin-top:0.375rem;padding-top:0.375rem}
  .faqitem__q{gap:0.75rem}
  .faqitem__mark{width:2.125rem;height:2.125rem;font-size:1.125rem}
  .faqitem__qtxt{font-size:0.8125rem}
  .faqitem__icon{width:1.625rem;height:1.625rem}
  .faqitem__icon::before{width:0.75rem}
  .faqitem__icon::after{height:0.75rem}
  .faqitem__inner{padding:1rem;margin:0.875rem 0 0 0;gap:0.75rem}
  .faqitem__mark--a{font-size:1.125rem}
  .faqitem__inner p{font-size:0.78125rem;line-height:1.85}

  /* foot */
  .footcta{padding:1.625rem 0 6.0625rem}
  .footer{padding:1rem 0}
  .footer p{font-size:0.6875rem}

  .stickysp{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -0.125rem 0.625rem rgba(0,0,0,.18)}
  body{padding-bottom:3rem}
}

/* PCの英語装飾文字は拡大しても鮮明なフォントの輪郭線で描く。 */
@media (min-width:769px){
  .sechead__wm{position:relative;z-index:1;font-family:Georgia,"Times New Roman",serif;font-size:8.1875rem;line-height:.7353;-webkit-text-stroke:.09375rem var(--navy-l)}
  .sechead h2,.sechead__sub{position:relative;z-index:2}
  .about .sechead__wm,.features .sechead__wm,.voice .sechead__wm,.studio .sechead__wm{font-size:8rem;line-height:.7525}
  .feathead .sechead__wm{-webkit-text-stroke:.09375rem rgba(203,200,200,.5)}
  .sechead__wm--l{-webkit-text-stroke:.09375rem #c8d0e5}
  .studio .sechead__wm{-webkit-text-stroke:.09375rem #303c61}
  .faq .sechead__wm{-webkit-text-stroke:.09375rem #adb8d9}
  .coach{overflow:visible}
  .concerns .sechead__wm{transform:translate(-.25rem,-2.25rem)}
  .coach .sechead__wm{transform:translate(1.0625rem,-2.25rem)}
  .voice .sechead__wm{transform:translate(-2.8125rem,-1.8125rem)}
  .studio .sechead__wm{transform:translate(.0625rem,-2.0625rem)}
  .faq .sechead__wm{transform:translate(-1.5625rem,-2.0625rem)}
}

/* =========================================================
   はみ出し対策（カンプに無い画面幅）
   ========================================================= */
/* タブレット幅では価格の税表記が枠外に出る */

/* 23.4375rem未満（iPhone SE 第1世代など）は価格ブロックが収まらない */

/* Place the visible capital outline at the section's upper boundary. */
@media(min-width:769px){
  .concerns .sechead__wm{transform:translate(-.25rem,-2.27575rem)}
  /* ABOUT has a sloping top: keep the entire outline below its lower edge. */
  .about .sechead__wm{transform:translateY(calc(var(--dg) - 11.713125rem))}
  .features .sechead__wm{transform:translateY(-6.650625rem)}
  .coach .sechead__wm{transform:translate(1.0625rem,-2.27575rem)}
  .voice .sechead__wm{transform:translate(-2.8125rem,-2.025625rem)}
  .faq .sechead__wm{transform:translate(-1.5625rem,-2.08825rem)}
}
.voice{position:relative;z-index:4;overflow:visible}
@media(min-width:769px){
  .features .feathead::after{content:"";position:absolute;left:50%;top:-5.125rem;transform:translateX(-50%);width:67.5rem;height:13.75rem;background:url('../images/design/pc-features-lockup-v19.svg') center/100% 100% no-repeat;pointer-events:none;z-index:3}
  .features .feathead .sechead__wm,.features .feathead__ttl{opacity:0}
}
/* PC FEATURES: positions and type from the design frame (1080px). */
@media(min-width:769px){
  .features .feathead{height:7.08203125rem}
  .features .feathead .sechead__wm{position:absolute;top:-3.125rem;left:calc(50% + .03125rem);width:40.31979004rem;height:5.9025rem;transform:translateX(-50%);font-size:0;line-height:0;-webkit-text-stroke:0;background:url('../images/design/pc-features-outline.svg') center/100% 100% no-repeat;z-index:1}
  .features .feathead__ttl{position:absolute;top:3.8125rem;left:calc(50% - .0625rem);width:28.875rem;margin:0;transform:translateX(-50%);display:block;text-align:center;font-size:2rem;line-height:2.625rem;z-index:2}
  .features .feathead__prefix{margin-right:4.9375rem}
  .features .feathead__num{position:absolute;left:calc(50% + .15625rem);top:-2.0625rem;transform:translateX(-50%);width:4.36187699rem;height:6.10220686rem;margin:0;padding:0;font-size:0;line-height:0;-webkit-text-stroke:0;background:url('../images/design/pc-features-three.svg') center/100% 100% no-repeat;z-index:3}
}