/* メインビジュアル */

         /* ヒーローセクションの追加スタイル */
            .hero {
                position: relative;
                overflow: hidden;
            }

           .hero-content {
               position: relative;
               width: 100%;
               max-width: 100%;
               margin: 0 auto;
           }

           .hero-text {
               text-align: center;
               padding: 2rem 0;
               color: white;
           }

           .hero-text h2 {
               font-size: 2.5rem;
               margin-bottom: 1rem;
               color: white;
               white-space: nowrap;
           }

           .hero-text p {
               font-size: 1.2rem;
               opacity: 0.8;
               color: white;
           }

            .hero-mockup {
                width: 100%;
                height: auto;
                display: block;
                animation: fadeInScale 1.2s ease-out;
                object-fit: cover;
                max-width: 100vw;
            }

            @keyframes fadeInScale {
                from {
                    opacity: 0;
                    transform: scale(0.95) translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }

            /* App Storeボタンをオーバーレイ */
            .app-store-overlay {
                position: absolute;
                bottom: 8%;
                left: 35%;
                transform: none;
                transition: all 0.3s ease;
                z-index: 10;
                animation: fadeInUp 1s ease-out 0.8s both;
                width: 100%;
                max-width: 400px;
            }

            .app-store-overlay img {
                width: 100%;
                height: auto;
                max-width: 380px;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateX(-50%) translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
            }



            /* レスポンシブ対応 */
            @media (max-width: 768px) {
                .hero-text h2 {
                        font-size: 1.8rem;
                    }

                    .app-store-overlay {
                        bottom: 5%;
                        max-width: 250px;
                    }

                    .app-store-overlay img {
                        max-width: 200px;
                    }

                .app-store-overlay svg {
                    width: 160px;
                    height: 48px;
                }


            }


        /* 機能セクション */
        .features {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .features h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #333;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

        .feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            background: white;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: #3E96F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #333;
        }

        .feature-card p {
            color: #666;
            line-height: 1.8;
        }

        /* アイコン */
        .fa-play {
        color: #fefefe;
        font-size: 30px;
        }

        .fa-check{
        color: #fefefe;
        font-size: 30px;
        }

        .fa-calendar-days{
        color: #fefefe;
        font-size: 30px;
        }

        /* 使い方セクション */
        .how-it-works {
            background: #f8f9fa;
            padding: 4rem 2rem;
        }

        .how-it-works h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #333;
        }

        .steps {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .step {
            text-align: center;
            background: white;
            padding: 2rem;
            border-radius: 15px;
            position: relative;
        }

        .step-number {
            background: #FFC107;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin: 0 auto 1rem;
        }

        .step h3 {
            margin-bottom: 1rem;
            color: #333;
        }

        /* ダウンロードセクション */
        .download {
            background: linear-gradient(135deg, #3C69EB 0%, #3E96F3 100%);
            color: white;
            text-align: center;
            padding: 4rem 2rem;
        }

        .download h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .download p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .download-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .store-button {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: rgba(255,255,255,0.2);
            border: 2px solid white;
            border-radius: 10px;
            color: white;
            text-decoration: none;
            transition: all 0.3s;
        }

        .store-button:hover {
            background: white;
            color: #667eea;
        }



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

        /* レスポンシブデザイン */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .nav-links {
                display: none;
            }

            .features h2,
            .how-it-works h2,
            .download h2 {
                font-size: 2rem;
            }
        }

        /* スクロールアニメーション用 */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }