@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ==========================================================
   【カスタマイズ】ダークエンジスキンの「緑色」を「ロイヤルネイビー」へ変更
   ベースカラー: #192f60 (Royal Navy)
   ========================================================== */

/* ----------------------------------------------------------
   1. 変数定義（ここを一括変更すれば色は変わります）
   ---------------------------------------------------------- */
:root {
  --my-nav-color: #192f60;         /* メイン：ロイヤルネイビー */
  --my-nav-color-light: rgba(25, 47, 96, 0.2); /* 薄い背景用 */
  --my-nav-color-hover: rgba(25, 47, 96, 0.4); /* ホバー時の少し濃い色 */
  --my-nav-shadow: #101d3b;        /* 影や濃い境界線用 */
}

/* ----------------------------------------------------------
   2. ヘッダーメニュー・ナビゲーション
   ---------------------------------------------------------- */
/* メニューホバー時の背景色 */
.navi .navi-in a:hover,
#menu-header .menu-item:hover > a,
#menu-header .menu-item > a:focus {
  background-color: var(--my-nav-color-light) !important;
  color: #fff !important;
}

/* スマホメニューなどでのアクセント */
.menu-drawer a:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* ----------------------------------------------------------
   3. 記事カード・リスト（奇数・偶数行の背景装飾）
   ---------------------------------------------------------- */
/* カードの薄い背景色（緑→ネイビー） */
.entry-card-wrap.a-wrap:nth-child(odd):after,
.entry-card-wrap.a-wrap:nth-child(even):after {
  background-color: rgba(25, 47, 96, 0.08) !important;
}

/* カードホバー時の少し濃くなるエフェクト */
.a-wrap .blogcard:hover, 
.related-entry-card-wrap:hover, 
.pager-post-navi a.prev-post:hover, 
.pager-post-navi a.next-post:hover, 
.pager-post-navi.post-navi-square a:hover,
.widget-entry-cards .a-wrap:hover .widget-entry-card-content,
.widget-entry-cards .a-wrap:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* ----------------------------------------------------------
   4. 見出し（H2, H3, H4, 目次）のデザイン変更
   ---------------------------------------------------------- */
/* 目次のグラデーション（赤×ネイビー） */
.toc-title {
  background-image: linear-gradient(135deg, rgba(132, 23, 47, 0.8), rgba(132, 23, 47, 0.8) 50%, rgba(25, 47, 96, 0.8) 50%, rgba(25, 47, 96, 0.8) 100%, transparent 0) !important;
}
.article .toc .toc-content {
  border-image: linear-gradient(to right, rgba(132, 23, 47, 0.6) 0%, rgba(25, 47, 96, 0.6) 100%) 1 !important;
}
.toc-content ul li a:hover, 
.toc-content ol li a:hover {
  background-color: rgba(25, 47, 96, 0.3) !important;
}

/* H3見出しの影アクセント */
.article h3::after {
  box-shadow: 2px 2px 0 var(--my-nav-color) !important;
}

/* H4, H5見出しの飾りアイコン */
.article h4::after,
.article h5::after {
  background: var(--my-nav-color) !important;
}

/* サイドバータイトル（H2, H3）の幾何学模様アクセント */
.sidebar h2::after, 
.sidebar h3::after {
  background-color: var(--my-nav-color) !important;
}

/* ----------------------------------------------------------
   5. ページネーション・ボタン類
   ---------------------------------------------------------- */
/* ページ送り番号の枠線・文字色 */
.pagination a:hover, 
.comment-page-link a:hover,
.pagination .current, 
.comment-page-link .current,
.pager-numbers .current {
  color: var(--my-nav-color) !important;
  border-color: var(--my-nav-color) !important;
}
/* ページ送りボタンの飾り（三角コーナー） */
.page-numbers::before {
  border-top: 1px solid var(--my-nav-color) !important;
  border-bottom: 1px solid var(--my-nav-color) !important;
}
.page-numbers::after {
  border-right: 1px solid var(--my-nav-color) !important;
  border-left: 1px solid var(--my-nav-color) !important;
}

/* トップへ戻るボタン */
.go-to-top-button {
  border: 2px outset var(--my-nav-color) !important;
  color: var(--my-nav-color) !important;
}

/* ----------------------------------------------------------
   6. ウィジェットリスト・カレンダー
   ---------------------------------------------------------- */
/* サイドバーのリストホバー色 */
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_block .wp-block-archives li a:hover,
.widget_block .wp-block-categories li a:hover,
.widget_block .wp-block-latest-posts li a:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* カテゴリーウィジェットのひし形アイコン */
.cat-item .cf::after {
  background-color: rgba(25, 47, 96, 0.6) !important;
}

