@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ トップページ専用
   置き場所: swell_child/assets/css/msb-top.css
   ※ msb-common.css の後に読み込まれる前提
   ============================================================ */

/* ------------------------------------------------------------
   0. ページ全体（SWELLの本文幅を解除してフル幅にする）
   ------------------------------------------------------------ */
.msb-top{ width:100%; max-width:none; margin:0; padding:0; }
.msb-top .msb-wrap{ width:min(1240px, 92%); margin-inline:auto; }
.msb-top .msb-section{ padding:110px 0; position:relative; }
.msb-top img{ display:block; max-width:100%; }
.msb-top ul{ list-style:none; margin:0; padding:0; }
.msb-top a{ text-decoration:none; }

/* アンカー位置の調整（固定ヘッダー分） */
#jikuiro, #purpose, #pro, #consulting, #salon, #about,
#event, #works, #information{ scroll-margin-top:104px; }

/* 見出し */
.msb-top .sec-head{ text-align:left; margin-bottom:52px; }
.msb-top .sec-head .en{
  display:block; font-family:var(--msb-serif); font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.1;
  letter-spacing:.04em; color:var(--msb-navy); margin-bottom:.1em;
}
.msb-top .sec-head .jp{
  display:inline-flex; align-items:center; gap:14px; margin-bottom:1.2em;
  font-family:var(--msb-mincho); font-size:.82rem;
  letter-spacing:.3em; color:var(--msb-muted);
}
.msb-top .sec-head .jp::before{ content:""; width:44px; height:1px; background:var(--msb-gold); }
.msb-top .sec-lead{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:1rem; max-width:640px; line-height:2;
}
.msb-top .lead-note{
  display:inline-block; font-size:.8rem; color:var(--msb-gold-deep); margin-top:.4em;
}
.msb-top .sec-cta{ text-align:center; margin-top:64px; }
.msb-top .more{ text-align:center; margin-top:44px; }

.msb-btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:1em;
  min-width:420px; max-width:100%; border-radius:999px;
  border:1px solid transparent; color:var(--msb-navy);
  background:linear-gradient(#FDFBF7,#FDFBF7) padding-box,
             linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
  font-family:var(--msb-mincho); font-weight:500; letter-spacing:.16em;
  padding:1.05em 2em; transition:background .3s ease;
}
.msb-btn-outline:hover{
  background:linear-gradient(100deg,#FFF4E4,#FCE8CE) padding-box,
             linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
}

/* ------------------------------------------------------------
   1. ヒーロー ─ 共通パーツ
   ------------------------------------------------------------ */
.msb-hero{ position:relative; overflow:hidden; }
.msb-hero .msb-wrap{ width:min(1400px, 94%); }
.hero-copy{ max-width:560px; }
.hero-role{
  font-family:var(--msb-gothic); font-weight:400; letter-spacing:.12em;
  font-size:.76rem; color:var(--msb-muted); margin-bottom:1.6em;
}
.hero-role::before{
  content:""; display:inline-block; width:26px; height:1px;
  background:var(--msb-gold); vertical-align:middle; margin-right:.8em;
}
.hero-headline{
  font-family:var(--msb-mincho); font-weight:500; color:#33333B;
  line-height:1.46; letter-spacing:.02em;
  font-size:clamp(1.9rem, 3.3vw, 2.9rem); margin:0;
}
.hero-headline .line{ display:block; white-space:nowrap; }
.tx-gold{
  background:linear-gradient(105deg,#B98A45 0%, #DABF8B 45%, #C09455 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.98rem; line-height:2; margin-top:1.4em;
}

/* ------------------------------------------------------------
   1-A. Aパターン（左＝写真／右＝4導線）
   ------------------------------------------------------------ */
.msb-hero.-side .hero-inner{
  display:grid; grid-template-columns:1fr 1.02fr;
  align-items:center; gap:56px; min-height:640px; padding:56px 0;
}
.msb-hero.-side .hero-left{ display:flex; flex-direction:column; }
.msb-hero.-side .hero-copy{ margin-top:30px; }
.msb-hero.-side .hero-visual{ position:relative; }
.msb-hero.-side .hero-visual::before{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--msb-gold-soft); border-radius:4px; pointer-events:none;
}
.msb-hero.-side .hero-photo{
  position:relative; aspect-ratio:5/4; overflow:hidden; border-radius:4px;
  box-shadow:0 30px 60px -34px rgba(110,147,180,.45);
}
.msb-hero.-side .hero-photo img{ width:100%; height:100%; object-fit:cover; }
.msb-hero.-side .hero-script{
  position:absolute; top:0; right:-8px;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--msb-script); font-size:1.5rem; color:var(--msb-gold);
  letter-spacing:.06em; opacity:.9; user-select:none;
}

/* ------------------------------------------------------------
   1-B. Bパターン（人物写真を背景に全画面）
   ------------------------------------------------------------ */
.msb-hero.-bg{ min-height:min(92vh, 860px); display:flex; align-items:center; }
.msb-hero.-bg .msb-wrap{ position:relative; z-index:2; flex:0 0 auto; }
.msb-hero.-bg .hero-bgimg{ position:absolute; inset:0; z-index:0; }
.msb-hero.-bg .hero-bgimg img{
  /* ★被写体の左右位置：margin-left（マイナス＝左へ）
     ★上下位置：object-position の2つ目の数値 */
  width:112%; margin-left:-12%;
  height:100%; object-fit:cover; object-position:center 20%;
}
.msb-hero.-bg .hero-bgimg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(253,251,247,.95) 0%, rgba(253,251,247,.82) 26%,
      rgba(253,251,247,.42) 44%, rgba(253,251,247,.30) 56%,
      rgba(253,251,247,.72) 76%, rgba(253,251,247,.94) 100%),
    linear-gradient(180deg, rgba(253,251,247,.55) 0%, transparent 22%,
      transparent 78%, rgba(253,251,247,.8) 100%);
}
.msb-hero.-bg .hero-inner{
  display:grid; grid-template-columns:1fr 1.04fr;
  align-items:center; gap:56px; padding:74px 0;
}
.msb-hero.-bg .hero-script{
  display:block; font-family:var(--msb-script); font-size:1.7rem;
  color:var(--msb-gold); letter-spacing:.04em; margin-bottom:.5em;
}
.msb-hero.-bg .hero-nav{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.8); border-radius:20px;
  padding:18px 22px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -34px rgba(150,130,90,.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .msb-hero.-bg .hero-nav{ background:rgba(255,255,255,.88); }
}

/* ------------------------------------------------------------
   2. 目的から選ぶ（4分割）
   ------------------------------------------------------------ */
.hero-nav{ align-self:center; }
.fv-band{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:2px 0 20px; margin-bottom:4px;
}
.fv-band::before, .fv-band::after{
  content:""; width:46px; height:1px; background:var(--msb-gold-soft); flex-shrink:0;
}
.fv-band .t{
  font-family:var(--msb-mincho); font-weight:600; font-size:1.2rem;
  letter-spacing:.3em; color:#3A3A42; padding-left:.3em;
}
.fv-cross{ display:grid; grid-template-columns:1fr 1fr; border-radius:14px; overflow:hidden; }
.fq{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  min-height:216px; padding:34px 26px; overflow:hidden;
  background:linear-gradient(155deg, var(--tint) 0%, rgba(255,255,255,0) 72%);
  transition:background .35s ease;
}
.fq:nth-child(2n){ border-left:1px solid var(--msb-gold-soft); }
.fq:nth-child(n+3){ border-top:1px solid var(--msb-gold-soft); }
.fq:hover{ background:linear-gradient(155deg, var(--tintH) 0%, rgba(255,255,255,.18) 78%); }
.fq1{ --tint:rgba(189,154,95,.10);  --tintH:rgba(189,154,95,.20); }
.fq2{ --tint:rgba(30,44,79,.07);    --tintH:rgba(30,44,79,.14); }
.fq3{ --tint:rgba(158,133,120,.10); --tintH:rgba(158,133,120,.20); }
.fq4{ --tint:rgba(169,131,143,.10); --tintH:rgba(169,131,143,.19); }

.fq-ic{
  position:absolute; top:12px; left:12px; z-index:0;
  width:78px; height:78px; opacity:.11; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.fq-ic svg{ width:100%; height:100%; }
.fq:hover .fq-ic{ opacity:.2; transform:translateY(-3px); }
.fq1 .fq-ic{ color:var(--msb-ac1); }
.fq2 .fq-ic{ color:var(--msb-ac2); }
.fq3 .fq-ic{ color:var(--msb-ac3); }
.fq4 .fq-ic{ color:var(--msb-ac4); }

.fq-lb{
  position:relative; z-index:1;
  font-family:var(--msb-mincho); font-weight:700; font-size:1.24rem;
  letter-spacing:.03em; color:var(--msb-ink); line-height:1.5; margin-bottom:10px;
}
.fq-lb .sp{ display:none; }
.fq-lb .kw{ font-weight:700; }
.fq1 .fq-lb .kw{ color:var(--msb-ac1); }
.fq2 .fq-lb .kw{ color:var(--msb-ac2); }
.fq3 .fq-lb .kw{ color:#8A6E60; }
.fq4 .fq-lb .kw{ color:#96707D; }

.fq-ds{
  position:relative; z-index:1;
  font-family:var(--msb-gothic); font-size:.9rem; color:var(--msb-muted);
  line-height:1.95; letter-spacing:.01em;
}
.fq-go{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.6em; margin-top:16px;
  font-family:var(--msb-mincho); font-weight:600; font-size:.9rem; letter-spacing:.08em;
  color:var(--msb-navy);
  border-bottom:1px solid var(--msb-gold-soft); padding-bottom:4px;
  transition:border-color .3s ease;
}
.fq-go em{
  font-style:normal; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; color:#fff; font-size:.82rem;
  transition:transform .35s ease;
}
.fq1 .fq-go em{ background:var(--msb-ac1); }
.fq2 .fq-go em{ background:var(--msb-ac2); }
.fq3 .fq-go em{ background:var(--msb-ac3); }
.fq4 .fq-go em{ background:var(--msb-ac4); }
.fq:hover .fq-go{ border-color:var(--msb-gold); }
.fq:hover .fq-go em{ transform:translateX(5px); }

.fq-ghost{
  position:absolute; right:12px; bottom:-22px; z-index:0;
  font-family:var(--msb-serif); font-style:italic;
  font-size:5.6rem; line-height:1; pointer-events:none; user-select:none;
  transition:opacity .35s ease;
}
.fq1 .fq-ghost{ color:rgba(189,154,95,.13); }
.fq2 .fq-ghost{ color:rgba(30,44,79,.08); }
.fq3 .fq-ghost{ color:rgba(158,133,120,.13); }
.fq4 .fq-ghost{ color:rgba(169,131,143,.13); }
.fq:hover .fq-ghost{ opacity:.7; }

/* ------------------------------------------------------------
   3. 流れる英字
   ------------------------------------------------------------ */
.msb-marquee{ overflow:hidden; contain:paint; padding:26px 0; }
.msb-marquee .track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:msb-mq 46s linear infinite;
}
.msb-marquee .track span{
  font-family:var(--msb-serif); font-style:italic;
  font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1;
  color:rgba(189,154,95,.22); letter-spacing:.05em; padding-right:1.4em;
}
@keyframes msb-mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .msb-marquee .track{ animation:none; } }

/* ------------------------------------------------------------
   4. 軸色®セクション
   ------------------------------------------------------------ */
.jikuiro-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:start; }
.jiku-sticky{ position:sticky; top:120px; }
.head-swap .jp-main{
  display:block; font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.3rem); letter-spacing:.14em;
  color:var(--msb-ink); line-height:1.15;
}
.head-swap .en-sub{
  display:inline-flex; align-items:center; gap:14px; margin-top:.5em;
  font-family:var(--msb-serif); font-style:italic; font-size:1.05rem;
  letter-spacing:.14em; color:var(--msb-muted); margin-bottom:1.2em;
}
.head-swap .en-sub::before{ content:""; width:44px; height:1px; background:var(--msb-gold); }
.jikuiro-lead{ max-width:680px; margin:0 0 52px; }
.jikuiro-lead h2{
  font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--msb-ink);
  letter-spacing:.04em; margin-bottom:1em; line-height:1.6;
}
.jikuiro-lead p{ font-family:var(--msb-mincho); color:var(--msb-muted); font-size:1rem; line-height:2.1; }
.jikuiro-lead .by{
  display:inline-block; margin-top:1.6em;
  font-family:var(--msb-serif); font-style:italic; color:var(--msb-gold);
  letter-spacing:.06em; font-size:.95rem;
}
.jiku-word{
  font-weight:600;
  background:linear-gradient(105deg,#B98A45 0%, #DABF8B 40%, #C09455 70%, #E3C388 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jiku-yomi{ font-size:.55em; color:var(--msb-muted); font-weight:400; letter-spacing:.06em; }
.jikuiro-types{ display:grid; gap:30px; }
.jiku-card{
  position:relative; border-radius:18px; padding:44px 46px 40px;
  outline:1px solid rgba(200,170,110,.45); outline-offset:-8px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
}
.jiku-card::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
.jiku-tag{ font-family:var(--msb-serif); font-style:italic; letter-spacing:.1em; font-size:.9rem; color:var(--msb-gold); }
.jiku-card h3{
  font-family:var(--msb-mincho); font-weight:600; font-size:clamp(1.2rem,3.6vw,1.5rem);
  color:var(--msb-ink); letter-spacing:.06em; margin:.2em 0 .6em;
}
.jiku-card p{ font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.94rem; line-height:1.95; }
.jiku-swatches{ display:flex; gap:12px; margin-top:26px; }
.jiku-swatches span{
  width:38px; height:38px; border-radius:50%;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75), 0 6px 14px -6px rgba(0,0,0,.25);
}
.jikuiro-cta{ text-align:center; margin-top:56px; }
.jikuiro-more-note{
  max-width:640px; margin:0 0 26px;
  font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.9rem; line-height:1.9;
}

/* ------------------------------------------------------------
   5. プロ向け講座
   ------------------------------------------------------------ */
.pro-list{ border-top:1px solid var(--msb-line); }
.pro-row{
  display:grid; grid-template-columns:200px 1fr 60px; gap:28px; align-items:center;
  padding:34px 6px; border-bottom:1px solid var(--msb-line);
  transition:background .35s ease, padding .35s ease;
}
.pro-row:hover{ background:rgba(255,255,255,.55); padding-left:18px; }
.pr-tag{ font-family:var(--msb-serif); font-style:italic; letter-spacing:.08em; font-size:.92rem; color:var(--msb-gold-deep); }
.pr-name{
  display:block; font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--msb-ink);
  line-height:1.65; margin-bottom:.5em;
}
.pr-desc{ display:block; font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.92rem; line-height:1.9; }
.pr-arrow{ justify-self:end; color:var(--msb-gold); font-size:1.3rem; transition:transform .35s ease; }
.pro-row:hover .pr-arrow{ transform:translateX(6px); }

