/* ──────────────────────────────────────────────────────────────
   音色株式会社 / neiro Co., Ltd. — Site stylesheet
   Target: WordPress build (theme styles).
   Class names follow the existing BEM convention (vc__*).
   ──────────────────────────────────────────────────────────────
   STRUCTURE:
     1. Root tokens & utilities
     2. Header (fixed) + hamburger
     3. Hero
     4. Stats
     5. Section title
     6. Philosophy / Features
     7. Services
     8. Company / About (greeting + profile)
     9. Flow / Steps
    10. Area
    11. Recruit (highlights / benefits / staff cards / CTA)
    12. FAQ
    13. Info
    14. Contact
    15. Footer
    16. Responsive — tablet (768–1023)
    17. Responsive — mobile (<768)
   ────────────────────────────────────────────────────────────── */

/* ============================================================
   1. Root tokens
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* html { scroll-behavior: smooth; } ← SWELL 標準スクロール挙動と競合するため削除 */
body {
  background: #fdf8ee;
  color: #2b251d;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  padding-top: 88px; /* compensate for fixed header */
}

.vc {
  --bg: #fdf8ee;
  --fg: #2b251d;
  --muted: #7a6f63;
  --primary: #f08552;
  --primary-deep: #d96b35;
  --secondary: #f4b8b1;
  --accent: #a4c19a;
  --accent-deep: #739562;
  --soft-1: #fff1d8;
  --soft-2: #ffe1d6;
  --blue-soft: #d7ecef;
  --card: #ffffff;
  --line: rgba(43, 37, 29, 0.08);
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-num: "DM Serif Display", "Zen Maru Gothic", serif;
  --radius-pill: 999px;
  --radius-card: 32px;
  --radius-md: 20px;
  /* Inner max width — コンテンツの最大幅。セクション背景は幅いっぱい、コンテンツはこれで中央される。 */
  --max-w: 1440px;
  --pad-x: 40px;
}

.tnum { font-variant-numeric: tabular-nums; }
.marker {
  background: linear-gradient(transparent 60%, var(--soft-1) 60%);
  padding: 0 4px;
}
.marker.accent { color: var(--primary-deep); }
.marker--sage {
  background: linear-gradient(transparent 60%, #e2eed3 60%);
  padding: 0 6px;
}

/* ============================================================
   2. Header (fixed) + hamburger
   ============================================================ */
.vc__header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px max(var(--pad-x), calc((100% - var(--max-w)) / 2));
  background: transparent;
  transition: background 0.2s, padding 0.2s;
}
.vc__header.is-scrolled {
  background: rgba(253, 248, 238, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px max(var(--pad-x), calc((100% - var(--max-w)) / 2));
}
.vc__header-inner {
  display: flex; align-items: center; justify-content: space-between;
  background: white; border-radius: var(--radius-pill);
  padding: 14px 18px 14px 24px; width: 100%;
  box-shadow: 0 4px 24px rgba(43,37,29,0.06);
  gap: 16px;
}
.vc__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.vc__logo-img { height: 56px; width: auto; display: block; user-select: none; }
.vc__logo--footer .vc__logo-img { height: 64px; }

.vc__nav { display: flex; gap: 6px; }
.vc__nav-link {
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--fg);
  text-decoration: none; transition: background 0.15s;
  white-space: nowrap;
}
.vc__nav-link:hover { background: var(--soft-1); }
.vc__nav-link.is-active { background: var(--primary); color: white; }

.vc__header-cta {
  padding: 12px 22px; background: var(--primary); color: white;
  border: 0; border-radius: 999px; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
}
.vc__header-cta svg { width: 16px; height: 16px; }

/* Hamburger button — hidden on PC, shown on SP */
.vc__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: var(--primary);
  border: 0; border-radius: 999px;
  padding: 0;
}
.vc__hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.vc__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vc__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vc__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   3. Hero
   ============================================================ */