/* カレンダーの日付 */
.wp-calendar-table td a, 
.slide-in-wp-calendar td a {
  background-color: rgba(25, 47, 96, 0.4) !important;
}
.wp-calendar-table td a:hover, 
.slide-in-wp-calendar td a:hover {
  background-color: rgba(25, 47, 96, 0.6) !important;
}

/* ----------------------------------------------------------
   7. フッターエリア（最下部・ストライプ背景）
   ---------------------------------------------------------- */


/* 最下部コピーライトエリア */
.footer-bottom.fnm-text-width .menu-footer li a:hover {
  color: var(--my-nav-color) !important;
}

/* フッターの斜めストライプ背景 */
.footer {
  background-image: repeating-linear-gradient(135deg, rgba(25, 47, 96, 0.2), rgba(25, 47, 96, 0.2) 20%, rgba(132, 23, 47, 0.2) 20%, rgba(132, 23, 47, 0.2) 80%, rgba(25, 47, 96, 0.2) 80%, rgba(25, 47, 96, 0.2));
}

/* ----------------------------------------------------------
   8. その他細かいパーツ（引用、コメントなど）
   ---------------------------------------------------------- */
/* 引用（Blockquote）のアイコン */
blockquote::before {
  color: rgba(25, 47, 96, 0.7) !important;
}

/*
/* ==========================================================
   【カスタマイズ】女優/ジャンルページ（カルーセル＆カードデザイン） 修正版
   ========================================================== */

/* --- 1. 人気ランキングのカルーセル（横スワイプ） --- */
.custom-carousel-section {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.custom-carousel-heading {
  font-size: 1.2rem;
  margin-bottom: 15px;
  margin-top: 0;
  border-bottom: 2px solid var(--my-nav-color);
  padding-bottom: 5px;
  display: inline-block;
}

.custom-carousel-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.custom-carousel-scroll .popular-entry-cards {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.custom-carousel-scroll .a-wrap {
  flex: 0 0 calc(45% - 10px);
  min-width: 160px; 
  max-width: 240px;
  margin-bottom: 0 !important;
  width: auto !important;
}

@media screen and (min-width: 768px) {
  .custom-carousel-scroll .a-wrap {
    flex: 0 0 calc(25% - 15px);
  }
}

.custom-carousel-scroll .card-thumb .ribbon-popular {
  background-color: #e50914;
  color: #fff;
  border-radius: 0 0 10px 0;
}

/* --- 2. 動画サイト風 エントリーカード（記事一覧）デザイン --- */

/* 親コンテナの強制グリッド化 */
.list, .cards, .widget-entry-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important; /* スマホ時の隙間 */
  padding: 0 !important;
}
@media screen and (min-width: 768px) {
  .list, .cards, .widget-entry-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important; /* PC時の隙間 */
  }
}

/* 個々のカードの大枠 */
.list .a-wrap, .cards .a-wrap, 
.custom-carousel-scroll .a-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  height: 100%;
}
.list .a-wrap:after,
.custom-carousel-scroll .a-wrap:after {
  display: none !important;
}

/* カード内部（サムネ＋テキストエリア）を相対配置のコンテナにする */
.list .entry-card-wrap, .cards .entry-card-wrap,
.custom-carousel-scroll .entry-card-wrap {
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #111 !important; /* 万が一画像がない時の背景 */
  margin: 0 !important;
  padding: 0 !important;
}

/* サムネイル部分 */
.list .entry-card-thumb, .cards .entry-card-thumb,
.custom-carousel-scroll .entry-card-thumb {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  aspect-ratio: 16 / 9;
  position: relative !important;
}

/* サムネイル画像は常に全画面カバー */
.list .entry-card-thumb-image, .cards .entry-card-thumb-image,
.custom-carousel-scroll .entry-card-thumb-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* 再生Overlayアイコン（ホバー時） */
.custom-play-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.custom-play-overlay .fa-play-circle-o {
  font-size: 3rem;
  color: #fff;
  opacity: 0.9;
}
.entry-card-wrap:hover .custom-play-overlay {
  opacity: 1;
}

/* タイトル等のテキストを含むコンテンツエリアを、画像の上に重ねる！ */
.list .entry-card-content, .cards .entry-card-content,
.custom-carousel-scroll .entry-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 40px 10px 10px 10px !important; /* グラデーションの高さと重なり調整 */
  margin: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%) !important;
  color: #fff !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: none !important;
  box-shadow: none !important;
}

