/* ============================================
   SUBPAGE STYLES
   Shared styles for service sub-pages
   ============================================ */

/* --- Page Hero --- */
.subpage-hero {
    padding: calc(80px + var(--space-lg)) 0 var(--space-md);
    position: relative;
    overflow: hidden;
    background: var(--bg-washi);
}

.subpage-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    opacity: 0.04;
}

.subpage-hero__label {
    font-family: var(--font-en);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--origami-gold);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-xs);
}

.subpage-hero__title {
    font-family: var(--font-ja-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-sm);
}

.subpage-hero__subtitle {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Color accents & Backgrounds per service */
.subpage-hero {
    position: relative;
    z-index: 1;
    /* For overlay stacking */
}

/* Base overlay for all subpage heroes to ensure text readability */
.subpage-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Dark gradient overlay combining navy and black for contrast */
    background: linear-gradient(135deg,
            rgba(26, 42, 94, 0.85) 0%,
            rgba(10, 15, 30, 0.9) 100%);
    z-index: -1;
}

/* Base text color adjustments for the dark background */
.subpage-hero__title,
.subpage-hero__subtitle {
    color: var(--text-on-dark);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.subpage-hero__label {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- 和紙テクスチャ共通: 明るい背景用の調整 --- */
.subpage-hero--revenue,
.subpage-hero--flow,
.subpage-hero--scale {
    color: var(--text-primary);
}

.subpage-hero--revenue::after,
.subpage-hero--flow::after,
.subpage-hero--scale::after {
    background: rgba(255, 255, 255, 0.3);
}

.subpage-hero--revenue .subpage-hero__title,
.subpage-hero--revenue .subpage-hero__subtitle,
.subpage-hero--flow .subpage-hero__title,
.subpage-hero--flow .subpage-hero__subtitle,
.subpage-hero--scale .subpage-hero__title,
.subpage-hero--scale .subpage-hero__subtitle {
    color: var(--origami-navy);
    text-shadow: none;
}

.subpage-hero--revenue .subpage-hero__label,
.subpage-hero--flow .subpage-hero__label,
.subpage-hero--scale .subpage-hero__label {
    color: var(--origami-gold);
    text-shadow: none;
}

/* --- Revenue --- */
.subpage-hero--revenue {
    background: url('assets/washi-orange.jpeg') center center / cover no-repeat;
}

/* --- Flow --- */
.subpage-hero--flow {
    background: url('assets/washi-green.jpg') center center / cover no-repeat;
}

/* --- Scale --- */
.subpage-hero--scale {
    background: url('assets/washi-yellow.jpeg') center center / cover no-repeat;
}

/* --- Sub Navigation (header-attached) --- */
.subnav {
    position: sticky;
    top: 60px;
    z-index: 99;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.subnav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: 0;
}

.subnav__link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.subnav__link:hover {
    color: var(--origami-navy);
    background: rgba(42, 37, 32, 0.02);
}

.subnav__link--active {
    color: var(--origami-navy);
    font-weight: var(--fw-medium);
    border-bottom-color: var(--origami-gold);
}

.subnav__num {
    font-family: var(--font-en);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
}

.subnav__link--active .subnav__num {
    color: var(--origami-gold);
}

/* --- Content Area (full width, no sidebar) --- */
.subpage-content {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--bg-cream);
}

/* ============================================
   DX SUPPORT (SCALE DESIGN) SPECIFIC STYLES
   TECH / GLASSMORPHISM THEME
   ============================================ */
body:has(.subpage-hero--scale) .subpage-content {
    /* Keep the original cream background but add a subtle grid for the tech feel */
    background-color: var(--bg-cream);
    background-image:
        linear-gradient(rgba(42, 37, 32, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 37, 32, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center top;
}

/* Base text overrides for the light DX background */
body:has(.subpage-hero--scale) .subpage-section__text,
body:has(.subpage-hero--scale) .subpage-step__text {
    color: var(--text-secondary);
}

body:has(.subpage-hero--scale) .subpage-section__title,
body:has(.subpage-hero--scale) .subpage-feature__title,
body:has(.subpage-hero--scale) .subpage-step__title,
body:has(.subpage-hero--scale) .subpage-step-card__title {
    color: var(--origami-navy);
}

body:has(.subpage-hero--scale) .subpage-section__title::before {
    background: linear-gradient(135deg, var(--origami-teal) 0%, #4ea8de 100%);
}

/* Glassmorphism Cards for Features */
body:has(.subpage-hero--scale) .subpage-feature {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(42, 37, 32, 0.05);
}

body:has(.subpage-hero--scale) .subpage-step-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(42, 37, 32, 0.05);
}

body:has(.subpage-hero--scale) .subpage-feature:hover {
    box-shadow: 0 12px 40px rgba(42, 37, 32, 0.08);
}

body:has(.subpage-hero--scale) .subpage-step-card:hover {
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 40px rgba(42, 37, 32, 0.08);
    transform: translateY(-4px);
}

/* Remove origami corner from DX cards */
body:has(.subpage-hero--scale) .subpage-feature::before {
    display: none;
}

/* DX theme tab colors */
body:has(.subpage-hero--scale) .subpage-feature__tab {
    background: linear-gradient(135deg, var(--origami-teal) 0%, #4ea8de 100%) !important;
}

body:has(.subpage-hero--scale) .subpage-feature__num {
    color: rgba(255, 255, 255, 0.6);
    background: none;
    -webkit-text-fill-color: inherit;
}

/* Subpage step overrides for DX */
body:has(.subpage-hero--scale) .subpage-step {
    border-bottom: 1px solid rgba(42, 37, 32, 0.05);
}

body:has(.subpage-hero--scale) .subpage-step__num {
    color: var(--origami-teal);
}

body:has(.subpage-hero--scale) .subpage-step-card::before {
    /* Tech corner accent in teal */
    background: var(--origami-teal);
    color: white;
}

body:has(.subpage-hero--scale) .subpage-step-card__num {
    color: rgba(42, 37, 32, 0.1);
    /* Very subtle number in background */
}

body:has(.subpage-hero--scale) .subpage-step-card::after,
body:has(.subpage-hero--scale) .subpage-step-card__connector,
body:has(.subpage-hero--scale) .subpage-step-card:nth-child(4)::before {
    background: rgba(42, 37, 32, 0.1);
    /* Subtle dark tech connectors */
}

/* Subnav adjustments - make it slightly translucent */
body:has(.subpage-hero--scale) .subnav {
    background: rgba(247, 243, 236, 0.8);
    /* Cream mixed with transparency */
}

body:has(.subpage-hero--scale) .subnav__link {
    color: var(--text-secondary);
}

body:has(.subpage-hero--scale) .subnav__link:hover {
    color: var(--origami-navy);
    background: rgba(42, 37, 32, 0.02);
}

body:has(.subpage-hero--scale) .subnav__link--active {
    color: var(--origami-teal);
    border-bottom-color: var(--origami-teal);
}

/* Change DX CTA colors to match the theme */
body:has(.subpage-hero--scale) .subpage-cta {
    background: var(--origami-teal);
    /* Use teal as the main CTA background */
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

body:has(.subpage-hero--scale) .subpage-cta__button {
    background: white;
    color: var(--origami-teal);
}

body:has(.subpage-hero--scale) .subpage-cta__button:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

body:has(.subpage-hero--scale) .subpage-cta__button--outline {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.6);
}

body:has(.subpage-hero--scale) .subpage-cta__button--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

.subpage-content>.container {
    max-width: 860px;
    margin: 0 auto;
}

/* --- Section --- */
.subpage-section {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.subpage-section:last-child {
    border-bottom: none;
}

.subpage-section__title {
    font-family: var(--font-en);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: var(--fw-light);
    color: rgba(42, 37, 32, 0.08);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
    padding-left: 0;
    padding-top: var(--space-xs);
    padding-bottom: 0;
    line-height: 1.2;
}

.subpage-section__title::before {
    display: none;
}

/* --- Redesigned Section Header (Two-line layout) --- */
.subpage-section__header {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    text-align: left;
    position: static;
    /* Remove sticky from section header/title */
    top: auto;
    /* Remove sticky from section header/title */
}

.subpage-section__label {
    font-family: var(--font-en);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--origami-gold);
    margin-bottom: var(--space-xs);
}

.subpage-section__title-main {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--origami-gold);
    display: inline-block;
}

.subpage-section__text {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.9;
}

.subpage-section__text--muted {
    color: var(--text-tertiary);
    font-style: italic;
}

/* --- Features Grid (Stacking Cards) --- */
.subpage-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: 0;
}

.subpage-feature {
    background: transparent;
    border: none;
    overflow: visible;
    box-shadow: none;
    padding: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subpage-feature:last-child {
    margin-bottom: 0;
}

/* --- Tab (colored label) --- */
.subpage-feature__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4rem 1.2rem;
    color: white;
    position: relative;
    border-radius: 0 0 var(--radius-sm) 0;
}

.subpage-feature:nth-child(1) .subpage-feature__tab {
    background: var(--origami-navy);
}

.subpage-feature:nth-child(2) .subpage-feature__tab {
    background: var(--origami-gold);
}

.subpage-feature:nth-child(3) .subpage-feature__tab {
    background: var(--origami-teal);
}

.subpage-feature:nth-child(4) .subpage-feature__tab {
    background: var(--origami-vermillion);
}

.subpage-feature__num {
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: var(--fw-black);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    background: none;
    -webkit-text-fill-color: inherit;
    flex-shrink: 0;
}

.subpage-feature__tab-title {
    font-family: var(--font-ja);
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: white;
    letter-spacing: 0.02em;
}

/* --- Card body --- */
.subpage-feature__body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    background: var(--bg-card);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.08);
}

