/* === 共通設定 (business.htmlより継承) === */
        :root {
            --main-blue: #1a4d93;    /* 濃いブルー */
            --accent-teal: #1D717E; /* アクセントカラー（ティール） */
            --accent-orange: #ff8c00; /* ★アクセントカラー（オレンジ: ボタン用） */
            --light-blue: #e6f0ff;   /* 背景用ライトブルー */
        }
        body {
            background-color: white;
            color: #333;
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        }
        .bg-main-blue { background-color: var(--main-blue); }
        .text-main-blue { color: var(--main-blue); }
        .text-accent-teal { color: var(--accent-teal); }
        .bg-accent-teal { background-color: var(--accent-teal); }
        .border-accent-teal { border-color: var(--accent-teal); }
        
        .text-accent-orange { color: var(--accent-orange); }
        .bg-accent-orange { background-color: var(--accent-orange); }

        /* 🔥 今回の修正点: スクロール時にサブメニューの文字色を強制的に濃い青にする */
        /* ヘッダーのサブメニュー内のリンクの色を強制的に濃い青に固定 */
        header nav .group ul a {
            color: var(--main-blue) !important;
        }
        
        /* === 下層ページ用ヒーローセクション === */
        .page-hero {
            position: relative;
            width: 100%;
            height: 50vh;
            min-height: 400px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 画像を暗くするオーバーレイ */
        .page-hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .page-hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            color: white;
        }

        /* === ハンバーガーメニュー用スタイル === */
        .bar {
            display: block;
            width: 28px;
            height: 3px;
            background-color: white;
            margin: 6px 0;
            transition: 0.3s;
        }
        
        /* === フッターリンク === */
        footer a { color: white !important; }
        
        /* カスタムシャドウ（ホバー時の強調用） */
        .hover\:shadow-3xl:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        /* ヒーロー背景画像のPlaceholder */
        .hero-business-bg {
            background-image: url('https://placehold.co/1920x600/1a4d93/ffffff?text=Business+Overview');
        }

        /* 新しいカードコンテナのスタイル */
        .card-grid {
            display: grid;
            gap: 1.5rem; /* gap-6 */
        }
        /* PC (lg) サイズでの4列レイアウト */
        @media (min-width: 1024px) {
            .card-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        /* タブレット (md) サイズでの2列レイアウト */
        @media (min-width: 768px) and (max-width: 1023px) {
            .card-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }


        /* === 1. スライドショーとヒーローセクションのスタイル === */
        .slide-item {
            /* スライドの表示/非表示を制御 */
            opacity: 0;
            transition: opacity 1.5s ease-in-out; /* フェードアニメーション */
            background-size: cover;
            background-position: center;
        }
        .slide-item.active {
            opacity: 1;
        }
        
        /* オーバーレイで文字を見やすくする */
        .slide-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.35); /* 35%の暗いオーバーレイ */
        }


/* TOPページ専用新規追加: モバイルデバイスでのヒーローセクションの高さ調整 */
@media (max-width: 1023px) { /* lgブレイクポイント未満 */
    /* ビューポートの高さの65%に設定。より小さくしたい場合はこの値を調整してください。 */
    .hero {
        height: 65vh !important; /* Tailwindのh-screenを上書き */
    }
}
/* 画面全体にフィットさせたい場合は h-screen のままにしてください */

.slide-item {
    /* スライドの表示/非表示を制御 */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* フェードアニメーション */
    /* 背景画像はコンテナ全体を覆う (通常はこれでOK) */
    background-size: cover; 
    background-position: center;
}

/*プライバシーポリシーページ専用*/
        /* ポリシーコンテンツ固有のスタイル */
        .policy-section h3 {
            border-left: 5px solid var(--accent-teal);
            padding-left: 1rem;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--main-blue);
        }
        .policy-section p, .policy-section li {
            font-size: 1rem;
            color: #444;
        }


        /* === フッターリンク (business.htmlより継承) === */
        footer a { color: white !important; }

        /* === 採用ページ固有スタイル (recruit.htmlより再定義) === */
        .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

        /* ボタンのスタイル (recruit.htmlのbtn-primaryを移植) */
        .btn-primary {
            background-color: var(--accent-orange); /* recruit.htmlの--rokka-accentに相当 */
            color: white;
            transition: background-color 0.3s, transform 0.1s;
        }
        .btn-primary:hover {
            background-color: #E67A00; /* ホバー色を調整 */
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3);
        }

        /* 強調表示 (recruit.htmlのhighlight-boxを移植) */
        .highlight-box {
            background-color: var(--light-blue); /* recruit.htmlの--rokka-lightに相当 */
            border-left: 5px solid var(--main-blue); /* recruit.htmlの--rokka-blueに相当 */
        }
        
        /* アイコンの代わりに使用するCSSの装飾 (recruit.htmlのlist-itemを移植) */
        .list-item::before {
            content: '✓';
            color: var(--accent-orange); /* recruit.htmlの--rokka-accentに相当 */
            font-weight: bold;
            margin-right: 0.5rem;
        }

        /* セクションタイトル (recruit.htmlのsection-titleを移植) */
        .section-title {
            position: relative;
            padding-bottom: 0.5rem;
            color: var(--main-blue); /* recruit.htmlの--rokka-blueに相当 */
            font-weight: 700;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 4px;
            background-color: var(--accent-orange); /* recruit.htmlの--rokka-accentに相当 */
            border-radius: 2px;
        }

        /* 現場代理人の文字色をメインブルーに統一 (旧ページはtext-rokka-blue) */
        .text-rokka-blue { color: var(--main-blue); }

        /* HEROセクションの背景画像（Placeholderを使用） */
        .hero-recruit-bg {
            background-image: url('https://placehold.co/1920x600/1a4d93/ffffff?text=Recruit+Information');
        }
        
        /* 不要になったサブメニューの色制御クラスは削除 */
        /* .submenu-link-white {
            color: white !important;
        }
        .submenu-link-black {
            color: var(--main-blue) !important;
        } */

        /* === フォーム固有のスタイル === */
        .required-badge {
            background-color: #ef4444; /* red-500 */
            color: white;
            font-size: 0.75rem;
            padding: 0.1rem 0.4rem;
            border-radius: 0.25rem;
            margin-left: 0.5rem;
            vertical-align: middle;
        }