/* =========================================
   アフィリエイトボタン群のレイアウト
========================================= */
.bungubu-af-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 2.5em;
    margin-top: 1.5em;
}

/* ▼ 追記：ボタンが1つだけの場合のセンター寄せ処理 ▼ */
.bungubu-af-links .af-btn:only-child {
    grid-column: 1 / -1;  /* 2列の枠を統合して全幅を使う */
    justify-self: center; /* 中央に配置 */
    width: 100%;
    max-width: 360px;     /* PCでボタンが横に長くなりすぎるのを防ぐ美しい幅 */
}

.af-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 10px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: opacity 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.05em;
}

.af-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 各モールのブランドカラー */
.af-amazon  { background-color: #f0ad4e; }
.af-rakuten { background-color: #bf504d; }
.af-yahoo   { background-color: #5b9bd5; }
.af-mercari { background-color: #e5322c; }
.af-default { background-color: #008000; } /* 予備の直リンク用 */

/* =========================================
   スマホ表示（縦1列）への切り替え
========================================= */
@media (max-width: 767px) {
    .bungubu-af-links {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .af-btn {
        padding: 16px 10px;
        font-size: 15px;
    }

    /* スマホ時はボタン1つの場合でもタップしやすく横幅いっぱいに広げる */
    .bungubu-af-links .af-btn:only-child {
        max-width: 100%; 
    }
}

.bungubu-thumb-wrap {
position: relative;
display: inline-block;
width: 100%;
line-height: 0;
}

.bungubu-image-source {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 11px;
color: #888888 !important; /* シンプルなグレー文字 /
background-color: transparent !important; / 背景色は不要 /
padding: 0;
text-decoration: none !important;
z-index: 10;
transition: color 0.2s ease;
/ 写真に同化してリンクが消滅するのを防ぐ、見えない白フチの保険 */
text-shadow: 1px 1px 1px rgba(255,255,255,0.7), -1px -1px 1px rgba(255,255,255,0.7), 1px -1px 1px rgba(255,255,255,0.7), -1px 1px 1px rgba(255,255,255,0.7);
}

a.bungubu-image-source:hover {
color: #333333 !important; /* ホバー時は少し濃くして反応を示す */
}