@charset "UTF-8";
/* お買い得カレンダーへのバナー(便 ob・2026-11-05・obn_parts.php)。見た目は design/otoku_banner(otoku_banner_sample.html)のとおり。
   ★スマホのトップ(sp-style.css)は * で字を 10px にするので、バナーの中の字の大きさは全部書く。楽天の赤に近い色と #D7263D は使わない。 */
.ob{display:flex;align-items:center;gap:12px;box-sizing:border-box;background:#F3F7FC;border:1px solid #CFDCEB;border-radius:10px;padding:10px 14px;color:#202124!important;text-decoration:none!important;
 font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-size:14px;line-height:1.45;text-align:left}
.ob *{box-sizing:border-box;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:none}
.ob:hover,.ob:focus-visible{border-color:#1B4F8A}
.ob .ob-cal{flex:none;width:52px;height:48px;display:block}
.ob .ob-t{display:flex;flex-direction:column;min-width:0;flex:1}
.ob .ob-ttl{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}
.ob .ob-k{font-size:12px;color:#5F6368}
.ob .ob-t b{font-size:17px;font-weight:700;color:#1B4F8A}
.ob .ob-s{font-size:14px;color:#202124}
.ob .ob-next{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.ob .ob-next em{font-style:normal;font-weight:700;color:#1B4F8A}
.ob .ob-d{font-weight:700}
.ob .nw{display:inline-block}
.ob .ob-tag{display:inline-block;font-size:11px;border:1px solid #C4C7CC;border-radius:4px;padding:0 5px;margin-left:5px;color:#5F6368;background:#fff;vertical-align:1px}
.ob .ob-go{flex:none;background:#1B4F8A;color:#fff;font-weight:700;font-size:14px;border-radius:18px;padding:6px 14px;white-space:nowrap}
/* 縦(特集 PC の左の欄 200px) */
.ob.ob-v{flex-direction:column;text-align:center;padding:14px 12px;gap:8px}
.ob.ob-v .ob-t{align-items:center}
.ob.ob-v .ob-ttl{flex-direction:column;align-items:center}
.ob.ob-v .ob-next{justify-content:center}
.ob.ob-v .ob-go{align-self:stretch;text-align:center}
.ob.ob-v .ob-cal{width:64px;height:59px}

/* トップ PC: お買い得情報の箱(#campaign_info)の右端 420px(箱の高さを大きく替えない)。1000px 未満はリンクの下に置く */
#campaign_info.ob-on{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"h b" "l b"}
#campaign_info.ob-on .kn-prh{grid-area:h}
#campaign_info.ob-on .kn-prl{grid-area:l}
#campaign_info.ob-on .ob-slot{grid-area:b;padding:8px 10px 8px 0;display:flex;align-items:center}
#campaign_info.ob-on .ob-slot .ob{width:100%}
@media (max-width: 999px){
 #campaign_info.ob-on{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "l" "b"}
 #campaign_info.ob-on .ob-slot{padding:0 14px 12px}
 #campaign_info.ob-on .ob-slot .ob{max-width:420px}
}
/* スマホのトップ(smp_index・検索の欄の下) */
.ob.ob-sp{margin:12px 12px 4px}
/* 特集: PC(1200 以上＝左の欄が出る幅)は左の欄の縦、1199 以下は本文の終わりの横長(二重にしない) */
.ob.ob-tk-pc{margin:0 0 12px}
.ob.ob-tk-sp{margin:28px 0 24px;max-width:520px}
@media (max-width: 1199px){ .ob.ob-tk-pc{display:none} }
@media (min-width: 1200px){ .ob.ob-tk-sp{display:none} }