/* ヘッダー（上部固定） */
header {
    position: sticky; /* スクロールしてもヘッダーを固定 */
    top: 0; /* ヘッダーを画面上部に固定 */
    z-index: 1000; /* 他の要素より前面に表示 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ヘッダーに薄い影を追加 */
}
/* --- 会社名のスタイル --- */
.company-header {
    background: linear-gradient(135deg, #dbbbbb, #b4c6f8);
    padding: 20px 40px; /* ここを修正 */
}

.company-header p {
    color: rgb(255, 255, 255);
    font-size: 22px;
    font-weight: bold;
    margin: 2px 0;
    text-align: left; /* 会社名を左寄せに */
}

/* フッター */
footer {
    background: linear-gradient(135deg, #6b1717, #16213e); /* フッターの背景をグラデーションに */
    color: #fff; /* フッター文字色を白に */
    padding: 60px 20px 30px; /* フッター内側余白を設定 */
    font-size: 14px; /* フッター文字サイズを設定 */
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* ★中央寄せのため縦並びに変更 */
    align-items: center;    /* ★横方向を中央に */
    text-align: center;     /* ★テキストを中央に */
    gap: 20px;              /* 要素間の間隔 */
}


.footer-center h4 {
    font-size: 20px; /* 見出しの文字サイズを設定 */
    margin-bottom: 10px; /* 見出しの下に余白を追加 */
}

.footer-center {
    margin: 6px 0; /* 段落間の余白を設定 */
}

.footer-copy {
    text-align: center; /* コピーライトを中央揃え */
    margin-top: 40px; /* 上部余白を追加 */
    font-size: 12px; /* コピーライト文字サイズを設定 */
    color: #bbb; /* コピーライト文字色を薄いグレーに */
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    nav {
        flex-direction: column; /* ナビゲーションを縦並びに */
        gap: 10px; /* ナビゲーション間の間隔を設定 */
    }

    .hero-text h1 {
        font-size: 24px; /* ヒーロー見出しの文字サイズを縮小 */
    }

    .hero-text p {
        font-size: 14px; /* ヒーロー段落の文字サイズを縮小 */
    }

    .hero-image {
        height: 250px; /* ヒーロー画像の高さを縮小 */
    }

    .card {
        padding: 15px; /* カード内側余白を縮小 */
    }
}