@charset "utf-8";
/* CSS Document */
        /* ================================================= */
        /* Tailwind カスタム設定 (ポップな新配色を定義) */
        /* ================================================= */
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // メインカラーをホットピンク系に変更
                        'primary-main': '#EC4899',      /* Pink 500 */
                        'primary-dark': '#DB2777',      /* Pink 600 */
                        // アクセントカラーをエネルギッシュなオレンジ系に変更
                        'secondary-accent': '#F59E0B',  /* Amber 500 */
                        // チームカラー (彩度を上げてよりポップに)
                        'team-miyagi': '#01c5ff',        
                        'team-hiroshima': '#fe0000',       
                    },
                    fontFamily: {
                        sans: ['Inter', 'Noto Sans JP', 'sans-serif'],
                    },
                    boxShadow: {
                        // 強調表示用の新しいシャドウ
                        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
                    }
                }
            }
        }

        /* ================================================= */
        /* 共通スタイル & アニメーション */
        /* ================================================= */
        /* 共通スタイル: 固定ヘッダーの高さ分、コンテンツを下にずらす */
        body {
            padding-top: 64px; /* h-16 = 64px */
            /* 背景をごく薄いレモンイエローに変更 */
            background:linear-gradient(
  to right,
  #5fd1fa 0%,    /* 濃い水色（ポップなbright cyan系） */
  #aeeeff 22%,   /* 明るいポップ水色 */
  #fbd9f2 48%,   /* 淡いピンク */
  #fca9be 72%,   /* コーラルピンク（赤への橋渡し） */
  #fb6b82 100%   /* 赤ピンク（強すぎないビビッド） */
);
        }

        /* ------------------------------------- */
        /* アニメーション用CSS (フェードアップ) */
        /* ------------------------------------- */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .js-animate-item {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.3s, transform 0.3s; 
        }

        .js-animate-item.is-visible {
            animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        /* モバイルメニュー用のスムーズな開閉 */
        .mobile-menu-content {
            max-height: 0;
            transition: max-height 0.3s ease-in-out;
            overflow: hidden;
        }
        .mobile-menu-content.is-open {
            max-height: 500px;
        }

        /* ------------------------------------- */
        /* 画像のホバーエフェクト（インラインから移動） */
        /* ------------------------------------- */
        .image-hover-scale:hover {
            transform: scale(1.02);
        }