.subpage-feature__title {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.subpage-feature__text {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 2;
    max-width: 600px;
}

/* --- Two-column content layout (text + image) --- */
.subpage-feature__content {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.subpage-feature__text-area {
    flex: 1;
    min-width: 0;
}

.subpage-feature__image {
    flex: 0 0 200px;
    max-width: 200px;
}

.subpage-feature__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    object-fit: cover;
    opacity: 0.9;
    transition: opacity var(--transition-base);
}

.subpage-feature:hover .subpage-feature__image img {
    opacity: 1;
}

@media (max-width: 600px) {
    .subpage-feature__content {
        flex-direction: column;
    }

    .subpage-feature__image {
        flex: none;
        max-width: 160px;
        align-self: center;
    }
}

/* --- Origami fold corner --- */
.subpage-feature::before,
.subpage-feature::after {
    display: none;
}

.subpage-feature:hover .subpage-feature__body {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08), 0 10px 32px rgba(0, 0, 0, 0.12);
}

/* --- Steps (Original List Layout) --- */
.subpage-steps {
    display: grid;
    gap: var(--space-md);
}

.subpage-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.subpage-step:last-child {
    border-bottom: none;
}

.subpage-step__num {
    grid-row: 1 / 3;
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    color: var(--origami-gold);
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.subpage-step__title {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.subpage-step__text {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* --- Steps (Grid Layout for Flow/Revenue with Connecting Lines) --- */
.subpage-steps--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md) var(--space-sm);
    position: relative;
    padding-top: var(--space-sm);
}

/* Base card styling for grid steps */
.subpage-step-card {
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.subpage-step-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* The folded corner accent on the top right */
.subpage-step-card::before {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #d4cfc5;
    color: white;
    font-size: 10px;
    line-height: 14px;
    text-align: right;
    padding-right: 4px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 2;
}

.subpage-step-card__num {
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: var(--fw-black);
    color: #c4c1bc;
    line-height: 1;
    margin-bottom: var(--space-xs);
    text-align: left;
    width: 100%;
}

.subpage-step-card__icon {
    width: 28px;
    height: 28px;
    margin-bottom: var(--space-sm);
    color: #e51376;
}

/* Revenue page can use a different color for icons if desired, using a local variable or override */
.subpage-hero--revenue~.subpage-content .subpage-step-card__icon,
.revenue-color {
    color: var(--origami-gold-light);
    /* Or any color fitting the theme */
}

.subpage-hero--scale~.subpage-content .subpage-step-card__icon,
.scale-color {
    color: var(--origami-teal);
}

.subpage-step-card__title {
    font-size: 0.8rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Optional cards (05-08: client-side steps) */
.subpage-step-card--optional {
    opacity: 0.45;
    border-style: dashed;
    border-color: #ccc;
}

.subpage-step-card--optional .subpage-step-card__icon {
    color: #aaa !important;
}

.flow8__note {
    font-family: var(--font-ja);
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    margin-top: 1.5rem;
}

/* --- Connecting Lines for Grid Layout --- */

/* Horizontal lines between cards */
.subpage-step-card {
    position: relative;
}

/* We create lines using absolute positioning relative to the container.
   But to make it responsive-friendly, we can use pseudo-elements on the cards. */
.subpage-step-card:not(:nth-child(4n))::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-md));
    width: var(--space-md);
    height: 12px;
    background: #d5b5b5;
    /* Pale pinkish line */
    z-index: 1;
    transform: translateY(-50%);
}

