footer {
    background-color: #f4f4f4; /* 背景色はお好みで */
    padding: 20px;
    font-family: sans-serif;
}

.footer-overlay {
    max-width: 1200px;
    margin: 0 auto;
}



.footer-nav ul {
    display: flex; 
    justify-content: flex-end; 
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
    gap: 20px; /* リンク間のスペース */
}

.footer-nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.footer-content {
    text-align: left;
    margin-bottom: 20px;
    line-height: 2;
    color: #333;
}

.footer-SNS ul {
    display: flex; 
    justify-content: flex-start;
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
    gap: 20px; /* リンク間のスペース */
}

.footer-SNS a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.footer-copy {
    text-align: center; /* 中央寄せ */
    font-size: 14px;
    color: #777;
}

/* =========================
   フッター：モバイル対応
========================= */
@media screen and (max-width: 768px) {
    .footer-nav ul,
    .footer-SNS ul {
        flex-direction: column;  /* 縦並びに */
        align-items: center;     /* 中央寄せ */
        gap: 10px;               /* リンク間の間隔を少し狭く */
    }

    .footer-nav li,
    .footer-SNS li {
        margin: 0;               /* 不要な余白をリセット */
    }

    .footer-content {
        text-align: center;      /* 中央寄せ */
        line-height: 1.8;
    }

    .footer-content h2 {
        font-size: 18px;         /* タイトルを少し小さく */
    }

    .footer-content p {
        font-size: 14px;         /* 連絡先文字サイズを調整 */
    }

    .footer-content .logo {
        max-width: 120px;        /* ロゴを小さめに */
        margin-bottom: 10px;
    }

    .footer-SNS .logo {
        max-width: 40px;         /* SNSアイコンを小さめに */
        height: auto;
    }

    .footer-copy {
        text-align: center;      /* すでに中央寄せですが再確認 */
        font-size: 12px;
    }

    .footer-overlay {
        padding: 15px;           /* 全体の余白をスマホ向けに調整 */
    }
}