/* =========================================================
   ザナビジョン リニューアル v3.5 - SWELL 追加CSS (統合完全版)
   外観  カスタマイズ  追加CSS にすべてコピー
    既存の追加CSSは全削除して、これに置き換えてください
   
   含まれる内容:
   - v3 本体 (SWELL対応・fullbleed・全コンポーネント)
   - v3.1 フォントサイズ調整 (マージ済み)
   - v3.2 コンテンツ幅キャップ (マージ済み)
   - v3.3 追加ページ用コンポーネント (price, product, download, FAQ等)
   - v3.4 内ページヒーロー余白調整 (マージ済み)
   - v3.5 トップヒーロー余白圧縮 (NEW)
   ========================================================= */

/* ---------- フォント読み込み ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+JP:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ---------- CSS変数 ---------- */
:root {
  --xv-bg: #ffffff;
  --xv-bg-soft: #fafaf9;
  --xv-bg-tone: #f5f5f4;
  --xv-bg-dark: #0a0a0a;
  --xv-border: #e7e5e4;
  --xv-border-soft: #f0eeec;
  --xv-border-strong: #d6d3d1;
  --xv-text: #0a0a0a;
  --xv-text-soft: #1c1917;
  --xv-text-muted: #57534e;
  --xv-text-dim: #a8a29e;
  --xv-red: #E10600;
  --xv-red-bright: #ff1f1a;
  --xv-red-soft: #fef2f2;
  --xv-sans: 'Inter Tight', -apple-system, sans-serif;
  --xv-jp: 'Noto Sans JP', sans-serif;
  --xv-mono: 'JetBrains Mono', monospace;
  --xv-content-max: 1280px;  /* コンテンツ最大幅: 1200/1280/1400/1600 で調整可 */
}

/* =========================================================
   SWELL コンテナ強制解除 (最重要)
   xv-fullbleed が存在するページで、SWELLの幅・余白制約を解除
   ========================================================= */
body:has(.xv-fullbleed) .l-mainContent,
body:has(.xv-fullbleed) .l-articleBody,
body:has(.xv-fullbleed) .post_content,
body:has(.xv-fullbleed) .post-content,
body:has(.xv-fullbleed) main.l-main,
body:has(.xv-fullbleed) main,
body:has(.xv-fullbleed) article,
body:has(.xv-fullbleed) .post {
  max-width: 100% !important;
  width: 100% !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* SWELL のページタイトル・アイキャッチ・パンくず非表示 */
body:has(.xv-fullbleed) .c-pageTitle,
body:has(.xv-fullbleed) .l-articleHead,
body:has(.xv-fullbleed) .post_thumbnail,
body:has(.xv-fullbleed) .p-articleThumb,
body:has(.xv-fullbleed) .c-postThumb,
body:has(.xv-fullbleed) header.entry-header,
body:has(.xv-fullbleed) .post-header,
body:has(.xv-fullbleed) .c-postTitle,
body:has(.xv-fullbleed) .l-pageTitle,
body:has(.xv-fullbleed) .p-breadcrumb {
  display: none !important;
}

/* fullbleed wrapper - viewport幅まで物理的に広げる */
.xv-fullbleed {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--xv-bg);
  font-family: var(--xv-jp);
  color: var(--xv-text);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.xv-fullbleed * { box-sizing: border-box; }
.xv-fullbleed a { text-decoration: none; }

/* =========================================================
   HERO ― トップページの巨大ヒーロー (上余白を圧縮)
   ========================================================= */
.xv-hero {
  min-height: auto;
  padding-top: 56px;
  padding-bottom: 80px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  position: relative;
  background: var(--xv-bg);
  overflow: hidden;
}
.xv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black 30%, transparent 80%);
  z-index: 0;
}
.xv-hero > * { position: relative; z-index: 1; }

.xv-hero-eyebrow {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-muted);
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.xv-hero-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--xv-red);
}

.xv-hero-main { position: relative; max-width: 1400px; }

.xv-hero-title {
  font-family: var(--xv-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, 88px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  color: var(--xv-text) !important;
  margin: 0 0 20px 0 !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
.xv-hero-title em, .xv-hero-title .xv-red {
  color: var(--xv-red);
  font-weight: 800;
  font-style: normal;
}

.xv-hero-subtitle {
  font-family: var(--xv-jp) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  margin: 0 0 32px 0 !important;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.xv-hero-subtitle::before {
  content: ''; width: 32px; height: 1px; background: var(--xv-red); flex-shrink: 0;
}
.xv-hero-subtitle em, .xv-hero-subtitle .xv-red {
  color: var(--xv-red); font-style: normal;
}

.xv-hero-sub {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--xv-text-soft);
  line-height: 2.1;
  max-width: 640px;
  margin: 0;
}
.xv-hero-sub .xv-em { color: var(--xv-text); font-weight: 500; }

.xv-hero-meta {
  margin-top: 48px;
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.xv-hero-meta-label {
  font-family: var(--xv-mono);
  font-size: 10px;
  color: var(--xv-text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.xv-hero-meta-value {
  font-family: var(--xv-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--xv-text);
  letter-spacing: -0.02em;
}
.xv-hero-meta-value sub, .xv-hero-meta-value .xv-sub {
  font-size: 11px;
  font-family: var(--xv-mono);
  color: var(--xv-text-muted);
  vertical-align: baseline;
  margin-left: 3px;
  font-weight: 400;
  bottom: 0;
}

/* 内ページのヒーロー (style="min-height:auto" で識別) ― さらに圧縮 */
.xv-hero[style*="min-height:auto"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.xv-hero[style*="min-height:auto"] .xv-hero-eyebrow { margin-bottom: 20px !important; }
.xv-hero[style*="min-height:auto"] .xv-hero-title { margin-bottom: 20px !important; }
.xv-hero[style*="min-height:auto"] .xv-hero-subtitle { margin-bottom: 0 !important; }

/* =========================================================
   STATEMENT
   ========================================================= */
.xv-statement {
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg-soft);
  text-align: center;
  border-top: 1px solid var(--xv-border);
  border-bottom: 1px solid var(--xv-border);
}
.xv-statement-mark {
  width: 32px; height: 1px;
  background: var(--xv-red);
  margin: 0 auto 32px;
}
.xv-statement-text {
  font-family: var(--xv-jp) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  color: var(--xv-text) !important;
  max-width: 880px;
  margin: 0 auto !important;
}
.xv-statement-text em, .xv-statement-text .xv-red {
  color: var(--xv-red); font-weight: 700; font-style: normal;
}
.xv-statement-en {
  margin-top: 24px;
  font-family: var(--xv-sans);
  font-style: italic;
  font-size: 14px;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
}

/* =========================================================
   TRUSTED
   ========================================================= */
.xv-trusted {
  padding-top: 64px;
  padding-bottom: 64px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg);
  border-bottom: 1px solid var(--xv-border);
  text-align: center;
}
.xv-trusted-label {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.xv-trusted-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}
.xv-trusted-logo {
  font-family: var(--xv-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--xv-text-dim);
  letter-spacing: 0.02em;
  opacity: 0.8;
  transition: opacity 0.3s, color 0.3s;
}
.xv-trusted-logo:hover { opacity: 1; color: var(--xv-text-soft); }

/* =========================================================
   SECTION (共通)
   ========================================================= */
.xv-section {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg);
  position: relative;
}
.xv-section-eyebrow {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.xv-section-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--xv-red);
}
.xv-section-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3.2vw, 44px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  color: var(--xv-text) !important;
  margin: 0 0 32px 0 !important;
  max-width: 900px;
}
.xv-section-title em, .xv-section-title .xv-red {
  color: var(--xv-red); font-style: normal;
}
.xv-section-title-en {
  display: block;
  font-family: var(--xv-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.32em;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
  margin-top: 16px;
}
.xv-section-lede {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 15px;
  color: var(--xv-text-soft);
  line-height: 2.1;
  max-width: 580px;
  letter-spacing: 0.03em;
  margin: 0;
}

/* =========================================================
   ABOUT
   ========================================================= */
.xv-about {
  padding-top: 160px;
  padding-bottom: 160px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 100px;
  align-items: start;
  background: var(--xv-bg);
  border-bottom: 1px solid var(--xv-border);
}
.xv-about-statement {
  font-family: var(--xv-jp) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  margin: 0 !important;
}
.xv-about-statement em, .xv-about-statement .xv-red {
  color: var(--xv-red); font-style: normal;
}
.xv-about-body {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 14px;
  line-height: 2.1;
  color: var(--xv-text-soft);
  letter-spacing: 0.04em;
}
.xv-about-body p { margin: 0 0 28px 0; }
.xv-about-body p.xv-em { color: var(--xv-text); font-weight: 500; }

/* =========================================================
   SERVICES
   ========================================================= */
.xv-services {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg);
  border-bottom: 1px solid var(--xv-border);
}
.xv-services-grid {
  margin-top: 80px;
  display: grid;
  gap: 1px;
  background: var(--xv-border);
  border: 1px solid var(--xv-border);
}
.xv-service {
  background: var(--xv-bg);
  padding: 56px;
  display: grid;
  grid-template-columns: 90px 1.3fr 1.6fr 50px;
  gap: 48px;
  align-items: start;
  cursor: pointer;
  transition: background 0.4s;
  text-decoration: none !important;
  color: inherit !important;
}
.xv-service:hover { background: var(--xv-bg-soft); }
.xv-service:hover .xv-service-arrow { color: var(--xv-red); transform: translateX(8px); }
.xv-service:hover .xv-service-name { color: var(--xv-red); }
.xv-service:hover .xv-service-num { color: #fff; background: var(--xv-red); border-color: var(--xv-red); }
.xv-service-num {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-soft);
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border: 1px solid var(--xv-border-soft);
  display: inline-block;
  width: fit-content;
  transition: all 0.4s;
}
.xv-service-name {
  font-family: var(--xv-jp);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--xv-text);
  transition: color 0.3s;
}
.xv-service-name-en {
  margin-top: 10px;
  font-family: var(--xv-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
}
.xv-service-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2;
  color: var(--xv-text-soft);
  letter-spacing: 0.04em;
}
.xv-service-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.xv-service-tag {
  font-family: var(--xv-mono);
  font-size: 10px;
  padding: 4px 10px;
  background: var(--xv-bg-tone);
  color: var(--xv-text-muted);
  letter-spacing: 0.06em;
}
.xv-service-arrow {
  font-family: var(--xv-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--xv-text-dim);
  text-align: right;
  transition: all 0.4s;
}

