/* =========================================
           全体設定（黒ベース・オレンジアクセント）
        ========================================= */
        :root {
            --primary-orange: #FF6600;
            --bg-black: #000000;
            --bg-white: #f2f2f2;            
            --bg-dark-gray: #1e1e1e;
            --bg-green: #c3ffb0;
            --bg-beige: #ffffe8;
            --text-white: #fff;
            --text-black: #333;
            --text-orange: #FF6600;
        }
        
        * {
            box-sizing: border-box;
        }

        body {
            font-family: "M PLUS Rounded 1c", sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-black);
            background-color: var(--bg-beige);
            scroll-behavior: smooth;
            padding-top: 70px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /* 軽量版リセットCSSの追加例 */
            h1, h2, h3, h4, p, ul, figure {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none; /* リストの「・」を消す */
            }

            a {
                text-decoration: none; /* リンクの下線を消す */
                color: inherit; /* リンクの色を親要素に合わせる */
            }

            img {
                max-width: 100%;
                height: auto;
                vertical-align: bottom; /* 画像の下にできる謎の隙間を消す */
        }
        /* =========================================
           ヘッダーとナビゲーション
        ========================================= */
        header {
            background-color: var(--primary-orange);
            border-bottom: 3px solid var(--primary-orange);
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            padding: 0 40px;
        }

        .logo {
            font-size: 22px;
            font-weight: bold;
            color: var(--text-white);
            text-decoration: none;
            letter-spacing: 1px;
            white-space: nowrap;
            flex-shrink: 0;
            z-index: 1001;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: var(--primary-orange);
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        .hamburger.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        nav a {
            text-decoration: none;
            color: var(--text-white);
            font-size: 14px;
            font-weight: bold;
            transition: color 0.3s;
            white-space: nowrap;
        }

        nav a:hover {
            color: var(--bg-beige);
        }

        /* =========================================
           メインビジュアル
        ========================================= */
        .hero {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../image/02.jpg');
            background-size: cover;      /* 枠いっぱいに画像を広げる */
            background-position: center; /* 画像の中央を表示する */
            background-repeat: no-repeat;/* 画像の繰り返しを防ぐ */
            background-color: #000000;
            color: var(--text-white);
            text-align: center;
            padding: 120px 20px 100px;
            border-bottom: 1px solid #333;
        }

        .hero h1 {
            font-size: 40px;
            margin: 10px 0 20px;
            color: var(--primary-orange);
            text-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
            line-height: 1.3;
        }

        .hero p.subtitle {
            font-size: 32px;
            color: var(--text-gray);
            margin: 0;
        }

        .hero p.date {
            font-size: 24px;
            font-weight: bold;
            background-color: var(--primary-orange);
            color: #000;
            display: inline-block;
            padding: 12px 30px;
            border-radius: 50px;
            margin-top: 10px;
        }

        /* =========================================
           セクション共通（すべて中央寄せに変更）
        ========================================= */
        section {
            padding: 80px 0; /* ★ 左右のpaddingを消して、背景が画面いっぱいに広がるように変更 */
            /* max-width: 1000px;  ★ これを削除（外枠は制限しない） */
            /* margin: 0 auto 40px; ★ これも削除（外枠は中央寄せしない） */
            text-align: center;
        }

        .inner-container {
            max-width: 880px; /* ★ 中身の最大幅をご希望の880pxに設定 */
            margin: 0 auto; /* ★ 中身だけを画面の中央に配置 */
            padding: 0 20px; /* ★ スマホなどで画面が狭くなった時に、端に文字がくっつかないようにする余白 */
        }

       /** section:nth-child(odd) {
            background-color: var(--bg-white);
        }**/

        /* 中央寄せに合わせた見出しデザイン */
        section h2 {
            color: var(--primary-orange);
            font-size: 2rem;
            margin-top: 0;
            margin: 30px 0;
            display: inline-block;
            border-bottom: 3px solid var(--primary-orange);
            padding-bottom: 10px;
        }

        section p.desc {
            font-size: 20px;
            line-height: 1.8;
            color: var(--text-orange);
            margin-bottom: 15px;
            font-weight: 700;
        }


            /* =========================================
            「パンチアウト鹿児島とは？」セクション（2カラム・アニメーション）
            ========================================= */
            .about-wrapper {
                display: flex;
                align-items: center; /* 縦の中央で揃える */
                gap: 3rem; /* 画像とテキストの間の余白（約48px） */
                text-align: left; /* 2カラムの時はテキストを左揃えにした方が読みやすいです */
            }

            .about-image {
                flex: 1; /* 横幅の半分を使う */
            }

            .about-image img {
                width: 100%;
                height: auto;
                border-radius: 8px; /* 画像の角を少し丸くする */
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 画像に少し影をつけて立体感を出す */
            }

            .about-text {
                flex: 1; /* 横幅のもう半分を使う */
            }

            /* ▼ アニメーションの設定 ▼ */
            /* 初期状態：透明（opacity: 0）で、少し下（translateY）に配置 */
            .fade-in-up {
                opacity: 0;
                transform: translateY(40px);
                transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            }

            /* 発火状態：不透明になり、元の位置に戻る（JSでこのクラスが付与されます） */
            .fade-in-up.is-visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* ▼ スマホ用レスポンシブ対応（既存の @media (max-width: 768px) の中に追加してもOKです） ▼ */
            @media (max-width: 768px) {
                .about-wrapper {
                    flex-direction: column; /* 横並びから縦並びに変更 */
                    text-align: center; /* スマホの時は中央揃えに戻す */
                }
            }

        /* =========================================
           3. タイムテーブル
        ========================================= */
        #timetable {
            background-color: #ffffff; /* 背景を真っ白に設定 */
            
            /* ▼ 必要に応じて、上下に少し余白を足すと綺麗に区切れます ▼ */
            /* padding: 80px 40px; */ 
        }






        /* =========================================
           要項・ルール（角丸テーブル・全体3px線）
        ========================================= */
        .outline-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            text-align: left;
            margin-top: 20px;
            background-color: #ffffff;
            font-weight: 700;
            
            /* ▼ 外枠の線を3pxにし、角が細くなるのを防ぐ設定 ▼ */
            border: none; /* 元のborderを一旦消す */
            box-shadow: 0 0 0 3px var(--text-black); /* 影を代用して綺麗な3pxの外枠を作る */
            border-radius: 12px;
            overflow: hidden;
            
            /* box-shadowの線が見切れないように少し余白を持たせる */
            margin-bottom: 5px; 
            margin-left: 3px;
            margin-right: 3px;
            width: calc(100% - 6px); /* 余白分だけ幅を調整 */
        }

        .outline-table th {
            background-color: var(--primary-orange);
            color: #ffffff;
            padding: 20px;
            width: 25%;
            /* ▼ 中の区切り線も3pxに変更 ▼ */
            border-bottom: 3px solid var(--text-black); 
            border-right: 3px solid var(--text-black);  
            
            /* ▼ ここを top から middle に変更 ▼ */
            vertical-align: middle; 
            
            font-size: 1.2rem;
            text-align: center;
        }

        .outline-table td {
            padding: 20px;
            /* ▼ 中の区切り線も3pxに変更 ▼ */
            border-bottom: 3px solid var(--text-black); 
            line-height: 1.8;
            font-size: 1.1rem;
            color: var(--text-black);
        }

        /* 一番下の行の下線を消す（外枠の線と二重になるのを防ぐため） */
        .outline-table tr:last-child th,
        .outline-table tr:last-child td {
            border-bottom: none;
        }

        .table-list {
            padding-left: 1.5rem;
            margin: 10px 0 0 0;
            list-style-type:
        }

        
        /* ▼ テーブルの上の画像枠（横並び対応） ▼ */
        .table-img-wrap {
            display: flex;             /* ★中の画像を横並びにする */
            justify-content: center;   /* ★全体を中央に寄せる */
            align-items: center;       /* ★画像の高さが違う場合、縦の真ん中で揃える */
            gap: 20px;                 /* ★画像と画像の間の隙間（お好みで調整） */
            margin-top: 40px;
            margin-bottom: 20px;
        }
        
        .table-img-wrap img {
            max-width: calc(50% - 10px); /* 2枚並べた時に画面からはみ出さないように計算 */
            height: auto;
            border-radius: 8px; /* 画像の角を少し丸くすると柔らかい印象になります（不要なら削除OK） */
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽く影をつけると表と馴染みます（不要なら削除OK） */
        }

        /* ▼ スマホ用の調整（既存の @media (max-width: 768px) の中に追加してもOKです） ▼ */
        @media (max-width: 768px) {
            .table-img-wrap {
                flex-direction: column; /* ★スマホでは縦並びに切り替える */
                gap: 15px; /* 縦並びの時の隙間 */
            }
            .table-img-wrap img {
                max-width: 100%; /* 縦並びの時は横幅いっぱいに広げる */
            }
        }



        /* =========================================
           4. 参加チーム（カードレイアウト）
        ========================================= */
        #teams {
            background-color:#53dd66;
            margin-bottom: 40px; 
        }


        #teams h2 {
            color:#fff;
            border-bottom:3px solid #fff;
        }


        .teams-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            text-align: center; /* カード内のテキストも中央寄せ */
            
        }

        .team-card {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s;
        }

        .team-card:hover {
            transform: translateY(-5px);
            border-color: #53dd66;
        }

        .team-photo {
            width: 100%;
            aspect-ratio: 16/9;
            background-color: #333;
            border-radius: 4px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 12px;
            overflow: hidden;
        }

        .team-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .team-name {
            color: #000;
            font-size: 20px;
            font-weight: bold;
            margin: 0 0 10px 0;
            font-weight: 700;

        }

        .team-message {
            font-size: 0.8rem;
            color: var(--text-black);
            line-height: 1.6;
            margin-bottom: 20px;
            flex-grow: 1;
            text-align: left;
            font-weight:500;
        }

        .team-btn-wrap {
            text-align: center;
        }

        .team-btn {
            display: inline-block;
            background-color:#53dd66;
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 1.2rem;
            transition: background-color 0.3s;
            font-weight: 700;
        }

        .team-btn:hover {
            background-color: #000;
        }

        /* =========================================
           お申し込みセクション
        ========================================= */
        /* エントリーカード全体 */
        .entry-card {
            background-color: #ffffff;
            border: 3px solid var(--primary-orange);
            border-radius: 12px;
            padding: 40px;
            margin: 0 auto 40px;
            text-align: center;
        }

        /* 締切日の強調 */
        .entry-deadline {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-black);
            margin-bottom: 20px;
        }
        .entry-deadline span {
            color: #d32f2f;
            font-size: 2rem;
            border-bottom: 3px solid #d32f2f;
            padding: 0 10px;
            margin-left: 10px;
        }

        .entry-desc {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        /* 準備するものの注意書きエリア */
        .entry-alert {
            background-color: var(--bg-beige);
            border-radius: 8px;
            padding: 20px;
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--text-black);
            margin-bottom: 30px;
            text-align: left;
        }

        /* 応募ボタンのデザイン */
        .entry-btn-wrap {
            margin-top: 10px;
        }
        .entry-btn {
            display: inline-block;
            background-color: var(--primary-orange);
            color: #ffffff;
            font-size: 1.4rem;
            font-weight: bold;
            text-decoration: none;
            padding: 18px 40px;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        .entry-btn:hover {
            background-color: #e65c00;
            transform: translateY(-3px);
            color: #ffffff;
        }

        /* 注意事項のボックス */
        .notes-box {
            background-color: #ffffff;
            border: 3px solid var(--text-black);
            border-radius: 12px;
            padding: 30px;
            margin: 0 auto;
            text-align: left;
        }

        .notes-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #d32f2f;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 3px dashed #ccc;
            padding-bottom: 10px;
        }

        /* 番号付きリスト（ol）の調整 */
        .notes-list {
            padding-left: 1.5rem;
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-black);
            font-weight: 400;
        }
        .notes-list li {
            margin-bottom: 15px;
        }
        .notes-list li:last-child {
            margin-bottom: 0;
        }

        /* スマホ用の調整 (既存の @media (max-width: 768px) の中に追加) */
        @media (max-width: 768px) {
            .entry-card {
                padding: 25px 15px;
            }
            .entry-deadline {
                font-size: 1.2rem;
            }
            .entry-deadline span {
                font-size: 1.5rem;
                display: block;
                margin: 10px 0 0 0;
            }
            .entry-btn {
                font-size: 1.1rem;
                padding: 15px 20px;
                width: 100%; /* スマホではボタンを横幅いっぱいに */
            }
            .notes-box {
                padding: 20px 15px;
            }
            .notes-list {
                font-size: 0.85rem;
            }
        }



        /* =========================================
           5. 協賛社（バナー画像レイアウト）
        ========================================= */
        .sponsor-block {
            margin-bottom: 50px;
        }

        /* 協賛社の各見出し（吹き出しデザイン） */
        .sponsor-title {
            font-size: 1.5rem;
            color: #ffffff; /* 文字色を白に */
            background-color: var(--primary-orange); /* 背景をオレンジに */
            padding: 10px 30px; /* 上下・左右の余白 */
            border-radius: 50px; /* 角を丸くしてポップな印象に */
            margin-bottom: 30px; /* 尻尾の分、下の余白を少し広めに取る */
            display: inline-block;
            position: relative; /* ★重要：尻尾を配置する基準点にする */
            border-bottom: none; /* 元の黒いアンダーラインを消す */
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽く影をつけて立体感を出す */
        }

        /* 吹き出しの尻尾（下向きの三角形）を作る設定 */
        .sponsor-title::after {
            content: '';
            position: absolute;
            bottom: -12px; /* 枠の下に配置 */
            left: 50%; /* 横幅の真ん中に配置 */
            transform: translateX(-50%); /* ぴったり中央に揃えるための調整 */
            border-width: 12px 12px 0 12px; /* 三角形のサイズ */
            border-style: solid;
            /* オレンジ色の三角形を作る設定 */
            border-color: var(--primary-orange) transparent transparent transparent; 
        }

        /* ----- 特別協賛 ----- */
        .sponsor-special {
            display: flex;
            justify-content: center;
        }
        .banner-special {
            width: 100%;
            max-width: 460px;
            aspect-ratio: 21/9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            text-decoration: none;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .banner-special:hover {
            transform: translateY(-3px);
        }
        .banner-prize img {
            width: 100%;
            /* ▼ flex: 1; を削除して、高さを固定の割合（75%）に変更 ▼ */
            height: 75%; 
            object-fit: contain;
            object-position: bottom;
        }


        /* ----- 各賞協賛 ----- */
        .sponsor-prizes {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            justify-items: center;
            align-items: flex-end; /* ★グリッド内の要素自体を下揃えにする */
        }

        .banner-prize {
            position: relative; /* ★追加：ラベルを配置するための基準点にする */
            width: 100%;
            max-width: 360px;
            aspect-ratio: 16/9;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end; /* 画像を下端に揃える */
            padding: 10px;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .banner-prize:hover {
            transform: translateY(-3px);
        }

        .banner-prize img {
            width: 100%;
            
            /* ▼ height: 100%; を削除して、代わりに flex: 1; を追加します ▼ */
            flex: 1; 
            
            object-fit: contain;
            object-position: bottom;
            min-height: 0;
        }

        .prize-label {
            position: absolute; /* ★追加：ラベルを画像とは切り離して浮かせる */
            top: 5px; /* ★上からの位置（必要に応じて調整してください） */
            left: 50%; /* ★横幅の真ん中に配置 */
            transform: translateX(-50%); /* ★ぴったり中央に合わせる */
            font-size: 0.85rem;
            color: #ffffff;
            background-color: var(--primary-orange);
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: bold;
            letter-spacing: 1px;
            white-space: nowrap; /* 文字の折り返しを防ぐ */
            z-index: 2; /* 画像より手前に表示させる */
        }
        /* ----- パートナー ----- */
        .sponsor-partners {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            justify-items: center;
        }
        .banner-partner {
            width: 100%;
            aspect-ratio: 3/2;
            background-: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            text-decoration: none;
            overflow: hidden;
            border: 1px solid #ccc; /* 小さいバナーには少し枠線をつける */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .banner-partner:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        .banner-partner img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 5px;
        }


        #contact .inner-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 25px;
        }


        /* =========================================
           お問い合わせ内のSNSリンク
        ========================================= */
        .sns-links {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 30px; /* アイコン同士の間隔 */
        }

        .sns-link {
            text-decoration: none;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .sns-link i {
            font-size: 2.8rem; /* アイコンの大きさ */
        }

        /* Instagramの色設定 */
        .sns-link.instagram i {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* エックス(X)の色設定 */
        .sns-link.x-twitter i {
            color: #000000; /* Xはシンプルに黒、または背景に合わせて調整してください */
        }

        .sns-link:hover {
            transform: scale(1.2);
            opacity: 0.8;
        }

        /* =========================================
           フッター
        ========================================= */
        footer {
            background-color: #000000;
            color: var(--text-white);
            text-align: center;
            padding: 30px 20px;
            border-top: 1px solid #333;
            font-size: 14px;
        }

        /* =========================================
           スマホ用レスポンシブ対応
        ========================================= */
        @media (max-width: 768px) {
            header {
                padding: 0 20px;
            }
            .logo { 
                font-size: 18px; 
            }
            
            .hamburger {
                display: flex;
            }

            nav ul {
                position: absolute;
                top: 70px;
                left: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.95);
                flex-direction: column;
                align-items: center;
                gap: 0;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out;
            }

            nav ul.active {
                max-height: 400px;
                border-bottom: 3px solid var(--primary-orange);
            }

            nav ul li {
                width: 100%;
                text-align: center;
            }

            nav ul li a {
                display: block;
                padding: 15px 0;
                font-size: 1.5rem;
                border-bottom: 1px solid #333;
            }
            
            nav ul li:last-child a {
                border-bottom: none;
            }

            .hero { padding: 80px 20px 50px; }
            .hero h1 { font-size: 26px; }
            section { padding: 50px 20px; }

            .teams-grid { grid-template-columns: 1fr; }
            .sponsor-prizes { grid-template-columns: 1fr; }
            .sponsor-partners { grid-template-columns: repeat(2, 1fr); }
        }