@charset "UTF-8";

/* Google Fontsから「Noto Sans JP」の3つの太さ（標準、太字、極太）を読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

/* 変数定義（ネイビーとオレンジ） */
:root {
    --color-main: #1A365D; /* 深めの青（ネイビー） */
    --color-accent: #E65100; /* オレンジ */
    --color-text: #333333;
    --color-bg-gray: #F7F9FA;
    --font-family: 'Noto Sans JP', sans-serif;
}

/* リセット＆ベース */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: var(--font-family); 
    color: var(--color-text); 
    line-height: 1.6; 
    font-weight: 400; 
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 900; /* 力強さと安定感を演出する極太 */
    letter-spacing: 0.05em; 
}

a { 
    text-decoration: none; 
    color: inherit; 
}

ul { 
    list-style: none; 
}

img { 
    max-width: 100%; 
    height: auto; 
}

/* 共通クラス */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

.section { 
    padding: 80px 0; 
}

.bg-gray { 
    background-color: var(--color-bg-gray); 
}

/* セクションタイトル */
.section-title { 
    text-align: center; 
    font-size: 32px; 
    margin-bottom: 50px; 
    color: var(--color-main); 
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-accent);
    margin: 15px auto 0;
}

.section-title .en { 
    display: block; 
    font-size: 14px; 
    color: #888; 
    margin-top: 5px; 
    letter-spacing: 0.1em; 
    font-weight: 700;
}

/* =========================================
   共通ボタンデザイン（インダストリアル・グラデーション）
========================================= */
.btn-wrap {
    display: flex;
    justify-content: center;
    gap: 30px; /* ボタン同士の間隔 */
    margin-top: 50px;
    flex-wrap: wrap; /* スマホ画面などで幅が狭い場合は折り返す */
}

/* 一覧を見る等のメインボタン（ネイビーのグラデーション） */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ★変更：単色から、斜めに光が当たるような硬派なグラデーションへ */
    background: linear-gradient(135deg, var(--color-main) 0%, #2A528A 100%); 
    color: #fff;
    padding: 20px 60px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
    transition: all 0.3s ease;
    border: none; /* グラデーションを活かすために枠線は消す */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 少しだけ落とし影をつけて重厚感を出す */
}

.btn-primary .arrow {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    margin-left: 20px;
    transition: all 0.3s ease;
}

.btn-primary .arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* ホバー時の動き（グラデーションの色を反転させて光の当たり方を変える） */
.btn-primary:hover {
    background: linear-gradient(135deg, #2A528A 0%, var(--color-main) 100%);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 影を少し濃くして浮き上がらせる */
    transform: translateY(-2px);
}

.btn-primary:hover .arrow { 
    width: 40px; 
}


/* ヘッダーのお問い合わせボタン（オレンジのグラデーション） */
.btn-contact { 
    /* ★変更：目を引くけれど安っぽくない、シャープなオレンジグラデーション */
    background: linear-gradient(135deg, var(--color-accent) 0%, #FF8A00 100%); 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 0; 
    font-weight: 700; 
    transition: all 0.3s ease; 
    border: none;
    box-shadow: 0 2px 4px rgba(230, 81, 0, 0.3);
}

.btn-contact:hover { 
    background: linear-gradient(135deg, #FF8A00 0%, var(--color-accent) 100%); 
    box-shadow: 0 4px 8px rgba(230, 81, 0, 0.4);
    transform: translateY(-1px);
}

/* ヘッダー */
.header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background: #fff; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    z-index: 100; 
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.logo { 
    font-size: 22px; 
    font-weight: 900; 
    color: var(--color-main); 
}

.nav { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

.nav-list { 
    display: flex; 
    gap: 20px; 
    font-weight: 700; 
}

.nav-list a:hover { 
    color: var(--color-accent); 
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-tel {
    color: var(--color-main); /* ネイビー色 */
    font-weight: 900; /* 極太で目立たせる */
    font-size: 18px;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
}

.btn-contact { 
    background-color: var(--color-accent); 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 0; /* シャープに変更 */
    font-weight: 700; 
    transition: 0.3s; 
}

.btn-contact:hover { 
    background-color: #cc4800; 
}

/* フッター */
.footer { 
    background-color: var(--color-main); 
    color: #fff; 
    padding: 40px 0 20px; 
    text-align: center; 
}

.footer-info { 
    margin-bottom: 20px; 
}

.copyright { 
    font-size: 12px; 
    color: #ccc; 
}

/* スマホ用メニューボタン */
.hamburger { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
}


/* =========================================
   レスポンシブ（スマホ用）
========================================= */
@media (max-width: 768px) {
    /* ヘッダーのレイアウト微調整 */
    .header-inner { 
        padding: 10px 15px; 
    }
    
    .logo { 
        font-size: 18px; /* スマホ用に少し小さく */
        position: relative;
        z-index: 200; /* メニューより前面に */
    }

    /* --- ハンバーガーボタン --- */
    .hamburger { 
        display: block; 
        width: 30px; 
        height: 22px; 
        position: relative; 
        z-index: 200; /* メニューより前面に配置して常にタップ可能に */
        background: none; 
        border: none; 
        cursor: pointer; 
    }
    
    .hamburger span { 
        position: absolute; 
        width: 100%; 
        height: 3px; /* 少し太くしてタップしやすい無骨さを出す */
        background: var(--color-main); 
        left: 0; 
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; 
    }
    
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 9px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* ハンバーガーボタン：開いた状態（×印） */
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: var(--color-accent); /* ×の時はオレンジにして視覚的なフィードバックを強化 */
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: var(--color-accent);
    }

    /* --- ナビゲーション（フルスクリーン・オーバーレイ） --- */
    .nav { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98); /* 白の透過背景で圧迫感を軽減 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        z-index: 150;
        /* 初期状態は非表示（少し上から降りてくるアニメーション用） */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s ease;
    }

    /* ナビゲーション：開いた状態 */
    .header.is-open .nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-list { 
        flex-direction: column; 
        text-align: center;
        gap: 30px; 
        width: 100%;
    }

    .nav-list a {
        display: block;
        font-size: 20px; /* タップしやすいよう文字を大きく */
        padding: 10px;
    }

    .header-contact {
        flex-direction: column;
        width: 100%;
        max-width: 300px; /* ボタンが横に広がりすぎないように制御 */
        gap: 20px;
    }

    .header-tel {
        font-size: 24px;
        text-align: center;
    }

    .btn-contact {
        width: 100%;
        text-align: center;
        padding: 15px;
        font-size: 16px;
    }

    .btn-primary {
        padding: 20px 30px;
    }
}

/* =========================================
   機能用ユーティリティクラス（メディアクエリ外）
========================================= */
/* メニュー展開時の背景スクロール防止 */
body.no-scroll {
    overflow: hidden;
}