@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ 共通スタイル（SWELL 子テーマ用）
   置き場所: swell_child/assets/css/msb-common.css
   ------------------------------------------------------------
   ※ SWELL のクラス名（.l-header / .c-gnav など）は
      テーマのバージョンで変わる場合があります。
      当たらない箇所があれば検証ツールで実際のクラス名を確認し、
      該当セレクタを差し替えてください。
   ============================================================ */

/* ------------------------------------------------------------
   1. カラー変数・フォント
   ------------------------------------------------------------ */
:root{
  --msb-cream:      #FBFAF7;
  --msb-cream-lite: #FDFCFA;
  --msb-navy:       #1E2C4F;
  --msb-navy-deep:  #1C2743;
  --msb-gold:       #BD9A5F;
  --msb-gold-soft:  #D8C7A2;
  --msb-gold-deep:  #A8823E;
  --msb-taupe:      #9E8578;
  --msb-ink:        #26262E;
  --msb-muted:      #4E4E56;
  --msb-line:       #E4DCCD;

  /* 目的別4導線のアクセント */
  --msb-ac1:#BD9A5F;   /* 軸色 */
  --msb-ac2:#1E2C4F;   /* プロ */
  --msb-ac3:#9E8578;   /* コンサル */
  --msb-ac4:#A9838F;   /* サロン */

  --msb-mincho:'Shippori Mincho', serif;
  --msb-serif: 'Cormorant Garamond', serif;
  --msb-script:'Parisienne', cursive;
  --msb-gothic:'Zen Kaku Gothic New', sans-serif;
}

body{
  font-family:var(--msb-gothic);
  color:var(--msb-ink);
  background:var(--msb-cream);
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------
   2. ヘッダー（すりガラス）
   ------------------------------------------------------------ */
.l-header{
  background:rgba(255,253,250,.55) !important;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 30px -24px rgba(150,130,90,.3);
}
/* スクロール追従ヘッダーにも同じ質感を */
.l-fixHeader,
.l-fixHeader__inner{
  background:rgba(255,253,250,.72) !important;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}

/* ロゴ（テキストロゴの場合） */
.l-header__logo .c-catchphrase,
.l-header__logo .site-title{
  font-family:var(--msb-serif); letter-spacing:.02em; color:var(--msb-ink);
}

/* ------------------------------------------------------------
   3. グローバルナビ
   ------------------------------------------------------------ */
.c-gnav > li > a{
  font-family:var(--msb-mincho);
  font-size:.96rem;
  color:var(--msb-ink);
  letter-spacing:.02em;
}
/* SWELL 標準の下線アニメを金色に */
.c-gnav > li > a::after{
  background:var(--msb-gold) !important;
}

/* --- 英字サブテキスト（メニュー項目の「CSSクラス」欄で付与） --- */
.c-gnav > li > a > .ttl::after,
.c-gnav > li > a::before{
  display:block;
  font-family:var(--msb-serif);
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--msb-muted);
  margin-top:.25em;
  font-weight:400;
  line-height:1.2;
}
.c-gnav > li.nav-jikuiro  > a > .ttl::after{ content:"Jiku-iro"; }
.c-gnav > li.nav-you      > a > .ttl::after{ content:"For You"; }
.c-gnav > li.nav-business > a > .ttl::after{ content:"For Business"; }
.c-gnav > li.nav-profile  > a > .ttl::after{ content:"Profile"; }
.c-gnav > li.nav-contact  > a > .ttl::after{ content:"Contact"; color:rgba(255,255,255,.72); }

/* 予約・問い合わせボタン */
.c-gnav > li.nav-contact > a{
  background:var(--msb-navy);
  color:#fff !important;
  padding:.85em 1.3em;
  line-height:1.3;
  border-radius:2px;
}
.c-gnav > li.nav-contact > a::after{ display:none !important; }

