@charset "UTF-8";
@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"); :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; } 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;
} 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;
} .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; } .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;
} .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; } .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;
} .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); } .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;
} .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; } .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;
} .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;
} .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;
} .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;
} .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); } .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;
}  .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);
} .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; }
}  .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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; }
}  .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;
}
}  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;
} 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;
} 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;
}  @media (max-width: 900px) { .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;
}
}  .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;
} @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;
}
} @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);
}
} @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;
}
} @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;
}
} @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;
}
} @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;
}
} @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;
}
} @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;
} .xv-service::after {
content: '\2192  ';
position: absolute;
right: 24px;
bottom: 24px;
font-size: 14px;
color: var(--xv-text-dim);
}
} @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;
}
} @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;
} .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);
}
} @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;
}
} @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;
}
} @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;
}
} @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;
}
} @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;
}
}  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;
} body:has(.xv-fullbleed.xv-with-sidebar) .l-content--has2col {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
} .xv-fullbleed.xv-with-sidebar {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
} 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;
} .xv-fullbleed.xv-with-sidebar .xv-hero-title {
font-size: clamp(36px, 5vw, 64px) !important;
}  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;
} 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.xv-with-sidebar {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: visible;
} .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;
} @media (max-width: 959px) {
body:has(.xv-with-sidebar) .l-content--has2col {
grid-template-columns: 1fr !important;
}
} 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;
}  .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;
} .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;
}
}  .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;
} .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;
}
}  .xv-fullbleed .xv-hero-title {
font-size: clamp(28px, 3.5vw, 52px) !important;
line-height: 1.15 !important;
letter-spacing: -0.04em !important;
} .xv-fullbleed .xv-hero-subtitle {
font-size: clamp(14px, 1.4vw, 20px) !important;
line-height: 1.5 !important;
} .xv-fullbleed .xv-hero-eyebrow {
font-size: 10px !important;
margin-bottom: 16px !important;
} .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;
} .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-statement-text {
font-size: clamp(16px, 1.7vw, 24px) !important;
line-height: 1.65 !important;
} .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;
} .xv-fullbleed .xv-strength-title {
font-size: 16px !important;
line-height: 1.5 !important;
} .xv-fullbleed .xv-service-name {
font-size: clamp(17px, 1.8vw, 22px) !important;
line-height: 1.3 !important;
} .xv-fullbleed .xv-product-name {
font-size: 18px !important;
line-height: 1.4 !important;
} .xv-fullbleed .xv-pricing-name {
font-size: 20px !important;
} .xv-fullbleed .xv-support-name {
font-size: 17px !important;
} .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;
}
}  .xv-fullbleed .xv-hero {
padding-top: 32px !important;
padding-bottom: 32px !important;
} .xv-fullbleed .xv-hero[style*="min-height:auto"] {
padding-top: 28px !important;
padding-bottom: 28px !important;
} .xv-fullbleed .xv-hero-grid {
margin-top: 16px !important;
gap: 48px !important;
align-items: center !important;
} .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;
} .xv-fullbleed .xv-statement {
padding-top: 56px !important;
padding-bottom: 56px !important;
} @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;
}
} @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;
}
} @media (max-width: 380px) {
.xv-fullbleed .xv-hero-image img {
max-height: 360px !important;
}
}  .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;
}
}  .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;
}  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;
}  .xv-site-footer-brand {
display: block !important;
margin: 0 0 16px 0;
padding: 0;
}
.xv-site-footer-brand::before {
display: none !important;
content: none !important;
} .xv-site-footer-logo {
display: block;
max-width: 220px;
height: auto;
width: auto;
max-height: 56px;
object-fit: contain;
}
@media (max-width: 900px) {
.xv-site-footer-logo {
max-width: 180px;
max-height: 48px;
}
}  .xv-recruit-triptych {
padding: 0 24px 80px;
max-width: 1400px;
margin: 0 auto;
}
.xv-recruit-triptych-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
background: #0a0a0a;
}
.xv-recruit-triptych-item {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: #0a0a0a;
}
.xv-recruit-triptych-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease, filter 0.6s ease;
filter: grayscale(20%) contrast(1.05);
}
.xv-recruit-triptych-item:hover img {
transform: scale(1.04);
filter: grayscale(0%) contrast(1);
}
.xv-recruit-triptych-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px 28px;
color: #fff;
}
.xv-recruit-triptych-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.3em;
color: #E10600;
margin-bottom: 12px;
font-weight: 500;
}
.xv-recruit-triptych-name {
font-family: 'Inter Tight', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
line-height: 1.1;
margin-bottom: 6px;
}
.xv-recruit-triptych-jp {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.85);
letter-spacing: 0.04em;
}
.xv-recruit-triptych-caption {
text-align: center;
margin-top: 56px;
padding: 0 24px;
}
.xv-recruit-triptych-caption p {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.95;
color: #1c1917;
margin: 0 0 12px 0;
letter-spacing: 0.01em;
}
.xv-recruit-triptych-caption strong {
color: #E10600;
font-weight: 600;
}
.xv-recruit-triptych-en {
font-family: 'Inter Tight', sans-serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.05em;
color: #57534e;
margin-top: 16px;
}
@media (max-width: 900px) {
.xv-recruit-triptych {
padding: 0 16px 56px;
}
.xv-recruit-triptych-grid {
grid-template-columns: 1fr;
gap: 4px;
}
.xv-recruit-triptych-item {
aspect-ratio: 16/10;
}
.xv-recruit-triptych-name {
font-size: 19px;
}
} .xv-recruit-jobs {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 32px;
}
.xv-recruit-job {
display: block;
padding: 32px 28px;
background: #fafaf9;
border: 1px solid #e7e5e4;
text-decoration: none !important;
color: inherit !important;
transition: all 0.3s ease;
position: relative;
}
.xv-recruit-job:hover {
background: #fff;
border-color: #E10600;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
} .xv-recruit-job-with-image {
display: grid !important;
grid-template-columns: 320px 1fr auto;
gap: 32px;
align-items: center;
padding: 24px;
}
.xv-recruit-job-with-image.xv-recruit-job-reverse {
grid-template-columns: 1fr 320px auto;
}
.xv-recruit-job-with-image.xv-recruit-job-reverse .xv-recruit-job-image {
order: 2;
}
.xv-recruit-job-with-image.xv-recruit-job-reverse .xv-recruit-job-body {
order: 1;
padding-right: 16px;
}
.xv-recruit-job-image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: #0a0a0a;
}
.xv-recruit-job-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.xv-recruit-job:hover .xv-recruit-job-image img {
transform: scale(1.05);
}
.xv-recruit-job-body {
min-width: 0;
}
.xv-recruit-job-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: #E10600;
font-weight: 500;
margin-bottom: 10px;
}
.xv-recruit-job-name {
font-family: 'Noto Sans JP', sans-serif;
font-size: 19px;
font-weight: 700;
color: #0a0a0a;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 4px;
}
.xv-recruit-job-name-en {
font-family: 'Inter Tight', sans-serif;
font-style: italic;
font-size: 13px;
color: #78716c;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.xv-recruit-job-desc {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: 13.5px;
line-height: 1.95;
color: #1c1917;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.xv-recruit-job-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.xv-recruit-job-arrow {
font-family: 'Inter Tight', sans-serif;
font-size: 24px;
color: #d6d3d1;
transition: all 0.3s;
align-self: center;
}
.xv-recruit-job:hover .xv-recruit-job-arrow {
color: #E10600;
transform: translateX(6px);
} .xv-recruit-job:not(.xv-recruit-job-with-image) {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: start;
padding: 28px 32px;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-num {
white-space: nowrap;
margin: 0;
padding-top: 4px;
align-self: start;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) > div:not(.xv-recruit-job-arrow):not(.xv-recruit-job-num) { }
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-arrow {
align-self: start;
padding-top: 4px;
}
@media (max-width: 900px) {
.xv-recruit-job-with-image,
.xv-recruit-job-with-image.xv-recruit-job-reverse {
grid-template-columns: 1fr !important;
gap: 16px;
}
.xv-recruit-job-with-image.xv-recruit-job-reverse .xv-recruit-job-image {
order: 1;
}
.xv-recruit-job-with-image.xv-recruit-job-reverse .xv-recruit-job-body {
order: 2;
padding-right: 0;
}
.xv-recruit-job-with-image .xv-recruit-job-arrow {
display: none;
}
.xv-recruit-job-image {
aspect-ratio: 16/10;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) {
grid-template-columns: 1fr;
gap: 12px;
padding: 24px 20px;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-arrow {
display: none;
}
} .xv-recruit-interviews {
display: flex;
flex-direction: column;
gap: 56px;
margin-top: 48px;
}
.xv-recruit-interview {
display: grid;
grid-template-columns: 380px 1fr;
gap: 48px;
align-items: center;
}
.xv-recruit-interview-reverse {
grid-template-columns: 1fr 380px;
}
.xv-recruit-interview-reverse .xv-recruit-interview-image {
order: 2;
}
.xv-recruit-interview-reverse .xv-recruit-interview-body {
order: 1;
}
.xv-recruit-interview-image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: #0a0a0a;
}
.xv-recruit-interview-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.xv-recruit-interview-image::before {
content: '';
position: absolute;
top: 16px;
left: 16px;
width: 32px;
height: 32px;
border-top: 2px solid #E10600;
border-left: 2px solid #E10600;
z-index: 2;
}
.xv-recruit-interview-image::after {
content: '';
position: absolute;
bottom: 16px;
right: 16px;
width: 32px;
height: 32px;
border-bottom: 2px solid #E10600;
border-right: 2px solid #E10600;
z-index: 2;
}
.xv-recruit-interview-body {
padding: 24px 8px;
}
.xv-recruit-interview-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: #E10600;
font-weight: 500;
margin-bottom: 14px;
}
.xv-recruit-interview-name {
font-family: 'Noto Sans JP', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #0a0a0a;
line-height: 1.3;
margin: 0 0 24px 0;
}
.xv-recruit-interview-name em {
font-style: normal;
color: #E10600;
font-weight: 700;
}
.xv-recruit-interview-quote {
position: relative;
margin: 0;
padding: 0 0 0 28px;
border-left: 3px solid #E10600;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: 14.5px;
line-height: 2.05;
color: #1c1917;
letter-spacing: 0.02em;
}
.xv-recruit-interview-quote p {
margin: 0 0 16px 0;
}
.xv-recruit-interview-quote p:last-child {
margin-bottom: 0;
}
@media (max-width: 900px) {
.xv-recruit-interview,
.xv-recruit-interview-reverse {
grid-template-columns: 1fr;
gap: 20px;
}
.xv-recruit-interview-reverse .xv-recruit-interview-image {
order: 1;
}
.xv-recruit-interview-reverse .xv-recruit-interview-body {
order: 2;
}
.xv-recruit-interview-image {
aspect-ratio: 4/3;
max-width: 400px;
margin: 0 auto;
}
.xv-recruit-interview-name {
font-size: 18px;
}
}  .xv-recruit-job:not(.xv-recruit-job-with-image) {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 24px;
align-items: center;
padding: 28px 32px !important;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-body {
min-width: 0;
display: block;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-num {
margin-bottom: 10px;
padding: 0;
white-space: nowrap;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-name {
margin-bottom: 4px;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-arrow {
align-self: center;
padding: 0;
}
@media (max-width: 900px) {
.xv-recruit-job:not(.xv-recruit-job-with-image) {
grid-template-columns: 1fr !important;
padding: 24px 20px !important;
}
.xv-recruit-job:not(.xv-recruit-job-with-image) .xv-recruit-job-arrow {
display: none;
}
} .xv-recruit-interviews {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px !important;
margin-top: 48px;
}
.xv-recruit-interview {
display: block !important;
grid-template-columns: none !important;
background: #fff;
border: 1px solid #e7e5e4;
padding: 32px 28px;
}
.xv-recruit-interview-body {
padding: 0;
}
.xv-recruit-interview-image {
display: none !important;
}
.xv-recruit-interview-quote {
font-size: 14px;
line-height: 2.0;
}
@media (max-width: 900px) {
.xv-recruit-interviews {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.xv-recruit-interview {
padding: 24px 20px;
}
} .xv-corp-panel-image {
margin-top: 32px;
position: relative;
max-width: 480px;
}
.xv-corp-panel-image img {
width: 100%;
height: auto;
display: block;
border: 1px solid #e7e5e4;
}
.xv-corp-panel-caption {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e7e5e4;
}
.xv-corp-panel-caption-en {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: #E10600;
font-weight: 500;
margin-bottom: 6px;
}
.xv-corp-panel-caption-jp {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: 12px;
color: #57534e;
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.xv-corp-panel-image {
max-width: 100%;
margin-top: 24px;
}
} @media (max-width: 768px) { .xv-statement,
.xv-statement-text,
.xv-fullbleed .xv-statement,
.xv-fullbleed .xv-statement-text {
text-align: left !important;
} .xv-statement-text,
.xv-fullbleed .xv-statement-text {
padding-left: 24px !important;
padding-right: 24px !important;
} .xv-statement-mark {
margin-left: auto !important;
margin-right: auto !important;
} .xv-statement-en {
text-align: left !important;
padding-left: 24px !important;
}
}