/* ===================================================
   共通リンク設定 (common.css)
   ================================================   */

a {
    color: var(--text-color, #4a4543); /* 基本は本文と同じ色（サイトの変数が使えればそれを優先） */
    text-decoration: none;             /* デフォルトの下線を消す */
    transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover {
    color: var(--accent-color, #E78198); /* ホバー時はアクセントカラー（ピンク等）に変化 */
    opacity: 0.8;
    text-decoration: underline;          /* ホバー時に下線を表示 */
}

/* --- メニュー全体の背景色 --- */
.menu, 
nav {
    color: #2F3285;
    background-color: #FFFFFF;
}

/* --- メニュー内の各リンクボタン（通常時） --- */
.nav-btn,
.menu-item, 
nav a {
    background-color: #FFFFFF;
    color: #2F3285;
    border: 2px solid #D0E1E7;
    transition: all 0.3s ease;
    /* ※元の形状（サイズやパディング）を維持するため、幅や余計な強制指定は省いています */
}

/* --- メニュー項目に触れたとき（hover） --- */
.nav-btn:hover,
.menu-item:hover, 
nav a:hover {
    background-color: #FFFFFF; 
    color: #E78198;           
    border-color: #FFCDC7;     
    transform: translateY(-2px);  
}

/* --- SNSアイコンの背景色（通常時） --- */
.sns-icon, 
.social-link {
    background-color: #D0E1E7;
    color: #2F3285;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* --- SNSアイコンに触れたとき（hover） --- */
.sns-icon:hover,
.social-link:hover {
    background-color: #DBEBF1;
    color: #2F3285;
    border-color: #2F3285;
    transform: none; /* ★ここで絶対に浮き上がらないように固定します */
}

/* --- フッター --- */
.footer-area {
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

footer {
    font-size: 0.75rem;
    color: #2F3285;
    font-weight: bold;
    letter-spacing: 1px;
}