/* Vertical line connecting the two rows forming the snake */
/* We specifically target the 4th card (end of first row) connecting to 5th (end of second row logically) */
.subpage-step-card:nth-child(4)::before {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--space-lg));
    left: 50%;
    width: 12px;
    height: var(--space-lg);
    background: #d5b5b5;
    z-index: 1;
    transform: translateX(-50%);
    clip-path: none;
    /* override the + corner */
}

/* Re-apply the + corner we just overrode for the 4th card with a separate element or adjust our strategy.
   Better strategy: use a separate wrapper or background element for vertical lines. 
*/
.subpage-step-card:nth-child(4)::before {
    /* Restore standard corner */
    content: '+';
    width: 30px;
    height: 30px;
    background: #d4cfc5;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    bottom: auto;
    left: auto;
    transform: none;
}

.subpage-step-card:nth-child(4) .subpage-step-card__connector {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 12px;
    height: var(--space-lg);
    background: #d5b5b5;
    z-index: 1;
    transform: translateX(-50%);
}

/* Snake logic for the second row: right to left.
   We achieve this visually by keeping DOM order 1,2,3,4,5,6,7,8 
   but overriding grid order for items 5-8.
*/
.subpage-step-card:nth-child(5) {
    order: 8;
}

.subpage-step-card:nth-child(6) {
    order: 7;
}

.subpage-step-card:nth-child(7) {
    order: 6;
}

.subpage-step-card:nth-child(8) {
    order: 5;
}

/* The lines for the reversed row (5-8). 
   We want lines pointing left. Because order is reversed, 
   the space between 8(visual 4th on row2) and 7(visual 3rd on row2) needs a line. */

/* --- Responsive Grid Steps --- */
@media (max-width: 900px) {
    .subpage-steps--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subpage-step-card:nth-child(n) {
        order: initial;
    }

    /* Reset snake flow */

    /* Straight 2-column snake flow */
    /* Row 1: 1, 2 */
    /* Row 2: 4, 3 (order: 4 for item 3, order: 3 for item 4) */
    /* Row 3: 5, 6 */
    /* Row 4: 8, 7 */
    .subpage-step-card:nth-child(3) {
        order: 4;
    }

    .subpage-step-card:nth-child(4) {
        order: 3;
    }

    .subpage-step-card:nth-child(7) {
        order: 8;
    }

    .subpage-step-card:nth-child(8) {
        order: 7;
    }

    /* Fix horizontal lines for 2 columns */
    .subpage-step-card::after {
        display: none;
    }

    /* Odd items get right-pointing line */
    .subpage-step-card:nth-child(odd)::after {
        display: block;
    }

    /* Fix vertical lines */
    .subpage-step-card:nth-child(4) .subpage-step-card__connector {
        display: none;
    }

    .subpage-step-card:nth-child(2) .subpage-step-card__connector {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 12px;
        height: var(--space-lg);
        background: #d5b5b5;
        z-index: 1;
        transform: translateX(-50%);
    }

    /* This snake logic gets complex for responsive. We will just use a straight grid on mobile. */
}

@media (max-width: 900px) {

    /* Fallback to simple 2 col grid, no snake, simple lines or no lines */
    .subpage-step-card:nth-child(n) {
        order: 0;
    }

    .subpage-step-card::after {
        display: none !important;
    }

    .subpage-step-card__connector {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .subpage-steps--grid {
        grid-template-columns: 1fr;
    }
}

/* --- Recruit Banner --- */
.recruit-banner {
    border-bottom: none !important;
}

.recruit-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-xl);
    background: linear-gradient(135deg, #f8f6f1 0%, #eee9df 100%);
    border: 1.5px solid var(--origami-gold-light);
    border-radius: var(--radius-md);
}

