/**
 * Homepage Styles - Takamatsu Mekki Kogyo 2024
 * MI-6スタイル ミニマルモダンデザイン
 * 洗練されたインダストリアルブルー × クリーンホワイト
 */

/* CSS Layers - @supportsチェックを削除 */
@layer pages {

/* ========================================
   Body Adjustments for Fixed Header
======================================== */
body {
    padding-top: 8rem;
}

/* ========================================
   MI-6 Design Tokens
======================================== */
:root {
    /* セクション間隔: MI-6スタイル */
    --section-padding: clamp(4rem, 8vw, 8rem);
    --section-gap: clamp(2rem, 4vw, 4rem);
    
    /* コンテナ設定 */
    --container-max-width: min(120rem, 90vw);
    --container-padding: clamp(2rem, 4vw, 4rem);
    
    /* グリッドシステム */
    --grid-gap: clamp(2rem, 4vw, 6rem);
    --grid-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    /* MI-6スタイル エフェクト */
    --glass-effect: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --subtle-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Hero Section: 2025 Modern Trend Design
======================================== */
.l-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--black);
}

/* フルワイド背景画像システム */
.l-hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.l-hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.1) saturate(0.9) brightness(0.7);
    will-change: transform;
    transition: all 0.8s ease;
}

.l-hero:hover .l-hero__bg-image {
    transform: scale(1.02);
    filter: contrast(1.2) saturate(1.0) brightness(0.8);
}

/* 多層グラデーションオーバーレイ */
.l-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, 
            rgba(var(--primary-rgb), 0.15) 0%,
            transparent 30%,
            transparent 70%,
            rgba(var(--accent-rgb), 0.1) 100%
        ),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.4) 100%
        );
    mix-blend-mode: overlay;
    z-index: 2;
}

/* パーティクルエフェクト */
.l-hero__particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb), 0.08) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
    background-size: 60px 60px, 80px 80px;
    animation: particleFloat 20s ease-in-out infinite;
    z-index: 2;
}

@keyframes particleFloat {
    0%, 100% { background-position: 0% 0%, 100% 100%; }
    50% { background-position: 100% 100%, 0% 0%; }
}

/* コンテンツコンテナ */
.l-hero__container {
    position: relative;
    padding: 0 var(--container-padding);
    z-index: 10;
    width: 100%;
}

.l-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-height: 80vh;
    position: relative;
}

.l-hero__text {
    position: relative;
    padding: var(--space-3xl);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
    margin-right: var(--space-sm);
}

/* Tesla風バッジ */
.l-hero__badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    margin-bottom: var(--space-xl);
    transition: all 0.3s ease;
}

.l-hero__badge:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.5);
    transform: translateY(-2px);
}

/* 大胆なタイポグラフィ */
.l-hero__title {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: var(--space-xl);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.l-hero__title-line {
    display: block;
    position: relative;
    animation: slideUp 1s ease 0.3s both;
}

.l-hero__title-line--white {
    color: white !important;
    -webkit-text-fill-color: white !important;
    animation-delay: 0.3s;
}

.l-hero__title-line--accent {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation-delay: 0.6s;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.l-hero__subtitle {
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-2xl);
    line-height: 1.5;
    animation: slideUp 1s ease 0.9s both;
}

/* Tesla風CTAボタン */
.l-hero__actions {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
    animation: slideUp 1s ease 1.2s both;
    justify-content: flex-end;
}

.l-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.l-hero__cta--primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.3);
}

.l-hero__cta--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.4);
    background: white !important;
}

.l-hero__cta--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.l-hero__cta--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.l-hero__cta-icon {
    transition: transform 0.3s ease;
}

.l-hero__cta:hover .l-hero__cta-icon {
    transform: translateX(4px);
}

/* スクロールインジケーター */
.l-hero__scroll {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation: slideUp 1s ease 1.5s both;
    justify-self: flex-end;
}

.l-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, 
        rgba(var(--primary-rgb), 0.8), 
        transparent
    );
    position: relative;
    overflow: hidden;
}

.l-hero__scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(var(--primary-rgb), 1);
    animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
    0% { top: -100%; }
    50%, 100% { top: 100%; }
}

/* 統計セクション - Apple風 */
.l-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l-hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-2xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px);
    animation: slideUp 1s ease 1.8s both;
}

.l-hero__stat {
    text-align: center;
    padding: var(--space-lg) 0;
}

