/* ads.css － 広告・アフィリエイト枠の見た目（気象タイピングのトーンに合わせています） */

/* 広告エリア全体。タイトル/リザルトの区切りとして上に線を入れる */
.promo-area {
    max-width: 720px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

/* 「広告」「PR」ラベル（景品表示法のステマ規制対策。必ず残してください） */
.promo-label,
.ad-slot-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #888;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.promo-heading {
    font-size: 1.1rem;
    color: #555;
    margin: 0 0 14px;
}

/* アフィリエイトの書籍カード（横並び・スマホで折返し） */
.promo-books {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.promo-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    text-decoration: none;
    color: #333;
    background: #f8f9fa;
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    padding: 12px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.promo-book:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.promo-book img {
    width: 110px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 8px;
    background: #fff;
}

.promo-book-title {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

/* AdSenseディスプレイ枠。高さを先に確保してレイアウトのガタつき(CLS)を防ぐ */
.ad-slot {
    max-width: 720px;
    margin: 24px auto 0;
    min-height: 100px;        /* ← ここで高さを予約。横長バナーなら適宜調整 */
    text-align: center;
}

.ad-slot .adsbygoogle {
    display: block;
}

@media (max-width: 760px) {
    .promo-book { width: 130px; }
    .promo-book img { width: 96px; height: 130px; }
}

/* プライバシーポリシーへのリンク（常時表示のフッター） */
.site-footer {
    margin-top: 18px;
    text-align: center;
    font-size: 0.85rem;
}
.site-footer a {
    color: #888;
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}