@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ 顔タイプアドバイザー1級認定講座 B案（page-msb-kaotype-b.php）
   置き場所: swell_child/assets/css/msb-kaotype-b.css
   ※ msb-salon-b.css（B案の共通の土台：白い面・英字＋日本語の見出し・本文・
     チェックリスト・Q&A・ボタン・追従ボタン・締め・背景）の後に読み込み
   ・トップ画像は B案が初期表示（?fv=a／?fv=c で他の案も確認できる）
   ============================================================ */

.msb-kaotypeb{
  --ktb-peach:#E9CAB0;      /* 旧LPのボックスの色 */
  --ktb-brown-dk:#6B4F2A;   /* 読ませたい茶色の文字 */
}
.msb-kaotypeb :is(.ktb-lead__sub, .ktb-lead__line, .ktb-msg__body p, .ktb-big, .ktb-reason__ttl,
  .ktb-taste__txt, .ktb-book__ttl, .ktb-impression p, .ktb-qttl){
  word-break:auto-phrase; text-wrap-style:balance;
}
/* チェックリストは読みやすい濃い文字色に（印はゴールドのまま） */
.msb-kaotypeb .lgb-check li{ color:var(--lg-ink); }

/* ------------------------------------------------------------
   1. トップ画像 ─ 比較用 3案（a 上から下がる写真／b 写真を右に＋英字リングのバッジ／c ベージュのボックス改良版）
   ------------------------------------------------------------ */
.ktb-fv{
  position:relative; overflow:hidden; isolation:isolate; background:#E9E8E5;
  height:clamp(600px, calc(100svh - 90px), 1000px);
}
.msb-salonb .ktb-fv__badge{ height:auto !important; filter:drop-shadow(0 10px 18px rgba(120,90,50,.18)); }

/* 講座名・募集の行（3案共通の形） */
.ktb-fv__ttl{
  margin:0 !important;
  font-family:var(--msb-mincho) !important; font-weight:500 !important; line-height:1.45 !important; color:var(--lg-navy) !important;
}
.ktb-fv__ttl b{
  display:inline-block; margin:0 .06em 0 .02em; font-family:inherit; font-weight:inherit; font-size:1em; line-height:inherit;
  transform:scale(1.12); transform-origin:50% 88%; color:#A27A47;   /* 半角の「1」は漢字より低いので、少しだけ大きく */
}
.ktb-fv__ttl1, .ktb-fv__ttl2{ display:block; white-space:nowrap; }
.ktb-fv__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:26px !important; }
.ktb-fv__tag{
  position:relative; padding-left:1.15em;
  font-family:var(--msb-mincho); font-weight:600; font-size:.96rem; letter-spacing:.14em; color:var(--lg-navy);
}
.ktb-fv__tag::before{
  content:""; position:absolute; left:.1em; top:50%; width:.42em; height:.42em; margin-top:-.21em; background:#B48D58; transform:rotate(45deg);
}
.ktb-fv__date{
  padding-left:16px; border-left:1px solid rgba(74,59,44,.3);
  font-variant-numeric:lining-nums; font-family:var(--msb-gothic); font-weight:500; font-size:.92rem; letter-spacing:.08em; color:#3E3226;
}
/* スクロールの合図（細い線の中を光が下りる） */
.ktb-fv__scroll{
  position:absolute; z-index:3; left:clamp(18px, 2.8vw, 44px); bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  animation:lgbRise 1.8s var(--lg-ease) 3.2s both;
}
.ktb-fv__scroll span{
  writing-mode:vertical-rl; font-family:var(--lg-display); font-style:italic; font-size:.8rem; letter-spacing:.18em; color:var(--lg-navy);
}
.ktb-fv__scroll::after{
  content:""; display:block; width:1px; height:72px; background:rgba(19,48,106,.18);
  background-image:linear-gradient(var(--lg-navy), var(--lg-navy)); background-repeat:no-repeat; background-size:1px 24px;
  animation:ktbScroll 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes ktbScroll{
  0%{ background-position:0 -24px; }
  100%{ background-position:0 72px; }
}

/* ---- 案a：上から下がる写真（下が丸い）＋大きな英字＋縦書きのコピー ---- */
.is-a.ktb-fv{
  --pw:min(34vw, 540px); --pr:9vw;
  background:linear-gradient(150deg, #FCF8F1 0%, #F7EDE0 60%, #F4E6D4 100%);
}
.ktb-fva__photo{
  position:absolute; z-index:1; top:0; right:var(--pr); width:var(--pw); height:91%; margin:0 !important; overflow:hidden;
  border-radius:0 0 calc(var(--pw) / 2) calc(var(--pw) / 2);
  animation:ktbDrop 2.2s var(--lg-ease) .2s both;
}
.msb-salonb .ktb-fva__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; animation:lgbFocus 3s var(--lg-ease) both; }
@keyframes ktbDrop{
  from{ clip-path:inset(0 0 100% 0); }
  to{ clip-path:inset(0 0 0 0); }
}
/* 写真のうしろに、少しずらした細い線の形 */
.ktb-fva__line{
  position:absolute; z-index:0; top:0; right:calc(var(--pr) + 26px); width:var(--pw); height:calc(91% + 26px);
  border:1px solid rgba(162,122,71,.55); border-top:0; border-radius:0 0 calc(var(--pw) / 2) calc(var(--pw) / 2);
  animation:lgbRise 2s var(--lg-ease) 1.4s both;
}
.ktb-fva__catch{
  position:absolute; z-index:2; left:clamp(18px, 2.8vw, 44px); top:12%;
  display:flex; gap:.9em; writing-mode:vertical-rl;
  font-family:var(--msb-mincho); font-weight:500; font-size:clamp(.92rem, 1.15vw, 1.1rem); line-height:1.8; letter-spacing:.34em; color:var(--ktb-brown-dk);
  animation:lgbRise 1.8s var(--lg-ease) 1.6s both;
}
.ktb-fva__catch span:nth-child(2){ padding-top:3.2em; }
.ktb-fva__en{
  position:absolute; z-index:2; left:9vw; top:11%;
  font-family:var(--lg-display); font-weight:400; font-size:clamp(5.4rem, 11.4vw, 12rem); line-height:.9; letter-spacing:-.005em; color:var(--lg-navy);
}
.ktb-fva__en span{ display:block; animation:ktbTtl 2.4s var(--lg-ease) both; }
.ktb-fva__en span:nth-child(1){ animation-delay:1.2s; }
.ktb-fva__en span:nth-child(2){ padding-left:2.2em; font-style:italic; color:#A27A47; animation-delay:1.5s; }
@keyframes ktbTtl{
  from{ opacity:0; filter:blur(10px); transform:translateY(14px); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
.ktb-fva__body{ position:absolute; z-index:2; left:9vw; bottom:12%; }
.is-a .ktb-fv__ttl1{ font-size:clamp(1.6rem, 2.35vw, 2.45rem); letter-spacing:.1em; animation:lgbRise 1.8s var(--lg-ease) 2s both; }
.is-a .ktb-fv__ttl2{ font-size:clamp(1.6rem, 2.35vw, 2.45rem); letter-spacing:.36em; animation:lgbRise 1.8s var(--lg-ease) 2.2s both; }
.is-a .ktb-fv__meta{ animation:lgbRise 1.8s var(--lg-ease) 2.6s both; }
.is-a.ktb-fv .ktb-fv__badge{
  position:absolute; z-index:3; right:calc(var(--pr) + var(--pw) - 72px); bottom:5%; width:clamp(100px, 8.4vw, 132px);
  animation:lgbRise 1.8s var(--lg-ease) 2.8s both;
}

/* ---- 案b：写真を右に、講座名が写真にかかる＋英字のリングに囲まれた認定バッジ ---- */
.is-b.ktb-fv{ background:linear-gradient(160deg, #FCF8F1 0%, #F5E9D9 100%); }
.ktb-fvb__photo{ position:absolute; z-index:0; top:0; right:0; bottom:0; width:64%; }
.msb-salonb .ktb-fvb__photo img{ width:100%; height:100%; object-fit:cover; object-position:92% 0; animation:lgbFocus 3s var(--lg-ease) both; }
.ktb-fvb__body{ position:absolute; z-index:2; left:7vw; top:52%; transform:translateY(-50%); }
.ktb-fvb__en{
  display:flex; align-items:center; gap:14px; margin-bottom:26px !important;
  font-family:var(--lg-display); font-style:italic; font-size:1rem; letter-spacing:.1em; color:#A27A47;
  animation:lgbRise 1.8s var(--lg-ease) 1.2s both;
}
.ktb-fvb__en::before{ content:""; width:44px; height:1px; background:#B48D58; }
.ktb-fvb__l1, .ktb-fvb__l2, .ktb-fvb__l3{ display:block; white-space:nowrap; animation:ktbTtl 2.2s var(--lg-ease) both; }
.is-b .ktb-fv__ttl{ line-height:1.55 !important; }
.ktb-fvb__l1, .ktb-fvb__l2, .ktb-fvb__l3{ font-size:clamp(2rem, 3.1vw, 3.4rem); letter-spacing:.1em; }   /* 左の面の中に収まる大きさ */
.ktb-fvb__l1{ animation-delay:1.4s; }
.ktb-fvb__l2{ animation-delay:1.6s; }
.ktb-fvb__l3{ animation-delay:1.8s; }
.is-b .ktb-fv__meta{
  width:fit-content; margin-top:34px !important; padding-top:24px; border-top:1px solid rgba(74,59,44,.25);
  animation:lgbRise 1.8s var(--lg-ease) 2.3s both;
}
.ktb-fvb__seal{
  position:absolute; z-index:3; right:3.5vw; top:8%; width:clamp(150px, 13vw, 196px); aspect-ratio:1 / 1;
  display:grid; place-items:center;
  animation:lgbRise 1.8s var(--lg-ease) 2.7s both;
}
.ktb-fvb__seal::before{
  content:""; position:absolute; inset:14%; border-radius:50%; background:rgba(255,253,249,.9);
  box-shadow:0 18px 40px -26px rgba(110,78,40,.45);
}
.ktb-fvb__ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; animation:ktbSpin 48s linear infinite; }
.ktb-fvb__ring text{ font-family:var(--lg-display); font-style:italic; font-size:11px; letter-spacing:.06em; fill:var(--lg-navy); }
@keyframes ktbSpin{ to{ transform:rotate(360deg); } }
.is-b.ktb-fv .ktb-fv__badge{ position:relative; width:52%; }

/* ---- 案c：ベージュのボックス（旧LPの形）の改良版 ---- */
.ktb-fvc__photo{ position:absolute; inset:0; overflow:hidden; }
.msb-salonb .ktb-fvc__photo img{ width:100%; height:100%; object-fit:cover; object-position:70% 0; animation:ktbZoom 9s var(--lg-ease) both; }
@keyframes ktbZoom{
  from{ opacity:0; transform:scale(1.07); filter:blur(10px); }
  30%{ opacity:1; filter:blur(0); }
  to{ opacity:1; transform:scale(1); filter:blur(0); }
}
.is-c.ktb-fv::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:18%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(248,237,211,0) 0%, rgba(248,237,211,.7) 100%);
}
.ktb-fvc__box{
  /* ボックスの色（3案）。下の .box-a／.box-b／.box-c で切り替え */
  --bx-bg:rgba(255,252,247,.95); --bx-line:rgba(162,122,71,.55); --bx-ttl:#2B2620; --bx-one:#A27A47;
  --bx-sub:#7A5A30; --bx-tag:#6B4F2A; --bx-dot:#B48D58; --bx-date:#2B2620; --bx-rule:rgba(162,122,71,.4);
  position:absolute; z-index:2; left:5vw; bottom:12%;
  width:min(47%, 700px); padding:52px 48px 46px; text-align:center;
  background:var(--bx-bg);
  -webkit-backdrop-filter:blur(10px) saturate(1.08); backdrop-filter:blur(10px) saturate(1.08);
  box-shadow:0 44px 80px -50px rgba(80,56,30,.55);
  animation:ktbBox 2s var(--lg-ease) .8s both;
}
.ktb-fvc__box::before{ content:""; position:absolute; inset:12px; border:1px solid var(--bx-line); pointer-events:none; }
/* a：アイボリー（明るい面に濃い文字。いちばん読みやすい） */
.box-a .ktb-fvc__box{ --bx-bg:rgba(255,252,247,.95); }
/* b：モカブラウン（旧LPの色を深くして、白い文字） */
.box-b .ktb-fvc__box{
  --bx-bg:linear-gradient(150deg, rgba(150,117,86,.96) 0%, rgba(124,94,66,.96) 100%); --bx-line:rgba(255,255,255,.4);
  --bx-ttl:#FFFBF4; --bx-one:#F1D7A6; --bx-sub:#F3E3CB; --bx-tag:#FFFBF4; --bx-dot:#F1D7A6; --bx-date:#F6EADB; --bx-rule:rgba(255,255,255,.35);
}
/* c：ネイビー（サイトの色。白い文字とゴールド） */
.box-c .ktb-fvc__box{
  --bx-bg:linear-gradient(150deg, rgba(30,51,96,.95) 0%, rgba(19,40,84,.96) 100%); --bx-line:rgba(216,183,128,.5);
  --bx-ttl:#FFFBF4; --bx-one:#E2BF85; --bx-sub:#E6D3B4; --bx-tag:#FFFBF4; --bx-dot:#E2BF85; --bx-date:#E9E4DA; --bx-rule:rgba(226,191,133,.35);
}
@keyframes ktbBox{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
.ktb-fvc__catch{
  margin-bottom:14px !important;
  font-family:var(--msb-mincho); font-weight:500; font-size:clamp(.92rem, 1.1vw, 1.05rem); letter-spacing:.24em; color:var(--bx-sub);
  animation:lgbRise 1.8s var(--lg-ease) 1.8s both;
}
.is-c .ktb-fv__ttl{ color:var(--bx-ttl) !important; }
.is-c .ktb-fv__ttl b{ color:var(--bx-one); }
/* 講座名はボックス幅の約3/4の長さに（左右の枠線との間にゆとりを持たせる） */
.is-c .ktb-fv__ttl1{ font-size:clamp(1.9rem, 2.7vw, 2.5rem); letter-spacing:.1em; animation:lgbRise 1.8s var(--lg-ease) 2s both; }
.is-c .ktb-fv__ttl2{ font-size:clamp(1.9rem, 2.7vw, 2.5rem); letter-spacing:.32em; animation:lgbRise 1.8s var(--lg-ease) 2.2s both; }
.is-c .ktb-fv__meta{
  justify-content:center; margin-top:22px !important; padding-top:20px; border-top:1px solid var(--bx-rule);
  animation:lgbRise 1.8s var(--lg-ease) 2.5s both;
}
.is-c .ktb-fv__tag{ font-weight:600; color:var(--bx-tag); }
.is-c .ktb-fv__tag::before{ background:var(--bx-dot); }
.is-c .ktb-fv__date{ font-weight:500; color:var(--bx-date); border-left-color:var(--bx-rule); }
.is-c.ktb-fv .ktb-fv__badge{
  position:absolute; right:-46px; top:-58px; width:clamp(100px, 8.6vw, 132px);
  animation:lgbRise 1.8s var(--lg-ease) 2.8s both;
}

/* ---- トップ画像：スマホ（599px以下） ---- */
@media (max-width:599px){
  .ktb-fv__scroll{ display:none; }

  /* a：写真は上から下がり、英字が写真の下にかかる */
  .is-a.ktb-fv{ --pw:74vw; --pr:7vw; height:auto; min-height:0; padding-bottom:15vw; }
  .ktb-fva__photo{ position:relative; top:auto; right:auto; height:min(116vw, 900px); margin:0 var(--pr) 0 auto !important; }
  .ktb-fva__line{ right:calc(var(--pr) + 14px); height:calc(min(116vw, 900px) + 14px); }
  .ktb-fva__catch{ left:4.6vw; top:9vw; gap:.6em; font-size:clamp(.82rem, 3.4vw, 1.1rem); line-height:1.7; letter-spacing:.26em; }
  .ktb-fva__en{ position:relative; left:auto; top:auto; margin:-21vw 0 0 6vw !important; font-size:23vw; }
  .ktb-fva__en span:nth-child(2){ padding-left:1.1em; }
  .ktb-fva__body{ position:relative; left:auto; bottom:auto; margin:7vw 7vw 0; }
  .is-a .ktb-fv__ttl1, .is-a .ktb-fv__ttl2{ font-size:clamp(1.45rem, 6.6vw, 2.4rem); }
  .is-a .ktb-fv__ttl1{ letter-spacing:.06em; }
  .is-a.ktb-fv .ktb-fv__badge{ right:3.5vw; bottom:auto; top:calc(min(116vw, 900px) - 25vw); width:clamp(84px, 23vw, 130px); }

  /* b：写真を上に、講座名が写真の下にかかる */
  .is-b.ktb-fv{ height:auto; min-height:0; padding-bottom:15vw; }
  .ktb-fvb__photo{ position:relative; display:block; top:auto; right:auto; bottom:auto; width:100%; height:auto; }   /* スマホ用の写真をそのままの比率（780×1300）で */
  .ktb-fvb__photo::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
    background:linear-gradient(180deg, rgba(250,243,233,0) 0%, rgba(250,243,233,.85) 70%, #FAF3E9 100%);
  }
  .msb-salonb .ktb-fvb__photo img{ height:auto; object-position:50% 0; }
  .ktb-fvb__body{ position:relative; left:auto; top:auto; transform:none; margin:-26vw 7vw 0; }
  .ktb-fvb__en{ margin-bottom:16px !important; font-size:.9rem; }
  .ktb-fvb__l1, .ktb-fvb__l2, .ktb-fvb__l3{ font-size:clamp(1.7rem, 8vw, 3rem); letter-spacing:.08em; }
  .is-b .ktb-fv__meta{ margin-top:22px !important; padding-top:16px; }
  /* バッジは人物の右下（顔・目線にかからない位置）。写真の下側、講座名の右上に */
  .ktb-fvb__seal{ left:auto; right:3vw; top:calc(166.67vw - 29vw - min(29vw, 190px)); width:min(29vw, 190px); }
  .ktb-fvb__ring text{ font-size:11.5px; }

  /* c：女性を大きく、ボックスは写真の下側に */
  .is-c.ktb-fv{ height:min(178vw, calc(100svh - 64px), 1100px); min-height:560px; }
  .msb-salonb .ktb-fvc__photo img{ object-position:50% 0; }
  .is-c.ktb-fv::after{ height:30%; }
  .ktb-fvc__box{ left:5%; right:5%; bottom:5%; width:auto; padding:34px 6% 28px; }
  .is-c.ktb-fv .ktb-fv__badge{ right:-6px; top:-50px; width:clamp(78px, 21vw, 120px); }
}
@media (max-width:959px){
  .ktb-fvc__box{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:599px){
  .ktb-fv__meta{ gap:6px 12px; margin-top:18px !important; }
  .ktb-fv__tag{ font-size:.84rem; letter-spacing:.1em; }
  .ktb-fv__date{ padding-left:12px; font-size:.82rem; letter-spacing:.04em; }

  .ktb-fvc__catch{ margin-bottom:10px !important; font-size:.8rem; letter-spacing:.14em; }
  .is-c .ktb-fv__ttl1, .is-c .ktb-fv__ttl2{ font-size:clamp(1.2rem, 5.4vw, 1.75rem); }
  .is-c .ktb-fv__ttl1{ letter-spacing:.06em; }
  .is-c .ktb-fv__ttl2{ letter-spacing:.24em; }
  .is-c .ktb-fv__meta{ flex-direction:column; gap:4px; margin-top:14px !important; padding-top:14px; }
  .is-c .ktb-fv__date{ padding-left:0; border-left:0; }
}

/* ---- トップ画像：タブレット・小さめの画面（600〜1080px）はPCと同じ横長の構成。
   縦長の画面でも人物が大きくなりすぎないよう、高さは画面幅の約8割まで ---- */
@media (min-width:600px) and (max-width:959px){
  .ktb-fv{ height:clamp(480px, min(calc(100svh - 64px), 80vw), 860px); }
}
@media (min-width:960px) and (max-width:1080px){
  .ktb-fv{ height:clamp(480px, min(calc(100svh - 90px), 80vw), 900px); }
}
@media (min-width:600px) and (max-width:1080px){
  .ktb-fv__meta{ flex-direction:column; align-items:flex-start; gap:4px; }
  .ktb-fv__date{ padding-left:1.15em; border-left:0; }
  .ktb-fv__scroll::after{ height:56px; }

  /* a：写真を細めに、英字と講座名が写真にかぶりすぎないように。縦書きのコピーは少し詰めて、スクロールの合図と重ならないように */
  .is-a.ktb-fv{ --pw:40vw; --pr:5vw; }
  .ktb-fva__catch{ top:8%; letter-spacing:.28em; }
  .ktb-fva__catch span:nth-child(2){ padding-top:1.8em; }
  .ktb-fva__en{ left:11vw; top:9%; font-size:clamp(4.2rem, 10.4vw, 8rem); }
  .ktb-fva__body{ left:11vw; bottom:9%; }
  .is-a .ktb-fv__ttl1, .is-a .ktb-fv__ttl2{ font-size:clamp(1.15rem, 2.8vw, 2.2rem); }
  .is-a.ktb-fv .ktb-fv__badge{ right:calc(var(--pr) + var(--pw) - 56px); width:clamp(84px, 11vw, 120px); }

  /* b：左の面を広げて、講座名がゆったり収まるように */
  .ktb-fvb__photo{ width:58%; }
  .ktb-fvb__body{ left:5vw; }
  .ktb-fvb__en{ margin-bottom:18px !important; font-size:.86rem; }
  .ktb-fvb__l1, .ktb-fvb__l2, .ktb-fvb__l3{ font-size:clamp(1.5rem, 3.4vw, 2.7rem); }
  .is-b .ktb-fv__meta{ margin-top:24px !important; padding-top:18px; }
  .ktb-fvb__seal{ right:2.5vw; top:5%; width:clamp(108px, 15vw, 160px); }

  /* c：人物を右へ寄せ、ボックスは左下に（顔・上半身にかからない幅）。講座名は1行に収まる大きさ */
  .msb-salonb .ktb-fvc__photo img{ object-position:15% 0; }
  .ktb-fvc__box{ left:max(5vw, 60px); bottom:8%; width:min(58%, 580px); padding:40px 26px 32px; }
  .ktb-fvc__catch{ font-size:clamp(.78rem, 1.6vw, 1rem); letter-spacing:.14em; }
  .is-c .ktb-fv__ttl1, .is-c .ktb-fv__ttl2{ font-size:clamp(1.3rem, 3.5vw, 2.5rem); }
  .is-c .ktb-fv__ttl1{ letter-spacing:.06em; }
  .is-c .ktb-fv__ttl2{ letter-spacing:.28em; }
  .is-c .ktb-fv__meta{ align-items:center; }
  .is-c .ktb-fv__date{ padding-left:0; }
  .is-c.ktb-fv .ktb-fv__badge{ right:-34px; top:-50px; width:clamp(88px, 11vw, 120px); }
}
/* 横向きのタブレット：画面が低いので、ボックスを少し小さく */
@media (min-width:768px) and (max-width:1080px) and (orientation:landscape){
  .ktb-fvc__box{ width:min(52%, 560px); padding-top:36px; padding-bottom:28px; }
  .is-c .ktb-fv__ttl1, .is-c .ktb-fv__ttl2{ font-size:clamp(1.3rem, 3.1vw, 2.3rem); }
}
/* 600〜767px：左側が狭いので、スクロールの合図は出さず（スマホと同じ）、文字を少し内側に */
@media (min-width:600px) and (max-width:767px){
  .ktb-fv__scroll{ display:none; }
  .ktb-fva__en, .ktb-fva__body{ left:9vw; }
  .ktb-fvc__box{ left:5vw; }
}

/* ------------------------------------------------------------
   2. リード（面に入れず、地の上に大きく）
   ------------------------------------------------------------ */
.ktb-lead{ width:min(900px, 90%); margin:0 auto 96px; text-align:center; }
.ktb-lead__sub{
  display:inline-block; padding-bottom:.7em; border-bottom:1px solid var(--lg-navy);
  font-family:var(--msb-mincho); font-weight:500; font-size:clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing:.24em; color:var(--lg-navy);
}
.ktb-lead__main{
  margin-top:34px !important;
  font-family:var(--msb-mincho); font-weight:500;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem); line-height:2.1; letter-spacing:.16em; color:var(--lg-ink);
}
.ktb-lead__line{ display:block; }
.ktb-lead__main em{ font-style:normal; color:#A27A47; }

/* ------------------------------------------------------------
   3. メッセージ
   ------------------------------------------------------------ */
.ktb-msg__body{ max-width:620px; margin:0 auto; text-align:center; }
.ktb-msg__body p{
  font-family:var(--msb-mincho); font-weight:400;
  font-size:clamp(1rem, 1.4vw, 1.12rem); line-height:2.2; letter-spacing:.14em; color:var(--lg-ink);
}
.ktb-msg__body p + p{ margin-top:1.8em; }
.ktb-gold{ font-weight:700; color:#9C7644; }

/* ------------------------------------------------------------
   4. 共通の大きめの一文・締めの一文
   ------------------------------------------------------------ */
.ktb-big{
  margin-bottom:56px !important; text-align:center;
  font-family:var(--msb-mincho); font-weight:500;
  font-size:clamp(1.3rem, 2.1vw, 1.75rem); line-height:1.85; letter-spacing:.12em; color:var(--lg-navy);
}
.ktb-close{
  margin-top:48px !important; text-align:center;
  font-family:var(--msb-mincho); font-weight:500;
  font-size:clamp(1.08rem, 1.6vw, 1.25rem); line-height:2; letter-spacing:.1em; color:var(--ktb-brown-dk);
}
.lgb-text b{ font-weight:700; color:var(--ktb-brown-dk); }
.msb-kaotypeb .ktb-big.is-ink{ color:var(--lg-ink); }
.ktb-goldtxt{ font-weight:500; color:#9C7644; }
.ktb-adviser__cta{ margin-top:52px !important; text-align:center; }

/* ------------------------------------------------------------
   5. 顔タイプ診断とは／顔タイプ診断アドバイザーとは（1つのセクション）
   ------------------------------------------------------------ */
.ktb-about__part + .ktb-about__part{ margin-top:128px; padding-top:116px; border-top:1px solid var(--lg-line); }

/* 見出し（中央・上に細い縦線） */
.ktb-qttl{
  margin:0 0 52px !important; text-align:center;
  font-family:var(--msb-mincho) !important; font-weight:500 !important;
  font-size:clamp(1.7rem, 2.8vw, 2.4rem) !important; line-height:1.5 !important; letter-spacing:.14em; color:var(--lg-navy) !important;
}
.ktb-qttl__q{ margin-left:.06em; font-family:var(--lg-display); font-weight:400; color:#A27A47; }
.ktb-qttl::before{ content:"" !important; display:block; width:1px; height:56px; margin:0 auto 28px; background:#B48D58; }
.ktb-qttl__top{ margin-left:.15em; font-variant-numeric:lining-nums; font-family:var(--lg-display); font-weight:400; letter-spacing:.04em; color:#A27A47; }

.ktb-about__grid{
  display:grid; grid-template-columns:300px minmax(0,1fr); gap:56px; align-items:center;
  max-width:860px; margin:0 auto;
}
.ktb-about__face{ aspect-ratio:1 / 1; border-radius:50%; }
.ktb-about__face img{ height:100%; object-fit:cover; }

/* 8タイプ分類：大きく・文字をはっきり */
.ktb-chart-wrap{ max-width:780px; margin:104px auto 0; }
.ktb-chart__ttl{
  margin-bottom:28px !important; text-align:center;
  font-family:var(--msb-mincho); font-weight:600; font-size:1.25rem; letter-spacing:.16em; color:var(--lg-ink);
}
.ktb-chart{
  position:relative; aspect-ratio:1 / .8; margin:0 auto;
  background:rgba(255,255,255,.7); border:1px solid rgba(206,182,140,.45); border-radius:8px;
}
.ktb-chart__ax{ position:absolute; background:rgba(74,59,44,.5); }
.ktb-chart__ax.is-v{ left:50%; top:9%; bottom:9%; width:1px; }
.ktb-chart__ax.is-h{ top:45%; left:8%; right:8%; height:1px; }
.ktb-chart__lb{
  position:absolute; padding:.2em .85em; white-space:nowrap; background:#fff; border:1px solid rgba(74,59,44,.45);
  font-family:var(--msb-gothic); font-weight:500; font-size:.98rem; letter-spacing:.12em; line-height:1.5; color:var(--lg-ink);
  transform:translate(-50%, -50%);
}
.ktb-chart__lb.is-top{ left:50%; top:6%; }
.ktb-chart__lb.is-bottom{ left:50%; top:94%; }
.ktb-chart__lb.is-left{ left:6.5%; top:45%; }
.ktb-chart__lb.is-right{ left:93.5%; top:45%; }
.ktb-chart__type{
  position:absolute; transform:translate(-50%, -50%); white-space:nowrap;
  display:flex; align-items:center; justify-content:center; min-width:7.6em; min-height:2.9em; padding:.45em 1.1em;
  background:var(--c); border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
  font-family:var(--msb-gothic); font-weight:500; font-size:1.04rem; line-height:1.35; letter-spacing:.06em; text-align:center; color:#2F2A26;
}

/* 似合うテイスト */
.ktb-taste{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;
  max-width:880px; margin:104px auto 0;
}
.ktb-taste__lead{
  font-family:var(--msb-mincho); font-weight:500; font-size:1.18rem; letter-spacing:.12em; color:var(--lg-ink);
}
.ktb-taste__txt{
  font-family:var(--msb-gothic); font-size:1.02rem; line-height:2.05; letter-spacing:.06em; color:var(--lg-ink);
}
.ktb-taste__photo{ aspect-ratio:584 / 385; }
.ktb-taste__photo img{ height:100%; object-fit:cover; }

/* 「服の形」など：一行に並べ、頭に小さなゴールドの点（ボタンに見えない形） */
.ktb-tags{ list-style:none; margin:26px 0 24px !important; }
.ktb-tags li{ font-family:var(--msb-mincho); font-weight:500; color:var(--lg-ink); white-space:nowrap; }
.ktb-tags{ display:flex; flex-wrap:wrap; gap:.3em 1.5em; }
.ktb-tags li{ display:flex; align-items:center; gap:.5em; font-size:1.2rem; line-height:1.8; letter-spacing:.1em; white-space:nowrap; }
.ktb-tags li::before{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#B48D58; }

/* 印象の話（2つの段落を同じデザインに） */
.ktb-impression{ max-width:720px; margin:96px auto 0; padding-top:76px; border-top:1px solid var(--lg-line); text-align:center; }
.ktb-impression p{
  font-family:var(--msb-gothic); font-size:1.0625rem; line-height:2.15; letter-spacing:.06em; color:var(--lg-ink);
}
.ktb-impression p + p{ margin-top:1.4em; }

/* アドバイザーとは */
.ktb-adviser__photo{ max-width:620px; margin:0 auto 56px !important; aspect-ratio:3 / 2; }
.ktb-adviser__photo img{ height:100%; object-fit:cover; }

/* ------------------------------------------------------------
   7. 受講する理由TOP3（写真と文章を左右交互に）
   ------------------------------------------------------------ */
.ktb-qttl--reasons{ font-size:clamp(1.5rem, 2.4vw, 2.1rem) !important; line-height:1.7 !important; margin-bottom:72px !important; }
.ktb-reasons__list{ max-width:900px; margin:0 auto; }
.ktb-reason{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:52px; align-items:center;
}
.ktb-reason + .ktb-reason{ margin-top:88px; padding-top:88px; border-top:1px solid var(--lg-line); }
.ktb-reason:nth-child(even) .ktb-reason__photo{ order:2; }
.ktb-reason__photo{ aspect-ratio:3 / 2; }
.ktb-reason__photo img{ height:100%; object-fit:cover; }
.ktb-reason__no{
  display:flex; align-items:baseline; gap:.4em;
  font-variant-numeric:lining-nums; font-family:var(--lg-display); font-size:2.6rem; line-height:1; color:#A27A47;
}
.ktb-reason__no small{ font-style:italic; font-size:.38em; letter-spacing:.14em; color:var(--lg-navy); }
.ktb-reason__ttl{
  margin-top:16px !important;
  font-family:var(--msb-mincho) !important; font-weight:500 !important;
  font-size:clamp(1.2rem, 1.9vw, 1.45rem) !important; line-height:1.7 !important; letter-spacing:.1em; color:var(--lg-navy) !important;
}
.ktb-reason__txt{ margin-top:20px; }
.ktb-reason__txt p{
  font-family:var(--msb-gothic); font-size:.98rem; line-height:2.05; letter-spacing:.05em; color:var(--lg-ink);
}
.ktb-reason__txt p + p{ margin-top:1em; }
.ktb-reason__txt b{ font-weight:700; color:var(--ktb-brown-dk); }
.ktb-reason__txt .ktb-reason__ref{ font-size:.78rem; line-height:1.8; color:#857A6F; }

/* ------------------------------------------------------------
   8. 講座概要（見出しを左、内容を右。msb-salon-b.css の .lgb-policy を使う）
   ------------------------------------------------------------ */
.lgb-col.ktb-outline__list{ max-width:860px; }
.ktb-outline__list .lgb-policy__item{ grid-template-columns:180px minmax(0,1fr); }
.ktb-outline__list .lgb-policy__item h3{ color:var(--lg-navy) !important; }
.ktb-outline__list .lgb-policy__item h3 small{
  display:block; margin-top:.3em; font-size:.8em; letter-spacing:.1em; color:var(--ktb-brown-dk);
}
.ktb-dates{ list-style:none; }
.ktb-dates li{
  font-variant-numeric:lining-nums; font-family:var(--msb-gothic); font-weight:500; font-size:1.02rem; line-height:2; letter-spacing:.06em; color:var(--lg-ink);
}
.ktb-venue p, .ktb-venue li{
  font-family:var(--msb-gothic); font-size:.96rem; line-height:1.95; letter-spacing:.04em; color:var(--lg-ink);
}
.ktb-venue .ktb-venue__name{ font-weight:500; font-size:1.02rem; }
.ktb-venue__name small{ display:inline-block; margin-left:.4em; font-size:.86em; color:#857A6F; }
.ktb-venue__access{ list-style:none; margin-top:.6em !important; }
.ktb-venue__access li{ position:relative; padding-left:1.1em; font-size:.9rem; color:#5B534B; }
.ktb-venue__access li::before{ content:""; position:absolute; left:.15em; top:.9em; width:4px; height:4px; border-radius:50%; background:#B48D58; }
.ktb-venue .ktb-venue__link{ margin-top:14px; font-size:.9rem; }
.ktb-price table{ width:100%; border-collapse:collapse; }
.ktb-price th, .ktb-price td{
  padding:.55em 0; text-align:left; vertical-align:baseline; border-bottom:1px dashed rgba(206,182,140,.6);
  font-variant-numeric:lining-nums; font-family:var(--msb-gothic); font-size:.98rem; letter-spacing:.04em; color:var(--lg-ink);
}
.ktb-price th{ width:9em; padding-right:1em; font-weight:500; }
.ktb-price td small{ margin-left:.4em; font-size:.86em; color:#857A6F; }
.ktb-price .is-total th, .ktb-price .is-total td{
  padding-top:.9em; border-bottom:0; font-family:var(--msb-mincho); font-weight:600; font-size:1.15rem; color:var(--lg-navy);
}
.ktb-price__note{
  margin-top:18px !important; padding:14px 18px; border-radius:6px; background:rgba(187,141,94,.1);
  font-family:var(--msb-gothic); font-size:.9rem; line-height:1.9; letter-spacing:.03em; color:var(--lg-ink);
}
.ktb-price__note b{ font-weight:700; color:var(--ktb-brown-dk); }
.ktb-outline__cta{ margin-top:64px; text-align:center; }
.msb-kaotypeb .lgb-btn{ white-space:nowrap; }
.ktb-outline__note{
  margin-top:16px !important; font-family:var(--msb-gothic); font-size:.86rem; letter-spacing:.06em; color:#5B534B;
}

/* ------------------------------------------------------------
   9. 講師紹介：見出しを上に、写真の横に名前
   ------------------------------------------------------------ */
.ktb-pf__top{
  display:grid; grid-template-columns:240px auto; gap:52px; align-items:center; justify-content:center;
  margin-bottom:64px;
}
.ktb-pf__top .lgb-pf__photo{ width:240px; }
.ktb-pf__name .lgb-pf__jp{ margin:0 0 .75em !important; }
.ktb-pf__name .lgb-pf__role{ line-height:2; }
.ktb-pf__h{
  display:flex; align-items:center; gap:16px; margin:60px 0 22px !important;
  font-family:var(--msb-mincho) !important; font-weight:500 !important; font-size:1.12rem !important;
  letter-spacing:.16em; color:var(--lg-navy) !important;
}
.ktb-pf__h::after{ content:"" !important; flex:1; height:1px; background:var(--lg-line); }
.lgb-col > .ktb-pf__h:first-child{ margin-top:0 !important; }
.ktb-pf__list{ margin-top:0 !important; }
.ktb-pf__list li small{ display:block; font-size:.86em; color:#857A6F; }

.ktb-book{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:32px; align-items:center;
  margin:64px 0 0; padding:30px 32px; border-radius:10px;
  background:rgba(255,255,255,.66); border:1px solid rgba(206,182,140,.42);
}
.ktb-book__cover{ box-shadow:0 18px 30px -20px rgba(80,52,22,.5); }
.ktb-book__lb{
  display:inline-block; padding:.2em 1em; border:1px solid rgba(162,122,71,.5); border-radius:999px;
  font-family:var(--msb-gothic); font-size:.74rem; letter-spacing:.16em; color:var(--ktb-brown-dk);
}
.ktb-book__ttl{
  margin-top:12px !important;
  font-family:var(--msb-mincho); font-weight:600; font-size:1.2rem; line-height:1.7; letter-spacing:.08em; color:var(--lg-navy);
}
.ktb-book__pub{ margin-top:4px !important; font-family:var(--msb-gothic); font-size:.86rem; letter-spacing:.08em; color:#5B534B; }
.ktb-book__links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px !important; }
.ktb-book__links a{
  font-family:var(--msb-gothic); font-size:.88rem; letter-spacing:.06em; color:var(--lg-ink); text-decoration:none;
  border-bottom:1px solid rgba(143,106,55,.45); padding-bottom:2px; transition:color .3s ease;
}
.ktb-book__links a:hover{ color:var(--lg-brown); }

/* ------------------------------------------------------------
   10. 締め（お申込みボタンだけ）
   ------------------------------------------------------------ */
.lgb-closing.ktb-closing{ padding:8px 6% 120px; }

/* ------------------------------------------------------------
   11. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width:959px){
  .ktb-about__grid{ grid-template-columns:240px minmax(0,1fr); gap:40px; }
  .ktb-reason{ gap:36px; }
}

@media (max-width:767px){
  .ktb-lead{ width:90%; margin-bottom:56px; }
  .ktb-lead__sub{ font-size:1rem; letter-spacing:.14em; }
  .ktb-lead__main{ margin-top:24px !important; font-size:clamp(1rem, 4.5vw, 1.2rem); line-height:2.05; letter-spacing:.06em; }

  .ktb-msg__body p{ font-size:.98rem; letter-spacing:.06em; line-height:2.1; }

  .ktb-big{ margin-bottom:40px !important; font-size:1.18rem; letter-spacing:.06em; }
  .ktb-close{ margin-top:36px !important; font-size:1.04rem; letter-spacing:.05em; }
  .ktb-adviser__cta{ margin-top:40px !important; }

  .ktb-about__part + .ktb-about__part{ margin-top:88px; padding-top:80px; }
  .ktb-qttl{ margin-bottom:40px !important; font-size:1.5rem !important; letter-spacing:.08em; }
  .ktb-qttl::before{ height:44px; margin-bottom:22px; }
  .ktb-qttl--reasons{ font-size:1.32rem !important; letter-spacing:.06em; }
  .ktb-about__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .ktb-about__face{ width:200px; margin:0 auto !important; }
  .ktb-chart-wrap{ margin:72px -10px 0; }
  .ktb-chart__ttl{ font-size:1.08rem; letter-spacing:.08em; }
  .ktb-chart{ aspect-ratio:1 / 1.06; }
  .ktb-chart__ax.is-h{ left:9%; right:9%; }
  .ktb-chart__type{ min-width:0; min-height:2.5em; padding:.35em .75em; font-size:.8rem; letter-spacing:.02em; }
  .ktb-chart__lb{ padding:.15em .5em; font-size:.76rem; letter-spacing:.06em; }
  .ktb-chart__lb.is-left{ left:7%; }
  .ktb-chart__lb.is-right{ left:93%; }
  .ktb-taste{ grid-template-columns:minmax(0,1fr); gap:32px; margin-top:72px; }
  .ktb-taste__body{ text-align:center; }
  .ktb-taste__lead{ font-size:1.08rem; letter-spacing:.08em; }
  .ktb-tags{ justify-content:center; gap:.3em 1.2em; }
  .ktb-tags li{ font-size:1.04rem; letter-spacing:.06em; }
  .ktb-taste__txt{ font-size:.94rem; letter-spacing:.03em; }
  .ktb-taste__photo{ margin:0 -22px !important; }
  .ktb-impression{ margin-top:64px; padding-top:56px; }
  .ktb-impression p{ font-size:.95rem; line-height:2.05; letter-spacing:.03em; }

  .ktb-adviser__photo{ margin:0 -22px 40px !important; max-width:none; }

  .ktb-reason, .ktb-reason:nth-child(even){ grid-template-columns:minmax(0,1fr); gap:24px; }
  .ktb-reason:nth-child(even) .ktb-reason__photo{ order:0; }
  .ktb-reason + .ktb-reason{ margin-top:56px; padding-top:56px; }
  .ktb-reason__photo{ margin:0 -22px !important; }
  .ktb-reason__no{ font-size:2.2rem; }
  .ktb-reason__ttl{ font-size:1.16rem !important; letter-spacing:.06em; }
  .ktb-reason__txt p{ font-size:.94rem; line-height:2; letter-spacing:.03em; }

  .ktb-outline__list .lgb-policy__item{ grid-template-columns:minmax(0,1fr); }
  .ktb-outline__list .lgb-policy__item h3 small{ display:inline; margin:0 0 0 .8em; }
  .ktb-dates li{ font-size:.95rem; letter-spacing:.03em; }
  .ktb-venue p, .ktb-venue li{ font-size:.9rem; }
  .ktb-price th, .ktb-price td{ font-size:.9rem; }
  .ktb-price th{ width:7.6em; }
  .ktb-price td small{ display:block; margin:0; }
  .ktb-price .is-total th, .ktb-price .is-total td{ font-size:1.05rem; }
  .ktb-price__note{ font-size:.84rem; padding:12px 14px; }
  .ktb-outline__cta{ margin-top:48px; }
  .msb-salonb.msb-kaotypeb .lgb-btn{ font-size:.92rem; letter-spacing:.06em; padding:.9em .8em .9em 1.7em; gap:.9em; }

  .ktb-pf__top{ grid-template-columns:minmax(0,1fr); gap:28px; justify-items:center; text-align:center; margin-bottom:44px; }
  .ktb-pf__top .lgb-pf__photo{ width:220px; }
  .ktb-pf__name{ display:flex; flex-direction:column; }
  .ktb-pf__name .lgb-pf__jp{ order:2; margin:.6em 0 0 !important; }
  .ktb-pf__name .lgb-pf__role{ font-size:.92rem; letter-spacing:.06em; }
  .ktb-pf__h{ margin:48px 0 18px !important; font-size:1.04rem !important; }
  .ktb-book{ grid-template-columns:110px minmax(0,1fr); gap:20px; padding:22px 18px; margin-top:48px; }
  .ktb-book__ttl{ font-size:1.02rem; letter-spacing:.04em; }

  .lgb-closing.ktb-closing{ padding:0 6% 100px; }
}

@media (prefers-reduced-motion:reduce){
  .ktb-fv *, .ktb-fv__scroll::after{ animation:none !important; }
}

/* ------------------------------------------------------------
   12. トップ画像 B案の修正（2026.10）
   ・PCの写真を kv-b.webp に差し替え（緑のボケを除き、肌を明るく補正し、人物の近くで切り抜き）。
     講座名と人物の間の空白をなくし、写真の左端は左の面へなじませる
   ・アニメを速く（文字は 0.2〜1.2秒のうちに順に表示）
   ------------------------------------------------------------ */
@keyframes ktbTtl{
  from{ opacity:0; filter:blur(4px); transform:translateY(12px); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
.msb-salonb .ktb-fvb__photo img{ animation-duration:1.6s; }
.ktb-fvb__en{ animation:lgbRise .9s var(--lg-ease) .2s both; }
.ktb-fvb__l1, .ktb-fvb__l2, .ktb-fvb__l3{ animation-duration:1s; }
.ktb-fvb__l1{ animation-delay:.3s; }
.ktb-fvb__l2{ animation-delay:.42s; }
.ktb-fvb__l3{ animation-delay:.54s; }
.is-b .ktb-fv__meta{ animation:lgbRise .9s var(--lg-ease) .75s both; }
.ktb-fvb__seal{ animation:lgbRise 1s var(--lg-ease) .9s both; }
.ktb-fv__scroll{ animation:lgbRise .9s var(--lg-ease) 1.2s both; }

@media (min-width:600px){
  .msb-salonb .ktb-fvb__photo img{ object-position:40% 0; }
  .ktb-fvb__photo{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px);
            mask-image:linear-gradient(90deg, transparent 0, #000 64px);
  }
}

/* ------------------------------------------------------------
   13. PCで読みやすく（2026.10 修正）※ 共通部分は msb-salon-b.css の 16.
   ・中央揃えのメッセージ・印象の文は幅を広げて1行を長めに
   ・行間と、段落・ブロックの間を少し詰める
   ------------------------------------------------------------ */
@media (min-width:768px){
  .ktb-msg__body{ max-width:720px; }
  .ktb-msg__body p{ line-height:2.05; }
  .ktb-msg__body p + p{ margin-top:1.3em; }
  .ktb-big{ margin-bottom:44px !important; }
  .ktb-qttl{ margin-bottom:44px !important; }
  .ktb-qttl--reasons{ margin-bottom:56px !important; }
  .ktb-about__part + .ktb-about__part{ margin-top:96px; padding-top:88px; }
  .ktb-chart-wrap{ margin-top:80px; }
  .ktb-taste{ margin-top:80px; }
  .ktb-taste__txt{ line-height:1.95; }
  .ktb-impression{ max-width:760px; margin-top:72px; padding-top:60px; }
  .ktb-impression p{ line-height:2; letter-spacing:.04em; }
  .ktb-impression p + p{ margin-top:1em; }
  .ktb-adviser__photo{ margin-bottom:48px !important; }
  .ktb-adviser__cta{ margin-top:44px !important; }
  .ktb-reason + .ktb-reason{ margin-top:64px; padding-top:64px; }
  .ktb-reason__txt p{ line-height:1.9; letter-spacing:.04em; }
  .ktb-reason__txt p + p{ margin-top:.8em; }
  .ktb-price__note{ line-height:1.85; }
  .ktb-outline__cta{ margin-top:52px; }
  .ktb-pf__top{ margin-bottom:52px; }
  .ktb-pf__h{ margin-top:48px !important; }
  .ktb-book{ margin-top:52px; }
}