/* --- ボタンの基本構造 (テーマの干渉を上書き) --- */
.c-article-btn-wrapper .c-article-btn {
    display: block;
    width: 240px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin: 20px auto;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    transition: all 0.4s ease;
    text-decoration: none; /* 下線を消す */
    border: 2px solid transparent;
}

/* ホバー時の共通挙動 (背景を白に反転、下線を防止) */
.c-article-btn-wrapper .c-article-btn:hover {
    text-decoration: none;
    background-color: #ffffff;
}

/* --- カラーバリエーション (文字色を白に固定) --- */

/* DIME / 基本 (ブラック) */
.c-article-btn-wrapper .c-article-btn--default,
.c-article-btn-wrapper .c-article-btn--dime {
    border-color: #222222;
    background-color: #000000;
    color: #ffffff; /* 文字色を強制 */
}
.c-article-btn-wrapper .c-article-btn--default:hover,
.c-article-btn-wrapper .c-article-btn--dime:hover {
    color: #000000;
    border-color: #222222;
}

/* Amazon (オレンジ) */
.c-article-btn-wrapper .c-article-btn--amazon {
    border-color: #FF9900;
    background-color: #FF9900;
    color: #ffffff;
}
.c-article-btn-wrapper .c-article-btn--amazon:hover {
    color: #FF9900;
    border-color: #FF9900;
}

/* 楽天 (レッド) */
.c-article-btn-wrapper .c-article-btn--rakuten {
    border-color: #bf0000;
    background-color: #bf0000;
    color: #ffffff;
}
.c-article-btn-wrapper .c-article-btn--rakuten:hover {
    color: #bf0000;
    border-color: #bf0000;
}

/* 詳細 (シルバー) */
.c-article-btn-wrapper .c-article-btn--silver,
.c-article-btn-wrapper .c-article-btn--detail {
    border-color: #c0c0c0;
    background-color: #c0c0c0;
    color: #ffffff;
}
.c-article-btn-wrapper .c-article-btn--silver:hover,
.c-article-btn-wrapper .c-article-btn--detail:hover {
    color: #c0c0c0;
    border-color: #c0c0c0;
}

/* --- スマートフォン版のホバー無効化設定 --- */
@media screen and (max-width: 767px) {
    /* SP版：ホバー時の下線防止を維持 */
    .c-article-btn-wrapper .c-article-btn:hover {
        text-decoration: none;
    }

    /* SP版：DIME / 基本のホバー設定をリセット（通常時の色に固定） */
    .c-article-btn-wrapper .c-article-btn--default:hover,
    .c-article-btn-wrapper .c-article-btn--dime:hover {
        background-color: #000000;
        color: #ffffff;
        border-color: #222222;
    }

    /* SP版：Amazonのホバー設定をリセット */
    .c-article-btn-wrapper .c-article-btn--amazon:hover {
        background-color: #FF9900;
        color: #ffffff;
        border-color: #FF9900;
    }

    /* SP版：楽天のホバー設定をリセット */
    .c-article-btn-wrapper .c-article-btn--rakuten:hover {
        background-color: #bf0000;
        color: #ffffff;
        border-color: #bf0000;
    }

    /* SP版：詳細のホバー設定をリセット */
    .c-article-btn-wrapper .c-article-btn--silver:hover,
    .c-article-btn-wrapper .c-article-btn--detail:hover {
        background-color: #c0c0c0;
        color: #ffffff;
        border-color: #c0c0c0;
    }
}