/* ------------------------------------------------------------
   6. オンラインサロン
   ------------------------------------------------------------ */
.salon-section{
  background-repeat:no-repeat; background-size:cover;
  background-position:center 30%; background-color:var(--msb-cream);
  position:relative;
}
.salon-section::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(253,251,247,.55), rgba(253,251,247,.55));
}
.salon-section > .msb-wrap{ position:relative; z-index:1; }
.salon-card{
  position:relative; max-width:640px; border-radius:20px; padding:52px 54px 48px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
}
.salon-name{
  font-family:var(--msb-serif); font-weight:500;
  font-size:clamp(1.9rem,5.5vw,2.6rem); color:var(--msb-ink);
  letter-spacing:.04em; margin:0 0 .6em;
}
.salon-name span{
  font-family:var(--msb-mincho); font-size:.9rem; color:var(--msb-gold-deep);
  letter-spacing:.24em; margin-left:1em;
}
.salon-lead{ font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.96rem; line-height:2; margin-bottom:1.6em; }
.salon-benefits{ margin-bottom:2em; }
.salon-benefits li{
  font-family:var(--msb-mincho); font-size:.94rem; color:var(--msb-ink);
  padding:10px 0; border-bottom:1px solid var(--msb-line);
}
.sb-mark{ color:var(--msb-gold); font-size:.6rem; margin-right:.8em; vertical-align:middle; }

/* ------------------------------------------------------------
   7. About（谷口美佳）
   ------------------------------------------------------------ */
.about-inner{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:24px 56px;
  grid-template-areas:"photo head" "photo body";
  grid-template-rows:auto 1fr; align-items:start;
}
.about-head{ grid-area:head; margin-bottom:0; align-self:end; }
.about-photo{
  grid-area:photo; aspect-ratio:5/6; overflow:hidden; border-radius:8px;
  box-shadow:0 24px 60px -34px rgba(30,44,79,.4);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-body{ grid-area:body; }
.about-role{
  font-family:var(--msb-gothic); letter-spacing:.1em;
  font-size:.82rem; color:var(--msb-navy); margin-bottom:.5em;
}
.about-name{
  font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(1.5rem,4.6vw,2rem); color:var(--msb-ink);
  letter-spacing:.06em; margin:0 0 .8em;
}
.about-name span{
  font-family:var(--msb-serif); font-style:italic; font-weight:400;
  font-size:.9rem; color:var(--msb-gold-deep); letter-spacing:.1em; margin-left:1em;
}
.about-lead{ font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.96rem; line-height:2; margin-bottom:1.8em; }
.about-credits{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-bottom:2em; }
.about-credits li{
  font-family:var(--msb-mincho); font-size:.9rem; color:var(--msb-ink);
  padding-bottom:10px; border-bottom:1px solid var(--msb-line);
}
.ac-label{
  display:inline-block; min-width:4.5em;
  font-family:var(--msb-gothic); font-size:.72rem; letter-spacing:.1em;
  color:var(--msb-gold-deep); margin-right:.8em;
}

/* ------------------------------------------------------------
   8. イベント／活動実績カード
   ------------------------------------------------------------ */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.msb-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
  transition:transform .35s ease, box-shadow .35s ease;
}
.msb-card:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -26px rgba(110,147,180,.5); }
.card-thumb{ aspect-ratio:16/10; overflow:hidden; background:#E9E1D2; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.msb-card:hover .card-thumb img{ transform:scale(1.04); }
.card-cat{
  align-self:flex-start; margin:18px 22px 10px;
  font-family:var(--msb-gothic); font-size:.74rem; letter-spacing:.08em; color:var(--msb-navy);
  border:1px solid var(--msb-gold-soft); border-radius:3px; padding:.2em 1em;
}
.card-title{
  margin:0 22px 12px; font-family:var(--msb-mincho); font-weight:600;
  font-size:1.02rem; line-height:1.7; color:var(--msb-ink); flex-grow:1;
}
.card-date{ margin:0 22px 20px; font-family:var(--msb-gothic); font-size:.82rem; color:var(--msb-muted); }

/* イベント固有 */
.ev-status{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--msb-gothic); font-size:.72rem; letter-spacing:.08em;
  color:#fff; padding:.3em 1em; border-radius:999px;
  background:linear-gradient(120deg,#D9BC85,#C9A25E);
  box-shadow:0 8px 18px -10px rgba(150,120,70,.7);
}
.ev-status.is-end{ background:#9E9A93; }
.ev-meta{
  margin:0 22px 20px; display:flex; flex-direction:column; gap:6px;
  font-family:var(--msb-gothic); font-size:.82rem; color:var(--msb-muted);
}
.ev-meta span{ display:flex; align-items:flex-start; gap:8px; }
.ev-meta svg{ color:var(--msb-navy); flex-shrink:0; margin-top:.35em; }
.ev-meta b{ font-weight:500; color:var(--msb-ink); }

/* ------------------------------------------------------------
   9. お知らせ
   ------------------------------------------------------------ */
.news-list{ max-width:960px; margin:0 auto; }
.news-item{
  display:grid; grid-template-columns:216px 1fr; gap:34px;
  align-items:center; padding:30px 0; border-bottom:1px solid var(--msb-line);
}
.news-item:first-child{ border-top:1px solid var(--msb-line); }
.news-thumb{ aspect-ratio:16/11; overflow:hidden; border-radius:4px; background:#E9E1D2; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; }
.news-cat{
  display:inline-block; font-family:var(--msb-gothic); font-size:.74rem; letter-spacing:.08em;
  color:var(--msb-navy); border:1px solid var(--msb-gold-soft); border-radius:3px;
  padding:.2em 1em; margin-bottom:12px;
}
.news-title{
  font-family:var(--msb-mincho); font-weight:600; font-size:1.22rem;
  color:var(--msb-ink); line-height:1.6; margin:0 0 10px;
}
.news-excerpt{ font-family:var(--msb-mincho); color:var(--msb-muted); font-size:.9rem; line-height:1.85; margin-bottom:14px; }
.news-date{ display:inline-flex; align-items:center; gap:8px; font-family:var(--msb-gothic); font-size:.82rem; color:var(--msb-muted); }
.news-date svg{ color:var(--msb-navy); }

/* ------------------------------------------------------------
   10. スマホ用ボトムシート（目的から選ぶ）
   ------------------------------------------------------------ */
.msheet-bar, .msheet, .msheet-backdrop{ display:none; }

/* ------------------------------------------------------------
   11. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .jikuiro-grid{ grid-template-columns:1fr; gap:40px; }
  .jiku-sticky{ position:static; }
  .jiku-card{ padding:30px 24px 28px; }
  .jiku-swatches{ gap:9px; }
  .jiku-swatches span{ width:30px; height:30px; }
  .pro-row{ grid-template-columns:1fr; gap:10px; padding:22px 4px; }
  .pr-arrow{ justify-self:start; }
  .card-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .salon-card{ padding:36px 26px 32px; }
  .about-inner{
    grid-template-columns:1fr; gap:28px; max-width:560px; margin:0 auto;
    grid-template-areas:"head" "photo" "body"; grid-template-rows:auto auto auto;
  }
  .about-head{ align-self:start; }
  .about-photo{ max-width:420px; }
  .msb-marquee .track span{ font-size:2.2rem; }
  .msb-hero .hero-inner{ gap:34px; }
  .fq{ min-height:194px; padding:28px 18px; }
  .fq-ic{ width:64px; height:64px; }
  .fq-lb{ font-size:1.12rem; }
  .fq-ds{ font-size:.86rem; }
}

@media (max-width:860px){
  .msb-top .msb-wrap{ width:min(1240px, 86%); }

  /* --- Aパターン --- */
  .msb-hero.-side .hero-inner{ grid-template-columns:1fr; gap:0; min-height:0; padding:0; }
  .msb-hero.-side .hero-left{ position:relative; width:100%; }
  .msb-hero.-side .hero-visual::before{ display:none; }
  .msb-hero.-side .hero-photo{
    width:100vw; margin-left:calc(50% - 50vw);
    aspect-ratio:auto; height:56vh; border-radius:0;
  }
  .msb-hero.-side .hero-photo::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, transparent 30%, rgba(253,251,247,.5) 60%, rgba(253,251,247,.97) 100%);
  }
  .msb-hero.-side .hero-copy{
    position:absolute; z-index:2; left:2.5vw; right:2.5vw; bottom:24px;
    margin-top:0; max-width:none;
  }
  .msb-hero.-side .hero-script{ font-size:1.05rem; right:6px; z-index:2; }

  /* --- Bパターン --- */
  .msb-hero.-bg{ min-height:0; display:block; }
  .msb-hero.-bg .msb-wrap{ width:min(1240px, 90%); }
  .msb-hero.-bg .hero-bgimg img{ width:100%; margin-left:0; object-position:center 18%; }
  .msb-hero.-bg .hero-bgimg::after{
    background:linear-gradient(180deg, rgba(253,251,247,.35) 0%, rgba(253,251,247,.18) 26%,
      rgba(253,251,247,.72) 52%, rgba(253,251,247,.96) 68%, rgba(253,251,247,1) 100%);
  }
  .msb-hero.-bg .hero-inner{ grid-template-columns:1fr; gap:0; padding:0 0 10px; }
  .msb-hero.-bg .hero-copy{ margin-top:44vh; max-width:none; }
  .msb-hero.-bg .hero-nav{ padding:10px 12px 8px; border-radius:14px; }
  .msb-hero.-bg .hero-script{ font-size:1.15rem; margin-bottom:.3em; }

  /* --- 共通 --- */
  .hero-headline{ font-size:clamp(1.6rem, 6.6vw, 2.2rem); letter-spacing:0; }
  .hero-role{ font-size:.7rem; margin-bottom:.9em; }
  .hero-sub{ font-size:.86rem; margin-top:.9em; }

  .hero-nav{ display:block; margin-top:16px; padding-bottom:4px; }
  .fv-band{ padding:0 0 12px; gap:14px; margin-bottom:0; }
  .fv-band::before, .fv-band::after{ width:24px; }
  .fv-band .t{ font-size:1.02rem; letter-spacing:.24em; }
  .fq{ min-height:0; padding:24px 12px 23px; }
  .fq-ic{ width:52px; height:52px; top:8px; left:8px; opacity:.13; }
  .fq-lb{ font-size:1rem; margin-bottom:0; line-height:1.45; }
  .fq-lb .pc{ display:none; }
  .fq-lb .sp{ display:inline; }
  .fq-ds, .fq-go{ display:none; }
  .fq-ghost{ font-size:3rem; bottom:-8px; right:8px; }

  .msb-marquee{ position:relative; z-index:3; padding:0; margin:8px 0 -1.2em; pointer-events:none; }
  .salon-section{ background-position:center 35%; }

  /* ボトムシート */
  body{ padding-bottom:60px; }
  .msheet-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    align-items:center; justify-content:center; gap:.7em;
    border:none; cursor:pointer; padding:16px;
    font-family:var(--msb-mincho); letter-spacing:.16em; font-size:1rem;
    background:rgba(255,253,250,.5);
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
    color:var(--msb-navy);
    border-top:1px solid rgba(255,255,255,.75);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 -12px 30px -18px rgba(150,130,90,.4);
  }
  .msheet-bar .chev{ color:var(--msb-gold); transition:transform .35s ease; line-height:1; }
  .msheet-bar.open .chev{ transform:rotate(180deg); }
  .msheet-backdrop{
    display:block; position:fixed; inset:0; z-index:61;
    background:rgba(20,25,40,.42); opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .msheet-backdrop.show{ opacity:1; pointer-events:auto; }
  .msheet{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:62;
    border-radius:20px 20px 0 0; padding:10px 22px calc(60px + 18px);
    transform:translateY(100%); transition:transform .42s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 -18px 44px -22px rgba(0,0,0,.35);
    max-height:82vh; overflow-y:auto;
    background:rgba(253,251,247,.94);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-top:1px solid rgba(255,255,255,.75);
  }
  .msheet.open{ transform:translateY(0); }
  .msheet-handle{ width:42px; height:4px; border-radius:2px; background:var(--msb-gold-soft); margin:6px auto 4px; }
  .msheet-head{ text-align:center; padding:8px 0 14px; }
  .msheet-head .en{ font-family:var(--msb-serif); font-size:1.35rem; color:var(--msb-navy); letter-spacing:.05em; }
  .msheet-head .jp{ display:block; font-family:var(--msb-mincho); font-size:.72rem; letter-spacing:.4em; color:var(--msb-muted); margin-top:.2em; padding-left:.4em; }
  .msheet-row{
    display:flex; align-items:center; gap:14px; padding:16px 2px;
    border-top:1px solid var(--msb-line); text-align:left;
  }
  .msheet-row:last-of-type{ border-bottom:1px solid var(--msb-line); }
  .msheet-ic{
    flex-shrink:0; width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .msheet-row:nth-of-type(1) .msheet-ic{ background:var(--msb-ac1); }
  .msheet-row:nth-of-type(2) .msheet-ic{ background:var(--msb-ac2); }
  .msheet-row:nth-of-type(3) .msheet-ic{ background:var(--msb-ac3); }
  .msheet-row:nth-of-type(4) .msheet-ic{ background:var(--msb-ac4); }
  .msheet-row .r-label{ font-family:var(--msb-mincho); font-weight:600; font-size:1.02rem; color:var(--msb-ink); }
  .msheet-row .r-desc{ display:block; font-family:var(--msb-mincho); font-size:.76rem; color:var(--msb-muted); margin-top:.2em; }
  .msheet-row .r-chev{ margin-left:auto; color:var(--msb-gold); font-size:1.2rem; flex-shrink:0; }
}

@media (max-width:620px){
  .msb-top .msb-section{ padding:70px 0; }
  .msb-btn-outline{ min-width:0; width:100%; font-size:.86rem; padding:.85em 1.6em; }
  .msb-btn{ font-size:.88rem; padding:.78em 1em .78em 1.9em; }
  .msb-btn .arrow{ width:30px; height:30px; padding:8px; }
  .jikuiro-types{ max-width:420px; margin:0 auto; }
  .about-credits{ grid-template-columns:1fr; }
  .news-item{ grid-template-columns:1fr; gap:16px; }
  .news-thumb{ max-width:280px; }
  .fq-lb{ font-size:.92rem; }
}

/* ============================================================
   準備中の表示（リンクなし）
   ============================================================ */
/* FVの4分割 */
.fq.is-soon{ cursor:default; }
.fq.is-soon:hover{ background:linear-gradient(155deg, var(--tint) 0%, rgba(255,255,255,0) 72%); }
.fq.is-soon:hover .fq-ic{ opacity:.11; transform:none; }
.fq.is-soon:hover .fq-ghost{ opacity:1; }
.fq-soon{
  position:relative; z-index:1; display:inline-block; margin-top:16px;
  font-family:var(--msb-gothic); font-size:.72rem; letter-spacing:.12em;
  color:#fff; background:linear-gradient(120deg,#D9BC85,#C9A25E);
  border-radius:999px; padding:.35em 1.2em;
}

/* プロ向け講座の行 */
.pro-row.is-soon{ cursor:default; }
.pro-row.is-soon:hover{ background:none; padding-left:6px; }
.pr-soon{
  justify-self:end; white-space:nowrap;
  font-family:var(--msb-gothic); font-size:.72rem; letter-spacing:.12em;
  color:#fff; background:linear-gradient(120deg,#D9BC85,#C9A25E);
  border-radius:999px; padding:.35em 1.1em;
}

/* ボタン型の準備中 */
.msb-btn.is-soon{
  cursor:default; color:var(--msb-muted);
  background:linear-gradient(100deg, rgba(250,248,244,.95), rgba(248,244,238,.95)) padding-box,
             linear-gradient(120deg,#E4DCCD,#D8C7A2 45%,#E4DCCD) border-box;
  box-shadow:none; padding:1em 2.3em;
}
.msb-btn.is-soon:hover{ transform:none; box-shadow:none; }

/* 記事がないときの文言 */
.msb-empty{
  grid-column:1 / -1;
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.94rem; text-align:center; padding:40px 0;
}

/* スマホのボトムシート */
.msheet-row.is-soon{ cursor:default; }
.r-soon{
  margin-left:auto; flex-shrink:0;
  font-family:var(--msb-gothic); font-size:.66rem; letter-spacing:.1em;
  color:#fff; background:linear-gradient(120deg,#D9BC85,#C9A25E);
  border-radius:999px; padding:.3em 1em;
}

@media (max-width:959px){
  .fq-soon{ display:none; }
  .pro-row.is-soon .pr-soon{ justify-self:start; margin-top:4px; }
}

/* ============================================================
   12. 余白の調整（テストサイトに合わせる）
   ============================================================ */

/* --- ABOUT：写真とテキストのバランス --- */
@media (min-width:1081px){
  .msb-top .about-inner{
    grid-template-columns:0.95fr 1.05fr;
    gap:40px 72px;
  }
  .msb-top .about-photo{ aspect-ratio:1/1.15; }
  .msb-top .about-head{ margin-bottom:0; }
  .msb-top .about-body{ padding-top:24px; }
  .msb-top .about-role{ margin-bottom:.8em; }
  .msb-top .about-name{ margin-bottom:1.2em; }
  .msb-top .about-lead{ margin-bottom:2.4em; line-height:2.15; }
}
.msb-top .about-photo{ box-shadow:0 30px 70px -30px rgba(30,44,79,.35); }

/* --- ボタン上の余白（em指定だと詰まるのでpx固定） --- */
.msb-top .about-credits{ gap:16px 40px; margin-bottom:44px; }
.msb-top .about-credits li{ padding-bottom:14px; }
.msb-top .salon-benefits{ margin-bottom:40px; }
.msb-top .jikuiro-more-note{ margin-bottom:34px; }

/* --- ボタン全般 --- */
.msb-top .msb-btn{ margin-bottom:6px; }
.msb-top .sec-cta,
.msb-top .more{ padding-bottom:8px; }

@media (max-width:959px){
  .msb-top .msb-section{ padding:64px 0; }
  .msb-top .sec-cta,
  .msb-top .more{ margin-top:44px; }
  .msb-top .about-credits{ margin-bottom:32px; }
  .msb-top .salon-benefits{ margin-bottom:30px; }

  /* FVの4分割：左右に余白と枠 */
  .msb-hero .msb-wrap{ width:min(1240px, 90%); }
  .fv-cross{ border:1px solid var(--msb-line); }
}

/* ============================================================
   13. B案ブラッシュアップ（クライアント修正対応）
   ------------------------------------------------------------
   ・FV：背景写真／4分割からアイコン・説明文を削除
   ・セクションごとに背景のリズムをつける（白／クリーム／写真）
   ・軸色セクションに写真背景、コンサルに写真を追加
   ============================================================ */

/* ---------- FV：高さを画面幅に連動させて顔の大きさを一定に ---------- */
@media (min-width:861px){
  .msb-hero.-bg{
    min-height:0;
    /* 画面幅の比率で高さを決める＝写真がほぼ等倍で収まり、顔が大きくなりすぎない */
    height:clamp(560px, 58vw, 880px);
  }
  .msb-hero.-bg .hero-bgimg img{
    width:100%; margin-left:0;
    height:100%; object-fit:cover;
    /* ★写真の見せたい位置（左右% 上下%）ここで調整 */
    object-position:60% 30%;
  }
  /* 左の文字を読みやすくする白ヴェール（左側だけ濃く） */
  .msb-hero.-bg .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,.96) 0%, rgba(253,251,247,.88) 22%,
        rgba(253,251,247,.55) 40%, rgba(253,251,247,.18) 58%,
        rgba(253,251,247,.20) 100%),
      linear-gradient(180deg, rgba(253,251,247,.35) 0%, transparent 25%,
        transparent 80%, rgba(253,251,247,.85) 100%);
  }
  .msb-hero.-bg .hero-inner{
    grid-template-columns:1fr .92fr;
    align-items:end;           /* 4導線を下寄せにして写真の顔を隠さない */
    padding:64px 0 56px;
    height:100%;
  }
  .msb-hero.-bg .hero-left{ align-self:center; }
}

