@charset "UTF-8";

/* font-familyはTailwindの設定またはHTML側で読み込みますが、
   補助的にここに記述してもOKです */
body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-y: scroll;
}

/* --------------------------------------------------
   共通デザインコンポーネント
   -------------------------------------------------- */
.hero-overlay {
    background: linear-gradient(rgba(194, 65, 12, 0.6), rgba(154, 52, 18, 0.4));
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

/* アクセスタブ用のアクティブスタイル */
.access-tab.active {
    background-color: #ea580c; /* Orange 600 */
    color: white;
    border-left: 4px solid #7c2d12; /* Darker accent */
}

/* ナビゲーションのアクティブスタイル（ページ判定用） */
.nav-link.current {
    color: #ea580c;
    border-bottom: 2px solid #ea580c;
}
2. トップページ (index.html)
ルートディレクトリに配置します。ナビゲーションのリンク先を pages/ フォルダ内に変更しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-63994623-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-63994623-1');
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>株式会社ホクウン | お客様と心をひとつに、戦略的物流を提案。</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        corporate: {
                            blue: '#ea580c',
                            light: '#f97316',
                            accent: '#c2410c',
                            bg: '#fff7ed'
                        }
                    }
                }
            }
        }
    </script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-corporate-bg text-gray-800 flex flex-col min-h-screen">

    <header class="fixed w-full z-50 bg-white/95 shadow-md backdrop-blur-sm transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="flex items-center gap-3">
                <div class="bg-corporate-blue text-white w-10 h-10 flex items-center justify-center rounded font-bold text-xl">H</div>
                <div>
                    <h1 class="text-xl md:text-2xl font-bold text-corporate-blue leading-none">株式会社ホクウン</h1>
                    <p class="text-[10px] text-gray-500 font-bold tracking-widest">HOKUUN CO.,LTD.</p>
                </div>
            </a>

            <nav class="hidden md:flex space-x-5 text-sm font-bold text-gray-700 items-center">
                <a href="index.html" class="nav-link current transition py-2 border-b-2 border-transparent hover:text-corporate-blue">トップページ</a>
                <a href="pages/concept.html" class="nav-link transition py-2 border-b-2 border-transparent hover:text-corporate-blue">会社方針</a>
                <a href="pages/service.html" class="nav-link transition py-2 border-b-2 border-transparent hover:text-corporate-blue">事業内容</a>
                <a href="pages/company.html" class="nav-link transition py-2 border-b-2 border-transparent hover:text-corporate-blue">企業案内</a>
                <a href="pages/access.html" class="nav-link transition py-2 border-b-2 border-transparent hover:text-corporate-blue">アクセス</a>
                <a href="pages/recruit.html" class="nav-link transition py-2 border-b-2 border-transparent hover:text-corporate-blue">求人情報</a>
                <a href="pages/contact.html" class="bg-corporate-blue text-white px-5 py-2 rounded hover:bg-corporate-light transition shadow transform hover:-translate-y-0.5">お問い合わせ</a>
            </nav>

            <button id="menu-btn" class="md:hidden text-corporate-blue text-2xl focus:outline-none">
                <i class="fas fa-bars"></i>
            </button>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 absolute w-full shadow-lg z-40 top-[64px]">
            <div class="flex flex-col p-4 space-y-4 font-bold text-gray-700">
                <a href="index.html" class="mobile-link hover:text-corporate-blue">トップページ</a>
                <a href="pages/concept.html" class="mobile-link hover:text-corporate-blue">会社方針</a>
                <a href="pages/service.html" class="mobile-link hover:text-corporate-blue">事業内容</a>
                <a href="pages/company.html" class="mobile-link hover:text-corporate-blue">企業案内</a>
                <a href="pages/access.html" class="mobile-link hover:text-corporate-blue">アクセス</a>
                <a href="pages/recruit.html" class="mobile-link hover:text-corporate-blue">求人情報</a>
                <a href="pages/contact.html" class="mobile-link block text-center bg-corporate-blue text-white py-3 rounded">お問い合わせ</a>
            </div>
        </div>
    </header>

    <main class="flex-grow pt-[64px]">
        <section id="home">
            <div class="relative h-[calc(100vh-64px)] min-h-[600px] flex items-center justify-center overflow-hidden">
                <div class="absolute inset-0 z-0">
                    
                    <div class="absolute inset-0 hero-overlay"></div>
                </div>
                <div class="relative z-10 container mx-auto px-4 text-center text-white">
                    <h2 class="text-lg md:text-2xl font-bold mb-6 tracking-widest text-gray-800">一般貨物自動車運送事業</h2>
                    <h1 class="text-3xl md:text-6xl font-extrabold mb-8 leading-tight text-shadow">
                        お客様と心をひとつに、<br>
                        <span class="text-yellow-300">戦略的物流</span>を提案。
                    </h1>
                    <p class="text-lg md:text-xl mb-12 max-w-3xl mx-auto leading-relaxed text-shadow opacity-95">
                        私たちは、お客様が心を込めた商品に、更に心を込めて大切にお届けし、<br class="hidden md:inline">
                        大きなシナジー効果を生み出せるよう日々努力しています。
                    </p>
                </div>
            </div>

            <div class="py-16 bg-white border-b border-gray-100">
                <div class="container mx-auto px-4">
                    <div class="max-w-4xl mx-auto">
                        <div class="text-center mb-10">
                            <h2 class="text-2xl font-bold text-corporate-blue tracking-wider border-b-2 border-corporate-blue inline-block pb-1">新着情報</h2>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                            <ul class="divide-y divide-gray-100">
                                <li class="p-5 hover:bg-gray-50 transition flex flex-col md:flex-row gap-2 md:gap-6 items-start md:items-center group">
                                    <div class="flex items-center gap-3 shrink-0">
                                        <span class="text-sm font-bold text-gray-500 font-mono">2024.11.05</span>
                                        <span class="bg-corporate-blue text-white text-xs px-2 py-0.5 rounded">お知らせ</span>
                                    </div>
                                    <p class="text-gray-700 text-sm md:text-base group-hover:text-corporate-blue transition">敦賀営業所の住所を莇生野から萩野町へ変更しました。</p>
                                </li>
                                <li class="p-5 hover:bg-gray-50 transition flex flex-col md:flex-row gap-2 md:gap-6 items-start md:items-center group">
                                    <div class="flex items-center gap-3 shrink-0">
                                        <span class="text-sm font-bold text-gray-500 font-mono">2017.06.30</span>
                                        <span class="bg-corporate-blue text-white text-xs px-2 py-0.5 rounded">お知らせ</span>
                                    </div>
                                    <p class="text-gray-700 text-sm md:text-base group-hover:text-corporate-blue transition">奥越営業所を勝山市上高島に移転しました。</p>
                                </li>
                                <li class="p-5 hover:bg-gray-50 transition flex flex-col md:flex-row gap-2 md:gap-6 items-start md:items-center group">
                                    <div class="flex items-center gap-3 shrink-0">
                                        <span class="text-sm font-bold text-gray-500 font-mono">2015.06.10</span>
                                        <span class="bg-gray-500 text-white text-xs px-2 py-0.5 rounded">その他</span>
                                    </div>
                                    <p class="text-gray-700 text-sm md:text-base group-hover:text-corporate-blue transition">サイトをオープンしました。</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-900 text-white pt-16 pb-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-start gap-8 mb-12">
                <div class="md:w-1/2">
                    <h2 class="text-2xl font-bold mb-4">株式会社ホクウン</h2>
                    <p class="text-gray-400 mb-6">
                        〒915-0893 福井県越前市片屋町58号4番地の27<br>
                        TEL: 0778-24-3500
                    </p>
                </div>
                <div class="md:w-1/2 md:text-right">
                    <ul class="space-y-2 text-sm text-gray-400 inline-block text-left">
                        <li><a href="index.html" class="hover:text-white transition">トップページ</a></li>
                        <li><a href="pages/concept.html" class="hover:text-white transition">会社方針</a></li>
                        <li><a href="pages/service.html" class="hover:text-white transition">事業内容</a></li>
                        <li><a href="pages/company.html" class="hover:text-white transition">企業案内</a></li>
                        <li><a href="pages/access.html" class="hover:text-white transition">アクセス</a></li>
                        <li><a href="pages/recruit.html" class="hover:text-white transition">求人情報</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 pt-6 text-center text-xs text-gray-500">
                <p>© HOKUUN CO.,LTD. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        const menuBtn = document.getElementById('menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>