.recruit-banner__label {
    font-family: var(--font-en);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--origami-gold);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-xs);
}

.recruit-banner__title {
    font-family: var(--font-ja-serif);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-xs);
}

.recruit-banner__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.recruit-banner__button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--origami-navy);
    color: var(--text-on-dark);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-bold);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.recruit-banner__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    background: var(--origami-navy-dark);
}

@media (max-width: 640px) {
    .recruit-banner__inner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }
}

/* --- CTA --- */
.subpage-cta {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--origami-navy);
    border-radius: var(--radius-md);
    border-bottom: none !important;
}

.subpage-cta__title {
    font-family: var(--font-ja-serif);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    color: var(--text-on-dark);
    margin-bottom: var(--space-sm);
}

.subpage-cta__text {
    color: rgba(247, 243, 236, 0.7);
    font-size: var(--fs-body);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.subpage-cta__buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.subpage-cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--origami-gold-light);
    color: var(--origami-navy-dark);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-bold);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.subpage-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.subpage-cta__button--outline {
    background: transparent;
    border: 1.5px solid rgba(247, 243, 236, 0.4);
    color: var(--text-on-dark);
}

.subpage-cta__button--outline:hover {
    border-color: var(--origami-gold-light);
}

/* --- 8-Step Flow (営業支援の流れ) --- */
.flow8__title {
    font-family: var(--font-ja-serif);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.flow8 {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.flow8__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.flow8__card {
    background: #f0edea;
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.flow8__card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent var(--bg-cream) transparent transparent;
}

.flow8__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: #e0b8c0;
}

.flow8__num {
    display: block;
    font-family: var(--font-en);
    font-size: 2.2rem;
    font-weight: var(--fw-black);
    color: rgba(0, 0, 0, 0.08);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.flow8__icon {
    width: 32px;
    height: 32px;
    margin: 0 auto var(--space-sm);
    color: #e91e63;
    display: block;
}

.flow8__text {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.6;
}

/* ============================================
   MARKETING (FLOW DESIGN) SPECIFIC STYLES
   ============================================ */

/* --- Marketing Page: Works Grid --- */
.mkt-works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.mkt-works__block {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.mkt-works__block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--origami-gold);
}

.mkt-works__heading {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 1.05rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-md);
}

.mkt-works__icon {
    width: 24px;
    height: 24px;
    color: var(--origami-gold);
    flex-shrink: 0;
}

.mkt-works__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    margin-bottom: var(--space-sm);
}

.mkt-works__list li {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: var(--space-md);
    position: relative;
}

.mkt-works__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--origami-gold);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.mkt-works__desc {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.mkt-works__note {
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    line-height: 1.8;
    margin-top: var(--space-xs);
}

.mkt-works__result {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(184, 149, 26, 0.06);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--origami-gold);
}

.mkt-works__result p {
    font-size: var(--fs-small);
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 4px;
}

.mkt-works__result p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .mkt-works {
        grid-template-columns: 1fr;
    }
}

/* --- Flow Page: Works (制作実績) --- */
.flow-work {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: var(--shadow-card);
}

.flow-work:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 42, 94, 0.1);
}

.flow-work__thumb {
    flex: 0 0 38%;
    max-width: 38%;
    overflow: hidden;
}

.flow-work__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.flow-work:hover .flow-work__img {
    transform: scale(1.03);
}

.flow-work__info {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flow-work__badge {
    display: inline-block;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--origami-gold);
    border: 1px solid var(--origami-gold);
    border-radius: 3px;
    padding: 2px 10px;
    margin-bottom: var(--space-sm);
}

.flow-work__title {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-xs);
}

.flow-work__desc {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.flow-work__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    color: var(--origami-gold);
    letter-spacing: 0.08em;
}

.flow-work__link svg {
    transition: transform 0.2s ease;
}

.flow-work:hover .flow-work__link svg {
    transform: translate(2px, -2px);
}

@media (max-width: 768px) {
    .flow-work {
        flex-direction: column;
    }

    .flow-work__thumb {
        flex: none;
        max-width: 100%;
        height: 180px;
    }

    .flow-work__info {
        padding: var(--space-md);
    }
}

/* --- Case Studies Detail Page --- */
.cs-breadcrumb {
    padding: var(--space-sm) 0;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--border-card);
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.cs-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.cs-breadcrumb a:hover {
    color: var(--origami-navy);
}

.cs-breadcrumb span {
    margin: 0 6px;
}

.cs-article {
    padding-bottom: var(--space-2xl);
}

.cs-article__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.cs-article__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #2a7a6e;
    margin-bottom: var(--space-sm);
}

.cs-article__title {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.cs-article__lead {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Overview: Visual + Summary */
.cs-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.cs-overview__visual {
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.cs-overview__diagram {
    width: 100%;
    height: auto;
}

.cs-overview__summary p {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: var(--space-md);
}

.cs-overview__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-overview__tags span {
    font-size: 0.75rem;
    color: #2a7a6e;
    background: rgba(42, 122, 110, 0.08);
    border: 1px solid rgba(42, 122, 110, 0.15);
    border-radius: 4px;
    padding: 3px 12px;
    font-weight: var(--fw-medium);
}

/* Article Body */
.cs-body {
    max-width: 800px;
    margin: 0 auto;
}

.cs-body__section {
    margin-bottom: var(--space-xl);
}

.cs-body__heading {
    font-family: var(--font-ja-serif);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid #2a7a6e;
    margin-bottom: var(--space-md);
}

.cs-body__section > p {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: var(--space-sm);
}

/* Issues */
.cs-issues {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.cs-issues__item {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(42, 122, 110, 0.03);
    border-radius: var(--radius-sm);
    border-left: 3px solid rgba(42, 122, 110, 0.3);
}

.cs-issues__num {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    color: #2a7a6e;
    opacity: 0.5;
    line-height: 1.4;
}

.cs-issues__item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--origami-navy);
    margin-bottom: 4px;
}

.cs-issues__item p {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Approach */
.cs-approach {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.cs-approach__item {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.cs-approach__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-sm);
    color: #2a7a6e;
}

.cs-approach__icon svg {
    width: 100%;
    height: 100%;
}

.cs-approach__item h4 {
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-xs);
}

.cs-approach__item p {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Results */
.cs-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.cs-results__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
}

.cs-results__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #2a7a6e;
}

.cs-results__icon svg {
    width: 100%;
    height: 100%;
}

.cs-results__item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--origami-navy);
    margin-bottom: 2px;
}

.cs-results__item p {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.6;
}

.cs-punchline {
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: rgba(42, 122, 110, 0.04);
    border-radius: var(--radius-sm);
    text-align: center;
}

.cs-punchline p {
    font-size: var(--fs-body);
    color: var(--origami-navy);
    line-height: 1.8;
}

.cs-punchline strong {
    color: #2a7a6e;
}

/* Divider */
.cs-divider {
    border: none;
    height: 1px;
    background: var(--border-card);
    margin: var(--space-lg) 0 var(--space-2xl);
}

/* Bottom Navigation */
.cs-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
}

.cs-nav__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    color: var(--origami-navy);
    border: 1px solid var(--border-card);
    background: var(--bg-card);
}

.cs-nav__button:hover {
    border-color: var(--origami-navy);
}

.cs-nav__button--primary {
    background: var(--origami-navy);
    color: #fff;
    border-color: var(--origami-navy);
}

.cs-nav__button--primary:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .cs-overview {
        grid-template-columns: 1fr;
    }

    .cs-issues {
        grid-template-columns: 1fr;
    }

    .cs-approach {
        grid-template-columns: 1fr;
    }

    .cs-nav {
        flex-direction: column;
        align-items: center;
    }
}

/* --- Case Studies List Page --- */
.cs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.cs-list__card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cs-list__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 42, 94, 0.1);
}

.cs-list__card-inner {
    display: grid;
    grid-template-columns: 38% 1fr;
}

.cs-list__visual {
    background: #f7f3ec;
    padding: var(--space-sm);
    display: flex;
    align-items: center;
}

.cs-list__visual svg {
    width: 100%;
    height: auto;
}

.cs-list__info {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-list__badge {
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2a7a6e;
    margin-bottom: var(--space-xs);
}

.cs-list__title {
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: 4px;
}

.cs-list__lead {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.cs-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-sm);
}

.cs-list__tags span {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: rgba(42, 122, 110, 0.06);
    border-radius: 3px;
    padding: 2px 8px;
}

.cs-list__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    color: #2a7a6e;
    letter-spacing: 0.08em;
}

.cs-list__link svg {
    transition: transform 0.2s ease;
}

.cs-list__card:hover .cs-list__link svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .cs-list__card-inner {
        grid-template-columns: 1fr;
    }

    .cs-list__visual {
        height: 180px;
        overflow: hidden;
    }

    .cs-list__info {
        padding: var(--space-md);
    }
}

/* --- Scale Page: Case Study Cards --- */
.scale-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.scale-case-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.scale-case-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/washi-purple.png');
    background-size: cover;
    background-position: center;
    filter: hue-rotate(-30deg) saturate(0.2) brightness(1.05);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

.scale-case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-lg);
    width: 40px;
    height: 2px;
    background: var(--origami-gold);
    opacity: 0.4;
}

.scale-case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 42, 94, 0.1);
}

.scale-case-card > * {
    position: relative;
    z-index: 1;
}

.scale-case-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.scale-case-card__badge {
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2a7a6e;
}

.scale-case-card__category {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    border: 1px solid var(--border-card);
    border-radius: 3px;
    padding: 1px 8px;
}

.scale-case-card__title {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-xs);
}

.scale-case-card__desc {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
    flex: 1;
}

.scale-case-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-md);
}

.scale-case-card__tags span {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: rgba(42, 122, 110, 0.06);
    border-radius: 3px;
    padding: 2px 8px;
}

.scale-case-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    color: #2a7a6e;
    letter-spacing: 0.08em;
}

.scale-case-card__link svg {
    transition: transform 0.2s ease;
}

.scale-case-card:hover .scale-case-card__link svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .scale-cases {
        grid-template-columns: 1fr;
    }
}

/* --- DX Page: Problems List --- */
.dx-problems {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    padding-left: 0;
}

.dx-problems li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.7rem 0;
    font-size: var(--fs-body);
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.dx-problems li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--origami-teal);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* --- DX Page: Works Grid --- */
/* --- DX Works: 左右交互＋背景番号＋縦書きラベル --- */
.dx-works {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dx-works__block {
    position: relative;
    padding: 4rem 0;
    overflow: hidden;
}

/* 背景の大きな番号 */
.dx-works__bg-num {
    position: absolute;
    font-size: clamp(8rem, 15vw, 12rem);
    font-weight: 900;
    color: rgba(26, 42, 94, 0.03);
    line-height: 1;
    top: 0;
    pointer-events: none;
    z-index: 0;
}

.dx-works__block--right .dx-works__bg-num { right: 0; }
.dx-works__block--left .dx-works__bg-num { left: 0; }

/* 縦書き英語ラベル */
.dx-works__vertical-label {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--origami-gold);
    opacity: 0.5;
    top: 4rem;
    z-index: 1;
}

