@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ オンラインサロン Légers B案（page-msb-salon-b.php）
   置き場所: swell_child/assets/css/msb-salon-b.css
   ・既存LP（Studio版）の雰囲気：全幅のトップ画像／クリームの地に白い面／
     上に英字・下に日本語の見出し／本文はゴシック、見出しは明朝
   ・アニメーションは「ぼかし → くっきり」のゆっくりしたフェード
   ============================================================ */

.msb-salonb{
  --lg-cream:#F8EDD3;   /* 地色（既存LPのクリーム） */
  --lg-paper:#FFFDF9;   /* 白い面 */
  --lg-navy:#13306A;    /* 英字見出し */
  --lg-brown:#8F6A37;   /* 明朝の見出し・小見出し */
  --lg-gold:#A27A47;    /* ボタン */
  --lg-logo:#BB8D5E;    /* Légers ロゴ文字 */
  --lg-ink:#3B3835;     /* 本文 */
  --lg-line:#E8DABD;
  --lg-display:'Playfair Display', 'Cormorant Garamond', serif;
  --lg-ease:cubic-bezier(.22,.61,.36,1);
  color:var(--lg-ink);
  background:var(--lg-cream);
}
.msb-salonb *, .msb-salonb *::before, .msb-salonb *::after{ box-sizing:border-box; }
.msb-salonb .mc{ display:inline-block; }
/* 改行：本文は最終行に1〜2文字だけ残らないように、短い見出しは文節で折り返す */
.msb-salonb .nw{ white-space:nowrap; }
.msb-salonb :is(p, li){ text-wrap-style:pretty; }
.msb-salonb :is(h3, summary, .lgb-lead, .lgb-voices p, .lgb-item__tag, .lgb-closing__copy, .lgb-step__ttl, .lgb-pf__role){
  word-break:auto-phrase; text-wrap-style:balance;
}
:where(.msb-salonb) :is(h1,h2,h3,p,ul,ol,figure){ margin:0; padding:0; }
:where(.msb-salonb) :is(h1,h2,h3){ background:none; border:0; font-weight:inherit; }
:where(.msb-salonb) :is(h1,h2,h3)::before,
:where(.msb-salonb) :is(h1,h2,h3)::after{ content:none; }
.msb-salonb img{ display:block; width:100%; height:auto; }
.msb-salonb a:focus-visible{ outline:2px solid var(--lg-navy); outline-offset:4px; }

/* ------------------------------------------------------------
   1. トップ画像（全幅）
   ------------------------------------------------------------ */
.lgb-fv{
  position:relative; overflow:hidden; background:#FDFDFC;
  height:clamp(580px, calc(100svh - 90px), 1000px);
}
.lgb-fv__photo{ position:absolute; inset:0; }
.lgb-fv__photo img{
  width:100%; height:100%; object-fit:cover; object-position:62% 30%;
  animation:lgbFocus 3s var(--lg-ease) both;
}
/* 下端をクリームへやわらかく溶かす */
.lgb-fv::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; pointer-events:none;
  background:linear-gradient(180deg, rgba(248,237,211,0) 0%, rgba(248,237,211,.75) 100%);
}
.lgb-fv__catch{
  position:absolute; z-index:2; left:7vw; top:12%;
  font-family:var(--msb-mincho); font-weight:400;
  font-size:clamp(1.3rem, 2.25vw, 2rem); line-height:2.05; letter-spacing:.2em; color:#C29A68;
}
.lgb-fv__catch span{ display:block; animation:lgbRise 1.9s var(--lg-ease) both; }
.lgb-fv__catch span:nth-child(1){ animation-delay:.9s; }
.lgb-fv__catch span:nth-child(2){ animation-delay:1.3s; }
.lgb-fv__catch span:nth-child(3){ animation-delay:1.7s; }

.lgb-fv__mark{ position:absolute; z-index:2; left:6vw; bottom:7.5%; }
.lgb-fv__sub{
  margin:0 0 .6em .3em !important; font-family:var(--msb-mincho); font-weight:500;
  font-size:clamp(.85rem, 1.1vw, 1rem); letter-spacing:.32em; color:var(--lg-brown);
  animation:lgbRise 1.8s var(--lg-ease) 2.1s both;
}
.lgb-fv__logo{
  position:relative; z-index:2;
  font-family:var(--lg-display) !important; font-weight:400 !important;
  font-size:clamp(5.6rem, 14.5vw, 13.5rem) !important; line-height:.86 !important;
  letter-spacing:.02em; color:var(--lg-logo) !important;
  animation:lgbLogo 2.8s var(--lg-ease) 1.9s both;
}
.lgb-fv__name{
  position:relative; z-index:1; margin-top:-.62em !important; padding-left:.08em;
  font-family:var(--lg-display); font-size:clamp(2.2rem, 6.4vw, 6rem); line-height:1;
  letter-spacing:.12em; color:var(--lg-logo); opacity:.28; white-space:nowrap;
  animation:lgbName 2.4s var(--lg-ease) 2.6s both;
}