.l-hero__stat-number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.l-hero__stat-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   Responsive Design: 2025 Mobile-First
======================================== */
@media (max-width: 768px) {
    .l-hero {
        min-height: 100vh; /* svhからvhに変更で安定性向上 */
        min-height: 100svh; /* 対応ブラウザでは動的ビューポート使用 */
        padding: 0; /* 上下余白を削除してフル活用 */
    }
    
    .l-hero__content {
        align-items: flex-start !important; /* 上寄せに変更 */
        text-align: left !important; /* 左寄せでコンパクトに */
        min-height: 80vh !important;
        padding: var(--space-sm) 0 !important; /* 上下パディング最小化 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important; /* 上寄せ */
        padding-top: calc(var(--header-height) + var(--space-sm)) !important; /* ヘッダー下に配置 */
    }
    
    .l-hero__text {
        max-width: none !important; /* 横幅上限完全解除 */
        padding: 0 var(--space-xs) !important; /* 左右最小パディング */
        width: calc(100vw - 2 * var(--space-xs)) !important; /* ビューポート幅フル活用 */
        margin: 0 !important;
        background: none !important; /* 背景透明化でスペース節約 */
        backdrop-filter: none !important;
        border-radius: 0 !important;
    }
    
    .l-hero__badge {
        font-size: clamp(1rem, 2.2vw, 1.2rem) !important; /* サイズ縮小 */
        padding: 0.6rem 1.2rem !important; /* パディング縮小 */
        margin-bottom: 0.8rem !important; /* 間隔縮小 */
        display: inline-block;
    }
    
    .l-hero__title {
        font-size: clamp(2.2rem, 6vw, 3.8rem) !important; /* サイズ縮小でファーストビューに収める */
        line-height: 1.1 !important;
        margin-bottom: 1.2rem !important; /* 間隔縮小 */
        padding: 0 !important; /* パディング削除で横幅フル活用 */
    }
    
    .l-hero__subtitle {
        font-size: clamp(1.3rem, 3vw, 1.6rem) !important; /* サイズ縮小 */
        margin-bottom: 1.5rem !important; /* 間隔縮小 */
        padding: 0 !important; /* パディング削除 */
        line-height: 1.4 !important; /* 行間縮小 */
    }
    
    .l-hero__actions {
        flex-direction: row !important; /* 横並びでコンパクトに */
        gap: 1rem !important; /* 間隔縮小 */
        align-items: flex-start !important;
        width: 100% !important;
        padding: 0 !important; /* パディング削除 */
        margin-bottom: 1rem !important;
    }
    
    .l-hero__cta {
        flex: 1 !important; /* フレックスで幅を分割 */
        max-width: none !important; /* 最大幅制限削除 */
        justify-content: center !important;
        padding: 1rem 1.5rem !important; /* パディング縮小 */
        min-height: 44px !important; /* 最小タップサイズ */
        font-size: clamp(1.3rem, 3vw, 1.5rem) !important; /* フォントサイズ調整 */
    }
    
    .l-hero__stats {
        grid-template-columns: repeat(3, 1fr);
        padding: var(--space-lg);
        gap: var(--space-md);
    }
    
    .l-hero__stat-number {
        font-size: var(--font-size-xl);
    }
    
    .l-hero__scroll {
        display: block !important; /* スクロールインジケーターを表示 */
        margin-top: 0.5rem !important; /* 間隔最小化 */
        font-size: 1rem !important; /* サイズ縮小 */
    }
    
    /* モバイル最適化 */
    .l-hero__particles {
        display: none;
    }
    
    .l-hero__bg-image {
        filter: contrast(1.1) saturate(0.8) brightness(0.6);
        object-fit: cover !important;
        object-position: center !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
}

@media (max-width: 480px) {
    .l-hero__content {
        padding: 0 !important; /* 余白完全削除 */
        padding-top: calc(var(--header-height) + 0.5rem) !important; /* ヘッダー直下 */
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .l-hero__text {
        padding: 0 var(--space-xs) !important; /* 最小限の左右余白のみ */
        max-width: none !important;
        width: calc(100vw - 2 * var(--space-xs)) !important; /* ビューポート幅をフル活用 */
        margin: 0 !important;
        background: none !important;
    }
    
    .l-hero__title {
        font-size: clamp(2rem, 8vw, 3.2rem) !important; /* さらにコンパクト */
        padding: 0 !important; /* パディング完全削除 */
        margin-bottom: 1rem !important;
        line-height: 1.1 !important;
    }
    
    .l-hero__subtitle {
        font-size: clamp(1.2rem, 2.8vw, 1.5rem) !important; /* さらにコンパクト */
        padding: 0 !important; /* パディング完全削除 */
        margin-bottom: 1.2rem !important;
        line-height: 1.35 !important;
    }
    
    .l-hero__actions {
        padding: 0 !important; /* パディング完全削除 */
        width: 100% !important;
        flex-direction: row !important; /* 横並び維持 */
        gap: 0.8rem !important;
    }
    
    .l-hero__cta {
        padding: 0.9rem 1.2rem !important; /* さらにコンパクト */
        font-size: clamp(1.2rem, 2.8vw, 1.4rem) !important;
    }
    
    .l-hero__stats {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .l-hero__stat {
        padding: var(--space-md) 0;
    }
    
    /* スマホでの背景画像最適化 */
    .l-hero__background {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
    
    .l-hero__bg-image {
        object-fit: cover !important;
        object-position: center center !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* 動きを好まないユーザー向け */
@media (prefers-reduced-motion: reduce) {
    .l-hero__title-line,
    .l-hero__subtitle,
    .l-hero__actions,
    .l-hero__scroll,
    .l-hero__stats {
        animation: none !important;
    }
    
    .l-hero__particles {
        animation: none !important;
    }
    
    .l-hero__bg-image {
        transition: none !important;
    }
    
    .l-hero__scroll-line::after {
        animation: none !important;
    }
}

.l-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.l-hero__image {
    position: relative;
    width: 100%;
    max-width: 50rem;
    aspect-ratio: 4/3;
    /* エレガントな八角形 */
    clip-path: polygon(
        15% 0%, 
        85% 0%, 
        100% 15%, 
        100% 85%, 
        85% 100%, 
        15% 100%, 
        0% 85%, 
        0% 15%
    );
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--hover-shadow);
    transform: rotate(1deg);
    transition: all 0.4s ease;
}

.l-hero__image:hover {
    transform: rotate(-1deg) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(var(--primary-rgb), 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
}

.l-hero__image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(var(--primary-rgb), 0.05) 0%,
        transparent 50%,
        rgba(var(--accent-rgb), 0.05) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Removed complex after pseudo-element */

/* Removed rotation keyframes */

.l-hero__image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative;
    z-index: 3;
    filter: contrast(1.1) saturate(1.1);
    transition: filter 0.3s ease;
}

.l-hero__image:hover .l-hero__image-main {
    filter: contrast(1.2) saturate(1.2);
}

/* Removed complex decoration elements */

/* Removed pulse animation */

/* パフォーマンス最適化 */
.l-hero__image,
.l-hero__image::before {
    will-change: transform;
    backface-visibility: hidden;
}

/* プリロード用スタイル */
.l-hero__image-main[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.l-hero__image-main[loading="lazy"].loaded {
    opacity: 1;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
    .l-hero__image::before,
    .l-hero__image::after {
        opacity: 0.3;
    }
}

/* 動きを好まないユーザー向け */
@media (prefers-reduced-motion: reduce) {
    .l-hero__image {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .l-hero__image {
        clip-path: polygon(
            10% 0%, 
            90% 0%, 
            100% 10%, 
            100% 90%, 
            90% 100%, 
            10% 100%, 
            0% 90%, 
            0% 10%
        );
    }
}

/* ========================================
   Section Layout: MI-6スタイル
======================================== */
.l-section {
    padding: var(--section-padding) 0;
    position: relative;
}

.l-section--alternate {
    background: var(--bg-secondary);
}

.l-section__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   Content Block: MI-6スタイル
======================================== */
.c-content-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    align-items: center;
}

.c-content-block--reverse {
    direction: rtl;
}

.c-content-block--reverse > * {
    direction: ltr;
}

.c-content-block__text {
    max-width: 50rem;
}

.c-content-block__title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.c-content-block__description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.c-content-block__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
}

.c-content-block__features li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

.c-content-block__features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 600;
}

.c-content-block__media {
    position: relative;
}

.c-content-block__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--subtle-shadow);
}

/* ========================================
   Stats Component: MI-6スタイル
======================================== */
.c-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin: var(--space-xl) 0;
}

.c-stats__item {
    text-align: center;
}

.c-stats__number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}

.c-stats__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   Section Header: MI-6スタイル
======================================== */
.c-section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.c-section-header__title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.c-section-header__subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}

/* ========================================
   Services Grid: MI-6スタイル
======================================== */
.c-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: var(--space-xl);
}

.c-service-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--subtle-shadow);
    transition: var(--btn-transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.c-service-card:hover {
    box-shadow: var(--hover-shadow);
    transform: translateY(-0.5rem);
}

.c-service-card__icon {
    width: 6rem;
    height: 6rem;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 2.4rem;
}

.c-service-card__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.c-service-card__description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.c-service-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-service-card__features li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.c-service-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   Quality Features: MI-6スタイル
======================================== */
.c-quality-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.c-quality-features__item h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.c-quality-features__item p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   News List: MI-6スタイル
======================================== */
.c-news-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.c-news-item {
    padding: var(--space-xl);
    border-left: 4px solid var(--primary-color);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--subtle-shadow);
    transition: var(--btn-transition);
}

.c-news-item:hover {
    box-shadow: var(--hover-shadow);
    transform: translateX(0.5rem);
}

.c-news-item__meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.c-news-item__date {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.c-news-item__category {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: 600;
    background: rgba(var(--primary-rgb), 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
}

.c-news-item__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.c-news-item__title a {
    color: var(--text-primary);
    transition: var(--btn-transition);
}

.c-news-item__title a:hover {
    color: var(--primary-color);
}

.c-news-item__excerpt {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Button system inherited from base.css - no duplication needed */

/* ========================================
   Link Component: MI-6スタイル
======================================== */
.c-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: var(--btn-transition);
    position: relative;
}

.c-link:hover {
    color: var(--primary-dark);
    transform: translateX(0.5rem);
}

.c-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.c-link:hover::after {
    width: calc(100% - 2rem);
}

/* ========================================
   Section CTA: MI-6スタイル
======================================== */
.c-section-cta {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* ========================================
   Responsive Design: モバイルファースト
======================================== */
@media (max-width: 768px) {
    .l-hero__content {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
        min-height: 100vh !important;
        padding: var(--space-sm) var(--space-xs) !important; /* 最小限の余白 */
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .l-hero__text {
        max-width: none !important; /* 横幅上限完全解除 */
        padding: var(--space-md) var(--space-xs) !important; /* より小さな内側余白 */
        margin: 0 !important;
        width: 100% !important;
        order: 2 !important;
    }
    
    .l-hero__visual {
        order: 1;
        margin-bottom: var(--space-lg);
    }
    
    .l-hero__image {
        max-width: 35rem;
        margin: 0 auto;
        transform: rotate(0.5deg);
    }
    
    .l-hero__image:hover {
        transform: rotate(-0.5deg) scale(1.02);
    }
    
    .c-content-block {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }
    
    .c-content-block--reverse {
        direction: ltr;
    }
    
    .l-hero__title {
        font-size: var(--font-size-4xl);
    }
    
    .c-content-block__title {
        font-size: var(--font-size-3xl);
    }
    
    .c-stats {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .c-services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .c-quality-features {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .l-hero__actions {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    
    .c-button {
        width: 100%;
        max-width: 30rem;
    }
}

@media (max-width: 480px) {
    :root {
        --section-padding: clamp(3rem, 6vw, 5rem);
        --container-padding: 2rem;
    }
    
    .l-hero__title {
        font-size: var(--font-size-3xl);
    }
}

/* ========================================
   Accessibility & Performance
======================================== */
@media (prefers-reduced-motion: reduce) {
    .l-hero__title-line,
    .l-hero__subtitle,
    .l-hero__actions,
    .l-hero__scroll,
    .l-hero__stats {
        animation: none !important;
    }
    
    .l-hero__particles {
        animation: none !important;
    }
    
    .l-hero__bg-image {
        transition: none !important;
    }
    
    .l-hero__scroll-line::after {
        animation: none !important;
    }
}

/* Focus states */
.c-button:focus,
.c-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Loading states */
.c-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   2025 Modern Content Sections
======================================== */

/* 技術ストーリーセクション: デコンストラクテッドレイアウト */
.l-story-section {
    padding: var(--space-20) 0;
    position: relative;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
}

.l-story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 25%, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, rgba(var(--accent-rgb), 0.03) 1px, transparent 1px);
    background-size: 50px 50px, 70px 70px;
    animation: floatingPatterns 25s ease-in-out infinite;
    z-index: 1;
}

@keyframes floatingPatterns {
    0%, 100% { background-position: 0% 0%, 100% 100%; }
    50% { background-position: 100% 100%, 0% 0%; }
}

.l-story-section__container {
    max-width: min(140rem, 95vw);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 2;
}

/* 非対称グリッドレイアウト */
.l-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    max-width: 120rem;
    margin: 0 auto;
}

.l-story-grid__visual {
    position: relative;
}

.l-story-grid__content {
    position: relative;
    z-index: 3;
}

/* モバイルではグリッドを1列に */
@media (max-width: 768px) {
    .l-story-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .l-story-grid__visual {
        margin-top: var(--space-xl);
    }
}

/* モダンメディアコンポーネント */
.c-story-media {
    position: relative;
    width: 100%;
    max-width: 60rem;
}

.c-story-media__frame {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: white;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.1);
    transform: none;
    transition: all 0.3s ease;
}

.c-story-media__frame:hover {
    transform: none;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.18),
        0 10px 30px rgba(0, 0, 0, 0.12);
}

.c-story-media__image {
    width: 100%;
    height: 100% !important; /* base.cssのheight: auto;を上書き */
    object-fit: cover;
    object-position: center;
    filter: contrast(1.1) saturate(1.1) brightness(0.95);
    transition: filter 0.4s ease;
}

.c-story-media__frame:hover .c-story-media__image {
    filter: contrast(1.2) saturate(1.2) brightness(1);
}

.c-story-media__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.1) 0%,
        transparent 50%,
        rgba(var(--accent-rgb), 0.08) 100%
    );
    mix-blend-mode: overlay;
    z-index: 2;
}

/* フローティング統計カード */
.c-floating-stat {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 5;
    animation: floatAnimation 3s ease-in-out infinite;
}

@keyframes floatAnimation {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.c-floating-stat__item {
    text-align: center;
}

.c-floating-stat__number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.c-floating-stat__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ストーリーコンテンツ */
.c-story-content {
    max-width: 50rem;
}

/* インパクトバッジ */
.c-story-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xl);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    animation: slideInLeft 0.8s ease 0.2s both;
}

.c-story-badge--heritage {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.c-story-badge__icon {
    font-size: var(--font-size-base);
}

/* 大胆なストーリータイトル */
.c-story-title {
    margin-bottom: var(--space-xl);
    animation: slideInLeft 0.8s ease 0.4s both;
}

.c-story-title__line {
    display: block;
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.c-story-title__line--accent {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 特徴ピルスタイル */
.c-story-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    animation: slideInLeft 0.8s ease 0.6s both;
}

.c-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary-dark);
    transition: all 0.3s ease;
}

.c-feature-pill:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-2px);
}

.c-feature-pill__icon {
    font-size: var(--font-size-base);
}

/* ストーリー説明文 */
.c-story-description {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    animation: slideInLeft 0.8s ease 0.8s both;
}

/* ストーリーアクション */
.c-story-actions {
    margin-top: var(--space-2xl);
    animation: slideInLeft 0.8s ease 1s both;
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.c-experience-actions {
    margin-top: var(--space-2xl);
}

/* 会社情報セクションのハイライト項目（アイコンなし・白文字） */
.l-experience-section .c-highlight-item__icon {
    display: none !important;
}

.l-experience-section .c-highlight-item__text {
    color: #ffffff !important;
}

/* すべてのセクションアイコンを非表示 */
.c-services-header__badge-icon,
.c-section-header__badge span:first-child,
.c-story-badge__icon,
.c-news-header__badge-icon,
.c-contact-compact__phone-icon {
    display: none !important;
}

.c-story-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-2xl);
    background: var(--primary-color);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.c-story-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.c-story-cta:hover::before {
    left: 100%;
}

.c-story-cta:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
    color: var(--accent-color);
}

.c-story-cta--secondary {
    background: var(--accent-color);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.c-story-cta--secondary:hover {
    background: white;
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.4);
    color: var(--primary-color);
}

.c-story-cta__icon {
    transition: transform 0.3s ease;
}

.c-story-cta:hover .c-story-cta__icon {
    transform: translateX(4px);
}

/* 経験・実績セクション */
.l-experience-section {
    padding: var(--space-20) 0;
    position: relative;
    background: var(--text-primary);
    color: white;
    overflow: hidden;
}

.l-experience-section__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, 
            rgba(var(--primary-rgb), 0.1) 0%,
            transparent 50%,
            rgba(var(--accent-rgb), 0.1) 100%
        ),
        radial-gradient(circle at 20% 80%, rgba(var(--primary-rgb), 0.08) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 80px 80px;
    animation: backgroundFloat 20s ease-in-out infinite;
    z-index: 1;
}

@keyframes backgroundFloat {
    0%, 100% { background-position: 0% 0%, 0% 0%, 100% 100%; }
    50% { background-position: 0% 0%, 100% 100%, 0% 0%; }
}

.l-experience-section__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 2;
}

.l-experience-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-16);
    align-items: stretch; /* centerからstretchに変更で高さを揃える */
    min-height: 70vh;
}

/* 会社画像セクション */
.c-company-image {
    width: 100%;
    height: 100%;
}

.c-company-image__frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 50rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.c-company-image__photo {
    width: 100%;
    height: 100% !important; /* base.cssのheight: auto;を上書き */
    object-fit: cover;
    object-position: center;
}

.l-hero__bg-image {
    width: 100%;
    height: 100% !important; /* base.cssのheight: auto;を上書き */
    object-fit: cover;
    object-position: center;
}

.c-company-image__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    padding: var(--space-2xl);
}

.c-company-image__caption {
    text-align: center;
}

.c-company-image__caption-text {
    font-size: var(--font-size-lg);
    color: white;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* インパクト統計カード（旧デザイン - 非表示だが保持） */
.c-impact-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.c-impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.1) 0%,
        transparent 50%,
        rgba(var(--accent-rgb), 0.1) 100%
    );
    z-index: 1;
}

.c-impact-card__inner {
    position: relative;
    z-index: 2;
}

/* メイン統計 */
.c-impact-stat--main {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.c-impact-stat__visual {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.c-impact-stat__number {
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 0.8;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
}

.c-impact-stat__unit {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    align-self: flex-end;
}

.c-impact-stat__label {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* サブ統計 */
.c-impact-substats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.c-impact-substat {
    text-align: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.c-impact-substat__number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--primary-light);
    margin-bottom: var(--space-xs);
}

.c-impact-substat__label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* タイムライン装飾 */
.c-timeline-visual {
    position: relative;
    height: 60px;
    margin-top: var(--space-lg);
}

.c-timeline-visual__line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: translateY(-50%);
}

.c-timeline-visual__point {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--space-xs) var(--space-md);
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.c-timeline-visual__point--start {
    left: 0;
}

.c-timeline-visual__point--now {
    right: 0;
    background: var(--accent-color);
}

/* 経験ストーリータイトル */
.c-experience-title {
    margin-bottom: var(--space-xl);
}

.c-experience-title__line {
    display: block;
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.3;
    color: white;
    margin-bottom: var(--space-sm);
}

.c-experience-title__line--gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 経験ストーリーテキスト */
.c-experience-story-text {
    margin-bottom: var(--space-xl);
}

.c-experience-story__lead {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);
}

/* 経験ハイライト */
.c-experience-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.c-highlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.c-highlight-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(8px);
}

.c-highlight-item__icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3rem;
}

.c-highlight-item__text {
    font-size: var(--font-size-base);
    color: #374151;
    font-weight: 500;
    line-height: 1.6;
}

.c-highlight-item__text strong {
    color: #1f2937;
    font-weight: 700;
    display: block;
    margin-bottom: var(--space-xs);
}

