/* =========================================================
   おっぱいクリップ
   ---------------------------------------------------------
   kiss-mania のキスクリップと同じデザイン。色だけこのサイトに合わせる。
   ========================================================= */
:root{
    --oc-accent:#ff6699;      /* サイトの看板色 */
    --oc-accent2:#b0367a;
    --oc-ext:#4A7FC1;         /* 外部リンクであることを示す色 */
    --oc-ink:#2b2b33;
    --oc-sub:#8a8a99;
    --oc-line:#e8e8f0;
    --oc-bg:#fafafd;
}

/* ---------------------------------------------------------
   カード
   押すと自サイトの記事ではなく外部の作品ページへ飛ぶ。
   作品カードと見分けがつかないと利用者を欺くことになるので、
   枠線・ラベル・CTAで明確に別物として見せる。
   --------------------------------------------------------- */
.oc-clip{ margin:0; list-style:none; }

.oc-clip__link{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background:#fff;
    /* 実線ではなく破線＋外部色にして、記事カードと質感を変える */
    border:1.5px dashed var(--oc-ext);
    border-radius:12px;
    transition:box-shadow .2s, transform .2s, border-color .2s;
}
.oc-clip__link:hover{
    border-color:var(--oc-accent);
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    transform:translateY(-2px);
    color:inherit;
}

/* ---- プレビュー ---- */
.oc-clip__media{
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#14161a;
}
.oc-clip__preview{ width:100%; height:100%; object-fit:cover; display:block; }
.oc-clip__noPreview{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    color:rgba(255,255,255,.3);
    font-size:26px;
}
.oc-clip__badge{
    position:absolute; top:7px; left:7px;
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px;
    border-radius:999px;
    background:rgba(12,14,18,.7);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    color:#fff;
    font-size:10px;
    font-weight:700;
}
.oc-clip__badge i{ font-size:8px; }
.oc-clip__count{
    position:absolute; bottom:7px; right:7px;
    padding:2px 8px;
    border-radius:4px;
    background:rgba(12,14,18,.7);
    color:#fff;
    font-size:10px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

/* ---- 本文 ---- */
.oc-clip__body{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1 1 auto;
    padding:10px 11px 11px;
}

/* ---- 出演女優 ---- */
.oc-clip__people{ display:flex; align-items:center; gap:10px; min-height:30px; min-width:0; }
.oc-clip__person{ display:inline-flex; align-items:center; gap:5px; min-width:0; }
.oc-clip__face{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px;
    overflow:hidden;
    border-radius:50%;
    background:#f2f2f7;
    color:#c8c8d4;
    font-size:12px;
    box-shadow:0 0 0 2px var(--oc-accent);
}
.oc-clip__face img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.oc-clip__name{
    font-size:11px;
    font-weight:700;
    color:var(--oc-ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.oc-clip__more{
    flex:0 0 auto;
    padding:1px 7px;
    border-radius:999px;
    background:#f2f2f7;
    color:var(--oc-sub);
    font-size:9.5px;
    font-weight:700;
}

/* ---- プレイタグ ---- */
.oc-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.oc-tag{
    display:inline-flex; align-items:center;
    padding:2px 8px;
    border-radius:4px;
    background:rgba(255,102,153,.1);
    color:var(--oc-accent2);
    font-size:10px;
    font-weight:700;
    line-height:1.6;
    letter-spacing:.02em;
    white-space:nowrap;
}

/* ---- 外部リンクであることを示すCTA ---- */
.oc-clip__cta{
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin-top:auto;
    padding:9px 12px;
    border-radius:8px;
    background:var(--oc-ext);
    color:#fff;
    font-size:11.5px;
    font-weight:700;
}
.oc-clip__cta i{ font-size:9px; opacity:.85; }
.oc-clip__link:hover .oc-clip__cta{ background:var(--oc-accent); }

@media (max-width:600px){
    .oc-clip__face{ width:27px; height:27px; }
    .oc-clip__name{ font-size:10.5px; }
}

/* ---------------------------------------------------------
   クリップの並び
   SWELLのカード一覧はフレックス＋ .p-postList__item{width:50%}
   ＋左右パディングで組まれていて gap を足すと折り返してしまう。
   列の作り方ごとこちらで持つ。
   --------------------------------------------------------- */
.oc-clipGrid.p-postList{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(216px, 1fr));
    gap:18px 14px;
    margin:0 0 24px;
    padding:0;
}
.oc-clipGrid .p-postList__item{ width:auto; margin:0; padding:0; }

/* 幅が狭くなった分、カードの中身も少し詰める */
.oc-clipGrid .oc-clip__body{ gap:7px; padding:9px 10px 10px; }
.oc-clipGrid .oc-clip__face{ width:26px; height:26px; }
.oc-clipGrid .oc-clip__name{ font-size:10.5px; }
.oc-clipGrid .oc-clip__cta{ padding:7px 8px; font-size:10.5px; }

/* スマホは1列（カード内にCTAまで入っているので2列だと窮屈） */
@media (max-width:600px){
    .oc-clipGrid.p-postList{ grid-template-columns:1fr; gap:14px; }
}

/* single-oppai のクリップタブ：PCは2列（スマホは上の指定どおり1列） */
@media (min-width:601px){
    .oc-clipSection .oc-clipGrid.p-postList{ grid-template-columns:repeat(2, 1fr); }
}

/* サイドバー（新着クリップウィジェット）：常に1列 */
.oc-clipGrid--side.p-postList{ grid-template-columns:1fr; gap:12px; margin:0 0 12px; }
.oc-clipMore--side{ margin:0; }

/* single-oppai のタブ内：「すべて見る」 */
.oc-clipMore{ margin:-8px 0 8px; text-align:center; }
.oc-clipMore a{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 22px;
    border:1px solid var(--oc-accent);
    border-radius:999px;
    color:var(--oc-accent);
    font-size:12.5px;
    font-weight:700;
    text-decoration:none;
}
.oc-clipMore a:hover{ background:var(--oc-accent); color:#fff; }

/* ---------------------------------------------------------
   見出し
   --------------------------------------------------------- */
.oc-pagehead{
    display:flex; align-items:baseline; flex-wrap:wrap;
    gap:8px 12px;
    margin:0 0 18px;
    padding:0 0 14px;
    border-bottom:1px solid var(--oc-line);
}
.oc-pagehead__title{
    display:flex; align-items:baseline; flex-wrap:wrap;
    gap:10px;
    margin:0; padding:0;
    border:none; background:none;
    font-size:22px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.01em;
    color:var(--oc-ink);
}
/* SWELLがhに付ける装飾を打ち消す */
.oc-pagehead__title::before,
.oc-pagehead__title::after,
.oc-sectionhead::before,
.oc-sectionhead::after{ content:none !important; display:none !important; }

.oc-pagehead__text{ position:relative; }
.oc-pagehead__text::after{
    content:"";
    position:absolute; left:0; bottom:-5px;
    width:100%; height:3px;
    border-radius:2px;
    background:linear-gradient(90deg, var(--oc-accent) 0%, rgba(255,102,153,.15) 100%);
}
.oc-pagehead__sub{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--oc-sub); }
.oc-pagehead__count{ margin-left:auto; font-size:11px; color:var(--oc-sub); }
.oc-pagehead__count strong{ font-size:15px; color:var(--oc-ink); font-variant-numeric:tabular-nums; }
.oc-pagehead__lead{ width:100%; margin:10px 0 0; font-size:12.5px; line-height:1.7; color:#6c6c7a; }

.oc-sectionhead{
    display:flex; align-items:center; gap:8px;
    margin:0 0 12px; padding:0;
    border:none; background:none;
}
.oc-sectionhead__bar{ width:3px; height:15px; border-radius:2px; background:var(--oc-accent); flex-shrink:0; }
.oc-sectionhead__text{ font-size:14px; font-weight:800; color:var(--oc-ink); letter-spacing:.01em; }
.oc-sectionhead__sub{ font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--oc-sub); }
.oc-sectionhead__more{ margin-left:auto; font-size:11px; font-weight:700; color:var(--oc-accent); text-decoration:none; white-space:nowrap; }
.oc-sectionhead__more:hover{ text-decoration:underline; }

/* ---------------------------------------------------------
   単体ページ
   一覧では外部へ直行させるが、直リンクで開かれたときは
   ここが着地点になる。動画を主役に置き、女優・プレイを
   見せてから作品ページへ送る。
   --------------------------------------------------------- */
.oc-clipSingle{ max-width:840px; margin:0 auto; }

.oc-clipSingle__videos{ display:flex; flex-direction:column; gap:12px; margin:0 0 22px; }
/* 数秒のクリップなので、プレイヤーのUIは出さずGIFのように流す */
.oc-clipSingle__player{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    background:#14161a;
    box-shadow:0 4px 18px rgba(0,0,0,.12);
}
.oc-clipSingle__video{ width:100%; aspect-ratio:16 / 9; display:block; object-fit:cover; background:#14161a; }

/* 音だけは切り替えられるようにしておく（自動再生のため既定はミュート） */
.oc-clipSingle__mute{
    position:absolute; right:10px; bottom:10px; z-index:2;
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    border:none; border-radius:50%;
    background:rgba(12,14,18,.55);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    color:#fff;
    font-size:12px;
    cursor:pointer;
    opacity:0;
    transition:opacity .18s, background .18s;
}
.oc-clipSingle__player:hover .oc-clipSingle__mute,
.oc-clipSingle__mute:focus-visible,
.oc-clipSingle__mute.is-on{ opacity:1; }
.oc-clipSingle__mute:hover{ background:rgba(12,14,18,.75); }
.oc-clipSingle__mute.is-on{ background:var(--oc-accent); }
/* タッチ端末はホバーが無いので常時出す */
@media (hover:none){ .oc-clipSingle__mute{ opacity:1; } }

/* ---- 出演女優 ---- */
.oc-clipSingle__people{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:10px 18px;
    margin:0 0 18px;
    padding:12px 14px;
    background:#fff;
    border:1px solid var(--oc-line);
    border-radius:12px;
}
.oc-clipSingle__person{ display:inline-flex; align-items:center; gap:9px; min-width:0; text-decoration:none; color:inherit; }
a.oc-clipSingle__person:hover .oc-clipSingle__name{ color:var(--oc-accent); }
.oc-clipSingle__face{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px;
    overflow:hidden;
    border-radius:50%;
    background:#f2f2f7;
    color:#c8c8d4;
    font-size:18px;
    box-shadow:0 0 0 2.5px var(--oc-accent);
}
.oc-clipSingle__face img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.oc-clipSingle__name{ font-size:14px; font-weight:700; color:var(--oc-ink); line-height:1.4; }
.oc-clipSingle__to{ display:block; font-size:10.5px; font-weight:600; color:var(--oc-sub); }

/* ---- プレイタグ（本文内では少し大きく） ---- */
.oc-clipSingle .oc-tags{ margin:0 0 20px; gap:6px; }
.oc-clipSingle .oc-tag{ font-size:11.5px; padding:4px 11px; border-radius:6px; }

/* ---- アフィリエイト導線 ---- */
.oc-clipSingle__cta{
    margin:0 0 30px;
    padding:22px 20px;
    text-align:center;
    background:linear-gradient(135deg, rgba(255,102,153,.07) 0%, rgba(74,127,193,.06) 100%);
    border:1px solid var(--oc-line);
    border-radius:14px;
}
.oc-clipSingle__ctaLead{ margin:0 0 12px; font-size:13px; font-weight:700; color:var(--oc-ink); }
.oc-clipSingle__ctaBtn{
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 34px;
    border-radius:999px;
    background:var(--oc-accent);
    color:#fff;
    font-size:15px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(255,102,153,.32);
    transition:transform .15s, box-shadow .15s;
}
.oc-clipSingle__ctaBtn:hover{ transform:translateY(-2px); box-shadow:0 7px 20px rgba(255,102,153,.4); color:#fff; }
.oc-clipSingle__ctaBtn i{ font-size:12px; opacity:.85; }
.oc-clipSingle__ctaNote{ margin:11px 0 0; font-size:11px; color:var(--oc-sub); }

.oc-related{ margin:32px 0; }
.oc-related .p-postList{ margin-top:0; }

@media (max-width:600px){
    .oc-clipSingle__people{ padding:10px 11px; gap:8px 14px; }
    .oc-clipSingle__face{ width:44px; height:44px; font-size:15px; }
    .oc-clipSingle__name{ font-size:13px; }
    .oc-clipSingle__cta{ padding:18px 14px; }
    .oc-clipSingle__ctaBtn{ padding:13px 24px; font-size:14px; width:100%; justify-content:center; }
}

/* ---------------------------------------------------------
   アーカイブ
   --------------------------------------------------------- */
.oc-clipNav{
    display:flex; flex-wrap:wrap; gap:6px;
    margin:0 0 18px;
    padding:12px;
    background:#fff;
    border:1px solid var(--oc-line);
    border-radius:10px;
}
.oc-chip{ position:relative; display:inline-flex; text-decoration:none; }
.oc-chip > span{
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px;
    border:1px solid #e0e0ea;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:12px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap;
    transition:border-color .15s, background .15s, color .15s;
}
.oc-chip > span i{ font-style:normal; font-size:10px; color:#b0b0bd; font-variant-numeric:tabular-nums; }
.oc-chip:hover > span{ border-color:var(--oc-accent); color:var(--oc-accent); }
.oc-chip.is-on > span{ border-color:var(--oc-accent); background:var(--oc-accent); color:#fff; }
.oc-chip.is-on > span i{ color:rgba(255,255,255,.75); }
.oc-chip--all > span{ padding:5px 11px; font-size:11px; }

.oc-empty{
    padding:48px 20px;
    text-align:center;
    background:var(--oc-bg);
    border:1px dashed #dcdce6;
    border-radius:12px;
}
.oc-empty i{ font-size:30px; color:#c8c8d4; }
.oc-empty__title{ margin:14px 0 16px; font-size:14px; font-weight:700; color:var(--oc-ink); }
.oc-empty__cta{
    display:inline-block;
    padding:9px 22px;
    border-radius:999px;
    background:var(--oc-accent);
    color:#fff;
    font-size:12.5px;
    font-weight:700;
    text-decoration:none;
}