.dx-works__block--right .dx-works__vertical-label { left: 0; }
.dx-works__block--left .dx-works__vertical-label { right: 0; }

/* コンテンツ — 左右に寄せる */
.dx-works__content {
    position: relative;
    z-index: 1;
    max-width: 70%;
}

.dx-works__block--right .dx-works__content {
    margin-left: 3rem;
}

.dx-works__block--left .dx-works__content {
    margin-left: auto;
    margin-right: 3rem;
}

.dx-works__heading {
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-md);
    letter-spacing: 0.08em;
}

/* 営業支援サービス説明文 */
.rv-service__desc {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 2;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
}

.dx-works__block:hover .rv-service__desc {
    max-height: 200px;
    opacity: 1;
}

.dx-works__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
}

.dx-works__block:hover .dx-works__list {
    max-height: 300px;
    opacity: 1;
}

.dx-works__list li {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 1rem;
    position: relative;
}

.dx-works__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 5px;
    height: 5px;
    background: var(--origami-teal);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* --- DX Page: Values --- */
.dx-values {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 550px;
}

.dx-values__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 0;
    font-weight: var(--fw-medium);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

/* 筆ストローク風ダッシュ */
.dx-values__dash {
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--origami-gold), transparent);
    flex-shrink: 0;
}

.dx-values__check {
    display: none;
}

/* --- DX Page: Target Cards --- */
.dx-target {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dx-target__card {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding: 2rem 0;
}

.dx-target__num {
    font-family: var(--font-ja-serif);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--origami-navy);
    opacity: 0.06;
    line-height: 1;
    flex-shrink: 0;
}

.dx-target__card p {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.6;
}

.dx-target__card strong {
    color: var(--text-primary);
}

/* --- DX Page: Flow Steps --- */
.dx-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.dx-flow::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--origami-teal), transparent);
}

.dx-flow__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    position: relative;
}

.dx-flow__num {
    width: 48px;
    height: 48px;
    background: var(--origami-teal);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.dx-flow__body {
    flex: 1;
    padding-top: 4px;
}

.dx-flow__title {
    font-size: 1.05rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dx-flow__text {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* --- DX Page: Case Studies --- */
.dx-case {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.dx-case::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--origami-teal);
}

.dx-case__header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.dx-case__num {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--origami-teal);
    display: block;
    margin-bottom: var(--space-xs);
}

.dx-case__title {
    font-family: var(--font-ja-serif);
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dx-case__subtitle {
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    font-style: italic;
}

.dx-case__section {
    margin-bottom: var(--space-lg);
}

.dx-case__section:last-child {
    margin-bottom: 0;
}

.dx-case__heading {
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-sm);
    padding-left: var(--space-sm);
    border-left: 3px solid var(--origami-teal);
}

.dx-case__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    margin-bottom: var(--space-sm);
}

.dx-case__list li {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: var(--space-md);
    position: relative;
}

.dx-case__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--origami-teal);
    border-radius: var(--radius-full);
}

.dx-case__text {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

.dx-case__note {
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    line-height: 1.8;
    margin-top: var(--space-sm);
    font-style: italic;
}

.dx-case__results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.dx-case__result {
    padding: var(--space-sm) var(--space-md);
    background: rgba(42, 122, 110, 0.08);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    text-align: center;
}

.dx-case__conclusion {
    font-size: var(--fs-body);
    color: var(--text-primary);
    line-height: 1.8;
    text-align: center;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.dx-case__conclusion strong {
    color: var(--origami-teal);
}

/* Bottom message */
.dx-case__message {
    padding: var(--space-xl);
    background: var(--origami-navy);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-on-dark);
}

.dx-case__message p {
    font-size: var(--fs-body);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.dx-case__message p:last-child {
    margin-bottom: 0;
}

.dx-case__message strong {
    color: var(--origami-gold-light);
}

.dx-case__message ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    margin-bottom: var(--space-md);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.dx-case__message li {
    font-size: var(--fs-small);
    padding-left: var(--space-md);
    position: relative;
    color: rgba(247, 243, 236, 0.8);
}

.dx-case__message li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--origami-gold-light);
    border-radius: var(--radius-full);
}

