@charset "UTF-8";

/* =========================================
   FOOTER (フッター)
========================================= */
.footer {
    background: #050510; /* 深い黒で締める */
    color: rgba(255, 255, 255, 0.5); /* 文字を少しだけ明るくして可読性UP */
    padding: 80px 20px 40px; /* 余白を少し贅沢に */
}

/* ▼▼▼ 全体の枠組み ▼▼▼ */
.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto; /* 左に説明、右にリンク */
    gap: 60px; /* 左右の隙間を広く */
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 上品な区切り線 */
    margin-bottom: 30px;
}

/* ▼▼▼ ロゴ・説明文エリア ▼▼▼ */
.footer .logo-footer {
    font-family: 'Noto Serif JP', serif;
    font-size: 28px; /* ロゴテキストを大きく */
    font-weight: 900;
    color: var(--white);
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}

.footer .logo-footer span { 
    color: var(--accent); 
}

.footer-about {
    line-height: 2;
    max-width: 500px;
    font-size: 15px; /* PCで読みやすい大きさにUP（旧:12px） */
}

/* ▼▼▼ リンクエリア ▼▼▼ */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px; /* リンクの行間も広げてクリックしやすく */
    text-align: right;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 15px; /* リンク文字を大きくUP（旧:12px） */
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-links a:hover { 
    color: var(--accent); /* ホバーで赤色に */
}

/* ▼▼▼ コピーライト ▼▼▼ */
.copyright {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* コピーライトも少しUP（旧:11px） */
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

/* =========================================
   ▼▼▼ スマホ用レスポンシブ (768px以下) ▼▼▼
========================================= */
@media (max-width: 768px) {
    .footer {
        padding: 60px 20px 30px;
    }

    .footer-inner { 
        grid-template-columns: 1fr; /* スマホは縦1列に変更 */
        gap: 40px;
    }

    .footer .logo-footer {
        font-size: 24px; /* スマホ用に微調整 */
    }

    .footer-about {
        font-size: 13px; /* スマホは大きすぎないよう調整 */
    }

    .footer-links { 
        text-align: left; 
        flex-direction: row; /* スマホは横並びの折り返しにする */
        flex-wrap: wrap; 
        gap: 16px 24px; /* 上下左右の隙間をタップしやすいサイズに */
    }

    .footer-links a {
        font-size: 13px;
    }

    .copyright {
        font-size: 11px;
    }
}