/* ---------- FV 4分割：アイコン・説明文なしのコンパクト版 ---------- */
.msb-hero .hero-nav{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85); border-radius:20px;
  padding:20px 22px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -34px rgba(150,130,90,.5);
}
.fq{
  min-height:0 !important;
  padding:30px 22px 26px !important;
  justify-content:center;
}
.fq-lb{ margin-bottom:12px; font-size:1.2rem; }
.fq-go{ margin-top:0; }
/* 透かし番号：欠けないよう内側に収める */
.fq-ghost{
  right:14px !important; bottom:6px !important;
  font-size:3.4rem !important; line-height:1 !important;
}
.fq1 .fq-ghost{ color:rgba(189,154,95,.22); }
.fq2 .fq-ghost{ color:rgba(30,44,79,.14); }
.fq3 .fq-ghost{ color:rgba(158,133,120,.22); }
.fq4 .fq-ghost{ color:rgba(169,131,143,.22); }

/* ---------- セクション背景のリズム ---------- */
.msb-top .msb-section.-white{
  background:#FFFFFF;
  position:relative;
}
.msb-top .msb-section.-white::before,
.msb-top .msb-section.-white::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--msb-line) 20%, var(--msb-line) 80%, transparent);
}
.msb-top .msb-section.-white::before{ top:0; }
.msb-top .msb-section.-white::after{ bottom:0; }

/* ---------- 軸色セクション：写真背景 ---------- */
.msb-top .jikuiro-section{
  background-repeat:no-repeat; background-size:cover;
  background-position:center 40%;
  position:relative;
}
.msb-top .jikuiro-section::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(253,251,247,.97) 0%, rgba(253,251,247,.94) 45%,
      rgba(253,251,247,.78) 70%, rgba(253,251,247,.70) 100%);
}
.msb-top .jikuiro-section > .msb-wrap{ position:relative; z-index:1; }
.msb-top .jikuiro-lead p{ margin-bottom:1.1em; }
.msb-top .jikuiro-lead p:last-of-type{ margin-bottom:0; }
/* 軸色カードは写真の上でも読めるよう少し白を強く */
.msb-top .jiku-card{ background:rgba(255,255,255,.62); }

/* ---------- コンサルティング：写真＋テキストの2カラム ---------- */
.msb-top .consul-section{ padding:110px 0; }
.consul-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:64px; align-items:center;
}
.consul-photo{
  margin:0; border-radius:12px; overflow:hidden;
  aspect-ratio:4/5; position:relative;
  box-shadow:0 30px 60px -34px rgba(110,147,180,.45);
}
.consul-photo::after{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--msb-gold-soft); border-radius:12px; pointer-events:none;
}
.consul-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.consul-body .sec-head{ margin-bottom:24px; }
.consul-catch{
  font-family:var(--msb-mincho); font-weight:600; color:var(--msb-ink);
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.7; letter-spacing:.03em;
  margin:0 0 1em;
}
.consul-body .sec-lead{ max-width:none; margin-bottom:34px; }
.consul-cta{ text-align:left; }

/* ---------- FV・軸色：文字の読みやすさ ---------- */
.msb-top .hero-sub{ font-size:1rem; line-height:2.1; }
.msb-top .jikuiro-lead p{ line-height:2.2; }

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .consul-grid{ grid-template-columns:1fr; gap:36px; }
  .consul-photo{ max-width:460px; aspect-ratio:5/4; }
  .consul-photo::after{ display:none; }
}
@media (max-width:860px){
  .msb-hero .hero-nav{ padding:12px 12px 8px; border-radius:14px; }
  .fq{ padding:18px 10px 16px !important; }
  .fq-lb{ margin-bottom:0; font-size:1rem; }
  .fq-go{ display:none; }
  .fq-ghost{ font-size:2.4rem !important; right:8px !important; bottom:2px !important; }
  .msb-top .jikuiro-section{ background-position:center 30%; }
  .msb-top .jikuiro-section::before{ background:rgba(253,251,247,.90); }
  .msb-top .consul-section{ padding:64px 0; }
  .consul-cta{ text-align:center; }
}

/* ============================================================
   14. B案 修正②（FVの写真位置・肩書き・余白）
   ============================================================ */

/* ---------- ヘッダー直下の余白を完全に消す ---------- */
[class*="page-template-page-msb-top"] .l-content,
[class*="page-template-page-msb-top"] #content{
  padding-top:0 !important;
  margin-top:0 !important;
}
.msb-top .msb-hero{ margin-top:0; }

/* ---------- 肩書き（英字を削除したぶん上の余白を確保） ---------- */
.msb-top .hero-role{
  font-size:.8rem; line-height:1.9; margin-bottom:1.4em;
}
.msb-top .hero-role::before{ vertical-align:top; margin-top:.9em; }