/* --- ドロップダウン --- */
.c-gnav .sub-menu{
  padding:10px !important;
  border-radius:14px;
  background:rgba(255,253,250,.94) !important;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 26px 50px -26px rgba(120,100,70,.5);
  min-width:236px;
}
.c-gnav .sub-menu li{ border:none !important; }
.c-gnav .sub-menu li > a{
  display:flex; align-items:center; gap:.7em;
  padding:11px 15px !important;
  border-radius:9px;
  font-family:var(--msb-mincho);
  font-size:.95rem;
  color:var(--msb-ink);
  background:none;
  transition:background .25s ease, color .25s ease;
}
.c-gnav .sub-menu li > a:hover{
  background:linear-gradient(100deg, rgba(255,247,236,.95), rgba(255,252,247,.6));
  color:var(--msb-navy);
}
/* サブメニューの英字（各項目のCSSクラス欄で付与） */
.c-gnav .sub-menu li > a::after{
  margin-left:auto;
  font-family:var(--msb-serif); font-style:italic;
  font-size:.7rem; letter-spacing:.08em; color:var(--msb-gold-deep);
}
.c-gnav .sub-menu li.sub-about      > a::after{ content:"About"; }
.c-gnav .sub-menu li.sub-consulting > a::after{ content:"Consulting"; }
.c-gnav .sub-menu li.sub-salon      > a::after{ content:"Légers"; }
.c-gnav .sub-menu li.sub-event      > a::after{ content:"Event"; }
.c-gnav .sub-menu li.sub-course     > a::after{ content:"Course"; }
.c-gnav .sub-menu li.sub-profile    > a::after{ content:"Profile"; }
.c-gnav .sub-menu li.sub-works      > a::after{ content:"Works"; }
.c-gnav .sub-menu li.sub-news       > a::after{ content:"News"; }
/* 「準備中」バッジ */
.c-gnav .sub-menu li.sub-soon > a::after{
  content:"準備中";
  font-family:var(--msb-gothic); font-style:normal;
  font-size:.6rem; letter-spacing:.06em; color:#fff;
  background:linear-gradient(120deg,#D9BC85,#C9A25E);
  border-radius:999px; padding:.2em .7em;
}

/* ------------------------------------------------------------
   4. スマホメニュー
   ------------------------------------------------------------ */
.p-spMenu{ background:var(--msb-cream); }
.p-spMenu__inner{ background:var(--msb-cream); }
.p-spMenu .c-listMenu a{
  font-family:var(--msb-mincho);
  font-size:1.04rem;
  color:var(--msb-ink);
  border-bottom:1px solid var(--msb-line);
}
.p-spMenu .sub-menu a{
  background:rgba(255,248,238,.65);
  padding-left:2.4em !important;
  font-size:.96rem;
}
.p-spMenu .c-listMenu a::before{ color:var(--msb-gold-deep); }

/* ------------------------------------------------------------
   5. 共通ボタン
   ------------------------------------------------------------ */
.msb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--msb-mincho); font-weight:500; letter-spacing:.16em;
  color:var(--msb-navy);
  border:1px solid transparent; border-radius:999px;
  background:
    linear-gradient(100deg, rgba(255,254,251,.97), rgba(255,250,243,.95)) padding-box,
    linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
  padding:1em 1.1em 1em 2.3em; cursor:pointer; text-decoration:none;
  box-shadow:0 12px 26px -20px rgba(150,120,70,.3);
  transition:background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.msb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -20px rgba(150,120,70,.55);
}
.msb-btn .arrow{
  width:34px; height:34px; padding:9px; border-radius:50%;
  background:linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%);
  color:#fff; box-sizing:border-box; flex-shrink:0;
  transition:transform .4s ease;
}
.msb-btn:hover .arrow{ transform:translateX(4px); }

/* 見出し（英字＋日本語） */
.msb-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-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-head .jp::before{ content:""; width:44px; height:1px; background:var(--msb-gold); }

/* ------------------------------------------------------------
   6. フッター
   ------------------------------------------------------------ */
