/* =========================================================
   アフィリエイト欄 完全版
   ・全体の灰色背景なし
   ・PR部分のみ薄いグレー
   ・本文末尾とPRの間隔を最小化
   ・商品部分は通常の白背景
   ・PC / スマホ対応
   ========================================================= */

.affiliate-box {
    box-sizing: border-box;

    /* 本文末尾との間隔を最小化 */
    margin-top: 0 !important;
    margin-bottom: 2px;

    /* PC */
    margin-left: 5px;
    margin-right: 35px;

    /* 上側の余白をなくす */
    padding-top: 0 !important;

    padding-left: 12px;
    padding-right: 12px;

    /* 商品と下側との余白 */
    padding-bottom: 28px;

    /* 全体背景は付けない */
    background: transparent !important;

    /* 全体を囲む線も付けない */
    border: none;

    border-radius: 0;
}


/* =========================================================
   本文末尾とアフィリエイト欄の間隔
   ========================================================= */

.entry-content > *:has(+ .affiliate-box) {
    margin-bottom: 4px !important;
}


/* =========================================================
   アフィリエイトリンク
   ========================================================= */

.affiliate-box a {
    color: #0B57D0 !important;
}


/* =========================================================
   PR表示部分のみ装飾
   ========================================================= */

.affiliate-pr {
    display: block;

    /* PC */
    width: 680px;
    max-width: 100%;

    margin: 0 0 8px 0;
    padding: 6px;

    box-sizing: border-box;

    /* PR部分だけ薄いグレー */
    background: #f7f7f7;

    border: none;
    border-left: 7px solid #cccccc;

    color: #676767;

    font-size: 13px;
    line-height: 1.4;
    font-weight: normal;
}


/* =========================================================
   スマホ
   ========================================================= */

@media screen and (max-width: 480px) {

    .affiliate-box {
        margin-left: 0;
        margin-right: 0;

        padding-left: 8px;
        padding-right: 8px;
    }

    .affiliate-pr {
        width: 100%;
        max-width: 100%;
    }
}