/* ---------- PC：人物を左に寄せ、4導線は右下へ ---------- */
@media (min-width:861px){
  .msb-hero.-bg .hero-bgimg img{
    /* ★左右の数値を大きくすると人物が左へ寄る（60→82） */
    object-position:82% 20%;
  }
  /* 右側のヴェールを薄くして人物を見せる */
  .msb-hero.-bg .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,.96) 0%, rgba(253,251,247,.86) 20%,
        rgba(253,251,247,.45) 36%, rgba(253,251,247,.08) 52%,
        rgba(253,251,247,.06) 100%),
      linear-gradient(180deg, rgba(253,251,247,.3) 0%, transparent 22%,
        transparent 72%, rgba(253,251,247,.9) 100%);
  }
  .msb-hero.-bg .hero-inner{
    grid-template-columns:1.05fr .95fr;
    padding:56px 0 40px;
  }
  /* 4導線：右下に寄せて、顔にかからないように */
  .msb-hero.-bg .hero-nav{
    justify-self:end; align-self:end;
    width:min(100%, 560px);
    padding:16px 18px 12px;
  }
  .msb-hero.-bg .fq{ padding:24px 18px 20px !important; }
  .msb-hero.-bg .fq-lb{ font-size:1.08rem; margin-bottom:10px; }
  .msb-hero.-bg .fq-go{ font-size:.84rem; }
  .msb-hero.-bg .fq-ghost{ font-size:2.8rem !important; }
  .msb-hero.-bg .fv-band{ padding:0 0 14px; }
  .msb-hero.-bg .fv-band .t{ font-size:1.08rem; }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:76% 28%; }
}

/* ---------- スマホ：人物を左に寄せる ---------- */
@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg img{
    /* ★左右の数値を大きくすると人物が左へ寄る（center→68%） */
    object-position:68% 18%;
  }
  .msb-hero.-bg .hero-copy{ margin-top:42vh; }
  .msb-top .hero-role{ font-size:.72rem; margin-bottom:1em; }
}

/* ============================================================
   15. B案 修正③（PC FVのレイアウト：文字を上へ・4導線を右端から）
   ※ 14. の指定より後に書いて上書き
   ============================================================ */

/* 4分割の文言：単語の途中で折り返さない（「い」だけ落ちる対策） */
.fq-lb .nb{ display:inline-block; }

@media (min-width:861px){
  .msb-hero.-bg{ position:relative; overflow:hidden; }

  /* 1カラムに戻し、文字ブロックを中央より少し上に */
  .msb-hero.-bg .hero-inner{
    grid-template-columns:1fr;
    align-items:start;
    padding:0;
    height:100%;
  }
  .msb-hero.-bg .hero-left{
    align-self:start;
    /* ★文字ブロックの高さ位置：数値を小さくすると上へ */
    padding-top:clamp(64px, 9.5vw, 150px);
  }
  .msb-hero.-bg .hero-copy{ max-width:600px; }

  /* 4導線：画面右端から差し込むカード */
  .msb-hero.-bg .hero-nav{
    position:absolute; z-index:3;
    right:0;
    /* ★カードの高さ位置：数値を大きくすると上へ */
    bottom:clamp(40px, 5vw, 72px);
    width:min(44vw, 600px);
    justify-self:auto; align-self:auto;
    border-radius:22px 0 0 22px;
    border-right:none;
    padding:18px 26px 14px 22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               inset 1px 0 0 rgba(255,255,255,.7),
               -24px 30px 60px -34px rgba(150,130,90,.55);
  }
  /* カードの左側に細い金のラインを添えて「差し込み感」を出す */
  .msb-hero.-bg .hero-nav::before{
    content:""; position:absolute; left:10px; top:14px; bottom:14px; width:1px;
    background:linear-gradient(180deg, transparent, var(--msb-gold-soft) 20%, var(--msb-gold-soft) 80%, transparent);
    pointer-events:none;
  }
  .msb-hero.-bg .fv-band{ padding:0 0 12px; }
  .msb-hero.-bg .fv-band .t{ font-size:1.04rem; }
  .msb-hero.-bg .fq{ padding:22px 16px 18px !important; }
  .msb-hero.-bg .fq-lb{ font-size:1.04rem; margin-bottom:8px; line-height:1.55; }
  .msb-hero.-bg .fq-go{ font-size:.82rem; }
  .msb-hero.-bg .fq-ghost{ font-size:2.6rem !important; }

  /* 写真：カードを右端に置いたぶん、人物をやや左へ */
  .msb-hero.-bg .hero-bgimg img{ object-position:78% 28%; }
  /* 下端のヴェールを少し強めてマーキーとの境目をなじませる */
  .msb-hero.-bg .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,.96) 0%, rgba(253,251,247,.86) 20%,
        rgba(253,251,247,.45) 36%, rgba(253,251,247,.08) 52%,
        rgba(253,251,247,.06) 100%),
      linear-gradient(180deg, rgba(253,251,247,.3) 0%, transparent 22%,
        transparent 68%, rgba(253,251,247,.92) 100%);
  }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:72% 28%; }
  .msb-hero.-bg .hero-nav{ width:min(40vw, 620px); }
}
/* 中間幅：カードが文字にかぶらないよう少し小さく */
@media (min-width:861px) and (max-width:1100px){
  .msb-hero.-bg .hero-nav{ width:48vw; }
  .msb-hero.-bg .fq-lb{ font-size:.96rem; }
}

/* ============================================================
   16. FV：4導線カードを本当に画面右端に付ける
   ------------------------------------------------------------
   原因は SWELL ではなく自前の指定でした。
   .msb-hero.-bg .msb-wrap に position:relative が入っていたため、
   right:0 が「本文幅（94%）の右端」＝内側で止まっていました。
   wrap を static にして、基準をセクション全体に戻します。
   ============================================================ */
@media (min-width:861px){
  .msb-hero.-bg .msb-wrap{ position:static; z-index:auto; }
  /* 写真より前に出すための重なり順は中身側で持たせる */
  .msb-hero.-bg .hero-left{ position:relative; z-index:2; }

  .msb-hero.-bg .hero-nav{
    position:absolute;
    right:0; left:auto;
    bottom:clamp(40px, 5vw, 72px);
    z-index:3;
  }
}

/* ============================================================
   17. FV：頭が切れない写真位置／見出しを大きく／アニメーション
   ============================================================ */

/* ---------- 写真：上下は「0%」＝写真の上端を必ず見せる ---------- */
@media (min-width:861px){
  .msb-hero.-bg{
    /* 高さを少し抑えて、写真の拡大率（＝上下の切れ）を減らす */
    height:clamp(560px, 54vw, 840px);
  }
  .msb-hero.-bg .hero-bgimg img{
    /* ★左右% 上下%：上下を 0% にすると頭が切れない */
    object-position:80% 0%;
  }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:74% 0%; }
}

/* ---------- 見出しを大きく、上下の余白もそれに合わせる ---------- */
.msb-top .hero-headline{
  font-size:clamp(2.2rem, 4.3vw, 4rem);
  line-height:1.42; letter-spacing:.03em;
}
.msb-top .hero-copy{ max-width:680px; }
.msb-top .hero-role{ margin-bottom:1.9em; }
.msb-top .hero-sub{ margin-top:1.9em; font-size:1.02rem; }
@media (min-width:861px){
  .msb-hero.-bg .hero-left{ padding-top:clamp(56px, 8vw, 128px); }
}
@media (max-width:860px){
  .msb-top .hero-headline{ font-size:clamp(1.8rem, 7.6vw, 2.5rem); }
  .msb-top .hero-role{ margin-bottom:1.3em; }
  .msb-top .hero-sub{ margin-top:1.3em; font-size:.9rem; }
}