.l-footer{
  background:var(--msb-navy-deep) !important;
  color:#EDE9E0;
}
.l-footer a{ color:#EDE9E0; }
.l-footer .w-footer__title,
.l-footer .widget_title{
  font-family:var(--msb-serif); letter-spacing:.2em;
  color:var(--msb-gold-soft); font-size:.92rem;
}
.l-footer .c-copyright,
.l-footer .l-footer__foot{
  font-family:var(--msb-serif); letter-spacing:.06em;
  font-size:.82rem; color:rgba(237,233,224,.75);
  border-top:1px solid rgba(189,154,95,.35);
}

/* --- FOLLOW US カード（フッターにカスタムHTMLブロックで設置） --- */
.msb-follow{ max-width:360px; }
.msb-follow__label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--msb-serif); letter-spacing:.24em; font-size:.92rem;
  color:var(--msb-gold-soft); margin-bottom:16px;
}
.msb-follow__label::before{ content:""; width:40px; height:1px; background:var(--msb-gold-soft); }
.msb-follow__links{ display:grid; gap:12px; }
.msb-follow__card{
  display:flex; align-items:center; gap:15px;
  padding:16px 18px; border-radius:12px; text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(189,154,95,.45);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.msb-follow__card:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--msb-gold); transform:translateY(-3px);
}
.msb-follow__ic{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,#D9BC85,#B98A45);
}
.msb-follow__nm{
  display:block; font-family:var(--msb-mincho); font-size:1.08rem;
  color:#fff; letter-spacing:.05em; line-height:1.4;
}
.msb-follow__ds{
  display:block; font-family:var(--msb-gothic); font-weight:300;
  font-size:.74rem; color:rgba(237,233,224,.75); margin-top:.3em; line-height:1.6;
}
.msb-follow__ar{
  margin-left:auto; color:var(--msb-gold-soft); font-size:1.15rem;
  flex-shrink:0; transition:transform .3s ease;
}
.msb-follow__card:hover .msb-follow__ar{ transform:translateX(4px); }

/* ------------------------------------------------------------
   7. 背景の光（全ページ共通の雰囲気）
   ------------------------------------------------------------ */