.vc__hero {
  padding: 36px max(var(--pad-x), calc((100% - var(--max-w)) / 2)) 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
  position: relative;
}
.vc__hero-text { padding: 24px 0; }
.vc__hero-badges { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.vc__hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.vc__hero-badge--orange { background: var(--soft-2); color: var(--primary-deep); }
.vc__hero-badge--green { background: #e2eed3; color: var(--accent-deep); }
.vc__hero-badge--pink { background: #fce4e1; color: #c66161; }

.vc__hero-h1 {
  font-family: var(--font-display); font-size: 54px; line-height: 1.5;
  font-weight: 700; letter-spacing: 0.04em; margin: 0 0 24px;
  word-break: keep-all; line-break: strict; text-wrap: pretty;
  overflow-wrap: anywhere;
}
.vc__hero-sub {
  font-size: 16px; line-height: 2; margin: 0 0 30px; color: #4a4138;
}
.vc__hero-cta-row { display: flex; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }

.vc__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 20px 30px; border-radius: 999px; border: 0;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  text-decoration: none; letter-spacing: 0.04em;
  cursor: pointer;
}
.vc__btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.vc__btn--primary {
  background: var(--primary); color: white;
  box-shadow: 0 6px 0 var(--primary-deep), 0 12px 24px rgba(240,133,82,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.vc__btn--primary:hover { transform: translateY(-1px); }
.vc__btn--secondary {
  background: var(--accent); color: white;
  box-shadow: 0 6px 0 var(--accent-deep), 0 12px 24px rgba(164,193,154,0.35);
}

.vc__hero-meta {
  display: inline-flex; align-items: center; gap: 14px;
  background: white; padding: 12px 18px;
  border-radius: var(--radius-pill); border: 2px dashed var(--soft-1);
}
.vc__hero-meta-icon {
  width: 32px; height: 32px; background: var(--accent); border-radius: 999px;
  display: grid; place-items: center; color: white;
  flex: 0 0 32px;
}
.vc__hero-meta-icon svg { width: 16px; height: 16px; }
.vc__hero-meta-text { font-size: 12.5px; }
.vc__hero-meta-text b { color: var(--primary-deep); font-weight: 700; }

.vc__hero-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc__hero-blob {
  position: absolute;
  left: -30px; top: -20px;
  width: 200px; height: 200px;
  background: var(--soft-2);
  border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
  z-index: 0; opacity: 0.85;
}
.vc__hero-blob-2 {
  position: absolute;
  right: -40px; bottom: -30px;
  width: 220px; height: 220px;
  background: var(--soft-1);
  border-radius: 60% 40% 50% 55% / 45% 60% 40% 55%;
  z-index: 0; opacity: 0.85;
}
.vc__hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 32px;
  z-index: 1;
}
.vc__hero-photo--real {
  overflow: hidden;
  background: var(--soft-1);
  box-shadow: 0 24px 60px rgba(43,37,29,0.14);
  border: 6px solid white;
}
.vc__hero-photo--real img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* ============================================================
   4. Stats
   ============================================================ */
.vc__stats {
  margin: 0 max(var(--pad-x), calc((100% - var(--max-w)) / 2));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative; z-index: 2; transform: translateY(-40px);
}
.vc__stat {
  background: white; border-radius: var(--radius-card); padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(43,37,29,0.06);
  position: relative; overflow: hidden;
}
.vc__stat:nth-child(1) { background: var(--soft-2); }
.vc__stat:nth-child(2) { background: var(--soft-1); }
.vc__stat:nth-child(3) { background: #e2eed3; }
.vc__stat:nth-child(4) { background: var(--blue-soft); }
.vc__stat-num { font-family: var(--font-num); font-size: 56px; line-height: 1; letter-spacing: 0.02em; }
.vc__stat:nth-child(1) .vc__stat-num { color: var(--primary-deep); }
.vc__stat:nth-child(2) .vc__stat-num { color: #c89030; }
.vc__stat:nth-child(3) .vc__stat-num { color: var(--accent-deep); }
.vc__stat:nth-child(4) .vc__stat-num { color: #4892b8; }
.vc__stat-suffix { font-size: 14px; margin-left: 4px; opacity: 0.7; }
.vc__stat-label { font-size: 13px; margin-top: 10px; font-weight: 600; }

/* ============================================================
   5. Section title
   ============================================================ */
.vc__section { padding: 100px max(var(--pad-x), calc((100% - var(--max-w)) / 2)); position: relative; }
.vc__section--cream { background: var(--soft-1); }
.vc__section--white { background: white; }
.vc__section-title-wrap { text-align: center; margin-bottom: 56px; }
.vc__section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; padding: 8px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--primary-deep);
  letter-spacing: 0.18em; margin-bottom: 18px;
}
.vc__section-eyebrow svg { width: 14px; height: 14px; }
.vc__section-eyebrow--sage { color: var(--accent-deep); background: white; }
.vc__section-eyebrow--sage svg { color: var(--accent-deep); }
.vc__section-h2 {
  font-family: var(--font-display); font-size: 44px; line-height: 1.45;
  font-weight: 700; letter-spacing: 0.04em; margin: 0;
  word-break: keep-all; line-break: strict; text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ============================================================
   6. Philosophy / Features
   ============================================================ */
.vc__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vc__feature {
  background: white; border-radius: var(--radius-card); padding: 36px 22px 28px;
  text-align: center; position: relative;
  border: 2px solid var(--bg);
  transition: transform 0.2s;
}
.vc__feature:hover { transform: translateY(-4px); }
.vc__feature-num {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-num); font-size: 36px; line-height: 1;
  color: var(--soft-2);
}
.vc__feature-icon {
  width: 96px; height: 96px; border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
  display: grid; place-items: center; margin: 0 auto 22px;
}
.vc__feature-icon svg { width: 38px; height: 38px; color: white; }
.vc__feature:nth-child(1) .vc__feature-icon { background: var(--primary); }
.vc__feature:nth-child(2) .vc__feature-icon { background: var(--accent); border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%; }
.vc__feature:nth-child(3) .vc__feature-icon { background: #f4b8b1; border-radius: 50% 50% 40% 60% / 70% 30% 70% 30%; }
.vc__feature:nth-child(4) .vc__feature-icon { background: #6fa8da; border-radius: 60% 40% 50% 50% / 30% 70% 30% 70%; }
.vc__feature-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  line-height: 1.6; margin: 0 0 12px;
}
.vc__feature-body { font-size: 13px; line-height: 1.85; color: #4a4138; margin: 0; }

/* ============================================================
   7. Services
   ============================================================ */
.vc__svc-tabs { display: flex; gap: 12px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.vc__svc-tab {
  padding: 14px 28px; border-radius: 999px; font-family: var(--font-display);
  font-weight: 700; font-size: 16px; background: white;
}
.vc__svc-tab--insurance { background: var(--secondary); color: white; }
.vc__svc-tab--disability { background: var(--blue-soft); color: #4892b8; }
.vc__svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vc__svc-card {
  background: white; border-radius: var(--radius-card); padding: 28px 22px;
  border: 2px solid var(--bg); position: relative;
}
.vc__svc-card[data-cat="insurance"] { border-color: rgba(244,184,177,0.5); }
.vc__svc-card[data-cat="disability"] { border-color: rgba(72,146,184,0.2); }
.vc__svc-card-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.vc__svc-card[data-cat="insurance"] .vc__svc-card-tag { background: var(--secondary); color: white; }
.vc__svc-card[data-cat="disability"] .vc__svc-card-tag { background: var(--blue-soft); color: #4892b8; }
.vc__svc-icon {
  width: 64px; height: 64px; border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%;
  background: var(--soft-2); display: grid; place-items: center; margin-bottom: 16px;
}
.vc__svc-card[data-cat="disability"] .vc__svc-icon { background: var(--blue-soft); }
.vc__svc-icon svg { width: 30px; height: 30px; color: var(--primary-deep); }
.vc__svc-card[data-cat="disability"] .vc__svc-icon svg { color: #4892b8; }
.vc__svc-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.vc__svc-body { font-size: 12.5px; line-height: 1.85; color: #4a4138; margin: 0; }

/* ============================================================
   8. Company / About
   ============================================================ */
.vc__company-wrap {
  background: white; border-radius: var(--radius-card); padding: 48px;
  box-shadow: 0 12px 40px rgba(43,37,29,0.05);
}
.vc__company-grid {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.vc__greeting-photo {
  aspect-ratio: 4/5; border-radius: var(--radius-card);
  margin: 0; width: 100%;
}
.vc__greeting-photo--real { overflow: hidden; background: var(--soft-1); position: relative; }
.vc__greeting-photo--real img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.vc__greeting-text { padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; }
.vc__greeting-eyebrow {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 400; letter-spacing: 0.22em;
  color: var(--primary-deep); background: var(--soft-2);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.vc__greeting-h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  line-height: 1.55; color: var(--primary-deep); margin: 0 0 14px;
  word-break: keep-all; line-break: strict; text-wrap: pretty;
}
.vc__greeting-intro {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  line-height: 1.8; color: var(--primary-deep); margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.vc__greeting-body {
  font-size: 13.5px; line-height: 1.95;
  white-space: pre-line; margin: 0 0 18px; color: #4a4138;
}
.vc__greeting-sign {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--soft-1); padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.vc__greeting-sign svg { width: 14px; height: 14px; color: var(--primary); }

.vc__company-info {
  background: var(--bg); border-radius: 24px;
  padding: 24px 26px; align-self: stretch;
}
.vc__company-info-label {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 400; letter-spacing: 0.18em;
  color: var(--primary-deep);
  margin-bottom: 18px; line-height: 1.3;
}
.vc__company-info-label small {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); margin-top: 2px;
}
.vc__company-info dl {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; row-gap: 10px; margin: 0;
  align-items: center;
}
.vc__company-info dt {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: white; color: var(--primary-deep); padding: 6px 12px;
  border-radius: 999px; text-align: center; min-width: 70px;
  white-space: nowrap; line-height: 1.3;
}
.vc__company-info dd { margin: 0; font-size: 15px; line-height: 1.7; color: #2b251d; }

/* ============================================================
   9. Flow / Steps
   ============================================================ */
.vc__steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
  position: relative;
  padding: 20px 0;
}
.vc__step {
  position: relative; padding: 32px 16px 28px;
  border-radius: var(--radius-card);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.vc__step:nth-child(1) { background: var(--soft-2); }
.vc__step:nth-child(2) { background: #e9efde; }
.vc__step:nth-child(3) { background: #fce4e1; }
.vc__step:nth-child(4) { background: var(--blue-soft); }
.vc__step:nth-child(5) { background: #f5e6c8; }
/* Chevron arrow between cards (PC: horizontal ›) */
.vc__step::after {
  content: "›";
  position: absolute;
  right: -22px; top: 50%;
  width: 34px; height: 34px; border-radius: 999px;
  background: white; color: var(--primary-deep);
  font-family: "DM Serif Display", serif;
  font-size: 30px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  padding-bottom: 4px;
  transform: translate(0, -50%);
  box-shadow: 0 4px 12px rgba(43,37,29,0.12);
  z-index: 3;
}
.vc__step:last-child::after { display: none; }
.vc__step-num {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-num); font-size: 13px; color: var(--primary-deep);
  margin-bottom: 12px; letter-spacing: 0.18em;
}
.vc__step-num b { font-size: 44px; font-weight: 400; line-height: 1; }
.vc__step-key {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  margin: 0 0 16px; letter-spacing: 0.04em; color: #2b251d;
}
.vc__step-icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: white;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(43,37,29,0.08);
}
.vc__step-icon-circle svg { width: 28px; height: 28px; color: var(--primary-deep); }
.vc__step:nth-child(2) .vc__step-icon-circle svg { color: var(--accent-deep); }
.vc__step:nth-child(3) .vc__step-icon-circle svg { color: #c66161; }
.vc__step:nth-child(4) .vc__step-icon-circle svg { color: #4892b8; }
.vc__step:nth-child(5) .vc__step-icon-circle svg { color: #c89030; }
.vc__step-body { font-size: 12.5px; line-height: 1.8; color: #4a4138; margin: 0; text-wrap: pretty; }

/* ============================================================
  10. Area
   ============================================================ */
.vc__area {
  background: white; border-radius: var(--radius-card); padding: 48px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center;
}
.vc__area-text h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  margin: 0 0 16px;
  word-break: keep-all; line-break: strict; text-wrap: pretty;
  line-height: 1.55;
}
.vc__area-text p { font-size: 14px; line-height: 1.9; margin: 0 0 24px; color: #4a4138; }
.vc__area-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vc__area-chip {
  padding: 14px 0; border-radius: 999px; background: var(--soft-2);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--primary-deep); text-align: center;
}
.vc__area-chip:nth-child(3n+2) { background: var(--soft-1); color: #c89030; }
.vc__area-chip:nth-child(3n+3) { background: #e2eed3; color: var(--accent-deep); }
.vc__area-map {
  background: transparent; border-radius: var(--radius-card);
  padding: 0; aspect-ratio: 4/3; overflow: hidden;
}
.vc__area-map-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ============================================================
  11. Recruit
   ============================================================ */
.vc__section--recruit {
  background:
    radial-gradient(circle at 12% 18%, rgba(164,193,154,0.20) 0%, transparent 38%),
    radial-gradient(circle at 88% 8%, rgba(240,133,82,0.10) 0%, transparent 32%),
    linear-gradient(180deg, #f3f6e7 0%, #fff1d8 100%);
  position: relative; overflow: hidden;
}
.vc__section--recruit::before {
  content: "";
  position: absolute; left: -120px; bottom: -100px;
  width: 380px; height: 380px;
  background: rgba(164,193,154,0.18);
  border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
  z-index: 0;
}
.vc__section--recruit::after {
  content: "";
  position: absolute; right: -100px; top: 40%;
  width: 280px; height: 280px;
  background: rgba(244,184,177,0.22);
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  z-index: 0;
}
.vc__section--recruit > * { position: relative; z-index: 1; }

.vc__recruit-lead {
  margin: 22px auto 0; max-width: 680px;
  font-size: 15px; line-height: 2; color: #4a4138;
}

.vc__recruit-highlights {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-bottom: 64px;
}
.vc__recruit-highlight {
  background: white; border-radius: var(--radius-card);
  padding: 40px 26px 32px;
  text-align: center; position: relative;
  border: 2px solid rgba(164,193,154,0.35);
  box-shadow: 0 10px 30px rgba(43,37,29,0.05);
  transition: transform 0.2s;
}
.vc__recruit-highlight:hover { transform: translateY(-4px); }
.vc__recruit-highlight-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-num); font-size: 32px; line-height: 1;
  color: rgba(164,193,154,0.45);
}
.vc__recruit-highlight-emoji {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  margin: 0 auto 22px;
  font-size: 44px; line-height: 1;
  border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
}
.vc__recruit-highlight:nth-child(1) .vc__recruit-highlight-emoji { background: var(--soft-2); }
.vc__recruit-highlight:nth-child(2) .vc__recruit-highlight-emoji {
  background: #e2eed3; border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%;
}
.vc__recruit-highlight:nth-child(3) .vc__recruit-highlight-emoji {
  background: var(--soft-1); border-radius: 50% 50% 40% 60% / 70% 30% 70% 30%;
}
.vc__recruit-highlight-label {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--fg); margin: 0; letter-spacing: 0.04em;
}

.vc__recruit-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 40px 0 28px;
}
.vc__recruit-divider-deco {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: white; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(43,37,29,0.06);
  font-family: "DM Serif Display", serif;
  font-size: 14px; color: var(--accent-deep);
}
.vc__recruit-divider-text {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--fg); letter-spacing: 0.06em; padding: 0 4px;
  white-space: nowrap;
}

.vc__recruit-benefits {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 12px;
}
.vc__recruit-benefit {
  background: white; border-radius: 999px; padding: 13px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #2f3d2a;
  box-shadow: 0 2px 8px rgba(43,37,29,0.04);
  border: 1.5px solid transparent;
  transition: transform 0.15s;
  white-space: nowrap; min-width: 0;
}
.vc__recruit-benefit:hover { transform: translateY(-1px); }
.vc__recruit-benefit:nth-child(5n+1) { border-color: rgba(164,193,154,0.45); }
.vc__recruit-benefit:nth-child(5n+2) { border-color: rgba(232,185,90,0.45); }
.vc__recruit-benefit:nth-child(5n+3) { border-color: rgba(240,133,82,0.30); }
.vc__recruit-benefit:nth-child(5n+4) { border-color: rgba(244,184,177,0.55); }
.vc__recruit-benefit:nth-child(5n+5) { border-color: rgba(215,236,239,0.85); }
.vc__recruit-benefit-check {
  flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: white;
}
.vc__recruit-benefit-check svg { width: 12px; height: 12px; }
.vc__recruit-benefit:nth-child(5n+2) .vc__recruit-benefit-check { background: #e8b95a; }
.vc__recruit-benefit:nth-child(5n+3) .vc__recruit-benefit-check { background: var(--primary); }
.vc__recruit-benefit:nth-child(5n+4) .vc__recruit-benefit-check { background: var(--secondary); }
.vc__recruit-benefit:nth-child(5n+5) .vc__recruit-benefit-check { background: #6fa8da; }
.vc__recruit-benefit-label { line-height: 1.4; }

/* Staff cards */
.vc__recruit-voices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-bottom: 20px;
}
.vc__staffcard {
  --card-deep: var(--primary-deep);
  --card-accent: var(--soft-2);
  background: white; border-radius: 28px;
  padding: 28px 26px 26px;
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 12px 32px rgba(43,37,29,0.06);
  border: 2px solid var(--bg);
  overflow: hidden;
}
.vc__staffcard[data-tone="blue"]  { --card-deep: #4f7eb8; --card-accent: #dce8fa; }
.vc__staffcard[data-tone="cream"] { --card-deep: #c89030; --card-accent: #fff1d8; }
.vc__staffcard[data-tone="pink"]  { --card-deep: #c26b85; --card-accent: #fce4e1; }
.vc__staffcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 90px;
  background: var(--card-accent); z-index: 0;
}
.vc__staffcard-top {
  display: flex; align-items: center; gap: 16px;
  position: relative; z-index: 1;
}
.vc__staffcard-portrait {
  width: 92px; height: 92px; border-radius: 999px;
  background: white; object-fit: cover; flex: 0 0 92px;
  border: 4px solid white;
  box-shadow: 0 6px 16px rgba(43,37,29,0.12);
}
.vc__staffcard-id { min-width: 0; }
.vc__staffcard-id-en {
  font-family: var(--font-num); font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; color: var(--card-deep);
  margin-bottom: 4px;
}
.vc__staffcard-name {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: #2b251d; letter-spacing: 0.04em; line-height: 1.2;
}
.vc__staffcard-message {
  position: relative; margin: 0;
  padding: 0 4px 0 18px; z-index: 1;
}
.vc__staffcard-message-mark {
  position: absolute; left: -4px; top: -14px;
  font-family: var(--font-num); font-size: 56px; line-height: 1;
  color: var(--card-deep); opacity: 0.25;
  pointer-events: none;
}
.vc__staffcard-message p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px; line-height: 1.85; font-weight: 700;
  color: var(--card-deep);
  white-space: pre-line; letter-spacing: 0.02em;
}
.vc__staffcard-joy {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--bg); border-radius: 16px;
  z-index: 1;
}
.vc__staffcard-joy-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--card-deep);
  background: white; padding: 4px 10px; border-radius: 999px;
  margin-top: 0; white-space: nowrap;
  align-self: center;
}
.vc__staffcard-joy-text {
  font-size: 13px; line-height: 1.6;
  color: #2b251d; font-weight: 600;
}
.vc__staffcard-quals {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 14px; border-top: 2px dashed var(--card-accent);
  z-index: 1;
}
.vc__staffcard-quals-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--muted); flex: 0 0 auto;
}
.vc__staffcard-quals-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.vc__staffcard-qual {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--card-deep); background: var(--card-accent);
  padding: 5px 11px; border-radius: 999px;
  letter-spacing: 0.02em;
}

.vc__recruit-voices-note {
  text-align: center; font-size: 11.5px; color: var(--muted);
  margin: 12px 0 8px; line-height: 1.7;
}
.vc__recruit-voices-note a {
  color: var(--primary-deep); text-decoration: none; font-weight: 700;
}
.vc__recruit-voices-note a:hover { text-decoration: underline; }

.vc__recruit-cta-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 44px;
}
.vc__recruit-cta {
  justify-content: center; padding: 18px 24px;
  font-size: 15px; text-align: center; white-space: nowrap;
}
.vc__recruit-cta > span {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; line-height: 1.3;
}
.vc__recruit-cta-sub {
  display: block;
  font-family: var(--font-num);
  font-size: 11px; font-weight: 400; letter-spacing: 0.08em;
  opacity: 0.85; margin-top: 2px;
}

/* ============================================================
  12. FAQ
   ============================================================ */
.vc__faq-list { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; }
.vc__faq-item {
  background: white; border-radius: 24px; padding: 24px 28px;
  border: 2px solid var(--bg);
}
.vc__faq-q {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  margin: 0 0 12px;
}
.vc__faq-q-num {
  flex: 0 0 36px; height: 36px; border-radius: 999px;
  background: var(--primary); color: white;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 16px;
}
.vc__faq-a { font-size: 13.5px; line-height: 1.9; color: #4a4138; margin: 0; padding-left: 50px; }

/* ============================================================
  13. Info
   ============================================================ */
.vc__info {
  background: var(--soft-1); border-radius: var(--radius-card);
  padding: 36px 40px;
  display: grid; grid-template-columns: 120px 1fr auto;
  gap: 28px; align-items: center;
}
.vc__info-label {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--primary-deep);
}
.vc__info-text { font-size: 13.5px; line-height: 1.8; }
.vc__info-cta {
  padding: 18px 28px; background: var(--primary); color: white;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 10px; border: 0;
  text-decoration: none;
}
.vc__info-cta svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ============================================================
  14. Contact
   ============================================================ */
.vc__contact-wrap {
  background: white; border-radius: var(--radius-card); padding: 56px;
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px;
}
.vc__contact-text h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  margin: 0 0 18px; line-height: 1.55;
  word-break: keep-all; line-break: strict; text-wrap: pretty;
  overflow-wrap: anywhere;
}
.vc__contact-text p { font-size: 14px; line-height: 1.9; margin: 0 0 24px; color: #4a4138; }
.vc__contact-tel {
  padding: 24px; background: var(--soft-2); border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.vc__contact-tel-icon {
  width: 56px; height: 56px; border-radius: 999px; background: white;
  display: grid; place-items: center; color: var(--primary-deep);
  flex: 0 0 56px;
}
.vc__contact-tel-icon svg { width: 24px; height: 24px; }
.vc__contact-tel-num {
  font-family: var(--font-num); font-size: 28px; line-height: 1;
  color: var(--primary-deep); white-space: nowrap;
}
.vc__contact-tel-label {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.08em; margin-top: 6px; white-space: nowrap;
}
.vc__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.vc__form-field label {
  display: block; font-family: var(--font-display);
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.vc__form-input, .vc__form-textarea {
  width: 100%; padding: 16px 18px;
  font-size: 14px; font-family: inherit;
  background: var(--bg); border: 2px solid var(--bg);
  border-radius: 14px; outline: none;
}
.vc__form-input:focus, .vc__form-textarea:focus {
  border-color: var(--primary); background: white;
}
.vc__form-textarea { min-height: 140px; resize: vertical; }
.vc__form-submit {
  margin-top: 14px; width: 100%; padding: 22px;
  background: var(--primary); color: white; border: 0; border-radius: 999px;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 0 var(--primary-deep), 0 12px 24px rgba(240,133,82,0.4);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.vc__form-submit svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* ============================================================
  15. Footer
   ============================================================ */
.vc__footer {
  background: white; padding: 56px max(var(--pad-x), calc((100% - var(--max-w)) / 2)) 32px;
  border-top: 2px dashed var(--soft-2);
}
.vc__footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
  margin-bottom: 36px;
}
.vc__footer-addr { font-size: 13px; line-height: 1.9; margin-top: 18px; color: #4a4138; }
.vc__footer-col-title {
  font-family: var(--font-display); font-size: 13px;
  color: var(--primary-deep); font-weight: 700;
  margin-bottom: 14px; letter-spacing: 0.1em;
}
.vc__footer-links { display: grid; gap: 10px; }
.vc__footer-links a { color: var(--fg); text-decoration: none; font-size: 13px; font-weight: 500; }
.vc__footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}

/* ============================================================
  16. Tablet (768–1023px)
   ============================================================ */
@media (max-width: 1023px) {
  body { padding-top: 76px; }

  .vc__header { padding: 14px 20px; }
  .vc__header.is-scrolled { padding: 10px 20px; }
  .vc__header-inner { padding: 10px 14px 10px 16px; }
  .vc__logo-img { height: 44px; }

  .vc__hero { padding: 28px 24px 60px; gap: 28px; grid-template-columns: 1fr 1fr; }
  .vc__hero-h1 { font-size: 38px; }
  .vc__hero-sub { font-size: 14px; }
  .vc__hero-visual { min-height: 380px; }

  .vc__stats { margin: 0 24px; grid-template-columns: repeat(2, 1fr); }
  .vc__stat-num { font-size: 44px; }

  .vc__section { padding: 70px 24px; }
  .vc__section-h2 { font-size: 32px; }
  .vc__section-title-wrap { margin-bottom: 40px; }

  .vc__features { grid-template-columns: repeat(2, 1fr); }
  .vc__svc-grid { grid-template-columns: repeat(2, 1fr); }

  .vc__company-wrap { padding: 32px; }
  .vc__company-grid { grid-template-columns: 180px 1fr; gap: 28px; }
  .vc__company-info { grid-column: 1 / -1; }

  .vc__steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .vc__step::after { display: none; }

  .vc__area { padding: 32px; grid-template-columns: 1fr; gap: 28px; }

  .vc__recruit-highlights { gap: 14px; }
  .vc__recruit-benefits { grid-template-columns: repeat(3, 1fr); }
  .vc__recruit-voices { grid-template-columns: repeat(2, 1fr); }

  .vc__contact-wrap { padding: 36px; grid-template-columns: 1fr; gap: 32px; }
  .vc__contact-text h2 { font-size: 26px; }

  .vc__footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================
  17. Mobile (<768px)
   ============================================================ */
@media (max-width: 767px) {
  body { padding-top: 72px; }

  /* ── Header — fixed + hamburger drawer ── */
  .vc__header { padding: 12px 14px; }
  .vc__header.is-scrolled { padding: 8px 14px; }
  .vc__header-inner { padding: 8px 8px 8px 14px; gap: 10px; }
  .vc__logo-img { height: 40px; }

  /* Hide desktop nav, show hamburger */
  .vc__nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 14px 24px;
    box-shadow: 0 12px 32px rgba(43,37,29,0.12);
    border-radius: 0 0 24px 24px;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
    z-index: 99;
  }
  .vc__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .vc__nav-link {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }
  .vc__nav-link:last-child { border-bottom: 0; }
  .vc__nav-link.is-active { background: var(--soft-2); color: var(--primary-deep); }
  .vc__header-cta { display: none; }
  .vc__hamburger { display: inline-flex; }

  /* ── Hero — stack vertically, text top photo bottom ── */
  .vc__hero {
    padding: 24px 18px 48px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .vc__hero-text { padding: 8px 0 0; }
  .vc__hero-h1 { font-size: 30px; line-height: 1.45; margin-bottom: 18px; }
  .vc__hero-sub { font-size: 14px; line-height: 1.9; margin-bottom: 22px; }
  .vc__hero-cta-row { gap: 10px; }
  .vc__btn { padding: 16px 22px; font-size: 14px; }
  .vc__hero-meta { padding: 10px 14px; gap: 10px; }
  .vc__hero-meta-text { font-size: 11px; }
  .vc__hero-visual { min-height: auto; aspect-ratio: 4/3; }
  .vc__hero-blob { width: 120px; height: 120px; left: -16px; top: -16px; }
  .vc__hero-blob-2 { width: 140px; height: 140px; right: -20px; bottom: -20px; }
  .vc__hero-photo--real { border-width: 4px; }
  .vc__hero-photo { border-radius: 24px; }

  /* ── Stats — 2x2 ── */
  .vc__stats {
    margin: 0 18px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    transform: translateY(-30px);
  }
  .vc__stat { padding: 18px 14px; border-radius: 22px; }
  .vc__stat-num { font-size: 36px; }
  .vc__stat-suffix { font-size: 12px; }
  .vc__stat-label { font-size: 11.5px; margin-top: 6px; }

  /* ── Section base ── */
  .vc__section { padding: 56px 18px; }
  .vc__section-title-wrap { margin-bottom: 32px; }
  .vc__section-h2 { font-size: 24px; line-height: 1.5; }
  .vc__section-eyebrow { font-size: 11px; padding: 6px 14px; margin-bottom: 14px; }

  /* ── Features — 1 col ── */
  .vc__features { grid-template-columns: 1fr; gap: 14px; }
  .vc__feature { padding: 28px 22px 22px; }
  .vc__feature-icon { width: 72px; height: 72px; margin-bottom: 16px; }
  .vc__feature-icon svg { width: 28px; height: 28px; }
  .vc__feature-title { font-size: 16px; }

  /* ── Services — 1 col ── */
  .vc__svc-tabs { gap: 8px; margin-bottom: 24px; }
  .vc__svc-tab { padding: 10px 18px; font-size: 13px; }
  .vc__svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .vc__svc-card { padding: 22px 20px; }

  /* ── Company — stacked ── */
  .vc__company-wrap { padding: 24px 20px; }
  .vc__company-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vc__greeting-photo { max-width: 200px; margin: 0 auto; }
  .vc__greeting-text { padding-top: 0; }
  .vc__greeting-intro { font-size: 14px; }
  .vc__company-info { padding: 18px 18px; }

  /* ── Steps — 1 col with DOWN arrows (per SP setting) ── */
  .vc__steps {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0;
  }
  .vc__step { padding: 22px 18px 22px; flex-direction: row; gap: 14px; text-align: left; align-items: center; }
  .vc__step-num { margin-bottom: 0; flex: 0 0 60px; flex-direction: column; gap: 0; }
  .vc__step-num b { font-size: 28px; }
  .vc__step-icon-circle {
    width: 48px; height: 48px;
    margin: 0; flex: 0 0 48px;
  }
  .vc__step-icon-circle svg { width: 22px; height: 22px; }
  .vc__step-key { font-size: 15px; margin: 0; flex: 0 0 70px; }
  .vc__step-body { font-size: 12px; flex: 1; }
  /* Down-arrow */
  .vc__step::after {
    content: "▾";
    top: auto; bottom: -22px; right: 50%;
    transform: translateX(50%);
    width: 30px; height: 30px;
    font-size: 20px;
    padding-bottom: 2px;
  }

  /* ── Area — stack ── */
  .vc__area { padding: 24px 20px; gap: 24px; }
  .vc__area-text h3 { font-size: 22px; }
  .vc__area-cities { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vc__area-chip { font-size: 13px; padding: 12px 0; }

  /* ── Recruit highlights — stack ── */
  .vc__recruit-highlights {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 36px;
  }
  .vc__recruit-highlight {
    padding: 22px 22px 22px;
    display: flex; align-items: center; gap: 18px; text-align: left;
  }
  .vc__recruit-highlight-emoji {
    width: 64px; height: 64px; font-size: 32px;
    margin: 0; flex: 0 0 64px;
  }
  .vc__recruit-highlight-label { font-size: 16px; flex: 1; }
  .vc__recruit-highlight-num { font-size: 22px; top: 14px; right: 16px; }

  /* ── Benefits — 3 cols per user request ── */
  .vc__recruit-benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .vc__recruit-benefit {
    padding: 10px 8px;
    font-size: 11px;
    gap: 5px;
    justify-content: center;
    white-space: normal;
    text-align: center;
    border-radius: 14px;
  }
  .vc__recruit-benefit-check {
    flex: 0 0 16px; width: 16px; height: 16px;
  }
  .vc__recruit-benefit-check svg { width: 9px; height: 9px; }
  .vc__recruit-benefit-label { line-height: 1.25; font-size: 11px; }

  .vc__recruit-divider-text { font-size: 14px; }

  /* ── Staff cards — horizontal scroll carousel ── */
  .vc__recruit-voices {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 18px 12px;
    margin: 0 -18px 14px;
    scrollbar-width: none;
  }
  .vc__recruit-voices::-webkit-scrollbar { display: none; }
  .vc__staffcard {
    flex: 0 0 86%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .vc__staffcard-portrait { width: 76px; height: 76px; flex: 0 0 76px; }
  .vc__staffcard-name { font-size: 20px; }
  .vc__staffcard-message p { font-size: 14.5px; }

  /* CTA */
  .vc__recruit-cta-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }
  .vc__recruit-cta {
    padding: 16px 20px; font-size: 14px;
    white-space: normal;
  }

  /* ── FAQ ── */
  .vc__faq-item { padding: 18px 20px; }
  .vc__faq-q { font-size: 14px; gap: 12px; }
  .vc__faq-q-num { flex: 0 0 30px; height: 30px; font-size: 14px; }
  .vc__faq-a { font-size: 12.5px; padding-left: 42px; }

  /* ── Info ── */
  .vc__info {
    grid-template-columns: 1fr;
    padding: 24px 22px;
    gap: 16px;
    text-align: center;
  }
  .vc__info-label { font-size: 18px; }
  .vc__info-text { font-size: 12.5px; }

  /* ── Contact ── */
  .vc__contact-wrap { padding: 24px 20px; gap: 24px; }
  .vc__contact-text h2 { font-size: 22px; }
  .vc__contact-text p { font-size: 13px; }
  .vc__contact-tel { padding: 18px; gap: 12px; }
  .vc__contact-tel-num { font-size: 22px; }
  .vc__form-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .vc__form-input, .vc__form-textarea { padding: 13px 14px; font-size: 13.5px; }

  /* ── Footer ── */
  .vc__footer { padding: 40px 20px 24px; }
  .vc__footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .vc__footer-bottom {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}

/* ============================================================
   18. Snow Monkey Forms × vc__form 統合
   ============================================================ */
.vc__contact-form-wrap .snow-monkey-form { background: transparent; border: 0; padding: 0; box-shadow: none; }
.vc__contact-form-wrap .smf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vc__contact-form-wrap .smf-form > .smf-item:nth-of-type(n+3) { grid-column: 1 / -1; }
.vc__contact-form-wrap .smf-item { display: block; margin: 0; }
.vc__contact-form-wrap .smf-item__col { display: block; width: 100%; }
.vc__contact-form-wrap .smf-item__col--label { margin-bottom: 8px; }
.vc__contact-form-wrap .smf-item__label,
.vc__contact-form-wrap .smf-item__label__text {
  display: inline; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: #2b251d; letter-spacing: 0.04em; margin: 0;
}
.vc__contact-form-wrap .smf-required-icon {
  display: inline-block; background: var(--primary); color: #fff; font-size: 11px;
  font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle; letter-spacing: 0.05em;
}
/* div ラッパー .smf-*-control は装飾なし（input/textareaがコントロール本体） */
.vc__contact-form-wrap .smf-text-control,
.vc__contact-form-wrap .smf-email-control,
.vc__contact-form-wrap .smf-tel-control,
.vc__contact-form-wrap .smf-textarea-control,
.vc__contact-form-wrap .smf-select-control {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100%;
}
/* 実際の input/textarea/select 本体に padding & 装飾 */
.vc__contact-form-wrap .smf-text-control__control,
.vc__contact-form-wrap .smf-email-control__control,
.vc__contact-form-wrap .smf-tel-control__control,
.vc__contact-form-wrap .smf-textarea-control__control,
.vc__contact-form-wrap .smf-select-control__control {
  width: 100%; padding: 16px 18px !important; font-size: 14px; font-family: inherit; line-height: 1.6;
  color: #2b251d; background: var(--bg) !important; border: 2px solid var(--bg) !important; border-radius: 14px !important;
  outline: none; appearance: none; -webkit-appearance: none;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease;
}
.vc__contact-form-wrap .smf-text-control:focus,
.vc__contact-form-wrap .smf-email-control:focus,
.vc__contact-form-wrap .smf-tel-control:focus,
.vc__contact-form-wrap .smf-textarea-control:focus,
.vc__contact-form-wrap .smf-select-control:focus {
  border-color: var(--primary); background: #fff;
}
.vc__contact-form-wrap .smf-textarea-control { min-height: 140px; resize: vertical; }
.vc__contact-form-wrap .smf-select-control {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08552' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 18px;
  padding-right: 44px; cursor: pointer;
}
.vc__contact-form-wrap .smf-action { margin-top: 14px; }
.vc__contact-form-wrap .smf-button-control__control,
.vc__contact-form-wrap button[type="submit"] {
  margin-top: 14px; width: 100%; padding: 22px; background: var(--primary); color: #fff;
  border: 0; border-radius: 999px; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 6px 0 var(--primary-deep), 0 12px 24px rgba(240,133,82,0.4);
  display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
}
.vc__contact-form-wrap .smf-error-messages { margin-top: 6px; color: #d54a3a; font-size: 13px; list-style: none; padding-left: 0; }
@media (max-width: 767px) {
  .vc__contact-form-wrap .smf-form { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   19. Gutenberg コアブロック × vc__* デザイン CSS 統合
   ============================================================ */
:where(.wp-block-group) { display: block; }
:where(.wp-block-group__inner-container) { display: contents; }
:where(.wp-block-image, figure.wp-block-image) { margin: 0; padding: 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }

/* ── アイコン PNG の表示サイズ（元neiro.css の svg サイズに合わせる） ── */
.vc__section-eyebrow-icon img { width: 16px; height: 16px; }
.vc__feature-icon img         { width: 38px; height: 38px; }
.vc__svc-icon img             { width: 30px; height: 30px; }
.vc__step-icon-circle img     { width: 28px; height: 28px; }
.vc__hero-meta-icon img       { width: 16px; height: 16px; }
.vc__contact-tel-icon img     { width: 22px; height: 22px; }
.vc__recruit-benefit-check img{ width: 14px; height: 14px; }

/* ── アイコンPNGは黒線画。
       色付き blob 背景に乗る位置 → 白に反転
       白い円背景に乗る位置 → オレンジ(primary-deep)に変換 ── */

/* 白に反転（カラー blob 背景の上） */
.vc__feature-icon img,
.vc__hero-meta-icon img,
.vc__contact-tel-icon img,
.vc__recruit-benefit-check img {
  filter: invert(1) brightness(2);
}

/* オレンジに変換（白円背景の上：FLOW ステップ） */
.vc__step-icon-circle img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(80%) saturate(580%) hue-rotate(-15deg) brightness(95%) contrast(92%);
}
/* SERVICES のアイコンはカテゴリ別の色（オレンジ/ブルー）。元neiro.css の color: var(--primary-deep) / #4892b8 を再現するため別個の filter */
.vc__svc-card[data-cat="insurance"] .vc__svc-icon img {
  /* オレンジ系 (#d96b35) に黒線画を変換： 黒→オレンジは hue-rotate では完全には出ない。
     近似で sepia + hue-rotate を使う */
  filter: brightness(0) saturate(100%) invert(46%) sepia(80%) saturate(580%) hue-rotate(-15deg) brightness(95%) contrast(92%);
}
.vc__svc-card[data-cat="disability"] .vc__svc-icon img {
  /* ブルー系 (#4892b8) に */
  filter: brightness(0) saturate(100%) invert(56%) sepia(20%) saturate(1600%) hue-rotate(165deg) brightness(95%) contrast(85%);
}

/* ── スタッフポートレート 元neiro.css は 92px + 4px白border。
       img 単独ではなく figure.vc__staffcard-portrait をラッパーとして扱う ── */
.vc__staffcard-portrait,
figure.vc__staffcard-portrait.wp-block-image {
  width: 92px; height: 92px; flex: 0 0 92px;
  border-radius: 999px;
  background: #fff;
  border: 4px solid #fff;
  overflow: hidden;
  margin: 0;
}
.vc__staffcard-portrait img {
  width: 100%; height: 100%; border-radius: 999px;
  object-fit: cover;
  display: block;
}

.wp-block-buttons.vc__hero-cta-row {
  display: flex; gap: 14px; margin: 0; flex-wrap: wrap;
}
/* RECRUIT CTA は本番準拠で grid 1fr 1fr、ボタンはコンテナ幅いっぱい */
.wp-block-buttons.vc__recruit-cta-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
.wp-block-button.vc__recruit-cta {
  width: 100%;
}
.wp-block-button.vc__recruit-cta .wp-block-button__link {
  width: 100%;
  min-width: 0 !important;
}
/* ── ボタン2重表示の修正：親 .wp-block-button.vc__btn は装飾を持たず、
       子 .wp-block-button__link だけにボタンスタイルを当てる ── */
.wp-block-button.vc__btn,
.wp-block-button.vc__btn--primary,
.wp-block-button.vc__btn--secondary,
.wp-block-button.vc__info-cta,
.wp-block-button.vc__recruit-cta {
  margin: 0;
  flex: 0 0 auto;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}
/* 子要素 a.wp-block-button__link をボタン本体として装飾 */
.wp-block-button.vc__btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 20px 30px;
  font-family: var(--font-display); font-size: 16px;
  font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}
.wp-block-button.vc__btn--primary .wp-block-button__link {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 0 var(--primary-deep), 0 12px 24px rgba(240,133,82,0.4);
}
.wp-block-button.vc__btn--primary .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.vc__btn--secondary .wp-block-button__link {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 0 var(--accent-deep), 0 12px 24px rgba(164,193,154,0.35);
}
.wp-block-button.vc__btn--secondary .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.vc__info-cta .wp-block-button__link {
  background: var(--primary); color: #fff;
  padding: 14px 28px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 0 var(--primary-deep), 0 8px 20px rgba(240,133,82,0.3);
}
/* RECRUIT 大型CTA（応募する・問い合わせる / SNSで雰囲気を見る） */
.wp-block-button.vc__recruit-cta .wp-block-button__link {
  padding: 22px 36px;
  font-size: 17px;
  min-width: 280px;
  justify-content: center;
}

.wp-block-quote.vc__staffcard-message { border-left: 0; margin: 0; padding: 0; }
.wp-block-quote.vc__staffcard-message p { margin: 0; }

/* 段落型要素の余白リセット — WordPress wp-block-paragraph のデフォルト24pxマージンを !important で打ち消す */
.vc__hero-badge, .vc__svc-card-tag, .vc__svc-tab, .vc__area-chip,
.vc__recruit-highlight-num, .vc__recruit-highlight-emoji,
.vc__recruit-benefit-label, .vc__recruit-divider-text,
.vc__staffcard-id-en, .vc__staffcard-name,
.vc__staffcard-joy-label, .vc__staffcard-joy-text,
.vc__staffcard-quals-label, .vc__staffcard-qual,
.vc__faq-q-num, .vc__faq-q-text,
.vc__info-label,
.vc__contact-tel-label,
.vc__stat-num, .vc__stat-label, .vc__stat-suffix,
.vc__svc-body,
.vc__greeting-sign,
.vc__hero-meta-text,
.vc__recruit-voices-note,
.vc__section-eyebrow-label {
  margin: 0 !important;
}
/* 本番neiro.css 通りの margin を持つ要素（margin:0 リセットから除外して個別復元） */
.vc__hero-sub          { margin: 0 0 30px !important; }
.vc__greeting-eyebrow  { margin: 0 0 14px !important; }
.vc__greeting-intro    { margin: 0 0 14px !important; }
.vc__greeting-body     { margin: 0 0 18px !important; white-space: pre-line; }
.vc__recruit-lead      { margin: 22px auto 0 !important; text-align: center; max-width: 680px; }
.vc__hero-h1           { margin: 0 0 24px !important; }
.vc__section-h2        { margin: 0 0 14px !important; }
.vc__company-info-label{ margin: 0 0 18px !important; }
.vc__feature-num       { margin: 0 0 6px !important; }
.vc__feature-title     { margin: 0 0 12px !important; }
.vc__feature-body      { margin: 0 !important; }
.vc__step-num          { margin: 0 0 6px !important; }
.vc__step-body         { margin: 12px 0 0 !important; }
.vc__svc-body          { margin: 0 !important; }
.vc__faq-q-text        { margin: 0 !important; }
.vc__faq-a             { margin: 12px 0 0 !important; padding-left: 36px !important; }
.vc__info-text         { margin: 0 !important; }
.vc__contact-tel-num   { margin: 0 !important; }
.vc__contact-tel-label { margin: 0 !important; }
.vc__recruit-highlight-emoji { margin: 0 auto 22px !important; }
.vc__recruit-highlight-num   { margin: 0 !important; }
.vc__recruit-highlight-label { margin: 0 !important; text-align: center; }
.vc__recruit-highlight       { text-align: center; }

/* ============================================================
   20. （削除） SWELL の標準スクロール挙動（--swl-offset_y）に任せるため、
        scroll-padding-top !important / scroll-margin-top の独自オーバーライドは廃止。
   ============================================================ */

/* ============================================================
   20. アンカー遷移時の固定ヘッダー被り対策
   SWELL が html の inline style で --swl-offset_y: 32px を設定するため、
   :root での上書きは効かない。最終プロパティ scroll-padding-top に !important で当てる。
   .vc__header が 112-128px なので、120px を設定して被りを防ぐ。
   ============================================================ */
html {
  scroll-padding-top: 120px !important;
}

/* ============================================================
   21. ボタンにアイコン追加 + サイズ拡大 + 電話番号オレンジ復活
   ============================================================ */

/* ── ボタンサイズ：元 .vc__btn と完全一致（20px 30px、min-widthなし） ── */
.wp-block-button.vc__btn .wp-block-button__link {
  padding: 20px 30px;
  font-size: 16px;
  gap: 10px;
  justify-content: center;
}
/* HERO の CTA行：本番値 gap 14px / margin-bottom 28px に揃える */
.wp-block-buttons.vc__hero-cta-row {
  gap: 14px !important;
  margin: 0 0 28px 0 !important;
}
/* RECRUIT CTA：本番値再現
   構造：アイコンと本体テキストを横並び中央寄せ、サブテキスト(::after)は本体真下に absolute */
.wp-block-button.vc__btn.vc__recruit-cta .wp-block-button__link,
.wp-block-button.vc__btn--primary.vc__recruit-cta .wp-block-button__link,
.wp-block-button.vc__btn--secondary.vc__recruit-cta .wp-block-button__link {
  padding: 12px 24px 28px !important;
  font-size: 15px !important;
  min-width: 0 !important;
  width: 100%;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1.5;
  gap: 10px !important;
}
/* アイコンは flex item として通常配置（本体テキストのすぐ左） */
.wp-block-button.vc__btn.vc__recruit-cta .wp-block-button__link::before {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
}
/* サブテキストはボタン下半分に absolute 配置（中央揃え） */
.wp-block-button.vc__btn--primary.vc__recruit-cta .wp-block-button__link::after,
.wp-block-button.vc__btn--secondary.vc__recruit-cta .wp-block-button__link::after {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 8px !important;
  text-align: center;
  display: block !important;
  font-size: 11px !important;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.08em;
}
/* note 下〜CTAボタン上の余白 44px */
.wp-block-buttons.vc__recruit-cta-row {
  margin-top: 44px !important;
}
.vc__recruit-voices-note {
  margin-bottom: 8px !important;
}

/* ── ボタン頭の左にアイコンを CSS で追加（Gutenberg core/button はテキストのみのため） ── */
.wp-block-button.vc__btn .wp-block-button__link::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 22px;
  /* アイコンPNGは黒線画なので白に反転 */
  filter: brightness(0) invert(1);
}
/* お問い合わせ・応募系（primary）= メール */
.wp-block-button.vc__btn--primary .wp-block-button__link::before,
.wp-block-button.vc__info-cta .wp-block-button__link::before {
  background-image: url('/wp-content/themes/swell_child/assets/img/icons/icon-mail.png');
}
/* 求人を見る・SNS（secondary）= 人 */
.wp-block-button.vc__btn--secondary .wp-block-button__link::before {
  background-image: url('/wp-content/themes/swell_child/assets/img/icons/icon-people.png');
}

/* ── ヘッダーCTA「お問い合わせ」にもアイコン（元デザインでヘッダー右上） ── */
.vc__header-cta:not(:has(svg))::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/wp-content/themes/swell_child/assets/img/icons/icon-mail.png') no-repeat center / contain;
  filter: brightness(0) invert(1);
  flex: 0 0 16px;
  margin-right: 4px;
}

/* ── 電話番号のオレンジ強調：<b> から <strong> に置換した影響で
       元 CSS `.vc__hero-meta-text b { color: var(--primary-deep) }` が効かなくなったので追加 ── */
.vc__hero-meta-text b,
.vc__hero-meta-text strong {
  color: var(--primary-deep);
  font-weight: 700;
}

/* ── CONTACT セクションの電話番号もオレンジ強調 ── */
.vc__contact-tel-num a,
.vc__contact-tel-num strong,
.vc__contact-tel-num b {
  color: var(--primary-deep);
  text-decoration: none;
  font-weight: 700;
}

/* ============================================================
   22. アイコン系の中央配置を強制（blob内でのアイコン上寄り問題対策）
   元 neiro.css は display: grid; place-items: center; だが、
   figure.wp-block-image の display: flex; flex-direction: column が
   place-items を上書きしてアイコンが上寄りになる。flex の中央配置で強制統一。
   ============================================================ */
.vc__feature-icon,
.vc__svc-icon,
.vc__step-icon-circle,
.vc__hero-meta-icon,
.vc__contact-tel-icon,
.vc__recruit-benefit-check,
.vc__section-eyebrow-icon,
.vc__recruit-highlight-emoji {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* figure 内の余白を完全リセット */
  padding: 0;
  margin: 0 auto 22px;
}

/* 各要素ごとの margin はあとで個別調整（一旦中央寄せ優先） */
.vc__svc-icon       { margin-bottom: 16px; }
.vc__step-icon-circle { margin: 0; }
.vc__hero-meta-icon { margin: 0; }
.vc__contact-tel-icon { margin: 0; }
.vc__recruit-benefit-check { margin: 0; }
.vc__section-eyebrow-icon { margin: 0; }

/* img 自体の余分なマージンも完全リセット */
.vc__feature-icon img,
.vc__svc-icon img,
.vc__step-icon-circle img,
.vc__hero-meta-icon img,
.vc__contact-tel-icon img,
.vc__recruit-benefit-check img,
.vc__section-eyebrow-icon img {
  margin: 0 !important;
  display: block;
}

/* ============================================================
   23. RECRUIT CTA ボタンのサブテキスト追加（::after 擬似要素）
   core/button はテキストのみのため、ボタン内に <small> サブを追加できない。
   CSS の content でボタン2つそれぞれにサブ文言を表示。
   ============================================================ */
.wp-block-button.vc__btn--primary.vc__recruit-cta .wp-block-button__link {
  flex-direction: column;
  gap: 4px;
}
.wp-block-button.vc__btn--primary.vc__recruit-cta .wp-block-button__link::after {
  content: "未経験OK / お気軽にどうぞ";
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.1em;
}
.wp-block-button.vc__btn--secondary.vc__recruit-cta .wp-block-button__link {
  flex-direction: column;
  gap: 4px;
}
.wp-block-button.vc__btn--secondary.vc__recruit-cta .wp-block-button__link::after {
  content: "Instagram @1001neiro / Threads";
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.1em;
}
/* RECRUIT CTAボタンのアイコンは横向きに（メインテキスト左、サブ下） */
.wp-block-button.vc__recruit-cta .wp-block-button__link::before {
  /* アイコンを左に */
  margin-right: 8px;
}

/* ============================================================
   24. HERO CTAボタン 大型化＆立体shadow強調＆電話番号大型化
   見本との比較で「ボタンが小さく / shadow が浅い」差分を埋める
   ============================================================ */

/* ── ボタンサイズ：本番値（padding 20px 30px、font-size 16px、高さ 67px）に揃える ── */
.wp-block-button.vc__btn .wp-block-button__link {
  padding: 20px 30px !important;
  font-size: 16px !important;
  justify-content: center;
}
/* primary（オレンジ）の立体shadow 強調 */
.wp-block-button.vc__btn--primary .wp-block-button__link {
  box-shadow:
    0 6px 0 var(--primary-deep),
    0 14px 28px rgba(240, 133, 82, 0.45) !important;
}
/* secondary（緑）の立体shadow 強調 */
.wp-block-button.vc__btn--secondary .wp-block-button__link {
  box-shadow:
    0 6px 0 var(--accent-deep),
    0 14px 28px rgba(164, 193, 154, 0.4) !important;
}

/* ── CONTACT セクションの電話アイコン円：本番値 白56px + オレンジアイコン ── */
.vc__contact-tel-icon,
figure.vc__contact-tel-icon.wp-block-image {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  background: #fff !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
/* アイコン内 img：オレンジに変換（白から上書き） */
.vc__contact-tel-icon img {
  width: 22px !important;
  height: 22px !important;
  filter: brightness(0) saturate(100%) invert(46%) sepia(80%) saturate(580%) hue-rotate(-15deg) brightness(95%) contrast(92%) !important;
}
/* CONTACT セクションの電話番号：DM Serif Display オレンジ
   font-size はブロックエディタ側で個別設定するため指定しない */
.vc__contact-tel-num,
p.vc__contact-tel-num {
  font-family: var(--font-num) !important;
  line-height: 1.1 !important;
  color: var(--primary-deep) !important;
  white-space: nowrap;
}
.vc__contact-tel-num a {
  color: var(--primary-deep) !important;
  text-decoration: none;
  font-weight: 400;
}

/* ============================================================
   25. SERVICES カードのカテゴリ別カラー
   介護保険 (insurance) = ピンク／オレンジ系
   障がい福祉 (disability) = ブルー系
   ============================================================ */

/* ── 介護保険カード（訪問介護・介護予防）：ピンク・オレンジ ── */
.vc__svc-card--insurance {
  background: linear-gradient(160deg, rgba(255, 225, 214, 0.55) 0%, rgba(255, 241, 216, 0.25) 100%) !important;
  border: 1px solid rgba(244, 184, 177, 0.6) !important;
}
.vc__svc-card--insurance .vc__svc-card-tag {
  background: var(--soft-2);
  color: var(--primary-deep);
}
.vc__svc-card--insurance .vc__svc-icon,
.vc__svc-card--insurance figure.vc__svc-icon.wp-block-image {
  background: var(--soft-2) !important;
}
.vc__svc-card--insurance .vc__svc-icon img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(60%) saturate(1900%) hue-rotate(-12deg) brightness(95%) contrast(95%) !important;
}

/* ── 障がい福祉カード（居宅介護・重度訪問介護・同行援護・行動援護・移動支援）：ブルー ── */
.vc__svc-card--disability {
  background: linear-gradient(160deg, rgba(215, 236, 239, 0.55) 0%, rgba(215, 236, 239, 0.15) 100%) !important;
  border: 1px solid rgba(72, 146, 184, 0.35) !important;
}
.vc__svc-card--disability .vc__svc-card-tag {
  background: var(--blue-soft);
  color: #4892b8;
}
.vc__svc-card--disability .vc__svc-icon,
.vc__svc-card--disability figure.vc__svc-icon.wp-block-image {
  background: var(--blue-soft) !important;
}
.vc__svc-card--disability .vc__svc-icon img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(20%) saturate(1600%) hue-rotate(165deg) brightness(90%) contrast(90%) !important;
}

/* C-21で書いた data-cat ベースの古いセレクタを無効化（クラスベースに統一） */
.vc__svc-card[data-cat="insurance"] .vc__svc-icon img,
.vc__svc-card[data-cat="disability"] .vc__svc-icon img {
  filter: unset;
}

/* ============================================================
   26. スタッフカード3色（青/クリーム/ピンク）
   元neiro.css の data-tone 属性が Gutenberg で保存されないため
   .vc__staffcard--blue / --cream / --pink クラスベースで適用
   ============================================================ */
.vc__staffcard--blue  { --card-deep: #4f7eb8; --card-accent: #dce8fa; }
.vc__staffcard--cream { --card-deep: #c89030; --card-accent: #fff1d8; }
.vc__staffcard--pink  { --card-deep: #c26b85; --card-accent: #fce4e1; }

/* 各カードのトップヘッダー(上部90px)に色を強制指定（元CSS の ::before が --card-accent を参照） */
.vc__staffcard--blue::before  { background: #dce8fa !important; }
.vc__staffcard--cream::before { background: #fff1d8 !important; }
.vc__staffcard--pink::before  { background: #fce4e1 !important; }

/* 引用マーク(") の色も --card-deep ベースで強制 */
.vc__staffcard--blue  .vc__staffcard-message-mark { color: #4f7eb8; }
.vc__staffcard--cream .vc__staffcard-message-mark { color: #c89030; }
.vc__staffcard--pink  .vc__staffcard-message-mark { color: #c26b85; }

/* Staff #XX のラベル色 */
.vc__staffcard--blue  .vc__staffcard-id-en { color: #4f7eb8; }
.vc__staffcard--cream .vc__staffcard-id-en { color: #c89030; }
.vc__staffcard--pink  .vc__staffcard-id-en { color: #c26b85; }

/* ============================================================
   27. スタッフカード内要素の Gutenberg block-spacing リセット
   wp:group ブロックがデフォルトで 16px 間隔を追加するため
   ============================================================ */
.vc__staffcard-top,
.vc__staffcard-message,
.vc__staffcard-joy,
.vc__staffcard-quals,
.vc__staffcard-quals-list,
.vc__staffcard-id {
  margin: 0 !important;
}

/* ============================================================
   28. RECRUIT 背景装飾を最背面に
   セクションの ::before / ::after の装飾blobが z-index:0 で
   コンテンツ要素(auto)より前面に来て被るため、-1に下げる
   ============================================================ */
.vc__section--recruit::before,
.vc__section--recruit::after {
  z-index: -1 !important;
}
/* セクション全体に stacking context を作って、装飾を内側で背面に閉じ込める */
.vc__section--recruit {
  isolation: isolate;
}
/* コンテンツ要素は前面に */
.vc__section--recruit > .wp-block-group__inner-container,
.vc__section--recruit > .vc__section-title-wrap,
.vc__section--recruit > .vc__recruit-highlights,
.vc__section--recruit > .vc__recruit-divider,
.vc__section--recruit > .vc__recruit-benefits,
.vc__section--recruit > .vc__recruit-voices,
.vc__section--recruit > .vc__recruit-voices-note,
.vc__section--recruit > .wp-block-buttons {
  position: relative;
  z-index: 1;
}

/* ============================================================
   29. INFO セクションの上下padding 40px に圧縮（本番値）
   元HTMLの style="padding-top:40px;padding-bottom:40px;" が
   Gutenberg では保存されないため、CSS で個別指定
   ============================================================ */
#info.vc__section,
section#info {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ============================================================
   30. CONTACT 電話番号カードの縦中央配置
   .vc__contact-tel が flex だが、中の wp-block-group__inner-container が display:contents で
   孫要素に align-items: center が効かない問題を解決
   ============================================================ */
.vc__contact-tel > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px;
  width: 100%;
}
/* 内側のテキスト部分（電話番号 + 受付）もそれ自身が flex/縦並びで中央配置 */
.vc__contact-tel .wp-block-group:not(.vc__contact-tel) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px;
  margin: 0 !important;
}
/* WordPress wp-block-group のデフォルト margin-bottom: 1em をリセット */
.vc__contact-tel > .wp-block-group__inner-container > .wp-block-group {
  margin: 0 !important;
}
.vc__contact-tel .wp-block-group:not(.vc__contact-tel) > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px;
}

/* ============================================================
   31. 送信ボタンにメールアイコン追加（::before）
   ============================================================ */
.vc__contact-form-wrap .smf-button-control__control,
.vc__contact-form-wrap button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
}
.vc__contact-form-wrap .smf-button-control__control::before,
.vc__contact-form-wrap button[type="submit"]::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: url('/wp-content/themes/swell_child/assets/img/icons/icon-mail.png') no-repeat center / contain;
  filter: brightness(0) invert(1);
}

/* ============================================================
   32. CONTACT フォーム入力欄 背景をクリーム強制（白を打ち消す）
   ============================================================ */
.vc__contact-form-wrap .smf-text-control,
.vc__contact-form-wrap .smf-email-control,
.vc__contact-form-wrap .smf-tel-control,
.vc__contact-form-wrap .smf-textarea-control,
.vc__contact-form-wrap .smf-select-control,
.vc__contact-form-wrap input[type="text"],
.vc__contact-form-wrap input[type="email"],
.vc__contact-form-wrap input[type="tel"],
.vc__contact-form-wrap textarea {
  background: #fdf8ee !important;
  border: 2px solid #fdf8ee !important;
  box-shadow: none !important;
}
.vc__contact-form-wrap input:focus,
.vc__contact-form-wrap textarea:focus,
.vc__contact-form-wrap select:focus {
  border-color: #f08552 !important;
  background: #fff !important;
}

/* ============================================================
   33. 送信ボタン上の余白拡大＆入力欄ラッパー装飾の最終リセット
   ============================================================ */
/* 送信ボタンの上の余白を 14 → 32px に拡大 */
.vc__contact-form-wrap .smf-action {
  margin-top: 32px !important;
}
.vc__contact-form-wrap .smf-action button[type="submit"],
.vc__contact-form-wrap .smf-action .smf-button-control__control {
  margin-top: 0 !important;
}

/* div ラッパー .smf-*-control の bg/border を最後に確実に消す（後勝ち） */
.vc__contact-form-wrap div.smf-text-control,
.vc__contact-form-wrap div.smf-email-control,
.vc__contact-form-wrap div.smf-tel-control,
.vc__contact-form-wrap div.smf-textarea-control,
.vc__contact-form-wrap div.smf-select-control {
  background-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   34. スタッフカード「やりがい」セクションの縦中央揃え
   バッジ(.joy-label)と本文(.joy-text)を vertical center に合わせる
   ============================================================ */
.vc__staffcard-joy {
  align-items: center !important;
}
.vc__staffcard-joy-label {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.vc__staffcard-joy-text {
  margin: 0 !important;
  align-self: center;
}

/* ============================================================
   35. 下層ページのページタイトル（プライバシーポリシー等）
   左寄せ＋細い全幅ボーダーの素っ気ない見た目を、
   中央寄せ＋ブランドカラーのアクセントバーで整える。
   フロントページ（.home）は独自ヘッダーのため対象外。
   ============================================================ */
body.page:not(.home) .c-pageTitle {
  text-align: center !important;
  border: none !important;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 1.6em !important;
  padding: 0 !important;
}
/* タイトル直下の本文エリアの余白を詰めて、上下のバランスを整える */
body.page:not(.home) .post_content {
  margin-top: 0 !important;
}
/* 本文先頭がSWELLフルワイド（pc-py-60）の場合、上パディングが過大になるため詰める */
body.page:not(.home) .post_content > .swell-block-fullWide:first-child {
  padding-top: 1.5rem !important;
}
body.page:not(.home) .c-pageTitle__inner {
  display: block;
  width: 100%;
  max-width: none;
  position: relative;
  border: none !important;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.25rem);
  line-height: 1.45;
  letter-spacing: 0.08em;
  color: #2B251D;
  padding-bottom: 0.62em;
}
/* 中央の短いアクセントバー（ブランドオレンジ） */
body.page:not(.home) .c-pageTitle__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F6A35C, #F08552);
}
/* 英語のアイブロウ（プライバシーポリシーページ） */
body.privacy-policy .c-pageTitle__inner::before {
  content: "PRIVACY POLICY";
  display: block;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: #F08552;
  margin-bottom: 0.5em;
}