/* ==========================================================================
   Footer Layout Fix
   ========================================================================== */

.l-footer {
    background-color: #001a43; /* スクリーンショットに合わせた濃紺 */
    color: #fff;
    padding: 80px 0 40px;
    width: 100%; /* 横幅いっぱい */
}

/* ★ここがポイント：コンテナの幅を他のセクションと合わせる */
.l-footer .l-container {
    max-width: 1200px; /* 他のセクションの幅（1080pxや1200pxなど）に合わせて調整 */
    margin: 0 auto;
    padding: 0 40px;   /* 左右の余白 */
    width: 100%;
}

/* ロゴエリアを左寄せに（お好みで） */
.p-footer-head {
    margin-bottom: 60px;
}

.p-footer-logo img {
    max-width: 350px;
    height: auto;
}

/* ナビゲーションを横いっぱいに広げる */
.p-footer-nav {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 40px;
    margin-bottom: 80px;
}

.p-footer-nav__group {
    flex: 1; /* 各グループを均等な幅にする */
}

/* テキストの色を白に（背景が濃いので） */
.p-footer-nav__title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 18px;
}

.p-footer-nav__list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.p-footer-nav__list a:hover {
    color: #fff;
}

/* コピーライト */
.p-footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* スマホ対応：縦に並べる */
@media (max-width: 768px) {
    .p-footer-nav {
        flex-direction: column;
        gap: 30px;
    }
}