.msb-bgfx{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    linear-gradient(112deg, transparent 30%, rgba(250,214,178,.12) 38%, rgba(255,255,255,0) 50%),
    linear-gradient(112deg, transparent 55%, rgba(240,226,202,.16) 62%, transparent 74%),
    linear-gradient(180deg, #FEFDFB 0%, #FBF7F0 100%);
}
.msb-bgfx i{ position:absolute; display:block; border-radius:50%; }
.msb-bgfx .orb-a{ width:52vmax; height:52vmax; left:-12vmax; top:4vmax;
  background:radial-gradient(closest-side, rgba(233,190,138,.34), transparent 72%);
  animation:msb-orb 26s ease-in-out infinite alternate; }
.msb-bgfx .orb-b{ width:46vmax; height:46vmax; right:-14vmax; top:32vmax;
  background:radial-gradient(closest-side, rgba(212,192,160,.36), transparent 72%);
  animation:msb-orb 34s ease-in-out infinite alternate-reverse; }
.msb-bgfx .orb-c{ width:40vmax; height:40vmax; left:22vmax; bottom:-16vmax;
  background:radial-gradient(closest-side, rgba(243,214,186,.3), transparent 72%);
  animation:msb-orb 40s ease-in-out infinite alternate; }
@keyframes msb-orb{ from{ transform:translate(0,0);} to{ transform:translate(4vmax,-3vmax);} }
@media (prefers-reduced-motion:reduce){ .msb-bgfx i{ animation:none; } }

/* ------------------------------------------------------------
   8. Contact Form 7
   ------------------------------------------------------------ */
.msb-form .f-row{ margin-bottom:28px; }
.msb-form .f-label{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-family:var(--msb-mincho); font-weight:600; font-size:.96rem;
  color:var(--msb-ink); letter-spacing:.04em;
}
.msb-form .req, .msb-form .opt{
  font-family:var(--msb-gothic); font-size:.64rem; letter-spacing:.16em;
  padding:.25em .8em; border-radius:999px; flex-shrink:0;
}
.msb-form .req{ color:#fff; background:linear-gradient(120deg,#D9BC85,#C9A25E,#E7CFA0); }
.msb-form .opt{ color:var(--msb-muted); border:1px solid var(--msb-line); }
.msb-form .f-in,
.msb-form .f-ta,
.msb-form input[type="text"],
.msb-form input[type="email"],
.msb-form input[type="tel"],
.msb-form input[type="date"],
.msb-form select,
.msb-form textarea{
  width:100%; font-family:var(--msb-gothic); font-size:.95rem; color:var(--msb-ink);
  padding:.95em 1.15em; border:1px solid var(--msb-line); border-radius:12px;
  background:rgba(255,255,255,.85);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.msb-form .f-in:focus,
.msb-form .f-ta:focus,
.msb-form input:focus,
.msb-form select:focus,
.msb-form textarea:focus{
  outline:none; border-color:var(--msb-gold);
  box-shadow:0 0 0 3px rgba(189,154,95,.15); background:#fff;
}
.msb-form textarea{ min-height:150px; resize:vertical; }
.msb-form .f-2col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .msb-form .f-2col{ grid-template-columns:1fr; gap:0; } }

/* ラジオ・チェックボックス */
.msb-form .wpcf7-radio .wpcf7-list-item,
.msb-form .wpcf7-checkbox .wpcf7-list-item{
  display:block; margin:0 0 8px;
}
.msb-form .wpcf7-list-item-label{
  display:block; cursor:pointer;
  font-family:var(--msb-mincho); font-size:.93rem; color:var(--msb-ink);
  padding:13px 16px; border:1px solid var(--msb-line); border-radius:12px;
  background:rgba(255,255,255,.5);
  transition:border-color .25s ease, background .25s ease;
}
.msb-form input[type="radio"],
.msb-form input[type="checkbox"]{ accent-color:var(--msb-navy); margin-right:10px; }

/* 送信ボタン */
.msb-form .wpcf7-submit{
  display:block; margin:30px auto 0;
  min-width:300px; max-width:100%;
  font-family:var(--msb-mincho); font-weight:500; letter-spacing:.16em;
  color:var(--msb-navy); cursor:pointer;
  border:1px solid transparent; border-radius:999px;
  background:
    linear-gradient(100deg, rgba(255,254,251,.97), rgba(255,250,243,.95)) padding-box,
    linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
  padding:1.05em 2em;
  transition:background .3s ease, transform .3s ease;
}
.msb-form .wpcf7-submit:hover{
  background:linear-gradient(100deg,#FFF4E4,#FCE8CE) padding-box,
             linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
  transform:translateY(-2px);
}
/* エラー表示 */
.msb-form .wpcf7-not-valid-tip{
  font-family:var(--msb-gothic); font-size:.78rem; color:#B4553F; margin-top:.5em;
}
.msb-form .wpcf7-response-output{
  border-radius:10px; border-color:var(--msb-gold-soft) !important;
  font-family:var(--msb-gothic); font-size:.86rem;
}

/* ------------------------------------------------------------
   9. モーション配慮
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* ============================================================
   ヘッダーの背景を透過
   ============================================================ */
.l-header,
.l-header__inner,
.l-header__logo,
.l-header__menuBtn,
.l-header__customBtn,
.c-headLogo{
  background:transparent !important;
}
/* PCのみ すりガラス */
@media (min-width:960px){
  .l-header{
    background:rgba(255,253,250,.55) !important;
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
  }
}
.c-iconBtn.-menuBtn,
.c-iconBtn.-menuBtn:hover{
  background:transparent !important;
}

/* ============================================================
   スマホ ヘッダー・メニュー
   ============================================================ */
@media (max-width:959px){

  /* すりガラスを使わず、半透明の白で代用（iOSの白画面対策） */
  .l-header,
  .l-fixHeader,
  .l-fixHeader__inner{
    background:rgba(255,253,250,.92) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* ヘッダー内をロゴ左・ボタン右で横並びに */
  .l-header__inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px;
  }
  .l-header__logo{ flex:1 1 auto; min-width:0; }
  .l-header__menuBtn,
  .l-header__customBtn{
    flex:0 0 auto !important;
    width:auto !important;
  }

  /* ハンバーガーアイコン */
  .c-iconBtn.-menuBtn{
    width:auto !important;
    min-width:56px;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    height:100% !important;
    padding:0 12px !important;
    color:var(--msb-ink) !important;
  }
  .c-iconBtn.-menuBtn .c-iconBtn__icon{
    font-size:30px !important;
    color:var(--msb-ink) !important;
    opacity:1 !important;
  }

  /* ドロワー本体 */
  .p-spMenu,
  .p-spMenu__inner{
    background:var(--msb-cream) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* 閉じるボタン */
  .p-spMenu__closeBtn{
    height:62px !important;
    min-height:62px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    padding:0 14px !important;
  }
  .p-spMenu__closeBtn .c-iconBtn__icon{
    font-size:22px !important;
    color:var(--msb-muted) !important;
  }

  /* MENU 見出し */
  .p-spMenu .c-widget__title,
  .p-spMenu .widget_title{
    background:transparent !important;
    color:var(--msb-gold-deep) !important;
    font-family:var(--msb-serif) !important;
    font-size:1rem !important;
    letter-spacing:.28em !important;
    padding:4px 24px 14px !important;
    border:none !important;
    text-align:left !important;
  }

  /* メニュー項目 */
  .p-spMenu .c-listMenu a{
    font-family:var(--msb-mincho) !important;
    font-size:1.04rem !important;
    color:var(--msb-ink) !important;
    background:transparent !important;
    border-bottom:1px solid var(--msb-line) !important;
    padding:17px 24px !important;
  }
  .p-spMenu .c-listMenu a::before{ color:var(--msb-gold) !important; }
  .p-spMenu .c-listMenu > .menu-item > a{
    font-weight:600 !important;
    letter-spacing:.06em;
  }
  .p-spMenu .sub-menu a{
    background:rgba(255,248,238,.5) !important;
    padding-left:46px !important;
    font-size:.96rem !important;
    font-weight:400 !important;
    border-bottom:1px solid rgba(228,220,205,.5) !important;
  }

  /* ページ内の他のすりガラスも停止 */
  .jiku-card,
  .salon-card,
  .msb-card,
  .msb-hero.-bg .hero-nav,
  .msheet,
  .msheet-bar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .jiku-card,
  .salon-card,
  .msb-card,
  .msb-hero.-bg .hero-nav{ background:rgba(255,255,255,.82) !important; }
  .msheet{ background:rgba(253,251,247,.97) !important; }
  .msheet-bar{ background:rgba(255,253,250,.95) !important; }

  /* 固定背景を止める（iOSで重い） */
  .msb-bgfx{ display:none !important; }
  body{ background:linear-gradient(180deg,#FEFDFB 0%,#FBF7F0 100%) !important; }

}

/* ============================================================
   SWELLのトップへ戻るボタンを非表示
   ============================================================ */
.p-fixBtnWrap,
.p-fixBtn.-pagetop{
  display:none !important;
}


/* ============================================================
   PC：ドロップダウンの幅・改行を修正
   ============================================================ */
@media (min-width:960px){
  /* サブメニュー全体の幅を確保 */
  .c-gnav .sub-menu{
    width:auto !important;
    min-width:240px !important;
    left:0 !important;
  }
  .c-gnav > li > .sub-menu{
    padding:10px !important;
  }
  /* 各項目：折り返しを止めて左右に余白を */
  .c-gnav .sub-menu li{
    width:100% !important;
  }
  .c-gnav .sub-menu li > a{
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    width:100% !important;
    padding:11px 18px !important;
    text-align:left !important;
    line-height:1.5 !important;
  }
  /* SWELLが付ける矢印などを消す */
  .c-gnav .sub-menu li > a::before{
    display:none !important;
  }
}



/* ============================================================
   Contact Form 7 ─ メッセージ・同意チェックの調整
   ------------------------------------------------------------
   msb-common.css の末尾に追加してください
   ============================================================ */

/* ------------------------------------------------------------
   1. 同意チェックボックス（枠を外して1行に）
   ------------------------------------------------------------ */
.msb-form .wpcf7-acceptance .wpcf7-list-item{
  display:block; margin:0;
}
.msb-form .wpcf7-acceptance .wpcf7-list-item label{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:0; border:none; background:none;
}
.msb-form .wpcf7-acceptance .wpcf7-list-item-label{
  display:inline; padding:0; border:none; background:none;
  font-family:var(--msb-mincho); font-size:.95rem; color:var(--msb-ink);
  line-height:1.7;
}
.msb-form .wpcf7-acceptance input[type="checkbox"]{
  width:20px; height:20px; margin:0; flex-shrink:0;
  accent-color:var(--msb-navy);
}

/* 同意欄そのものを中央に */
.msb-form .f-row:has(.wpcf7-acceptance){
  display:flex; justify-content:center; margin-top:20px;
}

/* ------------------------------------------------------------
   2. 送信結果メッセージ
   ------------------------------------------------------------ */
.msb-form .wpcf7-response-output{
  margin:26px 0 0 !important;
  padding:16px 22px !important;
  border-radius:12px !important;
  border:1px solid var(--msb-gold-soft) !important;
  background:rgba(255,252,246,.9);
  font-family:var(--msb-mincho);
  font-size:.94rem; line-height:1.9;
  color:var(--msb-ink);
  text-align:center;
}

/* 送信成功 */
.msb-form .wpcf7 form.sent .wpcf7-response-output{
  border-color:#A9B99B !important;
  background:rgba(246,250,242,.95);
  color:#4A5C3C;
}

/* 入力エラー */
.msb-form .wpcf7 form.invalid .wpcf7-response-output,
.msb-form .wpcf7 form.unaccepted .wpcf7-response-output,
.msb-form .wpcf7 form.payment-required .wpcf7-response-output{
  border-color:#D9AE9E !important;
  background:rgba(253,246,243,.95);
  color:#9B5642;
}

/* 送信失敗・スパム判定 */
.msb-form .wpcf7 form.failed .wpcf7-response-output,
.msb-form .wpcf7 form.aborted .wpcf7-response-output,
.msb-form .wpcf7 form.spam .wpcf7-response-output{
  border-color:#C9928A !important;
  background:rgba(252,243,241,.95);
  color:#8E4437;
}

/* 各項目のエラー文 */
.msb-form .wpcf7-not-valid-tip{
  display:block; margin-top:.5em;
  font-family:var(--msb-gothic); font-size:.78rem; color:#B4553F;
}
.msb-form .wpcf7-not-valid{
  border-color:#D9AE9E !important;
  background:rgba(253,248,246,.9) !important;
}

/* 送信中のくるくる */
.msb-form .wpcf7-spinner{ margin:14px auto 0; display:block; }

/* ------------------------------------------------------------
   3. 余白の微調整
   ------------------------------------------------------------ */
.msb-form .wpcf7 p{ margin:0; }
.msb-form br{ display:none; }
.msb-form .f-row br,
.msb-form .f-privacy br,
.msb-form .f-note br{ display:inline; }


/* ============================================================
   通常ページ（アーカイブ・投稿・既存固定ページ）の上部余白
   ============================================================ */
/* ※ テンプレートのクラスは body ではなく #body_wrap に付くため、
   この body:not(...) 指定は新デザインのページにも当たってしまい
   ヘッダーとFVの間に余白ができていた。下の #body_wrap 版に統一。 */
/* ============================================================
   新デザインのページ：SWELLのコンテンツ枠を解除して全幅に
   ※ SWELLはテンプレートのクラスを #body_wrap に付けるため
     body ではなく子孫セレクタで指定する
   ============================================================ */
[class*="page-template-page-msb"] #content,
[class*="page-template-page-msb"] #content.l-container,
[class*="page-template-page-msb"] .l-content,
[class*="page-template-page-msb"] .l-mainContent,
[class*="page-template-page-msb"] .l-mainContent__inner{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
[class*="page-template-page-msb"] .l-content{
  padding-top:0 !important;
  margin-bottom:0 !important;
}
[class*="page-template-page-msb"] .p-articleThumb,
[class*="page-template-page-msb"] .c-postTitle,
[class*="page-template-page-msb"] .l-articleTitle,
[class*="page-template-page-msb"] .c-pageTitle,
[class*="page-template-page-msb"] .p-breadcrumb{
  display:none !important;
}

/* ============================================================
   旧デザインページの上部余白
   ============================================================ */
#body_wrap:not([class*="page-template-page-msb"]) .l-content{
  padding-top:48px !important;
}
@media (max-width:959px){
  #body_wrap:not([class*="page-template-page-msb"]) .l-content{
    padding-top:32px !important;
  }
}

/* ============================================================
   旧デザインのページは背景を白に統一
   ============================================================ */
#body_wrap:not([class*="page-template-page-msb"]){
  background:#FFFFFF !important;
}
#body_wrap:not([class*="page-template-page-msb"]) .l-content,
#body_wrap:not([class*="page-template-page-msb"]) #content{
  background:#FFFFFF !important;
}

@media (max-width:959px){
  #body_wrap:not([class*="page-template-page-msb"]){
    background:#FFFFFF !important;
  }
}

#body_wrap:not([class*="page-template-page-msb"]) .w-beforeFooter{
  background:#FFFFFF !important;
}


/* ============================================================
   スマホ：横はみ出しを防止（追従バーの位置ずれ対策も兼ねる）
   ============================================================ */
@media (max-width:959px){
  html, body{
    overflow-x:hidden !important;
    max-width:100% !important;
  }
  #body_wrap,
  #content,
  .msb-page{
    overflow-x:hidden !important;
    max-width:100% !important;
  }
  /* 追従バー：iPhoneのホームバー分を考慮 */
  .msheet-bar{
    bottom:0 !important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .msheet{
    padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important;
  }
  body{
    padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important;
  }
}


/* ============================================================
   スマホ：FVの4分割が横にはみ出す問題の修正
   ============================================================ */
@media (max-width:860px){
  /* 親のグリッドが中身の幅で広がらないようにする */
  .msb-hero .hero-inner{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }
  .msb-hero .hero-left,
  .msb-hero .hero-nav{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* 4分割そのもの */
  .fv-cross{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  .fq{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  .fq-lb{
    overflow-wrap:anywhere;
    word-break:normal;
    max-width:100%;
  }

  /* 写真の全幅も念のため上限を設定 */
  .msb-hero.-side .hero-photo{
    max-width:100vw !important;
  }
}

/* FVの左右余白を戻す */
@media (max-width:860px){
  .msb-hero .hero-inner{
    width:min(1240px, 90%) !important;
    max-width:90% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ============================================================
   横はみ出し防止を、追従ヘッダーを壊さない方式に変更
   ============================================================ */
@media (max-width:959px){
  html, body{
    overflow-x:clip !important;
  }
  #body_wrap,
  #content,
  .msb-page{
    overflow-x:visible !important;
  }
}

/* ============================================================
   スマホ：横はみ出しの根本対策（全ページ共通）
   ------------------------------------------------------------
   原因：グリッドの子要素は既定で min-width:auto のため、
   中に「幅100vwの写真」や「折り返さないタブ」があると
   列がその幅まで広がり、カードごと右にはみ出す。
   → グリッドの子は縮めるように、列は minmax(0,1fr) に。
   ============================================================ */
@media (max-width:1080px){
  /* グリッド／フレックスの子要素を縮められるように */
  .msb-page [class*="grid"] > *,
  .msb-page [class*="-layout"] > *,
  .msb-page [class*="-inner"] > *,
  .msb-page [class*="-wrap"] > *,
  .msb-page .about-wrap > *,
  .msb-page .msb-toc{
    min-width:0;
  }
  /* 1カラム化したグリッドは、列幅を親に固定 */
  .msb-page .jikuiro-layout,
  .msb-page .profile-layout,
  .msb-page .msg-grid,
  .msb-page .about-inner,
  .msb-page .consul-grid,
  .msb-page .jikuiro-grid,
  .msb-page .news-item{
    grid-template-columns:minmax(0,1fr);
  }
  .msb-page .card-grid,
  .msb-page .culture-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
  }
  /* 横にはみ出しうるもの（全幅の写真は除く） */
  .msb-page .msb-wrap > *:not(.about-photo-frame),
  .msb-page .msb-section > *,
  .msb-page .p-section > *{
    max-width:100%;
  }
  .msb-page img, .msb-page svg, .msb-page video, .msb-page iframe{ max-width:100%; }
  /* 長い英字・URLは途中で折り返す */
  .msb-page p, .msb-page li, .msb-page dd, .msb-page td,
  .msb-page h1, .msb-page h2, .msb-page h3, .msb-page h4{
    overflow-wrap:anywhere;
  }
}
/* 最後の砦：それでも出たら画面外は見せない */
@media (max-width:959px){
  #body_wrap, #content{ overflow-x:clip !important; }
}

/* ============================================================
   ヘッダーメニュー：改編対応（目的から選ぶ／Instagramアイコン）
   ------------------------------------------------------------
   WP管理画面「外観 > メニュー」で各項目の「CSSクラス」欄に
   nav-jikuiro / nav-purpose / nav-profile / nav-works / nav-contact / nav-insta
   を入れてください（詳しくは手順書）
   ============================================================ */
.c-gnav > li.nav-purpose  > a > .ttl::after{ content:"Purpose"; }
.c-gnav > li.nav-works    > a > .ttl::after{ content:"Works"; }
.c-gnav .sub-menu li.sub-purpose-jiku   > a::after{ content:"Jiku-iro"; }
.c-gnav .sub-menu li.sub-purpose-consul > a::after{ content:"Consulting"; }
.c-gnav .sub-menu li.sub-purpose-pro    > a::after{ content:"Professional"; }
.c-gnav .sub-menu li.sub-purpose-salon  > a::after{ content:"Salon"; }

/* Instagram：文字を消してアイコンだけに（PC） */
.c-gnav > li.nav-insta > a{
  position:relative; width:44px; padding:0 !important;
  font-size:0 !important; line-height:0; color:transparent;
}
.c-gnav > li.nav-insta > a::before{
  content:""; display:block; width:22px; height:22px; margin:0 auto;
  background-color:var(--msb-ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.2' cy='6.8' r='.9' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.2' cy='6.8' r='.9' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  transition:background-color .3s ease;
}
.c-gnav > li.nav-insta > a:hover::before{ background-color:var(--msb-gold-deep); }
.c-gnav > li.nav-insta > a::after,
.c-gnav > li.nav-insta > a > .ttl::after{ display:none !important; }
/* スマホのドロワーでは文字のまま表示 */
.p-spMenu .c-listMenu li.nav-insta > a{ font-size:1.04rem !important; }

/* ============================================================
   Contact Form 7：「法人／個人」を横並びの選択肢に
   ============================================================ */
.msb-form .f-choice2 .wpcf7-form-control{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.msb-form .f-choice2 .wpcf7-list-item{ margin:0; }
.msb-form .f-choice2 .wpcf7-list-item label{ display:block; }
.msb-form .f-choice2 .wpcf7-list-item-label{ text-align:center; }
.msb-form .f-choice2 .wpcf7-list-item input:checked + .wpcf7-list-item-label{
  border-color:var(--msb-gold); background:rgba(255,247,236,.9); color:var(--msb-navy);
}
.msb-form .f-choice2 input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }

/* ============================================================
   ヘッダー：Instagramアイコンを公式グラデ画像に／お問い合わせ前の余白
   ============================================================ */
.c-gnav > li.nav-insta > a{ width:52px; }
.c-gnav > li.nav-insta > a::before{
  width:26px; height:26px;
  /* ★上下位置：数値を大きくすると下がる */
  margin-top:10px;
  -webkit-mask:none; mask:none; background-color:transparent;
  background:url("../img/Instagram_Glyph_Gradient.webp") center/contain no-repeat;
  transition:opacity .3s ease, transform .3s ease;
}
.c-gnav > li.nav-insta > a:hover::before{ background-color:transparent; opacity:.75; transform:translateY(-1px); }

/* 「お問い合わせ」ボタンの左右に余裕を */
@media (min-width:960px){
  .c-gnav > li.nav-contact{ margin-left:14px; }
  .c-gnav > li.nav-insta{ margin-left:6px; }
}


/* ============================================================
   ふわっと表示（.rv）全ページ共通
   ============================================================ */
.rv{ opacity:0; transform:translateY(18px); transition:opacity 1s cubic-bezier(.2,.65,.25,1), transform 1s cubic-bezier(.2,.65,.25,1); }
.rv.is-on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }