/* BANSŌ Holdings - Animation & UX Enhancement CSS */

/* スクロールアニメーション用の基本設定 */
.animate-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.animate-element.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* カード要素のホバーエフェクト強化 */
.service-card,
.company-card,
.feature-card,
.area-card,
.roadmap-content {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.service-card:hover,
.company-card:hover,
.feature-card:hover,
.area-card:hover,
.roadmap-content:hover {
    transform: translateY(-8px) scale(1.02);
}

/* スマホ版の最適化 */
@media (max-width: 768px) {
    /* セクション間の余白調整 */
    section {
        padding: 3rem 5% !important;
    }

    /* ヒーローセクションの高さ調整 */
    .hero {
        min-height: 85vh !important;
        padding: 5rem 5% 4rem !important;
    }

    /* 見出しのサイズとバランス調整 */
    h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
    }

    h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 1.2rem !important;
    }

    h3 {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        line-height: 1.5 !important;
    }

    /* 本文の可読性向上 */
    p, li {
        font-size: 1rem !important;
        line-height: 1.9 !important;
        margin-bottom: 1.2rem !important;
    }

    /* カードレイアウトの最適化 */
    .service-card,
    .company-card,
    .feature-card,
    .area-card {
        padding: 2rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* ロゴサイズ調整 */
    .zenbrew-logo,
    .revol-logo {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 1.5rem !important;
    }

    .logo-text-inner {
        font-size: 1.5rem !important;
    }

    /* ボタンのタップしやすさ向上 */
    .btn,
    button,
    a.service-link {
        min-height: 48px !important;
        padding: 0.8rem 2rem !important;
        font-size: 1rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ナビゲーションの調整 */
    nav {
        padding: 1rem 5% !important;
    }

    nav .logo img {
        height: 32px !important;
    }

    /* ロードマップの縦表示最適化 */
    .roadmap-item {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-bottom: 2.5rem !important;
    }

    .roadmap-phase {
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .roadmap-content {
        padding: 2rem 1.5rem !important;
    }

    /* フッターの調整 */
    footer {
        padding: 2.5rem 5% !important;
    }

    footer p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    /* タイムラインの調整 */
    .timeline-item {
        padding-left: 0 !important;
        margin-bottom: 2rem !important;
    }

    /* CTAセクションの調整 */
    .cta-section {
        padding: 3rem 5% !important;
    }

    .cta-section h2 {
        margin-bottom: 1.5rem !important;
    }

    .cta-section .btn {
        width: 100% !important;
        max-width: 320px !important;
    }

    /* グリッドレイアウトの最適化 */
    .service-grid,
    .features-grid,
    .creation-areas,
    .mystery-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* 画像の最適化 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* スクロール時のパフォーマンス向上 */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* アニメーション軽量化 */
    .animate-element {
        transform: translateY(20px) !important;
    }

    /* ホバーエフェクトをタップに最適化 */
    .service-card:active,
    .company-card:active,
    .feature-card:active,
    .area-card:active {
        transform: scale(0.98) !important;
    }
}

/* タブレット版の調整 */
@media (min-width: 769px) and (max-width: 1024px) {
    section {
        padding: 4rem 5% !important;
    }

    .service-grid,
    .features-grid,
    .creation-areas {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    h1 {
        font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
    }

    h2 {
        font-size: clamp(2rem, 5vw, 2.8rem) !important;
    }
}

/* スムーズなページ遷移 */
body {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ローディング時のちらつき防止 */
.animate-element:not(.animate-in) {
    visibility: hidden;
}

.animate-element.animate-in {
    visibility: visible;
}