/* --- DX Dark Theme overrides for Case Studies --- */
body:has(.subpage-hero--scale) .dx-case {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(100, 255, 218, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body:has(.subpage-hero--scale) .dx-case::before {
    background: var(--origami-teal);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

body:has(.subpage-hero--scale) .dx-case__header {
    border-bottom-color: rgba(100, 255, 218, 0.15);
}

body:has(.subpage-hero--scale) .dx-case__title {
    color: #f8fafc;
}

body:has(.subpage-hero--scale) .dx-case__subtitle {
    color: #64748b;
}

body:has(.subpage-hero--scale) .dx-case__heading {
    color: #f8fafc;
    border-left-color: var(--origami-teal);
}

body:has(.subpage-hero--scale) .dx-case__list li {
    color: #94a3b8;
}

body:has(.subpage-hero--scale) .dx-case__text {
    color: #94a3b8;
}

body:has(.subpage-hero--scale) .dx-case__note {
    color: #64748b;
}

body:has(.subpage-hero--scale) .dx-case__result {
    background: rgba(100, 255, 218, 0.1);
    color: #e2e8f0;
}

body:has(.subpage-hero--scale) .dx-case__conclusion {
    color: #e2e8f0;
    border-top-color: rgba(100, 255, 218, 0.15);
}

body:has(.subpage-hero--scale) .dx-case__conclusion strong {
    color: var(--origami-teal);
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

body:has(.subpage-hero--scale) .dx-case__message {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(100, 255, 218, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(100, 255, 218, 0.05);
}

body:has(.subpage-hero--scale) .dx-case__message strong {
    color: var(--origami-teal);
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

body:has(.subpage-hero--scale) .dx-case__message li::before {
    background: var(--origami-teal);
}

/* ============================================
   DX CASE STUDIES v2 (Redesigned)
   ============================================ */

/* Section header */
.dx-case-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.dx-case-header__label {
    font-family: var(--font-en);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--origami-teal);
    margin-bottom: var(--space-xs);
}

.dx-case-header__title {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-sm);
}

body:has(.subpage-hero--scale) .dx-case-header__title {
    color: #f8fafc;
}

.dx-case-header__sub {
    font-size: var(--fs-body);
    color: #64748b;
    font-style: italic;
}

/* Case card */
.dx-case2 {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(100, 255, 218, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.dx-case2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--origami-teal), rgba(100, 255, 218, 0.2));
}

.dx-case2__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--origami-teal);
    background: rgba(100, 255, 218, 0.1);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(100, 255, 218, 0.2);
    margin-bottom: var(--space-sm);
}

.dx-case2__title {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: var(--fw-bold);
    color: #f8fafc;
    margin-bottom: 6px;
}

.dx-case2__tagline {
    font-size: var(--fs-small);
    color: #64748b;
    font-style: italic;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

/* BEFORE → AFTER flow */
.dx-case2__flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--space-lg);
}

.dx-case2__before,
.dx-case2__after {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.dx-case2__before {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.dx-case2__after {
    background: rgba(100, 255, 218, 0.06);
    border: 1px solid rgba(100, 255, 218, 0.15);
}

/* Phase labels */
.dx-case2__phase-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-en);
    font-size: 0.7rem;
    font-weight: var(--fw-black);
    letter-spacing: 0.15em;
    color: #ef4444;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.dx-case2__phase-label--after {
    color: var(--origami-teal);
}

.dx-case2__phase-icon {
    font-size: 1rem;
}

/* Problem list */
.dx-case2__problems {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-sm);
}

.dx-case2__problems li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-small);
    color: #cbd5e1;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.05);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.dx-case2__problems li:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dx-case2__problem-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.dx-case2__pain-quote {
    font-size: 0.8rem;
    color: #64748b;
    font-style: italic;
    line-height: 1.6;
    margin-top: var(--space-xs);
}

/* Arrow */
.dx-case2__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    color: var(--origami-teal);
}

.dx-case2__arrow svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 6px rgba(100, 255, 218, 0.4));
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}

/* Solution list */
.dx-case2__solutions {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dx-case2__solutions li {
    font-size: var(--fs-small);
    color: #e2e8f0;
    padding: 6px 10px;
    padding-left: 24px;
    position: relative;
    background: rgba(100, 255, 218, 0.05);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.dx-case2__solutions li:hover {
    background: rgba(100, 255, 218, 0.1);
}

.dx-case2__solutions li::before {
    content: '✓';
    position: absolute;
    left: 8px;
    color: var(--origami-teal);
    font-weight: var(--fw-bold);
    font-size: 0.85rem;
}

/* Results grid */
.dx-case2__results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.dx-case2__result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-xs);
    background: rgba(100, 255, 218, 0.08);
    border: 1px solid rgba(100, 255, 218, 0.12);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dx-case2__result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(100, 255, 218, 0.15);
}

.dx-case2__result-icon {
    font-size: 1.4rem;
}

.dx-case2__result-text {
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    color: #e2e8f0;
    line-height: 1.4;
}

/* Punchline */
.dx-case2__punchline {
    text-align: center;
    font-size: var(--fs-body);
    color: #94a3b8;
    line-height: 1.8;
}

.dx-case2__punchline strong {
    color: var(--origami-teal);
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

/* Bottom message */
.dx-case2__message {
    padding: var(--space-xl) var(--space-lg);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(100, 255, 218, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 60px rgba(100, 255, 218, 0.03);
}

.dx-case2__message-inner {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.dx-case2__message-lead {
    font-family: var(--font-ja-serif);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: var(--fw-bold);
    color: #f8fafc;
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.dx-case2__message-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.dx-case2__message-point {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-body);
    color: #cbd5e1;
    text-align: left;
}

.dx-case2__message-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--origami-teal);
}

.dx-case2__message-check svg {
    width: 18px;
    height: 18px;
}

.dx-case2__message-cta {
    font-size: var(--fs-body);
    color: #f8fafc;
}

.dx-case2__message-cta strong {
    color: var(--origami-teal);
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .dx-case2 {
        padding: var(--space-lg) var(--space-md);
    }

    .dx-case2__flow {
        flex-direction: column;
        gap: 0;
    }

    .dx-case2__arrow {
        flex: 0 0 40px;
        transform: rotate(90deg);
    }

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

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* --- Contact Hero --- */
.subpage-hero--contact {
    background: var(--origami-navy);
}

.subpage-hero--contact .subpage-hero__label {
    color: var(--origami-gold-light);
}

/* --- Form Wrapper --- */
.contact-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.contact-lead {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.contact-lead__required {
    color: var(--origami-vermillion);
    font-weight: var(--fw-bold);
}

/* --- Form Group --- */
.contact-form__group {
    margin-bottom: var(--space-lg);
}

.contact-form__label {
    display: block;
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.contact-form__required {
    color: var(--origami-vermillion);
    font-weight: var(--fw-bold);
    margin-left: 2px;
}

/* --- Input / Textarea / Select --- */
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-ja);
    font-size: var(--fs-body);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: var(--text-tertiary);
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
    border-color: var(--origami-navy);
    box-shadow: 0 0 0 3px rgba(26, 42, 94, 0.1);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.8;
}

/* Select wrapper with custom arrow */
.contact-form__select-wrapper {
    position: relative;
}

.contact-form__select-wrapper::after {
    content: '';
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-secondary);
    pointer-events: none;
}

.contact-form__select {
    padding-right: calc(var(--space-md) + 20px);
    cursor: pointer;
}

.contact-form__select option[value=""][disabled] {
    color: var(--text-tertiary);
}

/* --- Checkbox --- */
.contact-form__agree {
    margin-bottom: var(--space-xl);
    margin-top: var(--space-lg);
}

.contact-form__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.6;
}

.contact-form__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact-form__checkbox-custom {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-card);
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
    background: var(--bg-card);
}

.contact-form__checkbox:checked+.contact-form__checkbox-custom {
    background: var(--origami-navy);
    border-color: var(--origami-navy);
}

.contact-form__checkbox:checked+.contact-form__checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.contact-form__checkbox:focus+.contact-form__checkbox-custom {
    box-shadow: 0 0 0 3px rgba(26, 42, 94, 0.1);
}

.contact-form__link {
    color: var(--origami-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.contact-form__link:hover {
    color: var(--origami-gold);
}

/* --- Submit Button --- */
.contact-form__submit-wrapper {
    text-align: center;
}

.contact-form__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    background: var(--origami-navy);
    color: var(--text-on-dark);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-ja);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.05em;
}

.contact-form__submit:hover {
    background: var(--origami-navy-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(26, 42, 94, 0.3);
}

.contact-form__submit:active {
    transform: translateY(0);
}

.contact-form__submit svg {
    transition: transform var(--transition-fast);
}

.contact-form__submit:hover svg {
    transform: translateX(4px);
}

/* --- Contact Info Cards --- */
.contact-section {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.contact-info {
    border-bottom: none !important;
}

.contact-info__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.contact-info__card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-base);
}

.contact-info__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.contact-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(26, 42, 94, 0.06);
    border-radius: var(--radius-full);
    color: var(--origami-navy);
    margin-bottom: var(--space-sm);
}

.contact-info__label {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.contact-info__value {
    font-size: var(--fs-body);
    color: var(--text-primary);
    line-height: 1.6;
    text-decoration: none;
}

a.contact-info__value:hover {
    color: var(--origami-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================
   PRIVACY POLICY PAGE STYLES
   ============================================ */

.privacy-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.privacy-lead {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: var(--space-2xl);
}

.privacy-block {
    margin-bottom: var(--space-xl);
}

.privacy-block__title {
    font-family: var(--font-ja-serif);
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--origami-navy);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-subtle);
}

.privacy-block__text {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 2;
}

.privacy-block__list {
    padding-left: 0;
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.privacy-block__list li {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: var(--space-md);
    position: relative;
}

.privacy-block__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: var(--origami-gold);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.privacy-contact {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
}

.privacy-contact p {
    font-size: var(--fs-body);
    color: var(--text-primary);
    line-height: 1.8;
}

.privacy-contact a {
    color: var(--origami-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-contact a:hover {
    color: var(--origami-gold);
}

.privacy-date {
    margin-top: var(--space-xl);
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    text-align: right;
}

/* --- Contact Page Responsive --- */
@media (max-width: 600px) {
    .contact-info__cards {
        grid-template-columns: 1fr;
    }

    .contact-form__submit {
        width: 100%;
        justify-content: center;
    }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .subnav__inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .subnav__link {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
    }

    .subpage-content {
        padding: var(--space-xl) 0;
    }

    .subpage-content>.container {
        padding: 0 var(--space-md);
    }

    .subpage-features {
        padding-bottom: 0;
    }

    .subpage-feature {
        margin-bottom: var(--space-md);
    }

    .subpage-feature__tab {
        padding: var(--space-xs) var(--space-md);
    }

    .subpage-feature__tab-title {
        font-size: 0.85rem;
    }

    .subpage-feature__body {
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }

    .subpage-feature:nth-child(1) {
        top: 65px;
    }

    .subpage-feature:nth-child(2) {
        top: 100px;
    }

    .subpage-feature:nth-child(3) {
        top: 135px;
    }

    .subpage-feature:nth-child(4) {
        top: 170px;
    }

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

    .dx-works__content {
        max-width: 100%;
    }

    .dx-works__block--right .dx-works__content,
    .dx-works__block--left .dx-works__content {
        margin-left: 2rem;
        margin-right: 0;
    }

    .dx-works__vertical-label {
        display: none;
    }

    .dx-works__list {
        max-height: none;
        opacity: 1;
    }

    .dx-case {
        padding: var(--space-lg) var(--space-md);
    }

    .dx-case__results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .subpage-hero {
        padding: calc(70px + var(--space-xl)) 0 var(--space-lg);
    }

    .subpage-step {
        grid-template-columns: 1fr;
    }

    .subpage-step__num {
        grid-row: auto;
        margin-bottom: 4px;
    }
}