/* 広告（PR）ブロックのスタイル。mixhost の css/t.css「new_affs20260520」節（2026-05-21）をそのまま移したもの。
   リデザイン後の画面は t.css を読まないため、ここに分けて front_parts/head から読む。
   広告の中身は public_html/ashi.jp/af_data.json、描画は js/af_loader.js（partials/affiliate） */

 /*-------------------------------------
new_affs20260520
-------------------------------------*/
.bottom-af_wrap{float:left;width:100%;margin:20px 0}
.bottom-af_wrap h2{background:#000;color:#fff;padding:10px}
.bottom-af_wrap .cate_ttl{background:#fc0376;color:#fff;padding:5px 10px;margin:10px 0 0;font-size:13px}
.bottom-af_wrap .af__item_ul{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.bottom-af_theme_wrap .af__item_ul{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}

/* ── 通常li: PC5列 ── */
.af__item_ul .af__item_li{width:calc(20% - 4px);margin:5px 0 0;box-sizing:border-box;position:relative;border-radius:3px;overflow:hidden}
.af__item_ul .af__item_li .af_links{display:block;text-decoration:none;transition:opacity .18s}
.af__item_ul .af__item_li .af_links:hover{opacity:.82}
.af__item_ul .af__item_li .af_links .af__item__inner{position:relative;display:flex;flex-direction:column}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image{position:relative}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image .cates{position:absolute;top:0;right:0;background:red;color:#fff;font-size:75%;padding:2px 4px;line-height:16px;display:none}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image .cate_goods{background:#408af9}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image .cate_av{background:#ef2ba1}

/* ── 通常サムネ: 縦長 3:4 ── */
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image .af__item__imageInner{display:block;width:100%;overflow:hidden;aspect-ratio:3/4}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__image .af__item__imageInner img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;margin:0}

/* ── タイトル共通 ── */
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner{padding:3px 0 5px}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__ttl{margin:0}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__ttl h3{text-align:left;margin:0;font-size:12px;line-height:14px;color:#222;font-weight:bold;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__text{background:#efeeee;padding:5px;line-height:16px;vertical-align:bottom;display:none}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__text p{font-size:85%}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FANZA同人専用: 横長サムネ（4:3）
   PC3列 / タブレット2列 / スマホ2列
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.af__item_ul .af__item_li.is-doujin{width:calc(33.33% - 4px)}
.af__item_ul .af__item_li.is-doujin .af__item__imageInner{aspect-ratio:4/3}
.af__item_ul .af__item_li.is-doujin .af__item__imageInner img{object-position:center center}

/* ── テーマブロック共通 ── */
.bottom-af_theme_wrap{float:left;width:100%;margin:24px 0 0;position:relative}
.bottom-af_theme_wrap>.af-pr-label{display:inline-block;font-size:10px;color:#999;border:1px solid #ddd;padding:1px 6px;border-radius:2px;margin-bottom:6px;letter-spacing:.05em}
.af_theme_random{display:none}
.af_theme_random h2{position:relative;background:#111;color:#fff;padding:0;margin:0 0 10px;font-size:20px;font-weight:bold;letter-spacing:.04em;overflow:hidden;display:flex;align-items:stretch;border-left:4px solid #e8003c}
.af_theme_random h2 span{display:inline-flex;align-items:center;background:#e8003c;color:#fff;font-size:11px;font-weight:normal;letter-spacing:.08em;padding:0 12px;white-space:nowrap;flex-shrink:0}
.af_theme_random h2 strong{display:inline-flex;align-items:center;padding:10px 16px;font-size:24px;font-weight:bold;color:#dbf512;flex:0 1 auto}
.af_theme_random h2 em{display:inline-flex;align-items:center;padding:10px 12px;font-size:13px;font-weight:normal;font-style:normal;color:#fff;white-space:nowrap;flex-shrink:0}

/* ── visibilityフリッカー防止 ── */
.af_theme_random .af__item_ul{visibility:hidden}

/* ── タブレット: 通常4列 / 同人2列 ── */
@media only screen and (max-width:768px){
.af__item_ul .af__item_li{width:calc(25% - 4px)}
.af__item_ul .af__item_li.is-doujin{width:calc(50% - 4px)}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__ttl h3{height:auto}
}

/* ── スマホ: 通常3列 / 同人2列 ── */
@media only screen and (max-width:480px){
.af__item_ul .af__item_li{width:calc(33.33% - 4px)}
.af__item_ul .af__item_li.is-doujin{width:calc(50% - 4px)}
.af__item_ul .af__item_li:nth-child(19),.af__item_ul .af__item_li:nth-child(20){display:none}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__ttl h3{font-size:12px;line-height:14px;-webkit-line-clamp:3}
}

/* ── 小さいスマホ ── */
@media only screen and (max-width:360px){
.af__item_ul .af__item_li{width:calc(33.33% - 4px)}
.af__item_ul .af__item_li.is-doujin{width:calc(50% - 4px)}
.af__item_ul .af__item_li .af_links .af__item__inner .af__item__texts__inner .af__item__ttl h3{font-size:12px}
}


/* ── リデザイン後のレイアウト向けの調整 ──
   旧デザインは float で並べていた。新しいレイアウトでは回り込みで後続が崩れるため解除する */
.bottom-af_wrap,.bottom-af_theme_wrap{float:none;clear:both}