/* ---------- アニメーション ---------- */
/* 見出し：1文字ずつ、ほんの少し下から・にじみが晴れるように */
.hero-headline .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(.28em);
  filter:blur(6px);
  animation:msb-ch 1.1s cubic-bezier(.2,.65,.25,1) forwards;
  /* ★1文字ごとの間隔：.07s を変えると速さが変わる */
  animation-delay:calc(.55s + var(--i) * .07s);
}
/* 金色文字はグラデをそれぞれに（親でクリップすると子が透明になるため） */
.hero-headline .ch.tx-gold{
  background:linear-gradient(105deg,#B98A45 0%, #DABF8B 45%, #C09455 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes msb-ch{
  0%  { opacity:0; transform:translateY(.28em); filter:blur(6px); }
  60% { opacity:1; }
  100%{ opacity:1; transform:none; filter:blur(0); }
}

/* 肩書き：金のラインが伸びてから文字が出る */
.msb-top .hero-role{
  opacity:0; animation:msb-fade .9s ease forwards; animation-delay:.25s;
}
.msb-top .hero-role::before{
  transform-origin:left center; transform:scaleX(0);
  animation:msb-line .8s cubic-bezier(.2,.65,.25,1) forwards; animation-delay:.15s;
}
@keyframes msb-line{ to{ transform:scaleX(1); } }

/* サブコピー：見出しの後にふわっと */
.msb-top .hero-sub{
  opacity:0; transform:translateY(12px);
  animation:msb-rise 1s cubic-bezier(.2,.65,.25,1) forwards;
  animation-delay:1.9s;
}
@keyframes msb-fade{ to{ opacity:1; } }
@keyframes msb-rise{ to{ opacity:1; transform:none; } }

/* 写真：ごくゆっくり引いていく（気づかない程度） */
.msb-hero.-bg .hero-bgimg img{
  animation:msb-kb 9s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes msb-kb{ from{ transform:scale(1.045); } to{ transform:scale(1); } }

/* 4導線：PCは右端からすっと差し込む／スマホは下からふわっと */
@media (min-width:861px){
  .msb-hero.-bg .hero-nav{
    opacity:0; transform:translateX(48px);
    animation:msb-slide 1.1s cubic-bezier(.2,.65,.25,1) forwards;
    animation-delay:1.5s;
  }
}
@media (max-width:860px){
  .msb-hero.-bg .hero-nav{
    opacity:0; transform:translateY(16px);
    animation:msb-rise 1s cubic-bezier(.2,.65,.25,1) forwards;
    animation-delay:1.9s;
  }
}
@keyframes msb-slide{ to{ opacity:1; transform:none; } }
/* 4分割の中身も少しだけ遅れて */
.msb-hero.-bg .fq{
  opacity:0; animation:msb-fade .7s ease forwards;
}
.msb-hero.-bg .fq1{ animation-delay:2.0s; }
.msb-hero.-bg .fq2{ animation-delay:2.1s; }
.msb-hero.-bg .fq3{ animation-delay:2.2s; }
.msb-hero.-bg .fq4{ animation-delay:2.3s; }

/* 動きを減らす設定の人には全部すぐ表示 */
@media (prefers-reduced-motion:reduce){
  .hero-headline .ch, .msb-top .hero-role, .msb-top .hero-role::before,
  .msb-top .hero-sub, .msb-hero.-bg .hero-bgimg img,
  .msb-hero.-bg .hero-nav, .msb-hero.-bg .fq{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ============================================================
   18. クライアント修正対応（FVを左寄せ構成に／追従バー／コンサル写真）
   ============================================================ */

/* ---------- 4分割の文言：PC・スマホ共通で省略なし ---------- */
.fq-lb{ line-height:1.5; }
.fq-lb .nb{ display:inline-block; }

/* ---------- PC：文字ブロックと4導線を左に縦積み、人物は右 ---------- */
@media (min-width:861px){
  .msb-hero.-bg .hero-inner{
    display:flex; flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    height:100%;
    padding:0 0 clamp(36px, 4vw, 60px);
  }
  .msb-hero.-bg .hero-left{
    flex:0 0 auto;
    padding-top:clamp(48px, 6.5vw, 104px);
  }
  .msb-hero.-bg .hero-copy{ max-width:640px; }
  .msb-top .hero-sub{ margin-top:1.4em; }

  /* 4導線：左端から差し込むカード（絶対配置をやめて通常フローに） */
  .msb-hero.-bg .hero-nav{
    position:relative; right:auto; bottom:auto; z-index:3;
    width:min(46vw, 620px);
    /* .msb-wrap（94%幅）の左余白 3vw ぶん外へ出して画面端に付ける */
    margin-left:calc(50% - 50vw);
    margin-top:28px;
    border-radius:0 22px 22px 0;
    border-left:none; border-right:1px solid rgba(255,255,255,.85);
    padding:16px 22px 12px calc(3vw + 20px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               inset -1px 0 0 rgba(255,255,255,.7),
               24px 30px 60px -34px rgba(150,130,90,.55);
    /* 差し込みアニメを左からに */
    transform:translateX(-48px);
    animation-name:msb-slide-l;
  }
  .msb-hero.-bg .hero-nav::before{ left:auto; right:10px; }
  .msb-hero.-bg .fq{ padding:20px 14px 16px !important; }
  .msb-hero.-bg .fq-lb{ font-size:1.02rem; margin-bottom:8px; }

  /* 写真：カードが左に来たので人物は右寄りのまま、少し中央へ */
  .msb-hero.-bg .hero-bgimg img{ object-position:82% 0%; }
  /* 左のヴェールを少し広く（文字・カードの下地） */
  .msb-hero.-bg .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,.96) 0%, rgba(253,251,247,.88) 26%,
        rgba(253,251,247,.5) 42%, rgba(253,251,247,.08) 58%,
        rgba(253,251,247,.06) 100%),
      linear-gradient(180deg, rgba(253,251,247,.3) 0%, transparent 22%,
        transparent 70%, rgba(253,251,247,.92) 100%);
  }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:78% 0%; }
  .msb-hero.-bg .hero-nav{ width:min(42vw, 640px); }
}
@media (min-width:861px) and (max-width:1100px){
  .msb-hero.-bg .hero-nav{ width:52vw; }
  .msb-hero.-bg .fq-lb{ font-size:.94rem; }
}
@keyframes msb-slide-l{ to{ opacity:1; transform:none; } }

/* ---------- スマホ：FV内に4導線がすべて収まるように ---------- */
@media (max-width:860px){
  /* サブコピーは省略（4導線を優先） */
  .msb-hero.-bg .hero-sub{ display:none; }
  .msb-hero.-bg .hero-copy{ margin-top:38vh; }
  .msb-hero.-bg .hero-inner{ padding-bottom:14px; }
  .msb-hero.-bg .hero-nav{ margin-top:14px; }
  .msb-hero.-bg .hero-bgimg img{ object-position:72% 0%; }

  /* 文言は略さず、小さめの文字で改行OK */
  .fq{ padding:14px 8px 12px !important; }
  .fq-lb{ font-size:.86rem; margin-bottom:0; line-height:1.5; letter-spacing:0; }
  .fq-lb .nb{ display:inline-block; }
  .fq-ghost{ font-size:2rem !important; }
}
@media (max-width:380px){
  .fq-lb{ font-size:.8rem; }
}

/* ---------- スマホ追従バー：3案（button の class で切替） ---------- */
@media (max-width:860px){
  .msheet-bar{ font-weight:600; letter-spacing:.2em; }

  /* A. ネイビー帯：サイトの締め色でしっかり存在感 */
  .msheet-bar.-navy{
    background:var(--msb-navy) !important;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.18);
    box-shadow:0 -12px 30px -14px rgba(30,44,79,.5);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .msheet-bar.-navy .chev{ color:var(--msb-gold-soft); }
  .msheet-bar.-navy::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--msb-gold); margin-right:.2em;
    animation:msb-pulse 2.2s ease-in-out infinite;
  }

  /* B. 金グラデ帯：ボタンと同じ金でブランド感を前に */
  .msheet-bar.-gold{
    background:linear-gradient(100deg,#D9BC85 0%,#C9A25E 55%,#E7CFA0 100%) !important;
    color:#fff;
    text-shadow:0 1px 0 rgba(120,90,40,.25);
    border-top:1px solid rgba(255,255,255,.55);
    box-shadow:0 -12px 30px -14px rgba(150,120,70,.6);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .msheet-bar.-gold .chev{ color:#fff; }

  /* C. 浮かせたピル：帯ではなく中央のボタンとして浮かす */
  .msheet-bar.-pill{
    left:50%; right:auto; bottom:calc(14px + env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%);
    width:auto; min-width:250px;
    padding:14px 26px !important;
    border-radius:999px;
    background:var(--msb-navy) !important;
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 14px 34px -14px rgba(30,44,79,.65);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .msheet-bar.-pill .chev{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(120deg,#D9BC85,#C9A25E); color:#fff;
  }
  .msheet-bar.-pill.open{ transform:translateX(-50%); }
}
@keyframes msb-pulse{ 0%,100%{ opacity:.45; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
@media (prefers-reduced-motion:reduce){ .msheet-bar.-navy::before{ animation:none; } }

/* ---------- 一般コンサル：写真をやわらかく ---------- */
.msb-top .consul-photo img{
  /* コントラストを少し落として、明るく・わずかに暖かく */
  filter:contrast(.9) brightness(1.05) saturate(.9) sepia(.06);
}
.msb-top .consul-photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* 外側にかけて白くにじませる（ヴィネットの逆） */
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(253,251,247,.55) 100%),
    linear-gradient(180deg, rgba(253,251,247,.18), transparent 30%, transparent 75%, rgba(253,251,247,.3));
}
.msb-top .consul-photo::after{ z-index:2; }
.msb-top .consul-note{ margin-top:-22px; font-size:.9rem; color:var(--msb-gold-deep); }

/* ============================================================
   19. 微調整（FVカードは端に付けない／スマホ改行／イベントカード／Bパターン）
   ============================================================ */

/* ---------- FV：4導線カードは本文幅の中に（端には付けない） ---------- */
@media (min-width:861px){
  .msb-hero.-bg .hero-nav{
    margin-left:0;
    border-radius:22px;
    border-left:1px solid rgba(255,255,255,.85);
    padding:16px 22px 12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -34px rgba(150,130,90,.55);
  }
  .msb-hero.-bg .hero-nav::before{ display:none; }
}

/* ---------- スマホ：PC用の改行を消す ---------- */
@media (max-width:860px){
  .msb-top .br-pc{ display:none; }
}

/* ---------- イベントカード（開催日＋タイトル＋外部リンク） ---------- */
.msb-top .ev-card{ text-decoration:none; }
.msb-top .ev-card .card-thumb img.is-default{ opacity:.9; }
.msb-top .ev-card .card-body{ display:flex; flex-direction:column; flex-grow:1; padding:18px 22px 20px; }
.msb-top .ev-card .card-title{ margin:0 0 14px; }
.msb-top .ev-date{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:10px;
  font-family:var(--msb-serif); font-size:1.02rem; letter-spacing:.06em; color:var(--msb-navy);
}
.msb-top .ev-date svg{ color:var(--msb-gold); }
.msb-top .ev-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  font-family:var(--msb-mincho); font-weight:600; font-size:.86rem; letter-spacing:.06em;
  color:var(--msb-navy); border-bottom:1px solid var(--msb-gold-soft); padding-bottom:3px;
}
.msb-top .ev-go svg{ color:var(--msb-gold); }
.msb-top .ev-card.-nolink{ cursor:default; }
.msb-top .ev-card.-nolink:hover{ transform:none; }

/* ---------- Bパターン（main-up.webp：横顔・右向き） ---------- */
/* 人物が画面の右寄り、視線は右へ。左側が広く空くので文字とカードの下地に使う */
@media (min-width:861px){
  .msb-hero.-bg.-up .hero-bgimg img{ object-position:64% 0%; }
  .msb-hero.-bg.-up .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,.9) 0%, rgba(253,251,247,.7) 24%,
        rgba(253,251,247,.28) 42%, rgba(253,251,247,.04) 58%,
        rgba(253,251,247,.06) 100%),
      linear-gradient(180deg, rgba(253,251,247,.2) 0%, transparent 20%,
        transparent 70%, rgba(253,251,247,.92) 100%);
  }
}
@media (min-width:1300px){
  .msb-hero.-bg.-up .hero-bgimg img{ object-position:60% 0%; }
}
@media (max-width:860px){
  .msb-hero.-bg.-up .hero-bgimg img{ object-position:58% 0%; }
}

/* ============================================================
   20. Bパターン：顔を小さく・右へ
   ------------------------------------------------------------
   object-fit:cover では画像を画面幅より小さくできないため、
   img 自体を幅 74% にして右に寄せ、左側は下地色にする。
   ★ width を小さくすると顔も小さくなる（72〜84% あたり）
   ============================================================ */
