/* ===== 熟女パープル ブランドレイヤー（リニューアル用・追加ファイル） ===== */
:root{
  --juku-purple:      #7B2D8E;
  --juku-purple-deep: #4A1259;
  --juku-magenta:     #C73C82;
  --juku-pink:        #C73D6D;
  --juku-gold:        #C9A227;
  --juku-ink:         #2B0B33;
}

/* --- サイトロゴ（SVG差し替え後のサイズ調整） --- */
.juku-logo{ display:inline-block; max-width:100%; height:auto; }

/* --- カルーセルのカード枠（プラグインCSSの黄緑 box-shadow を上書き） --- */
.wa_chpcs_card .item-content{
  box-shadow:
    0 0 0 15px rgba(123, 45, 142, .92),
    0 2px 1px -1px rgba(60, 75, 100, 0),
    0 1px 1px 0 rgba(60, 75, 100, 0),
    0 1px 3px 0 rgba(60, 75, 100, 0) !important;
}
/* ハンバーガーメニューの背景（旧黄緑→パープル） */
.hm_menu_wrap{ background-color: #4A1259 !important; }

/* --- 背景コミックアートを熟女パープルへ色調変換（背景レイヤー限定） --- */
/* 記事サムネイル・カルーセル画像には一切かけない */
.background-images .background-image,
#background-slider .background-image{
  /* filter: grayscale(1) sepia(1) hue-rotate(242deg) saturate(1.9) brightness(1.12) contrast(.95); （ヒーロー背景は紫無地化のため不要） */
}
/* =====================================================================
   モバイル最適化（〜767px）
   目的：①横スクロールを完全に殺す ②ロゴ二重表示の解消
        ③デスクトップ用ナビの退避 ④タグ帯の高さ圧縮
   ===================================================================== */
@media (max-width: 767px){

  /* ① 横はみ出しの根本対策 */
  html, body{ overflow-x: hidden !important; max-width: 100% !important; }
  .animated-background{ overflow: hidden !important; }
  img, video, iframe{ max-width: 100% !important; height: auto; }


  /* ④ タグ帯：8行に膨張するので横スクロールの1〜2行帯にする */
  .tag-list.tagcloud{
    max-height: 5.4em;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tag-list.tagcloud::-webkit-scrollbar{ display: none; }
  .tag-list.tagcloud a{ display: inline-block !important; float: none !important; }

}

/* タブレット帯 */
@media (min-width: 768px) and (max-width: 1024px){
  html, body{ overflow-x: hidden !important; }
  .animated-background{ overflow: hidden !important; }
}

/* ---- カルーセル：カード幅350px固定を、狭幅端末で流動化（はみ出し防止） ---- */
@media (max-width: 420px){
  .wa_chpcs_card,
  .wa_chpcs_image_carousel .slick-slide,
  .wa_chpcs_image_carousel .slick-slide > div{
    max-width: calc(100vw - 26px) !important;
  }
  .wa_chpcs_card img{ width: 100% !important; height: auto !important; }
  .wa_chpcs_card .item-content{ box-shadow: 0 0 0 8px rgba(123,45,142,.92) !important; }
}

/* ---- スマホの可読性・余白の最終調整 ---- */
@media (max-width: 767px){
  /* 検索ボックスが画面幅を超えないように */
  input[type="text"], input[type="search"], select, textarea{
    max-width: 100% !important; box-sizing: border-box;
  }
  /* 見出し帯・セクションの左右余白を確保 */
  .recent-posts-wrapper, .popular-posts, .hm_list{
    padding-left: 12px; padding-right: 12px; box-sizing: border-box;
  }
  /* FANZAバナー帯が横スクロールで溢れないように */
  .marquee, .banner-strip{ max-width: 100vw; overflow: hidden; }
}

/* =====================================================================
   装飾背景レイヤーをフローから除外（重大レイアウト不具合の修正）
   実測：.animated-background が position:static のまま高さ46,554px を占有し、
        ヘッダー・本文を46,554px下へ押し出していた。高さがドキュメント高に
        追従する作りのため、伸びるほど自身も伸びる自己増殖状態だった。
   対処：装飾専用レイヤーとして固定配置・背面・クリック透過・はみ出しクリップ
   ===================================================================== */
/* [2026-10-01 無効化] fixed 固定だとカプセルが画面内に留まり、傾き・密度も崩れた。chatkomi.tokyo と同じ absolute（コンテンツと一緒にスクロール）へ戻すため、末尾「animated-background を chatkomi 同等に」ブロックへ移行。
.animated-background{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
*/

/* =====================================================================
   ページ種別で地の明るさを切り替える
   ・トップ：参照サイト同様、コミック調の濃い地を活かす（ヒーロー主役）
   ・記事／一覧／固定ページ：本文が #222 系のため淡色地にして可読性を確保
     （参照サイトも記事ページは白グラデを敷いて明るくしている＝実測確認済み）
   ===================================================================== */

body.single,
body.page,
body.archive,
body.category,
body.tag,
body.search,
body.error404{
  background-color: #F4ECFA !important;
  background-image:
    linear-gradient(rgba(244,236,250,0.62), rgba(244,236,250,1)),
    url('/Image/bg-body.png') !important;
  background-size: cover, 80px !important;
}

/* =====================================================================
   一覧ページ（カテゴリー／タグ）の見出し・件数
   実測：見出しが白文字のまま淡色地に載りコントラスト比 1.15（ほぼ不可視）、
        件数が #929292 で 2.7（AA基準4.5未満）だった
   ===================================================================== */
a.archive.taxonomy.category,
a.archive.taxonomy.category span,
a.archive.taxonomy.post_tag,
a.archive.taxonomy.post_tag span,
a.archive.taxonomy span{
  color: #4A1259 !important;
  text-shadow: none !important;
}
.post-count,
.post-count span,
.archive-count{
  color: #5A2A6B !important;
}

/* =====================================================================
   .white_no（白文字リンク）の可読性
   実測：23件中18件が淡色の地に直接載り、白文字で不可視（比1.15）だった。
        フッターの5件だけは暗い帯 rgba(0,0,0,.8) の上にあり白のままが正しい。
   ===================================================================== */
a.white_no{ color: #2B0B33 !important; }
footer a.white_no,
.random-bg-container a.white_no,
[style*="rgba(0,0,0,0.8)"] a.white_no,
[style*="rgba(0, 0, 0, 0.8)"] a.white_no{ color: #FFFFFF !important; }

/* =====================================================================
   残存コントラスト・比率の是正（実測ベース）
   ===================================================================== */
/* ① ハンバーガーメニュー：背景を濃色にしたので文字も明色へ（比1.09→改善） */
.hm_menu_wrap,
.hm_list,
.hm_list *,
.hm_menu_wrap p,
.hm_menu_wrap a,
.hm_menu_wrap span,
.hm_menu_wrap td{
  color: #F6EDFA !important;
}
.hm_menu_wrap a{ text-decoration: none; }
/* ③ ロゴの縦横比を保持（カテゴリページで縦100pxに引き伸ばされていた） */
img[src$="logo.webp"]{
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* =====================================================================
   ヘッダーロゴ拡大（2026-09-23／新ロゴ logo.webp 1000x400・2行組み対応）
   対象：ヘッダーPC（#title-text .zenmen）／ヘッダーSP（.juku-logo-inpage）のみ。
        ハンバーガーメニュー内・フッター・記事内の他ロゴ（上の共通ルール）は対象外。
   上の共通ルールも !important のため、ここではより詳細度の高いセレクタで上書きする。
   ===================================================================== */
/* 2026-10-01 オーナー指示：PCのロゴが大きすぎてパンくずに重なる → 104px→64px（chatkomi同等の56〜64px帯）。タブレット／スマホの指定は下のまま */
#title-text img.zenmen{
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: 175px !important;
  object-fit: contain;
}
@media (min-width: 768px) and (max-width: 1024px){
  #title-text img.zenmen,
  .none_03 img.juku-logo-inpage{
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain;
  }
}
@media (max-width: 767px){
  .none_03 img.juku-logo-inpage{
    height: 58px !important;
    max-height: 58px !important;
    width: auto !important;
    max-width: 145px !important;
    object-fit: contain;
  }
}

/* =====================================================================
   タグチップの文字色
   実測：.category a { color: inherit } が後勝ちして .tagcloud a { color:#333 }
        を打ち消し、祖先の #777 を継承 → 白地で比4.48（AA基準4.5未満）だった
   対処：本来意図されている #333 を確実に適用（hover時は白のまま維持）
   ===================================================================== */
.tagcloud a,
ul.tag-list.tagcloud a{ color: #333 !important; }
.tagcloud a:before,
ul.tag-list.tagcloud a:before{ color: #333 !important; }
.tagcloud a:hover,
ul.tag-list.tagcloud a:hover{ color: #fff !important; }
.tagcloud a:hover:before,
ul.tag-list.tagcloud a:hover:before{ color: #fff !important; }

/* =====================================================================
   2026-09-29 オーナー指示／トップページの記事カード一覧（新着記事ウィジェット）
   症状：サムネイル下のタイトルが暗い地に暗い文字で読めない。
   実測した原因：この「新着記事」ウィジェット（.recent-posts-wrapper 内の
        a.white_no）は、カテゴリー／タグ／著者／検索／個別記事ページでは
        <footer> 要素の内側に出力されるため、既存の
        `footer a.white_no{color:#FFFFFF}` が効いて白文字になる。
        ところがトップページ（フロントページ）だけは同じウィジェットが
        <footer> の外（本文側）に出力されており、9/10の a.white_no 濃色化
        （#2B0B33）の分岐対象に含まれず、黒地画像 Image/black.webp の上に
        濃色文字が乗って不可視（実測 color: rgb(43, 11, 51) on black.webp）
        になっていた。他ページでは既に白なので、このルールを足しても
        差分は出ない（フッター内・トップ本文内のどちらも対象に含める）。
   対象：.recent-posts-wrapper 内の a.white_no（トップページ含む全ページで
        16件のカードタイトルリンク）
   ===================================================================== */
.recent-posts-wrapper a.white_no{ color: #FFFFFF !important; text-decoration: underline; }
.recent-posts-wrapper a.white_no:hover,
.recent-posts-wrapper a.white_no:focus{ text-decoration: none !important; }

/* ===== 記事カードグリッド：chatkomi.tokyo 構造に合わせる（2026-10-01） ===== */
.recent-posts-wrapper .recent-post-thumbnail{ border-radius:15px; }
.recent-posts-wrapper a:hover .recent-post-thumbnail{ border-color:#4A148C !important; }
.recent-posts-wrapper .diagonal{ max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:9 !important; }
.more-button-wrapper .tug_04{ display:inline-block; line-height:normal; margin:2px; padding:10px 15px !important; background:#fff; color:#4A148C !important; border:solid 2px #7B2D8E; border-radius:50px; }
.more-button-wrapper .tug_04:hover{ background:#7B2D8E; color:#fff !important; border-color:#7B2D8E; }

/* ===== 2026 theme fixes ===== */
/* カテゴリースライダー：濃い紫の地に紫文字で読めない → ラベルは淡色・見出しは白（カテゴリー色は画像オーバーレイと丸ボタンで維持） */
.fca-feature-label{ color:#F1D6FA !important; }
.fca-feature-title{ color:#FFFFFF !important; }
/* ヒーローのキャッチコピー：明るい背景画像でも読めるよう濃紫の縁取り影を付ける */
.sl-word,.sl-en{ text-shadow:0 0 4px #2B0B33, 0 2px 14px rgba(43,11,51,.9) !important; }
/* カテゴリー／タグ／検索の見出しと固定ページ本文：紫の地に濃色文字で読めない → 淡色パネルを敷く */
.juku-title-panel{ background:rgba(244,236,250,.94); border-radius:15px; padding:10px 24px; }
.container .contents > article.article-content{ background:rgba(255,255,255,.95); border-radius:15px; padding:20px 24px; color:#222; }
/* ヒーロー：英語サブコピーが日本語キャッチ（折り返して3行になる場合も）に重ならないよう、上に積んで中央寄せ */
.sl-hero-copy{ align-content:center !important; grid-auto-rows:max-content !important; row-gap:12px; }
.sl-en{ margin:0 !important; }
.sl-jp{ margin:0 !important; }
/* juku-ranking-purple: 人気ランキング枠の橙/金背景（画像 rank.webp）を紫に・リンクを白に・フォールバック色のカテゴリーピルを紫に */
.wpp-list.wpp-cardview{ background-image:linear-gradient(180deg,#9B3FB5 0%,#6A2288 55%,#4A148C 100%) !important; border:3px solid #E9C5F5; border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.45); }
.wpp-list.wpp-cardview a,.wpp-list.wpp-cardview .wpp-post-title a{ color:#fff !important; }
a.cat-tag[style*="#ff2d55"]{ background:#7B2D8E !important; }
/* 2026-10-01 フェーズ3：スマホのタグ帯（max-height 5.4em）が2行目の途中で切れて見える → 折り返す2行分ちょうどの高さにして切れ目をなくす */
@media (max-width: 767px){
  .tag-list.tagcloud{ flex-wrap:wrap; white-space:normal; overflow-x:hidden; max-height:76px; }
}
/* 2026-10-01 ピンク/黄土色の残り直し：お問い合わせ送信ボタン（kaiun.css の #ffb7c1/#ff4646 を上書き）・装飾ライン（淡青/桃→淡い紫） */
.wpcf7 input[type="submit"]{ background:#7B2D8E; color:#fff; border:solid 2px #fff; }
.wpcf7 input:hover[type="submit"]{ background:#4A148C; color:#fff; }
.pastel-blue{ background:#C9A8E0; }
.pastel-pink{ background:#E6D0F2; }
/* 2026-10-01 オーナー指示：スマホのパンくずを「白文字＋下線／ホバーで下線なし」に統一。
   実測：パンくずは常に黒帯（インライン linear-gradient 黒）の上に出る。個別記事のカテゴリーリンク（a.white_no）だけが
         濃紫 #2B0B33（サイトカラーの ink）で黒帯に沈んで読めなかった → 帯の中のパンくずだけ白に固定（帯は既に黒なので追加の帯は不要）。
   対象：ヘッダー直下の黒帯（div.zenmen／table.zenmen_02）とフッター側の同等ブロック内の <p> のみ（属性セレクタで限定）。PC幅は変更なし。 */
/* 全幅適用（2026-10-01 追補：タブレット／PCでも黒帯上のパンくずが沈むため @media を外した） */
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"]{ color:#fff !important; }
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] a,
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a.white_no,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a.white_no,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] a.white_no,
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p i,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p i,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] i{ color:#fff !important; }
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] a{ text-decoration:underline !important; }
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a:hover,
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a:focus,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a:hover,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a:focus,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] a:hover,
  div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] a:focus{ text-decoration:none !important; color:#fff !important; }
  /* カテゴリー／タグ一覧のパンくず（Breadcrumb NavXT）の現在位置リンクは a.archive.taxonomy（＋内側の span）で、
     一覧見出し用の「濃紫 !important」（上の a.archive.taxonomy… とサイトカラー出力）が当たって黒帯に沈む → 詳細度を上げて帯の中だけ白に */
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a.archive.taxonomy,
  .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a span,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a.archive.taxonomy,
  table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"][style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p a span{ color:#fff !important; text-shadow:none !important; }

/* juku-archive-count-white: サイドバー「アーカイブ／カテゴリー」の記事数バッジ（グレー地）の数字を白に（2026-10-01）。.post-count 全体の紫文字（一覧ページ見出し用）は変えず、ウィジェット内だけ詳細度で上書き */
html body .widget_archive ul li a .post-count,
html body .widget_categories ul li a .post-count{ color:#fff !important; }

/* =====================================================================
   2026-10-01 デザイン画像：ロゴ・著者アイコンを各1項目に統合（juku_img_logo／juku_img_avatar）
   どんな画像（横長・正方形・縦長・SVG）を設定しても、置き場所ごとの寸法に収まるよう
   システム側で合わせる。<img> には juku_img_tag()／ウィジェット出力フィルターが
   自動で .juku-logo／.juku-avatar を付ける。
   ・ロゴ     … 縦横比を保ったまま枠に収める（歪み・はみ出しなし）。
               ヘッダー（PC/SP）の高さ104/72/58pxは、上の #title-text／.juku-logo-inpage の指定が優先。
               （従来は src$="logo.webp" で当てていたため、別ファイルのロゴに差し替えると効かなかった）
   ・アイコン … 丸く（border-radius:50%）、正方形に切り抜いて（object-fit:cover）表示。
   ===================================================================== */
img.juku-logo{
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}
img.juku-avatar{
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
}
/* 見出し（h2）の右上に小さく出る丸アイコン（footer.php の JS が挿入）。
   正方形の丸アイコン前提：見出しの上余白（80px）の中に収まり、見出し文字には重ならない。 */
h2 img.juku-h2-avatar{
  position: absolute;
  top: 10px;
  right: 14px;
  width: 64px;
  height: 64px;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  background-color: #fff;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 779px){
  h2 img.juku-h2-avatar{
    top: 8px;
    right: 10px;
    width: 52px;
    height: 52px;
  }
}

/* ===== animated-background を chatkomi 同等に（2026-10-01）=====
   position:absolute＋高さはfooter.phpのJSがドキュメント全高に合わせる（chatkomi と同一）。
   コンテンツと一緒にスクロールし、カプセルは固定されない。z-index/opacity は Additional CSS 側（chatkomi と同一）に従う。 */
.animated-background{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* 2026-10-02 追記：カプセルを本文エリア（「N件の記事が該当しました」の淡色パネル・記事カード）の上にも見せる。
   原因：Additional CSS が z-index:0 !important。.container（position:relative; z-index:auto）が DOM 上で後ろにあるため、
         同じ積層文脈でカプセルより上に描かれ、.juku-title-panel（背景 .94）や記事カードがカプセルを覆っていた。
   対策：z-index:1 に上げる（Additional CSS の !important に勝つため詳細度を上げる）。
         ハンバーガーのドロワー(.hm_wrap z2)・ボタン(.hm_btn z11)・固定ヘッダー(#header z100／.fixheader z200)・年齢認証より下のまま。
         pointer-events:none は維持（クリックは素通し）。不透明度は変更しない。 */
/* 2026-10-02 変更：z-index 1 → -1。カプセルを最背面へ（スライダー・カード・文字・画像の後ろ）。body を積層文脈にする下記「背景カプセルの色」ブロックの body{isolation:isolate} と対。旧値 1 */
html body > .animated-background{ z-index: -1 !important; }

/* ===== 2026-10-01 人気ランキング：カテゴリーの角丸カプセルをカプセル単位で折り返す =====
   原因：.taxonomies が position:absolute＋white-space:nowrap＋overflow:hidden＋max-width:80%（style.css）で1行に固定され、
         2個目のカプセルが枠外で切れていた。スマホでは .cat-tag が white-space:normal（カプセル内で折り返し）になっていた。
   対策：親は static の flex-wrap（高さが増えてもタイトルを押し下げる）、カプセルは inline-flex＋nowrap で1個の中では折り返さない。
         カプセル1個が親幅より長いときだけ「…」で省略。 */
.wpp-list.wpp-cardview .wpp-item-data{ margin-top:0 !important; min-width:0; }
.wpp-list.wpp-cardview .taxonomies{
  position:static !important; display:flex !important; flex-wrap:wrap !important; align-items:center;
  gap:4px 6px; margin:0 0 6px !important; max-width:100% !important; width:auto;
  white-space:normal !important; overflow:visible !important; text-align:left;
}
.wpp-list.wpp-cardview .taxonomies a.cat-tag{
  display:inline-flex !important; align-items:center; flex:0 0 auto; box-sizing:border-box;
  white-space:nowrap !important; max-width:100% !important; min-width:0; margin:0 !important;
  padding:3px 12px !important; gap:4px; overflow:hidden !important;
}
/* 2026-10-01 追記：inline-flex のフレックスコンテナには text-overflow が効かないため、文字だけを .cat-tag-label（block）に入れて「…」にする。
   右パディング12pxは保たれる。アイコン <i> は縮めない。 */
.wpp-list.wpp-cardview .taxonomies a.cat-tag i{ flex:0 0 auto; margin-right:0 !important; }
.wpp-list.wpp-cardview .taxonomies a.cat-tag .cat-tag-label{
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== 2026-10-01 人気ランキング見出し：ロゴとの間隔＋「人気ランキング 日付」をリボン画像（2本の金帯）の縦中央に ===
   原因：ウィジェット本文（custom_html-26）が、リボン→ロゴ→見出しの順に並べ、ロゴ（margin-top:-50px）と見出し（margin-top:-15px）を
         負マージンでリボンに重ねていたため、ロゴ下端と見出し上端が約10px重なり、文字はリボン中心より約10px上にあった。
   対策：ウィジェット本文のHTMLは触らず、CSSで grid 化。行1＝ロゴ、行2＝リボン画像、見出しはリボンと同じセル（align-self:center＝縦中央）。
         リボンの下端は list に重ねる従来の見え方を、ウィジェットの margin-bottom（%＝幅基準＝リボン高さに比例）で再現。 */
.custom-html-widget:has(> .zenmen_02 > img#ranking){
  display:grid; grid-template-columns:100%; justify-items:center; align-items:center; padding:0;
}
.widget:has(> .custom-html-widget > .zenmen_02 > img#ranking){
  margin-bottom:-5.67% !important; /* リボン高さ(=幅×70%×100/778≒9%)の約63%を list に重ねる */
}
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .none_04,
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .none_03,
.custom-html-widget:has(> .zenmen_02 > img#ranking) > div:empty{ display:none !important; }
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02{ width:100%; margin:0 !important; padding:0; text-align:center; }
/* 行1：ロゴ（下に12pxの余白） */
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02:has(> img.juku-logo){ grid-row:1; grid-column:1; margin-bottom:12px !important; }
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > img.juku-logo{ display:block; margin:0 auto !important; }
/* 行2：リボン画像（幅70%・高さは画像比率で固定） */
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02:has(> img#ranking){ grid-row:2; grid-column:1; line-height:0; }
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > img#ranking{ display:block; margin:0 auto !important; width:70%; height:auto; aspect-ratio:778/100; }
/* 行2（同セル）：見出しをリボンの縦中央に重ねる */
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02:has(> .my-font){
  grid-row:2; grid-column:1; align-self:center; z-index:11; line-height:1;
  display:flex; justify-content:center; align-items:center; gap:6px; pointer-events:none;
}
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > .none_04{ display:none !important; }
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > .my-font,
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > .my-font + span{ display:block; line-height:1; }

/* ===== 2026-10-01 オーナー指示：ヒーローのカテゴリーボタン（12個）を PC＝幅いっぱい1行／タブレット＝2行／スマホ＝2段の横スクロール =====
   マークアップ：custom_html-74 の <div class="random-cat-wrap juku-hero-cats">。style.css の .random-cat-btn（font-size:8px 等）より詳細度で勝たせる。 */
.random-cat-wrap.juku-hero-cats{ box-sizing:border-box; width:100%; max-width:100%; min-width:0; }
.random-cat-wrap.juku-hero-cats a.random-cat-btn{ box-sizing:border-box; white-space:nowrap; margin:0; line-height:1.4; }
/* PC（1025px〜）：12個を等幅で1行。アイコンは文字を優先して非表示、長い名前は「…」で省略 */
@media (min-width: 1025px){
  .random-cat-wrap.juku-hero-cats{ display:flex; flex-wrap:nowrap; gap:6px; }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn{
    display:block; flex:1 1 0; min-width:0; text-align:center; font-size:12px; padding:6px 4px;
    overflow:hidden; text-overflow:ellipsis;
  }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn i{ display:none; }
}
/* タブレット（768〜1024px）：2行（6個ずつ） */
@media (min-width: 768px) and (max-width: 1024px){
  .random-cat-wrap.juku-hero-cats{ display:flex; flex-wrap:wrap; gap:6px; }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn{
    display:block; text-align:center; text-overflow:ellipsis; flex:1 1 calc(16.66% - 6px); min-width:0;
    font-size:12px; padding:6px 8px; overflow:hidden;
  }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn i{ font-size:11px; }
}
/* スマホ（〜767px）：8個表示（9個目以降は sp-hide で非表示）。行数は成り行きで折り返し（横スクロールなし） */
@media (max-width: 767px){
  .random-cat-wrap.juku-hero-cats{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; overflow:visible;
  }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn{
    display:inline-flex; align-items:center; font-size:12px; padding:6px 12px;
  }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn.sp-hide{ display:none; }
  .random-cat-wrap.juku-hero-cats a.random-cat-btn i{ font-size:11px; }
}

/* ===== grid/carousel section = chatkomi（2026-10-01） ===== */
/* chatkomi.tokyo の「記事グリッド〜黒帯カルーセル〜Recommendation／Category」区間に構造・寸法を合わせる。
   色はブランド（熟女パープル）のまま。chatkomi 側はプラグインCSS(custom-style.css)を改造して実現しているため、
   ここでその寸法・並びだけを再現する（プラグイン本体・ウィジェット本文・DBは触らない）。 */
/* 1) 透かし英字：chatkomi は .sl-en{margin:0 0 -255px !important} でカルーセルの上に重ねる。
      ヒーロー用の .sl-en{margin:0 !important}（上方）に負けないよう、この区間（margin:300px 0 0 の div 直下）だけ復元 */
div[style*="margin:300px 0 0"] > .sl-en{ margin:0 0 -255px !important; }
/* 2) カルーセル画像枠：16:20 の枠に中央トリミング（chatkomi は img に class wa_card_img が付くが、ローカルは付かないため id 前方一致で指定） */
.wa_chpcs_image_carousel .wa_featured_img{ position:relative; width:100%; aspect-ratio:16/20; overflow:hidden; border-radius:2px; line-height:0; }
.wa_chpcs_image_carousel .wa_featured_img img[id^="wa_chpcs_img_"]{ position:absolute; inset:0; width:100%; height:340px; object-fit:cover; object-position:center; display:block; border-radius:10px !important; }
.wa_chpcs_image_carousel .wa_featured_img .ico_play,
.wa_chpcs_image_carousel .wa_chpcs_pagination{ display:none !important; }
/* 3) カード：高さ500px（プラグイン設定は400px のためインラインstyleを上書き）・縦並びの白カード・枠は12px */
.wa_chpcs_image_carousel li.wa_chpcs_card{ height:500px !important; }
.wa_chpcs_image_carousel .wa_chpcs_card .item-content{ display:flex; flex-direction:column; min-width:0; margin:15px; }
/* 3b) 角丸を同心に統一（2026-10-01 オーナー指示）：外側R=22px固定／内側R＝22px−枠の太さ（PC枠12px→10px・≤420px枠8px→14px）。
       紫の枠は item-content の box-shadow(spread=枠太さ)で描くため、item-content の border-radius を内側Rにすると外側は自動で 内側R+枠＝22px になり、角でも枠の太さが均一。
       画像枠・画像の角丸も内側Rに揃える（変数は子孫へ継承）。 */
.wa_chpcs_image_carousel .wa_chpcs_card .item-content{ --juku-cr-outer:22px; --juku-cr-frame:12px; --juku-cr-inner:calc(var(--juku-cr-outer) - var(--juku-cr-frame)); border-radius:var(--juku-cr-inner); }
.wa_chpcs_image_carousel .wa_chpcs_card .item-content .wa_featured_img{ border-radius:var(--juku-cr-inner); }
.wa_chpcs_image_carousel .wa_chpcs_card .item-content .wa_featured_img img[id^="wa_chpcs_img_"]{ border-radius:var(--juku-cr-inner) !important; }
@media (min-width: 421px){
  .wa_chpcs_card .item-content{
    box-shadow:
      0 0 0 12px rgba(123, 45, 142, .92),
      0 2px 1px -1px rgba(60, 75, 100, 0),
      0 1px 3px 0 rgba(60, 75, 100, 0) !important;
  }
}
@media (max-width: 420px){
  .wa_chpcs_image_carousel .wa_featured_img img[id^="wa_chpcs_img_"]{ height:100% !important; }
  .wa_chpcs_image_carousel .wa_chpcs_card .item-content{ --juku-cr-frame:8px; }
}
.wa_chpcs_image_carousel .wa_chpcs_slider_title,
.wa_chpcs_image_carousel .wa_chpcs_slider_title a{ font-weight:900 !important; }
/* 4) 矢印：chatkomi は 40×40・文字30px・上マージン-40px */
html body #wa_chpcs_image_carousel2060 .wa_chpcs_prev,
html body #wa_chpcs_image_carousel2060 .wa_chpcs_next{ font-size:30px !important; line-height:37px; width:40px; height:40px; margin-top:-40px !important; }
/* 5) Category 見出しのタグ：chatkomi は上余白10px（ウィジェット本文のインライン20pxを上書き） */
.category-slider-section > a.tug_06{ margin-top:10px !important; }
/* 6) 「もっと見る」：chatkomi は body に home クラスが付かないため body:not(.home) .more-button-wrapper{top:25px} が効き、
      ボタンが25px下がって黒帯の下端にかかる。ボタン高さは line-height:12px（高さ36px）。 */
.custom-class .more-button-wrapper{ position:relative; top:25px; }
.custom-class .more-button-wrapper .tug_04{ line-height:12px; }

/* ===== article card category pills（2026-10-01） ===== */
/* 記事一覧カード（loop-content.php）のカテゴリーカプセル：左右8px・行間6px・最大2行（PC/スマホ共通）。
   ヒーロー／ランキング／カードグリッド（.recent-posts-wrapper .diagonal）には効かせない。 */
article.article-list .juku-card-cats{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px 8px; overflow:hidden; max-height:58px; margin-bottom:6px; }
/* 縦中央（2026-10-01）：loop-content.php のインライン style（display:inline-block）に勝つため display は !important。
   アイコン・ラベルとも line-height:1 の 10px ボックスにして、26px カプセルの align-items:center で上下中央に揃える。 */
article.article-list .juku-card-cats .diagonal{ display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; height:26px; padding:0 12px !important; line-height:1 !important; white-space:nowrap; margin:0 !important; flex:0 0 auto; max-width:100%; min-width:0; overflow:hidden; vertical-align:middle; }
article.article-list .juku-card-cats .diagonal i{ flex:0 0 auto; display:inline-block; line-height:1 !important; vertical-align:middle; font-size:10px; margin:0 4px 0 0 !important; }
article.article-list .juku-card-cats .diagonal .cat-tag-label{ display:inline-block; line-height:1; vertical-align:middle; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* juku-blogcard-logo-fix 2026-10-01: ブログカードのロゴを枠内へ（縦位置のみ。right/width/heightは据え置き） */
html .blog-card::after{ top:auto !important; bottom:7px !important; }

/* ===== footer brand block（2026-10-01）: 丸アイコン→サイト名文字→ロゴを縦に並べ、重ならない ===== */
/* パネル（当サイトの情報について）の下に 32px、丸アイコンとロゴの間に文字。負マージンは使わない。 */
.random-bg-container .juku-footer-brand{ display:flex; flex-direction:column; align-items:center; margin:32px 0 0; padding:0 10px; }
.random-bg-container .juku-footer-brand img.juku-footer-icon{ display:block; width:120px; height:120px; max-width:100%; margin:0 0 10px; flex:0 0 auto; }
.random-bg-container .juku-footer-brand .juku-footer-tagline{ font-size:12px; line-height:1.5; color:#fff; text-align:center; margin:0 0 12px; }
.random-bg-container .juku-footer-brand a.juku-footer-logo-link{ display:block; line-height:0; margin:0; }
/* フッターのロゴだけ大きく（共通の img.juku-logo{max-height:56px} に勝つ詳細度）：PC 高さ96px・幅は比率維持で最大280px */
.random-bg-container .juku-footer-brand img.juku-logo.juku-footer-logo{ display:block; height:auto !important; max-height:96px !important; width:auto !important; max-width:280px !important; margin:0 auto; }
@media (max-width: 767px){
  .random-bg-container .juku-footer-brand img.juku-logo.juku-footer-logo{ max-height:72px !important; max-width:240px !important; }
}

/* ===== トップへ戻るボタン（2026-10-01）：PC・スマホ共通の1枚。スマホは自動で小さく（PC60px→SP44px）。旧 none_03/none_04 の表示切替は使わない ===== */
#back-to-top-1 img.juku-totop{ display:block; width:60px; height:auto; max-width:none; }
@media (max-width:780px){
  #back-to-top-1{ bottom:10px !important; }
  #back-to-top-1 img.juku-totop{ width:44px !important; }
}
/* 2026-10-01 オーナー指示：サイドバー「Category／カテゴリーから選ぶ」(#custom_html-25) の見出し帯とセレクト(#categories-3)の被りを解消し、タグ(ul.tag-list.tagcloud)を全件・全文表示にする。
   実測：見出し本文の末尾 margin-bottom:-30px でセレクトが帯の下に8px潜っていた(PCは5px)／スマホのタグ帯は max-height:76px＋overflow:hidden で2行目以降が隠れ、PCも .tagcloud a の max-width:150px＋ellipsis で長い名前が省略される */
#categories-3{ padding-top:24px; }
@media (max-width:767px){
  #archives-1,#custom_html-29{ padding-top:6px; }
}
ul.tag-list.tagcloud{ max-height:none !important; overflow:visible !important; flex-wrap:wrap; white-space:normal; padding-bottom:0; }
ul.tag-list.tagcloud a{ max-width:100% !important; overflow:visible !important; text-overflow:clip !important; white-space:nowrap; }

/* ===== 2026-10-02 積層順の整理（オーナー指示）=====
   (1) 見出しパネル(.juku-title-panel)上辺のカテゴリー色の線は inc/juku-category-colors.php の出力を止めて削除。他の出所が残っても出ないよう念のため0に。
   (2) 白い部品（記事カード・記事本文・目次・ブログカード・サイドバーのウィジェット）は、カプセル(z1)より上の z-index:2 で最前面。淡色パネル(.juku-title-panel)・ページ余白の上ではカプセルが見える。
       .container は積層文脈を作らない（z-index:auto のまま）ので、カード z2 はルート文脈でカプセル z1 と比較される。
   (3) メガメニューの展開(.mega-dropdown z9999)は祖先 body > .zenmen（積層文脈）の中に閉じ込められるため、祖先側を z50 にしてカード(z2)より上へ。
       固定ヘッダー(#header z100／.fixheader z200)・ハンバーガー・年齢認証より下。 */
html body .juku-title-panel{ border-top:0 !important; }
html body article.article-list,
html body article.article-content,
html body .container .blog-card,
html body .container .content_txt_03,
html body .container div[id^="ez-toc-container"],
html body .container .widget{ position:relative; z-index:2; }
html body article.article-list{ background-color:#fff; }
/* style.css の .zenmen{z-index:1 !important} に勝つため !important＋高い詳細度 */
html body > .zenmen{ position:relative; z-index:50 !important; }
/* トップへ戻る(#back-to-top-1 は z1 の固定要素)：カード等の z2 に潜らないよう、カード(z2)・メガメニュー(z50)より上・固定ヘッダー(z100)より下へ */
html body #back-to-top-1{ z-index:60 !important; }
/* 2026-10-02 見出しウィジェット（人気ランキングのリボン＋見出し／Category・Archive・News の黒帯見出し）は、直後の白いウィジェット（z2）に下端を重ねているので、
   それより手前の z3 に（DOM 順で後ろのウィジェットが z2 同士で上に来て見出しを隠していた）。メガメニュー z50・トップへ戻る z60・ヘッダー z100 より下。 */
html body .container #custom_html-26,
html body .container #custom_html-25,
html body .container #custom_html-27,
html body .container #custom_html-28{ position:relative; z-index:3; }


/* =====================================================================
   2026-10-02 オーナー指示（永井様サイト）：A フッターのタグ群を中央配置／B パンくずのカテゴリー名を白に統一／C PCのサイドバーを見出し帯の高さまで引き上げ
   ・A 実測：footer.php の「検索エリア」(780px・margin なし) と吹き出し(.balloong) が親の左端(0〜780px)に寄っていた。
        ブロックごと margin:auto で中央へ。タグ群(ul.tag-list.tagcloud)は左詰めのまま、幅=コンテンツ幅の flex-wrap。
   ・B 実測：inc/juku-category-colors.php が出していた「パンくず現在位置（黒帯で読める色）」(html body.category-N a.archive.taxonomy.category.current-item span{color:… !important})
        が白指定より詳細度が高く、カテゴリー色になっていた → PHP側の出力を停止。念のためヘッダー・フッター両方の黒帯内を白に固定（フッターの span も）。
   ・C 実測：index.php（カテゴリー／タグ／検索／アーカイブ）は .container 直下が「見出し帯(全幅ブロック)→.contents(float)→aside(float)」の並びで、
        サイドバーが見出し帯の下（高さ約240px）から始まっていた。PC(≥1025px)のみ、見出し帯を左カラムに入れ、サイドバーを右カラムの最上段（メガメニュー直下）から開始。
        記事・固定ページは .contents と aside が既に同じ高さ（差10px）のため変更なし。スマホ・タブレット(〜1024px)は従来どおり。
   ===================================================================== */
/* A */
html body .juku-foot-search,
html body footer .balloong{ margin-left:auto; margin-right:auto; }
html body .juku-foot-tags ul.tag-list.tagcloud{ display:flex; flex-wrap:wrap; justify-content:flex-start; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
/* B */
html body .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p,
html body .zenmen[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p *,
html body table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p,
html body table.zenmen_02[style*="rgba(0,0,0,1.0), rgba(0,0,0,1.0)"] p *,
html body div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"],
html body div[style*="rgba(0,0,0,1.0), rgba(0,0,0,0.9)"] p.zenmen[style*="font-size: 80%"] *{ color:#fff !important; text-shadow:none !important; }
/* C */
@media (min-width:1025px){
  html body .container.juku-has-head{ display:grid; grid-template-columns:minmax(0,70%) minmax(0,28%); column-gap:2%; align-items:start; grid-template-areas:"head side" "main side"; }
  html body .container.juku-has-head::after{ display:none !important; content:none !important; }
  html body .container.juku-has-head > .juku-archive-head{ grid-area:head; min-width:0; }
  html body .container.juku-has-head > .contents{ grid-area:main; float:none; width:auto; margin-right:0; min-width:0; }
  html body .container.juku-has-head > #sidebar{ grid-area:side; float:none; width:auto; min-width:0; margin-top:0 !important; padding-top:0 !important; align-self:start; }
}

/* =====================================================================
   2026-10-02 オーナー指示（永井様サイト）：記事ページ（single.php／dmm-post 自動生成記事）
   ・根本原因：投稿ページの本文ラッパーは <article class="kiji">（固定ページは article.article-content）。
     z-index:2 の「白い部品」ルールの対象に article.kiji が入っておらず、記事全体が z auto のまま
     body > .animated-background（z1）より背面に描かれていた（→ バッジ・アイキャッチ・商品画像・サンプル画像がカプセルの背面に見えた）。
   ・対策：article.kiji を z2 の積層文脈にする。カプセル(z1)より前面／メガメニュー(z50)・固定ヘッダー(z100)より背面。
     中の画像・バッジ・黒い角丸ボックス・サンプル画像はすべてこの文脈の中なので、まとめてカプセルより前面になる。背景は透明のまま（カプセルは余白に見える）。
   ・表（dmm-post が出す「発売日・収録時間…」）：1項目＝1行の table が <ul class="wp-block-list"> の li に並ぶ。style.css に罫線指定が無く border=0 のため罫線が見えなかった。
     dmm-post の表だけ（ul.wp-block-list > li > table）に熟女パープル淡色の罫線を描く。他のテーブルには影響しない。
   ===================================================================== */
html body article.kiji{ position:relative; z-index:2; }
html body section.content ul.wp-block-list:has(> li > table){ list-style:none; padding-left:0; margin-left:0; }
html body section.content ul.wp-block-list > li > table{ border-collapse:collapse; width:100%; border:0; }
html body section.content ul.wp-block-list > li > table th,
html body section.content ul.wp-block-list > li > table td{ border:1px solid #D9C7E6; padding:8px 10px; text-align:left; }
html body section.content ul.wp-block-list > li > table th,
html body section.content ul.wp-block-list > li > table td:first-child{ background:#F4ECFA; color:#2B0B33; width:30%; }
/* 行をまたぐ境目が二重線にならないよう、2行目以降の上罫線は消す（直前の行の下罫線が境目になる） */
html body section.content ul.wp-block-list > li:not(:first-child) > table th,
html body section.content ul.wp-block-list > li:not(:first-child) > table td{ border-top:0; }

/* ===== author box / notice（2026-10-02） ===== */
/* 「記事一覧はこちら」ボタン：白い箱（z2）の下端に負マージンで重なるため、ラッパーを箱より前面（z3）に。メガメニュー(z50)より下 */
html body .juku-author-more{ position:relative; z-index:3; }
html body .juku-author-more a.tug_04{ position:relative; z-index:3; }
/* プロフィール文：「。」ごとの改行を読みやすく */
html body #author_profile #custom_html-23 .textwidget{ line-height:1.9; text-align:left; }
/* 吹き出し下の注記：吹き出し（および ::after のしっぽ）に隠れないよう、下端から十分な余白をあけて全文表示 */
html body .juku-info-note{ position:relative; z-index:1; clear:both; margin-top:24px !important; line-height:1.7 !important; height:auto !important; overflow:visible !important; }

/* ===== FANZA API credit（2026-10-02） ===== */
html body .juku-fanza-credit{ margin:10px 0 8px !important; padding:0 !important; text-align:center; line-height:1; color:#fff; font-size:11px; }
html body .juku-fanza-credit a{ display:inline-block; background:rgba(255,255,255,.9); padding:4px 8px; border-radius:4px; color:#fff; font-size:11px; line-height:1; text-decoration:none; }
html body .juku-fanza-credit img{ display:block; width:135px; height:17px; max-width:100%; margin:0 auto; border:0; color:#333; font-size:11px; }

/* ===== megamenu SP image（2026-10-02） ===== */
/* メガメニュー帯の右側に出す画像（外観→デザイン画像「メガメニュー右側の画像（スマホ表示時）」）。PC（768px以上）は検索窓があるため非表示。
   未設定のときは <li> 自体が出力されないので、この CSS は何も起こさない */
html body li.juku-megamenu-sp-img{ display:none; list-style:none; margin:0; padding:0; }
@media (max-width:767px){
  /* 画像があるときだけ、ボタンの最小幅を外して（文字幅ぶんに）右側の余白を確保する。ボタンの見た目（枠・文字・高さ）は変えない */
  html body ul.menu.zenmen.juku-has-sp-img > li.menu-item{ min-width:0 !important; flex:0 0 auto; }
  /* 画像は高さ76px固定（帯のボタン行64pxより大きい）。<li>の占有は帯内(44px)のまま、画像だけ下端を帯の下端に合わせて上端より約14pxはみ出す。祖先に overflow:hidden は無い（li自身の hidden を外した） */
  html body ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img{ display:flex; position:relative; flex:0 0 auto; align-self:flex-end; align-items:flex-end; justify-content:flex-end; margin:10px 10px 10px auto; padding:0; height:44px; max-height:none; overflow:visible; }
  html body ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img a{ display:flex; align-items:flex-end; justify-content:flex-end; width:auto; max-width:none; height:44px; max-height:none; min-width:0; margin:0; padding:0; background:none; border:0; border-radius:0; overflow:visible; }
  html body ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img img{ display:block; flex:none; width:auto; height:76px; max-width:none !important; max-height:none !important; object-fit:contain; margin:0 0 -8px 0; }
}
/* 幅389px以下：画像（約47px幅）が収まるよう、ボタンの左右の内側余白・外側余白だけを詰める（高さ・文字・枠は変えない） */
@media (max-width:389px){
  html body ul.menu.zenmen.juku-has-sp-img > li.menu-item > a{ padding-left:14px !important; padding-right:14px !important; margin-left:6px !important; margin-right:6px !important; }
  html body ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img{ margin-right:6px; }
}
/* 幅339px以下の極小画面は、ボタン2つで余白が尽きるため画像を出さない（ボタン優先） */
@media (max-width:339px){
  html body ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img{ display:none; }
}

/* ===== heading images: natural, overflow（2026-10-02） ===== */
/* 「見出し・メニューの画像」グループ（juku_img_heading_*／juku_img_footer_icon）は丸くトリミングせず、画像そのままの比率で表示する。
   見出し帯の右端内側に立ち、下端を帯の下端に揃えて、帯の上に頭がはみ出す（キャラが帯に乗って見える）。
   z-index は帯より上・固定ヘッダー（#header z-index:200）より下。 */
html body img.juku-heading-img{
  border-radius:0 !important; object-fit:contain; aspect-ratio:auto; width:auto; max-width:none !important; max-height:none !important;
  display:block; position:relative; z-index:4; margin:0; padding:0; border:0; box-shadow:none; background:none; pointer-events:none;
}
/* サイドバー・Others・スマホメニュー：帯の直下に置いた高さ0の枠。画像はその下端（＝帯の下端）に揃え、上へはみ出す */
html body .juku-heading-img-wrap{ position:relative; height:0; margin:0; padding:0; overflow:visible; line-height:0; }
html body .juku-heading-img-wrap > img.juku-heading-img{ position:absolute; right:10px; bottom:0; left:auto; top:auto; height:70px; }
/* 記事 h2：帯（白いタイトル帯）の右端内側。h2 の下余白10pxの上＝帯の下端に揃える */
html body h2 img.juku-heading-img--h2{ position:absolute; top:auto; right:12px; bottom:10px; height:135px; z-index:4; }
/* 画像（幅約82px＋右12px）の左に、見出し文字との余白12px以上を確保 */
html body h2:has(> img.juku-heading-img--h2) .content_txt_03{ padding-right:110px; }
@media (max-width:779px){
  html body h2 img.juku-heading-img--h2{ right:10px; bottom:10px; height:140px; }
}
/* スマホメニュー（ゲストさま横） */
html body .juku-heading-img-wrap > img.juku-heading-img--menu{ right:10px; height:100px; }
/* フッターのロゴ上：自然な比率（高さ約140px） */
html body .random-bg-container .juku-footer-brand img.juku-footer-icon.juku-heading-img{ position:relative; width:auto; height:180px; max-width:100% !important; margin:0 0 10px; }
/* 箇所別の高さ＝見出し帯の実測高さ×約2（h2は約1.8・スマホメニューは約1.6）（下端は帯の下端に揃え、右端から10px内側） */
html body .juku-heading-img-wrap > img.juku-heading-img--category,
html body .juku-heading-img-wrap > img.juku-heading-img--recommend{ height:114px; }
html body .juku-heading-img-wrap > img.juku-heading-img--actress,
html body .juku-heading-img-wrap > img.juku-heading-img--archive,
html body .juku-heading-img-wrap > img.juku-heading-img--news{ height:108px; }
/* Others：帯（52px）の下に margin-bottom:20px があるため、枠の下端を20px上げて帯の下端に揃える */
html body .juku-heading-img-wrap > img.juku-heading-img--others{ height:105px; bottom:20px; }
/* スマホメニュー：「メガメニュー右側の画像（スマホ）」が設定されているときは、同じ帯に同じキャラが二重に出ないよう、そちらを優先してこの画像は出さない */
html body:has(ul.juku-has-sp-img) .juku-heading-img-wrap:has(> img.juku-heading-img--menu){ display:none !important; }
/* 帯（table）が枠より左右にはみ出している箇所は、右端が帯の右端から10px内側になるよう補正 */
html body .juku-heading-img-wrap > img.juku-heading-img--others{ right:-30px; }
html body .juku-heading-img-wrap > img.juku-heading-img--category,
html body .juku-heading-img-wrap > img.juku-heading-img--recommend{ right:-20px; }

/* ===== 背景カプセルの色（管理画面）2026-10-02 =====
   ■ 色・透明度：管理画面「デザイン画像 > サイトカラー > 背景カプセルの色」→ inc/juku-capsule-color.php が :root に変数を出力。
     --juku-capsule-color（設定時のみ・全カプセルを1色に統一）／--juku-capsule-opacity（設定時のみ・0〜1）
     --juku-capsule-default-blue / -pink（常時・未設定時の実効色。従来どおり青系・オレンジ系の2色）
     未設定なら見た目は従来と同一。形・大きさ・動き（style.css の .line）は変更しない。
   ■ 重なり順：body を積層文脈にし（isolation:isolate）、カプセル（body > .animated-background）を z-index:-1 にすることで、
     カプセルは「body 自身の背景の上・それ以外すべて（ヒーロースライダー・カード・見出し・文字・画像）の下」に描かれる。
     body に position は付けない（カプセルの包含ブロックを変えない＝既存レイアウトを動かさない）。
     body の背景は html が #000 を持つため canvas へ伝播せず body 自身が描く＝負の z-index の子はその上に見える（html への移動は不要）。 */
body{ isolation: isolate; }
html body .animated-background .line.pastel-blue{
  background: var(--juku-capsule-color, var(--juku-capsule-default-blue, #b6c9d9)) !important;
}
html body .animated-background .line.pastel-pink{
  background: var(--juku-capsule-color, var(--juku-capsule-default-pink, #f6d5be)) !important;
}
html body .animated-background .line{
  opacity: var(--juku-capsule-opacity, 0.7) !important;
}

/* ===== PC ヘッダー検索枠をメガメニューと縦中央揃え 2026-10-02 ===== */
/* 原因：検索窓は ul.menu.zenmen 内の <li class="none_04"> に入り、li はボタン列と同じ高さ(67px)に伸びるが、中身の div が上端詰め＋margin-top:2px で配置されるため、
   ボタン(上下margin10pxで li の中央)より約6px上に出ていた。li を flex＋align-items:center にして中身を縦中央へ。
   ヘッダーSP用の非表示(style_s.css：780px以下で .none_04 を display:none)は維持するため 781px 以上に限定。 */
@media (min-width: 781px){
  html body nav.mega-menu ul.menu.zenmen > li.none_04{ display:flex; align-items:center; }
  html body nav.mega-menu ul.menu.zenmen > li.none_04 > div{ flex:1 1 auto; min-width:0; margin-top:0 !important; margin-bottom:0 !important; }
}


/* ===== ランキングページ：ボタン前面化・背景モザイクの隙間・表罫線なし 2026-10-02 ===== */
/* 「1位～5位はこちら」(a.tug_04) の親 .zenmen は style.css で z-index:1 !important、ランキング枠のウィジェットは z-index:2 のため枠の上辺がボタンに被っていた。ボタンを前面へ（意図的に枠へ重ねる） */
html body .container .zenmen:has(> .tug_04){ z-index: 5 !important; }
/* フッター上の背景モザイク(.background-grid)のタイル間 gap 2px から白が透けて細い線に見えるため隙間をなくす */
html body .background-grid{ gap: 0 !important; }
/* 固定ページ（ランキング等）の表は罫線・外枠・影を出さない（記事の作品情報テーブルの紫罫線は従来どおり） */
html body article.article-content table, html body article.article-content table tr, html body article.article-content table td, html body article.article-content table th{ border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* ===== カプセルを面の上・部品の後ろに（検索・アーカイブ等の外枠を透明化）2026-10-03 ===== */
/* 原因（実測：SP390／PC1280とも同じ）：検索・カテゴリー等で「N件の記事が該当しました」を載せる淡色パネル .juku-title-panel が
   背景 rgba(地色,.94)（brand.css L269／inc/juku-site-colors.php の `html .juku-title-panel`）で、ヒーロー側から伸びるカプセル(z-index:-1)をパネルの上辺でほぼ隠し「切れて」見えていた。
   .container／.contents／td／table／.haimen／#main 系の外枠は元から透明で、不透明なのはこのパネルだけ（body の地色グラデは同色なので読みやすさは変わらない）。
   対策：パネルの背景だけを透明化。文字・検索窓・カテゴリー選択などパネルの中身、記事カード(.article-list z2)・サイドバーのウィジェット・記事本文の白い箱は触らない＝部品の後ろ・面の上にカプセルが見える。
   固定ページ(body.page)・個別記事(body.single)は対象外。 */
html body.search .juku-title-panel,
html body.archive .juku-title-panel,
html body.category .juku-title-panel,
html body.tag .juku-title-panel,
html body.author .juku-title-panel{ background: transparent !important; }

/* ===== ランキング見出しのロゴマークを帯に少しかける 2026-10-03 ===== 
   オーナー指示：ロゴマーク（img.juku-logo）を下へ動かし、リボン画像（img#ranking）の上端に少しだけ重ねる。見出し文字（.my-font・z-index:11）は絶対に隠さない。
   方法：レイアウト（リボン・リスト）は動かさず、ロゴだけ position:relative; top で見た目を移動（=行間12px＋重なり量）。z-index:3 でリボン画像より手前、文字(11)より奥。横位置は変えない。
   重なり量は実測（見出し文字の上端より2px以上上）で決定：SP＝5.5px（文字上端まで7.8px）／PC＝1.5px（文字上端まで3.6px）。 */
.custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > img.juku-logo{
  position:relative; z-index:3; top:13.5px;
}
@media (max-width: 780px){
  .custom-html-widget:has(> .zenmen_02 > img#ranking) > .zenmen_02 > img.juku-logo{ top:17.5px; }
}

/* === 2026-10-03 SP: カテゴリのカードを上へ＋低い画面は SCROLL 非表示（重なり解消） === */
/* 永井様指摘（スマホのトップ）：縦書き SCROLL と縦線が、カテゴリボタンの入った半透明カードに重なる。
   原因：SCROLL・縦線は .hero(height:100svh) の下端が基準（style.css の .scrollbar-text_04：文字の上端＝100svh−160px）。カードは header.php のインライン値で 43vh から下へ積まれる。
   表示領域が低い端末ほどカード下端が SCROLL の文字へ食い込む。SCROLL・縦線・見出しは動かさず、スマホ幅（767px以下）だけ次の対応をする。
   (1) #custom_html-3 の .textwidget は white-space:pre-line のため、widget 先頭の改行が空行（約20px）として2回描画され、カード上端〜説明文が約50px空く。
       white-space:normal で消し、内側 div の上マージンを 5px→16px にして、下余白（約23px）と同程度に詰める。
   (2) カードだけを translateY で上げる。上げ幅＝カード下端が SCROLL 文字の上端の12px上（＝100svh−172px）に収まる分で、余裕のある画面では 0。
       上限＝カード上端が 18vh＋--juku-sc-cap（＝見出し下端＋8px）より上に行かない（見出しを覆わない）。
   (3) 上限まで上げても足りない低い画面では SCROLL（文字・縦線・丸）を描画しない。表示の条件は 100svh−18vh ≧ --juku-sc-k（＝カード高さ＋172px＋cap＋余裕24px）。
       svh と vh だけで決まる静的な判定なので、Safari のツールバーの出入りでは変わらない（@media (max-height) は使わない）。非表示のとき font-size・線の高さ・丸の寸法が 0 になる。
       SCROLL の箱は pointer-events:none（隠れたあと・重なったときにボタンのタップを奪わない）。
   cap と k はカード高さと見出しの行数が幅で変わるための実測値。幅の切れ目はブラウザ差を見込んで安全側（幅の大きい側）に寄せてある。
   319px 以下は上げず SCROLL も常に非表示。前提＝header.php のヒーロー内インライン vh（カード上端＝43vh・見出し中心＝18vh＋余白）。この値を変えるときは 43vh・25vh・18vh を直す。
   svh 非対応の旧ブラウザは @supports で対象外（従来どおり）。 */
@media (max-width: 767px){
  html body #custom_html-3 .textwidget.custom-html-widget{ white-space:normal; }
  .hero > div[align="center"] > table > tbody > tr > td > div:first-child{ margin-top:16px !important; }
}
@supports (height: 100svh){
  @media (max-width: 767px){
    .hero{ --juku-sc-cap:125px; --juku-sc-k:508px; --juku-sc-on:calc((100svh - 18vh - var(--juku-sc-k)) * 1000); }
    .hero > div[align="center"] > table{ transform:translateY(min(0px, max(calc(var(--juku-sc-cap) - 25vh), calc(100svh - 172px - 43vh - 100%)))); }
    .hero .scrollbar-text_04, .hero .scrollbar_04{ pointer-events:none; }
    .hero .scrollbar-text_04{ font-size:clamp(0px, var(--juku-sc-on), 12px); }
    .hero .scrollbar_04::after{ height:clamp(0px, var(--juku-sc-on), 100px); }
    .hero .scrollbar_04::before{ width:clamp(0px, var(--juku-sc-on), 8px); height:clamp(0px, var(--juku-sc-on), 8px); }
  }
  @media (max-width: 530px){ .hero{ --juku-sc-cap:94px; --juku-sc-k:533px; } }
  @media (max-width: 410px){ .hero{ --juku-sc-cap:91px; --juku-sc-k:550px; } }
  @media (max-width: 399px){ .hero{ --juku-sc-cap:109px; --juku-sc-k:568px; } }
  @media (max-width: 357px){ .hero{ --juku-sc-cap:108px; --juku-sc-k:602px; } }
  @media (max-width: 338px){ .hero{ --juku-sc-cap:113px; --juku-sc-k:627px; } }
  @media (max-width: 319px){ .hero{ --juku-sc-cap:9999px; --juku-sc-k:9999px; } }
}

/* =====================================================================
   ===== FANZA package display（2026-10-03 オーナー決裁・juku-brand v43）=====
   決裁：①パッケージ画像は縦横比のまま全体表示（切らない・上に何も重ねない・ロゴ透かしなし）②全ページ最上段に広告表記（PR）③FANZA 直行カードに「FANZAで見る（PR）」。
   根拠：FANZA 公式の画像ルール（商品メイン画像の加工は拡大・縮小のみ）／DMM アフィリエイト参加規約4条4項（PR 表記が必須）。
   判定と class 付与は inc/juku-fanza-package.php（img.juku-pkg）。style.css は触らず、上書きはこのブロックに集約。
   ===================================================================== */

/* 0) 【v45・2026-10-07 オーナー決裁】パッケージ画像の「枠の大きさ」と「画像の埋め方」は v42（本番 jukujuku-jukujo.com 実測）と同じに戻した。
   旧 v43 の contain／3:2 自動比率／枠を画像比率に追従させる指定（下の 2・3・4・5・6・7・8・10 の該当行）は削除。img.juku-pkg は目印の class のみ（寸法・object-fit は style.css 側の v42 の指定がそのまま効く）。
   残したもの＝PR 帯（1）・「FANZAで見る（PR）」ラベル／カテゴリーのバッジを画像の外へ（3 の .juku-rc-*）・スライダーの紗なし＋番号を文字側へ（4）・次へボタン／矢印の位置（4b・5b）・記事冒頭の余白（9）・カルーセルの英字（10b）・カテゴリー丸（11）・年齢確認。 */

/* 1) 広告表記（PR）：画面最上段の固定帯。固定ヘッダー（#header）をこの帯の高さだけ下げ、ページ本体も同じ量だけ下げる。
   ヘッダー内部・ヒーロー（見出し／半透明カード／SCROLL）は同じ量だけ一体で動くので、相互の位置関係は変わらない（直下に置くと SP の低い画面で英語サブコピーと重なるため、直上に置いた）。
   z-index 99＜ヘッダー100：スマホのメニュー（ヘッダー内）・年齢認証・ローダーは帯より前面。 */
:root{ --juku-pr-h:24px; }
@media (max-width:767px){ :root{ --juku-pr-h:22px; } }
html body{ padding-top:var(--juku-pr-h); }
html body .juku-pr-notice{ position:fixed; top:0; left:0; right:0; z-index:99; box-sizing:border-box; height:var(--juku-pr-h); margin:0; padding:0 12px; background:var(--juku-primary-dark,#4A148C); color:#fff; font-size:12px; font-weight:500; line-height:var(--juku-pr-h); letter-spacing:.02em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(255,255,255,.2); }
@media (max-width:767px){ html body .juku-pr-notice{ padding:0 8px; font-size:11px; letter-spacing:0; } }
@media (max-width:300px){ html body .juku-pr-notice{ padding:0 4px; font-size:10px; } }
html body #header{ top:var(--juku-pr-h); }
html body #header .fixheader,
html body #header.fixed .fixheader{ top:var(--juku-pr-h) !important; }
@media (min-width:780px){ html body .sticky-box{ top:calc(80px + var(--juku-pr-h)) !important; } }
/* スマホのハンバーガーボタン：.hm_wrap が画面上端（top:0）の固定なので、ヘッダーに合わせてボタンだけ帯の高さ分下げる（開いたメニュー本体は帯も覆う全画面のまま） */
html body .hm_wrap .hm_btn{ top:calc(19px + var(--juku-pr-h)); }

/* 2) 記事一覧カード（loop-content.php）：画像枠を幅に応じた 3:2 に（旧：高さ150px固定＋cover＝スマホで左右が約25%切れていた）。
   パッケージ画像は contain＝全体表示。バナー（16:9）は従来どおり cover（PCでは枠が元から約3:2なので見た目は同じ）。 */
/* （v45：枠の高さ150px＋cover・上寄せは style.css の v42 の指定に戻した＝ここでは何も上書きしない） */

/* 3) おすすめカード（get_recent_posts）：画像枠を 3:2 に。パッケージ画像は contain。カテゴリーのバッジは画像の外（.juku-rc-meta）。FANZA 行きには「FANZAで見る（PR）」。 */
/* （v45：サムネイル枠の高さ200px＋cover は v42 と同じインライン指定を functions.php の get_recent_posts に戻した） */
html body .recent-post-item .juku-rc-meta{ display:block; margin:10px 0 -2px; line-height:1.3; }
html body .recent-post-item .juku-rc-badge,
html body .recent-post-item .juku-fanza-label{ vertical-align:top; margin:0 6px 6px 0; }
html body .recent-post-item .juku-rc-badge{ display:inline-flex; align-items:center; gap:4px; box-sizing:border-box; max-width:100%; padding:4px 11px; border-radius:30px; font-size:12px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-decoration:none; }
html body .recent-post-item .juku-rc-badge i{ flex:0 0 auto; font-size:11px; }
html body .recent-post-item .juku-rc-badge__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
html body .recent-post-item .juku-fanza-label{ display:inline-flex; align-items:center; gap:4px; box-sizing:border-box; max-width:100%; padding:3px 9px; border:1px solid var(--juku-accent,#e91e8c); border-radius:4px; background:#fff; color:#1a1a1a; font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.02em; white-space:nowrap; }
html body .recent-post-item .juku-fanza-label i{ flex:0 0 auto; color:var(--juku-accent,#e91e8c); font-size:10px; }

/* 4) 8枠スライダー（parts/slider_01〜08.php）：旧＝フルサイズを cover で切り抜き、カテゴリー色の紗（::after・不透明度80%）と巨大な番号を画像の上に重ねていた。
   新＝画像は contain で全体表示（枠の余白はカテゴリー色の台紙）、紗は無し、番号は画像の外（文字側 .fca-feature-body）へ。同じ枠に並ぶためバナーも同じ表示に統一。 */
html body .fca-feature-media .latest-cat-thumb.has-img{ background-color:var(--fca-mat-color,#5A2A6B); }
html body .fca-feature-media .latest-cat-thumb.has-img::after{ content:none; }
/* （v45：画像は style.css の .latest-cat-thumb-img＝cover・center、枠高は PC300px／≤1048px とも v42 のまま。紗（::after）だけ上で無効のまま） */
html body .fca-feature-body{ position:relative; overflow:hidden; }
html body .fca-feature-body .fca-feature-no{ position:absolute; top:-26px; right:-8px; left:auto; z-index:0; margin:0; font-size:190px; line-height:1; color:#fff; opacity:.14; pointer-events:none; }
html body .fca-feature-body > :not(.fca-feature-no){ position:relative; z-index:1; }
/* 4b) スライダーの「次へ」ボタン（旧：PCは右隣のスロットの画像の左端に、SPは画像の下端に、約18／13pxかかっていた）。
   PC＝右端を「このスロットの右端＋13px」（スロット間の隙間20pxの中）へ。スマホ・タブレット＝画像（上段）の下の文字側（.fca-feature-body）へ。 */
@media screen and (min-width:1049px){ html body .my-slider-btn{ right:calc(35% - 13px); } }
@media screen and (max-width:1048px){ html body .my-slider-btn{ top:auto; bottom:60px; right:8%; transform:none; } }

/* 5) タグ別スライダー（ウィジェット custom_html-39／-78：the_post_thumbnail('small')→icatch375）：枠 150x100＝3:2 */
/* （v45：v42 の指定に戻した） */
/* 5b) 矢印（旧：先頭／末尾の画像の上に重なっていた）は、見出し（タグ名の帯）の行の右端へ。
   位置の基準を .swiper（overflow:hidden）の外＝セクションに替えるので切れない。矢印は紙色の背景の上に出るため濃色にする。 */
html body .category-slider-section{ position:relative; }
html body .category-slider-section .category-swiper{ position:static !important; }
html body .category-slider-section .category-swiper .swiper-button-prev,
html body .category-slider-section .category-swiper .swiper-button-next{ position:absolute !important; top:14px !important; bottom:auto !important; left:auto !important; width:32px !important; height:32px !important; margin:0 !important; padding:0 !important; transform:none !important; color:#333 !important; font-size:1.5em !important; z-index:5; }
html body .category-slider-section .category-swiper .swiper-button-next{ right:10px !important; }
html body .category-slider-section .category-swiper .swiper-button-prev{ right:48px !important; }
html body .category-slider-section .category-swiper .swiper-button-prev i,
html body .category-slider-section .category-swiper .swiper-button-next i{ color:#333; }

/* 6) 人気ランキング（WPP）：100x100 の正方形クロップをやめ、パッケージ画像は幅100pxの 3:2 で全体表示。
   順位バッジ（li::before・左上）が画像の角に重なっていたので、サムネイル枠を10px下げて重ならないように（全項目共通＝並びを揃える）。 */
html body .wpp-list .wpp-thumbnail-container,
html body .wpp-list_02 .wpp-thumbnail-container{ margin-top:34px; }
/* （v45：サムネイルの寸法・object-fit は v42 のまま。上の margin-top だけ残す） */

/* 7) 前後の記事（single.php：インラインで width/height:100px 固定）：パッケージ画像は幅100pxの 3:2（300x300 の切り抜きファイルは使わない） */
/* （v45：v42 の 100x100 インライン指定に戻した） */

/* 8) ブログカード（nlink）：枠 150x150 の cover をやめ、パッケージ画像は 150x100（3:2）で全体表示。
   「関連記事」ラベル（左上 90x25 の絶対配置）は画像の上端（枠を縦中央に置くと 25px 下がる）より上に収まる＝画像に重ならない。 */
/* （v45：v42 の 150x150 cover に戻した） */

/* 9) 記事ページ冒頭（single.php）：ロゴ透かしを出さない分、直後との間隔（旧＝ロゴ要素の余白で PC72px／SP63px）を保つ */
html body .kiji-img.juku-pkg-wrap{ margin-bottom:72px; }
@media (max-width:780px){ html body .kiji-img.juku-pkg-wrap{ margin-bottom:63px; } }

/* 10) 横カルーセル（プラグイン carousel-horizontal-posts-content-slider）：（v45：カルーセルの枠・画像の埋め方は v42 のまま） */
/* 10b) カルーセルの上に重ねていた透かし英字（.sl-en「アラフォー熟女のエログ」。カードの画像の中ほどに被さっていた）は、カードの上（黒い余白）へ。
   旧：.sl-en{margin:0 0 -255px}＋外枠 margin-top:300px。カード（画像）はほぼ同じ位置のまま（実測：PC＋5px／SP−24px）、文字だけを画像の上に出す（外枠の上余白 300→45px。直前ブロックの下余白との相殺で実効は約50px。文字下の食い込み255pxをやめる）。 */
html body div[style*="margin:300px 0 0"]{ margin-top:45px !important; }
html body div[style*="margin:300px 0 0"] > .sl-en{ margin:0 !important; }

/* 11) カテゴリーの丸（カテゴリナビ）：丸は形が合わず切り抜かれるため、パッケージ画像は使わない。
   そのカテゴリーに自作バナーなどがあればそれを、画像付きの記事が全部パッケージ画像のときは「カテゴリー色＋アイコンの丸」を出す（functions.php render_category_navi_html）。
   寸法は丸画像（.category img：125px／1280px以上は100px）に揃える。枠線は .circular-image_03 の 5px #ddd と同じ。 */
html body .category .juku-cat-disc{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:125px; height:125px; border:5px solid #ddd !important; border-radius:50%; font-size:44px; line-height:1; vertical-align:top; }
@media (min-width:1280px){ html body .category .juku-cat-disc{ width:100px; height:100px; font-size:36px; } }
html body .category .juku-cat-disc i{ display:block; line-height:1; }

/* ===== 年齢確認画面：見出しを改行させない 2026-10-07 ===== */
/* 「年齢確認」見出しは吹き出し型（左20px・右110px＝アバター分を除いた幅60px）のため、15px×4字＝60pxが
   枠59.8pxをわずかに超え「年齢確／認」と折れていた。折り返しを禁止し、狭い画面では文字を縮めて枠内に収める。
   360pxで12px（48px・余白約12px）、PC（約450px以上）は従来どおり15px。 */
html body .age-gate .age-gate__headline,
html body .age-gate .age-gate__headline .content_txt_03{ white-space:nowrap; font-size:clamp(12px, 3.34vw, 15px); }

/* ===== 記事内の動画（比率ボックス内の iframe）をスマホで潰さない 2026-10-11 ===== */
@media (max-width: 767px){
  html body div[style*="padding-top"] > iframe[style*="position:absolute"],
  html body div[style*="padding-top"] > iframe[style*="position: absolute"]{ height:100% !important; }
}

/* ===== 長いタグ名は枠内で「…」に省略 2026-10-15 =====
   実測（本番 jukujuku-jukujo.com・タグ名＝作品タイトル級の長文）：
   ・タグ帯 ul.tag-list.tagcloud（サイドバー／フッター／検索スライド）は 2026-10-01 の指示で「全文表示」にしていたため
     (max-width:100% !important; overflow:visible !important; text-overflow:clip !important)、長いタグ名が枠（角丸の線）の外へはみ出していた。
   ・メガメニュー「タグキーワード」(.mega-dropdown ul.tag-cloud の a > li) は折り返して縦に3行へ伸びていた。
      ・SPのフッター(.random-bg-container／.juku-foot-tags)は自動幅の表の中のため、長いタグ名が表ごと画面外へ広げて横にはみ出していた（タグ一覧ページの body 幅 771px→391px）。
   → 1行・枠内で「…」に省略。「#」は ::before（タグ帯）／<i class="fa-hashtag">（メガメニュー）で先頭に残る。
   短いタグは上限に届かないので従来どおりの幅。PCは min(コンテナ幅-6px,22em)、スマホ(〜767px)はコンテナ幅いっぱい（左右 margin 3px ぶんを引く）。 */
html body ul.tag-list.tagcloud a{
  display:inline-block; min-width:0; max-width:min(calc(100% - 6px),22em) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  vertical-align:middle; box-sizing:border-box;
}
html body .mega-dropdown ul.tag-cloud a > li{
  display:block; min-width:0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 767px){
  html body ul.tag-list.tagcloud a{ max-width:calc(100% - 6px) !important; }
  /* フッターは自動幅の表の中にあり、max-width の % は幅の計算(min-content)で無視されて表ごと画面外へ広がるため、vw 基準の固定値で上限を作る */
  html body :is(.random-bg-container,.juku-foot-tags) ul.tag-list.tagcloud a{ max-width:calc(100vw - 96px) !important; }
}

/* ===== Category 見出しとカテゴリー丸の間隔 2026-10-15 =====
   実測（本番 jukujuku-jukujo.com・single／page／一覧(index.php)／メガメニュー）：黒い見出し帯「Category カテゴリー」(#custom_html-77) の下端と
   カテゴリー丸(.circular-image_03・灰色の枠5pxを含む)の上端の間隔が 0px（くっついていた）。
   原因：直後のラッパー div（インライン margin:-50px 5px 50px）の -50px と、その内側の container_style（margin:50px 0 0）の +50px が
   相殺されて 0 になっていた。トップ(home.php)はラッパーが margin:50px 0 なので 50px あり、対象外（[style*="margin:-50px"] で除外）。
   → ラッパーの上マージンを PC=24px／SP(〜767px)=16px にし、内側の +50px は 0 にして二重に効かないようにする。この見出し直後のブロックだけに限定。 */
html body #custom_html-77 + div[style*="margin:-50px"]{ margin-top:24px !important; }
html body #custom_html-77 + div[style*="margin:-50px"] > .widget_category_navi_widget > div{ margin-top:0 !important; }
@media (max-width: 767px){
  html body #custom_html-77 + div[style*="margin:-50px"]{ margin-top:16px !important; }
}

/* ===== 記事タイトル枠のアイコン表示 2026-10-15 =====
   症状：記事ページの薄灰色の角丸枠（.kiji h4＝自動投稿の商品タイトル枠 <div class="arrow_box_03"><h4>商品名</h4>）の左のアイコンが「⊠」（豆腐）で表示されていた。
   原因（本番 jukujuku-jukujo.com で実測）：style.css L633-634 の `.kiji h4::after{content:"\f336";font-family:"Font Awesome 6 Free";font-weight:900}`。
   U+F336 は Font Awesome 6.5.2 Free（自前配信 fontawesome/css/all.min.css）に存在しないコードポイント（all.min.css の1834個の中に無い）ため、
   フォントに字形が無く豆腐になる。アイコンは post_content には入っておらず、CSS 擬似要素だけが出している（dmm-post.php のテンプレートは <h4>商品名</h4> のみ）。
   → CSS だけで既存・今後の全記事に効く。元のコメントの意図「チェック」は他の h4 用に FA6 の fa-check（U+F00C）で維持し、
     商品タイトル枠（.arrow_box_03 h4＝動画作品）は fa-film（U+F008）にする。位置・色・サイズは style.css のまま。 */
html .kiji h4::after{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-style:normal; }
html .kiji .arrow_box_03 h4::after{ content:"\f008"; font-family:"Font Awesome 6 Free"; font-weight:900; }

/* ===== 記事カード：タイトルを全文表示・高さは中身に合わせる 2026-10-16 ===== */
/* 原因（実測）：style.css の .article-list{height:43svh;overflow:hidden}＝画面の高さ基準の固定高さで、タイトルの行数に関係なく下が切れていた。
   loop-content.php のタイトル h6 にもインライン style の -webkit-line-clamp:4＋overflow:hidden があり、PHP 側でも wp_trim_words(30字)＋the_title フィルタ(50字)で「...」に切っていた。
   対策：高さを中身に合わせ（height:auto）、タイトルの行数制限・省略を外し、同じ行のカードは同じ高さに揃える（行ごとの高さは行内で一番高いカードに合わせる）。
   同じ行の高さ揃え：カードは親の中で inline-block 並びだったため、親（home.php／index.php／single.php が loop を包む .juku-card-grid）を flex にする。
   列数は据え置き（カード幅は style.css の calc(33.33% - 10px)／780px以下 calc(50% - 10px)／576px以下 calc(50% - 6px) のまま）。画像枠（.img-wrap 高さ150px）・カテゴリーカプセルの1行省略は触らない。 */
html body .juku-card-grid{ display:flex; flex-wrap:wrap; align-items:stretch; align-content:flex-start; justify-content:flex-start; width:100%; box-sizing:border-box; }
html body article.article-list{ height:auto; max-height:none; min-height:0; display:inline-flex; flex-direction:column; align-items:stretch; vertical-align:top; }
html body .juku-card-grid > article.article-list{ align-self:stretch; }
html body article.article-list > a{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; max-height:none; height:auto; }
html body article.article-list > a > .img-wrap{ flex:0 0 auto; }
html body article.article-list > a > .text{ flex:1 1 auto; min-width:0; max-height:none; height:auto; overflow:visible; }
html body article.article-list .text table{ width:100%; height:auto; max-height:none; }
html body article.article-list .text h6{ display:block !important; -webkit-line-clamp:unset !important; line-clamp:unset !important; -webkit-box-orient:horizontal !important; height:auto !important; max-height:none !important; overflow:visible !important; text-overflow:clip !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; min-width:0; }

/* ===== カテゴリーのカプセルが折り返しで重ならないように 2026-10-16 ===== */
/* 対象：個別記事ページのタイトル上のカテゴリーカプセル（single.php の .kiji-info > ul > span.diagonal）だけ。一覧カード(.juku-card-cats)・ヒーロー・ランキングには触れない。
   原因：ul の中の .diagonal がインライン要素で、行の高さ(line-height 10px)に対して padding:8px 12px を足した約31pxの背の高いカプセルになっていた。
         2行に折り返すと行の間隔は約11pxしかなく、2行目(例：乳首フェチ)が1行目(例：フェチ)に重なって文字が隠れる。
   対策：コンテナを flex+wrap にして行の高さをカプセルに合わせる（行間 8px）。カプセルの大きさ(約31px)・色・文字サイズは据え置き。 */
.kiji-info > ul{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 8px; height:auto; min-height:0; margin:0; padding:0; list-style:none; line-height:normal; overflow:visible; }
.kiji-info > ul > .diagonal{ box-sizing:border-box; flex:0 1 auto; min-width:0; margin:0; line-height:15px; vertical-align:middle; position:static; transform:none; }

/* ===== 著者ボックス：本文と「記事一覧はこちら」ボタンの間に余白 2026-10-16 ===== */
/* 対象＝記事末尾の著者ボックス（#author_profile）だけ。ボタン（.juku-author-more）は従来どおり箱の下端にまたがる（margin:-40px はそのまま）。
   本文コンテナ（.textwidget）の下に余白を足し、最後の行とボタン上端の間をPC約28px／SP約24pxにする（箱がその分だけ縦に伸びる）。
   SPの境目は style.css の #author_profile と同じ 480px。 */
html body #author_profile #custom_html-23 .textwidget{ padding-bottom:1px; }
@media (max-width:480px){
html body #author_profile #custom_html-23 .textwidget{ padding-bottom:17px; }
}