/* ========================================
   サービス技術領域セクション: モダンカードグリッド
======================================== */
.l-services-section {
    padding: var(--space-20) 0;
    background: 
        linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%),
        radial-gradient(circle at 30% 20%, rgba(var(--primary-rgb), 0.02) 1px, transparent 1px),
        radial-gradient(circle at 70% 80%, rgba(var(--accent-rgb), 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 80px 80px, 100px 100px;
    position: relative;
    overflow: hidden;
}

.l-services-section__container {
    max-width: min(140rem, 95vw);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 2;
}

/* サービスヘッダー */
.c-services-header {
    text-align: center;
    margin-bottom: var(--space-20);
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.c-services-header__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: var(--space-xl);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
    animation: slideInUp 0.8s ease 0.2s both;
}

.c-services-header__badge-icon {
    font-size: var(--font-size-base);
}

.c-services-header__title {
    margin-bottom: var(--space-lg);
    animation: slideInUp 0.8s ease 0.4s both;
}

.c-services-header__title-line {
    display: block;
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.c-services-header__title-line--accent {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.c-services-header__subtitle {
    font-size: var(--font-size-xl);
    line-height: 1.6;
    color: var(--text-secondary);
    animation: slideInUp 0.8s ease 0.6s both;
}

/* モダンサービスグリッド */
.c-services-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-16);
}

/* モダンサービスカード */
.c-modern-service-card {
    position: relative;
    background: var(--bg-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: slideInUp 0.8s ease calc(0.8s + var(--card-delay, 0s)) both;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.c-modern-service-card:nth-child(1) { --card-delay: 0s; }
.c-modern-service-card:nth-child(2) { --card-delay: 0.2s; }
.c-modern-service-card:nth-child(3) { --card-delay: 0.4s; }

.c-modern-service-card--featured {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.02) 0%,
        var(--bg-primary) 50%,
        rgba(var(--accent-rgb), 0.02) 100%
    );
    border-color: rgba(var(--primary-rgb), 0.15);
}

.c-modern-service-card:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.c-modern-service-card--featured:hover {
    transform: translateY(-16px);
}

/* カード背景エフェクト */
.c-modern-service-card__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.01) 0%,
        transparent 50%,
        rgba(var(--accent-rgb), 0.01) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.c-modern-service-card:hover .c-modern-service-card__background {
    opacity: 1;
}

.c-modern-service-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ホバーエフェクト */
.c-modern-service-card__hover-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--primary-rgb), 0.05),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
}

.c-modern-service-card:hover .c-modern-service-card__hover-effect {
    left: 100%;
}

/* サービスアイコン */
.c-service-icon {
    width: 100%;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.c-service-icon--plating {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.4), 0 4px 15px rgba(var(--primary-rgb), 0.2);
}

.c-service-icon--coating {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.4), 0 4px 15px rgba(var(--accent-rgb), 0.2);
}

.c-service-icon--quality {
    background: linear-gradient(135deg, var(--secondary-accent), var(--secondary-accent-light));
    box-shadow: 0 12px 40px rgba(234, 88, 12, 0.4), 0 4px 15px rgba(234, 88, 12, 0.2);
}

.c-service-icon__symbol {
    font-size: var(--font-size-3xl);
    color: white;
    z-index: 2;
}

.c-service-icon__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    z-index: 2;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.c-modern-service-card:hover .c-service-icon__image {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.1);
}

/* サービスメタ情報 */
.c-service-meta {
    margin-bottom: var(--space-xl);
}

.c-service-meta__category {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: var(--space-sm);
}

.c-service-meta__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

/* サービス説明 */
.c-service-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

/* モダン特徴タグ */
.c-service-features-modern {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}

.c-service-feature-tag {
    padding: var(--space-xs) var(--space-md);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-dark);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all 0.3s ease;
}

.c-service-feature-tag:hover {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.25);
    transform: translateY(-1px);
}

/* アニメーション定義 */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* タブレット対応 */
@media (max-width: 1024px) and (min-width: 769px) {
    .c-services-modern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .l-story-grid,
    .l-experience-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }
    
    .l-story-grid__content {
        order: 2;
    }
    
    .l-story-grid__visual {
        order: 1;
    }
    
    .l-experience-grid__stats {
        order: 1;
    }
    
    .l-experience-grid__content {
        order: 2;
    }
    
    .c-story-media__frame {
        transform: rotate(0deg);
        max-width: 40rem;
        margin: 0 auto;
    }
    
    .c-company-image__frame {
        min-height: 30rem;
    }
    
    .c-impact-card {
        padding: var(--space-2xl);
    }
    
    .c-impact-substats {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .c-services-modern-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .c-modern-service-card {
        padding: var(--space-2xl);
    }
    
    .c-modern-service-card--featured {
        transform: translateY(0);
    }
}

/* タブレット・モバイル対応 - 768px以下で縦並び */
@media (max-width: 768px) {
    .l-quality-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-12) !important;
        text-align: center !important;
        min-height: auto !important;
    }
    
    .l-quality-grid__content {
        order: 2 !important;
    }
    
    .l-quality-grid__visual {
        order: 1 !important;
    }
    
    .c-quality-metrics {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
}

@media (max-width: 480px) {
    .l-story-section,
    .l-experience-section,
    .l-services-section {
        padding: var(--space-16) 0;
    }
    
    .c-story-title__line,
    .c-experience-title__line,
    .c-services-header__title-line {
        font-size: clamp(2.4rem, 8vw, 3.6rem);
    }
    
    .c-impact-stat__number {
        font-size: clamp(4rem, 15vw, 6rem);
    }
    
    .c-story-features {
        justify-content: center;
    }
    
    .l-quality-grid {
        gap: var(--space-8) !important;
    }
    
    .c-quality-metrics {
        gap: var(--space-sm) !important;
    }
    
    /* スマホでのボタン配置改善 */
    .c-story-actions {
        flex-direction: column !important;
        gap: var(--space-md) !important;
        margin-top: var(--space-xl) !important;
    }
    
    .c-story-cta {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* プロセスステップのモバイル対応 */
    .c-floating-process {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin-top: var(--space-xl);
    }
    
    .c-process-step {
        min-width: 100%;
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    
    .c-process-step__number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--font-size-xs);
    }
    
    .c-process-step__title {
        font-size: var(--font-size-sm);
    }
    
    .c-process-step__desc {
        font-size: var(--font-size-xs);
    }
    
    .c-modern-news-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .c-modern-news-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
        padding: var(--space-xl);
    }
    
    .c-news-thumbnail {
        width: 100%;
        max-width: 30rem;
        height: 18rem;
    }
    
    .c-news-date-title {
        align-items: center;
    }
}

