@charset "UTF-8";

/* ==========================================
   1. フッター全体の設定
========================================== */
.footer {
    background-color: #000000; /* 背景を黒に */
    color: #ffffff; /* 文字を白に */
    text-align: center; /* 中身をすべて中央揃えにする */
    
    /* 4K対応：上部のコンテンツとの距離（margin-top）を動的に（30px〜80px） */
    margin-top: clamp(30px, 5vw, 80px);
    
    /* 4K対応：内側の余白（padding）も動的に */
    /* 上: 10px〜20px / 左右: 20px〜40px / 下: 40px〜60px */
    padding: clamp(10px, 2vw, 20px) clamp(20px, 3vw, 40px) clamp(40px, 5vw, 60px); 
}

/* タイトルの設定 */
.footer-title {
    /* 【修正】最小値(2px)を18pxに引き上げ、スマホでも読めるようにしました */
    font-size: clamp(18px, 3vw, 30px);
    font-weight: normal; 
    letter-spacing: 2px;
    
    /* アイコンとの間に少し余白を持たせる */
    margin: 0 0 clamp(15px, 2vw, 30px) 0;
}


/* ==========================================
   2. 画像リンク（横並び）の設定
========================================== */
.footer-social-links {
    display: flex;
    justify-content: center; 
    align-items: center;
    /* 4K対応：画像間の隙間も動的に（15px〜40px） */
    gap: clamp(15px, 3vw, 40px); 
}

/* 4K対応：X(Twitter)のロゴサイズを動的に */
.X-logo {
    width: clamp(24px, 3vw, 40px);
}

/* 4K対応：VRChatのロゴサイズを動的に */
.VRC-logo {
    width: clamp(45px, 5vw, 80px);
}

/* 画像自体のサイズ調整とホバー設定 */
.footer-social-links img {
    transition: opacity 0.3s ease; 
    
    /* 4K対応：下のコピーライトとの余白も動的に */
    margin-bottom: clamp(10px, 2vw, 25px);
}

/* リンクにマウスが乗ったとき（ホバー時）のアクション */
.footer-social-links a:hover img {
    opacity: 0.6; /* 少し透けさせて「押せる感」を出す */
}


/* ==========================================
   3. コピーライトの設定
========================================== */
.footer-copyright {
    display: inline-block; /* 幅を「文字の長さ」にぴったり合わせる */
    border-top: 1px solid #555555; /* 上に1pxの横線を引く */
    
    /* 4K対応：線と文字の間の隙間を動的に（10px〜20px） */
    padding-top: clamp(10px, 1.5vw, 20px);

    margin: 0;
    color: #888888; /* 真っ白ではなくグレーにして目立たせない */
    
    /* 4K対応：文字サイズを動的に（12px〜16px） */
    font-size: clamp(12px, 1.2vw, 16px);
}

/* ©マークの調整 */
.copy-mark {
    font-size: 1.3em; /* 周りの文字の「1.3倍」の大きさにする */
    vertical-align: middle; /* 大きくした分、縦のラインがズレないように中央で揃える */
}