/* =========================================================
   SHOWCASE
   ========================================================= */
.xv-showcase {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: 0;
  background: var(--xv-bg-soft);
  border-bottom: 1px solid var(--xv-border);
}
.xv-showcase-header {
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  margin-bottom: 80px;
  max-width: 800px;
}
.xv-showcase-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 32px;
  scroll-snap-type: x mandatory;
}
.xv-showcase-strip::-webkit-scrollbar { height: 3px; }
.xv-showcase-strip::-webkit-scrollbar-track { background: var(--xv-border); }
.xv-showcase-strip::-webkit-scrollbar-thumb { background: var(--xv-text-dim); }
.xv-showcase-strip::-webkit-scrollbar-thumb:hover { background: var(--xv-red); }
.xv-showcase-item {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: var(--xv-bg);
  border: 1px solid var(--xv-border);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s;
}
.xv-showcase-item:hover { border-color: var(--xv-text); transform: translateY(-4px); }
.xv-showcase-img {
  height: 280px;
  background: linear-gradient(135deg, #f0eeec 0%, #d6d3d1 100%);
  position: relative;
}
.xv-showcase-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.04) 50%, transparent 51%);
  background-size: 12px 12px;
}
.xv-showcase-info { padding: 28px; border-top: 1px solid var(--xv-border); }
.xv-showcase-cat {
  font-family: var(--xv-mono);
  font-size: 10px;
  color: var(--xv-red);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.xv-showcase-title {
  font-family: var(--xv-jp);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--xv-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.xv-showcase-sub {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 12px;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
}

/* =========================================================
   STRENGTHS
   ========================================================= */
.xv-strengths {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg);
  border-bottom: 1px solid var(--xv-border);
}
.xv-strengths-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--xv-border);
  border: 1px solid var(--xv-border);
}
.xv-strength {
  background: var(--xv-bg);
  padding: 56px 40px;
  transition: background 0.4s;
}
.xv-strength:hover { background: var(--xv-bg-soft); }
.xv-strength-num {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.18em;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.xv-strength-num::after { content: ''; flex: 1; height: 1px; background: var(--xv-border); }
.xv-strength-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  margin: 0 0 24px 0 !important;
}
.xv-strength-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2;
  color: var(--xv-text-soft);
  letter-spacing: 0.04em;
  margin: 0;
}

/* =========================================================
   STATS (DARK)
   ========================================================= */
.xv-stats {
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  background: var(--xv-bg-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.xv-stat {
  background: var(--xv-bg-dark);
  padding: 32px 40px;
  position: relative;
}
.xv-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 24px; bottom: 24px;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.xv-stat-num {
  font-family: var(--xv-sans);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 16px;
}
.xv-stat-num em, .xv-stat-num .xv-red { color: var(--xv-red); font-style: normal; }
.xv-stat-num sub, .xv-stat-num .xv-sub {
  font-size: 14px;
  font-family: var(--xv-mono);
  color: rgba(255,255,255,0.5);
  vertical-align: baseline;
  margin-left: 4px;
  font-weight: 400;
  bottom: 0;
}
.xv-stat-label {
  font-family: var(--xv-jp);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  font-weight: 300;
}

/* =========================================================
   CTA
   ========================================================= */
.xv-cta {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  padding-right: max(40px, calc((100vw - var(--xv-content-max)) / 2));
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--xv-bg);
}
.xv-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(225,6,0,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.xv-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 30%, transparent 80%);
}
.xv-cta > * { position: relative; z-index: 1; }
.xv-cta-eyebrow {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.25em;
  margin-bottom: 36px;
  text-transform: uppercase;
}
.xv-cta-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 56px 0 !important;
  color: var(--xv-text) !important;
}
.xv-cta-title em, .xv-cta-title .xv-red {
  color: var(--xv-red); font-style: normal;
}
.xv-cta-title-en {
  display: block;
  font-family: var(--xv-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.28em;
  color: var(--xv-text-muted);
  margin-top: 24px;
  letter-spacing: 0.02em;
}
.xv-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.xv-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 48px;
  background: var(--xv-text);
  color: #ffffff !important;
  font-family: var(--xv-jp);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  border: 1px solid var(--xv-text);
  transition: all 0.3s;
  text-decoration: none !important;
}
.xv-button:hover {
  background: var(--xv-red);
  border-color: var(--xv-red);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(225,6,0,0.4);
}
.xv-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 36px;
  background: transparent;
  color: var(--xv-text) !important;
  font-family: var(--xv-jp);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  border: 1px solid var(--xv-border-strong);
  transition: all 0.3s;
  text-decoration: none !important;
}
.xv-button-secondary:hover { border-color: var(--xv-text); }

/* =========================================================
   FOOTER (内蔵)
   ========================================================= */
.xv-footer {
  background: var(--xv-bg-dark);
  color: #f5f5f4;
  padding: 96px 40px 36px;
}
.xv-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.xv-footer-brand {
  font-family: var(--xv-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.xv-footer-brand::before {
  content: ''; width: 10px; height: 10px;
  background: var(--xv-red); border-radius: 50%;
}
.xv-footer-tag {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 2;
  max-width: 340px;
  letter-spacing: 0.04em;
}
.xv-footer h4 {
  font-family: var(--xv-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--xv-red);
  margin: 0 0 22px 0;
  font-weight: 500;
  text-transform: uppercase;
}
.xv-footer ul { list-style: none; padding: 0; margin: 0; }
.xv-footer li { margin-bottom: 12px; }
.xv-footer a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-family: var(--xv-jp);
  font-weight: 400;
  transition: color 0.3s;
}
.xv-footer a:hover { color: #fff !important; }
.xv-footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-family: var(--xv-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =========================================================
   v3.3 追加コンポーネント
   - 製品カード / 価格カード / ダウンロード / FAQ / サポート
   ========================================================= */

/* ---------- 製品カード ---------- */
.xv-product-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--xv-border);
  border: 1px solid var(--xv-border);
}
.xv-product-card {
  background: var(--xv-bg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.4s;
  position: relative;
}
.xv-product-card:hover { background: var(--xv-bg-soft); }
.xv-product-card:hover .xv-product-arrow { color: var(--xv-red); transform: translateX(8px); }
.xv-product-card:hover .xv-product-name { color: var(--xv-red); }
.xv-product-num {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-muted);
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border: 1px solid var(--xv-border-soft);
  display: inline-block;
  width: fit-content;
}
.xv-product-name {
  font-family: var(--xv-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--xv-text);
  margin: 0;
  transition: color 0.3s;
}
.xv-product-name-en {
  font-family: var(--xv-sans);
  font-style: italic;
  font-size: 13px;
  color: var(--xv-text-muted);
  margin-top: -10px;
}
.xv-product-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2;
  color: var(--xv-text-soft);
  letter-spacing: 0.04em;
  flex: 1;
}
.xv-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.xv-product-tag {
  font-family: var(--xv-mono);
  font-size: 10px;
  padding: 4px 10px;
  background: var(--xv-bg-tone);
  color: var(--xv-text-muted);
  letter-spacing: 0.06em;
}
.xv-product-arrow {
  font-family: var(--xv-sans);
  font-size: 16px;
  color: var(--xv-text-dim);
  transition: all 0.4s;
  margin-top: 8px;
}