@keyframes lgbFocus{
  from{ opacity:0; transform:scale(1.08); filter:blur(14px); }
  to{ opacity:1; transform:scale(1); filter:blur(0); }
}
@keyframes lgbRise{
  from{ opacity:0; transform:translateY(14px); filter:blur(8px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes lgbLogo{
  from{ opacity:0; letter-spacing:.16em; filter:blur(12px); }
  to{ opacity:1; letter-spacing:.02em; filter:blur(0); }
}
@keyframes lgbName{
  from{ opacity:0; transform:translateX(-18px); }
  to{ opacity:.28; transform:none; }
}

/* ------------------------------------------------------------
   2. ふわっと表示（共通の .rv をこのページ用にやわらかく）
   ------------------------------------------------------------ */
.msb-salonb .rv{
  opacity:0; transform:translateY(12px); filter:blur(6px);
  transition:opacity 1.6s var(--lg-ease), transform 1.6s var(--lg-ease), filter 1.6s var(--lg-ease);
}
.msb-salonb .rv.is-on{ opacity:1; transform:none; filter:none; }
/* 写真：ぼやけた状態からピントが合うように */
.msb-salonb .lgb-photo.rv,
.msb-salonb .lgb-foryou__photo.rv,
.msb-salonb .lgb-pf__photo.rv{ transform:none; filter:none; transition:opacity 1.4s ease; }
.msb-salonb .lgb-photo.rv img,
.msb-salonb .lgb-foryou__photo.rv img,
.msb-salonb .lgb-pf__photo.rv img{
  transform:scale(1.07); filter:blur(10px);
  transition:transform 2.6s var(--lg-ease), filter 2.2s ease;
}
.msb-salonb .lgb-photo.rv.is-on img,
.msb-salonb .lgb-foryou__photo.rv.is-on img,
.msb-salonb .lgb-pf__photo.rv.is-on img{ transform:none; filter:none; }

/* ------------------------------------------------------------
   3. 地と白い面
   ------------------------------------------------------------ */
.lgb-body{ position:relative; z-index:0; overflow:hidden; padding:96px 0 0; background:var(--lg-cream); }
.lgb-panel{
  position:relative; width:min(1080px, 92%); margin:0 auto 96px;
  padding:104px clamp(24px, 7.5%, 112px) 112px; border-radius:12px;
}
/* すりガラスの面は ::after に描く（後ろの英字の透かしがやわらかく透ける） */
.lgb-panel::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:rgba(255,253,249,.8);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 60px -46px rgba(140,105,60,.4), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.12); backdrop-filter:blur(18px) saturate(1.12);
}
.lgb-col{ max-width:660px; margin:0 auto; }
.lgb-center{ text-align:center; }

/* 見出し：上に英字・下に日本語 */
.lgb-head{ margin-bottom:60px; }
.lgb-head.is-center{ text-align:center; }
.lgb-head__en{
  display:inline-block; padding:0 .55em .26em !important; border-bottom:1px solid var(--lg-navy) !important;
  font-family:var(--lg-display) !important; font-weight:400 !important;
  font-size:clamp(2.5rem, 4.4vw, 3.5rem) !important; line-height:1.15 !important;
  letter-spacing:.06em; color:var(--lg-navy) !important;
}
.lgb-head.is-left .lgb-head__en{ padding-left:0 !important; padding-right:1.4em !important; }
.lgb-head__jp{
  margin-top:1em !important; font-family:var(--msb-gothic); font-size:.8rem;
  letter-spacing:.26em; color:var(--lg-navy);
}

/* 本文 */
.lgb-text p{
  font-family:var(--msb-gothic); font-size:1.0625rem; line-height:2.15; letter-spacing:.06em; color:var(--lg-ink);
}
.lgb-text p + p{ margin-top:1.4em; }
p.lgb-text{ font-family:var(--msb-gothic); font-size:1.0625rem; line-height:2.15; letter-spacing:.06em; }

/* ------------------------------------------------------------
   4. Message
   ------------------------------------------------------------ */
.lgb-photo{ overflow:hidden; }
.lgb-msg__photo{ max-width:780px; margin:0 auto 64px; aspect-ratio:16 / 10; }
.lgb-msg__photo img{ height:100%; object-fit:cover; object-position:50% 20%; }
.lgb-lead{
  margin-bottom:40px !important; text-align:center;
  font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(1.12rem, 1.8vw, 1.32rem); line-height:2.05; letter-spacing:.14em; color:var(--lg-brown);
}
.lgb-voices{ margin-bottom:40px; text-align:center; }
.lgb-voices p{ font-family:var(--msb-mincho); font-size:1.08rem; line-height:2.2; letter-spacing:.1em; color:var(--lg-ink); }
/* ------------------------------------------------------------
   5. For You（写真が面の上にはみ出す）
   ------------------------------------------------------------ */
.lgb-foryou{
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:60px; align-items:start;
  margin-top:150px;
}
.lgb-foryou__photo{ grid-column:2; grid-row:1; margin-top:-176px !important; overflow:hidden; }
.lgb-foryou__body{ grid-column:1; grid-row:1; }
.lgb-foryou .lgb-head{ margin-bottom:44px; }
.lgb-check{ list-style:none; margin-top:34px !important; }
.lgb-check li{
  position:relative; padding:.95em 0 .95em 2.2em; border-bottom:1px solid var(--lg-line);
  font-family:var(--msb-gothic); font-size:1.0625rem; line-height:1.85; letter-spacing:.06em; color:var(--lg-brown);
}
.lgb-check li::before{
  content:""; position:absolute; left:.25em; top:1.45em; width:.85em; height:.42em;
  border-left:1.5px solid var(--lg-gold); border-bottom:1.5px solid var(--lg-gold); transform:rotate(-45deg);
}

/* ------------------------------------------------------------
   6. Content
   ------------------------------------------------------------ */
.lgb-items{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:44px 40px; margin-top:72px; }
.lgb-item{
  overflow:hidden; border-radius:8px;
  background:rgba(255,255,255,.5); border:1px solid rgba(206,182,140,.24);
}
.lgb-item__photo{ aspect-ratio:5 / 2; }
.lgb-item__photo img{ height:100%; object-fit:cover; }
.lgb-item__body{ padding:38px 36px 40px; }
/* 小見出し：ゴシック・小さめ・落ち着いた色で、h3 と役割を分ける */
.lgb-item__tag{
  margin-bottom:16px !important; text-align:center;
  font-family:var(--msb-gothic); font-size:.8rem; line-height:1.7; letter-spacing:.16em; color:#978B80;
}
.lgb-item__ttl{
  text-align:center;
  font-family:var(--msb-mincho) !important; font-weight:500 !important;
  font-size:clamp(1.3rem, 2vw, 1.5rem) !important; line-height:1.8 !important; letter-spacing:.14em; color:var(--lg-brown) !important;
}
.lgb-item__ttl small{ display:block; margin-top:.15em; font-size:.8em; line-height:1.8; letter-spacing:.14em; }
.lgb-item__txt{
  margin-top:24px !important;
  font-family:var(--msb-gothic); font-size:.96rem; line-height:2.05; letter-spacing:.05em; color:var(--lg-ink);
}

/* ------------------------------------------------------------
   7. Profile
   ------------------------------------------------------------ */
.lgb-pf__top{
  display:grid; grid-template-columns:280px auto; gap:48px; align-items:center; justify-content:center;
  margin-bottom:56px;
}
.lgb-pf__top .lgb-head{ margin:0; }
.lgb-pf__photo{ border-radius:50%; overflow:hidden; aspect-ratio:1 / 1; }
.lgb-pf__photo img{ height:100%; object-fit:cover; }
.lgb-pf__name{ margin-bottom:36px; }
.lgb-pf__role{
  font-family:var(--msb-mincho); font-weight:600; font-size:1.02rem; line-height:1.9; letter-spacing:.14em; color:var(--lg-brown);
}
.lgb-pf__jp{
  margin-top:.7em !important; font-family:var(--msb-mincho); font-weight:500; font-size:1.7rem; letter-spacing:.2em; color:var(--lg-ink);
}
.lgb-pf__jp small{
  margin-left:.8em; font-family:var(--lg-display); font-style:italic; font-size:.6em; letter-spacing:.06em; color:var(--lg-logo);
}
.lgb-link{
  display:inline-block; margin-top:40px; padding:0 0 .5em;
  font-family:var(--msb-mincho); font-size:.98rem; letter-spacing:.18em; color:var(--lg-brown);
  text-decoration:none; border-bottom:1px solid var(--lg-gold); transition:color .3s ease, border-color .3s ease;
}
.lgb-link:hover{ color:var(--lg-navy); border-color:var(--lg-navy); }

/* ------------------------------------------------------------
   8. How to join / Plan / Policy
   ------------------------------------------------------------ */
.lgb-steps{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.lgb-step{ padding:6px 14px 4px; text-align:center; }
.lgb-step + .lgb-step{ border-left:1px solid var(--lg-line); }
.lgb-step__no{
  font-variant-numeric:lining-nums; font-family:var(--lg-display); font-size:1.7rem; line-height:1; letter-spacing:.04em; color:var(--lg-navy);
}
.lgb-step__no small{ display:block; margin-bottom:.35em; font-size:.42em; letter-spacing:.2em; }
.lgb-step__ico{ display:block; width:54px; height:54px; margin:20px auto 16px; color:var(--lg-gold); }
.lgb-step__ico svg{ width:100%; height:100%; }
.lgb-step__ttl{
  font-family:var(--msb-mincho) !important; font-weight:600 !important; font-size:1.08rem !important;
  letter-spacing:.14em; color:var(--lg-brown) !important;
}
.lgb-step__txt{
  margin-top:.9em !important; text-align:center;
  font-family:var(--msb-gothic); font-size:.9rem; line-height:1.95; letter-spacing:.04em; color:var(--lg-ink);
}

.lgb-sub{ margin-top:128px; }

.lgb-plan{ text-align:center; }
.lgb-plan__name{ font-family:var(--msb-mincho); font-weight:500; font-size:1.05rem; letter-spacing:.2em; color:var(--lg-brown); }
.lgb-plan__price{
  font-variant-numeric:lining-nums; margin:.2em 0 .5em !important; font-family:var(--lg-display); font-size:clamp(3.4rem, 6vw, 4.6rem); line-height:1.2;
  letter-spacing:.04em; color:var(--lg-brown);
}
.lgb-plan__price .yen{ margin-right:.08em; font-size:.55em; }
.lgb-plan__price .per{ margin-left:.4em; font-family:var(--msb-mincho); font-size:.24em; letter-spacing:.14em; }
.lgb-plan__notes{
  display:table; list-style:none; margin:0 auto 44px !important; text-align:left;
  font-family:var(--msb-gothic); font-size:.98rem; line-height:2.1; letter-spacing:.06em; color:var(--lg-ink);
}

.lgb-col.lgb-policy{ max-width:860px; }
.lgb-policy__item{
  display:grid; grid-template-columns:270px minmax(0,1fr); gap:40px;
  padding:34px 0; border-top:1px solid var(--lg-line);
}
.lgb-policy__item:last-child{ border-bottom:1px solid var(--lg-line); }
.lgb-policy__item h3{
  text-align:left;
  font-family:var(--msb-mincho) !important; font-weight:500 !important; font-size:1.1rem !important;
  line-height:1.9 !important; letter-spacing:.1em; color:var(--lg-gold) !important;
}
.lgb-policy__item p{ font-family:var(--msb-gothic); font-size:.98rem; line-height:2.05; letter-spacing:.05em; color:var(--lg-ink); }

/* ボタン：サイト共通の .msb-btn（金の縁＋丸い矢印）を使い、大きさだけ調整 */
.msb-salonb .lgb-btn{ font-size:1.08rem; padding:1.05em 1.1em 1.05em 2.6em; gap:1.4em; }
.msb-salonb .lgb-btn .arrow{ width:40px; height:40px; padding:11px; }

/* ------------------------------------------------------------
   9. Q&A
   ------------------------------------------------------------ */
.lgb-faq__item{ border-bottom:1px solid var(--lg-line); }
.lgb-faq__item:first-child{ border-top:1px solid var(--lg-line); }
.lgb-faq__item summary{
  position:relative; list-style:none; cursor:pointer; padding:1.5em 3em 1.5em 2.6em;
  font-family:var(--msb-mincho); font-weight:500; font-size:1.08rem; line-height:1.8; letter-spacing:.12em; color:var(--lg-ink);
}
/* タップ・クリック時の青い枠は出さない（キーボード操作のときだけ細い線） */
.lgb-faq__item summary:focus{ outline:none; }
.lgb-faq__item summary:focus-visible{ outline:1px solid var(--lg-navy); outline-offset:-1px; }
.lgb-faq__item summary::-webkit-details-marker{ display:none; }
.lgb-faq__item summary::before{
  content:"Q"; position:absolute; left:.2em; top:50%; transform:translateY(-58%); line-height:1;
  font-family:var(--lg-display); font-size:1.5rem; color:var(--lg-navy);
}
.lgb-faq__item summary::after{
  content:""; position:absolute; right:.6em; top:50%; width:14px; height:14px; margin-top:-7px;
  background:
    linear-gradient(var(--lg-brown),var(--lg-brown)) center / 14px 1px no-repeat,
    linear-gradient(var(--lg-brown),var(--lg-brown)) center / 1px 14px no-repeat;
  transition:transform .5s var(--lg-ease);
}
.lgb-faq__item[open] summary::after{ transform:rotate(135deg); }
.lgb-faq__item p{
  position:relative; padding:0 1em 1.8em 2.6em;
  font-family:var(--msb-gothic); font-size:1rem; line-height:2.05; letter-spacing:.06em; color:var(--lg-ink);
}
.lgb-faq__item[open] p{ animation:lgbRise .9s var(--lg-ease) both; }

/* ------------------------------------------------------------
   10. 締め
   ------------------------------------------------------------ */
.lgb-closing{ position:relative; overflow:hidden; padding:120px 6% 130px; text-align:center; }
.lgb-closing__logo{
  position:absolute; left:50%; top:24px; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  font-family:var(--lg-display); font-size:clamp(7rem, 19vw, 17rem); line-height:1; color:var(--lg-logo); opacity:.13;
}
.lgb-closing > *:not(.lgb-closing__logo){ position:relative; }
.lgb-closing__copy{
  margin-bottom:44px !important; font-family:var(--msb-mincho); font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2rem); line-height:1.9; letter-spacing:.16em; color:var(--lg-ink);
}
.lgb-closing__links{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px; margin-top:56px !important;
}
.lgb-closing__links a{
  font-family:var(--msb-gothic); font-size:.85rem; letter-spacing:.1em; color:var(--lg-ink); text-decoration:none;
  border-bottom:1px solid rgba(143,106,55,.35); padding-bottom:2px;
}
.lgb-closing__links a:hover{ color:var(--lg-brown); }

/* 追従ボタン（.msb-btn と同じデザイン） */
.msb-salonb .lgb-float{
  position:fixed; z-index:90; right:28px; bottom:28px;
  font-size:.95rem; padding:.8em .8em .8em 1.9em; gap:1em;
  box-shadow:0 18px 38px -18px rgba(150,120,70,.55);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .8s var(--lg-ease), transform .8s var(--lg-ease), box-shadow .4s ease;
}
.msb-salonb .lgb-float .arrow{ width:32px; height:32px; padding:8px; }
.msb-salonb .lgb-float.is-show{ opacity:1; transform:none; pointer-events:auto; }
.msb-salonb .lgb-float.is-show:hover{ transform:translateY(-2px); }

/* ------------------------------------------------------------
   11. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width:959px){
  .lgb-panel::after{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,253,249,.88); }
}
@media (max-width:1180px){
  .lgb-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; }
  .lgb-step:nth-child(3){ border-left:0; }
}
@media (max-width:767px){
  .lgb-fv{ height:clamp(560px, calc(100svh - 64px), 820px); }
  .lgb-fv::after{ height:34%; }
  .lgb-fv__catch{ left:7%; top:5%; font-size:1.22rem; line-height:1.95; letter-spacing:.18em; }
  .lgb-fv__mark{ left:0; right:0; bottom:4%; text-align:center; }
  .lgb-fv__sub{ margin:0 0 .5em !important; font-size:.82rem; letter-spacing:.26em; }
  .lgb-fv__logo{ font-size:clamp(4.6rem, 25vw, 6.4rem) !important; }
  .lgb-fv__name{ font-size:clamp(1.6rem, 9vw, 2.4rem); margin-top:-.5em !important; }

  .lgb-body{ padding-top:56px; }
  .lgb-panel{ width:92%; margin-bottom:56px; padding:68px 22px 76px; }
  .lgb-head{ margin-bottom:44px; }
  .lgb-head__en{ font-size:2.4rem !important; }
  .lgb-head__jp{ font-size:.74rem; letter-spacing:.2em; }

  .lgb-text p, p.lgb-text, .lgb-item__txt, .lgb-check li{ font-size:.97rem; line-height:2.05; letter-spacing:.04em; }
  .lgb-msg__photo{ margin:0 -22px 44px; max-width:none; aspect-ratio:4 / 3; }
  .lgb-lead{ font-size:1rem; letter-spacing:.05em; }
  .lgb-voices p{ font-size:.98rem; letter-spacing:.04em; }

  .lgb-foryou{ display:block; margin-top:96px; }
  .lgb-foryou__photo{ width:64%; margin:-130px 0 40px auto !important; }
  .lgb-foryou .lgb-head{ text-align:center; }
  .lgb-head.is-left .lgb-head__en{ padding:0 .55em .26em !important; }
  .lgb-foryou .lgb-text{ text-align:center; }

  .lgb-items{ grid-template-columns:minmax(0,1fr); gap:28px; margin-top:44px; }
  .lgb-item__body{ padding:30px 22px 32px; }
  .lgb-item__tag{ margin-bottom:12px !important; font-size:.76rem; letter-spacing:.1em; }
  .lgb-item__ttl{ font-size:1.16rem !important; letter-spacing:.06em; }
  .lgb-item__txt{ margin-top:18px !important; }

  .lgb-pf__top{ grid-template-columns:minmax(0,1fr); gap:30px; justify-items:center; text-align:center; margin-bottom:40px; }
  .lgb-pf__top .lgb-head{ order:-1; text-align:center; }
  .lgb-pf__photo{ width:220px; }
  .lgb-pf__name{ text-align:center; }
  .lgb-pf__role{ font-size:.94rem; letter-spacing:.08em; }
  .lgb-pf__jp{ font-size:1.5rem; }

  .lgb-steps{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .lgb-step{
    display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:16px; align-items:start;
    padding:24px 0; text-align:left; border-left:0 !important; border-top:1px solid var(--lg-line);
  }
  .lgb-step:last-child{ border-bottom:1px solid var(--lg-line); }
  .lgb-step__no{ grid-column:1; grid-row:1 / span 3; text-align:center; font-size:1.5rem; }
  .lgb-step__ico{ grid-column:1; grid-row:1 / span 3; width:40px; height:40px; margin:58px auto 0; }
  .lgb-step__ttl{ grid-column:2; grid-row:1; }
  .lgb-step__txt{ grid-column:2; grid-row:2; margin-top:.4em !important; font-size:.92rem; text-align:left; }

  .lgb-sub{ margin-top:88px; }
  .lgb-plan__notes{ font-size:.9rem; line-height:1.8; letter-spacing:.02em; }
  .lgb-plan__notes li + li{ margin-top:.7em; }
  .msb-salonb .lgb-btn{ font-size:.98rem; letter-spacing:.12em; padding:.95em .9em .95em 2em; gap:1em; }
  .msb-salonb .lgb-btn .arrow{ width:36px; height:36px; padding:10px; }
  .lgb-policy__item{ grid-template-columns:minmax(0,1fr); gap:10px; padding:26px 0; }
  .lgb-policy__item h3{ font-size:1.06rem !important; letter-spacing:.08em; }
  .lgb-policy__item p{ font-size:.95rem; line-height:2; }

  .lgb-faq__item summary{ padding:1.3em 2.4em 1.3em 2.2em; font-size:.98rem; letter-spacing:.06em; }
  .lgb-faq__item summary::before{ font-size:1.3rem; }
  .lgb-faq__item p{ padding:0 .4em 1.5em 2.2em; font-size:.94rem; }

  .lgb-closing{ padding:88px 6% 110px; }
  .lgb-closing__copy{ font-size:1.32rem; letter-spacing:.1em; }
  .lgb-closing__links{ gap:10px 20px; }

  .msb-salonb .lgb-float{
    right:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translate(50%, 14px);
    font-size:.88rem; letter-spacing:.12em; white-space:nowrap;
  }
  .msb-salonb .lgb-float.is-show,
  .msb-salonb .lgb-float.is-show:hover{ transform:translate(50%, 0); }
}

/* ------------------------------------------------------------
   12. 背景
   ① 写真の色を拾ったグラデーション（常に表示）
   ② 大きな英字の透かし（.has-wm のときだけ表示）
   ------------------------------------------------------------ */
.lgb-body::before{
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(180deg,
    #F8EDD3 0%, #F6E5D8 14%, #F8EDD3 26%, #FAF2E5 38%, #F5E2D6 50%,
    #F8ECD9 62%, #F6E6DB 76%, #FAF2E6 88%, #F8EDD3 100%);
}
.lgb-panel[data-wm]::before{
  content:attr(data-wm); position:absolute; z-index:-2; top:-.6em;
  font-family:var(--lg-display); font-style:italic; font-weight:400;
  font-size:clamp(7rem, 15vw, 15rem); line-height:1; white-space:nowrap;
  color:var(--lg-logo); opacity:0; pointer-events:none;
  transition:opacity .9s var(--lg-ease);
}
.lgb-panel[data-wm-side="left"]::before{ left:-.32em; }
.lgb-panel[data-wm-side="right"]::before{ right:-.3em; }
.msb-salonb.has-wm .lgb-panel[data-wm]::before{ opacity:.15; }

/* 比較用スイッチ */
.lgb-switch{
  position:fixed; z-index:95; left:20px; bottom:24px;
  display:flex; align-items:center; gap:6px; padding:6px 6px 6px 14px; border-radius:999px;
  background:rgba(255,253,249,.96); border:1px solid var(--lg-line);
  box-shadow:0 14px 30px -18px rgba(110,80,40,.5);
  font-family:var(--msb-gothic); font-size:.78rem; letter-spacing:.04em;
}
.lgb-switch__label{ margin-right:4px; color:var(--lg-brown); }
.lgb-switch button{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding:.55em 1.1em; border-radius:999px;
  border:1px solid transparent; background:transparent; color:var(--lg-ink); font:inherit; letter-spacing:inherit;
  transition:background-color .3s ease, color .3s ease;
}
.lgb-switch button[aria-pressed="true"]{ background:var(--lg-navy); color:#fff; }
.lgb-switch button:focus-visible{ outline:2px solid var(--lg-navy); outline-offset:2px; }

@media (max-width:767px){
  .lgb-panel[data-wm]::before{ font-size:clamp(4.4rem, 22vw, 7rem); }
  .lgb-switch{ left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); white-space:nowrap; font-size:.72rem; }
}

/* スマホ（縦長の写真）：人物を上揃えで大きめに */
@media (max-width:540px){
  .lgb-fv__photo img{ object-position:50% 0; }
}
/* 背の低いスマホ：コピーを少し小さくして顔と重ならないように */
@media (max-width:540px) and (max-height:760px){
  .lgb-fv__catch{ top:4%; font-size:1.1rem; line-height:1.9; }
}

@media (prefers-reduced-motion:reduce){
  .lgb-fv__photo img, .lgb-fv__catch span, .lgb-fv__sub, .lgb-fv__logo, .lgb-fv__name,
  .lgb-faq__item[open] p{ animation:none !important; }
  .msb-salonb .rv, .msb-salonb .rv img{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ------------------------------------------------------------
   13. 締めの注意書き（お申し込み前の確認事項）
   ・文字は大きくしすぎず、見出し／本文／同意事項／最後のお願いで役割を分けて読みやすく
   ------------------------------------------------------------ */
/* 締めのコピーを削除したので、薄い「Légers」が面の上にのぞくように上の余白を確保 */
.lgb-closing{ padding-top:clamp(150px, 14.5vw, 220px); }
.lgb-notice{
  max-width:640px; margin:0 auto 52px; padding:40px 44px 38px; text-align:left;
  background:rgba(255,253,249,.78); border:1px solid rgba(206,182,140,.42); border-radius:10px;
}
.lgb-notice__block + .lgb-notice__block{ margin-top:30px; padding-top:30px; border-top:1px solid var(--lg-line); }
.lgb-notice__ttl{
  padding-bottom:.85em; text-align:center;
  font-family:var(--msb-mincho); font-weight:600; font-size:1.02rem; line-height:1.8; letter-spacing:.08em; color:var(--lg-brown);
  word-break:auto-phrase; text-wrap-style:balance;
}
.lgb-notice__txt{
  margin-top:.7em !important; text-align:center; text-wrap-style:balance;
  font-family:var(--msb-gothic); font-size:.92rem; line-height:1.95; letter-spacing:.04em; color:var(--lg-ink);
}
/* 項目の頭は左で揃え、リスト全体を中央に置く */
.lgb-notice__list{ list-style:none; width:fit-content; max-width:100%; margin:16px auto 0 !important; }
.lgb-notice__list li{
  position:relative; padding:.4em 0 .4em 2em;
  font-family:var(--msb-gothic); font-size:.94rem; line-height:1.8; letter-spacing:.04em; color:var(--lg-ink);
}
/* ☑ の形（四角＋チェック） */
.lgb-notice__list li::before{
  content:""; position:absolute; left:0; top:.72em; width:1.1em; height:1.1em; box-sizing:border-box;
  border:1px solid var(--lg-gold); border-radius:2px; background:#fff;
}
.lgb-notice__list li::after{
  content:""; position:absolute; left:.29em; top:1.03em; width:.52em; height:.27em;
  border-left:1.5px solid var(--lg-gold); border-bottom:1.5px solid var(--lg-gold); transform:rotate(-45deg);
}
.lgb-notice__list a{
  color:inherit; text-decoration:underline; text-decoration-color:rgba(143,106,55,.45);
  text-decoration-thickness:1px; text-underline-offset:3px; transition:color .3s ease;
}
.lgb-notice__list a:hover{ color:var(--lg-brown); }
.lgb-notice__last{
  margin-top:30px !important; padding:14px 18px; border-radius:6px; text-align:center;
  background:rgba(187,141,94,.1);
  font-family:var(--msb-gothic); font-weight:500; font-size:.94rem; line-height:1.8; letter-spacing:.05em; color:var(--lg-brown);
}

/* ------------------------------------------------------------
   14. 追従ボタン：「Légersに参加する（新規会員登録）」
   ------------------------------------------------------------ */
.msb-salonb .lgb-float--join .lgb-float__label small{ margin-left:.05em; font-size:.8em; letter-spacing:.04em; }

@media (max-width:767px){
  .lgb-closing{ padding-top:max(108px, 26vw); }
  .lgb-notice{ margin-bottom:44px; padding:30px 20px 28px; }
  .lgb-notice__block + .lgb-notice__block{ margin-top:24px; padding-top:24px; }
  .lgb-notice__ttl{ padding-bottom:.75em; font-size:.98rem; letter-spacing:.04em; }
  .lgb-notice__txt{ font-size:.82rem; line-height:1.9; letter-spacing:.02em; }
  .lgb-notice__list li{ padding-left:1.9em; font-size:.82rem; line-height:1.75; letter-spacing:.02em; }
  .lgb-notice__last{ margin-top:24px !important; padding:12px 14px; font-size:.84rem; letter-spacing:.02em; }

  .msb-salonb .lgb-float--join{ font-size:.86rem; letter-spacing:.06em; padding:.75em .75em .75em 1.5em; gap:.8em; }
}

/* ------------------------------------------------------------
   15. 表示アニメを速く（2026.10 修正・3つのLP共通）
   ・「文字が浮き出るまでが遅く、目がチカチカする」とのご意見を受けて、
     ふわっと表示は 0.7秒に短くし、本文の文字のぼかしはなくす（浮き上がる動きは残す）
   ・写真のピント合わせも短く。トップ画像の文字は 0.2〜1.2秒のうちに順に表示
   ・表示を始めるタイミングは msb.js 側でも早めている
   ------------------------------------------------------------ */
.msb-salonb .rv{
  transform:translateY(10px); filter:none;
  transition:opacity .7s var(--lg-ease), transform .7s var(--lg-ease);
}
.msb-salonb .lgb-photo.rv,
.msb-salonb .lgb-foryou__photo.rv,
.msb-salonb .lgb-pf__photo.rv{ transform:none; transition:opacity .8s ease; }
.msb-salonb .lgb-photo.rv img,
.msb-salonb .lgb-foryou__photo.rv img,
.msb-salonb .lgb-pf__photo.rv img{
  transform:scale(1.04); filter:blur(6px);
  transition:transform 1.2s var(--lg-ease), filter .9s ease;
}
@keyframes lgbFocus{
  from{ opacity:0; transform:scale(1.05); filter:blur(10px); }
  to{ opacity:1; transform:scale(1); filter:blur(0); }
}
@keyframes lgbRise{
  from{ opacity:0; transform:translateY(12px); filter:blur(3px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes lgbLogo{
  from{ opacity:0; letter-spacing:.1em; filter:blur(6px); }
  to{ opacity:1; letter-spacing:.02em; filter:blur(0); }
}
/* オンラインサロンのトップ画像 */
.lgb-fv__photo img{ animation-duration:1.6s; }
.lgb-fv__catch span{ animation-duration:.9s; }
.lgb-fv__catch span:nth-child(1){ animation-delay:.2s; }
.lgb-fv__catch span:nth-child(2){ animation-delay:.35s; }
.lgb-fv__catch span:nth-child(3){ animation-delay:.5s; }
.lgb-fv__logo{ animation:lgbLogo 1.2s var(--lg-ease) .45s both; }
.lgb-fv__sub{ animation:lgbRise .9s var(--lg-ease) .6s both; }
.lgb-fv__name{ animation:lgbName 1s var(--lg-ease) .85s both; }
.lgb-faq__item[open] p{ animation-duration:.5s; }
.msb-salonb .lgb-float{ transition:opacity .5s var(--lg-ease), transform .5s var(--lg-ease), box-shadow .4s ease; }

/* ------------------------------------------------------------
   16. PCで読みやすく（2026.10 修正）
   ・<br class="sp"> はスマホだけの改行（全LP共通）
   ・顔タイプ／養成講座のLPは、PCで本文の幅を広げ、行間・字間・段落や見出しの間を少し詰めて、
     次の文へ読み進みやすく。文と文の間の改行（<br>）もPCでは出さない（<br class="keep"> は残す）
   ・スマホは今までどおり
   ------------------------------------------------------------ */
@media (min-width:768px){
  .msb-salonb br.sp{ display:none; }

  :is(.msb-kaotypeb, .msb-analystb) .lgb-col:not(.lgb-policy){ max-width:760px; }
  :is(.msb-kaotypeb, .msb-analystb) :is(.lgb-text p, p.lgb-text){ line-height:1.95; letter-spacing:.04em; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-text p + p{ margin-top:1em; }
  :is(.msb-kaotypeb, .msb-analystb) :is(.lgb-faq__item p, .lgb-policy__item p){ line-height:1.95; letter-spacing:.04em; }
  :is(.msb-kaotypeb, .msb-analystb) :is(.lgb-text p, .lgb-faq__item p, .lgb-policy__item p, .anb-band__text p) br:not(.keep){ display:none; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-check li{ padding-top:.8em; padding-bottom:.8em; line-height:1.75; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-check li::before{ top:1.3em; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-panel{ padding-top:88px; padding-bottom:96px; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-head{ margin-bottom:48px; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-sub{ margin-top:100px; }
  :is(.msb-kaotypeb, .msb-analystb) .lgb-policy__item{ padding:28px 0; }
}

/* ------------------------------------------------------------
   17. オンラインサロン：PCのトップ画像（2026.10 修正）
   ・右に空白が目立つとのご意見を受けて、fv.webp の右側の余白を詰め、
     人物を画面の右寄り（約72%）に。画面が狭いときも人物が右端に寄りすぎないように
   ------------------------------------------------------------ */
@media (min-width:541px){
  .lgb-fv__photo img{ object-position:70% 30%; }
}
@media (min-width:768px){
  /* 段落末用の「改行させないまとまり（.nw）」は、PCで文が続くときは解除（途中で行が短く切れないように） */
  :is(.msb-kaotypeb, .msb-analystb) :is(.lgb-text p, .lgb-faq__item p, .lgb-policy__item p, .anb-band__text p) .nw:has(+ br:not(.keep)){ white-space:normal; }
}

/* ------------------------------------------------------------
   18. オンラインサロン：メッセージの写真を控えめに（2026.11 修正）
   ・トップ画像より目立たないよう、幅を小さく・縦長寄りに
   ------------------------------------------------------------ */
.msb-salonb:not(.msb-kaotypeb):not(.msb-analystb) .lgb-msg__photo{
  max-width:440px; aspect-ratio:4 / 3; margin:0 auto 56px;
}
.msb-salonb:not(.msb-kaotypeb):not(.msb-analystb) .lgb-msg__photo img{ object-position:50% 18%; }
@media (max-width:767px){
  .msb-salonb:not(.msb-kaotypeb):not(.msb-analystb) .lgb-msg__photo{
    width:76%; max-width:320px; margin:0 auto 40px; aspect-ratio:4 / 3;
  }
}