@charset "utf-8";

/* ==========================================================================
   相談ナビ - Custom CSS Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --clr-primary:        #1E5BCE;
  --clr-primary-light:  #3B7FE6;
  --clr-primary-dark:   #1545A8;
  --clr-secondary:      #14B8A6;
  --clr-secondary-dark: #0D9488;
  --clr-accent:         #F97316;

  --gradient-brand: linear-gradient(135deg, #62C8D3 0%, #6290D3 100%);
  --gradient-hero:  linear-gradient(145deg, #1E5BCE 0%, #14B8A6 100%);
  --gradient-cta:   linear-gradient(135deg, #F97316 0%, #EF4444 100%);

  --clr-bg:         #F0F4FF;
  --clr-bg-gray:    #F3F4F6;
  --clr-bg-dark:    #17263a;
  --clr-white:      #FFFFFF;
  --clr-gray-50:    #F9FAFB;
  --clr-gray-100:   #F3F4F6;
  --clr-gray-200:   #E5E7EB;
  --clr-gray-300:   #D1D5DB;
  --clr-gray-400:   #9CA3AF;
  --clr-gray-500:   #6B7280;
  --clr-gray-600:   #4B5563;
  --clr-gray-700:   #374151;
  --clr-gray-800:   #1F2937;
  --clr-gray-900:   #111827;

  --clr-text:       #1F2937;
  --clr-text-muted: #6B7280;
  --clr-text-light: #9CA3AF;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);
  --shadow-blue: 0 4px 20px rgba(30,91,206,0.25);

  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;

  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 40px);
  --section-py:    clamp(56px, 7vw, 96px);

  --t-fast: 0.15s ease;
  --t:      0.25s ease;

  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* --------------------------------------------------------------------------
   2. Base Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--clr-primary); text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }
a:hover { color: var(--clr-primary-light); }
img { max-width: 100%; height: auto; display: block; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Container */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: all var(--t);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  font-family: var(--font-sans);
}

.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #fff;
  box-shadow: 0 6px 24px rgba(30,91,206,0.35);
}

.btn--outline-nav {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  background: transparent;
  padding: 7px 16px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.btn--outline-nav:hover {
  background: var(--clr-primary);
  color: #fff;
}

.btn--cta-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: #fff;
  color: var(--clr-primary);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: all var(--t);
}
.btn--cta-band:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--clr-primary);
}

.btn-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 52px;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t);
  box-shadow: var(--shadow-blue);
  font-family: var(--font-sans);
}
.btn-search:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(30,91,206,0.35);
}

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.navbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: auto;
}

.navbar__logo-link { display: flex; align-items: center; }

.navbar__logo-img {
  width: 160px;
  height: auto;
  display: block;
}

.navbar__tagline {
  font-size: 0.6875rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
  padding-left: 10px;
  border-left: 1px solid var(--clr-gray-200);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 0;
}
.navbar__links li a {
  display: block;
  padding: 5px 10px;
  color: var(--clr-gray-700);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.navbar__links li a:hover,
.navbar__links li a.is-active {
  color: var(--clr-primary);
  background: rgba(30,91,206,0.06);
}

.navbar__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.global-nav__search-button {
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  padding: 0;
}
.global-nav__search-button:hover { transform: scale(1.08); filter: brightness(1.1); }
.global-nav__search-button svg,
.global-nav__search-button .ys-icon { color: #fff; }

.kkmg .global-nav__search .search-field { padding: 1em 3.5em 1em 1em; }
.kkmg .global-nav__search .search-form { border-radius: var(--r-md); }
.kkmg .global-nav__search .search-form .search-submit {
  background: var(--gradient-brand);
  color: #fff;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.kkmg .search-submit .ys-icon { color: #fff; }
.global-nav__search-close { background-color: transparent; color: var(--clr-text); }
.global-nav__search-close:hover { box-shadow: none; }

/* Hamburger */
.navbar__toggle {
  display: none;
  position: relative;
  width: 34px; height: 26px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.navbar__toggle span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: all 0.35s ease;
}
.navbar__toggle .top    { top: 0; }
.navbar__toggle .middle { top: 11px; }
.navbar__toggle .bottom { top: 22px; background: var(--clr-secondary); }

.navbar__toggle.active .top    { transform: translateY(11px) rotate(45deg); background: #fff; }
.navbar__toggle.active .middle { opacity: 0; }
.navbar__toggle.active .bottom { transform: translateY(-11px) rotate(-45deg); background: #fff; }

/* Mobile Overlay */
.sp_overlay {
  position: fixed;
  background: var(--clr-bg-dark);
  top: 0; left: 0;
  width: 100%; height: 0%;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
}
.sp_overlay.open {
  opacity: 0.97;
  visibility: visible;
  height: 100%;
}
.overlay-menu {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlay-menu ul li { opacity: 0; transform: translateX(20px); }
.sp_overlay.open ul li { animation: slideInRight 0.45s ease forwards; }
.sp_overlay.open ul li:nth-child(1) { animation-delay: 0.08s; }
.sp_overlay.open ul li:nth-child(2) { animation-delay: 0.13s; }
.sp_overlay.open ul li:nth-child(3) { animation-delay: 0.18s; }
.sp_overlay.open ul li:nth-child(4) { animation-delay: 0.23s; }
.sp_overlay.open ul li:nth-child(5) { animation-delay: 0.28s; }
.sp_overlay.open ul li:nth-child(6) { animation-delay: 0.33s; }
.overlay-menu ul li a {
  display: block;
  padding: 14px 32px;
  color: #fff;
  font-size: 1.25rem;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: color var(--t-fast);
}
.overlay-menu ul li a:hover { color: var(--clr-secondary); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   5. Hero Section
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(64px + 60px);
  padding-bottom: 40px;
  background: var(--clr-bg-dark);
  background-image:
    radial-gradient(circle at 20% 80%, rgba(20,184,166,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(30,91,206,0.22) 0%, transparent 50%),
    url(../asset/images/kvbg.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(17,38,58,0.82) 0%,
    rgba(30,91,206,0.60) 60%,
    rgba(20,184,166,0.40) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 36px !important;
}

.hero__content {
  text-align: center !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

.hero__eyebrow {
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 18px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
}

.hero__title {
  margin: 0 !important;
  font-size: clamp(1.625rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  letter-spacing: -0.01em;
}
.hero__accent { color: #62C8D3 !important; }

.hero__subtitle {
  margin: 0 !important;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem) !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em;
}
.hero__subtitle strong { color: #fff; font-weight: 700; }

/* Search Widget */
.search-widget {
  width: 100%;
  max-width: 760px;
  background: rgba(255,255,255,0.98);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* よくある相談：ウィジェット枠内フッター */
.search-widget__quickcats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--clr-gray-100);
  background: var(--clr-gray-50);
}
.search-widget__quickcats-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-widget__quickcats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-widget__quickcats-list a {
  display: inline-block;
  padding: 5px 13px;
  background: #fff;
  border: 1.5px solid var(--clr-gray-200);
  border-radius: var(--r-pill);
  color: var(--clr-text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.search-widget__quickcats-list a:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(30,91,206,0.04);
}

.search-widget__tabs {
  display: flex;
  border-bottom: 2px solid var(--clr-gray-100);
  background: var(--clr-gray-50);
}

.search-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: none;
  background: transparent;
  color: var(--clr-gray-500);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-sans);
}
.search-tab:hover { color: var(--clr-primary); background: rgba(30,91,206,0.04); }
.search-tab.is-active {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
  background: rgba(30,91,206,0.06);
}

.search-widget__panel { padding: 18px 20px; }
.search-widget__panel[hidden] { display: none; }

.search-panel-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.search-panel-form__fields {
  display: flex;
  gap: 10px;
  flex: 1;
}
.search-field-wrap { flex: 1; }

.search-select,
.search-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 2px solid var(--clr-gray-200);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--clr-text);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.search-input { background-image: none; padding-right: 16px; cursor: text; }
.search-select:focus,
.search-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(30,91,206,0.12);
}

/* Trust badges */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.95);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Quick categories */
.quick-cats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 760px;
}
.quick-cats__label {
  color: rgba(255,255,255,0.7);
  font-size: 0.8125rem;
  white-space: nowrap;
  margin: 0;
}
.quick-cats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-cat-tag {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--t-fast);
}
.quick-cat-tag:hover {
  background: rgba(255,255,255,0.28);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* --------------------------------------------------------------------------
   6. Stats Bar
   -------------------------------------------------------------------------- */
.stats-bar {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-gray-100);
  box-shadow: var(--shadow-xs);
}
.stats-bar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  color: var(--clr-text);
}
.stat-item svg { color: var(--clr-primary); flex-shrink: 0; }
.stat-item > div { display: flex; flex-direction: column; }
.stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1.2;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  font-weight: 500;
}
.stat-divider {
  width: 1px; height: 40px;
  background: var(--clr-gray-200);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Page Banner
   -------------------------------------------------------------------------- */
.page-banner {
  padding-top: calc(64px + 48px);
  padding-bottom: 48px;
  background: var(--clr-bg-dark);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17,38,58,0.9) 0%, rgba(30,91,206,0.7) 100%);
}
.page-banner--publish::before {
  background: linear-gradient(135deg, rgba(17,38,58,0.9) 0%, rgba(20,184,166,0.7) 100%);
}

.page-banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
  color: #fff;
}
.page-banner__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 16px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
}
.page-banner__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.page-banner__desc {
  margin: 0 auto;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  max-width: 600px;
}

/* --------------------------------------------------------------------------
   7b. Consult Page Banner & Category Nav Strip
   -------------------------------------------------------------------------- */
.page-banner--consult::before {
  background: linear-gradient(135deg, rgba(17,38,58,0.92) 0%, rgba(30,91,206,0.72) 100%);
}

.page-nav-strip {
  background: #fff;
  border-bottom: 2px solid var(--clr-gray-100);
  position: sticky;
  top: 64px;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.page-nav-strip__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.page-nav-strip__inner::-webkit-scrollbar { display: none; }
.page-nav-strip__list {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.page-nav-strip__item a {
  display: block;
  padding: 14px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-sub);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.3;
}
.page-nav-strip__item a:hover {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
  background: rgba(30,91,206,0.04);
}
.page-nav-strip__item.is-current a {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-gray-100);
  padding: 10px var(--container-pad);
}
.breadcrumbs .aioseo-breadcrumbs,
.breadcrumbs nav {
  max-width: var(--container-max);
  margin: 0 auto;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}
.breadcrumbs a { color: var(--clr-primary); }
.breadcrumbs a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. Main Content Layout
   -------------------------------------------------------------------------- */
.kkmg #content,
.kkmg main { min-height: 60vh; }

.content-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--container-pad);
}
.subpage-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--container-pad);
}

/* Section titles */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-header__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 16px;
  background: rgba(30,91,206,0.08);
  border: 1px solid rgba(30,91,206,0.2);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  text-transform: uppercase;
}
.section-header__title {
  margin: 0 0 10px;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--clr-text);
  position: relative;
  display: inline-block;
}
.section-header__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
}

/* old main_title compatibility */
.main_title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.main_title h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 12px;
  position: relative;
  padding-bottom: 16px;
}
.main_title h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.main_title p {
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  margin: 4px 0 0;
}

/* --------------------------------------------------------------------------
   10. Professional Cards (新デザイン)
   -------------------------------------------------------------------------- */
.top_pickup { background: var(--clr-white); padding: var(--section-py) 0; }
.latest_pro { background: var(--clr-bg); padding: var(--section-py) 0; }
.pro_list   { padding: var(--section-py) 0; }

/* 新カードリスト */
.pro-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  list-style: none;
  margin: 0;
}

/* 新カード */
.pro-card {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.pro-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.pro-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pro-card__link:hover { color: inherit; }

/* バッジ */
.pro-card__badge {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 12px 8px;
}

/* 名前・事務所（写真の上） */
.pro-card__info {
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 写真 */
.pro-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--clr-gray-100);
}
.pro-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}
.pro-card:hover .pro-card__photo img { transform: scale(1.04); }

/* 写真なしプレースホルダー */
.pro-card__no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--clr-gray-400, #9ca3af);
  font-size: 0.75rem;
}

/* 本文（PR文・住所） */
.pro-card__body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pro-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.3;
}
.pro-card__office {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.4;
}
.pro-card__pr {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  background: var(--clr-bg);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.pro-card__address {
  margin: 0;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* 士業バッジカラー */
.shigyo_mark {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.shigyo_mark.bengo,        .id-shigyou-bengo p, .bd-bengo    { background: #E05F5F; }
.shigyo_mark.tyusyo,       .id-shigyou-tyusyo p, .bd-tyusyo  { background: #3aaa6b; }
.shigyo_mark.zeiri,        .id-shigyou-zeiri p, .bd-zeiri    { background: #4a9ec9; }
.shigyo_mark.syarou,       .id-shigyou-syarou p, .bd-syarou  { background: #d9558a; }
.shigyo_mark.gyousei,      .id-shigyou-gyousei p, .bd-gyousei{ background: #7b7fd4; }
.shigyo_mark.shihou,       .id-shigyou-shihou p, .bd-shihou  { background: #c455c9; }
.shigyo_mark.kaikei,       .id-shigyou-kaikei p, .bd-kaikei  { background: #9b68d4; }
.shigyo_mark.benri,        .id-shigyou-benri p, .bd-benri    { background: #2db5a0; }
.shigyo_mark.fudo,         .id-shigyou-fudo p, .bd-fudo      { background: #6aaa37; }
.shigyo_mark.tochikaoku,   .id-shigyou-tochikaoku p, .bd-tochikaoku { background: #e67e22; }
.shigyo_mark.default       { background: #6b7280; }
.shigyo_mark.attorney      { background: #E05F5F; }
.shigyo_mark.rmc           { background: #3aaa6b; }
.shigyo_mark.tax-accountant{ background: #4a9ec9; }
.shigyo_mark.sr            { background: #d9558a; }
.shigyo_mark.administrative-scrivener { background: #7b7fd4; }
.shigyo_mark.judicial-scrivener       { background: #c455c9; }
.shigyo_mark.cpa           { background: #9b68d4; }
.shigyo_mark.patent-agent  { background: #2db5a0; }
.shigyo_mark.lrea          { background: #6aaa37; }

/* 旧カード互換 */
.top_pickup-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
}
.top_pickup-item {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.top_pickup-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.top_pickup-item > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pro_tag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 0;
}
.profile_pro_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pro_tag .acf-office {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.4;
}
.pro_tag .acf-charge {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
}
.pro-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--clr-gray-100);
}
.pro-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.useful-info-wrap { padding: 0 12px 12px; }
.useful-info {
  display: block;
  padding: 8px 10px;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: var(--r-sm);
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Consultation Categories Section
   -------------------------------------------------------------------------- */
.top-consultation { background: var(--clr-bg); padding: var(--section-py) 0; }

/* 士業タブ */
.consult_category_list { margin-bottom: 24px; }
.consult-cat_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0;
}
.consult-cat_list_item { }
.consult-cat_list_item .tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--t-fast);
  cursor: pointer;
}
.consult-cat_list_item .tag:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* アイコングリッド */
.consultaion_category_list ul {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
  padding: 0;
}
.consultaion_category_list ul li {
  border-radius: var(--r-sm);
  overflow: hidden;
}
.consultaion_category_list ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--clr-white);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  transition: all var(--t);
  text-decoration: none;
  color: var(--clr-text);
}
.consultaion_category_list ul li a:hover {
  border-color: currentColor;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.consultaion_category_list ul li a img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 0;
}
.consultaion_category_list ul li a p {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* most_viewed */
.most_viewed { margin-bottom: 20px; }
.most_viewed ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  max-width: 600px;
  margin: 0 auto 10px;
}
.most_viewed ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--clr-white);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  min-width: 90px;
  transition: all var(--t);
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: var(--shadow-xs);
}
.most_viewed ul li a:hover {
  border-color: currentColor;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.most_viewed ul li a img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.most_viewed ul li a p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. About Section
   -------------------------------------------------------------------------- */
.top-about {
  background: var(--clr-bg-dark);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}
.top-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../asset/images/about-bg.png) no-repeat left bottom/contain;
  opacity: 0.12;
}
.top-about .top-about-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  color: #fff;
}
.top-about-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 220px;
}
.top-about-description {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.top-about-description a { color: var(--clr-secondary); }

/* --------------------------------------------------------------------------
   13. Search / Map Section
   -------------------------------------------------------------------------- */
.search_cat { padding: var(--section-py) 0; background: var(--clr-white); }
.search_cat #kensaku { max-width: 100%; margin-top: 40px; }
.search_cat .kensaku-column {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}
.search_cat .kensaku-left {
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search_cat .kensaku-left #k-map { width: 78%; margin-bottom: 32px; }
.search_cat .kensaku-right { width: 44%; }

/* 都道府県 */
.todofuken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.todofuken dl { margin: 0; }
.todofuken dd { margin-left: 0; }
.todofuken dt {
  margin-top: 0;
  font-weight: 700;
  font-size: 0.8125rem;
  min-width: 65px;
  border-bottom: 2px solid;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.todofuken ul { display: flex; column-gap: 8px; flex-wrap: wrap; row-gap: 2px; }
.todofuken ul li a { font-size: 0.8125rem; color: var(--clr-text-muted); }
.todofuken ul li a:hover { color: var(--clr-primary); }

.todofuken dl.hokkai dt  { color: #5eacbe; border-color: #5eacbe; }
.todofuken dl.tohoku dt  { color: #619cc0; border-color: #619cc0; }
.todofuken dl.kanto dt   { color: #6893c8; border-color: #6893c8; }
.todofuken dl.hokuriku dt{ color: #8f90bc; border-color: #8f90bc; }
.todofuken dl.chubu dt   { color: #ad7399; border-color: #ad7399; }
.todofuken dl.chikoku dt { color: #d76e7c; border-color: #d76e7c; }
.todofuken dl.chukoku dt { color: #dc953e; border-color: #dc953e; }
.todofuken dl.shikoku dt { color: #e9ad33; border-color: #e9ad33; }
.todofuken dl.kyushu dt  { color: #afbe63; border-color: #afbe63; }
.todofuken dl.okinawa dt { color: #77aa5b; border-color: #77aa5b; }

/* 士業バッジ（マップ右側） */
.pro-badgers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0;
}
.pro-badgers li { width: 100%; margin: 0; padding: 0; }
.pro-badgers li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: var(--shadow-xs);
}
.pro-badgers li a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pro-badgers li a .tag {
  width: 100%;
  padding: 6px 8px;
  text-align: center;
  color: #fff;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
}
.pro-badgers .img-text {
  position: relative;
  width: 100%;
  text-align: center;
  background: var(--clr-gray-50);
  padding: 8px;
}
.pro-badgers .img-text img { width: 100%; border-radius: 0; }
.pro-badgers .img-text p {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: 4px;
  color: #444;
  font-size: 0.75rem;
  font-weight: 600;
  width: 80%;
  line-height: 1.3;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}

/* --------------------------------------------------------------------------
   14. Articles Section
   -------------------------------------------------------------------------- */
.top_articles { background: var(--clr-bg); padding: var(--section-py) 0; }

.top_articles-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.top_articles-item {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.top_articles-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.top_articles-item > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.articles-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--clr-gray-100);
}
.articles-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.top_articles-item:hover .articles-card-thumb img { transform: scale(1.04); }
.title_box {
  padding: 14px;
  flex: 1;
}
.title_box .title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* More button */
.more-button { text-align: center; margin-top: 32px; }
.more-button .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all var(--t);
  box-shadow: var(--shadow-blue);
  text-decoration: none;
}
.more-button .button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #fff;
}

/* --------------------------------------------------------------------------
   15. Join Section (掲載CTA)
   -------------------------------------------------------------------------- */
.join_kaiketsu {
  background: var(--gradient-hero);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}
.join_kaiketsu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../asset/images/join_coverimage.png) no-repeat center/cover;
  opacity: 0.08;
}
.join_kaiketsu-wrapper {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  color: #fff;
}
.join_kaiketsu .cover-image { display: none; }
.join_intro h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.join_intro .description {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1.7;
}
.topbenifits {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}
.topbenifits li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
}
.topbenifits li::before {
  content: "✓";
  font-weight: 700;
  color: #62C8D3;
}
.topbenifits li p { margin: 0; font-size: 0.9375rem; color: rgba(255,255,255,0.95); }

.join_kaiketsu .more-button .button {
  background: #fff;
  color: var(--clr-primary);
  box-shadow: var(--shadow-md);
}
.join_kaiketsu .more-button .button:hover { background: #fff; filter: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   16. Testimonials
   -------------------------------------------------------------------------- */
.top_testimonials { background: var(--clr-white); padding: var(--section-py) 0; }

.testimonials_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.testimonials_list_item {
  display: flex;
  background: var(--clr-bg);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.testimonials_list_item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.image_box,
.articles-card-thumb { flex-shrink: 0; }
.image_box { width: 160px; overflow: hidden; }
.image_box a { display: block; height: 100%; }
.image_box img { width: 100%; height: 100%; object-fit: cover; }

.testimonials_list_content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.testimonials_text_cntn_area { flex: 1; }
.testimonials_list_content .title {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}
.testimonials_list_content .title a { color: var(--clr-text); }
.testimonials_list_content .title a:hover { color: var(--clr-primary); }

.testimonail_text_box { }
.testimonail_text p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bttn_right { }
.morebttn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--clr-primary);
  font-weight: 600;
  text-decoration: none;
}
.morebttn::after {
  content: "→";
  font-size: 0.875rem;
}
.morebttn:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Consult Cats Footer
   -------------------------------------------------------------------------- */
.consult-cats {
  background: var(--clr-white);
  padding: 56px 0 48px;
  border-top: 1px solid var(--clr-gray-100);
}
.consult-cats__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.consult-cats__title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 32px;
  position: relative;
  padding-bottom: 16px;
}
.consult-cats__title::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.consult-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.consult-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--clr-bg);
  border-radius: var(--r-md);
  color: var(--clr-text);
  text-align: center;
  transition: all var(--t);
  border: 1px solid transparent;
  text-decoration: none;
}
.consult-cat-item:hover {
  background: rgba(30,91,206,0.06);
  border-color: rgba(30,91,206,0.15);
  color: var(--clr-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.consult-cat-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.consult-cat-icon img { width: 36px; height: 36px; object-fit: contain; }
.consult-cat-label { font-size: 0.6875rem; font-weight: 500; line-height: 1.3; }

/* --------------------------------------------------------------------------
   18. Pro CTA Band
   -------------------------------------------------------------------------- */
.pro-cta-band {
  background: var(--gradient-hero);
  padding: 48px 0;
}
.pro-cta-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  flex-wrap: wrap;
}
.pro-cta-band__eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pro-cta-band__title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.pro-cta-band__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--clr-bg-dark);
  color: rgba(255,255,255,0.8);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-pad) 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-col--brand .footer-logo { margin-bottom: 16px; }
.footer-col--brand .footer-logo img { width: 160px; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-tagline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 12px;
  line-height: 1.5;
}
.footer-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
}
.footer-col__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  letter-spacing: 0.04em;
}
.footer-col__title--mt { margin-top: 28px; }
.footer-nav-list { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list li a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--t-fast);
}
.footer-nav-list li a:hover { color: var(--clr-secondary); }

.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-legal-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal-nav li a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  transition: color var(--t-fast);
}
.footer-legal-nav li a:hover { color: rgba(255,255,255,0.8); }
.footer-copyright { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin: 0; }

/* --------------------------------------------------------------------------
   20. Professionals Listing Page
   -------------------------------------------------------------------------- */
.pro_list .pro-card-list { grid-template-columns: repeat(3, 1fr); }
.pro_list .top_pickup-list { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   21. Blog / Articles
   -------------------------------------------------------------------------- */
#blog-data-inner h1,
#blog-data-inner h2 { color: var(--clr-primary); }
#blog-data-inner h2.blog-h {
  margin-top: 48px !important;
  margin-bottom: 28px !important;
  background: var(--clr-primary);
  padding: 12px 16px;
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 1.0625rem;
}
.entry-content {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--clr-text);
}
.entry-content h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-top: 40px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--clr-bg);
  border-left: 4px solid var(--clr-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.entry-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--clr-gray-200);
}
.entry-content a { color: var(--clr-primary); text-decoration: underline; }

/* Pagination */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 32px 0;
  flex-wrap: wrap;
}
.wp-pagenavi a,
.wp-pagenavi span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-gray-200);
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  background: var(--clr-white);
  transition: all var(--t-fast);
}
.wp-pagenavi a:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.wp-pagenavi span.current {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--clr-gray-200);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--clr-text);
  background: var(--clr-white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(30,91,206,0.1);
}
.wpcf7-form input[type=submit] {
  display: inline-flex;
  padding: 16px 48px;
  background: var(--gradient-brand);
  color: #fff !important;
  border: none;
  border-radius: var(--r-pill);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  box-shadow: var(--shadow-blue);
  font-family: var(--font-sans);
}
.wpcf7-form input[type=submit]:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* skip-link */
.skip-link:focus {
  position: fixed;
  top: 8px; left: 8px;
  padding: 8px 16px;
  background: var(--clr-primary);
  color: #fff;
  border-radius: var(--r-sm);
  z-index: 9999;
  width: auto; height: auto;
  clip: auto;
}

/* ==========================================================================
   23. How It Works Section
   ========================================================================== */
.how-it-works {
  background: var(--clr-white);
  padding: var(--section-py) 0;
  border-bottom: 1px solid var(--clr-gray-100);
}
.how-header {
  text-align: center;
  margin-bottom: 48px;
}
.how-title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 16px;
  line-height: 1.45;
}
.how-lead {
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin: 0;
}
.how-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: var(--clr-bg);
  border-radius: var(--r-xl);
  padding: 28px 20px;
  flex: 1;
  max-width: 260px;
}
.how-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--clr-gray-300);
  padding: 0 12px;
  margin-top: 0;
  flex-shrink: 0;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.step-icon {
  width: 64px;
  height: 64px;
  background: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.step-icon svg { display: block; }
.step-label {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.3;
}
.step-desc {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin: 0;
}
.how-guarantees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  padding: 0;
  list-style: none;
}
.how-guarantees li {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  font-weight: 500;
}
.how-guarantees li::first-letter { color: var(--clr-secondary); }

/* ==========================================================================
   24. Override Fixes  (sn_footer.cssより後にロードしてもimportantで優先)
   ========================================================================== */

/* --- 相談内容アイコンの色反転を解除 --- */
.top-consultation .most_viewed ul li a img {
  width: 48px !important;
  height: 48px !important;
  filter: none !important;
  object-fit: contain !important;
  display: block !important;
}
.top-consultation .consultaion_category_list ul li img {
  width: 38px !important;
  height: 38px !important;
  filter: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- most_viewed レイアウト修正 --- */
.top-consultation .most_viewed ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 100% !important;
  padding-left: 0 !important;
}
.top-consultation .most_viewed ul li {
  flex: 0 0 auto !important;
}
.top-consultation .most_viewed ul li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 12px !important;
  background: var(--clr-white) !important;
  border-radius: var(--r-lg) !important;
  border: 2px solid transparent !important;
  min-width: 100px !important;
  max-width: 140px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  height: auto !important;
  width: auto !important;
}
.top-consultation .most_viewed ul li a:hover {
  filter: none !important;
  border-color: var(--clr-primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
.top-consultation .most_viewed ul li p {
  background: transparent !important;
  color: var(--clr-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* --- consultaion_category_list レイアウト修正 --- */
.top-consultation .consultaion_category_list ul {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  gap: 8px !important;
  padding-left: 0 !important;
}
.top-consultation .consultaion_category_list ul li {
  min-width: auto !important;
}
.top-consultation .consultaion_category_list ul li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 10px 4px !important;
  background: var(--clr-white) !important;
  border-radius: var(--r-md) !important;
  border: 2px solid transparent !important;
  height: auto !important;
  width: 100% !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
  color: var(--clr-text) !important;
}
.top-consultation .consultaion_category_list ul li a:hover {
  filter: none !important;
  border-color: currentColor !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
.top-consultation .consultaion_category_list ul li p {
  color: var(--clr-text) !important;
  text-align: center !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.625rem !important;
  border-radius: 0 !important;
  line-height: 1.3 !important;
}

/* --- morebttn を使いやすいリンクに修正 --- */
.top_testimonials .testimonials_list_content a.morebttn {
  border-radius: var(--r-pill) !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  padding: 6px 14px !important;
  background: var(--clr-bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--clr-primary) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  position: static !important;
  align-self: flex-start !important;
  text-decoration: none !important;
  border: 1px solid var(--clr-primary) !important;
  transition: all var(--t-fast) !important;
  white-space: nowrap !important;
}
.top_testimonials .testimonials_list_content a.morebttn:after {
  content: "→" !important;
  background-image: none !important;
  min-width: auto !important;
  height: auto !important;
  position: static !important;
  filter: none !important;
  font-size: 0.875rem !important;
  color: var(--clr-primary) !important;
  width: auto !important;
  display: inline !important;
}
.top_testimonials .testimonials_list_content a.morebttn:hover {
  transform: none !important;
  filter: none !important;
  background: var(--clr-primary) !important;
  color: #fff !important;
}
.top_testimonials .testimonials_list_content a.morebttn:hover::after {
  color: #fff !important;
}

/* --- pro-badger カード（確実2段：1段目5枚 / 2段目4枚中央揃え） --- */
.kensaku-badgers {
  padding: 8px 0 !important;
}
.pro-badgers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
  row-gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 1段目：5枚（均等幅） */
.pro-badgers_list:nth-child(-n+5) {
  flex: 0 0 calc(20% - 13px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 2段目：4枚（やや広め→中央寄せで均等に） */
.pro-badgers_list:nth-child(n+6) {
  flex: 0 0 calc(25% - 13px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pro-badgers li {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pro-badger-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
  background: var(--clr-white) !important;
  height: 100% !important;
  transform: none !important;
}
.pro-badger-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}
.pro-badger-card .tag {
  display: block !important;
  width: 100% !important;
  padding: 14px 8px !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}
.pro-badger-topics {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  background: var(--clr-white) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 1 !important;
}
.pro-badger-topics li {
  font-size: 0.8125rem !important;
  color: var(--clr-text-muted) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--clr-gray-100) !important;
}
.pro-badger-topics li:last-child {
  border-bottom: none !important;
}

.kkmg article { background: var(--clr-white); }

/* ==========================================================================
   25. Pro-card 旧カード：テキストが画像に被る問題を修正
   ========================================================================== */
.top_pickup-list .useful-info-wrap,
.latest_pro .useful-info-wrap {
  margin: 0 !important;
  padding: 10px 12px 12px !important;
  position: static !important;
  z-index: auto !important;
}
.top_pickup-list .useful-info,
.latest_pro .useful-info {
  border-radius: var(--r-sm) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  padding: 8px 10px !important;
}
/* カード内の写真を比率固定 */
.top_pickup-list .pro-card-thumb,
.latest_pro .pro-card-thumb {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
.top_pickup-list .pro-card-thumb img,
.latest_pro .pro-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* ==========================================================================
   26. Easy Steps Section（footer.php内）
   ========================================================================== */
.easy-steps {
  background: var(--clr-white);
  padding: var(--section-py) 0;
  border-top: 1px solid var(--clr-gray-100);
}
.easy-steps__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.easy-steps__head {
  text-align: center;
  max-width: 640px;
}
.easy-steps__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 16px;
  line-height: 1.45;
}
.easy-steps__title span { color: var(--clr-primary); }
.easy-steps__sub {
  font-size: 0.9375rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin: 0;
}
.easy-steps__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.easy-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--clr-bg);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  flex: 1;
  max-width: 240px;
}
.easy-step__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin-top: 48px;
  flex-shrink: 0;
  color: var(--clr-gray-300);
}
.easy-step__arrow svg { display: block; }
.easy-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.easy-step__icon {
  width: 60px;
  height: 60px;
  background: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.easy-step__icon svg { display: block; }
.easy-step__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.3;
}
.easy-step__desc {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin: 0;
}
.easy-steps__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.easy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  font-weight: 500;
}
.easy-badge svg { color: var(--clr-secondary); flex-shrink: 0; }

/* ==========================================================================
   27. Footer 実際のHTML class名に合わせた修正
   ========================================================================== */
.site-footer__inner {
  grid-template-columns: 5fr 7fr !important;
  gap: 48px !important;
}
/* ブランド列 */
.footer-brand { }
.footer-brand .footer-logo {
  display: block !important;
  width: auto !important;
  margin-bottom: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.footer-brand .footer-logo img {
  width: 280px !important;
  max-width: none !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
  display: block !important;
  margin: 0 !important;
}
.footer-brand .footer-tagline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 10px;
  line-height: 1.5;
}
.footer-brand .footer-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
}
/* ナビグループ */
.footer-nav-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
/* ナビ列（共通） */
.footer-nav-col { }

/* ==========================================================================
   28. Consult-cats（お悩みのジャンルから専門家を探す）
   ========================================================================== */
.consult-cats {
  padding: 72px 0 64px !important;
}
.consult-cats__grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 14px !important;
}
.consult-cat-item {
  padding: 20px 10px 16px !important;
  gap: 12px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 2px solid transparent !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s !important;
}
.consult-cat-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(30,91,206,0.15) !important;
  border-color: rgba(30,91,206,0.3) !important;
  background: #fff !important;
}
.consult-cat-icon {
  width: 96px !important;
  height: 96px !important;
}
.consult-cat-icon img {
  width: 84px !important;
  height: 84px !important;
}
.consult-cat-label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   29. Search map：1カラム縦並びレイアウト（士業→地図→地域名）
   ========================================================================== */
#kensaku {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.kensaku-badgers { width: 100%; }
.kensaku-map {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.kensaku-map #k-map { width: 100% !important; }
.kensaku-prefectures { width: 100%; }

/* ==========================================================================
   30. 相談内容一覧：新クラス名（sn_footer.css 競合回避）
   ========================================================================== */
.sn-consult-tabs {
  margin-bottom: 24px;
}
.sn-consult-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: 0;
}
.sn-consult-tabs__item {
  list-style: none;
  display: flex;
  align-items: center;
}
.sn-consult-tabs__item .tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: #fff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sn-consult-tabs__item .tag:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.sn-consult-grid { margin-top: 12px; }
.sn-consult-grid__list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.sn-consult-grid__item { list-style: none; }
.sn-consult-grid__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  text-decoration: none;
  height: 100%;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.sn-consult-grid__item a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: currentColor;
}
.sn-consult-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
}
.sn-consult-icon img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.sn-consult-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--clr-text);
  line-height: 1.3;
}

/* セパレーター（士業グループ区切り） */
.sn-consult-grid__sep {
  grid-column: 1 / -1;
  list-style: none;
  padding: 28px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.sn-consult-grid__sep::before,
.sn-consult-grid__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border, #e5e7eb);
  max-width: 320px;
}
.sn-consult-grid__sep .tag {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ==========================================================================
   31. 地図ホバー連動スタイル
   ========================================================================== */
#k-map g.map-text-hover {
  filter: brightness(1.45) saturate(1.6) drop-shadow(0 0 4px rgba(0,0,0,0.3)) !important;
  cursor: pointer;
  transition: filter 0.15s;
}
/* 都道府県テキストリストのホバー */
.todofuken a {
  transition: color 0.15s, background 0.15s;
  border-radius: 4px;
  padding: 1px 4px;
}
.todofuken a:hover,
.todofuken a.map-link-active {
  color: var(--clr-primary) !important;
  background: rgba(30,91,206,0.08);
  text-decoration: none !important;
}

/* ==========================================================================
   32. 全体モダン化：若い世代向けに見やすく
   ========================================================================== */

/* セクション見出しを大きく・力強く */
.main_title h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.main_title h2::after {
  width: 56px !important;
  height: 4px !important;
}
.main_title p {
  font-size: 1rem !important;
  margin-top: 8px !important;
}
.main_title {
  margin-bottom: 48px !important;
}

/* プロカードをよりモダンに */
.pro-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.pro-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14) !important;
}
.pro-card__name {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
}
.pro-card__office {
  font-size: 0.875rem !important;
}
.pro-card__pr {
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
}

/* How it works をよりモダンに */
.how-step {
  border-radius: 20px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.step-num {
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 800 !important;
}
.step-label {
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
}
.step-desc {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
}

/* 相談内容セクション背景 */
.top-consultation {
  background: var(--clr-bg) !important;
  padding: var(--section-py) 0 !important;
}
.sn-consult-tabs {
  margin-bottom: 32px !important;
  padding: 20px 24px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* 検索マップ 士業バッジをより大きく */
.pro-badger-card .tag {
  font-size: 0.8125rem !important;
  padding: 10px 6px !important;
  font-weight: 800 !important;
}
.pro-badger-topics li {
  font-size: 0.8125rem !important;
  padding: 3px 0 !important;
}

/* フッター consult-cats タイトル */
.consult-cats__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem) !important;
  font-weight: 800 !important;
}

/* easy-steps のタイトル */
.easy-steps__title {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   静的ページ共通
   ========================================================================== */
.sn-page-content {
  padding: clamp(40px, 7vw, 80px) 0;
}
.sn-page-content .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ==========================================================================
   各士業について (page-about-profession)
   ========================================================================== */
.about-prof__intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.about-prof__intro-text {
  font-size: 1rem;
  color: var(--clr-text-sub);
  line-height: 1.85;
}
.about-prof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.prof-card {
  background: var(--clr-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.prof-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.prof-card__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--clr-gray-100);
}
.prof-card__header .shigyo_mark {
  font-size: 0.9375rem;
  padding: 7px 20px;
}
.prof-card__body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prof-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--clr-text-sub);
}
.prof-card__duties-title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prof-card__duties-list {
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prof-card__duties-list li {
  font-size: 0.875rem;
  color: var(--clr-text);
  line-height: 1.5;
}
.prof-card__footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--clr-gray-100);
}
.about-prof__cta {
  margin-top: 56px;
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(30,91,206,0.06) 0%, rgba(20,184,166,0.06) 100%);
  border-radius: var(--r-xl);
  border: 1px solid rgba(30,91,206,0.12);
}
.about-prof__cta-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}
.about-prof__cta-desc {
  margin: 0 0 20px;
  color: var(--clr-text-sub);
  font-size: 0.9375rem;
}

/* ==========================================================================
   士業一覧 (page-sigyoulist)
   ========================================================================== */
.sn-consult-tabs {
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sn-consult-tabs::-webkit-scrollbar { display: none; }
.sn-consult-tabs__inner {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  padding-right: 16px;
  white-space: nowrap;
}
.sn-consult-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-gray-200, #e5e7eb);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-sub);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  cursor: pointer;
}
.sn-consult-tab:hover,
.sn-consult-tab.is-active {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(30,91,206,0.06);
}
.pro-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pro-list-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.pro-list-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--clr-text-muted);
}

/* ==========================================================================
   よくある質問 (page-question)
   ========================================================================== */
.faq-section-nav {
  position: sticky;
  top: 64px;
  z-index: 88;
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-gray-100);
  margin-bottom: 48px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.faq-section-nav__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  list-style: none;
  display: flex;
  gap: 0;
}
.faq-section-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-sub);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.faq-section-nav__link:hover {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}
.faq-section { margin-bottom: 64px; }
.faq-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--clr-primary);
}
.faq-section__icon { color: var(--clr-primary); }
.faq-section__heading {
  margin: 0;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
}
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--clr-gray-100);
  overflow: hidden;
}
.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px 16px;
  background: rgba(30,91,206,0.03);
  border-bottom: 1px solid var(--clr-gray-100);
}
.faq-item__badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item__question {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 4px;
}
.faq-item__a { padding: 18px 24px; }
.faq-item__answer {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--clr-text-sub);
}
.faq-section__cta {
  margin-top: 32px;
  text-align: center;
}

/* ==========================================================================
   お知らせ (page-information)
   ========================================================================== */
.info-section { margin-bottom: 64px; }
.info-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--clr-primary);
}
.info-section__icon { color: var(--clr-primary); }
.info-section__heading {
  margin: 0;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
}
.info-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-article-card {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}
.info-article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.info-article-card a,
.info-article-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.info-article-card__thumb-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--clr-gray-100);
  display: block;
  width: 100%;
}
.info-article-card__thumb-wrap img,
.info-article-card__thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.info-article-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.info-article-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.info-article-card__meta { display: flex; align-items: center; gap: 8px; }
.info-article-card__date { font-size: 0.75rem; color: var(--clr-text-muted); }
.info-article-card__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(30,91,206,0.1);
  color: var(--clr-primary);
}
.info-article-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.45;
}
.info-article-card__excerpt { margin: 0; font-size: 0.8125rem; color: var(--clr-text-muted); line-height: 1.6; }
.info-empty {
  text-align: center;
  padding: 48px;
  background: var(--clr-gray-50, #f9fafb);
  border-radius: var(--r-lg);
  color: var(--clr-text-muted);
}

/* ==========================================================================
   お問い合わせ (page-contact)
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}
.contact-form-card,
.contact-info-card {
  background: var(--clr-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.contact-form-card__header,
.contact-info-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--clr-gray-100);
  background: linear-gradient(135deg, rgba(30,91,206,0.04) 0%, rgba(20,184,166,0.04) 100%);
}
.contact-form-card__icon,
.contact-info-card__icon { color: var(--clr-primary); }
.contact-form-card__title,
.contact-info-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.contact-form-card__body { padding: 28px; }
.contact-form-card__lead {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  color: var(--clr-text-sub);
  line-height: 1.75;
}
.contact-layout__sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }
.contact-info-card__body { padding: 20px 24px; }
.contact-info-card__hours { list-style: none; margin: 0; padding: 0; }
.contact-info-card__hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--clr-gray-100);
}
.contact-info-card__hours li:last-child { border-bottom: none; }
.contact-info-card__hours .day { color: var(--clr-text-muted); }
.contact-info-card__hours .time { font-weight: 600; }
.contact-info-card__hours .closed { color: var(--clr-text-muted); font-size: 0.8125rem; }
.contact-info-card__inquiry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-info-card__inquiry-list li {
  font-size: 0.875rem;
  padding: 6px 0 6px 18px;
  position: relative;
  color: var(--clr-text-sub);
}
.contact-info-card__inquiry-list li::before {
  content: "›";
  position: absolute;
  left: 4px;
  color: var(--clr-primary);
  font-weight: 700;
}
.contact-privacy {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  padding: 16px;
  background: var(--clr-gray-50, #f9fafb);
  border-radius: var(--r-sm);
}
.contact-privacy a { color: var(--clr-primary); }

/* ==========================================================================
   静的ページ レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .about-prof__grid { grid-template-columns: 1fr; }
  .pro-list-grid { grid-template-columns: repeat(2, 1fr); }
  .info-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout__sidebar { position: static; }
}
@media screen and (max-width: 768px) {
  .about-prof__grid { gap: 16px; }
  .prof-card__header, .prof-card__body, .prof-card__footer { padding-left: 16px; padding-right: 16px; }
  .pro-list-grid { grid-template-columns: 1fr; }
  .info-articles-grid { grid-template-columns: 1fr; }
  .faq-section-nav { top: 58px; }
  .faq-section-nav__link { padding: 12px 14px; font-size: 0.8125rem; }
  .faq-item__q { padding: 14px 16px 12px; gap: 10px; }
  .faq-item__a { padding: 14px 16px; }
  .contact-form-card__body, .contact-info-card__body { padding: 16px; }
}

/* ==========================================================================
   各士業について（旧HTML構造の上書き：sn_footer.css 競合解消）
   ========================================================================== */

/* 担当業務リストを横並び＆文字を横書きに */
#shigyou-about .consultaion_category_list ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
#shigyou-about .consultaion_category_list ul li {
  width: auto !important;
  flex: 0 0 auto !important;
  list-style: none !important;
}
#shigyou-about .consultaion_category_list ul li span {
  display: inline-block !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  font-size: 0.9375rem !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--clr-text) !important;
  border: 1px solid var(--clr-gray-200, #e5e7eb) !important;
  line-height: 1.4 !important;
}

/* 各士業セクション間の余白 */
#shigyou-about .sigyou-category {
  padding: 48px 24px !important;
  margin: 0 auto 32px !important;
  background: var(--clr-white) !important;
  border-radius: var(--r-xl, 24px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  max-width: 1080px !important;
}

/* タイトル余白調整 */
#shigyou-about .sigyou-category h3 {
  margin: 0 auto 32px !important;
  padding: 8px 36px !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

/* 説明文の余白 */
#shigyou-about .sigyou-category p,
#shigyou-about .sigyou-category .shigyou-caption p {
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  line-height: 1.85 !important;
  padding: 0 !important;
}

/* バッジ画像（士業アイコン）のサイズ調整 */
#shigyou-about .badge {
  width: auto !important;
  max-width: 240px !important;
  margin: 0 auto 24px !important;
}
#shigyou-about .badge img {
  width: 120px !important;
  height: auto !important;
}

/* top-consultation 内の padding 削減（不要な空白を除去） */
#shigyou-about .top-consultation {
  padding-bottom: 0 !important;
  padding-top: 16px !important;
}

/* 全体のセクション余白を確保 */
#shigyou-about {
  padding: 40px 16px 64px !important;
}
#shigyou-about > * + * {
  margin-top: 16px !important;
}

/* モバイル */
@media screen and (max-width: 768px) {
  #shigyou-about .sigyou-category { padding: 28px 16px !important; }
  #shigyou-about .sigyou-category h3 { font-size: 1.0625rem !important; padding: 6px 24px !important; }
  #shigyou-about .consultaion_category_list ul { gap: 8px !important; }
  #shigyou-about .consultaion_category_list ul li span { padding: 8px 14px !important; font-size: 0.8125rem !important; }
}

/* ==========================================================================
   トップページ INTERVIEW セクション
   ========================================================================== */
.top-interview {
  padding: clamp(56px, 9vw, 96px) 0;
  background: linear-gradient(180deg, var(--clr-white) 0%, #f5f7fb 100%);
}
.top-interview__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.top-interview__header {
  text-align: center;
  margin-bottom: 48px;
}
.top-interview__eyebrow {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--clr-primary);
}
.top-interview__title {
  margin: 0 0 14px;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.top-interview__desc {
  margin: 0 auto;
  max-width: 640px;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--clr-text-sub);
}

.top-interview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.interview-card {
  background: var(--clr-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.interview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.interview-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.interview-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.interview-card__video:hover .interview-card__thumb { transform: scale(1.04); }
.interview-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s;
}
.interview-card__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.interview-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.interview-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.interview-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-text);
}
.interview-card__profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--clr-gray-100);
}
.interview-card__role {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--clr-primary);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.interview-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-text);
}
.interview-card__office {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .top-interview__list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media screen and (max-width: 640px) {
  .top-interview__list { grid-template-columns: 1fr; gap: 16px; }
  .top-interview__header { margin-bottom: 32px; }
  .interview-card__body { padding: 16px 18px 18px; }
}

/* ==========================================================================
   全体ブラッシュアップ - 視覚的な統一感と洗練度を高める
   ========================================================================== */

/* ----- セクション基本余白の統一 ----- */
.top_pickup,
.latest_pro,
.how-it-works,
.top-about,
.top-articles,
.top-interview,
.top_testimonials,
.join_kaiketsu,
#kensaku,
.consult-cats {
  padding-top: clamp(64px, 9vw, 110px) !important;
  padding-bottom: clamp(64px, 9vw, 110px) !important;
}

/* セクション交互背景でリズムをつくる */
.top_pickup,
.how-it-works,
.top-articles,
.top_testimonials {
  background: var(--clr-white) !important;
}
.latest_pro,
.top-about,
.top-interview,
.join_kaiketsu {
  background: linear-gradient(180deg, #f5f7fb 0%, #fafbfc 100%) !important;
}
.consult-cats {
  background: #fafbfc !important;
}

/* ----- 共通セクションタイトル (main_title) のブラッシュアップ ----- */
.main_title {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px) !important;
  position: relative;
}
.main_title h2 {
  margin: 0 !important;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--clr-text) !important;
  line-height: 1.3 !important;
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 16px !important;
}
.main_title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary) 0%, #62C8D3 100%);
  border-radius: 999px;
}

/* ----- カード共通の洗練 ----- */
.pro-card,
.interview-card,
.info-article-card,
.prof-card {
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.pro-card:hover,
.interview-card:hover,
.info-article-card:hover,
.prof-card:hover {
  border-color: rgba(30,91,206,0.15) !important;
}

/* ----- ボタン共通スタイルの統一 ----- */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill, 999px) !important;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  line-height: 1.2 !important;
}
.btn--primary {
  background: var(--clr-primary) !important;
  color: #fff !important;
}
.btn--primary:hover {
  background: #1947a3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(30,91,206,0.3) !important;
}
.btn--outline {
  background: transparent !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
}
.btn--outline:hover {
  background: var(--clr-primary) !important;
  color: #fff !important;
}
.btn--sm { padding: 8px 18px !important; font-size: 0.8125rem !important; }

/* ----- 士業バッジ（shigyo_mark）の高品質化 ----- */
.shigyo_mark {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #fff !important;
}

/* ----- pro-card のレイアウト微調整 ----- */
.pro-card {
  border-radius: 16px !important;
}
.pro-card__info {
  padding: 14px 16px 8px !important;
}
.pro-card__office {
  font-size: 0.75rem !important;
  color: var(--clr-text-muted) !important;
  margin: 0 0 2px !important;
  letter-spacing: 0.01em !important;
}
.pro-card__name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  color: var(--clr-text) !important;
}
.pro-card__badge {
  padding: 12px 16px 4px !important;
}

/* ----- top_pickup-list と pro-card-list の統一 ----- */
.pro-card-list,
.top_pickup-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- how-step の洗練 ----- */
.how-step {
  background: var(--clr-white) !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.how-step:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important;
}
.step-num {
  display: inline-block !important;
  padding: 4px 14px !important;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #62C8D3 100%) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.step-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(30,91,206,0.08) !important;
  border-radius: 50% !important;
  color: var(--clr-primary) !important;
}
.step-label {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
.step-desc {
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: var(--clr-text-sub) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ----- how-guarantees の改善 ----- */
.how-guarantees {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px 24px !important;
  margin: 40px 0 0 !important;
  padding: 24px !important;
  background: var(--clr-white) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(30,91,206,0.1) !important;
  list-style: none !important;
}
.how-guarantees li {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  position: relative !important;
}

/* ----- top-about の洗練 ----- */
.top-about-wrapper {
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 0 var(--container-pad) !important;
}
.top-about-title {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  margin: 0 0 28px !important;
  color: var(--clr-text) !important;
}
.top-about-text {
  font-size: 1rem !important;
  line-height: 2 !important;
  color: var(--clr-text-sub) !important;
  margin: 0 !important;
}

/* ----- testimonials の改善 ----- */
.testimonials_list_item {
  background: var(--clr-white) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.testimonials_list_item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important;
}

/* ----- pro-cta-band（CTAバンド）の刷新 ----- */
.pro-cta-band {
  background: linear-gradient(135deg, var(--clr-primary) 0%, #62C8D3 100%) !important;
  padding: 56px 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.pro-cta-band::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.pro-cta-band__title {
  color: #fff !important;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem) !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}
.pro-cta-band__lead {
  color: rgba(255,255,255,0.92) !important;
  margin: 0 0 20px !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
.btn--cta-band {
  background: #fff !important;
  color: var(--clr-primary) !important;
  font-weight: 800 !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
.btn--cta-band:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2) !important;
}

/* ----- breadcrumbs の洗練 ----- */
.breadcrumbs {
  padding: 12px var(--container-pad) !important;
  font-size: 0.8125rem !important;
}

/* ----- ナビゲーションホバー状態の改善 ----- */
.navbar__links a {
  position: relative !important;
  transition: color 0.2s !important;
}
.navbar__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s;
}
.navbar__links a:hover::after,
.navbar__links a.is-active::after {
  transform: scaleX(1);
}
.navbar__links a:hover,
.navbar__links a.is-active {
  color: var(--clr-primary) !important;
}

/* ----- consult-cats の洗練 ----- */
.consult-cats__grid {
  gap: 16px !important;
}
.consult-cat-item {
  background: var(--clr-white) !important;
  border-radius: 16px !important;
  padding: 20px 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
.consult-cat-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
  border-color: rgba(30,91,206,0.2) !important;
}

/* ----- フッターのリンクホバー ----- */
.footer-nav-list li a {
  position: relative !important;
  transition: color 0.2s, padding 0.2s !important;
}
.footer-nav-list li a:hover {
  color: #fff !important;
  padding-left: 6px !important;
}

/* ----- スクロールバー（モダンブラウザ） ----- */
html { scroll-behavior: smooth; }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: #f1f1f1; }
body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 6px; }
body::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* ----- セレクション色 ----- */
::selection {
  background: rgba(30,91,206,0.2);
  color: var(--clr-text);
}

/* ----- フォーカスリングの改善（アクセシビリティ） ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--clr-primary) !important;
  outline-offset: 2px !important;
}

/* ----- レスポンシブのセクション余白 ----- */
@media screen and (max-width: 768px) {
  .top_pickup,
  .latest_pro,
  .how-it-works,
  .top-about,
  .top-articles,
  .top-interview,
  .top_testimonials,
  .join_kaiketsu,
  #kensaku,
  .consult-cats {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .main_title { margin-bottom: 28px !important; }
  .main_title h2 { font-size: 1.375rem !important; padding-bottom: 12px !important; }
  .main_title h2::after { width: 40px; height: 3px; }
}

/* ==========================================================================
   最終ブラッシュアップ：ヘッダー・余白・タイポグラフィ・全体調整
   ========================================================================== */

/* ----- グローバル余白＆タイポ調整 ----- */
html { font-size: 16px; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'メイリオ', sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
  color: var(--clr-text) !important;
  background: var(--clr-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ヘッダー固定分のbody余白 */
body.kkmg { padding-top: 0; }

/* ----- ヘッダー（navbar）の刷新 ----- */
.navbar {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.3s !important;
}
.navbar__inner {
  height: 72px !important;
  gap: 16px !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}
.navbar__logo-img {
  width: 150px !important;
  transition: opacity 0.2s !important;
}
.navbar__logo-link:hover .navbar__logo-img { opacity: 0.85 !important; }
.navbar__tagline {
  font-size: 0.6875rem !important;
  padding-left: 12px !important;
  margin-left: 4px !important;
  color: var(--clr-text-muted) !important;
  letter-spacing: 0.04em !important;
}
.navbar__links {
  gap: 4px !important;
}
.navbar__links li a {
  padding: 8px 14px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--clr-text-sub) !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--r-sm, 8px) !important;
  transition: color 0.2s, background 0.2s !important;
}
.navbar__links li a:hover {
  color: var(--clr-primary) !important;
  background: rgba(30,91,206,0.06) !important;
}
.navbar__links li a.is-active {
  color: var(--clr-primary) !important;
  background: rgba(30,91,206,0.08) !important;
}

/* ----- ヘッダー右側CTAボタン（士業の方はこちら） ----- */
.btn--outline-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  background: rgba(30,91,206,0.06) !important;
  border: 1.5px solid rgba(30,91,206,0.2) !important;
  border-radius: var(--r-pill, 999px) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.btn--outline-nav:hover {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-color: var(--clr-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30,91,206,0.25) !important;
}

/* ----- 検索ボタン円形 ----- */
.global-nav__search-button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #62C8D3 100%) !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.global-nav__search-button:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 16px rgba(30,91,206,0.3) !important;
}

/* ----- ハンバーガーメニューの位置調整 ----- */
.navbar__toggle {
  width: 32px !important;
  height: 24px !important;
}

/* ----- モバイルオーバーレイメニュー ----- */
.sp_overlay {
  background: rgba(17,38,58,0.98) !important;
  backdrop-filter: blur(8px) !important;
}
.sp_overlay nav ul {
  padding: 0 !important;
  margin: 0 !important;
}
.sp_overlay nav ul li a {
  color: #fff !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  padding: 16px 24px !important;
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  transition: background 0.2s, padding-left 0.2s !important;
}
.sp_overlay nav ul li a:hover {
  background: rgba(255,255,255,0.06) !important;
  padding-left: 32px !important;
}

/* ----- パンくず（breadcrumbs）の余白とフォント ----- */
.breadcrumbs {
  padding: 14px clamp(16px, 3vw, 32px) !important;
  font-size: 0.8125rem !important;
  background: #fafbfc !important;
  border-bottom: 1px solid var(--clr-gray-100, #f3f4f6) !important;
}
.breadcrumbs nav,
.breadcrumbs .aioseo-breadcrumbs {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

/* ----- フッターの全体ブラッシュアップ ----- */
.site-footer {
  background: #11263A !important;
  color: #fff !important;
  margin-top: 0 !important;
}
.site-footer__inner {
  padding: clamp(48px, 7vw, 72px) clamp(16px, 3vw, 32px) clamp(28px, 4vw, 40px) !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  gap: clamp(28px, 4vw, 40px) !important;
}
.footer-col__title {
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(98,200,211,0.4) !important;
}
.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer-nav-list li a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8125rem !important;
  text-decoration: none !important;
  transition: color 0.2s, padding-left 0.2s !important;
  display: inline-block !important;
}
.footer-nav-list li a:hover {
  color: #62C8D3 !important;
  padding-left: 6px !important;
}
.site-footer__bottom {
  background: rgba(0,0,0,0.25) !important;
  padding: 16px clamp(16px, 3vw, 32px) !important;
}
.site-footer__bottom-inner {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.site-footer__copyright {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
}
.footer-legal-nav {
  display: flex !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-legal-nav li a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.75rem !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.footer-legal-nav li a:hover { color: #62C8D3 !important; }
.footer-col--brand .footer-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}
.footer-desc {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
  margin-top: 12px !important;
}

/* ----- メインコンテンツ余白統一 ----- */
.container,
.content-wrapper {
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  max-width: var(--container-max, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ----- h1〜h3 タイポ階層の統一 ----- */
h1, h2, h3 {
  color: var(--clr-text) !important;
  letter-spacing: -0.01em !important;
}
h1 { font-weight: 800 !important; line-height: 1.3 !important; }
h2 { font-weight: 800 !important; line-height: 1.35 !important; }
h3 { font-weight: 700 !important; line-height: 1.4 !important; }

/* p のデフォルト */
p { margin: 0 0 1em; line-height: 1.85; }
p:last-child { margin-bottom: 0; }

/* リンクの統一 */
a { transition: color 0.2s; }

/* ----- 画像周りのデフォルト ----- */
img { max-width: 100%; height: auto; display: block; }

/* ----- レスポンシブ：ヘッダー＆余白 ----- */
@media screen and (max-width: 1024px) {
  .navbar__links { display: none !important; }
  .navbar__cta .btn--outline-nav { display: none !important; }
  .navbar__toggle { display: flex !important; align-items: center !important; }
}
@media screen and (max-width: 768px) {
  .navbar__inner {
    height: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .navbar__logo-img { width: 120px !important; }
  .navbar__tagline { display: none !important; }
  .global-nav__search-button { width: 34px !important; height: 34px !important; }
  body { font-size: 0.875rem !important; }
  .breadcrumbs { padding: 10px 16px !important; font-size: 0.75rem !important; }
}

/* ----- 一覧ページ余白 ----- */
.sn-page-content { padding: clamp(40px, 7vw, 80px) 0 !important; }

/* ----- ヒーロー直下のセクション一覧の余白 ----- */
.top_pickup:first-of-type,
section:first-of-type:not(.hero):not(.top-interview):not(.sn-consult-section):not(.info-mag-section):not(.sn-profile__section) {
  padding-top: clamp(48px, 7vw, 80px) !important;
}
/* sn-profile__section：flex column で子要素間の余白を完全制御 */
html body .sn-profile__section:first-of-type,
html body .sn-profile .sn-profile__section,
html body .sn-profile__section {
  padding-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
/* セクション直下の全子要素：上部の余白・パディングを強制0 */
html body .sn-profile__section > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* h2 タイトルの下余白のみ許可 */
html body .sn-profile__section > h2.sn-profile__section-title {
  margin-bottom: 12px !important;
}
/* 本文コンテンツの先頭要素の上余白も0 */
html body .sn-profile__section > div > *:first-child,
html body .sn-profile__section > div > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 空の <p>（&nbsp;のみ）を高さ0で非表示 */
html body .sn-profile__pr-text p:empty,
html body .sn-profile__expert-text p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
/* &nbsp;のみの段落も詰める */
html body .sn-profile__pr-text > p,
html body .sn-profile__expert-text > p {
  margin-top: 0 !important;
  margin-bottom: 0.3em !important;
}

/* ----- 装飾的セクション間の境界線 ----- */
.top_pickup + .latest_pro::before,
.how-it-works::before {
  content: "";
  display: none;
}

/* ==========================================================================
   top-about セクション：SVGイラスト背景＋読みやすさ強化
   ========================================================================== */
.top-about {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.85) 100%),
    url('../asset/images/about-bridge.svg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}
.top-about::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 1;
}
.top-about .top-about-wrapper {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 24px !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  box-shadow: 0 12px 40px rgba(17,38,58,0.08), 0 2px 8px rgba(17,38,58,0.04) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  min-width: 0 !important;
  width: auto !important;
}
.top-about .top-about-wrapper * { min-width: 0 !important; }
.top-about .top-about-description {
  color: var(--clr-text-sub, #4a5568) !important;
  font-size: 1rem !important;
  line-height: 2 !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
.top-about .top-about-title {
  position: relative !important;
  text-align: center !important;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  margin: 0 0 28px !important;
  color: var(--clr-text, #1a202c) !important;
  letter-spacing: 0.02em !important;
}
.top-about .top-about-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, #1E5BCE 0%, #62C8D3 100%);
  border-radius: 999px;
}
.top-about .top-about-text {
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 2 !important;
  color: var(--clr-text-sub, #4a5568) !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

@media screen and (max-width: 768px) {
  .top-about .top-about-wrapper {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }
  .top-about .top-about-title { font-size: 1.25rem !important; line-height: 1.6 !important; }
  .top-about .top-about-text { font-size: 0.9375rem !important; line-height: 1.85 !important; }
}

/* ==========================================================================
   士業タブの2段表示＆セクション見出しのセンタリング
   ========================================================================== */

/* ----- 上部の士業タブ：2段表示（5+4 がきれいに収まる幅に制限） ----- */
.sn-consult-tabs__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px 14px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ----- 士業セパレーター（弁護士/社会保険労務士/司法書士のバッジ）をセンター表示 ----- */
.sn-consult-grid__sep {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 28px 0 12px !important;
  margin-top: 8px !important;
  list-style: none !important;
}
.sn-consult-grid__sep::before,
.sn-consult-grid__sep::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--clr-gray-200, #e5e7eb) !important;
  max-width: 320px !important;
}
.sn-consult-grid__sep .tag {
  flex-shrink: 0 !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  white-space: nowrap !important;
}

/* ----- モバイル：タブの幅を緩和、セパレーターの線を短く ----- */
@media screen and (max-width: 768px) {
  .sn-consult-tabs__list { max-width: 100% !important; gap: 8px !important; }
  .sn-consult-tabs__item .tag { padding: 8px 14px !important; font-size: 0.8125rem !important; }
  .sn-consult-grid__sep::before,
  .sn-consult-grid__sep::after { max-width: 100px !important; }
  .sn-consult-grid__sep { padding: 20px 0 8px !important; }
}

/* ==========================================================================
   掲載希望の士業の方へ（join_kaiketsu）：SVGイラスト背景＋読みやすさ強化
   ========================================================================== */
.join_kaiketsu {
  position: relative !important;
  background:
    linear-gradient(135deg, rgba(17,38,58,0.85) 0%, rgba(30,91,206,0.78) 60%, rgba(20,184,166,0.72) 100%),
    url('../asset/images/about-publish.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal, normal !important;
  overflow: hidden !important;
  padding: clamp(64px, 9vw, 110px) clamp(16px, 3vw, 32px) !important;
  color: #fff !important;
}
.join_kaiketsu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(17,38,58,0.2) 0%, rgba(17,38,58,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.join_kaiketsu .join_kaiketsu-wrapper {
  position: relative !important;
  z-index: 2 !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 24px !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
  text-align: center !important;
}
.join_kaiketsu .join_intro h4 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem) !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 14px !important;
}
.join_kaiketsu .join_intro h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #fff 0%, #62C8D3 100%);
  border-radius: 999px;
}
.join_kaiketsu .join_intro .description {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  margin: 0 0 32px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.2) !important;
}

.join_kaiketsu .topbenifits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px 16px !important;
}
.join_kaiketsu .topbenifits li {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.join_kaiketsu .topbenifits li p {
  margin: 0 !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.join_kaiketsu .topbenifits li p::before {
  content: "✓ ";
  color: #62C8D3;
  font-weight: 800;
}

.join_kaiketsu .more-button { margin-top: 8px !important; }
.join_kaiketsu .more-button .button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  color: var(--clr-primary, #1E5BCE) !important;
  font-weight: 800 !important;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.join_kaiketsu .more-button .button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.32) !important;
}

@media screen and (max-width: 768px) {
  .join_kaiketsu .join_kaiketsu-wrapper {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }
  .join_kaiketsu .join_intro h4 { font-size: 1.25rem !important; }
  .join_kaiketsu .topbenifits { flex-direction: column !important; align-items: stretch !important; }
  .join_kaiketsu .topbenifits li { text-align: center !important; }
}

/* ==========================================================================
   about-profession ページ：他ページと同じ page-banner を強制適用
   （hero部分を統一）
   ========================================================================== */
/* 旧 #shigyou-about 内に hero/h1 がある場合は隠す（page-bannerで表示するため） */
.sn-page-content--about-profession .shigyou-about-h1,
body.page-about-profession .shigyou-about-h1,
#shigyou-about > .shigyou-about-h1 { display: none !important; }

/* about-profession ページ専用 banner グラデ */
.page-banner--about::before {
  background: linear-gradient(135deg, rgba(17,38,58,0.92) 0%, rgba(30,91,206,0.7) 50%, rgba(20,184,166,0.55) 100%) !important;
}

/* ==========================================================================
   FAQ：Q/A バッジを左、テキストを右に並べる（既存スタイルを上書き）
   ========================================================================== */
.faq-item__q {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 24px 16px !important;
  background: rgba(30,91,206,0.04) !important;
  border-bottom: 1px solid var(--clr-gray-100, #f3f4f6) !important;
}
.faq-item__a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 24px !important;
}
.faq-item__badge {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  color: #fff !important;
  line-height: 1 !important;
}
.faq-item__badge--q {
  background: linear-gradient(135deg, #1E5BCE 0%, #2F70E0 100%) !important;
}
.faq-item__badge--a {
  background: linear-gradient(135deg, #14B8A6 0%, #62C8D3 100%) !important;
}
.faq-item__badge-num {
  font-size: 0.6875rem !important;
  margin-left: 1px !important;
}
.faq-item__question {
  margin: 0 !important;
  padding-top: 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  flex: 1 !important;
  min-width: 0 !important;
  color: var(--clr-text, #1a202c) !important;
}
.faq-item__answer {
  margin: 0 !important;
  padding-top: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.85 !important;
  color: var(--clr-text-sub, #4a5568) !important;
}

@media screen and (max-width: 768px) {
  .faq-item__q,
  .faq-item__a { padding: 14px 16px !important; gap: 10px !important; }
  .faq-item__badge { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; }
}

/* ==========================================================================
   FAQ：質問間の余白を広げる＆下部CTAブロックをセンター揃え
   ========================================================================== */
.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}
.faq-item {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}

/* 下部CTAブロックを中央揃え */
.faq-cta-block {
  margin-top: 56px !important;
  padding: 48px 32px !important;
  text-align: center !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.05) 0%, rgba(20,184,166,0.05) 100%) !important;
  border: 1px solid rgba(30,91,206,0.12) !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
.faq-cta-block__title {
  margin: 0 !important;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  font-weight: 800 !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
}
.faq-cta-block__text {
  margin: 0 !important;
  max-width: 560px !important;
  font-size: 0.9375rem !important;
  line-height: 1.85 !important;
  color: var(--clr-text-sub, #4a5568) !important;
  text-align: center !important;
}
.faq-cta-block .btn {
  margin-top: 8px !important;
}

@media screen and (max-width: 768px) {
  .faq-list { gap: 20px !important; }
  .faq-cta-block { padding: 32px 20px !important; margin-top: 40px !important; }
}

/* ==========================================================================
   page-banner：縦並び中央揃え＆白文字＆順序入れ替え（タイトル→エイブロー→説明）
   ========================================================================== */
.page-banner__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 16px !important;
}
.page-banner__title {
  order: 1 !important;
  color: #fff !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}
.page-banner__eyebrow {
  order: 2 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.page-banner__desc {
  order: 3 !important;
  margin: 0 auto !important;
  max-width: 640px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}

@media screen and (max-width: 768px) {
  .page-banner__inner { gap: 12px !important; }
  .page-banner__title { font-size: 1.375rem !important; }
  .page-banner__desc { font-size: 0.875rem !important; }
}

/* ==========================================================================
   士業別プレースホルダー画像
   ========================================================================== */
.sn-shigyou-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.sn-shigyou-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%);
  pointer-events: none;
}
.sn-shigyou-placeholder__icon {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.sn-shigyou-placeholder__icon svg {
  width: 48px;
  height: 48px;
}
.sn-shigyou-placeholder__label {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* ==========================================================================
   page-publish：士業向け掲載案内ページ（スタイリッシュ）
   ========================================================================== */
.sn-page-content--publish { padding: 0 !important; background: #fafbfc !important; }

/* ----- セクション共通ヘッダー ----- */
.publish-section__header {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.publish-section__eyebrow {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--clr-primary, #1E5BCE);
  text-transform: uppercase;
}
.publish-section__title {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--clr-text);
  line-height: 1.35;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.publish-section__title::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, #1E5BCE, #14B8A6);
  border-radius: 999px;
}
.publish-section__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--clr-text-sub, #4a5568);
}
.publish-section__header--light .publish-section__title,
.publish-section__header--light .publish-section__desc { color: #fff; }
.publish-section__header--light .publish-section__title::after {
  background: linear-gradient(90deg, #fff, #62C8D3);
}

/* ----- HERO INTRO ----- */
.publish-lead {
  background: linear-gradient(135deg, #11263A 0%, #1E5BCE 60%, #14B8A6 100%);
  color: #fff;
  padding: clamp(72px, 10vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.publish-lead::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98,200,211,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.publish-lead__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; }
.publish-lead__eyebrow {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.85);
}
.publish-lead__title {
  margin: 0 0 24px;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.publish-lead__accent {
  color: #62C8D3;
  position: relative;
  white-space: nowrap;
}
.publish-lead__text {
  margin: 0 auto;
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
.publish-lead__stats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 24px 16px;
}
.publish-stat { text-align: center; padding: 0 8px; }
.publish-stat + .publish-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.publish-stat__num {
  display: block;
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #62C8D3;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.publish-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}

/* ----- BENEFITS ----- */
.publish-benefits { padding: clamp(72px, 10vw, 120px) 0; background: #fff; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.benefit-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(17,38,58,0.12);
  border-color: rgba(30,91,206,0.18);
}
.benefit-card__icon {
  width: 64px; height: 64px;
  display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(30,91,206,0.08), rgba(20,184,166,0.08));
  border-radius: 16px;
  color: var(--clr-primary);
  margin-bottom: 20px;
}
.benefit-card__title {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.45;
}
.benefit-card__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--clr-text-sub);
}
.benefit-card__text strong {
  color: var(--clr-primary);
  font-weight: 700;
}

/* ----- PROFESSIONS ----- */
.publish-professions {
  padding: clamp(64px, 9vw, 96px) 0;
  background: #fafbfc;
}
.profession-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.profession-pills .shigyo_mark {
  padding: 10px 22px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
.profession-pills li { list-style: none; }
.profession-pills .shigyo_mark:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* ----- FLOW ----- */
.publish-flow { padding: clamp(72px, 10vw, 120px) 0; background: #fff; }
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  padding: 32px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 18px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17,38,58,0.08);
}
.flow-step__num {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #1E5BCE 0%, #62C8D3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1;
}
.flow-step__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-text);
}
.flow-step__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--clr-text-sub);
}

/* ----- PRICING ----- */
.publish-pricing {
  padding: clamp(72px, 10vw, 120px) 0;
  background: linear-gradient(135deg, #11263A 0%, #1E5BCE 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.publish-pricing::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(98,200,211,0.18), transparent 60%);
  pointer-events: none;
}
.publish-pricing > .container { position: relative; z-index: 2; }
.pricing-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  padding: 48px 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  text-align: center;
}
.pricing-card__head { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px dashed rgba(0,0,0,0.08); }
.pricing-card__badge {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(30,91,206,0.1), rgba(20,184,166,0.1));
  color: var(--clr-primary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 999px;
  margin-bottom: 16px;
}
.pricing-card__price {
  margin: 0;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--clr-text);
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-card__price-mark { font-size: 0.5em; vertical-align: top; line-height: 1.5; }
.pricing-card__price-unit { font-size: 0.32em; font-weight: 700; vertical-align: baseline; color: var(--clr-text-muted); -webkit-text-fill-color: var(--clr-text-muted); }
.pricing-card__sub { margin: 8px 0 0; font-size: 0.875rem; color: var(--clr-text-muted); }
.pricing-card__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  display: flex; flex-direction: column;
  gap: 12px;
}
.pricing-card__list li {
  padding-left: 30px;
  position: relative;
  font-size: 0.9375rem;
  color: var(--clr-text);
}
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #1E5BCE, #14B8A6);
  border-radius: 50%;
  background-image:
    linear-gradient(135deg, #1E5BCE, #14B8A6),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><polyline points='20 6 9 17 4 12' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pricing-card__list li::after {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 20px; height: 22px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  line-height: 22px;
}
.pricing-card__footnote {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  background: #f5f7fb;
  border-radius: 12px;
  padding: 14px 18px;
  line-height: 1.7;
  text-align: left;
}

/* ----- FAQ ----- */
.publish-faq { padding: clamp(72px, 10vw, 120px) 0; background: #fafbfc; }
.publish-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.publish-faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 14px;
  padding: 24px 28px;
  transition: box-shadow 0.2s;
}
.publish-faq-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.publish-faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.5;
}
.publish-faq-item__qmark {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #1E5BCE, #62C8D3);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
}
.publish-faq-item__a {
  margin: 0;
  padding-left: 42px;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--clr-text-sub);
}

/* ----- CTA ----- */
.publish-cta {
  background: linear-gradient(135deg, #11263A 0%, #1E5BCE 60%, #14B8A6 100%);
  color: #fff;
  padding: clamp(72px, 10vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.publish-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(98,200,211,0.18) 0%, transparent 50%);
}
.publish-cta__inner { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; }
.publish-cta__title {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.publish-cta__text {
  margin: 0 0 36px;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
}
.publish-cta__buttons {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.publish-cta__primary {
  background: #fff !important;
  color: var(--clr-primary) !important;
  font-weight: 800 !important;
  padding: 16px 36px !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
}
.publish-cta__primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3) !important;
}
.btn--outline-light {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #fff !important;
}

/* ----- レスポンシブ ----- */
@media screen and (max-width: 1024px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .publish-lead__stats { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .publish-stat + .publish-stat { border-left: none; }
  .publish-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
}
@media screen and (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .publish-lead__stats { grid-template-columns: repeat(2, 1fr); padding: 16px; }
  .publish-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .pricing-card { padding: 32px 24px; border-radius: 20px; }
  .pricing-card__price { font-size: 3.25rem; }
  .publish-faq-item { padding: 18px 20px; }
  .publish-faq-item__a { padding-left: 0; }
}

/* ==========================================================================
   publish ページ（旧コンテンツ）の枠・装飾を軽く・上品に上書き
   ========================================================================== */
#publish {
  background: transparent !important;
  padding: 32px clamp(16px, 3vw, 32px) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
}
#publish > div,
#publish > section,
.publish-main,
.publish-flow-box,
.publish-step-box {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 28px rgba(17,38,58,0.06) !important;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px) !important;
  margin: 0 auto 32px !important;
  max-width: 1000px !important;
}

/* 「お申し込みの流れ」見出し */
#publish h2,
.publish-h2,
.flow-h2 {
  color: var(--clr-text, #17263a) !important;
  font-size: clamp(1.375rem, 3vw, 1.875rem) !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 0 0 12px !important;
  margin: 0 0 28px !important;
  position: relative !important;
  display: block !important;
  background: transparent !important;
}
#publish h2::before { content: none !important; }
#publish h2::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1E5BCE, #14B8A6) !important;
  border-radius: 999px !important;
  top: auto !important;
  right: auto !important;
}

/* ステップ間の矢印を中央揃え */
#publish img[src*="arrow"],
#publish img[alt*="矢印"],
.publish-arrow,
#publish .step-arrow {
  display: block !important;
  margin: 16px auto !important;
  max-width: 40px !important;
  height: auto !important;
}

/* ステップ番号付き見出し（h3など） */
#publish h3,
.publish-step h3,
.flow-step-title {
  text-align: center !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  color: var(--clr-text) !important;
  margin: 24px 0 12px !important;
}

/* ステップの本文 */
#publish p {
  text-align: center !important;
  font-size: 0.9375rem !important;
  line-height: 1.85 !important;
  color: var(--clr-text-sub) !important;
}

/* 掲載費について：1行で */
.publish-dl,
.publish-fee {
  width: auto !important;
  max-width: 880px !important;
  margin: 24px auto 32px !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.05), rgba(20,184,166,0.05)) !important;
  border: 1px solid rgba(30,91,206,0.1) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px 14px !important;
}
.publish-dl dt,
.publish-fee__label {
  display: inline !important;
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
  color: var(--clr-primary, #1E5BCE) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.publish-dl dd,
.publish-fee__value {
  display: inline !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.publish-dl dt::after { content: ""; }

/* お申し込みボタン */
.publish-btn,
.publish-bottom {
  width: auto !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
.publish-btn a,
.publish-bottom a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 16px 40px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(30,91,206,0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.publish-btn a:hover,
.publish-bottom a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(30,91,206,0.4) !important;
}

/* 3ヶ月無料キャンペーンを目立たせる */
.renwl_campaign,
.publish-campaign {
  background: linear-gradient(135deg, #FF6B6B 0%, #F06292 100%) !important;
  color: #fff !important;
  padding: 36px 32px !important;
  border-radius: 20px !important;
  text-align: center !important;
  box-shadow: 0 14px 40px rgba(240,98,146,0.3) !important;
  margin: 24px auto !important;
  max-width: 880px !important;
  position: relative !important;
  overflow: hidden !important;
}
.renwl_campaign::before,
.publish-campaign::before {
  content: "🎉 キャンペーン中";
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}
.renwl_campaign p,
.publish-campaign p {
  color: #fff !important;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.renwl_campaign strong,
.publish-campaign strong {
  font-size: 1.4em !important;
  color: #FFEB3B !important;
}

/* LINE 開設・掲載のセクション */
.publish-line,
.publish-line-section,
.line-section {
  background: linear-gradient(135deg, #06C755 0%, #00B900 100%) !important;
  color: #fff !important;
  padding: 32px !important;
  border-radius: 20px !important;
  max-width: 880px !important;
  margin: 24px auto !important;
  box-shadow: 0 14px 40px rgba(6,199,85,0.25) !important;
  position: relative !important;
}
.publish-line h3,
.publish-line-section h3 {
  color: #fff !important;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.publish-line h3::before,
.publish-line-section h3::before {
  content: "LINE";
  background: #fff;
  color: #06C755;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.publish-line p,
.publish-line-section p {
  color: rgba(255,255,255,0.95) !important;
  font-size: 0.9375rem !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}

/* ==========================================================================
   sn-consult-grid：項目が少ない士業も中央寄せでバランスよく
   ========================================================================== */
.sn-consult-grid__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.sn-consult-grid__item {
  flex: 0 0 calc(12.5% - 13px) !important;
  min-width: 110px !important;
  max-width: 180px !important;
  list-style: none !important;
}
@media screen and (max-width: 1024px) {
  .sn-consult-grid__item { flex: 0 0 calc(16.666% - 12px) !important; }
}
@media screen and (max-width: 768px) {
  .sn-consult-grid__item { flex: 0 0 calc(20% - 12px) !important; min-width: 92px !important; }
}
@media screen and (max-width: 480px) {
  .sn-consult-grid__item { flex: 0 0 calc(33.333% - 10px) !important; }
}

/* セパレーター（士業区切り） */
.sn-consult-grid__sep {
  flex-basis: 100% !important;
  width: 100% !important;
  list-style: none !important;
  padding: 32px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* ==========================================================================
   INTERVIEW セクション：寂しい背景を装飾的に
   ========================================================================== */
.top-interview {
  position: relative !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(98,200,211,0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(30,91,206,0.10) 0%, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 50%, #ffffff 100%) !important;
  overflow: hidden !important;
}
.top-interview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(30,91,206,0.10) 1.2px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.top-interview::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(98,200,211,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.top-interview__wrap { position: relative; z-index: 2; }

/* 装飾的な引用符をセクション左上に */
.top-interview__header { position: relative; }
.top-interview__header::before {
  content: "\201C";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  color: rgba(30,91,206,0.08);
  pointer-events: none;
  z-index: 0;
}
.top-interview__eyebrow,
.top-interview__title,
.top-interview__desc { position: relative; z-index: 1; }

/* インタビューカード自体を少し豪華に */
.interview-card {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(30,91,206,0.06) !important;
  box-shadow: 0 4px 20px rgba(17,38,58,0.06) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.interview-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(17,38,58,0.12) !important;
}
.interview-card__video {
  position: relative !important;
}
.interview-card__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

/* ==========================================================================
   join_kaiketsu：旧背景・コンテンツの上書き（強制適用版）
   ========================================================================== */
section.join_kaiketsu,
.join_kaiketsu {
  position: relative !important;
  background: linear-gradient(135deg, #11263A 0%, #1E5BCE 60%, #14B8A6 100%) !important;
  background-image: linear-gradient(135deg, #11263A 0%, #1E5BCE 60%, #14B8A6 100%) !important;
  background-color: #11263A !important;
  padding: clamp(64px, 9vw, 110px) clamp(16px, 3vw, 32px) !important;
  color: #fff !important;
  overflow: hidden !important;
}
section.join_kaiketsu::before,
.join_kaiketsu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(98,200,211,0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(98,200,211,0.12) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* 旧 cover-image（3人イラスト等）を完全に隠す */
.join_kaiketsu .cover-image,
.join_kaiketsu .cover-image img {
  display: none !important;
  visibility: hidden !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ラッパーをガラスカードに */
.join_kaiketsu .join_kaiketsu-wrapper {
  position: relative !important;
  z-index: 2 !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 24px !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
  text-align: center !important;
  display: block !important;
  width: auto !important;
}

/* タイトル */
.join_kaiketsu h4,
.join_kaiketsu .join_intro h4 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem) !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 14px !important;
  text-align: center !important;
}
.join_kaiketsu h4::after,
.join_kaiketsu .join_intro h4::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 4px;
  background: linear-gradient(90deg, #fff 0%, #62C8D3 100%);
  border-radius: 999px;
}

/* 説明文 */
.join_kaiketsu .description,
.join_kaiketsu .join_intro .description,
.join_kaiketsu .join_intro p {
  color: rgba(255,255,255,0.95) !important;
  font-size: 1rem !important;
  line-height: 1.95 !important;
  margin: 0 0 32px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
  background: none !important;
}

/* メリットリスト（ピル型バッジ） */
.join_kaiketsu .topbenifits,
.join_kaiketsu ul.topbenifits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px 16px !important;
  background: none !important;
}
.join_kaiketsu .topbenifits li {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  list-style: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.join_kaiketsu .topbenifits li p {
  margin: 0 !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* CTAボタン */
.join_kaiketsu .more-button {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
.join_kaiketsu .more-button .button,
.join_kaiketsu .more-button a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  color: #1E5BCE !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  border: none !important;
}
.join_kaiketsu .more-button .button:hover,
.join_kaiketsu .more-button a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.32) !important;
  background: #fff !important;
  color: #1E5BCE !important;
}

/* ==========================================================================
   how-steps：矢印をカードの縦中央に配置
   ========================================================================== */
.how-steps {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.how-step {
  flex: 1 1 0 !important;
  min-width: 220px !important;
  max-width: 320px !important;
  display: flex !important;
  flex-direction: column !important;
}
.how-step-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  font-size: 1.75rem !important;
  color: var(--clr-text-muted, #9ca3af) !important;
  padding: 0 4px !important;
  align-self: stretch !important;
}

/* 非常口アイコン（掲載を申し込むボタン内）の表示調整 */
.btn--cta-band svg,
.join_kaiketsu .more-button .button svg {
  vertical-align: middle !important;
  margin-left: 6px !important;
}

/* モバイル時は矢印を90度回転して下向きに */
@media screen and (max-width: 768px) {
  .how-steps { flex-direction: column !important; align-items: center !important; }
  .how-step-arrow { transform: rotate(90deg); padding: 4px 0 !important; }
  .how-step { max-width: 100% !important; width: 100% !important; }
}

/* ==========================================================================
   pro-card の写真：角丸を取って四角形に
   ========================================================================== */
.pro-card__photo,
.pro-card-thumb,
.top_pickup-list .pro-card-thumb,
.latest_pro .pro-card-thumb,
.pro-list-grid .pro-card__photo {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.pro-card__photo img,
.pro-card-thumb img,
.pro-list-grid .pro-card__photo img {
  border-radius: 0 !important;
}
.pro-card__no-photo {
  border-radius: 0 !important;
}

/* ==========================================================================
   sn-consult-grid：項目数が少ない士業も自然に見える調整版
   ========================================================================== */
.sn-consult-grid {
  max-width: 1080px !important;
  margin: 0 auto !important;
}
.sn-consult-grid__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sn-consult-grid__item {
  flex: 0 0 calc(16.666% - 16px) !important;
  min-width: 140px !important;
  max-width: 180px !important;
  list-style: none !important;
}
.sn-consult-grid__item a {
  padding: 22px 12px 18px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
}
.sn-consult-grid__item a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(17,38,58,0.08) !important;
}

/* セパレーターは行をリセット */
.sn-consult-grid__sep {
  flex-basis: 100% !important;
  width: 100% !important;
  list-style: none !important;
  padding: 32px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .sn-consult-grid__item { flex: 0 0 calc(20% - 16px) !important; }
}
@media screen and (max-width: 768px) {
  .sn-consult-grid__list { gap: 12px !important; max-width: 100% !important; }
  .sn-consult-grid__item { flex: 0 0 calc(25% - 12px) !important; min-width: 100px !important; max-width: none !important; }
  .sn-consult-grid__item a { padding: 14px 8px 12px !important; min-height: 0 !important; }
}
@media screen and (max-width: 480px) {
  .sn-consult-grid__item { flex: 0 0 calc(33.333% - 10px) !important; }
}

/* ==========================================================================
   INTERVIEW セクション：幾何学SVG背景を適用
   ========================================================================== */
.top-interview {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.7) 100%),
    url('../asset/images/interview-bg.svg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  overflow: hidden !important;
}
.top-interview::before,
.top-interview::after {
  display: none !important;
}
.top-interview__wrap {
  position: relative !important;
  z-index: 2 !important;
}
.top-interview__header {
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   全体ビジュアル強化：背景・装飾・セクションをリッチに
   ========================================================================== */

/* ----- 共通：装飾的グラデブロブを使い回すユーティリティ ----- */
.has-deco-blobs {
  position: relative;
  overflow: hidden;
}
.has-deco-blobs::before,
.has-deco-blobs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* ----- 注目士業セクション：装飾を追加 ----- */
.top_pickup {
  position: relative !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(30,91,206,0.08) 0%, transparent 35%),
    radial-gradient(circle at 92% 80%, rgba(98,200,211,0.10) 0%, transparent 40%),
    #ffffff !important;
  overflow: hidden !important;
}
.top_pickup::before {
  content: "" !important;
  position: absolute;
  top: 60px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(98,200,211,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
.top_pickup::after {
  content: "" !important;
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(30,91,206,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
.top_pickup .main_title,
.top_pickup .content-wrapper { position: relative; z-index: 2; }

/* ----- 新着士業セクション：薄いパターン背景 ----- */
.latest_pro {
  position: relative !important;
  background:
    radial-gradient(circle at 90% 15%, rgba(30,91,206,0.10) 0%, transparent 40%),
    radial-gradient(circle at 5% 90%, rgba(98,200,211,0.12) 0%, transparent 40%),
    linear-gradient(180deg, #f5f7fc 0%, #fafbfd 100%) !important;
  overflow: hidden !important;
}
.latest_pro::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(30,91,206,0.08) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
.latest_pro .latest_pro-wrap { position: relative; z-index: 2; }

/* ----- how-it-works：幾何学装飾 ----- */
.how-it-works {
  position: relative !important;
  background:
    radial-gradient(ellipse at top, rgba(98,200,211,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(30,91,206,0.10) 0%, transparent 50%),
    #ffffff !important;
  overflow: hidden !important;
}
.how-it-works::before {
  content: "" !important;
  position: absolute;
  top: 40px;
  left: 5%;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(30,91,206,0.18), rgba(98,200,211,0.18));
  border-radius: 22px;
  transform: rotate(15deg);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
.how-it-works::after {
  content: "" !important;
  position: absolute;
  bottom: 60px;
  right: 5%;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(98,200,211,0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
.how-it-works > .content-wrapper { position: relative; z-index: 2; }

/* ----- top-articles（記事一覧）：背景強化 ----- */
.top-articles {
  position: relative !important;
  background:
    radial-gradient(circle at 12% 30%, rgba(98,200,211,0.10) 0%, transparent 45%),
    radial-gradient(circle at 88% 70%, rgba(30,91,206,0.08) 0%, transparent 45%),
    #ffffff !important;
  overflow: hidden !important;
}
.top-articles::before {
  content: "";
  position: absolute;
  top: 80px;
  right: 8%;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1E5BCE, #62C8D3);
  border-radius: 14px;
  transform: rotate(20deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* ----- testimonials：装飾 ----- */
.top_testimonials {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(30,91,206,0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(98,200,211,0.10) 0%, transparent 45%),
    #ffffff !important;
  overflow: hidden !important;
}
.top_testimonials::before {
  content: "\201C";
  position: absolute;
  top: 20px;
  left: 5%;
  font-family: Georgia, serif;
  font-size: 12rem;
  line-height: 1;
  color: rgba(30,91,206,0.06);
  pointer-events: none;
  z-index: 0;
}
.top_testimonials::after {
  content: "\201D";
  position: absolute;
  bottom: 40px;
  right: 5%;
  font-family: Georgia, serif;
  font-size: 12rem;
  line-height: 1;
  color: rgba(98,200,211,0.08);
  pointer-events: none;
  z-index: 0;
}
.top_testimonials > .content-wrapper,
.top_testimonials > * { position: relative; z-index: 2; }

/* ----- consult-cats：装飾 ----- */
.consult-cats {
  position: relative !important;
  background:
    radial-gradient(circle at 95% 5%, rgba(30,91,206,0.12) 0%, transparent 45%),
    radial-gradient(circle at 5% 95%, rgba(98,200,211,0.12) 0%, transparent 45%),
    linear-gradient(180deg, #fafbfc 0%, #f3f5fa 100%) !important;
  overflow: hidden !important;
}
.consult-cats::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 4%;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(30,91,206,0.15);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.consult-cats::after {
  content: "";
  position: absolute;
  bottom: 15%;
  right: 6%;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, rgba(98,200,211,0.15), rgba(20,184,166,0.10));
  border-radius: 18px;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}

/* ----- stats-bar の装飾 ----- */
.stats-bar {
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
}
.stats-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(98,200,211,0.18) 0%, transparent 40%);
  pointer-events: none;
}
.stats-bar .stat-num,
.stats-bar .stat-label { color: #fff !important; }
.stats-bar .stat-item svg { color: rgba(255,255,255,0.85) !important; }
.stats-bar .stats-bar__inner { position: relative; z-index: 2; }

/* ----- カードに微妙なシャドウとボーダーを追加 ----- */
.pro-card,
.top_pickup-item,
.interview-card,
.info-article-card,
.prof-card,
.benefit-card,
.flow-step,
.how-step,
.testimonials_list_item {
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 4px 16px rgba(17,38,58,0.06) !important;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}
.pro-card:hover,
.top_pickup-item:hover,
.interview-card:hover,
.info-article-card:hover,
.prof-card:hover,
.benefit-card:hover,
.flow-step:hover,
.how-step:hover,
.testimonials_list_item:hover {
  box-shadow: 0 16px 40px rgba(17,38,58,0.12) !important;
  border-color: rgba(30,91,206,0.18) !important;
}

/* ----- セクション間の装飾的セパレーター ----- */
.top-articles + .top-interview {
  position: relative;
}

/* ----- ボタンに微細な光沢効果 ----- */
.btn--primary {
  position: relative !important;
  overflow: hidden !important;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn--primary:hover::before {
  left: 150%;
}

/* ----- スクロール出現アニメーション用 ----- */
@keyframes snFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.main_title h2 {
  animation: snFadeUp 0.7s ease-out;
}

/* ----- レスポンシブ：装飾を控えめに ----- */
@media screen and (max-width: 768px) {
  .top_pickup::before,
  .top_pickup::after,
  .latest_pro::before,
  .how-it-works::before,
  .how-it-works::after,
  .top-articles::before,
  .top_testimonials::before,
  .top_testimonials::after,
  .consult-cats::before,
  .consult-cats::after {
    transform: scale(0.6);
    opacity: 0.5;
  }
}

/* ==========================================================================
   sn-consult-grid：縦長になりすぎないよう高さを抑える
   ========================================================================== */
.sn-consult-grid__item a {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.sn-consult-grid__item {
  max-width: 150px !important;
}
.sn-consult-icon {
  width: 56px !important;
  height: 56px !important;
}
.sn-consult-icon img {
  width: 48px !important;
  height: 48px !important;
}
.sn-consult-label {
  font-size: 0.8125rem !important;
  margin: 0 !important;
}

@media screen and (max-width: 768px) {
  .sn-consult-grid__item a { padding: 14px 8px 12px !important; }
  .sn-consult-icon { width: 48px !important; height: 48px !important; }
  .sn-consult-icon img { width: 40px !important; height: 40px !important; }
}

/* ==========================================================================
   全ボタン：思わずクリックしたくなる魅力的なスタイル
   ========================================================================== */

/* ---- 共通：CTA ボタン全般を魅力的に ---- */
.btn--primary,
.btn--cta-band,
.publish-cta__primary,
.publish-btn a,
.publish-bottom a,
.join_kaiketsu .more-button .button,
.join_kaiketsu .more-button a {
  position: relative !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #2F70E0 50%, #14B8A6 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 16px 38px !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow:
    0 8px 24px rgba(30,91,206,0.35),
    0 2px 6px rgba(30,91,206,0.2),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease !important;
  animation: snBtnPulse 2.5s ease-in-out infinite !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.btn--primary::after,
.btn--cta-band::after,
.publish-cta__primary::after,
.join_kaiketsu .more-button .button::after,
.join_kaiketsu .more-button a::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: rgba(255,255,255,0.35) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.5s ease, height 0.5s ease !important;
  z-index: -1 !important;
}
.btn--primary:hover,
.btn--cta-band:hover,
.publish-cta__primary:hover,
.publish-btn a:hover,
.publish-bottom a:hover,
.join_kaiketsu .more-button .button:hover,
.join_kaiketsu .more-button a:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background-position: 100% 100% !important;
  box-shadow:
    0 14px 36px rgba(30,91,206,0.5),
    0 4px 12px rgba(30,91,206,0.3),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  color: #fff !important;
  animation: none !important;
}
.btn--primary:hover::after,
.btn--cta-band:hover::after,
.publish-cta__primary:hover::after,
.join_kaiketsu .more-button .button:hover::after,
.join_kaiketsu .more-button a:hover::after {
  width: 400px !important;
  height: 400px !important;
}

/* ボタンの優しい鼓動アニメ */
@keyframes snBtnPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(30,91,206,0.35), 0 2px 6px rgba(30,91,206,0.2), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 10px 32px rgba(30,91,206,0.5), 0 4px 10px rgba(30,91,206,0.3), inset 0 1px 0 rgba(255,255,255,0.35); }
}

/* publish-cta__primary 系（白地）の場合：白を維持しつつ動きを追加 */
.publish-cta__primary {
  background: #fff !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%) !important;
  color: #1E5BCE !important;
  animation: snBtnPulseLight 2.5s ease-in-out infinite !important;
}
.publish-cta__primary:hover {
  background: #fff !important;
  color: #1E5BCE !important;
  transform: translateY(-3px) scale(1.03) !important;
}
@keyframes snBtnPulseLight {
  0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 16px 42px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.2); }
}

/* ---- アウトラインボタン：ホバー時に塗りつぶし＋拡大 ---- */
.btn--outline,
.btn--outline-light {
  position: relative !important;
  background: transparent !important;
  border: 2px solid var(--clr-primary, #1E5BCE) !important;
  color: var(--clr-primary, #1E5BCE) !important;
  font-weight: 800 !important;
  padding: 14px 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.btn--outline-light {
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
}
.btn--outline::before,
.btn--outline-light::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  transition: left 0.4s ease !important;
  z-index: -1 !important;
}
.btn--outline-light::before {
  background: rgba(255,255,255,0.2) !important;
}
.btn--outline:hover {
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(30,91,206,0.4) !important;
}
.btn--outline-light:hover {
  color: #fff !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}
.btn--outline:hover::before,
.btn--outline-light:hover::before {
  left: 0 !important;
}

/* ---- 検索ボタン（btn-search）も魅力的に ---- */
.btn-search {
  background: linear-gradient(135deg, #1E5BCE 0%, #2F70E0 50%, #14B8A6 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(30,91,206,0.35) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.btn-search:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background-position: 100% 100% !important;
  box-shadow: 0 14px 36px rgba(30,91,206,0.5) !important;
}

/* ---- 「お問い合わせ」「お申し込み」等の小型ボタン ---- */
.btn--cta-band {
  font-size: 1.0625rem !important;
  padding: 18px 44px !important;
}

/* ---- 矢印やアイコンを軽く動かす ---- */
.btn--primary svg,
.btn--cta-band svg,
.publish-cta__primary svg,
.publish-btn a svg,
.join_kaiketsu .more-button a svg {
  transition: transform 0.3s ease !important;
}
.btn--primary:hover svg,
.btn--cta-band:hover svg,
.publish-cta__primary:hover svg,
.publish-btn a:hover svg,
.join_kaiketsu .more-button a:hover svg {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   sn-consult-grid：2カラムレイアウトに変更（横長カードで見やすく）
   ========================================================================== */
.sn-consult-grid {
  max-width: 760px !important;
  margin: 0 auto !important;
}
.sn-consult-grid__list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}
.sn-consult-grid__item {
  flex: none !important;
  max-width: none !important;
  min-width: 0 !important;
  list-style: none !important;
  width: auto !important;
}
.sn-consult-grid__item a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  min-height: 0 !important;
  height: auto !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.05) !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
}
.sn-consult-grid__item a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px rgba(17,38,58,0.10) !important;
  border-color: rgba(30,91,206,0.20) !important;
}
.sn-consult-icon {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.08), rgba(20,184,166,0.08)) !important;
  border-radius: 12px !important;
  padding: 8px !important;
}
.sn-consult-icon img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}
.sn-consult-label {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  color: var(--clr-text, #1a202c) !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* セパレーターも幅を合わせる */
.sn-consult-grid__sep {
  grid-column: 1 / -1 !important;
  flex-basis: 100% !important;
  width: 100% !important;
  padding: 28px 0 12px !important;
}

/* モバイル：1カラム */
@media screen and (max-width: 640px) {
  .sn-consult-grid__list { grid-template-columns: 1fr !important; gap: 10px !important; }
  .sn-consult-grid__item a { padding: 14px 16px !important; gap: 12px !important; }
  .sn-consult-icon { width: 42px !important; height: 42px !important; }
  .sn-consult-icon img { width: 32px !important; height: 32px !important; }
}

/* ==========================================================================
   publish ページ：キャンペーンバナーの強化＆リード文の調整
   ========================================================================== */

/* ----- キャンペーンバナーをカード化＆装飾を追加 ----- */
.publish-campaign-banner {
  background: transparent !important;
  padding: 32px clamp(16px, 3vw, 32px) 0 !important;
}
.publish-campaign-banner > .container {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.publish-campaign-banner__card {
  position: relative !important;
  background: linear-gradient(135deg, #FF6B6B 0%, #F06292 50%, #FF8A65 100%) !important;
  background-size: 200% 200% !important;
  animation: snCampaignShift 8s ease-in-out infinite !important;
  color: #fff !important;
  padding: 36px clamp(20px, 4vw, 56px) !important;
  border-radius: 24px !important;
  text-align: center !important;
  box-shadow: 0 20px 50px rgba(240,98,146,0.35), 0 4px 12px rgba(240,98,146,0.2) !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
}
@keyframes snCampaignShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 装飾的な背景アイコン */
.publish-campaign-banner__decor {
  position: absolute !important;
  color: rgba(255,255,255,0.10) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.publish-campaign-banner__decor--left {
  top: 50%;
  left: 30px;
  transform: translateY(-50%) rotate(-15deg);
}
.publish-campaign-banner__decor--right {
  top: 20%;
  right: 60px;
  width: 60px;
  height: 60px;
}

/* バッジ */
.publish-campaign-banner__badge {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  background: rgba(255,255,255,0.25) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  margin-bottom: 18px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* タイトル */
.publish-campaign-banner__title {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 20px !important;
  font-size: clamp(1.375rem, 3.2vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
  letter-spacing: 0.02em !important;
}
.publish-campaign-banner__hl {
  display: inline-block !important;
  background: linear-gradient(180deg, transparent 60%, #FFEB3B 60%, #FFEB3B 95%, transparent 95%) !important;
  padding: 0 4px !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.publish-campaign-banner__hl--big {
  font-size: 1.4em !important;
  background: rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  padding: 2px 12px !important;
  margin: 0 2px !important;
  color: #FFEB3B !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* 価格 */
.publish-campaign-banner__price {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.publish-campaign-banner__price-old {
  font-size: 0.9375rem !important;
  text-decoration: line-through !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 600 !important;
}
.publish-campaign-banner__arrow {
  color: #FFEB3B !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}
.publish-campaign-banner__price-new {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #FFEB3B !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* 注意書き */
.publish-campaign-banner__note {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  color: rgba(255,255,255,0.92) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .publish-campaign-banner__card { padding: 24px 18px !important; border-radius: 18px !important; }
  .publish-campaign-banner__decor--left,
  .publish-campaign-banner__decor--right { display: none !important; }
  .publish-campaign-banner__title { font-size: 1.125rem !important; }
  .publish-campaign-banner__hl--big { font-size: 1.2em !important; }
  .publish-campaign-banner__price { padding: 10px 18px !important; gap: 8px !important; }
  .publish-campaign-banner__price-new { font-size: 1.0625rem !important; }
}

/* ----- リード文の一行表示（ノーラップ） ----- */
.publish-lead__text--single {
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: clamp(0.8125rem, 1.4vw, 1rem) !important;
  margin-bottom: 8px !important;
}
@media screen and (max-width: 1100px) {
  .publish-lead__text--single { white-space: normal !important; }
}

/* ==========================================================================
   修正：how-step の矢印を完全に縦中央配置／publish-cta タイトル白文字
   ========================================================================== */

/* ----- how-steps：矢印を確実にカード中央高さに ----- */
.how-steps {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}
.how-step {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
.how-step-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  height: auto !important;
  font-size: 2rem !important;
  color: rgba(30,91,206,0.5) !important;
  padding: 0 8px !important;
  flex: 0 0 auto !important;
}

@media screen and (max-width: 768px) {
  .how-steps { flex-wrap: wrap !important; }
  .how-step-arrow { transform: rotate(90deg); padding: 4px 0 !important; }
}

/* ----- publish-cta：タイトルを白文字に強制 ----- */
.publish-cta__title,
.publish-cta .publish-cta__title,
section.publish-cta .publish-cta__title {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25) !important;
  font-weight: 800 !important;
}
.publish-cta__text,
.publish-cta .publish-cta__text {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.2) !important;
}
.publish-cta__inner * {
  color: inherit;
}

/* ==========================================================================
   全体を明るめテイストに調整（暗いネイビーを柔らかな青に）
   ========================================================================== */

/* ----- HERO（フロントページ）：ダーク→明るい爽やかブルーに ----- */
.hero {
  background:
    radial-gradient(circle at 20% 80%, rgba(98,200,211,0.32) 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(30,91,206,0.28) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #e7f0ff 0%, #d5e9f7 50%, #c9eaee 100%) !important;
  background-color: #e7f0ff !important;
  background-blend-mode: normal !important;
}
.hero::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(98,200,211,0.18) 50%, rgba(30,91,206,0.20) 100%) !important;
}

/* HERO 内のテキストは可読性のため濃色に */
.hero__eyebrow {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(30,91,206,0.25) !important;
  color: var(--clr-primary, #1E5BCE) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.hero__title {
  color: #11263A !important;
  text-shadow: 0 2px 12px rgba(255,255,255,0.5) !important;
}
.hero__accent {
  color: #1E5BCE !important;
}
.hero__subtitle {
  color: rgba(17,38,58,0.85) !important;
}
.hero__subtitle strong {
  color: #11263A !important;
}

/* Trust badge */
.trust-badge {
  background: rgba(255,255,255,0.92) !important;
  color: var(--clr-text, #11263A) !important;
  border: 1px solid rgba(30,91,206,0.18) !important;
  backdrop-filter: blur(4px) !important;
}

/* ----- publish-lead：暗いグラデを明るく ----- */
.publish-lead {
  background:
    radial-gradient(circle at 20% 30%, rgba(98,200,211,0.30) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(30,91,206,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #eaf3ff 0%, #d9ecf5 50%, #cdefef 100%) !important;
  color: #11263A !important;
}
.publish-lead::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98,200,211,0.20) 0%, transparent 50%) !important;
}
.publish-lead__eyebrow { color: var(--clr-primary, #1E5BCE) !important; }
.publish-lead__title {
  color: #11263A !important;
  text-shadow: 0 2px 12px rgba(255,255,255,0.4) !important;
}
.publish-lead__accent {
  color: #14B8A6 !important;
}
.publish-lead__text {
  color: rgba(17,38,58,0.85) !important;
  text-shadow: none !important;
}
.publish-lead__stats {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(30,91,206,0.15) !important;
}
.publish-stat__num { color: var(--clr-primary, #1E5BCE) !important; }
.publish-stat__label { color: var(--clr-text-sub, #4a5568) !important; }
.publish-stat + .publish-stat { border-left-color: rgba(30,91,206,0.12) !important; }

/* ----- publish-cta：暗いグラデを明るく ----- */
.publish-cta {
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,0.45) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(98,200,211,0.30) 0%, transparent 50%),
    linear-gradient(135deg, #eaf3ff 0%, #d9ecf5 50%, #cdefef 100%) !important;
  color: #11263A !important;
}
.publish-cta::before {
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(98,200,211,0.25) 0%, transparent 50%) !important;
}
.publish-cta__title {
  color: #11263A !important;
  text-shadow: 0 2px 10px rgba(255,255,255,0.4) !important;
}
.publish-cta__text {
  color: rgba(17,38,58,0.85) !important;
  text-shadow: none !important;
}
.publish-cta__primary {
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(30,91,206,0.35) !important;
}
.publish-cta__primary:hover {
  background: linear-gradient(135deg, #1947a3 0%, #0e8c80 100%) !important;
  color: #fff !important;
}
.btn--outline-light {
  border-color: rgba(30,91,206,0.4) !important;
  color: var(--clr-primary, #1E5BCE) !important;
  background: rgba(255,255,255,0.6) !important;
}
.btn--outline-light:hover {
  background: var(--clr-primary, #1E5BCE) !important;
  color: #fff !important;
  border-color: var(--clr-primary, #1E5BCE) !important;
}

/* ----- join_kaiketsu：暗いグラデを明るく ----- */
section.join_kaiketsu,
.join_kaiketsu {
  background:
    radial-gradient(circle at 15% 25%, rgba(98,200,211,0.30) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(30,91,206,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #eaf3ff 0%, #d9ecf5 50%, #cdefef 100%) !important;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(98,200,211,0.30) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(30,91,206,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #eaf3ff 0%, #d9ecf5 50%, #cdefef 100%) !important;
  background-color: #eaf3ff !important;
  color: #11263A !important;
}
section.join_kaiketsu::before,
.join_kaiketsu::before {
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98,200,211,0.20) 0%, transparent 50%) !important;
}
.join_kaiketsu .join_kaiketsu-wrapper {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(30,91,206,0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.join_kaiketsu h4,
.join_kaiketsu .join_intro h4 {
  color: #11263A !important;
  text-shadow: none !important;
}
.join_kaiketsu h4::after,
.join_kaiketsu .join_intro h4::after {
  background: linear-gradient(90deg, #1E5BCE 0%, #14B8A6 100%) !important;
}
.join_kaiketsu .description,
.join_kaiketsu .join_intro .description,
.join_kaiketsu .join_intro p {
  color: var(--clr-text-sub, #4a5568) !important;
  text-shadow: none !important;
}
.join_kaiketsu .topbenifits li {
  background: rgba(30,91,206,0.07) !important;
  border-color: rgba(30,91,206,0.18) !important;
}
.join_kaiketsu .topbenifits li p {
  color: var(--clr-text, #11263A) !important;
  text-shadow: none !important;
}
.join_kaiketsu .topbenifits li p::before {
  color: #14B8A6 !important;
}
.join_kaiketsu .more-button .button,
.join_kaiketsu .more-button a {
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  color: #fff !important;
}
.join_kaiketsu .more-button .button:hover,
.join_kaiketsu .more-button a:hover {
  background: linear-gradient(135deg, #1947a3 0%, #0e8c80 100%) !important;
  color: #fff !important;
}

/* ----- stats-bar：明るく ----- */
.stats-bar {
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
}

/* ----- page-banner（各下層ページ banner）：少し明るく ----- */
.page-banner::before {
  background: linear-gradient(135deg, rgba(30,91,206,0.78) 0%, rgba(20,184,166,0.68) 100%) !important;
}
.page-banner--publish::before {
  background: linear-gradient(135deg, rgba(30,91,206,0.78) 0%, rgba(98,200,211,0.65) 60%, rgba(20,184,166,0.55) 100%) !important;
}
.page-banner--about::before {
  background: linear-gradient(135deg, rgba(30,91,206,0.75) 0%, rgba(98,200,211,0.60) 60%, rgba(20,184,166,0.50) 100%) !important;
}

/* ----- ナビバー：少しさわやかに ----- */
.navbar {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: rgba(30,91,206,0.08) !important;
}

/* ----- セクション背景を全体的に少し明るく ----- */
.latest_pro,
.top-about,
.top-interview,
.consult-cats {
  background-color: #f7faff !important;
}
.top_pickup,
.how-it-works,
.top-articles,
.top_testimonials {
  background-color: #ffffff !important;
}

/* ----- カードの背景を純白で清潔感を強化 ----- */
.pro-card,
.interview-card,
.info-article-card,
.prof-card,
.benefit-card,
.flow-step,
.how-step,
.testimonials_list_item,
.faq-item,
.publish-faq-item,
.contact-form-card,
.contact-info-card {
  background: #ffffff !important;
}

/* ----- フッター：ダークを少し明るめネイビーに ----- */
.site-footer {
  background: #1a3550 !important;
}

/* ==========================================================================
   about-profession ページ：士業タイトルを中央・大きく／ボタンも中央
   ========================================================================== */

/* タイトル（shigyo_mark バッジ）をセンター大型化 */
.prof-card__header {
  text-align: center !important;
  padding: 28px 24px 20px !important;
  border-bottom: 1px solid var(--clr-gray-100, #f3f4f6) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #f9fbff 100%) !important;
}
.prof-card__header .shigyo_mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  padding: 12px 36px !important;
  border-radius: 999px !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
  min-width: 200px !important;
  text-align: center !important;
  color: #fff !important;
  position: relative !important;
}
.prof-card__header .shigyo_mark::before,
.prof-card__header .shigyo_mark::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  margin: 0 8px;
}

/* フッターのボタンを中央 */
.prof-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 24px 24px !important;
  border-top: 1px solid var(--clr-gray-100, #f3f4f6) !important;
}
.prof-card__footer .btn {
  min-width: 200px !important;
  justify-content: center !important;
}

@media screen and (max-width: 768px) {
  .prof-card__header { padding: 22px 16px 16px !important; }
  .prof-card__header .shigyo_mark { font-size: 1.0625rem !important; padding: 10px 24px !important; min-width: 160px !important; }
  .prof-card__footer { padding: 16px 16px 20px !important; }
}

/* ==========================================================================
   相談カテゴリ一覧ページ：バナー強化＆カード刷新
   ========================================================================== */

/* ----- バナー：件数表示と関連カテゴリ ----- */
.page-banner__count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 16px !important;
  padding: 8px 18px !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--clr-primary, #1E5BCE) !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.page-banner__count strong {
  font-size: 1.125rem !important;
  margin: 0 2px !important;
}
.page-banner__eyebrow .shigyo_mark {
  padding: 4px 12px !important;
  font-size: 0.75rem !important;
  vertical-align: middle !important;
}

/* ----- 関連カテゴリナビ ----- */
.page-nav-strip--related {
  position: static !important;
  background: linear-gradient(180deg, #f3f7fb 0%, #fafbfd 100%) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(30,91,206,0.08) !important;
  padding: 14px clamp(16px, 3vw, 32px) !important;
}
.page-nav-strip--related .page-nav-strip__inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: var(--container-max, 1280px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
.page-nav-strip__label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--clr-text-sub, #4a5568) !important;
  flex-shrink: 0 !important;
}
.page-nav-strip--related .page-nav-strip__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-nav-strip--related .page-nav-strip__item a {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(30,91,206,0.18) !important;
  border-bottom: 1px solid rgba(30,91,206,0.18) !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--clr-primary, #1E5BCE) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, transform 0.2s !important;
}
.page-nav-strip--related .page-nav-strip__item a:hover {
  background: var(--clr-primary, #1E5BCE) !important;
  color: #fff !important;
  border-color: var(--clr-primary, #1E5BCE) !important;
  transform: translateY(-1px) !important;
}

/* ----- archive_pg コンテンツのラッパー余白 ----- */
.archive_pg {
  padding: clamp(40px, 6vw, 64px) clamp(16px, 3vw, 32px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.archive_pg .post-title h1 {
  display: none !important;  /* バナーで表示するので非表示 */
}
.archive__container {
  margin-top: 0 !important;
}

/* ----- 一覧グリッド ----- */
.pro_list .top_pickup-list,
.pro_list ul.top_pickup-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media screen and (max-width: 1024px) {
  .pro_list .top_pickup-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 640px) {
  .pro_list .top_pickup-list { grid-template-columns: 1fr !important; }
}

/* ----- アーカイブ用 pro-card 刷新 ----- */
.pro-card--archive {
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(17,38,58,0.06) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important;
  list-style: none !important;
}
.pro-card--archive:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(17,38,58,0.13) !important;
  border-color: rgba(30,91,206,0.18) !important;
}
.pro-card--archive .pro-card__link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* 写真エリア（バッジを上にオーバーレイ） */
.pro-card--archive .pro-card__photo {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f0f4fa 0%, #e8eef7 100%) !important;
  border-radius: 0 !important;
}
.pro-card--archive .pro-card__photo img,
.pro-card--archive .pro-card__photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.5s ease !important;
}
.pro-card--archive:hover .pro-card__photo img {
  transform: scale(1.05) !important;
}
.pro-card--archive .pro-card__no-photo {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #9ca3af !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

/* バッジを写真の左上にオーバーレイ */
.pro-card--archive .pro-card__badges {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  z-index: 2 !important;
}
.pro-card--archive .pro-card__badges .shigyo_mark {
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  color: #fff !important;
}

/* コンテンツエリア */
.pro-card--archive .pro-card__content {
  padding: 20px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
.pro-card--archive .pro-card__office {
  margin: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--clr-text-muted, #6b7280) !important;
  letter-spacing: 0.02em !important;
}
.pro-card--archive .pro-card__name {
  margin: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  color: var(--clr-text, #11263A) !important;
  line-height: 1.4 !important;
}
.pro-card--archive .pro-card__pr {
  margin: 4px 0 0 !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.04), rgba(20,184,166,0.04)) !important;
  border-left: 3px solid rgba(30,91,206,0.3) !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
  color: var(--clr-text-sub, #4a5568) !important;
}
.pro-card--archive .pro-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px dashed rgba(0,0,0,0.08) !important;
}
.pro-card--archive .pro-card__meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.75rem !important;
  color: var(--clr-text-muted, #6b7280) !important;
}
.pro-card--archive .pro-card__meta-item svg {
  flex-shrink: 0 !important;
  color: var(--clr-primary, #1E5BCE) !important;
  opacity: 0.7 !important;
}
.pro-card--archive .pro-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 10px 18px !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #14B8A6 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  align-self: stretch !important;
}
.pro-card--archive:hover .pro-card__cta {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(30,91,206,0.3) !important;
}
.pro-card--archive .pro-card__cta svg {
  transition: transform 0.2s !important;
}
.pro-card--archive:hover .pro-card__cta svg {
  transform: translateX(3px) !important;
}

/* モバイル */
@media screen and (max-width: 640px) {
  .pro-card--archive .pro-card__content { padding: 16px 18px 18px !important; }
  .pro-card--archive .pro-card__name { font-size: 1rem !important; }
}

/* ----- バナーの相談カテゴリページのみ：余白増やしてリッチに ----- */
.page-banner--consult {
  padding-top: calc(72px + 56px) !important;
  padding-bottom: 56px !important;
}
.page-banner--consult .page-banner__desc {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   pro-card：写真の天地拡大＋得意分野ラベル＋余白拡大
   ========================================================================== */

/* ----- 写真のアスペクト比を 4/3 に変更（顔全体が入る） ----- */
.pro-card__photo {
  aspect-ratio: 4 / 3 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f0f4fa 0%, #e8eef7 100%) !important;
  border-radius: 0 !important;
}
.pro-card__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important; /* 顔がある上1/4位置に焦点 */
  display: block !important;
  transition: transform 0.5s ease !important;
}
.pro-card:hover .pro-card__photo img {
  transform: scale(1.04) !important;
}

/* ----- 得意分野ラベル ----- */
.pro-card__specialty {
  padding: 14px 18px 6px !important;
  background: rgba(30,91,206,0.03) !important;
  border-top: 1px dashed rgba(30,91,206,0.1) !important;
}
.pro-card__specialty-label {
  display: inline-block !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--clr-primary, #1E5BCE) !important;
  margin-bottom: 6px !important;
  padding: 2px 8px !important;
  background: rgba(30,91,206,0.1) !important;
  border-radius: 4px !important;
}
.pro-card__specialty-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
}
.pro-card__specialty-list li {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  background: #fff !important;
  border: 1px solid rgba(30,91,206,0.18) !important;
  border-radius: 999px !important;
  color: var(--clr-text-sub, #4a5568) !important;
  list-style: none !important;
  white-space: nowrap !important;
}
.pro-card__specialty-list li.more {
  background: rgba(30,91,206,0.08) !important;
  color: var(--clr-primary, #1E5BCE) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* ----- 全体的に余白を増やして余裕のあるレイアウトに ----- */
.pro-card {
  border-radius: 18px !important;
}
.pro-card__badge {
  padding: 16px 18px 8px !important;
}
.pro-card__info {
  padding: 14px 18px 12px !important;
}
.pro-card__body {
  padding: 14px 18px 18px !important;
}
.pro-card-list,
.top_pickup-list {
  gap: 28px !important;
}

/* ----- archive ページのカードも 4:3 に統一 ----- */
.pro-card--archive .pro-card__photo {
  aspect-ratio: 4 / 3 !important;
}
.pro-card--archive .pro-card__photo img {
  object-position: center 25% !important;
}
.pro-card--archive .pro-card__content {
  padding: 24px 24px 24px !important;
  gap: 10px !important;
}

/* ==========================================================================
   全体的に余白を増やして余裕のあるレイアウトに（共通）
   ========================================================================== */

/* セクション間の余白を増やす */
.top_pickup,
.latest_pro,
.how-it-works,
.top-about,
.top-articles,
.top-interview,
.top_testimonials,
.join_kaiketsu,
#kensaku,
.consult-cats {
  padding-top: clamp(80px, 11vw, 130px) !important;
  padding-bottom: clamp(80px, 11vw, 130px) !important;
}

/* セクションタイトル下の余白を拡大 */
.main_title {
  margin-bottom: clamp(48px, 6vw, 72px) !important;
}

/* container max-width を少し広げ、左右余白も拡大 */
.container,
.content-wrapper {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

/* カード内コンテンツ余白を拡大 */
.benefit-card,
.flow-step,
.how-step,
.testimonials_list_item,
.faq-item,
.publish-faq-item,
.prof-card {
  padding: clamp(24px, 3vw, 36px) clamp(22px, 2.8vw, 32px) !important;
}

/* FAQ アイテム余白拡大 */
.faq-item__q {
  padding: 24px 28px 20px !important;
}
.faq-item__a {
  padding: 24px 28px !important;
}

/* グリッドのカード間隔を全体的に拡大 */
.benefits-grid {
  gap: 28px !important;
}
.flow-steps {
  gap: 24px !important;
}
.info-articles-grid,
.pro-list-grid {
  gap: 28px !important;
}

/* リード文（説明文）の余白拡大 */
.publish-section__header {
  margin-bottom: clamp(56px, 7vw, 88px) !important;
}

/* アーカイブページのコンテンツ余白 */
.archive_pg {
  padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 48px) !important;
}

/* モバイル時はこれらを少し控えめに */
@media screen and (max-width: 768px) {
  .top_pickup, .latest_pro, .how-it-works, .top-about,
  .top-articles, .top-interview, .top_testimonials,
  .join_kaiketsu, #kensaku, .consult-cats {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .main_title { margin-bottom: 32px !important; }
  .benefits-grid, .info-articles-grid, .pro-list-grid { gap: 16px !important; }
}

/* ==========================================================================
   sn-consult：セクションをグループ化＋少ない士業は2カラム並列に
   ========================================================================== */

/* 旧グリッドCSSをリセット */
.sn-consult-grid,
.sn-consult-grid__list {
  display: block !important;
  max-width: none !important;
  grid-template-columns: none !important;
}
.sn-consult-grid__sep {
  display: none !important;
}

/* セクション全体のラッパー */
.top-consultation .content-wrapper > .sn-consult-section,
.top-consultation .content-wrapper > .sn-consult-pair {
  margin: 0 auto 24px !important;
  max-width: 1080px !important;
}

/* セクションヘッダー（士業バッジ） */
.sn-consult-section__head {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.sn-consult-section__head::before,
.sn-consult-section__head::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--clr-gray-200, #e5e7eb) !important;
  max-width: 320px !important;
}
.sn-consult-section__head .tag {
  flex-shrink: 0 !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  white-space: nowrap !important;
}

/* セクションリスト：項目数に応じた多列グリッド */
.sn-consult-section__list {
  display: grid !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sn-consult-section--wide .sn-consult-section__list {
  grid-template-columns: repeat(6, 1fr) !important;
}
.sn-consult-section--compact .sn-consult-section__list {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* グリッド項目 */
.sn-consult-grid__item {
  list-style: none !important;
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
}
.sn-consult-grid__item a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 8px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  min-height: 0 !important;
  box-shadow: 0 2px 6px rgba(17,38,58,0.04) !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.sn-consult-grid__item a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(17,38,58,0.10) !important;
  border-color: rgba(30,91,206,0.18) !important;
}
.sn-consult-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.05), rgba(20,184,166,0.05)) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  padding: 6px !important;
}
.sn-consult-icon img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}
.sn-consult-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* ===== 2カラム並列（compact セクションのペア） ===== */
.sn-consult-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}
.sn-consult-pair .sn-consult-section {
  margin: 0 !important;
  max-width: none !important;
}
.sn-consult-pair .sn-consult-section__head::before,
.sn-consult-pair .sn-consult-section__head::after {
  max-width: 100px !important;
}
.sn-consult-pair .sn-consult-section--compact .sn-consult-section__list {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ペア内で項目数が2の場合は2列にして余白を活かす */
.sn-consult-pair .sn-consult-section--compact .sn-consult-section__list:has(li:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .sn-consult-section--wide .sn-consult-section__list { grid-template-columns: repeat(4, 1fr) !important; }
  .sn-consult-section--compact .sn-consult-section__list { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (max-width: 768px) {
  .sn-consult-pair { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sn-consult-section--wide .sn-consult-section__list { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .sn-consult-section--compact .sn-consult-section__list { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .sn-consult-grid__item a { padding: 14px 6px 12px !important; }
  .sn-consult-icon { width: 48px !important; height: 48px !important; }
  .sn-consult-icon img { width: 36px !important; height: 36px !important; }
  .sn-consult-label { font-size: 0.75rem !important; }
}
@media screen and (max-width: 480px) {
  .sn-consult-section--wide .sn-consult-section__list,
  .sn-consult-section--compact .sn-consult-section__list { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
   sn-consult：カード装飾を外してアイコン中心のシンプル表示に戻す
   ========================================================================== */
.sn-consult-grid__item a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  gap: 10px !important;
}
.sn-consult-grid__item a:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
.sn-consult-grid__item a:hover .sn-consult-icon {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(30,91,206,0.18) !important;
}
.sn-consult-grid__item a:hover .sn-consult-label {
  color: var(--clr-primary, #1E5BCE) !important;
}

/* アイコン円のみを装飾要素として強化 */
.sn-consult-icon {
  background: #ffffff !important;
  border: 1px solid rgba(30,91,206,0.10) !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* ラベルの色変化アニメーション */
.sn-consult-label {
  transition: color 0.2s ease !important;
}

/* ==========================================================================
   about-profession：CTAブロックの余白とセンタリング強化
   ========================================================================== */
.about-prof__cta {
  margin-top: clamp(72px, 9vw, 110px) !important;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.06) 0%, rgba(20,184,166,0.06) 100%) !important;
  border: 1px solid rgba(30,91,206,0.12) !important;
  border-radius: 24px !important;
}
.about-prof__cta-title {
  margin: 0 !important;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  font-weight: 800 !important;
  text-align: center !important;
}
.about-prof__cta-text {
  margin: 0 !important;
  max-width: 560px !important;
  text-align: center !important;
  font-size: 0.9375rem !important;
  line-height: 1.85 !important;
  color: var(--clr-text-sub, #4a5568) !important;
}
.about-prof__cta .btn {
  margin-top: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 240px !important;
  align-self: center !important;
}

/* ==========================================================================
   consult-cats（フッター相談カテゴリ）：トップページのアイコン円形スタイルに統一
   ========================================================================== */
.consult-cats__grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 24px 14px !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}
.consult-cat-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  transition: none !important;
}
.consult-cat-item:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.consult-cat-item:hover .consult-cat-icon {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(30,91,206,0.18) !important;
}
.consult-cat-item:hover .consult-cat-label {
  color: var(--clr-primary, #1E5BCE) !important;
}

/* 円形アイコンエリア（白背景＋薄青枠＋影） */
.consult-cat-icon {
  width: 88px !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(30,91,206,0.10) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.08) !important;
  padding: 14px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  flex-shrink: 0 !important;
}
.consult-cat-icon img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}

/* ラベル */
.consult-cat-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .consult-cats__grid { grid-template-columns: repeat(5, 1fr) !important; }
  .consult-cat-icon { width: 80px !important; height: 80px !important; padding: 12px !important; }
  .consult-cat-icon img { width: 46px !important; height: 46px !important; }
}
@media screen and (max-width: 768px) {
  .consult-cats__grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px 10px !important; }
  .consult-cat-icon { width: 68px !important; height: 68px !important; padding: 10px !important; }
  .consult-cat-icon img { width: 38px !important; height: 38px !important; }
  .consult-cat-label { font-size: 0.75rem !important; }
}
@media screen and (max-width: 480px) {
  .consult-cats__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
   topbenifits：チェックマーク二重表示を解消（li::before のみに統一）
   ========================================================================== */
.join_kaiketsu .topbenifits li p::before,
.topbenifits li p::before {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   sn-consult：medium（4列）と triple（3カラム並列）サポート追加
   ========================================================================== */

/* 4項目セクション：1行4列で収まる */
.sn-consult-section--medium .sn-consult-section__list {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: none !important;
  margin: 0 !important;
}

/* mini セクション（2項目）：内部は2列 */
.sn-consult-section--mini .sn-consult-section__list {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3つのセクションを横並び */
.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.sn-consult-pair--triple .sn-consult-section {
  margin: 0 !important;
  max-width: none !important;
}
.sn-consult-pair--triple .sn-consult-section__head::before,
.sn-consult-pair--triple .sn-consult-section__head::after {
  max-width: 60px !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .sn-consult-section--medium .sn-consult-section__list { grid-template-columns: repeat(4, 1fr) !important; }
  .sn-consult-pair--triple { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (max-width: 768px) {
  .sn-consult-section--medium .sn-consult-section__list { grid-template-columns: repeat(4, 1fr) !important; }
  .sn-consult-pair--triple { grid-template-columns: 1fr !important; gap: 16px !important; }
}
@media screen and (max-width: 480px) {
  .sn-consult-section--medium .sn-consult-section__list { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   sn-consult：四角カードレイアウトに戻す＋トリプルペア整列修正
   ========================================================================== */

/* 各項目を四角の白カードに */
.sn-consult-grid__item a {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.05) !important;
  padding: 18px 8px 16px !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  min-height: 130px !important;
}
.sn-consult-grid__item a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(17,38,58,0.12) !important;
  border-color: rgba(30,91,206,0.20) !important;
  background: #fff !important;
}
.sn-consult-grid__item a:hover .sn-consult-icon {
  transform: none !important;
  box-shadow: none !important;
}
.sn-consult-grid__item a:hover .sn-consult-label {
  color: var(--clr-text, #1a202c) !important;
}

/* アイコンは四角の中で透明な背景に */
.sn-consult-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sn-consult-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}
.sn-consult-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ===== トリプルペアの整列修正：高さ・badge位置を揃える ===== */
.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.sn-consult-pair--triple .sn-consult-section {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* ヘッダーは中央寄せ・左右ライン均等 */
.sn-consult-pair--triple .sn-consult-section__head {
  justify-content: center !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}
.sn-consult-pair--triple .sn-consult-section__head::before,
.sn-consult-pair--triple .sn-consult-section__head::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--clr-gray-200, #e5e7eb) !important;
  max-width: 60px !important;
}
.sn-consult-pair--triple .sn-consult-section__head .tag {
  flex-shrink: 0 !important;
}
/* mini セクションのリストは2列でセクション内中央配置 */
.sn-consult-pair--triple .sn-consult-section--mini .sn-consult-section__list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 130px)) !important;
  gap: 14px !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

@media screen and (max-width: 768px) {
  .sn-consult-pair--triple { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sn-consult-pair--triple .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   consult-cats（フッター）：円形から四角白カードに戻す（トップと統一）
   ========================================================================== */
.consult-cats__grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 18px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.consult-cat-item {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.06) !important;
  padding: 22px 10px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  min-height: 130px !important;
}
.consult-cat-item:hover {
  background: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(17,38,58,0.12) !important;
  border-color: rgba(30,91,206,0.20) !important;
}
.consult-cat-item:hover .consult-cat-icon {
  transform: none !important;
  box-shadow: none !important;
}
.consult-cat-item:hover .consult-cat-label {
  color: var(--clr-text, #1a202c) !important;
}

/* アイコンは円形枠を解除、シンプルに */
.consult-cat-icon {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
}
.consult-cat-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}
.consult-cat-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: color 0.2s !important;
}

@media screen and (max-width: 1024px) {
  .consult-cats__grid { grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; }
}
@media screen and (max-width: 768px) {
  .consult-cats__grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
  .consult-cat-item { padding: 16px 6px 14px !important; gap: 10px !important; min-height: 110px !important; }
  .consult-cat-icon { width: 44px !important; height: 44px !important; }
  .consult-cat-icon img { width: 38px !important; height: 38px !important; }
  .consult-cat-label { font-size: 0.75rem !important; }
}
@media screen and (max-width: 480px) {
  .consult-cats__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
   トップページの sn-consult-grid アイテム：同じ四角カード型で確実に統一
   ========================================================================== */
.sn-consult-grid__item a,
.top-consultation .sn-consult-grid__item a {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.06) !important;
  padding: 22px 10px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  min-height: 130px !important;
}
.sn-consult-grid__item a:hover,
.top-consultation .sn-consult-grid__item a:hover {
  background: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(17,38,58,0.12) !important;
  border-color: rgba(30,91,206,0.20) !important;
}
.sn-consult-grid__item a:hover .sn-consult-icon {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}
.top-consultation .sn-consult-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 56px !important;
  height: 56px !important;
}
.top-consultation .sn-consult-icon img {
  width: 48px !important;
  height: 48px !important;
}

/* ==========================================================================
   各士業について：表示順を 弁護士→税理士→司法書士→社労士→行政書士→… に
   ========================================================================== */
.about-prof__grid #bengo   { order: 1 !important; }
.about-prof__grid #zeiri   { order: 2 !important; }
.about-prof__grid #shihou  { order: 3 !important; }
.about-prof__grid #syarou  { order: 4 !important; }
.about-prof__grid #gyousei { order: 5 !important; }
.about-prof__grid #kaikei  { order: 6 !important; }
.about-prof__grid #tyusyo  { order: 7 !important; }
.about-prof__grid #benri   { order: 8 !important; }
.about-prof__grid #fudo    { order: 9 !important; }

/* ==========================================================================
   キャンペーンバナーと publish-lead の間に余白
   ========================================================================== */
.publish-campaign-banner {
  padding-bottom: clamp(24px, 4vw, 48px) !important;
}
.publish-lead {
  padding-top: clamp(64px, 8vw, 96px) !important;
}

/* ==========================================================================
   相談内容一覧 & お悩みアイコン：もう少し大きく
   ========================================================================== */
.sn-consult-icon,
.top-consultation .sn-consult-icon {
  width: 72px !important;
  height: 72px !important;
}
.sn-consult-icon img,
.top-consultation .sn-consult-icon img {
  width: 64px !important;
  height: 64px !important;
}
.consult-cat-icon {
  width: 72px !important;
  height: 72px !important;
}
.consult-cat-icon img {
  width: 64px !important;
  height: 64px !important;
}
.sn-consult-grid__item a,
.consult-cat-item {
  min-height: 150px !important;
  padding: 24px 10px 20px !important;
}

@media screen and (max-width: 768px) {
  .sn-consult-icon { width: 56px !important; height: 56px !important; }
  .sn-consult-icon img { width: 48px !important; height: 48px !important; }
  .consult-cat-icon { width: 56px !important; height: 56px !important; }
  .consult-cat-icon img { width: 48px !important; height: 48px !important; }
  .sn-consult-grid__item a, .consult-cat-item { min-height: 120px !important; padding: 16px 6px 14px !important; }
}

/* ==========================================================================
   CTA ボタンの矢印（非常口アイコン）を縦中央に
   ========================================================================== */
.btn--cta-band,
.publish-cta__primary,
.join_kaiketsu .more-button a,
.publish-bottom a,
.publish-btn a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 10px !important;
}
.btn--cta-band svg,
.publish-cta__primary svg,
.join_kaiketsu .more-button a svg,
.publish-bottom a svg,
.publish-btn a svg {
  vertical-align: middle !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* ==========================================================================
   ノーイメージ画像（相談ナビロゴ）の表示調整
   ========================================================================== */
.info-article-card__thumb.sn-noimage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 24px !important;
  background: linear-gradient(135deg, #f7faff 0%, #eef5fb 100%) !important;
  display: block !important;
}

/* ==========================================================================
   士業からのお知らせ専用バッジカラー
   ========================================================================== */
.info-article-card__cat--notice {
  background: rgba(240,98,146,0.12) !important;
  color: #d4347a !important;
}
.info-section__icon--notice { color: #d4347a !important; }

/* ==========================================================================
   pro-card：カードの高さを完全に統一（flex column + body grow）
   ========================================================================== */
.pro-card-list,
.top_pickup-list {
  align-items: stretch !important;
}
.pro-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.pro-card__link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}
.pro-card__badge {
  min-height: 48px !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.pro-card__info {
  min-height: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.pro-card__info .pro-card__office {
  min-height: 1.2em !important;
}
.pro-card__info .pro-card__name {
  min-height: 1.4em !important;
}
.pro-card__photo {
  flex-shrink: 0 !important;
}
.pro-card__specialty {
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.pro-card__body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 得意分野表示を確実に */
.pro-card__specialty {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.pro-card__specialty-list {
  display: flex !important;
  visibility: visible !important;
}

/* ==========================================================================
   sn-consult-pair--triple：セクションヘッダーの高さを揃える
   ========================================================================== */
.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.sn-consult-pair--triple .sn-consult-section {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
.sn-consult-pair--triple .sn-consult-section__head {
  min-height: 52px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   アイコンをさらに大きく
   ========================================================================== */
.sn-consult-icon,
.top-consultation .sn-consult-icon {
  width: 80px !important;
  height: 80px !important;
}
.sn-consult-icon img,
.top-consultation .sn-consult-icon img {
  width: 72px !important;
  height: 72px !important;
}
.consult-cat-icon { width: 80px !important; height: 80px !important; }
.consult-cat-icon img { width: 72px !important; height: 72px !important; }
.sn-consult-grid__item a,
.consult-cat-item {
  min-height: 170px !important;
  padding: 28px 12px 22px !important;
}

@media screen and (max-width: 768px) {
  .sn-consult-icon { width: 60px !important; height: 60px !important; }
  .sn-consult-icon img { width: 52px !important; height: 52px !important; }
  .consult-cat-icon { width: 60px !important; height: 60px !important; }
  .consult-cat-icon img { width: 52px !important; height: 52px !important; }
  .sn-consult-grid__item a, .consult-cat-item { min-height: 130px !important; padding: 18px 8px 16px !important; }
}

/* ==========================================================================
   how-step の矢印を完全に縦中央へ
   ========================================================================== */
.how-steps {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
}
.how-step {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  align-self: stretch !important;
}
.how-step-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  padding: 0 8px !important;
  font-size: 1.75rem !important;
  color: rgba(30,91,206,0.5) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* ノーイメージプレースホルダーを再徹底（旧サービス名・旧画像を全置換） */
.pro-card__photo img[src*="kaiketsu"],
.pro-card-thumb img[src*="kaiketsu"],
.articles-card-thumb img[src*="kaiketsu"],
img.sn-noimage[src*="kaiketsu"],
.pro-card__photo img[src*="no_thumb"],
.pro-card-thumb img[src*="no_thumb"],
.articles-card-thumb img[src*="no_thumb"],
.top_articles-item img[src*="no_thumb"],
.top_articles-item img[src*="kaiketsu"],
.top_articles-item img[src*="photo-ac.com"],
.info-article-card__thumb[src*="no_thumb"],
.info-article-card__thumb[src*="kaiketsu"] {
  content: url('../asset/images/noimage-soudannavi.svg') !important;
  object-fit: contain !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #f7faff 0%, #eef5fb 100%) !important;
}

/* ==========================================================================
   sn-consult-pair--triple：3カラム完全整列＆アイテムサイズ統一
   ========================================================================== */
.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.sn-consult-pair--triple .sn-consult-section {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ヘッダー（士業バッジ）：3つとも完全に同じ高さ・同じ位置に */
.sn-consult-pair--triple .sn-consult-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  gap: 12px !important;
  width: 100% !important;
}
.sn-consult-pair--triple .sn-consult-section__head::before,
.sn-consult-pair--triple .sn-consult-section__head::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--clr-gray-200, #e5e7eb) !important;
  max-width: 80px !important;
}
.sn-consult-pair--triple .sn-consult-section__head .tag {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* リスト：内部2カラムでセクション全幅を均等に使う */
.sn-consult-pair--triple .sn-consult-section__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 各カード：全セクションで完全に同じサイズに */
.sn-consult-pair--triple .sn-consult-grid__item {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  list-style: none !important;
}
.sn-consult-pair--triple .sn-consult-grid__item a {
  width: 100% !important;
  min-height: 180px !important;
  padding: 28px 12px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.06) !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   アイコンを大幅に拡大（さらに大きく）
   ========================================================================== */
.sn-consult-icon,
.top-consultation .sn-consult-icon,
.sn-consult-pair--triple .sn-consult-icon {
  width: 96px !important;
  height: 96px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.sn-consult-icon img,
.top-consultation .sn-consult-icon img,
.sn-consult-pair--triple .sn-consult-icon img {
  width: 84px !important;
  height: 84px !important;
  object-fit: contain !important;
}
.sn-consult-label,
.sn-consult-pair--triple .sn-consult-label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 広いセクション・mediumセクションのカードも統一サイズに */
.sn-consult-section--wide .sn-consult-grid__item a,
.sn-consult-section--medium .sn-consult-grid__item a {
  min-height: 180px !important;
  padding: 28px 12px 22px !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .sn-consult-icon, .top-consultation .sn-consult-icon { width: 80px !important; height: 80px !important; }
  .sn-consult-icon img, .top-consultation .sn-consult-icon img { width: 70px !important; height: 70px !important; }
}
@media screen and (max-width: 768px) {
  .sn-consult-pair--triple { grid-template-columns: 1fr !important; gap: 18px !important; }
  .sn-consult-icon { width: 64px !important; height: 64px !important; }
  .sn-consult-icon img { width: 56px !important; height: 56px !important; }
  .sn-consult-pair--triple .sn-consult-grid__item a,
  .sn-consult-section--wide .sn-consult-grid__item a,
  .sn-consult-section--medium .sn-consult-grid__item a {
    min-height: 140px !important;
    padding: 20px 8px 16px !important;
  }
}

/* ==========================================================================
   【最終確定】sn-consult-pair--triple：高 specificity で全競合を上書き
   ========================================================================== */

/* 3カラムを完全に等幅に */
html body .top-consultation .sn-consult-pair.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

/* 各セクション：完全に同じ構造で同じ高さ */
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section {
  display: grid !important;
  grid-template-rows: 56px auto !important;
  row-gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ヘッダー：必ず56pxの高さ、必ず先頭行 */
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head {
  grid-row: 1 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: static !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head::before,
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head::after {
  content: "" !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  max-width: 80px !important;
  background: rgba(0,0,0,0.10) !important;
  display: block !important;
}

/* リスト：内部2カラム、全幅使用 */
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__list {
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: stretch !important;
}

/* 各カード：全て完全に同じサイズ */
html body .top-consultation .sn-consult-pair--triple .sn-consult-grid__item {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body .top-consultation .sn-consult-pair--triple .sn-consult-grid__item > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 200px !important;
  padding: 28px 14px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.06) !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
html body .top-consultation .sn-consult-pair--triple .sn-consult-grid__item > a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(17,38,58,0.12) !important;
}

/* アイコンを大幅に拡大（110px） */
html body .top-consultation .sn-consult-icon,
html body .top-consultation .sn-consult-pair--triple .sn-consult-icon,
html body .top-consultation .sn-consult-section .sn-consult-icon {
  width: 110px !important;
  height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
html body .top-consultation .sn-consult-icon img,
html body .top-consultation .sn-consult-pair--triple .sn-consult-icon img,
html body .top-consultation .sn-consult-section .sn-consult-icon img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ラベル */
html body .top-consultation .sn-consult-label,
html body .top-consultation .sn-consult-pair--triple .sn-consult-label {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: center !important;
  color: var(--clr-text, #1a202c) !important;
}

/* 広いセクションと中サイズも同じカードサイズに揃える */
html body .top-consultation .sn-consult-section--wide .sn-consult-grid__item > a,
html body .top-consultation .sn-consult-section--medium .sn-consult-grid__item > a {
  min-height: 200px !important;
  padding: 28px 14px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(17,38,58,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: var(--clr-text, #1a202c) !important;
  text-align: center !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  html body .top-consultation .sn-consult-icon,
  html body .top-consultation .sn-consult-pair--triple .sn-consult-icon {
    width: 90px !important; height: 90px !important;
  }
  html body .top-consultation .sn-consult-icon img,
  html body .top-consultation .sn-consult-pair--triple .sn-consult-icon img {
    width: 78px !important; height: 78px !important;
  }
}
@media screen and (max-width: 768px) {
  html body .top-consultation .sn-consult-pair.sn-consult-pair--triple {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html body .top-consultation .sn-consult-icon { width: 64px !important; height: 64px !important; }
  html body .top-consultation .sn-consult-icon img { width: 56px !important; height: 56px !important; }
  html body .top-consultation .sn-consult-pair--triple .sn-consult-grid__item > a,
  html body .top-consultation .sn-consult-section--wide .sn-consult-grid__item > a,
  html body .top-consultation .sn-consult-section--medium .sn-consult-grid__item > a {
    min-height: 140px !important;
    padding: 18px 8px 14px !important;
  }
}

/* ==========================================================================
   お知らせカード：事務所名バッジ
   ========================================================================== */
.info-article-card__office {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 4px !important;
  padding: 3px 10px !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.08), rgba(20,184,166,0.08)) !important;
  border: 1px solid rgba(30,91,206,0.15) !important;
  border-radius: 999px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: var(--clr-primary, #1E5BCE) !important;
  width: fit-content !important;
}
.info-article-card__office svg {
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}

/* ==========================================================================
   about-profession：CTA ブロックをセンター揃え
   ========================================================================== */
.about-prof__cta-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 40px !important;
  gap: 16px !important;
}
.about-prof__cta-block .btn {
  min-width: 220px !important;
}

/* ==========================================================================
   how-steps：矢印を完全中央に（align-items: center で統一）
   ========================================================================== */
html body .how-steps {
  align-items: center !important;
}
html body .how-step-arrow {
  margin-top: 0 !important;
  align-self: auto !important;
}

/* ==========================================================================
   sn-consult-pair--triple：バッジ高さを subgrid で完全同期
   ========================================================================== */
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head {
  position: static !important;
  margin-top: 0 !important;
}

/* ##########################################################################
   ★ LUXURIOUS BACKGROUNDS — セクション豪華化
   ########################################################################## */

/* --------------------------------------------------------------------------
   共通：ドットグリッドパターン（SVGデータURI）
   -------------------------------------------------------------------------- */
:root {
  --bg-dot-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%231E5BCE' fill-opacity='.08'/%3E%3C/svg%3E");
  --bg-dot-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231E5BCE' fill-opacity='.06'/%3E%3C/svg%3E");
  --bg-cross:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 16v8M16 20h8' stroke='%231E5BCE' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   注目士業（top_pickup）— 薄いドット＋右上ブルーオーブ
   -------------------------------------------------------------------------- */
.top_pickup {
  position: relative;
  overflow: hidden;
  background:
    var(--bg-dot-sm),
    #ffffff !important;
}
.top_pickup::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,91,206,.12) 0%, transparent 70%);
  pointer-events: none;
}
.top_pickup::after {
  content: "";
  position: absolute;
  bottom: -80px; left: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.10) 0%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   新着士業（latest_pro）— クロスハッチ＋対角グラデ帯
   -------------------------------------------------------------------------- */
.latest_pro,
.latest_pro-wrap {
  position: relative;
  overflow: hidden;
}
.latest_pro {
  background:
    var(--bg-cross),
    linear-gradient(135deg, #f0f6ff 0%, #eef9f7 100%) !important;
}
.latest_pro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
}

/* --------------------------------------------------------------------------
   はじめての方へ（how-it-works）— 放射状ブルー＋ドット
   -------------------------------------------------------------------------- */
.how-it-works {
  position: relative;
  overflow: hidden;
  background:
    var(--bg-dot-md),
    linear-gradient(160deg, #f7faff 0%, #ffffff 50%, #f0faf8 100%) !important;
  border-bottom: none !important;
}
.how-it-works::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30,91,206,.08) 0%, transparent 65%);
  pointer-events: none;
}
.how-it-works::after {
  content: "";
  position: absolute;
  bottom: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.10) 0%, transparent 70%);
  pointer-events: none;
}

/* STEP カードにガラスモーフィズム */
.how-step {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(30,91,206,.10) !important;
  box-shadow: 0 4px 24px rgba(30,91,206,.08), 0 1px 4px rgba(0,0,0,.04) !important;
  transition: transform .3s, box-shadow .3s;
}
.how-step:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 36px rgba(30,91,206,.14), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* --------------------------------------------------------------------------
   相談内容一覧（top-consultation）— 対角ストライプ＋グラデ
   -------------------------------------------------------------------------- */
.top-consultation {
  position: relative;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 60L60 0' stroke='%231E5BCE' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #f5f8ff 0%, #eef9f7 60%, #f7faff 100%) !important;
}
.top-consultation::before {
  content: "";
  position: absolute;
  top: -100px; right: -150px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,91,206,.07) 0%, transparent 60%);
  pointer-events: none;
}
.top-consultation::after {
  content: "";
  position: absolute;
  bottom: -100px; left: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.07) 0%, transparent 60%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   士業検索（search_cat）— 軽いドット＋左上アクセント
   -------------------------------------------------------------------------- */
.search_cat {
  position: relative;
  overflow: hidden;
  background:
    var(--bg-dot-sm),
    #ffffff !important;
}
.search_cat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: linear-gradient(90deg,
    var(--clr-primary) 0%,
    var(--clr-secondary) 50%,
    transparent 100%);
  opacity: .6;
}

/* --------------------------------------------------------------------------
   お役立ち情報（top_articles）— クロスハッチ＋グラデ
   -------------------------------------------------------------------------- */
.top_articles {
  position: relative;
  overflow: hidden;
  background:
    var(--bg-cross),
    linear-gradient(155deg, #eef9f7 0%, #f5f8ff 100%) !important;
}
.top_articles::after {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,91,206,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   アバウトセクション（top-about）— 既存 about-bg.png を活かしつつ強化
   -------------------------------------------------------------------------- */
.top-about {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      rgba(30,91,206,.92) 0%,
      rgba(20,140,160,.90) 60%,
      rgba(20,184,166,.85) 100%) !important;
}
.top-about::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   セクション区切りウェーブ（how-it-works の下）
   -------------------------------------------------------------------------- */
.how-it-works {
  padding-bottom: calc(var(--section-py) + 40px) !important;
}
.how-it-works + * {
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   アニメーション：オーブがゆっくり揺れる
   -------------------------------------------------------------------------- */
@keyframes sn-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.04); }
}
.top_pickup::before,
.latest_pro::after,
.how-it-works::before,
.top-consultation::before {
  animation: sn-float 12s ease-in-out infinite;
}
.top_pickup::after,
.how-it-works::after,
.top-consultation::after,
.top_articles::after {
  animation: sn-float 9s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .top_pickup::before, .top_pickup::after,
  .latest_pro::after,
  .how-it-works::before, .how-it-works::after,
  .top-consultation::before, .top-consultation::after,
  .top_articles::after { animation: none; }
}

/* ##########################################################################
   ★ INFORMATION PAGE — マガジンスタイルリニューアル
   ########################################################################## */

/* ページ全体 */
.sn-page-content--information {
  background: #f5f8ff;
}

/* セクション共通 */
.info-mag-section {
  padding: 72px clamp(20px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.info-mag-section--news {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.2' fill='%231E5BCE' fill-opacity='.06'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #f7faff 0%, #eef5fb 100%);
}
.info-mag-section--notice {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 16v8M16 20h8' stroke='%2314B8A6' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #eefaf9 0%, #f0f9ff 100%);
}
.info-mag-section--voice {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%231E5BCE' fill-opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #f5f8ff 0%, #f7faff 100%);
}

/* ===== セクションヘッダー ===== */
.info-mag-header {
  max-width: 1080px;
  margin: 0 auto 48px;
  position: relative;
}
.info-mag-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary, #1E5BCE), var(--clr-secondary, #14B8A6));
  border-radius: 2px;
  margin-top: 16px;
}
.info-mag-header--notice::after { background: linear-gradient(90deg, #14B8A6, #0ea5e9); }
.info-mag-header--voice::after  { background: linear-gradient(90deg, #8b5cf6, #1E5BCE); }

.info-mag-header__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-primary, #1E5BCE);
  margin-bottom: 8px;
}
.info-mag-header--notice .info-mag-header__label { color: #0d9488; }
.info-mag-header--voice  .info-mag-header__label { color: #7c3aed; }

.info-mag-header__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--clr-text, #1a202c);
  margin: 0 0 8px;
  line-height: 1.3;
}
.info-mag-header__sub {
  font-size: 0.9375rem;
  color: var(--clr-text-muted, #64748b);
  margin: 0;
}

/* ===== フィーチャーカード（最新2件） ===== */
.info-mag-body { max-width: 1080px; margin: 0 auto; }

.info-mag-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
.info-mag-feature__card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(17,38,58,0.08);
  transition: transform .3s, box-shadow .3s;
}
.info-mag-feature__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(17,38,58,0.14);
}
.info-mag-feature__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.info-mag-feature__img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.info-mag-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.info-mag-feature__card:hover .info-mag-feature__img {
  transform: scale(1.04);
}
.info-mag-feature__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, var(--clr-primary,#1E5BCE), #3b82f6);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
}
.info-mag-feature__body {
  padding: 20px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-mag-feature__date {
  font-size: 0.75rem;
  color: var(--clr-text-muted, #94a3b8);
  font-weight: 600;
}
.info-mag-feature__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.info-mag-feature__excerpt {
  font-size: 0.8125rem;
  color: var(--clr-text-muted, #64748b);
  line-height: 1.7;
  margin: 0;
}
.info-mag-feature__more {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--clr-primary, #1E5BCE);
}

/* ===== カードグリッド（残り記事） ===== */
.info-mag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-mag-grid--voice {
  grid-template-columns: repeat(3, 1fr);
}
.info-mag-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(17,38,58,0.06);
  transition: transform .3s, box-shadow .3s;
}
.info-mag-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(17,38,58,0.12);
}
.info-mag-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.info-mag-card__img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.info-mag-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.info-mag-card:hover .info-mag-card__img { transform: scale(1.05); }

.info-mag-card__cat {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(30,91,206,.9);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.info-mag-card__cat--voice {
  background: rgba(124,58,237,.9);
}
.info-mag-card__body {
  padding: 12px 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-mag-card__date {
  font-size: 0.6875rem;
  color: var(--clr-text-muted, #94a3b8);
  font-weight: 600;
}
.info-mag-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== お知らせタイムライン ===== */
.info-notice-board {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(17,38,58,0.07);
  overflow: hidden;
}
.info-notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .2s;
}
.info-notice-item:last-child { border-bottom: none; }
.info-notice-item:hover { background: #f7faff; }

.info-notice-item__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e0eaff, #d1faf4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary, #1E5BCE);
  border: 2px solid #e8f0fe;
}
.info-notice-item__avatar--pro {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: #bbf7d0;
  color: #15803d;
}
.info-notice-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-notice-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-notice-item__office {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--clr-primary, #1E5BCE);
  letter-spacing: .04em;
}
.info-notice-item__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-text, #1a202c);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-notice-item__title:hover { color: var(--clr-primary, #1E5BCE); }
.info-notice-item__date {
  font-size: 0.6875rem;
  color: var(--clr-text-muted, #94a3b8);
}
.info-notice-item__badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(30,91,206,.1);
  color: var(--clr-primary, #1E5BCE);
}
.info-notice-item__badge--new {
  background: rgba(20,184,166,.12);
  color: #0d9488;
}

/* ===== 空の状態 ===== */
.info-mag-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--clr-text-muted, #94a3b8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto;
}
.info-mag-empty p { margin: 0; font-size: 0.9375rem; }

/* ===== レスポンシブ ===== */
@media screen and (max-width: 1024px) {
  .info-mag-grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
  .info-mag-section { padding: 48px clamp(16px, 4vw, 24px); }
  .info-mag-feature { grid-template-columns: 1fr; gap: 20px; }
  .info-mag-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .info-mag-grid--voice { grid-template-columns: repeat(2, 1fr); }
  .info-mag-header { margin-bottom: 32px; }
  .info-notice-item { padding: 14px 16px; gap: 12px; }
}
@media screen and (max-width: 480px) {
  .info-mag-grid { grid-template-columns: 1fr; }
  .info-mag-feature { gap: 16px; }
}

/* ##########################################################################
   ★ DEFINITIVE LAYOUT FIXES — 全競合を最終上書き
   ########################################################################## */

/* ==========================================================================
   1. 士業タブ：横スクロール + 右側余白
   ========================================================================== */
.top-consultation .sn-consult-tabs {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.top-consultation .sn-consult-tabs::-webkit-scrollbar { display: none !important; }
.top-consultation .sn-consult-tabs .sn-consult-tabs__list {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 24px 4px 0 !important;
}

/* ==========================================================================
   2. STEP矢印：必ず縦中央
   ========================================================================== */
.how-it-works .how-steps {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}
.how-it-works .how-step {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
.how-it-works .how-step-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 1.75rem !important;
  color: rgba(30,91,206,0.5) !important;
}
@media screen and (max-width: 768px) {
  .how-it-works .how-steps { flex-wrap: wrap !important; }
  .how-it-works .how-step-arrow {
    transform: rotate(90deg) !important;
    padding: 4px 0 !important;
  }
}

/* ==========================================================================
   3. 士業バッジを必ず先頭に（全セクション共通）
   ========================================================================== */
.top-consultation .sn-consult-section {
  display: flex !important;
  flex-direction: column !important;
}
.top-consultation .sn-consult-section > .sn-consult-section__head {
  order: -1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
}
.top-consultation .sn-consult-section > .sn-consult-section__list {
  order: 0 !important;
  flex: 1 1 auto !important;
}

/* ==========================================================================
   4. トリプルペア：3バッジの高さを揃える
   ========================================================================== */
html body .top-consultation .sn-consult-pair.sn-consult-pair--triple {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head {
  order: -1 !important;
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__list {
  order: 0 !important;
  flex: 1 1 auto !important;
}

@media screen and (max-width: 768px) {
  html body .top-consultation .sn-consult-pair.sn-consult-pair--triple {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ##########################################################################
   ★ FINAL PATCH v2 — バッジずれ・STEP矢印 確定修正
   ########################################################################## */

/* ==========================================================================
   A. sn-consult-pair 内の section:first-of-type 余分な padding-top を無効化
      section:first-of-type:not(.hero):not(.top-interview) が税理士・中小企業
      診断士等の最初のセクションに padding-top を加えてしまうのを打ち消す
   ========================================================================== */
html body .top-consultation .sn-consult-pair > .sn-consult-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   B. STEP矢印を確実に縦中央に — align-items: center 方式（最高優先度）
   ========================================================================== */
html body .how-it-works .how-steps {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}
html body .how-it-works .how-step-arrow {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 1.75rem !important;
  color: rgba(30, 91, 206, 0.5) !important;
}
@media screen and (max-width: 768px) {
  html body .how-it-works .how-steps {
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  html body .how-it-works .how-step-arrow {
    transform: rotate(90deg) !important;
    padding: 4px 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ##########################################################################
   ★ DESIGN OVERHAUL PATCH — グリッド・ボタン・カード・プロフィール
   ########################################################################## */

/* ==========================================================================
   1. about-prof__grid：2列×5行（全幅バランス均等）
   ========================================================================== */
#content .about-prof__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
#content .about-prof__grid > article:last-child {
  grid-column: auto !important;
  max-width: none !important;
}
#content .about-prof__grid #tochikaoku { order: 10 !important; }
@media screen and (max-width: 480px) {
  #content .about-prof__grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   2. ボタン下線の除去（.btn および aタグボタン全般）
   ========================================================================== */
.btn,
.btn:hover,
.btn:focus,
.btn:visited,
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited,
.pro_contact_mail,
.pro_contact_mail:hover,
.pro_contact_mail:focus {
  text-decoration: none !important;
}
/* 個別プロファイルのタグリンク */
.post-taxonomy__link { text-decoration: none !important; }
.post-taxonomy__link:hover { text-decoration: underline !important; }

/* ==========================================================================
   3. pro-list-grid：カードと枠の間に余白
   ========================================================================== */
html body .pro-list-grid {
  padding: 0 4px !important;
}
html body .pro-card {
  overflow: hidden !important;
}

/* ==========================================================================
   4. page-sigyoulist pro-card：写真を小さく、no-photoを整える
   ========================================================================== */
html body .sn-page-content--sigyoulist .pro-card__photo {
  aspect-ratio: 4 / 3 !important;
  max-height: 200px !important;
  background: linear-gradient(135deg, #f0f4fb 0%, #e6eef8 100%) !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo {
  padding: 16px !important;
  gap: 6px !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo svg {
  width: 40px !important;
  height: 40px !important;
  opacity: 0.3 !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo span {
  font-size: 0.7rem !important;
  opacity: 0.5 !important;
}
/* バッジを写真エリアの上にオーバーレイ */
html body .sn-page-content--sigyoulist .pro-card__photo {
  position: relative !important;
}
html body .sn-page-content--sigyoulist .pro-card__badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 2 !important;
  padding: 0 !important;
}
/* pro-card内のフレックス順序変更：写真→名前→得意分野→PR */
html body .sn-page-content--sigyoulist .pro-card__link {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
html body .sn-page-content--sigyoulist .pro-card__badge {
  order: 1 !important;
}
html body .sn-page-content--sigyoulist .pro-card__photo {
  order: 1 !important;
}
html body .sn-page-content--sigyoulist .pro-card__info {
  order: 2 !important;
}
html body .sn-page-content--sigyoulist .pro-specialty {
  order: 3 !important;
}
html body .sn-page-content--sigyoulist .pro-card__body {
  order: 4 !important;
}

/* ==========================================================================
   5. プロフィール詳細ページ：ボタン下線除去 + 全体レイアウト改善
   ========================================================================== */
.profile_introduction a,
.id-contact-container a,
.contact_bttns a,
.pro_contact_mailbox a,
.pro_contact_tel a {
  text-decoration: none !important;
}
/* pro_contact_mail ボタンのスタイル強化 */
.pro_contact_mail {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}

/* ==========================================================================
   6. sn-profile：士業プロフィール詳細ページ（新テンプレート）
   ========================================================================== */

/* ---- ラッパー ---- */
.sn-profile {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  font-family: inherit;
  color: #2d2d2d;
}

/* ---- ヒーロー：写真 + 情報の2カラム ---- */
.sn-profile__hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
  padding: 32px;
  margin-bottom: 32px;
}
@media (max-width: 680px) {
  .sn-profile__hero {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
}

/* ---- 写真カラム ---- */
.sn-profile__photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sn-profile__photo-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #f0f4fb 0%, #e6eef8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-profile__photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.sn-profile__no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #aab4c6;
  font-size: 0.75rem;
}

.sn-profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ---- 情報カラム ---- */
.sn-profile__info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sn-profile__office {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
  font-weight: 500;
}

.sn-profile__name {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.3;
}

.sn-profile__license {
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 0;
}

.sn-profile__access {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- ヒーロー内 相談タグ ---- */
.sn-profile__consult-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sn-profile__consult-tag {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: #eef2ff;
  color: #3b5bdb;
  text-decoration: none !important;
  border: 1px solid #c5d0f5;
  transition: background 0.15s;
  white-space: nowrap;
}
.sn-profile__consult-tag:hover {
  background: #dce4ff;
  color: #2244c8;
}

/* ---- CTAボタン ---- */
.sn-profile__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.sn-profile__cta-btn {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.15s;
  cursor: pointer;
  min-width: 180px;
  flex: 1;
}
.sn-profile__cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.sn-profile__cta-btn--mail {
  background: linear-gradient(135deg, #1e5bce 0%, #3a7bd5 100%);
  color: #fff !important;
}
.sn-profile__cta-btn--tel {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff !important;
}
.sn-profile__cta-btn--lg {
  padding: 16px 28px;
  font-size: 1.05rem;
  min-width: 220px;
}

.sn-profile__cta-label {
  display: block;
  font-size: 0.95em;
  line-height: 1.2;
}
.sn-profile__cta-sub {
  display: block;
  font-size: 0.78em;
  opacity: 0.85;
  font-weight: 400;
  line-height: 1.2;
}

/* ---- 受付時間 ---- */
.sn-profile__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.8rem;
  color: #6b7280;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid #e5e7eb;
}
.sn-profile__hours dt {
  font-weight: 600;
  white-space: nowrap;
  color: #4b5563;
}
.sn-profile__hours dd {
  margin: 0;
}

/* ---- ボディ（各セクション） ---- */
.sn-profile__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sn-profile__section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 28px 32px;
}
@media (max-width: 680px) {
  .sn-profile__section {
    padding: 20px 18px;
  }
}

.sn-profile__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eef2ff;
}
.sn-profile__section-title svg {
  flex-shrink: 0;
  color: #3b5bdb;
}

/* ---- テキスト本文 ---- */
.sn-profile__pr-text,
.sn-profile__expert-text {
  font-size: 0.93rem;
  line-height: 1.8;
  color: #374151;
  white-space: pre-line;
}

/* ---- タグクラウド ---- */
.sn-profile__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sn-profile__tag {
  font-size: 0.8rem;
  padding: 5px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #334155;
  text-decoration: none !important;
  border: 1px solid #e2e8f0;
  transition: background 0.15s;
}
.sn-profile__tag:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none !important;
}
.sn-profile__tag--area {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.sn-profile__tag--area:hover {
  background: #dcfce7;
  color: #14532d;
}

/* ---- 資格・経歴リスト ---- */
.sn-profile__career-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.sn-profile__career-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: start;
}
.sn-profile__career-row:last-child {
  border-bottom: none;
}
.sn-profile__career-row dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  padding-top: 2px;
  white-space: nowrap;
}
.sn-profile__career-row dd {
  font-size: 0.9rem;
  color: #374151;
  margin: 0;
  line-height: 1.7;
}

.sn-profile__hp-link {
  color: #3b5bdb !important;
  text-decoration: none !important;
  word-break: break-all;
}
.sn-profile__hp-link:hover {
  text-decoration: underline !important;
}

/* ---- 地図 ---- */
.sn-profile__map-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e7eb;
}
.sn-profile__map-wrap iframe {
  width: 100% !important;
  height: 340px !important;
  border: 0 !important;
  display: block !important;
}

/* ---- お知らせリスト ---- */
.sn-profile__news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sn-profile__news-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.sn-profile__news-item:last-child {
  border-bottom: none;
}

.sn-profile__news-date {
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.sn-profile__news-link {
  font-size: 0.9rem;
  color: #2563eb !important;
  text-decoration: none !important;
  line-height: 1.5;
}
.sn-profile__news-link:hover {
  text-decoration: underline !important;
}

/* ---- 下部CTA ---- */
.sn-profile__bottom-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 36px 0 16px;
}
.sn-profile__bottom-cta .sn-profile__cta-btn {
  justify-content: center;
  max-width: 320px;
}

/* ---- レスポンシブ補足 ---- */
@media (max-width: 480px) {
  .sn-profile__hero {
    padding: 16px;
  }
  .sn-profile__cta-wrap {
    flex-direction: column;
  }
  .sn-profile__cta-btn {
    min-width: unset;
    width: 100%;
  }
  .sn-profile__career-row {
    grid-template-columns: 70px 1fr;
  }
  .sn-profile__bottom-cta {
    flex-direction: column;
    align-items: center;
  }
  .sn-profile__bottom-cta .sn-profile__cta-btn {
    max-width: 100%;
  }
}
.pro_contact_mail:hover { opacity: 0.85 !important; text-decoration: none !important; }

/* ==========================================================================
   7. page-about：サービス紹介ページ
   ========================================================================== */

/* ---- 共通コンテナ ---- */
.sn-page-content--about {
  background: #f8fafc;
}
.sn-about__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- ヒーロー ---- */
.sn-about__hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px 56px;
}
@media (max-width: 820px) {
  .sn-about__hero {
    grid-template-columns: 1fr;
    padding: 40px 20px 32px;
  }
  .sn-about__hero-img { display: none; }
}

.sn-about__hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #3b5bdb;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.sn-about__hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  margin: 0 0 20px;
}

.sn-about__hero-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: #475569;
  margin: 0 0 32px;
}

.sn-about__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sn-about__hero-img img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(30, 91, 206, 0.15);
}

/* ---- ボタン共通 ---- */
.sn-about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.15s;
  cursor: pointer;
  gap: 8px;
  white-space: nowrap;
}
.sn-about__btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  text-decoration: none !important;
}
.sn-about__btn--primary {
  background: linear-gradient(135deg, #1e5bce 0%, #3a7bd5 100%);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(30, 91, 206, 0.3);
}
.sn-about__btn--outline {
  background: #fff;
  color: #1e5bce !important;
  border: 2px solid #1e5bce;
}
.sn-about__btn--ghost {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.5);
}
.sn-about__btn--lg {
  padding: 16px 36px;
  font-size: 1.05rem;
}

/* ---- セクション共通ヘッダー ---- */
.sn-about__section-head {
  text-align: center;
  margin-bottom: 40px;
}
.sn-about__section-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
}
.sn-about__section-sub {
  font-size: 0.93rem;
  color: #64748b;
  margin: 0;
}

/* ---- 特徴セクション ---- */
.sn-about__features {
  padding: 72px 0;
  background: #fff;
}
.sn-about__features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 680px) {
  .sn-about__features-grid { grid-template-columns: 1fr; }
}

.sn-about__feature-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: box-shadow 0.2s, transform 0.15s;
}
.sn-about__feature-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.sn-about__feature-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.sn-about__feature-icon--blue  { background: #dbeafe; color: #1d4ed8; }
.sn-about__feature-icon--green { background: #dcfce7; color: #15803d; }
.sn-about__feature-icon--orange { background: #ffedd5; color: #c2410c; }

.sn-about__feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
}
.sn-about__feature-desc {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #64748b;
  margin: 0;
}

/* ---- ミッションセクション ---- */
.sn-about__mission {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 100%);
  color: #fff;
}
.sn-about__mission-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
}
@media (max-width: 820px) {
  .sn-about__mission-inner { grid-template-columns: 1fr; }
  .sn-about__mission-visual { display: none; }
}

.sn-about__mission-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: 20px;
}
.sn-about__mission-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 24px;
  color: #fff;
}
.sn-about__mission-body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px;
}
.sn-about__mission-body:last-child { margin-bottom: 0; }

.sn-about__mission-visual img {
  width: 100%;
  border-radius: 16px;
  opacity: 0.9;
}

/* ---- 士業グリッド ---- */
.sn-about__professions {
  padding: 80px 0;
  background: #f8fafc;
}
.sn-about__prof-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .sn-about__prof-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sn-about__prof-grid { grid-template-columns: repeat(2, 1fr); }
}

.sn-about__prof-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.sn-about__prof-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  text-decoration: none !important;
}

.sn-about__prof-badge {
  font-size: 0.8rem;
}

.sn-about__prof-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.sn-about__prof-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: #3b5bdb;
  white-space: nowrap;
}

/* ---- ご利用の流れ ---- */
.sn-about__howto {
  padding: 80px 0;
  background: #fff;
}
.sn-about__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: steps;
  position: relative;
}
.sn-about__steps::after {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 16px);
  right: calc(12.5% + 16px);
  height: 2px;
  background: linear-gradient(90deg, #1e5bce, #3a7bd5);
  z-index: 0;
}
@media (max-width: 680px) {
  .sn-about__steps { grid-template-columns: 1fr; gap: 24px; }
  .sn-about__steps::after { display: none; }
}

.sn-about__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.sn-about__step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e5bce, #3a7bd5);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(30, 91, 206, 0.35);
  flex-shrink: 0;
}

.sn-about__step-body {
  flex: 1;
}
.sn-about__step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 10px;
}
.sn-about__step-desc {
  font-size: 0.8rem;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
}

/* ---- 下部CTA ---- */
.sn-about__cta-section {
  padding: 80px 0;
  background: #f1f5f9;
}
.sn-about__cta-box {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 100%);
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  box-shadow: 0 16px 56px rgba(30, 91, 206, 0.3);
}
@media (max-width: 600px) {
  .sn-about__cta-box { padding: 36px 20px; }
}

.sn-about__cta-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.sn-about__cta-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 32px;
}
.sn-about__cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* pc-only ユーティリティ */
.pc-only { display: inline; }
@media (max-width: 680px) {
  .pc-only { display: none; }
}

/* ==========================================================================
   8. how-steps margin-top 調整
   ========================================================================== */
html body .how-it-works .how-steps {
  margin-top: 11% !important;
}

/* ==========================================================================
   9. 複数の修正パッチ（タブ・カード・記事・ヘッダー）
   ========================================================================== */

/* ---- タブバー：折り返し表示（右切れ防止） ---- */
/* トップ相談 */
html body .top-consultation .sn-consult-tabs .sn-consult-tabs__list {
  flex-wrap: wrap !important;
  justify-content: center !important;
  max-width: 100% !important;
  padding: 4px 0 !important;
}
/* 士業一覧ページのタブ */
html body .sn-consult-tabs .sn-consult-tabs__inner {
  flex-wrap: wrap !important;
  white-space: normal !important;
  padding-right: 0 !important;
}
/* タブコンテナ自体はスクロール不要 */
html body .sn-consult-tabs {
  overflow-x: visible !important;
}

/* ---- about-profession：2列×5行（上記ルール参照） ---- */

/* ---- pro-list-grid：カードレイアウト整理（上詰め） ---- */
html body .sn-page-content--sigyoulist .pro-card__link {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  position: relative !important;
  gap: 0 !important;
  padding: 0 !important;
}
/* バッジ：先頭、上部余白を確保してパツパツ解消 */
html body .sn-page-content--sigyoulist .pro-card__badge {
  order: 0 !important;
  position: static !important;
  padding: 16px 14px 6px !important;
  z-index: auto !important;
  flex-shrink: 0 !important;
}
/* 写真：バッジの次、固定高さ */
html body .sn-page-content--sigyoulist .pro-card__photo {
  order: 1 !important;
  aspect-ratio: unset !important;
  height: 220px !important;
  max-height: 220px !important;
  min-height: 220px !important;
  position: static !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
html body .sn-page-content--sigyoulist .pro-card__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}
/* 名前・事務所：写真の次 */
html body .sn-page-content--sigyoulist .pro-card__info {
  order: 2 !important;
  padding: 8px 10px 4px !important;
  flex-shrink: 0 !important;
}
/* 得意分野 */
html body .sn-page-content--sigyoulist .pro-specialty {
  order: 3 !important;
}
/* PR文 */
html body .sn-page-content--sigyoulist .pro-card__body {
  order: 4 !important;
}
/* no-photo：ロゴ小さく中央表示 */
html body .sn-page-content--sigyoulist .pro-card__no-photo {
  height: 100% !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f5ff 100%) !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo img {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  max-height: 72px !important;
  width: auto !important;
  max-width: 80% !important;
  object-fit: contain !important;
  opacity: 0.8 !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo svg { display: none !important; }
html body .sn-page-content--sigyoulist .pro-card__no-photo span { display: none !important; }

/* ---- 記事サムネイル：大きすぎるのを抑制 ---- */
html body .articles-card-thumb,
html body .top_articles-item .articles-card-thumb {
  aspect-ratio: 16 / 7 !important;
  max-height: 180px !important;
}
html body .top-interview .interview-card__video {
  aspect-ratio: 16 / 7 !important;
  max-height: 180px !important;
}

/* ---- ヘッダー〜コンテンツ間の余白を縮める ---- */
html body .sn-page-content {
  padding-top: clamp(20px, 3vw, 40px) !important;
}
html body .sn-page-content--information {
  padding-top: 0 !important;
}
html body .sn-page-content--sigyoulist {
  padding-top: clamp(16px, 2vw, 32px) !important;
}
html body .sn-page-content--information .info-mag-section:first-of-type {
  padding-top: clamp(24px, 3vw, 40px) !important;
}

/* ##########################################################################
   ★ HERO & CTA 背景装飾 + タイトル可読性強化
   ########################################################################## */

/* ==========================================================================
   A. about ページ：ヒーロー背景 + CTA タイトル可読性
   ========================================================================== */

/* ヒーロー：白背景に爽やかなグラデーション */
.sn-page-content--about {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(98,200,211,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(30,91,206,0.10) 0%, transparent 55%),
    #f8fafc !important;
}

/* ヒーロー内のタイトルを強調 */
.sn-about__hero-title {
  color: #0f172a !important;
  text-shadow: 0 2px 8px rgba(255,255,255,0.8) !important;
}

/* CTA ボックス：ダーク青グラデ + 装飾 */
.sn-about__cta-box {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 60%, #0891b2 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.sn-about__cta-box::before {
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  pointer-events: none !important;
}
.sn-about__cta-box::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important;
  left: -40px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: rgba(98,200,211,0.12) !important;
  pointer-events: none !important;
}
.sn-about__cta-title {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}
.sn-about__cta-desc {
  color: rgba(255,255,255,0.92) !important;
  position: relative !important;
  z-index: 1 !important;
}
.sn-about__cta-btns {
  position: relative !important;
  z-index: 1 !important;
}

/* CTA ボタン：白ボタン（プライマリ）と半透明ゴーストボタン */
.sn-about__btn--primary {
  background: #fff !important;
  color: #1e3a8a !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25) !important;
}
.sn-about__btn--primary:hover {
  background: #f0f4ff !important;
  transform: translateY(-2px) !important;
}
.sn-about__btn--ghost {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
}
.sn-about__btn--ghost:hover {
  background: rgba(255,255,255,0.22) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   B. about-profession ページ：イントロヒーロー背景
   ========================================================================== */

.sn-page-content--about-profession {
  background:
    radial-gradient(ellipse at 75% 5%, rgba(98,200,211,0.13) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 95%, rgba(30,91,206,0.08) 0%, transparent 50%),
    #f8fafc !important;
}

.about-prof__intro {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 60%, #0891b2 100%) !important;
  border-radius: 20px !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.about-prof__intro::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important; right: -50px !important;
  width: 200px !important; height: 200px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  pointer-events: none !important;
}
.about-prof__intro::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important; left: -40px !important;
  width: 160px !important; height: 160px !important;
  border-radius: 50% !important;
  background: rgba(98,200,211,0.12) !important;
  pointer-events: none !important;
}
.about-prof__intro-text {
  color: rgba(255,255,255,0.95) !important;
  font-size: clamp(0.9rem, 2vw, 1rem) !important;
  line-height: 2 !important;
  text-align: center !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   C. publish ページ：CTA 背景改善
   ========================================================================== */

/* publish-cta：ダーク→明るめグラデに統一済みだが、さらに装飾追加 */
.publish-cta {
  background:
    radial-gradient(circle at 15% 50%, rgba(30,91,206,0.18) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(98,200,211,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #dbeafe 0%, #e0f2fe 50%, #ccfbf1 100%) !important;
  overflow: hidden !important;
}
.publish-cta__inner {
  position: relative !important;
  z-index: 2 !important;
}
.publish-cta__title {
  color: #0f172a !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.6) !important;
  font-weight: 800 !important;
}
.publish-cta__text {
  color: rgba(15,23,42,0.8) !important;
  text-shadow: none !important;
}

/* ==========================================================================
   D. フロントページ：how-it-works タイトル可読性
   ========================================================================== */

.how-title {
  color: #0f172a !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.8) !important;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}
.how-lead {
  color: rgba(15,23,42,0.75) !important;
  text-align: center !important;
}

/* ==========================================================================
   E. sigyoulist ページ：タブ間隔・コンテナ余白の最終調整
   ========================================================================== */

/* タブの余白を上下対称に */
.sn-page-content--sigyoulist .sn-consult-tabs {
  margin-bottom: clamp(20px, 3vw, 32px) !important;
}

/* グリッドの左右マージン */
.sn-page-content--sigyoulist .pro-list-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   F. about ページ：各セクション見出し可読性
   ========================================================================== */

.sn-about__section-title {
  color: #0f172a !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
  font-weight: 800 !important;
}
.sn-about__section-sub {
  color: #64748b !important;
}

/* features セクション：ライトグレー背景 */
.sn-about__features {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(98,200,211,0.10) 0%, transparent 50%),
    #f1f5f9 !important;
}

/* mission セクション：ホワイト背景 + ライン */
.sn-about__mission {
  background: #fff !important;
  border-top: 1px solid rgba(30,91,206,0.08) !important;
  border-bottom: 1px solid rgba(30,91,206,0.08) !important;
}
.sn-about__mission-title {
  color: #0f172a !important;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

/* professions セクション */
.sn-about__professions {
  background:
    radial-gradient(ellipse at 10% 90%, rgba(30,91,206,0.08) 0%, transparent 50%),
    #f8fafc !important;
}

/* howto セクション */
.sn-about__howto {
  background: #fff !important;
}

/* prof カード */
.sn-about__prof-card {
  background: #fff !important;
  border: 1px solid rgba(30,91,206,0.10) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}
.sn-about__prof-card:hover {
  box-shadow: 0 8px 24px rgba(30,91,206,0.12) !important;
  transform: translateY(-3px) !important;
}
.sn-about__prof-link {
  color: #1e5bce !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-top: auto !important;
}

/* prof grid：3列（PCで5+5均等） */
.sn-about__prof-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  .sn-about__prof-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .sn-about__prof-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* step ライン装飾 */
.sn-about__step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(30,91,206,0.07) !important;
}
.sn-about__step:last-child {
  border-bottom: none !important;
}
.sn-about__step-num {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e5bce, #0891b2) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sn-about__steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ##########################################################################
   ★ 相談セクション余白・アラインメント・記事カードno-image修正
   ########################################################################## */

/* 土地家屋調査士セクション：margin-top を完全削除（縦ずれの原因だった） */
/* 旧ルール削除済み */

/* compact ペア（税理士/行政書士等）：ヘッダー上端を揃える */
.sn-consult-pair .sn-consult-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.sn-consult-pair .sn-consult-section__head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ペアの左右セクションを上端で揃える */
.sn-consult-pair {
  align-items: start !important;
}

/* 記事カードのno-image：サイトロゴ表示 */
.articles-card-thumb img[src*="no_thumb"],
.articles-card-thumb img[src*="kaiketsu"],
.top_articles-item img[src*="no_thumb"],
.top_articles-item img[src*="kaiketsu"],
.top_articles-item img[src*="photo-ac.com"],
.info-article-card__thumb[src*="no_thumb"],
.info-article-card__thumb[src*="kaiketsu"] {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8f4fb 100%) !important;
  max-height: 160px !important;
}

/* ##########################################################################
   ★ single 投稿ページ：新レイアウト（左写真・右テキスト・士業タグ）
   ########################################################################## */

/* ヒーロータイトル */
.sn-single__hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 60%, #0891b2 100%);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.sn-single__hero::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.sn-single__title {
  font-size: clamp(1.3rem, 3vw, 1.9rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  margin: 0 0 12px !important;
  line-height: 1.45 !important;
  position: relative;
  z-index: 1;
}
.sn-single__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.sn-single__date {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
}
.sn-single__meta a { color: rgba(255,255,255,0.8); font-size: 0.82rem; text-decoration: none; }

/* 2カラムレイアウト */
.sn-single__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 768px) {
  .sn-single__layout { grid-template-columns: 1fr; }
}

/* 左：写真カラム */
.sn-single__photo-col {
  position: sticky;
  top: 80px;
}
.sn-single__photo {
  width: 100% !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  aspect-ratio: 3 / 4 !important;
  display: block !important;
  box-shadow: 0 8px 28px rgba(30,91,206,0.15) !important;
}
.sn-single__no-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8f4fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sn-single__no-photo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  opacity: 0.6;
}
.sn-single__pro-info {
  margin-top: 12px;
  text-align: center;
}
.sn-single__pro-office {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0 0 2px;
}
.sn-single__pro-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* 右：コンテンツカラム */
.sn-single__content-col { min-width: 0; }

/* 士業バッジ行 */
.sn-single__shigyo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* 得意分野タグ行 */
.sn-single__consult-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(30,91,206,0.08);
}
.sn-single__consult-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(30,91,206,0.07);
  color: #1e5bce;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.sn-single__consult-tag:hover {
  background: rgba(30,91,206,0.14);
}

/* 本文 */
.sn-single__body {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: #334155;
}
.sn-single__body p { margin: 0 0 1.25em; }

/* ##########################################################################
   ★ 残修正バッチ：矢印中央・タブ5列・背景装飾
   ########################################################################## */

/* ==========================================================================
   0. トップページ タブバー5×2 グリッド + ペアずれ最終修正
   ========================================================================== */

/* タブバー：10項目を5列×2行グリッドに */
html body .top-consultation .sn-consult-tabs {
  overflow-x: visible !important;
  overflow: visible !important;
}
html body .top-consultation .sn-consult-tabs .sn-consult-tabs__list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  gap: 8px !important;
  max-width: 100% !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
html body .top-consultation .sn-consult-tabs .sn-consult-tabs__item {
  width: 100% !important;
}
html body .top-consultation .sn-consult-tabs .sn-consult-tabs__item .tag {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
@media screen and (max-width: 600px) {
  html body .top-consultation .sn-consult-tabs .sn-consult-tabs__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ペアのずれ：両セクション確実にtop揃え */
html body .top-consultation .sn-consult-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  align-content: start !important;
}
html body .top-consultation .sn-consult-pair > section,
html body .top-consultation .sn-consult-pair > .sn-consult-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: start !important;
}

/* ==========================================================================
   1. easy-step__arrow：縦中央揃え（margin-top を除去して align-self: center）
   ========================================================================== */
html body .easy-steps__list {
  align-items: center !important;
}
html body .easy-step__arrow {
  margin-top: 0 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
  color: rgba(30, 91, 206, 0.4) !important;
}
@media screen and (max-width: 768px) {
  html body .easy-step__arrow {
    margin-top: 0 !important;
    padding: 4px 0 !important;
  }
}

/* ==========================================================================
   2. sigyoulist タブバー：5列グリッドで5×2均等表示
   ========================================================================== */
html body .sn-page-content--sigyoulist .sn-consult-tabs__inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  max-width: none !important;
  overflow: visible !important;
}
html body .sn-page-content--sigyoulist .sn-consult-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 8px !important;
  white-space: normal !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
  line-height: 1.3 !important;
}
@media screen and (max-width: 600px) {
  html body .sn-page-content--sigyoulist .sn-consult-tabs__inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   3. join_kaiketsu：純粋CSSデコレーション背景（画像不要）
   ========================================================================== */
.join_kaiketsu {
  background:
    radial-gradient(ellipse at 10% 40%, rgba(98,200,211,0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 70%, rgba(30,91,206,0.30) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(17,38,58,0.40) 0%, transparent 60%),
    linear-gradient(135deg, #11263a 0%, #1e5bce 55%, #14b8a6 100%) !important;
}
.join_kaiketsu::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.06) 0 2px, transparent 2px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.04) 0 3px, transparent 3px),
    radial-gradient(circle at 60% 15%, rgba(98,200,211,0.10) 0 40px, transparent 40px),
    radial-gradient(circle at 25% 80%, rgba(98,200,211,0.08) 0 60px, transparent 60px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ==========================================================================
   4. pro-cta-band：装飾的な背景イラスト（CSSシェイプ）
   ========================================================================== */
html body .pro-cta-band {
  background:
    radial-gradient(ellipse at 5% 50%, rgba(98,200,211,0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 95% 50%, rgba(30,91,206,0.35) 0%, transparent 40%),
    linear-gradient(135deg, #11263a 0%, #1e5bce 50%, #14b8a6 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .pro-cta-band::before {
  content: "" !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
html body .pro-cta-band::after {
  content: "" !important;
  position: absolute !important;
  bottom: -100px !important;
  left: -60px !important;
  width: 400px !important;
  height: 400px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(98,200,211,0.15) 0%, transparent 65%) !important;
  pointer-events: none !important;
}
html body .pro-cta-band__inner {
  position: relative !important;
  z-index: 1 !important;
}
html body .pro-cta-band__title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}

/* ##########################################################################
   ★ 追加修正バッチ：顔切れ・join_kaiketsu背景・about-profずれ・triple整列
   ########################################################################## */

/* ==========================================================================
   1. pro-card 写真エリア高さ拡大（顔が切れないよう 140px → 220px）
   ========================================================================== */
html body .sn-page-content--sigyoulist .pro-card__photo {
  height: 220px !important;
  max-height: 220px !important;
  min-height: 220px !important;
}
html body .sn-page-content--sigyoulist .pro-card__photo img {
  object-position: top center !important;
}
html body .sn-page-content--sigyoulist .pro-card__no-photo {
  height: 220px !important;
  min-height: 220px !important;
}

/* ==========================================================================
   2. join_kaiketsu 背景：section要素セレクターで詳細度を上げて上書き
   ========================================================================== */
section.join_kaiketsu,
html body section.join_kaiketsu,
html body .join_kaiketsu {
  background:
    radial-gradient(ellipse at 10% 40%, rgba(98,200,211,0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 70%, rgba(30,91,206,0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(17,38,58,0.45) 0%, transparent 60%),
    linear-gradient(135deg, #11263a 0%, #1e5bce 55%, #14b8a6 100%) !important;
  color: #fff !important;
}

/* ==========================================================================
   3. #tochikaoku の margin-top 強制注入を完全削除（縦ずれの真犯人）
   ========================================================================== */
#tochikaoku {
  margin-top: 0 !important;
}
.top-consultation #tochikaoku {
  margin-top: 0 !important;
}

/* ==========================================================================
   4. triple pair カード行の縦位置を揃える（各セクションを上端固定）
   ========================================================================== */
html body .top-consultation .sn-consult-pair--triple {
  align-items: start !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section {
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body .top-consultation .sn-consult-pair--triple > .sn-consult-section > .sn-consult-section__head {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
}

/* ==========================================================================
   5. about-profession ページ：2カラム最終行の上端揃え
   ========================================================================== */

/* ==========================================================================
   6. プロフィール：縦長解消・写真1:1・ボディ2カラム・余白詰め
   ========================================================================== */

/* 写真を正方形（1:1）に変更してヒーローを低く */
html body .sn-profile__photo-wrap {
  aspect-ratio: 1 / 1 !important;
}

/* ヒーローの写真カラムを少し小さく */
html body .sn-profile__hero {
  grid-template-columns: 180px 1fr !important;
  gap: 24px !important;
  padding: 24px !important;
}

/* ボディ：自己紹介は全幅 */
.sn-profile__section--full {
  width: 100%;
}

/* ボディ2カラムグリッド */
.sn-profile__body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.sn-profile__main-col,
.sn-profile__side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sn-profile__main-col .sn-profile__section,
.sn-profile__side-col .sn-profile__section {
  margin-bottom: 0 !important;
}

/* モバイルは1カラム */
@media (max-width: 680px) {
  html body .sn-profile__hero {
    grid-template-columns: 1fr !important;
  }
  .sn-profile__body-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ボディ全体の gap を縮小 */
html body .sn-profile__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==========================================================================
   7. プロフィール：事務所名〜名前の余白・セクション内上余白を詰める
   ========================================================================== */

/* 情報カラムの gap を詰める */
html body .sn-profile__info-col {
  gap: 4px !important;
  justify-content: flex-start !important;
}
/* office/name/license の余白をリセット */
html body .sn-profile__office {
  margin: 0 0 0 0 !important;
  line-height: 1.4 !important;
}
html body .sn-profile__name {
  margin: 2px 0 4px !important;
  line-height: 1.3 !important;
}
html body .sn-profile__license {
  margin: 0 !important;
}
/* access は名前直後なので少し余白 */
html body .sn-profile__access {
  margin: 2px 0 0 !important;
}

/* セクションカード内のタイトル上余白を詰める */
html body .sn-profile__section {
  padding-top: 20px !important;
}
html body .sn-profile__section-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#content .about-prof__grid {
  align-items: start !important;
}
#content .about-prof__grid > article {
  align-self: start !important;
}

/* ##########################################################################
   ★ 追加バッチ：記事カード・ニュース画像・profession-pills・publish-cta背景
   ########################################################################## */

/* ==========================================================================
   1. 記事カード（専門家からのメッセージ）：画像高さを抑えてテキストとバランス
   ========================================================================== */
html body .articles-card-thumb {
  aspect-ratio: unset !important;
  height: 160px !important;
  max-height: 160px !important;
  flex-shrink: 0 !important;
}
html body .articles-card-thumb img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}
html body .top_articles-item > a {
  display: flex !important;
  flex-direction: column !important;
}
html body .top_articles-item .title_box {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 16px !important;
}

/* ==========================================================================
   2. info-article-card（ニュース記事）サムネイル → 相談ナビロゴに統一
   ========================================================================== */
html body .info-article-card__thumb-wrap img,
html body .info-article-card__thumb {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  padding: 24px !important;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8f4fb 100%) !important;
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   3. profession-pills（publishページ対応士業）：5列×2行グリッド
   ========================================================================== */
html body .profession-pills {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  justify-items: center !important;
  max-width: 860px !important;
  gap: 12px !important;
}
html body .profession-pills li {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
html body .profession-pills .shigyo_mark {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media screen and (max-width: 600px) {
  html body .profession-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   4. publish-cta（事務所の次のステージを…）：背景に装飾的シェイプを追加
   ========================================================================== */
.publish-cta {
  position: relative !important;
  overflow: hidden !important;
}
.publish-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(98,200,211,0.18) 0%, transparent 35%),
    radial-gradient(circle at 60% 60%, rgba(30,91,206,0.15) 0%, transparent 40%) !important;
  z-index: 1 !important;
}
.publish-cta::before {
  content: "" !important;
  position: absolute !important;
  top: -120px !important;
  right: -120px !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  border: 60px solid rgba(255,255,255,0.06) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* 左下の大きな輪 */
.publish-cta__inner::before {
  content: "" !important;
  position: absolute !important;
  bottom: -150px !important;
  left: -100px !important;
  width: 400px !important;
  height: 400px !important;
  border-radius: 50% !important;
  border: 50px solid rgba(98,200,211,0.10) !important;
  pointer-events: none !important;
}
.publish-cta__inner {
  position: relative !important;
  z-index: 2 !important;
}

/* ############################################################################
   ★ COMPREHENSIVE PATCH — CSS競合解消・BG装飾・余白詰め・可読性改善
   ############################################################################ */

/* ------------------------------------------------------------------
   1. join_kaiketsu — 最高特異度で上書き（ダークグラデーション背景）
   ------------------------------------------------------------------ */
html body section.join_kaiketsu,
html body div.join_kaiketsu,
html body .join_kaiketsu {
  background-color: #11263a !important;
  background-image:
    /* 右上：握手アイコン */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 110 q10 -20 30 -20 l30 0 q10 0 15 -10 l20 -30'/%3E%3Cpath d='M150 110 q-10 -20 -30 -20 l-30 0'/%3E%3Cpath d='M40 120 l20 -10 l80 0 l20 10'/%3E%3Ccircle cx='100' cy='65' r='18'/%3E%3Cpath d='M82 65 q0 -18 18 -18 q18 0 18 18'/%3E%3C/svg%3E"),
    /* 左下：書類・チェックアイコン */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(20,184,166,0.15)' stroke-width='2' stroke-linecap='round'%3E%3Crect x='40' y='40' width='70' height='90' rx='4'/%3E%3Cline x1='52' y1='65' x2='98' y2='65'/%3E%3Cline x1='52' y1='80' x2='98' y2='80'/%3E%3Cline x1='52' y1='95' x2='80' y2='95'/%3E%3Ccircle cx='130' cy='140' r='20'/%3E%3Cpath d='M120 140 l8 8 l14 -14' stroke='rgba(20,184,166,0.2)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 15% 50%, rgba(20,184,166,0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(30,91,206,0.22) 0%, transparent 45%),
    linear-gradient(135deg, #11263a 0%, #1a3f70 55%, #0d3350 100%) !important;
  background-size:
    350px 350px,
    280px 280px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-position:
    right -40px top -40px,
    left -30px bottom -30px,
    center center,
    center center,
    center center !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}
html body section.join_kaiketsu *,
html body .join_kaiketsu * {
  color: inherit !important;
}
html body section.join_kaiketsu h2,
html body section.join_kaiketsu h3,
html body .join_kaiketsu h2,
html body .join_kaiketsu h3 {
  color: #fff !important;
}

/* ------------------------------------------------------------------
   2. easy-steps セクション — 薄いライトブルー背景
   ------------------------------------------------------------------ */
html body .easy-steps,
html body section.easy-steps {
  background-color: #f0f7ff !important;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(30,91,206,0.06) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(20,184,166,0.06) 0%, transparent 50%) !important;
}

/* ------------------------------------------------------------------
   3. top_pickup / top_testimonials / top-articles — 微妙な背景差分
   ------------------------------------------------------------------ */
html body .top_pickup,
html body section.top_pickup {
  background-color: #f8fafc !important;
}
html body .top_testimonials,
html body section.top_testimonials {
  background-color: #f0fdf4 !important;
}
html body .top-articles,
html body section.top-articles {
  background-color: #fafafa !important;
}

/* ------------------------------------------------------------------
   4. セクション padding 削減（全体の余白詰め）
   ------------------------------------------------------------------ */
html body .top_pickup,
html body .top_testimonials,
html body .top-articles,
html body .easy-steps,
html body .join_kaiketsu,
html body .top-consultation {
  padding-top:    clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

/* ------------------------------------------------------------------
   5. ロゴ差替え — ニュース・士業カード系の全画像
   ------------------------------------------------------------------ */
/* info-article-card */
html body .info-article-card__thumb-wrap img,
html body .info-article-card__thumb {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  background: #f0f7ff !important;
  padding: 16px !important;
}
/* articles-card */
html body .articles-card-thumb img,
html body .articles-card-thumb {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  background: #f0f7ff !important;
  padding: 16px !important;
}
/* ys-post-card / generic post thumbnails in article loops */
html body .ys-post-card__thumb img,
html body .post-card__thumb img,
html body .entry-card-thumb img {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  background: #f0f7ff !important;
  padding: 12px !important;
}

/* ------------------------------------------------------------------
   6. タイポグラフィ改善 — セクションタイトル・サブ
   ------------------------------------------------------------------ */
html body .sn-about__section-title,
html body .sn-about__mission-title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
html body .sn-about__section-sub {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin-top: 6px !important;
}

/* ------------------------------------------------------------------
   7. pro-card 余白詰め
   ------------------------------------------------------------------ */
html body .pro-card__info {
  padding: 8px 10px 4px !important;
  gap: 2px !important;
}
html body .pro-card__office {
  font-size: 0.72rem !important;
  margin-bottom: 0 !important;
}
html body .pro-card__name {
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}
html body .pro-card__body {
  padding: 0 10px 10px !important;
}

/* ------------------------------------------------------------------
   8. sn-profile max-width・余白
   ------------------------------------------------------------------ */
html body .sn-profile__content-wrapper {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .sn-profile__section {
  padding: 16px 20px !important;
  margin-bottom: 0 !important;
}
html body .sn-profile__section-title {
  font-size: 1rem !important;
  padding-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ------------------------------------------------------------------
   9. pro-cta-band — 明示的ダーク背景（競合解消）
   ------------------------------------------------------------------ */
html body .pro-cta-band,
html body section.pro-cta-band {
  background-color: #0f2744 !important;
  background-image:
    radial-gradient(circle at 20% 60%, rgba(20,184,166,0.20) 0%, transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(30,91,206,0.25) 0%, transparent 50%) !important;
  color: #fff !important;
}
html body .pro-cta-band *,
html body section.pro-cta-band * {
  color: #fff !important;
}

/* ------------------------------------------------------------------
   10. content-wrapper 全体の横幅余白
   ------------------------------------------------------------------ */
html body .content-wrapper,
html body .sn-page-content .container {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* ------------------------------------------------------------------
   11. ヒーローエリア padding 調整
   ------------------------------------------------------------------ */
html body .sn-about__hero {
  padding-top:    clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}
html body .sn-about__section-head {
  margin-bottom: clamp(24px, 3vw, 40px) !important;
}

/* ------------------------------------------------------------------
   12. .entry-content h2 → sn-profile__section-title リセット
       .entry-content h2 が border-left / margin-top / padding を付加するため打ち消す
   ------------------------------------------------------------------ */
html body .entry-content h2.sn-profile__section-title,
html body .sn-profile__section h2.sn-profile__section-title,
html body .sn-profile__section-title {
  margin-top:    0 !important;
  margin-bottom: 10px !important;
  padding:       0 0 10px !important;
  background:    none !important;
  border-left:   none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #eef2ff !important;
}

/* ------------------------------------------------------------------
   13. sn-profile__section padding-top を最小化（上部余白詰め）
   ------------------------------------------------------------------ */
html body .sn-profile__section,
html body .entry-content .sn-profile__section,
html body .single_profile .sn-profile__section {
  padding-top: 12px !important;
}

/* sn-profile__body 内の gap も縮小 */
html body .sn-profile__body,
html body .entry-content .sn-profile__body {
  gap: 12px !important;
}
html body .sn-profile__body-grid,
html body .entry-content .sn-profile__body-grid {
  gap: 12px !important;
}
html body .sn-profile__main-col,
html body .sn-profile__side-col {
  gap: 12px !important;
}

/* ------------------------------------------------------------------
   14. publish-cta：背景装飾を強化（大きな輪・SVGドット）
   ------------------------------------------------------------------ */
/* 右上の大きな輝き */
html body .publish-cta::before {
  content: "" !important;
  position: absolute !important;
  top: -100px !important;
  right: -100px !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(30,91,206,0.22) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border: none !important;
}
/* 左下の輝き */
html body .publish-cta::after {
  content: "" !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -80px !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(20,184,166,0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: none !important;
}
/* SVGドットグリッドパターン（白点） */
html body .publish-cta {
  background-image:
    radial-gradient(circle at 15% 50%, rgba(20,184,166,0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(30,91,206,0.22) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #11263a 0%, #1a3f70 55%, #0d3350 100%) !important;
  background-size: auto, auto, 24px 24px, 100% 100% !important;
}
html body .publish-cta__inner {
  position: relative !important;
  z-index: 2 !important;
}

/* === 旧パッチ 15/16/17 削除済み（下部の TOP-CONSULTATION 統合ブロックに移行） === */

/* ------------------------------------------------------------------
   18. pro-badgers（士業検索）：5×2 グリッドに強制
       flex の 1段目5枚/2段目4枚+1枚を CSS Grid で完全5×2に
   ------------------------------------------------------------------ */
html body .pro-badgers,
html body ul.pro-badgers,
html body #kensaku .pro-badgers,
html body .search_cat .pro-badgers {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 1280px !important;
  box-sizing: border-box !important;
}
/* flex の nth-child 幅指定を完全無効化 */
html body .pro-badgers .pro-badgers_list,
html body .pro-badgers_list:nth-child(-n+5),
html body .pro-badgers_list:nth-child(n+6) {
  flex: unset !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* レスポンシブ */
@media screen and (max-width: 1024px) {
  html body .pro-badgers {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
}
@media screen and (max-width: 768px) {
  html body .pro-badgers {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
  }
}
@media screen and (max-width: 480px) {
  html body .pro-badgers {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   19. pro-card：空バッジ非表示・事務所名上部余白を最小化
   ------------------------------------------------------------------ */
/* バッジが空（site 内のダミーや投稿側で士業未設定）の場合は非表示 */
html body .pro-card__badge:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}
/* 事務所名・名前のパディングを最小化（カード上端に寄せる） */
html body .pro-card .pro-card__info,
html body .sn-page-content--sigyoulist .pro-card .pro-card__info,
html body .pro-card-list .pro-card .pro-card__info {
  padding: 10px 12px 6px !important;
  margin: 0 !important;
}
/* バッジ：上部に十分な余白を確保（カード上端から離す） */
html body .pro-card .pro-card__badge,
html body .pro-card-list .pro-card .pro-card__badge {
  padding: 16px 14px 6px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* === 旧パッチ 20 削除済み === */

/* ------------------------------------------------------------------
   21. pro-badgers：全カードの高さを統一（バランス修正）
       grid-template-rows: 1fr を削除して content height にする
   ------------------------------------------------------------------ */
/* 行は auto（コンテンツ高）に変更 */
html body .pro-badgers,
html body ul.pro-badgers,
html body #kensaku .pro-badgers,
html body .search_cat .pro-badgers {
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
}
/* li：グリッドセル幅いっぱい・自然な高さ */
html body .pro-badgers .pro-badgers_list {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
/* カード本体（<a>）：li 幅いっぱいに広げる ★これが抜けていた★ */
html body .pro-badger-card {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* タグ（士業名）：上部固定 */
html body .pro-badger-card .tag {
  flex-shrink: 0 !important;
  padding: 12px 8px !important;
  font-size: 0.875rem !important;
}
/* トピックリスト：内側の余白を均等に */
html body .pro-badger-topics {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 12px 10px !important;
  gap: 4px !important;
}
html body .pro-badger-topics li {
  flex: 0 0 auto !important;
  padding: 6px 0 !important;
  font-size: 0.875rem !important;
}

/* === 旧パッチ 22/23/24/25 削除済み === */

/* ############################################################################
   ★ TOP-CONSULTATION 統合ブロック（リセット & 再構築）
   このブロックが最終真実。これより上の sn-consult-* / top-consultation 系
   ルールは全て上書きする。
   構造：
     section.top-consultation
       .content-wrapper
         .sn-consult-tabs > .sn-consult-tabs__list (10タブ → 5×2)
         .sn-consult-section--wide  (6カラム N行)
         .sn-consult-pair
           .sn-consult-section--compact × 2  (3カラム 横並び)
         .sn-consult-section--medium (4カラム 1行)
         .sn-consult-pair
           .sn-consult-section--mini × 2  (2カラム 横並び)
   全カード: 160 × 160px 正方形固定
   ############################################################################ */

/* ===== 1. タブバー（10士業）：5×2 グリッド ===== */
html body section.top-consultation .sn-consult-tabs__list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px 16px !important;
  list-style: none !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
  max-width: 1100px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body section.top-consultation .sn-consult-tabs__item {
  list-style: none !important;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body section.top-consultation .sn-consult-tabs__item .tag {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  transition: transform 0.15s, opacity 0.2s !important;
  margin: 0 !important;
}
html body section.top-consultation .sn-consult-tabs__item .tag:hover {
  transform: translateY(-2px) !important;
  opacity: 0.92 !important;
}

/* ===== 2. セクションブロック共通 ===== */
html body section.top-consultation .content-wrapper > .sn-consult-section,
html body section.top-consultation .content-wrapper > .sn-consult-pair {
  margin: 0 auto 72px !important;
  padding: 0 !important;
  max-width: 1100px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: none !important;
}

/* ===== 3. セクションヘッダー（士業バッジ + 横線） ===== */
html body section.top-consultation .sn-consult-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  width: 100% !important;
}
html body section.top-consultation .sn-consult-section__head::before,
html body section.top-consultation .sn-consult-section__head::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #d1d5db !important;
  max-width: 280px !important;
  display: block !important;
}
html body section.top-consultation .sn-consult-section__head .tag {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  margin: 0 !important;
}

/* ===== 4. カードリスト：CSS Grid 統一（160×160で全領域に収まる） ===== */
html body section.top-consultation .sn-consult-section__list {
  display: grid !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 28px 20px !important;
  row-gap: 28px !important;
  column-gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: none !important;
  grid-auto-rows: 160px !important;
}

/* セクションタイプ別の列数（カード幅 160px 固定） */
html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list {
  grid-template-columns: repeat(6, 160px) !important;
}
html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
  grid-template-columns: repeat(3, 160px) !important;
}
html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list {
  grid-template-columns: repeat(4, 160px) !important;
}
html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
  grid-template-columns: repeat(2, 160px) !important;
}

/* ===== 5. カード（li + a）：160 × 160 完全固定 ===== */
html body section.top-consultation li.sn-consult-grid__item {
  list-style: none !important;
  width: 160px !important;
  height: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  flex: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  transform: none !important;
}
html body section.top-consultation li.sn-consult-grid__item > a {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 22px 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* space-between：アイコンを上端・ラベルを下端に均等配置（カードごとに余白統一） */
  justify-content: space-between !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.06) !important;
  text-decoration: none !important;
  color: #1a202c !important;
  text-align: center !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
}
html body section.top-consultation li.sn-consult-grid__item > a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(17,38,58,0.12) !important;
  border-color: rgba(30,91,206,0.20) !important;
  background: #fff !important;
}

/* アイコン */
html body section.top-consultation .sn-consult-icon {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
html body section.top-consultation .sn-consult-icon img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}
/* ラベル */
html body section.top-consultation .sn-consult-label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-align: center !important;
  color: #1a202c !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100% !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* ===== 6. ペア（2セクション横並び） ===== */
html body section.top-consultation .sn-consult-pair {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 48px !important;
  width: 100% !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}
/* ペア内セクション共通 */
html body section.top-consultation .sn-consult-pair > .sn-consult-section {
  margin: 0 !important;
  padding: 0 !important;
}
/* compact ペア（税理士+行政書士）：3列×160px+2×20gap = 520px */
html body section.top-consultation .sn-consult-pair > .sn-consult-section--compact {
  flex: 0 0 520px !important;
  width: 520px !important;
  max-width: 520px !important;
}
/* mini ペア：2列×160px+1×20gap = 340px */
html body section.top-consultation .sn-consult-pair > .sn-consult-section--mini {
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
}
/* ペア内ヘッダー横線：セクション幅に収める */
html body section.top-consultation .sn-consult-pair .sn-consult-section__head::before,
html body section.top-consultation .sn-consult-pair .sn-consult-section__head::after {
  max-width: 100px !important;
}

/* ===== 7. 旧 triple-pair の独自 grid を完全無効化 ===== */
html body section.top-consultation .sn-consult-pair--triple {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
}

/* ===== 8. レスポンシブ ===== */
@media screen and (max-width: 1200px) {
  /* タブ：5列維持・縮小 */
  html body section.top-consultation .sn-consult-tabs__item .tag {
    padding: 10px 6px !important;
    font-size: 0.8125rem !important;
  }
  /* カード 160px */
  html body section.top-consultation li.sn-consult-grid__item {
    width: 160px !important;
    height: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a {
    padding: 24px 8px !important;
  }
  html body section.top-consultation .sn-consult-section__list { grid-auto-rows: 160px !important; }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list {
    grid-template-columns: repeat(6, 160px) !important;
  }
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 160px) !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list {
    grid-template-columns: repeat(4, 160px) !important;
  }
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 160px) !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section--compact {
    flex: 0 0 500px !important;
    width: 500px !important;
    max-width: 500px !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section--mini {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
  }
}
@media screen and (max-width: 900px) {
  /* ペア → 縦並びへ */
  html body section.top-consultation .sn-consult-pair {
    flex-wrap: wrap !important;
    gap: 48px !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section--compact,
  html body section.top-consultation .sn-consult-pair > .sn-consult-section--mini {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
}
@media screen and (max-width: 768px) {
  /* タブ：3列に */
  html body section.top-consultation .sn-consult-tabs__list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  /* カード 120px */
  html body section.top-consultation li.sn-consult-grid__item {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }
  html body section.top-consultation .sn-consult-section__list {
    grid-auto-rows: 120px !important;
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list {
    grid-template-columns: repeat(3, 120px) !important;
  }
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 120px) !important;
  }
  html body section.top-consultation .sn-consult-icon { width: 44px !important; height: 44px !important; }
  html body section.top-consultation .sn-consult-icon img { width: 36px !important; height: 36px !important; }
  html body section.top-consultation .sn-consult-label { font-size: 0.75rem !important; }
  /* ── aをliの高さ（120px）に合わせ、min-height競合を完全排除 ── */
  html body section.top-consultation .sn-consult-grid__item a {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}
@media screen and (max-width: 480px) {
  html body section.top-consultation .sn-consult-tabs__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html body section.top-consultation li.sn-consult-grid__item {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
  html body section.top-consultation .sn-consult-section__list { grid-auto-rows: 100px !important; }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list {
    grid-template-columns: repeat(3, 100px) !important;
  }
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 100px) !important;
  }
  /* ── aをliの高さ（100px）に合わせ、min-height競合を完全排除 ── */
  html body section.top-consultation .sn-consult-grid__item a {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

/* ############################################################################
   ★ SN-PROFILE：登録士業詳細ページ レイアウト再構成
   2カラム（メイン2/3 + 右サイド1/3 sticky）で縦の長さ短縮
   ############################################################################ */

/* ========== body-grid：2カラム 2/3 + 1/3 ========== */
html body .single_profile .sn-profile__body-grid,
html body .entry-content .sn-profile__body-grid,
html body .sn-profile__body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 24px !important;
  align-items: start !important;
  margin: 0 auto !important;
  max-width: 1100px !important;
  width: 100% !important;
}

/* メインカラム：縦積み */
html body .sn-profile__main-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  min-width: 0 !important;
}

/* サイドカラム：sticky で常時表示 */
html body .sn-profile__side-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  position: sticky !important;
  top: 80px !important;
  align-self: start !important;
  min-width: 0 !important;
}

/* ========== セクションカード ========== */
html body .sn-profile__section {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  padding: 18px 22px !important;
  margin: 0 !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
/* 特異度 (0,0,2,2) — line 11311 の (0,0,2,0) を上回り確実に適用 */
html body .sn-profile__main-col .sn-profile__section,
html body .sn-profile__side-col .sn-profile__section {
  margin-bottom: 24px !important;
}
html body .sn-profile__main-col .sn-profile__section:last-child,
html body .sn-profile__side-col .sn-profile__section:last-child {
  margin-bottom: 0 !important;
}

/* セクションタイトル（h2）：.entry-content h2 をリセット */
html body .entry-content h2.sn-profile__section-title,
html body .sn-profile__section h2.sn-profile__section-title,
html body .sn-profile__section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  background: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #eef2ff !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  letter-spacing: 0 !important;
}
html body .sn-profile__section-title svg {
  flex-shrink: 0 !important;
  color: #3b5bdb !important;
}

/* ========== 本文テキスト ========== */
html body .sn-profile__pr-text,
html body .sn-profile__expert-text {
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
  color: #374151 !important;
  margin: 0 !important;
}
/* セクション内の <p> 先頭マージンを除去 */
html body .sn-profile__pr-text > p:first-child,
html body .sn-profile__expert-text > p:first-child,
html body .sn-profile__section .sn-profile__pr-text p:first-child,
html body .sn-profile__section .sn-profile__expert-text p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body .sn-profile__pr-text p,
html body .sn-profile__expert-text p {
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}
html body .sn-profile__pr-text p,
html body .sn-profile__expert-text p {
  margin: 0 0 0.75em !important;
}
html body .sn-profile__pr-text p:last-child,
html body .sn-profile__expert-text p:last-child {
  margin-bottom: 0 !important;
}
html body .sn-profile__pr-text ul,
html body .sn-profile__expert-text ul,
html body .sn-profile__pr-text ol,
html body .sn-profile__expert-text ol {
  margin: 0.5em 0 0.75em 1.5em !important;
  padding: 0 !important;
}
html body .sn-profile__pr-text li,
html body .sn-profile__expert-text li {
  margin: 0.25em 0 !important;
  line-height: 1.7 !important;
}

/* ========== 資格・経歴リスト ========== */
html body .sn-profile__career-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .sn-profile__career-row {
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
html body .sn-profile__career-row:last-child {
  border-bottom: none !important;
}
html body .sn-profile__career-row dt {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin: 0 !important;
  padding-top: 2px !important;
}
html body .sn-profile__career-row dd {
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: #1f2937 !important;
  margin: 0 !important;
  word-break: break-word !important;
}
html body .sn-profile__career-row dd ul {
  margin: 0 0 0 1.2em !important;
  padding: 0 !important;
}
html body .sn-profile__career-row dd li {
  margin: 0.15em 0 !important;
}
html body .sn-profile__hp-link {
  color: #1e5bce !important;
  text-decoration: underline !important;
  word-break: break-all !important;
}

/* ========== タグクラウド（相談内容・対応エリア） ========== */
html body .sn-profile__tag-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
html body .sn-profile__tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #dbeafe !important;
  transition: background 0.2s !important;
}
html body .sn-profile__tag:hover {
  background: #dbeafe !important;
  color: #1e3a8a !important;
}
html body .sn-profile__tag--area {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}
html body .sn-profile__tag--area:hover {
  background: #dcfce7 !important;
  color: #166534 !important;
}

/* ========== お知らせリスト ========== */
html body .sn-profile__news-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .sn-profile__news-item {
  padding: 10px 0 !important;
  border-bottom: 1px dashed #e5e7eb !important;
}
html body .sn-profile__news-item:last-child {
  border-bottom: none !important;
}
html body .sn-profile__news-date {
  display: block !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin-bottom: 4px !important;
}
html body .sn-profile__news-link {
  font-size: 0.875rem !important;
  color: #1e3a8a !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
}
html body .sn-profile__news-link:hover {
  text-decoration: underline !important;
}

/* ========== 地図 ========== */
html body .sn-profile__map-wrap {
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
html body .sn-profile__map-wrap iframe {
  width: 100% !important;
  height: 320px !important;
  border: 0 !important;
  display: block !important;
}

/* ========== サイドCTA ========== */
html body .sn-profile__side-cta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #1e5bce 0%, #14b8a6 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(30,91,206,0.18) !important;
}
html body .sn-profile__side-cta .sn-profile__cta-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: #1e3a8a !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
html body .sn-profile__side-cta .sn-profile__cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}
html body .sn-profile__side-cta .sn-profile__cta-sub {
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* ========== レスポンシブ：960px以下で1カラム ========== */
@media screen and (max-width: 960px) {
  html body .sn-profile__body-grid {
    grid-template-columns: 1fr !important;
  }
  html body .sn-profile__side-col {
    position: static !important;
    top: auto !important;
  }
}
@media screen and (max-width: 640px) {
  html body .sn-profile__section {
    padding: 14px 16px !important;
  }
  html body .sn-profile__career-row {
    grid-template-columns: 70px 1fr !important;
    gap: 8px !important;
  }
}

/* ############################################################################
   ★ 追加修正：背景イラスト + prof-card 高さ + 士業タブパツパツ
   ############################################################################ */

/* ===== A. publish-cta：事務所・士業の具体的SVG背景 ===== */
html body section.publish-cta,
html body .publish-cta {
  background-color: #11263a !important;
  background-image:
    /* 右上：ビル群シルエット */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='rgba(255,255,255,0.06)'%3E%3Crect x='20' y='80' width='30' height='100'/%3E%3Crect x='55' y='50' width='35' height='130'/%3E%3Crect x='95' y='90' width='25' height='90'/%3E%3Crect x='125' y='30' width='40' height='150'/%3E%3Crect x='170' y='70' width='25' height='110'/%3E%3Cg fill='rgba(255,255,255,0.10)'%3E%3Crect x='62' y='60' width='4' height='6'/%3E%3Crect x='72' y='60' width='4' height='6'/%3E%3Crect x='82' y='60' width='4' height='6'/%3E%3Crect x='62' y='75' width='4' height='6'/%3E%3Crect x='72' y='75' width='4' height='6'/%3E%3Crect x='82' y='75' width='4' height='6'/%3E%3Crect x='132' y='40' width='4' height='6'/%3E%3Crect x='142' y='40' width='4' height='6'/%3E%3Crect x='152' y='40' width='4' height='6'/%3E%3Crect x='132' y='55' width='4' height='6'/%3E%3Crect x='142' y='55' width='4' height='6'/%3E%3Crect x='152' y='55' width='4' height='6'/%3E%3C/g%3E%3C/svg%3E"),
    /* 左下：書類アイコン */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='2'%3E%3Crect x='30' y='50' width='80' height='100' rx='4'/%3E%3Cline x1='45' y1='75' x2='95' y2='75'/%3E%3Cline x1='45' y1='90' x2='95' y2='90'/%3E%3Cline x1='45' y1='105' x2='80' y2='105'/%3E%3Cline x1='45' y1='120' x2='95' y2='120'/%3E%3Ccircle cx='130' cy='130' r='12'/%3E%3Cpath d='M125 130 l4 4 l8 -8'/%3E%3C/svg%3E"),
    /* グラデーション本体 */
    linear-gradient(135deg, #11263a 0%, #1a3f70 55%, #0d3350 100%) !important;
  background-size:
    400px 400px,
    320px 320px,
    100% 100% !important;
  background-position:
    right -50px top -50px,
    left -40px bottom -40px,
    center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* ===== B. 士業の声（top_testimonials）：人物・対話SVG背景 ===== */
html body section.top_testimonials,
html body .top_testimonials {
  background-color: #f0fdf4 !important;
  background-image:
    /* 左：吹き出し */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(34,197,94,0.18)' stroke-width='2'%3E%3Cpath d='M30 50 q0 -15 15 -15 h70 q15 0 15 15 v40 q0 15 -15 15 h-50 l-20 15 v-15 h0 q-15 0 -15 -15 z'/%3E%3Ccircle cx='60' cy='70' r='3' fill='rgba(34,197,94,0.18)'/%3E%3Ccircle cx='80' cy='70' r='3' fill='rgba(34,197,94,0.18)'/%3E%3Ccircle cx='100' cy='70' r='3' fill='rgba(34,197,94,0.18)'/%3E%3C/svg%3E"),
    /* 右：人物アイコン */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(30,91,206,0.15)' stroke-width='2'%3E%3Ccircle cx='100' cy='75' r='25'/%3E%3Cpath d='M50 170 q0 -45 50 -45 q50 0 50 45'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #ecfeff 100%) !important;
  background-size:
    280px 280px,
    260px 260px,
    100% 100% !important;
  background-position:
    left 5% top 10%,
    right 5% bottom 10%,
    center center !important;
  background-repeat: no-repeat !important;
}

/* ===== C. easy-steps：ステップ・矢印SVG背景 ===== */
html body section.easy-steps,
html body .easy-steps {
  background-color: #f0f7ff !important;
  background-image:
    /* 右上：チェックリスト */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(30,91,206,0.15)' stroke-width='2'%3E%3Crect x='40' y='30' width='120' height='140' rx='6'/%3E%3Cpath d='M55 60 l8 8 l16 -16' stroke='rgba(34,197,94,0.35)'/%3E%3Cline x1='95' y1='65' x2='150' y2='65'/%3E%3Cpath d='M55 95 l8 8 l16 -16' stroke='rgba(34,197,94,0.35)'/%3E%3Cline x1='95' y1='100' x2='150' y2='100'/%3E%3Cpath d='M55 130 l8 8 l16 -16' stroke='rgba(34,197,94,0.35)'/%3E%3Cline x1='95' y1='135' x2='150' y2='135'/%3E%3C/svg%3E"),
    /* 左下：矢印パス */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(20,184,166,0.18)' stroke-width='2.5'%3E%3Ccircle cx='40' cy='100' r='15'/%3E%3Cline x1='55' y1='100' x2='85' y2='100' stroke-dasharray='4'/%3E%3Ccircle cx='100' cy='100' r='15'/%3E%3Cline x1='115' y1='100' x2='145' y2='100' stroke-dasharray='4'/%3E%3Ccircle cx='160' cy='100' r='15'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
  background-size:
    300px 300px,
    320px 200px,
    100% 100% !important;
  background-position:
    right 4% top 8%,
    left 5% bottom 8%,
    center center !important;
  background-repeat: no-repeat !important;
}

/* ===== D. about-profession prof-card：3カラム + 同高さ揃え ===== */
html body .sn-page-content--about-profession .about-prof__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
html body .sn-page-content--about-profession .about-prof__grid > .prof-card,
html body .sn-page-content--about-profession article.prof-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}
html body .sn-page-content--about-profession .prof-card .prof-card__header {
  padding: 18px 20px 8px !important;
  flex-shrink: 0 !important;
}
html body .sn-page-content--about-profession .prof-card .prof-card__body {
  padding: 12px 20px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .sn-page-content--about-profession .prof-card .prof-card__body .prof-card__desc {
  flex: 0 0 auto !important;
}
html body .sn-page-content--about-profession .prof-card .prof-card__body .prof-card__duties {
  flex: 1 1 auto !important;
}
html body .sn-page-content--about-profession .prof-card .prof-card__footer {
  padding: 12px 20px 20px !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}
@media screen and (max-width: 960px) {
  html body .sn-page-content--about-profession .about-prof__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media screen and (max-width: 640px) {
  html body .sn-page-content--about-profession .about-prof__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== E. 士業タブ（バッジ）：パツパツ解消・余裕padding ===== */
/* about-profession ページの shigyo_mark バッジ（・士業名・形式） */
html body .sn-page-content--about-profession .shigyo_mark,
html body .prof-card .shigyo_mark,
html body .prof-card__header .shigyo_mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
  color: #fff !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

/* ############################################################################
   ★ 追加：専門家からのメッセージ（info-article-card）コンパクト化
   ★ 追加：お問い合わせフォーム クリーン化
   ############################################################################ */

/* ===== F. info-article-card：4列・コンパクト・サムネ縮小 ===== */
html body .info-articles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .info-article-card {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
html body .info-article-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;
}
/* サムネを 16:9 から 4:3 に → 縦が短く */
html body .info-article-card__thumb-wrap {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: 180px !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #f0f7ff !important;
  position: relative !important;
}
html body .info-article-card__thumb-wrap img,
html body .info-article-card__thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
/* 本文エリア：パディング縮小 */
html body .info-article-card__body {
  padding: 12px 14px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
html body .info-article-card__title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .info-article-card__date {
  font-size: 0.6875rem !important;
  color: #94a3b8 !important;
}
html body .info-article-card__cat {
  font-size: 0.625rem !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  html body .info-articles-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (max-width: 768px) {
  html body .info-articles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 480px) {
  html body .info-articles-grid { grid-template-columns: 1fr !important; }
}

/* ===== G. お問い合わせフォーム：ダーク背景撤去 → クリーン基調 ===== */
/* WPCF7 フォーム本体および任意のラッパーから濃い背景を全て除去 */
html body .contact-form-card__body .wpcf7,
html body .contact-form-card__body .wpcf7-form,
html body .contact-form-card__form-wrap,
html body .contact-form-card__form-wrap > div,
html body .contact-form-card__form-wrap form,
html body .contact-form-card__form-wrap form > p,
html body .contact-form-card__form-wrap form > div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
/* フィールドラベル：太字・色 */
html body .wpcf7-form p,
html body .wpcf7-form label {
  color: #1f2937 !important;
  background: transparent !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  display: block !important;
}
/* セクション間の上下余白 */
html body .wpcf7-form p {
  margin-bottom: 18px !important;
}
/* 入力欄：明るく・大きめ・統一 */
html body .wpcf7-form input[type=text],
html body .wpcf7-form input[type=email],
html body .wpcf7-form input[type=tel],
html body .wpcf7-form input[type=url],
html body .wpcf7-form input[type=number],
html body .wpcf7-form textarea,
html body .wpcf7-form select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  background: #fff !important;
  color: #1f2937 !important;
  box-sizing: border-box !important;
  margin-top: 6px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
html body .wpcf7-form input:focus,
html body .wpcf7-form textarea:focus,
html body .wpcf7-form select:focus {
  outline: none !important;
  border-color: #1e5bce !important;
  box-shadow: 0 0 0 3px rgba(30,91,206,0.12) !important;
}
html body .wpcf7-form textarea {
  min-height: 160px !important;
  resize: vertical !important;
}
/* ラジオ・チェックボックス */
html body .wpcf7-form .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 16px 0 0 !important;
  color: #1f2937 !important;
}
html body .wpcf7-form .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
/* 必須マーク */
html body .wpcf7-form .wpcf7-validates-as-required + .required-mark,
html body .wpcf7-form .required {
  color: #dc2626 !important;
  margin-left: 4px !important;
}
/* サブミットボタン：inline-block + 親 text-align で確実中央寄せ */
html body .wpcf7-form input[type=submit],
html body .wpcf7-form button[type=submit] {
  display: inline-block !important;
  width: 80% !important;
  max-width: 460px !important;
  min-width: 280px !important;
  margin: 0 auto !important;
  padding: 16px 40px !important;
  background: linear-gradient(135deg, #1e5bce 0%, #14b8a6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(30,91,206,0.25) !important;
  transition: transform 0.15s, box-shadow 0.2s !important;
  text-align: center !important;
  float: none !important;
}
html body .wpcf7-form input[type=submit]:hover,
html body .wpcf7-form button[type=submit]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(30,91,206,0.32) !important;
  filter: brightness(1.05) !important;
}
/* サブミット親要素：text-align center のみ。flex は使わない（無駄な高さ防止） */
html body .wpcf7-form p:has(input[type=submit]),
html body .wpcf7-form p:has(button[type=submit]),
html body .wpcf7-form div:has(input[type=submit]),
html body .wpcf7-form div:has(button[type=submit]) {
  text-align: center !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}
/* フォーム全体・本文：左寄せ系の上書き防止 */
html body .contact-form-card__body .wpcf7-form,
html body .contact-form-card__body .wpcf7-form * {
  box-sizing: border-box !important;
}
/* フォーム自体は中央寄せ */
html body .contact-form-card__body .wpcf7-form {
  text-align: left !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}
/* フォームカード本体：パディング適度 */
html body .contact-form-card__body {
  padding: 24px 28px 32px !important;
  background: #fff !important;
}

/* ---- END COMPREHENSIVE PATCH ---- */

/* ############################################################################
   ★ FINAL FIX：カード重なり & ペアずれ 完全解消
   ############################################################################ */

/* === 1. カード<a>に明示的な高さ（100%依存を廃止） === */
html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 20px 10px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.06) !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* === 2. <li>：高さ固定・overflow visible でラベル見切れ防止 === */
html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  overflow: visible !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === 3. グリッド：row-gap を確実に設定 === */
html body section.top-consultation ul.sn-consult-section__list {
  row-gap: 20px !important;
  column-gap: 20px !important;
  grid-auto-rows: 160px !important;
}

/* === 4. ペア：GRID 明示的 nth-child 配置で確実に同行 === */
html body section.top-consultation div.sn-consult-pair,
html body div.sn-consult-pair {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: center !important;
  gap: 40px !important;
  margin: 0 auto 48px !important;
  width: 100% !important;
}

/* ペア内 1番目：grid 1行 1列 強制 */
html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(1),
html body div.sn-consult-pair > section.sn-consult-section:nth-child(1) {
  grid-row: 1 / 2 !important;
  grid-column: 1 / 2 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* ペア内 2番目：grid 1行 2列 強制 */
html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(2),
html body div.sn-consult-pair > section.sn-consult-section:nth-child(2) {
  grid-row: 1 / 2 !important;
  grid-column: 2 / 3 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* === 単独 section（ペア外）：上下に大きな余白を強制 === */
html body section.top-consultation > .content-wrapper > section.sn-consult-section {
  margin-top: 80px !important;
  margin-bottom: 48px !important;
}
html body section.top-consultation > .content-wrapper > section.sn-consult-section:first-of-type {
  margin-top: 24px !important;
}

/* === 5. セクションタイトル（badge）の天地バランス調整 === */
html body section.top-consultation section.sn-consult-section {
  margin-top: 80px !important;
  margin-bottom: 48px !important;
}
html body section.top-consultation section.sn-consult-section:first-of-type {
  margin-top: 24px !important;
}
/* ペア div も上下バランス */
html body section.top-consultation div.sn-consult-pair {
  margin-top: 80px !important;
  margin-bottom: 48px !important;
}
/* ペア内のセクションは独自の天地余白を持たない */
html body section.top-consultation div.sn-consult-pair > section.sn-consult-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* セクションヘッダー（badge ライン）：badge 自身は下にだけ余白
   （上の余白は section margin-top + 余白で確保） */
html body section.top-consultation .sn-consult-section__head {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
  padding: 0 !important;
}

/* mini セクション幅：2列×160px + gap20px = 340px */
html body section.top-consultation div.sn-consult-pair > section.sn-consult-section--mini,
html body div.sn-consult-pair > section.sn-consult-section--mini {
  width: 340px !important;
  max-width: 340px !important;
}

/* compact セクション幅：3列×160px + 2×gap20px = 520px */
html body section.top-consultation div.sn-consult-pair > section.sn-consult-section--compact,
html body div.sn-consult-pair > section.sn-consult-section--compact {
  width: 520px !important;
  max-width: 520px !important;
}

/* ============================================================
   ★ 追加修正: ロゴ・余白・セクションタイトル
   ============================================================ */

/* 1. info-article サムネイル → 相談ナビロゴに差替え */
html body .info-article-card__thumb-wrap img,
html body .info-article-card .info-article-card__thumb {
  content: url('../asset/images/Logo-SoudanNavi.png') !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 20px !important;
  background: #f0f7ff !important;
  width: 100% !important;
  height: 100% !important;
}

/* 2. pro-card バッジ下の余白を追加（下がきつい） */
html body .sn-page-content--sigyoulist .pro-card .pro-card__badge,
html body .pro-card .pro-card__badge {
  padding: 16px 14px 10px !important;
}

/* 4. CTA ボタン下の余白 */
html body .sn-profile__cta-wrap {
  margin-bottom: 20px !important;
}

/* 5. 住所＋地図エリア（CTA下） */
html body .sn-profile__address-map {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .sn-profile__access--inline {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.875rem !important;
  color: #4b5563 !important;
  margin: 0 !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
}
html body .sn-profile__map-wrap--hero {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 180px !important;
}
html body .sn-profile__map-wrap--hero iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* 6. 受付時間・定休日（写真下）：縦並びスタイル */
html body .sn-profile__hours--photo {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  font-size: 0.8125rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body .sn-profile__hours--photo dt {
  color: #6b7280 !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
}
html body .sn-profile__hours--photo dt:first-child {
  margin-top: 0 !important;
}
html body .sn-profile__hours--photo dd {
  color: #1f2937 !important;
  margin: 0 !important;
  display: block !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* 3. sn-profile h2 タイトル上下余白を完全リセット */
html body .sn-profile__section > h2.sn-profile__section-title,
html body .entry-content .sn-profile__section > h2.sn-profile__section-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
html body .sn-profile__section h2.sn-profile__section-title::before,
html body .sn-profile__section h2.sn-profile__section-title::after,
html body .entry-content .sn-profile__section h2::before,
html body .entry-content .sn-profile__section h2::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* sn-profile セクション本文：先頭要素の上余白を完全除去 */
html body .sn-profile__section .sn-profile__pr-text,
html body .sn-profile__section .sn-profile__expert-text,
html body .sn-profile__section .sn-profile__career-grid,
html body .sn-profile__section .sn-profile__tag-cloud {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body .sn-profile__section .sn-profile__pr-text > *:first-child,
html body .sn-profile__section .sn-profile__expert-text > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ystandard テーマが .entry-content 内 h2 に付与する margin-top を強制リセット */
html body .sn-profile .entry-content h2,
html body .entry-content .sn-profile h2,
html body .sn-profile h2.sn-profile__section-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ============================================================
   ★ info-mag-card --voice：4列に縮小・画像統一サイズ
   ============================================================ */
html body .info-mag-grid--voice {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .info-mag-card--voice {
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
html body .info-mag-card--voice .info-mag-card__img-wrap {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #f0f7ff !important;
  max-height: 180px !important;
}
html body .info-mag-card--voice .info-mag-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
html body .info-mag-card--voice .info-mag-card__body {
  padding: 12px 14px 14px !important;
}
html body .info-mag-card--voice .info-mag-card__title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 4px 0 0 !important;
}
html body .info-mag-card--voice .info-mag-card__date {
  font-size: 0.75rem !important;
  color: #6b7280 !important;
}
@media (max-width: 1024px) {
  html body .info-mag-grid--voice { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  html body .info-mag-grid--voice { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   ★ コンタクトフォーム：完全中央揃え
   ============================================================ */
html body .contact-form-card__body .wpcf7-form {
  max-width: 560px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
html body .contact-form-card__body .wpcf7-form label,
html body .contact-form-card__body .wpcf7-form p,
html body .contact-form-card__body .wpcf7-form .wpcf7-form-control-wrap {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .contact-form-card__body .wpcf7-form input[type=text],
html body .contact-form-card__body .wpcf7-form input[type=email],
html body .contact-form-card__body .wpcf7-form input[type=tel],
html body .contact-form-card__body .wpcf7-form input[type=url],
html body .contact-form-card__body .wpcf7-form input[type=number],
html body .contact-form-card__body .wpcf7-form textarea {
  display: block !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 8px auto !important;
  text-align: left !important;
}

/* ============================================================
   ★ トップページ：登録専門家からの最新情報セクション
   ============================================================ */
html body section.top-pro-notices {
  padding: clamp(40px, 5vw, 64px) 0 !important;
  background: #f8fafc !important;
}
html body section.top-pro-notices > .content-wrapper {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
html body section.top-pro-notices .info-mag-header {
  text-align: center !important;
  margin-bottom: 32px !important;
}
html body section.top-pro-notices .info-mag-header__inner {
  display: inline-block !important;
  text-align: left !important;
}
html body .top-pro-notices__more {
  text-align: center !important;
  margin-top: 24px !important;
}

/* ============================================================
   ★ コンタクトフォーム：ヘッダー・イントロも中央揃え
   ============================================================ */
html body .contact-form-card__header {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}
html body .contact-form-card__title {
  text-align: center !important;
  width: 100% !important;
}
html body .contact-form-card__lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 560px !important;
}

/* ============================================================
   ★ コンタクトフォーム：:has() に依存しない確実な中央寄せ
   ============================================================ */
/* フォーム本体ラッパー */
html body .contact-form-card__body,
html body .contact-form-card__form-wrap {
  text-align: center !important;
}
/* CF7 form 全体 */
html body .contact-form-card__body .wpcf7,
html body .contact-form-card__body .wpcf7-form {
  text-align: center !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
/* CF7 のすべての <p> をデフォルト中央寄せ */
html body .contact-form-card__body .wpcf7-form > p,
html body .contact-form-card__body .wpcf7-form p {
  text-align: center !important;
  margin: 12px auto !important;
  width: 100% !important;
}
/* 入力ラッパー */
html body .contact-form-card__body .wpcf7-form-control-wrap {
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* 入力フィールド：中央寄せ＋固定幅 */
html body .contact-form-card__body .wpcf7-form input[type=text],
html body .contact-form-card__body .wpcf7-form input[type=email],
html body .contact-form-card__body .wpcf7-form input[type=tel],
html body .contact-form-card__body .wpcf7-form input[type=url],
html body .contact-form-card__body .wpcf7-form input[type=number],
html body .contact-form-card__body .wpcf7-form textarea {
  display: block !important;
  width: 90% !important;
  max-width: 460px !important;
  margin: 8px auto !important;
  text-align: left !important;
  float: none !important;
}
/* 送信ボタン：block + margin auto で確実に中央 */
html body .contact-form-card__body .wpcf7-form input[type=submit],
html body .contact-form-card__body .wpcf7-form button[type=submit] {
  display: block !important;
  width: 80% !important;
  max-width: 460px !important;
  margin: 24px auto 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
/* カードヘッダー（タイトル）も中央 */
html body .contact-form-card__header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}
html body .contact-form-card__title {
  text-align: center !important;
}

/* ============================================================
   ★★★ コンタクトフォーム最終FIX：絶対確実な中央寄せ ★★★
   ============================================================ */
/* form-wrap は 560px で確実に中央寄せ（インラインstyleと一致） */
html body .contact-form-card .contact-form-card__form-wrap,
html body .contact-form-card__body .contact-form-card__form-wrap {
  max-width: 560px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
/* wpcf7 のラッパー div も中央寄せ */
html body .contact-form-card__form-wrap > .wpcf7,
html body .contact-form-card__form-wrap .wpcf7 {
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* wpcf7-form 本体 */
html body .contact-form-card__form-wrap .wpcf7-form {
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* 全ての p / div を中央寄せ */
html body .contact-form-card__form-wrap .wpcf7-form > p,
html body .contact-form-card__form-wrap .wpcf7-form > div {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
/* 送信ボタン：inline-block + 親 text-align:center で確実中央 */
html body .contact-form-card__form-wrap .wpcf7-form input[type=submit],
html body .contact-form-card__form-wrap .wpcf7-form button[type=submit] {
  display: inline-block !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 100% !important;
  margin: 24px auto 0 !important;
  padding: 16px 60px !important;
  background: linear-gradient(135deg, #1e5bce 0%, #14b8a6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(30,91,206,0.25) !important;
  text-align: center !important;
  float: none !important;
}
/* ヘッダー（タイトル+アイコン）も最終FIX */
html body .contact-form-card > .contact-form-card__header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center !important;
}

/* ============================================================
   ★ info-mag 画像が Logo-SoudanNavi の場合の表示調整
   ============================================================ */
html body .info-mag-feature__img[src*="Logo-SoudanNavi"],
html body .info-mag-card__img[src*="Logo-SoudanNavi"] {
  object-fit: contain !important;
  background: #f0f7ff !important;
  padding: 20px !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ版（モバイル）レスポンシブ全面修正 ★★★
   ████████████████████████████████████████████████████████████████████ */

/* ============================================================
   タブレット〜大スマホ：~ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  /* 相談セクション：ペアを1列に */
  html body section.top-consultation div.sn-consult-pair {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 0 16px !important;
  }
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(1) {
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
  }
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(2) {
    grid-row: 2 / 3 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
  }
  /* お問い合わせフォーム：1カラム化 */
  html body .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  html body .contact-layout__sidebar {
    position: static !important;
  }
  /* プロフィール：写真col/info-colを縦並びに */
  html body .sn-profile__hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body .single_profile .sn-profile__body-grid,
  html body .entry-content .sn-profile__body-grid,
  html body .sn-profile__body-grid {
    display: block !important;
    width: 100% !important;
  }
  html body .sn-profile__side-col {
    position: static !important;
  }
}

/* ============================================================
   スマホ：~ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ===== グローバル：水平スクロール防止 ===== */
  html body {
    overflow-x: hidden !important;
  }
  html body .content-wrapper,
  html body .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ===== 相談セクション（top-consultation）スマホ最適化 ===== */
  html body section.top-consultation li.sn-consult-grid__item {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 10px 4px !important;
    gap: 6px !important;
  }
  html body section.top-consultation .sn-consult-icon {
    width: 36px !important;
    height: 36px !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 32px !important;
    height: 32px !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
  /* wide 6列 → 3列 */
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list {
    grid-template-columns: repeat(3, 100px) !important;
    gap: 12px !important;
    grid-auto-rows: 100px !important;
    justify-content: center !important;
  }
  /* compact 3列 → 3列 */
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 100px) !important;
    gap: 12px !important;
    grid-auto-rows: 100px !important;
    justify-content: center !important;
  }
  /* medium 4列 → 2列 */
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list {
    grid-template-columns: repeat(2, 100px) !important;
    gap: 12px !important;
    grid-auto-rows: 100px !important;
    justify-content: center !important;
  }
  /* mini 2列 → 2列 */
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 100px) !important;
    gap: 12px !important;
    grid-auto-rows: 100px !important;
    justify-content: center !important;
  }
  /* ペア section の widthをリセット */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section--mini,
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section--compact {
    width: auto !important;
    max-width: 100% !important;
  }
  /* セクション間の天地余白縮小 */
  html body section.top-consultation section.sn-consult-section,
  html body section.top-consultation > .content-wrapper > section.sn-consult-section {
    margin-top: 48px !important;
    margin-bottom: 24px !important;
  }
  html body section.top-consultation div.sn-consult-pair {
    margin-top: 48px !important;
    margin-bottom: 24px !important;
  }
  /* badge */
  html body section.top-consultation .sn-consult-section__head .tag {
    font-size: 0.85rem !important;
    padding: 6px 16px !important;
  }
  html body section.top-consultation .sn-consult-section__head {
    margin-bottom: 24px !important;
  }
  /* タブ */
  html body .sn-consult-tabs__list {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  html body .sn-consult-tabs__item .tag {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }

  /* ===== プロカード（sigyoulist） ===== */
  html body .pro-list-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  html body .pro-card__name {
    font-size: 0.875rem !important;
  }
  html body .pro-card__office {
    font-size: 0.75rem !important;
  }

  /* ===== プロフィールページ ===== */
  html body .sn-profile__hero,
  html body .sn-profile__body-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .sn-profile__photo-col {
    text-align: center !important;
  }
  html body .sn-profile__photo-wrap {
    max-width: 240px !important;
    margin: 0 auto !important;
  }
  html body .sn-profile__name {
    font-size: 1.5rem !important;
    text-align: center !important;
  }
  html body .sn-profile__office {
    text-align: center !important;
  }
  html body .sn-profile__cta-wrap {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body .sn-profile__cta-btn {
    width: 100% !important;
  }
  html body .sn-profile__map-wrap--hero {
    height: 200px !important;
  }
  html body .sn-profile__section {
    padding: 14px 16px 16px !important;
  }
  html body .sn-profile__section-title {
    font-size: 1rem !important;
  }

  /* ===== コンタクトフォーム ===== */
  html body .contact-form-card__body {
    padding: 16px !important;
  }
  html body .contact-form-card__form-wrap {
    max-width: 100% !important;
  }
  html body .contact-form-card__body .wpcf7-form input[type=text],
  html body .contact-form-card__body .wpcf7-form input[type=email],
  html body .contact-form-card__body .wpcf7-form input[type=tel],
  html body .contact-form-card__body .wpcf7-form textarea,
  html body .contact-form-card__form-wrap .wpcf7-form input[type=text],
  html body .contact-form-card__form-wrap .wpcf7-form input[type=email],
  html body .contact-form-card__form-wrap .wpcf7-form input[type=tel],
  html body .contact-form-card__form-wrap .wpcf7-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* iOS でズーム防止 */
  }
  html body .contact-form-card__form-wrap .wpcf7-form input[type=submit] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 20px !important;
  }

  /* ===== 士業からのお便り・お役立ち情報 グリッド ===== */
  html body .info-articles-grid,
  html body .info-mag-grid,
  html body .info-mag-grid--voice {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  html body .info-mag-feature {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .info-mag-card__title,
  html body .info-mag-feature__title {
    font-size: 0.875rem !important;
  }
  html body .info-mag-header__title {
    font-size: 1.3rem !important;
  }
  html body .info-mag-header__sub {
    font-size: 0.85rem !important;
  }
  html body .info-notice-board {
    padding: 12px !important;
  }
  html body .info-notice-item {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  html body .info-notice-item__title {
    font-size: 0.875rem !important;
  }

  /* ===== about-profession ===== */
  html body .about-profession__grid,
  html body .prof-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ===== how-it-works（はじめての方へ） ===== */
  html body .how-steps {
    flex-direction: column !important;
    gap: 16px !important;
  }
  html body .how-step-arrow {
    transform: rotate(90deg) !important;
  }
  html body .how-title {
    font-size: 1.5rem !important;
  }
  html body .how-guarantees {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ===== publish-cta / join_kaiketsu ===== */
  html body .publish-cta__title,
  html body .join_kaiketsu h4 {
    font-size: 1.3rem !important;
  }
  html body .publish-cta__buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body .publish-cta__buttons .btn {
    width: 100% !important;
  }

  /* ===== top-pro-notices（新規セクション） ===== */
  html body section.top-pro-notices {
    padding: 32px 0 !important;
  }
  html body section.top-pro-notices > .content-wrapper {
    padding: 0 16px !important;
  }

  /* ===== タイトル系 ===== */
  html body .main_title h2 {
    font-size: 1.5rem !important;
  }
  html body .main_title p {
    font-size: 0.875rem !important;
  }

  /* ===== トップ：about ===== */
  html body .top-about-title {
    font-size: 1.4rem !important;
  }
  html body .top-about-text {
    font-size: 0.875rem !important;
  }

  /* ===== ヘッダーバナー ===== */
  html body .page-banner__title {
    font-size: 1.5rem !important;
  }
  html body .page-banner__desc {
    font-size: 0.85rem !important;
  }

  /* ===== ボタン汎用 ===== */
  html body .btn--lg {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }
}

/* ============================================================
   超小スマホ：~ 480px
   ============================================================ */
@media (max-width: 480px) {
  /* 相談カード：もう少し小さく */
  html body section.top-consultation li.sn-consult-grid__item,
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    padding: 8px 4px !important;
    gap: 4px !important;
  }
  html body section.top-consultation .sn-consult-icon {
    width: 32px !important;
    height: 32px !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 28px !important;
    height: 28px !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.65rem !important;
  }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 88px) !important;
    grid-auto-rows: 88px !important;
    gap: 8px !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 88px) !important;
    grid-auto-rows: 88px !important;
    gap: 8px !important;
  }
  /* プロカード：1列 */
  html body .pro-list-grid,
  html body .info-articles-grid,
  html body .info-mag-grid,
  html body .info-mag-grid--voice {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ★ スマホ オーバーレイメニュー：はみ出し防止
   ============================================================ */
@media (max-width: 768px) {
  html body .sp_overlay {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  html body .sp_overlay.open {
    opacity: 1 !important;
  }
  html body .overlay-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 80px auto 40px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  html body .sp_overlay .overlay-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  html body .overlay-menu ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  html body .overlay-menu ul li {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  html body .overlay-menu ul li a {
    display: block !important;
    width: 100% !important;
    padding: 16px 16px !important;
    font-size: 1.05rem !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  /* スクロール時のクリッピング防止 */
  html body .sp_overlay,
  html body .sp_overlay.open {
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* メニュー閉じるボタンが見えるよう右上固定 */
  html body .navbar__toggle,
  html body #toggle {
    position: relative !important;
    z-index: 1001 !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ追加修正：縦長カード & top-about マージン ★★★
   ████████████████████████████████████████████████████████████████████ */

@media (max-width: 768px) {

  /* ===== 注目士業（top_pickup）：横スクロール → 縦1列 ===== */
  html body .top_pickup-list,
  html body .latest_pro-list,
  html body .pro_list .top_pickup-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
    overflow: visible !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  html body .top_pickup-item,
  html body .latest_pro-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    writing-mode: horizontal-tb !important;
  }
  html body .top_pickup-item > a,
  html body .latest_pro-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    writing-mode: horizontal-tb !important;
  }
  /* テキストが縦書きになっている問題を修正 */
  html body .top_pickup *,
  html body .latest_pro * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* 写真：固定サイズ */
  html body .top_pickup-item img,
  html body .latest_pro-item img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }
  /* 得意分野 / PR / バッジ：横並び */
  html body .top_pickup-item .useful-info-wrap,
  html body .latest_pro-item .useful-info-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }
  html body .top_pickup-item .useful-info,
  html body .latest_pro-item .useful-info {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }
  html body .top_pickup-item .pro-name,
  html body .top_pickup-item .top_pickup-name,
  html body .latest_pro-item .pro-name,
  html body .latest_pro-item .top_pickup-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }
  html body .top_pickup-item .pro-office,
  html body .latest_pro-item .pro-office {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
  }
  /* テキスト省略 */
  html body .top_pickup-item p,
  html body .latest_pro-item p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ===== about-profession（10士業カード）：2列グリッド、横書き ===== */
  html body .about-profession,
  html body .about-profession__grid,
  html body .prof-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  html body .prof-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    padding: 14px 10px !important;
  }
  html body .prof-card *,
  html body .about-profession * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  html body .prof-card__header .shigyo_mark,
  html body .prof-card .shigyo_mark {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    min-width: 0 !important;
    width: auto !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
  html body .prof-card__items,
  html body .prof-card ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }
  html body .prof-card__item,
  html body .prof-card li {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    list-style: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ===== top-about：パツパツ解消、内側マージン追加 ===== */
  html body .top-about {
    padding: 24px 16px !important;
  }
  html body .top-about-wrapper {
    padding: 32px 24px !important;
    margin: 0 8px !important;
    border-radius: 16px !important;
  }
  html body .top-about-title {
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  html body .top-about-description,
  html body .top-about-text {
    padding: 0 !important;
  }
  html body .top-about-text {
    font-size: 0.875rem !important;
    line-height: 1.8 !important;
    text-align: left !important;
  }
}

/* 超小スマホ：about-profession を1列に */
@media (max-width: 480px) {
  html body .about-profession,
  html body .about-profession__grid,
  html body .prof-cards {
    grid-template-columns: 1fr !important;
  }
  html body .top-about-wrapper {
    padding: 24px 20px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：相談カードのラベル表示を強制（最重要）★★★
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* カード <a> 内のレイアウト：アイコン上・ラベル下を強制 */
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a,
  html body section.top-consultation li.sn-consult-grid__item > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    overflow: visible !important;
  }
  /* アイコン：小さく */
  html body section.top-consultation .sn-consult-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* ラベル：絶対に表示 */
  html body section.top-consultation .sn-consult-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    /* 縦書き禁止 */
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    max-height: none !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  html body section.top-consultation .sn-consult-icon,
  html body section.top-consultation .sn-consult-icon img {
    width: 24px !important;
    height: 24px !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    padding: 6px 3px !important;
    gap: 3px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 最終FIX：相談カードのラベル表示・アイコン縮小（タブレット〜スマホ全域）
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 1024px) {
  /* カード <a>：縦並びでラベル必ず見せる */
  html body section.top-consultation li[class].sn-consult-grid__item > a,
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item[id], 
  html body section.top-consultation li.sn-consult-grid__item > a[class] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 6px 8px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* アイコン：強制小サイズ（最高特異度） */
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon,
  html body section.top-consultation .sn-consult-grid__item .sn-consult-icon[class] {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon > img,
  html body section.top-consultation .sn-consult-grid__item .sn-consult-icon img[class],
  html body section.top-consultation .sn-consult-icon img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ラベル：必ず表示・縦書き禁止・カード内に収める */
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-label,
  html body section.top-consultation .sn-consult-grid__item .sn-consult-label[class],
  html body section.top-consultation .sn-consult-label,
  html body .sn-consult-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }
}

@media (max-width: 480px) {
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon,
  html body section.top-consultation .sn-consult-icon[class] {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon > img,
  html body section.top-consultation .sn-consult-icon img[class] {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  html body section.top-consultation .sn-consult-label,
  html body .sn-consult-label[class] {
    font-size: 0.62rem !important;
    margin-top: 4px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ追加修正：情報カード縦長解消・矢印縦変換
   ████████████████████████████████████████████████████████████████████ */

@media (max-width: 768px) {

  /* ===== お役立ち情報 (top_articles)：縦長カード解消 → 1カラム横並び ===== */
  html body .top-articles .top_articles-list,
  html body section.top-articles .top_articles-list,
  html body .top-articles ul,
  html body section.top-articles ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  html body .top-articles .top_articles-item,
  html body section.top-articles li,
  html body .top-articles li {
    width: 100% !important;
    max-width: 100% !important;
    writing-mode: horizontal-tb !important;
  }
  html body .top-articles *,
  html body section.top-articles * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  html body .top-articles .top_articles-item a,
  html body section.top-articles li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  html body .top-articles .articles-card-thumb,
  html body section.top-articles img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
  }
  html body .top-articles .articles-card-title,
  html body section.top-articles h3,
  html body section.top-articles .top_articles-title {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ===== 士業の声 (top_testimonials / top_interview)：1カラム ===== */
  html body .top_testimonials .top_testimonials-list,
  html body .top_testimonials ul,
  html body .top-interview .top-interview-list,
  html body section.top_testimonials > ul,
  html body section.top-interview > ul,
  html body .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  html body .top_testimonials li,
  html body .top-interview li,
  html body .interview-card,
  html body .testimonial-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 写真：もう少し小さく */
  html body .top_testimonials img,
  html body .interview-card img,
  html body .testimonial-card img {
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* ===== how-it-works：矢印を縦方向に（→ ではなく ↓） ===== */
  html body .how-step-arrow {
    transform: rotate(90deg) !important;
    font-size: 1.5rem !important;
    color: #1e5bce !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    line-height: 1 !important;
  }
  /* SVG矢印の場合も対応 */
  html body .how-step-arrow svg {
    transform: rotate(90deg) !important;
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 480px) {
  /* お役立ち情報：画像サムネをさらに小さく */
  html body .top-articles .articles-card-thumb,
  html body section.top-articles img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：ペアを完全1カラム化（インラインstyle上書き）
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* ペア div：1カラム grid に強制 */
  html body section.top-consultation div.sn-consult-pair[class],
  html body div.sn-consult-pair[class] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
    align-items: start !important;
  }
  /* ペア内 1番目セクション：1行目（インラインstyle上書き） */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(1)[id],
  html body div.sn-consult-pair > section.sn-consult-section:nth-child(1)[id] {
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* ペア内 2番目セクション：2行目（インラインstyle上書き）*/
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(2)[id],
  html body div.sn-consult-pair > section.sn-consult-section:nth-child(2)[id] {
    grid-row: 2 / 3 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* セクション内のリストを画面幅に合わせる */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section .sn-consult-section__list {
    margin: 0 auto !important;
    justify-content: center !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：相談カードアイコンサイズを大きく
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 1024px) {
  /* アイコンを大きく（小さすぎ修正）*/
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon,
  html body section.top-consultation .sn-consult-grid__item .sn-consult-icon[class],
  html body section.top-consultation .sn-consult-icon {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon > img,
  html body section.top-consultation .sn-consult-grid__item .sn-consult-icon img[class],
  html body section.top-consultation .sn-consult-icon img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
  /* カードのサイズも少し大きくしてアイコン+ラベルが入る空間確保 */
  html body section.top-consultation li.sn-consult-grid__item,
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a,
  html body section.top-consultation li.sn-consult-grid__item > a {
    width: 118px !important;
    height: 118px !important;
    max-height: 118px !important;
    min-height: 118px !important;
    padding: 12px 6px !important;
  }
  /* grid-auto-rows と grid-template-columns も合わせる */
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 118px) !important;
    grid-auto-rows: 118px !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 118px) !important;
    grid-auto-rows: 118px !important;
  }
}

@media (max-width: 480px) {
  /* 超小スマホ：アイコン少し控えめだが見やすく */
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon,
  html body section.top-consultation .sn-consult-icon[class] {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a > span.sn-consult-icon > img,
  html body section.top-consultation .sn-consult-icon img[class] {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
  /* カード 100px 程度 */
  html body section.top-consultation li.sn-consult-grid__item {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    width: 100px !important;
    height: 100px !important;
    padding: 8px 4px !important;
  }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 100px) !important;
    grid-auto-rows: 100px !important;
    gap: 8px !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 100px) !important;
    grid-auto-rows: 100px !important;
    gap: 8px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：相談カード重なり修正（gap追加・高さ調整）
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 1024px) {
  /* グリッドに row-gap / column-gap を明示 */
  html body section.top-consultation ul.sn-consult-section__list,
  html body section.top-consultation .sn-consult-section__list[class] {
    gap: 14px !important;
    row-gap: 18px !important;
    column-gap: 12px !important;
    grid-auto-rows: 130px !important;
  }
  /* カード高さも 130px に */
  html body section.top-consultation li.sn-consult-grid__item,
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item {
    width: 118px !important;
    height: 130px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    min-height: 130px !important;
    max-height: 130px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a,
  html body section.top-consultation li.sn-consult-grid__item > a {
    width: 118px !important;
    height: 130px !important;
    max-height: 130px !important;
    min-height: 130px !important;
    padding: 12px 6px !important;
    overflow: visible !important;
  }
  /* グリッド列幅・行高も新サイズ */
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 118px) !important;
    grid-auto-rows: 130px !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 118px) !important;
    grid-auto-rows: 130px !important;
  }
}

@media (max-width: 480px) {
  /* 超小スマホ：カード 110px 高、ギャップ確実に */
  html body section.top-consultation ul.sn-consult-section__list {
    gap: 10px !important;
    row-gap: 14px !important;
    column-gap: 8px !important;
    grid-auto-rows: 110px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item,
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item {
    width: 100px !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
  }
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    width: 100px !important;
    height: 110px !important;
    max-height: 110px !important;
    min-height: 110px !important;
    padding: 10px 4px !important;
  }
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    grid-template-columns: repeat(3, 100px) !important;
    grid-auto-rows: 110px !important;
  }
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    grid-template-columns: repeat(2, 100px) !important;
    grid-auto-rows: 110px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：search_map の pro-badgers を 2カラムに
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  html body .pro-badgers,
  html body ul.pro-badgers {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
    list-style: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .pro-badgers_list,
  html body .pro-badgers > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body .pro-badger-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 10px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    gap: 8px !important;
  }
  /* 全要素：縦書き禁止 */
  html body .pro-badgers *,
  html body .pro-badger-card * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* バッジ */
  html body .pro-badger-card .tag {
    display: inline-block !important;
    font-size: 0.85rem !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
  /* 分野リスト：横並びチップ */
  html body .pro-badger-topics,
  html body .pro-badger-card .pro-badger-topics {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  html body .pro-badger-topics li {
    display: inline-block !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    padding: 2px 8px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 9999px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  html body .pro-badgers {
    gap: 8px !important;
    padding: 0 12px !important;
  }
  html body .pro-badger-card .tag {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
  }
  html body .pro-badger-topics li {
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：注目士業・新着士業 pro-card-list を 1カラムに
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* リスト：1カラム */
  html body .top_pickup .pro-card-list,
  html body .latest_pro .pro-card-list,
  html body ul.pro-card-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
    list-style: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }
  /* カード */
  html body .top_pickup .pro-card,
  html body .latest_pro .pro-card,
  html body ul.pro-card-list > li.pro-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }
  /* 縦書き禁止 */
  html body .pro-card-list *,
  html body .pro-card * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* カード内リンク：縦並び */
  html body .pro-card__link,
  html body .pro-card > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
  }
  /* バッジ */
  html body .pro-card__badge {
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  html body .pro-card__badge .shigyo_mark {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
  }
  /* オフィス・氏名 */
  html body .pro-card__info {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .pro-card__office {
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  html body .pro-card__name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 2px 0 0 !important;
    text-align: center !important;
  }
  /* 写真：固定高さ */
  html body .pro-card__photo {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 140px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    background: #f8fafc !important;
  }
  html body .pro-card__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
  html body .pro-card__no-photo {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #94a3b8 !important;
    font-size: 0.65rem !important;
  }
  /* 得意分野ラベル */
  html body .pro-card__specialty {
    margin: 4px 0 !important;
    padding: 0 !important;
  }
  html body .pro-card__specialty-label {
    display: inline-block !important;
    font-size: 0.7rem !important;
    color: #1e3a8a !important;
    background: #eff6ff !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    margin: 0 0 4px !important;
    width: auto !important;
    text-align: center !important;
  }
  html body .pro-card__specialty-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body .pro-card__specialty-list li {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 9999px !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* PR テキスト：3行省略 */
  html body .pro-card__body,
  html body .pro-card__pr {
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
  html body .pro-card__pr {
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  /* 超小スマホ：余白縮小 */
  html body .top_pickup .pro-card-list,
  html body .latest_pro .pro-card-list,
  html body ul.pro-card-list {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  html body .pro-card__name {
    font-size: 0.8rem !important;
  }
  html body .pro-card__office {
    font-size: 0.65rem !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：ヒーロー（hero）セクション修正
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* ヒーロー本体：上下余白を縮小 */
  html body .hero,
  html body section.hero {
    padding: 16px 0 24px !important;
    min-height: 0 !important;
  }
  html body .hero__inner,
  html body .hero__content {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* タイトル：レイアウト崩れを完全リセット */
  html body .hero__title {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    grid-template-columns: unset !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    margin: 12px 0 8px !important;
    padding: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
  }
  html body .hero__title * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* accent（相談ナビ） */
  html body .hero__title .hero__accent {
    display: inline !important;
    color: #1e5bce !important;
    font-size: inherit !important;
    margin: 0 4px !important;
    padding: 0 !important;
  }
  /* eyebrow（士業専門家マッチングサービス）：コンパクトに */
  html body .hero__eyebrow {
    font-size: 0.75rem !important;
    padding: 4px 14px !important;
    margin: 0 auto 8px !important;
    display: inline-block !important;
    text-align: center !important;
  }
  /* サブタイトル */
  html body .hero__subtitle {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    margin: 8px 0 0 !important;
    padding: 0 8px !important;
    text-align: center !important;
  }
  /* eyebrow を中央寄せするための親 */
  html body .hero__content {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  html body .hero__title {
    font-size: 1.25rem !important;
    line-height: 1.45 !important;
  }
  html body .hero__subtitle {
    font-size: 0.75rem !important;
  }
  html body .hero__eyebrow {
    font-size: 0.7rem !important;
    padding: 3px 10px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ ペアセクション：data-pair-col 属性で配置制御
   ████████████████████████████████████████████████████████████████████ */
/* デスクトップ：ペアを2カラム grid に */
html body section.top-consultation div.sn-consult-pair {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: center !important;
  gap: 40px !important;
  width: 100% !important;
  margin: 80px auto 48px !important;
}
html body section.top-consultation div.sn-consult-pair > section[data-pair-col="1"] {
  grid-row: 1 / 2 !important;
  grid-column: 1 / 2 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
}
html body section.top-consultation div.sn-consult-pair > section[data-pair-col="2"] {
  grid-row: 1 / 2 !important;
  grid-column: 2 / 3 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
}

/* スマホ：1カラムに */
@media (max-width: 768px) {
  html body section.top-consultation div.sn-consult-pair {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
  }
  html body section.top-consultation div.sn-consult-pair > section[data-pair-col="1"] {
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body section.top-consultation div.sn-consult-pair > section[data-pair-col="2"] {
    grid-row: 2 / 3 !important;
    grid-column: 1 / 2 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：プロフィール詳細ページ（single-touroku）完全対応
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {

  /* === 全体：縦書き完全禁止 === */
  html body .sn-profile,
  html body .sn-profile *,
  html body .single_profile,
  html body .single_profile *,
  html body .singular-article,
  html body .singular-article * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  /* === パンくず（breadcrumb）：横並び === */
  html body .breadcrumb,
  html body .ys-breadcrumb,
  html body .breadcrumb__list,
  html body nav.breadcrumb,
  html body ol.breadcrumb,
  html body .breadcrumb ol {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    list-style: none !important;
    margin: 0 !important;
    writing-mode: horizontal-tb !important;
  }
  html body .breadcrumb li,
  html body .breadcrumb__item,
  html body .ys-breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
  }
  html body .breadcrumb li *,
  html body .breadcrumb a,
  html body .breadcrumb span {
    writing-mode: horizontal-tb !important;
    display: inline !important;
    white-space: nowrap !important;
  }
  /* パンくず最後の項目だけ折返し許可 */
  html body .breadcrumb li:last-child {
    white-space: normal !important;
  }

  /* === プロフィール本体：1カラム化 === */
  html body .sn-profile__hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  html body .sn-profile__body {
    padding: 16px !important;
  }
  html body .sn-profile__body-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .sn-profile__main-col,
  html body .sn-profile__side-col {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* === 写真col：センター・サイズ制限 === */
  html body .sn-profile__photo-col {
    width: 100% !important;
    text-align: center !important;
  }
  html body .sn-profile__photo-wrap {
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  /* === info-col：センター揃え === */
  html body .sn-profile__info-col {
    text-align: center !important;
    width: 100% !important;
  }
  html body .sn-profile__office,
  html body .sn-profile__name,
  html body .sn-profile__license {
    text-align: center !important;
  }
  html body .sn-profile__name {
    font-size: 1.4rem !important;
  }

  /* === CTAボタン：縦並び全幅 === */
  html body .sn-profile__cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html body .sn-profile__cta-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === 住所＋地図 === */
  html body .sn-profile__address-map {
    width: 100% !important;
  }
  html body .sn-profile__map-wrap--hero {
    height: 200px !important;
    width: 100% !important;
  }

  /* === 受付時間：写真下 === */
  html body .sn-profile__hours--photo {
    max-width: 280px !important;
    margin: 12px auto 0 !important;
  }

  /* === セクション === */
  html body .sn-profile__section {
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .sn-profile__section-title {
    font-size: 1rem !important;
    text-align: left !important;
  }

  /* === 資格・経歴行：横並びレイアウト === */
  html body .sn-profile__career-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html body .sn-profile__career-row {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 8px 0 !important;
    writing-mode: horizontal-tb !important;
  }
  html body .sn-profile__career-row dt {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
  }
  html body .sn-profile__career-row dd {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* === 本文テキスト === */
  html body .sn-profile__pr-text,
  html body .sn-profile__expert-text {
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    writing-mode: horizontal-tb !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  html body .sn-profile__pr-text *,
  html body .sn-profile__expert-text * {
    writing-mode: horizontal-tb !important;
  }

  /* === タグクラウド === */
  html body .sn-profile__tag-cloud {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body .sn-profile__tag {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 480px) {
  html body .sn-profile__name {
    font-size: 1.2rem !important;
  }
  html body .sn-profile__photo-wrap {
    max-width: 160px !important;
  }
  html body .sn-profile__career-row {
    grid-template-columns: 50px 1fr !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：shigyo-list 詳細ページ・縦書き完全禁止（最高優先度）
   ████████████████████████████████████████████████████████████████████ */

/* 全画面サイズで縦書き禁止 */
html body.single-shigyo-list,
html body.single-shigyo-list *,
html body.post-type-shigyo-list,
html body.post-type-shigyo-list *,
html body.singular-shigyo-list,
html body.singular-shigyo-list * {
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

@media (max-width: 768px) {
  /* shigyo-list 単一ページ：縦書き完全禁止＋1カラム */
  html body.single-shigyo-list .entry-content,
  html body.single-shigyo-list .singular-article,
  html body.single-shigyo-list article,
  html body.single-shigyo-list main,
  html body.single .singular-article,
  html body.single .entry-content {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  html body.single-shigyo-list .entry-content *,
  html body.single-shigyo-list .singular-article *,
  html body.single .entry-content * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  /* 親テーマの sidebar/2カラム解除 */
  html body.single-shigyo-list .l-content,
  html body.single-shigyo-list .l-wrap,
  html body.single-shigyo-list .l-main,
  html body.single-shigyo-list .l-sidebar,
  html body.single .l-content,
  html body.single .l-wrap,
  html body.single .l-main,
  html body.single .l-sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    float: none !important;
    position: static !important;
  }

  /* 親テーマのコンテナ */
  html body.single-shigyo-list .ys-container,
  html body.single-shigyo-list .container,
  html body.single .ys-container,
  html body.single .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急FIX：shigyo-list 詳細ページ・あらゆる2カラムを強制1カラム化
   ████████████████████████████████████████████████████████████████████ */

@media (max-width: 900px) {
  /* sn-profile__body-grid を block レイアウトに強制 */
  html body div.sn-profile__body-grid,
  html body .sn-profile__body-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  /* メインカラム・サイドカラム：両方とも全幅、縦並び */
  html body .sn-profile__main-col,
  html body .sn-profile__side-col,
  html body div.sn-profile__main-col,
  html body div.sn-profile__side-col,
  html body aside.sn-profile__side-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  /* hero も縦並び */
  html body .sn-profile__hero,
  html body div.sn-profile__hero {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  html body .sn-profile__photo-col,
  html body .sn-profile__info-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }
  /* writing-mode 完全リセット（マスター） */
  html body .sn-profile,
  html body .sn-profile *,
  html body .single_profile,
  html body .single_profile *,
  html body .singular-article,
  html body .singular-article *,
  html body .singular-article--shigyo,
  html body .singular-article--shigyo *,
  html body .entry-content,
  html body .entry-content * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* 親テーマの2カラムレイアウト解除（保険） */
  html body .l-content,
  html body .l-wrap,
  html body .l-main,
  html body .l-sidebar,
  html body .ys-l-content,
  html body .ys-l-main,
  html body .ys-l-sidebar,
  html body div[class*="l-main"],
  html body div[class*="l-sidebar"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    grid-template-columns: 1fr !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ スマホ：how-step-arrow を → から ↓ に変換
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* 元の → テキストを非表示にして、::before で ↓ を表示 */
  html body .how-step-arrow {
    font-size: 0 !important;
    color: transparent !important;
    text-align: center !important;
    margin: 12px auto !important;
    line-height: 1 !important;
    transform: none !important;
    display: block !important;
  }
  html body .how-step-arrow::before {
    content: "↓" !important;
    display: inline-block !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
  }
  /* SVG矢印を含む場合の対応 */
  html body .how-step-arrow svg {
    display: none !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 矢印 PC/SP 切替（spanクラスで明示）
   ████████████████████████████████████████████████████████████████████ */
/* デスクトップ：→ を表示、↓ を非表示 */
html body .how-step-arrow .arrow-pc { display: inline !important; }
html body .how-step-arrow .arrow-sp { display: none !important; }

/* スマホ：↓ を表示、→ を非表示 */
@media (max-width: 768px) {
  html body .how-step-arrow {
    transform: none !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: block !important;
    margin: 16px auto !important;
    line-height: 1 !important;
  }
  html body .how-step-arrow .arrow-pc { display: none !important; }
  html body .how-step-arrow .arrow-sp {
    display: inline-block !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ ペア内セクションのカード中央寄せ
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 900px) {
  /* ペア内の section 全体を画面センターに */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* セクション内のグリッドリストもセンター揃え */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section__list {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急FIX：パンくず・上余白・矢印・センター寄せ
   ████████████████████████████████████████████████████████████████████ */

@media (max-width: 900px) {
  /* === パンくず：各項目を1行に強制 === */
  html body .breadcrumb,
  html body .breadcrumb__inner,
  html body .ys-breadcrumb,
  html body nav[aria-label="パンくず"],
  html body nav[aria-label="breadcrumb"],
  html body ol[class*="breadcrumb"],
  html body ul[class*="breadcrumb"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
  html body .breadcrumb li,
  html body .breadcrumb__item,
  html body .ys-breadcrumb li,
  html body ol[class*="breadcrumb"] > li,
  html body ul[class*="breadcrumb"] > li {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  html body .breadcrumb li a,
  html body .breadcrumb li span,
  html body .breadcrumb__item a,
  html body .breadcrumb__item span,
  html body nav[aria-label*="ンくず"] a,
  html body nav[aria-label*="ンくず"] span {
    display: inline-block !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.4 !important;
  }

  /* === 上余白縮小 === */
  html body .sn-page-content,
  html body .sn-page-content--single-shigyo,
  html body #content {
    padding-top: 8px !important;
  }
  html body .singular-article,
  html body .singular-article--shigyo {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body .sn-profile {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* === 矢印：あらゆる .how-step-arrow を強制制御（メディアクエリ外） === */
html body .how-step-arrow .arrow-pc {
  display: inline-block;
}
html body .how-step-arrow .arrow-sp {
  display: none;
}
@media (max-width: 768px) {
  /* ↓ を確実に表示 */
  html body .how-step-arrow .arrow-pc,
  html body .how-step-arrow > .arrow-pc {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    font-size: 0 !important;
  }
  html body .how-step-arrow .arrow-sp,
  html body .how-step-arrow > .arrow-sp {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
  }
  /* 親 .how-step-arrow をブロック中央 */
  html body .how-step-arrow {
    transform: none !important;
    display: block !important;
    text-align: center !important;
    margin: 16px auto !important;
    width: 100% !important;
    line-height: 1 !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
  }
}

/* === 相談カード・ペア：完全中央寄せ === */
@media (max-width: 900px) {
  html body section.top-consultation > .content-wrapper {
    text-align: center !important;
    padding: 0 12px !important;
  }
  html body section.top-consultation section.sn-consult-section {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body section.top-consultation .sn-consult-section__list {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    place-content: center !important;
  }
  /* ペア div も中央 */
  html body section.top-consultation div.sn-consult-pair {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: center !important;
  }
  html body section.top-consultation div.sn-consult-pair > section[data-pair-col] {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ パンくず・ボタン修正
   ████████████████████████████████████████████████████████████████████ */

/* === パンくず（全幅）横並び・左寄せ修正 === */
html body .breadcrumbs {
  text-align: left !important;
}
html body .breadcrumbs .aioseo-breadcrumbs,
html body .aioseo-breadcrumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 6px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: var(--container-max, 1200px) !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-align: left !important;
}
html body .breadcrumbs .aioseo-breadcrumb,
html body .aioseo-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  flex-shrink: 0 !important;
}
html body .breadcrumbs .aioseo-breadcrumb-separator,
html body .aioseo-breadcrumb-separator {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  flex-shrink: 0 !important;
  padding: 0 2px !important;
}
html body .breadcrumbs .aioseo-breadcrumb a,
html body .aioseo-breadcrumb a {
  display: inline !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
}

/* === モバイル：パンくずのパディング縮小 === */
@media (max-width: 768px) {
  html body .breadcrumbs {
    padding: 10px 16px !important;
    text-align: left !important;
  }
  html body .breadcrumbs .aioseo-breadcrumbs,
  html body .aioseo-breadcrumbs {
    padding: 0 !important;
    font-size: 0.75rem !important;
  }
  html body .breadcrumbs .aioseo-breadcrumb:last-child {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* === モバイル：CTAボタン内コンテンツをセンター === */
@media (max-width: 768px) {
  html body .sn-profile__cta-btn {
    justify-content: center !important;
    text-align: center !important;
  }
  html body .sn-profile__cta-wrap {
    align-items: center !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: 写真余白・本文左寄せ・side-ctaリデザイン
   ████████████████████████████████████████████████████████████████████ */

/* 1. 写真とバッジ間の余白を拡張 */
html body .sn-profile__photo-col {
  gap: 16px !important;
}
html body .sn-profile__badges {
  margin-top: 8px !important;
}

/* 2. プロフィール本文エリアを常に左寄せ */
html body .sn-profile__main-col,
html body .sn-profile__side-col,
html body .sn-profile__main-col *,
html body .sn-profile__section,
html body .sn-profile__section-title,
html body .sn-profile__pr-text,
html body .sn-profile__expert-text,
html body .sn-profile__career-list,
html body .sn-profile__career-row,
html body .sn-profile__career-row dt,
html body .sn-profile__career-row dd,
html body .sn-profile__tag-cloud,
html body .sn-profile__news-list,
html body .sn-profile__news-item {
  text-align: left !important;
}

/* info-col ベース（デスクトップ・タブレット）：左寄せ明示 */
html body .sn-profile__info-col {
  text-align: left !important;
}
/* info-col 内の事務所名・氏名はモバイルでもセンター維持 */
@media (max-width: 768px) {
  html body .sn-profile__info-col {
    text-align: center !important;
  }
  html body .sn-profile__office,
  html body .sn-profile__name,
  html body .sn-profile__license {
    text-align: center !important;
  }
}

/* 3. side-cta：グラデーション外枠を廃止し、hero CTAと統一デザインへ */
html body .sn-profile__side-cta {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* side-cta 内ボタン共通リセット */
html body .sn-profile__side-cta .sn-profile__cta-btn {
  background: transparent !important;
  color: #fff !important;
  flex-direction: row !important;
  justify-content: center !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  gap: 10px !important;
}
/* メールボタン：青グラデーション */
html body .sn-profile__side-cta .sn-profile__cta-btn--mail {
  background: linear-gradient(135deg, #1e5bce 0%, #3a7bd5 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(30, 91, 206, 0.3) !important;
}
/* 電話ボタン：緑グラデーション */
html body .sn-profile__side-cta .sn-profile__cta-btn--tel {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
}
/* サブテキストを白系に */
html body .sn-profile__side-cta .sn-profile__cta-sub {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.8rem !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: ページ右寄せ修正 — .sn-profile の max-width を解除
   .sn-profile { max-width: 900px; margin: 0 auto } が
   1100px コンテナ内で 900px に縮まりページ全体が右寄りに見えていた問題を修正
   ████████████████████████████████████████████████████████████████████ */
html body .sn-profile {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: モバイル横余白削減 + サイドCTAボタン上余白
   ████████████████████████████████████████████████████████████████████ */

/* サイドCTAボタン：上の枠からの余白 */
html body .sn-profile__side-cta {
  margin-top: 16px !important;
}

/* モバイル：横余白を10px削減（body padding の左右を 16px→6px へ） */
@media (max-width: 768px) {
  html body .sn-profile__body {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: pro-card — 得意分野余白・事務所名強調・カード間余白
   ████████████████████████████████████████████████████████████████████ */

/* 1. 得意分野エリア：上下の余白を確保 */
html body .pro-card__specialty {
  padding: 14px 16px 14px !important;
}
/* 得意分野アイコン + テキスト：横並び */
html body .pro-card__specialty-list li {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
html body .pro-card__specialty-icon {
  flex-shrink: 0 !important;
  color: #1E5BCE !important;
}
/* 一言コメント枠：上下に余白 */
html body .pro-card__body {
  padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}

/* 2. 事務所名を強調、氏名は補足扱いに */
html body .pro-card__office {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 2px !important;
}
html body .pro-card__name {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  margin-bottom: 0 !important;
}

/* 3. カード間の余白を拡大 */
html body .sn-page-content--sigyoulist .pro-list-grid {
  gap: 24px !important;
}
@media (max-width: 768px) {
  html body .sn-page-content--sigyoulist .pro-list-grid {
    gap: 20px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: benefit-card — アイコンをタイトルの左横に配置
   ████████████████████████████████████████████████████████████████████ */
html body .benefit-card {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 12px !important;
  align-items: start !important;
}
html body .benefit-card__icon {
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 0 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}
html body .benefit-card__title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}
html body .benefit-card__text {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: 得意分野 PNG アイコンサイズ & PR テキストオーバーフロー修正
   ████████████████████████████████████████████████████████████████████ */

/* 得意分野アイコン：PNG 画像サイズ調整（カード内） */
html body .pro-card__specialty-list .pro-card__specialty-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}
html body .pro-card__specialty-list .pro-card__specialty-icon img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: block !important;
}

/* PR テキスト：パディングとオーバーフロー制御 */
html body .pro-card__pr {
  overflow: hidden !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: バッジ大型化・得意分野3列・士業カラー・定休日赤
   ████████████████████████████████████████████████████████████████████ */

/* 1. バッジ：センター配置＋大型化（モバイル） */
html body .pro-card__badge {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 14px 12px 8px !important;
}
html body .pro-card__badge .shigyo_mark {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  padding: 7px 24px !important;
  letter-spacing: 0.06em !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* 2. 得意分野：横3列グリッド（アイコン左・テキスト右） */
html body .pro-card__specialty-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}
html body .pro-card__specialty-list li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  padding: 5px 7px !important;
  gap: 5px !important;
  font-size: 0.625rem !important;
  line-height: 1.3 !important;
}
html body .pro-card__specialty-list li .pro-card__specialty-icon {
  flex-shrink: 0 !important;
  margin: 0 !important;
}
html body .pro-card__specialty-list li.more {
  grid-column: auto !important;
  justify-content: center !important;
}

/* 3. 士業別カラー：得意分野ラベル・アイテムのアクセントカラー */
/* 弁護士 */
html body .sn-shigyou-bengo .pro-card__specialty { border-top-color: rgba(224,95,95,0.25) !important; background: rgba(224,95,95,0.03) !important; }
html body .sn-shigyou-bengo .pro-card__specialty-label { background: rgba(224,95,95,0.12) !important; color: #c94040 !important; }
html body .sn-shigyou-bengo .pro-card__specialty-list li { border-color: rgba(224,95,95,0.28) !important; }
html body .sn-shigyou-bengo .pro-card__specialty-list li.more { color: #c94040 !important; background: rgba(224,95,95,0.1) !important; }

/* 税理士 */
html body .sn-shigyou-zeiri .pro-card__specialty { border-top-color: rgba(74,158,201,0.25) !important; background: rgba(74,158,201,0.03) !important; }
html body .sn-shigyou-zeiri .pro-card__specialty-label { background: rgba(74,158,201,0.12) !important; color: #2a82a8 !important; }
html body .sn-shigyou-zeiri .pro-card__specialty-list li { border-color: rgba(74,158,201,0.28) !important; }
html body .sn-shigyou-zeiri .pro-card__specialty-list li.more { color: #2a82a8 !important; background: rgba(74,158,201,0.1) !important; }

/* 社会保険労務士 */
html body .sn-shigyou-syarou .pro-card__specialty { border-top-color: rgba(217,85,138,0.25) !important; background: rgba(217,85,138,0.03) !important; }
html body .sn-shigyou-syarou .pro-card__specialty-label { background: rgba(217,85,138,0.12) !important; color: #b83a74 !important; }
html body .sn-shigyou-syarou .pro-card__specialty-list li { border-color: rgba(217,85,138,0.28) !important; }
html body .sn-shigyou-syarou .pro-card__specialty-list li.more { color: #b83a74 !important; background: rgba(217,85,138,0.1) !important; }

/* 司法書士 */
html body .sn-shigyou-shihou .pro-card__specialty { border-top-color: rgba(196,85,201,0.25) !important; background: rgba(196,85,201,0.03) !important; }
html body .sn-shigyou-shihou .pro-card__specialty-label { background: rgba(196,85,201,0.12) !important; color: #9e38a3 !important; }
html body .sn-shigyou-shihou .pro-card__specialty-list li { border-color: rgba(196,85,201,0.28) !important; }
html body .sn-shigyou-shihou .pro-card__specialty-list li.more { color: #9e38a3 !important; background: rgba(196,85,201,0.1) !important; }

/* 公認会計士 */
html body .sn-shigyou-kaikei .pro-card__specialty { border-top-color: rgba(155,104,212,0.25) !important; background: rgba(155,104,212,0.03) !important; }
html body .sn-shigyou-kaikei .pro-card__specialty-label { background: rgba(155,104,212,0.12) !important; color: #7a45b0 !important; }
html body .sn-shigyou-kaikei .pro-card__specialty-list li { border-color: rgba(155,104,212,0.28) !important; }
html body .sn-shigyou-kaikei .pro-card__specialty-list li.more { color: #7a45b0 !important; background: rgba(155,104,212,0.1) !important; }

/* 行政書士 */
html body .sn-shigyou-gyousei .pro-card__specialty { border-top-color: rgba(123,127,212,0.25) !important; background: rgba(123,127,212,0.03) !important; }
html body .sn-shigyou-gyousei .pro-card__specialty-label { background: rgba(123,127,212,0.12) !important; color: #5456c0 !important; }
html body .sn-shigyou-gyousei .pro-card__specialty-list li { border-color: rgba(123,127,212,0.28) !important; }
html body .sn-shigyou-gyousei .pro-card__specialty-list li.more { color: #5456c0 !important; background: rgba(123,127,212,0.1) !important; }

/* 中小企業診断士 */
html body .sn-shigyou-tyusyo .pro-card__specialty { border-top-color: rgba(58,170,107,0.25) !important; background: rgba(58,170,107,0.03) !important; }
html body .sn-shigyou-tyusyo .pro-card__specialty-label { background: rgba(58,170,107,0.12) !important; color: #2a9457 !important; }
html body .sn-shigyou-tyusyo .pro-card__specialty-list li { border-color: rgba(58,170,107,0.28) !important; }
html body .sn-shigyou-tyusyo .pro-card__specialty-list li.more { color: #2a9457 !important; background: rgba(58,170,107,0.1) !important; }

/* 弁理士 */
html body .sn-shigyou-benri .pro-card__specialty { border-top-color: rgba(45,181,160,0.25) !important; background: rgba(45,181,160,0.03) !important; }
html body .sn-shigyou-benri .pro-card__specialty-label { background: rgba(45,181,160,0.12) !important; color: #1a8f80 !important; }
html body .sn-shigyou-benri .pro-card__specialty-list li { border-color: rgba(45,181,160,0.28) !important; }
html body .sn-shigyou-benri .pro-card__specialty-list li.more { color: #1a8f80 !important; background: rgba(45,181,160,0.1) !important; }

/* 不動産鑑定士 */
html body .sn-shigyou-fudo .pro-card__specialty { border-top-color: rgba(106,170,55,0.25) !important; background: rgba(106,170,55,0.03) !important; }
html body .sn-shigyou-fudo .pro-card__specialty-label { background: rgba(106,170,55,0.12) !important; color: #3e8020 !important; }
html body .sn-shigyou-fudo .pro-card__specialty-list li { border-color: rgba(106,170,55,0.28) !important; }
html body .sn-shigyou-fudo .pro-card__specialty-list li.more { color: #3e8020 !important; background: rgba(106,170,55,0.1) !important; }

/* 土地家屋調査士 */
html body .sn-shigyou-tochikaoku .pro-card__specialty { border-top-color: rgba(230,126,34,0.25) !important; background: rgba(230,126,34,0.03) !important; }
html body .sn-shigyou-tochikaoku .pro-card__specialty-label { background: rgba(230,126,34,0.12) !important; color: #c0620a !important; }
html body .sn-shigyou-tochikaoku .pro-card__specialty-list li { border-color: rgba(230,126,34,0.28) !important; }
html body .sn-shigyou-tochikaoku .pro-card__specialty-list li.more { color: #c0620a !important; background: rgba(230,126,34,0.1) !important; }

/* 4. 定休日：赤文字 */
html body .sn-profile__closed-day {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: 得意分野ラベル余白 + 一言パディング確実適用
   ████████████████████████████████████████████████████████████████████ */

/* 得意分野「得意分野」ラベルと下の項目の間隔を広げる */
html body .sn-page-content--sigyoulist .pro-card__specialty-label,
html body .pro-card__specialty-label {
  display: block !important;
  margin-bottom: 10px !important;
}

/* ████████ Fix: 一言コメント（pro-card__pr）パディング確実適用
   .pro-card__pr は背景色・角丸付きのボックスなので、自身のパディングが余白を作る */
html body .sn-page-content--sigyoulist .pro-card .pro-card__body {
  padding: 8px 10px 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body .sn-page-content--sigyoulist .pro-card .pro-card__pr,
html body .sn-page-content--sigyoulist .pro-list-grid .pro-card .pro-card__pr {
  padding: 10px 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  word-break: break-all !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  box-sizing: border-box !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: STEP矢印 — モバイルで↓を1つだけ表示
   原因: .how-it-works .how-step-arrow { rotate(90deg) !important } が
   specificity(0,0,2,0) で勝っていた → html body を加えて (0,0,2,2) に
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {
  /* rotate 解除（specificity 0,0,2,2 で確実に上書き） */
  html body .how-it-works .how-step-arrow {
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin: 8px auto !important;
  }
  /* PC矢印（→）を完全非表示 */
  html body .how-it-works .how-step-arrow .arrow-pc,
  html body .how-it-works .how-step-arrow > .arrow-pc {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* SP矢印（↓）を表示 */
  html body .how-it-works .how-step-arrow .arrow-sp,
  html body .how-it-works .how-step-arrow > .arrow-sp {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 一括Fix:
   1. 士業タブ余白 2. アイコン大きく 3. 相談2列 4. センター
   5. お役立ち2列 6. STEP矢印↓
   ████████████████████████████████████████████████████████████████████ */

/* ── 1. 士業タブボタン：左右パディングを広げてパツパツ解消 ── */
html body section.top-consultation .sn-consult-tabs__item .tag {
  padding: 10px 22px !important;
  white-space: nowrap !important;
}
@media (max-width: 768px) {
  html body section.top-consultation .sn-consult-tabs__item .tag {
    padding: 9px 18px !important;
    font-size: 0.8125rem !important;
  }
}

/* ── 2+3+4. 相談カード：モバイル2列・アイコン大きく・センター ── */
@media (max-width: 1024px) {
  /* 全セクション一律2列グリッド（1frで均等幅） */
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* カード：幅可変・高さ自動 */
  html body section.top-consultation li.sn-consult-grid__item {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    padding: 14px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* アイコン：大きく */
  html body section.top-consultation .sn-consult-icon,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    flex: 0 0 68px !important;
  }
  html body section.top-consultation .sn-consult-icon img,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  /* ラベルテキスト */
  html body section.top-consultation .sn-consult-label {
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

/* ── 5. お役立ち情報：モバイル2列・縦並びカード・センター ── */
@media (max-width: 768px) {
  html body .top-articles .top_articles-list,
  html body section.top-articles .top_articles-list,
  html body .top-articles ul.top_articles-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  html body .top-articles .top_articles-item,
  html body .top-articles li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* カード内：縦並び（画像上・タイトル下） */
  html body .top-articles .top_articles-item a,
  html body section.top-articles li a {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
  }
  /* サムネイル正方形 */
  html body .top-articles .articles-card-thumb,
  html body section.top-articles img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
  /* タイトル：センター・3行省略 */
  html body .top-articles .articles-card-title,
  html body section.top-articles h3,
  html body .top-articles .top_articles-title {
    text-align: center !important;
    font-size: 0.75rem !important;
    -webkit-line-clamp: 3 !important;
  }
  /* セクション全体をセンター */
  html body .top-articles .content-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 6. STEP矢印：::after で↓を直接描画（スパン非表示） ── */
@media (max-width: 768px) {
  html body .how-it-works .how-step-arrow > span {
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  html body .how-it-works .how-step-arrow {
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin: 8px auto !important;
  }
  html body .how-it-works .how-step-arrow::after {
    content: "↓" !important;
    display: block !important;
    font-size: 2rem !important;
    color: rgba(30, 91, 206, 0.5) !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 8件一括Fix:
   1. プロカード写真220px
   2. 得意分野アイコン24px
   3. 一言PRパディング
   4. STEP矢印2重表示解消
   5. 相談カードセクション縦積み
   6. 士業タブ2列
   7. 相談アイコン大きく
   8. 士業一覧タブ2列
   ████████████████████████████████████████████████████████████████████ */

/* ── 2. 得意分野アイコン：サイズアップ ── */
html body .pro-card__specialty-list .pro-card__specialty-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex-shrink: 0 !important;
}
html body .pro-card__specialty-list .pro-card__specialty-icon img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* ── 3. 一言PR：最高優先度パディング (0,0,4,2) ── */
html body .sn-page-content--sigyoulist .pro-list-grid .pro-card .pro-card__body {
  padding: 8px 10px 10px !important;
  box-sizing: border-box !important;
}
html body .sn-page-content--sigyoulist .pro-list-grid .pro-card .pro-card__body .pro-card__pr {
  padding: 8px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-all !important;
}

/* ── 4. STEP矢印2重表示解消：.arrow-sp を明示的に非表示
        specificity (0,0,3,2) = 同等だが後に書くのでカスケードで勝つ ── */
@media (max-width: 768px) {
  html body .how-it-works .how-step-arrow .arrow-sp,
  html body .how-it-works .how-step-arrow .arrow-pc {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
}

/* ── 5. 相談カードセクション：モバイルで縦積み（横スクロール解消） ── */
@media (max-width: 768px) {
  /* content-wrapperをブロック化 */
  html body section.top-consultation > .content-wrapper {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  /* ペア：縦に積む */
  html body section.top-consultation .sn-consult-pair {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  /* ペア内のセクション：フル幅 */
  html body section.top-consultation .sn-consult-pair > section,
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  /* スタンドアロンセクションもフル幅 */
  html body section.top-consultation .sn-consult-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  /* リスト自体：横スクロール解消 */
  html body section.top-consultation .sn-consult-section__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 6. 相談内容一覧タブ：モバイル2列（3列→2列に上書き） ── */
@media (max-width: 768px) {
  html body section.top-consultation .sn-consult-tabs__list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── 6b. 士業一覧ページのタブバー：モバイル2列 ── */
@media (max-width: 768px) {
  html body .sn-page-content--sigyoulist .sn-consult-tabs__inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  html body .sn-page-content--sigyoulist .sn-consult-tab {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

/* ── 7. 相談アイコン：モバイルでさらに大きく ── */
@media (max-width: 768px) {
  html body section.top-consultation .sn-consult-icon,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    flex: 0 0 72px !important;
  }
  html body section.top-consultation .sn-consult-icon img,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
  html body section.top-consultation li.sn-consult-grid__item {
    height: auto !important;
    min-height: 140px !important;
    max-height: none !important;
  }
  html body section.top-consultation li.sn-consult-grid__item > a {
    height: auto !important;
    min-height: 140px !important;
    max-height: none !important;
    padding: 16px 8px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 追加Fix:
   A. お役立ち情報 2列（正しいセレクター: top_articles アンダースコア）
   B. 相談カードアイコン・ラベル センター強化
   ████████████████████████████████████████████████████████████████████ */

/* ── A. お役立ち情報：モバイル2列（正しいセレクター） ── */
@media (max-width: 768px) {
  html body .top_articles .top_articles-list,
  html body section.top_articles .top_articles-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .top_articles .top_articles-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* カード内：縦並び（画像上・タイトル下） */
  html body .top_articles .top_articles-item > a,
  html body .top_articles .top_articles-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 8px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* サムネイル：横幅100%・縦横比4:3 */
  html body .top_articles .articles-card-thumb {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  html body .top_articles .articles-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* タイトルボックス：センター */
  html body .top_articles .title_box {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  html body .top_articles .title_box .title,
  html body .top_articles .top_articles-title {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    margin: 0 !important;
  }
  html body .top_articles .article-date {
    display: block !important;
    font-size: 0.65rem !important;
    text-align: center !important;
    margin-top: 4px !important;
  }
}

/* ── B. 相談カードアイコン・テキスト：センター強化 ── */
html body section.top-consultation li.sn-consult-grid__item > a,
html body section.top-consultation .sn-consult-grid__item a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body section.top-consultation .sn-consult-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}
html body section.top-consultation .sn-consult-icon img,
html body section.top-consultation .sn-consult-icon svg {
  display: block !important;
  margin: 0 auto !important;
}
html body section.top-consultation .sn-consult-label {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ PRテキスト padding 完全修正：モバイル媒体クエリ内でも確実に
   ████████████████████████████████████████████████████████████████████ */

/* モバイル内で padding:0 を上書きする高優先度ルール */
@media (max-width: 768px) {
  html body .sn-page-content--sigyoulist .pro-list-grid .pro-card__body {
    padding: 6px 10px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  html body .sn-page-content--sigyoulist .pro-list-grid .pro-card__body .pro-card__pr,
  html body .sn-page-content--sigyoulist .pro-list-grid .pro-card .pro-card__pr {
    padding: 8px 10px !important;
    margin: 0 !important;
    background: rgba(248,250,252,0.9) !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* 得意分野アイコン：画像が表示されるよう確実に */
html body .pro-card__specialty-list li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: rgba(248,250,252,0.8) !important;
  border: 1px solid rgba(203,213,225,0.5) !important;
  white-space: normal !important;
}
html body .pro-card__specialty-list li .pro-card__specialty-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .pro-card__specialty-list li .pro-card__specialty-icon img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  object-fit: contain !important;
}
html body .pro-card__specialty-list li > span:last-child {
  font-size: 0.65rem !important;
  line-height: 1.3 !important;
  color: #374151 !important;
  word-break: break-all !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ FINAL COMPREHENSIVE FIX (10 issues)
   1. 写真縦幅（トップページ）
   2. 得意分野アイコン → PHP側で修正済み
   3. 一言PRパディング（トップページ）
   4. STEP矢印2重 → 完全書き直し
   5. マップ士業バッジの対応案件切れ
   6. 相談内容タブ 2カラム（display:grid明示）
   7. 各士業内容リスト レイアウト修正
   8. お知らせ日付 縦表示→横表示
   9. お悩みジャンル センター
   10. STEP矢印下向き → #4と同時修正
   ████████████████████████████████████████████████████████████████████ */

/* ── Issue 1 & (top page) : プロカード写真 高さ 220px ── */
html body .top_pickup .pro-card__photo,
html body .latest_pro .pro-card__photo,
html body .pro-card-list .pro-card__photo {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .top_pickup .pro-card__photo img,
html body .latest_pro .pro-card__photo img,
html body .pro-card-list .pro-card__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* ── Issue 3 (top page) : 一言PR パディング ── */
html body .top_pickup .pro-card__body,
html body .latest_pro .pro-card__body,
html body .pro-card-list .pro-card__body {
  padding: 6px 10px 8px !important;
  box-sizing: border-box !important;
}
html body .top_pickup .pro-card__pr,
html body .latest_pro .pro-card__pr,
html body .pro-card-list .pro-card__pr {
  padding: 8px 12px !important;
  background: rgba(248,250,252,0.9) !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* ── Issue 4 & 10 : STEP矢印 完全書き直し ── */
/* ::after を全面キャンセル（既存の↓疑似要素を消す） */
html body .how-it-works .how-step-arrow::after {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
/* デスクトップ：PC矢印(→)のみ表示 */
html body .how-it-works .how-step-arrow .arrow-pc {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 2rem !important;
  color: #1e5bce !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
}
html body .how-it-works .how-step-arrow .arrow-sp {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
/* モバイル(≤768px)：SP矢印(↓)のみ表示、PC矢印非表示 */
@media (max-width: 768px) {
  html body .how-it-works .how-step-arrow::after {
    content: none !important;
    display: none !important;
  }
  html body .how-it-works .how-step-arrow .arrow-pc {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  html body .how-it-works .how-step-arrow .arrow-sp {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    -webkit-writing-mode: horizontal-tb !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important;
  }
  html body .how-it-works .how-step-arrow {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin: 8px auto !important;
    overflow: visible !important;
    transform: none !important;
    width: 100% !important;
  }
}

/* ── Issue 5 : マップ士業バッジ 対応案件切れ修正 ── */
html body .search_cat .kensaku-badgers .pro-badger-card {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
html body .search_cat .kensaku-badgers .pro-badgers_list {
  overflow: visible !important;
  height: auto !important;
}
html body .search_cat .kensaku-badgers .pro-badger-topics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  overflow: visible !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: auto !important;
  max-height: none !important;
}
html body .search_cat .kensaku-badgers .pro-badger-topics li {
  display: inline-block !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  padding: 2px 0 !important;
}

/* ── Issue 6 : 相談内容タブ 2カラム（display:grid 明示） ── */
@media (max-width: 768px) {
  html body section.top-consultation .sn-consult-tabs__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body section.top-consultation .sn-consult-tabs__item {
    width: 100% !important;
    min-width: 0 !important;
    list-style: none !important;
  }
  html body section.top-consultation .sn-consult-tabs__item .tag {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-all !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }
}

/* ── Issue 7 : 各士業内容リスト レイアウト修正 ── */
@media (max-width: 768px) {
  /* 2カラムグリッド確定 */
  html body section.top-consultation .sn-consult-section__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  /* カードアイテム：高さ自動 */
  html body section.top-consultation li.sn-consult-grid__item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: none !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  /* カードリンク：flex縦並び・中央揃え */
  html body section.top-consultation li.sn-consult-grid__item > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: none !important;
    padding: 12px 6px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
  }
  /* ペア：縦積み */
  html body section.top-consultation .sn-consult-pair {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }
  html body section.top-consultation .sn-consult-pair > section,
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* アイコン */
  html body section.top-consultation .sn-consult-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: block !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ── Issue 8 : お知らせ日付 縦表示→横表示 ── */
html body .info-notice-item__date,
html body .info-notice-item .info-notice-item__date,
html body .info-notice-board .info-notice-item__date {
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  display: block !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
}

/* ── Issue 9 : お悩みジャンル（相談内容）セクション センター揃え ── */
html body section.top-consultation .main_title,
html body section.top-consultation .main_title h2,
html body section.top-consultation .main_title p {
  text-align: center !important;
}
html body section.top-consultation > .content-wrapper {
  text-align: center !important;
}
html body section.top-consultation .sn-consult-section__head {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}
html body section.top-consultation .sn-consult-tabs {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  html body section.top-consultation > .content-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  html body section.top-consultation .sn-consult-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* ── how-guarantees : モバイル2カラム ── */
@media (max-width: 768px) {
  html body .how-it-works .how-guarantees {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 12px !important;
    padding: 0 !important;
    list-style: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .how-it-works .how-guarantees li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    word-break: break-all !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ ULTRA-FIX v2 — body.home 最高特異性で全競合を完全上書き
   問題：既存ルール(0,3,2)等が(0,2,3)の前修正を上書きしていた
   解決：body.home + element selectors で(0,4,x)超高特異性確保
   ████████████████████████████████████████████████████████████████████ */

/* ──────────────────────────────────────────────────────────────────
   STEP矢印：::before / ::after 両方キャンセル + PC/SP 明示切替
   競合: html body .how-step-arrow::before { content:"↓" } (0,1,3)
   勝利: html body.home .how-it-works .how-step-arrow::before (0,3,3)
   ────────────────────────────────────────────────────────────────── */
html body.home .how-it-works .how-step-arrow::before,
html body.home .how-it-works .how-step-arrow::after {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
/* デスクトップ共通：矢印コンテナ */
html body.home .how-it-works .how-step-arrow {
  font-size: 0 !important; /* スパン以外のテキストを非表示 */
  color: transparent !important;
  transform: none !important;
}
/* デスクトップ：PC矢印(→)のみ表示 */
html body.home .how-it-works .how-step-arrow .arrow-pc {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 2rem !important;
  color: #1e5bce !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  transform: none !important;
}
html body.home .how-it-works .how-step-arrow .arrow-sp {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
/* モバイル(≤768px)：SP矢印(↓)のみ、コンテナ回転なし */
@media (max-width: 768px) {
  html body.home .how-it-works .how-step-arrow {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin: 8px auto !important;
    overflow: visible !important;
    transform: none !important;
    width: 100% !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  html body.home .how-it-works .how-step-arrow .arrow-pc {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  html body.home .how-it-works .how-step-arrow .arrow-sp {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 2rem !important;
    color: #1e5bce !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   how-guarantees：モバイル2カラム
   競合: .how-guarantees { display:flex !important } (0,1,0)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html body.home .how-it-works ul.how-guarantees {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 12px !important;
    padding: 0 !important;
    list-style: none !important;
    margin: 32px auto 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
  html body.home .how-it-works ul.how-guarantees li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    word-break: break-all !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   相談内容タブ：モバイル2カラム
   競合: html body .top-consultation .sn-consult-tabs .sn-consult-tabs__list
         { grid-template-columns: repeat(5,1fr) !important } (0,3,2)
   勝利: html body.home .top-consultation .sn-consult-tabs
         ul.sn-consult-tabs__list  (0,4,3)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html body.home .top-consultation .sn-consult-tabs ul.sn-consult-tabs__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    flex-wrap: unset !important;
  }
  html body.home .top-consultation .sn-consult-tabs ul.sn-consult-tabs__list li.sn-consult-tabs__item {
    width: 100% !important;
    min-width: 0 !important;
    list-style: none !important;
  }
  html body.home .top-consultation .sn-consult-tabs ul.sn-consult-tabs__list li.sn-consult-tabs__item .tag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-all !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
  html body.home div.sn-consult-tabs {
    overflow: visible !important;
    overflow-x: visible !important;
  }
}

/* 相談内容リスト：CSS側は削除。functions.php の fixConsultCards() JS で inline style 制御 */

/* ──────────────────────────────────────────────────────────────────
   AIチャット機能：スタイル
   ────────────────────────────────────────────────────────────────── */
.sn-ai-chat {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8f9ff 100%);
  border-radius: 20px;
  padding: 40px 32px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.sn-ai-chat::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,91,206,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.sn-ai-chat__header {
  text-align: center;
  margin-bottom: 28px;
}
.sn-ai-chat__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #1e5bce, #14b8a6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.sn-ai-chat__title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 800;
  color: #1a202c;
  margin: 0 0 8px;
  line-height: 1.4;
}
.sn-ai-chat__sub {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}
.sn-ai-chat__form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.sn-ai-chat__input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-family: inherit;
  background: #fff;
  color: #1a202c;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.sn-ai-chat__input:focus {
  border-color: #1e5bce;
  box-shadow: 0 0 0 3px rgba(30,91,206,0.12);
}
.sn-ai-chat__input::placeholder {
  color: #94a3b8;
}
.sn-ai-chat__btn {
  padding: 14px 24px;
  background: linear-gradient(135deg, #1e5bce, #2563eb);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sn-ai-chat__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30,91,206,0.35);
}
.sn-ai-chat__btn:active { transform: translateY(0); }
.sn-ai-chat__btn svg { flex-shrink: 0; }
.sn-ai-chat__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  justify-content: center;
}
.sn-ai-chat__example {
  padding: 6px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.8125rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.sn-ai-chat__example:hover {
  border-color: #1e5bce;
  color: #1e5bce;
  background: #f0f4ff;
}
.sn-ai-chat__result {
  display: none;
  animation: sn-chat-fade-in 0.3s ease;
}
.sn-ai-chat__result.is-visible { display: block; }
@keyframes sn-chat-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sn-ai-chat__result-label {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sn-ai-chat__result-label::before {
  content: '✦';
  color: #1e5bce;
}
.sn-ai-chat__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.sn-ai-chat__card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  border: 1.5px solid #e8f0fe;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
}
.sn-ai-chat__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30,91,206,0.12);
  border-color: #1e5bce;
}
.sn-ai-chat__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sn-ai-chat__card-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.sn-ai-chat__card-score {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-left: auto;
}
.sn-ai-chat__card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}
.sn-ai-chat__card-desc {
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}
.sn-ai-chat__card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.sn-ai-chat__card-topic {
  font-size: 0.7rem;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
}
.sn-ai-chat__card-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e5bce;
  margin-top: 4px;
}
.sn-ai-chat__card-link svg { flex-shrink: 0; }
.sn-ai-chat__no-result {
  text-align: center;
  padding: 24px;
  color: #94a3b8;
  font-size: 0.9375rem;
}
.sn-ai-chat__thinking {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 16px;
  border: 1.5px solid #e8f0fe;
}
.sn-ai-chat__thinking.is-visible { display: flex; }
.sn-ai-chat__dots {
  display: flex;
  gap: 4px;
}
.sn-ai-chat__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1e5bce;
  animation: sn-dot-bounce 1.2s infinite ease-in-out;
}
.sn-ai-chat__dots span:nth-child(1) { animation-delay: 0s; }
.sn-ai-chat__dots span:nth-child(2) { animation-delay: 0.2s; }
.sn-ai-chat__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sn-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}
@media (max-width: 768px) {
  .sn-ai-chat { padding: 28px 20px; }
  .sn-ai-chat__form { flex-direction: column; }
  .sn-ai-chat__btn { width: 100%; justify-content: center; }
  .sn-ai-chat__cards { grid-template-columns: 1fr; }
  .sn-ai-chat__examples { gap: 6px; }
  .sn-ai-chat__example { font-size: 0.75rem; padding: 5px 12px; }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 相談カード最終確定FIX（ファイル末尾 = 最高ソース順優先）
   wide/compact→3列、medium/mini→2列、高さauto
   Specificity notes:
     grid cols:  (0,3,3) > line-16171's (0,3,3) by source order
     li height:  (0,3,5) > "FINAL FIX" (0,3,5) by source order
     a  height:  (0,3,6) > "FINAL FIX" (0,3,6) by source order
   ████████████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {

  /* ── グリッド列数：wide/compact → 3列 ── */
  html body section.top-consultation .sn-consult-section--wide .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--compact .sn-consult-section__list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
  }

  /* ── グリッド列数：medium/mini → 2列（確定） ── */
  html body section.top-consultation .sn-consult-section--medium .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section--mini .sn-consult-section__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── grid-auto-rows: auto（ベース ul にも） ── */
  html body section.top-consultation ul.sn-consult-section__list {
    grid-auto-rows: auto !important;
  }

  /* ── li：高さ auto（FINAL FIX 160px / 130px を最終上書き） ── */
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* ── a：フルに活用・アイコンが映えるパディング ── */
  html body section.top-consultation ul.sn-consult-section__list li.sn-consult-grid__item > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    padding: 16px 6px 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
  }

  /* ── アイコン：カード幅の約60%・大きく鮮明に ── */
  html body section.top-consultation .sn-consult-icon,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    flex: 0 0 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body section.top-consultation .sn-consult-icon img,
  html body section.top-consultation li.sn-consult-grid__item .sn-consult-icon img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* ── ラベル ── */
  html body section.top-consultation .sn-consult-label {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    color: #1a202c !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix: 得意分野バッジ — テキスト縦積み修正
   原因: repeat(3,1fr) グリッドで各セルが狭すぎ、テキストが1文字ずつ縦に積まれる
   対応: flex-wrap レイアウトに変更、white-space: nowrap でバッジを横1行固定
   ████████████████████████████████████████████████████████████████████ */
html body .pro-card__specialty-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  grid-template-columns: none !important; /* grid上書きを明示解除 */
}
html body .pro-card__specialty-list li {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  white-space: nowrap !important;     /* アイコン+テキストを1行に固定 */
  padding: 3px 8px 3px 5px !important;
  font-size: 0.65rem !important;
  line-height: 1.35 !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
}
html body .pro-card__specialty-list li .pro-card__specialty-icon {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  writing-mode: horizontal-tb !important;
}
html body .pro-card__specialty-list li .pro-card__specialty-icon img {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  object-fit: contain !important;
}
html body .pro-card__specialty-list li span:not(.pro-card__specialty-icon) {
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  display: inline !important;
}
html body .pro-card__specialty-list li.more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix① 相談カードペア内の縦ずれ修正
   align-self: flex-start を各セクションに明示し、上揃えを保証
   ████████████████████████████████████████████████████████████████████ */
html body section.top-consultation .sn-consult-pair {
  align-items: flex-start !important;
}
html body section.top-consultation .sn-consult-pair > .sn-consult-section {
  align-self: flex-start !important;
  vertical-align: top !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix② info-mag-header 下の装飾ラインを左寄りから中央に
   ████████████████████████████████████████████████████████████████████ */
html body .info-mag-header::after,
html body .info-mag-header--notice::after,
html body .info-mag-header--voice::after {
  margin: 16px auto 0 !important;
  display: block !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ Fix③ join_kaiketsu テキスト視認性修正
   backdrop-filter 干渉を除去し、ラッパーを明確に暗く・テキスト確実に白く
   ████████████████████████████████████████████████████████████████████ */
html body .join_kaiketsu .join_kaiketsu-wrapper {
  background: rgba(0, 10, 30, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
html body .join_kaiketsu .join_intro h4 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}
html body .join_kaiketsu .join_intro .description {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}
html body .join_kaiketsu .join_intro h4::after {
  background: linear-gradient(90deg, #62C8D3 0%, #fff 100%) !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 資格確認済バッジを資格バッジの下に固定
   flex-direction: column → 全カードコンテキストで縦並び保証
   ████████████████████████████████████████████████████████████████████ */
html body .pro-card__badge {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}
/* ::after（functions.php 由来）の margin-top を gap に委ねる */
html body .pro-card__badge::after {
  margin-top: 0 !important;
}

/* sn-verified-badge：page-sigyoulist.php で直接出力 */
html body .pro-card__badge .sn-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #059669 !important;
  background: #f0fdf4 !important;
  border: 1px solid #6ee7b7 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}
/* 士業一覧ページでは ::after を非表示（HTML 版に一本化） */
html body .sn-page-content--sigyoulist .pro-card__badge::after {
  display: none !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 士業一覧ページ：プロカード 劇的横並びリデザイン
   ████████████████████████████████████████████████████████████████████ */

/* ── グリッド：デスクトップ 2カラム ── */
@media (min-width: 768px) {
  html body .sn-page-content--sigyoulist .pro-list-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (min-width: 1200px) {
  html body .sn-page-content--sigyoulist .pro-list-grid {
    gap: 24px !important;
  }
}

/* ── カード本体：角丸・影・ホバーアニメーション ── */
html body .sn-page-content--sigyoulist .pro-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  position: relative !important;
}
html body .sn-page-content--sigyoulist .pro-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.14), 0 0 0 1px rgba(30,91,206,0.18) !important;
  transform: translateY(-4px) !important;
}

/* ── リンク：CSS Grid 横並びレイアウト（≥600px） ── */
@media (min-width: 600px) {
  html body .sn-page-content--sigyoulist .pro-card .pro-card__link {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    grid-template-areas:
      "badge     badge"
      "photo     info"
      "photo     specialty"
      "photo     pr"
      "cta       cta" !important;
    min-height: 260px !important;
  }

  /* バッジエリア：フル幅・横ライン */
  html body .sn-page-content--sigyoulist .pro-card__badge {
    grid-area: badge !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 18px 10px !important;
    background: #fafbfd !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 0 !important;
    gap: 5px !important;
  }

  /* 写真エリア：左カラム・高さ全体に引き延ばし */
  html body .sn-page-content--sigyoulist .pro-card__photo {
    grid-area: photo !important;
    width: 150px !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(0,0,0,0.07) !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: stretch !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__photo img {
    width: 150px !important;
    height: 100% !important;
    min-height: 190px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__no-photo {
    width: 150px !important;
    min-height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    padding: 24px !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__no-photo img {
    width: 80px !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 0.35 !important;
  }

  /* 事務所・氏名エリア */
  html body .sn-page-content--sigyoulist .pro-card__info {
    grid-area: info !important;
    padding: 14px 16px 6px !important;
    min-width: 0 !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__office {
    font-size: 0.72rem !important;
    color: #64748b !important;
    margin: 0 0 4px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__name {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 得意分野エリア */
  html body .sn-page-content--sigyoulist .pro-card__specialty {
    grid-area: specialty !important;
    padding: 4px 16px 4px !important;
    margin: 0 !important;
    border-top: none !important;
    background: transparent !important;
  }

  /* PR コメントエリア */
  html body .sn-page-content--sigyoulist .pro-card__body {
    grid-area: pr !important;
    padding: 4px 16px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    align-self: start !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__pr {
    font-size: 0.78rem !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* CTA エリア：グリッドエリア割り当て */
  html body .sn-page-content--sigyoulist .pro-card__cta {
    grid-area: cta !important;
  }
}

/* ── CTA ボタン（全幅・全画面サイズ共通） ── */
html body .sn-page-content--sigyoulist .pro-card__cta {
  padding: 10px 16px 12px !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  background: #f8fafc !important;
}
html body .sn-page-content--sigyoulist .pro-card__cta-btn {
  display: block !important;
  text-align: center !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #154598 100%) !important;
  color: #ffffff !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  transition: opacity 0.2s ease !important;
}
html body .sn-page-content--sigyoulist .pro-card:hover .pro-card__cta-btn {
  opacity: 0.88 !important;
}

/* ── モバイル（≤599px）：縦積みを保持しつつ CTA 追加 ── */
@media (max-width: 599px) {
  html body .sn-page-content--sigyoulist .pro-card__badge {
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px 12px 8px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ STRATEGIC OVERHAUL 2025 — 競合超越スタイル追加
   ████████████████████████████████████████████████████████████████████ */

/* ── 注目士業 enhanced（FEATURED trust row） ── */
html body .sn-pickup-enhanced .sn-pickup-trust-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}
html body .sn-pickup-trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #1E5BCE !important;
  background: #eff6ff !important;
  border: 1px solid rgba(30,91,206,0.2) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}
html body .sn-pickup-enhanced .main_title p {
  color: #475569 !important;
  font-size: 0.88rem !important;
}

/* ── 新着士業 enhanced（NEW eyebrow） ── */
html body .sn-latest-enhanced .main_title .main_title__eyebrow {
  color: #059669 !important;
}

/* ── 都道府県アコーディオン ── */
html body .sn-pref-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-align: left !important;
  margin-bottom: 0 !important;
  transition: background 0.2s !important;
}
html body .sn-pref-accordion-toggle:hover {
  background: #eff6ff !important;
  color: #1E5BCE !important;
}
html body .sn-pref-accordion-icon {
  margin-left: auto !important;
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
}
html body .sn-pref-accordion-panel {
  margin-top: 4px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  background: #fff !important;
}
html body .sn-pref-accordion-panel[hidden] {
  display: none !important;
}

/* ── 解決ストーリーセクション ── */
html body .sn-resolution-stories {
  background: #f8fafc !important;
  padding: 64px 0 !important;
}
html body .sn-stories-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 40px !important;
}
@media (max-width: 900px) {
  html body .sn-stories-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  html body .sn-stories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
html body .sn-story-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
html body .sn-story-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px) !important;
}
html body .sn-story-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
html body .sn-story-category {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
html body .sn-story-category--bengo {
  background: rgba(224,95,95,0.12) !important;
  color: #c94040 !important;
}
html body .sn-story-category--shihou {
  background: rgba(196,85,201,0.12) !important;
  color: #9e38a3 !important;
}
html body .sn-story-category--zeiri {
  background: rgba(74,158,201,0.12) !important;
  color: #2a82a8 !important;
}
html body .sn-story-duration {
  font-size: 0.68rem !important;
  color: #64748b !important;
  white-space: nowrap !important;
}
html body .sn-story-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
html body .sn-story-body {
  font-size: 0.82rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  flex: 1 !important;
}
html body .sn-story-expert {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}
html body .sn-story-link {
  display: inline-block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #1E5BCE !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  margin-top: 4px !important;
}
html body .sn-story-link:hover {
  opacity: 0.75 !important;
}
html body .sn-stories-note {
  text-align: center !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 20px !important;
}

/* ── インタビュー CTA ボタン ── */
html body .interview-card__cta-btn {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #154598 100%) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  transition: opacity 0.2s !important;
}
html body .interview-card__cta-btn:hover {
  opacity: 0.88 !important;
  color: #ffffff !important;
}

/* ── join_kaiketsu 強化スタイル ── */
html body .sn-join-enhanced .join_intro__eyebrow {
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}
html body .sn-join-enhanced .join_intro h4 {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}
html body .sn-join-enhanced .join_intro .description strong {
  color: #62C8D3 !important;
}

/* 数値実績バンド */
html body .join-stats-band {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 24px 0 !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 20px 16px !important;
}
@media (max-width: 600px) {
  html body .join-stats-band {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
html body .join-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
html body .join-stat__num {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: #62C8D3 !important;
  line-height: 1 !important;
}
html body .join-stat__unit {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.8) !important;
}
html body .join-stat__label {
  font-size: 0.65rem !important;
  color: rgba(255,255,255,0.65) !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* 3大メリットリスト */
html body .sn-join-benefits {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}
html body .sn-join-benefit {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
html body .sn-join-benefit__icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(98,200,211,0.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #62C8D3 !important;
}
html body .sn-join-benefit__body strong {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}
html body .sn-join-benefit__body p {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.75) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* 連携事例ハイライト */
html body .join-collab-highlight {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  border: 1px solid rgba(98,200,211,0.25) !important;
}
html body .join-collab-highlight__label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #62C8D3 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}
html body .join-collab-cases {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .join-collab-case {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body .join-collab-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}
html body .join-collab-badge--bengo {
  background: rgba(224,95,95,0.25) !important;
  color: #fca5a5 !important;
}
html body .join-collab-badge--zeiri {
  background: rgba(74,158,201,0.25) !important;
  color: #93c5fd !important;
}
html body .join-collab-badge--shihou {
  background: rgba(196,85,201,0.25) !important;
  color: #e9b5eb !important;
}
html body .join-collab-badge--gyousei {
  background: rgba(123,127,212,0.25) !important;
  color: #c7d2fe !important;
}
html body .join-collab-arrow {
  font-weight: 900 !important;
  color: #62C8D3 !important;
  font-size: 0.85rem !important;
}
html body .join-collab-desc {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.75) !important;
}

/* 士業の声 */
html body .join-voice {
  background: rgba(255,255,255,0.05) !important;
  border-left: 3px solid #62C8D3 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
}
html body .join-voice__quote {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.7 !important;
  font-style: italic !important;
  margin: 0 0 8px !important;
}
html body .join-voice__author {
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.55) !important;
  font-style: normal !important;
  display: block !important;
}

/* CTA ボタン強化 */
html body .sn-join-cta-btn {
  font-size: 1rem !important;
  font-weight: 800 !important;
  padding: 16px 40px !important;
  letter-spacing: 0.06em !important;
  background: linear-gradient(135deg, #62C8D3 0%, #1E5BCE 100%) !important;
  box-shadow: 0 6px 24px rgba(98,200,211,0.4) !important;
}
html body .join-cta-note {
  text-align: center !important;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 10px !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 全 main_title__eyebrow 共通スタイル
   ████████████████████████████████████████████████████████████████████ */
html body .main_title__eyebrow {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #1E5BCE !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
html body .sn-resolution-stories .main_title__eyebrow {
  color: #059669 !important;
}
html body .sn-pickup-enhanced .main_title__eyebrow {
  color: #d97706 !important;
}
html body .sn-latest-enhanced .main_title__eyebrow {
  color: #059669 !important;
}

/* ────────────────────────────────────────────────────────────
   解決ストーリー：モバイル最適化追加
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .sn-resolution-stories {
    padding: 40px 0 !important;
  }
  html body .sn-story-card {
    padding: 20px !important;
  }
  html body .sn-story-title {
    font-size: 0.95rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   注目士業の Trust Row：モバイル時の調整
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  html body .sn-pickup-trust-badge {
    font-size: 0.66rem !important;
    padding: 4px 9px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   join_kaiketsu モバイル調整：数値バンド・連携事例
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .join-stat__num {
    font-size: 1.4rem !important;
  }
  html body .sn-join-benefit {
    padding: 14px !important;
  }
  html body .sn-join-benefit__icon {
    width: 36px !important;
    height: 36px !important;
  }
  html body .join-collab-highlight {
    padding: 16px !important;
  }
  html body .join-collab-case {
    flex-wrap: wrap !important;
  }
  html body .join-collab-desc {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  html body .sn-join-cta-btn {
    font-size: 0.92rem !important;
    padding: 14px 28px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   都道府県アコーディオン：モバイル時のフォントサイズ調整
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .sn-pref-accordion-toggle {
    font-size: 0.82rem !important;
    padding: 11px 14px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   フローティング相談CTA：詳細ページでより目立たせる
   ──────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  html body.single-shigyo-list .sn-floating-cta,
  html body.single .sn-floating-cta {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   セクション間の余白統一：競合超えのきれいなリズム
   ──────────────────────────────────────────────────────────── */
html body section.top-ai-chat {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
html body section.top_pickup.sn-pickup-enhanced {
  padding-top: 48px !important;
}
html body section.sn-resolution-stories {
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   インタビュー CTA ボタン：モバイル
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .interview-card__cta-btn {
    font-size: 0.72rem !important;
    padding: 7px 14px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 連携バッジ（pro-card__badge 内）
   ████████████████████████████████████████████████████████████████████ */
html body .pro-card__badge .sn-collab-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #b45309 !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1px solid #fbbf24 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(180,83,9,0.15) !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ publish-collaboration セクション（B2B最大の差別化）
   ████████████████████████████████████████████████████████████████████ */
html body .publish-collaboration {
  background: linear-gradient(180deg, #fefce8 0%, #fff 100%) !important;
  padding: 80px 0 !important;
  position: relative !important;
}
html body .publish-collaboration::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important;
  background: linear-gradient(90deg, #d97706 0%, #1E5BCE 100%) !important;
}
html body .publish-collaboration .publish-section__eyebrow--gold {
  color: #d97706 !important;
}
html body .publish-collaboration .publish-section__title {
  background: linear-gradient(135deg, #92400e 0%, #1E5BCE 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 3つの連携メリット：グリッド */
html body .collab-benefits {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 48px 0 !important;
}
html body .collab-benefit {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 32px 24px 28px !important;
  border: 1px solid rgba(217,119,6,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  position: relative !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
html body .collab-benefit:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(217,119,6,0.18) !important;
}
html body .collab-benefit__num {
  position: absolute !important;
  top: -14px !important;
  right: 24px !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: #d97706 !important;
  background: #fff !important;
  padding: 0 10px !important;
  letter-spacing: 0.05em !important;
}
html body .collab-benefit__icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #d97706 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}
html body .collab-benefit__title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 12px !important;
  line-height: 1.4 !important;
}
html body .collab-benefit__body {
  font-size: 0.84rem !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
html body .collab-benefit__body strong {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* 連携解決シナリオ */
html body .collab-scenarios {
  margin-top: 64px !important;
}
html body .collab-scenarios__title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 32px !important;
  text-align: center !important;
}
html body .collab-scenarios__title svg {
  color: #d97706 !important;
}
html body .collab-scenario-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
html body .collab-scenario {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
html body .collab-scenario__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
html body .collab-scenario__category {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-radius: 999px !important;
}
html body .collab-scenario__pros {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
html body .collab-pro-tag {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
}
html body .collab-pro-tag--bengo { background: #e05f5f !important; }
html body .collab-pro-tag--zeiri { background: #4a9ec9 !important; }
html body .collab-pro-tag--shihou { background: #c455c9 !important; }
html body .collab-pro-tag--syarou { background: #d9558a !important; }
html body .collab-pro-tag--kaikei { background: #9b68d4 !important; }
html body .collab-pro-tag--gyousei { background: #7b7fd4 !important; }
html body .collab-pro-tag--tyusyo { background: #3aaa6b !important; }
html body .collab-pro-tag--benri { background: #2db5a0 !important; }
html body .collab-pro-tag-x {
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
}
html body .collab-scenario__user-issue {
  background: #f1f5f9 !important;
  border-left: 3px solid #94a3b8 !important;
  padding: 12px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  font-style: italic !important;
  margin: 0 0 16px !important;
  line-height: 1.6 !important;
}
html body .collab-scenario__flow {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 16px 0 !important;
  flex-wrap: wrap !important;
}
html body .collab-flow-step {
  flex: 1 !important;
  min-width: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #fefce8 !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  padding: 10px 8px !important;
  text-align: center !important;
}
html body .collab-flow-step__role {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #b45309 !important;
}
html body .collab-flow-step__action {
  font-size: 0.78rem !important;
  color: #334155 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
html body .collab-flow-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: #d97706 !important;
  padding: 0 4px !important;
}
html body .collab-scenario__benefit {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1px solid #6ee7b7 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  color: #065f46 !important;
  line-height: 1.5 !important;
}
html body .collab-scenario__benefit strong {
  font-weight: 800 !important;
  color: #047857 !important;
}
html body .collab-scenario__benefit::before {
  content: '✓ ' !important;
  font-weight: 900 !important;
  color: #059669 !important;
}

/* 士業の声ブロック */
html body .collab-voice-block {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  margin-top: 48px !important;
  border-left: 4px solid #d97706 !important;
}
html body .collab-voice p {
  font-size: 1rem !important;
  color: #0f172a !important;
  line-height: 1.8 !important;
  margin: 0 0 12px !important;
  font-style: italic !important;
}
html body .collab-voice cite {
  display: block !important;
  font-size: 0.82rem !important;
  color: #92400e !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★★★ SP（スマホ）完璧対応：全セクション包括的モバイル最適化 ★★★★★
   ████████████████████████████████████████████████████████████████████ */

/* ── スマホ判定（767px以下） ── */
@media (max-width: 767px) {

  /* publish-collaboration */
  html body .publish-collaboration {
    padding: 48px 0 !important;
  }
  html body .collab-benefits {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 32px 0 !important;
  }
  html body .collab-benefit {
    padding: 24px 20px !important;
  }
  html body .collab-benefit__icon {
    width: 52px !important;
    height: 52px !important;
  }
  html body .collab-benefit__title {
    font-size: 0.98rem !important;
  }
  html body .collab-benefit__body {
    font-size: 0.8rem !important;
  }
  html body .collab-scenarios__title {
    font-size: 1.15rem !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  html body .collab-scenario {
    padding: 18px !important;
  }
  html body .collab-scenario__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  html body .collab-scenario__pros {
    gap: 4px !important;
  }
  html body .collab-pro-tag {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
  html body .collab-scenario__flow {
    flex-direction: column !important;
    gap: 6px !important;
  }
  html body .collab-flow-step {
    flex-direction: row !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 8px 14px !important;
  }
  html body .collab-flow-arrow {
    transform: rotate(90deg) !important;
    align-self: center !important;
  }
  html body .collab-voice-block {
    padding: 22px !important;
  }
  html body .collab-voice p {
    font-size: 0.88rem !important;
  }

  /* ── 解決ストーリー（front-page） ── */
  html body .sn-resolution-stories {
    padding: 36px 0 !important;
  }
  html body .sn-stories-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .sn-story-card {
    padding: 18px !important;
  }
  html body .sn-story-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body .sn-story-title {
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
  }
  html body .sn-story-body {
    font-size: 0.79rem !important;
    line-height: 1.6 !important;
  }

  /* ── 注目士業 trust row ── */
  html body .sn-pickup-enhanced .sn-pickup-trust-row {
    gap: 6px !important;
  }
  html body .sn-pickup-trust-badge {
    font-size: 0.62rem !important;
    padding: 4px 10px !important;
  }

  /* ── join_kaiketsu（B2B） ── */
  html body .join_kaiketsu .join_intro h4 {
    font-size: 1.2rem !important;
  }
  html body .join_kaiketsu .join_intro .description {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
  }
  html body .join-stats-band {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px 12px !important;
  }
  html body .join-stat__num {
    font-size: 1.3rem !important;
  }
  html body .join-stat__unit {
    font-size: 0.65rem !important;
  }
  html body .join-stat__label {
    font-size: 0.6rem !important;
  }
  html body .sn-join-benefits {
    gap: 10px !important;
  }
  html body .sn-join-benefit {
    padding: 14px !important;
    gap: 12px !important;
  }
  html body .sn-join-benefit__icon {
    width: 36px !important;
    height: 36px !important;
  }
  html body .sn-join-benefit__body strong {
    font-size: 0.88rem !important;
  }
  html body .sn-join-benefit__body p {
    font-size: 0.74rem !important;
  }
  html body .join-collab-highlight {
    padding: 16px !important;
  }
  html body .join-collab-case {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
  }
  html body .join-collab-arrow {
    display: none !important;
  }
  html body .join-collab-desc {
    font-size: 0.72rem !important;
    width: 100% !important;
  }
  html body .join-voice__quote {
    font-size: 0.76rem !important;
    line-height: 1.65 !important;
  }
  html body .sn-join-cta-btn {
    font-size: 0.9rem !important;
    padding: 14px 24px !important;
  }
  html body .join-cta-note {
    font-size: 0.68rem !important;
  }

  /* ── 都道府県アコーディオン ── */
  html body .sn-pref-accordion-toggle {
    font-size: 0.8rem !important;
    padding: 11px 14px !important;
    gap: 6px !important;
  }
  html body .sn-pref-accordion-panel {
    padding: 10px 8px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dl {
    margin-bottom: 8px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dt {
    font-size: 0.78rem !important;
    margin-bottom: 4px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dd ul {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dd ul li a {
    font-size: 0.74rem !important;
    padding: 4px 8px !important;
  }

  /* ── インタビュー CTA ── */
  html body .interview-card__cta-btn {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
    margin-top: 8px !important;
  }
  html body .interview-card__body {
    padding: 14px !important;
  }
  html body .interview-card__title {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  html body .interview-card__profile {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  html body .interview-card__role,
  html body .interview-card__name,
  html body .interview-card__office {
    font-size: 0.72rem !important;
  }

  /* ── 連携バッジ（pro-card） ── */
  html body .pro-card__badge .sn-collab-badge {
    font-size: 0.54rem !important;
    padding: 2px 6px !important;
  }

  /* ── プロカード（士業一覧 / モバイル） ── */
  html body .sn-page-content--sigyoulist .pro-card__badge {
    gap: 4px !important;
    padding: 10px 10px 8px !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__name {
    font-size: 0.95rem !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__cta-btn {
    font-size: 0.78rem !important;
    padding: 9px 18px !important;
  }

  /* ── how-it-works ── */
  html body .how-it-works {
    padding: 36px 0 !important;
  }
  html body .how-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  html body .how-lead {
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
  }
  html body .how-guarantees {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  html body .how-guarantees li {
    font-size: 0.72rem !important;
  }

  /* ── AIチャット ── */
  html body .sn-ai-chat {
    padding: 24px 16px !important;
  }
  html body .sn-ai-chat__title {
    font-size: 1.2rem !important;
  }
  html body .sn-ai-chat__sub {
    font-size: 0.78rem !important;
  }
  html body .sn-ai-chat__examples {
    gap: 6px !important;
  }
  html body .sn-ai-chat__example {
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
  }
  html body .sn-ai-chat__input {
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
  }
  html body .sn-ai-chat__btn {
    font-size: 0.82rem !important;
    padding: 10px 18px !important;
  }

  /* ── 専門コラム グリッド ── */
  html body .sn-articles-pro__list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── main_title 全体 ── */
  html body .main_title h2 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  html body .main_title p {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
  }
  html body .main_title__eyebrow {
    font-size: 0.66rem !important;
  }

  /* ── 相談内容一覧（10士業セクション） ── */
  html body .sn-consult-section {
    margin-bottom: 24px !important;
  }
  html body .sn-consult-section__head {
    margin-bottom: 16px !important;
  }
  html body .sn-consult-section__list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  html body .sn-consult-pair {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── 注目専門家・新着専門家：余白調整 ── */
  html body section.top_pickup,
  html body section.latest_pro {
    padding: 36px 0 !important;
  }

  /* ── 専門家インタビュー リスト ── */
  html body .top-interview__list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── スマホ小（〜480px）：さらに詰める ── */
@media (max-width: 480px) {
  html body .sn-story-card {
    padding: 16px !important;
  }
  html body .sn-story-title {
    font-size: 0.88rem !important;
  }
  html body .collab-benefit {
    padding: 20px 16px !important;
  }
  html body .join-stats-band {
    padding: 14px 10px !important;
    gap: 10px !important;
  }
  html body .join-stat__num {
    font-size: 1.15rem !important;
  }
  html body .sn-page-content--sigyoulist .pro-card__cta-btn {
    font-size: 0.74rem !important;
  }
  html body .main_title h2 {
    font-size: 1.25rem !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 異業種対談ハイライト（top-interview ブロック内）
   ████████████████████████████████████████████████████████████████████ */
html body .top-interview__dialogue-highlight {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e5bce 100%) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  margin: 0 0 36px !important;
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(30,91,206,0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .top-interview__dialogue-highlight::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(98,200,211,0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
html body .dialogue-highlight__inner {
  position: relative !important;
  z-index: 1 !important;
}
html body .dialogue-highlight__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  background: #62C8D3 !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 14px !important;
}
html body .dialogue-highlight__title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 0 14px !important;
  color: #fff !important;
}
html body .dialogue-highlight__desc {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 24px !important;
}
html body .dialogue-highlight__topics {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .dialogue-highlight__topics li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  flex-wrap: wrap !important;
}
html body .dialogue-topic-tag {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  color: #fff !important;
  white-space: nowrap !important;
}
html body .dialogue-topic-tag.bd-bengo { background: #e05f5f !important; }
html body .dialogue-topic-tag.bd-zeiri { background: #4a9ec9 !important; }
html body .dialogue-topic-tag.bd-shihou { background: #c455c9 !important; }
html body .dialogue-topic-tag.bd-syarou { background: #d9558a !important; }
html body .dialogue-topic-tag.bd-gyousei { background: #7b7fd4 !important; }
html body .dialogue-topic-arrow {
  color: #62C8D3 !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
}
html body .dialogue-topic-text {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
}

/* 対談ハイライト：モバイル */
@media (max-width: 767px) {
  html body .top-interview__dialogue-highlight {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  html body .dialogue-highlight__title {
    font-size: 1.15rem !important;
  }
  html body .dialogue-highlight__desc {
    font-size: 0.82rem !important;
  }
  html body .dialogue-highlight__topics li {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 14px !important;
  }
  html body .dialogue-topic-tag {
    font-size: 0.68rem !important;
  }
  html body .dialogue-topic-text {
    font-size: 0.78rem !important;
    width: 100% !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ EDITOR'S PICKS：編集部おすすめ SEO重点コラム
   ████████████████████████████████████████████████████████████████████ */
html body .sn-seo-columns {
  background: linear-gradient(180deg, #f1f5f9 0%, #fff 100%) !important;
  padding: 64px 0 !important;
}
html body .sn-seo-columns .main_title__eyebrow {
  color: #d97706 !important;
}
html body .sn-seo-columns__ai-link {
  color: #1E5BCE !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* タブ */
html body .sn-seo-columns__tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 24px 0 32px !important;
}
html body .sn-seo-columns__tab {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html body .sn-seo-columns__tab:hover {
  background: #eff6ff !important;
  border-color: #1E5BCE !important;
  color: #1E5BCE !important;
}
html body .sn-seo-columns__tab.is-active {
  background: linear-gradient(135deg, #1E5BCE 0%, #154598 100%) !important;
  border-color: #1E5BCE !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(30,91,206,0.25) !important;
}

/* グリッド */
html body .sn-seo-columns__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* カード */
html body .sn-seo-column {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
  transition: all 0.25s !important;
  position: relative !important;
}
html body .sn-seo-column:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.13) !important;
}
html body .sn-seo-column__link {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 22px 22px 18px !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100% !important;
}
html body .sn-seo-column__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
html body .sn-seo-column__cat {
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
html body .sn-seo-column__cat--bengo { background: rgba(224,95,95,0.14) !important; color: #c94040 !important; }
html body .sn-seo-column__cat--zeiri { background: rgba(74,158,201,0.14) !important; color: #2a82a8 !important; }
html body .sn-seo-column__cat--shihou { background: rgba(196,85,201,0.14) !important; color: #9e38a3 !important; }
html body .sn-seo-column__cat--gyousei { background: rgba(123,127,212,0.14) !important; color: #5456c0 !important; }
html body .sn-seo-column__cat--syarou { background: rgba(217,85,138,0.14) !important; color: #b83a74 !important; }
html body .sn-seo-column__cat--kaikei { background: rgba(155,104,212,0.14) !important; color: #7a45b0 !important; }
html body .sn-seo-column__cat--tyusyo { background: rgba(58,170,107,0.14) !important; color: #2a9457 !important; }
html body .sn-seo-column__cat--benri { background: rgba(45,181,160,0.14) !important; color: #1a8f80 !important; }
html body .sn-seo-column__cat--collab {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #b45309 !important;
  border: 1px solid #fbbf24 !important;
}

html body .sn-seo-column__badge {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
  background: #fee2e2 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
html body .sn-seo-column__title {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .sn-seo-column__teaser {
  font-size: 0.8rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .sn-seo-column__tags {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
html body .sn-seo-column__tags li {
  font-size: 0.66rem !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}
html body .sn-seo-column__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1E5BCE !important;
  align-self: flex-start !important;
  padding-top: 10px !important;
  border-top: 1px dashed #e2e8f0 !important;
  width: 100% !important;
}
html body .sn-seo-column:hover .sn-seo-column__cta {
  color: #154598 !important;
}

/* 連携カード：特別な装飾 */
html body .sn-seo-column--collab {
  background: linear-gradient(135deg, #fffbeb 0%, #fff 60%) !important;
  border: 1px solid #fde68a !important;
}
html body .sn-seo-column--collab::before {
  content: '⭐ 相談ナビ独自' !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  color: #b45309 !important;
  background: rgba(255,255,255,0.85) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
}

/* 下部CTA */
html body .sn-seo-columns__bottom-cta {
  text-align: center !important;
  margin-top: 36px !important;
}
html body .sn-seo-columns__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #1E5BCE 0%, #154598 100%) !important;
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 8px 24px rgba(30,91,206,0.3) !important;
  transition: all 0.2s !important;
}
html body .sn-seo-columns__cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(30,91,206,0.4) !important;
  color: #fff !important;
}

/* SP最適化（767px以下） */
@media (max-width: 767px) {
  html body .sn-seo-columns {
    padding: 40px 0 !important;
  }
  html body .sn-seo-columns__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .sn-seo-columns__tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 18px -16px 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body .sn-seo-columns__tab {
    font-size: 0.76rem !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  html body .sn-seo-column__link {
    padding: 18px 18px 14px !important;
    gap: 8px !important;
  }
  html body .sn-seo-column__title {
    font-size: 0.9rem !important;
    -webkit-line-clamp: 4 !important;
  }
  html body .sn-seo-column__teaser {
    font-size: 0.76rem !important;
  }
  html body .sn-seo-columns__cta-btn {
    font-size: 0.84rem !important;
    padding: 13px 24px !important;
    width: 100% !important;
    max-width: 360px !important;
    justify-content: center !important;
  }
  html body .sn-seo-column--collab::before {
    font-size: 0.55rem !important;
  }
}

/* タブレット（768-1199px）：2カラム */
@media (min-width: 768px) and (max-width: 1199px) {
  html body .sn-seo-columns__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ AI診断 結果表示 完全実装スタイル
   ████████████████████████████████████████████████████████████████████ */

/* Thinking スピナー */
html body .sn-ai-chat__thinking {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 18px !important;
  margin: 20px 0 0 !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1E5BCE !important;
}
html body .sn-ai-chat__thinking[style*="flex"] {
  display: flex !important;
}
html body .sn-ai-chat__dots {
  display: flex !important;
  gap: 4px !important;
}
html body .sn-ai-chat__dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #1E5BCE !important;
  display: inline-block !important;
  animation: sn-ai-dot 1.2s infinite ease-in-out !important;
}
html body .sn-ai-chat__dots span:nth-child(2) { animation-delay: 0.2s !important; }
html body .sn-ai-chat__dots span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes sn-ai-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* 結果表示エリア全体 */
html body .sn-ai-chat__result {
  margin-top: 24px !important;
  padding: 20px !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08) !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.3s, transform 0.3s !important;
}
html body .sn-ai-chat__result.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
html body .sn-ai-chat__result-label {
  font-size: 0.95rem !important;
  color: #0f172a !important;
  margin: 0 0 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
html body .sn-ai-chat__result-label strong {
  color: #1E5BCE !important;
  font-weight: 800 !important;
}

/* 連携おすすめパネル */
html body .sn-ai-result-collab {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
  border: 2px solid #fbbf24 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}
html body .sn-ai-result-collab::before {
  content: '★ AI連携おすすめ' !important;
  position: absolute !important;
  top: -10px !important;
  left: 16px !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.05em !important;
}
html body .sn-ai-result-collab__head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
html body .sn-ai-result-collab__icon {
  font-size: 1.6rem !important;
}
html body .sn-ai-result-collab__head-text {
  flex: 1 !important;
}
html body .sn-ai-result-collab__badge {
  display: none !important;
}
html body .sn-ai-result-collab__title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #92400e !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
html body .sn-ai-result-collab__note {
  font-size: 0.82rem !important;
  color: #78350f !important;
  margin: 8px 0 12px !important;
  line-height: 1.65 !important;
}
html body .sn-ai-result-collab__pros {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
html body .sn-ai-result-collab__pro {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
html body .sn-ai-result-collab__plus {
  font-weight: 900 !important;
  color: #b45309 !important;
  font-size: 0.9rem !important;
}
html body .sn-ai-result-collab__cta {
  display: block !important;
  text-align: center !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  transition: opacity 0.2s !important;
  box-shadow: 0 4px 14px rgba(217,119,6,0.35) !important;
}
html body .sn-ai-result-collab__cta:hover {
  opacity: 0.88 !important;
  color: #fff !important;
}

/* 個別士業カードグリッド */
html body .sn-ai-result-pros {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
html body .sn-ai-result-pro {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 4px solid #1E5BCE !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
html body .sn-ai-result-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}
html body .sn-ai-result-pro__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .sn-ai-result-pro__emoji {
  font-size: 1.4rem !important;
}
html body .sn-ai-result-pro__name {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
html body .sn-ai-result-pro__cats {
  font-size: 0.74rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
html body .sn-ai-result-pro__actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  flex-wrap: wrap !important;
}
html body .sn-ai-result-pro__btn {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: center !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
html body .sn-ai-result-pro__btn:hover {
  background: #e0e7ff !important;
  color: #1E5BCE !important;
}
html body .sn-ai-result-pro__btn--primary {
  background: linear-gradient(135deg, #1E5BCE 0%, #154598 100%) !important;
  color: #fff !important;
  border-color: #1E5BCE !important;
}
html body .sn-ai-result-pro__btn--primary:hover {
  opacity: 0.9 !important;
  color: #fff !important;
}

/* 下部フッター */
html body .sn-ai-result-foot {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px dashed #e2e8f0 !important;
  text-align: center !important;
}
html body .sn-ai-result-foot p {
  font-size: 0.78rem !important;
  color: #64748b !important;
  margin: 0 0 8px !important;
}
html body .sn-ai-result-foot__reset {
  display: inline-block !important;
  background: transparent !important;
  border: 1px solid #1E5BCE !important;
  color: #1E5BCE !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html body .sn-ai-result-foot__reset:hover {
  background: #1E5BCE !important;
  color: #fff !important;
}

/* SP（≤767px） */
@media (max-width: 767px) {
  html body .sn-ai-chat__result {
    padding: 16px !important;
    margin-top: 18px !important;
  }
  html body .sn-ai-chat__result-label {
    font-size: 0.86rem !important;
  }
  html body .sn-ai-result-collab {
    padding: 16px 14px !important;
  }
  html body .sn-ai-result-collab__title {
    font-size: 0.92rem !important;
  }
  html body .sn-ai-result-collab__note {
    font-size: 0.76rem !important;
  }
  html body .sn-ai-result-collab__pro {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  html body .sn-ai-result-collab__cta {
    font-size: 0.82rem !important;
    padding: 10px 16px !important;
  }
  html body .sn-ai-result-pros {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body .sn-ai-result-pro {
    padding: 14px !important;
  }
  html body .sn-ai-result-pro__btn {
    font-size: 0.72rem !important;
  }
  html body .sn-ai-chat__examples {
    gap: 6px !important;
  }
  html body .sn-ai-chat__example {
    font-size: 0.72rem !important;
    padding: 7px 12px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急修正：join_kaiketsu「士業間連携で難件も解決」カードの幅崩れ
   旧 .topbenifits の3カラムグリッド残骸を完全に無効化
   ████████████████████████████████████████████████████████████████████ */
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  gap: 14px !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
}
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit::before,
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit::after {
  display: none !important;
  content: none !important;
}
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit p {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit p::before {
  display: none !important;
  content: none !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急修正：不動産鑑定士 × 土地家屋調査士 ペアの縦ずれ
   .sn-consult-pair の2カラムグリッドを強制
   ████████████████████████████████████████████████████████████████████ */
@media (min-width: 768px) {
  html body section.top-consultation .sn-consult-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: column !important;
    gap: 32px !important;
    align-items: start !important;
    margin: 32px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
  }
  /* 1番目のセクション → 左カラム、2番目 → 右カラム を強制 */
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(1) {
    grid-column: 1 !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(2) {
    grid-column: 2 !important;
  }
  /* セクション内のヘッダー（士業バッジ）が同じ高さで揃うように */
  html body section.top-consultation .sn-consult-pair > .sn-consult-section > .sn-consult-section__head {
    margin: 0 0 24px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* SP（767px以下）はペアを縦積み */
@media (max-width: 767px) {
  html body section.top-consultation .sn-consult-pair {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: none !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急修正：join_kaiketsu 3メリットカード内テキストの可視性
   p 要素の色・opacity・text-fill-color を完全に強制
   ████████████████████████████████████████████████████████████████████ */
html body section.join_kaiketsu ul.sn-join-benefits li.sn-join-benefit .sn-join-benefit__body,
html body section.join_kaiketsu ul.topbenifits li.sn-join-benefit .sn-join-benefit__body,
html body section.join_kaiketsu .sn-join-benefit__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-align: left !important;
}

/* タイトル：strong */
html body section.join_kaiketsu ul.sn-join-benefits li.sn-join-benefit .sn-join-benefit__body strong,
html body section.join_kaiketsu ul.topbenifits li.sn-join-benefit .sn-join-benefit__body strong,
html body section.join_kaiketsu .sn-join-benefit__body strong {
  display: block !important;
  visibility: visible !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  background: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 説明：p */
html body section.join_kaiketsu ul.sn-join-benefits li.sn-join-benefit .sn-join-benefit__body p,
html body section.join_kaiketsu ul.topbenifits li.sn-join-benefit .sn-join-benefit__body p,
html body section.join_kaiketsu ul.topbenifits.sn-join-benefits li.sn-join-benefit .sn-join-benefit__body p,
html body section.join_kaiketsu .sn-join-benefit__body p,
html body .join_kaiketsu .sn-join-benefit p {
  display: block !important;
  visibility: visible !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  letter-spacing: 0.01em !important;
}

/* もし旧 .topbenifits li p ルールが p を直接ターゲットしている場合の保険 */
html body section.join_kaiketsu .topbenifits li.sn-join-benefit p {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
}

/* アイコン円：きちんと可視に */
html body section.join_kaiketsu .sn-join-benefit__icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(98,200,211,0.22) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #62C8D3 !important;
  opacity: 1 !important;
}
html body section.join_kaiketsu .sn-join-benefit__icon svg {
  color: #62C8D3 !important;
  opacity: 1 !important;
}

/* SP（767px以下）：3カードのテキストサイズ調整 */
@media (max-width: 767px) {
  html body section.join_kaiketsu .sn-join-benefit__body strong {
    font-size: 0.94rem !important;
  }
  html body section.join_kaiketsu .sn-join-benefit__body p {
    font-size: 0.78rem !important;
    line-height: 1.65 !important;
  }
  html body section.join_kaiketsu .sn-join-benefit__icon {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 最終修正：sn-consult-pair の左右セクション完全整列
   grid-template-areas で位置を物理的に固定
   ████████████████████████████████████████████████████████████████████ */
@media (min-width: 768px) {
  /* ペアコンテナ：明示的なエリア定義 */
  html body section.top-consultation div.sn-consult-pair,
  html body div.sn-consult-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "col-left col-right" !important;
    grid-auto-flow: row !important;
    gap: 32px !important;
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;
    margin: 32px auto !important;
    width: 100% !important;
    max-width: 1080px !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  /* 1番目（左カラム） data-pair-col="1" */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section[data-pair-col="1"],
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:first-of-type,
  html body div.sn-consult-pair > section.sn-consult-section:nth-child(1) {
    grid-area: col-left !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2番目（右カラム） data-pair-col="2" */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section[data-pair-col="2"],
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:last-of-type,
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section:nth-child(2),
  html body div.sn-consult-pair > section.sn-consult-section:nth-child(2) {
    grid-area: col-right !important;
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* バッジヘッダー：高さを揃える */
  html body section.top-consultation div.sn-consult-pair > section.sn-consult-section > header.sn-consult-section__head {
    margin: 0 0 24px !important;
    padding: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 緊急修正：publish-value「「無料」だけじゃない価値」タイトル可視性
   暗背景セクションのタイトルが暗色になっていた問題を強制白文字で解消
   ████████████████████████████████████████████████████████████████████ */
html body section.publish-value {
  background: #0f2a5e !important;
  color: #ffffff !important;
}
html body section.publish-value .publish-section__eyebrow {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
  opacity: 1 !important;
}
html body section.publish-value .publish-section__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  opacity: 1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html body section.publish-value .publish-section__title::after {
  background: linear-gradient(90deg, #62C8D3, #93c5fd) !important;
}
html body section.publish-value .publish-section__desc {
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}

/* value-grid 内のカードテキストも確実に白く */
html body section.publish-value .value-item__label,
html body section.publish-value .value-item__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
html body section.publish-value .value-item__desc,
html body section.publish-value .value-item__desc p {
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
  opacity: 1 !important;
}
html body section.publish-value .value-item__desc strong {
  color: #62C8D3 !important;
  -webkit-text-fill-color: #62C8D3 !important;
  font-weight: 800 !important;
}

/* 暗背景セクション全般のタイトル可視性保険（publish-* 系） */
html body section[class*="publish-"][style*="background"],
html body section.publish-value,
html body section.publish-results {
  /* 念のため何もしない（既存背景を保持） */
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 都道府県アコーディオン 完全リデザイン（全47都道府県を美しく表示）
   ████████████████████████████████████████████████████████████████████ */

/* アコーディオン トグルボタン：洗練された見た目 */
html body .sn-pref-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 16px 22px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
  text-align: left !important;
  margin: 0 !important;
  transition: all 0.25s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
html body .sn-pref-accordion-toggle:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #1E5BCE !important;
  color: #1E5BCE !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(30,91,206,0.15) !important;
}
html body .sn-pref-accordion-toggle svg {
  flex-shrink: 0 !important;
  color: #1E5BCE !important;
}
html body .sn-pref-accordion-icon {
  margin-left: auto !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  transition: transform 0.3s !important;
}

/* アコーディオン パネル：高さ制限を完全に解除 */
html body .sn-pref-accordion-panel {
  margin-top: 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
}
html body .sn-pref-accordion-panel[hidden] {
  display: none !important;
}

/* todofuken グリッド：10エリアを綺麗に配置 */
html body .sn-pref-accordion-panel .todofuken {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 18px !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 各エリアブロック（dl）：カード化 */
html body .sn-pref-accordion-panel .todofuken dl {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}
html body .sn-pref-accordion-panel .todofuken dl:hover {
  border-color: #1E5BCE !important;
  box-shadow: 0 6px 18px rgba(30,91,206,0.1) !important;
  transform: translateY(-2px) !important;
}

/* エリアタイトル（dt）：左にカラーバー */
html body .sn-pref-accordion-panel .todofuken dt {
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border-bottom: none !important;
  border-left: 4px solid !important;
  min-width: 0 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

/* 都道府県リスト */
html body .sn-pref-accordion-panel .todofuken dd {
  margin: 0 !important;
  padding: 0 !important;
}
html body .sn-pref-accordion-panel .todofuken ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  column-gap: 6px !important;
  row-gap: 6px !important;
}

/* 各都道府県：チップ化 */
html body .sn-pref-accordion-panel .todofuken ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body .sn-pref-accordion-panel .todofuken ul li a,
html body .sn-pref-accordion-panel .todofuken a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
html body .sn-pref-accordion-panel .todofuken ul li a:hover {
  background: #1E5BCE !important;
  color: #ffffff !important;
  border-color: #1E5BCE !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30,91,206,0.25) !important;
}

/* エリア別カラーアクセント（dt左バー + ホバー時のチップカラー） */
html body .sn-pref-accordion-panel .todofuken dl.hokkai dt   { color: #5eacbe !important; border-color: #5eacbe !important; }
html body .sn-pref-accordion-panel .todofuken dl.tohoku dt   { color: #619cc0 !important; border-color: #619cc0 !important; }
html body .sn-pref-accordion-panel .todofuken dl.kanto dt    { color: #6893c8 !important; border-color: #6893c8 !important; }
html body .sn-pref-accordion-panel .todofuken dl.hokuriku dt { color: #8f90bc !important; border-color: #8f90bc !important; }
html body .sn-pref-accordion-panel .todofuken dl.chubu dt    { color: #ad7399 !important; border-color: #ad7399 !important; }
html body .sn-pref-accordion-panel .todofuken dl.chikoku dt  { color: #d76e7c !important; border-color: #d76e7c !important; }
html body .sn-pref-accordion-panel .todofuken dl.chukoku dt  { color: #dc953e !important; border-color: #dc953e !important; }
html body .sn-pref-accordion-panel .todofuken dl.shikoku dt  { color: #e9ad33 !important; border-color: #e9ad33 !important; }
html body .sn-pref-accordion-panel .todofuken dl.kyushu dt   { color: #afbe63 !important; border-color: #afbe63 !important; }
html body .sn-pref-accordion-panel .todofuken dl.okinawa dt  { color: #77aa5b !important; border-color: #77aa5b !important; }

/* エリア別カードのホバー時カラーアクセント */
html body .sn-pref-accordion-panel .todofuken dl.hokkai:hover  { border-color: #5eacbe !important; box-shadow: 0 6px 18px rgba(94,172,190,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.tohoku:hover  { border-color: #619cc0 !important; box-shadow: 0 6px 18px rgba(97,156,192,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.kanto:hover   { border-color: #6893c8 !important; box-shadow: 0 6px 18px rgba(104,147,200,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.hokuriku:hover{ border-color: #8f90bc !important; box-shadow: 0 6px 18px rgba(143,144,188,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.chubu:hover   { border-color: #ad7399 !important; box-shadow: 0 6px 18px rgba(173,115,153,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.chikoku:hover { border-color: #d76e7c !important; box-shadow: 0 6px 18px rgba(215,110,124,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.chukoku:hover { border-color: #dc953e !important; box-shadow: 0 6px 18px rgba(220,149,62,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.shikoku:hover { border-color: #e9ad33 !important; box-shadow: 0 6px 18px rgba(233,173,51,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.kyushu:hover  { border-color: #afbe63 !important; box-shadow: 0 6px 18px rgba(175,190,99,0.15) !important; }
html body .sn-pref-accordion-panel .todofuken dl.okinawa:hover { border-color: #77aa5b !important; box-shadow: 0 6px 18px rgba(119,170,91,0.15) !important; }

/* 親コンテナの overflow を解除（隠す原因排除） */
html body .kensaku-prefectures {
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
html body #top-index,
html body #kensaku {
  max-height: none !important;
  overflow: visible !important;
}

/* SP（767px以下）：1カラム＋詰めたパディング */
@media (max-width: 767px) {
  html body .sn-pref-accordion-toggle {
    padding: 13px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }
  html body .sn-pref-accordion-panel {
    padding: 14px !important;
    margin-top: 8px !important;
    border-radius: 12px !important;
  }
  html body .sn-pref-accordion-panel .todofuken {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dl {
    padding: 14px !important;
    gap: 10px !important;
  }
  html body .sn-pref-accordion-panel .todofuken dt {
    font-size: 0.88rem !important;
    padding-left: 10px !important;
  }
  html body .sn-pref-accordion-panel .todofuken ul li a {
    font-size: 0.74rem !important;
    padding: 5px 10px !important;
  }
}

/* タブレット（768-1023px）：2カラム */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .sn-pref-accordion-panel .todofuken {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* デスクトップ（1024px+）：3カラム */
@media (min-width: 1024px) {
  html body .sn-pref-accordion-panel .todofuken {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 相談内容一覧：各士業セクションに枠（カード化）
   ████████████████████████████████████████████████████████████████████ */

/* 各士業セクション本体を枠化 */
html body section.top-consultation .sn-consult-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px 24px 24px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  position: relative !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}
html body section.top-consultation .sn-consult-section:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.08) !important;
}

/* セクション上部にカラーアクセントバー（士業ごとに色を変える） */
html body section.top-consultation .sn-consult-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 4px !important;
  border-radius: 0 0 4px 4px !important;
  background: #cbd5e1 !important;
}

/* 士業ごとのアクセントカラー */
html body section.top-consultation .sn-consult-section#bengo::before { background: linear-gradient(90deg, #e05f5f, #f87171) !important; }
html body section.top-consultation .sn-consult-section#zeiri::before { background: linear-gradient(90deg, #4a9ec9, #60a5fa) !important; }
html body section.top-consultation .sn-consult-section#gyousei::before { background: linear-gradient(90deg, #7b7fd4, #a5b4fc) !important; }
html body section.top-consultation .sn-consult-section#shihou::before { background: linear-gradient(90deg, #c455c9, #e879f9) !important; }
html body section.top-consultation .sn-consult-section#syarou::before { background: linear-gradient(90deg, #d9558a, #f472b6) !important; }
html body section.top-consultation .sn-consult-section#kaikei::before { background: linear-gradient(90deg, #9b68d4, #c084fc) !important; }
html body section.top-consultation .sn-consult-section#tyusyo::before { background: linear-gradient(90deg, #3aaa6b, #4ade80) !important; }
html body section.top-consultation .sn-consult-section#benri::before { background: linear-gradient(90deg, #2db5a0, #2dd4bf) !important; }
html body section.top-consultation .sn-consult-section#fudo::before { background: linear-gradient(90deg, #6aaa37, #84cc16) !important; }
html body section.top-consultation .sn-consult-section#tochikaoku::before { background: linear-gradient(90deg, #e6791a, #fb923c) !important; }

/* ホバー時の枠カラー強調 */
html body section.top-consultation .sn-consult-section#bengo:hover { border-color: rgba(224,95,95,0.4) !important; box-shadow: 0 10px 32px rgba(224,95,95,0.12) !important; }
html body section.top-consultation .sn-consult-section#zeiri:hover { border-color: rgba(74,158,201,0.4) !important; box-shadow: 0 10px 32px rgba(74,158,201,0.12) !important; }
html body section.top-consultation .sn-consult-section#gyousei:hover { border-color: rgba(123,127,212,0.4) !important; box-shadow: 0 10px 32px rgba(123,127,212,0.12) !important; }
html body section.top-consultation .sn-consult-section#shihou:hover { border-color: rgba(196,85,201,0.4) !important; box-shadow: 0 10px 32px rgba(196,85,201,0.12) !important; }
html body section.top-consultation .sn-consult-section#syarou:hover { border-color: rgba(217,85,138,0.4) !important; box-shadow: 0 10px 32px rgba(217,85,138,0.12) !important; }
html body section.top-consultation .sn-consult-section#kaikei:hover { border-color: rgba(155,104,212,0.4) !important; box-shadow: 0 10px 32px rgba(155,104,212,0.12) !important; }
html body section.top-consultation .sn-consult-section#tyusyo:hover { border-color: rgba(58,170,107,0.4) !important; box-shadow: 0 10px 32px rgba(58,170,107,0.12) !important; }
html body section.top-consultation .sn-consult-section#benri:hover { border-color: rgba(45,181,160,0.4) !important; box-shadow: 0 10px 32px rgba(45,181,160,0.12) !important; }
html body section.top-consultation .sn-consult-section#fudo:hover { border-color: rgba(106,170,55,0.4) !important; box-shadow: 0 10px 32px rgba(106,170,55,0.12) !important; }
html body section.top-consultation .sn-consult-section#tochikaoku:hover { border-color: rgba(230,121,26,0.4) !important; box-shadow: 0 10px 32px rgba(230,121,26,0.12) !important; }

/* ペアセクション（左右2カラム）内の枠を維持 */
@media (min-width: 768px) {
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    margin-bottom: 0 !important;
    height: 100% !important;
  }
  html body section.top-consultation .sn-consult-pair {
    margin-bottom: 28px !important;
    align-items: stretch !important;
  }
}

/* SP（767以下）：枠のパディングを詰める */
@media (max-width: 767px) {
  html body section.top-consultation .sn-consult-section {
    padding: 26px 16px 18px !important;
    margin-bottom: 18px !important;
    border-radius: 14px !important;
  }
  html body section.top-consultation .sn-consult-section::before {
    left: 16px !important;
    right: 16px !important;
  }
}

/* 士業バッジ（ヘッダー）を枠内で目立たせる */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head {
  margin-top: 4px !important;
  margin-bottom: 22px !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 最終決定版：相談内容ペアセクションの完全整列
   過去全ての .sn-consult-pair ルールを上書き
   ████████████████████████████████████████████████████████████████████ */
@media (min-width: 768px) {
  html body section.top-consultation .sn-consult-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 28px !important;
    align-items: stretch !important;
    align-content: start !important;
    margin: 0 auto 28px !important;
    width: 100% !important;
    max-width: 1080px !important;
    box-sizing: border-box !important;
    position: static !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    float: none !important;
    height: auto !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(1) {
    grid-column: 1 !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(2) {
    grid-column: 2 !important;
  }
}

/* search_cat の外側余分なラッパー無効化（JS削除後の保険） */
html body section.search_cat .sn-search-cat-body,
html body section.search_cat .is-collapsed {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  opacity: 1 !important;
}
html body section.search_cat .sn-search-cat-toggle {
  display: none !important;
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 【決定版】top-consultation 完全再構築
   過去全てのルールを上書きして、クリーンで一貫したレイアウトを保証
   ████████████████████████████████████████████████████████████████████ */

/* セクションコンテナ：border-top で色帯（疑似要素廃止） */
html body section.top-consultation .sn-consult-section,
html body section.top-consultation .sn-consult-pair > .sn-consult-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 6px solid #cbd5e1 !important;
  border-radius: 18px !important;
  padding: 36px 28px 28px !important;
  margin: 0 auto 24px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 1080px !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.25s ease !important;
}
html body section.top-consultation .sn-consult-section:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.10) !important;
}

/* ::before（旧色帯）を完全削除 */
html body section.top-consultation .sn-consult-section::before {
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
}

/* 士業別カラー：border-top で表現 */
html body section.top-consultation .sn-consult-section#bengo      { border-top-color: #e05f5f !important; }
html body section.top-consultation .sn-consult-section#zeiri      { border-top-color: #4a9ec9 !important; }
html body section.top-consultation .sn-consult-section#gyousei    { border-top-color: #7b7fd4 !important; }
html body section.top-consultation .sn-consult-section#shihou     { border-top-color: #c455c9 !important; }
html body section.top-consultation .sn-consult-section#syarou     { border-top-color: #d9558a !important; }
html body section.top-consultation .sn-consult-section#kaikei     { border-top-color: #9b68d4 !important; }
html body section.top-consultation .sn-consult-section#tyusyo     { border-top-color: #3aaa6b !important; }
html body section.top-consultation .sn-consult-section#benri      { border-top-color: #2db5a0 !important; }
html body section.top-consultation .sn-consult-section#fudo       { border-top-color: #6aaa37 !important; }
html body section.top-consultation .sn-consult-section#tochikaoku { border-top-color: #e6791a !important; }

/* バッジヘッダー：色帯の下に明確に配置 */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

/* バッジ両側の装飾ライン：短く・控えめに */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head::before,
html body section.top-consultation .sn-consult-section > .sn-consult-section__head::after {
  content: '' !important;
  flex: 0 1 80px !important;
  max-width: 80px !important;
  height: 1px !important;
  background: #e2e8f0 !important;
}

/* バッジ（タグ）本体 */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head .tag {
  flex: 0 0 auto !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  white-space: nowrap !important;
}

/* セクション内グリッド：幅を 100% に固定 */
html body section.top-consultation .sn-consult-section > .sn-consult-section__list {
  display: grid !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 幅広セクション（6カラム） */
html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list {
  grid-template-columns: repeat(6, 1fr) !important;
}
/* 中サイズ（4カラム） */
html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
  grid-template-columns: repeat(4, 1fr) !important;
}
/* コンパクト（ペア用 3カラム） */
html body section.top-consultation .sn-consult-section.sn-consult-section--compact > .sn-consult-section__list {
  grid-template-columns: repeat(3, 1fr) !important;
}
/* ミニ（ペア用 2カラム） */
html body section.top-consultation .sn-consult-section.sn-consult-section--mini > .sn-consult-section__list {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* グリッド項目（アイコン+ラベルカード） */
html body section.top-consultation .sn-consult-grid__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body section.top-consultation .sn-consult-grid__item a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 18px 8px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #1a202c !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(17,38,58,0.04) !important;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 110px !important;
  box-sizing: border-box !important;
}
html body section.top-consultation .sn-consult-grid__item a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(17,38,58,0.10) !important;
  border-color: rgba(30,91,206,0.18) !important;
}

/* アイコン円 */
html body section.top-consultation .sn-consult-icon {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(30,91,206,0.05), rgba(20,184,166,0.05)) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
html body section.top-consultation .sn-consult-icon img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}

/* ラベル */
html body section.top-consultation .sn-consult-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  color: #1a202c !important;
}

/* ペアコンテナ：2カラム強制（≥768px） */
@media (min-width: 768px) {
  html body section.top-consultation .sn-consult-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin: 0 auto 24px !important;
    width: 100% !important;
    max-width: 1080px !important;
    box-sizing: border-box !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    margin: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  html body section.top-consultation .sn-consult-pair > .sn-consult-section:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
}

/* レスポンシブ（≤1023px） */
@media (max-width: 1023px) {
  html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* SP（≤767px） */
@media (max-width: 767px) {
  html body section.top-consultation .sn-consult-section,
  html body section.top-consultation .sn-consult-pair > .sn-consult-section {
    padding: 28px 16px 20px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }
  html body section.top-consultation .sn-consult-section > .sn-consult-section__head::before,
  html body section.top-consultation .sn-consult-section > .sn-consult-section__head::after {
    max-width: 40px !important;
  }
  html body section.top-consultation .sn-consult-pair {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  html body section.top-consultation .sn-consult-section.sn-consult-section--compact > .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section.sn-consult-section--mini > .sn-consult-section__list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  html body section.top-consultation .sn-consult-grid__item a {
    padding: 14px 6px 12px !important;
    min-height: 96px !important;
  }
  html body section.top-consultation .sn-consult-icon {
    width: 44px !important;
    height: 44px !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 30px !important;
    height: 30px !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.72rem !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ セクション内余白＋カード幅バランス調整
   4項目セクション（公認会計士・診断士・弁理士・不動産・土地家屋）の
   横長カード問題を解消、全体に余裕のあるレイアウトに
   ████████████████████████████████████████████████████████████████████ */

/* セクション内パディング拡大（左右の余白を広げる） */
html body section.top-consultation .sn-consult-section {
  padding: 44px 44px 36px !important;
}

/* グリッド：中央寄せ＋ギャップ拡大 */
html body section.top-consultation .sn-consult-section > .sn-consult-section__list {
  display: grid !important;
  gap: 18px !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* --wide（5〜6項目）：6列・カード最大165px・中央寄せ */
html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list {
  grid-template-columns: repeat(6, minmax(120px, 165px)) !important;
  max-width: 1100px !important;
}

/* --medium（4項目）：4列・カード最大180px・中央寄せ（余白でバランス取る） */
html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
  grid-template-columns: repeat(4, minmax(140px, 180px)) !important;
  max-width: 820px !important;
}

/* カード内余白拡大＋最低高さ確保 */
html body section.top-consultation .sn-consult-grid__item a {
  padding: 24px 14px 20px !important;
  min-height: 130px !important;
  gap: 12px !important;
}

/* アイコンサイズ微調整 */
html body section.top-consultation .sn-consult-icon {
  width: 56px !important;
  height: 56px !important;
}
html body section.top-consultation .sn-consult-icon img {
  width: 40px !important;
  height: 40px !important;
}

/* ラベルフォントサイズ */
html body section.top-consultation .sn-consult-label {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

/* タブレット（768-1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  html body section.top-consultation .sn-consult-section {
    padding: 36px 28px 28px !important;
  }
  html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list {
    grid-template-columns: repeat(4, minmax(140px, 170px)) !important;
  }
  html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
    grid-template-columns: repeat(4, minmax(130px, 170px)) !important;
    max-width: 720px !important;
  }
}

/* SP（767以下） */
@media (max-width: 767px) {
  html body section.top-consultation .sn-consult-section {
    padding: 28px 14px 20px !important;
    border-radius: 14px !important;
  }
  html body section.top-consultation .sn-consult-section > .sn-consult-section__list {
    gap: 10px !important;
  }
  html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: none !important;
  }
  html body section.top-consultation .sn-consult-grid__item a {
    padding: 16px 6px 12px !important;
    min-height: 100px !important;
  }
  html body section.top-consultation .sn-consult-icon {
    width: 44px !important;
    height: 44px !important;
  }
  html body section.top-consultation .sn-consult-icon img {
    width: 32px !important;
    height: 32px !important;
  }
  html body section.top-consultation .sn-consult-label {
    font-size: 0.74rem !important;
  }
}

/* 超小型SP（≤480） */
@media (max-width: 480px) {
  html body section.top-consultation .sn-consult-section.sn-consult-section--wide > .sn-consult-section__list,
  html body section.top-consultation .sn-consult-section.sn-consult-section--medium > .sn-consult-section__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   ★★★ 士業バッジと上部カラーラインの「くっつき」解消
   ████████████████████████████████████████████████████████████████████ */

/* バッジ両側のグレー装飾ラインを完全削除（視覚ノイズ除去） */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head::before,
html body section.top-consultation .sn-consult-section > .sn-consult-section__head::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  flex: 0 0 0 !important;
  max-width: 0 !important;
}

/* バッジヘッダーに明確な上下余白＋下垂れシャドウで「上に乗る」感 */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* バッジ自体：上カラーラインとの距離を確保＋立体感アップ */
html body section.top-consultation .sn-consult-section > .sn-consult-section__head .tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 26px !important;
  border-radius: 9999px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
}

/* セクション上部 padding を増やしてバッジに「降りてくる感」 */
html body section.top-consultation .sn-consult-section {
  padding: 36px 44px 36px !important;
}

/* SP（767以下）：バッジ余白も比例調整 */
@media (max-width: 767px) {
  html body section.top-consultation .sn-consult-section {
    padding: 28px 14px 22px !important;
  }
  html body section.top-consultation .sn-consult-section > .sn-consult-section__head {
    margin: 0 auto 22px !important;
  }
  html body section.top-consultation .sn-consult-section > .sn-consult-section__head .tag {
    padding: 7px 20px !important;
    font-size: 0.85rem !important;
  }
}