@media (min-width:861px){
  .msb-hero.-bg.-up .hero-bgimg{ background:#F4F1EC; }
  .msb-hero.-bg.-up .hero-bgimg img{
    width:74%; margin-left:26%;
    height:100%; object-fit:cover; object-position:50% 0%;
  }
  .msb-hero.-bg.-up .hero-bgimg::after{
    background:
      linear-gradient(90deg,
        rgba(253,251,247,1) 0%, rgba(253,251,247,.98) 22%,
        rgba(253,251,247,.72) 34%, rgba(253,251,247,.12) 48%,
        rgba(253,251,247,.02) 62%, rgba(253,251,247,.04) 100%),
      linear-gradient(180deg, rgba(253,251,247,.2) 0%, transparent 20%,
        transparent 70%, rgba(253,251,247,.92) 100%);
  }
}
@media (min-width:1300px){
  .msb-hero.-bg.-up .hero-bgimg img{ width:70%; margin-left:30%; object-position:50% 0%; }
}
@media (max-width:860px){
  .msb-hero.-bg.-up .hero-bgimg img{ object-position:50% 0%; }
}

/* ============================================================
   21. FVの高さを中身に合わせる／軸色セクションの悩みリスト
   ============================================================ */
/* FV：中身（文字＋4導線）が高さを超えたら伸びるようにして、
   マーキーに隠れないようにする */
@media (min-width:861px){
  .msb-hero.-bg{
    height:auto;
    min-height:clamp(560px, 54vw, 840px);
  }
  .msb-hero.-bg .hero-inner{ min-height:clamp(560px, 54vw, 840px); height:auto; }
  .msb-hero.-bg .hero-nav{ margin-bottom:0; }
}

/* 軸色：悩み → 答え */
.jiku-worries{ margin:22px 0 18px !important; padding:0; list-style:none; display:grid; gap:8px; }
.jiku-worries li{
  position:relative; padding:11px 16px 11px 44px; border-radius:10px;
  background:rgba(255,255,255,.55); border:1px solid rgba(228,220,205,.9);
  font-family:var(--msb-mincho); font-size:.95rem; color:var(--msb-ink); line-height:1.7;
}
.jiku-worries li::before{
  content:""; position:absolute; left:16px; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; border:1px solid var(--msb-gold);
  background:radial-gradient(circle at center, var(--msb-gold) 0 3px, transparent 3.5px);
}
.jiku-answer{
  position:relative; margin:0 !important; padding:16px 18px 16px 54px; border-radius:12px;
  font-family:var(--msb-mincho) !important; font-size:1.02rem !important; line-height:1.9 !important;
  color:var(--msb-ink) !important;
  background:linear-gradient(100deg, rgba(255,247,236,.95), rgba(255,252,247,.7));
  border:1px solid var(--msb-gold-soft);
}
.jiku-answer b{ font-weight:600; color:var(--msb-gold-deep); }
.jiku-answer .ja-arrow{
  position:absolute; left:18px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%;
  background:linear-gradient(120deg,#D9BC85,#C9A25E);
}
.jiku-answer .ja-arrow::after{
  content:""; position:absolute; left:8px; top:6px; width:5px; height:9px;
  border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.msb-top .jikuiro-lead .by{ margin-top:1.2em; }
@media (max-width:860px){
  .jiku-worries li{ font-size:.9rem; padding:10px 14px 10px 40px; }
  .jiku-answer{ font-size:.95rem !important; padding:14px 14px 14px 48px; }
}

/* ============================================================
   22. プロ向け講座：スマホでも「押せる」と分かる見た目
   ============================================================ */
.pr-arrow{ display:inline-flex; align-items:center; gap:.5em; }
.pr-arrow-t{ display:none; }
@media (max-width:1080px){
  .pro-list{ border-top:none; display:grid; gap:14px; }
  .pro-row{
    grid-template-columns:1fr; gap:8px;
    padding:20px 20px 18px 22px !important;
    border:1px solid var(--msb-line);
    border-radius:12px; background:rgba(255,255,255,.65);
    box-shadow:0 18px 40px -30px rgba(150,130,90,.35);
  }
  .pro-row:hover{ padding-left:22px; }
  .pr-name{ font-size:1.06rem; }
  .pr-desc{ font-size:.88rem; }
  /* 右寄せのテキストリンク＋矢印 */
  .pr-arrow{
    justify-self:end; margin-top:4px;
    font-family:var(--msb-mincho); font-weight:600; font-size:.84rem; letter-spacing:.06em;
    color:var(--msb-navy);
  }
  .pr-arrow-t{ display:inline; border-bottom:1px solid var(--msb-gold-soft); padding-bottom:2px; }
  .pr-arrow span[aria-hidden]{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; color:#fff; font-size:.82rem;
    background:linear-gradient(120deg,#D9BC85,#C9A25E);
  }
}


/* ============================================================
   23. 流れる英字：スマホでも流す／白セクションの金ラインと重ならない
   ============================================================ */
@media (max-width:860px){
  .msb-marquee{
    position:relative; z-index:1;
    margin:0; padding:18px 0;
    pointer-events:none;
  }
  .msb-marquee .track{ animation:msb-mq 38s linear infinite; }
  .msb-marquee .track span{ font-size:2rem; }
}
/* .rv の登場は少しだけ大きめの動きで（写真・カード） */
.msb-top .consul-photo.rv, .msb-top .about-photo.rv{ transform:translateY(24px) scale(.985); }
.msb-top .rv.is-on{ transform:none; }

/* ============================================================
   24. 2026-09-14 修正
   ------------------------------------------------------------
   ・スマホ：FV写真がスクロールで伸縮しない（vh→svh／ズーム停止）
   ・PC：人物をもう少し右へ
   ・FVサブコピーをゴシックに
   ・軸色1分診断バナー（準備中）
   ・比較用FV（横長ボタン型）
   ・Bパターン（-up）は廃止
   ============================================================ */

/* ---------- FVサブコピー ---------- */
.msb-top .hero-sub{ font-family:var(--msb-gothic); font-weight:400; letter-spacing:.02em; }

/* ---------- PC：人物を右へ（数値を小さくすると右に動く） ---------- */
@media (min-width:861px){
  .msb-hero.-bg .hero-bgimg img{ object-position:70% 0%; }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:64% 0%; }
}

/* ---------- スマホ：スクロール時の伸縮対策 ---------- */
@media (max-width:860px){
  /* ズーム（Ken Burns）はスマホでは止める */
  .msb-hero.-bg .hero-bgimg img{ animation:none; transform:none; }
  /* vh はアドレスバーの出入りで変わるので、変わらない svh を使う */
  .msb-hero.-bg .hero-copy{ margin-top:38vh; margin-top:38svh; }
  /* 念のため、画像の高さも親に追従させすぎない */
  .msb-hero.-bg .hero-bgimg{ will-change:auto; }
}

/* ---------- 軸色®1分診断バナー ---------- */
.jiku-banner{
  position:relative; display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:0 22px;
  margin-top:26px; max-width:640px; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  outline:1px solid rgba(200,170,110,.45); outline-offset:-6px;
  box-shadow:0 22px 44px -30px rgba(150,130,90,.45);
  text-align:left; text-decoration:none;
}
.jiku-banner .jb-img{ display:block; height:100%; min-height:104px; }
.jiku-banner .jb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jiku-banner .jb-body{ display:block; padding:16px 0; }
.jiku-banner .jb-en{ display:block; font-family:var(--msb-serif); font-style:italic; font-size:.82rem; letter-spacing:.1em; color:var(--msb-gold); }
.jiku-banner .jb-ttl{ display:block; font-family:var(--msb-mincho); font-weight:600; font-size:1.15rem; letter-spacing:.06em; color:var(--msb-ink); margin:.1em 0 .25em; }
.jiku-banner .jb-txt{ display:block; font-family:var(--msb-gothic); font-size:.8rem; line-height:1.7; color:var(--msb-muted); }
.jiku-banner .jb-soon{
  margin-right:20px; white-space:nowrap;
  font-family:var(--msb-gothic); font-size:.7rem; letter-spacing:.14em; color:#fff;
  background:linear-gradient(120deg,#D9BC85,#C9A25E); border-radius:999px; padding:.4em 1.1em;
}
.jiku-banner.is-soon{ cursor:default; }
.jiku-banner.is-soon .jb-img img{ filter:saturate(.85); opacity:.9; }
@media (max-width:620px){
  .jiku-banner{ grid-template-columns:96px 1fr; gap:0 14px; max-width:none; }
  .jiku-banner .jb-img{ min-height:96px; }
  .jiku-banner .jb-body{ padding:12px 12px 12px 0; }
  .jiku-banner .jb-ttl{ font-size:1.02rem; }
  .jiku-banner .jb-txt{ font-size:.74rem; }
  .jiku-banner .jb-soon{ position:absolute; right:10px; top:10px; margin:0; font-size:.62rem; }
}

/* ---------- 比較用FV：横長ボタン型 ---------- */
.fv-compare-label{
  font-family:var(--msb-gothic); font-size:.72rem; letter-spacing:.16em; color:#fff;
  background:#B4553F; text-align:center; padding:6px 0;
}
.msb-hero.-compare .hero-nav.-list{ padding:18px 18px 16px; }
.msb-hero.-compare .hero-nav.-list .fv-band{ padding:0 0 12px; }
.fv-list{ display:grid; gap:10px; }
.fl{
  display:grid; grid-template-columns:96px 1fr 44px; align-items:center; gap:0 18px;
  min-height:68px; border-radius:12px; overflow:hidden; text-decoration:none;
  background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.95);
  outline:1px solid rgba(200,170,110,.35); outline-offset:-1px;
  box-shadow:0 14px 30px -24px rgba(150,130,90,.5);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.fl:hover{ transform:translateX(4px); background:#fff; box-shadow:0 18px 34px -22px rgba(150,130,90,.6); }
.fl-img{ display:block; height:100%; min-height:68px; }
.fl-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.fl-lb{ font-family:var(--msb-mincho); font-weight:700; font-size:1.08rem; letter-spacing:.03em; color:var(--msb-ink); line-height:1.5; }
.fl-lb .kw{ font-weight:700; }
.fl:nth-child(1) .fl-lb .kw{ color:var(--msb-ac1); }
.fl:nth-child(2) .fl-lb .kw{ color:#8A6E60; }
.fl:nth-child(3) .fl-lb .kw{ color:var(--msb-ac2); }
.fl:nth-child(4) .fl-lb .kw{ color:#96707D; }
.fl-ar{ font-family:var(--msb-serif); font-size:1.5rem; line-height:1; color:var(--msb-gold); transition:transform .3s ease; }
.fl:hover .fl-ar{ transform:translateX(3px); }
/* 比較用FVは最初から表示（FVのアニメを再生しない） */
.msb-hero.-compare .ch, .msb-hero.-compare .hero-role, .msb-hero.-compare .hero-sub,
.msb-hero.-compare .hero-nav, .msb-hero.-compare .fq, .msb-hero.-compare .hero-bgimg img{
  animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
}
.msb-hero.-compare .hero-role::before{ animation:none !important; transform:none !important; }
@media (min-width:861px){
  .msb-hero.-compare .hero-nav.-list{ width:min(46vw, 560px); }
}
@media (max-width:860px){
  .fl{ grid-template-columns:80px 1fr 36px; gap:0 12px; min-height:60px; }
  .fl-img{ min-height:60px; }
  .fl-lb{ font-size:.94rem; }
  .fl-ar{ font-size:1.3rem; }
}

/* ============================================================
   25. 比較用FVの整え／人物をさらに右へ／追従バーをベージュに
   ============================================================ */

/* ---------- PC：人物をさらに右へ（小さくすると右へ） ---------- */
@media (min-width:861px){
  .msb-hero.-bg .hero-bgimg img{ object-position:56% 0%; }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ object-position:50% 0%; }
}

/* ---------- 比較用FV：横長ボタンを同じ高さに（画像はトリミング） ---------- */
.fl{ height:70px; min-height:0; }
.fl-img{ position:relative; height:100%; min-height:0; overflow:hidden; }
.fl-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }

/* ---------- 比較用FV：スマホ ---------- */
@media (max-width:860px){
  /* 写真の高さをメインFVと同じ基準（画面1枚分）にして、顔の大きさを揃える */
  .msb-hero.-compare{ background:var(--msb-cream); }
  .msb-hero.-compare .hero-bgimg{ height:100vh; height:100svh; bottom:auto; }
  .msb-hero.-compare .hero-bgimg::after{
    background:linear-gradient(180deg, rgba(253,251,247,.35) 0%, rgba(253,251,247,.18) 24%,
      rgba(253,251,247,.72) 46%, rgba(253,251,247,.96) 60%, rgba(253,251,247,1) 100%);
  }
  /* 文字を少し上げ、4導線が画面内に収まるように */
  .msb-hero.-compare .hero-copy{ margin-top:30vh; margin-top:30svh; }
  .msb-hero.-compare .hero-nav.-list{ margin-top:10px; padding:10px 10px 8px; }
  .msb-hero.-compare .hero-nav.-list .fv-band{ padding:0 0 8px; }
  .fv-list{ gap:8px; }
  .fl{ height:54px; grid-template-columns:72px 1fr 32px; gap:0 12px; }
  .fl-lb{ font-size:.9rem; }
}

/* ---------- 追従バー：やわらかいベージュのグラデ ---------- */
@media (max-width:860px){
  .msheet-bar.-navy{
    background:linear-gradient(100deg, #D9C6A6 0%, #C8AE84 48%, #DCC9AB 100%) !important;
    color:var(--msb-navy);
    border-top:1px solid rgba(255,255,255,.6);
    box-shadow:0 -12px 30px -14px rgba(150,120,70,.5);
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  .msheet-bar.-navy .chev{ color:var(--msb-navy); }
  .msheet-bar.-navy::before{ background:var(--msb-navy); }
}

/* ============================================================
   26. 人物を右へ（確実に動く方式）／スマホFVの高さ固定／追従バー白文字
   ============================================================ */

/* ---------- PC：object-position では動かない幅があるため、画像自体を右にずらす ----------
   ★ margin-left を大きくすると人物が右へ（左側は下地色＋ヴェールで埋まる） */
@media (min-width:861px){
  .msb-hero.-bg .hero-bgimg{ background:#F3F0EA; }
  .msb-hero.-bg .hero-bgimg img{
    width:100%; height:100%;
    margin-left:10%;
    object-fit:cover; object-position:50% 0%;
  }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-bgimg img{ margin-left:14%; }
}

/* ---------- スマホ：FVの高さ基準を JS が入れる固定px（--msb-svh）に ---------- */
@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg img{ margin-left:0; width:100%; animation:none !important; transform:none !important; }
  .msb-hero.-bg .hero-copy{ margin-top:38vh; margin-top:calc(var(--msb-svh, 100vh) * .38); }
  /* 比較用：写真の高さもメインと同じ基準で固定（顔の大きさを揃える） */
  .msb-hero.-compare .hero-bgimg{ height:88vh; height:calc(var(--msb-svh, 100vh) * .88); }
  .msb-hero.-compare .hero-copy{ margin-top:30vh; margin-top:calc(var(--msb-svh, 100vh) * .30); }
}

/* ---------- 追従バー：少し深めのベージュ＋白文字 ---------- */
@media (max-width:860px){
  .msheet-bar.-navy{
    background:linear-gradient(100deg, #CDB289 0%, #B8955F 50%, #D1B78F 100%) !important;
    color:#fff;
    text-shadow:0 1px 2px rgba(110,80,40,.35);
    border-top:1px solid rgba(255,255,255,.55);
  }
  .msheet-bar.-navy .chev{ color:#fff; }
  .msheet-bar.-navy::before{ background:#fff; }
}

/* ============================================================
   27. 比較用FV：ガラス感／肩書きを縦書きで右側に／スマホのカードを低く
   ============================================================ */
/* ガラスモーフィズム（カード自体の白は変えない） */
.msb-hero.-compare .hero-nav.-list{
  background:rgba(255,255,255,.22) !important;
  backdrop-filter:blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 30px 60px -34px rgba(150,130,90,.45);
}
.msb-hero.-compare .hero-nav.-list .fv-band .t{ color:var(--msb-ink); }

/* 肩書き：縦書きで写真の右側へ */
.msb-hero.-compare .hero-role{
  position:absolute; z-index:4; margin:0;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.74rem; letter-spacing:.2em; line-height:1.4;
  color:var(--msb-ink); white-space:nowrap;
  display:flex; align-items:center;
}
.msb-hero.-compare .hero-role br{ display:none; }
.msb-hero.-compare .hero-role::before{
  content:""; display:block; width:1px; height:26px; margin:0 0 .8em 0;
  background:var(--msb-gold); vertical-align:initial;
}
@media (min-width:861px){
  .msb-hero.-compare .hero-role{ right:3.5vw; top:40px; }
  /* 上部の余白：肩書きが抜けたぶん少し詰める */
  .msb-hero.-compare .hero-left{ padding-top:clamp(40px, 5.5vw, 88px); }
}
@media (max-width:860px){
  .msb-hero.-compare .hero-role{ right:16px; top:14px; font-size:.66rem; letter-spacing:.16em; }
  .msb-hero.-compare .hero-role::before{ height:20px; }
  .msb-hero.-compare .hero-copy{ margin-top:calc(var(--msb-svh, 100vh) * .34); }
  /* カードを低く */
  .msb-hero.-compare .fv-list{ gap:6px; }
  .msb-hero.-compare .fl{ height:46px; grid-template-columns:62px 1fr 28px; gap:0 10px; }
  .msb-hero.-compare .fl-lb{ font-size:.86rem; }
  .msb-hero.-compare .fl-ar{ font-size:1.15rem; }
  .msb-hero.-compare .hero-nav.-list{ padding:8px 8px 6px; }
  .msb-hero.-compare .hero-nav.-list .fv-band{ padding:0 0 6px; }
}

/* ============================================================
   28. 比較用FV：縦書き肩書きの位置修正／スマホの余白
   ============================================================ */
/* 肩書きはセクション直下に移したので、セクション基準で右上に置ける */
.msb-hero.-compare .hero-role.-vertical{ position:absolute; z-index:4; }
.msb-hero.-compare .hero-role br{ display:inline; }   /* スマホは <br class="sp_"> で2行（PCは追加CSSで非表示） */
@media (min-width:861px){
  .msb-hero.-compare .hero-role.-vertical{ right:4vw; top:44px; }
}
@media (max-width:860px){
  .msb-hero.-compare .hero-role.-vertical{
    right:16px; top:16px; line-height:1.9;      /* 2列の間隔 */
  }
  /* 見出しと「目的から選ぶ」ボックスの間 */
  .msb-hero.-compare .hero-nav.-list{ margin-top:24px; padding:16px 14px 14px; }
  /* ボックス内の見出しの上下 */
  .msb-hero.-compare .hero-nav.-list .fv-band{ padding:6px 0 12px; }
  /* カード同士の間隔はそのまま（6px） */
}

/* ============================================================
   29. FVの高さ：ヘッダー込みで画面ちょうど1枚分（PC・比較用とも）
   ------------------------------------------------------------
   --swl-headerH は SWELL が html に入れているヘッダーの高さ、
   --msb-svh は msb.js が入れる読み込み時の画面高さ（px）
   ============================================================ */
@media (min-width:861px){
  .msb-hero.-bg{
    height:auto;
    min-height:calc(var(--msb-svh, 100vh) - var(--swl-headerH, 77px) - var(--wp-admin--admin-bar-height, 0px));
    max-height:none;
  }
  .msb-hero.-bg .hero-inner{
    min-height:calc(var(--msb-svh, 100vh) - var(--swl-headerH, 77px) - var(--wp-admin--admin-bar-height, 0px));
    /* 上下の余白を画面高さに連動 */
    padding:0 0 clamp(32px, 5vh, 72px);
  }
  .msb-hero.-bg .hero-left{ padding-top:clamp(40px, 8vh, 120px); }
  .msb-hero.-bg .hero-nav{ margin-top:clamp(20px, 3vh, 40px); }
  /* 縦に余裕があるときは見出し下のサブコピーの間も少し広げる */
  .msb-top .hero-sub{ margin-top:clamp(1.2em, 2.4vh, 2em); }
  /* 比較用の縦書き肩書きは、上の余白に合わせて少し下げる */
  .msb-hero.-compare .hero-role.-vertical{ top:clamp(36px, 6vh, 64px); }
}

/* ============================================================
   30. FV＋流れる英字＝画面1枚／文字と「目的から選ぶ」を離しすぎない
   ============================================================ */
@media (min-width:861px){
  .msb-hero.-bg,
  .msb-hero.-bg .hero-inner{
    min-height:calc(var(--msb-svh, 100vh) - var(--swl-headerH, 77px) - var(--wp-admin--admin-bar-height, 0px) - var(--msb-mqH, 122px));
  }
  /* 上下に分散させず、文字＋カードをひとかたまりで縦中央に */
  .msb-hero.-bg .hero-inner{
    justify-content:center;
    padding:clamp(24px, 4vh, 56px) 0 clamp(24px, 4vh, 56px);
  }
  .msb-hero.-bg .hero-left{ padding-top:0; }
  .msb-hero.-bg .hero-nav{ margin-top:clamp(24px, 3.5vh, 44px); }
  .msb-top .hero-sub{ margin-top:clamp(1.2em, 2vh, 1.8em); }
  .msb-hero.-compare .hero-role.-vertical{ top:clamp(28px, 5vh, 56px); }
}

/* ============================================================
   31. 採用版FV（横長ボタン型）／軸色セクションの整理
   ------------------------------------------------------------
   比較用（.-compare）は削除し、メインFVに横長ボタン型を適用
   ============================================================ */

/* ---------- 目的から選ぶ：ガラスのボックス（見出しなし） ---------- */
.msb-hero.-bg .hero-nav.-list{
  background:rgba(255,255,255,.22) !important;
  backdrop-filter:blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 30px 60px -34px rgba(150,130,90,.45);
  padding:14px;
}
@media (min-width:861px){
  /* PCは少し横長に */
  .msb-hero.-bg .hero-nav.-list{ width:min(52vw, 700px); padding:16px; }
  .fl{ height:72px; grid-template-columns:110px 1fr 48px; }
}
@media (min-width:1300px){
  .msb-hero.-bg .hero-nav.-list{ width:min(48vw, 760px); }
}

/* ---------- スマホ：文字＋4本のボタンが1画面に収まる配分 ---------- */
@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg{ height:88vh; height:calc(var(--msb-svh, 100vh) * .88); bottom:auto; }
  .msb-hero.-bg{ background:var(--msb-cream); }
  .msb-hero.-bg .hero-bgimg::after{
    background:linear-gradient(180deg, rgba(253,251,247,.35) 0%, rgba(253,251,247,.18) 24%,
      rgba(253,251,247,.72) 46%, rgba(253,251,247,.96) 60%, rgba(253,251,247,1) 100%);
  }
  .msb-hero.-bg .hero-copy{ margin-top:calc(var(--msb-svh, 100vh) * .34); }
  .msb-hero.-bg .hero-nav.-list{ margin-top:24px; padding:12px; }
  .fv-list{ gap:6px; }
  .fl{ height:46px; grid-template-columns:62px 1fr 28px; gap:0 10px; }
  .fl-lb{ font-size:.86rem; }
  .fl-ar{ font-size:1.15rem; }
}

/* ---------- 軸色：悩みは「通常テキストに近い」形へ ---------- */
.jiku-worries{ margin:20px 0 14px !important; gap:6px; }
.jiku-worries li{
  padding:2px 0 2px 22px; border:none; border-radius:0; background:none;
  font-size:.98rem; line-height:1.9; color:var(--msb-ink);
}
.jiku-worries li::before{
  left:2px; width:8px; height:8px; margin-top:-4px;
  border:none; background:var(--msb-gold);
}
.jiku-answer{
  padding:0 !important; border:none; border-radius:0; background:none;
  font-size:1.06rem !important; line-height:2 !important;
}
.jiku-answer .ja-arrow{ display:none; }
.jiku-answer b{
  color:var(--msb-ink);
  background:linear-gradient(transparent 62%, rgba(217,188,133,.45) 62%);   /* 金の下線マーカー */
  padding:0 .1em;
}
@media (max-width:860px){
  .jiku-worries li{ font-size:.92rem; padding-left:20px; }
  .jiku-answer{ font-size:.98rem !important; padding:0 !important; }
}

/* ---------- 軸色®1分診断バナー：横長・中央 ---------- */
.msb-top .jiku-banner{
  margin:30px auto 0; max-width:720px;
  grid-template-columns:200px 1fr auto;
}
@media (max-width:620px){
  .msb-top .jiku-banner{ grid-template-columns:96px 1fr; max-width:none; }
}

/* ============================================================
   32. 軸色セクション：2軸を1つのボックスに／1分診断を切り離して下に
   ============================================================ */
/* ---------- イエロー軸・ブルー軸：1ボックス、間に枠線 ---------- */
.msb-top .jikuiro-types.jiku-box{
  gap:0; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.7);
  outline:1px solid rgba(200,170,110,.45); outline-offset:-8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
}
.msb-top .jiku-box .jiku-card{
  background:none !important; border:none; outline:none; box-shadow:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:38px 44px 36px;
}
.msb-top .jiku-box .jiku-card::before{ display:none; }
.msb-top .jiku-box .jiku-card + .jiku-card{ border-top:1px solid var(--msb-gold-soft); }
.msb-top .jiku-box .jiku-card:first-child{ padding-top:44px; }
.msb-top .jiku-box .jiku-card:last-child{ padding-bottom:44px; }

/* ---------- 1分診断：グリッドの外・中央（PC） ---------- */
.msb-top .jiku-banner-wrap{ margin-top:56px; }
.msb-top .jiku-banner{ margin:0 auto; max-width:760px; grid-template-columns:220px 1fr auto; }
.msb-top .jiku-banner .jb-body{ padding:20px 0; }
.msb-top .jb-go{
  display:inline-flex; align-items:center; gap:.5em; margin-top:12px;
  font-family:var(--msb-mincho); font-weight:600; font-size:.86rem; letter-spacing:.08em;
  color:#fff; background:var(--msb-navy); border-radius:999px; padding:.55em 1.3em .55em 1.5em;
}
.msb-top .jb-go em{ font-style:normal; font-size:1.1em; line-height:1; }
.msb-top .jiku-banner.is-soon .jb-go{ opacity:.55; }

/* ---------- スマホ ---------- */
@media (max-width:860px){
  /* 2軸の説明をコンパクトに */
  .msb-top .jiku-box .jiku-card,
  .msb-top .jiku-box .jiku-card:first-child,
  .msb-top .jiku-box .jiku-card:last-child{ padding:22px 22px 20px; }
  .msb-top .jiku-box .jiku-tag{ font-size:.8rem; }
  .msb-top .jiku-box .jiku-card h3{ font-size:1.12rem; margin:.15em 0 .4em; }
  .msb-top .jiku-box .jiku-card p{ font-size:.86rem; line-height:1.8; }
  .msb-top .jiku-box .jiku-swatches{ margin-top:14px; gap:8px; }
  .msb-top .jiku-box .jiku-swatches span{ width:26px; height:26px; }

  /* 1分診断：正方形に近いカード。ネイビーで「押せる」見た目に */
  .msb-top .jiku-banner-wrap{ margin-top:32px; }
  .msb-top .jiku-banner{
    grid-template-columns:1fr; grid-template-rows:46% 1fr; gap:0;
    max-width:340px; aspect-ratio:1 / 1.02;
    background:var(--msb-navy); border:none; outline:none;
    box-shadow:0 26px 50px -28px rgba(30,44,79,.7);
    color:#fff;
  }
  .msb-top .jiku-banner .jb-img{ min-height:0; height:100%; }
  .msb-top .jiku-banner .jb-img img{ filter:none; opacity:1; }
  .msb-top .jiku-banner .jb-body{ padding:16px 20px 18px; display:flex; flex-direction:column; }
  .msb-top .jiku-banner .jb-en{ color:var(--msb-gold-soft); font-size:.76rem; }
  .msb-top .jiku-banner .jb-ttl{ color:#fff; font-size:1.12rem; margin:.1em 0 .3em; }
  .msb-top .jiku-banner .jb-txt{ color:rgba(255,255,255,.8); font-size:.76rem; }
  .msb-top .jb-go{
    margin-top:auto; align-self:flex-start;
    color:var(--msb-navy); background:#fff; padding:.5em 1.2em .5em 1.4em; font-size:.82rem;
  }
  .msb-top .jiku-banner.is-soon .jb-go{ opacity:.9; }
  .msb-top .jiku-banner .jb-soon{
    position:absolute; right:12px; top:12px; margin:0;
    background:linear-gradient(120deg,#E7CFA0,#D9BC85); color:var(--msb-navy); font-size:.64rem;
  }
}

/* ============================================================
   33. 1分診断：濃いベージュに／余白を整える
   ============================================================ */
/* ---------- PC：横長 ---------- */
.msb-top .jiku-banner{
  grid-template-columns:220px 1fr auto; gap:0 28px; align-items:center;
  background:linear-gradient(110deg, #E9DBC3 0%, #DCC7A3 100%);
  border:1px solid rgba(255,255,255,.75); outline:1px solid rgba(255,255,255,.55); outline-offset:-6px;
  box-shadow:0 24px 48px -30px rgba(150,120,70,.55);
}
.msb-top .jiku-banner .jb-body{ padding:26px 0; }
.msb-top .jiku-banner .jb-en{ color:var(--msb-gold-deep); margin-bottom:.35em; }
.msb-top .jiku-banner .jb-ttl{ color:var(--msb-ink); margin:0 0 .5em; line-height:1.3; }
.msb-top .jiku-banner .jb-txt{ color:var(--msb-muted); line-height:1.8; max-width:34em; }
.msb-top .jb-go{ margin-top:16px; }
.msb-top .jiku-banner .jb-soon{ margin-right:26px; background:var(--msb-navy); }

/* ---------- スマホ：正方形カード ---------- */
@media (max-width:860px){
  .msb-top .jiku-banner{
    grid-template-rows:44% 1fr; aspect-ratio:1 / 1.06;
    background:linear-gradient(160deg, #DCC7A3 0%, #C9AE84 100%);
    color:var(--msb-ink); box-shadow:0 26px 50px -28px rgba(150,120,70,.6);
  }
  .msb-top .jiku-banner .jb-body{ padding:18px 20px 20px; gap:0; }
  .msb-top .jiku-banner .jb-en{ color:rgba(255,255,255,.9); font-size:.74rem; margin-bottom:.4em; }
  .msb-top .jiku-banner .jb-ttl{ color:var(--msb-ink); font-size:1.12rem; margin:0 0 .5em; }
  .msb-top .jiku-banner .jb-txt{ color:rgba(38,38,46,.8); font-size:.78rem; line-height:1.75; }
  .msb-top .jb-go{
    margin-top:auto; padding-top:0; margin-bottom:0;
    color:#fff; background:var(--msb-navy); padding:.55em 1.2em .55em 1.4em;
  }
  .msb-top .jiku-banner .jb-body{ padding-top:18px; }
  .msb-top .jiku-banner .jb-txt{ margin-bottom:14px; }
  .msb-top .jiku-banner .jb-soon{ background:var(--msb-navy); color:#fff; }
}

/* ============================================================
   34. 1分診断：白→ベージュのグラデ／ネイビーの枠／トップ共通ボタン
   ※ 33. の指定を上書き
   ============================================================ */
.msb-top .jiku-banner{
  background:linear-gradient(110deg, #FFFFFF 0%, #F6EEDF 60%, #EADCC2 100%);
  border:1px solid var(--msb-navy);
  outline:none;
  box-shadow:0 24px 48px -30px rgba(30,44,79,.35);
}
.msb-top .jiku-banner .jb-soon{ background:var(--msb-navy); color:#fff; }
.msb-top .jb-btn{ margin-top:16px; font-size:.86rem; padding:.7em 1em .7em 1.8em; }
.msb-top .jb-btn .arrow{ width:30px; height:30px; padding:8px; }
.msb-top .jiku-banner.is-soon .jb-btn{ opacity:.7; }

@media (max-width:860px){
  /* 33. で外れていた1カラム指定を戻す */
  .msb-top .jiku-banner{
    grid-template-columns:1fr; grid-template-rows:44% 1fr; gap:0;
    max-width:340px; aspect-ratio:1 / 1.06;
    background:linear-gradient(160deg, #FFFFFF 0%, #F6EEDF 55%, #E6D6B8 100%);
    color:var(--msb-ink);
    box-shadow:0 26px 50px -28px rgba(30,44,79,.35);
  }
  .msb-top .jiku-banner .jb-body{ padding:18px 20px 20px; display:flex; flex-direction:column; }
  .msb-top .jiku-banner .jb-en{ color:var(--msb-gold-deep); }
  .msb-top .jiku-banner .jb-txt{ color:var(--msb-muted); margin-bottom:12px; }
  .msb-top .jb-btn{ margin-top:auto; align-self:flex-start; font-size:.84rem; }
}

/* 1分診断：枠線をゴールドに */
.msb-top .jiku-banner{ border:1px solid var(--msb-gold); box-shadow:0 24px 48px -30px rgba(150,120,70,.45); }
@media (max-width:860px){
  .msb-top .jiku-banner{ box-shadow:0 26px 50px -28px rgba(150,120,70,.5); }
}

/* ============================================================
   35. FV：右上・左下に、ぼんやりした緑のにじみ（写真の葉の色味に合わせて）
   ------------------------------------------------------------
   ★ 位置は radial-gradient の「at 92% 6%」、大きさは「30vw 22vw」、
     濃さは rgba の最後の数値で調整
   ============================================================ */
.msb-hero.-bg .hero-bgimg::before{
  content:""; position:absolute; inset:-8%;      /* ぼかしの端が切れないよう少し外まで */
  pointer-events:none;
  background:
    /* 右上 */
    radial-gradient(30vw 22vw at 92% 6%,  rgba(156,186,124,.46) 0%, rgba(156,186,124,.22) 40%, rgba(156,186,124,0) 72%),
    /* 左下（目的から選ぶの後ろ） */
    radial-gradient(34vw 26vw at 6% 96%,  rgba(150,182,118,.42) 0%, rgba(150,182,118,.20) 40%, rgba(150,182,118,0) 72%),
    /* 左下の少し内側に薄い葉色をもう1つ重ねて奥行きを */
    radial-gradient(16vw 12vw at 22% 80%, rgba(196,214,170,.30) 0%, rgba(196,214,170,0) 70%);
  filter:blur(26px);
  animation:msb-blob 18s ease-in-out infinite alternate;
}
@keyframes msb-blob{ from{ transform:translate(0,0); } to{ transform:translate(1.5vw,-1vw); } }
@media (prefers-reduced-motion:reduce){ .msb-hero.-bg .hero-bgimg::before{ animation:none; } }

@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg::before{
    background:
      radial-gradient(70vw 34vw at 96% 2%,  rgba(156,186,124,.40) 0%, rgba(156,186,124,0) 70%),
      radial-gradient(70vw 34vw at 0% 100%, rgba(150,182,118,.34) 0%, rgba(150,182,118,0) 70%);
    filter:blur(22px);
    animation:none;
  }
}

/* 35.の修正：写真（transform付き）の下に潜っていたので重なり順を明示 */
.msb-hero.-bg .hero-bgimg img{ position:relative; z-index:0; }
.msb-hero.-bg .hero-bgimg::before{ z-index:1; }
.msb-hero.-bg .hero-bgimg::after{ z-index:2; }
/* ヴェール越しでも見えるよう少し濃く */
.msb-hero.-bg .hero-bgimg::before{
  background:
    radial-gradient(32vw 24vw at 92% 6%,  rgba(140,176,108,.62) 0%, rgba(140,176,108,.30) 40%, rgba(140,176,108,0) 72%),
    radial-gradient(36vw 28vw at 6% 96%,  rgba(134,172,104,.58) 0%, rgba(134,172,104,.28) 40%, rgba(134,172,104,0) 72%),
    radial-gradient(18vw 13vw at 22% 80%, rgba(186,208,158,.40) 0%, rgba(186,208,158,0) 70%);
}
@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg::before{
    background:
      radial-gradient(70vw 34vw at 96% 2%,  rgba(140,176,108,.55) 0%, rgba(140,176,108,0) 70%),
      radial-gradient(70vw 34vw at 0% 100%, rgba(134,172,104,.48) 0%, rgba(134,172,104,0) 70%);
  }
}
/* ============================================================
   36. 軸色1分診断バナー：「準備中」バッジ削除 → ボタン文言を「準備中」に
   ------------------------------------------------------------
   ・jb-soon を外したので 3列目（auto）を廃止し 2列に
   ・ボタンは押せない見た目（矢印なし・少し淡く・ホバー無効）
   ============================================================ */
.msb-top .jiku-banner.is-soon{ grid-template-columns:220px 1fr; padding-right:28px; }
.msb-top .jiku-banner.is-soon .jb-btn{
  opacity:.75; cursor:default; padding:.7em 1.6em; letter-spacing:.2em;
  color:var(--msb-muted); border-color:rgba(30,44,79,.25);
}
.msb-top .jiku-banner.is-soon .jb-btn:hover{ transform:none; box-shadow:none; }
@media (max-width:860px){
  .msb-top .jiku-banner.is-soon{ grid-template-columns:1fr; padding-right:0; } /* スマホは元の縦積み（写真上・本文下）のまま */
}

/* ============================================================
   37. FV のにじみ（モヤ）を差し替え　※ 35. を上書き
   ------------------------------------------------------------
   ・左下隅：黄緑（葉より明るい若草〜黄緑）
   ・右上　：ベージュゴールド
   ・形は丸ではなく、細長い楕円を斜めに数枚ずらして重ね、
     筆でひと刷けしたような／花びら・若葉のようなやわらかい形に
   ★ 位置は各 radial-gradient の「at X% Y%」、大きさは「幅 高さ」、
     濃さは rgba の最後の数値で調整
   ============================================================ */
.msb-hero.-bg .hero-bgimg::before{
  content:""; position:absolute; inset:-8%; pointer-events:none; z-index:1;
  background:
    /* ---- 右上：ベージュゴールド（右上から左下へ流れる刷毛あと） ---- */
    radial-gradient(26vw 9vw  at 95% 4%,  rgba(222,196,146,.70) 0%, rgba(222,196,146,.30) 45%, rgba(222,196,146,0) 72%),
    radial-gradient(22vw 8vw  at 87% 12%, rgba(214,186,132,.58) 0%, rgba(214,186,132,.24) 45%, rgba(214,186,132,0) 72%),
    radial-gradient(16vw 6vw  at 79% 21%, rgba(232,212,170,.46) 0%, rgba(232,212,170,0) 70%),
    radial-gradient(9vw  4vw  at 72% 29%, rgba(240,226,192,.34) 0%, rgba(240,226,192,0) 70%),
    /* ---- 左下隅：黄緑（左下から右上へ立ちのぼる若葉） ---- */
    radial-gradient(28vw 10vw at 3%  97%, rgba(186,206,110,.70) 0%, rgba(186,206,110,.30) 45%, rgba(186,206,110,0) 72%),
    radial-gradient(22vw 9vw  at 12% 88%, rgba(196,214,122,.58) 0%, rgba(196,214,122,.24) 45%, rgba(196,214,122,0) 72%),
    radial-gradient(16vw 7vw  at 21% 79%, rgba(208,222,140,.46) 0%, rgba(208,222,140,0) 70%),
    radial-gradient(9vw  4vw  at 29% 71%, rgba(220,230,164,.34) 0%, rgba(220,230,164,0) 70%);
  filter:blur(22px);
  animation:msb-blob 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:reduce){ .msb-hero.-bg .hero-bgimg::before{ animation:none; } }

@media (max-width:860px){
  .msb-hero.-bg .hero-bgimg::before{
    background:
      /* 右上：ベージュゴールド */
      radial-gradient(64vw 22vw at 100% 0%,  rgba(222,196,146,.62) 0%, rgba(222,196,146,0) 70%),
      radial-gradient(40vw 16vw at 78% 12%,  rgba(232,212,170,.40) 0%, rgba(232,212,170,0) 70%),
      /* 左下：黄緑 */
      radial-gradient(64vw 22vw at 0%   100%, rgba(186,206,110,.60) 0%, rgba(186,206,110,0) 70%),
      radial-gradient(40vw 16vw at 20%  88%,  rgba(208,222,140,.38) 0%, rgba(208,222,140,0) 70%);
    filter:blur(20px);
    animation:none;
  }
}

/* ============================================================
   38. FV見出しのにじみ残り対策（スマホ）
   ------------------------------------------------------------
   ・1文字ずつの filter:blur() アニメは、iOS Safari で終了後も
     文字がぼやけたまま残ることがある（低解像度でラスタライズされる）
   ・PC：blur演出は残しつつ、終了値を blur(0) → none に
   ・スマホ（860px以下）：blur を使わず、opacity＋translate のみで表示
   ============================================================ */
@keyframes msb-ch{
  0%  { opacity:0; transform:translateY(.28em); filter:blur(6px); }
  60% { opacity:1; }
  99% { filter:blur(0); }
  100%{ opacity:1; transform:none; filter:none; }
}
@media (max-width:860px){
  .hero-headline .ch{
    filter:none;
    animation-name:msb-ch-sp;
    -webkit-font-smoothing:antialiased;
  }
  @keyframes msb-ch-sp{
    0%  { opacity:0; transform:translateY(.28em); }
    60% { opacity:1; }
    100%{ opacity:1; transform:none; }
  }
}

/* ============================================================
   39. 軸色セクション：イエロー軸／ブルー軸カード削除 → 横長レイアウトに
       軸色1分診断バナー：独立セクションとして軸色セクションの上へ・横長に
   ============================================================ */
/* --- バナー（独立セクション） --- */
.msb-top .jiku-banner-section{ padding-top:0; padding-bottom:0; }
.msb-top .jiku-banner-section .jiku-banner-wrap{ margin-top:0; }
.msb-top .jiku-banner-section .jiku-banner{ max-width:none; }         /* 他セクションと同じ幅 */
.msb-top .jiku-banner-section .jiku-banner.is-soon{ grid-template-columns:260px 1fr; }
.msb-top .jiku-banner-section .jb-body{ padding:34px 0; }
.msb-top .jiku-banner-section .jb-txt{ max-width:none; }
@media (min-width:861px){
  .msb-top .jiku-banner-section .jb-txt{ margin-bottom:16px; }
}

/* --- 軸色セクション本体：2カラム横長 --- */
.msb-top .jikuiro-wide{
  display:grid; grid-template-columns:1fr 1.15fr; gap:32px 72px; align-items:start;
}
.msb-top .jikuiro-head .jikuiro-lead{ margin:0; max-width:none; }
.msb-top .jikuiro-head .jikuiro-lead h2{ margin-bottom:0; }
.msb-top .jikuiro-body{ padding-top:14px; }
.msb-top .jikuiro-body .jikuiro-lead{ margin:0; max-width:none; }
.msb-top .jikuiro-cta{ margin-top:64px; }

@media (max-width:860px){
  .msb-top .jiku-banner-section{ padding-top:0; }
  .msb-top .jiku-banner-section .jiku-banner.is-soon{ grid-template-columns:1fr; max-width:340px; }
  .msb-top .jiku-banner-section .jb-body{ padding:18px 20px 20px; }
  .msb-top .jikuiro-wide{ grid-template-columns:1fr; gap:24px; }
  .msb-top .jikuiro-body{ padding-top:0; }
  .msb-top .jikuiro-cta{ margin-top:44px; }
}

/* ============================================================
   40. 軸色1分診断バナー：横長時のデザイン調整　／　軸色CTAの位置修正
   ------------------------------------------------------------
   ・枠線を強いネイビーから淡いゴールドに（内側に白の細線）
   ・写真は absolute にして本文側の高さで高さを決める（縦に伸びない）
   ・本文の文字サイズ・行間を横長サイズに合わせて拡大、要素間の余白を確保
   ・右側の空きは、うすい飾り文字（Find your jiku-iro）で埋める
   ============================================================ */
@media (min-width:861px){
  .msb-top .jiku-banner-section .jiku-banner.is-soon,
  .msb-top .jiku-banner-section .jiku-banner{
    grid-template-columns:320px 1fr; gap:0;
    min-height:280px; position:relative; overflow:hidden;
    border:1px solid rgba(201,162,94,.38);
    outline:1px solid rgba(255,255,255,.7); outline-offset:-5px;
    box-shadow:0 30px 60px -40px rgba(150,120,70,.45);
  }
  .msb-top .jiku-banner-section .jb-img{ position:relative; height:auto; min-height:0; align-self:stretch; }
  .msb-top .jiku-banner-section .jb-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .msb-top .jiku-banner-section .jb-body{
    padding:44px 48px 44px 56px; max-width:640px; position:relative; z-index:1;
  }
  .msb-top .jiku-banner-section .jb-en{ font-size:.86rem; letter-spacing:.14em; margin-bottom:.6em; }
  .msb-top .jiku-banner-section .jb-ttl{ font-size:1.55rem; letter-spacing:.08em; margin:0 0 .6em; line-height:1.35; }
  .msb-top .jiku-banner-section .jb-txt{ font-size:.95rem; line-height:1.95; max-width:32em; margin-bottom:26px; }
  .msb-top .jiku-banner-section .jb-btn{ margin-top:0; font-size:.9rem; padding:.75em 2.2em; }

  /* 右側の飾り文字 */
  .msb-top .jiku-banner-section .jiku-banner::after{
    content:"Find your jiku-iro"; position:absolute; right:40px; bottom:22px; z-index:0;
    font-family:var(--msb-serif); font-style:italic; font-size:clamp(3rem,6vw,5.2rem);
    letter-spacing:.02em; line-height:1; color:rgba(201,162,94,.14); white-space:nowrap; pointer-events:none;
  }
}

/* 軸色セクションのCTA：注釈が左に寄るのを中央に */
.msb-top .jikuiro-cta{ text-align:center; }
.msb-top .jikuiro-cta .jikuiro-more-note{ max-width:none; margin:0 auto 30px; text-align:center; }

/* スマホ：枠線をPCと同じ淡いゴールドに */
@media (max-width:860px){
  .msb-top .jiku-banner-section .jiku-banner,
  .msb-top .jiku-banner-section .jiku-banner.is-soon{
    border:1px solid rgba(201,162,94,.38);
    outline:1px solid rgba(255,255,255,.7); outline-offset:-5px;
    box-shadow:0 26px 50px -34px rgba(150,120,70,.45);
  }
}