/* 記事タイトル */
.list .entry-card-title, .cards .entry-card-title,
.custom-carousel-scroll .entry-card-title {
  color: #fff !important;
  font-size: 0.9rem !important; /* スマホだと大きすぎないように */
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
  /* 2行で末尾を...にする */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

/* 不要なメタデータ（日付やスニペット本文）は絶対非表示 */
.list .entry-card-meta, .cards .entry-card-meta,
.list .entry-card-snippet, .cards .entry-card-snippet,
.custom-carousel-scroll .entry-card-meta,
.custom-carousel-scroll .entry-card-snippet {
  display: none !important;
}

/* カテゴリラベル（左上に配置） */
.list .cat-label, .cards .cat-label,
.custom-carousel-scroll .cat-label {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  z-index: 5 !important;
  font-size: 0.7rem !important;
  padding: 3px 6px !important;
  background-color: var(--my-nav-color) !important;
  color: #fff !important;
  border-radius: 4px !important;
  line-height: 1 !important;
}



/* --- 3. 固定ページの女優/ジャンル等リスト（ショートコード）のUI改修 --- */
.shortcut-nav {
  background: rgba(25, 47, 96, 0.1) !important;
  border: 1px solid var(--my-nav-color-light) !important;
}
.shortcut-btn {
  background: var(--my-nav-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-weight: bold !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
.shortcut-btn:hover {
  background: #fff !important;
  color: var(--my-nav-color) !important;
  transform: translateY(-2px);
}

.actress-grid-list li a,
.genre-grid-list li a,
.bust-grid-list li a,
ul[class*="-grid-list"] li a {
  background: #222 !important;
  color: #ddd !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  border: 1px solid #333 !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.actress-grid-list li a:hover,
.genre-grid-list li a:hover,
.bust-grid-list li a:hover,
ul[class*="-grid-list"] li a:hover {
  background: var(--my-nav-color) !important;
  color: #fff !important;
  border-color: var(--my-nav-color) !important;
  text-decoration: none !important;
}


/* --- 5. 女優/ジャンル等リスト（ショートコード）の劇的UI進化 --- */

/* ショートカットナビ（あ, い, う...） */
.shortcut-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
  padding: 15px !important;
  background: linear-gradient(145deg, #1a1a24, #12121a) !important;
  border-radius: 12px !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

.shortcut-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #2a2a35 !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 50% !important; /* 完全な丸型 */
  font-size: 15px !important;
  font-weight: bold !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

.shortcut-btn:hover {
  background: var(--my-nav-color) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 15px rgba(25, 47, 96, 0.6) !important;
  border-color: var(--my-nav-color) !important;
}

/* 行の見出し（あ、か、さ...） */
.sub-row-header {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: transparent !important;
  border-left: 5px solid var(--my-nav-color) !important;
  padding-left: 15px !important;
  margin-bottom: 20px !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
  border-radius: 0 !important;
  display: table !important; /* 背景色なしでスッキリさせる */
  margin-right: 0 !important;
}

@media (max-width: 600px) {
  .sub-row-header {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 15px !important;
  }
}

/* グリッドリスト（女優名ボタン） */
.actress-grid-list,
.genre-grid-list,
.bust-grid-list,
ul[class*="-grid-list"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; 
  gap: 12px 15px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

@media (max-width: 600px) {
  .actress-grid-list,
  .genre-grid-list,
  .bust-grid-list,
  ul[class*="-grid-list"] {
    /* スマホ時は絶対に2列（押しやすい長方形） */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* 個別のボタン */
.actress-grid-list li a,
.genre-grid-list li a,
.bust-grid-list li a,
ul[class*="-grid-list"] li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(to bottom, #2c2c36 0%, #1f1f26 100%) !important;
  color: #e0e0e0 !important;
  border-radius: 8px !important; /* ピル型ではなくカード型ボタン */
  padding: 12px 10px !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ホバー時の発光エフェクト */
.actress-grid-list li a:hover,
.genre-grid-list li a:hover,
.bust-grid-list li a:hover,
ul[class*="-grid-list"] li a:hover {
  background: linear-gradient(to bottom, var(--my-nav-color-hover) 0%, var(--my-nav-color) 100%) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(25, 47, 96, 0.5) !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* --- 5-2. 女優/ジャンル等リスト スマホ見切れ＆省略の確実な改善 --- */
.actress-grid-list,
.genre-grid-list,
.bust-grid-list,
ul[class*="-grid-list"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  /* 親要素からのはみ出しを防ぐ */
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .actress-grid-list,
  .genre-grid-list,
  .bust-grid-list,
  ul[class*="-grid-list"] {
    /* 絶対に2列に収める */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow-x: hidden !important; /* 横スクロールを撲滅 */
  }
}

.actress-grid-list li,
.genre-grid-list li,
.bust-grid-list li,
ul[class*="-grid-list"] li {
   min-width: 0 !important; /* CSS Gridはみ出し防止のキモ */
   width: 100% !important;
}

.actress-grid-list li a,
.genre-grid-list li a,
.bust-grid-list li a,
ul[class*="-grid-list"] li a {
  /* ... (省略記号と押しやすさの強化) ... */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 8px !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- 新ショートコード追加機能用のスタイル（タブ等） --- */
.custom-tabs-wrapper {
  margin-bottom: 20px;
}
.custom-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid #333;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.custom-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.custom-tab-btn {
  background: transparent;
  color: #888;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.custom-tab-btn:hover {
  color: #fff;
}
.custom-tab-btn.active {
  color: var(--my-nav-color);
  border-bottom-color: var(--my-nav-color);
}
.custom-tab-pane {
  display: none;
  animation: fadeIn 0.4s ease-out;
}
.custom-tab-pane.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ジャンル人気スライダー */
.popular-situation-slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 5px;
  margin-bottom: 30px;
  scroll-snap-type: x mandatory;
}
.popular-situation-slider::-webkit-scrollbar {
  height: 6px;
}
.popular-situation-slider::-webkit-scrollbar-thumb {
  background: var(--my-nav-color);
  border-radius: 3px;
}
.situation-slide-item {
  flex: 0 0 calc(50% - 10px); /* スマホ2枚表示 */
  scroll-snap-align: start;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  background: #222;
}
@media (min-width: 600px) {
  .situation-slide-item {
    flex: 0 0 calc(33.333% - 10px); /* タブレット3枚 */
  }
}
@media (min-width: 900px) {
  .situation-slide-item {
    flex: 0 0 calc(25% - 12px); /* PC4枚 */
  }
}
.situation-slide-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.situation-slide-item:hover img {
  transform: scale(1.05);
}
.situation-slide-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  color: #fff;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 0.95rem;
  pointer-events: none;
}


/* --- 6. トップページサムネイルの文字を下側配置に --- */
.entry-card-title {
  /* タイトル自体の余計な配置や背景をリセットし、親コンテナである .entry-card-content の最下部に自然に流し込む */
  position: static !important;
  transform: none !important;
  background: none !important;
  margin: 0 0 5px 0 !important; /* 下の独自文字列表示部分との余白 */
  padding: 0 !important;
}


/* --- 7. スライダーの2段化と見切れスクロール誘導の実装 --- */
.popular-situation-slider {
  display: grid !important;
  /* 縦に2列（2段）並べる */
  grid-template-rows: repeat(2, 1fr) !important;
  /* 要素を縦方向に埋めてから横へ増やす */
  grid-auto-flow: column !important;
  
  /* 横スクロール時に右端の要素が「半分見切れる」ように幅を調整（アフォーダンス） */
  /* スマホ：画面に2.2個分見せる */
  grid-auto-columns: calc(45% - 10px) !important; 
  gap: 15px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 10px 5px 20px 5px !important;
  margin-bottom: 20px !important;
}

@media (min-width: 600px) {
  .popular-situation-slider {
    /* タブレット：3.2個分見せる */
    grid-auto-columns: calc(30% - 10px) !important; 
  }
}
@media (min-width: 900px) {
  .popular-situation-slider {
    /* PC：4.2個分見せる */
    grid-auto-columns: calc(23% - 12px) !important; 
  }
}

.situation-slide-item {
  width: 100% !important; /* 以前のflex-basisを上書き */
  flex: none !important;
  scroll-snap-align: start !important;
}

.situation-slide-item img {
  height: 105px !important; /* スマホ2段表示でも邪魔にならない絶妙な高さ */
}

/* スマホだと女優名の省略が見切れる場合があるので調整 */
.situation-slide-title {
  padding: 8px 5px !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* --- 8. 女優一覧（人気最新）用サムネイルグリッド --- */
.actress-thumbnail-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 15px 10px !important;
  padding: 10px 0 !important;
}
@media (max-width: 600px) {
  .actress-thumbnail-grid {
    /* スマホは横幅溢れを防ぎつつ絶対に2列 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}