/* 定義したカスタムプロパティ */
:root {
    /* フォントとカラー */
    --font-color-light: #ffffff;
    --font-color-dark: #333333;
    --font-size-base: 14px;
    
    /* フッターのスタイル */
    --footer-background: #333333;
    --footer-padding: 20px 0;
    --sitemap-margin-bottom: 20px;
    --sitemap-font-size: var(--font-size-base);
    --sitemap-link-color: var(--font-color-light);
    --sitemap-link-hover-color: #dddddd;
    --sitemap-link-hover-decoration: underline;
}

/* フッター全体のスタイル */
footer {
    background: var(--footer-background);
    color: var(--font-color-light);
    text-align: center;
    padding: var(--footer-padding);
    
    /* フッター内の段落のスタイル */
    p {
        margin: 10px 0 0 0;
        text-align: center;
    }

    /* サイトマップのスタイル */
    .sitemap {
        margin-bottom: var(--sitemap-margin-bottom);
        text-align: center;

        ul {
            list-style: none;
            padding: 0;
            
            li {
                display: inline-block;
                margin: 0 10px;
                
                a {
                    color: var(--sitemap-link-color);
                    text-decoration: none;
                    font-size: var(--sitemap-font-size);
                    
                    &:hover {
                        color: var(--sitemap-link-hover-color);
                        text-decoration: var(--sitemap-link-hover-decoration);
                    }
                }
            }
        }
    }
}