/* ==========================================
   FeelFlow Theme - Front Page Specific Styles
   ========================================== */

/* Desktop with sidebar - center content in remaining space */
@media (min-width: 1024px) {
    /* Main content area accounting for sidebar */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    main {
        margin-left: 200px !important;
        padding-left: 0 !important;
        width: calc(100% - 200px) !important;
    }
    
    /* Hero section spans full viewport */
    #home {
        margin-left: -200px !important;
        width: calc(100% + 200px) !important;
        position: relative !important;
    }
    
    /* Hero content centered in available space */
    #home .hero-content {
        position: relative !important;
        left: 100px !important; /* Half of sidebar width */
        transform: translateX(0) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Other sections centered normally */
    section:not(#home) .container,
    section:not(#home) > div:first-child,
    .max-w-6xl,
    .max-w-4xl,
    .max-w-3xl {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Footer centering */
    footer {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    footer .container,
    footer > div:first-child {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Ensure sidebar has higher z-index */
    header {
        z-index: 1000 !important;
    }
}

/* Mobile hero section ultimate fix */
@media (max-width: 768px) {
    #home {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
    }
}

/* Vertical alignment fix for tablets */
@media (max-width: 770px) {
    #home {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    #home .hero-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        padding: 2rem 1rem !important;
        margin: 0 !important;
    }
}

/* Hero Title Responsive Sizes */
@media (min-width: 640px) {
    .hero-br { display: block !important; }
    .hero-title { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 768px) {
    .hero-title { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
    .hero-title { font-size: 3.75rem; line-height: 1; }
}

/* ボタンのフォーカス時の青い枠を削除 */
button:focus, button:active {
    outline: none !important;
    border: none !important;
}

/* サービスボタンのスタイル統一 */
.service-button {
    outline: none !important;
    border: none !important;
}

/* Hero buttons responsive layout */
@media (min-width: 640px) {
    .hero-buttons { flex-direction: row !important; }
}
.hero-btn-2:hover { 
    background: #ffffff !important; 
    color: #000000 !important; 
}

/* Scroll indicator animations */
@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes scrollDot {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* Adjust scroll indicator position for desktop with sidebar */
@media (min-width: 1024px) {
    #scroll-indicator {
        left: calc(50% + 100px) !important; /* Half of sidebar width */
    }
}