/* ========================================
   品質保証セクション: インタラクティブデザイン
======================================== */
.l-quality-section {
    padding: var(--space-20) 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    position: relative;
    overflow: hidden;
}

.l-quality-section__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 2;
}

.l-quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    min-height: 70vh;
}

/* 品質ストーリー */
.c-story-badge--quality {
    background: linear-gradient(135deg, var(--secondary-accent), var(--secondary-accent-light));
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
}

.c-quality-title {
    margin-bottom: var(--space-xl);
}

.c-quality-title__line {
    display: block;
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.c-quality-title__line--gradient {
    background: linear-gradient(135deg, var(--secondary-accent) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.c-quality-lead {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-3xl);
}

/* 品質指標カード */
.c-quality-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.c-quality-metric {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(var(--secondary-accent), 0.1);
    transition: all 0.3s ease;
}

.c-quality-metric:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--secondary-accent), 0.2);
}

.c-quality-metric__icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secondary-accent), var(--secondary-accent-light));
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    color: white;
    flex-shrink: 0;
}

.c-quality-metric__content {
    flex: 1;
}

.c-quality-metric__value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--secondary-accent);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.c-quality-metric__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 品質プロセスビジュアル */
.c-quality-process {
    position: relative;
    max-width: 50rem;
    margin-left: auto;
}

.c-quality-process__main {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--gray-900);
    box-shadow: var(--shadow-xl);
}

.c-quality-process__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.1) saturate(1.1);
}

.c-quality-process__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--secondary-accent), 0.1) 0%,
        transparent 50%,
        rgba(var(--primary-rgb), 0.08) 100%
    );
    mix-blend-mode: overlay;
}

/* フローティングプロセスカード */
.c-floating-process {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.c-process-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 250px;
}

.c-process-step:nth-child(1) { --step-delay: 0s; }
.c-process-step:nth-child(2) { --step-delay: 1s; }
.c-process-step:nth-child(3) { --step-delay: 2s; }

.c-process-step__number {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-accent);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.c-process-step__content {
    flex: 1;
}

.c-process-step__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.c-process-step__desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ========================================
   お知らせセクション: タイムラインデザイン
======================================== */
.l-news-section {
    padding: var(--space-20) 0;
    background: var(--bg-primary);
    position: relative;
}

.l-news-section__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ニュースヘッダー */
.c-news-header {
    text-align: center;
    margin-bottom: var(--space-16);
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

.c-news-header__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: var(--space-xl);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
}

.c-news-header__badge-icon {
    font-size: var(--font-size-base);
}

.c-news-header__title {
    margin-bottom: var(--space-lg);
}

.c-news-header__title-line {
    display: block;
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.c-news-header__title-line--accent {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* モダンニュースグリッド */
.c-modern-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    gap: var(--space-3xl);
    margin: 0 auto var(--space-16);
    max-width: 120rem;
}

/* モダンニュースアイテム */
.c-modern-news-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    transition: all 0.3s ease;
    animation: slideInUp 0.8s ease calc(0.2s * var(--index, 1)) both;
}

.c-modern-news-item[data-index="1"] { --index: 1; }
.c-modern-news-item[data-index="2"] { --index: 2; }
.c-modern-news-item[data-index="3"] { --index: 3; }

.c-modern-news-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), 0.15);
}

/* ニュースサムネイル */
.c-news-thumbnail {
    position: relative;
    width: 12rem;
    height: 8rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-200);
}

.c-news-thumbnail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.c-modern-news-item:hover .c-news-thumbnail__image {
    transform: scale(1.05);
}

.c-news-thumbnail__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.1) 0%,
        transparent 50%,
        rgba(var(--accent-rgb), 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.c-modern-news-item:hover .c-news-thumbnail__overlay {
    opacity: 1;
}

/* ニュースコンテンツ */
.c-news-content {
    flex: 1;
    min-width: 0;
}

.c-news-date-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.c-news-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.c-news-title {
    margin: 0;
}

.c-news-title a {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-news-title a:hover {
    color: var(--primary-color);
}

/* ニュースセクションCTA */
.c-news-section-cta {
    text-align: center;
    margin-top: var(--space-16);
}

.c-news-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-3xl);
    background: var(--primary-color);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.c-news-view-all::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.c-news-view-all:hover::before {
    left: 100%;
}

.c-news-view-all:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
    color: white;
}

.c-news-view-all__icon {
    transition: transform 0.3s ease;
}

.c-news-view-all:hover .c-news-view-all__icon {
    transform: translateX(4px);
}

