@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ お問い合わせページ専用
   置き場所: swell_child/assets/css/msb-contact.css
   ※ フォーム部品のスタイルは msb-common.css に入っています
   ============================================================ */




.msb-contact{ width:100%; max-width:none; margin:0; padding:0; }
.msb-contact .msb-wrap{ width:min(1240px, 92%); margin-inline:auto; }
.msb-contact ul{ list-style:none; margin:0; padding:0; }
.msb-contact a{ text-decoration:none; }

/* ------------------------------------------------------------
   1. ページ見出し
   ------------------------------------------------------------ */
.msb-pageHero{ padding:80px 0 36px; }
.msb-pageHero .jp-main{
  display:block; font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem); letter-spacing:.16em;
  color:var(--msb-ink); line-height:1.2; margin:0;
}
.msb-pageHero .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);
}
.msb-pageHero .en-sub::before{ content:""; width:44px; height:1px; background:var(--msb-gold); }

.contact-body{ max-width:860px; margin:0 auto; padding-bottom:110px; }
.c-intro{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.98rem; line-height:2.2; margin:0 0 46px;
}

/* ------------------------------------------------------------
   2. タブ
   ------------------------------------------------------------ */
.msb-tabs{ display:flex; gap:12px; margin-bottom:22px; }
.msb-tab{
  flex:1; text-align:center; cursor:pointer;
  font-family:var(--msb-mincho); font-weight:600;
  letter-spacing:.14em; font-size:1rem;
  color:var(--msb-muted); padding:15px 10px; border-radius:999px;
  border:1px solid var(--msb-line); background:rgba(255,255,255,.3);
  transition:color .35s ease, background .35s ease, box-shadow .35s ease;
}
.msb-tab.is-on{
  color:var(--msb-navy); border:1px solid transparent;
  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;
  box-shadow:0 14px 28px -20px rgba(150,120,70,.45);
}
.msb-tabPanel{ display:none; }
.msb-tabPanel.is-on{ display:block; }

/* ------------------------------------------------------------
   3. フォームカード
   ------------------------------------------------------------ */
.form-card{
  position:relative; border-radius:22px; padding:46px 48px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -36px rgba(150,130,90,.4);
}
.form-card::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}

/* 個人情報の取り扱い */
.f-privacy{
  font-family:var(--msb-gothic); font-size:.8rem;
  color:var(--msb-muted); line-height:1.9;
  background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.7);
  padding:16px 20px; border-radius:12px; margin-bottom:14px;
}
.f-note{
  font-family:var(--msb-gothic); font-size:.78rem;
  color:var(--msb-muted); margin:-2px 0 10px;
}

/* ------------------------------------------------------------
   4. SNS
   ------------------------------------------------------------ */
.c-snsHead{
  display:flex; align-items:center; gap:14px;
  margin:64px 0 20px;
  font-family:var(--msb-serif); letter-spacing:.2em;
  font-size:.95rem; color:var(--msb-gold-deep);
}
.c-snsHead::before{ content:""; width:40px; height:1px; background:var(--msb-gold-soft); }
.sns-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px,100%), 1fr));
  gap:18px;
}
.sns-card{
  display:flex; align-items:center; gap:16px;
  border-radius:16px; padding:18px 22px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 20px 40px -28px rgba(150,130,90,.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.sns-card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 26px 48px -28px rgba(150,130,90,.5);
}
.sns-ic{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,#D9BC85,#B98A45);
}
.sns-name{ font-family:var(--msb-mincho); font-weight:600; font-size:1rem; color:var(--msb-ink); }
.sns-handle{
  display:block; font-family:var(--msb-serif); font-style:italic;
  font-size:.82rem; color:var(--msb-muted); margin-top:.15em;
}

/* ------------------------------------------------------------
   5. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width:860px){
  .form-card, .sns-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,.82) !important;
  }
}

@media (max-width:620px){
  .msb-pageHero{ padding:52px 0 26px; }
  .msb-contact .msb-wrap{ width:min(1240px, 86%); }
  .contact-body{ padding-bottom:70px; }
  .form-card{ padding:30px 20px; }
  .msb-tab{ font-size:.9rem; padding:12px 6px; letter-spacing:.08em; }
  .c-intro{ font-size:.94rem; margin-bottom:32px; }
}

/* Turnstile（Cloudflare認証）の下に余白 */
.msb-form .wpcf7-turnstile{ margin-bottom:32px; }