/* =========================================
   フッター（ページ下部）の設定
   ========================================= */

footer {
    position: relative;
    background-color: #222;
    color: #ffffff;         /* 文字色は白 */
    padding: 40px 0;        /* 上下の余白 */
    margin-top: 50px;       /* 上のコンテンツとの距離 */
    text-align: center;     /* 文字を真ん中に */
}

/* フッター内のリンク集 */
.footer-links {
    display: flex;          /* 横並びにする */
    justify-content: center;/* 中央寄せ */
    list-style: none;       /* 点々を消す */
    padding: 0;
    margin-bottom: 20px;    /* コピーライトとの隙間 */
    flex-wrap: wrap;        /* スマホで入り切らない時は折り返す */
}

/* フッター内の各リンク */
.footer-links li {
    margin: 0 15px;         /* リンク同士の間隔 */
}

/* フッター内のリンク文字（ここだけ色を変える！） */
.footer-links a {
    color: #cccccc;         /* 少しグレーがかった白 */
    text-decoration: none;  /* 下線を消す */
    font-weight: bold;
    transition: color 0.3s; /* 色変化のアニメーション */
}

/* マウスを乗せた時 */
.footer-links a:hover {
    color: #ffffff;         /* 真っ白に光らせる */
    text-decoration: underline; /* 下線を出す */
}

/* コピーライトの文字サイズ */
.copyright {
    font-size: 12px;
    opacity: 0.7; /* 少し薄くする */
}

footer::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #222;
    z-index: 10;

    /* ▼ 上向きの丸を作る魔法 ▼ */
    -webkit-mask-image: radial-gradient(circle at 10px 20px, black 10px, transparent 11px);
    -webkit-mask-size: 20px 20px;
    -webkit-mask-repeat: repeat-x;
    
    mask-image: radial-gradient(circle at 10px 20px, black 10px, transparent 11px);
    mask-size: 20px 20px;
    mask-repeat: repeat-x;
}