/* ---------- 価格カード ---------- */
.xv-pricing-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.xv-pricing-card {
  background: var(--xv-bg);
  border: 1px solid var(--xv-border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: border-color 0.3s;
}
.xv-pricing-card:hover { border-color: var(--xv-text); }
.xv-pricing-card.xv-featured {
  border: 1px solid var(--xv-red);
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
}
.xv-pricing-card.xv-featured::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -10px;
  left: 32px;
  padding: 4px 12px;
  background: var(--xv-red);
  color: #fff;
  font-family: var(--xv-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.xv-pricing-tier {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.xv-pricing-name {
  font-family: var(--xv-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--xv-text);
  margin: 0;
}
.xv-pricing-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  color: var(--xv-text-muted);
  line-height: 1.8;
  margin: -16px 0 0 0;
}
.xv-pricing-price {
  font-family: var(--xv-sans);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.04em;
  color: var(--xv-text);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.xv-pricing-price .xv-pricing-unit {
  font-family: var(--xv-jp);
  font-weight: 400;
  font-size: 14px;
  color: var(--xv-text-muted);
  letter-spacing: 0;
}
.xv-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.xv-pricing-features li {
  font-family: var(--xv-jp);
  font-weight: 400;
  font-size: 13px;
  color: var(--xv-text-soft);
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
}
.xv-pricing-features li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--xv-red);
  font-family: var(--xv-mono);
  font-weight: 500;
}
.xv-pricing-features li.xv-disabled { color: var(--xv-text-dim); }
.xv-pricing-features li.xv-disabled::before { content: '\2212  '; color: var(--xv-text-dim); }
.xv-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: transparent;
  color: var(--xv-text) !important;
  font-family: var(--xv-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  border: 1px solid var(--xv-border-strong);
  transition: all 0.3s;
  text-decoration: none !important;
}
.xv-pricing-cta:hover {
  background: var(--xv-text);
  color: #fff !important;
  border-color: var(--xv-text);
}
.xv-pricing-card.xv-featured .xv-pricing-cta {
  background: var(--xv-red);
  color: #fff !important;
  border-color: var(--xv-red);
}
.xv-pricing-card.xv-featured .xv-pricing-cta:hover {
  background: var(--xv-red-bright);
  border-color: var(--xv-red-bright);
}

/* ---------- ダウンロードカード ---------- */
.xv-download-list {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--xv-border);
  border: 1px solid var(--xv-border);
}
.xv-download-item {
  background: var(--xv-bg);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 100px 1fr 200px auto;
  gap: 32px;
  align-items: center;
  transition: background 0.3s;
}
.xv-download-item:hover { background: var(--xv-bg-soft); }
.xv-download-version {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border: 1px solid var(--xv-red);
  width: fit-content;
}
.xv-download-name {
  font-family: var(--xv-jp);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--xv-text);
  margin: 0 0 6px 0;
}
.xv-download-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin: 0;
}
.xv-download-meta {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-dim);
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xv-download-meta .xv-download-meta-row { display: flex; gap: 12px; }
.xv-download-meta-label {
  color: var(--xv-text-muted);
  font-weight: 500;
  min-width: 50px;
}
.xv-download-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--xv-text);
  color: #fff !important;
  font-family: var(--xv-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  border: 1px solid var(--xv-text);
  transition: all 0.3s;
  text-decoration: none !important;
  white-space: nowrap;
}
.xv-download-button:hover {
  background: var(--xv-red);
  border-color: var(--xv-red);
}
.xv-download-button.xv-trial {
  background: transparent;
  color: var(--xv-text) !important;
  border: 1px solid var(--xv-border-strong);
}
.xv-download-button.xv-trial:hover {
  background: var(--xv-text);
  color: #fff !important;
  border-color: var(--xv-text);
}