/* Button text visibility and alignment fix */
.c-news-view-all span,
.l-hero__cta span,
.c-story-cta span {
    font-size: inherit !important;
    color: white !important;
    display: inline-block;
    vertical-align: middle;
}

/* Arrow icons - default white */
.c-story-cta__icon,
.c-news-view-all__icon,
.l-hero__cta-icon {
    color: white !important;
}

/* Hover state text and icon color changes */
.c-story-cta:hover span {
    color: var(--primary-color) !important;
}

.c-story-cta:hover .c-story-cta__icon {
    color: var(--primary-color) !important;
}

.c-news-view-all:hover span {
    color: white !important;
}

.c-news-view-all:hover .c-news-view-all__icon {
    color: white !important;
}

.l-hero__cta:hover span {
    color: var(--primary-color) !important;
}

.l-hero__cta:hover .l-hero__cta-icon {
    color: var(--primary-color) !important;
}

/* レスポンシブデザイン: 品質・ニュースセクション */
@media (max-width: 768px) {
    .l-quality-section,
    .l-news-section {
        padding: var(--space-16) 0;
    }
    
    .c-quality-title__line,
    .c-news-header__title-line {
        font-size: clamp(2.4rem, 8vw, 3.6rem);
    }
    
    .c-quality-metric {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .c-quality-metric__icon {
        width: 3rem;
        height: 3rem;
    }
    
    .c-news-title a {
        font-size: var(--font-size-base);
        -webkit-line-clamp: 3;
    }
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {
    .c-story-badge,
    .c-story-title,
    .c-story-features,
    .c-story-description,
    .c-story-actions,
    .c-services-header__badge,
    .c-services-header__title,
    .c-services-header__subtitle,
    .c-modern-service-card,
    .c-modern-news-card {
        animation: none !important;
    }
    
    .c-floating-stat {
        animation: none !important;
    }
    
    .l-story-section::before,
    .l-experience-section__background {
        animation: none !important;
    }
}

/* ========================================
   Contact Compact Section
======================================== */
.l-contact-compact {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, 
        rgba(var(--primary-rgb), 0.02) 0%, 
        rgba(var(--secondary-rgb), 0.01) 100%);
    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}

.c-contact-compact {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

.c-contact-compact__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.c-contact-compact__title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.c-contact-compact__description {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    margin: 0;
    max-width: 60rem;
}

.c-contact-compact__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
}

.c-contact-compact__actions .c-btn span {
    color: white !important;
    font-size: inherit !important;
    font-weight: 600;
}

.c-contact-compact__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.c-contact-compact__phone-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--font-size-lg);
    transition: color 0.3s ease;
}

.c-contact-compact__phone-link:hover {
    color: var(--primary-dark);
}

.c-contact-compact__phone-icon {
    font-size: 2rem;
}

.c-contact-compact__phone-number {
    letter-spacing: 0.05em;
}

.c-contact-compact__hours {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* レスポンシブ対応 */
@media (min-width: 768px) {
    .c-contact-compact__actions {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-2xl);
    }
    
    .c-contact-compact__phone {
        text-align: left;
    }
}

/* ========================================
   FAQ Accordion Section - Homepage
======================================== */
.c-faq-accordion {
    margin-bottom: var(--space-3xl);
}

.c-faq-item {
    margin-bottom: var(--space-lg);
}

.c-faq-question {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: var(--space-lg) !important;
    width: 100% !important;
    padding: var(--space-lg) var(--space-xl) !important;
    background: var(--bg-primary) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-align: left !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.c-faq-question__text {
    flex: 1 !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

.c-faq-question:hover {
    background: rgba(var(--primary-rgb), 0.05) !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    color: var(--primary-color) !important;
}

.c-faq-question.active {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

.c-faq-question__icon {
    font-size: var(--font-size-lg) !important;
    transition: transform 0.3s ease !important;
    color: inherit !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.c-faq-question.active .c-faq-question__icon {
    transform: rotate(45deg) !important;
}

.c-faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    background: var(--bg-secondary) !important;
    border-left: 1px solid rgba(var(--primary-rgb), 0.1) !important;
    border-right: 1px solid rgba(var(--primary-rgb), 0.1) !important;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    transition: all 0.3s ease !important;
    margin-top: -1px !important;
}

.c-faq-answer.active {
    max-height: 500px !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
}

.c-faq-answer__content {
    padding: var(--space-xl) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
}

/* FAQ Section CTA Button Centering */
.c-faq-section-cta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: var(--space-2xl) !important;
}

.c-faq-section-cta .c-story-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ========================================
   Homepage-specific styles only
   トップページ専用スタイル（tech-heroは hero-sections.css に移動）
======================================== */

} /* @layer pages */

/* Fallback styles are no longer needed */

.hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero__title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero__subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.about__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 60px 0;
}

.about__feature {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

@media (max-width: 768px) {
    body {
        padding-top: 6rem;
    }
    
    .hero {
        padding: 80px 0 60px;
        min-height: 50vh;
    }
    
    .hero__title {
        font-size: 2.5rem;
    }
    
    .hero__subtitle {
        font-size: 1.1rem;
    }
    
    .about__features {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 0;
    }
}