@charset "UTF-8";

.footer-area {
    background-color: #333; /* 濃い灰色 */
    color: #fff; /* 白文字 */
    padding: 20px 0;
    width: 100%; /* 画面全体の幅 */
}

.footer-area .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3つのカラムを作成 */
    gap: 20px; /* 各カラム間の隙間 */
    width: 90%; /* フッター全体の幅を90%に制限 */
    max-width: 1200px; /* 最大幅を1200pxに */
    margin: 0 auto; /* 中央揃え */
}

.footer_image img {
    max-width: 50%; /* 画像の最大幅を100%に */
    height: auto;
    margin-bottom:10px;
}
.footer_image p {
    font-size:0.4em;
}
.footer_nav_top, .footer_nav_policy {
    list-style-type: none;
    padding: 0;
    line-height:2.0;
}

.footer_nav_top li, .footer_nav_policy li {
    margin-bottom: 5px;
    font-size: 0.4em; /* フォントサイズを小さく */
}

.footer_nav_top li a, .footer_nav_policy li a {
    color: #fff;
    text-decoration: none;
}

.footer_nav_top li a:hover, .footer_nav_policy li a:hover {
    color: #f0e68c; /* ホバー時に色を変更 */
    text-decoration: underline;
}

.copyright {
    text-align: center; /* 中央揃え */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #fff; /* 上部に区切り線 */
    width: 100%;
    font-size: 12px; /* フォントサイズをさらに小さく */
}

@media screen and (max-width: 840px) {
    .footer-area .footer-grid {
        grid-template-columns: 1fr 1fr; /* タブレットでは2カラム */
    }
}

@media screen and (max-width: 450px) {
    .footer-area .footer-grid {
        grid-template-columns: 1fr; /* スマートフォンでは1カラム */
    }
}