/* ---------- FAQ ---------- */
.xv-faq-list {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--xv-border);
  border-top: 1px solid var(--xv-border);
  border-bottom: 1px solid var(--xv-border);
}
.xv-faq-item {
  background: var(--xv-bg);
  padding: 32px 40px;
  transition: background 0.3s;
}
.xv-faq-item:hover { background: var(--xv-bg-soft); }
.xv-faq-q {
  font-family: var(--xv-jp);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--xv-text);
  margin: 0 0 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.xv-faq-q::before {
  content: 'Q';
  color: #fff;
  background: var(--xv-red);
  font-family: var(--xv-mono);
  font-weight: 500;
  font-size: 11px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.xv-faq-a {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  color: var(--xv-text-soft);
  line-height: 2;
  letter-spacing: 0.04em;
  margin: 0;
  padding-left: 40px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.xv-faq-a::before {
  content: 'A';
  color: var(--xv-text);
  background: transparent;
  border: 1px solid var(--xv-border-strong);
  font-family: var(--xv-mono);
  font-weight: 500;
  font-size: 11px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: -40px;
}

/* ---------- サポートチャネル ---------- */
.xv-support-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--xv-border);
  border: 1px solid var(--xv-border);
  margin-bottom: 80px;
}
.xv-support-item {
  background: var(--xv-bg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.4s;
}
.xv-support-item:hover { background: var(--xv-bg-soft); }
.xv-support-item:hover .xv-support-name { color: var(--xv-red); }
.xv-support-num {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-red);
  letter-spacing: 0.18em;
}
.xv-support-name {
  font-family: var(--xv-jp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--xv-text);
  margin: 0;
  transition: color 0.3s;
}
.xv-support-desc {
  font-family: var(--xv-jp);
  font-weight: 300;
  font-size: 13px;
  color: var(--xv-text-soft);
  line-height: 2;
  letter-spacing: 0.04em;
  flex: 1;
}
.xv-support-meta {
  font-family: var(--xv-mono);
  font-size: 11px;
  color: var(--xv-text-muted);
  letter-spacing: 0.06em;
  padding-top: 16px;
  border-top: 1px solid var(--xv-border);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .xv-hero {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .xv-hero[style*="min-height:auto"] {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
  .xv-statement, .xv-trusted, .xv-section, .xv-about, .xv-services,
  .xv-strengths, .xv-cta, .xv-stats, .xv-showcase {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .xv-statement { padding-top: 64px !important; padding-bottom: 64px !important; }
  .xv-trusted { padding-top: 48px !important; padding-bottom: 48px !important; }
  .xv-section, .xv-about, .xv-services, .xv-strengths {
    padding-top: 80px !important; padding-bottom: 80px !important;
  }
  .xv-cta { padding-top: 80px !important; padding-bottom: 80px !important; }
  .xv-stats { padding-top: 56px !important; padding-bottom: 56px !important; }
  .xv-showcase { padding-top: 80px !important; padding-bottom: 80px !important; padding-right: 0 !important; }
  .xv-showcase-header { padding-right: 20px !important; }
  
  .xv-about { grid-template-columns: 1fr; gap: 48px; }
  .xv-strengths-grid { grid-template-columns: 1fr; }
  .xv-stats { grid-template-columns: repeat(2, 1fr); }
  .xv-stat:nth-child(2)::after, .xv-stat:nth-child(4)::after { display: none; }
  .xv-service { grid-template-columns: 1fr; gap: 16px; padding: 36px 24px; }
  .xv-service-arrow { display: none; }
  .xv-showcase-item { flex-basis: 280px; }
  .xv-trusted-logos { gap: 32px; }
  .xv-trusted-logo { font-size: 14px; }
  .xv-hero-meta { gap: 32px; }
  .xv-footer { padding: 64px 20px 24px; }
  .xv-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .xv-footer-bottom { flex-direction: column; gap: 12px; text-align: center; justify-content: center; }
  
  .xv-product-grid { grid-template-columns: 1fr; }
  .xv-pricing-grid { grid-template-columns: 1fr; }
  .xv-download-item { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .xv-download-button { width: 100%; justify-content: center; }
  .xv-faq-item { padding: 24px; }
  .xv-faq-q { font-size: 15px; }
  .xv-faq-a { padding-left: 0; }
  .xv-faq-a::before { margin-left: 0; }
  .xv-support-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   ザナビジョン v3.6 見出しデザイン修正パッチ
   既存の v3.5 統合CSSの【一番下】に追記
   
   問題: SWELL本体の h2 デザイン(ピンク背景+赤ボーダー)が残っていた
   対応:
   - 全見出しタグの SWELL装飾を完全リセット
   - 見出し左に細い赤バー(モダンエディトリアル風)
   - タイポをやや大きく・タイトに
   ========================================================= */

/* =========================================================
   SWELL 見出しデコレーション 完全リセット (h1〜h6)
   ========================================================= */
.xv-fullbleed h1,
.xv-fullbleed h2,
.xv-fullbleed h3,
.xv-fullbleed h4,
.xv-fullbleed h5,
.xv-fullbleed h6,
.xv-fullbleed .wp-block-heading {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.xv-fullbleed h1::before,
.xv-fullbleed h1::after,
.xv-fullbleed h2::before,
.xv-fullbleed h2::after,
.xv-fullbleed h3::before,
.xv-fullbleed h3::after,
.xv-fullbleed h4::before,
.xv-fullbleed h4::after,
.xv-fullbleed h5::before,
.xv-fullbleed h5::after,
.xv-fullbleed h6::before,
.xv-fullbleed h6::after,
.xv-fullbleed .wp-block-heading::before,
.xv-fullbleed .wp-block-heading::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
}

/* =========================================================
   セクションタイトル ― モダン化
   ========================================================= */
.xv-section-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.8vw, 56px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  color: var(--xv-text) !important;
  margin: 0 0 40px 0 !important;
  max-width: 1000px;
  position: relative !important;
  padding: 0 0 0 28px !important;
}

/* 左の赤い縦バー(モダンアクセント) ― 強制再表示 */
.xv-section-title::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.18em !important;
  bottom: 0.35em !important;
  width: 4px !important;
  background: var(--xv-red) !important;
  background-color: var(--xv-red) !important;
  background-image: none !important;
  border: none !important;
  transform: none !important;
}

.xv-section-title em,
.xv-section-title .xv-red {
  color: var(--xv-red);
  font-style: normal;
  font-weight: 800;
}

.xv-section-title-en {
  display: block;
  font-family: var(--xv-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.32em;
  color: var(--xv-text-muted);
  letter-spacing: 0.02em;
  margin-top: 16px;
  padding-left: 0;
}

/* =========================================================
   About ステートメント ― モダン化
   ========================================================= */
.xv-about-statement {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw, 36px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.03em !important;
  color: var(--xv-text) !important;
  margin: 0 !important;
  position: relative !important;
  padding: 0 0 0 28px !important;
}

/* 左の赤い縦バー(モダンアクセント) ― 強制再表示 */
.xv-about-statement::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.18em !important;
  bottom: 0.35em !important;
  width: 4px !important;
  background: var(--xv-red) !important;
  background-color: var(--xv-red) !important;
  background-image: none !important;
  border: none !important;
  transform: none !important;
}

.xv-about-statement em,
.xv-about-statement .xv-red {
  color: var(--xv-red);
  font-style: normal;
  font-weight: 800;
}

/* =========================================================
   CTA タイトル ― 装飾削除のみ(中央配置のままでOK)
   ========================================================= */
.xv-cta-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  color: var(--xv-text) !important;
  margin: 0 0 56px 0 !important;
  padding: 0 !important;
}

.xv-cta-title em,
.xv-cta-title .xv-red {
  color: var(--xv-red);
  font-style: normal;
  font-weight: 800;
}

/* =========================================================
   ヒーロータイトル(トップページ) ― 装飾削除のみ
   ========================================================= */
.xv-hero-title {
  font-family: var(--xv-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, 88px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  color: var(--xv-text) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

.xv-hero-title em,
.xv-hero-title .xv-red {
  color: var(--xv-red);
  font-weight: 800;
  font-style: normal;
}

/* =========================================================
   Strength カード見出し(3つの理由) ― クリーン化
   ========================================================= */
.xv-strength-title {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* =========================================================
   Service カード名 ― クリーン化
   ========================================================= */
.xv-service-name {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  color: var(--xv-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   Product カード名 ― クリーン化
   ========================================================= */
.xv-product-name {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   Pricing カード名 ― クリーン化
   ========================================================= */
.xv-pricing-name {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   Support 名 ― クリーン化
   ========================================================= */
.xv-support-name {
  font-family: var(--xv-jp) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: var(--xv-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   FAQ Q ― クリーン化
   ========================================================= */
.xv-faq-q {
  font-family: var(--xv-jp) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--xv-text) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* =========================================================
   ステートメント帯 ― クリーン化
   ========================================================= */
.xv-statement-text {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.xv-statement-text em,
.xv-statement-text .xv-red {
  color: var(--xv-red);
  font-weight: 800;
  font-style: normal;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .xv-section-title {
    padding-left: 18px !important;
    margin-bottom: 28px !important;
  }
  .xv-section-title::before { width: 3px !important; }
  
  .xv-about-statement {
    padding-left: 18px !important;
  }
  .xv-about-statement::before { width: 3px !important; }
}
/* =========================================================
   ザナビジョン v3.7 ヒーロー2カラム化パッチ
   既存CSSの【一番下】に追記
   ========================================================= */

/* ヒーローを左右2カラムに分割 */
.xv-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 32px;
}

/* 左カラム(コンテンツ) */
.xv-hero-content {
  display: flex;
  flex-direction: column;
}

/* 右カラム(画像) */
.xv-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.xv-hero-visual img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  display: block;
}

/* レスポンシブ ― タブレット/モバイルは縦積み */
@media (max-width: 1024px) {
  .xv-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .xv-hero-visual img {
    max-height: 400px;
  }
}
/* ============= v3.11 SWELL装飾 部分消去 (v3.10を置き換え) =============
   消すもの: サイドバー、ウィジェットだけ
   残すもの: メインビジュアル、お知らせカルーセル、ピックアップバナー
============================================================= */

/* サイドバー削除 */
body:has(.xv-fullbleed) .l-sidebar,
body:has(.xv-fullbleed) aside.l-sidebar,
body:has(.xv-fullbleed) #sidebar,
body:has(.xv-hero) .l-sidebar,
body:has(.xv-hero) aside.l-sidebar,
body:has(.xv-hero) #sidebar {
  display: none !important;
}

/* WordPress標準ウィジェット削除 */
body:has(.xv-fullbleed) .widget_search,
body:has(.xv-fullbleed) .widget_recent_entries,
body:has(.xv-fullbleed) .widget_recent_comments,
body:has(.xv-fullbleed) .widget_archive,
body:has(.xv-fullbleed) .widget_categories,
body:has(.xv-fullbleed) .widget_meta,
body:has(.xv-fullbleed) .widget_pages,
body:has(.xv-fullbleed) .widget_tag_cloud,
body:has(.xv-fullbleed) .widget_calendar,
body:has(.xv-fullbleed) .widget_text,
body:has(.xv-fullbleed) .widget_nav_menu,
body:has(.xv-hero) .widget_search,
body:has(.xv-hero) .widget_recent_entries,
body:has(.xv-hero) .widget_recent_comments,
body:has(.xv-hero) .widget_archive,
body:has(.xv-hero) .widget_categories,
body:has(.xv-hero) .widget_meta,
body:has(.xv-hero) .widget_pages,
body:has(.xv-hero) .widget_tag_cloud,
body:has(.xv-hero) .widget_calendar,
body:has(.xv-hero) .widget_text,
body:has(.xv-hero) .widget_nav_menu {
  display: none !important;
}

/* 1カラム強制 + 全幅化 */
body:has(.xv-fullbleed) .l-content,
body:has(.xv-fullbleed) .l-content--has2col,
body:has(.xv-fullbleed) .l-mainContent,
body:has(.xv-fullbleed) main.l-main,
body:has(.xv-hero) .l-content,
body:has(.xv-hero) .l-content--has2col,
body:has(.xv-hero) .l-mainContent,
body:has(.xv-hero) main.l-main {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 1fr !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* =========================================================
   ザナビジョン v4.0 モバイルリデザイン (洗練版)
   v3.12 パッチを置き換え。既存 xanavision-FINAL-v4.css の末尾に追記
   
   設計思想:
   ・「縦並びさせるだけ」をやめて、各セクションをモバイル用に再設計
   ・Japanese typography に最適化された行間・字間
   ・スマホで「読み物」として成立する密度・余白
   ・タッチ操作前提の最小44pxタップ領域
   ・「プレミアムなIT企業」の質感
   ========================================================= */

/* =========================================================
   ベースリセット (mobile-first)
   ========================================================= */
@media (max-width: 900px) {
  
  /* iOS自動拡大防止 */
  .xv-fullbleed input,
  .xv-fullbleed select,
  .xv-fullbleed textarea {
    font-size: 16px !important;
  }

  /* タップターゲット最小化 */
  .xv-fullbleed a,
  .xv-fullbleed button {
    -webkit-tap-highlight-color: rgba(225, 6, 0, 0.08);
  }

  /* スクロール慣性 */
  .xv-fullbleed {
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   HERO ― リデザイン
   特に hero-meta(FOUNDED/FIELDS/BASES)を洗練させる
   ========================================================= */

/* デスクトップでの hero-meta スタイル(基準) */
.xv-hero-meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 600px;
  border-top: 1px solid var(--xv-border);
  border-bottom: 1px solid var(--xv-border);
}

.xv-hero-meta-item {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.xv-hero-meta-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--xv-border);
}

.xv-hero-meta-item:not(:first-child) {
  padding-left: 32px;
}

.xv-hero-meta-item .xv-meta-label {
  font-family: var(--xv-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--xv-text-muted);
  text-transform: uppercase;
  display: block;
}

.xv-hero-meta-item .xv-meta-value {
  font-family: var(--xv-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--xv-text);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.xv-hero-meta-item .xv-meta-value em {
  font-family: var(--xv-jp);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--xv-text-muted);
  letter-spacing: 0;
  margin-left: 2px;
}

/* ========== タブレット (＜=900px) ========== */
@media (max-width: 900px) {
  .xv-hero-meta {
    margin-top: 40px;
    max-width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .xv-hero-meta-item {
    padding: 20px 0;
    align-items: flex-start;
  }

  .xv-hero-meta-item:not(:first-child) {
    padding-left: 20px;
  }

  .xv-hero-meta-item .xv-meta-value {
    font-size: 24px;
  }
}

/* ========== スマートフォン (＜=640px) ―― 最重要 ―― ========== */
@media (max-width: 640px) {
  .xv-hero-meta {
    margin-top: 32px;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--xv-border);
    border-bottom: 1px solid var(--xv-border);
  }

  .xv-hero-meta-item {
    padding: 18px 12px !important;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex-direction: column-reverse; /* 数字を上、ラベルを下に */
  }

  .xv-hero-meta-item:not(:first-child) {
    padding-left: 12px !important;
  }

  .xv-hero-meta-item .xv-meta-value {
    font-size: 22px;
    justify-content: center;
    line-height: 1.1;
  }

  .xv-hero-meta-item .xv-meta-value em {
    font-size: 11px;
  }

  .xv-hero-meta-item .xv-meta-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--xv-text-dim);
  }

  /* 仕切り線を控えめに */
  .xv-hero-meta-item:not(:last-child)::after {
    top: 20%;
    bottom: 20%;
    background: var(--xv-border-soft);
  }
}

/* ========== 小型 (＜=380px) ========== */
@media (max-width: 380px) {
  .xv-hero-meta-item {
    padding: 14px 6px !important;
  }
  .xv-hero-meta-item:not(:first-child) {
    padding-left: 6px !important;
  }
  .xv-hero-meta-item .xv-meta-value {
    font-size: 19px;
  }
}

/* =========================================================
   HERO 本体 ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-hero {
    padding-top: 32px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .xv-hero-eyebrow {
    font-size: 10px;
    margin-bottom: 20px;
  }

  .xv-hero-eyebrow::before {
    width: 16px;
  }

  .xv-hero-title {
    font-size: clamp(40px, 11vw, 56px) !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
  }

  .xv-hero-subtitle {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-bottom: 24px !important;
    gap: 12px;
  }

  .xv-hero-subtitle::before {
    width: 16px;
  }

  .xv-hero-sub {
    font-size: 13px;
    line-height: 1.95;
    color: var(--xv-text-soft);
  }

  /* ヒーロー画像はモバイルで控えめに */
  .xv-hero-image {
    margin-top: 32px;
  }
  .xv-hero-image img {
    max-height: 280px;
    object-fit: contain;
  }
}

@media (max-width: 640px) {
  .xv-hero {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .xv-hero-title {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

/* =========================================================
   STATEMENT ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-statement {
    padding: 56px 24px !important;
  }
  .xv-statement-text {
    font-size: 17px !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
  }
  .xv-statement-mark {
    margin-bottom: 20px !important;
  }
  .xv-statement-en {
    font-size: 12px !important;
    margin-top: 16px !important;
  }
}

/* =========================================================
   SECTION ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-section,
  .xv-services,
  .xv-strengths,
  .xv-about {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .xv-section-eyebrow {
    font-size: 10px;
    margin-bottom: 18px;
    letter-spacing: 0.2em;
  }

  .xv-section-eyebrow::before {
    width: 16px;
  }

  .xv-section-title {
    font-size: clamp(24px, 6vw, 30px) !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
    padding-left: 18px !important;
  }

  .xv-section-title::before {
    width: 3px !important;
    top: 0.2em !important;
    bottom: 0.3em !important;
  }

  .xv-section-title-en {
    font-size: 13px !important;
    margin-top: 12px !important;
  }

  .xv-section-lede {
    font-size: 13px;
    line-height: 1.95;
  }
}

/* =========================================================
   ABOUT ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-about {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .xv-about-statement {
    font-size: 22px !important;
    line-height: 1.5 !important;
    padding-left: 18px !important;
  }
  .xv-about-statement::before {
    width: 3px !important;
  }
  .xv-about-body {
    font-size: 13px;
    line-height: 2;
  }
  .xv-about-body p {
    margin-bottom: 20px;
  }
}

/* =========================================================
   SERVICES ― モバイル最適化(カード形に再構成)
   ========================================================= */
@media (max-width: 900px) {
  .xv-services-grid {
    margin-top: 48px;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  .xv-service {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 28px 24px !important;
    align-items: flex-start;
  }

  .xv-service-num {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .xv-service-name {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .xv-service-name-en {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .xv-service-desc {
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  .xv-service-tags {
    margin-top: 12px !important;
    gap: 4px !important;
  }

  .xv-service-tag {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

  /* 矢印は右下に小さく */
  .xv-service-arrow {
    display: none !important;
  }

  /* 代わりに service 自体に矢印を付与 */
  .xv-service::after {
    content: '\2192  ';
    position: absolute;
    right: 24px;
    bottom: 24px;
    font-size: 14px;
    color: var(--xv-text-dim);
  }
}

/* =========================================================
   STRENGTHS ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-strengths-grid {
    margin-top: 40px !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  .xv-strength {
    padding: 32px 24px !important;
  }

  .xv-strength-num {
    font-size: 10px !important;
    margin-bottom: 20px !important;
  }

  .xv-strength-title {
    font-size: 17px !important;
    margin-bottom: 14px !important;
  }

  .xv-strength-desc {
    font-size: 13px !important;
    line-height: 1.95 !important;
  }
}

/* =========================================================
   STATS ― モバイル最適化(2x2)
   ========================================================= */
@media (max-width: 900px) {
  .xv-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 56px 24px !important;
  }

  .xv-stat {
    padding: 24px 16px !important;
    text-align: left;
  }

  .xv-stat:nth-child(2)::after,
  .xv-stat:nth-child(4)::after {
    display: none !important;
  }

  /* 2x2 の 1, 2 列目下に横線 */
  .xv-stat:nth-child(1),
  .xv-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
  }
  .xv-stat:nth-child(3),
  .xv-stat:nth-child(4) {
    padding-top: 20px;
  }

  .xv-stat-num {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }

  .xv-stat-num sub,
  .xv-stat-num .xv-sub {
    font-size: 11px !important;
  }

  .xv-stat-label {
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  .xv-stats {
    grid-template-columns: 1fr !important;
  }
  .xv-stat:nth-child(odd) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* =========================================================
   SHOWCASE ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-showcase {
    padding: 64px 0 64px 24px !important;
  }
  .xv-showcase-header {
    padding-right: 24px !important;
    margin-bottom: 40px !important;
  }
  .xv-showcase-strip {
    gap: 12px !important;
  }
  .xv-showcase-item {
    flex-basis: 280px !important;
  }
  .xv-showcase-img {
    height: 200px !important;
  }
  .xv-showcase-info {
    padding: 20px !important;
  }
  .xv-showcase-title {
    font-size: 15px !important;
  }
}

/* =========================================================
   CTA ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-cta {
    padding: 72px 24px !important;
  }
  .xv-cta-eyebrow {
    font-size: 10px !important;
    margin-bottom: 24px !important;
  }
  .xv-cta-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.3 !important;
    margin-bottom: 32px !important;
  }
  .xv-cta-title-en {
    font-size: 13px !important;
    margin-top: 12px !important;
  }
  .xv-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .xv-button,
  .xv-button-secondary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 18px 32px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   FOOTER ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-footer {
    padding: 56px 24px 24px !important;
  }
  .xv-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .xv-footer-brand {
    font-size: 20px !important;
  }
  .xv-footer-tag {
    font-size: 12px !important;
  }
  .xv-footer h4 {
    font-size: 10px !important;
    margin-bottom: 14px !important;
  }
  .xv-footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    padding-top: 24px !important;
  }
}

/* =========================================================
   インラインスタイル付きコンポーネントへのモバイル対応
   各ページに散らばった style="grid-template-columns:..." を強制1カラム化
   ========================================================= */
@media (max-width: 900px) {
  .xv-fullbleed [style*="grid-template-columns:repeat(2,1fr)"],
  .xv-fullbleed [style*="grid-template-columns: repeat(2, 1fr)"],
  .xv-fullbleed [style*="grid-template-columns:repeat(3,1fr)"],
  .xv-fullbleed [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .xv-fullbleed [style*="grid-template-columns:repeat(4,1fr)"],
  .xv-fullbleed [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .xv-fullbleed [style*="grid-template-columns:repeat(4,1fr)"],
  .xv-fullbleed [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   PR セクション ― モバイル最適化
   ========================================================= */
@media (max-width: 900px) {
  .xv-pr-section {
    padding: 64px 24px !important;
  }
  .xv-pr-eyebrow {
    font-size: 10px !important;
    margin-bottom: 18px !important;
  }
  .xv-pr-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.2 !important;
  }
  .xv-pr-title-en {
    display: block !important;
    font-size: 14px !important;
    margin: 8px 0 0 0 !important;
  }
  .xv-pr-lede {
    font-size: 13px !important;
    line-height: 1.95 !important;
    margin-bottom: 40px !important;
  }
  .xv-pr-video-meta {
    margin-bottom: 48px !important;
  }
  .xv-pr-track-title {
    font-size: 18px !important;
  }
  .xv-pr-channel {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 24px !important;
    text-align: center;
  }
  .xv-pr-yt-icon {
    margin: 0 auto !important;
    width: 56px !important;
    height: 56px !important;
  }
  .xv-pr-yt-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  .xv-pr-channel-cta {
    display: block !important;
    text-align: center;
  }
}

/* =========================================================
   タッチデバイス専用
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  /* ホバー効果を無効化(タッチでは違和感) */
  .xv-service:hover,
  .xv-strength:hover,
  .xv-product-card:hover,
  .xv-showcase-item:hover,
  .xv-pr-channel:hover {
    background: inherit;
    border-color: inherit;
    transform: none;
  }
  
  /* 矢印アニメーションも無効 */
  .xv-service:hover .xv-service-arrow,
  .xv-product-card:hover .xv-product-arrow {
    transform: none;
  }
}

/* =========================================================
   印刷
   ========================================================= */
@media print {
  .xv-hero-image,
  video,
  iframe,
  .xv-pr-section,
  .xv-cta-buttons {
    display: none !important;
  }
  .xv-fullbleed {
    background: white !important;
    color: black !important;
  }
}
/* =========================================================
   ザナビジョン v3.13 サイドバー表示パッチ
   既存CSSの【一番下】に追記
   
   問題: .xv-fullbleed があるページでサイドバーが強制非表示
   対応: .xv-with-sidebar クラスを併用したページではサイドバーを残す
   
   使い方:
   サイドバーを表示したいページのトップHTMLを、
     ＜div class="xv-fullbleed"＞
   から
     ＜div class="xv-fullbleed xv-with-sidebar"＞
   に変更
   ========================================================= */

/* xv-with-sidebar が付いているページ ―― サイドバー表示を強制復活 */
body:has(.xv-fullbleed.xv-with-sidebar) .l-sidebar,
body:has(.xv-fullbleed.xv-with-sidebar) aside.l-sidebar,
body:has(.xv-fullbleed.xv-with-sidebar) #sidebar {
  display: block !important;
}

/* 2カラムレイアウトを復活 */
body:has(.xv-fullbleed.xv-with-sidebar) .l-content--has2col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

/* xv-with-sidebar がついている時、xv-fullbleed の幅を制御
   (viewport全幅ではなく、メインコンテンツ領域内で広がる) */
.xv-fullbleed.xv-with-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* SWELL のメインコンテンツ領域を活かす */
body:has(.xv-fullbleed.xv-with-sidebar) .l-mainContent,
body:has(.xv-fullbleed.xv-with-sidebar) main.l-main,
body:has(.xv-fullbleed.xv-with-sidebar) article {
  max-width: 100% !important;
  width: 100% !important;
}

/* サイドバー表示時はヒーロー余白も適切に */
.xv-fullbleed.xv-with-sidebar .xv-hero {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.xv-fullbleed.xv-with-sidebar .xv-section,
.xv-fullbleed.xv-with-sidebar .xv-services,
.xv-fullbleed.xv-with-sidebar .xv-strengths,
.xv-fullbleed.xv-with-sidebar .xv-about,
.xv-fullbleed.xv-with-sidebar .xv-statement,
.xv-fullbleed.xv-with-sidebar .xv-cta,
.xv-fullbleed.xv-with-sidebar .xv-stats {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* タイトルサイズも少し控えめに(2カラム幅に最適化) */
.xv-fullbleed.xv-with-sidebar .xv-hero-title {
  font-size: clamp(36px, 5vw, 64px) !important;
}
/* =========================================================
   ザナビジョン v3.14 サイドバー表示パッチ (強化版)
   既存CSSの【一番下】に追記。v3.13より優先度が高い。
   
   問題: v3.11で .xv-hero のあるページのサイドバーも消していた
   対応: xv-with-sidebar クラスがあれば、.xv-hero 経由の非表示も解除
   ========================================================= */

/* xv-with-sidebar が併用されているページのサイドバーを最優先で表示 */
body:has(.xv-with-sidebar) .l-sidebar,
body:has(.xv-with-sidebar) aside.l-sidebar,
body:has(.xv-with-sidebar) #sidebar,
body:has(.xv-with-sidebar) .p-sidebar,
body:has(.xv-with-sidebar) [class*="sidebar"]:not(.xv-fullbleed):not(.xv-with-sidebar) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* 2カラムレイアウトを強制復活 */
body:has(.xv-with-sidebar) .l-content,
body:has(.xv-with-sidebar) .l-content--has2col,
body:has(.xv-with-sidebar) .l-content.l-content--has2col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* メインコンテンツ領域 */
body:has(.xv-with-sidebar) .l-mainContent,
body:has(.xv-with-sidebar) main.l-main,
body:has(.xv-with-sidebar) article {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}

/* xv-fullbleed の幅を「親コンテナ内」に制限(viewport全幅にしない) */
.xv-fullbleed.xv-with-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible;
}

/* 各セクションの padding 調整 */
.xv-fullbleed.xv-with-sidebar .xv-hero {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.xv-fullbleed.xv-with-sidebar .xv-section,
.xv-fullbleed.xv-with-sidebar .xv-services,
.xv-fullbleed.xv-with-sidebar .xv-strengths,
.xv-fullbleed.xv-with-sidebar .xv-about,
.xv-fullbleed.xv-with-sidebar .xv-statement,
.xv-fullbleed.xv-with-sidebar .xv-cta,
.xv-fullbleed.xv-with-sidebar .xv-stats {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.xv-fullbleed.xv-with-sidebar .xv-hero-title {
  font-size: clamp(36px, 5vw, 64px) !important;
}

/* ===== モバイルではサイドバーを下に積む(SWELL標準動作) ===== */
@media (max-width: 959px) {
  body:has(.xv-with-sidebar) .l-content--has2col {
    grid-template-columns: 1fr !important;
  }
}

/* SWELLウィジェットエリアの表示も確実に */
body:has(.xv-with-sidebar) .widget_search,
body:has(.xv-with-sidebar) .widget_recent_entries,
body:has(.xv-with-sidebar) .widget_categories,
body:has(.xv-with-sidebar) .widget_archive,
body:has(.xv-with-sidebar) .widget_text,
body:has(.xv-with-sidebar) .widget_nav_menu,
body:has(.xv-with-sidebar) .widget_calendar,
body:has(.xv-with-sidebar) .p-sidebarItem {
  display: block !important;
}
/* =========================================================
   ザナビジョン v3.17 タイトル折り返し最適化パッチ
   既存CSSの【一番下】に追記
   
   問題: 日本語タイトルが意図しない箇所で折り返される
   対応: word-break: keep-all + overflow-wrap: anywhere で
        単語(文節)を分断しない自然な折り返しに
   ========================================================= */

/* タイトル類すべてに日本語の自然な折り返し */
.xv-fullbleed .xv-hero-title,
.xv-fullbleed .xv-hero-subtitle,
.xv-fullbleed .xv-section-title,
.xv-fullbleed .xv-about-statement,
.xv-fullbleed .xv-cta-title,
.xv-fullbleed .xv-statement-text,
.xv-fullbleed .xv-strength-title,
.xv-fullbleed .xv-service-name,
.xv-fullbleed .xv-product-name,
.xv-fullbleed .xv-pricing-name {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-break: strict !important;
}

/* About ステートメント ― サイズ少し控えめに(2行で収まる前提) */
.xv-fullbleed .xv-about-statement {
  font-size: clamp(20px, 2.1vw, 30px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

/* セクションタイトルも同様に少し抑える */
.xv-fullbleed .xv-section-title {
  font-size: clamp(26px, 3.3vw, 44px) !important;
  line-height: 1.3 !important;
}

/* モバイルでは少し小さめに */
@media (max-width: 900px) {
  .xv-fullbleed .xv-about-statement {
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }
  .xv-fullbleed .xv-section-title {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
}
/* =========================================================
   ザナビジョン v3.18 サイドバー併用時のレイアウト修正
   既存CSSの【一番下】に追記
   
   問題:
   - サイドバー併用ページのヒーロータイトルが大きすぎる
   - ヒーローが左端に張り付く / 余白がおかしい
   ========================================================= */

/* サイドバー併用時のヒーロータイトルを大幅に抑える */
.xv-fullbleed.xv-with-sidebar .xv-hero-title {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
}

/* サイドバー併用時のヒーロー余白(左の張り付きを解消) */
.xv-fullbleed.xv-with-sidebar .xv-hero {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  min-height: auto !important;
}

/* ヒーローの背景グリッドパターンも控えめに */
.xv-fullbleed.xv-with-sidebar .xv-hero::before {
  background-size: 64px 64px;
}

/* hero-main の最大幅を制限(間延びしない) */
.xv-fullbleed.xv-with-sidebar .xv-hero-main {
  max-width: 100%;
}

/* サブタイトルと本文も少し抑える */
.xv-fullbleed.xv-with-sidebar .xv-hero-subtitle {
  font-size: clamp(14px, 1.3vw, 18px) !important;
}

.xv-fullbleed.xv-with-sidebar .xv-hero-eyebrow {
  font-size: 10px !important;
  margin-bottom: 16px !important;
}

/* セクションも適切な余白に */
.xv-fullbleed.xv-with-sidebar .xv-section {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* メインコンテンツ列の最大幅を上限 (サイドバー込みでぴったり収まる幅) */
html body:has(.xv-with-sidebar) .l-content,
html body:has(.xv-with-sidebar) .l-content--has2col {
  max-width: 1240px !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 24px !important;
}

/* サイドバー幅も少し小さめ */
html body:has(.xv-with-sidebar) aside.l-sidebar {
  width: 280px !important;
  min-width: 280px !important;
  padding: 16px !important;
}

/* モバイル: タイトルさらに抑える */
@media (max-width: 900px) {
  .xv-fullbleed.xv-with-sidebar .xv-hero-title {
    font-size: clamp(26px, 6.5vw, 36px) !important;
  }
  .xv-fullbleed.xv-with-sidebar .xv-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  html body:has(.xv-with-sidebar) .l-content,
  html body:has(.xv-with-sidebar) .l-content--has2col {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ザナビジョン v3.19 タイトルサイズ全体統一パッチ
   既存CSSの【一番下】に追記
   
   問題: 各ページのヒーロータイトル・セクションタイトルが大きすぎる
   対応: 全ページで控えめで上品なサイズに統一
   ========================================================= */

/* ===== HERO タイトル ― 全ページ共通の控えめサイズ ===== */
.xv-fullbleed .xv-hero-title {
  font-size: clamp(28px, 3.5vw, 52px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
}

/* HERO サブタイトル */
.xv-fullbleed .xv-hero-subtitle {
  font-size: clamp(14px, 1.4vw, 20px) !important;
  line-height: 1.5 !important;
}

/* HERO eyebrow(上の小さなラベル) */
.xv-fullbleed .xv-hero-eyebrow {
  font-size: 10px !important;
  margin-bottom: 16px !important;
}

/* 内ページの圧縮版ヒーロー(min-height:autoのもの)はさらに少し小さく */
.xv-fullbleed .xv-hero[style*="min-height:auto"] .xv-hero-title {
  font-size: clamp(26px, 3.2vw, 44px) !important;
}

/* ===== セクションタイトル(各セクション見出し) ===== */
.xv-fullbleed .xv-section-title {
  font-size: clamp(22px, 2.6vw, 36px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 28px !important;
}

.xv-fullbleed .xv-section-title-en {
  font-size: 0.36em !important;
  margin-top: 12px !important;
}

/* ===== ABOUTステートメント ===== */
.xv-fullbleed .xv-about-statement {
  font-size: clamp(20px, 2.1vw, 30px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

/* ===== STATEMENT(中央配置の宣言文) ===== */
.xv-fullbleed .xv-statement-text {
  font-size: clamp(16px, 1.7vw, 24px) !important;
  line-height: 1.65 !important;
}

/* ===== CTAタイトル ===== */
.xv-fullbleed .xv-cta-title {
  font-size: clamp(22px, 2.8vw, 40px) !important;
  line-height: 1.25 !important;
  margin-bottom: 40px !important;
}

.xv-fullbleed .xv-cta-title-en {
  font-size: 0.32em !important;
  margin-top: 16px !important;
}

/* ===== Strengthカード見出し ===== */
.xv-fullbleed .xv-strength-title {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ===== Service カード名 ===== */
.xv-fullbleed .xv-service-name {
  font-size: clamp(17px, 1.8vw, 22px) !important;
  line-height: 1.3 !important;
}

/* ===== Product カード名 ===== */
.xv-fullbleed .xv-product-name {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

/* ===== Pricing カード名 ===== */
.xv-fullbleed .xv-pricing-name {
  font-size: 20px !important;
}

/* ===== Support 名 ===== */
.xv-fullbleed .xv-support-name {
  font-size: 17px !important;
}

/* ===== タイトル類すべてに word-break: keep-all 強制(再掲・優先度確保) ===== */
.xv-fullbleed .xv-hero-title,
.xv-fullbleed .xv-hero-subtitle,
.xv-fullbleed .xv-section-title,
.xv-fullbleed .xv-about-statement,
.xv-fullbleed .xv-cta-title,
.xv-fullbleed .xv-statement-text,
.xv-fullbleed .xv-strength-title,
.xv-fullbleed .xv-service-name,
.xv-fullbleed .xv-product-name,
.xv-fullbleed .xv-pricing-name,
.xv-fullbleed .xv-support-name {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-break: strict !important;
}

/* ===== モバイル ===== */
@media (max-width: 900px) {
  .xv-fullbleed .xv-hero-title {
    font-size: clamp(24px, 6.5vw, 34px) !important;
  }
  .xv-fullbleed .xv-section-title {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
  .xv-fullbleed .xv-about-statement {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  .xv-fullbleed .xv-cta-title {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  .xv-fullbleed .xv-statement-text {
    font-size: clamp(15px, 4.5vw, 18px) !important;
  }
}

@media (max-width: 640px) {
  .xv-fullbleed .xv-hero-title {
    font-size: clamp(22px, 7vw, 28px) !important;
  }
}
/* =========================================================
   ザナビジョン v3.20 ヒーロー余白&モバイル画像修正
   既存CSSの【一番下】に追記
   
   問題:
   - HEROセクション上下の余白が広すぎる
   - スマホで女性画像が小さすぎる(280pxで頭身が崩れる)
   ========================================================= */

/* ===== HERO 余白を圧縮 (デスクトップ) ===== */
.xv-fullbleed .xv-hero {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* min-height:auto指定の内ページヒーローはさらに圧縮 */
.xv-fullbleed .xv-hero[style*="min-height:auto"] {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* hero-grid のgapも控えめに */
.xv-fullbleed .xv-hero-grid {
  margin-top: 16px !important;
  gap: 48px !important;
  align-items: center !important;
}

/* hero-image の表示を最適化(白い余白を出さない) */
.xv-fullbleed .xv-hero-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.xv-fullbleed .xv-hero-image img {
  max-height: 480px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ===== STATEMENT セクションのトップ余白も控えめに ===== */
.xv-fullbleed .xv-statement {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* ===== モバイル(≤900px): 画像を大きく表示 ===== */
@media (max-width: 900px) {
  .xv-fullbleed .xv-hero {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  
  .xv-fullbleed .xv-hero-grid {
    gap: 24px !important;
    margin-top: 12px !important;
  }
  
  /* スマホで画像を本気で大きく */
  .xv-fullbleed .xv-hero-image {
    width: 100% !important;
    margin-top: 16px !important;
  }
  
  .xv-fullbleed .xv-hero-image img {
    max-height: 480px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  
  .xv-fullbleed .xv-statement {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ===== 小型スマホ(≤640px) ===== */
@media (max-width: 640px) {
  .xv-fullbleed .xv-hero {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .xv-fullbleed .xv-hero-image img {
    max-height: 420px !important;
    max-width: 100% !important;
    width: 90% !important;
  }
  
  .xv-fullbleed .xv-statement {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* ===== 極小スマホ(≤380px) ===== */
@media (max-width: 380px) {
  .xv-fullbleed .xv-hero-image img {
    max-height: 360px !important;
  }
}
/* =========================================================
   ザナビジョン v3.21 法的文書ページ + フッター
   既存design.cssの末尾に追加(または独立読み込み)
   ========================================================= */

/* ===== 法的文書ページ共通スタイル ===== */
.xv-legal .xv-legal-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 2;
  color: #1c1917;
  letter-spacing: 0.02em;
}

.xv-legal .xv-legal-lede {
  font-size: 14px;
  line-height: 2.05;
  color: #1c1917;
  background: #fafaf9;
  padding: 20px 24px;
  border-left: 3px solid #E10600;
  margin: 0 0 40px 0;
  letter-spacing: 0.02em;
}

.xv-legal .xv-legal-body h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin: 40px 0 14px 0;
  padding: 0 0 0 14px;
  border-left: 3px solid #E10600;
  line-height: 1.5;
  background: none;
}

.xv-legal .xv-legal-body h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0a0a0a;
  margin: 24px 0 10px 0;
  padding: 0;
  letter-spacing: 0.01em;
}

.xv-legal .xv-legal-body p {
  margin: 0 0 18px 0;
}

.xv-legal .xv-legal-body ol,
.xv-legal .xv-legal-body ul {
  padding-left: 24px;
  margin: 12px 0 18px 0;
}

.xv-legal .xv-legal-body li {
  margin-bottom: 6px;
  line-height: 1.95;
}

.xv-legal .xv-legal-body strong {
  font-weight: 600;
  color: #0a0a0a;
}

.xv-legal .xv-legal-body a {
  color: #E10600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xv-legal .xv-legal-body a:hover {
  color: #ff1f1a;
}

/* ===== 法的文書のテーブル ===== */
.xv-legal .xv-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px 0;
  font-size: 13px;
}

.xv-legal .xv-legal-table th,
.xv-legal .xv-legal-table td {
  border: 1px solid #e7e5e4;
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
}

.xv-legal .xv-legal-table th {
  background: #fafaf9;
  font-weight: 600;
  color: #0a0a0a;
  width: 32%;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.01em;
}

.xv-legal .xv-legal-table thead th {
  background: #0a0a0a;
  color: #fff;
  text-align: center;
  width: auto;
}

.xv-legal .xv-legal-table small {
  font-size: 11px;
  color: #57534e;
  display: block;
  margin-top: 4px;
}

/* ===== お問い合わせ情報ボックス ===== */
.xv-legal .xv-legal-info {
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  padding: 20px 24px;
  margin: 16px 0 24px 0;
  font-size: 13px;
  line-height: 1.95;
}

.xv-legal .xv-legal-info strong {
  font-weight: 700;
  color: #0a0a0a;
  display: block;
  margin-bottom: 6px;
}

.xv-legal .xv-legal-info p {
  margin: 0;
}

/* ===== 制定日表示 ===== */
.xv-legal .xv-legal-date {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #e7e5e4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #57534e;
  letter-spacing: 0.06em;
  text-align: right;
  line-height: 1.8;
}

/* ===== モバイル ===== */
@media (max-width: 640px) {
  .xv-legal .xv-legal-body {
    padding: 24px 18px 56px;
    font-size: 13px;
  }
  .xv-legal .xv-legal-body h2 {
    font-size: 15px;
    margin: 32px 0 12px 0;
  }
  .xv-legal .xv-legal-table th,
  .xv-legal .xv-legal-table td {
    padding: 10px 12px;
    font-size: 12px;
  }
  .xv-legal .xv-legal-table th {
    width: 36%;
  }
}

/* =========================================================
   フッター(法的リンク含む)
   ========================================================= */
.xv-site-footer {
  background: #0a0a0a;
  color: #f5f5f4;
  padding: 64px 24px 32px;
  font-family: 'Noto Sans JP', sans-serif;
}

.xv-site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.xv-site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.xv-site-footer-brand {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.xv-site-footer-brand::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #E10600;
  border-radius: 50%;
}

.xv-site-footer-tag {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.95;
  margin: 0 0 16px 0;
  max-width: 380px;
}

.xv-site-footer-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  line-height: 1.95;
  margin: 0;
}

.xv-site-footer h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #E10600;
  font-weight: 500;
  margin: 0 0 18px 0;
  text-transform: uppercase;
}

.xv-site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.xv-site-footer li {
  margin-bottom: 10px;
}

.xv-site-footer a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.xv-site-footer a:hover {
  color: #fff !important;
}

.xv-site-footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.xv-site-footer-bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.xv-site-footer-bottom-links a {
  font-size: 10px !important;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5) !important;
}

@media (max-width: 900px) {
  .xv-site-footer {
    padding: 48px 20px 24px;
  }
  .xv-site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .xv-site-footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .xv-site-footer-grid {
    grid-template-columns: 1fr;
  }
  .xv-site-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* =========================================================
   ザナビジョン v3.22 SWELL本体フッター非表示パッチ
   独自フッター(.xv-site-footer)を表示するため、
   SWELL本体のフッター要素を完全非表示にする
   ========================================================= */

/* SWELL本体のフッター要素 ― 完全非表示 */
.l-footer,
.l-footer__inner,
footer.l-footer,
.l-footer__widgetArea,
.l-footer__nav,
.l-footer__copyright,
.c-copyright,
.p-footerNav,
.p-footerWidgets,
#footer:not(.xv-site-footer) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 独自フッターは表示維持 */
footer.xv-site-footer,
.xv-site-footer {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* =========================================================
   v3.23 SWELL本体フッター強制非表示(強化版)
   wp_footer フックで挿入された .xv-site-footer は影響を受けない
   ========================================================= */

/* SWELL の標準フッター要素を完全削除 */
body > .l-footer,
body footer.l-footer,
.l-footer:not(.xv-site-footer),
#footer:not(.xv-site-footer),
.l-footer__inner,
.l-footer__widgetArea,
.l-footer__nav,
.l-footer__copyright,
.c-copyright,
.p-footerNav {
    display: none !important;
}

/* 独自フッターは確実に表示 */
footer.xv-site-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    margin-top: 0;
}