/* ========== ページ全体を制御する設定（変更なし） ========== */
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
}

/* ========== FOOTER デザイン本体（ヘッダーと統一） ========== */
.footer {
    width: 100%;
    position: relative;
    /* absoluteやfixedになっていたらこれに変える */
    margin-top: 50px;
    /* カレンダーとの間に隙間を作る */
    padding: 60px 0;
    /* フッター自体の高さを確保する */
    background-color: #2c1a11;
    /* ギターのような濃い茶色かな？ */
    overflow: visible;
    /* サウンドホールの装飾がはみ出しても消さない */
}

/* 木目ライン（ヘッダーと共通） */
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 79px,
            rgba(61, 32, 8, 0.45) 79px,
            rgba(61, 32, 8, 0.45) 80px);
    pointer-events: none;
}

.footer-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 両サイド指板装飾（ヘッダーと同じ） */
.footer-inner::before,
.footer-inner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    background-color: var(--side-brown);
    background-image:
        repeating-linear-gradient(180deg,
            transparent,
            transparent 31px,
            rgba(58, 26, 4, 0.7) 31px,
            rgba(58, 26, 4, 0.7) 32px),
        repeating-linear-gradient(90deg,
            transparent 7px,
            rgba(184, 146, 42, 0.6) 7px,
            rgba(184, 146, 42, 0.6) 8px,
            transparent 8px,
            transparent 15px,
            rgba(184, 146, 42, 0.6) 15px,
            rgba(184, 146, 42, 0.6) 16px,
            transparent 16px,
            transparent 23px,
            rgba(184, 146, 42, 0.7) 23px,
            rgba(184, 146, 42, 0.7) 24px,
            transparent 24px,
            transparent 31px,
            rgba(184, 146, 42, 0.8) 31px,
            rgba(184, 146, 42, 0.8) 32px);
}

.footer-inner::before {
    left: 0;
}

.footer-inner::after {
    right: 0;
}

/* サウンドホール装飾（左右に配置） */
.footer-soundhole {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    /* フッターに合わせて少し小さめに */
    height: 60px;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 74, 16, 0.4);
    pointer-events: none;
}

.footer-soundhole::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 0.7px solid rgba(122, 74, 16, 0.3);
}

.footer-soundhole::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: rgba(26, 10, 2, 0.4);
}

.footer-soundhole-left {
    left: 70px;
}

.footer-soundhole-right {
    right: 70px;
}

/* SNSアイコンエリア */
.footer-social {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
    position: relative;
    z-index: 20;
}

.social-link {
    display: flex;
    /* 中の画像を真ん中に寄せる */
    align-items: center;
    /* 垂直方向中央 */
    justify-content: center;
    /* 水平方向中央 */
    width: 50px;
    /* 丸のサイズ */
    height: 50px;
    border: 1.5px solid rgba(184, 146, 42, 0.4);
    border-radius: 50%;
    background: rgba(26, 10, 2, 0.6);
    transition: all 0.3s ease;
    overflow: hidden;
    /* 丸からはみ出さないようにする */
}

.social-icon-img {
    width: 60%;
    /* 丸に対して少し小さめに配置すると綺麗 */
    height: 60%;
    object-fit: contain;
    /* 画像の比率を保つ */
}

.social-link:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 146, 42, 1);
    background: rgba(184, 146, 42, 0.1);
}

/* 飾り線（ヘッダーのタイトル装飾と統一） */
.footer-line {
    width: 100%;
    max-width: 300px;
    height: 0.6px;
    background: rgba(184, 146, 42, 0.5);
    margin-bottom: 15px;
}

/* コピーライト */
.copyright {
    font-family: 'Georgia', serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--gold-dim);
    opacity: 0.85;
}

/* スマホ対応 */
@media screen and (max-width: 900px) {
    .footer-soundhole {
        display: none;
        /* タブレット以下でサウンドホールを隠す */
    }
}

@media screen and (max-width: 600px) {
    .footer {
        padding: 20px 15px;
    }

    /* サイド指板を細く */
    .footer-inner::before,
    .footer-inner::after {
        width: 30px;
    }

    .social-link {
        font-size: 18px;
        width: 44px;
        height: 44px;
    }

    .footer-social {
        gap: 20px;
    }
}