/* ==========================================================================
Variables - S.Line Corporate Theme Design Tokens
========================================================================== */
:root {
/* ------------------------------------------------------------------
Colors
------------------------------------------------------------------ */
/* Brand — matched to official logo (logo-sline-official.png) */
--color-brand-primary: #8BA4C8;
--color-brand-secondary: #6B8BB5;
--color-brand-light: #C5D3E8;
--color-brand-lighter: #E8EDF5;
--color-brand-dark: #5A7AA3;
/* Accent (soft yellow/gold from logo dots) */
--color-accent-yellow: #E8D44D;
--color-accent-yellow-light: #F2EAAA;
/* Backgrounds */
--color-bg: #ffffff;
--color-bg-white: #ffffff;
--color-bg-dark: #252525;
--color-bg-darker: #202020;
--color-bg-accent: #f7f7f7;
--color-bg-cta: #8BA4C8;
/* Text */
--color-text-primary: #111111;
--color-text-secondary: #555555;
--color-text-muted: #999999;
--color-text-white: #ffffff;
--color-text-brand: #8BA4C8;
/* Border */
--color-border: #e0e0e0;
--color-border-light: #eeeeee;
--color-border-dark: #cccccc;
/* State */
--color-success: #4caf50;
--color-error: #e53935;
--color-warning: #ff9800;
--color-info: #2196f3;
/* Overlay */
--color-overlay-dark: rgba(0, 0, 0, 0.5);
--color-overlay-darker: rgba(0, 0, 0, 0.7);
--color-overlay-light: rgba(255, 255, 255, 0.1);
/* Brand hover/active derivatives */
--color-brand-primary-hover: #7A96BC;
--color-brand-primary-active: #6B8BB5;
--color-cta-hover: #7A96BC;
/* Glass-morphism */
--glass-bg: rgba(255, 255, 255, 0.85);
--glass-bg-dark: rgba(17, 17, 17, 0.9);
--glass-border: rgba(0, 0, 0, 0.06);
--glass-blur: 20px;
/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------ */
/* Font families */
--font-jp: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
--font-en: "Outfit", "Helvetica Neue", Arial, sans-serif;
--font-display: "Outfit", "Noto Sans JP", sans-serif;
/* Font sizes - Fluid typography with clamp() */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: clamp(1.063rem, 1rem + 0.2vw, 1.125rem);
--text-xl: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
--text-2xl: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
--text-3xl: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
--text-4xl: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
--text-5xl: clamp(2rem, 1rem + 3vw, 3.25rem);
--text-6xl: clamp(2.5rem, 1rem + 4.5vw, 4.25rem);
--text-7xl: clamp(3rem, 1rem + 6vw, 5.5rem);
/* Line heights */
--leading-none: 1;
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.8;
--leading-loose: 2.0;
/* Font weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
/* Letter spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.15em;
--tracking-ultra: 0.25em;
/* ------------------------------------------------------------------
Spacing
------------------------------------------------------------------ */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* Section padding - fluid */
--section-padding-sm: clamp(2rem, 1rem + 3vw, 3rem);
--section-padding: clamp(3.5rem, 2rem + 5vw, 6rem);
--section-padding-lg: clamp(5rem, 3rem + 6vw, 8rem);
/* ------------------------------------------------------------------
Container
------------------------------------------------------------------ */
--container-narrow: 800px;
--container-default: 1100px;
--container-wide: 1280px;
--container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);
/* ------------------------------------------------------------------
Border radius
------------------------------------------------------------------ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* ------------------------------------------------------------------
Shadows - Layered for depth
------------------------------------------------------------------ */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.02), 0 12px 28px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.03), 0 20px 48px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.04), 0 32px 64px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.04), 0 24px 48px rgba(0, 0, 0, 0.1);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.08);
--shadow-brand: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
/* ------------------------------------------------------------------
Easing - Signature curves
------------------------------------------------------------------ */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
/* ------------------------------------------------------------------
Transitions
------------------------------------------------------------------ */
--transition-fast: 0.15s var(--ease-smooth);
--transition-base: 0.3s var(--ease-smooth);
--transition-slow: 0.5s var(--ease-out-expo);
--transition-slower: 0.7s var(--ease-out-expo);
/* ------------------------------------------------------------------
Z-index
------------------------------------------------------------------ */
--z-behind: -1;
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-overlay: 400;
--z-modal: 500;
--z-header: 1000;
--z-toast: 1100;
--z-max: 9999;
/* ------------------------------------------------------------------
Header
------------------------------------------------------------------ */
--header-height: 80px;
--header-height-scrolled: 64px;
/* ------------------------------------------------------------------
Breakpoints (as comments for reference, used in media queries)
sm: 540px
md: 768px
lg: 1024px
xl: 1280px
------------------------------------------------------------------ */
}
/* ==========================================================================
Reset - Modern CSS Reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
nav ul,
nav ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
cursor: pointer;
background: none;
border: none;
padding: 0;
}
fieldset {
border: none;
}
textarea {
resize: vertical;
}
iframe {
border: 0;
}
summary {
cursor: pointer;
}
[hidden] {
display: none !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Typography - Fluid type scale & refined heading system
========================================================================== */
/* ------------------------------------------------------------------
Google Fonts loaded via in header.php:
- Noto Sans JP: 400, 500, 700
- Lato: 400, 700
------------------------------------------------------------------ */
/* Base typography */
body {
font-family: var(--font-jp);
font-size: var(--text-base);
font-weight: var(--fw-regular);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wide);
color: var(--color-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "palt" 1;
}
/* Headings - fluid sizing via clamp() variables, no media queries needed */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-jp);
font-weight: var(--fw-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wide);
color: var(--color-text-primary);
text-wrap: balance;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); line-height: var(--leading-snug); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl); line-height: var(--leading-normal); }
h5 { font-size: var(--text-lg); line-height: var(--leading-normal); }
h6 { font-size: var(--text-base); line-height: var(--leading-normal); }
/* English font for numbers and specific elements */
.is-en,
[lang="en"] {
font-family: var(--font-en);
letter-spacing: var(--tracking-normal);
}
/* Display heading - hero-level impact */
.is-display {
font-family: var(--font-display);
font-weight: var(--fw-black);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tight);
}
/* Paragraph */
p {
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wide);
}
p + p {
margin-top: 1em;
}
/* Small text */
small {
font-size: var(--text-sm);
}
/* Strong */
strong, b {
font-weight: var(--fw-bold);
}
/* Emphasis */
em, i {
font-style: italic;
}
/* Mark */
mark {
background: linear-gradient(transparent 60%, var(--color-brand-light) 60%);
padding: 0.1em 0.2em;
}
/* ==========================================================================
Section Heading Pattern - refined with decorative accents
========================================================================== */
.c-section-heading {
text-align: center;
margin-bottom: var(--space-3xl);
position: relative;
}
/* English label above heading - flanked with gradient lines */
.c-section-heading__en {
display: inline-flex;
align-items: center;
gap: var(--space-md);
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-ultra);
text-transform: uppercase;
margin-bottom: var(--space-md);
position: relative;
}
/* Decorative gradient lines flanking label */
.c-section-heading__en::before,
.c-section-heading__en::after {
content: "";
display: block;
width: 32px;
height: 1px;
border-radius: 1px;
flex-shrink: 0;
}
.c-section-heading__en::before {
background: linear-gradient(90deg, transparent, var(--color-brand-primary));
}
.c-section-heading__en::after {
background: linear-gradient(90deg, var(--color-brand-primary), transparent);
}
@media (min-width: 768px) {
.c-section-heading__en::before,
.c-section-heading__en::after {
width: 48px;
}
}
/* Japanese heading */
.c-section-heading__ja {
display: block;
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wider);
position: relative;
}
/* Subtle decorative dot after heading */
.c-section-heading__ja::after {
content: "";
display: block;
width: 6px;
height: 6px;
background: var(--color-brand-primary);
border-radius: 50%;
margin: var(--space-md) auto 0;
opacity: 0.4;
}
/* Description */
.c-section-heading__desc {
display: block;
margin-top: var(--space-md);
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Section label (standalone) */
.c-section-label {
display: inline-block;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-ultra);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.c-section-label--light {
color: var(--color-brand-light);
}
/* Dark (now accent) background section heading overrides */
.l-section--dark .c-section-heading__en {
color: var(--color-brand-primary);
}
.l-section--dark .c-section-heading__en::before {
background: linear-gradient(90deg, transparent, var(--color-brand-primary));
}
.l-section--dark .c-section-heading__en::after {
background: linear-gradient(90deg, var(--color-brand-primary), transparent);
}
.l-section--dark .c-section-heading__ja {
color: var(--color-text-primary);
}
.l-section--dark .c-section-heading__ja::after {
background: var(--color-brand-primary);
opacity: 0.15;
}
.l-section--dark .c-section-heading__desc {
color: var(--color-text-secondary);
}
/* Japanese text line-height override for long content */
.is-jp-body {
line-height: var(--leading-loose);
letter-spacing: var(--tracking-wide);
}
/* Selection color */
::selection {
background-color: var(--color-brand-light);
color: var(--color-text-primary);
}
/* ==========================================================================
Base - Default element styles
========================================================================== */
/* Body */
body {
background-color: var(--color-bg);
overflow-x: hidden;
}
/* Links */
a {
color: var(--color-brand-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-brand-primary-hover);
}
a:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Focus visible for all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
/* Images */
img {
display: block;
max-width: 100%;
height: auto;
}
figure {
margin: 0;
}
figcaption {
margin-top: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Lists (in content areas) */
.s-content ul,
.s-content ol {
padding-left: 1.5em;
margin-bottom: 1em;
}
.s-content ul {
list-style-type: disc;
}
.s-content ol {
list-style-type: decimal;
}
.s-content li + li {
margin-top: 0.5em;
}
.p-typography ul,
.p-typography ol {
padding-left: 1.5em;
margin-bottom: 1em;
}
.p-typography ul {
list-style-type: disc;
}
.p-typography ol {
list-style-type: decimal;
}
.p-typography li + li {
margin-top: 0.5em;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
}
/* Horizontal rule */
hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-2xl) 0;
}
/* Blockquote */
blockquote {
border-left: 4px solid var(--color-brand-primary);
padding: var(--space-md) var(--space-lg);
margin: var(--space-lg) 0;
background-color: var(--color-bg-accent);
font-style: italic;
color: var(--color-text-secondary);
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote cite {
display: block;
margin-top: var(--space-sm);
font-size: var(--text-sm);
font-style: normal;
color: var(--color-text-muted);
}
/* Code */
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.875em;
background-color: var(--color-bg-accent);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
}
pre {
background-color: var(--color-bg-dark);
color: var(--color-text-white);
padding: var(--space-lg);
border-radius: var(--radius-md);
overflow-x: auto;
margin: var(--space-lg) 0;
}
pre code {
background: none;
padding: 0;
font-size: var(--text-sm);
color: inherit;
}
/* Selection */
::selection {
background-color: var(--color-brand-light);
color: var(--color-text-primary);
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ------------------------------------------------------------------
Container
------------------------------------------------------------------ */
.l-container {
width: 100%;
max-width: var(--container-default);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.l-container--narrow {
max-width: var(--container-narrow);
}
.l-container--wide {
max-width: var(--container-wide);
}
@media (min-width: 768px) {
.l-container {
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
}
@media (min-width: 1024px) {
.l-container {
padding-left: var(--space-2xl);
padding-right: var(--space-2xl);
}
}
/* ==========================================================================
Header - Enhanced with animations and micro-interactions
========================================================================== */
.l-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
z-index: var(--z-header);
transition:
height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ------------------------------------------------------------------
Default state: transparent (on top of hero)
------------------------------------------------------------------ */
.l-header--transparent {
background-color: transparent;
}
/* Solid background (non-hero pages) */
.l-header--solid {
background-color: var(--color-bg-white);
box-shadow: var(--shadow-sm);
}
/* ------------------------------------------------------------------
Scrolled state: solid white with blur
------------------------------------------------------------------ */
.l-header.is-scrolled {
height: var(--header-height-scrolled);
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
/* ------------------------------------------------------------------
Hidden on scroll down, show on scroll up
------------------------------------------------------------------ */
.l-header.is-hidden {
transform: translateY(-100%);
}
/* ------------------------------------------------------------------
Progress bar at top of header
------------------------------------------------------------------ */
.l-header__progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 1;
pointer-events: none;
}
.l-header__progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1a1a1a, #333333);
transition: width 0.1s linear;
}
/* ------------------------------------------------------------------
Header inner layout
------------------------------------------------------------------ */
.l-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 var(--container-padding);
}
@media (min-width: 768px) {
.l-header__inner {
padding: 0 var(--space-xl);
}
}
/* ------------------------------------------------------------------
Logo - animated on load
------------------------------------------------------------------ */
.l-header__logo {
flex-shrink: 0;
z-index: calc(var(--z-header) + 1);
opacity: 0;
transform: translateY(-8px);
animation: headerLogoIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes headerLogoIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.l-header__logo a {
display: flex;
align-items: center;
}
.l-header__logo img {
height: 40px;
width: auto;
transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-header.is-scrolled .l-header__logo img {
height: 32px;
}
/* ------------------------------------------------------------------
Navigation
------------------------------------------------------------------ */
.l-header__nav {
display: none;
}
@media (min-width: 1024px) {
.l-header__nav {
display: flex;
align-items: center;
}
}
.l-header__nav-list {
display: flex;
align-items: center;
gap: var(--space-xl);
}
.l-header__nav-item {
position: relative;
opacity: 0;
transform: translateY(-6px);
animation: headerNavIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Stagger nav items on load */
.l-header__nav-item:nth-child(1) { animation-delay: 0.3s; }
.l-header__nav-item:nth-child(2) { animation-delay: 0.38s; }
.l-header__nav-item:nth-child(3) { animation-delay: 0.46s; }
.l-header__nav-item:nth-child(4) { animation-delay: 0.54s; }
.l-header__nav-item:nth-child(5) { animation-delay: 0.62s; }
.l-header__nav-item:nth-child(6) { animation-delay: 0.70s; }
.l-header__nav-item:nth-child(7) { animation-delay: 0.78s; }
@keyframes headerNavIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Nav link with animated underline */
.l-header__nav-link {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wide);
padding: var(--space-sm) 0;
transition: color 0.3s ease;
position: relative;
}
/* Animated underline from left */
.l-header__nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-brand-primary);
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-header__nav-link:hover,
.l-header__nav-link.is-current {
color: var(--color-brand-primary);
}
.l-header__nav-link:hover::after,
.l-header__nav-link.is-current::after {
width: 100%;
}
/* ------------------------------------------------------------------
Transparent header nav colors
------------------------------------------------------------------ */
.l-header--transparent .l-header__nav-link {
color: var(--color-text-white);
}
.l-header--transparent .l-header__nav-link::after {
background-color: var(--color-brand-light);
}
.l-header--transparent .l-header__nav-link:hover,
.l-header--transparent .l-header__nav-link.is-current {
color: var(--color-brand-light);
}
/* Scrolled transparent to solid text */
.l-header--transparent.is-scrolled .l-header__nav-link {
color: var(--color-text-primary);
}
.l-header--transparent.is-scrolled .l-header__nav-link::after {
background-color: var(--color-brand-primary);
}
.l-header--transparent.is-scrolled .l-header__nav-link:hover,
.l-header--transparent.is-scrolled .l-header__nav-link.is-current {
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Nav link label structure (en/ja)
------------------------------------------------------------------ */
.l-header__menu-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: var(--space-sm) var(--space-xs);
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
.l-header__menu-en {
font-family: var(--font-en);
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-brand-primary);
transition: color 0.3s;
}
.l-header__menu-ja {
font-size: var(--text-xs);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wide);
transition: color 0.3s;
}
.l-header__menu-link:hover .l-header__menu-ja {
color: var(--color-brand-primary);
}
/* Animated underline for en/ja links */
.l-header__menu-link::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--color-brand-primary);
transform: translateX(-50%);
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-header__menu-link:hover::after,
.l-header__menu-item.is-current .l-header__menu-link::after {
width: 80%;
}
/* Transparent header en/ja overrides */
.l-header--transparent .l-header__menu-en {
color: var(--color-brand-light);
}
.l-header--transparent .l-header__menu-ja {
color: rgba(255, 255, 255, 0.9);
}
.l-header--transparent .l-header__menu-link::after {
background: var(--color-brand-light);
}
.l-header--transparent.is-scrolled .l-header__menu-en {
color: var(--color-brand-primary);
}
.l-header--transparent.is-scrolled .l-header__menu-ja {
color: var(--color-text-primary);
}
.l-header--transparent.is-scrolled .l-header__menu-link::after {
background: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Mega Menu (Services dropdown)
------------------------------------------------------------------ */
.l-header__mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
width: 520px;
background: var(--color-bg-white);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
padding: var(--space-lg);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.3s;
pointer-events: none;
}
.l-header__menu-item:hover .l-header__mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
pointer-events: auto;
}
/* Top accent gradient */
.l-header__mega-menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Arrow pointer */
.l-header__mega-menu::after {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: var(--color-bg-white);
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-left: 1px solid rgba(0, 0, 0, 0.04);
}
.l-header__mega-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xs);
}
.l-header__mega-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-md);
text-decoration: none;
transition: background-color 0.2s, transform 0.2s;
}
.l-header__mega-item:hover {
background: var(--color-bg-accent);
transform: translateX(2px);
}
.l-header__mega-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-brand-primary);
transition: background 0.3s, color 0.3s;
}
.l-header__mega-item:hover .l-header__mega-icon {
background: linear-gradient(135deg, #1a1a1a, #333333);
color: #fff;
}
.l-header__mega-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.l-header__mega-title {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
transition: color 0.2s;
}
.l-header__mega-item:hover .l-header__mega-title {
color: var(--color-brand-primary);
}
.l-header__mega-desc {
font-size: 11px;
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* Prevent gap between link and mega menu */
.l-header__menu-item--has-children {
position: relative;
}
.l-header__menu-item--has-children::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 16px;
}
@media (max-width: 1023px) {
.l-header__mega-menu {
display: none;
}
}
/* ------------------------------------------------------------------
Dropdown menu with staggered items (legacy/simple)
------------------------------------------------------------------ */
.l-header__dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 200px;
background-color: var(--color-bg-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-sm) 0;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-header__nav-item:hover .l-header__dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Stagger dropdown links */
.l-header__dropdown-item {
opacity: 0;
transform: translateY(-6px);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.l-header__nav-item:hover .l-header__dropdown-item {
opacity: 1;
transform: translateY(0);
}
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(1) { transition-delay: 0.05s; }
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(2) { transition-delay: 0.1s; }
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(3) { transition-delay: 0.15s; }
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(4) { transition-delay: 0.2s; }
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(5) { transition-delay: 0.25s; }
.l-header__nav-item:hover .l-header__dropdown-item:nth-child(6) { transition-delay: 0.3s; }
.l-header__dropdown-link {
display: block;
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-sm);
color: var(--color-text-primary);
white-space: nowrap;
transition:
background-color 0.2s ease,
color 0.2s ease,
padding-left 0.2s ease;
}
.l-header__dropdown-link:hover {
background-color: var(--color-bg-accent);
color: var(--color-brand-primary);
padding-left: calc(var(--space-lg) + 4px);
}
/* ------------------------------------------------------------------
Header CTA
------------------------------------------------------------------ */
.l-header__cta {
display: none;
}
@media (min-width: 1024px) {
.l-header__cta {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: var(--space-xl);
opacity: 0;
animation: headerNavIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}
}
.l-header__cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 28px;
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-white);
background-color: var(--color-brand-primary);
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
transition:
background-color 0.3s ease,
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Shine effect on CTA */
.l-header__cta-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%
);
transform: skewX(-25deg);
}
.l-header__cta-btn:hover::before {
animation: btnShine 0.6s ease forwards;
}
@keyframes btnShine {
from { left: -100%; }
to { left: 150%; }
}
.l-header__cta-btn:hover {
background-color: var(--color-brand-primary-hover);
color: var(--color-text-white);
transform: translateY(-1px);
}
/* ------------------------------------------------------------------
Hamburger button (mobile) - smooth morphing animation
------------------------------------------------------------------ */
.l-header__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
cursor: pointer;
z-index: calc(var(--z-header) + 2);
position: relative;
}
@media (min-width: 1024px) {
.l-header__hamburger {
display: none;
}
}
.l-header__hamburger-line {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text-primary);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s ease,
width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: center;
}
/* Transparent header lines */
.l-header--transparent .l-header__hamburger-line {
background-color: var(--color-text-white);
}
.l-header--transparent.is-scrolled .l-header__hamburger-line {
background-color: var(--color-text-primary);
}
.l-header__hamburger-line + .l-header__hamburger-line {
margin-top: 6px;
}
/* Staggered line widths for visual interest */
.l-header__hamburger-line:nth-child(2) {
width: 18px;
align-self: flex-end;
}
.l-header__hamburger:hover .l-header__hamburger-line:nth-child(2) {
width: 24px;
}
/* ------------------------------------------------------------------
Hamburger open state: morph to X
------------------------------------------------------------------ */
.l-header__hamburger.is-open .l-header__hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
background-color: var(--color-text-primary);
}
.l-header__hamburger.is-open .l-header__hamburger-line:nth-child(2) {
opacity: 0;
width: 0;
}
.l-header__hamburger.is-open .l-header__hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
background-color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Mobile menu - fullscreen overlay with animations
------------------------------------------------------------------ */
.l-header__mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background-color: var(--color-bg-white);
z-index: var(--z-header);
padding: calc(var(--header-height) + var(--space-2xl)) var(--container-padding) var(--space-2xl);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.l-header__mobile-menu.is-open {
opacity: 1;
visibility: visible;
}
/* ------------------------------------------------------------------
Mobile nav links with staggered entrance
------------------------------------------------------------------ */
.l-header__mobile-nav-list {
display: flex;
flex-direction: column;
gap: 0;
}
.l-header__mobile-nav-item {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Stagger mobile nav items */
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(1) {
opacity: 1; transform: translateY(0); transition-delay: 0.1s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(2) {
opacity: 1; transform: translateY(0); transition-delay: 0.16s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(3) {
opacity: 1; transform: translateY(0); transition-delay: 0.22s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(4) {
opacity: 1; transform: translateY(0); transition-delay: 0.28s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(5) {
opacity: 1; transform: translateY(0); transition-delay: 0.34s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(6) {
opacity: 1; transform: translateY(0); transition-delay: 0.40s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(7) {
opacity: 1; transform: translateY(0); transition-delay: 0.46s;
}
.l-header__mobile-menu.is-open .l-header__mobile-nav-item:nth-child(8) {
opacity: 1; transform: translateY(0); transition-delay: 0.52s;
}
.l-header__mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) 0;
font-size: var(--text-lg);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
transition: color 0.2s ease;
}
.l-header__mobile-nav-link:hover,
.l-header__mobile-nav-link.is-current {
color: var(--color-brand-primary);
}
/* Arrow indicator for mobile links */
.l-header__mobile-nav-link::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: 0.4;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.l-header__mobile-nav-link:hover::after {
opacity: 1;
transform: rotate(45deg) translate(2px, -2px);
}
/* Mobile English subtitle */
.l-header__mobile-nav-sub {
display: block;
font-family: var(--font-en);
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-top: 2px;
}
/* ------------------------------------------------------------------
Mobile menu CTA
------------------------------------------------------------------ */
.l-header__mobile-cta {
margin-top: var(--space-2xl);
text-align: center;
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s,
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.l-header__mobile-menu.is-open .l-header__mobile-cta {
opacity: 1;
transform: translateY(0);
}
.l-header__mobile-cta .c-btn {
width: 100%;
max-width: 300px;
}
/* ------------------------------------------------------------------
Mobile menu social / contact info
------------------------------------------------------------------ */
.l-header__mobile-info {
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border);
opacity: 0;
transition: opacity 0.4s ease 0.6s;
}
.l-header__mobile-menu.is-open .l-header__mobile-info {
opacity: 1;
}
/* ------------------------------------------------------------------
Scroll Progress Bar
------------------------------------------------------------------ */
.c-progress-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
z-index: 1;
overflow: hidden;
}
.c-progress-bar__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-light), var(--color-brand-secondary));
background-size: 200% 100%;
animation: progressGradient 3s ease infinite;
border-radius: 0 1px 1px 0;
transition: width 0.1s linear;
}
@keyframes progressGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Show progress bar only when scrolled */
.l-header:not(.is-scrolled) .c-progress-bar {
opacity: 0;
}
/* ------------------------------------------------------------------
Body lock when menu open
------------------------------------------------------------------ */
body.is-menu-open {
overflow: hidden;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.l-header {
transition: none;
}
.l-header__logo {
animation: none;
opacity: 1;
transform: none;
}
.l-header__nav-item {
animation: none;
opacity: 1;
transform: none;
}
.l-header__cta {
animation: none;
opacity: 1;
}
.l-header__nav-link::after {
transition: none;
}
.l-header__dropdown,
.l-header__dropdown-item {
transition: none;
}
.l-header__hamburger-line {
transition: none;
}
.l-header__mobile-menu {
transition: none;
}
.l-header__mobile-nav-item {
opacity: 1;
transform: none;
transition: none;
}
.l-header__mobile-cta {
opacity: 1;
transform: none;
transition: none;
}
.l-header__mobile-info {
opacity: 1;
transition: none;
}
.l-header__cta-btn::before {
display: none;
}
.l-header__mobile-nav-link::after {
transition: none;
}
}
/* ==========================================================================
Footer
========================================================================== */
.l-footer {
background-color: var(--color-bg-accent);
color: var(--color-text-secondary);
}
/* Footer main area */
.l-footer__main {
padding: var(--space-4xl) 0 var(--space-3xl);
}
.l-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
@media (min-width: 540px) {
.l-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.l-footer__grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-3xl);
}
}
/* Footer column: Brand */
.l-footer__brand {
grid-column: 1 / -1;
}
@media (min-width: 1024px) {
.l-footer__brand {
grid-column: auto;
}
}
.l-footer__logo {
display: inline-block;
margin-bottom: var(--space-lg);
}
.l-footer__logo img {
height: 36px;
width: auto;
}
.l-footer__desc {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
max-width: 300px;
}
/* Social icons */
.l-footer__social {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.l-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background-color: var(--color-bg-white);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-light);
text-decoration: none;
flex-shrink: 0;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.l-footer__social-link:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
border-color: var(--color-brand-primary);
}
.l-footer__social-link svg,
.l-footer__social-link img {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Footer column heading */
.l-footer__heading {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-bottom: var(--space-lg);
font-family: var(--font-en);
}
/* Footer navigation links (used as both nav-link and link classes) */
.l-footer__nav-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.l-footer__nav-link,
.l-footer__link {
display: inline-block;
font-size: var(--text-sm);
color: var(--color-text-muted);
padding: var(--space-xs) 0;
text-decoration: none;
transition: color var(--transition-fast);
}
.l-footer__nav-link:hover,
.l-footer__link:hover {
color: var(--color-brand-primary);
}
/* Footer contact info */
.l-footer__contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.l-footer__contact-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 3px;
opacity: 0.6;
}
/* ------------------------------------------------------------------
Footer bottom bar
------------------------------------------------------------------ */
.l-footer__bottom {
border-top: 1px solid var(--color-border-light);
padding: var(--space-lg) 0;
}
.l-footer__bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 768px) {
.l-footer__bottom-inner {
flex-direction: row;
justify-content: space-between;
}
}
.l-footer__copyright,
.l-footer__copy {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-family: var(--font-en);
letter-spacing: var(--tracking-wide);
}
.l-footer__bottom-nav {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.l-footer__bottom-link {
font-size: var(--text-xs);
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.l-footer__bottom-link:hover {
color: var(--color-text-primary);
}
/* ==========================================================================
Sidebar - Blog sidebar layout
========================================================================== */
.l-sidebar {
width: 100%;
}
@media (min-width: 1024px) {
.l-sidebar {
width: 300px;
flex-shrink: 0;
position: sticky;
top: calc(var(--header-height-scrolled) + var(--space-xl));
align-self: flex-start;
max-height: calc(100vh - var(--header-height-scrolled) - var(--space-2xl));
overflow-y: auto;
}
}
/* Widget base */
.l-sidebar__widget {
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow-sm);
}
.l-sidebar__widget:last-child {
margin-bottom: 0;
}
/* Widget heading */
.l-sidebar__widget-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--color-brand-primary);
letter-spacing: var(--tracking-wide);
}
/* Search form */
.l-sidebar__search {
display: flex;
align-items: stretch;
}
.l-sidebar__search-input {
flex: 1;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: var(--text-sm);
background-color: var(--color-bg);
transition: border-color var(--transition-fast);
}
.l-sidebar__search-input:focus {
border-color: var(--color-brand-primary);
outline: none;
}
.l-sidebar__search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
background-color: var(--color-brand-primary);
border: 1px solid var(--color-brand-primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: var(--color-text-white);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.l-sidebar__search-btn:hover {
background-color: var(--color-brand-primary-hover);
}
.l-sidebar__search-btn svg {
width: 16px;
height: 16px;
}
/* Category list */
.l-sidebar__category-list {
display: flex;
flex-direction: column;
}
.l-sidebar__category-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
font-size: var(--text-sm);
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border-light);
transition: color var(--transition-fast);
}
.l-sidebar__category-link:last-child {
border-bottom: none;
}
.l-sidebar__category-link:hover {
color: var(--color-brand-primary);
}
.l-sidebar__category-count {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-family: var(--font-en);
}
/* Recent posts */
.l-sidebar__recent-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.l-sidebar__recent-item {
display: flex;
gap: var(--space-sm);
}
.l-sidebar__recent-thumb {
width: 72px;
height: 52px;
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
}
.l-sidebar__recent-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.l-sidebar__recent-body {
flex: 1;
min-width: 0;
}
.l-sidebar__recent-title {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--transition-fast);
}
.l-sidebar__recent-title:hover {
color: var(--color-brand-primary);
}
.l-sidebar__recent-date {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-family: var(--font-en);
margin-top: var(--space-xs);
}
/* Tag cloud */
.l-sidebar__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.l-sidebar__tag {
display: inline-block;
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
color: var(--color-text-secondary);
background-color: var(--color-bg);
border-radius: var(--radius-sm);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.l-sidebar__tag:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
/* CTA banner widget */
.l-sidebar__cta {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
text-align: center;
padding: var(--space-xl) var(--space-lg);
}
.l-sidebar__cta .l-sidebar__widget-title {
color: var(--color-text-white);
border-bottom-color: rgba(255, 255, 255, 0.3);
}
.l-sidebar__cta-text {
font-size: var(--text-sm);
margin-bottom: var(--space-md);
line-height: var(--leading-relaxed);
}
/* ==========================================================================
Grid - Layout utilities
========================================================================== */
/* ------------------------------------------------------------------
CSS Grid system
------------------------------------------------------------------ */
.l-grid {
display: grid;
gap: var(--space-lg);
}
/* 2-column grid */
.l-grid--2 {
grid-template-columns: 1fr;
}
@media (min-width: 540px) {
.l-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3-column grid */
.l-grid--3 {
grid-template-columns: 1fr;
}
@media (min-width: 540px) {
.l-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.l-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* 4-column grid */
.l-grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 540px) {
.l-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.l-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Gap variants */
.l-grid--gap-sm {
gap: var(--space-sm);
}
.l-grid--gap-md {
gap: var(--space-md);
}
.l-grid--gap-lg {
gap: var(--space-lg);
}
.l-grid--gap-xl {
gap: var(--space-xl);
}
.l-grid--gap-2xl {
gap: var(--space-2xl);
}
.l-grid--gap-3xl {
gap: var(--space-3xl);
}
/* ------------------------------------------------------------------
Flexbox utilities
------------------------------------------------------------------ */
.l-flex {
display: flex;
}
.l-flex--column {
flex-direction: column;
}
.l-flex--wrap {
flex-wrap: wrap;
}
.l-flex--center {
align-items: center;
justify-content: center;
}
.l-flex--between {
align-items: center;
justify-content: space-between;
}
.l-flex--start {
align-items: flex-start;
}
.l-flex--end {
justify-content: flex-end;
}
.l-flex--gap-sm {
gap: var(--space-sm);
}
.l-flex--gap-md {
gap: var(--space-md);
}
.l-flex--gap-lg {
gap: var(--space-lg);
}
.l-flex--gap-xl {
gap: var(--space-xl);
}
/* ------------------------------------------------------------------
Section spacing
------------------------------------------------------------------ */
.l-section {
padding-top: var(--section-padding-sm);
padding-bottom: var(--section-padding-sm);
}
@media (min-width: 768px) {
.l-section {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
}
@media (min-width: 1024px) {
.l-section {
padding-top: var(--section-padding-lg);
padding-bottom: var(--section-padding-lg);
}
}
.l-section--sm {
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
.l-section--sm {
padding-top: var(--section-padding-sm);
padding-bottom: var(--section-padding-sm);
}
}
.l-section--lg {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
@media (min-width: 768px) {
.l-section--lg {
padding-top: var(--section-padding-lg);
padding-bottom: var(--section-padding-lg);
}
}
/* Section backgrounds */
.l-section--white {
background-color: var(--color-bg-white);
}
.l-section--accent {
background-color: var(--color-bg-accent);
}
.l-section--dark {
background-color: var(--color-bg-accent);
color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Content + Sidebar layout (blog)
------------------------------------------------------------------ */
.l-content-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
@media (min-width: 1024px) {
.l-content-sidebar {
flex-direction: row;
gap: var(--space-3xl);
}
}
.l-content-sidebar__main {
flex: 1 1 0%;
min-width: 0;
position: relative;
z-index: 1;
}
/* max-width removed — layout sizing handled by parent flex/grid */
.l-content-sidebar__side {
width: 100%;
position: relative;
z-index: 0;
}
@media (min-width: 1024px) {
.l-content-sidebar__side {
flex: 0 0 300px;
width: 300px;
max-width: 300px;
}
}
/* ==========================================================================
Buttons - Enhanced with advanced interactions
========================================================================== */
/* ------------------------------------------------------------------
Base button
------------------------------------------------------------------ */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 16px 40px;
font-family: var(--font-jp);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: var(--tracking-wide);
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
}
/* Allow text wrapping for large buttons with long labels */
.c-btn--lg {
white-space: normal;
text-align: center;
}
.c-btn:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
/* Hover lift effect */
.c-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.c-btn:active {
transform: translateY(0);
box-shadow: none;
}
/* ------------------------------------------------------------------
Ripple effect on click (::after)
------------------------------------------------------------------ */
.c-btn::after {
content: "";
position: absolute;
top: var(--ripple-y, 50%);
left: var(--ripple-x, 50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.c-btn.is-rippling::after {
animation: btnRipple 0.6s ease-out forwards;
}
@keyframes btnRipple {
0% {
width: 0;
height: 0;
opacity: 0.5;
transform: translate(-50%, -50%) scale(0);
}
100% {
width: 300px;
height: 300px;
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
/* ------------------------------------------------------------------
Magnetic hover (JS sets --btn-magnetic-x, --btn-magnetic-y)
------------------------------------------------------------------ */
.c-btn--magnetic {
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease;
}
.c-btn--magnetic:hover {
transform:
translate(
var(--btn-magnetic-x, 0),
var(--btn-magnetic-y, 0)
);
}
/* ------------------------------------------------------------------
Shine sweep on hover (::before)
------------------------------------------------------------------ */
.c-btn--shine::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.25) 50%,
transparent 100%
);
transform: skewX(-25deg);
z-index: 1;
pointer-events: none;
}
.c-btn--shine:hover::before {
animation: btnShine 0.6s ease forwards;
}
@keyframes btnShine {
from {
left: -100%;
}
to {
left: 150%;
}
}
/* ------------------------------------------------------------------
Gradient border animation
------------------------------------------------------------------ */
.c-btn--gradient-border {
background: var(--color-bg-white);
border: none;
position: relative;
z-index: 0;
padding: 18px 42px; /* slightly larger to compensate for border trick */
}
.c-btn--gradient-border::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius-full);
padding: 2px;
background: linear-gradient(135deg, #1a1a1a, #333333, #333333);
background-size: 200% 200%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
transition: background-position 0.5s ease;
}
.c-btn--gradient-border:hover::before {
background-position: 100% 100%;
}
.c-btn--gradient-border:hover {
color: #1a1a1a;
}
/* ------------------------------------------------------------------
Arrow slide on hover
------------------------------------------------------------------ */
.c-btn--arrow::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg) translateX(0);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
margin-left: var(--space-xs);
}
.c-btn--arrow:hover::after {
animation: btnArrowSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes btnArrowSlide {
0% {
transform: rotate(45deg) translateX(0);
opacity: 1;
}
40% {
transform: rotate(45deg) translateX(8px);
opacity: 0;
}
41% {
transform: rotate(45deg) translateX(-8px);
opacity: 0;
}
100% {
transform: rotate(45deg) translateX(0);
opacity: 1;
}
}
/* ------------------------------------------------------------------
Underline draw (text-only buttons)
------------------------------------------------------------------ */
.c-btn--text {
background: none;
border: none;
padding: 8px 0;
border-radius: 0;
position: relative;
overflow: visible;
}
.c-btn--text::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-btn--text:hover {
transform: none;
box-shadow: none;
}
.c-btn--text:hover::after {
width: 100%;
}
/* ------------------------------------------------------------------
Variants
------------------------------------------------------------------ */
/* Primary */
.c-btn--primary {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
border-color: var(--color-brand-primary);
}
.c-btn--primary:hover {
background-color: var(--color-brand-primary-hover);
border-color: var(--color-brand-primary-hover);
color: var(--color-text-white);
}
.c-btn--primary:active {
background-color: var(--color-brand-primary-active);
border-color: var(--color-brand-primary-active);
}
/* Secondary / Outline */
.c-btn--secondary,
.c-btn--outline {
background-color: transparent;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
.c-btn--secondary:hover,
.c-btn--outline:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.c-btn--secondary:active,
.c-btn--outline:active {
background-color: var(--color-brand-primary-hover);
border-color: var(--color-brand-primary-hover);
color: var(--color-text-white);
}
/* White */
.c-btn--white {
background-color: var(--color-bg-white);
color: var(--color-text-primary);
border-color: var(--color-bg-white);
}
.c-btn--white:hover {
background-color: var(--color-bg);
border-color: var(--color-bg);
color: var(--color-text-primary);
}
/* Dark */
.c-btn--dark {
background-color: var(--color-bg-dark);
color: var(--color-text-white);
border-color: var(--color-bg-dark);
}
.c-btn--dark:hover {
background-color: #3d3d3d;
border-color: #3d3d3d;
color: var(--color-text-white);
}
/* Ghost (transparent with white border, for dark backgrounds) */
.c-btn--ghost {
background-color: transparent;
color: var(--color-text-white);
border-color: rgba(255, 255, 255, 0.6);
}
.c-btn--ghost:hover {
background-color: var(--color-text-white);
color: var(--color-text-primary);
border-color: var(--color-text-white);
}
/* ------------------------------------------------------------------
Sizes
------------------------------------------------------------------ */
/* Small */
.c-btn--sm {
padding: 10px 24px;
font-size: var(--text-xs);
}
/* Large */
.c-btn--lg {
padding: 20px 56px;
font-size: var(--text-base);
}
/* Full width */
.c-btn--full {
width: 100%;
}
/* ------------------------------------------------------------------
Icon button
------------------------------------------------------------------ */
.c-btn--icon {
width: 48px;
height: 48px;
padding: 0;
border-radius: var(--radius-full);
}
.c-btn--icon svg {
width: 20px;
height: 20px;
}
/* ------------------------------------------------------------------
Disabled state
------------------------------------------------------------------ */
.c-btn:disabled,
.c-btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* ------------------------------------------------------------------
Loading state
------------------------------------------------------------------ */
.c-btn.is-loading,
.c-btn--loading {
pointer-events: none;
position: relative;
color: transparent !important;
}
.c-btn.is-loading::before,
.c-btn--loading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--color-text-white);
border-radius: 50%;
animation: btnSpin 0.6s linear infinite;
}
/* Loading for outline/light buttons */
.c-btn--secondary.is-loading::before,
.c-btn--secondary.c-btn--loading::before {
border-color: rgba(0, 0, 0, 0.08);
border-top-color: var(--color-brand-primary);
}
@keyframes btnSpin {
to {
transform: rotate(360deg);
}
}
/* ------------------------------------------------------------------
Success state
------------------------------------------------------------------ */
.c-btn--success {
background-color: #4caf50;
border-color: #4caf50;
color: #fff;
pointer-events: none;
}
.c-btn--success::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 16px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: translate(-50%, -60%) rotate(45deg);
animation: btnCheckmark 0.3s ease forwards;
}
@keyframes btnCheckmark {
0% {
opacity: 0;
transform: translate(-50%, -60%) rotate(45deg) scale(0);
}
50% {
transform: translate(-50%, -60%) rotate(45deg) scale(1.2);
}
100% {
opacity: 1;
transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
}
.c-btn--success > span,
.c-btn--success > .c-btn__text {
opacity: 0;
}
/* ------------------------------------------------------------------
Button group
------------------------------------------------------------------ */
.c-btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.c-btn-group--center {
justify-content: center;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-btn {
transition: none;
}
.c-btn.is-rippling::after {
animation: none;
}
.c-btn--shine:hover::before {
animation: none;
}
.c-btn--arrow:hover::after {
animation: none;
transform: rotate(45deg) translateX(3px);
}
.c-btn--gradient-border::before {
transition: none;
}
.c-btn--text::after {
transition: none;
}
.c-btn.is-loading::before,
.c-btn--loading::before {
animation: none;
border-color: var(--color-text-white);
}
.c-btn--success::before {
animation: none;
opacity: 1;
transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
.c-btn--magnetic:hover {
transform: none;
}
}
/* ==========================================================================
Cards - Enhanced with advanced interactions
========================================================================== */
/* ------------------------------------------------------------------
Base card
------------------------------------------------------------------ */
.c-card {
display: flex;
flex-direction: column;
background-color: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.c-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border);
}
/* Card link wrapper */
a.c-card {
text-decoration: none;
color: inherit;
}
/* ------------------------------------------------------------------
Card image
------------------------------------------------------------------ */
.c-card__image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.c-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card:hover .c-card__image img {
transform: scale(1.05);
}
/* Image reveal on scroll (clip-path transition) */
.c-card__image[data-reveal] {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card__image[data-reveal].is-visible {
clip-path: inset(0 0 0 0);
}
/* ------------------------------------------------------------------
Card body
------------------------------------------------------------------ */
.c-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-xl) var(--space-lg);
}
/* Category label */
.c-card__category {
display: inline-block;
align-self: flex-start;
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
background-color: var(--color-bg-accent);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-sm);
}
/* Category on image overlay */
.c-card__image .c-card__category {
position: absolute;
top: var(--space-md);
left: var(--space-md);
background-color: var(--color-bg-white);
z-index: var(--z-base);
}
/* Card title */
.c-card__title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
line-height: var(--leading-snug);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Card text */
.c-card__text {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: var(--space-md);
}
/* Card meta (date, author) */
.c-card__meta {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: auto;
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
.c-card__date {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-family: var(--font-en);
letter-spacing: var(--tracking-wide);
}
.c-card__author {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.c-card__author-avatar {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
overflow: hidden;
}
.c-card__author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------------------------------------------------------------
Card link / more
------------------------------------------------------------------ */
.c-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-brand-primary);
margin-top: auto;
transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card__link::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card:hover .c-card__link {
gap: var(--space-sm);
}
.c-card:hover .c-card__link::after {
transform: rotate(45deg) translate(2px, -2px);
}
/* ------------------------------------------------------------------
3D Tilt on hover (JS sets --tilt-x, --tilt-y via mousemove)
------------------------------------------------------------------ */
.c-card--3d {
perspective: 1000px;
transform-style: preserve-3d;
}
.c-card--3d:hover {
transform: none; /* override base hover transform */
box-shadow: var(--shadow-card);
}
.c-card--3d .c-card__inner {
transition: transform 0.15s ease-out;
transform:
rotateX(var(--tilt-x, 0deg))
rotateY(var(--tilt-y, 0deg))
translateZ(0);
will-change: transform;
}
.c-card--3d:hover .c-card__inner {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
/* Reset on mouse leave (JS removes custom props) */
.c-card--3d .c-card__inner {
transform-style: preserve-3d;
}
/* Shine overlay for 3D card */
.c-card--3d .c-card__shine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.1) 0%,
transparent 60%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.c-card--3d:hover .c-card__shine {
opacity: 1;
}
/* ------------------------------------------------------------------
Glass morphism variant
------------------------------------------------------------------ */
.c-card--glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.c-card--glass:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Glass on dark bg */
.c-card--glass-dark {
background: rgba(44, 44, 44, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--color-text-white);
}
.c-card--glass-dark .c-card__title {
color: var(--color-text-white);
}
.c-card--glass-dark .c-card__text {
color: rgba(255, 255, 255, 0.7);
}
/* ------------------------------------------------------------------
Gradient border on hover (::before trick)
------------------------------------------------------------------ */
.c-card--gradient-border {
position: relative;
background: var(--color-bg-white);
z-index: 0;
}
.c-card--gradient-border::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #1a1a1a, #333333, #333333, #e0e0e0);
border-radius: calc(var(--radius-lg) + 2px);
z-index: -1;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card--gradient-border:hover::before {
opacity: 1;
}
/* Inner container to maintain white bg */
.c-card--gradient-border .c-card__body {
background: var(--color-bg-white);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------------
Skeleton loading state
------------------------------------------------------------------ */
.c-card--skeleton {
pointer-events: none;
}
.c-card--skeleton .c-card__image {
background: var(--color-border-light);
}
.c-card--skeleton .c-card__title,
.c-card--skeleton .c-card__text,
.c-card--skeleton .c-card__date,
.c-card--skeleton .c-card__category {
background: linear-gradient(
90deg,
var(--color-bg-accent) 25%,
var(--color-border-light) 50%,
var(--color-bg-accent) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
color: transparent;
border-radius: 4px;
}
.c-card--skeleton .c-card__title {
width: 80%;
height: 20px;
}
.c-card--skeleton .c-card__text {
width: 100%;
height: 48px;
-webkit-line-clamp: unset;
}
.c-card--skeleton .c-card__date {
width: 60px;
height: 14px;
}
.c-card--skeleton .c-card__image img {
visibility: hidden;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* ------------------------------------------------------------------
Magnetic hover (JS sets --magnetic-x, --magnetic-y)
------------------------------------------------------------------ */
.c-card--magnetic {
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-card--magnetic:hover {
transform:
translate(
var(--magnetic-x, 0),
var(--magnetic-y, 0)
);
}
/* ------------------------------------------------------------------
Stacking cards effect (mobile)
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-cards--stacking {
position: relative;
}
.c-cards--stacking .c-card {
position: sticky;
top: calc(var(--header-height, 80px) + var(--card-index, 0) * 8px);
}
.c-cards--stacking .c-card:nth-child(1) { --card-index: 0; }
.c-cards--stacking .c-card:nth-child(2) { --card-index: 1; }
.c-cards--stacking .c-card:nth-child(3) { --card-index: 2; }
.c-cards--stacking .c-card:nth-child(4) { --card-index: 3; }
.c-cards--stacking .c-card:nth-child(5) { --card-index: 4; }
}
/* ------------------------------------------------------------------
Horizontal variant
------------------------------------------------------------------ */
.c-card--horizontal {
flex-direction: row;
}
.c-card--horizontal .c-card__image {
width: 200px;
flex-shrink: 0;
aspect-ratio: auto;
}
.c-card--horizontal .c-card__body {
justify-content: center;
}
@media (max-width: 539px) {
.c-card--horizontal {
flex-direction: column;
}
.c-card--horizontal .c-card__image {
width: 100%;
aspect-ratio: 16 / 10;
}
}
/* ------------------------------------------------------------------
Card sizes
------------------------------------------------------------------ */
.c-card--sm .c-card__body {
padding: var(--space-md);
}
.c-card--sm .c-card__title {
font-size: var(--text-sm);
}
.c-card--lg .c-card__body {
padding: var(--space-2xl) var(--space-xl);
}
.c-card--lg .c-card__title {
font-size: var(--text-xl);
}
/* ------------------------------------------------------------------
Flat (no shadow) variant
------------------------------------------------------------------ */
.c-card--flat {
box-shadow: none;
border: 1px solid var(--color-border);
}
.c-card--flat:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border-dark);
}
/* ------------------------------------------------------------------
Featured card (hero-level emphasis)
------------------------------------------------------------------ */
.c-card--featured {
background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-bg-accent) 100%);
border: 1px solid var(--color-border-light);
}
.c-card--featured .c-card__body {
padding: var(--space-xl) var(--space-xl) var(--space-2xl);
}
.c-card--featured::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary), var(--color-brand-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-out-expo);
}
.c-card--featured:hover::after {
transform: scaleX(1);
}
/* ------------------------------------------------------------------
Icon badge on card
------------------------------------------------------------------ */
.c-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
color: var(--color-text-white);
margin-bottom: var(--space-lg);
position: relative;
transition: transform 0.4s var(--ease-out-expo);
}
.c-card__icon svg {
width: 24px;
height: 24px;
}
.c-card:hover .c-card__icon {
transform: scale(1.08) rotate(3deg);
}
/* Inner glow on card hover */
.c-card__icon::after {
content: "";
position: absolute;
inset: -6px;
border-radius: calc(var(--radius-lg) + 6px);
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
opacity: 0;
z-index: -1;
filter: blur(12px);
transition: opacity 0.4s var(--ease-out-expo);
}
.c-card:hover .c-card__icon::after {
opacity: 0.3;
}
/* ------------------------------------------------------------------
Diagonal reveal overlay on image
------------------------------------------------------------------ */
.c-card--diagonal .c-card__image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
transparent 40%,
rgba(0, 0, 0, 0.035) 60%,
rgba(0, 0, 0, 0.06) 100%
);
z-index: 1;
opacity: 0;
transition: opacity 0.5s var(--ease-out-expo);
}
.c-card--diagonal:hover .c-card__image::before {
opacity: 1;
}
/* ------------------------------------------------------------------
Number label on card (e.g., "01", "02")
------------------------------------------------------------------ */
.c-card__number {
position: absolute;
top: var(--space-md);
right: var(--space-md);
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: 0.1em;
opacity: 0.5;
z-index: 2;
}
/* ------------------------------------------------------------------
Card top accent bar
------------------------------------------------------------------ */
.c-card--accent-top {
border-top: 3px solid var(--color-brand-primary);
}
.c-card--accent-top:hover {
border-top-color: var(--color-brand-secondary);
}
/* ------------------------------------------------------------------
Card hover content slide-up
------------------------------------------------------------------ */
.c-card__hover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-lg);
background: linear-gradient(to top, rgba(26, 26, 46, 0.9) 0%, transparent 100%);
color: var(--color-text-white);
transform: translateY(100%);
transition: transform 0.5s var(--ease-out-expo);
z-index: 3;
}
.c-card:hover .c-card__hover-content {
transform: translateY(0);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-card {
transition: none;
}
.c-card__image img {
transition: none;
}
.c-card__image[data-reveal] {
clip-path: none;
transition: none;
}
.c-card--3d .c-card__inner {
transition: none;
transform: none !important;
}
.c-card--3d .c-card__shine {
display: none;
}
.c-card--gradient-border::before {
transition: none;
}
.c-card--skeleton .c-card__title,
.c-card--skeleton .c-card__text,
.c-card--skeleton .c-card__date,
.c-card--skeleton .c-card__category {
animation: none;
}
.c-card--magnetic:hover {
transform: none;
}
.c-card__link::after {
transition: none;
}
}
/* ==========================================================================
Forms
========================================================================== */
/* Form group */
.c-form-group {
margin-bottom: var(--space-lg);
}
.c-form-group:last-child {
margin-bottom: 0;
}
/* Label */
.c-form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
letter-spacing: var(--tracking-wide);
}
.c-form-label--required::after {
content: "必須";
display: inline-block;
margin-left: var(--space-sm);
padding: 2px 8px;
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-text-white);
background-color: var(--color-error);
border-radius: var(--radius-sm);
vertical-align: middle;
}
/* Input & Textarea base */
.c-form-input,
.c-form-textarea,
.c-form-select {
display: block;
width: 100%;
padding: 14px var(--space-md);
font-family: var(--font-jp);
font-size: var(--text-base);
color: var(--color-text-primary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
appearance: none;
}
.c-form-input::placeholder,
.c-form-textarea::placeholder {
color: var(--color-text-muted);
}
/* Focus state */
.c-form-input:focus,
.c-form-textarea:focus,
.c-form-select:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.035);
}
/* Textarea */
.c-form-textarea {
min-height: 160px;
resize: vertical;
line-height: var(--leading-relaxed);
}
/* Select */
.c-form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
cursor: pointer;
}
/* Checkbox & Radio */
.c-form-check {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
cursor: pointer;
}
.c-form-check + .c-form-check {
margin-top: var(--space-sm);
}
.c-form-check input[type="checkbox"],
.c-form-check input[type="radio"] {
width: 20px;
height: 20px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--color-brand-primary);
cursor: pointer;
}
.c-form-check__label {
font-size: var(--text-sm);
color: var(--color-text-primary);
line-height: var(--leading-normal);
cursor: pointer;
}
/* Help text */
.c-form-help {
display: block;
margin-top: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-normal);
}
/* ------------------------------------------------------------------
Validation states
------------------------------------------------------------------ */
/* Error */
.c-form-group.is-error .c-form-input,
.c-form-group.is-error .c-form-textarea,
.c-form-group.is-error .c-form-select {
border-color: var(--color-error);
}
.c-form-group.is-error .c-form-input:focus,
.c-form-group.is-error .c-form-textarea:focus,
.c-form-group.is-error .c-form-select:focus {
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
}
.c-form-error {
display: block;
margin-top: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-error);
font-weight: var(--fw-medium);
}
/* Success */
.c-form-group.is-success .c-form-input,
.c-form-group.is-success .c-form-textarea,
.c-form-group.is-success .c-form-select {
border-color: var(--color-success);
}
/* ------------------------------------------------------------------
Two-column form row
------------------------------------------------------------------ */
.c-form-row {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.c-form-row {
flex-direction: row;
}
.c-form-row > .c-form-group {
flex: 1;
margin-bottom: 0;
}
}
/* ------------------------------------------------------------------
CF7 (Contact Form 7) overrides
------------------------------------------------------------------ */
.wpcf7-form {
max-width: 100%;
}
.wpcf7-form p {
margin-bottom: var(--space-lg);
}
.wpcf7-form label {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
display: block;
width: 100%;
padding: 14px var(--space-md);
font-family: var(--font-jp);
font-size: var(--text-base);
color: var(--color-text-primary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.035);
}
.wpcf7-form textarea {
min-height: 160px;
resize: vertical;
}
.wpcf7-form select {
display: block;
width: 100%;
padding: 14px var(--space-md);
font-family: var(--font-jp);
font-size: var(--text-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
.wpcf7-form input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 56px;
font-family: var(--font-jp);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-white);
background-color: var(--color-brand-primary);
border: 2px solid var(--color-brand-primary);
border-radius: var(--radius-full);
cursor: pointer;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.wpcf7-form input[type="submit"]:hover {
background-color: var(--color-brand-primary-hover);
border-color: var(--color-brand-primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* CF7 validation messages */
.wpcf7-not-valid-tip {
display: block;
margin-top: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-error);
font-weight: var(--fw-medium);
}
.wpcf7-response-output {
margin-top: var(--space-lg);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border: none !important;
}
.wpcf7-mail-sent-ok {
background-color: rgba(76, 175, 80, 0.1);
color: var(--color-success);
}
.wpcf7-validation-errors,
.wpcf7-spam-blocked {
background-color: rgba(229, 57, 53, 0.1);
color: var(--color-error);
}
/* CF7 spinner */
.wpcf7-spinner {
display: none;
}
/* ==========================================================================
Tables
========================================================================== */
/* Table wrapper for responsiveness */
.c-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: var(--space-lg);
}
/* Base table */
.c-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.c-table th,
.c-table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border);
}
.c-table th {
font-weight: var(--fw-bold);
color: var(--color-text-primary);
background-color: var(--color-bg-accent);
white-space: nowrap;
}
.c-table td {
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Striped rows */
.c-table--striped tbody tr:nth-child(even) {
background-color: var(--color-bg);
}
/* Hover rows */
.c-table--hover tbody tr {
transition: background-color var(--transition-fast);
}
.c-table--hover tbody tr:hover {
background-color: var(--color-bg-accent);
}
/* Bordered variant */
.c-table--bordered {
border: 1px solid var(--color-border);
}
.c-table--bordered th,
.c-table--bordered td {
border: 1px solid var(--color-border);
}
/* ------------------------------------------------------------------
Company info table (definition list style)
------------------------------------------------------------------ */
.c-table--company {
border-top: 1px solid var(--color-border);
}
.c-table--company th {
width: 160px;
background-color: transparent;
font-weight: var(--fw-bold);
color: var(--color-text-primary);
vertical-align: middle;
}
@media (min-width: 768px) {
.c-table--company th {
width: 200px;
}
}
.c-table--company td {
color: var(--color-text-primary);
}
/* Responsive: stack on mobile */
@media (max-width: 539px) {
.c-table--company th,
.c-table--company td {
display: block;
width: 100%;
padding: var(--space-sm) 0;
}
.c-table--company th {
padding-top: var(--space-md);
border-bottom: none;
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
}
.c-table--company td {
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
}
/* ------------------------------------------------------------------
Price table
------------------------------------------------------------------ */
.c-table--price th:last-child,
.c-table--price td:last-child {
text-align: right;
}
.c-table--price .c-table__price {
font-family: var(--font-en);
font-weight: var(--fw-bold);
font-size: var(--text-lg);
color: var(--color-brand-primary);
}
.c-table--price .c-table__price-unit {
font-size: var(--text-sm);
font-weight: var(--fw-regular);
color: var(--color-text-secondary);
font-family: var(--font-jp);
}
/* ==========================================================================
Breadcrumbs
========================================================================== */
.c-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.c-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
/* Separator */
.c-breadcrumb__item + .c-breadcrumb__item::before {
content: "/";
display: inline-block;
margin-right: var(--space-xs);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
/* Link */
.c-breadcrumb__link {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.c-breadcrumb__link:hover {
color: var(--color-brand-primary);
}
/* Home icon */
.c-breadcrumb__home svg {
width: 14px;
height: 14px;
}
/* Current page (not linked) */
.c-breadcrumb__current {
color: var(--color-text-muted);
pointer-events: none;
}
/* ------------------------------------------------------------------
Breadcrumb on hero (white text variant)
------------------------------------------------------------------ */
.c-breadcrumb--white {
color: rgba(255, 255, 255, 0.6);
}
.c-breadcrumb--white .c-breadcrumb__item + .c-breadcrumb__item::before {
color: rgba(255, 255, 255, 0.4);
}
.c-breadcrumb--white .c-breadcrumb__link {
color: rgba(255, 255, 255, 0.8);
}
.c-breadcrumb--white .c-breadcrumb__link:hover {
color: var(--color-text-white);
}
.c-breadcrumb--white .c-breadcrumb__current {
color: rgba(255, 255, 255, 0.6);
}
/* ------------------------------------------------------------------
Yoast SEO breadcrumb override
------------------------------------------------------------------ */
.yoast-breadcrumb {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.yoast-breadcrumb a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.yoast-breadcrumb a:hover {
color: var(--color-brand-primary);
}
.yoast-breadcrumb .breadcrumb_last {
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-breadcrumb {
font-size: 11px;
gap: 4px;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
font-size: 11px;
margin-right: 4px;
}
.c-breadcrumb__home svg {
width: 12px;
height: 12px;
}
.yoast-breadcrumb {
font-size: 11px;
}
}
/* ==========================================================================
Pagination
========================================================================== */
.c-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
margin-top: var(--space-3xl);
}
/* Base page item */
.c-pagination__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--space-sm);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.c-pagination__item:hover {
background-color: var(--color-bg-accent);
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
/* Current page */
.c-pagination__item.is-current,
.c-pagination__item--current {
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: var(--color-text-white);
pointer-events: none;
}
/* Disabled */
.c-pagination__item.is-disabled,
.c-pagination__item--disabled {
opacity: 0.4;
pointer-events: none;
}
/* Dots / ellipsis */
.c-pagination__dots {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: 2px;
}
/* Previous / Next arrows */
.c-pagination__prev,
.c-pagination__next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--space-sm);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.c-pagination__prev:hover,
.c-pagination__next:hover {
background-color: var(--color-bg-accent);
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
.c-pagination__prev svg,
.c-pagination__next svg {
width: 16px;
height: 16px;
}
/* Arrow characters */
.c-pagination__prev::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.c-pagination__next::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
}
/* ------------------------------------------------------------------
WordPress default pagination override
------------------------------------------------------------------ */
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
margin-top: var(--space-3xl);
}
.nav-links .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--space-sm);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.nav-links .page-numbers:hover {
background-color: var(--color-bg-accent);
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
.nav-links .page-numbers.current {
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: var(--color-text-white);
pointer-events: none;
}
.nav-links .page-numbers.dots {
border: none;
background: none;
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-pagination {
gap: 4px;
margin-top: var(--space-2xl);
}
.c-pagination__item {
min-width: 36px;
height: 36px;
font-size: var(--text-xs);
padding: 0 var(--space-xs);
}
.c-pagination__prev,
.c-pagination__next {
min-width: 36px;
height: 36px;
}
.c-pagination__dots {
min-width: 28px;
height: 36px;
}
.nav-links {
gap: 4px;
margin-top: var(--space-2xl);
}
.nav-links .page-numbers {
min-width: 36px;
height: 36px;
font-size: var(--text-xs);
padding: 0 var(--space-xs);
}
}
/* ==========================================================================
Accordion - FAQ style
========================================================================== */
.c-accordion {
border-top: 1px solid var(--color-border);
}
/* Accordion item */
.c-accordion__item {
border-bottom: 1px solid var(--color-border);
}
/* Trigger button */
.c-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-lg) 0;
font-family: var(--font-jp);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
background: none;
border: none;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wide);
transition: color var(--transition-fast);
gap: var(--space-md);
}
.c-accordion__trigger:hover {
color: var(--color-brand-primary);
}
/* Q label */
.c-accordion__label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
font-family: var(--font-en);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
margin-right: var(--space-sm);
}
.c-accordion__trigger-text {
flex: 1;
}
/* Plus/minus icon */
.c-accordion__icon {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.c-accordion__icon::before,
.c-accordion__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--color-text-primary);
transition: transform var(--transition-base);
}
.c-accordion__icon::before {
width: 14px;
height: 2px;
margin-left: -7px;
margin-top: -1px;
}
.c-accordion__icon::after {
width: 2px;
height: 14px;
margin-left: -1px;
margin-top: -7px;
}
/* Open state - rotate minus */
.c-accordion__item.is-open .c-accordion__icon::after {
transform: rotate(90deg);
opacity: 0;
}
.c-accordion__item.is-open .c-accordion__trigger {
color: var(--color-brand-primary);
}
/* Content area */
.c-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow);
}
.c-accordion__content-inner {
padding: 0 0 var(--space-lg) 0;
color: var(--color-text-secondary);
font-size: var(--text-sm);
line-height: var(--leading-loose);
}
/* Content with A label */
.c-accordion__answer {
display: flex;
gap: var(--space-sm);
}
.c-accordion__answer-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
font-family: var(--font-en);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-white);
background-color: var(--color-brand-primary);
border-radius: var(--radius-full);
}
.c-accordion__answer-text {
flex: 1;
padding-top: var(--space-xs);
}
/* Open state content visible */
.c-accordion__item.is-open .c-accordion__content {
max-height: 1000px;
}
/* ------------------------------------------------------------------
Variant: Card style
------------------------------------------------------------------ */
.c-accordion--card {
border-top: none;
}
.c-accordion--card .c-accordion__item {
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
overflow: hidden;
}
.c-accordion--card .c-accordion__item:last-child {
margin-bottom: 0;
}
.c-accordion--card .c-accordion__trigger {
padding: var(--space-lg);
}
.c-accordion--card .c-accordion__content-inner {
padding: 0 var(--space-lg) var(--space-lg);
}
.c-accordion--card .c-accordion__item.is-open {
border-color: var(--color-brand-light);
box-shadow: var(--shadow-sm);
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-accordion__trigger {
padding: var(--space-md) 0;
font-size: var(--text-sm);
gap: var(--space-sm);
}
.c-accordion__label {
width: 28px;
height: 28px;
font-size: var(--text-sm);
}
.c-accordion__icon {
width: 20px;
height: 20px;
}
.c-accordion__content-inner {
font-size: var(--text-xs);
padding-bottom: var(--space-md);
}
.c-accordion__answer-label {
width: 28px;
height: 28px;
font-size: var(--text-sm);
}
.c-accordion__answer-text {
font-size: var(--text-xs);
}
/* Card variant */
.c-accordion--card .c-accordion__trigger {
padding: var(--space-md);
}
.c-accordion--card .c-accordion__content-inner {
padding: 0 var(--space-md) var(--space-md);
}
}
/* ==========================================================================
Loading / Splash Screen
========================================================================== */
/* Body lock during loading */
body.is-loading {
overflow: hidden;
}
/* ------------------------------------------------------------------
Fullscreen overlay
------------------------------------------------------------------ */
.c-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
z-index: 9999;
background-color: #1c1c1c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition:
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-loading.is-loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(1.02);
}
/* ------------------------------------------------------------------
Logo SVG draw-on animation
------------------------------------------------------------------ */
.c-loading__logo {
width: 120px;
height: 120px;
margin-bottom: 40px;
}
.c-loading__logo svg {
width: 100%;
height: 100%;
}
/* SVG path draw-on via stroke-dashoffset */
.c-loading__logo svg path,
.c-loading__logo svg line,
.c-loading__logo svg polyline,
.c-loading__logo svg polygon,
.c-loading__logo svg circle,
.c-loading__logo svg rect {
fill: none;
stroke: #ffffff;
stroke-width: 2;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: loadingDrawOn 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes loadingDrawOn {
0% {
stroke-dashoffset: 300;
fill-opacity: 0;
}
70% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
fill: #ffffff;
}
}
/* Stagger individual paths */
.c-loading__logo svg *:nth-child(2) {
animation-delay: 0.15s;
}
.c-loading__logo svg *:nth-child(3) {
animation-delay: 0.3s;
}
.c-loading__logo svg *:nth-child(4) {
animation-delay: 0.45s;
}
.c-loading__logo svg *:nth-child(5) {
animation-delay: 0.6s;
}
/* ------------------------------------------------------------------
Brand text staggered reveal: "S.Line"
------------------------------------------------------------------ */
.c-loading__text {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
font-family: var(--font-en, "Outfit", sans-serif);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.18em;
color: #ffffff;
margin-bottom: 48px;
overflow: hidden;
}
.c-loading__char,
.c-loading__letter {
display: inline-block;
opacity: 0;
transform: translateY(100%);
animation: loadingCharReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.c-loading__char:nth-child(1),
.c-loading__letter:nth-child(1) { animation-delay: 0.8s; }
.c-loading__char:nth-child(2),
.c-loading__letter:nth-child(2) { animation-delay: 0.88s; }
.c-loading__char:nth-child(3),
.c-loading__letter:nth-child(3) { animation-delay: 0.96s; }
.c-loading__char:nth-child(4),
.c-loading__letter:nth-child(4) { animation-delay: 1.04s; }
.c-loading__char:nth-child(5),
.c-loading__letter:nth-child(5) { animation-delay: 1.12s; }
.c-loading__char:nth-child(6),
.c-loading__letter:nth-child(6) { animation-delay: 1.20s; }
@keyframes loadingCharReveal {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ------------------------------------------------------------------
Progress bar
------------------------------------------------------------------ */
.c-loading__bar,
.c-loading__progress {
position: relative;
width: 240px;
height: 1px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 1px;
overflow: hidden;
}
.c-loading__bar-fill,
.c-loading__progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: #ffffff;
border-radius: 1px;
animation: loadingBarFill 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes loadingBarFill {
0% {
width: 0%;
}
30% {
width: 40%;
}
60% {
width: 70%;
}
80% {
width: 90%;
}
100% {
width: 100%;
}
}
/* ------------------------------------------------------------------
Percentage text (optional)
------------------------------------------------------------------ */
.c-loading__percent {
margin-top: 16px;
font-family: var(--font-en, "Outfit", sans-serif);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.35);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-loading {
transition: none;
}
.c-loading__logo svg path,
.c-loading__logo svg line,
.c-loading__logo svg polyline,
.c-loading__logo svg polygon,
.c-loading__logo svg circle,
.c-loading__logo svg rect {
animation: none;
stroke-dashoffset: 0;
fill: #ffffff;
fill-opacity: 1;
}
.c-loading__char,
.c-loading__letter {
animation: none;
opacity: 1;
transform: none;
}
.c-loading__bar-fill,
.c-loading__progress-bar {
animation: none;
width: 100%;
}
}
/* ==========================================================================
Custom Cursor (desktop only)
========================================================================== */
/* Only show custom cursor on devices with fine pointer (hover) */
@media (hover: hover) and (pointer: fine) {
/* Hide default cursor on supported devices */
body.has-custom-cursor,
body.has-custom-cursor * {
cursor: none !important;
}
/* ------------------------------------------------------------------
Outer ring
------------------------------------------------------------------ */
.c-cursor {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 1px solid #1a1a1a;
border-radius: 50%;
pointer-events: none;
z-index: 10000;
transform: translate(-50%, -50%);
transition:
width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease,
background-color 0.3s ease,
border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s ease;
mix-blend-mode: difference;
will-change: transform;
}
/* ------------------------------------------------------------------
Inner dot
------------------------------------------------------------------ */
.c-cursor__dot {
position: fixed;
top: 0;
left: 0;
width: 8px;
height: 8px;
background-color: #1a1a1a;
border-radius: 50%;
pointer-events: none;
z-index: 10001;
transform: translate(-50%, -50%);
transition:
width 0.15s cubic-bezier(0.16, 1, 0.3, 1),
height 0.15s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.3s ease,
opacity 0.2s ease;
will-change: transform;
}
/* ------------------------------------------------------------------
State: Hovering interactive elements
------------------------------------------------------------------ */
.c-cursor.is-hover {
width: 60px;
height: 60px;
border-color: #333333;
}
.c-cursor.is-hover .c-cursor__dot,
.c-cursor__dot.is-hover {
width: 4px;
height: 4px;
opacity: 0.5;
}
/* ------------------------------------------------------------------
State: Active (mousedown)
------------------------------------------------------------------ */
.c-cursor.is-active {
width: 32px;
height: 32px;
border-color: #e0e0e0;
}
.c-cursor__dot.is-active {
width: 6px;
height: 6px;
}
/* ------------------------------------------------------------------
State: Text selection bar
------------------------------------------------------------------ */
.c-cursor.is-text {
width: 4px;
height: 32px;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.12);
border-color: transparent;
}
.c-cursor__dot.is-text {
opacity: 0;
}
/* ------------------------------------------------------------------
State: Link hover (larger with label)
------------------------------------------------------------------ */
.c-cursor.is-link {
width: 80px;
height: 80px;
border-color: rgba(0, 0, 0, 0.04);
background-color: rgba(0, 0, 0, 0.02);
display: flex;
align-items: center;
justify-content: center;
}
.c-cursor.is-link::after {
content: "View";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-en, "Cormorant Garamond", serif);
font-size: 11px;
letter-spacing: 0.08em;
color: #1a1a1a;
white-space: nowrap;
opacity: 1;
transition: opacity 0.2s ease;
}
.c-cursor__dot.is-link {
opacity: 0;
}
/* ------------------------------------------------------------------
State: Hidden (when cursor leaves window)
------------------------------------------------------------------ */
.c-cursor.is-hidden {
opacity: 0;
}
.c-cursor__dot.is-hidden {
opacity: 0;
}
/* ------------------------------------------------------------------
State: Drag
------------------------------------------------------------------ */
.c-cursor.is-drag {
width: 64px;
height: 64px;
border-style: dashed;
}
.c-cursor.is-drag::after {
content: "Drag";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-en, "Cormorant Garamond", serif);
font-size: 11px;
letter-spacing: 0.08em;
color: #1a1a1a;
}
} /* end @media (hover: hover) and (pointer: fine) */
/* Ensure no custom cursor on touch devices */
@media (hover: none) {
.c-cursor,
.c-cursor__dot {
display: none !important;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-cursor,
.c-cursor__dot {
transition: none;
}
}
/* ==========================================================================
Image Lightbox / Modal
========================================================================== */
/* ------------------------------------------------------------------
Overlay backdrop
------------------------------------------------------------------ */
.c-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
z-index: 9998;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-lightbox.is-open {
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.92);
}
/* ------------------------------------------------------------------
Image container
------------------------------------------------------------------ */
.c-lightbox__image-wrap {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.85);
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-lightbox.is-open .c-lightbox__image-wrap {
transform: scale(1);
opacity: 1;
transition-delay: 0.1s;
}
.c-lightbox__image {
max-width: 90vw;
max-height: 85vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
user-select: none;
-webkit-user-drag: none;
}
/* ------------------------------------------------------------------
Close button
------------------------------------------------------------------ */
.c-lightbox__close {
position: absolute;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
z-index: 3;
padding: 0;
opacity: 0;
transform: translateY(-10px);
transition:
opacity 0.3s ease 0.3s,
transform 0.3s ease 0.3s;
}
.c-lightbox.is-open .c-lightbox__close {
opacity: 1;
transform: translateY(0);
}
.c-lightbox__close::before,
.c-lightbox__close::after {
content: "";
position: absolute;
width: 24px;
height: 2px;
background-color: rgba(255, 255, 255, 0.8);
transition: background-color 0.2s ease;
}
.c-lightbox__close::before {
transform: rotate(45deg);
}
.c-lightbox__close::after {
transform: rotate(-45deg);
}
.c-lightbox__close:hover::before,
.c-lightbox__close:hover::after {
background-color: #1a1a1a;
}
/* ------------------------------------------------------------------
Navigation arrows
------------------------------------------------------------------ */
.c-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
cursor: pointer;
z-index: 3;
padding: 0;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
opacity: 0;
}
.c-lightbox.is-open .c-lightbox__nav {
opacity: 1;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease,
opacity 0.3s ease 0.3s;
}
.c-lightbox__nav:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.c-lightbox__nav--prev {
left: 20px;
}
.c-lightbox__nav--next {
right: 20px;
}
/* Arrow icons via CSS */
.c-lightbox__nav::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-right: 2px solid rgba(255, 255, 255, 0.8);
border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}
.c-lightbox__nav--prev::before {
transform: rotate(135deg);
margin-left: 3px;
}
.c-lightbox__nav--next::before {
transform: rotate(-45deg);
margin-right: 3px;
}
.c-lightbox__nav--prev:hover {
transform: translateY(-50%) translateX(-2px);
}
.c-lightbox__nav--next:hover {
transform: translateY(-50%) translateX(2px);
}
/* ------------------------------------------------------------------
Caption
------------------------------------------------------------------ */
.c-lightbox__caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 24px 80px;
text-align: center;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
line-height: 1.6;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.4s ease 0.35s,
transform 0.4s ease 0.35s;
}
.c-lightbox.is-open .c-lightbox__caption {
opacity: 1;
transform: translateY(0);
}
/* ------------------------------------------------------------------
Counter (e.g. "3 / 12")
------------------------------------------------------------------ */
.c-lightbox__counter {
position: absolute;
top: 24px;
left: 24px;
font-family: var(--font-en, "Cormorant Garamond", serif);
font-size: 14px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
z-index: 3;
opacity: 0;
transition: opacity 0.3s ease 0.3s;
}
.c-lightbox.is-open .c-lightbox__counter {
opacity: 1;
}
/* ------------------------------------------------------------------
Swipe indicator (mobile)
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-lightbox__nav {
width: 40px;
height: 40px;
}
.c-lightbox__nav--prev {
left: 10px;
}
.c-lightbox__nav--next {
right: 10px;
}
.c-lightbox__caption {
padding: 20px 16px;
font-size: 13px;
}
}
/* ------------------------------------------------------------------
Keyboard focus styles
------------------------------------------------------------------ */
.c-lightbox__close:focus-visible,
.c-lightbox__nav:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-lightbox,
.c-lightbox__image-wrap,
.c-lightbox__close,
.c-lightbox__nav,
.c-lightbox__caption,
.c-lightbox__counter {
transition: none;
}
}
/* ==========================================================================
Reading Progress Bar
========================================================================== */
.c-progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 1001; /* above header */
background-color: transparent;
pointer-events: none;
}
.c-progress-bar__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1a1a1a, #333333);
border-radius: 0 2px 2px 0;
transition: width 0.1s linear;
will-change: width;
}
/* Glow effect on the leading edge */
.c-progress-bar__fill::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06));
border-radius: 0 2px 2px 0;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-progress-bar__fill {
transition: none;
}
}
/* ==========================================================================
Floating CTA Button
========================================================================== */
.c-floating-cta {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
transform: translateY(100px);
opacity: 0;
visibility: hidden;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Visible state (JS adds after scroll threshold) */
.c-floating-cta.is-visible {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Hidden when near footer */
.c-floating-cta.is-hidden {
transform: translateY(100px);
opacity: 0;
visibility: hidden;
}
/* ------------------------------------------------------------------
Button
------------------------------------------------------------------ */
.c-floating-cta__btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background-color: #1a1a1a;
border-radius: 50%;
border: none;
cursor: pointer;
color: #fff;
text-decoration: none;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.035),
0 2px 6px rgba(0, 0, 0, 0.1);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
position: relative;
animation: floatingCtaPulse 2.5s ease-in-out infinite;
}
.c-floating-cta__btn:hover {
background-color: #333333;
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.045),
0 3px 10px rgba(0, 0, 0, 0.12);
transform: scale(1.05);
animation: none;
}
.c-floating-cta__btn:active {
transform: scale(0.95);
}
/* Pulse animation ring */
@keyframes floatingCtaPulse {
0% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.035),
0 2px 6px rgba(0, 0, 0, 0.1),
0 0 0 0 rgba(0, 0, 0, 0.04);
}
70% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.035),
0 2px 6px rgba(0, 0, 0, 0.1),
0 0 0 16px rgba(0, 0, 0, 0);
}
100% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.035),
0 2px 6px rgba(0, 0, 0, 0.1),
0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* Icon inside button */
.c-floating-cta__icon {
width: 24px;
height: 24px;
fill: currentColor;
}
.c-floating-cta__icon svg {
width: 100%;
height: 100%;
}
/* ------------------------------------------------------------------
Tooltip on hover
------------------------------------------------------------------ */
.c-floating-cta__tooltip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background-color: #2c2c2c;
color: #fff;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
padding: 8px 16px;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
/* Tooltip arrow */
.c-floating-cta__tooltip::after {
content: "";
position: absolute;
top: 50%;
right: -6px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid #2c2c2c;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.c-floating-cta__btn:hover + .c-floating-cta__tooltip,
.c-floating-cta__btn:hover ~ .c-floating-cta__tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ------------------------------------------------------------------
Focus styles
------------------------------------------------------------------ */
.c-floating-cta__btn:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 4px;
}
/* ------------------------------------------------------------------
Mobile adjustments
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-floating-cta {
bottom: 16px;
right: 16px;
}
.c-floating-cta__btn {
width: 52px;
height: 52px;
}
.c-floating-cta__tooltip {
display: none;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-floating-cta {
transition: none;
}
.c-floating-cta__btn {
animation: none;
}
.c-floating-cta__tooltip {
transition: none;
}
}
/* ==========================================================================
Back to Top Button with SVG circle progress
========================================================================== */
.c-back-to-top {
position: fixed;
bottom: 100px; /* above floating CTA */
right: 24px;
z-index: 998;
width: 48px;
height: 48px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ------------------------------------------------------------------
Button wrapper
------------------------------------------------------------------ */
.c-back-to-top__btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition:
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
padding: 0;
}
.c-back-to-top__btn:hover {
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.c-back-to-top__btn:active {
transform: translateY(0);
}
.c-back-to-top__btn:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
/* ------------------------------------------------------------------
SVG circle progress indicator
------------------------------------------------------------------ */
.c-back-to-top__circle {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
transform: rotate(-90deg);
}
.c-back-to-top__circle-bg {
fill: none;
stroke: rgba(0, 0, 0, 0.035);
stroke-width: 2;
}
.c-back-to-top__circle-fill {
fill: none;
stroke: #1a1a1a;
stroke-width: 2;
stroke-linecap: round;
/* circumference = 2 * PI * 21 (radius) = ~131.95 */
stroke-dasharray: 131.95;
stroke-dashoffset: 131.95; /* JS updates this based on scroll % */
transition: stroke-dashoffset 0.1s linear;
}
/* ------------------------------------------------------------------
Arrow icon
------------------------------------------------------------------ */
.c-back-to-top__arrow {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
/* CSS-only arrow */
.c-back-to-top__arrow::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-left: 2px solid #1a1a1a;
border-top: 2px solid #1a1a1a;
transform: rotate(45deg) translateY(2px);
transition: border-color 0.2s ease;
}
.c-back-to-top__btn:hover .c-back-to-top__arrow::before {
border-color: #333333;
}
/* ------------------------------------------------------------------
Mobile adjustments
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-back-to-top {
bottom: 80px;
right: 16px;
}
.c-back-to-top__btn {
width: 40px;
height: 40px;
}
.c-back-to-top__circle {
width: 40px;
height: 40px;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-back-to-top {
transition: none;
}
.c-back-to-top__btn {
transition: none;
}
.c-back-to-top__circle-fill {
transition: none;
}
}
/* ==========================================================================
Infinite Scrolling Marquee / Ticker
========================================================================== */
.c-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 20px 0;
background: var(--color-bg-white, #ffffff);
border-top: 1px solid var(--color-border-light, #eeeeee);
}
/* Gradient fade on edges using mask-image */
.c-marquee::before,
.c-marquee::after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.c-marquee::before {
left: 0;
background: linear-gradient(to right, var(--color-bg-white, #ffffff) 0%, transparent 100%);
}
.c-marquee::after {
right: 0;
background: linear-gradient(to left, var(--color-bg-white, #ffffff) 0%, transparent 100%);
}
/* Dark bg variant */
.c-marquee--dark::before {
background: linear-gradient(to right, #2c2c2c 0%, transparent 100%);
}
.c-marquee--dark::after {
background: linear-gradient(to left, #2c2c2c 0%, transparent 100%);
}
/* ------------------------------------------------------------------
Track (contains duplicated items for seamless loop)
------------------------------------------------------------------ */
.c-marquee__track {
display: flex;
align-items: center;
width: max-content;
animation: marquee 30s linear infinite;
will-change: transform;
}
/* Speed variants */
.c-marquee--fast .c-marquee__track {
animation-duration: 15s;
}
.c-marquee--slow .c-marquee__track {
animation-duration: 50s;
}
/* Reverse direction */
.c-marquee--reverse .c-marquee__track {
animation-direction: reverse;
}
/* Pause on hover */
.c-marquee:hover .c-marquee__track {
animation-play-state: paused;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ------------------------------------------------------------------
Individual items
------------------------------------------------------------------ */
.c-marquee__item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 24px;
white-space: nowrap;
font-size: var(--text-sm, 14px);
font-weight: var(--fw-medium, 500);
color: var(--color-text-muted, #999);
letter-spacing: var(--tracking-wide, 0.04em);
}
/* Text item */
.c-marquee__item--text {
font-family: var(--font-en, "Cormorant Garamond", serif);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.05em;
color: #2c2c2c;
}
.c-marquee--dark .c-marquee__item--text {
color: rgba(255, 255, 255, 0.8);
}
/* Large text variant */
.c-marquee--lg .c-marquee__item--text {
font-size: 48px;
font-weight: 300;
letter-spacing: 0.02em;
color: rgba(44, 44, 44, 0.1);
text-transform: uppercase;
padding: 0 40px;
}
/* Logo/image item */
.c-marquee__item--logo {
padding: 0 32px;
}
.c-marquee__item--logo img {
height: 40px;
width: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.5;
transition:
filter 0.3s ease,
opacity 0.3s ease;
}
.c-marquee:hover .c-marquee__item--logo img {
filter: grayscale(0%);
opacity: 1;
}
/* Separator dot between items */
.c-marquee__separator {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-text-muted, #999);
opacity: 0.2;
}
.c-marquee--dark .c-marquee__separator {
background-color: #e0e0e0;
opacity: 0.3;
}
/* ------------------------------------------------------------------
Achievement ticker variant
------------------------------------------------------------------ */
.c-marquee--achievement .c-marquee__item {
padding: 0 40px;
}
.c-marquee--achievement .c-marquee__value {
font-family: var(--font-en, "Cormorant Garamond", serif);
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin-right: 8px;
}
.c-marquee--achievement .c-marquee__label {
font-size: 14px;
color: #333333;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-marquee__track {
animation: none;
}
}
/* ==========================================================================
Before/After Comparison Slider
========================================================================== */
/* ------------------------------------------------------------------
Container
------------------------------------------------------------------ */
.c-compare {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-lg, 8px);
cursor: col-resize;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
/* ------------------------------------------------------------------
Images (before = bottom, after = top with clip)
------------------------------------------------------------------ */
.c-compare__before,
.c-compare__after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-compare__before img,
.c-compare__after img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
}
/* After image is clipped from the right via clip-path */
.c-compare__after {
clip-path: inset(0 50% 0 0); /* JS updates the 50% value */
}
/* ------------------------------------------------------------------
Slider handle
------------------------------------------------------------------ */
.c-compare__slider {
position: absolute;
top: 0;
left: 50%; /* JS updates this */
transform: translateX(-50%);
width: 4px;
height: 100%;
z-index: 3;
pointer-events: none;
}
/* Vertical line */
.c-compare__slider::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: #1a1a1a;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}
/* Handle circle */
.c-compare__handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
background-color: #1a1a1a;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: col-resize;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.c-compare__handle:hover,
.c-compare.is-dragging .c-compare__handle {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* Double arrow icon inside handle */
.c-compare__handle::before,
.c-compare__handle::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-top: 2px solid #fff;
position: absolute;
}
.c-compare__handle::before {
left: 8px;
transform: rotate(-135deg);
}
.c-compare__handle::after {
right: 8px;
transform: rotate(45deg);
}
/* ------------------------------------------------------------------
Labels
------------------------------------------------------------------ */
.c-compare__label {
position: absolute;
bottom: 16px;
z-index: 2;
padding: 6px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 4px;
pointer-events: none;
transition: opacity 0.3s ease;
}
.c-compare__label--before {
left: 16px;
background-color: rgba(44, 44, 44, 0.75);
color: #fff;
}
.c-compare__label--after {
right: 16px;
background-color: rgba(0, 0, 0, 0.085);
color: #fff;
}
/* Hide labels during drag */
.c-compare.is-dragging .c-compare__label {
opacity: 0;
}
/* ------------------------------------------------------------------
Mobile touch
------------------------------------------------------------------ */
@media (max-width: 767px) {
.c-compare__handle {
width: 36px;
height: 36px;
}
.c-compare__label {
font-size: 10px;
padding: 4px 10px;
}
}
/* ------------------------------------------------------------------
Focus styles for keyboard
------------------------------------------------------------------ */
.c-compare:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-compare__handle {
transition: none;
}
.c-compare__label {
transition: none;
}
}
/* ==========================================================================
Toast Notifications
========================================================================== */
/* ------------------------------------------------------------------
Container (holds all toasts)
------------------------------------------------------------------ */
.c-toast {
position: fixed;
z-index: 9997;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
max-width: 400px;
width: calc(100% - 32px);
}
/* Position variants */
.c-toast--bottom-center {
bottom: 24px;
left: 50%;
transform: translateX(-50%);
align-items: center;
}
.c-toast--top-right {
top: 24px;
right: 24px;
align-items: flex-end;
}
.c-toast--bottom-right {
bottom: 24px;
right: 24px;
align-items: flex-end;
}
.c-toast--top-center {
top: 24px;
left: 50%;
transform: translateX(-50%);
align-items: center;
}
/* ------------------------------------------------------------------
Individual toast item
------------------------------------------------------------------ */
.c-toast__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
background-color: #fff;
border-radius: 8px;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.1),
0 1px 4px rgba(0, 0, 0, 0.06);
pointer-events: auto;
max-width: 100%;
position: relative;
overflow: hidden;
opacity: 1;
}
/* Left accent border */
.c-toast__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #1a1a1a;
}
/* Variant colors */
.c-toast__item--success::before {
background-color: #4caf50;
}
.c-toast__item--error::before {
background-color: #ef5350;
}
.c-toast__item--warning::before {
background-color: #ff9800;
}
.c-toast__item--info::before {
background-color: #2196f3;
}
/* ------------------------------------------------------------------
Icon
------------------------------------------------------------------ */
.c-toast__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
}
.c-toast__icon svg {
width: 100%;
height: 100%;
}
.c-toast__item--success .c-toast__icon {
color: #4caf50;
}
.c-toast__item--error .c-toast__icon {
color: #ef5350;
}
.c-toast__item--warning .c-toast__icon {
color: #ff9800;
}
.c-toast__item--info .c-toast__icon {
color: #2196f3;
}
/* ------------------------------------------------------------------
Content
------------------------------------------------------------------ */
.c-toast__content {
flex: 1;
min-width: 0;
}
.c-toast__title {
font-size: 14px;
font-weight: 700;
color: #2c2c2c;
margin-bottom: 2px;
line-height: 1.4;
}
.c-toast__message {
font-size: 13px;
color: #666;
line-height: 1.5;
}
/* ------------------------------------------------------------------
Close button
------------------------------------------------------------------ */
.c-toast__close {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: #999;
padding: 0;
border-radius: 4px;
transition: background-color 0.15s ease;
}
.c-toast__close:hover {
background-color: rgba(0, 0, 0, 0.05);
color: #333;
}
.c-toast__close::before,
.c-toast__close::after {
content: "";
position: absolute;
width: 12px;
height: 1.5px;
background-color: currentColor;
}
.c-toast__close::before {
transform: rotate(45deg);
}
.c-toast__close::after {
transform: rotate(-45deg);
}
/* ------------------------------------------------------------------
Auto-dismiss progress bar
------------------------------------------------------------------ */
.c-toast__progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: rgba(0, 0, 0, 0.12);
border-radius: 0 2px 0 0;
animation: toastProgress linear forwards;
}
.c-toast__item--success .c-toast__progress {
background-color: rgba(76, 175, 80, 0.5);
}
.c-toast__item--error .c-toast__progress {
background-color: rgba(239, 83, 80, 0.5);
}
@keyframes toastProgress {
from {
width: 100%;
}
to {
width: 0%;
}
}
/* ------------------------------------------------------------------
Entrance / exit animations
------------------------------------------------------------------ */
/* Entering from bottom */
.c-toast__item.is-entering {
animation: toastEnterUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastEnterUp {
from {
opacity: 0;
transform: translateY(24px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Entering from right */
.c-toast--top-right .c-toast__item.is-entering,
.c-toast--bottom-right .c-toast__item.is-entering {
animation: toastEnterRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastEnterRight {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Leaving */
.c-toast__item.is-leaving {
animation: toastLeave 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastLeave {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
}
/* ------------------------------------------------------------------
Mobile
------------------------------------------------------------------ */
@media (max-width: 539px) {
.c-toast {
width: calc(100% - 16px);
left: 8px;
right: 8px;
max-width: none;
transform: none;
}
.c-toast--bottom-center,
.c-toast--bottom-right {
bottom: 16px;
}
.c-toast--top-right,
.c-toast--top-center {
top: 16px;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-toast__item.is-entering,
.c-toast__item.is-leaving {
animation: none;
}
.c-toast__progress {
animation: none;
}
}
/* ==========================================================================
General Modal
========================================================================== */
/* ------------------------------------------------------------------
Overlay wrapper
------------------------------------------------------------------ */
.c-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-modal.is-open {
opacity: 1;
visibility: visible;
}
/* Body lock when modal open */
body.is-modal-open {
overflow: hidden;
}
/* ------------------------------------------------------------------
Backdrop
------------------------------------------------------------------ */
.c-modal__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
cursor: pointer;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ------------------------------------------------------------------
Content card
------------------------------------------------------------------ */
.c-modal__content {
position: relative;
width: 100%;
max-width: 600px;
max-height: 90vh;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 1;
transform: translateY(24px) scale(0.97);
opacity: 0;
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-modal.is-open .c-modal__content {
transform: translateY(0) scale(1);
opacity: 1;
transition-delay: 0.05s;
}
/* Size variants */
.c-modal--sm .c-modal__content {
max-width: 400px;
}
.c-modal--lg .c-modal__content {
max-width: 800px;
}
.c-modal--full .c-modal__content {
max-width: 95vw;
max-height: 95vh;
}
/* ------------------------------------------------------------------
Header
------------------------------------------------------------------ */
.c-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.c-modal__title {
font-size: 18px;
font-weight: 700;
color: #2c2c2c;
line-height: 1.3;
}
/* ------------------------------------------------------------------
Close button
------------------------------------------------------------------ */
.c-modal__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
padding: 0;
flex-shrink: 0;
margin-left: 16px;
transition: background-color 0.15s ease;
position: relative;
}
.c-modal__close:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.c-modal__close:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
.c-modal__close::before,
.c-modal__close::after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background-color: #666;
transition: background-color 0.15s ease;
}
.c-modal__close::before {
transform: rotate(45deg);
}
.c-modal__close::after {
transform: rotate(-45deg);
}
.c-modal__close:hover::before,
.c-modal__close:hover::after {
background-color: #333;
}
/* ------------------------------------------------------------------
Body
------------------------------------------------------------------ */
.c-modal__body {
padding: 28px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1;
}
.c-modal__body p {
font-size: 15px;
line-height: 1.7;
color: #555;
margin-bottom: 16px;
}
.c-modal__body p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------------
Footer
------------------------------------------------------------------ */
.c-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 20px 28px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
/* ------------------------------------------------------------------
Exit animation
------------------------------------------------------------------ */
.c-modal.is-closing {
opacity: 0;
}
.c-modal.is-closing .c-modal__content {
transform: translateY(16px) scale(0.97);
opacity: 0;
}
/* ------------------------------------------------------------------
Mobile
------------------------------------------------------------------ */
@media (max-width: 539px) {
.c-modal {
padding: 0;
align-items: flex-end;
}
.c-modal__content {
max-width: 100%;
max-height: 90vh;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
}
.c-modal.is-open .c-modal__content {
transform: translateY(0);
}
.c-modal.is-closing .c-modal__content {
transform: translateY(100%);
}
.c-modal__header {
padding: 20px;
}
.c-modal__body {
padding: 20px;
}
.c-modal__footer {
padding: 16px 20px;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-modal,
.c-modal__content {
transition: none;
}
}
/* ==========================================================================
Dark Mode - S.Line Corporate Theme
Complete dark theme with smooth toggle transition
========================================================================== */
/* ------------------------------------------------------------------
Transition class: added temporarily during toggle
------------------------------------------------------------------ */
.is-transitioning,
.is-transitioning *,
.is-transitioning *::before,
.is-transitioning *::after {
transition: background-color 0.5s ease,
color 0.5s ease,
border-color 0.5s ease,
box-shadow 0.5s ease,
fill 0.5s ease,
stroke 0.5s ease !important;
}
/* ------------------------------------------------------------------
Dark Mode Variable Overrides
------------------------------------------------------------------ */
.is-dark-mode {
/* Backgrounds */
--color-bg: #1a1a1a;
--color-bg-white: #242424;
--color-bg-dark: #f8f5f5;
--color-bg-accent: #1e2530;
--color-bg-cta: #7A95BA;
/* Text */
--color-text-primary: #e8e4e0;
--color-text-secondary: #a0b0c8;
--color-text-muted: #7888a0;
--color-text-white: #ffffff;
/* Border */
--color-border: #2a3040;
--color-border-light: #222838;
--color-border-dark: #3a4050;
/* Shadows - darker in dark mode */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4);
--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
/* Overlay */
--color-overlay-dark: rgba(0, 0, 0, 0.7);
--color-overlay-darker: rgba(0, 0, 0, 0.85);
--color-overlay-light: rgba(255, 255, 255, 0.05);
color-scheme: dark;
}
/* ------------------------------------------------------------------
Header Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-header {
background-color: rgba(26, 26, 26, 0.95);
border-bottom-color: var(--color-border);
}
.is-dark-mode .c-header.is-scrolled {
background-color: rgba(36, 36, 36, 0.98);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.is-dark-mode .c-header__logo-text {
color: var(--color-text-primary);
}
.is-dark-mode .c-nav__link {
color: var(--color-text-secondary);
}
.is-dark-mode .c-nav__link:hover,
.is-dark-mode .c-nav__link.is-active {
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Footer Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-footer {
background-color: #121212;
border-top-color: var(--color-border);
}
.is-dark-mode .c-footer__bottom {
border-top-color: var(--color-border);
}
/* ------------------------------------------------------------------
Cards Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-card {
background-color: var(--color-bg-white);
border-color: var(--color-border);
}
.is-dark-mode .c-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.is-dark-mode .c-card__body {
color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Form Inputs Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-form__input,
.is-dark-mode .c-form__textarea,
.is-dark-mode .c-form__select,
.is-dark-mode input[type="text"],
.is-dark-mode input[type="email"],
.is-dark-mode input[type="tel"],
.is-dark-mode input[type="url"],
.is-dark-mode input[type="password"],
.is-dark-mode input[type="search"],
.is-dark-mode input[type="number"],
.is-dark-mode textarea,
.is-dark-mode select {
background-color: #1e1e1e;
border-color: var(--color-border);
color: var(--color-text-primary);
}
.is-dark-mode .c-form__input::placeholder,
.is-dark-mode .c-form__textarea::placeholder,
.is-dark-mode textarea::placeholder,
.is-dark-mode input::placeholder {
color: var(--color-text-muted);
}
.is-dark-mode .c-form__input:focus,
.is-dark-mode .c-form__textarea:focus,
.is-dark-mode textarea:focus,
.is-dark-mode input:focus,
.is-dark-mode select:focus {
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
/* ------------------------------------------------------------------
Accordion Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-accordion__header {
background-color: var(--color-bg-white);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.is-dark-mode .c-accordion__body {
background-color: #1e1e1e;
border-color: var(--color-border);
}
/* ------------------------------------------------------------------
Table Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-table th {
background-color: #1e2530;
color: var(--color-text-primary);
border-color: var(--color-border);
}
.is-dark-mode .c-table td {
border-color: var(--color-border);
color: var(--color-text-primary);
}
.is-dark-mode .c-table tr:nth-child(even) td {
background-color: #1e1e1e;
}
/* ------------------------------------------------------------------
Breadcrumbs Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-breadcrumbs {
background-color: var(--color-bg-white);
}
.is-dark-mode .c-breadcrumbs__link {
color: var(--color-text-secondary);
}
/* ------------------------------------------------------------------
Modal / Lightbox Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-modal__content,
.is-dark-mode .c-lightbox__caption {
background-color: var(--color-bg-white);
color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Toast Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-toast {
background-color: #2e2e2e;
color: var(--color-text-primary);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* ------------------------------------------------------------------
Section Background Overrides
------------------------------------------------------------------ */
.is-dark-mode .s-numbers {
background-color: #121212;
}
.is-dark-mode .s-testimonials {
background-color: var(--color-bg-accent);
}
.is-dark-mode .s-cta {
background-color: #1e2530;
}
/* ------------------------------------------------------------------
Image Brightness
------------------------------------------------------------------ */
.is-dark-mode img:not(.c-dark-toggle__icon):not(.c-header__logo-img) {
filter: brightness(0.9);
}
/* ------------------------------------------------------------------
Scrollbar Dark Mode
------------------------------------------------------------------ */
.is-dark-mode ::-webkit-scrollbar-track {
background: #1a1a1a;
}
.is-dark-mode ::-webkit-scrollbar-thumb {
background-color: #3a4050;
}
.is-dark-mode ::-webkit-scrollbar-thumb:hover {
background-color: #4a5060;
}
/* ------------------------------------------------------------------
Selection Dark Mode
------------------------------------------------------------------ */
.is-dark-mode ::selection {
background-color: rgba(0, 0, 0, 0.04);
color: #ffffff;
}
/* ------------------------------------------------------------------
Dark Mode Toggle Button
------------------------------------------------------------------ */
.c-dark-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid var(--color-border);
border-radius: var(--radius-full);
background-color: var(--color-bg-white);
color: var(--color-text-primary);
cursor: pointer;
transition: border-color 0.3s ease,
background-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
z-index: var(--z-fixed);
-webkit-tap-highlight-color: transparent;
}
.c-dark-toggle:hover {
border-color: var(--color-brand-primary);
transform: scale(1.08);
}
.c-dark-toggle:active {
transform: scale(0.95);
}
/* Icons inside toggle */
.c-dark-toggle__icon {
width: 20px;
height: 20px;
transition: opacity 0.3s ease, transform 0.4s ease;
position: absolute;
}
.c-dark-toggle__icon--sun {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
.c-dark-toggle__icon--moon {
opacity: 1;
transform: rotate(0) scale(1);
}
/* In dark mode: show sun, hide moon */
.is-dark-mode .c-dark-toggle__icon--sun {
opacity: 1;
transform: rotate(0) scale(1);
}
.is-dark-mode .c-dark-toggle__icon--moon {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
.is-dark-mode .c-dark-toggle {
background-color: #2e2e2e;
border-color: #3a4050;
color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Header placement variant
------------------------------------------------------------------ */
.c-header .c-dark-toggle {
position: static;
width: 40px;
height: 40px;
}
/* ------------------------------------------------------------------
Fixed position variant (bottom-left)
------------------------------------------------------------------ */
.c-dark-toggle--fixed {
position: fixed;
bottom: 24px;
left: 24px;
box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
.c-dark-toggle--fixed {
bottom: 16px;
left: 16px;
width: 40px;
height: 40px;
}
}
/* ------------------------------------------------------------------
Code / Pre Dark Mode
------------------------------------------------------------------ */
.is-dark-mode pre,
.is-dark-mode code {
background-color: #1e1e1e;
color: #c8d4e4;
border-color: var(--color-border);
}
/* ------------------------------------------------------------------
Blockquote Dark Mode
------------------------------------------------------------------ */
.is-dark-mode blockquote {
background-color: var(--color-bg-accent);
border-left-color: var(--color-brand-primary);
color: var(--color-text-secondary);
}
/* ------------------------------------------------------------------
HR Dark Mode
------------------------------------------------------------------ */
.is-dark-mode hr {
border-color: var(--color-border);
}
/* ------------------------------------------------------------------
Back to Top / Floating CTA Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-back-to-top {
background-color: #2e2e2e;
border-color: #3a4050;
}
.is-dark-mode .c-floating-cta {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* ------------------------------------------------------------------
Progress Bar Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-progress-bar {
background-color: #2e2e2e;
}
/* ------------------------------------------------------------------
Compare / Before-After Dark Mode
------------------------------------------------------------------ */
.is-dark-mode .c-compare {
border-color: var(--color-border);
}
.is-dark-mode .c-compare__label {
background-color: rgba(26, 26, 26, 0.85);
}
/* ==========================================================================
Particles - Canvas-based particle background
========================================================================== */
.c-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.c-particles canvas {
display: block;
width: 100%;
height: 100%;
}
/* ------------------------------------------------------------------
Layer management: content above particles
------------------------------------------------------------------ */
.c-particles + *,
.c-particles ~ .s-hero__content,
.c-particles ~ .s-hero__inner {
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------------
Hero section with particles
------------------------------------------------------------------ */
.s-hero--particles {
position: relative;
overflow: hidden;
}
.s-hero--particles .s-hero__content {
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------------
Variants
------------------------------------------------------------------ */
/* Dense particle field */
.c-particles--dense canvas {
opacity: 0.8;
}
/* Subtle / light particle field */
.c-particles--subtle canvas {
opacity: 0.4;
}
/* Dark background variant */
.c-particles--dark canvas {
opacity: 0.6;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-particles canvas {
opacity: 0.3;
}
}
/* ==========================================================================
Smooth Scroll (Lenis-style) - Custom scrollbar & scroll wrapper
========================================================================== */
/* ------------------------------------------------------------------
HTML override for transform-based scrolling
------------------------------------------------------------------ */
html.has-smooth-scroll {
overflow: hidden;
}
html.has-smooth-scroll body {
overflow: hidden;
}
/* ------------------------------------------------------------------
Smooth scroll content wrapper
------------------------------------------------------------------ */
.smooth-scroll-wrapper {
will-change: transform;
}
/* ------------------------------------------------------------------
Custom Scrollbar - Webkit (Chrome, Safari, Edge)
------------------------------------------------------------------ */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f8f5f5;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-brand-primary, #1a1a1a);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-brand-primary-hover, #7A95BA);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--color-brand-primary-active, #1a1a1a);
}
/* Corner piece */
::-webkit-scrollbar-corner {
background: #f8f5f5;
}
/* ------------------------------------------------------------------
Custom Scrollbar - Firefox
------------------------------------------------------------------ */
html {
scrollbar-color: var(--color-brand-primary, #1a1a1a) #f8f5f5;
scrollbar-width: thin;
}
/* ------------------------------------------------------------------
Dark mode scrollbar overrides
------------------------------------------------------------------ */
.is-dark-mode {
scrollbar-color: #3a4050 #1a1a1a;
}
/* ------------------------------------------------------------------
Smooth scroll active indicator
------------------------------------------------------------------ */
.has-smooth-scroll .c-progress-bar {
position: fixed;
top: 0;
left: 0;
z-index: calc(var(--z-header) + 1);
}
/* ------------------------------------------------------------------
Reduced motion - disable smooth scrolling
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html.has-smooth-scroll {
overflow: auto;
}
html.has-smooth-scroll body {
overflow: auto;
}
.smooth-scroll-wrapper {
will-change: auto;
transform: none !important;
}
}
/* ==========================================================================
Odometer - Digit-by-digit rolling counter
========================================================================== */
/* ------------------------------------------------------------------
Container
------------------------------------------------------------------ */
.c-odometer {
display: inline-flex;
align-items: center;
overflow: hidden;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* ------------------------------------------------------------------
Individual digit slot
------------------------------------------------------------------ */
.c-odometer__digit {
display: inline-block;
position: relative;
overflow: hidden;
height: 1em;
width: 0.6em;
text-align: center;
}
/* ------------------------------------------------------------------
Digit inner strip (contains 0-9 stacked vertically)
------------------------------------------------------------------ */
.c-odometer__digit-inner {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* ------------------------------------------------------------------
Each number inside the strip
------------------------------------------------------------------ */
.c-odometer__digit-num {
display: flex;
align-items: center;
justify-content: center;
height: 1em;
width: 100%;
flex-shrink: 0;
}
/* ------------------------------------------------------------------
Separator (comma, period, etc.)
------------------------------------------------------------------ */
.c-odometer__separator {
display: inline-block;
width: 0.35em;
text-align: center;
flex-shrink: 0;
}
/* ------------------------------------------------------------------
Prefix / Suffix (e.g., $, %, +)
------------------------------------------------------------------ */
.c-odometer__prefix,
.c-odometer__suffix {
display: inline-block;
flex-shrink: 0;
}
/* ------------------------------------------------------------------
Size variants
------------------------------------------------------------------ */
.c-odometer--sm {
font-size: var(--text-xl);
}
.c-odometer--md {
font-size: var(--text-4xl);
}
.c-odometer--lg {
font-size: var(--text-5xl);
}
.c-odometer--xl {
font-size: var(--text-6xl);
}
/* ------------------------------------------------------------------
Brand color variant
------------------------------------------------------------------ */
.c-odometer--brand {
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Stagger animation - each digit rolls slightly after the previous
------------------------------------------------------------------ */
.c-odometer__digit:nth-child(1) .c-odometer__digit-inner { transition-delay: 0s; }
.c-odometer__digit:nth-child(2) .c-odometer__digit-inner { transition-delay: 0.05s; }
.c-odometer__digit:nth-child(3) .c-odometer__digit-inner { transition-delay: 0.1s; }
.c-odometer__digit:nth-child(4) .c-odometer__digit-inner { transition-delay: 0.15s; }
.c-odometer__digit:nth-child(5) .c-odometer__digit-inner { transition-delay: 0.2s; }
.c-odometer__digit:nth-child(6) .c-odometer__digit-inner { transition-delay: 0.25s; }
.c-odometer__digit:nth-child(7) .c-odometer__digit-inner { transition-delay: 0.3s; }
.c-odometer__digit:nth-child(8) .c-odometer__digit-inner { transition-delay: 0.35s; }
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-odometer__digit-inner {
transition: none;
}
}
/* ==========================================================================
Morphing Blob - Animated organic shapes for section decoration
========================================================================== */
/* ------------------------------------------------------------------
Base blob container
------------------------------------------------------------------ */
.c-blob {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.15;
filter: blur(60px);
will-change: transform;
}
.c-blob svg {
display: block;
width: 100%;
height: 100%;
}
/* ------------------------------------------------------------------
Size variants
------------------------------------------------------------------ */
.c-blob--sm {
width: 200px;
height: 200px;
}
.c-blob--md {
width: 400px;
height: 400px;
}
.c-blob--lg {
width: 600px;
height: 600px;
}
.c-blob--xl {
width: 800px;
height: 800px;
}
/* ------------------------------------------------------------------
Positional variants
------------------------------------------------------------------ */
.c-blob--top-left {
top: -15%;
left: -10%;
}
.c-blob--top-right {
top: -10%;
right: -10%;
}
.c-blob--bottom-left {
bottom: -15%;
left: -10%;
}
.c-blob--bottom-right {
bottom: -10%;
right: -10%;
}
.c-blob--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ------------------------------------------------------------------
Color variants using CSS animations for blobs without JS
------------------------------------------------------------------ */
.c-blob--1 {
background: radial-gradient(
circle at 50% 50%,
var(--color-brand-primary) 0%,
transparent 70%
);
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
animation: blobMorph1 12s ease-in-out infinite alternate;
}
.c-blob--2 {
background: radial-gradient(
circle at 50% 50%,
var(--color-brand-secondary) 0%,
transparent 70%
);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation: blobMorph2 15s ease-in-out infinite alternate;
}
.c-blob--3 {
background: radial-gradient(
circle at 50% 50%,
var(--color-brand-light) 0%,
transparent 70%
);
border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
animation: blobMorph3 10s ease-in-out infinite alternate;
}
/* ------------------------------------------------------------------
SVG variant (used with JS morphing)
------------------------------------------------------------------ */
.c-blob--svg {
background: none;
filter: blur(0);
opacity: 0.2;
animation: none;
}
.c-blob--svg svg {
filter: blur(40px);
}
/* ------------------------------------------------------------------
Keyframe animations for CSS-only blobs
------------------------------------------------------------------ */
@keyframes blobMorph1 {
0% {
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
transform: rotate(0deg) scale(1);
}
33% {
border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
}
66% {
border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
}
100% {
border-radius: 30% 70% 60% 40% / 60% 40% 70% 30%;
transform: rotate(45deg) scale(1.05);
}
}
@keyframes blobMorph2 {
0% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transform: rotate(0deg) scale(1);
}
33% {
border-radius: 30% 70% 50% 50% / 50% 40% 60% 50%;
}
66% {
border-radius: 50% 50% 70% 30% / 30% 60% 40% 70%;
}
100% {
border-radius: 40% 60% 40% 60% / 70% 30% 60% 40%;
transform: rotate(-30deg) scale(1.08);
}
}
@keyframes blobMorph3 {
0% {
border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
transform: rotate(0deg) scale(1);
}
33% {
border-radius: 40% 60% 60% 40% / 60% 40% 50% 50%;
}
66% {
border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
}
100% {
border-radius: 70% 30% 40% 60% / 50% 50% 60% 40%;
transform: rotate(60deg) scale(1.03);
}
}
/* ------------------------------------------------------------------
Dark mode - slightly more visible
------------------------------------------------------------------ */
.is-dark-mode .c-blob {
opacity: 0.1;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.c-blob--1,
.c-blob--2,
.c-blob--3 {
animation: none;
}
}
/* ------------------------------------------------------------------
Mobile: smaller blobs, less blur for performance
------------------------------------------------------------------ */
@media (max-width: 768px) {
.c-blob {
filter: blur(40px);
opacity: 0.1;
}
.c-blob--lg {
width: 300px;
height: 300px;
}
.c-blob--xl {
width: 400px;
height: 400px;
}
}
/* ==========================================================================
Notification Bar - Top announcement bar
========================================================================== */
/* ------------------------------------------------------------------
Bar container
------------------------------------------------------------------ */
.c-notification-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: calc(var(--z-header) + 10);
background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
border-bottom: 1px solid #e8e8e8;
color: var(--color-text-primary);
font-size: var(--text-sm);
line-height: var(--leading-normal);
transform: translateY(-100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* Visible state */
.c-notification-bar.is-visible {
transform: translateY(0);
}
/* ------------------------------------------------------------------
Inner layout
------------------------------------------------------------------ */
.c-notification-bar__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
max-width: var(--container-wide);
margin: 0 auto;
padding: 10px var(--container-padding);
min-height: 44px;
}
/* ------------------------------------------------------------------
Icon (optional)
------------------------------------------------------------------ */
.c-notification-bar__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
opacity: 0.9;
}
/* ------------------------------------------------------------------
Message text
------------------------------------------------------------------ */
.c-notification-bar__text {
flex: 1;
text-align: center;
font-weight: var(--fw-medium);
}
/* ------------------------------------------------------------------
Link inside notification
------------------------------------------------------------------ */
.c-notification-bar__link {
color: var(--color-brand-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity 0.2s ease;
font-weight: var(--fw-semibold);
}
.c-notification-bar__link:hover {
opacity: 0.8;
}
/* ------------------------------------------------------------------
CTA button inside notification
------------------------------------------------------------------ */
.c-notification-bar__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 14px;
background-color: var(--color-brand-primary);
border: 1px solid var(--color-brand-primary);
border-radius: var(--radius-full);
color: #ffffff;
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.c-notification-bar__cta:hover {
background-color: var(--color-brand-primary-hover, #333333);
border-color: var(--color-brand-primary-hover, #333333);
}
/* ------------------------------------------------------------------
Close button
------------------------------------------------------------------ */
.c-notification-bar__close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.06);
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.2s ease,
transform 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.c-notification-bar__close:hover {
background-color: rgba(0, 0, 0, 0.12);
transform: scale(1.1);
}
.c-notification-bar__close:active {
transform: scale(0.95);
}
.c-notification-bar__close svg {
width: 14px;
height: 14px;
}
/* ------------------------------------------------------------------
Header offset when notification bar is visible
------------------------------------------------------------------ */
body.has-notification-bar .c-header {
transform: translateY(44px);
}
body.has-notification-bar .c-header.is-scrolled {
transform: translateY(44px);
}
body.has-notification-bar .c-header.is-hidden {
transform: translateY(-100%);
}
body.has-notification-bar {
padding-top: 44px;
}
/* ------------------------------------------------------------------
Color variants
------------------------------------------------------------------ */
.c-notification-bar--info {
background: linear-gradient(135deg, var(--color-info) 0%, #42a5f5 100%);
}
.c-notification-bar--success {
background: linear-gradient(135deg, var(--color-success) 0%, #66bb6a 100%);
}
.c-notification-bar--warning {
background: linear-gradient(135deg, var(--color-warning) 0%, #ffa726 100%);
color: #333333;
}
.c-notification-bar--warning .c-notification-bar__close {
background-color: rgba(0, 0, 0, 0.1);
color: #333333;
}
.c-notification-bar--error {
background: linear-gradient(135deg, var(--color-error) 0%, #ef5350 100%);
}
.c-notification-bar--dark {
background: linear-gradient(135deg, #2c2c2c 0%, #3c3c3c 100%);
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 768px) {
.c-notification-bar__inner {
padding: 8px var(--container-padding);
gap: var(--space-sm);
}
.c-notification-bar__text {
font-size: var(--text-xs);
}
.c-notification-bar__cta {
display: none;
}
body.has-notification-bar .c-header {
transform: translateY(40px);
}
body.has-notification-bar {
padding-top: 40px;
}
}
/* ==========================================================================
Image Compare (Enhanced) - Before/After with vertical split & fullscreen
========================================================================== */
/* ------------------------------------------------------------------
Container
------------------------------------------------------------------ */
.c-image-compare {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
cursor: col-resize;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
border: 1px solid var(--color-border);
}
.c-image-compare--vertical {
cursor: row-resize;
touch-action: pan-x;
}
/* ------------------------------------------------------------------
Images
------------------------------------------------------------------ */
.c-image-compare__before,
.c-image-compare__after {
position: relative;
display: block;
}
.c-image-compare__before {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
}
.c-image-compare__after {
display: block;
width: 100%;
height: auto;
z-index: 1;
}
.c-image-compare__before img,
.c-image-compare__after img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* Horizontal clip (default) */
.c-image-compare__before {
clip-path: inset(0 50% 0 0);
}
/* Vertical clip */
.c-image-compare--vertical .c-image-compare__before {
clip-path: inset(0 0 50% 0);
}
/* ------------------------------------------------------------------
Handle / Divider (Horizontal)
------------------------------------------------------------------ */
.c-image-compare__handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
z-index: 3;
background-color: var(--color-text-white);
transform: translateX(-50%);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
/* Handle grip circle */
.c-image-compare__handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background-color: var(--color-text-white);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
pointer-events: auto;
cursor: grab;
}
.c-image-compare__handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M8 3l-5 9 5 9M16 3l5 9-5 9'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 1;
}
/* Grab cursor states */
.c-image-compare.is-dragging {
cursor: grabbing;
}
.c-image-compare.is-dragging .c-image-compare__handle::before {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.1);
}
/* ------------------------------------------------------------------
Handle / Divider (Vertical)
------------------------------------------------------------------ */
.c-image-compare--vertical .c-image-compare__handle {
top: 50%;
bottom: auto;
left: 0;
right: 0;
width: auto;
height: 3px;
transform: translateY(-50%);
}
.c-image-compare--vertical .c-image-compare__handle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
/* ------------------------------------------------------------------
Labels
------------------------------------------------------------------ */
.c-image-compare__label {
position: absolute;
z-index: 4;
padding: 6px 14px;
background-color: rgba(0, 0, 0, 0.6);
color: var(--color-text-white);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
border-radius: var(--radius-full);
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.c-image-compare__label--before {
top: 16px;
left: 16px;
}
.c-image-compare__label--after {
top: 16px;
right: 16px;
}
/* Vertical label positions */
.c-image-compare--vertical .c-image-compare__label--before {
top: 16px;
left: 50%;
transform: translateX(-50%);
}
.c-image-compare--vertical .c-image-compare__label--after {
top: auto;
bottom: 16px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* ------------------------------------------------------------------
Fullscreen toggle
------------------------------------------------------------------ */
.c-image-compare__fullscreen {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: var(--radius-md);
background-color: rgba(0, 0, 0, 0.5);
color: var(--color-text-white);
cursor: pointer;
transition: background-color 0.2s ease,
transform 0.2s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
-webkit-tap-highlight-color: transparent;
}
.c-image-compare__fullscreen:hover {
background-color: rgba(0, 0, 0, 0.7);
transform: scale(1.1);
}
.c-image-compare__fullscreen svg {
width: 18px;
height: 18px;
}
/* When labels exist, move fullscreen button */
.c-image-compare__label--after ~ .c-image-compare__fullscreen {
right: auto;
left: 50%;
transform: translateX(-50%);
top: auto;
bottom: 16px;
}
/* ------------------------------------------------------------------
Fullscreen state
------------------------------------------------------------------ */
.c-image-compare.is-fullscreen {
position: fixed;
inset: 0;
z-index: var(--z-modal);
border-radius: 0;
border: none;
background-color: #1a1a1a;
}
.c-image-compare.is-fullscreen .c-image-compare__after img,
.c-image-compare.is-fullscreen .c-image-compare__before img {
object-fit: contain;
}
/* Close button in fullscreen */
.c-image-compare__fullscreen-close {
display: none;
}
.c-image-compare.is-fullscreen .c-image-compare__fullscreen-close {
display: flex;
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.15);
color: var(--color-text-white);
cursor: pointer;
transition: background-color 0.2s ease;
}
.c-image-compare.is-fullscreen .c-image-compare__fullscreen-close:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.c-image-compare.is-fullscreen .c-image-compare__fullscreen {
display: none;
}
/* ------------------------------------------------------------------
Dark mode
------------------------------------------------------------------ */
.is-dark-mode .c-image-compare {
border-color: var(--color-border);
}
.is-dark-mode .c-image-compare__label {
background-color: rgba(36, 36, 36, 0.8);
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 768px) {
.c-image-compare__handle::before {
width: 36px;
height: 36px;
}
.c-image-compare__label {
font-size: 10px;
padding: 4px 10px;
}
.c-image-compare__fullscreen {
width: 32px;
height: 32px;
}
}
/* ==========================================================================
Hero Sections - Premium editorial design (Light Theme)
========================================================================== */
/* ------------------------------------------------------------------
Top page hero - fullscreen immersive
------------------------------------------------------------------ */
.s-hero--top {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 30%, #ffffff 100%);
}
/* ------------------------------------------------------------------
Background decorative elements
------------------------------------------------------------------ */
.s-hero__bg-decor {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Large soft radial glow - top right */
.s-hero__bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
.s-hero__bg-orb--1 {
width: 700px;
height: 700px;
top: -20%;
right: -12%;
background: radial-gradient(circle, rgba(200, 210, 225, 0.18) 0%, transparent 70%);
animation: orbDrift 20s ease-in-out infinite alternate;
}
.s-hero__bg-orb--2 {
width: 500px;
height: 500px;
bottom: -15%;
left: -10%;
background: radial-gradient(circle, rgba(200, 210, 225, 0.12) 0%, transparent 70%);
animation: orbDrift 24s ease-in-out infinite alternate-reverse;
}
/* Warm accent orb - very subtle */
.s-hero__bg-orb--3 {
width: 300px;
height: 300px;
top: 30%;
right: 25%;
background: radial-gradient(circle, rgba(200, 169, 110, 0.06) 0%, transparent 70%);
animation: orbDrift 16s ease-in-out infinite alternate;
animation-delay: -5s;
}
@keyframes orbDrift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -15px) scale(1.05); }
100% { transform: translate(-10px, 10px) scale(0.97); }
}
/* Subtle grain texture */
.s-hero__grain {
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
z-index: 1;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
animation: grainShift 0.5s steps(4) infinite;
}
@keyframes grainShift {
0% { transform: translate(0, 0); }
25% { transform: translate(-2%, -2%); }
50% { transform: translate(1%, -1%); }
75% { transform: translate(-1%, 1%); }
100% { transform: translate(0, 0); }
}
/* Thin horizontal rule for architectural structure */
.s-hero__bg-rule {
position: absolute;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
}
.s-hero__bg-rule--1 { top: 30%; }
.s-hero__bg-rule--2 { top: 70%; }
/* Vertical decorative line - right side accent */
.s-hero__bg-vline {
position: absolute;
right: 10%;
top: 15%;
bottom: 15%;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.06) 20%,
rgba(0, 0, 0, 0.06) 80%,
transparent 100%
);
}
/* Small accent dot on the vertical line */
.s-hero__bg-vline::after {
content: "";
position: absolute;
top: 35%;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: var(--color-accent-yellow);
border-radius: 50%;
opacity: 0.5;
box-shadow: 0 0 12px rgba(200, 169, 110, 0.3);
animation: accentPulse 4s ease-in-out infinite;
}
@keyframes accentPulse {
0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
50% { opacity: 0.7; transform: translateX(-50%) scale(1.4); }
}
/* ------------------------------------------------------------------
Content layout - center-aligned
------------------------------------------------------------------ */
.s-hero__content-wrap {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 var(--container-padding);
padding-top: calc(var(--space-5xl) + 40px);
padding-bottom: var(--space-4xl);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* ------------------------------------------------------------------
Sub-label above heading
------------------------------------------------------------------ */
.s-hero__label {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.s-hero__label-line {
display: block;
width: 40px;
height: 1px;
background: linear-gradient(90deg, var(--color-accent-yellow), rgba(200, 169, 110, 0.2));
flex-shrink: 0;
}
.s-hero__label-text {
font-family: var(--font-en);
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
}
@media (min-width: 768px) {
.s-hero__label-line { width: 56px; }
.s-hero__label-text { font-size: 12px; }
}
/* ------------------------------------------------------------------
Hero heading - premium typography
------------------------------------------------------------------ */
.s-hero__heading {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
font-weight: var(--fw-extrabold);
color: var(--color-text-primary);
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: var(--space-xl);
max-width: 800px;
}
/* Subtle text shadow for depth on white */
.s-hero__heading span {
display: inline;
}
/* ------------------------------------------------------------------
Subheading
------------------------------------------------------------------ */
.s-hero__subheading {
font-family: var(--font-jp);
font-size: var(--text-base);
line-height: 2;
color: var(--color-text-secondary);
margin-bottom: var(--space-2xl);
max-width: 640px;
letter-spacing: 0.04em;
}
@media (min-width: 768px) {
.s-hero__subheading {
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
}
}
/* ------------------------------------------------------------------
CTA buttons
------------------------------------------------------------------ */
.s-hero__actions {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-bottom: var(--space-3xl);
justify-content: center;
}
@media (min-width: 480px) {
.s-hero__actions {
flex-direction: row;
align-items: center;
gap: var(--space-lg);
}
}
.s-hero__btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 18px 40px;
font-family: var(--font-jp);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
color: #ffffff;
background: var(--color-brand-primary);
border: 2px solid var(--color-brand-primary);
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.s-hero__btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
opacity: 0;
transition: opacity 0.35s ease;
}
.s-hero__btn-primary:hover {
background: var(--color-brand-secondary);
border-color: var(--color-brand-secondary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.s-hero__btn-primary:hover::before {
opacity: 1;
}
.s-hero__btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Arrow icon in primary button */
.s-hero__btn-arrow {
display: inline-flex;
transition: transform 0.3s ease;
}
.s-hero__btn-primary:hover .s-hero__btn-arrow {
transform: translateX(3px);
}
.s-hero__btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 36px;
font-family: var(--font-jp);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
color: var(--color-text-primary);
background: transparent;
border: 1.5px solid var(--color-border-dark);
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.s-hero__btn-outline:hover {
background: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.s-hero__btn-outline:active {
transform: translateY(0);
box-shadow: none;
}
/* ------------------------------------------------------------------
Trust numbers bar
------------------------------------------------------------------ */
.s-hero__trust {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
max-width: 700px;
margin: 0 auto;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 20px rgba(0, 0, 0, 0.03);
overflow: visible;
}
.s-hero__trust-item {
flex: 1 1 auto;
min-width: 120px;
text-align: center;
padding: 12px 20px;
position: relative;
white-space: normal;
}
.s-hero__trust-number {
font-family: var(--font-en);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: 1;
letter-spacing: -0.02em;
}
.s-hero__trust-unit {
font-size: 0.5em;
font-weight: var(--fw-semibold);
color: var(--color-text-secondary);
letter-spacing: 0;
margin-left: 1px;
}
.s-hero__trust-label {
display: block;
font-family: var(--font-jp);
font-size: 11px;
font-weight: var(--fw-medium);
color: var(--color-text-muted);
margin-top: 8px;
letter-spacing: 0.08em;
}
.s-hero__trust-divider {
width: 1px;
flex-shrink: 0;
background: linear-gradient(
to bottom,
transparent 15%,
rgba(0, 0, 0, 0.08) 50%,
transparent 85%
);
}
@media (max-width: 479px) {
.s-hero__trust {
max-width: 100%;
gap: 0.5rem;
}
.s-hero__trust-item {
padding: 12px 16px;
min-width: 100px;
}
.s-hero__trust-number {
font-size: 1.4rem;
}
.s-hero__trust-label {
font-size: 10px;
white-space: normal;
}
}
/* ------------------------------------------------------------------
Scroll indicator
------------------------------------------------------------------ */
.s-hero__scroll {
position: absolute;
bottom: var(--space-xl);
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
color: var(--color-text-muted);
}
.s-hero__scroll-text {
font-family: var(--font-en);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #bbb;
}
.s-hero__scroll-line {
width: 1px;
height: 48px;
position: relative;
overflow: hidden;
background: rgba(0, 0, 0, 0.06);
}
.s-hero__scroll-line::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, var(--color-brand-primary));
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { top: -100%; }
50% { top: 0; }
100% { top: 100%; }
}
/* ------------------------------------------------------------------
Right-side decorative vertical text (desktop only)
------------------------------------------------------------------ */
.s-hero__side-text {
position: absolute;
right: calc(10% + 20px);
top: 50%;
transform: translateY(-50%) rotate(90deg);
transform-origin: center center;
font-family: var(--font-en);
font-size: 10px;
font-weight: var(--fw-medium);
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.08);
white-space: nowrap;
z-index: 2;
pointer-events: none;
}
/* ------------------------------------------------------------------
Responsive: tablet and below
------------------------------------------------------------------ */
@media (max-width: 767px) {
.s-hero__bg-vline { display: none; }
.s-hero__side-text { display: none; }
.s-hero__bg-rule { display: none; }
.s-hero__content-wrap {
padding-top: calc(var(--space-4xl) + 20px);
padding-bottom: var(--space-3xl);
}
.s-hero__heading {
font-size: clamp(2rem, 7vw, 2.8rem);
max-width: 100%;
}
}
/* Small screen overrides */
@media (max-width: 479px) {
.s-hero__heading {
max-width: 100%;
}
.s-hero__subheading {
max-width: 100%;
}
.s-hero__actions {
align-items: stretch;
}
.s-hero__btn-primary,
.s-hero__btn-outline {
justify-content: center;
width: 100%;
text-align: center;
}
.s-hero__trust {
margin: 0 auto;
}
}
/* ------------------------------------------------------------------
Page hero - sub-pages (light theme)
------------------------------------------------------------------ */
.s-hero--page {
position: relative;
min-height: 280px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding-top: var(--header-height);
padding-bottom: var(--space-3xl);
background-color: var(--color-bg-accent);
overflow: hidden;
}
@media (min-width: 768px) {
.s-hero--page {
min-height: 40vh;
}
}
.s-hero--page.has-bg {
background-color: var(--color-bg-accent);
}
.s-hero--page .s-hero__overlay {
background: linear-gradient(
to top,
rgba(237, 241, 247, 0.6) 0%,
rgba(237, 241, 247, 0.2) 100%
) !important;
}
.s-hero--page .s-hero__content {
text-align: left;
max-width: none;
width: 100%;
}
.s-hero--page .s-hero__title {
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
@media (min-width: 768px) {
.s-hero--page .s-hero__title {
font-size: var(--text-4xl);
}
}
.s-hero--page .s-hero__subtitle {
color: var(--color-brand-secondary) !important;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
display: block;
margin-bottom: var(--space-sm);
}
.s-hero--page:not(.has-bg) .s-hero__content {
color: var(--color-text-primary);
}
.s-hero--page:not(.has-bg) .s-hero__title {
color: var(--color-text-primary);
}
.s-hero--page:not(.has-bg) .s-hero__subtitle {
color: var(--color-brand-secondary);
}
.s-hero--page .s-hero__heading {
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
}
@media (min-width: 768px) {
.s-hero--page .s-hero__heading {
font-size: var(--text-4xl);
}
}
.s-hero--page .c-breadcrumb {
margin-bottom: var(--space-md);
}
.s-hero--page .c-breadcrumb--white {
color: var(--color-text-secondary);
}
.s-hero--page .c-breadcrumb--white .c-breadcrumb__link {
color: var(--color-text-muted);
}
.s-hero--page .c-breadcrumb--white .c-breadcrumb__link:hover {
color: var(--color-brand-primary);
}
.s-hero--page .c-breadcrumb--white .c-breadcrumb__current {
color: var(--color-text-primary);
}
/* ------------------------------------------------------------------
Vignette effect
------------------------------------------------------------------ */
.s-hero__vignette {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(0, 0, 0, 0.02) 100%
);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.s-hero__grain { animation: none; display: none; }
.s-hero__bg-orb { animation: none; }
.s-hero__bg-vline::after { animation: none; opacity: 0.5; }
.s-hero__scroll-line::after { animation: none; top: 0; opacity: 0.4; }
}
/* ==========================================================================
Services Section
========================================================================== */
/* Services grid (top page) */
.s-services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.s-services__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.s-services__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Service card */
.s-services__card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
text-decoration: none;
color: inherit;
}
.s-services__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
/* Service card image */
.s-services__card-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: visible;
}
.s-services__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
clip-path: inset(0); /* clip scaled image within bounds (replaces parent overflow:hidden) */
}
.s-services__card:hover .s-services__card-image img {
transform: scale(1.05);
}
/* Service card icon overlay */
.s-services__card-icon {
position: absolute;
bottom: calc(var(--space-md) * -1);
right: var(--space-md);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-brand-primary);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
z-index: 2;
}
.s-services__card-icon svg,
.s-services__card-icon img {
width: 24px;
height: 24px;
color: var(--color-text-white);
}
/* Service card body */
.s-services__card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.s-services__card-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.s-services__card-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-md);
}
.s-services__card-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-brand-primary);
margin-top: auto;
transition: gap var(--transition-fast);
}
.s-services__card-link::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.s-services__card:hover .s-services__card-link {
gap: var(--space-sm);
}
/* ------------------------------------------------------------------
Service detail blocks (services page)
------------------------------------------------------------------ */
.s-services__detail {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
align-items: center;
}
@media (min-width: 768px) {
.s-services__detail {
flex-direction: row;
gap: var(--space-3xl);
}
}
/* Reverse layout (alternate left/right) */
@media (min-width: 768px) {
.s-services__detail--reverse {
flex-direction: row-reverse;
}
}
.s-services__detail-image {
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (min-width: 768px) {
.s-services__detail-image {
width: 50%;
flex-shrink: 0;
}
}
.s-services__detail-image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
}
.s-services__detail-body {
flex: 1;
}
.s-services__detail-label {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.s-services__detail-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.s-services__detail-title {
font-size: var(--text-3xl);
}
}
.s-services__detail-text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-bottom: var(--space-lg);
}
/* ------------------------------------------------------------------
Feature list with checkmark icons
------------------------------------------------------------------ */
.s-services__features {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.s-services__feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
}
.s-services__feature-item::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
background-color: var(--color-brand-primary);
border-radius: var(--radius-full);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M4.5 7.09L1.91 4.5.5 5.91l4 4 8-8L11.09.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
/* ==========================================================================
Numbers / Counter Section
========================================================================== */
.s-numbers {
background-color: var(--color-bg-accent);
}
.s-numbers__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
@media (min-width: 768px) {
.s-numbers__grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
}
/* Number item */
.s-numbers__item {
text-align: center;
padding: var(--space-xl) var(--space-md);
position: relative;
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
transition:
transform 0.4s var(--ease-out-expo),
box-shadow 0.4s var(--ease-out-expo);
}
.s-numbers__item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
/* Desktop dividers removed — items are now individual cards */
/* Number value */
.s-numbers__value {
display: block;
font-family: var(--font-en);
font-size: var(--text-4xl);
font-weight: var(--fw-extrabold);
color: var(--color-brand-primary);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-sm);
}
@media (min-width: 540px) {
.s-numbers__value {
font-size: var(--text-5xl);
}
}
@media (min-width: 768px) {
.s-numbers__value {
font-size: 3.5rem;
}
}
/* Number unit / suffix */
.s-numbers__unit {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
@media (min-width: 768px) {
.s-numbers__unit {
font-size: var(--text-xl);
}
}
/* Number plus sign */
.s-numbers__plus {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
/* Label */
.s-numbers__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
letter-spacing: var(--tracking-wide);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.s-numbers__label {
font-size: var(--text-base);
}
}
/* Sub label / detail */
.s-numbers__sub {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
/* ------------------------------------------------------------------
Dark variant (on dark bg)
------------------------------------------------------------------ */
.s-numbers--dark {
background-color: var(--color-bg-dark);
}
.s-numbers--dark .s-numbers__item {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.s-numbers--dark .s-numbers__value {
color: var(--color-text-white);
}
.s-numbers--dark .s-numbers__unit {
color: var(--color-text-white);
}
.s-numbers--dark .s-numbers__plus {
color: var(--color-text-white);
}
.s-numbers--dark .s-numbers__label {
color: rgba(255, 255, 255, 0.8);
}
.s-numbers--dark .s-numbers__sub {
color: rgba(255, 255, 255, 0.5);
}
/* ------------------------------------------------------------------
Animation support (counters)
------------------------------------------------------------------ */
.s-numbers__value[data-count] {
transition: none;
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.s-numbers__item {
transition: none;
}
}
/* ==========================================================================
Testimonials Section
========================================================================== */
.s-testimonials {
overflow: hidden;
}
/* ------------------------------------------------------------------
Swiper container overrides
------------------------------------------------------------------ */
.s-testimonials .swiper {
padding-bottom: var(--space-3xl);
overflow: visible;
}
.s-testimonials .swiper-wrapper {
align-items: stretch;
}
.s-testimonials .swiper-slide {
height: auto;
}
/* ------------------------------------------------------------------
Testimonial card
------------------------------------------------------------------ */
.s-testimonials__card {
display: flex;
flex-direction: column;
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
height: 100%;
}
/* Quote icon */
.s-testimonials__quote-icon {
display: block;
width: 32px;
height: 32px;
margin-bottom: var(--space-md);
color: var(--color-brand-light);
}
.s-testimonials__quote-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* If no SVG, use CSS pseudo-element */
.s-testimonials__quote-icon::before {
content: "\201C";
font-family: Georgia, serif;
font-size: 3rem;
line-height: 1;
color: var(--color-brand-light);
}
.s-testimonials__quote-icon:empty::before {
display: block;
}
.s-testimonials__quote-icon svg + *::before {
display: none;
}
/* Quote text */
.s-testimonials__text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-bottom: var(--space-lg);
flex: 1;
}
/* Profile area */
.s-testimonials__profile {
display: flex;
align-items: center;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
.s-testimonials__avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
}
.s-testimonials__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s-testimonials__info {
flex: 1;
min-width: 0;
}
.s-testimonials__name {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
}
.s-testimonials__account {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
/* ------------------------------------------------------------------
Before / After metrics
------------------------------------------------------------------ */
.s-testimonials__metrics {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding: var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-md);
}
.s-testimonials__metric {
flex: 1;
text-align: center;
}
.s-testimonials__metric-label {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
letter-spacing: var(--tracking-wide);
}
.s-testimonials__metric-value {
display: block;
font-family: var(--font-en);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-none);
}
.s-testimonials__metric-unit {
font-size: var(--text-xs);
font-weight: var(--fw-regular);
color: var(--color-text-secondary);
font-family: var(--font-jp);
}
/* Arrow between before/after */
.s-testimonials__metric-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
flex-shrink: 0;
color: var(--color-brand-primary);
font-size: var(--text-xl);
}
.s-testimonials__metric-arrow::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-brand-primary);
border-top: 2px solid var(--color-brand-primary);
transform: rotate(45deg);
}
/* After metric highlight */
.s-testimonials__metric--after .s-testimonials__metric-value {
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Swiper pagination dots
------------------------------------------------------------------ */
.s-testimonials .swiper-pagination {
bottom: 0;
}
.s-testimonials .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: var(--color-border);
opacity: 1;
transition:
background-color var(--transition-fast),
width var(--transition-fast);
border-radius: var(--radius-full);
}
.s-testimonials .swiper-pagination-bullet-active {
width: 28px;
border-radius: 5px;
background-color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Swiper navigation arrows
------------------------------------------------------------------ */
.s-testimonials .swiper-button-prev,
.s-testimonials .swiper-button-next {
width: 48px;
height: 48px;
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.s-testimonials .swiper-button-prev:hover,
.s-testimonials .swiper-button-next:hover {
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
box-shadow: var(--shadow-md);
}
.s-testimonials .swiper-button-prev::after,
.s-testimonials .swiper-button-next::after {
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
transition: color var(--transition-fast);
}
.s-testimonials .swiper-button-prev:hover::after,
.s-testimonials .swiper-button-next:hover::after {
color: var(--color-text-white);
}
/* Hide arrows on mobile */
@media (max-width: 767px) {
.s-testimonials .swiper-button-prev,
.s-testimonials .swiper-button-next {
display: none;
}
.s-testimonials__card {
padding: var(--space-lg);
}
.s-testimonials__text {
font-size: var(--text-xs);
margin-bottom: var(--space-md);
}
.s-testimonials__avatar {
width: 40px;
height: 40px;
}
.s-testimonials__name {
font-size: var(--text-xs);
}
.s-testimonials__metrics {
padding: var(--space-sm);
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.s-testimonials__metric-value {
font-size: var(--text-lg);
}
.s-testimonials__metric-arrow {
width: 24px;
}
}
/* ==========================================================================
Timeline
========================================================================== */
.s-timeline {
position: relative;
padding: var(--space-xl) 0;
}
/* ------------------------------------------------------------------
Vertical line
------------------------------------------------------------------ */
/* Mobile: line on the left */
.s-timeline::before {
content: "";
position: absolute;
top: 0;
left: 20px;
width: 2px;
height: 100%;
background-color: var(--color-border);
}
/* Desktop: line in center */
@media (min-width: 768px) {
.s-timeline::before {
left: 50%;
transform: translateX(-50%);
}
}
/* ------------------------------------------------------------------
Timeline item
------------------------------------------------------------------ */
.s-timeline__item {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: var(--space-2xl);
padding-left: 52px;
}
.s-timeline__item:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.s-timeline__item {
padding-left: 0;
width: 50%;
margin-left: auto;
padding-left: calc(var(--space-3xl) + 12px);
}
/* Alternate left side */
.s-timeline__item:nth-child(odd) {
margin-left: 0;
margin-right: auto;
padding-left: 0;
padding-right: calc(var(--space-3xl) + 12px);
text-align: right;
justify-content: flex-end;
}
}
/* ------------------------------------------------------------------
Year marker / dot on the line
------------------------------------------------------------------ */
.s-timeline__dot {
position: absolute;
left: 12px;
top: 4px;
width: 18px;
height: 18px;
background-color: var(--color-bg-white);
border: 3px solid var(--color-brand-primary);
border-radius: var(--radius-full);
z-index: var(--z-base);
}
@media (min-width: 768px) {
.s-timeline__dot {
left: auto;
right: -9px;
}
.s-timeline__item:nth-child(odd) .s-timeline__dot {
right: auto;
left: -9px;
}
/* Center the dot on the line for even items */
.s-timeline__item:nth-child(even) .s-timeline__dot {
left: -9px;
}
}
/* Active dot */
.s-timeline__dot--active {
background-color: var(--color-brand-primary);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}
/* ------------------------------------------------------------------
Year label
------------------------------------------------------------------ */
.s-timeline__year {
position: absolute;
left: 0;
top: 0;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-wide);
}
@media (min-width: 768px) {
.s-timeline__year {
position: static;
display: none;
}
}
/* Desktop: show year as marker on line */
.s-timeline__year-marker {
display: none;
}
@media (min-width: 768px) {
.s-timeline__year-marker {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 64px;
height: 32px;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
z-index: calc(var(--z-base) + 1);
}
.s-timeline__item:nth-child(odd) .s-timeline__year-marker {
right: calc(-32px - 0px);
left: auto;
}
.s-timeline__item:nth-child(even) .s-timeline__year-marker {
left: calc(-32px - 0px);
right: auto;
}
}
/* ------------------------------------------------------------------
Content block
------------------------------------------------------------------ */
.s-timeline__content {
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
width: 100%;
}
.s-timeline__content-year {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-xs);
}
.s-timeline__title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.s-timeline__text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Image in timeline */
.s-timeline__image {
margin-bottom: var(--space-md);
border-radius: var(--radius-md);
overflow: hidden;
}
.s-timeline__image img {
width: 100%;
height: auto;
}
/* ------------------------------------------------------------------
Connector line from dot to content (desktop)
------------------------------------------------------------------ */
@media (min-width: 768px) {
.s-timeline__content::before {
content: "";
position: absolute;
top: 10px;
width: var(--space-xl);
height: 2px;
background-color: var(--color-border);
}
.s-timeline__item:nth-child(even) .s-timeline__content::before {
left: calc(var(--space-xl) * -1 - 12px);
right: auto;
}
.s-timeline__item:nth-child(odd) .s-timeline__content::before {
right: calc(var(--space-xl) * -1 - 12px);
left: auto;
}
}
/* ==========================================================================
CTA Banner Sections
========================================================================== */
.s-cta {
background-color: var(--color-bg-accent);
padding: var(--section-padding) 0;
text-align: center;
position: relative;
overflow: hidden;
}
/* Decorative background pattern */
.s-cta::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.02);
pointer-events: none;
}
.s-cta::after {
content: "";
position: absolute;
bottom: -30%;
left: -5%;
width: 300px;
height: 300px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.02);
pointer-events: none;
}
/* Content */
.s-cta__content {
position: relative;
z-index: var(--z-base);
max-width: 700px;
margin: 0 auto;
}
/* English label */
.s-cta__label {
display: block;
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-muted);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
/* Heading */
.s-cta__title {
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wider);
}
/* Description */
.s-cta__text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
/* Button area */
.s-cta__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.s-cta__actions {
flex-direction: row;
justify-content: center;
}
}
/* Note text below button */
.s-cta__note {
display: block;
margin-top: var(--space-md);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Dark variant */
.s-cta--dark {
background-color: var(--color-bg-accent);
}
.s-cta--dark::before,
.s-cta--dark::after {
background-color: rgba(0, 0, 0, 0.01);
}
/* With background image */
.s-cta--bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.s-cta--bg::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(26, 26, 26, 0.85);
border-radius: 0;
}
/* Inline CTA (smaller, within content) */
.s-cta--inline {
padding: var(--space-2xl) 0;
border-radius: var(--radius-xl);
margin: var(--space-2xl) 0;
}
.s-cta--inline .s-cta__title {
font-size: var(--text-2xl);
}
/* ==========================================================================
Final CTA Section - immersive dark with dramatic contrast
========================================================================== */
.s-cta-final {
position: relative;
padding: var(--section-padding-lg) 0;
overflow: hidden;
background: linear-gradient(180deg, #252525 0%, #202020 100%);
}
/* Animated gradient border at top */
.s-cta-final::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 20%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.06) 80%,
transparent 100%
);
background-size: 200% 100%;
animation: ctaBorderShimmer 4s ease-in-out infinite;
}
@keyframes ctaBorderShimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
/* Background layer */
.s-cta-final__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.s-cta-final__gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
linear-gradient(160deg, #252525 0%, #222222 50%, #202020 100%);
background-size: 200% 200%, 200% 200%, 100% 100%;
animation: heroGradientMesh 16s ease infinite;
}
.s-cta-final__grain {
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* Decorative floating orbs - warm subtle tones on dark */
.s-cta-final__orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: orbFloat 20s ease-in-out infinite;
}
.s-cta-final__orb--1 {
width: 350px;
height: 350px;
top: -20%;
left: -12%;
background: radial-gradient(circle, rgba(180, 140, 100, 0.06) 0%, transparent 70%);
animation-duration: 16s;
}
.s-cta-final__orb--2 {
width: 280px;
height: 280px;
bottom: -15%;
right: -10%;
background: radial-gradient(circle, rgba(140, 160, 200, 0.04) 0%, transparent 70%);
animation-delay: 5s;
animation-duration: 20s;
}
/* Content */
.s-cta-final__inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.s-cta-final__heading {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: var(--fw-bold);
color: #ffffff;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.s-cta-final__heading {
font-size: var(--text-5xl);
}
}
.s-cta-final__text {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
.s-cta-final__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.s-cta-final__actions {
flex-direction: row;
justify-content: center;
}
}
/* Decorative corner lines - light on dark */
.s-cta-final__inner::before,
.s-cta-final__inner::after {
content: "";
position: absolute;
width: 48px;
height: 48px;
pointer-events: none;
}
.s-cta-final__inner::before {
top: calc(var(--space-xl) * -1);
left: calc(var(--space-xl) * -1);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.s-cta-final__inner::after {
bottom: calc(var(--space-xl) * -1);
right: calc(var(--space-xl) * -1);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 767px) {
.s-cta-final__inner::before,
.s-cta-final__inner::after {
display: none;
}
}
/* CTA buttons on dark background */
.s-cta-final .c-btn--primary {
background-color: #ffffff;
color: #0a0a0a;
border-color: #ffffff;
}
.s-cta-final .c-btn--primary:hover {
background-color: rgba(255, 255, 255, 0.9);
color: #0a0a0a;
border-color: rgba(255, 255, 255, 0.9);
}
.s-cta-final .c-btn--ghost {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}
.s-cta-final .c-btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.5);
}
/* Section label on dark */
.s-cta-final .c-section-label {
color: rgba(255, 255, 255, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.s-cta-final__gradient {
animation: none;
}
.s-cta-final__orb {
animation: none;
}
.s-cta-final::after {
animation: none;
}
}
/* ==========================================================================
MVV (Mission / Vision / Value) Section
========================================================================== */
/* --- MVV Container --- */
.s-mvv {
position: relative;
overflow: visible;
}
.s-mvv__intro {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-4xl);
}
.s-mvv__tagline {
display: inline-flex;
align-items: center;
gap: var(--space-md);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-ultra);
text-transform: uppercase;
margin-bottom: var(--space-lg);
}
.s-mvv__tagline::before,
.s-mvv__tagline::after {
content: "";
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-brand-primary));
flex-shrink: 0;
}
.s-mvv__tagline::after {
background: linear-gradient(90deg, var(--color-brand-primary), transparent);
}
.s-mvv__slogan {
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
.s-mvv__slogan-highlight {
color: var(--color-brand-primary);
}
.s-mvv__intro-text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* --- Logo Display --- */
.s-mvv__logo {
display: flex;
justify-content: center;
margin-bottom: var(--space-3xl);
}
.s-mvv__logo img,
.s-mvv__logo svg {
max-width: 280px;
height: auto;
}
/* --- Vision & Mission Grid --- */
.s-mvv__vm-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
margin-bottom: var(--space-4xl);
}
@media (min-width: 768px) {
.s-mvv__vm-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3xl);
}
.s-mvv__block {
padding: var(--space-3xl) var(--space-2xl);
}
}
/* --- Vision / Mission Block --- */
.s-mvv__block {
position: relative;
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
transition:
transform 0.5s var(--ease-out-expo),
box-shadow 0.5s var(--ease-out-expo),
border-color 0.5s var(--ease-out-expo);
}
.s-mvv__block:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border);
}
/* Top accent bar */
.s-mvv__block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
}
/* Block label */
.s-mvv__block-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-lg);
padding: var(--space-xs) var(--space-md);
background: var(--color-bg-accent);
border-radius: var(--radius-full);
}
.s-mvv__block-label-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
/* Block heading */
.s-mvv__block-heading {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-md);
}
@media (min-width: 768px) {
.s-mvv__block-heading {
font-size: var(--text-2xl);
}
}
/* Block description */
.s-mvv__block-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-xl);
}
/* --- Pillars (Vision sub-items) --- */
.s-mvv__pillars {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.s-mvv__pillar {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md);
background: var(--color-bg-accent);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-brand-primary);
transition:
background-color 0.3s,
transform 0.3s var(--ease-out-expo);
}
.s-mvv__pillar:hover {
background: var(--color-bg-muted);
transform: translateX(4px);
}
.s-mvv__pillar-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-bg-white);
border: 2px solid var(--color-brand-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
.s-mvv__pillar-content {
flex: 1;
min-width: 0;
}
.s-mvv__pillar-title {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: 2px;
}
.s-mvv__pillar-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* --- Mission Points --- */
.s-mvv__points {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.s-mvv__point {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.s-mvv__point-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
flex-shrink: 0;
}
.s-mvv__point-content {
flex: 1;
}
.s-mvv__point-title {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
margin-bottom: 4px;
}
.s-mvv__point-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ==========================================================================
Value Section - Seven Value Credo
========================================================================== */
.s-mvv__values {
position: relative;
}
.s-mvv__values-header {
text-align: center;
margin-bottom: var(--space-3xl);
}
.s-mvv__values-label {
display: inline-flex;
align-items: center;
gap: var(--space-md);
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-ultra);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.s-mvv__values-title {
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-sm);
}
.s-mvv__values-subtitle {
font-family: var(--font-en);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
}
/* --- Value Cards Grid --- */
.s-mvv__values-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 640px) {
.s-mvv__values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.s-mvv__values-grid {
grid-template-columns: repeat(3, 1fr);
}
/* First row: 3 cards, second row: 2 cards centered, third row: 2 cards centered */
.s-mvv__value-card:nth-child(4) {
grid-column: 1 / 2;
}
}
/* --- Individual Value Card --- */
.s-mvv__value-card {
position: relative;
background: var(--color-bg-white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border-light);
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.3s;
overflow: hidden;
}
.s-mvv__value-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-brand-primary);
}
/* Number badge */
.s-mvv__value-number {
position: absolute;
top: var(--space-md);
right: var(--space-md);
font-family: var(--font-en);
font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
font-weight: var(--fw-black);
color: var(--color-brand-primary);
opacity: 0.06;
line-height: 1;
pointer-events: none;
}
/* Card icon */
.s-mvv__value-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
color: #fff;
font-size: 20px;
position: relative;
}
.s-mvv__value-icon::after {
content: "";
position: absolute;
inset: -4px;
border-radius: calc(var(--radius-md) + 4px);
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
opacity: 0;
filter: blur(8px);
z-index: -1;
transition: opacity 0.4s;
}
.s-mvv__value-card:hover .s-mvv__value-icon::after {
opacity: 0.25;
}
/* Card title */
.s-mvv__value-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-xs);
}
/* Card English subtitle */
.s-mvv__value-en {
font-family: var(--font-en);
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-md);
}
/* Card description */
.s-mvv__value-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Hover accent line at bottom */
.s-mvv__value-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease-out-expo);
}
.s-mvv__value-card:hover::after {
transform: scaleX(1);
}
/* --- Section Connector Line --- */
.s-mvv__connector {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl) 0;
}
.s-mvv__connector-line {
width: 1px;
height: 48px;
background: linear-gradient(180deg, var(--color-border), transparent);
border-radius: 1px;
}
/* --- Responsive adjustments --- */
@media (max-width: 767px) {
.s-mvv__block {
padding: var(--space-xl) var(--space-lg);
}
.s-mvv__slogan {
font-size: var(--text-2xl);
}
.s-mvv__values-title {
font-size: var(--text-2xl);
}
.s-mvv__value-card {
padding: var(--space-lg);
}
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.s-mvv__block,
.s-mvv__value-card,
.s-mvv__pillar {
transition: none;
}
.s-mvv__value-card::after {
transition: none;
}
}
/* ==========================================================================
News Section
========================================================================== */
/* ------------------------------------------------------------------
News list (top page, horizontal style)
------------------------------------------------------------------ */
.s-news__list {
display: flex;
flex-direction: column;
}
.s-news__item {
display: flex;
flex-direction: column;
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
transition: background-color var(--transition-fast);
}
.s-news__item:first-child {
border-top: 1px solid var(--color-border);
}
@media (min-width: 540px) {
.s-news__item {
flex-direction: row;
align-items: center;
gap: var(--space-lg);
}
}
/* Link wrapper */
a.s-news__item:hover {
background-color: var(--color-bg-accent);
padding-left: var(--space-md);
padding-right: var(--space-md);
margin-left: calc(var(--space-md) * -1);
margin-right: calc(var(--space-md) * -1);
border-radius: var(--radius-md);
}
/* Date */
.s-news__date {
font-family: var(--font-en);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
flex-shrink: 0;
white-space: nowrap;
margin-bottom: var(--space-xs);
}
@media (min-width: 540px) {
.s-news__date {
margin-bottom: 0;
min-width: 100px;
}
}
/* Category badge */
.s-news__category {
display: inline-block;
padding: 3px 12px;
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
background-color: var(--color-bg-accent);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
flex-shrink: 0;
white-space: nowrap;
margin-bottom: var(--space-xs);
margin-right: var(--space-sm);
}
@media (min-width: 540px) {
.s-news__category {
margin-bottom: 0;
min-width: 80px;
text-align: center;
}
}
/* Different category colors */
.s-news__category--important {
background-color: rgba(229, 57, 53, 0.1);
color: var(--color-error);
}
.s-news__category--event {
background-color: rgba(33, 150, 243, 0.1);
color: var(--color-info);
}
/* Title */
.s-news__title {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-snug);
flex: 1;
transition: color var(--transition-fast);
}
a.s-news__item:hover .s-news__title {
color: var(--color-brand-primary);
}
/* Meta row (mobile) */
.s-news__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
@media (min-width: 540px) {
.s-news__meta {
margin-bottom: 0;
gap: var(--space-md);
}
}
/* Arrow indicator */
.s-news__arrow {
display: none;
flex-shrink: 0;
width: 6px;
height: 6px;
border-right: 2px solid var(--color-text-muted);
border-top: 2px solid var(--color-text-muted);
transform: rotate(45deg);
margin-left: var(--space-sm);
transition: border-color var(--transition-fast);
}
@media (min-width: 540px) {
.s-news__arrow {
display: block;
}
}
a.s-news__item:hover .s-news__arrow {
border-color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
News archive grid
------------------------------------------------------------------ */
.s-news__archive-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.s-news__archive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.s-news__archive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ------------------------------------------------------------------
"View all" link
------------------------------------------------------------------ */
.s-news__more {
display: flex;
justify-content: center;
margin-top: var(--space-2xl);
}
/* ------------------------------------------------------------------
Empty state
------------------------------------------------------------------ */
.s-news__empty {
text-align: center;
padding: var(--space-3xl) 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ==========================================================================
Horizontal Scroll Section - Pin-and-scroll horizontal gallery
========================================================================== */
/* ------------------------------------------------------------------
Outer container: sets the scroll height
------------------------------------------------------------------ */
.s-horizontal {
position: relative;
width: 100%;
overflow: hidden;
}
/* ------------------------------------------------------------------
Sticky viewport
------------------------------------------------------------------ */
.s-horizontal__viewport {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* ------------------------------------------------------------------
Horizontal track (flex row of panels)
------------------------------------------------------------------ */
.s-horizontal__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100vh;
will-change: transform;
}
/* ------------------------------------------------------------------
Individual panels
------------------------------------------------------------------ */
.s-horizontal__panel {
flex: 0 0 100vw;
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Panel content wrapper */
.s-horizontal__panel-content {
max-width: var(--container-default);
width: 100%;
padding: 0 var(--container-padding);
margin: 0 auto;
}
/* Panel with image background */
.s-horizontal__panel--image {
background-size: cover;
background-position: center;
}
.s-horizontal__panel--image::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-overlay-dark);
z-index: 0;
}
.s-horizontal__panel--image .s-horizontal__panel-content {
position: relative;
z-index: 1;
color: var(--color-text-white);
}
/* Panel background color variants */
.s-horizontal__panel--dark {
background-color: var(--color-bg-dark);
color: var(--color-text-white);
}
.s-horizontal__panel--accent {
background-color: var(--color-bg-accent);
}
.s-horizontal__panel--brand {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
/* ------------------------------------------------------------------
Section header (before the horizontal scroll)
------------------------------------------------------------------ */
.s-horizontal__header {
text-align: center;
padding: var(--section-padding) var(--container-padding) var(--space-2xl);
max-width: var(--container-default);
margin: 0 auto;
}
/* ------------------------------------------------------------------
Progress indicator dots
------------------------------------------------------------------ */
.s-horizontal__progress {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
z-index: 10;
}
.s-horizontal__dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background-color: var(--color-border);
transition: background-color 0.3s ease,
transform 0.3s ease,
width 0.3s ease;
cursor: pointer;
}
.s-horizontal__dot.is-active {
background-color: var(--color-brand-primary);
transform: scale(1.2);
width: 24px;
border-radius: 5px;
}
/* ------------------------------------------------------------------
Progress bar variant (line instead of dots)
------------------------------------------------------------------ */
.s-horizontal__bar {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 3px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
z-index: 10;
}
.s-horizontal__bar-fill {
height: 100%;
background-color: var(--color-brand-primary);
border-radius: 3px;
transition: width 0.1s linear;
width: 0%;
}
/* ------------------------------------------------------------------
Panel counter (e.g., 01/05)
------------------------------------------------------------------ */
.s-horizontal__counter {
position: absolute;
bottom: 32px;
right: 32px;
font-family: var(--font-en);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
z-index: 10;
}
.s-horizontal__counter-current {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Mobile: stack vertically (no horizontal scroll)
------------------------------------------------------------------ */
@media (max-width: 768px) {
.s-horizontal {
height: auto !important;
}
.s-horizontal__viewport {
position: relative;
height: auto;
}
.s-horizontal__track {
flex-direction: column;
height: auto;
transform: none !important;
}
.s-horizontal__panel {
flex: 0 0 auto;
width: 100%;
height: auto;
min-height: 80vh;
padding: var(--section-padding) 0;
}
.s-horizontal__progress,
.s-horizontal__bar,
.s-horizontal__counter {
display: none;
}
}
/* ==========================================================================
Front Page - Top page specific styles
========================================================================== */
/* ------------------------------------------------------------------
Section divider - organic wave between sections
------------------------------------------------------------------ */
.c-section-divider {
display: block;
width: 100%;
height: auto;
line-height: 0;
margin-top: -1px;
color: var(--color-bg);
position: relative;
z-index: 2;
}
.c-section-divider svg {
display: block;
width: 100%;
height: clamp(40px, 5vw, 80px);
}
/* ------------------------------------------------------------------
Decoration elements
------------------------------------------------------------------ */
.c-decoration {
position: absolute;
pointer-events: none;
color: var(--color-brand-primary);
z-index: 0;
}
.c-decoration--top-right {
top: var(--space-xl);
right: var(--space-xl);
}
.c-decoration--top-left {
top: var(--space-xl);
left: var(--space-xl);
}
.c-decoration--bottom-left {
bottom: var(--space-xl);
left: var(--space-xl);
}
.c-decoration--bottom-right {
bottom: var(--space-xl);
right: var(--space-xl);
}
/* Hide decorations on mobile for cleaner layout */
@media (max-width: 767px) {
.c-decoration {
display: none;
}
}
/* ------------------------------------------------------------------
Section position context for decorations
------------------------------------------------------------------ */
.s-mission,
.s-services,
.s-testimonials,
.s-faq {
position: relative;
overflow: hidden;
}
/* ------------------------------------------------------------------
Concept / Intro section
------------------------------------------------------------------ */
.p-front__concept {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.p-front__concept-lead {
font-size: var(--text-xl);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-loose);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
.p-front__concept-text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
/* ------------------------------------------------------------------
Section "more" link
------------------------------------------------------------------ */
.p-front__section-more {
display: flex;
justify-content: center;
margin-top: var(--space-2xl);
}
/* ------------------------------------------------------------------
News area (limited items)
------------------------------------------------------------------ */
.p-front__news {
max-width: var(--container-narrow);
margin: 0 auto;
}
/* ------------------------------------------------------------------
Accent section smooth blend
------------------------------------------------------------------ */
.l-section--accent {
position: relative;
}
.l-section--accent::before {
content: "";
position: absolute;
top: -40px;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, transparent, var(--color-bg-accent));
pointer-events: none;
}
.l-section--accent::after {
content: "";
position: absolute;
bottom: -40px;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to top, transparent, var(--color-bg-accent));
pointer-events: none;
}
/* ------------------------------------------------------------------
Section number counter - architectural numbering
------------------------------------------------------------------ */
.s-mission,
.s-services,
.s-faq,
.s-news {
counter-increment: section-counter;
}
.s-mission::before,
.s-services::before,
.s-faq::before {
content: "0" counter(section-counter);
position: absolute;
top: var(--section-padding-sm);
left: var(--container-padding);
font-family: var(--font-en);
font-size: clamp(6rem, 4rem + 6vw, 10rem);
font-weight: var(--fw-black);
color: var(--color-brand-primary);
opacity: 0.03;
line-height: 1;
z-index: 0;
pointer-events: none;
letter-spacing: -0.05em;
}
/* ------------------------------------------------------------------
Section separator line with gradient
------------------------------------------------------------------ */
.c-section-line {
display: block;
width: 100%;
max-width: var(--container-default);
height: 1px;
margin: 0 auto;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-border-light) 20%,
var(--color-brand-light) 50%,
var(--color-border-light) 80%,
transparent 100%
);
border: none;
}
/* ------------------------------------------------------------------
Background texture patterns
------------------------------------------------------------------ */
/* Dot pattern for accent sections */
.l-section--accent::after {
background-image: radial-gradient(
circle at 1px 1px,
rgba(0, 0, 0, 0.01) 1px,
transparent 0
);
background-size: 24px 24px;
}
/* Diagonal line texture on dark sections */
.l-section--dark::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.015;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.5) 10px,
rgba(255, 255, 255, 0.5) 11px
);
z-index: 0;
}
/* ------------------------------------------------------------------
Enhanced section transitions
------------------------------------------------------------------ */
.s-mission,
.s-services,
.s-testimonials,
.s-news,
.s-faq {
background-image:
radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.008) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.002) 0%, transparent 50%);
}
/* ------------------------------------------------------------------
SP only break
------------------------------------------------------------------ */
.u-sp-only {
display: inline;
}
@media (min-width: 768px) {
.u-sp-only {
display: none;
}
}
/* ------------------------------------------------------------------
Front page mobile adjustments
------------------------------------------------------------------ */
@media (max-width: 767px) {
.p-front__concept-lead {
font-size: var(--text-lg);
letter-spacing: var(--tracking-wide);
}
.p-front__concept-text {
font-size: var(--text-sm);
}
.p-front__section-more {
margin-top: var(--space-xl);
}
/* Section counters smaller on mobile */
.s-mission::before,
.s-services::before,
.s-faq::before {
font-size: 4rem;
}
/* Reduce gradient blend height */
.l-section--accent::before,
.l-section--accent::after {
height: 24px;
}
}
/* ==========================================================================
About Page
========================================================================== */
/* ------------------------------------------------------------------
CEO profile section
------------------------------------------------------------------ */
.p-about__ceo {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
align-items: center;
}
@media (min-width: 768px) {
.p-about__ceo {
flex-direction: row;
gap: var(--space-3xl);
align-items: flex-start;
}
}
/* CEO image */
.p-about__ceo-image {
width: 100%;
max-width: 360px;
flex-shrink: 0;
}
.p-about__ceo-image img {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-light);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.02),
0 12px 28px rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
.p-about__ceo-image {
width: 40%;
max-width: none;
}
}
/* CEO bio */
.p-about__ceo-body {
flex: 1;
min-width: 0;
}
.p-about__ceo-position {
display: inline-block;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
padding: var(--space-xs) var(--space-md);
background: var(--color-bg-accent);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
}
.p-about__ceo-name {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
line-height: var(--leading-tight);
}
@media (min-width: 768px) {
.p-about__ceo-name {
font-size: var(--text-3xl);
}
}
.p-about__ceo-name-en {
font-family: var(--font-en);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
padding-bottom: var(--space-lg);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border-light);
}
.p-about__ceo-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-bottom: var(--space-md);
}
@media (min-width: 768px) {
.p-about__ceo-text {
font-size: var(--text-base);
}
}
.p-about__ceo-text + .p-about__ceo-text {
margin-top: var(--space-md);
}
/* ------------------------------------------------------------------
SNS links row
------------------------------------------------------------------ */
.p-about__sns {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.p-about__sns-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background-color: var(--color-bg-accent);
color: var(--color-text-secondary);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.p-about__sns-link:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-about__sns-link svg,
.p-about__sns-link img {
width: 20px;
height: 20px;
}
/* ------------------------------------------------------------------
Philosophy / Mission section
------------------------------------------------------------------ */
.p-about__philosophy {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.p-about__philosophy-quote {
position: relative;
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
padding: var(--space-2xl) 0;
}
@media (min-width: 768px) {
.p-about__philosophy-quote {
font-size: var(--text-2xl);
}
}
@media (min-width: 1024px) {
.p-about__philosophy-quote {
font-size: var(--text-3xl);
}
}
/* Decorative quote marks */
.p-about__philosophy-quote::before {
content: "\201C";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-family: Georgia, serif;
font-size: 5rem;
color: var(--color-brand-light);
line-height: 1;
opacity: 0.5;
}
.p-about__philosophy-desc {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-top: var(--space-xl);
}
/* ------------------------------------------------------------------
Mission / Vision cards
------------------------------------------------------------------ */
.p-about__values {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.p-about__values {
grid-template-columns: repeat(2, 1fr);
}
}
.p-about__value-card {
background-color: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
text-align: center;
box-shadow: var(--shadow-card);
transition:
transform 0.4s var(--ease-out-expo),
box-shadow 0.4s var(--ease-out-expo),
border-color 0.4s var(--ease-out-expo);
}
.p-about__value-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border);
}
.p-about__value-label {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.p-about__value-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-about__value-title {
font-size: var(--text-xl);
}
}
.p-about__value-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Company info section
------------------------------------------------------------------ */
.p-about__company {
max-width: var(--container-narrow);
margin: 0 auto;
}
/* ------------------------------------------------------------------
Access / Map
------------------------------------------------------------------ */
.p-about__map {
width: 100%;
height: 300px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
overflow: hidden;
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.p-about__map {
height: 400px;
}
}
.p-about__map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ==========================================================================
Single Post Page
========================================================================== */
/* Article container */
.p-single__article {
max-width: 800px;
margin: 0 auto;
padding-top: var(--space-2xl);
}
/* ------------------------------------------------------------------
Article header
------------------------------------------------------------------ */
.p-single__header {
margin-bottom: var(--space-2xl);
}
.p-single__category {
display: inline-block;
padding: var(--space-xs) var(--space-md);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
background-color: var(--color-bg-accent);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-md);
}
.p-single__title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wide);
}
@media (min-width: 768px) {
.p-single__title {
font-size: var(--text-3xl);
}
}
.p-single__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.p-single__date {
font-family: var(--font-en);
letter-spacing: var(--tracking-wide);
}
.p-single__updated {
font-family: var(--font-en);
}
.p-single__updated::before {
content: "(";
}
.p-single__updated::after {
content: ")";
}
/* Featured image */
.p-single__thumbnail {
width: 100%;
margin-bottom: var(--space-2xl);
border-radius: var(--radius-lg);
overflow: hidden;
}
.p-single__thumbnail img {
width: 100%;
height: auto;
}
/* ------------------------------------------------------------------
Post content typography
------------------------------------------------------------------ */
.p-single__content {
font-size: var(--text-base);
line-height: var(--leading-loose);
color: var(--color-text-primary);
letter-spacing: var(--tracking-wide);
}
.p-single__content > * + * {
margin-top: 1.5em;
}
/* Paragraphs */
.p-single__content p {
line-height: var(--leading-loose);
}
/* Headings */
.p-single__content h2 {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-top: 3em;
margin-bottom: 1em;
padding-bottom: var(--space-sm);
border-bottom: 3px solid var(--color-brand-primary);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-single__content h2 {
font-size: var(--text-2xl);
}
}
.p-single__content h3 {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-top: 2.5em;
margin-bottom: 0.8em;
padding-left: var(--space-md);
border-left: 4px solid var(--color-brand-primary);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-single__content h3 {
font-size: var(--text-xl);
}
}
.p-single__content h4 {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-top: 2em;
margin-bottom: 0.5em;
}
@media (min-width: 768px) {
.p-single__content h4 {
font-size: var(--text-lg);
}
}
/* Lists */
.p-single__content ul {
list-style: none;
padding-left: 0;
}
.p-single__content ul li {
position: relative;
padding-left: 1.5em;
line-height: var(--leading-relaxed);
}
.p-single__content ul li + li {
margin-top: 0.5em;
}
.p-single__content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background-color: var(--color-brand-primary);
}
.p-single__content ol {
padding-left: 1.5em;
counter-reset: ol-counter;
list-style: none;
}
.p-single__content ol li {
position: relative;
padding-left: 0.5em;
counter-increment: ol-counter;
line-height: var(--leading-relaxed);
}
.p-single__content ol li + li {
margin-top: 0.5em;
}
.p-single__content ol li::before {
content: counter(ol-counter) ".";
position: absolute;
left: -1.5em;
font-family: var(--font-en);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
/* Blockquote */
.p-single__content blockquote {
border-left: 4px solid var(--color-brand-primary);
padding: var(--space-lg) var(--space-xl);
margin: 2em 0;
background-color: var(--color-bg-accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: normal;
}
.p-single__content blockquote p {
color: var(--color-text-secondary);
}
/* Images */
.p-single__content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.p-single__content figure {
margin: 2em 0;
}
.p-single__content figure img {
width: 100%;
}
.p-single__content figcaption {
margin-top: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
/* Table in content */
.p-single__content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: var(--text-sm);
}
.p-single__content th,
.p-single__content td {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
text-align: left;
}
.p-single__content th {
background-color: var(--color-bg-accent);
font-weight: var(--fw-bold);
}
/* Embed / iframe */
.p-single__content iframe {
max-width: 100%;
margin: 1.5em 0;
}
.p-single__content .wp-block-embed {
margin: 2em 0;
}
.p-single__content .wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.p-single__content .wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
/* ------------------------------------------------------------------
Author box
------------------------------------------------------------------ */
.p-single__author-box {
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding: var(--space-xl);
background-color: var(--color-bg-accent);
border-radius: var(--radius-lg);
margin-top: var(--space-3xl);
}
@media (min-width: 540px) {
.p-single__author-box {
flex-direction: row;
align-items: flex-start;
}
}
.p-single__author-avatar {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
}
.p-single__author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-single__author-info {
flex: 1;
}
.p-single__author-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.p-single__author-name {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
.p-single__author-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Author SNS links */
.p-single__author-sns {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.p-single__author-sns a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--color-bg);
color: var(--color-text-muted);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.p-single__author-sns a:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-single__author-sns a svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ------------------------------------------------------------------
Share buttons
------------------------------------------------------------------ */
.p-single__share {
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border);
}
.p-single__share-title {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
text-align: center;
letter-spacing: var(--tracking-wide);
}
.p-single__share-buttons {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-md);
}
.p-single__share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
color: var(--color-text-white);
text-decoration: none;
flex-shrink: 0;
transition:
opacity var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.p-single__share-btn:hover {
opacity: 0.85;
transform: translateY(-2px);
color: var(--color-text-white);
box-shadow: var(--shadow-md);
}
.p-single__share-btn:active {
transform: translateY(0);
}
.p-single__share-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.p-single__share-btn--x {
background-color: #1a1a1a;
}
.p-single__share-btn--facebook {
background-color: #1877f2;
}
.p-single__share-btn--line {
background-color: #06c755;
}
.p-single__share-btn--hatena {
background-color: #00a4de;
}
.p-single__share-btn--copy {
background-color: var(--color-text-secondary);
}
/* Mobile: smaller share buttons for tight viewports */
@media (max-width: 374px) {
.p-single__share-buttons {
gap: var(--space-sm);
}
.p-single__share-btn {
width: 40px;
height: 40px;
}
.p-single__share-btn svg {
width: 16px;
height: 16px;
}
}
/* ------------------------------------------------------------------
Related posts
------------------------------------------------------------------ */
.p-single__related {
margin-top: var(--space-4xl);
padding-top: var(--space-3xl);
border-top: 1px solid var(--color-border);
}
.p-single__related-title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xl);
text-align: center;
}
.p-single__related-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-single__related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.p-single__related-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ------------------------------------------------------------------
Post navigation (prev/next)
------------------------------------------------------------------ */
.p-single__nav {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-2xl);
}
@media (min-width: 540px) {
.p-single__nav {
flex-direction: row;
justify-content: space-between;
}
}
.p-single__nav-item {
flex: 1;
padding: var(--space-md);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.p-single__nav-item:hover {
border-color: var(--color-brand-primary);
box-shadow: var(--shadow-sm);
}
.p-single__nav-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.p-single__nav-title {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.p-single__nav-item--next {
text-align: right;
}
/* ==========================================================================
Archive / Listing Page
========================================================================== */
/* ------------------------------------------------------------------
Archive header
------------------------------------------------------------------ */
.p-archive__header {
margin-bottom: var(--space-2xl);
}
.p-archive__title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
@media (min-width: 768px) {
.p-archive__title {
font-size: var(--text-2xl);
}
}
.p-archive__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
.p-archive__count {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-sm);
}
.p-archive__count span {
font-family: var(--font-en);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Category filter tabs
------------------------------------------------------------------ */
.p-archive__filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-2xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.p-archive__filter-label {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-right: var(--space-sm);
}
.p-archive__filter-btn {
display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
white-space: nowrap;
}
.p-archive__filter-btn:hover {
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
.p-archive__filter-btn.is-active {
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-archive__filter-count {
font-size: var(--text-xs);
margin-left: var(--space-xs);
opacity: 0.7;
}
/* ------------------------------------------------------------------
Post grid
------------------------------------------------------------------ */
.p-archive__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-archive__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-archive__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* List view variant */
.p-archive__grid--list {
grid-template-columns: 1fr;
gap: var(--space-md);
}
/* ------------------------------------------------------------------
View toggle (grid / list)
------------------------------------------------------------------ */
.p-archive__view-toggle {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
justify-content: flex-end;
}
.p-archive__view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.p-archive__view-btn:hover {
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
.p-archive__view-btn.is-active {
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-archive__view-btn svg {
width: 16px;
height: 16px;
}
/* ------------------------------------------------------------------
Sort dropdown
------------------------------------------------------------------ */
.p-archive__sort {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.p-archive__sort-label {
font-size: var(--text-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
.p-archive__sort-select {
padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-md);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-bg-white);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
/* ------------------------------------------------------------------
Empty state
------------------------------------------------------------------ */
.p-archive__empty {
text-align: center;
padding: var(--space-4xl) var(--space-lg);
grid-column: 1 / -1;
}
.p-archive__empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 auto var(--space-lg);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-text-muted);
}
.p-archive__empty-icon svg {
width: 32px;
height: 32px;
}
.p-archive__empty-text {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
}
/* ------------------------------------------------------------------
Toolbar (filters + view toggle combined)
------------------------------------------------------------------ */
.p-archive__toolbar {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.p-archive__toolbar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* ==========================================================================
Contact Page
========================================================================== */
/* Form wrapper */
.p-contact__form-wrap {
max-width: 700px;
margin: 0 auto;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.p-contact__form-wrap {
padding: var(--space-3xl);
}
}
/* Lead text */
.p-contact__lead {
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-2xl);
}
.p-contact__lead-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
@media (min-width: 768px) {
.p-contact__lead-text {
font-size: var(--text-base);
}
}
/* Required note */
.p-contact__required-note {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-xl);
text-align: right;
}
.p-contact__required-mark {
color: var(--color-error);
}
/* ------------------------------------------------------------------
Two-column name fields
------------------------------------------------------------------ */
.p-contact__name-row {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-contact__name-row {
flex-direction: row;
}
.p-contact__name-row > .c-form-group {
flex: 1;
margin-bottom: 0;
}
}
/* ------------------------------------------------------------------
Submit area
------------------------------------------------------------------ */
.p-contact__submit {
margin-top: var(--space-2xl);
text-align: center;
}
.p-contact__submit-btn {
width: 100%;
max-width: 400px;
}
@media (min-width: 540px) {
.p-contact__submit-btn {
width: auto;
min-width: 300px;
}
}
/* Privacy agreement checkbox */
.p-contact__agreement {
margin-top: var(--space-lg);
margin-bottom: var(--space-xl);
text-align: center;
}
.p-contact__agreement-label {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-normal);
}
.p-contact__agreement-label a {
color: var(--color-brand-primary);
text-decoration: underline;
}
.p-contact__agreement-label a:hover {
text-decoration: none;
}
/* ------------------------------------------------------------------
Contact info alongside form
------------------------------------------------------------------ */
.p-contact__info {
margin-top: var(--space-3xl);
text-align: center;
}
.p-contact__info-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: 700px;
margin: 0 auto;
}
@media (min-width: 540px) {
.p-contact__info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.p-contact__info-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-contact__info-item {
padding: var(--space-xl);
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
}
.p-contact__info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-brand-primary);
}
.p-contact__info-icon svg {
width: 20px;
height: 20px;
}
.p-contact__info-label {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.p-contact__info-value {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
.p-contact__info-value a {
color: var(--color-brand-primary);
}
/* ------------------------------------------------------------------
Thank you page
------------------------------------------------------------------ */
.p-contact__thanks {
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: var(--space-4xl) var(--space-lg);
}
.p-contact__thanks-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 auto var(--space-xl);
background-color: rgba(76, 175, 80, 0.1);
border-radius: var(--radius-full);
color: var(--color-success);
}
.p-contact__thanks-icon svg {
width: 40px;
height: 40px;
}
.p-contact__thanks-title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
}
.p-contact__thanks-text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
/* ==========================================================================
Recruit Page
========================================================================== */
/* ------------------------------------------------------------------
Message section (with background image)
------------------------------------------------------------------ */
.p-recruit__message {
position: relative;
padding: var(--space-4xl) 0;
overflow: hidden;
}
.p-recruit__message-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-behind);
}
.p-recruit__message-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-recruit__message-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(248, 245, 245, 0.95) 0%,
rgba(248, 245, 245, 0.85) 50%,
rgba(248, 245, 245, 0.7) 100%
);
}
.p-recruit__message-content {
position: relative;
z-index: var(--z-base);
max-width: 600px;
}
.p-recruit__message-label {
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.p-recruit__message-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.p-recruit__message-title {
font-size: var(--text-3xl);
}
}
.p-recruit__message-text {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
.p-recruit__message-text + .p-recruit__message-text {
margin-top: var(--space-md);
}
/* ------------------------------------------------------------------
Benefits grid
------------------------------------------------------------------ */
.p-recruit__benefits {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-recruit__benefits {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-recruit__benefits {
grid-template-columns: repeat(3, 1fr);
}
}
.p-recruit__benefit-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-recruit__benefit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-recruit__benefit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-brand-primary);
}
.p-recruit__benefit-icon svg,
.p-recruit__benefit-icon img {
width: 28px;
height: 28px;
}
.p-recruit__benefit-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-recruit__benefit-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Position cards
------------------------------------------------------------------ */
.p-recruit__positions {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.p-recruit__position-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: box-shadow var(--transition-base);
}
.p-recruit__position-card:hover {
box-shadow: var(--shadow-card-hover);
}
.p-recruit__position-header {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-xl);
border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
.p-recruit__position-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.p-recruit__position-type {
display: inline-block;
padding: var(--space-xs) var(--space-md);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
background-color: var(--color-bg-accent);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
align-self: flex-start;
}
.p-recruit__position-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
flex: 1;
}
@media (min-width: 768px) {
.p-recruit__position-title {
font-size: var(--text-xl);
}
}
.p-recruit__position-status {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
flex-shrink: 0;
}
.p-recruit__position-status--open {
color: var(--color-success);
}
.p-recruit__position-status--open::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--color-success);
border-radius: var(--radius-full);
}
.p-recruit__position-status--closed {
color: var(--color-text-muted);
}
/* Position details table */
.p-recruit__position-body {
padding: var(--space-xl);
}
.p-recruit__position-table {
width: 100%;
border-collapse: collapse;
}
.p-recruit__position-table th,
.p-recruit__position-table td {
padding: var(--space-sm) 0;
font-size: var(--text-sm);
vertical-align: top;
border-bottom: 1px solid var(--color-border-light);
}
.p-recruit__position-table th {
width: 120px;
font-weight: var(--fw-bold);
color: var(--color-text-primary);
white-space: nowrap;
padding-right: var(--space-lg);
}
@media (min-width: 768px) {
.p-recruit__position-table th {
width: 160px;
}
}
.p-recruit__position-table td {
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Apply button */
.p-recruit__position-footer {
padding: 0 var(--space-xl) var(--space-xl);
text-align: center;
}
@media (min-width: 768px) {
.p-recruit__position-footer {
text-align: right;
}
}
/* ------------------------------------------------------------------
Process / Flow section
------------------------------------------------------------------ */
.p-recruit__flow {
display: flex;
flex-direction: column;
gap: 0;
max-width: 700px;
margin: 0 auto;
}
.p-recruit__flow-step {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-xl) 0;
position: relative;
}
.p-recruit__flow-step + .p-recruit__flow-step {
border-top: 1px dashed var(--color-border);
}
.p-recruit__flow-number {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
border-radius: var(--radius-full);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
}
.p-recruit__flow-body {
flex: 1;
}
.p-recruit__flow-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.p-recruit__flow-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ==========================================================================
S.Tep Landing Page
========================================================================== */
/* ------------------------------------------------------------------
Intro - Feature cards with numbers
------------------------------------------------------------------ */
.p-step__intro {
text-align: center;
}
.p-step__intro-inner {
max-width: var(--container-narrow);
margin: 0 auto var(--space-3xl);
}
.p-step__intro-lead {
font-size: var(--text-lg);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.p-step__intro-lead {
font-size: var(--text-xl);
}
}
.p-step__intro-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
@media (min-width: 768px) {
.p-step__intro-text {
font-size: var(--text-base);
}
}
.p-step__intro-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-2xl);
padding-top: 20px; /* space for protruding number badges */
}
@media (min-width: 540px) {
.p-step__intro-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__intro-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__intro-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-lg) var(--space-lg);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__intro-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-step__intro-card-number {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: var(--text-base);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
}
.p-step__intro-card-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-step__intro-card-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Mission - Blockquote styling
------------------------------------------------------------------ */
.p-step__mission {
text-align: center;
}
.p-step__mission-quote {
position: relative;
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
padding: var(--space-2xl) var(--space-lg);
margin: 0;
border: none;
}
@media (min-width: 768px) {
.p-step__mission-quote {
font-size: var(--text-2xl);
padding: var(--space-3xl) var(--space-2xl);
}
}
@media (min-width: 1024px) {
.p-step__mission-quote {
font-size: var(--text-3xl);
}
}
.p-step__mission-quote::before {
content: "\201C";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-family: Georgia, serif;
font-size: 5rem;
color: var(--color-brand-light);
line-height: 1;
opacity: 0.5;
}
.p-step__mission-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-top: var(--space-lg);
}
@media (min-width: 768px) {
.p-step__mission-text {
font-size: var(--text-base);
}
}
/* ------------------------------------------------------------------
Curriculum - Plan cards, accordion-like
------------------------------------------------------------------ */
.p-step__curriculum {
}
.p-step__curriculum-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.p-step__curriculum-item {
background-color: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
overflow: hidden;
transition:
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__curriculum-item.is-open {
border-color: var(--color-brand-light);
box-shadow: var(--shadow-md);
}
.p-step__curriculum-header {
display: flex;
align-items: center;
gap: var(--space-md);
width: 100%;
padding: var(--space-lg);
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-jp);
transition: background-color var(--transition-fast);
}
.p-step__curriculum-header:hover {
background-color: var(--color-bg-accent);
}
.p-step__curriculum-number {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
background-color: var(--color-bg-accent);
color: var(--color-brand-primary);
font-family: var(--font-en);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
border-radius: var(--radius-lg);
transition: background-color var(--transition-fast);
}
.p-step__curriculum-item.is-open .p-step__curriculum-number {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-step__curriculum-title {
flex: 1;
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-step__curriculum-title {
font-size: var(--text-lg);
}
}
.p-step__curriculum-icon {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.p-step__curriculum-icon::before,
.p-step__curriculum-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--color-text-secondary);
transition: transform var(--transition-base);
}
.p-step__curriculum-icon::before {
width: 14px;
height: 2px;
margin-left: -7px;
margin-top: -1px;
}
.p-step__curriculum-icon::after {
width: 2px;
height: 14px;
margin-left: -1px;
margin-top: -7px;
}
.p-step__curriculum-item.is-open .p-step__curriculum-icon::after {
transform: rotate(90deg);
opacity: 0;
}
.p-step__curriculum-body {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow);
}
.p-step__curriculum-item.is-open .p-step__curriculum-body {
max-height: 800px;
}
.p-step__curriculum-content {
padding: 0 var(--space-lg) var(--space-lg);
padding-left: calc(var(--space-lg) + 48px + var(--space-md));
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
.p-step__curriculum-content ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.p-step__curriculum-content li {
position: relative;
padding-left: var(--space-lg);
}
.p-step__curriculum-content li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background-color: var(--color-brand-primary);
border-radius: var(--radius-full);
}
/* ------------------------------------------------------------------
Bonuses - Grid of bonus cards with numbers
------------------------------------------------------------------ */
.p-step__bonuses {
}
.p-step__bonuses-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-step__bonuses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__bonuses-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__bonus-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-lg);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__bonus-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-step__bonus-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-accent-yellow);
color: var(--color-text-primary);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
}
.p-step__bonus-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-step__bonus-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Support - Support cards grid
------------------------------------------------------------------ */
.p-step__support {
}
.p-step__support-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-step__support-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__support-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__support-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__support-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-step__support-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-brand-primary);
}
.p-step__support-icon svg,
.p-step__support-icon img {
width: 28px;
height: 28px;
}
.p-step__support-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-step__support-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Results - Result cards with highlights
------------------------------------------------------------------ */
.p-step__results {
}
.p-step__results-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-step__results-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__results-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__result-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__result-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-step__result-highlight {
font-family: var(--font-en);
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
line-height: var(--leading-none);
margin-bottom: var(--space-sm);
}
.p-step__result-highlight-unit {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
.p-step__result-label {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.p-step__result-text {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
DM Proof - Screenshot testimonial cards
------------------------------------------------------------------ */
.p-step__dm-proof-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.p-step__dm-proof-header p {
color: var(--color-text-secondary);
font-size: var(--text-base);
max-width: 600px;
margin: var(--space-sm) auto 0;
}
.p-step__dm-proof-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-step__dm-proof-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__dm-proof-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__dm-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.p-step__dm-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-step__dm-card-image {
width: 100%;
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.p-step__dm-card-image img {
width: 100%;
height: auto;
display: block;
}
.p-step__dm-card-body {
padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.p-step__dm-card-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.p-step__dm-card-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Rules - Dark section, numbered list
------------------------------------------------------------------ */
.p-step__rules {
background-color: #1a1a1a;
padding: var(--section-padding-sm) 0;
color: var(--color-text-white);
}
@media (min-width: 768px) {
.p-step__rules {
padding: var(--section-padding) 0;
}
}
.p-step__rules-inner {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.p-step__rules-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-white);
text-align: center;
margin-bottom: var(--space-2xl);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-step__rules-title {
font-size: var(--text-3xl);
}
}
.p-step__rules-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: rules;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.p-step__rules-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
counter-increment: rules;
}
.p-step__rules-item::before {
content: counter(rules, decimal-leading-zero);
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-brand-light);
flex-shrink: 0;
}
.p-step__rules-item-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-white);
margin-bottom: var(--space-xs);
line-height: var(--leading-snug);
}
.p-step__rules-item-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Pricing - 3-column pricing table
------------------------------------------------------------------ */
.p-step__pricing {
}
.p-step__pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: start;
padding-top: 18px; /* space for "おすすめ" badge */
}
@media (min-width: 768px) {
.p-step__pricing-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
}
.p-step__pricing-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-lg);
box-shadow: var(--shadow-card);
text-align: center;
border: 2px solid transparent;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
/* Popular card */
.p-step__pricing-card--popular {
border-color: var(--color-brand-primary);
background: linear-gradient(
180deg,
var(--color-bg-accent) 0%,
var(--color-bg-white) 120px
);
}
@media (min-width: 768px) {
.p-step__pricing-card--popular {
transform: scale(1.05);
z-index: var(--z-base);
box-shadow: var(--shadow-lg);
}
.p-step__pricing-card--popular:hover {
transform: scale(1.05) translateY(-4px);
box-shadow: var(--shadow-xl);
}
}
.p-step__pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-lg);
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
letter-spacing: var(--tracking-wide);
white-space: nowrap;
box-shadow: var(--shadow-sm);
}
.p-step__pricing-name {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}
.p-step__pricing-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-xl);
}
.p-step__pricing-price {
margin-bottom: var(--space-xl);
}
.p-step__pricing-amount {
display: block;
font-family: var(--font-en);
font-size: var(--text-4xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
line-height: var(--leading-none);
}
.p-step__pricing-card--popular .p-step__pricing-amount {
color: var(--color-brand-secondary);
}
.p-step__pricing-unit {
font-size: var(--text-sm);
font-weight: var(--fw-regular);
color: var(--color-text-secondary);
font-family: var(--font-jp);
}
.p-step__pricing-period {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
.p-step__pricing-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl);
text-align: left;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.p-step__pricing-feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
}
.p-step__pricing-feature::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
background-color: var(--color-brand-primary);
border-radius: var(--radius-full);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M4.5 7.09L1.91 4.5.5 5.91l4 4 8-8L11.09.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 9px;
}
.p-step__pricing-feature--disabled {
color: var(--color-text-muted);
}
.p-step__pricing-feature--disabled::before {
background-color: var(--color-border);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='%23999' stroke-width='1.5'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E");
background-size: 8px;
}
/* Advisor section */
.p-step__pricing-advisor {
margin-top: var(--space-3xl);
background-color: var(--color-bg-accent);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
text-align: center;
}
.p-step__pricing-advisor-label {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.p-step__pricing-advisor-title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-step__pricing-advisor-title {
font-size: var(--text-2xl);
}
}
.p-step__pricing-advisor-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
max-width: 600px;
margin: 0 auto;
}
/* ------------------------------------------------------------------
FAQ - Reuses c-accordion styles, page-specific overrides
------------------------------------------------------------------ */
.p-step__faq {
}
.p-step__faq .c-accordion {
border-top-color: var(--color-border-light);
}
.p-step__faq .c-accordion__item {
border-bottom-color: var(--color-border-light);
}
/* ------------------------------------------------------------------
Persona - Recommendation cards
------------------------------------------------------------------ */
.p-step__persona-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 540px) {
.p-step__persona-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-step__persona-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-step__persona-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-step__persona-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-step__persona-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-brand-primary);
}
.p-step__persona-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-step__persona-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Final CTA - Dark CTA section
------------------------------------------------------------------ */
.p-step__final-cta {
background-color: #1a1a1a;
padding: var(--space-4xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.p-step__final-cta {
padding: var(--space-5xl) 0;
}
}
.p-step__final-cta::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.015);
pointer-events: none;
}
.p-step__final-cta::after {
content: "";
position: absolute;
bottom: -30%;
left: -5%;
width: 300px;
height: 300px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.015);
pointer-events: none;
}
.p-step__final-cta-inner {
position: relative;
z-index: var(--z-base);
max-width: 700px;
margin: 0 auto;
padding: 0 var(--container-padding);
}
.p-step__final-cta-label {
display: block;
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: rgba(255, 255, 255, 0.5);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.p-step__final-cta-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-white);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-step__final-cta-title {
font-size: var(--text-3xl);
}
}
@media (min-width: 1024px) {
.p-step__final-cta-title {
font-size: var(--text-4xl);
}
}
.p-step__final-cta-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
.p-step__final-cta-text {
font-size: var(--text-base);
}
}
.p-step__final-cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-step__final-cta-actions {
flex-direction: row;
justify-content: center;
}
}
.p-step__final-cta-note {
display: block;
margin-top: var(--space-md);
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.4);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.p-step__intro-card,
.p-step__bonus-card,
.p-step__support-card,
.p-step__result-card,
.p-step__pricing-card {
transition: none;
}
.p-step__curriculum-body {
transition: none;
}
}
/* ==========================================================================
SNS Operation Agency Page
========================================================================== */
/* ------------------------------------------------------------------
Intro
------------------------------------------------------------------ */
.p-agency__intro {
text-align: center;
}
.p-agency__intro-inner {
max-width: var(--container-narrow);
margin: 0 auto;
}
.p-agency__intro-lead {
font-size: var(--text-lg);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.p-agency__intro-lead {
font-size: var(--text-xl);
}
}
.p-agency__intro-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
@media (min-width: 768px) {
.p-agency__intro-text {
font-size: var(--text-base);
}
}
/* ------------------------------------------------------------------
Strengths - Numbered strength cards
------------------------------------------------------------------ */
.p-agency__strengths {
}
.p-agency__strengths-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-top: 20px; /* space for protruding number badges */
}
@media (min-width: 540px) {
.p-agency__strengths-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-agency__strengths-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-agency__strength-card {
position: relative;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-lg) var(--space-lg);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-agency__strength-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-agency__strength-number {
position: absolute;
top: -16px;
left: var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: var(--text-base);
font-weight: var(--fw-bold);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.p-agency__strength-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-agency__strength-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Staff - Staff cards with photo placeholder
------------------------------------------------------------------ */
.p-agency__staff {
}
.p-agency__staff-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-agency__staff-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.p-agency__staff-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.p-agency__staff-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-md);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-agency__staff-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-agency__staff-avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 auto var(--space-md);
background-color: var(--color-brand-light);
border-radius: var(--radius-full);
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-brand-secondary);
overflow: hidden;
}
.p-agency__staff-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-agency__staff-followers {
position: absolute;
bottom: -4px;
right: -4px;
display: inline-flex;
align-items: center;
padding: 2px var(--space-sm);
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: 10px;
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
border: 2px solid var(--color-bg-white);
white-space: nowrap;
}
.p-agency__staff-name {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.p-agency__staff-role {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Flow - Step-by-step with connecting lines
------------------------------------------------------------------ */
.p-agency__flow {
}
.p-agency__flow-list {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
/* Vertical connecting line (mobile) */
.p-agency__flow-list::before {
content: "";
position: absolute;
top: 24px;
left: 24px;
width: 2px;
height: calc(100% - 48px);
background-color: var(--color-border);
}
@media (min-width: 768px) {
.p-agency__flow-list {
flex-direction: row;
gap: var(--space-lg);
}
/* Horizontal connecting line (desktop) */
.p-agency__flow-list::before {
top: 24px;
left: 48px;
width: calc(100% - 96px);
height: 2px;
}
}
.p-agency__flow-item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-md);
z-index: var(--z-base);
}
@media (min-width: 768px) {
.p-agency__flow-item {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.p-agency__flow-number {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
border: 3px solid var(--color-bg-white);
}
.p-agency__flow-body {
flex: 1;
padding-top: var(--space-sm);
}
@media (min-width: 768px) {
.p-agency__flow-body {
padding-top: 0;
}
}
.p-agency__flow-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
line-height: var(--leading-snug);
}
.p-agency__flow-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Clients - Client name grid
------------------------------------------------------------------ */
.p-agency__clients {
}
.p-agency__clients-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
@media (min-width: 540px) {
.p-agency__clients-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.p-agency__clients-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.p-agency__clients-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.p-agency__client-item {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md) var(--space-sm);
background-color: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
text-align: center;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.p-agency__client-item:hover {
border-color: var(--color-brand-light);
box-shadow: var(--shadow-sm);
}
/* ------------------------------------------------------------------
Tools - Tool cards
------------------------------------------------------------------ */
.p-agency__tools {
}
.p-agency__tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-agency__tools-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.p-agency__tools-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.p-agency__tool-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-xl) var(--space-md);
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-agency__tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-agency__tool-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-lg);
color: var(--color-brand-primary);
}
.p-agency__tool-icon svg,
.p-agency__tool-icon img {
width: 28px;
height: 28px;
}
.p-agency__tool-name {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
}
.p-agency__tool-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-xs);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Cost - Side-by-side comparison with VS divider
------------------------------------------------------------------ */
.p-agency__cost {
}
.p-agency__cost-compare {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
@media (min-width: 768px) {
.p-agency__cost-compare {
flex-direction: row;
align-items: stretch;
}
}
.p-agency__cost-side {
flex: 1;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow: var(--shadow-card);
}
/* Left side (competitor / traditional) */
.p-agency__cost-side--other {
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@media (min-width: 768px) {
.p-agency__cost-side--other {
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
}
/* Right side (S.Line) */
.p-agency__cost-side--sline {
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
border: 2px solid var(--color-brand-primary);
background: linear-gradient(
180deg,
var(--color-bg-accent) 0%,
var(--color-bg-white) 100%
);
}
@media (min-width: 768px) {
.p-agency__cost-side--sline {
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
}
.p-agency__cost-label {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-text-muted);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.p-agency__cost-side--sline .p-agency__cost-label {
color: var(--color-brand-primary);
}
.p-agency__cost-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-md);
}
.p-agency__cost-price {
font-family: var(--font-en);
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-lg);
}
.p-agency__cost-side--sline .p-agency__cost-price {
color: var(--color-brand-primary);
}
.p-agency__cost-price-unit {
font-size: var(--text-base);
font-weight: var(--fw-regular);
font-family: var(--font-jp);
color: var(--color-text-secondary);
}
.p-agency__cost-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.p-agency__cost-feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
.p-agency__cost-feature::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
background-color: var(--color-border);
border-radius: var(--radius-full);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23999' d='M4.5 7.09L1.91 4.5.5 5.91l4 4 8-8L11.09.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 9px;
}
.p-agency__cost-side--sline .p-agency__cost-feature::before {
background-color: var(--color-brand-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M4.5 7.09L1.91 4.5.5 5.91l4 4 8-8L11.09.5z'/%3E%3C/svg%3E");
}
/* VS divider */
.p-agency__cost-vs {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: var(--z-base);
padding: var(--space-sm) 0;
}
@media (min-width: 768px) {
.p-agency__cost-vs {
padding: 0 var(--space-sm);
align-self: center;
margin: 0 calc(var(--space-md) * -1);
}
}
.p-agency__cost-vs-badge {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--color-accent-yellow);
color: var(--color-text-primary);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-extrabold);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
letter-spacing: var(--tracking-tight);
}
/* ------------------------------------------------------------------
CTA
------------------------------------------------------------------ */
.p-agency__cta {
text-align: center;
}
.p-agency__cta-inner {
max-width: 700px;
margin: 0 auto;
}
.p-agency__cta-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-agency__cta-title {
font-size: var(--text-3xl);
}
}
.p-agency__cta-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
.p-agency__cta-text {
font-size: var(--text-base);
}
}
.p-agency__cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-agency__cta-actions {
flex-direction: row;
justify-content: center;
}
}
.p-agency__cta-note {
display: block;
margin-top: var(--space-md);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.p-agency__strength-card,
.p-agency__staff-card,
.p-agency__tool-card {
transition: none;
}
}
/* ==========================================================================
Team Page
========================================================================== */
/* ------------------------------------------------------------------
Intro
------------------------------------------------------------------ */
.p-team__intro {
text-align: center;
max-width: var(--container-narrow);
margin: 0 auto;
}
.p-team__intro-lead {
font-size: var(--text-lg);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.p-team__intro-lead {
font-size: var(--text-xl);
}
}
.p-team__intro-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
@media (min-width: 768px) {
.p-team__intro-text {
font-size: var(--text-base);
}
}
/* ------------------------------------------------------------------
Leaders - Large leader cards with photo and SNS links
------------------------------------------------------------------ */
.p-team__leaders {
max-width: var(--container-default);
margin: 0 auto;
}
.p-team__leaders-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
@media (min-width: 768px) {
.p-team__leaders-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
}
.p-team__leader-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-team__leader-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-team__leader-photo {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background-color: var(--color-brand-light);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-team__leader-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.p-team__leader-card:hover .p-team__leader-photo img {
transform: scale(1.03);
}
/* Placeholder initial when no photo */
.p-team__leader-photo-placeholder {
font-size: var(--text-5xl);
font-weight: var(--fw-bold);
color: var(--color-brand-secondary);
opacity: 0.4;
}
.p-team__leader-body {
padding: var(--space-xl) var(--space-lg);
}
.p-team__leader-position {
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.p-team__leader-name {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
line-height: var(--leading-tight);
}
.p-team__leader-name-en {
font-family: var(--font-en);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-md);
}
.p-team__leader-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
margin-bottom: var(--space-md);
}
/* SNS links row */
.p-team__leader-sns {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.p-team__leader-sns-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background-color: var(--color-bg-accent);
color: var(--color-text-secondary);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.p-team__leader-sns-link:hover {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
}
.p-team__leader-sns-link svg,
.p-team__leader-sns-link img {
width: 18px;
height: 18px;
}
/* ------------------------------------------------------------------
Stats - Stat numbers grid
------------------------------------------------------------------ */
.p-team__stats {
background-color: var(--color-bg-accent);
padding: var(--section-padding-sm) 0;
}
@media (min-width: 768px) {
.p-team__stats {
padding: var(--section-padding) 0;
}
}
.p-team__stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
max-width: var(--container-default);
margin: 0 auto;
padding: 0 var(--container-padding);
}
@media (min-width: 768px) {
.p-team__stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
}
.p-team__stat-item {
text-align: center;
position: relative;
padding: var(--space-lg) var(--space-sm);
}
@media (min-width: 768px) {
.p-team__stat-item + .p-team__stat-item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background-color: var(--color-border);
}
}
.p-team__stat-value {
display: block;
font-family: var(--font-en);
font-size: var(--text-4xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
line-height: var(--leading-none);
margin-bottom: var(--space-sm);
}
@media (min-width: 540px) {
.p-team__stat-value {
font-size: var(--text-5xl);
}
}
.p-team__stat-unit {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
.p-team__stat-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
letter-spacing: var(--tracking-wide);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-team__stat-label {
font-size: var(--text-base);
}
}
/* ------------------------------------------------------------------
Operations - Operator avatar grid with overflow counter
------------------------------------------------------------------ */
.p-team__operations {
max-width: var(--container-default);
margin: 0 auto;
}
.p-team__operations-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
}
.p-team__operator {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
width: 72px;
}
.p-team__operator-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--color-brand-light);
border-radius: var(--radius-full);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-brand-secondary);
overflow: hidden;
transition: transform var(--transition-fast);
}
.p-team__operator:hover .p-team__operator-avatar {
transform: scale(1.1);
}
.p-team__operator-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-team__operator-name {
font-size: var(--text-xs);
color: var(--color-text-secondary);
text-align: center;
line-height: var(--leading-snug);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Overflow counter (+30 etc.) */
.p-team__operator--overflow {
cursor: default;
}
.p-team__operator--overflow .p-team__operator-avatar {
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
}
.p-team__operator--overflow .p-team__operator-name {
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Culture - Dark section with value cards
------------------------------------------------------------------ */
.p-team__culture {
background-color: #1a1a1a;
padding: var(--section-padding-sm) 0;
color: var(--color-text-white);
}
@media (min-width: 768px) {
.p-team__culture {
padding: var(--section-padding) 0;
}
}
.p-team__culture-inner {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.p-team__culture-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-white);
text-align: center;
margin-bottom: var(--space-sm);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-team__culture-title {
font-size: var(--text-3xl);
}
}
.p-team__culture-label {
display: block;
font-family: var(--font-en);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
color: rgba(255, 255, 255, 0.4);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
text-align: center;
margin-bottom: var(--space-3xl);
}
.p-team__culture-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-team__culture-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-team__culture-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-team__culture-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition:
background var(--transition-base),
border-color var(--transition-base),
transform var(--transition-base);
}
.p-team__culture-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
}
.p-team__culture-card-number {
font-family: var(--font-en);
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: rgba(255, 255, 255, 0.15);
line-height: var(--leading-none);
margin-bottom: var(--space-md);
}
.p-team__culture-card-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-white);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.p-team__culture-card-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.65);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Join - CTA section
------------------------------------------------------------------ */
.p-team__join {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.p-team__join-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-team__join-title {
font-size: var(--text-3xl);
}
}
.p-team__join-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
.p-team__join-text {
font-size: var(--text-base);
}
}
.p-team__join-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-team__join-actions {
flex-direction: row;
justify-content: center;
}
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.p-team__leader-card,
.p-team__culture-card {
transition: none;
}
.p-team__leader-photo img {
transition: none;
}
.p-team__operator-avatar {
transition: none;
}
}
/* ==========================================================================
Samurai Beauty Salon Page
========================================================================== */
/* ------------------------------------------------------------------
Intro
------------------------------------------------------------------ */
.p-beauty__intro {
text-align: center;
}
.p-beauty__intro-inner {
max-width: var(--container-narrow);
margin: 0 auto;
}
.p-beauty__intro-lead {
font-size: var(--text-lg);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.p-beauty__intro-lead {
font-size: var(--text-xl);
}
}
@media (min-width: 1024px) {
.p-beauty__intro-lead {
font-size: var(--text-2xl);
}
}
.p-beauty__intro-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
}
@media (min-width: 768px) {
.p-beauty__intro-text {
font-size: var(--text-base);
}
}
/* Intro image */
.p-beauty__intro-image {
margin-top: var(--space-2xl);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.p-beauty__intro-image img {
width: 100%;
height: auto;
display: block;
}
/* ------------------------------------------------------------------
Menu - Menu cards
------------------------------------------------------------------ */
.p-beauty__menu {
}
.p-beauty__menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 540px) {
.p-beauty__menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-beauty__menu-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-beauty__menu-card {
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-beauty__menu-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.p-beauty__menu-image {
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--color-brand-light);
}
.p-beauty__menu-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.p-beauty__menu-card:hover .p-beauty__menu-image img {
transform: scale(1.05);
}
.p-beauty__menu-body {
padding: var(--space-lg);
}
.p-beauty__menu-name {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
line-height: var(--leading-snug);
}
.p-beauty__menu-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-md);
}
.p-beauty__menu-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
.p-beauty__menu-price {
font-family: var(--font-en);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--color-brand-primary);
}
.p-beauty__menu-price-unit {
font-size: var(--text-xs);
font-weight: var(--fw-regular);
color: var(--color-text-muted);
font-family: var(--font-jp);
}
.p-beauty__menu-duration {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ------------------------------------------------------------------
Why - Reason cards
------------------------------------------------------------------ */
.p-beauty__why {
}
.p-beauty__why-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-top: 24px; /* space for protruding number badges */
margin-top: var(--space-xl);
}
@media (min-width: 540px) {
.p-beauty__why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-beauty__why-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-beauty__why-card {
position: relative;
overflow: visible;
background-color: var(--color-bg-white);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-lg) var(--space-lg);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.p-beauty__why-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.p-beauty__why-number {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-brand-primary);
color: var(--color-text-white);
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 2;
}
.p-beauty__why-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto var(--space-md);
background-color: var(--color-bg-accent);
border-radius: var(--radius-full);
color: var(--color-brand-primary);
}
.p-beauty__why-icon svg,
.p-beauty__why-icon img {
width: 24px;
height: 24px;
}
.p-beauty__why-title {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
@media (min-width: 768px) {
.p-beauty__why-title {
font-size: var(--text-lg);
}
}
.p-beauty__why-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------------
Access - Table styling (reuses c-table--company pattern)
------------------------------------------------------------------ */
.p-beauty__access {
}
.p-beauty__access-inner {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
@media (min-width: 768px) {
.p-beauty__access-inner {
flex-direction: row;
gap: var(--space-3xl);
align-items: flex-start;
}
}
.p-beauty__access-info {
flex: 1;
}
.p-beauty__access-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
border-top: 1px solid var(--color-border);
}
.p-beauty__access-table th,
.p-beauty__access-table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border);
}
.p-beauty__access-table th {
width: 120px;
font-weight: var(--fw-bold);
color: var(--color-text-primary);
background-color: transparent;
white-space: nowrap;
}
@media (min-width: 768px) {
.p-beauty__access-table th {
width: 160px;
}
}
.p-beauty__access-table td {
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* Responsive: stack on mobile */
@media (max-width: 539px) {
.p-beauty__access-table th,
.p-beauty__access-table td {
display: block;
width: 100%;
padding: var(--space-sm) 0;
}
.p-beauty__access-table th {
padding-top: var(--space-md);
border-bottom: none;
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wider);
}
.p-beauty__access-table td {
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
}
/* Map embed */
.p-beauty__access-map {
width: 100%;
height: 280px;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.p-beauty__access-map {
width: 400px;
height: 320px;
flex-shrink: 0;
}
}
.p-beauty__access-map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ------------------------------------------------------------------
Before / After Showcase
------------------------------------------------------------------ */
.p-beauty__ba-lead {
text-align: center;
font-size: var(--text-base);
color: var(--color-text-secondary);
margin-bottom: var(--space-2xl);
}
.p-beauty__ba-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 768px) {
.p-beauty__ba-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-beauty__ba-item {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.p-beauty__ba-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.p-beauty__ba-item img {
width: 100%;
height: auto;
display: block;
}
/* ------------------------------------------------------------------
CTA
------------------------------------------------------------------ */
.p-beauty__cta {
background-color: #1a1a1a;
padding: var(--space-4xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.p-beauty__cta {
padding: var(--space-5xl) 0;
}
}
.p-beauty__cta::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.015);
pointer-events: none;
}
.p-beauty__cta::after {
content: "";
position: absolute;
bottom: -30%;
left: -5%;
width: 300px;
height: 300px;
border-radius: var(--radius-full);
background-color: rgba(0, 0, 0, 0.015);
pointer-events: none;
}
.p-beauty__cta-inner {
position: relative;
z-index: var(--z-base);
max-width: 700px;
margin: 0 auto;
padding: 0 var(--container-padding);
}
.p-beauty__cta-label {
display: block;
font-family: var(--font-en);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: rgba(255, 255, 255, 0.5);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.p-beauty__cta-title {
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
color: var(--color-text-white);
line-height: var(--leading-snug);
margin-bottom: var(--space-md);
letter-spacing: var(--tracking-wider);
}
@media (min-width: 768px) {
.p-beauty__cta-title {
font-size: var(--text-3xl);
}
}
@media (min-width: 1024px) {
.p-beauty__cta-title {
font-size: var(--text-4xl);
}
}
.p-beauty__cta-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
.p-beauty__cta-text {
font-size: var(--text-base);
}
}
.p-beauty__cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 540px) {
.p-beauty__cta-actions {
flex-direction: row;
justify-content: center;
}
}
.p-beauty__cta-note {
display: block;
margin-top: var(--space-md);
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.4);
}
/* ------------------------------------------------------------------
Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.p-beauty__menu-card,
.p-beauty__why-card {
transition: none;
}
.p-beauty__menu-image img {
transition: none;
}
}
/* ==========================================================================
Results Page Styles
Extracted from preview-results.html inline