@charset "UTF-8";

        :root {
            --primary-blue: #2657b2;
            --bg-blue: #668aff;
            --text-main: #333;
            --secondary-pink: #ff66aa;
            --radius: 12px;
            --transition: 0.3s ease;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: var(--bg-blue);
            color: var(--text-main);
            line-height: 1.7;
            overflow-x: hidden;
        }

        .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }

        /* --- ヘッダー --- */
        .site-header { padding: 5px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
        .logo img { max-height: 75px; width: auto; }
        .header-contact { text-align: right; color: white; }
        .tel-top { font-size: 1.8rem; font-weight: bold; display: block; }


        /* --- ナビゲーション --- */
        .global-nav { 
            background: white; 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            border-top: 1px solid #eee;
        }
        .nav-list { list-style: none; display: flex; justify-content: center; }
        .nav-item { position: relative; border-right: 1px solid #ddd; width: 250px; /* ナビゲーションボタン1つあたりの横幅を固定する */}
        .nav-item:first-child { border-left: 1px solid #ddd; }
        .nav-item > a { display: block; padding: 18px 35px; text-align: center; color: var(--primary-blue); font-weight: bold; font-size: 1.05rem; position: relative; }
        .nav-item > a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 4px; background: var(--primary-blue); transition: all 0.3s; transform: translateX(-50%); }
        .nav-item:hover > a::after { width: 100%; }

        /* --- 現在のページのナビゲーションを強調する --- */
        .nav-item.current {
           background-color: #bccaf3; /* 背景を少しだけ青っぽく */
        }

        .nav-item.current > a {
           color: var(--primary-blue); /* 文字をメインの青色に */
        }

        /* 下の線をはじめから表示させる */
        .nav-item.current > a::after {
            width: 100%;
        }

        .dropdown-menu { position: absolute; top: 100%; left: -1px; background: white; min-width: 220px; list-style: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border: 1px solid #ddd; border-top: 3px solid var(--primary-blue); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
        .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu li { border-bottom: 1px solid #eee; }
        .dropdown-menu a { display: block; padding: 15px 20px; color: #555; font-size: 0.95rem; font-weight: bold; }
        .dropdown-menu a:hover { background: #f8f9ff; color: var(--primary-blue); }

        /* --- メインビジュアル --- */
        .hero { position: relative; width: 100%; height: 60vh; min-height: 400px; background: #000; overflow: hidden; }
        .hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
        .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; width: 90%; max-width: 800px; z-index: 10; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

        .animate-text { opacity: 0; transform: translateY(30px); animation: fadeInUp 1s ease-out forwards; display: block; }
        .hero-text-sub { font-size: clamp(1.2rem, 4vw, 2rem); font-weight: 500; margin-bottom: 15px; animation-delay: 1s; }
        .hero-text-main { font-size: clamp(2rem, 8vw, 4.2rem); font-weight: 800; animation-delay: 2s; }
        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

        /* --- ★レイアウト：サイドバー設定★ --- */
        .site-layout {
            display: flex;
            gap: 40px;
            align-items: flex-start;
            margin-top: 60px;
        }
        .main-content {
            flex: 1;
            min-width: 0;
        }
        .sidebar {
            width: 280px;
            flex-shrink: 0;
            position: sticky;
            top: 100px; /* ナビの下に固定 */
        }

        /* --- コンテンツパーツ --- */
        .section-title { border-left: 8px solid var(--secondary-pink); padding-left: 15px; margin-bottom: 30px; color: white; font-size: 1.6rem; font-weight: 800; }
        /* サイドバーの中のタイトル */
        .sidebar-title { color: white; font-weight: bold; margin-bottom: 15px; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 5px; }

        .content-card { background: white; padding: 35px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.15); margin-bottom: 40px; }
        .info-item { display: flex; padding: 15px 0; border-bottom: 1px solid #eee; gap: 15px; }
        .info-item:last-child { border: none; }
        .info-label { background: #444; color: white; padding: 3px 10px; font-size: 0.75rem; border-radius: 4px; height: fit-content; margin-top: 4px; }

        /* --- サイドバーバナー --- */
        .sidebar-banners { display: flex; flex-direction: column; gap: 20px; }
        .side-banner { display: block; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: var(--transition); }
        .side-banner img { width: 100%; height: auto; display: block; }
        .side-banner:hover { transform: translateY(-5px); }

        /* --- 導入事例ボタン --- */
        .case-section { text-align: center; margin: 40px 0; }
        .btn-case { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-blue); color: white; padding: 22px 50px; border-radius: 50px; font-weight: bold; font-size: 1.2rem; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
        .btn-case:hover { transform: translateY(-3px); background: #1a418a; }

        /* --- 事業案内グリッド --- */
        .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
        .banner-card { position: relative; height: 200px; border-radius: var(--radius); overflow: hidden; color: rgb(28, 55, 211); display: block; }
        .banner-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease; }
        .banner-card:hover img { transform: scale(1.1); }
        .banner-overlay { position: absolute; inset: 0; background: rgba(224, 226, 230, 0.705); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; }

        /* --- アクセス --- */
        .access-flex { display: flex; gap: 30px; flex-wrap: wrap; }
        .access-info { flex: 1; min-width: 300px; }
        .access-map { flex: 1.2; min-width: 300px; }
        .contact-box { background: #f4f7fa; padding: 25px; border-radius: 10px; border-left: 6px solid var(--primary-blue); margin-bottom: 25px; }
        .contact-tel { font-size: 2.2rem; font-weight: 800; color: var(--primary-blue); display: block; }
        .map-wrapper { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; border-radius: var(--radius); }
        .map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

        /* --- フッター --- */
        .site-footer { padding: 60px 0 30px; color: white; text-align: center; background: rgba(0,0,0,0.15); margin-top: 60px; }

        /* --- スマホ対応 --- */
        @media (max-width: 768px) {
            .site-header { flex-direction: column; text-align: center; gap: 15px; }
            .nav-list { display: grid; grid-template-columns: 1fr 1fr; }
            .nav-item > a { padding: 12px; font-size: 0.9rem; }
            /* スマホでは2カラムを解除して縦並び */
            .site-layout { flex-direction: column; }
            .sidebar { width: 100%; margin-top: 40px; }
            .sidebar-banners { flex-direction: row; flex-wrap: wrap; }
            .side-banner { width: calc(33.33% - 14px); }
            .access-flex { flex-direction: column; }
        }